From ed143fc9216641d47a49b1398ae4f5cf227251bf Mon Sep 17 00:00:00 2001 From: Thierry Parmentelat Date: Thu, 22 Jul 2010 18:14:41 +0200 Subject: [PATCH] time exposed to javascript objects --- planetlab/css/my_slice.css | 5 ++- planetlab/slices/leases.js | 66 ++++++++++++++++++++----------- planetlab/slices/slice-leases.php | 19 ++++----- 3 files changed, 56 insertions(+), 34 deletions(-) diff --git a/planetlab/css/my_slice.css b/planetlab/css/my_slice.css index 87007ab..92d379e 100644 --- a/planetlab/css/my_slice.css +++ b/planetlab/css/my_slice.css @@ -19,9 +19,12 @@ div#toggle-container-my-slice-nodes-add { } /* the container for the scheduler area */ +div#toggle-container-my-slice-nodes-reserve { + background: #d0e0f0; +} + div#leases_area { padding: 25px; - background: #bbd3e2; } /* don't display the scheduler data table */ diff --git a/planetlab/slices/leases.js b/planetlab/slices/leases.js index 22a05ed..79aa405 100644 --- a/planetlab/slices/leases.js +++ b/planetlab/slices/leases.js @@ -1,19 +1,26 @@ /* 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 = { @@ -29,7 +36,8 @@ 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) { @@ -41,7 +49,8 @@ var leases_namespace = { 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; @@ -49,12 +58,13 @@ var leases_namespace = { // 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; @@ -65,9 +75,8 @@ var leases_namespace = { 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; @@ -76,18 +85,27 @@ var leases_namespace = { 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; } diff --git a/planetlab/slices/slice-leases.php b/planetlab/slices/slice-leases.php index 0db8f38..f339c95 100644 --- a/planetlab/slices/slice-leases.php +++ b/planetlab/slices/slice-leases.php @@ -409,7 +409,7 @@ $toggle->start(); /*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(); @@ -419,7 +419,9 @@ $headers['peer']='string'; $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()); @@ -440,6 +442,7 @@ if ($nodes) foreach ($nodes as $node) { $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'])); @@ -472,14 +475,11 @@ if ($privileges) { $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 "

No node to add

"; - } else { + if ( $potential_nodes ) { $headers=array(); $notes=array(); $headers['peer']='string'; @@ -524,7 +524,7 @@ $count=count($reservable_nodes); 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(); @@ -554,7 +554,8 @@ if ($count && $privileges) { # pass the slicename as the [0,0] coordinate as thead>tr>td echo "" . $slice['name'] . ""; for ($i=0; $i<$steps; $i++) - echo "" . strftime("%H:%M",$start+$i*$grain). ""; + // expose in each header cell the full timestamp, and how to display it - use & as a separator*/ + echo "" . ($start+$i*$grain) . "&" . strftime("%H:%M",$start+$i*$grain). ""; echo ""; // todo - sort on hostnames foreach ($reservable_nodes as $node) { -- 2.43.0