Update Ansible configuration for deploying dashboard using runtime

environment variables

Author: gurbirkalsi

.gitignore

@@ -31,4 +31,4 @@ package-lock.json
 __snapshots__
 
 # config
-/config/endpoints.js
+public/endpoints.js

README.md

@@ -70,17 +70,17 @@ This will automatically open the application on [http://localhost:8000](http://l
 
 Both the production and development builds of the dashboard require API endpoint configurations in order to query data from specific datastores.
 
-`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.
+`public/endpoints.js` contains references to datastores required to visualize data in the dashboard. Please reference the following example for required configuration fields:
 
 ```JavaScript
-export default {
-  "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"
-}
+window.endpoints = {
+  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.'
+};
 ```
 
 ## Storage Config

ansible/README.md

@@ -3,20 +3,32 @@ This will ease installation, and deployment of the pbench dashboard.
 
 ## Required
 - Ansible needs to be installed on the host where you want to run this playbook
-- An inventory file containing the following key values defined:
-  - "`elasticsearch_url`", "`results_url`", "`graphql_url`", "`run_index`", "`prefix`"
-    See the `/README.md` for more details. 
+- An inventory file containing the server values defined
+
+## Endpoint Configuration
+API endpoints are defined in `public/endpoints.js` as runtime configuration variables for reference in the dashboard binary. Before deployment of the binary to a remote host, consider the configuration at `public/endpoints.js` as the file is copied to the target server during deployment. Please reference the following example for required configuration fields:
+
+```JavaScript
+window.endpoints = {
+  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.'
+};
+```
 
 ## Run
 Running the below commands from this checked-out directory to install the
 pbench dashboard components locally, and then deploy hosts mentioned under
-the "`[servers:children]`" section of the given `inventory` file.
- 
-There's also an option to define the dashboard configuration in the provided
-inventory file.
+the "`[servers]`" section of the given `inventory` file.
 
 See the `inventory` file in this directory for an example.
 ```
+$ # First bundle the dashboard for production
+$ yarn build
+$
 $ # First add a link to the "dist" folder where the dashboard will be built.
 $ ln -sf ../dist dist
 $ ansible-playbook -i inventory dashboard-install.yml

ansible/config.json.j2

@@ -1,22 +1,3 @@
-[servers:children]
-ui-server
-user-server
-
-[servers:vars]
-results_url="http://{{ inventory_hostname }}"
-run_index="run.example"
-graphql_url="http://{{ inventory_hostname }}"
-
-[ui-server]
-ui-server.example.com
-
-[ui-server:vars]
-elasticsearch_url="http://elasticsearch.example.com"
-prefix="ui-server.example."
-
-[user-server]
-user-server.example.com
-
-[user-server:vars]
-elasticsearch_url="http://elasticsearch.example.com"
-prefix="user-server.example."
+[servers]
+staging-server.example.com
+production-server.example.com

ansible/inventory

@@ -13,6 +13,3 @@
     dest: /var/www/html/dashboard
     owner: pbench
     group: pbench
-
-- name: initialize dashboard config file
-  template: src=config.json.j2 dest=/var/www/html/dashboard/config.json mode=0644 owner=pbench group=pbench

ansible/roles/dashboard-deploy/tasks/main.yml

@@ -1,10 +1,6 @@
 import pageRoutes from './router.config';
-import endpoints from './endpoints';
 
 export default {
-  define: {
-    'process.env.endpoints': endpoints,
-  },
   dynamicImport: undefined,
   base: '/dashboard/',
   publicPath: process.env.NODE_ENV === 'development' ? '/' : '/dashboard/',

config.json.j2

@@ -1,7 +1,11 @@
-// eslint-disable-next-line import/no-unresolved
-import endpoints from '../config/endpoints';
 import constants from '../config/constants';
 
+// Mocked test index components
+const endpoints = {
+  prefix: 'test_prefix.',
+  run_index: 'test_index.',
+};
+
 // Generate controllers as per max page size options
 const maxTableSize = parseInt(constants.tableSizeOptions.pop(), 10);
 let generatedBuckets = new Array(maxTableSize).fill({});

config/config.js

@@ -1,12 +1,11 @@
 {
   "name": "pbench_dashboard",
-  "version": "2.2.0",
+  "version": "2.2.1-0",
   "description": "UI solution for scalable visualization of benchmark data.",
   "private": true,
   "scripts": {
     "precommit": "npm run lint-staged",
-    "start": "cross-env UMI_UI=none umi dev",
-    "start:no-mock": "cross-env MOCK=none umi dev",
+    "start": "cross-env UMI_UI=none MOCK=none umi dev",
     "build": "npm --no-git-tag-version version prerelease && umi build",
     "site": "umi-api-doc static && gh-pages -d dist",
     "analyze": "cross-env ANALYZE=true umi build",