Merge pull request oslabs-beta#71 from clarakm/cleanup

Cleanup - debugged - cluster container now re renders when state changes, also fixed set interval bug, changed pending favicon to orange

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 package-lock.json
 .DS_Store
-.env
+.env
+server/secret.js

Dockerfile

@@ -0,0 +1,7 @@
+FROM node:12.14
+WORKDIR /usr/src/app
+COPY . /usr/src/app
+RUN npm install
+RUN npm run build
+EXPOSE 3000
+CMD node ./server/server.js

client/components/Login.jsx

@@ -3,7 +3,7 @@ import { Link, Redirect } from 'react-router-dom';
 import { Form, Button } from 'react-bootstrap';
 import awsLogo from '../assets/awsLogo.png';
 import axios from 'axios';
-
+import Cookies from 'js-cookie';
 // login page gives the option to authenticate AWS credentials or use current-context
 const Login = () => {
   //hooks for AWS sign in
@@ -13,10 +13,23 @@ const Login = () => {
     region: '',
   });
   const [auth, setAuth] = useState(false);
+  const [verify, setVerify] = useState(false);
   const [clusters, setClusters] = useState([]);
 
+  //hooks for user sign up
+  const [signup, setSignup] = useState({
+    newEmail: '',
+    newPassword: '',
+  });
+
+  //hooks for user login
+  const [login, setLogin] = useState({
+    email: '',
+    password: '',
+  });
+
   //function to authenticate credentials
-  const handleSubmit = async (event) => {
+  const handleAwsSignin = async (event) => {
     event.preventDefault();
     console.log('accessInfo', access);
     // make a request to the aws api with credentials. if data is returned then redirect.
@@ -31,8 +44,36 @@ const Login = () => {
       console.log('none');
     }
   };
+  //function to sign up new users
+  const handleSignup = async (event) => {
+    event.preventDefault();
+    const signupSuccess = await axios.post('/login/signup', {
+      signup,
+    });
+    console.log('signup success', signupSuccess);
+    if (signupSuccess) {
+      Cookies.set('token', signupSuccess.data);
+      setVerify(true);
+    }
+  };
+  //function to login/verify existing users
+  const handleLogin = async (event) => {
+    event.preventDefault();
+    const loginSuccess = await axios.post('/login/verify', {
+      login,
+    });
+    console.log('login success', loginSuccess);
+    if (loginSuccess.data) {
+      Cookies.set('token', loginSuccess.data);
+      setVerify(true);
+    } else {
+      console.log('user not verified');
+    }
+  };
 
   const { accessKeyId, secretAccessKey, region } = access;
+  const { newEmail, newPassword } = signup;
+  const { email, password } = login;
 
   return (
     <>
@@ -45,6 +86,13 @@ const Login = () => {
           }}
         />
       ) : null}
+      {verify ? (
+        <Redirect
+          to={{
+            pathname: '/cluster',
+          }}
+        />
+      ) : null}
       <div className='loginPage'>
         <div className='loginContainer'>
           <img src={awsLogo} className='awsLogo' />
