Toggle Services

Author: alon25

app/AComp/Microservices.jsx

@@ -1,10 +1,10 @@
-import React, {useContext} from 'react';
+import React, { useContext } from 'react';
 import HealthInformationContext from '../context/DetailsContext';
 
 const { ipcRenderer } = window.require('electron');
 
 const Microservices = (props) => {
-  const { overview, details, index } = props;
+  const { overviewState, setDetails, index } = props;
   // Holds the buttons generated for unique services.
   const componentButtons = [];
 
@@ -13,8 +13,8 @@ const Microservices = (props) => {
   // Contexts have data added to them following successful IPC return. Data is later used to create charts.
   const healthdata = useContext(HealthInformationContext);
 
-  for (let i = 0; i < overview.length; i += 1) {
-    const element = overview[i];
+  for (let i = 0; i < overviewState.length; i += 1) {
+    const element = overviewState[i];
     // If SQL
     if (element.currentmicroservice) {
       if (!(element.currentmicroservice in serviceCache)) {
@@ -33,13 +33,12 @@ const Microservices = (props) => {
                 // Adds returned data to context
                 healthdata.detailData = Object.values(JSON.parse(data));
                 // Updates state. Triggers rerender.
-                details(
+                setDetails(
                   <ServiceDetails
                     service={element.currentmicroservice}
-                    details={details}
+                    setDetails={setDetails}
                   />
                 );
-                console.log('details selected is: ', detailsSelected);
               });
             }}
           >
@@ -66,10 +65,10 @@ const Microservices = (props) => {
                   // Adds returned data to context.
                   healthdata.detailData = Object.values(JSON.parse(data));
                   // Updates state. Triggers rerender.
-                  details(
+                  setDetails(
                     <ServiceDetails
                       service={element.currentMicroservice}
-                      setDetails={details}
+                      setDetails={setDetails}
                     />
                   );
                 });
@@ -88,12 +87,7 @@ const Microservices = (props) => {
   if (componentButtons.length === 0) {
     return <p>No data present</p>;
   }
-  console.log(componentButtons);
-  return (
-    <div>
-    {componentButtons}
-    </div>
-    );
+  return componentButtons;
 };
 
 export default Microservices;

app/AComp/ServicesList.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const ServicesList = (props) => {
-  const { context, Click } = props;
+  const { context, Click, isClicked } = props;
   const buttonStore = [];
   for (let i = 0; i < context.length; i += 1) {
     buttonStore.push(
@@ -11,6 +11,7 @@ const ServicesList = (props) => {
         type="button"
         key={`${i}${context[i]}`}
         onClick={Click}
+        isClicked={isClicked}
       >
         {context[i]}
       </button>

app/containers/DashboardContainer.jsx

@@ -16,9 +16,9 @@ const DashboardContainer = () => {
 
   return (
     <div className="servicesDashboardContainer">
-      <SidebarContainer selection={setSelection} details={setDetails}/>
+      <SidebarContainer setSelection={setSelection} setDetails={setDetails}/>
       <div className="databsaseList">
-        <Monitoring service={serviceSelected} detail={detailsSelected}/>
+        <Monitoring serviceSelected={serviceSelected} detailsSelected={detailsSelected}/>
       </div>
     </div>
   );

app/containers/MonitoringContainer.jsx

@@ -7,8 +7,8 @@ import routeChart from '../assets/routeChart.png';
 import ServiceDetails from '../components/ServiceDetails.jsx';
 
 const MonitoringContainer = (props) => {
-  const { service } = props;
-  const { detail } = props;
+  const { serviceSelected } = 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);
@@ -98,7 +98,7 @@ const MonitoringContainer = (props) => {
         {routes}
         {traffic}
       </div>
-      {detail || null}
+      {detailsSelected || null}
     </div>
   );
 };

app/containers/SideBarContainer.jsx

@@ -10,7 +10,7 @@ import ServicesList from '../AComp/ServicesList.jsx';
 const { ipcRenderer } = window.require('electron');
 
 const SidebarContainer = (props) => {
-  const { selection, details } = props;
+  const { setSelection, setDetails } = props;
   // Used to toggle setup required if user wants to add a new database.
   const setup = useContext(SetupContext);
 
@@ -22,12 +22,19 @@ const SidebarContainer = (props) => {
 
   // Contexts have data added to them following successful IPC return. Data is later used to create charts.
   const serviceComponents = useContext(OverviewContext);
+  const [index, setIndex] = useState();
+  const [isClicked, setClicked] = useState(false);
 
+  // Helper function to check if Clicked toggles
+  const clickToggle = () => {
+    if (isClicked) setClicked(false);
+    else setClicked(true);
+  };
   // Click function for Services
   const ServicesClick = (e) => {
-    const event = e.target.id;
-    console.log(event);
-    console.log(e.target);
+    clickToggle(e);
+    setIndex(e.target.id);
+    // const event = e.target.id;
     ipcRenderer.send('overviewRequest', e.target.id);
     // IPC listener responsible for retrieving infomation from asynchronous main process message.
     ipcRenderer.on('overviewResponse', (event, data) => {
@@ -40,10 +47,10 @@ const SidebarContainer = (props) => {
   // Click function for AddService
   const AddClick = () => {
     setup.setupRequired = setup.toggleSetup(false);
-    selection(<AddService />);
+    setSelection(<AddService />);
   };
   const DeleteClick = () => {
-    selection(<DeleteService />);
+    setSelection(<DeleteService />);
   };
   const RefreshClick = () => {
     location.reload();
@@ -53,10 +60,18 @@ const SidebarContainer = (props) => {
     <div className="left">
       <div className="leftTopContainer">
         <Header />
-        <ServicesList context={serviceList} Click={ServicesClick} />
-        <Microservices overview={overviewState}
-        details={details}
-        index={0} />
+        <ServicesList
+          context={serviceList}
+          Click={ServicesClick}
+          isClicked={isClicked}
+        />
+        {isClicked ? (
+          <Microservices
+            overviewState={overviewState}
+            setDetails={setDetails}
+            index={index}
+          />
+        ) : null}
         <Extras
           AddClick={AddClick}
           DeleteClick={DeleteClick}

user/settings.json

@@ -1 +1 @@
-{"setupRequired":false,"services":[["test","MongoDB","mongodb+srv://alon:testing123@cluster0-phsei.mongodb.net/test?retryWrites=true&w=majority"]],"splash":true}
+{"setupRequired":false,"services":[["test","MongoDB","mongodb+srv://alon:testing123@cluster0-phsei.mongodb.net/test?retryWrites=true&w=majority"]],"splash":false}