tools: Corrections and visual improvements for nfd-status-http-server

Change-Id: I123020f023d9dc52268a35d4ad7aa4752e79309b
Refs: #1690
diff --git a/tools/nfd-status-http-server-files/nfd-status.xsl b/tools/nfd-status-http-server-files/nfd-status.xsl
index 2111ffe..fb25599 100644
--- a/tools/nfd-status-http-server-files/nfd-status.xsl
+++ b/tools/nfd-status-http-server-files/nfd-status.xsl
@@ -1,147 +1,225 @@
 <xsl:stylesheet version="1.0"
-xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:nfd="ndn:/localhost/nfd/status/1">
+<xsl:output method="html" encoding="utf-8" indent="yes" />
 
 <xsl:template match="/">
+  <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html></xsl:text>
   <html>
   <head>
   <title>NFD Status</title>
+  <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
-  <xsl:apply-templates/>
+  <header>
+    <h1>NFD Status</h1>
+  </header>
+  <article>
+    <div id="content">
+      <xsl:apply-templates/>
+    </div>
+  </article>
+  <footer>
+    <xsl:variable name="version">
+      <xsl:apply-templates select="nfd:nfdStatus/nfd:generalStatus/nfd:version"/>
+    </xsl:variable>
+    <span class="grey">Powered by </span><a target="_blank" href="http://named-data.net/doc/NFD/{$version}/"><span class="green">NFD version <xsl:value-of select="$version"/></span></a><span class="grey">.</span>
+  </footer>
   </body>
   </html>
 </xsl:template>
 
+<xsl:template match="nfd:version">
+  <xsl:variable name="major"><xsl:value-of select="floor(. div 1000000) mod 1000"/></xsl:variable>
+  <xsl:variable name="minor"><xsl:value-of select="floor(. div 1000) mod 1000"/></xsl:variable>
+  <xsl:variable name="patch"><xsl:value-of select=". mod 1000"/></xsl:variable>
+
+  <xsl:value-of select="$major"/>.<xsl:value-of select="$minor"/>.<xsl:value-of select="$patch"/>
+</xsl:template>
+
+<xsl:template name="formatDate">
+  <xsl:param name="date" />
+  <xsl:value-of select="substring($date, 0, 11)"/>&#160;<xsl:value-of select="substring($date, 12, 8)"/>
+</xsl:template>
+
+<xsl:template name="formatDuration">
+  <xsl:param name="duration" />
+  <xsl:variable name="seconds"><xsl:value-of select="substring($duration, 3, string-length($duration)-3)" /></xsl:variable>
+  <xsl:variable name="days"><xsl:value-of select="round($seconds div 86400)" /></xsl:variable>
+  <xsl:variable name="hours"><xsl:value-of select="round($seconds div 3600)" /></xsl:variable>
+  <xsl:variable name="minutes"><xsl:value-of select="round($seconds div 60)" /></xsl:variable>
+  <xsl:variable name="uptime">
+  <xsl:choose>
+    <xsl:when test="$days > 0">
+      <xsl:value-of select="$days"/> days
+    </xsl:when>
+    <xsl:when test="$hours > 0">
+      <xsl:value-of select="$hours"/> hours
+    </xsl:when>
+    <xsl:when test="$minutes > 0">
+      <xsl:value-of select="$minutes"/> minutes
+    </xsl:when>
+    <xsl:otherwise>
+      <xsl:value-of select="$seconds"/> seconds
+    </xsl:otherwise>
+  </xsl:choose>
+  </xsl:variable>
+  <xsl:value-of select="$uptime"/>
+</xsl:template>
+
 <xsl:template match="nfd:generalStatus">
   <h2>General NFD status</h2>
