tech(singlestat): convert to gf-form

public/app/plugins/panel/singlestat/mappings.html

@@ -1,84 +1,58 @@
 <div class="editor-row">
-	<div class="section tight-form-container" style="margin-bottom: 20px">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					Type
-				</li>
-				<li>
-					<select class="input-medium tight-form-input" ng-model="ctrl.panel.mappingType"
-						 ng-options="f.value as f.name for f in ctrl.panel.mappingTypes" ng-change="ctrl.render()"></select>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-	</div>
+  <div class="gf-form-group">
+    <div class="gf-form">
+        <span class="gf-form-label">
+          Type
+        </span>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="ctrl.panel.mappingType"
+                                                        ng-options="f.value as f.name for f in ctrl.panel.mappingTypes" ng-change="ctrl.render()"></select>
+        </div>
+    </div>
+  </div>
 </div>
 <div class="editor-row" ng-if="ctrl.panel.mappingType==1">
-	<div class="section" style="margin-bottom: 20px">
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					<strong>Value to text mapping</strong>
-				</li>
-				<li class="tight-form-item"  ng-repeat-start="map in ctrl.panel.valueMaps">
-					<i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
-				</li>
-				<li>
-					<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-				</li>
-				<li class="tight-form-item">
-					<i class="fa fa-arrow-right"></i>
-				</li>
-				<li ng-repeat-end>
-					<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-				</li>
+  <h5 class="page-heading">Set valuea mappings</h5>
+  <div class="gf-form-group">
+    <div class="gf-form" ng-repeat="map in ctrl.panel.valueMaps">
+      <span class="gf-form-label">
+        <i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
+      </span>
+      <input type="text" ng-model="map.value" placeholder="value" class="gf-form-input max-width-6" ng-blur="ctrl.render()">
+      <span class="gf-form-label">
+        <i class="fa fa-arrow-right"></i>
+      </span>
+      <input type="text" placeholder="text" ng-model="map.text" class="gf-form-input max-width-8" ng-blur="ctrl.render()">
+    </div>
 
-				<li>
-					<a class="pointer tight-form-item last" ng-click="ctrl.addValueMap();">
-						<i class="fa fa-plus"></i>
-					</a>
-				</li>
-
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-	</div>
+    <div class="gf-form-button-row">
+      <button class="btn btn-inverse" ng-click="ctrl.addValueMap();">
+        <i class="fa fa-plus"></i>
+        Add a value mapping
+      </button>
+    </div>
+  </div>
 </div>
 <div class="editor-row" ng-if="ctrl.panel.mappingType==2">
-	<h5>Set range mappings</h5>
-	<div class="section gf-form-group">
-		<div class="tight-form-container">
-			<div class="tight-form" ng-repeat="rangeMap in ctrl.panel.rangeMaps">
-				<ul class="tight-form-list">
-					<li class="tight-form-item">
-						<i class="fa fa-remove pointer" ng-click="ctrl.removeRangeMap(rangeMap)"></i>
-					</li>
-					<li class="tight-form-item">
-						From
-					</li>
-					<li>
-						<input type="text" ng-model="rangeMap.from" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-					</li>
-					<li class="tight-form-item">
-						To
-					</li>
-					<li>
-						<input type="text" ng-model="rangeMap.to" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-					</li>
-					<li class="tight-form-item">
-						Text
-					</li>
-					<li>
-						<input type="text" ng-model="rangeMap.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-		</div>
+  <h5 class="page-heading">Set range mappings</h5>
+  <div class="gf-form-group">
+    <div class="gf-form" ng-repeat="rangeMap in ctrl.panel.rangeMaps">
+        <span class="gf-form-label">
+          <i class="fa fa-remove pointer" ng-click="ctrl.removeRangeMap(rangeMap)"></i>
+        </span>
+        <span class="gf-form-label">From</span>
+        <input type="text" ng-model="rangeMap.from" class="gf-form-input max-width-6" ng-blur="ctrl.render()">
+        <span class="gf-form-label">To</span>
+        <input type="text" ng-model="rangeMap.to" class="gf-form-input max-width-6" ng-blur="ctrl.render()">
+        <span class="gf-form-label">Text</span>
+        <input type="text" ng-model="rangeMap.text" class="gf-form-input max-width-8" ng-blur="ctrl.render()">
+    </div>
 
-		<button class="btn btn-inverse" style="margin-top: 20px" ng-click="ctrl.addRangeMap()">
-			Add a range mapping
-		</button>
-	</div>
+    <div class="gf-form-button-row">
+      <button class="btn btn-inverse" ng-click="ctrl.addRangeMap()">
+        <i class="fa fa-plus"></i>
+        Add a range mapping
+      </button>
+    </div>
+  </div>
 </div>

public/app/plugins/panel/singlestat/module.ts

@@ -81,7 +81,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
   onInitEditMode() {
     this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
     this.addEditorTab('Options', 'public/app/plugins/panel/singlestat/editor.html', 2);
-    this.addEditorTab('Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
+    this.addEditorTab('Value Mappings', 'public/app/plugins/panel/singlestat/mappings.html', 3);
     this.unitFormats = kbn.getUnitFormats();
   }