@@ -106,7 +154,7 @@ const Login = () => {
               </Form.Control>
             </Form.Group>
             <br />
-            <Button variant='primary' type='submit' onClick={handleSubmit}>
+            <Button variant='primary' type='submit' onClick={handleAwsSignin}>
               Sign In with AWS
             </Button>
             <br />
@@ -117,6 +165,72 @@ const Login = () => {
             </Link>
           </Form>
         </div>
+
+        {/* user sign up w/o aws */}
+
+        <div className='loginContainer'>
+          <h5 className='signupTitle'>
+            Sign up to monitor your <br />
+            Kubernetes cluster.
+          </h5>
+          <Form className='loginForm'>
+            <Form.Group controlId='formEmail' className='inputAccess'>
+              <Form.Label>Email</Form.Label>
+              <Form.Control
+                type='text'
+                value={newEmail}
+                onChange={(e) =>
+                  setSignup({ ...signup, newEmail: e.target.value })
+                }
+              />
+              <Form.Text className='text-muted'>
+                We'll never share your email with anyone else.
+              </Form.Text>
+            </Form.Group>
+            <Form.Group controlId='formPassword' className='inputAccess'>
+              <Form.Label>Password</Form.Label>
+              <Form.Control
+                type='password'
+                value={newPassword}
+                onChange={(e) =>
+                  setSignup({ ...signup, newPassword: e.target.value })
+                }
+              />
+            </Form.Group>
+            <br />
+            <Button variant='primary' type='submit' onClick={handleSignup}>
+              Sign Up
+            </Button>
+          </Form>
+
+          {/* user sign up w/o aws */}
+          <h6 className='haveAccount'>Already have an account?</h6>
+
+          <Form className='loginForm'>
+            <Form.Group controlId='verifyEmail' className='inputAccess'>
+              <Form.Control
+                type='text'
+                placeholder='Email'
+                value={email}
+                onChange={(e) => setLogin({ ...login, email: e.target.value })}
+              />
+            </Form.Group>
+            <Form.Group controlId='verifyPassword' className='inputAccess'>
+              <Form.Control
+                type='password'
+                placeholder='Password'
+                value={password}
+                onChange={(e) =>
+                  setLogin({ ...login, password: e.target.value })
+                }
+              />
+            </Form.Group>
+            <br />
+            <Button variant='primary' type='submit' onClick={handleLogin}>
+              Sign In
+            </Button>
+          </Form>
+        </div>
       </div>
     </>
   );

client/components/cluster/Pods.jsx

@@ -8,13 +8,16 @@ import {
   faMinusCircle,
 } from '@fortawesome/free-solid-svg-icons';
 
+import Cookies from 'js-cookie';
+
 const Pods = ({ data }) => {
+  console.log('pods data', data);
+  // console.log('props', props);
   // using hooks to set state
   const [table, setTable] = useState([]); //pod data in table
   let children = [];
-  data[0].children.map(child => children.push(...child.children));
+  data[0].children.map((child) => children.push(...child.children));
   // console.log('children', children);
-  // useEffect = Hook version of componentDidMount
   useEffect(() => {
     const podList = children.map((p, i) => {
       // check status - if "Running" then render green check circle
@@ -43,7 +46,7 @@ const Pods = ({ data }) => {
               <td>{p.name}</td>
               <td>{p.namespace}</td>
               <td>
-                <FontAwesomeIcon icon={faMinusCircle} color='red' />
+                <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                 &nbsp;&nbsp;
                 {p.status}
               </td>
@@ -55,17 +58,29 @@ const Pods = ({ data }) => {
       }
     });
     setTable(podList);
-  }, []);
+    // use Effect will trigger every time data is changed
+  }, data);
 
   // function that adds a new Alert - gets called in ^useEffect when pod status is not "Running"
-  const addAlert = async p => {
-    const postAlert = await axios.post('/api/podAlerts', {
-      name: p.name,
-      namespace: p.namespace,
-      status: p.status,
-      podIP: p.podIP,
-      time: Date(Date.now()).toString(),
-    });
+  const addAlert = async (p) => {
+    const token = Cookies.get('token');
+    const header = {
+      headers: {
+        Authorization: 'Bearer' + token,
+      },
+    };
+    console.log('header', header);
+    const postAlert = await axios.post(
+      '/api/alerts',
+      {
+        name: p.name,
+        namespace: p.namespace,
+        status: p.status,
+        podIP: p.podIP,
+        time: Date(Date.now()).toString(),
+      },
+      header
+    );
   };
 
   return (

client/containers/Alerts_Container.jsx

@@ -9,17 +9,29 @@ import { Table } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMinusCircle } from '@fortawesome/free-solid-svg-icons';
 
+import Cookies from 'js-cookie';
+
 const Alerts = () => {
   let [alerts, setAlerts] = useState([]);
   const [table, setTable] = useState([]); //alert data in table
-
   // useEffect = Hook version of componentDidMount
   useEffect(() => {
+    console.log('cookies', Cookies.get('token'));
+    const token = Cookies.get('token');
+    const header = {
+      headers: {
+        Authorization: 'Bearer' + token,
+      },
+    };
     const fetchPods = async () => {
       // axios request to server side
-      const result = await axios.get('/api/podAlerts');
-      alerts = []; //empty the alerts before updating with fetched data
-      setAlerts(alerts.push(result.data));
+      const result = await axios.get('/api/alerts', header);
+      if (result.data) {
+        alerts = []; //empty the alerts before updating with fetched data
+        setAlerts(alerts.push(result.data));
+      } else {
+        alerts = [[]];
+      }
       console.log('alerts', alerts);
       const alertList = alerts[0].map((p, i) => {
         return (
@@ -28,7 +40,7 @@ const Alerts = () => {
               <td>{p.name}</td>
               <td>{p.namespace}</td>
               <td>
-                <FontAwesomeIcon icon={faMinusCircle} color='red' />
+                <FontAwesomeIcon icon={faMinusCircle} color='orange' />
                 &nbsp;&nbsp;{p.status}
               </td>
               <td>{p.podIP}</td>

client/containers/Cluster_Container.jsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
+import React from 'react';
 
 import Pods from '../components/cluster/Pods.jsx';
 import Nodes from '../components/cluster/Nodes.jsx';