Django 实现自动化运维后台
最编程
2024-02-25 16:12:14
...
layui 框架与BootCSS框架相似都属于前端美化框架,区别在于BootCSS更加专业,而LayUI则更多的是面向于后端开发者,所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。
下面的页面作为基模板,取名为 base.html 后期子模版,全部继承它。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动化监控平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/echarts.js"></script>
<script type="text/javascript" src="https://www.blib.cn/cdn/jquery.js"></script>
</head>
{% block css %}
<style>
.layui-layout-admin .layui-body {
background-color: #eee;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
}
.layui-layout-admin .layui-logo {
font-size: 20px;
}
.layui-layout-admin .layui-footer {
background-color: rgba(242, 242, 242, 0);
text-align:center;
}
</style>
{% endblock %}
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo"> <i class="layui-icon layui-icon-component" style="font-size: 35px;"></i> 自动化监控平台</div>
<!-- 头部区域 -->
<ul class="layui-nav layui-layout-left ">
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="javascript:;" layadmin-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
</a>
</li>
<li class="layui-nav-item"><a href="/">仪表盘</a></li>
<li class="layui-nav-item">
<a href="javascript:;">安全配置</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
</dl>
</li>
</ul>
<!-- 右上角的基本资料配置区域-->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="https://www.blib.cn/cdn/head.jpg" class="layui-nav-img"> LyShark
</a>
<dl class="layui-nav-child">
<dd><a href="">安全设置</a></dd>
<dd><a href="">用户注销</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域 -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed layui-this">
<a class="" href="/"><i class="layui-icon layui-icon-theme"></i> 仪表盘</a>
</li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-table"></i> 主机管理</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-chart"></i> 动态监控</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-time"></i> 图形查询</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-search"></i> 日志检索</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-next"></i> 远程命令</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-set"></i> 系统设置</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-auz"></i></i> 授权管理</a></li>
</ul>
</div>
</div>
<!-- 内容主体区域 -->
<div class="layui-body">
{% block content %}
{% endblock %}
</div>
<div class="layui-footer"> C 2018 -2020 版权所有 LyShark 保留所有权利</div>
</div>
<script src="https://www.blib.cn/cdn/layui/layui.js"></script>
<script>
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
创建仪表盘子页面,此处就叫 main.html 这里直接继承base.html
{% extends "base.html" %}
{% block content %}
<!-- 系统图形统计,用于统计本机CPU利用率,内存利用率,与磁盘等数据,后期添加-->
<div class="layui-card" style="width:100%; height: 30%;float:left;">
<div class="layui-card-header">当前系统状态</div>
<div class="layui-card-body">
等待添加统计图形功能。
<br>
</div>
</div>
<div class="layui-card" style="width:49%; height: 60%;float:left;">
<div class="layui-card-header">CPU利用率</div>
<div class="layui-card-body">
等待添加统计图形功能。
<br>
</div>
</div>
<div class="layui-card" style="width:49%; height: 60%;float:right;">
<div class="layui-card-header">内存利用率</div>
<div class="layui-card-body">
等待添加统计图形功能。
<br>
</div>
</div>
{% endblock %}
urls.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path("",views.main)
]
上面的代码a标签如果被填上待跳转路径就会出现,跳转虽然实现了,但是a标签无法高亮,解决的办法这里我想到了一个比较笨的方法。
var Arry = ["/host/","/logs/"];
for(var x=0;x<10;x++)
{
var log = window.location.pathname;
if (Arry[x] == log){
$(".layui-side-scroll li").removeClass("layui-nav-itemed")[0];
$(".layui-side-scroll li").removeClass("layui-this")[0];
$(".layui-side-scroll li").next().eq(x).addClass("layui-this");
$(".layui-side-scroll li").next().eq(x).addClass("layui-nav-itemed");
}
}
最终的效果是这样的。
我们继续完善这个main.html 页面,仪表盘用于统计本机数据。
{% extends "base.html" %}
{% block content %}
<style>
.layui-badge {
position: absolute;
top: 50%;
margin-top: -9px;
right: 15px;
}
.title-color {
font-style: normal;
font-size: 30px;
font-weight: 300;
color: #009688;
}
.layui-span-color {
font-size: 14px;
position: absolute;
right: 15px;
}
</style>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 格栅,四个面板,之间相隔一定的距离-->
<div class="layui-row layui-col-space15">
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">在线用户
<span class="layui-badge layui-bg-blue">Local User</span>
</div>
<div class="layui-card-body">
<p class="title-color">1 Users</p><br>
<p>
总活跃用户<span class="layui-span-color">1 <i class="layui-inline layui-icon layui-icon-flag"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">本机进程数
<span class="layui-badge layui-bg-green">Process ID</span>
</div>
<div class="layui-card-body">
<p class="title-color">248 Process</p><br>
<p>
总活进程数<span class="layui-span-color">248 <i class="layui-inline layui-icon layui-icon-face-smile-b"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">管理主机数量
<span class="layui-badge layui-bg-red"> Host Count</span>
</div>
<div class="layui-card-body">
<p class="title-color">256 Hosting</p><br>
<p>
管理主机数量<span class="layui-span-color">248 <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">当前活跃会话
<span class="layui-badge layui-bg-orange"> Local Sesion</span>
</div>
<div class="layui-card-body">
<p class="title-color">1 Session</p><br>
<p>
活跃的会话<span class="layui-span-color">1 <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
</div>
<br>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 系统图形统计,用于统计本机CPU利用率,内存利用率,与磁盘等数据,后期添加-->
<div class="layui-card" style="width:100%; height: 30%;float:left;">
<div class="layui-card-header">系统CPU负载</div>
<div class="layui-card-body">
等待添加统计图形功能。
<br>
</div>
</div>
<div class="layui-card" style="width:49%; height: 60%;float:left;">
<div class="layui-card-header">内存利用率</div>
<div class="layui-card-body">
等待添加统计图形功能。
<br>
</div>
</div>
<div class="layui-card" style="width:49%; height: 60%;float:right;">
<div class="layui-card-header">网络数据包</div>
<div class="layui-card-body">
等待添加统计图形功能。
<br>
</div>
</div>
{% endblock %}
接着使用WebSocket打通一条隧道,并持续更新图形。
{% extends "base.html" %}
{% block content %}
<style>
.layui-badge {
position: absolute;
top: 50%;
margin-top: -9px;
right: 15px;
}
.title-color {
font-style: normal;
font-size: 30px;
font-weight: 300;
color: #009688;
}
.layui-span-color {
font-size: 14px;
position: absolute;
right: 15px;
}
</style>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 格栅,四个面板,之间相隔一定的距离-->
<div class="layui-row layui-col-space15">
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">在线用户
<span class="layui-badge layui-bg-blue">Local User</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Count }} Users</p><br>
<p>
总活跃用户<span class="layui-span-color">{{ User_Count }} <i class="layui-inline layui-icon layui-icon-username"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">本机进程数
<span class="layui-badge layui-bg-green">Process ID</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Proc }} Process</p><br>
<p>
总活进程数<span class="layui-span-color">{{ User_Proc }} <i class="layui-inline layui-icon layui-icon-chart-screen"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">管理主机数量
<span class="layui-badge layui-bg-red"> Host Count</span>
</div>
<div class="layui-card-body">
<p class="title-color">256 Hosting</p><br>
<p>
管理主机数量<span class="layui-span-color">248 <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">当前活跃会话
<span class="layui-badge layui-bg-orange"> Local Sesion</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Count }} Session</p><br>
<p>
活跃的会话<span class="layui-span-color">{{ User_Count }} <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
</div>
<br>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 系统图形统计: 动态统计系统CPU负载情况,包括CPU5,10,15等-->
<div class="layui-card" style="width:100%; height: 70%;float:left; ">
<div class="layui-card-header">系统CPU负载</div>
<div class="layui-card-body">
<div id="main" style="width:100%; height: 400px;"></div>
<br>
</div>
</div>
<script type="text/javascript">
var time =["","","","","","","","","","","","","","","","","","","",""];
var cpu_load1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var cpu_load5 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var cpu_load10 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var sock = new WebSocket("ws://" + window.location.host + "/");
sock.addEventListener("message",function (recv) {
var js = JSON.parse(recv.data);
time.push(js['time']);
cpu_load1.push(parseFloat(js['load'][0]));
cpu_load5.push(parseFloat(js['load'][1]));
cpu_load10.push(parseFloat(js['load'][2]));
if (time.length >=20){
time.shift();
cpu_load1.shift();
cpu_load5.shift();
cpu_load10.shift();
}
var main = echarts.init(document.getElementById(("main")));
var option = {
legend:{
data:['1分钟负载','5分钟负载','10分钟负载']
},
xAxis: {
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [{
name: "1分钟负载",
type: 'line',
data: cpu_load1,
areaStyle:{}
}, {
name: "5分钟负载",
type: 'line',
data: cpu_load5,
areaStyle:{}
}, {
name: "10分钟负载",
type: 'line',
data: cpu_load10,
areaStyle:{}
}]
};
main.setOption(option,true);
});
window.sock = sock;
</script>
{% endblock %}
view.py
from django.shortcuts import render
from dwebsocket.decorators import accept_websocket
import psutil,time,json
@accept_websocket
def main(request):
if not request.is_websocket():
User_Count = len(psutil.users())
User_Proc = len(psutil.pids())
return render(request, "main.html", {"User_Count": User_Count, "User_Proc": User_Proc})
else:
while True:
times = time.strftime("%M:%S", time.localtime())
data = psutil.cpu_percent(interval=None, percpu=True)
js = {"time":times,"load":data}
sen = json.dumps(js)
request.websocket.send(sen)
time.sleep(1)
添加内存监控图形,老样子,继续加就是了,动态图形。
{% extends "base.html" %}
{% block content %}
<style>
.layui-badge {
position: absolute;
top: 50%;
margin-top: -9px;
right: 15px;
}
.title-color {
font-style: normal;
font-size: 30px;
font-weight: 300;
color: #009688;
}
.layui-span-color {
font-size: 14px;
position: absolute;
right: 15px;
}
</style>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 格栅,四个面板,之间相隔一定的距离-->
<div class="layui-row layui-col-space15">
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">在线用户
<span class="layui-badge layui-bg-blue">Local User</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Count }} Users</p><br>
<p>
总活跃用户<span class="layui-span-color">{{ User_Count }} <i class="layui-inline layui-icon layui-icon-username"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">本机进程数
<span class="layui-badge layui-bg-green">Process ID</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Proc }} Process</p><br>
<p>
总活进程数<span class="layui-span-color">{{ User_Proc }} <i class="layui-inline layui-icon layui-icon-chart-screen"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">管理主机数量
<span class="layui-badge layui-bg-red"> Host Count</span>
</div>
<div class="layui-card-body">
<p class="title-color">256 Hosting</p><br>
<p>
管理主机数量<span class="layui-span-color">248 <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">当前活跃会话
<span class="layui-badge layui-bg-orange"> Local Sesion</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Count }} Session</p><br>
<p>
活跃的会话<span class="layui-span-color">{{ User_Count }} <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
</div>
<br>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 系统图形统计: 动态统计系统CPU负载情况,包括CPU5,10,15等-->
<div class="layui-card" style="width:100%; height: 70%;float:left; ">
<div class="layui-card-header">系统CPU负载</div>
<div class="layui-card-body">
<div id="cpu_load" style="width:100%; height: 400px;"></div>
<br>
</div>
</div>
<script type="text/javascript">
var time =["","","","","","","","","","","","","","","","","","","",""];
var cpu_load1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var cpu_load5 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var cpu_load10 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var sock = new WebSocket("ws://" + window.location.host + "/");
sock.addEventListener("message",function (recv) {
var js = JSON.parse(recv.data);
time.push(js['time']);
cpu_load1.push(parseFloat(js['load'][0]));
cpu_load5.push(parseFloat(js['load'][1]));
cpu_load10.push(parseFloat(js['load'][2]));
if (time.length >=20){
time.shift();
cpu_load1.shift();
cpu_load5.shift();
cpu_load10.shift();
}
var cpu_load = echarts.init(document.getElementById(("cpu_load")));
var option = {
legend:{
data:['1分钟负载','5分钟负载','10分钟负载']
},
xAxis: {
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [{
name: "1分钟负载",
type: 'line',
data: cpu_load1,
areaStyle:{}
}, {
name: "5分钟负载",
type: 'line',
data: cpu_load5,
areaStyle:{}
}, {
name: "10分钟负载",
type: 'line',
data: cpu_load10,
areaStyle:{}
}]
};
cpu_load.setOption(option,true);
});
window.sock = sock;
</script>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 同理,内存负载相同,websocket 可以重复使用-->
<div class="layui-card" style="width:100%; height: 70%;float:left; ">
<div class="layui-card-header">系统内存统计</div>
<div class="layui-card-body">
<div id="mem" style="width:100%; height: 400px;"></div>
<br>
</div>
</div>
<script type="text/javascript">
var time =["","","","","","","","","","","","","","","","","","","",""];
var mem_load = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var sock = new WebSocket("ws://" + window.location.host + "/");
sock.addEventListener("message",function (recv) {
var js_mem = JSON.parse(recv.data);
time.push(js_mem['time']);
mem_load.push(parseFloat(js_mem['mem_used']));
if (time.length >= 20) {
time.shift();
mem_load.shift();
}
console.log(mem_load);
var mem = echarts.init(document.getElementById(("mem")));
var option = {
xAxis: {
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: mem_load,
areaStyle:{}
}]
};
mem.setOption(option,true);
});
window.sock = sock;
</script>
{% endblock %}
view.py
from django.shortcuts import render
from dwebsocket.decorators import accept_websocket
import psutil,time,json
@accept_websocket
def main(request):
if not request.is_websocket():
User_Count = len(psutil.users())
User_Proc = len(psutil.pids())
return render(request, "main.html", {"User_Count": User_Count, "User_Proc": User_Proc})
else:
while True:
times = time.strftime("%M:%S", time.localtime())
data = psutil.cpu_percent(interval=None, percpu=True)
mem = psutil.virtual_memory()
mem_total = int(mem.total / 1024 / 1024)
mem_used = int(mem.used / 1024 / 1024)
js = {"time":times,"load":data,"mem_used":mem_used}
sen = json.dumps(js)
request.websocket.send(sen)
time.sleep(1)
源代码案例
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动化监控平台</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/layui/layui.js"></script>
<script type="text/javascript" src="https://www.blib.cn/cdn/echarts.js"></script>
<script type="text/javascript" src="https://www.blib.cn/cdn/jquery.js"></script>
</head>
{% block css %}
<style>
.layui-layout-admin .layui-body {
background-color: #eee;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
}
.layui-layout-admin .layui-logo {
font-size: 20px;
}
.layui-layout-admin .layui-footer {
background-color: rgba(242, 242, 242, 0);
text-align:center;
}
</style>
{% endblock %}
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo"> <i class="layui-icon layui-icon-component" style="font-size: 35px;"></i> 自动化监控平台</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left ">
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="javascript:;" layadmin-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
</a>
</li>
<li class="layui-nav-item"><a href="/">仪表盘</a></li>
<li class="layui-nav-item">
<a href="javascript:;">安全配置</a>
<dl class="layui-nav-child">
<dd><a href="">邮件管理</a></dd>
<dd><a href="">消息管理</a></dd>
</dl>
</li>
</ul>
<!-- 右上角的基本资料配置区域-->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="https://www.blib.cn/cdn/head.jpg" class="layui-nav-img"> LyShark
</a>
<dl class="layui-nav-child">
<dd><a href="">安全设置</a></dd>
<dd><a href="">用户注销</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed layui-this">
<a class="" href="/"><i class="layui-icon layui-icon-theme"></i> 仪表盘</a>
</li>
<li class="layui-nav-item"><a href="/host/"><i class="layui-icon layui-icon-table"></i> 主机管理</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-chart"></i> 动态监控</a></li>
</ul>
</div>
</div>
<!-- 内容主体区域 -->
<div class="layui-body">
{% block content %}
{% endblock %}
</div>
<div class="layui-footer"> C 2018 -2020 版权所有 LyShark 保留所有权利</div>
</div>
<script type="text/javascript">
var Arry = ["/host/","/logs/"];
for(var x=0;x<5;x++)
{
var log = window.location.pathname;
if (Arry[x] == log){
$(".layui-side-scroll li").removeClass("layui-nav-itemed")[0];
$(".layui-side-scroll li").removeClass("layui-this")[0];
$(".layui-side-scroll li").next().eq(x).addClass("layui-this");
$(".layui-side-scroll li").next().eq(x).addClass("layui-nav-itemed");
}
}
</script>
<script type="text/javascript">
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
host.html
{% extends "base.html" %}
{% block content %}
<div class="layui-card" style="width:100%; height: 500px;float:left;">
<div class="layui-card-header">系统主机组管理</div>
<div class="layui-card-body">
<table class="layui-hide" id="demo" lay-filter="test"></table>
<br>
</div>
</div>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
layui.use('table', function(){
var table = layui.table;
//执行一个 table 实例
table.render({
elem: '#demo'
,height: 420
,url: '/get_host' //数据接口
,title: '用户表'
,page: true //开启分页
,limit:10
,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field:'id', title:'主机ID', width:100, sort: true},
{field:'hostname', title:'主机名称', width:120},
{field:'hostaddr', title:'主机地址', width:120},
{field:'hostmode', title:'主机组', width:120},
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
]]
});
//监听头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id)
,data = checkStatus.data; //获取选中的数据
switch(obj.event){
case 'add':
layer.msg('添加');
break;
case 'update':
if(data.length === 0){
layer.msg('请选择一行');
} else if(data.length > 1){
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]:'+ checkStatus.data[0].id);
}
break;
case 'delete':
if(data.length === 0){
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});
//监听行工具事件
table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
,layEvent = obj.event; //获得 lay-event 对应的值
if(layEvent === 'detail'){
layer.msg('查看操作');
} else if(layEvent === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行(tr)的DOM结构
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){
layer.msg('编辑操作');
}
});
//分页
laypage.render({
elem: 'demo' //分页容器的id
,count: 100 //总页数
,skin: '#1E9FFF' //自定义选中色值
//,skip: true //开启跳页
,jump: function(obj, first){
if(!first){
layer.msg('第'+ obj.curr +'页', {offset: 'b'});
}
}
});
});
</script>
{% endblock %}
main.html
{% extends "base.html" %}
{% block content %}
<style>
.layui-badge {
position: absolute;
top: 50%;
margin-top: -9px;
right: 15px;
}
.title-color {
font-style: normal;
font-size: 30px;
font-weight: 300;
color: #009688;
}
.layui-span-color {
font-size: 14px;
position: absolute;
right: 15px;
}
</style>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 格栅,四个面板,之间相隔一定的距离-->
<div class="layui-row layui-col-space15">
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">在线用户
<span class="layui-badge layui-bg-blue">Local User</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Count }} Users</p><br>
<p>
总活跃用户<span class="layui-span-color">{{ User_Count }} <i class="layui-inline layui-icon layui-icon-username"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">本机进程数
<span class="layui-badge layui-bg-green">Process ID</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Proc }} Process</p><br>
<p>
总活进程数<span class="layui-span-color">{{ User_Proc }} <i class="layui-inline layui-icon layui-icon-chart-screen"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">管理主机数量
<span class="layui-badge layui-bg-red"> Host Count</span>
</div>
<div class="layui-card-body">
<p class="title-color">256 Hosting</p><br>
<p>
管理主机数量<span class="layui-span-color">248 <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">当前活跃会话
<span class="layui-badge layui-bg-orange"> Local Sesion</span>
</div>
<div class="layui-card-body">
<p class="title-color">{{ User_Count }} Session</p><br>
<p>
活跃的会话<span class="layui-span-color">{{ User_Count }} <i class="layui-inline layui-icon layui-icon-user"></i></span>
</p>
</div>
</div>
</div>
</div>
<br>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 系统图形统计: 动态统计系统CPU负载情况,包括CPU5,10,15等-->
<div class="layui-card" style="width:100%; height: 70%;float:left; ">
<div class="layui-card-header">系统CPU负载</div>
<div class="layui-card-body">
<div id="cpu_load" style="width:100%; height: 400px;"></div>
<br>
</div>
</div>
<script type="text/javascript">
var time =["","","","","","","","","","","","","","","","","","","",""];
var cpu_load1 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var cpu_load5 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var cpu_load10 = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var sock = new WebSocket("ws://" + window.location.host + "/");
sock.addEventListener("message",function (recv) {
var js = JSON.parse(recv.data);
time.push(js['time']);
cpu_load1.push(parseFloat(js['load'][0]));
cpu_load5.push(parseFloat(js['load'][1]));
cpu_load10.push(parseFloat(js['load'][2]));
if (time.length >=20){
time.shift();
cpu_load1.shift();
cpu_load5.shift();
cpu_load10.shift();
}
var cpu_load = echarts.init(document.getElementById(("cpu_load")));
var option = {
legend:{
data:['1分钟负载','5分钟负载','10分钟负载']
},
xAxis: {
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [{
name: "1分钟负载",
type: 'line',
data: cpu_load1,
areaStyle:{}
}, {
name: "5分钟负载",
type: 'line',
data: cpu_load5,
areaStyle:{}
}, {
name: "10分钟负载",
type: 'line',
data: cpu_load10,
areaStyle:{}
}]
};
cpu_load.setOption(option,true);
});
window.sock = sock;
</script>
<!--------------------------------------------------------------------------------------------------------------->
<!-- 同理,内存负载相同,websocket 可以重复使用-->
<div class="layui-card" style="width:100%; height: 70%;float:left; ">
<div class="layui-card-header">系统内存统计</div>
<div class="layui-card-body">
<div id="mem" style="width:100%; height: 400px;"></div>
<br>
</div>
</div>
<script type="text/javascript">
var time =["","","","","","","","","","","","","","","","","","","",""];
var mem_load = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var sock = new WebSocket("ws://" + window.location.host + "/");
sock.addEventListener("message",function (recv) {
var js_mem = JSON.parse(recv.data);
time.push(js_mem['time']);
mem_load.push(parseFloat(js_mem['mem_used']));
console.log(mem_load)
if (time.length >= 20) {
time.shift();
mem_load.shift();
}
console.log(mem_load);
var mem = echarts.init(document.getElementById(("mem")));
var option = {
xAxis: {
type: 'category',
data: time
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: mem_load,
areaStyle:{}
}]
};
mem.setOption(option,true);
});
window.sock = sock;
</script>
{% endblock %}
urls.py
from MyWeb import views
urlpatterns = [
path('admin/', admin.site.urls),
path("",views.main),
path("get_host/",views.get_host),
path("host/",views.host),
]
views.py
from django.shortcuts import render,HttpResponse
from dwebsocket.decorators import accept_websocket
import psutil,time,json
from MyWeb import models
@accept_websocket
def main(request):
if not request.is_websocket():
User_Count = len(psutil.users())
User_Proc = len(psutil.pids())
return render(request, "main.html", {"User_Count": User_Count, "User_Proc": User_Proc})
else:
while True:
times = time.strftime("%M:%S", time.localtime())
data = psutil.cpu_percent(interval=None, percpu=True)
mem = psutil.virtual_memory()
mem_used = int(mem.used / 1024 / 1024)
print(mem_used)
js = {"time":times,"load":data,"mem_used":mem_used}
sen = json.dumps(js)
request.websocket.send(sen)
time.sleep(1)
# 主机列表获取接口
def get_host(request):
ret = []
obj = models.HostDB.objects.all()
for item in range(0,len(obj)):
ret.append(obj.values()[item])
data = {
"code":0,
"msg":"",
"count":15,
"total":1,
"data": ret
}
return HttpResponse(json.dumps(data))
# 返回主机页面数据,或执行删除操作等
def host(request):
return render(request,"host.html")
完整前端代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自动化监控平台</title>
<link rel="stylesheet" href="https://www.blib.cn/cdn/layui/2.5.7/css/layui.css">
<script type="text/javascript" src="https://www.blib.cn/cdn/layui/2.5.7/layui.js"></script>
</head>
<style>
.layui-layout-admin .layui-body {
background-color: #eee;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
}
.layui-layout-admin .layui-logo {
font-size: 20px;
color: #fbfbfb;
background-color: #1e9fff !important;
}
.layui-layout-admin .layui-footer {
background-color: rgba(242, 242, 242, 0);
text-align:center;
}
</style>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo"> <i style="font-size: 35px;"></i> 自动化监控平台</div>
<!-- 头部区域(可配合layui已有的水平导航) -->
<ul class="layui-nav layui-layout-left ">
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<a href="javascript:;" layadmin-event="fullscreen">
<i class="layui-icon layui-icon-screen-full"></i>
</a>
</li>
<li class="layui-nav-item"> <a href="/"><i class="layui-icon layui-icon-theme"></i> 仪表盘</a></li>
<li class="layui-nav-item layui-hide-xs" lay-unselect="">
<input type="text" placeholder="搜索..." autocomplete="off" class="layui-input layui-input-search">
</li>
</ul>
<!-- 右上角的基本资料配置区域-->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="https://images.cnblogs.com/cnblogs_com/LyShark/1829666/o_200817070132o_security.png" class="layui-nav-img"> LyShark
</a>
<dl class="layui-nav-child">
<dd><a href="">密码修改</a></dd>
<dd><a href="">用户注销</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test" >
<li class="layui-nav-item layui-nav-itemed layui-this">
<a class="" href="javascript:;"><i class="layui-icon layui-icon-theme"></i> 仪表盘</a>
</li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-table"></i> 主机管理</a></li>
<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-chart"></i> 动态监控</a></li>
<li data-name="home" class="layui-nav-item">
<a href="javascript:;" lay-tips="权限管理" lay-direction="2">
<i class="layui-icon layui-icon-auz"></i>
<cite>权限管理</cite>
<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child">
<dd data-name="console" class="layui-this">
<a lay-href="home/console.html">密码修改</a>
</dd>
<dd data-name="console">
<a lay-href="home/homepage1.html">创建用户</a>
</dd>
<dd data-name="console">
<a lay-href="home/homepage2.html">注销</a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 内容主体区域 -->
<div class="layui-body">
{% block content %}
{% endblock %}
</div>
<!--页脚部分-->
<div class="layui-footer"> C 2018 -2021 自动化运维平台 By:LyShark</div></div>
<!--
<script type="text/javascript">
var Arry = ["/host/","/logs/"];
for(var x=0;x<5;x++)
{
var log = window.location.pathname;
if (Arry[x] == log){
$(".layui-side-scroll li").removeClass("layui-nav-itemed")[0];
$(".layui-side-scroll li").removeClass("layui-this")[0];
$(".layui-side-scroll li").next().eq(x).addClass("layui-this");
$(".layui-side-scroll li").next().eq(x).addClass("layui-nav-itemed");
}
}
</script>
-->
<script type="text/javascript">
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
上一篇: 美团猫眼电影Android模块化实战总结
推荐阅读
-
从研究角度看如何实现基于机器学习的智能运维
-
测试运维】Web 自动化全知识点笔记 编号:什么是 Web 自动化测试(已分享,附代码)
-
高性能龙卷风框架的简单实现、restful 接口和运维开发示例
-
珈伟蓝鲸数字化运维中心V5版本发布,可视化全面升级,助力企业实现数字化运维!
-
腾讯蓝鲸自动化运维平台部署及常见错误解决方案
-
腾讯] 运维自动化新途径--标准运维企业应用案例分享
-
[自动化运维】初识腾讯蓝鲸!
-
广联达:"数字建筑 "将推动建筑业向现代工业化水平迈进--一是全过程、全要素、全参与方的数字化。"数字建筑 "整合了人员、流程、数据、技术和业务系统,对建筑从规划设计到施工建设、运营维护的全生命周期进行管理。 二是数字化、在线化、智能化。这也是数字化建筑的三大典型特征。其中,数字化是基础,在线化是关键,智能化是目标。 三是新设计、新建设、新运维。试想,未来通过全数字化样板设计实现个性化最优方案,通过工业化施工提高效率精益求精,通过智能化运维提升建筑品质低碳宜居,将推动建筑业向现代工业化水平迈进。 广联达的一批标杆项目和应用案例备受关注。
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
Linux 运维工程师的发展前景 - 1.4 建立高效的 IT 自动化运维管理