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

Author: yzhao583

plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx

@@ -62,6 +62,7 @@ const WorkflowDefinitionDetailsCard = ({
               status={
                 formattedWorkflowOverview?.lastRunStatus as ProcessInstanceStateValues
               }
+              lastRunId={formattedWorkflowOverview?.lastRunId}
             />
           ) : (
             VALUE_UNAVAILABLE

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)}</>
+      )}
     </>
   );
 };

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

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)