Mercurial > hg > thermostat-ng > web-client
changeset 266:36e99edc6d66
Add jvm-memory timeseries line charts
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 | e3bdfc852d81 |
| children | 8fea191dbff0 |
| files | src/app/components/jvm-info/jvm-memory/en.locale.yaml 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 | 4 files changed, 133 insertions(+), 15 deletions(-) [+] |
line wrap: on
line diff
--- 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
--- 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 };
--- 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' }); });
--- 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>