Skip to content

N
nexpie-grafana-theme
Commit b9b04fd9 by Torkel Ödegaard
Options

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
parent 966ba97b
Showing with 59 additions and 47 deletions
CHANGELOG.md
...@@ -8,6 +8,9 @@ ...@@ -8,6 +8,9 @@
- [Issue #661](https://github.com/grafana/grafana/issues/661). Annotations: Elasticsearch querystring with filter template replacements was not interpolated - [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 - [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) # 1.7.0-rc1 (2014-08-05)
**New features or improvements** **New features or improvements**
......
src/app/controllers/inspectCtrl.js
define([ define([
'angular' 'angular',
'underscore'
], ],
function (angular) { function (angular, _) {
'use strict'; 'use strict';
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');
...@@ -28,6 +29,16 @@ function (angular) { ...@@ -28,6 +29,16 @@ function (angular) {
return; 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) { if (model.error.stack) {
$scope.editor.index = 2; $scope.editor.index = 2;
$scope.stack_trace = model.error.stack; $scope.stack_trace = model.error.stack;
...@@ -72,4 +83,4 @@ function (angular) { ...@@ -72,4 +83,4 @@ function (angular) {
}; };
}); });
}); });
\ No newline at end of file
src/app/directives/grafanaPanel.js
...@@ -16,16 +16,12 @@ function (angular, $, _, PanelBaseCtrl) { ...@@ -16,16 +16,12 @@ function (angular, $, _, PanelBaseCtrl) {
var panelHeader = var panelHeader =
'<div class="panel-header">'+ '<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">' + '<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">' + '<span class="panel-loading" ng-show="panelMeta.loading == true">' +
'<i class="icon-spinner icon-spin icon-large"></i>' + '<i class="icon-spinner icon-spin icon-large"></i>' +
...@@ -115,4 +111,4 @@ function (angular, $, _, PanelBaseCtrl) { ...@@ -115,4 +111,4 @@ function (angular, $, _, PanelBaseCtrl) {
}; };
}); });
}); });
\ No newline at end of file
src/app/partials/inspector.html
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
</div> </div>
<div ng-if="editor.index == 1"> <div ng-if="editor.index == 1">
<h5 ng-if="response" ng-bind="response"></h5>
<div ng-if="response_html"> <div ng-if="response_html">
<div iframe-content="response_html"></div> <div iframe-content="response_html"></div>
...@@ -65,4 +66,4 @@ ...@@ -65,4 +66,4 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-info" ng-click="dismiss()">Close</button> <button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
</div> </div>
\ No newline at end of file
src/app/services/influxdb/influxdbDatasource.js
...@@ -132,8 +132,8 @@ function (angular, _, kbn, InfluxSeries) { ...@@ -132,8 +132,8 @@ function (angular, _, kbn, InfluxSeries) {
return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations(); return new InfluxSeries({ seriesList: results, annotation: annotation }).getAnnotations();
}); });
}; };
InfluxDatasource.prototype.listColumns = function(seriesName) { InfluxDatasource.prototype.listColumns = function(seriesName) {
return this._seriesQuery('select * from /' + seriesName + '/ limit 1').then(function(data) { return this._seriesQuery('select * from /' + seriesName + '/ limit 1').then(function(data) {
if (!data) { if (!data) {
return []; return [];
...@@ -184,6 +184,7 @@ function (angular, _, kbn, InfluxSeries) { ...@@ -184,6 +184,7 @@ function (angular, _, kbn, InfluxSeries) {
function retry(deferred, callback, delay) { function retry(deferred, callback, delay) {
return callback().then(undefined, function(reason) { return callback().then(undefined, function(reason) {
if (reason.status !== 0 || reason.status >= 300) { if (reason.status !== 0 || reason.status >= 300) {
reason.message = 'InfluxDB Error: <br/>' + reason.data;
deferred.reject(reason); deferred.reject(reason);
} }
else { else {
...@@ -226,7 +227,7 @@ function (angular, _, kbn, InfluxSeries) { ...@@ -226,7 +227,7 @@ function (angular, _, kbn, InfluxSeries) {
data: data data: data
}; };
return $http(options).success(function (data) { return $http(options).then(function (data) {
deferred.resolve(data); deferred.resolve(data);
}); });
}, 10); }, 10);
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/bootstrap.light.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/default.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/css/less/bootswatch.light.less
...@@ -12,22 +12,6 @@ body { ...@@ -12,22 +12,6 @@ body {
//url('../img/light.png') repeat right top; //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 { blockquote {
padding: 10px 15px; padding: 10px 15px;
......
src/css/less/grafana.less
...@@ -494,3 +494,11 @@ select.grafana-target-segment-input { ...@@ -494,3 +494,11 @@ select.grafana-target-segment-input {
border-radius: 5px; border-radius: 5px;
z-index: 9999; z-index: 9999;
} }
.tooltip.in {
.opacity(100);
}
.tooltip-inner {
max-width: 400px;
}
src/css/less/overrides.less
...@@ -112,15 +112,27 @@ code, pre { ...@@ -112,15 +112,27 @@ code, pre {
.panel-error { .panel-error {
color: @white; 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 { div.editor-row {
vertical-align: top; vertical-align: top;
} }
...@@ -614,4 +626,4 @@ div.flot-text { ...@@ -614,4 +626,4 @@ div.flot-text {
code, pre { code, pre {
background-color: @grafanaPanelBackground; background-color: @grafanaPanelBackground;
color: @textColor; color: @textColor;
} }
\ No newline at end of file
src/css/less/variables.dark.less
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
@blue: #33B5E5; @blue: #33B5E5;
@blueDark: #0099CC; @blueDark: #0099CC;
@green: #669900; @green: #669900;
@red: #CC0000; @red: #CC3900;
@yellow: #ECBB13; @yellow: #ECBB13;
@orange: #FF8800; @orange: #FF8800;
@pink: #FF4444; @pink: #FF4444;
......
src/vendor/angular/angular-strap.js
...@@ -797,7 +797,8 @@ angular.module('$strap.directives').directive('bsTooltip', [ ...@@ -797,7 +797,8 @@ angular.module('$strap.directives').directive('bsTooltip', [
title: function () { title: function () {
return angular.isFunction(value) ? value.apply(null, arguments) : value; return angular.isFunction(value) ? value.apply(null, arguments) : value;
}, },
html: true html: true,
container: 'body', // Grafana change
}); });
var tooltip = element.data('tooltip'); var tooltip = element.data('tooltip');
tooltip.show = function () { tooltip.show = function () {
...@@ -875,4 +876,4 @@ angular.module('$strap.directives').directive('bsTypeahead', [ ...@@ -875,4 +876,4 @@ angular.module('$strap.directives').directive('bsTypeahead', [
} }
}; };
} }
]); ]);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment