Skip to content

Commit 3b0ae48

Browse files
olgennolgenn
committed
Was implemented Event list for job, run and fleet
1 parent 56a9824 commit 3b0ae48

File tree

12 files changed

+379
-98
lines changed

12 files changed

+379
-98
lines changed

‎frontend/src/hooks/useInfiniteScroll.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type UseInfinityParams<DataItem, Args extends InfinityListArgs> = {
1414
useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, ListResponse<DataItem>, any>>;
1515
args: { limit?: number } & Args;
1616
getPaginationParams: (listItem: DataItem) => Partial<Args>;
17+
skip?: boolean;
1718
// options?: UseQueryStateOptions<QueryDefinition<Args, any, any, Data[], any>, Record<string, any>>;
1819
};
1920

@@ -22,6 +23,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
2223
getPaginationParams,
2324
// options,
2425
args,
26+
skip,
2527
}: UseInfinityParams<DataItem, Args>) => {
2628
const [data, setData] = useState<ListResponse<DataItem>>([]);
2729
const scrollElement = useRef<HTMLElement>(document.documentElement);
@@ -55,14 +57,14 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
5557
};
5658

5759
useEffect(() => {
58-
if (!isEqual(argsProp, lastArgsProps.current)) {
60+
if (!isEqual(argsProp, lastArgsProps.current) && !skip) {
5961
getEmptyList();
6062
lastArgsProps.current = argsProp as Args;
6163
}
62-
}, [argsProp, lastArgsProps]);
64+
}, [argsProp, lastArgsProps, skip]);
6365

