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

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

job_monarch/js/monarch.js:

  • regression testing
File size: 24.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                'load':
694                {
695                        scope: this,
696                        fn:
697
698                        function( store, records, options )
699                        {
700                                if( records.length == 1 ) // TODO: if job state is running
701                                {
702                                        jobid           = records[0].get('jid');
703
704                                        myPanel         = createGraphPanel();
705                                        nodeDatastore   = createNodesDataStore( myparams.c, jobid );
706                                        graphView       = createGraphView( nodeDatastore, jobid );
707
708                                        //graphView.autoShow = true;
709
710                                        newtab = myPanel.add( graphView );
711                                        myPanel.setActiveTab( newtab );
712                                        myPanel.doLayout();
713
714                                        //nodeDatastore.removeAll();
715
716                                        Ext.getCmp('preview-pane').removeAll();
717                                        Ext.getCmp('preview-pane').add( myPanel );
718                                        Ext.getCmp('preview-pane').doLayout();
719                                }
720                                else
721                                {
722                                        Ext.getCmp('preview-pane').removeAll();
723                                        Ext.getCmp('preview-pane').doLayout();
724                                }
725                        }
726                }
727        }
728});
729   
730var CheckJobs =
731
732        new Ext.grid.CheckboxSelectionModel(
733        {
734                listeners:
735                {
736                        'beforerowselect':
737                        {
738                                scope:  this,
739                                fn:     jobBeforeRowSelect
740                        },
741                        'rowselect':
742                        {
743                                scope:  this,
744                                fn:     jobRowSelect
745                        },
746                        'rowdeselect':
747                        {
748                                scope:  this,
749                                fn:     jobRowSelect
750                        }
751                }
752        });
753
754JobsColumnModel = new Ext.grid.ColumnModel(
755[
756        CheckJobs,
757        {
758                header:         '#',
759                tooltip:        'Job id',
760                readOnly:       true,
761                dataIndex:      'jid',
762                width:          50,
763                hidden:         false,
764                renderer:       jobCellRender
765        },{
766                header:         'S',
767                tooltip:        'Job status',
768                readOnly:       true,
769                dataIndex:      'status',
770                width:          20,
771                hidden:         false,
772                renderer:       jobCellRender
773        },{
774                header:         'User',
775                tooltip:        'Owner of job',
776                readOnly:       true,
777                dataIndex:      'owner',
778                width:          60,
779                hidden:         false,
780                renderer:       jobCellRender
781        },{
782                header:         'Queue',
783                tooltip:        'In which queue does this job reside',
784                readOnly:       true,
785                dataIndex:      'queue',
786                width:          60,
787                hidden:         false,
788                renderer:       jobCellRender
789        },{
790                header:         'Name',
791                tooltip:        'Name of job',
792                readOnly:       true,
793                dataIndex:      'name',
794                width:          100,
795                hidden:         false
796        },{
797                header:         'Requested Time',
798                tooltip:        'Amount of requested time (wallclock)',
799                readOnly:       true,
800                dataIndex:      'requested_time',
801                width:          100,
802                hidden:         false
803        },{
804                header:         'Requested Memory',
805                tooltip:        'Amount of requested memory',
806                readOnly:       true,
807                dataIndex:      'requested_memory',
808                width:          100,
809                hidden:         true
810        },{
811                header:         'P',
812                tooltip:        'Number of processors per node (PPN)',
813                readOnly:       true,
814                dataIndex:      'ppn',
815                width:          25,
816                hidden:         false
817        },{
818                header:         'N',
819                tooltip:        'Number of nodes (hosts)',
820                readOnly:       true,
821                dataIndex:      'nodect',
822                width:          25,
823                hidden:         false
824        },{
825                header:         'Nodes',
826                readOnly:       true,
827                dataIndex:      'nodes',
828                width:          100,
829                hidden:         false,
830                renderer:       jobCellRender
831        },{
832                header:         'Queued',
833                tooltip:        'At what time did this job enter the queue',
834                readOnly:       true,
835                dataIndex:      'queued_timestamp',
836                width:          120,
837                hidden:         false
838        },{
839                header:         'Started',
840                tooltip:        'At what time did this job enter the running status',
841                readOnly:       true,
842                dataIndex:      'start_timestamp',
843                width:          120,
844                hidden:         false
845        },{
846                header:         'Runningtime',
847                tooltip:        'How long has this job been in the running status',
848                readOnly:       true,
849                dataIndex:      'runningtime',
850                width:          140,
851                hidden:         false
852        }
853]);
854
855JobsColumnModel.defaultSortable = true;
856
857var win;
858
859MetricsDataStore = new Ext.data.Store(
860{
861        id:             'MetricsDataStore',
862        proxy:          new Ext.data.HttpProxy(
863        {
864                url:            'jobstore.php',
865                method:         'POST'
866        }),
867        autoLoad:       true,
868        baseParams:     { task: "GETMETRICS" },
869        reader:
870                new Ext.data.JsonReader(
871                {
872                        root:           'names',
873                        totalProperty:  'total',
874                        id:             'id'
875                },
876                [{
877                        name:           'ID'
878                },{
879                        name:           'name'
880                }
881                ]),
882        listeners:
883        { 
884                'beforeload':
885                {
886                        scope: this,
887                        fn:
888
889                        function( myStore, myOptions )
890                        {
891                                // Add a (bogus) timestamp, to create a unique url and prevent browser caching
892                                //
893                                myStore.proxy.url       = 'jobstore.php?timestamp=' + new Date().getTime();
894                        }
895                }
896        }
897});
898
899SearchField     = new Ext.app.SearchField(
900                {
901                        store:  JobsDataStore,
902                        params: {start: 0, limit: mylimit},
903                        width:  200
904                });
905
906function createNodesDataStore( cluster, jid )
907{
908        nodesDataStore =
909
910                new Ext.data.Store(
911                {
912                        //id:           'NodesDataStore',
913                        proxy:          new Ext.data.HttpProxy(
914                        {
915                                url:            'jobstore.php',
916                                method:         'POST'
917                        }),
918                        autoLoad:       true,
919                        baseParams:
920                        {
921                                'task':                 "GETNODES",
922                                'c':                    cluster,
923                                'jid':                  jid
924                        },
925                        reader: new Ext.data.JsonReader(
926                        {
927                                root:           'results',
928                                totalProperty:  'total',
929                                id:             'id'
930                        },[
931                                {name: 'jid', type: 'string', mapping: 'jid'},
932                                {name: 'ga', type: 'string', mapping: 'ga'}
933                        ]),
934                        listeners:
935                        { 
936                                'beforeload':
937                                {
938                                        scope: this,
939                                        fn:
940
941                                        function( myStore, myOptions )
942                                        {
943                                                // Add a (bogus) timestamp, to create a unique url and prevent browser caching
944                                                //
945                                                myStore.proxy.url       = 'jobstore.php?timestamp=' + new Date().getTime();
946                                        }
947                                }
948                        }
949
950                });
951
952        return nodesDataStore;
953}
954
955function createGraphView( store, jid )
956{
957        var graphView =
958       
959                new Ext.DataView(
960                {
961                        //id:           jid,
962                        //id:           'jobPanel',
963                        itemSelector:   'thumb',
964                        title:          jid,
965                        style:          'overflow:auto, heigth: auto',
966                        multiSelect:    true,
967                        //autoHeight:   true,
968                        autoShow:       true,
969                        //autoScroll:   true,
970                        //loadMask:     true,
971                        store:          store,
972                        //layout:               'fit',
973                        closable:       true,
974                        tpl:
975                       
976                                new Ext.XTemplate(
977                                        '<tpl for=".">',
978                                        '<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>',
979                                        '</tpl>')
980                });
981
982        return graphView;
983}
984
985function createGraphPanel( view )
986{
987        var scrollerMenu = new Ext.ux.TabScrollerMenu(
988        {
989                maxText  : 15,
990                pageSize : 5
991        });
992
993
994        var graphPanel = 
995
996                new Ext.TabPanel(
997                {
998                        id:             'tabPanel',
999                        xtype:          'tabpanel',
1000                        //region:               'center',
1001                        //bodyStyle:    'background: transparent',
1002                        autoShow:       true,
1003                        //autoHeight:   true,
1004                        //autoWidth:    true,
1005                        enableTabScroll:true,
1006                        resizeTabs:     true,
1007                        border:         false,
1008                        bodyStyle:      'overflow:auto; background: transparent; heigth: auto',
1009                        minTabWidth:    60,
1010                        plugins:        [ scrollerMenu ],
1011
1012                        // RB TODO: range combobox; hour, day, week, etc
1013
1014                        tbar:
1015                        [
1016                                'Metric name: ',
1017                                new Ext.form.ComboBox(
1018                                {
1019                                        fieldLabel:     'Metric',
1020                                        id:             'myComboBox',
1021                                        store:          MetricsDataStore,
1022                                        valueField:     'name',
1023                                        displayField:   'name',
1024                                        typeAhead:      true,
1025                                        mode:           'remote',
1026                                        triggerAction:  'all',
1027                                        emptyText:      'load_one',
1028                                        selectOnFocus:  true,
1029                                        xtype:          'combo',
1030                                        width:          100,
1031                                        //myview:               view,
1032                                        listeners:
1033                                        {
1034                                                select: 
1035                                                               
1036                                                function(combo, record, index)
1037                                                {
1038                                                        var metric      = record.data.name;
1039
1040                                                        parentPanel     = this.findParentByType( 'tabpanel' );
1041                                                        my_dataview     = parentPanel.getActiveTab();
1042
1043                                                        my_dataview.getStore().baseParams.metricname    = metric;
1044                                                        my_dataview.getStore().reload();
1045                                                }
1046                                        }
1047                                })
1048                        ]
1049                });
1050
1051        return graphPanel;
1052}
1053
1054function createGraphWindow( panel, Button )
1055{
1056        graphWindow =
1057
1058                new Ext.Window(
1059                {
1060                        animateTarget:  Button,
1061                        width:          500,
1062                        height:         300,
1063                        closeAction:    'hide',
1064                        collapsible:    true,
1065                        animCollapse:   true,
1066                        maximizable:    true,
1067                        layout:         'fit',
1068                        //autoScroll:   true,
1069                        //defaults:     {autoScroll:true},
1070                        title:          'Node graph details',
1071                        //tbar:         panel,
1072                        items:          panel,
1073               
1074                        listeners:
1075                        {
1076                                resize:
1077
1078                                function(  myWindow, width, height )
1079                                {
1080                                        var myPanel     = myWindow.items.get( 'tabPanel' );
1081                                        var myView      = myPanel.getActiveTab();
1082
1083                                        myPanel.doLayout();
1084                                        myWindow.doLayout();
1085                                }
1086                        }
1087                });
1088
1089        return graphWindow;
1090}
1091
1092function ShowGraphs( Button, Event ) 
1093{
1094        var row_records         = CheckJobs.getSelections();
1095        var graphJids           = Array();
1096        var windowCount         = 0;
1097        var tabCount            = 0;
1098        var nodeDatastore;
1099        var graphView;
1100        var myWindow;
1101        var myPanel;
1102
1103        for( var i=0; i<row_records.length; i++ )
1104        {
1105                rsel            = row_records[i];
1106                jid             = rsel.get('jid');
1107
1108                if( graphJids[windowCount] == undefined )
1109                {
1110                        graphJids[windowCount]  = Array();
1111                }
1112
1113                graphJids[windowCount][tabCount]        = jid;
1114
1115                if( (i+1) < row_records.length )
1116                {
1117                        if( graphWindowBehaviour == 'new-window' )
1118                        {
1119                                windowCount++;
1120                        }
1121                        else
1122                        {
1123                                tabCount++;
1124                        }
1125                }
1126        }
1127
1128        for( var w=0; w<=windowCount; w++ )
1129        {
1130                if( ( graphWindowBehaviour == 'tabbed-prev-window' ) && ( previousGraphWindow != null ) && ( previousGraphPanel != null ) )
1131                {
1132                        myWindow        = previousGraphWindow;
1133                        myPanel         = previousGraphPanel;
1134                }
1135                else
1136                {
1137                        myPanel         = createGraphPanel();
1138                        myWindow        = createGraphWindow( myPanel, Button );
1139
1140                        myWindow.add( myPanel );
1141
1142                        globalWindowCount++;
1143                }
1144
1145                for( var t=0; t<=tabCount; t++ )
1146                {
1147                        nodeDatastore   = createNodesDataStore( myparams.c, graphJids[w][t] );
1148                        graphView       = createGraphView( nodeDatastore, graphJids[w][t] );
1149
1150                        nodeDatastore.removeAll();
1151
1152                        lastView        = myPanel.add( graphView );
1153
1154                        myPanel.doLayout();
1155                }
1156
1157                myPanel.setActiveTab( lastView );
1158
1159                myWindow.show( Button );
1160                myWindow.doLayout();
1161
1162                previousGraphWindow     = myWindow;
1163                previousGraphPanel      = myPanel;
1164        }
1165}
1166
1167var JobListingEditorGrid =
1168
1169        new Ext.grid.EditorGridPanel(
1170        {
1171                id:             'JobListingEditorGrid',
1172                region:         'center',
1173                store:          JobsDataStore,
1174                cm:             JobsColumnModel,
1175                enableColLock:  false,
1176                clicksToEdit:   1,
1177                loadMask:       true,
1178                selModel:       new Ext.grid.RowSelectionModel( { singleSelect: false } ),
1179                stripeRows:     true,
1180                sm:             CheckJobs,
1181                listeners:
1182                {
1183                        'cellclick':
1184                        {
1185                                scope:  this,
1186                                fn:     jobCellClick
1187                        }
1188                },
1189                bbar:
1190       
1191                new Ext.PagingToolbar(
1192                {
1193                        pageSize:       15,
1194                        store:          JobsDataStore,
1195                        displayInfo:    true,
1196                        displayMsg:     'Displaying jobs {0} - {1} out of {2} jobs total.',
1197                        emptyMsg:       'No jobs found to display',
1198                        plugins:        [ new Ext.ux.ProgressBarPager(), new Ext.ux.PageSizePlugin() ]
1199                }),
1200
1201                tbar: 
1202                [ 
1203                        SearchField,
1204                        '-',
1205                        showGraphsButton,
1206                        '-',
1207                        filterButton 
1208                ],
1209
1210                view:           new Ext.ux.grid.BufferView(
1211                {
1212                        // custom row height
1213                        //rowHeight: 34,
1214                        // render rows as they come into viewable area.
1215                        scrollDelay: false
1216                })
1217
1218        });
1219
1220var ClusterImageWindow =
1221
1222        new Ext.Window(
1223        {
1224                id:             'ClusterImageWindow',
1225                title:          'Nodes',
1226                closable:       true,
1227                collapsible:    true,
1228                animCollapse:   true,
1229                width:          1,
1230                height:         1,
1231                y:              15,
1232                plain:          true,
1233                shadow:         true,
1234                resizable:      false,
1235                shadowOffset:   10,
1236                layout:         'fit',
1237                bbar: 
1238               
1239                        new Ext.ux.StatusBar(
1240                        {
1241                                defaultText:    'Ready.',
1242                                id:             'basic-statusbar',
1243                                defaultIconCls: ''
1244                        })
1245        });
1246
1247var GraphSummaryWindow =
1248
1249        new Ext.Window(
1250        {
1251                id:             'GraphSummaryWindow',
1252                title:          'Graph Summary',
1253                closable:       true,
1254                collapsible:    true,
1255                animCollapse:   true,
1256                width:          500,
1257                height:         400,
1258                x:              10,
1259                y:              10,
1260                plain:          true,
1261                shadow:         true,
1262                resizable:      true,
1263                shadowOffset:   10,
1264                layout:         'table',
1265                layoutConfig: 
1266                {
1267                        columns: 2
1268                },
1269                defaults:       { border: false },
1270                items: 
1271                [
1272                        {
1273                                id:             'monarchlogo',
1274                                cls:            'monarch',
1275                                bodyStyle:      'background: transparent'
1276                        },{
1277                                id:             'summarycount'
1278                        },{
1279                                id:             'rjqjgraph'
1280                        },{
1281                                id:             'pie',
1282                                colspan:        2
1283                        }
1284                ],
1285                bbar:
1286               
1287                        new Ext.ux.StatusBar(
1288                        {
1289                                defaultText:    'Ready.',
1290                                id:             'basic-statusbar',
1291                                defaultIconCls: ''
1292                        })
1293        });
1294
1295var JobListingWindow =
1296
1297        new Ext.Window(
1298        {
1299                id:             'JobListingWindow',
1300                title:          'Cluster Jobs Overview',
1301                closable:       true,
1302                collapsible:    true,
1303                animCollapse:   true,
1304                maximizable:    true,
1305                y:              375,
1306                width:          860,
1307                height:         645,
1308                plain:          true,
1309                shadow:         true,
1310                shadowOffset:   10,
1311                layout:         'border',
1312                items:         
1313                [               JobListingEditorGrid,
1314                                {
1315                                        region:         'south', 
1316                                        layout:         'fit',
1317                                        id:             'preview-pane',
1318                                        height:         200,
1319                                        collapsible:    true,
1320                                        border:         true,
1321                                        title:          'Preview',
1322                                        split:          true,
1323                                        bodyStyle:      'overflow:auto; background: transparent; heigth: auto'
1324                                }
1325                ]
1326        });
Note: See TracBrowser for help on using the repository browser.