[Feature]: Show probe statuses in the UI (#3521)

* [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

@@ -4,6 +4,7 @@ import { StatusIndicatorProps } from '@cloudscape-design/components';
 import { capitalize } from 'libs';
 
 import { finishedRunStatuses } from '../pages/Runs/constants';
+import { getJobProbesStatuses } from '../pages/Runs/Details/Jobs/List/helpers';
 
 import { IModelExtended } from '../pages/Models/List/types';
 
@@ -75,6 +76,16 @@ export const getRunError = (run: IRun): string | null => {
     return error ? capitalize(error) : null;
 };
 
+export const getRunProbeStatuses = (run: IRun): StatusIndicatorProps.Type[] => {
+    const job = run.jobs[0];
+
+    if (!job) {
+        return [];
+    }
+
+    return getJobProbesStatuses(run.jobs[0]);
+};
+
 export const getRunPriority = (run: IRun): number | null => {
     return run.run_spec.configuration?.priority ?? null;
 };

frontend/src/libs/run.ts

@@ -402,6 +402,7 @@
       "priority": "Priority",
       "provider_name": "Provider",
       "status": "Status",
+      "probe": "Probes",
       "submitted_at": "Submitted",
       "finished_at": "Finished",
       "metrics": {
@@ -477,6 +478,7 @@
         "offer": "Offer",
         "offer_description": "Select an offer for the dev environment.",
         "name": "Name",
+        "name_description": "The name of the run, e.g. 'my-dev-env'",
         "name_constraint": "Example: 'my-fleet' or 'default'. If not specified, generated automatically.",
         "name_placeholder": "Optional",
         "ide": "IDE",

frontend/src/locale/en.json

@@ -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';
@@ -48,6 +49,28 @@ export const getJobStatus = (job: IJob) => {
     return job.job_submissions?.[job.job_submissions.length - 1].status;
 };
 
+export const getJobSubmissionProbes = (job: IJob) => {
+    return job.job_submissions?.[job.job_submissions.length - 1].probes;
+};
+
+export const getJobProbesStatuses = (job: IJob): StatusIndicatorProps.Type[] => {
+    const status = getJobStatus(job);
+    const probes = getJobSubmissionProbes(job);
+
+    if (!probes?.length || status !== 'running') {
+        return [];
+    }
+
+    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) => {
     return job.job_submissions?.[job.job_submissions.length - 1].termination_reason ?? '-';
 };

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

@@ -15,6 +15,7 @@ import {
     getJobListItemRegion,
     getJobListItemResources,
     getJobListItemSpot,
+    getJobProbesStatuses,
     getJobStatus,
     getJobStatusMessage,
     getJobSubmittedAt,
@@ -67,6 +68,14 @@ export const useColumnsDefinitions = ({
                 );
             },
         },
+        {
+            id: 'probe',
+            header: t('projects.run.probe'),
+            cell: (item: IJob) => {
+                const statuses = getJobProbesStatuses(item);
+                return statuses.map((statusType, index) => <StatusIndicator key={index} type={statusType} />);
+            },
+        },
         {
             id: 'priority',
             header: t('projects.run.priority'),

frontend/src/pages/Runs/Details/Jobs/List/hooks.tsx

@@ -7,7 +7,14 @@ import { format } from 'date-fns';
 import { Box, ColumnLayout, Container, Header, Loader, NavigateLink, StatusIndicator } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
-import { getRunError, getRunPriority, getRunStatusMessage, getStatusIconColor, getStatusIconType } from 'libs/run';
+import {
+    getRunError,
+    getRunPriority,
+    getRunProbeStatuses,
+    getRunStatusMessage,
+    getStatusIconColor,
+    getStatusIconType,
+} from 'libs/run';
 import { ROUTES } from 'routes';
 import { useGetRunQuery } from 'services/run';
 
@@ -65,6 +72,14 @@ export const RunDetails = () => {
 
     const statusMessage = getRunStatusMessage(runData);
 
+    const renderRobeStatuses = () => {
+        const statuses = getRunProbeStatuses(runData);
+
+        if (!statuses.length) return '-';
+
+        return statuses.map((statusType, index) => <StatusIndicator key={index} type={statusType} />);
+    };
+
     return (
         <>
             <Container header={<Header variant="h2">{t('common.general')}</Header>}>
@@ -112,6 +127,7 @@ export const RunDetails = () => {
 
                     <div>
                         <Box variant="awsui-key-label">{t('projects.run.status')}</Box>
+
                         <div>
                             <StatusIndicator
                                 type={getStatusIconType(status, terminationReason)}
@@ -122,6 +138,13 @@ export const RunDetails = () => {
                         </div>
                     </div>
 
+                    {runData.jobs.length <= 1 && (
+                        <div>
+                            <Box variant="awsui-key-label">{t('projects.run.probe')}</Box>
+                            <div>{renderRobeStatuses()}</div>
+                        </div>
+                    )}
+
                     <div>
                         <Box variant="awsui-key-label">{t('projects.run.error')}</Box>
                         <div>{getRunError(runData) ?? '-'}</div>

frontend/src/pages/Runs/Details/RunDetails/index.tsx

@@ -171,6 +171,17 @@ declare interface IAppSpec {
     url_query_params?: { [key: string]: string };
 }
 
+declare interface IJobProbe {
+    type: 'http';
+    url: string;
+    method?: 'head' | 'post' | 'put' | 'patch' | 'delete' | 'get';
+    headers?: Array<{ name: string; value: string }>;
+    body?: string;
+    timeout: number;
+    interval: number;
+    ready_after: number;
+}
+
 declare interface IJobSpec {
     app_specs?: IAppSpec;
     commands: string[];
@@ -181,6 +192,7 @@ declare interface IJobSpec {
     job_num: number;
     max_duration?: number;
     working_dir: string;
+    probes?: IJobProbe[];
 }
 
 declare interface IGpu {
@@ -234,6 +246,7 @@ declare interface IJobSubmission {
     exit_status?: number | null;
     status_message?: string | null;
     error?: string | null;
+    probes?: Array<{ success_streak: number }>;
 }
 
 declare interface IJob {