From 9e6a7f60b97a8e7c83c2ef3f9d0a79ad484606e2 Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sat, 22 Jul 2017 22:11:58 +0300
Subject: [PATCH] DS config: add help for Direct DB Connection

---
 dist/datasource-zabbix/partials/config.html | 19 ++++++++++++++-----
 src/datasource-zabbix/partials/config.html  | 19 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/dist/datasource-zabbix/partials/config.html b/dist/datasource-zabbix/partials/config.html
index aaa1368..7f626c2 100644
--- a/dist/datasource-zabbix/partials/config.html
+++ b/dist/datasource-zabbix/partials/config.html
@@ -77,13 +77,22 @@
 
 <div class="gf-form-group">
   <h3 class="page-heading">Direct DB Connection</h3>
-  <gf-form-switch class="gf-form" label-class="width-9"
+  <gf-form-switch class="gf-form" label-class="width-12"
     label="Enable"
     checked="ctrl.current.jsonData.dbConnection.enable">
   </gf-form-switch>
   <div ng-if="ctrl.current.jsonData.dbConnection.enable">
     <div class="gf-form max-width-20">
-    <span class="gf-form-label width-9">SQL Data Source</span>
+    <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.dbConnection.datasourceId"
         ng-options="ds.id as ds.name for ds in ctrl.sqlDataSources">
@@ -95,17 +104,17 @@
 
 <div class="gf-form-group">
   <h3 class="page-heading">Alerting</h3>
-  <gf-form-switch class="gf-form" label-class="width-9"
+  <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-9"
+    <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-9">Min severity</span>
+      <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 [
diff --git a/src/datasource-zabbix/partials/config.html b/src/datasource-zabbix/partials/config.html
index aaa1368..7f626c2 100644
--- a/src/datasource-zabbix/partials/config.html
+++ b/src/datasource-zabbix/partials/config.html
@@ -77,13 +77,22 @@
 
 <div class="gf-form-group">
   <h3 class="page-heading">Direct DB Connection</h3>
-  <gf-form-switch class="gf-form" label-class="width-9"
+  <gf-form-switch class="gf-form" label-class="width-12"
     label="Enable"
     checked="ctrl.current.jsonData.dbConnection.enable">
   </gf-form-switch>
   <div ng-if="ctrl.current.jsonData.dbConnection.enable">
     <div class="gf-form max-width-20">
-    <span class="gf-form-label width-9">SQL Data Source</span>
+    <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.dbConnection.datasourceId"
         ng-options="ds.id as ds.name for ds in ctrl.sqlDataSources">
@@ -95,17 +104,17 @@
 
 <div class="gf-form-group">
   <h3 class="page-heading">Alerting</h3>
-  <gf-form-switch class="gf-form" label-class="width-9"
+  <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-9"
+    <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-9">Min severity</span>
+      <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 [