Added Prometheus URL validation which alerts the user of bad address and prevents state change in the event the url is invalid

MichaelCSnyder · MichaelCSnyder · commit 4e2938159448 · 2022-07-29T12:05:00.000-04:00
diff --git a/ksqLight/server/server.js b/ksqLight/server/server.js
@@ -38,6 +38,7 @@ const RealTimeType = new GraphQLObjectType({
 })
 
 //---------------Root Query Types----------------
+// todo: change the Number(val) implementation 
 const RootQueryType = new GraphQLObjectType({
     name: 'Query',
     description: 'Root Query',
@@ -53,7 +54,7 @@ const RootQueryType = new GraphQLObjectType({
                 prometheusURL: { type: GraphQLNonNull(GraphQLString)}
             },
             resolve: (parent, {start, end, resolution, metric, prometheusURL}) => {
-                if (prometheusURL[prometheusURL.length] === '/') prometheusURL = prometheusURL.slice(0, prometheusURL.length);
+                if (prometheusURL[prometheusURL.length] === '/') prometheusURL = prometheusURL.slice(0, prometheusURL.length - 1);
 
                 return axios.get(`${prometheusURL}/api/v1/query_range?step=${resolution}s&end=${end}&start=${start}&query=${queryTypes[metric]}`)
                 .then(res => {
@@ -125,6 +126,20 @@ const RootQueryType = new GraphQLObjectType({
                 }
             }
         },
+        isValidPrometheusURL: {
+            type: GraphQLBoolean,
+            description: 'Boolean value representing whether provided Prometheus URL points to valid Prometheus server',
+            args: {
+                prometheusURL: { type: GraphQLNonNull(GraphQLString)}
+            },
+            resolve: async (parent, { prometheusURL }) => {
+                if (prometheusURL[prometheusURL.length] === '/') prometheusURL = prometheusURL.slice(0, prometheusURL.length - 1);
+
+                return axios.get(`${prometheusURL}/api/v1/status/buildinfo`)
+                .then(res => res.status === 200)
+                .catch(error => error);
+            }
+        }
     })
 });
 
diff --git a/ksqLight/src/components/Homepage.js b/ksqLight/src/components/Homepage.js
@@ -32,6 +32,7 @@ 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"],
@@ -58,7 +59,7 @@ export const Homepage = ({ showQueries, showMessages, showErrors, metricsState }
   return (
     <Box>
       <CssBaseline />
-      <Typography color="primary">Hi Welcome back</Typography>
+      {/* <Typography color="primary">Hi Welcome back</Typography> */}
       <Grid container spacing={4} sx={{}}>
         {showQueries &&
           queriesCharts.map(([query, description], index) =>
@@ -69,11 +70,11 @@ export const Homepage = ({ showQueries, showMessages, showErrors, metricsState }
             <LineChart description={description} metric={query} metricsState={metricsState} key={index} />
           )
         }
-        {/* {showErrors &&
+        {showErrors &&
           errorCharts.map(([query, description], index) =>
-            <LineChart description={description} metric={query} key={index} />
+            <LineChart description={description} metric={query} metricsState={metricsState} key={index} />
           )
-        } */}
+        }
         {/* {queryTypes.map(([query, description], index) => <LineChart description={description} metric={query} key={index} />)} */}
       </Grid>
     </Box>
diff --git a/ksqLight/src/components/SettingsSidebar.js b/ksqLight/src/components/SettingsSidebar.js
@@ -2,6 +2,17 @@ import React, { useEffect } from "react";
 import { useState } from "react";
 import { TextField, Typography, MenuItem, Select, Drawer, IconButton, Grid, Button, Stack } from "@mui/material"
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import {
+  ApolloClient,
+  InMemoryCache,
+  ApolloProvider,
+  gql,
+} from "@apollo/client";
+
+const client = new ApolloClient({
+  uri: "http://localhost:5001/graphql",
+  cache: new InMemoryCache(),
+});
 
 export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, setMetricsState }) => {
   const [localMetricsState, setLocalMetricsState] = useState({
@@ -10,6 +21,8 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
     duration: metricsState.duration,
     refreshRate: metricsState.refreshRate
   });
+  const [invalidPrometheusMessage, setInvalidPrometheusMessage] = useState(null);
+  const [showSubmissionConfirmation, setShowSubmissionConfirmation] = useState(false);
 
   const handleLocalMetrics = (event) => {
     switch(event.target.name) {
@@ -63,32 +76,38 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
     }
   }
 
-  const handleSubmit = (event) => {
+  const handleSubmit = async (event) => {
     event.preventDefault();
 
-    // ToDo:
-      // 1. verify prometheus URL
-      // 2. verify ksqlDB url
-      // 3. verify metrics exist for duration requested
-
-    // update state
-    setMetricsState({
-      prometheusURL: localMetricsState.prometheusURL,
-      ksqlDBURL: localMetricsState.ksqlDBURL,
-      duration: {
-        days: localMetricsState.duration.days,
-        hours: localMetricsState.duration.hours,
-        minutes: localMetricsState.duration.minutes
-      },
-      refreshRate: localMetricsState.refreshRate
-    });
+    // Verify Prometheus URL
+    client.query({
+      query: gql`
+          query validatePrometheusURL{
+            isValidPrometheusURL(prometheusURL: "${event.target[1].value}")
+          }
+      `
+      })
+      .then(res => {
+        // update state
+        setMetricsState({
+          prometheusURL: localMetricsState.prometheusURL,
+          ksqlDBURL: localMetricsState.ksqlDBURL,
+          duration: {
+            days: localMetricsState.duration.days,
+            hours: localMetricsState.duration.hours,
+            minutes: localMetricsState.duration.minutes
+          },
+          refreshRate: localMetricsState.refreshRate
+        });
+        setInvalidPrometheusMessage(null);
+        setShowSubmissionConfirmation(true);
+        setTimeout(() => setShowSubmissionConfirmation(false), 3000);
+      })
+      .catch(error => {
+        setInvalidPrometheusMessage(error.message);
+      });
   }
 
-  // useEffect(() => {
-  //   console.log('this is the metrics state: ', metricsState);
-  // }, [metricsState]);
-
-
   return(
     <Drawer variant="temporary" anchor="right" open={showSettings} PaperProps={{sx: {paddingTop: "3.5em", width: "35%"}}}>
       <div className="flex-1 w-full header-viewport  p-4">
@@ -98,15 +117,30 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
               <ArrowForwardIosIcon sx={{color: "#333"}}/>
             </IconButton>
               <Typography variant="h6" sx={{color: "#333"}}>Prometheus Connection</Typography>
-                <hr className="w-full mb-3 mt-1"></hr>
-              <TextField
-                fullWidth 
-                variant="outlined"
-                label="URL"
-                name="prometheus-url"
-                onChange={handleLocalMetrics}
-                value={localMetricsState.prometheusURL}
-              />
+              <hr className="w-full mb-3 mt-1"></hr>
+              {invalidPrometheusMessage ? (
+                <>
+                  <TextField
+                  error
+                  fullWidth 
+                  variant="outlined"
+                  label="URL"
+                  name="prometheus-url"
+                  onChange={handleLocalMetrics}
+                  value={localMetricsState.prometheusURL}
+                  />
+                <Typography variant="h8" sx={{color: "red"}}>{invalidPrometheusMessage}</Typography>
+                </>
+              ) : (
+                <TextField
+                  fullWidth 
+                  variant="outlined"
+                  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>
               <hr className="w-full mb-3 mt-1"></hr>
@@ -172,6 +206,7 @@ export const SettingsSidebar = ({ showSettings, setShowSettings, metricsState, s
                 <Button variant="contained" type="submit">Submit</Button>
                 <Button color='secondary' variant="contained" onClick={() => setShowSettings(!showSettings)}>Cancel</Button>
               </Stack>
+              {showSubmissionConfirmation && <Typography variant="h8" sx={{color: "forestgreen", mt: "1em"}}>Settings Saved!</Typography>}
           </Grid>
         </form>
       </div>
diff --git a/ksqLight/src/utils/utilityFunctions.js b/ksqLight/src/utils/utilityFunctions.js
@@ -1,3 +1,5 @@
+const axios = require('axios');
+
 const utilityFunctions = {};
 
 utilityFunctions.getUnixRange = (days, hours, minutes) => {
@@ -8,6 +10,6 @@ utilityFunctions.getUnixRange = (days, hours, minutes) => {
 
 utilityFunctions.getDuration = (days, hours, minutes) => {
     return (minutes * 60 + hours * 60 * 60 + days * 60 * 60 * 24) * 1000;
-}
+};
 
 module.exports  = utilityFunctions;
