MGMT-19364: Implement UI for external platform

libs/locales/lib/en/translation.json

@@ -309,6 +309,7 @@
   "ai:Exclude destination domain names, IP addresses, or other network CIDRs from proxying by adding them to this comma-separated list.": "Exclude destination domain names, IP addresses, or other network CIDRs from proxying by adding them to this comma-separated list.",
   "ai:Exposes the service externally using a cloud provider's load balancer": "Exposes the service externally using a cloud provider's load balancer",
   "ai:Exposes the service on each node's IP at a static port": "Exposes the service on each node's IP at a static port",
+  "ai:External cloud provider": "External cloud provider",
   "ai:Externally provisioned": "Externally provisioned",
   "ai:Failed": "Failed",
   "ai:Failed on {{humanizedDataTime}}": "Failed on {{humanizedDataTime}}",
@@ -448,6 +449,7 @@
   "ai:Installing {{operatorsCountString}}": "Installing {{operatorsCountString}}",
   "ai:Installing SNO will result in an OpenShift deployment that is not highly available.": "Installing SNO will result in an OpenShift deployment that is not highly available.",
   "ai:Insufficient": "Insufficient",
+  "ai:Integrate with external partner platforms": "Integrate with external partner platforms",
   "ai:IP address block from which Pod IPs are allocated This block must not overlap with existing physical networks. These IP addresses are used for the Pod network, and if you need to access the Pods from an external network, configure load balancers and routers to manage the traffic.": "IP address block from which Pod IPs are allocated. This block must not overlap with existing physical networks. These IP addresses are used for the Pod network, and if you need to access the Pods from an external network, configure load balancers and routers to manage the traffic.",
   "ai:IP allocation from the DHCP server timed out.": "IP allocation from the DHCP server timed out.",
   "ai:IPv4 address": "IPv4 address",
@@ -570,6 +572,7 @@
   "ai:No namespace with hosts is available": "No namespace with hosts is available",
   "ai:No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.": "No OpenShift images available for selected CPU architecture {{cpuArchitecture}}.",
   "ai:No overlapping CIDR": "No overlapping CIDR",
+  "ai:No platform integration": "No platform integration",
   "ai:No proxy": "No proxy",
   "ai:No proxy domains": "No proxy domains",
   "ai:No release image is available.": "No release image is available.",
@@ -601,6 +604,7 @@
   "ai:Number of characters between dots (.) must be 1-63": "Number of characters between dots (.) must be 1-63",
   "ai:Number of control plane nodes": "Number of control plane nodes",
   "ai:Number of hosts": "Number of hosts",
+  "ai:Nutanix": "Nutanix",
   "ai:NVIDIA GPU": "NVIDIA GPU",
   "ai:NVIDIA GPU requirements": "NVIDIA GPU requirements",
   "ai:OCS requirements": "OCS requirements",
@@ -900,6 +904,7 @@
   "ai:View host events": "View host events",
   "ai:VIP IP allocation from DHCP server has been timed out": "VIP IP allocation from DHCP server has timed out",
   "ai:Virtual machine": "Virtual machine",
+  "ai:vSphere": "vSphere",
   "ai:Vsphere disk uuid enabled": "Vsphere disk uuid enabled",
   "ai:Waiting for host...": "Waiting for host...",
   "ai:Waiting for host..._plural": "Waiting for hosts...",

libs/ui-lib/lib/cim/components/ClusterDeployment/ClusterDetailsFormFields.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
 import CpuArchitectureDropdown from '../common/CpuArchitectureDropdown';
 import { getNetworkType } from '../helpers';
 import ControlPlaneNodesDropdown from '../../../common/components/clusterConfiguration/ControlPlaneNodesDropdown';
+import { ExternalPlatformsDropdown } from '../../../common/components/clusterConfiguration/ExternalPlatformsDropdown';
 export type ClusterDetailsFormFieldsProps = {
   isEditFlow: boolean;
   forceOpenshiftVersion?: string;
@@ -111,6 +112,9 @@ export const ClusterDetailsFormFields: React.FC<ClusterDetailsFormFieldsProps> =
         />
       )}
       <ControlPlaneNodesDropdown isNutanix={isNutanix} isDisabled={isEditFlow} />
+
+      <ExternalPlatformsDropdown isEditFlow={isEditFlow} />
+
       {!isNutanix && (
         <CpuArchitectureDropdown cpuArchitectures={cpuArchitectures} isDisabled={isEditFlow} />
       )}

libs/ui-lib/lib/cim/components/helpers/toAssisted.ts

@@ -1,6 +1,11 @@
 import cloneDeep from 'lodash-es/cloneDeep.js';
 import { AgentK8sResource } from '../../types/k8s/agent';
-import { Cluster, Host, Inventory } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  Cluster,
+  Host,
+  Inventory,
+  PlatformType,
+} from '@openshift-assisted/types/assisted-installer-service';
 import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
 import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
 import { getAgentStatusKey, getClusterStatus } from './status';
@@ -171,6 +176,9 @@ export const getAICluster = ({
     cpuArchitecture: getClusterDeploymentCpuArchitecture(clusterDeployment, infraEnv),
     networkType: agentClusterInstall?.spec?.networking.networkType,
     controlPlaneCount: agentClusterInstall?.spec?.provisionRequirements.controlPlaneAgents || 3,
+    platform: {
+      type: (agentClusterInstall?.spec?.platformType?.toLowerCase() || 'none') as PlatformType,
+    },
   };
   /*
   aiCluster.agentSelectorMasterLabels =

libs/ui-lib/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TFunction } from 'i18next';
+import { useField, useFormikContext } from 'formik';
+import { PlatformType } from '@openshift-assisted/types/./assisted-installer-service';
+import { useTranslation } from '../../hooks/use-translation-wrapper';
+import { ClusterDetailsValues } from '../clusterWizard';
+import { SelectField, StaticTextField } from '../ui';
+
+const getPlatforms = (t: TFunction): { [key in PlatformType]: string } => ({
+  none: t('ai:No platform integration'),
+  baremetal: t('ai:Bare metal'),
+  nutanix: t('ai:Nutanix'),
+  vsphere: t('ai:vSphere'),
+  external: t('ai:External cloud provider'),
+});
+
+export const ExternalPlatformsDropdown = ({ isEditFlow }: { isEditFlow: boolean }) => {
+  const { values, setFieldValue } = useFormikContext<ClusterDetailsValues>();
+  const [{ value }] = useField<PlatformType>('platform');
+
+  const { t } = useTranslation();
+  const platformLabels = getPlatforms(t);
+
+  const options = Object.entries(platformLabels).map(([value, label]) => ({ value, label }));
+
+  React.useEffect(() => {
+    if (['none', 'external'].includes(value) && !values.userManagedNetworking) {
+      setFieldValue('userManagedNetworking', true);
+    } else if (!['none', 'external'].includes(value) && values.userManagedNetworking) {
+      setFieldValue('userManagedNetworking', false);
+    }
+  }, [setFieldValue, value, values.userManagedNetworking]);
+
+  return isEditFlow ? (
+    <StaticTextField
+      name={'platform'}
+      label={t('ai:Integrate with external partner platforms')}
+      isRequired
+    >
+      {platformLabels[value]}
+    </StaticTextField>
+  ) : (
+    <SelectField
+      label={t('ai:Integrate with external partner platforms')}
+      options={options}
+      name={'platform'}
+      isRequired
+    />
+  );
+};