card title wraped, aws graph container added

Author: taylrzhang

app/components/Occupied.tsx

@@ -80,6 +80,7 @@ const Occupied = React.memo(() => {
 
   // Handle clicks on Application cards
   const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
+    console.log(selectedApp, i);
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
       setIndex(i);
       setApp(selectedApp);
@@ -311,7 +312,7 @@ const Occupied = React.memo(() => {
                     />
                     <CardContent>
                       {/* <p id="databaseName">Name:</p> */}
-                      <Typography id="databaseName" className={classes.fontStyles}>
+                      <Typography noWrap id="databaseName" className={classes.fontStyles}>
                         {application[0]}
                       </Typography>
                       <p id="serviceName">Service:</p>

app/components/TransferColumns.tsx

@@ -62,16 +62,15 @@ const TransferColumns = React.memo(() => {
       } else if (eventMetricsReady) {
         setMetricsPool(eventMetrics);
       }
-    } 
+    }
     // JJ-ADDITION (CAN ALSO JUST ADD OR OPERATOR TO ABOVE CONDITIONAL)
     else if (service === 'kubernetesmetrics') {
       if (healthDataList && healthDataList.length > 0) {
         setMetricsPool(getMetrics('health', healthDataList));
       } else if (healthMetricsReady) {
         setMetricsPool(healthMetrics);
       }
-    }
-    else if (!service.includes('kafkametrics')) {
+    } else if (!service.includes('kafkametrics')) {
       if (healthDataList && healthDataList.length > 0) {
         setMetricsPool(getMetrics('health', healthDataList));
       } else if (healthMetricsReady) {
@@ -129,7 +128,7 @@ const TransferColumns = React.memo(() => {
     // setSelectedMetrics
     const temp: any[] = [];
     const categorySet = new Set();
-    console.log('targetKeys is: ', targetKeys)
+    console.log('targetKeys is: ', targetKeys);
     for (let i = 0; i < targetKeys.length; i++) {
       const str: string = targetKeys[i];
       const strArr: string[] = str.split(' | ');
@@ -149,12 +148,12 @@ const TransferColumns = React.memo(() => {
         temp.push(newCategory);
       }
     }
-    console.log('temp is: ', temp);
+    console.log('SelectedMetrics is: ', temp);
     setSelectedMetrics(temp);
   };
 
   const columns = [
-    { field: 'id', headerName: 'ID', width: 100},
+    { field: 'id', headerName: 'ID', width: 100 },
     {
       field: 'tag',
       headerName: 'Category',
@@ -168,7 +167,7 @@ const TransferColumns = React.memo(() => {
       editable: true,
     },
   ];
-  
+
   const rows: any[] = [];
 
   metricsPool.forEach((el, index) => {
@@ -182,17 +181,19 @@ const TransferColumns = React.memo(() => {
   const selectedRows: any[] = [];
 
   targetKeys.forEach(el => {
-    selectedRows.push(<li style={{marginLeft: '30px', marginTop: '5px', color: currentMode.color}}>{el}</li>)
-  })
+    selectedRows.push(
+      <li style={{ marginLeft: '30px', marginTop: '5px', color: currentMode.color }}>{el}</li>
+    );
+  });
 
   return (
     <>
       <div id="getChartsContainer">
-        <Button id="getCharts" onClick={getCharts} variant='contained' color='primary'>
+        <Button id="getCharts" onClick={getCharts} variant="contained" color="primary">
           Get Charts
         </Button>
       </div>
-      <div id='transferTest'>
+      <div id="transferTest">
         <div style={{ height: '500px', width: '100%' }}>
           <DataGrid
             style={currentMode}
@@ -205,18 +206,18 @@ const TransferColumns = React.memo(() => {
               const metrics: any[] = [];
               metricIndeces.forEach(el => {
                 metrics.push(metricsPool[el].key);
-              })
+              });
               setTargetKeys(metrics);
             }}
           />
         </div>
-        {selectedRows.length > 0 && <h3 style={{marginTop: '20px', color: currentMode.color}}>Selected Rows:</h3>}
-        <ol id="selectedRows">
-          {selectedRows}
-        </ol>
+        {selectedRows.length > 0 && (
+          <h3 style={{ marginTop: '20px', color: currentMode.color }}>Selected Rows:</h3>
+        )}
+        <ol id="selectedRows">{selectedRows}</ol>
       </div>
     </>
   );
 });
 
-export default TransferColumns;
+export default TransferColumns;

app/containers/AWSGraphsContainer.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable no-bitwise */
+import React, { useEffect, useState, useContext } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { ApplicationContext } from '../context/ApplicationContext';
+import * as DashboardContext from '../context/DashboardContext';
+import lightAndDark from '../components/Styling';

app/containers/GraphsContainer.tsx

@@ -38,7 +38,6 @@ interface Params {
 // }
 
 const GraphsContainer: React.FC = React.memo(props => {
-
   const navigate = useNavigate();
   const { app, service } = useParams<keyof Params>() as Params;
   const [live, setLive] = useState<boolean>(false);
@@ -59,11 +58,11 @@ const GraphsContainer: React.FC = React.memo(props => {
     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((value: string) => (value !== 'kafkametrics')
-    );
+    const healthServiceArray = serviceArray.filter((value: string) => value !== 'kafkametrics');
     if (live) {
       setIntervalID(
         setInterval(() => {
+          //HERE fetching health data when on Live
           fetchCommsData(app, live);
           fetchHealthData(healthServiceArray);
           if (service.includes('kafkametrics')) {
@@ -97,8 +96,7 @@ const GraphsContainer: React.FC = React.memo(props => {
     };
   }, [service, live]);
 
-  const currentMode =
-    mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
+  const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
 
   const routing = (route: string) => {
     if (location.href.includes('communications')) {
@@ -180,21 +178,25 @@ const GraphsContainer: React.FC = React.memo(props => {
             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>}
+        {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')}}
+          onClick={() => {
+            routing('modifyMetrics');
+          }}
           key="4"
         >
           Modify Metrics
@@ -212,7 +214,12 @@ const GraphsContainer: React.FC = React.memo(props => {
           </div>
         ) : (
           <div className="graphs">
-            {chart === 'all' && <div className="transferColumns"><h2 style={currentMode}>Search Your Metrics to Display</h2><TransferColumns /></div>}
+            {chart === 'all' && (
+              <div className="transferColumns">
+                <h2 style={currentMode}>Search Your Metrics to Display</h2>
+                <TransferColumns />
+              </div>
+            )}
             {chart.startsWith('health_') && (
               <HealthContainer
                 colourGenerator={stringToColour}

app/containers/HealthContainer.tsx

@@ -28,6 +28,8 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
     let counter: number = 0;
     const datalist: any[] = healthData.healthDataList;
     const timelist: any[] = healthData.healthTimeList;
+    console.log('datalist in healthcontainer is:', datalist); //array of healthDataList
+    console.log('timelist in healthcontainer is:', timelist);
 
     if (healthData && datalist && timelist && datalist.length > 0 && timelist.length > 0) {
       let selectedMetricsList: string[] = [];
@@ -49,6 +51,8 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
               const metric: string = Object.keys(serviceMetric)[0];
               const valueList = Object.values(serviceMetric)[0];
               const newTimeList: any = getTime(timelist, serviceName, metric, categoryName);
+              // console.log('valueList is', valueList); -> 50 values in an array
+              // console.log('newTimeList array is:', newTimeList); -> 50 values in an array
               if (selectedMetricsList.includes(metric)) {
                 const newHealthChart = (
                   <HealthChart

app/stylesheets/Occupied.scss

@@ -557,10 +557,10 @@ select:-webkit-autofill:focus {
 }
 
 #databaseName {
-  margin-top: 20px;
+  margin-top: 14px;
   margin-bottom: 0;
-  color: $header;
-  font-size: 36px;
+  font-size: 40px;
+  width: 280px;
 }
 
 #serviceName {

settings.json

@@ -5,5 +5,37 @@
 		"email": "",
 		"services": [],
 		"mode": "light"
+	},
+	"ty": {
+		"username": "ty",
+		"password": "$2b$12$1QNK6Y7tVuwxfUKCJfJlneik0m/oJsbrsWtDhkBi8sW13MhZmsZgK",
+		"email": "[email protected]",
+		"services": [
+			[
+				"test",
+				"MongoDB",
+				"mongodb+srv://taylrzhang:[email protected]/?retryWrites=true&w=majority",
+				"",
+				"Microservices",
+				"Feb 8, 2023 1:48 PM"
+			],
+			[
+				"test cluster",
+				"SQL",
+				"not real",
+				"",
+				"AWS",
+				"Feb 13, 2023 11:23 AM"
+			],
+			[
+				"realllllonggggname",
+				"SQL",
+				"dsfadsf",
+				"",
+				"AWS",
+				"Feb 13, 2023 11:46 AM"
+			]
+		],
+		"mode": "light"
 	}
 }