Data Exports Overview Table PelicanPlatform#220

- Implements data export table with existing config Closes PelicanPlatform#220
CannonLock · Nov 27, 2023 · a39a0b4 · a39a0b4
1 parent d9f61b6
commit a39a0b4
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 7 deletions.
diff --git a/origin_ui/src/app/(dashboard)/page.tsx b/origin_ui/src/app/(dashboard)/page.tsx
@@ -18,20 +18,21 @@
 
 "use client"
 
+import {Box, Grid, Typography} from "@mui/material";
+
 import RateGraph from "@/components/graphs/RateGraph";
 import StatusBox from "@/components/StatusBox";
-
+import {DataExportTable} from "@/components/DataExportTable";
 import {TimeDuration} from "@/components/graphs/prometheus";
 
-import {Box, Grid} from "@mui/material";
-
 
 export default function Home() {
 
     return (
         <Box width={"100%"}>
             <Grid container spacing={2}>
                 <Grid item xs={12} lg={4}>
+                    <Typography variant="h4">Status</Typography>
                     <StatusBox/>
                 </Grid>
                 <Grid item xs={12} lg={8}>
@@ -77,6 +78,12 @@ export default function Home() {
                         </Box>
                     </Box>
                 </Grid>
+                <Grid item xs={12} lg={4}>
+                    <Typography variant={"h4"} component={"h2"} mb={1}>Data Exports</Typography>
+                    <Box sx={{backgroundColor: "#F6F6F6", borderRadius: "1rem", overflow: "hidden"}}>
+                        <DataExportTable/>
+                    </Box>
+                </Grid>
             </Grid>
 
         </Box>

diff --git a/origin_ui/src/components/DataExportTable.tsx b/origin_ui/src/components/DataExportTable.tsx
@@ -0,0 +1,107 @@
+import {Table, TableCell, TableBody, TableContainer, TableHead, TableRow, Paper, Typography, Box} from '@mui/material';
+import React, {FunctionComponent, ReactElement, useEffect, useMemo, useRef, useState} from "react";
+import {Skeleton} from "@mui/material";
+
+
+
+interface Record {
+    [key: string]: string | number | boolean | null
+}
+
+interface ExportData extends Record {
+    "Type": string
+    "Local Path": string
+    "Routing Key": string
+}
+
+export const TableCellOverflow: FunctionComponent<any> = ({ children, ...props }) => {
+
+    const cellRef = useRef<HTMLTableCellElement>(null);
+    const [overflow, setOverflow] = useState<boolean>(false);
+
+    useEffect(() => {
+        if(cellRef.current) {
+            setOverflow(cellRef.current.scrollWidth > cellRef.current.clientWidth)
+        }
+    }, [])
+
+    return (
+        <TableCell
+            ref={cellRef}
+            sx={{
+                overflowX: "scroll",
+                whiteSpace: "nowrap",
+                boxShadow: overflow ? "inset -13px 0px 20px -21px rgba(0,0,0,0.75)" : "none",
+                ...props?.sx
+        }}>
+            {children}
+        </TableCell>
+    )
+}
+
+export const RecordTable = ({ data }: { data: Record[] }): ReactElement  => {
+    return (
+        <TableContainer>
+            <Table sx={{tableLayout: "fixed"}}>
+                <TableHead>
+                    <TableRow>
+                        {Object.keys(data[0]).map((key, index) => (
+                            <TableCell key={index} sx={{width: index == 0 ? "20%" : "40%"}}>{key}</TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {data.map((record, index) => (
+                        <TableRow key={index}>
+                            {Object.values(record).map((value, index) => (
+                                <TableCellOverflow key={index} sx={{width: index == 0 ? "20%" : "40%"}}>{value == null ? "NULL" : value}</TableCellOverflow>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    )
+}
+
+
+export const DataExportTable = () => {
+
+    const [data, setData] = useState<ExportData[] | undefined>(undefined);
+    const [error, setError] = useState<string | undefined>(undefined);
+
+
+    const getData = async () => {
+        let response = await fetch("/api/v1.0/config")
+        if (response.ok) {
+            const responseData = await response.json()
+
+            setData([{
+                "Type": "POSIX",
+                "Local Path": ["", undefined].includes(responseData?.Xrootd?.Mount) ? "NULL" : responseData?.Xrootd?.Mount,
+                "Routing Key": ["", undefined].includes(responseData?.Origin?.NamespacePrefix) ? "NULL" : responseData?.Origin?.NamespacePrefix
+            }])
+
+        } else {
+            setError("Failed to fetch config, response status: " + response.status)
+        }
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+
+    if(error){
+        return (
+            <Box p={1}>
+                <Typography sx={{color: "red"}} variant={"subtitle2"}>{error}</Typography>
+            </Box>
+        )
+    }
+
+    return (
+        <>
+            {data ? <RecordTable data={data} /> : <Skeleton variant={"rectangular"} height={200} width={"100%"} />}
+        </>
+    )
+}
diff --git a/origin_ui/src/components/StatusBox.tsx b/origin_ui/src/components/StatusBox.tsx
@@ -113,7 +113,6 @@ export default function StatusBox() {
     if(status === undefined || error !== undefined) {
         return (
             <Box>
-                <Typography variant="h4">Status</Typography>
                 <Box minHeight={"300px"}>
                     {
                         error ?
@@ -141,9 +140,6 @@ export default function StatusBox() {
 
     return (
         <Box>
-            <Box>
-                <Typography variant="h4">Status</Typography>
-            </Box>
             <Box>
                 {statusComponents}
             </Box>