feat: display execution tags

flyteorg · Jan 22, 2024 · 80e20b1 · 80e20b1
1 parent cfc38e4
commit 80e20b1
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 1 deletion.
diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx
@@ -4,6 +4,7 @@ import {
   IconButton,
   Button,
   CircularProgress,
+  Chip,
 } from '@material-ui/core';
 import ArchiveOutlined from '@material-ui/icons/ArchiveOutlined';
 import UnarchiveOutline from '@material-ui/icons/UnarchiveOutlined';
@@ -100,6 +101,28 @@ export function getDurationCell(execution: Execution): React.ReactNode {
   );
 }
 
+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={isArchived ? 'default' : 'primary'}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
 export function getLaunchPlanCell(
   execution: Execution,
   className: string,

diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts b/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',

diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts b/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,8 @@ export const useStyles = makeStyles((theme: Theme) => ({
     width: '100px', // same as confirmationButton size
     textAlign: 'center',
   },
+  executionTagsStack: {
+    display: 'flex',
+    gap: theme.spacing(0.5),
+  },
 }));
diff --git a/...components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx b/...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),

diff --git a/packages/console/src/components/Executions/Tables/constants.ts b/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: 120,
 };
 
 export const nodeExecutionsTableColumnWidths = {