Merged for final update

smk53664 · Mar 10, 2022 · 9b2ff9a · 9b2ff9a
2 parents faabfd3 + 8a451c9
commit 9b2ff9a
Show file tree

Hide file tree

Showing 19 changed files with 241 additions and 96 deletions.
diff --git a/This is the Command for the window b/This is the Command for the window
diff --git a/app/App.tsx b/app/App.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Splash from './components/Splash';
 import DashboardContainer from './containers/DashboardContainer';
+import './stylesheets/scrollBar.scss';
 
 const App: React.FC = React.memo(() => {
   const [firstVisit, setFirstVisit] = useState(true);

diff --git a/app/charts/LatencyChart.tsx b/app/charts/LatencyChart.tsx
@@ -76,6 +76,7 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colou
     return (
       <Plot
         data={[...plotlyData]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Latency',
           ...sizeSwitch,
@@ -95,7 +96,7 @@ const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colou
           },
           xaxis: {
             title: 'Time',
-            tickmode: 'linear',
+            tickmode: 'auto',
             tick0: 0,
             dtick: 10,
             rangemode: 'nonnegative',

diff --git a/app/charts/MemoryChart.tsx b/app/charts/MemoryChart.tsx
@@ -129,6 +129,7 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colour
     return (
       <Plot
         data={[...plotlyData.flat()]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Memory Traces',
           ...sizeSwitch,
@@ -143,13 +144,13 @@ const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colour
             orientation: 'h',
             xanchor: 'center',
             x: 0.5,
-            y: -1,
+            y: 0,
             font: {
               size: 9,
             },
           },
           xaxis: {
-            tickmode: 'linear',
+            tickmode: 'auto',
             tick0: 0,
             dtick: 10,
             title: 'Time Elapsed (min)',

diff --git a/app/charts/ProcessesChart.tsx b/app/charts/ProcessesChart.tsx
@@ -136,6 +136,7 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, col
     return (
       <Plot
         data={[...plotlyData.flat()]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Process Overview',
           ...sizeSwitch,
@@ -156,6 +157,7 @@ const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, col
             },
           },
           xaxis: {
+            tickmode: 'auto',
             dtick: 10,
             title: 'Time Elapsed (min)',
           },

diff --git a/app/charts/SpeedChart.tsx b/app/charts/SpeedChart.tsx
@@ -72,7 +72,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
         x: data[0][0],
         y: dataArr[1],
         type: 'scatter',
-        mode: 'lines+markers',
+        mode: 'lines',
         marker: {
           color: hashedColor,
         },
@@ -84,6 +84,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
     return (
       <Plot
         data={[...plotlyData]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Speed Chart',
           ...sizeSwitch,
@@ -94,7 +95,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
           },
           xaxis: {
             title: 'Time (EST)',
-            tickmode: 'linear',
+            tickmode: 'auto',
             dtick: 2,
             tickformat: '%H %M %p',
             rangemode: 'nonnegative',
@@ -112,7 +113,7 @@ const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing, colourG
           showlegend: true,
           legend: {
             orientation: 'h',
-            xanchor: 'center',
+            xanchor: 'auto',
             x: 0.5,
             y: 5,
           },

diff --git a/app/charts/TemperatureChart.tsx b/app/charts/TemperatureChart.tsx
@@ -14,10 +14,28 @@ interface SoloStyles {
   width: number;
 }
 
+<<<<<<< HEAD
 const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(
   ({ sizing, colourGenerator }) => {
     const { healthData } = useContext(HealthContext);
     const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
+=======
+const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
+  const { healthData } = useContext(HealthContext);
+  const [data, setData] = useState<Array<Array<string | (string | number)[]>>>([]);
+
+  useEffect(() => {
+    if (healthData.length) {
+      const tempArr: ((string | number)[] | string)[][] = [];
+      // loop over each
+      healthData.forEach(
+        (service: { time: string[]; cputemp: (string | number)[]; service: string[] }) => {
+          let timeArr: string[] = [];
+          // perform this when we 'setTime'
+          if (service.time !== undefined) {
+            timeArr = service.time.map((el: any) => moment(el).format('kk:mm:ss'));
+          }
+>>>>>>> will/style_tweaks
 
     useEffect(() => {
       if (healthData.length) {
@@ -43,6 +61,7 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(
 
     const [solo, setSolo] = useState<SoloStyles | null>(null);
 
+<<<<<<< HEAD
     setInterval(() => {
       if (solo !== soloStyle) {
         setSolo(soloStyle);
@@ -126,6 +145,79 @@ const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(
       <div className="chart" data-testid="Temperature Chart">
         {createChart()}
       </div>
+=======
+  setInterval(() => {
+    if (solo !== soloStyle) {
+      setSolo(soloStyle);
+    }
+  }, 20);
+
+  const createChart = () => {
+    let plotlyData: {
+      name: any;
+      x: any;
+      y: any;
+      type: any;
+      fillcolor: any;
+      mode: any;
+      showlegend: any;
+    }[] = [];
+
+    plotlyData = data.map(dataArr => {
+      // eslint-disable-next-line no-bitwise
+      const randomColor = `#${(((1 << 24) * Math.random()) | 0).toString(16)}`;
+
+      return {
+        name: dataArr[2],
+        x: data[0][0],
+        y: dataArr[1],
+        fillcolor: randomColor,
+        type: 'scatter',
+        mode: 'lines',
+        showlegend: true,
+      };
+    });
+
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
+    return (
+      <Plot
+        data={[...plotlyData]}
+        config={{ responsive: true, displayModeBar: false }}
+        layout={{
+          title: 'CPU Temperature',
+          ...sizeSwitch,
+          font: {
+            color: '#444d56',
+            size: 11.5,
+            family: 'Roboto',
+          },
+          paper_bgcolor: 'white',
+          plot_bgcolor: 'white',
+          legend: {
+            orientation: 'h',
+            xanchor: 'center',
+            x: 0.5,
+            y: 5,
+          },
+          xaxis: {
+            title: 'Time (EST)',
+            tickmode: 'auto',
+            tickformat: '%H %M %p',
+            mirror: false,
+            ticks: 'outside',
+            showline: true,
+          },
+          yaxis: {
+            title: `Temperature (\xB0C)`,
+            rangemode: 'nonnegative',
+            mirror: false,
+            ticks: 'outside',
+            showline: true,
+          },
+        }}
+      />
+>>>>>>> will/style_tweaks
     );
   }
 );

diff --git a/app/charts/TrafficChart.tsx b/app/charts/TrafficChart.tsx
@@ -33,6 +33,7 @@ const TrafficChart = React.memo(() => {
             showlegend: false,
           },
         ]}
+        config={{ displayModeBar: false }}
         layout={{
           title: 'Server Traffic',
           height: 300,

diff --git a/app/charts/sizeSwitch.js b/app/charts/sizeSwitch.js
@@ -19,6 +19,6 @@ window.addEventListener('resize', () => {
 });
 
 export const all = {
-  height: 300,
-  width: 300,
+  height: 400,
+  width: 400,
 };
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
@@ -21,7 +21,11 @@ const Contact = React.memo(() => {
               Please feel free to provide any feedback, concerns, or comments.
             </p>
             <p style={currentMode}>
+<<<<<<< HEAD
               You can find issues the team is currently addressing &nbsp;
+=======
+              You can find issues the team is currently working on{' '}
+>>>>>>> will/style_tweaks
               <a
                 style={currentMode}
                 id="issueLink"
@@ -38,38 +42,32 @@ const Contact = React.memo(() => {
         <div className="email-container">
           <form>
             <label style={currentMode} htmlFor="fname">
-              First Name: &nbsp;
+              First Name:
+              <input type="text" id="fname" name="firstname" placeholder="Your name.." />
             </label>
-            <input type="text" id="fname" name="firstname" placeholder="Your name.." />
-            <br />
             <label style={currentMode} htmlFor="lname">
-              Last Name: &nbsp;
+              Last Name:{' '}
+              <input type="text" id="lname" name="lastname" placeholder="Your last name.." />
             </label>
-            <input type="text" id="lname" name="lastname" placeholder="Your last name.." />
-            <br />
             <label style={currentMode} htmlFor="email">
-              E-mail: &nbsp;
+              E-mail:
+              <input type="text" id="email" name="email" placeholder="Your e-mail address.." />
             </label>
-            <input type="text" id="email" name="email" placeholder="Your e-mail address.." />
-            <br />
             <label style={currentMode} htmlFor="subject">
-              Subject: &nbsp;
+              Subject:
+              <input type="text" id="subject" name="subject" placeholder="Subject" />
             </label>
-            <input type="text" id="subject" name="subject" placeholder="Subject" />
-            <br />
             <label style={currentMode} id="messageLabel" htmlFor="message">
               Message:{' '}
               <span>
                 <textarea id="message" name="message" placeholder="Write something.." />
               </span>
             </label>
 
-            <br />
             <label style={currentMode} htmlFor="myfile">
               Select a file:{' '}
+              <input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*" />
             </label>
-            <input style={currentMode} type="file" id="myfile" name="myfile" accept="image/*" />
-            <br />
             <input style={currentMode} id="contact-submit" type="submit" value="Submit" />
           </form>
         </div>

diff --git a/app/containers/TitleBarContainer.tsx → app/components/WindowBar.tsx b/app/containers/TitleBarContainer.tsx → app/components/WindowBar.tsx
@@ -3,11 +3,11 @@ import Close from '@material-ui/icons/Close';
 import Maximize from '@material-ui/icons/CheckBoxOutlineBlankSharp';
 import Minimize from '@material-ui/icons/RemoveSharp';
 
-import '../stylesheets/TitleBarContainer.scss';
+import '../stylesheets/WindowBar.scss';
 
 const { ipcRenderer } = window.require('electron');
 
-export default function TitleBarContainer() {
+export default function WindowBar() {
   return (
     <div id="titleBar">
       <Minimize className="button" id="min-btn" onClick={() => ipcRenderer.send('min')} />

diff --git a/app/containers/MainContainer.tsx b/app/containers/MainContainer.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import LandingPageContainer from './LandingPageContainer';
-import TitleBarContainer from './TitleBarContainer';
+import WindowBar from '../components/WindowBar';
 import About from '../components/About';
 import Contact from '../components/Contact';
 import Settings from '../components/Settings';
@@ -26,25 +26,27 @@ const MainContainer = React.memo(() => {
   }, []);
 
   return (
-    <div className="main-container" style={currentModeCSS}>
-      <div className="main-routes">
-        <TitleBarContainer />
-        <Switch>
-          <Route exact path="/" component={LandingPageContainer} />
-          <Route exact path="/awaitingApproval" component={AwaitingApproval} />
-          <Route exact path="/about" render={() => checkAuth(About)} />
-          <Route exact path="/contact" render={() => checkAuth(Contact)} />
-          <Route exact path="/settings" render={() => checkAuth(Settings)} />
-          <Route exact path="/applications" render={() => checkAuth(Occupied)} />
-          <Route
-            exact
-            path="/applications/:app/:service"
-            render={() => checkAuth(GraphsContainer)}
-          />
-          <Route path="*" render={() => <h1>Not found</h1>} />
-        </Switch>
+    <>
+      {/* <WindowBar /> */}
+      <div className="main-container" style={currentModeCSS}>
+        <div className="main-routes">
+          <Switch>
+            <Route exact path="/" component={LandingPageContainer} />
+            <Route exact path="/awaitingApproval" component={AwaitingApproval} />
+            <Route exact path="/about" render={() => checkAuth(About)} />
+            <Route exact path="/contact" render={() => checkAuth(Contact)} />
+            <Route exact path="/settings" render={() => checkAuth(Settings)} />
+            <Route exact path="/applications" render={() => checkAuth(Occupied)} />
+            <Route
+              exact
+              path="/applications/:app/:service"
+              render={() => checkAuth(GraphsContainer)}
+            />
+            <Route path="*" render={() => <h1>Not found</h1>} />
+          </Switch>
+        </div>
       </div>
-    </div>
+    </>
   );
 });
 

diff --git a/app/index.tsx b/app/index.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import './stylesheets/index.scss';
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/';
 import App from './App';
+import WindowBar from './components/WindowBar';
 
 const theme = createMuiTheme({
   typography: {
@@ -12,6 +13,7 @@ const theme = createMuiTheme({
 
 ReactDOM.render(
   <ThemeProvider theme={theme}>
+    <WindowBar />
     <App />
   </ThemeProvider>,
   document.getElementById('app')