Dashboard: Panel error are less intrusive, panel error bar replaced with small…

Dashboard: Panel error are less intrusive, panel error bar replaced with small indicator, hover for short details, click to open inspector, Closes #681

Dashboard: Panel error are less intrusive, panel error bar replaced with small…
Dashboard: Panel error are less intrusive, panel error bar replaced with small indicator, hover for short details, click to open inspector, Closes #681
b9b04fd9 · Torkel Ödegaard · 966ba97b · b9b04fd9 · b9b04fd9 · b9b04fd9
Commit b9b04fd9 authored Aug 11, 2014 by Torkel Ödegaard
13 changed files
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,9 @@
 - [Issue #661](https://github.com/grafana/grafana/issues/661). Annotations: Elasticsearch querystring with filter template replacements was not interpolated
 - [Issue #660](https://github.com/grafana/grafana/issues/660). OpenTSDB: fix opentsdb queries that returned more than one series
+**Change**
+- [Issue #660](https://github.com/grafana/grafana/issues/660). Dashboard: The panel error bar has been replaced with a small error indicator, this indicator does not change panel height and is a lot less intrusive. Hover over it for short details, click on it for more details.
 # 1.7.0-rc1 (2014-08-05)
 **New features or improvements**

--- a/src/app/controllers/inspectCtrl.js
+++ b/src/app/controllers/inspectCtrl.js
 define([
-  'angular'
+  'angular',
+  'underscore'
 ],
-function (angular) {
+function (angular, _) {
  'use strict';
  var module = angular.module('grafana.controllers');
@@ -28,6 +29,16 @@ function (angular) {
        return;
      }
+      if (_.isString(model.error.data)) {
+        $scope.response = model.error.data;
+      }
+      if (model.error.config && model.error.config.params) {
+        $scope.request_parameters = _.map(model.error.config.params, function(value, key) {
+          return { key: key, value: value};
+        });
+      }
      if (model.error.stack) {
        $scope.editor.index = 2;
        $scope.stack_trace = model.error.stack;

--- a/src/app/directives/grafanaPanel.js
+++ b/src/app/directives/grafanaPanel.js
@@ -16,16 +16,12 @@ function (angular, $, _, PanelBaseCtrl) {
      var panelHeader =
      '<div class="panel-header">'+
-        '<div class="row-fluid">' +
-          '<div class="span12 alert-error panel-error small" ng-show="panel.error">' +
-            '<a class="close" ng-click="panel.error=false">&times;</a>' +
-            '<span><i class="icon-exclamation-sign"></i> <strong>Oops!</strong> {{panel.error}} </span>' +
-            '<span class="pointer panel-error-inspector-link" config-modal="app/partials/inspector.html">View details</span>' +
-          '</div>' +
-        '</div>\n' +
       '<div class="row-fluid panel-extra">' +
          '<div class="panel-extra-container">' +
+            '<span class="alert-error panel-error small pointer"' +
+                  'config-modal="app/partials/inspector.html" ng-show="panel.error" bs-tooltip="panel.error">' +
+              '<i class="icon-exclamation-sign"></i><span class="panel-error-arrow"></span>' +
+            '</span>' +
            '<span class="panel-loading" ng-show="panelMeta.loading == true">' +
              '<i class="icon-spinner icon-spin icon-large"></i>' +

--- a/src/app/partials/inspector.html
+++ b/src/app/partials/inspector.html
@@ -41,6 +41,7 @@
  </div>
  <div ng-if="editor.index == 1">
+		<h5 ng-if="response" ng-bind="response"></h5>
    <div ng-if="response_html">
      <div iframe-content="response_html"></div>

--- a/src/app/services/influxdb/influxdbDatasource.js
+++ b/src/app/services/influxdb/influxdbDatasource.js
@@ -132,8 +132,8 @@ function (angular, _, kbn, InfluxSeries) {
        return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations();
      });
    };
    InfluxDatasource.prototype.listColumns = function(seriesName) {
      return this._seriesQuery('select * from /' + seriesName + '/ limit 1').then(function(data) {
        if (!data) {
          return [];
@@ -184,6 +184,7 @@ function (angular, _, kbn, InfluxSeries) {
    function retry(deferred, callback, delay) {
      return callback().then(undefined, function(reason) {
        if (reason.status !== 0 || reason.status >= 300) {
+          reason.message = 'InfluxDB Error: <br/>' + reason.data;
          deferred.reject(reason);
        }
        else {
@@ -226,7 +227,7 @@ function (angular, _, kbn, InfluxSeries) {
          data:   data
        };
-        return $http(options).success(function (data) {
+        return $http(options).then(function (data) {
          deferred.resolve(data);
        });
      }, 10);

--- a/src/css/bootstrap.dark.min.css
+++ b/src/css/bootstrap.dark.min.css
--- a/src/css/bootstrap.light.min.css
+++ b/src/css/bootstrap.light.min.css
--- a/src/css/default.min.css
+++ b/src/css/default.min.css
--- a/src/css/less/bootswatch.light.less
+++ b/src/css/less/bootswatch.light.less
@@ -12,22 +12,6 @@ body {
 	//url('../img/light.png') repeat right top;
 }
-h1 {
-	font-size: 50px;
-}
-h2, h3 {
-	font-size: 26px;
-}
-h4 {
-	font-size: 14px;
-}
-h5, h6 {
-	font-size: 11px;
-}
 blockquote {
 	padding: 10px 15px;

--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -494,3 +494,11 @@ select.grafana-target-segment-input {
  border-radius: 5px;
  z-index: 9999;
 }
+.tooltip.in {
+  .opacity(100);
+}
+.tooltip-inner {
+  max-width: 400px;
+}
--- a/src/css/less/overrides.less
+++ b/src/css/less/overrides.less
@@ -112,15 +112,27 @@ code, pre {
 .panel-error {
  color: @white;
-  padding: 5px 10px 0px 10px;
+  //padding: 5px 10px 0px 10px;
+  position: absolute;
+  left: 5px;
+  padding: 0px 17px 6px 5px;
+  top: 0;
+  i {
+    position: relative;
+    top: -2px;
+  }
 }
+.panel-error-arrow {
-.panel-error-inspector-link {
+  width: 0;
-  float: right;
+  height: 0;
-  margin-right: 10px;
+  position: absolute;
+  border-left: 31px solid transparent;
+  border-right: 30px solid transparent;
+  border-bottom: 27px solid @grafanaPanelBackground;
+  left: 0;
+  bottom: 0;
 }
 div.editor-row {
  vertical-align: top;
 }

--- a/src/css/less/variables.dark.less
+++ b/src/css/less/variables.dark.less
@@ -19,7 +19,7 @@
 @blue:                  #33B5E5;
 @blueDark:              #0099CC;
 @green:                 #669900;
-@red:                   #CC0000;
+@red:                   #CC3900;
 @yellow:                #ECBB13;
 @orange:                #FF8800;
 @pink:                  #FF4444;

--- a/src/vendor/angular/angular-strap.js
+++ b/src/vendor/angular/angular-strap.js
@@ -797,7 +797,8 @@ angular.module('$strap.directives').directive('bsTooltip', [
          title: function () {
            return angular.isFunction(value) ? value.apply(null, arguments) : value;
          },
-          html: true
+          html: true,
+          container: 'body', // Grafana change
        });
        var tooltip = element.data('tooltip');
        tooltip.show = function () {