Resolved shrunken error metrics

Author: MichaelCSnyder

ksqLight/src/components/Chart.js

@@ -1,13 +1,8 @@
 import React from "react";
-import { useState } from "react";
-import { Typography, Grid, Toolbar, Container, CssBaseline, Box } from "@mui/material";
-import { Chart } from "./Chart.js";
+import { Grid, CssBaseline, Box, CardContent } from "@mui/material";
 import LineChart from "./LineChart.js";
-import { LivenessCard } from "./MetricCard.js";
 
 export const Homepage = ({ showQueries, showMessages, showErrors, metricsState }) => {
-  const [content, setContent] = useState('Chart placeholder');
-
   const queriesCharts = [
     ["runningQueries", "Number of Running Queries"],
     ["createdQueries", "Number of Created Queries"],
@@ -32,34 +27,11 @@ export const Homepage = ({ showQueries, showMessages, showErrors, metricsState }
     ["errorRate", "Error Rate"],
     ["errorQueries", "Number of Error Queries"],
     ["pendingErrorQueries", "Number of Pending Error Queries"],
-    
   ]
-  const queryTypes = [
-    ["runningQueries", "Number of Running Queries"],
-    ["rebalancingQueries", "Number of Rebalancing Queries"],
-    ["pendingShutdownQueries", "Number of Pending Shutdown Queries"],
-    ["pendingErrorQueries", "Number of Pending Error Queries"],
-    ["numPersistentQueries", "Number of Persistent Queries"],
-    ["numIdleQueries", "Number of Idle Queries"],
-    ["numActiveQueries", "Number of Active Queries"],
-    ["notRunningQueries", "Number of Not Running Queries"],
-    ["messagesProducedPerSec", "Number of Messages Produced Per Second"],
-    ["messagesConsumedTotal", "Number of Messages Consumed"],
-    ["messagesConsumedPerSec", "Number of Messages Consumed Per Second"],
-    ["messagesConsumedMin", "Number of Messages Consumed Min"],
-    ["messagesConsumedMax", "Number of Messages Consumed Max"],
-    ["messagesConsumedAvg", "Number of Messages Consumed Average"],
-    // ["livenessIndicator", "Liveness Indicator"],
-    ["errorRate", "Error Rate"],
-    ["errorQueries", "Number of Error Queries"],
-    ["createdQueries", "Number of Created Queries"],
-    ["bytesConsumedTotal", "Number of Bytes Consumed Total"],
-  ];
 
   return (
     <Box>
       <CssBaseline />
-      {/* <Typography color="primary">Hi Welcome back</Typography> */}
       <Grid container spacing={4} sx={{}}>
         {showQueries &&
           queriesCharts.map(([query, description], index) =>
@@ -73,9 +45,8 @@ export const Homepage = ({ showQueries, showMessages, showErrors, metricsState }
         {showErrors &&
           errorCharts.map(([query, description], index) =>
             <LineChart description={description} metric={query} metricsState={metricsState} key={index} />
-          )
+          ).concat([<Grid item xl={3}><CardContent sx={{ width: "300px" }}></CardContent></Grid>])
         }
-        {/* {queryTypes.map(([query, description], index) => <LineChart description={description} metric={query} key={index} />)} */}
       </Grid>
     </Box>
   )