Connected user input within settings bar to the requests being sent to the GraphQL server. The server query type was also altered to accept an additional 'prometheusURL' argument. I also began to wrap functionality inside of utility functions to declutter component space

MichaelCSnyder · MichaelCSnyder · commit aa077b8ca0e8 · 2022-07-25T23:33:01.000-04:00
diff --git a/ksqLight/server/server.js b/ksqLight/server/server.js
@@ -48,10 +48,14 @@ const RootQueryType = new GraphQLObjectType({
                 metric: { type: GraphQLNonNull(GraphQLString)},
                 start: { type: GraphQLNonNull(GraphQLInt)},
                 end: { type: GraphQLNonNull(GraphQLInt)},
-                resolution: { type: GraphQLNonNull(GraphQLInt)}
+                resolution: { type: GraphQLNonNull(GraphQLInt)},
+                prometheusURL: { type: GraphQLNonNull(GraphQLString)}
             },
-            resolve: (parent, {start, end, resolution, metric}) => {
-                return axios.get(`http://localhost:9090/api/v1/query_range?step=${resolution}s&end=${end}&start=${start}&query=${queryTypes[metric]}`)
+            resolve: (parent, {start, end, resolution, metric, prometheusURL}) => {
+                if (prometheusURL[prometheusURL.length] === '/') prometheusURL = prometheusURL.slice(0, prometheusURL.length);
+                console.log(prometheusURL);
+
+                return axios.get(`${prometheusURL}/api/v1/query_range?step=${resolution}s&end=${end}&start=${start}&query=${queryTypes[metric]}`)
                 .then(res => res.data.data.result[0].values)
                 .catch(error => error);
             }
diff --git a/ksqLight/src/App.js b/ksqLight/src/App.js
@@ -11,17 +11,9 @@ 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,
+    prometheusURL: "http://localhost:9090/",
+    ksqlDBURL: "",
     duration: {
       days: 0,
       hours: 0,
@@ -33,7 +25,11 @@ function App() {
   return (
     <BrowserRouter>
       <CssBaseline/>
-      <Header fetchMetrics={fetchMetrics} setFetchMetrics={setFetchMetrics} showSettings={showSettings} setShowSettings={setShowSettings}/>
+      <Header 
+        fetchMetrics={fetchMetrics} 
+        setFetchMetrics={setFetchMetrics} 
+        showSettings={showSettings} 
+        setShowSettings={setShowSettings}/>
       <SettingsSidebar 
         showSettings={showSettings} 
         setShowSettings={setShowSettings} 
@@ -42,7 +38,7 @@ function App() {
       </SettingsSidebar>
       <PermanentDrawer></PermanentDrawer>
       <Routes>
-        <Route path="/" element={<Homepage/>}/>
+        <Route path="/" element={<Homepage metricsState={metricsState}/>}/>
         <Route path="/queryPage" element={<QueryPage/>}/>
       </Routes>
     </BrowserRouter>
diff --git a/ksqLight/src/components/Homepage.js b/ksqLight/src/components/Homepage.js
@@ -4,11 +4,11 @@ import { Typography, Grid, Toolbar } from "@mui/material";
 import { Chart } from "./Chart.js";
 import LineChart from "./LineChart.js";
 
-export const Homepage = () => {
+export const Homepage = ({ metricsState }) => {
   const [content, setContent] = useState('Chart placeholder');
 
   const queryTypes = [
-    // ["runningQueries", "Number of Running Queries"],
+    ["runningQueries", "Number of Running Queries"],
     // ["rebalancingQueries", "Number of Rebalancing Queries"],
     // ["pendingShutdownQueries", "Number of Pending Shutdown Queries"],
     // ["pendingErrorQueries", "Number of Pending Error Queries"],
@@ -34,7 +34,7 @@ export const Homepage = () => {
       <Toolbar></Toolbar>
       <Typography color="primary">Homepage</Typography>
       <Grid container spacing={2} justifyContent="flex-start" alignItems="flex-start" sx={{ pl: 28 }}>
-        {queryTypes.map(([query, description], index) => <LineChart description={description} metric={query} key={index}/>)}
+        {queryTypes.map(([query, description], index) => <LineChart description={description} metric={query} metricsState={metricsState} key={index}/>)}
       </Grid>
     </div>
 
diff --git a/ksqLight/src/components/LineChart.js b/ksqLight/src/components/LineChart.js
@@ -1,3 +1,4 @@
+//-----------Import External Modules-----------
 import React, { useEffect, useState } from "react";
 import { Grid, Typography } from "@mui/material";
 import {
@@ -10,21 +11,22 @@ import Chart from "chart.js/auto";
 import ChartStreaming from "chartjs-plugin-streaming";
 import 'chartjs-adapter-moment';
 
-// import config from './chartConfig.js';
 
+//-----------Import Internal Modules-----------
+import {getUnixRange, getDuration} from "../utils/utilityFunctions.js";
 
 Chart.register(ChartStreaming);
 
+
 const client = new ApolloClient({
   uri: "http://localhost:5000/graphql",
   cache: new InMemoryCache(),
 });
 
 //   console.log('test: ', Math.round(new Date().getTime() / 1000));
 
-export default function LineChart({ metric, description }) {
+export default function LineChart({ metric, description, metricsState }) {
   useEffect(() => {
-    let delayed;
     // define chart context
     const ctx = document.getElementById(metric).getContext("2d");
 
@@ -38,30 +40,17 @@ export default function LineChart({ metric, description }) {
     type: 'line',
     data: {
         datasets: [{
-        data: [],           // empty at the beginning,
-        borderColor: 'rgba(58, 123, 213, 1)',
-        pointRadius: 0,
-        hitRadius: 30,
-        hoverRadius: 5,
-        fill: true,
-        backgroundColor: gradient,
+          data: [],           // empty at the beginning,
+          borderColor: 'rgba(58, 123, 213, 1)',
+          pointRadius: 0,
+          hitRadius: 30,
+          hoverRadius: 5,
+          fill: true,
+          backgroundColor: gradient,
       }]
     },
     options: {
       responsive: true,
-      animation: {
-        onComplete: () => {
-          delayed = true;
-        },
-        // delay: (context) => {
-        //   let delay = 0;
-        //   if (context.type === "data" && context.mode === "default" && !delayed) {
-        //     delay = context.dataIndex * 300 + context.datasetIndex * 100;
-        //   }
-        //   return delay;
-        // }
-        delay: 3,
-      },
       elements: {
         line: {
             tension: .4
@@ -71,21 +60,22 @@ export default function LineChart({ metric, description }) {
         x: {
           type: 'realtime',   // x axis will auto-scroll from right to left
           realtime: {         // per-axis options
-            duration: 200000,  // data in the past 20000 ms will be displayed
-            refresh: 2000,    // onRefresh callback will be called every 1000 ms
-            delay: 2000,      // delay of 1000 ms, so upcoming values are known before plotting a line
+            duration: getDuration(metricsState.duration.days, metricsState.duration.hours, metricsState.duration.minutes),  // data in the past duration # of ms will be displayed
+            refresh: metricsState.refreshRate * 1000,    // onRefresh callback will be called every refresh # ms
+            delay: 1000,      // delay of 1000 ms, so upcoming values are known before plotting a line
             pause: false,     // chart is not paused
             ttl: undefined,   // data will be automatically deleted as it disappears off the chart
             frameRate: 30,    // data points are drawn 30 times every second
   
             // a callback to update datasets
             onRefresh: chart => {
+              const [unixStart, unixEnd] = getUnixRange(metricsState.duration.days, metricsState.duration.hours, metricsState.duration.minutes);
   
               // query your data source and get the array of {x: timestamp, y: value} objects
               client.query({
                 query: gql`
                     query testQuery {
-                      ksqlDBMetrics(metric: "${metric}", resolution: 2, start: ${Math.round(new Date().getTime() / 1000) - 500}, end: ${Math.round(new Date().getTime() / 1000)}) {
+                      ksqlDBMetrics(prometheusURL: "${metricsState.prometheusURL}" metric: "${metric}", resolution: ${metricsState.refreshRate}, start: ${unixStart}, end: ${unixEnd}) {
                             x,
                             y
                         }
@@ -100,6 +90,7 @@ export default function LineChart({ metric, description }) {
                         y: queryObj.y
                     }
                 });
+                // console.log(data);
                 chart.data.datasets[0].data = data;
               })
               .catch(error => console.log(error));
@@ -133,7 +124,11 @@ export default function LineChart({ metric, description }) {
   // instantiate new instance of a chart
   const realTimeChart = new Chart(ctx, config);
 
-  // populate initial data to avoid having to wait for first refresh
+  // notes on where to go next
+  // look into Line chart.js - 2 component to pass data to
+  // look into the first batch of data coming back and compare it to other batches that successfully update the chart
+
+  // // populate initial data to avoid having to wait for first refresh
   // client.query({
   //   query: gql`
   //       query testQuery {
@@ -152,22 +147,27 @@ export default function LineChart({ metric, description }) {
   //           y: queryObj.y
   //       }
   //   });
-  //   console.log('this is a test');
+  //   console.log('this runs within initial fetch');
   //   realTimeChart.data.datasets[0].data = data;
-  //   realTimeChart.update();
+  //   // realTimeChart.update();
   // })
   // .catch(error => console.log(error));
 
 
     // chart teardown on unmount
     return () => {
-        realTimeChart.destroy();
+      console.log('teardown');
+      realTimeChart.destroy();
     }
-  }, []);
+  }, [metricsState]);
 
   return (
-    <Grid item xs={2}>
-      <canvas id={metric} width="100%" height="100%"></canvas>
-    </Grid>
+    <>
+      <Grid item xs={2}>
+        <canvas id={metric} width="100%" height="100%"></canvas>
+      </Grid>
+      <Grid item xs={10}>
+      </Grid>
+    </>
   );
 }
diff --git a/ksqLight/src/components/SettingsSidebar.js b/ksqLight/src/components/SettingsSidebar.js
@@ -87,7 +87,8 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
     event.preventDefault();
 
     // verify prometheus URL
-    // verify ksqlDB URL
+    // verify ksqlDB url
+    // verify metrics exist for duration requested
 
     // idea: set microstates for this component so that values can update on change, but app state does not change until submit
 
@@ -124,6 +125,7 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
               label="URL"
               name="prometheus-url"
               onChange={handleLocalMetrics}
+              value={localMetricsState.prometheusURL}
             />
             <hr className="w-full invisible mb-2 mt-2"></hr>
             <Typography variant="h6" sx={{color: "#333"}}>ksqlDB Connection</Typography>
@@ -134,6 +136,7 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
               label="URL"
               name="ksqldb-url"
               onChange={handleLocalMetrics}
+              value={localMetricsState.ksqlDBURL}
             />
             <hr className="w-full invisible mb-2 mt-2"></hr>
             <Typography variant="h6" sx={{color: "#333"}}>Duration</Typography>
@@ -217,7 +220,7 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
               <MenuItem value={55}>55</MenuItem>
             </Select>
             <hr className="w-full invisible mb-2 mt-2"></hr>
-            <Typography variant="h6" sx={{color: "white"}}>Refresh Rate</Typography>
+            <Typography variant="h6">Refresh Rate</Typography>
             <hr className="w-full mb-3 mt-1"></hr>
             <TextField
               fullWidth 
diff --git a/ksqLight/src/utils/utilityFunctions.js b/ksqLight/src/utils/utilityFunctions.js
@@ -0,0 +1,13 @@
+const utilityFunctions = {};
+
+utilityFunctions.getUnixRange = (days, hours, minutes) => {
+    const unixTimeNow = Math.round(new Date().getTime() / 1000);
+    const unixOffSet = minutes * 60 + hours * 60 * 60 + days * 60 * 60 * 24;
+    return [unixTimeNow - unixOffSet, unixTimeNow]
+};
+
+utilityFunctions.getDuration = (days, hours, minutes) => {
+    return (minutes * 60 + hours * 60 * 60 + days * 60 * 60 * 24) * 1000;
+}
+
+module.exports  = utilityFunctions;
