From d3cae1ccc13fcf31dbe778169f92b2445fb99156 Mon Sep 17 00:00:00 2001
From: Thierry Parmentelat <thierry.parmentelat@sophia.inria.fr>
Date: Mon, 12 Jan 2009 18:06:50 +0000
Subject: [PATCH] towards client-side filtering and sorting

---
 planetlab/css/demo.css                |  22 ----
 planetlab/css/plc_paginate.css        |  16 ++-
 planetlab/css/plc_table.css           |  30 +++++
 planetlab/icons/tablesort_bullet1.gif | Bin 0 -> 55 bytes
 planetlab/icons/tablesort_bullet2.gif | Bin 0 -> 262 bytes
 planetlab/icons/tablesort_col_alt.jpg | Bin 0 -> 659 bytes
 planetlab/icons/tablesort_td_alt.jpg  | Bin 0 -> 564 bytes
 planetlab/js/plc_filter.js            |  30 +++--
 planetlab/js/plc_paginate.js          |  43 +++++--
 planetlab/nodes/newindex.php          | 164 +++++++++++++++++---------
 10 files changed, 205 insertions(+), 100 deletions(-)
 create mode 100644 planetlab/icons/tablesort_bullet1.gif
 create mode 100644 planetlab/icons/tablesort_bullet2.gif
 create mode 100644 planetlab/icons/tablesort_col_alt.jpg
 create mode 100644 planetlab/icons/tablesort_td_alt.jpg

diff --git a/planetlab/css/demo.css b/planetlab/css/demo.css
index 8ef0d3d..c6907ea 100644
--- a/planetlab/css/demo.css
+++ b/planetlab/css/demo.css
@@ -153,28 +153,6 @@ td.lft
         {
         text-align:left;
         }
-/* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
-   as it trys to download the image each and every time that it is used (which means a 1000 row table
-   will produce 1000 http requests for the image in question) */
-tr[class="alt"] td
-        {
-        background: #F5FAFA url(../media/td_alt.jpg) no-repeat;
-        }
-td[class~="alt"]
-        {
-        background: #edf3f3 url(../media/col_alt.jpg) no-repeat !important;
-        }
-/* Poor old Internet Explorer won't see the next two rules either as it doesn't get :first-child */
-tbody tr.alt td:first-child
-        {
-        background: #F5FAFA url(../media/bullet2.gif) no-repeat;
-        font-weight:bold;
-        }
-tbody tr td:first-child
-        {
-        background: #fff url(../media/bullet1.gif) no-repeat;
-        font-weight:bold;
-        }
 /* Image free rules for Internet Explorer < 7 */
 * html tr.alt td
         {
diff --git a/planetlab/css/plc_paginate.css b/planetlab/css/plc_paginate.css
index 8d524f3..407de16 100644
--- a/planetlab/css/plc_paginate.css
+++ b/planetlab/css/plc_paginate.css
@@ -8,9 +8,9 @@ ul.fdtablePaginater
         padding:0;
         margin:0 auto;
         text-align:center;
-        height:2em;
+        height:1.5em;
         width:auto;
-        margin-bottom:2em;
+        margin-bottom:1em;
         }
 ul.fdtablePaginater li
         {
@@ -99,13 +99,15 @@ td.sized3
         width:7em;
         text-align:left;
         }
-tfoot td
+/*
+   tfoot td
         {
         text-align:right;
         font-weight:bold;
         text-transform:uppercase;
         letter-spacing:1px;
         }
+   */
 #visibleTotal
         {
         text-align:center;
@@ -125,6 +127,14 @@ p.paginationText
         {
         font-style:oblique;
         }
+p.plc_filter_note
+	{
+    font-style:oblique;
+    font-size:0.6em;
+    font-family: georgia;
+    text-align: center
+	}
+
 <!--[if IE]>
 <style type="text/css">
 ul.fdtablePaginater {display:inline-block;}
diff --git a/planetlab/css/plc_table.css b/planetlab/css/plc_table.css
index db13bb2..3372d8b 100644
--- a/planetlab/css/plc_table.css
+++ b/planetlab/css/plc_table.css
@@ -71,3 +71,33 @@ tr.alt
         color: #797268;
         }
 
