From 95132165f85c4309c6932aacbe49b58ba5ed13e3 Mon Sep 17 00:00:00 2001
From: Marcus Efraimsson <marcus.efraimsson@gmail.com>
Date: Mon, 9 Apr 2018 12:47:19 +0200
Subject: [PATCH] data source: rename direct/proxy access mode in data source
 settings

Changes access drop down options names:
- proxy -> Server (Default)
- direct -> Browser
Replace access drop down info icon/tooltip with expandable/collapsable
help section.
---
 .../plugins/partials/ds_http_settings.html    | 45 ++++++++++++++-----
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html
index 03df677ba13..b9f5683129c 100644
--- a/public/app/features/plugins/partials/ds_http_settings.html
+++ b/public/app/features/plugins/partials/ds_http_settings.html
@@ -1,5 +1,3 @@
-
-
 <div class="gf-form-group">
   <h3 class="page-heading">HTTP</h3>
   <div class="gf-form-group">
@@ -13,12 +11,12 @@
         <info-popover mode="right-absolute">
           <p>Specify a complete HTTP URL (for example http://your_server:8080)</p>
           <span ng-show="current.access === 'direct'">
-            Your access method is <em>Direct</em>, this means the URL
+            Your access method is <em>Browser</em>, this means the URL
             needs to be accessible from the browser.
           </span>
           <span ng-show="current.access === 'proxy'">
-            Your access method is currently <em>Proxy</em>, this means the URL
-            needs to be accessible from the grafana backend.
+            Your access method is <em>Server</em>, this means the URL
+            needs to be accessible from the grafana backend/server.
           </span>
         </info-popover>
       </div>
@@ -27,14 +25,38 @@
     <div class="gf-form-inline">
       <div class="gf-form max-width-30">
         <span class="gf-form-label width-7">Access</span>
-        <div class="gf-form-select-wrapper gf-form-select-wrapper--has-help-icon max-width-24">
-          <select class="gf-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
-          <info-popover mode="right-absolute">
-            Direct = URL is used directly from browser<br>
-            Proxy = Grafana backend will proxy the request
-          </info-popover>
+        <div class="gf-form-select-wrapper max-width-24">
+          <select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select>
         </div>
       </div>
+      <div class="gf-form">
+        <label class="gf-form-label query-keyword pointer" ng-click="ctrl.showAccessHelp = !ctrl.showAccessHelp">
+          Help&nbsp;
+          <i class="fa fa-caret-down" ng-show="ctrl.showAccessHelp"></i>
+          <i class="fa fa-caret-right" ng-hide="ctrl.showAccessHelp">&nbsp;</i>
+        </label>
+      </div>
+    </div>
+
+    <div class="alert alert-info" ng-show="ctrl.showAccessHelp">
+      <div class="alert-body">
+        <p>
+          Access mode controls how requests to the data source will be handled.
+          <strong><i>Server</i></strong> should be the preferred way if nothing else stated.
+        </p>
+        <div class="alert-title">Server access mode (Default):</div>
+        <p>
+          All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source
+          and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements.
+          The URL needs to be accessible from the grafana backend/server if you select this access mode.
+        </p>
+        <div class="alert-title">Browser access mode:</div>
+        <p>
+          All requests will be made from the browser directly to the data source and may be subject to
+          Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
+          access mode.
+        </p>
+      </div>
     </div>
   </div>
 
@@ -135,4 +157,3 @@
     </div>
   </div>
 </div>
-