From fec59bec03195559a0f2589a397d2642a4045b27 Mon Sep 17 00:00:00 2001 From: Nizamudeen A Date: Thu, 13 Oct 2022 14:48:11 +0530 Subject: [PATCH] mgr/dashboard: migrate to bootstrap 5 Fixes: https://tracker.ceph.com/issues/57867 Signed-off-by: Nizamudeen A (cherry picked from commit 8ffb74f7f1d59260901e751f6556996d5f8d60f3) Conflicts: - src/pybind/mgr/dashboard/frontend/cypress/integration/block/mirroring.e2e-spec.ts Accept the current change (because the PR that introduced the change is not in quincy) - package-lock.json Generate a new package-lock.json --- .../cypress/integration/pools/pools.po.ts | 2 +- .../mgr/dashboard/frontend/package-lock.json | 91 ++++++++- .../mgr/dashboard/frontend/package.json | 8 +- ...scsi-target-discovery-modal.component.html | 28 ++- .../iscsi-target-form.component.html | 178 ++++++++--------- ...target-image-settings-modal.component.html | 2 +- .../app/ceph/block/iscsi/iscsi.component.html | 18 +- .../bootstrap-create-modal.component.html | 4 +- .../overview/overview.component.html | 97 ++++----- .../pool-edit-mode-modal.component.html | 2 +- .../rbd-configuration-form.component.html | 22 +-- .../rbd-details/rbd-details.component.html | 2 +- .../block/rbd-form/rbd-form.component.html | 18 +- .../rbd-namespace-form-modal.component.html | 2 +- .../cephfs-directories.component.html | 2 +- .../cephfs-tabs/cephfs-tabs.component.html | 2 +- .../configuration-details.component.html | 4 +- .../configuration-form.component.html | 2 +- .../create-cluster.component.html | 14 +- .../app/ceph/cluster/logs/logs.component.html | 62 +++--- .../mgr-module-form.component.html | 2 +- .../cluster/monitor/monitor.component.html | 78 ++++---- ...sd-devices-selection-groups.component.html | 4 +- ...osd-devices-selection-modal.component.html | 2 +- .../osd-flags-indiv-modal.component.html | 2 +- .../osd/osd-form/osd-form.component.html | 80 ++++---- .../osd/osd-list/osd-list.component.html | 6 +- .../osd-recv-speed-modal.component.html | 2 +- .../active-alert-list.component.ts | 2 +- .../prometheus-tabs.component.html | 4 +- .../rules-list/rules-list.component.ts | 2 +- .../silence-form/silence-form.component.html | 50 +++-- .../silence-matcher-modal.component.html | 6 +- .../service-form/service-form.component.html | 28 ++- .../info-group/info-group.component.html | 29 +-- .../info-group/info-group.component.scss | 2 +- .../nfs-form-client.component.html | 10 +- .../ceph/nfs/nfs-form/nfs-form.component.html | 10 +- .../crush-rule-form-modal.component.html | 6 +- ...ure-code-profile-form-modal.component.html | 34 ++-- .../pool/pool-form/pool-form.component.html | 130 ++++++------ .../rgw-bucket-form.component.html | 24 +-- .../rgw-config-modal.component.html | 6 +- .../rgw-user-capability-modal.component.html | 4 +- .../rgw-user-form.component.html | 186 ++++++++---------- .../rgw-user-s3-key-modal.component.html | 28 ++- .../rgw-user-subuser-modal.component.html | 16 +- .../rgw-user-swift-key-modal.component.html | 14 +- .../device-list/device-list.component.html | 2 +- .../shared/feedback/feedback.component.html | 2 +- .../login-password-form.component.html | 26 +-- .../app/core/auth/login/login.component.html | 12 +- .../auth/user-form/user-form.component.html | 32 ++- .../user-password-form.component.html | 26 +-- .../app/core/context/context.component.html | 4 +- .../login-layout/login-layout.component.scss | 2 +- .../navigation/about/about.component.html | 3 +- .../dashboard-help.component.html | 10 +- .../navigation/navigation.component.html | 8 +- .../navigation/navigation.component.scss | 1 + .../config-option.component.html | 22 +-- .../form-modal/form-modal.component.html | 2 +- .../components/grafana/grafana.component.html | 23 +-- .../components/helper/helper.component.html | 2 +- .../components/helper/helper.component.ts | 3 + .../loading-panel.component.html | 2 +- .../components/modal/modal.component.html | 5 +- .../notifications-sidebar.component.html | 17 +- .../notifications-sidebar.component.scss | 9 - .../refresh-selector.component.html | 12 +- .../select-badges.component.html | 6 +- .../components/select/select.component.html | 6 +- .../datatable/table/table.component.html | 24 +-- .../directives/form-loading.directive.ts | 11 +- .../services/notification.service.spec.ts | 6 +- .../shared/services/notification.service.ts | 2 +- .../mgr/dashboard/frontend/src/styles.scss | 50 +++++ .../src/styles/bootstrap-extends.scss | 15 +- .../src/styles/ceph-custom/_basics.scss | 35 ---- .../src/styles/ceph-custom/_buttons.scss | 40 +++- .../src/styles/ceph-custom/_forms.scss | 21 +- .../styles/defaults/_bootstrap-defaults.scss | 12 +- 82 files changed, 903 insertions(+), 877 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts index 98cee470eda99..7cca96aa8f466 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/integration/pools/pools.po.ts @@ -63,7 +63,7 @@ export class PoolPageHelper extends PageHelper { if (!apps || apps.length === 0) { return; } - cy.get('.float-left.mr-2.select-menu-edit').click(); + cy.get('.float-start.me-2.select-menu-edit').click(); cy.get('.popover-body').should('be.visible'); apps.forEach((app) => cy.get('.select-menu-item-content').contains(app).click()); } diff --git a/src/pybind/mgr/dashboard/frontend/package-lock.json b/src/pybind/mgr/dashboard/frontend/package-lock.json index acbb8d3ade7d7..d82ed21bcc2b5 100644 --- a/src/pybind/mgr/dashboard/frontend/package-lock.json +++ b/src/pybind/mgr/dashboard/frontend/package-lock.json @@ -4485,11 +4485,11 @@ "dev": true }, "@ng-bootstrap/ng-bootstrap": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-10.0.0.tgz", - "integrity": "sha512-Sz+QaxjuyJYJ+zyUbf0TevgcgVesCPQiiFiggEzxKjzY5R+Hvq3YgryLdXf2r/ryePL+C3FXCcmmKpTM5bfczQ==", + "version": "12.1.2", + "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-12.1.2.tgz", + "integrity": "sha512-p27c+mYVdHiJMYrj5hwClVJxLdiZxafAqlbw1sdJh2xJ1rGOe+H/kCf5YDRbhlHqRN+34Gr0RQqIUeD1I2V8hg==", "requires": { - "tslib": "^2.1.0" + "tslib": "^2.3.0" } }, "@ngtools/webpack": { @@ -4619,6 +4619,11 @@ "read-package-json-fast": "^2.0.1" } }, + "@popperjs/core": { + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz", + "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==" + }, "@protobufjs/aspromise": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz", @@ -6592,9 +6597,9 @@ "dev": true }, "bootstrap": { - "version": "4.6.1", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz", - "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==" + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0.tgz", + "integrity": "sha512-tmhPET9B9qCl8dCofvHeiIhi49iBt0EehmIsziZib65k1erBW1rHhj2s/2JsuQh5Pq+xz2E9bEbzp9B7xHG+VA==" }, "brace-expansion": { "version": "1.1.11", @@ -14514,6 +14519,78 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "esbuild-android-arm64": { + "version": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.15.11.tgz", + "integrity": "sha512-/hDubOg7BHOhUUsT8KUIU7GfZm5bihqssvqK5PfO4apag7YuObZRZSzViyEKcFn2tPeHx7RKbSBXvAopSHDZJQ==" + }, + "esbuild-darwin-64": { + "version": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.11.tgz", + "integrity": "sha512-1DqHD0ms3AhiwkKnjRUzmiW7JnaJJr5FKrPiR7xuyMwnjDqvNWDdMq4rKSD9OC0piFNK6n0LghsglNMe2MwJtA==" + }, + "esbuild-darwin-arm64": { + "version": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.15.11.tgz", + "integrity": "sha512-OMzhxSbS0lwwrW40HHjRCeVIJTURdXFA8c3GU30MlHKuPCcvWNUIKVucVBtNpJySXmbkQMDJdJNrXzNDyvoqvQ==" + }, + "esbuild-freebsd-64": { + "version": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.15.11.tgz", + "integrity": "sha512-8dKP26r0/Qyez8nTCwpq60QbuYKOeBygdgOAWGCRalunyeqWRoSZj9TQjPDnTTI9joxd3QYw3UhVZTKxO9QdRg==" + }, + "esbuild-freebsd-arm64": { + "version": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.15.11.tgz", + "integrity": "sha512-aSGiODiukLGGnSg/O9+cGO2QxEacrdCtCawehkWYTt5VX1ni2b9KoxpHCT9h9Y6wGqNHmXFnB47RRJ8BIqZgmQ==" + }, + "esbuild-linux-32": { + "version": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.15.11.tgz", + "integrity": "sha512-lsrAfdyJBGx+6aHIQmgqUonEzKYeBnyfJPkT6N2dOf1RoXYYV1BkWB6G02tjsrz1d5wZzaTc3cF+TKmuTo/ZwA==" + }, + "esbuild-linux-arm": { + "version": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.15.11.tgz", + "integrity": "sha512-TJllTVk5aSyqPFvvcHTvf6Wu1ZKhWpJ/qNmZO8LL/XeB+LXCclm7HQHNEIz6MT7IX8PmlC1BZYrOiw2sXSB95A==" + }, + "esbuild-linux-arm64": { + "version": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.15.11.tgz", + "integrity": "sha512-uhcXiTwTmD4OpxJu3xC5TzAAw6Wzf9O1XGWL448EE9bqGjgV1j+oK3lIHAfsHnuIn8K4nDW8yjX0Sv5S++oRuw==" + }, + "esbuild-linux-mips64le": { + "version": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.15.11.tgz", + "integrity": "sha512-WD61y/R1M4BLe4gxXRypoQ0Ci+Vjf714QYzcPNkiYv5I8K8WDz2ZR8Bm6cqKxd6rD+e/rZgPDbhQ9PCf7TMHmA==" + }, + "esbuild-linux-ppc64le": { + "version": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.15.11.tgz", + "integrity": "sha512-JVleZS9oPVLTlBhPTWgOwxFWU/wMUdlBwTbGA4GF8c38sLbS13cupj+C8bLq929jU7EMWry4SaL+tKGIaTlqKg==" + }, + "esbuild-linux-riscv64": { + "version": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.15.11.tgz", + "integrity": "sha512-9aLIalZ2HFHIOZpmVU11sEAS9F8TnHw49daEjcgMpBXHFF57VuT9f9/9LKJhw781Gda0P9jDkuCWJ0tFbErvJw==" + }, + "esbuild-linux-s390x": { + "version": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.15.11.tgz", + "integrity": "sha512-sZHtiXXOKsLI3XGBGoYO4qKBzJlb8xNsWmvFiwFMHFzA4AXgDP1KDp7Dawe9C2pavTRBDvl+Ok4n/DHQ59oaTg==" + }, + "esbuild-netbsd-64": { + "version": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.15.11.tgz", + "integrity": "sha512-hUC9yN06K9sg7ju4Vgu9ChAPdsEgtcrcLfyNT5IKwKyfpLvKUwCMZSdF+gRD3WpyZelgTQfJ+pDx5XFbXTlB0A==" + }, + "esbuild-openbsd-64": { + "version": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.15.11.tgz", + "integrity": "sha512-0bBo9SQR4t66Wd91LGMAqmWorzO0TTzVjYiifwoFtel8luFeXuPThQnEm5ztN4g0fnvcp7AnUPPzS/Depf17wQ==" + }, + "esbuild-sunos-64": { + "version": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.15.11.tgz", + "integrity": "sha512-EuBdTGlsMTjEl1sQnBX2jfygy7iR6CKfvOzi+gEOfhDqbHXsmY1dcpbVtcwHAg9/2yUZSfMJHMAgf1z8M4yyyw==" + }, + "esbuild-windows-32": { + "version": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.15.11.tgz", + "integrity": "sha512-O0/Wo1Wk6dc0rZSxkvGpmTNIycEznHmkObTFz2VHBhjPsO4ZpCgfGxNkCpz4AdAIeMczpTXt/8d5vdJNKEGC+Q==" + }, + "esbuild-windows-64": { + "version": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.11.tgz", + "integrity": "sha512-x977Q4HhNjnHx00b4XLAnTtj5vfbdEvkxaQwC1Zh5AN8g5EX+izgZ6e5QgqJgpzyRNJqh4hkgIJF1pyy1be0mQ==" + }, + "esbuild-windows-arm64": { + "version": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.15.11.tgz", + "integrity": "sha512-VwUHFACuBahrvntdcMKZteUZ9HaYrBRODoKe4tIWxguQRvvYoYb7iu5LrcRS/FQx8KPZNaa72zuqwVtHeXsITw==" + }, "has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", diff --git a/src/pybind/mgr/dashboard/frontend/package.json b/src/pybind/mgr/dashboard/frontend/package.json index 33b3e85f50671..9ba1822bae432 100644 --- a/src/pybind/mgr/dashboard/frontend/package.json +++ b/src/pybind/mgr/dashboard/frontend/package.json @@ -85,11 +85,12 @@ "@angular/platform-browser-dynamic": "13.3.11", "@angular/router": "13.3.11", "@circlon/angular-tree-component": "10.0.0", - "@ng-bootstrap/ng-bootstrap": "10.0.0", + "@ng-bootstrap/ng-bootstrap": "12.1.2", + "@popperjs/core": "2.10.2", "@swimlane/ngx-datatable": "18.0.0", "@types/file-saver": "2.0.1", "async-mutex": "0.2.4", - "bootstrap": "4.6.1", + "bootstrap": "5.0.0", "chart.js": "2.9.4", "detect-browser": "5.2.0", "file-saver": "2.0.2", @@ -156,5 +157,8 @@ }, "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": true + }, + "overrides": { + "autoprefixer": "10.4.5" } } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html index d84ea787f1396..662ad75407070 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-discovery-modal/iscsi-target-discovery-modal.component.html @@ -43,14 +43,12 @@ type="password" autocomplete="new-password"> - - - - - + + + - - - - - + + + - - - + - - - + @@ -90,7 +86,7 @@ [options]="portalsSelections" [messages]="messages.portals" (selection)="onPortalSelection($event)" - elemClass="btn btn-light float-right"> + elemClass="btn btn-light float-end"> Add portal @@ -123,22 +119,20 @@ type="text" [value]="image" disabled /> - -
lun: {{ imagesSettings[image]['lun'] }}
- - - +
lun: {{ imagesSettings[image]['lun'] }}
+ + @@ -171,7 +165,7 @@ [options]="imagesSelections" [messages]="messages.images" (selection)="onImageSelection($event)" - elemClass="btn btn-light float-right"> + elemClass="btn btn-light float-end"> Add image @@ -243,14 +237,12 @@ id="target_password" name="target_password" formControlName="password" /> - - - - - + + + - - - - - + + + Initiator: {{ initiator.getValue('client_iqn') }}
@@ -409,14 +398,12 @@ autocomplete="new-password" type="password"> - - - - - + + +
- - - - - + + + - - - + @@ -520,7 +503,7 @@ + elemClass="btn btn-light float-end"> Add image @@ -538,7 +521,7 @@ i18n>No items added. @@ -563,9 +546,8 @@
Group: {{ group.getValue('group_id') }}
@@ -594,14 +576,12 @@ type="text" [value]="member" disabled /> - - - +
@@ -611,7 +591,7 @@ [options]="groupMembersSelections[gi]" [messages]="messages.groupInitiator" (selection)="onGroupMemberSelection($event, gi)" - elemClass="btn btn-light float-right"> + elemClass="btn btn-light float-end"> Add initiator @@ -635,14 +615,12 @@ type="text" [value]="disk" disabled /> - - - + @@ -651,7 +629,7 @@ + elemClass="btn btn-light float-end"> Add image @@ -671,7 +649,7 @@ i18n>No items added. diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html index 2452b0bc5721c..9614ac7505f0f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/iscsi-target-image-settings-modal/iscsi-target-image-settings-modal.component.html @@ -58,7 +58,7 @@ i18n>Backstore -
- - - -
- - - - - +
+ + + + +
+
+ + +
- +
Daemons - - - +
+ + +
Pools - - +
+ + +
Images - - +
+ + +
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html index 00fe92b32b734..ed4f7289619ec 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html @@ -23,7 +23,7 @@ @@ -111,7 +111,7 @@ *ngIf="mode === 'editing' || !poolPermission.read"> @@ -256,17 +256,17 @@
-
- You need to enable image mirror mode in the selected pool. Please click here to select a mode and enable it in this pool. @@ -298,7 +298,7 @@
- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html index 9d76cba095fe1..0c7edccc30f86 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-namespace-form/rbd-namespace-form-modal.component.html @@ -24,7 +24,7 @@ *ngIf="!poolPermission.read"> diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html index 82429e6dda4e2..d738c4f2ca52b 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.html @@ -12,7 +12,7 @@

