Query options moved to separate section with show/hide function.

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

@@ -114,13 +114,6 @@
           'zbx-regex': ctrl.isRegex(ctrl.target.host.filter)
         }">
     </li>
-    <li class="tight-form-item" ng-hide="ctrl.target.mode == 2">
-      Show disabled items&nbsp;
-      <editor-checkbox text=""
-        model="ctrl.target.showDisabledItems"
-        change="ctrl.onTargetBlur()">
-      </editor-checkbox>
-    </li>
   </ul>
   <div class="clearfix"></div>
 </div>
@@ -160,25 +153,49 @@
           'zbx-regex': ctrl.isRegex(ctrl.target.item.filter)
         }">
     </li>
-    <li class="tight-form-item query-keyword">Options</li>
+    <li class="tight-form-item last">
-    <li ng-repeat="func in ctrl.target.functions">
+      <a ng-click="ctrl.toggleQueryOptions()">
-      <span metric-function-editor class="tight-form-item tight-form-func">
+        <i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
-      </span>
+        <i class="fa fa-caret-right" ng-hide="ctrl.showQueryOptions"></i>
-    </li>
+        {{ctrl.queryOptionsText}}
-    <li class="dropdown" add-metric-function>
+      </a>
     </li>
   </ul>
 
   <div class="clearfix"></div>
 </div>
-<div class="tight-form" ng-hide="ctrl.target.mode === 1" ng-if="ctrl.target.options">
+<div class="tight-form" ng-hide="ctrl.target.mode === 1">
   <ul class="tight-form-list" role="menu">
     <li class="tight-form-item" style="width: 44px">&nbsp</li>
-    <li class="tight-form-item query-keyword" style="width: 5em">Options</li>
+    <li class="tight-form-item query-keyword" style="width: 5em">Functions</li>
+    <li ng-repeat="func in ctrl.target.functions">
+      <span metric-function-editor class="tight-form-item tight-form-func"></span>
+    </li>
+    <li class="dropdown" add-metric-function></li>
   </ul>
   <div class="clearfix"></div>
 </div>
 
+<!-- Query options -->
+<div class="tight-form" ng-if="ctrl.showQueryOptions">
+  <div class="tight-form-inner-box">
+    <div class="tight-form last">
+      <ul class="tight-form-list">
+        <li class="tight-form-item" style="width: 170px">
+          Show disabled items
+        </li>
+        <li class="tight-form-item last">
+          <editor-checkbox text=""
+            model="ctrl.target.options.showDisabledItems"
+            change="ctrl.onQueryOptionChange()">
+          </editor-checkbox>
+        </li>
+      </ul>
+      <div class="clearfix"></div>
+    </div>
+  </div>
+</div>
+
 <div class="tight-form" ng-show="ctrl.target.mode == 2">
   <ul class="tight-form-list" role="menu">
     <li class="tight-form-item" style="width: 44px">&nbsp</li>

src/datasource-zabbix/query.controller.js

@@ -48,7 +48,8 @@ export class ZabbixQueryController extends QueryCtrl {
 
       var scopeDefaults = {
         metric: {},
-        oldTarget: _.cloneDeep(this.target)
+        oldTarget: _.cloneDeep(this.target),
+        queryOptionsText: this.renderQueryOptionsText()
       };
       _.defaults(this, scopeDefaults);
 
@@ -60,6 +61,9 @@ export class ZabbixQueryController extends QueryCtrl {
         application: { filter: "" },
         item: { filter: "" },
         functions: [],
+        options: {
+          showDisabledItems: false
+        },
         refId: "A"
       };
       _.defaults(target, targetDefaults);
@@ -156,7 +160,7 @@ export class ZabbixQueryController extends QueryCtrl {
           return self.zabbix
             .getItems(undefined, appids, itemtype)
             .then(items => {
-              if (!self.target.showDisabledItems) {
+              if (!self.target.options.showDisabledItems) {
                 items = _.filter(items, {'status': '0'});
               }
               self.metric.itemList = items;
@@ -169,7 +173,7 @@ export class ZabbixQueryController extends QueryCtrl {
       return self.zabbix
         .getItems(hostids, undefined, itemtype)
         .then(items => {
-          if (!self.target.showDisabledItems) {
+          if (!self.target.options.showDisabledItems) {
             items = _.filter(items, {'status': '0'});
           }
           self.metric.itemList = items;
@@ -258,6 +262,34 @@ export class ZabbixQueryController extends QueryCtrl {
     }
   }
 
+  toggleQueryOptions() {
+    this.showQueryOptions = !this.showQueryOptions;
+  }
+
+  onQueryOptionChange() {
+    this.queryOptionsText = this.renderQueryOptionsText();
+    this.onTargetBlur();
+  }
+
+  renderQueryOptionsText() {
+    var optionsMap = {
+      showDisabledItems: "Show disabled items"
+    };
+    var options = [];
+    _.forOwn(this.target.options, (value, key) => {
+      if (value) {
+        if (value === true) {
+          // Show only option name (if enabled) for boolean options
+          options.push(optionsMap[key]);
+        } else {
+          // Show "option = value" for another options
+          options.push(optionsMap[key] + " = " + value);
+        }
+      }
+    });
+    return "Options: " + options.join(', ');
+  }
+
   /**
    * Switch query editor to specified mode.
    * Modes: