Merge pull request #13 from oslabs-beta/tsv2

kennethhui121 · web-flow · commit 40001bbf8118 · 2021-10-04T12:20:31.000-07:00
Typescript
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
-DS_Store
+.DS_Store
+build/
 dist/
 node_modules/
 security/
@@ -13,4 +14,3 @@ src/components/display/.StoppedContainers.js.icloud
 src/database/docketeerdb
 .env
 yarn.lock
-/security
diff --git a/README.md b/README.md
@@ -225,6 +225,11 @@ npm run test
 - Ricardo Cortez [@Github](https://github.com/rcortez88) [@LinkedIn](https://www.linkedin.com/in/rcortez88/)
 - Emma Czech [@Github](https://github.com/emczech) [@LinkedIn](https://https://www.linkedin.com/in/emczech/)
 - Brent Speight [@Github](https://github.com/brentspeight) [@LinkedIn](https://www.linkedin.com/in/brent-speight/)
+- Eric Lee [@Github](https://github.com/errc-lee)
+- Kristine Aguda [@Github](https://github.com/kaguda)
+- Dylan Feldman [@Github](https://github.com/dfeldman24)
+- Tre Hultzen [@Github](https://github.com/THultz)
+- Kenneth Hui [@Github](https://github.com/kennethhui121)
 
 ## ⭐ Show your support
 
diff --git a/build/background.png b/build/background.png
diff --git a/build/icon.png b/build/icon.png
diff --git a/package.json b/package.json
@@ -5,29 +5,21 @@
   "description": "A Docker Visualizer",
   "author": "Team Docketeer",
   "proxy": "http://localhost:3000",
-  "main": "./src/main/main.js",
+  "main": "src/main/index.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development concurrently 'electron-webpack dev' 'nodemon server/server.js'",
-    "compile": "electron-webpack",
+    "compile": "electron-webpack && tsc",
     "dist": "npm run compile && electron-builder",
     "dist-win": "npm run compile && electron-builder --win --x64",
     "dist:dir": "yarn dist  --dir -c.compression=store -c.mac.identity=null",
     "test": "jest --verbose",
     "temp": "webpack-dev-server --open --mode development"
   },
-  "jest": {
-    "verbose": true,
-    "transform": {
-      "^.+\\.jsx?$": "babel-jest"
-    },
-    "moduleNameMapper": {
-      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
-    }
-  },
   "dependencies": {
-    "@babel/plugin-transform-runtime": "^7.11.5",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.0",
     "axios": "^0.21.1",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.19.0",
@@ -36,16 +28,10 @@
     "clsx": "^1.1.1",
     "cors": "^2.8.5",
     "cross-env": "^7.0.2",
-    "css-loader": "^4.2.2",
     "electron-chartjs": "^1.0.0",
-    "electron-devtools-installer": "^3.2.0",
     "electron-fetch": "^1.7.3",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.4",
-    "enzyme-to-json": "^3.5.0",
     "express": "^4.17.1",
     "fix-path": "^3.0.0",
-    "jest": "^26.4.2",
     "node-fetch": "^2.6.1",
     "nodemailer": "^6.6.2",
     "parse": "^3.3.0",
@@ -58,37 +44,44 @@
     "react-redux": "^7.2.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "redux-thunk": "^2.3.0",
     "redux": "^4.0.5",
-    "sass-loader": "^10.0.2",
     "source-map-support": "^0.5.19",
     "style-loader": "^1.2.1",
-    "twilio": "^3.50.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0"
+    "twilio": "^3.50.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/core": "^7.12.3",
     "@babel/node": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-react": "^7.10.4",
     "babel-loader": "^8.2.1",
     "babel-polyfill": "^6.26.0",
     "concurrently": "^6.2.0",
+    "css-loader": "^4.3.0",
     "electron": "^10.4.7",
     "electron-builder": "^22.4.1",
+    "electron-devtools-installer": "^3.2.0",
     "electron-webpack": "^2.8.2",
+    "electron-webpack-ts": "^4.0.1",
+    "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.4",
     "enzyme-to-json": "^3.5.0",
     "eslint": "^7.28.0",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^26.6.3",
     "nodemon": "^2.0.7",
     "react-test-renderer": "^16.13.1",
-    "redux-thunk": "^2.3.0",
-    "webpack": "^4.44.1"
+    "sass-loader": "^10.2.0",
+    "typescript": "^3.8.3",
+    "webpack": "^4.44.1",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.2"
   },
   "electronWebpack": {
     "whiteListedModules": [
@@ -106,6 +99,15 @@
     "type": "git",
     "url": "git+https://github.com/oslabs-beta/docketeer.git"
   },
+  "jest": {
+    "verbose": true,
+    "transform": {
+      "^.+\\.jsx?$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
+    }
+  },
   "build": {
     "extraResources": [
       {
diff --git a/src/components/App.js b/src/components/App.js
@@ -21,7 +21,6 @@ const App = (props) => {
       </div>
     );
   }
-
   else {
     return (
       <div>
diff --git a/src/components/display/LineChartDisplay.js b/src/components/display/LineChartDisplay.js
@@ -52,7 +52,6 @@ const Metrics = (props) => {
     const queryStringEnd = `AND created_at >= now() - interval '${timePeriod} hour' ORDER BY "created_at" ASC`;
 
     const containerNamesArr = Object.keys(activeContainers);
-
     if (containerNamesArr.length === 1) {
       queryString += ')' + queryStringEnd;
       const result = await query(queryString, containerNamesArr);
diff --git a/src/components/helper/notificationsRequester.js b/src/components/helper/notificationsRequester.js
@@ -58,14 +58,19 @@ const constructNotificationMessage = (
 ) => {
   let message = '';
   switch (notificationType) {
+
   case categories.STOPPED:
     message = `Container with ID of ${containerId} has stopped`;
     break;
   case categories.CPU || categories.MEMORY:
-    message = `${notificationType} alert for container with ID of ${containerId}. Current Value: ${stat}; Alert Setting: ${triggeringValue}`;
+      message = `${notificationType} alert for container with ID of ${containerId}. 
+        Current Value: ${stat};
+        Alert Setting: ${triggeringValue}`;
     break;
   default:
-    message = `${notificationType} alert for container with ID of ${containerId}. Current Value: ${stat}; Alert Setting: ${triggeringValue}`;
+      message = `${notificationType} alert for container with ID of ${containerId}. 
+        Current Value: ${stat}; 
+        Alert Setting: ${triggeringValue}`;
     break;
   }
 
@@ -179,15 +184,20 @@ const checkForNotifications = (
               containerObject,
             );
             console.log(
-              `** Notification SENT. ${notificationType} containerId: ${containerId} stat: ${stat} triggeringValue: ${triggeringValue} spentTime: ${spentTime}`
+              `** Notification SENT. ${notificationType} 
+              containerId: ${containerId} 
+              stat: ${stat} 
+              triggeringValue: ${triggeringValue} 
+              spentTime: ${spentTime}`
             );
             console.log('sentNofications: ', sentNotifications);
 
             // update date.now in object that stores sent notifications
             sentNotifications[notificationType][containerId] = Date.now();
           } else {
             console.log(
-              `** Resend Interval Not Met. ${notificationType} is at ${stat}.\nLast sent notification time: ${notificationLastSent}`
+              `** Resend Interval Not Met. ${notificationType} is at ${stat}.\n
+              Last sent notification time: ${notificationLastSent}`
             );
           }
         } else {
@@ -201,7 +211,10 @@ const checkForNotifications = (
           memoryNotification();
           cpuNotification(); 
           console.log(
-            `** Notification SENT. ${notificationType} containerId: ${containerId} stat: ${stat} triggeringValue: ${triggeringValue}`
+            `** Notification SENT. ${notificationType} 
+            containerId: ${containerId} 
+            stat: ${stat} 
+            triggeringValue: ${triggeringValue}`
           );
         }
       } else {
diff --git a/src/components/tabs/VolumeHistory.js b/src/components/tabs/VolumeHistory.js
@@ -2,12 +2,12 @@
 import React, { useEffect, useState } from 'react';
 
 /**
- *
- * @param {*} props
  * Render Volume History
+ * @param {*} props
+ * 
+ * May need to be refactored to render the correct container to history
  */
 const volumeHistory = (props) => {
-  // set state for volume history cards
   const [volumeName, setVolumeName] = useState('');
   const [volumeList, setVolumeList] = useState(props.arrayOfVolumeNames);
 
diff --git a/src/constants/actionTypes.js b/src/constants/actionTypes.js
@@ -47,6 +47,5 @@ export const UPDATE_USER = 'UPDATE_USER';
 export const LOGOUT_USER = 'LOGOUT_USER';
 export const UPDATE_USER_LIST = 'UPDATE_USER_LIST';
 export const UPDATE_USER_ROLE = 'UPDATE_USER_ROLE';
-
 export const GET_VOLUME_LIST = 'GET_VOLUME_LIST';
 export const GET_VOLUME_CONTAINERS_LIST = 'GET_VOLUME_CONTAINERS_LIST';
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -1,29 +1,40 @@
 import { app, BrowserWindow, ipcMain } from 'electron';
 import * as path from 'path';
 import { format as formatUrl } from 'url';
-import installExtension, { REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS } from 'electron-devtools-installer';
-
+import installExtension, {
+  REDUX_DEVTOOLS,
+  REACT_DEVELOPER_TOOLS
+} from 'electron-devtools-installer';
 import verifyCode from './twilio/verifyCode';
 import verifyMobileNumber from './twilio/verifyMobile';
 import postEvent from './twilio/postEvent';
 import emailEvent from './email/emailEvent';
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
-
 // global reference to mainWindow (necessary to prevent window from being garbage collected)
+let mainWindow: BrowserWindow | null;
 
-let mainWindow;
+const isDevelopment = process.env.NODE_ENV !== 'production';
 
 function createMainWindow() {
   const window = new BrowserWindow({
     width: 1300,
     height: 800,
     webPreferences: {
       nodeIntegration: true,
-      allowRendererProcessReuse: false,
     },
   });
 
+  // comment out lines 30-38 if dev tools is slowing app
+  app.whenReady().then(() => {
+    const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
+    const extensionsPlural = extensions.length > 0 ? 's' : '';
+    Promise.all(extensions.map(extension => installExtension(extension)))
+      .then(names =>
+        console.log(`[electron-extensions] Added DevTools Extension${extensionsPlural}: ${names.join(', ')}`))
+      .catch(err =>
+        console.log('[electron-extensions] An error occurred: ', err));
+  });
+
   if (isDevelopment) {
     window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`);
   } else {
@@ -64,21 +75,7 @@ app.whenReady().then(() => {
       mainWindow = createMainWindow();
     }
   });
-
-  // comment out lines 70-78 if dev tools is slowing app
-  if (isDevelopment) {
-    const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS];
-    const extensionsPlural = extensions.length > 0 ? 's' : '';
-    Promise.all(extensions.map(extension => installExtension(extension)))
-      .then(names =>
-        console.log(`[electron-extensions] Added DevTools Extension${extensionsPlural}: ${names.join(', ')}`))
-      .catch(err =>
-        console.log('[electron-extensions] An error occurred: ', err));
-  }
 });
-// if (module.hot) {
-//   module.hot.accept();
-// }
 
 // quit application when all windows are closed
 app.on('window-all-closed', () => {
diff --git a/src/main/slack/cpuNotification.js b/src/main/slack/cpuNotification.js
@@ -1,29 +1,20 @@
-// got slack messaging working
-
 const request = require('request');
+require('dotenv').config();
 
-// import dotenv
-const dotenv = require('dotenv');
-dotenv.config();
-
-const URL = process.env.URL;
+const SLACK_WEBHOOK = process.env.SLACK_WEBHOOK;
 
-const cpuNotification = async function(){
+const cpuNotification = async function() {
   try {
-    console.log('here');
     const payload = {"text": "The CPU threshold has been met or exceeded"};
-    console.log('here2');
-    (await request({
-      url: URL,
+    await request({
+      url: SLACK_WEBHOOK,
       method: 'POST',
       body: payload,
       json: true
-    }));
-  } catch(e){
-    console.log('this is our error', e);
+    });
+  } catch(err){
+    console.log('cpuNotification ERR: ', err);
   }
 };
 
-
 export default cpuNotification;
-
diff --git a/src/main/slack/memoryNotification.js b/src/main/slack/memoryNotification.js
@@ -1,25 +1,20 @@
 const request = require('request');
+require('dotenv').config();
 
-// import dotenv
-const dotenv = require('dotenv');
-dotenv.config();
+const SLACK_WEBHOOK = process.env.SLACK_WEBHOOK;
 
-const URL = process.env.URL;
-
-const memoryNotification = async function(){
+const memoryNotification = async function() {
   try {
-    console.log('here');
     const payload = {"text": "The Memory threshold has been met or exceeded"};
-    console.log('here2')
-    (await request({
-      url: URL,
+    await request({
+      url: SLACK_WEBHOOK,
       method: 'POST',
       body: payload,
       json: true
-    }));
-  } catch(e){
-    console.log('this is our error', e);
+    });
+  } catch(err){
+    console.log('memoryNotification ERR: ', err);
   }
 };
 
-export default memoryNotification;
+export default memoryNotification;
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,6 @@ const App = (props) => {`
`21`	`21`	`</div>`
`22`	`22`	`);`
`23`	`23`	`}`
`24`		`-`
`25`	`24`	`else {`
`26`	`25`	`return (`
`27`	`26`	`<div>`