Merge "NFVO Resource Manager pages"
diff --git a/alarm-analysis/src/main/webapp/alarm/app/app.component.ts b/alarm-analysis/src/main/webapp/alarm/app/app.component.ts
new file mode 100644
index 0000000..d6ad1c0
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/app.component.ts
@@ -0,0 +1,41 @@
+/*

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

+import {TranslateService} from 'ng2-translate';

+@Component({

+    selector: 'remote-config',

+    templateUrl: './pages/remote.component.html',

+})

+export class AppComponent implements OnInit{

+     constructor(private translate:TranslateService){}

+     getLanguage():string{

+        let rtnLanguage = localStorage.getItem("language-option");

+        if( rtnLanguage == "null" || rtnLanguage == null ){

+            rtnLanguage =window.navigator.language;

+        }

+        if( rtnLanguage.startsWith('en') ){

+            return "en-US";

+        }

+        return rtnLanguage;

+    }

+

+    ngOnInit():void {

+        this.translate.addLangs(["en", "zh"]);

+        this.translate.setDefaultLang('zh');

+        let language = this.getLanguage();

+        this.translate.use(language);

+    }

+}
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/app.module.ts b/alarm-analysis/src/main/webapp/alarm/app/app.module.ts
new file mode 100644
index 0000000..5c1d653
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/app.module.ts
@@ -0,0 +1,50 @@
+/*

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

+import { BrowserModule } from '@angular/platform-browser';

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

+import {routing} from "./app.routing";

+import {AppComponent} from "./app.component";

+import {AlarmRule} from "./correlation-ruleList/alarmRule.component";

+import {RuleInfo} from "./correlation-ruleInfo/ruleInfo.component";

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

+import {HttpModule,Jsonp}   from  '@angular/http';

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

+import {TranslateModule} from "ng2-translate";

+import {SifModalComponent} from './correlation-modal/modal.component'

+import {TestBed,ComponentFixture} from '@angular/core/testing';

+@NgModule({

+    imports: [

+        BrowserModule,

+        FormsModule,

+        HttpModule,

+        routing,

+        TranslateModule.forRoot()

+

+    ],

+    declarations: [

+        AppComponent,

+        AlarmRule,

+        RuleInfo,

+        SifModalComponent,

+        TestBed,

+        ComponentFixture

+    ],

+    providers:[ModalService,AlarmRuleService,Jsonp],

+    bootstrap: [AppComponent]

+})

+export class AppModule { }

+

diff --git a/alarm-analysis/src/main/webapp/alarm/app/app.routing.ts b/alarm-analysis/src/main/webapp/alarm/app/app.routing.ts
new file mode 100644
index 0000000..173d533
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/app.routing.ts
@@ -0,0 +1,40 @@
+/*

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

+import { Routes, RouterModule } from '@angular/router';

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

+import {RuleInfo} from './correlation-ruleInfo/ruleInfo.component'

+const appRoutes: Routes = [

+    {

+        path: 'alarmRule',

+        component:AlarmRule

+    },

+    {

+        path: 'ruleInfo',

+        component: RuleInfo

+    },

+    {

+        path: 'ruleInfo/:id',

+        component: RuleInfo

+    },

+    {

+        path:'',

+        redirectTo:'alarmRule',

+        pathMatch: 'full'

+    },

+

+];

+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.component.html b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.component.html
new file mode 100644
index 0000000..f93605e
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.component.html
@@ -0,0 +1,31 @@
+<!--

+ 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="modal fade in" id="myModal" #sifModal>

+    <div class="modal-dialog">

+        <div class="modal-content">

+            <div class="modal-header">

+                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

+                <h4 class="modal-title">{{modalTitle|translate}}</h4>

+            </div>

+            <div class="modal-body">

+                <p>{{modalBodyMessage|translate}}</p>

+            </div>

+            <div class="modal-footer">

+                <button type="button" class="btn btn-primary" data-dismiss="modal">{{closeBtnTitle|translate}}</button>

+            </div>

+        </div>

+    </div>

+</div>
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.component.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.component.ts
new file mode 100644
index 0000000..e0e1f9c
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.component.ts
@@ -0,0 +1,44 @@
+/*
+ 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 ,Input, OnInit} from '@angular/core';
+import {ModalService} from  './modal.service';
+import {Msg} from './Msg';
+declare var $:any;
+@Component({
+
+    selector: 'sif-modal',
+    templateUrl: './modal.component.html',
+
+})
+export class SifModalComponent implements OnInit{
+    constructor(private modalServer:ModalService){};
+    modalTitle:string="modalTitleDefault";
+    modalBodyMessage:string="modalBodyMessageDefault";
+    closeBtnTitle:string="closeBtnTitleDefault";
+
+    ngOnInit(): void {
+        console.log('init');
+        this.modalServer.getmodalObservable.subscribe((msg:Msg)=>{
+            console.log('receive '+msg);
+            this.modalTitle=msg.title||this.modalTitle;
+            this.modalBodyMessage=msg.message||this.modalBodyMessage;
+            this.closeBtnTitle=msg.btn||this.closeBtnTitle;
+            $('#myModal').modal('show');
+        });
+    }
+
+
+}
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.service.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.service.ts
new file mode 100644
index 0000000..e792731
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/modal.service.ts
@@ -0,0 +1,24 @@
+/*

+ 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 { Subject }           from 'rxjs/Subject';

+import { Injectable }     from '@angular/core';

+@Injectable()

+export class ModalService{

+    private modalObservable=new Subject();

+    get getmodalObservable(){

+        return this.modalObservable;

+    }

+}

diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/msg.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/msg.ts
new file mode 100644
index 0000000..b42904e
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-modal/msg.ts
@@ -0,0 +1,20 @@
+/*

+ 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 interface Msg{

+    title?:string;

+    message:string;

+    btn?:string;

+}
\ No newline at end of file
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 0000000..9558513
--- /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 0000000..2fc8160
--- /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
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 4d2969b..4898a01 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 0000000..b8d4247
--- /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 0000000..f7b640b
--- /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 0000000..a376aca
--- /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 0000000..0abf632
--- /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
diff --git a/alarm-analysis/src/main/webapp/alarm/app/main.ts b/alarm-analysis/src/main/webapp/alarm/app/main.ts
new file mode 100644
index 0000000..2ab522c
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/main.ts
@@ -0,0 +1,19 @@
+/*

+ 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 { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

+import { AppModule } from './app.module';

+const platform = platformBrowserDynamic();

+platform.bootstrapModule(AppModule);
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/pages/remote.component.html b/alarm-analysis/src/main/webapp/alarm/app/pages/remote.component.html
new file mode 100644
index 0000000..398159a
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/pages/remote.component.html
@@ -0,0 +1,19 @@
+<!--

+ 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="tabzone">

+</div>

+<sif-modal></sif-modal>

+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/index.html b/alarm-analysis/src/main/webapp/alarm/index.html
new file mode 100644
index 0000000..423e4ca
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>

+<html>

+<head>

+    <base href="/iui/LY-Correlation/">

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1">

+    <script src="public/component/thirdparty/jquery/jquery-1.10.2.min.js"></script>

+    <script src="public/common/js/popModal.js"></script>

+    <script src="public/common/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>

+    <script src="public/common/js/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>

+    <script src="public/common/js/jQuery-File-Upload/js/jquery.fileupload.js"></script>

+<body style="overflow: auto">

+<remote-config>Loading...</remote-config>

+

+</body>

+</html>

diff --git a/alarm-analysis/src/main/webapp/alarm/main.ts b/alarm-analysis/src/main/webapp/alarm/main.ts
new file mode 100644
index 0000000..3229737
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/main.ts
@@ -0,0 +1,7 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

+import { enableProdMode } from '@angular/core';

+import { AppModule } from './app/app.module';

+if (process.env.ENV === 'production') {

+    enableProdMode();

+}

+platformBrowserDynamic().bootstrapModule(AppModule);

diff --git a/alarm-analysis/src/main/webapp/alarm/polyfills.ts b/alarm-analysis/src/main/webapp/alarm/polyfills.ts
new file mode 100644
index 0000000..20d968e
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/polyfills.ts
@@ -0,0 +1,8 @@
+import 'core-js/es6';

+import 'core-js/es7/reflect';

+require('zone.js/dist/zone');

+if (process.env.ENV === 'production') {

+} else {

+    Error['stackTraceLimit'] = Infinity;

+    require('zone.js/dist/long-stack-trace-zone');

+}

diff --git a/alarm-analysis/src/main/webapp/alarm/vendor.ts b/alarm-analysis/src/main/webapp/alarm/vendor.ts
new file mode 100644
index 0000000..1d7ce27
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/vendor.ts
@@ -0,0 +1,30 @@
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+import 'angular-in-memory-web-api';
+import 'rxjs';
+
+
+import '../public/thirdparty/css/bootstrap.min.css';
+import '../public/thirdparty/css/magic-check.css';
+import '../public/thirdparty/css/zTreeStyle.css';
+import '../public/framework/browser/css/open-ostyle.css';
+import '../public/css/alarm-rule.css'
+
+import '../public/thirdparty/js/bootstrap.min.js';
+import '../public/thirdparty/js/bootstrap-table.min.js';
+import '../public/thirdparty/js/bootstrap-table-filter-control.min.js';
+import '../public/thirdparty/js/jquery.ztree.core-3.5.js';
+import '../public/thirdparty/js/jquery_1.12.4.min.js';
+import '../public/thirdparty/js/mustache.js';
+
+
+import '../public/common/css/popModal.css';
+import '../public/common/css/fileupload.css';
+import '../public/common/js/jQuery-File-Upload/css/jquery.fileupload.css';
+
+import '../public/common/js/jQuery-File-Upload/js/jquery.fileupload.js';
+import '../public/common/js/popModal.js';
diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
index d42d28c..593c6a3 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -95,7 +95,6 @@
 

     .controller('homeCtrl', function($scope, $compile, $state, $log, DataService, NgTableParams) {

         $scope.param="lctableData";

-

         $scope.init = function() {

             jQuery.i18n.properties({

                 language : 'en-US',

@@ -224,7 +223,7 @@
                   //  document.getElementById("svcTempl").innerHTML = templatesInfo;

                     $scope.optionsValue = tmplatesResponse;

                     var dropSimple_data = {

-                        "errmsg" : "Template version is required.",

+                        "errmsg" : "Service template is required.",

                         "modalVar" : "lifecycleData.optSelect",

                         "labelField" : "templateName",

                         "optionsValue" : JSON.stringify(tmplatesResponse),

@@ -240,7 +239,7 @@
 		

             //$('#myModal .creator').html($compile(Mustache.to_html(text, creatorText.ErrMsg))($scope));

 

-            var modelSubmit_data = {"title":"Submit", "clickAction":"saveData(lifecycleData.id)"};

+            var modelSubmit_data = {"title":"Submit", "clickAction":"saveData()"};

             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);

             $('#myModal #footerBtns').html($compile(modelSubmit_html)($scope));

 

@@ -318,8 +317,12 @@
             

             var template = $scope.lifecycleData.optSelect;

             var lastSelTempCreateParam = DataService.getCreateParamJsonObj();

+            if(template == undefined){

+                document.getElementById("templateParameters").innerHTML = "";

+                return;

+            }            

             //if the template not changed, no need to update the page.

-            if(lastSelTempCreateParam.templateId == template.serviceTemplateId){

+            if(lastSelTempCreateParam.templateId == template.serviceTemplateId &&  document.getElementById("templateParameters").innerHTML != ""){

                 return;

             }

             $.when(DataService.generateCreateParameters(template))

@@ -338,16 +341,15 @@
 

         $scope.showAddModal = function() {

             console.log("Showing Modal to Add data");

-            $scope.lifecycleData = {};

-            $scope.textboxErr = false;

-

+            //$scope.lifecycleData = {};

+            //$scope.textboxErr = false;

             //$("#myModal").modal();

             $("#myModal").modal({}).draggable();

         }

         $scope.closeModal = function() {

             console.log("Closing Modal...");

             $('#myModal').modal('hide');

-            $state.reload();

+            //$state.reload();

         }

 

         $scope.editData = function(id) {

diff --git a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
index 97b7e0c..c2e4917 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/templates/home.html
@@ -25,7 +25,7 @@
     <br>
     <div class="panel panel-default">
     <table ng-table="tableParams" class="table table table-striped table-hover table-bordered lctable" show-filter="true">
-        <tr ng-repeat="lcData in $data" ui-sref=".lcTabs({id: lcData.serviceId})" ui-sref-active="selected-row" ui-sref-opts="{reload: true}"><!--target="_self" ng-click="setClickedRow($index, lcData.id)" -->
+        <tr ng-repeat="lcData in $data" ui-sref=".lcTabs({id: lcData.serviceId})" ui-sref-active="selected-row" ui-sref-opts="{reload: false}"><!--target="_self" ng-click="setClickedRow($index, lcData.id)" -->
             <td header="'ng-table/headers/checkbox.html'">
                 <input type="checkbox" ng-model="checkboxes.items[lcData.serviceId]" />
             </td>
diff --git a/provincemgr/pom.xml b/provincemgr/pom.xml
new file mode 100644
index 0000000..768d623
--- /dev/null
+++ b/provincemgr/pom.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+    Copyright 2016-2017, CMCC Technologies Co., Ltd.
+
+    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.
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <parent>
+    <groupId>org.openo.client.gui</groupId>
+    <artifactId>client-gui</artifactId>
+    <version>1.1.0-SNAPSHOT</version>
+  </parent>
+
+  <modelVersion>4.0.0</modelVersion>
+  <artifactId>performancemgr</artifactId>
+  <version>1.1.0-SNAPSHOT</version>
+  <packaging>war</packaging>
+  <name>client-gui/performancemgr</name>
+
+  <build>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.maven.plugins</groupId>
+        <artifactId>maven-war-plugin</artifactId>
+        <configuration>
+          <failOnMissingWebXml>false</failOnMissingWebXml>
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+</project>
diff --git a/provincemgr/src/main/webapp/provincemgr/index.html b/provincemgr/src/main/webapp/provincemgr/index.html
new file mode 100644
index 0000000..8e4d9b0
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/index.html
@@ -0,0 +1,52 @@
+<!--
+
+    Copyright 2017, Huawei Technologies Co., Ltd.
+
+    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.
+
+-->
+
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Province Management</title>
+    <link href="thirdparty/css/bootstrap.min.css" rel="stylesheet"/>
+    <!--Pulling Awesome Font -->
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+
+    <link href="thirdparty/css/zTreeStyle.css" rel="stylesheet"/>
+    <link href="thirdparty/css/magic-check.css" rel="stylesheet"/>
+    <link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
+    <link href="framework/css/open-ostyle.css" rel="stylesheet"/>
+
+    <script src="thirdparty/js/angular.min.js"></script>
+    <script src="thirdparty/js/angular-ui-router.min.js"></script>
+    <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
+    <script src="thirdparty/js/jquery_1.12.4.min.js"></script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script type="text/javascript" src="thirdparty/js/bootstrap.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/rest.js"></script>
+    <script src="framework/js/DataService.js"></script>
+    <script src="thirdparty/js/mustache.js"></script>
+    <script src="thirdparty/js/jquery.ztree.core-3.5.js"></script>
+
+</head>
+
+<body ng-app="ProvinceManagementApp" onload="loadTemplate()">
+<ui-view></ui-view>
+</body>
+</html>
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/js/app.js b/provincemgr/src/main/webapp/provincemgr/js/app.js
new file mode 100644
index 0000000..1af3d53
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/js/app.js
@@ -0,0 +1,294 @@
+/*

+

+ Copyright 2017, Huawei Technologies Co., Ltd.

+

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

+

+ */

