Changeset 595


Ignore:
Timestamp:
02/09/09 20:21:05 (15 years ago)
Author:
ramonb
Message:

js/monarch.js:

  • added modulair/tabbed graph views of jobs
File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/web2/addons/job_monarch/js/monarch.js

    r594 r595  
    2323var filterfields = [ "jid", "queue", "name", "owner" ];
    2424
     25var graphWindowBehaviour = 'tabbed-new-window';
     26var previousGraphWindow;
     27
    2528var filterMenu = new Ext.menu.Menu(
    2629{
     
    3336        id:             'filtermenuknop',
    3437        text:           'Filters',
     38        toolip:         'Click to change filter options',
    3539        disabled:       true,
    3640        menu:           filterMenu,
     
    4145                        scope:  this,
    4246                        fn:     function( myButton, event )
    43                                 {
     47                                {       // immediatly show menu when button is clicked
    4448                                        myButton.menu.show( myButton.getEl() );
    4549                                }
     
    5054function checkGraphWindowOption( item, checked )
    5155{
    52         alert('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
     56        graphWindowBehaviour    = item.id;
    5357}
    5458
     
    5862        items:
    5963        [{
     64                id:             'new-window',
    6065                text:           'Each job in new window',
    6166                checked:        false,
     
    6368                handler:        checkGraphWindowOption
    6469        },{
     70                id:             'tabbed-new-window',
    6571                text:           'Each job in a seperate tab, in new window',
    6672                checked:        true,
     
    6874                handler:        checkGraphWindowOption
    6975        },{
     76                id:             'tabbed-prev-window',
    7077                text:           'Each job in a seperate tab, in last opened window',
    7178                checked:        false,
     
    812819                });
    813820
    814 NodesDataStore = new Ext.data.Store(
    815 {
    816         id: 'NodesDataStore',
    817         proxy: JobProxy,
    818         autoLoad: false,
    819         baseParams: { task: "GETNODES" },
    820         reader: new Ext.data.JsonReader(
    821         {
    822                 root: 'results',
    823                 totalProperty: 'total',
    824                 id: 'id'
    825         },[
    826                 {name: 'c', type: 'string', mapping: 'c'},
    827                 {name: 'h', type: 'string', mapping: 'h'},
    828                 {name: 'x', type: 'string', mapping: 'x'},
    829                 {name: 'v', type: 'string', mapping: 'v'},
    830                 {name: 'l', type: 'string', mapping: 'l'},
    831                 {name: 'jr', type: 'string', mapping: 'jr'},
    832                 {name: 'js', type: 'string', mapping: 'js'}
    833         ]),
    834         listeners:
    835         {
    836                 'beforeload':
    837                 {
    838                         scope: this,
    839                         fn:
    840                        
    841                         function()
    842                         {
    843                                 var jids;
    844 
    845                                 var row_records = CheckJobs.getSelections();
    846 
    847                                 for(var i=0; i<row_records.length; i++ )
    848                                 {
    849                                         rsel = row_records[i];
    850                                         if( !jids )
    851                                         {
    852                                                 jids = rsel.get('jid');
    853                                         }
    854                                         else
    855                                         {
    856                                                 jids = jids + ',' + rsel.get('jid');
    857                                         }
    858                                 }
    859                                 NodesDataStore.baseParams.jids  = jids;
    860                                 NodesDataStore.baseParams.c     = myparams.c;
    861                         }
    862                 }
    863         }
    864 });
    865 
    866 function ShowGraphs( Button, Event )
    867 {
    868         var GraphView =
     821function createNodesDataStore( cluster, jid )
     822{
     823        nodesDataStore =
     824
     825                new Ext.data.Store(
     826                {
     827                        //id:           'NodesDataStore',
     828                        proxy:          JobProxy,
     829                        autoLoad:       false,
     830                        baseParams:
     831                        {
     832                                'task':         "GETNODES",
     833                                'c':            cluster,
     834                                'jid':          jid
     835                        },
     836                        reader: new Ext.data.JsonReader(
     837                        {
     838                                root:           'results',
     839                                totalProperty:  'total',
     840                                id:             'id'
     841                        },[
     842                                {name: 'c', type: 'string', mapping: 'c'},
     843                                {name: 'h', type: 'string', mapping: 'h'},
     844                                {name: 'x', type: 'string', mapping: 'x'},
     845                                {name: 'v', type: 'string', mapping: 'v'},
     846                                {name: 'l', type: 'string', mapping: 'l'},
     847                                {name: 'jr', type: 'string', mapping: 'jr'},
     848                                {name: 'js', type: 'string', mapping: 'js'}
     849                        ])
     850                });
     851
     852        return nodesDataStore;
     853}
     854
     855function createGraphView( store, jid )
     856{
     857        var graphView =
    869858       
    870859                new Ext.DataView(
    871860                {
     861                        id:             jid,   
    872862                        itemSelector:   'thumb',
     863                        title:          jid,
    873864                        style:          'overflow:auto',
    874865                        multiSelect:    true,
    875                         store:          NodesDataStore,
     866                        //autoHeight:   true,
     867                        autoShow:       true,
     868                        store:          store,
     869                        layout:         'fit',
    876870                        tpl:
    877871                       
     
    883877                });
    884878
    885         var images =
    886 
    887                 new Ext.Panel(
     879        return graphView;
     880}
     881
     882function createGraphPanel( view )
     883{
     884        var graphPanel =
     885
     886                new Ext.TabPanel(
    888887                {
    889888                        id:             'images',
    890                         //title:        'My Images',
    891889                        region:         'center',
    892890                        bodyStyle:      'background: transparent',
     891                        autoShow:       true,
     892                        autoHeight:     true,
    893893                        //margins:      '2 2 2 0',
    894                         layout:         'fit',
    895                         items:          GraphView
     894                        //layout:       'fit',
     895                        resizeTabs:     true,
     896                        minTabWidth:    115,
     897                        tabWidth:       135,
     898                        enableTabScroll:true,
     899                        defaults:       {autoScroll:true}
    896900                });
    897901
    898         if(!win)
    899         {
    900                 win = new Ext.Window(
     902        return graphPanel;
     903}
     904
     905function createGraphWindow( panel, Button )
     906{
     907        graphWindow =
     908
     909                new Ext.Window(
    901910                {
    902911                        animateTarget:  Button,
     
    908917                        maximizable:    true,
    909918                        title:          'Node graph details',
    910                         layout:         'fit',
     919                        //layout:               'fit',
    911920                        tbar:   
    912                        
     921               
     922                        // RB TODO: range combobox; hour, day, week, etc
     923       
    913924                        new Ext.form.ComboBox(
    914925                        {
    915926                                fieldLabel:     'Metric',
    916                                 //hiddenName:   'ID',
    917927                                store:          MetricsDataStore,
    918928                                valueField:     'name',
     
    921931                                mode:           'remote',
    922932                                triggerAction:  'all',
    923                                 emptyText:      'Select metric',
     933                                emptyText:      'load_one',
    924934                                selectOnFocus:  true,
    925935                                xtype:          'combo',
     
    933943                                                var metric = record.data.name;
    934944                                                // doe iets
     945
     946                                                // RB: misschien zo metric opgeven aan datastore?
     947                                                //items[0].items[0].getStore().baseParams.metric = metric;
    935948                                        }
    936949                                }
     
    938951                        }),
    939952
    940                         items:  [ images ]
     953                        items:  [ panel ]
    941954                });
    942         }
    943         NodesDataStore.load();
    944         win.show( Button );
     955
     956        return graphWindow;
     957}
     958
     959function ShowGraphs( Button, Event )
     960{
     961        var row_records         = CheckJobs.getSelections();
     962        var graphJids           = Array();
     963        var windowCount         = 0;
     964        var tabCount            = 0;
     965
     966        for( var i=0; i<row_records.length; i++ )
     967        {
     968                rsel            = row_records[i];
     969                jid             = rsel.get('jid');
     970
     971                if( graphJids[windowCount] == undefined )
     972                {
     973                        graphJids[windowCount]  = Array();
     974                }
     975
     976                graphJids[windowCount][tabCount]        = jid;
     977
     978                if( (i+1) < row_records.length )
     979                {
     980                        if( graphWindowBehaviour == 'new-window' )
     981                        {
     982                                windowCount++;
     983                        }
     984                        else
     985                        {
     986                                tabCount++;
     987                        }
     988                }
     989        }
     990
     991        for( var w=0; w<=windowCount; w++ )
     992        {
     993                if( graphWindowBehaviour == 'tabbed-prev-window' )
     994                {
     995                        myWindow        = previousGraphWindow;
     996                        myPanel         = previousGraphPanel;
     997                }
     998                else
     999                {
     1000                        myPanel         = createGraphPanel();
     1001                        myWindow        = createGraphWindow( myPanel, Button );
     1002
     1003                        myWindow.add( myPanel );
     1004                }
     1005
     1006                for( var t=0; t<=tabCount; t++ )
     1007                {
     1008                        nodeDatastore   = createNodesDataStore( myparams.c, graphJids[w][t] );
     1009                        graphView       = createGraphView( nodeDatastore, graphJids[w][t] );
     1010                        lastView        = myPanel.add( graphView );
     1011
     1012                        nodeDatastore.load();
     1013                        myPanel.setActiveTab( lastView );
     1014                }
     1015
     1016                myWindow.show( Button );
     1017
     1018                myPanel.doLayout();
     1019                myWindow.doLayout();
     1020
     1021                previousGraphWindow     = myWindow;
     1022                previousGraphPanel      = myPanel;
     1023        }
    9451024}
    9461025
Note: See TracChangeset for help on using the changeset viewer.