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

This commit is contained in:
Torkel Ödegaard 2014-08-11 12:11:24 +02:00
parent 966ba97b2c
commit b9b04fd932
13 changed files with 62 additions and 45 deletions

View File

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

View File

@ -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;
@ -72,4 +83,4 @@ function (angular) {
};
});
});
});

View File

@ -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="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>' +
@ -115,4 +111,4 @@ function (angular, $, _, PanelBaseCtrl) {
};
});
});
});

View File

@ -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>
@ -65,4 +66,4 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
</div>
</div>

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -494,3 +494,11 @@ select.grafana-target-segment-input {
border-radius: 5px;
z-index: 9999;
}
.tooltip.in {
.opacity(100);
}
.tooltip-inner {
max-width: 400px;
}

View File

@ -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-inspector-link {
float: right;
margin-right: 10px;
.panel-error-arrow {
width: 0;
height: 0;
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;
}
@ -614,4 +626,4 @@ div.flot-text {
code, pre {
background-color: @grafanaPanelBackground;
color: @textColor;
}
}

View File

@ -19,7 +19,7 @@
@blue: #33B5E5;
@blueDark: #0099CC;
@green: #669900;
@red: #CC0000;
@red: #CC3900;
@yellow: #ECBB13;
@orange: #FF8800;
@pink: #FF4444;

View File

@ -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 () {
@ -875,4 +876,4 @@ angular.module('$strap.directives').directive('bsTypeahead', [
}
};
}
]);
]);