mgr/dashboard: Improve notification badge

Added badge to the notification icon when there are pending notifications

Fixes: https://tracker.ceph.com/issues/45414
Signed-off-by: Aashish Sharma <aasharma@redhat.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 3bca268d8cd3e6a0ddf47629f9258fb6acf50188..f5eae4f890d0a7173d6c751f2748496128ffbc8c 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
@@ -3,6 +3,9 @@
    [ngClass]="{ 'running': hasRunningTasks }"
    (click)="toggleSidebar()">
   <i [ngClass]="[icons.bell]"></i>
+  <span class="dot"
+        *ngIf="hasNotifications">
+  </span>
   <span class="d-md-none"
         i18n>Tasks and Notifications</span>
 </a>

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 a4e2673f63b8590fbde091e171e248cd45e92435..2120b351f5b66e386b79d760741ca2afea5e1a3d 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
@@ -7,3 +7,21 @@
 .running:hover i {
   color: bd.$color-solid-white;
 }
+
+a {
+  .dot {
+    background-color: bd.$color-primary;
+    border: 2px solid bd.$color-navbar-bg;
+    border-radius: 50%;
+    height: 11px;
+    position: absolute;
+    right: 17px;
+    top: 10px;
+    width: 10px;
+  }
+
+  &:hover .dot {
+    background-color: bd.$color-solid-white;
+    border-color: bd.$color-primary;
+  }
+}

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 e7c2d97f35aa3cf1f39c9838672c11812c7188a6..cf06c786d1afd87f703e1ce158166fd8d6f343d2 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
@@ -5,7 +5,9 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { ToastrModule } from 'ngx-toastr';
 
 import { configureTestBed } from '../../../../testing/unit-test-helper';
+import { CdNotification, CdNotificationConfig } from '../../../shared/models/cd-notification';
 import { ExecutingTask } from '../../../shared/models/executing-task';
+import { NotificationService } from '../../../shared/services/notification.service';
 import { SummaryService } from '../../../shared/services/summary.service';
 import { SharedModule } from '../../../shared/shared.module';
 import { NotificationsComponent } from './notifications.component';
@@ -14,6 +16,7 @@ describe('NotificationsComponent', () => {
   let component: NotificationsComponent;
   let fixture: ComponentFixture<NotificationsComponent>;
   let summaryService: SummaryService;
+  let notificationService: NotificationService;
 
   configureTestBed({
     imports: [HttpClientTestingModule, SharedModule, ToastrModule.forRoot(), RouterTestingModule],
@@ -24,6 +27,7 @@ describe('NotificationsComponent', () => {
     fixture = TestBed.createComponent(NotificationsComponent);
     component = fixture.componentInstance;
     summaryService = TestBed.inject(SummaryService);
+    notificationService = TestBed.inject(NotificationService);
 
     fixture.detectChanges();
   });
@@ -40,4 +44,15 @@ describe('NotificationsComponent', () => {
 
     expect(component.hasRunningTasks).toBeTruthy();
   });
+
+  it('should create a dot if there are running notifications', () => {
+    const notification = new CdNotification(new CdNotificationConfig());
+    const recent = notificationService['dataSource'].getValue();
+    recent.push(notification);
+    notificationService['dataSource'].next(recent);
+    expect(component.hasNotifications).toBeTruthy();
+    fixture.detectChanges();
+    const dot = fixture.debugElement.nativeElement.querySelector('.dot');
+    expect(dot).not.toBe('');
+  });
 });

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 b6cee7649d3b1a9967caf8a94bf13e91c2289dc9..27d74360cddedcca0b8683267d9551b4812faffa 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
@@ -3,6 +3,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { Icons } from '../../../shared/enum/icons.enum';
+import { CdNotification } from '../../../shared/models/cd-notification';
 import { NotificationService } from '../../../shared/services/notification.service';
 import { SummaryService } from '../../../shared/services/summary.service';
 
@@ -14,6 +15,7 @@ import { SummaryService } from '../../../shared/services/summary.service';
 export class NotificationsComponent implements OnInit, OnDestroy {
   icons = Icons;
   hasRunningTasks = false;
+  hasNotifications = false;
   private subs = new Subscription();
 
   constructor(
@@ -27,6 +29,12 @@ export class NotificationsComponent implements OnInit, OnDestroy {
         this.hasRunningTasks = summary.executing_tasks.length > 0;
       })
     );
+
+    this.subs.add(
+      this.notificationService.data$.subscribe((notifications: CdNotification[]) => {
+        this.hasNotifications = notifications.length > 0;
+      })
+    );
   }
 
   ngOnDestroy(): void {