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 coming at the bottom
   5  */
   6 Ext.define('Proxmox.panel.LogView', {
   7     extend: 'Ext.panel.Panel',
   8     xtype: 'proxmoxLogView',
   9
  10     pageSize: 510,
  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(), viewModel = me.getViewModel();
 135
 136             let limit = viewModel.get('params.limit');
 137             let total = viewModel.get('data.total');
 138
 139             // heuristic: scroll up? -> load more in front; scroll down? -> load more at end
 140             let startRatio = view.lastTargetLine && view.lastTargetLine > targetLine ? 2/3 : 1/3;
 141             view.lastTargetLine = targetLine;
 142
 143             let newStart = scrolledToBottom
 144                 ? Math.trunc(total - limit, 10)
 145                 : Math.trunc(targetLine - (startRatio * limit) + 10);
 146
 147             viewModel.set('params.start', Math.max(newStart, 0));
 148
 149             view.loadTask.delay(200);
 150         },
 151
 152         onScroll: function(x, y) {
 153             let me = this;
 154             let view = me.getView(), viewModel = me.getViewModel();
 155
 156             let line = view.getScrollY() / view.lineHeight;
 157             let viewLines = view.getHeight() / view.lineHeight;
 158
 159             let viewStart = Math.max(Math.trunc(line - 1 - view.viewBuffer), 0);
 160             let viewEnd = Math.trunc(line + viewLines + 1 + view.viewBuffer);
 161
 162             let { start, limit } = viewModel.get('params');
 163
 164             let margin = start < 20 ? 0 : 20;
 165
 166             if (viewStart < start + margin || viewEnd > start + limit - margin) {
 167                 me.updateStart(false, line);
 168             }
 169         },
 170
 171         init: function(view) {
 172             let me = this;
 173
 174             if (!view.url) {
 175                 throw "no url specified";
 176             }
 177
 178             let viewModel = this.getViewModel();
 179             let since = new Date();
 180             since.setDate(since.getDate() - 3);
 181             viewModel.set('until', new Date());
 182             viewModel.set('since', since);
 183             viewModel.set('params.limit', view.pageSize);
 184             viewModel.set('hide_timespan', !view.log_select_timespan);
 185             me.lookup('content').setStyle('line-height', `${view.lineHeight}px`);
 186
 187             view.loadTask = new Ext.util.DelayedTask(me.doLoad, me);
 188
 189             me.updateParams();
 190             view.task = Ext.TaskManager.start({
 191                 run: () => {
 192                     if (!view.isVisible() || !view.scrollToEnd) {
 193                         return;
 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: 510,
 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 of the scroller in
 240             // the viewcontroller (extjs bug?), nor does the panel have a 'scroll' event'
 241             scroll: {
 242                 fn: function(scroller, x, y) {
 243                     let controller = this.component.getController();
 244                     if (controller) { // on destroy, controller can be gone
 245                         controller.onScroll(x, y);
 246                     }
 247                 },
 248                 buffer: 200,
 249             },
 250         },
 251     },
 252
 253     tbar: {
 254         bind: {
 255             hidden: '{hide_timespan}',
 256         },
 257         items: [
 258             '->',
 259             'Since: ',
 260             {
 261                 xtype: 'datefield',
 262                 name: 'since_date',
 263                 reference: 'since',
 264                 format: 'Y-m-d',
 265                 bind: {
 266                     value: '{since}',
 267                     maxValue: '{until}',
 268                 },
 269             },
 270             'Until: ',
 271             {
 272                 xtype: 'datefield',
 273                 name: 'until_date',
 274                 reference: 'until',
 275                 format: 'Y-m-d',
 276                 bind: {
 277                     value: '{until}',
 278                     minValue: '{since}',
 279                 },
 280             },
 281             {
 282                 xtype: 'button',
 283                 text: 'Update',
 284                 handler: 'updateParams',
 285             },
 286         ],
 287     },
 288
 289     items: [
 290         {
 291             xtype: 'box',
 292             reference: 'content',
 293             style: {
 294                 font: 'normal 11px tahoma, arial, verdana, sans-serif',
 295                 'white-space': 'pre',
 296             },
 297         },
 298     ],
 299 });