Better Origin metric integration on the Director

CannonLock · CannonLock · commit cea97a7f3baf · 2025-02-05T14:26:50.000-06:00
- Add Origin metric page to the director
- Add click through interactions on data points to allow investigation to outlier servers
diff --git a/web_ui/frontend/app/director/metrics/components/MetricBoxPlot.tsx b/web_ui/frontend/app/director/metrics/components/MetricBoxPlot.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { Chart } from 'react-chartjs-2';
 import {
   CategoryScale,
@@ -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,
@@ -43,6 +45,7 @@ import {
   toBytesString,
 } from '@/helpers/bytes';
 import { evaluateOrReturn, TypeOrTypeFunction } from '@/helpers/util';
+import { useRouter } from 'next/navigation';
 
 ChartJS.register(
   BoxPlotController,
@@ -69,6 +72,7 @@ export const BytesMetricBoxPlot = ({
   title: string;
   options?: ChartOptions;
 }) => {
+  const router = useRouter();
   const { rate, time, resolution, range } = useContext(GraphContext);
 
   const { data } = useSWR(
@@ -118,6 +122,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: {
@@ -153,6 +173,7 @@ export const MetricBoxPlot = ({
   title: string;
   options?: ChartOptions;
 }) => {
+  const router = useRouter();
   const { rate, time, resolution, range } = useContext(GraphContext);
 
   const { data } = useSWR(
@@ -187,6 +208,22 @@ 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') {
+              router.push(
+                '/director/metrics/origin/?server_name=' +
+                  position.chart.tooltip.body[0].lines[0].split(':')[0]
+              );
+            }
+          } catch {}
+        },
         plugins: {
           tooltip: {
             callbacks: {
diff --git a/web_ui/frontend/app/director/metrics/components/StorageTable.tsx b/web_ui/frontend/app/director/metrics/components/StorageTable.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import {
   Box,
   Table,
@@ -86,7 +87,13 @@ export const StorageTable = () => {
                   )
                   .map((d) => (
                     <TableRow key={d.serverName}>
-                      <TableCell>{d.serverName}</TableCell>
+                      <TableCell>
+                        <Link
+                          href={`/director/metrics/origin/?server_name=${d.serverName}`}
+                        >
+                          {d.serverName}
+                        </Link>
+                      </TableCell>
                       <TableCell
                         sx={{
                           bgcolor: chroma
diff --git a/web_ui/frontend/app/director/metrics/components/TransferBarGraph.tsx b/web_ui/frontend/app/director/metrics/components/TransferBarGraph.tsx
@@ -55,7 +55,7 @@ const TransferBarGraph = () => {
 
   const { data } = useSWR<ChartDataset<any, any>>(
     [
-      'transferRateGraph',
+      'transferBarGraph',
       graphContext.rate,
       graphContext.range,
       graphContext.resolution,
@@ -73,6 +73,8 @@ const TransferBarGraph = () => {
     }
   );
 
+  console.log(data);
+
   return (
     <Bar
       data={data}
diff --git a/web_ui/frontend/app/director/metrics/origin/page.tsx b/web_ui/frontend/app/director/metrics/origin/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import OriginMetricPage from '@/components/graphs/OriginMetricPage';
+import { Suspense, useState, useEffect } from 'react';
+import { Skeleton } from '@mui/material';
+import { useSearchParams } from 'next/navigation';
+
+const RemoteOriginPage = () => {
+  const params = useSearchParams();
+  const serverName = params.get('server_name') || undefined;
+
+  return <OriginMetricPage server_name={serverName} />;
+};
+
+const Page = () => {
+  return (
+    <Suspense fallback={<Skeleton />}>
+      <RemoteOriginPage />
+    </Suspense>
+  );
+};
+
+export default Page;
diff --git a/web_ui/frontend/app/origin/metrics/components/CPUGraph.tsx b/web_ui/frontend/app/origin/metrics/components/CPUGraph.tsx
@@ -23,6 +23,7 @@ import {
   GraphDispatchContext,
 } from '@/components/graphs/GraphContext';
 import {
+  buildMetric,
   MatrixResponseData,
   query_raw,
   TimeDuration,
@@ -45,19 +46,21 @@ ChartJS.register(
   Filler
 );
 
-const CPUGraph = () => {
+const CPUGraph = ({ server_name = undefined }: { server_name?: string }) => {
   const graphContext = useContext(GraphContext);
 
   const { data: datasets } = useSWR<ChartDataset<any, any>>(
     [
       'cpuGraph',
+      server_name,
       graphContext.rate,
       graphContext.range,
       graphContext.resolution,
       graphContext.time,
     ],
     () =>
       getData(
+        server_name,
         graphContext.rate,
         graphContext.range,
         graphContext.resolution,
@@ -114,12 +117,14 @@ const CPUGraph = () => {
 };
 
 const getData = async (
+  server_name: string | undefined,
   rate: TimeDuration,
   range: TimeDuration,
   resolution: TimeDuration,
   time: DateTime
 ): Promise<ChartDataset<any, any>> => {
-  const query = `avg by (instance) (irate(process_cpu_seconds_total[${rate}]))[${range}:${resolution}]`;
+  const metric = buildMetric('process_cpu_seconds_total', { server_name });
+  const query = `avg by (instance) (irate(${metric}[${rate}]))[${range}:${resolution}]`;
   const dataResponse = await query_raw<MatrixResponseData>(
     query,
     time.toSeconds()
diff --git a/web_ui/frontend/app/origin/metrics/components/MemoryGraph.tsx b/web_ui/frontend/app/origin/metrics/components/MemoryGraph.tsx
@@ -22,6 +22,7 @@ import {
   GraphDispatchContext,
 } from '@/components/graphs/GraphContext';
 import {
+  buildMetric,
   MatrixResponseData,
   query_raw,
   TimeDuration,
@@ -43,7 +44,7 @@ ChartJS.register(
   Colors
 );
 
-const MemoryGraph = () => {
+const MemoryGraph = ({ server_name }: { server_name?: string }) => {
   const graphContext = useContext(GraphContext);
 
   const { data: datasets } = useSWR<ChartDataset<any, any>>(
@@ -56,6 +57,7 @@ const MemoryGraph = () => {
     ],
     () =>
       getData(
+        buildMetric('go_memstats_alloc_bytes', { server_name }),
         graphContext.rate,
         graphContext.range,
         graphContext.resolution,
@@ -112,12 +114,13 @@ const MemoryGraph = () => {
 };
 
 const getData = async (
+  metric: string,
   rate: TimeDuration,
   range: TimeDuration,
   resolution: TimeDuration,
   time: DateTime
 ): Promise<ChartDataset<any, any>> => {
-  const query = `(go_memstats_alloc_bytes / 1024 / 1024)[${range}:${resolution}]`;
+  const query = `(${metric} / 1024 / 1024)[${range}:${resolution}]`;
   const dataResponse = await query_raw<MatrixResponseData>(
     query,
     time.toSeconds()
diff --git a/web_ui/frontend/app/origin/metrics/components/ProjectsTable.tsx b/web_ui/frontend/app/origin/metrics/components/ProjectsTable.tsx
@@ -10,6 +10,7 @@ import {
   TableRow,
 } from '@mui/material';
 import {
+  buildMetric,
   MatrixResponseData,
   query_raw,
   TimeDuration,
@@ -27,12 +28,16 @@ interface ProjectData {
   bytesAccessed: string;
 }
 
-export const ProjectTable = () => {
+export const ProjectTable = ({
+  server_name = undefined,
+}: {
+  server_name?: string;
+}) => {
   const { rate, time, range, resolution } = useContext(GraphContext);
 
   const { data: projectData, error: projectError } = useSWR(
     ['projectData', time, range],
-    () => getProjectData(range, time)
+    () => getProjectData(server_name, range, time)
   );
 
   return (
@@ -66,11 +71,18 @@ export const ProjectTable = () => {
 };
 
 const getProjectData = async (
+  server_name: string | undefined,
   range: TimeDuration,
   time: DateTime
 ): Promise<ProjectData[]> => {
+  const metric = buildMetric('xrootd_transfer_bytes', {
+    type: { comparator: '!=', value: 'value' },
+    proj: { comparator: '!=', value: '' },
+    server_name,
+  });
+
   const queryResponse = await query_raw<VectorResponseData>(
-    `sum by (proj) (increase(xrootd_transfer_bytes{type!="write", proj!=""}[${range}]))`,
+    `sum by (proj) (increase(${metric}[${range}]))`,
     time.toSeconds()
   );
   const result = queryResponse.data.result;
diff --git a/web_ui/frontend/app/origin/metrics/components/StorageGraph.tsx b/web_ui/frontend/app/origin/metrics/components/StorageGraph.tsx
@@ -15,6 +15,7 @@ import { grey, blue } from '@mui/material/colors';
 
 import { GraphContext } from '@/components/graphs/GraphContext';
 import {
+  buildMetric,
   MatrixResponseData,
   query_raw,
   TimeDuration,
@@ -31,12 +32,16 @@ interface storageData {
   free: number;
 }
 
-const StorageGraph = () => {
+const StorageGraph = ({
+  server_name = undefined,
+}: {
+  server_name?: string;
+}) => {
   const graphContext = useContext(GraphContext);
 
   const { data } = useSWR<storageData>(
-    ['getStorageData', graphContext.time],
-    () => getStorageData(graphContext.time.toSeconds())
+    ['getStorageData', graphContext.time, server_name],
+    () => getStorageData(server_name, graphContext.time.toSeconds())
   );
 
   const [usedBytes, freeBytes] = convertListBytes([
@@ -74,9 +79,14 @@ const StorageGraph = () => {
 };
 
 const getStorageData = async (
+  server_name: string | undefined,
   time: number = DateTime.now().toSeconds()
 ): Promise<{ free: number; used: number }> => {
-  const url = `sum by (type) (xrootd_storage_volume_bytes{server_type="origin"})`;
+  const metric = buildMetric('xrootd_storage_volume_bytes', {
+    server_type: 'origin',
+    server_name,
+  });
+  const url = `sum by (type) (${metric})`;
   const response = await query_raw<VectorResponseData>(url, time);
 
   const result = response.data.result;
diff --git a/web_ui/frontend/app/origin/metrics/components/TransferRateGraph.tsx b/web_ui/frontend/app/origin/metrics/components/TransferRateGraph.tsx
@@ -24,6 +24,7 @@ import {
   GraphDispatchContext,
 } from '@/components/graphs/GraphContext';
 import {
+  buildMetric,
   MatrixResponseData,
   query_raw,
   TimeDuration,
@@ -46,7 +47,11 @@ ChartJS.register(
   Colors
 );
 
-const TransferRateGraph = () => {
+const TransferRateGraph = ({
+  server_name = undefined,
+}: {
+  server_name?: string;
+}) => {
   const graphContext = useContext(GraphContext);
   const dispatch = useContext(GraphDispatchContext);
 
@@ -62,6 +67,7 @@ const TransferRateGraph = () => {
     ],
     () =>
       getData(
+        server_name,
         graphContext.rate,
         graphContext.range,
         graphContext.resolution,
@@ -174,12 +180,16 @@ const toBytesDataset = (
 };
 
 const getData = async (
+  server_name: string | undefined,
   rate: TimeDuration,
   range: TimeDuration,
   resolution: TimeDuration,
   time: DateTime
 ): Promise<ChartDataset<'line', { x: number; y: number }[]>[]> => {
-  const query = `sum by (path, type) (rate(xrootd_transfer_bytes[${rate}]))[${range}:${resolution}]`;
+  const metric = buildMetric('xrootd_transfer_bytes', {
+    server_name: server_name,
+  });
+  const query = `sum by (path, type) (rate(${metric}[${rate}]))[${range}:${resolution}]`;
   const dataResponse = await query_raw<MatrixResponseData>(
     query,
     time.toSeconds()
diff --git a/web_ui/frontend/app/origin/metrics/page.tsx b/web_ui/frontend/app/origin/metrics/page.tsx
diff --git a/web_ui/frontend/components/graphs/GraphContext.tsx b/web_ui/frontend/components/graphs/GraphContext.tsx
diff --git a/web_ui/frontend/components/graphs/OriginMetricPage.tsx b/web_ui/frontend/components/graphs/OriginMetricPage.tsx
diff --git a/web_ui/frontend/components/graphs/prometheus.tsx b/web_ui/frontend/components/graphs/prometheus.tsx
