feat: add cache icons for cached tasks in graph view (#400)

* feat: add cache icons for cached tasks in graph view Signed-off-by: Olga Nad <olga@union.ai>
flyteorg · Apr 18, 2022 · 0c0cd4b · 0c0cd4b
1 parent e060056
commit 0c0cd4b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 20 deletions.
diff --git a/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -23,7 +23,7 @@ const useStyles = makeStyles((theme: Theme) => {
       position: 'relative',
     },
     detailsContainer: {
-      alignItems: 'center',
+      alignItems: 'start',
       display: 'flex',
       flex: '0 1 auto',
       paddingTop: theme.spacing(3),

diff --git a/src/components/flytegraph/Graph.tsx b/src/components/flytegraph/Graph.tsx
diff --git a/src/components/flytegraph/ReactFlow/customNodeComponents.tsx b/src/components/flytegraph/ReactFlow/customNodeComponents.tsx
@@ -2,6 +2,9 @@ import * as React from 'react';
 import { useState, useEffect } from 'react';
 import { Handle, Position } from 'react-flow-renderer';
 import { dTypes } from 'models/Graph/types';
+import CachedOutlined from '@material-ui/icons/CachedOutlined';
+import { CatalogCacheStatus } from 'models/Execution/enums';
+import { PublishedWithChangesOutlined } from 'components/common/PublishedWithChanges';
 import {
   COLOR_TASK_TYPE,
   COLOR_GRAPH_BACKGROUND,
@@ -226,6 +229,13 @@ export const ReactFlowCustomTaskNode = ({ data }: any) => {
     padding: '.1rem .2rem',
     fontSize: '.3rem',
   };
+  const cacheIconStyles: React.CSSProperties = {
+    width: '8px',
+    height: '8px',
+    marginLeft: '4px',
+    marginTop: '1px',
+    color: COLOR_GRAPH_BACKGROUND,
+  };
 
   const handleClick = (_e) => {
     setSelectedNode(true);
@@ -238,10 +248,25 @@ export const ReactFlowCustomTaskNode = ({ data }: any) => {
       </div>
     );
   };
+
+  const renderCacheIcon = (cacheStatus) => {
+    switch (cacheStatus) {
+      case CatalogCacheStatus.CACHE_HIT:
+        return <CachedOutlined style={cacheIconStyles} />;
+      case CatalogCacheStatus.CACHE_POPULATED:
+        return <PublishedWithChangesOutlined style={cacheIconStyles} />;
+      default:
+        return null;
+    }
+  };
+
   return (
     <div onClick={handleClick}>
       {data.taskType ? renderTaskType() : null}
-      <div style={styles}>{data.text}</div>
+      <div style={styles}>
+        {data.text}
+        {renderCacheIcon(data.cacheStatus)}
+      </div>
       {renderDefaultHandles(
         data.scopedId,
         getGraphHandleStyle('source'),

diff --git a/src/components/flytegraph/ReactFlow/transformDAGToReactFlowV2.tsx b/src/components/flytegraph/ReactFlow/transformDAGToReactFlowV2.tsx
@@ -1,6 +1,6 @@
 import { dEdge, dNode, dTypes } from 'models/Graph/types';
 import { Edge, Node, Position } from 'react-flow-renderer';
-import { NodeExecutionPhase } from 'models/Execution/enums';
+import { CatalogCacheStatus, NodeExecutionPhase } from 'models/Execution/enums';
 import { createDebugLogger } from 'common/log';
 import { ReactFlowGraphConfig } from './utils';
 import { ConvertDagProps } from './types';
@@ -77,13 +77,18 @@ export const buildReactFlowDataProps = (props: BuildDataProps) => {
   };
   const nodeExecutionStatus = mapNodeExecutionStatus();
 
+  const cacheStatus: CatalogCacheStatus =
+    nodeExecutionsById[node.scopedId]?.closure.taskNodeMetadata?.cacheStatus ??
+    CatalogCacheStatus.CACHE_DISABLED;
+
   const dataProps = {
-    nodeExecutionStatus: nodeExecutionStatus,
+    nodeExecutionStatus,
     text: displayName,
     handles: [],
     nodeType: node.type,
     scopedId: node.scopedId,
-    taskType: taskType,
+    taskType,
+    cacheStatus,
     onNodeSelectionChanged: () => {
       if (onNodeSelectionChanged) {
         onNodeSelectionChanged([node.scopedId]);

diff --git a/src/components/flytegraph/ReactFlow/types.ts b/src/components/flytegraph/ReactFlow/types.ts
@@ -1,3 +1,4 @@
+import { CatalogCacheStatus } from 'models/Execution/enums';
 import { NodeExecutionsById } from 'models/Execution/types';
 import { dNode, dTypes } from 'models/Graph/types';
 import { HandleProps } from 'react-flow-renderer';
@@ -72,6 +73,7 @@ export interface RFCustomData {
   scopedId: string;
   dag: any;
   taskType?: dTypes;
+  cacheStatus?: CatalogCacheStatus;
   onNodeSelectionChanged?: any;
   onAddNestedView: any;
   onRemoveNestedView: any;

diff --git a/src/components/flytegraph/ReactFlow/utils.tsx b/src/components/flytegraph/ReactFlow/utils.tsx
@@ -167,6 +167,8 @@ export const getGraphNodeStyle = (
     width: 'auto',
     zIndex: 100000,
     position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
   };
 
   const nestedPoint = {