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

cleaner metrics component design (#324)

Browse Source
This commit is contained in:
Michael Quigley 2023-05-11 11:58:09 -04:00
parent 273a680b04
commit 761f595c33
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 37 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
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 MetricsView from "../../metrics/MetricsView"; import MetricsView from "../../metrics/MetricsView";

92
ui/src/console/metrics/MetricsView.js
View File

@ -4,7 +4,7 @@ import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "r
import moment from "moment/moment"; import moment from "moment/moment";
import React from "react"; import React from "react";
const MetricsView = (props) => { const MetricsViews = (props) => {
return ( return (
<Container> <Container>
<Row> <Row>
@ -12,72 +12,52 @@ const MetricsView = (props) => {
<h3>Last 30 Days:</h3> <h3>Last 30 Days:</h3>
</Col> </Col>
</Row> </Row>
<Row> <MetricsSummary metrics={props.metrics30} />
<Col><p>Received: {bytesToSize(props.metrics30.rx)}</p></Col> <MetricsGraph metrics={props.metrics30} />
<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> <Row>
<Col> <Col>
<h3>Last 7 Days:</h3> <h3>Last 7 Days:</h3>
</Col> </Col>
</Row> </Row>
<Row> <MetricsSummary metrics={props.metrics7} />
<Col><p>Received: {bytesToSize(props.metrics7.rx)}</p></Col> <MetricsGraph metrics={props.metrics7} />
<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> <Row>
<Col> <Col>
<h3>Last 24 Hours:</h3> <h3>Last 24 Hours:</h3>
</Col> </Col>
</Row> </Row>
<Row> <MetricsSummary metrics={props.metrics1} />
<Col><p>Received: {bytesToSize(props.metrics1.rx)}</p></Col> <MetricsGraph metrics={props.metrics1} />
<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> </Container>
); );
} }
export default MetricsView; const MetricsSummary = (props) => {
return (
<Row>
<Col><p>Received: {bytesToSize(props.metrics.rx)}</p></Col>
<Col><p>Sent: {bytesToSize(props.metrics.tx)}</p></Col>
</Row>
);
}
const MetricsGraph = (props) => {
return (
<Row>
<Col>
<ResponsiveContainer width={"100%"} height={150}>
<BarChart data={props.metrics.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"} />
<Bar stroke={"#231069"} fill={"#9BF316"} dataKey={"tx"} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
</Col>
</Row>
);
}
export default MetricsViews;