Merge branch 'Taylor/AWS-Graphs' of https://github.com/oslabs-beta/Chronos into Roberto/ecs

Author: RobertoRueMeloni

app/components/ClusterStatus.tsx renamed to app/components/ClusterTable.tsx

@@ -1,56 +1,91 @@
 import React, { useState } from 'react';
-import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Paper,
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import {AwsContext} from '../context/AwsContext';
+import { AwsContext } from '../context/AwsContext';
+import cluster from 'cluster';
 
 const useStyles = makeStyles({
   table: {
     minWidth: 650,
   },
+  tableContainer: {
+    margin: '0 20px',
+  },
+  activeCell: {
+    color: 'green',
+  },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  body: {
+    fontSize: '1.2rem',
+  },
+  title: {
+    color: '#888888',
+  },
 });
 
 export interface ClusterTableProps {
+  typeOfService: string;
   region: string;
 }
 
-const ClusterTable: React.FC<ClusterTableProps> = React.memo(({region}) => {
+const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
   const classes = useStyles();
   // const {clusterName, servicesNum, tasksNum, status} = useContext(DashboardContext);
 
-    return (
-        <div className="ClusterTable-container">
-          <TableContainer component={Paper}>
-      <Table className={classes.table} aria-label="cluster table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Name</TableCell>
-            <TableCell>Status</TableCell>
-            <TableCell>Services</TableCell>
-            <TableCell>Tasks</TableCell>
-          </TableRow>
-        </TableHead>
-        {/* <TableBody>
-          {clusters.map((cluster: Cluster, index: number) => (
+  return (
+    <div className="ClusterTable-container">
+      <TableContainer component={Paper}>
+        <Table className={classes.table} aria-label="cluster table">
+          <TableHead>
+            <TableRow>
+              <TableCell className={classes.title}>Name</TableCell>
+              <TableCell className={classes.title}>Status</TableCell>
+              <TableCell className={classes.title}>Services</TableCell>
+              <TableCell className={classes.title}>Tasks</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            <TableCell className={classes.body}>
+              <div className={classes.column}>
+                <div>test</div>
+                <div>
+                  <span className="region">{region}</span>
+                </div>
+              </div>
+            </TableCell>
+            {/* <TableCell className={cluster.status === 'active' ? classes.activeCell : undefined}>testactive</TableCell> */}
+            <TableCell className={classes.body}>active</TableCell>
+            <TableCell className={classes.body}>3</TableCell>
+            <TableCell className={classes.body}>0/3</TableCell>
+
+            {/* {clusters.map((cluster: Cluster, index: number) => (
             <TableRow key={index}>
               <TableCell>{cluster.name}</TableCell>
               <TableCell>{cluster.status}</TableCell>
               <TableCell>{cluster.serviceCount}</TableCell>
               <TableCell>{cluster.taskCount}</TableCell>
             </TableRow>
-          ))}
-        </TableBody> */}
-      </Table>
-    </TableContainer>
-        </div>
-    )
-})
+          ))} */}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+});
 
 export default ClusterTable;
 
-
-
-
-
 // type Cluster = {
 //   name: string;
 //   status: string;
@@ -88,4 +123,3 @@ export default ClusterTable;
 //       }
 //     });
 //   }, []);
-

app/components/Occupied.tsx

