diff --git a/.gitignore b/.gitignore index efb8e3f80..bfc869ea7 100644 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,4 @@ package-lock.json __snapshots__ # config -/config/endpoints.js +public/endpoints.js diff --git a/README.md b/README.md index 99e837afe..add986579 100644 --- a/README.md +++ b/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 diff --git a/ansible/README.md b/ansible/README.md index fa2cc668c..9629488e9 100644 --- a/ansible/README.md +++ b/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 diff --git a/ansible/config.json.j2 b/ansible/config.json.j2 deleted file mode 120000 index 2f0c04d24..000000000 --- a/ansible/config.json.j2 +++ /dev/null @@ -1 +0,0 @@ -../config.json.j2 \ No newline at end of file diff --git a/ansible/inventory b/ansible/inventory index 9508f7761..19e746ac7 100644 --- a/ansible/inventory +++ b/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 diff --git a/ansible/roles/dashboard-deploy/tasks/main.yml b/ansible/roles/dashboard-deploy/tasks/main.yml index beed689a8..11921598c 100644 --- a/ansible/roles/dashboard-deploy/tasks/main.yml +++ b/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 diff --git a/config.json.j2 b/config.json.j2 deleted file mode 100644 index 51d96b714..000000000 --- a/config.json.j2 +++ /dev/null @@ -1,8 +0,0 @@ -{ - "elasticsearch": "{{ elasticsearch_url }}", - "results": "{{ results_url }}", - "graphql": "{{ graphql_url }}", - "result_index": "{{ result_index }}", - "run_index": "{{ run_index }}", - "prefix": "{{ prefix }}" -} diff --git a/config/config.js b/config/config.js index b9acacc3f..86ae66a70 100644 --- a/config/config.js +++ b/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/', diff --git a/mock/api.js b/mock/api.js index 80e5e9abf..17ee93b2a 100644 --- a/mock/api.js +++ b/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({}); diff --git a/package.json b/package.json index 0d8906bee..a46071d8d 100644 --- a/package.json +++ b/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", diff --git a/config/endpoints.js b/public/endpoints.js similarity index 90% rename from config/endpoints.js rename to public/endpoints.js index 94e07912e..a287a3083 100644 --- a/config/endpoints.js +++ b/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', diff --git a/src/models/datastore.js b/src/models/datastore.js index a36aef2ac..2d9ddf7b9 100644 --- a/src/models/datastore.js +++ b/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); diff --git a/src/models/search.js b/src/models/search.js index 1471c3763..c1f5206ad 100644 --- a/src/models/search.js +++ b/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; diff --git a/src/pages/document.ejs b/src/pages/document.ejs index 190bda6a3..5ebdc17ee 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -6,7 +6,10 @@ Pbench Dashboard - + + + + diff --git a/src/services/dashboard.js b/src/services/dashboard.js index 18bbb86eb..f5c72f5e4 100644 --- a/src/services/dashboard.js +++ b/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`; diff --git a/src/services/datastore.js b/src/services/datastore.js index 1f2bab41a..b977d37f9 100644 --- a/src/services/datastore.js +++ b/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`; diff --git a/src/services/explore.js b/src/services/explore.js index 50aac9425..9af30903d 100644 --- a/src/services/explore.js +++ b/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() { diff --git a/src/services/global.js b/src/services/global.js index 9764e3140..0f99605c0 100644 --- a/src/services/global.js +++ b/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; diff --git a/src/services/search.js b/src/services/search.js index ed1469e94..713dcb431 100644 --- a/src/services/search.js +++ b/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;