Merge branch 'master' into james/map-type-fix

package.json

@@ -47,7 +47,9 @@
             "git add"
         ]
     },
-    "dependencies": {},
+    "dependencies": {
+        "@flyteorg/flyteidl": "1.1.11"
+    },
     "devDependencies": {
         "@storybook/addon-actions": "^6.4.19",
         "@storybook/addon-essentials": "^6.4.19",
@@ -60,9 +62,9 @@
         "@testing-library/jest-dom": "^5.5.0",
         "@testing-library/react": "^10.0.3",
         "@testing-library/react-hooks": "^7.0.2",
-        "ts-jest": "^26.3.0",
         "jest": "^26.0.0",
-        "react-hot-loader": "^4.1.2"
+        "react-hot-loader": "^4.1.2",
+        "ts-jest": "^26.3.0"
     },
     "resolutions": {
         "@babel/cli": "~7.16.0",

packages/zapp/console/src/assets/index.html

@@ -12,6 +12,7 @@
         <link
             rel="manifest"
             href="<%= htmlWebpackPlugin.options.publicPath %>/manifest.webmanifest"
+            crossorigin="use-credentials"
         />
         <!-- 16x16, 32x32 -->
         <link

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

@@ -5,16 +5,24 @@ import { WaitForQuery } from 'components/common/WaitForQuery';
 import { DataError } from 'components/Errors/DataError';
 import { useTabState } from 'components/hooks/useTabState';
 import { secondaryBackgroundColor } from 'components/Theme/constants';
-import { Execution, NodeExecution } from 'models/Execution/types';
+import { Execution, ExternalResource, LogsByPhase, NodeExecution } from 'models/Execution/types';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { keyBy } from 'lodash';
+import { isMapTaskV1 } from 'models/Task/utils';
+import { useQueryClient } from 'react-query';
+import { LargeLoadingSpinner } from 'components/common/LoadingSpinner';
 import { NodeExecutionDetailsContextProvider } from '../contextProvider/NodeExecutionDetails';
-import { NodeExecutionsRequestConfigContext } from '../contexts';
+import { NodeExecutionsByIdContext, NodeExecutionsRequestConfigContext } from '../contexts';
 import { ExecutionFilters } from '../ExecutionFilters';
 import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
 import { NodeExecutionsTable } from '../Tables/NodeExecutionsTable';
 import { tabs } from './constants';
-import { ExecutionChildrenLoader } from './ExecutionChildrenLoader';
 import { useExecutionNodeViewsState } from './useExecutionNodeViewsState';
 import { ExecutionNodesTimeline } from './Timeline';
+import { fetchTaskExecutionList } from '../taskExecutionQueries';
+import { getGroupedLogs } from '../TaskExecutionsList/utils';
+import { useAllTreeNodeExecutionGroupsQuery } from '../nodeExecutionQueries';
+import { ExecutionWorkflowGraph } from './ExecutionWorkflowGraph';
 
 const useStyles = makeStyles((theme: Theme) => ({
   filters: {
@@ -31,8 +39,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     background: secondaryBackgroundColor,
     paddingLeft: theme.spacing(3.5),
   },
+  loading: {
+    margin: 'auto',
+  },
 }));
 
+interface WorkflowNodeExecution extends NodeExecution {
+  logsByPhase?: LogsByPhase;
+}
+
 export interface ExecutionNodeViewsProps {
   execution: Execution;
 }
@@ -43,11 +58,22 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
   const styles = useStyles();
   const filterState = useNodeExecutionFiltersState();
   const tabState = useTabState(tabs, defaultTab);
+  const queryClient = useQueryClient();
+  const requestConfig = useContext(NodeExecutionsRequestConfigContext);
 
   const {
-    closure: { abortMetadata },
+    closure: { abortMetadata, workflowId },
   } = execution;
 
+  const [nodeExecutions, setNodeExecutions] = useState<NodeExecution[]>([]);
+  const [nodeExecutionsWithResources, setNodeExecutionsWithResources] = useState<
+    WorkflowNodeExecution[]
+  >([]);
+
+  const nodeExecutionsById = useMemo(() => {
+    return keyBy(nodeExecutionsWithResources, 'scopedId');
+  }, [nodeExecutionsWithResources]);
+
   /* We want to maintain the filter selection when switching away from the Nodes
     tab and back, but do not want to filter the nodes when viewing the graph. So,
     we will only pass filters to the execution state when on the nodes tab. */
@@ -58,6 +84,61 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
     appliedFilters,
   );
 
