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 95 additions and 155 deletions
public/app/plugins/datasource/cloudwatch/datasource.js
...@@ -35,7 +35,7 @@ function (angular, _) { ...@@ -35,7 +35,7 @@ function (angular, _) {
query.namespace = templateSrv.replace(target.namespace, options.scopedVars); query.namespace = templateSrv.replace(target.namespace, options.scopedVars);
query.metricName = templateSrv.replace(target.metricName, options.scopedVars); query.metricName = templateSrv.replace(target.metricName, options.scopedVars);
query.dimensions = convertDimensionFormat(target.dimensions); query.dimensions = convertDimensionFormat(target.dimensions);
query.statistics = getActivatedStatistics(target.statistics); query.statistics = target.statistics;
query.period = parseInt(target.period, 10); query.period = parseInt(target.period, 10);
var range = end - start; var range = end - start;
...@@ -191,7 +191,7 @@ function (angular, _) { ...@@ -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?([^,]+?)\)/); var ebsVolumeIdsQuery = query.match(/^ebs_volume_ids\(([^,]+?),\s?([^,]+?)\)/);
...@@ -243,52 +243,33 @@ function (angular, _) { ...@@ -243,52 +243,33 @@ function (angular, _) {
}; };
function transformMetricData(md, options) { function transformMetricData(md, options) {
var result = []; var aliasRegex = /\{\{(.+?)\}\}/g;
var aliasPattern = options.alias || '{{metric}}_{{stat}}';
console.log(options); var aliasData = {
var dimensionPart = templateSrv.replace(JSON.stringify(options.dimensions)); region: templateSrv.replace(options.region),
_.each(getActivatedStatistics(options.statistics), function(s) { namespace: templateSrv.replace(options.namespace),
var originalSettings = _.templateSettings; metric: templateSrv.replace(options.metricName),
_.templateSettings = { };
interpolate: /\{\{(.+?)\}\}/g _.extend(aliasData, options.dimensions);
};
var template = _.template(options.legendFormat); return _.map(options.statistics, function(stat) {
var dps = _.chain(md.Datapoints).map(function(dp) {
var metricLabel; return [dp[stat], new Date(dp.Timestamp).getTime()];
if (_.isEmpty(options.legendFormat)) { })
metricLabel = md.Label + '_' + s + dimensionPart; .sortBy(function(dp) {
} else { return dp[1];
var d = convertDimensionFormat(options.dimensions); }).value();
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) { aliasData.stat = stat;
return [value[s], new Date(value.Timestamp).getTime()]; var seriesName = aliasPattern.replace(aliasRegex, function(match, g1) {
if (aliasData[g1]) {
return aliasData[g1];
}
return g1;
}); });
dps = _.sortBy(dps, function(dp) { return dp[1]; });
result.push({ target: metricLabel, datapoints: dps }); return {target: seriesName, datapoints: dps};
});
return result;
}
function getActivatedStatistics(statistics) {
var activatedStatistics = [];
_.each(statistics, function(v, k) {
if (v) {
activatedStatistics.push(k);
}
}); });
return activatedStatistics;
} }
function convertToCloudWatchTime(date) { function convertToCloudWatchTime(date) {
...@@ -296,10 +277,10 @@ function (angular, _) { ...@@ -296,10 +277,10 @@ function (angular, _) {
} }
function convertDimensionFormat(dimensions) { function convertDimensionFormat(dimensions) {
return _.map(_.keys(dimensions), function(key) { return _.map(dimensions, function(value, key) {
return { return {
Name: templateSrv.replace(key), 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 @@ ...@@ -33,7 +33,7 @@
</ul> </ul>
<ul class="tight-form-list" role="menu"> <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 Metric
</li> </li>
<li> <li>
...@@ -45,6 +45,12 @@ ...@@ -45,6 +45,12 @@
<li> <li>
<metric-segment segment="metricSegment" get-options="getMetrics()" on-change="metricChanged()"></metric-segment> <metric-segment segment="metricSegment" get-options="getMetrics()" on-change="metricChanged()"></metric-segment>
</li> </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> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
...@@ -52,70 +58,33 @@ ...@@ -52,70 +58,33 @@
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list" role="menu"> <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 Dimensions
</li> </li>
<li ng-repeat="segment in dimSegments"> <li ng-repeat="segment in dimSegments">
<metric-segment segment="segment" get-options="getDimSegments(segment, $index)" on-change="dimSegmentChanged(segment, $index)"></metric-segment> <metric-segment segment="segment" get-options="getDimSegments(segment, $index)" on-change="dimSegmentChanged(segment, $index)"></metric-segment>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form">
<ul class="tight-form-list" role="menu"> <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">
Statistics Alias
<tip>{{metric}} {{stat}} {{namespace}} {{region}} {{<dimension name>}}</tip>
</li> </li>
<li class="tight-form-item"> <li>
<editor-checkbox text="Min" model="target.statistics.Minimum" change="statisticsOptionChanged()"></editor-checkbox> <input type="text" class="input-xlarge tight-form-input" ng-model="target.alias" spellcheck='false' ng-model-onblur ng-change="refreshMetricData()">
<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> </li>
<li class="tight-form-item"> <li class="tight-form-item query-keyword">
Period Period
</li> </li>
<li> <li>
<input type="text" <input type="text" class="input-mini tight-form-input" ng-model="target.period" spellcheck='false' placeholder="period" ng-model-onblur ng-change="refreshMetricData()" />
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>
</li> </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> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
public/app/plugins/datasource/cloudwatch/query_ctrl.js
...@@ -10,12 +10,15 @@ function (angular, _) { ...@@ -10,12 +10,15 @@ function (angular, _) {
module.controller('CloudWatchQueryCtrl', function($scope, templateSrv, uiSegmentSrv, $q) { module.controller('CloudWatchQueryCtrl', function($scope, templateSrv, uiSegmentSrv, $q) {
$scope.init = function() { $scope.init = function() {
$scope.target.namespace = $scope.target.namespace || ''; var target = $scope.target;
$scope.target.metricName = $scope.target.metricName || ''; target.namespace = target.namespace || '';
$scope.target.statistics = $scope.target.statistics || {Average: true}; target.metricName = target.metricName || '';
$scope.target.dimensions = $scope.target.dimensions || {}; target.statistics = target.statistics || ['Average'];
$scope.target.period = $scope.target.period || 60; target.dimensions = target.dimensions || {};
$scope.target.region = $scope.target.region || $scope.datasource.getDefaultRegion(); 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.regionSegment = uiSegmentSrv.getSegmentForValue($scope.target.region, 'select region');
$scope.namespaceSegment = uiSegmentSrv.getSegmentForValue($scope.target.namespace, 'select namespace'); $scope.namespaceSegment = uiSegmentSrv.getSegmentForValue($scope.target.namespace, 'select namespace');
...@@ -28,16 +31,48 @@ function (angular, _) { ...@@ -28,16 +31,48 @@ function (angular, _) {
return memo; 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.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() { $scope.ensurePlusButton = function(segments) {
var count = $scope.dimSegments.length; var count = segments.length;
var lastSegment = $scope.dimSegments[Math.max(count-1, 0)]; var lastSegment = segments[Math.max(count-1, 0)];
if (!lastSegment || lastSegment.type !== 'plus-button') { if (!lastSegment || lastSegment.type !== 'plus-button') {
$scope.dimSegments.push(uiSegmentSrv.newPlusButton()); segments.push(uiSegmentSrv.newPlusButton());
} }
}; };
...@@ -74,8 +109,8 @@ function (angular, _) { ...@@ -74,8 +109,8 @@ function (angular, _) {
segment.cssClass = 'query-segment-key'; segment.cssClass = 'query-segment-key';
} }
$scope.fixSegments();
$scope.syncDimSegmentsWithModel(); $scope.syncDimSegmentsWithModel();
$scope.ensurePlusButton($scope.dimSegments);
$scope.get_data(); $scope.get_data();
}; };
...@@ -147,48 +182,6 @@ function (angular, _) { ...@@ -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(); $scope.init();
}); });
......
public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts
...@@ -34,9 +34,7 @@ describe('CloudWatchDatasource', function() { ...@@ -34,9 +34,7 @@ describe('CloudWatchDatasource', function() {
dimensions: { dimensions: {
InstanceId: 'i-12345678' InstanceId: 'i-12345678'
}, },
statistics: { statistics: ['Average'],
Average: true
},
period: 300 period: 300
} }
] ]
...@@ -66,7 +64,7 @@ describe('CloudWatchDatasource', function() { ...@@ -66,7 +64,7 @@ describe('CloudWatchDatasource', function() {
expect(params.metricName).to.be(query.targets[0].metricName); 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].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.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); expect(params.period).to.be(query.targets[0].period);
done(); done();
}); });
...@@ -75,9 +73,8 @@ describe('CloudWatchDatasource', function() { ...@@ -75,9 +73,8 @@ describe('CloudWatchDatasource', function() {
it('should return series list', function(done) { it('should return series list', function(done) {
ctx.ds.query(query).then(function(result) { ctx.ds.query(query).then(function(result) {
var s = Object.keys(query.targets[0].statistics)[0]; expect(result.data[0].target).to.be('CPUUtilization_Average');
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]['Average']);
expect(result.data[0].datapoints[0][0]).to.be(response.Datapoints[0][s]);
done(); done();
}); });
ctx.$rootScope.$apply(); ctx.$rootScope.$apply();
...@@ -167,7 +164,7 @@ describe('CloudWatchDatasource', function() { ...@@ -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.result[0].text).to.be('i-12345678');
expect(scenario.request.data.action).to.be('ListMetrics'); 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