From c89497f563ad24364ec70db9847933e6e4a1a97d Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Wed, 11 Apr 2018 12:54:07 +0100
Subject: [PATCH] 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>
---
 .../navigation/notifications/notifications.component.html   | 2 +-
 .../navigation/notifications/notifications.component.scss   | 3 ++-
 .../notifications/notifications.component.spec.ts           | 3 ++-
 .../navigation/notifications/notifications.component.ts     | 6 ++++--
 .../frontend/src/app/shared/models/cd-notification.ts       | 2 +-
 src/pybind/mgr/dashboard/frontend/src/styles/popover.scss   | 2 +-
 6 files changed, 11 insertions(+), 7 deletions(-)

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 db196252e56..28640f8f7c4 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 cf9caf68805..c28816c7029 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 b4043fc427d..d27cb5bff41 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 23211c55cac..66b1e24d49c 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 f9274889e04..f69da46117f 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 a2acc0168b2..7599a69b591 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;
 }
 
-- 
2.39.5