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

package/lib/ocm/components/hosts/ClusterHostsTable.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Cluster, selectSchedulableMasters, Host, isSNO } from '../../../common';
+import { AdditionalNTPSourcesDialogToggle } from './AdditionaNTPSourceDialogToggle';
+import {
+  discoveredAtColumn,
+  disksColumn,
+  hostnameColumn,
+  memoryColumn,
+  roleColumn,
+  statusColumn,
+  cpuCoresColumn,
+} from '../../../common/components/hosts/tableUtils';
+import { usePagination } from '../../../common/components/hosts/usePagination';
+import { useHostsTable, HostsTableModals } from './use-hosts-table';
+import HostsTable from '../../../common/components/hosts/HostsTable';
+import HostsTableEmptyState from '../hosts/HostsTableEmptyState';
+import { HostDetail } from '../../../common/components/hosts/HostRowDetail';
+import { ExpandComponentProps } from '../../../common/components/hosts/AITable';
+import { UpdateDay2ApiVipDialogToggle } from './UpdateDay2ApiVipDialogToggle';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import {
+  HostsTableDetailContextProvider,
+  useHostsTableDetailContext,
+} from '../../../common/components/hosts/HostsTableDetailContext';
+import { TableVariant } from '@patternfly/react-table';
+
+export function ExpandComponent({ obj: host }: ExpandComponentProps<Host>) {
+  const { onDiskRole, canEditDisks, updateDiskSkipFormatting } = useHostsTableDetailContext();
+  return (
+    <HostDetail
+      host={host}
+      AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggle}
+      hideNTPStatus
+      onDiskRole={onDiskRole}
+      canEditDisks={canEditDisks}
+      updateDiskSkipFormatting={updateDiskSkipFormatting}
+    />
+  );
+}
+
+export interface ClusterHostsTableProps {
+  cluster: Cluster;
+  skipDisabled?: boolean;
+}
+
+const ClusterHostsTable = ({ cluster, skipDisabled }: ClusterHostsTableProps) => {
+  const {
+    onEditHost,
+    onEditRole,
+    actionChecks,
+    onDiskRole,
+    actionResolver,
+    updateDiskSkipFormatting,
+    ...modalProps
+  } = useHostsTable(cluster);
+  const { t } = useTranslation();
+  const content = React.useMemo(
+    () => [
+      hostnameColumn(t, onEditHost, undefined, actionChecks.canEditHostname),
+      roleColumn(
+        t,
+        actionChecks.canEditRole,
+        onEditRole,
+        selectSchedulableMasters(cluster),
+        cluster.kind,
+      ),
+      statusColumn(
+        t,
+        cluster.status,
+        AdditionalNTPSourcesDialogToggle,
+        onEditHost,
+        UpdateDay2ApiVipDialogToggle,
+      ),
+      discoveredAtColumn,
+      cpuCoresColumn,
+      memoryColumn,
+      disksColumn,
+    ],
+    [t, onEditHost, actionChecks, onEditRole, cluster],
+  );
+
+  const hosts = cluster.hosts || [];
+  const paginationProps = usePagination(hosts.length);
+
+  return (
+    <>
+      <HostsTableDetailContextProvider
+        canEditDisks={actionChecks.canEditDisks}
+        onDiskRole={onDiskRole}
+        updateDiskSkipFormatting={updateDiskSkipFormatting}
+      >
+        <HostsTable
+          hosts={hosts}
+          skipDisabled={skipDisabled}
+          ExpandComponent={ExpandComponent}
+          content={content}
+          actionResolver={actionResolver}
+          variant={TableVariant.compact}
+          {...paginationProps}
+        >
+          <HostsTableEmptyState isSingleNode={isSNO(cluster)} />
+        </HostsTable>
+      </HostsTableDetailContextProvider>
+      <HostsTableModals cluster={cluster} {...modalProps} />
+    </>
+  );
+};
+
+export default ClusterHostsTable;

