Skip to content

N
nexpie-grafana-theme
Commit 1c8ef716 by Torkel Ödegaard
Options

Began work on time overrides for panels, to enable different time periods on the… 

Began work on time overrides for panels, to enable different time periods on the same dashboard, #171
parent 6fc451da
Showing with 94 additions and 7 deletions
src/app/features/dashboard/partials/panelTime.html 0 → 100644
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 148px">
<strong>Override relative time</strong>
</li>
<li class="tight-form-item" style="width: 50px">
Last
</li>
<li>
<input type="text" class="input-small tight-form-input" placeholder="1h"
empty-to-null ng-model="panel.timeFrom"
ng-change="get_data()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item tight-form-item-icon">
<i class="fa fa-clock-o"></i>
</li>
<li class="tight-form-item" style="width: 148px">
<strong>Add time shift</strong>
</li>
<li class="tight-form-item" style="width: 50px">
Amount
</li>
<li>
<input type="text" class="input-small tight-form-input" placeholder="1h"
empty-to-null ng-model="panel.timeShift"
ng-change="get_data()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
src/app/features/dashboard/timeSrv.js
...@@ -19,12 +19,23 @@ define([ ...@@ -19,12 +19,23 @@ define([
this.time = dashboard.time; this.time = dashboard.time;
this._initTimeFromUrl(); this._initTimeFromUrl();
this._parseTime();
if(this.dashboard.refresh) { if(this.dashboard.refresh) {
this.set_interval(this.dashboard.refresh); this.set_interval(this.dashboard.refresh);
} }
}; };
this._parseTime = function() {
// when absolute time is saved in json it is turned to a string
if (_.isString(this.time.from) && this.time.from.indexOf('Z') >= 0) {
this.time.from = new Date(this.time.from);
}
if (_.isString(this.time.to) && this.time.to.indexOf('Z') >= 0) {
this.time.to = new Date(this.time.to);
}
};
this._parseUrlParam = function(value) { this._parseUrlParam = function(value) {
if (value.indexOf('now') !== -1) { if (value.indexOf('now') !== -1) {
return value; return value;
...@@ -109,9 +120,6 @@ define([ ...@@ -109,9 +120,6 @@ define([
this.timeRange = function(parse) { this.timeRange = function(parse) {
var _t = this.time; var _t = this.time;
if(_.isUndefined(_t) || _.isUndefined(_t.from)) {
return false;
}
if(parse === false) { if(parse === false) {
return { return {
......
src/app/panels/graph/module.html
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
<div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}"> <div class="graph-wrapper" ng-class="{'graph-legend-rightside': panel.legend.rightSide}">
<div class="graph-canvas-wrapper"> <div class="graph-canvas-wrapper">
<span class="graph-time-info" ng-if="panelMeta.timeInfo">
<i class="fa fa-clock-o"></i> {{panelMeta.timeInfo}}
</span>
<div ng-if="datapointsWarning" class="datapoints-warning"> <div ng-if="datapointsWarning" class="datapoints-warning">
<span class="small" ng-show="!datapointsCount"> <span class="small" ng-show="!datapointsCount">
No datapoints <tip>No datapoints returned from metric query</tip> No datapoints <tip>No datapoints returned from metric query</tip>
......
src/app/panels/graph/module.js
...@@ -26,6 +26,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { ...@@ -26,6 +26,7 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
$scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html'); $scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html');
$scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html'); $scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html');
$scope.panelMeta.addEditorTab('Time range', 'app/features/dashboard/partials/panelTime.html');
$scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()'); $scope.panelMeta.addExtendedMenuItem('Export CSV', '', 'exportCsv()');
$scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()'); $scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()');
...@@ -88,6 +89,9 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { ...@@ -88,6 +89,9 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
value_type: 'cumulative', value_type: 'cumulative',
shared: false, shared: false,
}, },
// time overrides
timeFrom: null,
timeShift: null,
// metric queries // metric queries
targets: [{}], targets: [{}],
// series color overrides // series color overrides
...@@ -114,6 +118,25 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) { ...@@ -114,6 +118,25 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
$scope.updateTimeRange = function () { $scope.updateTimeRange = function () {
$scope.range = timeSrv.timeRange(); $scope.range = timeSrv.timeRange();
$scope.rangeUnparsed = timeSrv.timeRange(false); $scope.rangeUnparsed = timeSrv.timeRange(false);
$scope.panelMeta.timeInfo = "";
// check panel time overrrides
if ($scope.panel.timeFrom) {
if (_.isString($scope.rangeUnparsed.from)) {
$scope.panelMeta.timeInfo = "Last " + $scope.panel.timeFrom;
$scope.rangeUnparsed.from = 'now-' + $scope.panel.timeFrom;
$scope.range.from = kbn.parseDate($scope.rangeUnparsed.from);
}
}
// if ($scope.panel.timeShift) {
// // from: now-1h
// // to: now
// // timeshift: 1d
// // from: now-1d-1h
// // to: now-1d
// }
if ($scope.panel.maxDataPoints) { if ($scope.panel.maxDataPoints) {
$scope.resolution = $scope.panel.maxDataPoints; $scope.resolution = $scope.panel.maxDataPoints;
} }
......
src/css/less/graph.less
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
vertical-align: top; vertical-align: top;
position: relative; position: relative;
left: 4px; left: 4px;
top: -20px; top: -25px;
} }
.graph-legend { .graph-legend {
...@@ -260,7 +260,6 @@ ...@@ -260,7 +260,6 @@
transform-origin: right top; transform-origin: right top;
} }
.axisLabel { .axisLabel {
color: @textColor; color: @textColor;
font-size: @fontSizeSmall; font-size: @fontSizeSmall;
...@@ -269,3 +268,13 @@ ...@@ -269,3 +268,13 @@
font-size: 12px; font-size: 12px;
} }
.graph-time-info {
font-weight: bold;
float: right;
margin-right: 15px;
color: @blue;
font-size: 85%;
position: relative;
top: -20px;
}
src/css/less/panel.less
...@@ -49,8 +49,8 @@ ...@@ -49,8 +49,8 @@
.panel-loading { .panel-loading {
position:absolute; position:absolute;
top: 0px; top: -3px;
right: 4px; right: 0px;
z-index: 800; z-index: 800;
} }
......
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