first change to stats and topology maker(actually, tap)
authorOscar J. Rodriguez B <josuer08@gmail.com>
Fri, 20 Sep 2019 23:39:46 +0000 (19:39 -0400)
committerOscar J. Rodriguez B <josuer08@gmail.com>
Fri, 20 Sep 2019 23:39:46 +0000 (19:39 -0400)
src/views/stats.ejs
src/views/topologyMaker.ejs

index a160864c558358dfc95821ef340673eb8e1edded..178663a79e3618219e336fcf5de7fb4b10d918db 100644 (file)
 <!DOCTYPE html>
+
 <html>
 
 <head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="/styles/main.css" />
   <%include ../../partials/head%>
+  <!-- aqui van los estilos externos (a ser borrados) -->
+  <link rel="stylesheet" href="/styles/pure-min-0.5.0.css">
+  <link rel="stylesheet" href="/styles/font-awesome.min.css">
+  <link rel="stylesheet" href="/styles/pure-custom.css">
 </head>
 
 <body>
   <header>
     <%include ../../partials/header%>
   </header>
+  <div id="layout">
+    <div id="menu">
+      <div class="pure-menu pure-menu-open">
+        <ul>
+          <li class=" ">
+            <a href="/web/index.html">Topology
+              <i class="fa fa-home"></i></a>
+          </li>
+          <li class="menu-item-divided pure-menu-selected">
+            <a href="/web/stats.html">Statistics
+              <i class="fa fa-bar-chart-o"></i></a>
+          </li>
+          <li class=" ">
+            <a href="/web/tap.html">Manage Tap
+              <i class="fa fa-edit"></i>
+            </a></li>
+          <li class=" ">
+            <a href="/web/loadbalancer.html">Load balancer
+              <i class="fa fa-sitemap"></i></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div id="main">
+      <div class="tabGroup">
+        <input type="radio" id="port-stats" name="tabGroup1" class="port-stats" checked="checked" />
+        <label for="port-stats">Port</label>
+
+        <input type="radio" id="flow-stats" name="tabGroup1" class="flow-stats" />
+        <label for="flow-stats">Flow</label>
+
+        <br />
+
+        <div class="port-stats">
+
+          <h2>Port Statistics</h2>
+          <button style="float:right;" type="submit" class="pure-button
+                   pure-button-primary" onclick="stopPortStatsTableRefresh()">Stop refresh</button>
+
+          <table class="pure-table pure-table-bordered">
+            <thead>
+              <tr>
+                <th rowspan="2">Switch</th>
+                <th rowspan="2">Port</th>
+                <th colspan="4">Receive counters</th>
+                <th colspan="4">Transmit counters</th>
+              </tr>
+              <tr>
+                <th>Rx packets</th>
+                <th>Rx bytes</th>
+                <th>Rx dropped</th>
+                <th>Rx errors</th>
+                <th>Tx packets</th>
+                <th>Tx bytes</th>
+                <th>Tx dropped</th>
+                <th>Tx errors</th>
+              </tr>
+            </thead>
+            <tbody id="port-stats-data">
+            </tbody>
+          </table>
+        </div>
+
+        <div class="flow-stats">
+          <h2>Flow Statistics</h2>
+          <button style="float:right;" type="submit" class="pure-button
+                   pure-button-primary" onclick="stopFlowStatsTableRefresh()">Stop refresh</button>
+
+          <table class="pure-table pure-table-bordered">
+            <thead>
+              <tr>
+                <th rowspan="2">Switch</th>
+                <th rowspan="2">In port</th>
+                <th colspan="3">MAC Src</th>
+                <th colspan="3">IP Src</th>
+                <th colspan="2">Transport</th>
+                <th rowspan="2">Out port</th>
+                <th rowspan="2">Duration (secs)</th>
+                <th rowspan="2">Packets</th>
+                <th rowspan="2">Bytes</th>
+              </tr>
+              <tr>
+                <th>Src</th>
+                <th>Dst</th>
+                <th>Type</th>
+                <th>Src</th>
+                <th>Dst</th>
+                <th>Type</th>
+                <th>Src port</th>
+                <th>Dst port</th>
+              </tr>
+            </thead>
+            <tbody id="flow-stats-data">
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div><!-- main -->
+  </div>
+  <!--layout -->
+
+  <script src="/js/jquery.min.js"></script>
+  <script src="/js/utils.js"></script>
+  <script src="/js/port-stats.js"></script>
+  <script src="/js/flow-stats.js"></script>
+
 </body>
 <footer>
   <%include ../../partials/footer%>
 </footer>
 
 
