Initial Submission of Holmes GUI

Change-Id: I0659887e99d122bc667409964f06a003799da272
Issue-ID: HOLMES-50
Signed-off-by: Guangrong Fu <fu.guangrong@zte.com.cn>

16 files changed, 1206 insertions, 0 deletions

diff --git a/usecaseui-holmes/src/main/webapp/alarm/app/app.component.ts b/usecaseui-holmes/src/main/webapp/alarm/app/app.component.ts
new file mode 100644
index 00000000..cc69df2a
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/app.module.ts b/usecaseui-holmes/src/main/webapp/alarm/app/app.module.ts
new file mode 100644
index 00000000..72c60aa5
--- /dev/null
+++ b/usecaseui-holmes/src/main/webapp/alarm/app/app.module.ts
@@ -0,0 +1,46 @@
+/*
+ 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'
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        HttpModule,
+        routing,
+        TranslateModule.forRoot()
+
+    ],
+    declarations: [
+        AppComponent,
+        AlarmRule,
+        RuleInfo,
+        SifModalComponent
+    ],
+    providers:[ModalService,AlarmRuleService,Jsonp],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
\ No newline at end of file
diff --git a/usecaseui-holmes/src/main/webapp/alarm/app/app.routing.ts b/usecaseui-holmes/src/main/webapp/alarm/app/app.routing.ts
new file mode 100644
index 00000000..35021677
--- /dev/null
+++ b/usecaseui-holmes/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,{ useHash: true });
diff --git a/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/modal.component.html b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/modal.component.html
new file mode 100644
index 00000000..16f61e81
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/modal.component.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/modal.component.ts
new file mode 100644
index 00000000..6c9f432c
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/modal.service.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/modal.service.ts
new file mode 100644
index 00000000..1d41bfd0
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/msg.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-modal/msg.ts
new file mode 100644
index 00000000..8608dc1c
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html
new file mode 100644
index 00000000..b77f5479
--- /dev/null
+++ b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.html
@@ -0,0 +1,150 @@
+<!--
+ 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_Add_Page"|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 == 0">
+                        <div class="col-xs-3" >
+                            <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'>
+                            <label for="radio1" >{{"common_off"|translate}}</label>
+                        </div>
+                        <div class="col-xs-3" >
+                            <input class="magic-radio" type="radio" name="radio"  [(ngModel)]="queryRule.enabled" value='1'>
+                            <label for="radio1" (click)="switch()">{{"common_on"|translate}}</label>
+                        </div>
+                    </div>
+                    <div *ngIf="queryRule.enabled == 1">
+                        <div class="col-xs-3" >
+                            <input class="magic-radio" type="radio" name="radio" [(ngModel)]="queryRule.enabled" value='0'>
+                            <label for="radio1" (click)="switch()">{{"common_off"|translate}}</label>
+                        </div>
+                        <div class="col-xs-3" >
+                            <input class="magic-radio" type="radio" name="radio"  [(ngModel)]="queryRule.enabled" value='1'>
+                            <label for="radio1" >{{"common_on"|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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts
new file mode 100644
index 00000000..8222735c
--- /dev/null
+++ b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleInfo/ruleInfo.component.ts
@@ -0,0 +1,295 @@
+/*
+ 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;
+                    }
+                });
+        }
+    }
+    switch(): void {
+        // alert(this.queryRule.enabled);
+        this.queryRule.enabled == '0' ? this.queryRule.enabled = '1' : this.queryRule.enabled = '0';
+    }
+
+
+    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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
new file mode 100644
index 00000000..a5ac3443
--- /dev/null
+++ b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.html
@@ -0,0 +1,135 @@
+<!--
+ 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 class="form-inline">
+        <div class="form-body">
+            <div class="row form-group col-xs-12">
+                <div class="col-xs-4">
+                    <label class="col-xs-3 control-label" style="padding-top: 8px">
+                        {{"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>
+                </div>
+
+                <div class="col-xs-4">
+                    <label for="userName" class="col-xs-3 control-label" style="padding-top: 8px">
+                        <span>{{"common_keyword"|translate}}</span>
+                    </label>
+                    <input class="form-control ng-untouched ng-pristine ng-valid" style="width: 60%" placeholder='{{"field_rule_name_Add_Page"|translate}}'
+                        type="text" [(ngModel)]="ruleModel.rulename" name="name">
+                </div>
+
+                <div class="fmrule_btn_group display_table">
+                    <div class="inline">
+                        <button id="batchDeleteButton" class="btn btn-primary" (click)="searchRules()">
+                            <span class="glyphicon glyphicon-search" style="padding-top: 2px"></span>
+                            <span>{{"common_query"|translate}}</span>
+                        </button>
+                        <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>
+
+            <div class="row form-group col-xs-12" style="margin-top: 10px">
+                <div class="">
+                    <div class="inline">
+                        <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>
+
+    </form>
+    <div>
+        <div class="row form-group col-xs-12" style="margin-top: 20px">{{"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_Add_Page"|translate}}</td>
+                    <td>{{"common_status"|translate}}</td>
+                    <td>{{"field_create_time"|translate}}</td>
+                    <td>{{"field_creator"|translate}}</td>
+                    <td>{{"field_update_time"|translate}}</td>
+                    <td>{{"common_operator"|translate}}</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let rule of rules">
+                    <td><a routerLink="/ruleInfo/{{rule.ruleid}}&add">{{rule.rulename}}</a></td>
+                    <td [hidden]="rule.enabled === 1" style="text-align: center"><span value=1><img src="../../../public/thirdparty/images/round_off.png" alt=""></span></td>
+                    <td [hidden]="rule.enabled === 0" style="text-align: center"><span value=0><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>
+                        <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===1" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px"> 
+                        <img src="../../../public/thirdparty/images/on.png" alt="">
+                    </span>
+                        <span [hidden]="rule.enabled===0" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
+                        <img src="../../../public/thirdparty/images/off.png" alt="">
+                    </span>
+
+                        <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:rightl;padding-top: 10px;margin-bottom: -20px" class="">
+                <button class="btn btnDefault btnmrg" data-popmodal-but="ok">
+                    <span>{{"common_confirm"|translate}}</span>
+                </button>
+                 <button class="btn btnDefault btnmrg" type="button" data-popmodal-but="cancel">
+                    <span>{{"common_cancel"|translate}}</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <div id="deleteActiveAlarmRuleDlg" style="display: none;">
+        <div id="deleteActiveRuleContent">
+            <div class="deletePromptMessage">
+                <span>{{"warn_delete_info"|translate}}</span>
+            </div>
+            <div style="float:right;padding-top:10px">
+                <button class="btn btnDefault btnmrg" data-popmodal-but="ok">
+                    <span>{{"common_confirm"|translate}}</span>
+                </button>
+            </div>
+        </div>
+    </div>
\ No newline at end of file
diff --git a/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.component.ts
new file mode 100644
index 00000000..af33eec7
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts
new file mode 100644
index 00000000..7055837a
--- /dev/null
+++ b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.service.ts
@@ -0,0 +1,124 @@
+/*
+ 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, {headers: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 => {
+               
+            })
+            .catch(this.handleError);
+    }
+}
\ No newline at end of file
diff --git a/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/alarmRule.ts
new file mode 100644
index 00000000..69c5b224
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts b/usecaseui-holmes/src/main/webapp/alarm/app/correlation-ruleList/ruleRequest.ts
new file mode 100644
index 00000000..fbbe1c94
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/main.ts b/usecaseui-holmes/src/main/webapp/alarm/app/main.ts
new file mode 100644
index 00000000..b961c671
--- /dev/null
+++ b/usecaseui-holmes/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/usecaseui-holmes/src/main/webapp/alarm/app/pages/remote.component.html b/usecaseui-holmes/src/main/webapp/alarm/app/pages/remote.component.html
new file mode 100644
index 00000000..2b5c8c33
--- /dev/null
+++ b/usecaseui-holmes/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