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

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

job_monarch/js/monarch.js:

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