chore: propagate dynamic parent id (#751)

* chore: propagate dynamic parent id Signed-off-by: Carina Ursu <[email protected]> * chore: use app state execution in context panel Signed-off-by: Carina Ursu <[email protected]> * chore: fix build err Signed-off-by: Carina Ursu <[email protected]> * chore: taskexecutionslist.test.tsx Signed-off-by: Carina Ursu <[email protected]> * chore: nodeexecutiondetailspanelcontent.tsx Signed-off-by: Carina Ursu <[email protected]> * chore: cleanup Signed-off-by: Carina Ursu <[email protected]> --------- Signed-off-by: Carina Ursu <[email protected]>
flyteorg · May 5, 2023 · e95faa8 · e95faa8
1 parent 5b36889
commit e95faa8
Show file tree

Hide file tree

Showing 22 changed files with 181 additions and 213 deletions.
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@flyteorg/console",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Flyteconsole main app module",
   "main": "./dist/index.js",
   "module": "./lib/index.js",

diff --git a/packages/console/src/components/Entities/EntitySchedules.tsx b/packages/console/src/components/Entities/EntitySchedules.tsx
@@ -17,7 +17,6 @@ import { useCommonStyles } from 'components/common/styles';
 import { WaitForData } from 'components/common/WaitForData';
 import { useWorkflowSchedules } from 'components/hooks/useWorkflowSchedules';
 import { ResourceIdentifier } from 'models/Common/types';
-import { identifierToString } from 'models/Common/utils';
 import { LaunchPlan } from 'models/Launch/types';
 import * as React from 'react';
 import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink';

diff --git a/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx b/packages/console/src/components/Executions/ExecutionDetails/ExecutionMetadata.tsx
@@ -7,7 +7,6 @@ import { formatDateUTC, protobufDurationToHMS } from 'common/formatters';
 import { timestampToDate } from 'common/utils';
 import { useCommonStyles } from 'components/common/styles';
 import { secondaryBackgroundColor } from 'components/Theme/constants';
-import { Execution } from 'models/Execution/types';
 import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { ExecutionContext } from '../contexts';

diff --git a/...s/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx b/...s/console/src/components/Executions/ExecutionDetails/NodeExecutionDetailsPanelContent.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { IconButton, Typography, Tab, Tabs } from '@material-ui/core';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { ArrowBackIos, Close } from '@material-ui/icons';
@@ -10,18 +10,14 @@ import { ExecutionStatusBadge } from 'components/Executions/ExecutionStatusBadge
 import { LocationState } from 'components/hooks/useLocationState';
 import { useTabState } from 'components/hooks/useTabState';
 import { LocationDescriptor } from 'history';
-import { PaginatedEntityResponse } from 'models/AdminEntity/types';
 import { Workflow } from 'models/Workflow/types';
 import {
-  ExternalResource,
-  LogsByPhase,
   MapTaskExecution,
   NodeExecution,
   NodeExecutionIdentifier,
-  TaskExecution,
 } from 'models/Execution/types';
 import Skeleton from 'react-loading-skeleton';
-import { useQuery, useQueryClient } from 'react-query';
+import { useQueryClient } from 'react-query';
 import { Link as RouterLink } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { NoDataIsAvailable } from 'components/Literals/LiteralMapViewer';
@@ -37,24 +33,21 @@ import {
 } from 'components/WorkflowGraph/utils';
 import { TaskVersionDetailsLink } from 'components/Entities/VersionDetails/VersionDetailsLink';
 import { Identifier } from 'models/Common/types';
-import { isMapTaskV1 } from 'models/Task/utils';
-import { merge } from 'lodash';
+import { isEqual, values } from 'lodash';
 import { extractCompiledNodes } from 'components/hooks/utils';
 import { NodeExecutionCacheStatus } from '../NodeExecutionCacheStatus';
-import {
-  makeListTaskExecutionsQuery,
-  makeNodeExecutionQuery,
-} from '../nodeExecutionQueries';
+import { getTaskExecutions } from '../nodeExecutionQueries';
 import { NodeExecutionDetails } from '../types';
-import { useNodeExecutionContext } from '../contextProvider/NodeExecutionDetails';
+import {
+  useNodeExecutionContext,
+  useNodeExecutionsById,
+} from '../contextProvider/NodeExecutionDetails';
 import { getTaskExecutionDetailReasons } from './utils';
 import { fetchWorkflowExecution } from '../useWorkflowExecution';
 import { NodeExecutionTabs } from './NodeExecutionTabs';
 import { ExecutionDetailsActions } from './ExecutionDetailsActions';
 import { getNodeFrontendPhase, isNodeGateNode } from '../utils';
-import { fetchTaskExecutionList } from '../taskExecutionQueries';
-import { getGroupedLogs } from '../TaskExecutionsList/utils';
-import { WorkflowNodeExecutionsContext } from '../contexts';
+import { WorkflowNodeExecution } from '../contexts';
 
 const useStyles = makeStyles((theme: Theme) => {
   const paddingVertical = `${theme.spacing(2)}px`;
@@ -259,11 +252,28 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   const commonStyles = useCommonStyles();
   const styles = useStyles();
   const queryClient = useQueryClient();
+
+  const { nodeExecutionsById, setCurrentNodeExecutionsById } =
+    useNodeExecutionsById();
+
+  const nodeExecution = useMemo(() => {
+    return values(nodeExecutionsById).find(node =>
+      isEqual(node.id, nodeExecutionId),
+    );
+  }, [nodeExecutionId, nodeExecutionsById]);
+
+  const [isReasonsVisible, setReasonsVisible] = useState<boolean>(false);
+  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,
+  // );
+
   const { getNodeExecutionDetails, compiledWorkflowClosure } =
     useNodeExecutionContext();
-  const { nodeExecutionsById, setCurrentNodeExecutionsById } = useContext(
-    WorkflowNodeExecutionsContext,
-  );
+
   const isGateNode = isNodeGateNode(
     extractCompiledNodes(compiledWorkflowClosure),
     nodeExecutionsById[nodeExecutionId.nodeId]?.metadata?.specNodeId ||
@@ -273,61 +283,50 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   const [nodeExecutionLoading, setNodeExecutionLoading] =
     useState<boolean>(false);
 
-  const { data: nodeExecution } = useQuery<NodeExecution, Error>({
-    ...makeNodeExecutionQuery(nodeExecutionId),
-    // The selected NodeExecution has been fetched at this point, we don't want to
-    // issue an additional fetch.
-    staleTime: Infinity,
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    let isCurrent = true;
+    getNodeExecutionDetails(nodeExecution).then(res => {
+      if (isCurrent) {
+        setDetails(res);
+      }
+    });
+
+    return () => {
+      isCurrent = false;
+    };
   });
 
   useEffect(() => {
     let isCurrent = true;
 
-    async function fetchTasksData(exe, queryClient) {
+    async function fetchTasksData(queryClient) {
       setNodeExecutionLoading(true);
-      const taskExecutions = await fetchTaskExecutionList(queryClient, exe.id);
+      const newNode = await getTaskExecutions(queryClient, nodeExecution!);
 
-      const useNewMapTaskView = taskExecutions.every(taskExecution => {
+      if (isCurrent && newNode) {
         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);
-
-      const exeWithResources = {
-        [exe.scopedId]: {
-          ...exe,
-          ...(useNewMapTaskView && logsByPhase.size > 0 && { logsByPhase }),
-          tasksFetched: true,
-        },
-      };
-
-      if (isCurrent) {
-        const newNodeExecutionsById = merge(
-          nodeExecutionsById,
-          exeWithResources,
-        );
-        setCurrentNodeExecutionsById(newNodeExecutionsById);
+          closure: _,
+          metadata: __,
+          ...parentLight
+        } = newNode || ({} as WorkflowNodeExecution);
+
+        setCurrentNodeExecutionsById({
+          [newNode.scopedId!]: parentLight as WorkflowNodeExecution,
+        });
         setNodeExecutionLoading(false);
       }
     }
 
-    if (nodeExecution) {
-      if (
-        nodeExecution.scopedId &&
-        !nodeExecutionsById?.[nodeExecution.scopedId]?.tasksFetched
-      )
-        fetchTasksData(nodeExecution, queryClient);
+    if (nodeExecution && !nodeExecution?.tasksFetched) {
+      fetchTasksData(queryClient);
     } else {
       if (isCurrent) {
         setNodeExecutionLoading(false);
@@ -338,45 +337,15 @@ export const NodeExecutionDetailsPanelContent: React.FC<
     };
   }, [nodeExecution]);
 
-  const [isReasonsVisible, setReasonsVisible] = useState<boolean>(false);
-  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,
-  );
-
-  const isMounted = useRef(false);
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    let isCurrent = true;
-    getNodeExecutionDetails(nodeExecution).then(res => {
-      if (isCurrent) {
-        setDetails(res);
-      }
-    });
-
-    return () => {
-      isCurrent = false;
-    };
-  });
-
   useEffect(() => {
     setReasonsVisible(false);
-    setNodePhase(nodeExecution?.closure.phase ?? NodeExecutionPhase.UNDEFINED);
   }, [nodeExecutionId]);
 
   useEffect(() => {
     setSelectedTaskExecution(null);
   }, [nodeExecutionId, taskPhase]);
 
+  // TODO: needs to be removed
   const getWorkflowDag = async () => {
     const workflowExecution = await fetchWorkflowExecution(
       queryClient,
@@ -397,15 +366,10 @@ export const NodeExecutionDetailsPanelContent: React.FC<
   } else {
     if (dag) setDag(null);
   }
-  const listTaskExecutionsQuery = useQuery<
-    PaginatedEntityResponse<TaskExecution>,
-    Error
-  >({
-    ...makeListTaskExecutionsQuery(nodeExecutionId),
-    staleTime: Infinity,
-  });
 
-  const reasons = getTaskExecutionDetailReasons(listTaskExecutionsQuery.data);
+  const reasons = getTaskExecutionDetailReasons(
+    nodeExecution?.taskExecutions ?? [],
+  );
 
   const onBackClick = () => {
     setSelectedTaskExecution(null);
@@ -441,16 +405,19 @@ export const NodeExecutionDetailsPanelContent: React.FC<
     );
   }, [nodeExecutionId, selectedTaskExecution]);
 
-  const frontendPhase = useMemo(
-    () => getNodeFrontendPhase(nodePhase, isGateNode),
-    [nodePhase, isGateNode],
-  );
+  const frontendPhase = useMemo(() => {
+    const computedPhase = getNodeFrontendPhase(
+      nodeExecution?.closure.phase ?? NodeExecutionPhase.UNDEFINED,
+      isGateNode,
+    );
+    return computedPhase;
+  }, [nodeExecution?.closure.phase, isGateNode]);
 
   const isRunningPhase = useMemo(
     () =>
       frontendPhase === NodeExecutionPhase.QUEUED ||
       frontendPhase === NodeExecutionPhase.RUNNING,
-    [nodePhase],
+    [frontendPhase],
   );
 
   const handleReasonsVisibility = () => {

diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/NodeExecutionName.tsx b/packages/console/src/components/Executions/ExecutionDetails/Timeline/NodeExecutionName.tsx
@@ -7,8 +7,8 @@ import { SelectNodeExecutionLink } from 'components/Executions/Tables/SelectNode
 import { isEqual } from 'lodash';
 import { NodeExecutionPhase } from 'models/Execution/enums';
 import { NodeExecution } from 'models/Execution/types';
-import React, { useContext, useEffect, useState } from 'react';
-import { DetailsPanelContext, useDetailsPanel } from '../DetailsPanelContext';
+import React, { useEffect, useState } from 'react';
+import { useDetailsPanel } from '../DetailsPanelContext';
 
 interface NodeExecutionTimelineNameData {
   name: string;

diff --git a/packages/console/src/components/Executions/ExecutionDetails/utils.ts b/packages/console/src/components/Executions/ExecutionDetails/utils.ts
@@ -5,7 +5,6 @@ import {
   TaskExecution,
 } from 'models/Execution/types';
 import { Routes } from 'routes/routes';
-import { PaginatedEntityResponse } from 'models/AdminEntity/types';
 import { timestampToDate } from 'common';
 import { formatDateUTC } from 'common/formatters';
 
@@ -27,21 +26,26 @@ export function getExecutionBackLink(execution: Execution): string {
 }
 
 export function getTaskExecutionDetailReasons(
-  taskExecutionDetails?: PaginatedEntityResponse<TaskExecution>,
+  taskExecutionDetails?: TaskExecution[],
 ): (string | null | undefined)[] {
   let reasons: string[] = [];
-  taskExecutionDetails?.entities.forEach(taskExecution => {
-    if (taskExecution.closure.reasons)
+  taskExecutionDetails?.forEach?.(taskExecution => {
+    const finalReasons = (
+      taskExecution.closure.reasons?.length
+        ? taskExecution.closure.reasons
+        : [{ message: taskExecution.closure.reason }]
+    ).filter(r => !!r);
+
+    if (finalReasons) {
       reasons = reasons.concat(
-        taskExecution.closure.reasons.map(
+        finalReasons.map(
           reason =>
             (reason.occurredAt
               ? formatDateUTC(timestampToDate(reason.occurredAt)) + ' '
               : '') + reason.message,
         ),
       );
-    else if (taskExecution.closure.reason)
-      reasons.push(taskExecution.closure.reason);
+    }
   });
   return reasons;
 }