AGENT-1160: ABI - add finalizing page

apps/assisted-disconnected-ui/src/components/ClusterPage.tsx

@@ -1,10 +1,67 @@
-import { SingleClusterPage } from '@openshift-assisted/ui-lib/ocm';
+import * as React from 'react';
+import { SingleClusterPage, Store } from '@openshift-assisted/ui-lib/ocm';
 import { useParams } from 'react-router-dom-v5-compat';
+import {
+  ClustersAPI,
+  getHostProgressStages,
+  ResourceUIState,
+} from '@openshift-assisted/ui-lib/common';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+
 import ResetSingleClusterModal from './ResetSingleClusterModal';
+import SingleClusterFinalizerPage from './SingleClusterFinalizerPage';
+
+const currentClusterSelector = (state: Store.RootStateDay1) => state.currentCluster;
+
+const useFinalizerPage = () => {
+  const { uiState, data: cluster } = Store.useSelectorDay1(currentClusterSelector);
+  const clusterRef = React.useRef<Cluster>();
+  const [consoleUrl, setConsoleUrl] = React.useState<string>();
+
+  React.useEffect(() => {
+    // Fetch console URL for finalizer page.
+    // We wont be able to do so after we render it, as backend will be already gone at the time.
+    if (
+      !consoleUrl &&
+      cluster?.id &&
+      ['installing', 'installing-pending-user-action'].includes(cluster.status)
+    ) {
+      void (async () => {
+        try {
+          const resp = await ClustersAPI.getCredentials(cluster.id);
+          setConsoleUrl(resp.data.consoleUrl);
+        } catch {
+          // Nothing to do
+        }
+      })();
+    }
+  }, [cluster?.id, cluster?.status, consoleUrl]);
+
+  if (!clusterRef.current && cluster && uiState === ResourceUIState.POLLING_ERROR) {
+    const boostrapHost = cluster.hosts?.find((h) => h.bootstrap);
+    if (boostrapHost) {
+      const stages = getHostProgressStages(boostrapHost);
+      const rebootIdx = stages.findIndex((s) => s === 'Rebooting');
+      const currentStage = boostrapHost.progress?.currentStage;
+      // Show finalizing page as soon as we fail to poll and bootstrap is Rebooting or state before
+      if (!!currentStage && stages.slice(rebootIdx - 2, stages.length).includes(currentStage)) {
+        clusterRef.current = cluster;
+      }
+    }
+  }
+
+  return { cluster: clusterRef.current, consoleUrl };
+};
 
 const ClusterPage = () => {
   const { clusterId } = useParams() as { clusterId: string };
-  return <SingleClusterPage clusterId={clusterId} resetModal={<ResetSingleClusterModal />} />;
+  const { cluster, consoleUrl } = useFinalizerPage();
+
+  return cluster ? (
+    <SingleClusterFinalizerPage cluster={cluster} consoleUrl={consoleUrl} />
+  ) : (
+    <SingleClusterPage clusterId={clusterId} resetModal={<ResetSingleClusterModal />} />
+  );
 };
 
 export default ClusterPage;

apps/assisted-disconnected-ui/src/components/SingleClusterFinalizerPage.tsx

@@ -0,0 +1,60 @@
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateHeader,
+  EmptyStateVariant,
+  Spinner,
+} from '@patternfly/react-core';
+import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
+import {
+  TroubleshootingOpenshiftConsoleButton,
+  useTranslation,
+} from '@openshift-assisted/ui-lib/common';
+
+const SingleClusterFinalizerPage = ({
+  cluster,
+  consoleUrl,
+}: {
+  cluster: Cluster;
+  consoleUrl?: string;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <Bullseye>
+      <EmptyState variant={EmptyStateVariant.xl}>
+        <EmptyStateHeader
+          titleText={t('ai:Finalizing')}
+          headingLevel="h4"
+          icon={<Spinner size="xl" />}
+        />
+        <EmptyStateBody>
+          {t('ai:Cluster installation is still in-progress.')}
+          <br />
+          {t('ai:Click the webconsole URL below to check if it is up and running.')}
+          <br />
+          {t(
+            'ai:* If you close this browser window, the webconsole URL can be found also inside the credentials file you have downloaded. Cluster installation is still in-progress.',
+          )}
+          <br />
+        </EmptyStateBody>
+        <EmptyStateFooter>
+          {consoleUrl && (
+            <Button
+              variant="link"
+              onClick={() => window.open(consoleUrl, '_blank', 'noopener')}
+              isInline
+            >
+              {consoleUrl}
+            </Button>
+          )}
+          <TroubleshootingOpenshiftConsoleButton cluster={cluster} consoleUrl={consoleUrl} />
+        </EmptyStateFooter>
+      </EmptyState>
+    </Bullseye>
+  );
+};
+
+export default SingleClusterFinalizerPage;

