Context Navigation

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

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

job_monarch/js/monarch.js:

layout fixes to graph views

File size: 23.0 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	//autoScroll: true,
902	loadMask: true,
903	store: store,
904	layout: 'fit',
905	tpl:
906
907	new Ext.XTemplate(
908	'<tpl for=".">',
909	'<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>',
910	'</tpl>'
911	)
912	});
913
914	return graphView;
915	}
916
917	function createGraphPanel( view )
918	{
919	var graphPanel =
920
921	new Ext.TabPanel(
922	{
923	id: 'tabPanel',
924	region: 'center',
925	bodyStyle: 'background: transparent',
926	autoShow: true,
927	autoHeight: true,
928	autoWidth: true,
929	//margins: '2 2 2 0',
930	//layout: 'fit',
931	resizeTabs: true,
932	minTabWidth: 60,
933	//tabWidth: 135,
934	//closeable: true,
935	enableTabScroll:true,
936	resizeTabs: true,
937	//defaults: {autoScroll:true},
938	listeners:
939	{
940	'tabchange':
941	{
942	scope: this,
943	fn: function( myTabPanel, tab )
944	{
945	//myTabPanel.items[0].refresh();
946	//this.view.refresh();
947	}
948	}
949	}
950	});
951
952	return graphPanel;
953	}
954
955	function createGraphWindow( panel, Button )
956	{
957	graphWindow =
958
959	new Ext.Window(
960	{
961	animateTarget: Button,
962	width: 500,
963	height: 300,
964	closeAction: 'hide',
965	collapsible: true,
966	animCollapse: true,
967	maximizable: true,
968	autoScroll: true,
969	defaults: {autoScroll:true},
970	title: 'Node graph details',
971	//layout: 'fit',
972	tbar:
973
974	// RB TODO: range combobox; hour, day, week, etc
975
976	new Ext.form.ComboBox(
977	{
978	fieldLabel: 'Metric',
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	listeners:
990	{
991	select:
992
993	function(combo, record, index)
994	{
995	var metric = record.data.name;
996	// doe iets
997
998	// RB: misschien zo metric opgeven aan datastore?
999	//items[0].items[0].getStore().baseParams.metric = metric;
1000	}
1001	}
1002	}),
1003
1004	items: [ panel ],
1005	listeners:
1006	{
1007	resize:
1008
1009	function( myWindow, width, height )
1010	{
1011	//var myPanel = myWindow.getComponent( 'tabPanel' ).getEl();
1012	var myPanel = myWindow.items.get( 'tabPanel' );
1013
1014	var myView = myPanel.getActiveTab();
1015
1016	//myView.doLayout();
1017	myPanel.doLayout();
1018	myWindow.doLayout();
1019	}
1020	}
1021	});
1022
1023	return graphWindow;
1024	}
1025
1026	function ShowGraphs( Button, Event )
1027	{
1028	var row_records = CheckJobs.getSelections();
1029	var graphJids = Array();
1030	var windowCount = 0;
1031	var tabCount = 0;
1032
1033	for( var i=0; i<row_records.length; i++ )
1034	{
1035	rsel = row_records[i];
1036	jid = rsel.get('jid');
1037
1038	if( graphJids[windowCount] == undefined )
1039	{
1040	graphJids[windowCount] = Array();
1041	}
1042
1043	graphJids[windowCount][tabCount] = jid;
1044
1045	if( (i+1) < row_records.length )
1046	{
1047	if( graphWindowBehaviour == 'new-window' )
1048	{
1049	windowCount++;
1050	}
1051	else
1052	{
1053	tabCount++;
1054	}
1055	}
1056	}
1057
1058	for( var w=0; w<=windowCount; w++ )
1059	{
1060	if( graphWindowBehaviour == 'tabbed-prev-window' )
1061	{
1062	myWindow = previousGraphWindow;
1063	myPanel = previousGraphPanel;
1064	}
1065	else
1066	{
1067	myPanel = createGraphPanel();
1068	myWindow = createGraphWindow( myPanel, Button );
1069
1070	myWindow.add( myPanel );
1071	}
1072
1073	for( var t=0; t<=tabCount; t++ )
1074	{
1075	nodeDatastore = createNodesDataStore( myparams.c, graphJids[w][t] );
1076	graphView = createGraphView( nodeDatastore, graphJids[w][t] );
1077
1078	nodeDatastore.removeAll();
1079
1080	lastView = myPanel.add( graphView );
1081
1082	myPanel.doLayout();
1083	}
1084
1085	myPanel.setActiveTab( lastView );
1086
1087	myWindow.show( Button );
1088	myWindow.doLayout();
1089
1090	previousGraphWindow = myWindow;
1091	previousGraphPanel = myPanel;
1092	}
1093	}
1094
1095	var JobListingEditorGrid =
1096
1097	new Ext.grid.EditorGridPanel(
1098	{
1099	id: 'JobListingEditorGrid',
1100	store: JobsDataStore,
1101	cm: JobsColumnModel,
1102	enableColLock: false,
1103	clicksToEdit: 1,
1104	loadMask: true,
1105	selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
1106	stripeRows: true,
1107	sm: CheckJobs,
1108	listeners:
1109	{
1110	'cellclick':
1111	{
1112	scope: this,
1113	fn: jobCellClick
1114	}
1115	},
1116	bbar:
1117
1118	new Ext.PagingToolbar(
1119	{
1120	pageSize: 15,
1121	store: JobsDataStore,
1122	displayInfo: true,
1123	displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total found.',
1124	emptyMsg: 'No jobs found to display',
1125	plugins: [ new Ext.ux.PageSizePlugin() ]
1126	}),
1127
1128	tbar:
1129	[
1130	SearchField,
1131	showGraphsButton,
1132	filterButton
1133	]
1134	});
1135
1136	var ClusterImageWindow =
1137
1138	new Ext.Window(
1139	{
1140	id: 'ClusterImageWindow',
1141	title: 'Nodes',
1142	closable: true,
1143	collapsible: true,
1144	animCollapse: true,
1145	width: 1,
1146	height: 1,
1147	y: 15,
1148	plain: true,
1149	shadow: true,
1150	resizable: false,
1151	shadowOffset: 10,
1152	layout: 'fit',
1153	bbar:
1154
1155	new Ext.StatusBar(
1156	{
1157	defaultText: 'Ready.',
1158	id: 'basic-statusbar',
1159	defaultIconCls: ''
1160	})
1161	});
1162
1163	var GraphSummaryWindow =
1164
1165	new Ext.Window(
1166	{
1167	id: 'GraphSummaryWindow',
1168	title: 'Graph Summary',
1169	closable: true,
1170	collapsible: true,
1171	animCollapse: true,
1172	width: 500,
1173	height: 400,
1174	x: 10,
1175	y: 10,
1176	plain: true,
1177	shadow: true,
1178	resizable: true,
1179	shadowOffset: 10,
1180	layout: 'table',
1181	layoutConfig:
1182	{
1183	columns: 2
1184	},
1185	defaults: { border: false },
1186	items:
1187	[
1188	{
1189	id: 'monarchlogo',
1190	cls: 'monarch',
1191	bodyStyle: 'background: transparent',
1192	html: '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
1193	//colspan: 2
1194	},{
1195	id: 'summarycount'
1196	},{
1197	id: 'rjqjgraph'
1198	},{
1199	id: 'pie',
1200	colspan: 2
1201	}
1202	],
1203	bbar:
1204
1205	new Ext.StatusBar(
1206	{
1207	defaultText: 'Ready.',
1208	id: 'basic-statusbar',
1209	defaultIconCls: ''
1210	})
1211	});
1212
1213	var JobListingWindow =
1214
1215	new Ext.Window(
1216	{
1217	id: 'JobListingWindow',
1218	title: 'Cluster Jobs Overview',
1219	closable: true,
1220	collapsible: true,
1221	animCollapse: true,
1222	maximizable: true,
1223	y: 375,
1224	width: 860,
1225	height: 445,
1226	plain: true,
1227	shadow: true,
1228	shadowOffset: 10,
1229	layout: 'fit',
1230	items: JobListingEditorGrid
1231	});

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

Download in other formats: