72 views

可视化显示内存监控信息之Django+Bootstrap框架

By | 2019年2月28日

做我们高防CDN这块的,监控这方面是必不可少的,也是运维的根本,今天给大家分享下运维监控的示例:

一、配置准备
1)Django 1.9.13
2)Bootstrap 2.2.2
3)jquery 1.8.3
4)mariadb 10.2.17
5)ECharts

二、设计流程:

1.项目配置初始化

1.1 新建一个Devops数据库,再新建一个Django项目,改好settings.py配置文件,做好路由映射,设置静态文件地址和模板目录地址,改好models模型,新添一个memory_info类,在类中添加必要的字段:

memory_info类,在类中添加必要的字段:
class memory_info(models.Model):
minion_id = models.CharField(max_length=20,null=False)
memory_total = models.IntegerField(default=0)
memory_used = models.IntegerField(default=0)
memory_free = models.IntegerField(default=0)
memory_share = models.IntegerField(default=0)
memory_bu_ca = models.IntegerField(default=0)
memory_available = models.IntegerField(default=0)
memory_time = models.DateTimeField(default=timezone.now)

1.2 初始化数据库
python manage.py makemigrations
python manage.py migrate

2.内存监控脚本完善

2.1 首先就是分析系统中内存的信息,其次就是将分析得到的系统内存信息存入数据库。

2.2 设置crontab定时任务,时间间隔为5分钟.运行定时任务。

3.可视化前端设计

3.1 设置日期选择控件,分别是用于选择开始时间和选择结束时间。

3.2 具体页面设计看个人喜好,关键JQ代码如下:
var picker1 = $(“.form_datetime”).datetimepicker({
format: “yyyy-mm-dd “,
minView:2,
autoclose: true,
todayBtn: true,
startView: ‘year’,
pickerPosition: “bottom-left”
});
var picker2 = $(“.form_datetime2”).datetimepicker({
format: “yyyy-mm-dd “,
minView:2,
autoclose: true,
todayBtn: true,
startView: ‘year’,
pickerPosition: “bottom-left”
});
picker1.on(‘changeDate’, function(env){
$(“.form_datetime2”).datetimepicker(‘setStartDate’,env.date);
});
picker2.on(‘changeDate’, function(env){
$(“.form_datetime”).datetimepicker(‘setEndDate’,env.date);
});

4.ECharts折线图展示

4.1 为ECharts准备一个具备宽高的DOM容器,通过echarts.init方法初始化一个ECharts实例,然后接收从后台传过来的JSON,通过SetOption方法生成一个折线图。
var mem_total = {{ mem_total|safe }};

myChart.showLoading(); //添加加载动画
myChart.hideLoading(); //隐藏加载动画

5.逻辑操作完善

def get_mem_time(request):
memory_list = {‘Used’: [], ‘Free’: [], ‘Share’: [], ‘Buff_Cache’: [], ‘Available’: [], ‘Datetime’: []}
if request.is_ajax:

#接收从前端页面传来的数据
starttime = request.GET.get(‘starttime’).encode(‘utf-8’)
endtime = request.GET.get(‘endtime’).encode(‘utf-8’)
startdate = datetime.strptime(starttime.split(‘ ‘)[0],”%Y-%m-%d”)
enddate = datetime.strptime(endtime.split(‘ ‘)[0],”%Y-%m-%d”)

# 过滤在某时间段的数据
for i in memory_info.objects.filter(minion_id=’mbb-48’,memory_time__range=(startdate,enddate)):
memory_list[‘Used’].append(i.memory_used)
memory_list[‘Free’].append(i.memory_free)
memory_list[‘Share’].append(i.memory_share)
memory_list[‘Buff_Cache’].append(i.memory_bu_ca)
memory_list[‘Available’].append(i.memory_available)
memory_list[‘Datetime’].append(datetime.strftime(i.memory_time, “%Y-%m-%d %H:%M”))
memory_list[‘mem_total’]=i.memory_total
# print memory_list
return JsonResponse(memory_list)

感谢大家的阅读,我们也会给大家提供更加有帮助的分享,希望大家觉得有用处,祝大家工作顺利!

本文转载于:http://win-man.com
本文关键词:云主机    云服务器    BGP服务器     高防服务器
作者:云服务器安全专家

发表评论

电子邮件地址不会被公开。 必填项已用*标注