Merge branch 'master' into readonly_dashboards

public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -103,7 +103,7 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
 
   render() {
     return (
-      <div className="panel-container">
+      <div className="panel-container add-panel-container">
         <div className="add-panel">
           <div className="add-panel__header">
             <i className="gicon gicon-add-panel" />

public/app/features/dashboard/view_state_srv.ts

@@ -196,9 +196,10 @@ export class DashboardViewState {
     this.oldTimeRange = ctrl.range;
     this.fullscreenPanel = panelScope;
 
+    // Firefox doesn't return scrollTop postion properly if 'dash-scroll' is emitted after setViewMode()
+    this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 });
     this.dashboard.setViewMode(ctrl.panel, true, ctrl.editMode);
     this.$scope.appEvent('panel-fullscreen-enter', { panelId: ctrl.panel.id });
-    this.$scope.appEvent('dash-scroll', { animate: false, pos: 0 });
   }
 
   registerPanel(panelScope) {

public/app/features/panel/panel_directive.ts

@@ -1,6 +1,7 @@
 import angular from 'angular';
+import $ from 'jquery';
 import Drop from 'tether-drop';
-import PerfectScrollbar from 'perfect-scrollbar';
+import baron from 'baron';
 
 var module = angular.module('grafana.directives');
 
@@ -86,6 +87,9 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
 
       function panelHeightUpdated() {
         panelContent.css({ height: ctrl.height + 'px' });
+      }
+
+      function resizeScrollableContent() {
         if (panelScrollbar) {
           panelScrollbar.update();
         }
@@ -100,9 +104,30 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
       // update scrollbar after mounting
       ctrl.events.on('component-did-mount', () => {
         if (ctrl.__proto__.constructor.scrollable) {
-          panelScrollbar = new PerfectScrollbar(panelContent[0], {
-            wheelPropagation: true,
+          const scrollRootClass = 'baron baron__root baron__clipper panel-content--scrollable';
+          const scrollerClass = 'baron__scroller';
+          const scrollBarHTML = `
+            <div class="baron__track">
+              <div class="baron__bar"></div>
+            </div>
+          `;
+
+          let scrollRoot = panelContent;
+          let scroller = panelContent.find(':first').find(':first');
+
+          scrollRoot.addClass(scrollRootClass);
+          $(scrollBarHTML).appendTo(scrollRoot);
+          scroller.addClass(scrollerClass);
+
+          panelScrollbar = baron({
+            root: scrollRoot[0],
+            scroller: scroller[0],
+            bar: '.baron__bar',
+            barOnCls: '_scrollbar',
+            scrollingCls: '_scrolling',
           });
+
+          panelScrollbar.scroll();
         }
       });
 
@@ -110,6 +135,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         ctrl.calculatePanelHeight();
         panelHeightUpdated();
         $timeout(() => {
+          resizeScrollableContent();
           ctrl.render();
         });
       });
@@ -199,7 +225,7 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         }
 
         if (panelScrollbar) {
-          panelScrollbar.update();
+          panelScrollbar.dispose();
         }
       });
     },

public/app/features/playlist/playlist_routes.ts

@@ -1,5 +1,6 @@
 import angular from 'angular';
 
+/** @ngInject */
 function grafanaRoutes($routeProvider) {
   $routeProvider
     .when('/playlists', {

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>
-

public/app/features/templating/query_variable.ts

@@ -198,7 +198,9 @@ export class QueryVariable implements Variable {
         }
       });
     } else if (sortType === 3) {
-      options = _.sortBy(options, opt => { return _.toLower(opt.text); });
+      options = _.sortBy(options, opt => {
+        return _.toLower(opt.text);
+      });
     }
 
     if (reverseSort) {