module.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*
  2. ## Timepicker2
  3. ### Parameters
  4. * mode :: The default mode of the panel. Options: 'relative', 'absolute' 'since' Default: 'relative'
  5. * time_options :: An array of possible time options. Default: ['5m','15m','1h','6h','12h','24h','2d','7d','30d']
  6. * timespan :: The default options selected for the relative view. Default: '15m'
  7. * timefield :: The field in which time is stored in the document.
  8. * refresh: Object containing refresh parameters
  9. * enable :: true/false, enable auto refresh by default. Default: false
  10. * interval :: Seconds between auto refresh. Default: 30
  11. * min :: The lowest interval a user may set
  12. */
  13. define([
  14. 'angular',
  15. 'app',
  16. 'lodash',
  17. 'moment',
  18. 'kbn'
  19. ],
  20. function (angular, app, _, moment, kbn) {
  21. 'use strict';
  22. var module = angular.module('grafana.panels.timepicker', []);
  23. app.useModule(module);
  24. module.controller('timepicker', function($scope, $rootScope, timeSrv) {
  25. $scope.panelMeta = {
  26. status : "Stable",
  27. description : ""
  28. };
  29. // Set and populate defaults
  30. var _d = {
  31. status : "Stable",
  32. time_options : ['5m','15m','1h','6h','12h','24h','2d','7d','30d'],
  33. refresh_intervals : ['5s','10s','30s','1m','5m','15m','30m','1h','2h','1d'],
  34. };
  35. _.defaults($scope.panel,_d);
  36. // ng-pattern regexs
  37. $scope.patterns = {
  38. date: /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/,
  39. hour: /^([01]?[0-9]|2[0-3])$/,
  40. minute: /^[0-5][0-9]$/,
  41. second: /^[0-5][0-9]$/,
  42. millisecond: /^[0-9]*$/
  43. };
  44. $scope.timeSrv = timeSrv;
  45. $scope.$on('refresh', function() {
  46. $scope.init();
  47. });
  48. $scope.init = function() {
  49. var time = timeSrv.timeRange(true);
  50. if(time) {
  51. $scope.panel.now = timeSrv.timeRange(false).to === "now" ? true : false;
  52. $scope.time = getScopeTimeObj(time.from,time.to);
  53. }
  54. };
  55. $scope.customTime = function() {
  56. // Assume the form is valid since we're setting it to something valid
  57. $scope.input.$setValidity("dummy", true);
  58. $scope.temptime = cloneTime($scope.time);
  59. $scope.temptime.now = $scope.panel.now;
  60. $scope.temptime.from.date.setHours(0,0,0,0);
  61. $scope.temptime.to.date.setHours(0,0,0,0);
  62. // Date picker needs the date to be at the start of the day
  63. if(new Date().getTimezoneOffset() < 0) {
  64. $scope.temptime.from.date = moment($scope.temptime.from.date).add('days',1).toDate();
  65. $scope.temptime.to.date = moment($scope.temptime.to.date).add('days',1).toDate();
  66. }
  67. $scope.emitAppEvent('show-dash-editor', {src: 'app/panels/timepicker/custom.html', scope: $scope });
  68. };
  69. // Constantly validate the input of the fields. This function does not change any date variables
  70. // outside of its own scope
  71. $scope.validate = function(time) {
  72. // Assume the form is valid. There is a hidden dummy input for invalidating it programatically.
  73. $scope.input.$setValidity("dummy", true);
  74. var _from = datepickerToLocal(time.from.date),
  75. _to = datepickerToLocal(time.to.date),
  76. _t = time;
  77. if($scope.input.$valid) {
  78. _from.setHours(_t.from.hour,_t.from.minute,_t.from.second,_t.from.millisecond);
  79. _to.setHours(_t.to.hour,_t.to.minute,_t.to.second,_t.to.millisecond);
  80. // Check that the objects are valid and to is after from
  81. if(isNaN(_from.getTime()) || isNaN(_to.getTime()) || _from.getTime() >= _to.getTime()) {
  82. $scope.input.$setValidity("dummy", false);
  83. return false;
  84. }
  85. } else {
  86. return false;
  87. }
  88. return { from: _from, to:_to, now: time.now};
  89. };
  90. $scope.setNow = function() {
  91. $scope.time.to = getTimeObj(new Date());
  92. };
  93. /*
  94. time : {
  95. from: Date
  96. to: Date
  97. }
  98. */
  99. $scope.setAbsoluteTimeFilter = function (time) {
  100. // Create filter object
  101. var _filter = _.clone(time);
  102. if(time.now) {
  103. _filter.to = "now";
  104. }
  105. // Set the filter
  106. $scope.panel.filter_id = timeSrv.setTime(_filter);
  107. // Update our representation
  108. $scope.time = getScopeTimeObj(time.from,time.to);
  109. };
  110. $scope.setRelativeFilter = function(timespan) {
  111. $scope.panel.now = true;
  112. var _filter = {
  113. from : "now-"+timespan,
  114. to: "now"
  115. };
  116. timeSrv.setTime(_filter);
  117. $scope.time = getScopeTimeObj(kbn.parseDate(_filter.from),new Date());
  118. };
  119. var pad = function(n, width, z) {
  120. z = z || '0';
  121. n = n.toString();
  122. return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  123. };
  124. var cloneTime = function(time) {
  125. var _n = {
  126. from: _.clone(time.from),
  127. to: _.clone(time.to)
  128. };
  129. // Create new dates as _.clone is shallow.
  130. _n.from.date = new Date(_n.from.date);
  131. _n.to.date = new Date(_n.to.date);
  132. return _n;
  133. };
  134. var getScopeTimeObj = function(from,to) {
  135. var model = { from: getTimeObj(from), to: getTimeObj(to), };
  136. if (model.from.date) {
  137. model.tooltip = $scope.dashboard.formatDate(model.from.date) + ' <br>to<br>';
  138. model.tooltip += $scope.dashboard.formatDate(model.to.date);
  139. }
  140. else {
  141. model.tooltip = 'Click to set time filter';
  142. }
  143. if (timeSrv.time) {
  144. if ($scope.panel.now) {
  145. model.rangeString = moment(model.from.date).fromNow() + ' to ' +
  146. moment(model.to.date).fromNow();
  147. }
  148. else {
  149. model.rangeString = $scope.dashboard.formatDate(model.from.date, 'MMM D, YYYY HH:mm:ss') + ' to ' +
  150. $scope.dashboard.formatDate(model.to.date, 'MMM D, YYYY HH:mm:ss');
  151. }
  152. }
  153. return model;
  154. };
  155. var getTimeObj = function(date) {
  156. return {
  157. date: new Date(date),
  158. hour: pad(date.getHours(),2),
  159. minute: pad(date.getMinutes(),2),
  160. second: pad(date.getSeconds(),2),
  161. millisecond: pad(date.getMilliseconds(),3)
  162. };
  163. };
  164. // Do not use the results of this function unless you plan to use setHour/Minutes/etc on the result
  165. var datepickerToLocal = function(date) {
  166. date = moment(date).clone().toDate();
  167. return moment(new Date(date.getTime() + date.getTimezoneOffset() * 60000)).toDate();
  168. };
  169. });
  170. });