share metrics modal (#828)

ui100/src/EnvironmentMetricsModal.tsx

@@ -27,7 +27,7 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
             })
             .catch(e => {
                 e.response.json().then(ex => {
-                    console.log("accountMetricsModal", ex.message);
+                    console.log("environmentMetricsModal", ex.message);
                 });
             });
         metadataApi.getAccountMetrics({envId: String(environment.data.envZId), duration: "168h"})
@@ -36,7 +36,7 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
             })
             .catch(e => {
                 e.response.json().then(ex => {
-                    console.log("accountMetricsModal", ex.message);
+                    console.log("environmentMetricsModal", ex.message);
                 });
             });
         metadataApi.getAccountMetrics({envId: String(environment.data.envZId), duration: "24h"})
@@ -45,7 +45,7 @@ const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: Environme
             })
             .catch(e => {
                 e.response.json().then(ex => {
-                    console.log("accountMetricsModal", ex.message);
+                    console.log("environmentMetricsModal", ex.message);
                 });
             });
     }, []);

ui100/src/ShareMetricsModal.tsx

@@ -0,0 +1,67 @@
+import {User} from "./model/user.ts";
+import {Node} from "@xyflow/react";
+import {useEffect, useState} from "react";
+import {buildMetrics} from "./model/util.ts";
+import {getMetadataApi} from "./model/api.ts";
+import {Box, Grid2, Modal, Typography} from "@mui/material";
+import {modalStyle} from "./styling/theme.ts";
+import MetricsGraph from "./MetricsGraph.tsx";
+
+interface ShareMetricsModalProps {
+    close: () => void;
+    isOpen: boolean;
+    user: User;
+    share: Node;
+}
+
+const ShareMetricsModal = ({ close, isOpen, user, share }: ShareMetricsModalProps) => {
+    const [metrics30, setMetrics30] = useState(buildMetrics([]));
+    const [metrics7, setMetrics7] = useState(buildMetrics([]));
+    const [metrics1, setMetrics1] = useState(buildMetrics([]));
+
+    useEffect(() => {
+        let metadataApi = getMetadataApi(user);
+        metadataApi.getShareMetrics({shrToken: share.id})
+            .then(d => {
+                setMetrics30(buildMetrics(d));
+            })
+            .catch(e => {
+                e.response.json().then(ex => {
+                    console.log("shareMetricsModal", ex.message);
+                });
+            });
+        metadataApi.getShareMetrics({shrToken: share.id, duration: "168h"})
+            .then(d => {
+                setMetrics7(buildMetrics(d));
+            })
+            .catch(e => {
+                e.response.json().then(ex => {
+                    console.log("shareMetricsModal", ex.message);
+                });
+            });
+        metadataApi.getShareMetrics({shrToken: share.id, duration: "24h"})
+            .then(d => {
+                setMetrics1(buildMetrics(d));
+            })
+            .catch(e => {
+                e.response.json().then(ex => {
+                    console.log("shareMetricsModal", ex.message);
+                });
+            });
+    }, []);
+
+    return (
+        <Modal open={isOpen} onClose={close}>
+            <Box sx={{ ...modalStyle }}>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="h5"><strong>Share Metrics</strong></Typography>
+                </Grid2>
+                <MetricsGraph title="30 Days" data={metrics30.data} />
+                <MetricsGraph title="7 Days" data={metrics7.data} />
+                <MetricsGraph title="24 Hours" data={metrics1.data} />
+            </Box>
+        </Modal>
+    );
+}
+
+export default ShareMetricsModal;

ui100/src/SharePanel.tsx

@@ -2,13 +2,15 @@ import {Node} from "@xyflow/react";
 import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import ShareIcon from "@mui/icons-material/Share";
 import {Share} from "./api";
-import {useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import PropertyTable from "./PropertyTable.tsx";
 import useApiConsoleStore from "./model/store.ts";
 import DeleteIcon from "@mui/icons-material/Delete";
 import ReleaseShareModal from "./ReleaseShareModal.tsx";
 import {getMetadataApi} from "./model/api.ts";
 import ClipboardText from "./ClipboardText.tsx";
+import MetricsIcon from "@mui/icons-material/QueryStats";
+import ShareMetricsModal from "./ShareMetricsModal.tsx";
 
 interface SharePanelProps {
     share: Node;
@@ -17,12 +19,17 @@ interface SharePanelProps {
 const SharePanel = ({ share }: SharePanelProps) => {
     const user = useApiConsoleStore((state) => state.user);
     const [detail, setDetail] = useState<Share>(null);
-    const [releaseShareOpen, setReleaseShareOpen] = useState(false);
+    const [shareMetricsOpen, setShareMetricsOpen] = useState<boolean>(false);
-
+    const openShareMetrics = () => {
+        setShareMetricsOpen(true);
+    }
+    const closeShareMetrics = () => {
+        setShareMetricsOpen(false);
+    }
+    const [releaseShareOpen, setReleaseShareOpen] = useState<boolean>(false);
     const openReleaseShare = () => {
         setReleaseShareOpen(true);
     }
-
     const closeReleaseShare = () => {
         setReleaseShareOpen(false);
     }
@@ -88,7 +95,10 @@ const SharePanel = ({ share }: SharePanelProps) => {
                     <h5 style={{ margin: 0 }}>A {detail ? detail.shareMode : ''}{detail && detail.reserved ? ', reserved ' : ''} share with the token <code>{share.id}</code></h5>
                 </Grid2>
                 <Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
-                    <Tooltip title="Release Share">
+                    <Tooltip title="Share Metrics">
+                        <Button variant="contained" onClick={openShareMetrics}><MetricsIcon /></Button>
+                    </Tooltip>
+                    <Tooltip title="Release Share" sx={{ ml: 1 }}>
                         <Button variant="contained" color="error" onClick={openReleaseShare}><DeleteIcon /></Button>
                     </Tooltip>
                 </Grid2>
@@ -98,6 +108,7 @@ const SharePanel = ({ share }: SharePanelProps) => {
                     </Grid2>
                 </Grid2>
             </Typography>
+            <ShareMetricsModal close={closeShareMetrics} isOpen={shareMetricsOpen} user={user} share={share} />
             <ReleaseShareModal close={closeReleaseShare} isOpen={releaseShareOpen} user={user} share={share} detail={detail} />
         </>
     );