PR for request #562

https://github.com/alexanderzobnin/grafana-zabbix/issues/562

dist/panel-triggers/partials/module.html

@@ -1,97 +1,97 @@
-<div class="triggers-panel-container">
-  <div class="triggers-panel-scroll">
-    <section class="card-section card-list-layout-list">
-      <ol class="alert-rule-list">
-        <!-- Trigger list item -->
-        <li class="alert-rule-item zbx-trigger-card" ng-repeat="trigger in ctrl.currentTriggersPage"
-          ng-class="{'zbx-trigger-highlighted': ctrl.panel.highlightBackground}"
-          ng-style="ctrl.panel.highlightBackground && {background: ctrl.getBackground(trigger)}">
-
-          <!-- Heart icon -->
-          <div class="alert-rule-item__icon" ng-style="!ctrl.panel.highlightBackground && {color: trigger.color}">
-            <i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
-          </div>
-
-          <div class="alert-rule-item__body">
-            <div class="alert-rule-item__header">
-
-              <p class="alert-rule-item__name">
-                <span class="zabbix-trigger-name">{{trigger.description}}</span>
-                <span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
-                  <i ng-if="trigger.maintenance" class="fa fa-wrench zbx-maintenance-icon"></i>
-                  {{ ctrl.formatHostName(trigger) }}
-                </span>
-                <span class="zabbix-hostname" ng-if="ctrl.panel.hostGroups">
-                  {{ ctrl.formatHostGroups(trigger) }}
-                </span>
-
-                <span class="zbx-trigger-tags" ng-if="ctrl.panel.showTags && trigger.tags">
-                  <span ng-repeat="tag in trigger.tags" ng-click="ctrl.addTagFilter(tag, trigger.datasource)"
-                    tag-color-from-name="tag.tag+tag.value" class="label label-tag zbx-tag">
-                    {{tag.tag}}: {{tag.value}}
-                  </span>
-                </span>
-              </p>
-
-              <div class="alert-rule-item__text">
-                <span ng-if="ctrl.panel.statusField" class="zbx-trigger-state"
-                  ng-class="ctrl.getAlertStateClass(trigger)">
-                  {{ctrl.triggerStatusMap[trigger.value]}}
-                </span>
-                <span ng-if="ctrl.panel.severityField" class="zbx-trigger-severity"
-                  ng-class="ctrl.getAlertStateClass(trigger)"
-                  ng-style="!ctrl.panel.highlightBackground && {color: trigger.color}">
-                  {{trigger.severity}}
-                </span>
-                <span class="alert-rule-item__time">
-                  {{trigger.age && "for " + trigger.age}}
-                </span>
-                <span class="zbx-description"
-                  ng-if="ctrl.panel.descriptionField && !ctrl.panel.descriptionAtNewLine"
-                  ng-bind-html="trigger.comments">
-                </span>
-              </div>
-
-              <!-- If description at the new line -->
-              <div class="alert-rule-item__text"
-                ng-if="trigger.comments && ctrl.panel.descriptionField && ctrl.panel.descriptionAtNewLine">
-                <span class="alert-rule-item__info zbx-description zbx-description--newline"
-                  ng-bind-html="trigger.comments">
-                </span>
-              </div>
-
-            </div>
-          </div>
-
-          <!-- Datasource name -->
-          <div class="alert-rule-item__time zabbix-trigger-source" ng-if="ctrl.panel.datasources.length > 1">
-            <span>
-              <i class="fa fa-database"></i>
-              {{trigger.datasource}}
-            </span>
-          </div>
-
-          <div class="alert-rule-item__time zbx-trigger-lastchange">
-            <span>{{trigger.lastchange || "last change unknown"}}</span>
-
-            <div class="trigger-info-block zbx-status-icons">
-              <a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
-                <i class="fa fa-external-link"></i>
-              </a>
-
-              <span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
-                <i class="fa fa-question-circle"></i>
-              </span>
-
-              <ack-tooltip ng-if="trigger.lastEvent" ack="trigger.acknowledges" trigger="trigger"
-                on-ack="ctrl.acknowledgeTrigger" context="ctrl">
-              </ack-tooltip>
-            </div>
-          </div>
-        </li>
-      </ol>
-    </section>
-  </div>
-</div>
-
-<div class="triggers-panel-footer"></div>
+<div class="triggers-panel-container">
+  <div class="triggers-panel-scroll">
+    <section class="card-section card-list-layout-list">
+      <ol class="alert-rule-list">
+        <!-- Trigger list item -->
+        <li class="alert-rule-item zbx-trigger-card" ng-repeat="trigger in ctrl.currentTriggersPage"
+          ng-class="{'zbx-trigger-highlighted': ctrl.panel.highlightBackground}"
+          ng-style="ctrl.panel.highlightBackground && {background: ctrl.getBackground(trigger)}">
+
+          <!-- Heart icon -->
+          <div class="alert-rule-item__icon" ng-style="!ctrl.panel.highlightBackground && {color: trigger.color}">
+            <i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
+          </div>
+
+          <div class="alert-rule-item__body">
+            <div class="alert-rule-item__header">
+
+              <p class="alert-rule-item__name">
+                <span class="zabbix-trigger-name">{{trigger.description}}</span>
+                <span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
+                  <i ng-if="trigger.maintenance" class="fa fa-wrench zbx-maintenance-icon"></i>
+                  {{ ctrl.formatHostName(trigger) }}
+                </span>
+                <span class="zabbix-hostname" ng-if="ctrl.panel.hostGroups">
+                  {{ ctrl.formatHostGroups(trigger) }}
+                </span>
+
+                <span class="zbx-trigger-tags" ng-if="ctrl.panel.showTags && trigger.tags">
+                  <span ng-repeat="tag in trigger.tags" ng-click="ctrl.addTagFilter(tag, trigger.datasource)"
+                    tag-color-from-name="tag.tag+tag.value" class="label label-tag zbx-tag">
+                    {{tag.tag}}: {{tag.value}}
+                  </span>
+                </span>
+              </p>
+
+              <div class="alert-rule-item__text">
+                <span ng-if="ctrl.panel.statusField" class="zbx-trigger-state"
+                  ng-class="ctrl.getAlertStateClass(trigger)">
+                  {{ctrl.triggerStatusMap[trigger.value]}}
+                </span>
+                <span ng-if="ctrl.panel.severityField" class="zbx-trigger-severity"
+                  ng-class="ctrl.getAlertStateClass(trigger)"
+                  ng-style="!ctrl.panel.highlightBackground && {color: trigger.color}">
+                  {{trigger.severity}}
+                </span>
+                <span class="alert-rule-item__time">
+                  {{trigger.age && "for " + trigger.age}}
+                </span>
+                <span class="zbx-description"
+                  ng-if="ctrl.panel.descriptionField && !ctrl.panel.descriptionAtNewLine"
+                  ng-bind-html="trigger.comments">
+                </span>
+              </div>
+
+              <!-- If description at the new line -->
+              <div class="alert-rule-item__text"
+                ng-if="trigger.comments && ctrl.panel.descriptionField && ctrl.panel.descriptionAtNewLine">
+                <span class="alert-rule-item__info zbx-description zbx-description--newline"
+                  ng-bind-html="trigger.comments">
+                </span>
+              </div>
+
+            </div>
+          </div>
+
+          <!-- Datasource name -->
+          <div class="alert-rule-item__time zabbix-trigger-source" ng-if="ctrl.panel.datasources.length > 1">
+            <span>
+              <i class="fa fa-database"></i>
+              {{trigger.datasource}}
+            </span>
+          </div>
+
+          <div class="alert-rule-item__time zbx-trigger-lastchange">
+            <span>{{trigger.lastchange || "last change unknown"}}</span>
+
+            <div class="trigger-info-block zbx-status-icons">
+              <a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
+                <i class="fa fa-external-link"></i>
+              </a>
+
+              <span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
+                <i class="fa fa-question-circle"></i>
+              </span>
+
+              <ack-tooltip ng-if="trigger.lastEvent" ack="trigger.acknowledges" trigger="trigger"
+                on-ack="ctrl.acknowledgeTrigger" context="ctrl">
+              </ack-tooltip>
+            </div>
+          </div>
+        </li>
+      </ol>
+    </section>
+  </div>
+</div>
+
+<div class="triggers-panel-footer"></div>

dist/panel-triggers/partials/options_tab.html

@@ -1,223 +1,223 @@
-<div class="editor-row">
-  <div class="section gf-form-group">
-    <h5 class="section-heading">Show fields</h5>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Host name"
-      checked="ctrl.panel.hostField"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Technical name"
-      checked="ctrl.panel.hostTechNameField"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Host groups"
-      checked="ctrl.panel.hostGroups"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Tags"
-      checked="ctrl.panel.showTags"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Status"
-      checked="ctrl.panel.statusField"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Severity"
-      checked="ctrl.panel.severityField"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-9"
-      label="Description"
-      checked="ctrl.panel.descriptionField"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form" ng-if="ctrl.panel.descriptionField"
-      label-class="width-9"
-      label="At the new line"
-      checked="ctrl.panel.descriptionAtNewLine"
-      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="Show hosts in maintenance"
-      checked="ctrl.panel.hostsInMaintenance"
-      on-change="ctrl.render()">
-    </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="ctrl.panel.showTriggers"
-          ng-options="f for f in editor.ackFilters"
-          ng-change="ctrl.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="ctrl.panel.sortTriggersBy"
-          ng-options="f.text for f in editor.sortByFields track by f.value"
-          ng-change="ctrl.render()">
-        </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="ctrl.panel.showEvents"
-          ng-options="f.text for f in editor.showEventsFields track by f.value"
-          ng-change="ctrl.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" placeholder="100"
-        ng-model="ctrl.panel.limit"
-        ng-model-onblur ng-change="ctrl.refresh()">
-    </div>
-  </div>
-
-  <div class="section gf-form-group">
-    <h5 class="section-heading">View options</h5>
-    <div class="gf-form">
-      <label class="gf-form-label width-10">Font size</label>
-      <div class="gf-form-select-wrapper max-width-8">
-        <select class="gf-form-input"
-            ng-model="ctrl.panel.fontSize"
-            ng-options="f for f in editor.fontSizes"
-            ng-change="ctrl.render()"></select>
-      </div>
-    </div>
-    <div class="gf-form">
-      <label class="gf-form-label width-10">Page size</label>
-      <input class="gf-form-input width-8"
-        type="number" placeholder="10"
-        ng-model="ctrl.panel.pageSize"
-        ng-model-onblur ng-change="ctrl.render()">
-    </div>
-    <gf-form-switch class="gf-form"
-      label-class="width-10"
-      label="Highlight background"
-      checked="ctrl.panel.highlightBackground"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <gf-form-switch class="gf-form"
-      label-class="width-10"
-      label="Highlight new events"
-      checked="ctrl.panel.highlightNewEvents"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <div class="gf-form">
-      <label class="gf-form-label width-10">Newer than</label>
-      <input class="gf-form-input width-8" placeholder="1h"
-        ng-model="ctrl.panel.highlightNewerThan"
-        ng-model-onblur ng-change="ctrl.render()">
-    </div>
-    <gf-form-switch class="gf-form"
-      label-class="width-16"
-      label="Custom Last change format"
-      checked="ctrl.panel.customLastChangeFormat"
-      on-change="ctrl.render()">
-    </gf-form-switch>
-    <div class="gf-form" ng-if="ctrl.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="ctrl.panel.lastChangeFormat"
-        ng-change="ctrl.render()">
-    </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 ctrl.panel.triggerSeverity">
-      <div class="gf-form">
-        <label class="gf-form-label width-3">{{ trigger.priority }}</label>
-        <label class="gf-form-label triggers-severity-config"
-          ng-style="{color: trigger.color}">
-          <i class="icon-gf" ng-class="ctrl.getAlertIconClassBySeverity(trigger)"></i>
-        </label>
-        <input type="text"
-          class="gf-form-input width-12"
-          empty-to-null
-          ng-model="trigger.severity"
-          ng-model-onblur
-          ng-change="ctrl.render()">
-        <span class="gf-form-label">
-          <spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
-        </span>
-      </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-0"
-        label="Show"
-        checked="trigger.show"
-        on-change="ctrl.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-label triggers-severity-config"
-          ng-style="{color: ctrl.panel.ackEventColor}">
-          <i class="icon-gf icon-gf-online"></i>
-        </label>
-        <label class="gf-form-label width-12">
-          Acknowledged color
-        </label>
-        <span class="gf-form-label">
-          <spectrum-picker ng-model="ctrl.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
-        </span>
-      </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-0"
-        label="Show"
-        checked="ctrl.panel.markAckEvents"
-        on-change="ctrl.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-label triggers-severity-config"
-          ng-style="{color: ctrl.panel.okEventColor}">
-          <i class="icon-gf icon-gf-online"></i>
-        </label>
-        <label class="gf-form-label width-12">
-          OK event color
-        </label>
-        <span class="gf-form-label">
-          <spectrum-picker ng-model="ctrl.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Show fields</h5>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Host name"
+      checked="ctrl.panel.hostField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Technical name"
+      checked="ctrl.panel.hostTechNameField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Host groups"
+      checked="ctrl.panel.hostGroups"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Tags"
+      checked="ctrl.panel.showTags"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Status"
+      checked="ctrl.panel.statusField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Severity"
+      checked="ctrl.panel.severityField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Description"
+      checked="ctrl.panel.descriptionField"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form" ng-if="ctrl.panel.descriptionField"
+      label-class="width-9"
+      label="At the new line"
+      checked="ctrl.panel.descriptionAtNewLine"
+      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="Show hosts in maintenance"
+      checked="ctrl.panel.hostsInMaintenance"
+      on-change="ctrl.render()">
+    </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="ctrl.panel.showTriggers"
+          ng-options="f for f in editor.ackFilters"
+          ng-change="ctrl.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="ctrl.panel.sortTriggersBy"
+          ng-options="f.text for f in editor.sortByFields track by f.value"
+          ng-change="ctrl.render()">
+        </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="ctrl.panel.showEvents"
+          ng-options="f.text for f in editor.showEventsFields track by f.value"
+          ng-change="ctrl.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" placeholder="100"
+        ng-model="ctrl.panel.limit"
+        ng-model-onblur ng-change="ctrl.refresh()">
+    </div>
+  </div>
+
+  <div class="section gf-form-group">
+    <h5 class="section-heading">View options</h5>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Font size</label>
+      <div class="gf-form-select-wrapper max-width-8">
+        <select class="gf-form-input"
+            ng-model="ctrl.panel.fontSize"
+            ng-options="f for f in editor.fontSizes"
+            ng-change="ctrl.render()"></select>
+      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Page size</label>
+      <input class="gf-form-input width-8"
+        type="number" placeholder="10"
+        ng-model="ctrl.panel.pageSize"
+        ng-model-onblur ng-change="ctrl.render()">
+    </div>
+    <gf-form-switch class="gf-form"
+      label-class="width-10"
+      label="Highlight background"
+      checked="ctrl.panel.highlightBackground"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-10"
+      label="Highlight new events"
+      checked="ctrl.panel.highlightNewEvents"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <div class="gf-form">
+      <label class="gf-form-label width-10">Newer than</label>
+      <input class="gf-form-input width-8" placeholder="1h"
+        ng-model="ctrl.panel.highlightNewerThan"
+        ng-model-onblur ng-change="ctrl.render()">
+    </div>
+    <gf-form-switch class="gf-form"
+      label-class="width-16"
+      label="Custom Last change format"
+      checked="ctrl.panel.customLastChangeFormat"
+      on-change="ctrl.render()">
+    </gf-form-switch>
+    <div class="gf-form" ng-if="ctrl.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="ctrl.panel.lastChangeFormat"
+        ng-change="ctrl.render()">
+    </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 ctrl.panel.triggerSeverity">
+      <div class="gf-form">
+        <label class="gf-form-label width-3">{{ trigger.priority }}</label>
+        <label class="gf-form-label triggers-severity-config"
+          ng-style="{color: trigger.color}">
+          <i class="icon-gf" ng-class="ctrl.getAlertIconClassBySeverity(trigger)"></i>
+        </label>
+        <input type="text"
+          class="gf-form-input width-12"
+          empty-to-null
+          ng-model="trigger.severity"
+          ng-model-onblur
+          ng-change="ctrl.render()">
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="trigger.color" ng-change="ctrl.render()"></spectrum-picker>
+        </span>
+      </div>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Show"
+        checked="trigger.show"
+        on-change="ctrl.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-label triggers-severity-config"
+          ng-style="{color: ctrl.panel.ackEventColor}">
+          <i class="icon-gf icon-gf-online"></i>
+        </label>
+        <label class="gf-form-label width-12">
+          Acknowledged color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="ctrl.panel.ackEventColor" ng-change="ctrl.render()"></spectrum-picker>
+        </span>
+      </div>
+      <gf-form-switch class="gf-form"
+        label-class="width-0"
+        label="Show"
+        checked="ctrl.panel.markAckEvents"
+        on-change="ctrl.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-label triggers-severity-config"
+          ng-style="{color: ctrl.panel.okEventColor}">
+          <i class="icon-gf icon-gf-online"></i>
+        </label>
+        <label class="gf-form-label width-12">
+          OK event color
+        </label>
+        <span class="gf-form-label">
+          <spectrum-picker ng-model="ctrl.panel.okEventColor" ng-change="ctrl.render()"></spectrum-picker>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

dist/panel-triggers/partials/triggers_tab.html

@@ -1,90 +1,90 @@
-<div class="editor-row">
-  <div class="section gf-form-group">
-    <div class="gf-form-inline">
-      <div class="gf-form">
-        <label class="gf-form-label width-9">Data sources</label>
-      </div>
-      <div class="gf-form">
-        <datasource-selector
-          datasources="ctrl.panel.datasources"
-          options="editor.panelCtrl.available_datasources"
-          on-change="editor.datasourcesChanged()">
-        </datasource-selector>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="editor-row" ng-repeat="ds in ctrl.panel.datasources">
-  <div class="section gf-form-group">
-    <h5 class="section-heading">{{ ds }}</h5>
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-20">
-        <label class="gf-form-label query-keyword width-7">Group</label>
-        <input type="text"
-          ng-model="ctrl.panel.targets[ds].group.filter"
-          bs-typeahead="editor.getGroupNames[ds]"
-          ng-blur="editor.parseTarget()"
-          data-min-length=0
-          data-items=100
-          class="gf-form-input"
-          ng-class="{
-            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].group.filter),
-            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].group.filter)
-          }">
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label query-keyword width-7">Host</label>
-        <input type="text"
-          ng-model="ctrl.panel.targets[ds].host.filter"
-          bs-typeahead="editor.getHostNames[ds]"
-          ng-blur="editor.parseTarget()"
-          data-min-length=0
-          data-items=100
-          class="gf-form-input"
-          ng-class="{
-            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].host.filter),
-            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].host.filter)
-          }">
-      </div>
-    </div>
-
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-20">
-        <label class="gf-form-label query-keyword width-7">Application</label>
-        <input type="text"
-          ng-model="ctrl.panel.targets[ds].application.filter"
-          bs-typeahead="editor.getApplicationNames[ds]"
-          ng-blur="editor.parseTarget()"
-          data-min-length=0
-          data-items=100
-          class="gf-form-input"
-          ng-class="{
-            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].application.filter),
-            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].application.filter)
-          }">
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label query-keyword width-7">Trigger</label>
-        <input type="text"
-          ng-model="ctrl.panel.targets[ds].trigger.filter"
-          ng-blur="editor.parseTarget()"
-          placeholder="trigger name"
-          class="gf-form-input"
-          ng-style="ctrl.panel.targets[ds].trigger.style"
-          ng-class="{
-            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].trigger.filter),
-            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].trigger.filter)
-          }"
-          empty-to-null>
-      </div>
-      <div class="gf-form">
-        <label class="gf-form-label query-keyword width-7">Tags</label>
-        <input type="text" class="gf-form-input"
-          ng-model="ctrl.panel.targets[ds].tags.filter"
-          ng-blur="editor.parseTarget()"
-          placeholder="tag1:value1, tag2:value2">
-      </div>
-    </div>
-  </div>
-</div>
+<div class="editor-row">
+  <div class="section gf-form-group">
+    <div class="gf-form-inline">
+      <div class="gf-form">
+        <label class="gf-form-label width-9">Data sources</label>
+      </div>
+      <div class="gf-form">
+        <datasource-selector
+          datasources="ctrl.panel.datasources"
+          options="editor.panelCtrl.available_datasources"
+          on-change="editor.datasourcesChanged()">
+        </datasource-selector>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="editor-row" ng-repeat="ds in ctrl.panel.datasources">
+  <div class="section gf-form-group">
+    <h5 class="section-heading">{{ ds }}</h5>
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-20">
+        <label class="gf-form-label query-keyword width-7">Group</label>
+        <input type="text"
+          ng-model="ctrl.panel.targets[ds].group.filter"
+          bs-typeahead="editor.getGroupNames[ds]"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].group.filter),
+            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].group.filter)
+          }">
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Host</label>
+        <input type="text"
+          ng-model="ctrl.panel.targets[ds].host.filter"
+          bs-typeahead="editor.getHostNames[ds]"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].host.filter),
+            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].host.filter)
+          }">
+      </div>
+    </div>
+
+    <div class="gf-form-inline">
+      <div class="gf-form max-width-20">
+        <label class="gf-form-label query-keyword width-7">Application</label>
+        <input type="text"
+          ng-model="ctrl.panel.targets[ds].application.filter"
+          bs-typeahead="editor.getApplicationNames[ds]"
+          ng-blur="editor.parseTarget()"
+          data-min-length=0
+          data-items=100
+          class="gf-form-input"
+          ng-class="{
+            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].application.filter),
+            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].application.filter)
+          }">
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Trigger</label>
+        <input type="text"
+          ng-model="ctrl.panel.targets[ds].trigger.filter"
+          ng-blur="editor.parseTarget()"
+          placeholder="trigger name"
+          class="gf-form-input"
+          ng-style="ctrl.panel.targets[ds].trigger.style"
+          ng-class="{
+            'zbx-variable': editor.isVariable(ctrl.panel.targets[ds].trigger.filter),
+            'zbx-regex': editor.isRegex(ctrl.panel.targets[ds].trigger.filter)
+          }"
+          empty-to-null>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword width-7">Tags</label>
+        <input type="text" class="gf-form-input"
+          ng-model="ctrl.panel.targets[ds].tags.filter"
+          ng-blur="editor.parseTarget()"
+          placeholder="tag1:value1, tag2:value2">
+      </div>
+    </div>
+  </div>
+</div>