+

+var app = angular.module("ProvinceManagementApp", ["ui.router", "ngTable"])

+

+    .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){

+

+        $urlMatcherFactoryProvider.caseInsensitive(true);

+        $urlRouterProvider.otherwise('/provinceMgmt');

+        $stateProvider

+            .state("" +

+                "provinceMgmt", {

+                url: "/provinceMgmt",

+                templateUrl : "templates/management.html",

+                controller : "managementCtrl"

+            })

+    })

+

+

+    .controller("managementCtrl", function($scope, $log, provinceDataService, $state, $compile, NgTableParams){

+        $scope.message = "Management";

+

+        $scope.init = function() {

+            provinceDataService.getAllProvinceData()

+                .then(function(data){

+                    $scope.provinceData = data.provinceData;

+                    console.log("Data: ");

+                    loadButtons();

+                    $log.info(data.provinceData);

+                }, function(reason){

+                    $scope.message = "Error is :" + JSON.stringify(reason);

+                });

+

+            /*DataService.post("http://localhost:4000/api/getAllJSONData", {"wdgtType":$scope.provinceTip})

+                .then(function(data){

+                    $scope.provinceTipData = data.data.provinceTip;

+                });*/

+        }

+

+        function loadButtons() {

+

+            console.log("modelTemplate issss"+modelTemplate);

+            var def_button_tpl = $(modelTemplate).filter('#defaultButtons').html();

+            var def_iconbutton_tpl = $(modelTemplate).filter('#defaultIconButtons').html();

+            var dialog = $(modelTemplate).filter('#dialog').html();

+

+            var add_data = {"title":"Create", "type":"btn btn-default", "gType": "plus-icon", "iconPosition":"left", "clickAction":"showAddModal()"};

+

+            var delete_data = {"title":"Delete Selected", "type":"btn btn-default", "gType": "delete-icon", "iconPosition":"left", "clickAction":"deleteData()"};

+            var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);

+            var deletehtml = Mustache.to_html(def_iconbutton_tpl, delete_data);

+            $('#provinceAction').html($compile(addhtml)($scope));

+

+

+

+            $('#provinceAction').append($compile(deletehtml)($scope));

+

+            $('#managementDialog').html($compile(dialog)($scope));

+

+            $scope.checkboxes = { 'checked': false, items: {} };

+

+            $scope.tableParams = new NgTableParams({count: 5, sorting: {province_name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}

+            }, { counts:[5, 10, 20, 50], dataset: $scope.provinceData});

+

+            $scope.$watch('checkboxes.checked', function(value) {

+                angular.forEach($scope.provinceData, function(item) {

+                    if (angular.isDefined(item.id)) {

+                        $scope.checkboxes.items[item.id] = value;

+                    }

+                });

+            });

+

+            var text = $(modelTemplate).filter('#textfield').html();

+            var ipv4 = $(modelTemplate).filter('#ipv4').html();

+            var number = $(modelTemplate).filter('#numeric').html();

+

+            $('#managementDialog .modalHeader').html('<h5 class="modal-title titlestyle">Modal Header</h5>');

+            $('#managementDialog .modalBodyContent').html('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">Name</label> <div class="col-xs-8 provinceName" > </div> </div>');

+            $('#managementDialog .modalBodyContent').append('<div class="form-group row"> <label class="col-xs-4 col-form-label labelstyle">IP Address</label> <div class="col-xs-8 ipAddress" > </div> </div>');

+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label> <div class="col-xs-8 port" > </div> </div>');

+            $('#managementDialog .modalBodyContent').append(' <div class="form-group row"> <label for="desc" class="col-xs-4 col-form-label labelstyle">Description</label> <div class="col-xs-8 desc" > </div> </div>');

+

+

+

+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input Name.", "modalVar":"province.province_name", "placeholder":"Name", "errtag":"ptextboxErr", "errfunc":"validatetextbox", "required":true}};

+            $('#managementDialog .provinceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));

+

+            var dataIP = {"ErrMsg" :     {"errmsg" : "Please input IP Address.", "modalVar":"province.ip", "placeholder":"IP Address"}};

+            $('#managementDialog .ipAddress').html($compile(Mustache.to_html(ipv4, dataIP.ErrMsg))($scope));

+

+            var dataNum = {"ErrMsg" :     {"errmsg" : "Please input port.", "modalVar":"province.port", "placeholder":"Port"}};

+            $('#managementDialog .port').html($compile(Mustache.to_html(number, dataNum.ErrMsg))($scope));

+

+            var dataText = {"ErrMsg" :     {"errmsg" : "Please input description.", "modalVar":"province.desc", "placeholder":"Description"}};

+            $('#managementDialog .desc').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));

+

+            var modelSubmit_data = {"title":"OK", "clickAction":"saveData(province.id)"};

+            var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);

+            $('#managementDialog #footerBtns').html($compile(modelSubmit_html)($scope));

+

+            var modelBtn_data = {"title":"Cancel", "clickAction":"closeModal()"};

+            var modelBtn_html = Mustache.to_html(def_button_tpl, modelBtn_data);

+            $('#managementDialog #footerBtns').append($compile(modelBtn_html)($scope));

+        }

+

+        $scope.validatetextbox = function (value){

+            if($scope.province.province_name) {

+                $scope.ptextboxErr = false;

+            }

+            else

+                $scope.ptextboxErr = true;

+        }

+

+        $scope.checkAll = function() {

+            console.log("Checked ..");

+            angular.forEach($scope.provinceData, function(data) {

+                $scope.checkboxes.items[user.id]

+            });

+        };

+

+        $scope.closeModal = function() {

+            console.log("Closing Modal...");

+            $('#managementDialog').modal('hide');

+        }

+

+        $scope.showAddModal = function() {

+            console.log("Showing Modal to Add data");

+            $scope.province = {};

+            $scope.textboxErr = false;

+            $scope.ipv4Err = false;

+            $scope.numericErr = false;

+            //$("#myModal").modal();

+            $("#uniModal").modal({}).draggable();

+        }

+        $scope.saveData = function(id) {

+            if(id) {

+                //edit data

+                console.log("Editing data.." + JSON.stringify($scope.province));

+                provinceDataService.editProvinceData($scope.province)

+                    .then(function (data) {

+                            $scope.message = "Success :-)";

+                            $state.reload();

+                        },

+                        function (reason) {

+                            $scope.message = reason.status + " " + reason.statusText;

+                        });

+            }

+            else {

+                console.log("Adding data.." + JSON.stringify($scope.province));

+                provinceDataService.addProvinceData($scope.province)

+                    .then(function (data) {

+                            $scope.message = "Success :-)";

+                            $state.reload();

+                        },

+                        function (reason) {

+                            $scope.message = reason.status + " " + reason.statusText;

+                        });

+            }

+            $('#uniModal').modal('hide');

+        }

+

+        /*$scope.deleteIndividualData = function(id) {

+            var deleteArr = [];

+            //$log.info($scope.checkboxes);

+            deleteArr.push(id);

+

+            console.log("To be deleted : "+deleteArr);

+            //$log.info(deleteArr);

+

+

+            provinceDataService.post("http://localhost:4000/api/deleteProvinceData", {'idList':deleteArr})

+                .then(function(data){

+                        $scope.message = "Successfully deleted :-)";

+                        $state.reload();

+                    },

+                    function(reason){

+                        //$log.info(reason);

+                        $scope.message = reason.status + " " + reason.statusText;

+                    });

+        }*/

+        $scope.deleteData = function(id) {

+            var confirmation=false;

+            var dialog_tpl = $(modelTemplate).filter('#personDialog').html();

+            var error = {"err_data" : { "title": "Error",

+                "showClose": "true",

+                "closeBtnTxt": "Cancel",

+                "icon": "glyphicon glyphicon-exclamation-sign",

+                "iconColor": "icon_error",

+                "msg": "Do you really wanted to Delete?.",

+                "buttons": [

+                    {

+                        "text": "OK", "action": "deleteConfirmation("+id+")"

+                    }]

+            }};

+            var html = Mustache.to_html(dialog_tpl, error.err_data);

+            $($compile(html)($scope)).modal({backdrop: "static"});

+        }

