library
/
smart-top
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some style changes

Browse Source
community
Michael Mead 8 years ago
parent 462ee74b1b
commit 76acbb7bd6
5 changed files with 521 additions and 279 deletions
Show Stats Download Patch File Download Diff File

3
src/api/index.py
Unescape View File

@ -162,6 +162,7 @@ def dashboard():
This function is designed to trigger learning for anomaly detection
@TODO: forward this to a socket i.e non-blocking socket
"""
@app.route('/anomalies/get')
def learn():
global CONFIG
@ -291,5 +292,3 @@ if __name__== '__main__':
SYS_ARGS.PARAMS['port'] = 8484
PORT = int(SYS_ARGS.PARAMS['port'])
app.run(host='0.0.0.0' ,port=PORT,debug=True,threaded=True)

213
src/api/static/css/default.css
Unescape View File

@ -78,7 +78,7 @@ body, .default {
.grid .fa-times {color:maroon; }
.menu {
margin:4px;
margin:5px;
padding:4px;
}
.menu .fa-chevron-right {color:transparent; margin:4px; }
@ -121,7 +121,7 @@ input[type=text]:focus{
.fa-warning, .warning{color:orange}
.number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;}
.action {cursor:pointer; padding:2px; margin:2px; border:1px solid transparent}
.action {cursor:pointer; padding:1px; margin:1px; border:1px solid transparent}
.action:hover { border-bottom-color:#4682B4}
.shadow{box-shadow: 7px 7px 5px #888888;}
.gradient {
@ -144,3 +144,212 @@ background-image: -webkit-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: linear-gradient(to bottom, #CAD5E0 0%, #F3F3F3 40%);
}
/* ----------- Non-Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- Retina Screens ----------- */
@media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
}
/* ----------- iPad mini ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
.block {display: inline-block;}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Landscape ////////////////////////////////////////////////////////////////////////////////////////////////////// */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}

14
src/api/static/css/reflect.css
Unescape View File

@ -0,0 +1,14 @@
.block {
border: 2px solid black;
display: inline-block;
}
.jsgrid-cell { overflow:hidden; }
/* ----------- working media query (laptop) ----------- */
@media screen
and (max-device-width: 900px) {
}

6
src/api/static/js/dashboard.js
Unescape View File

@ -85,7 +85,7 @@ monitor.processes.render = function(label,data) {
jx.dom.set.value('latest_processes_label', label)
var options = {
width: $('#latest_processes').width(), height:'auto'
width: "90%", height:'auto', autoload:true
}
options.paging = true
options.pageSize = 4
@ -600,8 +600,8 @@ monitor.menu.event.toggle = function () {
var value = dom.style.marginLeft.trim()
if (value==0 || value == "0px" || value == "") {
var width = -$(dom).width() - 10
$('#menuframe').animate({marginLeft:"-12%"})
var width = -$(dom).width() - 20
$('#menuframe').animate({marginLeft:"-20%"})
} else {
$('#menuframe').animate({marginLeft:"0"})
}

288
src/api/templates/dashboard.html
Unescape View File

@ -4,8 +4,11 @@
<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>
@ -31,146 +34,163 @@
<div class="">{{title}}</div>
<div class="small" style="margin:4px">The Phi Technology LLC</div>
</div>
<i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
<div id="menuframe" class="left small " style="width:10%; height:90%">
<i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i> <!-- TODO: MOVE MORE LEFT -->
<div id="menuframe" class="left small" style="width:10%; height:100%">
<div id="menu" class="menu"></div>
</div>
<div class="left info ">
<div class=" border-right" 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="padding:2px; margin:4px; height:170px">
<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 id="process_summary" class=" grid border-right" 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 class=" grid border-right" 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="left info">
<div class="" style="padding:4px; margin-top:2%">
<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:4px">
<div id="trends_chart" class="small grid" style="height:250px"></div>
</div>
</div>
<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 style="margin-top:2%">
<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 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 border-right" 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 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>
</div>
<div class="left info">
<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>

Write Preview
Loading…
Cancel
Save