Example of Files Used in a Stateless Application
Example of app.json file for Contract Viewer application
This section contains examples of files used in Contract Viewer application.
-
See the Cisco APIC REST API Configuration Guide for information about APIC REST APIs.
-
To view source code of Contract Viewer application, see Cisco DevNet.
The Contract Viewer app provides information regarding the flow of traffic between endpoint groups on a contract basis. It allows the user to visualize traffic flow in the Consumer, Provider, Filter and Contract mode. A DVR is also provided to enable playback of traffic. The app provides a visual and effective way to troubleshoot and detect unexpected traffic behavior.
{
"apicversion":"2.2(1a)",
"appid":"ContractViewer",
"author":"UVX",
"category":[
"Visibility and Monitoring"
],
"contact":{
"contact-email":"aciappcenter-support@cisco.com",
"contact-url":"http://www.cisco.com/go/aci"
},
"iconfile":"TrafficMap.jpg",
"insertionURL":"fv:infoTenant:center",
"name":"Contract Viewer",
"permissions":[
"tenant-epg",
"tenant-network-profile",
"tenant-security"
],
"permissionslevel":"read",
"shortdescr":"Contract Viewer for the stats data between EPGs",
"vendor":"Cisco",
"vendordomain":"Cisco",
"version":"1.0"
}
Example of app.html file for Contract Viewer application
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<link rel="stylesheet" type="text/css" href="bipartitelayout.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/d3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/1.5.2/async.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script src="scripts/jquery/jquery.2.1.4.js"></script>
<script src="scripts/jquery/jquery.cookie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="scripts/jquery/jquery.leanModal.min.js"></script>
<script src="scripts/biPartite.js"></script>
<script src="scripts/CreateHttpRequest.js"></script>
<script src="scripts/drawFuncAndUtils.js"></script>
<script src="scripts/zeroTrafficCase.js"></script>
<script src="scripts/helpers.js"></script>
<script src="scripts/FilterQueries.js"></script>
<script src="scripts/handleTenantRequest.js"></script>
<script src="scripts/appDeploySlider.js"></script>
<link rel="stylesheet" href="font-awesome.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" type="text/css" href="d3.slider.css" media="screen" />
<script>
$(function(){
if (httpLoginRequest()) {
console.log("SUCCESS!");
} else {
console.log("FAIL!");
}
});
</script>
<div id="graph-container"></div>
<div class="container">
<div id="player" class="hidden">
<button title="Rewind" type="button" id="button_rev" class="btn" onclick='buttonRevPress()'>
<i class="fa fa-backward"></i>
</button>
<button title="Pause" type="button" id="button_pause" class="btn" onclick='buttonPausePress()'>
<i class="fa fa-pause"></i>
</button>
<button title="Play" type="button" id="button_play" class="btn" onclick='buttonPlayPress()'>
<i class="fa fa-play"></i>
</button>
<button title="Switch to Compact View" type="button" id="overallView" class="btn" onclick='showOverallView()'>
<i class="glyphicon glyphicon-eye-open"></i>
</button>
<button title="Refresh" type="button" id="refreshView" class="btn" onclick='refreshView()'>
<i class="glyphicon glyphicon-refresh"></i>
</button>
<input type="checkbox" id="isFilterSelected" checked data-toggle="toggle" data-on="Contract View" data-off="Filter View" data-onstyle="success" data-offstyle="info" data-width="120">
</div>
<div id="filterToggleOnly" class="hidden">
<input type="checkbox" id="isFilterSelectedZeroTrafficCase" checked data-toggle="toggle" data-on="Contract View" data-off="Filter View" data-onstyle="success" data-offstyle="info" data-width="120">
</div>
</div>
<div id="slider-container">
<div id="slider"></div>
</div>
<div id="traffic-slider"></div>
<div id="traffic-container"></div>
</body>
</html>