[UI] New UI for fleets and instances

frontend/src/api.ts

@@ -74,6 +74,8 @@ export const API = {
         FLEETS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/list`,
         FLEETS_DETAILS: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/get`,
         FLEETS_DELETE: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/fleets/delete`,
+        FLEET_INSTANCES_DELETE: (projectName: IProject['project_name']) =>
+            `${API.BASE()}/project/${projectName}/fleets/delete_instances`,
 
         // Fleets
         VOLUMES_DELETE: (projectName: IProject['project_name']) => `${API.BASE()}/project/${projectName}/volumes/delete`,
@@ -123,6 +125,11 @@ export const API = {
         LIST: () => `${API.FLEETS.BASE()}/list`,
     },
 
+    INSTANCES: {
+        BASE: () => `${API.BASE()}/instances`,
+        LIST: () => `${API.INSTANCES.BASE()}/list`,
+    },
+
     SERVER: {
         BASE: () => `${API.BASE()}/server`,
         INFO: () => `${API.SERVER.BASE()}/get_info`,

frontend/src/layouts/AppLayout/hooks.ts

@@ -27,6 +27,7 @@ export const useSideNavigation = () => {
         { type: 'link', text: t('navigation.runs'), href: ROUTES.RUNS.LIST },
         { type: 'link', text: t('navigation.models'), href: ROUTES.MODELS.LIST },
         { type: 'link', text: t('navigation.fleets'), href: ROUTES.FLEETS.LIST },
+        { type: 'link', text: t('navigation.instances'), href: ROUTES.INSTANCES.LIST },
         { type: 'link', text: t('navigation.volumes'), href: ROUTES.VOLUMES.LIST },
         { type: 'link', text: t('navigation.project_other'), href: ROUTES.PROJECT.LIST },
 

frontend/src/locale/en.json

@@ -73,7 +73,8 @@
     "account": "User",
     "billing": "Billing",
     "resources": "Resources",
-    "volumes": "Volumes"
+    "volumes": "Volumes",
+    "instances": "Instances"
   },
 
   "backend": {
@@ -443,10 +444,15 @@
       "title": "Instances",
       "empty_message_title": "No instances",
       "empty_message_text": "No instances to display.",
+      "nomatch_message_title": "No matches",
+      "nomatch_message_text": "We can't find a match.",
       "instance_name": "Instance",
+      "instance_num": "Instance num",
       "created": "Created",
       "status": "Status",
       "project": "Project",
+      "hostname": "Host name",
+      "instance_type": "Type",
       "statuses": {
         "pending": "Pending",
         "provisioning": "Provisioning",

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

@@ -1,15 +1,27 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import { format } from 'date-fns';
 
-import { Container, ContentLayout, DetailsHeader, Loader } from 'components';
+import {
+    Box,
+    ColumnLayout,
+    Container,
+    ContentLayout,
+    DetailsHeader,
+    Header,
+    Icon,
+    Loader,
+    NavigateLink,
+    StatusIndicator,
+} from 'components';
 
+import { DATE_TIME_FORMAT } from 'consts';
 import { useBreadcrumbs } from 'hooks';
+import { getFleetStatusIconType } from 'libs/fleet';
 import { ROUTES } from 'routes';
 import { useGetFleetDetailsQuery } from 'services/fleet';
 
-import { Instances } from './Instances';
-
 export const FleetDetails: React.FC = () => {
     const { t } = useTranslation();
     const params = useParams();
@@ -48,7 +60,71 @@ export const FleetDetails: React.FC = () => {
                 </Container>
             )}
 
-            {data && <Instances data={data.instances} />}
+            {data && (
+                <Container header={<Header variant="h2">{t('common.general')}</Header>}>
+                    <ColumnLayout columns={4} variant="text-grid">
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.fleet')}</Box>
+                            <div>{data.name}</div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.status')}</Box>
+
+                            <div>
+                                <StatusIndicator type={getFleetStatusIconType(data.status)}>
+                                    {t(`fleets.statuses.${data.status}`)}
+                                </StatusIndicator>
+                            </div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.project')}</Box>
+
+                            <div>
+                                <NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(data.project_name)}>
+                                    {data.project_name}
+                                </NavigateLink>
+                            </div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.backend')}</Box>
+                            <div>{data.spec.configuration?.backends?.join(', ')}</div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.region')}</Box>
+                            <div>{data.spec.configuration.regions?.join(', ')}</div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.region')}</Box>
+                            <div>{data.spec.configuration?.spot_policy === 'spot' && <Icon name={'check'} />}</div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.started')}</Box>
+                            <div>{format(new Date(data.created_at), DATE_TIME_FORMAT)}</div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.price')}</Box>
+                            <div>{data.spec.configuration?.max_price && `$${data.spec.configuration?.max_price}`}</div>
+                        </div>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('fleets.instances.title')}</Box>
+
+                            <div>
+                                <NavigateLink href={ROUTES.INSTANCES.LIST + `?fleetId=${data.id}`}>
+                                    Show fleet's instances
+                                </NavigateLink>
+                            </div>
+                        </div>
+                    </ColumnLayout>
+                </Container>
+            )}
         </ContentLayout>
     );
 };

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

@@ -8,11 +8,10 @@ import { SelectCSDProps } from 'components';
 import { DATE_TIME_FORMAT, DEFAULT_TABLE_PAGE_SIZE } from 'consts';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 import { getFleetStatusIconType } from 'libs/fleet';
+import { ROUTES } from 'routes';
 import { useLazyGetFleetsQuery } from 'services/fleet';
 import { useGetProjectsQuery } from 'services/project';
 
-import { ROUTES } from '../../../routes';
-
 export const useEmptyMessages = ({
     clearFilters,
     isDisabledClearFilter,
@@ -50,9 +49,11 @@ export const useColumnsDefinitions = () => {
 
     const columns: TableProps.ColumnDefinition<IFleet>[] = [
         {
-            id: 'instance_name',
+            id: 'fleet_name',
             header: t('fleets.fleet'),
-            cell: (item) => item.name,
+            cell: (item) => (
+                <NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(item.project_name, item.name)}>{item.name}</NavigateLink>
+            ),
         },
         {
             id: 'status',
@@ -106,7 +107,8 @@ export const useColumnsDefinitions = () => {
 };
 
 export const useFilters = () => {
-    const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>('administration-fleet-list-is-active', false);
+    // const [onlyActive, setOnlyActive] = useLocalStorageState<boolean>('fleet-list-is-active', false);
+    const [onlyActive, setOnlyActive] = useState<boolean>(true);
     const [selectedProject, setSelectedProject] = useState<SelectCSDProps.Option | null>(null);
 
     const { data: projectsData } = useGetProjectsQuery();
@@ -118,11 +120,12 @@ export const useFilters = () => {
     }, [projectsData]);
 
     const clearFilters = () => {
-        setOnlyActive(false);
+        // setOnlyActive(false);
         setSelectedProject(null);
     };
 
-    const isDisabledClearFilter = !selectedProject && !onlyActive;
+    // const isDisabledClearFilter = !selectedProject && !onlyActive;
+    const isDisabledClearFilter = !selectedProject;
 
     return {
         projectOptions,

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

@@ -61,12 +61,6 @@ export const FleetList: React.FC = () => {
         deleteFleets([...selectedItems]).catch(console.log);
     };
 
-    const renderCounter = () => {
-        if (!data?.length) return '';
-
-        return `(${data.length})`;
-    };
-
     return (
         <Table
             {...collectionProps}
@@ -80,7 +74,6 @@ export const FleetList: React.FC = () => {
             header={
                 <Header
                     variant="awsui-h1-sticky"
-                    counter={renderCounter()}
                     actions={
                         <SpaceBetween size="xs" direction="horizontal">
                             <Button formAction="none" onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
@@ -117,11 +110,11 @@ export const FleetList: React.FC = () => {
                         </FormField>
                     </div>
 
-                    <div className={styles.activeOnly}>
-                        <Toggle onChange={({ detail }) => setOnlyActive(detail.checked)} checked={onlyActive}>
-                            {t('fleets.active_only')}
-                        </Toggle>
-                    </div>
+                    {/*<div className={styles.activeOnly}>*/}
+                    {/*    <Toggle onChange={({ detail }) => setOnlyActive(detail.checked)} checked={onlyActive}>*/}
+                    {/*        {t('fleets.active_only')}*/}
+                    {/*    </Toggle>*/}
+                    {/*</div>*/}
 
                     <div className={styles.clear}>
                         <Button formAction="none" onClick={clearFilters} disabled={isDisabledClearFilter}>

frontend/src/pages/Instances/List/hooks/useActions.ts

@@ -0,0 +1,55 @@
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useNotifications } from 'hooks';
+import { useDeleteInstancesMutation } from 'services/instance';
+
+export const useActions = () => {
+    const { t } = useTranslation();
+    const [deleteInstances] = useDeleteInstancesMutation();
+    const [pushNotification] = useNotifications();
+    const [isDeleting, setIsDeleting] = useState(() => false);
+
+    const instancesGroupByFleetName = (instances: IInstance[]) => {
+        return instances.reduce<Record<string, number[]>>((acc, instance) => {
+            const key = `${instance.project_name}/${instance.fleet_name}`;
+
+            if (acc[key]) {
+                acc[key].push(instance.instance_num);
+            } else {
+                acc[key] = [instance.instance_num];
+            }
+
+            return acc;
+        }, {});
+    };
+
+    const deleteFleets = useCallback(async (instances: IInstance[]) => {
+        if (!instances.length) return Promise.reject('No instances');
+
+        setIsDeleting(true);
+
+        const groupedInstances = instancesGroupByFleetName(instances);
+
+        const requests = Object.keys(groupedInstances).map((key) => {
+            const [projectName, fleetName] = key.split('/');
+
+            return deleteInstances({
+                projectName,
+                fleetName,
+                instancesNums: groupedInstances[key],
+            }).unwrap();
+        });
+
+        return Promise.all(requests)
+            .finally(() => setIsDeleting(false))
+            .catch((error) => {
+                pushNotification({
+                    type: 'error',
+                    content: t('common.server_error', { error: error?.error }),
+                });
+            });
+    }, []);
+
+    return { deleteFleets, isDeleting } as const;
+};