Fixed ui error

Change-Id: I2a26998cc093a7aaf6458f28dc752b152f0cf666
Issue-ID: HOLMES-163
Signed-off-by: minfanyang <yang.minfan@zte.com.cn>

12 files changed, 711 insertions, 665 deletions

diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.component.css b/rulemgt-frontend/src/app/correlation-modal/modal.component.css
new file mode 100644
index 0000000..8c8f248
--- /dev/null
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.component.css
@@ -0,0 +1,21 @@
+/**

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

+*/

+.modal-position {

+  position: absolute;

+  z-index: 9999;

+  left: 200px;

+  top: 100px;

+}

diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.component.html b/rulemgt-frontend/src/app/correlation-modal/modal.component.html
index cc1cb2c..8f8216c 100644
--- a/rulemgt-frontend/src/app/correlation-modal/modal.component.html
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.component.html
@@ -13,19 +13,20 @@
  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 *ngIf="showModal" class="popover-card" id="myModal" #sifModal>-->
+  <div *ngIf="showModal" class="modal-position modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" (click)="cancelModal()"><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" (click)="cancelModal()">{{closeBtnTitle|translate}}</button>
+      </div>
     </div>
-</div>
\ No newline at end of file
+  </div>
+<!--</div>-->
diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.component.ts b/rulemgt-frontend/src/app/correlation-modal/modal.component.ts
index cafb8e5..1d458b0 100644
--- a/rulemgt-frontend/src/app/correlation-modal/modal.component.ts
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.component.ts
@@ -13,31 +13,38 @@
  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',
+import {Component, OnInit} from '@angular/core';
+import {ModalService} from './modal.service';
+import {Msg} from './msg';
 
+@Component({
+  selector: 'sif-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
 })
 export class SifModalComponent implements OnInit {
-    constructor(private modalServer: ModalService) { };
-    modalTitle = 'modalTitleDefault';
-    modalBodyMessage = 'modalBodyMessageDefault';
-    closeBtnTitle = 'closeBtnTitleDefault';
-
-    ngOnInit(): void {
-        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');
-        });
-    }
 
+  modalTitle = 'modalTitleDefault';
+  modalBodyMessage = 'modalBodyMessageDefault';
+  closeBtnTitle = 'closeBtnTitleDefault';
+
+  showModal = false;
+
+  constructor(private modalServer: ModalService) {
+    this.modalServer.openModalAnnounced$.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;
+      this.showModal = true;
+    });
+  };
+
+  ngOnInit(): void {
+  }
+
+  cancelModal(): void {
+    this.showModal = false;
+  }
 
 }
diff --git a/rulemgt-frontend/src/app/correlation-modal/modal.service.ts b/rulemgt-frontend/src/app/correlation-modal/modal.service.ts
index 11b4378..d71f960 100644
--- a/rulemgt-frontend/src/app/correlation-modal/modal.service.ts
+++ b/rulemgt-frontend/src/app/correlation-modal/modal.service.ts
@@ -13,12 +13,16 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 */
-import { Subject } from 'rxjs';
-import { Injectable } from '@angular/core';
+import {Subject} from 'rxjs';
+import {Injectable} from '@angular/core';
+
 @Injectable()
 export class ModalService {
-    private modalObservable = new Subject();
-    get getmodalObservable() {
-        return this.modalObservable;
-    }
+  private openModalAnnouncedSource = new Subject<any>();
+  openModalAnnounced$ = this.openModalAnnouncedSource.asObservable();
+
+  announceOpenModal(message: any) {
+    this.openModalAnnouncedSource.next(message);
+  }
+
 }
diff --git a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html
index 61535fc..2211a83 100644
--- a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html
+++ b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.html
@@ -79,7 +79,7 @@
                 </div>
             </div>
 
-            <div class="row form-group">
+            <!--<div class="row form-group">
                 <label for="" class="col-xs-2 col-sm-1 col-form-label labelstyle">
                     <span>{{"common_file"|translate}}</span>
                 </label>
@@ -119,7 +119,7 @@
                         </span>
                     </div>
                 </div>
-            </div>
+            </div>-->
 
             <div class="row form-group">
                 <label for="" class="col-xs-2 col-sm-1 col-form-label labelstyle">
@@ -153,4 +153,4 @@
             </div>
         </div>
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts
index 56376df..dfb75b4 100644
--- a/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleInfo/ruleInfo.component.ts
@@ -13,284 +13,295 @@
  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';
