Skip to content

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

feat(cloudwatch): lots of refactoring and polish work on cloudwatch query editor

parent 27d5f023
Showing with 71 additions and 123 deletions
public/app/plugins/datasource/cloudwatch/partials/query.editor.html
......@@ -2,30 +2,13 @@
<ul class="tight-form-list pull-right">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer dropdown-toggle"
data-toggle="dropdown"
tabindex="1">
<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem">
<a tabindex="1"
ng-click="duplicate()">
Duplicate
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index-1)">
Move up
</a>
</li>
<li role="menuitem">
<a tabindex="1"
ng-click="moveMetricQuery($index, $index+1)">
Move down
</a>
</li>
<li role="menuitem"><a tabindex="1" ng-click="duplicateDataQuery(target)">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="moveDataQuery($index, $index-1)">Move up</a></li>
<li role="menuitem"><a tabindex="1" ng-click="moveDataQuery($index, $index+1)">Move down</a></li>
</ul>
</div>
</li>
......@@ -51,43 +34,16 @@
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 100px">
From region
Metric
</li>
<li>
<metric-segment segment="region" get-alt-segments="getRegions()" on-value-changed="regionChanged()"></metric-segment>
</li>
</ul>
<ul class="tight-form-list" role="menu">
<li class="tight-form-item" style="width: 100px">
Namespace
<metric-segment segment="regionSegment" get-alt-segments="getRegions()" on-value-changed="regionChanged()"></metric-segment>
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.namespace"
spellcheck='false'
bs-typeahead="suggestNamespace"
placeholder="namespace"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
<li class="tight-form-item">
Metric
<metric-segment segment="namespaceSegment" get-alt-segments="getNamespaces()" on-value-changed="namespaceChanged()"></metric-segment>
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.metricName"
spellcheck='false'
bs-typeahead="suggestMetrics"
placeholder="metric name"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
<metric-segment segment="metricSegment" get-alt-segments="getMetrics()" on-value-changed="metricChanged()"></metric-segment>
</li>
</ul>
......@@ -96,11 +52,7 @@
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
<li class="tight-form-item tight-form-align" style="width: 100px">
Dimensions
</li>
<li ng-repeat="(key, value) in target.escapedDimensions track by $index" class="tight-form-item">
......@@ -142,40 +94,17 @@
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
<li class="tight-form-item tight-form-align" style="width: 100px">
Statistics
</li>
<li class="tight-form-item">
<editor-checkbox text="Min" model="target.statistics.Minimum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Max" model="target.statistics.Maximum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Avg" model="target.statistics.Average" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item">
<editor-checkbox text="Sum" model="target.statistics.Sum" change="statisticsOptionChanged()"></editor-checkbox>
</li>
<li class="tight-form-item last">
<editor-checkbox text="SampleCount" model="target.statistics.SampleCount" change="statisticsOptionChanged()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" style="width: 100px">
Period
</li>
<li>
......@@ -195,21 +124,6 @@
<i class="fa fa-warning"></i>
</a>
</li>
<li class="tight-form-item">
Region
</li>
<li>
<input type="text"
class="input-medium tight-form-input"
ng-model="target.region"
spellcheck='false'
bs-typeahead="suggestRegion"
placeholder="region"
data-min-length=0 data-items=100
ng-model-onblur
ng-change="refreshMetricData()"
>
</li>
</ul>
<div class="clearfix"></div>
......@@ -217,19 +131,15 @@
<div class="tight-form">
<ul class="tight-form-list" role="menu">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item">
Legend Format
<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="legend format"
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()"
......
public/app/plugins/datasource/cloudwatch/queryCtrl.js
......@@ -7,7 +7,7 @@ function (angular, _) {
var module = angular.module('grafana.controllers');
module.controller('CloudWatchQueryCtrl', function($scope, templateSrv) {
module.controller('CloudWatchQueryCtrl', function($scope, templateSrv, uiSegmentSrv) {
$scope.init = function() {
$scope.target.namespace = $scope.target.namespace || '';
......@@ -17,39 +17,75 @@ function (angular, _) {
$scope.target.statistics = $scope.target.statistics || {};
$scope.target.period = $scope.target.period || 60;
$scope.target.region = $scope.target.region || $scope.datasource.getDefaultRegion();
$scope.target.errors = validateTarget();
};
$scope.refreshMetricData = function() {
$scope.target.errors = validateTarget($scope.target);
$scope.regionSegment = $scope.getSegmentForValue($scope.target.region, 'select region');
$scope.namespaceSegment = $scope.getSegmentForValue($scope.target.namespace, 'select namespace');
$scope.metricSegment = $scope.getSegmentForValue($scope.target.metricName, 'select metric');
};
// this does not work so good
if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
$scope.oldTarget = angular.copy($scope.target);
$scope.get_data();
$scope.getSegmentForValue = function(value, fallbackText) {
if (value) {
return uiSegmentSrv.newSegment(value);
} else {
return uiSegmentSrv.newSegment({value: fallbackText, fake: true});
}
};
$scope.moveMetricQuery = function(fromIndex, toIndex) {
_.move($scope.panel.targets, fromIndex, toIndex);
$scope.getRegions = function() {
return $scope.datasource.metricFindQuery('region()')
.then($scope.transformToSegments(true));
};
$scope.duplicate = function() {
var clone = angular.copy($scope.target);
$scope.panel.targets.push(clone);
$scope.getNamespaces = function() {
return $scope.datasource.metricFindQuery('namespace()')
.then($scope.transformToSegments(true));
};
$scope.suggestRegion = function(query, callback) { // jshint unused:false
return _.union($scope.datasource.performSuggestRegion(), $scope.datasource.getTemplateVariableNames());
$scope.getMetrics = function() {
return $scope.datasource.metricFindQuery('metrics(' + $scope.target.namespace + ')')
.then($scope.transformToSegments(true));
};
$scope.suggestNamespace = function(query, callback) { // jshint unused:false
return _.union($scope.datasource.performSuggestNamespace(), $scope.datasource.getTemplateVariableNames());
$scope.regionChanged = function() {
$scope.target.region = $scope.regionSegment.value;
$scope.get_data();
};
$scope.namespaceChanged = function() {
$scope.target.namespace = $scope.namespaceSegment.value;
$scope.get_data();
};
$scope.suggestMetrics = function(query, callback) { // jshint unused:false
return _.union($scope.datasource.performSuggestMetrics($scope.target.namespace), $scope.datasource.getTemplateVariableNames());
$scope.metricChanged = function() {
$scope.target.metricName = $scope.metricSegment.value;
$scope.get_data();
};
$scope.transformToSegments = function(addTemplateVars) {
return function(results) {
var segments = _.map(results, function(segment) {
return uiSegmentSrv.newSegment({ value: segment.text, expandable: segment.expandable });
});
if (addTemplateVars) {
_.each(templateSrv.variables, function(variable) {
segments.unshift(uiSegmentSrv.newSegment({ type: 'template', value: '$' + variable.name, expandable: true }));
});
}
return segments;
};
};
$scope.refreshMetricData = function() {
$scope.target.errors = validateTarget($scope.target);
// this does not work so good
if (!_.isEqual($scope.oldTarget, $scope.target) && _.isEmpty($scope.target.errors)) {
$scope.oldTarget = angular.copy($scope.target);
$scope.get_data();
}
};
$scope.suggestDimensionKeys = function(query, callback) { // jshint unused:false
......@@ -137,6 +173,8 @@ function (angular, _) {
return errs;
}
$scope.init();
});
});
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