From 5348c954eac6e84609acdb075e18d664df17e1a2 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Thu, 16 Feb 2017 17:59:36 +0800
Subject: [PATCH] Add global message component to UI.

---
 .../harbor-shell/harbor-shell.component.html  | 77 ++++++++++---------
 .../app/global-message/message.component.html |  7 ++
 .../app/global-message/message.component.ts   | 26 +++++++
 .../src/app/global-message/message.service.ts | 14 ++++
 harbor-app/src/app/shared/shared.module.ts    | 11 ++-
 5 files changed, 94 insertions(+), 41 deletions(-)
 create mode 100644 harbor-app/src/app/global-message/message.component.html
 create mode 100644 harbor-app/src/app/global-message/message.component.ts
 create mode 100644 harbor-app/src/app/global-message/message.service.ts

diff --git a/harbor-app/src/app/base/harbor-shell/harbor-shell.component.html b/harbor-app/src/app/base/harbor-shell/harbor-shell.component.html
index e8abe9435..f56210587 100644
--- a/harbor-app/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/harbor-app/src/app/base/harbor-shell/harbor-shell.component.html
@@ -1,40 +1,41 @@
 <clr-main-container>
-    <clr-modal [(clrModalOpen)]="account_settings_opened">
-        <h3 class="modal-title">Accout Settings</h3>
-        <div class="modal-body">
-            <form>
-                <section class="form-block">
-                    <div class="form-group">
-                        <label for="account_settings_username" class="col-md-4">Username</label>
-                        <input type="text" class="col-md-8" id="account_settings_username" size="20">
-                    </div>
-                    <div class="form-group">
-                        <label for="account_settings_email" class="col-md-4">Email</label>
-                        <input type="text" class="col-md-8" id="account_settings_email" size="20">
-                    </div>
-                    <div class="form-group">
-                        <label for="account_settings_full_name" class="col-md-4">Full name</label>
-                        <input type="text" class="col-md-8" id="account_settings_full_name" size="20">
-                    </div>
-                    <div class="form-group">
-                        <label for="account_settings_comments" class="col-md-4">Comments</label>
-                        <input type="text" class="col-md-8" id="account_settings_comments" size="20">
-                    </div>
-                    <div class="form-group">
-                        <button type="button" class="col-md-4" class="btn btn-outline">Change Password</button>
-                    </div>
-                </section>
-            </form>
-        </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-outline" (click)="account_settings_opened = false">Cancel</button>
-            <button type="button" class="btn btn-primary" (click)="account_settings_opened = false">Ok</button>
-        </div>
-    </clr-modal>
-    <navigator></navigator>
-    <div class="content-container">
-        <div class="content-area">
-            <router-outlet></router-outlet>
-        </div>
+  <clr-modal [(clrModalOpen)]="account_settings_opened">
+    <h3 class="modal-title">Accout Settings</h3>
+    <div class="modal-body">
+      <form>
+        <section class="form-block">
+          <div class="form-group">
+            <label for="account_settings_username" class="col-md-4">Username</label>
+            <input type="text" class="col-md-8" id="account_settings_username" size="20"> 
+          </div>
+          <div class="form-group">
+            <label for="account_settings_email" class="col-md-4">Email</label>
+            <input type="text" class="col-md-8" id="account_settings_email" size="20"> 
+          </div>
+          <div class="form-group">
+            <label for="account_settings_full_name" class="col-md-4">Full name</label>
+            <input type="text" class="col-md-8" id="account_settings_full_name" size="20"> 
+          </div>
+          <div class="form-group">
+            <label for="account_settings_comments" class="col-md-4">Comments</label>
+            <input type="text" class="col-md-8" id="account_settings_comments" size="20"> 
+          </div>
+          <div class="form-group">
+            <button type="button" class="col-md-4" class="btn btn-outline">Change Password</button>
+          </div>
+        </section>
+      </form>
     </div>
-</clr-main-container>
\ No newline at end of file
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="account_settings_opened = false">Cancel</button>
+      <button type="button" class="btn btn-primary" (click)="account_settings_opened = false">Ok</button>
+    </div>
+  </clr-modal>
+  <navigator></navigator>
+  <global-message></global-message>
+  <div class="content-container">
+    <div class="content-area">  
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+</clr-main-container>
diff --git a/harbor-app/src/app/global-message/message.component.html b/harbor-app/src/app/global-message/message.component.html
new file mode 100644
index 000000000..283e40ad9
--- /dev/null
+++ b/harbor-app/src/app/global-message/message.component.html
@@ -0,0 +1,7 @@
+<clr-alert [clrAlertType]="'alert-danger'" [clrAlertAppLevel]="true" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
+  <div class="alert-item">
+    <span class="alert-text">
+      {{globalMessage}}
+    </span>
+  </div>
+</clr-alert>
\ No newline at end of file
diff --git a/harbor-app/src/app/global-message/message.component.ts b/harbor-app/src/app/global-message/message.component.ts
new file mode 100644
index 000000000..6d00c19a9
--- /dev/null
+++ b/harbor-app/src/app/global-message/message.component.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { MessageService } from './message.service';
+
+@Component({
+  selector: 'global-message',
+  templateUrl: 'message.component.html'
+})
+export class MessageComponent {
+  
+  globalMessageOpened: boolean;
+  globalMessage: string;
+
+  constructor(messageService: MessageService) {
+    messageService.messageAnnounced$.subscribe(
+      message=>{
+        this.globalMessageOpened = true;
+        this.globalMessage = message;
+        console.log('received message:' + message);
+      }
+    )
+  }
+
+  onClose() {
+    this.globalMessageOpened = false;
+  }
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/global-message/message.service.ts b/harbor-app/src/app/global-message/message.service.ts
new file mode 100644
index 000000000..834ae2ca3
--- /dev/null
+++ b/harbor-app/src/app/global-message/message.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class MessageService {
+
+  private messageAnnouncedSource = new Subject<string>();
+
+  messageAnnounced$ = this.messageAnnouncedSource.asObservable();
+
+  announceMessage(message: string) {
+    this.messageAnnouncedSource.next(message);
+  }
+}
\ No newline at end of file
diff --git a/harbor-app/src/app/shared/shared.module.ts b/harbor-app/src/app/shared/shared.module.ts
index 35df2530f..df4ab1812 100644
--- a/harbor-app/src/app/shared/shared.module.ts
+++ b/harbor-app/src/app/shared/shared.module.ts
@@ -1,13 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CoreModule } from '../core/core.module';
-
+import { MessageComponent } from '../global-message/message.component';
+import { MessageService } from '../global-message/message.service';
 @NgModule({
   imports: [
     CoreModule
   ],
+  declarations: [
+    MessageComponent
+  ],
   exports: [
-    CoreModule
-  ]
+    CoreModule, MessageComponent
+  ],
+  providers:[ MessageService ]
 })
 export class SharedModule {