extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-06-19 17:27:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

environment metrics panel (#828)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-28 13:58:03 -05:00
parent 8a4102844d
commit 1779f049e8
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 84 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui100/src/AccessPanel.tsx
View File

@ -17,7 +17,6 @@ const AccessPanel = ({ access }: AccessPanelProps) => {
const user = useApiConsoleStore((state) => state.user);
const [detail, setDetail] = useState<Frontend>(null);
const [releaseAccessOpen, setReleaseAccessOpen] = useState<boolean>(false);
const openReleaseAccess = () => {
setReleaseAccessOpen(true);
}

4
ui100/src/AccountMetricsModal.tsx
View File

@ -21,9 +21,7 @@ const AccountMetricsModal = ({ close, isOpen, user}: AccountMetricsModalProps) =
let metadataApi = getMetadataApi(user);
metadataApi.getAccountMetrics()
.then(d => {
let m30 = buildMetrics(d);
console.log(m30);
setMetrics30(m30);
setMetrics30(buildMetrics(d));
})
.catch(e => {
e.response.json().then(ex => {

67
ui100/src/EnvironmentMetricsModal.tsx Normal file
View File

@ -0,0 +1,67 @@
import {User} from "./model/user.ts";
import {useEffect, useState} from "react";
import {buildMetrics} from "./model/util.ts";
import {getMetadataApi} from "./model/api.ts";
import {Node} from "@xyflow/react";
import {Box, Grid2, Modal, Typography} from "@mui/material";
import {modalStyle} from "./styling/theme.ts";
import MetricsGraph from "./MetricsGraph.tsx";
interface EnvironmentMetricsModalProps {
close: () => void;
isOpen: boolean;
user: User;
environment: Node;
}
const EnvironmentMetricsModal = ({ close, isOpen, user, environment }: EnvironmentMetricsModalProps) => {
const [metrics30, setMetrics30] = useState(buildMetrics([]));
const [metrics7, setMetrics7] = useState(buildMetrics([]));
const [metrics1, setMetrics1] = useState(buildMetrics([]));
useEffect(() => {
let metadataApi = getMetadataApi(user);
metadataApi.getEnvironmentMetrics({envId: String(environment.data.envZId) })
.then(d => {
setMetrics30(buildMetrics(d));
})
.catch(e => {
e.response.json().then(ex => {
console.log("accountMetricsModal", ex.message);
});
});
metadataApi.getAccountMetrics({envId: String(environment.data.envZId), duration: "168h"})
.then(d => {
setMetrics7(buildMetrics(d));
})
.catch(e => {
e.response.json().then(ex => {
console.log("accountMetricsModal", ex.message);
});
});
metadataApi.getAccountMetrics({envId: String(environment.data.envZId), duration: "24h"})
.then(d => {
setMetrics1(buildMetrics(d));
})
.catch(e => {
e.response.json().then(ex => {
console.log("accountMetricsModal", ex.message);
});
});
}, []);
return (
<Modal open={isOpen} onClose={close}>
<Box sx={{ ...modalStyle }}>
<Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
<Typography variant="h5"><strong>Environment 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 EnvironmentMetricsModal;

21
ui100/src/EnvironmentPanel.tsx
View File

@ -1,7 +1,7 @@
import {Node} from "@xyflow/react";
import {Button, Grid2, Tooltip, Typography} from "@mui/material";
import EnvironmentIcon from "@mui/icons-material/Computer";
import {useEffect, useState} from "react";
import React, {useEffect, useState} from "react";
import {Environment} from "./api";
import PropertyTable from "./PropertyTable.tsx";
import SecretToggle from "./SecretToggle.tsx";
@ -9,6 +9,8 @@ import useApiConsoleStore from "./model/store.ts";
import DeleteIcon from "@mui/icons-material/Delete";
import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
import {getMetadataApi} from "./model/api.ts";
import MetricsIcon from "@mui/icons-material/QueryStats";
import EnvironmentMetricsModal from "./EnvironmentMetricsModal.tsx";
interface EnvironmentPanelProps {
environment: Node;
@ -17,12 +19,17 @@ interface EnvironmentPanelProps {
const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
const user = useApiConsoleStore((state) => state.user);
const [detail, setDetail] = useState<Environment>(null);
const [releaseEnvironmentOpen, setReleaseEnvironmentOpen] = useState(false);
const [environmentMetricsOpen, setEnvironmentMetricsOpen] = useState<boolean>(false);
const openEnvironmentMetrics = () => {
setEnvironmentMetricsOpen(true);
}
const closeEnvironmentMetrics = () => {
setEnvironmentMetricsOpen(false);
}
const [releaseEnvironmentOpen, setReleaseEnvironmentOpen] = useState<boolean>(false);
const openReleaseEnvironment = () => {
setReleaseEnvironmentOpen(true);
}
const closeReleaseEnvironment = () => {
setReleaseEnvironmentOpen(false);
}
@ -63,7 +70,10 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
<h5 style={{ margin: 0 }}>An environment on a host with address <code>{detail ? detail.address : ''}</code></h5>
</Grid2>
<Grid2 container sx={{ flexGrow: 1, mb: 3 }} alignItems="left">
<Tooltip title="Release Environment">
<Tooltip title="Environment Metrics">
<Button variant="contained" onClick={openEnvironmentMetrics}><MetricsIcon /></Button>
</Tooltip>
<Tooltip title="Release Environment" sx={{ ml: 1 }}>
<Button variant="contained" color="error" onClick={openReleaseEnvironment}><DeleteIcon /></Button>
</Tooltip>
</Grid2>
@ -73,6 +83,7 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
</Grid2>
</Grid2>
</Typography>
<EnvironmentMetricsModal close={closeEnvironmentMetrics} isOpen={environmentMetricsOpen} user={user} environment={environment} />
<ReleaseEnvironmentModal close={closeReleaseEnvironment} isOpen={releaseEnvironmentOpen} user={user} environment={environment} detail={detail} />
</>
);