From 4544f794719f11589226b3ad88d160f63ff3d1fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 16:18:35 +0100
Subject: [PATCH] Fixed influxdb and opentsdb editors to use latest markup and
 css, #1331

---
 src/app/features/influxdb/funcEditor.js       |  2 +-
 .../influxdb/partials/query.editor.html       | 56 ++++++++++---------
 .../opentsdb/partials/query.editor.html       | 38 +++++++------
 src/css/less/grafana.less                     | 31 ----------
 4 files changed, 50 insertions(+), 77 deletions(-)

diff --git a/src/app/features/influxdb/funcEditor.js b/src/app/features/influxdb/funcEditor.js
index b96ed301d4d..d072a1fa2c4 100644
--- a/src/app/features/influxdb/funcEditor.js
+++ b/src/app/features/influxdb/funcEditor.js
@@ -133,4 +133,4 @@ function (angular, _, $) {
 
     });
 
-});
\ No newline at end of file
+});
diff --git a/src/app/features/influxdb/partials/query.editor.html b/src/app/features/influxdb/partials/query.editor.html
index a960b364e5e..e93cb232b28 100644
--- a/src/app/features/influxdb/partials/query.editor.html
+++ b/src/app/features/influxdb/partials/query.editor.html
@@ -8,22 +8,24 @@
 
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
-        <ul class="grafana-target-controls">
-          <li class="dropdown">
-            <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="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
-							<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</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 class="grafana-segment-list pull-right">
+					<li class="grafana-target-segment">
+						<div class="dropdown">
+							<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="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
+								<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</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>
+						</div>
 					</li>
-					<li>
+					<li class="grafana-target-segment last">
 						<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
 							<i class="fa fa-remove"></i>
 						</a>
@@ -42,7 +44,7 @@
 				<ul class="grafana-segment-list" ng-show="target.rawQuery">
 					<li>
 						<input type="text"
-               class="grafana-target-text-input span10"
+               class="grafana-target-segment-input span10"
                ng-model="target.query"
                placeholder="select ..."
                focus-me="target.rawQuery"
@@ -60,7 +62,7 @@
 					</li>
           <li>
             <input type="text"
-                   class="grafana-target-text-input span8"
+                   class="grafana-target-segment-input span8"
                    ng-model="target.series"
                    spellcheck='false'
                    bs-typeahead="listSeries"
@@ -76,7 +78,7 @@
 					</li>
 
 					<li>
-						<input type="text" class="input-medium grafana-target-text-input" ng-model="target.alias"
+						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
 						spellcheck='false' placeholder="alias" ng-blur="get_data()">
 					</li>
 
@@ -89,14 +91,14 @@
 				<!-- Raw Query mode  -->
 				<ul class="grafana-segment-list" ng-show="target.rawQuery">
 					<li class="grafana-target-segment">
-						<i class="fa eye invisible"></i>
+						<i class="fa fa-eye invisible"></i>
 					</li>
 					<li class="grafana-target-segment">
             alias
           </li>
           <li>
             <input type="text"
-                   class="input-medium grafana-target-text-input"
+                   class="input-medium grafana-target-segment-input"
                    ng-model="target.alias"
                    spellcheck='false'
                    placeholder="alias"
@@ -106,7 +108,7 @@
 						group by time
 					</li>
 					<li>
-						<input type="text" class="input-mini grafana-target-text-input" ng-model="target.interval"
+						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
 									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
 									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
 									 ng-model-onblur ng-change="get_data()" >
@@ -122,7 +124,7 @@
 						select
 					</li>
 					<li class="dropdown">
-						<span influxdb-func-editor class="grafana-target-segment">
+						<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
 						</span>
 					</li>
 
@@ -130,7 +132,7 @@
 						where
 					</li>
 					<li>
-						<input type="text" class="input-medium grafana-target-text-input" ng-model="target.condition"
+						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
 									 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
 					</li>
 
@@ -138,18 +140,18 @@
 						group by time
 					</li>
 					<li>
-						<input type="text" class="input-mini grafana-target-text-input" ng-model="target.interval"
+						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
 									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
 									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
 									 ng-model-onblur ng-change="get_data()" >
 					</li>
 
 					<li class="grafana-target-segment">
-							<i class="fa fa-plus"></i>
+						and
 					</li>
 
 					<li>
-						<input type="text" class="input-small grafana-target-text-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
+						<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
 									 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
 					</li>
 
@@ -190,7 +192,7 @@
 					group by time
 				</li>
 				<li>
-					<input type="text" class="input-medium grafana-target-text-input" ng-model="panel.interval" ng-blur="get_data();"
+					<input type="text" class="input-medium grafana-target-segment-input" ng-model="panel.interval" ng-blur="get_data();"
 					       spellcheck='false' placeholder="example: >10s">
 				</li>
 				<li class="grafana-target-segment">
diff --git a/src/app/features/opentsdb/partials/query.editor.html b/src/app/features/opentsdb/partials/query.editor.html
index f06904f5d2d..e2f6f995dac 100644
--- a/src/app/features/opentsdb/partials/query.editor.html
+++ b/src/app/features/opentsdb/partials/query.editor.html
@@ -7,24 +7,26 @@
 
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
-        <ul class="grafana-target-controls">
-          <li class="dropdown">
-            <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>
-            </ul>
-          </li>
-          <li>
-            <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+				<ul class="grafana-segment-list pull-right">
+					<li class="grafana-target-segment">
+						<div class="dropdown">
+							<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>
+							</ul>
+						</div>
+					</li>
+					<li class="grafana-target-segment last">
+						<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
               <i class="fa fa-remove"></i>
             </a>
           </li>
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index fb6e85ac99c..450f553bfc2 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -203,37 +203,6 @@ input[type=text].grafana-function-param-input {
   padding: 0;
 }
 
-.grafana-target-controls {
-  float: right;
-  list-style: none;
-  margin: 0;
-  text-align: right;
-
-  >li {
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  .fa {
-    position: relative;
-    top: 8px;
-  }
-
-  a {
-    padding: 8px 7px;
-    color: @grafanaTargetColor;
-    font-size: 16px;
-
-    .grafana-target-hidden & {
-      color: @grafanaTargetColorHide;
-    }
-
-    &:hover, &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
 input[type=text].grafana-target-text-input {
   padding: 8px 7px;
   border: none;