feat(gui): add ability to use db connection on client side (#402)

* fix(gui): serve static files from "reportPath" in config

* fix: show notification if something fail on open report

* feat(gui): add ability to use db connection on client side

Author: DudaGod

lib/gui/server.js

@@ -9,7 +9,6 @@ const {INTERNAL_SERVER_ERROR, OK} = require('http-codes');
 
 const App = require('./app');
 const {MAX_REQUEST_SIZE, KEEP_ALIVE_TIMEOUT, HEADERS_TIMEOUT} = require('./constants/server');
-const {IMAGES_PATH, ERROR_DETAILS_PATH} = require('../constants/paths');
 const {logger, initializeCustomGui, runCustomGuiAction} = require('../server-utils');
 const initPluginsRoutes = require('./routes/plugins');
 
@@ -26,9 +25,7 @@ exports.start = async ({paths, hermione, guiApi, configs}) => {
     server.use(initPluginsRoutes(express.Router(), pluginConfig));
 
     server.use(express.static(path.join(__dirname, '../static'), {index: 'gui.html'}));
-    server.use(express.static(process.cwd()));
-    server.use(`/${IMAGES_PATH}`, express.static(path.join(process.cwd(), pluginConfig.path, IMAGES_PATH)));
-    server.use(`/${ERROR_DETAILS_PATH}`, express.static(path.join(process.cwd(), pluginConfig.path, ERROR_DETAILS_PATH)));
+    server.use(express.static(path.join(process.cwd(), pluginConfig.path)));
 
     server.get('/', (req, res) => res.sendFile(path.join(__dirname, '../static', 'gui.html')));
 

lib/static/components/gui.js

@@ -30,6 +30,10 @@ class Gui extends Component {
         this._subscribeToEvents();
     }
 
+    componentWillUnmount() {
+        this.props.actions.finGuiReport();
+    }
+
     _subscribeToEvents() {
         const {actions} = this.props;
         const eventSource = new EventSource('/events');
@@ -60,7 +64,12 @@ class Gui extends Component {
         const {allRootSuiteIds, loading, customScripts} = this.props;
 
         if (!allRootSuiteIds.length) {
-            return (<Loading active={true} />);
+            return (
+                <Fragment>
+                    <Notifications theme={wybo}/>
+                    <Loading active={true} />
+                </Fragment>
+            );
         }
 
         return (

lib/static/components/report.js

@@ -34,7 +34,12 @@ class Report extends Component {
         const {allRootSuiteIds, fetchDbDetails} = this.props;
 
         if (!allRootSuiteIds.length && !fetchDbDetails.length) {
-            return (<Loading active={true} />);
+            return (
+                <Fragment>
+                    <Notifications theme={wybo}/>
+                    <Loading active={true} />
+                </Fragment>
+            );
         }
 
         return (

lib/static/modules/action-names.js

@@ -3,6 +3,7 @@
 export default {
     INIT_GUI_REPORT: 'INIT_GUI_REPORT',
     INIT_STATIC_REPORT: 'INIT_STATIC_REPORT',
+    FIN_GUI_REPORT: 'FIN_GUI_REPORT',
     FIN_STATIC_REPORT: 'FIN_STATIC_REPORT',
     RUN_ALL_TESTS: 'RUN_ALL_TESTS',
     RUN_FAILED_TESTS: 'RUN_FAILED_TESTS',

lib/static/modules/actions.js

@@ -5,8 +5,9 @@ import StaticTestsTreeBuilder from '../../tests-tree-builder/static';
 import actionNames from './action-names';
 import {types as modalTypes} from '../components/modals';
 import {QUEUED} from '../../constants/test-statuses';
+import {LOCAL_DATABASE_NAME} from '../../constants/file-names';
 import {getHttpErrorMessage} from './utils';
-import {fetchDatabases, mergeDatabases} from './sqlite';
+import {fetchDatabases, mergeDatabases, connectToDatabase} from './sqlite';
 import {getSuitesTableRows} from './database-utils';
 import {setFilteredBrowsers} from './query-params';
 import plugins from './plugins';
@@ -22,11 +23,14 @@ export const initGuiReport = () => {
         try {
             const appState = await axios.get('/init');
 
+            const mainDatabaseUrl = new URL(LOCAL_DATABASE_NAME, window.location.href);
+            const db = await connectToDatabase(mainDatabaseUrl.href);
+
             await plugins.loadAll(appState.data.config);
 
             dispatch({
                 type: actionNames.INIT_GUI_REPORT,
-                payload: appState.data
+                payload: {...appState.data, db}
             });
 
             const {customGuiError} = appState.data;
@@ -80,6 +84,7 @@ export const initStaticReport = () => {
     };
 };
 
+export const finGuiReport = () => ({type: actionNames.FIN_GUI_REPORT});
 export const finStaticReport = () => ({type: actionNames.FIN_STATIC_REPORT});
 
 const runTests = ({tests = [], action = {}} = {}) => {

lib/static/modules/reducers/db.js

@@ -3,12 +3,14 @@ import actionNames from '../action-names';
 
 export default (state, action) => {
     switch (action.type) {
-        case actionNames.INIT_STATIC_REPORT: {
+        case actionNames.INIT_STATIC_REPORT:
+        case actionNames.INIT_GUI_REPORT: {
             const {db} = action.payload;
             return {...state, db};
         }
 
-        case actionNames.FIN_STATIC_REPORT: {
+        case actionNames.FIN_STATIC_REPORT:
+        case actionNames.FIN_GUI_REPORT: {
             closeDatabase(state.db);
 
             return state;

lib/static/modules/sqlite.js

@@ -135,7 +135,18 @@ async function mergeDatabases(dataForDbs) {
     return mergedDbConnection;
 }
 
+async function connectToDatabase(dbUrl) {
+    const mainDatabaseUrl = new URL(dbUrl);
+    const {data} = await fetchFile(mainDatabaseUrl.href, {
+        responseType: 'arraybuffer'
+    });
+
+    const SQL = await window.initSqlJs();
+    return new SQL.Database(new Uint8Array(data));
+}
+
 module.exports = {
     fetchDatabases,
-    mergeDatabases
+    mergeDatabases,
+    connectToDatabase
 };

test/unit/lib/static/modules/actions.js

@@ -3,16 +3,18 @@ import proxyquire from 'proxyquire';
 import {acceptOpened, retryTest, runFailedTests} from 'lib/static/modules/actions';
 import actionNames from 'lib/static/modules/action-names';
 import StaticTestsTreeBuilder from 'lib/tests-tree-builder/static';
+import {LOCAL_DATABASE_NAME} from 'lib/constants/file-names';
 
 describe('lib/static/modules/actions', () => {
     const sandbox = sinon.sandbox.create();
-    let dispatch, actions, addNotification, getSuitesTableRows, pluginsStub;
+    let dispatch, actions, addNotification, getSuitesTableRows, connectToDatabaseStub, pluginsStub;
 
     beforeEach(() => {
         dispatch = sandbox.stub();
         sandbox.stub(axios, 'post').resolves({data: {}});
         addNotification = sandbox.stub();
         getSuitesTableRows = sandbox.stub();
+        connectToDatabaseStub = sandbox.stub().resolves({});
         pluginsStub = {loadAll: sandbox.stub()};
 
         sandbox.stub(StaticTestsTreeBuilder, 'create').returns(Object.create(StaticTestsTreeBuilder.prototype));
@@ -21,31 +23,57 @@ describe('lib/static/modules/actions', () => {
         actions = proxyquire('lib/static/modules/actions', {
             'reapop': {addNotification},
             './database-utils': {getSuitesTableRows},
+            './sqlite': {connectToDatabase: connectToDatabaseStub},
             './plugins': pluginsStub
         });
     });
 
     afterEach(() => sandbox.restore());
 
     describe('initGuiReport', () => {
-        it('should run init action on server', async () => {
+        beforeEach(() => {
             sandbox.stub(axios, 'get').resolves({data: {}});
 
+            global.window = {
+                location: {
+                    href: 'http://localhost/random/path.html'
+                }
+            };
+        });
+
+        afterEach(() => {
+            global.window = undefined;
+        });
+
+        it('should run init action on server', async () => {
             await actions.initGuiReport()(dispatch);
 
             assert.calledOnceWith(axios.get, '/init');
         });
 
-        it('should dispatch "INIT_GUI_REPORT" action', async () => {
-            sandbox.stub(axios, 'get').resolves({data: 'some-data'});
+        it('should fetch database from default html page', async () => {
+            global.window.location.href = 'http://127.0.0.1:8080/';
 
             await actions.initGuiReport()(dispatch);
 
-            assert.calledOnceWith(dispatch, {type: actionNames.INIT_GUI_REPORT, payload: 'some-data'});
+            assert.calledOnceWith(connectToDatabaseStub, `http://127.0.0.1:8080/${LOCAL_DATABASE_NAME}`);
+        });
+
+        it('should dispatch "INIT_GUI_REPORT" action with data from "/init" route and connection to db', async () => {
+            const db = {};
+            connectToDatabaseStub.resolves(db);
+            axios.get.resolves({data: {some: 'data'}});
+
+            await actions.initGuiReport()(dispatch);
+
+            assert.calledOnceWith(dispatch, {
+                type: actionNames.INIT_GUI_REPORT,
+                payload: {some: 'data', db}
+            });
         });
 
         it('should show notification if error in initialization on the server is happened', async () => {
-            sandbox.stub(axios, 'get').throws(new Error('failed to initialize custom gui'));
+            axios.get.rejects(new Error('failed to initialize custom gui'));
 
             await actions.initGuiReport()(dispatch);
 
@@ -62,7 +90,7 @@ describe('lib/static/modules/actions', () => {
 
         it('should init plugins with the config from /init route', async () => {
             const config = {pluginsEnabled: true, plugins: []};
-            sandbox.stub(axios, 'get').withArgs('/init').resolves({data: {config}});
+            axios.get.withArgs('/init').resolves({data: {config}});
 
             await actions.initGuiReport()(dispatch);
 

test/unit/lib/static/modules/sqlite.js

@@ -5,19 +5,20 @@ import * as _ from 'lodash';
 
 import {
     fetchDatabases,
-    mergeDatabases
+    mergeDatabases,
+    connectToDatabase
 } from 'lib/static/modules/sqlite';
 
 describe('lib/static/modules/sqlite', () => {
     const sandbox = sinon.sandbox.create();
 
-    describe('fetchDatabases', () => {
-        beforeEach(() => {
-            sandbox.stub(axios, 'get').resolves();
-        });
+    beforeEach(() => {
+        sandbox.stub(axios, 'get').resolves();
+    });
 
-        afterEach(() => sandbox.restore());
+    afterEach(() => sandbox.restore());
 
+    describe('fetchDatabases', () => {
         it('should return empty arrays if dbUrls.json not contain useful data', async () => {
             axios.get.resolves({
                 status: 200,
@@ -182,56 +183,80 @@ describe('lib/static/modules/sqlite', () => {
 
         afterEach(() => {
             global.window = undefined;
-            sandbox.restore();
         });
 
-        describe('mergeDatabases', () => {
-            it('should return null if dataForDbs is empty', async () => {
-                const mergedDbConnection = await mergeDatabases([]);
+        it('should return null if dataForDbs is empty', async () => {
+            const mergedDbConnection = await mergeDatabases([]);
 
-                assert.equal(mergedDbConnection, null);
-            });
+            assert.equal(mergedDbConnection, null);
+        });
 
-            it('should not create unnecessary databases if dataForDbs contain data for single db', async () => {
-                const data = new ArrayBuffer(1);
+        it('should not create unnecessary databases if dataForDbs contain data for single db', async () => {
+            const data = new ArrayBuffer(1);
 
-                const mergedDbConnection = await mergeDatabases([data]);
+            const mergedDbConnection = await mergeDatabases([data]);
 
-                assert.instanceOf(mergedDbConnection, SQL.Database);
-                assert.calledOnceWith(DatabaseConstructorSpy, new Uint8Array(1));
-                assert.notCalled(SQL.Database.prototype.run);
-                assert.notCalled(SQL.Database.prototype.close);
-            });
+            assert.instanceOf(mergedDbConnection, SQL.Database);
+            assert.calledOnceWith(DatabaseConstructorSpy, new Uint8Array(1));
+            assert.notCalled(SQL.Database.prototype.run);
+            assert.notCalled(SQL.Database.prototype.close);
+        });
 
-            it('should merge several chunk databases into one', async () => {
-                const chunkSize1 = 1;
-                const chunkSize2 = 2;
-                const sumOfChunkSizes = chunkSize1 + chunkSize2;
-                const data1 = new ArrayBuffer(chunkSize1);
-                const data2 = new ArrayBuffer(chunkSize2);
-
-                const mergedDbConnection = await mergeDatabases([data1, data2]);
-
-                assert.instanceOf(mergedDbConnection, SQL.Database);
-                assert.calledThrice(DatabaseConstructorSpy);
-                assert.calledWith(DatabaseConstructorSpy, new Uint8Array(chunkSize1));
-                assert.calledWith(DatabaseConstructorSpy, new Uint8Array(chunkSize2));
-                assert.calledWith(DatabaseConstructorSpy, undefined, sumOfChunkSizes);
-                assert.calledTwice(SQL.Database.prototype.close);
-            });
+        it('should merge several chunk databases into one', async () => {
+            const chunkSize1 = 1;
+            const chunkSize2 = 2;
+            const sumOfChunkSizes = chunkSize1 + chunkSize2;
+            const data1 = new ArrayBuffer(chunkSize1);
+            const data2 = new ArrayBuffer(chunkSize2);
+
+            const mergedDbConnection = await mergeDatabases([data1, data2]);
+
+            assert.instanceOf(mergedDbConnection, SQL.Database);
+            assert.calledThrice(DatabaseConstructorSpy);
+            assert.calledWith(DatabaseConstructorSpy, new Uint8Array(chunkSize1));
+            assert.calledWith(DatabaseConstructorSpy, new Uint8Array(chunkSize2));
+            assert.calledWith(DatabaseConstructorSpy, undefined, sumOfChunkSizes);
+            assert.calledTwice(SQL.Database.prototype.close);
+        });
 
-            it('should merge both "suites" tables', async () => {
-                const data1 = new ArrayBuffer(1);
-                const data2 = new ArrayBuffer(1);
+        it('should merge both "suites" tables', async () => {
+            const data1 = new ArrayBuffer(1);
+            const data2 = new ArrayBuffer(1);
 
-                await mergeDatabases([data1, data2]);
+            await mergeDatabases([data1, data2]);
 
-                const rawQueries = _
-                    .flatten(SQL.Database.prototype.run.args)
-                    .join(' ');
+            const rawQueries = _
+                .flatten(SQL.Database.prototype.run.args)
+                .join(' ');
 
-                assert.include(rawQueries, 'suites');
-            });
+            assert.include(rawQueries, 'suites');
+        });
+    });
+
+    describe('connectToDatabase', () => {
+        let SQL, Database;
+
+        beforeEach(() => {
+            Database = function Database() {};
+            SQL = {Database};
+
+            global.window = {
+                initSqlJs: sandbox.stub().resolves(SQL)
+            };
+        });
+
+        afterEach(() => {
+            global.window = undefined;
+        });
+
+        it('should return connection to database', async () => {
+            axios.get
+                .withArgs('http://127.0.0.1:8080/sqlite.db', {responseType: 'arraybuffer'})
+                .resolves({status: 200, data: 'stub buffer'});
+
+            const db = await connectToDatabase('http://127.0.0.1:8080/sqlite.db');
+
+            assert.instanceOf(db, Database);
         });
     });
 });

webpack.common.js

@@ -67,6 +67,11 @@ module.exports = {
             filename: 'gui.html',
             template: 'template.html',
             chunks: ['gui']
+        }),
+        new HtmlWebpackIncludeAssetsPlugin({
+            files: ['gui.html'],
+            assets: ['sql-wasm.js'],
+            append: false
         })
     ]
 };