Merge pull request #32 from Chronos2-0/chris/health-button-restructure

Chris/health button restructure

Author: tim-atapagra

Main.js

@@ -202,6 +202,7 @@ ipcMain.on('deleteService', (message, index) => {
 
 // Queries the database for communications information and returns it back to the render process.
 ipcMain.on('overviewRequest', (message, index) => {
+  console.log('hello from overview request');
   const { services } = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), { encoding: 'UTF-8' }),
   );
@@ -244,6 +245,7 @@ ipcMain.on('overviewRequest', (message, index) => {
         console.log('Connected to SQL Database');
         const queryResults = JSON.stringify(result.rows);
         // Asynchronous event emitter used to transmit query results back to the render process.
+        console.log('ipcMain about to send overviewResponse message');
         message.sender.send('overviewResponse', queryResults);
       }
     });
@@ -252,6 +254,7 @@ ipcMain.on('overviewRequest', (message, index) => {
 
 // Queries the database for computer health information and returns it back to the render process.
 ipcMain.on('detailsRequest', (message, index) => {
+  console.log('detailsRequest message received');
   const databaseType = JSON.parse(
     fs.readFileSync(path.resolve(__dirname, './user/settings.json'), { encoding: 'UTF-8' }),
   ).services[index][1];
@@ -275,6 +278,7 @@ ipcMain.on('detailsRequest', (message, index) => {
       }
       const queryResults = JSON.stringify(result.rows);
       // Asynchronous event emitter used to transmit query results back to the render process.
+      // console.log('healthInfo data about to comeback');
       message.sender.send('detailsResponse', queryResults);
     });
   }

app/assets/tooltip.jpg

@@ -29,10 +29,19 @@ const AddService = () => {
     setDbType(document.getElementById('dbType').value);
   }, [dbState, setDbType]);
 
+  const tooltipWriteup = `Chronos utilizes user-owned databases to store communications and system health data.
+    Please enter a valid connection string to a SQL or noSQL database to begin monitoring.`;
+
   return (
     <div className="mainContainer">
-      <img src="app/assets/logo2.png" alt="logo" />
-      <h2 className="signUpHeader">Enter Your Database Information</h2>
+      <img src="app/assets/logo2.png" alt="logo" id="addServiceLogo" />
+      <h2 className="signUpHeader">
+        Enter Your Database Information
+        <sup className="tooltip">
+              &#9432;
+          <div className="tooltiptext">{tooltipWriteup}</div>
+        </sup>
+      </h2>
       <form>
         Database Type:
         <select id="dbType" onChange={() => setDbType(document.getElementById('dbType').value)}>

app/components/AddService.jsx

@@ -16,15 +16,15 @@ const Modal = (props) => {
   } = props;
   //  Dictionary used to render proper data chart within Modal component upon rendering
   const dict = {
-    request: <RequestTypesChart service={service} />,
+    Request: <RequestTypesChart service={service} />,
     routesImage: <RouteTrace service={service} />,
-    response: <ResponseCodesChart service={service} />,
-    speed: <SpeedChart service={service} />,
-    processes: <ProcessesChart service={service} />,
-    latency: <LatencyChart service={service} />,
+    Response: <ResponseCodesChart service={service} />,
+    Speed: <SpeedChart service={service} />,
+    Processes: <ProcessesChart service={service} />,
+    Latency: <LatencyChart service={service} />,
     Traffic: <MicroServiceTraffic service={service} />,
-    temperature: <TemperatureChart service={service} />,
-    memory: <MemoryChart service={service} />,
+    Temperature: <TemperatureChart service={service} />,
+    Memory: <MemoryChart service={service} />,
   };
 
   // event.stopPropogation allows the user to interact with the chart as opposed to a click on the

app/components/Modal.jsx

@@ -1,16 +1,11 @@
+/* eslint-disable react/jsx-one-expression-per-line */
 import React, { useState } from 'react';
 import Modal from './Modal.jsx';
-import pieChart from '../assets/pieChart.png';
-import memoryChart from '../assets/memoryChart.png';
-import tempChart from '../assets/tempChart.png';
-import speedChart from '../assets/speedChart.png';
-import latencyChart from '../assets/latencyChart.png';
-import processingChart from '../assets/processingChart.png';
 
 // Renders charts created with health and communication data for a selected database.
 const ServiceDetails = (props) => {
   // Renders health info detail buttons
-  const { service } = props;
+  const { service, setDetails } = props;
   // Hook used to toggle whether or not the Modal component renders
   const [modalDisplay, toggleModalDisplay] = useState(false);
   // Hook used to set the chart that the Modal displays.  The
@@ -19,19 +14,17 @@ const ServiceDetails = (props) => {
   // Hook used to set the Modal Component title. The "alt" attribute
   // is grabbed from the onClick event via event.path[0].alt
   const [chartTitle, setChartTitle] = useState();
-  const { currentMicroservice } = props;
 
   // Dictionary used by the healthInfoButtons loop below
 
   const buttonProperties = [
-    { id: 'request', alt: 'Request Data', src: 'app/assets/pieChart.png' },
-    { id: 'response', alt: 'Response Data', src: 'app/assets/pieChart.png' },
-    // { id: 'routes', alt: 'Route Trace', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
-    { id: 'speed', alt: 'Speed Data', src: 'app/assets/speedChart.png' },
-    { id: 'processes', alt: 'Processes Data', src: 'app/assets/processingChart.png' },
-    { id: 'latency', alt: 'Latency Data', src: 'app/assets/latencyChart.png' },
-    { id: 'temperature', alt: 'Temperature Data', src: 'app/assets/tempChart.png' },
-    { id: 'memory', alt: 'Memory Data', src: 'app/assets/memoryChart.png' },
+    { id: 'Request', alt: 'Request Data', src: 'app/assets/pieChart.png' },
+    { id: 'Response', alt: 'Response Data', src: 'app/assets/pieChart.png' },
+    { id: 'Speed', alt: 'Speed Data', src: 'app/assets/speedChart.png' },
+    { id: 'Processes', alt: 'Processes Data', src: 'app/assets/processingChart.png' },
+    { id: 'Latency', alt: 'Latency Data', src: 'app/assets/latencyChart.png' },
+    { id: 'Temperature', alt: 'Temperature Data', src: 'app/assets/tempChart.png' },
+    { id: 'Memory', alt: 'Memory Data', src: 'app/assets/memoryChart.png' },
   ];
 
   // Create the Health Info buttons and their associated properties.  Each time a button is clicked,
@@ -56,7 +49,7 @@ const ServiceDetails = (props) => {
             alt={buttonProperties[i].alt}
           />
           <br />
-          <div style={{ color: 'white', paddingLeft: '7px' }}>
+          <div>
             {buttonProperties[i].id}
           </div>
         </div>
@@ -78,11 +71,21 @@ const ServiceDetails = (props) => {
           }}
         />
       ) : null}
-      <button className="backButton" type="button" onClick={() => document.location.reload()}>Back</button>
-      <h3 id="microserviceHealthTitle">Microservice Health</h3>
+
+      <h3 id="microserviceHealthTitle">Microservice Health - {service}</h3>
       <div id="healthGrid">
         {healthInfoButtons}
       </div>
+      <button
+        className="backButton"
+        type="button"
+        onClick={() => {
+          // document.location.reload()
+          setDetails(null);
+        }}
+      >
+      Clear Health Data
+      </button>
     </div>
   );
 };

