feat: show launchplan in execution table

Signed-off-by: Pradithya Aria Pura <[email protected]>

packages/console/src/components/Executions/Tables/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>
+  );
+};

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx

@@ -22,6 +22,7 @@ import { ExecutionState, WorkflowExecutionPhase } from 'models/Execution/enums';
 import classnames from 'classnames';
 import { WorkflowExecutionsTableState } from '../types';
 import { WorkflowExecutionLink } from '../WorkflowExecutionLink';
+import { LaunchPlanLink } from '../LaunchPlanLink';
 import { getWorkflowExecutionTimingMS, isExecutionArchived } from '../../utils';
 import { useStyles } from './styles';
 import t from './strings';
@@ -99,6 +100,13 @@ export function getDurationCell(execution: Execution): React.ReactNode {
   );
 }
 
+export function getLaunchPlanName(execution: Execution): React.ReactNode {
+  const isArchived = isExecutionArchived(execution);
+  const lp = execution.spec.launchPlan;
+
+  return <LaunchPlanLink id={lp} color={isArchived ? 'disabled' : 'primary'} />;
+}
+
 export const showOnHoverClass = 'showOnHover';
 export function getActionsCell(
   execution: Execution,

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',

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts

@@ -10,6 +10,10 @@ export const useStyles = makeStyles((theme: Theme) => ({
     flexBasis: workflowExecutionsTableColumnWidths.name,
     whiteSpace: 'normal',
   },
+  columnLaunchPlan: {
+    flexGrow: 1,
+    flexBasis: workflowExecutionsTableColumnWidths.launchPlan,
+  },
   columnLastRun: {
     flexBasis: workflowExecutionsTableColumnWidths.lastRun,
   },

packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx

@@ -11,6 +11,7 @@ import {
   getExecutionIdCell,
   getStartTimeCell,
   getStatusCell,
+  getLaunchPlanName,
 } from './cells';
 import { useStyles } from './styles';
 import t, { patternKey } from './strings';
@@ -44,6 +45,12 @@ export function useWorkflowExecutionsTableColumns(
         key: 'name',
         label: t(patternKey('tableLabel', 'name')),
       },
+      {
+        cellRenderer: ({ execution }) => getLaunchPlanName(execution),
+        className: styles.columnLaunchPlan,
+        key: 'launchPlan',
+        label: t(patternKey('tableLabel', 'launchPlan')),
+      },
       {
         cellRenderer: ({ execution }) => getStatusCell(execution),
         className: styles.columnStatus,

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,
 };