一開始單純的寫了個記憶體監控的腳本，每隔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類，在類中添加必要的字段：
執行以下指令，初始化資料庫,項目的初步工作就完成了：
以下是我的目錄樹：
編寫監控記憶體資訊腳本，腳本可以分為兩個部分，首先就是分析系統中記憶體的資訊，其次就是将分析得到的系統記憶體資訊存入資料庫。再通過crontab設定定時任務，每隔五分鐘執行一次腳本。 分析系統中記憶體的資訊，可以直接通過調用linux系統自帶的free指令擷取，然後截取分割字元串。 （當然你也能夠用psutil子產品分析記憶體資訊,主要還是因為我懶。） 存入資料庫的操作需要注意的點就是，插入資料庫語句中設計到某些字段的類型問題，如一些字元串格式的字段需要加上單引号，以及在發生插入失敗時設定復原等操作。 （具體代碼就不貼了，太簡單，有興趣在下面的github裡面的scritps目錄中可以看下腳本，當然還有其他監控的腳本。）
定時任務如下:
編寫前端的頁面，首先是bootstrap日期選擇控件，這個bootstrap-datetimepicker控件有意思的是基于 bootstrap2 編寫，對于 bootstrap3 某些地方是不能夠相容使用的。這一點需要注意。
該項目的github位址：
詳細介紹該日期選擇控件用法：
大概需要實作的效果就是，有兩個日期選擇控件，分别是用于選擇開始時間 和選擇結束時間，當選擇完開始時間，能夠動态設定結束時間的最小值；當選擇完結束時間後，同樣也能夠動态設定開始時間的最大值
具體效果如下：
關鍵jq代碼：
其次就是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過濾器，關閉自動轉義，同時也是為了防止頁面亂碼。
其次設定綁定查詢按鈕點選監聽事件，将需要查詢的時間段發送到背景，然後接收背景傳送回來的json，通過setoption方法重新生成一個折線圖。這就是echarts生成折線圖大概的過程，其中如果考慮到如果資料加載時間過長，可以添加一段loading動畫，使其變得更加人性化:
背景的邏輯十分簡單，最主要的就是查詢資料庫中的資料，發送到初始頁面的json，以及接受前台查詢的時間段，查詢資料庫中指定時間段的資料。
關鍵代碼如下：
整體效果如下:
demo的github位址：
https://github.com/libuliduobuqiuqiu/devops
需要改進的地方很多，但是是自己親手通過翻閱資料和結合以前自學的東西寫出來，感覺還是受益頗多。我打算以此為基礎自己寫一個監控運維系統，整合自己所學的，加深自己自動化運維方面的知識和見解。