-  <table>
-    <tr>
-      <td>Version</td>
-      <td><xsl:value-of select="nfd:version"/></td>
-    </tr>
-    <tr>
-      <td>startTime</td>
-      <td><xsl:value-of select="nfd:startTime"/></td>
-    </tr>
-    <tr>
-      <td>currentTime</td>
-      <td><xsl:value-of select="nfd:currentTime"/></td>
-    </tr>
-    <tr>
-      <td>upTime</td>
-      <td><xsl:value-of select="nfd:uptime"/></td>
-    </tr>
-    <tr>
-      <td>nNameTreeEntries</td>
-      <td><xsl:value-of select="nfd:nNameTreeEntries"/></td>
-    </tr>
-    <tr>
-      <td>nFibEntries</td>
-      <td><xsl:value-of select="nfd:nFibEntries"/></td>
-    </tr>
-    <tr>
-      <td>nPitEntries</td>
-      <td><xsl:value-of select="nfd:nPitEntries"/></td>
-    </tr>
-    <tr>
-      <td>nMeasurementsEntries</td>
-      <td><xsl:value-of select="nfd:nMeasurementsEntries"/></td>
-    </tr>
-    <tr>
-      <td>nCsEntries</td>
-      <td><xsl:value-of select="nfd:nCsEntries"/></td>
-    </tr>
-    <tr>
-      <td>nInInterests</td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nInterests"/></td>
-    </tr>
-    <tr>
-      <td>nOutInterests</td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nInterests"/></td>
-    </tr>
-    <tr>
-      <td>nInDatas</td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nDatas"/></td>
-    </tr>
-    <tr>
-      <td>nOutDatas</td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nDatas"/></td>
-    </tr>
+  <table class="item-list">
+    <thead>
+      <tr>
+        <th>Version</th>
+        <th>Start time</th>
+        <th>Current time</th>
+        <th>Uptime</th>
+        <th>NameTree Entries</th>
+        <th>FIB entries</th>
+        <th>PIT entries</th>
+        <th>Measurements entries</th>
+        <th>CS entries</th>
+        <th>In Interests</th>
+        <th>Out Interests</th>
+        <th>In Data</th>
+        <th>Out Data</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="center">
+        <td><xsl:apply-templates select="nfd:version"/></td>
+        <td><xsl:call-template name="formatDate"><xsl:with-param name="date" select="nfd:startTime" /></xsl:call-template></td>
+        <td><xsl:call-template name="formatDate"><xsl:with-param name="date" select="nfd:currentTime" /></xsl:call-template></td>
+        <td><xsl:call-template name="formatDuration"><xsl:with-param name="duration" select="nfd:uptime" /></xsl:call-template></td>
+        <td><xsl:value-of select="nfd:nNameTreeEntries"/></td>
+        <td><xsl:value-of select="nfd:nFibEntries"/></td>
+        <td><xsl:value-of select="nfd:nPitEntries"/></td>
+        <td><xsl:value-of select="nfd:nMeasurementsEntries"/></td>
+        <td><xsl:value-of select="nfd:nCsEntries"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nInterests"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nInterests"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nDatas"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nDatas"/></td>
+      </tr>
+    </tbody>
   </table>
 </xsl:template>
 
 <xsl:template match="nfd:channels">
   <h2>Channels</h2>
-  <table>
-    <xsl:for-each select="nfd:channel">
-    <tr>
-      <td><xsl:value-of select="nfd:localUri"/></td>
-    </tr>
-    </xsl:for-each>
+  <table class="item-list">
+    <thead>
+      <tr>
+        <th>Channel URI</th>
+      </tr>
+    </thead>
+    <tbody>
+      <xsl:for-each select="nfd:channel">
+        <xsl:variable name="style">
+          <xsl:choose>
+            <xsl:when test="position() mod 2 = 1">
+              <xsl:text>odd</xsl:text>
+            </xsl:when>
+            <xsl:otherwise>even</xsl:otherwise>
+          </xsl:choose>
+        </xsl:variable>
+        <tr class="{$style}">
+          <td><xsl:value-of select="nfd:localUri"/></td>
+        </tr>
+      </xsl:for-each>
+    </tbody>
   </table>
 </xsl:template>
 
 <xsl:template match="nfd:faces">
   <h2>Faces</h2>
