code
/
smart-top
mirrorاز https://dev.the-phi.com/git/library/smart-top


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
							<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Monitor</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS   -->
    <link href="{{context}}/static/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="{{context}}/static/css/animate.min.css" rel="stylesheet"/>

    <!--  Dashboard core CSS    -->
    <link href="{{context}}/static/css/dashboard.css" rel="stylesheet"/>

    <!--  Fonts and icons     -->
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <!--
        <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
    -->
    <link href="{{context}}/static/css/themify-icons.css" rel="stylesheet">
 <!--   Core JS Files   -->
    <script src="{{context}}/static/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="{{context}}/static/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="{{context}}/static/js/bootstrap-checkbox-radio.js"></script>

	<!--  Charts Plugin -->
	<script src="{{context}}/static/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="{{context}}/static/js/bootstrap-notify.js"></script>

    <!--  Google Maps Plugin
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    -->
    <!-- Dashboard Core javascript and methods for Demo purpose -->
	<script src="{{context}}/static/js/default.js"></script>

	<!-- Dashboard DEMO methods, don't include it in your project! -->
	<script src="{{context}}/static/js/dashboard.js"></script>
    <script src="{{context}}/static/js/jx/dom.js"></script>
    <script src="{{context}}/static/js/jx/rpc.js"></script>
    <script src="{{context}}/static/js/jx/utils.js"></script>
	<script type="text/javascript">
        var URI_CONTEXT="{{context}}"
    	$(document).ready(function(){

            var lobservers = [
                g.summary.factory('/1/get/summary/app_resources',function(r){

                    //r = JSON.parse(r.responseText)
                    jx.dom.set.value('total_cpu',r.cpu_usage)
                    jx.dom.set.value('total_mem',r.memory_usage)
                    jx.dom.set.value('mem_units',r.units)

                }),
                g.summary.factory('/1/get/summary/folder_size',function(r){
                    //console.log(r.responseText)
                    //r = JSON.parse(r.responseText)
                    if (r.length == 0){
                        r.size = "0.0"
                        r.units = 'MB'
                    }
                    jx.dom.set.value('total_folder_size',r.size)
                    jx.dom.set.value('folder_units',r.units)
                }),
                g.summary.factory('/1/get/summary/app_status',function(r){

                    jx.dom.set.value('total_app_crashes',r.crash)
                })
            ]

            jx.utils.patterns.observer(lobservers,"init")
        	  dashboard.initChartist();

    	});
	</script>
</head>


<body>

