Merge pull request #1442 from uidoyen/odh-1288

replace EmptyState to Spinner component in Pipeline runs details tab
opendatahub-io · Jul 14, 2023 · c513169 · c513169
2 parents 225ba23 + 28791c3
commit c513169
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -5,8 +5,16 @@ import {
   Drawer,
   DrawerContent,
   DrawerContentBody,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  EmptyStateBody,
+  Title,
+  Bullseye,
+  Spinner,
 } from '@patternfly/react-core';
 import { useNavigate, useParams } from 'react-router-dom';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { PipelineTopology, usePipelineTaskTopology } from '~/concepts/pipelines/topology';
 import { PipelineRunKind } from '~/k8sTypes';
@@ -53,6 +61,26 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
   const { taskMap, nodes } = usePipelineTaskTopology(pipelineRuntime);
   const run = runResource?.run;
 
+  if (!loaded && !error) {
+    return (
+      <Bullseye>
+        <Spinner />
+      </Bullseye>
+    );
+  }
+
+  if (error) {
+    return (
+      <EmptyState variant={EmptyStateVariant.large} data-id="error-empty-state">
+        <EmptyStateIcon icon={ExclamationCircleIcon} />
+        <Title headingLevel="h4" size="lg">
+          Error loading pipeline run details
+        </Title>
+        <EmptyStateBody>{error.message}</EmptyStateBody>
+      </EmptyState>
+    );
+  }
+
   return (
     <>
       <Drawer isExpanded={!!selectedId}>

diff --git a/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx b/...end/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunTabDetails.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { Spinner, EmptyStateVariant, EmptyState, Title } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
 import { PipelineRunKF } from '~/concepts/pipelines/kfTypes';
 import {
@@ -15,7 +14,6 @@ import {
   DetailItem,
   renderDetailItems,
 } from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/utils';
-
 type PipelineRunTabDetailsProps = {
   pipelineRunKF?: PipelineRunKF;
   workflowName?: string;
@@ -29,14 +27,11 @@ const PipelineRunTabDetails: React.FC<PipelineRunTabDetailsProps> = ({
 
   if (!pipelineRunKF || !workflowName) {
     return (
-      <EmptyState>
-        <EmptyStateIcon icon={ExclamationCircleIcon} />
-        <Title headingLevel="h2" size="lg">
-          Error with the run
+      <EmptyState variant={EmptyStateVariant.large} data-id="loading-empty-state">
+        <Spinner size="xl" />
+        <Title headingLevel="h4" size="lg">
+          Loading
         </Title>
-        <EmptyStateBody>
-          There was an issue trying to render the details information.
-        </EmptyStateBody>
       </EmptyState>
     );
   }