Write an OPS app from scratch (iii) end of article

Preface: Own digging pit also have to fill, this article for the end, the environment of the building reference the first write a mobile app from scratch (a), as for the second article skip it, write an app is not so complicated. As a result of their own now unemployed, so there is no ready-made environment, the environment is casual to find a public network. Furthermore, the completion of the current should not be a complete app, but as a reference, according to the gourd is absolutely enough, if the complete product, may have to wait a while, the following is the address of the project.

Project Address: HTTPS://GITHUB.COM/YOUERNING/MYAPP (Star)

As follows

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M01/99/60/wKiom1lHrUHyQM8MAAAY4_S_xnE795.png-wh_500x0-wm_ 3-wmp_4-s_2839937888.png "style=" Float:none; "title=" Preview1.png "alt=" Wkiom1lhruhyqm8maaay4_s_xne795.png-wh_50 " />

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M00/99/60/wKiom1lHrUGQ3u60AAAcoO04O6I984.png-wh_500x0-wm_ 3-wmp_4-s_2138968026.png "style=" Float:none; "title=" Preview2.png "alt=" Wkiom1lhrugq3u60aaacoo04o6i984.png-wh_50 " />

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M01/99/60/wKioL1lHrUKxhk1RAAA8JhhMyTY466.png-wh_500x0-wm_ 3-wmp_4-s_3431620878.png "style=" Float:none; "title=" Preview3.png "alt=" Wkiol1lhrukxhk1raaa8jhhmyty466.png-wh_50 " />

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M00/99/60/wKioL1lHrUPxjFXHAAAowsdCZXo571.png-wh_500x0-wm_ 3-wmp_4-s_3750332120.png "style=" Float:none; "title=" Preview4.png "alt=" Wkiol1lhrupxjfxhaaaowsdczxo571.png-wh_50 " />

Article directory:

1. Preparatory work

2. Agent

3. Page frame

4. Get Data

5. Drawing

6. Ask yourself a self-answer

Page Logic Brief Description:

1. A total of three tabs, respectively, Home,es,zabbix.

2. The home page has Es,zabbix performance metrics.

3. The ES page allows you to graphically display the data you are searching for.

4. The Zabbix page allows you to graphically display the data you are searching for (no environment, so leave it blank).

A

1. Environment Construction Reference: first article

2.es Server

Because there is no ready-made ES environment in addition to their own building still have to fill in the data, this is too sad, so through the Shodan to find an ES server exposed in the public network.

650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M02/99/60/wKioL1lHrh3C9YW4AAJyUm4btbE005.png-wh_500x0-wm_ 3-wmp_4-s_1367791143.png "title=" Image2017-06-19-15-01-002.png "alt=" wkiol1lhrh3c9yw4aajyum4btbe005.png-wh_50 "/ >

3. Create an App

Ionic start Myops Blank

4.sublime Open the Project

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M00/99/60/wKiom1lHrj2Q3I-tAAEd7A-HCFs180.png-wh_500x0-wm_ 3-wmp_4-s_3812278321.png "title=" Image2017-06-19-15-06-001.png "alt=" wkiom1lhrj2q3i-taaed7a-hcfs180.png-wh_50 "/ >

Two

1. Build agent

Although there seems to be no cross-domain restrictions in the app, it is possible to be overwhelmed by this cross-domain when debugging.

So can be flask simple to write a proxy page, code as follows, as you see, I put this exposure to the public network ES server IP write out, it is a bit unethical (we do not destroy it ~ The amount of data so rich or more difficult to find AH).

from flask import flaskfrom flask import response, request,  Abortimport urlparseimport requestsimport jsonapp = 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 (+)     resp.headers["Content-type"] =  "application/json;  Charset=utf-8 "    resp.headers[" Access-control-allow-origin "] = " * "         return respif __name__ ==  "__main__":     app.run (Port=80,debug=True,host = "0.0.0.0")

The effect of this page is as follows.

