[pve-devel] [RFC manager 25/28] use LogView from widget toolkit

Dominik Csapak d.csapak at proxmox.com
Fri Dec 15 10:23:35 CET 2017


On 12/11/2017 04:26 PM, Thomas Lamprecht wrote:
> Signed-off-by: Thomas Lamprecht <t.lamprecht at proxmox.com>
> ---
>   www/manager6/Makefile            |   1 -
>   www/manager6/grid/Replication.js |   2 +-
>   www/manager6/lxc/Config.js       |   2 +-
>   www/manager6/node/Config.js      |   6 +-
>   www/manager6/panel/LogView.js    | 274 ---------------------------------------
>   www/manager6/qemu/Config.js      |   2 +-
>   6 files changed, 6 insertions(+), 281 deletions(-)
>   delete mode 100644 www/manager6/panel/LogView.js
> 
> diff --git a/www/manager6/Makefile b/www/manager6/Makefile
> index ca204c9e..fb4cba39 100644
> --- a/www/manager6/Makefile
> +++ b/www/manager6/Makefile
> @@ -97,7 +97,6 @@ JSSRC= 				                 	\
>   	panel/IPSet.js					\
>   	panel/ConfigPanel.js				\
>   	grid/BackupView.js				\
> -	panel/LogView.js				\
>   	ceph/Pool.js					\
>   	ceph/OSD.js					\
>   	ceph/Monitor.js					\
> diff --git a/www/manager6/grid/Replication.js b/www/manager6/grid/Replication.js
> index 1998e28b..47353c5d 100644
> --- a/www/manager6/grid/Replication.js
> +++ b/www/manager6/grid/Replication.js
> @@ -198,7 +198,7 @@ Ext.define('PVE.grid.ReplicaView', {
>   	showLog: function(button, event, rec) {
>   	    var me = this.getView();
>   	    var controller = this;
> -	    var logView = Ext.create('PVE.panel.LogView', {
> +	    var logView = Ext.create('Proxmox.panel.LogView', {
>   		border: false,
>   		url: "/api2/extjs/nodes/" + me.nodename + "/replication/" + rec.data.id + "/log"
>   	    });
> diff --git a/www/manager6/lxc/Config.js b/www/manager6/lxc/Config.js
> index 58c59962..bc7f6cda 100644
> --- a/www/manager6/lxc/Config.js
> +++ b/www/manager6/lxc/Config.js
> @@ -262,7 +262,7 @@ Ext.define('PVE.lxc.Config', {
>   		    iconCls: 'fa fa-list',
>   		    onlineHelp: 'chapter_pve_firewall',
>   		    itemId: 'firewall-fwlog',
> -		    xtype: 'pveLogView',
> +		    xtype: 'proxmoxLogView',
>   		    url: '/api2/extjs' + base_url + '/firewall/log'
>   		}
>   	    );
> diff --git a/www/manager6/node/Config.js b/www/manager6/node/Config.js
> index 6bdffa44..f6e40acd 100644
> --- a/www/manager6/node/Config.js
> +++ b/www/manager6/node/Config.js
> @@ -182,7 +182,7 @@ Ext.define('PVE.node.Config', {
>   		groups: ['services'],
>   		disabled: !caps.nodes['Sys.Syslog'],
>   		itemId: 'syslog',
> -		xtype: 'pveLogView',
> +		xtype: 'proxmoxLogView',
>   		url: "/api2/extjs/nodes/" + nodename + "/syslog",
>   		log_select_timespan: 1
>   	    });
> @@ -279,7 +279,7 @@ Ext.define('PVE.node.Config', {
>   	if (caps.nodes['Sys.Syslog']) {
>   	    me.items.push(
>   		{
> -		    xtype: 'pveLogView',
> +		    xtype: 'proxmoxLogView',
>   		    title: gettext('Log'),
>   		    iconCls: 'fa fa-list',
>   		    groups: ['firewall'],
> @@ -293,7 +293,7 @@ Ext.define('PVE.node.Config', {
>   		    iconCls: 'fa fa-list',
>   		    groups: ['ceph'],
>   		    onlineHelp: 'chapter_pveceph',
> -		    xtype: 'pveLogView',
> +		    xtype: 'proxmoxLogView',
>   		    url: "/api2/extjs/nodes/" + nodename + "/ceph/log"
>   		});
>   	}
> diff --git a/www/manager6/panel/LogView.js b/www/manager6/panel/LogView.js
> deleted file mode 100644
> index 4be7c50f..00000000
> --- a/www/manager6/panel/LogView.js
> +++ /dev/null
> @@ -1,274 +0,0 @@
> -/*
> - * Display log entries in a panel with scrollbar
> - * The log entries are automatically refreshed via a background task,
> - * with newest entries comming at the bottom
> - */
> -Ext.define('PVE.panel.LogView', {
> -    extend: 'Ext.panel.Panel',
> -
> -    alias: ['widget.pveLogView'],
> -
> -    pageSize: 500,
> -
> -    lineHeight: 16,
> -
> -    viewInfo: undefined,
> -
> -    scrollToEnd: true,
> -
> -    autoScroll: true,
> -
> -    layout: 'auto',
> -
> -    bodyPadding: 5,
> -
> -    getMaxDown: function(scrollToEnd) {
> -        var me = this;
> -
> -	var target = me.getTargetEl();
> -	var dom = target.dom;
> -	if (scrollToEnd) {
> -	    dom.scrollTop = dom.scrollHeight - dom.clientHeight;
> -	}
> -
> -	var maxDown = dom.scrollHeight - dom.clientHeight -
> -	    dom.scrollTop;
> -
> -	return maxDown;
> -    },
> -
> -    updateView: function(start, end, total, text) {
> -        var me = this;
> -
> -	if (me.destroyed) { // return if element is not there anymore
> -	    return;
> -	}
> -
> -	var el = me.dataCmp.el;

here we have to port the destroyed check change (was put to the top for 
extjs 6.2)

> -
> -	if (me.viewInfo && me.viewInfo.start === start &&
> -	    me.viewInfo.end === end && me.viewInfo.total === total &&
> -	    me.viewInfo.textLength === text.length) {
> -	    return; // same content
> -	}
> -
> -	var maxDown = me.getMaxDown();
> -	var scrollToEnd = (maxDown <= 0) && me.scrollToEnd;
> -
> -	el.setStyle('padding-top', (start*me.lineHeight).toString() + 'px');
> -	el.update(text);
> -	me.dataCmp.setHeight(total*me.lineHeight);
> -
> -	if (scrollToEnd) {
> -	    me.getMaxDown(true);
> -	}
> -
> -	me.viewInfo = {
> -	    start: start,
> -	    end: end,
> -	    total: total,
> -	    textLength:  text.length
> -	};
> -    },
> -
> -    doAttemptLoad: function(start) {
> -        var me = this;
> -
> -	var req_params = {
> -	    start: start,
> -	    limit: me.pageSize
> -	};
> -
> -	if (me.log_select_timespan) {
> -	    // always show log until the end of the selected day
> -	    req_params.until = Ext.Date.format(me.until_date, 'Y-m-d') + ' 23:59:59';
> -	    req_params.since = Ext.Date.format(me.since_date, 'Y-m-d');
> -	}
> -
> -	PVE.Utils.API2Request({
> -	    url: me.url,
> -	    params: req_params,
> -	    method: 'GET',
> -	    success: function(response) {
> -		PVE.Utils.setErrorMask(me, false);
> -		var list = response.result.data;
> -		var total = response.result.total;
> -		var first = 0, last = 0;
> -		var text = '';
> -		Ext.Array.each(list, function(item) {
> -		    if (!first|| item.n < first) {
> -			first = item.n;
> -		    }
> -		    if (!last || item.n > last) {
> -			last = item.n;
> -		    }
> -		    text = text + Ext.htmlEncode(item.t) + "<br>";
> -		});
> -
> -		if (first && last && total) {
> -		    me.updateView(first -1 , last -1, total, text);
> -		} else {
> -		    me.updateView(0, 0, 0, '');
> -		}
> -	    },
> -	    failure: function(response) {
> -		var msg = response.htmlStatus;
> -		PVE.Utils.setErrorMask(me, msg);
> -	    }
> -	});
> -    },
> -
> -    attemptLoad: function(start) {
> -        var me = this;
> -        if (!me.loadTask) {
> -            me.loadTask = Ext.create('Ext.util.DelayedTask', me.doAttemptLoad, me, []);
> -        }
> -        me.loadTask.delay(200, me.doAttemptLoad, me, [start]);
> -    },
> -
> -    requestUpdate: function(top, force) {
> -	var me = this;
> -
> -	if (top === undefined) {
> -	    var target = me.getTargetEl();
> -	    top = target.dom.scrollTop;
> -	}
> -
> -	var viewStart = parseInt((top / me.lineHeight) - 1, 10);
> -	if (viewStart < 0) {
> -	    viewStart = 0;
> -	}
> -	var viewEnd = parseInt(((top + me.getHeight())/ me.lineHeight) + 1, 10);
> -	var info = me.viewInfo;
> -
> -	if (info && !force) {
> -	    if (viewStart >= info.start && viewEnd <= info.end) {
> -		return;
> -	    }
> -	}
> -
> -	var line = parseInt((top / me.lineHeight) - (me.pageSize / 2) + 10, 10);
> -	if (line < 0) {
> -	    line = 0;
> -	}
> -
> -	me.attemptLoad(line);
> -    },
> -
> -    afterRender: function() {
> -	var me = this;
> -
> -        me.callParent(arguments);
> -
> -	Ext.Function.defer(function() {
> -	    var target = me.getTargetEl();
> -	    target.on('scroll',  function(e) {
> -		me.requestUpdate();
> -	    });
> -	    me.requestUpdate(0);
> -	}, 20);
> -    },
> -
> -    initComponent : function() {
> -	/*jslint confusion: true */
> -
> -	var me = this;
> -
> -	if (!me.url) {
> -	    throw "no url specified";
> -	}
> -
> -       // show logs from today back to 3 days ago per default
> -       me.until_date = new Date();
> -       me.since_date = new Date();
> -       me.since_date.setDate(me.until_date.getDate() - 3);
> -
> -	me.dataCmp = Ext.create('Ext.Component', {
> -	    style: 'font:normal 11px tahoma, arial, verdana, sans-serif;' +
> -		'line-height: ' + me.lineHeight.toString() + 'px; white-space: pre;'
> -	});
> -
> -	me.task = Ext.TaskManager.start({
> -	    run: function() {
> -		if (!me.isVisible() || !me.scrollToEnd || !me.viewInfo) {
> -		    return;
> -		}
> -		
> -		var maxDown = me.getMaxDown();
> -		if (maxDown > 0) {
> -		    return;
> -		}
> -
> -		me.requestUpdate(undefined, true);
> -	    },
> -	    interval: 1000
> -	});
> -
> -	Ext.apply(me, {
> -	    items: me.dataCmp,
> -	    listeners: {
> -		destroy: function() {
> -		    Ext.TaskManager.stop(me.task);
> -		}
> -	    }
> -	});
> -
> -	if (me.log_select_timespan) {
> -	    me.tbar = ['->','Since: ',
> -		       {
> -			   xtype: 'datefield',
> -			   maxValue: me.until_date,
> -			   value: me.since_date,
> -			   name: 'since_date',
> -			   format: 'Y-m-d',
> -			   listeners: {
> -			       select: function(field, date) {
> -				   me.since_date_selected = date;
> -				   var until_field = field.up().down('field[name=until_date]');
> -				   if (date > until_field.getValue()) {
> -				       until_field.setValue(date);
> -				   }
> -			       }
> -			   }
> -		       },
> -		       'Until: ',
> -		       {
> -			   xtype: 'datefield',
> -			   maxValue: me.until_date,
> -			   value: me.until_date,
> -			   name: 'until_date',
> -			   format: 'Y-m-d',
> -			   listeners: {
> -			       select: function(field, date) {
> -				   var since_field = field.up().down('field[name=since_date]');
> -				   if (date < since_field.getValue()) {
> -				       since_field.setValue(date);
> -				   }
> -			       }
> -			   }
> -		       },
> -		       {
> -			   xtype: 'button',
> -			   text: 'Update',
> -			   handler: function() {
> -			       var until_field = me.down('field[name=until_date]');
> -			       var since_field = me.down('field[name=since_date]');
> -			       if (until_field.getValue() < since_field.getValue()) {
> -				   Ext.Msg.alert('Error',
> -						 'Since date must be less equal than Until date.');
> -				   until_field.setValue(me.until_date);
> -				   since_field.setValue(me.since_date);
> -			       } else {
> -				   me.until_date = until_field.getValue();
> -				   me.since_date = since_field.getValue();
> -				   me.requestUpdate();
> -			       }
> -			   }
> -		       }
> -		      ];
> -	}
> -
> -
> -	me.callParent();
> -    }
> -});
> diff --git a/www/manager6/qemu/Config.js b/www/manager6/qemu/Config.js
> index 3b75b885..cefba70e 100644
> --- a/www/manager6/qemu/Config.js
> +++ b/www/manager6/qemu/Config.js
> @@ -302,7 +302,7 @@ Ext.define('PVE.qemu.Config', {
>   		    iconCls: 'fa fa-list',
>   		    onlineHelp: 'chapter_pve_firewall',
>   		    itemId: 'firewall-fwlog',
> -		    xtype: 'pveLogView',
> +		    xtype: 'proxmoxLogView',
>   		    url: '/api2/extjs' + base_url + '/firewall/log'
>   		}
>   	    );
> 





More information about the pve-devel mailing list