contrib: add hwloc-ps.www to display bound processes/threads in an in…

…teractive webpage This requires: * hwloc-ps --json-server on the target machine * nodejs running on local machine See contrib/hwloc-ps.www/README for details. This also serves as a real-world example of playing with the lstopo nativesvg backend. Refs #54 Signed-off-by: Valentin Hoyet <Valentin.Hoyet@inria.fr> Signed-off-by: Brice Goglin <Brice.Goglin@inria.fr>
open-mpi · Apr 5, 2019 · 62a5341 · 62a5341
1 parent 7f04805
commit 62a5341
Show file tree

Hide file tree

Showing 12 changed files with 1,095 additions and 3 deletions.
diff --git a/Makefile.am b/Makefile.am
@@ -22,7 +22,7 @@ if HWLOC_BUILD_STANDALONE
 if BUILD_NETLOC
 SUBDIRS += netloc
 endif
-SUBDIRS += utils tests contrib/systemd contrib/misc
+SUBDIRS += utils tests contrib/systemd contrib/misc contrib/hwloc-ps.www
 # We need doc/ if HWLOC_BUILD_DOXYGEN, or during make install if HWLOC_INSTALL_DOXYGEN.
 # There's no INSTALL_SUBDIRS, so always enter doc/ and check HWLOC_BUILD/INSTALL_DOXYGEN there
 SUBDIRS += doc

diff --git a/NEWS b/NEWS
@@ -64,6 +64,7 @@ Version 2.1.0
   + Add --nodeset options to hwloc-calc for converting between cpusets and
     nodesets.
   + hwloc-annotate may annotate multiple locations at once.
+  + Add a HTML/JS version of hwloc-ps. See contrib/hwloc-ps.www/README.
   + Add bash completions.
 
 

diff --git a/config/hwloc_internal.m4 b/config/hwloc_internal.m4
@@ -1,6 +1,6 @@
 dnl -*- Autoconf -*-
 dnl
-dnl Copyright © 2010-2018 Inria.  All rights reserved.
+dnl Copyright © 2010-2019 Inria.  All rights reserved.
 dnl Copyright © 2009, 2011 Université Bordeaux
 dnl Copyright © 2004-2005 The Trustees of Indiana University and Indiana
 dnl                         University Research and Technology
