fix(web/RunsTable): Remove populate='metrics' from db query (#64)

perf: Remove populate='metrics' from db query to decrease memory usage. fixes #47.
vivekratnavel · Mar 6, 2019 · ad9fe4d · ad9fe4d
1 parent bccdc4f
commit ad9fe4d
Show file tree

Hide file tree

Showing 16 changed files with 87,887 additions and 90,217 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,7 +5,6 @@ cache:
   - web/node_modules
 node_js:
 - '8'
-- '9'
 - '10'
 sudo: false
 script:

diff --git a/web/config/jest/jestSetup.js b/web/config/jest/jestSetup.js
@@ -1,6 +1,5 @@
 import Enzyme, { shallow, render, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { LocalStorageMock } from './localStorageMock';
 
 // React 16 Enzyme adapter
 Enzyme.configure({ adapter: new Adapter() });
@@ -28,5 +27,3 @@ const noOp = () => {};
 if (typeof window.URL.createObjectURL === 'undefined') {
   Object.defineProperty(window.URL, 'createObjectURL', { value: noOp})
 }
-
-global.localStorage = new LocalStorageMock;
diff --git a/web/config/jest/localStorageMock.js b/web/config/jest/localStorageMock.js
diff --git a/web/package.json b/web/package.json
@@ -40,7 +40,7 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "ify-loader": "^1.1.0",
-    "jest": "20.0.4",
+    "jest": "^24.1.0",
     "ms": "^2.1.1",
     "object-assign": "4.1.1",
     "plotly.js": "^1.33.1",
@@ -98,7 +98,9 @@
     ],
     "setupFiles": [
       "<rootDir>/config/polyfills.js",
-      "<rootDir>/config/jest/jestSetup.js"
+      "<rootDir>/config/jest/jestSetup.js",
+      "jest-canvas-mock",
+      "jest-localstorage-mock"
     ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
@@ -149,7 +151,9 @@
     "enzyme": "^3.4.4",
     "enzyme-adapter-react-16": "^1.2.0",
     "enzyme-to-json": "^3.3.4",
+    "jest-canvas-mock": "^2.0.0-alpha.3",
     "jest-fetch-mock": "^2.1.1",
+    "jest-localstorage-mock": "^2.4.0",
     "jest-mock-axios": "^2.1.11",
     "node-sass": "^4.7.2",
     "react-hot-loader": "^4.0.0-beta.21",

diff --git a/web/src/components/App/index.test.js b/web/src/components/App/index.test.js
@@ -16,20 +16,29 @@ describe('App component', () => {
   afterEach(() => {
     mockAxios.reset();
     jest.clearAllMocks();
+    // reset localStorage
+    localStorage.clear();
   });
 
   it('should render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should reset cache', () => {
+    // mock location.reload method
+    Object.defineProperty(window.location, 'reload', {
+      configurable: true,
+    });
+    window.location.reload = jest.fn();
+
     const value = 'testValue';
     localStorage.setItem('test', value);
 
-    expect(localStorage.getAllItems()['test']).toEqual(value);
+    expect(localStorage.__STORE__['test']).toEqual(value);
     wrapper.find('[test-attr="reset-cache-button"]').simulate('click');
 
-    expect(Object.keys(localStorage.getAllItems())).toHaveLength(0);
+    expect(Object.keys(localStorage.__STORE__)).toHaveLength(0);
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
   });
 
   it('should show/hide ManageConfigColumns modal', () => {
@@ -56,4 +65,4 @@ describe('App component', () => {
       expect(toast.error).toHaveBeenCalledWith(parseServerError(error));
     });
   });
-});
+});
diff --git a/web/src/components/CapturedOutView/__snapshots__/capturedOutView.test.js.snap b/web/src/components/CapturedOutView/__snapshots__/capturedOutView.test.js.snap
@@ -40,9 +40,9 @@ exports[`CapturedOutView should load data success 1`] = `
     </div>
     <pre>
       INFO - hello_config
-      Progress: 0/100
-      Progress: 1/100
-      
+Progress: 0/100
+Progress: 1/100
+
     </pre>
   </div>
 </CapturedOutView>

diff --git a/web/src/components/ConfigColumnModal/__snapshots__/configColumnModal.test.js.snap b/web/src/components/ConfigColumnModal/__snapshots__/configColumnModal.test.js.snap
@@ -21,7 +21,7 @@ exports[`ConfigColumnModal should render correctly 1`] = `
       "remove": [Function],
     }
   }
-  onHide={[Function]}
+  onHide={[MockFunction]}
   renderBackdrop={[Function]}
   restoreFocus={true}
   show={true}
@@ -87,7 +87,7 @@ exports[`ConfigColumnModal should render correctly 1`] = `
       bsClass="btn"
       bsStyle="default"
       disabled={false}
-      onClick={[Function]}
+      onClick={[MockFunction]}
       test-attr="close-btn"
     >
       Close
@@ -130,7 +130,7 @@ exports[`ConfigColumnModal should render correctly 2`] = `
       "remove": [Function],
     }
   }
-  onHide={[Function]}
+  onHide={[MockFunction]}
   renderBackdrop={[Function]}
   restoreFocus={true}
   show={true}
