panel/LogView.js

   1 /*
   2  * Display log entries in a panel with scrollbar
   3  * The log entries are automatically refreshed via a background task,
   4  * with newest entries comming at the bottom
   5  */
   6 Ext.define('Proxmox.panel.LogView', {
   7     extend: 'Ext.panel.Panel',
   8
   9     alias: ['widget.proxmoxLogView'],
  10
  11     pageSize: 500,
  12
  13     lineHeight: 16,
  14
  15     viewInfo: undefined,
  16
  17     scrollToEnd: true,
  18
  19     autoScroll: true,
  20
  21     layout: 'auto',
  22
  23     bodyPadding: 5,
  24
  25     getMaxDown: function(scrollToEnd) {
  26         var me = this;
  27
  28         var target = me.getTargetEl();
  29         var dom = target.dom;
  30         if (scrollToEnd) {
  31             dom.scrollTop = dom.scrollHeight - dom.clientHeight;
  32         }
  33
  34         var maxDown = dom.scrollHeight - dom.clientHeight -
  35             dom.scrollTop;
  36
  37         return maxDown;
  38     },
  39
  40     updateView: function(start, end, total, text) {
  41         var me = this;
  42
  43         if (me.destroyed) { // return if element is not there anymore
  44             return;
  45         }
  46
  47         var el = me.dataCmp.el;
  48
  49         if (me.viewInfo && me.viewInfo.start === start &&
  50             me.viewInfo.end === end && me.viewInfo.total === total &&
  51             me.viewInfo.textLength === text.length) {
  52             return; // same content
  53         }
  54
  55         var maxDown = me.getMaxDown();
  56         var scrollToEnd = (maxDown <= 0) && me.scrollToEnd;
  57
  58         el.setStyle('padding-top', (start*me.lineHeight).toString() + 'px');
  59         el.update(text);
  60         me.dataCmp.setHeight(total*me.lineHeight);
  61
  62         if (scrollToEnd) {
  63             me.getMaxDown(true);
  64         }
  65
  66         me.viewInfo = {
  67             start: start,
  68             end: end,
  69             total: total,
  70             textLength:  text.length
  71         };
  72     },
  73
  74     doAttemptLoad: function(start) {
  75         var me = this;
  76
  77         var req_params = {
  78             start: start,
  79             limit: me.pageSize
  80         };
  81
  82         if (me.log_select_timespan) {
  83             // always show log until the end of the selected day
  84             req_params.until = Ext.Date.format(me.until_date, 'Y-m-d') + ' 23:59:59';
  85             req_params.since = Ext.Date.format(me.since_date, 'Y-m-d');
  86         }
  87
  88         Proxmox.Utils.API2Request({
  89             url: me.url,
  90             params: req_params,
  91             method: 'GET',
  92             success: function(response) {
  93                 Proxmox.Utils.setErrorMask(me, false);
  94                 var list = response.result.data;
  95                 var total = response.result.total;
  96                 var first = 0, last = 0;
  97                 var text = '';
  98                 Ext.Array.each(list, function(item) {
  99                     if (!first|| item.n < first) {
 100                         first = item.n;
 101                     }
 102                     if (!last || item.n > last) {
 103                         last = item.n;
 104                     }
 105                     text = text + Ext.htmlEncode(item.t) + "<br>";
 106                 });
 107
 108                 if (first && last && total) {
 109                     me.updateView(first -1 , last -1, total, text);
 110                 } else {
 111                     me.updateView(0, 0, 0, '');
 112                 }
 113             },
 114             failure: function(response) {
 115                 var msg = response.htmlStatus;
 116                 Proxmox.Utils.setErrorMask(me, msg);
 117             }
 118         });
 119     },
 120
 121     attemptLoad: function(start) {
 122         var me = this;
 123         if (!me.loadTask) {
 124             me.loadTask = Ext.create('Ext.util.DelayedTask', me.doAttemptLoad, me, []);
 125         }
 126         me.loadTask.delay(200, me.doAttemptLoad, me, [start]);
 127     },
 128
 129     requestUpdate: function(top, force) {
 130         var me = this;
 131
 132         if (top === undefined) {
 133             var target = me.getTargetEl();
 134             top = target.dom.scrollTop;
 135         }
 136
 137         var viewStart = parseInt((top / me.lineHeight) - 1, 10);
 138         if (viewStart < 0) {
 139             viewStart = 0;
 140         }
 141         var viewEnd = parseInt(((top + me.getHeight())/ me.lineHeight) + 1, 10);
 142         var info = me.viewInfo;
 143
 144         if (info && !force) {
 145             if (viewStart >= info.start && viewEnd <= info.end) {
 146                 return;
 147             }
 148         }
 149
 150         var line = parseInt((top / me.lineHeight) - (me.pageSize / 2) + 10, 10);
 151         if (line < 0) {
 152             line = 0;
 153         }
 154
 155         me.attemptLoad(line);
 156     },
 157
 158     afterRender: function() {
 159         var me = this;
 160
 161         me.callParent(arguments);
 162
 163         Ext.Function.defer(function() {
 164             var target = me.getTargetEl();
 165             target.on('scroll',  function(e) {
 166                 me.requestUpdate();
 167             });
 168             me.requestUpdate(0);
 169         }, 20);
 170     },
 171
 172     initComponent : function() {
 173         /*jslint confusion: true */
 174
 175         var me = this;
 176
 177         if (!me.url) {
 178             throw "no url specified";
 179         }
 180
 181        // show logs from today back to 3 days ago per default
 182        me.until_date = new Date();
 183        me.since_date = new Date();
 184        me.since_date.setDate(me.until_date.getDate() - 3);
 185
 186         me.dataCmp = Ext.create('Ext.Component', {
 187             style: 'font:normal 11px tahoma, arial, verdana, sans-serif;' +
 188                 'line-height: ' + me.lineHeight.toString() + 'px; white-space: pre;'
 189         });
 190
 191         me.task = Ext.TaskManager.start({
 192             run: function() {
 193                 if (!me.isVisible() || !me.scrollToEnd || !me.viewInfo) {
 194                     return;
 195                 }
 196
 197                 var maxDown = me.getMaxDown();
 198                 if (maxDown > 0) {
 199                     return;
 200                 }
 201
 202                 me.requestUpdate(undefined, true);
 203             },
 204             interval: 1000
 205         });
 206
 207         Ext.apply(me, {
 208             items: me.dataCmp,
 209             listeners: {
 210                 destroy: function() {
 211                     Ext.TaskManager.stop(me.task);
 212                 }
 213             }
 214         });
 215
 216         if (me.log_select_timespan) {
 217             me.tbar = ['->','Since: ',
 218                        {
 219                            xtype: 'datefield',
 220                            maxValue: me.until_date,
 221                            value: me.since_date,
 222                            name: 'since_date',
 223                            format: 'Y-m-d',
 224                            listeners: {
 225                                select: function(field, date) {
 226                                    me.since_date_selected = date;
 227                                    var until_field = field.up().down('field[name=until_date]');
 228                                    if (date > until_field.getValue()) {
 229                                        until_field.setValue(date);
 230                                    }
 231                                }
 232                            }
 233                        },
 234                        'Until: ',
 235                        {
 236                            xtype: 'datefield',
 237                            maxValue: me.until_date,
 238                            value: me.until_date,
 239                            name: 'until_date',
 240                            format: 'Y-m-d',
 241                            listeners: {
 242                                select: function(field, date) {
 243                                    var since_field = field.up().down('field[name=since_date]');
 244                                    if (date < since_field.getValue()) {
 245                                        since_field.setValue(date);
 246                                    }
 247                                }
 248                            }
 249                        },
 250                        {
 251                            xtype: 'button',
 252                            text: 'Update',
 253                            handler: function() {
 254                                var until_field = me.down('field[name=until_date]');
 255                                var since_field = me.down('field[name=since_date]');
 256                                if (until_field.getValue() < since_field.getValue()) {
 257                                    Ext.Msg.alert('Error',
 258                                                  'Since date must be less equal than Until date.');
 259                                    until_field.setValue(me.until_date);
 260                                    since_field.setValue(me.since_date);
 261                                } else {
 262                                    me.until_date = until_field.getValue();
 263                                    me.since_date = since_field.getValue();
 264                                    me.requestUpdate();
 265                                }
 266                            }
 267                        }
 268                       ];
 269         }
 270
 271
 272         me.callParent();
 273     }
 274 });