grafana-zabbix/dist/datasource-zabbix/partials/config.html

<datasource-http-settings current="ctrl.current" suggest-url="http://localhost/zabbix/api_jsonrpc.php">
</datasource-http-settings>

<div class="gf-form-group">
  <h3 class="page-heading">Zabbix API details</h3>

  <div class="gf-form">
    <span class="gf-form-label width-7">
      Username
    </span>
    <input class="gf-form-input max-width-21"
           type="text"
           ng-model='ctrl.current.jsonData.username'
           placeholder="user"
           required>
    </input>
  </div>

  <div class="gf-form">
    <span class="gf-form-label width-7">
      Password
    </span>
    <input class="gf-form-input max-width-21"
           type="password"
           ng-model='ctrl.current.jsonData.password'
           placeholder="password">
    </input>
  </div>

  <gf-form-switch class="gf-form" label-class="width-7"
    label="Trends"
    checked="ctrl.current.jsonData.trends"
    switch-class="max-width-5">
  </gf-form-switch>
  <div class="gf-form-inline">
    <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
      <span class="gf-form-label width-7">
        After
        <info-popover mode="right-normal">
          Time after which trends will be used.
          Best practice is to set this value to your history storage period (7d, 30d, etc).
        </info-popover>
      </span>
      <input class="gf-form-input max-width-5"
        type="text"
        ng-model='ctrl.current.jsonData.trendsFrom'
        placeholder="7d">
      </input>
    </div>
    <div class="gf-form" ng-if="ctrl.current.jsonData.trends">
      <span class="gf-form-label width-7">
        Range
        <info-popover mode="right-normal">
          Time range width after which trends will be used instead of history.
          It's better to set this value in range of 4 to 7 days to prevent loading large amount of history data.
        </info-popover>
      </span>
      <input class="gf-form-input max-width-5" type="text" ng-model='ctrl.current.jsonData.trendsRange' placeholder="4d">
      </input>
    </div>
  </div>

  <div class="gf-form">
    <span class="gf-form-label width-12">
      Cache TTL
      <info-popover mode="right-normal">
        Zabbix data source caches metric names in memory. Specify how often data will be updated.
      </info-popover>
    </span>
    <input class="gf-form-input max-width-5"
      type="text"
      ng-model='ctrl.current.jsonData.cacheTTL'
      placeholder="1h">
    </input>
  </div>
</div>

<div class="gf-form-group">
  <h3 class="page-heading">Direct DB Connection</h3>
  <gf-form-switch class="gf-form" label-class="width-12"
    label="Enable"
    checked="ctrl.current.jsonData.dbConnectionEnable">
  </gf-form-switch>
  <div ng-if="ctrl.current.jsonData.dbConnectionEnable">
    <div class="gf-form max-width-20">
    <span class="gf-form-label width-12">
      SQL Data Source
      <info-popover mode="right-normal">
        Select SQL Data Source for Zabbix database.
        In order to use this feature you should <a href="/datasources/new" target="_blank">create</a> and
        configure it first. Zabbix plugin uses this data source for querying history data directly from database.
        This way usually faster than pulling data from Zabbix API, especially on the wide time ranges, and reduces
        amount of data transfered.
      </info-popover>
    </span>
    <div class="gf-form-select-wrapper max-width-16">
      <select class="gf-form-input" ng-model="ctrl.current.jsonData.dbConnectionDatasourceId"
        ng-options="ds.id as ds.name for ds in ctrl.sqlDataSources">
      </select>
    </div>
  </div>
  </div>
</div>

<div class="gf-form-group">
  <h3 class="page-heading">Alerting</h3>
  <gf-form-switch class="gf-form" label-class="width-12"
    label="Enable alerting"
    checked="ctrl.current.jsonData.alerting">
  </gf-form-switch>
  <div ng-if="ctrl.current.jsonData.alerting">
    <gf-form-switch class="gf-form" label-class="width-12"
      label="Add thresholds"
      checked="ctrl.current.jsonData.addThresholds">
    </gf-form-switch>
    <div class="gf-form max-width-20">
      <span class="gf-form-label width-12">Min severity</span>
      <div class="gf-form-select-wrapper max-width-16">
        <select class="gf-form-input" ng-model="ctrl.current.jsonData.alertingMinSeverity"
          ng-options="s.val as s.text for s in [
            {val: 0, text: 'Not classified'}, {val: 1, text:'Information'},
            {val: 2, text: 'Warning'}, {val: 3, text: 'Average'},
            {val: 4, text: 'High'}, {val: 5, text: 'Disaster'}]">
        </select>
      </div>
    </div>
  </div>
</div>

<div class="gf-form-group">
  <h3 class="page-heading">Other</h3>
  <gf-form-switch class="gf-form" label-class="width-20"
    label="Disable acknowledges for read-only users"
    checked="ctrl.current.jsonData.disableReadOnlyUsersAck">
  </gf-form-switch>
</div>