mirror of
https://github.com/openziti/zrok.git
synced 2024-12-22 23:02:52 +01:00
cleaner metrics component design (#324)
This commit is contained in:
parent
273a680b04
commit
761f595c33
@ -1,5 +1,5 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {buildMetrics, bytesToSize} from "../../metrics";
|
||||
import {buildMetrics} from "../../metrics";
|
||||
import * as metadata from "../../../api/metadata";
|
||||
import MetricsView from "../../metrics/MetricsView";
|
||||
|
||||
|
@ -4,7 +4,7 @@ import {Bar, BarChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis} from "r
|
||||
import moment from "moment/moment";
|
||||
import React from "react";
|
||||
|
||||
const MetricsView = (props) => {
|
||||
const MetricsViews = (props) => {
|
||||
return (
|
||||
<Container>
|
||||
<Row>
|
||||
@ -12,72 +12,52 @@ const MetricsView = (props) => {
|
||||
<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>
|
||||
<MetricsSummary metrics={props.metrics30} />
|
||||
<MetricsGraph metrics={props.metrics30} />
|
||||
<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>
|
||||
<MetricsSummary metrics={props.metrics7} />
|
||||
<MetricsGraph metrics={props.metrics7} />
|
||||
<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>
|
||||
<MetricsSummary metrics={props.metrics1} />
|
||||
<MetricsGraph metrics={props.metrics1} />
|
||||
</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;
|
Loading…
Reference in New Issue
Block a user