Fixed Add Service Rendering

Author: alon25

app/AComp/Microservices.jsx

@@ -3,11 +3,10 @@ import OverviewContext from '../context/OverviewContext';
 import HealthInformationContext from '../context/DetailsContext';
 import ServiceDetails from '../components/ServiceDetails.jsx';
 
-
 const { ipcRenderer } = window.require('electron');
 
 const Microservices = (props) => {
-  const { index, setDetails, setSelection } = props;
+  const { index, setDetails } = props;
   // Overview state used to create service buttons
   const [overviewState, setOverviewState] = useState([]);
   // const [detailsSelected, setDetails] = useState();
@@ -55,9 +54,8 @@ const Microservices = (props) => {
                 healthdata.detailData = Object.values(JSON.parse(data));
                 // Updates state. Triggers rerender.
                 setDetails(
-                      <ServiceDetails service={element.currentmicroservice} />
+                  <ServiceDetails service={element.currentmicroservice} />
                 );
-                
               });
               // setSelection(<Monitoring detailsSelected={detailsSelected} />);
             }}
@@ -79,16 +77,15 @@ const Microservices = (props) => {
               key={`serviceItem${index}${i}`}
               onClick={() => {
                 ipcRenderer.send('detailsRequest', index);
-                
+
                 // IPC listener responsible for retrieving infomation from asynchronous main process message.
                 ipcRenderer.on('detailsResponse', (event, data) => {
                   // Adds returned data to context.
                   healthdata.detailData = Object.values(JSON.parse(data));
                   // Updates state. Triggers rerender.
                   setDetails(
                     <ServiceDetails service={element.currentMicroservice} />
-                    
-                    );
+                  );
                 });
               }}
             >
@@ -103,7 +100,7 @@ const Microservices = (props) => {
   }
   // If there's no data, return 'No data present', else return microservices button
   if (componentButtons.length === 0) {
-    return <p>No data present</p>;
+    return <p>Loading</p>;
   }
   return componentButtons;
 };

app/AComp/MonitorHeader.jsx

@@ -5,15 +5,14 @@ import SidebarContainer from './SideBarContainer.jsx';
 import '../stylesheets/dashboard.css';
 
 const DashboardContainer = () => {
-  // Used to hold the buttons created for each database found in context.
-  const [serviceSelected, setSelection] = useState();
+
   const [detailsSelected, setDetails] = useState();
 
   return (
     <div className="servicesDashboardContainer">
-      <SidebarContainer setSelection={setSelection} setDetails={setDetails} />
+      <SidebarContainer setDetails={setDetails} />
       <div className="databsaseList">
-        {serviceSelected || <Monitoring detailsSelected={detailsSelected} />}
+        <Monitoring detailsSelected={detailsSelected} />
       </div>
     </div>
   );

app/AComp/Header.jsx app/AComp/SidebarHeader.jsxapp/AComp/Header.jsx renamed to app/AComp/SidebarHeader.jsx

@@ -1,83 +1,8 @@
-import React, { useState, useContext } from 'react';
-import MonitorHeader from '../AComp/MonitorHeader.jsx';
-import Modal from '../components/Modal.jsx';
-import OverviewContext from '../context/OverviewContext';
-import HealthInformationContext from '../context/DetailsContext';
-import routeChart from '../assets/routeChart.png';
+import React from 'react';
 
 const MonitoringContainer = (props) => {
   const { detailsSelected } = props;
 
-  // Contexts have data added to them following successful IPC return. Data is later used to create charts.
-  const serviceComponents = useContext(OverviewContext);
-  const healthdata = useContext(HealthInformationContext);
-
-  // 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
-  // modalDisplay state is drilled into the Modal component.
-  const [modalChart, setModalChart] = useState();
-  // 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();
-
-  // 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 },
-  };
-
-  // declare routes array to display routes when modal is toggled
-  const routes = [];
-  // declare traffic array to display traffic when modal is toggled
-  const traffic = [];
-
-  // push traffic component logic traffic
-  traffic.push(
-    <div className="healthChartContainer">
-      <input
-        onClick={() => {
-          setChartTitle(event.path[0].alt);
-          setModalChart(event.path[0].id);
-          toggleModalDisplay(!modalDisplay);
-        }}
-        type="image"
-        id={routeButtonProperty.traffic.id}
-        src={routeButtonProperty.traffic.src}
-        width="60px"
-        alt={routeButtonProperty.traffic.alt}
-      />
-      <br />
-      <div style={{ color: 'white', paddingLeft: '7px' }}>
-        {routeButtonProperty.traffic.id}
-      </div>
-    </div>
-  );
-
-  // push routes component logic traffic
-  routes.push(
-    <div className="healthChartContainer">
-      <input
-        onClick={() => {
-          setChartTitle(event.path[0].alt);
-          setModalChart(event.path[0].id);
-          toggleModalDisplay(!modalDisplay);
-        }}
-        type="image"
-        id={routeButtonProperty.routes.id}
-        src="app/assets/routeChart.png"
-        width="60px"
-        alt={routeButtonProperty.routes.alt}
-      />
-      <br />
-      <div style={{ color: 'white', paddingLeft: '7px' }}>Routes</div>
-    </div>
-  );
-
   return (
     <div className="mainContainer">
       {detailsSelected || null}

app/containers/DashboardContainer.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react';
-import Header from '../AComp/Header.jsx';
+import Header from '../AComp/SidebarHeader.jsx';
 import Extras from '../AComp/Extras.jsx';
 import SetupContext from '../context/SetupContext';
 import DashboardContext from '../context/DashboardContext';
@@ -9,23 +9,19 @@ import AddService from '../components/AddService.jsx';
 import DeleteService from '../components/DeleteService.jsx';
 import '../stylesheets/sidebar.css';
 
-const { ipcRenderer } = window.require('electron');
-
 const SidebarContainer = (props) => {
-  // const { setSelection, setDetails } = props;
+  const { setDetails } = props;
+
   // Used to toggle setup required if user wants to add a new database.
   const setup = useContext(SetupContext);
 
-  const { setSelection, setDetails } = props;
-
-  
   // List of the databases saved by users to track microservices.
   const serviceList = useContext(DashboardContext);
 
-  
-
- 
+  // Setting index of service selected
   const [index, setIndex] = useState();
+
+  // Checking to see if service clicked to display Microservices
   const [isclicked, setClicked] = useState('false');
 
   // Helper function to check if Clicked toggles
@@ -37,17 +33,21 @@ const SidebarContainer = (props) => {
   const ServicesClick = (e) => {
     clickToggle(e);
     setIndex(e.target.id);
-
+    setDetails(null);
     // setSelection(<Monitoring detailsSelected={detailsSelected} />);
   };
   // Click function for AddService
   const AddClick = () => {
     setup.setupRequired = setup.toggleSetup(false);
-    setSelection(<AddService />);
+    setDetails(<AddService />);
   };
+
+  // Click fn for Delete Service
   const DeleteClick = () => {
-    setSelection(<DeleteService />);
+    setDetails(<DeleteService />);
   };
+
+  // Click fn for Refresh
   const RefreshClick = () => {
     location.reload();
   };
@@ -62,11 +62,7 @@ const SidebarContainer = (props) => {
           isclicked={isclicked}
         />
         {isclicked === 'true' ? (
-          <Microservices
-            setSelection={setSelection}
-            index={index}
-            setDetails={setDetails}
-          />
+          <Microservices index={index} setDetails={setDetails} />
         ) : null}
         <Extras
           AddClick={AddClick}