From: Afreen Misbah Date: Mon, 18 May 2026 11:33:16 +0000 (+0530) Subject: mgr/dashboard: Remove `ng-click-outside` and `ngx-toastr`package X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=b426b02c29da2f1fbfbdf475f2a9bed89db0776e;p=ceph.git mgr/dashboard: Remove `ng-click-outside` and `ngx-toastr`package Fixes https://tracker.ceph.com/issues/70934 Fixes https://tracker.ceph.com/issues/76631 Signed-off-by: Afreen Misbah --- diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json index 653fa7602c11..976a00f19dfd 100644 --- a/src/pybind/mgr/dashboard/frontend/package.json +++ b/src/pybind/mgr/dashboard/frontend/package.json @@ -74,10 +74,8 @@ "lodash": "4.18.1", "moment": "2.29.4", "ng-block-ui": "4.0.1", - "ng-click-outside": "9.0.1", "ng2-charts": "7.0.0", "ngx-cookie-service": "19.1.2", - "ngx-toastr": "19.0.0", "rxjs": "6.6.3", "simplebar-angular": "3.3.0", "stream-browserify": "3.0.0", diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts index b3146312c0da..0e1809f66981 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts @@ -12,7 +12,6 @@ import { NgbTimepickerModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; -import { ClickOutsideModule } from 'ng-click-outside'; import { provideCharts, withDefaultRegisterables, BaseChartDirective } from 'ng2-charts'; import { SimplebarAngularModule } from 'simplebar-angular'; import { @@ -70,7 +69,6 @@ import { HelperComponent } from './helper/helper.component'; import { LanguageSelectorComponent } from './language-selector/language-selector.component'; import { LoadingPanelComponent } from './loading-panel/loading-panel.component'; import { ModalComponent } from './modal/modal.component'; -import { NotificationsSidebarComponent } from './notifications-sidebar/notifications-sidebar.component'; import { OrchestratorDocPanelComponent } from './orchestrator-doc-panel/orchestrator-doc-panel.component'; import { PwdExpirationNotificationComponent } from './pwd-expiration-notification/pwd-expiration-notification.component'; import { SelectBadgesComponent } from './select-badges/select-badges.component'; @@ -142,7 +140,6 @@ import { NumberWithUnitComponent } from './number-with-unit/number-with-unit.com PipesModule, DirectivesModule, NgbDropdownModule, - ClickOutsideModule, SimplebarAngularModule, RouterModule, NgbDatepickerModule, @@ -186,7 +183,6 @@ import { NumberWithUnitComponent } from './number-with-unit/number-with-unit.com UsageBarComponent, LoadingPanelComponent, ModalComponent, - NotificationsSidebarComponent, DeleteConfirmationModalComponent, ConfirmationModalComponent, LanguageSelectorComponent, @@ -238,7 +234,6 @@ import { NumberWithUnitComponent } from './number-with-unit/number-with-unit.com LoadingPanelComponent, UsageBarComponent, ModalComponent, - NotificationsSidebarComponent, LanguageSelectorComponent, GrafanaComponent, SelectComponent, diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html deleted file mode 100644 index ba3a57eb1d9f..000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html +++ /dev/null @@ -1,149 +0,0 @@ - - -
-
-
-
- - - -
-
-
-
{{ executingTask.description }}
-
- -
-

- - {{ executingTask.begin_time | cdDate }} - - - - {{ executingTask.progress || 0 }} % - -

- -
-
-
-
- -
-
- - - - - - -
- -
-
-
-
- - - - -
-
-
- - - - - -
{{ notification.title }}
-

-

- - - Duration: {{ notification.duration | duration }} - -
- - {{ notification.timestamp | relativeDate }} - -

