mgr/dashboard: Fix the footer - view all button css in notification panel

Fixes https://tracker.ceph.com/issues/78222

Signed-off-by: Afreen Misbah <afreen@ibm.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
index b0f26ee11a12e90c35c254f0c3d0fa1645e32c9b..8cc60cc80c27e4462a7fbff720ca95bf74310466 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.html
@@ -1,9 +1,4 @@
-<div
-  [ngClass]="{
-    'empty-body': todayNotifications.length === 0 && previousNotifications.length === 0
-  }"
-  class="notification-area"
->
+<div class="notification-area">
   @if (executingTasks.length > 0) {
     <div
       class="notification-section-heading"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
index 0e1c00d2f9a4e880efa343a0dda5653becf2b995..86bd9d74e52f94622dac26c04958a94eb4f77220 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
@@ -3,6 +3,13 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/type';
 
+:host {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-block-size: 0;
+}
+
 .notification-section-heading {
   @include type.type-style('heading-compact-01');
 
@@ -12,7 +19,7 @@
   background-color: $layer-01;
   position: sticky;
   z-index: 2;
-  top: var(--header-height);
+  top: 0;
   display: block;
 }
 
@@ -46,6 +53,7 @@
   color: $text-primary;
   line-height: 1.25;
   display: block;
+  overflow-wrap: break-word;
 }
 
 .notification-message {
@@ -55,7 +63,11 @@
   margin: 0;
   line-height: 1.4;
   margin-top: -$spacing-01;
-  display: block;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: break-word;
 }
 
 .notification-empty {
@@ -125,14 +137,5 @@
 }
 
 .notification-area {
-  display: block;
-  height: 100%;
   background-color: $layer-01;
 }
-
-.empty-body {
-  max-block-size: var(--panel-height);
-  min-block-size: var(--panel-height);
-  max-inline-size: var(--panel-max-width);
-  min-inline-size: var(--panel-min-width);
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts
index ee5d7f5c9e41da9a709ccdd728456c8029bb5626..a767f6be301aa32192c055bbed9a1a6a93e85348 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { NotificationService } from '../../../../shared/services/notification.service';
 import { CdNotification } from '../../../../shared/models/cd-notification';
@@ -38,7 +38,6 @@ export class NotificationAreaComponent implements OnInit, OnDestroy {
   constructor(
     private notificationService: NotificationService,
     private summaryService: SummaryService,
-    private cdRef: ChangeDetectorRef,
     private taskMessageService: TaskMessageService
   ) {}
 
@@ -86,8 +85,6 @@ export class NotificationAreaComponent implements OnInit, OnDestroy {
             this.notificationService.save(notification);
           });
 
-          this.cdRef.detectChanges();
-
           release();
         });
       })

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
index 25813e0b93389df3c25de89de1bb2c56bc9883a6..43228cc28bb3c12cb27c522ec67d94e37a667285 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
@@ -1,11 +1,13 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/theme';
 
+:host {
+  flex-shrink: 0;
+}
+
 .notification-footer {
-  position: sticky;
-  bottom: 0;
+  flex-shrink: 0;
   width: 100%;
-  z-index: 2;
   display: flex;
   align-items: center;
   background-color: theme.$layer-01;

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
index fef7cb5f3f6d4f29b49b0ce776bf508b5c4647b0..dcbf0ba87dd8e866d938c481b1665f98dd57c7d2 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
@@ -1,14 +1,14 @@
 @use '@carbon/styles/scss/spacing';
 
+:host {
+  flex-shrink: 0;
+}
+
 .notification-header {
-  position: sticky;
-  top: 0;
-  z-index: 2;
+  flex-shrink: 0;
   padding: spacing.$spacing-03 spacing.$spacing-05;
   background-color: var(--cds-layer-01);
   border-block-end: 1px solid var(--cds-border-subtle-01);
-  inset-block-start: 0;
-  height: var(--header-height);
 
   &__title {
     margin-top: 0.4rem;

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 06de60ff49c4568faa5748bb42ebf7c3a967027b..bec52b805c0489034b9208f9d7800ff1b09ec112 100644 (file)
--- 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
@@ -3,22 +3,17 @@ $inline-max-size: 22.75rem;
 $inline-min-size: 20rem;
 
 .notification-panel {
-  --header-height: 4.5625rem;
-  --panel-height: #{$block-size};
-  --panel-max-width: #{$inline-max-size};
-  --panel-min-width: #{$inline-min-size};
-
   position: fixed;
   z-index: 2;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
   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: $inline-min-size;
+  block-size: $block-size;
+  max-block-size: calc(100vh - 3rem);
+  inline-size: $inline-max-size;
   inset-block-start: 3rem;
   inset-inline-end: 0;
-  max-block-size: $block-size;
-  max-inline-size: $inline-max-size;
 }