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     <div id="menu">
  21       <div class="pure-menu pure-menu-open">
  22         <ul>
  23           <li class=" ">
  24             <a href="/web/index.html">Topology
  25               <i class="fa fa-home"></i></a>
  26           </li>
  27           <li class="menu-item-divided pure-menu-selected">
  28             <a href="/web/stats.html">Statistics
  29               <i class="fa fa-bar-chart-o"></i></a>
  30           </li>
  31           <li class=" ">
  32             <a href="/web/tap.html">Manage Tap
  33               <i class="fa fa-edit"></i>
  34             </a></li>
  35           <li class=" ">
  36             <a href="/web/loadbalancer.html">Load balancer
  37               <i class="fa fa-sitemap"></i></a>
  38           </li>
  39         </ul>
  40       </div>
  41     </div>
  42
  43     <div id="main">
  44       <div class="tabGroup">
  45         <input type="radio" id="port-stats" name="tabGroup1" class="port-stats" checked="checked" />
  46         <label for="port-stats">Port</label>
  47
  48         <input type="radio" id="flow-stats" name="tabGroup1" class="flow-stats" />
  49         <label for="flow-stats">Flow</label>
  50
  51         <br />
  52
  53         <div class="port-stats">
  54
  55           <h2>Port Statistics</h2>
  56           <button style="float:right;" type="submit" class="pure-button
  57                    pure-button-primary" onclick="stopPortStatsTableRefresh()">Stop refresh</button>
  58
  59           <table class="pure-table pure-table-bordered">
  60             <thead>
  61               <tr>
  62                 <th rowspan="2">Switch</th>
  63                 <th rowspan="2">Port</th>
  64                 <th colspan="4">Receive counters</th>
  65                 <th colspan="4">Transmit counters</th>
  66               </tr>
  67               <tr>
  68                 <th>Rx packets</th>
  69                 <th>Rx bytes</th>
  70                 <th>Rx dropped</th>
  71                 <th>Rx errors</th>
  72                 <th>Tx packets</th>
  73                 <th>Tx bytes</th>
  74                 <th>Tx dropped</th>
  75                 <th>Tx errors</th>
  76               </tr>
  77             </thead>
  78             <tbody id="port-stats-data">
  79             </tbody>
  80           </table>
  81         </div>
  82
  83         <div class="flow-stats">
  84           <h2>Flow Statistics</h2>
  85           <button style="float:right;" type="submit" class="pure-button
  86                    pure-button-primary" onclick="stopFlowStatsTableRefresh()">Stop refresh</button>
  87
  88           <table class="pure-table pure-table-bordered">
  89             <thead>
  90               <tr>
  91                 <th rowspan="2">Switch</th>
  92                 <th rowspan="2">In port</th>
  93                 <th colspan="3">MAC Src</th>
  94                 <th colspan="3">IP Src</th>
  95                 <th colspan="2">Transport</th>
  96                 <th rowspan="2">Out port</th>
  97                 <th rowspan="2">Duration (secs)</th>
  98                 <th rowspan="2">Packets</th>
  99                 <th rowspan="2">Bytes</th>
 100               </tr>
 101               <tr>
 102                 <th>Src</th>
 103                 <th>Dst</th>
 104                 <th>Type</th>
 105                 <th>Src</th>
 106                 <th>Dst</th>
 107                 <th>Type</th>
 108                 <th>Src port</th>
 109                 <th>Dst port</th>
 110               </tr>
 111             </thead>
 112             <tbody id="flow-stats-data">
 113             </tbody>
 114           </table>
 115         </div>
 116       </div>
 117     </div><!-- main -->
 118   </div>
 119   <!--layout -->
 120
 121   <script src="/js/jquery.min.js"></script>
 122   <script src="/js/utils.js"></script>
 123   <script src="/js/port-stats.js"></script>
 124   <script src="/js/flow-stats.js"></script>
 125
 126 </body>
 127 <footer>
 128   <%include ../../partials/footer%>
 129 </footer>
 130
 131
 132 </html>