Merge remote-tracking branch 'upstream/master' into postgres-query-builder

docs/sources/http_api/annotations.md

@@ -180,14 +180,14 @@ Content-Type: application/json
 
 ## Delete Annotation By Id
 
-`DELETE /api/annotation/:id`
+`DELETE /api/annotations/:id`
 
 Deletes the annotation that matches the specified id.
 
 **Example Request**:
 
 ```http
-DELETE /api/annotation/1 HTTP/1.1
+DELETE /api/annotations/1 HTTP/1.1
 Accept: application/json
 Content-Type: application/json
 Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk
@@ -204,14 +204,14 @@ Content-Type: application/json
 
 ## Delete Annotation By RegionId
 
-`DELETE /api/annotation/region/:id`
+`DELETE /api/annotations/region/:id`
 
 Deletes the annotation that matches the specified region id. A region is an annotation that covers a timerange and has a start and end time. In the Grafana database, this is a stored as two annotations connected by a region id.
 
 **Example Request**:
 
 ```http
-DELETE /api/annotation/region/1 HTTP/1.1
+DELETE /api/annotations/region/1 HTTP/1.1
 Accept: application/json
 Content-Type: application/json
 Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk

docs/sources/installation/debian.md

@@ -34,7 +34,7 @@ sudo dpkg -i grafana_5.0.4_amd64.deb
 Add the following line to your `/etc/apt/sources.list` file.
 
 ```bash
-deb https://packagecloud.io/grafana/stable/debian/ jessie main
+deb https://packagecloud.io/grafana/stable/debian/ stretch main
 ```
 
 Use the above line even if you are on Ubuntu or another Debian version.
@@ -42,7 +42,7 @@ There is also a testing repository if you want beta or release
 candidates.
 
 ```bash
-deb https://packagecloud.io/grafana/testing/debian/ jessie main
+deb https://packagecloud.io/grafana/testing/debian/ stretch main
 ```
 
 Then add the [Package Cloud](https://packagecloud.io/grafana) key. This

public/app/core/directives/dash_class.js

@@ -1,36 +0,0 @@
-define([
-  'lodash',
-  'jquery',
-  '../core_module',
-],
-function (_, $, coreModule) {
-  'use strict';
-
-  coreModule.default.directive('dashClass', function() {
-    return {
-      link: function($scope, elem) {
-
-        $scope.onAppEvent('panel-fullscreen-enter', function() {
-          elem.toggleClass('panel-in-fullscreen', true);
-        });
-
-        $scope.onAppEvent('panel-fullscreen-exit', function() {
-          elem.toggleClass('panel-in-fullscreen', false);
-        });
-
-        $scope.$watch('ctrl.dashboardViewState.state.editview', function(newValue) {
-          if (newValue) {
-            elem.toggleClass('dashboard-page--settings-opening', _.isString(newValue));
-            setTimeout(function() {
-              elem.toggleClass('dashboard-page--settings-open', _.isString(newValue));
-            }, 10);
-          } else {
-            elem.removeClass('dashboard-page--settings-opening');
-            elem.removeClass('dashboard-page--settings-open');
-          }
-        });
-      }
-    };
-  });
-
-});

public/app/core/directives/dash_class.ts

@@ -0,0 +1,31 @@
+import _ from 'lodash';
+import coreModule from '../core_module';
+
+/** @ngInject */
+export function dashClass() {
+  return {
+    link: function($scope, elem) {
+      $scope.onAppEvent('panel-fullscreen-enter', function() {
+        elem.toggleClass('panel-in-fullscreen', true);
+      });
+
+      $scope.onAppEvent('panel-fullscreen-exit', function() {
+        elem.toggleClass('panel-in-fullscreen', false);
+      });
+
+      $scope.$watch('ctrl.dashboardViewState.state.editview', function(newValue) {
+        if (newValue) {
+          elem.toggleClass('dashboard-page--settings-opening', _.isString(newValue));
+          setTimeout(function() {
+            elem.toggleClass('dashboard-page--settings-open', _.isString(newValue));
+          }, 10);
+        } else {
+          elem.removeClass('dashboard-page--settings-opening');
+          elem.removeClass('dashboard-page--settings-open');
+        }
+      });
+    },
+  };
+}
+
+coreModule.directive('dashClass', dashClass);

public/app/core/directives/metric_segment.js

@@ -1,246 +0,0 @@
-define([
-  'lodash',
-  'jquery',
-  '../core_module',
-],
-function (_, $, coreModule) {
-  'use strict';
-
-  coreModule.default.directive('metricSegment', function($compile, $sce) {
-    var inputTemplate = '<input type="text" data-provide="typeahead" ' +
-      ' class="gf-form-input input-medium"' +
-      ' spellcheck="false" style="display:none"></input>';
-
-    var linkTemplate = '<a class="gf-form-label" ng-class="segment.cssClass" ' +
-      'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
-
-    var selectTemplate = '<a class="gf-form-input gf-form-input--dropdown" ng-class="segment.cssClass" ' +
-      'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
-
-    return {
-      scope: {
-        segment: "=",
-        getOptions: "&",
-        onChange: "&",
-        debounce: "@",
-      },
-      link: function($scope, elem) {
-        var $input = $(inputTemplate);
-        var segment = $scope.segment;
-        var $button = $(segment.selectMode ? selectTemplate : linkTemplate);
-        var options = null;
-        var cancelBlur = null;
-        var linkMode = true;
-        var debounceLookup = $scope.debounce;
-
-        $input.appendTo(elem);
-        $button.appendTo(elem);
-
-        $scope.updateVariableValue = function(value) {
-          if (value === '' || segment.value === value) {
-            return;
-          }
-
-          value = _.unescape(value);
-
-          $scope.$apply(function() {
-            var selected = _.find($scope.altSegments, {value: value});
-            if (selected) {
-              segment.value = selected.value;
-              segment.html = selected.html || selected.value;
-              segment.fake = false;
-              segment.expandable = selected.expandable;
-
-              if (selected.type) {
-                segment.type = selected.type;
-              }
-            }
-            else if (segment.custom !== 'false') {
-              segment.value = value;
-              segment.html = $sce.trustAsHtml(value);
-              segment.expandable = true;
-              segment.fake = false;
-            }
-
-            $scope.onChange();
-          });
-        };
-
-        $scope.switchToLink = function(fromClick) {
-          if (linkMode && !fromClick) { return; }
-
-          clearTimeout(cancelBlur);
-          cancelBlur = null;
-          linkMode = true;
-          $input.hide();
-          $button.show();
-          $scope.updateVariableValue($input.val());
-        };
-
-        $scope.inputBlur = function() {
-          // happens long before the click event on the typeahead options
-          // need to have long delay because the blur
-          cancelBlur = setTimeout($scope.switchToLink, 200);
-        };
-
-        $scope.source = function(query, callback) {
-          $scope.$apply(function() {
-            $scope.getOptions({ $query: query }).then(function(altSegments) {
-              $scope.altSegments = altSegments;
-              options = _.map($scope.altSegments, function(alt) {
-                return _.escape(alt.value);
-              });
-
-              // add custom values
-              if (segment.custom !== 'false') {
-                if (!segment.fake && _.indexOf(options, segment.value) === -1) {
-                  options.unshift(segment.value);
-                }
-              }
-
-              callback(options);
-            });
-          });
-        };
-
-        $scope.updater = function(value) {
-          if (value === segment.value) {
-            clearTimeout(cancelBlur);
-            $input.focus();
-            return value;
-          }
-
-          $input.val(value);
-          $scope.switchToLink(true);
-
-          return value;
-        };
-
-        $scope.matcher = function(item) {
-          var str = this.query;
-          if (str[0] === '/') { str = str.substring(1); }
-          if (str[str.length - 1] === '/') { str = str.substring(0, str.length-1); }
-          try {
-            return item.toLowerCase().match(str.toLowerCase());
-          } catch(e) {
-            return false;
-          }
-        };
-
-        $input.attr('data-provide', 'typeahead');
-        $input.typeahead({ source: $scope.source, minLength: 0, items: 10000, updater: $scope.updater, matcher: $scope.matcher });
-
-        var typeahead = $input.data('typeahead');
-        typeahead.lookup = function () {
-          this.query = this.$element.val() || '';
-          var items = this.source(this.query, $.proxy(this.process, this));
-          return items ? this.process(items) : items;
-        };
-
-        if (debounceLookup) {
-          typeahead.lookup = _.debounce(typeahead.lookup, 500, {leading: true});
-        }
-
-        $button.keydown(function(evt) {
-          // trigger typeahead on down arrow or enter key
-          if (evt.keyCode === 40 || evt.keyCode === 13) {
-            $button.click();
-          }
-        });
-
-        $button.click(function() {
-          options = null;
-          $input.css('width', (Math.max($button.width(), 80) + 16) + 'px');
-
-          $button.hide();
-          $input.show();
-          $input.focus();
-
-          linkMode = false;
-
-          var typeahead = $input.data('typeahead');
-          if (typeahead) {
-            $input.val('');
-            typeahead.lookup();
-          }
-        });
-
-        $input.blur($scope.inputBlur);
-
-        $compile(elem.contents())($scope);
-      }
-    };
-  });
-
-  coreModule.default.directive('metricSegmentModel', function(uiSegmentSrv, $q) {
-    return {
-      template: '<metric-segment segment="segment" get-options="getOptionsInternal()" on-change="onSegmentChange()"></metric-segment>',
-      restrict: 'E',
-      scope: {
-        property: "=",
-        options: "=",
-        getOptions: "&",
-        onChange: "&",
-      },
-      link: {
-        pre: function postLink($scope, elem, attrs) {
-          var cachedOptions;
-
-          $scope.valueToSegment = function(value) {
-            var option = _.find($scope.options, {value: value});
-            var segment = {
-              cssClass: attrs.cssClass,
-              custom: attrs.custom,
-              value: option ? option.text : value,
-              selectMode: attrs.selectMode,
-            };
-
-            return uiSegmentSrv.newSegment(segment);
-          };
-
-          $scope.getOptionsInternal = function() {
-            if ($scope.options) {
-              cachedOptions = $scope.options;
-              return $q.when(_.map($scope.options, function(option) {
-                return {value: option.text};
-              }));
-            } else {
-              return $scope.getOptions().then(function(options) {
-                cachedOptions = options;
-                return  _.map(options, function(option) {
-                  if (option.html) {
-                    return option;
-                  }
-                  return {value: option.text};
-                });
-              });
-            }
-          };
-
-          $scope.onSegmentChange = function() {
-            if (cachedOptions) {
-              var option = _.find(cachedOptions, {text: $scope.segment.value});
-              if (option && option.value !== $scope.property) {
-                $scope.property = option.value;
-              } else if (attrs.custom !== 'false') {
-                $scope.property = $scope.segment.value;
-              }
-            } else {
-              $scope.property = $scope.segment.value;
-            }
-
-            // needs to call this after digest so
-            // property is synced with outerscope
-            $scope.$$postDigest(function() {
-              $scope.$apply(function() {
-                $scope.onChange();
-              });
-            });
-          };
-
-          $scope.segment = $scope.valueToSegment($scope.property);
-        }
-      }
-    };
-  });
-});

public/app/core/directives/metric_segment.ts

@@ -0,0 +1,263 @@
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from '../core_module';
+
+/** @ngInject */
+export function metricSegment($compile, $sce) {
+  let inputTemplate =
+    '<input type="text" data-provide="typeahead" ' +
+    ' class="gf-form-input input-medium"' +
+    ' spellcheck="false" style="display:none"></input>';
+
+  let linkTemplate =
+    '<a class="gf-form-label" ng-class="segment.cssClass" ' +
+    'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
+
+  let selectTemplate =
+    '<a class="gf-form-input gf-form-input--dropdown" ng-class="segment.cssClass" ' +
+    'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
+
+  return {
+    scope: {
+      segment: '=',
+      getOptions: '&',
+      onChange: '&',
+      debounce: '@',
+    },
+    link: function($scope, elem) {
+      let $input = $(inputTemplate);
+      let segment = $scope.segment;
+      let $button = $(segment.selectMode ? selectTemplate : linkTemplate);
+      let options = null;
+      let cancelBlur = null;
+      let linkMode = true;
+      let debounceLookup = $scope.debounce;
+
+      $input.appendTo(elem);
+      $button.appendTo(elem);
+
+      $scope.updateVariableValue = function(value) {
+        if (value === '' || segment.value === value) {
+          return;
+        }
+
+        value = _.unescape(value);
+
+        $scope.$apply(function() {
+          let selected = _.find($scope.altSegments, { value: value });
+          if (selected) {
+            segment.value = selected.value;
+            segment.html = selected.html || selected.value;
+            segment.fake = false;
+            segment.expandable = selected.expandable;
+
+            if (selected.type) {
+              segment.type = selected.type;
+            }
+          } else if (segment.custom !== 'false') {
+            segment.value = value;
+            segment.html = $sce.trustAsHtml(value);
+            segment.expandable = true;
+            segment.fake = false;
+          }
+
+          $scope.onChange();
+        });
+      };
+
+      $scope.switchToLink = function(fromClick) {
+        if (linkMode && !fromClick) {
+          return;
+        }
+
+        clearTimeout(cancelBlur);
+        cancelBlur = null;
+        linkMode = true;
+        $input.hide();
+        $button.show();
+        $scope.updateVariableValue($input.val());
+      };
+
+      $scope.inputBlur = function() {
+        // happens long before the click event on the typeahead options
+        // need to have long delay because the blur
+        cancelBlur = setTimeout($scope.switchToLink, 200);
+      };
+
+      $scope.source = function(query, callback) {
+        $scope.$apply(function() {
+          $scope.getOptions({ $query: query }).then(function(altSegments) {
+            $scope.altSegments = altSegments;
+            options = _.map($scope.altSegments, function(alt) {
+              return _.escape(alt.value);
+            });
+
+            // add custom values
+            if (segment.custom !== 'false') {
+              if (!segment.fake && _.indexOf(options, segment.value) === -1) {
+                options.unshift(segment.value);
+              }
+            }
+
+            callback(options);
+          });
+        });
+      };
+
+      $scope.updater = function(value) {
+        if (value === segment.value) {
+          clearTimeout(cancelBlur);
+          $input.focus();
+          return value;
+        }
+
+        $input.val(value);
+        $scope.switchToLink(true);
+
+        return value;
+      };
+
+      $scope.matcher = function(item) {
+        let str = this.query;
+        if (str[0] === '/') {
+          str = str.substring(1);
+        }
+        if (str[str.length - 1] === '/') {
+          str = str.substring(0, str.length - 1);
+        }
+        try {
+          return item.toLowerCase().match(str.toLowerCase());
+        } catch (e) {
+          return false;
+        }
+      };
+
+      $input.attr('data-provide', 'typeahead');
+      $input.typeahead({
+        source: $scope.source,
+        minLength: 0,
+        items: 10000,
+        updater: $scope.updater,
+        matcher: $scope.matcher,
+      });
+
+      let typeahead = $input.data('typeahead');
+      typeahead.lookup = function() {
+        this.query = this.$element.val() || '';
+        let items = this.source(this.query, $.proxy(this.process, this));
+        return items ? this.process(items) : items;
+      };
+
+      if (debounceLookup) {
+        typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true });
+      }
+
+      $button.keydown(function(evt) {
+        // trigger typeahead on down arrow or enter key
+        if (evt.keyCode === 40 || evt.keyCode === 13) {
+          $button.click();
+        }
+      });
+
+      $button.click(function() {
+        options = null;
+        $input.css('width', Math.max($button.width(), 80) + 16 + 'px');
+
+        $button.hide();
+        $input.show();
+        $input.focus();
+
+        linkMode = false;
+
+        let typeahead = $input.data('typeahead');
+        if (typeahead) {
+          $input.val('');
+          typeahead.lookup();
+        }
+      });
+
+      $input.blur($scope.inputBlur);
+
+      $compile(elem.contents())($scope);
+    },
+  };
+}
+
+/** @ngInject */
+export function metricSegmentModel(uiSegmentSrv, $q) {
+  return {
+    template:
+      '<metric-segment segment="segment" get-options="getOptionsInternal()" on-change="onSegmentChange()"></metric-segment>',
+    restrict: 'E',
+    scope: {
+      property: '=',
+      options: '=',
+      getOptions: '&',
+      onChange: '&',
+    },
+    link: {
+      pre: function postLink($scope, elem, attrs) {
+        let cachedOptions;
+
+        $scope.valueToSegment = function(value) {
+          let option = _.find($scope.options, { value: value });
+          let segment = {
+            cssClass: attrs.cssClass,
+            custom: attrs.custom,
+            value: option ? option.text : value,
+            selectMode: attrs.selectMode,
+          };
+
+          return uiSegmentSrv.newSegment(segment);
+        };
+
+        $scope.getOptionsInternal = function() {
+          if ($scope.options) {
+            cachedOptions = $scope.options;
+            return $q.when(
+              _.map($scope.options, function(option) {
+                return { value: option.text };
+              })
+            );
+          } else {
+            return $scope.getOptions().then(function(options) {
+              cachedOptions = options;
+              return _.map(options, function(option) {
+                if (option.html) {
+                  return option;
+                }
+                return { value: option.text };
+              });
+            });
+          }
+        };
+
+        $scope.onSegmentChange = function() {
+          if (cachedOptions) {
+            let option = _.find(cachedOptions, { text: $scope.segment.value });
+            if (option && option.value !== $scope.property) {
+              $scope.property = option.value;
+            } else if (attrs.custom !== 'false') {
+              $scope.property = $scope.segment.value;
+            }
+          } else {
+            $scope.property = $scope.segment.value;
+          }
+
+          // needs to call this after digest so
+          // property is synced with outerscope
+          $scope.$$postDigest(function() {
+            $scope.$apply(function() {
+              $scope.onChange();
+            });
+          });
+        };
+
+        $scope.segment = $scope.valueToSegment($scope.property);
+      },
+    },
+  };
+}
+
+coreModule.directive('metricSegment', metricSegment);
+coreModule.directive('metricSegmentModel', metricSegmentModel);

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/plugins/datasource/prometheus/partials/query.editor.html