-  <table>
-    <tr style="background-color: #9acd32;">
-      <th>faceID</th>
-      <th>remoteUri</th>
-      <th>localUri</th>
-      <th>nInInterests</th>
-      <th>nInDatas</th>
-      <th>nOutInterests</th>
-      <th>nOutDatas</th>
-    </tr>
-    <xsl:for-each select="nfd:face">
-    <tr>
-      <td><xsl:value-of select="nfd:faceId"/></td>
-      <td><xsl:value-of select="nfd:remoteUri"/></td>
-      <td><xsl:value-of select="nfd:localUri"/></td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nInterests"/></td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nDatas"/></td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nInterests"/></td>
-      <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nDatas"/></td>
-    </tr>
-    </xsl:for-each>
+  <table class="item-list">
+    <thead>
+      <tr>
+        <th>Face ID</th>
+        <th>Remote URI</th>
+        <th>Local URI</th>
+        <th>In Interests</th>
+        <th>In Data</th>
+        <th>Out Interests</th>
+        <th>Out Data</th>
+      </tr>
+    </thead>
+    <tbody>
+      <xsl:for-each select="nfd:face">
+      <xsl:variable name="style">
+        <xsl:choose>
+          <xsl:when test="position() mod 2 = 1">
+            <xsl:text>odd</xsl:text>
+          </xsl:when>
+          <xsl:otherwise>even</xsl:otherwise>
+        </xsl:choose>
+      </xsl:variable>
+      <tr class="{$style}">
+        <td><xsl:value-of select="nfd:faceId"/></td>
+        <td><xsl:value-of select="nfd:remoteUri"/></td>
+        <td><xsl:value-of select="nfd:localUri"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nInterests"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:incomingPackets/nfd:nDatas"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nInterests"/></td>
+        <td><xsl:value-of select="nfd:packetCounters/nfd:outgoingPackets/nfd:nDatas"/></td>
+      </tr>
+      </xsl:for-each>
+    </tbody>
   </table>
 </xsl:template>
 
 <xsl:template match="nfd:fib">
   <h2>FIB</h2>
-  <table>
-    <tr style="background-color: #9acd32;">
-      <th>prefix</th>
-      <th>nextHops</th>
-    </tr>
-    <xsl:for-each select="nfd:fibEntry">
-    <tr>
-      <td style="text-align:left;vertical-align:top;padding:0"><xsl:value-of select="nfd:prefix"/></td>
-      <td>
-      <xsl:for-each select="nfd:nextHops/nfd:nextHop">
-        faceid=<xsl:value-of select="nfd:faceId"/> (cost=<xsl:value-of select="nfd:cost"/>);
+  <table class="item-list">
+    <thead>
+      <tr>
+        <th>Prefix</th>
+        <th>NextHops</th>
+      </tr>
+    </thead>
+    <tbody>
+      <xsl:for-each select="nfd:fibEntry">
+        <xsl:variable name="style">
+          <xsl:choose>
+            <xsl:when test="position() mod 2 = 1">
+              <xsl:text>odd</xsl:text>
+            </xsl:when>
+            <xsl:otherwise>even</xsl:otherwise>
+          </xsl:choose>
+        </xsl:variable>
+        <tr class="{$style}">
+        <td style="text-align:left;vertical-align:top;padding:0"><xsl:value-of select="nfd:prefix"/></td>
+        <td>
+        <xsl:for-each select="nfd:nextHops/nfd:nextHop">
+          faceid=<xsl:value-of select="nfd:faceId"/> (cost=<xsl:value-of select="nfd:cost"/>);
+        </xsl:for-each>
+        </td>
+      </tr>
       </xsl:for-each>
-      </td>
-    </tr>
-    </xsl:for-each>
+    </tbody>
   </table>
 </xsl:template>
 
 <xsl:template match="nfd:strategyChoices">
   <h2>Strategy Choices</h2>
-  <table>
-    <tr style="background-color: #9acd32;">
-      <th>Namespace</th>
-      <th>Strategy Name</th>
-    </tr>
-    <xsl:for-each select="nfd:strategyChoice">
-    <tr>
-      <td><xsl:value-of select="nfd:namespace"/></td>
-      <td><xsl:value-of select="nfd:strategy/nfd:name"/></td>
-    </tr>
-    </xsl:for-each>
+  <table class="item-list">
+    <thead>
+      <tr>
+        <th>Namespace</th>
+        <th>Strategy Name</th>
+      </tr>
+    </thead>
+    <tbody>
+      <xsl:for-each select="nfd:strategyChoice">
+      <tr>
+        <td><xsl:value-of select="nfd:namespace"/></td>
+        <td><xsl:value-of select="nfd:strategy/nfd:name"/></td>
+      </tr>
+      </xsl:for-each>
+    </tbody>
   </table>
 </xsl:template>
 
