From 2f58aa280cd1f14cf215bfdc6eca76d2b32a42ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 22 Apr 2014 13:08:14 +0200
Subject: [PATCH] Review and small refactoring of PR #331

---
 CHANGELOG.md                                  |  2 +-
 src/app/partials/influxdb/editor.html         | 67 ++++++++++---------
 .../services/influxdb/influxdbDatasource.js   |  8 +--
 3 files changed, 40 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27166a40021..02f64ca7835 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 - Added rounding for graphites from and to time range filters
   for very short absolute ranges (Issue #320)
 - Increased resolution for graphite datapoints (maxDataPoints), now equal to panel pixel width. (Closes #5)
-
+- Improvement to influxdb query editor, can now add where clause and alias (Issue #331, thanks @mavimo)
 
 # 1.5.3 (2014-04-17)
 - Add support for async scripted dashboards (Issue #274)
diff --git a/src/app/partials/influxdb/editor.html b/src/app/partials/influxdb/editor.html
index 0c7b077bc19..07f6ad52b7b 100644
--- a/src/app/partials/influxdb/editor.html
+++ b/src/app/partials/influxdb/editor.html
@@ -41,33 +41,23 @@
           </li>
         </ul>
 
+        <input type="text"
+               class="grafana-target-text-input span10"
+               ng-model="target.query"
+               placeholder="select ..."
+               focus-me="target.rawQuery"
+               spellcheck='false'
+               data-min-length=0 data-items=100
+               ng-model-onblur
+               ng-blur="get_data()"
+               ng-show="target.rawQuery">
 
-        <ul class="grafana-segment-list" role="menu">
-          <li ng-show="target.rawQuery">
-            <input type="text"
-                   class="input-large grafana-target-segment-input span10"
-                   ng-model="target.query"
-                   placeholder="select ..."
-                   data-min-length=0 data-items=100
-                   ng-blur="get_data()">
-          </li>
-          <li class="grafana-target-segment" ng-hide="target.rawQuery">
-            label
-          </li>
-
-          <li ng-hide="target.rawQuery">
-            <input type="text"
-                   class="input-small grafana-target-segment-input"
-                   ng-model="target.label"
-                   spellcheck='false'
-                   placeholder="label"
-                   ng-blur="seriesBlur()">
-          </li>
-          <li class="grafana-target-segment" ng-hide="target.rawQuery">
+        <ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery">
+          <li class="grafana-target-segment">
             from series
           </li>
 
-          <li ng-hide="target.rawQuery">
+          <li>
             <input type="text"
                    class="input-small grafana-target-segment-input"
                    ng-model="target.series"
@@ -78,11 +68,11 @@
                    ng-blur="seriesBlur()">
           </li>
 
-          <li class="grafana-target-segment" ng-hide="target.rawQuery">
+          <li class="grafana-target-segment">
             select
           </li>
 
-          <li ng-hide="target.rawQuery">
+          <li>
             <input type="text"
                    class="input-small grafana-target-segment-input"
                    ng-model="target.column"
@@ -93,23 +83,23 @@
                    ng-blur="get_data()">
           </li>
 
-          <li class="grafana-target-segment" ng-hide="target.rawQuery">
+          <li class="grafana-target-segment">
             function
           </li>
-          <li ng-hide="target.rawQuery">
+          <li>
             <select class="input-small grafana-target-segment-input"
                     ng-change="get_data()"
                     ng-model="target.function"
                     ng-options="f for f in functions" ></select>
           </li>
-          <li ng-hide="target.rawQuery">
+          <li>
             <a class="grafana-target-segment"
                ng-click="target.condiction_filter = !target.condiction_filter; get_data();"
                role="menuitem">
               <i class="icon-filter"></i>
             </a>
           </li>
-          <li ng-hide="target.rawQuery" ng-show="target.condiction_filter">
+          <li ng-show="target.condiction_filter">
             <select class="input-small grafana-target-segment-input"
                     ng-change="get_data()"
                     ng-model="target.condition_add"
@@ -122,7 +112,7 @@
                    bs-typeahead="listColumns"
                    data-min-length=0
                    ng-blur="get_data()">
-            <select class="input-small grafana-target-segment-input"
+            <select class="input-mini grafana-target-segment-input"
                     ng-change="get_data()"
                     ng-model="target.condition_op"
                     ng-options="f for f in operators" ></select>
@@ -134,11 +124,11 @@
                    data-min-length=0
                    ng-blur="get_data()">
           </li>
-          <li class="grafana-target-segment" ng-hide="target.rawQuery">
+          <li class="grafana-target-segment">
             group by time
           </li>
 
-          <li ng-hide="target.rawQuery">
+          <li>
             <input type="text"
                    class="input-mini grafana-target-segment-input"
                    ng-model="target.interval"
@@ -147,6 +137,19 @@
                    spellcheck='false'
                    ng-model-onblur ng-change="get_data()" >
           </li>
+
+          <li class="grafana-target-segment">
+            alias as
+          </li>
+
+          <li>
+            <input type="text"
+                   class="input-small grafana-target-segment-input"
+                   ng-model="target.alias"
+                   spellcheck='false'
+                   placeholder="alias"
+                   ng-blur="seriesBlur()">
+          </li>
         </ul>
 
         <div class="clearfix"></div>
diff --git a/src/app/services/influxdb/influxdbDatasource.js b/src/app/services/influxdb/influxdbDatasource.js
index d443d3ebb40..dad72bd7aef 100644
--- a/src/app/services/influxdb/influxdbDatasource.js
+++ b/src/app/services/influxdb/influxdbDatasource.js
@@ -82,7 +82,7 @@ function (angular, _, kbn) {
           target.query = query;
         }
 
-        return this.doInfluxRequest(query, target.label).then(handleInfluxQueryResponse);
+        return this.doInfluxRequest(query, target.alias).then(handleInfluxQueryResponse);
 
       }, this);
 
@@ -121,7 +121,7 @@ function (angular, _, kbn) {
       });
     }
 
-    InfluxDatasource.prototype.doInfluxRequest = function(query, label) {
+    InfluxDatasource.prototype.doInfluxRequest = function(query, alias) {
       var _this = this;
       var deferred = $q.defer();
 
@@ -142,7 +142,7 @@ function (angular, _, kbn) {
         };
 
         return $http(options).success(function (data) {
-          data.label = label;
+          data.alias = alias;
           deferred.resolve(data);
         });
       }, 10);
@@ -161,7 +161,7 @@ function (angular, _, kbn) {
             return;
           }
 
-          var target = data.label || series.name + "." + column;
+          var target = data.alias || series.name + "." + column;
           var datapoints = [];
 
           for(var i = 0; i < series.points.length; i++) {