Skip to content

Commit d03f5ef

Browse files
olgennolgenn
committed
implemented was using new api for checking fleets
1 parent dd927f9 commit d03f5ef

File tree

11 files changed

+96
-140
lines changed

11 files changed

+96
-140
lines changed

‎frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
99
skip: !!projectNames?.length,
1010
});
1111

12-
const { data: noFleetsProjectsData } = useGetOnlyNoFleetsProjectsQuery(undefined, {
13-
skip: !!projectNames?.length,
14-
});
12+
const { data: noFleetsProjectsData } = useGetOnlyNoFleetsProjectsQuery();
1513

1614
const projectNameForChecking = useMemo<IProject['project_name'][]>(() => {
1715
if (projectNames) {

‎frontend/src/pages/Fleets/List/index.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { ButtonProps } from '@cloudscape-design/components/button';
43

5-
import { Alert, Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
4+
import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
65

76
import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
87
import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
98
import { useCheckingForFleetsInProjects } from 'hooks/useCheckingForFleetsInProjectsOfMember';
10-
import { goToUrl } from 'libs';
119
import { ROUTES } from 'routes';
1210
import { useLazyGetFleetsQuery } from 'services/fleet';
1311

12+
import { NoFleetProjectAlert } from 'pages/Project/components/NoFleetProjectAlert';
13+
1414
import { useColumnsDefinitions, useEmptyMessages, useFilters } from './hooks';
1515
import { useDeleteFleet } from './useDeleteFleet';
1616

@@ -74,11 +74,6 @@ export const FleetList: React.FC = () => {
7474

7575
const projectDontHasFleet = Object.keys(projectHavingFleetMap).find((project) => !projectHavingFleetMap[project]);
7676

77-
const onCreateAFleet: ButtonProps['onClick'] = (event) => {
78-
event.preventDefault();
79-
goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
80-
};
81-
8277
return (
8378
<Table
8479
{...collectionProps}
@@ -91,22 +86,11 @@ export const FleetList: React.FC = () => {
9186
selectionType="multi"
9287
header={
9388
<>
94-
{projectDontHasFleet && (
95-
<div className={styles.alertBox}>
96-
<Alert
97-
header={t('fleets.no_alert.title')}
98-
type="info"
99-
action={
100-
<Button iconName="external" formAction="none" onClick={onCreateAFleet}>
101-
{t('fleets.no_alert.button_title')}
102-
</Button>
103-
}
104-
>
105-
The project <code>{projectDontHasFleet}</code> has no fleets. Create one before submitting a
106-
run.
107-
</Alert>
108-
</div>
109-
)}
89+
<NoFleetProjectAlert
90+
className={styles.noFleetAlert}
91+
projectName={projectDontHasFleet ?? ''}
92+
show={!!projectDontHasFleet}
93+
/>
11094

11195
<Header
11296
variant="awsui-h1-sticky"

‎frontend/src/pages/Fleets/List/styles.module.scss‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
1-
.alertBox {
1+
.noFleetAlert {
22
margin-bottom: 12px;
3-
4-
:global {
5-
& [class^="awsui_alert"] {
6-
& [class^="awsui_action-slot"] {
7-
display: flex;
8-
align-items: center;
9-
}
10-
}
11-
}
123
}
134
.filters {
145
display: flex;

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

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import { useTranslation } from 'react-i18next';
33
import { useNavigate, useParams } from 'react-router-dom';
44
import { debounce } from 'lodash';
55
import { ExpandableSection, Tabs } from '@cloudscape-design/components';
6-
import { ButtonProps } from '@cloudscape-design/components/button';
76
import Wizard from '@cloudscape-design/components/wizard';
87

98
import {
10-
Alert,
119
Box,
1210
Button,
1311
ButtonWithConfirmation,
@@ -24,7 +22,8 @@ import {
2422
import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
2523

2624
import { useBreadcrumbs, useNotifications } from 'hooks';
27-
import { goToUrl, riseRouterException } from 'libs';
25+
import { useCheckingForFleetsInProjects } from 'hooks/useCheckingForFleetsInProjectsOfMember';
26+
import { riseRouterException } from 'libs';
2827
import { copyToClipboard } from 'libs';
2928
import { ROUTES } from 'routes';
3029
import { useGetProjectQuery, useUpdateProjectMembersMutation, useUpdateProjectMutation } from 'services/project';
@@ -37,9 +36,9 @@ import { useDeleteProject } from 'pages/Project/hooks/useDeleteProject';
3736
import { ProjectMembers } from 'pages/Project/Members';
3837
import { getProjectRoleByUserName } from 'pages/Project/utils';
3938

40-
import { useCheckingForFleetsInProjects } from '../../../../hooks/useCheckingForFleetsInProjectsOfMember';
4139
import { useBackendsTable } from '../../Backends/hooks';
4240
import { BackendsTable } from '../../Backends/Table';
41+
import { NoFleetProjectAlert } from '../../components/NoFleetProjectAlert';
4342
import { GatewaysTable } from '../../Gateways';
4443
import { useGatewaysTable } from '../../Gateways/hooks';
4544
import { ProjectSecrets } from '../../Secrets';
@@ -189,11 +188,6 @@ export const ProjectSettings: React.FC = () => {
189188

190189
const projectDontHasFleet = !projectHavingFleetMap?.[paramProjectName];
191190

192-
const onCreateAFleet: ButtonProps['onClick'] = (event) => {
193-
event.preventDefault();
194-
goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
195-
};
196-
197191
if (isLoadingPage)
198192
return (
199193
<Container>
@@ -205,21 +199,7 @@ export const ProjectSettings: React.FC = () => {
205199
<>
206200
{data && backendsData && gatewaysData && (
207201
<SpaceBetween size="l">
208-
{projectDontHasFleet && (
209-
<div className={styles.alertBox}>
210-
<Alert
211-
header={t('fleets.no_alert.title')}
212-
type="info"
213-
action={
214-
<Button iconName="external" formAction="none" onClick={onCreateAFleet}>
215-
{t('fleets.no_alert.button_title')}
216-
</Button>
217-
}
218-
>
219-
The project <code>{paramProjectName}</code> has no fleets. Create one before submitting a run.
220-
</Alert>
221-
</div>
222-
)}
202+
<NoFleetProjectAlert projectName={paramProjectName} show={projectDontHasFleet} dismissible />
223203

224204
{isProjectMember && (
225205
<ExpandableSection

‎frontend/src/pages/Project/Details/Settings/styles.module.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,6 @@
88
width: 300px;
99
}
1010

11-
.alertBox {
12-
:global {
13-
& [class^="awsui_alert"] {
14-
& [class^="awsui_action-slot"] {
15-
display: flex;
16-
align-items: center;
17-
}
18-
}
19-
}
20-
}
21-
2211
.codeWrapper {
2312
position: relative;
2413

‎frontend/src/pages/Project/components/NoFleetProjectAlert/index.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import cn from 'classnames';
4+
5+
import type { ButtonProps } from 'components';
6+
import { Alert, AlertProps, Button } from 'components';
7+
8+
import { useLocalStorageState } from 'hooks/useLocalStorageState';
9+
import { goToUrl } from 'libs';
10+
11+
import styles from './styles.module.scss';
12+
13+
type NoFleetProjectAlertProps = {
14+
show?: boolean;
15+
projectName: string;
16+
className?: string;
17+
dismissible?: boolean;
18+
};
19+
20+
export const NoFleetProjectAlert: React.FC<NoFleetProjectAlertProps> = ({ projectName, show, className, dismissible }) => {
21+
const { t } = useTranslation();
22+
const [dontShowAgain, setDontShowAgain] = useLocalStorageState(`noFleetProjectAlert-${projectName}`, false);
23+
24+
const onCreateAFleet: ButtonProps['onClick'] = (event) => {
25+
event.preventDefault();
26+
goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
27+
};
28+
29+
const onDismiss: AlertProps['onDismiss'] = () => setDontShowAgain(true);
30+
31+
if (!show || dontShowAgain) {
32+
return null;
33+
}
34+
35+
return (
36+
<div className={cn(styles.alertBox, className)}>
37+
<Alert
38+
header={t('fleets.no_alert.title')}
39+
type="info"
40+
dismissible={dismissible}
41+
onDismiss={onDismiss}
42+
action={
43+
<Button iconName="external" formAction="none" onClick={onCreateAFleet}>
44+
{t('fleets.no_alert.button_title')}
45+
</Button>
46+
}
47+
>
48+
The project <code>{projectName}</code> has no fleets. Create one before submitting a run.
49+
</Alert>
50+
</div>
51+
);
52+
};

‎frontend/src/pages/Project/components/NoFleetProjectAlert/styles.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.alertBox {
2+
:global {
3+
& [class^="awsui_alert"] {
4+
& [class^="awsui_action-slot"] {
5+
display: flex;
6+
align-items: center;
7+
}
8+
}
9+
}
10+
}

‎frontend/src/pages/Runs/CreateDevEnvironment/index.tsx‎

Lines changed: 9 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
55
import cn from 'classnames';
66
import * as yup from 'yup';
77
import { Box, Link, WizardProps } from '@cloudscape-design/components';
8-
import { ButtonProps } from '@cloudscape-design/components/button';
98
import { CardsProps } from '@cloudscape-design/components/cards';
109

11-
import { Alert, Button, TabsProps, ToggleProps } from 'components';
10+
import { TabsProps, ToggleProps } from 'components';
1211
import { Container, FormCodeEditor, FormField, FormInput, FormSelect, SpaceBetween, Tabs, Toggle, Wizard } from 'components';
1312

1413
import { useBreadcrumbs, useNotifications } from 'hooks';
15-
import { getServerError, goToUrl } from 'libs';
14+
import { useCheckingForFleetsInProjects } from 'hooks/useCheckingForFleetsInProjectsOfMember';
15+
import { getServerError } from 'libs';
1616
import { ROUTES } from 'routes';
1717
import { useApplyRunMutation } from 'services/run';
1818

1919
import { OfferList } from 'pages/Offers/List';
20+
import { NoFleetProjectAlert } from 'pages/Project/components/NoFleetProjectAlert';
2021

2122
import { useGenerateYaml } from './hooks/useGenerateYaml';
2223
import { useGetRunSpecFromYaml } from './hooks/useGetRunSpecFromYaml';
23-
import { useCheckingForFleetsInProjects } from '../../../hooks/useCheckingForFleetsInProjectsOfMember';
2424
import { FORM_FIELD_NAMES } from './constants';
2525

2626
import { IRunEnvironmentFormKeys, IRunEnvironmentFormValues } from './types';
@@ -284,28 +284,13 @@ export const CreateDevEnvironment: React.FC = () => {
284284
setValue('config_yaml', yaml);
285285
}, [yaml]);
286286

287-
const onCreateAFleet: ButtonProps['onClick'] = (event) => {
288-
event.preventDefault();
289-
goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
290-
};
291-
292287
return (
293288
<form className={cn({ [styles.wizardForm]: activeStepIndex === 0 })} onSubmit={handleSubmit(onSubmit)}>
294-
{projectDontHasFleets && (
295-
<div className={styles.alertBox}>
296-
<Alert
297-
header={t('fleets.no_alert.title')}
298-
type="info"
299-
action={
300-
<Button iconName="external" formAction="none" onClick={onCreateAFleet}>
301-
{t('fleets.no_alert.button_title')}
302-
</Button>
303-
}
304-
>
305-
The project <code>{selectedProject}</code> has no fleets. Create one before submitting a run.
306-
</Alert>
307-
</div>
308-
)}
289+
<NoFleetProjectAlert
290+
className={styles.noFleetAlert}
291+
projectName={selectedProject ?? ''}
292+
show={projectDontHasFleets}
293+
/>
309294

310295
<Wizard
311296
activeStepIndex={activeStepIndex}

‎frontend/src/pages/Runs/CreateDevEnvironment/styles.module.scss‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
11
@use '@cloudscape-design/design-tokens/index' as awsui;
22

3-
.alertBox {
3+
.noFleetAlert {
44
margin: 12px 0 0;
5-
6-
:global {
7-
& [class^="awsui_alert"] {
8-
& [class^="awsui_action-slot"] {
9-
display: flex;
10-
align-items: center;
11-
}
12-
}
13-
}
145
}
156

167
.wizardForm {

‎frontend/src/pages/Runs/List/index.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useNavigate } from 'react-router-dom';
44
import { ButtonDropdownProps } from '@cloudscape-design/components';
5-
import { ButtonProps } from '@cloudscape-design/components/button';
65

7-
import { Alert, Button, ButtonDropdown, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
6+
import { Button, ButtonDropdown, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
87

98
import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
109
import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
1110
import { useCheckingForFleetsInProjects } from 'hooks/useCheckingForFleetsInProjectsOfMember';
12-
import { goToUrl } from 'libs';
1311
import { ROUTES } from 'routes';
1412
import { useLazyGetRunsQuery } from 'services/run';
1513

14+
import { NoFleetProjectAlert } from 'pages/Project/components/NoFleetProjectAlert';
15+
1616
import { useRunListPreferences } from './Preferences/useRunListPreferences';
1717
import {
1818
useAbortRuns,
@@ -124,11 +124,6 @@ export const RunList: React.FC = () => {
124124

125125
const projectDontHasFleet = Object.keys(projectHavingFleetMap).find((project) => !projectHavingFleetMap[project]);
126126

127-
const onCreateAFleet: ButtonProps['onClick'] = (event) => {
128-
event.preventDefault();
129-
goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
130-
};
131-
132127
return (
133128
<Table
134129
{...collectionProps}
@@ -143,22 +138,11 @@ export const RunList: React.FC = () => {
143138
preferences={<Preferences />}
144139
header={
145140
<>
146-
{projectDontHasFleet && (
147-
<div className={styles.alertBox}>
148-
<Alert
149-
header={t('fleets.no_alert.title')}
150-
type="info"
151-
action={
152-
<Button iconName="external" formAction="none" onClick={onCreateAFleet}>
153-
{t('fleets.no_alert.button_title')}
154-
</Button>
155-
}
156-
>
157-
The project <code>{projectDontHasFleet}</code> has no fleets. Create one before submitting a
158-
run.
159-
</Alert>
160-
</div>
161-
)}
141+
<NoFleetProjectAlert
142+
className={styles.noFleetAlert}
143+
projectName={projectDontHasFleet ?? ''}
144+
show={!!projectDontHasFleet}
145+
/>
162146

163147
<Header
164148
variant="awsui-h1-sticky"

0 commit comments

Comments
 (0)