mirror of
https://github.com/openziti/zrok.git
synced 2025-06-24 19:51:32 +02:00
share metrics modal (#828)
This commit is contained in:
parent
1779f049e8
commit
3b3f1a185c
@ -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);
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
67
ui100/src/ShareMetricsModal.tsx
Normal file
67
ui100/src/ShareMetricsModal.tsx
Normal file
@ -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;
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user