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

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.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() {
-      var clone = angular.copy($scope.target);
-      $scope.panel.targets.push(clone);
+    $scope.regionChanged = function() {
+      $scope.target.region = $scope.regionSegment.value;
+      $scope.get_data();
     };
 
-    $scope.suggestRegion = function(query, callback) { // jshint unused:false
-      return _.union($scope.datasource.performSuggestRegion(), $scope.datasource.getTemplateVariableNames());
+    $scope.namespaceChanged = function() {
+      $scope.target.namespace = $scope.namespaceSegment.value;
+      $scope.get_data();
     };
 
-    $scope.suggestNamespace = function(query, callback) { // jshint unused:false
-      return _.union($scope.datasource.performSuggestNamespace(), $scope.datasource.getTemplateVariableNames());
+    $scope.metricChanged = function() {
+      $scope.target.metricName = $scope.metricSegment.value;
+      $scope.get_data();
     };
 
-    $scope.suggestMetrics = function(query, callback) { // jshint unused:false
-      return _.union($scope.datasource.performSuggestMetrics($scope.target.namespace), $scope.datasource.getTemplateVariableNames());
+    $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();
+
   });
 
 });