-
Notifications
You must be signed in to change notification settings - Fork 176
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]> Signed-off-by: Brice Goglin <[email protected]>
- Loading branch information
Showing
12 changed files
with
1,095 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
Oops, something went wrong.