Change the alert style to global style

src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.css

@@ -17,16 +17,6 @@
     padding-right: 21px !important;
 }
 
-
-/*.global-message-alert {
-    position: fixed;
-    top: 55px;
-    left: 260px;
-    width: 100%;
-    z-index: 999;
-    padding-right: 276px;
-}*/
-
 .nav-link-override {
     width: 126px !important;
 }

src/ui_ng/src/app/base/harbor-shell/harbor-shell.component.html

@@ -3,9 +3,7 @@
     <navigator (showAccountSettingsModal)="openModal($event)" (showPwdChangeModal)="openModal($event)"></navigator>
     <div class="content-container">
         <div class="content-area" [class.container-override]="showSearch" [class.content-area-override]="!shouldOverrideContent" [class.start-content-padding]="shouldOverrideContent">
-            <div class="global-message-alert">
+            <global-message [isAppLevel]="false"></global-message>
-                <global-message [isAppLevel]="false"></global-message>
-            </div>
             <!-- Only appear when searching -->
             <search-result></search-result>
             <router-outlet></router-outlet>

src/ui_ng/src/app/global-message/message.component.css

@@ -0,0 +1,7 @@
+.global-message-alert {
+    position: fixed;
+    top: 60px;
+    left: 0px;
+    width: 100%;
+    z-index: 9999;
+}

src/ui_ng/src/app/global-message/message.component.html

@@ -1,10 +1,12 @@
-<clr-alert [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
+<div class="global-message-alert" [hidden]="hideOuter">
-    <div class="alert-item">
+    <clr-alert [clrAlertType]="globalMessage.type" [clrAlertAppLevel]="isAppLevel" [(clrAlertClosed)]="!globalMessageOpened" (clrAlertClosedChange)="onClose()">
-        <span class="alert-text">
+        <div class="alert-item">
+            <span class="alert-text">
           {{message}}
         </span>
-        <div class="alert-actions" *ngIf="needAuth">
+            <div class="alert-actions" *ngIf="needAuth">
-            <button class="btn alert-action" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
+                <button class="btn alert-action" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
+            </div>
         </div>
-    </div>
+    </clr-alert>
-</clr-alert>
+</div>

src/ui_ng/src/app/global-message/message.component.ts

@@ -11,7 +11,7 @@
 // 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, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 import { TranslateService } from '@ngx-translate/core';
@@ -23,7 +23,8 @@ import { AlertType, dismissInterval, httpStatusCode, CommonRoutes } from '../sha
 
 @Component({
   selector: 'global-message',
-  templateUrl: 'message.component.html'
+  templateUrl: 'message.component.html',
+  styleUrls: ['message.component.css']
 })
 export class MessageComponent implements OnInit, OnDestroy {
 
@@ -32,12 +33,14 @@ export class MessageComponent implements OnInit, OnDestroy {
   globalMessageOpened: boolean;
   messageText: string = "";
   timer: any = null;
+  hideOuter: boolean = true;
 
   appLevelMsgSub: Subscription;
   msgSub: Subscription;
   clearSub: Subscription;
 
   constructor(
+    private elementRef: ElementRef,
     private messageService: MessageService,
     private router: Router,
     private translate: TranslateService) { }
@@ -67,6 +70,19 @@ export class MessageComponent implements OnInit, OnDestroy {
           // Make the message alert bar dismiss after several intervals.
           //Only for this case
           this.timer = setTimeout(() => this.onClose(), dismissInterval);
+
+          //Hack the Clarity Alert style with native dom
+          setTimeout(() => {
+            let nativeDom: any = this.elementRef.nativeElement;
+            let queryDoms: any[] = nativeDom.getElementsByClassName("alert");
+            if (queryDoms && queryDoms.length > 0) {
+              let hackDom: any = queryDoms[0];
+              hackDom.className += ' alert-global alert-global-align';
+            }
+
+            this.hideOuter = false;
+          }, 0);
+
         }
       );
     }
@@ -122,5 +138,6 @@ export class MessageComponent implements OnInit, OnDestroy {
       clearTimeout(this.timer);
     }
     this.globalMessageOpened = false;
+    this.hideOuter = true;
   }
 }

src/ui_ng/src/app/shared/shared.const.ts

@@ -22,7 +22,7 @@ export const enum AlertType {
   DANGER, WARNING, INFO, SUCCESS
 };
 
-export const dismissInterval = 15 * 1000;
+export const dismissInterval = 10 * 1000;
 export const httpStatusCode = {
   "Unauthorized": 401,
   "Forbidden": 403

src/ui_ng/src/styles.css

@@ -6,4 +6,26 @@
     margin-left: -54px;
     width: 108px !important;
     height: 108px !important;
+}
+
+
+/*Hack Clarity alert*/
+
+.alert-global {
+    font-size: 16px;
+    font-weight: 400;
+    font-family: Metropolis, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
+    padding: 12px !important;
+    border: none !important;
+    margin-top: 0px !important;
+    max-height: 96px;
+}
+
+.alert-global-align {
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    overflow-y: auto;
+    overflow-x: hidden;
 }