@openshift-assisted/ui-lib 2.55.0 → 2.56.0

package/lib/ocm/components/clusterDetail/components/ProgressBarAlerts.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { Alert, AlertActionLink, Content } from '@patternfly/react-core';
+import { pluralize } from 'humanize-plus';
+import { Cluster, MonitoredOperator } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  RenderIf,
+  toSentence,
+  canDownloadClusterLogs,
+  getReportIssueLink,
+  useAlerts,
+  useOperatorSpecs,
+  isInOcm,
+} from '../../../../common';
+import { downloadClusterInstallationLogs } from '../utils';
+import { useModalDialogsContext } from '../../hostsTable/modals/ModalDialogsContext';
+
+type InstallationProgressWarningProps = {
+  cluster: Cluster;
+  totalHosts: number;
+  failedHosts: number;
+  title?: string;
+  hostsType?: string;
+  failedOperators?: MonitoredOperator[];
+  message?: string;
+  isCriticalNumberOfWorkersFailed?: boolean;
+};
+
+const getFailedHostsMessage = (
+  failedHosts: number,
+  totalHosts: number,
+  message?: string,
+  hostsType?: string,
+) => {
+  if (hostsType === 'worker') {
+    if (isInOcm) {
+      return (
+        <>
+          Error information for each host can be found in the host inventory table. To retry adding
+          failed hosts, navigate to the clusters list inside OpenShift Cluster Manager, click your
+          cluster name, and select the <b>Add hosts</b> tab.
+        </>
+      );
+    }
+    return (
+      <>
+        Error information for each host can be found in the host inventory table. To retry adding
+        failed hosts, press the <b>Add hosts</b> button.
+      </>
+    );
+  }
+  return (
+    <>
+      {failedHosts}/{totalHosts} {pluralize(totalHosts, hostsType)} {message} Due to this, the
+      cluster will be degraded. Please check the installation log for more information.
+    </>
+  );
+};
+
+export const HostInstallationWarning = ({
+  cluster,
+  failedHosts,
+  totalHosts,
+  title,
+  hostsType,
+  failedOperators = [],
+  message,
+}: InstallationProgressWarningProps) => {
+  const { addAlert, clearAlerts } = useAlerts();
+  const { byKey: opSpecs } = useOperatorSpecs();
+
+  return (
+    <>
+      <Alert
+        isInline
+        variant="warning"
+        title={title}
+        actionLinks={
+          <>
+            <AlertActionLink
+              id="cluster-installation-logs-button"
+              onClick={() => {
+                void downloadClusterInstallationLogs(addAlert, cluster.id, clearAlerts);
+              }}
+              isDisabled={!canDownloadClusterLogs(cluster)}
+            >
+              Download installation logs
+            </AlertActionLink>
+          </>
+        }
+      >
+        <RenderIf condition={failedHosts !== 0}>
+          <p>{getFailedHostsMessage(failedHosts, totalHosts, message, hostsType)}</p>
+        </RenderIf>
+        <RenderIf condition={failedOperators?.length > 0}>
+          <p>
+            {failedOperators.map(({ name }) => opSpecs[name || '']?.title || name).join(' and ')}{' '}
+            failed to install. Due to this, the cluster will be degraded, but you can try to install
+            the operator from the Operator Hub. Please check the installation log for more
+            information.
+          </p>
+        </RenderIf>
+      </Alert>
+    </>
+  );
+};
+
+export const HostsInstallationFailed = ({
+  cluster,
+  failedHosts,
+  totalHosts,
+  isCriticalNumberOfWorkersFailed,
+}: InstallationProgressWarningProps) => {
+  const { addAlert, clearAlerts } = useAlerts();
+  const { resetClusterDialog } = useModalDialogsContext();
+  const getID = (suffix: string) => `cluster-install-error-${suffix}`;
+  let title, message;
+  if (cluster.controlPlaneCount === 1 || failedHosts > 0) {
+    title = 'Control plane was not installed';
+    message = `${failedHosts}/${totalHosts} control plane nodes failed to install. Please check the installation logs for more information.`;
+  } else if (isCriticalNumberOfWorkersFailed) {
+    title = 'Critical number of workers were not installed';
+    message =
+      'Only one worker was able to be installed. Please check the installation logs for more information.';
+  } else {
+    title = 'Initialization failed';
+    message = (
+      <Content component="p">
+        {toSentence(cluster.statusInfo)}
+        <br />
+        Reset the installation process to return to the configuration and try again. Some hosts may
+        need to be re-registered by rebooting into the Discovery ISO.
+      </Content>
+    );
+  }
+
+  return (
+    <>
+      <Alert
+        isInline
+        variant="danger"
+        title={title}
+        actionLinks={
+          <>
+            <AlertActionLink
+              id="button-reset-cluster"
+              onClick={() => resetClusterDialog.open({ cluster })}
+            >
+              Reset Cluster
+            </AlertActionLink>
+            <AlertActionLink
+              id="cluster-installation-logs-button"
+              onClick={() => {
+                void downloadClusterInstallationLogs(addAlert, cluster.id, clearAlerts);
+              }}
+              isDisabled={!canDownloadClusterLogs(cluster)}
+            >
+              Download installation logs
+            </AlertActionLink>
+            <AlertActionLink
+              onClick={() => window.open(getReportIssueLink(), '_blank', 'noopener,noreferrer')}
+              id={getID('button-report-bug')}
+            >
+              Report a bug
+            </AlertActionLink>
+          </>
+        }
+      >
+        {message}
+      </Alert>
+    </>
+  );
+};
+
+export const HostsInstallationSuccess = () => {
+  return (
+    <>
+      <Alert isInline variant="success" title={'Installation completed successfully'}>
+        {' '}
+      </Alert>
+    </>
+  );
+};
+
+type ClusterInstallationTimeoutProps = {
+  cluster: Cluster;
+};
+
+export const ClusterInstallationTimeout = ({ cluster }: ClusterInstallationTimeoutProps) => {
+  const { addAlert, clearAlerts } = useAlerts();
+  return (
+    <>
+      <Alert
+        isInline
+        variant="warning"
+        title="Cluster installation is taking too long"
+        actionLinks={
+          <>
+            <AlertActionLink
+              id="cluster-installation-logs-button"
+              onClick={() => {
+                void downloadClusterInstallationLogs(addAlert, cluster.id, clearAlerts);
+              }}
+              isDisabled={!canDownloadClusterLogs(cluster)}
+            >
+              Download installation logs
+            </AlertActionLink>
+          </>
+        }
+      >
+        Check the logs to find out why or reset the cluster to start over.
+      </Alert>
+    </>
+  );
+};