@@ -358,13 +358,17 @@ const Occupied = React.memo(() => {
           </Modal> */}
 
           <Modal open={envModalOpen} onClose={() => setEnvModalOpen(false)}>
-            <EnvModal setOpen={setEnvModalOpen} setAwsModalOpen={setAwsModalOpen} setAddModalOpen={setAddModalOpen}/>
+            <EnvModal
+              setOpen={setEnvModalOpen}
+              setAwsModalOpen={setAwsModalOpen}
+              setAddModalOpen={setAddModalOpen}
+            />
           </Modal>
 
           <Modal open={awsModalOpen} onClose={() => setAwsModalOpen(false)}>
             <AwsModal setOpen={setAwsModalOpen} />
           </Modal>
-      
+
           <Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
             <AddModal setOpen={setAddModalOpen} />
           </Modal>

app/containers/AWSGraphsContainer.tsx

@@ -7,21 +7,23 @@ import { AwsContext } from '../context/AwsContext';
 
 import '../stylesheets/AWSGraphsContainer.scss';
 import AwsChart from '../charts/AwsChart';
+import ClusterTable from '../components/ClusterTable';
 
 const AwsGraphsContainer: React.FC = React.memo(props => {
   const { awsData, setAwsData, awsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsAppInfo } = useContext(AwsContext);
   const { app, appIndex, intervalID, setIntervalID } = useContext(ApplicationContext);
   const { user } = useContext(DashboardContext);
   // const [intervalID, setintervalID] = useState<NodeJS.Timeout | null>(null);
   const [awsLive, setAwsLive] = useState<boolean>(false);
+  const { typeOfService, region } = awsAppInfo;
 
   useEffect(() => {
-    if(awsLive) {
-      console.log('we are live! fetching data every 10 seconds...')
+    if (awsLive) {
+      console.log('we are live! fetching data every 10 seconds...');
 
       setIntervalID(
         setInterval(() => {
-          console.log('intervalId after click live', intervalID)
+          console.log('intervalId after click live', intervalID);
           fetchAwsData(user, appIndex);
           fetchAwsAppInfo(user, appIndex);
           fetchAwsEcsData(user, appIndex);
@@ -61,15 +63,14 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
       console.log(colour);
       return colour;
     }
-  }
+  };
 
   // const awsGraphArray = Object.keys(awsData)?.map(metric => {
 
   // })
 
   return (
     <div className="AWS-container">
-      
       <div className="AWSheader">
         <Typography variant="h3">{app}</Typography>
         <p>Metrics for AWS Service</p>
@@ -83,12 +84,17 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
           )}
         </button>
       </div>
+      <div className="cluster-table">
+        {awsAppInfo.typeOfService === 'AWS/ECS' && (
+          <ClusterTable typeOfService={typeOfService} region={region} />
+        )}
+      </div>
       <div className="charts">
         <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
-          renderService='CPU Utilization'
-          metric='Percent'
+          renderService="CPU Utilization"
+          metric="Percent"
           timeList={awsData.CPUUtilization?.map(el => el.time)}
           valueList={awsData.CPUUtilization?.map(el => el.value)}
           // sizing={props.sizing}
@@ -97,8 +103,8 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
         <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
-          renderService='Network In'
-          metric='Percent'
+          renderService="Network In"
+          metric="Percent"
           timeList={awsData.NetworkIn?.map(el => el.time)}
           valueList={awsData.NetworkIn?.map(el => el.value)}
           // sizing={props.sizing}
@@ -107,8 +113,8 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
         <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
-          renderService='Network Out'
-          metric='Percent'
+          renderService="Network Out"
+          metric="Percent"
           timeList={awsData.NetworkOut?.map(el => el.time)}
           valueList={awsData.NetworkOut?.map(el => el.value)}
           // sizing={props.sizing}
@@ -117,8 +123,8 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
         <AwsChart 
           className='chart'
           // key={`Chart${counter}`}
-          renderService='DiskReadBytes'
-          metric='Percent'
+          renderService="DiskReadBytes"
+          metric="Percent"
           timeList={awsData.DiskReadBytes?.map(el => el.time)}
           valueList={awsData.DiskReadBytes?.map(el => el.value)}
           // sizing={props.sizing}

app/stylesheets/AWSGraphsContainer.scss

@@ -15,8 +15,24 @@
   text-align: center;
 }
 
+.js-plotly-plot {
+  box-shadow: $boxshadow;
+}
+
+.region {
+  font-size: 12px;
+  color: $teal;
+  padding: 4px 6px;
+  outline: 0.4px solid $teal;
+  border-radius: 4px;
+}
+
 .AWSheader {
   padding: 40px;
   margin: 10px;
   text-align: center;
 }
+
+.ClusterTable-container {
+  margin: 0 20px;
+}