@openshift-assisted/ui-lib 2.55.0 → 2.56.0

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import {
-  selectOlmOperators,
-  selectMonitoredOperators,
-  ClusterCredentials,
-  hasEnabledOperators,
-  OPERATOR_NAME_MCE,
-} from '../../../common';
-import { getClusterDetailId } from './utils';
-import { ClustersAPI } from '../../services/apis';
-import ClusterDetailStatusMessages from './ClusterDetailStatusMessages';
-import { Stack, StackItem } from '@patternfly/react-core';
-import { getErrorMessage } from '../../../common/utils';
-import {
-  Cluster,
-  Credentials,
-  MonitoredOperator,
-  MonitoredOperatorsList,
-} from '@openshift-assisted/types/assisted-installer-service';
-
-type ClusterStatusVarieties = {
-  credentials?: Credentials;
-  credentialsError: string;
-  olmOperators: MonitoredOperatorsList;
-  failedOlmOperators: MonitoredOperatorsList;
-  consoleOperator?: MonitoredOperator;
-  fetchCredentials: () => void;
-};
-
-export const useClusterStatusVarieties = (cluster?: Cluster): ClusterStatusVarieties => {
-  const [credentials, setCredentials] = React.useState<Credentials>();
-  const [credentialsError, setCredentialsError] = React.useState('');
-
-  const clusterId = cluster?.id;
-  const clusterStatus = cluster?.status;
-  const clusterMonitoredOperators = selectMonitoredOperators(cluster?.monitoredOperators);
-  const olmOperators = selectOlmOperators(cluster);
-  const failedOlmOperators = olmOperators.filter((o) => o.status === 'failed');
-  const consoleOperator = React.useMemo(
-    () => clusterMonitoredOperators.find((o) => o.name === 'console'),
-    [clusterMonitoredOperators],
-  );
-
-  const fetchCredentials = React.useCallback(() => {
-    const fetch = async () => {
-      setCredentialsError('');
-      if (!clusterId) {
-        return;
-      }
-      try {
-        const response = await ClustersAPI.getCredentials(clusterId);
-        setCredentials(response.data);
-      } catch (err) {
-        setCredentialsError(getErrorMessage(err));
-      }
-    };
-    void fetch();
-  }, [clusterId]);
-
-  const consoleOperatorStatus = consoleOperator?.status;
-  React.useEffect(() => {
-    if (
-      (!consoleOperatorStatus && clusterStatus === 'installed') || // Retain backwards compatibility with clusters which don't have monitored clusters
-      consoleOperatorStatus === 'available'
-    ) {
-      fetchCredentials();
-    }
-  }, [clusterStatus, consoleOperatorStatus, fetchCredentials]);
-
-  return {
-    credentials,
-    credentialsError,
-    olmOperators,
-    failedOlmOperators,
-    consoleOperator,
-    fetchCredentials,
-  };
-};
-
-type ClusterDetailStatusVarietiesProps = {
-  cluster: Cluster;
-  clusterVarieties: ClusterStatusVarieties;
-  showAddHostsInfo?: boolean;
-};
-
-const ClusterDetailStatusVarieties = ({
-  cluster,
-  clusterVarieties,
-  showAddHostsInfo = true,
-}: ClusterDetailStatusVarietiesProps) => {
-  const { credentials, credentialsError, consoleOperator, fetchCredentials } = clusterVarieties;
-
-  const showClusterCredentials =
-    consoleOperator?.status === 'available' || (!consoleOperator && cluster.status === 'installed'); // Retain backwards compatibility with clusters which don't have monitored clusters
-
-  return (
-    <Stack hasGutter>
-      {showClusterCredentials && (
-        <StackItem className="pf-v6-u-mt-lg">
-          <ClusterCredentials
-            cluster={cluster}
-            credentials={credentials}
-            error={!!credentialsError}
-            retry={fetchCredentials}
-            idPrefix={getClusterDetailId('cluster-creds')}
-            credentialsError={credentialsError}
-            isMceEnabled={hasEnabledOperators(cluster.monitoredOperators, OPERATOR_NAME_MCE)}
-          />
-        </StackItem>
-      )}
-      <StackItem className="pf-v6-u-mt-lg">
-        <ClusterDetailStatusMessages cluster={cluster} showAddHostsInfo={showAddHostsInfo} />
-      </StackItem>
-    </Stack>
-  );
-};
-
-export default ClusterDetailStatusVarieties;

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

@@ -1,133 +0,0 @@
-import { Flex, FlexItem, Button, ButtonVariant } from '@patternfly/react-core';
-import React from 'react';
-import {
-  canDownloadClusterLogs,
-  useAlerts,
-  KubeconfigDownload,
-  RenderIf,
-  canOpenConsole,
-} from '../../../common';
-import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { downloadClusterInstallationLogs } from './utils';
-import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import { canAbortInstallation } from '../clusters/utils';
-import { onFetchEvents } from '../fetching/fetchEvents';
-import ViewClusterEventsButton from '../../../common/components/ui/ViewClusterEventsButton';
-import { ToolbarButton } from '../../../common/components/ui/Toolbar';
-import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-
-import './ClusterDetailsButtonGroup.css';
-
-type ClusterDetailsButtonGroupProps = {
-  cluster: Cluster;
-  credentials?: Credentials;
-  credentialsError: string;
-  showKubeConfig?: boolean;
-};
-
-const LaunchOpenshiftConsoleButton: React.FC<{
-  consoleUrl?: string;
-  isDisabled: boolean;
-  id?: string;
-}> = ({ consoleUrl, isDisabled, id }) => {
-  const { t } = useTranslation();
-  return (
-    <ToolbarButton
-      variant={ButtonVariant.primary}
-      component="a"
-      href={consoleUrl}
-      target="_blank"
-      rel="noopener"
-      isDisabled={isDisabled}
-      icon={<ExternalLinkAltIcon />}
-      iconPosition="right"
-      id={id}
-      data-testid={id}
-    >
-      {t('ai:Launch OpenShift Console')}
-    </ToolbarButton>
-  );
-};
-
-const getID = (suffix: string) => `cluster-detail-${suffix}`;
-
-const ClusterDetailsButtonGroup: React.FC<ClusterDetailsButtonGroupProps> = ({
-  cluster,
-  credentials,
-  credentialsError,
-  showKubeConfig = true,
-}) => {
-  const { addAlert, clearAlerts } = useAlerts();
-  const { cancelInstallationDialog, resetClusterDialog } = useModalDialogsContext();
-  const hasConsoleUrlAndNoError = credentials?.consoleUrl !== undefined && !credentialsError;
-
-  return (
-    <Flex
-      className="assisted-ui-vertical-margin"
-      spaceItems={{ default: 'spaceItemsSm' }}
-      direction={{ default: 'row' }}
-      justifyContent={{ default: 'justifyContentFlexStart' }}
-    >
-      <RenderIf condition={cluster.status === 'error'}>
-        <FlexItem>
-          <Button
-            id={getID('button-reset-cluster')}
-            variant={ButtonVariant.danger}
-            onClick={() => resetClusterDialog.open({ cluster })}
-          >
-            Reset Cluster
-          </Button>
-        </FlexItem>
-      </RenderIf>
-      <RenderIf
-        condition={showKubeConfig && hasConsoleUrlAndNoError && canOpenConsole(cluster.status)}
-      >
-        <FlexItem>
-          <LaunchOpenshiftConsoleButton
-            isDisabled={false}
-            consoleUrl={credentials?.consoleUrl}
-            id={getID('button-launch-console')}
-          />
-        </FlexItem>
-      </RenderIf>
-      <RenderIf condition={canAbortInstallation(cluster)}>
-        <FlexItem>
-          <Button
-            data-testid="cluster-installation-abort-button"
-            variant={ButtonVariant.danger}
-            onClick={() => cancelInstallationDialog.open({ clusterId: cluster.id })}
-            isDisabled={false}
-          >
-            Abort installation
-          </Button>
-        </FlexItem>
-      </RenderIf>
-      <FlexItem>
-        <KubeconfigDownload
-          status={cluster.status}
-          clusterId={cluster.id}
-          data-testid={getID('button-download-kubeconfig')}
-          id={getID('button-download-kubeconfig')}
-        />
-      </FlexItem>
-      <FlexItem>
-        <ViewClusterEventsButton cluster={cluster} onFetchEvents={onFetchEvents} />
-      </FlexItem>
-      <FlexItem>
-        <Button
-          data-testid="cluster-installation-logs-button"
-          variant={ButtonVariant.link}
-          onClick={() => {
-            void downloadClusterInstallationLogs(addAlert, cluster.id, clearAlerts);
-          }}
-          isDisabled={!canDownloadClusterLogs(cluster)}
-        >
-          Download Installation Logs
-        </Button>
-      </FlexItem>
-    </Flex>
-  );
-};
-
-export default ClusterDetailsButtonGroup;

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import { GridItem, Alert, AlertVariant, AlertActionLink, Content } from '@patternfly/react-core';
-import { getReportIssueLink, canDownloadClusterLogs, useAlerts, toSentence } from '../../../common';
-import { downloadClusterInstallationLogs } from './utils';
-import { useModalDialogsContext } from '../hosts/ModalDialogsContext';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-type ClusterInstallationErrorProps = {
-  cluster: Cluster;
-  title?: string;
-};
-
-const getID = (suffix: string) => `cluster-install-error-${suffix}`;
-
-const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
-  cluster,
-  title = 'Cluster installation failed',
-}) => {
-  const { addAlert, clearAlerts } = useAlerts();
-  const { resetClusterDialog } = useModalDialogsContext();
-
-  return (
-    <GridItem>
-      <Alert
-        variant={AlertVariant.danger}
-        title={title}
-        actionLinks={
-          <>
-            <AlertActionLink
-              onClick={() => resetClusterDialog.open({ cluster })}
-              id={getID('button-reset-cluster')}
-            >
-              Reset Cluster
-            </AlertActionLink>
-            <AlertActionLink
-              onClick={() => {
-                void downloadClusterInstallationLogs(addAlert, cluster.id, clearAlerts);
-              }}
-              isDisabled={!canDownloadClusterLogs(cluster)}
-              id={getID('button-download-installation-logs')}
-            >
-              Download Installation Logs
-            </AlertActionLink>
-            <AlertActionLink
-              onClick={() => window.open(getReportIssueLink(), '_blank', 'noopener,noreferrer')}
-              id={getID('button-report-bug')}
-            >
-              Report a bug
-            </AlertActionLink>
-          </>
-        }
-        isInline
-      >
-        <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>
-      </Alert>
-    </GridItem>
-  );
-};
-
-export default ClusterInstallationError;

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

