Skip to content

Commit

Permalink
new feature monitor tree
Browse files Browse the repository at this point in the history
  • Loading branch information
@guohongze
guohongze committed Sep 7, 2018
1 parent b2de979 commit 5c9f9e5
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 89 deletions.
8 changes: 4 additions & 4 deletions monitor/system.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,14 +138,14 @@ def host_tree():
for idc in Idc.objects.all():
single_server_list = []
for host in idc.host_set.all():
single_server_list.append({'name': host.hostname, 'url': "/monitor/system/{}/0/".format(host.hostname)})
single_server_list.append({'name': host.hostname, 'url': "/monitor/system/{}/0/".format(host.hostname), 'target':"myframe"})
cabinet_list = []
cabinets = idc.cabinet_set.all()
for cabinet in cabinets:
server_list = []
servers = cabinet.serverList.all()
for server in servers:
server_data = {'name': server.hostname, 'url': "/monitor/system/{}/0/".format(server.hostname)}
server_data = {'name': server.hostname, 'url': "/monitor/system/{}/0/".format(server.hostname), 'target':"myframe"}
server_list.append(server_data)
cabinet_data = {'name': cabinet.name, 'children': server_list}
cabinet_list.append(cabinet_data)
Expand All @@ -162,7 +162,7 @@ def group_tree():
server_list = []
servers = group.serverList.all()
for server in servers:
server_data = {'name': server.hostname, 'url': "/monitor/system/{}/0/".format(server.hostname)}
server_data = {'name': server.hostname, 'url': "/monitor/system/{}/0/".format(server.hostname), "target": "_self"}
server_list.append(server_data)
group_data = {'name': group.name, 'children': server_list}
group_node.append(group_data)
Expand All @@ -179,7 +179,7 @@ def product_tree():
server_list = []
servers = pjs.serverList.all()
for server in servers:
server_data = {'name': server.hostname, 'url': "/monitor/system/{}/0/".format(server.hostname)}
server_data = {'name': server.hostname, 'url': "/monitor/system/{}/0/".format(server.hostname), "target": "_self"}
server_list.append(server_data)
project_data = {'name': pjs.name, 'children': server_list}
project_list.append(project_data)
Expand Down
50 changes: 25 additions & 25 deletions static/ztree/css/demo.css
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;}
h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}
h1 {font-size: 24px;line-height: 34px;text-align: center;}
h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}
h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}
a {color:#3C6E31;text-decoration: underline;}
a:hover {background-color:#3C6E31;color:white;}
input.radio {margin: 0 2px 0 8px;}
input.radio.first {margin-left:0;}
input.empty {color: lightgray;}
code {color: #2f332a;}
.highlight_red {color:#A60000;}
.highlight_green {color:#A7F43D;}
li {list-style: circle;font-size: 12px;}
li.title {list-style: none;}
ul.list {margin-left: 17px;}
/*html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {*/
/*margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}*/
/*body {color: #2f332a;font: 15px/21px Arial, Helvetica, simsun, sans-serif;background: #f0f6e4 \9;}*/
/*!*h1, h2, h3, h4, h5, h6 {color: #2f332a;font-weight: bold;font-family: Helvetica, Arial, sans-serif;padding-bottom: 5px;}*!*/
/*h1 {font-size: 24px;line-height: 34px;text-align: center;}*/
/*h2 {font-size: 14px;line-height: 24px;padding-top: 5px;}*/
/*h6 {font-weight: normal;font-size: 12px;letter-spacing: 1px;line-height: 24px;text-align: center;}*/
/*a {color:#3C6E31;text-decoration: underline;}*/
/*a:hover {background-color:#3C6E31;color:white;}*/
/*input.radio {margin: 0 2px 0 8px;}*/
/*input.radio.first {margin-left:0;}*/
/*input.empty {color: lightgray;}*/
/*code {color: #2f332a;}*/
/*.highlight_red {color:#A60000;}*/
/*.highlight_green {color:#A7F43D;}*/
/*li {list-style: circle;font-size: 12px;}*/
/*li.title {list-style: none;}*/
/*ul.list {margin-left: 17px;}*/

div.content_wrap {width: 600px;height:380px;}
div.content_wrap div.left{float: left;width: 250px;}
div.content_wrap div.right{float: right;width: 340px;}
div.zTreeDemoBackground {width:250px;height:362px;text-align:left;}
/*div.content-wrapper {width: 600px;height:380px;}*/
div.content-wrapper div.left{float: left; position: relative}
div.content-wrapper div.right{float: left; position: relative}
div.zTreeDemoBackground {width:250px;height:450px;text-align:left;}

ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
ul.ztree {margin-top: 10px;width:220px;height:440px;overflow-y:scroll;overflow-x:auto;}
ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
ul.log.small {height:45px;}
ul.log li {color: #666666;list-style: none;padding-left: 10px;}
ul.log li.dark {background-color: #E3E3E3;}

/* ruler */
div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}
/*div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}*/
/*div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}*/
2 changes: 1 addition & 1 deletion templates/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
<div class="pull-right hidden-xs">
</div>
<!-- Default to the left bar -->
<a href="http://adminset.cn" target="view_window">AdminSet</a> v0.31-beta
<a href="http://adminset.cn" target="view_window">AdminSet</a> v0.32-beta
</footer>
42 changes: 11 additions & 31 deletions templates/monitor/host_info.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,19 @@
{% extends 'base.html' %}
{% block self_head_css_js %}
<script src="/static/js/echarts.min.js"></script>
{% endblock %}
{% block content %}
<script>
window.onload=init;
function init() {
showhide(1);
}
function showhide(n) {
var box = document.getElementById("monitor");
box.className="active";
}
</script>
{% include 'monitor/test.html' %}
<head>
{% include 'head_script.html' %}
{% include 'link_css.html' %}
<script src="/static/js/echarts.min.js"></script>
</head>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section style="float:left;">
<ul id="treeDemo" class="ztree"></ul>
</section>
<!-- Main content -->
<section class="content" style="position:relative;">
<div class="box-info">
<div class="box-header with-border">
<h3 class="box-title">{{ hostname }} 监控信息</h3>
<h5 class="box-title">{{ hostname }}</h5>
</div>
<div class="box-body">
<div class="btn-group btn-group-lg">
<a href="{% url 'host_info' hostname 0 %}"><span class="btn btn-default .btn-flat active">一小时</span></a>
<a href="{% url 'host_info' hostname 0 %}"><span class="btn btn-default .btn-flat">一小时</span></a>
</div>
<div class="btn-group btn-group-lg">
<a href="{% url 'host_info' hostname 1 %}"><span class="btn btn-default .btn-flat">三小时</span></a>
Expand All @@ -44,21 +30,16 @@ <h3 class="box-title">{{ hostname }} 监控信息</h3>
<div class="btn-group btn-group-lg">
<a href="{% url 'host_info' hostname 5 %}"><span class="btn btn-default .btn-flat">一周</span></a>
</div>
<div id="cpu" style="width: 650px;height:260px;"></div>
<div id="memory" style="width: 650px;height:260px;"></div>
<div id="cpu" style="width: 600px;height:220px;"></div>
<div id="memory" style="width: 600px;height:220px;"></div>
{% for p in partitions_len %}
<div id="disk{{ p }}" style="width: 650px;height:260px;"></div>
<div id="disk{{ p }}" style="width: 600px;height:220px;"></div>
{% endfor %}
{% for n in nic_len %}
<div id="net{{ n }}" style="width: 650px;height:260px;">1234</div>
<div id="net{{ n }}" style="width: 600px;height:220px;">1234</div>
{% endfor %}

</div>
<!-- /.row -->
<!-- /.box-body -->
{# <div class="box-footer">#}
{# </div>#}
<!-- /.box-footer-->
</div>
<script type="text/javascript">
var timing={{ timing }}; //通过URL传递元组数值调用7天数据
Expand All @@ -67,4 +48,3 @@ <h3 class="box-title">{{ hostname }} 监控信息</h3>
</section>
<!-- /.content -->
</div>
{% endblock %}
55 changes: 27 additions & 28 deletions templates/monitor/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
{% extends 'base.html' %}
{% block self_head_css_js %}
<script src="/static/js/echarts.min.js"></script>
<script src="/static/layer/layer.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/static/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="/static/ztree/js/jquery.ztree.core.js"></script>
<link rel="stylesheet" href="/static/ztree/css/demo.css" type="text/css">
<script type="text/javascript" src="/static/ztree/js/jquery.ztree.core.js"></script>
{% endblock %}
{% block content %}
<script>
Expand All @@ -20,15 +22,29 @@
</script>
<SCRIPT type="text/javascript">
var setting = {
async: {
enable: true,
autoParam:["id"],
type: "post",
url: "{% url 'host_tree' %}"
}
};
async: {
enable: true,
autoParam:["name"],
type: "post",
url: "{% url 'host_tree' %}"
},


{# callback: {#}
{# onClick: zTreeOnClick#}
{# },#}

view: {
dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
showLine: true,//是否显示节点之间的连线
{# fontCss:{'color':'black','font-weight':'bold'},//字体样式函数#}
selectedMulti: false //设置是否允许同时选中多个节点
}

};
{# function zTreeOnClick(event, treeId, treeNode) {#}
{# alert(treeNode.tId + ", " + treeNode.name);#}
//}
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
Expand All @@ -42,31 +58,14 @@
</section>
<!-- Main content -->
<section class="content">
<div style="float: left">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div>
<div class="box-body" >
{% if all_host %}
{% for host in all_host %}
<a href="{% url 'host_info' host.hostname 0 %}">
<div class="col-md-3" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title" >{{ host.hostname }}</h3>
</div><!-- /.box-header -->
<div class="box-body">
{{ host.ip }}
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</a>
{% endfor %}
{% endif %}
<div class="right">
<iframe name="myframe" width="650" height="450" frameborder="0"></iframe>
</div>
<!-- /.box-body -->
<!-- /.box-footer-->
</div>

<!-- Your Page Content Here -->
</section>
Expand Down

0 comments on commit 5c9f9e5

Please sign in to comment.