diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx index a3a3063e8..0a0e68718 100644 --- a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx +++ b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx @@ -20,6 +20,7 @@ import { ExecutionStatusBadge } from 'components/Executions/ExecutionStatusBadge import { Execution } from 'models/Execution/types'; import { ExecutionState, WorkflowExecutionPhase } from 'models/Execution/enums'; import classnames from 'classnames'; +import { LaunchPlanLink } from 'components/LaunchPlan/LaunchPlanLink'; import { WorkflowExecutionsTableState } from '../types'; import { WorkflowExecutionLink } from '../WorkflowExecutionLink'; import { getWorkflowExecutionTimingMS, isExecutionArchived } from '../../utils'; @@ -99,6 +100,28 @@ export function getDurationCell(execution: Execution): React.ReactNode { ); } +export function getLaunchPlanCell( + execution: Execution, + className: string, +): React.ReactNode { + const isArchived = isExecutionArchived(execution); + const lp = execution.spec.launchPlan; + const version = execution.spec.launchPlan.version; + + return ( + <> + + + {version} + + + ); +} + export const showOnHoverClass = 'showOnHover'; export function getActionsCell( execution: Execution, diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/strings.ts index 154c8b053..36885a578 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_launchPlan: 'launch plan', tableLabel_phase: 'status', tableLabel_startedAt: 'start time', tableLabel_duration: 'duration', diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts index 11ab0be36..e5b01992a 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', }, + columnLaunchPlan: { + flexGrow: 1, + flexBasis: workflowExecutionsTableColumnWidths.launchPlan, + overflow: 'hidden', + }, columnLastRun: { flexBasis: workflowExecutionsTableColumnWidths.lastRun, }, diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx index a0737dbf7..25d378987 100644 --- a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx +++ b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx @@ -11,6 +11,7 @@ import { getExecutionIdCell, getStartTimeCell, getStatusCell, + getLaunchPlanCell, } from './cells'; import { useStyles } from './styles'; import t, { patternKey } from './strings'; @@ -44,6 +45,13 @@ export function useWorkflowExecutionsTableColumns( key: 'name', label: t(patternKey('tableLabel', 'name')), }, + { + cellRenderer: ({ execution }) => + getLaunchPlanCell(execution, commonStyles.textWrapped), + className: styles.columnLaunchPlan, + key: 'launchPlan', + label: t(patternKey('tableLabel', 'launchPlan')), + }, { cellRenderer: ({ execution }) => getStatusCell(execution), className: styles.columnStatus, diff --git a/packages/console/src/components/Executions/Tables/constants.ts b/packages/console/src/components/Executions/Tables/constants.ts index 1a182a334..19e428e79 100644 --- a/packages/console/src/components/Executions/Tables/constants.ts +++ b/packages/console/src/components/Executions/Tables/constants.ts @@ -2,7 +2,8 @@ export const workflowExecutionsTableColumnWidths = { duration: 100, actions: 130, lastRun: 130, - name: 360, + name: 240, + launchPlan: 120, phase: 120, startedAt: 200, }; diff --git a/packages/console/src/components/LaunchPlan/LaunchPlanLink.tsx b/packages/console/src/components/LaunchPlan/LaunchPlanLink.tsx new file mode 100644 index 000000000..5ca2f7a7c --- /dev/null +++ b/packages/console/src/components/LaunchPlan/LaunchPlanLink.tsx @@ -0,0 +1,27 @@ +import classnames from 'classnames'; +import { useCommonStyles } from 'components/common/styles'; +import { LaunchPlanId } from 'models/Launch/types'; +import * as React from 'react'; +import { Link as RouterLink } from 'react-router-dom'; +import { Routes } from 'routes/routes'; + +/** A simple component to render a link to a specific LaunchPlan */ +export const LaunchPlanLink: React.FC<{ + className?: string; + color?: 'primary' | 'disabled'; + id: LaunchPlanId; +}> = ({ className, color = 'primary', id }) => { + const commonStyles = useCommonStyles(); + const linkColor = + color === 'disabled' + ? commonStyles.secondaryLink + : commonStyles.primaryLink; + return ( + + {id.name} + + ); +}; diff --git a/packages/console/src/components/Project/test/ProjectDashboard.test.tsx b/packages/console/src/components/Project/test/ProjectDashboard.test.tsx index 592b104e7..5f4b75589 100644 --- a/packages/console/src/components/Project/test/ProjectDashboard.test.tsx +++ b/packages/console/src/components/Project/test/ProjectDashboard.test.tsx @@ -215,7 +215,7 @@ describe('ProjectDashboard', () => { mockUseUserProfile.mockReturnValue( loadedFetchable(sampleUserProfile, jest.fn()), ); - const { getByText, queryByText, getAllByRole } = renderView(); + const { getAllByText, queryAllByText, getAllByRole } = renderView(); await waitFor(() => {}); expect(mockUseUserProfile).toHaveBeenCalled(); @@ -224,13 +224,15 @@ describe('ProjectDashboard', () => { expect(checkboxes[0]).toBeTruthy(); expect(checkboxes[0]?.checked).toEqual(false); await waitFor(() => - expect(getByText(executions1[0].closure.workflowId.name)), + expect(getAllByText(executions1[0].closure.workflowId.name)), ); await fireEvent.click(checkboxes[0]); // when user selects checkbox, table should have no executions to display await waitFor(() => - expect(queryByText(executions1[0].closure.workflowId.name)).toBeNull(), + expect( + queryAllByText(executions1[0].closure.workflowId.name), + ).toHaveLength(0), ); });