package/lib/ocm/components/hosts/DeleteHostModal.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Modal, ModalVariant, Button, ButtonVariant } from '@patternfly/react-core';
+
+type DeleteHostModalProps = {
+  hostname?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+};
+
+const DeleteHostModal = ({ isOpen, hostname, onClose, onDelete }: DeleteHostModalProps) => (
+  <Modal
+    title="Delete Host"
+    isOpen={isOpen}
+    onClose={onClose}
+    variant={ModalVariant.small}
+    actions={[
+      <Button
+        data-testid="delete-host-submit"
+        key="confirm"
+        variant={ButtonVariant.danger}
+        onClick={onDelete}
+      >
+        Delete
+      </Button>,
+      <Button key="cancel" variant={ButtonVariant.link} onClick={onClose}>
+        Cancel
+      </Button>,
+    ]}
+  >
+    Are you sure you want to delete host{` ${hostname || ''}`} ?
+  </Modal>
+);
+
+export default DeleteHostModal;

package/lib/ocm/components/hosts/HardwareStatus.tsx

@@ -0,0 +1,92 @@
+import { sortable } from '@patternfly/react-table';
+import React from 'react';
+import {
+  areOnlySoftValidationsOfWizardStepFailing,
+  getWizardStepHostStatus,
+  getWizardStepHostValidationsInfo,
+  Host,
+  HostsTableActions,
+  hostStatus,
+  HostStatus,
+  stringToJSON,
+} from '../../../common';
+import { TableRow } from '../../../common/components/hosts/AITable';
+import { ValidationsInfo } from '../../../common/types/hosts';
+import { wizardStepsValidationsMap } from '../clusterWizard/wizardTransition';
+import { AdditionalNTPSourcesDialogToggle } from './AdditionaNTPSourceDialogToggle';
+
+type HardwareStatusProps = {
+  host: Host;
+  validationsInfo: ValidationsInfo;
+  onEditHostname?: () => void;
+  isWithinModal?: boolean;
+};
+
+const DELETE_MODAL_STATUS_Z_INDEX = 500;
+
+const HardwareStatus = (props: HardwareStatusProps) => {
+  const hardwareStatus = getWizardStepHostStatus(
+    'host-discovery',
+    wizardStepsValidationsMap,
+    props.host,
+  );
+  const status = hostStatus[hardwareStatus];
+  const validationsInfo = getWizardStepHostValidationsInfo(
+    props.validationsInfo,
+    'host-discovery',
+    wizardStepsValidationsMap,
+  );
+  const sublabel = areOnlySoftValidationsOfWizardStepFailing(
+    validationsInfo,
+    'host-discovery',
+    wizardStepsValidationsMap,
+  )
+    ? 'Some validations failed'
+    : undefined;
+
+  return (
+    <HostStatus
+      {...props}
+      zIndex={props.isWithinModal ? DELETE_MODAL_STATUS_Z_INDEX : undefined}
+      status={{ ...status, sublabel }}
+      validationsInfo={validationsInfo}
+      AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggle}
+    />
+  );
+};
+
+export const hardwareStatusColumn = ({
+  onEditHostname,
+  isWithinModal,
+}: {
+  onEditHostname?: HostsTableActions['onEditHost'];
+  isWithinModal?: boolean;
+}): TableRow<Host> => {
+  return {
+    header: {
+      title: 'Status',
+      props: {
+        id: 'col-header-hwstatus',
+      },
+      transforms: [sortable],
+    },
+    cell: (host) => {
+      const validationsInfo = stringToJSON<ValidationsInfo>(host.validationsInfo) || {};
+      const editHostname = onEditHostname ? () => onEditHostname(host) : undefined;
+      return {
+        title: (
+          <HardwareStatus
+            host={host}
+            onEditHostname={editHostname}
+            validationsInfo={validationsInfo}
+            isWithinModal={isWithinModal}
+          />
+        ),
+        props: { 'data-testid': 'host-hw-status' },
+        sortableValue: status,
+      };
+    },
+  };
+};
+
+export default { HardwareStatus, hardwareStatusColumn };

