Merge pull request #275 from ammendonca/HWK-JVM-CHARTS

HAWKULAR-217 : Integrate JVM charts
hawkular · Jun 30, 2015 · 9c8c274 · 9c8c274
2 parents 97177ad + 5521854
commit 9c8c274
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 7 deletions.
diff --git a/ui/console/src/main/scripts/bower.json b/ui/console/src/main/scripts/bower.json
@@ -22,7 +22,7 @@
     "bootstrap-select": "1.6",
     "d3": "3.5.5",
     "event-drops": "0.1.1",
-    "hawkular-charts": "0.3.13",
+    "hawkular-charts": "0.4.2",
     "hawkular-ui-services": "0.5.0",
     "hawtio-core-navigation": "2.0.51",
     "hawtio-core": "2.0.16",

diff --git a/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-jvm.html b/ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-jvm.html
@@ -20,7 +20,7 @@ <h3 class="pull-left">JVM Status</h3>
         <span class="hk-item">Last Garbage Collection (Duration)</span>
       </div>
       <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data" ng-show="vm.heapUsage">{{ vm.heapUsage.max / 1024 / 1024 | number : 0 }} MB</span>
+        <span class="hk-data" ng-show="vm.heapUsage">{{ vm.maxHeap / 1024 / 1024 | number : 0 }} MB</span>
         <span class="hk-data" ng-hide="vm.heapUsage">n/a</span>
         <span class="hk-item">Maximum Heap</span>
       </div>
@@ -47,20 +47,46 @@ <h3 class="pull-left">
       <div class="hk-event"><strong>Alert Summary</strong>: alert details.</div>
     </div>
   </div>
-
   <div class="hk-info-top clearfix">
     <h3 class="pull-left">Metrics</h3>
     <div class="hk-update pull-right">
-      <button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart"><i class="fa fa-refresh"></i></button>
+      <button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart" ng-click="vm.getJvmChartData()"><i class="fa fa-refresh"></i></button>
     </div>
   </div>
 
-  <div class="panel panel-default hk-graph">
+  <div class="panel panel-default hk-graph" ng-if="vm.chartHeapData[0]">
     <h2>JVM Heap Usage</h2>
+    <div id="metrics-chart">
+      <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
+      <hawkular-chart
+          multi-data="{{vm.chartHeapData}}"
+          chart-type="multiline"
+          y-axis-units="bytes"
+          chart-height="250">
+      </hawkular-chart>
+    </div>
+    <div class="hk-legend text-left">
+      <span><i class="fa fa-circle hk-primary" style="color: #168ABC"></i>Used</span>
+      <span><i class="fa fa-circle hk-orange"></i>Maximum</span>
+      <span><i class="fa fa-circle hk-gray" style="color: #555555"></i>Commited</span>
+    </div>
+  </div>
+
+  <div class="panel panel-default hk-graph" ng-if="vm.chartNonHeapData[0]">
+    <h2>Non Heap Usage</h2>
+    <div id="metrics-chart">
+      <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
+      <hawkular-chart
+          multi-data="{{vm.chartNonHeapData}}"
+          chart-type="multiline"
+          y-axis-units="bytes"
+          chart-height="250">
+      </hawkular-chart>
+    </div>
     <div class="hk-legend text-left">
-      <span><i class="fa fa-circle hk-primary"></i>Used</span>
+      <span><i class="fa fa-circle hk-primary" style="color: #168ABC"></i>Used</span>
       <span><i class="fa fa-circle hk-orange"></i>Maximum</span>
-      <span><i class="fa fa-circle hk-gray"></i>Commited</span>
+      <span><i class="fa fa-circle hk-gray" style="color: #555555"></i>Commited</span>
     </div>
   </div>
 

