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

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

js/monarch.js:

  • fix: appareantly ExtJS 2.2.1 breaks on tab id
File size: 23.5 KB
Line 
1var JobsDataStore;
2var JobsColumnModel;
3var JobListingEditorGrid;
4var JobListingWindow;
5var JobProxy;
6var SearchField;
7var filterButton;
8var globalWindowCount = 0;
9
10// Extra header to prevent browser caching
11//
12Ext.Ajax.defaultHeaders =
13{
14        'If-Modified-Since':    'Sat, 1 Jan 2005 00:00:00 GMT'
15};
16
17// associative filter array
18//
19var myfilters = { };
20
21// any other datastore params
22//
23var myparams = { };
24
25// (default) paging size
26//
27var mylimit = 15;
28
29var ClusterImageArgs = { };
30
31var filterfields = [ "jid", "queue", "name", "owner" ];
32
33var graphWindowBehaviour = 'tabbed-new-window';
34var previousGraphWindow;
35
36var filterMenu = new Ext.menu.Menu(
37{
38        id:     'filterMenu',
39        items:  [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
40});
41
42var filterButton = new Ext.MenuButton(
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
62function checkGraphWindowOption( item, checked )
63{
64        graphWindowBehaviour    = item.id;
65}
66
67var 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
92var showGraphsButton = new Ext.MenuButton(
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
108Ext.namespace('Ext.ux');
109
110Ext.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
129Ext.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
160Ext.namespace( 'Ext' );
161
162function 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
199function 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
214function isset( somevar )
215{
216        try
217        {
218                if( eval( somevar ) ) { }
219        }
220        catch( err )
221        {
222                return false;
223        }
224        return true;
225}
226
227function 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
239function ArraySize( arr )
240{
241        count = 0;
242
243        for( arkey in arr )
244        {
245                count = count + 1;
246        }
247
248        return count;
249}
250
251function 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
263function 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
275function joinMyArray( arr1, arr2 )
276{
277        for( arkey in arr2 )
278        {
279                arr1[arkey] = arr2[arkey];
280        }
281
282        return arr1;
283}
284
285function 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
312function 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
325function 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
345function 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
357var ImageLoader = function( id, url )
358{
359        this.url = url;
360        this.image = document.getElementById( id );
361        this.loadEvent = null;
362};
363
364ImageLoader.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
387function achorJobListing()
388{
389        JobListingWindow.anchorTo( "ClusterImageWindow", "tr-br", [ 0, 10 ] );
390}
391
392function setClusterImagePosition()
393{
394        ci_x = (window.innerWidth - ClusterImageWindow.getSize()['width'] - 20); 
395        ClusterImageWindow.setPosition( ci_x, 10 );
396}
397
398function 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
419function 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
452function 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
477function 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
485Ext.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
512function 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
522function jobRowSelect( mySelectionModel, rowIndex, myRecord ) 
523{
524        if( mySelectionModel.hasSelection() )
525        {
526                showGraphsButton.enable();
527
528                return 0;
529        }
530
531        showGraphsButton.disable();
532}
533
534function 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
592function 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
619var JobProxy = new Ext.data.HttpProxy(
620{
621        url:            'jobstore.php',
622        method:         'POST'
623});
624
625JobsDataStore = 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   
696var 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
720JobsColumnModel = 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
821JobsColumnModel.defaultSortable = true;
822
823var win;
824
825MetricsDataStore = 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
865SearchField     = new Ext.app.SearchField(
866                {
867                        store:  JobsDataStore,
868                        params: {start: 0, limit: mylimit},
869                        width:  200
870                });
871
872function 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
921function 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',
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
950function 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                        minTabWidth:    60,
965                        //tabWidth:     135,
966                        //closeable:    true,
967                        enableTabScroll:true,
968                        resizeTabs:     true,
969                        // RB TODO: range combobox; hour, day, week, etc
970
971                        tbar:
972                        [
973                                new Ext.form.ComboBox(
974                                {
975                                        fieldLabel:     'Metric',
976                                        id:             'myComboBox',
977                                        store:          MetricsDataStore,
978                                        valueField:     'name',
979                                        displayField:   'name',
980                                        typeAhead:      true,
981                                        mode:           'remote',
982                                        triggerAction:  'all',
983                                        emptyText:      'load_one',
984                                        selectOnFocus:  true,
985                                        xtype:          'combo',
986                                        width:          190,
987                                        myview:         view,
988                                        listeners:
989                                        {
990                                                select: 
991                                                               
992                                                function(combo, record, index)
993                                                {
994                                                        var metric = record.data.name;
995                                                        // doe iets
996
997                                                        //this.myview.getStore().baseParams.metricname  = metric;
998                                                        //this.myview.refresh();
999                                                        // RB: misschien zo metric opgeven aan datastore?
1000                                                        //items[0].items[0].getStore().baseParams.metric = metric;
1001                                                }
1002                                        }
1003                                })
1004                        ]
1005                });
1006
1007        return graphPanel;
1008}
1009
1010function createGraphWindow( panel, Button )
1011{
1012        graphWindow =
1013
1014                new Ext.Window(
1015                {
1016                        animateTarget:  Button,
1017                        width:          500,
1018                        height:         300,
1019                        closeAction:    'hide',
1020                        collapsible:    true,
1021                        animCollapse:   true,
1022                        maximizable:    true,
1023                        //autoScroll:   true,
1024                        //defaults:     {autoScroll:true},
1025                        title:          'Node graph details',
1026                        tbar:           panel,
1027               
1028                        listeners:
1029                        {
1030                                resize:
1031
1032                                function(  myWindow, width, height )
1033                                {
1034                                        var myPanel     = myWindow.items.get( 'tabPanel' );
1035                                        var myView      = myPanel.getActiveTab();
1036
1037                                        myPanel.doLayout();
1038                                        myWindow.doLayout();
1039                                }
1040                        }
1041                });
1042
1043        return graphWindow;
1044}
1045
1046function ShowGraphs( Button, Event ) 
1047{
1048        var row_records         = CheckJobs.getSelections();
1049        var graphJids           = Array();
1050        var windowCount         = 0;
1051        var tabCount            = 0;
1052
1053        for( var i=0; i<row_records.length; i++ )
1054        {
1055                rsel            = row_records[i];
1056                jid             = rsel.get('jid');
1057
1058                if( graphJids[windowCount] == undefined )
1059                {
1060                        graphJids[windowCount]  = Array();
1061                }
1062
1063                graphJids[windowCount][tabCount]        = jid;
1064
1065                if( (i+1) < row_records.length )
1066                {
1067                        if( graphWindowBehaviour == 'new-window' )
1068                        {
1069                                windowCount++;
1070                        }
1071                        else
1072                        {
1073                                tabCount++;
1074                        }
1075                }
1076        }
1077
1078        for( var w=0; w<=windowCount; w++ )
1079        {
1080                if( ( graphWindowBehaviour == 'tabbed-prev-window' ) && ( previousGraphWindow != null ) && ( previousGraphPanel != null ) )
1081                {
1082                        myWindow        = previousGraphWindow;
1083                        myPanel         = previousGraphPanel;
1084                }
1085                else
1086                {
1087                        myPanel         = createGraphPanel();
1088                        myWindow        = createGraphWindow( myPanel, Button );
1089
1090                        myWindow.add( myPanel );
1091
1092                        globalWindowCount++;
1093                }
1094
1095                for( var t=0; t<=tabCount; t++ )
1096                {
1097                        nodeDatastore   = createNodesDataStore( myparams.c, graphJids[w][t] );
1098                        graphView       = createGraphView( nodeDatastore, graphJids[w][t] );
1099
1100                        nodeDatastore.removeAll();
1101
1102                        lastView        = myPanel.add( graphView );
1103
1104                        myPanel.doLayout();
1105                }
1106
1107                myPanel.setActiveTab( lastView );
1108
1109                myWindow.show( Button );
1110                myWindow.doLayout();
1111
1112                previousGraphWindow     = myWindow;
1113                previousGraphPanel      = myPanel;
1114        }
1115}
1116
1117var JobListingEditorGrid =
1118
1119        new Ext.grid.EditorGridPanel(
1120        {
1121                id:             'JobListingEditorGrid',
1122                store:          JobsDataStore,
1123                cm:             JobsColumnModel,
1124                enableColLock:  false,
1125                clicksToEdit:   1,
1126                loadMask:       true,
1127                selModel:       new Ext.grid.RowSelectionModel( { singleSelect: false } ),
1128                stripeRows:     true,
1129                sm:             CheckJobs,
1130                listeners:
1131                {
1132                        'cellclick':
1133                        {
1134                                scope:  this,
1135                                fn:     jobCellClick
1136                        }
1137                },
1138                bbar:
1139       
1140                new Ext.PagingToolbar(
1141                {
1142                        pageSize:       15,
1143                        store:          JobsDataStore,
1144                        displayInfo:    true,
1145                        displayMsg:     'Displaying jobs {0} - {1} out of {2} jobs total found.',
1146                        emptyMsg:       'No jobs found to display',
1147                        plugins:        [ new Ext.ux.PageSizePlugin() ]
1148                }),
1149
1150                tbar: 
1151                [ 
1152                        SearchField,
1153                        showGraphsButton,
1154                        filterButton 
1155                ]
1156        });
1157
1158var ClusterImageWindow =
1159
1160        new Ext.Window(
1161        {
1162                id:             'ClusterImageWindow',
1163                title:          'Nodes',
1164                closable:       true,
1165                collapsible:    true,
1166                animCollapse:   true,
1167                width:          1,
1168                height:         1,
1169                y:              15,
1170                plain:          true,
1171                shadow:         true,
1172                resizable:      false,
1173                shadowOffset:   10,
1174                layout:         'fit',
1175                bbar: 
1176               
1177                        new Ext.StatusBar(
1178                        {
1179                                defaultText:    'Ready.',
1180                                id:             'basic-statusbar',
1181                                defaultIconCls: ''
1182                        })
1183        });
1184
1185var GraphSummaryWindow =
1186
1187        new Ext.Window(
1188        {
1189                id:             'GraphSummaryWindow',
1190                title:          'Graph Summary',
1191                closable:       true,
1192                collapsible:    true,
1193                animCollapse:   true,
1194                width:          500,
1195                height:         400,
1196                x:              10,
1197                y:              10,
1198                plain:          true,
1199                shadow:         true,
1200                resizable:      true,
1201                shadowOffset:   10,
1202                layout:         'table',
1203                layoutConfig: 
1204                {
1205                        columns: 2
1206                },
1207                defaults:       { border: false },
1208                items: 
1209                [
1210                        {
1211                                id:             'monarchlogo',
1212                                cls:            'monarch',
1213                                bodyStyle:      'background: transparent',
1214                                html:           '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
1215                                //colspan: 2
1216                        },{
1217                                id:             'summarycount'
1218                        },{
1219                                id:             'rjqjgraph'
1220                        },{
1221                                id:             'pie',
1222                                colspan:        2
1223                        }
1224                ],
1225                bbar:
1226               
1227                        new Ext.StatusBar(
1228                        {
1229                                defaultText:    'Ready.',
1230                                id:             'basic-statusbar',
1231                                defaultIconCls: ''
1232                        })
1233        });
1234
1235var JobListingWindow =
1236
1237        new Ext.Window(
1238        {
1239                id:             'JobListingWindow',
1240                title:          'Cluster Jobs Overview',
1241                closable:       true,
1242                collapsible:    true,
1243                animCollapse:   true,
1244                maximizable:    true,
1245                y:              375,
1246                width:          860,
1247                height:         445,
1248                plain:          true,
1249                shadow:         true,
1250                shadowOffset:   10,
1251                layout:         'fit',
1252                items:          JobListingEditorGrid
1253        });
Note: See TracBrowser for help on using the repository browser.