source: trunk/web2/addons/job_monarch/js/jobgrid.js @ 588

var JobsDataStore;
var JobsColumnModel;
var JobListingEditorGrid;
var JobListingWindow;
var JobProxy;
var SearchField;
var filterButton;
var myfilters = { };
var myparams = { };
var mylimit = 15;
var ClusterImageArgs = { };

var filterfields = [ "jid", "queue", "name", "owner" ];

var filterMenu = new Ext.menu.Menu({
    id: 'filterMenu',
    items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
});

var filterButton = new Ext.MenuButton({
                        id: 'filtermenuknop',
                        text: 'Filters',
                        disabled: true,
                        menu: filterMenu
                });

Ext.namespace('Ext.ux');

Ext.ux.PageSizePlugin = function() {
    Ext.ux.PageSizePlugin.superclass.constructor.call(this, {
        store: new Ext.data.SimpleStore({
            fields: ['text', 'value'],
            data: [['10', 10], ['15', 15], ['20', 20], ['30', 30], ['50', 50], ['100', 100], ['max', 'max' ]]
        }),
        mode: 'local',
        displayField: 'text',
        valueField: 'value',
        editable: false,
        allowBlank: false,
        triggerAction: 'all',
        width: 40
    });
};

Ext.extend(Ext.ux.PageSizePlugin, Ext.form.ComboBox, {
    init: function(paging) {
        paging.on('render', this.onInitView, this);
    },
    
    onInitView: function(paging) {
        paging.add('-',
            this,
            'jobs per page'
        );
        this.setValue(paging.pageSize);
        this.on('select', this.onPageSizeChanged, paging);
    },
    
    onPageSizeChanged: function(combo) {
        if ( combo.getValue() == 'max' )
          mylimit = JobsDataStore.getTotalCount();
        else
          mylimit = parseInt(combo.getValue());
        this.pageSize = mylimit;
        this.doLoad(0);
    }
});

Ext.namespace( 'Ext' );

function clearFilters()
{
        if( inMyArrayKeys( myfilters, 'query' ) )
        {
                SearchField.getEl().dom.value = '';
                delete SearchField.store.baseParams['query'];
                delete myfilters['query'];
                delete myparams['query'];
        }
        if( inMyArrayKeys( myfilters, 'host' ) )
        {
                delete myfilters['host'];
                delete myparams['host'];
        }
        if( inMyArrayKeys( myfilters, 'jid' ) )
        {
                delete myfilters['jid'];
                delete myparams['jid'];
        }
        if( inMyArrayKeys( myfilters, 'queue' ) )
        {
                delete myfilters['queue'];
                delete myparams['queue'];
        }
        if( inMyArrayKeys( myfilters, 'owner' ) )
        {
                delete myfilters['owner'];
                delete myparams['owner'];
        }
        if( inMyArrayKeys( myfilters, 'status' ) )
        {
                delete myfilters['status'];
                delete myparams['status'];
        }
        reloadJobStore();
}

function makeArrayURL( somearr )
{
  filter_url = '';
  filter_sep = '';

  for( filtername in somearr )
  {
    filter_url = filter_url + filter_sep + filtername + '=' + somearr[filtername];
    filter_sep = '&';
  }

  return filter_url;
}


function isset( somevar )
{
  try
  {
    if( eval( somevar ) ) { }
  }
  catch( err )
  {
    return false;
  }
  return true;
}

function inMyArray( arr, someval )
{
  for( arval in arr )
  {
    if( arval == someval )
    {
      return true;
    }
  }
  return false;
}

function ArraySize( arr )
{
  count = 0;

  for( arkey in arr )
  {
    count = count + 1;
  }

  return count;
}

function inMyArrayValues( arr, someval )
{
  for( arkey in arr )
  {
    if( arr[arkey] == someval )
    {
      return true;
    }
  }
  return false;
}

function inMyArrayKeys( arr, someval )
{
  for( arkey in arr )
  {
    if( arkey == someval )
    {
      return true;
    }
  }
  return false;
}

function joinMyArray( arr1, arr2 )
{
  for( arkey in arr2 )
  {
    arr1[arkey] = arr2[arkey];
  }

  return arr1;
}

