From 404c2afd461b50d6f1f28e86dc0f94f8d99e84a2 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sat, 19 Mar 2016 18:09:40 +0300
Subject: [PATCH] Fixed annotation editor styles (used native Grafana 3.0).

---
 .../partials/annotations.editor.html          | 116 +++++++++---------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/src/datasource-zabbix/partials/annotations.editor.html b/src/datasource-zabbix/partials/annotations.editor.html
index c7676be..6e2e495 100644
--- a/src/datasource-zabbix/partials/annotations.editor.html
+++ b/src/datasource-zabbix/partials/annotations.editor.html
@@ -1,61 +1,65 @@
-<div class="editor-row">
-  <div class="section tight-form-container" style="margin-bottom: 20px">
-    <h5>Filter Triggers</h5>
-    <div class="tight-form">
-      <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 80px">
-          Group
-        </li>
-        <li>
-          <input type="text"
-            ng-model="ctrl.annotation.group"
-            class="input-large tight-form-input">
-        </li>
-        <li class="tight-form-item" style="width: 50px">
-          Host
-        </li>
-        <li>
-          <input type="text"
-            ng-model="ctrl.annotation.host"
-            class="input-large tight-form-input last">
-        </li>
-      </ul>
-      <div class="clearfix"></div>
+<div class="gf-form-group">
+  <h6>Filter Triggers</h6>
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-10">Group</span>
+      <input type="text"
+             class="gf-form-input max-width-16"
+             ng-model="ctrl.annotation.group">
+      </input>
     </div>
-    <div class="tight-form">
-      <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 80px">
-          Application
-        </li>
-        <li>
-          <input type="text"
-            ng-model="ctrl.annotation.application"
-            class="input-large tight-form-input">
-        </li>
-        <li class="tight-form-item" style="width: 50px">
-          Trigger
-        </li>
-        <li>
-          <input  type="text"
-                  ng-model="ctrl.annotation.trigger"
-                  class="input-large tight-form-input last">
-        </li>
-      </ul>
-      <div class="clearfix"></div>
-    </div>
-  </div>
-</div>
 
-<div class="editor-row">
-  <div class="section">
-    <h5>Options</h5>
-    <div class="editor-option">
-      <label class="small">Minimum severity
-      </label>
-      <select class="small" style="width: 113px" ng-init='ctrl.annotation.minseverity = ctrl.annotation.minseverity || 0' ng-model='ctrl.annotation.minseverity' ng-options="v as k for (k, v) in {'Not classified': 0, 'Information': 1, 'Warning': 2, 'Average': 3, 'High': 4, 'Disaster': 5}" ng-change="render()"></select>
+    <div class="gf-form">
+      <span class="gf-form-label width-10">Host</span>
+      <input type="text"
+             class="gf-form-input max-width-16"
+             ng-model="ctrl.annotation.host">
+      </input>
+    </div>
+  </div>
+  <div class="gf-form-inline">
+    <div class="gf-form">
+      <span class="gf-form-label width-10">Application</span>
+      <input type="text"
+             class="gf-form-input max-width-16"
+             ng-model="ctrl.annotation.application">
+      </input>
+    </div>
+
+    <div class="gf-form">
+      <span class="gf-form-label width-10">Trigger</span>
+      <input type="text"
+             class="gf-form-input max-width-16"
+             ng-model="ctrl.annotation.trigger">
+      </input>
     </div>
-    <editor-opt-bool text="Show OK events" model="ctrl.annotation.showOkEvents"></editor-opt-bool>
-    <editor-opt-bool text="Hide acknowledged events" model="ctrl.annotation.hideAcknowledged"></editor-opt-bool>
-    <editor-opt-bool text="Show hostname" model="ctrl.annotation.showHostname"></editor-opt-bool>
+  </div>
+</div>
+<div class="gf-form-group">
+  <div class="gf-form">
+    <span class="gf-form-label width-10">Minimum severity</span>
+    <div class="gf-form-select-wrapper">
+      <select class="gf-form-input gf-size-auto"
+              ng-init='ctrl.annotation.minseverity = ctrl.annotation.minseverity || 0'
+              ng-model='ctrl.annotation.minseverity'
+              ng-options="v as k for (k, v) in {
+                'Not classified': 0,
+                'Information': 1,
+                'Warning': 2,
+                'Average': 3,
+                'High': 4,
+                'Disaster': 5
+              }"
+              ng-change="render()">
+      </select>
+    </div>
+  </div>
+</div>
+<div class="gf-form-group">
+  <h6>Options</h6>
+  <div class="gf-form">
+    <editor-checkbox text="Show OK events" model="ctrl.annotation.showOkEvents"></editor-checkbox>
+    <editor-checkbox text="Hide acknowledged events" model="ctrl.annotation.hideAcknowledged"></editor-checkbox>
+    <editor-checkbox text="Show hostname" model="ctrl.annotation.showHostname"></editor-checkbox>
   </div>
 </div>