fix: add paused state

packages/zapp/console/src/components/Executions/CacheStatus.tsx

@@ -0,0 +1,116 @@
+import { SvgIconProps, Tooltip, Typography } from '@material-ui/core';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import CachedOutlined from '@material-ui/icons/CachedOutlined';
+import ErrorOutlined from '@material-ui/icons/ErrorOutlined';
+import InfoOutlined from '@material-ui/icons/InfoOutlined';
+import classnames from 'classnames';
+import { assertNever } from 'common/utils';
+import { PublishedWithChangesOutlined } from 'components/common/PublishedWithChanges';
+import { useCommonStyles } from 'components/common/styles';
+import { CatalogCacheStatus } from 'models/Execution/enums';
+import { TaskExecutionIdentifier } from 'models/Execution/types';
+import { MapCacheIcon } from '@flyteconsole/ui-atoms';
+import * as React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Routes } from 'routes/routes';
+import {
+  cacheStatusMessages,
+  unknownCacheStatusString,
+  viewSourceExecutionString,
+} from './constants';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  cacheStatus: {
+    alignItems: 'center',
+    display: 'flex',
+    marginTop: theme.spacing(1),
+  },
+  sourceExecutionLink: {
+    fontWeight: 'normal',
+  },
+}));
+
+/** Renders the appropriate icon for a given CatalogCacheStatus */
+const NodeExecutionCacheStatusIcon: React.FC<
+  SvgIconProps & {
+    status: CatalogCacheStatus;
+  }
+> = React.forwardRef(({ status, ...props }, ref) => {
+  switch (status) {
+    case CatalogCacheStatus.CACHE_DISABLED:
+    case CatalogCacheStatus.CACHE_MISS: {
+      return <InfoOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.CACHE_HIT: {
+      return <CachedOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.CACHE_POPULATED: {
+      return <PublishedWithChangesOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.CACHE_LOOKUP_FAILURE:
+    case CatalogCacheStatus.CACHE_PUT_FAILURE: {
+      return <ErrorOutlined {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    case CatalogCacheStatus.MAP_CACHE: {
+      return <MapCacheIcon {...props} ref={ref} data-testid="cache-icon" />;
+    }
+    default: {
+      assertNever(status);
+      return null;
+    }
+  }
+});
+
+export interface CacheStatusProps {
+  cacheStatus: CatalogCacheStatus | null | undefined;
+  /** `normal` will render an icon with description message beside it
+   *  `iconOnly` will render just the icon with the description as a tooltip
+   */
+  variant?: 'normal' | 'iconOnly';
+  sourceTaskExecutionId?: TaskExecutionIdentifier;
+  iconStyles?: React.CSSProperties;
+}
+
+export const CacheStatus: React.FC<CacheStatusProps> = ({
+  cacheStatus,
+  sourceTaskExecutionId,
+  variant = 'normal',
+  iconStyles,
+}) => {
+  const commonStyles = useCommonStyles();
+  const styles = useStyles();
+
+  if (cacheStatus == null) {
+    return null;
+  }
+
+  const message = cacheStatusMessages[cacheStatus] || unknownCacheStatusString;
+
+  return variant === 'iconOnly' ? (
+    <Tooltip title={message}>
+      <NodeExecutionCacheStatusIcon
+        className={classnames(commonStyles.iconRight, commonStyles.iconSecondary)}
+        style={iconStyles}
+        status={cacheStatus}
+      />
+    </Tooltip>
+  ) : (
+    <>
+      <Typography className={styles.cacheStatus} variant="subtitle1" color="textSecondary">
+        <NodeExecutionCacheStatusIcon
+          status={cacheStatus}
+          className={classnames(commonStyles.iconSecondary, commonStyles.iconLeft)}
+        />
+        {message}
+      </Typography>
+      {sourceTaskExecutionId && (
+        <RouterLink
+          className={classnames(commonStyles.primaryLink, styles.sourceExecutionLink)}
+          to={Routes.ExecutionDetails.makeUrl(sourceTaskExecutionId.nodeExecutionId.executionId)}
+        >
+          {viewSourceExecutionString}
+        </RouterLink>
+      )}
+    </>
+  );
+};

packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionDetailsActions.tsx

@@ -10,6 +10,7 @@ import { literalsToLiteralValueMap } from 'components/Launch/LaunchForm/utils';
 import { TaskInitialLaunchParameters } from 'components/Launch/LaunchForm/types';
 import { NodeExecutionPhase } from 'models/Execution/enums';
 import Close from '@material-ui/icons/Close';
+import { useEffect, useState } from 'react';
 import { NodeExecutionDetails } from '../types';
 import t from './strings';
 import { ExecutionNodeDeck } from './ExecutionNodeDeck';
@@ -57,26 +58,28 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 interface ExecutionDetailsActionsProps {
-  details: NodeExecutionDetails;
+  details?: NodeExecutionDetails;
   nodeExecutionId: NodeExecutionIdentifier;
-  phase?: NodeExecutionPhase;
+  phase: NodeExecutionPhase;
 }
 
-export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JSX.Element => {
-  const { details, nodeExecutionId, phase } = props;
+export const ExecutionDetailsActions = ({
+  details,
+  nodeExecutionId,
+  phase,
+}: ExecutionDetailsActionsProps): JSX.Element => {
   const styles = useStyles();
 
-  const [showLaunchForm, setShowLaunchForm] = React.useState<boolean>(false);
-
-  const [initialParameters, setInitialParameters] = React.useState<
+  const [showLaunchForm, setShowLaunchForm] = useState<boolean>(false);
+  const [initialParameters, setInitialParameters] = useState<
     TaskInitialLaunchParameters | undefined
   >(undefined);
 
   const executionData = useNodeExecutionData(nodeExecutionId);
   const execution = useNodeExecution(nodeExecutionId);
-  const id = details.taskTemplate?.id;
+  const id = details?.taskTemplate?.id;
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!id) {
       return;
     }
@@ -99,15 +102,15 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
   const [showDeck, setShowDeck] = React.useState(false);
   const onCloseDeck = () => setShowDeck(false);
 
-  if (!id || !initialParameters) {
-    return <></>;
-  }
-
   const rerunOnClick = (e: React.MouseEvent<HTMLElement>) => {
     e.stopPropagation();
     setShowLaunchForm(true);
   };
 
+  const resumeAction = () => {
+    // TODO https://github.com/flyteorg/flyteconsole/issues/587 Launch form for node id
+  };
+
   return (
     <>
       <div className={styles.actionsContainer}>
@@ -121,17 +124,26 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
             {t('flyteDeck')}
           </Button>
         )}
-        <Button variant="outlined" color="primary" onClick={rerunOnClick}>
-          {t('rerun')}
-        </Button>
+        {id && initialParameters && details && (
+          <Button variant="outlined" color="primary" onClick={rerunOnClick}>
+            {t('rerun')}
+          </Button>
+        )}
+        {phase === NodeExecutionPhase.PAUSED && (
+          <Button variant="outlined" color="primary" onClick={resumeAction}>
+            {t('resume')}
+          </Button>
+        )}
       </div>
-      <LaunchFormDialog
-        id={id as ResourceIdentifier}
-        initialParameters={initialParameters}
-        showLaunchForm={showLaunchForm}
-        setShowLaunchForm={setShowLaunchForm}
-      />
-      {execution?.value?.closure?.deckUri ? (
+      {id && initialParameters && (
+        <LaunchFormDialog
+          id={id as ResourceIdentifier}
+          initialParameters={initialParameters}
+          showLaunchForm={showLaunchForm}
+          setShowLaunchForm={setShowLaunchForm}
+        />
+      )}
+      {execution?.value?.closure?.deckUri && (
         <Dialog PaperProps={{ className: styles.dialog }} maxWidth={false} open={showDeck}>
           <div className={styles.dialogTitle}>
             <h2 className={styles.deckTitle}>{t('flyteDeck')}</h2>
@@ -141,7 +153,7 @@ export const ExecutionDetailsActions = (props: ExecutionDetailsActionsProps): JS
           </div>
           <ExecutionNodeDeck deckUri={execution.value.closure.deckUri} />
         </Dialog>
-      ) : null}
+      )}
     </>
   );
 };

packages/zapp/console/src/components/Executions/ExecutionDetails/ExecutionTabContent.tsx

@@ -146,9 +146,7 @@ export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
         return (
           <div className={styles.wrapper}>
             <div className={styles.container}>
-              <NodeExecutionsTimelineContext.Provider value={timelineContext}>
-                <ExecutionTimeline chartTimezone={chartTimezone} initialNodes={initialNodes} />
-              </NodeExecutionsTimelineContext.Provider>
+              <ExecutionTimeline chartTimezone={chartTimezone} initialNodes={initialNodes} />
             </div>
             <ExecutionTimelineFooter onTimezoneChange={handleTimezoneChange} />
           </div>
@@ -159,6 +157,7 @@ export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
             mergedDag={mergedDag}
             error={error}
             dynamicWorkflows={dynamicWorkflows}
+            initialNodes={initialNodes}
             onNodeSelectionChanged={onNodeSelectionChanged}
             selectedPhase={selectedPhase}
             onPhaseSelectionChanged={setSelectedPhase}
@@ -181,13 +180,15 @@ export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
 
   return (
     <>
-      {renderContent()}
+      <NodeExecutionsTimelineContext.Provider value={timelineContext}>
+        {renderContent()}
+      </NodeExecutionsTimelineContext.Provider>
       {/* Side panel, shows information for specific node */}
       <DetailsPanel open={!isDetailsTabClosed} onClose={onCloseDetailsPanel}>
         {!isDetailsTabClosed && selectedExecution && (
           <NodeExecutionDetailsPanelContent
             onClose={onCloseDetailsPanel}
-            phase={selectedPhase}
+            taskPhase={selectedPhase ?? TaskExecutionPhase.UNDEFINED}
             nodeExecutionId={selectedExecution}
           />
         )}