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