+import {Component, OnInit} from '@angular/core';
+import {RuleModel} from '../correlation-ruleList/alarmRule';
+import {ActivatedRoute, Params, Router} from '@angular/router';
+import {AlarmRuleService} from '../correlation-ruleList/alarmRule.service';
+import {ModalService} from '../correlation-modal/modal.service';
+import {NgModel} from '@angular/forms';
+
 declare var $: any;
+
 @Component({
-    selector: 'RuleInfo',
-    templateUrl: './ruleInfo.component.html'
+  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);
+  formModel: RuleModel;
+  queryRule: RuleModel;
+  id: number;
+  addBottonStatus: boolean;
+
+  constructor(private modalService: ModalService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private alarmRuleService: AlarmRuleService) {
+  };
+
+
+
+  ngOnInit() {
+    this.formModel = {
+      ruleId: null,
+      ruleName: null,
+      description: null,
+      content: null,
+      createTime: null,
+      creator: null,
+      updateTime: null,
+      modifier: null,
+      enabled: null,
+      loopControlName: null
+    };
+    this.queryRule = {
+      ruleId: null,
+      ruleName: null,
+      description: null,
+      content: null,
+      createTime: null,
+      creator: null,
+      updateTime: null,
+      modifier: null,
+      enabled: 0,
+      loopControlName: ''
+    };
+
+    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.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;
-                    }
-                })
+          this.addBottonStatus = false;
+          $('#saveLabel').hide();
+          $('#checkLabel').hide();
+          $('#updateLabel').hide();
         }
-    }
 
-    onSubmit(obj: NgModel) {
-        this.save();
-    }
+        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;
+      }
+    });
 
-    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 => {
+    this.initImportDiv(this.queryRule);
+  }
+
+  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.announceOpenModal(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) {
-                    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;
+                  let msg = {title: 'modalTitleUpdate', message: 'message_update_rule_success'};
+                  this.modalService.announceOpenModal(msg);
+                  this.router.navigate(['alarmRule']);
                 } else if (res.status == 499) {
-                    let msg = { 'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error' };
-                    this.modalService.getmodalObservable.next(msg);
-                    return false;
+                  let msg = {title: 'modalTitleUpdate', message: 'message_exception_rule_fail'};
+                  this.modalService.announceOpenModal(msg);
                 } else {
-                    let msg = { 'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail' };
-                    this.modalService.getmodalObservable.next(msg);
-                    return false;
+                  let msg = {title: 'modalTitleUpdate', message: 'message_other_exception_rule_fail'};
+                  this.modalService.announceOpenModal(msg);
                 }
-            })
-        }
-    }
+              }).catch(
+              res => {
+                let msg = {title: 'modalTitleUpdate', message: 'message_other_exception_rule_fail'};
+                this.modalService.announceOpenModal(msg);
+              }
+            );
 
-    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]
-            })
+          } else if (res.status == 499) {
+            let msg = {'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error'};
+            this.modalService.announceOpenModal(msg);
+            return false;
+          } else {
+            let msg = {'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail'};
+            this.modalService.announceOpenModal(msg);
+            return false;
+          }
+        })
     }
+  }
+
+  onSubmit(obj: NgModel) {
+    this.save();
+  }
 
-    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);
+  save() {
+    if (!this.queryRule.content || !this.queryRule.content.startsWith('package ')) {
+      let msg = {title: 'exception_content_error', message: 'exception_package_error'};
+      this.modalService.announceOpenModal(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.announceOpenModal(msg);
+              this.router.navigate(['alarmRule']);
+            } else if (res.status == 499) {
+              let msg = {title: 'modalTitleDefault', message: 'message_rule_name_repeat_error'};
+              this.modalService.announceOpenModal(msg);
+            } else {
+              let msg = {'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail'};
+              this.modalService.announceOpenModal(msg);
+            }
+
+          }).catch(error => {
+            let msg = {title: 'modalTitleDefault', message: 'message_rule_name_repeat_error'};
+            this.modalService.announceOpenModal(msg);
+          });
+          return true;
+        } else if (res.status == 499) {
+          let msg = {'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error'};
+          this.modalService.announceOpenModal(msg);
+          return false;
         } 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;
-                    }
-                });
+          let msg = {'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail'};
+          this.modalService.announceOpenModal(msg);
+          return false;
         }
+      })
     }
-    switch(): void {
-        // alert(this.queryRule.enabled);
-        this.queryRule.enabled == '0' ? this.queryRule.enabled = '1' : this.queryRule.enabled = '0';
+  }
+
+  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 || !this.queryRule.content.startsWith('package ')) {
+      let msg = {title: 'exception_content_error', message: 'exception_package_error'};
+      this.modalService.announceOpenModal(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.announceOpenModal(msg);
+          } else if (res.status == 499) {
+            let msg = {'title': 'modalTitleCheck', message: 'message_rule_content_repeat_error'};
+            this.modalService.announceOpenModal(msg);
+            return false;
+          } else {
+            let msg = {'title': 'modalTitleCheck', message: 'message_other_exception_rule_fail'};
+            this.modalService.announceOpenModal(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) {
-                let fileName = data.files[0].name;
+  initUpload(queryRule: RuleModel): void {
+    $('#fileName').text('');
+    $('#importFailTip').addClass('hide_panel');
+    $('#fileupload').fileupload({
 
-                $('#importFailTip').addClass('hide_panel');
-                let suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
+      dropZone: $('#dropzone'),
+      maxNumberOfFiles: 1,
+      maxChunkSize: 20000000,
+      autoUpload: false,
+      add: function (e, data) {
+        let fileName = data.files[0].name;
 
-                if (suffix != '.txt') {
-                    $('#importFailTip').removeClass('hide_panel');
-                    return suffix;
-                }
+        $('#importFailTip').addClass('hide_panel');
+        let suffix = fileName.substring(fileName.lastIndexOf('.'), fileName.length)
 
-                $('#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) {
-            }
+        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();
         });
-    }
 
-    initImportDiv(queryRule: RuleModel): void {
-        this.initUpload(queryRule);
-        let 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);
+        $('#fileremove').click(function () {
+          $('#bar').css('width', '0%');
+          $('#persent').text('0%');
+          $('#fileName').text('');
+          $('#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,
-            loopControlName: null
-        };
-        this.queryRule = {
-            ruleId: null,
-            ruleName: null,
-            description: null,
-            content: null,
-            createTime: null,
-            creator: null,
-            updateTime: null,
-            modifier: null,
-            enabled: 0,
-            loopControlName: ''
-        };
-
-        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();
-                }
+      },
+      done: function (e, data) {
 
-                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;
-            }
+      },
+      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);
+    let 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);
+    });
 
-        this.initImportDiv(this.queryRule);
+    function showDiv() {
+      $('#bar').css('width', '0%');
+      $('#persent').text('0%');
+      $(importDiv).fadeIn();
     }
+  }
 
-}
\ No newline at end of file
+}
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.css b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.css
new file mode 100644
index 0000000..2fa939d
--- /dev/null
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.css
@@ -0,0 +1,29 @@
+/**

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

+*/

+.popover-card {

+  position: absolute;

+  background: #fff;

+  padding: 9px;

+  border: 1px solid #ddd;

+  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

+  text-align: left;

+  max-width: 1000px;

+  min-width: 180px;

+  z-index: 9997;

+  -webkit-box-sizing: border-box;

+  box-sizing: border-box;

+}

diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
index 99966a8..7678395 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.html
@@ -14,141 +14,131 @@
  limitations under the License.
 -->
 <div class="container-fluid" style="padding: 40px 40px 0 40px">
-    <form class="form-inline">
-        <div class="form-body">
-            <div class="row form-group col-xs-12">
-                <div class="col-xs-4">
-                    <div class="row">
-                        <label class="col-xs-3 col-md-2 control-label" style="padding-top: 8px">
-                            {{"common_status"|translate}}
-                        </label>
-                        <div class="col-xs-7">
-                            <select #selection class="form-control" id="status" (change)="switch(selection.value)" [(ngModel)]="activeText" name="activestatus"
-                                style="width:100%">
-                                <option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col-xs-4">
-                    <div class="row">
-                        <label for="userName" class="col-xs-3 control-label" style="padding-top: 8px">
-                            <span>{{"common_keyword"|translate}}</span>
-                        </label>
-                        <div class="col-xs-7">
-                            <input class="form-control ng-untouched ng-pristine ng-valid" placeholder='{{"field_rule_name_Add_Page"|translate}}' type="text"
-                                [(ngModel)]="ruleModel.ruleName" name="name" style="width:100%">
-                        </div>
-                    </div>
-                </div>
-
-                <div class="fmrule_btn_group display_table col-xs-4">
-                    <div class="inline row">
-                        <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>
+  <form class="form-inline">
+    <div class="form-body">
+      <div class="row form-group col-xs-12">
+        <div class="col-xs-4">
+          <div class="row">
+            <label class="col-xs-3 col-md-2 control-label" style="padding-top: 8px">
+              {{"common_status"|translate}}
+            </label>
+            <div class="col-xs-7">
+              <select #selection class="form-control" id="status" (change)="switch(selection.value)"
+                      [(ngModel)]="activeText" name="activestatus"
+                      style="width:100%">
+                <option *ngFor="let a of activeStatus" [value]="a">{{a|translate}}</option>
+              </select>
             </div>
