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

Fixing layout & shadow as well as search in folder grid

Browse Source
community
Steve L. Nyemba 8 years ago
parent 267e11e47b
commit b011b2ce6e
2 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File

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

@ -45,8 +45,8 @@ monitor.processes.init = function (x) {
// //
jx.dom.hide('apps') jx.dom.hide('apps')
} }
monitor.sandbox.init()
setTimeout(monitor.sandbox.init,3000) // setTimeout(monitor.sandbox.init,1000)
} }
/** /**
@ -231,23 +231,29 @@ 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-running', xr)
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)
var conf = {}//width:50,height:40} var conf = {}//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) {
console.log(_chart)
console.log($(_chart))
var activePoints = $(_chart).getSegmentsAtEvent(evt);
console.log(activePoints)
})
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)
@ -405,13 +411,15 @@ 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(/\x32/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) {
if (row.id.match(term)) { pattern = "(.*" + term + ".*)"
if (row.id.match(pattern)) {
return row return row
} }
}) })
@ -513,11 +521,11 @@ monitor.folders.render.summary = function (data) {
jx.dom.set.value('gridfolders', '') jx.dom.set.value('gridfolders', '')
var options = { var options = {
width: $('#gridfolders').width(), height:'auto' width: $('#gfolderframe').width()-8, height:'auto'
} }
options.paging = true options.paging = true
options.pageSize = 4 options.pageSize = 4
options.pageIndex = 2 options.pageIndex = 1
options.pageButtonCount = 4 options.pageButtonCount = 4
options.pagerContainer = '#folderspager' options.pagerContainer = '#folderspager'
options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}" options.pagerFormat= "{prev} Page {pageIndex} of {pageCount} {next}"

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

@ -17,7 +17,7 @@
<script src="{{ context }}/static/js/jsgrid/jsgrid.js"></script> <script src="{{ context }}/static/js/jsgrid/jsgrid.js"></script>
<script src="{{context}}/static/js/colors.js"></script> <script src="{{context}}/static/js/colors.js"></script>
<script src="{{context}}/static/js/dashboard.js"></script> <script src="{{context}}/static/js/dashboard.js"></script>
<title>iMonitor</title> <title>{{title}}</title>
<script> <script>
var HTTP_CONTEXT="{{context}}" var HTTP_CONTEXT="{{context}}"
$(document).ready(function(){ $(document).ready(function(){
@ -51,30 +51,29 @@
<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="simple-gradient shadow grid border-right" style="margin:4px">
<div style="margin:4px; padding:2px; margin-bottom:4px; height:28px"> <div style="margin:4px; padding:2px; margin-bottom:4px; height:28px">
<div class="bold" >Application Summary By Status</div> <div class="bold" style="color:#4682B4">Application Summary By Status</div>
<div id="app-summary-date" class="small"></div> <div id="app-summary-date" class="small"></div>
</div> </div>
<div class="simple-gradient shadow" style="padding:2px; height:150px; margin:4px; margin-top:10px"> <div class="" style="padding:2px; height:200px; margin:4px; margin-top:10px">
<div class="left small width-half" style="margin-top:10px"> <div class="left small width-quarter" 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 class="right width-75" style="height:93%">
<div id="summary_chart"></div>
</div>
<div class="border-top left small" style=""><span id="total-apps" class="default">0</span><span class="">Applications Monitored</span></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="shadow simple-gradient grid border-right" style="margin:4px; margin-top:10px;">
<div style="height:28px"> <div style="height:28px">
<div class="bold" style="margin:4px; padding:4px">Application Summary By Groups</div> <div class="bold" style="margin:4px; padding:4px; color:#4682B4;">Application Summary By Groups</div>
</div> </div>
<div class="shadow simple-gradient width" id="summary_ranking" style="margin:4px; padding:2px; text-transform:capitalize"></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="left info">
@ -114,8 +113,8 @@
<input id="folder_search" type="text" class="small left" placeholder="hostname" style="width:87%; padding-left:4px;" onkeyup="monitor.folders.search.init()"/> <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> <i class="fa fa-trash right action right" style="margin:4px; padding:4px; color:maroon" onclick="monitor.folders.search.reset()"></i>
</div> </div>
<div style="margin-top:10px; height:170px"> <div id="gfolderframe" style="margin-top:10px; height:170px; width:100%">
<div id="gridfolders"></div> <div id="gridfolders" style=""></div>
<div id="folderspager" class="small" style="height:22px"></div> <div id="folderspager" class="small" style="height:22px"></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save