function ClusterImageSelectHost( somehost )
{

  if( !inMyArrayKeys( myfilters, 'host' ) )
  {
    myfilters['host'] = somehost;
  }
  else
  {
    if( myfilters['host'] == somehost )
    {
      delete myfilters['host'];
      delete myparams['host'];
    }
    else
    {
      myfilters['host'] = somehost;
    }
  }

  reloadClusterImage();
  reloadJobStore();

  return false;
}

function reloadJobStore()
{
  // Respect any other parameters that may have been set outside filters
  //
  myparams = joinMyArray( myparams, myfilters );

  // Can't be sure if there are enough pages for new filter: reset to page 1
  //
  myparams = joinMyArray( myparams, { start: 0, limit: mylimit } );

  JobsDataStore.reload( { params: myparams } );
}

function addListener(element, type, expression, bubbling)
{
  bubbling = bubbling || false;
  if(window.addEventListener)
  { // Standard
    element.addEventListener(type, expression, bubbling);
    return true;
  } 
  else if(window.attachEvent) 
  { // IE
    element.attachEvent('on' + type, expression);
    return true;
  } 
  else 
    return false;
}

function makeFilterString()
{
  var filter_str = '';

  for( arkey in myfilters )
  {
    filter_str = filter_str + ' > ' + myfilters[arkey];
  }

  return filter_str;
}

var ImageLoader = function( id, url )
{
  this.url = url;
  this.image = document.getElementById( id );
  this.loadEvent = null;
};

ImageLoader.prototype = 
{
  load:function()
  {
    var url = this.url;
    var image = this.image;
    var loadEvent = this.loadEvent;
    addListener( this.image, 'load', function(e)
    {
      if( loadEvent != null )
      {
        loadEvent( url, image );
      }
    }, false);
    this.image.src = this.url;
  },
  getImage: function()
  {
    return this.image;
  }
};

function achorJobListing()
{
  JobListingWindow.anchorTo( "ClusterImageWindow", "tr-br", [ 0, 10 ] );
}

function setClusterImagePosition()
{
  ci_x = (window.innerWidth - ClusterImageWindow.getSize()['width'] - 20); 
  ClusterImageWindow.setPosition( ci_x, 10 );
}

function deselectFilterMenu( menuItem, event )
{
  filterValue = menuItem.text;

  if( filterValue == SearchField.getEl().dom.value && inMyArrayKeys( myfilters, 'query' ) )
  {
    SearchField.getEl().dom.value = '';
    delete SearchField.store.baseParams['query'];
  }

  for( arkey in myfilters )
  {
    if( myfilters[arkey] == filterValue )
    {
      delete myfilters[arkey];
      delete myparams[arkey];
    }
  }
  reloadJobStore();
}

function makeFilterMenu()
{
  var filterMenu = new Ext.menu.Menu({
      id: 'filterMenu',
      items: [ new Ext.menu.Item({ text: 'Clear all', handler: clearFilters }) ]
  });

  if( ArraySize( myfilters ) > 0 )
  {
    filterMenu.addSeparator();
  }

  for( arkey in myfilters )
  {
    filterMenu.add( new Ext.menu.CheckItem({ text: myfilters[arkey], handler: deselectFilterMenu, checked: true }) );
  }

  if( filterButton )
  {
    filterButton.menu = filterMenu;

    if( ArraySize( myfilters ) > 0 )
    {
      filterButton.enable();
    }
    else
    {
      filterButton.disable();
    }
  }
}

function reloadClusterImage()
{
  ClusterImageArgs['view'] = 'big-clusterimage';

  filt_url = makeArrayURL( myfilters );
  imag_url = makeArrayURL( ClusterImageArgs );
  img_url = './image.php?' + filt_url + '&' + imag_url;

  var newClusterImage = new ImageLoader( 'clusterimage', img_url );
  newClusterImage.loadEvent = function( url, image ) 
    {
      ClusterImageWindow.getBottomToolbar().clearStatus( { useDefaults:true } );
      setTimeout( "resizeClusterImage()", 250 );
      setTimeout( "setClusterImagePosition()", 500 );
      //setTimeout( "achorJobListing()", 1000 );
    }

  ClusterImageWindow.getBottomToolbar().showBusy();

  filter_str = 'Nodes' + makeFilterString();
  ClusterImageWindow.setTitle( filter_str );

  newClusterImage.load();
}

function resizeClusterImage()
{
  var ci_height = document.getElementById( "clusterimage" ).height + ClusterImageWindow.getFrameHeight();
  var ci_width = document.getElementById( "clusterimage" ).width + ClusterImageWindow.getFrameWidth();

  ClusterImageWindow.setSize( ci_width, ci_height );
}

