Skip to content

S
spring-boot-admin
Commit 82d707e6 by coestre Committed by Johannes Edmeier
Options

Modify the metrics page to show up more values

With this commit all values from /metrics are shown and a option to filter these values is provided closes #264
parent 1430d941
Showing with 72 additions and 56 deletions
spring-boot-admin-server-ui/modules/applications-metrics/controllers/metricsCtrl.js
......@@ -18,11 +18,10 @@
module.exports = function ($scope, application) {
'ngInject';
$scope.counters = [];
$scope.countersMax = 0;
$scope.gauges = [];
$scope.gaugesMax = 0;
var metricData = {'gauge': []};
var metricDataMax = {'gauge': 0};
$scope.showRichGauges = false;
$scope.metrics = [];
application.getMetrics().then(
function (response) {
......@@ -40,78 +39,99 @@ module.exports = function ($scope, application) {
var find = function (metrics, regexes, callbacks) {
for (var metric in metrics) {
for (var i = 0; i < regexes.length; i++) {
var match = regexes[i].exec(metric);
if (match !== null) {
callbacks[i](metric, match, metrics[metric]);
break;
if(metrics.hasOwnProperty(metric)) {
for (var i = 0; i < regexes.length; i++) {
var match = regexes[i].exec(metric);
if (match !== null) {
callbacks[i](metric, match, metrics[metric]);
break;
}
}
}
}
for (var key in metricData) {
if(metricData.hasOwnProperty(key)) {
$scope.metrics.push({
name: key,
values: metricData[key],
max: metricDataMax[key] || 0
});
}
}
};
var regexes = [/^(?!gauge)([a-zA-Z0-9]+)\..*/gi, /(gauge\..+)\.val/, /(gauge\..+)\.avg/, /(gauge\..+)\.min/, /(gauge\..+)\.max/, /(gauge\..+)\.count/, /(gauge\..+)\.alpha/, /(gauge\..+)/];
var regexes = [/counter\..+/, /(gauge\..+)\.val/, /(gauge\..+)\.avg/, /(gauge\..+)\.min/, /(gauge\..+)\.max/, /(gauge\..+)\.count/, /(gauge\..+)\.alpha/, /(gauge\..+)/];
var callbacks = [
function (metric, match, value) {
$scope.counters.push({
name: metric,
value: value
});
if (value > $scope.countersMax) {
$scope.countersMax = value;
if(typeof metricData[match[1]] === 'undefined'){
metricData[match[1]] = [];
}
if(typeof metricDataMax[match[1]] === 'undefined'){
metricDataMax[match[1]] = 0;
}
if (match.length >= 2 && match[1] !== null) {
metricData[match[1]].push({
name: metric,
value: value
});
if (value > metricDataMax[match[1]]) {
metricDataMax[match[1]] = value;
}
}
},
function (metric, match, value) {
merge($scope.gauges, {
merge(metricData['gauge'], {
name: match[1],
value: value
});
$scope.showRichGauges = true;
if (value > $scope.gaugesMax) {
$scope.gaugesMax = value;
if (value > metricDataMax['gauge']) {
metricDataMax['gauge'] = value;
}
},
function (metric, match, value) {
merge($scope.gauges, {
merge(metricData['gauge'], {
name: match[1],
avg: value.toFixed(2)
});
},
function (metric, match, value) {
merge($scope.gauges, {
merge(metricData['gauge'], {
name: match[1],
min: value
});
},
function (metric, match, value) {
merge($scope.gauges, {
merge(metricData['gauge'], {
name: match[1],
max: value
});
if (value > $scope.gaugesMax) {
$scope.gaugesMax = value;
if (value > metricDataMax['gauge']) {
metricDataMax['gauge'] = value;
}
},
function (metric, match, value) {
merge($scope.gauges, {
merge(metricData['gauge'], {
name: match[1],
count: value
});
},
function () { /* NOP */ },
function () { /* NOP */
},
function (metric, match, value) {
merge($scope.gauges, {
merge(metricData['gauge'], {
name: match[1],
value: value
});
if (value > $scope.gaugesMax) {
$scope.gaugesMax = value;
if (value > metricDataMax['gauge']) {
metricDataMax['gauge'] = value;
}
}];
find(response.data, regexes, callbacks);
}
).catch(function (response) {
$scope.error = response.data;
......
spring-boot-admin-server-ui/modules/applications-metrics/views/metrics.html
<div class="container">
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<sba-info-panel panel-title="Counter" raw="api/applications/{{ application.id }}/metrics/counter.*">
<table class="table" ng-if="counters.length > 0">
<tr ng-repeat="counter in counters">
<td>
<sba-simple-metric-bar for-metric="counter" global-max="countersMax"></sba-simple-metric-bar>
</td>
</tr>
</table>
</sba-info-panel>
<sba-info-panel panel-title="Gauges" raw="api/applications/{{ application.id }}/metrics/gauge.*">
<table class="table" ng-if="gauges.length > 0">
<tr ng-if="showRichGauges" ng-repeat="gauge in gauges">
<td>
<sba-rich-metric-bar for-metric="gauge" global-max="gaugesMax"></sba-rich-metric-bar>
</td>
</tr>
<tr ng-if="!showRichGauges" ng-repeat="gauge in gauges">
<td>
<sba-simple-metric-bar for-metric="gauge" global-max="gaugesMax"></sba-simple-metric-bar>
</td>
</tr>
</table>
</sba-info-panel>
<div class="alert alert-error" ng-if="error">
<b>Error:</b> {{ error }}
</div>
<div>
<input placeholder="Filter" class="input-xxlarge" type="search" ng-model="searchFilter"/>
</div>
<sba-info-panel ng-repeat="metric in metrics | orderBy:'name'" panel-title="{{ metric.name }}"
raw="api/applications/{{ application.id }}/metrics/{{ metric.name }}.*"
ng-show="!searchFilter || (metric.values | filter:searchFilter).length > 0">
<table class="table">
<tr ng-if="showRichGauges" ng-repeat="m in metric.values | filter:searchFilter">
<td>
<sba-rich-metric-bar for-metric="m" global-max="metric.max"></sba-rich-metric-bar>
</td>
</tr>
<tr ng-if="!showRichGauges" ng-repeat="m in metric.values | filter:searchFilter">
<td>
<sba-simple-metric-bar for-metric="m" global-max="metric.max"></sba-simple-metric-bar>
</td>
</tr>
</table>
</sba-info-panel>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment