Skip to content

Commit

Permalink
[UI] New UI for fleets and instances #2133
Browse files Browse the repository at this point in the history
Fixes after review
  • Loading branch information
olgenn committed Jan 29, 2025
1 parent f51ce52 commit 9417228
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 48 deletions.
7 changes: 5 additions & 2 deletions frontend/src/libs/fleet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,13 @@ const getInstanceFields = (instance: IInstance) => ({
spot: instance.instance_type?.resources.spot,
});

export const getFleetInstancesLinkText = (fleet: IFleet): string | null => {
export const getFleetInstancesLinkText = (fleet: IFleet): string => {
const instances = fleet.instances.filter((i) => i.status !== 'terminated');
const hasPending = instances.some((i) => i.status !== 'pending');

if (!instances.length) return null;
if (!instances.length) return '0 instances';

if (hasPending) return `${instances.length} instances`;

const isSameInstances = instances.every((i) => isEqual(getInstanceFields(instances[0]), getInstanceFields(i)));

Expand Down
82 changes: 53 additions & 29 deletions frontend/src/pages/Fleets/Details/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { format } from 'date-fns';

import {
Box,
Button,
ColumnLayout,
Container,
ContentLayout,
Expand All @@ -18,19 +19,24 @@ import {

import { DATE_TIME_FORMAT } from 'consts';
import { useBreadcrumbs } from 'hooks';
import { getFleetStatusIconType } from 'libs/fleet';
import { getFleetInstancesLinkText, getFleetPrice, getFleetStatusIconType } from 'libs/fleet';
import { ROUTES } from 'routes';
import { useGetFleetDetailsQuery } from 'services/fleet';

import { useDeleteFleet } from '../List/useDeleteFleet';

export const FleetDetails: React.FC = () => {
const { t } = useTranslation();
const params = useParams();
const paramFleetName = params.fleetName ?? '';
const paramFleetId = params.fleetId ?? '';
const paramProjectName = params.projectName ?? '';
const navigate = useNavigate();

const { deleteFleets, isDeleting } = useDeleteFleet();

const { data, isLoading } = useGetFleetDetailsQuery({
projectName: paramProjectName,
fleetName: paramFleetName,
fleetId: paramFleetId,
});

useBreadcrumbs([
Expand All @@ -47,13 +53,46 @@ export const FleetDetails: React.FC = () => {
href: ROUTES.FLEETS.LIST,
},
{
text: paramFleetName,
href: ROUTES.FLEETS.DETAILS.FORMAT(paramProjectName, paramFleetName),
text: data?.name ?? '',
href: ROUTES.FLEETS.DETAILS.FORMAT(paramProjectName, paramFleetId),
},
]);

const deleteClickHandle = () => {
if (!data) return;

deleteFleets([data])
.then(() => {
navigate(ROUTES.FLEETS.LIST);
})
.catch(console.log);
};

const renderPrice = (fleet: IFleet) => {
const price = getFleetPrice(fleet);

if (typeof price === 'number') return `$${price}`;

return '-';
};

const isDisabledDeleteButton = !data || isDeleting;

return (
<ContentLayout header={<DetailsHeader title={paramFleetName} />}>
<ContentLayout
header={
<DetailsHeader
title={data?.name}
actionButtons={
<>
<Button onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
{t('common.delete')}
</Button>
</>
}
/>
}
>
{isLoading && (
<Container>
<Loader />
Expand Down Expand Up @@ -89,18 +128,13 @@ export const FleetDetails: React.FC = () => {
</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>
<Box variant="awsui-key-label">{t('fleets.instances.title')}</Box>

<div>
<Box variant="awsui-key-label">{t('fleets.instances.region')}</Box>
<div>{data.spec.configuration?.spot_policy === 'spot' && <Icon name={'check'} />}</div>
<div>
<NavigateLink href={ROUTES.INSTANCES.LIST + `?fleetId=${data.id}`}>
{getFleetInstancesLinkText(data)}
</NavigateLink>
</div>
</div>

<div>
Expand All @@ -110,17 +144,7 @@ export const FleetDetails: React.FC = () => {

<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>{renderPrice(data)}</div>
</div>
</ColumnLayout>
</Container>
Expand Down
18 changes: 8 additions & 10 deletions frontend/src/pages/Fleets/List/hooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const useColumnsDefinitions = () => {
id: 'fleet_name',
header: t('fleets.fleet'),
cell: (item) => (
<NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(item.project_name, item.name)}>{item.name}</NavigateLink>
<NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(item.project_name, item.id)}>{item.name}</NavigateLink>
),
},
{
Expand All @@ -74,14 +74,11 @@ export const useColumnsDefinitions = () => {
{
id: 'instances',
header: t('fleets.instances.title'),
cell: (item) => {
const linkText = getFleetInstancesLinkText(item);

if (linkText)
return <NavigateLink href={ROUTES.INSTANCES.LIST + `?fleetId=${item.id}`}>{linkText}</NavigateLink>;

return '-';
},
cell: (item) => (
<NavigateLink href={ROUTES.INSTANCES.LIST + `?fleetId=${item.id}`}>
{getFleetInstancesLinkText(item)}
</NavigateLink>
),
},
{
id: 'started',
Expand Down Expand Up @@ -205,7 +202,8 @@ export const useFleetsData = ({ project_name, only_active }: TFleetListRequestPa

if (result.length > 0) {
setPagesCount((count) => count - 1);
setData(result);
const reversedData = [...result].reverse();
setData(reversedData);
} else {
setPagesCount(1);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const useColumnsDefinitions = () => {
header: t('fleets.fleet'),
cell: (item) =>
item.fleet_name && item.project_name ? (
<NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(item.project_name, item.fleet_name)}>
<NavigateLink href={ROUTES.FLEETS.DETAILS.FORMAT(item.project_name, item.fleet_id)}>
{item.fleet_name}
</NavigateLink>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ export const useInstanceListData = ({ project_names, only_active, fleet_ids }: T

if (result.length > 0) {
setPagesCount((count) => count - 1);
setData(result);
const reversedData = [...result].reverse();
setData(reversedData);
} else {
setPagesCount(1);
}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,9 @@ export const ROUTES = {
FLEETS: {
LIST: '/fleets',
DETAILS: {
TEMPLATE: `/projects/:projectName/fleets/:fleetName`,
FORMAT: (projectName: string, fleetName: string) =>
buildRoute(ROUTES.FLEETS.DETAILS.TEMPLATE, { projectName, fleetName }),
TEMPLATE: `/projects/:projectName/fleets/:fleetId`,
FORMAT: (projectName: string, fleetId: string) =>
buildRoute(ROUTES.FLEETS.DETAILS.TEMPLATE, { projectName, fleetId }),
},
},

Expand Down
8 changes: 6 additions & 2 deletions frontend/src/services/fleet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,17 @@ export const fleetApi = createApi({
result ? [...result.map(({ name }) => ({ type: 'Fleet' as const, id: name })), 'Fleets'] : ['Fleets'],
}),

getFleetDetails: builder.query<IFleet, { projectName: IProject['project_name']; fleetName: IFleet['name'] }>({
query: ({ projectName, fleetName }) => {
getFleetDetails: builder.query<
IFleet,
{ projectName: IProject['project_name']; fleetName?: IFleet['name']; fleetId?: IFleet['id'] }
>({
query: ({ projectName, fleetName, fleetId }) => {
return {
url: API.PROJECTS.FLEETS_DETAILS(projectName),
method: 'POST',
body: {
name: fleetName,
id: fleetId,
},
};
},
Expand Down

0 comments on commit 9417228

Please sign in to comment.