Context Navigation

source: trunk/web2/addons/job_monarch/js/monarch.js @ 598

Last change on this file since 598 was 597, checked in by ramonb, 15 years ago

job_monarch/js/monarch.js:

anti caching counter measures

File size: 22.6 KB

Line
1	var JobsDataStore;
2	var JobsColumnModel;
3	var JobListingEditorGrid;
4	var JobListingWindow;
5	var JobProxy;
6	var SearchField;
7	var filterButton;
8
9	// Extra header to prevent browser caching
10	//
11	Ext.Ajax.defaultHeaders =
12	{
13	'If-Modified-Since': 'Sat, 1 Jan 2005 00:00:00 GMT'
14	};
15
16	// associative filter array
17	//
18	var myfilters = { };
19
20	// any other datastore params
21	//
22	var myparams = { };
23
24	// (default) paging size
25	//
26	var mylimit = 15;
27
28	var ClusterImageArgs = { };
29
30	var filterfields = [ "jid", "queue", "name", "owner" ];
31
32	var graphWindowBehaviour = 'tabbed-new-window';
33	var previousGraphWindow;
34
35	var filterMenu = new Ext.menu.Menu(
36	{
37	id: 'filterMenu',
38	items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
39	});
40
41	var filterButton = new Ext.MenuButton(
42	{
43	id: 'filtermenuknop',
44	text: 'Filters',
45	toolip: 'Click to change filter options',
46	disabled: true,
47	menu: filterMenu,
48	listeners:
49	{
50	'click':
51	{
52	scope: this,
53	fn: function( myButton, event )
54	{ // immediatly show menu when button is clicked
55	myButton.menu.show( myButton.getEl() );
56	}
57	}
58	}
59	});
60
61	function checkGraphWindowOption( item, checked )
62	{
63	graphWindowBehaviour = item.id;
64	}
65
66	var graphMenu = new Ext.menu.Menu(
67	{
68	id: 'graphMenu',
69	items:
70	[{
71	id: 'new-window',
72	text: 'Each job in new window',
73	checked: false,
74	group: 'graphwindow',
75	handler: checkGraphWindowOption
76	},{
77	id: 'tabbed-new-window',
78	text: 'Each job in a seperate tab, in new window',
79	checked: true,
80	group: 'graphwindow',
81	handler: checkGraphWindowOption
82	},{
83	id: 'tabbed-prev-window',
84	text: 'Each job in a seperate tab, in last opened window',
85	checked: false,
86	group: 'graphwindow',
87	handler: checkGraphWindowOption
88	}]
89	});
90
91	var showGraphsButton = new Ext.MenuButton(
92	{
93	id: 'showgraphbutton',
94	text: 'Show graphs',
95	disabled: true,
96	menu: graphMenu,
97	listeners:
98	{
99	'click':
100	{
101	scope: this,
102	fn: ShowGraphs
103	}
104	}
105	});
106
107	Ext.namespace('Ext.ux');
108
109	Ext.ux.PageSizePlugin = function()
110	{
111	Ext.ux.PageSizePlugin.superclass.constructor.call(this,
112	{
113	store: new Ext.data.SimpleStore(
114	{
115	fields: ['text', 'value'],
116	data: [['10', 10], ['15', 15], ['20', 20], ['30', 30], ['50', 50], ['100', 100], ['max', 'max' ]]
117	}),
118	mode: 'local',
119	displayField: 'text',
120	valueField: 'value',
121	editable: false,
122	allowBlank: false,
123	triggerAction: 'all',
124	width: 40
125	});
126	};
127
128	Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox,
129	{
130	init: function(paging)
131	{
132	paging.on('render', this.onInitView, this);
133	},
134
135	onInitView: function(paging)
136	{
137	paging.add('-',
138	this,
139	'jobs per page'
140	);
141	this.setValue(paging.pageSize);
142	this.on('select', this.onPageSizeChanged, paging);
143	},
144
145	onPageSizeChanged: function(combo)
146	{
147	if ( combo.getValue() == 'max' )
148	{
149	mylimit = JobsDataStore.getTotalCount();
150	}
151	else
152	{
153	mylimit = parseInt(combo.getValue());
154	}
155	this.pageSize = mylimit;
156	this.doLoad(0);
157	}
158	});
159
160	Ext.namespace( 'Ext' );
161
162	function clearFilters()
163	{
164	if( inMyArrayKeys( myfilters, 'query' ) )
165	{
166	SearchField.getEl().dom.value = '';
167	delete SearchField.store.baseParams['query'];
168	delete myfilters['query'];
169	delete myparams['query'];
170	}
171	if( inMyArrayKeys( myfilters, 'host' ) )
172	{
173	delete myfilters['host'];
174	delete myparams['host'];
175	}
176	if( inMyArrayKeys( myfilters, 'jid' ) )
177	{
178	delete myfilters['jid'];
179	delete myparams['jid'];
180	}
181	if( inMyArrayKeys( myfilters, 'queue' ) )
182	{
183	delete myfilters['queue'];
184	delete myparams['queue'];
185	}
186	if( inMyArrayKeys( myfilters, 'owner' ) )
187	{
188	delete myfilters['owner'];
189	delete myparams['owner'];
190	}
191	if( inMyArrayKeys( myfilters, 'status' ) )
192	{
193	delete myfilters['status'];
194	delete myparams['status'];
195	}
196	reloadJobStore();
197	}
198
199	function makeArrayURL( somearr )
200	{
201	filter_url = '';
202	filter_sep = '';
203
204	for( filtername in somearr )
205	{
206	filter_url = filter_url + filter_sep + filtername + '=' + somearr[filtername];
207	filter_sep = '&';
208	}
209
210	return filter_url;
211	}
212
213
214	function isset( somevar )
215	{
216	try
217	{
218	if( eval( somevar ) ) { }
219	}
220	catch( err )
221	{
222	return false;
223	}
224	return true;
225	}
226
227	function inMyArray( arr, someval )
228	{
229	for( arval in arr )
230	{
231	if( arval == someval )
232	{
233	return true;
234	}
235	}
236	return false;
237	}
238
239	function ArraySize( arr )
240	{
241	count = 0;
242
243	for( arkey in arr )
244	{
245	count = count + 1;
246	}
247
248	return count;
249	}
250
251	function inMyArrayValues( arr, someval )
252	{
253	for( arkey in arr )
254	{
255	if( arr[arkey] == someval )
256	{
257	return true;
258	}
259	}
260	return false;
261	}
262
263	function inMyArrayKeys( arr, someval )
264	{
265	for( arkey in arr )
266	{
267	if( arkey == someval )
268	{
269	return true;
270	}
271	}
272	return false;
273	}
274
275	function joinMyArray( arr1, arr2 )
276	{
277	for( arkey in arr2 )
278	{
279	arr1[arkey] = arr2[arkey];
280	}
281
282	return arr1;
283	}
284
285	function ClusterImageSelectHost( somehost )
286	{
287	if( !inMyArrayKeys( myfilters, 'host' ) )
288	{
289	myfilters['host'] = somehost;
290	}
291	else
292	{
293	if( myfilters['host'] == somehost )
294	{
295	delete myfilters['host'];
296	delete myparams['host'];
297	}
298	else
299	{
300	myfilters['host'] = somehost;
301	}
302	}
303
304	reloadClusterImage();
305	reloadJobStore();
306
307	// returning false causes a image reload
308	//
309	return false;
310	}
311
312	function reloadJobStore()
313	{
314	// Respect any other parameters that may have been set outside filters
315	//
316	myparams = joinMyArray( myparams, myfilters );
317
318	// Can't be sure if there are enough pages for new filter: reset to page 1
319	//
320	myparams = joinMyArray( myparams, { start: 0, limit: mylimit } );
321
322	JobsDataStore.reload( { params: myparams } );
323	}
324
325	function addListener(element, type, expression, bubbling)
326	{
327	bubbling = bubbling \|\| false;
328
329	if(window.addEventListener)
330	{ // Standard
331	element.addEventListener(type, expression, bubbling);
332	return true;
333	}
334	else if(window.attachEvent)
335	{ // IE
336	element.attachEvent('on' + type, expression);
337	return true;
338	}
339	else
340	{
341	return false;
342	}
343	}
344
345	function makeFilterString()
346	{
347	var filter_str = '';
348
349	for( arkey in myfilters )
350	{
351	filter_str = filter_str + ' > ' + myfilters[arkey];
352	}
353
354	return filter_str;
355	}
356
357	var ImageLoader = function( id, url )
358	{
359	this.url = url;
360	this.image = document.getElementById( id );
361	this.loadEvent = null;
362	};
363
364	ImageLoader.prototype =
365	{
366	load: function()
367	{
368	var url = this.url;
369	var image = this.image;
370	var loadEvent = this.loadEvent;
371	addListener( this.image, 'load',
372	function(e)
373	{
374	if( loadEvent != null )
375	{
376	loadEvent( url, image );
377	}
378	}, false);
379	this.image.src = this.url;
380	},
381	getImage: function()
382	{
383	return this.image;
384	}
385	};
386
387	function achorJobListing()
388	{
389	JobListingWindow.anchorTo( "ClusterImageWindow", "tr-br", [ 0, 10 ] );
390	}
391
392	function setClusterImagePosition()
393	{
394	ci_x = (window.innerWidth - ClusterImageWindow.getSize()['width'] - 20);
395	ClusterImageWindow.setPosition( ci_x, 10 );
396	}
397
398	function deselectFilterMenu( menuItem, event )
399	{
400	filterValue = menuItem.text;
401
402	if( filterValue == SearchField.getEl().dom.value && inMyArrayKeys( myfilters, 'query' ) )
403	{
404	SearchField.getEl().dom.value = '';
405	delete SearchField.store.baseParams['query'];
406	}
407
408	for( arkey in myfilters )
409	{
410	if( myfilters[arkey] == filterValue )
411	{
412	delete myfilters[arkey];
413	delete myparams[arkey];
414	}
415	}
416	reloadJobStore();
417	}
418
419	function makeFilterMenu()
420	{
421	var filterMenu = new Ext.menu.Menu(
422	{
423	id: 'filterMenu',
424	items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
425	});
426
427	if( ArraySize( myfilters ) > 0 )
428	{
429	filterMenu.addSeparator();
430	}
431
432	for( arkey in myfilters )
433	{
434	filterMenu.add( new Ext.menu.CheckItem({ text: myfilters[arkey], handler: deselectFilterMenu, checked: true }) );
435	}
436
437	if( filterButton )
438	{
439	filterButton.menu = filterMenu;
440
441	if( ArraySize( myfilters ) > 0 )
442	{
443	filterButton.enable();
444	}
445	else
446	{
447	filterButton.disable();
448	}
449	}
450	}
451
452	function reloadClusterImage()
453	{
454	ClusterImageArgs['view'] = 'big-clusterimage';
455
456	filt_url = makeArrayURL( myfilters );
457	imag_url = makeArrayURL( ClusterImageArgs );
458	img_url = './image.php?' + filt_url + '&' + imag_url;
459
460	var newClusterImage = new ImageLoader( 'clusterimage', img_url );
461	newClusterImage.loadEvent = function( url, image )
462	{
463	ClusterImageWindow.getBottomToolbar().clearStatus( { useDefaults:true } );
464	setTimeout( "resizeClusterImage()", 250 );
465	setTimeout( "setClusterImagePosition()", 500 );
466	//setTimeout( "achorJobListing()", 1000 );
467	}
468
469	ClusterImageWindow.getBottomToolbar().showBusy();
470
471	filter_str = 'Nodes' + makeFilterString();
472	ClusterImageWindow.setTitle( filter_str );
473
474	newClusterImage.load();
475	}
476
477	function resizeClusterImage()
478	{
479	var ci_height = document.getElementById( "clusterimage" ).height + ClusterImageWindow.getFrameHeight();
480	var ci_width = document.getElementById( "clusterimage" ).width + ClusterImageWindow.getFrameWidth();
481
482	ClusterImageWindow.setSize( ci_width, ci_height );
483	}
484
485	Ext.apply(Ext.form.VTypes,
486	{
487	num: function(val, field)
488	{
489	if (val)
490	{
491	var strValidChars = "0123456789";
492	var blnResult = true;
493
494	if (val.length == 0) return false;
495
496	// test strString consists of valid characters listed above
497	for (i = 0; i < val.length && blnResult == true; i++)
498	{
499	strChar = val.charAt(i);
500	if (strValidChars.indexOf(strChar) == -1)
501	{
502	blnResult = false;
503	}
504	}
505	return blnResult;
506
507	}
508	},
509	numText: 'Must be numeric'
510	});
511
512	function jobRowSelect( selModel )
513	{
514	if( selModel.hasSelection() )
515	{
516	showGraphsButton.enable();
517	}
518	else
519	{
520	showGraphsButton.disable();
521	}
522	}
523
524	function jobCellClick(grid, rowIndex, columnIndex, e)
525	{
526	var record = grid.getStore().getAt(rowIndex); // Get the Record
527	var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
528	var data = record.get(fieldName);
529	var view = grid.getView();
530	var cell = view.getCell( rowIndex, columnIndex );
531	var filter_title = false;
532	var fil_dis = 'filter';
533	var fil_ena = 'filterenabled';
534	var filterName = fieldName;
535
536	if( fieldName == 'owner' \|\| fieldName == 'jid' \|\| fieldName == 'status' \|\| fieldName == 'queue' \|\| fieldName == 'nodes')
537	{
538	if( fieldName == 'nodes' )
539	{
540	filterName = 'host';
541	fil_dis = 'nodesfilter';
542	fil_ena = 'nodesfilterenabled';
543	}
544	if( inMyArrayKeys( myfilters, filterName ) )
545	{
546	Ext.fly(cell).removeClass( fil_ena );
547	Ext.fly(cell).addClass( fil_dis );
548
549	// Remove this filter
550	//
551	delete myfilters[filterName];
552	delete myparams[filterName];
553
554	reloadJobStore();
555	//reloadClusterImage();
556	}
557	else
558	{
559	Ext.fly(cell).removeClass( fil_dis );
560	Ext.fly(cell).addClass( fil_ena );
561
562	if( fieldName == 'nodes' )
563	{ // Get the first node (master mom) as node filter
564	new_data = data.split( ',' )[0];
565	data = new_data;
566	}
567
568	// Set filter for selected column to selected cell value
569	//
570	myfilters[filterName] = data;
571
572	reloadJobStore();
573	//reloadClusterImage();
574	}
575	JobListingWindow.setTitle( filter_str );
576
577	filter_title = true;
578	filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
579	}
580	}
581
582	function jobCellRender( value, metadata, record, rowindex, colindex, store )
583	{
584	var fieldName = JobsColumnModel.getColumnById( colindex ).dataIndex;
585	var fil_dis = 'filter';
586	var fil_ena = 'filterenabled';
587	var filterName = fieldName;
588
589	if( fieldName == 'owner' \|\| fieldName == 'jid' \|\| fieldName == 'status' \|\| fieldName == 'queue' \|\| fieldName == 'nodes' )
590	{
591	if( fieldName == 'nodes' )
592	{
593	fil_dis = 'nodesfilter';
594	fil_ena = 'nodesfilterenabled';
595	filterName = 'host';
596	}
597	if( myfilters[filterName] != null )
598	{
599	metadata.css = fil_ena;
600	}
601	else
602	{
603	metadata.css = fil_dis;
604	}
605	}
606	return value;
607	}
608
609	var JobProxy = new Ext.data.HttpProxy(
610	{
611	url: 'jobstore.php',
612	method: 'POST'
613	});
614
615	JobsDataStore = new Ext.data.Store(
616	{
617	id: 'JobsDataStore',
618	proxy: JobProxy,
619	baseParams: { task: "GETJOBS" },
620	reader:
621	new Ext.data.JsonReader(
622	{
623	root: 'results',
624	totalProperty: 'total',
625	id: 'id'
626	},
627	[
628	{name: 'jid', type: 'int', mapping: 'jid'},
629	{name: 'status', type: 'string', mapping: 'status'},
630	{name: 'owner', type: 'string', mapping: 'owner'},
631	{name: 'queue', type: 'string', mapping: 'queue'},
632	{name: 'name', type: 'string', mapping: 'name'},
633	{name: 'requested_time', type: 'string', mapping: 'requested_time'},
634	{name: 'requested_memory', type: 'string', mapping: 'requested_memory'},
635	{name: 'ppn', type: 'int', mapping: 'ppn'},
636	{name: 'nodect', type: 'int', mapping: 'nodect'},
637	{name: 'nodes', type: 'string', mapping: 'nodes'},
638	{name: 'queued_timestamp', type: 'string', mapping: 'queued_timestamp'},
639	{name: 'start_timestamp', type: 'string', mapping: 'start_timestamp'},
640	{name: 'runningtime', type: 'string', mapping: 'runningtime'}
641	]),
642	sortInfo:
643	{
644	field: 'jid',
645	direction: "DESC"
646	},
647	remoteSort: true,
648	listeners:
649	{
650	'beforeload':
651	{
652	scope: this,
653	fn:
654
655	function( myStore, myOptions )
656	{
657	// Add a (bogus) timestamp, to create a unique url and prevent browser caching
658	//
659	myStore.proxy.url = 'jobstore.php?timestamp=' + new Date().getTime();
660
661	if( SearchField )
662	{
663	search_value = SearchField.getEl().dom.value;
664	if( search_value == '' )
665	{
666	delete SearchField.store.baseParams['query'];
667	delete myfilters['query'];
668	delete myparams['query'];
669	}
670	else
671	{
672	myfilters['query'] = search_value;
673	}
674
675	makeFilterMenu();
676	reloadClusterImage();
677
678	filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
679	JobListingWindow.setTitle( filter_str );
680	}
681	}
682	}
683	}
684	});
685
686	var CheckJobs =
687
688	new Ext.grid.CheckboxSelectionModel(
689	{
690	listeners:
691	{
692	'selectionchange':
693	{
694	scope: this,
695	fn: jobRowSelect
696	}
697	},
698	});
699
700	JobsColumnModel = new Ext.grid.ColumnModel(
701	[
702	CheckJobs,
703	{
704	header: '#',
705	tooltip: 'Job id',
706	readOnly: true,
707	dataIndex: 'jid',
708	width: 50,
709	hidden: false,
710	renderer: jobCellRender
711	},{
712	header: 'S',
713	tooltip: 'Job status',
714	readOnly: true,
715	dataIndex: 'status',
716	width: 20,
717	hidden: false,
718	renderer: jobCellRender
719	},{
720	header: 'User',
721	tooltip: 'Owner of job',
722	readOnly: true,
723	dataIndex: 'owner',
724	width: 60,
725	hidden: false,
726	renderer: jobCellRender
727	},{
728	header: 'Queue',
729	tooltip: 'In which queue does this job reside',
730	readOnly: true,
731	dataIndex: 'queue',
732	width: 60,
733	hidden: false,
734	renderer: jobCellRender
735	},{
736	header: 'Name',
737	tooltip: 'Name of job',
738	readOnly: true,
739	dataIndex: 'name',
740	width: 100,
741	hidden: false
742	},{
743	header: 'Requested Time',
744	tooltip: 'Amount of requested time (wallclock)',
745	readOnly: true,
746	dataIndex: 'requested_time',
747	width: 100,
748	hidden: false
749	},{
750	header: 'Requested Memory',
751	tooltip: 'Amount of requested memory',
752	readOnly: true,
753	dataIndex: 'requested_memory',
754	width: 100,
755	hidden: true
756	},{
757	header: 'P',
758	tooltip: 'Number of processors per node (PPN)',
759	readOnly: true,
760	dataIndex: 'ppn',
761	width: 25,
762	hidden: false
763	},{
764	header: 'N',
765	tooltip: 'Number of nodes (hosts)',
766	readOnly: true,
767	dataIndex: 'nodect',
768	width: 25,
769	hidden: false
770	},{
771	header: 'Nodes',
772	readOnly: true,
773	dataIndex: 'nodes',
774	width: 100,
775	hidden: false,
776	renderer: jobCellRender
777	},{
778	header: 'Queued',
779	tooltip: 'At what time did this job enter the queue',
780	readOnly: true,
781	dataIndex: 'queued_timestamp',
782	width: 120,
783	hidden: false
784	},{
785	header: 'Started',
786	tooltip: 'At what time did this job enter the running status',
787	readOnly: true,
788	dataIndex: 'start_timestamp',
789	width: 120,
790	hidden: false
791	},{
792	header: 'Runningtime',
793	tooltip: 'How long has this job been in the running status',
794	readOnly: true,
795	dataIndex: 'runningtime',
796	width: 140,
797	hidden: false
798	}]
799	);
800
801	JobsColumnModel.defaultSortable = true;
802
803	var win;
804
805	MetricsDataStore = new Ext.data.Store(
806	{
807	id: 'MetricsDataStore',
808	proxy: JobProxy,
809	autoLoad: false,
810	baseParams: { task: "GETMETRICS" },
811	reader:
812	new Ext.data.JsonReader(
813	{
814	root: 'names',
815	totalProperty: 'total',
816	id: 'id'
817	},
818	[{
819	name: 'ID'
820	},{
821	name: 'name'
822	}]
823	)
824	});
825
826	SearchField = new Ext.app.SearchField(
827	{
828	store: JobsDataStore,
829	params: {start: 0, limit: mylimit},
830	width: 200
831	});
832
833	function createNodesDataStore( cluster, jid )
834	{
835	nodesDataStore =
836
837	new Ext.data.Store(
838	{
839	//id: 'NodesDataStore',
840	proxy: new Ext.data.HttpProxy(
841	{
842	url: 'jobstore.php',
843	method: 'POST'
844	}),
845	autoLoad: true,
846	baseParams:
847	{
848	'task': "GETNODES",
849	'c': cluster,
850	'jid': jid
851	},
852	reader: new Ext.data.JsonReader(
853	{
854	root: 'results',
855	totalProperty: 'total',
856	id: 'id'
857	},[
858	{name: 'c', type: 'string', mapping: 'c'},
859	{name: 'h', type: 'string', mapping: 'h'},
860	{name: 'x', type: 'string', mapping: 'x'},
861	{name: 'v', type: 'string', mapping: 'v'},
862	{name: 'l', type: 'string', mapping: 'l'},
863	{name: 'jr', type: 'string', mapping: 'jr'},
864	{name: 'js', type: 'string', mapping: 'js'}
865	]),
866	listeners:
867	{
868	'beforeload':
869	{
870	scope: this,
871	fn:
872
873	function( myStore, myOptions )
874	{
875	// Add a (bogus) timestamp, to create a unique url and prevent browser caching
876	//
877	myStore.proxy.url = 'jobstore.php?timestamp=' + new Date().getTime();
878	//alert( myStore.proxy.url );
879	}
880	}
881	}
882
883	});
884
885	return nodesDataStore;
886	}
887
888	function createGraphView( store, jid )
889	{
890	var graphView =
891
892	new Ext.DataView(
893	{
894	id: jid,
895	itemSelector: 'thumb',
896	title: jid,
897	style: 'overflow:auto',
898	multiSelect: true,
899	//autoHeight: true,
900	autoShow: true,
901	loadMask: true,
902	store: store,
903	layout: 'fit',
904	tpl:
905
906	new Ext.XTemplate(
907	'<tpl for=".">',
908	'<div class="rrd-float"><img src="../../graph.php?z=small&c={c}&h={h}&l={l}&v={v}&x={x}&r=job&jr={jr}&js={js}" border="0"></div>',
909	'</tpl>'
910	)
911	});
912
913	return graphView;
914	}
915
916	function createGraphPanel( view )
917	{
918	var graphPanel =
919
920	new Ext.TabPanel(
921	{
922	id: 'images',
923	region: 'center',
924	bodyStyle: 'background: transparent',
925	autoShow: true,
926	autoHeight: true,
927	//margins: '2 2 2 0',
928	//layout: 'fit',
929	resizeTabs: true,
930	minTabWidth: 115,
931	tabWidth: 135,
932	enableTabScroll:true,
933	defaults: {autoScroll:true},
934	view: view,
935	listeners:
936	{
937	'tabchange':
938	{
939	scope: this,
940	fn: function( myTabPanel, tab )
941	{
942	//myTabPanel.items[0].refresh();
943	//this.view.refresh();
944	}
945	}
946	}
947	});
948
949	return graphPanel;
950	}
951
952	function createGraphWindow( panel, Button )
953	{
954	graphWindow =
955
956	new Ext.Window(
957	{
958	animateTarget: Button,
959	width: 500,
960	height: 300,
961	closeAction: 'hide',
962	collapsible: true,
963	animCollapse: true,
964	maximizable: true,
965	title: 'Node graph details',
966	//layout: 'fit',
967	tbar:
968
969	// RB TODO: range combobox; hour, day, week, etc
970
971	new Ext.form.ComboBox(
972	{
973	fieldLabel: 'Metric',
974	store: MetricsDataStore,
975	valueField: 'name',
976	displayField: 'name',
977	typeAhead: true,
978	mode: 'remote',
979	triggerAction: 'all',
980	emptyText: 'load_one',
981	selectOnFocus: true,
982	xtype: 'combo',
983	width: 190,
984	listeners:
985	{
986	select:
987
988	function(combo, record, index)
989	{
990	var metric = record.data.name;
991	// doe iets
992
993	// RB: misschien zo metric opgeven aan datastore?
994	//items[0].items[0].getStore().baseParams.metric = metric;
995	}
996	}
997
998	}),
999
1000	items: [ panel ]
1001	});
1002
1003	return graphWindow;
1004	}
1005
1006	function ShowGraphs( Button, Event )
1007	{
1008	var row_records = CheckJobs.getSelections();
1009	var graphJids = Array();
1010	var windowCount = 0;
1011	var tabCount = 0;
1012
1013	for( var i=0; i<row_records.length; i++ )
1014	{
1015	rsel = row_records[i];
1016	jid = rsel.get('jid');
1017
1018	if( graphJids[windowCount] == undefined )
1019	{
1020	graphJids[windowCount] = Array();
1021	}
1022
1023	graphJids[windowCount][tabCount] = jid;
1024
1025	if( (i+1) < row_records.length )
1026	{
1027	if( graphWindowBehaviour == 'new-window' )
1028	{
1029	windowCount++;
1030	}
1031	else
1032	{
1033	tabCount++;
1034	}
1035	}
1036	}
1037
1038	for( var w=0; w<=windowCount; w++ )
1039	{
1040	if( graphWindowBehaviour == 'tabbed-prev-window' )
1041	{
1042	myWindow = previousGraphWindow;
1043	myPanel = previousGraphPanel;
1044	}
1045	else
1046	{
1047	myPanel = createGraphPanel();
1048	myWindow = createGraphWindow( myPanel, Button );
1049
1050	myWindow.add( myPanel );
1051	}
1052
1053	for( var t=0; t<=tabCount; t++ )
1054	{
1055	nodeDatastore = createNodesDataStore( myparams.c, graphJids[w][t] );
1056	graphView = createGraphView( nodeDatastore, graphJids[w][t] );
1057
1058	nodeDatastore.removeAll();
1059
1060	lastView = myPanel.add( graphView );
1061
1062	//nodeDatastore.load();
1063	myPanel.setActiveTab( lastView );
1064	}
1065
1066	myWindow.show( Button );
1067
1068	myPanel.doLayout();
1069	myWindow.doLayout();
1070
1071	previousGraphWindow = myWindow;
1072	previousGraphPanel = myPanel;
1073	}
1074	}
1075
1076	var JobListingEditorGrid =
1077
1078	new Ext.grid.EditorGridPanel(
1079	{
1080	id: 'JobListingEditorGrid',
1081	store: JobsDataStore,
1082	cm: JobsColumnModel,
1083	enableColLock: false,
1084	clicksToEdit: 1,
1085	loadMask: true,
1086	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
1087	stripeRows: true,
1088	sm: CheckJobs,
1089	listeners:
1090	{
1091	'cellclick':
1092	{
1093	scope: this,
1094	fn: jobCellClick
1095	}
1096	},
1097	bbar:
1098
1099	new Ext.PagingToolbar(
1100	{
1101	pageSize: 15,
1102	store: JobsDataStore,
1103	displayInfo: true,
1104	displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total found.',
1105	emptyMsg: 'No jobs found to display',
1106	plugins: [ new Ext.ux.PageSizePlugin() ]
1107	}),
1108
1109	tbar:
1110	[
1111	SearchField,
1112	showGraphsButton,
1113	filterButton
1114	]
1115	});
1116
1117	var ClusterImageWindow =
1118
1119	new Ext.Window(
1120	{
1121	id: 'ClusterImageWindow',
1122	title: 'Nodes',
1123	closable: true,
1124	collapsible: true,
1125	animCollapse: true,
1126	width: 1,
1127	height: 1,
1128	y: 15,
1129	plain: true,
1130	shadow: true,
1131	resizable: false,
1132	shadowOffset: 10,
1133	layout: 'fit',
1134	bbar:
1135
1136	new Ext.StatusBar(
1137	{
1138	defaultText: 'Ready.',
1139	id: 'basic-statusbar',
1140	defaultIconCls: ''
1141	})
1142	});
1143
1144	var GraphSummaryWindow =
1145
1146	new Ext.Window(
1147	{
1148	id: 'GraphSummaryWindow',
1149	title: 'Graph Summary',
1150	closable: true,
1151	collapsible: true,
1152	animCollapse: true,
1153	width: 500,
1154	height: 400,
1155	x: 10,
1156	y: 10,
1157	plain: true,
1158	shadow: true,
1159	resizable: true,
1160	shadowOffset: 10,
1161	layout: 'table',
1162	layoutConfig:
1163	{
1164	columns: 2
1165	},
1166	defaults: { border: false },
1167	items:
1168	[
1169	{
1170	id: 'monarchlogo',
1171	cls: 'monarch',
1172	bodyStyle: 'background: transparent',
1173	html: '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
1174	//colspan: 2
1175	},{
1176	id: 'summarycount'
1177	},{
1178	id: 'rjqjgraph'
1179	},{
1180	id: 'pie',
1181	colspan: 2
1182	}
1183	],
1184	bbar:
1185
1186	new Ext.StatusBar(
1187	{
1188	defaultText: 'Ready.',
1189	id: 'basic-statusbar',
1190	defaultIconCls: ''
1191	})
1192	});
1193
1194	var JobListingWindow =
1195
1196	new Ext.Window(
1197	{
1198	id: 'JobListingWindow',
1199	title: 'Cluster Jobs Overview',
1200	closable: true,
1201	collapsible: true,
1202	animCollapse: true,
1203	maximizable: true,
1204	y: 375,
1205	width: 860,
1206	height: 445,
1207	plain: true,
1208	shadow: true,
1209	shadowOffset: 10,
1210	layout: 'fit',
1211	items: JobListingEditorGrid
1212	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: