@openshift-assisted/ui-lib 2.48.6 → 2.50.0

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapDetail.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import {
+  Alert,
+  Bullseye,
+  Button,
+  CodeBlock,
+  CodeBlockCode,
+  Content,
+  ContentVariants,
+  DescriptionList,
+  DescriptionListDescription,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  Divider,
+  ExpandableSectionToggle,
+  Flex,
+  FlexItem,
+  Grid,
+  GridItem,
+  Label,
+  Spinner,
+} from '@patternfly/react-core';
+import { ExternalLink, useTranslation } from '../../../../common';
+import { MinusCircleIcon } from '@patternfly/react-icons/dist/js/icons/minus-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import { ConfigMapK8sResource } from '../../../types';
+import { useField } from 'formik';
+
+const ExpandedConfigMap = ({
+  index,
+  configMap,
+}: {
+  index: number;
+  configMap?: ConfigMapK8sResource;
+}) => {
+  const { t } = useTranslation();
+  const [, { error: isValidError }] = useField<boolean>(`configMaps.${index}.valid`);
+  const [, { error: manifestNamesError }] = useField<string[]>(`configMaps.${index}.manifestNames`);
+
+  return isValidError ? (
+    <GridItem>
+      <Label variant="outline" icon={<InfoCircleIcon />} color="red">
+        {isValidError}
+      </Label>
+    </GridItem>
+  ) : (
+    <>
+      <GridItem>
+        <DescriptionList>
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('ai:Name')}</DescriptionListTerm>
+            <DescriptionListDescription>{configMap?.metadata?.name}</DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('ai:Namespace')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              {configMap?.metadata?.namespace}
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+
+          <DescriptionListGroup>
+            <DescriptionListTerm>{t('ai:Data')}</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Grid hasGutter>
+                <GridItem>
+                  <ExternalLink
+                    href={`/k8s/ns/${configMap?.metadata?.namespace || ''}/configmaps/${
+                      configMap?.metadata?.name || ''
+                    }/form`}
+                  >
+                    {t('ai:Edit config map data')}
+                  </ExternalLink>
+                </GridItem>
+
+                {Object.entries(configMap?.data || {}).map(([key, val]) => (
+                  <GridItem key={key}>
+                    <Content component={ContentVariants.h4}>{key}</Content>
+                    <CodeBlock>
+                      <CodeBlockCode>{val}</CodeBlockCode>
+                    </CodeBlock>
+                  </GridItem>
+                ))}
+              </Grid>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </GridItem>
+
+      {manifestNamesError && (
+        <GridItem>
+          <Alert title={manifestNamesError} variant="danger" isInline />
+        </GridItem>
+      )}
+    </>
+  );
+};
+
+const CollapsedConfigMap = ({
+  index,
+  configMap,
+}: {
+  index: number;
+  configMap?: ConfigMapK8sResource;
+}) => {
+  const [, { error: isValidError }] = useField<boolean>(`configMaps.${index}.valid`);
+  const [, { error: manifestNamesError }] = useField<string[]>(`configMaps.${index}.manifestNames`);
+
+  const { t } = useTranslation();
+
+  return (
+    <GridItem>
+      {isValidError || manifestNamesError ? (
+        <Label variant="outline" icon={<InfoCircleIcon />} color="red">
+          {isValidError || manifestNamesError}
+        </Label>
+      ) : (
+        <Label variant="outline" icon={<InfoCircleIcon />}>
+          {t('ai:{{count}} entry', { count: Object.entries(configMap?.data || {}).length })}
+        </Label>
+      )}
+    </GridItem>
+  );
+};
+
+export const ConfigMapDetail = ({
+  index,
+  configMapName,
+  configMap,
+  onRemove,
+  isLoading,
+}: {
+  index: number;
+  configMapName: string;
+  configMap?: ConfigMapK8sResource;
+  onRemove: () => void;
+  isLoading: boolean;
+}) => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [showRemoveButton, setShowRemoveButton] = React.useState(false);
+
+  return (
+    <GridItem>
+      <Grid
+        onMouseEnter={() => setShowRemoveButton(true)}
+        onMouseLeave={() => setShowRemoveButton(false)}
+        hasGutter
+      >
+        <GridItem>
+          <Flex>
+            <FlexItem>
+              <ExpandableSectionToggle
+                isExpanded={isExpanded}
+                onToggle={() => setIsExpanded(!isExpanded)}
+                direction="down"
+              >
+                {configMapName}
+              </ExpandableSectionToggle>
+            </FlexItem>
+            <FlexItem align={{ default: 'alignRight' }}>
+              <Button
+                aria-label="remove config map"
+                style={{ visibility: showRemoveButton ? 'visible' : 'hidden' }}
+                variant="plain"
+                onClick={onRemove}
+              >
+                <MinusCircleIcon />
+              </Button>
+            </FlexItem>
+          </Flex>
+        </GridItem>
+
+        {isLoading ? (
+          <GridItem>
+            <Bullseye>
+              <Spinner size="lg" />
+            </Bullseye>
+          </GridItem>
+        ) : isExpanded ? (
+          <ExpandedConfigMap configMap={configMap} index={index} />
+        ) : (
+          <CollapsedConfigMap configMap={configMap} index={index} />
+        )}
+
+        <GridItem>
+          <Divider />
+        </GridItem>
+      </Grid>
+    </GridItem>
+  );
+};

