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

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

src/app/controllers/inspectCtrl.js

@@ -1,7 +1,8 @@
 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;

src/app/directives/grafanaPanel.js

@@ -16,16 +16,12 @@ function (angular, $, _, PanelBaseCtrl) {
 
       var panelHeader =
       '<div class="panel-header">'+
-        '<div class="row-fluid">' +
+       '<div class="row-fluid panel-extra">' +
-          '<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>' +

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>

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

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;

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;
+}
+

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

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;

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 () {