Skip to content

Commit b76293d

Browse files
dchyrva-akamaidchyrva-akamai
authored
change: [STORIF-106] Object Storage Summary page changed. (#13087)
* change: [STORIF-106] Object Storage Summary page changed. * Added changeset: Object storage summary page migrated to use table view
1 parent 3660a04 commit b76293d

File tree

5 files changed

+133
-65
lines changed

5 files changed

+133
-65
lines changed

‎packages/manager/.changeset/pr-13087-upcoming-features-1763109384091.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Upcoming Features
3+
---
4+
5+
Object storage summary page migrated to use table view ([#13087](https://github.com/linode/manager/pull/13087))

‎packages/manager/src/features/ObjectStorage/SummaryLanding/Partials/EndpointSummaryRow.test.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,14 +108,15 @@ describe('EndpointSummaryRow', () => {
108108
isFetching: false,
109109
});
110110

111-
const { findByText } = renderWithTheme(
111+
const { findByText, findAllByText } = renderWithTheme(
112112
<EndpointSummaryRow endpoint={testEndpoint} />
113113
);
114114

115-
expect(await findByText(testEndpoint)).toBeVisible();
116-
expect(await findByText('Number of Buckets')).toBeVisible();
117-
expect(await findByText('Total Capacity')).toBeVisible();
118-
expect(await findByText('Number of Objects')).toBeVisible();
115+
const cellEndpoints = await findAllByText(testEndpoint);
116+
expect(cellEndpoints.length).toBe(3);
117+
cellEndpoints.forEach((endpoint) => {
118+
expect(endpoint).toBeVisible();
119+
});
119120
expect(await findByText('3 of 10 Buckets used')).toBeVisible();
120121
expect(await findByText('1 of 2 KB used')).toBeVisible();
121122
expect(await findByText('5 of 10 Objects used')).toBeVisible();

‎packages/manager/src/features/ObjectStorage/SummaryLanding/Partials/EndpointSummaryRow.tsx‎

Lines changed: 55 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import {
2-
Box,
3-
CircleProgress,
4-
ErrorState,
5-
Typography,
6-
useTheme,
7-
} from '@linode/ui';
1+
import { Typography, useTheme } from '@linode/ui';
82
import * as React from 'react';
93

104
import { QuotaUsageBar } from 'src/components/QuotaUsageBar/QuotaUsageBar';
5+
import { TableCell } from 'src/components/TableCell';
6+
import { TableRow } from 'src/components/TableRow';
7+
import { TableRowError } from 'src/components/TableRowError/TableRowError';
8+
import { TableRowLoading } from 'src/components/TableRowLoading/TableRowLoading';
119

1210
import { useGetObjUsagePerEndpoint } from '../hooks/useGetObjUsagePerEndpoint';
1311

@@ -24,58 +22,61 @@ export const EndpointSummaryRow = ({ endpoint }: Props) => {
2422
isError,
2523
} = useGetObjUsagePerEndpoint(endpoint);
2624

25+
if (isFetching) {
26+
return <TableRowLoading columns={3} />;
27+
}
28+
2729
if (isError) {
2830
return (
29-
<>
30-
<hr />
31-
<ErrorState
32-
compact={true}
33-
errorText={`There was an error retrieving ${endpoint} endpoint data.`}
34-
/>
35-
</>
31+
<TableRowError
32+
colSpan={3}
33+
message={`There was an error retrieving ${endpoint} endpoint data.`}
34+
/>
3635
);
3736
}
3837

39-
return (
40-
<>
41-
<hr />
42-
43-
<Box
44-
sx={{
45-
display: 'flex',
46-
flexDirection: 'column',
47-
gap: theme.spacingFunction(16),
48-
padding: theme.spacingFunction(8),
49-
}}
50-
>
51-
<Box
52-
sx={{
53-
display: 'flex',
54-
alignItems: 'center',
55-
justifyContent: 'space-between',
56-
}}
57-
>
58-
<h3>{endpoint}</h3>
59-
</Box>
60-
61-
<Box sx={{ display: 'flex', gap: '3rem', justifyContent: 'center' }}>
62-
{isFetching && <CircleProgress size="md" />}
38+
const capacityQuota = quotaWithUsage.find(
39+
(quota) => quota.quota_name === 'Total Capacity'
40+
);
41+
const objectsQuota = quotaWithUsage.find(
42+
(quota) => quota.quota_name === 'Number of Objects'
43+
);
44+
const bucketsQuota = quotaWithUsage.find(
45+
(quota) => quota.quota_name === 'Number of Buckets'
46+
);
6347

64-
{!isFetching &&
65-
quotaWithUsage.map((quota, index) => {
66-
return (
67-
<Box key={index} sx={{ flex: 1 }}>
68-
<Typography>{quota.quota_name}</Typography>
69-
<QuotaUsageBar
70-
limit={quota.quota_limit}
71-
resourceMetric={quota.resource_metric}
72-
usage={quota?.usage?.usage ?? 0}
73-
/>
74-
</Box>
75-
);
76-
})}
77-
</Box>
78-
</Box>
79-
</>
48+
return (
49+
<TableRow>
50+
{!!capacityQuota && (
51+
<TableCell sx={{ paddingY: theme.spacingFunction(8) }}>
52+
<Typography>{endpoint}</Typography>
53+
<QuotaUsageBar
54+
limit={capacityQuota.quota_limit}
55+
resourceMetric={capacityQuota.resource_metric}
56+
usage={capacityQuota?.usage?.usage ?? 0}
57+
/>
58+
</TableCell>
59+
)}
60+
{!!objectsQuota && (
61+
<TableCell sx={{ paddingY: theme.spacingFunction(8) }}>
62+
<Typography>{endpoint}</Typography>
63+
<QuotaUsageBar
64+
limit={objectsQuota.quota_limit}
65+
resourceMetric={objectsQuota.resource_metric}
66+
usage={objectsQuota?.usage?.usage ?? 0}
67+
/>
68+
</TableCell>
69+
)}
70+
{!!bucketsQuota && (
71+
<TableCell sx={{ paddingY: theme.spacingFunction(8) }}>
72+
<Typography>{endpoint}</Typography>
73+
<QuotaUsageBar
74+
limit={bucketsQuota.quota_limit}
75+
resourceMetric={bucketsQuota.resource_metric}
76+
usage={bucketsQuota?.usage?.usage ?? 0}
77+
/>
78+
</TableCell>
79+
)}
80+
</TableRow>
8081
);
8182
};

‎packages/manager/src/features/ObjectStorage/SummaryLanding/Partials/EndpointSummaryTable.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { Box, useTheme } from '@linode/ui';
2+
import React from 'react';
3+
4+
import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
5+
import { Table } from 'src/components/Table';
6+
import { TableBody } from 'src/components/TableBody';
7+
import { TableCell } from 'src/components/TableCell';
8+
import { TableHead } from 'src/components/TableHead';
9+
import { TableRow } from 'src/components/TableRow';
10+
11+
import { EndpointSummaryRow } from './EndpointSummaryRow';
12+
13+
interface Props {
14+
endpoints: string[];
15+
}
16+
17+
const PAGE_SIZE = 6;
18+
19+
export const EndpointSummaryTable = ({ endpoints }: Props) => {
20+
const theme = useTheme();
21+
const [page, setPage] = React.useState(1);
22+
const [paginatedEndpoints, setPaginatedEndpoints] = React.useState<string[]>(
23+
[]
24+
);
25+
26+
React.useEffect(() => {
27+
const offset = PAGE_SIZE * (page - 1);
28+
setPaginatedEndpoints(endpoints.slice(offset, offset + PAGE_SIZE));
29+
}, [endpoints, page]);
30+
31+
return (
32+
<Box>
33+
<Table>
34+
<TableHead>
35+
<TableRow>
36+
<TableCell>Content Stored</TableCell>
37+
<TableCell>Objects</TableCell>
38+
<TableCell>Buckets</TableCell>
39+
</TableRow>
40+
</TableHead>
41+
42+
<TableBody>
43+
{paginatedEndpoints.map((endpoint, index) => {
44+
return <EndpointSummaryRow endpoint={endpoint} key={index} />;
45+
})}
46+
</TableBody>
47+
</Table>
48+
49+
<PaginationFooter
50+
count={endpoints.length}
51+
eventCategory="Endpoints Table"
52+
fixedSize={true}
53+
handlePageChange={setPage}
54+
handleSizeChange={() => {}}
55+
page={page}
56+
pageSize={PAGE_SIZE}
57+
sx={{ padding: theme.spacingFunction(4) }}
58+
/>
59+
</Box>
60+
);
61+
};

‎packages/manager/src/features/ObjectStorage/SummaryLanding/SummaryLanding.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44
import { Link } from 'src/components/Link';
55

66
import { EndpointMultiselect } from './Partials/EndpointMultiselect';
7-
import { EndpointSummaryRow } from './Partials/EndpointSummaryRow';
7+
import { EndpointSummaryTable } from './Partials/EndpointSummaryTable';
88

99
import type { EndpointMultiselectValue } from './Partials/EndpointMultiselect';
1010

@@ -35,11 +35,11 @@ export const SummaryLanding = () => {
3535
values={selectedEndpoints}
3636
/>
3737

38-
<Box>
39-
{selectedEndpoints.map((endpoint, index) => {
40-
return <EndpointSummaryRow endpoint={endpoint.label} key={index} />;
41-
})}
42-
</Box>
38+
{!!selectedEndpoints.length && (
39+
<EndpointSummaryTable
40+
endpoints={selectedEndpoints.map((endpoint) => endpoint.label)}
41+
/>
42+
)}
4343
</Box>
4444
);
4545
};

0 commit comments

Comments
 (0)