Update Ansible configuration for deploying dashboard using runtime environment variables

.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/inventory

@@ -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/roles/dashboard-deploy/tasks/main.yml

@@ -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

config/config.js

@@ -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/',

mock/api.js

@@ -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({});

package.json

@@ -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",

config/endpoints.js → public/endpoints.js

@@ -1,4 +1,4 @@
-export default {
+window.endpoints = {
   elasticsearch: 'http://test_domain.com',
   results: 'http://test_domain.com',
   graphql: 'http://test_domain.com',

src/models/datastore.js

@@ -11,7 +11,7 @@ export default {
   effects: {
     *fetchMonthIndices({ payload }, { call, put }) {
       const response = yield call(queryMonthIndices, payload);
-      const { endpoints } = process.env;
+      const { endpoints } = window;
       const indices = [];
 
       const prefix = endpoints.prefix + endpoints.run_index.slice(0, -1);

src/models/search.js

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

src/pages/document.ejs

@@ -6,7 +6,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Pbench Dashboard</title>
-  <link rel="icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon">
+
+  <!-- runtime endpoints config -->
+  <script src="<%= context.config.publicPath +'endpoints.js'%>"></script>
 </head>
 
 <body>

src/services/dashboard.js

@@ -4,7 +4,7 @@
 import request from '../utils/request';
 import { getAllMonthsWithinRange } from '../utils/moment_constants';
 
-const { endpoints } = process.env;
+const { endpoints } = window;
 
 function scrollUntilEmpty(data) {
   const endpoint = `${endpoints.elasticsearch}/_search/scroll?scroll=1m`;

src/services/datastore.js

@@ -1,6 +1,6 @@
 import request from '../utils/request';
 
-const { endpoints } = process.env;
+const { endpoints } = window;
 
 export default async function queryMonthIndices() {
   const endpoint = `${endpoints.elasticsearch}/_aliases`;

src/services/explore.js

@@ -1,6 +1,6 @@
 import request from '../utils/request';
 
-const { endpoints } = process.env;
+const { endpoints } = window;
 
 // queries all the available shared sessions from the database to display
 export async function querySharedSessions() {

src/services/global.js

@@ -1,6 +1,6 @@
 import request from '../utils/request';
 
-const { endpoints } = process.env;
+const { endpoints } = window;
 
 export async function saveUserSession(params) {
   const { sessionConfig, description } = params;

src/services/search.js

@@ -1,7 +1,7 @@
 import { getAllMonthsWithinRange } from '../utils/moment_constants';
 import request from '../utils/request';
 
-const { endpoints } = process.env;
+const { endpoints } = window;
 
 export async function queryIndexMapping(params) {
   const { indices } = params;