add log viewer class
Copied from pve-manager
This commit is contained in:
Dietmar Maurer
parent
09d6446578
commit
de2e10b511
1
Makefile
1
Makefile
@ -20,6 +20,7 @@ JSSRC= \
|
||||
data/ObjectStore.js \
|
||||
data/TimezoneStore.js \
|
||||
grid/ObjectGrid.js \
|
||||
panel/LogView.js \
|
||||
window/Edit.js \
|
||||
window/TaskViewer.js \
|
||||
node/Tasks.js \
|
||||
|
||||
273
panel/LogView.js
Normal file
273
panel/LogView.js
Normal file
@ -0,0 +1,273 @@
|
||||
/*
|
||||
* 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('Proxmox.panel.LogView', {
|
||||
extend: 'Ext.panel.Panel',
|
||||
|
||||
alias: ['widget.proxmoxLogView'],
|
||||
|
||||
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;
|
||||
var el = me.dataCmp.el;
|
||||
|
||||
if (me.destroyed) { // return if element is not there anymore
|
||||
return;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
Proxmox.Utils.API2Request({
|
||||
url: me.url,
|
||||
params: req_params,
|
||||
method: 'GET',
|
||||
success: function(response) {
|
||||
Proxmox.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;
|
||||
Proxmox.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();
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user