Adding our merge from oslab-beta/master to open-source-labs/dev

.eslintrc.json

@@ -1,4 +1,9 @@
 {
+  "globals": {
+    "NodeJS": true,
+    "JSX": true,
+    "Electron": true
+  },
   "plugins": ["react", "prettier"],
   "parser": "babel-eslint",
   "parserOptions": {
@@ -16,6 +21,7 @@
   },
   "extends": ["airbnb", "eslint:recommended", "plugin:react/recommended", "prettier"],
   "rules": {
+    "react/display-name": "off",
     "prettier/prettier": "error",
     "no-unused-vars": [
       "warn",
@@ -35,6 +41,28 @@
     "react/no-array-index-key": "warn",
     "no-restricted-syntax": "off",
     "guard-for-in": "off",
-    "no-param-reassign": "off"
+    "no-param-reassign": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never",
+        "mjs": "never"
+      }
+    ]
+  },
+  "settings": {
+    "import/extensions": [".js", ".mjs", ".jsx", ".ts", ".tsx"],
+    // "import/parsers": {
+    //   "@typescript-eslint/parser": [".ts", ".tsx"]
+    // },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   }
-}
+}

.gitignore

@@ -44,5 +44,4 @@ __tests__/**/__snapshots__
 .Spotlight-V100
 .Trashes
 ehthumbs.db
-Thumbs.db
-
+Thumbs.db

app/charts/LatencyChart.tsx

@@ -1,13 +1,35 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
+import { all, solo as soloStyle } from './sizeSwitch';
 