Ext.apply(Ext.form.VTypes, {
        num: function(val, field) {

                if (val) {
                   var strValidChars = "0123456789";
                   var blnResult = true;

                   if (val.length == 0) return false;

                   //  test strString consists of valid characters listed above
                   for (i = 0; i < val.length && blnResult == true; i++)
                      {
                      strChar = val.charAt(i);
                      if (strValidChars.indexOf(strChar) == -1)
                         {
                         blnResult = false;
                         }
                      }
                   return blnResult;

                }
                },
        numText: 'Must be numeric'
});

function initJobGrid() {

  Ext.QuickTips.init();

  function jobCellClick(grid, rowIndex, columnIndex, e)
  {
    var record = grid.getStore().getAt(rowIndex);  // Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
    var data = record.get(fieldName);
    var view = grid.getView();
    var cell = view.getCell( rowIndex, columnIndex );
    var filter_title = false;
    var fil_dis = 'filter';
    var fil_ena = 'filterenabled';
    var filterName = fieldName;

    if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' || fieldName == 'nodes')
    {
      if( fieldName == 'nodes' )
      {
        filterName = 'host';
        fil_dis = 'nodesfilter';
        fil_ena = 'nodesfilterenabled';
      }
      if( inMyArrayKeys( myfilters, filterName ) )
      {
        Ext.fly(cell).removeClass( fil_ena );
        Ext.fly(cell).addClass( fil_dis );

        // Remove this filter
        //
        delete myfilters[filterName];
        delete myparams[filterName];

        reloadJobStore();
        //reloadClusterImage();
      }
      else
      {
        Ext.fly(cell).removeClass( fil_dis );
        Ext.fly(cell).addClass( fil_ena );

        if( fieldName == 'nodes' )
        { // Get the first node (master mom) as node filter
          new_data = data.split( ',' )[0];
          data = new_data;
        }

        // Set filter for selected column to selected cell value
        //
        myfilters[filterName] = data;

        reloadJobStore();
        //reloadClusterImage();
      }
      JobListingWindow.setTitle( filter_str );
      filter_title = true;
      filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
    }
  }

  function jobCellRender( value, metadata, record, rowindex, colindex, store )
  {
    var fieldName = JobsColumnModel.getColumnById( colindex ).dataIndex;
    var fil_dis = 'filter';
    var fil_ena = 'filterenabled';
    var filterName = fieldName;

    if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' || fieldName == 'nodes' )
    {
      if( fieldName == 'nodes' )
      {
        fil_dis = 'nodesfilter';
        fil_ena = 'nodesfilterenabled';
        filterName = 'host';
      }
      if( myfilters[filterName] != null )
      {
        metadata.css = fil_ena;
      }
      else
      {
        metadata.css = fil_dis;
      }
    }
    return value;
  }

  JobProxy = new Ext.data.HttpProxy({
                url: 'jobstore.php',
                method: 'POST'
            });


  JobsDataStore = new Ext.data.Store({
      id: 'JobsDataStore',
      proxy: JobProxy,
      baseParams: { task: "GETJOBS" },
      reader: new Ext.data.JsonReader({
        root: 'results',
        totalProperty: 'total',
        id: 'id'
      },[
        {name: 'jid', type: 'int', mapping: 'jid'},
        {name: 'status', type: 'string', mapping: 'status'},
        {name: 'owner', type: 'string', mapping: 'owner'},
        {name: 'queue', type: 'string', mapping: 'queue'},
        {name: 'name', type: 'string', mapping: 'name'},
        {name: 'requested_time', type: 'string', mapping: 'requested_time'},
        {name: 'requested_memory', type: 'string', mapping: 'requested_memory'},
        {name: 'ppn', type: 'int', mapping: 'ppn'},
        {name: 'nodect', type: 'int', mapping: 'nodect'},
        {name: 'nodes', type: 'string', mapping: 'nodes'},
        {name: 'queued_timestamp', type: 'string', mapping: 'queued_timestamp'},
        {name: 'start_timestamp', type: 'string', mapping: 'start_timestamp'},
        {name: 'runningtime', type: 'string', mapping: 'runningtime'}
      ]),
      sortInfo: { field: 'jid', direction: "DESC" },
      remoteSort: true,
      listeners:
        { 
                'beforeload':
                {
                        scope: this,
                        fn: function()
                        {
                                if( SearchField )
                                {
                                        search_value = SearchField.getEl().dom.value;
                                        if( search_value == '' )
                                        {
                                                delete SearchField.store.baseParams['query'];
                                                delete myfilters['query'];
                                                delete myparams['query'];
                                        }
                                        else
                                        {
                                                myfilters['query']      = search_value;
                                        }

                                        makeFilterMenu();
                                        reloadClusterImage();

                                        filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
                                        JobListingWindow.setTitle( filter_str );
                                }
                        }
                } //,
                //'load':
                //{
                //      scope: this,
                //      fn: function()
                //      {
                //              if( SearchField )
                //              {
                //                      search_value = SearchField.getEl().dom.value;

                //                      if( search_value != '' )
                //                      {
                //                              myfilters['query']      = search_value;
                //                      }

                //                      reloadClusterImage();

                //                      filter_str = myparams.c + ' Jobs Overview' + makeFilterString();
                //                      JobListingWindow.setTitle( filter_str );

                //                      if( search_value != '' )
                //                      {
                //                              delete myfilters['query'];
                //                      }
                //              }
                //      }
                //}
        }
    });
   
  var CheckJobs = new Ext.grid.CheckboxSelectionModel();

  JobsColumnModel = new Ext.grid.ColumnModel(
    [ CheckJobs,
    {
        header: '#',
        tooltip: 'Job id',
        readOnly: true,
        dataIndex: 'jid',
        width: 50,
        hidden: false,
        renderer: jobCellRender
      },{
        header: 'S',
        tooltip: 'Job status',
        readOnly: true,
        dataIndex: 'status',
        width: 20,
        hidden: false,
        renderer: jobCellRender
      },{
        header: 'User',
        tooltip: 'Owner of job',
        readOnly: true,
        dataIndex: 'owner',
        width: 60,
        hidden: false,
        renderer: jobCellRender
      },{
        header: 'Queue',
        tooltip: 'In which queue does this job reside',
        readOnly: true,
        dataIndex: 'queue',
        width: 60,
        hidden: false,
        renderer: jobCellRender
      },{
        header: 'Name',
        tooltip: 'Name of job',
        readOnly: true,
        dataIndex: 'name',
        width: 100,
        hidden: false
      },{
        header: 'Requested Time',
        tooltip: 'Amount of requested time (wallclock)',
        readOnly: true,
        dataIndex: 'requested_time',
        width: 100,
        hidden: false
      },{
        header: 'Requested Memory',
        tooltip: 'Amount of requested memory',
        readOnly: true,
        dataIndex: 'requested_memory',
        width: 100,
        hidden: true
      },{
        header: 'P',
        tooltip: 'Number of processors per node (PPN)',
        readOnly: true,
        dataIndex: 'ppn',
        width: 25,
        hidden: false
      },{
        header: 'N',
        tooltip: 'Number of nodes (hosts)',
        readOnly: true,
        dataIndex: 'nodect',
        width: 25,
        hidden: false
      },{
        header: 'Nodes',
        readOnly: true,
        dataIndex: 'nodes',
        width: 100,
        hidden: false,
        renderer: jobCellRender
      },{
        header: 'Queued',
        tooltip: 'At what time did this job enter the queue',
        readOnly: true,
        dataIndex: 'queued_timestamp',
        width: 120,
        hidden: false
      },{
        header: 'Started',
        tooltip: 'At what time did this job enter the running status',
        readOnly: true,
        dataIndex: 'start_timestamp',
        width: 120,
        hidden: false
      },{
        header: 'Runningtime',
        tooltip: 'How long has this job been in the running status',
        readOnly: true,
        dataIndex: 'runningtime',
        width: 140,
        hidden: false
      }]
    );
    JobsColumnModel.defaultSortable= true;

  var win;

  MetricsDataStore = new Ext.data.Store({
      id: 'MetricsDataStore',
      proxy: JobProxy,
      autoLoad: false,
      baseParams: { task: "GETMETRICS" },
      reader: new Ext.data.JsonReader({
        root: 'names',
        totalProperty: 'total',
        id: 'id'
      },[{
        name: 'ID'
      },{
        name: 'name'
        }])
  });

  SearchField   = new Ext.app.SearchField({
                                store: JobsDataStore,
                                params: {start: 0, limit: mylimit},
                                width: 200
                    });

  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 = new Ext.DataView({
        itemSelector: 'thumb',
        style:'overflow:auto',
        multiSelect: true,
        store: NodesDataStore,
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
            '<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>',
            '</tpl>'
        )
    });

    var images = new Ext.Panel({
        id:'images',
        //title:'My Images',
        region:'center',
        bodyStyle: 'background: transparent',
        //margins: '2 2 2 0',
        layout:'fit',
        items: GraphView
    });

        if(!win){
            win = new Ext.Window({
                        animateTarget: Button,
                        width       : 500,
                        height      : 300,
                        closeAction :'hide',
                        collapsible: true,
                        animCollapse: true,
                        maximizable: true,
                        title:  'Node graph details',
                        layout: 'fit',
                        tbar:   new Ext.form.ComboBox({
                                        fieldLabel: 'Metric',
                                        //hiddenName:'ID',
                                        store: MetricsDataStore,
                                        valueField:'name',
                                        displayField:'name',
                                        typeAhead: true,
                                        mode: 'remote',
                                        triggerAction: 'all',
                                        emptyText:'Select metric',
                                        selectOnFocus:true,
                                        xtype: 'combo',
                                        width:190,
                                        listeners: {
                                                select: function(combo, record, index){
                                                        var metric = record.data.name;
                                                        // doe iets
                                                }
                                        }
                                        
                                }),
                        items:  [ images ]
                    });
        }
        NodesDataStore.load();
        win.show(Button);
}


  JobListingEditorGrid =  new Ext.grid.EditorGridPanel({
      id: 'JobListingEditorGrid',
      store: JobsDataStore,
      cm: JobsColumnModel,
      enableColLock:false,
      clicksToEdit:1,
      loadMask: true,
      selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
      stripeRows: true,
      sm: CheckJobs,
      bbar: new Ext.PagingToolbar({
                pageSize: 15,
                store: JobsDataStore,
                displayInfo: true,
                displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total found.',
                emptyMsg: 'No jobs found to display',
                plugins: [new Ext.ux.PageSizePlugin()]
            }),
      tbar: [ SearchField,
                new Ext.Button({
                                text: 'Show graphs',
                                tooltip: 'Show node graphs for selected jobs',
                                iconCls: 'option',
                                listeners: {
                                        'click': {
                                                scope: this,
                                                fn: ShowGraphs
                                        }
                                }
                        }),
                filterButton ]
    });

  ClusterImageWindow = new Ext.Window({
      id: 'ClusterImageWindow',
      title: 'Nodes',
      closable: true,
      collapsible: true,
      animCollapse: true,
      width: 1,
      height: 1,
      y: 15,
      plain: true,
      shadow: true,
      resizable: false,
      shadowOffset: 10,
      layout: 'fit',
      bbar: new Ext.StatusBar({
                defaultText: 'Ready.',
                id: 'basic-statusbar',
                defaultIconCls: ''
        })
    });

  GraphSummaryWindow = new Ext.Window({
      id: 'GraphSummaryWindow',
      title: 'Graph Summary',
      closable: true,
      collapsible: true,
      animCollapse: true,
      width: 500,
      height: 400,
      x: 10,
      y: 10,
      plain: true,
      shadow: true,
      resizable: true,
      shadowOffset: 10,
      layout: 'table',
      layoutConfig: {
                columns: 2
        },
      defaults:{border: false},
      items: [{
        id: 'monarchlogo',
        cls: 'monarch',
        bodyStyle: 'background: transparent',
        html: '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
        //colspan: 2
       },{
        id: 'summarycount'
       },{
        id: 'rjqjgraph'
       },{
        id: 'pie',
        colspan: 2
       }],
      bbar: new Ext.StatusBar({
                defaultText: 'Ready.',
                id: 'basic-statusbar',
                defaultIconCls: ''
        })
    });

  JobListingWindow = new Ext.Window({
      id: 'JobListingWindow',
      title: 'Cluster Jobs Overview',
      closable:true,
      collapsible: true,
      animCollapse: true,
      maximizable: true,
      y: 375,
      width:860,
      height:445,
      plain:true,
      shadow: true,
      shadowOffset: 10,
      layout: 'fit',
      items: JobListingEditorGrid
    });

  JobListingEditorGrid.addListener( 'cellclick', jobCellClick );
}