+/* sort columns */
+/* Poor old Internet Explorer 6 has a bug that means we can't use background images for the table rows
+   as it trys to download the image each and every time that it is used (which means a 1000 row table
+   will produce 1000 http requests for the image in question) */
+tr[class="alt"] td
+        {
+        background: #F5FAFA url(/planetlab/icons/tablesort_td_alt.jpg) no-repeat;
+        }
+td.plc_table [class~="alt"]
+        {
+        background: #edf3f3 url(/planetlab/icons/tablesort_col_alt.jpg) no-repeat !important;
+        }
+/* Poor old Internet Explorer won't see the next two rules either as it doesn't get :first-child */
+tbody tr.alt td:first-child
+        {
+        background: #F5FAFA url(/planetlab/icons/tablesort_bullet2.gif) no-repeat;
+        font-weight:bold;
+        }
+tbody tr td:first-child
+        {
+        background: #fff url(/planetlab/icons/tablesort_bullet1.gif) no-repeat;
+        font-weight:bold;
+        }
+
+div.table_size_dialog {
+    align:left;
+}
+div.table_pattern_dialog {
+    align:right;
+}
diff --git a/planetlab/icons/tablesort_bullet1.gif b/planetlab/icons/tablesort_bullet1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..ae352c2b697b3309d21f667749a7fd4a2d695655
GIT binary patch
literal 55
zcmZ?wbhEHb<YeGtXkcJ?b#~?d|Nj+#vM_*v4u}BBFfj4;^v^s{dsZN3;wpx9_gERM
E0l6#?Hvj+t

literal 0
HcmV?d00001

