Add Cache metrics page

web_ui/frontend/app/cache/metrics/layout.tsx

@@ -0,0 +1,2 @@
+import MetricLayout from '@/components/layout/MetricLayout';
+export default MetricLayout;

web_ui/frontend/app/cache/metrics/page.tsx

@@ -0,0 +1,153 @@
+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>
+  );
+};
+
+export default Page;

web_ui/frontend/app/director/metrics/layout.tsx

@@ -1,23 +1,12 @@
 import { ReactNode } from 'react';
-import { PaddedContent } from '@/components/layout';
-import dynamic from 'next/dynamic';
-
-const GraphProvider = dynamic(
-  () => import('../../../components/graphs/GraphContext'),
-  { ssr: !!false }
-);
 
-const GraphOverlay = dynamic(
-  () => import('../../../components/graphs/GraphOverlay'),
-  { ssr: !!false }
-);
+import { PaddedContent } from '@/components/layout';
+import MetricLayout from '@/components/layout/MetricLayout';
 
 const Layout = ({ children }: { children: ReactNode }) => {
   return (
     <PaddedContent>
-      <GraphProvider>
-        <GraphOverlay>{children}</GraphOverlay>
-      </GraphProvider>
+      <MetricLayout>{children}</MetricLayout>
     </PaddedContent>
   );
 };

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

@@ -1,8 +1,8 @@
 import { Grid, Paper } from '@mui/material';
 import { green } from '@mui/material/colors';
 
-import { ProjectTable } from '@/app/origin/metrics/components';
-import { BigBytesMetric } from '@/app/origin/metrics/components/BigNumber';
+import { ProjectTable, BigBytesMetric } from '@/components/metrics';
+
 import {
   BytesMetricBoxPlot,
   MetricBoxPlot,

web_ui/frontend/app/navigation.tsx

@@ -84,6 +84,7 @@ const NavigationConfig: NavigationConfiguration = {
   ],
   cache: [
     { title: 'Dashboard', href: '/cache/', icon: <Dashboard /> },
+    { title: 'Metrics', href: '/cache/metrics/', icon: <Equalizer /> },
     { title: 'Config', href: '/config/', icon: <Build /> },
   ],
   shared: [

web_ui/frontend/app/origin/metrics/layout.tsx

@@ -1,22 +1,2 @@
-import { ReactNode } from 'react';
-import dynamic from 'next/dynamic';
-
-const GraphProvider = dynamic(
-  () => import('../../../components/graphs/GraphContext'),
-  { ssr: !!false }
-);
-
-const GraphOverlay = dynamic(
-  () => import('../../../components/graphs/GraphOverlay'),
-  { ssr: !!false }
-);
-
-const Layout = ({ children }: { children: ReactNode }) => {
-  return (
-    <GraphProvider>
-      <GraphOverlay>{children}</GraphOverlay>
-    </GraphProvider>
-  );
-};
-
-export default Layout;
+import MetricLayout from '@/components/layout/MetricLayout';
+export default MetricLayout;

web_ui/frontend/app/origin/metrics/page.tsx

@@ -2,17 +2,14 @@ import { Box, Grid, Paper, Typography } from '@mui/material';
 import { green, grey, blue } from '@mui/material/colors';
 
 import {
+  BigMetric,
   ProjectTable,
-  TransferRateGraph,
-} from '@/app/origin/metrics/components';
-import { CPUGraph } from '@/app/origin/metrics/components/CPUGraph';
-import { MemoryGraph } from '@/app/origin/metrics/components/MemoryGraph';
-import {
   BigBytesMetric,
-  BigMetric,
-  BigNumber,
-} from '@/app/origin/metrics/components/BigNumber';
-import { StorageGraph } from '@/app/origin/metrics/components/StorageGraph';
+  StorageGraph,
+  TransferRateGraph,
+  CPUGraph,
+  MemoryGraph,
+} from '@/components/metrics';
 
 const Page = () => {
   return (

web_ui/frontend/components/layout/MetricLayout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+
+const GraphProvider = dynamic(
+  () => import('@/components/graphs/GraphContext'),
+  { ssr: !!false }
+);
+
+const GraphOverlay = dynamic(() => import('@/components/graphs/GraphOverlay'), {
+  ssr: !!false,
+});
+
+const MetricLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <GraphProvider>
+      <GraphOverlay>{children}</GraphOverlay>
+    </GraphProvider>
+  );
+};
+
+export default MetricLayout;

web_ui/frontend/app/origin/metrics/components/ProjectsTable.tsx → web_ui/frontend/components/metrics/ProjectsTable.tsx

@@ -27,7 +27,7 @@ interface ProjectData {
   bytesAccessed: string;
 }
 
-export const ProjectTable = () => {
+const ProjectTable = () => {
   const { rate, time, range, resolution } = useContext(GraphContext);
 
   const { data: projectData, error: projectError } = useSWR(
@@ -91,3 +91,5 @@ const getProjectData = async (
 
   return projectData;
 };
+
+export { ProjectTable };

web_ui/frontend/components/metrics/index.ts

@@ -0,0 +1,6 @@
+export * from './BigNumber';
+export { CPUGraph } from './CPUGraph';
+export { MemoryGraph } from './MemoryGraph';
+export { StorageGraph } from './StorageGraph';
+export { TransferRateGraph } from './TransferRateGraph';
+export { ProjectTable } from './ProjectsTable';