650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M01/99/60/wKioL1lHr2PxD1WrAAAw8U7_DUM679.png-wh_500x0-wm_ 3-wmp_4-s_3224945681.png "title=" Image2017-06-19-15-11-001.png "alt=" wkiol1lhr2pxd1wraaaw8u7_dum679.png-wh_50 "/ >

Three

1. Page frame

As above, we should need three tab, then an ES performance template page, a details template page.

So the directory structure is broadly as follows.

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M02/99/61/wKiom1lHr5LBpRleAAAqtEqfpRw519.png-wh_500x0-wm_ 3-wmp_4-s_3337656017.png "title=" Image2017-06-19-15-16-001.png "alt=" wkiom1lhr5lbprleaaaqteqfprw519.png-wh_50 "/ >

All in all, we need five templates, so we have created a tpls directory under the WWW directory to place our template files.

Full source code, you can access my github.

2. The page framework is written.

First compose the overall layout on the portal page:

  <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>    &nbsP;   </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>

Create a view file, roughly structured as follows, home.html,es.html.zabbix.html, etc.

<ion-view view-title= "{YOUR title}" > <ion-content>{your content} </ion-content></ion-view>

Write the routing logic.

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

Four

1. Get Data

Here we access the appropriate API through the ANGULARJS built-in $http, roughly as follows.

$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"; });

Originally the performance indicator should be the time series monitoring data, but because there is no environment, here is a simple list of current indicator values.

Perf.html content is as follows.

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

Five

1. Drawing

Here the drawing uses Chart.js

2. Installing Chart.js

Execute the following command under the project directory

Bower Install Angular-chart.js

3. Introduction of JS file in index.html

<script src= "Lib/chart.js/dist/chart.min.js" ></script> <script src= "lib/angular-chart.js/dist/ Angular-chart.min.js "></script>

4. Retrieving fields of interest in ES

By retrieving the mapping effect as follows

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/99/61/wKioL1lHsUmCOGUEAABnHI9ssvo802.png-wh_500x0-wm_ 3-wmp_4-s_1185511909.png "title=" Image2017-06-19-16-30-001.png "alt=" wkiol1lhsumcogueaabnhi9ssvo802.png-wh_50 "/ >

Personally, the feeling can be played by Clientip,agent,response

We use the ES API to count the fields below.

Because the aggregation requires the Post method, Postman is used here.

The effect is as follows

650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M01/99/61/wKioL1lHsW-iDnh_AABdu_lOvxE185.png-wh_500x0-wm_ 3-wmp_4-s_937265781.png "style=" Float:none; "title=" Image2017-06-19-16-42-001.png "alt=" wKioL1lHsW-iDnh_AABdu_ Lovxe185.png-wh_50 "/>

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M00/99/61/wKiom1lHsXSQucDaAAC7IoZDneo662.png-wh_500x0-wm_ 3-wmp_4-s_1688015742.png "style=" Float:none; "title=" Image2017-06-19-16-42-002.png "alt=" Wkiom1lhsxsqucdaaac7iozdneo662.png-wh_50 "/>

5. Get data through $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. The contents of the template are as follows

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

6. Drawing
650) this.width=650; "Src=" https://s2.51cto.com/wyfs02/M00/99/61/wKiom1lHscbSYjA1AAA8JhhMyTY753.png-wh_500x0-wm_ 3-wmp_4-s_4093725976.png "title=" Image2017-06-19-18-18-001.png "alt=" wkiom1lhscbsyja1aaa8jhhmyty753.png-wh_50 "/ >


Six
Ask yourself a self-answer
Q: Not up-to-date ionic for hair
A: No view of typescript

Q: Can you draw other pictures?
A: Reference http://jtblin.github.io/angular-chart.js/

Q: No data on Zabbix for Mao
A: No environment, don't want to ride


Insufficient

 
 

  
  
 
   
There are some duplicate codes
 
   
Not good enough.
 
   
No control over URLs is given to the app
 
  
 
 

This article is from the "Ear Note" blog, be sure to keep this source http://youerning.blog.51cto.com/10513771/1939987
Write an OPS app from scratch (iii) end of article