@@ -460,6 +460,7 @@ int foo(void) {
         hwloc_config_prefix[utils/hwloc/test-hwloc-dump-hwdata/test-hwloc-dump-hwdata.sh]
         hwloc_config_prefix[utils/lstopo/test-lstopo.sh]
         hwloc_config_prefix[utils/netloc/infiniband/netloc_ib_gather_raw]
+        hwloc_config_prefix[contrib/hwloc-ps.www/Makefile]
         hwloc_config_prefix[contrib/systemd/Makefile]
         hwloc_config_prefix[contrib/misc/Makefile]
         hwloc_config_prefix[contrib/windows/Makefile]

diff --git a/contrib/hwloc-ps.www/Makefile.am b/contrib/hwloc-ps.www/Makefile.am
@@ -0,0 +1,13 @@
+# Copyright © 2019 Inria.  All rights reserved.
+# See COPYING in top-level directory.
+
+jsdir = $(pkgdatadir)/hwloc-ps.www
+dist_js_DATA = client.js \
+	package.json \
+	README
+
+jsassetsdir = $(jsdir)/assets
+dist_jsassets_DATA = assets/index.html \
+	assets/main.css \
+	assets/script.js \
+	assets/style.css
diff --git a/contrib/hwloc-ps.www/README b/contrib/hwloc-ps.www/README
@@ -0,0 +1,61 @@
+This tool displays process and thread binding in an interative web page.
+
+
+1) Basic Usage
+
+Run the hwloc-ps tool in JSON server mode:
+
+    $ hwloc-ps --json-server
+    server running on port 8888...
+
+Export the topology as a SVG file using the native backend:
+
+    $ lstopo filename.svg --of nativesvg
+
+Now run the client side for displaying the binding:
+
+    $ cd /path/to/hwloc-ps.www/
+    $ node client.js /path/to/filename.svg
+
+This should open a webpage in your browser.
+Otherwise add -u to see the URL that you should open (usually http://localhost:3000).
+
+
+2) Installing node.js and JS dependencies
+
+The "node" command is available in the "nodejs" package in most Linux distributions,
+but you should rather install the "npm" package to get additional utilities:
+
+    # apt instal npm
+    # yum install npm
+
+Then install the dependencies needed by client.js:
+
+    $ cd /path/to/hwloc-ps.www/
+    $ npm install
+
+If you don't have write-access to the hwloc-ps.www/ directory,
+copy it somewhere else, run "npm install" from there,
+and then run the client from there:
+
+   $ cp -a /path/to/hwloc-ps.www/ $HOME/myhwloc-ps.www/
+   $ cd $HOME/myhwloc-ps.www/
+   $ npm install
+   $ node client.js /path/to/filename.svg
+
+
+3) Running on a remote server
+
+This tool is often useful for debugging process placement on remote servers, hence:
+
+* hwloc-ps and lstopo should run on that remote server
+  (this requires a recent hwloc on the remote side).
+
+* you must copy the SVG file back to your machine:
+
+    $ scp target:/path/to/filename.svg .
+
+* if the target machine port 8888 is not directly accessible, you may
+  have to forward its 8888 port:
+
+    $ ssh target -L 8888:localhost:8888 -Nf
diff --git a/contrib/hwloc-ps.www/assets/index.html b/contrib/hwloc-ps.www/assets/index.html
@@ -0,0 +1,65 @@
+<!-- Copyright © 2018-2019 Inria.  All rights reserved. -->
+<!doctype html>
+<html lang="en">
+<head>
+  <link rel="stylesheet" type="text/css" href="/stylecss">
+  <link rel="stylesheet" type="text/css" href="/maincss">
+  <meta charset="utf-8">
+  <title>Dynamic SVG</title>
+  <script type='text/javascript' src='/js'></script>
+</head>
+
+ <ul class='navul'>
+  <li class='navli'><a onclick='clearProc()'>Clear processes</a></li>
+  <li class='navli'><a class='procButton' type='all'>All processes</a></li>
+  <li class='navli'><a class='procButton' type='bound'>Bound processes</a></li>
+  <li class='navli'><label for="threads">Show threads<input id='threads' class='checkbox' type="checkbox" name="threads"></label></li>
+  <li class='navli'><label for="lastLocation">Show last location<input id='lastcpulocation' class='checkbox' type="checkbox" name="lastLocation"></label></li>
+  <li class='navli'><input class='hide-mobile' type='text' placeholder='PID or Name' value='' id='searchId'/> <input class='button hide-mobile' type='button' value='Search process' onclick="procByid()"/></li>
+</ul>
+
+<body style='text-align: center; background-color: #959ba5'>
+
+	<object style='margin-top: 50px' id="svg-object" type="image/svg+xml" data="/svg">
+	  Your browser does not support SVG.
+	</object>
+  <br>
+
+  <div style="display: inline-block;">
+    <div id='info' class='hidden'>
+      <ul>
+        <li></li>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ul>
+    </div>
+    <div id='info-not-found' class='hidden'>
+      <ul style="list-style: none;">
+        <li> Process : not found </li>
+      </ul>
+    </div>
+  </div>
+
+  <div id='processTable' class="table100 ver2 m-b-110 hidden">
+    <div class="table100-head">
+      <table>
+        <thead>
+          <tr class="row100 head">
+            <th class="cell100 column1">Process id</th>
+            <th class="cell100 column2">Name</th>
+            <th class="cell100 column3">Displayed <input id='mainCheck' checked='true' type="checkbox"></input> </th>
+          </tr>
+        </thead>
+      </table>
+    </div>
+
+    <div class="table100-body js-pscroll">
+      <table>
+        <tbody id='table'>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/contrib/hwloc-ps.www/assets/main.css b/contrib/hwloc-ps.www/assets/main.css
@@ -0,0 +1,115 @@
+/* Copyright © 2019 Inria.  All rights reserved. */
+
+/*//////////////////////////////////////////////////////////////////
+[ Scroll bar ]*/
+.js-pscroll {
+  position: relative;
+  overflow: hidden;
+}
+
+.table100 .ps__rail-y {
+  width: 9px;
+  background-color: transparent;
+  opacity: 1 !important;
+  right: 5px;
+}
+
+.table100 .ps__rail-y::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #ebebeb;
+  border-radius: 5px;
+  width: 50%;
+  height: calc(100% - 30px);
+  top: 15px;
+}
+
+.table100 .ps__rail-y .ps__thumb-y {
+  width: 50%;
+  background-color: transparent;
+  opacity: 1 !important;
+}
+
+.table100 .ps__rail-y .ps__thumb-y::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #cccccc;
+  border-radius: 5px;
+  width: 50%;
+  height: calc(100% - 30px);
+  left: 0;
+  top: 15px;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+.table100 {
+  margin-top: 30px;
+  width: 22.5%;
+  background-color: #5d5e60;
+  min-width: 250px;
+  left: 38.8%;
+}
+
+.column1{
+  left:0;
+}
+
+th {
+  width: 33%;
+  font-weight: unset;
+}
+
+td {
+  width: 33%;
+}
+
+tr, table, thead {
+  width: 100%;
+}
+
+
+.table100-head th {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+/*==================================================================
+Table*/
+.table100 {
+  position: relative;
+  padding-top: 60px;
+}
+
+.table100-head {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+
+.table100-body {
+  max-height: 585px;
+  overflow: auto;
+}
+
+.table100.ver2 th {
+  font-size: 13px;
+  color: white;
+  line-height: 1.4;
+  background-color: transparent;
+}
+
+.table100.ver2 td {
+  font-size: 11px;
+  color: white;
+  line-height: 1.4;
+  padding-left: 22px;
+  padding-right: 17px;
+}
+
+.table100.ver2 {
+  border-radius: 10px;
+}