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

separating out tabs in account detail (#327)

Browse Source
This commit is contained in:
Michael Quigley 2023-05-12 11:10:29 -04:00
parent 714b0b11d1
commit 6259b62a8a
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 57 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/src/console/detail/account/AccountDetail.js
View File

@ -3,10 +3,8 @@ import Icon from "@mdi/react";
import PropertyTable from "../../PropertyTable"; import PropertyTable from "../../PropertyTable";
import {Tab, Tabs} from "react-bootstrap"; import {Tab, Tabs} from "react-bootstrap";
import SecretToggle from "../../SecretToggle"; import SecretToggle from "../../SecretToggle";
import React, {useEffect, useState} from "react"; import React from "react";
import * as metadata from "../../../api/metadata"; import MetricsTab from "./MetricsTab";
import {buildMetrics} from "../../metrics/util";
import MetricsView from "../../metrics/MetricsView";
const AccountDetail = (props) => { const AccountDetail = (props) => {
const customProperties = { const customProperties = {
@ -28,53 +26,6 @@ const AccountDetail = (props) => {
); );
} }
const MetricsTab = () => {
const [metrics30, setMetrics30] = useState(buildMetrics([]));
const [metrics7, setMetrics7] = useState(buildMetrics([]));
const [metrics1, setMetrics1] = useState(buildMetrics([]));
useEffect(() => {
metadata.getAccountMetrics()
.then(resp => {
setMetrics30(buildMetrics(resp.data));
});
metadata.getAccountMetrics({duration: "168h"})
.then(resp => {
setMetrics7(buildMetrics(resp.data));
});
metadata.getAccountMetrics({duration: "24h"})
.then(resp => {
setMetrics1(buildMetrics(resp.data));
});
}, []);
useEffect(() => {
let mounted = true;
let interval = setInterval(() => {
metadata.getAccountMetrics()
.then(resp => {
if(mounted) {
setMetrics30(buildMetrics(resp.data));
}
});
metadata.getAccountMetrics({duration: "168h"})
.then(resp => {
setMetrics7(buildMetrics(resp.data));
});
metadata.getAccountMetrics({duration: "24h"})
.then(resp => {
setMetrics1(buildMetrics(resp.data));
});
}, 5000);
return () => {
mounted = false;
clearInterval(interval);
}
}, []);
return (
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
);
}
export default AccountDetail; export default AccountDetail;

55
ui/src/console/detail/account/MetricsTab.js Normal file
View File

@ -0,0 +1,55 @@
import React, {useEffect, useState} from "react";
import {buildMetrics} from "../../metrics/util";
import * as metadata from "../../../api/metadata";
import MetricsView from "../../metrics/MetricsView";
const MetricsTab = () => {
const [metrics30, setMetrics30] = useState(buildMetrics([]));
const [metrics7, setMetrics7] = useState(buildMetrics([]));
const [metrics1, setMetrics1] = useState(buildMetrics([]));
useEffect(() => {
metadata.getAccountMetrics()
.then(resp => {
setMetrics30(buildMetrics(resp.data));
});
metadata.getAccountMetrics({duration: "168h"})
.then(resp => {
setMetrics7(buildMetrics(resp.data));
});
metadata.getAccountMetrics({duration: "24h"})
.then(resp => {
setMetrics1(buildMetrics(resp.data));
});
}, []);
useEffect(() => {
let mounted = true;
let interval = setInterval(() => {
metadata.getAccountMetrics()
.then(resp => {
if(mounted) {
setMetrics30(buildMetrics(resp.data));
}
});
metadata.getAccountMetrics({duration: "168h"})
.then(resp => {
setMetrics7(buildMetrics(resp.data));
});
metadata.getAccountMetrics({duration: "24h"})
.then(resp => {
setMetrics1(buildMetrics(resp.data));
});
}, 5000);
return () => {
mounted = false;
clearInterval(interval);
}
}, []);
return (
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
);
}
export default MetricsTab;