@@ -14,7 +14,7 @@
         data-min-length=0 data-items=1000 ng-model-onblur ng-change="ctrl.refreshMetricData()">
       </input>
       <info-popover mode="right-absolute">
-        Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for
+        Controls the name of the time series, using name or pattern. For example <span ng-non-bindable>{{hostname}}</span> will be replaced with label value for
         the label hostname.
       </info-popover>
     </div>

public/sass/base/_icons.scss

@@ -1,10 +1,8 @@
 .gicon {
   line-height: 1;
   display: inline-block;
-  //width: 1.1057142857em;
-  //height: 1.1057142857em;
-  height: 22px;
-  width: 22px;
+  width: 1.1057142857em;
+  height: 1.1057142857em;
   text-align: center;
   background-repeat: no-repeat;
   background-position: center;

public/sass/components/_sidemenu.scss

@@ -123,6 +123,8 @@
     position: relative;
     opacity: 0.7;
     font-size: 130%;
+    height: 22px;
+    width: 22px;
   }
 
   .fa {

public/sass/pages/_dashboard.scss

@@ -33,7 +33,7 @@ div.flot-text {
   border: $panel-border;
   position: relative;
   border-radius: 3px;
-  //height: 100%;
+  height: 100%;
 
   &.panel-transparent {
     background-color: transparent;