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 = {