/* need to put some place else in CSS ? */
-var color_otherslice="#f08080";
-var color_thisslice="#a5e0af";
-var color_free="#fff";
-var color_rules="#888";
+/* decorations / headers */
-var x_txt = {"font": 'Fontin-Sans, Arial', stroke: "none", fill: "#008"},
-var y_txt = {"font": 'Fontin-Sans, Arial', stroke: "none", fill: "#800"},
+var txt_nodename = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif', stroke: "none", fill: "#008"};
+var txt_timeslot = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif', stroke: "none", fill: "#008"};
+var color_rules="#888";
var x_nodename = 200;
-var x_grain = 20;
var x_sep=10;
var y_header = 12
+var y_sep = 20
+
+/* lease dimensions and colors */
+var x_grain = 24;
var y_node = 15;
-var y_sep = 10
var radius= 6;
+var color_otherslice="#f08080";
+var color_thisslice="#a5e0af";
+var color_free="#f0fcd4";
+
+/* other slices name */
+var txt_slice = {"font": '"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif', stroke: "none", fill: "#444",
+ "font-size": 15 };
var leases_namespace = {
});
// the timeslot labels
table.getElementsBySelector("thead>tr>th").each(function (cell) {
- axisx.push(getInnerText(cell));
+ /* [0]: timestamp -- [1]: displayable*/
+ axisx.push(getInnerText(cell).split("&"));
});
// leases - expect colspan to describe length in grains
table.getElementsBySelector("tbody>tr>td").each(function (cell) {
var nb_nodes = axisy.length, nb_grains = axisx.length;
var total_width = x_nodename + nb_grains*x_grain;
var total_height = 2*y_header + nb_nodes*(y_node+y_sep);
- paper = Raphael("leases_area", total_width, total_height,10);
+ // no radius supported
+ paper = Raphael("leases_area", total_width, total_height);
// color = table.css("color");
var top=0;
// the time slots legend
var col=0;
- axisx.each (function (timeslot) {
+ axisx.each (function (timeslot_spec) {
+ timeslot=timeslot_spec[1];
var y = top+y_header;
if (col%2 == 0) y += y_header;
col +=1;
- var label=paper.text(left,y,timeslot).attr(y_txt).attr({"font-size":y_header,
- "text-anchor":"middle"});
+ var timelabel=paper.text(left,y,timeslot).attr(txt_timeslot)
+ .attr({"font-size":y_header, "text-anchor":"middle"});
var path_spec="M"+left+" "+(y+y_header/2)+"L"+left+" "+total_height;
var rule=paper.path(path_spec).attr({'stroke':1,"fill":color_rules});
left+=x_grain;
var data_index=0;
axisy.each(function (node) {
left=0;
- var label = paper.text(x_nodename-x_sep,top+y_node/2,node).attr(x_txt).attr ({"font-size":y_node,
- "text-anchor":"end",
- "baseline":"bottom"});
+ var nodelabel = paper.text(x_nodename-x_sep,top+y_node/2,node).attr(txt_nodename)
+ .attr ({"font-size":y_node, "text-anchor":"end","baseline":"bottom"});
left += x_nodename;
var grain=0;
duration=data[data_index][1];
var lease=paper.rect (left,top,x_grain*duration,y_node,radius);
var color;
- if (slicename == "") color=color_free;
- else if (slicename == this_slicename) color=color_thisslice;
- else {
+ if (slicename == "") {
+ color=color_free;
+ lease.click ( function (e) { window.console.log ('free ' + lease.from_time + '--' + lease.until_time); } );
+ } else if (slicename == this_slicename) {
+ color=color_thisslice;
+ lease.click ( function (e) { window.console.log ('mine ' + lease.from_time + '--' + lease.until_time); } );
+ } else {
color=color_otherslice;
- /* attempt to display the name of the slice that owns that lease - not working too well */
- var label = paper.text (left+(x_grain*duration)/2,top+y_node/2,slicename).attr("display","none");
- label.hide();
- lease[0].onmouseover = function () { label.show(); }
- lease[0].onmouseout = function () { label.hide(); }
+ /* to display the name of the slice that owns that lease */
+ var slicelabel = paper.text (left+(x_grain*duration)/2,top+y_node/2,slicename)
+ .attr(txt_slice);
+ /* hide it right away */
+ slicelabel.hide();
+ lease.label=slicelabel;
+ lease.hover ( function (e) { this.label.toFront(); this.label.show(); },
+ function (e) { this.label.hide(); } );
}
lease.attr("fill",color);
+ lease.from_time = axisx[grain%nb_grains][0];
grain += duration;
+ lease.until_time = axisx[grain%nb_grains][0];
left += x_grain*duration;
data_index +=1;
}
/*if (0) { // tmp for speed */
//////////////////// nodes currently in
$toggle_nodes=new PlekitToggle('my-slice-nodes-current',
- "$count node(s) currently in $name",
+ count_english($nodes,"node") . " currently in $name",
array('visible'=>get_arg('show_nodes_current',!$privileges)));
$toggle_nodes->start();
$headers['hostname']='string';
$short="ST"; $long=Node::status_footnote(); $type='string';
$headers[$short]=array('type'=>$type,'title'=>$long); $notes []= "$short = $long";
-// the extra tags
+$short="R"; $long="reservable nodes"; $type='string';
+ $headers[$short]=array('type'=>$type,'title'=>$long); $notes []= "$short = $long";
+// the extra tags, configured for the UI
$headers=array_merge($headers,$visibletags->headers());
$notes=array_merge($notes,$visibletags->notes());
$run_level=$node['run_level'];
list($label,$class) = Node::status_label_class_($node);
$table->cell ($label,array('class'=>$class));
+ $table->cell( ($node['node_type']=='reservable')?"R":"" );
foreach ($visiblecolumns as $tagname) $table->cell($node[$tagname]);
if ($privileges) $table->cell ($form->checkbox_html('node_ids[]',$node['node_id']));
$count=count($potential_nodes);
$toggle_nodes=new PlekitToggle('my-slice-nodes-add',
- "$count more node(s) available",
+ count_english($potential_nodes,"more node") . " available",
array('visible'=>get_arg('show_nodes_add',false)));
$toggle_nodes->start();
- if ( ! $potential_nodes ) {
- // xxx improve style
- echo "<p class='not-relevant'>No node to add</p>";
- } else {
+ if ( $potential_nodes ) {
$headers=array();
$notes=array();
$headers['peer']='string';
if ($count && $privileges) {
// having reservable nodes in white lists looks a bit off scope for now...
$toggle_nodes=new PlekitToggle('my-slice-nodes-reserve',
- "$count reservable node(s)",
+ count_english($reservable_nodes,"reservable node") . " in slice",
array('visible'=>get_arg('show_nodes_resa',false)));
$toggle_nodes->start();
$grain=$api->GetLeaseGranularity();
# pass the slicename as the [0,0] coordinate as thead>tr>td
echo "<thead><tr><td>" . $slice['name'] . "</td>";
for ($i=0; $i<$steps; $i++)
- echo "<th>" . strftime("%H:%M",$start+$i*$grain). "</th>";
+ // expose in each header cell the full timestamp, and how to display it - use & as a separator*/
+ echo "<th>" . ($start+$i*$grain) . "&" . strftime("%H:%M",$start+$i*$grain). "</th>";
echo "</tr></thead><tbody>";
// todo - sort on hostnames
foreach ($reservable_nodes as $node) {