|
|
@ -4,7 +4,7 @@
|
|
|
|
-->
|
|
|
|
-->
|
|
|
|
<link href="{{context}}/static/css/default.css" type="text/css" rel="stylesheet">
|
|
|
|
<link href="{{context}}/static/css/default.css" type="text/css" rel="stylesheet">
|
|
|
|
<link href="{{context}}/static/css/fa/css/font-awesome.css" type="text/css" rel="stylesheet">
|
|
|
|
<link href="{{context}}/static/css/fa/css/font-awesome.css" type="text/css" rel="stylesheet">
|
|
|
|
<link href="{{context}}/static/css/fa/animation.css" rel="stylesheet" type="text/css">
|
|
|
|
<link href="{{context}}/static/css/fa/font-awesome-animation.css" rel="stylesheet" type="text/css">
|
|
|
|
<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/jx/dom.js"></script>
|
|
|
|
<script src="{{context}}/static/js/jx/dom.js"></script>
|
|
|
|
<link href="{{context}}/static/js/jsgrid/jsgrid.css" rel="stylesheet" type="text/css">
|
|
|
|
<link href="{{context}}/static/js/jsgrid/jsgrid.css" rel="stylesheet" type="text/css">
|
|
|
@ -23,6 +23,7 @@
|
|
|
|
height:99%;
|
|
|
|
height:99%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.border-round {
|
|
|
|
.border-round {
|
|
|
|
|
|
|
|
|
|
|
@ -102,6 +103,13 @@
|
|
|
|
.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:#d3d3d3}
|
|
|
|
|
|
|
|
.busy {
|
|
|
|
|
|
|
|
display:flex ;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
height:100%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
@ -139,7 +147,18 @@
|
|
|
|
jx.utils.patterns.visitor(xi,jx.dom.hide)
|
|
|
|
jx.utils.patterns.visitor(xi,jx.dom.hide)
|
|
|
|
jx.utils.patterns.visitor(xo,jx.dom.show)
|
|
|
|
jx.utils.patterns.visitor(xo,jx.dom.show)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="busy">
|
|
|
|
|
|
|
|
<div align="center">
|
|
|
|
|
|
|
|
<i class="fa fa-cog fa-5x fa-spin" style="color:darkgray"></i>
|
|
|
|
|
|
|
|
<i class="fa fa-cog fa-3x faa-wrench animated"></i>
|
|
|
|
|
|
|
|
<i class="fa fa-cog fa-spin fa-4x" style="color:darkgray"></i>
|
|
|
|
|
|
|
|
<div class="small bold" style="margin-top:10px; color:#4682B4">Loading dashboard ...</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="board">
|
|
|
|
<div class="board">
|
|
|
|
<div class="search">
|
|
|
|
<div class="search">
|
|
|
|
<input type="text" placeholder="[Node/Data Collector]">
|
|
|
|
<input type="text" placeholder="[Node/Data Collector]">
|
|
|
@ -172,7 +191,7 @@
|
|
|
|
<div align="center" class="bold">
|
|
|
|
<div align="center" class="bold">
|
|
|
|
Status Counts
|
|
|
|
Status Counts
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p></p>
|
|
|
|
<br>
|
|
|
|
<div class="stat-board">
|
|
|
|
<div class="stat-board">
|
|
|
|
<div class="number border">
|
|
|
|
<div class="number border">
|
|
|
|
<div class="value">{{ app_summary[loop.index-1].crash}}</div>
|
|
|
|
<div class="value">{{ app_summary[loop.index-1].crash}}</div>
|
|
|
@ -189,7 +208,30 @@
|
|
|
|
<div align="center">
|
|
|
|
<div align="center">
|
|
|
|
<h3>Resource Usage</h3>
|
|
|
|
<h3>Resource Usage</h3>
|
|
|
|
</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>
|
|
|
|
|
|
|
|
<div align="center" class="bold">
|
|
|
|
|
|
|
|
Total Resource Usage
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<div class="stat-board">
|
|
|
|
|
|
|
|
<div class="number border">
|
|
|
|
|
|
|
|
<div class="value">
|
|
|
|
|
|
|
|
{{session['apps.resource'][loop.index -1].x[0][1] + session['apps.resource'][loop.index -1].x[0][0] }}
|
|
|
|
|
|
|
|
<span class="small">%</span>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="unit">CPU</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="number border">
|
|
|
|
|
|
|
|
<div class="value">
|
|
|
|
|
|
|
|
{{session['apps.resource'][loop.index -1].x[1][0] + session['apps.resource'][loop.index -1].x[1][1]}}
|
|
|
|
|
|
|
|
<span class="small">%</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="unit">RAM</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="border-left">
|
|
|
|
<div class="border-left">
|
|
|
|
<div align="center">
|
|
|
|
<div align="center">
|
|
|
@ -208,17 +250,34 @@
|
|
|
|
<div class="value">{{ row.files}}</div>
|
|
|
|
<div class="value">{{ row.files}}</div>
|
|
|
|
<div class="unit small">Files</div>
|
|
|
|
<div class="unit small">Files</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% if row.size > 1000 %}
|
|
|
|
<div class="number border">
|
|
|
|
<div class="number border">
|
|
|
|
<div class="value">{{ row.size}}</div>
|
|
|
|
<div class="value">{{ (row.size / 1000) | round(2) }}</div>
|
|
|
|
|
|
|
|
<div class="unit small">GB Used</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="number border">
|
|
|
|
|
|
|
|
<div class="value">{{ (row.max_size / 1000) | round(2) }}</div>
|
|
|
|
|
|
|
|
<div class="small unit">GB Threshold</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{% else %}
|
|
|
|
|
|
|
|
<div class="number border">
|
|
|
|
|
|
|
|
<div class="value">{{ row.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">
|
|
|
|
<div class="value">{{ row.max_size}}</div>
|
|
|
|
<div class="value">{{ row.max_size}}</div>
|
|
|
|
<div class="small unit">MB Threshold</div>
|
|
|
|
<div class="small unit">MB Threshold</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
{% if loop.index == nodes|length %}
|
|
|
|
|
|
|
|
<script>$('.busy').slideUp()</script>
|
|
|
|
|
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
|
|
{% endfor %}
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
|
@ -230,10 +289,16 @@
|
|
|
|
<div id="{{name}}_data"class="grid no-border" style="display:none;">
|
|
|
|
<div id="{{name}}_data"class="grid no-border" style="display:none;">
|
|
|
|
<div id="app_grid_{{name}}" style="margin-top:10px;"></div>
|
|
|
|
<div id="app_grid_{{name}}" style="margin-top:10px;"></div>
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
render_grid('{{name}}')
|
|
|
|
render_grid('{{name}}')
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endfor %}
|
|
|
|
{% endfor %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|