From d5ba6ec489f6b35c056904734df9cebce9ae4377 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sun, 3 Dec 2017 10:16:23 +0300
Subject: [PATCH] triggers panel: update options page design

---
 dist/panel-triggers/partials/options_tab.html | 308 +++++++++---------
 src/panel-triggers/partials/options_tab.html  | 308 +++++++++---------
 2 files changed, 296 insertions(+), 320 deletions(-)

diff --git a/dist/panel-triggers/partials/options_tab.html b/dist/panel-triggers/partials/options_tab.html
index 3a225dd..2b4d9bc 100644
--- a/dist/panel-triggers/partials/options_tab.html
+++ b/dist/panel-triggers/partials/options_tab.html
@@ -1,159 +1,147 @@
 <div class="editor-row">
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Options</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Acknowledged</label>
-        <div class="gf-form-select-wrapper width-12">
-          <select class="gf-form-input"
-            ng-model="editor.panel.showTriggers"
-            ng-options="f for f in editor.ackFilters"
-            ng-change="editor.panelCtrl.refresh()">
-          </select>
-        </div>
-      </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-13"
-        label="Hide hosts in maintenance"
-        checked="editor.panel.hideHostsInMaintenance"
-        on-change="ctrl.refresh()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Sort by</label>
-        <div class="gf-form-select-wrapper width-12">
-          <select class="gf-form-input"
-            ng-model="editor.panel.sortTriggersBy"
-            ng-options="f.text for f in editor.sortByFields track by f.value"
-            ng-change="editor.panelCtrl.refresh()">
-          </select>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Show events</label>
-        <div class="gf-form-select-wrapper width-9">
-          <select class="gf-form-input"
-            ng-model="editor.panel.showEvents"
-            ng-options="f.text for f in editor.showEventsFields track by f.value"
-            ng-change="editor.panelCtrl.refresh()">
-          </select>
-        </div>
-      </div>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Page size</label>
-        <input class="gf-form-input width-6"
-          type="number"
-          ng-model="editor.panel.pageSize"
-          ng-model-onblur
-          ng-change="editor.panelCtrl.refresh()">
-      </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-8"
-        label="Enable scroll"
-        checked="editor.panel.scroll"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-14">
-        <label class="gf-form-label width-8">Font size</label>
-        <div class="gf-form-select-wrapper max-width-8">
-          <select class="gf-form-input"
-              ng-model="editor.panel.fontSize"
-              ng-options="f for f in editor.fontSizes"
-              ng-change="editor.panelCtrl.render()"></select>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Limit triggers</label>
-        <input class="gf-form-input width-5"
-          type="number"
-          ng-model="editor.panel.limit"
-          ng-model-onblur
-          ng-change="editor.panelCtrl.refresh()">
-      </div>
-    </div>
-  </div>
-
   <div class="section gf-form-group">
     <h5 class="section-heading">Show fields</h5>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form"
-        label-class="width-8"
-        label="Host name"
-        checked="editor.panel.hostField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-12"
-        label="Host technical name"
-        checked="editor.panel.hostTechNameField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-5"
-        label="Status"
-        checked="editor.panel.statusField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form"
-        label-class="width-5"
-        label="Severity"
-        checked="editor.panel.severityField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-7"
-        label="Last change"
-        checked="editor.panel.lastChangeField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-4"
-        label="Age"
-        checked="editor.panel.ageField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-4"
-        label="Info"
-        checked="editor.panel.infoField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form"
-        label-class="width-14"
-        label="Custom Last change format"
-        checked="editor.panel.customLastChangeFormat"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
-        <label class="gf-form-label width-3">
-          <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
-            <tip>See moment.js dosc for time format.</tip>
-          </a>
-        </label>
-        <input class="gf-form-input width-18"
-          type="text"
-          placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
-          empty-to-null
-          ng-model-onblur
-          ng-model="editor.panel.lastChangeFormat"
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Host name"
+      checked="editor.panel.hostField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Technical name"
+      checked="editor.panel.hostTechNameField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Status"
+      checked="editor.panel.statusField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Severity"
+      checked="editor.panel.severityField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Last change"
+      checked="editor.panel.lastChangeField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Age"
+      checked="editor.panel.ageField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Info"
+      checked="editor.panel.infoField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Options</h5>
+    <gf-form-switch class="gf-form"
+      label-class="width-15"
+      label="Hide hosts in maintenance"
+      checked="editor.panel.hideHostsInMaintenance"
+      on-change="ctrl.refresh()">
+    </gf-form-switch>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Acknowledged</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="gf-form-input"
+          ng-model="editor.panel.showTriggers"
+          ng-options="f for f in editor.ackFilters"
           ng-change="editor.panelCtrl.refresh()">
