Skip to content

Origins on director #1990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CannonLock merged 7 commits into from
Apr 8, 2025
Merged

Origins on director #1990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
09b02e3
Better Origin metric integration on the Director
CannonLock Feb 5, 2025
f4eb113
Fixup the Cache page and add enhance the onClick ability to provide S…
CannonLock Apr 1, 2025
88bc244
Enhance Director Server Cards
CannonLock Apr 1, 2025
39615a5
Director Metrics Page Clean Up
CannonLock Apr 1, 2025
97b69d4
Apply suggestions from code review
CannonLock Apr 1, 2025
1d1a3c7
Reformat via Prettier
CannonLock Apr 1, 2025
e277357
Address Review Comments
CannonLock Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 2 additions & 152 deletions web_ui/frontend/app/cache/metrics/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,153 +1,3 @@
import { Box, Grid, Paper, Typography } from '@mui/material';
import { green, grey, blue } from '@mui/material/colors';

import {
BigMetric,
ProjectTable,
BigBytesMetric,
StorageGraph,
TransferRateGraph,
CPUGraph,
MemoryGraph,
} from '@/components/metrics';

const Page = () => {
return (
<Grid container spacing={1} direction={'row'}>
<Grid item xs={4} display={'flex'}>
<Grid
container
spacing={1}
justifyContent={'space-between'}
flexGrow={1}
>
{[
<ProjectTable key={'project-table'} />,
<BigBytesMetric
key={'rx'}
metric={'xrootd_server_bytes{direction="rx"}'}
title={'Bytes Received'}
color={green[300]}
/>,
<BigBytesMetric
key={'tx'}
metric={'xrootd_server_bytes{direction="tx"}'}
title={'Bytes Transferred'}
color={green[300]}
/>,
].map((component, index) => (
<Grid key={index} item xs={12} display={'flex'} height={'28vh'}>
<Paper sx={{ width: '100%' }}>{component}</Paper>
</Grid>
))}
</Grid>
</Grid>
<Grid item xs={8}>
<Grid
container
spacing={1}
justifyContent={'space-between'}
flexGrow={1}
>
<Grid item xs={12} display={'flex'} height={'28vh'}>
<Paper sx={{ flexGrow: 1 }}>
<TransferRateGraph />
</Paper>
</Grid>
<Grid item xs={12} display={'flex'} height={'28vh'}>
<Paper sx={{ flexGrow: 1 }}>
<CPUGraph />
</Paper>
</Grid>
<Grid item xs={12} display={'flex'} height={'28vh'}>
<Paper sx={{ flexGrow: 1 }}>
<MemoryGraph />
</Paper>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Paper>
<Box p={1} bgcolor={grey[200]} borderRadius={1}>
<Grid container>
<Grid item xs={6}>
<Grid container>
<Grid item xs={4}>
<BigMetric
title={'Pelican Threads'}
finalType={'last'}
metric={'go_threads'}
color={green[300]}
/>
</Grid>
<Grid item xs={4}>
<BigMetric
title={'XRootD Running Threads'}
finalType={'last'}
metric={'xrootd_sched_thread_count{state="running"}'}
color={blue[200]}
/>
</Grid>
<Grid item xs={4}>
<BigMetric
title={'XRootD Idle Threads'}
metric={'xrootd_sched_thread_count{state="idle"}'}
finalType={'last'}
color={grey[400]}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container>
<Grid item xs={4}>
<BigBytesMetric
metric={'xrootd_transfer_bytes{type="read"}'}
title={'Bytes `read`'}
finalType={'sum'}
color={green[300]}
/>
</Grid>
<Grid item xs={4}>
<BigBytesMetric
metric={'xrootd_transfer_bytes{type="readv"}'}
title={'Bytes `readv`'}
finalType={'sum'}
color={green[300]}
/>
</Grid>
<Grid item xs={4}>
<BigBytesMetric
metric={'xrootd_transfer_bytes{type="write"}'}
title={'Bytes `write`'}
finalType={'sum'}
color={green[300]}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<BigMetric
title={'Go Routines'}
finalType={'last'}
metric={'go_goroutines'}
color={green[300]}
/>
</Grid>
<Grid item xs={6}>
<BigMetric
title={'XRootD Server Connections'}
metric={'xrootd_server_connection_count'}
finalType={'last'}
color={green[300]}
/>
</Grid>
</Grid>
</Box>
</Paper>
</Grid>
</Grid>
);
};

import CacheMetricPage from '@/components/graphs/CacheMetricPage';
const Page = () => <CacheMetricPage />;
export default Page;
2 changes: 0 additions & 2 deletions web_ui/frontend/app/cache/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,9 @@

import { Box, Grid, Typography } from '@mui/material';

import RateGraph from '@/components/graphs/RateGraph';
import StatusBox from '@/components/StatusBox';
import { DataPoint, TimeDuration } from '@/components/graphs/prometheus';
import FederationOverview from '@/components/FederationOverview';
import LineGraph from '@/components/graphs/LineGraph';