package/lib/ocm/components/clusterDetail/components/getProgressBarAlerts.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import {
+  Cluster,
+  Host,
+  HostRole,
+  MonitoredOperator,
+} from '@openshift-assisted/types/assisted-installer-service';
+import { RenderIf } from '../../../../common';
+import {
+  HostsInstallationFailed,
+  HostInstallationWarning,
+  HostsInstallationSuccess,
+  ClusterInstallationTimeout,
+} from './ProgressBarAlerts';
+
+const hostsStatus = (hosts: Host[], hostRole: HostRole) => {
+  const totalHosts = hosts.filter((host) => host.role && host.role === hostRole);
+  const failedHosts = totalHosts.filter((host) => ['cancelled', 'error'].includes(host.status));
+  const pendingUserActionHosts = totalHosts.filter((host) =>
+    ['installing-pending-user-action'].includes(host.status),
+  );
+  return [totalHosts.length, failedHosts.length, pendingUserActionHosts.length];
+};
+
+const olmOperatorsStatus = (olmOperators: MonitoredOperator[]) => {
+  return olmOperators.filter((operator) => operator.status && operator.status === 'failed');
+};
+
+export const getProgressAlerts = (
+  hosts: Host[],
+  cluster: Cluster,
+  olmOperators: MonitoredOperator[],
+): React.ReactElement => {
+  const [totalMasters, failedMasters, pendingUserActionMasters] = hostsStatus(hosts, 'master');
+  const [totalWorkers, failedWorkers, pendingUserActionWorkers] = hostsStatus(hosts, 'worker');
+  const failedOperators = olmOperatorsStatus(olmOperators);
+  const finalizingStageTimeout = cluster?.progress?.finalizingStageTimedOut;
+  if (['error', 'cancelled'].includes(cluster.status)) {
+    return (
+      <Stack>
+        <StackItem>
+          <HostsInstallationFailed
+            cluster={cluster}
+            totalHosts={totalMasters}
+            failedHosts={failedMasters}
+            isCriticalNumberOfWorkersFailed={failedWorkers === 1}
+          />
+        </StackItem>
+      </Stack>
+    );
+  } else if (finalizingStageTimeout) {
+    return (
+      <Stack>
+        <StackItem>
+          <ClusterInstallationTimeout cluster={cluster} />{' '}
+        </StackItem>
+      </Stack>
+    );
+  } else {
+    return (
+      <Stack hasGutter>
+        <RenderIf condition={cluster.status === 'installed'}>
+          <StackItem>
+            <HostsInstallationSuccess />
+          </StackItem>
+        </RenderIf>
+        <RenderIf condition={failedWorkers > 0}>
+          <StackItem>
+            <HostInstallationWarning
+              cluster={cluster}
+              totalHosts={totalWorkers}
+              failedHosts={failedWorkers}
+              title={`Could not install ${failedWorkers} worker hosts`}
+              hostsType={'worker'}
+              message={'failed to install.'}
+            />
+          </StackItem>
+        </RenderIf>
+        <RenderIf condition={failedOperators.length > 0}>
+          <StackItem>
+            <HostInstallationWarning
+              cluster={cluster}
+              totalHosts={totalMasters}
+              failedHosts={failedMasters}
+              title={'Some operators failed to install'}
+              failedOperators={failedOperators}
+              message={'failed to install.'}
+            />
+          </StackItem>
+        </RenderIf>
+        <RenderIf condition={pendingUserActionMasters > 0}>
+          <StackItem>
+            <HostInstallationWarning
+              cluster={cluster}
+              totalHosts={totalMasters}
+              failedHosts={failedMasters}
+              title={'Some hosts are pending user action'}
+              failedOperators={failedOperators}
+              message={'are pending user action.'}
+            />
+          </StackItem>
+        </RenderIf>
+        <RenderIf condition={pendingUserActionWorkers > 0}>
+          <StackItem>
+            <HostInstallationWarning
+              cluster={cluster}
+              totalHosts={totalWorkers}
+              failedHosts={failedWorkers}
+              title={'Some hosts are pending user action'}
+              message={'are pending user action.'}
+            />
+          </StackItem>
+        </RenderIf>
+      </Stack>
+    );
+  }
+};

