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 db196252e562..28640f8f7c4e 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 cf9caf688057..c28816c7029c 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 b4043fc427d9..d27cb5bff415 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 23211c55cac4..66b1e24d49c1 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 f9274889e044..f69da46117f0 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 a2acc0168b2b..7599a69b591c 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.47.3