feat: display execution tags and filter

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

@@ -5,12 +5,14 @@
 import { SearchInputForm } from 'components/common/SearchInputForm';
 import { SingleSelectForm } from 'components/common/SingleSelectForm';
 import { FilterPopoverButton } from 'components/Tables/filters/FilterPopoverButton';
+import { TagsInputForm } from 'components/common/TagsInputForm';
 import {
   FilterState,
   MultiFilterState,
   SearchFilterState,
   SingleFilterState,
   BooleanFilterState,
+  TagsFilterState,
 } from './filters/types';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -49,6 +51,7 @@
 
 const RenderFilter: React.FC<{ filter: FilterState }> = ({ filter }) => {
   const searchFilterState = filter as SearchFilterState;
+  const tagsFilterState = filter as TagsFilterState;
   switch (filter.type) {
     case 'single':
       return <SingleSelectForm {...(filter as SingleFilterState<any>)} />;
@@ -61,6 +64,13 @@
           defaultValue={searchFilterState.value}
         />
       );
+    case 'tags':
+      return (
+        <TagsInputForm
+          {...tagsFilterState}
+          defaultValue={tagsFilterState.tags}
+        />
+      );
     default:
       return null;
   }

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx

@@ -4,6 +4,7 @@
   IconButton,
   Button,
   CircularProgress,
+  Chip,
 } from '@material-ui/core';
 import ArchiveOutlined from '@material-ui/icons/ArchiveOutlined';
 import UnarchiveOutline from '@material-ui/icons/UnarchiveOutlined';
@@ -21,6 +22,7 @@
 import { ExecutionState, WorkflowExecutionPhase } from 'models/Execution/enums';
 import classnames from 'classnames';
 import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink';
+import { getColorFromString } from 'components/utils';
 import { WorkflowExecutionsTableState } from '../types';
 import { WorkflowExecutionLink } from '../WorkflowExecutionLink';
 import { getWorkflowExecutionTimingMS, isExecutionArchived } from '../../utils';
@@ -100,6 +102,31 @@
   );
 }
 
