From 273a680b04ca83fcdac963329442111a6eb32c88 Mon Sep 17 00:00:00 2001 From: Michael Quigley Date: Thu, 11 May 2023 11:50:42 -0400 Subject: [PATCH] reduce metrics view code duplication (#324) --- .../console/detail/account/AccountDetail.js | 79 +----------------- .../console/detail/environment/MetricsTab.js | 78 +---------------- ui/src/console/detail/share/MetricsTab.js | 76 +---------------- ui/src/console/metrics/MetricsView.js | 83 +++++++++++++++++++ 4 files changed, 92 insertions(+), 224 deletions(-) create mode 100644 ui/src/console/metrics/MetricsView.js diff --git a/ui/src/console/detail/account/AccountDetail.js b/ui/src/console/detail/account/AccountDetail.js index 94b85b8d..dec934b1 100644 --- a/ui/src/console/detail/account/AccountDetail.js +++ b/ui/src/console/detail/account/AccountDetail.js @@ -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 ( - - - -

Last 30 Days:

- - - -

Received: {bytesToSize(metrics30.rx)}

-

Sent: {bytesToSize(metrics30.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - - -

Last 7 Days:

- - - -

Received: {bytesToSize(metrics7.rx)}

-

Sent: {bytesToSize(metrics7.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - - -

Last 24 Hours:

- - - -

Received: {bytesToSize(metrics1.rx)}

-

Sent: {bytesToSize(metrics1.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - + ); } diff --git a/ui/src/console/detail/environment/MetricsTab.js b/ui/src/console/detail/environment/MetricsTab.js index 8dfae829..23e6c1de 100644 --- a/ui/src/console/detail/environment/MetricsTab.js +++ b/ui/src/console/detail/environment/MetricsTab.js @@ -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 ( - - - -

Last 30 Days:

- - - -

Received: {bytesToSize(metrics30.rx)}

-

Sent: {bytesToSize(metrics30.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - - -

Last 7 Days:

- - - -

Received: {bytesToSize(metrics7.rx)}

-

Sent: {bytesToSize(metrics7.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - - -

Last 24 Hours:

- - - -

Received: {bytesToSize(metrics1.rx)}

-

Sent: {bytesToSize(metrics1.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - + ); }; diff --git a/ui/src/console/detail/share/MetricsTab.js b/ui/src/console/detail/share/MetricsTab.js index 4f3b6126..e152ffbf 100644 --- a/ui/src/console/detail/share/MetricsTab.js +++ b/ui/src/console/detail/share/MetricsTab.js @@ -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 ( - - - -

Last 30 Days:

- - - -

Received: {bytesToSize(metrics30.rx)}

-

Sent: {bytesToSize(metrics30.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - - -

Last 7 Days:

- - - -

Received: {bytesToSize(metrics7.rx)}

-

Sent: {bytesToSize(metrics7.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - - -

Last 24 Hours:

- - - -

Received: {bytesToSize(metrics1.rx)}

-

Sent: {bytesToSize(metrics1.tx)}

- - - - - - - v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> - bytesToSize(v)} style={{ fontSize: '75%' }}/> - - - - - - - - + ); } diff --git a/ui/src/console/metrics/MetricsView.js b/ui/src/console/metrics/MetricsView.js new file mode 100644 index 00000000..6454e3c1 --- /dev/null +++ b/ui/src/console/metrics/MetricsView.js @@ -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 ( + + + +

Last 30 Days:

+ + + +

Received: {bytesToSize(props.metrics30.rx)}

+

Sent: {bytesToSize(props.metrics30.tx)}

+ + + + + + + v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> + bytesToSize(v)} style={{ fontSize: '75%' }}/> + + + + + + + + + +

Last 7 Days:

+ + + +

Received: {bytesToSize(props.metrics7.rx)}

+

Sent: {bytesToSize(props.metrics7.tx)}

+ + + + + + + v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> + bytesToSize(v)} style={{ fontSize: '75%' }}/> + + + + + + + + + +

Last 24 Hours:

+ + + +

Received: {bytesToSize(props.metrics1.rx)}

+

Sent: {bytesToSize(props.metrics1.tx)}

+ + + + + + + v.timestamp} scale={"time"} tickFormatter={(v) => moment(v).format("MMM DD") } style={{ fontSize: '75%'}}/> + bytesToSize(v)} style={{ fontSize: '75%' }}/> + + + + + + + + + ); +} + +export default MetricsView; \ No newline at end of file