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

93
src/api/index.py
Unescape View File

@ -1,7 +1,7 @@
""" """
This is a RESTful interface implemented using Flask micro framework. This is a RESTful interface implemented using Flask micro framework.
The API is driven by configuration that is organized in terms of the monitoring classes The API is driven by configuration that is organized in terms of the monitoring classes
The API is both restful and websocket/socketio enabled. The API is both restful and websocket/socketio enabled.
We designed the classes to be reusable (and powered by labels): We designed the classes to be reusable (and powered by labels):
@ -47,7 +47,7 @@ factory = DataSourceFactory()
atexit.register(ThreadManager.stop) atexit.register(ThreadManager.stop)
@app.route('/get/<id>') @app.route('/get/<id>')
def procs(id): def procs(id):
try: try:
gReader = factory.instance(type=class_read,args=p) gReader = factory.instance(type=class_read,args=p)
data = gReader.read() data = gReader.read()
@ -67,14 +67,14 @@ def procs(id):
# Let us determine if this is a normal operation or not # Let us determine if this is a normal operation or not
# We will update the status of the information ... # We will update the status of the information ...
# #
for row in r[label] : for row in r[label] :
index = r[label].index(row) index = r[label].index(row)
if row['label'] in learn: if row['label'] in learn:
id = row['label'] id = row['label']
px = ahandler.predict([row],learn[id]) px = ahandler.predict([row],learn[id])
if px : if px :
# row['anomaly'] = px[1]==1 # row['anomaly'] = px[1]==1
print "" print ""
print label,' *** ',index print label,' *** ',index
@ -83,12 +83,12 @@ def procs(id):
# #
# @TODO: # @TODO:
# Compile a report here that will be sent to the mailing list # Compile a report here that will be sent to the mailing list
# #
except Exception, e: except Exception, e:
print e print e
r = [] r = []
return json.dumps(r) return json.dumps(r)
""" """
@ -98,7 +98,7 @@ def procs(id):
@app.route('/sandbox') @app.route('/sandbox')
def sandbox(): def sandbox():
global CONFIG global CONFIG
if 'sandbox' in CONFIG: #CONFIG['monitor']: if 'sandbox' in CONFIG: #CONFIG['monitor']:
#handler = HANDLERS['sandbox']['class'] #handler = HANDLERS['sandbox']['class']
#conf = HANDLERS['sandbox']['config'] #conf = HANDLERS['sandbox']['config']
@ -106,7 +106,7 @@ def sandbox():
# p = Factory.instance('sandbox',CONFIG) # p = Factory.instance('sandbox',CONFIG)
handler = monitor.Sandbox() handler = monitor.Sandbox()
conf = CONFIG['sandbox'] conf = CONFIG['sandbox']
for id in conf: for id in conf:
try: try:
handler.init(conf[id]) handler.init(conf[id])
@ -114,27 +114,27 @@ def sandbox():
except Exception,e: except Exception,e:
pass pass
else: else:
r = [] r = []
return json.dumps(r) return json.dumps(r)
@app.route('/trends') @app.route('/trends')
def trends (): def trends ():
id = request.args.get('id') id = request.args.get('id')
app = request.args.get('app').strip() app = request.args.get('app').strip()
p = CONFIG['store']['args'] p = CONFIG['store']['args']
class_read = CONFIG['store']['class']['read'] class_read = CONFIG['store']['class']['read']
gReader = factory.instance(type=class_read,args=p) gReader = factory.instance(type=class_read,args=p)
r = gReader.read() r = gReader.read()
if id in r: if id in r:
r = r[id] #--matrix r = r[id] #--matrix
series = [] series = []
for row in r: for row in r:
series += [item for item in row if str(item['label'])== app] series += [item for item in row if str(item['label'])== app]
if len(series) > 12 : if len(series) > 12 :
beg = len(series) - 8 beg = len(series) - 8
@ -162,17 +162,18 @@ def dashboard():
This function is designed to trigger learning for anomaly detection This function is designed to trigger learning for anomaly detection
@TODO: forward this to a socket i.e non-blocking socket @TODO: forward this to a socket i.e non-blocking socket
""" """
@app.route('/anomalies/get') @app.route('/anomalies/get')
def learn(): def learn():
global CONFIG global CONFIG
p = CONFIG['store']['args'] p = CONFIG['store']['args']
class_read = CONFIG['store']['class']['read'] class_read = CONFIG['store']['class']['read']
gReader = factory.instance(type=class_read,args=p) gReader = factory.instance(type=class_read,args=p)
d = gReader.read() d = gReader.read()
if 'learn' in d : if 'learn' in d :
info = d['learn'] info = d['learn']
del d['learn'] del d['learn']
else : else :
info = [] info = []
@ -182,44 +183,44 @@ def learn():
d = d[id] d = d[id]
params = {} params = {}
for item in info: for item in info:
label = item['label'] label = item['label']
params[label] = item params[label] = item
#apps = list(set(ML.Extract(['label'],d))) #apps = list(set(ML.Extract(['label'],d)))
r = [] r = []
if params : if params :
# #
# If we have parameters available # If we have parameters available
p = AnomalyDetection() p = AnomalyDetection()
apps = params.keys() apps = params.keys()
for name in apps : for name in apps :
if name not in params: if name not in params:
continue continue
_info = params[name] _info = params[name]
try: try:
xo = ML.Filter('label',name,d) xo = ML.Filter('label',name,d)
except Exception,e: except Exception,e:
xo = [] xo = []
#print name,e #print name,e
if len(xo) == 0: if len(xo) == 0:
continue continue
xo = [xo[ len(xo) -1]] xo = [xo[ len(xo) -1]]
value = p.predict(xo,_info)[0] value = p.predict(xo,_info)[0]
if len(value): if len(value):
report = dict(_info,**{'predicton':value}) report = dict(_info,**{'predicton':value})
r.append(report) r.append(report)
#print app,value #print app,value
#if value is not None: #if value is not None:
# r.append(value) # r.append(value)
return json.dumps(r) return json.dumps(r)
""" """
This function returns anomalies for a given context or group of processes This function returns anomalies for a given context or group of processes
@ -229,12 +230,12 @@ def learn():
def anomalies_status(): def anomalies_status():
global CONFIG global CONFIG
p = CONFIG['store']['args'] p = CONFIG['store']['args']
class_read = CONFIG['store']['class']['read'] class_read = CONFIG['store']['class']['read']
gReader = factory.instance(type=class_read,args=p) gReader = factory.instance(type=class_read,args=p)
d = gReader.read() d = gReader.read()
if 'learn' in d : if 'learn' in d :
info = d['learn'] info = d['learn']
del d['learn'] del d['learn']
else : else :
info = [] info = []
@ -248,7 +249,7 @@ def anomalies_status():
def get_folders(): def get_folders():
global CONFIG global CONFIG
p = CONFIG['store']['args'] p = CONFIG['store']['args']
class_read = CONFIG['store']['class']['read'] class_read = CONFIG['store']['class']['read']
gReader = factory.instance(type=class_read,args=p) gReader = factory.instance(type=class_read,args=p)
d = gReader.read() d = gReader.read()
if 'folders' in d: if 'folders' in d:
@ -256,7 +257,7 @@ def get_folders():
hosts = set([row[0]['id'] for row in d]) hosts = set([row[0]['id'] for row in d])
m = {} m = {}
for id in hosts: for id in hosts:
for row in d: for row in d:
if id == row[0]['id'] : if id == row[0]['id'] :
m[id] = row m[id] = row
d = m.values() d = m.values()
@ -264,11 +265,11 @@ def get_folders():
print row[0]['id'] print row[0]['id']
# index = len(d) - 1 # index = len(d) - 1
# d = d[index] # d = d[index]
# m = {} # m = {}
# for row in d : # for row in d :
# key = row.keys()[0] # key = row.keys()[0]
# row = row[key] # row = row[key]
@ -281,15 +282,13 @@ def get_folders():
# d = r # d = r
else: else:
d = [] d = []
return json.dumps(d) return json.dumps(d)
if __name__== '__main__': if __name__== '__main__':
# ThreadManager.start(CONFIG) # ThreadManager.start(CONFIG)
if 'port' not in SYS_ARGS.PARAMS : if 'port' not in SYS_ARGS.PARAMS :
SYS_ARGS.PARAMS['port'] = 8484 SYS_ARGS.PARAMS['port'] = 8484
PORT = int(SYS_ARGS.PARAMS['port']) PORT = int(SYS_ARGS.PARAMS['port'])
app.run(host='0.0.0.0' ,port=PORT,debug=True,threaded=True) app.run(host='0.0.0.0' ,port=PORT,debug=True,threaded=True)

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

