Merge pull request #8 from oslabs-beta/dev-v7-matt-container-graphs

Updated the container graphs to display correctly. Fixed console log …

server/controllers/initController.js

@@ -32,7 +32,7 @@ initController.timeZone = (req, res, next) => {
   const parameter = [req.body.timezone.toString()]
   console.log(parameter)
   //!Abigail... why can't I do the $1 thing? Does it only work if you have more than one?
-  db.query2(`set time zone 7`)
+  db.query2(`set time zone $1`, parameter)
     .then((data) => {
       return next();
     })

src/components/App.js

@@ -10,31 +10,6 @@ import SysAdminView from './views/SysAdmin';
 const App = (props) => {
   // grab current user's role
   const role = useSelector((state) => state.session.role); 
-
-  // const paths = {
-  //   'system admin': '/app/sysadmin',
-  //   'admin': '/app/admin',
-  //   'user': '/app/user'
-  // }
-  // set path for the active role
-  // const path = paths[role];  
-
-  console.log("App Running")
-  // console.log(path)
-  // console.log(role)
-
-  // return (
-  //   <div>
-  //     Am I in App?
-  //     <Navigate to={path} />
-  //     <Routes>
-  //       <Route path='/sysadmin/*' element={<SysAdminView />}/>
-  //       <Route path='/admin/*' element={<AdminView />}/>
-  //       <Route path='/user/*' element={<UserView />}/>
-  //     </Routes>
-  //   </div>
-  // )
-
 
   if (role === 'system admin') { return (  
     <div>

src/components/display/LineChartDisplay.js

@@ -151,7 +151,6 @@ const Metrics = (props) => {
     }
 
     const containerMetrics = await getContainerMetrics();
-    console.log('This is CONTAINERMETRICS: ', containerMetrics)
 
     const auxObj = {};
 
@@ -162,7 +161,6 @@ const Metrics = (props) => {
         writtenIO: buildBarGraphObj(container),
         readIO: buildBarGraphObj(container)
       };
-      // console.log('This is the auxobj', auxObj);
     });
 
     // iterate through each row from fetch and build Memory, CPU, Written/Read Block_IO objects [{}, {}, {}, {}]

src/components/helper/commands.js

@@ -554,8 +554,6 @@ export const dockerComposeDown = (fileLocation, ymlFileName) => {
 export const setDbSessionTimeZone = () => {
   const currentTime = new Date();
   const offsetTimeZoneInHours = currentTime.getTimezoneOffset() / 60;
-  console.log('TimeZone: ', offsetTimeZoneInHours);
-  console.log('setDbSessionTimeZone')
 
   fetch('http://localhost:3000/init/timezone', {
     method: 'POST',
@@ -578,8 +576,6 @@ export const setDbSessionTimeZone = () => {
 
 //I'm not sure if this is actually set up and running. May need to link Github URLs first on Settings page
 export const getContainerGitUrl = (container) => {
-  console.log('front-end container: ', container)
-  console.log('Running getContainerGitUrl');
   fetch('http://localhost:3000/init/github', {
     method: 'POST',
     headers: {

src/components/helper/notificationsRequester.js

@@ -153,10 +153,8 @@ const checkForNotifications = (
     const containerObject = getContainerObject(containerList, containerId);
 
     if (containerObject) {
-      console.log(triggeringValue);
       // gets the stat/metric on the container that we want to test
       const stat = getTargetStat(containerObject, notificationType);
-      console.log(stat);
       // if the stat should trigger rule
       if (stat > triggeringValue) {
         // if the container is in sentNotifications object

src/components/tabs/Containers.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { Bar } from 'react-chartjs-2';
+import { Chart } from 'react-chartjs-2';
 import ToggleDisplay from '../display/ToggleDisplay';
 
 /**
@@ -9,8 +9,6 @@ import ToggleDisplay from '../display/ToggleDisplay';
  * @param {*} props
  */
 const Containers = (props) => {
-  const image = props;
-  console.log(image);
   const renderStoppedList = props.stoppedList.map((container, i) => {
     return (
       <div className="box" key={`stoppedBox-${i}`}>
@@ -52,7 +50,7 @@ const Containers = (props) => {
     );
   });
 
-  const renderRunningList = props.runningList.map((container, i, props) => {
+  const renderRunningList = props.runningList.map((container, i) => {
     const cpuData = parseFloat(
       container.CPUPerc.substring(0, container.CPUPerc.length - 1)
     ).toFixed(2);
@@ -66,20 +64,20 @@ const Containers = (props) => {
         {
           stack,
           label: Math.random(),
+          data: [cpuData, memoryData],
           backgroundColor: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
           borderColor: 'rgba(0,0,0,0)',
           borderWidth: 1,
-          data: [cpuData, memoryData],
-          barPercentage: 0.4,
+          barPercentage: 0.45,
         },
         {
           stack,
           label: Math.random(),
+          data: [(100 - cpuData).toFixed(2), (100 - memoryData).toFixed(2)],
           backgroundColor: ['rgba(155, 198, 233, 1)', 'rgba(217, 252, 219, 1)'],
           borderColor: 'rgba(0,0,0,0)',
           borderWidth: 1,
-          data: [(100 - cpuData).toFixed(2), (100 - memoryData).toFixed(2)],
-          barPercentage: 0.4,
+          barPercentage: 0.45,
         },
       ],
     };
@@ -108,39 +106,30 @@ const Containers = (props) => {
               </div>
             </div>
             <div className="chart-info">
-              <Bar
+              <Chart
+                type='bar'
                 data={chartInfo}
                 options={{
-                  tooltips: {
-                    enabled: false,
+                  responsive: true,
+                  plugins: {
+                    legend: {
+                      display: false
+                    },
                   },
-                  title: {
-                    display: false,
-                  },
-                  legend: {
-                    display: false,
-                    position: 'right',
-                  },
-
                   scales: {
-                    yAxes: [
+                    y: 
                       {
-                        gridLines: {
-                          display: false,
-                        },
                         ticks: {
-                          display: false,
                           min: 0,
                           max: 100,
-                          stepSize: 20,
+                          stepSize: 50,
                         },
+                        stacked: true
                       },
-                    ],
-                    xAxes: [
+                    x:
                       {
                         categorySpacing: 0,
                       },
-                    ],
                   },
                 }}
               />

src/renderer/App2.js

@@ -5,11 +5,8 @@ import { Routes, Route, Navigate, Link } from 'react-router-dom';
 import Login from '../components/login/login.js';
 import App from '../components/App';
 import Authentication from '../components/Authentication'
-// import UserView from '../components/views/UserView';
 
 export const App2 = () => {
-  console.log("App 2 Running")
-  //check 
   return (
     <>
       <Routes>

src/renderer/index.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { createRoot } from 'react-dom/client'
 
 // Redux
 import { Provider } from 'react-redux';
 import store from './store';
 
-// console.log('I HOPE THIS WORKS')
 import '../components/css/styles.css';
 import '../components/css/metric.css';
 import '../components/css/running.css';
@@ -29,11 +27,3 @@ root.render(
   </Provider>
 );
 
-
-
-// ReactDOM.render(<h2>Abigail is a gale-ing force</h2>, rootNode)
-
-// import fixPath from 'fix-path'; // Required for Electron's path configuration
-// fixPath();
-// ReactDOM.createPortal(<App2 />, rootNode)
-