mgr/dashboard: Notification banners at the top of the UI have fixed height

Fixes: https://tracker.ceph.com/issues/51575
Signed-off-by: Waad AlKhoury <walkhour@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
index dfc7912d8156ddea4df6f09ca3393af84973a1dc..7ec90d43ec9e313e8b1e8942a72ea84ec6bc968e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/layouts/workbench-layout/workbench-layout.component.scss
@@ -8,4 +8,5 @@
 
 .container-fluid {
   overflow: auto;
+  position: absolute;
 }

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 a98f042c1c3799be5da058ae4354932c6ebd85ea..0e2325dd602543a085f3ca30ff41594f5e1e50e3 100644 (file)
--- 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,269 +1,271 @@
-<cd-pwd-expiration-notification></cd-pwd-expiration-notification>
-<cd-telemetry-notification></cd-telemetry-notification>
-<cd-motd></cd-motd>
-<cd-notifications-sidebar></cd-notifications-sidebar>
+<div class="cd-navbar-main">
+  <cd-pwd-expiration-notification></cd-pwd-expiration-notification>
+  <cd-telemetry-notification></cd-telemetry-notification>
+  <cd-motd></cd-motd>
+  <cd-notifications-sidebar></cd-notifications-sidebar>
+  <div class="cd-navbar-top">
+    <nav class="navbar navbar-expand-md navbar-dark cd-navbar-brand">
+      <button class="btn btn-link py-0"
+              (click)="showMenuSidebar = !showMenuSidebar">
+        <i class="fa fa-bars fa-2x"
+           aria-hidden="true"></i>
+      </button>
 
-<div class="cd-navbar-top">
-  <nav class="navbar fixed-top navbar-expand-md navbar-dark cd-navbar-brand">
-    <button class="btn btn-link py-0"
-            (click)="showMenuSidebar = !showMenuSidebar">
-      <i class="fa fa-bars fa-2x"
-         aria-hidden="true"></i>
-    </button>
-
-    <a class="navbar-brand ml-2"
-       href="#">
-      <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
-           alt="Ceph" />
-    </a>
+      <a class="navbar-brand ml-2"
+         href="#">
+        <img src="assets/Ceph_Ceph_Logo_with_text_white.svg"
+             alt="Ceph" />
+      </a>
 
-    <button type="button"
-            class="navbar-toggler"
-            (click)="toggleRightSidebar()">
-      <span i18n
-            class="sr-only">Toggle navigation</span>
-      <span class="">
-        <i class="fa fa-navicon fa-lg"></i>
-      </span>
-    </button>
+      <button type="button"
+              class="navbar-toggler"
+              (click)="toggleRightSidebar()">
+        <span i18n
+              class="sr-only">Toggle navigation</span>
+        <span class="">
+          <i class="fa fa-navicon fa-lg"></i>
+        </span>
+      </button>
 
-    <div class="collapse navbar-collapse"
-         [ngClass]="{'show': rightSidebarOpen}">
-      <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
-        <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
-      </ul>
-    </div>
-  </nav>
-</div>
+      <div class="collapse navbar-collapse"
+           [ngClass]="{'show': rightSidebarOpen}">
+        <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
+          <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
+        </ul>
+      </div>
+    </nav>
+  </div>
 
-<div class="wrapper">
-  <!-- Content -->
-  <nav id="sidebar"
-       [ngClass]="{'active': !showMenuSidebar}">
-    <ngx-simplebar [options]="simplebar">
-      <ul class="list-unstyled components cd-navbar-primary">
-        <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
-      </ul>
-    </ngx-simplebar>
-  </nav>
+  <div class="wrapper">
+    <!-- Content -->
+    <nav id="sidebar"
+         [ngClass]="{'active': !showMenuSidebar}">
+      <ngx-simplebar [options]="simplebar">
+        <ul class="list-unstyled components cd-navbar-primary">
+          <ng-container *ngTemplateOutlet="cd_menu"> </ng-container>
+        </ul>
+      </ngx-simplebar>
+    </nav>
 
-  <!-- Page Content -->
-  <div id="content"
-       [ngClass]="{'active': !showMenuSidebar}">
-    <ng-content></ng-content>
+    <!-- Page Content -->
+    <div id="content"
+         [ngClass]="{'active': !showMenuSidebar}">
+      <ng-content></ng-content>
+    </div>
   </div>
-</div>
 
