planetlab/slices/leases.js

   1 /* need to put some place else in CSS ? */
   2
   3 var color_otherslice="#f08080";
   4 var color_thisslice="#a5e0af";
   5 var color_free="#fff";
   6 var color_rules="#888";
   7
   8 var x_txt = {"font": 'Fontin-Sans, Arial', stroke: "none", fill: "#008"},
   9 var y_txt = {"font": 'Fontin-Sans, Arial', stroke: "none", fill: "#800"},
  10 var x_nodename = 200;
  11 var x_grain = 20;
  12 var x_sep=10;
  13 var y_header = 12
  14 var y_node = 15;
  15 var y_sep = 10
  16 var radius= 6;
  17
  18 var leases_namespace = {
  19
  20     init_scheduler: function () {
  21         // Grab the data
  22         var data = [],
  23         axisx = [],
  24         axisy = [],
  25         table = $$("table#leases_data")[0];
  26         // the nodenames
  27         table.getElementsBySelector("tbody>tr>th").each(function (cell) {
  28             axisy.push(getInnerText(cell));
  29         });
  30         // the timeslot labels
  31         table.getElementsBySelector("thead>tr>th").each(function (cell) {
  32             axisx.push(getInnerText(cell));
  33         });
  34         // leases - expect colspan to describe length in grains
  35         table.getElementsBySelector("tbody>tr>td").each(function (cell) {
  36             data.push(new Array (getInnerText(cell),cell.colSpan));
  37         });
  38         // slicename : the upper-left cell
  39         var this_slicename = getInnerText(table.getElementsBySelector("thead>tr>td")[0]);
  40         table.hide();
  41         var nb_nodes = axisy.length, nb_grains = axisx.length;
  42         var total_width = x_nodename + nb_grains*x_grain;
  43         var total_height = 2*y_header + nb_nodes*(y_node+y_sep);
  44         paper = Raphael("leases_area", total_width, total_height,10);
  45 //        color = table.css("color");
  46
  47         var top=0;
  48         var left=x_nodename;
  49
  50         // the time slots legend
  51         var col=0;
  52         axisx.each (function (timeslot) {
  53             var y = top+y_header;
  54             if (col%2 == 0) y += y_header;
  55             col +=1;
  56             var label=paper.text(left,y,timeslot).attr(y_txt).attr({"font-size":y_header,
  57                                                                     "text-anchor":"middle"});
  58             var path_spec="M"+left+" "+(y+y_header/2)+"L"+left+" "+total_height;
  59             var rule=paper.path(path_spec).attr({'stroke':1,"fill":color_rules});
  60             left+=x_grain;
  61         });
  62
  63         top += 2*y_header+y_sep;
  64
  65         var data_index=0;
  66         axisy.each(function (node) {
  67             left=0;
  68             var label = paper.text(x_nodename-x_sep,top+y_node/2,node).attr(x_txt).attr ({"font-size":y_node,
  69                                                                                         "text-anchor":"end",
  70                                                                                         "baseline":"bottom"});
  71
  72             left += x_nodename;
  73             var grain=0;
  74             while (grain < nb_grains) {
  75                 slicename=data[data_index][0];
  76                 duration=data[data_index][1];
  77                 var lease=paper.rect (left,top,x_grain*duration,y_node,radius);
  78                 var color;
  79                 if (slicename == "") color=color_free;
  80                 else if (slicename == this_slicename) color=color_thisslice;
  81                 else {
  82                     color=color_otherslice;
  83                     /* attempt to display the name of the slice that owns that lease - not working too well */
  84                     var label = paper.text (left+(x_grain*duration)/2,top+y_node/2,slicename).attr("display","none");
  85                     label.hide();
  86                     lease[0].onmouseover = function () { label.show(); }
  87                     lease[0].onmouseout = function () { label.hide(); }
  88                 }
  89                 lease.attr("fill",color);
  90                 grain += duration;
  91                 left += x_grain*duration;
  92                 data_index +=1;
  93             }
  94             top += y_node + y_sep;
  95         });
  96     }
  97
  98 /*
  99         r.rect(10, 10, total_width-20, total_height-20, radius).attr({fill: "#888", stroke: "#fff"});
 100         for (var i = 0, ii = axisx.length; i < ii; i++) {
 101             r.text(leftgutter + X * (i + .5), 294, axisx[i]).attr(txt);
 102         }
 103         for (var i = 0, ii = axisy.length; i < ii; i++) {
 104             r.text(10, Y * (i + .5), axisy[i]).attr(txt);
 105         }
 106         var o = 0;
 107         for (var i = 0, ii = axisy.length; i < ii; i++) {
 108             for (var j = 0, jj = axisx.length; j < jj; j++) {
 109                 var R = data[o] && Math.min(Math.round(Math.sqrt(data[o] / Math.PI) * 4), max);
 110                 if (R) {
 111                     (function (dx, dy, R, value) {
 112                         var color = "hsb(" + [(1 - R / max) * .5, 1, .75] + ")";
 113                         var dt = r.circle(dx + 60 + R, dy + 10, R).attr({stroke: "none", fill: color});
 114                         if (R < 6) {
 115                             var bg = r.circle(dx + 60 + R, dy + 10, 6).attr({stroke: "none", fill: "#000", opacity: .4}).hide();
 116                         }
 117                         var lbl = r.text(dx + 60 + R, dy + 10, data[o])
 118                             .attr({"font": '10px Fontin-Sans, Arial', stroke: "none", fill: "#fff"}).hide();
 119                         var dot = r.circle(dx + 60 + R, dy + 10, max).attr({stroke: "none", fill: "#000", opacity: 0});
 120                         dot[0].onmouseover = function () {
 121                             if (bg) {
 122                                 bg.show();
 123                             } else {
 124                                 var clr = Raphael.rgb2hsb(color);
 125                                 clr.b = .5;
 126                                 dt.attr("fill", Raphael.hsb2rgb(clr).hex);
 127                             }
 128                             lbl.show();
 129                         };
 130                         dot[0].onmouseout = function () {
 131                             if (bg) {
 132                                 bg.hide();
 133                             } else {
 134                                 dt.attr("fill", color);
 135                             }
 136                             lbl.hide();
 137                         };
 138                     })(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o]);
 139                 }
 140                 o++;
 141             }
 142         }
 143     }
 144 */
 145 };
 146
 147 Event.observe(window, 'load', leases_namespace.init_scheduler);