Context Navigation

source: trunk/web/addons/job_monarch/js/monarch.js @ 629

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

job_monarch/js/monarch.js,
job_monarch/templates/header.tpl:

add progress bar to paging

File size: 23.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	var globalWindowCount = 0;
9
10	// Extra header to prevent browser caching
11	//
12	Ext.Ajax.defaultHeaders =
13	{
14	'If-Modified-Since': 'Sat, 1 Jan 2005 00:00:00 GMT'
15	};
16
17	// associative filter array
18	//
19	var myfilters = { };
20
21	// any other datastore params
22	//
23	var myparams = { };
24
25	// (default) paging size
26	//
27	var mylimit = 15;
28
29	var ClusterImageArgs = { };
30
31	var filterfields = [ "jid", "queue", "name", "owner" ];
32
33	var graphWindowBehaviour = 'tabbed-new-window';
34	var previousGraphWindow;
35
36	var filterMenu = new Ext.menu.Menu(
37	{
38	id: 'filterMenu',
39	items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
40	});
41
42	var filterButton = new Ext.Button(
43	{
44	id: 'filtermenuknop',
45	text: 'Filters',
46	toolip: 'Click to change filter options',
47	disabled: true,
48	menu: filterMenu,
49	listeners:
50	{
51	'click':
52	{
53	scope: this,
54	fn: function( myButton, event )
55	{ // immediatly show menu when button is clicked
56	myButton.menu.show( myButton.getEl() );
57	}
58	}
59	}
60	});
61
62	function checkGraphWindowOption( item, checked )
63	{
64	graphWindowBehaviour = item.id;
65	}
66
67	var graphMenu = new Ext.menu.Menu(
68	{
69	id: 'graphMenu',
70	items:
71	[{
72	id: 'new-window',
73	text: 'Each job in new window',
74	checked: false,
75	group: 'graphwindow',
76	handler: checkGraphWindowOption
77	},{
78	id: 'tabbed-new-window',
79	text: 'Each job in a seperate tab, in new window',
80	checked: true,
81	group: 'graphwindow',
82	handler: checkGraphWindowOption
83	},{
84	id: 'tabbed-prev-window',
85	text: 'Each job in a seperate tab, in last opened window',
86	checked: false,
87	group: 'graphwindow',
88	handler: checkGraphWindowOption
89	}]
90	});
91
92	var showGraphsButton = new Ext.Button(
93	{
94	id: 'showgraphbutton',
95	text: 'Show graphs',
96	disabled: true,
97	menu: graphMenu,
98	listeners:
99	{
100	'click':
101	{
102	scope: this,
103	fn: ShowGraphs
104	}
105	}
106	});
107
108	Ext.namespace('Ext.ux');
109
110	Ext.ux.PageSizePlugin = function()
111	{
112	Ext.ux.PageSizePlugin.superclass.constructor.call(this,
113	{
114	store: new Ext.data.SimpleStore(
115	{
116	fields: ['text', 'value'],
117	data: [['10', 10], ['15', 15], ['20', 20], ['30', 30], ['50', 50], ['100', 100], ['max', 'max' ]]
118	}),
119	mode: 'local',
120	displayField: 'text',
121	valueField: 'value',
122	editable: false,
123	allowBlank: false,
124	triggerAction: 'all',
125	width: 40
126	});
127	};
128
129	Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox,
130	{
131	init: function(paging)
132	{
133	paging.on('render', this.onInitView, this);
134	},
135
136	onInitView: function(paging)
137	{
138	paging.add('-',
139	this,
140	'jobs per page');
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 jobBeforeRowSelect( mySelectionModel, rowIndex, keepExisting, myRecord )
513	{
514	if( myRecord.get('status') == 'Q' )
515	{ // return false: dont select row if queued
516	return false;
517	}
518
519	return true;
520	}
521
522	function jobRowSelect( mySelectionModel, rowIndex, myRecord )
523	{
524	if( mySelectionModel.hasSelection() )
525	{
526	showGraphsButton.enable();
527
528	return 0;
529	}
530
531	showGraphsButton.disable();
532	}
533
534	function jobCellClick(grid, rowIndex, columnIndex, e)
535	{
536	var record = grid.getStore().getAt(rowIndex); // Get the Record
537	var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
538	var data = record.get(fieldName);
539	var view = grid.getView();
540	var cell = view.getCell( rowIndex, columnIndex );
541	var filter_title = false;
542	var fil_dis = 'filter';
543	var fil_ena = 'filterenabled';
544	var filterName = fieldName;
545
546	if( fieldName == 'owner' \|\| fieldName == 'jid' \|\| fieldName == 'status' \|\| fieldName == 'queue' \|\| fieldName == 'nodes')
547	{
548	if( fieldName == 'nodes' )
549	{
550	filterName = 'host';
551	fil_dis = 'nodesfilter';
552	fil_ena = 'nodesfilterenabled';
553	}
554	if( inMyArrayKeys( myfilters, filterName ) )
555	{
556	Ext.fly(cell).removeClass( fil_ena );
557	Ext.fly(cell).addClass( fil_dis );
558
559	// Remove this filter
560	//
561	delete myfilters[filterName];
562	delete myparams[filterName];
563
564	reloadJobStore();
565	//reloadClusterImage();
566	}
567	else
568	{
569	Ext.fly(cell).removeClass( fil_dis );
570	Ext.fly(cell).addClass( fil_ena );
571
572	if( fieldName == 'nodes' )
573	{ // Get the first node (master mom) as node filter
574	new_data = data.split( ',' )[0];
575	data = new_data;
576	}
577
578	// Set filter for selected column to selected cell value
579	//
580	myfilters[filterName] = data;
581
582	reloadJobStore();
583	//reloadClusterImage();
584	}
585	JobListingWindow.setTitle( filter_str );
586
587	filter_title = true;
588	filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
589	}
590	}
591
592	function jobCellRender( value, metadata, record, rowindex, colindex, store )
593	{
594	var fieldName = JobsColumnModel.getColumnById( colindex ).dataIndex;
595	var fil_dis = 'filter';
596	var fil_ena = 'filterenabled';
597	var filterName = fieldName;
598
599	if( fieldName == 'owner' \|\| fieldName == 'jid' \|\| fieldName == 'status' \|\| fieldName == 'queue' \|\| fieldName == 'nodes' )
600	{
601	if( fieldName == 'nodes' )
602	{
603	fil_dis = 'nodesfilter';
604	fil_ena = 'nodesfilterenabled';
605	filterName = 'host';
606	}
607	if( myfilters[filterName] != null )
608	{
609	metadata.css = fil_ena;
610	}
611	else
612	{
613	metadata.css = fil_dis;
614	}
615	}
616	return value;
617	}
618
619	var JobProxy = new Ext.data.HttpProxy(
620	{
621	url: 'jobstore.php',
622	method: 'POST'
623	});
624
625	JobsDataStore = new Ext.data.Store(
626	{
627	id: 'JobsDataStore',
628	proxy: JobProxy,
629	baseParams: { task: "GETJOBS" },
630	reader:
631	new Ext.data.JsonReader(
632	{
633	root: 'results',
634	totalProperty: 'total',
635	id: 'id'
636	},
637	[
638	{name: 'jid', type: 'int', mapping: 'jid'},
639	{name: 'status', type: 'string', mapping: 'status'},
640	{name: 'owner', type: 'string', mapping: 'owner'},
641	{name: 'queue', type: 'string', mapping: 'queue'},
642	{name: 'name', type: 'string', mapping: 'name'},
643	{name: 'requested_time', type: 'string', mapping: 'requested_time'},
644	{name: 'requested_memory', type: 'string', mapping: 'requested_memory'},
645	{name: 'ppn', type: 'int', mapping: 'ppn'},
646	{name: 'nodect', type: 'int', mapping: 'nodect'},
647	{name: 'nodes', type: 'string', mapping: 'nodes'},
648	{name: 'queued_timestamp', type: 'string', mapping: 'queued_timestamp'},
649	{name: 'start_timestamp', type: 'string', mapping: 'start_timestamp'},
650	{name: 'runningtime', type: 'string', mapping: 'runningtime'}
651	]),
652	sortInfo:
653	{
654	field: 'jid',
655	direction: "DESC"
656	},
657	remoteSort: true,
658	listeners:
659	{
660	'beforeload':
661	{
662	scope: this,
663	fn:
664
665	function( myStore, myOptions )
666	{
667	// Add a (bogus) timestamp, to create a unique url and prevent browser caching
668	//
669	myStore.proxy.url = 'jobstore.php?timestamp=' + new Date().getTime();
670
671	if( SearchField )
672	{
673	search_value = SearchField.getEl().dom.value;
674	if( search_value == '' )
675	{
676	delete SearchField.store.baseParams['query'];
677	delete myfilters['query'];
678	delete myparams['query'];
679	}
680	else
681	{
682	myfilters['query'] = search_value;
683	}
684
685	makeFilterMenu();
686	reloadClusterImage();
687
688	filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
689	JobListingWindow.setTitle( filter_str );
690	}
691	}
692	}
693	}
694	});
695
696	var CheckJobs =
697
698	new Ext.grid.CheckboxSelectionModel(
699	{
700	listeners:
701	{
702	'beforerowselect':
703	{
704	scope: this,
705	fn: jobBeforeRowSelect
706	},
707	'rowselect':
708	{
709	scope: this,
710	fn: jobRowSelect
711	},
712	'rowdeselect':
713	{
714	scope: this,
715	fn: jobRowSelect
716	}
717	}
718	});
719
720	JobsColumnModel = new Ext.grid.ColumnModel(
721	[
722	CheckJobs,
723	{
724	header: '#',
725	tooltip: 'Job id',
726	readOnly: true,
727	dataIndex: 'jid',
728	width: 50,
729	hidden: false,
730	renderer: jobCellRender
731	},{
732	header: 'S',
733	tooltip: 'Job status',
734	readOnly: true,
735	dataIndex: 'status',
736	width: 20,
737	hidden: false,
738	renderer: jobCellRender
739	},{
740	header: 'User',
741	tooltip: 'Owner of job',
742	readOnly: true,
743	dataIndex: 'owner',
744	width: 60,
745	hidden: false,
746	renderer: jobCellRender
747	},{
748	header: 'Queue',
749	tooltip: 'In which queue does this job reside',
750	readOnly: true,
751	dataIndex: 'queue',
752	width: 60,
753	hidden: false,
754	renderer: jobCellRender
755	},{
756	header: 'Name',
757	tooltip: 'Name of job',
758	readOnly: true,
759	dataIndex: 'name',
760	width: 100,
761	hidden: false
762	},{
763	header: 'Requested Time',
764	tooltip: 'Amount of requested time (wallclock)',
765	readOnly: true,
766	dataIndex: 'requested_time',
767	width: 100,
768	hidden: false
769	},{
770	header: 'Requested Memory',
771	tooltip: 'Amount of requested memory',
772	readOnly: true,
773	dataIndex: 'requested_memory',
774	width: 100,
775	hidden: true
776	},{
777	header: 'P',
778	tooltip: 'Number of processors per node (PPN)',
779	readOnly: true,
780	dataIndex: 'ppn',
781	width: 25,
782	hidden: false
783	},{
784	header: 'N',
785	tooltip: 'Number of nodes (hosts)',
786	readOnly: true,
787	dataIndex: 'nodect',
788	width: 25,
789	hidden: false
790	},{
791	header: 'Nodes',
792	readOnly: true,
793	dataIndex: 'nodes',
794	width: 100,
795	hidden: false,
796	renderer: jobCellRender
797	},{
798	header: 'Queued',
799	tooltip: 'At what time did this job enter the queue',
800	readOnly: true,
801	dataIndex: 'queued_timestamp',
802	width: 120,
803	hidden: false
804	},{
805	header: 'Started',
806	tooltip: 'At what time did this job enter the running status',
807	readOnly: true,
808	dataIndex: 'start_timestamp',
809	width: 120,
810	hidden: false
811	},{
812	header: 'Runningtime',
813	tooltip: 'How long has this job been in the running status',
814	readOnly: true,
815	dataIndex: 'runningtime',
816	width: 140,
817	hidden: false
818	}
819	]);
820
821	JobsColumnModel.defaultSortable = true;
822
823	var win;
824
825	MetricsDataStore = new Ext.data.Store(
826	{
827	id: 'MetricsDataStore',
828	proxy: new Ext.data.HttpProxy(
829	{
830	url: 'jobstore.php',
831	method: 'POST'
832	}),
833	autoLoad: true,
834	baseParams: { task: "GETMETRICS" },
835	reader:
836	new Ext.data.JsonReader(
837	{
838	root: 'names',
839	totalProperty: 'total',
840	id: 'id'
841	},
842	[{
843	name: 'ID'
844	},{
845	name: 'name'
846	}
847	]),
848	listeners:
849	{
850	'beforeload':
851	{
852	scope: this,
853	fn:
854
855	function( myStore, myOptions )
856	{
857	// Add a (bogus) timestamp, to create a unique url and prevent browser caching
858	//
859	myStore.proxy.url = 'jobstore.php?timestamp=' + new Date().getTime();
860	}
861	}
862	}
863	});
864
865	SearchField = new Ext.app.SearchField(
866	{
867	store: JobsDataStore,
868	params: {start: 0, limit: mylimit},
869	width: 200
870	});
871
872	function createNodesDataStore( cluster, jid )
873	{
874	nodesDataStore =
875
876	new Ext.data.Store(
877	{
878	//id: 'NodesDataStore',
879	proxy: new Ext.data.HttpProxy(
880	{
881	url: 'jobstore.php',
882	method: 'POST'
883	}),
884	autoLoad: true,
885	baseParams:
886	{
887	'task': "GETNODES",
888	'c': cluster,
889	'jid': jid
890	},
891	reader: new Ext.data.JsonReader(
892	{
893	root: 'results',
894	totalProperty: 'total',
895	id: 'id'
896	},[
897	{name: 'jid', type: 'string', mapping: 'jid'},
898	{name: 'ga', type: 'string', mapping: 'ga'}
899	]),
900	listeners:
901	{
902	'beforeload':
903	{
904	scope: this,
905	fn:
906
907	function( myStore, myOptions )
908	{
909	// Add a (bogus) timestamp, to create a unique url and prevent browser caching
910	//
911	myStore.proxy.url = 'jobstore.php?timestamp=' + new Date().getTime();
912	}
913	}
914	}
915
916	});
917
918	return nodesDataStore;
919	}
920
921	function createGraphView( store, jid )
922	{
923	var graphView =
924
925	new Ext.DataView(
926	{
927	//id: jid,
928	itemSelector: 'thumb',
929	title: jid,
930	style: 'overflow:auto, heigth: auto',
931	multiSelect: true,
932	//autoHeight: true,
933	autoShow: true,
934	//autoScroll: true,
935	//loadMask: true,
936	store: store,
937	//layout: 'fit',
938	closable: true,
939	tpl:
940
941	new Ext.XTemplate(
942	'<tpl for=".">',
943	'<div class="rrd-float"><a href="./graph.php?z=large&{ga}" border="0" rel="lightbox[{jid}.{[globalWindowCount]}]"><img src="./graph.php?z=small&{ga}" border="0"></a></div>',
944	'</tpl>')
945	});
946
947	return graphView;
948	}
949
950	function createGraphPanel( view )
951	{
952	var graphPanel =
953
954	new Ext.TabPanel(
955	{
956	id: 'tabPanel',
957	region: 'center',
958	//bodyStyle: 'background: transparent',
959	autoShow: true,
960	//autoHeight: true,
961	autoWidth: true,
962	//autoScroll: true,
963	//resizeTabs: true,
964	bodyStyle: 'overflow:auto; background: transparent; heigth: auto',
965	//bodyStyle: 'overflow:auto; background: transparent',
966	//bodyBorder: false,
967	minTabWidth: 60,
968	//tabWidth: 135,
969	enableTabScroll:true,
970	//resizeTabs: false,
971	// RB TODO: range combobox; hour, day, week, etc
972
973	tbar:
974	[
975	new Ext.form.ComboBox(
976	{
977	fieldLabel: 'Metric',
978	id: 'myComboBox',
979	store: MetricsDataStore,
980	valueField: 'name',
981	displayField: 'name',
982	typeAhead: true,
983	mode: 'remote',
984	triggerAction: 'all',
985	emptyText: 'load_one',
986	selectOnFocus: true,
987	xtype: 'combo',
988	width: 190,
989	myview: view,
990	listeners:
991	{
992	select:
993
994	function(combo, record, index)
995	{
996	var metric = record.data.name;
997	// doe iets
998
999	//this.myview.getStore().baseParams.metricname = metric;
1000	//this.myview.refresh();
1001	// RB: misschien zo metric opgeven aan datastore?
1002	//items[0].items[0].getStore().baseParams.metric = metric;
1003	}
1004	}
1005	})
1006	]
1007	});
1008
1009	return graphPanel;
1010	}
1011
1012	function createGraphWindow( panel, Button )
1013	{
1014	graphWindow =
1015
1016	new Ext.Window(
1017	{
1018	animateTarget: Button,
1019	width: 500,
1020	height: 300,
1021	closeAction: 'hide',
1022	collapsible: true,
1023	animCollapse: true,
1024	maximizable: true,
1025	//autoScroll: true,
1026	//defaults: {autoScroll:true},
1027	title: 'Node graph details',
1028	tbar: panel,
1029
1030	listeners:
1031	{
1032	resize:
1033
1034	function( myWindow, width, height )
1035	{
1036	var myPanel = myWindow.items.get( 'tabPanel' );
1037	var myView = myPanel.getActiveTab();
1038
1039	myPanel.doLayout();
1040	myWindow.doLayout();
1041	}
1042	}
1043	});
1044
1045	return graphWindow;
1046	}
1047
1048	function ShowGraphs( Button, Event )
1049	{
1050	var row_records = CheckJobs.getSelections();
1051	var graphJids = Array();
1052	var windowCount = 0;
1053	var tabCount = 0;
1054
1055	for( var i=0; i<row_records.length; i++ )
1056	{
1057	rsel = row_records[i];
1058	jid = rsel.get('jid');
1059
1060	if( graphJids[windowCount] == undefined )
1061	{
1062	graphJids[windowCount] = Array();
1063	}
1064
1065	graphJids[windowCount][tabCount] = jid;
1066
1067	if( (i+1) < row_records.length )
1068	{
1069	if( graphWindowBehaviour == 'new-window' )
1070	{
1071	windowCount++;
1072	}
1073	else
1074	{
1075	tabCount++;
1076	}
1077	}
1078	}
1079
1080	for( var w=0; w<=windowCount; w++ )
1081	{
1082	if( ( graphWindowBehaviour == 'tabbed-prev-window' ) && ( previousGraphWindow != null ) && ( previousGraphPanel != null ) )
1083	{
1084	myWindow = previousGraphWindow;
1085	myPanel = previousGraphPanel;
1086	}
1087	else
1088	{
1089	myPanel = createGraphPanel();
1090	myWindow = createGraphWindow( myPanel, Button );
1091
1092	myWindow.add( myPanel );
1093
1094	globalWindowCount++;
1095	}
1096
1097	for( var t=0; t<=tabCount; t++ )
1098	{
1099	nodeDatastore = createNodesDataStore( myparams.c, graphJids[w][t] );
1100	graphView = createGraphView( nodeDatastore, graphJids[w][t] );
1101
1102	nodeDatastore.removeAll();
1103
1104	lastView = myPanel.add( graphView );
1105
1106	myPanel.doLayout();
1107	}
1108
1109	myPanel.setActiveTab( lastView );
1110
1111	myWindow.show( Button );
1112	myWindow.doLayout();
1113
1114	previousGraphWindow = myWindow;
1115	previousGraphPanel = myPanel;
1116	}
1117	}
1118
1119	var JobListingEditorGrid =
1120
1121	new Ext.grid.EditorGridPanel(
1122	{
1123	id: 'JobListingEditorGrid',
1124	store: JobsDataStore,
1125	cm: JobsColumnModel,
1126	enableColLock: false,
1127	clicksToEdit: 1,
1128	loadMask: true,
1129	selModel: new Ext.grid.RowSelectionModel( { singleSelect: false } ),
1130	stripeRows: true,
1131	sm: CheckJobs,
1132	listeners:
1133	{
1134	'cellclick':
1135	{
1136	scope: this,
1137	fn: jobCellClick
1138	}
1139	},
1140	bbar:
1141
1142	new Ext.PagingToolbar(
1143	{
1144	pageSize: 15,
1145	store: JobsDataStore,
1146	displayInfo: true,
1147	displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total.',
1148	emptyMsg: 'No jobs found to display',
1149	plugins: [ new Ext.ux.ProgressBarPager(), new Ext.ux.PageSizePlugin() ]
1150	}),
1151
1152	tbar:
1153	[
1154	SearchField,
1155	'-',
1156	showGraphsButton,
1157	'-',
1158	filterButton
1159	]
1160	});
1161
1162	var ClusterImageWindow =
1163
1164	new Ext.Window(
1165	{
1166	id: 'ClusterImageWindow',
1167	title: 'Nodes',
1168	closable: true,
1169	collapsible: true,
1170	animCollapse: true,
1171	width: 1,
1172	height: 1,
1173	y: 15,
1174	plain: true,
1175	shadow: true,
1176	resizable: false,
1177	shadowOffset: 10,
1178	layout: 'fit',
1179	bbar:
1180
1181	new Ext.ux.StatusBar(
1182	{
1183	defaultText: 'Ready.',
1184	id: 'basic-statusbar',
1185	defaultIconCls: ''
1186	})
1187	});
1188
1189	var GraphSummaryWindow =
1190
1191	new Ext.Window(
1192	{
1193	id: 'GraphSummaryWindow',
1194	title: 'Graph Summary',
1195	closable: true,
1196	collapsible: true,
1197	animCollapse: true,
1198	width: 500,
1199	height: 400,
1200	x: 10,
1201	y: 10,
1202	plain: true,
1203	shadow: true,
1204	resizable: true,
1205	shadowOffset: 10,
1206	layout: 'table',
1207	layoutConfig:
1208	{
1209	columns: 2
1210	},
1211	defaults: { border: false },
1212	items:
1213	[
1214	{
1215	id: 'monarchlogo',
1216	cls: 'monarch',
1217	bodyStyle: 'background: transparent',
1218	html: '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
1219	//colspan: 2
1220	},{
1221	id: 'summarycount'
1222	},{
1223	id: 'rjqjgraph'
1224	},{
1225	id: 'pie',
1226	colspan: 2
1227	}
1228	],
1229	bbar:
1230
1231	new Ext.ux.StatusBar(
1232	{
1233	defaultText: 'Ready.',
1234	id: 'basic-statusbar',
1235	defaultIconCls: ''
1236	})
1237	});
1238
1239	var JobListingWindow =
1240
1241	new Ext.Window(
1242	{
1243	id: 'JobListingWindow',
1244	title: 'Cluster Jobs Overview',
1245	closable: true,
1246	collapsible: true,
1247	animCollapse: true,
1248	maximizable: true,
1249	y: 375,
1250	width: 860,
1251	height: 445,
1252	plain: true,
1253	shadow: true,
1254	shadowOffset: 10,
1255	layout: 'fit',
1256	items: JobListingEditorGrid
1257	});

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

Download in other formats: