Tyler/connect comp

client/actions/actionTypes.js

@@ -1,9 +1,8 @@
-export const ADD_COUNT = "ADD_COUNT";
 export const ADD_PORT = "ADD_PORT";
 export const REMOVE_PORT = "REMOVE_PORT";
+export const ADD_CONNECTION_TIME = 'ADD_CONNECTION_TIME';
 
-export const FETCH_DATA_SUCCESS = "FETCH_DATA_SUCCESS";
-
+export const FETCH_BROKER_SUCCESS = "FETCH_BROKER_SUCCESS";
 export const FETCH_PRODUCER_SUCCESS = "FETCH_PRODUCER_SUCCESS";
 export const FETCH_CONSUMER_SUCCESS = "FETCH_CONSUMER_SUCCESS";
 export const FETCH_NETWORK_SUCCESS = "FETCH_NETWORK_SUCCESS";

client/actions/actions.js

@@ -1,13 +1,6 @@
 import * as types from "./actionTypes.js";
 
 //action creators below
-export const addCountAction = () => {
-  return {
-    type: types.ADD_COUNT,
-    payload: 1,
-  };
-};
-
 export const addPortAction = (userPort) => {
   return {
     type: types.ADD_PORT,
@@ -21,17 +14,16 @@ export const removePortAction = () => {
     payload: "",
   };
 };
-//Step 5 create async and action creator
 
-// export const fetchDataRequest = (data) => {
-//   return {
-//     type: types.FETCH_DATA_REQUEST,
-//     payload: data,
-//   };
-// };
+export const addConnectionTimeAction = (timestamp) => {
+  return {
+    type: types.ADD_CONNECTION_TIME,
+    payload: timestamp,
+  };
+};
 
 //First: Broker Metrics
-export const fetchBrokerMetics = () => (dispatch) => {
+export const fetchBrokerMetrics = () => (dispatch) => {
   //0.Underreplicated partitions(Score Card)
   let data0 = fetch(
     "http://localhost:9090/api/v1/query?query=kafka_server_replicamanager_underreplicatedpartitions"
@@ -74,7 +66,7 @@ export const fetchBrokerMetics = () => (dispatch) => {
   Promise.all([data0, data1, data2, data3, data4, data5, data6, data7])
     .then((allData) => {
       dispatch({
-        type: types.FETCH_DATA_SUCCESS,
+        type: types.FETCH_BROKER_SUCCESS,
         payload: allData,
       });
     })
@@ -128,7 +120,7 @@ export const fetchConsumerMetrics = () => (dispatch) => {
 export const fetchNetworkMetrics = () => (dispatch) => {
   //Average Idle percentage: source
   let data1 = fetch(
-    `http://localhost:9090/api/v1/query_range?query=kafka_network_socketserver_networkprocessoravgidlepercent&start=2021-09-18T10:30:00.781Z&end=${new Date().toISOString()}&step=60s`
+    `http://localhost:9090/api/v1/query_range?query=kafka_network_socketserver_networkprocessoravgidlepercent&start=2021-09-19T17:37:11.716Z&end=${new Date().toISOString()}&step=60s`
   ).then((respose) => respose.json());
 
   //CPU usage

client/components/ConnectCluster.jsx

@@ -1,9 +1,11 @@
-import React from "react";
+// import React from "react";
+import React, { useState } from "react";
 import TextField from "@material-ui/core/TextField";
 import Button from "@material-ui/core/Button";
 import { makeStyles } from "@material-ui/core/styles";
 import { connect } from "react-redux";
-import { addPortAction } from "../actions/actions";
+import { addPortAction, addConnectionTimeAction } from "../actions/actions";
+import PortAlert from './PortAlert.jsx';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -31,11 +33,14 @@ const mapStateToProps = (state) => {
   };
 };
 
-const mapDistpatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch) => {
   return {
     addPortAction: (userInput) => {
       dispatch(addPortAction(userInput));
     },
+    addConnectionTimeAction: (timestamp) => {
+      dispatch(addConnectionTimeAction(timestamp));
+    }
   };
 };
 
@@ -56,20 +61,23 @@ const verifyPort = async (port) => {
 //component
 function ConnectCluster(props) {
   const classes = useStyles();
+  const [attempts, addAttempt] = useState(0);
 
   return (
     <>
       <h5>Port: {props.port} </h5>
       <form className={classes.root} noValidate autoComplete="off">
-        <TextField
+        {/* <TextField
           id="broker"
           label="Broker Port"
           type="search"
           variant="outlined"
-        />
+        /> */}
+        {/* {attempts > 0 ? <TextField id="prometheus" label="Prometheus Port" type="search" variant="outlined"/> : <Button />} */}
+        {attempts > 0 ? <PortAlert /> : <></> }
         <TextField
-          id="exporter"
-          label="Exporter Port"
+          id="prometheus"
+          label="Prometheus Port"
           type="search"
           variant="outlined"
         />
@@ -80,10 +88,15 @@ function ConnectCluster(props) {
           href="#contained-buttons"
           onClick={async (e) => {
             e.preventDefault();
-            const userPort = document.getElementById('exporter').value;
+            const userPort = document.getElementById('prometheus').value;
             const verified = await verifyPort(userPort);
+            const timestamp = new Date().toISOString();
             console.log('on click -> ', verified);
-            if (verified) props.addPortAction(userPort);
+            if (verified) {
+              props.addPortAction(userPort);
+              props.addConnectionTimeAction(timestamp);
+            }
+            else addAttempt(attempts + 1);
           }}
         >
           Connect
@@ -94,4 +107,4 @@ function ConnectCluster(props) {
 }
 
 // export default ConnectCluster;
-export default connect(mapStateToProps, mapDistpatchToProps)(ConnectCluster);
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectCluster);

client/components/DisconnectCluster.jsx

@@ -28,10 +28,11 @@ const useStyles = makeStyles((theme) => ({
 const mapStateToProps = (state) => {
   return {
     port: state.mainReducer.port,
+    connectionTime: state.mainReducer.connectionTime
   };
 };
 
-const mapDistpatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch) => {
   return {
     removePortAction: () => {
       dispatch(removePortAction());
@@ -46,6 +47,7 @@ function DisconnectCluster(props) {
   return (
     <>
       <h5>Port: {props.port} </h5>
+      <h5>Connection Time: {props.connectionTime} </h5>
       <form className={classes.root} noValidate autoComplete="off">
         <TextField
           id="broker"
@@ -77,4 +79,4 @@ function DisconnectCluster(props) {
 }
 
 // export default ConnectCluster;
-export default connect(mapStateToProps, mapDistpatchToProps)(DisconnectCluster);
+export default connect(mapStateToProps, mapDispatchToProps)(DisconnectCluster);

client/components/NetworkDisplay.jsx

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { fetchNetworkMetrics } from "../actions/actions.js";
 import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
 import BarChart from "./charts/BarChart.jsx";
 import LineChart from "./charts/LineChart.jsx";
 import ScoreCard from "./charts/ScoreCard.jsx";
-import { connect } from "react-redux";
+import { connect, useDispatch } from "react-redux";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -27,37 +28,176 @@ const mapStateToProps = (state) => {
   };
 };
 
+const mapDispatchToProps = (dispatch) => {
+  return {
+    fetchNetworkMetrics: () => {
+      dispatch(fetchNetworkMetrics());
+    },
+  };
+};
+
+// async function NetworkDisplay(props) {
+//   console.log("Props.Idle Percent", props.idlePercent);
+//   //totalProducerRequest
+
+//     //Average Idle percentage: source
+//   let data1 = await fetch(
+//     `http://localhost:9090/api/v1/query_range?query=kafka_network_socketserver_networkprocessoravgidlepercent&start=2021-09-18T10:30:00.781Z&end=${new Date().toISOString()}&step=60s`
+//   ).then((respose) => respose.json());
+
+//   //CPU usage
+//   // let data2 = fetch(
+//   //   "http://localhost:9090/api/v1/query?query=process_cpu_seconds_total"
+//   // ).then((respose) => respose.json());
+
+//   const idleData = await Promise.all([data1])
+//     .then((allData) => {
+//       return data1.data.result[0].values
+//     })
+//     .catch(console.error);
+
+
+//   const xArrayIdle = idleData.map((data) => {
+//     let date = new Date(data[0]);
+//     return date.getTime();
+//   });
+//   const yArrayIdle = idleData.map((data) => Number(data[1]));
+
+//   const classes = useStyles();
+
+//   return (
+//     <div className={classes.root}>
+//       <Grid container spacing={3} className={classes.parent}>
+//         <Grid item xs={12}>
+//           Network Metrics
+//         </Grid>
+
+//         <Grid item xs={12} className={classes.child}>
+//           <Paper className={classes.paper}>
+//             <LineChart
+//               metricName={"Network processor average idle percent"}
+//               x={xArrayIdle}
+//               y={yArrayIdle}
+//             />
+//           </Paper>
+//         </Grid>
+//       </Grid>
+//     </div>
+//   );
+// }
+
+// function NetworkDisplay(props) {
+//   console.log("Props.Idle Percent", props.idlePercent);
+//   //totalProducerRequest
+//   const [xArrayIdle, setXArray] = useState([]);
+//   const [yArrayIdle, setYArray] = useState([]);
+
+//   useEffect(() => {
+//     fetch(
+//       `http://localhost:9090/api/v1/query_range?query=kafka_network_socketserver_networkprocessoravgidlepercent&start=2021-09-19T17:37:11.716Z&end=${new Date().toISOString()}&step=60s`
+//     )
+//     .then((respose) => respose.json())
+//     .then((res)=>{
+//       setXArray(res.data.result[0].values.map((data) => {
+//         let date = new Date(data[0]);
+//         return date.getTime()})
+//       )
+//       setYArray(res.data.result[0].values.map((data) => Number(data[1])))
+//       console.log('this is x and y array: ', setXArray, setYArray)
+//     })
+//   }, [fetchNetworkMetrics]);
+
+//   // const yArrayIdle = props.idlePercent.map((data) => Number(data[1]));
+
+//   const classes = useStyles();
+
+//     return (
+//       <div className={classes.root}>
+//         <Grid container spacing={3} className={classes.parent}>
+//           <Grid item xs={12}>
+//             Network Metrics
+//           </Grid>
+
+//           <Grid item xs={12} className={classes.child}>
+//             <Paper className={classes.paper}>
+//               <LineChart
+//                 metricName={"Network processor average idle percent"}
+//                 x={xArrayIdle}
+//                 y={yArrayIdle}
+//               />
+//             </Paper>
+//           </Grid>
+//         </Grid>
+//       </div>
+//     );
+
 function NetworkDisplay(props) {
   console.log("Props.Idle Percent", props.idlePercent);
-
   //totalProducerRequest
+  // const dispatch = useDispatch();
+
+  // useEffect(() => {
+
+  //   const loadData = async () => {
+  //     await dispatch(fetchNetworkMetrics())
+  //   }
+
+  //   loadData();
+
+  //   const xArrayIdle = props.idlePercent.map((data) => {
+  //     let date = new Date(data[0]);
+  //     return date.getTime()})
+
+  //   const yArrayIdle = props.idlePercent.map((data) => Number(data[1]))
+  //   console.log('this is xArrayIdle: ', xArrayIdle)
+
+  // }, [dispatch]);
+
+  const [isFetched, setFetched] = useState(false);
+
+  useEffect(async () => {
+    console.log('inside useEffect');
+    if (!isFetched) {
+      console.log('inside fetch block');
+      await props.fetchNetworkMetrics();
+      setFetched(true);
+    }
+  }, []);
+
+  if (!isFetched) return null;
+
   const xArrayIdle = props.idlePercent.map((data) => {
     let date = new Date(data[0]);
-    return date.getTime();
-  });
-  const yArrayIdle = props.idlePercent.map((data) => Number(data[1]));
+    return date.getTime()})
+
+  const yArrayIdle = props.idlePercent.map((data) => Number(data[1]))
+  console.log('this is xArrayIdle: ', xArrayIdle)
+
+  // const yArrayIdle = props.idlePercent.map((data) => Number(data[1]));
 
   const classes = useStyles();
 
-  return (
-    <div className={classes.root}>
-      <Grid container spacing={3} className={classes.parent}>
-        <Grid item xs={12}>
-          Network Metrics
-        </Grid>
+    return (
+      <div className={classes.root}>
+        <Grid container spacing={3} className={classes.parent}>
+          <Grid item xs={12}>
+            Network Metrics
+          </Grid>
 
-        <Grid item xs={12} className={classes.child}>
-          <Paper className={classes.paper}>
-            <LineChart
-              metricName={"Network processor average idle percent"}
-              x={xArrayIdle}
-              y={yArrayIdle}
-            />
-          </Paper>
+          <Grid item xs={12} className={classes.child}>
+            <Paper className={classes.paper}>
+              <LineChart
+                metricName={"Network processor average idle percent"}
+                x={xArrayIdle}
+                y={yArrayIdle}
+              />
+            </Paper>
+          </Grid>
         </Grid>
-      </Grid>
-    </div>
-  );
+      </div>
+    );
+
+
 }
 
-export default connect(mapStateToProps, null)(NetworkDisplay);
+export default connect(mapStateToProps, mapDispatchToProps)(NetworkDisplay);