基於Django+Bootstrap框架，可視化展示內存監控信息

Django 可視化腳本語言 JSON Git Java架構解析 2018-12-05

構思過程：

一開始單純的寫了個內存監控的腳本，每隔5分鐘收集服務器的內存信息，然後將收集到的數據寫進數據庫中，但後來發現就算把收集的信息寫入數據庫，如果需要查詢某個時段的內存信息，需要手動進入數據庫中查看錶裡的數據，所以乾脆結合Bootstrap+django做成一個demo，能夠直觀的展示後臺所收集到的監控信息，這樣就省事很多了。

合適的工具：

因為之前接觸過 Echarts ，所以打算使用Echarts來做前端的折線圖展示。Echarts是一個百度開源的可視化庫，我覺得不錯的地方就是很直觀的配置數據映射邏輯，以及多種多樣的可視化類型。
在考慮到了如果需要查詢某個時間段的內存監控信息時，手動輸入日期時間很容易造成格式等其他錯誤，所以在網上找到了bootstrap的日期選擇控件——bootstrap-datetimepicker

版本選擇：

Django 1.9.13
Bootstrap 2.2.2
jquery 1.8.3
mariadb 10.2.17
ECharts

設計流程:

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)

執行以下命令，初始化數據庫,項目的初步工作就完成了：

python manage.py makemigrations
python manage.py migrate

以下是我的目錄樹：

2、完善內存監控腳本

編寫監控內存信息腳本，腳本可以分為兩個部分，首先就是分析系統中內存的信息，其次就是將分析得到的系統內存信息存入數據庫。再通過crontab設置定時任務，每隔五分鐘執行一次腳本。

分析系統中內存的信息，可以直接通過調用linux系統自帶的free命令獲取，然後截取分割字符串。
（當然你也能夠用psutil模塊分析內存信息,主要還是因為我懶。）
存入數據庫的操作需要注意的點就是，插入數據庫語句中設計到某些字段的類型問題，如一些字符串格式的字段需要加上單引號，以及在發生插入失敗時設置回滾等操作。
（具體代碼就不貼了，太簡單，有興趣在下面的github裡面的scritps目錄中可以看下腳本，當然還有其他監控的腳本。）

定時任務如下:

3、前端的可視化展示：

編寫前端的頁面，首先是bootstrap日期選擇控件，這個bootstrap-datetimepicker控件有意思的是基於 bootstrap2 編寫，對於 bootstrap3 某些地方是不能夠兼容使用的。這一點需要注意。

該項目的github地址：

git clone git://github.com/smalot/bootstrap-datetimepicker.git

詳細介紹該日期選擇控件用法：

http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

大概需要實現的效果就是，有兩個日期選擇控件，分別是用於選擇開始時間 和選擇結束時間，當選擇完開始時間，能夠動態設置結束時間的最小值；當選擇完結束時間後，同樣也能夠動態設置開始時間的最大值

具體效果如下：

關鍵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);
});

其次就是ECharts展示的折線圖，這裡的折線圖分為兩個狀態，首先就是打開頁面時展示的初始狀態，最開始的狀態中默認是五天內的內存監控信息數據，其次就是查詢指定時間段的查詢狀態，可以通過提交查詢時間，獲取指定時間段的內存監控信息。

Echats官網地址：

http://echarts.baidu.com/index.html

參考的實例：

http://echarts.baidu.com/examples/editor.html?c=grid-multiple

具體思路：

首先需要在繪圖前為ECharts準備一個具備寬高的DOM容器，通過echarts.init方法初始化一個ECharts實例，然後接收從後臺傳過來的JSON，通過SetOption方法生成一個折線圖。大致的流程就是這樣，需要注意的點就是，jq接收Django傳送過來的JSON時，要加一個Safe過濾器，關閉自動轉義，同時也是為了防止頁面亂碼。

var mem_total = {{ mem_total|safe }};

其次設置綁定查詢按鈕點擊監聽事件，將需要查詢的時間段發送到後臺，然後接收後臺傳送回來的JSON，通過SetOption方法重新生成一個折線圖。這就是ECharts生成折線圖大概的過程，其中如果考慮到如果數據加載時間過長，可以添加一段loading動畫，使其變得更加人性化:

myChart.showLoading(); //添加加載動畫
myChart.hideLoading(); //隱藏加載動畫

4、完善後臺的邏輯操作：

後臺的邏輯十分簡單，最主要的就是查詢數據庫中的數據，發送到初始頁面的JSON，以及接受前臺查詢的時間段，查詢數據庫中指定時間段的數據。

關鍵代碼如下：

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)