Modify event panel

Signed-off-by: AllForNothing <sshijun@vmware.com>

src/portal/src/lib/_animations/slide-in-out.animation.ts

@@ -4,44 +4,13 @@ import {AnimationTriggerMetadata, trigger, state, animate, transition, style } f
 export const SlideInOutAnimation: AnimationTriggerMetadata =
     // trigger name for attaching this animation to an element using the [@triggerName] syntax
     trigger('SlideInOutAnimation', [
-
-        // end state styles for route container (host)
         state('in', style({
-            // the view covers the whole screen with a semi tranparent background
-            position: 'fix',
             right: 0,
-            width: '350px',
-            bottom: 0
-            // backgroundColor: 'rgba(0, 0, 0, 0.8)'
         })),
         state('out', style({
-            // the view covers the whole screen with a semi tranparent background
-            position: 'fix',
-            width: '30px',
-            bottom: 0
-            // backgroundColor: 'rgba(0, 0, 0, 0.8)'
+            right: '-325px',
         })),
-        // route 'enter' transition
-        transition('out => in', [
-            // animation and styles at end of transition
-            animate('.5s ease-in-out', style({
-                // transition the right position to 0 which slides the content into view
-                width: '350px',
-
-                // transition the background opacity to 0.8 to fade it in
-                // backgroundColor: 'rgba(0, 0, 0, 0.8)'
-            }))
-        ]),
-
-        // route 'leave' transition
-        transition('in => out', [
-            // animation and styles at end of transition
-            animate('.5s ease-in-out', style({
-                // transition the right position to -400% which slides the content out of view
-                width: '30px',
-
-                // transition the background opacity to 0 to fade it out
-                // backgroundColor: 'rgba(0, 0, 0, 0)'
-            }))
+        transition('in <=> out', [
+            animate('0.5s ease-in-out')
         ])
     ]);

src/portal/src/lib/components/operation/operation.component.css

@@ -17,22 +17,32 @@
 .eventTarget{display: inline-flex; width: 172px; font-size: 12px; flex-shrink:1; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
 .eventTime{ float: right; font-size: 12px;}
 :host >>> .nav{padding-left: 38px;}
-.operDiv{position: fixed; top: 60px; right: 0; z-index:100}
-.toolBar{
-    float: left;border-top: 1px solid #ccc;
-    transform: rotate(-90deg);
+
+.operDiv {
+    position: fixed;
+    top: 60px;
+    z-index: 600;
+    width: 350px;
+    bottom: 0
+}
+
+.toolBar {
+    position: absolute;
+    transform-origin: top right;
+    border-top: 1px solid #ccc;
+    transform: translate(-100%, 0) rotate(-90deg);
     margin-top: 10px;
-    padding: 2px 4px;
-    width: 86px;
-    height: 84px;
+    padding: 0 10px;
+    height: 25px;
+    line-height: 25px;
     background-color: white;
     letter-spacing: 1.2px;
     font-weight: 500;
     box-shadow: -2px -1px 3px #bebbbb;
     cursor: pointer;
-    text-align: center;
+    text-align: left;
     text-decoration: none;
-   }
+}
 .freshIcon{float: right;     margin-right: 20px;  margin-top: -10px;cursor: pointer;}
 #contentFailed, #contentAll, #contentRun{
     position: absolute;
@@ -65,3 +75,6 @@
 .hidden-info {
     display: none;
 }
+.margin-left-5 {
+    margin-left: 5px;
+}

src/portal/src/lib/components/operation/operation.component.html

@@ -1,6 +1,7 @@
-<div class="operDiv" [@SlideInOutAnimation]="animationState">
-    <a class="toolBar" (click)="slideOut()">{{'OPERATION.EVENT_LOG' | translate}}<!--<clr-icon shape="angle-double" style="transform: rotate(90deg)"></clr-icon>--></a>
-    <div class="side-form">
+<div class="operDiv" [@SlideInOutAnimation]="animationState" (mouseover)="mouseover()" (mouseleave)="mouseleave()" >
+    <div class="position-relative w-100 h-100">
+        <a class="toolBar" (click)="slideOut()">{{'OPERATION.EVENT_LOG' | translate}}<span *ngIf="getNewMessageCountStr()" class="badge badge-danger margin-left-5">{{getNewMessageCountStr()}}</span></a>
+        <div class="side-form">
         <clr-icon shape="refresh" class="freshIcon" (click)="TabEvent()"></clr-icon>
         <h3 class="custom-h2 event-text">{{'OPERATION.LOCAL_EVENT' | translate}}</h3>
         <div class="tab-top">
@@ -60,5 +61,6 @@
             </clr-tabs>
         </div>
     </div>
+    </div>
 </div>
 

src/portal/src/lib/components/operation/operation.component.ts

@@ -16,12 +16,15 @@ export class OperationComponent implements OnInit, OnDestroy {
   batchInfoSubscription: Subscription;
   resultLists: OperateInfo[] = [];
   animationState = "out";
+  private _newMessageCount: number = 0;
+  private _timeoutInterval;
 
   @HostListener('window:beforeunload', ['$event'])
   beforeUnloadHander(event) {
     // storage to localStorage
     let timp = new Date().getTime();
     localStorage.setItem('operaion', JSON.stringify({timp: timp,  data: this.resultLists}));
+    localStorage.setItem('newMessageCount', this._newMessageCount.toString());
   }
 
   constructor(
@@ -29,8 +32,9 @@ export class OperationComponent implements OnInit, OnDestroy {
     private translate: TranslateService) {
 
     this.batchInfoSubscription = operationService.operationInfo$.subscribe(data => {
-      // this.resultLists = data;
-      this.openSlide();
+      if (this.animationState === 'out') {
+        this._newMessageCount += 1;
+      }
       if (data) {
         if (this.resultLists.length >= 50) {
           this.resultLists.splice(49, this.resultLists.length - 49);
@@ -40,6 +44,31 @@ export class OperationComponent implements OnInit, OnDestroy {
     });
   }
 
+  getNewMessageCountStr(): string {
+    if (this._newMessageCount) {
+      if (this._newMessageCount > 50) {
+        return this._newMessageCount + '+';
+      }
+      return this._newMessageCount.toString();
+    }
+    return '';
+  }
+  resetNewMessageCount() {
+    this._newMessageCount = 0;
+  }
+  mouseover() {
+    if (this._timeoutInterval) {
+      clearInterval(this._timeoutInterval);
+      this._timeoutInterval = null;
+    }
+  }
+  mouseleave() {
+    if (!this._timeoutInterval) {
+      this._timeoutInterval = setTimeout(() => {
+          this.animationState = 'out';
+      }, 5000);
+    }
+  }
   public get runningLists(): OperateInfo[] {
     let runningList: OperateInfo[] = [];
     this.resultLists.forEach(data => {
@@ -61,6 +90,7 @@ export class OperationComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    this._newMessageCount = +localStorage.getItem('newMessageCount');
     let requestCookie = localStorage.getItem('operaion');
     if (requestCookie) {
       let operInfors: any = JSON.parse(requestCookie);
@@ -86,6 +116,10 @@ export class OperationComponent implements OnInit, OnDestroy {
     if (this.batchInfoSubscription) {
       this.batchInfoSubscription.unsubscribe();
     }
+    if (this._timeoutInterval) {
+      clearInterval(this._timeoutInterval);
+      this._timeoutInterval = null;
+    }
   }
 
   toggleTitle(errorSpan: any) {
@@ -94,10 +128,14 @@ export class OperationComponent implements OnInit, OnDestroy {
 
   slideOut(): void {
     this.animationState = this.animationState === 'out' ? 'in' : 'out';
+    if (this.animationState === 'in') {
+      this.resetNewMessageCount();
+    }
   }
 
   openSlide(): void {
     this.animationState = 'in';
+    this.resetNewMessageCount();
   }