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');
}
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' }
};
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' }
};
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' },
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
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
component: NotificationsPageComponent
},
{
- path: 'expand-cluster',
+ path: 'add-storage',
component: CreateClusterComponent,
canActivate: [ModuleStatusGuardService],
data: {
uiApiPath: 'orchestrator',
redirectTo: 'overview',
backend: 'cephadm'
- },
- breadcrumbs: 'Cluster/Expand Cluster'
+ }
}
},
{
+@if (startClusterCreation) {
<div class="container-fluid">
- @if (startClusterCreation) {
<div cdsRow
- class="cds-ml-5 cds-mt-5">
+ class="cds-ml-5 cds-mt-6">
<div cdsCol
[columnNumbers]="{'lg': 13, 'md': 8, 'sm': 8}">
- <div class="mb-5">
+ <div class="mb-4">
<!-- htmllint img-req-src="false" -->
<img [src]="projectConstants.cephLogo"
alt="Ceph"
- class="img-fluid">
+ class="ceph-logo">
</div>
- <div class="mb-5">
+ <div class="mb-4">
<span class="cds--type-fluid-heading-05"
i18n>Welcome to {{ projectConstants.projectName }}
</span>
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.</span>
</div>
- <cds-tile class="storage-requirements-header"
+ <cds-tile class="border-subtle no-border-bottom"
[cdsLayer]="1">
<div cdsStack="horizontal"
gap="3">
</div>
</cds-tile>
- <cds-tile class="storage-requirements-body mb-3"
+ <cds-tile class="border-subtle mb-3"
[cdsLayer]="2">
<div cdsStack="horizontal"
gap="4">
<hr/>
- <div cdsStack="horizontal" gap="4">
+ <div cdsStack="horizontal"
+ gap="4">
<cd-icon type="vmdkDisk"
[size]="icons.size20">
</cd-icon>
- <div cdsStack="vertical" gap="1">
+ <div cdsStack="vertical"
+ gap="1">
<span class="cds--type-heading-compact-01"
i18n>
Disks
<div cdsStack="horizontal"
gap="4">
<cd-icon type="clusterIcon"
- [size]="icons.size20">
+ [size]="icons.size20">
</cd-icon>
- <div cdsStack="vertical" gap="1">
+ <div cdsStack="vertical"
+ gap="1">
<span class="cds--type-heading-compact-01"
i18n>
Data services (optional)
</cd-alert-panel>
</div>
- <div class="mb-4">
+ <div class="mb-5">
<button cdsButton="primary"
class="me-3"
(click)="createCluster()"
</div>
</div>
</div>
- }
</div>
+}
+@else {
<div cdsRow
- class="form"
- *ngIf="!startClusterCreation">
+ class="form cds-mt-6">
<div cdsCol
[columnNumbers]="{'lg': 2, 'md': 2, 'sm': 2}"
class="indicator-wrapper">
<div class="form-header"
- i18n>Expand Cluster</div>
+ i18n>Add Storage</div>
<cd-wizard [stepsTitle]="stepTitles"></cd-wizard>
</div>
</ng-container>
<div cdsRow
class="m-5">
+ @if (stepTitles[currentStep?.stepIndex]?.label === 'Create OSDs') {
<button cdsButton="secondary"
class="me-3"
id="skipStepBtn"
(click)="onSkip()"
aria-label="Skip this step"
- *ngIf="stepTitles[currentStep?.stepIndex]?.label === 'Create OSDs'"
i18n>Skip</button>
+ }
<cd-back-button buttonType="secondary"
aria-label="Close"
(backAction)="onPreviousStep()"
</div>
</div>
</div>
+}
<ng-template #skipConfirmTpl>
- <span i18n>You are about to skip the cluster expansion process.
- You’ll need to <strong>navigate through the menu to add hosts and services.</strong></span>
+ <span i18n>You are about to skip the storage setup process.
+ You'll need to <strong>navigate through the menu to add hosts and services.</strong></span>
- <div class="mt-4"
+ <div class="cds-mt-4"
i18n>Are you sure you want to continue?</div>
</ng-template>
+@use '@carbon/layout';
+
.container-fluid {
align-items: flex-start;
display: flex;
}
}
-.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%;
+}
component.onNextStep();
fixture.detectChanges();
submitBtnLabel = component.showSubmitButtonLabel();
- expect(submitBtnLabel).toEqual('Expand Cluster');
+ expect(submitBtnLabel).toEqual('Add Storage');
cancelBtnLabel = component.showCancelButtonLabel();
expect(cancelBtnLabel).toEqual('Back');
});
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;
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();
}
showSubmitButtonLabel() {
- return !this.wizardStepsService.isLastStep()
- ? this.actionLabels.NEXT
- : $localize`Expand Cluster`;
+ return !this.wizardStepsService.isLastStep() ? this.actionLabels.NEXT : $localize`Add Storage`;
}
showCancelButtonLabel() {
ngOnInit() {
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
}
component.login();
expect(routerNavigateSpy).toHaveBeenCalledTimes(1);
- expect(routerNavigateSpy).toHaveBeenCalledWith(['/expand-cluster'], {
+ expect(routerNavigateSpy).toHaveBeenCalledWith(['/add-storage'], {
queryParams: { welcome: true }
});
});
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]);
// Notification details
.notification-details {
padding: var(--cds-spacing-05);
- border: 1px solid var(--cds-border-subtle);
border-radius: var(--cds-border-radius);
background-color: var(--cds-layer-01);
}
DISCONNECT: string;
RECONNECT: string;
AUTHORIZE: string;
- EXPAND_CLUSTER: string;
+ ADD_STORAGE: string;
SETUP_MULTISITE_REPLICATION: string;
NFS_EXPORT: string;
VIEW: string;
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`;
this.VIEW = $localize`View`;
.cds--progress-bar__bar {
background-color: var(--cds-primary);
}
+
+.border-subtle {
+ border: 1px solid var(--cds-border-subtle);
+}
margin-top: layout.$spacing-01;
}
+.cds-mt-4 {
+ margin-top: layout.$spacing-04;
+}
+
.cds-mt-5 {
margin-top: layout.$spacing-05;
}
projects / ceph.git / commitdiff