chore: fix filters

packages/zapp/console/src/components/Entities/EntityInputs.tsx

@@ -16,6 +16,7 @@ import { FilterOperationName } from 'models/AdminEntity/types';
 import { ResourceIdentifier } from 'models/Common/types';
 import { LaunchPlanClosure, LaunchPlanSpec } from 'models/Launch/types';
 import * as React from 'react';
+import { useMemo } from 'react';
 import t from './strings';
 import { transformLiterals } from '../Literals/helpers';
 
@@ -104,8 +105,8 @@ export const EntityInputs: React.FC<{
     ? launchPlanState.value[0].spec
     : ({} as LaunchPlanSpec);
 
-  const expectedInputs = React.useMemo<Input[]>(() => {
-    const results = [] as Input[];
+  const expectedInputs = useMemo<Input[]>(() => {
+    const results: Input[] = [];
     Object.keys(closure?.expectedInputs?.parameters ?? {}).forEach((name) => {
       const parameter = closure?.expectedInputs.parameters[name];
       if (parameter?.var?.type) {
@@ -121,25 +122,11 @@ export const EntityInputs: React.FC<{
     return results;
   }, [closure]);
 
-  const fixedInputs = React.useMemo<Input[]>(() => {
+  const fixedInputs = useMemo<Input[]>(() => {
     const inputsMap = transformLiterals(spec?.fixedInputs?.literals ?? {});
     return Object.keys(inputsMap).map((name) => ({ name, defaultValue: inputsMap[name] }));
   }, [spec]);
 
-  const configs = React.useMemo(
-    () => [
-      { name: t('configType'), value: 'single (csv)' },
-      {
-        name: t('configUrl'),
-        value:
-          'https://raw.githubusercontent.com/jbrownlee/Datasets/master/pima-indians-diabetes.data.csv',
-      },
-      { name: t('configSeed'), value: '7' },
-      { name: t('configTestSplitRatio'), value: '0.33' },
-    ],
-    [],
-  );
-
   return (
     <>
       <Typography className={styles.header} variant="h3">
@@ -232,22 +219,6 @@ export const EntityInputs: React.FC<{
           )}
         </div>
       </div>
-      {/* <div className={styles.rowContainer}>
-        <div className={styles.firstColumnContainer}>
-          <Typography className={styles.header} variant="h4">
-            {t('configuration')}
-          </Typography>
-          <ul className={styles.configs}>
-            {configs.map(({ name, value }) => (
-              <li className={styles.config} key={name}>
-                <span className={styles.configName}><Typography variant="body">{name}:</Typography></span>
-                <span className={styles.configValue}><Typography variant="body">{value}</Typography></span>
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div className={styles.secondColumnContainer}></div>
-      </div> */}
     </>
   );
 };

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

@@ -6,13 +6,14 @@ import { DataError } from 'components/Errors/DataError';
 import { useTabState } from 'components/hooks/useTabState';
 import { secondaryBackgroundColor } from 'components/Theme/constants';
 import { Execution, ExternalResource, LogsByPhase, NodeExecution } from 'models/Execution/types';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { 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 { FilterOperation } from 'models/AdminEntity/types';
 import { NodeExecutionDetailsContextProvider } from '../contextProvider/NodeExecutionDetails';
-import { NodeExecutionsByIdContext, NodeExecutionsRequestConfigContext } from '../contexts';
+import { NodeExecutionsByIdContext } from '../contexts';
 import { ExecutionFilters } from '../ExecutionFilters';
 import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
 import { tabs } from './constants';
@@ -42,6 +43,13 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+const isPhaseFilter = (appliedFilters: FilterOperation[]) => {
+  if (appliedFilters.length === 1 && appliedFilters[0].key === 'phase') {
+    return true;
+  }
+  return false;
+};
+
 interface WorkflowNodeExecution extends NodeExecution {
   logsByPhase?: LogsByPhase;
 }
@@ -57,7 +65,6 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
   const filterState = useNodeExecutionFiltersState();
   const tabState = useTabState(tabs, defaultTab);
   const queryClient = useQueryClient();
-  const requestConfig = useContext(NodeExecutionsRequestConfigContext); // Can't find initialization of the provider
   const [nodeExecutionsLoading, setNodeExecutionsLoading] = useState<boolean>(true);
 
   const {
@@ -73,12 +80,12 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
     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. */
-  const appliedFilters = tabState.value === tabs.nodes.id ? filterState.appliedFilters : [];
-
-  const { nodeExecutionsQuery } = useExecutionNodeViewsState(execution, appliedFilters);
+  // query to get all data to build Graph and Timeline
+  const { nodeExecutionsQuery } = useExecutionNodeViewsState(execution);
+  // query to get filtered data to narrow down Table outputs
+  const {
+    nodeExecutionsQuery: { data: filteredNodeExecutions },
+  } = useExecutionNodeViewsState(execution, filterState.appliedFilters);
 
   useEffect(() => {
     let isCurrent = true;
@@ -131,10 +138,7 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
     };
   }, [nodeExecutions]);
 
-  const childGroupsQuery = useAllTreeNodeExecutionGroupsQuery(
-    nodeExecutionsQuery.data ?? [],
-    requestConfig,
-  );
+  const childGroupsQuery = useAllTreeNodeExecutionGroupsQuery(nodeExecutionsQuery.data ?? [], {});
 
   useEffect(() => {
     if (!childGroupsQuery.isLoading && childGroupsQuery.data) {
@@ -161,7 +165,13 @@ export const ExecutionNodeViews: React.FC<ExecutionNodeViewsProps> = ({ executio
         loadingComponent={LoadingComponent}
       >
         {() => (
-          <ExecutionTab tabType={tabType} filteredNodeExecutions={nodeExecutionsQuery.data ?? []} />
+          <ExecutionTab
+            tabType={tabType}
+            // if only phase filter was applied, ignore request response, and filter out nodes via frontend filter
+            filteredNodeExecutions={
+              isPhaseFilter(filterState.appliedFilters) ? undefined : filteredNodeExecutions
+            }
+          />
         )}
       </WaitForQuery>
     );

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

@@ -11,7 +11,7 @@ import { ExecutionTabContent } from './ExecutionTabContent';
 
 export interface ExecutionTabProps {
   tabType: string;
-  filteredNodeExecutions: NodeExecution[];
+  filteredNodeExecutions?: NodeExecution[];
 }
 
 /** Contains the available ways to visualize the nodes of a WorkflowExecution */

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

@@ -11,6 +11,12 @@ import { checkForDynamicExecutions } from 'components/common/utils';
 import { dNode } from 'models/Graph/types';
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
+import {
+  FilterOperation,
+  FilterOperationName,
+  FilterOperationValueList,
+} from 'models/AdminEntity/types';
+import { isEqual } from 'lodash';
 import { useNodeExecutionContext } from '../contextProvider/NodeExecutionDetails';
 import { NodeExecutionsByIdContext } from '../contexts';
 import { NodeExecutionsTable } from '../Tables/NodeExecutionsTable';
@@ -20,10 +26,12 @@ import { ExecutionTimeline } from './Timeline/ExecutionTimeline';
 import { ExecutionTimelineFooter } from './Timeline/ExecutionTimelineFooter';
 import { convertToPlainNodes, TimeZone } from './Timeline/helpers';
 import { DetailsPanelContext } from './DetailsPanelContext';
+import { useNodeExecutionFiltersState } from '../filters/useExecutionFiltersState';
+import { nodeExecutionPhaseConstants } from '../constants';
 
 export interface ExecutionTabContentProps {
   tabType: string;
-  filteredNodeExecutions: NodeExecution[];
+  filteredNodeExecutions?: NodeExecution[];
 }
 
 const useStyles = makeStyles(() => ({
@@ -39,29 +47,50 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+const executionMatchesPhaseFilter = (
+  nodeExecution: NodeExecution,
+  { key, value, operation }: FilterOperation,
+) => {
+  if (key === 'phase' && operation === FilterOperationName.VALUE_IN) {
+    // default to UNKNOWN phase if the field does not exist on a closure
+    const itemValue =
+      nodeExecutionPhaseConstants[nodeExecution?.closure[key]]?.value ??
+      nodeExecutionPhaseConstants[0].value;
+    // phase check filters always return values in an array
+    const valuesArray = value as FilterOperationValueList;
+    return valuesArray.includes(itemValue);
+  }
+  return false;
+};
+
 export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
   tabType,
   filteredNodeExecutions,
 }) => {
   const styles = useStyles();
   const { compiledWorkflowClosure } = useNodeExecutionContext();
+  const { appliedFilters } = useNodeExecutionFiltersState();
+  const nodeExecutionsById = useContext(NodeExecutionsByIdContext);
+
   const { dag, staticExecutionIdsMap, error } = compiledWorkflowClosure
     ? transformerWorkflowToDag(compiledWorkflowClosure)
     : { dag: {}, staticExecutionIdsMap: {}, error: null };
-  const nodeExecutionsById = useContext(NodeExecutionsByIdContext);
   const dynamicParents = checkForDynamicExecutions(nodeExecutionsById, staticExecutionIdsMap);
   const { data: dynamicWorkflows } = useQuery(
     makeNodeExecutionDynamicWorkflowQuery(dynamicParents),
   );
   const [initialNodes, setInitialNodes] = useState<dNode[]>([]);
+  const [initialFilteredNodes, setInitialFilteredNodes] = useState<dNode[] | undefined>(undefined);
   const [mergedDag, setMergedDag] = useState(null);
+  const [filters, setFilters] = useState<FilterOperation[]>(appliedFilters);
+  const [isFiltersChanged, setIsFiltersChanged] = useState<boolean>(false);
 
   useEffect(() => {
     const nodes: dNode[] = compiledWorkflowClosure
       ? transformerWorkflowToDag(compiledWorkflowClosure, dynamicWorkflows).dag.nodes
       : [];
     // we remove start/end node info in the root dNode list during first assignment
-    const initialNodes = convertToPlainNodes(nodes);
+    const plainNodes = convertToPlainNodes(nodes);
 
     let newMergedDag = dag;
 
@@ -77,9 +106,38 @@ export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
       }
     }
     setMergedDag(newMergedDag);
-    setInitialNodes(initialNodes);
+    setInitialNodes(plainNodes);
   }, [compiledWorkflowClosure, dynamicWorkflows]);
 
+  useEffect(() => {
+    if (!isEqual(filters, appliedFilters)) {
+      setFilters(appliedFilters);
+      setIsFiltersChanged(true);
+    } else {
+      setIsFiltersChanged(false);
+    }
+  }, [appliedFilters]);
+
+  useEffect(() => {
+    if (appliedFilters.length > 0) {
+      // if filter was apllied, but filteredNodeExecutions is empty, we only appliied Phase filter,
+      // and need to clear out items manually
+      if (!filteredNodeExecutions) {
+        const filteredNodes = initialNodes.filter((node) =>
+          executionMatchesPhaseFilter(nodeExecutionsById[node.scopedId], appliedFilters[0]),
+        );
+        setInitialFilteredNodes(filteredNodes);
+      } else {
+        const filteredNodes = initialNodes.filter((node: dNode) =>
+          filteredNodeExecutions.find(
+            (execution: NodeExecution) => execution.scopedId === node.scopedId,
+          ),
+        );
+        setInitialFilteredNodes(filteredNodes);
+      }
+    }
+  }, [initialNodes, filteredNodeExecutions, isFiltersChanged]);
+
   const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
 
   // Note: flytegraph allows multiple selection, but we only support showing
@@ -140,10 +198,7 @@ export const ExecutionTabContent: React.FC<ExecutionTabContentProps> = ({
     switch (tabType) {
       case tabs.nodes.id:
         return (
-          <NodeExecutionsTable
-            initialNodes={initialNodes}
-            filteredNodeExecutions={filteredNodeExecutions}
-          />
+          <NodeExecutionsTable initialNodes={initialNodes} filteredNodes={initialFilteredNodes} />
         );
       case tabs.graph.id:
         return (

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

@@ -11,24 +11,26 @@ import { createTestQueryClient } from 'test/utils';
 import { tabs } from '../constants';
 import { ExecutionNodeViews } from '../ExecutionNodeViews';
 
-jest.mock('chart.js', () => ({
-  Chart: { register: () => null },
-  Tooltip: { positioners: { cursor: () => null } },
-  registerables: [],
-}));
-
-jest.mock('chartjs-plugin-datalabels', () => ({
-  ChartDataLabels: null,
-}));
-
 jest.mock('components/Executions/Tables/NodeExecutionRow', () => ({
-  NodeExecutionRow: jest.fn(({ children, execution }) => (
+  NodeExecutionRow: jest.fn(({ nodeExecution }) => (
     <div data-testid="node-execution-row">
-      <span id="node-execution-col-id">{execution?.id?.nodeId}</span>
-      {children}
+      <span id="node-execution-col-id">{nodeExecution?.id?.nodeId}</span>
     </div>
   )),
 }));
+
+jest.mock('components/Executions/ExecutionDetails/Timeline/ExecutionTimelineFooter', () => ({
+  ExecutionTimelineFooter: jest.fn(() => <div></div>),
+}));
+
+jest.mock('components/Executions/ExecutionDetails/Timeline/TimelineChart/index', () => ({
+  TimelineChart: jest.fn(() => <div></div>),
+}));
+
+jest.mock('components/Executions/ExecutionDetails/Timeline/NodeExecutionName', () => ({
+  NodeExecutionName: jest.fn(({ name }) => <div>{name}</div>),
+}));
+
 // ExecutionNodeViews uses query params for NE list, so we must match them
 // for the list to be returned properly
 const baseQueryParams = {
@@ -77,7 +79,7 @@ describe('ExecutionNodeViews', () => {
     await waitFor(() => getByText(tabs.nodes.label));
 
     const nodesTab = getByText(tabs.nodes.label);
-    const graphTab = getByText(tabs.graph.label);
+    const timelineTab = getByText(tabs.timeline.label);
 
     // Ensure we are on Nodes tab
     fireEvent.click(nodesTab);
@@ -96,11 +98,11 @@ describe('ExecutionNodeViews', () => {
     await waitFor(() => queryByText(failedNodeName));
 
     expect(queryByText(succeededNodeName)).not.toBeInTheDocument();
-    expect(getByText(failedNodeName)).toBeInTheDocument();
+    expect(queryByText(failedNodeName)).toBeInTheDocument();
 
     // Switch to the Graph tab
     fireEvent.click(statusButton);
-    fireEvent.click(graphTab);
+    fireEvent.click(timelineTab);
     await waitFor(() => queryByText(succeededNodeName));
 
     expect(queryByText(succeededNodeName)).toBeInTheDocument();

packages/zapp/console/src/components/Executions/ExecutionFilters.tsx

@@ -79,8 +79,12 @@ export const ExecutionFilters: React.FC<ExecutionFiltersProps> = ({
   filters = filters.map((filter) => {
     const onChangeFunc = filter.onChange;
     filter.onChange = (value) => {
-      if (clearCharts) clearCharts();
-      if (onChangeFunc) onChangeFunc(value);
+      if (clearCharts) {
+        clearCharts();
+      }
+      if (onChangeFunc) {
+        onChangeFunc(value);
+      }
     };
     return filter;
   });