parent
b290632391
commit
950cf5a4de
@ -0,0 +1,79 @@
|
|||||||
|
body {
|
||||||
|
width:75%;
|
||||||
|
margin-left:15%;
|
||||||
|
}
|
||||||
|
.models {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folders {
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:50% 50%;
|
||||||
|
grid-gap:4px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.folders .pane_1 {
|
||||||
|
display:grid;
|
||||||
|
grid-template-rows: 50% 50%;
|
||||||
|
grid-gap:2px;
|
||||||
|
padding:2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.folders .pane_2 {display:grid; padding:2px; grid-gap:2px;}
|
||||||
|
.graph {padding:8px; border:1px solid #CAD5E0; border-radius:8px;}
|
||||||
|
.chart {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin-top:10px;}
|
||||||
|
.chart .info {padding-left:10px; display:block;}
|
||||||
|
.chart div:first-child {
|
||||||
|
padding:4px;
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
}
|
||||||
|
/* .folders .pane_1 .graph {width:50%; margin:4px; border:1px solid #CAD5E0}
|
||||||
|
.folders .pane_2 .graph {width:60%; margin:4px; border:1px solid #CAD5E0} */
|
||||||
|
.apps {
|
||||||
|
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: 60% 40%;
|
||||||
|
grid-gap:4px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.apps .pane_1 {
|
||||||
|
display:grid;
|
||||||
|
padding:2px;
|
||||||
|
grid-gap:2px;}
|
||||||
|
|
||||||
|
.apps .pane_2 {display:block; padding:2px;}
|
||||||
|
.apps .pane_2 .status{
|
||||||
|
border:1px solid #CAD5E0;
|
||||||
|
border-radius:8px;
|
||||||
|
padding:8px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.apps .pane_2 .status .chart {display:block;}
|
||||||
|
/* .apps .pane_1 .model {padding:2px;}
|
||||||
|
.apps .pane_1 .resource { padding:2px} */
|
||||||
|
/*
|
||||||
|
.folders_0 .model { grid-row:1; grid-column:1}
|
||||||
|
.folders_0 .rank { grid-row:1; grid-column:2 / span 2;}
|
||||||
|
.folders_0 .size { grid-row:2; grid-column:1}
|
||||||
|
.folders_0 .age { grid-row:2; grid-column:2}
|
||||||
|
.folders_0 .files { grid-row:2; grid-column:3 }
|
||||||
|
.folders_0 .chart { padding:8px;}
|
||||||
|
|
||||||
|
.apps_0{
|
||||||
|
|
||||||
|
margin:2px;
|
||||||
|
padding:2px;
|
||||||
|
grid-gap:2px;
|
||||||
|
grid-template-columns: 50% 50% ;
|
||||||
|
display:grid;
|
||||||
|
}
|
||||||
|
.apps_0 .model {grid-row:2; grid-column:1/span 2}
|
||||||
|
.apps_0 .status{grid-row:1; grid-column:1}
|
||||||
|
.apps_0 .resource{grid-row:1; grid-column:2} */
|
||||||
@ -0,0 +1,307 @@
|
|||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=.5,maximum-scale=.5">
|
||||||
|
<link rel="icon" href="{{context}}/static/img/logo-small.png" type="image/x-icon">
|
||||||
|
|
||||||
|
<script src="{{context}}/static/js/jquery/jquery.min.js"></script>
|
||||||
|
<script src="{{context}}/static/js/jx/dom.js"></script>
|
||||||
|
|
||||||
|
<link href="{{context}}/static/css/fa/css/font-awesome.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="{{context}}/static/css/fa/font-awesome-animation.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
|
||||||
|
<link href="{{context}}/static/js/jsgrid/jsgrid.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="{{context}}/static/js/jsgrid/jsgrid-theme.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="{{context}}/static/js/jsgrid/jsgrid.js"></script>
|
||||||
|
<script src="{{context}}/static/js/jx/dom.js"></script>
|
||||||
|
<script src="{{context}}/static/js/jx/utils.js"></script>
|
||||||
|
<script src="{{context}}/static/js/jx/rpc.js"></script>
|
||||||
|
<link href="{{context}}/static/css/default.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<link href="{{context}}/static/chartist/chartist.css" type="text/css" rel="stylesheet">
|
||||||
|
<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
|
||||||
|
<link href="{{context}}/static/css/basic-dashboard-themes.css" type="text/css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.headers {
|
||||||
|
height:32px;
|
||||||
|
border-bottom:2px solid blue;
|
||||||
|
}
|
||||||
|
.footer {height:32px; margin-top:4px;}
|
||||||
|
|
||||||
|
/* .chart {width:70%;} */
|
||||||
|
.border-round {padding:6px; border-radius:8px;}
|
||||||
|
.small {font-weight:lighter}
|
||||||
|
.title {
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: auto 38px;
|
||||||
|
grid-gap:2px;
|
||||||
|
border-bottom:1px solid #CAD5E0;
|
||||||
|
padding:2px;
|
||||||
|
margin:2px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.title .caption {
|
||||||
|
text-transform:capitalize;
|
||||||
|
font-size:14px; font-weight:bold;}
|
||||||
|
.help {
|
||||||
|
width:28px;
|
||||||
|
height:28px;
|
||||||
|
border-radius:16px;
|
||||||
|
margin:4px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display:flex;
|
||||||
|
cursor:pointer;
|
||||||
|
background-color:orange;
|
||||||
|
color:#ffffff;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box{
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns:230px auto 10%;
|
||||||
|
grid-gap:1px;
|
||||||
|
padding:8px;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.search-box input[type=text]{
|
||||||
|
width:98%;
|
||||||
|
margin:2px;
|
||||||
|
|
||||||
|
padding:2px;
|
||||||
|
outline: 0px;
|
||||||
|
background-color:#f3f3f3;
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
position:absolute;
|
||||||
|
|
||||||
|
grid-gap:1px;
|
||||||
|
z-index:99;
|
||||||
|
height:auto;
|
||||||
|
transition: 20ms;
|
||||||
|
background-color:#ffffff;
|
||||||
|
font-family:sans-serif;
|
||||||
|
font-weight:lighter;
|
||||||
|
}
|
||||||
|
.result-item {display:grid; margin:4px;
|
||||||
|
padding:4px;
|
||||||
|
|
||||||
|
grid-template-columns: 28px 20% 20% 20% 20% auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
.result-item div {
|
||||||
|
overflow:hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.fa-folder-open {color:orange}
|
||||||
|
.fa-cog {color:gray}
|
||||||
|
.fa-ellipsis-h {color:orange}
|
||||||
|
.fa-times {color:maroon}
|
||||||
|
.active-tab {
|
||||||
|
color: #4682b4;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function(){
|
||||||
|
jx.dom.set.focus('search')
|
||||||
|
var id = '{{show|safe}}'
|
||||||
|
if (id == null||id ==''){
|
||||||
|
id = 'apps'
|
||||||
|
}
|
||||||
|
|
||||||
|
show_hide(id,['apps','folders'])
|
||||||
|
|
||||||
|
})
|
||||||
|
var render_chart =function(cid,mid,config){
|
||||||
|
var id = cid+'_'+mid
|
||||||
|
var canvas = jx.dom.get.instance('CANVAS')
|
||||||
|
var context = canvas.getContext('2d')
|
||||||
|
jx.dom.append(id,canvas)
|
||||||
|
var chart = new Chart(context, config)
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var search = {}
|
||||||
|
search.LEXICON = {{lexicon|tojson}}
|
||||||
|
search.find = function(){
|
||||||
|
var term = jx.dom.get.value('search').trim().toLowerCase()
|
||||||
|
|
||||||
|
if (term.length > 0){
|
||||||
|
var found = jx.utils.patterns.visitor(search.LEXICON,function(row){
|
||||||
|
var p = row.name.toLowerCase().match(term)
|
||||||
|
var q = row.node.toLowerCase().match(term)
|
||||||
|
var r = row.id.toLowerCase().match(term)
|
||||||
|
return (p || q || r )? row : null
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
var found = []
|
||||||
|
}
|
||||||
|
var out = jx.dom.get.instance('search-results')
|
||||||
|
|
||||||
|
if (found.length > 0 ){
|
||||||
|
$(out).width( $('#search').width())
|
||||||
|
jx.dom.set.value('search-results','')
|
||||||
|
$(out).slideDown('fast')
|
||||||
|
jx.utils.patterns.visitor(found,search.render)
|
||||||
|
}else{
|
||||||
|
|
||||||
|
$(out).slideUp()
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param row row from lexicon to be rendered
|
||||||
|
*/
|
||||||
|
search.render = function(row){
|
||||||
|
var frame = jx.dom.get.instance('DIV')
|
||||||
|
if (row.id == 'folders'){
|
||||||
|
attr = ['size_in_kb','files','path']
|
||||||
|
}else{
|
||||||
|
attr = ['cpu','mem','status']
|
||||||
|
}
|
||||||
|
attr = ['id','node','name'].concat(attr)
|
||||||
|
var column_index = 1
|
||||||
|
jx.utils.patterns.visitor(attr,function(id){
|
||||||
|
var div = (row[id].toString().match(/folders|apps/))
|
||||||
|
? jx.dom.get.instance('I')
|
||||||
|
: jx.dom.get.instance('DIV')
|
||||||
|
|
||||||
|
if (row[id] == 'folders'){
|
||||||
|
|
||||||
|
div.className = 'fa fa-folder-open'
|
||||||
|
}else if (row[id] == 'apps'){
|
||||||
|
div.className = 'fa fa-cog'
|
||||||
|
}else{
|
||||||
|
div.innerHTML = (id.match(/cpu|mem/))
|
||||||
|
? ([row[id],'%',id]).join(' ').toLocaleUpperCase().replace(/mem/i,'RAM')
|
||||||
|
: (id.match(/size_in_kb/)) ? ([ (row[id]/1000000).toFixed(2),'MB']).join(' ')
|
||||||
|
: (id.match(/files/))?([row[id],'files']).join(' '):row[id]
|
||||||
|
}
|
||||||
|
if (id=='status'){
|
||||||
|
var m = {'R':'fa fa-check','Rl':'fa fa-check', 'X':'fa fa-times','S':'fa fa-ellipsis-h','Sl':'fa fa-ellipsis-h','S+':'fa fa-ellipsis-h'}
|
||||||
|
|
||||||
|
div.innerHTML = ''
|
||||||
|
div.className = m[row[id]]
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
div.style.gridColumn = column_index
|
||||||
|
column_index += 1
|
||||||
|
frame.append(div)
|
||||||
|
})
|
||||||
|
frame.className = 'result-item active'
|
||||||
|
frame.data = row
|
||||||
|
frame.onclick = function(){
|
||||||
|
jx.dom.set.value('form','')
|
||||||
|
var body = this.data
|
||||||
|
var form = jx.dom.get.instance('FORM')
|
||||||
|
form.action = body.node
|
||||||
|
form.method = 'POST'
|
||||||
|
form.enctype='application/json'
|
||||||
|
var keys = jx.utils.keys(body)
|
||||||
|
for(var i in keys){
|
||||||
|
var input = jx.dom.get.instance('INPUT')
|
||||||
|
input.name = keys[i]
|
||||||
|
input.value = body[keys[i]]
|
||||||
|
form.append(input)
|
||||||
|
}
|
||||||
|
jx.dom.append('form',form)
|
||||||
|
form.submit()
|
||||||
|
}
|
||||||
|
jx.dom.append('search-results',frame)
|
||||||
|
|
||||||
|
}
|
||||||
|
var show_hide = function(id,lids){
|
||||||
|
jx.utils.patterns.visitor(lids,function(mid){
|
||||||
|
jx.dom.hide(mid)
|
||||||
|
jx.dom.get.instance(mid+'-button').className = jx.dom.get.instance(mid+'-button').className.replace(/active-tab/i,'')
|
||||||
|
})
|
||||||
|
jx.dom.get.instance(id+'-button').className += ' active-tab'
|
||||||
|
jx.dom.show(id)
|
||||||
|
jx.dom.set.focus('search')
|
||||||
|
// var height = $('body').height() - $('.footer').height()- $('.header').height()
|
||||||
|
// $('.models').height(height)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<div id="form" style="display:none"></div>
|
||||||
|
<div class="search-box">
|
||||||
|
<div style="display:grid; grid-template-columns: 50% 50%; grid-gap:1px;">
|
||||||
|
<div id="folders-button" class="bold" style="padding:4px;" onclick="show_hide('folders',['apps'])">
|
||||||
|
<div class="active"><i class="fa fa-folder-open"></i> Folders</div>
|
||||||
|
</div>
|
||||||
|
<div id="apps-button" class="border-left bold" style="padding:4px" onclick="show_hide('apps',['folders'])">
|
||||||
|
|
||||||
|
<div class="active"><i class="fa fa-cog"></i> Apps</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left:1%;">
|
||||||
|
<input id="search" autocomplete=off placeholder=" [ Search ]" type="text" onkeyup="search.find()"/>
|
||||||
|
<div id="search-results" class="search-results border"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="bold">
|
||||||
|
<span class="active border" style="padding-left:10px; padding-right:10px;"><i class="fa fa-trash"></i></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="models">
|
||||||
|
<div class="" style="">
|
||||||
|
{% for id in models %}
|
||||||
|
<div id="{{id|safe}}" class="{{id|safe}}">
|
||||||
|
|
||||||
|
{% for model in models[id] %}
|
||||||
|
|
||||||
|
{% if loop.index == 1%}
|
||||||
|
<div class=" pane_{{loop.index}}">
|
||||||
|
{% endif %}
|
||||||
|
<div class="graph {{model.name()|safe}}">
|
||||||
|
|
||||||
|
<div class="title">
|
||||||
|
<div class="caption">{{model.get("title")|safe}}
|
||||||
|
|
||||||
|
<div class="small">{{model.get('period')}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="help">
|
||||||
|
<i class="fa fa-question"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart">
|
||||||
|
|
||||||
|
<div id="{{id}}_{{model.name()|safe}}" class="border border-round"></div>
|
||||||
|
<div class="info">{{model.__doc__.replace('\n','<br>').replace('{node}','<br><b>'+node+'</b>' ) |safe}}</div>
|
||||||
|
</div>
|
||||||
|
<script>render_chart('{{id|safe}}','{{model.name()|safe}}',{{model.get('chart') |tojson}})</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
{% if loop.index == 2%}
|
||||||
|
</div><div class=" border-round pane_{{loop.index}}">
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="small footer" align="center">Smart-top dashboard {{version}}</div>
|
||||||
|
</body>
|
||||||
Loading…
Reference in new issue