fixed comments

Author: Eisha Kaushal

app/charts/DockerChart.tsx

@@ -18,7 +18,7 @@ type TimeFrame = '5m' | '15m' | '30m' | '1h' | '2h' | '1d' | '2d';
 
 /** 
  * @params {EventChartProps} props - the props object containing relevant data.
- * @desc Handles k8s metrics. Memoized component to generate event chart with formatted data 
+ * @desc Handles k8s and container metrics. Memoized component to generate event chart with formatted data 
  * @returns {JSX.Element} The JSX element with the event chart.
  */
 const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {

app/charts/GrafanaEventChart.tsx

@@ -1,9 +1,3 @@
-/** From Version 5.2 Team:
- * This file does not seem to be showing any data.
- * Hope a future team figures it out.
- * Best of luck!
- */
-
 import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext } from 'react';
 import Graph from 'react-graph-vis';
@@ -154,12 +148,6 @@ const RouteChart = React.memo(() => {
     },
   };
 
-  // const events = {
-  //   select(event) {
-  //     const { nodes, edges } = event;
-  //   },
-  // };
-
   if (communicationsData.length > 0 && communicationsData[0].endpoint !== '/') {
     return (
       <div className="traceContainer">
@@ -168,7 +156,6 @@ const RouteChart = React.memo(() => {
           className={classes.paper}
           graph={graph}
           options={options}
-          // events={events}
           style={{
             fontFamily: 'Roboto',
             boxShadow: '3px 3px 6px 1px rgb(175, 175, 175)',

app/charts/RouteChart.jsx

@@ -14,7 +14,7 @@ const About: React.FC = React.memo(() => {
    * Feel free to change the header for the list of names.
    * 
    */
-  const nameArray: JSX.Element[] = ['Brisa', 'Kelsi', 'Lucie', 'Jeffrey', 'Justin'].map(name => {
+  const nameArray: JSX.Element[] = ['Haoyu', 'Eisha', 'Edwin', 'Tyler'].map(name => {
     return (
       <span style={currentMode} className="text">
         <p>{`${name}`}</p>
@@ -49,7 +49,8 @@ const About: React.FC = React.memo(() => {
         <p style={currentMode} className="text">
           Snow, Taylor, Tim, Roberto, Nachiket, Tiffany, Bruno, Danny, Vince, Matt, Derek, Kit,
           Grace, Jen, Patty, Stella, Michael, Ronelle, Todd, Greg, Brianna, Brian, Alon, Alan,
-          Ousman, Ben, Chris, Jenae, Tim, Kirk, Jess, William, Alexander, Elisa, Josh, Troy, Gahl
+          Ousman, Ben, Chris, Jenae, Tim, Kirk, Jess, William, Alexander, Elisa, Josh, Troy, Gahl, 
+          Brisa, Kelsi, Lucie, Jeffrey, Justin
         </p>
         <br />
       </div>

app/components/About.tsx

@@ -1,7 +1,6 @@
  /** From Version 5.2 Team:
  * We only fixed linting issues regarding Notifications.
  * Otherwise, Notifications still does not function properly.
- * Good luck!
  */
 
 /* eslint-disable jsx-a11y/label-has-associated-control */

app/components/Occupied.tsx

@@ -9,7 +9,6 @@ interface HealthContainerProps {
   sizing: string;
   colourGenerator: Function;
   category: string;
-  //currentService: string;
 }
 
 interface Params {
@@ -38,10 +37,6 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
   const [currChunk, setCurrChunk] = useState<JSX.Element[]>([]);
   const chunkSize = 7;
   let [isGrafana, setIsGrafana] = useState(false);
-  /**
-   * This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer.
-   * Once that has finished, it then filters the healthData down to the current category and the filteredMetrics.
-  */
 
   function nextChunk() {
     const nextChunk = healthChartsArr.slice(currIndex, currIndex + chunkSize);
@@ -55,7 +50,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
   }
 
   const filterSelectedMetricsAndHealthData = (): DockerDataObject => {
-    // define a filtered health data object for output
+    // define a filtered docker data object for output
     // define an array of filteredMetricNames for later use
     const filteredHealthData = {};
     const filteredMetricNames: string[] = [];
@@ -79,7 +74,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
       filteredHealthData[service] = {};
       const categoryObjects = healthData[service];
       for (const categoryName in categoryObjects) {
-        // if the category in healthData matches the category passed down to this HealthContainer, iterate over the related metrics
+        // if the category in healthData matches the category passed down to this DockerHealthContainer, iterate over the related metrics
         if (categoryName === category) {
           const metricObjects = categoryObjects[categoryName];
           for (const metric in metricObjects) {
@@ -107,9 +102,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
 
   // function to generate charts using the type-sorted data
   const generateHealthCharts = (sortedData: DockerDataObject): void => {
-    //onst chartsArray: JSX.Element[] = [];
     const grafanaChartsArray: JSX.Element[] = [];
-    //let parsedName: string = '';
     const keymaker = () => {
       return Math.floor(Math.random() * 1000);
     };
@@ -120,17 +113,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
         // pass down the value of the current data type and service
         const chartData = metricObjects[metricName];
         const token = chartData.token;
-        // chartsArray.push(
-        //   <HealthChart
-        //     key={'H' + keymaker()}
-        //     dataType={dataType}
-        //     serviceName={serviceName}
-        //     chartData={chartData}
-        //     categoryName={category}
-        //     sizing={sizing}
-        //     colourGenerator={colourGenerator}
-        //   />
-        // );
+       
         console.log("plotting grafana")
         grafanaChartsArray.push(
           <GrafanaEventChart metricName={metricName} token={token} />);
@@ -146,16 +129,12 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
   useEffect(() => {
     // returns an object containing only the healthData for the current category and the metrics the User selected
     const filteredHealthData = filterSelectedMetricsAndHealthData();
-    // returns an object containing the filtered data sorted by data type
-    //const typeSortedHealthData = healthDataGroupedByDataType(filteredHealthData);
     // invoking generateCharts with the sorted data will update healthChartsArr in state with the list of charts to be rendered
     generateHealthCharts(filteredHealthData);
   }, [category]);
 
-  // JJ-ADDITION
   return (
     <div>
-      {/* <div id="grafana" onClick={() => { setIsGrafana(!isGrafana) }}>Grafana</div> */}
       {service.includes('kafkametrics') || service.includes('kubernetesmetrics') || service.includes('books') || service.includes('customers') || service.includes('frontend') || service.includes('orders')? currChunk : []}
       {healthChartsArr.length > chunkSize && (
         <>

app/containers/DockerHealthContainer.tsx

@@ -52,18 +52,8 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
     setCurrIndex(currIndex - chunkSize);
   }
 
-  /*
-  Chronos11 -- Unfortunately, eventData is not in a good place for UI/UX purposes. These charts are being rendered 1:1 with the list of metrics (over 500).
-  These metrics are scraped and generated by Prometheus, and should be sent to a Grafana instance to be displayed with
-  a Grafana dashboard, but we didn't realize this was happening until we were too close to launch to fix it.
-  It would be wonderful if a future iteration could manipulate the prometheus configuration in the kubernetes example to send its data
-  to an instance of Grafana, and integrate Grafana's dashboard into Chronos to visualize the data.
-  */
-
   const filterSelectedEventMetricsandData = (eventDataObj: EventDataObject): EventDataObject => {
     const filteredEventData = {};
-    // there's only one element in the selected metrics array for now...
-    // selectedMetrics is... [{Event: ['metric', 'names', 'as', 'strings']}]
     // use this array of selected metrics to filter the eventData down to only the metrics we want to see
     const selectedArr = selectedMetrics[0].Event;
     console.log('selectedArr IS: ', selectedArr)
@@ -108,7 +98,6 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
       const metricObject = filteredEventDataObj[service];
       for (const metricName in metricObject) {
         console.log('metricName IS: ', metricName)
-        //parsedName = metricName.replace(/.*\/.*\//g, '')
         const chartData = metricObject[metricName];
         console.log('chartData IS: ', chartData)
         const token = chartData.token;

app/containers/EventContainer.tsx

@@ -251,13 +251,13 @@ const GraphsContainer: React.FC = React.memo(props => {
               </>
 
             )}
+           {/* docker charts */}
             {chart.startsWith('docker_') && (
               <>
                 <DockerHealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)} />
               </>
 
             )}
-            {chart === 'docker' && <DockerChart />}
             {chart === 'modifyMetrics' && <ModifyMetrics />}
           </div>
         )}

app/containers/GraphsContainer.tsx

@@ -169,7 +169,6 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
     generateHealthCharts(typeSortedHealthData);
   }, [category]);
 
-  // JJ-ADDITION
   return (
     <div>
       {service !== 'kafkametrics' && service !== 'kubernetesmetrics' ? healthChartsArr : []}

app/containers/HealthContainer.tsx

@@ -1,6 +1,5 @@
 /** From Version 5.2 Team:
  * We only cleaned up linting errors in this file.
- * Good luck!
  */
 
 import React, { useState, useCallback } from 'react';