效果图
一、模拟环境
1、路由表(使用到了get_env_info和dynamic路由)
urlpatterns = [
url(r'^get_env_info/$', views.get_env_info, name='get_env_info'),
url(r'^dynamic/$', views.dynamic, name='dynamic'),
]
2、视图代码
def get_env_info(request):
return render(request, 'test.html')
def dynamic(request):
ip = request.GET['ip']
cpu_usage = randrange(0, 100)
ram_usage = randrange(0, 100)
rom_usage = randrange(0, 100)
context = {'host': ip,
'cpuusage': cpu_usage,
'ramusage': ram_usage,
'romusage': rom_usage,
}
print(context)
return response_as_json(context)
def response_as_json(data):
json_str = json.dumps(data)
response = HttpResponse(
json_str,
content_type="application/json",
)
response["Access-Control-Allow-Origin"] = "*"
return response
3、模板test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<p>环境实时监控</p>
<input type="text" id='ip' name="ip" value="127.0.0.1"><br>
<input type="text" id='username' value=""><br>
<input type="text" id='password' value=""><br><br>
<span style="font-size:10px">cpu使用率:</span>
<span style="font-size:5px" id="cpu">0</span><br>
<progress id='cpuusage' name="cpuusage" value="22" max="100"></progress><br><br>
<span style="font-size:10px">ram使用率:</span>
<span style="font-size:5px" id="ram">0</span><br>
<progress id='ramusage' name="ramusage" value="22" max="100"></progress><br><br>
<span style="font-size:10px">rom使用率:</span>
<span style="font-size:5px" id="rom">0</span><br>
<progress id='romusage' name="romusage" value="22" max="100"></progress><br><br>
<script>
$(function() {
function getenvinfo (ip){
if (ip.length>8){
$.ajax({
type:'GET',
url:'http://127.0.0.1:8000/upgrade/dynamic',
data:{
ip:ip,
'username': $('#username').val(),
'password': $('#password').val()
},
success:function (result) {
console.log(result)
$('#cpuusage').html(result.cpuusage)
$('#ramusage').html(result.ramusage)
$('#romusage').html(result.romusage)
$('#cpu').html(result.cpuusage)
$('#ram').html(result.ramusage)
$('#rom').html(result.romusage)
},
error:function (e) {
console.log(e.status);
}
});
}
}
$('#ip').on('blur',function (){
getenvinfo($(this).val())
});
$('#ip').keyup(function(event){
if(event.keyCode ==13){
getenvinfo($(this).val())
}
});
setInterval(function (){
getenvinfo($('#ip').val())
},10000)
});
</script>
</body>
</html>
二、真实场景下修改view
def get_info(host)
#打开ssh客户端
ssh= paramiko.SSHClient()
# 设置为接受不在known_hosts 列表的主机可以进行ssh连接
ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
ssh.connect(hostname=host['ip'], port=host['port'], username=host['username'], password=host['password'])
#获取内存信息
stdin, stdout, stderr= ssh.exec_command('sudo free -m|grep Mem')
str_out= stdout.read().decode()
totalmem= str(str_out).split(" ")[1].replace(" ","")
freemem= str(str_out).split(" ")[2].replace(" ","")
ram_usage= str(int(freemem)/int(totalmem)*100).split(".")[0]+"%"
#获取cpu信息
stdin, stdout, stderr= ssh.exec_command('top -bn 1 -i -c|grep us|grep id')
str_out= str(stdout.read().decode()).replace(" ","")
cpu_usage= str(100-int(str_out.split(",")[3].split(".")[0]))+"%"
#获取磁盘信息
stdin, stdout, stderr= ssh.exec_command('df -h|grep G |grep -o [0-9]*%|grep [0-9][0-9]')
str_out= stdout.read().decode()
rom_usage= str(str_out).replace("\n","")
#关闭ssh客户端
ssh.close()
return {'ip': host['ip'], 'cpuusage': cpu_usage, 'ramusage': ram_usage, 'romusage': rom_usage}
def dynamic(request):
host = {}
if request.method == 'GET':
host['ip'] = request.GET['ip']
host['username'] = request.GET['username']
host['password'] = request.GET['password']
host['port'] = 22
context = get_info(host)
print(context)
return response_as_json(context)