+        </select>
       </div>
     </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Sort by</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="gf-form-input"
+          ng-model="editor.panel.sortTriggersBy"
+          ng-options="f.text for f in editor.sortByFields track by f.value"
+          ng-change="editor.panelCtrl.refresh()">
+        </select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Show events</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="gf-form-input"
+          ng-model="editor.panel.showEvents"
+          ng-options="f.text for f in editor.showEventsFields track by f.value"
+          ng-change="editor.panelCtrl.refresh()">
+        </select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Limit triggers</label>
+      <input class="gf-form-input width-5"
+        type="number"
+        ng-model="editor.panel.limit"
+        ng-model-onblur
+        ng-change="editor.panelCtrl.refresh()">
+    </div>
   </div>
-</div>
 
-<div class="editor-row">
   <div class="section gf-form-group">
-    <h5 class="section-heading">Customize triggers severity and colors</h5>
+    <h5 class="section-heading">View options</h5>
+    <div class="gf-form max-width-14">
+      <label class="gf-form-label width-8">Font size</label>
+      <div class="gf-form-select-wrapper max-width-6">
+        <select class="gf-form-input"
+            ng-model="editor.panel.fontSize"
+            ng-options="f for f in editor.fontSizes"
+            ng-change="editor.panelCtrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Page size</label>
+      <input class="gf-form-input width-6"
+        type="number"
+        ng-model="editor.panel.pageSize"
+        ng-model-onblur
+        ng-change="editor.panelCtrl.refresh()">
+    </div>
+    <gf-form-switch class="gf-form"
+      label-class="width-8"
+      label="Enable scroll"
+      checked="editor.panel.scroll"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-16"
+      label="Custom Last change format"
+      checked="editor.panel.customLastChangeFormat"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
+      <label class="gf-form-label width-3">
+        <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
+          <tip>See moment.js dosc for time format.</tip>
+        </a>
+      </label>
+      <input class="gf-form-input width-18"
+        type="text"
+        placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
+        empty-to-null
+        ng-model-onblur
+        ng-model="editor.panel.lastChangeFormat"
+        ng-change="editor.panelCtrl.refresh()">
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Triggers severity and colors</h5>
     <div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
       <div class="gf-form">
         <label class="gf-form-label width-3">{{ trigger.priority }}</label>
@@ -180,19 +168,7 @@
     <div class="gf-form-inline">
       <div class="gf-form">
         <label class="gf-form-label width-3">&nbsp;</label>
-        <label class="gf-form-label width-12"
-          ng-style="{background:editor.panel.okEventColor}">
-          OK event color
-        </label>
-        <span class="gf-form-label">
-          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
-        </span>
-      </div>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-3">&nbsp;</label>
-        <label class="gf-form-label width-12"
+        <label class="gf-form-input width-12"
           ng-style="{background:editor.panel.ackEventColor}">
           Acknowledged color
         </label>
@@ -207,5 +183,17 @@
         on-change="editor.panelCtrl.refresh()">
       </gf-form-switch>
     </div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">&nbsp;</label>
