Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

i2-flowspec-portal/ui/index.html

Go to file
 
 
Cannot retrieve contributors at this time
343 lines (334 sloc) 15.7 KB
Raw Blame
Open in GitHub Desktop
<!--
#
# DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER
#
# Copyright (c) 2018 Juniper Networks, Inc.
# All rights reserved.
#
# Use is subject to license terms.
#
# Licensed under the Apache License, Version 2.0 (the ?License?); you may not
# use this file except in compliance with the License. You may obtain a copy of
# the License at http://www.apache.org/licenses/LICENSE-2.0.
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
#
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BGP Flow Spec Demo</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="jquery.dataTables.css">
<link rel="stylesheet" href="bootstrap-dialog.min.css">
<link rel="stylesheet" href="ui.css">
</head>
<body>
<div class="container col-sm-9 col-md-8 col-lg-12"><h2 style="text-align:left;float:left;">DevOps against DDoS</h2>
<h2 style="text-align:right;float:right;" class="mainheader">Monitoring BGP FlowSpec with Junos PyEZ</h2></div>
<div id="exTab1" class="container col-sm-9 col-md-8 col-lg-12">
<ul class="nav nav-pills mynav">
<li class="active">
<a href="#overview" data-toggle="tab">Overview</a>
</li>
<li><a href="#flowConfiguration" data-toggle="tab">Static Flow Configuration</a>
</li>
<li><a href="#flowActive" data-toggle="tab">Active Flows</a>
</li>
<li><a href="#filterActive" data-toggle="tab">Active Flow Filters</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="overview">
<br/>
<div class="panel panel-default">
<img src="internet2.png" class="img-rounded img-responsive" alt="Juniper Networks">
</div>
</div>
<div class="tab-pane" id="flowConfiguration">
<br/>
<div class="panel panel-default">
<div class="panel-heading"><h3>Route Reflector Static Flow Configuration</h3></div>
<div class="panel-body">
<p>
<button id="flowAddBtn" type="button" class="btn btn-primary btn-sm btn-custom" data-toggle="modal"
data-target="#modalFlowAddNew">
<span class="glyphicon glyphicon-plus"></span> Add
</button>
<button id="flowModBtn" type="button" class="btn btn-primary btn-sm btn-custom">
<span class="glyphicon glyphicon-pencil"></span> Mod
</button>
<button id="flowDelBtn" type="button" class="btn btn-primary btn-sm btn-custom">
<span class="glyphicon glyphicon-minus"></span> Del
</button>
</p>
<br/>
<table id="t_flow_config" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>VRF</th>
<th>Family</th>
<th>Destination Prefix</th>
<th>Source Prefix</th>
<th>Protocol</th>
<th>Destination Port</th>
<th>Source Port</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="flowActive">
<br/>
<div class="panel panel-default">
<div class="panel-heading"><h3>Active Flow Routes</h3></div>
<div class="panel-body">
<br/>
<table id="t_active_flow" class="display" style="width:100%">
<thead>
<tr>
<th>Router</th>
<th>VRF</th>
<th>Family</th>
<th>Name</th>
<th>Destination Prefix</th>
<th>Source Prefix</th>
<th>Protocol</th>
<th>Destination Port</th>
<th>Source Port</th>
<th>KRT Action</th>
<th>Community Action</th>
<th>Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="filterActive">
<br/>
<div class="panel panel-default">
<div class="panel-heading"><h3>Active Flow Filter</h3></div>
<div class="panel-body">
<br/>
<table id="t_active_filter" class="display" style="width:100%">
<thead>
<tr>
<th>Router</th>
<th>VRF</th>
<th>Family</th>
<th>Destination Prefix</th>
<th>Source Prefix</th>
<th>Protocol</th>
<th>Destination Port</th>
<th>Source Port</th>
<th>Packet Count</th>
<th>Byte Count</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="modalFlowAddNew" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add new flow route</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="inputFlowRouteName" class="col-sm-2 col-form-label">Flow Route Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputFlowRouteName"
placeholder="My New Flow Route">
</div>
</div>
<div class="form-group row" id="fg_vrf">
<label for="selectVrf" class="col-sm-2 col-form-label">VRF</label>
<div class="col-sm-3">
<select class="form-control" id="selectVrf">
</select>
</div>
</div>
<div class="form-group row" id="fg_family">
<label for="selectFamily" class="col-sm-2 col-form-label">Family</label>
<div class="col-sm-3">
<select class="form-control" id="selectFamily">
<option selected="selected">v4</option>
<option>v6</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="inputSrcPrefix" class="col-sm-2 col-form-label">Source Prefix</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputSrcPrefix" placeholder="1.1.1.1/32">
</div>
</div>
<div class="form-group row">
<label for="inputSrcPort" class="col-sm-2 col-form-label">Source Port</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputSrcPort" placeholder="8080">
</div>
</div>
<div class="form-group row">
<label for="inputDstPrefix" class="col-sm-2 col-form-label">Destination Prefix</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputDstPrefix" placeholder="2.2.2.2/32">
</div>
</div>
<div class="form-group row">
<label for="inputDstPort" class="col-sm-2 col-form-label">Destination Port</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputDstPort" placeholder="8080">
</div>
</div>
<div class="form-group row" id="fg_protocol">
<label for="selectProtocol" class="col-sm-2 col-form-label">Protocol</label>
<div class="col-sm-3">
<select class="form-control" id="selectProtocol">
<option>tcp</option>
<option>udp</option>
<option>icmp</option>
</select>
</div>
</div>
<div class="form-group row" id="fg_action">
<label for="selectAddNewFlowAction" class="col-sm-2 col-form-label">Action</label>
<div class="col-sm-3">
<select class="form-control" id="selectAddNewFlowAction">
<option>accept</option>
<option>discard</option>
<option>sample</option>
<option>community</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnAddFlowRoute">Add</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="modalFlowMod" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modify Flow Route</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label for="inputFlowRouteName" class="col-sm-2 col-form-label">Flow Route Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputModFlowRouteName" readonly>
</div>
</div>
<div class="form-group row" id="fg_mod_vrf">
<label for="selectModVrf" class="col-sm-2 col-form-label">VRF</label>
<div class="col-sm-3">
<select class="form-control" id="selectModVrf">
</select>
</div>
</div>
<div class="form-group row" id="fg_mod_family">
<label for="selectModFamily" class="col-sm-2 col-form-label">Family</label>
<div class="col-sm-3">
<select class="form-control" id="selectModFamily">
<option>v4</option>
<option>v6</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="inputSrcPrefix" class="col-sm-2 col-form-label">Source Prefix</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputModSrcPrefix" placeholder="1.1.1.1/32">
</div>
</div>
<div class="form-group row">
<label for="inputSrcPort" class="col-sm-2 col-form-label">Source Port</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputModSrcPort" placeholder="8080">
</div>
</div>
<div class="form-group row">
<label for="inputDstPrefix" class="col-sm-2 col-form-label">Destination Prefix</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputModDstPrefix" placeholder="2.2.2.2/32">
</div>
</div>
<div class="form-group row">
<label for="inputDstPort" class="col-sm-2 col-form-label">Destination Port</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputModDstPort" placeholder="8080">
</div>
</div>
<div class="form-group row" id="fg_mod_protocol">
<label for="selectProtocol" class="col-sm-2 col-form-label">Protocol</label>
<div class="col-sm-3">
<select class="form-control" id="selectModProtocol">
<option>tcp</option>
<option>udp</option>
<option>icmp</option>
</select>
</div>
</div>
<div class="form-group row" id="fg_mod_action">
<label for="selectModFlowAction" class="col-sm-2 col-form-label">Action</label>
<div class="col-sm-3">
<select class="form-control" id="selectModFlowAction">
<option>accept</option>
<option>discard</option>
<option>sample</option>
<option>community</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnModFlowRoute">Modify</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script
src="jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="jquery.dataTables.js"></script>
<script src="bootstrap-dialog.min.js"></script>
<script type="text/javascript" charset="utf8" src="ui.js"></script>
</body>
</html>