從無到有寫一個運維APP(三)完結篇

前言:本身的挖的坑還得填,此篇爲完結篇。html


環境的搭建參考第一篇 從無到有寫一個運維APP(一),至於第二篇就跳過吧,寫個 APP 沒那麼複雜。node


因爲本身如今無業遊民,因此沒有什麼現成的環境,環境就隨便找個公網的。再者當下的完成度應該算不上一個完整的 APP,可是做爲參考,依瓢畫葫蘆絕對足夠了,若是等完整產品,可能得等一段時間了,下面的是該項目的地址。python


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


效果圖以下angularjs


wKiom1lHrUHyQM8MAAAY4_S_xnE795.png-wh_50

wKiom1lHrUGQ3u60AAAcoO04O6I984.png-wh_50

wKioL1lHrUKxhk1RAAA8JhhMyTY466.png-wh_50

wKioL1lHrUPxjFXHAAAowsdCZXo571.png-wh_50


文章目錄: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 服務器。


wKioL1lHrh3C9YW4AAJyUm4btbE005.png-wh_50


3. 建立一個 APP

ionic start myops blank


4. sublime 打開該項目


wKiom1lHrj2Q3I-tAAEd7A-HCFs180.png-wh_50


(二)

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


這個頁面的效果以下。


wKioL1lHr2PxD1WrAAAw8U7_DUM679.png-wh_50


(三)

1. 頁面框架

就如上面的效果圖,咱們應該須要三個 tab,而後一個 es 性能的模板頁面,一個詳情模板頁面。


因此目錄結構大致以下。


wKiom1lHr5LBpRleAAAqtEqfpRw519.png-wh_50


總而言之,咱們須要五個模板,因此在 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 效果以下


wKioL1lHsUmCOGUEAABnHI9ssvo802.png-wh_50


我的而言,感受可玩的是 clientip,agent,response


咱們利用 es 的 api 統計如下上面的字段吧。


由於聚合須要 post 方法,因此這裏使用 postman。


效果以下


wKioL1lHsW-iDnh_AABdu_lOvxE185.png-wh_50

wKiom1lHsXSQucDaAAC7IoZDneo662.png-wh_50


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


wKiom1lHscbSYjA1AAA8JhhMyTY753.png-wh_50



(六)

自問自答

Q:爲毛不用最新的 ionic

A:暫時沒有看 typescript 的見解


Q:能畫其餘圖麼?

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


Q:爲毛沒有獲取一下 zabbix 的數據

A:沒環境,不想搭


不足

1. 有一些重複的代碼

2. 不夠足夠好看

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


若是以爲不錯,並有所收穫,請我喝杯茶唄

wKioL1lU4MXwELckAADg-gB3Tsc583.jpg-wh_50wKiom1lU4Mqg8rxIAADzypnX0FU518.jpg-wh_50

相關文章
相關標籤/搜索