Fixed ui error

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

4 files changed, 76 insertions, 43 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);
+  }
+
 }