From 8072d73307bcbee20e1a1b2fb48b5b43bc818f3d Mon Sep 17 00:00:00 2001
From: Pradithya Aria Pura <pradithya.aria@gmail.com>
Date: Sat, 1 Apr 2023 01:52:05 +0800
Subject: [PATCH] feat: show launchplan in execution table

---
 .../Executions/Tables/LaunchPlanLink.tsx      | 27 +++++++++++++++++++
 .../Tables/WorkflowExecutionTable/cells.tsx   |  8 ++++++
 .../Tables/WorkflowExecutionTable/strings.ts  |  1 +
 .../Tables/WorkflowExecutionTable/styles.ts   |  4 +++
 .../useWorkflowExecutionsTableColumns.tsx     |  7 +++++
 .../components/Executions/Tables/constants.ts |  3 ++-
 6 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 packages/console/src/components/Executions/Tables/LaunchPlanLink.tsx

diff --git a/packages/console/src/components/Executions/Tables/LaunchPlanLink.tsx b/packages/console/src/components/Executions/Tables/LaunchPlanLink.tsx
new file mode 100644
index 000000000..5ca2f7a7c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx
index a3a3063e8..e369f2fe6 100644
--- a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/cells.tsx
+++ b/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,
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..b488dd3c0 100644
--- a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/styles.ts
+++ b/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,
   },
diff --git a/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx b/packages/console/src/components/Executions/Tables/WorkflowExecutionTable/useWorkflowExecutionsTableColumns.tsx
index a0737dbf7..f75360912 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,
+  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,
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,
 };