+

+        $scope.deleteConfirmation = function(id) {

+            console.log("data in province data is :");

+            $log.info($scope.provinceData);

+            var deleteArr = [];

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

+

+                deleteArr.push(id);

+            }else{

+                angular.forEach($scope.checkboxes.items, function (value, key) {

+                    if (value) {

+                        console.log("deleting name is :" + key);

+                        deleteArr.push(key);

+                    }

+                });

+

+            }

+

+            console.log("To be deleted : " + deleteArr);

+

+            for(var i = 0; i < deleteArr.length; i++) {

+                console.log("To be deleted : "+deleteArr[i]);

+                provinceDataService.deleteProvinceData(deleteArr[i])

+                    .then(function(data){

+                            $scope.message = "Successfully deleted :-)";

+                            $state.reload();

+                        },

+                        function(reason){

+                            $scope.message = reason.status + " " + reason.statusText;

+                        });

+            }

+

+           /* provinceDataService.post("http://localhost:4000/api/deleteProvinceData", {'idList':deleteArr})

+                .then(function (data) {

+                        $scope.message = "Successfully deleted :-)";

+                        $state.reload();

+                    },

+                    function (reason) {

+                        $scope.message = reason.status + " " + reason.statusText;

+                    });*/

+        }

+

+        $scope.editData = function(id) {

+            $scope.textboxErr = false;

+            $scope.ipv4Err = false;

+            $scope.numericErr = false;

+            console.log("To be edited : " + id);

+            var dataFound = false;

+            angular.forEach($scope.provinceData, function(data) {

+                if(!dataFound) {

+                    if (data.id == id) {

+                        console.log("Found : " + data.id);

+                        $scope.province = data;

+

+                        $("#uniModal").modal();

+                        dataFound = true;

+                    }

+                }

+            });

+        }

