extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-11-22 16:13:47 +01: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 {Tab, Tabs} from "react-bootstrap";
import SecretToggle from "../../SecretToggle";
import React, {useEffect, useState} from "react";
import * as metadata from "../../../api/metadata";
import {buildMetrics} from "../../metrics/util";
import MetricsView from "../../metrics/MetricsView";
import React from "react";
import MetricsTab from "./MetricsTab";
const AccountDetail = (props) => {
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;

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;