agent console iteration (#221)

agent/agentUi/src/AccessCard.jsx

@@ -1,5 +1,5 @@
 import LanIcon from "@mui/icons-material/Lan";
-import {Button, Card, Chip} from "@mui/material";
+import {AppBar, Box, Button, Card, Chip, Grid2, Toolbar, Typography} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import {releaseAccess} from "./model/handler.js";
 
@@ -10,11 +10,31 @@ const AccessCard = (props) => {
 
     return (
         <Card>
-            <h2><LanIcon /> {props.access.frontendToken}</h2>
-            <p>
-                {props.access.token} &rarr; {props.access.bindAddress}
-            </p>
-            <Button variant="contained" onClick={deleteHandler}><DeleteIcon /></Button>
+            <AppBar position="sticky">
+                <Toolbar variant="dense">
+                    <LanIcon />
+                    <Grid2 container sx={{ flexGrow: 1 }}>
+                        <Grid2 display="flex" justifyContent="center" size="grow">
+                            <Typography variant="h6" component="div">{props.access.frontendToken}</Typography>
+                        </Grid2>
+                    </Grid2>
+                    <Grid2 container>
+                        <Grid2 display="flex" justifyContent="right">
+                            <Chip label="private" size="small" color="warning" />
+                        </Grid2>
+                    </Grid2>
+                </Toolbar>
+            </AppBar>
+            <Box sx={{ p: 2, textAlign: "center" }}>
+                <Typography variant="h6" component="div">
+                    {props.access.token} &rarr; {props.access.bindAddress}
+                </Typography>
+            </Box>
+            <Grid2 container sx={{ flexGrow: 1 }}>
+                <Grid2 display="flex" justifyContent="right" size="grow">
+                    <Button variant="contained" onClick={deleteHandler}><DeleteIcon /></Button>
+                </Grid2>
+            </Grid2>
         </Card>
     );
 }

agent/agentUi/src/AgentUi.jsx

@@ -1,7 +1,6 @@
 import {useEffect, useState} from "react";
 import NavBar from "./NavBar.jsx";
-import {getAgentApi} from "./model/handler.js";
-import {buildOverview} from "./model/overview.js";
+import {getAgentApi, getOverview} from "./model/handler.js";
 import Overview from "./Overview.jsx";
 import NewAccessModal from "./NewAccessModal.jsx";
 import NewShareModal from "./NewShareModal.jsx";
@@ -36,24 +35,8 @@ const AgentUi = () => {
     }, []);
 
     useEffect(() => {
-        getAgentApi().agentStatus((e, d) => {
-            if(e) {
-                setOverview([]);
-                console.log("agentStatus", e);
-            } else {
-                setOverview(buildOverview(d));
-            }
-        });
-
         let interval = setInterval(() => {
-            getAgentApi().agentStatus((e, d) => {
-                if(e) {
-                    setOverview([]);
-                    console.log("agentStatus", e);
-                } else {
-                    setOverview(buildOverview(d));
-                }
-            });
+            setOverview(getOverview());
         }, 1000);
         return () => {
             clearInterval(interval);

agent/agentUi/src/NewShareModal.jsx

@@ -17,8 +17,6 @@ const NewShareModal = (props) => {
         },
     });
 
-    const httpBackendModes = ["proxy", "web", "caddy", "drive"];
-
     return (
         <Modal
             open={props.isOpen}
@@ -89,7 +87,7 @@ const NewShareModal = (props) => {
                         onBlur={form.handleBlur}
                         sx={{ mt: 2 }}
                     />
-                    {httpBackendModes.includes(form.values.backendMode) && (
+                    {form.values.backendMode === "proxy" && (
                         <Box>
                             <FormControlLabel
                                 control={<Checkbox

agent/agentUi/src/ShareCard.jsx

@@ -1,5 +1,5 @@
 import ShareIcon from "@mui/icons-material/Share";
-import {Button, Card} from "@mui/material";
+import {AppBar, Box, Button, Card, Chip, Grid2, Toolbar, Typography} from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import {releaseShare} from "./model/handler.js";
 
@@ -15,12 +15,37 @@ const ShareCard = (props) => {
 
     return (
         <Card>
-            <h2><ShareIcon /> {props.share.token}</h2>
-            <p>
-                ({props.share.shareMode}, {props.share.backendMode}) <br/>
-                {props.share.backendEndpoint} &rarr; {frontends} <br/>
-            </p>
-            <Button variant="contained" onClick={deleteHandler} ><DeleteIcon /></Button>
+            <AppBar position="sticky">
+                <Toolbar variant="dense">
+                    <ShareIcon />
+                    <Grid2 container sx={{ flexGrow: 1 }}>
+                        <Grid2 display="flex" justifyContent="center" size="grow">
+                            <Typography variant="h6" component="div">{props.share.token}</Typography>
+                        </Grid2>
+                    </Grid2>
+                    <Grid2 container>
+                        <Grid2 display="flex" justifyContent="right">
+                            {props.share.shareMode === "public" && (
+                                <Chip label={props.share.shareMode} size="small" color="success" />
+                            )}
+                            {props.share.shareMode === "private" && (
+                                <Chip label={props.share.shareMode} size="small" color="warning" />
+                            )}
+                            <Chip label={props.share.backendMode} size="small" color="info" />
+                        </Grid2>
+                    </Grid2>
+                </Toolbar>
+            </AppBar>
+            <Box sx={{ p: 2, textAlign: "center" }}>
+                <Typography variant="h6" component="div">
+                    {props.share.backendEndpoint} &rarr; {frontends} <br/>
+                </Typography>
+            </Box>
+            <Grid2 container sx={{ flexGrow: 1 }}>
+                <Grid2 display="flex" justifyContent="right" size="grow">
+                    <Button variant="contained" onClick={deleteHandler} ><DeleteIcon /></Button>
+                </Grid2>
+            </Grid2>
         </Card>
     );
 }

agent/agentUi/src/model/handler.js

@@ -1,9 +1,22 @@
 import {AgentApi, ApiClient} from "../api/src/index.js";
+import {buildOverview} from "./overview.js";
 
 export const getAgentApi = () => {
     return new AgentApi(new ApiClient(window.location.origin));
 }
 
+let ovw = [];
+export const getOverview = (o) => {
+    getAgentApi().agentStatus((e, d) => {
+        if(e) {
+            console.log("getOverview", e, d);
+        } else {
+            ovw = structuredClone(buildOverview(d));
+        }
+    });
+    return ovw;
+}
+
 export const createShare = (opts) => {
     switch(opts.shareMode) {
         case "public":

agent/agentUi/src/model/overview.js

@@ -5,6 +5,7 @@ export const buildOverview = (status) => {
             status.accesses.forEach(acc => {
                 let o = structuredClone(acc);
                 o["type"] = "access";
+                o["id"] = acc.frontendToken;
                 overview.push(o);
             });
         }
@@ -12,9 +13,14 @@ export const buildOverview = (status) => {
             status.shares.forEach(shr => {
                 let o = structuredClone(shr);
                 o["type"] = "share";
+                o["id"] = shr.token;
                 overview.push(o);
             });
         }
     }
+    overview.sort((a, b) => {
+        if(a.id < b.id) return -1;
+        if(a.id > b.id) return 1;
+    });
     return overview;
 }

agent/agentUi/src/model/theme.js

@@ -3,8 +3,7 @@ const componentOptions = {
         styleOverrides: {
             root: ({theme}) => theme.unstable_sx({
                 mt: 5,
-                p: 2.5,
-                pt: 3.25,
+                p: 1,
                 borderRadius: 2,
             }),
         }