app/components/ServiceDetails.jsx

@@ -23,15 +23,16 @@ const ServiceOverview = (props) => {
   useEffect(() => {
     // IPC communication used to initiate query for information on microservices.
     ipcRenderer.send('overviewRequest', props.index);
-
     // IPC listener responsible for retrieving infomation from asynchronous main process message.
     ipcRenderer.on('overviewResponse', (event, data) => {
       // Adds to state and context.
+      console.log(JSON.parse(data));
       setOverviewState(Object.values(JSON.parse(data)));
       serviceComponents.overviewData = JSON.parse(data);
     });
   }, []);
 
+  console.log('overviewstate: ', overviewState);
   // Add routes to the display
   // Hook used to toggle whether or not the Modal component renders
   const [modalDisplay, toggleModalDisplay] = useState(false);
@@ -43,7 +44,10 @@ const ServiceOverview = (props) => {
   const [chartTitle, setChartTitle] = useState();
 
   // route button AND traffic button property
-  const routeButtonProperty = { traffic: { id: 'Traffic', alt: 'Microservice Traffic', src: 'app/assets/chartModal.png' }, routes: { id: 'routesImage', alt: 'Route Trace', src: routeChart } };
+  const routeButtonProperty = {
+    traffic: { id: 'Traffic', alt: 'Microservice Traffic', src: 'app/assets/chartModal.png' },
+    routes: { id: 'routesImage', alt: 'Route Trace', src: routeChart },
+  };
 
   // declare routes array to display routes when modal is toggled
   const routes = [];
@@ -126,7 +130,8 @@ const ServiceOverview = (props) => {
                   // Adds returned data to context
                   healthdata.detailData = Object.values(JSON.parse(data));
                   // Updates state. Triggers rerender.
-                  setDetails(<ServiceDetails service={element.currentmicroservice} />);
+                  setDetails(<ServiceDetails service={element.currentmicroservice} setDetails={setDetails} />);
+                  console.log('details selected is: ', detailsSelected);
                 });
               }}
             >
