Finished the initial layout of the sidebar and connected user input to state to be sent along to the server upon data fetch

Author: MichaelCSnyder

ksqLight/server/server.js

@@ -53,7 +53,6 @@ const RootQueryType = new GraphQLObjectType({
             },
             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)

ksqLight/src/components/Homepage.js

@@ -9,9 +9,9 @@ export const Homepage = ({ metricsState }) => {
 
   const queryTypes = [
     ["runningQueries", "Number of Running Queries"],
-    // ["rebalancingQueries", "Number of Rebalancing Queries"],
-    // ["pendingShutdownQueries", "Number of Pending Shutdown Queries"],
-    // ["pendingErrorQueries", "Number of Pending Error 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"],
@@ -34,7 +34,7 @@ export const Homepage = ({ metricsState }) => {
       <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} metricsState={metricsState} key={index}/>)}
+        {queryTypes.map(([query, description], index) => <LineChart description={description} metric={query} metricsState={metricsState} key={index} />)}
       </Grid>
     </div>
 

ksqLight/src/components/LineChart.js

@@ -59,6 +59,13 @@ export default function LineChart({ metric, description, metricsState }) {
       scales: {
         x: {
           type: 'realtime',   // x axis will auto-scroll from right to left
+          ticks: {
+            // minTicksLimit: 24
+            autoskip: true,
+            autoSkipPadding: 30,
+            maxRotation: 0,
+            steps: 10
+          },
           realtime: {         // per-axis options
             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
@@ -163,11 +170,9 @@ export default function LineChart({ metric, description, metricsState }) {
 
   return (
     <>
-      <Grid item xs={2}>
+      <Grid item xs={3}>
         <canvas id={metric} width="100%" height="100%"></canvas>
       </Grid>
-      <Grid item xs={10}>
-      </Grid>
     </>
   );
 }