fix: map tasks should report caching status accurately

packages/console/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

packages/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx

@@ -266,10 +266,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   const [dag, setDag] = useState<any>(null);
   const [details, setDetails] = useState<NodeExecutionDetails | undefined>();
   const [selectedTaskExecution, setSelectedTaskExecution] =
-    useState<MapTaskExecution | null>(null);
-  // const [nodePhase, setNodePhase] = useState<NodeExecutionPhase>(
-  //   nodeExecution?.closure.phase ?? NodeExecutionPhase.UNDEFINED,
-  // );
+    useState<MapTaskExecution>();
 
   const { getNodeExecutionDetails, compiledWorkflowClosure } =
     useNodeExecutionContext();
@@ -342,7 +339,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   }, [nodeExecutionId]);
 
   useEffect(() => {
-    setSelectedTaskExecution(null);
+    setSelectedTaskExecution(undefined);
   }, [nodeExecutionId, taskPhase]);
 
   // TODO: needs to be removed
@@ -372,7 +369,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   );
 
   const onBackClick = () => {
-    setSelectedTaskExecution(null);
+    setSelectedTaskExecution(undefined);
   };
 
   const headerTitle = useMemo(() => {
@@ -449,7 +446,10 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   if (nodeExecution) {
     detailsContent = (
       <>
-        <NodeExecutionCacheStatus execution={nodeExecution} />
+        <NodeExecutionCacheStatus
+          execution={nodeExecution}
+          selectedTaskExecution={selectedTaskExecution}
+        />
         <ExecutionTypeDetails details={details} execution={nodeExecution} />
       </>
     );

packages/console/src/components/Executions/ExecutionDetails/NodeExecutionTabs/index.tsx

@@ -23,6 +23,9 @@ const useStyles = makeStyles(theme => {
     },
     tabs: {
       borderBottom: `1px solid ${theme.palette.divider}`,
+      '& .c--MuiTab-root': {
+        minWidth: 'auto',
+      },
       '& .MuiTabs-flexContainer': {
         justifyContent: 'space-around',
       },
@@ -44,7 +47,7 @@ const defaultTab = tabIds.executions;
 
 export const NodeExecutionTabs: React.FC<{
   nodeExecution: NodeExecution;
-  selectedTaskExecution: MapTaskExecution | null;
+  selectedTaskExecution?: MapTaskExecution;
   onTaskSelected: (val: MapTaskExecution) => void;
   phase?: TaskExecutionPhase;
   taskTemplate?: TaskTemplate | null;

packages/console/src/components/Executions/ExecutionDetails/strings.tsx

@@ -1,7 +1,7 @@
 import { createLocalizedString } from '@flyteorg/locale';
 
 const str = {
-  rerun: 'RERUN',
+  rerun: 'Rerun Task',
   flyteDeck: 'Flyte Deck',
   resume: 'Resume',
   taskNameColumnHeader: 'Task Name',

packages/console/src/components/Executions/NodeExecutionCacheStatus.tsx

@@ -1,14 +1,16 @@
 import { NodeExecutionDetails } from 'components/Executions/types';
 import { useNodeExecutionContext } from 'components/Executions/contextProvider/NodeExecutionDetails';
 import { CatalogCacheStatus } from 'models/Execution/enums';
-import { NodeExecution } from 'models/Execution/types';
+import { MapTaskExecution, NodeExecution } from 'models/Execution/types';
 import * as React from 'react';
 import { isMapTaskType } from 'models/Task/utils';
 import { useEffect, useState } from 'react';
 import { CacheStatus } from './CacheStatus';
+import { getTaskRetryAtemptsForIndex } from './TaskExecutionsList';
 
 interface NodeExecutionCacheStatusProps {
   execution: NodeExecution;
+  selectedTaskExecution?: MapTaskExecution;
   /** `normal` will render an icon with description message beside it
    *  `iconOnly` will render just the icon with the description as a tooltip
    */
@@ -25,12 +27,13 @@ interface NodeExecutionCacheStatusProps {
  */
 export const NodeExecutionCacheStatus: React.FC<
   NodeExecutionCacheStatusProps
-> = ({ execution, variant = 'normal', className }) => {
+> = ({ execution, selectedTaskExecution, variant = 'normal', className }) => {
   const taskNodeMetadata = execution.closure?.taskNodeMetadata;
   const { getNodeExecutionDetails } = useNodeExecutionContext();
   const [nodeDetails, setNodeDetails] = useState<
     NodeExecutionDetails | undefined
   >();
+  const isMapTask = isMapTaskType(nodeDetails?.taskTemplate?.type);
 
   useEffect(() => {
     let isCurrent = true;
@@ -44,8 +47,24 @@ export const NodeExecutionCacheStatus: React.FC<
     };
   });
 
-  if (isMapTaskType(nodeDetails?.taskTemplate?.type)) {
-    if (nodeDetails?.taskTemplate?.metadata?.cacheSerializable) {
+  if (isMapTask) {
+    if (nodeDetails?.taskTemplate?.metadata?.discoverable) {
+      if (selectedTaskExecution) {
+        const filteredResources = getTaskRetryAtemptsForIndex(
+          selectedTaskExecution?.closure?.metadata?.externalResources ?? [],
+          selectedTaskExecution.taskIndex,
+        );
+        const cacheStatus = filteredResources?.[0]?.cacheStatus;
+
+        return cacheStatus !== null ? (
+          <CacheStatus
+            cacheStatus={cacheStatus}
+            variant={variant}
+            className={className}
+          />
+        ) : null;
+      }
+
       return (
         <CacheStatus
           cacheStatus={CatalogCacheStatus.MAP_CACHE}
@@ -54,17 +73,25 @@ export const NodeExecutionCacheStatus: React.FC<
         />
       );
     }
+
+    return (
+      <CacheStatus
+        cacheStatus={CatalogCacheStatus.CACHE_DISABLED}
+        variant={variant}
+        className={className}
+      />
+    );
   }
 
   // cachestatus can be 0
-  if (taskNodeMetadata?.cacheStatus == null) {
+  if (taskNodeMetadata?.cacheStatus === null) {
     return null;
   }
 
   return (
     <CacheStatus
-      cacheStatus={taskNodeMetadata.cacheStatus}
-      sourceTaskExecutionId={taskNodeMetadata.catalogKey?.sourceTaskExecution}
+      cacheStatus={taskNodeMetadata?.cacheStatus}
+      sourceTaskExecutionId={taskNodeMetadata?.catalogKey?.sourceTaskExecution}
       variant={variant}
       className={className}
     />

packages/console/src/components/Executions/contextProvider/NodeExecutionDetails/WorkflowNodeExecutionsProvider.tsx

@@ -209,6 +209,7 @@ export const WorkflowNodeExecutionsProvider = ({
           setShouldUpdate(true);
         }
 
+        console.log('carina newNodes', { newNodes });
         return newNodes;
       });
     },

packages/console/src/components/Executions/nodeExecutionQueries.ts

@@ -140,12 +140,8 @@ export const getTaskExecutions = async (
   nodeExecution: WorkflowNodeExecution,
 ): Promise<WorkflowNodeExecution | undefined> => {
   const isTerminal = nodeExecutionIsTerminal(nodeExecution);
-  const tasksFetched = !!nodeExecution.tasksFetched;
   const isDynamic = isDynamicNode(nodeExecution);
-  if (!isDynamic && tasksFetched) {
-    // return null to signal no change
-    return;
-  }
+
   return await fetchTaskExecutionList(
     queryClient,
     nodeExecution.id as any,

packages/console/src/components/common/MapTaskExecutionsList/TaskNameList.tsx

@@ -10,18 +10,30 @@ import classnames from 'classnames';
 import { useCommonStyles } from '../styles';
 
 const useStyles = makeStyles((_theme: Theme) => ({
+  taskName: {
+    lineHeight: 2,
+    overflowWrap: 'anywhere',
+  },
+
   taskTitle: {
     cursor: 'default',
     '&:hover': {
       textDecoration: 'none',
     },
   },
+
   taskTitleLink: {
     cursor: 'pointer',
     '&:hover': {
       textDecoration: 'underline',
     },
   },
+
+  taskCacheLogo: {
+    verticalAlign: 'middle',
+    position: 'relative',
+    left: 0,
+  },
 }));
 
 interface TaskNameListProps {
@@ -81,18 +93,19 @@ export const TaskNameList = ({
               color={log.uri ? 'primary' : 'textPrimary'}
               onClick={log.uri ? handleClick : undefined}
               className={classnames(
+                styles.taskName,
                 log.uri ? styles.taskTitleLink : styles.taskTitle,
                 className,
               )}
               data-testid="map-task-log"
             >
               {taskLogName}
+              <CacheStatus
+                cacheStatus={cacheStatus}
+                variant="iconOnly"
+                className={classnames(styles.taskCacheLogo, className)}
+              />
             </Typography>
-            <CacheStatus
-              cacheStatus={cacheStatus}
-              variant="iconOnly"
-              className={className}
-            />
           </div>
         );
       })}

website/package.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@flyteorg/common": "^0.0.4",
-    "@flyteorg/console": "^0.0.42",
+    "@flyteorg/console": "^0.0.43",
     "long": "^4.0.0",
     "protobufjs": "~6.11.3",
     "react-ga4": "^1.4.1",

yarn.lock

@@ -2020,7 +2020,7 @@ __metadata:
   resolution: "@flyteconsole/client-app@workspace:website"
   dependencies:
     "@flyteorg/common": ^0.0.4
-    "@flyteorg/console": ^0.0.42
+    "@flyteorg/console": ^0.0.43
     "@types/long": ^3.0.32
     long: ^4.0.0
     protobufjs: ~6.11.3
@@ -2059,7 +2059,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@flyteorg/console@^0.0.42, @flyteorg/console@workspace:packages/console":
+"@flyteorg/console@^0.0.43, @flyteorg/console@workspace:packages/console":
   version: 0.0.0-use.local
   resolution: "@flyteorg/console@workspace:packages/console"
   dependencies: