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
// Cluster
{
- path: 'expand-cluster',
+ path: 'add-storage',
component: CreateClusterComponent,
canActivate: [ModuleStatusGuardService],
data: {
uiApiPath: 'orchestrator',
redirectTo: 'overview',
backend: 'cephadm'
- },
- breadcrumbs: 'Cluster/Expand Cluster'
+ }
}
},
{
LayoutModule,
NumberModule,
FileUploaderModule,
- TabsModule,
RadioModule,
TilesModule,
LayerModule
+@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() {
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
}
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]);
--- /dev/null
+// 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);
+}
DISCONNECT: string;
RECONNECT: string;
AUTHORIZE: string;
- EXPAND_CLUSTER: string;
+ ADD_STORAGE: string;
SETUP_MULTISITE_REPLICATION: string;
NFS_EXPORT: 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`;
}
-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);
+}
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;
}
projects / ceph.git / commitdiff