github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(ingress): ingress ui feedback [EE-5852] (#9982) 

Co-authored-by: testa113 <testa113>
pull/9986/head
Ali 2023-08-03 23:03:09 +12:00 committed by GitHub
parent 9845518aa9
commit acf9203580
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 157 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
View File

@ -199,7 +199,7 @@ export function IngressClassDatatable({
</p>
<ul className="ml-6">
{usedControllersToDisallow.map((controller) => (
<li key={controller.ClassName}>${controller.ClassName}</li>
<li key={controller.ClassName}>{controller.ClassName}</li>
))}
</ul>
<p>

117
app/react/kubernetes/ingresses/CreateIngressView/CreateIngressView.tsx
View File

@ -66,10 +66,8 @@ export function CreateIngressView() {
environmentId,
namespaces ? Object.keys(namespaces || {}) : []
);
const ingressControllersQuery = useIngressControllers(
environmentId,
namespace
);
const { data: ingressControllers, ...ingressControllersQuery } =
useIngressControllers(environmentId, namespace);
const createIngressMutation = useCreateIngress();
const updateIngressMutation = useUpdateIngress();
@ -171,39 +169,84 @@ export function CreateIngressView() {
const existingIngressClass = useMemo(
() =>
ingressControllersQuery.data?.find(
(i) =>
i.ClassName === ingressRule.IngressClassName ||
(i.Type === 'custom' && ingressRule.IngressClassName === '')
ingressControllers?.find(
(controller) =>
controller.ClassName === ingressRule.IngressClassName ||
(controller.Type === 'custom' && ingressRule.IngressClassName === '')
),
[ingressControllersQuery.data, ingressRule.IngressClassName]
[ingressControllers, ingressRule.IngressClassName]
);
const ingressClassOptions: Option<string>[] = useMemo(
() =>
ingressControllersQuery.data
?.filter((cls) => cls.Availability)
const ingressClassOptions: Option<string>[] = useMemo(() => {
const allowedIngressClassOptions =
ingressControllers
?.filter((controller) => !!controller.Availability)
.map((cls) => ({
label: cls.ClassName,
value: cls.ClassName,
})) || [],
[ingressControllersQuery.data]
})) || [];
// if the ingress class is not set, return only the allowed ingress classes
if (ingressRule.IngressClassName === '' || !isEdit) {
return allowedIngressClassOptions;
}
// if the ingress class is set and it exists (even if disallowed), return the allowed ingress classes + the disallowed option
const disallowedIngressClasses =
ingressControllers
?.filter(
(controller) =>
!controller.Availability &&
existingIngressClass?.ClassName === controller.ClassName
)
.map((controller) => ({
label: `${controller.ClassName} - DISALLOWED`,
value: controller.ClassName,
})) || [];
const existingIngressClassFound = ingressControllers?.find(
(controller) => existingIngressClass?.ClassName === controller.ClassName
);
if (existingIngressClassFound) {
return [...allowedIngressClassOptions, ...disallowedIngressClasses];
}
// if the ingress class is set and it doesn't exist, return the allowed ingress classes + the not found option
const notFoundIngressClassOption = {
label: `${ingressRule.IngressClassName} - NOT FOUND`,
value: ingressRule.IngressClassName || '',
};
return [...allowedIngressClassOptions, notFoundIngressClassOption];
}, [
existingIngressClass?.ClassName,
ingressControllers,
ingressRule.IngressClassName,
isEdit,
]);
const handleIngressChange = useCallback(
(key: string, val: string) => {
setIngressRule((prevRules) => {
const rule = { ...prevRules, [key]: val };
if (key === 'IngressClassName') {
rule.IngressType = ingressControllers?.find(
(c) => c.ClassName === val
)?.Type;
}
return rule;
});
},
[ingressControllers]
);
if (
(!existingIngressClass ||
(existingIngressClass && !existingIngressClass.Availability)) &&
ingressRule.IngressClassName &&
!ingressControllersQuery.isLoading
) {
const optionLabel = !ingressRule.IngressType
? `${ingressRule.IngressClassName} - NOT FOUND`
: `${ingressRule.IngressClassName} - DISALLOWED`;
ingressClassOptions.push({
label: optionLabel,
value: ingressRule.IngressClassName,
});
}
// when the ingress class options update the value to an available one
useEffect(() => {
const ingressClasses = ingressClassOptions.map((option) => option.value);
if (!ingressClasses.includes(ingressRule.IngressClassName)) {
// setting to the first available option (or undefined when there are no options)
handleIngressChange('IngressClassName', ingressClasses[0]);
}
}, [handleIngressChange, ingressClassOptions, ingressRule.IngressClassName]);
const matchedConfigs = configResults?.data?.filter(
(config) =>
@ -234,7 +277,7 @@ export function CreateIngressView() {
(ing) => ing.Name === params.name && ing.Namespace === params.namespace
);
if (ing) {
const type = ingressControllersQuery.data?.find(
const type = ingressControllers?.find(
(c) =>
c.ClassName === ing.ClassName ||
(c.Type === 'custom' && !ing.ClassName)
@ -248,7 +291,7 @@ export function CreateIngressView() {
}, [
params.name,
ingressesResults.data,
ingressControllersQuery.data,
ingressControllers,
ingressRule.IngressName,
params.namespace,
]);
@ -559,18 +602,6 @@ export function CreateIngressView() {
}
}
function handleIngressChange(key: string, val: string) {
setIngressRule((prevRules) => {
const rule = { ...prevRules, [key]: val };
if (key === 'IngressClassName') {
rule.IngressType = ingressControllersQuery.data?.find(
(c) => c.ClassName === val
)?.Type;
}
return rule;
});
}
function handleTLSChange(hostIndex: number, tls: string) {
setIngressRule((prevRules) => {
const rule = { ...prevRules };

126
app/react/kubernetes/ingresses/CreateIngressView/IngressForm.tsx
View File

@ -119,17 +119,6 @@ export function IngressForm({
}
}, [namespacesOptions, namespace, handleNamespaceChange]);
// when the ingress class options update update the value to an available one
useEffect(() => {
const ingressClasses = ingressClassOptions.map((option) => option.value);
if (
!ingressClasses.includes(rule.IngressClassName) &&
ingressClasses.length > 0
) {
handleIngressChange('IngressClassName', ingressClasses[0]);
}
}, [ingressClassOptions, rule.IngressClassName, handleIngressChange]);
return (
<Widget>
<WidgetTitle icon={Route} title="Ingress" />
@ -157,12 +146,22 @@ export function IngressForm({
) : (
<Select
name="namespaces"
options={namespacesOptions || []}
value={{ value: namespace, label: namespace }}
options={namespacesOptions}
value={
namespace
? { value: namespace, label: namespace }
: null
}
isDisabled={isEdit}
onChange={(val) =>
handleNamespaceChange(val?.value || '')
}
placeholder={
namespacesOptions.length
? 'Select a namespace'
: 'No namespaces available'
}
noOptionsMessage={() => 'No namespaces available'}
/>
)}
</div>
@ -222,18 +221,27 @@ export function IngressForm({
<>
<Select
name="ingress_class"
placeholder="Ingress name"
placeholder={
ingressClassOptions.length
? 'Select an ingress class'
: 'No ingress classes available'
}
options={ingressClassOptions}
value={{
label: rule.IngressClassName,
value: rule.IngressClassName,
}}
value={
rule.IngressClassName
? {
label: rule.IngressClassName,
value: rule.IngressClassName,
}
: null
}
onChange={(ingressClassOption) =>
handleIngressChange(
'IngressClassName',
ingressClassOption?.value || ''
)
}
noOptionsMessage={() => 'No ingress classes available'}
/>
{errors.className && (
<FormError className="error-inline mt-1">
@ -242,11 +250,6 @@ export function IngressForm({
)}
</>
)}
{errors.className && (
<FormError className="error-inline mt-1">
{errors.className}
</FormError>
)}
</div>
</div>
</div>
@ -401,13 +404,23 @@ export function IngressForm({
<Select
key={tlsOptions.toString() + host.Secret}
name={`ingress_tls_${hostIndex}`}
value={{
value: rule.Hosts[hostIndex].Secret,
label: rule.Hosts[hostIndex].Secret || 'No TLS',
}}
value={
host.Secret !== undefined
? {
value: host.Secret,
label: host.Secret || 'No TLS',
}
: null
}
onChange={(TLSOption) =>
handleTLSChange(hostIndex, TLSOption?.value || '')
}
placeholder={
tlsOptions.length
? 'Select a TLS secret'
: 'No TLS secrets available'
}
noOptionsMessage={() => 'No TLS secrets available'}
size="sm"
/>
{!host.NoHost && (
@ -472,10 +485,14 @@ export function IngressForm({
key={serviceOptions.toString() + path.ServiceName}
name={`ingress_service_${hostIndex}_${pathIndex}`}
options={serviceOptions}
value={{
value: path.ServiceName,
label: path.ServiceName || 'Select a service',
}}
value={
path.ServiceName
? {
value: path.ServiceName,
label: path.ServiceName,
}
: null
}
onChange={(serviceOption) =>
handlePathChange(
hostIndex,
@ -484,6 +501,12 @@ export function IngressForm({
serviceOption?.value || ''
)
}
placeholder={
serviceOptions.length
? 'Select a service'
: 'No services available'
}
noOptionsMessage={() => 'No services available'}
size="sm"
/>
</InputGroup>
@ -526,15 +549,20 @@ export function IngressForm({
option?.value || ''
)
}
value={{
label: (
path.ServicePort || 'Select a port'
).toString(),
value:
rule.Hosts[hostIndex].Paths[
pathIndex
].ServicePort.toString(),
}}
value={
path.ServicePort
? {
label: path.ServicePort.toString(),
value: path.ServicePort.toString(),
}
: null
}
placeholder={
servicePorts[path.ServiceName]?.length
? 'Select a port'
: 'No ports available'
}
noOptionsMessage={() => 'No ports available'}
size="sm"
/>
</InputGroup>
@ -573,10 +601,20 @@ export function IngressForm({
option?.value || ''
)
}
value={{
label: path.PathType || 'Select a path type',
value: path.PathType || '',
}}
value={
path.PathType
? {
label: path.PathType,
value: path.PathType,
}
: null
}
placeholder={
pathTypes?.length
? 'Select a path type'
: 'No path types available'
}
noOptionsMessage={() => 'No path types available'}
size="sm"
/>
</InputGroup>