Changeset 595 for trunk

Timestamp:

02/09/09 20:21:05 (15 years ago)

Author:

ramonb

Message:

js/monarch.js:

• added modulair/tabbed graph views of jobs

File:

• trunk/web2/addons/job_monarch/js/monarch.js (modified) (13 diffs)

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

@@ -23 +23 @@
 var filterfields = [ "jid", "queue", "name", "owner" ];
 
+var graphWindowBehaviour = 'tabbed-new-window';
+var previousGraphWindow;
+
 var filterMenu = new Ext.menu.Menu(
 {
@@ -33 +36 @@
         id:             'filtermenuknop',
         text:           'Filters',
+        toolip:         'Click to change filter options',
         disabled:       true,
         menu:           filterMenu,
@@ -41 +45 @@
                         scope:  this,
                         fn:     function( myButton, event )
-                                {
+                                {       // immediatly show menu when button is clicked
                                         myButton.menu.show( myButton.getEl() );
                                 }
@@ -50 +54 @@
 function checkGraphWindowOption( item, checked )
 {
-        alert('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
+        graphWindowBehaviour    = item.id;
 }
 
@@ -58 +62 @@
         items:
         [{
+                id:             'new-window',
                 text:           'Each job in new window',
                 checked:        false,
@@ -63 +68 @@
                 handler:        checkGraphWindowOption
         },{
+                id:             'tabbed-new-window',
                 text:           'Each job in a seperate tab, in new window',
                 checked:        true,
@@ -68 +74 @@
                 handler:        checkGraphWindowOption
         },{
+                id:             'tabbed-prev-window',
                 text:           'Each job in a seperate tab, in last opened window',
                 checked:        false,
@@ -812 +819 @@
                 });
 
-NodesDataStore = new Ext.data.Store(
-{
-        id: 'NodesDataStore',
-        proxy: JobProxy,
-        autoLoad: false,
-        baseParams: { task: "GETNODES" },
-        reader: new Ext.data.JsonReader(
-        {
-                root: 'results',
-                totalProperty: 'total',
-                id: 'id'
-        },[
-                {name: 'c', type: 'string', mapping: 'c'},
-                {name: 'h', type: 'string', mapping: 'h'},
-                {name: 'x', type: 'string', mapping: 'x'},
-                {name: 'v', type: 'string', mapping: 'v'},
-                {name: 'l', type: 'string', mapping: 'l'},
-                {name: 'jr', type: 'string', mapping: 'jr'},
-                {name: 'js', type: 'string', mapping: 'js'}
-        ]),
-        listeners: 
-        {
-                'beforeload': 
-                {
-                        scope: this,
-                        fn: 
-                        
-                        function() 
-                        {
-                                var jids;
-
-                                var row_records = CheckJobs.getSelections();
-
-                                for(var i=0; i<row_records.length; i++ )
-                                {
-                                        rsel = row_records[i];
-                                        if( !jids )
-                                        {
-                                                jids = rsel.get('jid');
-                                        }
-                                        else
-                                        {
-                                                jids = jids + ',' + rsel.get('jid');
-                                        }
-                                }
-                                NodesDataStore.baseParams.jids  = jids;
-                                NodesDataStore.baseParams.c     = myparams.c;
-                        }
-                }
-        }
-});
-
-function ShowGraphs( Button, Event ) 
-{
-        var GraphView =
+function createNodesDataStore( cluster, jid )
+{
+        nodesDataStore =
+
+                new Ext.data.Store(
+                {
+                        //id:           'NodesDataStore',
+                        proxy:          JobProxy,
+                        autoLoad:       false,
+                        baseParams:
+                        {
+                                'task':         "GETNODES",
+                                'c':            cluster,
+                                'jid':          jid
+                        },
+                        reader: new Ext.data.JsonReader(
+                        {
+                                root:           'results',
+                                totalProperty:  'total',
+                                id:             'id'
+                        },[
+                                {name: 'c', type: 'string', mapping: 'c'},
+                                {name: 'h', type: 'string', mapping: 'h'},
+                                {name: 'x', type: 'string', mapping: 'x'},
+                                {name: 'v', type: 'string', mapping: 'v'},
+                                {name: 'l', type: 'string', mapping: 'l'},
+                                {name: 'jr', type: 'string', mapping: 'jr'},
+                                {name: 'js', type: 'string', mapping: 'js'}
+                        ])
+                });
+
+        return nodesDataStore;
+}
+
+function createGraphView( store, jid )
+{
+        var graphView =
         
                 new Ext.DataView(
                 {
+                        id:             jid,    
                         itemSelector:   'thumb',
+                        title:          jid,
                         style:          'overflow:auto',
                         multiSelect:    true,
-                        store:          NodesDataStore,
+                        //autoHeight:   true,
+                        autoShow:       true,
+                        store:          store,
+                        layout:         'fit',
                         tpl:
                         
@@ -883 +877 @@
                 });
 
-        var images = 
-
-                new Ext.Panel(
+        return graphView;
+}
+
+function createGraphPanel( view )
+{
+        var graphPanel = 
+
+                new Ext.TabPanel(
                 {
                         id:             'images',
-                        //title:        'My Images',
                         region:         'center',
                         bodyStyle:      'background: transparent',
+                        autoShow:       true,
+                        autoHeight:     true,
                         //margins:      '2 2 2 0',
-                        layout:         'fit',
-                        items:          GraphView
+                        //layout:       'fit',
+                        resizeTabs:     true,
+                        minTabWidth:    115,
+                        tabWidth:       135,
+                        enableTabScroll:true,
+                        defaults:       {autoScroll:true}
                 });
 
-        if(!win)
-        {
-                win = new Ext.Window(
+        return graphPanel;
+}
+
+function createGraphWindow( panel, Button )
+{
+        graphWindow =
+
+                new Ext.Window(
                 {
                         animateTarget:  Button,
@@ -908 +917 @@
                         maximizable:    true,
                         title:          'Node graph details',
-                        layout:         'fit',
+                        //layout:               'fit',
                         tbar:   
-                        
+                
+                        // RB TODO: range combobox; hour, day, week, etc
+        
                         new Ext.form.ComboBox(
                         {
                                 fieldLabel:     'Metric',
-                                //hiddenName:   'ID',
                                 store:          MetricsDataStore,
                                 valueField:     'name',
@@ -921 +931 @@
                                 mode:           'remote',
                                 triggerAction:  'all',
-                                emptyText:      'Select metric',
+                                emptyText:      'load_one',
                                 selectOnFocus:  true,
                                 xtype:          'combo',
@@ -933 +943 @@
                                                 var metric = record.data.name;
                                                 // doe iets
+
+                                                // RB: misschien zo metric opgeven aan datastore?
+                                                //items[0].items[0].getStore().baseParams.metric = metric;
                                         }
                                 }
@@ -938 +951 @@
                         }),
 
-                        items:  [ images ]
+                        items:  [ panel ]
                 });
-        }
-        NodesDataStore.load();
-        win.show( Button );
+
+        return graphWindow;
+}
+
+function ShowGraphs( Button, Event ) 
+{
+        var row_records         = CheckJobs.getSelections();
+        var graphJids           = Array();
+        var windowCount         = 0;
+        var tabCount            = 0;
+
+        for( var i=0; i<row_records.length; i++ )
+        {
+                rsel            = row_records[i];
+                jid             = rsel.get('jid');
+
+                if( graphJids[windowCount] == undefined )
+                {
+                        graphJids[windowCount]  = Array();
+                }
+
+                graphJids[windowCount][tabCount]        = jid;
+
+                if( (i+1) < row_records.length )
+                {
+                        if( graphWindowBehaviour == 'new-window' )
+                        {
+                                windowCount++;
+                        }
+                        else
+                        {
+                                tabCount++;
+                        }
+                }
+        }
+
+        for( var w=0; w<=windowCount; w++ )
+        {
+                if( graphWindowBehaviour == 'tabbed-prev-window' )
+                {
+                        myWindow        = previousGraphWindow;
+                        myPanel         = previousGraphPanel;
+                }
+                else
+                {
+                        myPanel         = createGraphPanel();
+                        myWindow        = createGraphWindow( myPanel, Button );
+
+                        myWindow.add( myPanel );
+                }
+
+                for( var t=0; t<=tabCount; t++ )
+                {
+                        nodeDatastore   = createNodesDataStore( myparams.c, graphJids[w][t] );
+                        graphView       = createGraphView( nodeDatastore, graphJids[w][t] );
+                        lastView        = myPanel.add( graphView );
+
+                        nodeDatastore.load();
+                        myPanel.setActiveTab( lastView );
+                }
+
+                myWindow.show( Button );
+
+                myPanel.doLayout();
+                myWindow.doLayout();
+
+                previousGraphWindow     = myWindow;
+                previousGraphPanel      = myPanel;
+        }
 }