Update Ansible configuration for deploying dashboard using environment

variables

Author: gurbirkalsi

.env

@@ -0,0 +1,7 @@
+# Example Configuration
+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.'

.gitignore

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

README.md

@@ -70,17 +70,15 @@ 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.
+`.env` 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"
-}
+```
+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,31 @@ 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 `.env` as environment variables for reference in the dashboard binary. Before deployment of the binary to a remote host, consider the configuration at `.env` as the file is copied to the target server during deployment. Please reference the following example for required configuration fields:
+
+```
+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,11 @@
     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
+    
+- name: move .env to remote hosts
+  copy: 
+    src: .env
+    dest: /var/www/html/dashboard
+    owner: pbench
+    group: pbench
+    

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

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

config.json.j2

@@ -1,7 +1,15 @@
-// eslint-disable-next-line import/no-unresolved
-import endpoints from '../config/endpoints';
 import constants from '../config/constants';
 
+// Mocked test endpoints
+const 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.',
+};
+
 // 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,6 +1,6 @@
 {
   "name": "pbench_dashboard",
-  "version": "2.2.0",
+  "version": "2.2.1-0",
   "description": "UI solution for scalable visualization of benchmark data.",
   "private": true,
   "scripts": {
@@ -36,6 +36,7 @@
     "ant-design-pro": "^2.1.1",
     "antd": "^3.16.1",
     "classnames": "^2.2.5",
+    "dotenv": "^8.2.0",
     "dva": "^2.4.1",
     "dva-core": "^1.1.0",
     "enzyme-adapter-react-16": "^1.15.1",