Merge branch 'fleet_alert' into projects_only_no_fleets

Author: olgenn

frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts

@@ -0,0 +1,51 @@
+import { useEffect, useMemo, useState } 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 projectNameForChecking = useMemo<IProject['project_name'][]>(() => {
+        if (projectNames) {
+            return projectNames;
+        }
+
+        if (projectsData) {
+            return projectsData.map((project) => project.project_name);
+        }
+
+        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;
+};

frontend/src/locale/en.json

@@ -564,6 +564,11 @@
   },
 
   "fleets": {
+    "no_alert": {
+      "title": "No fleets",
+      "description": "The project has no fleets. Create one before submitting a run.",
+      "button_title": "Create a fleet"
+    },
     "fleet": "Fleet",
     "fleet_placeholder": "Filtering by fleet",
     "fleet_name": "Fleet name",

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { ButtonProps } from '@cloudscape-design/components/button';
 
-import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
+import { Alert, Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Toggle } from 'components';
 
 import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
 import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
+import { useCheckingForFleetsInProjects } from 'hooks/useCheckingForFleetsInProjectsOfMember';
+import { goToUrl } from 'libs';
 import { ROUTES } from 'routes';
 import { useLazyGetFleetsQuery } from 'services/fleet';
 
@@ -35,6 +38,8 @@ export const FleetList: React.FC = () => {
         isDisabledClearFilter,
     } = useFilters();
 
+    const projectHavingFleetMap = useCheckingForFleetsInProjects({});
+
     const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IFleet, TFleetListRequestParams>({
         useLazyQuery: useLazyGetFleetsQuery,
         args: { ...filteringRequestParams, limit: DEFAULT_TABLE_PAGE_SIZE },
@@ -67,6 +72,13 @@ export const FleetList: React.FC = () => {
         deleteFleets([...selectedItems]).catch(console.log);
     };
 
+    const projectDontHasFleet = Object.keys(projectHavingFleetMap).find((project) => !projectHavingFleetMap[project]);
+
+    const onCreateAFleet: ButtonProps['onClick'] = (event) => {
+        event.preventDefault();
+        goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
+    };
+
     return (
         <Table
             {...collectionProps}
@@ -78,25 +90,44 @@ export const FleetList: React.FC = () => {
             stickyHeader={true}
             selectionType="multi"
             header={
-                <Header
-                    variant="awsui-h1-sticky"
-                    actions={
-                        <SpaceBetween size="xs" direction="horizontal">
-                            <Button formAction="none" onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
-                                {t('common.delete')}
-                            </Button>
-
-                            <Button
-                                iconName="refresh"
-                                disabled={isLoading}
-                                ariaLabel={t('common.refresh')}
-                                onClick={refreshList}
-                            />
-                        </SpaceBetween>
-                    }
-                >
-                    {t('navigation.fleets')}
-                </Header>
+                <>
+                    {projectDontHasFleet && (
+                        <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>{projectDontHasFleet}</code> has no fleets. Create one before submitting a
+                                run.
+                            </Alert>
+                        </div>
+                    )}
+
+                    <Header
+                        variant="awsui-h1-sticky"
+                        actions={
+                            <SpaceBetween size="xs" direction="horizontal">
+                                <Button formAction="none" onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
+                                    {t('common.delete')}
+                                </Button>
+
+                                <Button
+                                    iconName="refresh"
+                                    disabled={isLoading}
+                                    ariaLabel={t('common.refresh')}
+                                    onClick={refreshList}
+                                />
+                            </SpaceBetween>
+                        }
+                    >
+                        {t('navigation.fleets')}
+                    </Header>
+                </>
             }
             filter={
                 <div className={styles.filters}>

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

@@ -1,3 +1,15 @@
+.alertBox {
+    margin-bottom: 12px;
+
+    :global {
+        & [class^="awsui_alert"] {
+            & [class^="awsui_action-slot"] {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
 .filters {
     display: flex;
     flex-wrap: wrap;

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

@@ -3,9 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 import { debounce } from 'lodash';
 import { ExpandableSection, Tabs } from '@cloudscape-design/components';
+import { ButtonProps } from '@cloudscape-design/components/button';
 import Wizard from '@cloudscape-design/components/wizard';
 
 import {
+    Alert,
     Box,
     Button,
     ButtonWithConfirmation,
@@ -22,7 +24,7 @@ import {
 import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
 
 import { useBreadcrumbs, useNotifications } from 'hooks';
-import { riseRouterException } from 'libs';
+import { goToUrl, riseRouterException } from 'libs';
 import { copyToClipboard } from 'libs';
 import { ROUTES } from 'routes';
 import { useGetProjectQuery, useUpdateProjectMembersMutation, useUpdateProjectMutation } from 'services/project';
@@ -35,6 +37,7 @@ import { useDeleteProject } from 'pages/Project/hooks/useDeleteProject';
 import { ProjectMembers } from 'pages/Project/Members';
 import { getProjectRoleByUserName } from 'pages/Project/utils';
 
+import { useCheckingForFleetsInProjects } from '../../../../hooks/useCheckingForFleetsInProjectsOfMember';
 import { useBackendsTable } from '../../Backends/hooks';
 import { BackendsTable } from '../../Backends/Table';
 import { GatewaysTable } from '../../Gateways';
@@ -60,6 +63,10 @@ export const ProjectSettings: React.FC = () => {
     const { deleteProject, isDeleting } = useDeleteProject();
     const { data: currentUser } = useGetUserDataQuery({});
 
+    const projectNames = useMemo(() => [paramProjectName], [paramProjectName]);
+
+    const projectHavingFleetMap = useCheckingForFleetsInProjects({ projectNames });
+
     const { data, isLoading, error } = useGetProjectQuery({ name: paramProjectName });
 
     const { data: runsData } = useGetRunsQuery({
@@ -180,6 +187,13 @@ export const ProjectSettings: React.FC = () => {
 
     const [activeStepIndex, setActiveStepIndex] = React.useState(0);
 
+    const projectDontHasFleet = !projectHavingFleetMap?.[paramProjectName];
+
+    const onCreateAFleet: ButtonProps['onClick'] = (event) => {
+        event.preventDefault();
+        goToUrl('https://dstack.ai/docs/quickstart/#create-a-fleet', true);
+    };
+
     if (isLoadingPage)
         return (
             <Container>
@@ -191,6 +205,22 @@ export const ProjectSettings: React.FC = () => {
         <>
             {data && backendsData && gatewaysData && (
                 <SpaceBetween size="l">
+                    {projectDontHasFleet && (
+                        <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>{paramProjectName}</code> has no fleets. Create one before submitting a run.
+                            </Alert>
+                        </div>
+                    )}
+
                     {isProjectMember && (
                         <ExpandableSection
                             variant="container"

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

@@ -8,6 +8,17 @@
     width: 300px;
 }
 
+.alertBox {
+    :global {
+        & [class^="awsui_alert"] {
+            & [class^="awsui_action-slot"] {
+                display: flex;
+                align-items: center;
+            }
+        }
+    }
+}
+
 .codeWrapper {
     position: relative;