前言：自己的挖的坑還得填，此篇為完結(jié)篇。

環(huán)境的搭建參考第一篇 從無(wú)到有寫(xiě)一個(gè)運(yùn)維APP(一)，至于第二篇就跳過(guò)吧，寫(xiě)個(gè) APP 沒(méi)那么復(fù)雜。

由于自己現(xiàn)在無(wú)業(yè)游民，所以沒(méi)有什么現(xiàn)成的環(huán)境，環(huán)境就隨便找個(gè)公網(wǎng)的。再者當(dāng)下的完成度應(yīng)該算不上一個(gè)完整的 APP，但是作為參考，依瓢畫(huà)葫蘆絕對(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 打開(kāi)該項(xiàng)目

(二)

1. 搭建代理

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

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

from?flask?import?Flask from?flask?import?Response,?request,?abort import?urlparse import?requests import?json app?=?Flask(__name__) esUrl?=?"http://176.31.137.145:9200/" @app.route("/<app>",?methods=["GET","POST"]) def?index(app):params?=?"?format=json&pretty"data?=?{}error?=?""req?=?getattr(requests,?request.method.lower())if?app?==?"es":arg?=?request.args["api"]if?"search"?in?arg:params?=?params?+?"&size=0"url?=?urlparse.urljoin(esUrl,?arg?+?params)#?print?urlpage?=?req(url)?if?request.method?==?"GET"?else?req(url,?request.data)if?page.ok:try:ret?=??page.json()except?Exception?as?e:ret?=?page.contenterror?=?str(e)else:ret?=?"The?url:%s?request?faild"?%?urlerror?=?"request?faild"elif?app?==?"zab":ret?=?[{"status":"ok"}]else:ret?=?""error?=?"incorrect?url"data["data"]?=?retdata["error"]?=?errorresp?=?Response(json.dumps(data))if?error:abort(500)resp.headers["Content-Type"]?=?"application/json;?charset=UTF-8"resp.headers["access-control-allow-origin"]?=?"*"return?resp if?__name__?==?"__main__":app.run(port=80,debug=True,host="0.0.0.0")

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

（三）

1. 頁(yè)面框架

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

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

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

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

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

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

??<body?ng-app="myops"><ion-pane><ion-nav-bar?class="bar-positive"><ion-nav-back-button></ion-nav-back-button></ion-nav-bar><ion-tabs?class="tabs-icon-top"><ion-tab?title="Home"?icon="ion-home"?href="#/home"><ion-nav-view?name="tab-home"></ion-nav-view></ion-tab><ion-tab?title="es"?icon="ion-ionic"?href="#/es"><ion-nav-view?name="tab-es"></ion-nav-view></ion-tab><ion-tab?title="zabbix"?icon="ion-ionic"?href="#/zabbix"><ion-nav-view?name="tab-zabbix"></ion-nav-view></ion-tab></ion-tabs></ion-pane></body>

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

<ion-view?view-title="{YOUR?TITLE}"><ion-content> {YOUR?CONTENT}</ion-content> </ion-view>

編寫(xiě)路由邏輯。

app.config(function($stateProvider,?$urlRouterProvider,?$ionicConfigProvider)?{$ionicConfigProvider.tabs.position('bottom');$stateProvider.state("home",?{url:"/home",views:{"tab-home":{controller:"homeCtrl",templateUrl:?"tpls/home.html"}}});$stateProvider.state("detail",?{url:"/detail/:name",views:{"tab-es":{controller:"detailCtrl",templateUrl:?"tpls/detail.html"}}});$stateProvider.state("perf",?{url:"/perf/:name",views:{"tab-home":{controller:"perfCtrl",templateUrl:?"tpls/perf.html"}}});$stateProvider.state("es",?{url:"/es",views:{"tab-es":{controller:"esCtrl",templateUrl:?"tpls/es.html"}}});$stateProvider.state("zabbix",?{url:"/zabbix",views:{"tab-zabbix":{controller:"zabbixCtrl",templateUrl:?"tpls/zabbix.html"}}});$urlRouterProvider.otherwise("/home");})

（四）

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

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

??$http.get(esUrl,?{params:{api:?"_cat/health"}}).then(function(resp){$scope.data.status?=?resp.data.data[0].status;},?function(resp)?{$scope.data.status?=?"something?wrong";});

本來(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)容如下。

<ion-view?view-title="Performance?for?{{name?|?uppercase}}"><ion-content><ion-list?class="cards"><ion-item>how?many?nodes:?`data`.`nodes`</ion-item><ion-item>how?many?shards:?`data`.`shards`</ion-item><ion-item>status:`data`.`status`</ion-item><ion-item>how?many?indices:?`data`.`indices`</ion-item><ion-item>how?many?documnet:`data`.`counts`</ion-item></ion-list></ion-content> </ion-view>

（五）

1. 繪圖

這里繪圖使用 chart.js

2. 安裝 chart.js

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

bower?install?angular-chart.js

3. 在 index.html 引入 js 文件

????<script?src="lib/chart.js/dist/Chart.min.js"></script><script?src="lib/angular-chart.js/dist/angular-chart.min.js"></script>

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

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

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

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

因?yàn)榫酆闲枰?post 方法，所以這里使用 postman。

效果如下

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

$http.post(esUrl,?setData($scope.name),?{params:{api:"_search"}}).then(function(resp)?{var?ret?=?resp.data.data.aggregations.top_tags.buckets;console.log(ret);$scope.labels?=?[];$scope.series?=?[$scope.name];$scope.data?=?[];for?(var?i=0;i<ret.length;i++){$scope.labels.push(ret[i]["key"]);$scope.data.push(ret[i]["doc_count"]);}},function(resp)?{//?console.log(resp.config);})

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

<ion-view?view-title="Detail?for?`name`"><ion-content><ion-list?><ion-item><canvas?id="bar"?class="chart?chart-bar"chart-data="data"?chart-labels="labels">?chart-series="series"</canvas></ion-item><ion-item?ng-repeat="label?in?labels"><h2>`label`</h2><p>{{data[$index]}}</p></ion-item></ion-list></ion-content> </ion-view>

7. 繪圖

（六）

自問(wèn)自答

Q：為毛不用最新的 ionic

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

Q：能畫(huà)其他圖么？

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

如果覺(jué)得不錯(cuò)，并有所收獲，請(qǐng)我喝杯茶唄

總結(jié)

以上是生活随笔為你收集整理的从无到有写一个运维APP(三)完结篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。