/node_modules/'],
35 |
36 | // Indicates whether each individual test should be reported during the run
37 | verbose: true,
38 | };
39 |
--------------------------------------------------------------------------------
/frontend/config/paths.js:
--------------------------------------------------------------------------------
1 | // paths.js
2 |
3 | // Paths will export some path variables that we'll
4 | // use in other Webpack config and server files
5 |
6 | const path = require('path');
7 | const fs = require('fs');
8 |
9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 |
12 | module.exports = {
13 | appAssets: resolveApp('src/assets'), // For images and other assets
14 | appBuild: resolveApp('build'), // Prod built files end up here
15 | appConfig: resolveApp('config'), // App config files
16 | appHtml: resolveApp('src/index.html'),
17 | appIndexJs: resolveApp('src/index.jsx'), // Main entry point
18 | appSrc: resolveApp('src'), // App source
19 | };
20 |
--------------------------------------------------------------------------------
/frontend/config/webpack-common-config.js:
--------------------------------------------------------------------------------
1 | // webpack-common-config.js
2 |
3 | // This file will contain configuration data that
4 | // is shared between development and production builds.
5 |
6 | const HtmlWebpackPlugin = require('html-webpack-plugin');
7 | const webpack = require('webpack');
8 | const path = require('path');
9 |
10 | const paths = require('./paths');
11 |
12 | module.exports = {
13 | plugins: [
14 | new HtmlWebpackPlugin({
15 | inject: true,
16 | template: paths.appHtml,
17 | }),
18 | new webpack.DefinePlugin({
19 | 'process.env.GRAPH_HOST': JSON.stringify(process.env.GRAPH_HOST),
20 | 'process.env.ELASTICSEARCH_HOST': JSON.stringify(
21 | process.env.ELASTICSEARCH_HOST,
22 | ),
23 | 'process.env.ELASTICSEARCH_PROTOCOL': JSON.stringify(
24 | process.env.ELASTICSEARCH_PROTOCOL,
25 | ),
26 | 'process.env.ELASTICSEARCH_PORT': JSON.stringify(
27 | process.env.ELASTICSEARCH_PORT,
28 | ),
29 | }),
30 | ],
31 | resolve: {
32 | // File extensions. Add others and needed (e.g. scss, json)
33 | extensions: ['.js', '.jsx', '.scss', '.css'],
34 | modules: ['node_modules'],
35 | // Aliases help with shortening relative paths
36 | // 'Components/button' === '../../../components/button'
37 | alias: {
38 | Actions: path.resolve(paths.appSrc, 'actions'),
39 | Components: path.resolve(paths.appSrc, 'components'),
40 | Constants: path.resolve(paths.appSrc, 'constants'),
41 | Containers: path.resolve(paths.appSrc, 'containers'),
42 | Store: path.resolve(paths.appSrc, 'store'),
43 | Styles: path.resolve(paths.appSrc, 'styles'),
44 | Utils: path.resolve(paths.appSrc, 'utils'),
45 | },
46 | },
47 | module: {
48 | rules: [
49 | {
50 | test: /\.(png|svg|jpg)$/,
51 | use: ['file-loader'],
52 | },
53 | ],
54 | },
55 | devServer: {
56 | historyApiFallback: true,
57 | },
58 | };
59 |
--------------------------------------------------------------------------------
/frontend/config/webpack-dev-config.js:
--------------------------------------------------------------------------------
1 | // webpack-dev-config.js
2 |
3 | // configuration data related to development only
4 | const path = require('path');
5 | const webpack = require('webpack');
6 | const merge = require('webpack-merge');
7 | const paths = require('./paths');
8 |
9 | require('dotenv').config({
10 | path: path.join(__dirname, '.env.dev'),
11 | });
12 |
13 | // import common webpack config
14 | const common = require('./webpack-common-config');
15 | module.exports = merge(common, {
16 | entry: [paths.appIndexJs],
17 | mode: 'development',
18 | // devtool option controls if and how source maps are generated.
19 | // see https://webpack.js.org/configuration/devtool/
20 | // If you find that you need more control of source map generation,
21 | // see https://webpack.js.org/plugins/source-map-dev-tool-plugin/
22 | devtool: 'eval',
23 | plugins: [
24 | new webpack.HotModuleReplacementPlugin(),
25 | //new webpack.NamedModulesPlugin(),
26 | new webpack.DefinePlugin({
27 | 'process.env.NODE_ENV': JSON.stringify('development'),
28 | }),
29 | ],
30 | module: {
31 | rules: [
32 | {
33 | // look for .js or .jsx files
34 | test: /\.(js|jsx)$/,
35 | // in the `src` directory
36 | include: path.resolve(paths.appSrc),
37 | exclude: /(node_modules)/,
38 | use: {
39 | // use babel for transpiling JavaScript files
40 | loader: 'babel-loader',
41 | options: {
42 | presets: ['@babel/react'],
43 | },
44 | },
45 | },
46 | {
47 | // look for .css or .scss files
48 | test: /\.(css|scss)$/,
49 | // in the `src` directory
50 | include: [path.resolve(paths.appSrc), /node_modules/],
51 | use: [
52 | {
53 | loader: 'style-loader',
54 | },
55 | {
56 | loader: 'css-loader',
57 | options: {
58 | modules: false,
59 | },
60 | },
61 | {
62 | loader: 'sass-loader',
63 | options: {
64 | sourceMap: true,
65 | },
66 | },
67 | ],
68 | },
69 | ],
70 | },
71 | });
72 |
--------------------------------------------------------------------------------
/frontend/config/webpack-dev-server.js:
--------------------------------------------------------------------------------
1 | // webpack-dev-server.js
2 |
3 | // dev-server is responsible for running your project locally
4 |
5 | const WebpackDevServer = require("webpack-dev-server");
6 | const webpack = require("webpack");
7 | const paths = require("./paths");
8 | const config = require("./webpack-dev-config.js");
9 |
10 | // Change port to suit your preference
11 | const Port = 3000;
12 | const Host = "0.0.0.0";
13 |
14 | const options = {
15 | host: Host,
16 | // Enable webpack's Hot Module Replacement feature
17 | hot: true,
18 | // full-screen overlay in the browser for compiler errors or warnings
19 | overlay: {
20 | warnings: false,
21 | errors: true
22 | },
23 | // Show errors and warnings in console
24 | quiet: false,
25 | // Hide the build info
26 | noInfo: false,
27 | // Tell the server where to serve static files from.
28 | // Set this is the `paths.js` file.
29 | contentBase: paths.appAssets,
30 | // If static content changes, reload the page.
31 | // In other words, editing a photo within the assets
32 | // directory will force the page to reload.
33 | watchContentBase: true,
34 | after() {
35 | process.stdout.write(`dev server is running: http://${Host}:${Port}\n`);
36 | }
37 | };
38 |
39 | WebpackDevServer.addDevServerEntrypoints(config, options);
40 | const compiler = webpack(config);
41 | const server = new WebpackDevServer(compiler, options);
42 |
43 | server.listen(Port, Host, () => {});
44 |
--------------------------------------------------------------------------------
/frontend/config/webpack-prod-config.js:
--------------------------------------------------------------------------------
1 | // webpack-prod-config.js
2 |
3 | // contains configuration data related to prod build
4 |
5 | const path = require('path');
6 |
7 | const webpack = require('webpack');
8 | const merge = require('webpack-merge');
9 | const TerserPlugin = require('terser-webpack-plugin');
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
11 |
12 | const paths = require('./paths');
13 | const common = require('./webpack-common-config.js');
14 |
15 | module.exports = merge(common, {
16 | entry: {
17 | // Split vendor code into separate bundles
18 | vendor: ['react'],
19 | app: paths.appIndexJs,
20 | },
21 | mode: 'production',
22 | // Set the name of our JS bundle using a chuckhash
23 | // (e.g. '5124f5efa5436b5b5e7d_app.js')
24 | // Location where built files will go.
25 | output: {
26 | filename: '[chunkhash]_[name].js',
27 | path: paths.appBuild,
28 | publicPath: '/',
29 | },
30 | optimization: {
31 | minimizer: [new TerserPlugin()],
32 | },
33 | plugins: [
34 | // Set process.env.NODE_ENV to production
35 | new webpack.DefinePlugin({
36 | 'process.env': {
37 | NODE_ENV: JSON.stringify('production'),
38 | },
39 | }),
40 | // Extract text/(s)css from a bundle, or bundles, into a separate file.
41 | new ExtractTextPlugin('styles.css'),
42 | ],
43 | module: {
44 | rules: [
45 | {
46 | // look for .js or .jsx files
47 | test: /\.(js|jsx)$/,
48 | // in the `src` directory
49 | include: path.resolve(paths.appSrc),
50 | exclude: /node_modules/,
51 | use: {
52 | // use babel for transpiling JavaScript files
53 | loader: 'babel-loader',
54 | options: {
55 | presets: ['@babel/react'],
56 | },
57 | },
58 | },
59 | {
60 | // look for .css or .scss files.
61 | test: /\.(css|scss)$/,
62 | // in the `src` directory
63 | include: [path.resolve(paths.appSrc), /node_modules/],
64 | use: ExtractTextPlugin.extract({
65 | fallback: 'style-loader',
66 | use: [
67 | {
68 | loader: 'css-loader',
69 | options: {
70 | modules: false,
71 | },
72 | },
73 | {
74 | loader: 'sass-loader',
75 | options: {
76 | sourceMap: false,
77 | },
78 | },
79 | ],
80 | }),
81 | },
82 | ],
83 | },
84 | });
85 |
--------------------------------------------------------------------------------
/frontend/src/__mocks__/apiMockResponse.js:
--------------------------------------------------------------------------------
1 | const apiMock = {
2 | nodes: [
3 | {
4 | id: 1333832958231356438,
5 | group: 'table',
6 | label: 'SRCETL_COMBINED_AUDITINFO_DIM',
7 | },
8 | { id: -5164229199702592055, group: 'table', label: 'STGETL_AUDITINFO_DIM' },
9 | {
10 | id: -6257875581471897958,
11 | group: 'table',
12 | label: 'FACT_QBO_PRODUCT_ACTION_EVENT',
13 | },
14 | {
15 | id: 8393607891502255639,
16 | group: 'table',
17 | label: 'DIM_QBO_COMPANY_PRODUCT_USAGE_KPI',
18 | },
19 | { id: 4931414091262092880, group: 'table', label: 'DIM_QBO_USER' },
20 | {
21 | id: 5505949582699571067,
22 | group: 'table',
23 | label: 'QBO_COMPANY_PRODUCT_USAGE_KPI_VW',
24 | },
25 | { id: 2897333401185500543, group: 'table', label: 'CFG_IOP_ETL_STATE' },
26 | ],
27 | edges: [
28 | { from: 4931414091262092880, to: -5164229199702592055 },
29 | { from: -5164229199702592055, to: -6257875581471897958 },
30 | { from: -6257875581471897958, to: 2897333401185500543 },
31 | { from: -6257875581471897958, to: 8393607891502255639 },
32 | { from: 4931414091262092880, to: 1333832958231356438 },
33 | { from: 8393607891502255639, to: 5505949582699571067 },
34 | { from: 1333832958231356438, to: -6257875581471897958 },
35 | ],
36 | };
37 |
38 | export default apiMock;
39 |
--------------------------------------------------------------------------------
/frontend/src/__mocks__/fileMock.js:
--------------------------------------------------------------------------------
1 | module.exports = 'test-file-stub';
2 |
--------------------------------------------------------------------------------
/frontend/src/__mocks__/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 |
3 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/actions/LineageActions.test.js:
--------------------------------------------------------------------------------
1 | import * as actions from 'Actions/LineageActions';
2 | import LineageActionTypes from 'Constants/LineageActionTypes';
3 | import LoadingState from 'Constants/LoadingState';
4 | import moxios from 'moxios';
5 | import configureMockStore from 'redux-mock-store';
6 | import thunk from 'redux-thunk';
7 | import apiMock from '../../__mocks__/apiMockResponse';
8 |
9 | describe('actions', () => {
10 | it('should create an action to set lineage data', () => {
11 | const data = { nodes: [], edges: [] };
12 | const expectedAction = {
13 | type: LineageActionTypes.INSERT_LINEAGE,
14 | data,
15 | };
16 | expect(actions.setLineageData(data)).toEqual(expectedAction);
17 | });
18 | });
19 |
20 | describe('actions', () => {
21 | it('should create an action to set lineage loading status', () => {
22 | const state = LoadingState.LOADING;
23 | const expectedAction = {
24 | type: LineageActionTypes.SET_LINEAGE_LOADING,
25 | state,
26 | };
27 | expect(actions.setLineageLoading(state)).toEqual(expectedAction);
28 | });
29 | });
30 |
31 | const middlewares = [thunk];
32 | const mockStore = configureMockStore(middlewares);
33 |
34 | describe('actions', () => {
35 | beforeEach(() => moxios.install());
36 | afterEach(() => moxios.uninstall());
37 |
38 | it('should get the lineage data, given the name and type', () => {
39 | moxios.wait(() => {
40 | const request = moxios.requests.mostRecent();
41 | request.respondWith({
42 | status: 200,
43 | response: apiMock,
44 | });
45 | });
46 |
47 | const expectedActions = [
48 | {
49 | type: LineageActionTypes.SET_LINEAGE_LOADING,
50 | state: LoadingState.LOADING,
51 | },
52 | { type: LineageActionTypes.INSERT_LINEAGE, data: apiMock },
53 | {
54 | type: LineageActionTypes.SET_LINEAGE_LOADING,
55 | state: LoadingState.FINISHED_SUCCESS,
56 | },
57 | ];
58 |
59 | const store = mockStore({
60 | graph: {},
61 | loadingState: LoadingState.NOT_LOADED,
62 | });
63 |
64 | store.dispatch(actions.getLineageData('name', 'type')).then(() => {
65 | // return of async actions
66 | expect(store.getActions()).toEqual(expectedActions);
67 | });
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/actions/SearchActions.test.js:
--------------------------------------------------------------------------------
1 | import * as actions from 'Actions/SearchActions';
2 | import SearchActionTypes from 'Constants/SearchActionTypes';
3 | import moxios from 'moxios';
4 | import configureMockStore from 'redux-mock-store';
5 | import thunk from 'redux-thunk';
6 | import elasticMock from '../../__mocks__/elasticMock';
7 |
8 | describe('actions', () => {
9 | it('should create an action to set search term', () => {
10 | const searchTerm = 'qbo';
11 | const expectedAction = {
12 | type: SearchActionTypes.SET_SEARCH_TERM,
13 | searchTerm,
14 | };
15 | expect(actions.setSearchTerm(searchTerm)).toEqual(expectedAction);
16 | });
17 | });
18 |
19 | describe('actions', () => {
20 | it('should create an action to insert suggestions from elasticsearch', () => {
21 | const suggestions = [];
22 | const expectedAction = {
23 | type: SearchActionTypes.INSERT_SUGGESTIONS,
24 | suggestions,
25 | };
26 | expect(actions.insertSuggestions(suggestions)).toEqual(expectedAction);
27 | });
28 | });
29 |
30 | const middlewares = [thunk];
31 | const mockStore = configureMockStore(middlewares);
32 |
33 | describe('actions', () => {
34 | beforeEach(() => moxios.install());
35 | afterEach(() => moxios.uninstall());
36 |
37 | it('should get the search results, given the search term', () => {
38 | moxios.wait(() => {
39 | const request = moxios.requests.mostRecent();
40 | request.respondWith({
41 | status: 200,
42 | response: elasticMock,
43 | });
44 | });
45 |
46 | const suggestions = elasticMock.hits.hits.map(item => ({
47 | name: item._source.name,
48 | type: item._source.type,
49 | system: item._source.platform,
50 | job_group: item._source.schema,
51 | }));
52 |
53 | const expectedActions = [
54 | { type: SearchActionTypes.SET_SEARCH_TERM, searchTerm: 'qbo' },
55 | { type: SearchActionTypes.INSERT_SUGGESTIONS, suggestions },
56 | ];
57 |
58 | const store = mockStore({
59 | searchTerm: '',
60 | suggestions: [],
61 | });
62 |
63 | store.dispatch(actions.searchEntities('qbo')).then(() => {
64 | expect(store.getActions()).toEqual(expectedActions);
65 | });
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/components/Lineage.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import toJson from 'enzyme-to-json';
4 | import configureStore from 'redux-mock-store';
5 | import { Provider } from 'react-redux';
6 | import thunk from 'redux-thunk';
7 | import { Map } from 'immutable';
8 | import ConnectedLineage, { Lineage } from 'Components/Lineage';
9 | import LoadingState from 'Constants/LoadingState';
10 | import Loading from 'Components/Loading';
11 |
12 | const mockStore = configureStore([thunk]);
13 | const initialState = Map({
14 | graph: { nodes: [], edges: [] },
15 | loadingStatus: LoadingState.NOT_LOADED,
16 | });
17 | const store = mockStore(initialState);
18 |
19 | const loadingState = Map({
20 | graph: { nodes: [], edges: [] },
21 | loadingStatus: LoadingState.LOADING,
22 | });
23 | const loadingStore = mockStore(loadingState);
24 |
25 | describe('', () => {
26 | describe('render()', () => {
27 | test('renders the component', () => {
28 | const wrapper = shallow(
29 |
30 |
31 | ,
32 | );
33 | const component = wrapper.dive().dive();
34 | expect(toJson(component)).toMatchSnapshot();
35 | });
36 |
37 | test('renders the component based on the loading status', () => {
38 | const wrapper = shallow(
39 | ,
40 | );
41 |
42 | wrapper.update();
43 | expect(wrapper.find('div').text()).toBe('Lineage Not Loaded');
44 |
45 | wrapper.setProps({ loadingStatus: LoadingState.FINISHED_FAILURE });
46 | wrapper.update();
47 | expect(wrapper.find('div').text()).toBe('No lineage found');
48 |
49 | wrapper.setProps({ loadingStatus: LoadingState.LOADING });
50 | wrapper.update();
51 | expect(wrapper.find('Loading')).toBeTruthy();
52 |
53 | wrapper.setProps({ loadingStatus: LoadingState.FINISHED_SUCCESS });
54 | wrapper.update();
55 | expect(wrapper.find('Network')).toBeTruthy();
56 |
57 | wrapper.setProps({ loadingStatus: '' });
58 | wrapper.update();
59 | expect(wrapper.find('div').text()).toBe('Oops, something went wrong');
60 | });
61 | });
62 | });
63 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/components/Loading.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import Loading from 'Components/Loading';
4 |
5 | describe('', () => {
6 | test('the component renders', () => {
7 | const wrapper = shallow();
8 | expect(wrapper.find('img')).toHaveLength(1);
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/components/Network.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import toJson from 'enzyme-to-json';
4 | import Network from 'Components/Network';
5 |
6 | describe('', () => {
7 | test('it renders the component', () => {
8 | const wrapper = shallow();
9 | expect(toJson(wrapper)).toMatchSnapshot();
10 | });
11 |
12 | test('network container is rendered', () => {
13 | const wrapper = shallow();
14 | expect(wrapper.find('div')).toHaveLength(1);
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/components/SearchBar.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import toJson from 'enzyme-to-json';
4 | import configureStore from 'redux-mock-store';
5 | import { Provider } from 'react-redux';
6 | import thunk from 'redux-thunk';
7 | import { Map } from 'immutable';
8 | import ConnectedSearchBar, { SearchBar } from 'Components/SearchBar';
9 |
10 | const mockStore = configureStore([thunk]);
11 | const initialState = Map({
12 | searchTerm: '',
13 | suggestions: [],
14 | });
15 | const store = mockStore(initialState);
16 | // test that the component renders
17 | describe('', () => {
18 | describe('render()', () => {
19 | test('renders the component', () => {
20 | const wrapper = shallow(
21 |
22 |
23 | ,
24 | );
25 | // double dive to get into the component
26 | const component = wrapper.dive().dive();
27 |
28 | expect(toJson(component)).toMatchSnapshot();
29 | });
30 | });
31 |
32 | describe('SearchBar', () => {
33 | const onSearchChange = jest.fn();
34 | const setSearchTerm = jest.fn();
35 | const insertSuggestions = jest.fn();
36 | const wrapper = shallow(
37 | ,
42 | );
43 |
44 | test('it has all three of its subcomponents', () => {
45 | expect(wrapper.find('.searchBarContainer')).toHaveLength(1);
46 | expect(wrapper.find('.search')).toHaveLength(1);
47 | expect(wrapper.find('.searchBar')).toHaveLength(1);
48 | expect(wrapper.find('.close')).toHaveLength(1);
49 | });
50 |
51 | test('it accepts input and calls on the action to set the search term', () => {
52 | const event = {
53 | target: { value: 'hello' },
54 | };
55 | wrapper.find('input').simulate('change', event);
56 | expect(onSearchChange).toBeCalledWith('hello');
57 | });
58 |
59 | test('it calls on the actions to clear the inputs and suggestions', () => {
60 | wrapper.find('.close').simulate('click');
61 | expect(setSearchTerm).toBeCalledWith('');
62 | expect(insertSuggestions).toBeCalledWith([]);
63 | });
64 | });
65 | });
66 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/components/SearchTable.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import toJson from 'enzyme-to-json';
4 | import configureStore from 'redux-mock-store';
5 | import { Provider } from 'react-redux';
6 | import thunk from 'redux-thunk';
7 | import { Map } from 'immutable';
8 | import ConnectedSearchTable, { SearchTable } from 'Components/SearchTable';
9 |
10 | const mockStore = configureStore([thunk]);
11 | const initialState = Map({
12 | searchTerm: '',
13 | suggestions: [],
14 | });
15 | const store = mockStore(initialState);
16 | // test that the component renders
17 | describe('', () => {
18 | describe('render()', () => {
19 | test('renders the component', () => {
20 | const wrapper = shallow(
21 |
22 |
23 | ,
24 | );
25 | // double dive to get into the component
26 | const component = wrapper.dive().dive();
27 |
28 | expect(toJson(component)).toMatchSnapshot();
29 | });
30 | });
31 |
32 | describe('SearchTable', () => {
33 | test('it has all of its subcomponents', () => {
34 | const wrapper = shallow();
35 | expect(wrapper.find('.searchTableContainer')).toHaveLength(1);
36 | expect(wrapper.find('ReactTable')).toHaveLength(1);
37 | });
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/containers/App.test.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { MemoryRouter } from 'react-router';
4 | import App from 'Containers/App';
5 | import Search from 'Containers/Search';
6 | import Dashboard from 'Containers/Dashboard';
7 |
8 | describe('App', () => {
9 | describe('component', () => {
10 | let element;
11 | beforeEach(() => {
12 | element = ;
13 | });
14 |
15 | it('renders as expected', () => {
16 | const component = shallow(element);
17 | expect(component).toMatchSnapshot();
18 | });
19 |
20 | it('routes / to Search', () => {
21 | const component = shallow(element);
22 | expect(
23 | component
24 | .find('Route[exact=true][path="/"]')
25 | .first()
26 | .prop('component'),
27 | ).toBe(Search);
28 | });
29 |
30 | it('routes /dashboard to Dashboard', () => {
31 | const component = shallow(element);
32 | expect(
33 | component
34 | .find('Route[path="/dashboard/:entityType/:entityName/"]')
35 | .first()
36 | .prop('component'),
37 | ).toBe(Dashboard);
38 | });
39 | });
40 | });
41 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/containers/Dashboard.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import toJson from 'enzyme-to-json';
4 | import configureStore from 'redux-mock-store';
5 | import { Provider } from 'react-redux';
6 | import thunk from 'redux-thunk';
7 | import { Map } from 'immutable';
8 | import ConnectedDashboard, { Dashboard } from 'Containers/Dashboard';
9 | import Lineage from 'Components/Lineage';
10 |
11 | describe('Dashboard Container', () => {
12 | test('container component exists', () => {
13 | const wrapper = shallow();
14 | expect(wrapper.exists()).toBe(true);
15 | });
16 |
17 | test('it has all of its subcomponents', () => {
18 | const match = {
19 | params: {
20 | entityType: '',
21 | entityName: '',
22 | },
23 | };
24 | const getLineageData = jest.fn();
25 | const wrapper = shallow(
26 | ,
27 | );
28 | expect(wrapper.find('.dashboardContainer')).toHaveLength(1);
29 | expect(wrapper.find('h1')).toHaveLength(1);
30 | expect(wrapper.find(Lineage)).toHaveLength(1);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/containers/Search.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, mount } from 'enzyme';
3 | import toJson from 'enzyme-to-json';
4 | import configureStore from 'redux-mock-store';
5 | import { Provider } from 'react-redux';
6 | import thunk from 'redux-thunk';
7 | import { Map } from 'immutable';
8 | import Search from 'Containers/Search';
9 | import SearchBar from 'Components/SearchBar';
10 | import SearchTable from 'Components/SearchTable';
11 |
12 | const mockStore = configureStore([thunk]);
13 | const initialState = Map({
14 | searchTerm: '',
15 | suggestions: [],
16 | });
17 | const store = mockStore(initialState);
18 |
19 | describe('Search Container', () => {
20 | test('container component exists', () => {
21 | const wrapper = shallow();
22 | expect(wrapper.exists()).toBe(true);
23 | });
24 |
25 | // TODO: see that it has all of its children
26 | test('it has all of its subcomponents', () => {
27 | const wrapper = shallow();
28 | expect(wrapper.find('.searchContainer')).toHaveLength(1);
29 | expect(wrapper.find('.searchTopContainer')).toHaveLength(1);
30 | expect(wrapper.find('.brand')).toHaveLength(1);
31 | expect(wrapper.find(SearchBar)).toHaveLength(1);
32 | expect(wrapper.find(SearchTable)).toHaveLength(1);
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/reducers/LineageReducer.test.js:
--------------------------------------------------------------------------------
1 | import LineageReducer from 'Reducers/LineageReducer';
2 | import LineageActionTypes from 'Constants/LineageActionTypes';
3 | import { Map } from 'immutable';
4 | import LoadingState from 'Constants/LoadingState';
5 |
6 | describe('lineage reducer', () => {
7 | const initialState = Map({
8 | graph: { nodes: [], edges: [] },
9 | loadingStatus: LoadingState.NOT_LOADED,
10 | });
11 |
12 | it('should return the initial state', () => {
13 | expect(LineageReducer(undefined, {})).toEqual(initialState);
14 | });
15 |
16 | it('should handle INSERT_LINEAGE', () => {
17 | const dataToInsert = { nodes: [], edges: [] };
18 | const action = {
19 | type: LineageActionTypes.INSERT_LINEAGE,
20 | data: dataToInsert,
21 | };
22 | expect(LineageReducer(undefined, action)).toEqual(
23 | Map({
24 | graph: dataToInsert,
25 | loadingStatus: LoadingState.NOT_LOADED,
26 | }),
27 | );
28 | });
29 |
30 | it('should handle SET_LINEAGE_LOADING', () => {
31 | const dataToInsert = LoadingState.LOADING;
32 | const action = {
33 | type: LineageActionTypes.SET_LINEAGE_LOADING,
34 | state: dataToInsert,
35 | };
36 | expect(LineageReducer(undefined, action)).toEqual(
37 | Map({
38 | graph: {nodes: [], edges: []},
39 | loadingStatus: dataToInsert,
40 | }),
41 | );
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/reducers/SearchReducer.test.js:
--------------------------------------------------------------------------------
1 | import SearchReducer from 'Reducers/SearchReducer';
2 | import SearchActionTypes from 'Constants/SearchActionTypes';
3 | import { Map } from 'immutable';
4 |
5 | describe('lineage reducer', () => {
6 | const initialState = Map({
7 | searchTerm: '',
8 | suggestions: [],
9 | });
10 |
11 | it('should return the initial state', () => {
12 | expect(SearchReducer(undefined, {})).toEqual(initialState);
13 | });
14 |
15 | it('should handle SET_SEARCH_TERM', () => {
16 | const term = 'qbo';
17 | const action = {
18 | type: SearchActionTypes.SET_SEARCH_TERM,
19 | searchTerm: term,
20 | };
21 | expect(SearchReducer(undefined, action)).toEqual(
22 | Map({
23 | searchTerm: term,
24 | suggestions: [],
25 | }),
26 | );
27 | });
28 |
29 | it('should handle INSERT_SUGGESTIONS', () => {
30 | const suggestion = ['test'];
31 | const action = {
32 | type: SearchActionTypes.INSERT_SUGGESTIONS,
33 | suggestions: suggestion,
34 | };
35 | expect(SearchReducer(undefined, action)).toEqual(
36 | Map({
37 | searchTerm: '',
38 | suggestions: suggestion,
39 | }),
40 | );
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/frontend/src/__tests__/setup/setupEnzyme.js:
--------------------------------------------------------------------------------
1 | import Enzyme from 'enzyme';
2 | import Adapter from 'enzyme-adapter-react-16';
3 |
4 | Enzyme.configure({ adapter: new Adapter() });
5 |
--------------------------------------------------------------------------------
/frontend/src/actions/AxiosInstance.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 |
3 | export default axios.create({
4 | baseURL: `${process.env.GRAPH_HOST}/api/v1/`,
5 | });
6 |
--------------------------------------------------------------------------------
/frontend/src/actions/LineageActions.js:
--------------------------------------------------------------------------------
1 | import LineageActionTypes from 'Constants/LineageActionTypes';
2 | import LoadingState from 'Constants/LoadingState';
3 | import API from './AxiosInstance';
4 |
5 | export const setLineageLoading = state => ({
6 | type: LineageActionTypes.SET_LINEAGE_LOADING,
7 | state,
8 | });
9 |
10 | export const setLineageData = data => ({
11 | type: LineageActionTypes.INSERT_LINEAGE,
12 | data,
13 | });
14 |
15 | export const setDepthTraversal = depth => ({
16 | type: LineageActionTypes.SET_DEPTH,
17 | depth
18 | })
19 |
20 | export const getLineageData = (entityName, entityType, entityDepth) => dispatch => {
21 | dispatch(setLineageLoading(LoadingState.LOADING));
22 | dispatch(setDepthTraversal(entityDepth))
23 | const params = entityDepth === 'Full' ? '' : `?bw=${entityDepth}&fw=${entityDepth}`
24 |
25 | return API.get(`lineage/${entityType}/${entityName}${params}`)
26 | .then(res => {
27 | dispatch(setLineageData(res.data));
28 | dispatch(setLineageLoading(LoadingState.FINISHED_SUCCESS));
29 |
30 | })
31 | .catch(err => {
32 | /* istanbul ignore next */ console.error(err);
33 | dispatch(setLineageLoading(LoadingState.FINISHED_FAILURE));
34 | });
35 | };
36 |
--------------------------------------------------------------------------------
/frontend/src/actions/SearchActions.js:
--------------------------------------------------------------------------------
1 | import elasticsearch from 'elasticsearch';
2 | import SearchActionTypes from 'Constants/SearchActionTypes';
3 |
4 | const log = process.env.NODE_ENV === 'production' ? '' : 'trace';
5 | const searchClient = new elasticsearch.Client({
6 | host: process.env.ELASTICSEARCH_HOST,
7 | log,
8 | });
9 |
10 | export const setSearchTerm = searchTerm => ({
11 | type: SearchActionTypes.SET_SEARCH_TERM,
12 | searchTerm,
13 | });
14 |
15 | export const insertSuggestions = suggestions => ({
16 | type: SearchActionTypes.INSERT_SUGGESTIONS,
17 | suggestions,
18 | });
19 |
20 | export const searchEntities = searchTerm => dispatch => {
21 | dispatch(setSearchTerm(searchTerm));
22 | return searchClient
23 | .search({
24 | index: 'lineage',
25 | body: {
26 | size: 50,
27 | query: {
28 | bool: {
29 | must: [
30 | {
31 | match: {
32 | name: {
33 | query: searchTerm,
34 | // this part makes sure all the keywords are present
35 | operator: 'and',
36 | fuzziness: 1,
37 | },
38 | },
39 | },
40 | ],
41 | should: [
42 | {
43 | term: {
44 | name: {
45 | // this also boosts the exact match results to the top
46 | value: searchTerm,
47 | boost: 20,
48 | },
49 | },
50 | },
51 | ],
52 | },
53 | },
54 | },
55 | })
56 | .then(
57 | result => {
58 | const suggestions = result.hits.hits.map(item => ({
59 | name: item._source.name,
60 | type: item._source.type,
61 | system: item._source.platform,
62 | job_group: item._source.schema,
63 | }));
64 |
65 | // When we receive the suggestions, insert them into the store.
66 | dispatch(insertSuggestions(suggestions));
67 | },
68 | error => {
69 | if (process.env.NODE_ENV === 'development') {
70 | /* istanbul ignore next */ console.error('Elasticsearch error:');
71 | /* istanbul ignore next */ console.error(error);
72 | }
73 | },
74 | );
75 | };
76 |
--------------------------------------------------------------------------------
/frontend/src/assets/loadinga.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intuit/superglue/5c5e03846cfdfa72663c4c689c4d279480a73d4d/frontend/src/assets/loadinga.png
--------------------------------------------------------------------------------
/frontend/src/assets/loadingb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intuit/superglue/5c5e03846cfdfa72663c4c689c4d279480a73d4d/frontend/src/assets/loadingb.png
--------------------------------------------------------------------------------
/frontend/src/assets/spilledglue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/intuit/superglue/5c5e03846cfdfa72663c4c689c4d279480a73d4d/frontend/src/assets/spilledglue.png
--------------------------------------------------------------------------------
/frontend/src/components/Lineage.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Network from 'Components/Network';
3 | import { getLineageData } from 'Actions/LineageActions';
4 | import { connect } from 'react-redux';
5 | import LoadingState from 'Constants/LoadingState';
6 | import Loading from 'Components/Loading';
7 | import spilledglue from '../assets/spilledglue.png';
8 |
9 | export class Lineage extends React.Component {
10 | render() {
11 | switch (this.props.loadingStatus) {
12 | case LoadingState.NOT_LOADED:
13 | return Lineage Not Loaded
;
14 | case LoadingState.LOADING:
15 | return ;
16 | case LoadingState.FINISHED_SUCCESS:
17 | return ;
18 | case LoadingState.FINISHED_FAILURE:
19 | return (
20 |
21 |
22 |
No lineage found
23 |
Oops, something went wrong
;
27 | }
28 | }
29 | }
30 |
31 | /* istanbul ignore next */ const mapStateToProps = ({ lineage }) => ({
32 | loadingStatus: lineage.get('loadingStatus'),
33 | graph: lineage.get('graph'),
34 | });
35 |
36 | /* istanbul ignore next */ const mapDispatchToProps = dispatch => ({
37 | getLineageData: (name, type) => dispatch(getLineageData(name, type)),
38 | });
39 |
40 | export default connect(
41 | mapStateToProps,
42 | mapDispatchToProps,
43 | )(Lineage);
44 |
--------------------------------------------------------------------------------
/frontend/src/components/Loading.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import glue from '../assets/loadingb.png';
3 |
4 | const Loading = props => (
5 | 
6 | );
7 |
8 | export default Loading;
9 |
--------------------------------------------------------------------------------
/frontend/src/components/Network.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Graph from 'react-graph-vis';
3 |
4 | const options = {
5 | autoResize: true,
6 | width: '100%',
7 | height: '100%',
8 | nodes: {
9 | shape: 'box',
10 | shapeProperties: {
11 | borderRadius: 2,
12 | },
13 | font: {
14 | face: 'Avenir',
15 | },
16 | },
17 | edges: {
18 | arrows: 'to',
19 | color: {
20 | color: '#D3D3D3'
21 | }
22 | },
23 | layout: {
24 | hierarchical: {
25 | levelSeparation: 250,
26 | nodeSpacing: 150,
27 | blockShifting: true,
28 | edgeMinimization: true,
29 | direction: 'LR',
30 | parentCentralization: false,
31 | sortMethod: 'directed',
32 | },
33 | },
34 | interaction: {
35 | hover: true,
36 | tooltipDelay: 50,
37 | navigationButtons: true,
38 | zoomView: false,
39 | },
40 | physics: false,
41 | groups: {
42 | selected: {
43 | nodes: {
44 | color: '#7777FF',
45 | },
46 | },
47 | table: {
48 | color: '#D3D3D3',
49 | },
50 | },
51 | };
52 |
53 | export default class Network extends React.Component {
54 | constructor(props) {
55 | super(props);
56 |
57 | this.state = {
58 | network: undefined,
59 | };
60 | }
61 |
62 | render() {
63 | const { graph } = this.props;
64 |
65 | return (
66 |
67 | this.setState({ network })}
71 | />
72 |
73 | );
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/frontend/src/components/SearchBar.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import MaterialIcon from '@material/react-material-icon';
4 | import {
5 | searchEntities,
6 | setSearchTerm,
7 | insertSuggestions,
8 | } from 'Actions/SearchActions';
9 |
10 | export class SearchBar extends React.Component {
11 | clearInput = () => {
12 | this.props.setSearchTerm('');
13 | this.props.insertSuggestions([]);
14 | };
15 |
16 | handleChange = event => {
17 | const term = event.target.value;
18 | this.props.onSearchChange(term);
19 | };
20 |
21 | render() {
22 | return (
23 |
24 |
25 |
34 |
39 |
40 | );
41 | }
42 | }
43 |
44 | /* istanbul ignore next */ const mapStateToProps = ({ search }) => ({
45 | searchTerm: search.get('searchTerm'),
46 | });
47 |
48 | /* istanbul ignore next */ const mapDispatchToProps = dispatch => ({
49 | onSearchChange: searchTerm => dispatch(searchEntities(searchTerm)),
50 | setSearchTerm: term => dispatch(setSearchTerm(term)),
51 | insertSuggestions: suggestions => dispatch(insertSuggestions(suggestions)),
52 | });
53 |
54 | // exporting the connected component for the app
55 | export default connect(
56 | mapStateToProps,
57 | mapDispatchToProps,
58 | )(SearchBar);
59 |
--------------------------------------------------------------------------------
/frontend/src/components/SearchTable.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { connect } from 'react-redux';
3 | import ReactTable from 'react-table';
4 | import { withRouter } from 'react-router';
5 | import 'react-table/react-table.css';
6 |
7 | const columns = [
8 | {
9 | Header: 'Schema',
10 | accessor: 'schema',
11 | width: 80,
12 | },
13 | {
14 | Header: 'Name',
15 | accessor: 'name',
16 | },
17 | {
18 | Header: 'Type',
19 | id: 'type',
20 | accessor: /* istanbul ignore next */ d => d.type.toLowerCase(),
21 | width: 80,
22 | },
23 | {
24 | Header: 'Platform',
25 | accessor: 'platform',
26 | width: 80,
27 | },
28 | ];
29 |
30 | /* istanbul ignore next */ const getLink = suggestion => {
31 | return `/dashboard/table/${suggestion.name}/`;
32 | };
33 |
34 | export const SearchTable = props => (
35 |
36 | ({
46 | onClick: /* istanbul ignore next */ e =>
47 | props.history.push(`${getLink(rowInfo.original)}`),
48 | })}
49 | />
50 |
51 | );
52 |
53 | /* istanbul ignore next */ const mapStateToProps = ({ search }) => ({
54 | suggestions: search.get('suggestions'),
55 | });
56 |
57 | /* istanbul ignore next */ const mapDispatchToProps = dispatch => ({});
58 |
59 | export default connect(
60 | mapStateToProps,
61 | mapDispatchToProps,
62 | )(withRouter(SearchTable));
63 |
--------------------------------------------------------------------------------
/frontend/src/components/SelectDepth.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class SelectDepth extends React.Component {
4 | constructor(props){
5 | super(props);
6 | this.state = { value: '1'};
7 | }
8 |
9 | handleChange = event => {
10 | this.setState({value: event.target.value});
11 | const depth = event.target.value;
12 | this.props.getLineageData(this.props.entityName, this.props.entityType, depth);
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
19 |
26 |
27 | )
28 | }
29 | };
30 |
31 | export default SelectDepth;
32 |
--------------------------------------------------------------------------------
/frontend/src/constants/LineageActionTypes.js:
--------------------------------------------------------------------------------
1 | const LineageActionTypes = {
2 | SET_LINEAGE_LOADING: 'SET_LINEAGE_LOADING',
3 | INSERT_LINEAGE: 'INSERT_LINEAGE',
4 | SET_DEPTH: 'SET_DEPTH',
5 | };
6 |
7 | export default LineageActionTypes;
8 |
--------------------------------------------------------------------------------
/frontend/src/constants/LoadingState.js:
--------------------------------------------------------------------------------
1 | const LoadingState = {
2 | NOT_LOADED: 'NOT_LOADED',
3 | LOADING: 'LOADING',
4 | FINISHED_SUCCESS: 'FINISHED_SUCCESS',
5 | FINISHED_FAILURE: 'FINISHED_FAILURE',
6 | };
7 |
8 | export default LoadingState;
9 |
--------------------------------------------------------------------------------
/frontend/src/constants/SearchActionTypes.js:
--------------------------------------------------------------------------------
1 | const SearchActionTypes = {
2 | SET_SEARCH_TERM: 'SET_SEARCH_TERM',
3 | INSERT_SUGGESTIONS: 'INSERT_SUGGESTIONS',
4 | };
5 |
6 | export default SearchActionTypes;
7 |
--------------------------------------------------------------------------------
/frontend/src/containers/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { hot } from 'react-hot-loader';
3 | import { HashRouter, Route, Switch } from 'react-router-dom';
4 | import Search from './Search';
5 | import Dashboard from './Dashboard';
6 |
7 | const App = () => (
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 |
16 | export default hot(module)(App);
17 |
--------------------------------------------------------------------------------
/frontend/src/containers/Dashboard.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Lineage from 'Components/Lineage';
3 | import { getLineageData} from '../actions/LineageActions';
4 | import { connect } from 'react-redux';
5 | import SelectDepth from '../components/SelectDepth';
6 |
7 | export class Dashboard extends React.Component {
8 | /* istanbul ignore next */ componentWillMount() {
9 | this.props.getLineageData(
10 | this.props.match.params.entityName,
11 | this.props.match.params.entityType,
12 | this.props.depth
13 | );
14 | }
15 |
16 | /* istanbul ignore next */ shouldComponentUpdate(nextProps, nextState) {
17 | if (
18 | nextProps.match.params.entityName !== this.props.match.params.entityName
19 | ) {
20 | this.props.getLineageData(
21 | nextProps.match.params.entityName,
22 | nextProps.match.params.entityType,
23 | nextProps.depth,
24 | );
25 | return true;
26 | }
27 | return false;
28 | }
29 |
30 | render() {
31 | return (
32 |
33 |
34 | Lineage for {this.props.match.params.entityName}
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | /* istanbul ignore next */ const mapStateToProps = ({ lineage }) => ({
42 | loadingStatus: lineage.get('loadingStatus'),
43 | graph: lineage.get('graph'),
44 | depth: lineage.get('depth'),
45 | });
46 |
47 | /* istanbul ignore next */ const mapDispatchToProps = dispatch => ({
48 | getLineageData: (name, type, depth) => dispatch(getLineageData(name, type, depth)),
49 | });
50 |
51 | export default connect(
52 | mapStateToProps,
53 | mapDispatchToProps,
54 | )(Dashboard);
55 |
56 |
--------------------------------------------------------------------------------
/frontend/src/containers/Search.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import SearchBar from 'Components/SearchBar';
3 | import SearchTable from 'Components/SearchTable';
4 |
5 | const Search = () => (
6 |
7 |
8 |
superglue
9 |
10 |
11 |
12 |