From 27d5f02329cec11c888551ffa2735d366a3979d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 2 Sep 2015 11:33:32 +0200
Subject: [PATCH] refactoring(query editors): broke out metric segment

---
 .../cloudwatch/partials/query.editor.html     |  14 ++-
 .../plugins/datasource/graphite/queryCtrl.js  |  35 ++----
 .../plugins/datasource/influxdb/queryCtrl.js  | 108 +++++-------------
 public/app/services/all.js                    |   1 +
 public/app/services/uiSegmentSrv.js           |  83 ++++++++++++++
 public/test/specs/graphiteTargetCtrl-specs.js |   4 +-
 public/test/specs/influxdbQueryCtrl-specs.js  |   4 +-
 7 files changed, 139 insertions(+), 110 deletions(-)
 create mode 100644 public/app/services/uiSegmentSrv.js

diff --git a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
index 54f5467d4b7..cd38cde7205 100644
--- a/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
+++ b/public/app/plugins/datasource/cloudwatch/partials/query.editor.html
@@ -37,8 +37,11 @@
 	</ul>
 
 	<ul class="tight-form-list">
+		<li class="tight-form-item" style="min-width: 15px; text-align: center">
+			{{target.refId}}
+		</li>
 		<li>
-			<a class="tight-form-item"
+			<a  class="tight-form-item"
 				ng-click="target.hide = !target.hide; get_data();"
 				role="menuitem">
 				<i class="fa fa-eye"></i>
@@ -46,6 +49,15 @@
 		</li>
 	</ul>
 
