ux(annotations): migrate annotations editors to new form

public/app/core/directives/misc.js

@@ -39,7 +39,7 @@ function (angular, coreModule, kbn) {
         var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
         var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : '';
 
-        var template = '<div class="editor-option text-center"' + showIf + '>' +
+        var template = '<div class="editor-option gf-form-checkbox text-center"' + showIf + '>' +
           ' <label for="' + attrs.model + '" class="small">' +
           attrs.text + tip + '</label>' +
           '<input class="cr1" id="' + attrs.model + '" type="checkbox" ' +

public/app/features/annotations/partials/editor.html

@@ -34,8 +34,6 @@
 		</button>
 	</div>
 	<div class="gf-box-body">
-
-
 		<div class="editor-row row" ng-if="mode === 'list'">
 			<div class="span6">
 				<div ng-if="annotations.length === 0">
@@ -66,28 +64,32 @@
 			</div>
 		</div>
 
-		<div ng-if="mode === 'edit' || mode === 'new'">
-			<div class="editor-row">
-				<div class="editor-option">
-					<label class="small">Name</label>
-					<input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
+		<div class="gf-form-group annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'">
+			<div class="gf-form-inline">
+				<div class="gf-form gf-size-max-xxl">
+					<span class="gf-form-label width-10">Name</span>
+					<input type="text" class="gf-form-input" ng-model='currentAnnotation.name' placeholder="name"></input>
 				</div>
-				<div class="editor-option">
-					<label class="small">Datasource</label>
-					<select ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
+				<div class="gf-form">
+					<span class="gf-form-label max-width-10">Datasource</span>
+					<select class="gf-form-input gf-size-auto" ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
 				</div>
-				<div class="editor-option text-center">
-					<label class="small">Icon color</label>
+			</div>
+			<div class="gf-form-inline last-row">
+				<div class="gf-form gf-size-max-xl">
+					<span class="gf-form-label width-10">Icon size</span>
+					<select class="gf-form-input gf-size-md" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
+				</div>
+				<div class="gf-form max-width-10">
 					<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
+					<span class="checkbox-label">Icon color</span>
 				</div>
-				<div class="editor-option">
-					<label class="small">Icon size</label>
-					<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
+				<div class="gf-form max-width-10">
+					<editor-checkbox text="Grid line" model="currentAnnotation.showLine"></editor-checkbox>
 				</div>
-				<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
-				<div class="editor-option text-center">
-					<label class="small">Line color</label>
+				<div class="gf-form max-width-10">
 					<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
+					<span class="checkbox-label">Line color</span>
 				</div>
 			</div>
 
@@ -96,11 +98,10 @@
 				</plugin-component>
 			</rebuild-on-change>
 
-			<br>
-			<button ng-show="mode === 'new'" type="button" class="btn btn-success" ng-click="add()">Add</button>
-			<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
-			<br>
-			<br>
+			<div class="gf-button-group">
+				<button ng-show="mode === 'new'" type="button" class="btn btn-success" ng-click="add()">Add</button>
+				<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
+			</div>
 		</div>
 	</div>
 </div>

public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html

@@ -1,39 +1,36 @@
-<div class="editor-row">
-	<div class="section" ng-if="ctrl.annotation.index">
-		<h5>Index name</h5>
-		<div class="editor-option">
-			<input type="text" class="span4" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
-		</div>
+<div class="gf-form-group">
+	<div class="gf-form" ng-if="ctrl.annotation.index">
+		<span class="gf-form-label width-14">Index name</span>
+		<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
 	</div>
-	<div class="section">
-		<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5>
-		<div class="editor-option">
-			<input type="text" class="span6" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
-		</div>
+	<div class="gf-form">
+		<span class="gf-form-label width-14">Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></span>
+		<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
 	</div>
 </div>
 
-<div class="editor-row">
-  <div class="section">
-		<h5>Field mappings</h5>
-		<div class="editor-option">
-			<label class="small">Time</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
+<div class="gf-form-group">
+	<h6>Field mappings</h6>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Time</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Title</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.titleField' placeholder="desc"></input>
 		</div>
-
-		<div class="editor-option">
-			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
+	</div>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Tags</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.textField' placeholder=""></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Text</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.textField' placeholder=""></input>
 		</div>
 	</div>
-</div>
+</div>

public/app/plugins/datasource/graphite/partials/annotations.editor.html

@@ -1,15 +1,10 @@
-<div class="editor-row">
-	<div class="editor-option">
-		<label class="small">Graphite target expression</label>
-		<input type="text" class="span10" ng-model='ctrl.annotation.target' placeholder=""></input>
-	</div>
-</div>
-
-<div class="editor-row">
-	<div class="editor-option">
-		<label class="small">Graphite event tags</label>
-		<input type="text" ng-model='ctrl.annotation.tags' placeholder=""></input>
-	</div>
-</div>
-
-
+<div class="gf-form-group">
+  <div class="gf-form">
+    <span class="gf-form-label width-14">Graphite target expression</span>
+    <input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.target' placeholder=""></input>
+  </div>
+  <div class="gf-form">
+    <span class="gf-form-label width-14">Graphite event tags</span>
+    <input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.tags' placeholder=""></input>
+  </div>
+</div>

public/app/plugins/datasource/influxdb/partials/annotations.editor.html

@@ -1,29 +1,27 @@
-<div class="editor-row">
-	<div class="section">
-		<h5>InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></h5>
-		<div class="editor-option">
-			<input type="text" class="span10" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-14">InfluxDB Query <tip>Example: select text from events where $timeFilter</tip></span class="gf-form-label">
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
 		</div>
 	</div>
 </div>
-
-<div class="editor-row">
-  <div class="section">
-		<h5>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
-		<div class="editor-option">
-			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
+<div class="gf-form-group">
+  <h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
+  <div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Title</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleColumn' placeholder=""></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Tags</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagsColumn' placeholder=""></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Text</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textColumn' placeholder=""></input>
 		</div>
 	</div>
 </div>
-

public/app/plugins/datasource/prometheus/partials/annotations.editor.html

@@ -1,28 +1,28 @@
-<div class="editor-row">
-	<div class="section">
-		<h5>Search expression</h5>
-		<div class="editor-option">
-			<input type="text" class="span6" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Search expression</span>
+			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
 		</div>
 	</div>
 </div>
-
-<div class="editor-row">
-  <div class="section">
-		<h5>Field formats</h5>
-		<div class="editor-option">
-			<label class="small">Title</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
+<div class="gf-form-group">
+	<h6>Field formats</h6>
+  <div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Title</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
 		</div>
 
-		<div class="editor-option">
-			<label class="small">Tags</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Tags</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
 		</div>
-
-		<div class="editor-option">
-			<label class="small">Text</label>
-			<input type="text" class="input-small" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
+	</div>
+	<div class="gf-form-inline">
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Text</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
 		</div>
 	</div>
 </div>

public/sass/components/_dashboard.scss

@@ -285,3 +285,9 @@ div.flot-text {
     padding: 1.2rem .5rem .4rem .5rem;
   }
 }
+
+.annotations-basic-settings {
+  .last-row {
+    margin-bottom: 20px;
+  }
+}