reviewed the info text attached to toggles
authorThierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Fri, 18 Mar 2011 17:42:21 +0000 (18:42 +0100)
committerThierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Fri, 18 Mar 2011 17:42:21 +0000 (18:42 +0100)
planetlab/css/my_slice.css
planetlab/icons/close.png [new file with mode: 0644]
planetlab/icons/info.png [new file with mode: 0644]
planetlab/nodes/nodes.php
planetlab/slices/slice.php
plekit/php/toggle.php
plekit/toggle/toggle.js

index 088fc47..d68fb8e 100644 (file)
@@ -56,12 +56,10 @@ div.in{background-color:#CAE8EA; color:#4f6b72}
 div.selected{background-color:gray; color:black}
 div.invisible{display:none}
 
-div.note-div {
-       padding: 4px;
+div.toggle-info {
+       padding: 10px 20px;
        background-color: #cae8ea;
-       width: 800px;
-       margin-left:auto;
-       margin-right:auto;
+       margin: 10px 10px;
 
 }
 
diff --git a/planetlab/icons/close.png b/planetlab/icons/close.png
new file mode 100644 (file)
index 0000000..90444f9
Binary files /dev/null and b/planetlab/icons/close.png differ
diff --git a/planetlab/icons/info.png b/planetlab/icons/info.png
new file mode 100644 (file)
index 0000000..05f6b86
Binary files /dev/null and b/planetlab/icons/info.png differ
index 872b5ee..9a8d839 100644 (file)
@@ -1,7 +1,5 @@
 <?php
 
-// $Id$
-
 // Require login
 require_once 'plc_login.php';
 
@@ -84,7 +82,6 @@ else
 $column_configuration = "";
 $slice_column_configuration = "";
 $show_configuration = "";
-$show_columns_message = '1';
 
 
 $PersonTags=$api->GetPersonTags (array('person_id'=>$plc->person['person_id']));
@@ -271,10 +268,11 @@ $nodes=$api->GetNodes($node_filter,$node_columns);
 
 $ConfigureColumns->fetch_live_data($nodes);
 
+$show_columns_message = TRUE;
 $show_conf = explode(";",$show_configuration);
 foreach ($show_conf as $ss) {
-        if ($ss =="columns")
-                $show_columns_message = '0';
+  if ($ss =="columns")
+    $show_columns_message = FALSE;
 }
 
 
@@ -358,9 +356,21 @@ $column_conf_visible = '1';
 else
 $column_conf_visible = '0';
 
-$toggle_nodes=new PlekitToggle('nodes-column-configuration',
+$layout_help='
+This tab allows you to customize the columns in the node tables,
+below. Information on the nodes comes from a variety of monitoring
+sources. If you, as either a user or a provider of monitoring data,
+would like to see additional columns made available, please send us
+your request in mail to <a
+href="mailto:support@myslice.info">support@myslice.info</a>.  You can
+find more information about the MySlice project at <a
+href="http://trac.myslice.info">http://trac.myslice.info</a>.
+';
+$toggle_nodes=new PlekitToggle('nodes-layout',
                                "Node table layout",
-                               array('visible'=>$column_conf_visible, 'info_div'=>'note_columns_div'));
+                               array('visible'=>$column_conf_visible, 
+                                    'info_text'=>$layout_help,
+                                    'info_visible'=>$show_columns_message));
 $toggle_nodes->start();
 print("<div id='debug'></div>");
 print("<input type='hidden' id='slice_id' value='nodes' />");
@@ -372,20 +382,7 @@ print("<input type='hidden' id='column_configuration' value='".$slice_column_con
 print("<br><input type='hidden' size=80 id='full_column_configuration' value='".$column_configuration."' />");
 print("<input type='hidden' id='defaultConf' value='".$default_configuration."'></input>");
 
-if ($show_columns_message == '0')
-$note_display = "display:none;";
-else
-$note_display = "";
-
-
-print <<<EOF
-<div class="note-div" id='note_columns_div' style='$note_display'>
-<table class='center'><tr><td class='top'>
-This tab allows you to customize the columns in the node tables, below. Information on the nodes comes from a variety of monitoring sources. If you, as either a user or a provider of monitoring data, would like to see additional columns made available, please send us your request in mail to <a href="mailto:support@myslice.info">support@myslice.info</a>. You can find more information about the MySlice project at <a href="http://trac.myslice.info">http://trac.myslice.info</a>.
-</td><td class='top'><span onClick=closeMessage('columns')><img class='reset' src="/planetlab/icons/clear.png" alt="hide message permanently"></span>
-</td></tr></table>
-</div>
-EOF;
+////////// end
 
 $ConfigureColumns->configuration_panel_html(true);
 $ConfigureColumns->javascript_init();
index a8e49c3..eaf926e 100644 (file)
@@ -480,8 +480,6 @@ $column_configuration = "";
 $slice_column_configuration = "";
 
 $show_configuration = "";
-$show_reservable_message = '1';
-$show_columns_message = '1';
 
 $PersonTags=$api->GetPersonTags (array('person_id'=>$plc->person['person_id']));
 //plc_debug('ptags',$PersonTags);
@@ -534,12 +532,14 @@ $all_nodes=$api->GetNodes(NULL,$node_columns);
 
 $ConfigureColumns->fetch_live_data($all_nodes);
 
+$show_reservable_info = TRUE;
+$show_layout_info = '1';
 $show_conf = explode(";",$show_configuration);
 foreach ($show_conf as $ss) {
   if ($ss =="reservable")
-    $show_reservable_message = '0';
+    $show_reservable_info = FALSE;
   else if ($ss =="columns")
-    $show_columns_message = '0';
+    $show_layout_info = '0';
 }        
 
 $slice_nodes=array();
@@ -566,39 +566,24 @@ $toggle->start();
 
 
 //////////////////// reservable nodes area
-
-$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',
-                                "Leases - " . count($reservable_nodes) . " reservable node(s)",
-                                array('visible'=>get_arg('show_nodes_resa',false), 'info_div'=>'note_reservable_div'));
-  $toggle_nodes->start();
-
-if ($show_reservable_message) 
-  $note_display = "";
-else
-  $note_display = "display:none;";
-
-////////// show a notice to people having attached a reservable node
-if (count($reservable_nodes) && $privileges) {
-  $mark=reservable_mark();
-  print <<<EOF
-<br>
-<div class='note-div' id='note_reservable_div' style="$note_display">
-<table class='center'><tr><td class='top'>
+$leases_info="
 You have attached one or more reservable nodes to your slice. 
 Reservable nodes show up with the '$mark' mark. 
 Your slivers will be available only during timeslots
 where you have obtained leases. 
 You can manage your leases in the tab below.
 <br>
-This feature is still experimental; feedback is appreciated at <a href="mailto:devel@planet-lab.org">devel@planet-lab.org</a>
-</td><td class='top'><span onClick=closeMessage('reservable')><img class='reset' src="/planetlab/icons/clear.png" alt="hide message permanently"></span>
-</td></tr></table>
-</div>
-EOF;
-}  
+This feature is still experimental; feedback is appreciated at <a href='mailto:devel@planet-lab.org'>devel@planet-lab.org</a>
+";
+$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',
+                                "Leases - " . count($reservable_nodes) . " reservable node(s)",
+                                array('visible'=>get_arg('show_nodes_resa',false), 
+                                      'info_text'=>$leases_info,
+                                      'info_visible'=>$show_reservable_info));
+  $toggle_nodes->start();
 
   // get settings from environment, otherwise set to defaults
   // when to start, in hours in the future from now
@@ -652,10 +637,21 @@ $column_conf_visible = '1';
 else
 $column_conf_visible = '0';
 
-
+$layout_info='
+This tab allows you to customize the columns in the node tables,
+below. Information on the nodes comes from a variety of monitoring
+sources. If you, as either a user or a provider of monitoring data,
+would like to see additional columns made available, please send us
+your request in mail to <a
+href="mailto:support@myslice.info">support@myslice.info</a>. You can
+find more information about the MySlice project at <a
+href="http://trac.myslice.info">http://trac.myslice.info</a>.
+';
 $toggle_nodes=new PlekitToggle('my-slice-nodes-configuration',
                                "Node table layout",
-                               array('visible'=>$column_conf_visible, 'info_div'=>'note_columns_div'));
+                               array('visible'=>$column_conf_visible, 
+                                    'info_text'=>$layout_info,
+                                    'info_visible'=>$show_layout_info));
 $toggle_nodes->start();
 
 //usort ($table_headers, create_function('$col1,$col2','return strcmp($col1["header"],$col2["header"]);'));
