basic bandwidth limit indicators (#649)

ui/src/AccessPanel.tsx

@@ -9,13 +9,15 @@ import PropertyTable from "./PropertyTable.tsx";
 import ReleaseAccessModal from "./ReleaseAccessModal.tsx";
 import {getMetadataApi} from "./model/api.ts";
 import ClipboardText from "./ClipboardText.tsx";
+import LimitedWarning from "./LimitedWarning.tsx";
 
 interface AccessPanelProps {
     access: Node;
 }
 
 const AccessPanel = ({ access }: AccessPanelProps) => {
     const user = useApiConsoleStore((state) => state.user);
+    const limited = useApiConsoleStore((state) => state.limited);
     const [detail, setDetail] = useState<Frontend>(null);
     const [releaseAccessOpen, setReleaseAccessOpen] = useState<boolean>(false);
     const openReleaseAccess = () => {
@@ -90,6 +92,7 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
                         <Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
                             <h5 style={{ margin: 0 }}>A private access frontend <code>{access.id}</code>{detail && detail.bindAddress ? <span> at <code>{detail.bindAddress}</code></span> : null}</h5>
                         </Grid2>
+                        { limited ? <LimitedWarning /> : null }
                         <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
                             <Tooltip title="Release Access">
                                 <Button variant="contained" color="error" onClick={openReleaseAccess}><DeleteIcon /></Button>

ui/src/AccountPanel.tsx

@@ -12,13 +12,15 @@ import RegenerateAccountTokenModal from "./RegenerateAccountTokenModal.tsx";
 import ClipboardText from "./ClipboardText.tsx";
 import AccountMetricsModal from "./AccountMetricsModal.tsx";
 import MetricsIcon from "@mui/icons-material/QueryStats";
+import LimitedWarning from "./LimitedWarning.tsx";
 
 interface AccountPanelProps {
     account: Node;
 }
 
 const AccountPanel = ({ account }: AccountPanelProps) => {
     const user = useApiConsoleStore((state) => state.user);
+    const limited = useApiConsoleStore((state) => state.limited);
     const [accountMetricsOpen, setAccountMetricsOpen] = useState<boolean>(false);
     const openAccountMetrics = () => {
         setAccountMetricsOpen(true);
@@ -59,6 +61,7 @@ const AccountPanel = ({ account }: AccountPanelProps) => {
                 <Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2 }} alignItems="center">
                     <h5 style={{ margin: 0 }}>Your zrok account, <code>{user.email}</code></h5>
                 </Grid2>
+                { limited ? <LimitedWarning /> : null }
                 <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
                     <Tooltip title="Account Metrics">
                         <Button variant="contained" onClick={openAccountMetrics}><MetricsIcon /></Button>

ui/src/ApiConsole.tsx

@@ -20,6 +20,7 @@ interface ApiConsoleProps {
 const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const user = useApiConsoleStore((state) => state.user);
     const userRef = useRef<User>(user);
+    const updateLimited = useApiConsoleStore((state) => state.updateLimited);
     const graph = useApiConsoleStore((state) => state.graph);
     const updateGraph = useApiConsoleStore((state) => state.updateGraph);
     const oldGraph = useRef<Graph>(graph);
@@ -53,6 +54,7 @@ const ApiConsole = ({ logout }: ApiConsoleProps) => {
     const retrieveOverview = () => {
         getMetadataApi(userRef.current).overview()
             .then(d => {
+                updateLimited(d.accountLimited!);
                 let newVov = mergeGraph(oldGraph.current, user, d.accountLimited!, d);
                 if(!nodesEqual(oldGraph.current.nodes, newVov.nodes)) {
                     console.log("refreshed vov", oldGraph.current.nodes, newVov.nodes);

ui/src/EnvironmentPanel.tsx

@@ -11,6 +11,7 @@ import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
 import {getMetadataApi} from "./model/api.ts";
 import MetricsIcon from "@mui/icons-material/QueryStats";
 import EnvironmentMetricsModal from "./EnvironmentMetricsModal.tsx";
+import LimitedWarning from "./LimitedWarning.tsx";
 
 interface EnvironmentPanelProps {
     environment: Node;
@@ -69,6 +70,7 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
                 <Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2, p: 0 }} alignItems="center">
                     <h5 style={{ margin: 0 }}>An environment on a host with address <code>{detail ? detail.address : ''}</code></h5>
                 </Grid2>
+                { environment.data.limited ? <LimitedWarning /> : null }
                 <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
                     <Tooltip title="Environment Metrics">
                         <Button variant="contained" onClick={openEnvironmentMetrics}><MetricsIcon /></Button>

ui/src/LimitedWarning.tsx

@@ -0,0 +1,12 @@
+import {Grid2} from "@mui/material";
+import React from "react";
+
+const LimitedWarning = () => {
+    return (
+        <Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2 }} alignItems="center">
+            <h5 style={{ margin: 0, color: "red" }}>Your account is currently over the assigned bandwidth limit!</h5>
+        </Grid2>
+    );
+}
+
+export default LimitedWarning;

ui/src/NavBar.tsx

@@ -2,7 +2,9 @@ import {AppBar, Box, Button, Grid2, Toolbar, Tooltip, Typography} from "@mui/mat
 import LogoutIcon from "@mui/icons-material/Logout";
 import VisualizerIcon from "@mui/icons-material/Hub";
 import TabularIcon from "@mui/icons-material/TableRows";
-import zroket from "./assets/zrok-1.0.0-rocket-green.svg";
+import LimitIcon from "@mui/icons-material/CrisisAlert";
+import zrokLogo from "./assets/zrok-1.0.0-rocket-green.svg";
+import useApiConsoleStore from "./model/store.ts";
 
 interface NavBarProps {
     logout: () => void;
@@ -11,6 +13,16 @@ interface NavBarProps {
 }
 
 const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
+    const limited = useApiConsoleStore((state) => state.limited);
+
+    const limitedIndicator = (
+        <Grid2 display="flex" justifyContent="right">
+            <Tooltip title="Bandwidth Limit Reached!">
+                <Button color="error" ><LimitIcon /></Button>
+            </Tooltip>
+        </Grid2>
+    );
+
     const handleClick = () => {
         toggleMode(!visualizer);
     }
@@ -22,7 +34,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
                     <Typography variant="h6" sx={{ flexGrow: 1 }}>
                         <Grid2 container sx={{ flexGrow: 1 }}>
                             <Grid2 display="flex" justifyContent="left">
-                                <img src={zroket} height="30" />
+                                <img src={zrokLogo} height="30" />
                             </Grid2>
                             <Grid2 display="flex" justifyContent="left" size="grow" sx={{ ml: 3 }} color="#9bf316">
                                 <strong>z r o k</strong>
@@ -33,6 +45,7 @@ const NavBar = ({ logout, visualizer, toggleMode }: NavBarProps) => {
                         <Grid2 display="flex" justifyContent="right" size="grow">
                             <Button variant="outline" color="inherit">CLICK HERE TO GET STARTED!</Button>
                         </Grid2>
+                        { limited ? limitedIndicator : null }
                         <Grid2 display="flex" justifyContent="right">
                             <Tooltip title="Toggle Interface Mode (Ctrl-`)">
                                 <Button color="inherit" onClick={handleClick}>{ visualizer ? <VisualizerIcon /> : <TabularIcon /> }</Button>

ui/src/SharePanel.tsx

@@ -11,6 +11,7 @@ import {getMetadataApi} from "./model/api.ts";
 import ClipboardText from "./ClipboardText.tsx";
 import MetricsIcon from "@mui/icons-material/QueryStats";
 import ShareMetricsModal from "./ShareMetricsModal.tsx";
+import LimitedWarning from "./LimitedWarning.tsx";
 
 interface SharePanelProps {
     share: Node;
@@ -95,6 +96,7 @@ const SharePanel = ({ share }: SharePanelProps) => {
                 <Grid2 container sx={{ flexGrow: 1, mt: 0, mb: 2 }} alignItems="center">
                     <h5 style={{ margin: 0 }}>A {detail ? detail.shareMode : ''}{detail && detail.reserved ? ', reserved ' : ''} {detail?.backendMode} share with the share token <code>{share.id}</code></h5>
                 </Grid2>
+                { share.data.limited ? <LimitedWarning /> : null }
                 <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
                     <Tooltip title="Share Metrics">
                         <Button variant="contained" onClick={openShareMetrics}><MetricsIcon /></Button>

ui/src/model/graph.ts

@@ -15,7 +15,7 @@ export const mergeGraph = (oldVov: Graph, u: User, limited: boolean, newOv: Over
         id: u.token,
         data: {
             label: u.email,
-            limited: !!limited
+            limited: limited
         },
         type: "account",
         position: { x: 0, y: 0 },

ui/src/model/store.ts

@@ -7,6 +7,7 @@ import {MRT_PaginationState, MRT_SortingState} from "material-react-table";
 
 type StoreState = {
     user: User;
+    limited: boolean;
     graph: Graph;
     environments: Array<Environment>;
     sparkdata: Map<string, Number[]>;
@@ -20,6 +21,7 @@ type StoreState = {
 
 type StoreAction = {
     updateUser: (user: StoreState['user']) => void,
+    updateLimited: (limited: StoreState['limited']) => void,
     updateGraph: (vov: StoreState['graph']) => void,
     updateEnvironments: (environments: StoreState['environments']) => void,
     updateSparkdata: (sparkdata: StoreState['sparkdata']) => void,
@@ -33,6 +35,7 @@ type StoreAction = {
 
 const useApiConsoleStore = create<StoreState & StoreAction>((set) => ({
     user: null,
+    limited: false,
     graph: new Graph(),
     environments: new Array<Environment>(),
     sparkdata: new Map<string, Number[]>(),
@@ -43,6 +46,7 @@ const useApiConsoleStore = create<StoreState & StoreAction>((set) => ({
     pagination: {pageIndex: 0, pageSize: 15},
     sorting: [{id: "data.label", desc: false}] as MRT_SortingState,
     updateUser: (user) => set({user: user}),
+    updateLimited: (limited) => set({limited: limited}),
     updateGraph: (vov) => set({overview: vov}),
     updateEnvironments: (environments) => set({environments: environments}),
     updateSparkdata: (sparkdata) => set({sparkdata: sparkdata}),