From fc2f94ed4ff2cb0795ba3b65eeea57eae3a8640c Mon Sep 17 00:00:00 2001
From: yu zhao <zyu0321@gmail.com>
Date: Wed, 10 Apr 2024 13:48:57 -0400
Subject: [PATCH] feat(orchestrator): make workflow last run status as link to
 the workflow last run details page (#1488)

* make workflow last run status as link to the workflow last run details page

* Fix lint issue for WorkflowsTable component

* Make the WorkflowInstanceStatusIndicator component as a link when the lastRunId is passed from parent component
---
 .../WorkflowDefinitionDetailsCard.tsx             |  1 +
 .../WorkflowInstanceStatusIndicator.tsx           | 15 ++++++++++++++-
 .../src/components/WorkflowsTable.tsx             |  4 +++-
 .../dataFormatters/WorkflowOverviewFormatter.ts   |  2 ++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx b/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx
index bd6e392579..c9072acceb 100644
--- a/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx
+++ b/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx
@@ -62,6 +62,7 @@ const WorkflowDefinitionDetailsCard = ({
               status={
                 formattedWorkflowOverview?.lastRunStatus as ProcessInstanceStateValues
               }
+              lastRunId={formattedWorkflowOverview?.lastRunId}
             />
           ) : (
             VALUE_UNAVAILABLE
diff --git a/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx b/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
index df884bad64..076eb954af 100644
--- a/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
+++ b/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
 
+import { Link } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
+
 import DotIcon from '@material-ui/icons/FiberManualRecord';
 
 import {
@@ -9,13 +12,17 @@ import {
 
 import { VALUE_UNAVAILABLE } from '../constants';
 import { useWorkflowInstanceStateColors } from '../hooks/useWorkflowInstanceStatusColors';
+import { workflowInstanceRouteRef } from '../routes';
 
 export const WorkflowInstanceStatusIndicator = ({
   status,
+  lastRunId,
 }: {
   status?: ProcessInstanceStateValues;
+  lastRunId?: string;
 }) => {
   const iconColor = useWorkflowInstanceStateColors(status);
+  const workflowInstanceLink = useRouteRef(workflowInstanceRouteRef);
 
   if (!status) {
     return VALUE_UNAVAILABLE;
@@ -24,7 +31,13 @@ export const WorkflowInstanceStatusIndicator = ({
   return (
     <>
       <DotIcon style={{ fontSize: '0.75rem' }} className={iconColor} />{' '}
-      {capitalize(status)}
+      {lastRunId ? (
+        <Link to={workflowInstanceLink({ instanceId: lastRunId })}>
+          {capitalize(status)}
+        </Link>
+      ) : (
+        <>{capitalize(status)}</>
+      )}
     </>
   );
 };
diff --git a/plugins/orchestrator/src/components/WorkflowsTable.tsx b/plugins/orchestrator/src/components/WorkflowsTable.tsx
index b04ec02c6f..92d77ce809 100644
--- a/plugins/orchestrator/src/components/WorkflowsTable.tsx
+++ b/plugins/orchestrator/src/components/WorkflowsTable.tsx
@@ -104,9 +104,11 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
         title: 'Last run status',
         field: 'lastRunStatus',
         render: rowData =>
-          rowData.lastRunStatus !== VALUE_UNAVAILABLE ? (
+          rowData.lastRunStatus !== VALUE_UNAVAILABLE &&
+          rowData.lastRunId !== VALUE_UNAVAILABLE ? (
             <WorkflowInstanceStatusIndicator
               status={rowData.lastRunStatus as ProcessInstanceStateValues}
+              lastRunId={rowData.lastRunId}
             />
           ) : (
             VALUE_UNAVAILABLE
diff --git a/plugins/orchestrator/src/dataFormatters/WorkflowOverviewFormatter.ts b/plugins/orchestrator/src/dataFormatters/WorkflowOverviewFormatter.ts
index 9943cd3cff..a1659acee3 100644
--- a/plugins/orchestrator/src/dataFormatters/WorkflowOverviewFormatter.ts
+++ b/plugins/orchestrator/src/dataFormatters/WorkflowOverviewFormatter.ts
@@ -13,6 +13,7 @@ export interface FormattedWorkflowOverview {
   readonly name: string;
   readonly lastTriggered: string;
   readonly lastRunStatus: string;
+  readonly lastRunId: string;
   readonly category: string;
   readonly avgDuration: string;
   readonly description: string;
@@ -34,6 +35,7 @@ const WorkflowOverviewFormatter: DataFormatter<
         ? moment(data.lastTriggeredMs).toDate().toLocaleString()
         : VALUE_UNAVAILABLE,
       lastRunStatus: data.lastRunStatus ?? VALUE_UNAVAILABLE,
+      lastRunId: data.lastRunId ?? VALUE_UNAVAILABLE,
       category: data.category ?? VALUE_UNAVAILABLE,
       avgDuration: data.avgDurationMs
         ? formatDuration(data.avgDurationMs)