style(graph): convert query options to gf-form

public/app/plugins/datasource/graphite/partials/query.options.html

@@ -1,74 +1,70 @@
-<section class="grafana-metric-options">
+<section class="grafana-metric-options gf-form-group">
-	<div class="tight-form">
+	<div class="gf-form-inline">
-		<ul class="tight-form-list">
+		<div class="gf-form">
-			<li class="tight-form-item tight-form-item-icon">
+			<span class="gf-form-label">
 				<i class="fa fa-wrench"></i>
-			</li>
+			</span>
-			<li class="tight-form-item">
+			<span class="gf-form-label width-8">Cache timeout</span>
-				Cache timeout
+			<input type="text"
-			</li>
+				class="gf-form-input"
-			<li>
+				ng-model="ctrl.panelCtrl.panel.cacheTimeout"
-				<input type="text"
+				bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
-					class="input-mini tight-form-input"
+				data-placement="right"
-					ng-model="ctrl.panelCtrl.panel.cacheTimeout"
+				spellcheck='false'
-					bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
+				placeholder="60">
-					data-placement="right"
+			</input>
-					spellcheck='false'
+		</div>
-					placeholder="60"></input>
+		<div class="gf-form">
-			</li>
+			<span class="gf-form-label width-10">Max data points</span>
-			<li class="tight-form-item">
+			<input type="text"
-				Max data points
+				class="gf-form-input"
-			</li>
+				ng-model="ctrl.panelCtrl.panel.maxDataPoints"
-			<li>
+				bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
-				<input type="text"
+				data-placement="right"
-					class="input-mini tight-form-input"
+				ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
-					ng-model="ctrl.panelCtrl.panel.maxDataPoints"
+				spellcheck='false'
-					bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
+				placeholder="auto">
-					data-placement="right"
+			</input>
-					ng-model-onblur ng-change="ctrl.panelCtrl.refresh()"
+		</div>
-					spellcheck='false'
-					placeholder="auto"></input>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
 	</div>
-	<div class="tight-form last">
+	<div class="gf-form-inline">
-		<ul class="tight-form-list">
+		<div class="gf-form">
-			<li class="tight-form-item tight-form-item-icon">
+			<span class="gf-form-label width-12">
 				<i class="fa fa-info-circle"></i>
-			</li>
-			<li class="tight-form-item">
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					shorter legend names
 				</a>
-			</li>
+			</span>
-			<li class="tight-form-item">
+			<span class="gf-form-label width-12">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					series as parameters
 				</a>
-			</li>
+			</span>
-			<li class="tight-form-item">
+			<span class="gf-form-label width-7">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					stacking
 				</a>
-			</li>
+			</span>
-			<li class="tight-form-item">
+			<span class="gf-form-label width-8">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					templating
 				</a>
-			</li>
+			</span>
-			<li class="tight-form-item">
+			<span class="gf-form-label width-10">
+				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
 					max data points
 				</a>
-			</li>
+			</span>
-		</ul>
+		</div>
-		<div class="clearfix"></div>
 	</div>
 </section>
 
 <div class="editor-row">
-	<div class="pull-left" style="margin-top: 30px;">
+	<div class="pull-left">
 
 		<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
 			<h5>Shorter legend names</h5>