Merge pull request #6 from oslabs-beta/graphContainer/refactor

Graph container/refactor

Author: sarhiri

app/components/GraphNavBar/index.tsx

@@ -0,0 +1,119 @@
+import React , { useState,useContext } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { ApplicationContext } from '../../context/ApplicationContext'
+import { QueryContext } from '../../context/QueryContext'
+import { CommsContext } from '../../context/CommsContext'
+import { HealthContext } from '../../context/HealthContext'
+import { Link } from 'react-router-dom';
+
+const GraphNavBar = (props) => {
+
+  const { chart,setChart,dockerData,inspect,setInspect } = props
+  const [ prevRoute, setPrevRoute ] = useState<string>('');
+  const  { servicesData } = useContext(ApplicationContext);
+  const { selectedMetrics } = useContext(QueryContext);
+  const { commsData } = useContext(CommsContext)
+  const { services } = useContext(HealthContext)
+
+  const navigate = useNavigate();
+
+  const routing = (route: string) => {
+    if (location.href.includes('communications')) {
+      if (prevRoute === '') navigate(`${servicesData[0].microservice}`);
+      else navigate(prevRoute);
+    }
+    setChart(route);
+  };
+
+  const getHealthAndEventComponents = () => {
+    const buttonList: JSX.Element[] = [];
+    if (selectedMetrics) {
+      selectedMetrics.forEach((element, id) => {
+        const categoryName = Object.keys(element)[0];
+        let prefix;
+        if (categoryName === 'Event') {
+          prefix = 'event_';
+        } else if (categoryName === 'books' || categoryName === 'customers' || categoryName === 'frontend' || categoryName === 'orders'){
+          prefix = 'docker_';
+        } else {
+          prefix = 'health_';
+        }
+        buttonList.push(
+          <button
+            id={`${prefix}${categoryName}-button`}
+            className={chart === `${prefix}${categoryName}` ? 'selected' : undefined}
+            onClick={() => routing(`${prefix}${categoryName}`)}
+            key={`1-${id}`}
+          >
+            {categoryName}
+          </button>
+        );
+      });
+    }
+
+    return buttonList;
+  };
+
+  const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
+
+  return (
+    <nav id="navigationBar">
+      <button
+        className={chart === 'all' ? 'selected' : undefined}
+        id="all-button"
+        onClick={() => routing('all')}
+        key="0"
+      >
+        Metrics Query
+      </button>
+      {HealthAndEventButtons}
+      {dockerData.containername && (
+        <button
+          id="docker-button"
+          className={chart === 'docker' ? 'selected' : undefined}
+          onClick={() => routing('docker')}
+          key="2"
+        >
+          Docker
+        </button>
+      )}
+      {commsData.length > 0 && (
+        <button
+          id="communication-button"
+          className={chart === 'communications' ? 'selected' : undefined}
+          onClick={() => {
+            if (!location.href.includes('communications')) setPrevRoute(services.join(' '));
+            setChart('communications');
+          }}
+          key="3"
+        >
+          Communication
+        </button>
+      )}
+      <button
+        id="modify-metrics-button"
+        className={chart === 'modifyMetrics' ? 'selected' : undefined}
+        onClick={() => {
+          routing('modifyMetrics');
+        }}
+        key="4"
+      >
+        Modify Metrics
+      </button>
+      {/* <Link className="sidebar-link" to="/Inspect" id="Inspect" >
+        <SettingsIcon
+            style={{
+              WebkitBoxSizing: 'content-box',
+              boxShadow: 'none',
+              width: '35px',
+              height: '35px',
+            }}
+          />
+        &emsp;Inspect
+      </Link> */}
+      <button onClick={() => { setInspect(!inspect) }}>Inspect</button>
+    </nav>
+  )
+}
+
+export default GraphNavBar

app/containers/DockerHealthContainer.tsx

@@ -4,10 +4,10 @@ import { QueryContext } from '../context/QueryContext';
 import GrafanaEventChart from '../charts/GrafanaEventChart';
 import { Button } from '@material-ui/core';
 import { useParams } from 'react-router-dom';
+import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
 
 interface HealthContainerProps {
   sizing: string;
-  colourGenerator: Function;
   category: string;
 }
 
@@ -32,7 +32,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
   const { selectedMetrics } = useContext(QueryContext);
   const { service } = useParams<keyof Params>() as Params;
   const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
-  const { sizing, colourGenerator, category } = props;
+  const { sizing, category } = props;
   const [currIndex, setCurrIndex] = useState(0);
   const [currChunk, setCurrChunk] = useState<JSX.Element[]>([]);
   const chunkSize = 7;

app/containers/EventContainer.tsx

@@ -6,10 +6,10 @@ import { QueryContext } from '../context/QueryContext';
 import EventChart from '../charts/EventChart';
 import { Button } from '@material-ui/core';
 import GrafanaEventChart from '../charts/GrafanaEventChart';
+import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
 
 interface EventContainerProps {
   sizing: string;
-  colourGenerator: Function;
 }
 
 interface Params {
@@ -32,7 +32,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
   const { eventData } = useContext(EventContext);
   const { selectedMetrics } = useContext(QueryContext);
   const { service } = useParams<keyof Params>() as Params;
-  const { sizing, colourGenerator } = props;
+  const { sizing } = props;
   // eventChartsArr contains all charts of all metrics
   const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
   const [currIndex, setCurrIndex] = useState(0);