Skip to content

Commit 02b0f94

Browse files
ammont82ammont82
authored
Merge branch 'master' into MGMT-17013-colors-warning-is-incorrect
2 parents d45f207 + 7c9bea1 commit 02b0f94

File tree

8 files changed

+195
-116
lines changed

8 files changed

+195
-116
lines changed

Diff for: ‎libs/ui-lib/lib/common/components/clusterWizard/networkingSteps/ManagedNetworkingControlGroup.tsx

+32-24
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { FormGroup, TooltipProps } from '@patternfly/react-core';
2+
import { FormGroup, Split, SplitItem, TooltipProps } from '@patternfly/react-core';
33
import { PopoverIcon, getFieldId } from '../../ui';
44
import RadioFieldWithTooltip from '../../ui/formik/RadioFieldWithTooltip';
55
import { useTranslation } from '../../../hooks/use-translation-wrapper';
@@ -35,29 +35,37 @@ export const ManagedNetworkingControlGroup = ({
3535
fieldId={getFieldId(GROUP_NAME, 'radio')}
3636
isInline
3737
>
38-
<RadioFieldWithTooltip
39-
tooltipProps={tooltipPropsCmn}
40-
name={GROUP_NAME}
41-
isDisabled={disabled}
42-
value={'clusterManaged'}
43-
label={t('ai:Cluster-Managed Networking')}
44-
/>
45-
<RadioFieldWithTooltip
46-
tooltipProps={tooltipPropsUmn}
47-
name={GROUP_NAME}
48-
isDisabled={disabled}
49-
value={'userManaged'}
50-
label={
51-
<>
52-
<span>{t('ai:User-Managed Networking')}</span>{' '}
53-
<PopoverIcon
54-
bodyContent={t(
55-
"ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
56-
)}
57-
/>
58-
</>
59-
}
60-
/>
38+
<Split>
39+
<SplitItem>
40+
<RadioFieldWithTooltip
41+
tooltipProps={tooltipPropsCmn}
42+
name={GROUP_NAME}
43+
isDisabled={disabled}
44+
value={'clusterManaged'}
45+
label={t('ai:Cluster-Managed Networking')}
46+
/>
47+
</SplitItem>
48+
</Split>
49+
<Split>
50+
<SplitItem>
51+
<RadioFieldWithTooltip
52+
tooltipProps={tooltipPropsUmn}
53+
name={GROUP_NAME}
54+
isDisabled={disabled}
55+
value={'userManaged'}
56+
label={
57+
<>
58+
<span>{t('ai:User-Managed Networking')}</span>{' '}
59+
<PopoverIcon
60+
bodyContent={t(
61+
"ai:With User-Managed Networking, you'll need to provide and configure a load balancer for the API and ingress endpoints.",
62+
)}
63+
/>
64+
</>
65+
}
66+
/>
67+
</SplitItem>
68+
</Split>
6169
</FormGroup>
6270
);
6371
};

Diff for: ‎libs/ui-lib/lib/ocm/components/clusterConfiguration/networkConfiguration/NetworkConfiguration.tsx