package/lib/ocm/components/clusterDetail/components/index.tsx

@@ -0,0 +1,7 @@
+export * from './ClusterToolbar';
+export * from './ClusterDetailsButtonGroup';
+export * from './OcmClusterProgressItems';
+export * from './ClusterSummaryExpandable';
+export * from './HostInventoryExpandable';
+export * from './getProgressBarAlerts';
+export * from './ClusterDetailStatusVarieties';

package/lib/ocm/components/clusterDetail/index.ts

@@ -1,4 +1,3 @@
 export * from './utils';
-export { default as ClusterDetail } from './ClusterDetail';
-export { default as ClusterInstallationProgressCard } from './ClusterInstallationProgressCard';
-export { default as AssistedInstallerDetailCard } from './AssistedInstallerDetailCard';
+export * from './ClusterDetail';
+export * from './components';

package/lib/ocm/components/clusterDetail/utils.tsx

@@ -1,15 +1,21 @@
 import get from 'lodash-es/get.js';
-import { isInOcm, handleApiError, getApiErrorMessage } from '../../../common/api';
-import { AlertsContextType, hostStatusOrder } from '../../../common';
-import { ClustersAPI } from '../../services/apis';
-import { ClustersService } from '../../services';
-import { downloadFile, stringToJSON } from '../../../common/utils';
 import {
   Cluster,
   Host,
   HostRole,
   Inventory,
 } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  AlertsContextType,
