First cut revamping the health page a bit, also introduce some named …

…loggers for Core and Health plugins
hawtio · Oct 25, 2013 · 97d83d3 · 97d83d3
1 parent db2946f
commit 97d83d3
Show file tree

Hide file tree

Showing 7 changed files with 206 additions and 12 deletions.
diff --git a/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts b/hawtio-web/src/main/webapp/app/core/js/corePlugin.ts
@@ -377,7 +377,7 @@ angular.module('hawtioCore', ['bootstrap', 'ngResource', 'ui', 'ui.bootstrap.dia
 
           setTimeout(() => {
             $("#main-body").fadeIn(2000).after(() => {
-              Logger.get('Core').info("Hawtio started!");
+              Core.log.info("<strong>Hawtio started!</strong>");
             });
           }, 500);
 

diff --git a/hawtio-web/src/main/webapp/app/core/js/helpers.ts b/hawtio-web/src/main/webapp/app/core/js/helpers.ts
@@ -294,6 +294,12 @@ if (!Object.keys) {
 
 module Core {
 
+  /**
+   * A named logger for our module...
+   * @type {Logger}
+   */
+  export var log:Logging.Logger = Logger.get("Core");
+
   /**
    * Creates a link by appending the current $location.search() hash to the given href link,
    * removing any required parameters from the link

diff --git a/hawtio-web/src/main/webapp/app/core/js/workspace.ts b/hawtio-web/src/main/webapp/app/core/js/workspace.ts
@@ -163,7 +163,7 @@ class Workspace {
       try {
         return folder.getOrElse(value);
       } catch (e) {
-        console.log("Failed to find value " + value + " on folder " + folder);
+        Core.log.warn("Failed to find value " + value + " on folder " + folder);
       }
     }
     return null;
@@ -172,7 +172,7 @@ class Workspace {
   public populateTree(response) {
     if (!Object.equal(this.treeResponse, response.value)) {
       this.treeResponse = response.value;
-      console.log("JMX tree has been loaded!");
+      Core.log.debug("JMX tree has been loaded!");
 
       var rootId = 'root';
       var separator = '-';
@@ -312,7 +312,7 @@ class Workspace {
               }
             }
           } else {
-            console.log("No folder found for lastPath: " + lastPath);
+            Core.log.info("No folder found for lastPath: " + lastPath);
           }
         }
       }
@@ -463,7 +463,7 @@ class Workspace {
       var validFn = tab.isValid;
       return !angular.isDefined(validFn) || validFn(workspace);
     } else {
-      console.log("Could not find tab for " + uri);
+      Core.log.info("Could not find tab for " + uri);
       return false;
     }
 /*
@@ -551,7 +551,7 @@ class Workspace {
         this.setLocalStorage(key, uri);
         return false;
       } else {
-        console.log("the uri '" + uri + "' is not valid for this selection");
+        Core.log.info("the uri '" + uri + "' is not valid for this selection");
         // lets look up the previous preferred value for this type
         var defaultPath = this.getLocalStorage(key);
         if (!defaultPath || !this.validSelection(defaultPath)) {
@@ -567,7 +567,7 @@ class Workspace {
         if (!defaultPath) {
           defaultPath = "#/jmx/help";
         }
-        console.log("moving the URL to be " + defaultPath);
+        Core.log.info("moving the URL to be " + defaultPath);
         if (defaultPath.startsWith("#")) {
           defaultPath = defaultPath.substring(1);
         }

diff --git a/hawtio-web/src/main/webapp/app/health/html/health.html b/hawtio-web/src/main/webapp/app/health/html/health.html
@@ -1,3 +1,5 @@
+
+
 <script type="text/ng-template" id="healthEventTemplate">
   <table class="table table-striped">
       <tbody>
@@ -11,6 +13,20 @@
 
 <div class="controller-section" ng-controller="Health.HealthController">
 
+  <div class="inline-block health-displays" ng-repeat="display in displays">
+    <div class="health-display-title">{{display.mbean}}</div>
+    <div ng-repeat="value in display.values" class="health-display inline-block {{value.level}}" >
+      <div class="health-title centered">{{getTitle(value)}}</div>
+      <div class="health-chart" title="{{value.message}}">
+        <fs-donut bind="value.data" color-map="value.colorMap" outer-radius="200" inner-radius="75" duration="250"></fs-donut>
+      </div>
+    </div>
+  </div>
+
+
+
+  <!--
+
   <table cellpadding="0" cellspacing="0" border="0" class="table table-condensed table-bordered table-hover"
          id="grid">
     <thead>
@@ -24,5 +40,10 @@
     </thead>
     <tbody>
   </table>
+  -->
+
+  <div class="inline-block" ng-repeat="result in results">
+    <h6>result.</h6>
+  </div>
 
 </div>
diff --git a/hawtio-web/src/main/webapp/app/health/js/health.ts b/hawtio-web/src/main/webapp/app/health/js/health.ts
@@ -1,6 +1,7 @@
 module Health {
 
-    export function HealthController($scope, workspace:Workspace) {
+    export function HealthController($scope, jolokia, workspace:Workspace, $templateCache) {
+
       $scope.widget = new TableWidget($scope, workspace, [
         <TableColumnConfig> {
           "mDataProp": null,
@@ -42,16 +43,142 @@ module Health {
         }
       };
 
+      $scope.levelSorting = {
+        'ERROR': 0,
+        'WARNING': 1,
+        'INFO': 2,
+      };
+
+      $scope.colorMaps = {
+        'ERROR': {
+          'Health': '#ff0a47',
+          'Remaining': '#e92614'
+        },
+        'WARNING': {
+          'Health': '#33cc00',
+          'Remaining': '#f7ee09'
+        },
+        'INFO': {
+          'Health': '#33cc00',
+          'Remaining': '#00cc33'
+        }
+      }
+
       $scope.results = [];
 
+      $scope.responses = {};
+
+      $scope.mbeans = [];
+
+      $scope.displays = [];
+      $scope.page = '';
+
+      $scope.render = (response) => {
+        //log.debug("Got response: ", response);
+        var mbean = response.request.mbean;
+        var values = response.value;
+
+        var responseJson = angular.toJson(values);
+
+        if (mbean in $scope.responses) {
+          if ($scope.responses[mbean] === responseJson) {
+            return;
+          }
+        }
+
+        $scope.responses[mbean] = responseJson;
+
+        var display = $scope.displays.find((m) => { return m.mbean === mbean });
+
+        values = defaultValues(values);
+
+        values = values.sortBy((value) => {
+          if (!value.level) {
+            return 99;
+          }
+          return $scope.levelSorting[value.level];
+        });
+
+        values.forEach((value) => {
+            value.data = {
+              total: 1,
+              terms: [{
+                term: 'Health',
+                count: value.healthPercent
+              }, {
+                term: 'Remaining',
+                count: 1 - value.healthPercent
+              }]
+            };
+            value.colorMap = $scope.colorMaps[value.level];
+        });
+
+        if (!display) {
+          $scope.displays.push({
+            mbean: mbean,
+            values: values
+          });
+        } else {
+          display.values = values;
+        }
+
+        log.debug("Display: ", $scope.displays);
+        if ($scope.page === '') {
+          $scope.page = $templateCache.get('pageTemplate');
+        }
+
+        Core.$apply($scope);
+      };
+
+      $scope.$watch('mbeans', (newValue, oldValue) => {
+        log.debug("Mbeans: ", $scope.mbeans);
+
+        Core.unregister(jolokia, $scope);
+        $scope.mbeans.forEach((mbean) => {
+          Core.register(jolokia, $scope, {
+            type: 'exec', mbean: mbean,
+            operation: "healthList()"
+          }, {
+            success: $scope.render,
+            error: (response) => {
+              log.error("Failed to invoke healthList() on mbean: " + mbean + " due to: ", response.error);
+              log.info("Stack trace: ", response.stacktrace.split("\n"));
+            }
+          });
+        });
+      }, true);
+
+      $scope.getMBeans = () => {
+        var healthMap = getHealthMBeans(workspace);
+        log.debug("HealthMap: ", healthMap);
+        if (healthMap) {
+          if (!angular.isArray(healthMap)) {
+            return [healthMap.objectName];
+          }
+          var answer = healthMap.map((obj) => { return obj.objectName; });
+          return answer;
+        } else {
+          return [];
+        }
+      };
+
+      $scope.getTitle = (value) => {
+        if (value['healthId'].endsWith('profileHealth')) {
+          return 'Profile: ' + value['profile'];
+        }
+        return 'HealthID: ' + value['healthId'];
+      };
+
+      $scope.mbeans = $scope.getMBeans();
+
       $scope.$on("$routeChangeSuccess", function (event, current, previous) {
         // lets do this asynchronously to avoid Error: $digest already in progress
-        setTimeout(updateTableContents, 50);
+        //setTimeout(updateTableContents, 50);
       });
 
       $scope.$watch('workspace.selection', function () {
-        if (workspace.moveIfViewInvalid()) return;
-        updateTableContents();
+        //if (workspace.moveIfViewInvalid()) return;
+        //updateTableContents();
       });
 
       function updateTableContents() {

diff --git a/hawtio-web/src/main/webapp/app/health/js/helpers.ts b/hawtio-web/src/main/webapp/app/health/js/helpers.ts
@@ -1,4 +1,7 @@
 module Health {
+
+  export var log:Logging.Logger = Logger.get("Health");
+
   export var healthDomains = {
     "org.apache.activemq": "ActiveMQ",
     "org.apache.camel": "Camel",
@@ -45,4 +48,4 @@ module Health {
       } else return null;
     }
   }
-}
+}
diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2862,3 +2862,40 @@ fs-donut svg g text.units {
   font-size: 20px;
   font-family: monospace;
 }
+
+.health-displays {
+  width: 100%;
+}
+
+.health-displays .health-display {
+  border-radius: 4px;
+  border: 1px solid #d4d4d4;
+  display: inline-block;
+  width: 300px;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+.health-display-title {
+  padding-top: 18px;
+  font-size: 30px;
+  width: 100%;
+  height: 40px;
+  border-radius: 4px;
+  background: #eaeaea;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-weight: bold;
+  /*
+  margin-left: 15px;
+  margin-right: 15px;
+  */
+  text-align: center;
+}
+
+.health-displays .health-display .health-chart {
+  width: 300px;
+  height: 300px;
+}
+
+