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

Last change on this file since 554 was 554, checked in by ramonb, 16 years ago

job_monarch/jobmonarch.gif:

  • now transparent background

job_monarch/overview.php:

  • only assign graph url to rjqj

job_monarch/js/jobgrid.js:

  • add graph summary window

job_monarch/css/styles.css:

  • cleanup

job_monarch/templates/overview.tpl:

  • set removed rjqj and pie chart

job_monarch/templates/header.tpl:

  • removed logo
File size: 10.8 KB
Line 
1var JobsDataStore;
2var JobsColumnModel;
3var JobListingEditorGrid;
4var JobListingWindow;
5var JobProxy;
6var myfilters = { };
7var myparams = { };
8var ClusterImageArgs = { };
9
10var filterfields = [ "jid", "queue", "name", "owner" ];
11
12function makeArrayURL( somearr )
13{
14  filter_url = '';
15  filter_sep = '';
16
17  for( filtername in somearr )
18  {
19    filter_url = filter_url + filter_sep + filtername + '=' + somearr[filtername];
20    filter_sep = '&';
21  }
22
23  return filter_url;
24}
25
26
27function isset( somevar )
28{
29  try
30  {
31    if( eval( somevar ) ) { }
32  }
33  catch( err )
34  {
35    return false;
36  }
37  return true;
38}
39
40function inMyArray( arr, someval )
41{
42  for( arval in arr )
43  {
44    if( arval == someval )
45    {
46      return true;
47    }
48  }
49  return false;
50}
51
52function inMyArrayValues( arr, someval )
53{
54  for( arkey in arr )
55  {
56    if( arr[arkey] == someval )
57    {
58      return true;
59    }
60  }
61  return false;
62}
63
64function inMyArrayKeys( arr, someval )
65{
66  for( arkey in arr )
67  {
68    if( arkey == someval )
69    {
70      return true;
71    }
72  }
73  return false;
74}
75
76function joinMyArray( arr1, arr2 )
77{
78  for( arkey in arr2 )
79  {
80    arr1[arkey] = arr2[arkey];
81  }
82
83  return arr1;
84}
85
86function ClusterImageSelectHost( somehost )
87{
88
89  if( !inMyArrayKeys( myfilters, 'host' ) )
90  {
91    myfilters['host'] = somehost;
92  }
93  else
94  {
95    delete myfilters['host'];
96    delete myparams['host'];
97  }
98
99  reloadClusterImage();
100  reloadJobStore();
101
102  return false;
103}
104
105function reloadJobStore()
106{
107  // Respect any other parameters that may have been set outside filters
108  //
109  myparams = joinMyArray( myparams, myfilters );
110
111  // Can't be sure if there are enough pages for new filter: reset to page 1
112  //
113  myparams = joinMyArray( myparams, { start: 0, limit: 30 } );
114
115  JobsDataStore.reload( { params: myparams } );
116}
117
118function addListener(element, type, expression, bubbling)
119{
120  bubbling = bubbling || false;
121  if(window.addEventListener)
122  { // Standard
123    element.addEventListener(type, expression, bubbling);
124    return true;
125  } 
126  else if(window.attachEvent) 
127  { // IE
128    element.attachEvent('on' + type, expression);
129    return true;
130  } 
131  else 
132    return false;
133}
134
135var ImageLoader = function( id, url )
136{
137  this.url = url;
138  this.image = document.getElementById( id );
139  this.loadEvent = null;
140};
141
142ImageLoader.prototype = 
143{
144  load:function()
145  {
146    var url = this.url;
147    var image = this.image;
148    var loadEvent = this.loadEvent;
149    addListener( this.image, 'load', function(e)
150    {
151      if( loadEvent != null )
152      {
153        loadEvent( url, image );
154      }
155    }, false);
156    this.image.src = this.url;
157  },
158  getImage: function()
159  {
160    return this.image;
161  }
162};
163
164function reloadClusterImage()
165{
166  ClusterImageArgs['view'] = 'big-clusterimage';
167
168  filt_url = makeArrayURL( myfilters );
169  imag_url = makeArrayURL( ClusterImageArgs );
170  img_url = './image.php?' + filt_url + '&' + imag_url;
171
172  var newClusterImage = new ImageLoader( 'clusterimage', img_url );
173  newClusterImage.loadEvent = function( url, image ) 
174    {
175      ClusterImageWindow.getBottomToolbar().clearStatus( { useDefaults:true } );
176    }
177
178  ClusterImageWindow.getBottomToolbar().showBusy();
179  newClusterImage.load();
180}
181
182function initJobGrid() {
183
184  Ext.QuickTips.init();
185
186  function jobCellClick(grid, rowIndex, columnIndex, e)
187  {
188    var record = grid.getStore().getAt(rowIndex);  // Get the Record
189    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
190    var data = record.get(fieldName);
191    var view = grid.getView();
192    var cell = view.getCell( rowIndex, columnIndex );
193
194    if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' )
195    {
196      if( inMyArrayKeys( myfilters, fieldName ) )
197      {
198        Ext.fly(cell).removeClass( 'filterenabled' );
199        Ext.fly(cell).addClass( 'filter' );
200
201        // Remove this filter
202        //
203        delete myfilters[fieldName];
204        delete myparams[fieldName];
205
206        reloadJobStore();
207        reloadClusterImage();
208      }
209      else
210      {
211        Ext.fly(cell).removeClass( 'filter' );
212        Ext.fly(cell).addClass( 'filterenabled' );
213
214        // Set filter for selected column to selected cell value
215        //
216        myfilters[fieldName] = data;
217
218        reloadJobStore();
219        reloadClusterImage();
220      }
221    }
222  }
223
224  function jobCellRender( value, metadata, record, rowindex, colindex, store )
225  {
226    var fieldName = JobsColumnModel.getColumnById( colindex ).dataIndex;
227
228    if( fieldName == 'owner' || fieldName == 'jid' || fieldName == 'status' || fieldName == 'queue' )
229    {
230      if( myfilters[fieldName] != null )
231      {
232        metadata.css = 'filterenabled';
233      }
234      else
235      {
236        metadata.css = 'filter';
237      }
238    }
239    return value;
240  }
241
242  JobProxy = new Ext.data.HttpProxy({
243                url: 'jobstore.php',
244                method: 'POST'
245            });
246
247  JobsDataStore = new Ext.data.Store({
248      id: 'JobsDataStore',
249      proxy: JobProxy,
250      baseParams: { task: "LISTING" },
251      reader: new Ext.data.JsonReader({
252        root: 'results',
253        totalProperty: 'total',
254        id: 'id'
255      },[
256        {name: 'jid', type: 'int', mapping: 'jid'},
257        {name: 'status', type: 'string', mapping: 'status'},
258        {name: 'owner', type: 'string', mapping: 'owner'},
259        {name: 'queue', type: 'string', mapping: 'queue'},
260        {name: 'name', type: 'string', mapping: 'name'},
261        {name: 'requested_time', type: 'string', mapping: 'requested_time'},
262        {name: 'requested_memory', type: 'string', mapping: 'requested_memory'},
263        {name: 'ppn', type: 'int', mapping: 'ppn'},
264        {name: 'nodect', type: 'int', mapping: 'nodect'},
265        {name: 'nodes', type: 'string', mapping: 'nodes'},
266        {name: 'queued_timestamp', type: 'string', mapping: 'queued_timestamp'},
267        {name: 'start_timestamp', type: 'string', mapping: 'start_timestamp'},
268        {name: 'runningtime', type: 'string', mapping: 'runningtime'}
269      ]),
270      sortInfo: { field: 'jid', direction: "DESC" },
271      remoteSort: true
272    });
273   
274  JobsColumnModel = new Ext.grid.ColumnModel(
275    [{
276        header: '#',
277        tooltip: 'Job id',
278        readOnly: true,
279        dataIndex: 'jid',
280        width: 50,
281        hidden: false,
282        renderer: jobCellRender
283      },{
284        header: 'S',
285        tooltip: 'Job status',
286        readOnly: true,
287        dataIndex: 'status',
288        width: 20,
289        hidden: false,
290        renderer: jobCellRender
291      },{
292        header: 'User',
293        tooltip: 'Owner of job',
294        readOnly: true,
295        dataIndex: 'owner',
296        width: 60,
297        hidden: false,
298        renderer: jobCellRender
299      },{
300        header: 'Queue',
301        tooltip: 'In which queue does this job reside',
302        readOnly: true,
303        dataIndex: 'queue',
304        width: 60,
305        hidden: false,
306        renderer: jobCellRender
307      },{
308        header: 'Name',
309        tooltip: 'Name of job',
310        readOnly: true,
311        dataIndex: 'name',
312        width: 100,
313        hidden: false
314      },{
315        header: 'Requested Time',
316        tooltip: 'Amount of requested time (wallclock)',
317        readOnly: true,
318        dataIndex: 'requested_time',
319        width: 100,
320        hidden: false
321      },{
322        header: 'Requested Memory',
323        tooltip: 'Amount of requested memory',
324        readOnly: true,
325        dataIndex: 'requested_memory',
326        width: 100,
327        hidden: true
328      },{
329        header: 'P',
330        tooltip: 'Number of processors per node (PPN)',
331        readOnly: true,
332        dataIndex: 'ppn',
333        width: 25,
334        hidden: false
335      },{
336        header: 'N',
337        tooltip: 'Number of nodes (hosts)',
338        readOnly: true,
339        dataIndex: 'nodect',
340        width: 25,
341        hidden: false
342      },{
343        header: 'Nodes',
344        readOnly: true,
345        dataIndex: 'nodes',
346        width: 100,
347        hidden: true
348      },{
349        header: 'Queued',
350        tooltip: 'At what time did this job enter the queue',
351        readOnly: true,
352        dataIndex: 'queued_timestamp',
353        width: 120,
354        hidden: false
355      },{
356        header: 'Started',
357        tooltip: 'At what time did this job enter the running status',
358        readOnly: true,
359        dataIndex: 'start_timestamp',
360        width: 120,
361        hidden: false
362      },{
363        header: 'Runningtime',
364        tooltip: 'How long has this job been in the running status',
365        readOnly: true,
366        dataIndex: 'runningtime',
367        width: 140,
368        hidden: false
369      }]
370    );
371    JobsColumnModel.defaultSortable= true;
372
373  JobListingEditorGrid =  new Ext.grid.EditorGridPanel({
374      id: 'JobListingEditorGrid',
375      store: JobsDataStore,
376      cm: JobsColumnModel,
377      enableColLock:false,
378      clicksToEdit:1,
379      loadMask: true,
380      selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
381      stripeRows: true,
382      bbar: new Ext.PagingToolbar({
383                pageSize: 30,
384                store: JobsDataStore,
385                displayInfo: true,
386                displayMsg: 'Displaying jobs {0} - {1} out of {2} jobs total found.',
387                emptyMsg: 'No jobs found to display'
388            }),
389      tbar: [ new Ext.app.SearchField({
390                                store: JobsDataStore,
391                                params: {start: 0, limit: 30},
392                                width: 200
393                    })
394      ]
395    });
396
397  ClusterImageWindow = new Ext.Window({
398      id: 'ClusterImageWindow',
399      title: 'Nodes',
400      closable: true,
401      collapsible: true,
402      animCollapse: true,
403      width: 100,
404      height: 100,
405      y: 15,
406      plain: true,
407      shadow: true,
408      resizable: false,
409      shadowOffset: 10,
410      layout: 'fit',
411      bbar: new Ext.StatusBar({
412                defaultText: 'Ready.',
413                id: 'basic-statusbar',
414                defaultIconCls: ''
415        })
416
417    });
418
419  GraphSummaryWindow = new Ext.Window({
420      id: 'GraphSummaryWindow',
421      title: 'Graph Summary',
422      closable: true,
423      collapsible: true,
424      animCollapse: true,
425      width: 300,
426      height: 500,
427      y: 15,
428      plain: true,
429      shadow: true,
430      resizable: true,
431      shadowOffset: 10,
432      layout: 'table',
433      layoutConfig: {
434                columns: 2
435        },
436      defaults:{border: false},
437      items: [{
438        id: 'monarchlogo',
439        cls: 'monarch',
440        bodyStyle: 'background: transparent',
441        html: '<A HREF="https://subtrac.sara.nl/oss/jobmonarch/" TARGET="_blank"><IMG SRC="./jobmonarch.gif" ALT="Job Monarch" BORDER="0"></A>'
442        //colspan: 2
443       },{
444        id: 'summarycount'
445       },{
446        id: 'rjqjgraph'
447       },{
448        id: 'pie',
449        colspan: 2
450       }],
451      bbar: new Ext.StatusBar({
452                defaultText: 'Ready.',
453                id: 'basic-statusbar',
454                defaultIconCls: ''
455        })
456    });
457
458  JobListingWindow = new Ext.Window({
459      id: 'JobListingWindow',
460      title: 'Cluster Jobs Overview',
461      closable:true,
462      collapsible: true,
463      animCollapse: true,
464      maximizable: true,
465      y: 375,
466      width:860,
467      height:500,
468      plain:true,
469      shadow: true,
470      shadowOffset: 10,
471      layout: 'fit',
472      items: JobListingEditorGrid
473    });
474
475  JobListingEditorGrid.addListener( 'cellclick', jobCellClick );
476}
Note: See TracBrowser for help on using the repository browser.