Fix #556

hawtio · Sep 18, 2013 · 2b97b22 · 2b97b22
1 parent cab8fce
commit 2b97b22
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 58 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/html/preferences.html b/hawtio-web/src/main/webapp/app/core/html/preferences.html
@@ -117,6 +117,18 @@
         </div>
       </form>
 
+      <strong>Fabric</strong>
+      <form class="form-horizontal">
+        <label class="control-label">Enable Maps</label>
+        <div class="control-group">
+          <div class="controls">
+            <input type="checkbox" ng-model="fabricEnableMaps">
+            <span class="help-block">Enable the "Map" tab in Fabric view, requires network access to maps.google.com</span>
+          </div>
+        </div>
+      </form>
+
+
       <!-- TODO Split into its file and include as a partial -->
       <div ng-controller="CodeEditor.PreferencesController">
         <strong>Editor</strong>

diff --git a/hawtio-web/src/main/webapp/app/core/js/preferences.ts b/hawtio-web/src/main/webapp/app/core/js/preferences.ts
@@ -53,14 +53,22 @@ module Core {
 
     $scope.$watch('hosts', (oldValue, newValue) => {
       if (!Object.equal(oldValue, newValue)) {
-        localStorage['regexs'] = angular.toJson($scope.hosts);
+        if (angular.isDefined($scope.hosts)) {
+          localStorage['regexs'] = angular.toJson($scope.hosts);
+        } else {
+          delete localStorage['regexs'];
+        }
       } else {
-        $scope.hosts = angular.fromJson(localStorage['regexs']);
+        $scope.hosts = {};
+        if (angular.isDefined(localStorage['regexs'])) {
+          $scope.hosts = angular.fromJson(localStorage['regexs']);
+        }
       }
     }, true);
 
     var defaults = {
-      logCacheSize: 1000
+      logCacheSize: 1000,
+      fabricEnableMaps: true
     };
 
     var converters = {
@@ -79,21 +87,22 @@ module Core {
       localStorage['autoRefresh'] = $scope.autoRefresh;
     });
 
-    var names = ["gitUserName", "gitUserEmail", "activemqUserName", "activemqPassword", "logCacheSize"];
+    var names = ["gitUserName", "gitUserEmail", "activemqUserName", "activemqPassword", "logCacheSize", "fabricEnableMaps"];
 
     angular.forEach(names, (name) => {
-      $scope[name] = localStorage[name];
-      var converter = converters[name];
-      if (converter) {
-        $scope[name] = converter($scope[name]);
-      }
-      if (!$scope[name]) {
+      if (angular.isDefined(localStorage[name])) {
+        $scope[name] = localStorage[name];
+        var converter = converters[name];
+        if (converter) {
+          $scope[name] = converter($scope[name]);
+        }
+      } else {
         $scope[name] = defaults[name] || "";
       }
 
       $scope.$watch(name, () => {
         var value = $scope[name];
-        if (value) {
+        if (angular.isDefined(value)) {
           localStorage[name] = value;
         }
       });

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/layoutFabric.html b/hawtio-web/src/main/webapp/app/fabric/html/layoutFabric.html
@@ -14,8 +14,8 @@
   <li ng-show="hasMetrics">
     <a ng-href="#/insight/all" title="View the metrics of the containers in this fabric">Metrics</a>
   </li>
-  <li ng-show="hasFabric" ng-class='{active : isActive("#/fabric/map")}'>
-    <a ng-href="#/fabric/map{{hash}}" title="View the containers on a google map">Map</a>
+  <li ng-show="hasFabric && mapsEnabled" ng-class='{active : isActive("#/fabric/map")}'>
+    <a ng-href="#/fabric/map{{hash}}" title="View the containers on a Google map">Map</a>
   </li>
   <li ng-show="droolsHref">
     <a ng-href="{{droolsHref}}" target="drools" title="View and manage the rules and workflows in this Fabric">Rules</a>

diff --git a/hawtio-web/src/main/webapp/app/fabric/html/map.html b/hawtio-web/src/main/webapp/app/fabric/html/map.html
@@ -1,38 +1,44 @@
 <div class="controller-section" ng-controller="Fabric.MapController">
-  <ul>
-    <li ng-repeat="marker in myMarkers">
-      <a ng-click="myMap.panTo(marker.getPosition())">{{marker.title}}</a>
-    </li>
-  </ul>
-
-  <!-- this is the confusing part. we have to point the map marker directive
-    at an existing google.maps.Marker object, so it can hook up events -->
-  <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
-       ui-event="{'map-click': 'openMarkerInfo(marker)'}">
-  </div>
-
-  <div ui-map-info-window="myInfoWindow">
-    <h3><a ng-href="#/fabric/container/{{currentMarker.title}}">Container {{currentMarker.title}}</a></h3>
-<!--
-    Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
-    <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
--->
-  </div>
-
-  <!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
-  google maps -->
-  <div id="map_canvas" ui-map="myMap" class="map"
-       ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
-       ui-options="mapOptions">
-  </div>
-
-  <style>
-    .map {
+
+  <div compile="template"></div>
+
+  <script type="text/ng-template" id="pageTemplate">
+
+    <ul>
+      <li ng-repeat="marker in myMarkers">
+        <a href="" ng-click="myMap.panTo(marker.getPosition())">{{marker.title}}</a>
+      </li>
+    </ul>
+
+    <!-- this is the confusing part. we have to point the map marker directive
+      at an existing google.maps.Marker object, so it can hook up events -->
+    <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div>
+
+    <div ui-map-info-window="myInfoWindow">
+      <h3>
+        <a ng-href="#/fabric/container/{{currentMarker.title}}">Container {{currentMarker.title}}</a>
+      </h3>
+      <!--
+          Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
+          <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
+      -->
+    </div>
+
+    <!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
+    google maps -->
+    <div id="map_canvas" ui-map="myMap" class="map" ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" ui-options="mapOptions"></div>
+
+    <style type="text/css">
+      .map {
       height: 500px;
       width: 100%;
       /*
-        width: 600px;
+      width: 600px;
       */
-    }
-  </style>
+      }
+    </style>
+
+  </script>
+
+
 </div>
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/map.ts b/hawtio-web/src/main/webapp/app/fabric/js/map.ts
@@ -1,21 +1,32 @@
 module Fabric {
 
-  export function MapController($scope, workspace:Workspace, $routeParams, jolokia) {
+  export var startMaps = () => {};
+
+  export function MapController($scope, $templateCache, jolokia) {
     $scope.myMarkers = [];
     $scope.containers = {};
+    $scope.template = "";
+
+    $scope.start = () => {
+
+      $scope.mapOptions = {
+        center: new google.maps.LatLng(35.784, -78.670),
+        zoom: 15,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+
+      Core.register(jolokia, $scope, {
+        type: 'exec', mbean: managerMBean,
+        operation: 'containers()',
+        arguments: []
+      }, onSuccess(render));
 
-    $scope.mapOptions = {
-      center: new google.maps.LatLng(35.784, -78.670),
-      zoom: 15,
-      mapTypeId: google.maps.MapTypeId.ROADMAP
+      $scope.template = $templateCache.get("pageTemplate");
     };
 
-    Core.register(jolokia, $scope, {
-      type: 'exec', mbean: managerMBean,
-      operation: 'containers()',
-      arguments: []
-    }, onSuccess(render));
+    Fabric.startMaps = $scope.start
 
+    $('body').append('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&async=2&callback=Fabric.startMaps"></script>');
 
     $scope.addMarker = function ($event) {
       $scope.myMarkers.push(new google.maps.Marker({
@@ -99,4 +110,4 @@ module Fabric {
       }
     }
   }
-}
+}
diff --git a/hawtio-web/src/main/webapp/app/fabric/js/navbar.ts b/hawtio-web/src/main/webapp/app/fabric/js/navbar.ts
@@ -1,8 +1,10 @@
 module Fabric {
-  export function NavBarController($scope, $location, jolokia, workspace:Workspace) {
+  export function NavBarController($scope, $location, jolokia, workspace:Workspace, localStorage) {
 
     $scope.activeVersion = "1.0";
 
+    $scope.mapsEnabled = localStorage['fabricEnableMaps'];
+
     // update the active version whenever query parameters change
     $scope.$on('$routeUpdate', reloadVersion);
 

diff --git a/hawtio-web/src/main/webapp/index.html b/hawtio-web/src/main/webapp/index.html
@@ -311,7 +311,8 @@ <h2 title="Status Code: {{connectFailure.status}}">Cannot Connect: {{connectFail
 <script type="text/javascript" src="lib/dmr.js.nocache.js"></script>
 
 <!-- google maps -->
+<!--
 <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
-
+    -->
 </body>
 </html>