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

UI enhancement, better handling of sandboxes at API

Browse Source
master
Steve L. Nyemba 8 years ago
parent e1d9b657d0
commit 02790a2872
4 changed files with 106 additions and 42 deletions
Show Stats Download Patch File Download Diff File

6
src/api/index.py
Unescape View File

@ -103,9 +103,9 @@ def sandbox():
#handler = HANDLERS['sandbox']['class'] #handler = HANDLERS['sandbox']['class']
#conf = HANDLERS['sandbox']['config'] #conf = HANDLERS['sandbox']['config']
r = [] r = []
p = Factory.instance('sandbox',CONFIG) # p = Factory.instance('sandbox',CONFIG)
handler = p['class'] handler = monitor.Sandbox()
conf = p['config'] conf = CONFIG['sandbox']
for id in conf: for id in conf:
try: try:

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

@ -2,7 +2,7 @@ body, .default {
font-size:14px; font-size:14px;
font-family:sans-serif; font-family:sans-serif;
font-weight:lighter; font-weight:lighter;
padding:20px; padding:10px;
} }
.small { .small {
@ -62,7 +62,7 @@ body, .default {
padding:4px; padding:4px;
} }
.menu .fa-chevron-right {color:transparent; margin:4px; } .menu .fa-chevron-right {color:transparent; margin:4px; }
.menu .menu-item { border:1px solid transparent; text-transform:capitalize; cursor:pointer; padding-bottom:4px; margin:2px;} .menu .menu-item { border:1px solid transparent; cursor:pointer; padding-bottom:4px; margin:2px;}
.menu .menu-item:hover { .menu .menu-item:hover {
border-bottom-color:#4682B4; border-bottom-color:#4682B4;
} }
@ -90,7 +90,9 @@ input[type=text]:focus{
} }
.height-quarter{height:25%;} .height-quarter{height:24%;}
.height-half{height:47%}
.width-quarter {width:24%}
.width-half {width:47%; } .width-half {width:47%; }
.width-75 {width:72%} .width-75 {width:72%}
@ -100,4 +102,25 @@ input[type=text]:focus{
.number {font-size:42px; font-weight:lighter; padding:2px; margin:2px;} .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:2px; margin:2px; border:1px solid transparent}
.action:hover { border-bottom-color:#4682B4} .action:hover { border-bottom-color:#4682B4}
.shadow{box-shadow: 7px 7px 5px #888888;}
.gradient {
background-image:
linear-gradient(
#4682b4, #ffffff,#ffffff
);
}
.simple-gradient {
background-image: -ms-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: -moz-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: -o-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CAD5E0), color-stop(40, #F3F3F3));
background-image: -webkit-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: linear-gradient(to bottom, #CAD5E0 0%, #F3F3F3 40%);
}

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

@ -205,12 +205,17 @@ monitor.processes.summary.init = function(logs){
CRASH_COLOR=COLORS[2] CRASH_COLOR=COLORS[2]
var i = 0; var i = 0;
var date = null;
for( label in logs ){ for( label in logs ){
var rows = logs[label] var rows = logs[label]
series[label] = {data:[0,0,0],label:label} series[label] = {data:[0,0,0],label:label}
jx.utils.patterns.visitor(rows,function(item){ jx.utils.patterns.visitor(rows,function(item){
if (date == null) {
date = new Date(item.year,item.month,item.day)
//date = [item.day,item.month,item.year]
}
if (item.status == 'running'){ if (item.status == 'running'){
xr += 1 xr += 1
}else if(item.status == 'idle'){ }else if(item.status == 'idle'){
@ -223,7 +228,13 @@ monitor.processes.summary.init = function(logs){
} }
var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]} var data = {labels:['Running','Crash','Idle'],datasets:[{data:[xr,xc,xi],backgroundColor:[RUNNING_COLOR,CRASH_COLOR,IDLE_COLOR/**COLORS[11],COLORS[2],COLORS[100]*/]}]}
var context = jx.dom.get.instance('CANVAS') var context = jx.dom.get.instance('CANVAS')
jx.dom.set.value('total-running', xr)
jx.dom.set.value('total-crash', xc)
jx.dom.set.value('total-idle', xi)
jx.dom.set.value('total-apps', xr + xi + xc)
jx.dom.set.value('app-summary-date', date)
jx.dom.set.value('summary_chart','') jx.dom.set.value('summary_chart','')
jx.dom.append('summary_chart',context) jx.dom.append('summary_chart',context)
var conf = {width:50,height:50} var conf = {width:50,height:50}
@ -539,7 +550,20 @@ monitor.folders.render.summary = function (data) {
var grid = $('#gridfolders').jsGrid(options) ; var grid = $('#gridfolders').jsGrid(options) ;
} }
monitor.menu = {}
monitor.menu.event = {}
monitor.menu.event.toggle = function () {
var dom = jx.dom.get.instance('menuframe')
var value = dom.style.marginLeft.trim()
if (value==0 || value == "0px" || value == "") {
var width = -$(dom).width() - 10
$('#menuframe').animate({marginLeft:"-12%"})
} else {
$('#menuframe').animate({marginLeft:"0"})
}
}
/** /**
* Socket handler, check for learning status * Socket handler, check for learning status
*/ */

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

@ -26,61 +26,76 @@
}) })
</script> </script>
<body> <body class="">
<div class="border-bottom caption" style="height:42px"> <div class="border-bottom caption" style="height:42px">
<div class="">{{title}}</div> <div class="">{{title}}</div>
<div class="small" style="margin:4px">The Phi Technology LLC</div> <div class="small" style="margin:4px">The Phi Technology LLC</div>
</div> </div>
<div class="left small border-right" style="width:12%; height:60%"> <i class="fa fa-reorder default left action" onclick="monitor.menu.event.toggle()"></i>
<div id="menu" class="menu"></div> <div id="menuframe" class="left small " style="width:10%; height:90%">
<div id="menu" class="menu"></div>
</div> </div>
<div class="left info "> <div class="left info">
<div class="" style="text-transform:capitalize; "> <div class="" style="height:28px; ">
<div class="left bold">Monitoring <div class="left bold">Monitoring
<span id="latest_processes_label" class=""></span> <span id="latest_processes_label" class="default bold"></span>
</div> </div>
</div> </div>
<div class = "border-right" style="padding:2px; margin:4px; height:170px"> <div class = "shadow simple-gradient border-right" style="padding:2px; margin:4px; height:170px">
<div id="latest_processes" class="grid" ></div> <div id="latest_processes" class="grid" ></div>
</div> </div>
<div style="height:22px; padding:2px" class="small"> <div style="height:22px; padding:2px" class="small">
<div id="latest_process_pager" align="center"></div> <div id="latest_process_pager" align="center"></div>
</div> </div>
<div id="process_summary" class="grid border-right" style="margin:4px"> <div id="process_summary" class=" grid border-right" style="margin:4px">
<div class="bold" style="margin:4px; padding:4px">Global Process Summary By Status</div> <div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
<div class="bold" >Application Summary By Status</div>
<div id="app-summary-date" class="small"></div>
</div>
<div class="" style="height:120px; margin:4px"> <div class="simple-gradient shadow" style="padding:2px; height:125px; margin:4px; margin-top:10px">
<div id="summary_chart" class="right"></div> <div class="left small width-half" style="margin-top:10px">
<div class="border-right" style="padding:4px" title="Running"><span id="total-running" class="default">0</span> <i class="fa fa-check right" style="margin:4px"></i></div>
<div class="border-right" title="Crash" style="padding:4px; margin-top:2px"><span id="total-crash" class="default">0</span> <i class="fa fa-times right" style="margin:4px"></i></div>
<div class="border-right" title="Idle" style="padding:4px; margin-top:2px"><span id="total-idle" class="default">0</span> <i class="fa fa-ellipsis-h right" style="margin:4px"></i></div>
<div class="border-top" style="padding:4px; margin-top:2px"> <span id="total-apps" class="default">0</span> <span class="right">Applications</span></div>
</div>
<div id="summary_chart" class="width-half right"></div>
</div> </div>
<div id="summary_details" class="right"></div> <div id="summary_details" class="right"></div>
</div> </div>
<div class="grid border-right" style="margin:4px; margin-top:10px"> <div class="grid border-right" style="margin:4px; margin-top:10px;">
<div class="bold" style="margin:4px; padding:4px">Global Process Summary By Groups</div> <div style="height:28px">
<div class="width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div> <div class="bold" style="margin:4px; padding:4px">Application Summary By Groups</div>
</div>
<div class="shadow simple-gradient width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></div>
</div> </div>
</div> </div>
<div class="left info"> <div class="left info">
<div class="" style="height:28px">
<div class="bold" style="height:28px">CPU & Memory Usage Trend for <span id="trend_info" class=""></span> <div class="small bold">CPU & Memory Usage Trend for <span id="trend_info" class="default bold"></span></div>
<div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div> <div class="smal" style="float:none"><div id="has_anomaly" class="small"><i class="fa fa-warning" ></i> Anomaly Detected</div></div>
</div> </div>
<div style="height:270px; margin-top:10px"> <div class="shadow simple-gradient" style="height:270px; margin-top:4px">
<div id="trends_chart" class="small grid" style="height:250px"></div> <div id="trends_chart" class="small grid" style="height:250px"></div>
</div> </div>
<div id="sandbox" class="border-top" style="padding:4px;"> <div id="sandbox" class="border-top" style="padding:4px; margin-top:10px">
<div style="height:48px"> <div style="height:28px">
<b>Python Virtual Environment Analysis</b> <div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div>
<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 class="small">Last Lookup <span id="sandbox_date"></span></div>
</div> </div>
<div class="" style="margin-top:10px; height:135px"> <div class="shadow " style="margin-top:10px; height:135px">
<div id="sandbox_status" class=""> <div id="sandbox_status" class="">
</div> </div>
<div id="sandbox_pager"></div> <div id="sandbox_pager"></div>
@ -88,19 +103,21 @@
</div> </div>
<div style="margin-top:10px"> <div style="margin-top:10px">
<div id="folder_summary"> <div id="folder_summary">
<div class=""> <div style="height:28px">
<div class="bold">Smart Folder Analysis/Monitoring</div> <div class="bold">Folder Analysis/Monitoring</div>
<div class="small">Powered By Machine Learning</div> <div class="small">Powered By Machine Learning</div>
</div> </div>
<div class=" border" style="margin-top:4px; padding:2px; height:34px"> <div class="shadow">
<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i> <div class=" border-top" style="margin-top:4px; padding:2px; height:34px">
<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-search left" style="margin:4px; padding:4px; ; color:gray;"></i>
<i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i> <input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/>
</div> <i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
<div style="margin-top:10px; height:150px"> </div>
<div id="gridfolders"></div> <div style="margin-top:10px; height:150px">
<div id="folderspager"></div> <div id="gridfolders"></div>
<div id="folderspager"></div>
</div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save