+	<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
diff --git a/public/app/plugins/datasource/graphite/queryCtrl.js b/public/app/plugins/datasource/graphite/queryCtrl.js
index 9a3179c5c4b..c3ed7fe32a1 100644
--- a/public/app/plugins/datasource/graphite/queryCtrl.js
+++ b/public/app/plugins/datasource/graphite/queryCtrl.js
@@ -10,7 +10,7 @@ function (angular, _, config, gfunc, Parser) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('GraphiteQueryCtrl', function($scope, $sce, templateSrv) {
+  module.controller('GraphiteQueryCtrl', function($scope, uiSegmentSrv, templateSrv) {
 
     $scope.init = function() {
       if ($scope.target) {
@@ -104,7 +104,7 @@ function (angular, _, config, gfunc, Parser) {
         }
 
         $scope.segments = _.map(astNode.segments, function(segment) {
-          return new MetricSegment(segment);
+          return uiSegmentSrv.newSegment(segment);
         });
       }
     }
@@ -119,7 +119,7 @@ function (angular, _, config, gfunc, Parser) {
 
     function checkOtherSegments(fromIndex) {
       if (fromIndex === 0) {
-        $scope.segments.push(MetricSegment.newSelectMetric());
+        $scope.segments.push(uiSegmentSrv.newSelectMetric());
         return;
       }
 
@@ -129,13 +129,13 @@ function (angular, _, config, gfunc, Parser) {
           if (segments.length === 0) {
             if (path !== '') {
               $scope.segments = $scope.segments.splice(0, fromIndex);
-              $scope.segments.push(MetricSegment.newSelectMetric());
+              $scope.segments.push(uiSegmentSrv.newSelectMetric());
             }
             return;
           }
           if (segments[0].expandable) {
             if ($scope.segments.length === fromIndex) {
-              $scope.segments.push(MetricSegment.newSelectMetric());
+              $scope.segments.push(uiSegmentSrv.newSelectMetric());
             }
             else {
               return checkOtherSegments(fromIndex + 1);
@@ -162,14 +162,14 @@ function (angular, _, config, gfunc, Parser) {
 
       return $scope.datasource.metricFindQuery(query).then(function(segments) {
           var altSegments = _.map(segments, function(segment) {
-            return new MetricSegment({ value: segment.text, expandable: segment.expandable });
+            return uiSegmentSrv.newSegment({ value: segment.text, expandable: segment.expandable });
           });
 
           if (altSegments.length === 0) { return altSegments; }
 
           // add template variables
           _.each(templateSrv.variables, function(variable) {
-            altSegments.unshift(new MetricSegment({
+            altSegments.unshift(uiSegmentSrv.newSegment({
               type: 'template',
               value: '$' + variable.name,
               expandable: true,
@@ -177,7 +177,7 @@ function (angular, _, config, gfunc, Parser) {
           });
 
           // add wildcard option
-          altSegments.unshift(new MetricSegment('*'));
+          altSegments.unshift(uiSegmentSrv.newSegment('*'));
           return altSegments;
         })
         .then(null, function(err) {
@@ -284,25 +284,6 @@ function (angular, _, config, gfunc, Parser) {
       }
     };
 
-    function MetricSegment(options) {
-      if (options === '*' || options.value === '*') {
-        this.value = '*';
-        this.html = $sce.trustAsHtml('<i class="fa fa-asterisk"><i>');
-        this.expandable = true;
-        return;
-      }
-
-      this.fake = options.fake;
-      this.value = options.value;
-      this.type = options.type;
-      this.expandable = options.expandable;
-      this.html = $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value));
-    }
-
-    MetricSegment.newSelectMetric = function() {
-      return new MetricSegment({value: 'select metric', fake: true});
-    };
-
     $scope.init();
 
   });
diff --git a/public/app/plugins/datasource/influxdb/queryCtrl.js b/public/app/plugins/datasource/influxdb/queryCtrl.js
index 186ffaf1a11..5234e34a2c8 100644
--- a/public/app/plugins/datasource/influxdb/queryCtrl.js
+++ b/public/app/plugins/datasource/influxdb/queryCtrl.js
@@ -8,7 +8,7 @@ function (angular, _, InfluxQueryBuilder) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('InfluxQueryCtrl', function($scope, $timeout, $sce, templateSrv, $q) {
+  module.controller('InfluxQueryCtrl', function($scope, $timeout, $sce, templateSrv, $q, uiSegmentSrv) {
 
     $scope.init = function() {
       if (!$scope.target) { return; }
@@ -24,12 +24,12 @@ function (angular, _, InfluxQueryBuilder) {
       $scope.queryBuilder = new InfluxQueryBuilder(target);
 
       if (!target.measurement) {
-        $scope.measurementSegment = MetricSegment.newSelectMeasurement();
+        $scope.measurementSegment = uiSegmentSrv.newSelectMeasurement();
       } else {
-        $scope.measurementSegment = new MetricSegment(target.measurement);
+        $scope.measurementSegment = uiSegmentSrv.newSegment(target.measurement);
       }
 
-      $scope.addFieldSegment = MetricSegment.newPlusButton();
+      $scope.addFieldSegment = uiSegmentSrv.newPlusButton();
 
       $scope.tagSegments = [];
       _.each(target.tags, function(tag) {
@@ -42,24 +42,25 @@ function (angular, _, InfluxQueryBuilder) {
         }
 
         if (tag.condition) {
-          $scope.tagSegments.push(MetricSegment.newCondition(tag.condition));
+          $scope.tagSegments.push(uiSegmentSrv.newCondition(tag.condition));
         }
-        $scope.tagSegments.push(new MetricSegment({value: tag.key, type: 'key', cssClass: 'query-segment-key' }));
-        $scope.tagSegments.push(MetricSegment.newOperator(tag.operator));
-        $scope.tagSegments.push(new MetricSegment({value: tag.value, type: 'value', cssClass: 'query-segment-value'}));
+
+        $scope.tagSegments.push(uiSegmentSrv.newKey(tag.Key));
+        $scope.tagSegments.push(uiSegmentSrv.newOperator(tag.operator));
+        $scope.tagSegments.push(uiSegmentSrv.newKeyValue(tag.value));
       });
 
       $scope.fixTagSegments();
 
       $scope.groupBySegments = [];
       _.each(target.groupByTags, function(tag) {
-        $scope.groupBySegments.push(new MetricSegment(tag));
+        $scope.groupBySegments.push(uiSegmentSrv.newSegment(tag));
       });
 
-      $scope.groupBySegments.push(MetricSegment.newPlusButton());
+      $scope.groupBySegments.push(uiSegmentSrv.newPlusButton());
 
-      $scope.removeTagFilterSegment = new MetricSegment({fake: true, value: '-- remove tag filter --'});
-      $scope.removeGroupBySegment = new MetricSegment({fake: true, value: '-- remove group by --'});
+      $scope.removeTagFilterSegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove tag filter --'});
+      $scope.removeGroupBySegment = uiSegmentSrv.newSegment({fake: true, value: '-- remove group by --'});
     };
 
     $scope.fixTagSegments = function() {
@@ -67,7 +68,7 @@ function (angular, _, InfluxQueryBuilder) {
       var lastSegment = $scope.tagSegments[Math.max(count-1, 0)];
 
       if (!lastSegment || lastSegment.type !== 'plus-button') {
-        $scope.tagSegments.push(MetricSegment.newPlusButton());
+        $scope.tagSegments.push(uiSegmentSrv.newPlusButton());
       }
     };
 
@@ -80,7 +81,7 @@ function (angular, _, InfluxQueryBuilder) {
       }
 
       if (index === $scope.groupBySegments.length-1) {
-        $scope.groupBySegments.push(MetricSegment.newPlusButton());
+        $scope.groupBySegments.push(uiSegmentSrv.newPlusButton());
       }
 
       segment.type = 'group-by-key';
@@ -131,12 +132,12 @@ function (angular, _, InfluxQueryBuilder) {
     $scope.transformToSegments = function(addTemplateVars) {
       return function(results) {
         var segments = _.map(results, function(segment) {
-          return new MetricSegment({ value: segment.text, expandable: segment.expandable });
+          return uiSegmentSrv.newSegment({ value: segment.text, expandable: segment.expandable });
         });
 
         if (addTemplateVars) {
           _.each(templateSrv.variables, function(variable) {
-            segments.unshift(new MetricSegment({ type: 'template', value: '/$' + variable.name + '/', expandable: true }));
+            segments.unshift(uiSegmentSrv.newSegment({ type: 'template', value: '/$' + variable.name + '/', expandable: true }));
           });
         }
 
@@ -146,14 +147,14 @@ function (angular, _, InfluxQueryBuilder) {
 
     $scope.getTagsOrValues = function(segment, index) {
       if (segment.type === 'condition') {
-        return $q.when([new MetricSegment('AND'), new MetricSegment('OR')]);
+        return $q.when([uiSegmentSrv.newSegment('AND'), uiSegmentSrv.newSegment('OR')]);
       }
       if (segment.type === 'operator') {
         var nextValue = $scope.tagSegments[index+1].value;
         if (/^\/.*\/$/.test(nextValue)) {
-          return $q.when(MetricSegment.newOperators(['=~', '!~']));
+          return $q.when(uiSegmentSrv.newOperators(['=~', '!~']));
         } else {
-          return $q.when(MetricSegment.newOperators(['=', '<>', '<', '>']));
+          return $q.when(uiSegmentSrv.newOperators(['=', '<>', '<', '>']));
         }
       }
 
@@ -186,7 +187,7 @@ function (angular, _, InfluxQueryBuilder) {
 
     $scope.addField = function() {
       $scope.target.fields.push({name: $scope.addFieldSegment.value, func: 'mean'});
-      _.extend($scope.addFieldSegment, MetricSegment.newPlusButton());
+      _.extend($scope.addFieldSegment, uiSegmentSrv.newPlusButton());
     };
 
     $scope.fieldChanged = function(field) {
@@ -217,27 +218,27 @@ function (angular, _, InfluxQueryBuilder) {
       if (segment.value === $scope.removeTagFilterSegment.value) {
         $scope.tagSegments.splice(index, 3);
         if ($scope.tagSegments.length === 0) {
-          $scope.tagSegments.push(MetricSegment.newPlusButton());
+          $scope.tagSegments.push(uiSegmentSrv.newPlusButton());
         } else if ($scope.tagSegments.length > 2) {
           $scope.tagSegments.splice(Math.max(index-1, 0), 1);
           if ($scope.tagSegments[$scope.tagSegments.length-1].type !== 'plus-button') {
-            $scope.tagSegments.push(MetricSegment.newPlusButton());
+            $scope.tagSegments.push(uiSegmentSrv.newPlusButton());
           }
         }
       }
       else {
         if (segment.type === 'plus-button') {
           if (index > 2) {
-            $scope.tagSegments.splice(index, 0, MetricSegment.newCondition('AND'));
+            $scope.tagSegments.splice(index, 0, uiSegmentSrv.newCondition('AND'));
           }
-          $scope.tagSegments.push(MetricSegment.newOperator('='));
-          $scope.tagSegments.push(MetricSegment.newFake('select tag value', 'value', 'query-segment-value'));
+          $scope.tagSegments.push(uiSegmentSrv.newOperator('='));
+          $scope.tagSegments.push(uiSegmentSrv.newFake('select tag value', 'value', 'query-segment-value'));
           segment.type = 'key';
           segment.cssClass = 'query-segment-key';
         }
 
         if ((index+1) === $scope.tagSegments.length) {
-          $scope.tagSegments.push(MetricSegment.newPlusButton());
+          $scope.tagSegments.push(uiSegmentSrv.newPlusButton());
         }
       }
 
@@ -258,7 +259,7 @@ function (angular, _, InfluxQueryBuilder) {
         else if (segment2.type === 'value') {
           tagOperator = $scope.getTagValueOperator(segment2.value, tags[tagIndex].operator);
           if (tagOperator) {
-            $scope.tagSegments[index-1] = MetricSegment.newOperator(tagOperator);
+            $scope.tagSegments[index-1] = uiSegmentSrv.newOperator(tagOperator);
             tags[tagIndex].operator = tagOperator;
           }
           tags[tagIndex].value = segment2.value;
@@ -285,59 +286,6 @@ function (angular, _, InfluxQueryBuilder) {
       }
     };
 
-    function MetricSegment(options) {
-      if (options === '*' || options.value === '*') {
-        this.value = '*';
-        this.html = $sce.trustAsHtml('<i class="fa fa-asterisk"><i>');
-        this.expandable = true;
-        return;
-      }
-
-      if (_.isString(options)) {
-        this.value = options;
-        this.html = $sce.trustAsHtml(this.value);
-        return;
-      }
-
-      this.cssClass = options.cssClass;
-      this.type = options.type;
-      this.fake = options.fake;
-      this.value = options.value;
-      this.type = options.type;
-      this.expandable = options.expandable;
-      this.html = options.html || $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value));
-    }
-
-    MetricSegment.newSelectMeasurement = function() {
-      return new MetricSegment({value: 'select measurement', fake: true});
-    };
-
-    MetricSegment.newFake = function(text, type, cssClass) {
-      return new MetricSegment({value: text, fake: true, type: type, cssClass: cssClass});
-    };
-
-    MetricSegment.newCondition = function(condition) {
-      return new MetricSegment({value: condition, type: 'condition', cssClass: 'query-keyword' });
-    };
-
-    MetricSegment.newOperator = function(op) {
-      return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
-    };
-
-    MetricSegment.newOperators = function(ops) {
-      return _.map(ops, function(op) {
-        return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
-      });
-    };
-
-    MetricSegment.newPlusButton = function() {
-      return new MetricSegment({fake: true, html: '<i class="fa fa-plus "></i>', type: 'plus-button' });
-    };
-
-    MetricSegment.newSelectTagValue = function() {
-      return new MetricSegment({value: 'select tag value', fake: true});
-    };
-
     $scope.init();
 
   });
diff --git a/public/app/services/all.js b/public/app/services/all.js
index da1dfebd06a..bbe0e5235d3 100644
--- a/public/app/services/all.js
+++ b/public/app/services/all.js
@@ -7,6 +7,7 @@ define([
   './keyboardManager',
   './analytics',
   './popoverSrv',
+  './uiSegmentSrv',
   './backendSrv',
 ],
 function () {});
diff --git a/public/app/services/uiSegmentSrv.js b/public/app/services/uiSegmentSrv.js
new file mode 100644
index 00000000000..492008b88c8
--- /dev/null
+++ b/public/app/services/uiSegmentSrv.js
@@ -0,0 +1,83 @@
+define([
+  'angular',
+  'lodash',
+],
+function (angular, _) {
+  'use strict';
+
+  var module = angular.module('grafana.services');
+
+  module.service('uiSegmentSrv', function($sce, templateSrv) {
+
+    function MetricSegment(options) {
+      if (options === '*' || options.value === '*') {
+        this.value = '*';
+        this.html = $sce.trustAsHtml('<i class="fa fa-asterisk"><i>');
+        this.expandable = true;
+        return;
+      }
+
+      if (_.isString(options)) {
+        this.value = options;
+        this.html = $sce.trustAsHtml(this.value);
+        return;
+      }
+
+      this.cssClass = options.cssClass;
+      this.type = options.type;
+      this.fake = options.fake;
+      this.value = options.value;
+      this.type = options.type;
+      this.expandable = options.expandable;
+      this.html = options.html || $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(this.value));
+    }
+
+    this.newSelectMeasurement = function() {
+      return new MetricSegment({value: 'select measurement', fake: true});
+    };
+
+    this.newFake = function(text, type, cssClass) {
+      return new MetricSegment({value: text, fake: true, type: type, cssClass: cssClass});
+    };
+
+    this.newSegment = function(options) {
+      return new MetricSegment(options);
+    };
+
+    this.newKey = function(key) {
+      return new MetricSegment({value: key, type: 'key', cssClass: 'query-segment-key' });
+    };
+
+    this.newKeyValue = function(value) {
+      return new MetricSegment({value: value, type: 'value', cssClass: 'query-segment-value' });
+    };
+
+    this.newCondition = function(condition) {
+      return new MetricSegment({value: condition, type: 'condition', cssClass: 'query-keyword' });
+    };
+
+    this.newOperator = function(op) {
+      return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
+    };
+
+    this.newOperators = function(ops) {
+      return _.map(ops, function(op) {
+        return new MetricSegment({value: op, type: 'operator', cssClass: 'query-segment-operator' });
+      });
+    };
+
+    this.newSelectMetric = function() {
+      return new MetricSegment({value: 'select metric', fake: true});
+    };
+
+    this.newPlusButton = function() {
+      return new MetricSegment({fake: true, html: '<i class="fa fa-plus "></i>', type: 'plus-button' });
+    };
+
+    this.newSelectTagValue = function() {
+      return new MetricSegment({value: 'select tag value', fake: true});
+    };
+
+  });
+
+});
diff --git a/public/test/specs/graphiteTargetCtrl-specs.js b/public/test/specs/graphiteTargetCtrl-specs.js
index 9680ffb5742..5b50b31a5c5 100644
--- a/public/test/specs/graphiteTargetCtrl-specs.js
+++ b/public/test/specs/graphiteTargetCtrl-specs.js
@@ -1,7 +1,8 @@
 define([
   'helpers',
   'plugins/datasource/graphite/gfunc',
-  'plugins/datasource/graphite/queryCtrl'
+  'plugins/datasource/graphite/queryCtrl',
+  'services/uiSegmentSrv'
 ], function(helpers, gfunc) {
   'use strict';
 
@@ -9,6 +10,7 @@ define([
     var ctx = new helpers.ControllerTestContext();
 
     beforeEach(module('grafana.controllers'));
+    beforeEach(module('grafana.services'));
     beforeEach(ctx.providePhase());
     beforeEach(ctx.createControllerPhase('GraphiteQueryCtrl'));
 
diff --git a/public/test/specs/influxdbQueryCtrl-specs.js b/public/test/specs/influxdbQueryCtrl-specs.js
index 4eee85859b9..03e4318e94e 100644
--- a/public/test/specs/influxdbQueryCtrl-specs.js
+++ b/public/test/specs/influxdbQueryCtrl-specs.js
@@ -1,6 +1,7 @@
 define([
   'helpers',
-  'plugins/datasource/influxdb/queryCtrl'
+  'plugins/datasource/influxdb/queryCtrl',
+  'services/uiSegmentSrv'
 ], function(helpers) {
   'use strict';
 
@@ -8,6 +9,7 @@ define([
     var ctx = new helpers.ControllerTestContext();
 
     beforeEach(module('grafana.controllers'));
+    beforeEach(module('grafana.services'));
     beforeEach(ctx.providePhase());
     beforeEach(ctx.createControllerPhase('InfluxQueryCtrl'));