+

+    })

+

+var modelTemplate = "";

+function loadTemplate() {

+    $.get('framework/template.html', function (template) {

+        modelTemplate += template;

+    });

+    $.get('framework/templateContainer.html', function (template) {

+        modelTemplate += template;

+    });

+    $.get('framework/templateWidget.html', function (template) {

+        //console.log("Template is : "+template);

+        modelTemplate += template;

+    });

+    $.get('framework/templateNotification.html', function (template) {

+        modelTemplate += template;

+    });

+    $.get('framework/templateFunctional.html', function (template) {

+        modelTemplate += template;

+    });

+}
\ No newline at end of file
diff --git a/provincemgr/src/main/webapp/provincemgr/js/rest.js b/provincemgr/src/main/webapp/provincemgr/js/rest.js
new file mode 100644
index 0000000..1192c84
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/js/rest.js
@@ -0,0 +1,94 @@
+/*

+

+ Copyright 2017, Huawei Technologies Co., Ltd.

+

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

+

+ */

+

+

+app.factory("provinceDataService", function($http,DataService, $log){

+    var uri = 'http://192.168.9.13:18008';

+    return {

+        getAllProvinceData : function() {

+            /*return $http({

+                url: 'http://localhost:4000/api/getAllProvinceData',

+                method: 'GET',

+                headers: {'Content-Type': 'application/json'}

+            }).then(function(response){

+                //$log.info(response);

+                return response.data;

+            });*/

+            return DataService.get(uri+'/api/getAllProvinceData')

+                .then(function(response){

+                    $log.info("in get data service data is  :"+response);

+                    console.log(response);

+                    return response;

+                });

+        },

+        addProvinceData : function(provinceDetail) {

+            /*return $http({

+                url: 'http://localhost:4000/api/addProvinceData',

+                method: 'POST',

+                data: provinceDetail,

+                headers: {'Content-Type': 'application/json '}

+            }).then(function(response){

+                console.log("Response : ");

+                $log.info(response.data);

+                return response.data;

+            });*/

+            return DataService.post(uri+'/api/addProvinceData', provinceDetail)

+                .then(function(response){

+                    console.log("Successfully added.. Data returned in DataService is");

+                    console.log(response);

+                    return response;

+                });

+        },

+        deleteProvinceData : function(id) {

+            /*return $http({

+                url: 'http://localhost:4000/api/deleteProvinceData',

+                method: 'POST',

+                data: {'idList':idList},

+                headers: {'Content-Type': 'application/json'}

+            }).then(function(response){

+                console.log("Successfully Deleted..");

+                $log.info(response);

+                return response.data;

+            });*/

+            return DataService.delete(uri+'/api/deleteProvinceData'+"/"+id)

+                .then(function(response){

+                    $log.info("in delete data service data is  :"+response);

+                    console.log(response);

+                    return response;

+                });

+        },

+        editProvinceData : function(provinceDetail) {

+            /*return $http({

+                url: 'http://localhost:4000/api/editProvinceData',

+                method: 'POST',

+                data: provinceDetail,

+                headers: {'Content-Type': 'application/json'}

+            }).then(function(response){

+                console.log("Successfully Edited...");

+                $log.info(response);

+                return response.data;

+            });*/

+            return DataService.put(uri+'/api/editProvinceData', provinceDetail)

+                .then(function(response){

+                    console.log("Successfully edited.. Data returned in DataService is");

+                    console.log(response);

+                    return response;

+                });

+        }

+    }

+});