-
-
-
-
- -
-
- - - - -
-
There are no notifications.
-
- - -
-
- Tasks and Notifications - - -
- - -
- - - -
- -
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss deleted file mode 100644 index 91f8a3866e5e..000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use './src/styles/vendor/variables' as vv; - -:host { - bottom: 10px; - max-width: 90vw; - position: fixed; - right: -350px; - top: vv.$navbar-height + 10px; - transition: all 0.6s; - width: 350px; - z-index: 9; -} - -:host.active { - right: 20px; -} - -.card { - height: 100%; -} - -.card-body { - padding-left: 0; - padding-right: 5px; - padding-top: 3px; -} - -ngx-simplebar { - height: calc(100% - 42.2px); -} - -.separator { - background-color: vv.$gray-200; - color: vv.$gray-600; - font-size: 1rem; - padding: 5px 12px; -} - -.btn-block { - width: 98%; -} - -.btn-link .fa-trash-o { - color: vv.$black; -} - -table { - width: 100%; -} - -.row { - margin-left: 0; - margin-right: 0; - padding-bottom: 1rem; - padding-top: 1rem; -} - -hr { - margin-bottom: 2px; - margin-top: 2px; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts deleted file mode 100644 index 2ba6d3d31429..000000000000 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.ts +++ /dev/null @@ -1,221 +0,0 @@ -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - HostBinding, - NgZone, - OnDestroy, - OnInit -} from '@angular/core'; - -import { Mutex } from 'async-mutex'; -import _ from 'lodash'; -import moment from 'moment'; -import { Subscription } from 'rxjs'; - -import { PrometheusService } from '~/app/shared/api/prometheus.service'; -import { SucceededActionLabelsI18n } from '~/app/shared/constants/app.constants'; -import { Icons } from '~/app/shared/enum/icons.enum'; -import { NotificationType } from '~/app/shared/enum/notification-type.enum'; -import { - AlertmanagerSilence, - AlertmanagerSilenceMatcher -} from '~/app/shared/models/alertmanager-silence'; -import { CdNotification } from '~/app/shared/models/cd-notification'; -import { ExecutingTask } from '~/app/shared/models/executing-task'; -import { FinishedTask } from '~/app/shared/models/finished-task'; -import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; -import { NotificationService } from '~/app/shared/services/notification.service'; -import { PrometheusAlertService } from '~/app/shared/services/prometheus-alert.service'; -import { PrometheusNotificationService } from '~/app/shared/services/prometheus-notification.service'; -import { SummaryService } from '~/app/shared/services/summary.service'; -import { TaskMessageService } from '~/app/shared/services/task-message.service'; - -@Component({ - selector: 'cd-notifications-sidebar', - templateUrl: './notifications-sidebar.component.html', - styleUrls: ['./notifications-sidebar.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush, - standalone: false -}) -export class NotificationsSidebarComponent implements OnInit, OnDestroy { - @HostBinding('class.active') isSidebarOpened = false; - - notifications: CdNotification[]; - private interval: number; - private timeout: number; - - executingTasks: ExecutingTask[] = []; - - private subs = new Subscription(); - - icons = Icons; - - // Tasks - last_task = ''; - mutex = new Mutex(); - - simplebar = { - autoHide: false - }; - - constructor( - public notificationService: NotificationService, - private summaryService: SummaryService, - private taskMessageService: TaskMessageService, - private prometheusNotificationService: PrometheusNotificationService, - private succeededLabels: SucceededActionLabelsI18n, - private authStorageService: AuthStorageService, - private prometheusAlertService: PrometheusAlertService, - private prometheusService: PrometheusService, - private ngZone: NgZone, - private cdRef: ChangeDetectorRef - ) { - this.notifications = []; - } - - ngOnDestroy() { - window.clearInterval(this.interval); - window.clearTimeout(this.timeout); - this.subs.unsubscribe(); - } - - ngOnInit() { - this.last_task = window.localStorage.getItem('last_task'); - - const permissions = this.authStorageService.getPermissions(); - if (permissions.prometheus.read && permissions.configOpt.read) { - this.triggerPrometheusAlerts(); - this.ngZone.runOutsideAngular(() => { - this.interval = window.setInterval(() => { - this.ngZone.run(() => { - this.triggerPrometheusAlerts(); - }); - }, 5000); - }); - } - - this.subs.add( - this.notificationService.data$.subscribe((notifications: CdNotification[]) => { - this.notifications = _.orderBy(notifications, ['timestamp'], ['desc']); - this.cdRef.detectChanges(); - }) - ); - - this.subs.add( - this.notificationService.panelState$.subscribe((state) => { - this.isSidebarOpened = state; - this.cdRef.detectChanges(); - }) - ); - - this.subs.add( - this.summaryService.subscribe((summary) => { - this._handleTasks(summary.executing_tasks); - - this.mutex.acquire().then((release) => { - _.filter( - summary.finished_tasks, - (task: FinishedTask) => !this.last_task || moment(task.end_time).isAfter(this.last_task) - ).forEach((task) => { - const config = this.notificationService.finishedTaskToNotification(task, task.success); - const notification = new CdNotification(config); - notification.timestamp = task.end_time; - notification.duration = task.duration; - - if (!this.last_task || moment(task.end_time).isAfter(this.last_task)) { - this.last_task = task.end_time; - window.localStorage.setItem('last_task', this.last_task); - } - - this.notificationService.save(notification); - }); - - this.cdRef.detectChanges(); - - release(); - }); - }) - ); - } - - _handleTasks(executingTasks: ExecutingTask[]) { - for (const executingTask of executingTasks) { - executingTask.description = this.taskMessageService.getRunningTitle(executingTask); - } - this.executingTasks = executingTasks; - } - - private triggerPrometheusAlerts() { - this.prometheusAlertService.refresh(); - this.prometheusNotificationService.refresh(); - } - - removeAll() { - this.notificationService.removeAll(); - } - - remove(index: number) { - this.notificationService.remove(index); - } - - closeSidebar() { - this.notificationService.togglePanel(false); - } - - trackByFn(index: number) { - return index; - } - - silence(data: CdNotification) { - const datetimeFormat = 'YYYY-MM-DD HH:mm'; - const resource = $localize`silence`; - const matcher: AlertmanagerSilenceMatcher = { - name: 'alertname', - value: data['title'].split(' ')[0], - isRegex: false - }; - const silencePayload: AlertmanagerSilence = { - matchers: [matcher], - startsAt: moment(moment().format(datetimeFormat)).toISOString(), - endsAt: moment(moment().add(2, 'hours').format(datetimeFormat)).toISOString(), - createdBy: this.authStorageService.getUsername(), - comment: 'Silence created from the alert notification' - }; - let msg = ''; - - data.alertSilenced = true; - msg = msg.concat(` ${matcher.name} - ${matcher.value},`); - const title = `${this.succeededLabels.CREATED} ${resource} for ${msg.slice(0, -1)}`; - this.prometheusService.setSilence(silencePayload).subscribe((resp) => { - if (data) { - data.silenceId = resp.body['silenceId']; - } - this.notificationService.show( - NotificationType.success, - title, - undefined, - undefined, - 'Prometheus' - ); - }); - } - - expire(data: CdNotification) { - data.alertSilenced = false; - this.prometheusService.expireSilence(data.silenceId).subscribe( - () => { - this.notificationService.show( - NotificationType.success, - `${this.succeededLabels.EXPIRED} ${data.silenceId}`, - undefined, - undefined, - 'Prometheus' - ); - }, - (resp) => { - resp['application'] = 'Prometheus'; - } - ); - } -}