[Feature]: Show probe statuses in the UI #3204

Author: olgenn

frontend/package-lock.json

@@ -101,7 +101,7 @@
     "@cloudscape-design/chat-components": "^1.0.62",
     "@cloudscape-design/collection-hooks": "^1.0.74",
     "@cloudscape-design/component-toolkit": "^1.0.0-beta.120",
-    "@cloudscape-design/components": "^3.0.1091",
+    "@cloudscape-design/components": "^3.0.1188",
     "@cloudscape-design/design-tokens": "^3.0.60",
     "@cloudscape-design/global-styles": "^1.0.45",
     "@hookform/resolvers": "^2.9.10",

frontend/package.json

@@ -1,6 +1,9 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import Link, { LinkProps } from '@cloudscape-design/components/link';
+
+import styles from './style.module.scss';
+
 export const NavigateLink: React.FC<LinkProps> = ({ onFollow, ...props }) => {
     const navigate = useNavigate();
     const onFollowHandler: LinkProps['onFollow'] = (event) => {
@@ -10,5 +13,9 @@ export const NavigateLink: React.FC<LinkProps> = ({ onFollow, ...props }) => {
         if (event.detail.href) navigate(event.detail.href);
     };
 
-    return <Link {...props} onFollow={onFollowHandler} />;
+    return (
+        <span className={styles.link}>
+            <Link {...props} onFollow={onFollowHandler} />
+        </span>
+    );
 };

frontend/src/components/NavigateLink/index.tsx

@@ -0,0 +1,5 @@
+.link {
+  & > a {
+    text-decoration: underline !important;
+  }
+}

frontend/src/components/NavigateLink/style.module.scss

@@ -1,4 +1,5 @@
 import { format } from 'date-fns';
+import type { StatusIndicatorProps } from '@cloudscape-design/components/status-indicator';
 
 import { DATE_TIME_FORMAT } from 'consts';
 import { capitalize } from 'libs';
@@ -52,25 +53,22 @@ export const getJobSubmissionProbes = (job: IJob) => {
     return job.job_submissions?.[job.job_submissions.length - 1].probes;
 };
 
-export const getJobProbesStatuses = (job: IJob) => {
+export const getJobProbesStatuses = (job: IJob): StatusIndicatorProps.Type[] => {
     const status = getJobStatus(job);
     const probes = getJobSubmissionProbes(job);
 
     if (!probes?.length || status !== 'running') {
-        return null;
+        return [];
     }
 
-    return probes
-        ?.map((probe, index) => {
-            if (job.job_spec?.probes?.[index] && probe.success_streak >= job.job_spec.probes[index].ready_after) {
-                return '✓';
-            } else if (probe.success_streak > 0) {
-                return '~';
-            } else {
-                return '×';
-            }
-        })
-        .join('');
+    return probes.map((probe, index) => {
+        if (job.job_spec?.probes?.[index] && probe.success_streak >= job.job_spec.probes[index].ready_after) {
+            return 'success';
+        } else if (probe.success_streak > 0) {
+            return 'in-progress';
+        }
+        return 'not-started';
+    });
 };
 
 export const getJobTerminationReason = (job: IJob) => {

frontend/src/pages/Runs/Details/Jobs/List/helpers.ts

@@ -71,7 +71,10 @@ export const useColumnsDefinitions = ({
         {
             id: 'probe',
             header: t('projects.run.probe'),
-            cell: (item: IJob) => getJobProbesStatuses(item),
+            cell: (item: IJob) => {
+                const statuses = getJobProbesStatuses(item);
+                return statuses.map((statusType, index) => <StatusIndicator key={index} type={statusType} />);
+            },
         },
         {
             id: 'priority',