diff --git a/...le/src/main/scripts/plugins/metrics/plugins/metrics/ts/app-details/appServerJvmDetails.ts b/...le/src/main/scripts/plugins/metrics/plugins/metrics/ts/app-details/appServerJvmDetails.ts
@@ -21,13 +21,21 @@
 
 module HawkularMetrics {
 
+  export interface IMultiDataPoint {
+    key: string;
+    color: string;
+    values: IChartDataPoint[];
+  }
+
   export class AppServerJvmDetailsController {
     /// this is for minification purposes
     public static $inject = ['$location', '$scope', '$rootScope', '$interval', '$log', '$filter', '$routeParams', '$modal', 'HawkularInventory', 'HawkularMetric', 'HawkularAlert', 'HawkularAlertsManager', 'HawkularErrorManager', '$q', 'md5'];
 
     private resourceList;
     private metricsList;
     public alertList;
+    public chartHeapData: IMultiDataPoint[];
+    public chartNonHeapData: IMultiDataPoint[];
 
     constructor(private $location: ng.ILocationService,
       private $scope: any,
@@ -51,6 +59,8 @@ module HawkularMetrics {
 
         this.startTimeStamp = +moment().subtract(($routeParams.timeOffset || 3600000), 'milliseconds');
         this.endTimeStamp = +moment();
+        this.chartHeapData = [];
+        this.chartNonHeapData = [];
 
         if ($rootScope.currentPersona) {
           this.getJvmData(this.$rootScope.currentPersona.id);
@@ -72,6 +82,7 @@ module HawkularMetrics {
     autoRefresh(intervalInSeconds: number): void {
       this.autoRefreshPromise = this.$interval(() => {
         this.getJvmData();
+        this.getJvmChartData();
       }, intervalInSeconds * 1000);
 
       this.$scope.$on('$destroy', () => {
@@ -92,6 +103,67 @@ module HawkularMetrics {
         buckets: 1}, (resource) => {
           this['heapUsage'] = resource[0];
         }, this);
+      this.getJvmChartData(currentTenantId);
+    }
+
+    getJvmChartData(currentTenantId?: TenantId): any {
+      this.HawkularInventory.ResourceOfType.query({resourceTypeId: 'WildFly Server'}, (aResourceList, getResponseHeaders) => {
+      //this.HawkularInventory.FeedResource.get({environmentId: 'test', feedId: '...',resourceId: '[' + this.$routeParams.resourceId + '~/]'}, (resource, getResponseHeaders) => {
+        var resource = this.$filter('filter')(aResourceList, {id: '[' + this.$routeParams.resourceId + '~/]'}, true)[0];
+        this['maxHeap'] = parseInt(this.$filter('filter')(resource.properties.resourceConfiguration, {name: 'Max Heap'})[0].value, 10);
+      });
+
+      this.endTimeStamp = this.$routeParams.endTime || +moment();
+      this.startTimeStamp = this.endTimeStamp - (this.$routeParams.timeOffset || 3600000);
+
+      var tenantId:TenantId = currentTenantId || this.$rootScope.currentPersona.id;
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId + '~/]~MT~WildFly Memory Metrics~Heap Committed',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+          this.chartHeapData[0] = { key: 'Heap Committed', color: '#555555', values: this.formatBucketedChartOutput(data) };
+        }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId + '~/]~MT~WildFly Memory Metrics~Heap Used',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+          this.chartHeapData[1] = { key: 'Heap Used', color: '#168ABC', values: this.formatBucketedChartOutput(data) };
+
+          this.chartHeapData[2] = { key: 'Max Heap', color: '#F2742E', values: JSON.parse(JSON.stringify(this.chartHeapData[1].values)) };
+          for(var i = 0; i < this.chartHeapData[1].values.length; i++) {
+            this.chartHeapData[2].values[i].avg = this['maxHeap'];
+          }
+        }, this);
+
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId + '~/]~MT~WildFly Memory Metrics~NonHeap Committed',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+          this.chartNonHeapData[0] = { key: 'NonHeap Committed', color: '#555555', values: this.formatBucketedChartOutput(data) };
+        }, this);
+      this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
+        gaugeId: 'MI~R~[' + this.$routeParams.resourceId + '~/]~MT~WildFly Memory Metrics~NonHeap Used',
+        start: this.startTimeStamp,
+        end: this.endTimeStamp, buckets:60}, (data) => {
+          this.chartNonHeapData[1] = { key: 'NonHeap Used', color: '#168ABC', values: this.formatBucketedChartOutput(data) };
+        }, this);
+    }
+
+    private formatBucketedChartOutput(response):IChartDataPoint[] {
+      //  The schema is different for bucketed output
+      return _.map(response, (point:IChartDataPoint) => {
+        return {
+          timestamp: point.start,
+          date: new Date(point.start),
+          value: !angular.isNumber(point.value) ? 0 : point.value,
+          avg: (point.empty) ? 0 : point.avg,
+          min: !angular.isNumber(point.min) ? 0 : point.min,
+          max: !angular.isNumber(point.max) ? 0 : point.max,
+          percentile95th: !angular.isNumber(point.percentile95th) ? 0 : point.percentile95th,
+          median: !angular.isNumber(point.median) ? 0 : point.median,
+          empty: point.empty
+        };
+      });
     }
 
   }