@@ -416,7 +416,7 @@ exports[`ConfigColumnModal should render correctly 2`] = `
       bsClass="btn"
       bsStyle="default"
       disabled={false}
-      onClick={[Function]}
+      onClick={[MockFunction]}
       test-attr="close-btn"
     >
       Close

diff --git a/web/src/components/Helpers/__snapshots__/cells.test.js.snap b/web/src/components/Helpers/__snapshots__/cells.test.js.snap
@@ -2,7 +2,21 @@
 
 exports[`Cells Editable Cell should render correctly 1`] = `
 <EditableCell
-  changeHandler={[Function]}
+  changeHandler={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          1,
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
   columnKey="col_1"
   data={
     DataListWrapper {
@@ -95,7 +109,7 @@ exports[`Cells Editable Cell should render correctly 1`] = `
 
 exports[`Cells Expand Row Cell should render correctly 1`] = `
 <ExpandRowCell
-  callback={[Function]}
+  callback={[MockFunction]}
   rowIndex={1}
 >
   <FixedDataTableCellDefault
@@ -168,7 +182,7 @@ exports[`Cells Id Cell should render correctly 1`] = `
       ],
     }
   }
-  handleDataUpdate={[Function]}
+  handleDataUpdate={[MockFunction]}
   rowIndex={1}
 >
   <div>
@@ -304,7 +318,21 @@ exports[`Cells Select Cell should render correctly 1`] = `
     ]
   }
   rowIndex={0}
-  tagChangeHandler={[Function]}
+  tagChangeHandler={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          0,
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
 >
   <FixedDataTableCellDefault>
     <div
@@ -2035,7 +2063,42 @@ exports[`Cells Select Cell should render select without options and data 1`] = `
   }
   options={Array []}
   rowIndex={0}
-  tagChangeHandler={[Function]}
+  tagChangeHandler={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          0,
+        ],
+        Array [
+          0,
+        ],
+        Array [
+          0,
+        ],
+        Array [
+          0,
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
 >
   <FixedDataTableCellDefault>
     <div

diff --git a/web/src/components/MetricColumnModal/__snapshots__/metricColumnModal.test.js.snap b/web/src/components/MetricColumnModal/__snapshots__/metricColumnModal.test.js.snap
@@ -21,7 +21,7 @@ exports[`MetricColumnModal should render correctly 1`] = `
       "remove": [Function],
     }
   }
-  onHide={[Function]}
+  onHide={[MockFunction]}
   renderBackdrop={[Function]}
   restoreFocus={true}
   show={true}
@@ -87,7 +87,7 @@ exports[`MetricColumnModal should render correctly 1`] = `
       bsClass="btn"
       bsStyle="default"
       disabled={false}
-      onClick={[Function]}
+      onClick={[MockFunction]}
       test-attr="close-btn"
     >
       Close
@@ -130,7 +130,7 @@ exports[`MetricColumnModal should render correctly 2`] = `
       "remove": [Function],
     }
   }
-  onHide={[Function]}
+  onHide={[MockFunction]}
   renderBackdrop={[Function]}
   restoreFocus={true}
   show={true}
@@ -405,7 +405,7 @@ exports[`MetricColumnModal should render correctly 2`] = `
       bsClass="btn"
       bsStyle="default"
       disabled={false}
-      onClick={[Function]}
+      onClick={[MockFunction]}
       test-attr="close-btn"
     >
       Close

diff --git a/web/src/components/MetricsPlotView/metricsPlotView.test.js b/web/src/components/MetricsPlotView/metricsPlotView.test.js
@@ -3,7 +3,6 @@ import { MetricsPlotView } from './metricsPlotView';
 import mockAxios from 'jest-mock-axios';
 import {X_AXIS_VALUE, SCALE_VALUE, X_AXIS_VALUES, SCALE_VALUES} from '../../constants/drillDownView.constants';
 import keyCode from 'rc-util/lib/KeyCode';
-import { LocalStorageMock } from '../../../config/jest/localStorageMock';
 
 describe('MetricsPlotView', () => {
   let wrapper = null;
@@ -42,8 +41,7 @@ describe('MetricsPlotView', () => {
   });
 
   it('should set default selection correctly', () => {
-    /* eslint-disable no-global-assign */
-    localStorage = {getItem: () => '{"selectedMetricNames": ["pretrain.val.loss", "invalid"], "selectedXAxis": "time", "selectedYAxis": "linear", "plotWidth": 900, "plotHeight": 450}'};
+    localStorage.getItem.mockImplementationOnce(() => '{"selectedMetricNames": ["pretrain.val.loss", "invalid"], "selectedXAxis": "time", "selectedYAxis": "linear", "plotWidth": 900, "plotHeight": 450}');
     wrapper.instance()._setDefaultSelection();
 
     expect(wrapper.state().selectedMetricNames).toHaveLength(1);
@@ -52,7 +50,7 @@ describe('MetricsPlotView', () => {
     expect(wrapper.state().plotWidth).toEqual(900);
     expect(wrapper.state().plotHeight).toEqual(450);
 
-    localStorage = {getItem: () => '{}'};
+    localStorage.getItem.mockImplementationOnce(() => '{}');
     wrapper.instance()._setDefaultSelection();
 
     expect(wrapper.state().selectedMetricNames).toHaveLength(0);
@@ -61,7 +59,7 @@ describe('MetricsPlotView', () => {
     expect(wrapper.state().plotWidth).toEqual(800);
     expect(wrapper.state().plotHeight).toEqual(400);
     // reset localStorage
-    localStorage = new LocalStorageMock;
+    localStorage.clear();
   });
 
   it('should show alert when no metrics are available', () => {