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>
(cherry picked from commit ea55a0b33db2990a67dca10a7a9bc476096cd4ee)

Conflicts:
src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.scss
src/pybind/mgr/dashboard/frontend/src/app/shared/components/pwd-expiration-notification/pwd-expiration-notification.component.spec.ts
src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.html
src/pybind/mgr/dashboard/frontend/src/app/shared/components/telemetry-notification/telemetry-notification.component.spec.ts
src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss

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 78884d1a4b9acb69936450a934946138894717e2..4f1575bd9e960f559540a3acf58f6e27fb9bf03b 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,6 +8,7 @@
 
 .container-fluid {
   overflow: auto;
+  position: absolute;
 }
 
 ::ng-deep #toast-container {

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 161e21db9bf3a71798fbd5e3c9b0021760d0f1ec..e20f4925cf787388ccdef9af4f72ca27a8081424 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,272 +1,275 @@
-<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 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>
+  <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>
 
-    <a class="navbar-brand ml-2"
-       href="#">
-      <img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
-           alt="Ceph" />
-    </a>
+      <a class="navbar-brand ml-2"
+         href="#">
+        <img src="assets/Ceph_Logo_Standard_RGB_White_120411_fa.png"
+             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"
-          [collapse]="displayedSubMenu !== 'cluster'"
-          [isAnimated]="true">
-        <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">Inventory</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"
-          [collapse]="displayedSubMenu !== 'block'"
-          [isAnimated]="true">
-        <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"
+            [collapse]="displayedSubMenu !== 'cluster'"
+            [isAnimated]="true">
+          <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">Inventory</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"
+            [collapse]="displayedSubMenu !== 'block'"
+            [isAnimated]="true">
+          <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">Filesystems</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"
-          [collapse]="displayedSubMenu !== 'rgw'"
-          [isAnimated]="true">
-        <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">Filesystems</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"
+            [collapse]="displayedSubMenu !== 'rgw'"
+            [isAnimated]="true">
+          <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 38aa60e2f505fc119bcdc22331e1f26276b6f30d..b2537a76960aba469e0b9758023465b3a5464f4c 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 @@
 @import 'defaults';
 
+/* --------------------------------------------------
+   MAIN NAVBAR STYLE
+--------------------------------------------------- */
+
+.cd-navbar-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+}
+
 /* ---------------------------------------------------
     NAVBAR STYLE
 --------------------------------------------------- */
@@ -146,18 +157,19 @@ $sidebar-width: 200px;
 
 .wrapper {
   display: flex;
+  height: 100%;
   width: 100%;
 
   #sidebar {
     width: $sidebar-width;
-    top: $navbar-height;
     background: $color-navbar-bg;
     overflow-y: auto;
-    position: fixed;
+    position: relative;
     bottom: 0;
     left: 0;
     z-index: 999;
     color: #fff;
+    height: auto;
     transition: all 0.3s;
 
     &.active {
@@ -240,8 +252,7 @@ $sidebar-width: 200px;
 #content {
   width: calc(100% - #{$sidebar-width});
   transition: all 0.3s;
-  position: absolute;
-  top: $navbar-height;
+  position: relative;
   bottom: 0;
   right: 0;
 
@@ -249,27 +260,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: $top-notification-height * $i;
-    }
-
-    #sidebar {
-      top: $navbar-height + $top-notification-height * $i;
-    }
-
-    #content {
-      top: $navbar-height + $top-notification-height * $i;
-    }
-
-    cd-notifications-sidebar {
-      top: $navbar-height + $top-notification-height * $i + 10px;
-    }
-  }
-}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.html
index 2fbe5d7f87d3ca918f650716d76944c28e8a739a..0b8d33d0e758db5dbe24ec66f372dbb0171f08cb 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.html
@@ -1,4 +1,5 @@
-<cd-alert-panel *ngIf="motd"
+<cd-alert-panel class="no-margin-bottom"
+                *ngIf="motd"
                 size="slim"
                 [showTitle]="false"
                 [type]="motd.severity"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..a588a02ec156a1850f11dd856be46ded973d1ae8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/motd/motd.component.scss
