src/views/topologyMaker.ejs

   1 <!DOCTYPE html>
   2 <html>
   3 <!-- esto se reemplazo por la pagina tap -->
   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=" ">
  28             <a href="/web/stats.html">Statistics
  29               <i class="fa fa-bar-chart-o"></i></a>
  30           </li>
  31           <li class="menu-item-divided pure-menu-selected">
  32             <a href="/web/tap.html">Manage Tap
  33               <i class="fa fa-edit"></i></a>
  34           </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       <h2>Manage Tap</h2>
  45       <p>Following form allows configuring a stateless tap, i.e., once
  46         you create the tap, you cannot track or delete that specific
  47         tap. However, you can use the Set and Clear to achieve that effect.
  48         Performing a "Clear" operation without specifying any field
  49         values will remove all previously created Taps.
  50         For this edition of the tap, the source and sink need to be on
  51         the same switch.</p>
  52
  53       <form class="pure-form pure-form-aligned">
  54         <fieldset>
  55           <div class="pure-control-group">
  56             <label>Switch DPID</label>
  57             <select id="switch" style="width:12em;" onchange="updatePorts()">
  58             </select>
  59           </div>
  60
  61           <div class="pure-control-group">
  62             <label>Source port(s)</label>
  63             <select id="src-ports" style="width:12em;" multiple>
  64             </select>
  65           </div>
  66
  67           <div class="pure-control-group">
  68             <label>Sink port(s)</label>
  69             <select id="sink-ports" style="width:12em;" multiple>
  70             </select>
  71           </div>
  72
  73           <div class="pure-control-group">
  74             <label>MAC address</label>
  75             <select id="mac-class">
  76               <option>--Ignore--</option>
  77               <option>Source</option>
  78               <option>Destination</option>
  79               <option>Src or Dest</option>
  80             </select>
  81             <input id="mac-addr" type="text" placeholder="01:12:23:34:45:56">
  82           </div>
  83
  84           <div class="pure-control-group">
  85             <label>IP address</label>
  86             <select id="ip-class">
  87               <option>--Ignore--</option>
  88               <option>Source</option>
  89               <option>Destination</option>
  90               <option>Src or Dest</option>
  91             </select>
  92             <input id="ip-addr" type="text" placeholder="12.23.34.45/24">
  93           </div>
  94
  95           <div class="pure-control-group">
  96             <!--<div class="pure-u-1 pure-u-md-1-3">-->
  97             <label>Common traffic types</label>
  98             <select id="traffic-type">
  99               <option>--Ignore--</option>
 100               <option>HTTP</option>
 101               <option>HTTPS</option>
 102               <option>UDP</option>
 103               <option>DHCP</option>
 104               <option>ICMP</option>
 105             </select>
 106           </div>
 107         </fieldset>
 108       </form>
 109       <div class="pure-controls">
 110         <button href="#" class="pure-button pure-button-primary" onclick="setTap()">Set</button>
 111         <button href="#" class="pure-button pure-button-primary" onclick="clearTap()">Clear</button>
 112       </div>
 113       <div id="post-status">
 114       </div>
 115     </div><!-- main -->
 116   </div>
 117   <!--layout -->
 118   <div class="footer">
 119     <p class="legal-copyright">
 120       © 2014 SDN Hub. All rights reserved.
 121     </p>
 122   </div>
 123
 124   <script src="/js/jquery.min.js"></script>
 125   <script src="/js/utils.js"></script>
 126   <script src="/js/tap.js"></script>
 127 </body>
 128
 129 <footer>
 130   <%include ../../partials/footer%>
 131 </footer>
 132
 133
 134 </html>