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