diff --git a/frontend/src/libs/fleet.ts b/frontend/src/libs/fleet.ts
index c3a791235..3a56e23b9 100644
--- a/frontend/src/libs/fleet.ts
+++ b/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':
diff --git a/frontend/src/libs/run.ts b/frontend/src/libs/run.ts
index 60f4a5108..d0773e15b 100644
--- a/frontend/src/libs/run.ts
+++ b/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':
diff --git a/frontend/src/pages/Instances/Details/InstanceDetails/index.tsx b/frontend/src/pages/Instances/Details/InstanceDetails/index.tsx
index 408698b77..6b048729a 100644
--- a/frontend/src/pages/Instances/Details/InstanceDetails/index.tsx
+++ b/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 = () => {
{t('fleets.fleet')}
{data.fleet_name && data.fleet_id ? (
-
+
{data.fleet_name}
) : (
@@ -66,7 +64,10 @@ export const InstanceDetails = () => {
{t('fleets.instances.status')}
-
+
{(data.status === 'idle' || data.status === 'busy') &&
data.total_blocks !== null &&
data.total_blocks > 1
@@ -98,17 +99,13 @@ export const InstanceDetails = () => {
{t('fleets.instances.finished_at')}
-
- {data.finished_at ? format(new Date(data.finished_at), DATE_TIME_FORMAT) : '-'}
-
+
{data.finished_at ? format(new Date(data.finished_at), DATE_TIME_FORMAT) : '-'}
{data.termination_reason && (
{t('fleets.instances.termination_reason')}
-
- {data.termination_reason_message ?? prettyEnumValue(data.termination_reason)}
-
+
{data.termination_reason_message ?? prettyEnumValue(data.termination_reason)}
)}
diff --git a/frontend/src/pages/Instances/List/hooks/useColumnDefinitions.tsx b/frontend/src/pages/Instances/List/hooks/useColumnDefinitions.tsx
index c00834fb2..98b1ddd2b 100644
--- a/frontend/src/pages/Instances/List/hooks/useColumnDefinitions.tsx
+++ b/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) => (
- {formatInstanceStatusText(item)}
+
+ {formatInstanceStatusText(item)}
+
),
},
{
diff --git a/frontend/src/pages/Project/Details/Settings/index.tsx b/frontend/src/pages/Project/Details/Settings/index.tsx
index 32e5cbb17..e93b51318 100644
--- a/frontend/src/pages/Project/Details/Settings/index.tsx
+++ b/frontend/src/pages/Project/Details/Settings/index.tsx
@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { debounce } from 'lodash';
import { ExpandableSection, Tabs } from '@cloudscape-design/components';
-import Wizard from '@cloudscape-design/components/wizard';
import { FetchBaseQueryError } from '@reduxjs/toolkit/query';
import {
@@ -316,8 +315,6 @@ export const ProjectSettings: React.FC = () => {
});
};
- const [activeStepIndex, setActiveStepIndex] = React.useState(0);
-
const projectDontHasFleet = !projectHavingFleetMap?.[paramProjectName];
if (isLoadingPage)
@@ -339,157 +336,115 @@ export const ProjectSettings: React.FC = () => {
headerText="CLI"
expanded={isExpandedCliSection}
onChange={({ detail }) => setIsExpandedCliSection(detail.expanded)}
- headerActions={
-