mirror of
https://github.com/grafana/grafana.git
synced 2025-02-10 07:35:45 -06:00
refactor: moved timepicker from a simple panel to component, removed simple panel directive
This commit is contained in:
Torkel Ödegaard
parent
7535677ed4
commit
d96a6a59ee
@ -1,8 +1,7 @@
|
||||
///<reference path="../headers/common.d.ts" />
|
||||
///<amd-dependency path="config" name="config" />
|
||||
|
||||
import angular = require('angular');
|
||||
declare var config : any;
|
||||
import config = require('config');
|
||||
|
||||
var module = angular.module('grafana.controllers');
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import angular = require('angular');
|
||||
import _ = require('lodash');
|
||||
|
||||
export function ArrayJoin() {
|
||||
export function arrayJoin() {
|
||||
'use strict';
|
||||
|
||||
return {
|
||||
@ -29,5 +29,5 @@ export function ArrayJoin() {
|
||||
};
|
||||
}
|
||||
|
||||
angular.module('grafana.directives').directive('arrayJoin', ArrayJoin);
|
||||
angular.module('grafana.directives').directive('arrayJoin', arrayJoin);
|
||||
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
define([
|
||||
'angular',
|
||||
],
|
||||
function (angular) {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('grafana.directives')
|
||||
.directive('grafanaSimplePanel', function($compile) {
|
||||
var panelLoading = '<span ng-show="panelMeta.loading == true">' +
|
||||
'<span style="font-size:72px;font-weight:200">'+
|
||||
'<i class="icon-spinner icon-spin"></i> loading ...' +
|
||||
'</span>'+
|
||||
'</span>';
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
link: function($scope, elem, attr) {
|
||||
|
||||
// once we have the template, scan it for controllers and
|
||||
// load the module.js if we have any
|
||||
|
||||
// compile the module and uncloack. We're done
|
||||
function loadModule($module) {
|
||||
$module.appendTo(elem);
|
||||
/* jshint indent:false */
|
||||
$compile(elem.contents())($scope);
|
||||
elem.removeClass("ng-cloak");
|
||||
}
|
||||
|
||||
function loadController(name) {
|
||||
elem.addClass("ng-cloak");
|
||||
// load the panels module file, then render it in the dom.
|
||||
var nameAsPath = name.replace(".", "/");
|
||||
$scope.require([
|
||||
'jquery',
|
||||
'text!panels/'+nameAsPath+'/module.html'
|
||||
], function ($, moduleTemplate) {
|
||||
var $module = $(moduleTemplate);
|
||||
// top level controllers
|
||||
var $controllers = $module.filter('ngcontroller, [ng-controller], .ng-controller');
|
||||
// add child controllers
|
||||
$controllers = $controllers.add($module.find('ngcontroller, [ng-controller], .ng-controller'));
|
||||
|
||||
if ($controllers.length) {
|
||||
$controllers.first().prepend(panelLoading);
|
||||
$scope.require([
|
||||
'panels/'+nameAsPath+'/module'
|
||||
], function() {
|
||||
loadModule($module);
|
||||
});
|
||||
} else {
|
||||
loadModule($module);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$scope.$watch(attr.type, function (name) {
|
||||
loadController(name);
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
});
|
||||
@ -16,6 +16,7 @@ define([
|
||||
'./timeSrv',
|
||||
'./unsavedChangesSrv',
|
||||
'./directives/dashSearchView',
|
||||
'./timepicker/timepicker',
|
||||
'./graphiteImportCtrl',
|
||||
'./dynamicDashboardSrv',
|
||||
'./importCtrl',
|
||||
|
||||
@ -31,7 +31,7 @@ function (angular, $, kbn, _, moment) {
|
||||
this.hideControls = data.hideControls || false;
|
||||
this.sharedCrosshair = data.sharedCrosshair || false;
|
||||
this.rows = data.rows || [];
|
||||
this.nav = data.nav || [];
|
||||
this.timepicker = data.timepicker || {};
|
||||
this.time = data.time || { from: 'now-6h', to: 'now' };
|
||||
this.templating = this._ensureListExist(data.templating);
|
||||
this.annotations = this._ensureListExist(data.annotations);
|
||||
@ -40,11 +40,6 @@ function (angular, $, kbn, _, moment) {
|
||||
this.schemaVersion = data.schemaVersion || 0;
|
||||
this.version = data.version || 0;
|
||||
this.links = data.links || [];
|
||||
|
||||
if (this.nav.length === 0) {
|
||||
this.nav.push({ type: 'timepicker' });
|
||||
}
|
||||
|
||||
this._updateSchema(data);
|
||||
this._initMeta(meta);
|
||||
}
|
||||
@ -232,9 +227,9 @@ function (angular, $, kbn, _, moment) {
|
||||
var i, j, k;
|
||||
var oldVersion = this.schemaVersion;
|
||||
var panelUpgrades = [];
|
||||
this.schemaVersion = 6;
|
||||
this.schemaVersion = 7;
|
||||
|
||||
if (oldVersion === 6) {
|
||||
if (oldVersion === 7) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -329,6 +324,11 @@ function (angular, $, kbn, _, moment) {
|
||||
}
|
||||
}
|
||||
|
||||
if (oldVersion < 7 && old.nav && old.nav.length) {
|
||||
this.timepicker = old.nav[0];
|
||||
delete this.nav;
|
||||
}
|
||||
|
||||
if (panelUpgrades.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -61,9 +61,8 @@
|
||||
Back to dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
|
||||
<grafana-simple-panel type="pulldown.type" ng-cloak>
|
||||
</grafana-simple-panel>
|
||||
<li ng-if="dashboard">
|
||||
<gf-time-picker></gf-time-picker>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -5,9 +5,7 @@
|
||||
</div>
|
||||
|
||||
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
|
||||
<div ng-repeat="tab in ['General', 'Rows', 'Links']" data-title="{{tab}}">
|
||||
</div>
|
||||
<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
|
||||
<div ng-repeat="tab in ['General', 'Rows', 'Links', 'Time picker']" data-title="{{tab}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -40,7 +38,7 @@
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 90px">
|
||||
Timezone
|
||||
@ -110,9 +108,8 @@
|
||||
<dash-links-editor></dash-links-editor>
|
||||
</div>
|
||||
|
||||
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
|
||||
<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
|
||||
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
|
||||
<div ng-if="editor.index == 3">
|
||||
<gf-time-picker-settings></gf-time-picker-settings>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
55
public/app/features/dashboard/timepicker/settings.html
Normal file
55
public/app/features/dashboard/timepicker/settings.html
Normal file
@ -0,0 +1,55 @@
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 118px">
|
||||
Relative times
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="panel.time_options" array-join>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 118px">
|
||||
Auto-refresh
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="panel.refresh_intervals" array-join>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 118px">
|
||||
Now delay
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
now-
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-mini tight-form-input last"
|
||||
ng-model="panel.nowDelay" placeholder="0m"
|
||||
valid-time-span
|
||||
bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
|
||||
data-placement="right">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<br>
|
||||
<i class="fa fa-info-circle"></i>
|
||||
For these changes to fully take effect save and reload the dashboard.
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
56
public/app/features/dashboard/timepicker/timepicker.html
Normal file
56
public/app/features/dashboard/timepicker/timepicker.html
Normal file
@ -0,0 +1,56 @@
|
||||
<style>
|
||||
.timepicker-timestring {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.timepicker-dropdown {
|
||||
margin: 0px !important;
|
||||
border: 0px !important;
|
||||
}
|
||||
</style>
|
||||
<form name="input" style="margin:0">
|
||||
<ul class="nav timepicker-dropdown">
|
||||
|
||||
<li class="grafana-menu-zoom-out">
|
||||
<a class='small' ng-click='zoom(2)'>
|
||||
Zoom Out
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="dropdown">
|
||||
|
||||
<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="loadTimeOptions();">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<span ng-bind="time.rangeString"></span>
|
||||
<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
|
||||
<!-- lacy load this -->
|
||||
<ul class="dropdown-menu" ng-if="time_options" >
|
||||
<li bindonce ng-repeat='option in time_options'>
|
||||
<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a>
|
||||
</li>
|
||||
|
||||
<!-- Auto refresh submenu -->
|
||||
<li class="dropdown-submenu">
|
||||
<a href="#">Auto-Refresh</a>
|
||||
<ul class="dropdown-menu" ng-class="{'dropdown-submenu-left': refreshMenuLeftSide}">
|
||||
<li>
|
||||
<a ng-click="timeSrv.set_interval(false)">Off</a>
|
||||
</li>
|
||||
<li bindonce ng-repeat="interval in panel.refresh_intervals track by $index">
|
||||
<a ng-click="timeSrv.set_interval(interval)" bo-text="'Every ' + interval"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a ng-click="customTime()">Custom</a></li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li ng-show="!dashboard.refresh" class="grafana-menu-refresh">
|
||||
<a ng-click="timeSrv.refreshDashboard()"><i class="fa fa-refresh"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
@ -1,32 +1,13 @@
|
||||
/*
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
## Timepicker2
|
||||
import angular = require('angular');
|
||||
import _ = require('lodash');
|
||||
import moment = require('moment');
|
||||
import kbn = require('kbn');
|
||||
|
||||
### Parameters
|
||||
* mode :: The default mode of the panel. Options: 'relative', 'absolute' 'since' Default: 'relative'
|
||||
* time_options :: An array of possible time options. Default: ['5m','15m','1h','6h','12h','24h','2d','7d','30d']
|
||||
* timespan :: The default options selected for the relative view. Default: '15m'
|
||||
* timefield :: The field in which time is stored in the document.
|
||||
* refresh: Object containing refresh parameters
|
||||
* enable :: true/false, enable auto refresh by default. Default: false
|
||||
* interval :: Seconds between auto refresh. Default: 30
|
||||
* min :: The lowest interval a user may set
|
||||
*/
|
||||
define([
|
||||
'angular',
|
||||
'app',
|
||||
'lodash',
|
||||
'moment',
|
||||
'kbn'
|
||||
],
|
||||
function (angular, app, _, moment, kbn) {
|
||||
'use strict';
|
||||
|
||||
var module = angular.module('grafana.panels.timepicker', []);
|
||||
app.useModule(module);
|
||||
|
||||
module.controller('timepicker', function($scope, $rootScope, timeSrv) {
|
||||
export class TimePickerCtrl {
|
||||
|
||||
constructor($scope : any, $rootScope, timeSrv) {
|
||||
$scope.panelMeta = {
|
||||
status : "Stable",
|
||||
description : ""
|
||||
@ -39,8 +20,6 @@ function (angular, app, _, moment, kbn) {
|
||||
refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
|
||||
};
|
||||
|
||||
_.defaults($scope.panel,_d);
|
||||
|
||||
// ng-pattern regexs
|
||||
$scope.patterns = {
|
||||
date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
|
||||
@ -57,6 +36,10 @@ function (angular, app, _, moment, kbn) {
|
||||
});
|
||||
|
||||
$scope.init = function() {
|
||||
$scope.panel = $scope.dashboard.timepicker;
|
||||
|
||||
_.defaults($scope.panel, _d);
|
||||
|
||||
var time = timeSrv.timeRange(true);
|
||||
$scope.panel.now = false;
|
||||
|
||||
@ -86,11 +69,11 @@ function (angular, app, _, moment, kbn) {
|
||||
$scope.temptime = cloneTime($scope.time);
|
||||
$scope.temptime.now = $scope.panel.now;
|
||||
|
||||
$scope.temptime.from.date.setHours(0,0,0,0);
|
||||
$scope.temptime.to.date.setHours(0,0,0,0);
|
||||
$scope.temptime.from.date.setHours(0, 0, 0, 0);
|
||||
$scope.temptime.to.date.setHours(0, 0, 0, 0);
|
||||
|
||||
// Date picker needs the date to be at the start of the day
|
||||
if(new Date().getTimezoneOffset() < 0) {
|
||||
if (new Date().getTimezoneOffset() < 0) {
|
||||
$scope.temptime.from.date = moment($scope.temptime.from.date).add(1, 'days').toDate();
|
||||
$scope.temptime.to.date = moment($scope.temptime.to.date).add(1, 'days').toDate();
|
||||
}
|
||||
@ -100,7 +83,7 @@ function (angular, app, _, moment, kbn) {
|
||||
|
||||
// Constantly validate the input of the fields. This function does not change any date variables
|
||||
// outside of its own scope
|
||||
$scope.validate = function(time) {
|
||||
$scope.validate = function(time) : any {
|
||||
// Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
|
||||
$scope.input.$setValidity("dummy", true);
|
||||
|
||||
@ -108,13 +91,13 @@ function (angular, app, _, moment, kbn) {
|
||||
_to = datepickerToLocal(time.to.date),
|
||||
_t = time;
|
||||
|
||||
if($scope.input.$valid) {
|
||||
if ($scope.input.$valid) {
|
||||
|
||||
_from.setHours(_t.from.hour,_t.from.minute,_t.from.second,_t.from.millisecond);
|
||||
_to.setHours(_t.to.hour,_t.to.minute,_t.to.second,_t.to.millisecond);
|
||||
_from.setHours(_t.from.hour, _t.from.minute, _t.from.second, _t.from.millisecond);
|
||||
_to.setHours(_t.to.hour, _t.to.minute, _t.to.second, _t.to.millisecond);
|
||||
|
||||
// Check that the objects are valid and to is after from
|
||||
if(isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
|
||||
if (isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
|
||||
$scope.input.$setValidity("dummy", false);
|
||||
return false;
|
||||
}
|
||||
@ -122,29 +105,23 @@ function (angular, app, _, moment, kbn) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return { from: _from, to:_to, now: time.now};
|
||||
return { from: _from, to: _to, now: time.now };
|
||||
};
|
||||
|
||||
$scope.setNow = function() {
|
||||
$scope.time.to = getTimeObj(new Date());
|
||||
};
|
||||
|
||||
/*
|
||||
time : {
|
||||
from: Date
|
||||
to: Date
|
||||
}
|
||||
*/
|
||||
$scope.setAbsoluteTimeFilter = function (time) {
|
||||
// Create filter object
|
||||
var _filter = _.clone(time);
|
||||
|
||||
if(time.now) {
|
||||
if (time.now) {
|
||||
_filter.to = "now";
|
||||
}
|
||||
|
||||
// Update our representation
|
||||
$scope.time = getScopeTimeObj(time.from,time.to);
|
||||
$scope.time = getScopeTimeObj(time.from, time.to);
|
||||
|
||||
timeSrv.setTime(_filter);
|
||||
};
|
||||
@ -160,10 +137,10 @@ function (angular, app, _, moment, kbn) {
|
||||
|
||||
timeSrv.setTime(range);
|
||||
|
||||
$scope.time = getScopeTimeObj(kbn.parseDate(range.from),new Date());
|
||||
$scope.time = getScopeTimeObj(kbn.parseDate(range.from), new Date());
|
||||
};
|
||||
|
||||
var pad = function(n, width, z) {
|
||||
var pad : any = function(n, width, z) {
|
||||
z = z || '0';
|
||||
n = n.toString();
|
||||
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
|
||||
@ -180,8 +157,8 @@ function (angular, app, _, moment, kbn) {
|
||||
return _n;
|
||||
};
|
||||
|
||||
var getScopeTimeObj = function(from,to) {
|
||||
var model = {from: getTimeObj(from), to: getTimeObj(to)};
|
||||
var getScopeTimeObj = function(from, to) {
|
||||
var model : any = {from: getTimeObj(from), to: getTimeObj(to)};
|
||||
|
||||
if (model.from.date) {
|
||||
model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
|
||||
@ -212,10 +189,10 @@ function (angular, app, _, moment, kbn) {
|
||||
var getTimeObj = function(date) {
|
||||
return {
|
||||
date: new Date(date),
|
||||
hour: pad(date.getHours(),2),
|
||||
minute: pad(date.getMinutes(),2),
|
||||
second: pad(date.getSeconds(),2),
|
||||
millisecond: pad(date.getMilliseconds(),3)
|
||||
hour: pad(date.getHours(), 2),
|
||||
minute: pad(date.getMinutes(), 2),
|
||||
second: pad(date.getSeconds(), 2),
|
||||
millisecond: pad(date.getMilliseconds(), 3)
|
||||
};
|
||||
};
|
||||
|
||||
@ -234,7 +211,7 @@ function (angular, app, _, moment, kbn) {
|
||||
var to = (center + (timespan*factor)/2);
|
||||
var from = (center - (timespan*factor)/2);
|
||||
|
||||
if(to > Date.now() && range.to <= Date.now()) {
|
||||
if (to > Date.now() && range.to <= Date.now()) {
|
||||
var offset = to - Date.now();
|
||||
from = from - offset;
|
||||
to = Date.now();
|
||||
@ -246,5 +223,32 @@ function (angular, app, _, moment, kbn) {
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
});
|
||||
$scope.init();
|
||||
}
|
||||
}
|
||||
|
||||
export function settingsDirective() {
|
||||
'use strict';
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/features/dashboard/timepicker/settings.html',
|
||||
controller: TimePickerCtrl,
|
||||
scope: true,
|
||||
link: function() {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function timePickerDirective() {
|
||||
'use strict';
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'app/features/dashboard/timepicker/timepicker.html',
|
||||
controller: TimePickerCtrl,
|
||||
scope: true
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective);
|
||||
angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective);
|
||||
@ -67,7 +67,7 @@
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<div class="tight-form last">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 20px">
|
||||
<i class="fa fa-fw fa-unlink invisible"></i>
|
||||
|
||||
2
public/app/headers/angularjs/angularjs.d.ts
vendored
2
public/app/headers/angularjs/angularjs.d.ts
vendored
@ -6,7 +6,6 @@
|
||||
|
||||
/// <reference path="../jquery/jquery.d.ts" />
|
||||
|
||||
declare var angular: angular.IAngularStatic;
|
||||
|
||||
// Support for painless dependency injection
|
||||
interface Function {
|
||||
@ -17,6 +16,7 @@ interface Function {
|
||||
import ng = angular;
|
||||
// Support AMD require
|
||||
declare module 'angular' {
|
||||
var angular: angular.IAngularStatic;
|
||||
export = angular;
|
||||
}
|
||||
|
||||
|
||||
13
public/app/headers/common.d.ts
vendored
13
public/app/headers/common.d.ts
vendored
@ -2,3 +2,16 @@
|
||||
///<reference path="angularjs/angularjs.d.ts" />
|
||||
///<reference path="lodash/lodash.d.ts" />
|
||||
///<reference path="moment/moment.d.ts" />
|
||||
|
||||
// dummy modules
|
||||
declare module 'config' {
|
||||
var config : any;
|
||||
export = config;
|
||||
}
|
||||
|
||||
declare module 'kbn' {
|
||||
var kbn : any;
|
||||
export = kbn;
|
||||
}
|
||||
|
||||
|
||||
|
||||
1
public/app/headers/moment/moment.d.ts
vendored
1
public/app/headers/moment/moment.d.ts
vendored
@ -5,4 +5,3 @@
|
||||
|
||||
/// <reference path="moment-node.d.ts" />
|
||||
|
||||
declare var moment: moment.MomentStatic;
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
<div class="gf-box-header">
|
||||
<div class="gf-box-title">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
Custom time range
|
||||
</div>
|
||||
<button class="gf-box-header-close-btn" ng-click="dismiss();">
|
||||
<i class="fa fa-remove"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="gf-box-body">
|
||||
<style>
|
||||
.timepicker-to-column {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.timepicker-input input {
|
||||
outline: 0 !important;
|
||||
border: 0px !important;
|
||||
-webkit-box-shadow: 0;
|
||||
-moz-box-shadow: 0;
|
||||
box-shadow: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timepicker-input input::-webkit-outer-spin-button,
|
||||
.timepicker-input input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input.timepicker-date {
|
||||
width: 90px;
|
||||
}
|
||||
input.timepicker-hms {
|
||||
width: 20px;
|
||||
}
|
||||
input.timepicker-ms {
|
||||
width: 25px;
|
||||
}
|
||||
div.timepicker-now {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="timepicker form-horizontal">
|
||||
<form name="timeForm" style="margin-bottom: 0">
|
||||
|
||||
<div class="timepicker-from-column">
|
||||
<label class="small">From</label>
|
||||
<div class="fake-input timepicker-input">
|
||||
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
|
||||
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
|
||||
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
|
||||
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
|
||||
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timepicker-to-column">
|
||||
|
||||
<label class="small">To (<a class="link" ng-class="{'strong':temptime.now}" ng-click="setNow();temptime.now=true">set now</a>)</label>
|
||||
|
||||
<div class="fake-input timepicker-input">
|
||||
<div ng-hide="temptime.now">
|
||||
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
|
||||
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
|
||||
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
|
||||
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
|
||||
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
|
||||
</div>
|
||||
<span type="text" ng-show="temptime.now" ng-disabled="temptime.now">  <i class="pointer fa fa-remove" ng-click="setNow();temptime.now=false;"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();" ng-disabled="!timeForm.$valid" class="btn btn-success">Apply</button>
|
||||
<span class="" ng-hide="input.$valid">Invalid date or range</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,55 +0,0 @@
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 118px">
|
||||
Relative times
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="panel.time_options" array-join>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 118px">
|
||||
Auto-refresh
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-xlarge tight-form-input last" style="width: 450px" ng-model="panel.refresh_intervals" array-join>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div class="tight-form">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item" style="width: 118px">
|
||||
Now delay
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
now-
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-mini tight-form-input last"
|
||||
ng-model="panel.nowDelay" placeholder="0m"
|
||||
valid-time-span
|
||||
bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
|
||||
data-placement="right">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<br>
|
||||
<i class="fa fa-info-circle"></i>
|
||||
For these changes to fully take effect save and reload the dashboard.
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,57 +0,0 @@
|
||||
<div ng-controller='timepicker' ng-init="init()">
|
||||
<style>
|
||||
.timepicker-timestring {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.timepicker-dropdown {
|
||||
margin: 0px !important;
|
||||
border: 0px !important;
|
||||
}
|
||||
</style>
|
||||
<form name="input" style="margin:0">
|
||||
<ul class="nav timepicker-dropdown">
|
||||
|
||||
<li class="grafana-menu-zoom-out">
|
||||
<a class='small' ng-click='zoom(2)'>
|
||||
Zoom Out
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="dropdown">
|
||||
|
||||
<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="loadTimeOptions();">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
<span ng-bind="time.rangeString"></span>
|
||||
<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
|
||||
<i class="fa fa-caret-down"></i>
|
||||
</a>
|
||||
|
||||
<!-- lacy load this -->
|
||||
<ul class="dropdown-menu" ng-if="time_options" >
|
||||
<li bindonce ng-repeat='option in time_options'>
|
||||
<a ng-click="setRelativeFilter(option)" bo-text="option.text"></a>
|
||||
</li>
|
||||
|
||||
<!-- Auto refresh submenu -->
|
||||
<li class="dropdown-submenu">
|
||||
<a href="#">Auto-Refresh</a>
|
||||
<ul class="dropdown-menu" ng-class="{'dropdown-submenu-left': refreshMenuLeftSide}">
|
||||
<li>
|
||||
<a ng-click="timeSrv.set_interval(false)">Off</a>
|
||||
</li>
|
||||
<li bindonce ng-repeat="interval in panel.refresh_intervals track by $index">
|
||||
<a ng-click="timeSrv.set_interval(interval)" bo-text="'Every ' + interval"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a ng-click="customTime()">Custom</a></li>
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li ng-show="!dashboard.refresh" class="grafana-menu-refresh">
|
||||
<a ng-click="timeSrv.refreshDashboard()"><i class="fa fa-refresh"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
@ -30,7 +30,6 @@ define([
|
||||
|
||||
it('should have default properties', function() {
|
||||
expect(model.rows.length).to.be(0);
|
||||
expect(model.nav.length).to.be(1);
|
||||
});
|
||||
|
||||
});
|
||||
@ -199,7 +198,7 @@ define([
|
||||
});
|
||||
|
||||
it('dashboard schema version should be set to latest', function() {
|
||||
expect(model.schemaVersion).to.be(6);
|
||||
expect(model.schemaVersion).to.be(7);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
@ -6,6 +6,7 @@ module.exports = function(grunt) {
|
||||
'jshint:source',
|
||||
'jshint:tests',
|
||||
'jscs',
|
||||
'tslint',
|
||||
'clean:release',
|
||||
'copy:public_to_gen',
|
||||
'typescript:build',
|
||||
|
||||
@ -15,7 +15,7 @@ module.exports = function(config) {
|
||||
"interface-name": true,
|
||||
"semicolon": true,
|
||||
"use-strict": [true, "check-module", "check-function" ],
|
||||
"whitespace": [true, "check-branch", "check-decl", "check-operator", "check-separator", "check-type"],
|
||||
"whitespace": [true, "check-branch", "check-decl", "check-type"],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ module.exports = function(config) {
|
||||
|
||||
typescript: {
|
||||
files: ['<%= srcDir %>/app/**/*.ts'],
|
||||
tasks: ['typescript:build'],
|
||||
tasks: ['tslint', 'typescript:build'],
|
||||
options: {
|
||||
spawn: false
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user