118 files changed, 1815 insertions, 154 deletions
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 00000000..d6ad1c0e
--- /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 00000000..5c1d6533
--- /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 00000000..173d5335
--- /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 00000000..f93605e0
--- /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 00000000..e0e1f9cf
--- /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 00000000..e792731e
--- /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 00000000..b42904eb
--- /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 00000000..95585133
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html
@@ -0,0 +1,153 @@
+<!--
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+<div class="container"  style="margin-top: 20px">
+    <form #ruleForm = "ngForm"  class="form-group row" (submit)="onSubmit(ruleName)">
+        <div class="form-body">
+            
+            <div class="row form-group col-xs-12 ">
+                     <label for="userName" class="col-xs-2 col-form-label labelstyle">
+                        <span>{{"field_rule_name"|translate}}</span>
+                        <span style="color: red">*</span>
+                    </label>
+                    <div class="col-xs-6" style="margin-left: -100px">
+                        <input class="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required" 
+                        style="width: 60%" type="text" name="rulename" [(ngModel)]="queryRule.rulename" 
+                        id="ruleNameInput" readonly="{{addBottonStatus}}" #ruleName="ngModel" required>
+                    </div>
+            </div>
+            
+             <div class="row form-group col-xs-12">
+                     <label for="userName" class="col-xs-2 col-form-label labelstyle">
+                        <span>{{"field_description"|translate}}</span>
+                    </label>
+                <div class="col-xs-6" style="margin-left: -100px">
+                    <input class="form-control ng-untouched ng-pristine ng-valid" readonly="{{addBottonStatus}}"
+                        style="width: 60%"  type="text" [(ngModel)]="queryRule.description" name="description" >
+                </div>
+            </div>
+
+            <div id="state" class="row form-group col-xs-12">
+                     <label  class="col-xs-2 col-form-label labelstyle">
+                         <span>{{"common_status"|translate}}</span>
+                     </label>
+
+                <div class="col-xs-6" style="margin-left: -113px">
+                    <div *ngIf="queryRule.enabled == 1">
+                        <div class="col-xs-3">
+                            <input class="magic-radio" type="radio" name="enabled"   id="radio3" [(ngModel)]="queryRule.enabled" value="0">
+                            <label for="radio1">{{"common_on"|translate}}</label>
+                        </div>
+                        <div class="col-xs-3">
+                            <input class="magic-radio" type="radio" name="enabled" id="radio4" [(ngModel)]="queryRule.enabled" value="1">
+                            <label for="radio2">{{"common_off"|translate}}</label>
+                        </div>
+                    </div>
+                    <div *ngIf="queryRule.enabled == 0">
+                        <div class="col-xs-3">
+                            <input class="magic-radio" type="radio" name="enabled"  id="radio1" [(ngModel)]="queryRule.enabled" value="0">
+                            <label for="radio1">{{"common_on"|translate}}</label>
+                        </div>
+                        <div class="col-xs-3">
+                            <input class="magic-radio" type="radio" name="enabled"   id="radio2" [(ngModel)]="queryRule.enabled" value="1">
+                            <label for="radio2">{{"common_off"|translate}}</label>
+                        </div>
+                    </div>
+                     
+                </div>
+
+            </div>
+            
+             <div class="row form-group col-xs-12" >
+                    <label for="" class="col-xs-2 col-form-label labelstyle">
+                        <span>{{"common_file"|translate}}</span>
+                    </label>
+                <div class="col-xs-6" style="margin-left: -100px">
+                    <div class="btn-group btn-group-circle">
+                        <span class="importDivArea mmlBatchBtnBar" >
+                            <button class="btn btn-info" id="importBtn" disabled="{{addBottonStatus}}">
+                                <span class="ict-import"></span>
+                                <span>{{"import"|translate}}</span>
+                            </button>
+                            <div id="importDiv" class="container upload">
+                                <form id="fileupload" #fileForm="ngForm" role="form" enctype="multipart/form-data" >
+                                    <div class="file-preview">
+                                        <div id="dropzone" class="file-drop-zone">
+                                            <div class="file-drop-zone-title">
+                                                <span >{{"file_import"|translate}}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="input-group fileupload-btn">
+                                        <div id="fileName" class="form-control file-caption">task2.zip</div>
+                                        <span class="input-group-btn" id="btnGroup">
+                                            <span class="btn btn-primary fileinput-button white radius_s blue1-active" id="browse" data-placement="bottom" data-toggle="tooltip">
+                                                <span class="importBtnFontSize">{{"common_browse"|translate}}</span>
+                                                <input type="file" name="file" title=" " accept=".txt" multiple="">
+                                            </span>
+                                            <button id="fileremove" class="btn btn-default" type="button">
+                                                <span class="importBtnFontSize">{{"common_remove"|translate}}</span>
+                                            </button>
+                                            <button id="filesubmit" class="btn btn-default" type="button">{{"common_confirm"|translate}}</button>
+                                        </span>
+                                    </div>
+                                    
+                                </form>
+                            </div>
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+             <div class="row form-group col-xs-12" >
+                  <label for="" class="col-xs-2 col-form-label labelstyle">
+                        <span>{{"message_rule_content"|translate}}</span>
+                        <span style="color: red">*</span>
+                    </label>
+                <div class="col-xs-8" style="margin-left: -100px">
+                    <div class="form-group">
+                         <textarea id="cmds" class="form-control" readonly="{{addBottonStatus}}" [(ngModel)]="queryRule.content" 
+                            name="content" rows="12" cols="80" required
+                            placeholder="package example">
+                         </textarea>
+                         
+                    </div>
+                </div>
+            </div>
+            
+            <div class="row form-group col-xs-12 " style="margin-left: 73px">
+                <div class="col-xs-8 ">
+                     <label class="myclass" id="checkLabel">
+                        <button type="button" (click)="checkContent('check')" disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_check"|translate}}</button>
+                    </label>
+                    <label class="myclass" id="updateLabel">
+                        <button type="button"  disabled="{{addBottonStatus}}" class="btn btn-info" (click)="update()">{{"common_update"|translate}}</button>
+                    </label>
+                   <label class="myclass" id="saveLabel">
+                        <button type="submit"  disabled="{{addBottonStatus}}" class="btn btn-info">{{"common_save"|translate}}</button>
+                    </label>
+                    <label class="myclass" id="cancelLabel">
+                        <button type="button" routerLink='/alarmRule' class="btn btn-info">{{"common_cancel"|translate}}</button>
+                    </label>
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+
+
+
+ 
+\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts
new file mode 100644
index 00000000..2fc81602
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts
@@ -0,0 +1,290 @@
+/*
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import { Component,OnInit ,Input} from '@angular/core';
+import {RuleModel} from '../correlation-ruleList/alarmRule';
+import { ActivatedRoute, Params ,Router} from '@angular/router';
+import {AlarmRuleService} from '../correlation-ruleList/alarmRule.service';
+import {Http,Response,Headers} from '@angular/http';
+import {ModalService} from  '../correlation-modal/modal.service';
+import {NgModel} from '@angular/forms';
+declare var $: any;
+@Component({
+    selector:'RuleInfo',
+    templateUrl:'./ruleInfo.component.html'
+})
+export class RuleInfo implements OnInit{
+    formModel:RuleModel;
+    queryRule:RuleModel;
+    id:number;
+    addBottonStatus:boolean;
+    constructor(private _ModalService:ModalService, private route: ActivatedRoute,private router:Router,private alarmRuleService:AlarmRuleService,http:Http){};
+    
+     update(){
+         this.queryRule.enabled = $('input:radio:checked').val();
+         if(!this.queryRule.content.startsWith("package ")){
+              let msg={title:"exception_content_error",message:"exception_package_error"};
+              this._ModalService.getmodalObservable.next(msg);
+         }else{
+
+         this.alarmRuleService.checkContent(this.queryRule.content)
+         .then(res => {
+                if(res.status == 200){
+                    this.alarmRuleService.updateRule(this.queryRule)
+                    .then(res =>{
+                    if(res.status == 200){
+                        let msg={title:"modalTitleUpdate",message:"message_update_rule_success"};
+                        this._ModalService.getmodalObservable.next(msg);
+                        this.router.navigate(['alarmRule']);
+                    }else if(res.status == 499){
+                        let msg={title:"modalTitleUpdate",message:"message_exception_rule_fail"};
+                        this._ModalService.getmodalObservable.next(msg);
+                    }else{
+                        let msg={title:"modalTitleUpdate",message:"message_other_exception_rule_fail"};
+                        this._ModalService.getmodalObservable.next(msg);
+                    }
+                }).catch(
+                    res =>{
+                        let msg={title:"modalTitleUpdate",message:"message_other_exception_rule_fail"};
+                        this._ModalService.getmodalObservable.next(msg);
+                    }
+                );
+                    
+                    }else if(res.status == 499){
+                        let msg={"title":"modalTitleCheck",message:"message_rule_content_repeat_error"};
+                        this._ModalService.getmodalObservable.next(msg);
+                        return false;
+                    }else{
+                        let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};
+                        this._ModalService.getmodalObservable.next(msg);
+                        return false;
+                    }
+            })
+         }
+     }
+     
+    onSubmit(obj:NgModel){
+        this.save();
+    }
+
+     save(){
+         if(!this.queryRule.content.startsWith("package ")){
+              let msg={title:"exception_content_error",message:"exception_package_error"};
+              this._ModalService.getmodalObservable.next(msg);
+         }else{
+             this.alarmRuleService.checkContent(this.queryRule.content).then(res => {
+                if(res.status == 200){
+                        this.alarmRuleService.save(this.queryRule).then(res => {
+                            if(res.status == 200){
+                                let msg={title:"modalTitleDefault",message:"message_add_rule_success"};
+                                this._ModalService.getmodalObservable.next(msg);
+                                this.router.navigate(['alarmRule']);
+                            }else if(res.status == 499){
+                                let msg={title:"modalTitleDefault",message:"message_rule_name_repeat_error"};
+                                this._ModalService.getmodalObservable.next(msg);
+                            }else{
+                                let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};
+                                this._ModalService.getmodalObservable.next(msg);
+                            }
+                            
+                        }).catch(error =>{
+                                let msg={title:"modalTitleDefault",message:"message_rule_name_repeat_error"};
+                                this._ModalService.getmodalObservable.next(msg);
+                        });
+                        return true;
+                    }else if(res.status == 499){
+                        let msg={"title":"modalTitleCheck",message:"message_rule_content_repeat_error"};
+                        this._ModalService.getmodalObservable.next(msg);
+                        return false;
+                    }else{
+                        let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};
+                        this._ModalService.getmodalObservable.next(msg);
+                        return false;
+                    }
+                })
+            }
+     }
+    
+    getRuleInfo(id:string):void{
+         this.route.params.switchMap((params:Params) =>this.alarmRuleService.search(id))
+                .subscribe(rule =>{
+                    rule[0].enabled = ""+rule[0].enabled;
+                this.queryRule = rule[0]
+                 })
+    }
+
+    checkContent(judge:string):void{
+        if(!this.queryRule.content.startsWith("package ")){
+              let msg={title:"exception_content_error",message:"exception_package_error"};
+              this._ModalService.getmodalObservable.next(msg);
+         }else{
+            this.alarmRuleService.checkContent(this.queryRule.content)
+            .then(res => {
+                if(res.status == 200){
+                    let msg={"title":"modalTitleCheck",message:"message_checkContent_rule_success"};
+                    this._ModalService.getmodalObservable.next(msg);
+                }else if(res.status == 499){
+                     let msg={"title":"modalTitleCheck",message:"message_rule_content_repeat_error"};
+                     this._ModalService.getmodalObservable.next(msg);
+                     return false;
+                }else{
+                     let msg={"title":"modalTitleCheck",message:"message_other_exception_rule_fail"};
+                     this._ModalService.getmodalObservable.next(msg);
+                     return false;
+                }
+            });
+         }
+    }
+
+    initUpload(queryRule:RuleModel):void{
+        $("#fileName").text("");
+        $("#importFailTip").addClass("hide_panel");
+        $("#fileupload").fileupload({
+        
+        dropZone: $('#dropzone'),
+        maxNumberOfFiles: 1,
+        maxChunkSize: 20000000, 
+        autoUpload: false,
+        add: function (e, data) {
+            var fileName = data.files[0].name;
+            
+            $("#importFailTip").addClass("hide_panel");
+            let suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length)
+            
+            if (suffix != ".txt") {
+                $("#importFailTip").removeClass("hide_panel");
+                return suffix;
+            }
+            
+            $("#bar").css('width', '0%');
+            $("#persent").text('0%');
+            $("#fileName").text(fileName);
+            $("#fileremove").attr("disabled", false);
+            $("#filesubmit").attr("disabled", false);
+            $("#filesubmit").click(function () {
+                this.file = data.files[0]
+                var reader = new FileReader();
+                reader.readAsText(this.file);
+                reader.onload = function (data) {
+                    queryRule.content = this.result;
+                }
+                $("#fileremove").click();
+                $("#importDiv").hide();
+                e.stopPropagation();
+            });
+
+            $("#fileremove").click(function () {
+                $("#bar").css('width', '0%');
+                $("#persent").text("0%");
+                $("#fileName").text("");
+                $("#filesubmit").attr("disabled", true);
+                $("#fileremove").attr("disabled", true);
+            });
+        },
+        done: function (e, data) {
+
+        },
+        fail: function (e, resp) {
+        },
+        always: function (e, data) {
+            $(".progress").removeClass("active");
+            $("#bar").css('width', '100%');
+            $("#persent").text('100%');
+        },
+        progressall: function (e, data) {
+        }
+    });
+    }
+
+    initImportDiv(queryRule:RuleModel):void{
+        this.initUpload(queryRule);
+        var importDiv = $("#importDiv");
+        $(function (arg) {
+            $("#importBtn").click(function (e) {
+                    e.preventDefault();
+                    $("[data-toggle='tooltip']").tooltip();
+                    $("#importFailTip").addClass("hide_panel");
+                    showDiv();
+                    $(document).one("click", function (e) {
+                        $(importDiv).hide();
+                    });
+                    e.stopPropagation();
+            });
+            $(importDiv).click(function (e) {
+                e.stopPropagation();
+            });
+            $("#filesubmit").attr("disabled", true);
+            $("#fileremove").attr("disabled", true);
+    });
+        function showDiv() {
+            $("#bar").css('width', '0%');
+            $("#persent").text('0%');
+            $(importDiv).fadeIn();
+        }
+    }
+     ngOnInit(){
+         this.formModel={
+            ruleid:null,
+            rulename:null,
+            description:null,
+            content:null,
+            createtime:null,
+            creator:null,
+            updatetime:null,
+            modifier:null,
+            enabled:null,
+        }
+        this.queryRule={
+            ruleid:null,
+            rulename:null,
+            description:null,
+            content:null,
+            createtime:null,
+            creator:null,
+            updatetime:null,
+            modifier:null,
+            enabled:0,
+        }
+         
+        this.route.params.subscribe((params) => {
+             
+            let id = params['id'];
+            if(typeof(id) == "string"){
+                if(id.indexOf('&') == -1){
+                    $("#ruleNameInput").attr("disabled",true);
+                    $("#saveLabel").hide();
+                }else{
+                    this.addBottonStatus=false;
+                    $("#saveLabel").hide();
+                    $("#checkLabel").hide();
+                    $("#updateLabel").hide();
+                }
+               
+                let str = id.split("&");
+                this.getRuleInfo(str[0]);
+            }else if(typeof(id) != "undefined"){
+                this.getRuleInfo(id);
+            }else{
+                 $("#updateLabel").hide();
+            }
+            if(typeof(this.queryRule.enabled) === "number"){
+                this.queryRule.enabled = ""+this.queryRule.enabled;
+            }
+        })
+
+        this.initImportDiv(this.queryRule);
+     }
+     
+}
+\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
index 4d2969bb..4898a01b 100644
--- a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
@@ -13,66 +13,57 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
-<div class="container">
+<div class="container" style="margin-top: 20px">
     <form  class="form-inline" >
         <div class="form-body">
-            
             <div class="row form-group col-xs-12">
-               
-                <div class="checkbox-list col-lg-4">
-                     <label class="col-lg-3 control-label myclass" >
+                <div class="col-xs-4">
+                     <label class="col-xs-3 control-label myclass" >
                         {{"common_status"|translate}}
                     </label>
                     <select #selection class="form-control" style="width: 60%" id="status" (change)="switch(selection.value)" [(ngModel)]="activeText" name="activestatus">
-						<option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>
-                        
-					</select>
+                      <option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>
+                    </select>
                 </div>
-                              
-                <div class="col-lg-4">
-                     <label for="userName" class="myclass">
+
+                <div class="col-xs-4">
+                     <label for="userName" class="col-xs-3 control-label myclass">
                         <span>{{"common_keyword"|translate}}</span>
                     </label>
                     <input class="form-control ng-untouched ng-pristine ng-valid" style="width: 60%"  placeholder='{{"field_rule_name"|translate}}'
-                        type="text"  [(ngModel)]="ruleModel.rulename" name="name" id="teseselect">
-                   
+                        type="text"  [(ngModel)]="ruleModel.rulename" name="name">
                 </div>
+
                 <div class="fmrule_btn_group display_table">
                     <div class="inline">
-                        <button id="batchDeleteButton" class="btn radius_s white" (click)="searchRules()">
-                            <span class="ict-Magnifier"></span>
+                        <button id="batchDeleteButton" class="btn btn-primary" (click)="searchRules()">
                             <span>{{"common_query"|translate}}</span>
+                            <span class="glyphicon glyphicon-search pull-right" style="padding-left: 10px"></span>
                         </button>
-                        <button class="btn radius_s white" (click)="reset()">
-                            <span class="ict-clearAlarm"></span>
+                        <button class="btn btn-secondary" (click)="reset()" style="margin-left: 10px">
+                            <span class="glyphicon glyphicon-refresh"></span>
                             <span>{{"common_reset"|translate}}</span>
-
                         </button>
                     </div>
-                    
                 </div>
             </div>
-<br>
-        <div class="row form-group col-xs-12">
-            <div class="fmrule_btn_group display_table">
+
+        <div class="row form-group col-xs-12" style="margin-top: 10px">
+            <div class="">
                 <div class="inline">
-                    <button type="button" routerLink='/ruleInfo' class="btn radius_s white">
-                    <span class="ict-new"></span>
+                    <button type="button" routerLink='/ruleInfo' class="btn btn-info">
+                    <span class="glyphicon glyphicon-plus"></span>
                     <span>{{"common_add"|translate}}</span>
                     </button>
                 </div>
             </div>
         </div>
-        </div>
-
+    </div>
+        
     </form>
-    <br>
 <div>
-    <br>
-    <br>
-    <br>
-    <p>{{"common_total1"|translate}}{{totalcount}}{{"common_total2"|translate}}</p>
-    <table class="table table-striped table-bordered fmrule_table_border table-hover dataTable" >
+    <div class="row form-group col-xs-12 myclass">{{"common_total1"|translate}}{{totalcount}}{{"common_total2"|translate}}</div>
+    <table class="table table-bordered table-striped customtable table-hover" >
         <thead class="nf_thead">
             <tr class="heading">
                 <td>{{"field_rule_name"|translate}}</td>
@@ -86,38 +77,43 @@
         <tbody>
             <tr *ngFor="let rule of rules">
                 <td><a routerLink="/ruleInfo/{{rule.ruleid}}&add">{{rule.rulename}}</a></td>
-                 
-                <td [hidden]="rule.enabled === 0" ><span class="ict-circle rule_table_btn" value=0></span></td>
-                <td [hidden]="rule.enabled === 1"><span class="ict-circle rule_table_btn"  value=1></span></td>
+                <td [hidden]="rule.enabled === 0" style="text-align: center"><span value=0><img src="../../../public/thirdparty/images/round_off.png" alt=""></span></td>
+                <td [hidden]="rule.enabled === 1" style="text-align: center"><span value=1><img src="../../../public/thirdparty/images/round_on.png" alt=""></span></td>
                 <td>{{rule.createtime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                 <td>{{rule.creator}}</td>
                 <td>{{rule.updatetime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                 <td>
-                    <button class="btn-xs radius_s white task_table_btn rule_table_btn" (click)="updateRule(rule); $event.stopPropagation()">{{"update"|translate}}</button>
-                   
-                    <button [hidden]="rule.enabled===0" class="btn-xs radius_s white task_table_btn rule_table_btn"  (click)="on_off(rule); $event.stopPropagation()">{{"off"|translate}}</button>
-                    <button [hidden]="rule.enabled===1" class="btn-xs radius_s white task_table_btn rule_table_btn" (click)="on_off(rule); $event.stopPropagation()">{{"on"|translate}}</button>
+                    <span (click)="updateRule(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
+                        <img src="../../../public/thirdparty/images/edit.png" alt="">
+                    </span>
+                    <span>
+                        
+                    </span>
+                    <span [hidden]="rule.enabled===0" class=""  (click)="on_off(rule); $event.stopPropagation()">
+                        <img src="../../../public/thirdparty/images/off.png" alt="">
+                    </span>
+                    <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()">
+                        <img src="../../../public/thirdparty/images/on.png" alt="">
+                    </span>
                 
-                    <button  class="btn-xs radius_s white task_table_btn rule_table_btn" id={{rule.ruleid}} (click)="delete(rule)">{{"delete"|translate}}</button>
+                    <span  class="" id={{rule.ruleid}} (click)="delete(rule)" style="cursor: pointer;margin: 0 5px">
+                         <img src="../../../public/thirdparty/images/delete.png" alt="">
+                    </span>
                 </td>
             </tr>
-           
         </tbody>
     </table>
 </div>
-
-
-
  <div id="deleteTimingTaskDlg" style="display: none;" >
         <div id="deleteTimingTaskContent">
             <div class="deletePromptMessage">
                 <span>{{"message_is_delete"|translate}}</span>
             </div>
-            <div style="float:right" class="">
-                <button class="btn-xs radius_s over-grey" type="button" data-popmodal-but="cancel">
+            <div style="float:rightl;padding-top: 10px;margin-bottom: -20px" class="">
+                <button class="btn btnDefault btnmrg" type="button" data-popmodal-but="cancel">
                     <span>{{"common_cancel"|translate}}</span>
                 </button>
-                <button class="blue1-active btn-xs white radius_s btn-dialog" data-popmodal-but="ok">
+                <button class="btn btnDefault btnmrg" data-popmodal-but="ok">
                     <span>{{"common_confirm"|translate}}</span>
                 </button>
             </div>
@@ -129,8 +125,8 @@
             <div class="deletePromptMessage">
                 <span>{{"warn_delete_info"|translate}}</span>
             </div>
-            <div style="float:right" >
-                <button class="blue1-active btn-xs white radius_s btn-dialog" data-popmodal-but="ok">
+            <div style="float:right;padding-top:10px" >
+                <button class="btn btnDefault btnmrg" data-popmodal-but="ok">
                     <span>{{"common_confirm"|translate}}</span>
                 </button>
             </div>
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts
new file mode 100644
index 00000000..b8d4247b
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts
@@ -0,0 +1,170 @@
+/*
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import {Component,OnInit,ViewChild,ViewEncapsulation} from '@angular/core';
+import {ModalService} from  '../correlation-modal/modal.service';
+import {RuleModel} from './alarmRule';
+import {RuleRequest} from './ruleRequest';
+import { Router } from '@angular/router';
+import {Http,Response,Jsonp,Headers,RequestOptions} from '@angular/http';
+import {AlarmRuleService} from './alarmRule.service';
+declare var jQuery: any;
+
+@Component({
+    selector:'alarmRule',
+    templateUrl:'./alarmRule.component.html',
+   
+})
+export class AlarmRule implements OnInit{
+    ruleModel:RuleModel;
+    rules:RuleModel[];
+    queryRule:RuleModel;
+    activeText:string;
+    ruleName:string;
+    enable_on="enabled";
+    enable_off="disabled"
+    totalcount:number;
+    model: any;
+    ruleRequest: RuleRequest;
+    solution = 'ANGULAR';
+    selection = 'A'
+    activeStatus=["option_all","common_enabled", "common_disabled"];
+
+    constructor(public _alarmRuleService:AlarmRuleService, private _ModalService:ModalService,
+    private router: Router){};
+
+    switch(select:string):void {
+        console.log(select);
+        if(select == "common_enabled") {
+            this.ruleModel.enabled = 1;
+        }else if(select=="common_disabled"){
+            this.ruleModel.enabled = 0;
+        }else{
+
+             this.ruleModel.enabled = null;
+        }
+        this.setActiveText();
+    };
+
+    setActiveText():void {
+        if(this.ruleModel.enabled == 1){
+            this.activeText = "common_enabled";
+            this.ruleRequest.enabled=1;
+        }
+        else if(this.ruleModel.enabled == 0){
+            this.activeText = "common_disabled";
+            this.ruleRequest.enabled=0;
+        }else{
+            this.activeText="option_all";
+            this.ruleRequest.enabled=null;
+        }
+    };
+  
+     getRules():Promise<any>{
+         return  this._alarmRuleService
+             .getRules()
+             .then(rules=>{
+                this.rules=rules.rules;
+                this.totalcount = rules.totalcount;
+                });
+     }
+
+     searchRules():void{
+         if(this.ruleModel.enabled == null){
+            this.ruleRequest.enabled =null;
+         }
+         this.ruleRequest.rulename = this.ruleModel.rulename;
+         console.log(this.ruleRequest.enabled,this.ruleRequest.rulename);
+         
+         this._alarmRuleService
+         .searchrules(this.ruleRequest)
+         .then(rules=>{
+             this.rules = rules;
+             this.totalcount = rules.length;
+            });
+     }
+     updateRule(rule:RuleModel):void{
+         this.router.navigate(['ruleInfo/',rule.ruleid]);
+     }
+
+     delete(rule: RuleModel):void{
+         rule.enabled == 1 ? this.deleteActiveRule(rule):this.deleteModel(rule.ruleid,this._alarmRuleService,this);
+     }
+
+     on_off(rule:RuleModel){
+         rule.enabled == 0 ? rule.enabled = 1: rule.enabled = 0;
+         this._alarmRuleService
+         .updateRule(rule)
+         .then(res => {
+             rule = res;
+            });
+     }
+
+     reset():void{
+        this.ruleModel.rulename = null;
+        this.activeText = "option_all";
+        this.ruleModel.enabled = null;
+        this.getRules();
+  }
+    
+     deleteActiveRule(rule:RuleModel):void{
+         jQuery("#"+rule.ruleid).popModal({
+            html: jQuery('#deleteActiveRuleContent'),
+            placement: 'leftTop',
+            showCloseBut: false,
+            onDocumentClickClose: true,
+            onOkBut: function () {
+            },
+        });
+     }
+      deleteModel(ruleid:string,alarm:AlarmRuleService,obj:any):void{
+          jQuery("#"+ruleid).popModal({
+            html: jQuery('#deleteTimingTaskContent'),
+            placement: 'leftTop',
+            showCloseBut: false,
+            onDocumentClickClose: true,
+            onOkBut: function () {
+                jQuery("#deleteTimingTaskDlg").append(jQuery('#deleteTimingTaskContent'));
+                 alarm.delete(ruleid);
+                 obj.getRules();
+            },
+            onCancelBut: function () {
+            }
+        });
+     }
+
+    ngOnInit():void{
+        this.activeText="option_all";
+        this.ruleModel={
+            ruleid:null,
+            rulename:null,
+            description:"",
+            content:null,
+            createtime:null,
+            creator:null,
+            updatetime:null,
+            modifier:null,
+            enabled:0,
+        }
+        this.ruleRequest={
+            ruleid:null,
+            rulename:null,
+            creator:null,
+            modifier:null,
+            enabled:null,
+        }
+        this.getRules();
+    }
+}
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts
new file mode 100644
index 00000000..f7b640ba
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts
@@ -0,0 +1,126 @@
+/*
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+import {Injectable} from '@angular/core';
+import {Http,Response,Headers} from '@angular/http';
+import 'rxjs/add/operator/toPromise';
+import 'rxjs/add/operator/map';
+import {RuleModel} from './alarmRule';
+import {RuleRequest} from './ruleRequest'
+import { Router } from '@angular/router';
+import {ModalService} from  '../correlation-modal/modal.service';
+
+@Injectable()
+export class AlarmRuleService{
+    private ruleUrl = "/api/correlation-mgt/v1/rule";
+    private headers = new Headers({'Content-Type': 'application/json'});
+    constructor(private http:Http,private _ModalService:ModalService,private router:Router){}
+
+    getRules():Promise<any>{
+        return this.http.get(this.ruleUrl)
+        .toPromise()
+        .then(res => res.json())
+        .catch(this.handleError);
+    }
+
+    private handleError(error: any): Promise<any> {
+        console.error('An error occurred', error); 
+        return Promise.reject(error._body || error);
+    }
+    
+     search(ruleid:string):Promise<RuleModel>{
+      if(typeof(ruleid) == "string"){
+         let rule =[{
+            ruleid:null,
+            rulename:null,
+            description:null,
+            content:null,
+            createtime:null,
+            creator:null,
+            updatetime:null,
+            modifier:null,
+            enabled:0,
+         }]
+      }
+      let data = {'ruleid':ruleid};
+      var queryrequest = JSON.stringify(data);
+      const url = `${this.ruleUrl}?queryrequest=${queryrequest}`;
+        return this.http.get(url, this.headers)
+        .toPromise()
+        .then(res => res.json().rules as RuleModel)
+        .catch(this.handleError);
+  }
+  
+  searchrules(rule:RuleRequest):Promise<RuleModel[]>{
+     let data = {rulename:rule.rulename,enabled:rule.enabled}
+     console.log(JSON.stringify(data));
+     const url = `${this.ruleUrl}?queryrequest=${JSON.stringify(data)}`
+      return this.http.get(url,{body:data,headers:this.headers})
+      .toPromise()
+      .then(res => res.json().rules as RuleModel[])
+      .catch(this.handleError);
+  }
+
+  checkContent(ruleContent:string): Promise<any>{
+      const url = "/api/correlation-engine/v1/rule";
+      let data = {content:ruleContent};
+      return this.http
+      .post(url,JSON.stringify(data),{headers:this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error);
+  }
+  
+  updateRule(rule:RuleModel): Promise<any>{
+      let rules = {
+          "ruleid": rule.ruleid,
+          "description": rule.description,
+          "content": rule.content,
+          "enabled": rule.enabled
+      }
+      const url = `${this.ruleUrl}`
+      return this.http
+      .post(url,JSON.stringify(rules),{headers:this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error)
+  }
+  
+  save(rule:RuleModel):Promise<any>{
+      let ruledata = {
+        "description": rule.description,
+        "content": rule.content,
+        "enabled": rule.enabled,
+        "rulename": rule.rulename
+      }
+      return this.http.put(this.ruleUrl,JSON.stringify(ruledata),{headers:this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error);
+  }
+
+  public delete(ruleid:string):Promise<void>{
+      let ru = {'ruleid':ruleid};
+      const url = `${this.ruleUrl}`;
+      return this.http.delete(url,{body:JSON.stringify(ru),headers:this.headers})
+      .toPromise()
+      .then(res => {
+          if(res.status == 200){
+              
+          }
+      })
+      .catch(this.handleError);
+  }
+}
+\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts
new file mode 100644
index 00000000..a376acab
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts
@@ -0,0 +1,26 @@
+/*
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+export class RuleModel{
+    ruleid:string;
+    rulename:string;
+    description:string; 
+    content:string;
+    createtime:Date;
+    creator:number;
+    updatetime:Date;
+    modifier:string;
+    enabled?;
+}
+\ No newline at end of file
diff --git a/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts
new file mode 100644
index 00000000..0abf6323
--- /dev/null
+++ b/alarm-analysis/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts
@@ -0,0 +1,22 @@
+/*
+ Copyright 2017 ZTE Corporation.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+export class RuleRequest{
+    ruleid:string;
+    rulename:string;
+    creator:number;
+    modifier:string;
+    enabled:number;
+}
+\ No newline at end of file
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 00000000..2ab522c7
--- /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 00000000..398159a3
--- /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 00000000..423e4cad
--- /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 00000000..32297373
--- /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 00000000..20d968e1
--- /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 00000000..1d7ce27a
--- /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 d42d28cc..593c6a3d 100644
--- a/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
+++ b/lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js
@@ -95,7 +95,6 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 
     .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 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
                   //  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 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 		
             //$('#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 app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
             
             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 @@ var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', '
 
         $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 97b7e0c5..c2e4917b 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/resmgr/src/main/webapp/bak/resmgr-nfv/conf/License.txt b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/conf/License.txt
index 8e698ecb..8e698ecb 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/conf/License.txt
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/conf/License.txt
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/conf/globalconfig.json b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/conf/globalconfig.json
index 20ce9a54..20ce9a54 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/conf/globalconfig.json
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/conf/globalconfig.json
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/css/RMain.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/RMain.css
index 12aa5066..12aa5066 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/css/RMain.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/RMain.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/css/VMMain.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/VMMain.css
index 048d814a..048d814a 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/css/VMMain.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/VMMain.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/css/bootstrap-table.min.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/bootstrap-table.min.css
index d72d0655..d72d0655 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/css/bootstrap-table.min.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/bootstrap-table.min.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/css/bootstrap.min.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/bootstrap.min.css
index 679272d2..679272d2 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/css/bootstrap.min.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/bootstrap.min.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/css/jquery.dataTables.min.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/jquery.dataTables.min.css
index 781de6bf..781de6bf 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/css/jquery.dataTables.min.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/jquery.dataTables.min.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/css/resmgr.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/resmgr.css
index f635263b..f635263b 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/css/resmgr.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/css/resmgr.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/datacenter.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/datacenter.html
index 7c628222..7c628222 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/datacenter.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/datacenter.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/html/index.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/html/index.html
index 73508e09..73508e09 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/html/index.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/html/index.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/License.txt b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/License.txt
index 8e698ecb..8e698ecb 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/License.txt
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/License.txt
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/add.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/add.png
index d1f82993..d1f82993 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/add.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/add.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/arrow-down-enable.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/arrow-down-enable.png
index dc8ddbe6..dc8ddbe6 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/arrow-down-enable.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/arrow-down-enable.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/collapse_arrow.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/collapse_arrow.png
index 8830741a..8830741a 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/collapse_arrow.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/collapse_arrow.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/delete.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/delete.png
index 737f8797..737f8797 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/delete.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/delete.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/edit.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/edit.png
index 68d76257..68d76257 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/edit.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/edit.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/expand_arrow.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/expand_arrow.png
index f8935e1f..f8935e1f 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/expand_arrow.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/expand_arrow.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/ideo_default_select.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/ideo_default_select.png
index 50c3a251..50c3a251 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/ideo_default_select.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/ideo_default_select.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/import.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/import.png
index 8cfc5256..8cfc5256 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/import.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/import.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/line.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/line.png
index 9d340a8d..9d340a8d 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/line.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/line.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/loading-spinner-grey.gif b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/loading-spinner-grey.gif
index 6d614d3d..6d614d3d 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/loading-spinner-grey.gif
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/loading-spinner-grey.gif
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/openo.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/openo.png
index 328b7353..328b7353 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/openo.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/openo.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/page_l.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/page_l.png
index e8b98c7c..e8b98c7c 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/page_l.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/page_l.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/page_left_disabled.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/page_left_disabled.png
index f72a90bd..f72a90bd 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/page_left_disabled.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/page_left_disabled.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/page_r.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/page_r.png
index 2e637eee..2e637eee 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/page_r.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/page_r.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/sort_asc.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/sort_asc.png
index a88d7975..a88d7975 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/sort_asc.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/sort_asc.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/sort_both.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/sort_both.png
index 18670406..18670406 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/sort_both.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/sort_both.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/images/sort_desc.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/sort_desc.png
index def071ed..def071ed 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/images/sort_desc.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/images/sort_desc.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/SendMsg.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/SendMsg.js
index ba8d9ac7..ba8d9ac7 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/SendMsg.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/SendMsg.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/bootbox.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/bootbox.min.js
index a7ea24fe..a7ea24fe 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/bootbox.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/bootbox.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/bootstrap-table.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/bootstrap-table.min.js
index aa8e6854..aa8e6854 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/bootstrap-table.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/bootstrap-table.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/bootstrap.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/bootstrap.min.js
index b04a0e82..b04a0e82 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/bootstrap.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/bootstrap.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/chart.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/chart.min.js
index 9a39f0fc..9a39f0fc 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/chart.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/chart.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/datacenter.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/datacenter.js
index 6c6ec2df..6c6ec2df 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/datacenter.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/datacenter.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/gconf.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/gconf.js
index abd1195c..abd1195c 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/gconf.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/gconf.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/jquery-1.11.2.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/jquery-1.11.2.min.js
index e6a051d0..e6a051d0 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/jquery-1.11.2.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/jquery-1.11.2.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/jquery.dataTables.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/jquery.dataTables.min.js
index 02694a4a..02694a4a 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/jquery.dataTables.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/jquery.dataTables.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/jquery.validate.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/jquery.validate.min.js
index 52646177..52646177 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/jquery.validate.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/jquery.validate.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/resmgr.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/resmgr.js
index e198ed83..e198ed83 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/resmgr.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/resmgr.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/validateset.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/validateset.js
index 8810c388..8810c388 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/validateset.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/validateset.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/js/vim.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/vim.js
index e39f4fb3..e39f4fb3 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/js/vim.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/js/vim.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/location.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/location.html
index c387d5d6..c387d5d6 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/location.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/location.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/resource.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/resource.html
index f8ee50a7..f8ee50a7 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/resource.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/resource.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-nfv/vim.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/vim.html
index d46b801c..d46b801c 100644
--- a/resmgr/src/main/webapp/bak/resmgr-nfv/vim.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-nfv/vim.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn.rar b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn.rar
index 5797c4fc..5797c4fc 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn.rar
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn.rar
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/conf/License.txt b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/conf/License.txt
index 8e698ecb..8e698ecb 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/conf/License.txt
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/conf/License.txt
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/conf/dataconfig.json b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/conf/dataconfig.json
index 20ce9a54..20ce9a54 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/conf/dataconfig.json
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/conf/dataconfig.json
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/css/RMain.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/RMain.css
index 12aa5066..12aa5066 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/css/RMain.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/RMain.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/css/VMMain.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/VMMain.css
index 048d814a..048d814a 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/css/VMMain.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/VMMain.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/css/bootstrap-table.min.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/bootstrap-table.min.css
index d72d0655..d72d0655 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/css/bootstrap-table.min.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/bootstrap-table.min.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/css/bootstrap.min.css b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/bootstrap.min.css
index 679272d2..679272d2 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/css/bootstrap.min.css
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/css/bootstrap.min.css
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/License.txt b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/License.txt
index 8e698ecb..8e698ecb 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/License.txt
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/License.txt
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/add.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/add.png
index d1f82993..d1f82993 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/add.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/add.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/arrow-down-enable.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/arrow-down-enable.png
index dc8ddbe6..dc8ddbe6 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/arrow-down-enable.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/arrow-down-enable.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/collapse_arrow.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/collapse_arrow.png
index 8830741a..8830741a 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/collapse_arrow.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/collapse_arrow.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/delete.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/delete.png
index 737f8797..737f8797 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/delete.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/delete.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/edit.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/edit.png
index 68d76257..68d76257 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/edit.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/edit.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/expand_arrow.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/expand_arrow.png
index f8935e1f..f8935e1f 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/expand_arrow.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/expand_arrow.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/ideo_default_select.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/ideo_default_select.png
index 50c3a251..50c3a251 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/ideo_default_select.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/ideo_default_select.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/import.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/import.png
index 8cfc5256..8cfc5256 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/import.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/import.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/line.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/line.png
index 9d340a8d..9d340a8d 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/line.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/line.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/loading-spinner-grey.gif b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/loading-spinner-grey.gif
index 6d614d3d..6d614d3d 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/loading-spinner-grey.gif
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/loading-spinner-grey.gif
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/openo.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/openo.png
index 328b7353..328b7353 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/openo.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/openo.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/page_l.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/page_l.png
index e8b98c7c..e8b98c7c 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/page_l.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/page_l.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/page_left_disabled.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/page_left_disabled.png
index f72a90bd..f72a90bd 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/page_left_disabled.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/page_left_disabled.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/page_r.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/page_r.png
index 2e637eee..2e637eee 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/page_r.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/page_r.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/sort_asc.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/sort_asc.png
index a88d7975..a88d7975 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/sort_asc.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/sort_asc.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/sort_both.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/sort_both.png
index 18670406..18670406 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/sort_both.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/sort_both.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/images/sort_desc.png b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/sort_desc.png
index def071ed..def071ed 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/images/sort_desc.png
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/images/sort_desc.png
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/js/bootstrap-table-filter-control.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/bootstrap-table-filter-control.min.js
index d321a08e..d321a08e 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/js/bootstrap-table-filter-control.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/bootstrap-table-filter-control.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/js/bootstrap-table.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/bootstrap-table.min.js
index a939f007..a939f007 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/js/bootstrap-table.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/bootstrap-table.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/js/bootstrap.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/bootstrap.min.js
index b04a0e82..b04a0e82 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/js/bootstrap.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/bootstrap.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/js/brs.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/brs.js
index f0d33b0f..f0d33b0f 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/js/brs.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/brs.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/js/jquery-1.11.2.min.js b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/jquery-1.11.2.min.js
index e6a051d0..e6a051d0 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/js/jquery-1.11.2.min.js
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/js/jquery-1.11.2.min.js
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/link.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/link.html
index c33fad78..c33fad78 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/link.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/link.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/ne.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/ne.html
index 6cf13052..6cf13052 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/ne.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/ne.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/port.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/port.html
index cc9442de..cc9442de 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/port.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/port.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/resource.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/resource.html
index 58f0a018..58f0a018 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/resource.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/resource.html
diff --git a/resmgr/src/main/webapp/bak/resmgr-sdn/site.html b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/site.html
index 3cb49918..3cb49918 100644
--- a/resmgr/src/main/webapp/bak/resmgr-sdn/site.html
+++ b/resmgr/src/main/webapp/resmgr/bak/resmgr-sdn/site.html
diff --git a/resmgr/src/main/webapp/index.html b/resmgr/src/main/webapp/resmgr/index.html
index a7152023..9a2300f0 100644
--- a/resmgr/src/main/webapp/index.html
+++ b/resmgr/src/main/webapp/resmgr/index.html
@@ -26,7 +26,7 @@
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.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"/>
+    <!--<link href="framework/css/open-ostyle.css" rel="stylesheet"/>-->
     <!--<link rel="stylesheet" href="framework/css/RMain.css">
     <link rel="stylesheet" href="framework/css/VMMain.css">-->
     <link href="framework/css/open-ostyle.css" rel="stylesheet"/>
diff --git a/resmgr/src/main/webapp/js/app.js b/resmgr/src/main/webapp/resmgr/js/app.js
index 6c2ef298..149739aa 100644
--- a/resmgr/src/main/webapp/js/app.js
+++ b/resmgr/src/main/webapp/resmgr/js/app.js
@@ -139,41 +139,49 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();
 
 
-            var portName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.name", "errtag":"textboxErr", "errfunc":"validatetextbox", "required":true}};
+            var portName = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"port.name", "errtag":"textboxErrName", "errfunc":"validatetextboxName", "required":true}};
             $('#myModal #name').append($compile(Mustache.to_html(text, portName.ErrMsg))($scope));
 
-            var portMe = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.me", "errtag":"textboxErr", "errfunc":"validatetextbox", "required":true}};
+            var portMe = {"ErrMsg" :     {"errmsg" : "ME is required.", "modalVar":"port.me", "errtag":"textboxErrMe", "errfunc":"validatetextboxMe", "required":true}};
             $('#myModal #me').append($compile(Mustache.to_html(text, portMe.ErrMsg))($scope));
 
             //var portType = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"port.type"}};
             $('#myModal #type').append($compile(Mustache.to_html(dropDown, $scope.data.dropdowntypeData))($scope));
 
-            var portLayerRate = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"port.layerrate"}};
+            var portLayerRate = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.layerrate"}};
             $('#myModal #layerrate').append($compile(Mustache.to_html(text, portLayerRate.ErrMsg))($scope));
 
             //var portEdgePoint = {"ErrMsg" :     {"ipv4Err" : "IP Address is required.", "modalVar":"port.Edgepoint"}};
             $('#myModal #Edgepoint').append($compile(Mustache.to_html(dropDown, $scope.data.dropdownEdgeData))($scope));
 
-            var portIndex = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"port.portindex"}};
+            var portIndex = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.portindex"}};
             $('#myModal #portindex').append($compile(Mustache.to_html(text, portIndex.ErrMsg))($scope));
 
-            var portIp = {"ErrMsg" :     {"textboxErr" : "The ip is required.", "modalVar":"port.ipaddress"}};
+            var portIp = {"ErrMsg" :     {"errmsg" : "The ip is required.", "modalVar":"port.ipaddress"}};
             $('#myModal #ipaddress').append($compile(Mustache.to_html(text, portIp.ErrMsg))($scope));
 
-            var portAdmin = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"port.adminState"}};
+            var portAdmin = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.adminState"}};
             $('#myModal #adminState').append($compile(Mustache.to_html(text, portAdmin.ErrMsg))($scope));
 
-            var portOperatingState = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"port.operatingState"}};
+            var portOperatingState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"port.operatingState"}};
             $('#myModal #operatingState').append($compile(Mustache.to_html(text, portOperatingState.ErrMsg))($scope));
 
         }
 
-        $scope.validatetextbox = function (value){
+        $scope.validatetextboxName = function (value){
             if($scope.port.name) {
-                $scope.textboxErr = false;
+                $scope.textboxErrName = false;
             }
             else
-                $scope.textboxErr = true;
+                $scope.textboxErrName = true;
+        }
+
+        $scope.validatetextboxMe = function (value){
+            if($scope.port.me) {
+                $scope.textboxErrMe = false;
+            }
+            else
+                $scope.textboxErrMe = true;
         }
 
         $scope.validateipv4 = function (value){
@@ -219,7 +227,8 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $scope.port = {};
             //$("#myModal").modal();
             $("#myModal").modal({}).draggable();
-            $scope.textboxErr = false;
+            $scope.textboxErrName = false;
+            $scope.textboxErrMe = false;
             $scope.ipv4Err = false;
             $scope.numericErr = false;
         }
@@ -367,29 +376,29 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var text = $(modelTemplate).filter('#textfield').html();
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();
 
-            var siteName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"site.name", "errtag":"textboxErr", "errfunc":"validatetextbox", "required":true}};
+            var siteName = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"site.name", "errtag":"textboxErrName", "errfunc":"validatetextboxName", "required":true}};
             $('#myModal #name').append($compile(Mustache.to_html(text, siteName.ErrMsg))($scope));
 
             $('#myModal #type').append($compile(Mustache.to_html(dropDown, $scope.data.dropdownsiteData))($scope));
 
-            var siteTenantName = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"site.tenatname"}};
+            var siteTenantName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"site.tenatname"}};
             $('#myModal #tenantname').append($compile(Mustache.to_html(text, siteTenantName.ErrMsg))($scope));
 
-            var siteTenantType = {"ErrMsg" :     {"textboxErr" : "The tenanttype is required.", "modalVar":"site.tenanttype"}};
+            var siteTenantType = {"ErrMsg" :     {"errmsg" : "The tenanttype is required.", "modalVar":"site.tenanttype"}};
             $('#myModal #tenanttype').append($compile(Mustache.to_html(text, siteTenantType.ErrMsg))($scope));
 
-            var siteLocation = {"ErrMsg" :     {"textboxErr" : "Location is required.", "modalVar":"site.location", "placeholder":"Location"}};
+            var siteLocation = {"ErrMsg" :     {"errmsg" : "Location is required.", "modalVar":"site.location", "placeholder":"Location"}};
             $('#myModal #location').append($compile(Mustache.to_html(text, siteLocation.ErrMsg))($scope));
 
 
         }
 
-        $scope.validatetextbox = function (value){
+        $scope.validatetextboxName = function (value){
             if($scope.site.name) {
-                $scope.textboxErr = false;
+                $scope.textboxErrName = false;
             }
             else
-                $scope.textboxErr = true;
+                $scope.textboxErrName = true;
         }
 
 
@@ -409,7 +418,7 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $scope.site = {};
             //$("#myModal").modal();
             $("#myModal").modal({}).draggable();
-            $scope.textboxErr = false;
+            $scope.textboxErrName = false;
         }
         $scope.saveData = function(id) {
             if(id) {
@@ -558,82 +567,57 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var ipv4 = $(modelTemplate).filter('#ipv4').html();
             var number = $(modelTemplate).filter('#numeric').html();
 
-            var locId = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.Id", "errtag":"textboxErr", "errfunc":"validatetextbox", "placeholder":"Country", "placeholder":"Id"}};
+            var locId = {"ErrMsg" :     {"errmsg" : "Name is required.", "modalVar":"loc.Id", "errtag":"textboxErrId", "errfunc":"validatetextboxId", "placeholder":"Country", "placeholder":"Id"}};
             $('#myModal #Name').append($compile(Mustache.to_html(text, locId.ErrMsg))($scope));
 
-            var locCountry = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.Country", "errtag":"textboxErr", "errfunc":"validatetextbox", "placeholder":"Country","required":true}};
+            var locCountry = {"ErrMsg" :     {"errmsg" : "Country is required.", "modalVar":"loc.Country", "errtag":"textboxErrCountry", "errfunc":"validatetextboxCountry", "placeholder":"Country","required":true}};
             $('#myModal #Country').append($compile(Mustache.to_html(text, locCountry.ErrMsg))($scope));
 
-            var locLocation = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.Location", "errtag":"textboxErr", "errfunc":"validatetextbox", "placeholder":"Location","required":true}};
+            var locLocation = {"ErrMsg" :     {"errmsg" : "Location is required.", "modalVar":"loc.Location", "errtag":"textboxErrLocation", "errfunc":"validatetextboxLocation", "placeholder":"Location","required":true}};
             $('#myModal #Location').append($compile(Mustache.to_html(text, locLocation.ErrMsg))($scope));
 
             var locDescription = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.Description", "errtag":"textboxErr", "errfunc":"validatetextbox", "placeholder":"Description "}};
             $('#myModal #Description').append($compile(Mustache.to_html(text, locDescription.ErrMsg))($scope));
 
-            var locLatitude = {"ErrMsg" :     {"ipv4Err" : "IP Address is required.", "modalVar":"loc.Latitude", "errtag":"textboxErr", "errfunc":"validatetextbox", "placeholder":"Latitude","required":true}};
+            var locLatitude = {"ErrMsg" :     {"errmsg" : "Latitude is required.", "modalVar":"loc.Latitude", "errtag":"textboxErrLatitude", "errfunc":"validatetextboxLatitude", "placeholder":"Latitude","required":true}};
             $('#myModal #Latitude').append($compile(Mustache.to_html(text, locLatitude.ErrMsg))($scope));
 
-            var locLongitude = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"loc.Longitude", "errtag":"textboxErr", "errfunc":"validatetextbox", "placeholder":"Longitude","required":true}};
+            var locLongitude = {"ErrMsg" :     {"errmsg" : "Longitude is required.", "modalVar":"loc.Longitude", "errtag":"textboxErrLongitude", "errfunc":"validatetextboxLongitude", "placeholder":"Longitude","required":true}};
             $('#myModal #Longitude').append($compile(Mustache.to_html(text, locLongitude.ErrMsg))($scope));
         }
 
-        $scope.validatetextbox = function (value){
-            if($scope.loc.Id) {
-                $scope.textboxErr = false;
-            }
-            else
-                $scope.textboxErr = true;
-        }
-
-        $scope.validatetextbox = function (value){
-            if($scope.loc.Country) {
-                $scope.textboxErr = false;
-            }
-            else
-                $scope.textboxErr = true;
-        }
-
-        $scope.validatetextbox = function (value){
+        $scope.validatetextboxLocation = function (value){
             if($scope.loc.Location) {
-                $scope.textboxErr = false;
-            }
-            else
-                $scope.textboxErr = true;
-        }
-
-        $scope.validatetextbox = function (value){
-            if($scope.loc.Latitude) {
-                $scope.textboxErr = false;
+                $scope.textboxErrLocation = false;
             }
             else
-                $scope.textboxErr = true;
+                $scope.textboxErrLocation = true;
         }
 
-        $scope.validatetextbox = function (value){
-            if($scope.loc.Longitude) {
-                $scope.textboxErr = false;
+        $scope.validatetextboxCountry = function (value){
+            if($scope.loc.Country) {
+                $scope.textboxErrCountry = false;
             }
             else
-                $scope.textboxErr = true;
+                $scope.textboxErrCountry = true;
         }
 
-        $scope.validatenumeric = function (value){
+        $scope.validatetextboxLatitude = function (value){
             if($scope.loc.Latitude) {
-                $scope.numericErr = false;
+                $scope.textboxErrLatitude = false;
             }
             else
-                $scope.numericErr = true;
+                $scope.textboxErrLatitude = true;
         }
 
-        $scope.validatenumeric = function (value){
+        $scope.validatetextboxLongitude = function (value){
             if($scope.loc.Longitude) {
-                $scope.numericErr = false;
+                $scope.textboxErrLongitude = false;
             }
             else
-                $scope.numericErr = true;
+                $scope.textboxErrLongitude = true;
         }
 
-
         $scope.closeModal = function() {
             console.log("Closing Modal...");
             $('#myModal').modal('hide');
@@ -651,8 +635,10 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             $scope.location = {};
             //$("#myModal").modal();
             $("#myModal").modal({}).draggable();
-            $scope.textboxErr = false;
-            $scope.numericErr = false;
+            $scope.textboxErrLocation = false;
+            $scope.textboxErrCountry = false;
+            $scope.textboxErrLatitude = false;
+            $scope.textboxErrLongitude = false;
         }
         $scope.saveData = function(id) {
             if(id) {
@@ -806,25 +792,25 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             //var linkType = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"link.type"}};
             $('#myModal #type').append($compile(Mustache.to_html(dropDown, $scope.data.dropdownlinkData))($scope));
 
-            var linkLayerRate = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"link.layerRate"}};
+            var linkLayerRate = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.layerRate"}};
             $('#myModal #layerRate').append($compile(Mustache.to_html(text, linkLayerRate.ErrMsg))($scope));
 
-            var linkSourcePort = {"ErrMsg" :     {"numericErr" : "The name is required.", "modalVar":"link.sourcePort"}};
+            var linkSourcePort = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.sourcePort"}};
             $('#myModal #sourcePort').append($compile(Mustache.to_html(text, linkSourcePort.ErrMsg))($scope));
 
-            var linkSinkPort = {"ErrMsg" :     {"numericErr" : "IP Address is required.", "modalVar":"link.sinkPort"}};
+            var linkSinkPort = {"ErrMsg" :     {"errmsg" : "IP Address is required.", "modalVar":"link.sinkPort"}};
             $('#myModal #sinkPort').append($compile(Mustache.to_html(text, linkSinkPort.ErrMsg))($scope));
 
-            var linkSourceNe = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"link.sourceNE"}};
+            var linkSourceNe = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.sourceNE"}};
             $('#myModal #sourceNE').append($compile(Mustache.to_html(text, linkSourceNe.ErrMsg))($scope));
 
-            var linkSinkNe = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"link.sinkNE"}};
+            var linkSinkNe = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.sinkNE"}};
             $('#myModal #sinkNE').append($compile(Mustache.to_html(text, linkSinkNe.ErrMsg))($scope));
 
-            var linkAdminState = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"link.adminState"}};
+            var linkAdminState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.adminState"}};
             $('#myModal #adminState').append($compile(Mustache.to_html(text, linkAdminState.ErrMsg))($scope));
 
-            var linkOperatingState = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"link.operatingState"}};
+            var linkOperatingState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"link.operatingState"}};
             $('#myModal #operatingState').append($compile(Mustache.to_html(text, linkOperatingState.ErrMsg))($scope));
 
         }
@@ -1018,58 +1004,51 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
             var number = $(modelTemplate).filter('#numeric').html();
             var dropDown = $(modelTemplate).filter('#simpleDropdownTmpl').html();
 
-            var neName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.name", "errtag":"textboxErr", "errfunc":"validatetextbox","required":true}};
+            var neName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.name", "errtag":"textboxErrName", "errfunc":"validatetextboxName","required":true}};
             $('#myModal #name').append($compile(Mustache.to_html(text, neName.ErrMsg))($scope));
 
-            var neVersion = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.version","errtag":"textboxErr", "errfunc":"validatetextbox","required":true}};
+            var neVersion = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.version","errtag":"textboxErrVersion", "errfunc":"validatetextboxVersion","required":true}};
             $('#myModal #version').append($compile(Mustache.to_html(text, neVersion.ErrMsg))($scope));
 
-            var neProductName = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"ne.productname" }};
+            var neProductName = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.productname" }};
             $('#myModal #productname').append($compile(Mustache.to_html(text, neProductName.ErrMsg))($scope));
 
             $('#myModal #controller').append($compile(Mustache.to_html(dropDown, $scope.data.dropdownneData))($scope));
 
-            var neIPAddress = {"ErrMsg" :     {"ipv4Err" : "IP Address is required.", "modalVar":"ne.ipaddress"}};
+            var neIPAddress = {"ErrMsg" :     {"errmsg" : "IP Address is required.", "modalVar":"ne.ipaddress"}};
             $('#myModal #ipaddress').append($compile(Mustache.to_html(text, neIPAddress.ErrMsg))($scope));
 
-            var neNERole = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"ne.nerole"}};
+            var neNERole = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.nerole"}};
             $('#myModal #nerole').append($compile(Mustache.to_html(text, neNERole.ErrMsg))($scope));
 
-            var neAdminState = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"ne.adminState"}};
+            var neAdminState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.adminState"}};
             $('#myModal #adminState').append($compile(Mustache.to_html(text, neAdminState.ErrMsg))($scope));
 
-            var neOperatingState = {"ErrMsg" :     {"textboxErr" : "The name is required.", "modalVar":"ne.operatingState"}};
+            var neOperatingState = {"ErrMsg" :     {"errmsg" : "The name is required.", "modalVar":"ne.operatingState"}};
             $('#myModal #operatingState').append($compile(Mustache.to_html(text, neOperatingState.ErrMsg))($scope));
 
         }
 
-        $scope.validatetextbox = function (value){
+        $scope.validatetextboxName = function (value){
             if($scope.ne.name) {
-                $scope.textboxErr = false;
+                $scope.textboxErrName = false;
             }
             else
-                $scope.textboxErr = true;
+                $scope.textboxErrName = true;
         }
 
-        $scope.validatetextbox = function (value){
+        $scope.validatetextboxVersion = function (value){
             if($scope.ne.version) {
-                $scope.textboxErr = false;
+                $scope.textboxErrVersion = false;
             }
             else
-                $scope.textboxErr = true;
-        }
-
-        $scope.validateipv4 = function (value){
-            if($scope.ne.ipaddress) {
-                $scope.ipv4Err = false;
-            }
-            else
-                $scope.ipv4Err = true;
+                $scope.textboxErrVersion = true;
         }
 
         $scope.closeModal = function() {
             console.log("Closing Modal...");
             $('#myModal').modal('hide');
+            $scope.textboxErrName = false;
         }
 
 
@@ -1083,9 +1062,8 @@ var app = angular.module("ResourceMgrApp", ["ui.router", "ngTable"])
         $scope.showAddModal = function() {
             console.log("Showing Modal to Add data");
             $scope.ne = {};
-            $scope.textboxErr = false;
-            $scope.ipv4Err = false;
-            $scope.numericErr = false;
+            $scope.textboxErrName = false;
+            $scope.textboxErrVersion = false;
             //$("#myModal").modal();
             $("#myModal").modal({}).draggable();
         }
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html
new file mode 100644
index 00000000..91a1c191
--- /dev/null
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenter.html
@@ -0,0 +1,134 @@
+<!--/* 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.
+*/-->
+
+<h4>{{title}}</h4>
+<br>
+<br>
+<div id="datacenterAction" ng-init="init()">
+
+</div>
+<br><br>
+
+<table ng-table="neTableParams" class="table table-bordered table-striped" show-filter="true">
+    <tr ng-repeat="datacenterData in $data">
+        <td header="'ng-table/headers/checkbox.html'">
+            <input type="checkbox" ng-model="checkboxes.items[datacenterData.Id]" />
+        </td>
+        <td title="'Id'" filter="{ Id: 'text'}" sortable="'Id'">
+            {{datacenterData.Id}}
+        </td>
+        <td title="'Name'" filter="{ Name: 'number'}" sortable="'Name'">
+            {{datacenterData.Name}}
+        </td>
+        <td title="'Status'" filter="{ Status: 'text'}" sortable="'Status'">
+            {{datacenterData.Status}}
+        </td>
+        </td>
+        <td title="'Country'" filter="{ Country: 'text'}" sortable="'Country'">
+            {{datacenterData.Country}}
+        </td>
+        <td title="'Location'" filter="{ Location: 'text'}" sortable="'Location'">
+            {{datacenterData.Location}}
+        </td>
+        <td title="'Service Name'" filter="{ ServiceName: 'text'}" sortable="'ServiceName'">
+            {{datacenterData.ServiceName}}
+        </td>
+        <td title="'Cpu(Cores)'" filter="{ Cpu: 'number'}" sortable="'Cpu'">
+            {{datacenterData.Cpu}}
+        </td>
+        <td title="'Memory(MB)'" filter="{ Memory: 'number'}" sortable="'Memory'">
+            {{datacenterData.Memory}}
+        </td>
+        <td title="'HardDisk(GB)'" filter="{ HardDisk: 'number'}" sortable="'HardDisk'">
+            {{datacenterData.HardDisk}}
+        </td>
+        <td title="'Action'">
+            <span  ng-click="editData(datacenterData.Id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>
+            <span  ng-click="deleteData(datacenterData.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">
+
+        <!-- Modal content-->
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h5 class="modal-title labelstyle">Modal Header</h5>
+            </div>
+            <form ng-submit="saveData(province.id)" name="provinceForm" method="post">
+                <div class="modal-body">
+
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">Name</label>
+                        <div id="Name" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">Country</label>
+                        <div id="Country" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">Status</label>
+                        <div id="Status" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">Location</label>
+                        <div id="Location" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">ServiceName</label>
+                        <div id="ServiceName" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">CPU(Cores)</label>
+                        <div id="Cpu" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">Memory</label>
+                        <div id="Memory" class="col-xs-8" >
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label class="col-xs-4 col-form-label">HardDisk</label>
+                        <div id="HardDisk" class="col-xs-8" >
+                        </div>
+                    </div>
+
+                </div>
+
+                <div id="footerBtns" class="modal-footer">
+
+                </div>
+            </form>
+        </div>
+
+
+    </div>
+</div>
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js
new file mode 100644
index 00000000..3424afec
--- /dev/null
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/datacenter/datacenterRest.js
@@ -0,0 +1,72 @@
+/* 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("datacenterDataService", function($http,DataService, $log){
+    var uri = 'http://192.168.9.13:18008';
+    uri += "/openoapi/resmgr/v1/datacenters/";
+    return {
+        getDatacenterData : function() {
+            /*console.log("hi in dataservice");
+            return $http({
+                url: 'http://localhost:3000/datacenterAPI/getDatacenterData',
+                method: 'GET',
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                //$log.info(response);
+                return response.data;
+            });*/
+            return DataService.get(uri)
+                .then(function(response){
+                    $log.info("in get data service data is  :"+response);
+                    console.log(response);
+                    return response;
+                });
+        },
+        deleteDatacenterData : function(id) {
+            /*return $http({
+                url: 'http://localhost:3000/datacenterAPI/deleteDatacenterData',
+                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+"/"+id)
+                .then(function(response){
+                    $log.info("in delete data service data is  :"+response);
+                    console.log(response);
+                    return response;
+                });
+        },
+        editDatacenterData : function(datacenterData) {
+            return DataService.put(uri, datacenterData)
+                .then(function(response){
+                    console.log("Successfully edited.. Data returned in DataService is");
+                    console.log(response);
+                    return response;
+                });
+        },
+        addDatacenterData : function(datacenterData) {
+            return DataService.post(uri, datacenterData)
+                .then(function(response){
+                    console.log("Successfully added.. Data returned in DataService is");
+                    console.log(response);
+                    return response;
+                });
+        }
+    }
+});
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html
new file mode 100644
index 00000000..22e18134
--- /dev/null
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/location.html
@@ -0,0 +1,109 @@
+<!--/* 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.
+*/-->
+
+<h4>{{title}}</h4>
+<br><br>
+<div id="locationAction" ng-init="init()">
+
+</div>
+<br><br>
+
+<table ng-table="neTableParams" class="table table-bordered table-striped customtable" show-filter="true">
+    <tr ng-repeat="locationData in $data">
+        <td header="'ng-table/headers/checkbox.html'">
+            <input type="checkbox" ng-model="checkboxes.items[locationData.Id]" />
+        </td>
+        <td title="'Id'" filter="{ Id: 'text'}" sortable="'Id'">
+            {{locationData.Id}}
+        </td>
+        <td title="'Country'" filter="{ Country: 'text'}" sortable="'Country'">
+            {{locationData.Country}}
+        </td>
+        <td title="'Location'" filter="{ Location: 'text'}" sortable="'Location'">
+            {{locationData.Location}}
+        </td>
+        </td>
+        <td title="'Description'" filter="{ Description: 'text'}" sortable="'Description'">
+            {{locationData.Description}}
+        </td>
+        <td title="'Latitude'" filter="{ Latitude: 'text'}" sortable="'Latitude'">
+            {{locationData.Latitude}}
+        </td>
+        <td title="'Longitude'" filter="{ Longitude: 'text'}" sortable="'Longitude'">
+            {{locationData.Longitude}}
+        </td>
+        <td title="'Action'">
+            <!--<span class="pull-right glyphicon glyphicon-edit" ng-click="editData(locationData.Id)" style="cursor: pointer;margin: 0 5px"></span>
+            <span class="pull-right glyphicon glyphicon-trash" ng-click="deleteData(locationData.Id)" style="cursor: pointer;margin: 0 5px"></span>-->
+            <span  ng-click="editData(locationData.Id)" style="cursor: pointer;margin: 0 5px"> <img src="framework/images/edit.png" height="15" align="left"/></span>
+            <span  ng-click="deleteData(locationData.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">
+
+        <!-- Modal content-->
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <h5 class="modal-title">Modal Header</h5>
+            </div>
+            <form  name="locationForm" method="post">  <!--ng-submit="saveData(province.id)"-->
+                <div class="modal-body">
+
+                <div class="form-group row">
+                    <label class="col-xs-4 col-form-label">Country</label>
+                    <div id="Country" class="col-xs-8" >
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label class="col-xs-4 col-form-label">Location</label>
+                    <div id="Location" class="col-xs-8" >
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label class="col-xs-4 col-form-label">Latitude</label>
+                    <div id="Latitude" class="col-xs-8" >
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label class="col-xs-4 col-form-label">Longitude</label>
+                    <div id="Longitude" class="col-xs-8" >
+                    </div>
+                </div>
+                <div class="form-group row">
+                    <label class="col-xs-4 col-form-label">Description</label>
+                    <div id="Description" class="col-xs-8" >
+                    </div>
+                </div>
+
+                <div id="footerBtns" class="modal-footer">
+                </div>
+            </form>
+        </div>
+
+
+    </div>
+</div>
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js
new file mode 100644
index 00000000..512bf77e
--- /dev/null
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/location/locationRest.js
@@ -0,0 +1,72 @@
+/* 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("locationDataService", function($http,DataService, $log){
+    var uri = 'http://192.168.9.13:18008';
+    uri += "/openoapi/resmgr/v1/locations/";
+    return {
+        getLocationData : function() {
+            /*console.log("hi in dataservice");
+            return $http({
+                url: 'http://localhost:3000/locationAPI/getLocationData',
+                method: 'GET',
+                headers: {'Content-Type': 'application/json'}
+            }).then(function(response){
+                //$log.info(response);
+                return response.data;
+            });*/
+            return DataService.get(uri)
+                .then(function(response){
+                    $log.info("in get data service data is  :"+response);
+                    console.log(response);
+                    return response;
+                });
+        },
+        deleteLocationData : function(id) {
+            /*return $http({
+                url: 'http://localhost:3000/locationAPI/deleteLocationData',
+                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+"/"+id)
+                .then(function(response){
+                    $log.info("in delete data service data is  :"+response);
+                    console.log(response);
+                    return response;
+                });
+        },
+        editLocationData : function(locationData) {
+            return DataService.put(uri, locationData)
+                .then(function(response){
+                    console.log("Successfully edited.. Data returned in DataService is");
+                    console.log(response);
+                    return response;
+                });
+        },
+        addLocationData : function(locationData) {
+            return DataService.post(uri, locationData)
+                .then(function(response){
+                    console.log("Successfully added.. Data returned in DataService is");
+                    console.log(response);
+                    return response;
+                });
+        }
+    }
+});
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vim.html b/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vim.html
new file mode 100644
index 00000000..9985552a
--- /dev/null
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vim.html
@@ -0,0 +1,69 @@
+<!--
+    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>
+    <head lang="en">
+        <meta charset="UTF-8">
+        <title></title>
+        <link href="css/bootstrap.min.css" rel="stylesheet"/>
+        <link href="css/VMMain.css" rel="stylesheet"/>
+        <link href="css/bootstrap-table.min.css" rel="stylesheet"/>
+
+        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
+        <script type="text/javascript" src="js/bootstrap.min.js"></script>
+        <script type="text/javascript" src="js/bootstrap-table.min.js"></script>
+        <script type="text/javascript" src="js/bootbox.min.js"></script>
+        <script type="text/javascript" src="js/jquery.validate.min.js"></script>
+        <script type="text/javascript" src="js/chart.min.js"></script>
+
+		<script type="text/javascript" src="js/gconf.js"></script>
+        <script type="text/javascript" src="js/vim.js"></script>
+
+        <style type="text/css">
+        </style>
+
+    </head>
+<body id="open_base_site_cotentBody" class="cotentBody ng-scope">
+
+<div class="container-fluid ms-controller">
+    <br>
+    <div style="font-size:18px">resource using status:</div>
+    <hr>
+    <!-- chart area -->
+    <div style="width:30%;float: left;text-align:center;display: inline">
+        <canvas id="cpuChart"></canvas>
+        <br>
+        <label style="font-size:14px;">Cpu status</label>
+    </div>
+    <div style="width:30%;float: left;text-align:center;display: inline">
+        <canvas id="memoryChart"></canvas>
+        <br>
+        <label style="font-size:14px;">Memory status</label>
+    </div>
+    <div style="width:30%;float: left;text-align:center;display: inline">
+        <canvas id="diskChart"></canvas>
+        <br>
+        <label style="font-size:14px;">Disk status</label>
+    </div>
+    <script type="text/javascript">
+
+
+    </script>
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vim.js b/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vim.js
new file mode 100644
index 00000000..ec5fb464
--- /dev/null
+++ b/resmgr/src/main/webapp/resmgr/nfv-resmgr/vim/vim.js
@@ -0,0 +1,93 @@
+/* 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.
+ */
+function loadVimData() {
+    var requestUrl = app_url+"/v1/resmanage/vim/vimInfo";
+    $.ajax({
+        type: "GET",
+        url: requestUrl,
+        contentType: "application/json",
+        success: function (jsonobj) {
+            printCharts(jsonobj.data[0].used.cpu,
+                jsonobj.data[0].total.cpu, jsonobj.data[0].used.memory, jsonobj.data[0].total.memory, jsonobj.data[0].used.disk, jsonobj.data[0].total.disk);
+
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            bootbox.alert("Error on getting data (here display the test data) : " + xhr.responseText);
+            printCharts(11, 12, 21, 22, 31, 32);
+        }
+    });
+}
+function printCharts(v11, v12, v21, v22, v31, v32) {
+    var cpuChart = new Chart($("#cpuChart"), {
+        type: 'doughnut',
+        data: {
+            labels: ["used", "available"],
+            datasets: [{
+                data: [v11, v12],
+                backgroundColor: ["#FFCE56", "#36A2EB"],
+                hoverBackgroundColor: ["#FFCE56", "#36A2EB"]
+            }]
+        },
+        options: {
+            animation: {
+                animateScale: true,
+                animateRotate: true
+
+            }
+        }
+    });
+    var memoryChart = new Chart($("#memoryChart"), {
+        type: 'doughnut',
+        data: {
+            labels: ["used", "available"],
+            datasets: [{
+                data: [v21, v22],
+                backgroundColor: ["#FF6384", "#36A2EB"],
+                hoverBackgroundColor: ["#FF6384", "#36A2EB"]
+            }]
+        },
+        options: {
+
+            animation: {
+                animateScale: true,
+                animateRotate: true
+
+            }
+        }
+    });
+    var diskChart = new Chart($("#diskChart"), {
+        type: 'doughnut',
+        data: {
+            labels: ["used", "available"],
+            datasets: [{
+                data: [v31, v32],
+                backgroundColor: ["#FF6384", "green"],
+                hoverBackgroundColor: ["#FF6384", "green"]
+            }]
+        },
+        options: {
+            animation: {
+                animateScale: true,
+                animateRotate: true
+
+            }
+        }
+    });
+}
+
+$(function () {
+    loadVimData();
+
+})
+\ No newline at end of file
diff --git a/resmgr/src/main/webapp/sdn-resmgr/link/link.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
index a581d986..a581d986 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/link/link.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/link.html
diff --git a/resmgr/src/main/webapp/sdn-resmgr/link/linkRest.js b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/linkRest.js
index 4040c79a..4040c79a 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/link/linkRest.js
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/link/linkRest.js
diff --git a/resmgr/src/main/webapp/sdn-resmgr/ne/ne.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
index 2c978135..2c978135 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/ne/ne.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/ne.html
diff --git a/resmgr/src/main/webapp/sdn-resmgr/ne/neRest.js b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/neRest.js
index ba9e8b02..ba9e8b02 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/ne/neRest.js
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/ne/neRest.js
diff --git a/resmgr/src/main/webapp/sdn-resmgr/port/port.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
index 741b4722..741b4722 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/port/port.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/port.html
diff --git a/resmgr/src/main/webapp/sdn-resmgr/port/portRest.js b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/portRest.js
index c6c59d0b..c6c59d0b 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/port/portRest.js
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/port/portRest.js
diff --git a/resmgr/src/main/webapp/sdn-resmgr/site/site.html b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
index c6f2039d..c6f2039d 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/site/site.html
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/site.html
diff --git a/resmgr/src/main/webapp/sdn-resmgr/site/siteRest.js b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/siteRest.js
index c407f7fb..c407f7fb 100644
--- a/resmgr/src/main/webapp/sdn-resmgr/site/siteRest.js
+++ b/resmgr/src/main/webapp/resmgr/sdn-resmgr/site/siteRest.js
diff --git a/resmgr/src/main/webapp/templates/resource.html b/resmgr/src/main/webapp/resmgr/templates/resource.html
index 4742778f..4742778f 100644
--- a/resmgr/src/main/webapp/templates/resource.html
+++ b/resmgr/src/main/webapp/resmgr/templates/resource.html