libs/locales/lib/en/translation.json

@@ -27,6 +27,7 @@
   "ai:{{operatorsCountString}} installed": "{{operatorsCountString}} installed",
   "ai:{{selectedAgentsCount}} host selected out of {{matchingAgentsCount}} matching.": "{{selectedAgentsCount}} host selected out of {{matchingAgentsCount}} identified.",
   "ai:{{selectedAgentsCount}} host selected out of {{matchingAgentsCount}} matching._plural": "{{selectedAgentsCount}} hosts selected out of {{matchingAgentsCount}} identified.",
+  "ai:* If you close this browser window, the webconsole URL can be found also inside the credentials file you have downloaded. Cluster installation is still in-progress.": "* If you close this browser window, the webconsole URL can be found also inside the credentials file you have downloaded. Cluster installation is still in-progress.",
   "ai:<i>This IP will be allocated by the DHCP server</i>": "<i>This IP address is allocated by the DHCP server.</i>",
   "ai:1 (Single Node OpenShift - not highly available cluster)": "1 (Single Node OpenShift - not highly available cluster)",
   "ai:1-{{count}} characters": "1-{{count}} characters",
@@ -160,6 +161,7 @@
   "ai:Click the Add host button.": "Click the Add host button.",
   "ai:Click the Add host button._plural": "Click the Add hosts button.",
   "ai:Click the Add hosts button.": "Click the Add hosts button.",
+  "ai:Click the webconsole URL below to check if it is up and running.": "Click the webconsole URL below to check if it is up and running.",
   "ai:Close": "Close",
   "ai:Cluster": "Cluster",
   "ai:Cluster address": "Cluster address",
@@ -172,6 +174,7 @@
   "ai:Cluster Events": "Cluster Events",
   "ai:Cluster hosts": "Cluster hosts",
   "ai:Cluster installation failed": "Cluster installation failed",
+  "ai:Cluster installation is still in-progress.": "Cluster installation is still in-progress.",
   "ai:Cluster installation process": "Cluster installation process",
   "ai:Cluster installation was cancelled": "Cluster installation was cancelled.",
   "ai:Cluster must have at least 3 hosts.": "Cluster must have at least 3 hosts.",

libs/ui-lib/lib/common/components/clusterDetail/index.ts

@@ -3,3 +3,4 @@ export { default as ClusterProgress } from './ClusterProgress';
 export { default as ClusterCredentials } from './ClusterCredentials';
 export { default as KubeconfigDownload } from './KubeconfigDownload';
 export { default as PostInstallAlert } from './PostInstallAlert';
+export { TroubleshootingOpenshiftConsoleButton } from './ConsoleModal';

libs/ui-lib/lib/ocm/components/clusters/ClusterPage.tsx

@@ -177,9 +177,6 @@ const ClusterPageGeneric = ({
                     openshiftVersion={cluster.openshiftVersion}
                     platformType={cluster.platform?.type}
                   >
-                    {/* TODO(mlibra): Will be reworked within https://issues.redhat.com/browse/AGENT-522
-                    <RebootNodeZeroModal cluster={cluster} />
-                    */}
                     {getContent(cluster, infraEnv)}
                     {uiState === ResourceUIState.POLLING_ERROR && <ClusterPollingErrorModal />}
                     {uiState === ResourceUIState.UPDATE_ERROR && <ClusterUpdateErrorModal />}