diff --git a/planetlab/icons/tablesort_bullet2.gif b/planetlab/icons/tablesort_bullet2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..04b293d4b71e2e36530e2f41af9dcf082e8779fe
GIT binary patch
literal 262
zcmV+h0r~z%Nk%w1VJiVB0FeLysnhEJ|Nr&+`Tzg`A^8LV00000EC2ui04o6~0008l
zjE||y?GK}zwAzca-dy+(hT=$;=82~2%C_zc$MP%(0)XfA&iDQg3<`%LTMkD|DwoWr
zb7<5(r_`$T8jJ$4+^+ZAje^JIvUz7btJmzdz~+w2=TtcTj?eS#`o8~P!Us4=m?v0>
zn7DSR*ytGc7%6$hIB9taREfFC38UEw8fx+>T53van%aq~+G@$_8tVuvTU$tLo9l<G
z+k40B8|(%wTzp1soD7Dn+>FKS96bdsUA;tYoh^i|-QC0O9bO|&URQqJ1dhHQ$nKu?
M9{(**KT`kzJ6L&uY5)KL

literal 0
HcmV?d00001

diff --git a/planetlab/icons/tablesort_col_alt.jpg b/planetlab/icons/tablesort_col_alt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ba1f5b50ccc743acfc1f36286226b9f7ac865f45
GIT binary patch
literal 659
zcmex=<NpH&0WUXCHwH!~28I+MWcdGvLC~c%IlGd9k%5JQfx!kS^p1hgF(p4Kl_BK-
zP=xXSZH5*GHWn5ZRu(o^RyIyHAm-*^W8>iF;o{=v;^GnD0RsUZK7IjyJ|1CV5fNcw
z8EI*08F@HhWM^mR<>8eO5Ri}(6%>_%OAyQWe}F-dgF%B)o0(CNfk}{&S&;Gn5r!xR
zMn*=UBar|T2T%x2jFCxzk%5twff-4LaUxR?v+%|uV?oD2K{WNiK)A)g!^{Y@h*^-q
zp5bz}Sx)bCmstDxoBz)L8tERp^KPWT>+RO76-sZ<y*k0_?YUPcWXqnHrts}9-nEGx
zB+b0;&bu{@*YnE590r*}-u=;km!D8U3Nm!2==Rt3TYj=Mpo=5;OxynEf19r`0U?6H
T3cJ7d-{mJl7~%*4{{J@tWwfi0

literal 0
HcmV?d00001

diff --git a/planetlab/icons/tablesort_td_alt.jpg b/planetlab/icons/tablesort_td_alt.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b47a3246f0f9177f93060db730677ed8e7c8c134
GIT binary patch
literal 564
zcmex=<NpH&0WUXCHwH!~28I+MWcdGvLC~c%IlGd9k%5JQfx!kS^p1hgF(p4Kl_BK-
zP=xXSZH5*GHWn5ZRu(o^RyIyHAm-*^W8>iF;o{=v;^GnD0RsUZK7IjyJ|1CV5fNcw
z8EI*08F@HhWM^mR<>8eO5Ri}(6%>_%OAyQWe}F-dgF%B)o0(CNfk}{&S&;Gn5r!}Z
zMn*=UBar|j2T%xIj7flzff*!@kYHpI3M@2IG!#S#K~4F8i-Cuk5oigsAcH-_m9ni{
z?Kl4o3l4kJk#%>1Y2FE`?J2y`o7mRgWDa}NxVp^Y>TU%ZNwDr)e!&6BZ|KbETK@$N
d=z>W6ZNKI_B5~1~jJaR!n$QK2_{{%r0swPpY%l--

literal 0
HcmV?d00001

diff --git a/planetlab/js/plc_filter.js b/planetlab/js/plc_filter.js
index dedf01f..6688756 100644
--- a/planetlab/js/plc_filter.js
+++ b/planetlab/js/plc_filter.js
@@ -1,7 +1,7 @@
 /* $Id$ */
 
 /* set or clear the ' invisibleRow' in the tr's classname, according to visible */
-function plc_row_set_classname (row,visible) {
+function plc_table_row_visible (row,visible) {
   var cn=row.className;
   /* clear */
   cn=cn.replace(" invisibleRow","");
@@ -9,13 +9,19 @@ function plc_row_set_classname (row,visible) {
   row.className=cn;
 }
 
-/* scan the table, and mark as visible the rows that have at least one cell that contains the pattern */
-function plc_filter_table(table_id,pattern_id) {
-  var 
-    rows=document.getElementById(table_id).getElementsByTagName("tbody")[0].rows,
-    patterns=document.getElementById(pattern_id).value.split(" "),
-    row_index, row, cells,cell_index,cell,visible;
+// /* scan the table, and mark as visible the rows that have at least one cell that contains the pattern */
+function plc_table_filter (table_id,pattern_id) {
+  var rows = document.getElementById(table_id).getElementsByTagName("tbody")[0].rows;
+  var pattern_text = document.getElementById(pattern_id).value;
+  var row_index, row, cells, cell_index, cell, visible;
+  var pattern,i;
   
+  // remove whitespaces at the beginning and end
+  pattern_text = pattern_text.replace(/[ \t]+$/,"");
+  pattern_text = pattern_text.replace(/^[ \t]+/,"");
+  
+  var patterns = pattern_text.split(" ");
+
   for (row_index = 0; row=rows[row_index]; row_index++) {
     
     /* xxx deal with empty patterns and whitespaces */
@@ -25,13 +31,19 @@ function plc_filter_table(table_id,pattern_id) {
       visible=false;
       cells=row.cells;
       for (cell_index = 0; cell=cells[cell_index]; cell_index++) {
-	for (var i in patterns) {
+	for (i in patterns) {
 	  pattern=patterns[i];
 	  if (cell.innerHTML.match(pattern)) visible=true;
 	}
       }
     }
-    plc_row_set_classname(row,visible);
+    plc_table_row_visible(row,visible);
   }
   tablePaginater.init(table_id);
 }
+
+function plc_table_filter_reset (table_id, pattern_id) {
+  /* reset pattern */
+  document.getElementById(pattern_id).value="";
+  plc_table_filter (table_id, pattern_id);
+}
diff --git a/planetlab/js/plc_paginate.js b/planetlab/js/plc_paginate.js
index 32b44a1..cc74e59 100644
--- a/planetlab/js/plc_paginate.js
+++ b/planetlab/js/plc_paginate.js
@@ -1,18 +1,47 @@
 /* $Id$ */
 
-function displayTextInfo (opts,tablename) {
+/* when a table gets paginated, displays context info */
+function plc_table_update_paginaters (opts,tablename) {
 
   if(!("currentPage" in opts)) { return; }
     
-  var p = document.createElement('p'),
-    t = document.getElementById(tablename+'-fdtablePaginaterWrapTop'),
-    b = document.getElementById(tablename+'-fdtablePaginaterWrapBottom');
-  
+  var p = document.createElement('p');
+  var t = document.getElementById(tablename+'-fdtablePaginaterWrapTop');
+  var b = document.getElementById(tablename+'-fdtablePaginaterWrapBottom');
+
+  var first = ((opts.currentPage-1) * opts.rowsPerPage) +1;
+  var last = Math.min((opts.currentPage * opts.rowsPerPage),opts.totalRows);
+  var items_text = "Items [" + first + " - " + last + "] of " + opts.totalRows;
+  var page_text = "Page " + opts.currentPage + " of " + Math.ceil(opts.totalRows / opts.rowsPerPage);
+  var label = items_text + " --- " + page_text;
+
   p.className = "paginationText";    
-  p.appendChild(document.createTextNode("Showing page " + opts.currentPage + " of " + Math.ceil(opts.totalRows / opts.rowsPerPage)));
+  p.appendChild(document.createTextNode(label));
                 
-  t.insertBefore(p.cloneNode(true), t.firstChild);
+  /*  t.insertBefore(p.cloneNode(true), t.firstChild); */
   b.appendChild(p);
 }
 
 
+/* locates a table from its id and alters the classname to reflect new table size */
+function plc_table_setsize (table_id,size_id,def_size) {
+  var table=document.getElementById(table_id);
+  var size_area=document.getElementById(size_id);
+  var paginate=/paginate-\d+/;
+  if ( ! size_area.value ) {
+    size_area.value=def_size;
+  }
+  var size=size_area.value;
+  table.className=table.className.replace(paginate,"paginate-"+size); 
+  tablePaginater.init(table_id);
+}
+
+function plc_table_filter_resetsize(table_id, size_id, size) {
+  var table=document.getElementById(table_id);
+  var size_area=document.getElementById(size_id);
+  var paginate=/paginate-\d+/;
+  size_area.value=size;
+  table.className=table.className.replace(paginate,"paginate-"+size); 
+  tablePaginater.init(table_id);
+}
+  
diff --git a/planetlab/nodes/newindex.php b/planetlab/nodes/newindex.php
index b382bc5..1a7fc87 100644
--- a/planetlab/nodes/newindex.php
+++ b/planetlab/nodes/newindex.php
@@ -52,6 +52,7 @@ drupal_set_html_head($header_autocomplete_js);
 drupal_set_html_head($header_tablesort_js);
 drupal_set_html_head($header_tablesort_css);
 
+// -------------------- 
 $nodepattern=$_GET['nodepattern'];
 $peerscope=$_GET['peerscope'];
 $tablesize=$_GET['tablesize'];
@@ -59,56 +60,13 @@ if (empty($tablesize)) $tablesize=25;
 
 ?>
 
-<script type"text/javascript">
-function nodesTextInfo (opts) {
-  displayTextInfo (opts,"nodes");
-}
-</script>
-
-<div class="plc_filter">
-<form method=get action='newindex.php'>
-<table>
-
-<tr>
-<th><label for='peerscope'>Federation scope </label></th>
-<td colspan=2><select id='peerscope' name='peerscope' onChange='submit()'>
-<?php echo plc_peers_option_list($api); ?>
-</select></td>
-</tr>
-
-<tr>
-<th><label for='nodepattern'>Hostname (server-side pattern)</label></th>
-<td><input type='text' id='nodepattern' name='nodepattern' 
-     size=40 value='<?php print $nodepattern; ?>'/></td>
-<td><input type=submit value='Go' /></td>
-</tr> 
-
-<tr> 
-<th><label for='tablesize'>Table size</label></th>
-<td> <input type='text' id='tablesize' name='tablesize' 
-      size=3 value='<?php print $tablesize; ?>'/></td>
-<td><input type=submit value='Go' /> </td>
-</tr>
-</table>
-</form>
-</div>
-
-<script type="text/javascript">
-var options = {
-	script:"/planetlab/nodes/test.php?",
-	varname:"input",
-	minchars:1
-};
-var as = new AutoSuggest('nodepattern', options);
-</script>
-
-
+<!------------------------------------------------------------>
 <?php
 
 $peer_filter=array();
 
 // fetch nodes
-$node_columns=array('hostname','site_id','node_id','boot_state','interface_ids');
+$node_columns=array('hostname','site_id','node_id','boot_state','interface_ids','peer_id');
 if ($nodepattern) {
   $node_filter['hostname']=$nodepattern;
  } else {
@@ -121,7 +79,7 @@ $node_filter=array_merge($node_filter,$peer_filter);
 
 $nodes=$api->GetNodes($node_filter,$node_columns);
 
-// build site_ids and interface_ids 
+// build site_ids - interface_ids
 $site_ids=array();
 $interface_ids=array();
 foreach ($nodes as $node) {
@@ -149,26 +107,54 @@ foreach ($sites as $site) {
     $site_hash[$site['site_id']]=$site;
 }
 
+// fetch peers
+$peer_columns=array('peer_id','shortname');
+$peer_filter=array();
+$peers = $api->GetPeers($peer_filter,$peer_columns);
+
+$peer_hash=array();
+foreach ($peers as $peer) {
+    $peer_hash[$peer['peer_id']]=$peer;
+}
+
 ?>
 
-<div id='tmp'>
-  <form> 
-  <label> client-side pattern </label> 
-    <input type='text' id='filter_text' size=15 onchange='plc_filter_table("nodes","filter_text");'/>
-  <input type='button' name='tmpbutton' value='click' onclick='plc_filter_table("nodes","filter_text");' />
+<!------------------------------------------------------------>
+<div class='table_size_dialog'>
+<form>
+  <label> table size </label> 
+  <input type='text' id='tablesize_text' value="<?php echo $tablesize; ?>" size=3 maxlength=3 
+  onkeyup='plc_table_setsize("nodes","tablesize_text", "<?php echo $tablesize; ?>" );' 
+  /> 
+  <input type='button' value='reset' src="/planetlab/icons/clear.png" 
+    onclick='plc_table_filter_resetsize("nodes","tablesize_text","999");'>
+</form>
+</div>
+
+<div class='table_pattern_dialog'> 
+<form>
+  <label> pattern </label> 
+  <input type='text' id='filter_text' size=40 maxlength=256
+  onkeyup='plc_table_filter("nodes","filter_text");'
+ />
+  <input type='button' value='reset' src="/planetlab/icons/clear.png" 
+    onclick='plc_table_filter_reset("nodes","filter_text");'>
 </form>
 </div>
 
+<!------------------------------------------------------------>
 <div class="fdtablePaginaterWrap" id="nodes-fdtablePaginaterWrapTop"><p></p></div>
 
+<!------------------------------------------------------------>
 <table id="nodes" cellpadding="0" cellspacing="0" border="0" 
-class="plc_table sortable-onload-3r rowstyle-alt colstyle-alt no-arrow paginationcallback-nodesTextInfo max-pages-15 paginate-<?php print $tablesize; ?>">
+class="plc_table sortable-onload-1 rowstyle-alt colstyle-alt no-arrow paginationcallback-nodesTextInfo max-pages-15 paginate-<?php print $tablesize; ?>">
 <thead>
 <tr>
+<th class="sortable plc_table">Peer</th>
+<th class="sortable plc_table">Region</th>
+<th class="sortable plc_table">Site</th>
 <th class="sortable plc_table">State</th>
 <th class="sortable plc_table">Hostname</th>
-<th class="sortable plc_table">Site</th>
-<th class="sortable plc_table">Region</th>
 <th class="sortable-sortIPAddress plc_table">IP</th>
 <th class="sortable plc_table">Load</th>
 <th class="sortable plc_table">Avg Load</th>
@@ -178,7 +164,7 @@ class="plc_table sortable-onload-3r rowstyle-alt colstyle-alt no-arrow paginatio
 
 <?php
 
-  $fake1=1; $fake2=3.14;
+  $fake1=1; $fake2=3.14; $fake_i=0;
 foreach ($nodes as $node) {
     $hostname=$node['hostname'];
     $node_id=$node['node_id'];
@@ -188,17 +174,25 @@ foreach ($nodes as $node) {
     $node_id=$node['node_id'];
     $ip=$interface_hash[$node['node_id']]['ip'];
     $interface_id=$interface_hash[$node['node_id']]['interface_id'];
+    if ( ! $node['peer_id'] ) {
+      $shortname="local";
+    } else {
+      $shortname=$peer_hash[$node['peer_id']]['shortname'];
+    }
     printf ('<tr id="%s">',$hostname);
+    printf ('<td class="plc_table"> %s </td>',$shortname);
+    printf ('<td class="plc_table"> %s </td>',topdomain($hostname));
+    printf ('<td class="plc_table"> <a href="/db/sites/index.php?id=%s">%s</a></td>',$site_id,$login_base);
     printf ('<td class="plc_table"> %s </td>',$node['boot_state']);
     printf ('<td class="plc_table"> <a href="/db/nodes/index.php?id=%s">%s</a></td>',$node_id,$hostname);
-    printf ('<td class="plc_table"> <a href="/db/sites/index.php?id=%s">%s</a></td>',$site_id,$login_base);
-    printf ('<td class="plc_table"> %s </td>',topdomain($hostname));
     printf ('<td class="plc_table"> <a href="/db/nodes/interfaces.php?id=%s">%s</a></td>', $interface_id,$ip);
     printf ('<td class="plc_table"> %s </td>', $fake1);
     printf ('<td class="plc_table"> %s </td>', $fake2);
     printf ( '</tr>');
-    $fake1 += 3;
-    $fake2 += 2;
+				 
+    if ($fake_i % 5 == 0) $fake1 += 3; 
+    if ($fake_i % 3 == 0) $fake2 +=5; else $fake2 -= $fake_i;
+    $fake_i += 1;
 }
 
 ?>
@@ -208,4 +202,56 @@ foreach ($nodes as $node) {
 </table>
 
 <div class="fdtablePaginaterWrap" id="nodes-fdtablePaginaterWrapBottom"><p></p></div>
+<p class='plc_filter_note'> Notes: Several words in pattern are combined with <em> OR </em>
+
+<br/> Hold down the shift key to select multiple columns to sort 
+</p>
+
+<!------------------------------------------------------------>
+<hr>
+<hr>
+<p> This section is for trying out server-side filtering </p>
+<hr>
+<hr>
+
+<script type"text/javascript">
+ /* instantiate generic mechanisms for nodes */
+function nodesTextInfo (opts) {
+  plc_table_update_paginaters (opts,"nodes");
+}
+var options = {
+	script:"/planetlab/nodes/test.php?",
+	varname:"input",
+	minchars:1
+};
+var as = new AutoSuggest('nodepattern', options);
+</script>
+
+<!------------------------------------------------------------>
+<div class="plc_filter">
+<form method='get' id='filter_nodes'>
+<table>
+
+<tr>
+<th><label for='peerscope'>Federation scope </label></th>
+<td colspan=2><select id='peerscope' name='peerscope' onChange='submit()'>
+<?php echo plc_peers_option_list($api); ?>
+</select></td>
+</tr>
+
+<tr>
+<th><label for='nodepattern'>Hostname (server-side pattern)</label></th>
+<td><input type='text' id='nodepattern' name='nodepattern' 
+     size=40 value='<?php print $nodepattern; ?>'/></td>
+<td><input id='go' rowspan=2 type=submit value='Go' /></td>
+</tr> 
+
+<tr> 
+<th><label for='tablesize'>Table size</label></th>
+<td> <input type='text' id='tablesize' name='tablesize' 
+      size=3 value='<?php print $tablesize; ?>'/></td>
+</tr>
+</table>
+</form>
+</div>
 
-- 
2.43.0