You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 lines
16 KiB
HTML
394 lines
16 KiB
HTML
<!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">
|
|
<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>
|