Skip to content

Commit

Permalink
Fixed forms to be less squashed and fixed dns policy to not have lb b…
Browse files Browse the repository at this point in the history 
…e a requiremnet
  • Loading branch information
@R-Lawton
R-Lawton committed Oct 24, 2024
1 parent b088bf7 commit 6301338
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 134 deletions.
155 changes: 98 additions & 57 deletions src/components/KuadrantDNSPolicyCreatePage.tsx
View file
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
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
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

0 comments on commit 6301338

Please sign in to comment.