Merge pull request #42 from rcervant/metricCards

Metric cards
oslabs-beta · Jun 29, 2022 · 4b585a0 · 4b585a0
2 parents f61c012 + c8bc237
commit 4b585a0
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 22 deletions.
diff --git a/build/bundle.js b/build/bundle.js
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -122,14 +122,17 @@ class App extends Component {
                 <Route
                   exact
                   path="/clusterReplication"
-                  element={<ClusterReplication metrics={cluster_replication} />}
-                  metricURLs={links.cluster_replication}
+                  element={
+                    <ClusterReplication
+                      metrics={cluster_replication}
+                      metricURLs={links.cluster_replication}
+                    />
+                  }
                 />
                 <Route
                   exact
                   path="/topicsLogs"
-                  element={<TopicLogs metrics={topics_logs} />}
-                  metricURLs={links.topics_logs}
+                  element={<TopicLogs metrics={topics_logs} metricURLs={links.topics_logs}/>}
                 />
                 <Route exact path="/HelpTab" element={<HelpTab />} />
               </Routes>

diff --git a/src/components/BrokerHardDiskUsage.jsx b/src/components/BrokerHardDiskUsage.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
+import Typography from '@mui/material/Typography';
 import renderMetricPanels from './_utils/renderMetricPanels';
 
 function BrokerHardDiskUsage(props) {
   const { metrics, metricURLs } = props;
-  console.log(props);
-  console.log('hello');
+
   return (
     <>
-      <h1>Broker Hard Disk Usage</h1>
+      <Typography variant="h4">Broker Hard Disk Usage</Typography>
       {metrics && renderMetricPanels(metrics, metricURLs)}
     </>
   );

diff --git a/src/components/BrokerJVMAndOS.jsx b/src/components/BrokerJVMAndOS.jsx
@@ -1,11 +1,13 @@
+import Typography from '@mui/material/Typography';
 import React from 'react';
 import renderMetricPanels from './_utils/renderMetricPanels';
 
 function BrokerJVMAndOS(props) {
-  const { metrics, metricURLs } = props;
+  const {metrics, metricURLs} = props;
+
   return (
     <>
-      <h1>Broker JVM and OS Metrics</h1>
+      <Typography variant="h4">Broker JVM and OS</Typography>
       {metrics && renderMetricPanels(metrics, metricURLs)}
     </>
   );

diff --git a/src/components/BrokerPerformance.jsx b/src/components/BrokerPerformance.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import Typography from '@mui/material/Typography';
 import renderMetricPanels from './_utils/renderMetricPanels';
 
 function BrokerPerformance(props) {
-  const { metrics, metricURLs } = props;
+  const {metrics, metricURLs} = props;
+
   return (
     <>
-      <h1>Broker Performance</h1>
+      <Typography variant="h4">Broker Performance</Typography>
       {metrics && renderMetricPanels(metrics, metricURLs)}
     </>
   );

diff --git a/src/components/BrokerZookeeper.jsx b/src/components/BrokerZookeeper.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import Typography from '@mui/material/Typography';
 import renderMetricPanels from './_utils/renderMetricPanels';
 
 function BrokerZookeeper(props) {
-  const { metrics, metricURLs } = props;
+  const {metrics, metricURLs} = props;
+
   return (
     <>
-      <h1>Broker Zookeeper</h1>
+      <Typography variant="h4">Broker Zookeeper</Typography>
       {metrics && renderMetricPanels(metrics, metricURLs)}
     </>
   );

diff --git a/src/components/ClusterHealthCheck.jsx b/src/components/ClusterHealthCheck.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import Typography from '@mui/material/Typography';
 import renderMetricPanels from './_utils/renderMetricPanels';
 
 function ClusterHealthCheck(props) {
-  const { metrics, metricURLs } = props;
+  const {metrics, metricURLs} = props;
+
   return (
     <>
-      <h1>Cluster Health Check</h1>
+      <Typography variant="h4">Cluster Health Check</Typography>
       {metrics && renderMetricPanels(metrics, metricURLs)}
     </>
   );

diff --git a/src/components/ClusterReplication.jsx b/src/components/ClusterReplication.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import Typography from '@mui/material/Typography';
 import renderMetricPanels from './_utils/renderMetricPanels';
 
 function ClusterReplication(props) {
-  const { metrics, metricURLs } = props;
+  const {metrics, metricURLs} = props;
+
   return (
     <>
-      <h1>Cluster Replication</h1>
+      <Typography variant="h4">Cluster Replication</Typography>
       {metrics && renderMetricPanels(metrics, metricURLs)}
     </>
   );

diff --git a/src/components/_utils/displayMetrics.js b/src/components/_utils/displayMetrics.js
@@ -2,6 +2,12 @@ import React from 'react';
 import Grid from '@mui/material/Grid';
 import MetricCard from '../MetricCard';
 
+/**
+ * 
+ * @param {Object} metricCategory - object containing metric subcategories from
+ *                                 the userPreferences object 
+ * @returns {JSX} - grafana panel for each metric embedded in each card
+ */
 function displayMetrics(metricCategory) {
   const metricURLArray = Object.values(metricCategory);
 
@@ -13,3 +19,4 @@ function displayMetrics(metricCategory) {
 }
 
 export default displayMetrics;
+
diff --git a/src/components/_utils/renderMetricPanels.js b/src/components/_utils/renderMetricPanels.js
@@ -2,6 +2,13 @@ import React from 'react';
 import Grid from '@mui/material/Grid';
 import displayMetrics from './displayMetrics';
 
+/**
+ * 
+ * @param {string[]} metrics - metrics to display from userPreferences object
+ * @param {Object} metricPanel - object containing grafana embed URLs from
+ *                                the models/metrics object 
+ * @returns 
+ */
 function renderMetricPanels(metrics, metricPanel) {
   return (
     <Grid container columnSpacing={4}>