+68-52
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { useFormikContext } from 'formik';
33
import { useSelector } from 'react-redux';
4-
import { Grid, Tooltip } from '@patternfly/react-core';
4+
import { Stack, StackItem, Tooltip } from '@patternfly/react-core';
55
import { VirtualIPControlGroup, VirtualIPControlGroupProps } from './VirtualIPControlGroup';
66
import {
77
canBeDualStack,
@@ -241,71 +241,87 @@ const NetworkConfiguration = ({
241241
}, [featureSupportLevelContext]);
242242

243243
return (
244-
<Grid hasGutter>
245-
<ManagedNetworkingControlGroup
246-
disabled={isViewerMode || managedNetworkingState.isDisabled}
247-
tooltipCmnDisabled={managedNetworkingState.clusterManagedDisabledReason}
248-
tooltipUmnDisabled={managedNetworkingState.userManagedDisabledReason}
249-
/>
244+
<Stack hasGutter>
245+
<StackItem>
246+
<ManagedNetworkingControlGroup
247+
disabled={isViewerMode || managedNetworkingState.isDisabled}
248+
tooltipCmnDisabled={managedNetworkingState.clusterManagedDisabledReason}
249+
tooltipUmnDisabled={managedNetworkingState.userManagedDisabledReason}
250+
/>
251+
</StackItem>
250252

251253
{isUserManagedNetworking && (
252-
<UserManagedNetworkingTextContent
253-
shouldDisplayLoadBalancersBullet={!isSNOCluster}
254-
docVersion={cluster.openshiftVersion}
255-
/>
254+
<StackItem>
255+
<UserManagedNetworkingTextContent
256+
shouldDisplayLoadBalancersBullet={!isSNOCluster}
257+
docVersion={cluster.openshiftVersion}
258+
/>
259+
</StackItem>
256260
)}
257261

258262
{(isSNOCluster || !isUserManagedNetworking) && (
259-
<StackTypeControlGroup
260-
clusterId={cluster.id}
261-
isDualStackSelectable={isDualStackSelectable}
262-
hostSubnets={hostSubnets}
263-
/>
263+
<StackItem>
264+
<StackTypeControlGroup
265+
clusterId={cluster.id}
266+
isDualStackSelectable={isDualStackSelectable}
267+
hostSubnets={hostSubnets}
268+
/>
269+
</StackItem>
264270
)}
265271
{isSDNSupported && (
266-
<NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
272+
<StackItem>
273+
<NetworkTypeControlGroup isDisabled={isViewerMode} isSDNSelectable={isSDNSelectable} />
274+
</StackItem>
267275
)}
268276

269277
{!(isUserManagedNetworking && !isSNOCluster) && (
270-
<AvailableSubnetsControl
271-
clusterId={cluster.id}
272-
hostSubnets={hostSubnets}
273-
isRequired={!isUserManagedNetworking}
274-
isDisabled={
275-
(cluster.vipDhcpAllocation &&
276-
selectApiVip(cluster) === '' &&
277-
selectIngressVip(cluster) === '') ||
278-
hostSubnets.length === 0 ||
279-
false
280-
}
281-
/>
278+
<StackItem>
279+
<AvailableSubnetsControl
280+
clusterId={cluster.id}
281+
hostSubnets={hostSubnets}
282+
isRequired={!isUserManagedNetworking}
283+
isDisabled={
284+
(cluster.vipDhcpAllocation &&
285+
selectApiVip(cluster) === '' &&
286+
selectIngressVip(cluster) === '') ||
287+
hostSubnets.length === 0 ||
288+
false
289+
}
290+
/>
291+
</StackItem>
282292
)}
283293

284294
{!isUserManagedNetworking && (
285-
<VirtualIPControlGroup
286-
cluster={cluster}
287-
isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled || !isSDNSupported}
288-
supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
289-
/>
295+
<StackItem>
296+
<VirtualIPControlGroup
297+
cluster={cluster}
298+
isVipDhcpAllocationDisabled={isVipDhcpAllocationDisabled || !isSDNSupported}
299+
supportLevel={featureSupportLevelContext.getFeatureSupportLevel('VIP_AUTO_ALLOC')}
300+
/>
301+
</StackItem>
290302
)}
291-
292-
<Tooltip
293-
content={'Advanced networking properties must be configured in dual-stack'}
294-
hidden={!isDualStack}
295-
position={'top-start'}
296-
>
297-
<OcmCheckbox
298-
id="useAdvancedNetworking"
299-
label="Use advanced networking"
300-
description="Configure advanced networking properties (e.g. CIDR ranges)."
301-
isChecked={isAdvanced}
302-
onChange={(_event, value) => toggleAdvConfiguration(value)}
303-
isDisabled={isDualStack}
304-
/>
305-
</Tooltip>
306-
307-
{isAdvanced && <AdvancedNetworkFields />}
308-
</Grid>
303+
<StackItem>
304+
<Tooltip
305+
content={'Advanced networking properties must be configured in dual-stack'}
306+
hidden={!isDualStack}
307+
position={'top-start'}
308+
>
309+
<OcmCheckbox
310+
id="useAdvancedNetworking"
311+
label="Use advanced networking"
312+
description="Configure advanced networking properties (e.g. CIDR ranges)."
313+
isChecked={isAdvanced}
314+
onChange={(_event, value) => toggleAdvConfiguration(value)}
315+
isDisabled={isDualStack}
316+
/>
317+
</Tooltip>
318+
</StackItem>
319+
{isAdvanced && (
320+
<StackItem>
321+
<AdvancedNetworkFields />
322+
</StackItem>
323+
)}
324+
</Stack>
309325
);
310326
};
311327

