feat(core/visualizer): Allow visualizer and trace toggle from URL que…

…ry param `?vis=true` and `trace=true` (#3644)
spinnaker · May 10, 2017 · cf6c38e · cf6c38e
1 parent 69d223e
commit cf6c38e
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 12 deletions.
diff --git a/app/scripts/modules/core/core.module.js b/app/scripts/modules/core/core.module.js
@@ -246,9 +246,7 @@ module.exports = angular
     uiSelectConfig.appendToBody = true;
   })
   .run(function($stateRegistry, $uiRouter) {
-
-    // Type javascript:vis() in the browser url
-    window.vis = function() {
+    function launchVisualizer() {
       const collapsedStates = [
         'home.data',
         'home.project',
@@ -269,7 +267,48 @@ module.exports = angular
       // eslint-disable-next-line no-underscore-dangle
       collapsedStates.forEach(state => $stateRegistry.get(state).$$state()._collapsed = true);
 
-      System.import('ui-router-visualizer').then(vis => $uiRouter.plugin(vis.Visualizer));
+      return System.import('ui-router-visualizer').then(vis => $uiRouter.plugin(vis.Visualizer));
+    }
+
+    function toggleVisualizer(enabled) {
+      if (enabled) {
+        return launchVisualizer();
+      } else {
+        const plugin = $uiRouter.getPlugin('visualizer');
+        plugin && $uiRouter.dispose(plugin);
+      }
+    }
+
+    // Values allowed: TRANSITION (true), HOOK, RESOLVE, UIVIEW, VIEWCONFIG, or ALL
+    function toggleTrace(newValue) {
+      let trace = $uiRouter.trace;
+      trace.disable();
+      if (typeof newValue === 'string') {
+        if (newValue.toUpperCase() === 'TRUE') {
+          trace.enable('TRANSITION');
+        } else if (newValue.toUpperCase() === 'ALL') {
+          trace.enable();
+        } else {
+          let traceValues = newValue.split(',').map(str => str.trim().toUpperCase());
+          trace.enable(...traceValues);
+        }
+      }
+    }
+
+    const paramChangedHandler = (paramName, changedHandler) => (transition) => {
+      const previousValue = transition.params('from')[paramName];
+      const newValue = transition.params('to')[paramName];
+
+      if (previousValue === newValue) {
+        return null;
+      }
+      return changedHandler(newValue, previousValue);
     };
+
+    $uiRouter.transitionService.onBefore({}, paramChangedHandler('vis', toggleVisualizer));
+    $uiRouter.transitionService.onBefore({}, paramChangedHandler('trace', toggleTrace));
+
+    // Type javascript:vis() in the browser url or add `&vis=true` to the spinnaker query params
+    window.vis = launchVisualizer;
   });
 
diff --git a/app/scripts/modules/core/history/recentHistory.service.ts b/app/scripts/modules/core/history/recentHistory.service.ts
@@ -1,11 +1,11 @@
-import {module} from 'angular';
+import { module } from 'angular';
 import * as moment from 'moment';
-import {sortBy, find} from 'lodash';
+import { omit, sortBy, find } from 'lodash';
 
-import {UUIDGenerator} from 'core/utils/uuid.service';
-import {DECK_CACHE_SERVICE, ICache, DeckCacheService} from 'core/cache/deckCache.service';
+import { UUIDGenerator } from 'core/utils/uuid.service';
+import { DECK_CACHE_SERVICE, ICache, DeckCacheService } from 'core/cache/deckCache.service';
+import { Ng1StateDeclaration } from 'angular-ui-router';
 import IAngularEvent = angular.IAngularEvent;
-import {Ng1StateDeclaration} from 'angular-ui-router';
 
 interface ICacheEntryStateMigrator {
   // a string literal in the state to be replaced (not a regex)
@@ -137,7 +137,8 @@ module(RECENT_HISTORY_SERVICE, [
   .run(($rootScope: ng.IRootScopeService, recentHistoryService: RecentHistoryService) => {
     $rootScope.$on('$stateChangeSuccess', (_event: IAngularEvent, toState: Ng1StateDeclaration, toParams: any) => {
       if (toState.data && toState.data.history) {
-        recentHistoryService.addItem(toState.data.history.type, toState.name, toParams, toState.data.history.keyParams);
+        const params = omit(toParams || {}, ['debug', 'vis', 'trace']);
+        recentHistoryService.addItem(toState.data.history.type, toState.name, params, toState.data.history.keyParams);
       }
     });
   });
diff --git a/app/scripts/modules/core/navigation/state.provider.ts b/app/scripts/modules/core/navigation/state.provider.ts
@@ -17,9 +17,11 @@ export class StateConfigProvider implements IServiceProvider {
   private root: INestedState = {
     name: 'home',
     abstract: true,
-    url: '?{debug:boolean}',
+    url: '?{debug:boolean}&{vis:boolean}&{trace:query}',
     params: {
-      debug: { dynamic: true }
+      debug: { dynamic: true },
+      vis: { dynamic: true, value: false, squash: true },
+      trace: { dynamic: true, value: null, squash: true },
     },
     children: [],
   };