From 3f47827353feda6d1f961809928dee5eb6c0263b Mon Sep 17 00:00:00 2001 From: Andrey Cheptsov Date: Wed, 11 Mar 2026 15:16:11 +0100 Subject: [PATCH 1/2] Simplify CLI section in project settings --- .../pages/Project/Details/Settings/index.tsx | 250 ++++++++---------- 1 file changed, 106 insertions(+), 144 deletions(-) diff --git a/frontend/src/pages/Project/Details/Settings/index.tsx b/frontend/src/pages/Project/Details/Settings/index.tsx index 32e5cbb17..06fbf3fe4 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) @@ -348,148 +345,113 @@ export const ProjectSettings: React.FC = () => { } // headerInfo={ openHelpPanel(CLI_INFO)} />} > - `Step ${stepNumber}`, - collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`, - skipToButtonLabel: (step) => `Skip to ${step.title}`, - navigationAriaLabel: 'Steps', - // cancelButton: "Cancel", - previousButton: 'Previous', - nextButton: 'Next', - optional: 'required', - }} - onNavigate={({ detail }) => setActiveStepIndex(detail.requestedStepIndex)} - activeStepIndex={activeStepIndex} - onSubmit={() => setIsExpandedCliSection(false)} - submitButtonText="Done" - allowSkipTo={true} - steps={[ - { - title: 'Install', - // info: openHelpPanel(CLI_INFO)} />, - description: 'To use dstack, install the CLI on your local machine.', - content: ( - - -
- - uv tool install dstack -U - - -
- - {t('common.copied')} - - } - > -
-
- - ), - }, - { - label: 'pip', - id: 'pip', - content: ( - <> -
- - pip install dstack -U - - -
- - {t('common.copied')} - - } - > -
-
- - ), - }, - ]} + + To use dstack with this project, run the following command. + +
+ + {configCliCommand} + +
+ {t('common.copied')}} + > +
- -
- ), - isOptional: true, - }, - ]} - /> + + + + + + + + + To use dstack, install the CLI on your local machine. + + +
+ uv tool install dstack -U + +
+ + {t('common.copied')} + + } + > +
+
+ + ), + }, + { + label: 'pip', + id: 'pip', + content: ( + <> +
+ pip install dstack -U + +
+ + {t('common.copied')} + + } + > +
+
+ + ), + }, + ]} + /> + + + )} From a02366217ec9f411a7170925d0cf9656602de5f2 Mon Sep 17 00:00:00 2001 From: Andrey Cheptsov Date: Wed, 11 Mar 2026 15:44:50 +0100 Subject: [PATCH 2/2] Fix status indicator colors for runs and instances --- frontend/src/libs/fleet.ts | 12 ++++++++++++ frontend/src/libs/run.ts | 5 +++-- .../Details/InstanceDetails/index.tsx | 19 ++++++++----------- .../List/hooks/useColumnDefinitions.tsx | 6 ++++-- .../pages/Project/Details/Settings/index.tsx | 7 ------- .../index.tsx | 7 ------- .../RunDetails/ConnectToServiceRun/index.tsx | 7 ------- .../RunDetails/ConnectToTaskRun/index.tsx | 7 ------- 8 files changed, 27 insertions(+), 43 deletions(-) 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 06fbf3fe4..e93b51318 100644 --- a/frontend/src/pages/Project/Details/Settings/index.tsx +++ b/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={ -