github.com/pelicanplatform/pelican@v1.0.5/web_ui/frontend/components/NamespaceTable.tsx (about)

     1  import {Typography, Box, Button, ButtonProps} from '@mui/material';
     2  import React, {
     3      useCallback,
     4      useEffect,
     5      useState
     6  } from "react";
     7  import {Skeleton} from "@mui/material";
     8  
     9  import DataTable, {Record} from "@/components/DataTable";
    10  import {TableCellOverflow, TableCellButton} from "@/components/Cell";
    11  
    12  
    13  interface Namespace extends Record {
    14      id: number
    15      prefix: string
    16      pubKey: string
    17      identity: string
    18      adminMetadata: string
    19  }
    20  
    21  
    22  interface ServerTableProps {
    23      type?: "cache" | "origin"
    24  }
    25  
    26  const NamespaceTable = ({type} : ServerTableProps) => {
    27  
    28      const [data, setData] = useState<Namespace[] | undefined>(undefined);
    29      const [error, setError] = useState<string | undefined>(undefined);
    30  
    31      const keyToName = {
    32          "prefix": {
    33              name: "Prefix",
    34              cellNode: TableCellOverflow
    35          },
    36          "identity": {
    37              name: "Identity",
    38              cellNode: TableCellOverflow
    39          },
    40          "admin_metadata": {
    41              name: "Admin Metadata",
    42              cellNode: TableCellOverflow
    43          },
    44          "id": {
    45              name: "JWK Download",
    46              cellNode: ({children} : {children: number}) => <TableCellButton color={"primary"} href={`/api/v1.0/registry_ui/namespaces/${children}/pubkey`}>Download</TableCellButton>
    47          }
    48      }
    49  
    50      const getData = useCallback(async () => {
    51          const url = new URL("/api/v1.0/registry_ui/namespaces", window.location.origin)
    52          if (type){
    53              url.searchParams.append("server_type", type)
    54          }
    55  
    56          let response = await fetch(url)
    57          if (response.ok) {
    58              const responseData: Namespace[] = await response.json()
    59              responseData.sort((a, b) => a.id > b.id ? 1 : -1)
    60              setData(responseData)
    61  
    62          } else {
    63              setError("Failed to fetch config, response status: " + response.status)
    64          }
    65      }, [type])
    66  
    67      useEffect(() => {
    68          getData()
    69      }, [])
    70  
    71      if(error){
    72          return (
    73              <Box p={1}>
    74                  <Typography sx={{color: "red"}} variant={"subtitle2"}>{error}</Typography>
    75              </Box>
    76          )
    77      }
    78  
    79      return (
    80          <>
    81              {data ? <DataTable columnMap={keyToName} data={data} /> : <Skeleton variant={"rectangular"} height={200} width={"100%"} />}
    82          </>
    83      )
    84  }
    85  
    86  export default NamespaceTable