package/lib/ocm/components/hosts/HostRequirementsContent.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { List, ListItem, Text, TextContent } from '@patternfly/react-core';
+import { Cluster, ErrorState, ExternalLink, LoadingState, fileSize } from '../../../common';
+import { useClusterPreflightRequirements } from '../../hooks';
+
+const DISK_WRITE_SPEED_LINK = 'https://access.redhat.com/solutions/4885641';
+
+const parseRAM = (ramMib: number) => fileSize(ramMib * 1024 * 1024, 2, 'iec');
+
+type PreflightRequirementsContentProps = {
+  clusterId: Cluster['id'];
+  isSingleNode: boolean;
+  isAddingHosts: boolean;
+};
+
+const HostRequirementsContent = ({
+  clusterId,
+  isSingleNode,
+  isAddingHosts,
+}: PreflightRequirementsContentProps) => {
+  const { preflightRequirements, error, isLoading } = useClusterPreflightRequirements(clusterId);
+
+  if (isLoading) {
+    return <LoadingState content="Loading hardware requirements ..." />;
+  }
+  if (error) {
+    return <ErrorState />;
+  }
+
+  const masterQuantitativeData = preflightRequirements?.ocp?.master?.quantitative;
+  const masterCpuCores = masterQuantitativeData?.cpuCores || 4;
+  const masterRam = parseRAM(masterQuantitativeData?.ramMib || 16 * 1024);
+  const masterDiskSizeGb = masterQuantitativeData?.diskSizeGb || 100;
+  const contentForControlPlaneNodes = `${masterCpuCores} CPU cores, ${masterRam} RAM, and ${masterDiskSizeGb} GB disk size.`;
+
+  const workerQuantitativeData = preflightRequirements?.ocp?.worker?.quantitative;
+  const workerCpuCores = workerQuantitativeData?.cpuCores || 2;
+  const workerRam = parseRAM(workerQuantitativeData?.ramMib || 16 * 1024);
+  const workerDiskSizeGb = workerQuantitativeData?.diskSizeGb || 100;
+  const contentForWorkerNodes = `${workerCpuCores} CPU cores, ${workerRam} RAM, and ${workerDiskSizeGb} GB disk size.`;
+
+  if (isAddingHosts) {
+    return (
+      <TextContent>
+        <Text component={'p'}>{`Worker hosts must have at least ${contentForWorkerNodes}`}</Text>
+      </TextContent>
+    );
+  }
+
+  let content: JSX.Element;
+  if (isSingleNode) {
+    content = (
+      <List>
+        <ListItem>{`One host is required with at least ${contentForControlPlaneNodes}`}</ListItem>
+        <ListItem>Operators might require additional resources.</ListItem>
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        <ListItem>{`Control plane nodes: At least ${contentForControlPlaneNodes}`}</ListItem>
+        <ListItem>{`Workers: At least ${contentForWorkerNodes}`}</ListItem>
+        <ListItem>
+          Also note that each host's disk write speed should meet the minimum requirements to run
+          OpenShift.
+          <br />
+          <ExternalLink href={DISK_WRITE_SPEED_LINK}>Learn more</ExternalLink>
+        </ListItem>
+        <ListItem>Operators might require additional resources.</ListItem>
+      </List>
+    );
+  }
+
+  return content;
+};
+
+export default HostRequirementsContent;

