Mercurial > hg > thermostat-ng > web-client

changeset 265:e3bdfc852d81

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Replace jvm-memory donut charts with utilization bars Reviewed-by: jkang Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-October/025371.html
author Andrew Azores <aazores@redhat.com>
date Wed, 11 Oct 2017 14:59:09 -0400
parents 71f13dfad691
children 36e99edc6d66
files src/app/components/jvm-info/jvm-memory/jvm-memory.controller.js src/app/components/jvm-info/jvm-memory/jvm-memory.controller.spec.js src/app/components/jvm-info/jvm-memory/jvm-memory.html
diffstat 3 files changed, 82 insertions(+), 60 deletions(-) [+]
line wrap: on
line diff
--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.js	Wed Oct 11 14:59:09 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.js	Wed Oct 11 14:59:09 2017 -0400
@@ -32,29 +32,32 @@
 
 class JvmMemoryController {
   constructor ($stateParams, $interval, jvmMemoryService, metricToBigIntFilter,
-    bigIntToStringFilter, stringToNumberFilter, scaleBytesService, sanitizeService) {
+    bigIntToStringFilter, stringToNumberFilter, metricToNumberFilter, scaleBytesService,
+    sanitizeService, $translate) {
     'ngInject';
 
     this.jvmId = $stateParams.jvmId;
     this._interval = $interval;
     this._jvmMemoryService = jvmMemoryService;
     this._sanitizeService = sanitizeService;
+    this._translate = $translate;
 
     this._metricToBigInt = metricToBigIntFilter;
     this._bigIntToString = bigIntToStringFilter;
     this._stringToNumber = stringToNumberFilter;
+    this._metricToNumber = metricToNumberFilter;
     this._scaleBytes = scaleBytesService;
 
-    this.metaspaceData = {
+    this.metaspaceSnapshotData = {
       used: 0,
       total: 0
     };
-    this.metaspaceConfig = {
+    this.metaspaceBarConfig = {
       chartId: 'metaspaceChart',
       units: 'B'
     };
-    this.spaceConfigs = [];
-    this.generationData = {};
+    this.spaceBarConfigs = [];
+    this.generationSnapshotData = {};
 
     this._refreshRate = 2000;
   }
@@ -114,34 +117,38 @@
 
   _update () {
     this._jvmMemoryService.getJvmMemory(this.jvmId).then(resp => {
-      let data = resp[0];
-      let metaspaceScale = this._scaleBytes.format(data.metaspaceUsed);
-      this.metaspaceData.used = this.convertMemStat(data.metaspaceUsed, metaspaceScale.scale);
-      this.metaspaceData.total = this.convertMemStat(data.metaspaceCapacity, metaspaceScale.scale);
+      this._updateBarCharts(resp[0]);
+    });
+  }
 
-      // re-assign chart config so that Angular picks up the change. If we only re-assign property values
-      // on the same config object, those config updates are not detected and do not reflect in the charts.
-      this.metaspaceConfig = {
-        chartId: this.metaspaceConfig.chartId,
-        units: metaspaceScale.unit
-      };
+  _updateBarCharts (data) {
+    let metaspaceScale = this._scaleBytes.format(data.metaspaceUsed);
+    this.metaspaceSnapshotData.used = this.convertMemStat(data.metaspaceUsed, metaspaceScale.scale);
+    this.metaspaceSnapshotData.total = this.convertMemStat(data.metaspaceCapacity, metaspaceScale.scale);
+
+    // re-assign chart config so that Angular picks up the change. If we only re-assign property values
+    // on the same config object, those config updates are not detected and do not reflect in the charts.
+    this.metaspaceBarConfig = {
+      chartId: this.metaspaceBarConfig.chartId,
+      units: metaspaceScale.unit
+    };
 
-      for (let i = 0; i < data.generations.length; i++) {
-        let generation = data.generations[i];
-        let gen;
-        if (this.generationData.hasOwnProperty(i)) {
-          gen = this.generationData[i];
-        } else {
-          gen = {
-            index: i,
-            name: generation.name,
-            collector: generation.collector,
-            spaces: []
-          };
-        }
-        for (let j = 0; j < generation.spaces.length; j++) {
-          let space = generation.spaces[j];
-
+    for (let i = 0; i < data.generations.length; i++) {
+      let generation = data.generations[i];
+      let gen;
+      if (this.generationSnapshotData.hasOwnProperty(i)) {
+        gen = this.generationSnapshotData[i];
+      } else {
+        gen = {
+          index: i,
+          name: generation.name,
+          collector: generation.collector,
+          spaces: []
+        };
+      }
+      for (let j = 0; j < generation.spaces.length; j++) {
+        let space = generation.spaces[j];
+        this._translate('jvmMemory.SPACE', { index: space.index }).then(chartTitle => {
           let genScale = this._scaleBytes.format(space.used);
 
           if (gen.spaces.hasOwnProperty(space.index)) {
@@ -156,14 +163,15 @@
           }
 
           let spaceKey = 'gen-' + gen.index + '-space-' + space.index;
-          this.spaceConfigs[spaceKey] = {
+          this.spaceBarConfigs[spaceKey] = {
             chartId: spaceKey,
-            units: genScale.unit
+            units: genScale.unit,
+            title: chartTitle
           };
-        }
-        this.generationData[i] = gen;
+        });
       }
-    });
+      this.generationSnapshotData[i] = gen;
+    }
   }
 
   convertMemStat (stat, scale) {
--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.spec.js	Wed Oct 11 14:59:09 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.controller.spec.js	Wed Oct 11 14:59:09 2017 -0400
@@ -31,7 +31,7 @@
 
 describe('JvmMemory controller', () => {
 
-  let interval, memSvc, scaleSvc, promise, ctrl, sanitizeSvc;
+  let interval, memSvc, scaleSvc, promise, ctrl, sanitizeSvc, translate;
   beforeEach(() => {
     angular.mock.module(filtersModule);
     angular.mock.module(servicesModule);
@@ -60,12 +60,17 @@
         sanitize: sinon.stub().returns('sanitized-mock')
       };
 
+      translate = sinon.stub().returns({
+        then: sinon.stub().yields('chart-title')
+      });
+
       ctrl = $controller('JvmMemoryController', {
         $stateParams: { jvmId: 'foo-jvmId' },
         $interval: interval,
         jvmMemoryService: memSvc,
         scaleBytesService: scaleSvc,
-        sanitizeService: sanitizeSvc
+        sanitizeService: sanitizeSvc,
+        $translate: translate
       });
       ctrl.$onInit();
 
@@ -83,17 +88,17 @@
     should.exist(ctrl);
   });
 
-  it('should assign an initial metaspaceData object', () => {
-    ctrl.should.have.ownProperty('metaspaceData');
-    ctrl.metaspaceData.should.deepEqual({
+  it('should assign an initial metaspaceSnapshotData object', () => {
+    ctrl.should.have.ownProperty('metaspaceSnapshotData');
+    ctrl.metaspaceSnapshotData.should.deepEqual({
       used: 0,
       total: 0
     });
   });
 
-  it('should assign a metaspaceConfig object', () => {
-    ctrl.should.have.ownProperty('metaspaceConfig');
-    ctrl.metaspaceConfig.should.deepEqual({
+  it('should assign a metaspaceBarConfig object', () => {
+    ctrl.should.have.ownProperty('metaspaceBarConfig');
+    ctrl.metaspaceBarConfig.should.deepEqual({
       chartId: 'metaspaceChart',
       units: 'B'
     });
@@ -180,8 +185,8 @@
       func(data);
     });
 
-    it('should update metaspaceData', () => {
-      ctrl.metaspaceData.should.deepEqual({
+    it('should update metaspaceSnapshotData', () => {
+      ctrl.metaspaceSnapshotData.should.deepEqual({
         used: 20,
         total: 40
       });
@@ -189,8 +194,8 @@
       scaleSvc.format.should.be.calledWithMatch({ $numberLong: (20 * 1024 * 1024).toString() });
     });
 
-    it('should add generationData', () => {
-      ctrl.generationData.should.deepEqual({
+    it('should add generationSnapshotData', () => {
+      ctrl.generationSnapshotData.should.deepEqual({
         0: {
           index: 0,
           name: 'Generation 0',
@@ -208,13 +213,13 @@
       scaleSvc.format.should.be.calledWithMatch({ $numberLong: (30 * 1024 * 1024).toString() });
     });
 
-    it('should update generationData on repeated calls', () => {
+    it('should update generationSnapshotData on repeated calls', () => {
       let generation = data[0].generations[0];
       let space = generation.spaces[0];
       space.capacity = { $numberLong: (100 * 1024 * 1024).toString() };
       space.used = { $numberLong: (50 * 1024 * 1024).toString() };
       func(data);
-      ctrl.generationData.should.deepEqual({
+      ctrl.generationSnapshotData.should.deepEqual({
         0: {
           index: 0,
           name: 'Generation 0',
--- a/src/app/components/jvm-info/jvm-memory/jvm-memory.html	Wed Oct 11 14:59:09 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/jvm-memory.html	Wed Oct 11 14:59:09 2017 -0400
@@ -17,14 +17,18 @@
   <div class="row row-cards-pf">
     <div class="container-fluid container-cards-pf">
 
-      <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
+      <div class="col">
         <div class="card-pf card-pf-view">
           <div class="card-pf-heading">
             <label class="card-pf-title" translate>jvmMemory.METASPACE</label>
+            <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-metaspace" get-fn="$ctrl.multichartMetaspace()"></mc-add>
           </div>
           <div class="card-pf-body">
-            <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-metaspace" get-fn="$ctrl.multichartMetaspace()"></mc-add>
-            <pf-donut-pct-chart id="metaspaceChart" config="$ctrl.metaspaceConfig" data="$ctrl.metaspaceData"></pf-donut-pct-chart>
+            <pf-utilization-bar-chart
+              id="metaspaceChart"
+              layout="{type: 'inline'}"
+              units="$ctrl.metaspaceBarConfig.units"
+              chart-data="$ctrl.metaspaceSnapshotData"></pf-utilization-bar-chart>
           </div>
         </div>
       </div>
@@ -36,18 +40,23 @@
   <div class="row row-cards-pf">
     <div class="container-fluid container-cards-pf">
 
-        <div ng-repeat="(index, generation) in $ctrl.generationData" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
+        <div ng-repeat="(index, generation) in $ctrl.generationSnapshotData" class="col">
           <div class="card-pf card-pf-view">
             <div class="card-pf-heading">
               <label class="card-pf-title" translate="jvmMemory.COLLECTOR" translate-values="{ name: generation.name, collector: generation.collector }"></label>
             </div>
             <div ng-repeat="space in generation.spaces">
-              <div class="card-pf-body text-center">
-                <label translate="jvmMemory.SPACE" translate-values="{ index: space.index }"></label>
-                <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-{{$ctrl.sanitize(generation.name)}}-space{{space.index}}"
-                                           get-fn="$ctrl.multichartSpace(index, space.index)"></mc-add>
-                <pf-donut-pct-chart id="gen-{{gen.index}}-space-{{space.index}}"
-                  config="$ctrl.spaceConfigs['gen-' + generation.index + '-space-' + space.index]" data="space"></pf-donut-pct-chart>
+              <div class="card-pf-body">
+                <mc-add
+                   class="pull-right"
+                   svc-name="{{$ctrl.jvmId}}-{{$ctrl.sanitize(generation.name)}}-space{{space.index}}"
+                   get-fn="$ctrl.multichartSpace(index, space.index)"></mc-add>
+                <pf-utilization-bar-chart
+                   id="gen-{{gen.index}}-space-{{space.index}}"
+                   chart-title="$ctrl.spaceBarConfigs['gen-' + generation.index + '-space-' + space.index].title"
+                   layout="{type: 'inline'}"
+                   units="$ctrl.spaceBarConfigs['gen-' + generation.index + '-space-' + space.index].units"
+                   chart-data="space"></pf-utilization-bar-chart>
               </div>
             </div>
           </div>