+export function getExecutionTagsCell(
+  execution: Execution,
+  className: string,
+): React.ReactNode {
+  const isArchived = isExecutionArchived(execution);
+  const tags = execution.spec.tags ?? [];
+  return (
+    <div className={className}>
+      {tags.map(tag => {
+        return (
+          <Chip
+            key={tag}
+            label={tag}
+            size="small"
+            color="default"
+            style={{
+              backgroundColor: isArchived ? undefined : getColorFromString(tag),
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
 export function getLaunchPlanCell(
   execution: Execution,
   className: string,

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts

@@ -5,6 +5,7 @@ import { Protobuf } from '@flyteorg/flyteidl-types';
 
 const str = {
   tableLabel_name: 'execution id',
+  tableLabel_tags: 'tags',
   tableLabel_launchPlan: 'launch plan',
   tableLabel_phase: 'status',
   tableLabel_startedAt: 'start time',

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts

@@ -10,6 +10,11 @@ export const useStyles = makeStyles((theme: Theme) => ({
     flexBasis: workflowExecutionsTableColumnWidths.name,
     whiteSpace: 'normal',
   },
+  columnExecutionTags: {
+    flexGrow: 1,
+    flexBasis: workflowExecutionsTableColumnWidths.tags,
+    whiteSpace: 'normal',
+  },
   columnLaunchPlan: {
     flexGrow: 1,
     flexBasis: workflowExecutionsTableColumnWidths.launchPlan,
@@ -56,4 +61,9 @@ export const useStyles = makeStyles((theme: Theme) => ({
     width: '100px', // same as confirmationButton size
     textAlign: 'center',
   },
+  executionTagsStack: {
+    display: 'flex',
+    gap: theme.spacing(0.5),
+    flexWrap: 'wrap',
+  },
 }));

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx

@@ -12,6 +12,7 @@ import {
   getStartTimeCell,
   getStatusCell,
   getLaunchPlanCell,
+  getExecutionTagsCell,
 } from './cells';
 import { useStyles } from './styles';
 import t, { patternKey } from './strings';
@@ -45,6 +46,13 @@ export function useWorkflowExecutionsTableColumns(
         key: 'name',
         label: t(patternKey('tableLabel', 'name')),
       },
+      {
+        cellRenderer: ({ execution }) =>
+          getExecutionTagsCell(execution, styles.executionTagsStack),
+        className: styles.columnExecutionTags,
+        key: 'tags',
+        label: t(patternKey('tableLabel', 'tags')),
+      },
       {
         cellRenderer: ({ execution }) =>
           getLaunchPlanCell(execution, commonStyles.textWrapped),

packages/console/src/components/Executions/Tables/constants.ts

@@ -2,10 +2,11 @@ export const workflowExecutionsTableColumnWidths = {
   duration: 100,
   actions: 130,
   lastRun: 130,
-  name: 240,
+  name: 200,
   launchPlan: 120,
   phase: 120,
   startedAt: 200,
+  tags: 200,
 };
 
 export const nodeExecutionsTableColumnWidths = {

packages/console/src/components/Executions/filters/constants.ts

@@ -3,4 +3,5 @@ export const filterLabels = {
   startTime: 'Start Time',
   status: 'Status',
   version: 'Version',
+  tags: 'Tags',
 };

packages/console/src/components/Executions/filters/types.ts

@@ -20,7 +20,12 @@ export interface FilterButtonState {
   onClick: () => void;
 }
 
-export type FilterStateType = 'single' | 'multi' | 'search' | 'boolean';
+export type FilterStateType =
+  | 'single'
+  | 'multi'
+  | 'search'
+  | 'boolean'
+  | 'tags';
 
 export interface FilterState {
   active: boolean;
@@ -60,3 +65,10 @@ export interface BooleanFilterState extends FilterState {
   setActive: (active: boolean) => void;
   type: 'boolean';
 }
+
+export interface TagsFilterState extends FilterState {
+  onChange: (newTags: string[]) => void;
+  placeholder: string;
+  type: 'tags';
+  tags: string[];
+}

packages/console/src/components/Executions/filters/useExecutionFiltersState.ts

@@ -14,6 +14,7 @@ import { FilterState } from './types';
 import { useMultiFilterState } from './useMultiFilterState';
 import { useSearchFilterState } from './useSearchFilterState';
 import { useSingleFilterState } from './useSingleFilterState';
+import { useTagsFilterState } from './useTagsFilterState';
 
 export interface ExecutionFiltersState {
   appliedFilters: FilterOperation[];
@@ -45,6 +46,12 @@ export function useWorkflowExecutionFiltersState() {
       listHeader: 'Filter By',
       queryStateKey: 'status',
     }),
+    useTagsFilterState({
+      filterKey: 'admin_tag.name',
+      label: filterLabels.tags,
+      placeholder: 'Enter Tags String',
+      queryStateKey: 'tags',
+    }),
     useSearchFilterState({
       filterKey: 'workflow.version',
       label: filterLabels.version,

packages/console/src/components/Executions/filters/useTagsFilterState.ts

@@ -0,0 +1,87 @@
+import { useQueryState } from 'components/hooks/useQueryState';
+import { FilterOperationName } from 'models/AdminEntity/types';
+import { useEffect, useState } from 'react';
+import { TagsFilterState } from './types';
+import { useFilterButtonState } from './useFilterButtonState';
+
+function serializeForQueryState(values: any[]) {
+  return values.join(';');
+}
+function deserializeFromQueryState(stateValue = '') {
+  return stateValue.split(';');
+}
+
+interface TagsFilterStateStateArgs {
+  defaultValue?: string[];
+  filterKey: string;
+  filterOperation?: FilterOperationName;
+  label: string;
+  placeholder: string;
+  queryStateKey: string;
+}
+
+/** Maintains the state for a `TagsInputForm` filter.
+ * The generated `FilterOperation` will use the provided `key` and `operation`
+ * (defaults to `VALUE_IN`)
+ * The current search value will be synced to the query string using the
+ * provided `queryStateKey` value.
+ */
+export function useTagsFilterState({
+  defaultValue = [],
+  filterKey,
+  filterOperation = FilterOperationName.VALUE_IN,
+  label,
+  placeholder,
+  queryStateKey,
+}: TagsFilterStateStateArgs): TagsFilterState {
+  const { params, setQueryStateValue } =
+    useQueryState<Record<string, string>>();
+  const queryStateValue = params[queryStateKey];
+
+  const [tags, setTags] = useState(defaultValue);
+  const active = tags.length !== 0;
+
+  const button = useFilterButtonState();
+  const onChange = (newValue: string[]) => {
+    setTags(newValue);
+  };
+
+  const onReset = () => {
+    setTags(defaultValue);
+    button.setOpen(false);
+  };
+
+  useEffect(() => {
+    const queryValue = tags.length ? serializeForQueryState(tags) : undefined;
+    setQueryStateValue(queryStateKey, queryValue);
+  }, [tags.join(), queryStateKey]);
+
+  useEffect(() => {
+    if (queryStateValue) {
+      setTags(deserializeFromQueryState(queryStateValue));
+    }
+  }, [queryStateValue]);
+
+  const getFilter = () =>
+    tags.length
+      ? [
+          {
+            value: tags,
+            key: filterKey,
+            operation: filterOperation,
+          },
+        ]
+      : [];
+
+  return {
+    active,
+    button,
+    getFilter,
+    onChange,
+    onReset,
+    label,
+    placeholder,
+    tags,
+    type: 'tags',
+  };
+}