Merge branch 'develop'

zabbix/datasource.js

@@ -1,12 +1,13 @@
 define([
   'angular',
   'lodash',
-  'kbn',
+  'app/core/utils/datemath',
+  './directives',
   './zabbixAPIWrapper',
   './helperFunctions',
   './queryCtrl'
 ],
-function (angular, _, kbn) {
+function (angular, _, dateMath) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -93,9 +94,9 @@ function (angular, _, kbn) {
     ZabbixAPIDatasource.prototype.query = function(options) {
 
       // get from & to in seconds
-      var from = Math.ceil(kbn.parseDate(options.range.from).getTime() / 1000);
-      var to = Math.ceil(kbn.parseDate(options.range.to).getTime() / 1000);
-      var useTrendsFrom = Math.ceil(kbn.parseDate('now-' + this.trendsFrom).getTime() / 1000);
+      var from = Math.ceil(dateMath.parse(options.range.from) / 1000);
+      var to = Math.ceil(dateMath.parse(options.range.to) / 1000);
+      var useTrendsFrom = Math.ceil(dateMath.parse('now-' + this.trendsFrom) / 1000);
 
       // Create request for each target
       var promises = _.map(options.targets, function(target) {
@@ -336,8 +337,8 @@ function (angular, _, kbn) {
     /////////////////
 
     ZabbixAPIDatasource.prototype.annotationQuery = function(annotation, rangeUnparsed) {
-      var from = Math.ceil(kbn.parseDate(rangeUnparsed.from).getTime() / 1000);
-      var to = Math.ceil(kbn.parseDate(rangeUnparsed.to).getTime() / 1000);
+      var from = Math.ceil(dateMath.parse(rangeUnparsed.from) / 1000);
+      var to = Math.ceil(dateMath.parse(rangeUnparsed.to) / 1000);
       var self = this;
 
       var params = {

zabbix/directives.js

@@ -0,0 +1,17 @@
+define([
+    'angular'
+  ],
+  function (angular) {
+    'use strict';
+
+    var module = angular.module('grafana.directives');
+
+    module.directive('metricQueryEditorZabbix', function() {
+      return {controller: 'ZabbixAPIQueryCtrl', templateUrl: 'app/plugins/datasource/zabbix/partials/query.editor.html'};
+    });
+
+    module.directive('metricQueryOptionsZabbix', function() {
+      return {templateUrl: 'app/plugins/datasource/zabbix/partials/query.options.html'};
+    });
+
+  });

zabbix/partials/query.editor.html

@@ -1,318 +1,227 @@
-<div class="editor-row">
+<div class="tight-form">
+  <ul class="tight-form-list pull-right">
+    <li class="tight-form-item small" ng-show="target.datasource">
+      <em>{{target.datasource}}</em>
+    </li>
+    <li class="tight-form-item">
+      <div class="dropdown">
+        <a class="pointer dropdown-toggle"
+           data-toggle="dropdown"
+           tabindex="1">
+          <i class="fa fa-bars"></i>
+        </a>
+        <ul class="dropdown-menu pull-right" role="menu">
+          <!-- Switch editor mode -->
+          <li role="menuitem" ng-show="target.mode">
+            <a class="pointer" tabindex="1"
+               ng-click="switchEditorMode(0)">Numeric metrics</a>
+          </li>
+          <li role="menuitem" ng-show="target.mode != 1">
+            <a class="pointer" tabindex="1"
+               ng-click="switchEditorMode(1)">IT services</a>
+          </li>
+          <li role="menuitem" ng-show="target.mode != 2">
+            <a class="pointer" tabindex="1"
+               ng-click="switchEditorMode(2)">Text metrics</a>
+          </li>
+          <li class="divider" role="menuitem"></li>
+          <li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
+          <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up</a></li>
+          <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
+        </ul>
+      </div>
+    </li>
+    <li class="tight-form-item last">
+      <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+        <i class="fa fa-remove"></i>
+      </a>
+    </li>
+  </ul>
 
-  <div ng-repeat="target in panel.targets"
-       class="tight-form-container"
-       ng-class="{'tight-form-disabled': target.hide}"
-       ng-controller="ZabbixAPIQueryCtrl"
-       ng-init="init()">
+  <ul class="tight-form-list">
+    <li class="tight-form-item" style="min-width: 15px; text-align: center">
+      {{target.refId}}
+    </li>
+    <li>
+      <a class="tight-form-item"
+         ng-click="target.hide = !target.hide; get_data();"
+         role="menuitem">
+        <i class="fa fa-eye"></i>
+      </a>
+    </li>
+  </ul>
 
-    <div class="tight-form">
-      <ul class="tight-form-list pull-right">
-        <li class="tight-form-item">
-          <div class="dropdown">
-            <a class="pointer dropdown-toggle"
-               data-toggle="dropdown"
-               tabindex="1">
-              <i class="fa fa-bars"></i>
-            </a>
-            <ul class="dropdown-menu pull-right" role="menu">
-              <!-- Switch editor mode -->
-              <li role="menuitem" ng-show="target.mode">
-                <a class="pointer" tabindex="1"
-                   ng-click="switchEditorMode(0)">Numeric metrics</a>
-              </li>
-              <li role="menuitem" ng-show="target.mode != 1">
-                <a class="pointer" tabindex="1"
-                   ng-click="switchEditorMode(1)">IT services</a>
-              </li>
-              <li role="menuitem" ng-show="target.mode != 2">
-                <a class="pointer" tabindex="1"
-                   ng-click="switchEditorMode(2)">Text metrics</a>
-              </li>
-              <li class="divider" role="menuitem"></li>
-              <li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
-              <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up</a></li>
-              <li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
-            </ul>
-          </div>
-        </li>
-        <li class="tight-form-item last">
-          <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-            <i class="fa fa-remove"></i>
-          </a>
-        </li>
-      </ul>
+  <!-- IT Service editor -->
+  <ul class="tight-form-list" role="menu" ng-show="target.mode == 1">
+    <li class="tight-form-item input-small">IT Service</li>
+    <li>
+      <select class="tight-form-input input-large"
+              ng-change="selectITService()"
+              ng-model="target.itservice"
+              bs-tooltip="target.itservice.name.length > 25 ? target.itservice.name : ''"
+              ng-options="itservice.name for itservice in itserviceList track by itservice.name">
+        <option value="">-- Select IT service --</option>
+      </select>
+    </li>
+    <li class="tight-form-item input-medium">IT service property</li>
+    <li>
+      <select class="tight-form-input input-medium"
+              ng-change="selectITService()"
+              ng-model="target.slaProperty"
+              ng-options="slaProperty.name for slaProperty in slaPropertyList track by slaProperty.name">
+        <option value="">-- Property --</option>
+      </select>
+    </li>
+  </ul>
 
-      <ul class="tight-form-list">
-        <li class="tight-form-item" style="min-width: 15px; text-align: center">
-          {{targetLetters[$index]}}
-        </li>
-        <li>
-          <a class="tight-form-item"
-             ng-click="target.hide = !target.hide; get_data();"
-             role="menuitem">
-            <i class="fa fa-eye"></i>
-          </a>
-        </li>
-      </ul>
+  <ul class="tight-form-list" role="menu" ng-hide="target.mode == 1">
+    <!-- Alias -->
+    <li>
+      <input type="text"
+             class="tight-form-input input-medium"
+             ng-model="target.alias"
+             spellcheck='false'
+             placeholder="Alias"
+             ng-blur="targetBlur()">
+    </li>
+    <!-- Select Host Group -->
+    <li class="tight-form-item input-small" style="width: 5em">Group</li>
+    <li>
+      <select class="tight-form-input input-large"
+              ng-change="selectHostGroup()"
+              ng-model="target.group"
+              bs-tooltip="target.group.name.length > 25 ? target.group.name : ''"
+              ng-options="group.visible_name ? group.visible_name : group.name for group in metric.groupList track by group.name">
+        <option value="">-- Select host group --</option>
+      </select>
+      <a bs-tooltip="target.errors.metric"
+         style="color: rgb(229, 189, 28)"
+         ng-show="target.errors.metric">
+        <i class="fa fa-warning"></i>
+      </a>
+    </li>
+    <!-- Select Host -->
+    <li class="tight-form-item input-small" style="width: 3em">Host</li>
+    <li>
+      <select class="tight-form-input input-large"
+              ng-change="selectHost()"
+              ng-model="target.host"
+              bs-tooltip="target.host.name.length > 25 ? target.host.name : ''"
+              ng-options="host.visible_name ? host.visible_name : host.name for host in metric.hostList track by host.name">
+        <option value="">-- Select host --</option>
+      </select>
+      <a bs-tooltip="target.errors.metric"
+         style="color: rgb(229, 189, 28)"
+         ng-show="target.errors.metric">
+        <i class="icon-warning-sign"></i>
+      </a>
+    </li>
+    <!-- Host filter -->
+    <li class="tight-form-item" ng-hide="target.mode == 2">
+      Filter
+      <i class="fa fa-question-circle"
+         bs-tooltip="'Filtering hosts by regex. Select All in items and specify regex for host names.'"></i>
+    </li>
+    <li ng-hide="target.mode == 2">
+      <input type="text"
+             class="tight-form-input input-large"
+             ng-model="target.hostFilter"
+             spellcheck='false'
+             placeholder="Host filter (regex)"
+             ng-blur="targetBlur()">
+    </li>
+    <!-- Downsampling function -->
+    <li class="tight-form-item input-medium" ng-hide="target.mode == 2">
+      Downsampling
+    </li>
+    <li ng-hide="target.mode == 2">
+      <select class="tight-form-input input-small"
+              ng-change="targetBlur()"
+              ng-model="target.downsampleFunction"
+              bs-tooltip="'Downsampling function'"
+              ng-options="func.name for func in downsampleFunctionList track by func.name">
+      </select>
+      <a bs-tooltip="target.errors.metric"
+         style="color: rgb(229, 189, 28)"
+         ng-show="target.errors.metric">
+        <i class="icon-warning-sign"></i>
+      </a>
+    </li>
+  </ul>
 
-      <!-- IT Service editor -->
-      <ul class="tight-form-list" role="menu" ng-show="target.mode == 1">
-        <li class="tight-form-item input-small">IT Service</li>
-        <li>
-          <select class="tight-form-input input-large"
-                  ng-change="selectITService()"
-                  ng-model="target.itservice"
-                  bs-tooltip="target.itservice.name.length > 25 ? target.itservice.name : ''"
-                  ng-options="itservice.name for itservice in itserviceList track by itservice.name">
-            <option value="">-- Select IT service --</option>
-          </select>
-        </li>
-        <li class="tight-form-item input-medium">IT service property</li>
-        <li>
-          <select class="tight-form-input input-medium"
-                  ng-change="selectITService()"
-                  ng-model="target.slaProperty"
-                  ng-options="slaProperty.name for slaProperty in slaPropertyList track by slaProperty.name">
-            <option value="">-- Property --</option>
-          </select>
-        </li>
-      </ul>
-
-      <ul class="tight-form-list" role="menu" ng-hide="target.mode == 1">
-        <!-- Alias -->
-        <li>
-          <input type="text"
-                 class="tight-form-input input-medium"
-                 ng-model="target.alias"
-                 spellcheck='false'
-                 placeholder="Alias"
-                 ng-blur="targetBlur()">
-        </li>
-        <!-- Select Host Group -->
-        <li class="tight-form-item input-small" style="width: 5em">Group</li>
-        <li>
-          <select class="tight-form-input input-large"
-                  ng-change="selectHostGroup()"
-                  ng-model="target.group"
-                  bs-tooltip="target.group.name.length > 25 ? target.group.name : ''"
-                  ng-options="group.visible_name ? group.visible_name : group.name for group in metric.groupList track by group.name">
-            <option value="">-- Select host group --</option>
-          </select>
-          <a bs-tooltip="target.errors.metric"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.metric">
-            <i class="fa fa-warning"></i>
-          </a>
-        </li>
-        <!-- Select Host -->
-        <li class="tight-form-item input-small" style="width: 3em">Host</li>
-        <li>
-          <select class="tight-form-input input-large"
-                  ng-change="selectHost()"
-                  ng-model="target.host"
-                  bs-tooltip="target.host.name.length > 25 ? target.host.name : ''"
-                  ng-options="host.visible_name ? host.visible_name : host.name for host in metric.hostList track by host.name">
-            <option value="">-- Select host --</option>
-          </select>
-          <a bs-tooltip="target.errors.metric"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.metric">
-            <i class="icon-warning-sign"></i>
-          </a>
-        </li>
-        <!-- Host filter -->
-        <li class="tight-form-item" ng-hide="target.mode == 2">
-          Filter
-          <i class="fa fa-question-circle"
-             bs-tooltip="'Filtering hosts by regex. Select All in items and specify regex for host names.'"></i>
-        </li>
-        <li ng-hide="target.mode == 2">
-          <input type="text"
-                 class="tight-form-input input-large"
-                 ng-model="target.hostFilter"
-                 spellcheck='false'
-                 placeholder="Host filter (regex)"
-                 ng-blur="targetBlur()">
-        </li>
-        <!-- Downsampling function -->
-        <li class="tight-form-item input-medium" ng-hide="target.mode == 2">
-          Downsampling
-        </li>
-        <li ng-hide="target.mode == 2">
-          <select class="tight-form-input input-small"
-                  ng-change="targetBlur()"
-                  ng-model="target.downsampleFunction"
-                  bs-tooltip="'Downsampling function'"
-                  ng-options="func.name for func in downsampleFunctionList track by func.name">
-          </select>
-          <a bs-tooltip="target.errors.metric"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.metric">
-            <i class="icon-warning-sign"></i>
-          </a>
-        </li>
-      </ul>
-
-      <div class="clearfix"></div>
-    </div>
-
-    <div class="tight-form" ng-hide="target.mode == 1">
-      <ul class="tight-form-list" role="menu">
-        <li class="tight-form-item" style="min-width: 15px; text-align: center">&nbsp</li>
-        <li class="tight-form-item">
-          <i class="fa fa-eye invisible"></i>
-        </li>
-        <li class="tight-form-item" style="width: 135px">&nbsp</li>
-
-        <!-- Select Application -->
-        <li class="tight-form-item input-small" style="width: 5em">Application</li>
-        <li>
-          <select class="tight-form-input input-large"
-                  ng-change="selectApplication()"
-                  ng-model="target.application"
-                  bs-tooltip="target.application.name.length > 15 ? target.application.name : ''"
-                  ng-options="app.visible_name ? app.visible_name : app.name for app in metric.applicationList track by app.name">
-            <option value="">-- Select application --</option>
-          </select>
-          <a bs-tooltip="target.errors.metric"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.metric">
-            <i class="icon-warning-sign"></i>
-          </a>
-        </li>
-        <!-- Select Item -->
-        <li class="tight-form-item input-small" style="width: 3em">Item</li>
-        <li>
-          <select class="tight-form-input input-large"
-                  ng-change="selectItem()"
-                  ng-model="target.item"
-                  bs-tooltip="target.item.name.length > 25 ? target.item.name : ''"
-                  ng-options="item.name for item in metric.itemList track by item.name">
-            <option value="">-- Select item --</option>
-          </select>
-          <a bs-tooltip="target.errors.metric"
-             style="color: rgb(229, 189, 28)"
-             ng-show="target.errors.metric">
-            <i class="icon-warning-sign"></i>
-          </a>
-        </li>
-        <!-- Item filter -->
-        <li class="tight-form-item" ng-hide="target.mode == 2">
-          Filter
-          <i class="fa fa-question-circle"
-             bs-tooltip="'Filtering items by regex. Select All in items and specify regex for item names.'"></i>
-        </li>
-        <li ng-hide="target.mode == 2">
-          <input type="text"
-                 class="tight-form-input input-large"
-                 ng-model="target.itemFilter"
-                 spellcheck='false'
-                 placeholder="Item filter (regex)"
-                 ng-blur="targetBlur()">
-        </li>
-        <!-- Scale -->
-        <li class="tight-form-item" ng-hide="target.mode == 2">
-          Scale
-          <i class="fa fa-question-circle"
-             bs-tooltip="'Set a custom multiplier for series values, for example -1 to invert series'"></i>
-        </li>
-        <li ng-hide="target.mode == 2">
-          <input type="text"
-                 class="tight-form-input input-small"
-                 ng-model="target.scale"
-                 spellcheck='false'
-                 placeholder="1"
-                 ng-blur="targetBlur()">
-        </li>
-      </ul>
-
-      <div class="clearfix"></div>
-    </div>
-
-  </div>
+  <div class="clearfix"></div>
 </div>
 
-<section class="grafana-metric-options">
-  <div class="tight-form">
-    <ul class="tight-form-list">
-      <li class="tight-form-item tight-form-item-icon">
-        <i class="fa fa-wrench"></i>
-      </li>
-      <li class="tight-form-item">
-        Max data points
-      </li>
-      <li>
-        <input type="text"
-               class="input-mini tight-form-input"
-               ng-model="panel.maxDataPoints"
-               bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
-               data-placement="right"
-               ng-model-onblur ng-change="get_data()"
-               spellcheck='false'
-               placeholder="auto">
-      </li>
-    </ul>
-    <div class="clearfix"></div>
-  </div>
-  <div class="tight-form">
-    <ul class="tight-form-list">
-      <li class="tight-form-item tight-form-item-icon">
-        <i class="fa fa-info-circle"></i>
-      </li>
-      <li class="tight-form-item">
-        <a ng-click="toggleEditorHelp(1)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-          Max data points
-        </a>
-      </li>
-      <li class="tight-form-item">
-        <a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-          IT services
-        </a>
-      </li>
-      <li class="tight-form-item">
-        <a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-          IT service property
-        </a>
-      </li>
-    </ul>
-    <div class="clearfix"></div>
-  </div>
-</section>
+<div class="tight-form" ng-hide="target.mode == 1">
+  <ul class="tight-form-list" role="menu">
+    <li class="tight-form-item" style="min-width: 15px; text-align: center">&nbsp</li>
+    <li class="tight-form-item">
+      <i class="fa fa-eye invisible"></i>
+    </li>
+    <li class="tight-form-item" style="width: 135px">&nbsp</li>
 
-<div class="editor-row">
-  <div class="pull-left" style="margin-top: 30px;">
+    <!-- Select Application -->
+    <li class="tight-form-item input-small" style="width: 5em">Application</li>
+    <li>
+      <select class="tight-form-input input-large"
+              ng-change="selectApplication()"
+              ng-model="target.application"
+              bs-tooltip="target.application.name.length > 15 ? target.application.name : ''"
+              ng-options="app.visible_name ? app.visible_name : app.name for app in metric.applicationList track by app.name">
+        <option value="">-- Select application --</option>
+      </select>
+      <a bs-tooltip="target.errors.metric"
+         style="color: rgb(229, 189, 28)"
+         ng-show="target.errors.metric">
+        <i class="icon-warning-sign"></i>
+      </a>
+    </li>
+    <!-- Select Item -->
+    <li class="tight-form-item input-small" style="width: 3em">Item</li>
+    <li>
+      <select class="tight-form-input input-large"
+              ng-change="selectItem()"
+              ng-model="target.item"
+              bs-tooltip="target.item.name.length > 25 ? target.item.name : ''"
+              ng-options="item.name for item in metric.itemList track by item.name">
+        <option value="">-- Select item --</option>
+      </select>
+      <a bs-tooltip="target.errors.metric"
+         style="color: rgb(229, 189, 28)"
+         ng-show="target.errors.metric">
+        <i class="icon-warning-sign"></i>
+      </a>
+    </li>
+    <!-- Item filter -->
+    <li class="tight-form-item" ng-hide="target.mode == 2">
+      Filter
+      <i class="fa fa-question-circle"
+         bs-tooltip="'Filtering items by regex. Select All in items and specify regex for item names.'"></i>
+    </li>
+    <li ng-hide="target.mode == 2">
+      <input type="text"
+             class="tight-form-input input-large"
+             ng-model="target.itemFilter"
+             spellcheck='false'
+             placeholder="Item filter (regex)"
+             ng-blur="targetBlur()">
+    </li>
+    <!-- Scale -->
+    <li class="tight-form-item" ng-hide="target.mode == 2">
+      Scale
+      <i class="fa fa-question-circle"
+         bs-tooltip="'Set a custom multiplier for series values, for example -1 to invert series'"></i>
+    </li>
+    <li ng-hide="target.mode == 2">
+      <input type="text"
+             class="tight-form-input input-small"
+             ng-model="target.scale"
+             spellcheck='false'
+             placeholder="1"
+             ng-blur="targetBlur()">
+    </li>
+  </ul>
 
-    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 1">
-      <h5>Max data points</h5>
-      <ul>
-        <li>Grafana-Zabbix plugin uses maxDataPoints parameter to consolidate the real number of values down to this
-          number
-        </li>
-        <li>If there are more real values, then by default they will be consolidated using averages</li>
-        <li>This could hide real peaks and max values in your series</li>
-        <li>Point consolidation will effect series legend values (min,max,total,current)</li>
-        <li>If you override maxDataPoint and set a high value performance can be severely effected</li>
-      </ul>
-    </div>
+  <div class="clearfix"></div>
+</div>
 
-    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 2">
-      <h5>IT services</h5>
-      <p>
-        Select "IT services" in targets menu to activate IT services mode.
-      </p>
-    </div>
-
-    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
-      <h5>IT service property</h5>
-      <ul>
-        <li>Zabbix returns the following availability information about IT service</li>
-        <li>Status - current status of the IT service</li>
-        <li>SLA - SLA for the given time interval</li>
-        <li>OK time - time the service was in OK state, in seconds</li>
-        <li>Problem time - time the service was in problem state, in seconds</li>
-        <li>Down time - time the service was in scheduled downtime, in seconds</li>
-      </ul>
-    </div>
-  </div>
-</div>

zabbix/partials/query.options.html

@@ -0,0 +1,83 @@
+<section class="grafana-metric-options">
+  <div class="tight-form">
+    <ul class="tight-form-list">
+      <li class="tight-form-item tight-form-item-icon">
+        <i class="fa fa-wrench"></i>
+      </li>
+      <li class="tight-form-item">
+        Max data points
+      </li>
+      <li>
+        <input type="text"
+               class="input-mini tight-form-input"
+               ng-model="panel.maxDataPoints"
+               bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
+               data-placement="right"
+               ng-model-onblur ng-change="get_data()"
+               spellcheck='false'
+               placeholder="auto">
+      </li>
+    </ul>
+    <div class="clearfix"></div>
+  </div>
+  <div class="tight-form">
+    <ul class="tight-form-list">
+      <li class="tight-form-item tight-form-item-icon">
+        <i class="fa fa-info-circle"></i>
+      </li>
+      <li class="tight-form-item">
+        <a ng-click="toggleEditorHelp(1)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+          Max data points
+        </a>
+      </li>
+      <li class="tight-form-item">
+        <a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+          IT services
+        </a>
+      </li>
+      <li class="tight-form-item">
+        <a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
+          IT service property
+        </a>
+      </li>
+    </ul>
+    <div class="clearfix"></div>
+  </div>
+</section>
+
+<div class="editor-row">
+  <div class="pull-left" style="margin-top: 30px;">
+
+    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 1">
+      <h5>Max data points</h5>
+      <ul>
+        <li>Grafana-Zabbix plugin uses maxDataPoints parameter to consolidate the real number of values down to this
+          number
+        </li>
+        <li>If there are more real values, then by default they will be consolidated using averages</li>
+        <li>This could hide real peaks and max values in your series</li>
+        <li>Point consolidation will effect series legend values (min,max,total,current)</li>
+        <li>If you override maxDataPoint and set a high value performance can be severely effected</li>
+      </ul>
+    </div>
+
+    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 2">
+      <h5>IT services</h5>
+      <p>
+        Select "IT services" in targets menu to activate IT services mode.
+      </p>
+    </div>
+
+    <div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
+      <h5>IT service property</h5>
+      <ul>
+        <li>Zabbix returns the following availability information about IT service</li>
+        <li>Status - current status of the IT service</li>
+        <li>SLA - SLA for the given time interval</li>
+        <li>OK time - time the service was in OK state, in seconds</li>
+        <li>Problem time - time the service was in problem state, in seconds</li>
+        <li>Down time - time the service was in scheduled downtime, in seconds</li>
+      </ul>
+    </div>
+  </div>
+</div>

zabbix/plugin.json

@@ -5,22 +5,12 @@
   "type": "zabbix",
   "serviceName": "ZabbixAPIDatasource",
 
-  "module": "plugins/datasource/zabbix/datasource",
+  "module": "app/plugins/datasource/zabbix/datasource",
 
   "partials": {
-    "config": "app/plugins/datasource/zabbix/partials/config.html",
-    "query": "app/plugins/datasource/zabbix/partials/query.editor.html",
-    "annotations": "app/plugins/datasource/zabbix/partials/annotations.editor.html"
+    "config": "app/plugins/datasource/zabbix/partials/config.html"
   },
 
-  "username": "guest",
-  "password": "",
-
-  "trends": false,
-  "trendsFrom": "7d",
-
-  "limitmetrics": 100,
-
   "metrics": true,
   "annotations": true
 }

zabbix/queryCtrl.js

@@ -266,6 +266,8 @@ define([
         return errs;
       }
 
+      $scope.init();
+
     });
 
   });