Add rule info gui source code

read rule manager gui info,inclode update and add,check

Issue-ID:CLIENT-151

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

2 files changed, 443 insertions, 0 deletions

diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html
new file mode 100644
index 00000000..95585133
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html
@@ -0,0 +1,153 @@
+<!--

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

+-->

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

+    <form #ruleForm = "ngForm"  class="form-group row" (submit)="onSubmit(ruleName)">

+        <div class="form-body">

+            

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

+                     <label for="userName" class="col-xs-2 col-form-label labelstyle">

+                        <span>{{"field_rule_name"|translate}}</span>

+                        <span style="color: red">*</span>

+                    </label>

+                    <div class="col-xs-6" style="margin-left: -100px">

+                        <input class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" 

+                        style="width: 60%" type="text" name="rulename" [(ngModel)]="queryRule.rulename" 

+                        id="ruleNameInput" readonly="{{addBottonStatus}}" #ruleName="ngModel" required>

+                    </div>

+            </div>

+            

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

+                     <label for="userName" class="col-xs-2 col-form-label labelstyle">

+                        <span>{{"field_description"|translate}}</span>

+                    </label>

+                <div class="col-xs-6" style="margin-left: -100px">

+                    <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}"

+                        style="width: 60%"  type="text" [(ngModel)]="queryRule.description" name="description" >

+                </div>

+            </div>

+

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

+                     <label  class="col-xs-2 col-form-label labelstyle">

+                         <span>{{"common_status"|translate}}</span>

+                     </label>

+

+                <div class="col-xs-6" style="margin-left: -113px">

+                    <div *ngIf="queryRule.enabled == 1">

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

+                            <input class="magic-radio" type="radio" name="enabled"   id="radio3" [(ngModel)]="queryRule.enabled" value="0">

+                            <label for="radio1">{{"common_on"|translate}}</label>

+                        </div>

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

+                            <input class="magic-radio" type="radio" name="enabled" id="radio4" [(ngModel)]="queryRule.enabled" value="1">

+                            <label for="radio2">{{"common_off"|translate}}</label>

+                        </div>

+                    </div>

+                    <div *ngIf="queryRule.enabled == 0">

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

+                            <input class="magic-radio" type="radio" name="enabled"  id="radio1" [(ngModel)]="queryRule.enabled" value="0">

+                            <label for="radio1">{{"common_on"|translate}}</label>

+                        </div>

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

+                            <input class="magic-radio" type="radio" name="enabled"   id="radio2" [(ngModel)]="queryRule.enabled" value="1">

+                            <label for="radio2">{{"common_off"|translate}}</label>

+                        </div>

+                    </div>

+                     

+                </div>

+

+            </div>

+            

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

+                    <label for="" class="col-xs-2 col-form-label labelstyle">

+                        <span>{{"common_file"|translate}}</span>

+                    </label>

+                <div class="col-xs-6" style="margin-left: -100px">

+                    <div class="btn-group btn-group-circle">

+                        <span class="importDivArea mmlBatchBtnBar" >

+                            <button class="btn btn-info" id="importBtn" disabled="{{addBottonStatus}}">

+                                <span class="ict-import"></span>

+                                <span>{{"import"|translate}}</span>

+                            </button>

+                            <div id="importDiv" class="container upload">

+                                <form id="fileupload" #fileForm="ngForm" role="form" enctype="multipart/form-data" >

+                                    <div class="file-preview">

+                                        <div id="dropzone" class="file-drop-zone">

+                                            <div class="file-drop-zone-title">

+                                                <span >{{"file_import"|translate}}</span>

+                                            </div>

+                                        </div>

+                                    </div>

+

+                                    <div class="input-group fileupload-btn">

+                                        <div id="fileName" class="form-control file-caption">task2.zip</div>

+                                        <span class="input-group-btn" id="btnGroup">

+                                            <span class="btn btn-primary fileinput-button white radius_s blue1-active" id="browse" data-placement="bottom" data-toggle="tooltip">

+                                                <span class="importBtnFontSize">{{"common_browse"|translate}}</span>

+                                                <input type="file" name="file" title=" " accept=".txt" multiple="">

+                                            </span>

+                                            <button id="fileremove" class="btn btn-default" type="button">

+                                                <span class="importBtnFontSize">{{"common_remove"|translate}}</span>

+                                            </button>

+                                            <button id="filesubmit" class="btn btn-default" type="button">{{"common_confirm"|translate}}</button>

+                                        </span>

+                                    </div>

+                                    

+                                </form>

+                            </div>

+                        </span>

+                    </div>

+                </div>

+            </div>

+

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

+                  <label for="" class="col-xs-2 col-form-label labelstyle">

+                        <span>{{"message_rule_content"|translate}}</span>

+                        <span style="color: red">*</span>

+                    </label>

+                <div class="col-xs-8" style="margin-left: -100px">

+                    <div class="form-group">

+                         <textarea id="cmds" class="form-control" readonly="{{addBottonStatus}}" [(ngModel)]="queryRule.content" 

+                            name="content" rows="12" cols="80" required

+                            placeholder="package example">

+                         </textarea>