@@ -673,21 +669,6 @@ print("<br><input type='hidden' size=80 id='full_column_configuration' value='".
 print("<input type='hidden' id='previousConf' value='".$slice_column_configuration."' />");
 print("<input type='hidden' id='defaultConf' value='".$default_configuration."' />");
 
-//print ("showing column message = ".$show_columns_message);
-if ($show_columns_message == '0') 
-  $note_display = "display:none;";
-else
-  $note_display = "";
-
-  print <<<EOF
-<div class='note-div' id='note_columns_div' style='$note_display'>
-<table class='center'><tr><td class='top'>
-This tab allows you to customize the columns in the node tables, below. Information on the nodes comes from a variety of monitoring sources. If you, as either a user or a provider of monitoring data, would like to see additional columns made available, please send us your request in mail to <a href="mailto:support@myslice.info">support@myslice.info</a>. You can find more information about the MySlice project at <a href="http://trac.myslice.info">http://trac.myslice.info</a>.
-</td><td class='top'><span onClick=closeMessage('columns')><img class='reset' src="/planetlab/icons/clear.png" alt="hide message permanently"></span>
-</td></tr></table>
-</div>
-EOF;
-
 $ConfigureColumns->configuration_panel_html(true);
 
 $ConfigureColumns->javascript_init();
@@ -889,6 +870,33 @@ $tags=$api->GetSliceTags (array('slice_id'=>$slice_id));
 // * explain the interface : initscript start|stop|restart slicename
 // xxx fixme
 
+$initscript_info="
+There are two ways to attach an initscript to a slice:<ul>
+
+<li> <span class='bold'> Shared initscripts </span> are global to the
+MyPLC, and managed by the Operations Team. For that reason, regular
+users cannot change these scripts, but can reference one of the
+available names in the drop down below.  </li>
+
+<li> You also have the option to provide <span class='bold'> your own
+code </span>, with the following conventions: <ul>
+
+<li> Like regular initscripts, your script must except to receive as a
+first argument <span class='bold'> start </span>, <span class='bold'>
+stop </span> or <span class='bold'> restart </span>. It is important
+to honor this argument, as your slice may be stopped and restarted at
+any time; also this is used whenever the installed code gets changed.
+</li>
+
+<li> As a second argument, you will receive the slicename; in most
+cases this can be safely ignored.  </li>
+
+</ul>
+</li>
+ </ul>
+The slice-specific setting has precedence on a shared initscript.
+";
+
 $shared_initscripts=$api->GetInitScripts(array('-SORT'=>'name'),array('name'));
 //$shared_initscripts=$api->GetInitScripts();
 if ($profiling) plc_debug_prof('6 initscripts',count($initscripts));
@@ -914,7 +922,11 @@ if ($local_peer) {
 
   $toggle = new PlekitToggle('slice-initscripts',$label,
                             array('bubble'=>'Manage initscript on that slice',
-                                  'visible'=>get_arg('show_initscripts',false)));
+                                  'visible'=>get_arg('show_initscripts',false),
+                                  'info_text'=>$initscript_info
+                                  // not messing with persontags to guess whether this should be displayed or not
+                                  // hopefully some day toggle will know how to handle that using web storage
+                                  ));
   $toggle->start();
 
   $details=new PlekitDetails(TRUE);