diff --git a/provincemgr/src/main/webapp/provincemgr/templates/management.html b/provincemgr/src/main/webapp/provincemgr/templates/management.html
new file mode 100644
index 0000000..819c153
--- /dev/null
+++ b/provincemgr/src/main/webapp/provincemgr/templates/management.html
@@ -0,0 +1,112 @@
+<!--

+

+    Copyright 2017, Huawei Technologies Co., Ltd.

+

+    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="homecontent center">

+<div class="col-md-12 col-sm-12 col-lg-12">

+    <h4>{{message}}</h4>

+    <br><br>

+    <div id="provinceAction" ng-init="init()">

+

+    </div>

+    <br>

+    <br>

+

+    <table ng-table="tableParams" class="table table-bordered table-striped customtable" show-filter="true">

+        <tr ng-repeat="provinceData in $data">

+            <td header="'ng-table/headers/checkbox.html'">

+                <input type="checkbox" ng-model="checkboxes.items[provinceData.id]" />

+            </td>

+            <td title="'Name'" filter="{ province_name: 'text'}" sortable="'province_name'">

+                {{provinceData.province_name}}

+            </td>

+            <td title="'IP Address'" filter="{ ip: 'text'}" sortable="'ip'">

+                {{provinceData.ip}}

+            </td>

