[Feature]: Add showing information balloon for Run status #2752

Author: olgenn

frontend/src/libs/run.ts

@@ -2,6 +2,7 @@ import { get as _get } from 'lodash';
 import { StatusIndicatorProps } from '@cloudscape-design/components';
 
 import { capitalize } from 'libs';
+
 import { finishedRunStatuses } from '../pages/Runs/constants';
 
 import { IModelExtended } from '../pages/Models/List/types';
@@ -45,7 +46,7 @@ export const getStatusIconColor = (
     switch (status) {
         case 'submitted':
         case 'pending':
-                return 'blue';
+            return 'blue';
         case 'pulling':
             return 'green';
         case 'aborted':

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

@@ -4,15 +4,14 @@ import { useParams } from 'react-router-dom';
 import { get as _get } from 'lodash';
 import { format } from 'date-fns';
 
-import { Box, ColumnLayout, Container, Header, Loader, NavigateLink, StatusIndicator } from 'components';
+import { Box, ColumnLayout, Container, Header, Loader, NavigateLink } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
-import { getRunError, getRunPriority, getRunStatusMessage, getStatusIconColor, getStatusIconType } from 'libs/run';
+import { getRunError, getRunPriority } from 'libs/run';
+import { ROUTES } from 'routes';
 import { useGetRunQuery } from 'services/run';
 
-import { finishedRunStatuses } from 'pages/Runs/constants';
-
-import { ROUTES } from '../../../../routes';
+import { RunStatusIndicator } from '../../components/RunStatusIndicator';
 import {
     getRunListItemBackend,
     getRunListItemInstanceId,
@@ -50,13 +49,6 @@ export const RunDetails = () => {
 
     if (!runData) return null;
 
-    const status = finishedRunStatuses.includes(runData.status)
-        ? runData.latest_job_submission?.status ?? runData.status
-        : runData.status;
-    const terminationReason = finishedRunStatuses.includes(runData.status)
-        ? runData.latest_job_submission?.termination_reason
-        : null;
-
     return (
         <>
             <Container header={<Header variant="h2">{t('common.general')}</Header>}>
@@ -105,12 +97,7 @@ export const RunDetails = () => {
                     <div>
                         <Box variant="awsui-key-label">{t('projects.run.status')}</Box>
                         <div>
-                            <StatusIndicator
-                                type={getStatusIconType(status, terminationReason)}
-                                colorOverride={getStatusIconColor(status, terminationReason)}
-                            >
-                                {getRunStatusMessage(runData)}
-                            </StatusIndicator>
+                            <RunStatusIndicator run={runData} />
                         </div>
                     </div>
 

frontend/src/pages/Runs/List/hooks/useColumnsDefinitions.tsx

@@ -2,21 +2,13 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { format } from 'date-fns';
 
-import { NavigateLink, StatusIndicator } from 'components';
+import { NavigateLink } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
-import {
-    getRepoNameFromRun,
-    getRunError,
-    getRunPriority,
-    getRunStatusMessage,
-    getStatusIconColor,
-    getStatusIconType,
-} from 'libs/run';
+import { getRepoNameFromRun, getRunError, getRunPriority } from 'libs/run';
 import { ROUTES } from 'routes';
 
-import { finishedRunStatuses } from 'pages/Runs/constants';
-
+import { RunStatusIndicator } from '../../components/RunStatusIndicator';
 import {
     getRunListItemBackend,
     getRunListItemInstance,
@@ -73,23 +65,7 @@ export const useColumnsDefinitions = () => {
         {
             id: 'status',
             header: t('projects.run.status'),
-            cell: (item: IRun) => {
-                const status = finishedRunStatuses.includes(item.status)
-                    ? item.latest_job_submission?.status ?? item.status
-                    : item.status;
-                const terminationReason = finishedRunStatuses.includes(item.status)
-                    ? item.latest_job_submission?.termination_reason
-                    : null;
-
-                return (
-                    <StatusIndicator
-                        type={getStatusIconType(status, terminationReason)}
-                        colorOverride={getStatusIconColor(status, terminationReason)}
-                    >
-                        {getRunStatusMessage(item)}
-                    </StatusIndicator>
-                );
-            },
+            cell: (item: IRun) => <RunStatusIndicator run={item} />,
         },
         {
             id: 'error',

frontend/src/pages/Runs/components/RunStatusIndicator/index.tsx

@@ -0,0 +1,53 @@
+import React, { useRef } from 'react';
+
+import { Box, Icon, Popover, StatusIndicator } from 'components';
+
+import { getRunStatusMessage, getStatusIconColor, getStatusIconType } from 'libs/run';
+
+import { finishedRunStatuses } from '../../constants';
+
+import styles from './styles.module.scss';
+
+type RunStatusIndicatorProps = {
+    run: IRun;
+};
+
+export const RunStatusIndicator: React.FC<RunStatusIndicatorProps> = ({ run }) => {
+    const buttonRef = useRef<HTMLButtonElement>(null);
+    const status = finishedRunStatuses.includes(run.status) ? run.latest_job_submission?.status ?? run.status : run.status;
+
+    const terminationReason = finishedRunStatuses.includes(run.status) ? run.latest_job_submission?.termination_reason : null;
+
+    const isShowInfo = ['no offers', 'error'].includes(run.latest_job_submission?.status_message ?? '');
+
+    return (
+        <div className={styles.runStatus}>
+            <StatusIndicator
+                type={getStatusIconType(status, terminationReason)}
+                colorOverride={getStatusIconColor(status, terminationReason)}
+            >
+                {getRunStatusMessage(run)}
+            </StatusIndicator>
+
+            {isShowInfo && (
+                <div
+                    className={styles.infoIcon}
+                    onMouseEnter={() => buttonRef.current?.click()}
+                    onMouseLeave={() => document.dispatchEvent(new MouseEvent('mousedown'))}
+                >
+                    <Icon name="status-info" />
+
+                    <Popover
+                        dismissButton={false}
+                        position="top"
+                        size="medium"
+                        triggerType="custom"
+                        content={<Box>Type your text here</Box>}
+                    >
+                        <button ref={buttonRef} style={{ display: 'none' }} aria-hidden="true" />
+                    </Popover>
+                </div>
+            )}
+        </div>
+    );
+};

frontend/src/pages/Runs/components/RunStatusIndicator/styles.module.scss

@@ -0,0 +1,15 @@
+.runStatus {
+  display: flex;
+  align-items: center;
+  gap: 10px
+}
+
+.infoIcon {
+  position: relative;
+
+  [class*="awsui_popover"] {
+    & > div {
+      transform: translate(-8px, -14px);
+    }
+  }
+}