+  useEffect(() => {
+    let isCurrent = true;
+    async function fetchData(baseNodeExecutions, queryClient) {
+      const newValue = await Promise.all(
+        baseNodeExecutions.map(async (baseNodeExecution) => {
+          const taskExecutions = await fetchTaskExecutionList(queryClient, baseNodeExecution.id);
+
+          const useNewMapTaskView = taskExecutions.every((taskExecution) => {
+            const {
+              closure: { taskType, metadata, eventVersion = 0 },
+            } = taskExecution;
+            return isMapTaskV1(
+              eventVersion,
+              metadata?.externalResources?.length ?? 0,
+              taskType ?? undefined,
+            );
+          });
+          const externalResources: ExternalResource[] = taskExecutions
+            .map((taskExecution) => taskExecution.closure.metadata?.externalResources)
+            .flat()
+            .filter((resource): resource is ExternalResource => !!resource);
+
+          const logsByPhase: LogsByPhase = getGroupedLogs(externalResources);
+
+          return {
+            ...baseNodeExecution,
+            ...(useNewMapTaskView && logsByPhase.size > 0 && { logsByPhase }),
+          };
+        }),
+      );
+
+      if (isCurrent) {
+        setNodeExecutionsWithResources(newValue);
+      }
+    }
+
+    if (nodeExecutions.length > 0) {
+      fetchData(nodeExecutions, queryClient);
+    }
+    return () => {
+      isCurrent = false;
+    };
+  }, [nodeExecutions]);
+
+  const childGroupsQuery = useAllTreeNodeExecutionGroupsQuery(
+    nodeExecutionsQuery.data ?? [],
+    requestConfig,
+  );
+
+  useEffect(() => {
+    if (!childGroupsQuery.isLoading && childGroupsQuery.data) {
+      setNodeExecutions(childGroupsQuery.data);
+    }
+  }, [childGroupsQuery.data]);
+
   const renderNodeExecutionsTable = (nodeExecutions: NodeExecution[]) => (
     <NodeExecutionsRequestConfigContext.Provider value={nodeExecutionsRequestConfig}>
       <NodeExecutionsTable
@@ -67,49 +148,67 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
     </NodeExecutionsRequestConfigContext.Provider>
   );
 
-  const renderExecutionLoader = (nodeExecutions: NodeExecution[]) => {
+  const renderExecutionChildrenLoader = () =>
+    nodeExecutions.length > 0 ? <ExecutionWorkflowGraph workflowId={workflowId} /> : null;
+
+  const renderExecutionLoader = () => {
     return (
-      <ExecutionChildrenLoader
-        nodeExecutions={nodeExecutions}
-        workflowId={execution.closure.workflowId}
-      />
+      <WaitForQuery errorComponent={DataError} query={childGroupsQuery}>
+        {renderExecutionChildrenLoader}
+      </WaitForQuery>
     );
   };
 
-  const renderExecutionsTimeline = (nodeExecutions: NodeExecution[]) => (
-    <ExecutionNodesTimeline nodeExecutions={nodeExecutions} />
+  const renderExecutionsTimeline = () => (
+    <WaitForQuery
+      errorComponent={DataError}
+      query={childGroupsQuery}
+      loadingComponent={TimelineLoading}
+    >
+      {() => <ExecutionNodesTimeline />}
+    </WaitForQuery>
   );
 
+  const TimelineLoading = () => {
+    return (
+      <div className={styles.loading}>
+        <LargeLoadingSpinner />
+      </div>
+    );
+  };
+
   return (
     <>
       <Tabs className={styles.tabs} {...tabState}>
         <Tab value={tabs.nodes.id} label={tabs.nodes.label} />
         <Tab value={tabs.graph.id} label={tabs.graph.label} />
         <Tab value={tabs.timeline.id} label={tabs.timeline.label} />
       </Tabs>
-      <NodeExecutionDetailsContextProvider workflowId={execution.closure.workflowId}>
-        <div className={styles.nodesContainer}>
-          {tabState.value === tabs.nodes.id && (
-            <>
-              <div className={styles.filters}>
-                <ExecutionFilters {...filterState} />
-              </div>
+      <NodeExecutionDetailsContextProvider workflowId={workflowId}>
+        <NodeExecutionsByIdContext.Provider value={nodeExecutionsById}>
+          <div className={styles.nodesContainer}>
+            {tabState.value === tabs.nodes.id && (
+              <>
+                <div className={styles.filters}>
+                  <ExecutionFilters {...filterState} />
+                </div>
+                <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
+                  {renderNodeExecutionsTable}
+                </WaitForQuery>
+              </>
+            )}
+            {tabState.value === tabs.graph.id && (
+              <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
+                {renderExecutionLoader}
+              </WaitForQuery>
+            )}
+            {tabState.value === tabs.timeline.id && (
               <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
-                {renderNodeExecutionsTable}
+                {renderExecutionsTimeline}
               </WaitForQuery>
-            </>
-          )}
-          {tabState.value === tabs.graph.id && (
-            <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
-              {renderExecutionLoader}
-            </WaitForQuery>
-          )}
-          {tabState.value === tabs.timeline.id && (
-            <WaitForQuery errorComponent={DataError} query={nodeExecutionsQuery}>
-              {renderExecutionsTimeline}
-            </WaitForQuery>
-          )}
-        </div>
+            )}
+          </div>
+        </NodeExecutionsByIdContext.Provider>
       </NodeExecutionDetailsContextProvider>
     </>
   );