added X button and MS name to Modal, slight style fixes

Author: robicano22

app/components/Modal.jsx

@@ -8,10 +8,11 @@ import LatencyChart from '../charts/latency-chart.jsx';
 import MemoryChart from '../charts/memory-chart.jsx';
 
 const Modal = (props) => {
-  const { modalChart } = props;
-  const { service } = props;
-  const { toggleModalDisplay } = props;
-  const { chartTitle } = props;
+  // Destructuring props to make linter happy
+  const {
+    modalChart, service, toggleModalDisplay, chartTitle,
+  } = props;
+  //  Dictionary used to render proper data chart within Modal component upon rendering
   const dict = {
     request: <RequestTypesChart service={service} />,
     response: <ResponseCodesChart service={service} />,
@@ -22,10 +23,13 @@ const Modal = (props) => {
     memory: <MemoryChart service={service} />,
   };
 
+  // event.stopPropogation allows the user to interact with the chart as opposed to a click on the
+  // chart bubbling out and closing the Modal.
   return (
     <div id="modalWindow" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>
       <div id="modalContent" onClick={(event) => event.stopPropagation()}>
-        <h3 id="chartTitle">{chartTitle}</h3>
+        <h3 id="chartTitle">{`${service} - ${chartTitle}`}</h3>
+        <button id="modalCloseButton" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>&times;</button>
         {dict[modalChart]}
       </div>
     </div>

app/components/ServiceDetails.jsx

@@ -13,6 +13,7 @@ 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 = [
@@ -38,6 +39,7 @@ const ServiceDetails = (props) => {
             setModalChart(event.path[0].id);
             toggleModalDisplay(!modalDisplay);
           }}
+          service={service}
           type="image"
           id={buttonProperties[i].id}
           src={buttonProperties[i].src}

app/components/ServiceOverview.jsx

@@ -44,7 +44,8 @@ const ServiceOverview = (props) => {
         if (!(element.currentmicroservice in serviceCache)) {
           const button = (
             <button
-            className='servicesBtn'
+              className="servicesBtn"
+              currentMicroservice={element.currentmicroservice}
               type="button"
               key={`serviceItem${props.index}${i}`}
               onClick={() => {
@@ -72,7 +73,7 @@ const ServiceOverview = (props) => {
           if (!(element.currentMicroservice in serviceCache)) {
             const button = (
               <button
-                className='servicesBtn'
+                className="servicesBtn"
                 type="button"
                 key={`serviceItem${props.index}${i}`}
                 onClick={() => {
@@ -104,7 +105,7 @@ const ServiceOverview = (props) => {
   return (
     <div className="mainContainer">
       <div>
-        <h1 className='overviewTitle'>Microservices Overview</h1>
+        <h1 className="overviewTitle">Microservices Overview</h1>
       </div>
       <div />
       <div className="servicesList">{serviceList()}</div>

app/index.css

@@ -210,7 +210,7 @@ select {
   /* width: 35px; */
   background-color: #edd9a3;
   transition: 0.2s;
-  margin-left: 10px;
+  margin-left: 0px;
 
 }
 
@@ -292,4 +292,17 @@ form {
 #chartTitle {
   text-align: center;
   margin-bottom: 50px;
+  margin-left: 0px;
+}
+
+#modalCloseButton {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  background-color: Transparent;
+  border: none;
+  color: white;
+  font-size: 28px;
+  padding: 0px;
+  margin-right: 10px;
 }