[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