@@ -175,16 +180,21 @@ const ServiceOverview = (props) => {
     return componentButtons;
   };
 
-  if (detailsSelected) return detailsSelected;
+  const tooltipWriteup = `Communications data - Routes and Traffic - is not specific to a single microservice,
+   but combines data from all microservices within a single application network.`;
+
+  const tooltipWriteup2 = 'View and toggle between health data for individual services within your microservice network.';
 
   return (
     <div className="mainContainer">
-      <div>
-        <h1 className="overviewTitle">Microservices Overview</h1>
-      </div>
-      <div className="servicesList">{serviceList()}</div>
-      <br />
-      <h1>Microservices Communications</h1>
+      <h1 className="overviewTitle">Microservices Overview</h1>
+      <h2>
+        Communications Data
+        <sup className="tooltip">
+          &#9432;
+          <div className="tooltiptext">{tooltipWriteup}</div>
+        </sup>
+      </h2>
       {modalDisplay ? (
         <Modal
           chartTitle={chartTitle}
@@ -200,7 +210,15 @@ const ServiceOverview = (props) => {
         {routes}
         {traffic}
       </div>
-
+      <div className="servicesList">
+        {serviceList()}
+        <sup className="tooltip">
+          &#9432;
+          <div className="tooltiptext">{tooltipWriteup2}</div>
+        </sup>
+      </div>
+      <br />
+      {detailsSelected || null}
     </div>
   );
 };

app/components/ServiceOverview.jsx

@@ -1,12 +1,11 @@
+/* eslint-disable react/jsx-one-expression-per-line */
 import React, { useState, useContext } from 'react';
 import ServiceOverview from './ServiceOverview.jsx';
 import DashboardContext from '../context/DashboardContext';
 import SetupContext from '../context/SetupContext';
 import AddService from './AddService.jsx';
 import DeleteService from './DeleteService.jsx';
 
-const path = require('path');
-
 const ServicesDashboard = (props) => {
   // Used to toggle setup required if user wants to add a new database.
   const setup = useContext(SetupContext);
@@ -43,7 +42,9 @@ const ServicesDashboard = (props) => {
         <div className="leftTopContainer">
           <img alt="Chronos Logo" src="app/assets/icon2Cropped.png" id="serviceDashLogo" />
           <div className="left-top">
-            <h2 className="dashboardHeader">Your Databases</h2>
+            <h2 className="dashboardHeader">
+              Your Databases
+            </h2>
             {renderServiceList(serviceList)}
           </div>
           <div className="left-bottom">

app/components/ServicesDashboard.jsx

@@ -65,6 +65,38 @@ margin-top: -100px;
   font-weight: lighter;
 }
 
+#addServiceLogo {
+  margin-bottom: 0px;
+}
+
+.tooltip {
+  font-size: 10px;
+  position: relative;
+  /* display: inline-block; */
+  z-index: 0;
+}
+
+.tooltiptext {
+  visibility: hidden;
+  font-size: 12px;
+  width: 180px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  left: 105%;
+  top: -5px;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
 .header {
   color: white;
   height: 50px;
@@ -76,10 +108,8 @@ margin-top: -100px;
 
 .mainContainer {
   font-family: Arial, Helvetica, sans-serif;
-  display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: 33% 33% 33%;
-  justify-items: center;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   color: white;
 }
@@ -123,7 +153,7 @@ margin-top: -100px;
 }
 
 .overviewTitle {
-  margin-top: 80px;
+  margin-top: 40px;
 }
 
 .leftTopContainer {
@@ -286,6 +316,7 @@ select {
   background-color: #edd9a3;
   transition: 0.2s;
   margin-left: 0px;
+  margin-top: 5%;
 }
 
 .backButton:hover {
@@ -295,17 +326,26 @@ select {
 
 /* healthInfo visualizer css from 2.0 Team */
 #serviceDetailsContainer {
+  margin-top: 5%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-#healthGrid {
+
+/* #healthGrid {
   display: grid;
   grid-template-columns: 75px 75px 75px;
   width: auto;
   justify-items: center;
   align-items: center;
+} */
+
+#healthGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  justify-items: center;
+  text-align: center;
 }
 
 .healthName {
@@ -344,6 +384,7 @@ select {
   width: 100%;
    height: 100%;
   background:rgba(0,0,0,.5);
+  z-index: 1;
 }
 
 #modalContent {
@@ -352,7 +393,7 @@ select {
   left: 50%;
   margin-left: -500px;
   margin-top: -380px;
-  z-index: 1;
+  z-index: 2;
   width: 1000px;
   height: 760px;
   background: #333;

app/index.css

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Chronos</title>
+</head>
+<body>
+    <div id='app'></div>
+<script type="text/javascript" src="index_bundle.js"></script></body>
+</html>