extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2024-12-22 23:02:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

reduce metrics view code duplication (#324)

Browse Source
This commit is contained in:
Michael Quigley 2023-05-11 11:50:42 -04:00
parent 945090f3e8
commit 273a680b04
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
4 changed files with 92 additions and 224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,12 @@
import {mdiAccountBox} from "@mdi/js";
import Icon from "@mdi/react";
import PropertyTable from "../../PropertyTable";
import {Col, Container, Row, Tab, Tabs, Tooltip} from "react-bootstrap";
import {Tab, Tabs} from "react-bootstrap";
import SecretToggle from "../../SecretToggle";
import React, {useEffect, useState} from "react";
import * as metadata from "../../../api/metadata";
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
import moment from "moment";
import {buildMetrics, bytesToSize} from "../../metrics";
import {buildMetrics} from "../../metrics";
import MetricsView from "../../metrics/MetricsView";
const AccountDetail = (props) => {
const customProperties = {
@ -74,77 +73,7 @@ const MetricsTab = () => {
}, []);
return (
<Container>
<Row>
<Col>
<h3>Last 30 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics30.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics30.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics30.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 7 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics7.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics7.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics7.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 24 Hours:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics1.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics1.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics1.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
</Container>
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
);
}

78
ui/src/console/detail/environment/MetricsTab.js
View File

@ -1,9 +1,7 @@
import React, {useEffect, useState} from "react";
import {buildMetrics, bytesToSize} from "../../metrics";
import {buildMetrics} from "../../metrics";
import * as metadata from "../../../api/metadata";
import {Col, Container, Row, Tooltip} from "react-bootstrap";
import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
import moment from "moment/moment";
import MetricsView from "../../metrics/MetricsView";
const MetricsTab = (props) => {
const [metrics30, setMetrics30] = useState(buildMetrics([]));
@ -50,77 +48,7 @@ const MetricsTab = (props) => {
}, []);
return (
<Container>
<Row>
<Col>
<h3>Last 30 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics30.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics30.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics30.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 7 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics7.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics7.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics7.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 24 Hours:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics1.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics1.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics1.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
</Container>
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
);
};

76
ui/src/console/detail/share/MetricsTab.js
View File

@ -1,9 +1,7 @@
import React, {useEffect, useState} from "react";
import {buildMetrics, bytesToSize} from "../../metrics";
import * as metadata from "../../../api/metadata";
import {Col, Container, Row, Tooltip} from "react-bootstrap";
import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
import moment from "moment";
import MetricsView from "../../metrics/MetricsView";
const MetricsTab = (props) => {
const [metrics30, setMetrics30] = useState(buildMetrics([]));
@ -52,77 +50,7 @@ const MetricsTab = (props) => {
}, [props.share]);
return (
<Container>
<Row>
<Col>
<h3>Last 30 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics30.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics30.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics30.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 7 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics7.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics7.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics7.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 24 Hours:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(metrics1.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(metrics1.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={metrics1.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
</Container>
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
);
}

83
ui/src/console/metrics/MetricsView.js Normal file
View File

@ -0,0 +1,83 @@
import {Col, Container, Row, Tooltip} from "react-bootstrap";
import {bytesToSize} from "../metrics";
import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
import moment from "moment/moment";
import React from "react";
const MetricsView = (props) => {
return (
<Container>
<Row>
<Col>
<h3>Last 30 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(props.metrics30.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(props.metrics30.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={props.metrics30.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 7 Days:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(props.metrics7.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(props.metrics7.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={props.metrics7.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
<Row>
<Col>
<h3>Last 24 Hours:</h3>
</Col>
</Row>
<Row>
<Col><p>Received: {bytesToSize(props.metrics1.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(props.metrics1.tx)}</p></Col>
</Row>
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={props.metrics1.data}>
<CartesianGrid strokeDasharay={"3 3"} />
<XAxis dataKey={(v) => v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/>
<YAxis tickFormatter={(v) => bytesToSize(v)} style={{ fontSize: '75%' }}/>
<Bar stroke={"#231069"} fill={"#04adef"} dataKey={"rx"} legendType={"circle"}/>
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
</Container>
);
}
export default MetricsView;