+        <label class="gf-form-input width-12"
+          ng-style="{background:editor.panel.okEventColor}">
+          OK event color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/panel-triggers/partials/options_tab.html b/src/panel-triggers/partials/options_tab.html
index 3a225dd..2b4d9bc 100644
--- a/src/panel-triggers/partials/options_tab.html
+++ b/src/panel-triggers/partials/options_tab.html
@@ -1,159 +1,147 @@
 <div class="editor-row">
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Options</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Acknowledged</label>
-        <div class="gf-form-select-wrapper width-12">
-          <select class="gf-form-input"
-            ng-model="editor.panel.showTriggers"
-            ng-options="f for f in editor.ackFilters"
-            ng-change="editor.panelCtrl.refresh()">
-          </select>
-        </div>
-      </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-13"
-        label="Hide hosts in maintenance"
-        checked="editor.panel.hideHostsInMaintenance"
-        on-change="ctrl.refresh()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Sort by</label>
-        <div class="gf-form-select-wrapper width-12">
-          <select class="gf-form-input"
-            ng-model="editor.panel.sortTriggersBy"
-            ng-options="f.text for f in editor.sortByFields track by f.value"
-            ng-change="editor.panelCtrl.refresh()">
-          </select>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Show events</label>
-        <div class="gf-form-select-wrapper width-9">
-          <select class="gf-form-input"
-            ng-model="editor.panel.showEvents"
-            ng-options="f.text for f in editor.showEventsFields track by f.value"
-            ng-change="editor.panelCtrl.refresh()">
-          </select>
-        </div>
-      </div>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Page size</label>
-        <input class="gf-form-input width-6"
-          type="number"
-          ng-model="editor.panel.pageSize"
-          ng-model-onblur
-          ng-change="editor.panelCtrl.refresh()">
-      </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-8"
-        label="Enable scroll"
-        checked="editor.panel.scroll"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-14">
-        <label class="gf-form-label width-8">Font size</label>
-        <div class="gf-form-select-wrapper max-width-8">
-          <select class="gf-form-input"
-              ng-model="editor.panel.fontSize"
-              ng-options="f for f in editor.fontSizes"
-              ng-change="editor.panelCtrl.render()"></select>
-        </div>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Limit triggers</label>
-        <input class="gf-form-input width-5"
-          type="number"
-          ng-model="editor.panel.limit"
-          ng-model-onblur
-          ng-change="editor.panelCtrl.refresh()">
-      </div>
-    </div>
-  </div>
-
   <div class="section gf-form-group">
     <h5 class="section-heading">Show fields</h5>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form"
-        label-class="width-8"
-        label="Host name"
-        checked="editor.panel.hostField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-12"
-        label="Host technical name"
-        checked="editor.panel.hostTechNameField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-5"
-        label="Status"
-        checked="editor.panel.statusField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form"
-        label-class="width-5"
-        label="Severity"
-        checked="editor.panel.severityField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-7"
-        label="Last change"
-        checked="editor.panel.lastChangeField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-4"
-        label="Age"
-        checked="editor.panel.ageField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <gf-form-switch class="gf-form"
-        label-class="width-4"
-        label="Info"
-        checked="editor.panel.infoField"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-    </div>
-    <div class="gf-form-inline">
-      <gf-form-switch class="gf-form"
-        label-class="width-14"
-        label="Custom Last change format"
-        checked="editor.panel.customLastChangeFormat"
-        on-change="ctrl.render()">
-      </gf-form-switch>
-      <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
-        <label class="gf-form-label width-3">
-          <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
-            <tip>See moment.js dosc for time format.</tip>
-          </a>
-        </label>
-        <input class="gf-form-input width-18"
-          type="text"
-          placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
-          empty-to-null
-          ng-model-onblur
-          ng-model="editor.panel.lastChangeFormat"
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Host name"
+      checked="editor.panel.hostField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Technical name"
+      checked="editor.panel.hostTechNameField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Status"
+      checked="editor.panel.statusField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Severity"
+      checked="editor.panel.severityField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Last change"
+      checked="editor.panel.lastChangeField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Age"
+      checked="editor.panel.ageField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Info"
+      checked="editor.panel.infoField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Options</h5>
+    <gf-form-switch class="gf-form"
+      label-class="width-15"
+      label="Hide hosts in maintenance"
+      checked="editor.panel.hideHostsInMaintenance"
+      on-change="ctrl.refresh()">
+    </gf-form-switch>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Acknowledged</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="gf-form-input"
+          ng-model="editor.panel.showTriggers"
+          ng-options="f for f in editor.ackFilters"
           ng-change="editor.panelCtrl.refresh()">
