Add rule list gui source code

read rule manager gui list,inclode query and table list

Issue-ID:CLIENT-151

Change-Id: I647c840f0579c4b0a3876c8c98aff69007d8c9b9
Signed-off-by: YILI <li.yi101@zte.com.cn>

5 files changed, 389 insertions, 49 deletions

diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
index 4d2969bb..4898a01b 100644
--- a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
@@ -13,66 +13,57 @@
  See the License for the specific language governing permissions and

  limitations under the License.

 -->

-<div class="container">

+<div class="container" style="margin-top: 20px">

     <form  class="form-inline" >

         <div class="form-body">

-            

             <div class="row form-group col-xs-12">

-               

-                <div class="checkbox-list col-lg-4">

-                     <label class="col-lg-3 control-label myclass" >

+                <div class="col-xs-4">

+                     <label class="col-xs-3 control-label myclass" >

                         {{"common_status"|translate}}

                     </label>

                     <select #selection class="form-control" style="width: 60%" id="status" (change)="switch(selection.value)" [(ngModel)]="activeText" name="activestatus">

-						<option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>

-                        

-					</select>

+                      <option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>

+                    </select>

                 </div>

-                              

-                <div class="col-lg-4">

-                     <label for="userName" class="myclass">

+

+                <div class="col-xs-4">

+                     <label for="userName" class="col-xs-3 control-label myclass">

                         <span>{{"common_keyword"|translate}}</span>

                     </label>

                     <input class="form-control ng-untouched ng-pristine ng-valid" style="width: 60%"  placeholder='{{"field_rule_name"|translate}}'

-                        type="text"  [(ngModel)]="ruleModel.rulename" name="name" id="teseselect">

-                   

+                        type="text"  [(ngModel)]="ruleModel.rulename" name="name">

                 </div>

+

                 <div class="fmrule_btn_group display_table">

                     <div class="inline">

-                        <button id="batchDeleteButton" class="btn radius_s white" (click)="searchRules()">

-                            <span class="ict-Magnifier"></span>

+                        <button id="batchDeleteButton" class="btn btn-primary" (click)="searchRules()">

                             <span>{{"common_query"|translate}}</span>

+                            <span class="glyphicon glyphicon-search pull-right" style="padding-left: 10px"></span>

                         </button>

-                        <button class="btn radius_s white" (click)="reset()">

-                            <span class="ict-clearAlarm"></span>

+                        <button class="btn btn-secondary" (click)="reset()" style="margin-left: 10px">

+                            <span class="glyphicon glyphicon-refresh"></span>

                             <span>{{"common_reset"|translate}}</span>

-

                         </button>

                     </div>

-                    

                 </div>

             </div>

-<br>

-        <div class="row form-group col-xs-12">

-            <div class="fmrule_btn_group display_table">

+

+        <div class="row form-group col-xs-12" style="margin-top: 10px">

+            <div class="">

                 <div class="inline">

-                    <button type="button" routerLink='/ruleInfo' class="btn radius_s white">

-                    <span class="ict-new"></span>

+                    <button type="button" routerLink='/ruleInfo' class="btn btn-info">

+                    <span class="glyphicon glyphicon-plus"></span>

                     <span>{{"common_add"|translate}}</span>

                     </button>

                 </div>

             </div>

         </div>

-        </div>

-

+    </div>

+        

     </form>

-    <br>

 <div>

-    <br>

-    <br>

-    <br>

-    <p>{{"common_total1"|translate}}{{totalcount}}{{"common_total2"|translate}}</p>

-    <table class="table table-striped table-bordered fmrule_table_border table-hover dataTable" >

+    <div class="row form-group col-xs-12 myclass">{{"common_total1"|translate}}{{totalcount}}{{"common_total2"|translate}}</div>

+    <table class="table table-bordered table-striped customtable table-hover" >

         <thead class="nf_thead">

             <tr class="heading">

                 <td>{{"field_rule_name"|translate}}</td>

@@ -86,38 +77,43 @@
         <tbody>

             <tr *ngFor="let rule of rules">

                 <td><a routerLink="/ruleInfo/{{rule.ruleid}}&add">{{rule.rulename}}</a></td>

-                 

-                <td [hidden]="rule.enabled === 0" ><span class="ict-circle rule_table_btn" value=0></span></td>

-                <td [hidden]="rule.enabled === 1"><span class="ict-circle rule_table_btn"  value=1></span></td>

+                <td [hidden]="rule.enabled === 0" style="text-align: center"><span value=0><img src="../../../public/thirdparty/images/round_off.png" alt=""></span></td>

