github.com/nsqio/nsq@v1.3.0/nsqadmin/static/js/views/counter.js (about)

     1  var _ = require('underscore');
     2  var $ = require('jquery');
     3  
     4  var AppState = require('../app_state');
     5  
     6  var BaseView = require('./base');
     7  
     8  var CounterView = BaseView.extend({
     9      className: 'counter container-fluid',
    10  
    11      template: require('./counter.hbs'),
    12  
    13      initialize: function() {
    14          BaseView.prototype.initialize.apply(this, arguments);
    15          this.listenTo(AppState, 'change:graph_interval', function() {
    16              clearTimeout(this.poller);
    17              clearTimeout(this.animator);
    18              this.render();
    19              this.start();
    20          });
    21          this.start();
    22      },
    23  
    24      remove: function() {
    25          clearTimeout(this.poller);
    26          clearTimeout(this.animator);
    27          BaseView.prototype.remove.apply(this, arguments);
    28      },
    29  
    30      start: function() {
    31          this.poller = null;
    32          this.animator = null;
    33          this.delta = 0;
    34          this.looping = false;
    35          this.targetPollInterval = 10000;
    36          this.currentNum = -1;
    37          this.lastNum = 0;
    38          this.interval = 100;
    39          this.graphUrl = null;
    40          this.updateStats();
    41      },
    42  
    43      startLoop: function(i) {
    44          this.interval = i;
    45          this.poller = setTimeout(this.updateStats.bind(this), i);
    46      },
    47  
    48      updateStats: function() {
    49          $.get(AppState.apiPath('/counter')).done(function(data) {
    50              if (this.removed) {
    51                  return;
    52              }
    53  
    54              var num = _.reduce(data['stats'], function(n, v) {
    55                  return n + v['message_count'];
    56              }, 0);
    57  
    58              if (this.currentNum === -1) {
    59                  // seed the display
    60                  this.currentNum = num;
    61                  this.lastNum = num;
    62                  this.writeCounts(this.currentNum);
    63              } else if (num > this.lastNum) {
    64                  var delta = num - this.lastNum;
    65                  this.delta = (delta / (this.interval / 1000)) / 50;
    66                  this.lastNum = num;
    67  
    68                  if (!this.animator) {
    69                      this.displayFrame();
    70                  }
    71              }
    72  
    73              var newInterval = this.interval;
    74              if (newInterval < this.targetPollInterval) {
    75                  newInterval = this.interval + 1000;
    76              }
    77              this.startLoop(newInterval);
    78  
    79              $('#warning, #error').hide();
    80              if (data['message'] !== '') {
    81                  $('#warning .alert').text(data['message']);
    82                  $('#warning').show();
    83              }
    84          }.bind(this)).fail(function(jqXHR) {
    85              if (this.removed) {
    86                  return;
    87              }
    88  
    89              clearTimeout(this.animator);
    90              this.animator = null;
    91  
    92              this.startLoop(10000);
    93  
    94              this.handleAJAXError(jqXHR);
    95          }.bind(this));
    96  
    97          if ($('#big_graph').length) {
    98              if (!this.graphUrl) {
    99                  this.graphUrl = $('#big_graph').attr('src');
   100              }
   101              var uniq = Math.floor(Math.random() * 1000000);
   102              $('#big_graph').attr('src', this.graphUrl + '&_uniq=' + uniq);
   103          }
   104      },
   105  
   106      displayFrame: function() {
   107          this.currentNum = Math.min(this.currentNum + this.delta, this.lastNum);
   108          this.writeCounts(this.currentNum);
   109          if (this.currentNum < this.lastNum) {
   110              this.animator = setTimeout(this.displayFrame.bind(this), 1000 / 60);
   111          } else {
   112              this.animator = null;
   113          }
   114      },
   115  
   116      writeCounts: function(c) {
   117          var text = parseInt(c, 10).toString();
   118          var node = $('.numbers')[0];
   119          var n = $('.numbers .number');
   120          for (var i = 0; i < text.length; i++) {
   121              var v = text.charAt(i);
   122              if (n.length > i) {
   123                  var el = $(n[i]);
   124                  el.show();
   125                  el.find('.top').text(v);
   126                  el.find('.bottom').text(v);
   127              } else {
   128                  $(node).append('<span class="number"><span class="top">' + v +
   129                      '</span><span class="bottom">' + v + '</span></span>\n');
   130              }
   131          }
   132          $('.numbers .number').each(function(ii, vv) {
   133              if (ii >= text.length) {
   134                  $(vv).hide();
   135              }
   136          });
   137      }
   138  });
   139  
   140  module.exports = CounterView;