export default function Home() {
return (
Expand Down
23 changes: 21 additions & 2 deletions web_ui/frontend/app/director/components/DirectorCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
} from '@mui/material';
import { red, grey } from '@mui/material/colors';
import { Server } from '@/index';
import { Language } from '@mui/icons-material';
import { Equalizer, Language } from '@mui/icons-material';
import { NamespaceIcon } from '@/components/Namespace/index';
import useSWR from 'swr';
import Link from 'next/link';
Expand Down Expand Up @@ -80,7 +80,10 @@ export const DirectorCard = ({ server, authenticated }: DirectorCardProps) => {
<NamespaceIcon
serverType={server.type.toLowerCase() as 'cache' | 'origin'}
/>
<Typography sx={{ pt: '2px' }}>{server.name}</Typography>
<Typography sx={{ pt: '2px' }}>
{server.name}
{server?.version && <> &#x2022; {server.version}</>}
</Typography>
</Box>
<Box display={'flex'} flexDirection={'row'}>
<Box my={'auto'} display={'flex'}>
Expand Down Expand Up @@ -136,6 +139,22 @@ export const DirectorCard = ({ server, authenticated }: DirectorCardProps) => {
</Link>
</Box>
)}
{authenticated &&
authenticated.role == 'admin' &&
server?.webUrl && (
<Box ml={1}>
<Link
href={`/director/metrics/${server.type.toLowerCase()}/?server_name=${server.name}`}
target={'_blank'}
>
<Tooltip title={'View Server Metrics'}>
<IconButton size={'small'}>
<Equalizer />
</IconButton>
</Tooltip>
</Link>
</Box>
)}
</Box>
</Box>
</Box>
Expand Down
23 changes: 23 additions & 0 deletions web_ui/frontend/app/director/metrics/cache/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client';

import CacheMetricPage from '@/components/graphs/CacheMetricPage';
import { Suspense } from 'react';
import { Skeleton } from '@mui/material';
import { useSearchParams } from 'next/navigation';

const RemoteCachePage = () => {
const params = useSearchParams();
const serverName = params.get('server_name') || undefined;

return <CacheMetricPage server_name={serverName} />;
};

const Page = () => {
return (
<Suspense fallback={<Skeleton />}>
<RemoteCachePage />
</Suspense>
);
};

export default Page;
66 changes: 65 additions & 1 deletion web_ui/frontend/app/director/metrics/components/MetricBoxPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';

import Link from 'next/link';
import { Chart } from 'react-chartjs-2';
import {
CategoryScale,
Expand All @@ -19,6 +20,7 @@ import {
TooltipLabelStyle,
TooltipItem,
} from 'chart.js';
import { getRelativePosition } from 'chart.js/helpers';
import { useContext, useEffect, useMemo, useState } from 'react';
import {
BoxAndWiskers,
Expand All @@ -42,7 +44,15 @@ import {
toBytes,
toBytesString,
} from '@/helpers/bytes';
import { evaluateOrReturn, TypeOrTypeFunction } from '@/helpers/util';
import {
alertOnError,
evaluateOrReturn,
TypeOrTypeFunction,
} from '@/helpers/util';
import { useRouter } from 'next/navigation';
import { ServerGeneral, ServerType } from '@/types';
import { getDirectorServers } from '@/helpers/get';
import { AlertDispatchContext } from '@/components/AlertProvider';

ChartJS.register(
BoxPlotController,
Expand All @@ -69,6 +79,7 @@ export const BytesMetricBoxPlot = ({
title: string;
options?: ChartOptions;
}) => {
const router = useRouter();
const { rate, time, resolution, range } = useContext(GraphContext);

const { data } = useSWR(
Expand Down Expand Up @@ -118,6 +129,22 @@ export const BytesMetricBoxPlot = ({
type: 'logarithmic',
},
},
onClick: function (evt: any, item: any) {
if (item.length === 0) {
return;
}
const position = getRelativePosition(evt, evt.Chart) as any; // Typing is wrong
try {
const serverName =
position.chart.tooltip.body[0].lines[0].split(':')[0];
if (serverName != 'Missing Server Name') {
router.push(
'/director/metrics/origin/?server_name=' +
position.chart.tooltip.body[0].lines[0].split(':')[0]
);
}
} catch {}
},
plugins: {
tooltip: {
callbacks: {
Expand Down Expand Up @@ -153,7 +180,9 @@ export const MetricBoxPlot = ({
title: string;
options?: ChartOptions;
}) => {
const router = useRouter();
const { rate, time, resolution, range } = useContext(GraphContext);
const dispatch = useContext(AlertDispatchContext);

const { data } = useSWR(
[metric, rate, time, resolution, range],
Expand All @@ -163,6 +192,16 @@ export const MetricBoxPlot = ({
}
);

const { data: servers } = useSWR<ServerGeneral[] | undefined>(
'getDirectorServers',
async () =>
await alertOnError(
getDirectorServers,
'Failed to fetch servers',
dispatch
)
);

const chartData = useMemo(() => {
return {
labels: [`${title}`],
Expand All @@ -187,6 +226,30 @@ export const MetricBoxPlot = ({
type: 'logarithmic',
},
},
onClick: function (evt: any, item: any) {
if (item.length === 0) {
return;
}
const position = getRelativePosition(evt, evt.Chart) as any; // Typing is broken here for the Chartjs library
try {
const serverName =
position.chart.tooltip.body[0].lines[0].split(':')[0];
if (serverName != 'Missing Server Name') {
let serverType: ServerType = 'Cache';
if (servers) {
const server = servers.find((s) => s.name == serverName);
if (server) {
serverType = server.type;
}
}

router.push(
`/director/metrics/${serverType.toLowerCase()}/?server_name=` +
position.chart.tooltip.body[0].lines[0].split(':')[0]
);
}
} catch {}
},
plugins: {
tooltip: {
callbacks: {
Expand Down Expand Up @@ -241,6 +304,7 @@ export const getMetricData = async (
return result?.metric?.server_name || 'Missing Server Name';
});

// console.log(data);
return {
data,
labels,
Expand Down
Loading
Loading