added filter on all run screens.

Author: talhainvenxion

src/ui/components/Filters/index.tsx

@@ -210,12 +210,12 @@ export const getInitialFilterStateForRuns = () => {
           type: 'string',
         },
         {
-          value: 'name',
+          value: 'pipelineName',
           label: 'Pipeline Name',
           type: 'string',
         },
         {
-          value: 'name',
+          value: 'stackName',
           label: 'Stack Name',
           type: 'string',
         },

src/ui/layouts/pipelines/PipelineDetail/Runs/index.tsx

@@ -3,14 +3,18 @@ import { translate } from '../translate';
 import { RunsTable } from '../../RunsTable';
 import { useService } from './useService';
 
-export const Runs: React.FC<{ pipelineId: TId }> = ({ pipelineId }) => {
+export const Runs: React.FC<{ pipelineId: TId; filter: any }> = ({
+  pipelineId,
+  filter,
+}) => {
   const { fetching, runIds } = useService({ pipelineId });
 
   return (
     <RunsTable
       fetching={fetching}
       emptyStateText={translate('emptyState.text')}
       runIds={runIds}
+      filter={filter}
     />
   );
 };

src/ui/layouts/pipelines/PipelineDetail/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Box, Paragraph, icons } from '../../../components';
 import { iconColors, iconSizes } from '../../../../constants';
@@ -9,7 +9,43 @@ import { Configuration } from './Configuration';
 import { Runs } from './Runs';
 import { BasePage } from '../BasePage';
 import { useService } from './useService';
+import FilterComponent, {
+  getInitialFilterStateForRuns,
+} from '../../../components/Filters';
+import { useLocationPath } from '../../../hooks';
 
