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>
(cherry picked from commit 22db812272cc863c9e91f3ef3777feace8338c83)

Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notifications/notifications.component.spec.ts

	Import and use shared/models/cd-notification
	Change scss vars to match octopus variable calling formt

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 8a2269b1c466d972f28a293099274be54caf2520..cb83a0c021ea8a75013f2844c6cdf5785886eac0 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: white;
 }
+
+a {
+  .dot {
+    background-color: $color-primary;
+    border: 2px solid $color-navbar-bg;
+    border-radius: 50%;
+    height: 11px;
+    position: absolute;
+    right: 17px;
+    top: 10px;
+    width: 10px;
+  }
+
+  &:hover .dot {
+    background-color: $color-solid-white;
+    border-color: $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 dacdb24c0428d161147a73817a3a8b2506ee0162..af9c9897b60af8d031bef5e8fec6284cea7e52eb 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, i18nProviders } 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],
@@ -25,6 +28,7 @@ describe('NotificationsComponent', () => {
     fixture = TestBed.createComponent(NotificationsComponent);
     component = fixture.componentInstance;
     summaryService = TestBed.get(SummaryService);
+    notificationService = TestBed.get(NotificationService);
 
     fixture.detectChanges();
   });
@@ -41,4 +45,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 {