source: trunk/FACT++/dim/WebDID/did.js@ 17363

Last change on this file since 17363 was 14939, checked in by tbretz, 13 years ago
Added WebDID from v20r5
File size: 12.8 KB
Line 
1
2Ext.require(['*']);
3
4Ext.onReady(function(){
5
6
7 var randomNumber = Math.floor(Math.random()*10000001);
8
9 Ext.QuickTips.init();
10
11 var storeNodes = Ext.create('Ext.data.TreeStore', {
12 proxy: {
13 type: 'rest',
14 url: '/didData.json',
15 extraParams: {
16 browser: randomNumber
17 },
18 reader: {
19 type: 'json',
20 root: 'children'
21 }
22 },
23 autoLoad: false,
24 folderSort: true,
25 sorters: [{
26 property: 'text',
27 direction: 'ASC'
28 }],
29 root: {
30 text: 'TopNode',
31 id: 'src',
32 expanded: true
33 },
34 listeners: {
35 load: function(myStore, node, records, successful, eopts) {
36// if(node.get('text') == "Nodes")
37// document.write("I am here "+node.text+" "+node.get('text'));
38// node.expand();
39// serviceInfo.update(node.get('text'));
40// var node = getNodeById('Nodes');
41// node.expand();
42// node.expandChildren();
43// searchInfo.update("Expanding " +node.get('text'));
44 setTimeout(expandRoot, 100);
45 }
46// refresh: function(myStore, eopts) {
47// searchInfo.update("Refreshing");
48// node.expand(1);
49// serviceInfo.update("refresh "+myStore.getName());
50// }
51// beforeexpand: function( node, eopts) {
52// this.load({
53// params: {
54// node: node.text
55// }
56// });
57// }
58 }
59 });
60
61 function expandRoot()
62 {
63 var node;
64
65 node = storeNodes.getRootNode();
66 node.expandChildren();
67 }
68
69 var storeServices = Ext.create('Ext.data.TreeStore', {
70 proxy: {
71 type: 'rest',
72 url: '/didServices.json',
73 extraParams: {
74 browser: randomNumber
75 },
76 reader: {
77 type: 'json',
78 root: 'children'
79 }
80 },
81 folderSort: true,
82 sorters: [{
83 property: 'text',
84 direction: 'ASC'
85 }],
86 root: {
87 text: 'TopNode',
88 id: 'src',
89 expanded: true
90 },
91 listeners: {
92 load: function(myStore, node, records, successful, eopts) {
93 node.expand(1);
94 }
95 }
96 });
97
98 function clearServices()
99 {
100 storeServices.load();
101 serviceInfo.setVisible(1);
102 commandInfoArea.setVisible(0);
103 serviceInfo.update("");
104 }
105
106 var serviceInfo = Ext.create('Ext.Panel', {
107 layout: 'fit',
108 id: 'details-panel',
109 title: 'Service Info',
110 width: 580,
111 flex: 3,
112 autoScroll: true,
113 border: false,
114 html: ''
115 });
116
117 var commandInfo = Ext.create('Ext.Panel', {
118 layout: 'fit',
119// id: 'details-panel',
120// title: 'Service Info',
121 width: 580,
122// flex: 3,
123// autoScroll: true,
124 border: false,
125 margin: '5 5 5 5',
126 html: 'Some Info'
127 });
128
129
130 var commandData = Ext.create('Ext.form.field.Text', {
131 width: 400,
132// id: 'pattern',
133 xtype: 'textfield',
134 name: 'Search pattern',
135 labelAlign: 'top',
136 fieldLabel: "Please enter items separated by spaces:<br />(for example: 2 0x123 'A' 23.4 \"a text\")",
137 labelPad: 5,
138 labelSeparator: "",
139// labelWidth: 45,
140// allowBlank: false,
141 margin: '5 5 5 5'
142 });
143
144 var commandButton = Ext.create('Ext.Button', {
145 text: 'Send',
146 margin: '5 5 5 5',
147 handler: function() {
148 var pattern = commandData.getRawValue();
149 query(pattern, -1);
150 }
151 });
152
153 var commandInfoArea = Ext.create('Ext.form.Panel', {
154 layout: 'vbox',
155 id: 'cmd-details-panel',
156 title: 'Send Command',
157 width: 580,
158// flex: 3,
159// autoScroll: true,
160 border: false,
161// html: 'Command test'
162 align:'stretch',
163 items: [commandInfo, commandData, commandButton]
164 });
165
166 var serviceInfoArea = Ext.create('Ext.form.Panel', {
167 layout: 'vbox',
168// title: 'Service Info',
169 width: 580,
170 region: 'east',
171 align:'stretch',
172 items: [serviceInfo, commandInfoArea]
173 });
174/*
175 var serviceInfo = Ext.create('Ext.Panel', {
176 id: 'details-panel',
177 title: 'Service Info',
178 region: 'east',
179// bodyStyle: 'padding-bottom:15px;background:#eee;',
180 autoScroll: true,
181 html: ''
182 });
183*/
184
185 var HTTPPacket = new XMLHttpRequest();
186 HTTPPacket.onreadystatechange = process;
187 var HTTPPollPacket = new XMLHttpRequest();
188 HTTPPollPacket.onreadystatechange = pollAnswer;
189 var HTTPQueryPacket = new XMLHttpRequest();
190 HTTPQueryPacket.onreadystatechange = queryAnswer;
191 var requestNumber = 0;
192 var LastService = "";
193 var LastId = "";
194 var forceUpdate = 0;
195 var timeoutid;
196 var pollid;
197 var CurrService = "";
198 var OldNServices = 0;
199 var OldNServers = 0;
200 var OldNnodes = 0;
201 var OldNSearch = -1;
202 function poll()
203 {
204// if(!pollid)
205// return;
206 requestNumber = requestNumber + 1;
207 HTTPPollPacket.open( "GET", "/didPoll.json/src?dimservice="+CurrService+"&reqNr="+requestNumber+"&reqId="+randomNumber+"&force=0", true );
208 HTTPPollPacket.send( null );
209 }
210 function pollAnswer()
211 {
212 var answer;
213 if ( HTTPPollPacket.readyState != 4 )
214 return;
215 answer = HTTPPollPacket.responseText;
216 if(answer == "")
217 {
218 pollid = setTimeout(poll, 5000);
219 return;
220 }
221 var items = answer.split(" ");
222 if((items[0] != OldNServices) || (items[1] != OldNServers))
223 {
224// storeHeader.load();
225 headerList.update(items[1]+" Servers Known - "+items[0]+" Services Available (on "+items[2]+" nodes)");
226 }
227 if((items[1] != OldNServers) || (items[2] != OldNnodes))
228 {
229 storeNodes.load();
230 clearServices();
231 }
232 if(items[3] != 0)
233 doGetService();
234 OldNServices = items[0];
235 OldNServers = items[1];
236 OldNnodes = items[2];
237 if(items[4] != OldNSearch)
238 {
239 if(items[4] != 0)
240 searchInfo.update("Showing: "+items[5]+" Servers - "+items[4]+" Services (on "+items[6]+" nodes)");
241 else
242 searchInfo.update("Showing: All");
243 OldNSearch = items[4];
244 }
245 pollid = setTimeout(poll, 5000);
246 }
247
248 function query(pattern, force)
249 {
250 if(pollid)
251 clearTimeout(pollid);
252 pollid = 0;
253 requestNumber = requestNumber + 1;
254 HTTPQueryPacket.open( "GET", "/didQuery.json/src?dimservice="+pattern+"&reqNr="+requestNumber+"&reqId="+randomNumber+"&force="+force, true );
255 HTTPQueryPacket.send( null );
256 }
257 function queryAnswer()
258 {
259 var answer;
260 if ( HTTPQueryPacket.readyState != 4 )
261 return;
262 answer = HTTPQueryPacket.responseText;
263 if(answer == "load")
264 {
265 storeNodes.load();
266 clearServices();
267 poll();
268 }
269 else
270 pollid = setTimeout(poll, 1000);
271// poll();
272 }
273
274 function doGetService()
275 {
276 getService(LastService, LastId);
277 }
278 function getService(name, id)
279 {
280 if(pollid)
281 clearTimeout(pollid);
282 pollid = 0;
283 forceUpdate = 0;
284 if(LastService != name)
285 {
286 forceUpdate = 1;
287 LastService = name;
288 LastId = id;
289 }
290 var items = id.split("|");
291 if(items.length == 3)
292 {
293// serviceInfo.update(name + " is a DIM Command");
294 commandInfo.update(name + " is a DIM Command");
295// serviceInfo.setVisible(0);
296// commandInfoArea.setVisible(1);
297 CurrService = "";
298 forceUpdate = -1;
299// return;
300 }
301 var name1 = name.replace(/\?/g,"%3F");
302 name1 = name1.replace(/\&/g,"%26");
303 if(forceUpdate != -1)
304 CurrService = name1;
305 requestNumber = requestNumber + 1;
306 HTTPPacket.open( "GET", "/didServiceData.json/src?dimservice="+name1+"&id=src&reqNr="+requestNumber+"&reqId="+randomNumber+"&force="+forceUpdate, true );
307 HTTPPacket.send( null );
308 }
309 function process()
310 {
311 serviceInfo.update("Updating - state "+HTTPPacket.readyState+"...");
312 if ( HTTPPacket.readyState != 4 )
313 return;
314 if(HTTPPacket.responseText == "")
315 {
316// timeoutid = window.setTimeout(doGetService, 5000);
317 pollid = setTimeout(poll, 5000);
318 return;
319 }
320 if(forceUpdate != -1)
321 {
322 serviceInfo.update(HTTPPacket.responseText);
323 serviceInfo.setVisible(1);
324 commandInfoArea.setVisible(0);
325 }
326 else
327 {
328 commandInfo.update(HTTPPacket.responseText);
329 serviceInfo.setVisible(0);
330 commandInfoArea.setVisible(1);
331 }
332// timeoutid = window.setTimeout(doGetService, 5000);
333 pollid = setTimeout(poll, 5000);
334 }
335
336 var serviceList = Ext.create('Ext.tree.Panel', {
337 title: 'Services',
338 width: 360,
339 height: 150,
340 store: storeServices,
341 rootVisible: false,
342 autoScroll: true,
343 listeners: {
344 itemclick: function(view, rec, item, index, evtObj) {
345 getService(rec.get('text'),rec.get('id'));
346 }
347 }
348 });
349
350 var nodeTree = Ext.create('Ext.tree.Panel', {
351 title: 'Nodes & Servers',
352 width: 360,
353 height: 150,
354 store: storeNodes,
355 rootVisible: false,
356 autoScroll: true,
357// deferRowRender: true,
358 listeners: {
359 itemclick: function(view, rec, item, index, evtObj) {
360 if(rec.get('leaf') == true)
361 {
362 storeServices.load({
363 params: {
364 dimserver: rec.get('text'),
365 dimnode: rec.get('parentId'),
366 dimserverid: rec.get('id')
367 }
368 });
369 }
370 }
371 }
372 });
373/*
374 var storeHeader = Ext.create('Ext.data.Store', {
375 proxy: {
376 type: 'rest',
377 url: '/didHeader.json',
378 reader: {
379 type: 'json',
380 root: 'items'
381 }
382 },
383// autoLoad: true,
384 fields: ['text']
385 });
386
387 var headerList = Ext.create('Ext.grid.Panel', {
388 layout: 'fit',
389 title: 'DID - DIM Information Display',
390// width: 500,
391 height: 70,
392 store: storeHeader,
393 hideHeaders: true,
394 columns: [{ text: 'Text', dataIndex: 'text', flex: 1 }]
395 });
396*/
397 var headerList = Ext.create('Ext.Panel', {
398 layout: 'fit',
399 title: 'DID - DIM Information Display',
400 id: 'top-panel',
401 width: 2000,
402 height: 55,
403// margin: '5 0 5 5',
404// border: 0,
405 bodyPadding: '5 0 5 5',
406 html: ''
407 });
408
409 var searchButton = Ext.create('Ext.Button', {
410 text: 'Search',
411 margin: '2 0 5 5',
412 handler: function() {
413// var pattern = getElementById('pattern');
414// serviceInfo.update(inputArea.getRawValue());
415// storeServices.removeAll();
416// storeServices.load({
417// params: {
418// dimserver: "",
419// dimnode: "",
420// dimserverid: ""
421// }
422// });
423 clearServices();
424 var pattern = inputArea.getRawValue();
425 query(pattern, 0);
426 }
427 });
428
429 var allButton = Ext.create('Ext.Button', {
430 text: 'Show All',
431 margin: '2 0 5 5',
432 handler: function() {
433// var pattern = getElementById('pattern');
434// serviceInfo.update(inputArea.getRawValue());
435// var pattern = inputArea.getRawValue();
436// query(pattern);
437// storeServices.removeAll();
438// storeServices.load({
439// params: {
440// dimserver: "",
441// dimnode: "",
442// dimserverid: ""
443// }
444// });
445 clearServices();
446 var pattern = "";
447 query(pattern, 0);
448 }
449 });
450
451 var searchInfo = Ext.create('Ext.Panel', {
452 layout: 'fit',
453 id: 'search-panel',
454// title: 'Service Info',
455// region: 'east',
456// bodyStyle: 'padding-bottom:15px;background:#eee;',
457// autoScroll: true,
458 margin: '5 0 5 10',
459// bodyBorder: false,
460 border: 0,
461 html: ''
462 });
463
464 var inputArea = Ext.create('Ext.form.field.Text', {
465 width: 400,
466 id: 'pattern',
467 xtype: 'textfield',
468 name: 'Search pattern',
469 fieldLabel: 'pattern',
470 labelWidth: 45,
471// allowBlank: false,
472 margin: '2 0 5 5'
473 });
474
475 var searchArea = Ext.create('Ext.form.Panel', {
476 layout: 'hbox',
477 title: 'Service Search',
478 width: 2000,
479// height: 30,
480// margins: '2 0 5 5',
481 items: [inputArea, searchButton, allButton, searchInfo]
482 });
483
484
485 Ext.create('Ext.Viewport', {
486 layout: 'border',
487 title: 'DID',
488 items: [{
489 layout: 'vbox',
490 id: 'layout-browser3',
491 region:'north',
492 border: false,
493 split:true,
494 margins: '2 0 5 5',
495 items: [headerList, searchArea]
496 },{
497 layout: 'fit',
498 id: 'layout-browser',
499 region:'west',
500 border: false,
501 split:true,
502 margins: '2 0 5 5',
503 width: 220,
504 minSize: 100,
505 maxSize: 500,
506 items: [nodeTree]
507 },{
508 layout: 'fit',
509 id: 'layout-browser1',
510 region:'center',
511 border: false,
512 split:true,
513 margins: '2 0 5 5',
514 minSize: 100,
515 maxSize: 500,
516// items: [nodeTree, serviceList]
517 items: [serviceList]
518 },{
519 layout: 'fit',
520 id: 'layout-browser2',
521 region:'east',
522 border: false,
523 split:true,
524 margins: '2 0 5 5',
525 width: 580,
526 minSize: 100,
527 maxSize: 600,
528 items: [serviceInfoArea]
529 }
530 ],
531 renderTo: Ext.getBody()
532 });
533 commandInfoArea.setVisible(0);
534// storeHeader.load();
535// pollid = window.setTimeout(poll, 1000);
536 poll();
537});
Note: See TracBrowser for help on using the repository browser.