comments

src/ui/common/src/components/pages/artifact/id/components/Preview.tsx

@@ -1,5 +1,6 @@
-import { Alert, Box, Divider, Typography } from '@mui/material';
+import { Alert, Box, Typography } from '@mui/material';
 import React from 'react';
+import ExecutionStatus from '../../../../../utils/shared';
 
 import ArtifactContent from '../../../../../components/workflows/artifact/content';
 import { ArtifactResultResponse } from '../../../../../handlers/responses/node';
@@ -22,57 +23,49 @@ export const Preview: React.FC<PreviewProps> = ({
   contentLoading,
   contentError,
 }) => {
-  let preview = (
-    <>
-      <Divider sx={{ marginY: '32px' }} />
-
-      <Box marginBottom="32px">
-        <Alert severity="warning">
-          An upstream operator failed, causing this artifact to not be created.
-        </Alert>
-      </Box>
-    </>
-  );
-
   if (upstreamPending) {
-    preview = (
-      <>
-        <Divider sx={{ marginY: '32px' }} />
+    return (
+      <Alert severity="warning">
+        An upstream operator is in progress so this artifact is not yet created.
+      </Alert>
+    );
+  }
 
+  if (previewAvailable) {
+    if (artifactResult?.exec_state?.status === ExecutionStatus.Deleted) {
+      return (
         <Box marginBottom="32px">
-          <Alert severity="warning">
-            An upstream operator is in progress so this artifact is not yet
-            created.
+          <Alert severity="info">
+            This artifact has succeeded, but the snapshot has been deleted.
           </Alert>
         </Box>
-      </>
-    );
-  } else if (previewAvailable) {
-    preview = (
-      <>
-        <Divider sx={{ marginY: '32px' }} />
-        <Box width="100%" marginTop="12px">
-          <Typography
-            variant="h6"
-            component="div"
-            marginBottom="8px"
-            fontWeight="normal"
-          >
-            Preview
-          </Typography>
-          <ArtifactContent
-            artifactResult={artifactResult}
-            content={content}
-            contentLoading={contentLoading}
-            contentError={contentError}
-          />
-        </Box>
-
-        <Divider sx={{ marginY: '32px' }} />
-      </>
+      );
+    }
+    return (
+      <Box width="100%">
+        <Typography
+          variant="h6"
+          component="div"
+          marginBottom="8px"
+          fontWeight="normal"
+        >
+          Preview
+        </Typography>
+        <ArtifactContent
+          artifactResult={artifactResult}
+          content={content}
+          contentLoading={contentLoading}
+          contentError={contentError}
+        />
+      </Box>
     );
   }
-  return preview;
+
+  return (
+    <Alert severity="warning">
+      An upstream operator failed, causing this artifact to not be created.
+    </Alert>
+  );
 };
 
 export default Preview;

src/ui/common/src/components/pages/artifact/id/index.tsx

@@ -1,4 +1,5 @@
 import { CircularProgress } from '@mui/material';
+import { Divider } from '@mui/material';
 import Box from '@mui/material/Box';
 import React from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -141,6 +142,8 @@ const ArtifactDetailsPage: React.FC<ArtifactDetailsPageProps> = ({
             )}
           </Box>
 
+          <Divider sx={{ marginY: '32px' }} />
+
           <Preview
             upstreamPending={upstreamPending}
             previewAvailable={previewAvailable}
@@ -150,6 +153,8 @@ const ArtifactDetailsPage: React.FC<ArtifactDetailsPageProps> = ({
             contentError={contentError ? (contentError as string) : ''}
           />
 
+          <Divider sx={{ marginY: '32px' }} />
+
           <Box display="flex" width="100%">
             <MetricsOverview metrics={metrics} nodeResults={nodeResults} />
             <Box width="96px" />

src/ui/common/src/components/tables/CheckTableItem.tsx

@@ -16,13 +16,9 @@ export const CheckTableItem: React.FC<CheckTableItemProps> = ({
     return <>{value}</>;
   }
 
-  if (status) {
-    return <StatusIndicator status={status} size={'16px'} monochrome={false} />;
-  }
-
   return (
     <StatusIndicator
-      status={ExecutionStatus.Unknown}
+      status={status ?? ExecutionStatus.Unknown}
       size={'16px'}
       monochrome={false}
     />

src/ui/common/src/components/workflows/artifact/content.tsx

@@ -45,7 +45,7 @@ const ArtifactContent: React.FC<Props> = ({
     );
   }
 
-  if (!content || !content.content || !artifactResult) {
+  if (!content?.content || !artifactResult) {
     return (
       <Typography variant="h5" component="div" marginBottom="8px">
         No result to show for this artifact.

src/ui/common/src/components/workflows/nodes/Node.tsx

@@ -40,6 +40,7 @@ const artifactNodeStatusLabels = {
   [ExecutionStatus.Running]: 'Running',
   [ExecutionStatus.Warning]: 'Warning',
   [ExecutionStatus.Unknown]: 'Unknown',
+  [ExecutionStatus.Deleted]: 'Deleted',
 };
 
 const operatorNodeStatusLabels = {
@@ -51,6 +52,7 @@ const operatorNodeStatusLabels = {
   [ExecutionStatus.Running]: 'Running',
   [ExecutionStatus.Warning]: 'Warning',
   [ExecutionStatus.Unknown]: 'Unknown',
+  [ExecutionStatus.Deleted]: 'Deleted',
 };
 
 const checkNodeStatusLabels = {
@@ -62,6 +64,7 @@ const checkNodeStatusLabels = {
   [ExecutionStatus.Running]: 'Running',
   [ExecutionStatus.Warning]: 'Warning',
   [ExecutionStatus.Unknown]: 'Unknown',
+  [ExecutionStatus.Deleted]: 'Deleted',
 };
 
 export const artifactTypeToIconMapping = {
@@ -163,6 +166,7 @@ export const Node: React.FC<Props> = ({ data, isConnectable }) => {
   let backgroundColor;
   switch (status) {
     case ExecutionStatus.Succeeded:
+    case ExecutionStatus.Deleted:
       backgroundColor = theme.palette.green[100];
       break;
     case ExecutionStatus.Warning:
@@ -173,7 +177,6 @@ export const Node: React.FC<Props> = ({ data, isConnectable }) => {
       break;
     case ExecutionStatus.Canceled:
     case ExecutionStatus.Pending:
-    case ExecutionStatus.Deleted:
     default:
       backgroundColor = theme.palette.gray[400];
   }