+          </div>
+        </div>
 
-            <div class="row form-group" style="margin-top: 10px">
-                <div class="inline col-xs-12">
-                    <button type="button" routerLink='/ruleInfo' class="btn btn-info">
-                        <span class="glyphicon glyphicon-plus"></span>
-                        <span>{{"common_add"|translate}}</span>
-                    </button>
-                </div>
+        <div class="col-xs-4">
+          <div class="row">
+            <label class="col-xs-3 control-label" style="padding-top: 8px">
+              <span>{{"common_keyword"|translate}}</span>
+            </label>
+            <div class="col-xs-7">
+              <input class="form-control ng-untouched ng-pristine ng-valid"
+                     placeholder='{{"field_rule_name_Add_Page"|translate}}' type="text"
+                     [(ngModel)]="ruleModel.ruleName" name="name" style="width:100%">
             </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 *ngIf="rules == null || rules.length === 0">
-                    <td colspan="6" style="text-align: center; background-color: white;">{{"nodata"|translate}}</td>
-                </tr>
-                <tr *ngFor="let rule of rules">
-                    <td>
-                        <a routerLink="/ruleInfo/{{rule.ruleId}}&add">{{rule.ruleName}}</a>
-                    </td>
-                    <td [hidden]="rule.enabled === 0">
-                        <span value=1>
-                            <i class="fas fa-power-off" style="color:#4ac9ff;"></i>
-                        </span>
-                    </td>
-                    <td [hidden]="rule.enabled === 1">
-                        <span value=0>
-                            <i class="fas fa-power-off" style="color: #aaa;"></i>
-                        </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">
-                            <i class="fas fa-pencil-alt" style="font-size: 14px;"></i>
-                        </span>
-                        <span>
+        <div class="fmrule_btn_group display_table col-xs-4">
+          <div class="inline row">
+            <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>
 
-                        </span>
-                        <span [hidden]="rule.enabled===0" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                            <i class="fas fa-toggle-on" style="font-size: 20px; color:#4ac9ff; vertical-align:-2px;"></i>
-                        </span>
-                        <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()" style="cursor: pointer;margin: 0 5px">
-                            <i class="fas fa-toggle-off" style="font-size: 20px; color:black; vertical-align:-2px;" title="Switch On"></i>
-                        </span>
+      <div class="row form-group" style="margin-top: 10px">
+        <div class="inline col-xs-12">
+          <button type="button" routerLink='/ruleInfo' class="btn btn-info">
+            <span class="glyphicon glyphicon-plus"></span>
+            <span>{{"common_add"|translate}}</span>
+          </button>
+        </div>
+      </div>
+    </div>
 
-                        <span class="" id={{rule.ruleId}} (click)="delete(rule)" style="cursor: pointer;margin: 0 5px">
-                            <i class="fas fa-times" style="color: rgba(255, 0, 0, 0.788);font-size:16px;vertical-align:-1px;"></i>
-                        </span>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+  </form>
+  <div>
+    <div class="row form-group col-xs-12" style="margin-top: 20px">
+      {{"common_total1"|translate}}{{totalcount}}{{"common_total2"|translate}}
     </div>
