Embed UI config (#107)

* Query service embeds config in index.html - Merge embedded config with default config - Use gaTrackingID from embedded config for Google Analytics tracking Signed-off-by: Joe Farro <joef@uber.com> * Add changelog entry for PR 107 Signed-off-by: Joe Farro <joef@uber.com>
jaegertracing · Oct 27, 2017 · 79d262d · 79d262d
1 parent 4ece4e6
commit 79d262d
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 # Changes
 
 
+### [#107](https://github.com/jaegertracing/jaeger-ui/pull/107) Embed UI config
+
+The query service can embed custom UI configuration into `index.html`, speeding up the initial page load and allowing custom Google Analytics tracking IDs without requiring the UI bundle to be regenerated. This also lays the ground work for other UI configuration scenarios, in the future.
+
+
 ### [#97](https://github.com/jaegertracing/jaeger-ui/pull/97) Change to Apache license v.2 and add DCO / CONTRIBUTING.md
 
 

diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "cytoscape-dagre": "^2.0.0",
     "d3-scale": "^1.0.6",
     "dagre": "^0.7.4",
+    "deep-freeze": "^0.0.1",
     "flow-bin": "^0.53.1",
     "fuzzy": "^0.1.3",
     "global": "^4.3.2",

diff --git a/public/index.html b/public/index.html
@@ -3,17 +3,26 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
     <!-- prevent caching of this HTML by any server, Go or otherwise -->
     <meta http-equiv="cache-control" content="max-age=0" />
     <meta http-equiv="cache-control" content="no-cache" />
     <meta http-equiv="expires" content="0" />
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
     <meta http-equiv="pragma" content="no-cache" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-
-
     <title>Jaeger UI</title>
+    <script>
+      // Jaeger UI config data is embedded by the query-service. This is
+      // later merged with defaults into the redux `state.config` via
+      // src/utils/config/get-config.js. The default provided by the query
+      // service should be an empty object or it can leave `DEFAULT_CONFIG`
+      // unchanged.
+      function getJaegerUiConfig() {
+        const DEFAULT_CONFIG = null;
+        const JAEGER_CONFIG = DEFAULT_CONFIG;
+        return JAEGER_CONFIG;
+      }
+    </script>
   </head>
   <body>
     <div id="jaeger-ui-root"></div>

diff --git a/src/actions/jaeger-api.js b/src/actions/jaeger-api.js
@@ -15,12 +15,6 @@
 import { createAction } from 'redux-actions';
 import JaegerAPI from '../api/jaeger';
 
-/**
- * async wrapper to get the api object in case we're in demo mode.
- */
-
-export const fetchConfig = createAction('@JAEGER_API/FETCH_CONFIG', () => JaegerAPI.fetchConfig());
-
 export const fetchTrace = createAction(
   '@JAEGER_API/FETCH_TRACE',
   id => JaegerAPI.fetchTrace(id),

diff --git a/src/api/jaeger.js b/src/api/jaeger.js
@@ -47,9 +47,6 @@ export const DEFAULT_DEPENDENCY_LOOKBACK = moment.duration(1, 'weeks').asMillise
 
 const JaegerAPI = {
   apiRoot: DEFAULT_API_ROOT,
-  fetchConfig() {
-    return getJSON(`${this.apiRoot}config`).catch(err => ({ error: err }));
-  },
   fetchTrace(id) {
     return getJSON(`${this.apiRoot}traces/${id}`);
   },

diff --git a/src/components/App/Page.js b/src/components/App/Page.js
@@ -28,7 +28,7 @@ import './Page.css';
 type PageProps = {
   location: Location,
   children: React.Node,
-  config: { data: Config },
+  config: Config,
 };
 
 class Page extends React.Component<PageProps> {
@@ -49,7 +49,7 @@ class Page extends React.Component<PageProps> {
 
   render() {
     const { children, config } = this.props;
-    const menu = config && config.data && config.data.menu;
+    const menu = config && config.menu;
     return (
       <section className="jaeger-ui-page" id="jaeger-ui">
         <Helmet title="Jaeger UI" />

diff --git a/src/components/App/index.js b/src/components/App/index.js
@@ -25,7 +25,6 @@ import NotFound from './NotFound';
 import { ConnectedDependencyGraphPage } from '../DependencyGraph';
 import { ConnectedSearchTracePage } from '../SearchTracePage';
 import { ConnectedTracePage } from '../TracePage';
-import { fetchConfig } from '../../actions/jaeger-api';
 import JaegerAPI, { DEFAULT_API_ROOT } from '../../api/jaeger';
 import configureStore from '../../utils/configure-store';
 import prefixUrl from '../../utils/prefix-url';
@@ -39,7 +38,6 @@ export default class JaegerUIApp extends Component {
     super(props);
     this.store = configureStore(history);
     JaegerAPI.apiRoot = DEFAULT_API_ROOT;
-    this.store.dispatch(fetchConfig());
   }
 
   render() {

diff --git a/src/constants/default-config.js b/src/constants/default-config.js
@@ -12,7 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export default {
+import deepFreeze from 'deep-freeze';
+
+export default deepFreeze({
   menu: [
     {
       label: 'About Jaeger',
@@ -44,4 +46,4 @@ export default {
       ],
     },
   ],
-};
+});
diff --git a/src/reducers/config.js b/src/reducers/config.js
@@ -12,40 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { handleActions } from 'redux-actions';
+import getConfig from '../utils/config/get-config';
 
-import { fetchConfig } from '../actions/jaeger-api';
-import defaultConfig from '../constants/default-config';
-
-const initialState = {
-  data: {},
-  loading: false,
-  error: null,
-};
-
-function fetchStarted(state) {
-  return { ...state, loading: true };
-}
-
-function fetchDone(state, { payload }) {
-  const data = payload;
-  // fetchConfig action creator is set to handle rejected promises
-  if (data.error) {
-    const { message, stack } = data.error;
-    return { ...state, error: { message, stack }, loading: false, data: defaultConfig };
+export default function reduceConfig(state) {
+  if (state === undefined) {
+    return getConfig();
   }
-  return { ...state, data, error: null, loading: false };
+  return state;
 }
-
-function fetchErred(state, { payload: error }) {
-  return { ...state, error: error.message, loading: false, data: defaultConfig };
-}
-
-export default handleActions(
-  {
-    [`${fetchConfig}_PENDING`]: fetchStarted,
-    [`${fetchConfig}_FULFILLED`]: fetchDone,
-    [`${fetchConfig}_REJECTED`]: fetchErred,
-  },
-  initialState
-);
diff --git a/src/types/config.js b/src/types/config.js
@@ -25,5 +25,6 @@ export type ConfigMenuGroup = {
 };
 
 export type Config = {
+  gaTrackingID?: ?string,
   menu: (ConfigMenuGroup | ConfigMenuItem)[],
 };
diff --git a/src/utils/config/get-config.js b/src/utils/config/get-config.js
@@ -0,0 +1,37 @@
+// @flow
+
+// Copyright (c) 2017 Uber Technologies, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import defaultConfig from '../../constants/default-config';
+
+let haveWarned = false;
+
+/**
+ * Merge the embedded config from the query service (if present) with the
+ * default config from `../../constants/default-config`.
+ */
+export default function getConfig() {
+  const getJaegerUiConfig = window.getJaegerUiConfig;
+  if (typeof getJaegerUiConfig !== 'function') {
+    if (!haveWarned) {
+      // eslint-disable-next-line no-console
+      console.warn('Embedded config not available');
+      haveWarned = true;
+    }
+    return { ...defaultConfig };
+  }
+  const embedded = getJaegerUiConfig() || {};
+  return { ...defaultConfig, ...embedded };
+}
diff --git a/src/utils/metrics.js b/src/utils/metrics.js
@@ -14,10 +14,12 @@
 
 import ReactGA from 'react-ga';
 
+import getConfig from './config/get-config';
+
 export function init() {
-  if (process.env.NODE_ENV === 'production' && process.env.REACT_APP_GA_TRACKING_ID) {
-    const GA_CODE = process.env.REACT_APP_GA_TRACKING_ID;
-    ReactGA.initialize(GA_CODE);
+  const config = getConfig();
+  if (process.env.NODE_ENV === 'production' && config.gaTrackingID) {
+    ReactGA.initialize(config.gaTrackingID);
   }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -2095,6 +2095,10 @@ deep-extend@~0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
 
+deep-freeze@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
+
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"