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

Chris/health button restructure

Author: tim-atapagra

app/components/ServiceDetails.jsx

@@ -81,6 +81,7 @@ const ServiceDetails = (props) => {
         type="button"
         onClick={() => {
           // document.location.reload()
+          console.log('should clear data');
           setDetails(null);
         }}
       >

app/components/ServiceOverview.jsx

@@ -158,7 +158,7 @@ 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} />);
                   });
                 }}
               >

app/components/ServicesDashboard.jsx

@@ -36,6 +36,8 @@ const ServicesDashboard = (props) => {
     return buttonStore;
   };
 
+  const tooltipWriteup = 'Please provide a different database to monitor additional microservice applications.';
+
   return (
     <div className="servicesDashboardContainer">
       <div className="left">
@@ -44,6 +46,10 @@ const ServicesDashboard = (props) => {
           <div className="left-top">
             <h2 className="dashboardHeader">
               Your Databases
+              <sup className="tooltip">
+                &#9432;
+                <div className="tooltiptext">{tooltipWriteup}</div>
+              </sup>
             </h2>
             {renderServiceList(serviceList)}
           </div>

app/index.css

@@ -88,7 +88,7 @@ margin-top: -100px;
 
   /* Position the tooltip */
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   left: 105%;
   top: -5px;
 }
@@ -232,6 +232,10 @@ form {
   transition: 0.25s;
 }
 
+#databsaseList {
+  z-index: -1;
+}
+
 .microserviceBtn {
   width: 80%;
   height: 50px;