Fix status indicator colors for runs and instances

Author: Andrey Cheptsov

frontend/src/libs/fleet.ts

@@ -26,6 +26,18 @@ export const getStatusIconType = (status: IInstance['status']): StatusIndicatorP
     }
 };
 
+export const getStatusIconColor = (status: IInstance['status']): StatusIndicatorProps.Color | undefined => {
+    switch (status) {
+        case 'busy':
+        case 'provisioning':
+        case 'starting':
+        case 'terminating':
+            return 'blue';
+        default:
+            return undefined;
+    }
+};
+
 export const getFleetStatusIconType = (status: IFleet['status']): StatusIndicatorProps['type'] => {
     switch (status) {
         case 'submitted':

frontend/src/libs/run.ts

@@ -52,9 +52,10 @@ export const getStatusIconColor = (
     switch (status) {
         case 'submitted':
         case 'pending':
-            return 'blue';
+        case 'provisioning':
         case 'pulling':
-            return 'green';
+        case 'terminating':
+            return 'blue';
         case 'aborted':
             return 'yellow';
         case 'done':

frontend/src/pages/Instances/Details/InstanceDetails/index.tsx

@@ -6,7 +6,7 @@ import { format } from 'date-fns';
 import { Box, ColumnLayout, Container, Header, Loader, NavigateLink, StatusIndicator } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
-import { formatBackend, getStatusIconType } from 'libs/fleet';
+import { formatBackend, getStatusIconColor, getStatusIconType } from 'libs/fleet';
 import { getHealthStatusIconType, prettyEnumValue } from 'libs/instance';
 import { formatResources } from 'libs/resources';
 import { ROUTES } from 'routes';
@@ -52,9 +52,7 @@ export const InstanceDetails = () => {
                             <Box variant="awsui-key-label">{t('fleets.fleet')}</Box>
                             <div>
                                 {data.fleet_name && data.fleet_id ? (
-                                    <NavigateLink
-                                        href={ROUTES.FLEETS.DETAILS.FORMAT(data.project_name, data.fleet_id)}
-                                    >
+                                    <NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(data.project_name, data.fleet_id)}>
                                         {data.fleet_name}
                                     </NavigateLink>
                                 ) : (
@@ -66,7 +64,10 @@ export const InstanceDetails = () => {
                         <div>
                             <Box variant="awsui-key-label">{t('fleets.instances.status')}</Box>
                             <div>
-                                <StatusIndicator type={getStatusIconType(data.status)}>
+                                <StatusIndicator
+                                    type={getStatusIconType(data.status)}
+                                    colorOverride={getStatusIconColor(data.status)}
+                                >
                                     {(data.status === 'idle' || data.status === 'busy') &&
                                     data.total_blocks !== null &&
                                     data.total_blocks > 1
@@ -98,17 +99,13 @@ export const InstanceDetails = () => {
 
                         <div>
                             <Box variant="awsui-key-label">{t('fleets.instances.finished_at')}</Box>
-                            <div>
-                                {data.finished_at ? format(new Date(data.finished_at), DATE_TIME_FORMAT) : '-'}
-                            </div>
+                            <div>{data.finished_at ? format(new Date(data.finished_at), DATE_TIME_FORMAT) : '-'}</div>
                         </div>
 
                         {data.termination_reason && (
                             <div>
                                 <Box variant="awsui-key-label">{t('fleets.instances.termination_reason')}</Box>
-                                <div>
-                                    {data.termination_reason_message ?? prettyEnumValue(data.termination_reason)}
-                                </div>
+                                <div>{data.termination_reason_message ?? prettyEnumValue(data.termination_reason)}</div>
                             </div>
                         )}
 

frontend/src/pages/Instances/List/hooks/useColumnDefinitions.tsx

@@ -5,7 +5,7 @@ import { format } from 'date-fns';
 import { Icon, NavigateLink, StatusIndicator, TableProps } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
-import { formatBackend, getStatusIconType } from 'libs/fleet';
+import { formatBackend, getStatusIconColor, getStatusIconType } from 'libs/fleet';
 import { formatInstanceStatusText, getHealthStatusIconType, prettyEnumValue } from 'libs/instance';
 import { formatResources } from 'libs/resources';
 import { ROUTES } from 'routes';
@@ -50,7 +50,9 @@ export const useColumnsDefinitions = () => {
             id: 'status',
             header: t('fleets.instances.status'),
             cell: (item) => (
-                <StatusIndicator type={getStatusIconType(item.status)}>{formatInstanceStatusText(item)}</StatusIndicator>
+                <StatusIndicator type={getStatusIconType(item.status)} colorOverride={getStatusIconColor(item.status)}>
+                    {formatInstanceStatusText(item)}
+                </StatusIndicator>
             ),
         },
         {

frontend/src/pages/Project/Details/Settings/index.tsx

@@ -336,13 +336,6 @@ export const ProjectSettings: React.FC = () => {
                             headerText="CLI"
                             expanded={isExpandedCliSection}
                             onChange={({ detail }) => setIsExpandedCliSection(detail.expanded)}
-                            headerActions={
-                                <Button
-                                    iconName="script"
-                                    variant={isExpandedCliSection ? 'normal' : 'primary'}
-                                    onClick={() => setIsExpandedCliSection((prev) => !prev)}
-                                />
-                            }
                             // headerInfo={<InfoLink onFollow={() => openHelpPanel(CLI_INFO)} />}
                         >
                             <SpaceBetween size="s">

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

@@ -55,13 +55,6 @@ export const ConnectToRunWithDevEnvConfiguration: FC<{ run: IRun }> = ({ run })
             headerText="Connect"
             expanded={isExpandedConnectSection}
             onChange={({ detail }) => setIsExpandedConnectSection(detail.expanded)}
-            headerActions={
-                <Button
-                    iconName="script"
-                    variant={isExpandedConnectSection ? 'normal' : 'primary'}
-                    onClick={() => setIsExpandedConnectSection((prev) => !prev)}
-                />
-            }
         >
             {run.status === 'running' && (
                 <Wizard

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

@@ -24,13 +24,6 @@ export const ConnectToServiceRun: FC<{ run: IRun }> = ({ run }) => {
             headerText="Connect"
             expanded={isExpandedEndpointSection}
             onChange={({ detail }) => setIsExpandedEndpointSection(detail.expanded)}
-            headerActions={
-                <Button
-                    iconName="script"
-                    variant={isExpandedEndpointSection ? 'normal' : 'primary'}
-                    onClick={() => setIsExpandedEndpointSection((prev) => !prev)}
-                />
-            }
         >
             {run.status !== 'running' && (
                 <SpaceBetween size="s">

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

@@ -43,13 +43,6 @@ export const ConnectToTaskRun: FC<{ run: IRun }> = ({ run }) => {
             headerText="Connect"
             expanded={isExpandedConnectSection}
             onChange={({ detail }) => setIsExpandedConnectSection(detail.expanded)}
-            headerActions={
-                <Button
-                    iconName="script"
-                    variant={isExpandedConnectSection ? 'normal' : 'primary'}
-                    onClick={() => setIsExpandedConnectSection((prev) => !prev)}
-                />
-            }
         >
             {run.status === 'running' && (
                 <Wizard