mirror of
https://github.com/openziti/zrok.git
synced 2025-06-25 12:12:32 +02:00
reduce metrics view code duplication (#324)
This commit is contained in:
Michael Quigley
parent
945090f3e8
commit
273a680b04
@ -1,13 +1,12 @@
|
|||||||
import {mdiAccountBox} from "@mdi/js";
|
import {mdiAccountBox} from "@mdi/js";
|
||||||
import Icon from "@mdi/react";
|
import Icon from "@mdi/react";
|
||||||
import PropertyTable from "../../PropertyTable";
|
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 SecretToggle from "../../SecretToggle";
|
||||||
import React, {useEffect, useState} from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import * as metadata from "../../../api/metadata";
|
import * as metadata from "../../../api/metadata";
|
||||||
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
|
import {buildMetrics} from "../../metrics";
|
||||||
import moment from "moment";
|
import MetricsView from "../../metrics/MetricsView";
|
||||||
import {buildMetrics, bytesToSize} from "../../metrics";
|
|
||||||
|
|
||||||
const AccountDetail = (props) => {
|
const AccountDetail = (props) => {
|
||||||
const customProperties = {
|
const customProperties = {
|
||||||
@ -74,77 +73,7 @@ const MetricsTab = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
import React, {useEffect, useState} from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import {buildMetrics, bytesToSize} from "../../metrics";
|
import {buildMetrics} from "../../metrics";
|
||||||
import * as metadata from "../../../api/metadata";
|
import * as metadata from "../../../api/metadata";
|
||||||
import {Col, Container, Row, Tooltip} from "react-bootstrap";
|
import MetricsView from "../../metrics/MetricsView";
|
||||||
import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
|
|
||||||
import moment from "moment/moment";
|
|
||||||
|
|
||||||
const MetricsTab = (props) => {
|
const MetricsTab = (props) => {
|
||||||
const [metrics30, setMetrics30] = useState(buildMetrics([]));
|
const [metrics30, setMetrics30] = useState(buildMetrics([]));
|
||||||
@ -50,77 +48,7 @@ const MetricsTab = (props) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
import React, {useEffect, useState} from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import {buildMetrics, bytesToSize} from "../../metrics";
|
import {buildMetrics, bytesToSize} from "../../metrics";
|
||||||
import * as metadata from "../../../api/metadata";
|
import * as metadata from "../../../api/metadata";
|
||||||
import {Col, Container, Row, Tooltip} from "react-bootstrap";
|
import MetricsView from "../../metrics/MetricsView";
|
||||||
import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "recharts";
|
|
||||||
import moment from "moment";
|
|
||||||
|
|
||||||
const MetricsTab = (props) => {
|
const MetricsTab = (props) => {
|
||||||
const [metrics30, setMetrics30] = useState(buildMetrics([]));
|
const [metrics30, setMetrics30] = useState(buildMetrics([]));
|
||||||
@ -52,77 +50,7 @@ const MetricsTab = (props) => {
|
|||||||
}, [props.share]);
|
}, [props.share]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
|
||||||
<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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
83
ui/src/console/metrics/MetricsView.js
Normal file
83
ui/src/console/metrics/MetricsView.js
Normal 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;
|
||||||
Loading…
x
Reference in New Issue
Block a user