+                         

+                    </div>

+                </div>

+            </div>

+            

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

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

+                     <label class="myclass" id="checkLabel">

+                        <button type="button" (click)="checkContent('check')" disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_check"|translate}}</button>

+                    </label>

+                    <label class="myclass" id="updateLabel">

+                        <button type="button"  disabled="{{addBottonStatus}}" class="btn btn-info" (click)="update()">{{"common_update"|translate}}</button>

+                    </label>

+                   <label class="myclass" id="saveLabel">

+                        <button type="submit"  disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_save"|translate}}</button>

+                    </label>

+                    <label class="myclass" id="cancelLabel">

+                        <button type="button" routerLink='/alarmRule' class="btn btn-info">{{"common_cancel"|translate}}</button>

+                    </label>

+                </div>

+            </div>

+        </div>

+    </form>

+</div>

+

+

+

+ 
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts
new file mode 100644
index 00000000..2fc81602
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts
@@ -0,0 +1,290 @@
+/*

+ 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 ,Input} from '@angular/core';

+import {RuleModel} from '../correlation-ruleList/alarmRule';

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

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

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

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

+import {NgModel} from '@angular/forms';

+declare var $: any;

+@Component({

+    selector:'RuleInfo',

+    templateUrl:'./ruleInfo.component.html'

+})

+export class RuleInfo implements OnInit{

+    formModel:RuleModel;

+    queryRule:RuleModel;

+    id:number;

+    addBottonStatus:boolean;

+    constructor(private _ModalService:ModalService, private route: ActivatedRoute,private router:Router,private alarmRuleService:AlarmRuleService,http:Http){};

+    

+     update(){

+         this.queryRule.enabled = $('input:radio:checked').val();

+         if(!this.queryRule.content.startsWith("package ")){

+              let msg={title:"exception_content_error",message:"exception_package_error"};

+              this._ModalService.getmodalObservable.next(msg);

+         }else{

+

+         this.alarmRuleService.checkContent(this.queryRule.content)

+         .then(res => {

+                if(res.status == 200){

+                    this.alarmRuleService.updateRule(this.queryRule)

+                    .then(res =>{

+                    if(res.status == 200){

+                        let msg={title:"modalTitleUpdate",message:"message_update_rule_success"};

+                        this._ModalService.getmodalObservable.next(msg);

+                        this.router.navigate(['alarmRule']);

+                    }else if(res.status == 499){

+                        let msg={title:"modalTitleUpdate",message:"message_exception_rule_fail"};

+                        this._ModalService.getmodalObservable.next(msg);

+                    }else{

+                        let msg={title:"modalTitleUpdate",message:"message_other_exception_rule_fail"};

+                        this._ModalService.getmodalObservable.next(msg);

+                    }

+                }).catch(

+                    res =>{

+                        let msg={title:"modalTitleUpdate",message:"message_other_exception_rule_fail"};

+                        this._ModalService.getmodalObservable.next(msg);

+                    }

+                );

+                    

+                    }else if(res.status == 499){

+                        let msg={"title":"modalTitleCheck",message:"message_rule_content_repeat_error"};

+                        this._ModalService.getmodalObservable.next(msg);

+                        return false;

+                    }else{

+                        let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};

+                        this._ModalService.getmodalObservable.next(msg);

+                        return false;

+                    }

+            })

+         }

+     }

+     

+    onSubmit(obj:NgModel){

+        this.save();

+    }

+

+     save(){

+         if(!this.queryRule.content.startsWith("package ")){

+              let msg={title:"exception_content_error",message:"exception_package_error"};

+              this._ModalService.getmodalObservable.next(msg);

+         }else{

+             this.alarmRuleService.checkContent(this.queryRule.content).then(res => {

+                if(res.status == 200){

+                        this.alarmRuleService.save(this.queryRule).then(res => {

+                            if(res.status == 200){

+                                let msg={title:"modalTitleDefault",message:"message_add_rule_success"};

+                                this._ModalService.getmodalObservable.next(msg);

+                                this.router.navigate(['alarmRule']);

+                            }else if(res.status == 499){

+                                let msg={title:"modalTitleDefault",message:"message_rule_name_repeat_error"};

+                                this._ModalService.getmodalObservable.next(msg);

+                            }else{

+                                let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};

+                                this._ModalService.getmodalObservable.next(msg);

+                            }

+                            

+                        }).catch(error =>{

+                                let msg={title:"modalTitleDefault",message:"message_rule_name_repeat_error"};

+                                this._ModalService.getmodalObservable.next(msg);

+                        });

+                        return true;

+                    }else if(res.status == 499){

+                        let msg={"title":"modalTitleCheck",message:"message_rule_content_repeat_error"};

+                        this._ModalService.getmodalObservable.next(msg);

+                        return false;

+                    }else{

+                        let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};

+                        this._ModalService.getmodalObservable.next(msg);

+                        return false;

+                    }

+                })

+            }

+     }

+    

+    getRuleInfo(id:string):void{

+         this.route.params.switchMap((params:Params) =>this.alarmRuleService.search(id))

+                .subscribe(rule =>{

+                    rule[0].enabled = ""+rule[0].enabled;

+                this.queryRule = rule[0]

+                 })

+    }

+

+    checkContent(judge:string):void{

+        if(!this.queryRule.content.startsWith("package ")){

+              let msg={title:"exception_content_error",message:"exception_package_error"};

+              this._ModalService.getmodalObservable.next(msg);

+         }else{

+            this.alarmRuleService.checkContent(this.queryRule.content)

+            .then(res => {

+                if(res.status == 200){

+                    let msg={"title":"modalTitleCheck",message:"message_checkContent_rule_success"};

+                    this._ModalService.getmodalObservable.next(msg);

+                }else if(res.status == 499){

+                     let msg={"title":"modalTitleCheck",message:"message_rule_content_repeat_error"};

+                     this._ModalService.getmodalObservable.next(msg);

+                     return false;

+                }else{

+                     let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};

+                     this._ModalService.getmodalObservable.next(msg);

+                     return false;

+                }

+            });

+         }

+    }

+

+    initUpload(queryRule:RuleModel):void{

+        $("#fileName").text("");

+        $("#importFailTip").addClass("hide_panel");

+        $("#fileupload").fileupload({

+        

+        dropZone: $('#dropzone'),

+        maxNumberOfFiles: 1,

+        maxChunkSize: 20000000, 

+        autoUpload: false,

+        add: function (e, data) {

+            var fileName = data.files[0].name;

+            

+            $("#importFailTip").addClass("hide_panel");

+            let suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length)

+            

+            if (suffix != ".txt") {

+                $("#importFailTip").removeClass("hide_panel");

+                return suffix;

+            }

+            

+            $("#bar").css('width', '0%');

+            $("#persent").text('0%');

+            $("#fileName").text(fileName);

+            $("#fileremove").attr("disabled", false);

+            $("#filesubmit").attr("disabled", false);

+            $("#filesubmit").click(function () {

+                this.file = data.files[0]

+                var reader = new FileReader();

+                reader.readAsText(this.file);

+                reader.onload = function (data) {

+                    queryRule.content = this.result;

+                }

+                $("#fileremove").click();

+                $("#importDiv").hide();

+                e.stopPropagation();

+            });

+

+            $("#fileremove").click(function () {

+                $("#bar").css('width', '0%');

+                $("#persent").text("0%");

+                $("#fileName").text("");

+                $("#filesubmit").attr("disabled", true);

+                $("#fileremove").attr("disabled", true);

+            });

+        },

+        done: function (e, data) {

+

+        },

+        fail: function (e, resp) {

+        },

+        always: function (e, data) {

+            $(".progress").removeClass("active");

+            $("#bar").css('width', '100%');

+            $("#persent").text('100%');

+        },

+        progressall: function (e, data) {

+        }

+    });

+    }

+

+    initImportDiv(queryRule:RuleModel):void{

+        this.initUpload(queryRule);

+        var importDiv = $("#importDiv");

+        $(function (arg) {

+            $("#importBtn").click(function (e) {

+                    e.preventDefault();

+                    $("[data-toggle='tooltip']").tooltip();

+                    $("#importFailTip").addClass("hide_panel");

+                    showDiv();

+                    $(document).one("click", function (e) {

+                        $(importDiv).hide();

+                    });

+                    e.stopPropagation();

+            });

+            $(importDiv).click(function (e) {

+                e.stopPropagation();

+            });

+            $("#filesubmit").attr("disabled", true);

+            $("#fileremove").attr("disabled", true);

+    });

+        function showDiv() {

+            $("#bar").css('width', '0%');

+            $("#persent").text('0%');

+            $(importDiv).fadeIn();

+        }

+    }

+     ngOnInit(){

+         this.formModel={

+            ruleid:null,

+            rulename:null,

+            description:null,

+            content:null,

+            createtime:null,

+            creator:null,

+            updatetime:null,

+            modifier:null,

+            enabled:null,

+        }

+        this.queryRule={

+            ruleid:null,

+            rulename:null,

+            description:null,

+            content:null,

+            createtime:null,

+            creator:null,

+            updatetime:null,

+            modifier:null,

+            enabled:0,

+        }

+         

+        this.route.params.subscribe((params) => {

+             

+            let id = params['id'];

+            if(typeof(id) == "string"){

+                if(id.indexOf('&') == -1){

+                    $("#ruleNameInput").attr("disabled",true);

+                    $("#saveLabel").hide();

+                }else{

+                    this.addBottonStatus=false;

+                    $("#saveLabel").hide();

+                    $("#checkLabel").hide();

+                    $("#updateLabel").hide();

+                }

+               

+                let str = id.split("&");

+                this.getRuleInfo(str[0]);

+            }else if(typeof(id) != "undefined"){

+                this.getRuleInfo(id);

+            }else{

+                 $("#updateLabel").hide();

+            }

+            if(typeof(this.queryRule.enabled) === "number"){

+                this.queryRule.enabled = ""+this.queryRule.enabled;

+            }

+        })

+

+        this.initImportDiv(this.queryRule);

+     }

+     

+}
\ No newline at end of file