-<ng-template #cd_utilities>
-  <li class="nav-item ">
-    <cd-language-selector class="cd-navbar"></cd-language-selector>
-  </li>
-  <li class="nav-item ">
-    <cd-notifications class="cd-navbar"
-                      (click)="toggleRightSidebar()"></cd-notifications>
-  </li>
-  <li class="nav-item ">
-    <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
-  </li>
-  <li class="nav-item ">
-    <cd-administration class="cd-navbar"></cd-administration>
-  </li>
-  <li class="nav-item ">
-    <cd-identity class="cd-navbar"></cd-identity>
-  </li>
-</ng-template>
-
-<ng-template #cd_menu>
-  <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
-    <!-- Dashboard -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_dashboard">
-      <a routerLink="/dashboard"
-         class="nav-link">
-        <span i18n>Dashboard</span>&nbsp;
-        <i [ngClass]="[icons.health]"
-           [ngStyle]="summaryData?.health_status | healthColor"></i>
-      </a>
+  <ng-template #cd_utilities>
+    <li class="nav-item">
+      <cd-language-selector class="cd-navbar"></cd-language-selector>
     </li>
-
-    <!-- Cluster -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_cluster"
-        *ngIf="permissions.hosts.read || permissions.monitor.read ||
-        permissions.osd.read || permissions.configOpt.read ||
-        permissions.log.read || permissions.prometheus.read">
-      <a (click)="toggleSubMenu('cluster')"
-         class="nav-link dropdown-toggle"
-         [attr.aria-expanded]="displayedSubMenu == 'cluster'"
-         aria-controls="collapseBasic">
-        <ng-container i18n>Cluster</ng-container>
-      </a>
-      <ul class="list-unstyled"
-          [ngbCollapse]="displayedSubMenu !== 'cluster'">
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_hosts"
-            *ngIf="permissions.hosts.read">
-          <a i18n
-             routerLink="/hosts">Hosts</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_cluster_inventory"
-            *ngIf="permissions.hosts.read">
-          <a i18n
-             routerLink="/inventory">Physical Disks</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_cluster_monitor"
-            *ngIf="permissions.monitor.read">
-          <a i18n
-             routerLink="/monitor/">Monitors</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_cluster_services"
-            *ngIf="permissions.hosts.read">
-          <a i18n
-             routerLink="/services/">Services</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_osds"
-            *ngIf="permissions.osd.read">
-          <a i18n
-             routerLink="/osd">OSDs</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_configuration"
-            *ngIf="permissions.configOpt.read">
-          <a i18n
-             routerLink="/configuration">Configuration</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_crush"
-            *ngIf="permissions.osd.read">
-          <a i18n
-             routerLink="/crush-map">CRUSH map</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_modules"
-            *ngIf="permissions.configOpt.read">
-          <a i18n
-             routerLink="/mgr-modules">Manager Modules</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_log"
-            *ngIf="permissions.log.read">
-          <a i18n
-             routerLink="/logs">Logs</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_monitoring"
-            *ngIf="permissions.prometheus.read">
-          <a routerLink="/monitoring">
-            <ng-container i18n>Monitoring</ng-container>
-            <small *ngIf="prometheusAlertService.activeAlerts > 0"
-                   class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
-          </a>
-        </li>
-      </ul>
+    <li class="nav-item">
+      <cd-notifications class="cd-navbar"
+                        (click)="toggleRightSidebar()"></cd-notifications>
     </li>
-
-    <!-- Pools -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_pool"
-        *ngIf="permissions.pool.read">
-      <a class="nav-link"
-         i18n
-         routerLink="/pool">Pools</a>
+    <li class="nav-item">
+      <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
+    </li>
+    <li class="nav-item">
+      <cd-administration class="cd-navbar"></cd-administration>
     </li>
+    <li class="nav-item">
+      <cd-identity class="cd-navbar"></cd-identity>
+    </li>
+  </ng-template>
 
