# HG changeset patch
# User Andrew Azores <aazores@redhat.com>
# Date 1507748349 14400
# Node ID 36e99edc6d666ca02a843359d35ca3cbe90cbb65
# Parent  e3bdfc852d816a30a835bdc3062b2a85236224b2
Add jvm-memory timeseries line charts

Reviewed-by: jkang
Review-thread: http://icedtea.classpath.org/pipermail/thermostat/2017-October/025371.html

diff -r e3bdfc852d81 -r 36e99edc6d66 src/app/components/jvm-info/jvm-memory/en.locale.yaml
--- a/src/app/components/jvm-info/jvm-memory/en.locale.yaml	Wed Oct 11 14:59:09 2017 -0400
+++ b/src/app/components/jvm-info/jvm-memory/en.locale.yaml	Wed Oct 11 14:59:09 2017 -0400
@@ -3,6 +3,8 @@
   METASPACE: Metaspace
   COLLECTOR: '{{name}} ({{collector}})'
   SPACE: Space {{index}}
+  X_AXIS_LABEL: Time
+  Y_AXIS_LABEL: Bytes
 
   refresh:
     DISABLED: Disabled
diff -r e3bdfc852d81 -r 36e99edc6d66 src/app/components/jvm-info/jvm-memory/jvm-memory.controller.js
--- 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,7 +32,8 @@
 
 class JvmMemoryController {
   constructor ($stateParams, $interval, jvmMemoryService, metricToBigIntFilter,
-    bigIntToStringFilter, stringToNumberFilter, metricToNumberFilter, scaleBytesService,
+    bigIntToStringFilter, stringToNumberFilter, dateFilter, DATE_FORMAT,
+    metricToNumberFilter, scaleBytesService,
     sanitizeService, $translate) {
     'ngInject';
 
@@ -45,6 +46,8 @@
     this._metricToBigInt = metricToBigIntFilter;
     this._bigIntToString = bigIntToStringFilter;
     this._stringToNumber = stringToNumberFilter;
+    this._dateFilter = dateFilter;
+    this._dateFormat = DATE_FORMAT;
     this._metricToNumber = metricToNumberFilter;
     this._scaleBytes = scaleBytesService;
 
@@ -52,16 +55,92 @@
       used: 0,
       total: 0
     };
+    this.metaspaceSeriesData = {
+      xData: ['timestamp'],
+      yData: ['memory']
+    };
     this.metaspaceBarConfig = {
-      chartId: 'metaspaceChart',
       units: 'B'
     };
+
+    $translate(['jvmMemory.X_AXIS_LABEL', 'jvmMemory.Y_AXIS_LABEL']).then(translations => {
+      this._xAxisLabel = translations['jvmMemory.X_AXIS_LABEL'];
+      this._yAxisLabel = translations['jvmMemory.Y_AXIS_LABEL'];
+      this.metaspaceLineConfig = {
+        chartId: 'metaspaceLineChart',
+        units: 'B',
+        axis: {
+          x: {
+            show: true,
+            type: 'timeseries',
+            label: {
+              text: this._xAxisLabel,
+              position: 'outer-center'
+            },
+            tick : {
+              format: timestamp => this._dateFilter(timestamp, this._dateFormat.time.medium),
+              count: 5,
+              fit: false
+            }
+          },
+          y: {
+            show: true,
+            min: 0,
+            padding: 0,
+            tick: 10,
+            label: {
+              text: this._yAxisLabel,
+              position: 'outer-middle'
+            }
+          }
+        }
+      };
+    });
     this.spaceBarConfigs = [];
     this.generationSnapshotData = {};
+    this.generationSeriesData = {};
+    this.generationLineConfigs = new Map();
 
     this._refreshRate = 2000;
   }
 
