implemented was using new api for checking fleets

Author: olgenn

frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts

@@ -1,17 +1,22 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
-import { useLazyGetFleetsQuery } from '../services/fleet';
 import { useGetProjectsQuery } from '../services/project';
 
 type Args = { projectNames?: IProject['project_name'][] };
 
 export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
-    const [projectFleetMap, setProjectFleetMap] = useState<Record<IProject['project_name'], boolean>>({});
     const { data: projectsData } = useGetProjectsQuery(undefined, {
         skip: !!projectNames?.length,
     });
 
-    const [getFleets] = useLazyGetFleetsQuery();
+    const { data: noFleetsProjectsData } = useGetProjectsQuery(
+        {
+            only_no_fleets: true,
+        },
+        {
+            skip: !!projectNames?.length,
+        },
+    );
 
     const projectNameForChecking = useMemo<IProject['project_name'][]>(() => {
         if (projectNames) {
@@ -25,27 +30,15 @@ export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
         return [];
     }, [projectNames, projectsData]);
 
-    useEffect(() => {
-        const fetchFleets = async () => {
-            const map: Record<IProject['project_name'], boolean> = {};
-
-            await Promise.all(
-                projectNameForChecking.map((projectName) =>
-                    getFleets({
-                        limit: 1,
-                        project_name: projectName,
-                        only_active: true,
-                    })
-                        .unwrap()
-                        .then((data) => (map[projectName] = Boolean(data.length))),
-                ),
-            );
-
-            setProjectFleetMap(map);
-        };
-
-        fetchFleets();
-    }, [projectNameForChecking]);
-
-    return projectFleetMap;
+    const projectHavingFleetMap = useMemo<Record<IProject['project_name'], boolean>>(() => {
+        const map: Record<IProject['project_name'], boolean> = {};
+
+        projectNameForChecking.forEach((projectName) => {
+            map[projectName] = !noFleetsProjectsData?.some((i) => i.project_name === projectName);
+        });
+
+        return map;
+    }, [projectNameForChecking, noFleetsProjectsData]);
+
+    return projectHavingFleetMap;
 };

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

@@ -5,20 +5,22 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import cn from 'classnames';
 import * as yup from 'yup';
 import { Box, Link, WizardProps } from '@cloudscape-design/components';
+import { ButtonProps } from '@cloudscape-design/components/button';
 import { CardsProps } from '@cloudscape-design/components/cards';
 
-import type { TabsProps, ToggleProps } from 'components';
+import { Alert, Button, TabsProps, ToggleProps } from 'components';
 import { Container, FormCodeEditor, FormField, FormInput, FormSelect, SpaceBetween, Tabs, Toggle, Wizard } from 'components';
 
 import { useBreadcrumbs, useNotifications } from 'hooks';
-import { getServerError } from 'libs';
+import { getServerError, goToUrl } from 'libs';
 import { ROUTES } from 'routes';
 import { useApplyRunMutation } from 'services/run';
 
 import { OfferList } from 'pages/Offers/List';
 
 import { useGenerateYaml } from './hooks/useGenerateYaml';
 import { useGetRunSpecFromYaml } from './hooks/useGetRunSpecFromYaml';
+import { useCheckingForFleetsInProjects } from '../../../hooks/useCheckingForFleetsInProjectsOfMember';
 import { FORM_FIELD_NAMES } from './constants';
 
 import { IRunEnvironmentFormKeys, IRunEnvironmentFormValues } from './types';
@@ -117,6 +119,9 @@ export const CreateDevEnvironment: React.FC = () => {
 
     const [getRunSpecFromYaml] = useGetRunSpecFromYaml({ projectName: selectedProject ?? '' });
 
+    const projectHavingFleetMap = useCheckingForFleetsInProjects({ projectNames: selectedProject ? [selectedProject] : [] });
+    const projectDontHasFleets = !!selectedProject && !projectHavingFleetMap[selectedProject];
+
     const [applyRun, { isLoading: isApplying }] = useApplyRunMutation();
 
     const loading = isApplying;
@@ -174,6 +179,10 @@ export const CreateDevEnvironment: React.FC = () => {
         const stepValidators = [validateOffer, validateSecondStep, validateConfig];
 
         if (reason === 'next') {
+            if (projectDontHasFleets) {
+                window.scrollTo(0, 0);
+            }
+
             stepValidators[activeStepIndex]?.().then((isValid) => {
                 if (isValid) {
                     setActiveStepIndex(requestedStepIndex);
@@ -275,8 +284,29 @@ export const CreateDevEnvironment: React.FC = () => {
         setValue('config_yaml', yaml);
     }, [yaml]);
 
+    const onCreateAFleet: ButtonProps['onClick'] = (event) => {
+        event.preventDefault();
+        goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
+    };
+
     return (
         <form className={cn({ [styles.wizardForm]: activeStepIndex === 0 })} onSubmit={handleSubmit(onSubmit)}>
+            {projectDontHasFleets && (
+                <div className={styles.alertBox}>
+                    <Alert
+                        header={t('fleets.no_alert.title')}
+                        type="info"
+                        action={
+                            <Button iconName="external" formAction="none" onClick={onCreateAFleet}>
+                                {t('fleets.no_alert.button_title')}
+                            </Button>
+                        }
+                    >
+                        The project <code>{selectedProject}</code> has no fleets. Create one before submitting a run.
+                    </Alert>
+                </div>
+            )}
+
             <Wizard
                 activeStepIndex={activeStepIndex}
                 onNavigate={onNavigateHandler}

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

@@ -1,5 +1,18 @@
 @use '@cloudscape-design/design-tokens/index' as awsui;
 
+.alertBox {
+  margin: 12px 0 0;
+
+  :global {
+    & [class^="awsui_alert"] {
+      & [class^="awsui_action-slot"] {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+
 .wizardForm {
   & [class^="awsui_wizard"] {
     & [class^="awsui_footer"] {

frontend/src/services/project.ts

@@ -23,11 +23,12 @@ export const projectApi = createApi({
     tagTypes: ['Projects', 'ProjectRepos', 'ProjectLogs', 'Backends'],
 
     endpoints: (builder) => ({
-        getProjects: builder.query<IProject[], void>({
-            query: () => {
+        getProjects: builder.query<IProject[], TGetProjectsParams | void>({
+            query: (body) => {
                 return {
                     url: API.PROJECTS.LIST(),
                     method: 'POST',
+                    body,
                 };
             },
 

frontend/src/types/project.d.ts

@@ -7,6 +7,11 @@ declare type TCreateWizardProjectParams = {
     };
 };
 
+declare type TGetProjectsParams = {
+    only_no_fleets?: boolean;
+    include_not_joined?: boolean;
+};
+
 declare type TProjectBackend = {
     name: string;
     config: IBackendAWS | IBackendAzure | IBackendGCP | IBackendLambda | IBackendLocal | IBackendDstack;