Reference API endpoints via environment variables

Move datastoreConfig.js to config/endpoints.js and loaded with umi config
to expose environment variables globally once Node.js process boots up.

Author: gurbirkalsi

.gitignore

@@ -17,7 +17,6 @@ _roadhog-api-doc
 .DS_Store
 npm-debug.log*
 yarn-error.log
-/mock/datastoreConfig.js
 
 /coverage
 .idea
@@ -30,3 +29,6 @@ package-lock.json
 
 # jest tests
 __snapshots__
+
+# config
+/config/endpoints.js

README.md

@@ -8,10 +8,12 @@ Pbench Dashboard is a web-based platform for consuming indexed performance bench
 ├── public
 │   └── favicon.ico                 # favicon
 ├── mock
-│   └── datastoreConfig.js.example  # datastore configuration
+│   ├── api.js                      # mocked api
+│   └── user.js                     # mocked user api
 ├── config
 │   ├── config.js                   # webpack configuration
-│   └── router.config.js            # webpack routing configuration
+│   ├── router.config.js            # webpack routing configuration
+│   └── endpoints.js                # api endpoint configuration
 ├── src
 │   ├── assets                      # local static files
 │   ├── common                      # common configurations (navigation, menu, etc.)
@@ -66,20 +68,18 @@ This will automatically open the application on [http://localhost:8000](http://l
 
 ## Local Development
 
-Both the production and development builds of the dashboard require specific configurations in order to run on their respective environment.
+Both the production and development builds of the dashboard require API endpoint configurations in order to query data from specific datastores.
 
-Copy the `datastoreConfig.js.example` file in the `mock/` directory to `datastoreConfig.js` and modify the configuration fields within the route definition. Please reference the following example for required configuration fields.
+`endpoints.js` in the `config/` directory contains references to datastores required to visualize data in the dashboard. Please reference the following example for required configuration fields.
 
 ```JavaScript
 export default {
-  '/dev/datastoreConfig': {
-      "elasticsearch": "http://elasticsearch.example.com",
-      "results": "http://results.example.com",
-      "graphql": "http://graphql.example.com",
-      "prefix": "example.prefix",
-      "run_index": "example.index",
-      "result_index": "example.index"
-  },
+  "elasticsearch": "http://elasticsearch.example.com",
+  "results": "http://results.example.com",
+  "graphql": "http://graphql.example.com",
+  "prefix": "example.prefix",
+  "run_index": "example.index",
+  "result_index": "example.index"
 }
 ```
 

config/config.js

@@ -1,8 +1,9 @@
 import pageRoutes from './router.config';
+import endpoints from './endpoints';
 
 export default {
   define: {
-    'process.env': process.env.NODE_ENV,
+    'process.env.endpoints': endpoints,
   },
   dynamicImport: undefined,
   base: '/dashboard/',

config/endpoints.js

@@ -0,0 +1,8 @@
+export default {
+  elasticsearch: 'http://test_domain.com',
+  results: 'http://test_domain.com',
+  graphql: 'http://test_domain.com',
+  prefix: 'test_prefix.',
+  result_index: 'test_index.',
+  run_index: 'test_index.',
+};

e2etests

@@ -5,18 +5,6 @@
 # directory.
 cd $(dirname ${0})
 
-# Setup the mock'd data store configuration.
-cat > mock/datastoreConfig.js <<EOF
-export default {
-  '/dev/datastoreConfig': {
-    elasticsearch: 'http://test_domain.com',
-    results: 'http://test_domain.com',
-    graphql: 'http://test_domain.com',
-    prefix: 'test_prefix.',
-    run_index: 'test_index.',
-  },
-};
-EOF
 # Make sure the yarn environment is all up-to-date, or perform the
 # install ahead of actually running the tests.
 printf -- "Running \"yarn install\" command ...\n" 

mock/api.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-unresolved
-import config from './datastoreConfig';
+import endpoints from '../config/endpoints';
 import constants from '../config/constants';
 
 // Generate controllers as per max page size options
@@ -22,8 +22,7 @@ export const generateMockControllerAggregation = {
   },
 };
 
-const datastoreConfig = config['/dev/datastoreConfig'];
-const prefix = datastoreConfig.prefix + datastoreConfig.run_index.slice(0, -1);
+const prefix = endpoints.prefix + endpoints.run_index.slice(0, -1);
 export const mockIndices = {
   [`${prefix}.2019-08-01`]: {},
   [`${prefix}.2019-09-01`]: {},

mock/datastoreConfig.js.example

@@ -73,7 +73,6 @@ class GlobalHeader extends Component {
 
   render() {
     const {
-      datastoreConfig,
       savingSession,
       sessionBannerVisible,
       sessionDescription,
@@ -102,12 +101,7 @@ class GlobalHeader extends Component {
             banner
           />
         )}
-        <SessionModal
-          datastoreConfig={datastoreConfig}
-          savingSession={savingSession}
-          sessionConfig={store}
-          dispatch={dispatch}
-        />
+        <SessionModal savingSession={savingSession} sessionConfig={store} dispatch={dispatch} />
         <PageHeaderToolsGroup>
           <PageHeaderToolsItem>
             <Button

src/components/GlobalHeader/index.js

@@ -48,7 +48,7 @@ class SessionModal extends Component {
   };
 
   onGenerate = () => {
-    const { dispatch, datastoreConfig } = this.props;
+    const { dispatch } = this.props;
     let { sessionConfig } = this.props;
     const { description } = this.state;
     sessionConfig = JSON.stringify(sessionConfig);
@@ -58,7 +58,6 @@ class SessionModal extends Component {
       payload: {
         sessionConfig,
         description,
-        datastoreConfig,
       },
     }).then(result => {
       this.setState({

src/components/SessionModal/index.js

@@ -44,8 +44,7 @@ const getBreadcrumbNameMap = memoizeOne(menu => {
   return routerMap;
 }, deepEqual);
 
-@connect(({ global, datastore, loading, auth }) => ({
-  datastoreConfig: datastore.datastoreConfig,
+@connect(({ global, loading, auth }) => ({
   sessionBannerVisible: global.sessionBannerVisible,
   sessionDescription: global.sessionDescription,
   sessionId: global.sessionId,
@@ -94,7 +93,6 @@ class BasicLayout extends React.PureComponent {
 
   render() {
     const {
-      datastoreConfig,
       savingSession,
       sessionBannerVisible,
       sessionDescription,
@@ -110,7 +108,6 @@ class BasicLayout extends React.PureComponent {
           <Page
             header={
               <GlobalHeader
-                datastoreConfig={datastoreConfig}
                 savingSession={savingSession}
                 sessionBannerVisible={sessionBannerVisible}
                 sessionDescription={sessionDescription}

src/layouts/BasicLayout.js

@@ -1,34 +1,20 @@
 import getDefaultDateRange from '../utils/moment_constants';
-import { queryDatastoreConfig, queryMonthIndices } from '../services/datastore';
+import queryMonthIndices from '../services/datastore';
 
 export default {
   namespace: 'datastore',
 
   state: {
-    datastoreConfig: {},
     indices: [],
   },
 
   effects: {
-    *fetchDatastoreConfig({ payload }, { call, put }) {
-      const response = yield call(queryDatastoreConfig, payload);
-
-      // Remove the trailing slashes if present, we'll take care of adding
-      // them back in the proper context.
-      response.elasticsearch = response.elasticsearch.replace(/\/+$/, '');
-      response.results = response.results.replace(/\/+$/, '');
-
-      yield put({
-        type: 'getDatastoreConfig',
-        payload: response,
-      });
-    },
     *fetchMonthIndices({ payload }, { call, put }) {
       const response = yield call(queryMonthIndices, payload);
-      const { datastoreConfig } = payload;
+      const { endpoints } = process.env;
       const indices = [];
 
-      const prefix = datastoreConfig.prefix + datastoreConfig.run_index.slice(0, -1);
+      const prefix = endpoints.prefix + endpoints.run_index.slice(0, -1);
       Object.keys(response).forEach(index => {
         if (index.includes(prefix)) {
           indices.push(index.split('.').pop());
@@ -49,12 +35,6 @@ export default {
   },
 
   reducers: {
-    getDatastoreConfig(state, { payload }) {
-      return {
-        ...state,
-        datastoreConfig: payload,
-      };
-    },
     getMonthIndices(state, { payload }) {
       return {
         ...state,

src/models/datastore.js

@@ -19,9 +19,10 @@ export default {
     },
     *fetchIndexMapping({ payload }, { call, put }) {
       const response = yield call(queryIndexMapping, payload);
-      const { datastoreConfig, indices } = payload;
+      const { indices } = payload;
+      const { endpoints } = process.env;
 
-      const index = datastoreConfig.prefix + datastoreConfig.run_index + indices[0];
+      const index = endpoints.prefix + endpoints.run_index + indices[0];
       const mapping = response[index].mappings['pbench-run'].properties;
       const fields = [];
       const filters = {};

src/models/search.js

@@ -23,12 +23,11 @@ import Button from '@/components/Button';
 import Table from '@/components/Table';
 import { filterIterations } from '../../utils/parse';
 
-@connect(({ datastore, global, dashboard, loading }) => ({
+@connect(({ global, dashboard, loading }) => ({
   iterations: dashboard.iterations,
   iterationParams: dashboard.iterationParams,
   results: dashboard.results,
   controllers: dashboard.controllers,
-  datastoreConfig: datastore.datastoreConfig,
   selectedControllers: global.selectedControllers,
   selectedResults: global.selectedResults,
   selectedDateRange: global.selectedDateRange,
@@ -47,11 +46,11 @@ class ComparisonSelect extends React.Component {
   }
 
   componentDidMount() {
-    const { selectedResults, selectedDateRange, datastoreConfig, dispatch } = this.props;
+    const { selectedResults, selectedDateRange, dispatch } = this.props;
 
     dispatch({
       type: 'dashboard/fetchIterationSamples',
-      payload: { selectedResults, selectedDateRange, datastoreConfig },
+      payload: { selectedResults, selectedDateRange },
     });
   }
 

src/pages/ComparisonSelect/index.js

@@ -25,12 +25,9 @@ const { TabPane } = Tabs;
   controllers: dashboard.controllers,
   indices: datastore.indices,
   selectedDateRange: global.selectedDateRange,
-  datastoreConfig: datastore.datastoreConfig,
   favoriteControllers: user.favoriteControllers,
   loadingControllers:
-    loading.effects['dashboard/fetchControllers'] ||
-    loading.effects['datastore/fetchMonthIndices'] ||
-    loading.effects['datastore/fetchDatastoreConfig'],
+    loading.effects['dashboard/fetchControllers'] || loading.effects['datastore/fetchMonthIndices'],
 }))
 class Controllers extends Component {
   constructor(props) {
@@ -51,7 +48,7 @@ class Controllers extends Component {
       selectedDateRange.start === '' ||
       selectedDateRange.end === ''
     ) {
-      this.queryDatastoreConfig();
+      this.fetchMonthIndices();
     }
   }
 
@@ -63,32 +60,21 @@ class Controllers extends Component {
     }
   }
 
-  queryDatastoreConfig = async () => {
-    const { dispatch } = this.props;
-
-    dispatch({
-      type: 'datastore/fetchDatastoreConfig',
-    }).then(() => {
-      this.fetchMonthIndices();
-    });
-  };
-
   fetchMonthIndices = async () => {
-    const { dispatch, datastoreConfig } = this.props;
+    const { dispatch } = this.props;
 
     dispatch({
       type: 'datastore/fetchMonthIndices',
-      payload: { datastoreConfig },
     }).then(() => {
       this.fetchControllers();
     });
   };
 
   fetchControllers = () => {
-    const { dispatch, datastoreConfig, selectedDateRange } = this.props;
+    const { dispatch, selectedDateRange } = this.props;
     dispatch({
       type: 'dashboard/fetchControllers',
-      payload: { datastoreConfig, selectedDateRange },
+      payload: { selectedDateRange },
     });
   };