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.
smart-top/old/dashboard.html

203 lines
8.5 KiB
HTML

<!-- <meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid.min.css" >
<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid-theme.min.css" >
<link href="{{context}}/static/css/default.css" rel="stylesheet" type="text/css">
<link href="{{context}}/static/css/reflect.css" rel="stylesheet" type="text/css">
<link href="{{context}}/static/css/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
<script src="{{context}}/static/js/jx/rpc.js"></script>
<script src="{{context}}/static/js/jx/dom.js"></script>
<script src="{{context}}/static/js/jx/utils.js"></script>
<script src="{{context}}/static/js/jx/ext/math.js"></script>
<script src="{{context}}/static/js/jsgrid/jsgrid.js"></script>
<script src="{{context}}/static/js/colors.js"></script>
<script src="{{context}}/static/js/dashboard.js"></script>
<title>{{title}}</title>
<script>
var HTTP_CONTEXT="{{context}}"
$(document).ready(function(){
monitor.folders.init()
monitor.processes.fetch()
})
</script>
<body class="">
<div class="border-bottom caption" style="height:42px">
<div class="">{{title}}</div>
<div class="small" style="margin:4px">The Phi Technology LLC</div>
</div>
<div class="sidebar">
<i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
<div id="menuframe" class="left small" style="width:10%;">
<div id="menu" class="menu"></div>
</div>
</div>
<div class="block">
<div style="margin:4px; margin-top:2%">
<div class="" style="height:28px; ">
<div class=" bold">Monitoring
<span id="latest_processes_label" class="default bold"></span>
</div>
<div class="small">Last Lookup <span id="node_last_lookup"></span></div>
</div>
<div class = "" style="height:170px, width:100%;">
<div id="latest_processes" class="grid" ></div>
</div>
<div style="height:22px; padding:2px" class="small">
<div id="latest_process_pager" align="center"></div>
</div>
</div>
</div>
<div class="block">
<div id="process_summary" class=" grid " style="margin:4px; margin-top:2%">
<div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
<div class="bold" style="color:#4682B4">Application Summary By Status</div>
<div class="small">Latest Lookup <span id="app-summary-date"></span></div>
</div>
<div class="" style="padding:2px; height:250px; margin:4px; margin-top:10px">
<div class=" " style="height:100%">
<div class="small left" style="margin-left:2%; margin-top:1%">
<div class="bold">Total Applications that have:</div>
<br>
<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-check"></i> Running</div> <span id="total-running" class="right"></span></div>
<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-times"></i> Crash</div> <span id="total-crash" class="right"></span></div>
<div style="margin:0px; margin-left:20px; padding:4px; height:12px"><div class="left width-half"><i class="fa fa-ellipsis-h"></i> Idle</div> <span id="total-idle" class="right"></span></div>
</div>
<div id="summary_chart" class="right width-half"></div>
</div>
</div>
<div id="summary_details" class="right"></div>
</div>
</div>
<div class="block">
<div class="grid " style="margin:4px; margin-top:10px;">
<div style="height:28px">
<div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
</div>
<div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div>
</div>
</div>
<div class="">
<div class="block">
<div class="" style="padding:20px; margin-top:5%; margin-bottom:1rem;">
<div class="" style="height:28px">
<div class="small bold">CPU & Memory Usage Trend for <i class="fa fa-quote-left"></i> <span id="trend_info" class="default bold"></span> <i class="fa fa-quote-right"></i></div>
<div class="small">Last Lookup <span id="trend_last_lookup"></span> <i id="has_anomaly" class="fa fa-warning right" ></i></div>
</div>
<!-- <div style="height:270px; margin-top:10px"> -->
<div id="trends_chart" class="small grid" style="height:250px; margin:2rem;"></div>
<!-- </div> -->
</div>
</div>
<div class="block">
<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
<div style="height:28px">
<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
<div class="bold">Python Virtual Environment Analysis</div>
<div class="small">Last Lookup <span id="sandbox_date"></span></div>
</div>
<div class=" " style="margin-top:10px; height:135px">
<div id="sandbox_status" class="">
</div>
<div id="sandbox_pager"></div>
</div>
</div>
</div>
<div style="margin-top:5%">
<div class="block">
<div id="folder_summary" class="">
<div style="height:28px">
<div class="bold">Folder Analysis/Monitoring</div>
<div class="small">Powered By Machine Learning</div>
</div>
<div class="">
<div class=" border-top" style="margin-top:4px; padding:2px; height:34px">
<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i>
<input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/>
<i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
</div>
<div id="gfolderframe" style="margin-top:10px; height:170px; width:100%">
<div style="height:130px">
<div id="gridfolders" style=""></div>
</div>
<div id="folderspager" class="small" style="height:22px; margin:4px;"></div>
</div>
</div>
</div>
</div>
<div class="block">
<div id="folder_plan" style="display:none">
<div class="border-bottom" style="height:32px">
<div class="bold">Deletion/Archiving Plan
<i class="fa fa-quote-left"></i> <span id="folder_name"></span> <i class="fa fa-quote-right"></i>
<i class="fa fa-angle-up action right bold" style="font-size:16px; margin:4px;" onclick="monitor.folders.show.grid()"></i>
</div>
<div class="small left">Powered By Machine Learning</div>
</div>
<div id="delete_age" class="left width-half " style="margin:2px; padding:2px;">
<div class="small" align="left">By Age</div>
<div class="number" style="height:42px">
<div id="age_count" align="right" class="left width-75" style="margin-right:4px">00</div>
<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
</div>
<div class="small border-top" align="center" style="padding-top:4px">
Approximately <span id="age_value">00</span> <span id="age_units"></span>
</div>
</div>
<div id="delete_size" class="right width-half" class="number" style="margin:2px; padding:2px">
<div class="small" align="left">By Size</div>
<div class=" number" style="height:42px">
<div id="size_count" align="right" class="left width-75" style="margin-right:4px">00</div>
<div class="small" class="left" style="height:100%; padding-top:15px">Files</div>
</div>
<div class="small border-top"align="center" style="padding-top:4px">
Approximately <span id="size_value">00</span> <span id="size_units"></span>
</div>
</div>
</div>
</div>
<div id="chartfolder" ></div>
</div>
</div>
</body> -->