前言:本身的挖的坑還得填,此篇爲完結篇。html
環境的搭建參考第一篇 從無到有寫一個運維APP(一),至於第二篇就跳過吧,寫個 APP 沒那麼複雜。node
因爲本身如今無業遊民,因此沒有什麼現成的環境,環境就隨便找個公網的。再者當下的完成度應該算不上一個完整的 APP,可是做爲參考,依瓢畫葫蘆絕對足夠了,若是等完整產品,可能得等一段時間了,下面的是該項目的地址。python
項目地址: https://github.com/youerning/MyApp(star一下唄)git
效果圖以下angularjs
文章目錄:github
1. 準備工做typescript
2. 代理json
3. 頁面框架flask
4. 獲取數據canvas
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 url page = req(url) if request.method == "GET" else req(url, request.data) if page.ok: try: ret = page.json() except Exception as e: ret = page.content error = str(e) else: ret = "The url:%s request faild" % url error = "request faild" elif app == "zab": ret = [{"status":"ok"}] else: ret = "" error = "incorrect url" data["data"] = ret data["error"] = error resp = 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
若是以爲不錯,並有所收穫,請我喝杯茶唄