Began overhaul of sidebar to include functional text boxes and selection inputs and have them update state upon change

Author: MichaelCSnyder

ksqLight/src/App.js

@@ -11,12 +11,35 @@ import { CssBaseline } from "@mui/material";
 function App() {
   const [fetchMetrics, setFetchMetrics] = useState(true);
   const [showSettings, setShowSettings] = useState(false);
+  const [duration, setDuration] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 10
+  });
+  const [refreshRate, setRefreshRate] = useState(2);
+  const [prometheusURL, setPrometheusURL] = useState(null);
+  const [ksqlDBURL, setksqlDBURL] = useState(null);
+  const [metricsState, setMetricsState] = useState({
+    prometheusURL: null,
+    ksqlDBURL: null,
+    duration: {
+      days: 0,
+      hours: 0,
+      minutes: 10
+    },
+    refreshRate: 2
+  });
 
   return (
     <BrowserRouter>
       <CssBaseline/>
       <Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings}/>
-      <SettingsSidebar showSettings={showSettings} setShowSettings={setShowSettings}></SettingsSidebar>
+      <SettingsSidebar 
+        showSettings={showSettings} 
+        setShowSettings={setShowSettings} 
+        metricsState={metricsState}
+        setMetricsState={setMetricsState}>
+      </SettingsSidebar>
       <PermanentDrawer></PermanentDrawer>
       <Routes>
         <Route path="/" element={<Homepage/>}/>

ksqLight/src/components/Homepage.js

@@ -9,24 +9,24 @@ export const Homepage = () => {
 
   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"],
+    // ["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 (