<div class="wrapper">
    <div class="sidebar" data-background-color="white" data-active-color="danger">

    <!--
		Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"
		Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
	-->

    	<div class="sidebar-wrapper">
            <div class="logo">
                <a href="#" class="simple-text">
                    Monitor
                </a>
            </div>

            <ul class="nav">
                <li class="active">
                    <a href="dashboard.html">
                        <i class="ti-panel"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li>
                    <a href= "/user">
                        <i class="ti-user"></i>
                        <p>User Profile</p>
                    </a>
                </li>
				<li class="active-pro">
                    <a href="/upgrade">
                        <i class="ti-export"></i>
                        <p>Upgrade to PRO</p>
                    </a>
                </li>
            </ul>
    	</div>
    </div>
    <!-- End Side Bar   -->
    <div class="main-panel">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar bar1"></span>
                        <span class="icon-bar bar2"></span>
                        <span class="icon-bar bar3"></span>
                    </button>
                    <a class="navbar-brand" href="#">Dashboard</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="ti-panel"></i>
								<p>Stats</p>
                            </a>
                        </li>
                        <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="ti-server"></i>
                                    <!-- <p class="notification">5</p> -->
									<p>Servers</p>
									<b class="caret"></b>
                              </a>
                              <ul class="dropdown-menu">
                                  {% for name in app_names %}
                                <div class="action"><i class="fa fa-angle-right"></i> {{name|safe}}</div>

                                {% endfor %}
                              </ul>
                        </li>
						<li>
                            <a href="#">
								<i class="ti-settings"></i>
								<p>Settings</p>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </nav>
        <!-- End Menu Bar -->

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-3 col-sm-6">
                        <div class="card">
                            <div class="content">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <div class="icon-big icon-warning text-center">
                                            <i class="ti-dashboard"></i>
                                            <div class="small">Total CPU</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-7">

                                        <div class="numbers">

                                            <div id="total_cpu" align="center">00</div>
                                            <div class="small"  align="right">Percent</div>
                                        </div>

                                    </div>
                                </div>
                                <div class="footer">
                                    <hr />
                                    <div class="stats">
                                        <i class="ti-reload"></i> Updated now
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="card">
                            <div class="content">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <div class="icon-big icon-success text-center">
                                            <i class="fa fa-microchip"></i>
                                            <div class="small">Mem. Used</div>

                                        </div>
                                    </div>
                                    <div class="col-xs-7">
                                        <div class="numbers">
                                            <div id="total_mem"></div>
                                            <div class="small" id="mem_units" align="right"></div>

                                        </div>
                                    </div>
                                </div>
                                <div class="footer">
                                    <hr />
                                    <div class="stats">
                                        <i class="ti-calendar"></i> Last day
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="card">
                            <div class="content">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <div class="icon-big icon-danger text-center">
                                            <i class="fa fa-warning"></i>
                                            <div class="small" align="center">Crashes</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-7">
                                        <div class="numbers">
                                            <div id="total_app_crashes"></div>
                                            <!-- show errors API. Crashed? -->
                                        </div>
                                    </div>
                                </div>
                                <div class="footer">
                                    <hr />
                                    <div class="stats">
                                        <i class="ti-timer"></i> In the last hour
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="card">
                            <div class="content">
                                <div class="row">
                                    <div class="col-xs-5">
                                        <div class="icon-big icon-info text-center">
                                            <i class="ti-folder"></i>
                                            <div class="small">Folders</div>
                                        </div>
                                    </div>
                                    <div class="col-xs-7">
                                        <div class="numbers">
                                            <div id="total_folder_size" align="center"></div>
                                            <div class="small" align="center" id="folder_units"></div>
                                            <!-- Folder Analysis API here. -->
                                        </div>
                                    </div>
                                </div>
                                <div class="footer">
                                    <hr />
                                    <div class="stats">
                                        <i class="ti-reload"></i> Updated now
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">Monitoring Apps</h4>
                                <p class="category">performance</p>
                            </div>
                            <div class="content">
                                <div id="chartHours" class="ct-chart"></div>

                                <div class="footer">
                                    <div class="chart-legend">
                                        <!-- confirm these three are right with new API. -->
                                        <i class="fa fa-circle text-info"></i> cpu usage
                                        <i class="fa fa-circle text-warning"></i> memory used
																				<i class="fa fa-circle text-danger"></i> available line
                                    </div>
                                    <hr>
                                    <div class="stats">
                                        <i class="ti-reload"></i> Updated 3 minutes ago
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">Summary</h4>
                                <p class="category">Running|Idle|Crash</p>
                            </div>
                            <div class="content">
                                <div id="chartPreferences" class="ct-chart ct-perfect-fourth"></div>

                                <div class="footer">
                                    <div class="chart-legend">
                                        <i class="fa fa-circle text-info"></i> Running
                                        <i class="fa fa-circle text-danger"></i> Crashed
                                        <i class="fa fa-circle text-warning"></i> Idle
                                    </div>
                                    <hr>
                                    <div class="stats">
                                        <i class="ti-timer"></i> Some footer
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card ">
                            <div class="header">
                                <h4 class="title">CPU and Memory</h4>
                                <p class="category">Usage Trends</p>
                            </div>
                            <div class="content">
                                <div id="chartActivity" class="ct-chart"></div>

                                <div class="footer">
                                    <div class="chart-legend">
                                        <i class="fa fa-circle text-info"></i> CPU
                                        <i class="fa fa-circle text-warning"></i> Memory
                                    </div>
                                    <hr>
                                    <div class="stats">
                                        <i class="ti-check"></i> Data information certified
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul>

                        <li>
                            <a href="#">
                                Monitor
                            </a>
                        </li>
                        <li>
                            <a href="#">
                               Invy
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </footer>
    </div>
</div>

</body>


</html>