Merge pull request #1 from oslabs-beta/Taylor/AWS-Graphs

Taylor/aws graphs

Author: timlee12

app/components/Occupied.tsx

@@ -19,7 +19,6 @@ import {
   Typography,
 } from '@material-ui/core';
 
-
 import { makeStyles } from '@material-ui/core/styles';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 
@@ -32,7 +31,6 @@ import Badge from '@material-ui/core/Badge';
 import PersonIcon from '@material-ui/icons/Person';
 import UpdateIcon from '@material-ui/icons/Update';
 
-
 // // MODALS
 import AddModal from '../modals/AddModal';
 import ProfileContainer from '../containers/ProfileContainer';
@@ -49,40 +47,40 @@ import { CommsContext } from '../context/CommsContext';
 
 // TYPESCRIPT
 interface StyleProps {
-    root: BaseCSSProperties;
-  }
-  type ClickEvent = React.MouseEvent<HTMLElement>;
-  
+  root: BaseCSSProperties;
+}
+type ClickEvent = React.MouseEvent<HTMLElement>;
 
 const Occupied = React.memo(() => {
-  const { setServicesData } = useContext(ApplicationContext);
+  const { setServicesData, app, setApp } = useContext(ApplicationContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);
   const [serviceModalOpen, setServiceModalOpen] = useState<boolean>(false);
   const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
   const [personModalOpen, setPersonModalOpen] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
-  const [app, setApp] = useState<string>('');
+  // const [app, setApp] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
-    
+
   // Grab services and applications whenever the user changes
   useEffect(() => {
     setServicesData([]);
     getApplications();
-  }, [ user ]);
+  }, [user]);
 
   // Dynamic refs
   const delRef = useRef<any>([]);
-  
+
   // Asks user to confirm deletion
   const confirmDelete = (event: ClickEvent, application: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
     if (confirm(message)) deleteApp(i);
   };
-  
+
   // 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);
@@ -249,7 +247,11 @@ const Occupied = React.memo(() => {
                   You have {notification ? notification.length : 0} new alerts
                 </span>
                 <NotificationsIcon className="navIcon" id="notificationsIcon" />
-                <Badge overlap="rectangular" badgeContent={notification ? notification.length : 0} color="secondary" />
+                <Badge
+                  overlap="rectangular"
+                  badgeContent={notification ? notification.length : 0}
+                  color="secondary"
+                />
               </div>
               <div className="personIconArea">
                 <Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
@@ -267,61 +269,66 @@ const Occupied = React.memo(() => {
             </Button>
           </div>
           {applications &&
-            applications.filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
-            .map((application: string[], i: number | any | string | undefined) => (
-              <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
-                <Card
-                  key={`card-${i}`}
-                  className={classes.paper}
-                  variant="outlined"
-                  onClick={event => handleClick(event, application[0], i)}
-                >
-                  <div className="databaseIconContainer">
-                    <div className="databaseIconHeader">
-                      {application[1] === 'SQL' ? (
-                        <img className="databaseIcon" alt="SQL" />
-                      ) : (
-                        <img className="databaseIcon" alt="MongoDB" />
-                      )}
+            applications
+              .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
+              .map((application: string[], i: number | any | string | undefined) => (
+                <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
+                  <Card
+                    key={`card-${i}`}
+                    className={classes.paper}
+                    variant="outlined"
+                    onClick={event => handleClick(event, application[0], i)}
+                  >
+                    <div className="databaseIconContainer">
+                      <div className="databaseIconHeader">
+                        {application[1] === 'SQL' ? (
+                          <img className="databaseIcon" alt="SQL" />
+                        ) : (
+                          <img className="databaseIcon" alt="MongoDB" />
+                        )}
+                      </div>
                     </div>
-                  </div>
 
-                  <CardHeader
-                    avatar={
-                      <IconButton
-                        id="iconButton"
-                        ref={element => {
-                          delRef.current[i] = element;
-                        }}
-                        className={classes.iconbutton}
-                        aria-label="Delete"
-                        onClick={event => confirmDelete(event, application[0], i)}
-                      >
-                        <HighlightOffIcon
-                          className={classes.btnStyle}
-                          id="deleteIcon"
+                    <CardHeader
+                      avatar={
+                        <IconButton
+                          id="iconButton"
                           ref={element => {
                             delRef.current[i] = element;
                           }}
-                        />
-                      </IconButton>
-                    }
-                  />
-                  <CardContent>
-                    <p id="databaseName">Database Name:</p>
-                    <Typography className={classes.fontStyles}>{application[0]}</Typography>
-                  </CardContent>
-                  <hr className="cardLine" />
+                          className={classes.iconbutton}
+                          aria-label="Delete"
+                          onClick={event => confirmDelete(event, application[0], i)}
+                        >
+                          <HighlightOffIcon
+                            className={classes.btnStyle}
+                            id="deleteIcon"
+                            ref={element => {
+                              delRef.current[i] = element;
+                            }}
+                          />
+                        </IconButton>
+                      }
+                    />
+                    <CardContent>
+                      {/* <p id="databaseName">Name:</p> */}
+                      <Typography noWrap id="databaseName" className={classes.fontStyles}>
+                        {application[0]}
+                      </Typography>
+                      <p id="serviceName">Service:</p>
+                      <Typography className={classes.fontStyles}>{application[3]}</Typography>
+                    </CardContent>
+                    <hr className="cardLine" />
 
-                  <div className="cardFooter">
-                    <UpdateIcon className="cardFooterIcon" />
-                    <em>
-                      <p id="cardFooterText">{application[3]}</p>
-                    </em>
-                  </div>
-                </Card>
-              </div>
-            ))}
+                    <div className="cardFooter">
+                      <UpdateIcon className="cardFooterIcon" />
+                      <em>
+                        <p id="cardFooterText">{application[4]}</p>
+                      </em>
+                    </div>
+                  </Card>
+                </div>
+              ))}
 
           <Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
             <AddModal setOpen={setAddModalOpen} />

app/components/Splash.tsx

@@ -1,19 +1,19 @@
 import React, { useState, useEffect } from 'react';
 import '../stylesheets/Splash.scss';
 
-const Splash: React.FC = React.memo((props) => {
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    setTimeout(() => setVisible(false), 4000);
-  }, []);
+const Splash: React.FC = React.memo(props => {
+  const [visible, setVisible] = useState(false);
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(false), 4000);
+  // }, []);
 
   return (
     <>
-      {visible &&
-          <div id="splash">
+      {visible && (
+        <div id="splash">
           <img id="splashLogo" src="../assets/logo.svg" alt="Chronos" />
         </div>
-      }
+      )}
     </>
   );
 });

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';