Skip to content

Commit c317fc1

Browse files
CannonLockCannonLock
committed
Director Metrics Page Clean Up
- Fix the headers to they are sticky on the tables - Add the by project metrics table - Add boxplots for the transfer bytes and operations to see top caches
1 parent 88bc244 commit c317fc1

File tree

7 files changed

+118
-291
lines changed

7 files changed

+118
-291
lines changed

‎web_ui/frontend/app/director/metrics/components/ServerUptime.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { AlertDispatchContext } from '@/components/AlertProvider';
3333
import { alertOnError } from '@/helpers/util';
3434
import Link from 'next/link';
3535
import { ServerType } from '@/types';
36+
import StyledTableCell from '@/components/StyledHeadTableCell';
3637

3738
const ServerUptime = () => {
3839
const dispatch = useContext(AlertDispatchContext);
@@ -55,17 +56,17 @@ const ServerUptime = () => {
5556
data = useMemo(() => (data ? data : []), [data]);
5657

5758
return (
58-
<Box overflow={'scroll'} height={'100%'}>
59+
<>
5960
{data.length === 0 && !isLoading && !isValidating && (
6061
<Alert severity='warning'>No data available</Alert>
6162
)}
62-
<TableContainer>
63-
<Table size={'small'}>
63+
<TableContainer sx={{ maxHeight: '100%' }}>
64+
<Table stickyHeader size={'small'}>
6465
<TableHead>
6566
<TableRow>
66-
<TableCell>Server</TableCell>
67-
<TableCell>Status</TableCell>
68-
<TableCell>Restarts</TableCell>
67+
<StyledTableCell>Server</StyledTableCell>
68+
<StyledTableCell>Status</StyledTableCell>
69+
<StyledTableCell>Restarts</StyledTableCell>
6970
</TableRow>
7071
</TableHead>
7172
<TableBody>
@@ -94,7 +95,7 @@ const ServerUptime = () => {
9495
</TableBody>
9596
</Table>
9697
</TableContainer>
97-
</Box>
98+
</>
9899
);
99100
};
100101

‎web_ui/frontend/app/director/metrics/components/StorageTable.tsx‎

Lines changed: 59 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
TableContainer,
1010
TableHead,
1111
TableRow,
12+
styled,
1213
} from '@mui/material';
1314
import {
1415
MatrixResponseData,
@@ -18,12 +19,14 @@ import {
1819
} from '@/components/graphs/prometheus';
1920

2021
import useSWR from 'swr';
21-
import { useContext, useMemo } from 'react';
22+
import { ReactNode, useContext, useMemo } from 'react';
2223
import { GraphContext } from '@/components/graphs/GraphContext';
2324
import { DateTime } from 'luxon';
2425
import chroma from 'chroma-js';
2526
import { convertToBiggestBytes, toBytes, toBytesString } from '@/helpers/bytes';
2627
import { ServerType } from '@/types';
28+
import { tableCellClasses } from '@mui/material/TableCell';
29+
import StyledTableCell from '@/components/StyledHeadTableCell';
2730

2831
export const StorageTable = () => {
2932
const { rate, time, range, resolution } = useContext(GraphContext);
@@ -69,64 +72,62 @@ export const StorageTable = () => {
6972
return (
7073
<>
7174
{storageData !== undefined && (
72-
<Box overflow={'scroll'} height={'100%'}>
73-
<TableContainer>
74-
<Table size={'small'}>
75-
<TableHead>
76-
<TableRow>
77-
<TableCell>Server</TableCell>
78-
<TableCell>Used ({totalUsedByteString})</TableCell>
79-
<TableCell>Free ({totalFreeByteString})</TableCell>
80-
</TableRow>
81-
</TableHead>
82-
<TableBody>
83-
{Object.values(storageData)
84-
.sort((a, b) => {
85-
const nameA = a.serverName.toUpperCase();
86-
const nameB = b.serverName.toUpperCase();
87-
return nameA > nameB ? 1 : nameA < nameB ? -1 : 0;
88-
})
89-
.map((d) => (
90-
<TableRow key={d.serverName}>
91-
<TableCell>
92-
<Link
93-
href={`/director/metrics/${d.serverType.toLowerCase()}/?server_name=${d.serverName}`}
94-
>
95-
{d.serverName}
96-
</Link>
97-
</TableCell>
98-
<TableCell
99-
sx={{
100-
bgcolor: chroma
101-
.scale(['#f7f7f7', '#8bb7ff'])
102-
.mode('lab')(
103-
(d.total - d.free - minUsedBytes) /
104-
(maxUsedBytes - minUsedBytes)
105-
)
106-
.hex(),
107-
}}
75+
<TableContainer sx={{ maxHeight: '100%' }}>
76+
<Table stickyHeader size={'small'}>
77+
<TableHead>
78+
<TableRow>
79+
<StyledTableCell>Server</StyledTableCell>
80+
<StyledTableCell>Used ({totalUsedByteString})</StyledTableCell>
81+
<StyledTableCell>Free ({totalFreeByteString})</StyledTableCell>
82+
</TableRow>
83+
</TableHead>
84+
<TableBody>
85+
{Object.values(storageData)
86+
.sort((a, b) => {
87+
const nameA = a.serverName.toUpperCase();
88+
const nameB = b.serverName.toUpperCase();
89+
return nameA > nameB ? 1 : nameA < nameB ? -1 : 0;
90+
})
91+
.map((d) => (
92+
<TableRow key={d.serverName}>
93+
<TableCell>
94+
<Link
95+
href={`/director/metrics/${d.serverType.toLowerCase()}/?server_name=${d.serverName}`}
10896
>
109-
{toBytesString(d.total - d.free)}
110-
</TableCell>
111-
<TableCell
112-
sx={{
113-
bgcolor: chroma
114-
.scale(['#f7f7f7', '#8bb7ff'])
115-
.mode('lab')(
116-
(d.free - minFreeBytes) /
117-
(maxFreeBytes - minFreeBytes)
118-
)
119-
.hex(),
120-
}}
121-
>
122-
{toBytesString(d.free)}
123-
</TableCell>
124-
</TableRow>
125-
))}
126-
</TableBody>
127-
</Table>
128-
</TableContainer>
129-
</Box>
97+
{d.serverName}
98+
</Link>
99+
</TableCell>
100+
<TableCell
101+
sx={{
102+
bgcolor: chroma
103+
.scale(['#f7f7f7', '#8bb7ff'])
104+
.mode('lab')(
105+
(d.total - d.free - minUsedBytes) /
106+
(maxUsedBytes - minUsedBytes)
107+
)
108+
.hex(),
109+
}}
110+
>
111+
{toBytesString(d.total - d.free)}
112+
</TableCell>
113+
<TableCell
114+
sx={{
115+
bgcolor: chroma
116+
.scale(['#f7f7f7', '#8bb7ff'])
117+
.mode('lab')(
118+
(d.free - minFreeBytes) /
119+
(maxFreeBytes - minFreeBytes)
120+
)
121+
.hex(),
122+
}}
123+
>
124+
{toBytesString(d.free)}
125+
</TableCell>
126+
</TableRow>
127+
))}
128+
</TableBody>
129+
</Table>
130+
</TableContainer>
130131
)}
131132
</>
132133
);

‎web_ui/frontend/app/director/metrics/page.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ const Page = () => {
2525
{[
2626
<ServerUptime key={'server-count-var-graph'} />,
2727
<StorageTable key={'storage-table'} />,
28+
<ProjectTable key={'project-table'} />,
2829
].map((component, index) => (
2930
<Grid key={index} item xs={12} display={'flex'} height={'45vh'}>
3031
<Paper sx={{ width: '100%' }}>{component}</Paper>
@@ -37,6 +38,16 @@ const Page = () => {
3738
<Grid item xs={12} display={'flex'}>
3839
<Grid container spacing={1}>
3940
{[
41+
<MetricBoxPlot
42+
key={'transfer-bytes'}
43+
metric={`sum by (server_name) (increase(xrootd_transfer_bytes[$\{range}]))`}
44+
title={'XRootD Transfer Bytes'}
45+
/>,
46+
<MetricBoxPlot
47+
key={'transfer-operations'}
48+
metric={`sum by (server_name) (increase(xrootd_transfer_operations_count[$\{range}]))`}
49+
title={'XRootD Transfer Operations'}
50+
/>,
4051
<BytesMetricBoxPlot
4152
key={'bytes'}
4253
metric={'go_memstats_alloc_bytes'}

‎web_ui/frontend/components/DataTable.tsx‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

0 commit comments

Comments
 (0)