Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DNS Policy form fix and load balancing fix #137

Merged
merged 2 commits into from
Oct 25, 2024
Merged

DNS Policy form fix and load balancing fix #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59c8b47
Fixed forms to be less squashed and fixed dns policy to not have lb b…
R-Lawton Oct 24, 2024
c181939
i18n
R-Lawton Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions locales/en/plugin__kuadrant-console-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
"Gateway API Target Reference": "Gateway API Target Reference",
"Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to": "Gateway: Reference to a Kubernetes resource that the policy attaches to. To create an additional gateway go to",
"Gateways": "Gateways",
"Geo": "Geo",
"Geography Label (e.g. 'eu')": "Geography Label (e.g. 'eu')",
"Geo value to apply to geo endpoints": "Geo value to apply to geo endpoints",
"Geography Label (e.g. 'EU')": "Geography Label (e.g. 'EU')",
"Getting started resources": "Getting started resources",
"Health Check": "Health Check",
"Hide for session": "Hide for session",
Expand All @@ -67,7 +67,9 @@
"Limit": "Limit",
"Limit Name": "Limit Name",
"Limit Name is required!": "Limit Name is required!",
"Load balancing options:.": "Load balancing options:.",
"Load balancing Geo": "Load balancing Geo",
"Load balancing Weight": "Load balancing Weight",
"LoadBalancing": "LoadBalancing",
"Loading..": "Loading..",
"Name": "Name",
"Namespace": "Namespace",
Expand All @@ -85,6 +87,7 @@
"RateLimit": "RateLimit",
"RateLimitPolicy": "RateLimitPolicy",
"Read about the latest information and key features in the Kuadrant highlights.": "Read about the latest information and key features in the Kuadrant highlights.",
"Reference to an existing secret resource containing DNS provider credentials and configuration": "Reference to an existing secret resource containing DNS provider credentials and configuration",
"Release Notes": "Release Notes",
"Save": "Save",
"Select a gateway": "Select a gateway",
Expand All @@ -109,7 +112,7 @@
"View all quick starts": "View all quick starts",
"View Documentation": "View Documentation",
"Visit the blog": "Visit the blog",
"Weight": "Weight",
"Weight value to apply to weighted endpoints default: 120": "Weight value to apply to weighted endpoints default: 120",
"YAML View": "YAML View",
"You can view and create HTTPRoutes": "You can view and create HTTPRoutes"
}
155 changes: 98 additions & 57 deletions src/components/KuadrantDNSPolicyCreatePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,13 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
const [loadBalancing, setLoadBalancing] = React.useState<LoadBalancing>({
geo: '',
weight: null,
defaultGeo: true,
defaultGeo: '',
});
const [healthCheck, setHealthCheck] = React.useState<HealthCheck>({
endpoint: '',
failureThreshold: null,
port: null,
protocol: null,
protocol: '',
});
const [providerRefs, setProviderRefs] = React.useState([]);
const [creationTimestamp, setCreationTimestamp] = React.useState('');
Expand All @@ -64,14 +64,21 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
const namespaceEdit = pathSplit[3];
const [formDisabled, setFormDisabled] = React.useState(false);
const [create, setCreate] = React.useState(true);
const [loadBalancingExpanded, setLoadBalancingExpanded] = React.useState(false);
const [healthExpanded, setHealthExpanded] = React.useState(false);

let isFormValid = false;