Diff for: ‎libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/CnvCheckbox.tsx

+22-3
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,11 @@ const CNV_FIELD_NAME = 'useContainerNativeVirtualization';
1919
const CnvLabel = ({
2020
clusterId,
2121
disabledReason,
22+
isVersionEqualsOrMajorThan4_15,
2223
}: {
2324
clusterId: ClusterOperatorProps['clusterId'];
2425
disabledReason?: string;
26+
isVersionEqualsOrMajorThan4_15: boolean;
2527
}) => {
2628
return (
2729
<>
@@ -31,7 +33,12 @@ const CnvLabel = ({
3133
<PopoverIcon
3234
component={'a'}
3335
headerContent="Additional requirements"
34-
bodyContent={<CnvHostRequirements clusterId={clusterId} />}
36+
bodyContent={
37+
<CnvHostRequirements
38+
clusterId={clusterId}
39+
isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
40+
/>
41+
}
3542
/>
3643
</>
3744
);
@@ -50,7 +57,13 @@ const CnvHelperText = () => {
5057
);
5158
};
5259

53-
const CnvCheckbox = ({ clusterId }: ClusterOperatorProps) => {
60+
const CnvCheckbox = ({
61+
clusterId,
62+
isVersionEqualsOrMajorThan4_15,
63+
}: {
64+
clusterId: ClusterOperatorProps['clusterId'];
65+
isVersionEqualsOrMajorThan4_15: boolean;
66+
}) => {
5467
const fieldId = getFieldId(CNV_FIELD_NAME, 'input');
5568

5669
const featureSupportLevel = useNewFeatureSupportLevel();
@@ -70,7 +83,13 @@ const CnvCheckbox = ({ clusterId }: ClusterOperatorProps) => {
7083
<FormGroup isInline fieldId={fieldId}>
7184
<OcmCheckboxField
7285
name={CNV_FIELD_NAME}
73-
label={<CnvLabel clusterId={clusterId} disabledReason={disabledReason} />}
86+
label={
87+
<CnvLabel
88+
clusterId={clusterId}
89+
disabledReason={disabledReason}
90+
isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
91+
/>
92+
}
7493
helperText={<CnvHelperText />}
7594
isDisabled={!!disabledReason}
7695
/>

Diff for: ‎libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/CnvHostRequirements.tsx

+10-8
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@ import { useClusterPreflightRequirements } from '../../../hooks';
55
import { ErrorState, LoadingState, OPERATOR_NAME_CNV, RenderIf } from '../../../../common';
66
import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
77
import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
8+
import { getOdfLvmsText } from './utils';
89

9-
const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
10+
const CnvHostRequirements = ({
11+
clusterId,
12+
isVersionEqualsOrMajorThan4_15,
13+
}: {
14+
clusterId: Cluster['id'];
15+
isVersionEqualsOrMajorThan4_15: boolean;
16+
}) => {
1017
const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
1118
const isSingleNode = useSelector(selectIsCurrentClusterSNO);
1219

@@ -23,7 +30,7 @@ const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
2330

2431
const workerRequirements = cnvRequirements?.requirements?.worker?.quantitative;
2532
const masterRequirements = cnvRequirements?.requirements?.master?.quantitative;
26-
33+
const odfLvmsText = getOdfLvmsText(isSingleNode, isVersionEqualsOrMajorThan4_15);
2734
return (
2835
<>
2936
<List>
@@ -48,12 +55,7 @@ const CnvHostRequirements = ({ clusterId }: { clusterId: Cluster['id'] }) => {
4855
? ` and ${masterRequirements?.diskSizeGb} storage space`
4956
: ''}
5057
</ListItem>
51-
<RenderIf condition={!isSingleNode}>
52-
<ListItem>
53-
OpenShift Data Foundation (recommended for full functionality) or another persistent
54-
storage service
55-
</ListItem>
56-
</RenderIf>
58+
<ListItem>{odfLvmsText}</ListItem>
5759
</List>
5860
</>
5961
);

Diff for: ‎libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/MceCheckbox.tsx

+40-20
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,36 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/exter
44
import { getFieldId, PopoverIcon, MCE_LINK } from '../../../../common';
55
import { OcmCheckboxField } from '../../ui/OcmFormFields';
66
import { useNewFeatureSupportLevel } from '../../../../common/components/newFeatureSupportLevels';
7+
import { useSelector } from 'react-redux';
8+
import { selectIsCurrentClusterSNO } from '../../../store/slices/current-cluster/selectors';
9+
import { getOdfLvmsText } from './utils';
710

811
const MCE_FIELD_NAME = 'useMultiClusterEngine';
912

10-
const MceLabel = ({ disabledReason }: { disabledReason?: string }) => (
11-
<>
12-
<Tooltip hidden={!disabledReason} content={disabledReason}>
13-
<span>Install multicluster engine </span>
14-
</Tooltip>
15-
<PopoverIcon
16-
id={MCE_FIELD_NAME}
17-
component={'a'}
18-
headerContent="Additional requirements"
19-
bodyContent={
20-
<>
21-
OpenShift Data Foundation (recommended for creating additional on-premise clusters) or
22-
another persistent storage service
23-
</>
24-
}
25-
/>
26-
</>
27-
);
13+
const MceLabel = ({
14+
disabledReason,
15+
isVersionEqualsOrMajorThan4_15,
16+
isSNO,
17+
}: {
18+
disabledReason?: string;
19+
isVersionEqualsOrMajorThan4_15: boolean;
20+
isSNO: boolean;
21+
}) => {
22+
const odfLvmsText = getOdfLvmsText(isSNO, isVersionEqualsOrMajorThan4_15);
23+
return (
24+
<>
25+
<Tooltip hidden={!disabledReason} content={disabledReason}>
26+
<span>Install multicluster engine </span>
27+
</Tooltip>
28+
<PopoverIcon
29+
id={MCE_FIELD_NAME}
30+
component={'a'}
31+
headerContent="Additional requirements"
32+
bodyContent={<>{odfLvmsText}</>}
33+
/>
34+
</>
35+
);
36+
};
2837

2938
const MceHelperText = () => {
3039
return (
@@ -39,15 +48,26 @@ const MceHelperText = () => {
3948
);
4049
};
4150

42-
const MceCheckbox = () => {
51+
const MceCheckbox = ({
52+
isVersionEqualsOrMajorThan4_15,
53+
}: {
54+
isVersionEqualsOrMajorThan4_15: boolean;
55+
}) => {
56+
const isSNO = useSelector(selectIsCurrentClusterSNO);
4357
const featureSupportLevelContext = useNewFeatureSupportLevel();
4458
const fieldId = getFieldId(MCE_FIELD_NAME, 'input');
4559
const disabledReason = featureSupportLevelContext.getFeatureDisabledReason('MCE');
4660
return (
4761
<FormGroup isInline fieldId={fieldId}>
4862
<OcmCheckboxField
4963
name={MCE_FIELD_NAME}
50-
label={<MceLabel disabledReason={disabledReason} />}
64+
label={
65+
<MceLabel
66+
disabledReason={disabledReason}
67+
isVersionEqualsOrMajorThan4_15={isVersionEqualsOrMajorThan4_15}
68+
isSNO={isSNO}
69+
/>
70+
}
5171
isDisabled={!!disabledReason}
5272
helperText={<MceHelperText />}
5373
/>

0 commit comments

Comments
 (0)