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

html display of the new dashboard

Browse Source
community
Steve L. Nyemba 6 years ago
parent b290632391
commit 950cf5a4de
2 changed files with 386 additions and 0 deletions
Show Stats Download Patch File Download Diff File

79
src/api/static/css/basic-dashboard-themes.css
Unescape View File

@ -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} */

307
src/api/templates/dashboard/board.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save