-    <div id="deleteTimingTaskDlg" style="display: none;">
-        <div id="deleteTimingTaskContent">
+    <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 *ngIf="rules == null || rules.length === 0">
+        <td colspan="6" style="text-align: center; background-color: white;">{{"nodata"|translate}}</td>
+      </tr>
+      <tr *ngFor="let rule of rules">
+        <td>
+          <a routerLink="/ruleInfo/{{rule.ruleId}}&add">{{rule.ruleName}}</a>
+        </td>
+        <td [hidden]="rule.enabled === 0"><span value=1><i class="fas fa-power-off" style="color:#4ac9ff;"></i></span>
+        </td>
+        <td [hidden]="rule.enabled === 1"><span value=0><i class="fas fa-power-off" style="color: #aaa;"></i></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"><i
+          class="fas fa-pencil-alt" style="font-size: 14px;"></i></span>
+          <span [hidden]="rule.enabled===0" class="" (click)="on_off(rule); $event.stopPropagation()"
+                style="cursor: pointer;margin: 0 5px">
+            <i class="fas fa-toggle-on" style="font-size: 20px; color:#4ac9ff; vertical-align:-2px;"></i>
+          </span>
+          <span [hidden]="rule.enabled===1" class="" (click)="on_off(rule); $event.stopPropagation()"
+                style="cursor: pointer;margin: 0 5px">
+            <i class="fas fa-toggle-off" style="font-size: 20px; color:black; vertical-align:-2px;"
+               title="Switch On"></i>
+          </span>
+          <span class="" id={{rule.ruleId}} (click)="delete(rule)" style="cursor: pointer;margin: 0 5px">
+            <i class="fas fa-times" style="color: rgba(255, 0, 0, 0.788);font-size:16px;vertical-align:-1px;"></i>
+          </span>
+          <div *ngIf="rule.showModal && rule.enabled !== 1" class="popover-card">
             <div class="deletePromptMessage">
-                <span>{{"message_is_delete"|translate}}</span>
+              <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 style="float:right;padding-top: 10px;" class="">
+              <button class="btn btnDefault btnmrg" (click)="deleteRule(rule.ruleId)">
+                <span>{{"common_confirm"|translate}}</span>
+              </button>
+              <button class="btn btnDefault btnmrg" type="button" (click)="cancelModal(rule.ruleId)">
+                <span>{{"common_cancel"|translate}}</span>
+              </button>
             </div>
-        </div>
-    </div>
-
-    <div id="deleteActiveAlarmRuleDlg" style="display: none;">
-        <div id="deleteActiveRuleContent">
+          </div>
+          <div *ngIf="rule.showModal  && rule.enabled === 1" class="popover-card">
             <div class="deletePromptMessage">
-                <span>{{"warn_delete_info"|translate}}</span>
+              <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>
+              <button class="btn btnDefault btnmrg" (click)="cancelModal(rule.ruleId)">
+                <span>{{"common_confirm"|translate}}</span>
+              </button>
             </div>
-        </div>
-    </div>
\ No newline at end of file
+          </div>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
index 6e2c997..fa69e3c 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.component.ts
@@ -13,160 +13,149 @@
  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';
+import {Component, OnInit} from '@angular/core';
+import {ModalService} from '../correlation-modal/modal.service';
+import {RuleModel} from './alarmRule';
+import {RuleRequest} from './ruleRequest';
+import {Router} from '@angular/router';
+import {AlarmRuleService} from './alarmRule.service';
+
 declare var jQuery: any;
 
 @Component({
-    selector: 'alarmRule',
-    templateUrl: './alarmRule.component.html'
+  selector: 'alarmRule',
+  templateUrl: './alarmRule.component.html',
+  styleUrls: ['./alarmRule.component.css']
 })
-
 export class AlarmRule implements OnInit {
-    ruleModel: RuleModel;
-    rules: RuleModel[];
-    queryRule: RuleModel;
-    activeText: string;
-    ruleName: string;
-    enable_on = "enabled";
-    enable_off = "disabled"
-    totalcount: number = 0;
-    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.correlationRules;
-                this.totalcount = rules.totalCount;
-            });
-    }
-
-    public 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;
-            });
-    }
-    public updateRule(rule: RuleModel): void {
-        this.router.navigate(['ruleInfo/', rule.ruleId]);
-    }
-
-    public delete(rule: RuleModel): void {
-        rule.enabled == 1 ? this.deleteActiveRule(rule) : this.deleteModel(rule.ruleId, this._alarmRuleService, this);
-    }
-
-    public on_off(rule: RuleModel) {
-        rule.enabled == 0 ? rule.enabled = 1 : rule.enabled = 0;
-        this._alarmRuleService
-            .updateRule(rule)
-            .then(res => {
-                rule = res;
-            });
-    }
-
-    public reset(): void {
-        this.ruleModel.ruleName = null;
-        this.activeText = 'option_all';
-        this.ruleModel.enabled = null;
-        this.getRules();
+  ruleModel: RuleModel;
+  rules: any[];
+  queryRule: RuleModel;
+  activeText: string;
+  ruleName: string;
+  enable_on = "enabled";
+  enable_off = "disabled"
+  totalcount: number = 0;
+  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();
+  }
 
