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 db196252e5621aa060491887967a06318120f124..28640f8f7c4e405b6f9e53dc5121ff56fd9a7674 100644 (file)
--- 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 cf9caf6880576f42ece77d90e90e783013f90cbb..c28816c7029c2fbdcadb80e49807ea30f1c976c9 100644 (file)
--- 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 b4043fc427d919d8fc6bd6b760b78beeed148b1b..d27cb5bff41556c4ee2c0894a5c2c00292a9a5ca 100644 (file)
--- 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 23211c55cac4a768cf013854cf8705376c2da035..66b1e24d49c161b91b43f455a5fca3d6c4c01013 100644 (file)
--- 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 f9274889e0440fbce6b270f31e6286a8879108ad..f69da46117f0f89cd3c0fb95900911b096f1bec0 100644 (file)
--- 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 a2acc0168b2b4826ff1b3f6028e4d378e38925d0..7599a69b591c9a6105245c67dbced5b8912fa01a 100644 (file)
--- 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;
 }