+                <td [hidden]="rule.enabled === 1" style="text-align: center"><span value=1><img src="../../../public/thirdparty/images/round_on.png" alt=""></span></td>

                 <td>{{rule.createtime | date:'yyyy-MM-dd HH:mm:ss'}}</td>

                 <td>{{rule.creator}}</td>

                 <td>{{rule.updatetime | date:'yyyy-MM-dd HH:mm:ss'}}</td>

                 <td>

-                    <button class="btn-xs radius_s white task_table_btn rule_table_btn" (click)="updateRule(rule); $event.stopPropagation()">{{"update"|translate}}</button>

-                   

-                    <button [hidden]="rule.enabled===0" class="btn-xs radius_s white task_table_btn rule_table_btn"  (click)="on_off(rule); $event.stopPropagation()">{{"off"|translate}}</button>

-                    <button [hidden]="rule.enabled===1" class="btn-xs radius_s white task_table_btn rule_table_btn" (click)="on_off(rule); $event.stopPropagation()">{{"on"|translate}}</button>

+                    <span (click)="updateRule(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">

+                        <img src="../../../public/thirdparty/images/edit.png" alt="">

+                    </span>

+                    <span>

+                        

+                    </span>

+                    <span [hidden]="rule.enabled===0" class=""  (click)="on_off(rule); $event.stopPropagation()">

+                        <img src="../../../public/thirdparty/images/off.png" alt="">

+                    </span>

+                    <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()">

+                        <img src="../../../public/thirdparty/images/on.png" alt="">

+                    </span>

                 

-                    <button  class="btn-xs radius_s white task_table_btn rule_table_btn" id={{rule.ruleid}} (click)="delete(rule)">{{"delete"|translate}}</button>

+                    <span  class="" id={{rule.ruleid}} (click)="delete(rule)" style="cursor: pointer;margin: 0 5px">

+                         <img src="../../../public/thirdparty/images/delete.png" alt="">

+                    </span>

                 </td>

             </tr>

-           

         </tbody>

     </table>

 </div>

-

-

-

  <div id="deleteTimingTaskDlg" style="display: none;" >

         <div id="deleteTimingTaskContent">

             <div class="deletePromptMessage">

                 <span>{{"message_is_delete"|translate}}</span>

             </div>

-            <div style="float:right" class="">

-                <button class="btn-xs radius_s over-grey" type="button" data-popmodal-but="cancel">

+            <div style="float:rightl;padding-top: 10px;margin-bottom: -20px" class="">

+                <button class="btn btnDefault btnmrg" type="button" data-popmodal-but="cancel">

                     <span>{{"common_cancel"|translate}}</span>

                 </button>

-                <button class="blue1-active btn-xs white radius_s btn-dialog" data-popmodal-but="ok">

+                <button class="btn btnDefault btnmrg" data-popmodal-but="ok">

                     <span>{{"common_confirm"|translate}}</span>

                 </button>

             </div>

@@ -129,8 +125,8 @@
             <div class="deletePromptMessage">

                 <span>{{"warn_delete_info"|translate}}</span>

             </div>

-            <div style="float:right" >

-                <button class="blue1-active btn-xs white radius_s btn-dialog" data-popmodal-but="ok">

+            <div style="float:right;padding-top:10px" >

+                <button class="btn btnDefault btnmrg" data-popmodal-but="ok">

                     <span>{{"common_confirm"|translate}}</span>

                 </button>

             </div>

diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts
new file mode 100644
index 00000000..b8d4247b
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts
@@ -0,0 +1,170 @@
+/*

+ Copyright 2017 ZTE Corporation.

+

+ Licensed under the Apache License, Version 2.0 (the "License");

+ you may not use this file except in compliance with the License.

+ You may obtain a copy of the License at

+

+     http://www.apache.org/licenses/LICENSE-2.0

+

+ Unless required by applicable law or agreed to in writing, software

+ distributed under the License is distributed on an "AS IS" BASIS,

+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ See the License for the specific language governing permissions and

+ limitations under the License.

+*/

+import {Component,OnInit,ViewChild,ViewEncapsulation} from '@angular/core';

+import {ModalService} from  '../correlation-modal/modal.service';

+import {RuleModel} from './alarmRule';

+import {RuleRequest} from './ruleRequest';

+import { Router } from '@angular/router';

+import {Http,Response,Jsonp,Headers,RequestOptions} from '@angular/http';

+import {AlarmRuleService} from './alarmRule.service';

+declare var jQuery: any;

+

+@Component({

+    selector:'alarmRule',

+    templateUrl:'./alarmRule.component.html',

+   

+})

