IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 23:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: moved timepicker from a simple panel to component, removed simple panel directive

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-09-12 11:49:14 +02:00
parent 7535677ed4
commit d96a6a59ee
21 changed files with 208 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/controllers/signupCtrl.ts
View File

@ -1,8 +1,7 @@
///<reference path="../headers/common.d.ts" /> ///<reference path="../headers/common.d.ts" />
///<amd-dependency path="config" name="config" />
import angular = require('angular'); import angular = require('angular');
declare var config : any; import config = require('config');
var module = angular.module('grafana.controllers'); var module = angular.module('grafana.controllers');

4
public/app/core/directives/array_join.ts
View File

@ -3,7 +3,7 @@
import angular = require('angular'); import angular = require('angular');
import _ = require('lodash'); import _ = require('lodash');
export function ArrayJoin() { export function arrayJoin() {
'use strict'; 'use strict';
return { return {
@ -29,5 +29,5 @@ export function ArrayJoin() {
}; };
} }
angular.module('grafana.directives').directive('arrayJoin', ArrayJoin); angular.module('grafana.directives').directive('arrayJoin', arrayJoin);

66
public/app/directives/grafanaSimplePanel.js
View File

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

1
public/app/features/dashboard/all.js
View File

@ -16,6 +16,7 @@ define([
'./timeSrv', './timeSrv',
'./unsavedChangesSrv', './unsavedChangesSrv',
'./directives/dashSearchView', './directives/dashSearchView',
'./timepicker/timepicker',
'./graphiteImportCtrl', './graphiteImportCtrl',
'./dynamicDashboardSrv', './dynamicDashboardSrv',
'./importCtrl', './importCtrl',

16
public/app/features/dashboard/dashboardSrv.js
View File

@ -31,7 +31,7 @@ function (angular, $, kbn, _, moment) {
this.hideControls = data.hideControls || false; this.hideControls = data.hideControls || false;
this.sharedCrosshair = data.sharedCrosshair || false; this.sharedCrosshair = data.sharedCrosshair || false;
this.rows = data.rows || []; this.rows = data.rows || [];
this.nav = data.nav || []; this.timepicker = data.timepicker || {};
this.time = data.time || { from: 'now-6h', to: 'now' }; this.time = data.time || { from: 'now-6h', to: 'now' };
this.templating = this._ensureListExist(data.templating); this.templating = this._ensureListExist(data.templating);
this.annotations = this._ensureListExist(data.annotations); this.annotations = this._ensureListExist(data.annotations);
@ -40,11 +40,6 @@ function (angular, $, kbn, _, moment) {
this.schemaVersion = data.schemaVersion || 0; this.schemaVersion = data.schemaVersion || 0;
this.version = data.version || 0; this.version = data.version || 0;
this.links = data.links || []; this.links = data.links || [];
if (this.nav.length === 0) {
this.nav.push({ type: 'timepicker' });
}
this._updateSchema(data); this._updateSchema(data);
this._initMeta(meta); this._initMeta(meta);
} }
@ -232,9 +227,9 @@ function (angular, $, kbn, _, moment) {
var i, j, k; var i, j, k;
var oldVersion = this.schemaVersion; var oldVersion = this.schemaVersion;
var panelUpgrades = []; var panelUpgrades = [];
this.schemaVersion = 6; this.schemaVersion = 7;
if (oldVersion === 6) { if (oldVersion === 7) {
return; 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) { if (panelUpgrades.length === 0) {
return; return;
} }

5
public/app/features/dashboard/partials/dashboardTopNav.html
View File

@ -61,9 +61,8 @@
Back to dashboard Back to dashboard
</a> </a>
</li> </li>
<li ng-repeat="pulldown in dashboard.nav" ng-controller="PulldownCtrl" ng-show="pulldown.enable"> <li ng-if="dashboard">
<grafana-simple-panel type="pulldown.type" ng-cloak> <gf-time-picker></gf-time-picker>
</grafana-simple-panel>
</li> </li>
</ul> </ul>
</div> </div>

11
public/app/features/dashboard/partials/settings.html
View File

@ -5,9 +5,7 @@
</div> </div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['General', 'Rows', 'Links']" data-title="{{tab}}"> <div ng-repeat="tab in ['General', 'Rows', 'Links', 'Time picker']" data-title="{{tab}}">
</div>
<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
</div> </div>
</div> </div>
@ -40,7 +38,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 90px"> <li class="tight-form-item" style="width: 90px">
Timezone Timezone
@ -110,9 +108,8 @@
<dash-links-editor></dash-links-editor> <dash-links-editor></dash-links-editor>
</div> </div>
<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index"> <div ng-if="editor.index == 3">
<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include> <gf-time-picker-settings></gf-time-picker-settings>
<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
</div> </div>
</div> </div>

55
public/app/features/dashboard/timepicker/settings.html Normal file
View 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
View 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>

116
public/app/panels/timepicker/module.js → public/app/features/dashboard/timepicker/timepicker.ts
View File

@ -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 export class TimePickerCtrl {
* 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) {
constructor($scope : any, $rootScope, timeSrv) {
$scope.panelMeta = { $scope.panelMeta = {
status : "Stable", status : "Stable",
description : "" description : ""
@ -39,8 +20,6 @@ function (angular, app, _, moment, kbn) {
refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'], refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
}; };
_.defaults($scope.panel,_d);
// ng-pattern regexs // ng-pattern regexs
$scope.patterns = { $scope.patterns = {
date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/, date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
@ -57,6 +36,10 @@ function (angular, app, _, moment, kbn) {
}); });
$scope.init = function() { $scope.init = function() {
$scope.panel = $scope.dashboard.timepicker;
_.defaults($scope.panel, _d);
var time = timeSrv.timeRange(true); var time = timeSrv.timeRange(true);
$scope.panel.now = false; $scope.panel.now = false;
@ -86,11 +69,11 @@ function (angular, app, _, moment, kbn) {
$scope.temptime = cloneTime($scope.time); $scope.temptime = cloneTime($scope.time);
$scope.temptime.now = $scope.panel.now; $scope.temptime.now = $scope.panel.now;
$scope.temptime.from.date.setHours(0,0,0,0); $scope.temptime.from.date.setHours(0, 0, 0, 0);
$scope.temptime.to.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 // 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.from.date = moment($scope.temptime.from.date).add(1, 'days').toDate();
$scope.temptime.to.date = moment($scope.temptime.to.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 // Constantly validate the input of the fields. This function does not change any date variables
// outside of its own scope // 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. // Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
$scope.input.$setValidity("dummy", true); $scope.input.$setValidity("dummy", true);
@ -108,13 +91,13 @@ function (angular, app, _, moment, kbn) {
_to = datepickerToLocal(time.to.date), _to = datepickerToLocal(time.to.date),
_t = time; _t = time;
if($scope.input.$valid) { if ($scope.input.$valid) {
_from.setHours(_t.from.hour,_t.from.minute,_t.from.second,_t.from.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); _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 // 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); $scope.input.$setValidity("dummy", false);
return false; return false;
} }
@ -122,29 +105,23 @@ function (angular, app, _, moment, kbn) {
return false; return false;
} }
return { from: _from, to:_to, now: time.now}; return { from: _from, to: _to, now: time.now };
}; };
$scope.setNow = function() { $scope.setNow = function() {
$scope.time.to = getTimeObj(new Date()); $scope.time.to = getTimeObj(new Date());
}; };
/*
time : {
from: Date
to: Date
}
*/
$scope.setAbsoluteTimeFilter = function (time) { $scope.setAbsoluteTimeFilter = function (time) {
// Create filter object // Create filter object
var _filter = _.clone(time); var _filter = _.clone(time);
if(time.now) { if (time.now) {
_filter.to = "now"; _filter.to = "now";
} }
// Update our representation // Update our representation
$scope.time = getScopeTimeObj(time.from,time.to); $scope.time = getScopeTimeObj(time.from, time.to);
timeSrv.setTime(_filter); timeSrv.setTime(_filter);
}; };
@ -160,10 +137,10 @@ function (angular, app, _, moment, kbn) {
timeSrv.setTime(range); 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'; z = z || '0';
n = n.toString(); n = n.toString();
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; 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; return _n;
}; };
var getScopeTimeObj = function(from,to) { var getScopeTimeObj = function(from, to) {
var model = {from: getTimeObj(from), to: getTimeObj(to)}; var model : any = {from: getTimeObj(from), to: getTimeObj(to)};
if (model.from.date) { if (model.from.date) {
model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>'; model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
@ -212,10 +189,10 @@ function (angular, app, _, moment, kbn) {
var getTimeObj = function(date) { var getTimeObj = function(date) {
return { return {
date: new Date(date), date: new Date(date),
hour: pad(date.getHours(),2), hour: pad(date.getHours(), 2),
minute: pad(date.getMinutes(),2), minute: pad(date.getMinutes(), 2),
second: pad(date.getSeconds(),2), second: pad(date.getSeconds(), 2),
millisecond: pad(date.getMilliseconds(),3) millisecond: pad(date.getMilliseconds(), 3)
}; };
}; };
@ -234,7 +211,7 @@ function (angular, app, _, moment, kbn) {
var to = (center + (timespan*factor)/2); var to = (center + (timespan*factor)/2);
var from = (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(); var offset = to - Date.now();
from = from - offset; from = from - offset;
to = Date.now(); 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);

2
public/app/features/dashlinks/editor.html
View File

@ -67,7 +67,7 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="tight-form"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px"> <li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i> <i class="fa fa-fw fa-unlink invisible"></i>

2
public/app/headers/angularjs/angularjs.d.ts vendored
View File

@ -6,7 +6,6 @@
/// <reference path="../jquery/jquery.d.ts" /> /// <reference path="../jquery/jquery.d.ts" />
declare var angular: angular.IAngularStatic;
// Support for painless dependency injection // Support for painless dependency injection
interface Function { interface Function {
@ -17,6 +16,7 @@ interface Function {
import ng = angular; import ng = angular;
// Support AMD require // Support AMD require
declare module 'angular' { declare module 'angular' {
var angular: angular.IAngularStatic;
export = angular; export = angular;
} }

13
public/app/headers/common.d.ts vendored
View File

@ -2,3 +2,16 @@
///<reference path="angularjs/angularjs.d.ts" /> ///<reference path="angularjs/angularjs.d.ts" />
///<reference path="lodash/lodash.d.ts" /> ///<reference path="lodash/lodash.d.ts" />
///<reference path="moment/moment.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
View File

@ -5,4 +5,3 @@
/// <reference path="moment-node.d.ts" /> /// <reference path="moment-node.d.ts" />
declare var moment: moment.MomentStatic;

81
public/app/panels/timepicker/custom.html
View File

@ -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">&nbsp <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>

55
public/app/panels/timepicker/editor.html
View File

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

57
public/app/panels/timepicker/module.html
View File

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

3
public/test/specs/dashboardSrv-specs.js
View File

@ -30,7 +30,6 @@ define([
it('should have default properties', function() { it('should have default properties', function() {
expect(model.rows.length).to.be(0); 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() { it('dashboard schema version should be set to latest', function() {
expect(model.schemaVersion).to.be(6); expect(model.schemaVersion).to.be(7);
}); });
}); });

1
tasks/build_task.js
View File

@ -6,6 +6,7 @@ module.exports = function(grunt) {
'jshint:source', 'jshint:source',
'jshint:tests', 'jshint:tests',
'jscs', 'jscs',
'tslint',
'clean:release', 'clean:release',
'copy:public_to_gen', 'copy:public_to_gen',
'typescript:build', 'typescript:build',

2
tasks/options/tslint.js
View File

@ -15,7 +15,7 @@ module.exports = function(config) {
"interface-name": true, "interface-name": true,
"semicolon": true, "semicolon": true,
"use-strict": [true, "check-module", "check-function" ], "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"],
} }
} }
} }

2
tasks/options/watch.js
View File

@ -18,7 +18,7 @@ module.exports = function(config) {
typescript: { typescript: {
files: ['<%= srcDir %>/app/**/*.ts'], files: ['<%= srcDir %>/app/**/*.ts'],
tasks: ['typescript:build'], tasks: ['tslint', 'typescript:build'],
options: { options: {
spawn: false spawn: false
} }