Problems: rearrange options in query editor

src/datasource-zabbix/partials/query.editor.html

@@ -86,7 +86,7 @@
           }">
     </div>
 
-    <div class="gf-form" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
+    <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
       <label class="gf-form-label query-keyword width-7">Proxy</label>
       <input type="text"
         ng-model="ctrl.target.proxy.filter"
@@ -154,7 +154,7 @@
         empty-to-null>
     </div>
 
-    <div class="gf-form">
+    <div class="gf-form max-width-20">
       <label class="gf-form-label query-keyword width-7">Tags</label>
       <input type="text" class="gf-form-input width-14"
         ng-model="ctrl.target.tags.filter"
@@ -168,7 +168,17 @@
   </div>
 
   <div class="gf-form-inline" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
-    <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
+    <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
+      <label class="gf-form-label query-keyword width-7">Show events</label>
+      <div class="gf-form-select-wrapper max-width-20">
+        <select class="gf-form-input"
+          ng-model="ctrl.target.options.showEvents"
+          ng-options="f.text for f in ctrl.showEventsFields track by f.value"
+          ng-change="ctrl.onQueryOptionChange()">
+        </select>
+      </div>
+    </div>
+    <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS">
       <label class="gf-form-label query-keyword width-7">Min Severity</label>
       <div class="gf-form-select-wrapper width-14">
         <select class="gf-form-input"
@@ -178,20 +188,6 @@
         </select>
       </div>
     </div>
-    <div class="gf-form max-width-20" ng-show="ctrl.target.queryType == editorMode.TRIGGERS || ctrl.target.queryType == editorMode.PROBLEMS">
-      <label class="gf-form-label query-keyword width-7">Acknowledged</label>
-      <div class="gf-form-select-wrapper width-14">
-        <select class="gf-form-input"
-              ng-change="ctrl.onTargetBlur()"
-              ng-model="ctrl.target.triggers.acknowledged"
-              ng-options="a.value as a.text for a in ctrl.ackFilters">
-        </select>
-      </div>
-    </div>
-
-    <gf-form-switch class="gf-form" label="Count" ng-show="ctrl.target.queryType == editorMode.TRIGGERS"
-      checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()">
-    </gf-form-switch>
 
     <div class="gf-form gf-form--grow">
       <div class="gf-form-label gf-form-label--grow"></div>
@@ -255,7 +251,7 @@
     </div>
   </div>
 
-  <div class="gf-form gf-form--grow" ng-hide="ctrl.target.queryType == editorMode.TRIGGERS">
+  <div class="gf-form gf-form--grow">
     <label class="gf-form-label gf-form-label--grow">
       <a ng-click="ctrl.toggleQueryOptions()">
         <i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
@@ -282,56 +278,57 @@
       </gf-form-switch>
     </div>
 
-    <div class="gf-form-group" ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
-      <gf-form-switch class="gf-form"
-        label-class="width-15"
-        label="Show hosts in maintenance"
-        checked="ctrl.target.options.hostsInMaintenance"
-        on-change="ctrl.onQueryOptionChange()">
-      </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.target.options.showTriggers"
-            ng-options="f for f in ctrl.problemAckFilters"
-            ng-change="ctrl.onQueryOptionChange()">
-          </select>
+    <div class="gf-form-group" ng-show="ctrl.target.queryType == editorMode.PROBLEMS || ctrl.target.queryType == editorMode.TRIGGERS">
+      <div ng-show="ctrl.target.queryType == editorMode.TRIGGERS">
+        <div class="gf-form max-width-20">
+          <label class="gf-form-label width-7">Acknowledged</label>
+          <div class="gf-form-select-wrapper width-14">
+            <select class="gf-form-input"
+                  ng-change="ctrl.onTargetBlur()"
+                  ng-model="ctrl.target.triggers.acknowledged"
+                  ng-options="a.value as a.text for a in ctrl.ackFilters">
+            </select>
+          </div>
         </div>
+        <gf-form-switch class="gf-form"
+          label-class="width-9"
+          label="Count"
+          checked="ctrl.target.triggers.count"
+          on-change="ctrl.onTargetBlur()">
+        </gf-form-switch>
       </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.target.options.sortTriggersBy"
-            ng-options="f.text for f in ctrl.sortByFields track by f.value"
-            ng-change="ctrl.onQueryOptionChange()">
-          </select>
+
+      <div ng-show="ctrl.target.queryType == editorMode.PROBLEMS">
+        <div class="gf-form">
+          <label class="gf-form-label width-9">Sort by</label>
+          <div class="gf-form-select-wrapper width-12">
+            <select class="gf-form-input"
+              ng-model="ctrl.target.options.sortTriggersBy"
+              ng-options="f.text for f in ctrl.sortByFields track by f.value"
+              ng-change="ctrl.onQueryOptionChange()">
+            </select>
+          </div>
         </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.target.options.showEvents"
-            ng-options="f.text for f in ctrl.showEventsFields track by f.value"
-            ng-change="ctrl.onQueryOptionChange()">
-          </select>
+        <gf-form-switch class="gf-form"
+          label-class="width-9"
+          label="Hosts in maintenance"
+          checked="ctrl.target.options.hostsInMaintenance"
+          on-change="ctrl.onQueryOptionChange()">
+        </gf-form-switch>
+        <gf-form-switch class="gf-form"
+          label-class="width-9"
+          label="Host proxy"
+          checked="ctrl.target.options.hostProxy"
+          on-change="ctrl.onQueryOptionChange()">
+        </gf-form-switch>
+        <div class="gf-form">
+          <label class="gf-form-label width-9">Limit triggers</label>
+          <input class="gf-form-input width-5"
+            type="number" placeholder="100"
+            ng-model="ctrl.target.options.limit"
+            ng-model-onblur ng-change="ctrl.onQueryOptionChange()">
         </div>
       </div>
-      <gf-form-switch class="gf-form"
-        label-class="width-8"
-        label="Host proxy"
-        checked="ctrl.target.options.hostProxy"
-        on-change="ctrl.onQueryOptionChange()">
-      </gf-form-switch>
-      <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.target.options.limit"
-          ng-model-onblur ng-change="ctrl.onQueryOptionChange()">
-      </div>
     </div>
   </div>
 </query-editor-row>

src/datasource-zabbix/query.controller.js

@@ -26,9 +26,9 @@ function getTargetDefaults() {
       skipEmptyValues: false,
       // Problems
       hostsInMaintenance: false,
-      showTriggers: null,
-      sortTriggersBy: null,
-      showEvents: null,
+      hostProxy: false,
+      sortTriggersBy: { text: 'last change', value: 'lastchange' },
+      showEvents: { text: 'Problems', value: 1 },
     },
     table: {
       'skipEmptyValues': false
@@ -358,15 +358,13 @@ export class ZabbixQueryController extends QueryCtrl {
       showDisabledItems: "Show disabled items",
       skipEmptyValues: "Skip empty values",
       hostsInMaintenance: "Show hosts in maintenance",
-      showTriggers: "Acknowledged",
       sortTriggersBy: "Sort problems",
-      showEvents: "Show events",
       limit: "Limit problems",
       hostProxy: "Show proxy",
     };
     var options = [];
     _.forOwn(this.target.options, (value, key) => {
-      if (value) {
+      if (value && optionsMap[key]) {
         if (value === true) {
           // Show only option name (if enabled) for boolean options
           options.push(optionsMap[key]);