fix: added filteredNodeExecutions to make filter work

Signed-off-by: James <[email protected]>

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

@@ -160,7 +160,13 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
         query={childGroupsQuery}
         loadingComponent={LoadingComponent}
       >
-        {() => <ExecutionTab tabType={tabType} abortMetadata={abortMetadata ?? undefined} />}
+        {() => (
+          <ExecutionTab
+            tabType={tabType}
+            abortMetadata={abortMetadata ?? undefined}
+            filteredNodeExecutions={nodeExecutionsQuery.data ?? []}
+          />
+        )}
       </WaitForQuery>
     );
   };

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

@@ -5,25 +5,37 @@ import { Admin } from 'flyteidl';
 import { Workflow } from 'models/Workflow/types';
 import * as React from 'react';
 import { useQuery, useQueryClient } from 'react-query';
+import { NodeExecution } from 'models/Execution/types';
 import { useNodeExecutionContext } from '../contextProvider/NodeExecutionDetails';
 import { ScaleProvider } from './Timeline/scaleContext';
 import { ExecutionTabContent } from './ExecutionTabContent';
 
 export interface ExecutionTabProps {
   tabType: string;
   abortMetadata?: Admin.IAbortMetadata;
+  filteredNodeExecutions: NodeExecution[];
 }
 
 /** Contains the available ways to visualize the nodes of a WorkflowExecution */
