From: Aashish Sharma Date: Thu, 5 Mar 2026 06:33:00 +0000 (+0530) Subject: mgr/dashboard: rename expand-cluster to add-storage X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=3541a9fa07bdc9066f56698ae531863f3c07348c;p=ceph.git mgr/dashboard: rename expand-cluster to add-storage Signed-off-by: Aashish Sharma (cherry picked from commit 374e76e06846397a6d9d30a1c74abf429a5ffc90) Conflicts: src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss src/pybind/mgr/dashboard/frontend/src/styles.scss src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss --- diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/create-cluster.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/create-cluster.po.ts index 97554ce1d7ed..85a983f945f5 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/create-cluster.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/cluster/create-cluster.po.ts @@ -4,14 +4,14 @@ import { HostsPageHelper } from './hosts.po'; import { ServicesPageHelper } from './services.po'; const pages = { - index: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' } + index: { url: '#/add-storage?welcome=true', id: 'cd-create-cluster' } }; export class CreateClusterWizardHelper extends PageHelper { pages = pages; createCluster() { cy.get('cd-create-cluster').should('contain.text', 'Please expand your cluster first'); - cy.get('[name=expand-cluster]').click(); + cy.get('[name=add-storage]').click(); cy.get('cd-wizard').should('exist'); } @@ -22,13 +22,13 @@ export class CreateClusterWizardHelper extends PageHelper { cy.get('cd-dashboard').should('exist'); const notification = new NotificationSidebarPageHelper(); notification.open(); - notification.getNotifications().should('contain', 'Cluster expansion skipped by user'); + notification.getNotifications().should('contain', 'Storage setup skipped by user'); } } export class CreateClusterHostPageHelper extends HostsPageHelper { pages = { - index: { url: '#/expand-cluster?welcome=true', id: 'cd-wizard' }, + index: { url: '#/add-storage?welcome=true', id: 'cd-wizard' }, add: { url: '', id: 'cd-host-form' } }; @@ -42,7 +42,7 @@ export class CreateClusterHostPageHelper extends HostsPageHelper { export class CreateClusterServicePageHelper extends ServicesPageHelper { pages = { - index: { url: '#/expand-cluster?welcome=true', id: 'cd-wizard' }, + index: { url: '#/add-storage?welcome=true', id: 'cd-wizard' }, create: { url: '', id: 'cd-service-form' } }; diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts index fc56fe7a9a1e..853b12074524 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/common/urls.po.ts @@ -3,7 +3,7 @@ import { PageHelper } from '../page-helper.po'; export class UrlsCollection extends PageHelper { pages = { // Cluster expansion - welcome: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' }, + welcome: { url: '#/add-storage?welcome=true', id: 'cd-create-cluster' }, // Landing page overview: { url: '#/overview', id: 'cd-dashboard' }, diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/01-create-cluster-welcome.feature b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/01-create-cluster-welcome.feature index a5809537fc6c..21cb81698c56 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/01-create-cluster-welcome.feature +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/01-create-cluster-welcome.feature @@ -8,14 +8,14 @@ Feature: Cluster expansion welcome screen Scenario: Cluster expansion welcome screen Given I am on the "welcome" page - And I should see a button to "Expand Cluster" + And I should see a button to "Add Storage" And I should see a button to "Skip" And I should see a message "Please expand your cluster first" Scenario: Go to the Cluster expansion wizard Given I am on the "welcome" page - And I should see a button to "Expand Cluster" - When I click on "Expand Cluster" button + And I should see a button to "Add Storage" + When I click on "Add Storage" button Then I am on the "Add Hosts" section Scenario: Skips the process and go to the landing page diff --git a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/02-create-cluster-add-host.feature b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/02-create-cluster-add-host.feature index ba9acdc40b07..4709f36e9c49 100644 --- a/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/02-create-cluster-add-host.feature +++ b/src/pybind/mgr/dashboard/frontend/cypress/e2e/orchestrator/workflow/02-create-cluster-add-host.feature @@ -7,7 +7,7 @@ Feature: Cluster expansion host addition Background: Cluster expansion wizard Given I am logged in And I am on the "welcome" page - And I click on "Expand Cluster" button + And I click on "Add Storage" button Scenario Outline: Add hosts Given I am on the "Add Hosts" section diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts index ea8714b90c2b..3c4026cb0627 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts @@ -107,7 +107,7 @@ const routes: Routes = [ // Cluster { - path: 'expand-cluster', + path: 'add-storage', component: CreateClusterComponent, canActivate: [ModuleStatusGuardService], data: { @@ -115,8 +115,7 @@ const routes: Routes = [ uiApiPath: 'orchestrator', redirectTo: 'overview', backend: 'cephadm' - }, - breadcrumbs: 'Cluster/Expand Cluster' + } } }, { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts index 89387835c006..734a0d7ad303 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts @@ -21,7 +21,6 @@ import { LayoutModule, NumberModule, FileUploaderModule, - TabsModule, RadioModule, TilesModule, LayerModule 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 f9ae6adb4a57..cc2b15ad2715 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 @@ -1,17 +1,17 @@ +@if (startClusterCreation) {
- @if (startClusterCreation) {
+ class="cds-ml-5 cds-mt-6">
-
+
Ceph + class="ceph-logo">
-
+
Welcome to {{ projectConstants.projectName }} @@ -48,7 +48,7 @@ i18n>Set up storage for your cluster to run workloads and store data. You can configure storage and data services now, or skip and configure them later.
-
@@ -62,7 +62,7 @@
-
@@ -84,12 +84,14 @@
-
+
-
+
Disks @@ -107,10 +109,11 @@
+ [size]="icons.size20"> -
+
Data services (optional) @@ -133,7 +136,7 @@
-
+
- }
+} +@else {
+ class="form cds-mt-6">
Expand Cluster
+ i18n>Add Storage
@@ -214,13 +217,14 @@
+ @if (stepTitles[currentStep?.stepIndex]?.label === 'Create OSDs') { + }
+} - You are about to skip the cluster expansion process. - You’ll need to navigate through the menu to add hosts and services. + You are about to skip the storage setup process. + You'll need to navigate through the menu to add hosts and services. -
Are you sure you want to continue?
 diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss index 45e0c3bda734..3fb39ceef788 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.scss @@ -1,3 +1,5 @@ +@use '@carbon/layout'; + .container-fluid { align-items: flex-start; display: flex; @@ -21,11 +23,10 @@ cd-osd-form { } } -.storage-requirements-body { - border: 1px solid var(--cds-border-subtle); -} - .storage-requirements-header { - border: 1px solid var(--cds-border-subtle); border-bottom: 0; } + +.ceph-logo { + width: 7%; +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts index 08711c4ff5a0..e5797c827d9f 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.spec.ts @@ -126,7 +126,7 @@ describe('CreateClusterComponent', () => { component.onNextStep(); fixture.detectChanges(); submitBtnLabel = component.showSubmitButtonLabel(); - expect(submitBtnLabel).toEqual('Expand Cluster'); + expect(submitBtnLabel).toEqual('Add Storage'); cancelBtnLabel = component.showCancelButtonLabel(); expect(cancelBtnLabel).toEqual('Back'); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts index 68576609cf5b..c82ef053b978 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/create-cluster/create-cluster.component.ts @@ -112,7 +112,7 @@ export class CreateClusterComponent implements OnInit, OnDestroy, AfterViewInit steps.onClick = () => (this.currentStep.stepIndex = index); }); this.route.queryParams.subscribe((params) => { - // reading 'welcome' value true/false to toggle expand-cluster wizand view and welcome view + // reading 'welcome' value true/false to toggle add-storage wizand view and welcome view const showWelcomeScreen = params['welcome']; if (showWelcomeScreen) { this.startClusterCreation = showWelcomeScreen; @@ -150,7 +150,7 @@ export class CreateClusterComponent implements OnInit, OnDestroy, AfterViewInit complete: () => { this.notificationService.show( NotificationType.info, - $localize`Cluster expansion skipped by user` + $localize`Storage setup skipped by user` ); this.router.navigate(['/overview']); this.modalService.dismissAll(); @@ -274,9 +274,7 @@ export class CreateClusterComponent implements OnInit, OnDestroy, AfterViewInit } showSubmitButtonLabel() { - return !this.wizardStepsService.isLastStep() - ? this.actionLabels.NEXT - : $localize`Expand Cluster`; + return !this.wizardStepsService.isLastStep() ? this.actionLabels.NEXT : $localize`Add Storage`; } showCancelButtonLabel() { diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts index 194b591f579a..716c044f7434 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/hosts/hosts.component.ts @@ -135,11 +135,11 @@ export class HostsComponent extends ListWithDetails implements OnDestroy, OnInit this.permissions = this.authStorageService.getPermissions(); this.expandClusterActions = [ { - name: this.actionLabels.EXPAND_CLUSTER, + name: this.actionLabels.ADD_STORAGE, permission: 'create', buttonKind: 'secondary', icon: Icons.expand, - routerLink: '/expand-cluster', + routerLink: '/add-storage', disable: (selection: CdTableSelection) => this.getDisable('add', selection), visible: () => this.showExpandClusterBtn } diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts index 3b9e62c48299..a1c3b4ca5142 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.spec.ts @@ -53,7 +53,7 @@ describe('LoginComponent', () => { component.login(); expect(routerNavigateSpy).toHaveBeenCalledTimes(1); - expect(routerNavigateSpy).toHaveBeenCalledWith(['/expand-cluster'], { + expect(routerNavigateSpy).toHaveBeenCalledWith(['/add-storage'], { queryParams: { welcome: true } }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts index 8524f53c2f77..2fded3b479a2 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/auth/login/login.component.ts @@ -66,12 +66,12 @@ export class LoginComponent implements OnInit { login() { localStorage.setItem('cluster_api_url', window.location.origin); this.authService.login(this.model).subscribe(() => { - const urlPath = this.postInstalled ? '/' : '/expand-cluster'; + const urlPath = this.postInstalled ? '/' : '/add-storage'; let url = _.get(this.route.snapshot.queryParams, 'returnUrl', urlPath); if (!this.postInstalled && this.route.snapshot.queryParams['returnUrl'] === '/overview') { - url = '/expand-cluster'; + url = '/add-storage'; } - if (url == '/expand-cluster') { + if (url === '/add-storage') { this.router.navigate([url], { queryParams: { welcome: true } }); } else { this.router.navigate([url]); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss new file mode 100644 index 000000000000..33a8a08e1c2d --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss @@ -0,0 +1,170 @@ +// Main container +.notifications-page__container { + padding-top: var(--cds-spacing-05); + background-color: var(--cds-layer-01); + column-gap: 1rem; +} + +// Notifications list +.notifications-list { + cds-list-row { + cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background-color: var(--cds-layer-hover); + } + + &.active { + background-color: var(--cds-layer-selected); + + .notification-title { + color: var(--cds-text-primary); + font-weight: var(--cds-font-weight-semibold); + } + } + } +} + +// Notification item content +.notification-item-content { + .notification-title { + margin: 0 0 var(--cds-spacing-02) 0; + font-size: var(--cds-productive-heading-compact-01-font-size); + line-height: var(--cds-productive-heading-compact-01-line-height); + font-weight: var(--cds-productive-heading-compact-01-font-weight); + color: var(--cds-text-primary); + } + + .notification-meta { + color: var(--cds-text-secondary); + font-size: var(--cds-label-01-font-size); + line-height: var(--cds-label-01-line-height); + } +} + +.notification-date { + color: var(--cds-text-secondary); + font-size: var(--cds-label-01-font-size); + white-space: nowrap; +} + +// Empty state +.empty-state { + text-align: center; + color: var(--cds-text-secondary); + margin-top: var(--cds-spacing-05); + + p { + margin: var(--cds-spacing-03) 0 0 0; + font-size: var(--cds-body-01-font-size); + line-height: var(--cds-body-01-line-height); + } +} + +// No selection state +.no-selection-state { + text-align: center; + color: var(--cds-text-secondary); + margin-top: var(--cds-spacing-06); + + p { + margin: var(--cds-spacing-03) 0 0 0; + font-size: var(--cds-body-01-font-size); + line-height: var(--cds-body-01-line-height); + } +} + +// Notification details +.notification-details { + padding: var(--cds-spacing-05); + border-radius: var(--cds-border-radius); + background-color: var(--cds-layer-01); +} + +// Details list +.details-list { + cds-list-row { + border-bottom: 1px solid var(--cds-border-subtle); + + &:last-child { + border-bottom: none; + } + + &:hover { + background-color: transparent; + } + } + + .detail-label { + color: var(--cds-text-secondary); + font-weight: var(--cds-font-weight-semibold); + font-size: var(--cds-body-compact-01-font-size); + } + + cds-list-column:last-child { + color: var(--cds-text-primary); + font-size: var(--cds-body-compact-01-font-size); + line-height: var(--cds-body-compact-01-line-height); + } +} + +// Message content +.message-content { + margin: 0; + padding: var(--cds-spacing-04); + background-color: var(--cds-layer-02); + border-radius: var(--cds-border-radius); + border-left: 3px solid var(--cds-support-info); + font-size: var(--cds-body-compact-01-font-size); + line-height: var(--cds-body-compact-01-line-height); + color: var(--cds-text-primary); +} + +// Timestamp +.timestamp { + color: var(--cds-text-secondary); + font-family: var(--cds-font-mono); + font-size: var(--cds-code-01-font-size); +} + +// Icons +.empty-icon, +.no-selection-icon { + fill: var(--cds-icon-secondary); + margin-bottom: var(--cds-spacing-05); +} + +// Text utilities +.text-muted { + color: var(--cds-text-secondary); +} + +// Typography + +h3 { + font-size: var(--cds-productive-heading-03-font-size); + line-height: var(--cds-productive-heading-03-line-height); + font-weight: var(--cds-productive-heading-03-font-weight); + color: var(--cds-text-primary); + margin-bottom: var(--cds-spacing-05); +} + +p { + font-size: var(--cds-body-01-font-size); + line-height: var(--cds-body-01-line-height); + color: var(--cds-text-primary); +} + +// Spacing utilities +.mb-4 { + margin-bottom: var(--cds-spacing-05); +} + +.mt-4 { + margin-top: var(--cds-spacing-05); +} + +.mt-5 { + margin-top: var(--cds-spacing-06); +} diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts index 2514f1f87cd6..9028c05a60fe 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/constants/app.constants.ts @@ -150,7 +150,7 @@ export class ActionLabelsI18n { DISCONNECT: string; RECONNECT: string; AUTHORIZE: string; - EXPAND_CLUSTER: string; + ADD_STORAGE: string; SETUP_MULTISITE_REPLICATION: string; NFS_EXPORT: string; @@ -242,7 +242,7 @@ export class ActionLabelsI18n { this.CONNECT = $localize`Connect`; this.DISCONNECT = $localize`Disconnect`; this.RECONNECT = $localize`Reconnect`; - this.EXPAND_CLUSTER = $localize`Expand Cluster`; + this.ADD_STORAGE = $localize`Add Storage`; this.NFS_EXPORT = $localize`Create NFS Export`; } diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss index 1f2f994467bc..85fecc644732 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss @@ -212,3 +212,15 @@ input:-webkit-autofill:active { -webkit-text-fill-color: inherit; transition: background-color 5000s ease-in-out 0s; } + +.cds--progress-bar__track { + background-color: colors.$gray-30; +} + +.cds--progress-bar__bar { + background-color: var(--cds-primary); +} + +.border-subtle { + border: 1px solid var(--cds-border-subtle); +} diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss index a03c56fb3887..7a3082c0e2e7 100644 --- a/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss +++ b/src/pybind/mgr/dashboard/frontend/src/styles/ceph-custom/_spacings.scss @@ -41,6 +41,14 @@ margin-top: layout.$spacing-03; } +.cds-mt-1 { + margin-top: layout.$spacing-01; +} + +.cds-mt-4 { + margin-top: layout.$spacing-04; +} + .cds-mt-5 { margin-top: layout.$spacing-05; }