From: Volker Theile Date: Tue, 25 Jan 2022 11:47:04 +0000 (+0100) Subject: mgr/dashboard: Notification banners at the top of the UI have fixed height X-Git-Tag: v15.2.17~102^2 X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=aa504b4b917ede1c4bddac1b1804b87db86571ae;p=ceph.git 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 (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 78884d1a4b9..4f1575bd9e9 100644 --- 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 161e21db9bf..e20f4925cf7 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,272 +1,275 @@ - - - - +
+ + + + -
- +
-
- - +
+ + - -
- + +
+ +
-
- -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -     - - - - -
  • - - Dashboard  - - + +
  • +
    • - - -
  • - - Cluster - - +
  • +
    • - - -
  • - Pools +
  • + +
    • +
  • +
    • +
  • + +
    • +     - -
  • - - Block - + + + +
  • + + Dashboard  + + +
    • - - + +
  • + + Block + - -
  • - NFS -
    • + + + + +
  • + NFS +
    • + + +
  • + Filesystems +
    • + + +
  • + + Object Gateway + + +
    • + + + +
    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 38aa60e2f50..b2537a76960 100644 --- 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 2fbe5d7f87d..0b8d33d0e75 100644 --- 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 @@ - +
    Your password will expire in less than 1 day. Click Your password will expire in {{ expirationDays }} day(s). Click here to change it now.
    - +     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 85467dd1700..a588a02ec15 100644 --- 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 7ebd64075eb..fee50e43c4d 100644 --- 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 c713d4c7b6d..d6c6607ad8b 100644 --- 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 474493cc991..9af7958370a 100644 --- 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 @@ - +
    The Ceph community needs your help to continue improving: please Activate the Telemetry module.
    -     - +     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 3f30ac79c7f..c7ee2dd07ee 100644 --- 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 d500f6b4bb9..62137615b84 100644 --- 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 6b38b758664..d3800de4a34 100644 --- 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 f4a9a6134bb..38ce1daa17e 100644 --- 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;