@@ -0,0 +1,5 @@
+.no-margin-bottom {
+  ::ng-deep .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 5a43e92e1dce42477e1c61989edeebda1178e9f4..4076d77d16f5e26ea0d4e268c0b5b0bcd2b6b206 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,8 +1,10 @@
-<alert class="no-margin-bottom"
-       type="{{ alertType }}"
-       *ngIf="displayNotification"
-       [dismissible]="true"
-       (onClose)="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"
@@ -11,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>
-</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 85467dd1700f0d21c50036cc050a22275eb1c125..a588a02ec156a1850f11dd856be46ded973d1ae8 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,5 @@
-::ng-deep .no-margin-bottom .alert {
-  margin-bottom: 0;
+.no-margin-bottom {
+  ::ng-deep .alert {
+    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 7ebd64075eb2638f947bf237ce047d2dd64f4cd2..fee50e43c4d03097b69f52fcb44e42b995dea8c4 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
@@ -11,6 +11,7 @@ import { AlertModule } from 'ngx-bootstrap/alert';
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 
 import { SettingsService } from '../../api/settings.service';
+import { AlertPanelComponent } from '../../components/alert-panel/alert-panel.component';
 import { AuthStorageService } from '../../services/auth-storage.service';
 import { PwdExpirationNotificationComponent } from './pwd-expiration-notification.component';
 
@@ -31,7 +32,7 @@ describe('PwdExpirationNotificationComponent', () => {
   };
 
   configureTestBed({
-    declarations: [PwdExpirationNotificationComponent, FakeComponent],
+    declarations: [PwdExpirationNotificationComponent, FakeComponent, AlertPanelComponent],
     imports: [
       AlertModule.forRoot(),
       HttpClientTestingModule,

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 c713d4c7b6db19f849bfbbda9b821492a8e60260..d6c6607ad8b0ba82c3b7a1ed29afa59c0319c0c3 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 474493cc991b76398562f10efcf357924d04c431..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,10 +1,12 @@
-<alert class="no-margin-bottom"
-       type="warning"
-       *ngIf="displayNotification"
-       (close)="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>
-</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 3f30ac79c7fa1eaac36ad8e373f2dc844b52c1eb..c7ee2dd07ee82dfa07b6f3f001fac44182c2cee6 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,7 +1,9 @@
 @import 'defaults';
 
-::ng-deep cd-telemetry-notification .no-margin-bottom {
-  margin-bottom: 0;
+.no-margin-bottom {
+  ::ng-deep .alert {
+    margin-bottom: 0;
+  }
 }
 
 .activate-button {

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 d500f6b4bb998bde29f41a6a8dc980298cffa3ba..62137615b84f4f844fc2b7fbcf77e76cb866da7a 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
@@ -14,6 +14,7 @@ import { PipesModule } from '../../pipes/pipes.module';
 import { AuthStorageService } from '../../services/auth-storage.service';
 import { NotificationService } from '../../services/notification.service';
 import { TelemetryNotificationService } from '../../services/telemetry-notification.service';
+import { AlertPanelComponent } from '../alert-panel/alert-panel.component';
 import { TelemetryNotificationComponent } from './telemetry-notification.component';
 
 describe('TelemetryActivationNotificationComponent', () => {
@@ -40,7 +41,7 @@ describe('TelemetryActivationNotificationComponent', () => {
   };
 
   configureTestBed({
-    declarations: [TelemetryNotificationComponent],
+    declarations: [TelemetryNotificationComponent, AlertPanelComponent],
     imports: [AlertModule.forRoot(), HttpClientTestingModule, ToastrModule.forRoot(), PipesModule],
     providers: [MgrModuleService, UserService, i18nProviders]
   });
@@ -92,7 +93,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 6b38b75866441ccef55466906dd59bf65104e615..d3800de4a34f1257e8147429b26cbb6ffa7fc275 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
@@ -16,6 +16,7 @@ import { TelemetryNotificationService } from '../../services/telemetry-notificat
 })
 export class TelemetryNotificationComponent implements OnInit, OnDestroy {
   displayNotification = false;
+  notificationSeverity = 'warning';
 
   constructor(
     private mgrModuleService: MgrModuleService,
@@ -50,7 +51,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.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
index f4a9a6134bbfabffc63873104f0e332c7ba923a0..38ce1daa17eca0ff0295658dc7bd0a030218e0d0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults.scss
@@ -118,7 +118,6 @@ $color-nav-active-link-bg: $color-primary !default;
 $color-nav-border-top-collapse: $color-white-gray !default;
 
 $navbar-height: 43px;
-$top-notification-height: 37.6px;
 
 /*Helper*/
 $color-helper-bg: $color-primary !default;