inlined communication modals

Author: Dialloousman

.DS_Store

@@ -79,7 +79,6 @@ const MicroServiceTraffic = (props) => {
   // return div with Bar component and Trace Points data
   return (
       <div>
-          <h1>THIS IS FROM MS TRAFFIC</h1>
         <Bar 
         data={myChart}
         width={100}

app/assets/chartModal.png

@@ -17,12 +17,12 @@ const Modal = (props) => {
   //  Dictionary used to render proper data chart within Modal component upon rendering
   const dict = {
     request: <RequestTypesChart service={service} />,
-    routes: <RouteTrace service={service} />,
+    Routes: <RouteTrace service={service} />,
     response: <ResponseCodesChart service={service} />,
     speed: <SpeedChart service={service} />,
     processes: <ProcessesChart service={service} />,
     latency: <LatencyChart service={service} />,
-    traffic: <MicroServiceTraffic service={service} />,
+    Traffic: <MicroServiceTraffic service={service} />,
     temperature: <TemperatureChart service={service} />,
     memory: <MemoryChart service={service} />,
   };

app/charts/microservice-traffic.jsx

@@ -23,12 +23,10 @@ const ServiceDetails = (props) => {
   const { currentMicroservice } = props;
 
   // Dictionary used by the healthInfoButtons loop below
-  //    { id: 'request', alt: 'Request Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
 
   const buttonProperties = [
     { id: 'request', alt: 'Request Data', src: pieChart },
     { id: 'response', alt: 'Response Data', src: pieChart },
-   // { 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: speedChart},
     { id: 'processes', alt: 'Processes Data', src: processingChart },
     { id: 'latency', alt: 'Latency Data', src: latencyChart },

app/components/Modal.jsx

@@ -4,6 +4,7 @@ import HealthInformationContext from '../context/DetailsContext';
 import ServiceDetails from './ServiceDetails.jsx';
 import Modal from './Modal.jsx';
 import routeChart from '../assets/routeChart.png'
+import chartModal from '../assets/chartModal.png'
 
 const { ipcRenderer } = window.require('electron');
 
@@ -41,12 +42,13 @@ const ServiceOverview = (props) => {
   // is grabbed from the onClick event via event.path[0].alt
   const [chartTitle, setChartTitle] = useState();
 
-  const routeButtonProperty = { traffic: {id: 'traffic', alt: 'Microservice Traffic', src: routeChart}, routes: {id: 'routes', alt: 'Route Trace', src: routeChart} };
+  //route button AND traffic button property
+  const routeButtonProperty = { traffic: {id: 'Traffic', alt: 'Microservice Traffic', src: chartModal}, routes: {id: 'Routes', alt: 'Route Trace', src: routeChart} };
 
   const routes = [];
   const traffic = [];
   traffic.push (
-      <div>
+    
       <div className="healthChartContainer">
         <input
           onClick={() => {
@@ -62,13 +64,13 @@ const ServiceOverview = (props) => {
         />
         <br/>
         <div style={{color:'white', paddingLeft:'7px'}}>
-        {routeButtonProperty.id}
+        {routeButtonProperty.traffic.id}
         </div>
       </div>
-      </div>
+    
   );
   routes.push(
-    <div>
+
       <div className="healthChartContainer">
         <input
           onClick={() => {
@@ -84,10 +86,10 @@ const ServiceOverview = (props) => {
         />
         <br/>
         <div style={{color:'white', paddingLeft:'7px'}}>
-        {routeButtonProperty.id}
+        {routeButtonProperty.routes.id}
         </div>
       </div>
-      </div>,
+
     );
 
   // Filters data received from IPC to the communications database to create a list of the services tracked in the provided database,
@@ -171,7 +173,8 @@ const ServiceOverview = (props) => {
       <div />
       <div className="servicesList">{serviceList()}</div>
       {/* adding the route tracer button */}
-      <h3>Trace Last Route</h3>
+      <br/>
+      <h3>Microservices Communications</h3>
       {modalDisplay ? (
         <Modal
           chartTitle={chartTitle}
@@ -183,8 +186,10 @@ const ServiceOverview = (props) => {
           }}
         />
       ) : null}
-      {routes}
-      {traffic}
+      <div id="routeAndTrafficDisplay">
+        {routes}
+        {traffic}
+        </div>
     </div>
   );
 };

app/components/ServiceDetails.jsx

@@ -258,6 +258,11 @@ select {
   opacity: 0.7;
   }
 
+  #routeAndTrafficDisplay {
+    display: inline-flex;
+  }
+
+
 #microserviceHealthInfo {
   text-align: center;
   margin-top: 25px;
@@ -310,6 +315,7 @@ select {
   margin-right: 10px;
 }
 
+
 .RouteCircle {
   font-family: Arial, Helvetica, sans-serif;
   color: white;