From: Waad AlKhoury Date: Mon, 17 Jan 2022 19:45:58 +0000 (+0100) Subject: mgr/dashboard: Notification banners at the top of the UI have fixed height X-Git-Tag: v18.0.0~1544^2 X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=ea55a0b33db2990a67dca10a7a9bc476096cd4ee;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 --- 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 dfc7912d8156d..7ec90d43ec9e3 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,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 a98f042c1c379..0e2325dd60254 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,269 +1,271 @@ - - - - +
+ + + + +
+ +
-
- - +
+ + - -
- + +
+ +
-
- -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -     - - - - -
  • - - Dashboard  - - + +
  • +
    • - - -
  • - - Cluster - - +
  • +
    • - - -
  • - Pools +
  • + +
    • +
  • +
    • +
  • + +
    • +     - -
  • - - Block - + + + +
  • + + Dashboard  + + +
    • - - + +
  • + + Block + - -
  • - NFS -
    • + + + + +
  • + NFS +
    • + + +
  • + File Systems +
    • + + +
  • + + 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 a990292aa70e0..f0ce4cd92def7 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 @@ @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 2c4726a0e7409..6b89d6d3e38a4 100644 --- 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 b4a30264cb39b..b1bc5150ab2ee 100644 --- 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 @@ - +
    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 96dbaa6573c9f..dc5cdeb84365f 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,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 3cdfbd730dcc8..597f5bab32761 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 @@ -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 a894637ef68f7..3dd8b54551496 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 ee485d2f389e4..9af7958370a79 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,9 +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 569f1e0c4a4a9..cf8aa33d3bae4 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,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 e40d38a110570..e946e79d87e6b 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 @@ -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 852189020031b..33174ce11d2c6 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 @@ -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 1e203af7c8c48..e4a6089a9a5d0 100644 --- 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;