6466
const getMore = async () => {
65-
if (isLoadingRef.current || disabledMore) {
67+
if (isLoadingRef.current || disabledMore || skip) {
6668
return;
6769
}
6870

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import { useParams } from 'react-router-dom';
4+
5+
import { Header, Loader, Table } from 'components';
6+
7+
import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
8+
import { useCollection, useInfiniteScroll } from 'hooks';
9+
import { useLazyGetAllEventsQuery } from 'services/events';
10+
11+
import { useColumnsDefinitions } from 'pages/Events/List/hooks/useColumnDefinitions';
12+
13+
export const EventsList = () => {
14+
const { t } = useTranslation();
15+
const params = useParams();
16+
const paramFleetId = params.fleetId ?? '';
17+
18+
const { data, isLoading, isLoadingMore } = useInfiniteScroll<IEvent, TEventListRequestParams>({
19+
useLazyQuery: useLazyGetAllEventsQuery,
20+
args: { limit: DEFAULT_TABLE_PAGE_SIZE, target_fleets: [paramFleetId] },
21+
22+
getPaginationParams: (lastEvent) => ({
23+
prev_recorded_at: lastEvent.recorded_at,
24+
prev_id: lastEvent.id,
25+
}),
26+
});
27+
28+
const { items, collectionProps } = useCollection<IEvent>(data, {
29+
selection: {},
30+
});
31+
32+
const { columns } = useColumnsDefinitions();
33+
34+
return (
35+
<Table
36+
{...collectionProps}
37+
columnDefinitions={columns}
38+
items={items}
39+
loading={isLoading}
40+
loadingText={t('common.loading')}
41+
header={<Header>{t('navigation.events')}</Header>}
42+
footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
43+
/>
44+
);
45+
};

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import { useParams } from 'react-router-dom';
4+
import { format } from 'date-fns';
5+
6+
import { Box, ColumnLayout, Container, Header, Loader, NavigateLink, StatusIndicator } from 'components';
7+
8+
import { DATE_TIME_FORMAT } from 'consts';
9+
import { getFleetInstancesLinkText, getFleetPrice, getFleetStatusIconType } from 'libs/fleet';
10+
import { ROUTES } from 'routes';
11+
import { useGetFleetDetailsQuery } from 'services/fleet';
12+
13+
export const FleetDetails = () => {
14+
const { t } = useTranslation();
15+
const params = useParams();
16+
const paramFleetId = params.fleetId ?? '';
17+
const paramProjectName = params.projectName ?? '';
18+
19+
const { data, isLoading } = useGetFleetDetailsQuery(
20+
{
21+
projectName: paramProjectName,
22+
fleetId: paramFleetId,
23+
},
24+
{
25+
refetchOnMountOrArgChange: true,
26+
},
27+
);
28+
29+
const renderPrice = (fleet: IFleet) => {
30+
const price = getFleetPrice(fleet);
31+
32+
if (typeof price === 'number') return `$${price}`;
33+
34+
return '-';
35+
};
36+
37+
return (
38+
<>
39+
{isLoading && (
40+
<Container>
41+
<Loader />
42+
</Container>
43+
)}
44+
45+
{data && (
46+
<Container header={<Header variant="h2">{t('common.general')}</Header>}>
47+
<ColumnLayout columns={4} variant="text-grid">
48+
<div>
49+
<Box variant="awsui-key-label">{t('fleets.fleet')}</Box>
50+
<div>{data.name}</div>
51+
</div>
52+
53+
<div>
54+
<Box variant="awsui-key-label">{t('fleets.instances.status')}</Box>
55+
56+
<div>
57+
<StatusIndicator type={getFleetStatusIconType(data.status)}>
58+
{t(`fleets.statuses.${data.status}`)}
59+
</StatusIndicator>
60+
</div>
61+
</div>
62+
63+
<div>
64+
<Box variant="awsui-key-label">{t('fleets.instances.project')}</Box>
65+
66+
<div>
67+
<NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(data.project_name)}>
68+
{data.project_name}
69+
</NavigateLink>
70+
</div>
71+
</div>
72+
73+
<div>
74+
<Box variant="awsui-key-label">{t('fleets.instances.title')}</Box>
75+
76+
<div>
77+
<NavigateLink href={ROUTES.INSTANCES.LIST + `?fleet_ids=${data.id}`}>
78+
{getFleetInstancesLinkText(data)}
79+
</NavigateLink>
80+
</div>
81+
</div>
82+
83+
<div>
84+
<Box variant="awsui-key-label">{t('fleets.instances.started')}</Box>
85+
<div>{format(new Date(data.created_at), DATE_TIME_FORMAT)}</div>
86+
</div>
87+
88+
<div>
89+
<Box variant="awsui-key-label">{t('fleets.instances.price')}</Box>
90+
<div>{renderPrice(data)}</div>
91+
</div>
92+
</ColumnLayout>
93+
</Container>
94+
)}
95+
</>
96+
);
97+
};

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

Lines changed: 42 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,22 @@
11
import React from 'react';
22
import { useTranslation } from 'react-i18next';
3-
import { useNavigate, useParams } from 'react-router-dom';
4-
import { format } from 'date-fns';
3+
import { Outlet, useNavigate, useParams } from 'react-router-dom';
54

6-
import {
7-
Box,
8-
Button,
9-
ColumnLayout,
10-
Container,
11-
ContentLayout,
12-
DetailsHeader,
13-
Header,
14-
Loader,
15-
NavigateLink,
16-
StatusIndicator,
17-
} from 'components';
5+
import { Button, ContentLayout, DetailsHeader, Tabs } from 'components';
6+
7+
enum CodeTab {
8+
Details = 'details',
9+
Events = 'events',
10+
}
1811

19-
import { DATE_TIME_FORMAT } from 'consts';
2012
import { useBreadcrumbs } from 'hooks';
21-
import { getFleetInstancesLinkText, getFleetPrice, getFleetStatusIconType } from 'libs/fleet';
2213
import { ROUTES } from 'routes';
2314
import { useGetFleetDetailsQuery } from 'services/fleet';
2415

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

18+
import styles from './styles.module.scss';
19+
2720
export const FleetDetails: React.FC = () => {
2821
const { t } = useTranslation();
2922
const params = useParams();
@@ -33,7 +26,7 @@ export const FleetDetails: React.FC = () => {
3326

3427
const { deleteFleets, isDeleting } = useDeleteFleet();
3528

36-
const { data, isLoading } = useGetFleetDetailsQuery(
29+
const { data } = useGetFleetDetailsQuery(
3730
{
3831
projectName: paramProjectName,
3932
fleetId: paramFleetId,
@@ -72,87 +65,42 @@ export const FleetDetails: React.FC = () => {
7265
.catch(console.log);
7366
};
7467

75-
const renderPrice = (fleet: IFleet) => {
76-
const price = getFleetPrice(fleet);
77-
78-
if (typeof price === 'number') return `$${price}`;
79-
80-
return '-';
81-
};
82-
8368
const isDisabledDeleteButton = !data || isDeleting;
8469

8570
return (
86-
<ContentLayout
87-
header={
88-
<DetailsHeader
89-
title={data?.name}
90-
actionButtons={
91-
<>
92-
<Button onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
93-
{t('common.delete')}
94-
</Button>
95-
</>
96-
}
71+
<div className={styles.page}>
72+
<ContentLayout
73+
header={
74+
<DetailsHeader
75+
title={data?.name}
76+
actionButtons={
77+
<>
78+
<Button onClick={deleteClickHandle} disabled={isDisabledDeleteButton}>
79+
{t('common.delete')}
80+
</Button>
81+
</>
82+
}
83+
/>
84+
}
85+
>
86+
<Tabs
87+
withNavigation
88+
tabs={[
89+
{
90+
label: 'Details',
91+
id: CodeTab.Details,
92+
href: ROUTES.FLEETS.DETAILS.FORMAT(paramProjectName, paramFleetId),
93+
},
94+
{
95+
label: 'Events',
96+
id: CodeTab.Events,
97+
href: ROUTES.FLEETS.DETAILS.EVENTS.FORMAT(paramProjectName, paramFleetId),
98+
},
99+
]}
97100
/>
98-
}
99-
>
100-
{isLoading && (
101-
<Container>
102-
<Loader />
103-
</Container>
104-
)}
105-
106-
{data && (
107-
<Container header={<Header variant="h2">{t('common.general')}</Header>}>
108-
<ColumnLayout columns={4} variant="text-grid">
109-
<div>
110-
<Box variant="awsui-key-label">{t('fleets.fleet')}</Box>
111-
<div>{data.name}</div>
112-
</div>
113-
114-
<div>
115-
<Box variant="awsui-key-label">{t('fleets.instances.status')}</Box>
116-
117-
<div>
118-
<StatusIndicator type={getFleetStatusIconType(data.status)}>
119-
{t(`fleets.statuses.${data.status}`)}
120-
</StatusIndicator>
121-
</div>
122-
</div>
123-
124-
<div>
125-
<Box variant="awsui-key-label">{t('fleets.instances.project')}</Box>
126-
127-
<div>
128-
<NavigateLink href={ROUTES.PROJECT.DETAILS.FORMAT(data.project_name)}>
129-
{data.project_name}
130-
</NavigateLink>
131-
</div>
132-
</div>
133-
134-
<div>
135-
<Box variant="awsui-key-label">{t('fleets.instances.title')}</Box>
136-
137-
<div>
138-
<NavigateLink href={ROUTES.INSTANCES.LIST + `?fleet_ids=${data.id}`}>
139-
{getFleetInstancesLinkText(data)}
140-
</NavigateLink>
141-
</div>
142-
</div>
143-
144-
<div>
145-
<Box variant="awsui-key-label">{t('fleets.instances.started')}</Box>
146-
<div>{format(new Date(data.created_at), DATE_TIME_FORMAT)}</div>
147-
</div>
148101

149-
<div>
150-
<Box variant="awsui-key-label">{t('fleets.instances.price')}</Box>
151-
<div>{renderPrice(data)}</div>
152-
</div>
153-
</ColumnLayout>
154-
</Container>
155-
)}
156-
</ContentLayout>
102+
<Outlet />
103+
</ContentLayout>
104+
</div>
157105
);
158106
};

‎frontend/src/pages/Fleets/Details/styles.module.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.page {
2+
height: 100%;
3+
4+
& [class^="awsui_tabs-content"] {
5+
display: none;
6+
}
7+
8+
& > [class^="awsui_layout"] {
9+
height: 100%;
10+
11+
& > [class^="awsui_content"] {
12+
display: flex;
13+
flex-direction: column;
14+
gap: 20px;
15+
height: 100%;
16+
}
17+
}
18+
}

0 commit comments

Comments
 (0)