Skip to content

N
nexpie-grafana-theme
Commit aef644bd by Torkel Ödegaard
Options

feat(cloudwatch): final polish to the cloudwatch editor, closes #684

parent c34c3ac8
Showing with 94 additions and 154 deletions
public/app/plugins/datasource/cloudwatch/datasource.js
......@@ -35,7 +35,7 @@ function (angular, _) {
query.namespace = templateSrv.replace(target.namespace, options.scopedVars);
query.metricName = templateSrv.replace(target.metricName, options.scopedVars);
query.dimensions = convertDimensionFormat(target.dimensions);
query.statistics = getActivatedStatistics(target.statistics);
query.statistics = target.statistics;
query.period = parseInt(target.period, 10);
var range = end - start;
......@@ -191,7 +191,7 @@ function (angular, _) {
});
}
return this.getDimensionValues(region, namespace, metricName, dimensions).then(transformSuggestData);
return this.getDimensionValues(region, namespace, metricName, dimensions);
}
var ebsVolumeIdsQuery = query.match(/^ebs_volume_ids\(([^,]+?),\s?([^,]+?)\)/);
......@@ -243,52 +243,33 @@ function (angular, _) {
};
function transformMetricData(md, options) {
var result = [];
console.log(options);
var dimensionPart = templateSrv.replace(JSON.stringify(options.dimensions));
_.each(getActivatedStatistics(options.statistics), function(s) {
var originalSettings = _.templateSettings;
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
var aliasRegex = /\{\{(.+?)\}\}/g;
var aliasPattern = options.alias || '{{metric}}_{{stat}}';
var aliasData = {
region: templateSrv.replace(options.region),
namespace: templateSrv.replace(options.namespace),
metric: templateSrv.replace(options.metricName),
};
var template = _.template(options.legendFormat);
var metricLabel;
if (_.isEmpty(options.legendFormat)) {
metricLabel = md.Label + '_' + s + dimensionPart;
} else {
var d = convertDimensionFormat(options.dimensions);
metricLabel = template({
Region: templateSrv.replace(options.region),
Namespace: templateSrv.replace(options.namespace),
MetricName: templateSrv.replace(options.metricName),
Dimensions: d,
Statistics: s
});
}
_.templateSettings = originalSettings;
var dps = _.map(md.Datapoints, function(value) {
return [value[s], new Date(value.Timestamp).getTime()];
});
dps = _.sortBy(dps, function(dp) { return dp[1]; });
result.push({ target: metricLabel, datapoints: dps });
});
_.extend(aliasData, options.dimensions);
return _.map(options.statistics, function(stat) {
var dps = _.chain(md.Datapoints).map(function(dp) {
return [dp[stat], new Date(dp.Timestamp).getTime()];
})
.sortBy(function(dp) {
return dp[1];
}).value();
return result;
aliasData.stat = stat;
var seriesName = aliasPattern.replace(aliasRegex, function(match, g1) {
if (aliasData[g1]) {
return aliasData[g1];
}
return g1;
});
function getActivatedStatistics(statistics) {
var activatedStatistics = [];
_.each(statistics, function(v, k) {
if (v) {
activatedStatistics.push(k);
}
return {target: seriesName, datapoints: dps};
});
return activatedStatistics;
}
function convertToCloudWatchTime(date) {
......@@ -296,10 +277,10 @@ function (angular, _) {
}
function convertDimensionFormat(dimensions) {
return _.map(_.keys(dimensions), function(key) {
return _.map(dimensions, function(value, key) {
return {
Name: templateSrv.replace(key),
Value: templateSrv.replace(dimensions[key])
Value: templateSrv.replace(value)
};
});
}
......
public/app/plugins/datasource/cloudwatch/partials/query.editor.html
......@@ -33,7 +33,7 @@
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 100px">
<li class="tight-form-item query-keyword" style="width: 100px">
Metric
</li>
<li>
......@@ -45,6 +45,12 @@
<li>
<metric-segment segment="metricSegment" get-options="getMetrics()" on-change="metricChanged()"></metric-segment>
</li>
<li class="tight-form-item query-keyword">
Stats
</li>
<li ng-repeat="segment in statSegments">
<metric-segment segment="segment" get-options="getStatSegments(segment, $index)" on-change="statSegmentChanged(segment, $index)"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
......@@ -52,70 +58,33 @@
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 100px">
<li class="tight-form-item query-keyword tight-form-align" style="width: 100px">
Dimensions
</li>
<li ng-repeat="segment in dimSegments">
<metric-segment segment="segment" get-options="getDimSegments(segment, $index)" on-change="dimSegmentChanged(segment, $index)"></metric-segment>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 100px">
Statistics
<li class="tight-form-item query-keyword tight-form-align" style="width: 100px">
Alias
<tip>{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}</tip>
</li>
<li class="tight-form-item">
<editor-checkbox text="Min" model="target.statistics.Minimum" change="statisticsOptionChanged()"></editor-checkbox>
<editor-checkbox text="Max" model="target.statistics.Maximum" change="statisticsOptionChanged()"></editor-checkbox>
<editor-checkbox text="Avg" model="target.statistics.Average" change="statisticsOptionChanged()"></editor-checkbox>
<editor-checkbox text="Sum" model="target.statistics.Sum" change="statisticsOptionChanged()"></editor-checkbox>
<editor-checkbox text="SampleCount" model="target.statistics.SampleCount" change="statisticsOptionChanged()"></editor-checkbox>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model="target.alias" spellcheck='false' ng-model-onblur ng-change="refreshMetricData()">
</li>
<li class="tight-form-item">
<li class="tight-form-item query-keyword">
Period
</li>
<li>
<input type="text"
class="input-mini tight-form-input"
ng-model="target.period"
data-placement="right"
spellcheck='false'
placeholder="period"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
/>
<a bs-tooltip="target.errors.period"
style="color: rgb(229, 189, 28)"
ng-show="target.errors.period">
<i class="fa fa-warning"></i>
</a>
<input type="text" class="input-mini tight-form-input" ng-model="target.period" spellcheck='false' placeholder="period" ng-model-onblur ng-change="refreshMetricData()" />
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item tight-form-align" style="width: 100px">
Alias Pattern
</li>
<li>
<input type="text"
class="input-xxlarge tight-form-input"
ng-model="target.legendFormat"
spellcheck='false'
placeholder="Syntax: {{Region}} {{Namespace}} {{MetricName}} {{Statistics}} {{Dimensions[N].Name}} {{Dimensions[N].Value}}"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
<tip>Syntax: {{Region}} {{Namespace}} {{MetricName}} {{Statistics}} {{Dimensions[N].Name}} {{Dimensions[N].Value}}</tip>
</li>
</ul>
<div class="clearfix"></div>
......
public/app/plugins/datasource/cloudwatch/query_ctrl.js
......@@ -10,12 +10,15 @@ function (angular, _) {
module.controller('CloudWatchQueryCtrl', function($scope, templateSrv, uiSegmentSrv, $q) {
$scope.init = function() {
$scope.target.namespace = $scope.target.namespace || '';
$scope.target.metricName = $scope.target.metricName || '';
$scope.target.statistics = $scope.target.statistics || {Average: true};
$scope.target.dimensions = $scope.target.dimensions || {};
$scope.target.period = $scope.target.period || 60;
$scope.target.region = $scope.target.region || $scope.datasource.getDefaultRegion();
var target = $scope.target;
target.namespace = target.namespace || '';
target.metricName = target.metricName || '';
target.statistics = target.statistics || ['Average'];
target.dimensions = target.dimensions || {};
target.period = target.period || 60;
target.region = target.region || $scope.datasource.getDefaultRegion();
$scope.aliasSyntax = '{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}';
$scope.regionSegment = uiSegmentSrv.getSegmentForValue($scope.target.region, 'select region');
$scope.namespaceSegment = uiSegmentSrv.getSegmentForValue($scope.target.namespace, 'select namespace');
......@@ -28,16 +31,48 @@ function (angular, _) {
return memo;
}, []);
$scope.fixSegments();
$scope.statSegments = _.map($scope.target.statistics, function(stat) {
return uiSegmentSrv.getSegmentForValue(stat);
});
$scope.ensurePlusButton($scope.statSegments);
$scope.ensurePlusButton($scope.dimSegments);
$scope.removeDimSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove dimension --'});
$scope.removeStatSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove stat --'});
};
$scope.getStatSegments = function() {
return $q.when([
angular.copy($scope.removeStatSegment),
uiSegmentSrv.getSegmentForValue('Average'),
uiSegmentSrv.getSegmentForValue('Maximum'),
uiSegmentSrv.getSegmentForValue('Minimum'),
uiSegmentSrv.getSegmentForValue('Sum'),
uiSegmentSrv.getSegmentForValue('SampleCount'),
]);
};
$scope.statSegmentChanged = function(segment, index) {
if (segment.value === $scope.removeStatSegment.value) {
$scope.statSegments.splice(index, 1);
} else {
segment.type = 'value';
}
$scope.target.statistics = _.reduce($scope.statSegments, function(memo, seg) {
if (!seg.fake) { memo.push(seg.value); } return memo;
}, []);
$scope.ensurePlusButton($scope.statSegments);
$scope.get_data();
};
$scope.fixSegments = function() {
var count = $scope.dimSegments.length;
var lastSegment = $scope.dimSegments[Math.max(count-1, 0)];
$scope.ensurePlusButton = function(segments) {
var count = segments.length;
var lastSegment = segments[Math.max(count-1, 0)];
if (!lastSegment || lastSegment.type !== 'plus-button') {
$scope.dimSegments.push(uiSegmentSrv.newPlusButton());
segments.push(uiSegmentSrv.newPlusButton());
}
};
......@@ -74,8 +109,8 @@ function (angular, _) {
segment.cssClass = 'query-segment-key';
}
$scope.fixSegments();
$scope.syncDimSegmentsWithModel();
$scope.ensurePlusButton($scope.dimSegments);
$scope.get_data();
};
......@@ -147,48 +182,6 @@ function (angular, _) {
}
};
$scope.addDimension = function() {
if (!$scope.addDimensionMode) {
$scope.addDimensionMode = true;
return;
}
if (!$scope.target.dimensions) {
$scope.target.dimensions = {};
}
$scope.target.dimensions[$scope.target.currentDimensionKey] = $scope.target.currentDimensionValue;
$scope.target.escapedDimensions = this.escapeDimensions($scope.target.dimensions);
$scope.target.currentDimensionKey = '';
$scope.target.currentDimensionValue = '';
$scope.refreshMetricData();
$scope.addDimensionMode = false;
};
$scope.removeDimension = function(key) {
key = key.replace(/\\\$/g, '$');
delete $scope.target.dimensions[key];
$scope.target.escapedDimensions = this.escapeDimensions($scope.target.dimensions);
$scope.refreshMetricData();
};
$scope.escapeDimensions = function(d) {
var result = {};
_.chain(d)
.keys(d)
.each(function(k) {
var v = d[k];
result[k.replace(/\$/g, '\uFF04')] = v.replace(/\$/g, '\$');
});
return result;
};
$scope.statisticsOptionChanged = function() {
$scope.refreshMetricData();
};
$scope.init();
});
......
public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts
......@@ -34,9 +34,7 @@ describe('CloudWatchDatasource', function() {
dimensions: {
InstanceId: 'i-12345678'
},
statistics: {
Average: true
},
statistics: ['Average'],
period: 300
}
]
......@@ -66,7 +64,7 @@ describe('CloudWatchDatasource', function() {
expect(params.metricName).to.be(query.targets[0].metricName);
expect(params.dimensions[0].Name).to.be(Object.keys(query.targets[0].dimensions)[0]);
expect(params.dimensions[0].Value).to.be(query.targets[0].dimensions[Object.keys(query.targets[0].dimensions)[0]]);
expect(params.statistics).to.eql(Object.keys(query.targets[0].statistics));
expect(params.statistics).to.eql(query.targets[0].statistics);
expect(params.period).to.be(query.targets[0].period);
done();
});
......@@ -75,9 +73,8 @@ describe('CloudWatchDatasource', function() {
it('should return series list', function(done) {
ctx.ds.query(query).then(function(result) {
var s = Object.keys(query.targets[0].statistics)[0];
expect(result.data[0].target).to.be(response.Label + '_' + s + JSON.stringify(query.targets[0].dimensions));
expect(result.data[0].datapoints[0][0]).to.be(response.Datapoints[0][s]);
expect(result.data[0].target).to.be('CPUUtilization_Average');
expect(result.data[0].datapoints[0][0]).to.be(response.Datapoints[0]['Average']);
done();
});
ctx.$rootScope.$apply();
......@@ -167,7 +164,7 @@ describe('CloudWatchDatasource', function() {
};
});
it('should call __GetMetrics and return result', () => {
it('should call __ListMetrics and return result', () => {
expect(scenario.result[0].text).to.be('i-12345678');
expect(scenario.request.data.action).to.be('ListMetrics');
});
......
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