aboutsummaryrefslogtreecommitdiff
path: root/kamon-dashboard/src/main/resources/web/index.html
diff options
context:
space:
mode:
authorDiego Parra <diegolparra@gmail.com>2013-09-01 19:22:26 -0300
committerDiego Parra <diegolparra@gmail.com>2013-09-01 19:22:26 -0300
commite457fb4d3b8535c27343c80c45fdbe7fa7a93dae (patch)
tree7585b5e48e8c56554f272c2915a6e25f7dcef7ec /kamon-dashboard/src/main/resources/web/index.html
parent0b24374b851590d54c3a671ecbc812d2dc3bed3a (diff)
downloadKamon-e457fb4d3b8535c27343c80c45fdbe7fa7a93dae.tar.gz
Kamon-e457fb4d3b8535c27343c80c45fdbe7fa7a93dae.tar.bz2
Kamon-e457fb4d3b8535c27343c80c45fdbe7fa7a93dae.zip
WIP: Refactor in dashboard in order to prepare actro tree view
Diffstat (limited to 'kamon-dashboard/src/main/resources/web/index.html')
-rw-r--r--kamon-dashboard/src/main/resources/web/index.html296
1 files changed, 86 insertions, 210 deletions
diff --git a/kamon-dashboard/src/main/resources/web/index.html b/kamon-dashboard/src/main/resources/web/index.html
index 21421adf..258c15a3 100644
--- a/kamon-dashboard/src/main/resources/web/index.html
+++ b/kamon-dashboard/src/main/resources/web/index.html
@@ -4,237 +4,113 @@
<meta charset="utf-8">
<title>Kamon</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="description" content="">
- <meta name="author" content="">
- <!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
- <link rel="stylesheet" href="css/app.css">
-
- <style type="text/css">
- body {
- padding-top: 60px;
- padding-bottom: 40px;
- }
- </style>
-
-
- <!--Portlets -->
- <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
-
- <!--highcharts -->
- <script src="http://code.highcharts.com/highcharts.js"></script>
- <script src="http://code.highcharts.com/modules/exporting.js"></script>
- <script src="http://code.highcharts.com/modules/exporting.js"></script>
-
- <style>
- body { min-width: 520px; }
- .column { width: 50%; float: left; padding-bottom: 100px; }
- .portlet { margin: 0 1em 1em 0; }
- .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
- .portlet-header .ui-icon { float: right; }
- .portlet-content { padding: 0.4em; }
- .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
- .ui-sortable-placeholder * { visibility: hidden; }
- </style>
-
- <script>
- $(function() {
- $(".column").children().sortable({
- connectWith: ".column"
- });
-
- $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
- .find( ".portlet-header" )
- .addClass( "ui-widget-header ui-corner-all" )
- .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
- .end()
- .find( ".portlet-content" );
-
- $( ".portlet-header .ui-icon" ).click(function() {
- $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
- $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
- });
-
- $( ".column" ).disableSelection();
- });
- </script>
- <!--End Portlets -->
- <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
- <!--[if lt IE 9]>
- <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
- <![endif]-->
+ <link href="css/jquery-ui.css" rel="stylesheet">
+ <link href="css/app.css" rel="stylesheet">
<link rel="shortcut icon" href="ico/favicon.png">
</head>
<body>
-<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>
- </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>
- <form class="navbar-form pull-right">
- <button type="submit" class="btn">Sign in</button>
- </form>
+ <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>
+ </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>
+ <form class="navbar-form pull-right">
+ <button type="submit" class="btn">Sign in</button>
+ </form>
+ </div>
</div>
</div>
</div>
-</div>
-<div class="container">
- <div class="column">
- <div class="portlet">
- <div class="portlet-header">Messages</div>
- <div class="portlet-content">
- <div id="liveramdomdata" style="min-width: 400px; height: 400px; margin: 0 auto"></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>
+ </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 class="column">
- <div class="portlet" ng-controller="kamonCtrl">
- <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 data-ng-init="getActorTree()">
+ <div class="portlet-content">
+ <div id="tree"></div>
</div>
</div>
- </div>
+ </div>
</div>
- <hr>
-
- <footer>
- <p>&copy; Kamon 2013</p>
- </footer>
-
-</div> <!-- /container -->
-
-<!-- Le javascript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="js/bootstrap.js"></script>
-<script>
- $(function () {
- $(document).ready(function() {
- Highcharts.setOptions({
- global: {
- useUTC: false
- }
- });
-
- var chart;
- $('#liveramdomdata').highcharts({
- chart: {
- type: 'spline',
- animation: Highcharts.svg, // don't animate in old IE
- marginRight: 10,
- events: {
- load: function() {
- // set up the updating of the chart each second
- var series = this.series[0];
- setInterval(function() {
- $.get("/metrics/messages", function(data) {
- var x = (new Date()).getTime(), // current time
- y = data.messages;
- series.addPoint([x, y], true, true);
- },"json");
+ <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>
+ </div>
+ <div class="portlet">
+ <div class="portlet-header">Mailboxes</div>
+ <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
+ </div>
- }, 1000);
- }
- }
- },
- title: {
- text: 'Messages'
- },
- xAxis: {
- type: 'datetime',
- tickPixelInterval: 150
- },
- yAxis: {
- title: {
- text: 'Value'
- },
- plotLines: [{
- value: 0,
- width: 1,
- color: '#808080'
- }]
- },
- tooltip: {
- formatter: function() {
- return '<b>'+ this.series.name +'</b><br/>'+
- Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
- Highcharts.numberFormat(this.y, 2);
- }
- },
- legend: {
- enabled: false
- },
- exporting: {
- enabled: false
- },
- series: [{
- name: 'Messages',
- data: (function() {
- // generate an array of random data
- var data = [],
- time = (new Date()).getTime(),
- i;
+ <hr>
- for (i = -19; i <= 0; i++) {
- data.push({
- x: time + i * 1000,
- y: Math.random()
- });
- }
- return data;
- })()
- }]
- });
- });
+ <footer>
+ <p>&copy; Kamon 2013</p>
+ </footer>
- });
+ </div> <!-- /container -->
-</script>
</body>
-
-
-<script src="js/angular.js"></script>
-<script src="js/angular-resource.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>
+ <script src="js/jquery.js"></script>
+ <script src="js/jquery-ui.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.js"></script>
+ <script src="js/angular-resource.js"></script>
+ <script src="js/highcharts-ng.js"></script>
+ <script src="js/controllers.js"></script>
+ <script src="js/services.js"></script>
+ <script src="js/screenfull.min.js"></script>
+ <script src="js/app.js"></script>
+</html> \ No newline at end of file