From: Afreen Misbah Date: Thu, 18 Dec 2025 18:57:08 +0000 (+0530) Subject: mgr/dashboard:Added modal for notiifcation area X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=670a8b3b270bd2feff09359d8a964bcc7fbb33bd;p=ceph.git mgr/dashboard:Added modal for notiifcation area Signed-off-by: Afreen Misbah --- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html index ffa28d80efeb7..109279f4ea18d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html @@ -1,5 +1,10 @@
- + + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html index 83b6e3332f031..826957a020679 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.html @@ -1,5 +1,16 @@ -
- + + + + - -
+ + + + diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss index 8264b4f5e6af4..40f81de4c8373 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss @@ -1,32 +1,21 @@ -@use '@carbon/styles/scss/theme'; @use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/motion' as *; -.notification-panel { - @include theme.theme(themes.$g10); +$block-class: notification-panel; +$block-size: 38.5rem; +.#{$block-class}__container { position: fixed; - top: spacing.$spacing-09; - right: 0; - width: 400px; - height: 700px; - background-color: $layer-01; - box-shadow: $shadow; - border: 1px solid $border-subtle-01; - z-index: 6000; - color: $text-primary; - display: flex; - flex-direction: column; - overflow: hidden; - - cd-notification-header { - flex: 0 0 auto; - } - - cd-notification-area { - flex: 1 1 auto; - overflow-y: auto; - min-height: 0; // Failing in firefox without this - } + z-index: 2; + overflow: auto; + background-color: var(--cds-layer-01); + border-block-end: 1px solid var(--cds-border-subtle-02); + border-inline-start: 1px solid var(--cds-border-subtle-02); + box-shadow: 0 0.125rem 0.25rem var(--cds-overlay); + min-block-size: $block-size; + min-inline-size: 20rem; + inset-block-start: 3rem; + inset-inline-end: 0; + max-block-size: $block-size; + max-inline-size: 22.75rem; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts index 1dcd166d9b6d7..1eb245f4c84a3 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.ts @@ -1,20 +1,26 @@ -import { Component, ElementRef, HostListener } from '@angular/core'; +import { Component, Input } from '@angular/core'; import { NotificationService } from '~/app/shared/services/notification.service'; +import { trigger, transition, style, animate } from '@angular/animations'; @Component({ selector: 'cd-notification-panel', templateUrl: './notification-panel.component.html', styleUrls: ['./notification-panel.component.scss'], - standalone: false + standalone: false, + animations: [ + trigger('panelAnimation', [ + transition(':enter', [ + style({ opacity: 0, transform: 'translateY(-38.5rem)' }), + animate( + '240ms cubic-bezier(0.2, 0, 0.38, 0.9)', + style({ opacity: 1, transform: 'translateY(0)' }) + ) + ]) + ]) + ] }) export class NotificationPanelComponent { - constructor(public notificationService: NotificationService, private elementRef: ElementRef) {} + @Input() isPanelOpen: boolean = true; - @HostListener('document:click', ['$event']) - handleClickOutside(event: Event) { - const clickedInside = this.elementRef.nativeElement.contains(event.target); - if (!clickedInside) { - this.notificationService.toggleSidebar(false, true); - } - } + constructor(public notificationService: NotificationService) {} } 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 ff0a276959d3d..05655e3109192 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,9 +1,8 @@ -import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { Component, OnDestroy, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; import { ICON_TYPE, IconSize } from '~/app/shared/enum/icons.enum'; -import { CdNotification } from '~/app/shared/models/cd-notification'; import { NotificationService } from '~/app/shared/services/notification.service'; import { SummaryService } from '~/app/shared/services/summary.service'; @@ -14,12 +13,10 @@ import { SummaryService } from '~/app/shared/services/summary.service'; standalone: false }) export class NotificationsComponent implements OnInit, OnDestroy { - @Input() isPanelOpen: boolean = false; icons = ICON_TYPE; iconSize = IconSize.size20; hasRunningTasks = false; hasNotifications = false; - notificationCount = 0; isMuted = false; private subs = new Subscription(); @@ -32,13 +29,7 @@ export class NotificationsComponent implements OnInit, OnDestroy { this.subs.add( this.summaryService.subscribe((summary) => { this.hasRunningTasks = summary.executing_tasks.length > 0; - }) - ); - - this.subs.add( - this.notificationService.data$.subscribe((notifications: CdNotification[]) => { - this.hasNotifications = notifications.length > 0; - this.notificationCount = notifications.length; + // TODO: when notifications are mute - show unread icon too }) ); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts index 1dba3684c58f7..8185be6eebb88 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts @@ -45,7 +45,6 @@ export class NotificationService { private activeToasts: ToastContent[] = []; KEY = 'cdNotifications'; MUTE_KEY = 'cdNotificationsMuted'; - private readonly MAX_NOTIFICATIONS = 10; constructor( private taskMessageService: TaskMessageService, @@ -97,9 +96,6 @@ export class NotificationService { const notifications = this.dataSource.getValue(); notifications.push(notification); notifications.sort((a, b) => (a.timestamp > b.timestamp ? -1 : 1)); - while (notifications.length > this.MAX_NOTIFICATIONS) { - notifications.pop(); - } this.dataSource.next(notifications); this.persistNotifications(notifications); }