aboutsummaryrefslogblamecommitdiff
path: root/kamon-dashboard/src/main/resources/web/index.html
blob: 7ad0d05678056984f94270661873c55179f81cf9 (plain) (tree)
1
2
3
4
5
6
7
8
9
10
               
                


                          




                                                               

       



































                                                                                                                      
 



                                                                                               
                    



                                                                  
                         

                     
              































                                                                                                    
                      

















                                                                                               

                          
                  
              







                          
 









                                                                                                             
                  

                                                                                                     
                  














                                                                                                                
 









                                                           
 



                                         
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Kamon</title>
    <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 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>

                    </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>

                    <ul class="list-unstyled collapse" id="menu2">
                        <li><a href="#">Stats</a></li>
                        <li><a href="#">Charts</a></li>
                    </ul>
                </li>
            </ul>
        </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 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 -->

<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="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>

<!--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>

<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</html>