From: Afreen Misbah Date: Tue, 16 Dec 2025 19:00:15 +0000 (+0530) Subject: mgr/dashboard: Fix notification panel mounting X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=3f03c503064c2f811591db7350aa451ae31a1960;p=ceph.git mgr/dashboard: Fix notification panel mounting - fixed notification panel mounting which was earlier via service - earlier side panel was always mounted which was not good from perf POV - also used carbon provided icon for new notification instead of custom css Signed-off-by: Afreen Misbah --- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts index 9652d372d97d4..70e60684cd219 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts @@ -41,6 +41,7 @@ import SettingsIcon from '@carbon/icons/es/settings/20'; import HelpIcon from '@carbon/icons/es/help/20'; import NotificationIcon from '@carbon/icons/es/notification/20'; import NotificationOffIcon from '@carbon/icons/es/notification--off/20'; +import NotificationNewIcon from '@carbon/icons/es/notification--new/20'; import LaunchIcon from '@carbon/icons/es/launch/16'; import DashboardIcon from '@carbon/icons/es/template/20'; import ClusterIcon from '@carbon/icons/es/web-services--cluster/20'; @@ -57,6 +58,7 @@ import ErrorFilledIcon from '@carbon/icons/es/error--filled/16'; import InformationFilledIcon from '@carbon/icons/es/information--filled/16'; import WarningFilledIcon from '@carbon/icons/es/warning--filled/16'; import NotificationFilledIcon from '@carbon/icons/es/notification--filled/16'; + import CloseIcon from '@carbon/icons/es/close/16'; import { NotificationPanelComponent } from './notification-panel/notification-panel/notification-panel.component'; import { NotificationHeaderComponent } from './notification-panel/notification-header/notification-header.component'; @@ -137,6 +139,7 @@ export class NavigationModule { InformationFilledIcon, WarningFilledIcon, NotificationFilledIcon, + NotificationNewIcon, CloseIcon ]); } 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 0e2ec96b8b8ad..ffa28d80efeb7 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,8 +1,5 @@
- - - - + @@ -34,7 +31,7 @@ + [(active)]="isNotifPanelOpen">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts index 612ef52ddc370..2864776c94c6f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts @@ -33,7 +33,7 @@ export class NavigationComponent implements OnInit, OnDestroy { clusterTokenStatus: object = {}; summaryData: any; - rightSidebarOpen = false; // rightSidebar only opens when width is less than 768px + isNotifPanelOpen = false; showMenuSidebar = true; simplebar = { @@ -161,8 +161,8 @@ export class NavigationComponent implements OnInit, OnDestroy { this.displayedSubMenu[menu] = !this.displayedSubMenu[menu]; } - toggleRightSidebar() { - this.rightSidebarOpen = !this.rightSidebarOpen; + toggleSidebar() { + this.isNotifPanelOpen = !this.isNotifPanelOpen; } onClusterSelection(value: object) { @@ -210,9 +210,7 @@ export class NavigationComponent implements OnInit, OnDestroy { } ); } - toggleSidebar() { - this.notificationService.toggleSidebar(true, true); - } + trackByFn(item: any) { return item; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.html index 1e6d3e67d935c..bbc832bef4ac1 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.html @@ -1,4 +1,4 @@ -

No notifications match your search

No notifications available

@@ -70,7 +70,7 @@
-
-
- - - - - {{ notificationCount }} - -
- Tasks and Notifications - - - +@if(isMuted) { + + +} +@else if(!isMuted && hasRunningTasks) { + + +} +@else { + + +} 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 2ef1e08d03243..e69de29bb2d1d 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,55 +0,0 @@ -@use './src/styles/vendor/variables' as vv; -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; - -.running i { - color: vv.$primary; -} - -.running:hover i { - color: vv.$white; -} - -a { - .dot { - background-color: vv.$primary-500; - border: 2px solid vv.$secondary; - border-radius: 50%; - height: 11px; - position: absolute; - right: 17px; - top: 10px; - width: 10px; - } - - &:hover .dot { - background-color: vv.$white; - border-color: vv.$primary-500; - } -} - -.notification-icon-wrapper { - position: relative; - display: inline-flex; - padding: spacing.$spacing-04; - cursor: pointer; - border-radius: spacing.$spacing-01; - transition: background-color 0.2s ease; -} - -.notification-count { - position: absolute; - top: spacing.$spacing-02; - right: spacing.$spacing-02; - min-width: spacing.$spacing-04; - height: spacing.$spacing-04; - padding: 0 spacing.$spacing-01; - border-radius: spacing.$spacing-02; - background-color: $support-error; - color: $text-on-color; - font-size: spacing.$spacing-04; - line-height: spacing.$spacing-04; - text-align: center; - font-weight: 500; -} 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 bbeff3ed75497..ff0a276959d3d 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,8 +1,8 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { Subscription } from 'rxjs'; -import { Icons } from '~/app/shared/enum/icons.enum'; +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,11 +14,11 @@ import { SummaryService } from '~/app/shared/services/summary.service'; standalone: false }) export class NotificationsComponent implements OnInit, OnDestroy { - icons = Icons; + @Input() isPanelOpen: boolean = false; + icons = ICON_TYPE; + iconSize = IconSize.size20; hasRunningTasks = false; hasNotifications = false; - isPanelOpen = false; - useNewPanel = true; notificationCount = 0; isMuted = false; private subs = new Subscription(); @@ -42,12 +42,6 @@ export class NotificationsComponent implements OnInit, OnDestroy { }) ); - this.subs.add( - this.notificationService.panelState$.subscribe((state) => { - this.isPanelOpen = state.isOpen; - this.useNewPanel = state.useNewPanel; - }) - ); this.subs.add( this.notificationService.muteState$.subscribe((isMuted) => { this.isMuted = isMuted; @@ -55,12 +49,6 @@ export class NotificationsComponent implements OnInit, OnDestroy { ); } - togglePanel(event: Event) { - event.preventDefault(); - event.stopPropagation(); - this.notificationService.toggleSidebar(!this.isPanelOpen, this.useNewPanel); - } - ngOnDestroy(): void { this.subs.unsubscribe(); } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss index 544c16f6a2429..ff63dde9c9ae9 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.scss @@ -38,3 +38,7 @@ Using `color` in css and seyting svg will fill="currentColor does not work. .info-icon { fill: theme.$support-info !important; } + +.notificationNew-icon circle { + fill: theme.$support-error !important; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts index 5266aeae32330..5af1ff7265448 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/icon/icon.component.ts @@ -1,11 +1,12 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; import { ICON_TYPE, Icons, IconSize } from '../../enum/icons.enum'; @Component({ selector: 'cd-icon', templateUrl: './icon.component.html', styleUrl: './icon.component.scss', - standalone: false + standalone: false, + encapsulation: ViewEncapsulation.None }) export class IconComponent implements OnInit { @Input() type!: keyof typeof ICON_TYPE; diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts index 50db9d77e826c..500671d054bad 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts @@ -102,7 +102,9 @@ export enum Icons { spin = 'fa fa-spin', // To get any icon to rotate inverse = 'fa fa-inverse', // To get an alternative icon color notification = 'notification', - error = 'error--filled' + error = 'error--filled', + notificationOff = 'notification--off', + notificationNew = 'notification--new' } export enum IconSize { @@ -120,6 +122,8 @@ export const ICON_TYPE = { error: 'error--filled', infoCircle: 'info-circle', notification: 'notification', + notificationOff: 'notification--off', + notificationNew: 'notification--new', success: 'success', warning: 'warning' } as const;