const createDNSPolicy = () => {
const hasHealthCheck =
healthCheck.endpoint ||
healthCheck.failureThreshold ||
healthCheck.port ||
healthCheck.protocol;
healthCheck.protocol != '';

const hasLoadBalancing =
loadBalancing.geo || loadBalancing.defaultGeo != '' || loadBalancing.weight;

return {
apiVersion:
resourceGVKMapping['DNSPolicy'].group + '/' + resourceGVKMapping['DNSPolicy'].version,
Expand All @@ -88,13 +95,18 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
kind: 'Gateway',
name: selectedGateway.name,
},
loadBalancing: {
weight: loadBalancing.weight,
geo: loadBalancing.geo,
defaultGeo: loadBalancing.defaultGeo,
},
providerRefs: providerRefs.length > 0 ? [providerRefs[0]] : [],

...(hasLoadBalancing
? {
loadBalancing: {
...(loadBalancing?.weight ? { weight: loadBalancing.weight } : {}),
...(loadBalancing?.geo ? { geo: loadBalancing.geo } : {}),
...(loadBalancing.defaultGeo !== ''
? { defaultGeo: loadBalancing.defaultGeo }
: {}),
},
}
: {}),
...(hasHealthCheck
? {
healthCheck: {
Expand Down Expand Up @@ -256,17 +268,23 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
const handleCancelResource = () => {
handleCancel(selectedNamespace, dnsPolicy, history);
};

if (
policyName &&
selectedNamespace &&
selectedGateway.name &&
setProviderRefs &&
loadBalancing.geo &&
loadBalancing.weight
) {
isFormValid = true;
}
const formValidation = () => {
if (
policyName &&
selectedGateway.name &&
providerRefs.length > 0 &&
(!loadBalancingExpanded ||
(loadBalancing.geo && loadBalancing.weight && loadBalancing.defaultGeo !== '')) &&
(!healthExpanded ||
(healthCheck.endpoint &&
healthCheck.failureThreshold > 0 &&
healthCheck.port > 0 &&
healthCheck.protocol !== ''))
) {
isFormValid = true;
}
return isFormValid;
};

return (
<>
Expand Down Expand Up @@ -313,48 +331,71 @@ const KuadrantDNSPolicyCreatePage: React.FC = () => {
{createView === 'form' ? (
<PageSection variant="light">
<Form className="co-m-pane__form">
<div>
<FormGroup label={t('Policy Name')} isRequired fieldId="policy-name">
<TextInput
isRequired
type="text"
id="policy-name"
name="policy-name"
value={policyName}
onChange={handlePolicyChange}
isDisabled={formDisabled}
placeholder={t('Policy name')}
/>
<FormHelperText>
<HelperText>
<HelperTextItem>{t('Unique name of the DNS Policy')}</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
<FormGroup label={t('Provider Ref')} isRequired fieldId="Provider-ref">
<TextInput
isRequired
type="text"
id="provider-ref"
name="provider-ref"
value={providerRefs.length > 0 ? providerRefs[0].name : ''}
onChange={handleProviderRefs}
placeholder={t('Provider Ref')}
/>
</FormGroup>
<LoadBalancingField loadBalancing={loadBalancing} onChange={setLoadBalancing} />
<ExpandableSection toggleText={t('Health Check')}>
<HealthCheckField healthCheck={healthCheck} onChange={setHealthCheck} />
</ExpandableSection>
</div>
<ActionGroup>
<FormGroup label={t('Policy Name')} isRequired fieldId="policy-name">
<TextInput
isRequired
type="text"
id="policy-name"
name="policy-name"
value={policyName}
onChange={handlePolicyChange}
isDisabled={formDisabled}
placeholder={t('Policy name')}
/>
<FormHelperText>
<HelperText>
<HelperTextItem>{t('Unique name of the DNS Policy')}</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
<FormGroup label={t('Provider Ref')} isRequired fieldId="Provider-ref">
<TextInput
isRequired
type="text"
id="provider-ref"
name="provider-ref"
value={providerRefs.length > 0 ? providerRefs[0].name : ''}
onChange={handleProviderRefs}
placeholder={t('Provider Ref')}
/>
<FormHelperText>
<HelperText>
<HelperTextItem>
{t(
'Reference to an existing secret resource containing DNS provider credentials and configuration',
)}
</HelperTextItem>
</HelperText>
</FormHelperText>
</FormGroup>
<ExpandableSection
toggleText={t('LoadBalancing')}
className="pf-u-mb-0"
isExpanded={loadBalancingExpanded}
onToggle={() => setLoadBalancingExpanded(!loadBalancingExpanded)}
>
<LoadBalancingField
loadBalancing={loadBalancing}
onChange={setLoadBalancing}
formDisabled={formDisabled}
/>
</ExpandableSection>
<ExpandableSection
toggleText={t('Health Check')}
className="pf-u-mt-0"
isExpanded={healthExpanded}
onToggle={() => setHealthExpanded(!healthExpanded)}
>
<HealthCheckField healthCheck={healthCheck} onChange={setHealthCheck} />
</ExpandableSection>
<ActionGroup className="pf-u-mt-0">
<KuadrantCreateUpdate
model={dnsPolicyModel}
resource={dnsPolicy}
policyType="dns"
history={history}
validation={isFormValid}
validation={formValidation()}
/>
<Button variant="link" onClick={handleCancelResource}>
{t('Cancel')}
Expand Down
76 changes: 36 additions & 40 deletions src/components/KuadrantTLSCreatePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,47 +295,43 @@ const KuadrantTLSCreatePage: React.FC = () => {
</HelperText>
</FormHelperText>
</FormGroup>
<FormGroup fieldId="gateway-select" isRequired>
<GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
</FormGroup>
<FormGroup fieldId="certmanger-select" isRequired>
<FormGroup
role="radiogroup"
isInline
fieldId="cert-manager-issuer"
label={t('Cert manager issuer type')}
isRequired
aria-labelledby="issuer-label"
>
<Radio
label={t('Cluster issuer')}
isChecked={certIssuerType === 'clusterissuer'}
onChange={() => {
setCertIssuerType('clusterissuer');
}}
id="cluster-issuer"
name="issuer"
/>
<Radio
label={t('Issuer')}
isChecked={certIssuerType === 'issuer'}
onChange={() => {
setCertIssuerType('issuer');
}}
id="issuer"
name="issuer"
/>
</FormGroup>
{certIssuerType === 'clusterissuer' ? (
<ClusterIssuerSelect
selectedClusterIssuer={selectedClusterIssuers}
onChange={setSelectedClusterIssuers}
/>
) : (
<IssuerSelect selectedIssuer={selectedIssuer} onChange={setSelectedIssuers} />
)}
<GatewaySelect selectedGateway={selectedGateway} onChange={setSelectedGateway} />
<FormGroup
role="radiogroup"
isInline
fieldId="cert-manager-issuer"
label={t('Cert manager issuer type')}
isRequired
aria-labelledby="issuer-label"
>
<Radio
label={t('Cluster issuer')}
isChecked={certIssuerType === 'clusterissuer'}
onChange={() => {
setCertIssuerType('clusterissuer');
}}
id="cluster-issuer"
name="issuer"
/>
<Radio
label={t('Issuer')}
isChecked={certIssuerType === 'issuer'}
onChange={() => {
setCertIssuerType('issuer');
}}
id="issuer"
name="issuer"
/>
</FormGroup>
<ActionGroup>
{certIssuerType === 'clusterissuer' ? (
<ClusterIssuerSelect
selectedClusterIssuer={selectedClusterIssuers}
onChange={setSelectedClusterIssuers}
/>
) : (
<IssuerSelect selectedIssuer={selectedIssuer} onChange={setSelectedIssuers} />
)}
<ActionGroup className="pf-u-mt-0">
<KuadrantCreateUpdate
model={tlsPolicyModel}
resource={tlsPolicy}
Expand Down
25 changes: 20 additions & 5 deletions src/components/dnspolicy/HealthCheckField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,12 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })

return (
<>
<FormGroup label={t('Endpoint')} isRequired fieldId="health-check-endpoint">
<FormGroup
label={t('Endpoint')}
isRequired
fieldId="health-check-endpoint"
className="pf-u-mb-md"
>
<TextInput
id="health-check-endpoint"
value={healthCheck.endpoint}
Expand All @@ -23,7 +28,12 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
placeholder="/"
/>
</FormGroup>
<FormGroup label={t('Failure Threshold')} isRequired fieldId="health-check-failure-threshold">
<FormGroup
label={t('Failure Threshold')}
isRequired
fieldId="health-check-failure-threshold"
className="pf-u-mb-md"
>
<TextInput
id="health-check-failure-threshold"
type="number"
Expand All @@ -36,7 +46,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
placeholder="0"
/>
</FormGroup>
<FormGroup label={t('Port')} isRequired fieldId="health-check-port">
<FormGroup label={t('Port')} isRequired fieldId="health-check-port" className="pf-u-mb-md">
<TextInput
id="health-check-port"
type="number"
Expand All @@ -49,7 +59,12 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
placeholder="0"
/>
</FormGroup>
<FormGroup label={t('Protocol')} isRequired fieldId="health-check-protocol">
<FormGroup
label={t('Protocol')}
isRequired
fieldId="health-check-protocol"
className="pf-u-mb-md"
>
<FormSelect
id="health-check-protocol"
value={healthCheck.protocol}
Expand All @@ -59,7 +74,7 @@ const HealthCheckField: React.FC<HealthCheckProps> = ({ healthCheck, onChange })
isRequired
aria-label={t('Select a Protocol')}
>
<FormSelectOption key="placeholder" value="" label={t('Select a Protocol')} isDisabled />
<FormSelectOption key="placeholder" value="" label={t('Select a Protocol')} />
<FormSelectOption key="HTTP" value="HTTP" label="HTTP" />
<FormSelectOption key="HTTPS" value="HTTPS" label="HTTPS" />
</FormSelect>
Expand Down
Loading
Loading