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

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

job_monarch/js/monarch.js,
job_monarch/templates/header.tpl,
job_monarch/lib/extjs-30/BufferView.js:

  • add grid view Buffering
File size: 23.9 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.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
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.Toolbar.SplitButton(
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], ['250', 250], ['500', 500], ['all', 'max' ]]
118                }),
119                mode:           'local',
120                displayField:   'text',
121                valueField:     'value',
122                editable:       false,
123                allowBlank:     false,
124                triggerAction:  'all',
125                width:          50
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, 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
950function createGraphPanel( view )
951{
952        var scrollerMenu = new Ext.ux.TabScrollerMenu(
953        {
954                maxText  : 15,
955                pageSize : 5
956        });
957
958
959        var graphPanel = 
960
961                new Ext.TabPanel(
962                {
963                        id:             'tabPanel',
964                        //region:               'center',
965                        //bodyStyle:    'background: transparent',
966                        autoShow:       true,
967                        //autoHeight:   true,
968                        //autoWidth:    true,
969                        enableTabScroll:true,
970                        resizeTabs:     true,
971                        border:         false,
972                        bodyStyle:      'overflow:auto; background: transparent; heigth: auto',
973                        minTabWidth:    60,
974                        plugins:        [ scrollerMenu ],
975
976                        // RB TODO: range combobox; hour, day, week, etc
977
978                        tbar:
979                        [
980                                new Ext.form.ComboBox(
981                                {
982                                        fieldLabel:     'Metric',
983                                        id:             'myComboBox',
984                                        store:          MetricsDataStore,
985                                        valueField:     'name',
986                                        displayField:   'name',
987                                        typeAhead:      true,
988                                        mode:           'remote',
989                                        triggerAction:  'all',
990                                        emptyText:      'load_one',
991                                        selectOnFocus:  true,
992                                        xtype:          'combo',
993                                        width:          190,
994                                        myview:         view,
995                                        listeners:
996                                        {
997                                                select: 
998                                                               
999                                                function(combo, record, index)
1000                                                {
1001                                                        var metric = record.data.name;
1002                                                        // doe iets
1003
1004                                                        //this.myview.getStore().baseParams.metricname  = metric;
1005                                                        //this.myview.refresh();
1006                                                        // RB: misschien zo metric opgeven aan datastore?
1007                                                        //items[0].items[0].getStore().baseParams.metric = metric;
1008                                                }
1009                                        }
1010                                })
1011                        ]
1012                });
1013
1014        return graphPanel;
1015}
1016
1017function createGraphWindow( panel, Button )
1018{
1019        graphWindow =
1020
1021                new Ext.Window(
1022                {
1023                        animateTarget:  Button,
1024                        width:          500,
1025                        height:         300,
1026                        closeAction:    'hide',
1027                        collapsible:    true,
1028                        animCollapse:   true,
1029                        maximizable:    true,
1030                        layout:         'fit',
1031                        //autoScroll:   true,
1032                        //defaults:     {autoScroll:true},
1033                        title:          'Node graph details',
1034                        //tbar:         panel,
1035                        items:          panel,
1036               
1037                        listeners:
1038                        {
1039                                resize:
1040
1041                                function(  myWindow, width, height )
1042                                {
1043                                        var myPanel     = myWindow.items.get( 'tabPanel' );
1044                                        var myView      = myPanel.getActiveTab();
1045
1046                                        myPanel.doLayout();
1047                                        myWindow.doLayout();
1048                                }
1049                        }
1050                });
1051
1052        return graphWindow;
1053}
1054
1055function ShowGraphs( Button, Event ) 
1056{
1057        var row_records         = CheckJobs.getSelections();
1058        var graphJids           = Array();
1059        var windowCount         = 0;
1060        var tabCount            = 0;
1061
1062        for( var i=0; i<row_records.length; i++ )
1063        {
1064                rsel            = row_records[i];
1065                jid             = rsel.get('jid');
1066
1067                if( graphJids[windowCount] == undefined )
1068                {
1069                        graphJids[windowCount]  = Array();
1070                }
1071
1072                graphJids[windowCount][tabCount]        = jid;
1073
1074                if( (i+1) < row_records.length )
1075                {
1076                        if( graphWindowBehaviour == 'new-window' )
1077                        {
1078                                windowCount++;
1079                        }
1080                        else
1081                        {
1082                                tabCount++;
1083                        }
1084                }
1085        }
1086
1087        for( var w=0; w<=windowCount; w++ )
1088        {
1089                if( ( graphWindowBehaviour == 'tabbed-prev-window' ) && ( previousGraphWindow != null ) && ( previousGraphPanel != null ) )
1090                {
1091                        myWindow        = previousGraphWindow;
1092                        myPanel         = previousGraphPanel;
1093                }
1094                else
1095                {
1096                        myPanel         = createGraphPanel();
1097                        myWindow        = createGraphWindow( myPanel, Button );
1098
1099                        myWindow.add( myPanel );
1100
1101                        globalWindowCount++;
1102                }
1103
1104                for( var t=0; t<=tabCount; t++ )
1105                {
1106                        nodeDatastore   = createNodesDataStore( myparams.c, graphJids[w][t] );
1107                        graphView       = createGraphView( nodeDatastore, graphJids[w][t] );
1108
1109                        nodeDatastore.removeAll();
1110
1111                        lastView        = myPanel.add( graphView );
1112
1113                        myPanel.doLayout();
1114                }
1115
1116                myPanel.setActiveTab( lastView );
1117
1118                myWindow.show( Button );
1119                myWindow.doLayout();
1120
1121                previousGraphWindow     = myWindow;
1122                previousGraphPanel      = myPanel;
1123        }
1124}
1125
1126var JobListingEditorGrid =
1127
1128        new Ext.grid.EditorGridPanel(
1129        {
1130                id:             'JobListingEditorGrid',
1131                store:          JobsDataStore,
1132                cm:             JobsColumnModel,
1133                enableColLock:  false,
1134                clicksToEdit:   1,
1135                loadMask:       true,
1136                selModel:       new Ext.grid.RowSelectionModel( { singleSelect: false } ),
1137                stripeRows:     true,
1138                sm:             CheckJobs,
1139                listeners:
1140                {
1141                        'cellclick':
1142                        {
1143                                scope:  this,
1144                                fn:     jobCellClick
1145                        }
1146                },
1147                bbar:
1148       
1149                new Ext.PagingToolbar(
1150                {
1151                        pageSize:       15,
1152                        store:          JobsDataStore,
1153                        displayInfo:    true,
1154                        displayMsg:     'Displaying jobs {0} - {1} out of {2} jobs total.',
1155                        emptyMsg:       'No jobs found to display',
1156                        plugins:        [ new Ext.ux.ProgressBarPager(), new Ext.ux.PageSizePlugin() ]
1157                }),
1158
1159                tbar: 
1160                [ 
1161                        SearchField,
1162                        '-',
1163                        showGraphsButton,
1164                        '-',
1165                        filterButton 
1166                ],
1167
1168                view:           new Ext.ux.grid.BufferView(
1169                {
1170                        // custom row height
1171                        //rowHeight: 34,
1172                        // render rows as they come into viewable area.
1173                        scrollDelay: false
1174                })
1175
1176        });
1177
1178var ClusterImageWindow =
1179
1180        new Ext.Window(
1181        {
1182                id:             'ClusterImageWindow',
1183                title:          'Nodes',
1184                closable:       true,
1185                collapsible:    true,
1186                animCollapse:   true,
1187                width:          1,
1188                height:         1,
1189                y:              15,
1190                plain:          true,
1191                shadow:         true,
1192                resizable:      false,
1193                shadowOffset:   10,
1194                layout:         'fit',
1195                bbar: 
1196               
1197                        new Ext.ux.StatusBar(
1198                        {
1199                                defaultText:    'Ready.',
1200                                id:             'basic-statusbar',
1201                                defaultIconCls: ''
1202                        })
1203        });
1204
1205var GraphSummaryWindow =
1206
1207        new Ext.Window(
1208        {
1209                id:             'GraphSummaryWindow',
1210                title:          'Graph Summary',
1211                closable:       true,
1212                collapsible:    true,
1213                animCollapse:   true,
1214                width:          500,
1215                height:         400,
1216                x:              10,
1217                y:              10,
1218                plain:          true,
1219                shadow:         true,
1220                resizable:      true,
1221                shadowOffset:   10,
1222                layout:         'table',
1223                layoutConfig: 
1224                {
1225                        columns: 2
1226                },
1227                defaults:       { border: false },
1228                items: 
1229                [
1230                        {
1231                                id:             'monarchlogo',
1232                                cls:            'monarch',
1233                                bodyStyle:      'background: transparent',
1234                                //html:         '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
1235                                //colspan: 2
1236                        },{
1237                                id:             'summarycount'
1238                        },{
1239                                id:             'rjqjgraph'
1240                        },{
1241                                id:             'pie',
1242                                colspan:        2
1243                        }
1244                ],
1245                bbar:
1246               
1247                        new Ext.ux.StatusBar(
1248                        {
1249                                defaultText:    'Ready.',
1250                                id:             'basic-statusbar',
1251                                defaultIconCls: ''
1252                        })
1253        });
1254
1255var JobListingWindow =
1256
1257        new Ext.Window(
1258        {
1259                id:             'JobListingWindow',
1260                title:          'Cluster Jobs Overview',
1261                closable:       true,
1262                collapsible:    true,
1263                animCollapse:   true,
1264                maximizable:    true,
1265                y:              375,
1266                width:          860,
1267                height:         445,
1268                plain:          true,
1269                shadow:         true,
1270                shadowOffset:   10,
1271                layout:         'fit',
1272                items:          JobListingEditorGrid
1273        });
Note: See TracBrowser for help on using the repository browser.