+export class AlarmRule implements OnInit{

+    ruleModel:RuleModel;

+    rules:RuleModel[];

+    queryRule:RuleModel;

+    activeText:string;

+    ruleName:string;

+    enable_on="enabled";

+    enable_off="disabled"

+    totalcount:number;

+    model: any;

+    ruleRequest: RuleRequest;

+    solution = 'ANGULAR';

+    selection = 'A'

+    activeStatus=["option_all","common_enabled", "common_disabled"];

+

+    constructor(public _alarmRuleService:AlarmRuleService, private _ModalService:ModalService,

+    private router: Router){};

+

+    switch(select:string):void {

+        console.log(select);

+        if(select == "common_enabled") {

+            this.ruleModel.enabled = 1;

+        }else if(select=="common_disabled"){

+            this.ruleModel.enabled = 0;

+        }else{

+

+             this.ruleModel.enabled = null;

+        }

+        this.setActiveText();

+    };

+

+    setActiveText():void {

+        if(this.ruleModel.enabled == 1){

+            this.activeText = "common_enabled";

+            this.ruleRequest.enabled=1;

+        }

+        else if(this.ruleModel.enabled == 0){

+            this.activeText = "common_disabled";

+            this.ruleRequest.enabled=0;

+        }else{

+            this.activeText="option_all";

+            this.ruleRequest.enabled=null;

+        }

+    };

+  

+     getRules():Promise<any>{

+         return  this._alarmRuleService

+             .getRules()

+             .then(rules=>{

+                this.rules=rules.rules;

+                this.totalcount = rules.totalcount;

+                });

+     }

+

+     searchRules():void{

+         if(this.ruleModel.enabled == null){

+            this.ruleRequest.enabled =null;

+         }

+         this.ruleRequest.rulename = this.ruleModel.rulename;

+         console.log(this.ruleRequest.enabled,this.ruleRequest.rulename);

+         

+         this._alarmRuleService

+         .searchrules(this.ruleRequest)

+         .then(rules=>{

+             this.rules = rules;

+             this.totalcount = rules.length;

+            });

+     }

+     updateRule(rule:RuleModel):void{

+         this.router.navigate(['ruleInfo/',rule.ruleid]);

+     }

+

+     delete(rule: RuleModel):void{

+         rule.enabled == 1 ? this.deleteActiveRule(rule):this.deleteModel(rule.ruleid,this._alarmRuleService,this);

+     }

+

+     on_off(rule:RuleModel){

+         rule.enabled == 0 ? rule.enabled = 1: rule.enabled = 0;

+         this._alarmRuleService

+         .updateRule(rule)

+         .then(res => {

+             rule = res;

+            });

+     }

+

+     reset():void{

+        this.ruleModel.rulename = null;

+        this.activeText = "option_all";

+        this.ruleModel.enabled = null;

+        this.getRules();

+  }

+    

+     deleteActiveRule(rule:RuleModel):void{

+         jQuery("#"+rule.ruleid).popModal({

+            html: jQuery('#deleteActiveRuleContent'),

+            placement: 'leftTop',

+            showCloseBut: false,

+            onDocumentClickClose: true,

+            onOkBut: function () {

+            },

+        });

+     }

+      deleteModel(ruleid:string,alarm:AlarmRuleService,obj:any):void{

+          jQuery("#"+ruleid).popModal({

+            html: jQuery('#deleteTimingTaskContent'),

+            placement: 'leftTop',

+            showCloseBut: false,

+            onDocumentClickClose: true,

+            onOkBut: function () {

+                jQuery("#deleteTimingTaskDlg").append(jQuery('#deleteTimingTaskContent'));

+                 alarm.delete(ruleid);

+                 obj.getRules();

+            },

+            onCancelBut: function () {

+            }

+        });

+     }

+

+    ngOnInit():void{

+        this.activeText="option_all";

+        this.ruleModel={

+            ruleid:null,

+            rulename:null,

+            description:"",

+            content:null,

+            createtime:null,

+            creator:null,

+            updatetime:null,

+            modifier:null,

+            enabled:0,

+        }

+        this.ruleRequest={

+            ruleid:null,

+            rulename:null,

+            creator:null,

+            modifier:null,

+            enabled:null,

+        }

+        this.getRules();

+    }

+}

diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts
new file mode 100644
index 00000000..f7b640ba
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts
@@ -0,0 +1,126 @@
+/*
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import {Injectable} from '@angular/core';
+import {Http,Response,Headers} from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/operator/map';
+import {RuleModel} from './alarmRule';
+import {RuleRequest} from './ruleRequest'
+import { Router } from '@angular/router';
+import {ModalService} from  '../correlation-modal/modal.service';
+
+@Injectable()
+export class AlarmRuleService{
+    private ruleUrl = "/api/correlation-mgt/v1/rule";
+    private headers = new Headers({'Content-Type': 'application/json'});
+    constructor(private http:Http,private _ModalService:ModalService,private router:Router){}
+
+    getRules():Promise<any>{
+        return this.http.get(this.ruleUrl)
+        .toPromise()
+        .then(res => res.json())
+        .catch(this.handleError);
+    }
+
+    private handleError(error: any): Promise<any> {
+        console.error('An error occurred', error); 
+        return Promise.reject(error._body || error);
+    }
+    
+     search(ruleid:string):Promise<RuleModel>{
+      if(typeof(ruleid) == "string"){
+         let rule =[{
+            ruleid:null,
+            rulename:null,
+            description:null,
+            content:null,
+            createtime:null,
+            creator:null,
+            updatetime:null,
+            modifier:null,
+            enabled:0,
+         }]
+      }
+      let data = {'ruleid':ruleid};
+      var queryrequest = JSON.stringify(data);
+      const url = `${this.ruleUrl}?queryrequest=${queryrequest}`;
+        return this.http.get(url, this.headers)
+        .toPromise()
+        .then(res => res.json().rules as RuleModel)
+        .catch(this.handleError);
+  }
+  
+  searchrules(rule:RuleRequest):Promise<RuleModel[]>{
+     let data = {rulename:rule.rulename,enabled:rule.enabled}
+     console.log(JSON.stringify(data));
+     const url = `${this.ruleUrl}?queryrequest=${JSON.stringify(data)}`
+      return this.http.get(url,{body:data,headers:this.headers})
+      .toPromise()
+      .then(res => res.json().rules as RuleModel[])
+      .catch(this.handleError);
+  }
+
+  checkContent(ruleContent:string): Promise<any>{
+      const url = "/api/correlation-engine/v1/rule";
+      let data = {content:ruleContent};
+      return this.http
+      .post(url,JSON.stringify(data),{headers:this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error);
+  }
+  
+  updateRule(rule:RuleModel): Promise<any>{
+      let rules = {
+          "ruleid": rule.ruleid,
+          "description": rule.description,
+          "content": rule.content,
+          "enabled": rule.enabled
+      }
+      const url = `${this.ruleUrl}`
+      return this.http
+      .post(url,JSON.stringify(rules),{headers:this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error)
+  }
+  
+  save(rule:RuleModel):Promise<any>{
+      let ruledata = {
+        "description": rule.description,
+        "content": rule.content,
+        "enabled": rule.enabled,
+        "rulename": rule.rulename
+      }
+      return this.http.put(this.ruleUrl,JSON.stringify(ruledata),{headers:this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error);
+  }
+
+  public delete(ruleid:string):Promise<void>{
+      let ru = {'ruleid':ruleid};
+      const url = `${this.ruleUrl}`;
+      return this.http.delete(url,{body:JSON.stringify(ru),headers:this.headers})
+      .toPromise()
+      .then(res => {
+          if(res.status == 200){
+              
+          }
+      })
+      .catch(this.handleError);
+  }
+}
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts
new file mode 100644
index 00000000..a376acab
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts
@@ -0,0 +1,26 @@
+/*

+ Copyright 2017 ZTE Corporation.

+

+ Licensed under the Apache License, Version 2.0 (the "License");

+ you may not use this file except in compliance with the License.

+ You may obtain a copy of the License at

+

+     http://www.apache.org/licenses/LICENSE-2.0

+

+ Unless required by applicable law or agreed to in writing, software

+ distributed under the License is distributed on an "AS IS" BASIS,

+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ See the License for the specific language governing permissions and

+ limitations under the License.

+*/

+export class RuleModel{

+    ruleid:string;

+    rulename:string;

+    description:string; 

+    content:string;

+    createtime:Date;

+    creator:number;

+    updatetime:Date;

+    modifier:string;

+    enabled?;

+}
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts
new file mode 100644
index 00000000..0abf6323
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts
@@ -0,0 +1,22 @@
+/*

+ Copyright 2017 ZTE Corporation.

+

+ Licensed under the Apache License, Version 2.0 (the "License");

+ you may not use this file except in compliance with the License.

+ You may obtain a copy of the License at

+

+     http://www.apache.org/licenses/LICENSE-2.0

+

+ Unless required by applicable law or agreed to in writing, software

+ distributed under the License is distributed on an "AS IS" BASIS,

+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

+ See the License for the specific language governing permissions and

+ limitations under the License.

+*/

+export class RuleRequest{

+    ruleid:string;

+    rulename:string;

+    creator:number;

+    modifier:string;

+    enabled:number;

+}
\ No newline at end of file