first change to stats and topology maker(actually, tap)
[VSoRC/.git] / src / views / topologyMaker.ejs
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