Added notification about fleets on project details page dstackai/dstack-cloud#373

Author: olgenn

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

@@ -6,11 +6,11 @@ import { Alert, Button, Header, Loader, PropertyFilter, SpaceBetween, Table, Tog
 
 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';
 
-import { useCheckingForFleetsInProjects } from '../../../hooks/useCheckingForFleetsInProjectsOfMember';
 import { useColumnsDefinitions, useEmptyMessages, useFilters } from './hooks';
 import { useDeleteFleet } from './useDeleteFleet';
 
@@ -102,8 +102,8 @@ export const FleetList: React.FC = () => {
                                     </Button>
                                 }
                             >
-                                Some of the projects (e.g. <code>{projectDontHasFleet}</code>) have no fleets. Create at least
-                                one before submitting a run
+                                The project <code>{projectDontHasFleet}</code> has no fleets. Create one before submitting a
+                                run.
                             </Alert>
                         </div>
                     )}

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;
 

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

@@ -154,8 +154,8 @@ export const RunList: React.FC = () => {
                                     </Button>
                                 }
                             >
-                                Some of the projects (e.g. <code>{projectDontHasFleet}</code>) have no fleets. Create at least
-                                one before submitting a run
+                                The project <code>{projectDontHasFleet}</code> has no fleets. Create one before submitting a
+                                run.
                             </Alert>
                         </div>
                     )}