-const LatencyChart = React.memo(() => {
+interface GraphsContainerProps {
+  sizing: string;
+}
+
+interface SoloStyles {
+  height: number;
+  width: number;
+}
+
+const LatencyChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
 
+  const [solo, setSolo] = useState<SoloStyles | null>(null);
+
+  setInterval(() => {
+    if (solo != soloStyle) {
+      setSolo(soloStyle);
+    }
+  }, 20);
+
   const createChart = () => {
     const yAxis: Array<number> = healthData.latency;
 
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
+    console.log(sizeSwitch);
+
     return (
       <Plot
         data={[
@@ -21,8 +43,7 @@ const LatencyChart = React.memo(() => {
         ]}
         layout={{
           title: 'Latency',
-          height: 300,
-          width: 300,
+          ...sizeSwitch,
           font: {
             color: '#444d56',
             size: 11.5,
@@ -56,7 +77,7 @@ const LatencyChart = React.memo(() => {
     );
   };
 
-  return <div className="chart">{createChart()}</div>;
+  return <div className="chart">{solo && createChart()}</div>;
 });
 
 export default LatencyChart;

app/charts/MemoryChart.tsx

@@ -1,14 +1,34 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
+import { all, solo as soloStyle } from './sizeSwitch';
 
-const MemoryChart = React.memo(() => {
+interface GraphsContainerProps {
+  sizing: string;
+}
+
+interface SoloStyles {
+  height: number;
+  width: number;
+}
+
+const MemoryChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
   const createChart = () => {
     const free: number[] = healthData.freememory;
     const used: number[] = healthData.usedmemory;
     const active: number[] = healthData.activememory;
 
+    const [solo, setSolo] = useState<SoloStyles | null>(null);
+
+    setInterval(() => {
+      if (solo != soloStyle) {
+        setSolo(soloStyle);
+      }
+    }, 20);
+
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
     return (
       <Plot
         data={[
@@ -39,8 +59,7 @@ const MemoryChart = React.memo(() => {
         ]}
         layout={{
           title: 'Memory Traces',
-          height: 300,
-          width: 300,
+          ...sizeSwitch,
           font: {
             color: '#444d56',
             size: 11.5,
@@ -54,8 +73,8 @@ const MemoryChart = React.memo(() => {
             x: 0.5,
             y: -1.0,
             font: {
-              size: 9
-            }
+              size: 9,
+            },
           },
           xaxis: {
             tickmode: 'linear',
@@ -64,8 +83,8 @@ const MemoryChart = React.memo(() => {
             title: 'Time Elapsed (min)',
           },
           yaxis: {
-            title: 'Bytes'
-          }
+            title: 'Bytes',
+          },
         }}
       />
     );

app/charts/ProcessesChart.tsx

@@ -1,14 +1,34 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
+import { all, solo as soloStyle } from './sizeSwitch';
 
-const ProcessesChart = React.memo(() => {
+interface GraphsContainerProps {
+  sizing: string;
+}
+
+interface SoloStyles {
+  height: number;
+  width: number;
+}
+
+const ProcessesChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
   const createChart = () => {
     const runningProcesses: Array<number> = healthData.runningprocesses;
     const blockedProcesses: Array<number> = healthData.blockedprocesses;
     const sleepingProcesses: Array<number> = healthData.sleepingprocesses;
 
+    const [solo, setSolo] = useState<SoloStyles | null>(null);
+
+    setInterval(() => {
+      if (solo != soloStyle) {
+        setSolo(soloStyle);
+      }
+    }, 20);
+
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
     return (
       <Plot
         data={[
@@ -45,8 +65,7 @@ const ProcessesChart = React.memo(() => {
         ]}
         layout={{
           title: 'Process Overview',
-          height: 300,
-          width: 300,
+          ...sizeSwitch,
           font: {
             color: '#444d56',
             size: 11.5,
@@ -59,17 +78,17 @@ const ProcessesChart = React.memo(() => {
             xanchor: 'center',
             x: 0.5,
             y: -1.0,
-          font: {
-            size: 9
-          }
+            font: {
+              size: 9,
+            },
           },
           xaxis: {
             dtick: 10,
             title: 'Time Elapsed (min)',
           },
           yaxis: {
-            title: 'Number of Processes'
-          }
+            title: 'Number of Processes',
+          },
         }}
       />
     );

app/charts/SpeedChart.tsx

@@ -1,18 +1,38 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import Plot from 'react-plotly.js';
 import { HealthContext } from '../context/HealthContext';
 import moment from 'moment';
+import { all, solo as soloStyle } from './sizeSwitch';
 
-const SpeedChart = React.memo(() => {
+interface GraphsContainerProps {
+  sizing: string;
+}
+interface SoloStyles {
+  height: number;
+  width: number;
+}
+
+const SpeedChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
   const { time, cpuspeed } = healthData;
   const yAxis = cpuspeed;
+
+  const [solo, setSolo] = useState<SoloStyles | null>(null);
+
+  setInterval(() => {
+    if (solo != soloStyle) {
+      setSolo(soloStyle);
+    }
+  }, 20);
+
   const createChart = () => {
     let timeArr;
     if (time !== undefined) {
       timeArr = time.map((el: any) => moment(el).format('hh:mm A'));
     }
 
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
     return (
       <Plot
         data={[
@@ -23,14 +43,13 @@ const SpeedChart = React.memo(() => {
             type: 'scatter',
             mode: 'lines+markers',
             marker: {
-              color: '#3788fc'
+              color: '#3788fc',
             },
           },
         ]}
         layout={{
           title: 'Speed Chart',
-          height: 300,
-          width: 300,
+          ...sizeSwitch,
           font: {
             color: '#444d56',
             size: 11.5,
@@ -66,7 +85,7 @@ const SpeedChart = React.memo(() => {
     );
   };
 
-  return <div className="chart">{createChart()}</div>;
+  return <div className="chart">{solo && createChart()}</div>;
 });
 
 export default SpeedChart;

app/charts/TemperatureChart.tsx

@@ -1,9 +1,19 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState, useEffect } from 'react';
 import Plot from 'react-plotly.js';
 import moment from 'moment';
 import { HealthContext } from '../context/HealthContext';
+import { all, solo as soloStyle } from './sizeSwitch';
 
-const TemperatureChart = React.memo(() => {
+interface GraphsContainerProps {
+  sizing: string;
+}
+
+interface SoloStyles {
+  height: number;
+  width: number;
+}
+
+const TemperatureChart: React.FC<GraphsContainerProps> = React.memo(({ sizing }) => {
   const { healthData } = useContext(HealthContext);
   const { time, cputemp } = healthData;
 
@@ -16,6 +26,16 @@ const TemperatureChart = React.memo(() => {
       month = moment(time[0]).format('MMM Do');
     }
 
+    const [solo, setSolo] = useState<SoloStyles | null>(null);
+
+    setInterval(() => {
+      if (solo != soloStyle) {
+        setSolo(soloStyle);
+      }
+    }, 20);
+
+    const sizeSwitch = sizing === 'all' ? all : solo;
+
     return (
       <Plot
         data={[
@@ -33,8 +53,7 @@ const TemperatureChart = React.memo(() => {
         config={{ responsive: true }}
         layout={{
           title: 'CPU Temperature',
-          height: 300,
-          width: 300,
+          ...sizeSwitch,
           font: {
             color: '#444d56',
             size: 11.5,

app/charts/sizeSwitch.js

@@ -0,0 +1,21 @@
+console.log(window.innerWidth);
+
+let soloWidth = window.innerWidth > 800 ? 800 : window.innerWidth - 270;
+
+window.addEventListener('resize', () => {
+  soloWidth = window.innerWidth > 800 ? 800 : window.innerWidth - 270;
+  solo = {
+    ...solo,
+    width: soloWidth,
+  };
+});
+
+export const all = {
+  height: 300,
+  width: 300,
+};
+
+export let solo = {
+  height: 600,
+  width: soloWidth,
+};