awscomtainer modularized

Author: tedpham3

app/containers/AWSGraphsContainer.tsx

@@ -0,0 +1,64 @@
+import React, { useContext, useEffect } from 'react';
+import { ApplicationContext } from '../../context/ApplicationContext';
+import { DashboardContext } from '../../context/DashboardContext';
+import { Typography } from '@material-ui/core';
+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';
+
+const AwsGraphsContainer = () => {
+  const { app, appIndex, setIntervalID, intervalID } = useContext(ApplicationContext);
+  const { user } = useContext(DashboardContext);
+  const { awsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsEksData, fetchAwsAppInfo } = useContext(AwsContext);
+  const { state } = useLocation();
+  const { typeOfService } = state;
+  const [awsLive, setAwsLive] = React.useState(false);
+
+  useEffect(() => {
+    if (awsLive) {
+      const id = setInterval(() => {
+        fetchAwsAppInfo(user, appIndex);
+        if (typeOfService === 'AWS/EC2') {
+          fetchAwsData(user, appIndex);
+        }
+        if (typeOfService === 'AWS/ECS') {
+          fetchAwsEcsData(user, appIndex);
+        }
+        if (typeOfService === 'AWS/EKS') {
+          fetchAwsEksData(user, appIndex);
+        }
+      }, 10000);
+      setIntervalID(id);
+    } else {
+      if (intervalID) {
+        clearInterval(intervalID);
+      }
+    }
+
+    return () => {
+      if (intervalID) {
+        clearInterval(intervalID);
+      }
+    };
+  }, [awsLive, user, appIndex, typeOfService, fetchAwsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsEksData, intervalID, setIntervalID]);
+
+  return (
+    <div className="AWS-container">
+      <div className="AWS-header">
+        <Typography variant="h3">{app}</Typography>
+        <p>Metrics for AWS Service</p>
+        <button onClick={() => setAwsLive(!awsLive)}>
+          {awsLive ? 'Stop Live Update' : 'Start Live Update'}
+        </button>
+      </div>
+      {typeOfService === 'AWS/ECS' && <ECSGraphsComponent region={awsAppInfo.region} typeOfService={typeOfService} />}
+      {typeOfService === 'AWS/EC2' && <EC2GraphsComponent />}
+      {typeOfService === 'AWS/EKS' && <EKSGraphsComponent awsEksData={awsAppInfo.awsUrl} />}
+    </div>
+  );
+};
+
+export default AwsGraphsContainer;

app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import AwsEC2Graphs from '../../components/AwsEC2Graphs';
+
+const EC2GraphsComponent = () => (
+  <div className="cluster-table">
+    <AwsEC2Graphs />
+  </div>
+);
+
+export default EC2GraphsComponent;

app/containers/AWSGraphsContainer/EC2GraphsComponent.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import ClusterTable from '../../components/ClusterTable';
+import AwsECSClusterGraphs from '../../components/AwsECSClusterGraphs';
+
+const ECSGraphsComponent = ({ region, typeOfService }) => (
+  <div className="cluster-table">
+    <ClusterTable typeOfService={typeOfService} region={region} />
+    <AwsECSClusterGraphs />
+  </div>
+);
+
+export default ECSGraphsComponent;

app/containers/AWSGraphsContainer/ECSGraphsComponent.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const EKSGraphsComponent = ({ awsEksData }) => (
+  <iframe src={`${awsEksData}?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300"></iframe>
+);
+
+export default EKSGraphsComponent;

app/containers/AWSGraphsContainer/EKSGraphsComponent.tsx

@@ -1,4 +1,4 @@
-@import './constants.scss';
+@import '../../stylesheets/constants.scss';
 
 .AWS-container {
   margin-top: 40px;

app/stylesheets/AWSGraphsContainer.scss …ontainers/AWSGraphsContainer/styles.scssapp/stylesheets/AWSGraphsContainer.scss renamed to app/containers/AWSGraphsContainer/styles.scss app/stylesheets/AWSGraphsContainer.scss renamed to app/containers/AWSGraphsContainer/styles.scss

@@ -22,7 +22,7 @@ import DockerHealthContainer from '../DockerHealthContainer';
 
 import GraphNavBar from '../../components/GraphNavBar/GraphNavBar';
 
-import '../../stylesheets/GraphsContainer.scss';
+import './styles.scss';
 import Inspect from '../Inspect';
 
 interface Params {

app/containers/GraphsContainer/GraphsContainer.tsx

@@ -1,4 +1,4 @@
-@import './constants.scss';
+@import '../../stylesheets/constants.scss';
 
 .traceContainer {
   display: flex;

app/stylesheets/GraphsContainer.scss …p/containers/GraphsContainer/styles.scssapp/stylesheets/GraphsContainer.scss renamed to app/containers/GraphsContainer/styles.scss app/stylesheets/GraphsContainer.scss renamed to app/containers/GraphsContainer/styles.scss

@@ -9,7 +9,7 @@ import GraphsContainer from './GraphsContainer/GraphsContainer';
 import { DashboardContext } from '../context/DashboardContext';
 import SignUp from '../components/SignUp';
 import Login from '../components/Login';
-import AwsGraphsContainer from '../containers/AWSGraphsContainer';
+import AwsGraphsContainer from './AwsGraphsContainer/AwsGraphsContainer';
 
 import '../stylesheets/MainContainer.scss';