diff options
Diffstat (limited to 'kamon-dashboard/src/main/resources/web/index.html')
| -rw-r--r-- | kamon-dashboard/src/main/resources/web/index.html | 247 |
1 files changed, 151 insertions, 96 deletions
diff --git a/kamon-dashboard/src/main/resources/web/index.html b/kamon-dashboard/src/main/resources/web/index.html index fd149df4..7ad0d056 100644 --- a/kamon-dashboard/src/main/resources/web/index.html +++ b/kamon-dashboard/src/main/resources/web/index.html @@ -1,116 +1,171 @@ <!doctype html> -<html lang="en" data-ng-app="kamon"> +<html lang="en"> <head> <meta charset="utf-8"> <title>Kamon</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - - <link href="css/bootstrap.min.css" rel="stylesheet"> - <link href="css/bootstrap-responsive.min.css" rel="stylesheet"> - <link href="css/jquery-ui.css" rel="stylesheet"> - <link href="css/app.css" rel="stylesheet"> - - <link rel="shortcut icon" href="ico/favicon.png"> + <link rel="stylesheet" href="css/lib/jquery-ui.min.css"> + <link rel="stylesheet" href="css/lib/bootstrap.min.css"> + <link rel="stylesheet" href="css/lib/custom.vn.d3.css"> + <link rel="stylesheet" href="css/lib/font-awesome.min.css"> + <link rel="stylesheet" href="css/app.css"/> </head> -<body> +<body ng-app="dashboard"> +<!-- Header --> +<div id="top-nav" class="navbar navbar-inverse navbar-static-top"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="icon-toggle"></span> + </button> + <a class="navbar-brand" href="#"><img src="img/kamon-verde-120x120.png" width="20" height="20"/> Kamon</a> + </div> + <div class="navbar-collapse collapse"> + <ul class="nav navbar-nav navbar-right"> + <li><a title="Add Widget" data-toggle="modal" href="#addAboutModal"><span + class="glyphicon glyphicon-plus-sign"></span> About</a></li> + <li><a href="#"><i class="glyphicon glyphicon-off"></i> Exit</a></li> + </ul> + </div> + </div> + <!-- /container --> +</div> +<!-- /Header --> +<!-- Main --> +<div class="container"> + <div class="row"> + <div class="col-md-2"> + <!-- Left column --> + <a href="#"><strong><i class="glyphicon glyphicon-wrench"></i> Information</strong></a> + <hr> + <ul class="list-unstyled"> + <li class="nav-header"><a href="#" data-toggle="collapse" data-target="#userMenu"> + <h5>Actors <i class="fa fa-users"></i></h5> + </a> + <ul class="list-unstyled collapse in" id="userMenu"> + <li><a href="#"></i> Mailbox </a></li> + <li><a href="#"></i> Dispatchers </a></li> + <li><a href="#"></i> Throughput </a></li> - <div class="navbar navbar-inverse navbar-fixed-top"> - <div class="navbar-inner"> - <div class="container"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> + </ul> + </li> + <li class="nav-header"><a href="#" data-toggle="collapse" data-target="#menu2"> + <h5>Statistics <i class="fa fa-bar-chart-o"></i></h5> </a> - <a class="brand" href="#">Kamon</a> - <div class="nav-collapse collapse"> - <ul class="nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#about">About</a></li> + + <ul class="list-unstyled collapse" id="menu2"> + <li><a href="#">Stats</a></li> + <li><a href="#">Charts</a></li> </ul> - <form class="navbar-form pull-right"> - <button type="submit" class="btn">Sign in</button> - </form> - </div> - </div> + </li> + </ul> </div> - </div> - - <div class="container"> - <div class="column"> - <div class="portlet" ng-controller="messageController"> - <div class="portlet-header">Messages</div> - <div class="portlet-content"> - <div data-ng-init="startMessagePolling()"> - <div id="liveramdomdata" style="min-width: 400px; height: 400px; margin: 0 auto"></div> - </div> + <!-- /col-3 --> + <div class="col-md-9"> + <!-- column 2 --> + <ul class="list-inline pull-right"> + <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i + class="glyphicon glyphicon-comment"></i><span class="count">3</span></a> + <ul class="dropdown-menu" role="menu"> + <li><a href="#">1. Is there a way..</a></li> + <li><a href="#">2. Hello, admin. I would..</a></li> + <li><a href="#"><strong>All messages</strong></a></li> + </ul> + </li> + </ul> + <a href="#"><strong><i class="glyphicon glyphicon-dashboard"></i> Dashboard</strong></a> + <hr> + <div class="row"> + <div class="col-md-6"> + <div class="panel panel-default"> + <div class="panel-heading"><h4 class="panel-title">MPS</h4></div> + <div class="panel-body"> + <div ng-controller="graphicController1"> + <nvd3-stacked-area-chart + data="exampleData" + id="exampleId" + showXAxis="true" + height="200" + showYAxis="true"> + <svg></svg> + </nvd3-stacked-area-chart> + </div> + </div> + </div> </div> - </div> - <div class="portlet" ng-controller="actorTreeCtrl"> - <div class="portlet-header">Actor Tree</div> - <button ng-click="getActorTree();" id="fullscreenButton">Full</button> - - <div data-ng-init="getActorTree()"> - <div class="portlet-content"> - <div id="tree"></div> + <div class="col-md-6"> + <div class="panel panel-default"> + <div class="panel-heading"><h3 class="panel-title">Latencies</h3></div> + <div class="panel-body"> + <div ng-controller="graphicController" style="margin: 0;"> + <nvd3-line-chart + data="exampleData" + showXAxis="true" + showYAxis="true" + tooltips="true" + interactive="true" + showLegend="true" + height="200" + legendColor="legendColorFunction()"> + <svg></svg> + </nvd3-line-chart> + </div> + </div> </div> </div> </div> </div> + <!--/col-span-6--> + </div> + <!--/row--> + <hr> +</div> +<!--/col-span-9--> +</div> +<!-- /Main --> - <div class="column"> - <div class="portlet" ng-controller="dispatchersController"> - <div class="portlet-header">Dispatchers</div> - <div class="portlet-content"> - <div data-ng-init="startPolling()"/> - <div data-ng-repeat="system in actorSystemMetrics"> - <ul class="thumbnails"> - <li class="span5 clearfix"> - <div class="thumbnail clearfix"> - <div class="caption" class="pull-left"> - <h4> - <a href="#" >Actor System: {{ system.actorSystem }}</a> - </h4> - <div data-ng-repeat="s in system.dispatchers"> - <small><b>Dispatcher Name :</b> {{s.name}}</small></br> - <small><b>Active Thread Count :</b> {{s.activeThreadCount}}</small></br> - <small><b>Pool Size :</b> {{s.poolSize}}</small></br> - <small><b>Queue Size :</b> {{s.queueSize}}</small> - </div> - </div> - </div> - </li> - </ul> - </div> - </div> - </div> +<footer class="text-center">Kamon is a set of tools that will help you monitor your reactive applications. <a + href="http://kamon.io"><strong>Kamon.io</strong></a> +</footer> + +<div class="modal" id="addAboutModal"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title">Kamon Reactive Applications Monitoring</h4> </div> - <div class="portlet"> - <div class="portlet-header">Mailboxes</div> - <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> + <div class="modal-body"> + <p>Kamon is a set of tools that will help you monitor your reactive applications.</p> </div> + <div class="modal-footer"> + <p class="muted credit text-center">Kamon is a open source project, go and check out the code at + <a href="http://github.com/kamon-io/Kamon"><i class="fa fa-github"></i></a> + </p> + <a href="#" data-dismiss="modal" class="btn">Close</a> + </div> + </div> + <!-- /.modal-content --> + </div> + <!-- /.modal-dalog --> +</div> +<!-- /.modal --> +</body> +</html> +</body> - <hr> - - <footer> - <p>© Kamon 2013</p> - </footer> - - </div> <!-- /container --> +<!--javascript--> +<script src="js/lib/jquery.min.js"></script> +<script src="js/lib/bootstrap.min.js"></script> +<script src="js/lib/angular.min.js"></script> +<script src="js/lib/angular-route.min.js"></script> +<script src="js/lib/ui-bootstrap.min.js"></script> +<script src="js/lib/ui-bootstrap-tpls.min.js"></script> +<script src="js/lib/d3.v3.min.js"></script> +<script src="js/lib/nv.d3.min.js"></script> +<script src="js/lib/angularjs-nvd3-directives.js"></script> -</body> - <script src="js/jquery-1.9.1.min.js"></script> - <script src="js/jquery-ui.min.js"></script> - <script src="js/highcharts.js"></script> - <script src="js/exporting.js"></script> - <script src="js/d3.v3.min.js"></script> - <script src="js/bootstrap.min.js"></script> - <script src="js/angular.min.js"></script> - <script src="js/angular-resource.min.js"></script> - <script src="js/screenfull.min.js"></script> - <script src="js/highcharts-ng.js"></script> - <script src="js/controllers.js"></script> - <script src="js/services.js"></script> - <script src="js/app.js"></script> -</html>
\ No newline at end of file +<script src="js/services.js"></script> +<script src="js/controllers.js"></script> +<script src="js/app.js"></script> +</html> |