time exposed to javascript objects

diff --git a/planetlab/css/my_slice.css b/planetlab/css/my_slice.css
index 87007ab..92d379e 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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 "<p class='not-relevant'>No node to add</p>";
-  } 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 "<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) {