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}