diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx
index 0a0e68718..3309296ba 100644
--- 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 (
+
+ {tags.map(tag => {
+ return (
+
+ );
+ })}
+
+ );
+}
+
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
index 36885a578..6b9550730 100644
--- 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
index e5b01992a..beab8e557 100644
--- 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/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx
index 25d378987..52c94bc18 100644
--- a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx
+++ b/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),
diff --git a/packages/console/src/components/Executions/Tables/constants.ts b/packages/console/src/components/Executions/Tables/constants.ts
index 19e428e79..bcb6de413 100644
--- 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 = {