package/lib/cim/components/ClusterDeployment/customManifests/ConfigMapForm.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import Fuse from 'fuse.js';
+import { FieldArray, useFormikContext } from 'formik';
+import {
+  Stack,
+  StackItem,
+  Grid,
+  WizardFooter,
+  useWizardContext,
+  useWizardFooter,
+  SelectOptionProps,
+  GridItem,
+  AlertVariant,
+  Alert,
+} from '@patternfly/react-core';
+import { Alerts, SelectFieldWithSearch, useAlerts, useTranslation } from '../../../../common';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
+import { ValidationSection } from '../components/ValidationSection';
+import { ConfigMapDetail } from './ConfigMapDetail';
+import { useConfigMaps } from '../../../hooks';
+
+const NO_RESULTS = 'no_results';
+
+export type CustomManifestFormType = {
+  configMaps: {
+    name: string;
+    valid: boolean;
+    manifestNames?: string[];
+  }[];
+};
+
+export const ConfigMapForm = ({ namespace }: { namespace: string }) => {
+  const { t } = useTranslation();
+  const { syncError } = React.useContext(ClusterDeploymentWizardContext);
+  const { alerts, addAlert, clearAlerts } = useAlerts();
+  const [isSubmitting, setSubmitting] = React.useState(false);
+  const { activeStep, goToPrevStep, goToNextStep, close } = useWizardContext();
+
+  const { values, errors, isValid, setFieldValue, submitForm } =
+    useFormikContext<CustomManifestFormType>();
+  const [filter, setFilter] = React.useState<string>('');
+  const [configMaps, setConfigMaps] = React.useState<SelectOptionProps[]>([]);
+  const [data, loaded, isError] = useConfigMaps({
+    namespace,
+    isList: true,
+  });
+
+  React.useEffect(() => {
+    if (data && loaded && !isError) {
+      setConfigMaps(
+        data.map((configMap) => ({
+          value: {
+            name: configMap.metadata?.name as string,
+            valid: true,
+            manifestNames: Object.keys(configMap.data || {}),
+          },
+          children: configMap.metadata?.name as string,
+        })),
+      );
+    }
+  }, [data, isError, loaded]);
+
+  React.useEffect(() => {
+    if (loaded && !isError) {
+      const newConfigMaps = values.configMaps.map((configMap) => {
+        const map = data.find((item) => item.metadata?.name === configMap.name);
+        if (map) {
+          return { ...configMap, valid: true, manifestNames: Object.keys(map.data || {}) };
+        }
+        return { ...configMap, valid: false, manifestNames: [] };
+      });
+
+      setFieldValue('configMaps', newConfigMaps);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, isError, loaded, setFieldValue]);
+
+  const placeholder = React.useMemo(() => {
+    if (values.configMaps.length > 0) {
+      return `${values.configMaps.length} config map${
+        values.configMaps.length !== 1 ? 's' : ''
+      } selected`;
+    }
+
+    return 'No config map selected';
+  }, [values.configMaps]);
+
+  const fuse = React.useMemo(
+    () =>
+      new Fuse(Object.values(configMaps), {
+        includeScore: true,
+        ignoreLocation: true,
+        threshold: 0.3,
+        keys: ['value.name'],
+      }),
+    [configMaps],
+  );
+
+  const selectOptions = React.useMemo(() => {
+    if (filter) {
+      const newSelectOptions = fuse
+        .search(filter)
+        .sort((a, b) => (a.score || 0) - (b.score || 0))
+        .map(({ item }) => item);
+
+      if (!newSelectOptions.length) {
+        return [
+          {
+            isAriaDisabled: true,
+            children: t('ai:No results found for {{filter}}', { filter }),
+            value: NO_RESULTS,
+            hasCheckbox: false,
+          },
+        ];
+      }
+      return newSelectOptions;
+    }
+    return configMaps;
+  }, [filter, configMaps, fuse, t]);
+
+  const submittingText = React.useMemo(() => {
+    if (isSubmitting) {
+      return t('ai:Saving changes...');
+    }
+    return undefined;
+  }, [isSubmitting, t]);
+
+  const onNext = React.useCallback(async () => {
+    try {
+      clearAlerts();
+      setSubmitting(true);
+
+      await submitForm();
+      await goToNextStep();
+    } catch (error) {
+      addAlert({
+        title: t('ai:Failed to save ClusterDeployment'),
+        message: error instanceof Error ? error.message : undefined,
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  }, [addAlert, clearAlerts, goToNextStep, submitForm, t]);
+
+  const footer = React.useMemo(
+    () => (
+      <WizardFooter
+        activeStep={activeStep}
+        onNext={onNext}
+        nextButtonProps={{ isLoading: !!submittingText }}
+        nextButtonText={submittingText || t('ai:Next')}
+        isNextDisabled={!isValid || !loaded}
+        onBack={goToPrevStep}
+        onClose={close}
+      />
+    ),
+    [activeStep, onNext, submittingText, t, isValid, loaded, goToPrevStep, close],
+  );
+
+  useWizardFooter(footer);
+
+  const errorAlert =
+    typeof errors.configMaps === 'string' ? (
+      <GridItem>
+        <Alert variant={AlertVariant.danger} title={errors.configMaps} isInline />
+      </GridItem>
+    ) : (
+      <GridItem>
+        <Alert
+          variant={AlertVariant.danger}
+          title={t('ai:Some config map items are invalid')}
+          isInline
+        />
+      </GridItem>
+    );
+
+  return (
+    <Grid hasGutter>
+      <GridItem>
+        <Stack hasGutter>
+          <StackItem>
+            <SelectFieldWithSearch
+              name={'configMaps'}
+              label={t('ai:Config maps')}
+              isMultiSelect
+              isRequired
+              isLoading={!loaded}
+              selectOptions={selectOptions}
+              filterValue={filter}
+              setFilterValue={setFilter}
+              placeholder={placeholder}
+              helperText={t(
+                'ai:Select config maps from the list or use the type ahead to narrow down the list.',
+              )}
+            />
+          </StackItem>
+          <StackItem>
+            <Grid hasGutter>
+              <FieldArray name="configMaps">
+                {({ remove }) =>
+                  values.configMaps.map((configMap, index) => (
+                    <ConfigMapDetail
+                      index={index}
+                      key={configMap.name}
+                      configMapName={configMap.name}
+                      configMap={data.find((item) => item.metadata?.name === configMap.name)}
+                      onRemove={() => remove(index)}
+                      isLoading={!loaded}
+                    />
+                  ))
+                }
+              </FieldArray>
+            </Grid>
+          </StackItem>
+        </Stack>
+      </GridItem>
+
+      {!isValid && errorAlert}
+
+      {!!isError && (
+        <GridItem>
+          <Alert
+            variant={AlertVariant.danger}
+            title={t('ai:An error occurred while fetching config maps')}
+            isInline
+          />
+        </GridItem>
+      )}
+
+      {!!alerts.length && (
+        <GridItem>
+          <Alerts />
+        </GridItem>
+      )}
+
+      {syncError && (
+        <GridItem>
+          <ValidationSection currentStepId={'custom-manifests'} hosts={[]}>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
+              {syncError}
+            </Alert>
+          </ValidationSection>
+        </GridItem>
+      )}
+    </Grid>
+  );
+};

package/lib/cim/components/ClusterDeployment/customManifests/index.tsx

@@ -0,0 +1 @@
+export * from './ClusterDeploymentCustomManifestsStep';

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostDiscoveryTable.tsx → hostDiscovery/ClusterDeploymentHostDiscoveryTable.tsx}

@@ -2,38 +2,38 @@ import * as React from 'react';
 import { Stack, StackItem } from '@patternfly/react-core';
 import { Host } from '@openshift-assisted/types/assisted-installer-service';
 import {
-  discoveryTypeColumn,
-  agentStatusColumn,
   useAgentsTable,
   canChangeHostname,
-} from '../Agent/tableUtils';
+  discoveryTypeColumn,
+  agentStatusColumn,
+} from '../../Agent';
 import HostsTable, {
   DefaultExpandComponent,
   HostsTableEmptyState,
-} from '../../../common/components/hosts/HostsTable';
+} from '../../../../common/components/hosts/HostsTable';
 import {
   cpuCoresColumn,
   discoveredAtColumn,
   disksColumn,
+  gpusColumn,
   hostnameColumn,
+  labelsColumn,
   memoryColumn,
   roleColumn,
-} from '../../../common/components/hosts/tableUtils';
-import {
   DiscoveryTroubleshootingModal,
   ChangeHostnameAction,
   MassChangeHostnameModal,
   TableToolbar,
-} from '../../../common';
-import { ClusterDeploymentHostDiscoveryTableProps } from '../ClusterDeployment/types';
-import MassApproveAgentModal from '../modals/MassApproveAgentModal';
-import MassApproveAction from '../modals/MassApproveAction';
-import { usePagination } from '../../../common/components/hosts/usePagination';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ExpandComponent } from '../Agent/AgentsSelectionTable';
-import { HostsTableDetailContextProvider } from '../../../common/components/hosts/HostsTableDetailContext';
-import { agentStatus, bmhStatus } from '../helpers/agentStatus';
-import { onAgentChangeHostname } from '../helpers';
+} from '../../../../common';
+import { ClusterDeploymentHostDiscoveryTableProps } from '../types';
+import MassApproveAgentModal from '../../modals/MassApproveAgentModal';
+import MassApproveAction from '../../modals/MassApproveAction';
+import { usePagination } from '../../../../common/components/hosts/usePagination';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ExpandComponent } from '../../Agent/AgentsSelectionTable';
+import { HostsTableDetailContextProvider } from '../../../../common/components/hosts/HostsTableDetailContext';
+import { agentStatus, bmhStatus } from '../../helpers/agentStatus';
+import { onAgentChangeHostname } from '../../helpers';
 
 const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscoveryTableProps> = ({
   agents,
@@ -93,7 +93,14 @@ const ClusterDeploymentHostDiscoveryTable: React.FC<ClusterDeploymentHostDiscove
       }),
       roleColumn(t, hostActions.canEditRole, hostActions.onEditRole),
       ...(addAll
-        ? [discoveredAtColumn(t), cpuCoresColumn(t), memoryColumn(t), disksColumn(t)]
+        ? [
+            discoveredAtColumn(t),
+            cpuCoresColumn(t),
+            gpusColumn(t),
+            memoryColumn(t),
+            disksColumn(t),
+            labelsColumn(t),
+          ]
         : []),
     ],
     [

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsDiscovery.tsx → hostDiscovery/ClusterDeploymentHostsDiscovery.tsx}

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Grid, GridItem, Content, OrderType } from '@patternfly/react-core';
-import Measure from 'react-measure';
+import useResizeObserver from '@react-hook/resize-observer';
 import {
   DiscoveryTroubleshootingModal,
   FormatDiskWarning,
   HostsNotShowingLink,
   VMRebootConfigurationInfo,
-} from '../../../common';
-import { getIsSNOCluster, onAgentChangeHostname } from '../helpers';
-import MinimalHWRequirements from '../Agent/MinimalHWRequirements';
-import { ClusterDeploymentHostsDiscoveryProps } from './types';
-import { EditBMHModal, EditAgentModal } from '../modals';
-import { AgentK8sResource, BareMetalHostK8sResource } from '../../types';
+} from '../../../../common';
+import { getIsSNOCluster, onAgentChangeHostname } from '../../helpers';
+import MinimalHWRequirements from '../../Agent/MinimalHWRequirements';
+import { ClusterDeploymentHostsDiscoveryProps } from '../types';
+import { EditBMHModal, EditAgentModal } from '../../modals';
+import { AgentK8sResource, BareMetalHostK8sResource } from '../../../types';
 import ClusterDeploymentHostDiscoveryTable from './ClusterDeploymentHostDiscoveryTable';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import AddHostDropdown from '../InfraEnv/AddHostDropdown';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import AddHostDropdown from '../../InfraEnv/AddHostDropdown';
 
 const DiscoveryInstructions = () => {
   const { t } = useTranslation();
@@ -67,6 +67,12 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
 
   const isSNOCluster = getIsSNOCluster(agentClusterInstall);
   const { t } = useTranslation();
+
+  const tableRef = React.useRef<HTMLDivElement>(null);
+  const [tableWidth, setTableWidth] = React.useState<number>();
+  useResizeObserver(tableRef, (entry) => {
+    setTableWidth(entry.contentRect.width);
+  });
   return (
     <Grid hasGutter>
       <GridItem>
@@ -100,26 +106,22 @@ const ClusterDeploymentHostsDiscovery: React.FC<ClusterDeploymentHostsDiscoveryP
       </GridItem>
 
       <GridItem>
-        <Measure bounds>
-          {({ measureRef, contentRect }) => (
-            <div ref={measureRef}>
-              <ClusterDeploymentHostDiscoveryTable
-                agents={agents}
-                bareMetalHosts={bareMetalHosts}
-                infraEnv={infraEnv}
-                onEditHost={setEditAgent}
-                onEditRole={onEditRole}
-                onSetInstallationDiskId={onSetInstallationDiskId}
-                onEditBMH={setEditBMH}
-                onChangeHostname={onChangeHostname}
-                onChangeBMHHostname={onChangeBMHHostname}
-                onApprove={onApproveAgent}
-                width={contentRect.bounds?.width}
-                onDeleteHost={onDeleteHost}
-              />
-            </div>
-          )}
-        </Measure>
+        <div ref={tableRef}>
+          <ClusterDeploymentHostDiscoveryTable
+            agents={agents}
+            bareMetalHosts={bareMetalHosts}
+            infraEnv={infraEnv}
+            onEditHost={setEditAgent}
+            onEditRole={onEditRole}
+            onSetInstallationDiskId={onSetInstallationDiskId}
+            onEditBMH={setEditBMH}
+            onChangeHostname={onChangeHostname}
+            onChangeBMHHostname={onChangeBMHHostname}
+            onApprove={onApproveAgent}
+            width={tableWidth}
+            onDeleteHost={onDeleteHost}
+          />
+        </div>
         <EditBMHModal
           infraEnv={infraEnv}
           bmh={editBMH}

package/lib/cim/components/ClusterDeployment/{ClusterDeploymentHostsDiscoveryStep.tsx → hostDiscovery/ClusterDeploymentHostsDiscoveryStep.tsx}

@@ -12,17 +12,17 @@ import {
   useWizardContext,
 } from '@patternfly/react-core';
 
-import { Alerts, ClusterWizardStepHeader } from '../../../common';
-import { ClusterDeploymentHostsDiscoveryStepProps } from './types';
+import { Alerts, ClusterWizardStepHeader } from '../../../../common';
+import { ClusterDeploymentHostsDiscoveryStepProps } from '../types';
 import ClusterDeploymentHostsDiscovery from './ClusterDeploymentHostsDiscovery';
-import { getAgentsHostsNames, isAgentOfInfraEnv } from './helpers';
-import { getIsSNOCluster, getWizardStepAgentStatus } from '../helpers';
-import { canNextFromHostDiscoveryStep } from './wizardTransition';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-import { ValidationSection } from './components/ValidationSection';
-import { ClusterDeploymentWizardContext } from './ClusterDeploymentWizardContext';
+import { getAgentsHostsNames, isAgentOfInfraEnv } from '../helpers';
+import { getIsSNOCluster, getWizardStepAgentStatus } from '../../helpers';
+import { canNextFromHostDiscoveryStep } from '../wizardTransition';
+import { useTranslation } from '../../../../common/hooks/use-translation-wrapper';
+import { ValidationSection } from '../components/ValidationSection';
+import { ClusterDeploymentWizardContext } from '../ClusterDeploymentWizardContext';
 
-const ClusterDeploymentHostsDiscoveryStep = ({
+export const ClusterDeploymentHostsDiscoveryStep = ({
   agentClusterInstall,
   agents: allAgents,
   infraEnv,
@@ -174,7 +174,7 @@ const ClusterDeploymentHostsDiscoveryStep = ({
       {!!syncError && (
         <GridItem>
           <ValidationSection currentStepId={'hosts-selection'} hosts={[]}>
-            <Alert variant={AlertVariant.danger} title={t('ai:An error occured')} isInline>
+            <Alert variant={AlertVariant.danger} title={t('ai:An error occurred')} isInline>
               {syncError}
             </Alert>
           </ValidationSection>
@@ -183,4 +183,3 @@ const ClusterDeploymentHostsDiscoveryStep = ({
     </Grid>
   );
 };
-export default ClusterDeploymentHostsDiscoveryStep;

package/lib/cim/components/ClusterDeployment/hostDiscovery/index.tsx

@@ -0,0 +1 @@
+export * from './ClusterDeploymentHostsDiscoveryStep';