@@ -956,7 +968,6 @@ if ($local_peer) {
   }
   $details->th_td('slice initscript',$initscript_body,'initscript-body',
                  array('input_type'=>'textarea', 'width'=>$script_width,'height'=>$script_height));
-  $details->th_td('Howto',"xxx yourscript start|stop|restart slicename");
   $details->tr_submit('unused','Update initscripts');
   $details->form_end();
   $details->end();  
index 98085a6..897a8b8 100644 (file)
@@ -21,6 +21,9 @@ drupal_set_html_head('
 //     - trigger-tagname : to be used instead of <span> for wrapping the trigger
 //     - bubble : might not work if trigger-tagname is redefined
 //     - init-hidden : start hidden rather than visible
+//     - info_div : the id of a 'div' element that contains a help text
+//     - info_text : the text for help on the tab
+//     - info_visible : whether info needs to be visible at startup
 // 
 // methods are as follows
 // (*) trigger_html ():        return the html code for the trigger
@@ -33,7 +36,6 @@ class PlekitToggle {
   // mandatory
   var $id;
   var $nifty;
-  var $info_div = "";
 
   function PlekitToggle ($id,$trigger,$options=NULL) {
     $this->id = $id;
@@ -44,10 +46,6 @@ class PlekitToggle {
       unset ($options['visible']);
     }
 
-    if (array_key_exists ('info_div',$options)) {
-       $this->info_div = $options['info_div'];
-    }
-
     if (!isset ($options['start-hidden'])) $options['start-hidden']=false;
     $this->options = $options;
   }
@@ -60,6 +58,7 @@ class PlekitToggle {
     $html .= $this->container_start();
     $html .= $this->trigger_html();
     $html .= $this->area_start_html();
+    $html .= $this->info_html();
     return $html;
   }
 
@@ -98,15 +97,43 @@ class PlekitToggle {
     $html .= " id='$trigger_id'";
     $html .= " class='plc-toggle-trigger'";
     if ($bubble) $html .= " title='$bubble'";
-    $html .= " onclick=\"plc_toggle('$this->id')\"";
+    $html .= " onclick=\"plekit_toggle('$this->id')\"";
     $html .= ">";
     $html .= $this->image_html();
     $html .= $this->trigger;
     $html .= "</$tagname>";
-    if ($this->info_div != "")
-      $html .= "&nbsp;(<a href=javascript:plc_show_toggle_info('$this->info_div','$this->id')>?</a>)";
+    if (array_key_exists ('info_text',$this->options)) {
+      $id=$this->id;
+      $html .= "<span class='toggle-info-button' onClick='plekit_toggle_info(\"$id\");'><img height=20 src='/planetlab/icons/info.png' alt='close info'/></span>";
+    }
+    return $html;
+  }
+
+  function info()              { print $this->info_html();}
+  function info_html () {
+    if (! array_key_exists ('info_text',$this->options)) return "";
+
+    // compute if info should be visible at startup
+    // xxx in fact the default should be fetched in the browser storage xxx
+    $info_visible=TRUE;
+    // if info_visible is set, use this value
+    if (array_key_exists ('info_visible',$this->options)) 
+      $info_visible=$this->options['info_visible'];
+
+    $id=$this->id;
+    $div_id=$this->id_name('info');
+    $html="";
+    $html .= "<div class='toggle-info'";
+    $html .= " id='$div_id'";
+    if ($info_visible) $html .= " style='display:none'";
+    // tmp
+    $html .= "<table class='center'><tr><td class='top'>";
+    $html .= $this->options['info_text'];
+    $html .= "</td><td class='top'><span onClick='plekit_toggle_info(\"$id\");'><img height=20 class='reset' src='/planetlab/icons/close.png' alt='toggle info' /></span>";
+    $html .= "</td></tr></table></div>";
     return $html;
   }
+    
 
   function area_start () { print $this->area_start_html(); }
   function area_start_html () {
index faae1b8..37dddda 100644 (file)
@@ -1,38 +1,38 @@
+function plekit_toggle(id){
 
-function plc_toggle(id){
-
-       var area=$('toggle-area-'+id);
-       area.toggle();
-       var visible=$('toggle-image-visible-'+id);
-       var hidden=$('toggle-image-hidden-'+id);
-       if(area.visible()){
-               visible.show();
-               hidden.hide();
-       }
-       else{
-               visible.hide();
-               hidden.show();
-       }
+    var area=$('toggle-area-'+id);
+    area.toggle();
+    var visible=$('toggle-image-visible-'+id);
+    var hidden=$('toggle-image-hidden-'+id);
+    if (area.visible()) {
+       visible.show();
+       hidden.hide();
+    } else {
+       visible.hide();
+       hidden.show();
+    }
 }
 
-function plc_show_toggle_info(div, id) {
-//debugfilter("showing "+div);
-
-       var area=$('toggle-area-'+id);
-       var visible=$('toggle-image-visible-'+id);
-       var hidden=$('toggle-image-hidden-'+id);
-
-       if (document.getElementById(div).style.display == "none") 
-               document.getElementById(div).style.display = "";
-       else
-               document.getElementById(div).style.display = "none";
+// make sure it's open
+function plekit_toggle_show(id) {
+    var area=$('toggle-area-'+id);
+    if (!area.visible()) plekit_toggle (id);
+}
 
-       if(! area.visible()){
-               area.toggle();
-               visible.show();
-               hidden.hide();
-               document.getElementById(div).style.display = "";
-       }
+// open or close the info box
+function plekit_toggle_info(id){
 
-       //plc_toggle(id);
+    // need to take care of the area as well
+    var area=$('toggle-area-'+id);
+    var info=$('toggle-info-'+id);
+    if (area.visible() && info.visible()) {
+       window.console.log('PTI hiding');
+       info.hide();
+    } else {
+       // make sure area is visible, take of the triggers
+       window.console.log('PTI showing');
+       plekit_toggle_show(id);
+       info.show();
+    }
 }
+