Merge branch 'dev' into stephenfeature

Author: stephenhyang

app/charts/AwsChart.tsx

@@ -3,21 +3,20 @@ import React, { useState } from 'react';
 import Plot from 'react-plotly.js';
 import { all, solo as soloStyle } from './sizeSwitch';
 
-// interface AwsCpuChartProps {
-//   key: string;
-//   renderService: string;
-//   metric: string;
-//   timeList: any;
-//   valueList: any;
-//   sizing: string;
-//   colourGenerator: Function;
-// }
-
 interface SoloStyles {
   height: number;
   width: number;
 }
 
+interface IPlotlyData {
+  name: any;
+  x: any;
+  y: any;
+  type: any;
+  mode: any;
+  marker: { color: string };
+}
+
 /** 
  * @params props - the props object containing relevant data.
  * @desc Handles AWS Charts. Memoized component to generate an AWS chart with formatted data.
@@ -26,34 +25,31 @@ interface SoloStyles {
 const AwsChart: React.FC<any> = React.memo(props => {
   const { renderService, metric, timeList, valueList, colourGenerator, sizing } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
+
   setInterval(() => {
     if (solo !== soloStyle) {
       setSolo(soloStyle);
     }
   }, 20);
 
-  const createChart = () => {
-    const timeArr = timeList?.map((el: any) => moment(el).format('kk:mm:ss'));
-    // const hashedColour = colourGenerator(renderService);
-    let plotlyData: {
-      name: any;
-      x: any;
-      y: any;
-      type: any;
-      mode: any;
-      marker: { color: string };
-    };
-    plotlyData = {
-      name: metric,
-      x: timeArr,
-      y: valueList,
-      type: 'scattergl',
-      mode: 'lines',
-      marker: { color: colourGenerator() },
-    };
-    const sizeSwitch = sizing === 'all' ? all : solo;
+  const timeArr = timeList?.map((el: any) => moment(el).format('kk:mm:ss'));
+
+  let plotlyData:IPlotlyData= {
+    name: metric,
+    x: timeArr,
+    y: valueList,
+    type: 'scattergl',
+    mode: 'lines',
+    marker: { color: colourGenerator() },
+  };
 
-    return (
+  const sizeSwitch = sizing === 'all' ? all : solo;
+
+  return (
+    <div 
+      className="chart" 
+      data-testid="Health Chart"
+    >
       <Plot
         data={[plotlyData]}
         config={{ displayModeBar: false }}
@@ -90,12 +86,6 @@ const AwsChart: React.FC<any> = React.memo(props => {
           },
         }}
       />
-    );
-  };
-
-  return (
-    <div className="chart" data-testid="Health Chart">
-      {createChart()}
     </div>
   );
 });

app/components/ApplicationsCard/EventHandlers.ts

@@ -12,22 +12,25 @@ interface EventHandlersProps {
 
 export const getEventHandlers = ({ application, setModal }: EventHandlersProps) => {
   const { deleteApp, user } = useContext(DashboardContext);
-  const { setAppIndex, setApp, setServicesData, app, example, connectToDB, setChart } =
-    useContext(ApplicationContext);
+  const { setAppIndex, setApp, setServicesData, app, example, connectToDB, setChart } = useContext(ApplicationContext);
   const navigate = useNavigate();
 
   const handleClick = (selectedApp: string, selectedService: string, i: number) => {
-    const services = ['auth', 'client', 'event-bus', 'items', 'inventory', 'orders'];
+    // const services = ['auth', 'client', 'event-bus', 'items', 'inventory', 'orders'];
+    const services = [ 'client', 'items','event-bus'];
+
     setAppIndex(i);
     setApp(selectedApp);
     if (['AWS', 'AWS/EC2', 'AWS/ECS', 'AWS/EKS'].includes(selectedService)) {
       navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
-    } else if (example) {
+    } 
+    else if (example) {
       setServicesData([]);
-      setChart('communications');
+      setChart('all');
       connectToDB(user, i, app, application[2], application[1]);
       navigate(`/applications/example/${services.join(' ')}`);
-    } else {
+    } 
+    else {
       setServicesData([]);
       setModal({ isOpen: true, type: 'serviceModal' });
     }

app/components/AwsEC2Graphs.tsx renamed to app/components/AwsEC2Graphs/AwsEC2Graphs.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect, useState } from 'react';
-import AwsChart from '../charts/AwsChart';
-import { AwsContext } from '../context/AwsContext';
-import { CircularProgress } from '@mui/material';
-// import zIndex from '@mui/styles/zIndex';
+import AwsChart from '../../charts/AwsChart';
+import { AwsContext } from '../../context/AwsContext';
+import { stringToColor } from '../../utils';
+import './styles.scss'
 
 const AwsEC2Graphs: React.FC = React.memo(props => {
   const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext);
@@ -14,24 +14,6 @@ const AwsEC2Graphs: React.FC = React.memo(props => {
     };
   }, []);
 
-  const stringToColor = (string: string, recurses = 0) => {
-    if (recurses > 20) return string;
-    function hashString(str: string) {
-      let hash = 0;
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      let colour = '#';
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 0xff;
-        colour += `00${value.toString(16)}`.substring(-2);
-      }
-
-      // console.log(colour);
-      return colour;
-    }
-  };
-
   return (
     <div className="charts">
       {Object.keys(awsData)?.map(metric => {

app/components/AwsEC2Graphs/styles.scss

@@ -0,0 +1,10 @@
+.charts {
+  display: grid;
+  grid-template-columns: auto auto;
+  padding: 10px;
+}
+
+.chart {
+  margin: 10px;
+  text-align: center;
+}

app/components/AwsECSClusterGraphs.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import AwsChart from '../charts/AwsChart';
+import { stringToColor } from '../utils';
 import { AwsContext } from '../context/AwsContext';
 
 const AwsECSClusterGraphs: React.FC = React.memo(props => {
@@ -12,24 +13,6 @@ const AwsECSClusterGraphs: React.FC = React.memo(props => {
     };
   }, []);
 
-  const stringToColor = (string: string, recurses = 0) => {
-    if (recurses > 20) return string;
-    function hashString(str: string) {
-      let hash = 0;
-      for (let i = 0; i < str.length; i++) {
-        hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      }
-      let colour = '#';
-      for (let i = 0; i < 3; i++) {
-        const value = (hash >> (i * 8)) & 0xff;
-        colour += `00${value.toString(16)}`.substring(-2);
-      }
-
-      // console.log(colour);
-      return colour;
-    }
-  };
-
   const activeServices = Object.keys(awsEcsData)
     .slice(1)
     .filter(el => awsEcsData[el].CPUUtilization?.value.length > 0);

app/components/TransferColumns.tsx

@@ -19,9 +19,7 @@ interface Params {
 
 const TransferColumns = React.memo(() => {
   const [targetKeys, setTargetKeys] = useState<any[]>([]);
-  // console.log({targetKeys})
   const [metricsPool, setMetricsPool] = useState<any[]>([]);
-  // console.log({metricsPool})
   const [healthMetricsReady, setHealthMetricsReady] = useState(false);
   const [healthMetrics, setHealthMetrics] = useState<any[]>([]);
   const [eventMetricsReady, setEventMetricsReady] = useState(false);
@@ -155,7 +153,6 @@ const TransferColumns = React.memo(() => {
         temp.push(newCategory);
       }
     }
-    // console.log('temp', temp)
     setSelectedMetrics(temp);
   };
 
@@ -182,7 +179,6 @@ const TransferColumns = React.memo(() => {
   const rows:any[] = []
   let id = 0
   for(let savedMetric of Object.keys(savedMetrics)) {
-   
     const { metric,category } = savedMetrics[savedMetric]
     rows.push({
       id:id++,
@@ -207,8 +203,6 @@ const TransferColumns = React.memo(() => {
     );
   });
 
-  //! BZ: creates metrics query page in Chronos
-
   return (
     <>
       <div id="getChartsContainer">
@@ -249,30 +243,25 @@ const TransferColumns = React.memo(() => {
         }}
         >
           <DataGrid
-            // style={currentStyle }
             rows={rows}
             columns={columns}
             style={currentStyle}
             slots={{ toolbar: GridToolbar }}
               slotProps={{
                 toolbar: {
                   showQuickFilter: true,
-                  
-                  
                 },
               }}
-            pageSizeOptions ={[10]}
+            pageSizeOptions={[10]}
             checkboxSelection
             disableRowSelectionOnClick
             onRowSelectionModelChange={metricIndeces => {
               const metrics: any[] = [];
               metricIndeces.forEach(el => {
-                console.log({rows})
                 metrics.push(`${rows[el].tag} | ${rows[el].title}`);
               });
               setTargetKeys(metrics);
             }}
-            
           />
           </Box>
 

app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx

@@ -5,15 +5,14 @@ import { Typography } from '@mui/material';
 import { AwsContext } from '../../context/AwsContext';
 import './styles.scss';
 import { useLocation } from 'react-router-dom';
-import EC2GraphsComponent from './EC2GraphsComponent';
-import ECSGraphsComponent from './ECSGraphsComponent';
-import EKSGraphsComponent from './EKSGraphsComponent';
+import AwsEC2Graphs from '../../components/AwsEC2Graphs/AwsEC2Graphs';
+import ClusterTable from '../../components/ClusterTable';
+import AwsECSClusterGraphs from '../../components/AwsECSClusterGraphs';
 
 const AwsGraphsContainer = () => {
   const { app, appIndex, setIntervalID, intervalID } = useContext(ApplicationContext);
   const { user } = useContext(DashboardContext);
-  const { awsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsEksData, fetchAwsAppInfo } =
-    useContext(AwsContext);
+  const { awsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsEksData, fetchAwsAppInfo } = useContext(AwsContext);
   const { state } = useLocation();
   const { typeOfService } = state;
   const [awsLive, setAwsLive] = React.useState(false);
@@ -59,18 +58,44 @@ const AwsGraphsContainer = () => {
 
   return (
     <div className="AWS-container">
+
       <div className="AWS-header">
-        <Typography variant="h3">{app}</Typography>
+        <Typography 
+          variant="h3"
+        >
+          {app}
+        </Typography>
         <p>Metrics for AWS Service</p>
-        <button onClick={() => setAwsLive(!awsLive)}>
+        <button 
+          onClick={() => setAwsLive(!awsLive)}
+        >
           {awsLive ? 'Stop Live Update' : 'Start Live Update'}
         </button>
       </div>
+
       {typeOfService === 'AWS/ECS' && (
-        <ECSGraphsComponent region={awsAppInfo.region} typeOfService={typeOfService} />
+        <div className="cluster-table">
+          <ClusterTable 
+            typeOfService={typeOfService} 
+            region={awsAppInfo.region} 
+          />
+          <AwsECSClusterGraphs />
+        </div>
       )}
-      {typeOfService === 'AWS/EC2' && <EC2GraphsComponent />}
-      {typeOfService === 'AWS/EKS' && <EKSGraphsComponent awsEksData={awsAppInfo.awsUrl} />}
+
+      {typeOfService === 'AWS/EC2' && 
+        <div className="cluster-table">
+          <AwsEC2Graphs />
+        </div>
+      }
+
+      {typeOfService === 'AWS/EKS' && 
+        <iframe 
+          src={`${awsAppInfo.awsUrl}?orgId=1&refresh=10s&theme=light&kiosk`} 
+          width="1300" 
+          height="1300"
+        ></iframe>
+        }
     </div>
   );
 };