<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-7"
      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-30">
      <span class="gf-form-label width-12">
        Data Source
        <info-popover mode="right-normal">
          Select Data Source for Zabbix history database.
          In order to use this feature it should be <a href="/datasources/new" target="_blank">created</a> and
          configured first. Zabbix plugin uses this data source for querying history data directly from the database.
          This way usually faster than pulling data from Zabbix API, especially on the wide time ranges, and reduces
          amount of data transferred.
        </info-popover>
      </span>
      <div class="gf-form-select-wrapper max-width-16">
        <select class="gf-form-input"
          ng-model="ctrl.dbConnectionDatasourceId"
          ng-options="ds.id as ds.name for ds in ctrl.dbDataSources"
          ng-change="ctrl.onDBConnectionDatasourceChange()">
        </select>
      </div>
    </div>
  </div>
  <div ng-if="ctrl.getCurrentDatasourceType() === 'influxdb'">
    <div class="gf-form max-width-30">
      <span class="gf-form-label width-12">
        Retention Policy
        <info-popover mode="right-normal">
          Specify retention policy name for fetching long-term stored data (optional).
          Leave it blank if only default retention policy used.
        </info-popover>
      </span>
      <input class="gf-form-input max-width-16"
        type="text"
        ng-model='ctrl.current.jsonData.dbConnectionRetentionPolicy'
        placeholder="Retention policy name">
      </input>
    </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>
