fix(orchestrator): Add Workflow Status to WorkflowsTable (#564)

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

Author: LiorSoffer

workspaces/orchestrator/.changeset/wise-feet-bow.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Add Workflow Status to WorkflowsTable

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowsTable.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.
@@ -13,15 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Link, TableColumn, TableProps } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
+import { Box, makeStyles, Tooltip } from '@material-ui/core';
 import FormatListBulleted from '@material-ui/icons/FormatListBulleted';
 import PlayArrow from '@material-ui/icons/PlayArrow';
+import TaskAltOutlinedIcon from '@mui/icons-material/TaskAltOutlined';
+import WarningAmberOutlinedIcon from '@mui/icons-material/WarningAmberOutlined';
 
 import {
   capitalize,
@@ -33,7 +37,7 @@ import {
   WorkflowOverviewDTO,
 } from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
 
-import { VALUE_UNAVAILABLE } from '../constants';
+import { AVAILABLE, UNAVAILABLE, VALUE_UNAVAILABLE } from '../constants';
 import WorkflowOverviewFormatter, {
   FormattedWorkflowOverview,
 } from '../dataFormatters/WorkflowOverviewFormatter';
@@ -97,7 +101,23 @@ const usePermittedToViewBatch = (
   };
 };
 
+const useStyles = makeStyles(theme => ({
+  warning: {
+    color: theme.palette.warning.main,
+  },
+  error: {
+    color: theme.palette.error.main,
+  },
+  success: {
+    color: theme.palette.success.main,
+  },
+  info: {
+    color: theme.palette.primary.main,
+  },
+}));
+
 export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
+  const styles = useStyles();
   const navigate = useNavigate();
   const definitionLink = useRouteRef(workflowRouteRef);
   const definitionRunsLink = useRouteRef(workflowRunsRouteRef);
@@ -205,6 +225,35 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
         field: 'category',
         render: rowData => capitalize(rowData.category),
       },
+      {
+        title: 'Workflow status',
+        field: 'avialability',
+        render: rowData => {
+          if (rowData.availablity === AVAILABLE)
+            return (
+              <Box display="flex" alignItems="center">
+                <TaskAltOutlinedIcon
+                  sx={{ fontSize: 15, marginRight: 0.5 }}
+                  className={styles.success}
+                />
+                {rowData.availablity}
+              </Box>
+            );
+          else if (rowData.availablity === UNAVAILABLE)
+            return (
+              <Tooltip title="Workflow is currently down or in an error state">
+                <Box display="flex" alignItems="center">
+                  <WarningAmberOutlinedIcon
+                    sx={{ fontSize: 15, marginRight: 0.5 }}
+                    className={styles.warning}
+                  />
+                  {rowData.availablity}
+                </Box>
+              </Tooltip>
+            );
+          return rowData.availablity;
+        },
+      },
       { title: 'Last run', field: 'lastTriggered' },
       {
         title: 'Last run status',
@@ -224,7 +273,13 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
       },
       { title: 'Description', field: 'description', minWidth: '25vw' },
     ],
-    [canViewInstance, canViewWorkflow, definitionLink],
+    [
+      canViewInstance,
+      canViewWorkflow,
+      definitionLink,
+      styles.success,
+      styles.warning,
+    ],
   );
 
   const options = useMemo<TableProps['options']>(

workspaces/orchestrator/plugins/orchestrator/src/constants.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,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const VALUE_UNAVAILABLE = '---' as const;
 
+export const VALUE_UNAVAILABLE = '---' as const;
+export const AVAILABLE = 'Available';
+export const UNAVAILABLE = 'Unavailable';
 export const SHORT_REFRESH_INTERVAL = 5000;
 export const LONG_REFRESH_INTERVAL = 15000;
 export const DEFAULT_TABLE_PAGE_SIZE = 20;

workspaces/orchestrator/plugins/orchestrator/src/dataFormatters/WorkflowOverviewFormatter.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,14 +13,15 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import moment from 'moment';
 
 import {
   WorkflowFormatDTO,
   WorkflowOverviewDTO,
 } from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
 
-import { VALUE_UNAVAILABLE } from '../constants';
+import { AVAILABLE, UNAVAILABLE, VALUE_UNAVAILABLE } from '../constants';
 import DataFormatter from './DataFormatter';
 
 export interface FormattedWorkflowOverview {
@@ -32,8 +33,15 @@ export interface FormattedWorkflowOverview {
   readonly category: string;
   readonly description: string;
   readonly format: WorkflowFormatDTO;
+  readonly availablity?: string;
 }
 
+const formatIsAvailable = (availablity: boolean | undefined) => {
+  if (availablity === true) return AVAILABLE;
+  else if (availablity === false) return UNAVAILABLE;
+  return VALUE_UNAVAILABLE;
+};
+
 const WorkflowOverviewFormatter: DataFormatter<
   WorkflowOverviewDTO,
   FormattedWorkflowOverview
@@ -50,6 +58,7 @@ const WorkflowOverviewFormatter: DataFormatter<
       category: data.category ?? VALUE_UNAVAILABLE,
       description: data.description ?? VALUE_UNAVAILABLE,
       format: data.format,
+      availablity: formatIsAvailable(data.isAvailable),
     };
   },
 };