+  isInOcm,
+  ClustersAPI,
+  downloadFile,
+  handleApiError,
+  getApiErrorMessage,
+  stringToJSON,
+  hostStatusOrder,
+} from '../../../common';
+import { ClustersService } from '../../services';
 
 export const downloadClusterInstallationLogs = async (
   addAlert: AlertsContextType['addAlert'],

package/lib/ocm/components/clusterInstallation/CancelInstallationModal.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
+import {
+  ClustersAPI,
+  handleApiError,
+  getApiErrorMessage,
+  LoadingState,
+  ErrorState,
+} from '../../../common';
+import { updateCluster } from '../../store';
+import { useModalDialogsContext } from '../hostsTable';
+
+export const CancelInstallationModal: React.FC = () => {
+  const dispatch = useDispatch();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<{ title: string; message: string } | null>(null);
+  const { cancelInstallationDialog } = useModalDialogsContext();
+  const { data, isOpen, close: onClose } = cancelInstallationDialog;
+  const clusterId = data?.clusterId;
+
+  if (!clusterId) {
+    return null;
+  }
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    try {
+      setError(null);
+      const { data } = await ClustersAPI.cancel(clusterId);
+      dispatch(updateCluster(data));
+      onClose();
+    } catch (e) {
+      handleApiError(e, () => {
+        setError({ title: 'Failed to abort cluster installation', message: getApiErrorMessage(e) });
+      });
+    }
+    setIsSubmitting(false);
+  };
+
+  const getModalContent = () => {
+    if (isSubmitting) {
+      return <LoadingState content="Aborting cluster installation..." />;
+    }
+    if (error) {
+      return <ErrorState title={error.title} content={error.message} />;
+    }
+    return (
+      <Content component="p">
+        This will abort cluster installation. Are you sure you want to proceed?
+      </Content>
+    );
+  };
+
+  return (
+    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={onClose}>
+      <ModalHeader title="Abort Cluster Installation" />
+      <ModalBody>{getModalContent()}</ModalBody>
+      <ModalFooter>
+        <Button
+          key="submit"
+          variant={ButtonVariant.danger}
+          onClick={() => {
+            void handleSubmit();
+          }}
+          isDisabled={isSubmitting}
+        >
+          Abort installation
+        </Button>
+        <Button
+          key="cancel"
+          variant={ButtonVariant.link}
+          onClick={onClose}
+          isDisabled={isSubmitting}
+        >
+          Cancel
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};

package/lib/ocm/components/clusterInstallation/ClusterInstallationProgressCard.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Card,
+  Title,
+  CardBody,
+  CardHeader,
+  CardExpandableContent,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { ClusterProgress } from '../../../common';
+import { ClusterStatusIcon } from '../clusters/ClusterStatus';
+import {
+  ClusterDetailStatusVarieties,
+  useClusterStatusVarieties,
+  ClusterDetailsButtonGroup,
+} from '../clusterDetail';
+import { ClusterHostsTable } from '../hostsTable/ClusterHostsTable';
+
+export const ClusterInstallationProgressCard: React.FC<{ cluster: Cluster }> = ({ cluster }) => {
+  const [isCardExpanded, setIsCardExpanded] = React.useState(true);
+  const clusterVarieties = useClusterStatusVarieties(cluster);
+
+  return (
+    <Card data-testid="ai-cluster-details-card" isExpanded={isCardExpanded}>
+      <CardHeader
+        onExpand={() => setIsCardExpanded(!isCardExpanded)}
+        toggleButtonProps={{
+          'data-testid': 'toggle-ai-cluster-details',
+          'aria-label': 'AI Cluster Details',
+          'aria-labelledby': 'titleId toggle-button',
+          'aria-expanded': isCardExpanded,
+        }}
+      >
+        <Title headingLevel="h1" size="lg" className="card-title">
+          Installation progress
+        </Title>
+        {!isCardExpanded && (
+          <div className="pf-v6-u-ml-md">
+            <ClusterStatusIcon status={cluster.status} />
+          </div>
+        )}
+      </CardHeader>
+      <CardBody>
+        <Stack hasGutter>
+          <StackItem>
+            <ClusterProgress
+              cluster={cluster}
+              minimizedView={!isCardExpanded}
+              totalPercentage={cluster.progress?.totalPercentage || 0}
+            />
+          </StackItem>
+          <StackItem>
+            <ClusterDetailsButtonGroup
+              cluster={cluster}
+              credentials={clusterVarieties.credentials}
+              credentialsError={clusterVarieties.credentialsError}
+              showKubeConfig={false}
+            />
+          </StackItem>
+        </Stack>
+      </CardBody>
+      <CardExpandableContent>
+        <CardBody>
+          <Stack hasGutter>
+            <StackItem className="pf-v6-u-mt-lg">
+              <ClusterDetailStatusVarieties
+                cluster={cluster}
+                clusterVarieties={clusterVarieties}
+                showAddHostsInfo={false}
+              />
+            </StackItem>
+            <StackItem className="pf-v6-u-mt-lg">
+              <ClusterHostsTable cluster={cluster} skipDisabled />
+            </StackItem>
+          </Stack>
+        </CardBody>
+      </CardExpandableContent>
+    </Card>
+  );
+};

package/lib/ocm/components/clusterInstallation/ResetClusterModal.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import {
+  Button,
+  ButtonVariant,
+  Content,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import {
+  ClustersAPI,
+  handleApiError,
+  getApiErrorMessage,
+  LoadingState,
+  ErrorState,
+} from '../../../common';
+import { updateCluster } from '../../store';
+import { calculateCollectedLogsCount } from '../clusters';
+import { useModalDialogsContext } from '../hostsTable';
+
+export const ResetClusterModal: React.FC = () => {
+  const dispatch = useDispatch();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [error, setError] = React.useState<{ title: string; message: string } | null>(null);
+  const { resetClusterDialog } = useModalDialogsContext();
+  const { data, isOpen, close: onClose } = resetClusterDialog;
+  const cluster = data?.cluster;
+
+  if (!cluster) {
+    return null;
+  }
+
+  const handleClose = () => {
+    setIsSubmitting(false);
+    setError(null);
+    onClose();
+  };
+
+  const handleReset = () => {
+    const doItAsync = async () => {
+      setIsSubmitting(true);
+      try {
+        setError(null);
+        const { data } = await ClustersAPI.reset(cluster.id);
+        dispatch(updateCluster(data));
+        onClose();
+      } catch (e) {
+        handleApiError(e, () => {
+          setError({
+            title: 'Failed to reset cluster installation',
+            message: getApiErrorMessage(e),
+          });
+        });
+      }
+      setIsSubmitting(false);
+    };
+    void doItAsync();
+  };
+
+  const collectedLogsPercentage = `${Math.round(
+    (calculateCollectedLogsCount(cluster) / ((cluster.hosts?.length || 0) + 1)) * 100,
+  )} `;
+
+  const getModalContent = () => {
+    if (isSubmitting) {
+      return <LoadingState content="Resetting cluster installation..." />;
+    }
+
+    if (error) {
+      return <ErrorState title={error.title} content={error.message} />;
+    }
+
+    return (
+      <>
+        <Content component="p">
+          This will reset the installation and return to the cluster configuration. Some hosts may
+          need to be re-registered by rebooting into the Discovery ISO.
+        </Content>
+
+        <Content component="p">
+          <span className="pf-v6-u-font-weight-bold">Download the installation logs</span> to
+          troubleshoot or report a bug.
+          <br />
+          Currently, {collectedLogsPercentage}% of the installation logs were collected and are
+          ready for download.
+        </Content>
+
+        <Content component="p">
+          <Icon size="sm" status="warning">
+            <ExclamationTriangleIcon />
+          </Icon>{' '}
+          Logs won't be available after the installation is reset.
+        </Content>
+
+        <Content component="p">Are you sure you want to reset the cluster?</Content>
+      </>
+    );
+  };
+
+  const actions = [
+    <Button
+      key="reset"
+      variant={ButtonVariant.danger}
+      onClick={handleReset}
+      isDisabled={isSubmitting}
+    >
+      Reset Cluster
+    </Button>,
+  ];
+
+  actions.push(
+    <Button
+      key="cancel"
+      variant={ButtonVariant.link}
+      onClick={handleClose}
+      isDisabled={isSubmitting}
+    >
+      Cancel
+    </Button>,
+  );
+
+  return (
+    <Modal isOpen={isOpen} variant={ModalVariant.small} onClose={handleClose}>
+      <ModalHeader title="Reset Cluster Installation" />
+      <ModalBody>{getModalContent()}</ModalBody>
+      <ModalFooter>{actions}</ModalFooter>
+    </Modal>
+  );
+};

package/lib/ocm/components/clusterInstallation/index.tsx

@@ -0,0 +1,3 @@
+export * from './ClusterInstallationProgressCard';
+export * from './CancelInstallationModal';
+export * from './ResetClusterModal';