src/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     xtype: 'proxmoxLogView',
   9
  10     pageSize: 500,
  11     viewBuffer: 50,
  12     lineHeight: 16,
  13
  14     scrollToEnd: true,
  15
  16     // callback for load failure, used for ceph
  17     failCallback: undefined,
  18
  19     controller: {
  20         xclass: 'Ext.app.ViewController',
  21
  22         updateParams: function() {
  23             let me = this;
  24             let viewModel = me.getViewModel();
  25             let since = viewModel.get('since');
  26             let until = viewModel.get('until');
  27             if (viewModel.get('hide_timespan')) {
  28                 return;
  29             }
  30
  31             if (since > until) {
  32                 Ext.Msg.alert('Error', 'Since date must be less equal than Until date.');
  33                 return;
  34             }
  35
  36             viewModel.set('params.since', Ext.Date.format(since, 'Y-m-d'));
  37             viewModel.set('params.until', Ext.Date.format(until, 'Y-m-d') + ' 23:59:59');
  38             me.getView().loadTask.delay(200);
  39         },
  40
  41         scrollPosBottom: function() {
  42             let view = this.getView();
  43             let pos = view.getScrollY();
  44             let maxPos = view.getScrollable().getMaxPosition().y;
  45             return maxPos - pos;
  46         },
  47
  48         updateView: function(lines, first, total) {
  49             let me = this;
  50             let view = me.getView();
  51             let viewModel = me.getViewModel();
  52             let content = me.lookup('content');
  53             let data = viewModel.get('data');
  54
  55             if (first === data.first && total === data.total && lines.length === data.lines) {
  56                 return; // same content, skip setting and scrolling
  57             }
  58             viewModel.set('data', {
  59                 first: first,
  60                 total: total,
  61                 lines: lines.length,
  62             });
  63
  64             let scrollPos = me.scrollPosBottom();
  65             let scrollToBottom = view.scrollToEnd && scrollPos <= 5;
  66
  67             if (!scrollToBottom) {
  68                 // so that we have the 'correct' height for the text
  69                 lines.length = total;
  70             }
  71
  72             content.update(lines.join('<br>'));
  73
  74             if (scrollToBottom) {
  75                 let scroller = view.getScrollable();
  76                 scroller.suspendEvent('scroll');
  77                 view.scrollTo(0, Infinity);
  78                 me.updateStart(true);
  79                 scroller.resumeEvent('scroll');
  80             }
  81         },
  82
  83         doLoad: function() {
  84             let me = this;
  85             if (me.running) {
  86                 me.requested = true;
  87                 return;
  88             }
  89             me.running = true;
  90             let view = me.getView();
  91             let viewModel = me.getViewModel();
  92             Proxmox.Utils.API2Request({
  93                 url: me.getView().url,
  94                 params: viewModel.get('params'),
  95                 method: 'GET',
  96                 success: function(response) {
  97                     Proxmox.Utils.setErrorMask(me, false);
  98                     let total = response.result.total;
  99                     let lines = [];
 100                     let first = Infinity;
 101
 102                     Ext.Array.each(response.result.data, function(line) {
 103                         if (first > line.n) {
 104                             first = line.n;
 105                         }
 106                         lines[line.n - 1] = Ext.htmlEncode(line.t);
 107                     });
 108
 109                     me.updateView(lines, first - 1, total);
 110                     me.running = false;
 111                     if (me.requested) {
 112                         me.requested = false;
 113                         view.loadTask.delay(200);
 114                     }
 115                 },
 116                 failure: function(response) {
 117                     if (view.failCallback) {
 118                         view.failCallback(response);
 119                     } else {
 120                         let msg = response.htmlStatus;
 121                         Proxmox.Utils.setErrorMask(me, msg);
 122                     }
 123                     me.running = false;
 124                     if (me.requested) {
 125                         me.requested = false;
 126                         view.loadTask.delay(200);
 127                     }
 128                 },
 129             });
 130         },
 131
 132         updateStart: function(scrolledToBottom, targetLine) {
 133             let me = this;
 134             let view = me.getView();
 135             let viewModel = me.getViewModel();
 136
 137             let limit = viewModel.get('params.limit');
 138
 139             if (scrolledToBottom) {
 140                 let total = viewModel.get('data.total');
 141                 viewModel.set('params.start',
 142                     Math.max(parseInt(total - limit, 10), 0));
 143             } else {
 144                 viewModel.set('params.start',
 145                     Math.max(parseInt(targetLine - (limit / 2) + 10, 10), 0));
 146             }
 147
 148             view.loadTask.delay(200);
 149         },
 150
 151         onScroll: function(x, y) {
 152             let me = this;
 153             let view = me.getView();
 154             let viewModel = me.getViewModel();
 155
 156             let lineHeight = view.lineHeight;
 157             let line = view.getScrollY()/lineHeight;
 158             let start = viewModel.get('params.start');
 159             let limit = viewModel.get('params.limit');
 160             let viewLines = view.getHeight()/lineHeight;
 161
 162             let viewStart = Math.max(parseInt(line - 1 - view.viewBuffer, 10), 0);
 163             let viewEnd = parseInt(line + viewLines + 1 + view.viewBuffer, 10);
 164
 165             if (viewStart < start || viewEnd > start+limit) {
 166                 me.updateStart(false, line);
 167             }
 168         },
 169
 170         init: function(view) {
 171             let me = this;
 172
 173             if (!view.url) {
 174                 throw "no url specified";
 175             }
 176
 177             let viewModel = this.getViewModel();
 178             let since = new Date();
 179             since.setDate(since.getDate() - 3);
 180             viewModel.set('until', new Date());
 181             viewModel.set('since', since);
 182             viewModel.set('params.limit', view.pageSize);
 183             viewModel.set('hide_timespan', !view.log_select_timespan);
 184             me.lookup('content').setStyle('line-height', view.lineHeight + 'px');
 185
 186             view.loadTask = new Ext.util.DelayedTask(me.doLoad, me);
 187
 188             me.updateParams();
 189             view.task = Ext.TaskManager.start({
 190                 run: function() {
 191                     if (!view.isVisible() || !view.scrollToEnd) {
 192                         return;
 193                     }
 194
 195                     if (me.scrollPosBottom() <= 5) {
 196                         view.loadTask.delay(200);
 197                     }
 198                 },
 199                 interval: 1000,
 200             });
 201         },
 202     },
 203
 204     onDestroy: function() {
 205         let me = this;
 206         me.loadTask.cancel();
 207         Ext.TaskManager.stop(me.task);
 208     },
 209
 210     // for user to initiate a load from outside
 211     requestUpdate: function() {
 212         let me = this;
 213         me.loadTask.delay(200);
 214     },
 215
 216     viewModel: {
 217         data: {
 218             until: null,
 219             since: null,
 220             hide_timespan: false,
 221             data: {
 222                 start: 0,
 223                 total: 0,
 224                 textlen: 0,
 225             },
 226             params: {
 227                 start: 0,
 228                 limit: 500,
 229             },
 230         },
 231     },
 232
 233     layout: 'auto',
 234     bodyPadding: 5,
 235     scrollable: {
 236         x: 'auto',
 237         y: 'auto',
 238         listeners: {
 239             // we have to have this here, since we cannot listen to events
 240             // of the scroller in the viewcontroller (extjs bug?), nor does
 241             // the panel have a 'scroll' event'
 242             scroll: {
 243                 fn: function(scroller, x, y) {
 244                     let controller = this.component.getController();
 245                     if (controller) { // on destroy, controller can be gone
 246                         controller.onScroll(x, y);
 247                     }
 248                 },
 249                 buffer: 200,
 250             },
 251         },
 252     },
 253
 254     tbar: {
 255         bind: {
 256             hidden: '{hide_timespan}',
 257         },
 258         items: [
 259             '->',
 260             'Since: ',
 261             {
 262                 xtype: 'datefield',
 263                 name: 'since_date',
 264                 reference: 'since',
 265                 format: 'Y-m-d',
 266                 bind: {
 267                     value: '{since}',
 268                     maxValue: '{until}',
 269                 },
 270             },
 271             'Until: ',
 272             {
 273                 xtype: 'datefield',
 274                 name: 'until_date',
 275                 reference: 'until',
 276                 format: 'Y-m-d',
 277                 bind: {
 278                     value: '{until}',
 279                     minValue: '{since}',
 280                 },
 281             },
 282             {
 283                 xtype: 'button',
 284                 text: 'Update',
 285                 handler: 'updateParams',
 286             },
 287         ],
 288     },
 289
 290     items: [
 291         {
 292             xtype: 'box',
 293             reference: 'content',
 294             style: {
 295                 font: 'normal 11px tahoma, arial, verdana, sans-serif',
 296                 'white-space': 'pre',
 297             },
 298         },
 299     ],
 300 });