Repository: redhat-developer/rhdh-plugins
Pull request #613: fix(orchestrator):Add status icons
Author: login: LiorSoffer
Created: 2025-04-07T07:27:14Z | Merged: 2025-04-23T07:29:53Z

resolve [FLPATH-2253](https://issues.redhat.com/browse/FLPATH-2253)

![image](https://github.com/user-attachments/assets/fdd5c875-fd31-45b9-b323-797c335f2abc)





Diff:
diff --git a/workspaces/orchestrator/.changeset/six-cats-heal.md b/workspaces/orchestrator/.changeset/six-cats-heal.md
new file mode 100644
index 0000000000..35f7a7ad22
--- /dev/null
+++ b/workspaces/orchestrator/.changeset/six-cats-heal.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Add status icons
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowRunsTabContent.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowRunsTabContent.tsx
index 07227d5c96..9723eb0329 100644
--- a/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowRunsTabContent.tsx
+++ b/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
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
index 562c69f3be..8ee4c16c9b 100644
--- a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
+++ b/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>
   );
 };
diff --git a/workspaces/orchestrator/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts b/workspaces/orchestrator/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts
index 6cb2feb9a8..e8ba943b30 100644
--- a/workspaces/orchestrator/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts
+++ b/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,


Reviews:
user: login: mareklibra
body: Can you please check `WorkflowProgressNode.tsx` as well and fix it in case of significant inconsistencies?
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-07T08:07:15Z
user: login: LiorSoffer
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T08:31:13Z
user: login: mareklibra
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T07:07:58Z
user: login: LiorSoffer
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T08:36:21Z
user: login: mareklibra
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-22T08:47:27Z
user: login: ShiranHi
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T08:49:23Z
user: login: LiorSoffer
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-22T09:33:02Z
user: login: ShiranHi
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-22T10:17:52Z
user: login: mareklibra
state: APPROVED
author_association: MEMBER
submitted_at: 2025-04-23T07:29:45Z

Review comments:
diff_hunk: @@ -43,16 +47,50 @@ export const WorkflowInstanceStatusIndicator = ({
     return VALUE_UNAVAILABLE;
   }
 
+  let icon: React.ReactNode;
+  let title: string = '';
+  switch (status) {
+    case ProcessInstanceStatusDTO.Active:
+      icon = <CircularProgress size="1.15rem" />;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: mareklibra
body: ```suggestion
      icon = <CircularProgress size="1.15rem"  className={iconColor} />;
```
Maybe there is no obvious change but it will make the code coherent.
created_at: 2025-04-07T08:05:02Z
author_association: MEMBER
diff_hunk: @@ -43,16 +47,50 @@ export const WorkflowInstanceStatusIndicator = ({
     return VALUE_UNAVAILABLE;
   }
 
+  let icon: React.ReactNode;
+  let title: string = '';
+  switch (status) {
+    case ProcessInstanceStatusDTO.Active:
+      icon = <CircularProgress size="1.15rem" />;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: LiorSoffer
body: it bothers me as well thanks :)
created_at: 2025-04-07T08:31:13Z
author_association: CONTRIBUTOR
diff_hunk: @@ -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>;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: mareklibra
body: The last one, I promise: We use 3 dashes on other places (`---`). I don't have any preference what to choose but we should align.
created_at: 2025-04-22T07:07:58Z
author_association: MEMBER
diff_hunk: @@ -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>;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: LiorSoffer
body: We use 3 dashes for unavailable value  , I think suspended is a different scenario than unavailable
@ShiranHi @mareklibra what do you think?
created_at: 2025-04-22T08:36:21Z
author_association: CONTRIBUTOR
diff_hunk: @@ -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>;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: mareklibra
body: I would align it.
created_at: 2025-04-22T08:47:27Z
author_association: MEMBER
diff_hunk: @@ -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>;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: ShiranHi
body: Let's use the [WarningAmberOutlined](https://mui.com/material-ui/material-icons/?query=warning&theme=Outlined&selected=WarningAmberOutlined) icon for Unavailable status as [in the design](https://www.figma.com/design/XjdTCb4vDQ7L4Jz1TdHKGq/Workflow-Orchestrator?node-id=4687-1354&t=IytQq1dU2SyA5BrP-1). 
created_at: 2025-04-22T08:49:23Z
author_association: NONE
diff_hunk: @@ -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>;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: LiorSoffer
body: sorry, I was unclear. there's not an Unavailable status,
There are cases in the app when we are missing values for example (last run of workflow which was never executed, image added) in these cases we use 3 dashes.
![image](https://github.com/user-attachments/assets/fb303e16-d4ad-4c5e-8295-b46573801742)

created_at: 2025-04-22T09:33:02Z
author_association: CONTRIBUTOR
diff_hunk: @@ -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>;
path: workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
user: login: ShiranHi
body: ah, got it. Thanks for the clarification! 
We use just two dashes (--) to indicate this state.
created_at: 2025-04-22T10:17:52Z
author_association: NONE

PR comments:
user: login: rhdh-gh-app[bot]
created_at: 2025-04-07T07:27:32Z
body: ## Changed Packages

| Package Name | Package Path | Changeset Bump | Current Version |
|:-------------|:-------------|:--------------:|:----------------|
| @red-hat-developer-hub/backstage-plugin-orchestrator | workspaces/orchestrator/plugins/orchestrator | **patch** | `v2.6.3` |


<!-- changeset-feedback -->
author_association: NONE
user: login: LiorSoffer
created_at: 2025-04-07T08:41:31Z
body: @ShiranHi what do you think?
author_association: CONTRIBUTOR
user: login: ShiranHi
created_at: 2025-04-07T09:00:06Z
body: Thank you Lior, looks great!
I have few questions to match it to [the design](https://www.figma.com/design/XjdTCb4vDQ7L4Jz1TdHKGq/Workflow-Orchestrator?node-id=4687-1354&t=tFfHyXdEocG3ichj-1)?
1. Could we change the status column title to "Run status" as shown in [the design](https://www.figma.com/design/XjdTCb4vDQ7L4Jz1TdHKGq/Workflow-Orchestrator?node-id=5130-2402&t=tFfHyXdEocG3ichj-1)?
2. Is it possible to change the "Running" and "Aborted" icons to grey?
3. Can the pending icon be different?
4. Can the suspended icon be as the "Aborted" icon but in grey?
author_association: NONE
user: login: LiorSoffer
created_at: 2025-04-10T07:58:34Z
body: @ShiranHi yes! , regarding the pending icon  I couldn't find the exact one on https://v4.mui.com/components/material-icons/, is there something else there which is more suitable?
author_association: CONTRIBUTOR
user: login: ShiranHi
created_at: 2025-04-10T08:01:02Z
body: > @ShiranHi yes! , regarding the pending icon I couldn't find the exact one on https://v4.mui.com/components/material-icons/, is there something else there which is more suitable?

Can we use [this one](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:pending:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=pending&icon.size=24&icon.color=%235f6368)?
If not, let's use the "HourglassEmpty".
author_association: NONE
user: login: LiorSoffer
created_at: 2025-04-10T09:18:05Z
body: @ShiranHi please take a look
author_association: CONTRIBUTOR
user: login: ShiranHi
created_at: 2025-04-10T09:24:25Z
body: Looks great Lior, thank you so much! 
I just saw the check icon is not like in the [Figma](https://www.figma.com/design/XjdTCb4vDQ7L4Jz1TdHKGq/Workflow-Orchestrator?node-id=4682-1650&t=MVZGIEeTkegaMGbt-1) file, sorry I missed that before
author_association: NONE
user: login: LiorSoffer
created_at: 2025-04-15T15:01:45Z
body: @ShiranHi @mareklibra np, icon is fixed
author_association: CONTRIBUTOR
user: login: mareklibra
created_at: 2025-04-16T07:24:52Z
body: @ShiranHi , can we choose something from https://mui.com/material-ui/material-icons/ ?
We should not mix icons from other sources.

@LiorSoffer By choosing a MUI icon, following will not be relevant. But to give some hints: we should use an svg icon file committed to our project and use it instead of the recent approach.
author_association: MEMBER
user: login: ShiranHi
created_at: 2025-04-20T13:32:47Z
body: > @ShiranHi , can we choose something from https://mui.com/material-ui/material-icons/ ? We should not mix icons from other sources.

Yes, we can use the HourglassEmpty icon
author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-04-22T14:24:46Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=redhat-developer_rhdh-plugins&pullRequest=613) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=redhat-developer_rhdh-plugins&pullRequest=613&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=redhat-developer_rhdh-plugins&pullRequest=613&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=redhat-developer_rhdh-plugins&pullRequest=613&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=redhat-developer_rhdh-plugins&pullRequest=613&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=redhat-developer_rhdh-plugins&pullRequest=613&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=redhat-developer_rhdh-plugins&pullRequest=613)


author_association: NONE