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

構思過程：

 一開始單純的寫了個內存監控的腳本，每隔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

設計流程:

 一、初始化項目基本配置

 首先建立一個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

如下是個人目錄樹：

 二、完善內存監控腳本

 編寫監控內存信息腳本，腳本能夠分爲兩個部分，首先就是分析系統中內存的信息，其次就是將分析獲得的系統內存信息存入數據庫。再經過crontab設置定時任務，每隔五分鐘執行一次腳本。
分析系統中內存的信息，能夠直接經過調用linux系統自帶的free命令獲取，而後截取分割字符串。
（固然你也可以用psutil模塊分析內存信息,主要仍是由於我懶。）
 存入數據庫的操做須要注意的點就是，插入數據庫語句中設計到某些字段的類型問題，如一些字符串格式的字段須要加上單引號，以及在發生插入失敗時設置回滾等操做。
（具體代碼就不貼了，太簡單，有興趣在下面的github裏面的scritps目錄中能夠看下腳本，固然還有其餘監控的腳本。）

定時任務以下:

 三、前端的可視化展現：

  編寫前端的頁面，首先是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();  //隱藏加載動畫

 四、完善後臺的邏輯操做：

  後臺的邏輯十分簡單，最主要的就是查詢數據庫中的數據，發送到初始頁面的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)

總體效果以下:

Demo的github地址：

https://github.com/libuliduobuqiuqiu/Devops

總結：

  須要改進的地方不少，可是是本身親手經過翻閱資料和結合之前自學的東西寫出來，感受仍是受益頗多。我打算以此爲基礎本身寫一個監控運維繫統，整合本身所學的，加深本身自動化運維方面的知識和看法。