From: Tiago Melo <tmelo@suse.com>
Date: Wed, 11 Apr 2018 11:54:07 +0000 (+0100)
Subject: mgr/dashboard: Notification improvements
X-Git-Tag: v13.1.0~283^2
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=c89497f563ad24364ec70db9847933e6e4a1a97d;p=ceph.git

mgr/dashboard: Notification improvements

Notification list is now using the new CdDate pipe for formating the date and
they are now sorted desc by date.

Fixed the class name of the info icon and changed the max-height so it can work
in smaller screens.

Decreased the size of the icons.

Signed-off-by: Tiago Melo <tmelo@suse.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
index db196252e5621..28640f8f7c4e4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.html
@@ -30,7 +30,7 @@
         </tr>
         <tr>
           <td>
-            <small class="date">{{ notification.timestamp | date: 'medium' }}</small>
+            <small class="date">{{ notification.timestamp | cdDate }}</small>
           </td>
         </tr>
       </table>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
index cf9caf6880576..c28816c7029c2 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.scss
@@ -1,5 +1,6 @@
 @import '../../../../styles/popover.scss';
 
 .icon-col {
-  width: 70px !important;
+  width: 50px !important;
+  font-size: 10px;
 }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.spec.ts
index b4043fc427d91..d27cb5bff4155 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.spec.ts
@@ -3,6 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 
 import { NotificationService } from '../../../shared/services/notification.service';
+import { SharedModule } from '../../../shared/shared.module';
 import { NotificationsComponent } from './notifications.component';
 
 describe('NotificationsComponent', () => {
@@ -14,7 +15,7 @@ describe('NotificationsComponent', () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        imports: [PopoverModule.forRoot()],
+        imports: [PopoverModule.forRoot(), SharedModule],
         declarations: [NotificationsComponent],
         providers: [{ provide: NotificationService, useValue: fakeService }]
       }).compileComponents();
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts
index 23211c55cac4a..66b1e24d49c16 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+import * as _ from 'lodash';
+
 import { NotificationType } from '../../../shared/enum/notification-type.enum';
 import { CdNotification } from '../../../shared/models/cd-notification';
 import { NotificationService } from '../../../shared/services/notification.service';
@@ -18,8 +20,8 @@ export class NotificationsComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.notificationService.data$.subscribe((notifications) => {
-      this.notifications = notifications;
+    this.notificationService.data$.subscribe((notifications: CdNotification[]) => {
+      this.notifications = _.orderBy(notifications, ['timestamp'], ['desc']);
     });
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts
index f9274889e0440..f69da46117f0f 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/models/cd-notification.ts
@@ -32,7 +32,7 @@ export class CdNotification {
       case NotificationType.error:
         return 'fa-exclamation-triangle';
       case NotificationType.info:
-        return 'text-info';
+        return 'fa-info';
       case NotificationType.success:
         return 'fa-check';
     }
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss b/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
index a2acc0168b2b4..7599a69b591c9 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/popover.scss
@@ -1,7 +1,7 @@
 ::ng-deep .popover-content {
   padding: 0px 0px;
   height: auto;
-  max-height: 700px;
+  max-height: 70vh;
   overflow-x: hidden;
 }