@openshift-assisted/ui-lib 2.7.12-cim → 2.8.3-cim

package/lib/cim/components/ClusterDeployment/ClusterDeploymentHostsSelectionBasic.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { CheckboxField, NumberInputField } from '../../../common';
+import { HOSTS_MAX_COUNT, HOSTS_MIN_COUNT } from './constants';
+import { useFormikContext } from 'formik';
+import { ClusterDeploymentHostsSelectionValues } from './types';
+import LocationsSelector from './LocationsSelector';
+import { AgentK8sResource } from '../../types';
+import AgentsSelectionHostCountAlerts from '../Agent/AgentsSelectionHostCountAlerts';
+import AgentsSelectionHostCountLabelIcon from '../Agent/AgentsSelectionHostCountLabelIcon';
+import { useAgentsAutoSelection } from '../Agent/AgentsSelectionUtils';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+type ClusterDeploymentHostsSelectionBasicProps = {
+  availableAgents: AgentK8sResource[];
+  isSNOCluster: boolean;
+};
+
+const ClusterDeploymentHostsSelectionBasic: React.FC<ClusterDeploymentHostsSelectionBasicProps> = ({
+  isSNOCluster,
+  availableAgents,
+}) => {
+  const { setFieldValue } = useFormikContext<ClusterDeploymentHostsSelectionValues>();
+  const { matchingAgents, selectedAgents, hostCount } = useAgentsAutoSelection(availableAgents);
+  const { t } = useTranslation();
+
+  React.useEffect(() => {
+    setFieldValue('useMastersAsWorkers', hostCount === 3);
+  }, [hostCount, setFieldValue]);
+
+  return (
+    <>
+      <Grid hasGutter>
+        <GridItem>
+          <NumberInputField
+            label={t('ai:Number of hosts')}
+            labelIcon={<AgentsSelectionHostCountLabelIcon />}
+            idPostfix="hostcount"
+            name="hostCount"
+            isRequired
+            minValue={isSNOCluster ? 1 : HOSTS_MIN_COUNT}
+            maxValue={isSNOCluster ? 1 : HOSTS_MAX_COUNT}
+            isDisabled={isSNOCluster}
+          />
+        </GridItem>
+
+        <GridItem>
+          {/* That field is not supported ATM - (requires MGMT-7677) */}
+          <CheckboxField
+            idPostfix="mastersasworkers"
+            name="useMastersAsWorkers"
+            label={t('ai:Run workloads on control plane hosts')}
+            isDisabled={hostCount !== 3}
+          />
+        </GridItem>
+
+        <GridItem>
+          <LocationsSelector agents={availableAgents} />
+        </GridItem>
+      </Grid>
+
+      <AgentsSelectionHostCountAlerts
+        matchingAgentsCount={matchingAgents.length}
+        selectedAgents={selectedAgents}
+        targetHostCount={hostCount}
+      />
+    </>
+  );
+};
+
+export default ClusterDeploymentHostsSelectionBasic;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentKubeconfigDownload.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { saveAs } from 'file-saver';
+import KubeconfigDownload from '../../../common/components/clusterDetail/KubeconfigDownload';
+import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
+import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
+import { getClusterStatus } from '../helpers/status';
+import { FetchSecret } from './types';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+type ClusterDeploymentKubeconfigDownloadProps = {
+  clusterDeployment: ClusterDeploymentK8sResource;
+  agentClusterInstall: AgentClusterInstallK8sResource;
+  fetchSecret: FetchSecret;
+};
+
+const ClusterDeploymentKubeconfigDownload = ({
+  clusterDeployment,
+  agentClusterInstall,
+  fetchSecret,
+}: ClusterDeploymentKubeconfigDownloadProps) => {
+  const [clusterStatus] = getClusterStatus(agentClusterInstall);
+  const { t } = useTranslation();
+  const handleKubeconfigDownload = async () => {
+    const kubeconfigSecretName =
+      agentClusterInstall.spec?.clusterMetadata?.adminKubeconfigSecretRef?.name ||
+      clusterDeployment.spec?.clusterMetadata?.adminKubeconfigSecretRef?.name;
+    const kubeconfigSecretNamespace = clusterDeployment.metadata?.namespace;
+    if (kubeconfigSecretName && kubeconfigSecretNamespace) {
+      try {
+        const kubeconfigSecret = await fetchSecret(kubeconfigSecretName, kubeconfigSecretNamespace);
+        const kubeconfig = kubeconfigSecret.data?.kubeconfig;
+
+        if (!kubeconfig) throw new Error(t('ai:Kubeconfig is empty.'));
+
+        const blob = new Blob([atob(kubeconfig)], { type: 'text/plain;charset=utf-8' });
+        saveAs(blob, 'kubeconfig.yaml');
+      } catch (e) {
+        console.error('Failed to fetch kubeconfig secret.', e);
+      }
+    }
+  };
+
+  return (
+    <KubeconfigDownload
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      handleDownload={handleKubeconfigDownload}
+      clusterId={clusterDeployment.metadata?.uid || ''}
+      status={clusterStatus}
+    />
+  );
+};
+
+export default ClusterDeploymentKubeconfigDownload;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentNetworkingForm.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import {
+  Alert,
+  Form,
+  Grid,
+  GridItem,
+  Spinner,
+  Text,
+  TextContent,
+  TextVariants,
+  Checkbox,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import {
+  ClusterDefaultConfig,
+  CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4,
+  getHostSubnets,
+  SecurityFields,
+  ProxyFields,
+  ProxyInputFields,
+} from '../../../common';
+import NetworkConfiguration from './NetworkConfiguration';
+import ClusterDeploymentHostsNetworkTable from './ClusterDeploymentHostsNetworkTable';
+import { getAICluster, getIsSNOCluster } from '../helpers';
+import {
+  AgentClusterInstallK8sResource,
+  AgentK8sResource,
+  ClusterDeploymentK8sResource,
+  InfraEnvK8sResource,
+} from '../../types';
+import { AgentTableActions, ClusterDeploymentNetworkingValues } from './types';
+import { useFormikContext } from 'formik';
+import { getGridSpans } from './helpers';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { Trans } from 'react-i18next';
+
+// TODO(mlibra): So far a constant. Should be queried from somewhere.
+export const defaultNetworkSettings: ClusterDefaultConfig = CLUSTER_DEFAULT_NETWORK_SETTINGS_IPV4;
+
+type ClusterDeploymentNetworkingFormProps = {
+  clusterDeployment: ClusterDeploymentK8sResource;
+  agentClusterInstall: AgentClusterInstallK8sResource;
+  agents: AgentK8sResource[];
+  onValuesChanged?: (values: ClusterDeploymentNetworkingValues) => void;
+  infraEnvWithProxy: InfraEnvK8sResource | undefined;
+  sameProxies: boolean;
+  infraEnvsError: string | undefined;
+  infraEnvsLoading: boolean;
+  isPreviewOpen: boolean;
+  onEditHost: AgentTableActions['onEditHost'];
+  onEditRole: AgentTableActions['onEditRole'];
+  onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
+  docVersion: string;
+};
+
+const ClusterDeploymentNetworkingForm: React.FC<ClusterDeploymentNetworkingFormProps> = ({
+  clusterDeployment,
+  agentClusterInstall,
+  agents,
+  onValuesChanged,
+  infraEnvWithProxy,
+  sameProxies,
+  infraEnvsError,
+  infraEnvsLoading,
+  isPreviewOpen,
+  onEditHost,
+  onEditRole,
+  onSetInstallationDiskId,
+  docVersion,
+}) => {
+  const { values, touched, setFieldValue, setFieldTouched } =
+    useFormikContext<ClusterDeploymentNetworkingValues>();
+  React.useEffect(() => onValuesChanged?.(values), [onValuesChanged, values]);
+  const [editProxy, setEditProxy] = React.useState(false);
+
+  const cluster = getAICluster({
+    clusterDeployment,
+    agentClusterInstall,
+    agents,
+  });
+
+  const hostSubnets = React.useMemo(() => getHostSubnets(cluster), [cluster]);
+  const { t } = useTranslation();
+  React.useEffect(() => {
+    if (!!infraEnvWithProxy && !touched.enableProxy) {
+      setFieldValue('enableProxy', true, false);
+      if (sameProxies) {
+        setFieldValue('httpProxy', infraEnvWithProxy.spec?.proxy?.httpProxy, false);
+        setFieldValue('httpsProxy', infraEnvWithProxy.spec?.proxy?.httpsProxy, false);
+        setFieldValue('noProxy', infraEnvWithProxy.spec?.proxy?.noProxy, false);
+      }
+    }
+  }, [infraEnvWithProxy, sameProxies, setFieldValue, touched.enableProxy, setFieldTouched]);
+
+  let proxyConfig = <ProxyFields />;
+  if (infraEnvWithProxy) {
+    if (!sameProxies) {
+      proxyConfig = (
+        <>
+          <TextContent>
+            <Text component="h2">{t('ai:Cluster-wide proxy')}</Text>
+            <Text component={TextVariants.p}>
+              <Trans
+                t={t}
+                components={{ bold: <strong /> }}
+                i18nKey="ai:The hosts you selected are using different proxy settings. Configure a proxy that will be applied for these hosts. <bold>Configure at least one of the proxy settings below.</bold>"
+              />
+            </Text>
+          </TextContent>
+          <ProxyInputFields />
+        </>
+      );
+    } else {
+      proxyConfig = (
+        <>
+          <Checkbox
+            id="edit-proxy"
+            label={t('ai:Edit cluster-wide proxy settings')}
+            onChange={setEditProxy}
+            isChecked={editProxy}
+            body={editProxy && <ProxyInputFields />}
+          />
+        </>
+      );
+    }
+  }
+
+  const gridSpans = getGridSpans(isPreviewOpen);
+
+  return (
+    <Form>
+      <Stack hasGutter>
+        <StackItem>
+          <Grid hasGutter>
+            <GridItem {...gridSpans}>
+              <NetworkConfiguration
+                cluster={cluster}
+                hostSubnets={hostSubnets}
+                isVipDhcpAllocationDisabled
+                defaultNetworkSettings={defaultNetworkSettings}
+                hideManagedNetworking={getIsSNOCluster(agentClusterInstall)}
+                docVersion={docVersion}
+              />
+            </GridItem>
+          </Grid>
+        </StackItem>
+        <StackItem>
+          {infraEnvsError ? (
+            <Alert title={infraEnvsError} variant="danger" isInline />
+          ) : infraEnvsLoading ? (
+            <Split hasGutter>
+              <SplitItem>
+                <Spinner isSVG size="md" />
+              </SplitItem>
+              <SplitItem>{t('ai:Loading proxy configuration')}</SplitItem>
+            </Split>
+          ) : (
+            proxyConfig
+          )}
+        </StackItem>
+        <StackItem>
+          <SecurityFields clusterSshKey={cluster.sshPublicKey} />
+        </StackItem>
+        <StackItem>
+          <TextContent>
+            <Text component="h2">{t('ai:Host inventory')}</Text>
+          </TextContent>
+          <ClusterDeploymentHostsNetworkTable
+            clusterDeployment={clusterDeployment}
+            agentClusterInstall={agentClusterInstall}
+            agents={agents}
+            onEditHost={onEditHost}
+            onEditRole={onEditRole}
+            onSetInstallationDiskId={onSetInstallationDiskId}
+          />
+        </StackItem>
+      </Stack>
+    </Form>
+  );
+};
+
+export default ClusterDeploymentNetworkingForm;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentNetworkingStep.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { Formik, useFormikContext } from 'formik';
+import { Alert, AlertVariant, Grid, GridItem } from '@patternfly/react-core';
+
+import {
+  useAlerts,
+  ClusterWizardStepHeader,
+  FormikAutoSave,
+  getFormikErrorFields,
+  clusterFieldLabels,
+} from '../../../common';
+
+import {
+  ClusterDeploymentDetailsNetworkingProps,
+  AgentTableActions,
+  ClusterDeploymentNetworkingValues,
+} from './types';
+import ClusterDeploymentWizardFooter from './ClusterDeploymentWizardFooter';
+import ClusterDeploymentWizardStep from './ClusterDeploymentWizardStep';
+import ClusterDeploymentWizardContext from './ClusterDeploymentWizardContext';
+import ClusterDeploymentNetworkingForm from './ClusterDeploymentNetworkingForm';
+import { isAgentOfCluster, isCIMFlow } from './helpers';
+import { useInfraEnvProxies, useNetworkingFormik } from './use-networking-formik';
+import { canNextFromNetworkingStep } from './wizardTransition';
+import { AgentK8sResource } from '../../types';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+
+type NetworkingFormProps = {
+  clusterDeployment: ClusterDeploymentDetailsNetworkingProps['clusterDeployment'];
+  agentClusterInstall: ClusterDeploymentDetailsNetworkingProps['agentClusterInstall'];
+  onClose: ClusterDeploymentDetailsNetworkingProps['onClose'];
+  agents: AgentK8sResource[];
+  fetchInfraEnv: ClusterDeploymentDetailsNetworkingProps['fetchInfraEnv'];
+  onEditHost: AgentTableActions['onEditHost'];
+  onEditRole: AgentTableActions['onEditRole'];
+  onSetInstallationDiskId: AgentTableActions['onSetInstallationDiskId'];
+  isPreviewOpen: ClusterDeploymentDetailsNetworkingProps['isPreviewOpen'];
+  docVersion: string;
+};
+
+const NetworkingForm: React.FC<NetworkingFormProps> = ({
+  clusterDeployment,
+  agentClusterInstall,
+  agents,
+  onClose,
+  fetchInfraEnv,
+  onEditHost,
+  onEditRole,
+  isPreviewOpen,
+  onSetInstallationDiskId,
+  docVersion,
+}) => {
+  const [showFormErrors, setShowFormErrors] = React.useState(false);
+  const [showClusterErrors, setShowClusterErrors] = React.useState(false);
+  const [nextRequested, setNextRequested] = React.useState(false);
+  const { infraEnvWithProxy, infraEnvsError, infraEnvsLoading, sameProxies } = useInfraEnvProxies({
+    fetchInfraEnv,
+    agents,
+  });
+  const { isValid, isValidating, isSubmitting, validateForm, setTouched, errors, touched, values } =
+    useFormikContext<ClusterDeploymentNetworkingValues>();
+  const { setCurrentStepId } = React.useContext(ClusterDeploymentWizardContext);
+
+  const canContinue = canNextFromNetworkingStep(agentClusterInstall, agents);
+
+  const onBack = () =>
+    isCIMFlow(clusterDeployment)
+      ? setCurrentStepId('hosts-selection')
+      : setCurrentStepId('hosts-discovery');
+
+  const onNext = async () => {
+    if (!showFormErrors) {
+      const errors = await validateForm();
+      setTouched(
+        Object.keys(errors).reduce((acc, curr) => {
+          acc[curr] = true;
+          return acc;
+        }, {} as Record<string, boolean>),
+      );
+      setShowFormErrors(true);
+      if (Object.keys(errors).length) {
+        return;
+      }
+    }
+    setNextRequested(true);
+  };
+
+  React.useEffect(() => {
+    setNextRequested(false);
+    setShowClusterErrors(false);
+  }, [values.apiVip, values.ingressVip]);
+
+  React.useEffect(() => {
+    if (nextRequested) {
+      setShowClusterErrors(true);
+      if (canContinue) {
+        setCurrentStepId('review');
+      }
+    }
+  }, [nextRequested, canContinue, setCurrentStepId]);
+
+  const onSyncError = React.useCallback(() => setNextRequested(false), []);
+
+  const errorFields = getFormikErrorFields(errors, touched);
+  const { t } = useTranslation();
+  const footer = (
+    <ClusterDeploymentWizardFooter
+      agentClusterInstall={agentClusterInstall}
+      agents={agents}
+      isSubmitting={isSubmitting}
+      isNextDisabled={
+        nextRequested || isSubmitting || (showFormErrors ? !isValid || isValidating : false)
+      }
+      showClusterErrors={!errorFields.length && showClusterErrors}
+      onBack={onBack}
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
+      onNext={onNext}
+      onCancel={onClose}
+      nextButtonText="Next"
+      onSyncError={onSyncError}
+    >
+      {showFormErrors && !!errorFields.length && (
+        <Alert
+          variant={AlertVariant.danger}
+          title={t('ai:Provided cluster configuration is not valid')}
+          isInline
+        >
+          {t('ai:The following fields are invalid or missing')}:{' '}
+          {errorFields.map((field: string) => clusterFieldLabels(t)[field] || field).join(', ')}.
+        </Alert>
+      )}
+    </ClusterDeploymentWizardFooter>
+  );
+
+  return (
+    <ClusterDeploymentWizardStep footer={footer}>
+      <Grid hasGutter>
+        <GridItem>
+          <ClusterWizardStepHeader>{t('ai:Networking')}</ClusterWizardStepHeader>
+        </GridItem>
+        <GridItem>
+          <ClusterDeploymentNetworkingForm
+            clusterDeployment={clusterDeployment}
+            agentClusterInstall={agentClusterInstall}
+            agents={agents}
+            sameProxies={sameProxies}
+            infraEnvsError={infraEnvsError}
+            infraEnvWithProxy={infraEnvWithProxy}
+            infraEnvsLoading={infraEnvsLoading}
+            onEditHost={onEditHost}
+            onEditRole={onEditRole}
+            isPreviewOpen={isPreviewOpen}
+            onSetInstallationDiskId={onSetInstallationDiskId}
+            docVersion={docVersion}
+          />
+        </GridItem>
+      </Grid>
+      <FormikAutoSave />
+    </ClusterDeploymentWizardStep>
+  );
+};
+
+const ClusterDeploymentNetworkingStep: React.FC<ClusterDeploymentDetailsNetworkingProps> = ({
+  clusterDeployment,
+  agentClusterInstall,
+  agents,
+  onSaveNetworking,
+  ...rest
+}) => {
+  const { addAlert } = useAlerts();
+
+  const cdName = clusterDeployment?.metadata?.name;
+  const cdNamespace = clusterDeployment?.metadata?.namespace;
+
+  const clusterAgents = React.useMemo(
+    () => agents.filter((a) => isAgentOfCluster(a, cdName, cdNamespace)),
+    [agents, cdName, cdNamespace],
+  );
+
+  const { initialValues, validationSchema } = useNetworkingFormik({
+    clusterDeployment,
+    agentClusterInstall,
+    agents: clusterAgents,
+  });
+  const { t } = useTranslation();
+  const handleSubmit = async (values: ClusterDeploymentNetworkingValues) => {
+    try {
+      await onSaveNetworking(values);
+    } catch (error) {
+      addAlert({
+        title: t('ai:Failed to save ClusterDeployment'),
+        message: error instanceof Error ? error.message : undefined,
+      });
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+      <NetworkingForm
+        {...rest}
+        agents={clusterAgents}
+        clusterDeployment={clusterDeployment}
+        agentClusterInstall={agentClusterInstall}
+      />
+    </Formik>
+  );
+};
+
+export default ClusterDeploymentNetworkingStep;

package/lib/cim/components/ClusterDeployment/ClusterDeploymentProgress.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import ClusterProgress from '../../../common/components/clusterDetail/ClusterProgress';
+import ClusterProgressItems from '../../../common/components/clusterDetail/ClusterProgressItems';
+import { AgentK8sResource } from '../../types/k8s/agent';
+import { AgentClusterInstallK8sResource } from '../../types/k8s/agent-cluster-install';
+import { ClusterDeploymentK8sResource } from '../../types/k8s/cluster-deployment';
+import { EventListFetchProps } from '../../../common';
+import { getAICluster } from '../helpers/toAssisted';
+import { Stack, StackItem } from '@patternfly/react-core';
+
+type ClusterDeploymentProgressProps = {
+  clusterDeployment: ClusterDeploymentK8sResource;
+  agentClusterInstall: AgentClusterInstallK8sResource;
+  agents: AgentK8sResource[];
+  onFetchEvents: EventListFetchProps['onFetchEvents'];
+  fallbackEventsURL?: string;
+};
+
+const ClusterDeploymentProgress = ({
+  clusterDeployment,
+  agentClusterInstall,
+  agents,
+  onFetchEvents,
+  fallbackEventsURL,
+}: ClusterDeploymentProgressProps) => {
+  const cluster = getAICluster({ clusterDeployment, agentClusterInstall, agents });
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ClusterProgress
+          totalPercentage={agentClusterInstall.status?.progress?.totalPercentage || 0}
+          cluster={cluster}
+        />
+      </StackItem>
+      <StackItem>
+        <ClusterProgressItems
+          cluster={cluster}
+          onFetchEvents={onFetchEvents}
+          fallbackEventsURL={fallbackEventsURL}
+        />
+      </StackItem>
+    </Stack>
+  );
+};
+
+export default ClusterDeploymentProgress;