如何從無(wú)到有寫一個(gè)Linux運(yùn)維APP

由于自己現(xiàn)在無(wú)業(yè)游民，所以沒(méi)有什么現(xiàn)成的環(huán)境，環(huán)境就隨便找個(gè)公網(wǎng)的。再者當(dāng)下的完成度應(yīng)該算不上一個(gè)完整的 APP，但是作為參考，依瓢畫葫蘆絕對(duì)足夠了，如果等完整產(chǎn)品，可能得等一段時(shí)間了，下面的是該項(xiàng)目的地址。

項(xiàng)目地址:https://github.com/youerning/MyApp(star一下唄)

效果圖如下

文章目錄：

1. 準(zhǔn)備工作

2. 代理

3. 頁(yè)面框架

4. 獲取數(shù)據(jù)

5. 繪圖

6. 自問(wèn)自答

頁(yè)面邏輯簡(jiǎn)要說(shuō)明：

1. 一共三個(gè) tab，分別為 home，es，zabbix。

2. home 頁(yè)面有 es，zabbix 的性能指標(biāo)。

3. es頁(yè)面可以圖形展示搜索的數(shù)據(jù)。

4. zabbix頁(yè)面可以圖形展示搜索的數(shù)據(jù)（沒(méi)有環(huán)境所以留空）。

(一)

1. 環(huán)境搭建參考：第一篇http://youerning.blog.51cto.com/10513771/1735450

2. es 服務(wù)器

因?yàn)闆](méi)有現(xiàn)成的 es 環(huán)境再者自己搭建還得往里面填數(shù)據(jù)，這太難過(guò)了，所以通過(guò) shodan 找一個(gè)暴露在公網(wǎng)的 es 服務(wù)器。

3. 創(chuàng)建一個(gè) APP

ionic start myops blank

4. sublime 打開該項(xiàng)目

(二)

1. 搭建代理

雖說(shuō) app 里面似乎沒(méi)有跨域的限制，但是自己在調(diào)試的時(shí)候還是可能被這個(gè)跨域弄得焦頭爛額的。

所以可以通過(guò) flask 簡(jiǎn)單的寫一個(gè)代理頁(yè)面，代碼如下，如你所見，我把這個(gè)暴露在公網(wǎng)的 es 服務(wù)器的 IP 寫出來(lái)，的確有點(diǎn)不道德（大家不要搞破壞呀~數(shù)據(jù)量這么豐富的還是比較難找的呀）。

這個(gè)頁(yè)面的效果如下。

（三）

1. 頁(yè)面框架

就如上面的效果圖，我們應(yīng)該需要三個(gè) tab，然后一個(gè) es 性能的模板頁(yè)面，一個(gè)詳情模板頁(yè)面。

所以目錄結(jié)構(gòu)大體如下。

總而言之，我們需要五個(gè)模板，所以在 www 目錄下創(chuàng)建了一個(gè) tpls 的目錄用于放置我們的模板文件。

完整源代碼，可以訪問(wèn)我的 GitHub。

2. 頁(yè)面框架編寫。

首先在入口頁(yè)撰寫總體布局：

創(chuàng)建視圖文件，大致結(jié)構(gòu)如下，home.html,es.html.zabbix.html等

編寫路由邏輯。

（四）

1. 獲取數(shù)據(jù)

這里我們通過(guò) angularjs 內(nèi)置的 $http 訪問(wèn)相應(yīng)的 api，大致如下。

本來(lái)性能指標(biāo)應(yīng)該是時(shí)間序列的監(jiān)控?cái)?shù)據(jù)，但是由于沒(méi)有環(huán)境，這里就簡(jiǎn)單的列出當(dāng)前指標(biāo)值。

perf.html 內(nèi)容如下。

（五）

1. 繪圖

這里繪圖使用 chart.js

2. 安裝 chart.js

在項(xiàng)目目錄下執(zhí)行下面命令

3. 在 index.html 引入 js 文件

4. 檢索 es 中我們感興趣的字段

通過(guò)檢索 mapping 效果如下

個(gè)人而言，感覺(jué)可玩的是 clientip，agent，response

我們利用 es 的 api 統(tǒng)計(jì)以下上面的字段吧。

因?yàn)?a href="http://ttokpm.com/article/zt/" target="_blank">聚合需要 post 方法，所以這里使用 postman。

效果如下

5. 通過(guò) $http 獲取數(shù)據(jù)

6. 模板內(nèi)容如下

7. 繪圖

（六）

自問(wèn)自答

Q：為毛不用最新的 ionic

A：暫時(shí)沒(méi)有看 typescript 的看法

Q：能畫其他圖么？

A：參考 http://jtblin.github.io/angular-chart.js/

Q：為毛沒(méi)有獲取一下 zabbix 的數(shù)據(jù)

A：沒(méi)環(huán)境，不想搭

不足

1. 有一些重復(fù)的代碼

2. 不夠足夠好看

3. 沒(méi)有將 url 的控制權(quán)交給 APP