+            <td title="'Port'" filter="{ port: 'number'}" sortable="'port'">

+                {{provinceData.port}}

+            </td>

+            <td title="'Description'" filter="{ port: 'text'}" sortable="'desc'">

+                {{provinceData.desc}}

+            </td>

+            <td title="'Action'">

+                <span  ng-click="editData(provinceData.id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>

+                <span  ng-click="deleteData(provinceData.id)" style="cursor: pointer;margin: 0 5px"><img src="framework/images/delete.png" height="15" align="middle"/></span>

+            </td>

+        </tr>

+    </table>

+

+

+    <script type="text/ng-template" id="ng-table/headers/checkbox.html">

+        <input type="checkbox" ng-model="checkboxes.checked" name="filter-checkbox" value="" />

+    </script>

+

+    <!--<div id="myTable"></div>-->

+

+

+    <!-- Modal

+    <div id="myModal" class="modal fade" role="dialog">

+        <div class="modal-dialog">

+

+            &lt;!&ndash; Modal content&ndash;&gt;

+            <div class="modal-content">

+                <div class="modal-header">

+                    <button type="button" class="close" data-dismiss="modal">&times;</button>

+                    <h5 class="modal-title titlestyle">Modal Header</h5>

+                </div>

+                <form name="provinceForm" method="post">&lt;!&ndash; ng-submit="saveData(province.id)"&ndash;&gt;

+                    <div class="modal-body">

+

+                        <div class="form-group row">

+                            <label class="col-xs-4 col-form-label labelstyle">Name</label>

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

+                                &lt;!&ndash;<input class="form-control" ng-model="province.province_name" type="text" value="" placeholder="Province Name" id="pname" required><br>&ndash;&gt;

+                            </div>

+                        </div>

+                        <div class="form-group row">

+                            <label class="col-xs-4 col-form-label labelstyle">IP Address</label>

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

+                                &lt;!&ndash;<input class="form-control" ng-model="province.ip" type="ipv4" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$" value="" placeholder="IP Address" id="ipaddress" required><br>&ndash;&gt;

+                            </div>

+                        </div>

+                        <div class="form-group row">

+                            <label for="port" class="col-xs-4 col-form-label labelstyle">Port</label>

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

+                                &lt;!&ndash;<input class="form-control" ng-model="province.port" type="number" value="" placeholder="Port" id="port"  required>&ndash;&gt;

+

+                            </div>

+                        </div>

+

+                        &lt;!&ndash;<input type="submit" class="btn btn-default" value="validate"/>&ndash;&gt;

+

+                    </div>

+

+                    <div id="footerBtns" class="modal-footer">

+                        &lt;!&ndash;<button type="button" class="btn btn-default" ng-click="addData(province._id)" data-dismiss="modal" ng-disabled="provinceForm.$invalid">OK</button>&ndash;&gt;

+                        &lt;!&ndash;<input type="submit" class="btn btn-default" value="Submit"/>&ndash;&gt;

+                        &lt;!&ndash;<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>&ndash;&gt;

+                    </div>

+                </form>

+            </div>

+

+

+        </div>

+    </div>-->

+    <!--<div id="myModal" class="modal-header">-->

+    <div id="managementDialog"></div>

+    <!--</div>-->

+</div>

+</div>
\ No newline at end of file