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