Merge pull request #14 from oslabs-beta/bug-fix

Bug fix: when graphs container loaded it did not have correct app tit…

Author: sarhiri

app/containers/GraphsContainer/GraphsContainer.tsx

@@ -33,7 +33,6 @@ interface Params {
 const GraphsContainer: React.FC = React.memo(() => {
 
   const { app, service } = useParams<keyof Params>() as Params;
-  // console.log({app,service})
   const [ live, setLive ] = useState<boolean>(false);
   const { intervalID, setIntervalID } = useContext(ApplicationContext);
   const { getSavedMetrics } = useContext(ApplicationContext);
@@ -48,7 +47,6 @@ const GraphsContainer: React.FC = React.memo(() => {
   let [inspect, setInspect] = useState<boolean>(false);
 
   useEffect(() => {
-    // console.log({service})
     const serviceArray = service.split(' ');
     // You would think you should add "kubernetesmetrics" into the below for consistency's sake but it makes it  not work correctly, so it has been omitted
     const healthServiceArray = serviceArray.filter(
@@ -71,16 +69,15 @@ const GraphsContainer: React.FC = React.memo(() => {
       );
     } else {
       if (intervalID) clearInterval(intervalID);
-      //this function fetches all the server data from our database
       fetchCommsData(app, live);
       fetchHealthData(healthServiceArray);
-      // if (service.includes('kafkametrics')) {
-      //   fetchEventData('kafkametrics');
-      // }
-      // // JJ-ADDITION
-      // if (service.includes('kubernetesmetrics')) {
-      //   fetchEventData('kubernetesmetrics');
-      // }
+      if (service.includes('kafkametrics')) {
+        fetchEventData('kafkametrics');
+      }
+      // JJ-ADDITION
+      if (service.includes('kubernetesmetrics')) {
+        fetchEventData('kubernetesmetrics');
+      }
       getSavedMetrics();
     }
 

app/modals/ServicesModal/ServicesLink.tsx

@@ -20,24 +20,24 @@ const ServicesLink = (props) => {
   return (
 
     <div className="services-links">
-            {props.servicesData.map((service: IService, index: number) => (
-              <div
-                key={`${index}servicesData`}
-                className={props.services.includes(service.microservice) ? 'link selected' : 'link'}
-                onClick={() => toggleService(service.microservice)}
-              >
-                {service.microservice}
-              </div>
-            ))}
-            <Link id='selectLink'
-              className="router link"
-              to={props.services.length > 0 ? `/applications/${props.app}/${props.services.join(' ')}` : '#'}
-            >
-              {props.services.length === 0 && 'Select Services'}
-              {props.services.length === 1 && 'Display Service'}
-              {props.services.length > 1 && 'Compare Services'}
-            </Link>
-          </div>
+      {props.servicesData.map((service: IService, index: number) => (
+        <div
+          key={`${index}servicesData`}
+          className={props.services.includes(service.microservice) ? 'link selected' : 'link'}
+          onClick={() => toggleService(service.microservice)}
+        >
+          {service.microservice}
+        </div>
+      ))}
+      <Link id='selectLink'
+        className="router link"
+        to={props.services.length > 0 ? `/applications/${props.app}/${props.services.join(' ')}` : '#'}
+      >
+        {props.services.length === 0 && 'Select Services'}
+        {props.services.length === 1 && 'Display Service'}
+        {props.services.length > 1 && 'Compare Services'}
+      </Link>
+    </div>
   )
 }
 

app/modals/ServicesModal/ServicesModal.tsx

@@ -53,26 +53,12 @@ const ServicesModal: React.FC<ServicesModalProps> = React.memo(({ i, app }) => {
             <h2>{app}</h2>
             <p>Select a server to monitor</p>
           </div>
-          <ServicesLink servicesData={servicesData} services={services} setServices={setServices}/>
-          {/* <div className="services-links">
-            {servicesData.map((service: IService, index: number) => (
-              <div
-                key={`${index}servicesData`}
-                className={services.includes(service.microservice) ? 'link selected' : 'link'}
-                onClick={() => toggleService(service.microservice)}
-              >
-                {service.microservice}
-              </div>
-            ))}
-            <Link id='selectLink'
-              className="router link"
-              to={services.length > 0 ? `/applications/${app}/${services.join(' ')}` : '#'}
-            >
-              {services.length === 0 && 'Select Services'}
-              {services.length === 1 && 'Display Service'}
-              {services.length > 1 && 'Compare Services'}
-            </Link>
-          </div> */}
+          <ServicesLink 
+            app={app} 
+            servicesData={servicesData} 
+            services={services} 
+            setServices={setServices}
+          />
         </>
       )}
     </div>