package/lib/ocm/components/hosts/HostsDiscoveryTable.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import {
+  ChangeHostnameAction,
+  selectSchedulableMasters,
+  Cluster,
+  Host,
+  isSNO,
+  DeleteHostAction,
+  TableToolbar,
+} from '../../../common';
+import { HostsTableModals, useHostsTable } from './use-hosts-table';
+import {
+  countColumn,
+  cpuCoresColumn,
+  discoveredAtColumn,
+  disksColumn,
+  hostnameColumn,
+  memoryColumn,
+  roleColumn,
+} from '../../../common/components/hosts/tableUtils';
+import HostsTable from '../../../common/components/hosts/HostsTable';
+import { HostDetail } from '../../../common/components/hosts/HostRowDetail';
+import { ExpandComponentProps } from '../../../common/components/hosts/AITable';
+import { AdditionalNTPSourcesDialogToggle } from './AdditionaNTPSourceDialogToggle';
+import { usePagination } from '../../../common/components/hosts/usePagination';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import { hardwareStatusColumn } from './HardwareStatus';
+import HostsTableEmptyState from '../hosts/HostsTableEmptyState';
+import { useSelector } from 'react-redux';
+import { selectCurrentClusterPermissionsState } from '../../selectors';
+
+const HostRowDetailExpand = ({ obj: host }: ExpandComponentProps<Host>) => (
+  <HostDetail
+    key={host.id}
+    host={host}
+    AdditionalNTPSourcesDialogToggleComponent={AdditionalNTPSourcesDialogToggle}
+  />
+);
+
+type HostsDiscoveryTableProps = {
+  cluster: Cluster;
+};
+
+const HostsDiscoveryTable = ({ cluster }: HostsDiscoveryTableProps) => {
+  const {
+    onEditHost,
+    actionChecks,
+    onEditRole,
+    actionResolver,
+    onSelect,
+    selectedHostIDs,
+    setSelectedHostIDs,
+    onMassChangeHostname,
+    onMassDeleteHost,
+    ...modalProps
+  } = useHostsTable(cluster);
+
+  const { isViewerMode } = useSelector(selectCurrentClusterPermissionsState);
+  const isSNOCluster = isSNO(cluster);
+  const { t } = useTranslation();
+  const content = React.useMemo(
+    () => [
+      hostnameColumn(t, onEditHost, undefined, actionChecks.canEditHostname),
+      roleColumn(
+        t,
+        actionChecks.canEditRole,
+        onEditRole,
+        selectSchedulableMasters(cluster),
+        cluster.kind,
+      ),
+      hardwareStatusColumn({ onEditHostname: onEditHost }),
+      discoveredAtColumn,
+      cpuCoresColumn,
+      memoryColumn,
+      disksColumn,
+      countColumn(cluster),
+    ],
+    [t, onEditHost, actionChecks.canEditHostname, actionChecks.canEditRole, onEditRole, cluster],
+  );
+
+  const hosts = cluster.hosts || [];
+  const paginationProps = usePagination(hosts.length);
+  const itemIDs = hosts.map((h) => h.id);
+  const showBulkActions = !(isViewerMode || isSNOCluster);
+
+  return (
+    <>
+      <Stack hasGutter>
+        {showBulkActions && (
+          <StackItem>
+            <TableToolbar
+              selectedIDs={selectedHostIDs || []}
+              itemIDs={itemIDs}
+              setSelectedIDs={setSelectedHostIDs}
+              actions={[
+                <ChangeHostnameAction key="hostname" onChangeHostname={onMassChangeHostname} />,
+                <DeleteHostAction key="delete" onDeleteHost={onMassDeleteHost} />,
+              ]}
+              {...paginationProps}
+            />
+          </StackItem>
+        )}
+        <StackItem>
+          <HostsTable
+            testId="hosts-discovery-table"
+            hosts={hosts}
+            content={content}
+            actionResolver={actionResolver}
+            ExpandComponent={HostRowDetailExpand}
+            onSelect={showBulkActions ? onSelect : undefined}
+            selectedIDs={selectedHostIDs}
+            setSelectedIDs={setSelectedHostIDs}
+            {...paginationProps}
+          >
+            <HostsTableEmptyState isSingleNode={isSNOCluster} />
+          </HostsTable>
+        </StackItem>
+      </Stack>
+      <HostsTableModals cluster={cluster} {...modalProps} />
+    </>
+  );
+};
+
+export default HostsDiscoveryTable;

package/lib/ocm/components/hosts/HostsDiscoveryTroubleshootingInfoLinkWithModal.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import InfoLinkWithModal from '../ui/InfoLinkWithModal';
+import { pluralize } from 'humanize-plus';
+import { DiscoveryTroubleshootingModalContent } from '../../../common';
+
+export interface HostsDiscoveryTroubleshootingInfoLinkWithModalProps {
+  isInline?: boolean;
+  isSingleNode?: boolean;
+}
+
+const HostsDiscoveryTroubleshootingInfoLinkWithModal = ({
+  isInline = false,
+  isSingleNode = false,
+}: HostsDiscoveryTroubleshootingInfoLinkWithModalProps) => {
+  return (
+    <InfoLinkWithModal
+      linkText={`${pluralize(+isSingleNode, 'Host')} not showing up?`}
+      modalTitle={'Hosts not showing up troubleshooter'}
+      modalVariant={'large'}
+      isInline={isInline}
+      linkId="link-host-troubleshooting"
+      modalId="modal-host-troubleshooting"
+    >
+      <DiscoveryTroubleshootingModalContent />
+    </InfoLinkWithModal>
+  );
+};
+
+export default HostsDiscoveryTroubleshootingInfoLinkWithModal;

