From ea7c6edcd0468cc6145967596364507d24c9805d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 2 Sep 2015 12:36:56 +0200
Subject: [PATCH] feat(cloudwatch): lots of refactoring and polish work on
 cloudwatch query editor

---
 .../cloudwatch/partials/query.editor.html     | 122 +++---------------
 .../datasource/cloudwatch/queryCtrl.js        |  84 ++++++++----
 2 files changed, 77 insertions(+), 129 deletions(-)

diff --git a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
index cd38cde7205..1da41fc2020 100644
--- a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
+++ b/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
-		</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
-		</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
 		</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="regionSegment" get-alt-segments="getRegions()" on-value-changed="regionChanged()"></metric-segment>
+		</li>
+		<li>
+			<metric-segment segment="namespaceSegment" get-alt-segments="getNamespaces()" on-value-changed="namespaceChanged()"></metric-segment>
+		</li>
+		<li>
+			<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()"
diff --git a/public/app/plugins/datasource/cloudwatch/queryCtrl.js b/public/app/plugins/datasource/cloudwatch/queryCtrl.js
index 566b94b3789..e0835002692 100644
--- a/public/app/plugins/datasource/cloudwatch/queryCtrl.js
+++ b/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,8 +17,65 @@ 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.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');
+    };
+
+    $scope.getSegmentForValue = function(value, fallbackText) {
+      if (value) {
+        return uiSegmentSrv.newSegment(value);
+      } else {
+        return uiSegmentSrv.newSegment({value: fallbackText, fake: true});
+      }
+    };
+
+    $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.regionChanged = function() {
+      $scope.target.region = $scope.regionSegment.value;
+      $scope.get_data();
+    };
+
+    $scope.namespaceChanged = function() {
+      $scope.target.namespace = $scope.namespaceSegment.value;
+      $scope.get_data();
+    };
+
+    $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() {
@@ -31,27 +88,6 @@ function (angular, _) {
       }
     };
 
-    $scope.moveMetricQuery = function(fromIndex, toIndex) {
-      _.move($scope.panel.targets, fromIndex, toIndex);
-    };
-
-    $scope.duplicate = function() {
-      var clone = angular.copy($scope.target);
-      $scope.panel.targets.push(clone);
-    };
-
-    $scope.suggestRegion = function(query, callback) { // jshint unused:false
-      return _.union($scope.datasource.performSuggestRegion(), $scope.datasource.getTemplateVariableNames());
-    };
-
-    $scope.suggestNamespace = function(query, callback) { // jshint unused:false
-      return _.union($scope.datasource.performSuggestNamespace(), $scope.datasource.getTemplateVariableNames());
-    };
-
-    $scope.suggestMetrics = function(query, callback) { // jshint unused:false
-      return _.union($scope.datasource.performSuggestMetrics($scope.target.namespace), $scope.datasource.getTemplateVariableNames());
-    };
-
     $scope.suggestDimensionKeys = function(query, callback) { // jshint unused:false
       return _.union($scope.datasource.performSuggestDimensionKeys($scope.target.namespace), $scope.datasource.getTemplateVariableNames());
     };
@@ -137,6 +173,8 @@ function (angular, _) {
       return errs;
     }
 
+    $scope.init();
+
   });
 
 });