-export const ExecutionTab: React.FC<ExecutionTabProps> = ({ tabType, abortMetadata }) => {
+export const ExecutionTab: React.FC<ExecutionTabProps> = ({
+  tabType,
+  abortMetadata,
+  filteredNodeExecutions,
+}) => {
   const queryClient = useQueryClient();
   const { workflowId } = useNodeExecutionContext();
   const workflowQuery = useQuery<Workflow, Error>(makeWorkflowQuery(queryClient, workflowId));
 
   return (
     <ScaleProvider>
       <WaitForQuery errorComponent={DataError} query={workflowQuery}>
-        {() => <ExecutionTabContent tabType={tabType} abortMetadata={abortMetadata} />}
+        {() => (
+          <ExecutionTabContent
+            tabType={tabType}
+            abortMetadata={abortMetadata}
+            filteredNodeExecutions={filteredNodeExecutions}
+          />
+        )}
       </WaitForQuery>
     </ScaleProvider>
   );

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

@@ -3,7 +3,7 @@ import { DetailsPanel } from 'components/common/DetailsPanel';
 import { makeNodeExecutionDynamicWorkflowQuery } from 'components/Workflow/workflowQueries';
 import { WorkflowGraph } from 'components/WorkflowGraph/WorkflowGraph';
 import { TaskExecutionPhase } from 'models/Execution/enums';
-import { NodeExecutionIdentifier } from 'models/Execution/types';
+import { NodeExecution, NodeExecutionIdentifier } from 'models/Execution/types';
 import { startNodeId, endNodeId } from 'models/Node/constants';
 import { Admin } from 'flyteidl';
 import * as React from 'react';
@@ -25,6 +25,7 @@ import { convertToPlainNodes, TimeZone } from './Timeline/helpers';
 export interface ExecutionTabContentProps {
   tabType: string;
   abortMetadata?: Admin.IAbortMetadata;
+  filteredNodeExecutions: NodeExecution[];
 }
 
 const useStyles = makeStyles(() => ({
@@ -43,6 +44,7 @@ const useStyles = makeStyles(() => ({
 export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
   tabType,
   abortMetadata,
+  filteredNodeExecutions,
 }) => {
   const styles = useStyles();
   const { compiledWorkflowClosure } = useNodeExecutionContext();
@@ -172,6 +174,7 @@ export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
             initialNodes={initialNodes}
             selectedExecution={selectedExecution}
             setSelectedExecution={onExecutionSelectionChanged}
+            filteredNodeExecutions={filteredNodeExecutions}
           />
         );
       default:

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

@@ -49,7 +49,7 @@ describe('Executions > ExecutionDetails > ExecutionTabContent', () => {
       <QueryClientProvider client={queryClient}>
         <NodeExecutionDetailsContextProvider workflowId={mockWorkflowId}>
           <NodeExecutionsByIdContext.Provider value={nodeExecutionsById}>
-            <ExecutionTabContent tabType={tabType} />
+            <ExecutionTabContent tabType={tabType} filteredNodeExecutions={[]} />
           </NodeExecutionsByIdContext.Provider>
         </NodeExecutionDetailsContextProvider>
       </QueryClientProvider>,

packages/zapp/console/src/components/Executions/Tables/NodeExecutionsTable.tsx

@@ -17,13 +17,13 @@ import { NoExecutionsContent } from './NoExecutionsContent';
 import { useColumnStyles, useExecutionTableStyles } from './styles';
 import { NodeExecutionsByIdContext } from '../contexts';
 import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
-import { MultiFilterState } from '../filters/types';
 
 export interface NodeExecutionsTableProps {
   setSelectedExecution: (execution: NodeExecutionIdentifier | null) => void;
   selectedExecution: NodeExecutionIdentifier | null;
   abortMetadata?: Admin.IAbortMetadata;
   initialNodes: dNode[];
+  filteredNodeExecutions: NodeExecution[];
 }
 
 const scrollbarPadding = scrollbarSize();
@@ -38,39 +38,43 @@ export const NodeExecutionsTable: React.FC<NodeExecutionsTableProps> = ({
   selectedExecution,
   abortMetadata,
   initialNodes,
+  filteredNodeExecutions,
 }) => {
   const [nodeExecutions, setNodeExecutions] = useState<NodeExecution[]>([]);
   const commonStyles = useCommonStyles();
   const tableStyles = useExecutionTableStyles();
   const nodeExecutionsById = useContext(NodeExecutionsByIdContext);
+  const filterState = useNodeExecutionFiltersState();
 
   useEffect(() => {
     if (nodeExecutionsById) {
-      const executions: NodeExecution[] = [];
-      initialNodes.map((node) => {
-        if (nodeExecutionsById[node.scopedId]) executions.push(nodeExecutionsById[node.scopedId]);
-        else
-          executions.push({
-            closure: {
-              createdAt: dateToTimestamp(new Date()),
-              outputUri: '',
-              phase: NodeExecutionPhase.UNDEFINED,
-            },
-            id: {
-              executionId: {
-                domain: node.value?.taskNode?.referenceId?.domain,
-                name: node.value?.taskNode?.referenceId?.name,
-                project: node.value?.taskNode?.referenceId?.project,
+      const executions: NodeExecution[] = [...filteredNodeExecutions];
+      if (!filterState.appliedFilters?.length) {
+        initialNodes.forEach((node) => {
+          if (!nodeExecutionsById[node.scopedId]) {
+            executions.push({
+              closure: {
+                createdAt: dateToTimestamp(new Date()),
+                outputUri: '',
+                phase: NodeExecutionPhase.UNDEFINED,
               },
-              nodeId: node.id,
-            },
-            inputUri: '',
-            scopedId: node.scopedId,
-          });
-      });
+              id: {
+                executionId: {
+                  domain: node.value?.taskNode?.referenceId?.domain,
+                  name: node.value?.taskNode?.referenceId?.name,
+                  project: node.value?.taskNode?.referenceId?.project,
+                },
+                nodeId: node.id,
+              },
+              inputUri: '',
+              scopedId: node.scopedId,
+            });
+          }
+        });
+      }
       setNodeExecutions(executions);
     }
-  }, [nodeExecutionsById, initialNodes]);
+  }, [nodeExecutionsById, initialNodes, filteredNodeExecutions]);
 
   const executionsWithKeys = useMemo(
     () =>

packages/zapp/console/src/components/Executions/Tables/test/NodeExecutionsTable.test.tsx

@@ -15,6 +15,7 @@ import * as React from 'react';
 import { dateToTimestamp } from 'common/utils';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { createTestQueryClient } from 'test/utils';
+import { NodeExecution } from 'models/Execution/types';
 import { dNode } from 'models/Graph/types';
 import { NodeExecutionsTable } from '../NodeExecutionsTable';
 
@@ -49,6 +50,26 @@ const mockNodes = (n: number): dNode[] => {
   return nodes;
 };
 
+const mockNodeExecutions = (n: number, phases: NodeExecutionPhase[]): NodeExecution[] => {
+  const nodeExecutions: NodeExecution[] = [];
+  for (let i = 1; i <= n; i++) {
+    nodeExecutions.push({
+      closure: {
+        createdAt: dateToTimestamp(new Date()),
+        outputUri: '',
+        phase: phases[i - 1],
+      },
+      id: {
+        executionId: { domain: 'domain', name: 'name', project: 'project' },
+        nodeId: `node${i}`,
+      },
+      inputUri: '',
+      scopedId: `n${i}`,
+    });
+  }
+  return nodeExecutions;
+};
+
 const mockExecutionsById = (n: number, phases: NodeExecutionPhase[]) => {
   const nodeExecutionsById = {};
 
@@ -85,6 +106,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
   const renderTable = ({
     nodeExecutionsById,
     initialNodes,
+    filteredNodeExecutions,
     selectedExecution,
     setSelectedExecution,
   }) =>
@@ -97,6 +119,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
                 initialNodes={initialNodes}
                 selectedExecution={selectedExecution}
                 setSelectedExecution={setSelectedExecution}
+                filteredNodeExecutions={filteredNodeExecutions}
               />
             </NodeExecutionsByIdContext.Provider>
           </NodeExecutionDetailsContextProvider>
@@ -119,6 +142,7 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
         selectedExecution,
         setSelectedExecution,
         nodeExecutionsById: {},
+        filteredNodeExecutions: [],
       });
 
       expect(getByText(noExecutionsFoundString)).toBeInTheDocument();
@@ -127,12 +151,14 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     it('renders NodeExecutionRows with proper nodeExecutions', async () => {
       const phases = [NodeExecutionPhase.FAILED, NodeExecutionPhase.SUCCEEDED];
       const nodeExecutionsById = mockExecutionsById(2, phases);
+      const filteredNodeExecutions = mockNodeExecutions(2, phases);
 
       const { getByText } = renderTable({
         initialNodes,
         selectedExecution,
         setSelectedExecution,
         nodeExecutionsById,
+        filteredNodeExecutions,
       });
 
       for (const i in initialNodes) {
@@ -143,12 +169,14 @@ describe('NodeExecutionsTableExecutions > Tables > NodeExecutionsTable', () => {
     it('renders future nodes with UNDEFINED phase', async () => {
       const phases = [NodeExecutionPhase.SUCCEEDED, NodeExecutionPhase.UNDEFINED];
       const nodeExecutionsById = mockExecutionsById(1, phases);
+      const filteredNodeExecutions = mockNodeExecutions(1, phases);
 
       const { getByText } = renderTable({
         initialNodes,
         selectedExecution,
         setSelectedExecution,
         nodeExecutionsById,
+        filteredNodeExecutions,
       });
 
       for (const i in initialNodes) {