+interface Props {
+  pipelineId: TId;
+}
+const FilterWrapperForRun = () => {
+  const locationPath = useLocationPath();
+  // debugger;
+
+  // TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
+  const [filters, setFilter] = useState([getInitialFilterStateForRuns()]);
+  function getFilter(values: any) {
+    const filterValuesMap = values.map((v: any) => {
+      return {
+        column: v.column.selectedValue,
+        type: v.contains.selectedValue,
+        value: v.filterValue,
+      };
+    });
+    return filterValuesMap;
+  }
+  return (
+    <FilterComponent
+      getInitials={getInitialFilterStateForRuns}
+      filters={filters}
+      setFilter={setFilter}
+    >
+      <Runs
+        filter={getFilter(filters)}
+        pipelineId={locationPath.split('/')[2]}
+      />
+    </FilterComponent>
+  );
+};
 const getTabPages = (pipelineId: TId): TabPage[] => {
   return [
     {
@@ -19,7 +55,8 @@ const getTabPages = (pipelineId: TId): TabPage[] => {
     },
     {
       text: translate('tabs.runs.text'),
-      Component: () => <Runs pipelineId={pipelineId} />,
+      Component: FilterWrapperForRun,
+
       path: routePaths.pipeline.runs(pipelineId),
     },
   ];
@@ -121,7 +158,6 @@ export const PipelineDetail: React.FC = () => {
           </Paragraph>
         </Box>
       </Box>
-
     </BasePage>
   );
 };

src/ui/layouts/pipelines/Pipelines/AllRuns/index.tsx

@@ -8,7 +8,11 @@ import { getTranslateByScope } from '../../../../../services';
 
 export const translate = getTranslateByScope('ui.layouts.AllRuns');
 
-export const AllRuns: React.FC = () => {
+interface Props {
+  filter: any;
+}
+
+export const AllRuns: React.FC<Props> = ({ filter }: Props) => {
   const { fetching, runIds } = useService();
 
   return (
@@ -17,6 +21,7 @@ export const AllRuns: React.FC = () => {
       emptyStateText={translate('emptyState.text')}
       runIds={runIds}
       fromAllruns={true}
+      filter={filter}
     />
   );
 };

src/ui/layouts/pipelines/Pipelines/index.tsx

@@ -9,6 +9,7 @@ import { useService } from './useService';
 import { useLocationPath } from '../../../hooks';
 import FilterComponent, {
   getInitialFilterStateForPipeline,
+  getInitialFilterStateForRuns,
 } from '../../../components/Filters';
 
 const FilterWrapper = () => {
@@ -34,6 +35,29 @@ const FilterWrapper = () => {
     </FilterComponent>
   );
 };
+const FilterWrapperForRun = () => {
+  // TODO: Dev please note: getInitialFilterState is for stack inital filter value for any other component you need to modify it
+  const [filters, setFilter] = useState([getInitialFilterStateForRuns()]);
+  function getFilter(values: any) {
+    const filterValuesMap = values.map((v: any) => {
+      return {
+        column: v.column.selectedValue,
+        type: v.contains.selectedValue,
+        value: v.filterValue,
+      };
+    });
+    return filterValuesMap;
+  }
+  return (
+    <FilterComponent
+      getInitials={getInitialFilterStateForRuns}
+      filters={filters}
+      setFilter={setFilter}
+    >
+      <AllRuns filter={getFilter(filters)} />
+    </FilterComponent>
+  );
+};
 const PAGES = [
   {
     text: translate('tabs.pipelines.text'),
@@ -42,7 +66,7 @@ const PAGES = [
   },
   {
     text: translate('tabs.allRuns.text'),
-    Component: AllRuns,
+    Component: FilterWrapperForRun,
     path: routePaths.pipelines.allRuns,
   },
 ];

src/ui/layouts/pipelines/RunsTable/index.tsx

@@ -7,20 +7,25 @@ import { Table } from '../../common/Table';
 import { useHeaderCols } from './HeaderCols';
 import { useService } from './useService';
 
+interface Props {
+  filter: any;
+}
 export const RunsTable: React.FC<{
   runIds: TId[];
   pagination?: boolean;
   emptyStateText: string;
   fetching: boolean;
   pipelineRuns?: any;
   fromAllruns?: boolean;
+  filter?: any;
 }> = ({
   runIds,
   pagination = true,
   emptyStateText,
   fetching,
   pipelineRuns,
   fromAllruns,
+  filter,
 }) => {
   const history = useHistory();
 
@@ -32,7 +37,7 @@ export const RunsTable: React.FC<{
     activeSortingDirection,
     setActiveSortingDirection,
     setSelectedRunIds,
-  } = useService({ pipelineRuns, runIds });
+  } = useService({ pipelineRuns, runIds, filter });
 
   const openDetailPage = (run: TRun) => {
     setSelectedRunIds([]);

src/ui/layouts/pipelines/RunsTable/useService.ts

@@ -7,6 +7,7 @@ import { Sorting, SortingDirection } from './types';
 import { pipelinePagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
+import { getFilteredDataForTable } from '../../../../utils/tableFilters';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -17,13 +18,24 @@ interface ServiceInterface {
   setActiveSortingDirection: (arg: SortingDirection | null) => void;
   setSelectedRunIds: (ids: TId[]) => void;
 }
+interface filterValue {
+  label: string;
+  type: string;
+  value: string;
+}
 
 export const useService = ({
   pipelineRuns,
   runIds,
+  filter,
 }: {
   pipelineRuns: any;
   runIds: TId[];
+  filter: {
+    column: filterValue;
+    type: filterValue;
+    value: string;
+  }[];
 }): ServiceInterface => {
   const dispatch = useDispatch();
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
@@ -40,12 +52,17 @@ export const useService = ({
     : useSelector(runSelectors.forRunIds(runIds));
 
   useEffect(() => {
-    const orderedRuns = _.sortBy(runs, (run: TRun) =>
+    let orderedRuns = _.sortBy(runs, (run: TRun) =>
       new Date(run.kubeflowStartTime).getTime(),
     ).reverse();
 
+    const isValidFilter = filter.map((f) => f.value).join('');
+    if (isValidFilter) {
+      orderedRuns = getFilteredDataForTable(orderedRuns, filter);
+    }
+
     setSortedRuns(orderedRuns);
-  }, []);
+  }, [filter]);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(pipelinePagesActions.setSelectedRunIds({ runIds }));

src/ui/layouts/stackComponents/RunsTable/index.tsx

@@ -12,7 +12,8 @@ export const RunsTable: React.FC<{
   pagination?: boolean;
   emptyStateText: string;
   fetching: boolean;
-}> = ({ runIds, pagination = true, emptyStateText, fetching }) => {
+  filter?: any;
+}> = ({ runIds, pagination = true, emptyStateText, fetching, filter }) => {
   const history = useHistory();
 
   const {
@@ -23,7 +24,7 @@ export const RunsTable: React.FC<{
     activeSortingDirection,
     setActiveSortingDirection,
     setSelectedRunIds,
-  } = useService({ runIds });
+  } = useService({ runIds, filter });
 
   const openDetailPage = (run: TRun) => {
     // debugger;

src/ui/layouts/stackComponents/RunsTable/useService.ts

@@ -7,6 +7,7 @@ import { Sorting, SortingDirection } from './types';
 import { stackPagesActions } from '../../../../redux/actions';
 import { useDispatch, useSelector } from '../../../hooks';
 import { runSelectors } from '../../../../redux/selectors';
+import { getFilteredDataForTable } from '../../../../utils/tableFilters';
 
 interface ServiceInterface {
   sortedRuns: TRun[];
@@ -17,8 +18,23 @@ interface ServiceInterface {
   setActiveSortingDirection: (arg: SortingDirection | null) => void;
   setSelectedRunIds: (ids: TId[]) => void;
 }
+interface filterValue {
+  label: string;
+  type: string;
+  value: string;
+}
 
-export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
+export const useService = ({
+  runIds,
+  filter,
+}: {
+  runIds: TId[];
+  filter: {
+    column: filterValue;
+    type: filterValue;
+    value: string;
+  }[];
+}): ServiceInterface => {
   const dispatch = useDispatch();
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
     'createdAt',
@@ -32,12 +48,16 @@ export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
   const runs = useSelector(runSelectors.forRunIds(runIds));
 
   useEffect(() => {
-    const orderedRuns = _.sortBy(runs, (run: TRun) =>
+    let orderedRuns = _.sortBy(runs, (run: TRun) =>
       new Date(run.kubeflowStartTime).getTime(),
     ).reverse();
 
+    const isValidFilter = filter.map((f) => f.value).join('');
+    if (isValidFilter) {
+      orderedRuns = getFilteredDataForTable(orderedRuns, filter);
+    }
     setSortedRuns(orderedRuns);
-  }, []);
+  }, [filter]);
 
   const setSelectedRunIds = (runIds: TId[]) => {
     dispatch(stackPagesActions.setSelectedRunIds({ runIds }));

src/ui/layouts/stackComponents/StackDetail/Runs/index.tsx

@@ -3,8 +3,9 @@ import { translate } from '../translate';
 import { RunsTable } from '../../RunsTable';
 import { useService } from './useService';
 
-export const Runs: React.FC<{ stackComponentId: TId }> = ({
+export const Runs: React.FC<{ stackComponentId: TId; filter?: any }> = ({
   stackComponentId,
+  filter,
 }) => {
   const { fetching, runIds } = useService({ stackComponentId });
   // debugger;
@@ -14,6 +15,7 @@ export const Runs: React.FC<{ stackComponentId: TId }> = ({
       fetching={fetching}
       emptyStateText={translate('emptyState.text')}
       runIds={runIds}
+      filter={filter}
     />
   );
 };