grafana-zabbix/dist/datasource-zabbix/partials/query.editor.html

<query-editor-row query-ctrl="ctrl" can-collapse="false">

  <div class="gf-form-inline">
    <div class="gf-form max-width-20">
      <label class="gf-form-label width-7">Query Mode</label>
      <div class="gf-form-select-wrapper max-width-20">
        <select class="gf-form-input"
              ng-change="ctrl.switchEditorMode(ctrl.target.mode)"
              ng-model="ctrl.target.mode"
              ng-options="m.mode as m.text for m in ctrl.editorModes">
        </select>
      </div>
    </div>
    <div class="gf-form" ng-show="ctrl.target.mode == editorMode.TEXT">
      <label class="gf-form-label query-keyword width-8">Format As</label>
      <div class="gf-form-select-wrapper">
        <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
      </div>
    </div>
    <div class="gf-form" ng-show="ctrl.target.mode === editorMode.TEXT && ctrl.target.resultFormat === 'table'">
      <label class="gf-form-label query-keyword width-8">Options</label>
      <gf-form-switch class="gf-form" label="Host" checked="ctrl.target.table.host" on-change="ctrl.onTargetBlur()">
      </gf-form-switch>
      <gf-form-switch class="gf-form" label="Item" checked="ctrl.target.table.item" on-change="ctrl.onTargetBlur()">
      </gf-form-switch>
      <gf-form-switch class="gf-form" label="Key" checked="ctrl.target.table.key" on-change="ctrl.onTargetBlur()">
      </gf-form-switch>
      <gf-form-switch class="gf-form" label="Skip empty values" checked="ctrl.target.table.skipEmptyValues" on-change="ctrl.onTargetBlur()">
      </gf-form-switch>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>

  <!-- IT Service editor -->
  <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITSERVICE">
    <div class="gf-form max-width-20">
      <label class="gf-form-label query-keyword width-7">IT Service</label>
      <input type="text"
        ng-model="ctrl.target.itServiceFilter"
        bs-typeahead="ctrl.getITServices"
        ng-blur="ctrl.onTargetBlur()"
        data-min-length=0
        data-items=100
        class="gf-form-input"
        ng-class="{
          'zbx-variable': ctrl.isVariable(ctrl.target.itServiceFilter),
          'zbx-regex': ctrl.isRegex(ctrl.target.itServiceFilter)
        }">
      </input>
    </div>
    <div class="gf-form">
      <label class="gf-form-label query-keyword">Property</label>
      <div class="gf-form-select-wrapper">
        <select class="gf-form-input"
          ng-change="ctrl.onTargetBlur()"
          ng-model="ctrl.target.slaProperty"
          ng-options="slaProperty.name for slaProperty in ctrl.slaPropertyList track by slaProperty.name">
        </select>
      </div>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>

  <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT || ctrl.target.mode == editorMode.TRIGGERS">
    <!-- Select Group -->
    <div class="gf-form max-width-20">
      <label class="gf-form-label query-keyword width-7">Group</label>
      <input type="text"
        ng-model="ctrl.target.group.filter"
        bs-typeahead="ctrl.getGroupNames"
        ng-blur="ctrl.onTargetBlur()"
        data-min-length=0
        data-items=100
        class="gf-form-input"
        ng-class="{
          'zbx-variable': ctrl.isVariable(ctrl.target.group.filter),
          'zbx-regex': ctrl.isRegex(ctrl.target.group.filter)
          }"></input>
    </div>
    <!-- Select Host -->
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-8">Host</label>
      <input type="text"
        ng-model="ctrl.target.host.filter"
        bs-typeahead="ctrl.getHostNames"
        ng-blur="ctrl.onTargetBlur()"
        data-min-length=0
        data-items=100
        class="gf-form-input"
        ng-class="{
          'zbx-variable': ctrl.isVariable(ctrl.target.host.filter),
          'zbx-regex': ctrl.isRegex(ctrl.target.host.filter)
          }">
    </div>

    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>

  <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT || ctrl.target.mode == editorMode.TRIGGERS">
    <!-- Select Application -->
    <div class="gf-form max-width-20">
      <label class="gf-form-label query-keyword width-7">Application</label>
      <input type="text"
        ng-model="ctrl.target.application.filter"
        bs-typeahead="ctrl.getApplicationNames"
        ng-blur="ctrl.onTargetBlur()"
        data-min-length=0
        data-items=100
        class="gf-form-input"
        ng-class="{
          'zbx-variable': ctrl.isVariable(ctrl.target.application.filter),
          'zbx-regex': ctrl.isRegex(ctrl.target.application.filter)
        }">
    </div>

    <!-- Select Item -->
    <div class="gf-form" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.TEXT">
      <label class="gf-form-label query-keyword width-8">Item</label>
      <input type="text"
        ng-model="ctrl.target.item.filter"
        bs-typeahead="ctrl.getItemNames"
        ng-blur="ctrl.onTargetBlur()"
        data-min-length=0
        data-items=100
        class="gf-form-input"
        ng-class="{
          'zbx-variable': ctrl.isVariable(ctrl.target.item.filter),
          'zbx-regex': ctrl.isRegex(ctrl.target.item.filter)
        }">
    </div>

    <div class="gf-form max-width-23" ng-show="ctrl.target.mode == editorMode.TRIGGERS">
      <label class="gf-form-label query-keyword width-8">Min Severity</label>
      <div class="gf-form-select-wrapper width-16">
        <select class="gf-form-input"
              ng-change="ctrl.onTargetBlur()"
              ng-model="ctrl.target.triggers.minSeverity"
              ng-options="s.val as s.text for s in ctrl.triggerSeverity">
        </select>
      </div>
    </div>
    <div class="gf-form max-width-20" ng-show="ctrl.target.mode == editorMode.TRIGGERS">
      <label class="gf-form-label query-keyword width-8">Acknowledged</label>
      <div class="gf-form-select-wrapper width-12">
        <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.mode == editorMode.TRIGGERS"
      checked="ctrl.target.triggers.count" on-change="ctrl.onTargetBlur()">
    </gf-form-switch>

    <div class="gf-form gf-form--grow">
      <label class="gf-form-label gf-form-label--grow">
        <a ng-click="ctrl.toggleQueryOptions()" ng-hide="ctrl.target.mode == editorMode.TRIGGERS">
          <i class="fa fa-caret-down" ng-show="ctrl.showQueryOptions"></i>
          <i class="fa fa-caret-right" ng-hide="ctrl.showQueryOptions"></i>
          {{ctrl.queryOptionsText}}
        </a>
      </label>
    </div>
  </div>

  <!-- Query options -->
  <div class="gf-form-group" ng-if="ctrl.showQueryOptions">
    <div class="gf-form offset-width-7" ng-hide="ctrl.target.mode == editorMode.TRIGGERS">
      <gf-form-switch class="gf-form"
        label="Show disabled items"
        checked="ctrl.target.options.showDisabledItems"
        on-change="ctrl.onQueryOptionChange()">
      </gf-form-switch>
    </div>
  </div>

  <!-- Item IDs editor mode -->
  <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.ITEMID">
    <div class="gf-form max-width-20">
      <label class="gf-form-label query-keyword width-7">Item IDs</label>
      <input type="text"
        ng-model="ctrl.target.itemids"
        bs-typeahead="ctrl.getVariables"
        ng-blur="ctrl.onTargetBlur()"
        data-min-length=0
        data-items=100
        class="gf-form-input"
        ng-class="{
          'zbx-variable': ctrl.isVariable(ctrl.target.itServiceFilter),
          'zbx-regex': ctrl.isRegex(ctrl.target.itServiceFilter)
        }">
      </input>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>

  <!-- Metric processing functions -->
  <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.METRICS || ctrl.target.mode == editorMode.ITEMID">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-7">Functions</label>
      <div ng-repeat="func in ctrl.target.functions" class="gf-form-label query-part" metric-function-editor></div>
    </div>
    <div class="gf-form dropdown" add-metric-function>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>

  <!-- Text mode options -->
  <div class="gf-form-inline" ng-show="ctrl.target.mode == editorMode.TEXT">
    <!-- Text metric regex -->
    <div class="gf-form max-width-20">
      <label class="gf-form-label query-keyword width-7">Text filter</label>
      <input type="text"
             class="gf-form-input"
             ng-model="ctrl.target.textFilter"
             spellcheck='false'
             placeholder="Text filter (regex)"
             ng-blur="ctrl.onTargetBlur()">
    </div>

    <gf-form-switch class="gf-form" label="Use capture groups" checked="ctrl.target.useCaptureGroups" on-change="ctrl.onTargetBlur()">
    </gf-form-switch>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
</query-editor-row>