@@ -1,83 +0,0 @@
-import React from 'react';
-import {
-  Card,
-  Title,
-  CardBody,
-  CardHeader,
-  CardExpandableContent,
-  Stack,
-  StackItem,
-} from '@patternfly/react-core';
-import { ClusterProgress } from '../../../common';
-import ClusterHostsTable from '../hosts/ClusterHostsTable';
-import ClusterDetailsButtonGroup from './ClusterDetailsButtonGroup';
-import { ClusterStatusIcon } from '../clusters/ClusterStatus';
-import ClusterDetailStatusVarieties, {
-  useClusterStatusVarieties,
-} from './ClusterDetailStatusVarieties';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-
-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>
-  );
-};
-
-export default ClusterInstallationProgressCard;

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
-
-const defaultTitle = 'Unable to fetch the latest data';
-
-const defaultContent =
-  "There was an error fetching the latest data from the API. We'll try again, but if the data does not update in a few minutes, try refreshing the page.";
-
-const ClusterPollingErrorModal = ({
-  title = defaultTitle,
-  content = defaultContent,
-}: {
-  title?: string;
-  content?: string;
-}) => {
-  return (
-    <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
-      <ModalHeader title={title} titleIconVariant="danger" />
-      <ModalBody>{content}</ModalBody>
-      <ModalFooter>
-        <Button
-          key="refresh"
-          variant={ButtonVariant.primary}
-          onClick={() => window.location.reload()}
-        >
-          Refresh page
-        </Button>
-      </ModalFooter>
-    </Modal>
-  );
-};
-
-export default ClusterPollingErrorModal;

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

@@ -1,30 +0,0 @@
-import { ExpandableSection } from '@patternfly/react-core';
-import React, { useState } from 'react';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { ReviewSummaryContent } from '../clusterConfiguration/review/ReviewSummary';
-import { ClusterFeatureSupportLevelsDetailItem } from '../featureSupportLevels';
-import './ClusterSummaryExpandable.css';
-
-type ClusterSummaryExpandableProps = {
-  cluster: Cluster;
-};
-
-const ClusterSummaryExpandable = ({ cluster }: ClusterSummaryExpandableProps) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  return (
-    <ExpandableSection
-      toggleContent="Cluster summary"
-      onToggle={() => setIsExpanded(!isExpanded)}
-      isExpanded={isExpanded}
-      className="cluster-summary-expandable"
-      id="cluster-summary-expandable"
-    >
-      <div className="pf-v6-u-pl-md pf-v6-u-pt-md">
-        <ClusterFeatureSupportLevelsDetailItem cluster={cluster} />
-        <ReviewSummaryContent cluster={cluster} />
-      </div>
-    </ExpandableSection>
-  );
-};
-
-export default ClusterSummaryExpandable;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  ButtonVariant,
-  Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
-
-const ClusterUpdateErrorModal = () => (
-  <Modal isOpen variant={ModalVariant.small} onClose={undefined}>
-    <ModalHeader title="Unable to update cluster" titleIconVariant="danger" />
-    <ModalBody>
-      The service is down, undergoing maintenance, or experiencing another issue.
-    </ModalBody>
-    <ModalFooter>
-      <Button
-        key="refresh"
-        variant={ButtonVariant.primary}
-        onClick={() => window.location.reload()}
-      >
-        Refresh page
-      </Button>
-    </ModalFooter>
-  </Modal>
-);
-
-export default ClusterUpdateErrorModal;

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

@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-import { ExpandableSection, Icon } from '@patternfly/react-core';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-
-import { hostStatus } from '../../../common';
-import ClusterHostsTable from '../hosts/ClusterHostsTable';
-import { getHostsWithTimeout, getMostSevereHostStatus } from './utils';
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-
-import './HostInventoryExpandable.css';
-
-type HostInventoryExpandableProps = {
-  cluster: Cluster;
-};
-
-const ExpandableSectionTitle = ({
-  hostsCount,
-  icon,
-}: {
-  hostsCount: number;
-  icon?: React.ReactNode;
-}) => (
-  <span>
-    {`Host inventory ${hostsCount > 0 ? `(${hostsCount})` : ''}`}
-    {icon && <span className="pf-v6-u-ml-sm">{icon}</span>}
-  </span>
-);
-
-const HostInventoryExpandable = ({ cluster }: HostInventoryExpandableProps) => {
-  const { t } = useTranslation();
-  const [isExpanded, setIsExpanded] = useState(false);
-  const hosts = cluster.hosts || [];
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
-  const mostSevereHostStatus = getMostSevereHostStatus(hosts);
-  const hostStatusDef = mostSevereHostStatus ? hostStatus(t)[mostSevereHostStatus] : null;
-  const someHostHasTimeout = getHostsWithTimeout(hosts);
-  const warningIcon = (
-    <Icon size="sm" status="warning">
-      <ExclamationTriangleIcon />
-    </Icon>
-  );
-  return (
-    <ExpandableSection
-      toggleContent={
-        <ExpandableSectionTitle
-          hostsCount={hosts.length}
-          icon={someHostHasTimeout ? warningIcon : hostStatusDef?.icon}
-        />
-      }
-      onToggle={() => setIsExpanded(!isExpanded)}
-      isExpanded={isExpanded}
-      className="host-inventory-expandable"
-      id="host-inventory-expandable"
-    >
-      <ClusterHostsTable cluster={cluster} skipDisabled />
-    </ExpandableSection>
-  );
-};
-export default HostInventoryExpandable;

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import { Popover, Content, ContentVariants, Icon } from '@patternfly/react-core';
-import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-
-import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
-import { getOpenshiftVersionText } from '../../../common';
-import { useOpenShiftVersionsContext } from '../clusterWizard/OpenShiftVersionsContext';
-import { useTranslation } from '../../../common/hooks/use-translation-wrapper';
-
-const UnsupportedVersion = ({ version }: { version: string }) => {
-  const { t } = useTranslation();
-
-  const hint = (
-    <Content component={ContentVariants.p}>
-      {t('ai:Please note that this version is not production-ready.')}
-    </Content>
-  );
-  return (
-    <Content component="p">
-      {version} &nbsp;
-      <Popover bodyContent={hint}>
-        <Icon size="sm" status="warning">
-          <ExclamationTriangleIcon />
-        </Icon>
-      </Popover>
-    </Content>
-  );
-};
-
-const OpenShiftVersionDetail = ({ cluster }: { cluster: Cluster }) => {
-  const { openshiftVersion } = cluster;
-  const { isSupportedOpenShiftVersion, latestVersions: versions } = useOpenShiftVersionsContext();
-  const isSupported = isSupportedOpenShiftVersion(openshiftVersion);
-
-  const version = React.useMemo(() => {
-    return getOpenshiftVersionText({
-      versions,
-      openshiftVersion: openshiftVersion || '',
-      cpuArchitecture: cluster.cpuArchitecture,
-      withPreviewText: true,
-      withMultiText: true,
-    });
-  }, [versions, cluster.cpuArchitecture, openshiftVersion]);
-
-  return isSupported ? <>{version}</> : <UnsupportedVersion version={version || ''} />;
-};
-
-export default OpenShiftVersionDetail;