From 761f595c337fbb291a48ecbd59bf70a8a61a6d5f Mon Sep 17 00:00:00 2001
From: Michael Quigley <michael@quigley.com>
Date: Thu, 11 May 2023 11:58:09 -0400
Subject: [PATCH] cleaner metrics component design (#324)

---
 ui/src/console/detail/share/MetricsTab.js |  2 +-
 ui/src/console/metrics/MetricsView.js     | 92 +++++++++--------------
 2 files changed, 37 insertions(+), 57 deletions(-)

diff --git a/ui/src/console/detail/share/MetricsTab.js b/ui/src/console/detail/share/MetricsTab.js
index e152ffbf..bf6f2454 100644
--- a/ui/src/console/detail/share/MetricsTab.js
+++ b/ui/src/console/detail/share/MetricsTab.js
@@ -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";
 
diff --git a/ui/src/console/metrics/MetricsView.js b/ui/src/console/metrics/MetricsView.js
index 6454e3c1..9b71b5ac 100644
--- a/ui/src/console/metrics/MetricsView.js
+++ b/ui/src/console/metrics/MetricsView.js
@@ -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;
\ No newline at end of file
+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;
\ No newline at end of file