@openshift-assisted/ui-lib 2.55.0 → 2.56.0

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Alert, Stack, StackItem } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { Cluster, PlatformType } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  REDHAT_CONSOLE_OPENSHIFT,
+  canDownloadKubeconfig,
+  isSNO,
+  isClusterPlatformTypeVM,
+  calculateClusterDateDiff,
+  isInOcm,
+  useNewFeatureSupportLevel,
+} from '../../../../common';
+import { useDefaultConfiguration } from '../../../contexts';
+import { useFeature } from '../../../hooks/use-feature';
+import { ExternalPlatformLinks } from '../../wizard/wizardFields';
+import { PostInstallAlert } from './PostInstallAlert';
+
+type ClusterDetailStatusMessagesProps = {
+  cluster: Cluster;
+  showAddHostsInfo: boolean;
+};
+
+export const ClusterDetailStatusMessages = ({
+  cluster,
+  showAddHostsInfo,
+}: ClusterDetailStatusMessagesProps) => {
+  const isSingleClusterFeatureEnabled = useFeature('ASSISTED_INSTALLER_SINGLE_CLUSTER_FEATURE');
+  const featureSupportLevelContext = useNewFeatureSupportLevel();
+  const { inactiveDeletionHours } = useDefaultConfiguration(['inactiveDeletionHours']);
+  const inactiveDeletionDays = Math.round((inactiveDeletionHours || 0) / 24);
+  const dateDifference = calculateClusterDateDiff(inactiveDeletionDays, cluster.installCompletedAt);
+  const showAddHostsAlert = Boolean(
+    showAddHostsInfo &&
+      isInOcm &&
+      cluster.status === 'installed' &&
+      (!isSNO(cluster) || featureSupportLevelContext.isFeatureSupported('SINGLE_NODE_EXPANSION')),
+  );
+
+  const platformLink = isClusterPlatformTypeVM(cluster)
+    ? ExternalPlatformLinks[cluster.platform?.type as PlatformType]
+    : '';
+
+  return (
+    <Stack hasGutter>
+      {!isSingleClusterFeatureEnabled &&
+        typeof inactiveDeletionHours === 'number' &&
+        canDownloadKubeconfig(cluster.status) && (
+          <StackItem>
+            <Alert
+              variant="info"
+              isInline
+              title={
+                dateDifference > 0
+                  ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
+                    `deleted from Assisted Installer's service in ${dateDifference} days.`
+                  : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              }
+            />
+          </StackItem>
+        )}
+      {showAddHostsAlert && (
+        <StackItem>
+          <Alert
+            variant="info"
+            isInline
+            data-testid="alert-add-hosts"
+            title={
+              <p>
+                {isClusterPlatformTypeVM(cluster)
+                  ? 'Add new hosts by using the platform auto-scale feature or manually generating a new Discovery ISO under the "Add hosts" tab on '
+                  : 'Add new hosts by generating a new Discovery ISO under your cluster\'s "Add hosts" tab on '}
+                <a href={REDHAT_CONSOLE_OPENSHIFT} target="_blank" rel="noopener noreferrer">
+                  console.redhat.com/openshift <ExternalLinkAltIcon />
+                </a>
+                .
+              </p>
+            }
+          />
+        </StackItem>
+      )}
+      {platformLink && (
+        <StackItem>
+          <PostInstallAlert link={platformLink} />
+        </StackItem>
+      )}
+    </Stack>
+  );
+};

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Stack, StackItem } from '@patternfly/react-core';
+import {
+  Cluster,
+  Credentials,
+  MonitoredOperator,
+  MonitoredOperatorsList,
+} from '@openshift-assisted/types/assisted-installer-service';
+import {
+  selectOlmOperators,
+  selectMonitoredOperators,
+  ClusterCredentials,
+  hasEnabledOperators,
+  OPERATOR_NAME_MCE,
+  getErrorMessage,
+} from '../../../../common';
+import { ClustersAPI } from '../../../services/apis';
+import { ClusterDetailStatusMessages } from './ClusterDetailStatusMessages';
+import { getClusterDetailId } from '../utils';
+
+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;
+};
+
+export 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>
+  );
+};

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Flex, FlexItem, Button, ButtonVariant } from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import { Cluster, Credentials } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  canDownloadClusterLogs,
+  useAlerts,
+  KubeconfigDownload,
+  RenderIf,
+  canOpenConsole,
+  ViewClusterEventsButton,
+  ToolbarButton,
+  useTranslation,
+} from '../../../../common';
+import { useModalDialogsContext } from '../../hostsTable/modals/ModalDialogsContext';
+import { canAbortInstallation } from '../../clusters/utils';
+import { onFetchEvents } from '../../fetching/fetchEvents';
+import { downloadClusterInstallationLogs } from '../utils';
+
+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}`;
+
+export 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>
+  );
+};

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

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { ReviewSummaryContent } from '../../wizard/steps/review/ReviewSummary';
+import { ClusterFeatureSupportLevelsDetailItem } from '../../featureSupportLevels';
+import './ClusterSummaryExpandable.css';
+
+type ClusterSummaryExpandableProps = {
+  cluster: Cluster;
+};
+
+export 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>
+  );
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ToolbarContent, Toolbar, ActionGroup } from '@patternfly/react-core';
+import './ClusterToolbar.css';
+
+interface Props {
+  validationSection?: React.ReactNode;
+}
+
+export const ClusterToolbar: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  validationSection,
+}) => (
+  <>
+    {validationSection}
+    <ActionGroup>
+      <Toolbar id="cluster-toolbar" className="cluster-toolbar">
+        <ToolbarContent className="cluster-toolbar__content">{children}</ToolbarContent>
+      </Toolbar>
+    </ActionGroup>
+  </>
+);

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

@@ -0,0 +1,58 @@
+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 { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import { hostStatus, useTranslation } from '../../../../common';
+import { ClusterHostsTable } from '../../hostsTable/ClusterHostsTable';
+import { getHostsWithTimeout, getMostSevereHostStatus } from '../utils';
+
+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>
+);
+
+export 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>
+  );
+};

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

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Grid, GridItem } from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  EventListFetchProps,
+  getEnabledHosts,
+  OperatorsProgressItem,
+  RenderIf,
+  selectAllOlmOperators,
+  FinalizingProgress,
+  ProgressBarTexts,
+} from '../../../../common';
+
+type OcmClusterProgressItemsProps = {
+  cluster: Cluster;
+  minimizedView?: boolean;
+  onFetchEvents: EventListFetchProps['onFetchEvents'];
+  totalPercentage?: number;
+  fallbackEventsURL?: string;
+};
+
+export const OcmClusterProgressItems = ({
+  cluster,
+  minimizedView = false,
+  onFetchEvents,
+  fallbackEventsURL,
+}: OcmClusterProgressItemsProps) => {
+  const enabledHosts = getEnabledHosts(cluster.hosts);
+  const olmOperators = selectAllOlmOperators(cluster);
+
+  const masterHosts = enabledHosts.filter((host) => host.role && 'master' === host.role);
+  const workerHosts = enabledHosts.filter((host) => host.role && 'worker' === host.role);
+
+  return (
+    <>
+      <RenderIf condition={!minimizedView}>
+        <Grid hasGutter>
+          <GridItem span={3}>
+            <ProgressBarTexts hosts={masterHosts} hostRole="master" />
+          </GridItem>
+          <RenderIf condition={workerHosts.length > 0}>
+            <GridItem span={3}>
+              <ProgressBarTexts hosts={workerHosts} hostRole="worker" />
+            </GridItem>
+          </RenderIf>
+          <GridItem span={3}>
+            <FinalizingProgress
+              cluster={cluster}
+              onFetchEvents={onFetchEvents}
+              fallbackEventsURL={fallbackEventsURL}
+            />
+          </GridItem>
+          <RenderIf condition={olmOperators.length > 0}>
+            <GridItem span={3}>
+              <OperatorsProgressItem operators={olmOperators} />
+            </GridItem>
+          </RenderIf>
+        </Grid>
+      </RenderIf>
+    </>
+  );
+};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Alert } from '@patternfly/react-core';
+import { ExternalLink, useTranslation } from '../../../../common';
+
+type PostInstallAlertProps = {
+  link: string;
+};
+
+export const PostInstallAlert = ({ link }: PostInstallAlertProps) => {
+  const { t } = useTranslation();
+  return (
+    <Alert
+      variant="warning"
+      isInline
+      data-testid="alert-modify-platform-config"
+      title={
+        <p>
+          {t(
+            "ai:Modify your platform configuration to access your platform's features directly in OpenShift.",
+          )}{' '}
+          <ExternalLink href={link}>{t('ai:Learn more about configuration.')}</ExternalLink>
+        </p>
+      }
+    />
+  );
+};