Skip to content

Commit c34c3ac

Browse files
torkelotorkelo
committed
feat(cloudwatch): refactoring and editor improvements, grafana#684 
1 parent 2d722e2 commit c34c3ac

File tree

3 files changed

+84
-84
lines changed

3 files changed

+84
-84
lines changed

‎public/app/plugins/datasource/cloudwatch/datasource.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,12 @@ function (angular, _) {
124124
};
125125

126126
return this.awsRequest(request).then(function(result) {
127-
console.log(result);
128127
return _.chain(result.Metrics).map(function(metric) {
129128
return _.pluck(metric.Dimensions, 'Value');
130129
}).flatten().uniq().sortBy(function(name) {
131130
return name;
131+
}).map(function(value) {
132+
return {value: value, text: value};
132133
}).value();
133134
});
134135
};
@@ -137,10 +138,7 @@ function (angular, _) {
137138
return this.awsRequest({
138139
region: region,
139140
action: 'DescribeInstances',
140-
parameters: {
141-
filter: filters,
142-
instanceIds: instanceIds
143-
}
141+
parameters: { filter: filters, instanceIds: instanceIds }
144142
});
145143
};
146144

@@ -247,6 +245,7 @@ function (angular, _) {
247245
function transformMetricData(md, options) {
248246
var result = [];
249247

248+
console.log(options);
250249
var dimensionPart = templateSrv.replace(JSON.stringify(options.dimensions));
251250
_.each(getActivatedStatistics(options.statistics), function(s) {
252251
var originalSettings = _.templateSettings;

‎public/app/plugins/datasource/cloudwatch/partials/query.editor.html

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -55,40 +55,10 @@
5555
<li class="tight-form-item tight-form-align" style="width: 100px">
5656
Dimensions
5757
</li>
58-
<li ng-repeat="(key, value) in target.escapedDimensions track by $index" class="tight-form-item">
59-
{{key}}&nbsp;=&nbsp;{{value}}
60-
<a ng-click="removeDimension(key)">
61-
<i class="fa fa-remove"></i>
62-
</a>
63-
</li>
64-
65-
<li class="tight-form-item" ng-hide="addDimensionMode">
66-
<a ng-click="addDimension()">
67-
<i class="fa fa-plus"></i>
68-
</a>
69-
</li>
70-
71-
<li ng-show="addDimensionMode">
72-
<input type="text"
73-
class="input-small tight-form-input"
74-
spellcheck='false'
75-
bs-typeahead="suggestDimensionKeys"
76-
data-min-length=0 data-items=100
77-
ng-model="target.currentDimensionKey"
78-
placeholder="key">
79-
<input type="text"
80-
class="input-small tight-form-input"
81-
spellcheck='false'
82-
bs-typeahead="suggestDimensionValues"
83-
data-min-length=0 data-items=100
84-
ng-model="target.currentDimensionValue"
85-
placeholder="value">
86-
<a ng-click="addDimension()">
87-
add dimension
88-
</a>
58+
<li ng-repeat="segment in dimSegments">
59+
<metric-segment segment="segment" get-options="getDimSegments(segment, $index)" on-change="dimSegmentChanged(segment, $index)"></metric-segment>
8960
</li>
9061
</ul>
91-
9262
<div class="clearfix"></div>
9363
</div>
9464

‎public/app/plugins/datasource/cloudwatch/query_ctrl.js

Lines changed: 78 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -7,36 +7,106 @@ function (angular, _) {
77

88
var module = angular.module('grafana.controllers');
99

10-
module.controller('CloudWatchQueryCtrl', function($scope, templateSrv, uiSegmentSrv) {
10+
module.controller('CloudWatchQueryCtrl', function($scope, templateSrv, uiSegmentSrv, $q) {
1111

1212
$scope.init = function() {
1313
$scope.target.namespace = $scope.target.namespace || '';
1414
$scope.target.metricName = $scope.target.metricName || '';
15+
$scope.target.statistics = $scope.target.statistics || {Average: true};
1516
$scope.target.dimensions = $scope.target.dimensions || {};
16-
$scope.target.escapedDimensions = this.escapeDimensions($scope.target.dimensions);
17-
$scope.target.statistics = $scope.target.statistics || {};
1817
$scope.target.period = $scope.target.period || 60;
1918
$scope.target.region = $scope.target.region || $scope.datasource.getDefaultRegion();
20-
$scope.target.errors = validateTarget();
2119

2220
$scope.regionSegment = uiSegmentSrv.getSegmentForValue($scope.target.region, 'select region');
2321
$scope.namespaceSegment = uiSegmentSrv.getSegmentForValue($scope.target.namespace, 'select namespace');
2422
$scope.metricSegment = uiSegmentSrv.getSegmentForValue($scope.target.metricName, 'select metric');
23+
24+
$scope.dimSegments = _.reduce($scope.target.dimensions, function(memo, value, key) {
25+
memo.push(uiSegmentSrv.newKey(key));
26+
memo.push(uiSegmentSrv.newOperator("="));
27+
memo.push(uiSegmentSrv.newKeyValue(value));
28+
return memo;
29+
}, []);
30+
31+
$scope.fixSegments();
32+
$scope.removeDimSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove dimension --'});
33+
};
34+
35+
$scope.fixSegments = function() {
36+
var count = $scope.dimSegments.length;
37+
var lastSegment = $scope.dimSegments[Math.max(count-1, 0)];
38+
39+
if (!lastSegment || lastSegment.type !== 'plus-button') {
40+
$scope.dimSegments.push(uiSegmentSrv.newPlusButton());
41+
}
42+
};
43+
44+
$scope.getDimSegments = function(segment) {
45+
if (segment.type === 'operator') { return $q.when([]); }
46+
47+
var target = $scope.target;
48+
var query = $q.when([]);
49+
50+
if (segment.type === 'key' || segment.type === 'plus-button') {
51+
query = $scope.datasource.getDimensionKeys($scope.target.namespace);
52+
} else if (segment.type === 'value') {
53+
query = $scope.datasource.getDimensionValues(target.region, target.namespace, target.metricName, {});
54+
}
55+
56+
return query.then($scope.transformToSegments(true)).then(function(results) {
57+
if (segment.type === 'key') {
58+
results.splice(0, 0, angular.copy($scope.removeDimSegment));
59+
}
60+
return results;
61+
});
62+
};
63+
64+
$scope.dimSegmentChanged = function(segment, index) {
65+
$scope.dimSegments[index] = segment;
66+
67+
if (segment.value === $scope.removeDimSegment.value) {
68+
$scope.dimSegments.splice(index, 3);
69+
}
70+
else if (segment.type === 'plus-button') {
71+
$scope.dimSegments.push(uiSegmentSrv.newOperator('='));
72+
$scope.dimSegments.push(uiSegmentSrv.newFake('select dimension value', 'value', 'query-segment-value'));
73+
segment.type = 'key';
74+
segment.cssClass = 'query-segment-key';
75+
}
76+
77+
$scope.fixSegments();
78+
$scope.syncDimSegmentsWithModel();
79+
$scope.get_data();
80+
};
81+
82+
$scope.syncDimSegmentsWithModel = function() {
83+
var dims = {};
84+
var length = $scope.dimSegments.length;
85+
86+
for (var i = 0; i < length - 2; i += 3) {
87+
var keySegment = $scope.dimSegments[i];
88+
var valueSegment = $scope.dimSegments[i + 2];
89+
if (!valueSegment.fake) {
90+
dims[keySegment.value] = valueSegment.value;
91+
}
92+
}
93+
94+
$scope.target.dimensions = dims;
2595
};
2696

2797
$scope.getRegions = function() {
2898
return $scope.datasource.metricFindQuery('regions()')
29-
.then($scope.transformToSegments(true));
99+
.then($scope.transformToSegments(true));
30100
};
31101

32102
$scope.getNamespaces = function() {
33103
return $scope.datasource.metricFindQuery('namespaces()')
34-
.then($scope.transformToSegments(true));
104+
.then($scope.transformToSegments(true));
35105
};
36106

37107
$scope.getMetrics = function() {
38108
return $scope.datasource.metricFindQuery('metrics(' + $scope.target.namespace + ')')
39-
.then($scope.transformToSegments(true));
109+
.then($scope.transformToSegments(true));
40110
};
41111

42112
$scope.regionChanged = function() {
@@ -71,40 +141,12 @@ function (angular, _) {
71141
};
72142

73143
$scope.refreshMetricData = function() {
74-
$scope.target.errors = validateTarget($scope.target);
75-
76-
// this does not work so good
77-
if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
144+
if (!_.isEqual($scope.oldTarget, $scope.target)) {
78145
$scope.oldTarget = angular.copy($scope.target);
79146
$scope.get_data();
80147
}
81148
};
82149

83-
$scope.suggestDimensionKeys = function(query, callback) { // jshint unused:false
84-
$scope.datasource.getDimensionKeys($scope.target.namespace).then(function(result) {
85-
callback(_.pluck(result, 'text'));
86-
});
87-
};
88-
89-
// TODO: Removed template variables from the suggest
90-
// add this feature back after improving the editor
91-
$scope.suggestDimensionValues = function(query, callback) {
92-
if (!$scope.target.namespace || !$scope.target.metricName) {
93-
return callback([]);
94-
}
95-
96-
return $scope.datasource.getDimensionValues(
97-
$scope.target.region,
98-
$scope.target.namespace,
99-
$scope.target.metricName,
100-
$scope.target.dimensions
101-
).then(function(result) {
102-
callback(result);
103-
}, function() {
104-
callback([]);
105-
});
106-
};
107-
108150
$scope.addDimension = function() {
109151
if (!$scope.addDimensionMode) {
110152
$scope.addDimensionMode = true;
@@ -147,17 +189,6 @@ function (angular, _) {
147189
$scope.refreshMetricData();
148190
};
149191

150-
// TODO: validate target
151-
function validateTarget() {
152-
var errs = {};
153-
154-
if ($scope.target.period < 60 || ($scope.target.period % 60) !== 0) {
155-
errs.period = 'Period must be at least 60 seconds and must be a multiple of 60';
156-
}
157-
158-
return errs;
159-
}
160-
161192
$scope.init();
162193

163194
});

0 commit comments

Comments
 (0)