feat: show launchplan in execution table (#738)

* feat: show launchplan in execution table Signed-off-by: Pradithya Aria Pura <[email protected]> * feat: show launch plan version Signed-off-by: Pradithya Aria Pura <[email protected]> * fix: fix unit test Signed-off-by: Pradithya Aria Pura <[email protected]> * fix: rename function Signed-off-by: Pradithya Aria Pura <[email protected]> * fix: move LaunchPlanLink to component/Launchplan Signed-off-by: Pradithya Aria Pura <[email protected]> * fix: handle overflow Signed-off-by: Pradithya Aria Pura <[email protected]> --------- Signed-off-by: Pradithya Aria Pura <[email protected]>
flyteorg · Apr 11, 2023 · 7115a06 · 7115a06
1 parent c82e755
commit 7115a06
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 4 deletions.
diff --git 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 (
+    <>
+      <LaunchPlanLink id={lp} color={isArchived ? 'disabled' : 'primary'} />
+      <Typography
+        className={className}
+        variant="subtitle1"
+        color="textSecondary"
+      >
+        {version}
+      </Typography>
+    </>
+  );
+}
+
 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
@@ -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
@@ -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/...components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx b/...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
@@ -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
@@ -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 (
+    <RouterLink
+      className={classnames(linkColor, className)}
+      to={`${Routes.LaunchPlanDetails.makeUrl(id.project, id.domain, id.name)}`}
+    >
+      {id.name}
+    </RouterLink>
+  );
+};
diff --git 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),
     );
   });