package/lib/ocm/components/hosts/HostsStorageTable.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import {
+  countColumn,
+  disksColumn,
+  hostnameColumn,
+  roleColumn,
+} from '../../../common/components/hosts/tableUtils';
+import {
+  numberOfDisksColumn,
+  odfUsageColumn,
+} from '../../../common/components/storage/StorageUtils';
+import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
+import {
+  Cluster,
+  Host,
+  hasEnabledOperators,
+  isCompact,
+  selectSchedulableMasters,
+  OPERATOR_NAME_ODF,
+} from '../../../common';
+import { usePagination } from '../../../common/components/hosts/usePagination';
+import { ExpandComponentProps } from '../../../common/components/hosts/AITable';
+import CommonStorageTable from '../../../common/components/storage/StorageTable';
+import StorageDetail from '../../../common/components/storage/StorageDetail';
+import StorageAlerts from './StorageAlerts';
+import { HostsTableModals, useHostsTable } from './use-hosts-table';
+import {
+  HostsTableDetailContextProvider,
+  useHostsTableDetailContext,
+} from '../../../common/components/hosts/HostsTableDetailContext';
+import { hardwareStatusColumn } from './HardwareStatus';
+
+export function ExpandComponent({ obj: host }: ExpandComponentProps<Host>) {
+  const { onDiskRole, canEditDisks, updateDiskSkipFormatting } = useHostsTableDetailContext();
+  return (
+    <StorageDetail
+      key={host.id}
+      host={host}
+      onDiskRole={onDiskRole}
+      canEditDisks={canEditDisks}
+      updateDiskSkipFormatting={updateDiskSkipFormatting}
+    />
+  );
+}
+
+const HostsStorageTable = ({ cluster }: { cluster: Cluster }) => {
+  const { t } = useTranslation();
+  const {
+    onEditHost,
+    actionChecks,
+    onDiskRole,
+    actionResolver,
+    updateDiskSkipFormatting,
+    ...modalProps
+  } = useHostsTable(cluster);
+
+  const content = React.useMemo(() => {
+    const columns = [
+      hostnameColumn(t, onEditHost, undefined, actionChecks.canEditHostname),
+      roleColumn(t, undefined, undefined, selectSchedulableMasters(cluster)),
+      hardwareStatusColumn({}),
+      disksColumn,
+      numberOfDisksColumn,
+    ];
+    if (hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_ODF)) {
+      const excludeODfForMasters = !isCompact(cluster);
+      columns.push(odfUsageColumn(excludeODfForMasters));
+    }
+    columns.push(countColumn(cluster));
+    return columns;
+  }, [actionChecks.canEditHostname, cluster, onEditHost, t]);
+
+  const hosts = cluster.hosts || [];
+  const paginationProps = usePagination(hosts.length);
+
+  return (
+    <>
+      <Stack hasGutter>
+        <StackItem>
+          <HostsTableDetailContextProvider
+            canEditDisks={actionChecks.canEditDisks}
+            onDiskRole={onDiskRole}
+            updateDiskSkipFormatting={updateDiskSkipFormatting}
+          >
+            <CommonStorageTable
+              testId="storage-table"
+              hosts={hosts}
+              content={content}
+              actionResolver={actionResolver}
+              ExpandComponent={ExpandComponent}
+              {...paginationProps}
+            />
+          </HostsTableDetailContextProvider>
+        </StackItem>
+        <StackItem>
+          <StorageAlerts cluster={cluster} />
+        </StackItem>
+      </Stack>
+      <HostsTableModals cluster={cluster} {...modalProps} />
+    </>
+  );
+};
+
+export default HostsStorageTable;

package/lib/ocm/components/hosts/HostsTableEmptyState.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ConnectedIcon } from '@patternfly/react-icons';
+import { pluralize } from 'humanize-plus';
+import EmptyState from '../../../common/components/ui/uiState/EmptyState';
+import HostsDiscoveryTroubleshootingInfoLinkWithModal from './HostsDiscoveryTroubleshootingInfoLinkWithModal';
+
+export interface HostsTableEmptyStateProps {
+  isSingleNode?: boolean;
+}
+
+const HostsTableEmptyState = ({ isSingleNode = false }: HostsTableEmptyStateProps) => {
+  return (
+    <EmptyState
+      icon={ConnectedIcon}
+      title={`Waiting for ${pluralize(+isSingleNode, 'host')}...`}
+      content="Hosts may take a few minutes to appear here after booting."
+      secondaryActions={[
+        <HostsDiscoveryTroubleshootingInfoLinkWithModal key={'hosts-not-showing'} />,
+      ]}
+    />
+  );
+};
+
+export default HostsTableEmptyState;