Changeset 593 for trunk/web2/addons


Ignore:
Timestamp:
02/05/09 11:19:15 (14 years ago)
Author:
ramonb
Message:

job_monarch/templates/header.tpl,
job_monarch/js/monarch.js:

  • code cleanup
Location:
trunk/web2/addons/job_monarch
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/web2/addons/job_monarch/js/monarch.js

    r591 r593  
    66var SearchField;
    77var filterButton;
     8
     9// associative filter array
     10//
    811var myfilters = { };
     12
     13// any other datastore params
     14//
    915var myparams = { };
     16
     17// (default) paging size
     18//
    1019var mylimit = 15;
     20
    1121var ClusterImageArgs = { };
    1222
    1323var filterfields = [ "jid", "queue", "name", "owner" ];
    1424
    15 var filterMenu = new Ext.menu.Menu({
    16     id: 'filterMenu',
    17     items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
     25var filterMenu = new Ext.menu.Menu(
     26{
     27        id:     'filterMenu',
     28        items:  [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
    1829});
    1930
    20 var filterButton = new Ext.MenuButton({
    21                         id: 'filtermenuknop',
    22                         text: 'Filters',
    23                         disabled: true,
    24                         menu: filterMenu,
    25                       listeners:  {
    26                                 'click': {
    27                                         scope: this,
    28                                         fn: function( myButton, event )
    29                                                 {
    30                                                         myButton.menu.show( myButton.getEl() );
    31                                                 }
     31var filterButton = new Ext.MenuButton(
     32{
     33        id:             'filtermenuknop',
     34        text:           'Filters',
     35        disabled:       true,
     36        menu:           filterMenu,
     37        listeners:
     38        {
     39                'click':
     40                {
     41                        scope:  this,
     42                        fn:     function( myButton, event )
     43                                {
     44                                        myButton.menu.show( myButton.getEl() );
    3245                                }
    33                         }
    34 
    35                 });
     46                }
     47        }
     48});
    3649
    3750Ext.namespace('Ext.ux');
    3851
    39 Ext.ux.PageSizePlugin = function() {
    40     Ext.ux.PageSizePlugin.superclass.constructor.call(this, {
    41         store: new Ext.data.SimpleStore({
    42             fields: ['text', 'value'],
    43             data: [['10', 10], ['15', 15], ['20', 20], ['30', 30], ['50', 50], ['100', 100], ['max', 'max' ]]
    44         }),
    45         mode: 'local',
    46         displayField: 'text',
    47         valueField: 'value',
    48         editable: false,
    49         allowBlank: false,
    50         triggerAction: 'all',
    51         width: 40
    52     });
     52Ext.ux.PageSizePlugin = function()
     53{
     54        Ext.ux.PageSizePlugin.superclass.constructor.call(this,
     55        {
     56                store:  new Ext.data.SimpleStore(
     57                {
     58                        fields: ['text', 'value'],
     59                        data:   [['10', 10], ['15', 15], ['20', 20], ['30', 30], ['50', 50], ['100', 100], ['max', 'max' ]]
     60                }),
     61                mode:           'local',
     62                displayField:   'text',
     63                valueField:     'value',
     64                editable:       false,
     65                allowBlank:     false,
     66                triggerAction:  'all',
     67                width:          40
     68        });
    5369};
    5470
    55 Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {
    56     init: function(paging) {
    57         paging.on('render', this.onInitView, this);
    58     },
     71Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox,
     72{
     73        init:                   function(paging)
     74                                {
     75                                        paging.on('render', this.onInitView, this);
     76                                },
    5977   
    60     onInitView: function(paging) {
    61         paging.add('-',
    62             this,
    63             'jobs per page'
    64         );
    65         this.setValue(paging.pageSize);
    66         this.on('select', this.onPageSizeChanged, paging);
    67     },
    68    
    69     onPageSizeChanged: function(combo) {
    70         if ( combo.getValue() == 'max' )
    71           mylimit = JobsDataStore.getTotalCount();
    72         else
    73           mylimit = parseInt(combo.getValue());
    74         this.pageSize = mylimit;
    75         this.doLoad(0);
    76     }
     78        onInitView:             function(paging)
     79                                {
     80                                        paging.add('-',
     81                                        this,
     82                                        'jobs per page'
     83                                        );
     84                                        this.setValue(paging.pageSize);
     85                                        this.on('select', this.onPageSizeChanged, paging);
     86                                },
     87
     88        onPageSizeChanged:      function(combo)
     89                                {
     90                                        if ( combo.getValue() == 'max' )
     91                                        {
     92                                                mylimit = JobsDataStore.getTotalCount();
     93                                        }
     94                                        else
     95                                        {
     96                                                mylimit = parseInt(combo.getValue());
     97                                        }
     98                                        this.pageSize = mylimit;
     99                                        this.doLoad(0);
     100                                }
    77101});
    78102
    … …  
    118142function makeArrayURL( somearr )
    119143{
    120   filter_url = '';
    121   filter_sep = '';
    122 
    123   for( filtername in somearr )
    124   {
    125     filter_url = filter_url + filter_sep + filtername + '=' + somearr[filtername];
    126     filter_sep = '&';
    127   }
    128 
    129   return filter_url;
     144        filter_url = '';
     145        filter_sep = '';
     146
     147        for( filtername in somearr )
     148        {
     149                filter_url = filter_url + filter_sep + filtername + '=' + somearr[filtername];
     150                filter_sep = '&';
     151        }
     152
     153        return filter_url;
    130154}
    131155
    … …  
    133157function isset( somevar )
    134158{
    135   try
    136   {
    137     if( eval( somevar ) ) { }
    138   }
    139   catch( err )
    140   {
    141     return false;
    142   }
    143   return true;
     159        try
     160        {
     161                if( eval( somevar ) ) { }
     162        }
     163        catch( err )
     164        {
     165                return false;
     166        }
     167        return true;
    144168}
    145169
    146170function inMyArray( arr, someval )
    147171{
    148   for( arval in arr )
    149   {
    150     if( arval == someval )
    151     {
    152       return true;
    153     }
    154   }
    155   return false;
     172        for( arval in arr )
     173        {
     174                if( arval == someval )
     175                {
     176                        return true;
     177                }
     178        }
     179        return false;
    156180}
    157181
    158182function ArraySize( arr )
    159183{
    160   count = 0;
    161 
    162   for( arkey in arr )
    163   {
    164     count = count + 1;
    165   }
    166 
    167   return count;
     184        count = 0;
     185
     186        for( arkey in arr )
     187        {
     188                count = count + 1;
     189        }
     190
     191        return count;
    168192}
    169193
    170194function inMyArrayValues( arr, someval )
    171195{
    172   for( arkey in arr )
    173   {
    174     if( arr[arkey] == someval )
    175     {
    176       return true;
    177     }
    178   }
    179   return false;
     196        for( arkey in arr )
     197        {
     198                if( arr[arkey] == someval )
     199                {
     200                        return true;
     201                }
     202        }
     203        return false;
    180204}
    181205
    182206function inMyArrayKeys( arr, someval )
    183207{
    184   for( arkey in arr )
    185   {
    186     if( arkey == someval )
    187     {
    188       return true;
    189     }
    190   }
    191   return false;
     208        for( arkey in arr )
     209        {
     210                if( arkey == someval )
     211                {
     212                        return true;
     213                }
     214        }
     215        return false;
    192216}
    193217
    194218function joinMyArray( arr1, arr2 )
    195219{
    196   for( arkey in arr2 )
    197   {
    198     arr1[arkey] = arr2[arkey];
    199   }
    200 
    201   return arr1;
     220        for( arkey in arr2 )
     221        {
     222                arr1[arkey] = arr2[arkey];
     223        }
     224
     225        return arr1;
    202226}
    203227
    204228function ClusterImageSelectHost( somehost )
    205229{
    206 
    207   if( !inMyArrayKeys( myfilters, 'host' ) )
    208   {
    209     myfilters['host'] = somehost;
    210   }
    211   else
    212   {
    213     if( myfilters['host'] == somehost )
    214     {
    215       delete myfilters['host'];
    216       delete myparams['host'];
    217     }
    218     else
    219     {
    220       myfilters['host'] = somehost;
    221     }
    222   }
    223 
    224   reloadClusterImage();
    225   reloadJobStore();
    226 
    227   return false;
     230        if( !inMyArrayKeys( myfilters, 'host' ) )
     231        {
     232                myfilters['host'] = somehost;
     233        }
     234        else
     235        {
     236                if( myfilters['host'] == somehost )
     237                {
     238                        delete myfilters['host'];
     239                        delete myparams['host'];
     240                }
     241                else
     242                {
     243                        myfilters['host'] = somehost;
     244                }
     245        }
     246
     247        reloadClusterImage();
     248        reloadJobStore();
     249
     250        // returning false causes a image reload
     251        //
     252        return false;
    228253}
    229254
    230255function reloadJobStore()
    231256{
    232   // Respect any other parameters that may have been set outside filters
    233   //
    234   myparams = joinMyArray( myparams, myfilters );
    235 
    236   // Can't be sure if there are enough pages for new filter: reset to page 1
    237   //
    238   myparams = joinMyArray( myparams, { start: 0, limit: mylimit } );
    239 
    240   JobsDataStore.reload( { params: myparams } );
     257        // Respect any other parameters that may have been set outside filters
     258        //
     259        myparams = joinMyArray( myparams, myfilters );
     260
     261        // Can't be sure if there are enough pages for new filter: reset to page 1
     262        //
     263        myparams = joinMyArray( myparams, { start: 0, limit: mylimit } );
     264
     265        JobsDataStore.reload( { params: myparams } );
    241266}
    242267
    243268function addListener(element, type, expression, bubbling)
    244269{
    245   bubbling = bubbling || false;
    246   if(window.addEventListener)
    247   { // Standard
    248     element.addEventListener(type, expression, bubbling);
    249     return true;
    250   }
    251   else if(window.attachEvent)
    252   { // IE
    253     element.attachEvent('on' + type, expression);
    254     return true;
    255   }
    256   else
    257     return false;
     270        bubbling = bubbling || false;
     271
     272        if(window.addEventListener)
     273        { // Standard
     274                element.addEventListener(type, expression, bubbling);
     275                return true;
     276        }
     277        else if(window.attachEvent)
     278        { // IE
     279                element.attachEvent('on' + type, expression);
     280                return true;
     281        }
     282        else
     283        {
     284                return false;
     285        }
    258286}
    259287
    260288function makeFilterString()
    261289{
    262   var filter_str = '';
    263 
    264   for( arkey in myfilters )
    265   {
    266     filter_str = filter_str + ' > ' + myfilters[arkey];
    267   }
    268 
    269   return filter_str;
     290        var filter_str = '';
     291
     292        for( arkey in myfilters )
     293        {
     294                filter_str = filter_str + ' > ' + myfilters[arkey];
     295        }
     296
     297        return filter_str;
    270298}
    271299
    272300var ImageLoader = function( id, url )
    273301{
    274   this.url = url;
    275   this.image = document.getElementById( id );
    276   this.loadEvent = null;
     302        this.url = url;
     303        this.image = document.getElementById( id );
     304        this.loadEvent = null;
    277305};
    278306
    279307ImageLoader.prototype =
    280308{
    281   load:function()
    282   {
    283     var url = this.url;
    284     var image = this.image;
    285     var loadEvent = this.loadEvent;
    286     addListener( this.image, 'load', function(e)
    287     {
    288       if( loadEvent != null )
    289       {
    290         loadEvent( url, image );
    291       }
    292     }, false);
    293     this.image.src = this.url;
    294   },
    295   getImage: function()
    296   {
    297     return this.image;
    298   }
     309        load:           function()
     310                        {
     311                                var url = this.url;
     312                                var image = this.image;
     313                                var loadEvent = this.loadEvent;
     314                                addListener( this.image, 'load',
     315                                        function(e)
     316                                        {
     317                                                if( loadEvent != null )
     318                                                {
     319                                                        loadEvent( url, image );
     320                                                }
     321                                        }, false);
     322                                this.image.src = this.url;
     323                        },
     324        getImage:       function()
     325                        {
     326                                return this.image;
     327                        }
    299328};
    300329
    301330function achorJobListing()
    302331{
    303   JobListingWindow.anchorTo( "ClusterImageWindow", "tr-br", [ 0, 10 ] );
     332        JobListingWindow.anchorTo( "ClusterImageWindow", "tr-br", [ 0, 10 ] );
    304333}
    305334
    306335function setClusterImagePosition()
    307336{
    308   ci_x = (window.innerWidth - ClusterImageWindow.getSize()['width'] - 20);
    309   ClusterImageWindow.setPosition( ci_x, 10 );
     337        ci_x = (window.innerWidth - ClusterImageWindow.getSize()['width'] - 20);
     338        ClusterImageWindow.setPosition( ci_x, 10 );
    310339}
    311340
    312341function deselectFilterMenu( menuItem, event )
    313342{
    314   filterValue = menuItem.text;
    315 
    316   if( filterValue == SearchField.getEl().dom.value && inMyArrayKeys( myfilters, 'query' ) )
    317   {
    318     SearchField.getEl().dom.value = '';
    319     delete SearchField.store.baseParams['query'];
    320   }
    321 
    322   for( arkey in myfilters )
    323   {
    324     if( myfilters[arkey] == filterValue )
    325     {
    326       delete myfilters[arkey];
    327       delete myparams[arkey];
    328     }
    329   }
    330   reloadJobStore();
     343        filterValue = menuItem.text;
     344
     345        if( filterValue == SearchField.getEl().dom.value && inMyArrayKeys( myfilters, 'query' ) )
     346        {
     347                SearchField.getEl().dom.value = '';
     348                delete SearchField.store.baseParams['query'];
     349        }
     350
     351        for( arkey in myfilters )
     352        {
     353                if( myfilters[arkey] == filterValue )
     354                {
     355                        delete myfilters[arkey];
     356                        delete myparams[arkey];
     357                }
     358        }
     359        reloadJobStore();
    331360}
    332361
    333362function makeFilterMenu()
    334363{
    335   var filterMenu = new Ext.menu.Menu({
    336       id: 'filterMenu',
    337       items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
    338   });
    339 
    340   if( ArraySize( myfilters ) > 0 )
    341   {
    342     filterMenu.addSeparator();
    343   }
    344 
    345   for( arkey in myfilters )
    346   {
    347     filterMenu.add( new Ext.menu.CheckItem({ text: myfilters[arkey], handler: deselectFilterMenu, checked: true }) );
    348   }
    349 
    350   if( filterButton )
    351   {
    352     filterButton.menu = filterMenu;
    353 
    354     if( ArraySize( myfilters ) > 0 )
    355     {
    356       filterButton.enable();
    357     }
    358     else
    359     {
    360       filterButton.disable();
    361     }
    362   }
     364        var filterMenu = new Ext.menu.Menu(
     365        {
     366                id:     'filterMenu',
     367                items:  [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
     368        });
     369
     370        if( ArraySize( myfilters ) > 0 )
     371        {
     372                filterMenu.addSeparator();
     373        }
     374
     375        for( arkey in myfilters )
     376        {
     377                filterMenu.add( new Ext.menu.CheckItem({ text: myfilters[arkey], handler: deselectFilterMenu, checked: true }) );
     378        }
     379
     380        if( filterButton )
     381        {
     382                filterButton.menu = filterMenu;
     383
     384                if( ArraySize( myfilters ) > 0 )
     385                {
     386                        filterButton.enable();
     387                }
     388                else
     389                {
     390                        filterButton.disable();
     391                }
     392        }
    363393}
    364394
    365395function reloadClusterImage()
    366396{
    367   ClusterImageArgs['view'] = 'big-clusterimage';
    368 
    369   filt_url = makeArrayURL( myfilters );
    370   imag_url = makeArrayURL( ClusterImageArgs );
    371   img_url = './image.php?' + filt_url + '&' + imag_url;
    372 
    373   var newClusterImage = new ImageLoader( 'clusterimage', img_url );
    374   newClusterImage.loadEvent = function( url, image )
    375     {
    376       ClusterImageWindow.getBottomToolbar().clearStatus( { useDefaults:true } );
    377       setTimeout( "resizeClusterImage()", 250 );
    378       setTimeout( "setClusterImagePosition()", 500 );
    379       //setTimeout( "achorJobListing()", 1000 );
    380     }
    381 
    382   ClusterImageWindow.getBottomToolbar().showBusy();
    383 
    384   filter_str = 'Nodes' + makeFilterString();
    385   ClusterImageWindow.setTitle( filter_str );
    386 
    387   newClusterImage.load();
     397        ClusterImageArgs['view'] = 'big-clusterimage';
     398
     399        filt_url = makeArrayURL( myfilters );
     400        imag_url = makeArrayURL( ClusterImageArgs );
     401        img_url = './image.php?' + filt_url + '&' + imag_url;
     402
     403        var newClusterImage = new ImageLoader( 'clusterimage', img_url );
     404        newClusterImage.loadEvent = function( url, image )
     405        {
     406                ClusterImageWindow.getBottomToolbar().clearStatus( { useDefaults:true } );
     407                setTimeout( "resizeClusterImage()", 250 );
     408                setTimeout( "setClusterImagePosition()", 500 );
     409                //setTimeout( "achorJobListing()", 1000 );
     410        }
     411
     412        ClusterImageWindow.getBottomToolbar().showBusy();
     413
     414        filter_str = 'Nodes' + makeFilterString();
     415        ClusterImageWindow.setTitle( filter_str );
     416
     417        newClusterImage.load();
    388418}
    389419
    390420function resizeClusterImage()
    391421{
    392   var ci_height = document.getElementById( "clusterimage" ).height + ClusterImageWindow.getFrameHeight();
    393   var ci_width = document.getElementById( "clusterimage" ).width + ClusterImageWindow.getFrameWidth();
    394 
    395   ClusterImageWindow.setSize( ci_width, ci_height );
    396 }
    397 
    398 Ext.apply(Ext.form.VTypes, {
    399         num: function(val, field) {
    400 
    401                 if (val) {
    402                    var strValidChars = "0123456789";
    403                    var blnResult = true;
    404 
    405                    if (val.length == 0) return false;
    406 
    407                    //  test strString consists of valid characters listed above
    408                    for (i = 0; i < val.length && blnResult == true; i++)
    409                       {
    410                       strChar = val.charAt(i);
    411                       if (strValidChars.indexOf(strChar) == -1)
    412                          {
    413                          blnResult = false;
    414                          }
    415                       }
    416                    return blnResult;
    417 
    418                 }
     422        var ci_height = document.getElementById( "clusterimage" ).height + ClusterImageWindow.getFrameHeight();
     423        var ci_width = document.getElementById( "clusterimage" ).width + ClusterImageWindow.getFrameWidth();
     424
     425        ClusterImageWindow.setSize( ci_width, ci_height );
     426}
     427
     428Ext.apply(Ext.form.VTypes,
     429{
     430        num:            function(val, field)
     431                        {
     432                                if (val)
     433                                {
     434                                        var strValidChars = "0123456789";
     435                                        var blnResult = true;
     436
     437                                        if (val.length == 0) return false;
     438
     439                                        //  test strString consists of valid characters listed above
     440                                        for (i = 0; i < val.length && blnResult == true; i++)
     441                                        {
     442                                                strChar = val.charAt(i);
     443                                                if (strValidChars.indexOf(strChar) == -1)
     444                                                {
     445                                                        blnResult = false;
     446                                                }
     447                                        }
     448                                        return blnResult;
     449
     450                                }
     451                        },
     452        numText:        'Must be numeric'
     453});
     454
     455function jobRowSelect( selModel )
     456{
     457        if( selModel.hasSelection() )
     458        {
     459                showGraphsButton.enable();
     460        }
     461        else
     462        {
     463                showGraphsButton.disable();
     464        }
     465}
     466
     467function jobCellClick(grid, rowIndex, columnIndex, e)
     468{
     469        var record              = grid.getStore().getAt(rowIndex);  // Get the Record
     470        var fieldName           = grid.getColumnModel().getDataIndex(columnIndex);
     471        var data                = record.get(fieldName);
     472        var view                = grid.getView();
     473        var cell                = view.getCell( rowIndex, columnIndex );
     474        var filter_title        = false;
     475        var fil_dis             = 'filter';
     476        var fil_ena             = 'filterenabled';
     477        var filterName          = fieldName;
     478
     479        if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' || fieldName == 'nodes')
     480        {
     481                if( fieldName == 'nodes' )
     482                {
     483                        filterName = 'host';
     484                        fil_dis = 'nodesfilter';
     485                        fil_ena = 'nodesfilterenabled';
     486                }
     487                if( inMyArrayKeys( myfilters, filterName ) )
     488                {
     489                        Ext.fly(cell).removeClass( fil_ena );
     490                        Ext.fly(cell).addClass( fil_dis );
     491
     492                        // Remove this filter
     493                        //
     494                        delete myfilters[filterName];
     495                        delete myparams[filterName];
     496
     497                        reloadJobStore();
     498                        //reloadClusterImage();
     499                }
     500                else
     501                {
     502                        Ext.fly(cell).removeClass( fil_dis );
     503                        Ext.fly(cell).addClass( fil_ena );
     504
     505                        if( fieldName == 'nodes' )
     506                        { // Get the first node (master mom) as node filter
     507                                new_data = data.split( ',' )[0];
     508                                data = new_data;
     509                        }
     510
     511                        // Set filter for selected column to selected cell value
     512                        //
     513                        myfilters[filterName] = data;
     514
     515                        reloadJobStore();
     516                        //reloadClusterImage();
     517                }
     518                JobListingWindow.setTitle( filter_str );
     519                filter_title = true;
     520                filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
     521        }
     522}
     523
     524function jobCellRender( value, metadata, record, rowindex, colindex, store )
     525{
     526        var fieldName = JobsColumnModel.getColumnById( colindex ).dataIndex;
     527        var fil_dis = 'filter';
     528        var fil_ena = 'filterenabled';
     529        var filterName = fieldName;
     530
     531        if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' || fieldName == 'nodes' )
     532        {
     533                if( fieldName == 'nodes' )
     534                {
     535                        fil_dis = 'nodesfilter';
     536                        fil_ena = 'nodesfilterenabled';
     537                        filterName = 'host';
     538                }
     539                if( myfilters[filterName] != null )
     540                {
     541                        metadata.css = fil_ena;
     542                }
     543                else
     544                {
     545                        metadata.css = fil_dis;
     546                }
     547        }
     548        return value;
     549}
     550
     551JobProxy = new Ext.data.HttpProxy(
     552{
     553        url:    'jobstore.php',
     554        method: 'POST'
     555});
     556
     557JobsDataStore = new Ext.data.Store(
     558{
     559        id:             'JobsDataStore',
     560        proxy:          JobProxy,
     561        baseParams:     { task: "GETJOBS" },
     562        reader:
     563                new Ext.data.JsonReader(
     564                {
     565                        root: 'results',
     566                        totalProperty: 'total',
     567                        id: 'id'
    419568                },
    420         numText: 'Must be numeric'
    421 });
    422 
    423 function initJobGrid() {
    424 
    425   Ext.QuickTips.init();
    426 
    427   function jobRowSelect( selModel )
    428   {
    429     if( selModel.hasSelection() )
    430     {
    431       showGraphsButton.enable();
    432     }
    433     else
    434     {
    435       showGraphsButton.disable();
    436     }
    437   }
    438 
    439   function jobCellClick(grid, rowIndex, columnIndex, e)
    440   {
    441     var record = grid.getStore().getAt(rowIndex);  // Get the Record
    442     var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
    443     var data = record.get(fieldName);
    444     var view = grid.getView();
    445     var cell = view.getCell( rowIndex, columnIndex );
    446     var filter_title = false;
    447     var fil_dis = 'filter';
    448     var fil_ena = 'filterenabled';
    449     var filterName = fieldName;
    450 
    451     if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' || fieldName == 'nodes')
    452     {
    453       if( fieldName == 'nodes' )
    454       {
    455         filterName = 'host';
    456         fil_dis = 'nodesfilter';
    457         fil_ena = 'nodesfilterenabled';
    458       }
    459       if( inMyArrayKeys( myfilters, filterName ) )
    460       {
    461         Ext.fly(cell).removeClass( fil_ena );
    462         Ext.fly(cell).addClass( fil_dis );
    463 
    464         // Remove this filter
    465         //
    466         delete myfilters[filterName];
    467         delete myparams[filterName];
    468 
    469         reloadJobStore();
    470         //reloadClusterImage();
    471       }
    472       else
    473       {
    474         Ext.fly(cell).removeClass( fil_dis );
    475         Ext.fly(cell).addClass( fil_ena );
    476 
    477         if( fieldName == 'nodes' )
    478         { // Get the first node (master mom) as node filter
    479           new_data = data.split( ',' )[0];
    480           data = new_data;
    481         }
    482 
    483         // Set filter for selected column to selected cell value
    484         //
    485         myfilters[filterName] = data;
    486 
    487         reloadJobStore();
    488         //reloadClusterImage();
    489       }
    490       JobListingWindow.setTitle( filter_str );
    491       filter_title = true;
    492       filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
    493     }
    494   }
    495 
    496   function jobCellRender( value, metadata, record, rowindex, colindex, store )
    497   {
    498     var fieldName = JobsColumnModel.getColumnById( colindex ).dataIndex;
    499     var fil_dis = 'filter';
    500     var fil_ena = 'filterenabled';
    501     var filterName = fieldName;
    502 
    503     if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' || fieldName == 'nodes' )
    504     {
    505       if( fieldName == 'nodes' )
    506       {
    507         fil_dis = 'nodesfilter';
    508         fil_ena = 'nodesfilterenabled';
    509         filterName = 'host';
    510       }
    511       if( myfilters[filterName] != null )
    512       {
    513         metadata.css = fil_ena;
    514       }
    515       else
    516       {
    517         metadata.css = fil_dis;
    518       }
    519     }
    520     return value;
    521   }
    522 
    523   JobProxy = new Ext.data.HttpProxy({
    524                 url: 'jobstore.php',
    525                 method: 'POST'
    526             });
    527 
    528 
    529   JobsDataStore = new Ext.data.Store({
    530       id: 'JobsDataStore',
    531       proxy: JobProxy,
    532       baseParams: { task: "GETJOBS" },
    533       reader: new Ext.data.JsonReader({
    534         root: 'results',
    535         totalProperty: 'total',
    536         id: 'id'
    537       },[
    538         {name: 'jid', type: 'int', mapping: 'jid'},
    539         {name: 'status', type: 'string', mapping: 'status'},
    540         {name: 'owner', type: 'string', mapping: 'owner'},
    541         {name: 'queue', type: 'string', mapping: 'queue'},
    542         {name: 'name', type: 'string', mapping: 'name'},
    543         {name: 'requested_time', type: 'string', mapping: 'requested_time'},
    544         {name: 'requested_memory', type: 'string', mapping: 'requested_memory'},
    545         {name: 'ppn', type: 'int', mapping: 'ppn'},
    546         {name: 'nodect', type: 'int', mapping: 'nodect'},
    547         {name: 'nodes', type: 'string', mapping: 'nodes'},
    548         {name: 'queued_timestamp', type: 'string', mapping: 'queued_timestamp'},
    549         {name: 'start_timestamp', type: 'string', mapping: 'start_timestamp'},
    550         {name: 'runningtime', type: 'string', mapping: 'runningtime'}
    551       ]),
    552       sortInfo: { field: 'jid', direction: "DESC" },
    553       remoteSort: true,
    554       listeners:
    555         {
    556                 'beforeload':
     569                [
     570                        {name: 'jid', type: 'int', mapping: 'jid'},
     571                        {name: 'status', type: 'string', mapping: 'status'},
     572                        {name: 'owner', type: 'string', mapping: 'owner'},
     573                        {name: 'queue', type: 'string', mapping: 'queue'},
     574                        {name: 'name', type: 'string', mapping: 'name'},
     575                        {name: 'requested_time', type: 'string', mapping: 'requested_time'},
     576                        {name: 'requested_memory', type: 'string', mapping: 'requested_memory'},
     577                        {name: 'ppn', type: 'int', mapping: 'ppn'},
     578                        {name: 'nodect', type: 'int', mapping: 'nodect'},
     579                        {name: 'nodes', type: 'string', mapping: 'nodes'},
     580                        {name: 'queued_timestamp', type: 'string', mapping: 'queued_timestamp'},
     581                        {name: 'start_timestamp', type: 'string', mapping: 'start_timestamp'},
     582                        {name: 'runningtime', type: 'string', mapping: 'runningtime'}
     583                ]),
     584        sortInfo:
     585        {
     586                field: 'jid',
     587                direction: "DESC"
     588        },
     589        remoteSort: true,
     590        listeners:
     591        {
     592                'beforeload':
    557593                {
    558594                        scope: this,
    559                         fn: function()
     595                        fn:
     596
     597                        function()
    560598                        {
    561599                                if( SearchField )
    … …  
    580618                                }
    581619                        }
    582                 } //,
    583                 //'load':
    584                 //{
    585                 //      scope: this,
    586                 //      fn: function()
    587                 //      {
    588                 //              if( SearchField )
    589                 //              {
    590                 //                      search_value = SearchField.getEl().dom.value;
    591 
    592                 //                      if( search_value != '' )
    593                 //                      {
    594                 //                              myfilters['query']      = search_value;
    595                 //                      }
    596 
    597                 //                      reloadClusterImage();
    598 
    599                 //                      filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
    600                 //                      JobListingWindow.setTitle( filter_str );
    601 
    602                 //                      if( search_value != '' )
    603                 //                      {
    604                 //                              delete myfilters['query'];
    605                 //                      }
    606                 //              }
    607                 //      }
    608                 //}
    609         }
    610     });
     620                }
     621        }
     622});
    611623   
    612   var CheckJobs = new Ext.grid.CheckboxSelectionModel();
    613 
    614   JobsColumnModel = new Ext.grid.ColumnModel(
    615     [ CheckJobs,
    616     {
    617         header: '#',
    618         tooltip: 'Job id',
    619         readOnly: true,
    620         dataIndex: 'jid',
    621         width: 50,
    622         hidden: false,
    623         renderer: jobCellRender
    624       },{
    625         header: 'S',
    626         tooltip: 'Job status',
    627         readOnly: true,
    628         dataIndex: 'status',
    629         width: 20,
    630         hidden: false,
    631         renderer: jobCellRender
    632       },{
    633         header: 'User',
    634         tooltip: 'Owner of job',
    635         readOnly: true,
    636         dataIndex: 'owner',
    637         width: 60,
    638         hidden: false,
    639         renderer: jobCellRender
    640       },{
    641         header: 'Queue',
    642         tooltip: 'In which queue does this job reside',
    643         readOnly: true,
    644         dataIndex: 'queue',
    645         width: 60,
    646         hidden: false,
    647         renderer: jobCellRender
    648       },{
    649         header: 'Name',
    650         tooltip: 'Name of job',
    651         readOnly: true,
    652         dataIndex: 'name',
    653         width: 100,
    654         hidden: false
    655       },{
    656         header: 'Requested Time',
    657         tooltip: 'Amount of requested time (wallclock)',
    658         readOnly: true,
    659         dataIndex: 'requested_time',
    660         width: 100,
    661         hidden: false
    662       },{
    663         header: 'Requested Memory',
    664         tooltip: 'Amount of requested memory',
    665         readOnly: true,
    666         dataIndex: 'requested_memory',
    667         width: 100,
    668         hidden: true
    669       },{
    670         header: 'P',
    671         tooltip: 'Number of processors per node (PPN)',
    672         readOnly: true,
    673         dataIndex: 'ppn',
    674         width: 25,
    675         hidden: false
    676       },{
    677         header: 'N',
    678         tooltip: 'Number of nodes (hosts)',
    679         readOnly: true,
    680         dataIndex: 'nodect',
    681         width: 25,
    682         hidden: false
    683       },{
    684         header: 'Nodes',
    685         readOnly: true,
    686         dataIndex: 'nodes',
    687         width: 100,
    688         hidden: false,
    689         renderer: jobCellRender
    690       },{
    691         header: 'Queued',
    692         tooltip: 'At what time did this job enter the queue',
    693         readOnly: true,
    694         dataIndex: 'queued_timestamp',
    695         width: 120,
    696         hidden: false
    697       },{
    698         header: 'Started',
    699         tooltip: 'At what time did this job enter the running status',
    700         readOnly: true,
    701         dataIndex: 'start_timestamp',
    702         width: 120,
    703         hidden: false
    704       },{
    705         header: 'Runningtime',
    706         tooltip: 'How long has this job been in the running status',
    707         readOnly: true,
    708         dataIndex: 'runningtime',
    709         width: 140,
    710         hidden: false
    711       }]
    712     );
    713     JobsColumnModel.defaultSortable= true;
    714 
    715   var win;
    716 
    717   MetricsDataStore = new Ext.data.Store({
    718       id: 'MetricsDataStore',
    719       proxy: JobProxy,
    720       autoLoad: false,
    721       baseParams: { task: "GETMETRICS" },
    722       reader: new Ext.data.JsonReader({
    723         root: 'names',
    724         totalProperty: 'total',
    725         id: 'id'
    726       },[{
    727         name: 'ID'
    728       },{
    729         name: 'name'
    730         }])
    731   });
    732 
    733   SearchField   = new Ext.app.SearchField({
    734                                 store: JobsDataStore,
    735                                 params: {start: 0, limit: mylimit},
    736                                 width: 200
    737                     });
    738 
    739   NodesDataStore = new Ext.data.Store({
    740       id: 'NodesDataStore',
    741       proxy: JobProxy,
    742       autoLoad: false,
    743       baseParams: { task: "GETNODES" },
    744       reader: new Ext.data.JsonReader({
    745         root: 'results',
    746         totalProperty: 'total',
    747         id: 'id'
    748       },[
    749         {name: 'c', type: 'string', mapping: 'c'},
    750         {name: 'h', type: 'string', mapping: 'h'},
    751         {name: 'x', type: 'string', mapping: 'x'},
    752         {name: 'v', type: 'string', mapping: 'v'},
    753         {name: 'l', type: 'string', mapping: 'l'},
    754         {name: 'jr', type: 'string', mapping: 'jr'},
    755         {name: 'js', type: 'string', mapping: 'js'}
    756       ]),
    757       listeners: {
    758                 'beforeload': {
    759                         scope: this,
    760                         fn: function() {
    761                                         var jids;
    762 
    763                                         var row_records = CheckJobs.getSelections();
    764 
    765                                         for(var i=0; i<row_records.length; i++ )
     624var CheckJobs =
     625
     626        new Ext.grid.CheckboxSelectionModel(
     627        {
     628                listeners:
     629                {
     630                        'selectionchange':
     631                        {
     632                                scope:  this,
     633                                fn:     jobRowSelect
     634                        }
     635                },
     636        });
     637
     638JobsColumnModel = new Ext.grid.ColumnModel(
     639[
     640        CheckJobs,
     641        {
     642                header:         '#',
     643                tooltip:        'Job id',
     644                readOnly:       true,
     645                dataIndex:      'jid',
     646                width:          50,
     647                hidden:         false,
     648                renderer:       jobCellRender
     649        },{
     650                header:         'S',
     651                tooltip:        'Job status',
     652                readOnly:       true,
     653                dataIndex:      'status',
     654                width:          20,
     655                hidden:         false,
     656                renderer:       jobCellRender
     657        },{
     658                header:         'User',
     659                tooltip:        'Owner of job',
     660                readOnly:       true,
     661                dataIndex:      'owner',
     662                width:          60,
     663                hidden:         false,
     664                renderer:       jobCellRender
     665        },{
     666                header:         'Queue',
     667                tooltip:        'In which queue does this job reside',
     668                readOnly:       true,
     669                dataIndex:      'queue',
     670                width:          60,
     671                hidden:         false,
     672                renderer:       jobCellRender
     673        },{
     674                header:         'Name',
     675                tooltip:        'Name of job',
     676                readOnly:       true,
     677                dataIndex:      'name',
     678                width:          100,
     679                hidden:         false
     680        },{
     681                header:         'Requested Time',
     682                tooltip:        'Amount of requested time (wallclock)',
     683                readOnly:       true,
     684                dataIndex:      'requested_time',
     685                width:          100,
     686                hidden:         false
     687        },{
     688                header:         'Requested Memory',
     689                tooltip:        'Amount of requested memory',
     690                readOnly:       true,
     691                dataIndex:      'requested_memory',
     692                width:          100,
     693                hidden:         true
     694        },{
     695                header:         'P',
     696                tooltip:        'Number of processors per node (PPN)',
     697                readOnly:       true,
     698                dataIndex:      'ppn',
     699                width:          25,
     700                hidden:         false
     701        },{
     702                header:         'N',
     703                tooltip:        'Number of nodes (hosts)',
     704                readOnly:       true,
     705                dataIndex:      'nodect',
     706                width:          25,
     707                hidden:         false
     708        },{
     709                header:         'Nodes',
     710                readOnly:       true,
     711                dataIndex:      'nodes',
     712                width:          100,
     713                hidden:         false,
     714                renderer:       jobCellRender
     715        },{
     716                header:         'Queued',
     717                tooltip:        'At what time did this job enter the queue',
     718                readOnly:       true,
     719                dataIndex:      'queued_timestamp',
     720                width:          120,
     721                hidden:         false
     722        },{
     723                header:         'Started',
     724                tooltip:        'At what time did this job enter the running status',
     725                readOnly:       true,
     726                dataIndex:      'start_timestamp',
     727                width:          120,
     728                hidden:         false
     729        },{
     730                header:         'Runningtime',
     731                tooltip:        'How long has this job been in the running status',
     732                readOnly:       true,
     733                dataIndex:      'runningtime',
     734                width:          140,
     735                hidden:         false
     736        }]
     737);
     738
     739JobsColumnModel.defaultSortable = true;
     740
     741var win;
     742
     743MetricsDataStore = new Ext.data.Store(
     744{
     745        id:             'MetricsDataStore',
     746        proxy:          JobProxy,
     747        autoLoad:       false,
     748        baseParams:     { task: "GETMETRICS" },
     749        reader:
     750                new Ext.data.JsonReader(
     751                {
     752                        root: 'names',
     753                        totalProperty: 'total',
     754                        id: 'id'
     755                },
     756                [{
     757                        name: 'ID'
     758                },{
     759                        name: 'name'
     760                }]
     761                )
     762});
     763
     764SearchField     = new Ext.app.SearchField(
     765                {
     766                        store:  JobsDataStore,
     767                        params: {start: 0, limit: mylimit},
     768                        width:  200
     769                });
     770
     771NodesDataStore = new Ext.data.Store(
     772{
     773        id: 'NodesDataStore',
     774        proxy: JobProxy,
     775        autoLoad: false,
     776        baseParams: { task: "GETNODES" },
     777        reader: new Ext.data.JsonReader(
     778        {
     779                root: 'results',
     780                totalProperty: 'total',
     781                id: 'id'
     782        },[
     783                {name: 'c', type: 'string', mapping: 'c'},
     784                {name: 'h', type: 'string', mapping: 'h'},
     785                {name: 'x', type: 'string', mapping: 'x'},
     786                {name: 'v', type: 'string', mapping: 'v'},
     787                {name: 'l', type: 'string', mapping: 'l'},
     788                {name: 'jr', type: 'string', mapping: 'jr'},
     789                {name: 'js', type: 'string', mapping: 'js'}
     790        ]),
     791        listeners:
     792        {
     793                'beforeload':
     794                {
     795                        scope: this,
     796                        fn:
     797                       
     798                        function()
     799                        {
     800                                var jids;
     801
     802                                var row_records = CheckJobs.getSelections();
     803
     804                                for(var i=0; i<row_records.length; i++ )
     805                                {
     806                                        rsel = row_records[i];
     807                                        if( !jids )
    766808                                        {
    767                                                 rsel = row_records[i];
    768                                                 if( !jids )
    769                                                 {
    770                                                         jids = rsel.get('jid');
    771                                                 }
    772                                                 else
    773                                                 {
    774                                                         jids = jids + ',' + rsel.get('jid');
    775                                                 }
     809                                                jids = rsel.get('jid');
    776810                                        }
    777                                         NodesDataStore.baseParams.jids  = jids;
    778                                         NodesDataStore.baseParams.c     = myparams.c;
    779                         }
    780                 }
    781         }
    782     });
    783 
    784 function ShowGraphs( Button, Event ) {
    785    
    786     var GraphView = new Ext.DataView({
    787         itemSelector: 'thumb',
    788         style:'overflow:auto',
    789         multiSelect: true,
    790         store: NodesDataStore,
    791         tpl: new Ext.XTemplate(
    792             '<tpl for=".">',
    793             '<div class="rrd-float"><img src="../../graph.php?z=small&c={c}&h={h}&l={l}&v={v}&x={x}&r=job&jr={jr}&js={js}" border="0"></div>',
    794             '</tpl>'
    795         )
    796     });
    797 
    798     var images = new Ext.Panel({
    799         id:'images',
    800         //title:'My Images',
    801         region:'center',
    802         bodyStyle: 'background: transparent',
    803         //margins: '2 2 2 0',
    804         layout:'fit',
    805         items: GraphView
    806     });
    807 
    808         if(!win){
    809             win = new Ext.Window({
    810                         animateTarget: Button,
    811                         width       : 500,
    812                         height      : 300,
    813                         closeAction :'hide',
    814                         collapsible: true,
    815                         animCollapse: true,
    816                         maximizable: true,
    817                         title:  'Node graph details',
    818                         layout: 'fit',
    819                         tbar:   new Ext.form.ComboBox({
    820                                         fieldLabel: 'Metric',
    821                                         //hiddenName:'ID',
    822                                         store: MetricsDataStore,
    823                                         valueField:'name',
    824                                         displayField:'name',
    825                                         typeAhead: true,
    826                                         mode: 'remote',
    827                                         triggerAction: 'all',
    828                                         emptyText:'Select metric',
    829                                         selectOnFocus:true,
    830                                         xtype: 'combo',
    831                                         width:190,
    832                                         listeners: {
    833                                                 select: function(combo, record, index){
    834                                                         var metric = record.data.name;
    835                                                         // doe iets
    836                                                 }
    837                                         }
    838                                        
    839                                 }),
    840                         items:  [ images ]
    841                     });
    842         }
    843         NodesDataStore.load();
    844         win.show(Button);
    845 }
    846 
    847   showGraphsButton = new Ext.Button({
    848                                 text: 'Show graphs',
    849                                 tooltip: 'Show node graphs for selected jobs',
    850                                 iconCls: 'option',
    851                                 disabled: true,
    852                                 listeners: {
    853                                         'click': {
    854                                                 scope: this,
    855                                                 fn: ShowGraphs
     811                                        else
     812                                        {
     813                                                jids = jids + ',' + rsel.get('jid');
    856814                                        }
    857815                                }
    858                         });
    859 
    860   JobListingEditorGrid =  new Ext.grid.EditorGridPanel({
    861       id: 'JobListingEditorGrid',
    862       store: JobsDataStore,
    863       cm: JobsColumnModel,
    864       enableColLock:false,
    865       clicksToEdit:1,
    866       loadMask: true,
    867       selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
    868       stripeRows: true,
    869       sm: CheckJobs,
    870       bbar: new Ext.PagingToolbar({
    871                 pageSize: 15,
    872                 store: JobsDataStore,
    873                 displayInfo: true,
    874                 displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total found.',
    875                 emptyMsg: 'No jobs found to display',
    876                 plugins: [new Ext.ux.PageSizePlugin()]
    877             }),
    878       tbar: [ SearchField,
    879                 showGraphsButton,
    880                 filterButton ]
    881     });
    882 
    883   ClusterImageWindow = new Ext.Window({
    884       id: 'ClusterImageWindow',
    885       title: 'Nodes',
    886       closable: true,
    887       collapsible: true,
    888       animCollapse: true,
    889       width: 1,
    890       height: 1,
    891       y: 15,
    892       plain: true,
    893       shadow: true,
    894       resizable: false,
    895       shadowOffset: 10,
    896       layout: 'fit',
    897       bbar: new Ext.StatusBar({
    898                 defaultText: 'Ready.',
    899                 id: 'basic-statusbar',
    900                 defaultIconCls: ''
    901         })
    902     });
    903 
    904   GraphSummaryWindow = new Ext.Window({
    905       id: 'GraphSummaryWindow',
    906       title: 'Graph Summary',
    907       closable: true,
    908       collapsible: true,
    909       animCollapse: true,
    910       width: 500,
    911       height: 400,
    912       x: 10,
    913       y: 10,
    914       plain: true,
    915       shadow: true,
    916       resizable: true,
    917       shadowOffset: 10,
    918       layout: 'table',
    919       layoutConfig: {
    920                 columns: 2
    921         },
    922       defaults:{border: false},
    923       items: [{
    924         id: 'monarchlogo',
    925         cls: 'monarch',
    926         bodyStyle: 'background: transparent',
    927         html: '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
    928         //colspan: 2
    929        },{
    930         id: 'summarycount'
    931        },{
    932         id: 'rjqjgraph'
    933        },{
    934         id: 'pie',
    935         colspan: 2
    936        }],
    937       bbar: new Ext.StatusBar({
    938                 defaultText: 'Ready.',
    939                 id: 'basic-statusbar',
    940                 defaultIconCls: ''
    941         })
    942     });
    943 
    944   JobListingWindow = new Ext.Window({
    945       id: 'JobListingWindow',
    946       title: 'Cluster Jobs Overview',
    947       closable:true,
    948       collapsible: true,
    949       animCollapse: true,
    950       maximizable: true,
    951       y: 375,
    952       width:860,
    953       height:445,
    954       plain:true,
    955       shadow: true,
    956       shadowOffset: 10,
    957       layout: 'fit',
    958       items: JobListingEditorGrid
    959     });
    960 
    961   JobListingEditorGrid.addListener( 'cellclick', jobCellClick );
    962   CheckJobs.addListener( 'selectionchange', jobRowSelect );
    963 }
     816                                NodesDataStore.baseParams.jids  = jids;
     817                                NodesDataStore.baseParams.c     = myparams.c;
     818                        }
     819                }
     820        }
     821});
     822
     823function ShowGraphs( Button, Event )
     824{
     825        var GraphView =
     826       
     827                new Ext.DataView(
     828                {
     829                        itemSelector:   'thumb',
     830                        style:          'overflow:auto',
     831                        multiSelect:    true,
     832                        store:          NodesDataStore,
     833                        tpl:
     834                       
     835                                new Ext.XTemplate(
     836                                        '<tpl for=".">',
     837                                        '<div class="rrd-float"><img src="../../graph.php?z=small&c={c}&h={h}&l={l}&v={v}&x={x}&r=job&jr={jr}&js={js}" border="0"></div>',
     838                                        '</tpl>'
     839                                )
     840                });
     841
     842        var images =
     843
     844                new Ext.Panel(
     845                {
     846                        id:             'images',
     847                        //title:        'My Images',
     848                        region:         'center',
     849                        bodyStyle:      'background: transparent',
     850                        //margins:      '2 2 2 0',
     851                        layout:         'fit',
     852                        items:          GraphView
     853                });
     854
     855        if(!win)
     856        {
     857                win = new Ext.Window(
     858                {
     859                        animateTarget:  Button,
     860                        width:          500,
     861                        height:         300,
     862                        closeAction:    'hide',
     863                        collapsible:    true,
     864                        animCollapse:   true,
     865                        maximizable:    true,
     866                        title:          'Node graph details',
     867                        layout:         'fit',
     868                        tbar:   
     869                       
     870                        new Ext.form.ComboBox(
     871                        {
     872                                fieldLabel:     'Metric',
     873                                //hiddenName:   'ID',
     874                                store:          MetricsDataStore,
     875                                valueField:     'name',
     876                                displayField:   'name',
     877                                typeAhead:      true,
     878                                mode:           'remote',
     879                                triggerAction:  'all',
     880                                emptyText:      'Select metric',
     881                                selectOnFocus:  true,
     882                                xtype:          'combo',
     883                                width:          190,
     884                                listeners:
     885                                {
     886                                        select:
     887                                                       
     888                                        function(combo, record, index)
     889                                        {
     890                                                var metric = record.data.name;
     891                                                // doe iets
     892                                        }
     893                                }
     894
     895                        }),
     896
     897                        items:  [ images ]
     898                });
     899        }
     900        NodesDataStore.load();
     901        win.show( Button );
     902}
     903
     904var showGraphsButton =
     905
     906        new Ext.Button(
     907        {
     908                text:           'Show graphs',
     909                tooltip:        'Show node graphs for selected jobs',
     910                iconCls:        'option',
     911                disabled:       true,
     912                listeners:
     913                {
     914                        'click':
     915                        {
     916                                scope:  this,
     917                                fn:     ShowGraphs
     918                        }
     919                }
     920        });
     921
     922var JobListingEditorGrid =
     923
     924        new Ext.grid.EditorGridPanel(
     925        {
     926                id:             'JobListingEditorGrid',
     927                store:          JobsDataStore,
     928                cm:             JobsColumnModel,
     929                enableColLock:  false,
     930                clicksToEdit:   1,
     931                loadMask:       true,
     932                selModel:       new Ext.grid.RowSelectionModel({singleSelect:false}),
     933                stripeRows:     true,
     934                sm:             CheckJobs,
     935                listeners:
     936                {
     937                        'cellclick':
     938                        {
     939                                scope:  this,
     940                                fn:     jobCellClick
     941                        }
     942                },
     943                bbar:
     944       
     945                new Ext.PagingToolbar(
     946                {
     947                        pageSize: 15,
     948                        store: JobsDataStore,
     949                        displayInfo: true,
     950                        displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total found.',
     951                        emptyMsg: 'No jobs found to display',
     952                        plugins: [new Ext.ux.PageSizePlugin()]
     953                }),
     954
     955                tbar:
     956                [
     957                        SearchField,
     958                        showGraphsButton,
     959                        filterButton
     960                ]
     961        });
     962
     963var ClusterImageWindow =
     964
     965        new Ext.Window(
     966        {
     967                id:             'ClusterImageWindow',
     968                title:          'Nodes',
     969                closable:       true,
     970                collapsible:    true,
     971                animCollapse:   true,
     972                width:          1,
     973                height:         1,
     974                y:              15,
     975                plain:          true,
     976                shadow:         true,
     977                resizable:      false,
     978                shadowOffset:   10,
     979                layout:         'fit',
     980                bbar:
     981               
     982                        new Ext.StatusBar(
     983                        {
     984                                defaultText: 'Ready.',
     985                                id: 'basic-statusbar',
     986                                defaultIconCls: ''
     987                        })
     988        });
     989
     990var GraphSummaryWindow =
     991
     992        new Ext.Window(
     993        {
     994                id:             'GraphSummaryWindow',
     995                title:          'Graph Summary',
     996                closable:       true,
     997                collapsible:    true,
     998                animCollapse:   true,
     999                width:          500,
     1000                height:         400,
     1001                x:              10,
     1002                y:              10,
     1003                plain:          true,
     1004                shadow:         true,
     1005                resizable:      true,
     1006                shadowOffset:   10,
     1007                layout:         'table',
     1008                layoutConfig:
     1009                {
     1010                        columns: 2
     1011                },
     1012                defaults:       { border: false },
     1013                items:
     1014                [
     1015                        {
     1016                                id:             'monarchlogo',
     1017                                cls:            'monarch',
     1018                                bodyStyle:      'background: transparent',
     1019                                html:           '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
     1020                                //colspan: 2
     1021                        },{
     1022                                id:             'summarycount'
     1023                        },{
     1024                                id:             'rjqjgraph'
     1025                        },{
     1026                                id:             'pie',
     1027                                colspan:        2
     1028                        }
     1029                ],
     1030                bbar:
     1031               
     1032                        new Ext.StatusBar(
     1033                        {
     1034                                defaultText:    'Ready.',
     1035                                id:             'basic-statusbar',
     1036                                defaultIconCls: ''
     1037                        })
     1038        });
     1039
     1040var JobListingWindow =
     1041
     1042        new Ext.Window(
     1043        {
     1044                id:             'JobListingWindow',
     1045                title:          'Cluster Jobs Overview',
     1046                closable:       true,
     1047                collapsible:    true,
     1048                animCollapse:   true,
     1049                maximizable:    true,
     1050                y:              375,
     1051                width:          860,
     1052                height:         445,
     1053                plain:          true,
     1054                shadow:         true,
     1055                shadowOffset:   10,
     1056                layout:         'fit',
     1057                items:          JobListingEditorGrid
     1058        });

  • trunk/web2/addons/job_monarch/templates/header.tpl

    r591 r593  
    1414<script type="text/javascript" src="./js/monarch.js"></script>
    1515<script type="text/javascript">
    16 Ext.onReady( function(){
    17   initJobGrid();
    18   JobProxy.on('beforeload', function(p, params)
    19     {
    20         params.c = "{cluster}";
    21         newparams = joinMyArray( params, myfilters );
    22         myparams = newparams;
    23         params = newparams;
    24     });
    2516
    26   ClusterImageArgs['{session_name}'] = '{session_id}';
    27   ClusterImageArgs['c'] = '{cluster}';
     17Ext.onReady( function()
     18{
     19        Ext.QuickTips.init();
    2820
    29   ClusterImageWindow.html = '<IMG ID="clusterimage" SRC="{clusterimage}" USEMAP="#MONARCH_CLUSTER_BIG" BORDER="0">';
    30   ClusterImageWindow.show();
    31   reloadClusterImage();
     21        JobProxy.on('beforeload', function(p, params)
     22        {
     23                params.c        = "{cluster}";
     24                newparams       = joinMyArray( params, myfilters );
     25                myparams        = newparams;
     26                params          = newparams;
     27        });
    3228
    33   JobListingWindow.setTitle( "{cluster} Jobs Overview" );
    34   JobListingWindow.show();
    35   reloadJobStore();
     29        ClusterImageArgs['{session_name}']      = '{session_id}';
     30        ClusterImageArgs['c']                   = '{cluster}';
    3631
    37   GraphSummaryWindow.show();
     32        ClusterImageWindow.html                 = '<IMG ID="clusterimage" SRC="{clusterimage}" USEMAP="#MONARCH_CLUSTER_BIG" BORDER="0">';
     33        ClusterImageWindow.show();
     34        reloadClusterImage();
    3835
    39   Ext.get( 'rjqjgraph' ).update( '<IMG ID="rjqj_graph" SRC="{rjqj_graph}" BORDER=0>' );
    40   Ext.get( 'pie' ).update( '<IMG ID="pie" SRC="{pie}" BORDER=0>' );
     36        JobListingWindow.setTitle( "{cluster} Jobs Overview" );
     37        JobListingWindow.show();
     38        reloadJobStore();
     39
     40        GraphSummaryWindow.show();
     41
     42        Ext.get( 'rjqjgraph' ).update( '<IMG ID="rjqj_graph" SRC="{rjqj_graph}" BORDER=0>' );
     43        Ext.get( 'pie' ).update( '<IMG ID="pie" SRC="{pie}" BORDER=0>' );
    4144});
    4245</script>
Note: See TracChangeset for help on using the changeset viewer.