Simple dangle donut chart driven by route params, needs hooking into …

…JMX ui to add to dashboards
hawtio · Sep 20, 2013 · becbb8f · becbb8f
1 parent 36d7026
commit becbb8f
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 2 deletions.
diff --git a/hawtio-web/src/main/webapp/app/jmx/html/donutChart.html b/hawtio-web/src/main/webapp/app/jmx/html/donutChart.html
@@ -0,0 +1,6 @@
+<div ng-controller="Jmx.DonutChartController">
+  <script type="text/ng-template" id="donut">
+    <fs-donut bind="data" outer-radius="200" inner-radius="75"></fs-donut>
+  </script>
+  <div compile="template"></div>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/jmx/js/donutChart.ts b/hawtio-web/src/main/webapp/app/jmx/js/donutChart.ts
@@ -0,0 +1,87 @@
+module Jmx {
+
+  export function DonutChartController($scope, $routeParams, jolokia, $templateCache) {
+
+    /*
+    console.log("routeParams: ", $routeParams);
+
+
+    $scope.mbean = "java.lang:type=OperatingSystem";
+    $scope.total = "MaxFileDescriptorCount";
+    $scope.terms = "OpenFileDescriptorCount";
+    */
+
+    $scope.mbean = $routeParams['mbean'];
+    $scope.total = $routeParams['total'];
+    $scope.terms = $routeParams['terms'];
+
+    $scope.remainder = "Remaining";
+
+    $scope.template = "";
+    $scope.termsArray = $scope.terms.split(",");
+
+    $scope.data = {
+      total: 0,
+      terms: []
+    };
+
+    $scope.reqs = [{type: 'read', mbean: $scope.mbean, attribute: $scope.total}];
+
+    $scope.termsArray.forEach((term) => {
+      $scope.reqs.push({type: 'read', mbean: $scope.mbean, attribute: term});
+      $scope.data.terms.push({
+        term: term,
+        count: 0
+      });
+    });
+
+    $scope.data.terms.push({
+      term: $scope.remainder,
+      count: 0
+    });
+
+    /*
+    $scope.data = {
+      total: 100,
+      terms: [{
+        term: "One",
+        count: 25
+      }, {
+        term: "Two",
+        count: 75
+      }]
+    };
+    */
+
+    $scope.render = (response) => {
+      if (response.request.attribute === $scope.total) {
+        $scope.data.total = response.value;
+      } else {
+        var term = $scope.data.terms.find((term) => {
+          return term.term === response.request.attribute;
+        });
+        if (term) {
+          term.count = response.value;
+        }
+        var freeTerm = $scope.data.terms.find((term) => {
+          return term.term === $scope.remainder;
+        });
+        freeTerm.count = $scope.data.total;
+        $scope.data.terms.forEach((term) => {
+          if (term.term !== $scope.remainder) {
+            freeTerm.count = freeTerm.count - term.count;
+          }
+        });
+      }
+      if ($scope.template === "") {
+        $scope.template = $templateCache.get("donut");
+      }
+      // console.log("Data: ", $scope.data);
+      $scope.data = Object.clone($scope.data);
+      Core.$apply($scope);
+    };
+
+    Core.register(jolokia, $scope, $scope.reqs, onSuccess($scope.render));
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/jmx/js/jmxPlugin.ts b/hawtio-web/src/main/webapp/app/jmx/js/jmxPlugin.ts
@@ -7,8 +7,9 @@ module Jmx {
             when('/jmx/operations', {templateUrl: 'app/jmx/html/operations.html'}).
             when('/jmx/charts', {templateUrl: 'app/jmx/html/charts.html'}).
             when('/jmx/chartEdit', {templateUrl: 'app/jmx/html/chartEdit.html'}).
-            when('/jmx/help/:tabName', {templateUrl: 'app/core/html/help.html'})
-  }).
+            when('/jmx/help/:tabName', {templateUrl: 'app/core/html/help.html'}).
+            when('/jmx/widget/donut', {templateUrl: 'app/jmx/html/donutChart.html'});
+          }).
           factory('jmxTreeLazyLoadRegistry',function () {
             return Jmx.lazyLoaders;
           }).