fix(orchestrator):Add status icons (#613)

Signed-off-by: Lior Soffer <liorsoffer1@gmail.com>

Author: LiorSoffer

workspaces/orchestrator/.changeset/six-cats-heal.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Add status icons

workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowRunsTabContent.tsx

@@ -265,7 +265,7 @@ export const WorkflowRunsTabContent = () => {
             },
           ]),
       {
-        title: 'Status',
+        title: 'Run Status',
         field: 'state',
         render: (data: WorkflowRunDetail) => (
           <WorkflowInstanceStatusIndicator

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -18,7 +18,10 @@ 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 { CircularProgress } from '@material-ui/core';
+import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined';
+import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined';
+import HourglassEmptyOutlinedIcon from '@material-ui/icons/HourglassEmptyOutlined';
 
 import {
   capitalize,
@@ -43,16 +46,50 @@ export const WorkflowInstanceStatusIndicator = ({
     return VALUE_UNAVAILABLE;
   }
 
+  let icon: React.ReactNode;
+  let title: string = '';
+  switch (status) {
+    case ProcessInstanceStatusDTO.Active:
+      icon = <CircularProgress size="1.15rem" className={iconColor} />;
+      title = 'Running';
+      break;
+    case ProcessInstanceStatusDTO.Completed:
+      icon = <CheckCircleOutlinedIcon className={iconColor} />;
+      title = 'Completed';
+      break;
+    case ProcessInstanceStatusDTO.Suspended:
+      icon = <b className={iconColor}>--</b>;
+      title = 'Suspended';
+      break;
+    case ProcessInstanceStatusDTO.Aborted:
+      icon = <b className={iconColor}>--</b>;
+      title = 'Aborted';
+      break;
+    case ProcessInstanceStatusDTO.Error:
+      icon = <ErrorOutlineOutlinedIcon className={iconColor} />;
+      title = 'Failed';
+      break;
+    case ProcessInstanceStatusDTO.Pending:
+      icon = <HourglassEmptyOutlinedIcon className={iconColor} />;
+      title = 'Pending';
+      break;
+    default:
+      icon = VALUE_UNAVAILABLE;
+      break;
+  }
+
   return (
-    <>
-      <DotIcon style={{ fontSize: '0.75rem' }} className={iconColor} />{' '}
+    <div
+      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+    >
+      {icon}
       {lastRunId ? (
         <Link to={workflowInstanceLink({ instanceId: lastRunId })}>
-          {capitalize(status)}
+          {capitalize(title)}
         </Link>
       ) : (
-        <>{capitalize(status)}</>
+        <>{capitalize(title)}</>
       )}
-    </>
+    </div>
   );
 };

workspaces/orchestrator/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2024 The Backstage Authors
+ * Copyright Red Hat, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { makeStyles } from '@material-ui/core';
 
 import { ProcessInstanceStatusDTO } from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
@@ -21,16 +22,16 @@ const useStyles = makeStyles(
   theme =>
     ({
       [ProcessInstanceStatusDTO.Active]: {
-        color: theme.palette.primary.main,
+        color: theme.palette.grey[500],
       },
       [ProcessInstanceStatusDTO.Completed]: {
         color: theme.palette.success.main,
       },
       [ProcessInstanceStatusDTO.Suspended]: {
-        color: theme.palette.warning.main,
+        color: theme.palette.grey[500],
       },
       [ProcessInstanceStatusDTO.Aborted]: {
-        color: theme.palette.error.main,
+        color: theme.palette.grey[500],
       },
       [ProcessInstanceStatusDTO.Error]: {
         color: theme.palette.error.main,