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={ -
-
- - ), - }, - { - 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')} + + } + > +
+
+ + ), + }, + ]} + /> +
+
+ )} diff --git a/frontend/src/pages/Runs/Details/RunDetails/ConnectToRunWithDevEnvConfiguration/index.tsx b/frontend/src/pages/Runs/Details/RunDetails/ConnectToRunWithDevEnvConfiguration/index.tsx index bcd618a0d..ad2c13fb5 100644 --- a/frontend/src/pages/Runs/Details/RunDetails/ConnectToRunWithDevEnvConfiguration/index.tsx +++ b/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={ -