-    public deleteActiveRule(rule: RuleModel): void {
-        jQuery('#' + rule.ruleId).popModal({
-            html: jQuery('#deleteActiveRuleContent'),
-            placement: 'leftTop',
-            showCloseBut: false,
-            onDocumentClickClose: true,
-            onOkBut: function () {
-            },
-        });
+  setActiveText(): void {
+    if (this.ruleModel.enabled == 1) {
+      this.activeText = "common_enabled";
+      this.ruleRequest.enabled = 1;
     }
-    public 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 () {
-            }
-        });
+    else if (this.ruleModel.enabled == 0) {
+      this.activeText = "common_disabled";
+      this.ruleRequest.enabled = 0;
+    } else {
+      this.activeText = "option_all";
+      this.ruleRequest.enabled = null;
     }
-
-    public 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,
-            loopControlName: ''
-        };
-        this.ruleRequest = {
-            ruleId: null,
-            ruleName: null,
-            creator: null,
-            modifier: null,
-            enabled: null,
-            loopControlName: ''
-        };
-        this.getRules();
+  }
+
+  getRules(): void {
+    this._alarmRuleService.getRules().then(rules => {
+      this.rules = rules.correlationRules;
+      this.rules.map(x => x['showModal'] = false);
+      console.log(this.rules);
+      this.totalcount = rules.totalCount;
+    });
+  }
+
+  public 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;
+      });
+  }
+
+  public updateRule(rule: RuleModel): void {
+    this.router.navigate(['ruleInfo/', rule.ruleId]);
+  }
+
+  public delete(rule: any): void {
+    rule.showModal = true;
+  }
+
+  public on_off(rule: RuleModel) {
+    rule.enabled == 0 ? rule.enabled = 1 : rule.enabled = 0;
+    this._alarmRuleService
+      .updateRule(rule)
+      .then(res => {
+        rule = res;
+      });
+  }
+
+  public reset(): void {
+    this.ruleModel.ruleName = null;
+    this.activeText = 'option_all';
+    this.ruleModel.enabled = null;
+    this.getRules();
+  }
+
+  deleteRule(ruleId: string): void {
+    this._alarmRuleService.delete(ruleId).then(() => {
+      this.cancelModal(ruleId);
+      this.getRules();
+    }).catch(() => {
+      this.cancelModal(ruleId);
+    })
+  }
+
+  cancelModal(ruleId: string): void {
+    this.rules.find(x => x.ruleId === ruleId).showModal = false;
+  }
+
+  public 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,
+      loopControlName: ''
+    };
+    this.ruleRequest = {
+      ruleId: null,
+      ruleName: null,
+      creator: null,
+      modifier: null,
+      enabled: null,
+      loopControlName: ''
+    };
+    this.getRules();
+  }
 }
diff --git a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts
index 1f0ee3e..ebab289 100644
--- a/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts
+++ b/rulemgt-frontend/src/app/correlation-ruleList/alarmRule.service.ts
@@ -13,113 +13,113 @@
  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 {Injectable} from '@angular/core';
+import {Headers, Http} from '@angular/http';
 
 
-import { RuleModel } from './alarmRule';
-import { RuleRequest } from './ruleRequest';
-import { Router } from '@angular/router';
-import { ModalService } from '../correlation-modal/modal.service';
+import {RuleModel} from './alarmRule';
+import {RuleRequest} from './ruleRequest';
 
 @Injectable()
 export class AlarmRuleService {
-    private ruleUrl = "/api/holmes-rule-mgmt/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 ruleUrl = "/api/holmes-rule-mgmt/v1/rule";
+  private headers = new Headers({'Content-Type': 'application/json'});
 
-    private handleError(error: any): Promise<any> {
-        console.error('An error occurred', error);
-        return Promise.reject(error._body || error);
-    }
+  constructor(private http: Http) {
+  }
 
-    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().correlationRules as RuleModel[])
-            .catch(this.handleError);
-    }
+  getRules(): Promise<any> {
+    return this.http.get(this.ruleUrl)
+      .toPromise()
+      .then(res => res.json())
+      .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().correlationRules as RuleModel[])
-            .catch(this.handleError);
-    }
+  private handleError(error: any): Promise<any> {
+    console.error('An error occurred', error);
+    return Promise.reject(error._body || error);
+  }
 
