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

環境的搭建參考第一篇 從無到有寫一個運維APP(一)，至于第二篇就跳過吧，寫個 APP 沒那么復雜。

由于自己現在無業游民，所以沒有什么現成的環境，環境就隨便找個公網的。再者當下的完成度應該算不上一個完整的 APP，但是作為參考，依瓢畫葫蘆絕對足夠了，如果等完整產品，可能得等一段時間了，下面的是該項目的地址。

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

效果圖如下

文章目錄：

1. 準備工作

2. 代理

3. 頁面框架

4. 獲取數據

5. 繪圖

6. 自問自答

頁面邏輯簡要說明：

1. 一共三個 tab，分別為 home，es，zabbix。

2. home 頁面有 es，zabbix 的性能指標。

3. es頁面可以圖形展示搜索的數據。

4. zabbix頁面可以圖形展示搜索的數據（沒有環境所以留空）。

(一)

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

2. es 服務器

因為沒有現成的 es 環境再者自己搭建還得往里面填數據，這太難過了，所以通過 shodan 找一個暴露在公網的 es 服務器。

3. 創建一個 APP

ionic start myops blank

4. sublime 打開該項目

(二)

1. 搭建代理

雖說 app 里面似乎沒有跨域的限制，但是自己在調試的時候還是可能被這個跨域弄得焦頭爛額的。

所以可以通過 flask 簡單的寫一個代理頁面，代碼如下，如你所見，我把這個暴露在公網的 es 服務器的 IP 寫出來，的確有點不道德（大家不要搞破壞呀~數據量這么豐富的還是比較難找的呀）。

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")

這個頁面的效果如下。

（三）

1. 頁面框架

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

所以目錄結構大體如下。

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

完整源代碼，可以訪問我的 GitHub。

2. 頁面框架編寫。

首先在入口頁撰寫總體布局：

??<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>

創建視圖文件，大致結構如下，home.html,es.html.zabbix.html等

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

編寫路由邏輯。

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. 獲取數據

這里我們通過 angularjs 內置的 $http 訪問相應的 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";});

本來性能指標應該是時間序列的監控數據，但是由于沒有環境，這里就簡單的列出當前指標值。

perf.html 內容如下。

<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

在項目目錄下執行下面命令

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 中我們感興趣的字段

通過檢索 mapping 效果如下

個人而言，感覺可玩的是 clientip，agent，response

我們利用 es 的 api 統計以下上面的字段吧。

因為聚合需要 post 方法，所以這里使用 postman。

效果如下

5. 通過 $http 獲取數據

$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. 模板內容如下

<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. 繪圖

（六）

自問自答

Q：為毛不用最新的 ionic

A：暫時沒有看 typescript 的看法

Q：能畫其他圖么？

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

Q：為毛沒有獲取一下 zabbix 的數據

A：沒環境，不想搭

不足

1. 有一些重復的代碼

2. 不夠足夠好看

3. 沒有將 url 的控制權交給 APP

如果覺得不錯，并有所收獲，請我喝杯茶唄

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。