@ -3,7 +3,7 @@ body, .default {
font-family:sans-serif; font-family:sans-serif;
font-weight:lighter; font-weight:lighter;
padding:10px; padding:10px;
} }
.jsgrid-grid-header{ .jsgrid-grid-header{
background: #f9f9f9; background: #f9f9f9;
@ -40,7 +40,7 @@ body, .default {
height:30px; height:30px;
font-family:sans-serif; font-family:sans-serif;
font-weight:lighter; font-weight:lighter;
} }
.button { .button {
padding:8px; padding:8px;
@ -53,7 +53,7 @@ body, .default {
.button:hover{ .button:hover{
background-color:#4682B4 ; background-color:#4682B4 ;
color:#ffffff; color:#ffffff;
} }
.no-border{ border:1px solid transparent} .no-border{ border:1px solid transparent}
.border { border:1px solid #CAD5E0} .border { border:1px solid #CAD5E0}
@ -64,7 +64,7 @@ body, .default {
.grid { .grid {
font-family:sans-serif; font-family:sans-serif;
font-weight:lighter; font-weight:lighter;
margin:4px; margin:4px;
padding:4px; padding:4px;
} }
@ -78,7 +78,7 @@ body, .default {
.grid .fa-times {color:maroon; } .grid .fa-times {color:maroon; }
.menu { .menu {
margin:4px; margin:5px;
padding:4px; padding:4px;
} }
.menu .fa-chevron-right {color:transparent; margin:4px; } .menu .fa-chevron-right {color:transparent; margin:4px; }
@ -104,11 +104,11 @@ input[type=text]:focus{
.padding-2x{padding:4px;} .padding-2x{padding:4px;}
.margin-2x {margin:4px;} .margin-2x {margin:4px;}
.info { .info {
margin:4px; margin:4px;
width:43%; width:43%;
} }
.height-quarter{height:24%;} .height-quarter{height:24%;}
.height-half{height:47%} .height-half{height:47%}
@ -121,7 +121,7 @@ input[type=text]:focus{
.fa-warning, .warning{color:orange} .fa-warning, .warning{color:orange}
.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:1px; margin:1px; border:1px solid transparent}
.action:hover { border-bottom-color:#4682B4} .action:hover { border-bottom-color:#4682B4}
.shadow{box-shadow: 7px 7px 5px #888888;} .shadow{box-shadow: 7px 7px 5px #888888;}
.gradient { .gradient {
@ -142,5 +142,214 @@ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0,
background-image: -webkit-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%); background-image: -webkit-linear-gradient(top, #CAD5E0 0%, #F3F3F3 40%);
background-image: linear-gradient(to bottom, #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) {
}

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

@ -3,38 +3,38 @@ var monitor = {}
monitor.utils = {} monitor.utils = {}
monitor.utils.get = {} monitor.utils.get = {}
monitor.utils.get.time = function (item) { monitor.utils.get.time = function (item) {
// date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, hour + ':' + item.minute]).join(' ') // date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, hour + ':' + item.minute]).join(' ')
var hour = item.hour > 9 ? item.hour : ('0' + item.hour) var hour = item.hour > 9 ? item.hour : ('0' + item.hour)
if (hour > 12) { if (hour > 12) {
var units = 'PM' var units = 'PM'
} else { } else {
var units = 'AM' var units = 'AM'
} }
return ([hour+':'+item.minute,units]).join(' ') return ([hour+':'+item.minute,units]).join(' ')
} }
monitor.utils.get.dateTime = function (item) { monitor.utils.get.dateTime = function (item) {
var time = monitor.utils.get.time(item) var time = monitor.utils.get.time(item)
return ([item.day+'-'+MONTHS[item.month]+'-'+item.year,time]).join(' ') return ([item.day+'-'+MONTHS[item.month]+'-'+item.year,time]).join(' ')
} }
monitor.processes = {} monitor.processes = {}
monitor.processes.fetch = function(){ monitor.processes.fetch = function(){
var httpclient = HttpClient.instance() var httpclient = HttpClient.instance()
httpclient.get(HTTP_CONTEXT+'/get/processes',monitor.processes.init); httpclient.get(HTTP_CONTEXT+'/get/processes',monitor.processes.init);
} }
monitor.processes.init = function (x) { monitor.processes.init = function (x) {
var r = JSON.parse(x.responseText) var r = JSON.parse(x.responseText)
monitor.processes.summary.init(r) monitor.processes.summary.init(r)
var keys = jx.utils.keys(r) var keys = jx.utils.keys(r)
jx.dom.set.value('menu','') jx.dom.set.value('menu','')
jx.utils.patterns.visitor(keys,function(label){ jx.utils.patterns.visitor(keys,function(label){
var div = jx.dom.get.instance('DIV') var div = jx.dom.get.instance('DIV')
var frame= jx.dom.get.instance('DIV') var frame= jx.dom.get.instance('DIV')
var i = jx.dom.get.instance('I') var i = jx.dom.get.instance('I')
i.className = 'fa fa-chevron-right left' i.className = 'fa fa-chevron-right left'
div.innerHTML = label div.innerHTML = label
frame.data = r[label] frame.data = r[label]
frame.label = label frame.label = label
@ -49,13 +49,13 @@ monitor.processes.init = function (x) {
jx.dom.append('menu',frame) jx.dom.append('menu',frame)
}) })
// //
// Auto start the first item in the menu // Auto start the first item in the menu
// This is designed not to let the user wander or wonder what is going on // This is designed not to let the user wander or wonder what is going on
// //
var nodes = jx.dom.get.children('menu') var nodes = jx.dom.get.children('menu')
if (nodes.length > 0) { if (nodes.length > 0) {
nodes[0].click() nodes[0].click()
} else { } else {
// //
// We should hide the panes for this // We should hide the panes for this
// //
@ -73,19 +73,19 @@ monitor.processes.init = function (x) {
monitor.processes.render = function(label,data) { monitor.processes.render = function(label,data) {
data = jx.utils.patterns.visitor(data,function(row){ data = jx.utils.patterns.visitor(data,function(row){
var status = {"idle":'<i class="fa fa-ellipsis-h" title="IDLE"></i>',"running":'<i class="fa fa-check" title="RUNNING"></i>',"crash":'<i class="fa fa-times" title="CRASHED"></i>'} var status = {"idle":'<i class="fa fa-ellipsis-h" title="IDLE"></i>',"running":'<i class="fa fa-check" title="RUNNING"></i>',"crash":'<i class="fa fa-times" title="CRASHED"></i>'}
if (!row.status.match(/class/)) { if (!row.status.match(/class/)) {
row.status_id = row.status row.status_id = row.status
row.status = status[row.status] row.status = status[row.status]
} }
return row return row
}) })
jx.dom.set.value('latest_processes','') ; jx.dom.set.value('latest_processes','') ;
jx.dom.set.value('latest_processes_label', label) jx.dom.set.value('latest_processes_label', label)
var options = { var options = {
width: $('#latest_processes').width(), height:'auto' width: "90%", height:'auto', autoload:true
} }
options.paging = true options.paging = true
options.pageSize = 4 options.pageSize = 4
@ -95,10 +95,10 @@ monitor.processes.render = function(label,data) {
options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}" options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
options.pagePrevText= '<i class="fa fa-chevron-left"></i>' options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>" options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
options.data = data options.data = data
options.rowClass = function (item, index,evt) { options.rowClass = function (item, index,evt) {
return 'small' return 'small'
} }
options.rowClick = function(args){ options.rowClick = function(args){
@ -106,19 +106,19 @@ monitor.processes.render = function(label,data) {
var id = jx.dom.get.value('latest_processes_label') var id = jx.dom.get.value('latest_processes_label')
var app = item.label var app = item.label
monitor.processes.trend.init(id, app) monitor.processes.trend.init(id, app)
if (item.anomaly == true) { if (item.anomaly == true) {
jx.dom.show('has_anomaly') jx.dom.show('has_anomaly')
} else { } else {
jx.dom.hide('has_anomaly') jx.dom.hide('has_anomaly')
} }
// var hour = item.hour < 10? ('0'+item.hour): item.hour // var hour = item.hour < 10? ('0'+item.hour): item.hour
// date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, hour + ':' + item.minute]).join(' ') // date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, hour + ':' + item.minute]).join(' ')
jx.dom.set.value('node_last_lookup',monitor.utils.get.dateTime(item)) jx.dom.set.value('node_last_lookup',monitor.utils.get.dateTime(item))
} }
options.autoload = true options.autoload = true
options.fields = [ options.fields = [
{ name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"}, { name: 'label', type: 'text', title: "Process", headercss: "small bold", css: "small"},
@ -141,7 +141,7 @@ monitor.processes.trend.init = function (label,app) {
var logs = JSON.parse(x.responseText) var logs = JSON.parse(x.responseText)
var dom = jx.dom.get.instance('trend_info'); var dom = jx.dom.get.instance('trend_info');
dom.logs = logs dom.logs = logs
jx.dom.set.value('trend_info',app.trim()) jx.dom.set.value('trend_info',app.trim())
// jx.dom.set.attribute(label,'logs',logs) // jx.dom.set.attribute(label,'logs',logs)
monitor.processes.trend.render(logs,null,app) monitor.processes.trend.render(logs,null,app)
}) })
@ -151,7 +151,7 @@ monitor.processes.trend.render = function (logs, key,label) {
// key = 'memory_usage' // key = 'memory_usage'
// } // }
// if (logs == null || label == null){ // if (logs == null || label == null){
// logs = jx.dom.get.instance('trend_info').logs // logs = jx.dom.get.instance('trend_info').logs
// label= jx.dom.get.value('trend_info') ; // label= jx.dom.get.value('trend_info') ;
// } // }
@ -165,21 +165,21 @@ monitor.processes.trend.render = function (logs, key,label) {
conf.data = {} conf.data = {}
conf.options = { legend: { position: 'bottom' } } conf.options = { legend: { position: 'bottom' } }
conf.options.scales = {} conf.options.scales = {}
conf.options.scales.yAxes = [ conf.options.scales.yAxes = [
{id:'0',scaleLabel:{display:true,labelString:'CPU & MEMORY %'},ticks:{min:0,max:100,beginAtZero:true},gridLines: {display:false}} {id:'0',scaleLabel:{display:true,labelString:'CPU & MEMORY %'},ticks:{min:0,max:100,beginAtZero:true},gridLines: {display:false}}
// {id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}} // {id:'1',position:'right',scaleLabel:{display:true,labelString:'PROCESS COUNT'},ticks:{min:0,stepSize:1,beginAtZero:true},gridLines: {display:false}}
] ]
conf.options.scales.xAxes = [ conf.options.scales.xAxes = [
{ {
gridLines: {display:false}, gridLines: {display:false},
time: { time: {
format:'HH:mm' format:'HH:mm'
} }
} }
] ]
conf.data.datasets = [ ] conf.data.datasets = [ ]
var x_axis = [] var x_axis = []
@ -199,26 +199,26 @@ monitor.processes.trend.render = function (logs, key,label) {
if (_x[x] == null ){//||(_x[x] == null && _y[y] == null)) { if (_x[x] == null ){//||(_x[x] == null && _y[y] == null)) {
_x[x] = 1 _x[x] = 1
// _y[y] = 1 // _y[y] = 1
x_axis.push(x) x_axis.push(x)
cpu.data.push({ x: x, y: item.cpu_usage }) cpu.data.push({ x: x, y: item.cpu_usage })
mem.data.push({x:x,y:item.memory_usage}) mem.data.push({x:x,y:item.memory_usage})
// proc.data.push({x:x,y:item.proc_count}) // proc.data.push({x:x,y:item.proc_count})
// return {x:x,y:y} // return {x:x,y:y}
} }
}) })
var item = logs[logs.length - 1] var item = logs[logs.length - 1]
jx.dom.set.value('trend_last_lookup',monitor.utils.get.dateTime(item)) jx.dom.set.value('trend_last_lookup',monitor.utils.get.dateTime(item))
conf.data.datasets = [cpu,mem] conf.data.datasets = [cpu,mem]
x_axis = jx.utils.unique(x_axis) x_axis = jx.utils.unique(x_axis)
conf.data.labels = x_axis conf.data.labels = x_axis
// console.log(conf) // console.log(conf)
jx.dom.append('trends_chart',context) jx.dom.append('trends_chart',context)
var chart = new Chart(context,conf) var chart = new Chart(context,conf)
} }
monitor.processes.summary = {} monitor.processes.summary = {}
@ -236,10 +236,10 @@ monitor.processes.summary.init = function(logs){
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) { if (date == null) {
// date = new Date(item.year,item.month-1,item.day,item.hour,item.minute) // date = new Date(item.year,item.month-1,item.day,item.hour,item.minute)
// date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, item.hour + ':' + item.minute]).join(' ') // date = ([item.day + '-' + MONTHS[item.month] + '-' + item.year, item.hour + ':' + item.minute]).join(' ')
date = monitor.utils.get.dateTime(item) date = monitor.utils.get.dateTime(item)
@ -252,7 +252,7 @@ monitor.processes.summary.init = function(logs){
xc += 1 xc += 1
} }
}) })
} }
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')
@ -261,22 +261,22 @@ monitor.processes.summary.init = function(logs){
jx.dom.set.value('total-crash', xc) jx.dom.set.value('total-crash', xc)
jx.dom.set.value('total-idle', xi) jx.dom.set.value('total-idle', xi)
// jx.dom.set.value('total-apps', xr + xi + xc) // jx.dom.set.value('total-apps', xr + xi + xc)
jx.dom.set.value('app-summary-date', date) 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)
$("#doughnut").attr('width', 50) $("#doughnut").attr('width', 50)
$("#doughnut").attr('height', 50) $("#doughnut").attr('height', 50)
var conf = {}//width:100,height:100}//width:'auto',height:$('#process_summary').height} var conf = {}//width:100,height:100}//width:'auto',height:$('#process_summary').height}
conf.type = 'doughnut' conf.type = 'doughnut'
conf.responsive = true conf.responsive = true
conf.data = data conf.data = data
conf.options = { legend: { position: 'right' }, repsonsive: true } conf.options = { legend: { position: 'right' }, repsonsive: true }
var _chart = new Chart(context,conf) var _chart = new Chart(context,conf)
$('#summary_chart').click(function (evt) { $('#summary_chart').click(function (evt) {
console.log(_chart) console.log(_chart)
console.log($(_chart)) console.log($(_chart))
@ -286,17 +286,17 @@ monitor.processes.summary.init = function(logs){
jx.dom.set.value('summary_ranking','') jx.dom.set.value('summary_ranking','')
context = jx.dom.get.instance('CANVAS') context = jx.dom.get.instance('CANVAS')
jx.dom.append('summary_ranking',context) jx.dom.append('summary_ranking',context)
conf = { type: 'bar', responsive: true } conf = { type: 'bar', responsive: true }
conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }} conf.options={scales:{xAxes:[{gridLines: {display:false}}],yAxes:[{gridLines: {display:false},scaleLabel:{display:true,labelString:'PROCESS COUNTS'} }] }}
conf.options.legend ={position:'right'} conf.options.legend ={position:'right'}
/* /*
conf.data = {labels:['Running','Idle','Crash']} conf.data = {labels:['Running','Idle','Crash']}
var labels = jx.utils.keys(series) var labels = jx.utils.keys(series)
var i = 0 var i = 0
conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){ conf.data.datasets = jx.utils.patterns.visitor(labels,function(id){
series[id].backgroundColor = COLORS[i++] series[id].backgroundColor = COLORS[i++]
return series[id]}) return series[id]})
chart = new Chart(context,conf); chart = new Chart(context,conf);
@ -305,7 +305,7 @@ monitor.processes.summary.init = function(logs){
conf.data = { labels: labels, backgroundColor:colors } conf.data = { labels: labels, backgroundColor:colors }
var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = [] var xr = [], xi = [], xc = [],xr_bg = [],xc_bg = [],xi_bg = []
jx.utils.patterns.visitor(labels, function (id) { jx.utils.patterns.visitor(labels, function (id) {
var rows = logs[id] var rows = logs[id]
var index = xr.length var index = xr.length
xr_bg[index] = RUNNING_COLOR xr_bg[index] = RUNNING_COLOR
@ -316,25 +316,25 @@ monitor.processes.summary.init = function(logs){
xc[index] = 0 xc[index] = 0
xi[index] = 0 xi[index] = 0
} }
jx.utils.patterns.visitor(logs[id], function (row) { jx.utils.patterns.visitor(logs[id], function (row) {
if (row.status.match(/running/i)) { if (row.status.match(/running/i)) {
xr[index] += 1 xr[index] += 1
} else if (row.status.match(/idle/i)) { } else if (row.status.match(/idle/i)) {
xi[index] += 1 xi[index] += 1
} else { } else {
xc[index] += 1 xc[index] += 1
} }
}) })
}) })
conf.data.datasets = [{ label: 'Running', data:xr,backgroundColor:xr_bg},{label:'Crash',data:xc,backgroundColor:xc_bg},{label:'Idle',data:xi,backgroundColor:xi_bg} ] conf.data.datasets = [{ label: 'Running', data:xr,backgroundColor:xr_bg},{label:'Crash',data:xc,backgroundColor:xc_bg},{label:'Idle',data:xi,backgroundColor:xi_bg} ]
chart = new Chart(context, conf) chart = new Chart(context, conf)
} }
monitor.sandbox = {} monitor.sandbox = {}
@ -342,9 +342,9 @@ monitor.sandbox.init = function () {
jx.dom.hide('inspect_sandbox') jx.dom.hide('inspect_sandbox')
var httpclient = HttpClient.instance() var httpclient = HttpClient.instance()
httpclient.get(HTTP_CONTEXT+'/sandbox', function (x) { httpclient.get(HTTP_CONTEXT+'/sandbox', function (x) {
var r = JSON.parse(x.responseText) var r = JSON.parse(x.responseText)
if (r.length > 0) { if (r.length > 0) {
jx.dom.show('sandbox') jx.dom.show('sandbox')
monitor.sandbox.render(r); monitor.sandbox.render(r);
@ -355,19 +355,19 @@ monitor.sandbox.init = function () {
} }
monitor.sandbox.render = function (logs) { monitor.sandbox.render = function (logs) {
// months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' } // months = { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }
// var d = ([logs[0].day, '-', MONTHS[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('') // var d = ([logs[0].day, '-', MONTHS[logs[0].month], '-', logs[0].year, ' ', logs[0].hour, ':', logs[0].minute]).join('')
var item = logs[logs.length -1] var item = logs[logs.length -1]
jx.dom.set.value('sandbox_date', monitor.utils.get.dateTime(item)) jx.dom.set.value('sandbox_date', monitor.utils.get.dateTime(item))
var options = { width: $('#sandbox_status').width()-8, height: 'auto' } var options = { width: $('#sandbox_status').width()-8, height: 'auto' }
options.data = jx.utils.patterns.visitor(logs, function (item) { options.data = jx.utils.patterns.visitor(logs, function (item) {
if (item.value == 100) { if (item.value == 100) {
item.status = '<i class="fa fa-check" style="color:green"></i>' item.status = '<i class="fa fa-check" style="color:green"></i>'
} else { } else {
item.status = '<i class="fa fa-download" style="color:black"></i>' item.status = '<i class="fa fa-download" style="color:black"></i>'
} }
return item return item
}) })
options.paging = true options.paging = true
options.pageSize = 4 options.pageSize = 4
@ -378,7 +378,7 @@ monitor.sandbox.render = function (logs) {
options.pagePrevText = '<i class="fa fa-chevron-left"></i>' options.pagePrevText = '<i class="fa fa-chevron-left"></i>'
options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>"; options.pageNextText = "<i class='fa fa-chevron-right small' title='Next'> </i>";
options.rowClass = function (item) { options.rowClass = function (item) {
if (item.value < 70) { if (item.value < 70) {
return 'bad' return 'bad'
} else if (item.value < 100) { } else if (item.value < 100) {
@ -395,7 +395,7 @@ monitor.sandbox.render = function (logs) {
dom.type = 'hidden' dom.type = 'hidden'
dom.name = 'missing' dom.name = 'missing'
dom.value = JSON.stringify(item.missing) dom.value = JSON.stringify(item.missing)
form.action = HTTP_CONTEXT+'/download' form.action = HTTP_CONTEXT+'/download'
form.method = 'POST' form.method = 'POST'
form.appendChild(dom) form.appendChild(dom)
@ -407,11 +407,11 @@ monitor.sandbox.render = function (logs) {
{name:"status",title:"",width:20}, {name:"status",title:"",width:20},
{ name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' }, { name: 'label',title:'Virtual Environment Label',type:'text',css:'small',headercss:'small bold' },
{ name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' } { name: 'value', title:'Completeness %',type: 'number', css: 'small', headercss: 'small bold' }
] ]
var grid = $('#sandbox_status').jsGrid(options) var grid = $('#sandbox_status').jsGrid(options)
jx.dom.show('inspect_sandbox') jx.dom.show('inspect_sandbox')
} }
@ -427,7 +427,7 @@ monitor.folders.init = function () {
// item.id = id // item.id = id
data = data.concat(item) data = data.concat(item)
} }
monitor.folders.render.init(data) monitor.folders.render.init(data)
}) })
} }
@ -436,20 +436,20 @@ monitor.folders.search.reset = function () {
jx.dom.set.value('folder_search', '') jx.dom.set.value('folder_search', '')
var data = jx.dom.get.attribute('folder_search', 'data') var data = jx.dom.get.attribute('folder_search', 'data')
monitor.folders.render.summary(data) monitor.folders.render.summary(data)
} }
monitor.folders.search.init = function(){ monitor.folders.search.init = function(){
var term = jx.dom.get.value('folder_search') var term = jx.dom.get.value('folder_search')
var data = jx.dom.get.attribute('folder_search', 'data') var data = jx.dom.get.attribute('folder_search', 'data')
term = term.replace(/ /g,'') term = term.replace(/ /g,'')
if (term.length == 0) { if (term.length == 0) {
monitor.folders.render.summary(data) monitor.folders.render.summary(data)
} else if (term.length > 0) { } else if (term.length > 0) {
data = jx.utils.patterns.visitor(data, function (row) { data = jx.utils.patterns.visitor(data, function (row) {
pattern = "(.*" + term + ".*)" pattern = "(.*" + term + ".*)"
if (row.id.match(pattern)) { if (row.id.match(pattern)) {
return row return row
} }
@ -473,7 +473,7 @@ monitor.folders.show.grid = function () {
$('#folder_plan').slideUp(function () { $('#folder_plan').slideUp(function () {
$('#folder_summary').slideDown() $('#folder_summary').slideDown()
}) })
} }
/*** /***
* This function is designed to establish a folder clean up strategy i.e : * This function is designed to establish a folder clean up strategy i.e :
@ -491,7 +491,7 @@ monitor.folders.render.details = function (folder,data) {
var xy = r[i] var xy = r[i]
var mode = jx.math.mode(jx.utils.vector('x', xy)) var mode = jx.math.mode(jx.utils.vector('x', xy))
var yvalues = jx.utils.patterns.visitor(xy, function (row) { var yvalues = jx.utils.patterns.visitor(xy, function (row) {
if (row.x == mode) { if (row.x == mode) {
return row.y return row.y
} }
}) })
@ -514,7 +514,7 @@ monitor.folders.render.details = function (folder,data) {
prefix = 'size' prefix = 'size'
var mean = jx.math.sum(yvalues) var mean = jx.math.sum(yvalues)
var max = 0// (mean + (1.5 * sd)) var max = 0// (mean + (1.5 * sd))
if (mean > 1000) { if (mean > 1000) {
divide_by = 1000 divide_by = 1000
units = 'GB' units = 'GB'
} else { } else {
@ -541,15 +541,15 @@ monitor.folders.render.details = function (folder,data) {
monitor.folders.show.plan() monitor.folders.show.plan()
} }
jx.dom.set.value('folder_name', folder) jx.dom.set.value('folder_name', folder)
} }
monitor.folders.render.summary = function (data) { monitor.folders.render.summary = function (data) {
jx.dom.set.value('gridfolders', '') jx.dom.set.value('gridfolders', '')
var options = { var options = {
width: $('#gfolderframe').width()-8, height:'auto' width: $('#gfolderframe').width()-8, height:'auto'
@ -562,15 +562,15 @@ monitor.folders.render.summary = function (data) {
options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}" options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"
options.pagePrevText= '<i class="fa fa-chevron-left"></i>' options.pagePrevText= '<i class="fa fa-chevron-left"></i>'
options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>" options.pageNextText= "<i class='fa fa-chevron-right small' title='Next'> </i>"
options.data = data options.data = data
options.rowClass = function (item, index,evt) { options.rowClass = function (item, index,evt) {
return 'small' return 'small'
} }
options.rowClick = function(args){ options.rowClick = function(args){
// var item = args.item // var item = args.item
// age = jx.utils.patterns.visitor(item.details.age, function (row) { // age = jx.utils.patterns.visitor(item.details.age, function (row) {
// return {y:row[0],x:row[1]} // return {y:row[0],x:row[1]}
// }) // })
@ -586,26 +586,26 @@ monitor.folders.render.summary = function (data) {
options.fields = [ options.fields = [
{ name: 'id', type: 'text', title: "Host", headercss: "small bold", css: "small"}, { name: 'id', type: 'text', title: "Host", headercss: "small bold", css: "small"},
{ name: 'name', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"}, { name: 'name', type: 'text', title: "Folder Name", headercss: "small bold", css: "small"},
{ name: "size", type: "number", title: "Folder Size", type: "number", headercss: "small bold" }, { name: "size", type: "number", title: "Folder Size", type: "number", headercss: "small bold" },
{ name: "count", type: "number", title: "File Count", type: "number", headercss: "small bold" } { name: "count", type: "number", title: "File Count", type: "number", headercss: "small bold" }
] ]
var grid = $('#gridfolders').jsGrid(options) ; var grid = $('#gridfolders').jsGrid(options) ;
} }
monitor.menu = {} monitor.menu = {}
monitor.menu.event = {} monitor.menu.event = {}
monitor.menu.event.toggle = function () { monitor.menu.event.toggle = function () {
var dom = jx.dom.get.instance('menuframe') var dom = jx.dom.get.instance('menuframe')
var value = dom.style.marginLeft.trim() var value = dom.style.marginLeft.trim()
if (value==0 || value == "0px" || value == "") { if (value==0 || value == "0px" || value == "") {
var width = -$(dom).width() - 10 var width = -$(dom).width() - 20
$('#menuframe').animate({marginLeft:"-12%"}) $('#menuframe').animate({marginLeft:"-20%"})
} else { } else {
$('#menuframe').animate({marginLeft:"0"}) $('#menuframe').animate({marginLeft:"0"})
} }
} }
/** /**
* Socket handler, check for learning status * Socket handler, check for learning status

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.min.css" >
<link type="text/css" rel="stylesheet" href="{{ context }}/static/js/jsgrid/jsgrid-theme.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/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 href="{{context}}/static/css/fa/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="icon" href="data:;base64,iVBORw0KGgo="> <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/jquery/jquery.min.js"></script>
<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script> <script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
@ -31,146 +34,163 @@
<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>
<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 id="menu" class="menu"></div>
</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="left info">
<div class="" style="padding:4px; margin-top:2%"> <div class="block">
<div class="" style="height:28px"> <div style="margin:4px; margin-top:2%">
<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="" style="height:28px; ">
<div class="small">Last Lookup <span id="trend_last_lookup"></span> <i id="has_anomaly" class="fa fa-warning right" ></i></div> <div class=" bold">Monitoring
<span id="latest_processes_label" class="default bold"></span>
</div>
</div> <div class="small">Last Lookup <span id="node_last_lookup"></span></div>
</div>
<div style="height:270px; margin-top:4px"> <div class = "" style="height:170px, width:100%;">
<div id="trends_chart" class="small grid" style="height:250px"></div> <div id="latest_processes" class="grid" ></div>
</div> </div>
</div> <div style="height:22px; padding:2px" class="small">
<div id="sandbox" class="border-top" style="padding:4px; margin-top:10px"> <div id="latest_process_pager" align="center"></div>
<div style="height:28px"> </div>
<div id="inspect_sandbox" class="right button border" style="display:none" onclick="monitor.sandbox.init()">Inspect</div> </div>
<div class="bold">Python Virtual Environment Analysis</div> </div>
<div class="small">Last Lookup <span id="sandbox_date"></span></div> <div class="block">
</div> <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=" " style="margin-top:10px; height:135px"> <div class="bold" style="color:#4682B4">Application Summary By Status</div>
<div id="sandbox_status" class=""> <div class="small">Latest Lookup <span id="app-summary-date"></span></div>
</div> </div>
<div id="sandbox_pager"></div>
</div> <div class="" style="padding:2px; height:250px; margin:4px; margin-top:10px">
</div> <div class=" " style="height:100%">
<div style="margin-top:2%"> <div class="small left" style="margin-left:2%; margin-top:1%">
<div id="folder_summary" class=""> <div class="bold">Total Applications that have:</div>
<div style="height:28px"> <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 class="bold">Folder Analysis/Monitoring</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 class="small">Powered By Machine Learning</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 class="">
<div class=" border-top" style="margin-top:4px; padding:2px; height:34px"> </div>
<i class="fa fa-search left" style="margin:4px; padding:4px; ; color:gray;"></i> <div id="summary_chart" class="right width-half"></div>
<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> </div>
<div id="gfolderframe" style="margin-top:10px; height:170px; width:100%"> <div id="summary_details" class="right"></div>
<div style="height:130px"> </div>
<div id="gridfolders" style=""></div> </div>
</div>
<div id="folderspager" class="small" style="height:22px; margin:4px;"></div> <div class="block">
</div> <div class="grid " style="margin:4px; margin-top:10px;">
</div> <div style="height:28px">
</div> <div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
</div>
<div id="folder_plan" style="display:none"> <div class="width" id="summary_ranking" style=" margin:4px; padding:2px; text-transform:capitalize"></div>
<div class="border-bottom" style="height:32px"> </div>
<div class="bold">Deletion/Archiving Plan </div>
<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>
</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>
<div id="chartfolder" ></div> <div id="chartfolder" ></div>
</div> </div>

Write Preview
Loading…
Cancel
Save