-    checkContent(ruleContent: string): Promise<any> {
-        const url = "/api/holmes-engine-mgmt/v1/rule";
-        let data = { content: ruleContent };
-        return this.http
-            .post(url, JSON.stringify(data), { headers: this.headers })
-            .toPromise()
-            .then(res => res)
-            .catch(error => 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().correlationRules as RuleModel[])
+      .catch(this.handleError);
+  }
 
-    updateRule(rule: RuleModel): Promise<any> {
-        let rules = {
-            "ruleId": rule.ruleId,
-            "description": rule.description,
-            "content": rule.content,
-            "enabled": rule.enabled,
-            "loopControlName": rule.loopControlName
-        }
-        const url = `${this.ruleUrl}`
-        return this.http
-            .post(url, JSON.stringify(rules), { headers: this.headers })
-            .toPromise()
-            .then(res => res)
-            .catch(error => error)
-    }
+  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().correlationRules as RuleModel[])
+      .catch(this.handleError);
+  }
+
+  checkContent(ruleContent: string): Promise<any> {
+    const url = "/api/holmes-engine-mgmt/v1/rule";
+    let data = {content: ruleContent};
+    return this.http
+      .post(url, JSON.stringify(data), {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,
-            "loopControlName": rule.loopControlName
-        }
-        return this.http.put(this.ruleUrl, JSON.stringify(ruledata), { 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,
+      "loopControlName": rule.loopControlName
     }
+    const url = `${this.ruleUrl}`
+    return this.http
+      .post(url, JSON.stringify(rules), {headers: this.headers})
+      .toPromise()
+      .then(res => res)
+      .catch(error => error)
+  }
 
-    public delete(ruleId: string): Promise<void> {
-        const url = `${this.ruleUrl}` + '/' + ruleId;
-        return this.http.delete(url, { headers: this.headers })
-            .toPromise()
-            .then(res => {
-               
-            })
-            .catch(this.handleError);
+  save(rule: RuleModel): Promise<any> {
+    let ruledata = {
+      "description": rule.description,
+      "content": rule.content,
+      "enabled": rule.enabled,
+      "ruleName": rule.ruleName,
+      "loopControlName": rule.loopControlName
     }
-}
\ No newline at end of file
+    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> {
+    const url = `${this.ruleUrl}` + '/' + ruleId;
+    return this.http.delete(url, {headers: this.headers})
+      .toPromise()
+      .then(res => {
+
+      })
+      .catch(this.handleError);
+  }
+}
diff --git a/rulemgt-frontend/src/assets/common/js/popModal.js b/rulemgt-frontend/src/assets/common/js/popModal.js
index 862a31a..c0bcfd8 100644
--- a/rulemgt-frontend/src/assets/common/js/popModal.js
+++ b/rulemgt-frontend/src/assets/common/js/popModal.js
@@ -4,7 +4,7 @@
  Github: https://github.com/vadimsva/popModal
  */
 /* popModal */
-(function ($) {
+;(function ($) {
     $.fn.popModal = function (method) {
         var elem = $(this),
             elemObj,
diff --git a/rulemgt-frontend/src/index.html b/rulemgt-frontend/src/index.html
index 8a8252a..3edb638 100644
--- a/rulemgt-frontend/src/index.html
+++ b/rulemgt-frontend/src/index.html
@@ -24,12 +24,6 @@
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
         crossorigin="anonymous">
 
-    <script src="./assets/thirdparty/js/jquery_1.12.4.min.js"></script>
-    <script src="./assets/common/js/popModal.js"></script>
-    <script src="./assets/common/js/jQuery-File-Upload/js/jquery.ui.widget.js"></script>
-    <script src="./assets/common/js/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
-    <script src="./assets/common/js/jQuery-File-Upload/js/jquery.fileupload.js"></script>
-
     <body style="overflow: auto">
         <remote-config>Loading...</remote-config>
     </body>