bug fix with graphical layout

community
Steve L. Nyemba 6 years ago
parent e81835d919
commit e9a26521bb

@ -39,11 +39,12 @@
} }
.widget .title { .widget .title {
font-size:22px; font-size:18px;
align-items: center; align-items: center;
display:grid; display:grid;
grid-template-columns: auto 95px; grid-template-columns: auto 95px;
grid-gap:2px; grid-gap:2px;
min-height:24px;
} }
.widget .chart { .widget .chart {
display:grid; display:grid;
@ -102,7 +103,7 @@
.fa-ellipsis-h {color:orange} .fa-ellipsis-h {color:orange}
.fa-times {color:maroon} .fa-times {color:maroon}
.fa-folder-open {color:#FF7F24;} .fa-folder-open {color:#FF7F24;}
.fa-cog {color:#d3d3d3} .fa-cog {color:gray}
.busy { .busy {
display:flex ; display:flex ;
align-items: center; align-items: center;
@ -127,13 +128,14 @@
// }) // })
{{app_summary|tojson}} {{app_summary|tojson}}
var render_grid = function(name){ var render_grid = function(name){
var logs = {{app_logs|tojson}} var logs = {{app_logs|tojson}}[name]['logs']
var config = {{ app_grid|tojson}} var config = {{ app_grid|tojson}}
config.data = logs[name] config.data = logs
config.fields[config.fields.length-1].itemTemplate = function(value,item){ config.fields[config.fields.length-1].itemTemplate = function(value,item){
var p = {"X":"fa fa-times","S":"fa fa-ellipsis-h","S+":"fa fa-ellipsis-h","R":"fa fa-check"} var p = {"X":"fa fa-times","S":"fa fa-ellipsis-h","S+":"fa fa-ellipsis-h","R":"fa fa-check"}
var i = jx.dom.get.instance('I') var i = jx.dom.get.instance('I')
i.className = p[value] i.className = p[value] != null? p[value]: 'fa fa-cog fa-spin'
return i return i
} }
var id = '#app_grid_'+name var id = '#app_grid_'+name
@ -163,7 +165,7 @@
<div class="search"> <div class="search">
<input type="text" placeholder="[Node/Data Collector]"> <input type="text" placeholder="[Node/Data Collector]">
<div align="left" style="align-items: center"> <div align="left" style="align-items: center">
<span class="active"><i class="fa fa-times"></i></span> <span class="active"><i class="fa fa-trash"></i></span>
</div> </div>
</div> </div>
<div class=" border-round"> <div class=" border-round">
@ -182,8 +184,9 @@
</div> </div>
<div id="{{name}}" class="chart"> <div id="{{name}}" class="chart">
<div class="no-border border-right"> <div class="no-border border-right">
<div align="center"> <div align="center" style="padding:8px">
<h3>Crash Analysis</h3> <div class="bold">Crash Analysis</div>
<div class="small">{{ app_summary[loop.index -1 ].formatted_date }}</div>
</div> </div>
@ -205,8 +208,9 @@
</div> </div>
</div> </div>
<div> <div>
<div align="center"> <div align="center" style="padding:8px">
<h3>Resource Usage</h3> <div class="bold">Resource Usage</div>
<div class="small">{{ app_summary[loop.index -1 ].formatted_date }}</div>
</div> </div>
<iframe class="no-border" src="{{context}}/1/plot/html/bar/apps.resource?index={{loop.index -1}}" scrolling="no"></iframe> <iframe class="no-border" src="{{context}}/1/plot/html/bar/apps.resource?index={{loop.index -1}}" scrolling="no"></iframe>
@ -217,7 +221,7 @@
<div class="stat-board"> <div class="stat-board">
<div class="number border"> <div class="number border">
<div class="value"> <div class="value">
{{session['apps.resource'][loop.index -1].x[0][1] + session['apps.resource'][loop.index -1].x[0][0] }} {{ (session['apps.resource'][loop.index -1].x[0][1] + session['apps.resource'][loop.index -1].x[0][0]) | round(2) }}
<span class="small">%</span> <span class="small">%</span>
</div> </div>
<div class="unit">CPU</div> <div class="unit">CPU</div>
@ -225,7 +229,7 @@
<div class="number border"> <div class="number border">
<div class="value"> <div class="value">
{{session['apps.resource'][loop.index -1].x[1][0] + session['apps.resource'][loop.index -1].x[1][1]}} {{ (session['apps.resource'][loop.index -1].x[1][0] + session['apps.resource'][loop.index -1].x[1][1]) | round(2)}}
<span class="small">%</span> <span class="small">%</span>
</div> </div>
@ -234,26 +238,59 @@
</div> </div>
</div> </div>
<div class="border-left"> <div class="border-left">
<div align="center">
<h3>Folder Analysis</h3>
</div>
{%for row in folders_summary %} {%for row in folders_summary %}
<div align="center" style="padding:8px">
<div class="bold">Folder Analysis</div>
<div class="small">{{ row.formatted_date }}</div>
</div>
{%if row.node == name %} {%if row.node == name %}
<div class="stat-board "> <div class="" style="padding:4px; margin-left:10px; min-height:250px; overflow:hidden">
<div class="number border">
<div class="value">{{ row.folders}}</div>
<div class="unit small">Folders</div> <li type="square" style="list-style-type: none">
<i class="fa fa-check" style="font-size:18px;"></i>
Monitoring <span class="bold">{{row.folders}}</span> Folder
{% if row.folders > 1%}
s
{% endif %}
</li>
<li type="square" style="margin-top:8px; list-style-type: none">
<i class="fa fa-check" style="font-size:18px;"></i>
<span class="bold">
{% if row.avg_folder_size > 1000 %}
{{ (row.avg_folder_size/1000)|round(2)}} GB
{% else %}
{{ row.avg_folder_size}} MB
{% endif %}
</span>/Folder monitored
</li>
<li type="square" style="margin-top:8px; list-style-type: none">
<i class="fa fa-check" style="font-size:18px;"></i>
<span class="bold">{{row.avg_files_folder}}</span> Files / Folder
</li>
<p>
<div class="small border-top" style=" font-family:verdana; margin-top:8px;padding:8px; color:#4682B4">
<br>The largest folder analysis, provides insight into what the largest folder size is, and if it has reached the archiving threshold.
</div> </div>
<div class="number border"> </p>
<div class="value">{{ row.files}}</div>
<div class="unit small">Files</div>
</div> </div>
<div align="center" class="bold">
Largest Folder
</div>
<br>
<div class="stat-board ">
{% if row.size > 1000 %}
{% if row.max_folder_size > 1000 %}
<div class="number border"> <div class="number border">
<div class="value">{{ (row.size / 1000) | round(2) }}</div> <div class="value">{{ (row.max_folder_size / 1000) | round(2) }}</div>
<div class="unit small">GB Used</div> <div class="unit small">GB Used</div>
</div> </div>
<div class="number border"> <div class="number border">
@ -262,7 +299,7 @@
</div> </div>
{% else %} {% else %}
<div class="number border"> <div class="number border">
<div class="value">{{ row.size }}</div> <div class="value">{{ row.max_folder_size }}</div>
<div class="unit small">MB Used</div> <div class="unit small">MB Used</div>
</div> </div>
<div class="number border"> <div class="number border">
@ -276,7 +313,11 @@
{% endif %} {% endif %}
{% if loop.index == nodes|length %} {% if loop.index == nodes|length %}
<script>$('.busy').slideUp()</script> <script>
setTimeout(function(){
$('.busy').slideUp('slow')
},1300)
</script>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
<div> <div>

@ -42,7 +42,9 @@ class Graph :
def scatter(self,**args): def scatter(self,**args):
pass pass
class ImageGraphs (Graph) : class ImageGraphs (Graph) :
"""
This framework is designed around matplotlib and generates an image that can be downloaded
"""
def __init__(self,format,**args) : def __init__(self,format,**args) :
""" """
@param width width in pixels @param width width in pixels

@ -20,6 +20,9 @@ class analytics :
self.cache['key'] = args['key'] self.cache['key'] = args['key']
self.cache['name'] = self.__class__.__name__ self.cache['name'] = self.__class__.__name__
self.init() self.init()
def get_formatted_date(self,row):
m = {1:"Jan",2:"Feb",3:"Mar",4:"Apr",5:"May",6:"Jun",7:"Jul",8:"Aug",9:"Sep",10:"Oct",11:"Nov",12:"Dec"}
return "-".join([m[row['month']],str(row['day']),str(row['year'])]) +" "+ " ".join([str(row['hour']),'h :',str(row['minute']),'min' ])
def init(self): def init(self):
""" """
Store logs as is per node i.e this enables to see the latest pull Store logs as is per node i.e this enables to see the latest pull
@ -83,7 +86,7 @@ class apps(analytics) :
""" """
analytics.init(self) analytics.init(self)
grid = {"width":"100%","editing":False,"rowClass":"small"} grid = {"width":"100%","editing":False,"rowClass":"small"}
grid['fields'] = [{"name":"name","title":"Process","headercss":"small"},{"name":"cpu","title":"CPU Usage","headercss":"small","type":"number"},{"name":"mem","title":"RAM Usage","headercss":"small","type":"number"},{"name":"status","title":"Status","headercss":"small","align":"center"}] grid['fields'] = [{"name":"name","title":"Process","headercss":"small"},{"name":"cpu","title":"CPU Usage","headercss":"small","type":"number"},{"name":"mem","title":"RAM Usage","headercss":"small","type":"number"},{"name":"status","title":"Status","headercss":"small","align":"center","width":"32px"}]
self.set('grid',grid) self.set('grid',grid)
def summary(self,data): def summary(self,data):
@ -92,15 +95,17 @@ class apps(analytics) :
In terms of {crash,idle,running} counts In terms of {crash,idle,running} counts
""" """
r = [] r = []
for node in data : for node in data :
logs = data[node]['logs'] logs = data[node]['logs']
date = data[node]['date']['long'] date = data[node]['date']['long']
formatted_date = self.get_formatted_date(data[node]['date'])
df = pd.DataFrame(logs) df = pd.DataFrame(logs)
df = df[df.name.str.contains('other',na=False)==False] df = df[df.name.str.contains('other',na=False)==False]
crash = df.status.str.contains('X').sum() crash = df.status.str.contains('X').sum()
idle = df.status.str.contains('S').sum() idle = df.status.str.contains('S').sum()
running = df.shape[0] - crash - idle running = df.shape[0] - crash - idle
r.append({"date":date,"node":node,"running":running,"idle":idle,"crash":crash}) r.append({"date":date,"node":node,"running":running,"idle":idle,"crash":crash,"formatted_date":formatted_date})
return r return r
# logs = pd.DataFrame(self.get('logs')) # logs = pd.DataFrame(self.get('logs'))
@ -137,11 +142,12 @@ class apps(analytics) :
X = [[other_df.cpu.sum(),watch_df.cpu.sum()],[other_df.mem.sum(),watch_df.mem.sum()]] X = [[other_df.cpu.sum(),watch_df.cpu.sum()],[other_df.mem.sum(),watch_df.mem.sum()]]
date= data[node]['date']['long'] date= data[node]['date']['long']
formatted_date = self.get_formatted_date(data[node]['date'])
q.append({"node":node, "x":X,"labels":labels, "title":title,"series":series,"ylabel":ylabel}) q.append({"node":node, "x":X,"labels":labels, "title":title,"series":series,"ylabel":ylabel})
crash = watch_df.status.str.contains('X').sum() crash = watch_df.status.str.contains('X').sum()
idle = watch_df.status.str.contains('S').sum() idle = watch_df.status.str.contains('S').sum()
running = N - crash - idle running = N - crash - idle
r.append( {"x":[crash,idle,running],"labels":['Crash','Idle','Running'],"title":"","date":date}) r.append( {"x":[crash,idle,running],"labels":['Crash','Idle','Running'],"title":"","date":date,"formatted_date":formatted_date})
self.set("resource",q) self.set("resource",q)
self.set("status",r) self.set("status",r)
@ -187,12 +193,16 @@ class folders(analytics):
else: else:
max_size = 0 max_size = 0
self.set('max_size',max_size) self.set('max_size',max_size)
q = []
for node in data : for node in data :
df = pd.DataFrame(data[node]['logs']) df = pd.DataFrame(data[node]['logs'])
N = df.shape[0] N = df.shape[0]
df = pd.DataFrame(df.mean()[['size_in_kb','files','age_in_days']]).T df = pd.DataFrame(df.mean()[['size_in_kb','files','age_in_days']]).T
formatted_date = self.get_formatted_date(data[node]['date'])
r.append({"node":node,"folders":N, "max_size":max_size,"size":np.round(df.size_in_kb.values[0]*.000001,2),"age":df.age_in_days.values[0].round(2),"files":df.files.values[0].round(2)}) r.append({"node":node,"folders":N, "max_size":max_size,"max_folder_size":np.round(df.size_in_kb.max()*.000001,2),"avg_folder_size":np.round(df.size_in_kb.mean()*.000001,2),"age":df.age_in_days.values[0].round(2),"avg_files_folder":df.files.max().round(2),"formatted_date":formatted_date})
X = [[np.round(df.size_in_kb.mean()*.000001,2),np.round(df.size_in_kb.max()*.000001,2)],[df.files.mean().round(2),df.files.max().round(2)]]
q.append({"node":node, "x":X,"labels":['Average','Largest'], "title":"","series":['Size (MB)','Files'],"ylabel":""})
self.set("analysis",q)
return r return r
# for id in logs : # for id in logs :

Loading…
Cancel
Save