parent
407eb6f8ca
commit
117cd3840f
@ -1,44 +1,24 @@
|
|||||||
|
<meta class="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
|
||||||
|
<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/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-theme.css" rel="stylesheet" type="text/css">
|
|
||||||
<script src="{{context}}/static/js/jsgrid/jsgrid.js"></script>
|
<script src="{{context}}/static/js/jsgrid/jsgrid.js"></script>
|
||||||
<script src="{{context}}/static/js/jx/dom.js"></script>
|
<script src="{{context}}/static/js/jx/dom.js"></script>
|
||||||
<script src="{{context}}/static/js/jx/rpc.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/css/default.css" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
<script>
|
|
||||||
var DATA_GRID={{grid|tojson}}
|
|
||||||
var STATUS_ICONS = {
|
|
||||||
"S":"fa ellipsis-h",
|
|
||||||
"T":"fa fa-times",
|
|
||||||
"Z":"fa fa-exclamation-triangle",
|
|
||||||
"R":"fa fa-check"
|
|
||||||
}
|
|
||||||
DATA_GRID.width = '100%'
|
|
||||||
DATA_GRID.rowClass = function(item,index){
|
|
||||||
return "small"
|
|
||||||
}
|
|
||||||
$(document).ready(function(){
|
|
||||||
$("#grid").jsGrid(DATA_GRID)
|
|
||||||
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<body>
|
<body>
|
||||||
<div class="title-bar">
|
<div>
|
||||||
<span class="title">Application/Processes</span>
|
<div>
|
||||||
|
<div class="bold">RAM</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="search-box border" style="padding:2px; margin-bottom:4px; display:grid; grid-template-columns: auto 64px">
|
<div>
|
||||||
<input type="text" id="search" placeholder="[Enter Application Name]" onkeyup="on_keyup(event)"/>
|
<div class="bold">CPU</div>
|
||||||
<div class="default" style="display:grid; grid-template-columns: 50% 50%; grid-gap:2px">
|
|
||||||
<div class="active" align="center" onclick="save_emails()"><i class="fa fa-check"></i></div>
|
|
||||||
<div class="active" align="center" onclick="clear_emails()"><i class="fa fa-times"></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="grid"></div>
|
</div>
|
||||||
</body>
|
</body>
|
@ -1,9 +1,13 @@
|
|||||||
|
<meta charset="utf-8"/>
|
||||||
<!-- <link rel="shortcut icon" href="{{context}}/static/img/logo-small.png" type="image/x-icon"> -->
|
<!-- <link rel="shortcut icon" href="{{context}}/static/img/logo-small.png" type="image/x-icon"> -->
|
||||||
<link rel="icon" href="{{context}}/static/img/logo-small.png" type="image/x-icon">
|
<link rel="icon" href="{{context}}/static/img/logo-small.png" type="image/x-icon">
|
||||||
|
<link href="{{context}}/static/css/default.css" type="text/css" rel="stylesheet">
|
||||||
<link href="{{context}}/static/chartist/chartist.css" type="text/css" rel="stylesheet">
|
<link href="{{context}}/static/chartist/chartist.css" type="text/css" rel="stylesheet">
|
||||||
<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
|
<script src="{{context}}/static/js/chart.js/chart.bundle.js"></script>
|
||||||
|
|
||||||
<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/utils.js"></script>
|
||||||
|
<script src="{{context}}/static/js/jx/ext/math.js"></script>
|
||||||
|
|
||||||
{% block content %} {% endblock%}
|
{% block content %} {% endblock%}
|
@ -1,53 +1,53 @@
|
|||||||
{% extends 'dashboard/graphs/base.html' %}
|
{% extends 'dashboard/graphs/base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
<style>
|
||||||
|
.board {
|
||||||
|
display:grid;
|
||||||
|
grid-template-columns: repeat(auto-fit,49%);
|
||||||
|
grid-gap:0px;
|
||||||
|
}
|
||||||
|
.border-round {padding:8px; margin:8px; border-radius:8px;}
|
||||||
|
.title {margin:4px; font-size:18px; font-family:verdana}
|
||||||
|
</style>
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
|
||||||
// Chart.plugins.register({
|
var render_chart =function(index,config){
|
||||||
// afterDatasetsDraw: function(chart) {
|
var id = 'chart_'+index
|
||||||
|
var canvas = jx.dom.get.instance('CANVAS')
|
||||||
// var ctx = chart.chart.ctx;
|
var context = canvas.getContext('2d')
|
||||||
// chart.data.datasets.forEach(function(dataset, i) {
|
jx.dom.append(id,canvas)
|
||||||
// var meta = chart.getDatasetMeta(i);
|
new Chart(context, config)
|
||||||
// if (!meta.hidden) {
|
|
||||||
// meta.data.forEach(function(element, index) {
|
|
||||||
// // Draw the text in black, with the specified font
|
|
||||||
// ctx.fillStyle = 'rgb(0, 0, 0)';
|
|
||||||
// var fontSize = 16;
|
|
||||||
// var fontStyle = 'normal';
|
|
||||||
// var fontFamily = 'Helvetica Neue';
|
|
||||||
// ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
|
|
||||||
// // Just naively convert to string for now
|
|
||||||
// var dataString = dataset.datalabels[index].toString();
|
|
||||||
// // Make sure alignment settings are correct
|
|
||||||
// ctx.textAlign = 'center';
|
|
||||||
// ctx.textBaseline = 'middle';
|
|
||||||
// ctx.fillStyle = 'white'
|
|
||||||
// var padding = 5;
|
|
||||||
// var position = element.tooltipPosition();
|
|
||||||
|
|
||||||
// ctx.fillText(dataString, position.x -40 , position.y - (fontSize / 2) - padding);
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
var context = document.getElementById('{{chart_id|safe}}').getContext('2d')
|
|
||||||
var args = {{config|tojson}}
|
|
||||||
// args.options.plugins.datalabels = {backgroundColor:'rgba(242,242,242,0.7)',
|
|
||||||
// display:function(context){
|
|
||||||
// var labels = context.dataset.datalabels
|
|
||||||
// var index = context.dataIndex
|
|
||||||
// return labels[index]
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
new Chart(context, args)
|
|
||||||
|
|
||||||
})
|
|
||||||
|
}
|
||||||
|
// $(document).ready(function(){
|
||||||
|
|
||||||
|
// })
|
||||||
</script>
|
</script>
|
||||||
<div>
|
<body>
|
||||||
<canvas id="{{chart_id|safe}}"></canvas>
|
{% if info|length == 1 %}
|
||||||
</div>
|
<div>
|
||||||
|
{% else %}
|
||||||
|
<div class="board">
|
||||||
|
{% endif %}
|
||||||
|
{% for config in info %}
|
||||||
|
{% if info|length > 1%}
|
||||||
|
<div class="border border-round">
|
||||||
|
{% else %}
|
||||||
|
<div>
|
||||||
|
{% endif %}
|
||||||
|
<div class="title bold" align="center">{{config.title}}</div>
|
||||||
|
<!-- <canvas id="{{chart_id_|safe}}"></canvas> -->
|
||||||
|
<div id="chart_{{loop.index|int}}"></div>
|
||||||
|
<div id="descr_{{loop.index|int}}" class="border-top" align="center">
|
||||||
|
<br>{{config.info}}
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
render_chart({{loop.index|int}},{{config|tojson}})
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
{% endblock %}
|
{% endblock %}
|
Loading…
Reference in new issue