+        </select>
       </div>
     </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Sort by</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="gf-form-input"
+          ng-model="editor.panel.sortTriggersBy"
+          ng-options="f.text for f in editor.sortByFields track by f.value"
+          ng-change="editor.panelCtrl.refresh()">
+        </select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Show events</label>
+      <div class="gf-form-select-wrapper width-12">
+        <select class="gf-form-input"
+          ng-model="editor.panel.showEvents"
+          ng-options="f.text for f in editor.showEventsFields track by f.value"
+          ng-change="editor.panelCtrl.refresh()">
+        </select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Limit triggers</label>
+      <input class="gf-form-input width-5"
+        type="number"
+        ng-model="editor.panel.limit"
+        ng-model-onblur
+        ng-change="editor.panelCtrl.refresh()">
+    </div>
   </div>
-</div>
 
-<div class="editor-row">
   <div class="section gf-form-group">
-    <h5 class="section-heading">Customize triggers severity and colors</h5>
+    <h5 class="section-heading">View options</h5>
+    <div class="gf-form max-width-14">
+      <label class="gf-form-label width-8">Font size</label>
+      <div class="gf-form-select-wrapper max-width-6">
+        <select class="gf-form-input"
+            ng-model="editor.panel.fontSize"
+            ng-options="f for f in editor.fontSizes"
+            ng-change="editor.panelCtrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Page size</label>
+      <input class="gf-form-input width-6"
+        type="number"
+        ng-model="editor.panel.pageSize"
+        ng-model-onblur
+        ng-change="editor.panelCtrl.refresh()">
+    </div>
+    <gf-form-switch class="gf-form"
+      label-class="width-8"
+      label="Enable scroll"
+      checked="editor.panel.scroll"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-16"
+      label="Custom Last change format"
+      checked="editor.panel.customLastChangeFormat"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <div class="gf-form" ng-if="editor.panel.customLastChangeFormat">
+      <label class="gf-form-label width-3">
+        <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
+          <tip>See moment.js dosc for time format.</tip>
+        </a>
+      </label>
+      <input class="gf-form-input width-18"
+        type="text"
+        placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
+        empty-to-null
+        ng-model-onblur
+        ng-model="editor.panel.lastChangeFormat"
+        ng-change="editor.panelCtrl.refresh()">
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Triggers severity and colors</h5>
     <div class="gf-form-inline" ng-repeat="trigger in editor.panel.triggerSeverity">
       <div class="gf-form">
         <label class="gf-form-label width-3">{{ trigger.priority }}</label>
@@ -180,19 +168,7 @@
     <div class="gf-form-inline">
       <div class="gf-form">
         <label class="gf-form-label width-3">&nbsp;</label>
-        <label class="gf-form-label width-12"
-          ng-style="{background:editor.panel.okEventColor}">
-          OK event color
-        </label>
-        <span class="gf-form-label">
-          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
-        </span>
-      </div>
-    </div>
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-3">&nbsp;</label>
-        <label class="gf-form-label width-12"
+        <label class="gf-form-input width-12"
           ng-style="{background:editor.panel.ackEventColor}">
           Acknowledged color
         </label>
@@ -207,5 +183,17 @@
         on-change="editor.panelCtrl.refresh()">
       </gf-form-switch>
     </div>
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">&nbsp;</label>
+        <label class="gf-form-input width-12"
+          ng-style="{background:editor.panel.okEventColor}">
+          OK event color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="editor.panel.okEventColor" ng-change="editor.panelCtrl.refresh()"></spectrum-picker>
+        </span>
+      </div>
+    </div>
   </div>
 </div>