src/views/stats.ejs

   1 <!DOCTYPE html>
   2
   3 <html>
   4
   5 <head>
   6   <title></title>
   7   <link rel="stylesheet" type="text/css" href="/styles/main.css" />
   8   <%include ../../partials/head%>
   9   <!-- aqui van los estilos externos (a ser borrados) -->
  10   <link rel="stylesheet" href="/styles/pure-min-0.5.0.css">
  11   <link rel="stylesheet" href="/styles/font-awesome.min.css">
  12   <link rel="stylesheet" href="/styles/pure-custom.css">
  13 </head>
  14
  15 <body>
  16   <header>
  17     <%include ../../partials/header%>
  18   </header>
  19   <div id="layout">
  20
  21     <div id="main">
  22       <div class="tabGroup">
  23         <input type="radio" id="port-stats" name="tabGroup1" class="port-stats" checked="checked" />
  24         <label for="port-stats">Port</label>
  25
  26         <input type="radio" id="flow-stats" name="tabGroup1" class="flow-stats" />
  27         <label for="flow-stats">Flow</label>
  28
  29         <br />
  30
  31         <div class="port-stats">
  32
  33           <h2>Port Statistics</h2>
  34           <button style="float:right;" type="submit" class="pure-button
  35                    pure-button-primary" onclick="stopPortStatsTableRefresh()">Stop refresh</button>
  36
  37           <table class="pure-table pure-table-bordered">
  38             <thead>
  39               <tr>
  40                 <th rowspan="2">Switch</th>
  41                 <th rowspan="2">Port</th>
  42                 <th colspan="4">Receive counters</th>
  43                 <th colspan="4">Transmit counters</th>
  44               </tr>
  45               <tr>
  46                 <th>Rx packets</th>
  47                 <th>Rx bytes</th>
  48                 <th>Rx dropped</th>
  49                 <th>Rx errors</th>
  50                 <th>Tx packets</th>
  51                 <th>Tx bytes</th>
  52                 <th>Tx dropped</th>
  53                 <th>Tx errors</th>
  54               </tr>
  55             </thead>
  56             <tbody id="port-stats-data">
  57             </tbody>
  58           </table>
  59         </div>
  60
  61         <div class="flow-stats">
  62           <h2>Flow Statistics</h2>
  63           <button style="float:right;" type="submit" class="pure-button
  64                    pure-button-primary" onclick="stopFlowStatsTableRefresh()">Stop refresh</button>
  65
  66           <table class="pure-table pure-table-bordered">
  67             <thead>
  68               <tr>
  69                 <th rowspan="2">Switch</th>
  70                 <th rowspan="2">In port</th>
  71                 <th colspan="3">MAC Src</th>
  72                 <th colspan="3">IP Src</th>
  73                 <th colspan="2">Transport</th>
  74                 <th rowspan="2">Out port</th>
  75                 <th rowspan="2">Duration (secs)</th>
  76                 <th rowspan="2">Packets</th>
  77                 <th rowspan="2">Bytes</th>
  78               </tr>
  79               <tr>
  80                 <th>Src</th>
  81                 <th>Dst</th>
  82                 <th>Type</th>
  83                 <th>Src</th>
  84                 <th>Dst</th>
  85                 <th>Type</th>
  86                 <th>Src port</th>
  87                 <th>Dst port</th>
  88               </tr>
  89             </thead>
  90             <tbody id="flow-stats-data">
  91             </tbody>
  92           </table>
  93         </div>
  94       </div>
  95     </div><!-- main -->
  96   </div>
  97   <!--layout -->
  98
  99   <script src="/js/jquery.min.js"></script>
 100   <script src="/js/utils.js"></script>
 101   <script src="/js/port-stats.js"></script>
 102   <script src="/js/flow-stats.js"></script>
 103
 104 </body>
 105 <footer>
 106   <%include ../../partials/footer%>
 107 </footer>
 108
 109
 110 </html>