diff --git a/tools/nfd-status-http-server-files/reset.css b/tools/nfd-status-http-server-files/reset.css
new file mode 100644
index 0000000..0af7c26
--- /dev/null
+++ b/tools/nfd-status-http-server-files/reset.css
@@ -0,0 +1,207 @@
+/* `XHTML, HTML4, HTML5 Reset
+----------------------------------------------------------------------------------------------------*/
+
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+dialog,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+font,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+meter,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+progress,
+q,
+rp,
+rt,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video,
+xmp {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+/*
+  Override the default (display: inline) for
+  browsers that do not recognize HTML5 tags.
+
+  IE8 (and lower) requires a shiv:
+  http://ejohn.org/blog/html5-shiv
+*/
+  display: block;
+}
+
+b,
+strong {
+/*
+  Makes browsers agree.
+  IE + Opera = font-weight: bold.
+  Gecko + WebKit = font-weight: bolder.
+*/
+  font-weight: bold;
+}
+
+img {
+  color: transparent;
+  font-size: 0;
+  vertical-align: middle;
+/*
+  For IE.
+  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
+*/
+  -ms-interpolation-mode: bicubic;
+}
+
+li {
+/*
+  For IE6 + IE7:
+
+  "display: list-item" keeps bullets from
+  disappearing if hasLayout is triggered.
+*/
+  display: list-item;
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+th,
+td,
+caption {
+  font-weight: normal;
+  vertical-align: top;
+  text-align: left;
+}
+
+q {
+  quotes: none;
+}
+
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+sub,
+sup,
+small {
+  font-size: 75%;
+}
+
+sub,
+sup {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+svg {
+/*
+  For IE9. Without, occasionally draws shapes
+  outside the boundaries of <svg> rectangle.
+*/
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/tools/nfd-status-http-server-files/style.css b/tools/nfd-status-http-server-files/style.css
new file mode 100644
index 0000000..f2b99d5
--- /dev/null
+++ b/tools/nfd-status-http-server-files/style.css
@@ -0,0 +1,146 @@
+@import 'reset.css';
+@import 'text.css';
+
+@charset "utf-8";
+
+body {
+    background-color: #ffffff;
+    color: #000000;
+    font-family: sans-serif;
+}
+
+li {
+    margin: 0;
+}
+
+header, nav, article, footer, address {
+    display: block;
+}
+
+header {
+    margin: 20px;
+    width: 90%;
+}
+
+header h1 {
+    height: 50px;
+    padding-left: 55px;
+    padding-top: 6px;
+}
+
+article {
+    margin: 20px auto 20px;
+    width: 90%;
+    padding-bottom: 20px;
+}
+
+footer {
+    margin: 20px auto 0;
+    width: 90%;
+
+    padding-bottom: 2px;
+    text-align: right;
+
+    position: fixed;
+    font-height: 10px;
+    bottom: 0;
+    left: 5%;
+}
+
+h1 {
+    font-family: sans-serif;
+}
+
+h3 {
+    font-family: sans-serif;
+}
+
+h5 {
+    font-family: sans-serif;
+    color: #727272;
+}
+
+/* MISC */
+.grey {
+    color: #727272;
+    font-weight: 200;
+}
+
+.green {
+    color: #2D9A65;
+    font-weight: 200;
+}
+
+.red {
+    color: red;
+    font-weight: 200;
+    font-size: 2.4em;
+}
+
+.hidden {
+    display: none;
+}
+
+/* */
+.item-list
+{
+    border-radius: 6px;
+
+    margin-top: 10px;
+    margin-bottom: 10px;
+    font-family: sans-serif;
+    width: 100%;
+    text-align: left;
+}
+
+.item-list th
+{
+    font-weight: normal;
+    padding: 8px;
+    background: #EAF4EF;
+    border-top: 1px solid #99CCB2;
+    color: #727272;
+    text-align: left;
+}
+
+.item-list th.border-left {
+}
+
+.item-list td
+{
+    padding: 2px;
+    border-bottom: 1px solid #fff;
+    color: #000;
+    border-top: 1px solid transparent;
+}
+
+tr.center td
+{
+    text-align: center;
+}
+
+.border-left {
+    border-left: 1px solid #99CCB2;
+}
+
+.border-right {
+    border-right: 1px solid #99CCB2;
+}
+
+tfoot {
+    border-bottom: 2px solid #99CCB2;
+    background: #EAF4EF;
+}
+
+.item-list tfoot td {
+    padding: 0;
+}
+
+.odd {
+    background-color: #eeeeee;
+}
+
+.highlighted {
+    background-color: #cccccc;
+    cursor: pointer;
+}
diff --git a/tools/nfd-status-http-server-files/text.css b/tools/nfd-status-http-server-files/text.css
new file mode 100644
index 0000000..b115a70
--- /dev/null
+++ b/tools/nfd-status-http-server-files/text.css
@@ -0,0 +1,106 @@
+/*
+  960 Grid System ~ Text CSS.
+  Learn more ~ http://960.gs/
+
+  Licensed under GPL and MIT.
+*/
+
+/* `Basic HTML
+----------------------------------------------------------------------------------------------------*/
+
+body {
+    font: 13px Arial, Helvetica, sans-serif;
+}
+
+hr {
+  border: 0 #ccc solid;
+  border-top-width: 1px;
+  clear: both;
+  height: 0;
+}
+
+/* `Headings
+----------------------------------------------------------------------------------------------------*/
+
+h1 {
+	font-size: 2.4em;
+}
+
+h2 {
+	font-size: 1.8em;
+}
+
+h3 {
+	font-size: 1.4em;
+}
+
+/* h1 { */
+/*   font-size: 25px; */
+/* } */
+
+/* h2 { */
+/*   font-size: 23px; */
+/* } */
+
+/* h3 { */
+/*   font-size: 21px; */
+/* } */
+
+h4 {
+  font-size: 19px;
+}
+
+h5 {
+  font-size: 17px;
+}
+
+h6 {
+  font-size: 15px;
+}
+
+/* `Spacing
+----------------------------------------------------------------------------------------------------*/
+
+/* ol { */
+/*   list-style: decimal; */
+/* } */
+
+/* ul { */
+/*   list-style: disc; */
+/* } */
+
+/* li { */
+/*   margin-left: 30px; */
+/* } */
+
+p,
+dl,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ol,
+ul,
+pre,
+table,
+address,
+fieldset,
+figure {
+  margin-bottom: 10px;
+}
+
+pre {
+    /* padding: 0px 24px; */
+    white-space: pre-wrap;
+    background-color: #F9F9F9;
+    border: 1px dashed #2F6FAB;
+    color: black;
+    padding: 1em;
+    font-size: 13px;
+}
+code {
+    font-family: Consolas, Monaco, Andale Mono, monospace;
+}
\ No newline at end of file
diff --git a/tools/nfd-status-http-server.py b/tools/nfd-status-http-server.py
index 33adb48..133cc37 100755
--- a/tools/nfd-status-http-server.py
+++ b/tools/nfd-status-http-server.py
@@ -142,8 +142,8 @@
                         help="Specify the HTTP server IP address.")
     parser.add_argument("-r", default=False, dest="robots", action="store_true",
                         help="Enable HTTP robots to crawl; disabled by default.")
-    parser.add_argument("-f", default="/usr/local/share/ndn/", metavar="Server Directory", dest="serverDir",
-                        help="Specify the working directory of nfd-status-http-server, default is /usr/local/share/ndn.")
+    parser.add_argument("-f", default="@DATAROOTDIR@/ndn", metavar="Server Directory", dest="serverDir",
+                        help="Specify the working directory of nfd-status-http-server, default is @DATAROOTDIR@/ndn.")
     parser.add_argument("-v", default=False, dest="verbose", action="store_true",
                         help="Verbose mode.")
     parser.add_argument("--version", default=False, dest="version", action="store_true",