Please expand your cluster first

-
+
- - diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html index bd4a25e7596c0..9f6c86eeacb65 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/logs/logs.component.html @@ -90,12 +90,14 @@
-
-
+
+
+
-
- -
+
-
+
- - - +
-
- +
+ +
-  —  +  —  -
-
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html index b952ce8d8a7c3..693741120c20f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/mgr-modules/mgr-module-form/mgr-module-form.component.html @@ -43,7 +43,7 @@ formControlName="{{ moduleOption.value.name }}" *ngIf="moduleOption.value.enum_allowed.length === 0"> + -
-->
-
-
-

- -

-
+
+

+ +

-
-
+
-
-
-

- -

-
+
+

+ +

-
-
+
+

-
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html index 47fca49c7e8ad..d24e06ee1a565 100755 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-modal/form-modal.component.html @@ -32,7 +32,7 @@ [formControlName]="field.name" cdDimlessBinary> - +
+
- -
-
- diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html index 657e0d6053f89..f9a328666d54e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/modal/modal.component.html @@ -2,14 +2,13 @@
-

+

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html index 4c42217c23295..1a115e533bc31 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html @@ -22,11 +22,11 @@

- + {{ executingTask.begin_time | cdDate }} - + {{ executingTask.progress || 0 }} %

@@ -65,21 +65,21 @@
-
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss index 11e17a682a4f1..f307edd4be670 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss @@ -62,12 +62,3 @@ hr { margin-bottom: 2px; margin-top: 2px; } - -.card-text { - margin-right: 15px; -} - -.mute { - margin-right: -17px; - margin-top: -4px; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html index d33fc9af806ba..08f00e2a16f7e 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/refresh-selector/refresh-selector.component.html @@ -1,19 +1,19 @@
-
-
+ +
- -
+
+
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html index 0f23aee87aa3f..5351000836f7d 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/select-badges/select-badges.component.html @@ -5,14 +5,14 @@ [selectionLimit]="selectionLimit" [customBadges]="customBadges" [customBadgeValidators]="customBadgeValidators" - elemClass="mr-2 select-menu-edit" + elemClass="me-2 select-menu-edit" (selection)="selection.emit($event)"> - - {{ dataItem }} + + {{ dataItem }} - - {{ messages.empty }} - {{ messages.noOptions }} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html index b73f0ad3973a6..fc7b9f6e54ea2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html @@ -59,24 +59,20 @@
- - - - + + -
- -
+
@@ -147,8 +143,8 @@
- {{ filter.column.name }}: {{ filter.value.formatted }} + class="badge badge-info me-2"> + {{ filter.column.name }}: {{ filter.value.formatted }} , - private viewContainer: ViewContainerRef, - private componentFactoryResolver: ComponentFactoryResolver + private viewContainer: ViewContainerRef ) {} @Input('cdFormLoading') set cdFormLoading(condition: LoadingStatus) { - let factory: any; let content: any; this.viewContainer.clear(); switch (condition) { case LoadingStatus.Loading: - factory = this.componentFactoryResolver.resolveComponentFactory(LoadingPanelComponent); content = this.resolveNgContent($localize`Loading form data...`); - this.viewContainer.createComponent(factory, null, null, content); + this.viewContainer.createComponent(LoadingPanelComponent, {projectableNodes: content}); break; case LoadingStatus.Ready: this.viewContainer.createEmbeddedView(this.templateRef); break; case LoadingStatus.Error: - factory = this.componentFactoryResolver.resolveComponentFactory(AlertPanelComponent); content = this.resolveNgContent($localize`Form data could not be loaded.`); - const componentRef = this.viewContainer.createComponent(factory, null, null, content); + const componentRef = this.viewContainer.createComponent(AlertPanelComponent, {projectableNodes: content}); (componentRef.instance).type = 'error'; break; } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts index 028dd90ea3968..febbec1638fe8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts @@ -243,7 +243,7 @@ describe('NotificationService', () => { service.show(NotificationType.info, 'Some info'); expect(toastr.info).toHaveBeenCalledWith( `${time}` + - '', + '', 'Some info', undefined ); @@ -257,7 +257,7 @@ describe('NotificationService', () => { expect(toastr.error).toHaveBeenCalledWith( 'Some operation failed
' + `${time}` + - '', + '', 'Some error', undefined ); @@ -276,7 +276,7 @@ describe('NotificationService', () => { expect(toastr.success).toHaveBeenCalledWith( 'Some alert resolved
' + `${time}` + - '', + '', 'Alert resolved', undefined ); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts index c05dbce0f571f..52a06e30598d4 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.ts @@ -182,7 +182,7 @@ export class NotificationService { renderTimeAndApplicationHtml(notification: CdNotification): string { return `${this.cdDatePipe.transform( notification.timestamp - )}`; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 385f2bf07faba..6253ec6cf46dc 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -163,7 +163,57 @@ tags-input .tags { pointer-events: none; } +a { + &:hover { + text-decoration: underline; + } +} + .clickable, a { cursor: pointer; + text-decoration: none; +} + +a.nav-link, +a.btn-light { + text-decoration: none; +} + +// Overrides the badge to rounded-pill +.badge { + @extend .badge, .rounded-pill, .mb-1; +} + +// Overriding badges to match the class name of badges in Bootstrap v5 +.badge-primary { + @extend .badge, .bg-primary; +} + +.badge-secondary { + @extend .badge, .bg-secondary; +} + +.badge-success { + @extend .badge, .bg-success; +} + +.badge-danger { + @extend .badge, .bg-danger; +} + +.badge-info { + @extend .badge, .bg-primary; +} + +.badge-warning { + @extend .badge, .bg-warning, .text-dark; +} + +.badge-light { + @extend .badge, .bg-light, .text-dark; +} + +.badge-dark { + @extend .badge, .bg-dark; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss index be304c9e4e307..d1410e332b618 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/bootstrap-extends.scss @@ -10,7 +10,7 @@ cd-info-card { .card-body { .card-title { - @extend .pl-2; + @extend .ps-2; } .card-text { @@ -21,7 +21,7 @@ cd-info-card { } .btn-toolbar cd-table-actions.btn-group { - @extend .mr-2; + @extend .me-2; } cd-table { @@ -85,11 +85,11 @@ cd-health { cd-logs { label { - @extend .mr-2; + @extend .me-2; } .form-inline > .form-group { - @extend .mr-3; + @extend .me-3; @extend .mb-3; } } @@ -101,7 +101,7 @@ cd-about { dt { @extend .col-4; - @extend .font-weight-bold; + @extend .fw-bold; } dd { @@ -122,8 +122,3 @@ legend { @extend .fa-fw; } -pre:not(cd-api-docs *) { - @extend .card; - @extend .bg-light; - @extend .p-2; -} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss index ad94ffc6ed59d..6ca04c3d8a481 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_basics.scss @@ -107,41 +107,6 @@ mark { border-left: 1px solid vv.$gray-400; } -.accordion { - .card { - border: 0; - } - - .card-header { - border: 0; - border-bottom: 3px solid vv.$white; - padding-left: 0; - - .btn:focus, - .btn.focus { - box-shadow: none; - } - - button.dropdown-toggle { - position: relative; - - &::after { - border: 0; - content: '\f054'; - font-family: 'ForkAwesome'; - font-size: 1rem; - position: absolute; - right: 20px; - transition: transform 0.3s ease-in-out; - } - - &[aria-expanded='true']::after { - transform: rotate(90deg); - } - } - } -} - a.nav-link { color: vv.$primary; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss index a56bf350664fd..0503c1d50019a 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_buttons.scss @@ -1,27 +1,39 @@ @use './src/styles/vendor/variables' as vv; /* Reset checkbox success color */ -.was-validated .custom-control-input:valid, -.custom-control-input.is-valid { - ~ .custom-control-label { +.was-validated .form-check-input:valid, +.form-check-input.is-valid { + border-color: rgba(vv.$primary, 0.8); + + &:checked{ + background-color: vv.$primary; + border-color: rgba(vv.$primary, 0.8); + box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); + } + + &:focus { + border-color: rgba(vv.$primary, 0.8); + box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); + } + + ~ .form-check-label { color: initial; } - &:checked ~ .custom-control-label::before { + &:checked ~ .form-check-label::before { background-color: $component-active-bg; - border-color: $custom-control-indicator-checked-border-color; } - ~ .custom-control-label::before { - border-color: $custom-control-indicator-border-color; + ~ .form-check-label::before { + border-color: rgba(vv.$primary, 0.8); } &:focus ~ .custom-control-label::before { - box-shadow: $custom-control-indicator-focus-box-shadow; + box-shadow: 0 0 3px 2px rgba(vv.$primary, 0.5); } &:focus:not(:checked) ~ .custom-control-label::before { - border-color: $custom-control-indicator-focus-border-color; + border-color: rgba(vv.$primary, 0.8); } } @@ -41,6 +53,10 @@ } } +.btn-primary { + @extend .btn-accent; +} + // We have some inputs that don't have a corresponding formControlName, // to be able to get the same styling and no JS errors we need use a different // class name @@ -78,3 +94,9 @@ .card-footer button.btn:not(:first-child) { margin-left: 5px; } + +button { + &.disabled { + pointer-events: none !important; + } +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss index 1d84895c0dd75..5ca20012f5b2c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_forms.scss @@ -13,7 +13,8 @@ width: 100%; } -.form-control { +.form-control, +.form-select { display: table-cell; &:focus { @@ -24,10 +25,20 @@ } .custom-checkbox { + @extend .form-check; padding-top: 7px; + + .custom-control-input { + @extend .form-check-input; + } + + .custom-control-label { + @extend .form-check-label; + } } .custom-radio { + @extend .form-check; padding-top: 5px; } @@ -84,3 +95,11 @@ cd-modal { .invalid-feedback { display: block; } + +.form-group{ + @extend .mb-3; +} + +.custom-control-label { + @extend .form-label; +} 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 25edc11da130b..7dd3974d88f34 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 @@ -32,7 +32,7 @@ $info: $primary !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; -$dark: #777 !default; +$dark: $gray-800 !default; //badges colors $green-300: #6ec664; @@ -51,7 +51,15 @@ $fg-hover-color-over-dark-bg: $gray-500 !default; $theme-colors: ( 'accent': $accent, - 'warning-dark': $warning-dark + 'warning-dark': $warning-dark, + 'primary': $accent, + 'secondary': $secondary, + 'success': $success, + 'info': $info, + 'warning': $warning, + 'danger': $danger, + 'light': $light, + 'dark': $dark ) !default; // Body -- 2.39.5