Add area chart JMX widget

hawtio · Sep 26, 2013 · e82119d · e82119d
1 parent a5a0619
commit e82119d
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 3 deletions.
diff --git a/hawtio-web/src/main/webapp/app/jmx/html/areaChart.html b/hawtio-web/src/main/webapp/app/jmx/html/areaChart.html
@@ -0,0 +1,6 @@
+<div ng-controller="Jmx.AreaChartController">
+  <script type="text/ng-template" id="areaChart">
+    <fs-area bind="data" duration="count" interpolate="true" point-radius="5" width="600" height="300"></fs-area>
+  </script>
+  <div compile="template"></div>
+</div>
diff --git a/hawtio-web/src/main/webapp/app/jmx/js/areaChart.ts b/hawtio-web/src/main/webapp/app/jmx/js/areaChart.ts
@@ -0,0 +1,53 @@
+module Jmx {
+
+  export function AreaChartController($scope, $routeParams, jolokia, $templateCache, localStorage) {
+
+    $scope.mbean = $routeParams['mbean'];
+    $scope.attribute = $routeParams['attribute'];
+
+    $scope.template = "";
+
+    $scope.entries = [];
+
+    $scope.data = {
+      entries: $scope.entries
+    };
+
+    $scope.count = 0;
+
+    $scope.req = [{type: 'read', mbean: $scope.mbean, attribute: $scope.attribute}];
+
+
+
+    $scope.render = (response) => {
+
+      $scope.count = $scope.count + localStorage['updateRate'];
+
+      $scope.entries.push({
+        time: response.timestamp,
+        count: response.value
+      });
+
+      $scope.entries = $scope.entries.last(15);
+
+      if ($scope.template === "") {
+        $scope.template = $templateCache.get("areaChart");
+      }
+
+      $scope.data = {
+        _type: "date_histogram",
+        entries: $scope.entries
+      };
+
+      Core.$apply($scope);
+
+    }
+
+    Core.register(jolokia, $scope, $scope.req, 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
@@ -8,7 +8,8 @@ module Jmx {
             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/widget/donut', {templateUrl: 'app/jmx/html/donutChart.html'});
+            when('/jmx/widget/donut', {templateUrl: 'app/jmx/html/donutChart.html'}).
+            when('/jmx/widget/area', {templateUrl: 'app/jmx/html/areaChart.html'});
           }).
           factory('jmxTreeLazyLoadRegistry',function () {
             return Jmx.lazyLoaders;

diff --git a/hawtio-web/src/main/webapp/app/jmx/js/widgetRepository.ts b/hawtio-web/src/main/webapp/app/jmx/js/widgetRepository.ts
@@ -27,9 +27,17 @@ module Jmx {
       type: "donut",
       icon: "icon-smile",
       route: "/jmx/widget/donut",
-      size_x: 1,
-      size_y: 1,
+      size_x: 2,
+      size_y: 2,
       title: "Add Donut chart to Dashboard"
+    },
+    {
+      type: "area",
+      icon: "icon-bar-chart",
+      route: "/jmx/widget/area",
+      size_x: 4,
+      size_y: 2,
+      title: "Add Area chart to Dashboard"
     }
   ];
 
@@ -75,6 +83,30 @@ module Jmx {
       total: "TotalSwapSpaceSize",
       terms: "FreeSwapSpaceSize",
       remaining: "Used Swap"
+    },
+    {
+      type: "area",
+      title: "Process CPU Time",
+      mbean: "java.lang:type=OperatingSystem",
+      attribute: "ProcessCpuTime"
+    },
+    {
+      type: "area",
+      title: "Process CPU Load",
+      mbean: "java.lang:type=OperatingSystem",
+      attribute: "ProcessCpuLoad"
+    },
+    {
+      type: "area",
+      title: "System CPU Load",
+      mbean: "java.lang:type=OperatingSystem",
+      attribute: "SystemCpuLoad"
+    },
+    {
+      type: "area",
+      title: "System CPU Time",
+      mbean: "java.lang:type=OperatingSystem",
+      attribute: "SystemCpuTime"
     }
   ];