+  getLineConfig (genIndex, spaceIndex) {
+    let key = `line-gen-${genIndex}-space-${spaceIndex}`;
+    if (!this.generationLineConfigs.has(key)) {
+      let config = {
+        chartId: key,
+        units: 'B',
+        axis: {
+          x: {
+            show: true,
+            type: 'timeseries',
+            label: {
+              text: this._xAxisLabel,
+              position: 'outer-center'
+            },
+            tick : {
+              format: timestamp => this._dateFilter(timestamp, this._dateFormat.time.medium),
+              count: 5,
+              fit: false
+            }
+          },
+          y: {
+            show: true,
+            min: 0,
+            padding: 0,
+            tick: 10,
+            label: {
+              text: this._yAxisLabel,
+              position: 'outer-middle'
+            }
+          }
+        }
+      };
+      this.generationLineConfigs.set(key, config);
+    }
+    return this.generationLineConfigs.get(key);
+  }
+
   $onInit () {
     this._start();
   }
@@ -117,10 +196,40 @@
 
   _update () {
     this._jvmMemoryService.getJvmMemory(this.jvmId).then(resp => {
+      resp.forEach(update => {
+        for (let i = 0; i < update.generations.length; i++) {
+          update.generations[i].index = i;
+        }
+      });
+      this._updateLineCharts(resp);
       this._updateBarCharts(resp[0]);
     });
   }
 
+  _updateLineCharts (updates) {
+    updates.forEach(update => {
+      let timestamp = this._metricToNumber(update.timeStamp);
+      let metaspaceUsed = this._metricToNumber(update.metaspaceUsed);
+
+      this.metaspaceSeriesData.xData.push(timestamp);
+      this.metaspaceSeriesData.yData.push(metaspaceUsed);
+
+      update.generations.forEach(generation => {
+        generation.spaces.forEach(space => {
+          let key = `gen-${generation.index}-space-${space.index}`;
+          if (!this.generationSeriesData.hasOwnProperty(key)) {
+            this.generationSeriesData[key] = {
+              xData: ['timestamp'],
+              yData: ['memory']
+            };
+          }
+          this.generationSeriesData[key].xData.push(timestamp);
+          this.generationSeriesData[key].yData.push(this.convertMemStat(space.used));
+        });
+      });
+    });
+  }
+
   _updateBarCharts (data) {
     let metaspaceScale = this._scaleBytes.format(data.metaspaceUsed);
     this.metaspaceSnapshotData.used = this.convertMemStat(data.metaspaceUsed, metaspaceScale.scale);
@@ -164,7 +273,6 @@
 
           let spaceKey = 'gen-' + gen.index + '-space-' + space.index;
           this.spaceBarConfigs[spaceKey] = {
-            chartId: spaceKey,
             units: genScale.unit,
             title: chartTitle
           };
diff -r e3bdfc852d81 -r 36e99edc6d66 src/app/components/jvm-info/jvm-memory/jvm-memory.controller.spec.js
--- 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
@@ -99,7 +99,6 @@
   it('should assign a metaspaceBarConfig object', () => {
     ctrl.should.have.ownProperty('metaspaceBarConfig');
     ctrl.metaspaceBarConfig.should.deepEqual({
-      chartId: 'metaspaceChart',
       units: 'B'
     });
   });
diff -r e3bdfc852d81 -r 36e99edc6d66 src/app/components/jvm-info/jvm-memory/jvm-memory.html
--- 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
@@ -24,8 +24,12 @@
             <mc-add class="pull-right" svc-name="{{$ctrl.jvmId}}-metaspace" get-fn="$ctrl.multichartMetaspace()"></mc-add>
           </div>
           <div class="card-pf-body">
+            <pf-line-chart
+               id="metaspaceLineChart"
+               config="$ctrl.metaspaceLineConfig"
+               chart-data="$ctrl.metaspaceSeriesData"
+               ></pf-line-chart>
             <pf-utilization-bar-chart
-              id="metaspaceChart"
               layout="{type: 'inline'}"
               units="$ctrl.metaspaceBarConfig.units"
               chart-data="$ctrl.metaspaceSnapshotData"></pf-utilization-bar-chart>
@@ -47,16 +51,21 @@
             </div>
             <div ng-repeat="space in generation.spaces">
               <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>
+                 <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-line-chart
+                    id="line-gen-{{generation.index}}-space-{{space.index}}"
+                    config="$ctrl.getLineConfig(generation.index, space.index)"
+                    chart-data="$ctrl.generationSeriesData['gen-' + generation.index + '-space-' + space.index]"
+                   ></pf-line-chart>
+                 <pf-utilization-bar-chart
+                    id="bar-gen-{{generation.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>