-    <!-- Block -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_block"
-        *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
-        (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
-      <a class="nav-link dropdown-toggle"
-         (click)="toggleSubMenu('block')"
-         [attr.aria-expanded]="displayedSubMenu == 'block'"
-         aria-controls="collapseBasic"
-         [ngStyle]="blockHealthColor()">
-        <ng-container i18n>Block</ng-container>
-      </a>
+  <ng-template #cd_menu>
+    <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
+      <!-- Dashboard -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_dashboard">
+        <a routerLink="/dashboard"
+           class="nav-link">
+          <span i18n>Dashboard</span>&nbsp;
+          <i [ngClass]="[icons.health]"
+             [ngStyle]="summaryData?.health_status | healthColor"></i>
+        </a>
+      </li>
 
-      <ul class="list-unstyled"
-          [ngbCollapse]="displayedSubMenu !== 'block'">
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_block_images"
-            *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
-          <a i18n
-             routerLink="/block/rbd">Images</a>
-        </li>
+      <!-- Cluster -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_cluster"
+          *ngIf="permissions.hosts.read || permissions.monitor.read ||
+          permissions.osd.read || permissions.configOpt.read ||
+          permissions.log.read || permissions.prometheus.read">
+        <a (click)="toggleSubMenu('cluster')"
+           class="nav-link dropdown-toggle"
+           [attr.aria-expanded]="displayedSubMenu == 'cluster'"
+           aria-controls="collapseBasic">
+          <ng-container i18n>Cluster</ng-container>
+        </a>
+        <ul class="list-unstyled"
+            [ngbCollapse]="displayedSubMenu !== 'cluster'">
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_hosts"
+              *ngIf="permissions.hosts.read">
+            <a i18n
+               routerLink="/hosts">Hosts</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_cluster_inventory"
+              *ngIf="permissions.hosts.read">
+            <a i18n
+               routerLink="/inventory">Physical Disks</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_cluster_monitor"
+              *ngIf="permissions.monitor.read">
+            <a i18n
+               routerLink="/monitor/">Monitors</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_cluster_services"
+              *ngIf="permissions.hosts.read">
+            <a i18n
+               routerLink="/services/">Services</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_osds"
+              *ngIf="permissions.osd.read">
+            <a i18n
+               routerLink="/osd">OSDs</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_configuration"
+              *ngIf="permissions.configOpt.read">
+            <a i18n
+               routerLink="/configuration">Configuration</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_crush"
+              *ngIf="permissions.osd.read">
+            <a i18n
+               routerLink="/crush-map">CRUSH map</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_modules"
+              *ngIf="permissions.configOpt.read">
+            <a i18n
+               routerLink="/mgr-modules">Manager Modules</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_log"
+              *ngIf="permissions.log.read">
+            <a i18n
+               routerLink="/logs">Logs</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_monitoring"
+              *ngIf="permissions.prometheus.read">
+            <a routerLink="/monitoring">
+              <ng-container i18n>Monitoring</ng-container>
+              <small *ngIf="prometheusAlertService.activeAlerts > 0"
+                     class="badge badge-danger">{{ prometheusAlertService.activeAlerts }}</small>
+            </a>
+          </li>
+        </ul>
+      </li>
 
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_block_mirroring"
-            *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
-          <a routerLink="/block/mirroring">
-            <ng-container i18n>Mirroring</ng-container>
-            <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
-                   class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
-            <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
-                   class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
-          </a>
-        </li>
+      <!-- Pools -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_pool"
+          *ngIf="permissions.pool.read">
+        <a class="nav-link"
+           i18n
+           routerLink="/pool">Pools</a>
+      </li>
 
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_block_iscsi"
-            *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
-          <a i18n
-             routerLink="/block/iscsi">iSCSI</a>
-        </li>
-      </ul>
-    </li>
+      <!-- Block -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_block"
+          *ngIf="(permissions.rbdImage.read || permissions.rbdMirroring.read || permissions.iscsi.read) &&
+          (enabledFeature.rbd || enabledFeature.mirroring || enabledFeature.iscsi)">
+        <a class="nav-link dropdown-toggle"
+           (click)="toggleSubMenu('block')"
+           [attr.aria-expanded]="displayedSubMenu == 'block'"
+           aria-controls="collapseBasic"
+           [ngStyle]="blockHealthColor()">
+          <ng-container i18n>Block</ng-container>
+        </a>
 
-    <!-- NFS -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_nfs"
-        *ngIf="permissions.nfs.read && enabledFeature.nfs">
-      <a i18n
-         class="nav-link"
-         routerLink="/nfs">NFS</a>
-    </li>
+        <ul class="list-unstyled"
+            [ngbCollapse]="displayedSubMenu !== 'block'">
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_block_images"
+              *ngIf="permissions.rbdImage.read && enabledFeature.rbd">
+            <a i18n
+               routerLink="/block/rbd">Images</a>
+          </li>
 
-    <!-- Filesystem -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_cephfs"
-        *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
-      <a i18n
-         class="nav-link"
-         routerLink="/cephfs">File Systems</a>
-    </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_block_mirroring"
+              *ngIf="permissions.rbdMirroring.read && enabledFeature.mirroring">
+            <a routerLink="/block/mirroring">
+              <ng-container i18n>Mirroring</ng-container>
+              <small *ngIf="summaryData?.rbd_mirroring?.warnings !== 0"
+                     class="badge badge-warning">{{ summaryData?.rbd_mirroring?.warnings }}</small>
+              <small *ngIf="summaryData?.rbd_mirroring?.errors !== 0"
+                     class="badge badge-danger">{{ summaryData?.rbd_mirroring?.errors }}</small>
+            </a>
+          </li>
 
-    <!-- Object Gateway -->
-    <li routerLinkActive="active"
-        class="nav-item tc_menuitem_rgw"
-        *ngIf="permissions.rgw.read && enabledFeature.rgw">
-      <a class="nav-link dropdown-toggle"
-         (click)="toggleSubMenu('rgw')"
-         [attr.aria-expanded]="displayedSubMenu == 'rgw'"
-         aria-controls="collapseBasic">
-        <ng-container i18n>Object Gateway</ng-container>
-      </a>
-      <ul class="list-unstyled"
-          [ngbCollapse]="displayedSubMenu !== 'rgw'">
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_rgw_daemons">
-          <a i18n
-             routerLink="/rgw/daemon">Daemons</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_rgw_users">
-          <a i18n
-             routerLink="/rgw/user">Users</a>
-        </li>
-        <li routerLinkActive="active"
-            class="tc_submenuitem tc_submenuitem_rgw_buckets">
-          <a i18n
-             routerLink="/rgw/bucket">Buckets</a>
-        </li>
-      </ul>
-    </li>
-  </ng-container>
-</ng-template>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_block_iscsi"
+              *ngIf="permissions.iscsi.read && enabledFeature.iscsi">
+            <a i18n
+               routerLink="/block/iscsi">iSCSI</a>
+          </li>
+        </ul>
+      </li>
+
+      <!-- NFS -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_nfs"
+          *ngIf="permissions.nfs.read && enabledFeature.nfs">
+        <a i18n
+           class="nav-link"
+           routerLink="/nfs">NFS</a>
+      </li>
+
+      <!-- Filesystem -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_cephfs"
+          *ngIf="permissions.cephfs.read && enabledFeature.cephfs">
+        <a i18n
+           class="nav-link"
+           routerLink="/cephfs">File Systems</a>
+      </li>
+
+      <!-- Object Gateway -->
+      <li routerLinkActive="active"
+          class="nav-item tc_menuitem_rgw"
+          *ngIf="permissions.rgw.read && enabledFeature.rgw">
+        <a class="nav-link dropdown-toggle"
+           (click)="toggleSubMenu('rgw')"
+           [attr.aria-expanded]="displayedSubMenu == 'rgw'"
+           aria-controls="collapseBasic">
+          <ng-container i18n>Object Gateway</ng-container>
+        </a>
+        <ul class="list-unstyled"
+            [ngbCollapse]="displayedSubMenu !== 'rgw'">
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_rgw_daemons">
+            <a i18n
+               routerLink="/rgw/daemon">Daemons</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_rgw_users">
+            <a i18n
+               routerLink="/rgw/user">Users</a>
+          </li>
+          <li routerLinkActive="active"
+              class="tc_submenuitem tc_submenuitem_rgw_buckets">
+            <a i18n
+               routerLink="/rgw/bucket">Buckets</a>
+          </li>
+        </ul>
+      </li>
+    </ng-container>
+  </ng-template>
+
+</div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index a990292aa70e0d7f46af8ff4a28c1ed8086d4d6b..f0ce4cd92def728178da00db72fbf50746a70cb5 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -1,5 +1,16 @@
 @use './src/styles/vendor/variables' as vv;
 
+/* --------------------------------------------------
+   MAIN NAVBAR STYLE
+--------------------------------------------------- */
+
+.cd-navbar-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+}
+
 /* ---------------------------------------------------
     NAVBAR STYLE
 --------------------------------------------------- */