-</html>
+</html>
\ No newline at end of file
index a160864c558358dfc95821ef340673eb8e1edded..01774ad5dd503be19c9e636fc416c3ebf4e3c6ea 100644 (file)
 <!DOCTYPE html>
 <html>
+<!-- esto se reemplazo por la pagina tap -->
 
 <head>
   <title></title>
   <link rel="stylesheet" type="text/css" href="/styles/main.css" />
   <%include ../../partials/head%>
+  <!-- aqui van los estilos externos (a ser borrados) -->
+  <link rel="stylesheet" href="/styles/pure-min-0.5.0.css">
+  <link rel="stylesheet" href="/styles/font-awesome.min.css">
+  <link rel="stylesheet" href="/styles/pure-custom.css">
 </head>
 
 <body>
   <header>
     <%include ../../partials/header%>
   </header>
+  <div id="layout">
+    <div id="menu">
+      <div class="pure-menu pure-menu-open">
+        <ul>
+          <li class=" ">
+            <a href="/web/index.html">Topology
+              <i class="fa fa-home"></i></a>
+          </li>
+          <li class=" ">
+            <a href="/web/stats.html">Statistics
+              <i class="fa fa-bar-chart-o"></i></a>
+          </li>
+          <li class="menu-item-divided pure-menu-selected">
+            <a href="/web/tap.html">Manage Tap
+              <i class="fa fa-edit"></i></a>
+          </li>
+          <li class=" ">
+            <a href="/web/loadbalancer.html">Load balancer
+              <i class="fa fa-sitemap"></i></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div id="main">
+      <h2>Manage Tap</h2>
+      <p>Following form allows configuring a stateless tap, i.e., once
+        you create the tap, you cannot track or delete that specific
+        tap. However, you can use the Set and Clear to achieve that effect.
+        Performing a "Clear" operation without specifying any field
+        values will remove all previously created Taps.
+        For this edition of the tap, the source and sink need to be on
+        the same switch.</p>
+
+      <form class="pure-form pure-form-aligned">
+        <fieldset>
+          <div class="pure-control-group">
+            <label>Switch DPID</label>
+            <select id="switch" style="width:12em;" onchange="updatePorts()">
+            </select>
+          </div>
+
+          <div class="pure-control-group">
+            <label>Source port(s)</label>
+            <select id="src-ports" style="width:12em;" multiple>
+            </select>
+          </div>
+
+          <div class="pure-control-group">
+            <label>Sink port(s)</label>
+            <select id="sink-ports" style="width:12em;" multiple>
+            </select>
+          </div>
+
+          <div class="pure-control-group">
+            <label>MAC address</label>
+            <select id="mac-class">
+              <option>--Ignore--</option>
+              <option>Source</option>
+              <option>Destination</option>
+              <option>Src or Dest</option>
+            </select>
+            <input id="mac-addr" type="text" placeholder="01:12:23:34:45:56">
+          </div>
+
+          <div class="pure-control-group">
+            <label>IP address</label>
+            <select id="ip-class">
+              <option>--Ignore--</option>
+              <option>Source</option>
+              <option>Destination</option>
+              <option>Src or Dest</option>
+            </select>
+            <input id="ip-addr" type="text" placeholder="12.23.34.45/24">
+          </div>
+
+          <div class="pure-control-group">
+            <!--<div class="pure-u-1 pure-u-md-1-3">-->
+            <label>Common traffic types</label>
+            <select id="traffic-type">
+              <option>--Ignore--</option>
+              <option>HTTP</option>
+              <option>HTTPS</option>
+              <option>UDP</option>
+              <option>DHCP</option>
+              <option>ICMP</option>
+            </select>
+          </div>
+        </fieldset>
+      </form>
+      <div class="pure-controls">
+        <button href="#" class="pure-button pure-button-primary" onclick="setTap()">Set</button>
+        <button href="#" class="pure-button pure-button-primary" onclick="clearTap()">Clear</button>
+      </div>
+      <div id="post-status">
+      </div>
+    </div><!-- main -->
+  </div>
+  <!--layout -->
+  <div class="footer">
+    <p class="legal-copyright">
+      © 2014 SDN Hub. All rights reserved.
+    </p>
+  </div>
+
+  <script src="/js/jquery.min.js"></script>
+  <script src="/js/utils.js"></script>
+  <script src="/js/tap.js"></script>
 </body>
+
 <footer>
   <%include ../../partials/footer%>
 </footer>
 
 
-</html>
+</html>
\ No newline at end of file