]>
Commit | Line | Data |
---|---|---|
de2e10b5 DM |
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 | ||
9 | alias: ['widget.proxmoxLogView'], | |
10 | ||
11 | pageSize: 500, | |
12 | ||
13 | lineHeight: 16, | |
14 | ||
15 | viewInfo: undefined, | |
16 | ||
17 | scrollToEnd: true, | |
18 | ||
19 | autoScroll: true, | |
20 | ||
21 | layout: 'auto', | |
22 | ||
23 | bodyPadding: 5, | |
24 | ||
25 | getMaxDown: function(scrollToEnd) { | |
26 | var me = this; | |
27 | ||
28 | var target = me.getTargetEl(); | |
29 | var dom = target.dom; | |
30 | if (scrollToEnd) { | |
31 | dom.scrollTop = dom.scrollHeight - dom.clientHeight; | |
32 | } | |
33 | ||
34 | var maxDown = dom.scrollHeight - dom.clientHeight - | |
35 | dom.scrollTop; | |
36 | ||
37 | return maxDown; | |
38 | }, | |
39 | ||
40 | updateView: function(start, end, total, text) { | |
41 | var me = this; | |
de2e10b5 DM |
42 | |
43 | if (me.destroyed) { // return if element is not there anymore | |
44 | return; | |
45 | } | |
46 | ||
cf4ecb2b DC |
47 | var el = me.dataCmp.el; |
48 | ||
de2e10b5 DM |
49 | if (me.viewInfo && me.viewInfo.start === start && |
50 | me.viewInfo.end === end && me.viewInfo.total === total && | |
51 | me.viewInfo.textLength === text.length) { | |
52 | return; // same content | |
53 | } | |
54 | ||
55 | var maxDown = me.getMaxDown(); | |
56 | var scrollToEnd = (maxDown <= 0) && me.scrollToEnd; | |
57 | ||
58 | el.setStyle('padding-top', (start*me.lineHeight).toString() + 'px'); | |
59 | el.update(text); | |
60 | me.dataCmp.setHeight(total*me.lineHeight); | |
61 | ||
62 | if (scrollToEnd) { | |
63 | me.getMaxDown(true); | |
64 | } | |
65 | ||
66 | me.viewInfo = { | |
67 | start: start, | |
68 | end: end, | |
69 | total: total, | |
70 | textLength: text.length | |
71 | }; | |
72 | }, | |
73 | ||
74 | doAttemptLoad: function(start) { | |
75 | var me = this; | |
76 | ||
77 | var req_params = { | |
78 | start: start, | |
79 | limit: me.pageSize | |
80 | }; | |
81 | ||
82 | if (me.log_select_timespan) { | |
83 | // always show log until the end of the selected day | |
84 | req_params.until = Ext.Date.format(me.until_date, 'Y-m-d') + ' 23:59:59'; | |
85 | req_params.since = Ext.Date.format(me.since_date, 'Y-m-d'); | |
86 | } | |
87 | ||
88 | Proxmox.Utils.API2Request({ | |
89 | url: me.url, | |
90 | params: req_params, | |
91 | method: 'GET', | |
92 | success: function(response) { | |
93 | Proxmox.Utils.setErrorMask(me, false); | |
94 | var list = response.result.data; | |
95 | var total = response.result.total; | |
96 | var first = 0, last = 0; | |
97 | var text = ''; | |
98 | Ext.Array.each(list, function(item) { | |
99 | if (!first|| item.n < first) { | |
100 | first = item.n; | |
101 | } | |
102 | if (!last || item.n > last) { | |
103 | last = item.n; | |
104 | } | |
105 | text = text + Ext.htmlEncode(item.t) + "<br>"; | |
106 | }); | |
107 | ||
108 | if (first && last && total) { | |
109 | me.updateView(first -1 , last -1, total, text); | |
110 | } else { | |
111 | me.updateView(0, 0, 0, ''); | |
112 | } | |
113 | }, | |
114 | failure: function(response) { | |
115 | var msg = response.htmlStatus; | |
116 | Proxmox.Utils.setErrorMask(me, msg); | |
117 | } | |
118 | }); | |
119 | }, | |
120 | ||
121 | attemptLoad: function(start) { | |
122 | var me = this; | |
123 | if (!me.loadTask) { | |
124 | me.loadTask = Ext.create('Ext.util.DelayedTask', me.doAttemptLoad, me, []); | |
125 | } | |
126 | me.loadTask.delay(200, me.doAttemptLoad, me, [start]); | |
127 | }, | |
128 | ||
129 | requestUpdate: function(top, force) { | |
130 | var me = this; | |
131 | ||
132 | if (top === undefined) { | |
133 | var target = me.getTargetEl(); | |
134 | top = target.dom.scrollTop; | |
135 | } | |
136 | ||
137 | var viewStart = parseInt((top / me.lineHeight) - 1, 10); | |
138 | if (viewStart < 0) { | |
139 | viewStart = 0; | |
140 | } | |
141 | var viewEnd = parseInt(((top + me.getHeight())/ me.lineHeight) + 1, 10); | |
142 | var info = me.viewInfo; | |
143 | ||
144 | if (info && !force) { | |
145 | if (viewStart >= info.start && viewEnd <= info.end) { | |
146 | return; | |
147 | } | |
148 | } | |
149 | ||
150 | var line = parseInt((top / me.lineHeight) - (me.pageSize / 2) + 10, 10); | |
151 | if (line < 0) { | |
152 | line = 0; | |
153 | } | |
154 | ||
155 | me.attemptLoad(line); | |
156 | }, | |
157 | ||
158 | afterRender: function() { | |
159 | var me = this; | |
160 | ||
161 | me.callParent(arguments); | |
162 | ||
163 | Ext.Function.defer(function() { | |
164 | var target = me.getTargetEl(); | |
165 | target.on('scroll', function(e) { | |
166 | me.requestUpdate(); | |
167 | }); | |
168 | me.requestUpdate(0); | |
169 | }, 20); | |
170 | }, | |
171 | ||
172 | initComponent : function() { | |
173 | /*jslint confusion: true */ | |
174 | ||
175 | var me = this; | |
176 | ||
177 | if (!me.url) { | |
178 | throw "no url specified"; | |
179 | } | |
180 | ||
181 | // show logs from today back to 3 days ago per default | |
182 | me.until_date = new Date(); | |
183 | me.since_date = new Date(); | |
184 | me.since_date.setDate(me.until_date.getDate() - 3); | |
185 | ||
186 | me.dataCmp = Ext.create('Ext.Component', { | |
187 | style: 'font:normal 11px tahoma, arial, verdana, sans-serif;' + | |
188 | 'line-height: ' + me.lineHeight.toString() + 'px; white-space: pre;' | |
189 | }); | |
190 | ||
191 | me.task = Ext.TaskManager.start({ | |
192 | run: function() { | |
193 | if (!me.isVisible() || !me.scrollToEnd || !me.viewInfo) { | |
194 | return; | |
195 | } | |
196 | ||
197 | var maxDown = me.getMaxDown(); | |
198 | if (maxDown > 0) { | |
199 | return; | |
200 | } | |
201 | ||
202 | me.requestUpdate(undefined, true); | |
203 | }, | |
204 | interval: 1000 | |
205 | }); | |
206 | ||
207 | Ext.apply(me, { | |
208 | items: me.dataCmp, | |
209 | listeners: { | |
210 | destroy: function() { | |
211 | Ext.TaskManager.stop(me.task); | |
212 | } | |
213 | } | |
214 | }); | |
215 | ||
216 | if (me.log_select_timespan) { | |
217 | me.tbar = ['->','Since: ', | |
218 | { | |
219 | xtype: 'datefield', | |
220 | maxValue: me.until_date, | |
221 | value: me.since_date, | |
222 | name: 'since_date', | |
223 | format: 'Y-m-d', | |
224 | listeners: { | |
225 | select: function(field, date) { | |
226 | me.since_date_selected = date; | |
227 | var until_field = field.up().down('field[name=until_date]'); | |
228 | if (date > until_field.getValue()) { | |
229 | until_field.setValue(date); | |
230 | } | |
231 | } | |
232 | } | |
233 | }, | |
234 | 'Until: ', | |
235 | { | |
236 | xtype: 'datefield', | |
237 | maxValue: me.until_date, | |
238 | value: me.until_date, | |
239 | name: 'until_date', | |
240 | format: 'Y-m-d', | |
241 | listeners: { | |
242 | select: function(field, date) { | |
243 | var since_field = field.up().down('field[name=since_date]'); | |
244 | if (date < since_field.getValue()) { | |
245 | since_field.setValue(date); | |
246 | } | |
247 | } | |
248 | } | |
249 | }, | |
250 | { | |
251 | xtype: 'button', | |
252 | text: 'Update', | |
253 | handler: function() { | |
254 | var until_field = me.down('field[name=until_date]'); | |
255 | var since_field = me.down('field[name=since_date]'); | |
256 | if (until_field.getValue() < since_field.getValue()) { | |
257 | Ext.Msg.alert('Error', | |
258 | 'Since date must be less equal than Until date.'); | |
259 | until_field.setValue(me.until_date); | |
260 | since_field.setValue(me.since_date); | |
261 | } else { | |
262 | me.until_date = until_field.getValue(); | |
263 | me.since_date = since_field.getValue(); | |
264 | me.requestUpdate(); | |
265 | } | |
266 | } | |
267 | } | |
268 | ]; | |
269 | } | |
270 | ||
271 | ||
272 | me.callParent(); | |
273 | } | |
274 | }); |