@@ -146,16 +157,17 @@ $sidebar-width: 200px;
 
 .wrapper {
   display: flex;
+  height: 100%;
   width: 100%;
 
   #sidebar {
     background: vv.$secondary;
     bottom: 0;
     color: vv.$white;
+    height: auto;
     left: 0;
     overflow-y: auto;
-    position: fixed;
-    top: vv.$navbar-height;
+    position: relative;
     transition: all 0.3s;
     width: $sidebar-width;
     z-index: 999;
@@ -240,9 +252,8 @@ $sidebar-width: 200px;
 
 #content {
   bottom: 0;
-  position: absolute;
+  position: relative;
   right: 0;
-  top: vv.$navbar-height;
   transition: all 0.3s;
   width: calc(100% - #{$sidebar-width});
 
@@ -250,27 +261,3 @@ $sidebar-width: 200px;
     width: 100vw;
   }
 }
-
-/* ---------------------------------------------------
-    topNotification settings
---------------------------------------------------- */
-
-@for $i from 1 through 2 {
-  :host.top-notification-#{$i} {
-    .cd-navbar-top .cd-navbar-brand {
-      top: vv.$top-notification-height * $i;
-    }
-
-    #sidebar {
-      top: vv.$navbar-height + vv.$top-notification-height * $i;
-    }
-
-    #content {
-      top: vv.$navbar-height + vv.$top-notification-height * $i;
-    }
-
-    cd-notifications-sidebar {
-      top: vv.$navbar-height + vv.$top-notification-height * $i + 10px;
-    }
-  }
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss
index 2c4726a0e7409ca60005ecd0d22cdb1e213ad1e4..6b89d6d3e38a46b51b4504337d97050d01d120b7 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/alert-panel/alert-panel.component.scss
@@ -6,3 +6,7 @@
 .alert-panel-title {
   font-weight: bold;
 }
+
+.alert {
+  margin-bottom: 0;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
index b4a30264cb39bae3ae376fff160883c886adc81e..b1bc5150ab2ee6b02e6315998205cbfd6a6803ce 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
@@ -1,7 +1,10 @@
-<ngb-alert class="no-margin-bottom"
-           type="{{ alertType }}"
-           *ngIf="displayNotification"
-           (closed)="close($event)">
+<cd-alert-panel class="no-margin-bottom"
+                [type]="alertType"
+                *ngIf="displayNotification"
+                [showTitle]="false"
+                size="slim"
+                [dismissible]="alertType !== 'danger'"
+                (dismissed)="onDismissed()">
   <div *ngIf="expirationDays === 0"
        i18n>Your password will expire in <strong>less than 1</strong> day. Click
     <a routerLink="/user-profile/edit"
@@ -10,4 +13,4 @@
        i18n>Your password will expire in <strong>{{ expirationDays }}</strong> day(s). Click
   <a routerLink="/user-profile/edit"
      class="alert-link">here</a> to change it now.</div>
-</ngb-alert>
+</cd-alert-panel>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss
index 96dbaa6573c9fcd1985c49c1740235b18617c556..dc5cdeb84365f45d55f7c48b1497377c0cfdd2ea 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss
@@ -1,3 +1,3 @@
-::ng-deep cd-pwd-expiration-notification .no-margin-bottom {
+.no-margin-bottom {
   margin-bottom: 0;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
index 3cdfbd730dcc8ec293b406bd9b0300ffdb8372e1..597f5bab32761d235612af2ebf849421f150c4ba 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
@@ -8,6 +8,7 @@ import { NgbAlertModule } from '@ng-bootstrap/ng-bootstrap';
 import { of as observableOf } from 'rxjs';
 
 import { SettingsService } from '~/app/shared/api/settings.service';
+import { AlertPanelComponent } from '~/app/shared/components/alert-panel/alert-panel.component';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { PwdExpirationNotificationComponent } from './pwd-expiration-notification.component';
@@ -29,7 +30,7 @@ describe('PwdExpirationNotificationComponent', () => {
   };
 
   configureTestBed({
-    declarations: [PwdExpirationNotificationComponent, FakeComponent],
+    declarations: [PwdExpirationNotificationComponent, FakeComponent, AlertPanelComponent],
     imports: [NgbAlertModule, HttpClientTestingModule, RouterTestingModule.withRoutes(routes)],
     providers: [SettingsService, AuthStorageService]
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts
index a894637ef68f767fc66c8a24af48b1984cf0ac18..3dd8b545514961a27533c985e3411d22acb3f970 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.ts
@@ -48,7 +48,7 @@ export class PwdExpirationNotificationComponent implements OnInit, OnDestroy {
     return Math.floor((expiration.valueOf() - current.valueOf()) / (1000 * 3600 * 24));
   }
 
-  close() {
+  onDismissed(): void {
     this.authStorageService.isPwdDisplayedSource.next(false);
     this.displayNotification = false;
   }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
index ee485d2f389e4a9106160b6a9ca929a86342315a..9af7958370a79d6f167dc362b1720b8f7bcd06f0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
@@ -1,9 +1,12 @@
-<ngb-alert class="no-margin-bottom"
-           type="warning"
-           *ngIf="displayNotification"
-           (closed)="close($event)">
+<cd-alert-panel *ngIf="displayNotification"
+                class="no-margin-bottom"
+                [showTitle]="false"
+                size="slim"
+                [type]="notificationSeverity"
+                [dismissible]="notificationSeverity !== 'danger'"
+                (dismissed)="onDismissed()">
   <div i18n>The Ceph community needs your help to continue improving: please
     <a routerLink="/telemetry"
        class="btn activate-button alert-link activate-text">Activate</a> the
   <a href="https://docs.ceph.com/en/latest/mgr/telemetry/">Telemetry</a> module.</div>
-</ngb-alert>
+</cd-alert-panel>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
index 569f1e0c4a4a98eacd95954641b8f21197738a3d..cf8aa33d3bae4112a0515daa2e349b37f764a7b8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.scss
@@ -1,6 +1,6 @@
 @use './src/styles/vendor/variables' as vv;
 
-::ng-deep cd-telemetry-notification .no-margin-bottom {
+.no-margin-bottom {
   margin-bottom: 0;
 }
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.spec.ts
index e40d38a11057084cff17ec7f9f37f273a8c7298f..e946e79d87e6bde8789dfcba1059b864382a199d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.spec.ts
@@ -7,6 +7,7 @@ import { of } from 'rxjs';
 
 import { MgrModuleService } from '~/app/shared/api/mgr-module.service';
 import { UserService } from '~/app/shared/api/user.service';
+import { AlertPanelComponent } from '~/app/shared/components/alert-panel/alert-panel.component';
 import { Permissions } from '~/app/shared/models/permissions';
 import { PipesModule } from '~/app/shared/pipes/pipes.module';
 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
@@ -39,7 +40,7 @@ describe('TelemetryActivationNotificationComponent', () => {
   };
 
   configureTestBed({
-    declarations: [TelemetryNotificationComponent],
+    declarations: [TelemetryNotificationComponent, AlertPanelComponent],
     imports: [NgbAlertModule, HttpClientTestingModule, ToastrModule.forRoot(), PipesModule],
     providers: [MgrModuleService, UserService]
   });
@@ -91,7 +92,7 @@ describe('TelemetryActivationNotificationComponent', () => {
   it('should hide the notification if the user closes it', () => {
     spyOn(notificationService, 'show');
     fixture.detectChanges();
-    component.close();
+    component.onDismissed();
     expect(notificationService.show).toHaveBeenCalled();
     expect(localStorage.getItem('telemetry_notification_hidden')).toBe('true');
   });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts
index 852189020031bd5566361e4e3fdd69fcbb9dfd55..33174ce11d2c61263aeb9ab74f955f1e81f3899c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.ts
@@ -15,6 +15,7 @@ import { TelemetryNotificationService } from '~/app/shared/services/telemetry-no
 })
 export class TelemetryNotificationComponent implements OnInit, OnDestroy {
   displayNotification = false;
+  notificationSeverity = 'warning';
 
   constructor(
     private mgrModuleService: MgrModuleService,
@@ -48,7 +49,7 @@ export class TelemetryNotificationComponent implements OnInit, OnDestroy {
     return localStorage.getItem('telemetry_notification_hidden') === 'true';
   }
 
-  close() {
+  onDismissed(): void {
     this.telemetryNotificationService.setVisibility(false);
     localStorage.setItem('telemetry_notification_hidden', 'true');
     this.notificationService.show(

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index 1e203af7c8c4823f9a2a98da0f1c0e818c197d98..e4a6089a9a5d004997c5db5abe4367f7ff64cdac 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -108,4 +108,3 @@ $screen-md-max: calc(#{$screen-lg-min} - 1px) !default;
 $screen-lg-max: calc(#{$screen-xl-min} - 1px) !default;
 
 $navbar-height: 43px !default;
-$top-notification-height: 37.6px !default;