import { ServicesPageHelper } from './services.po';
const pages = {
- index: { url: '#/expand-cluster', id: 'cd-create-cluster' }
+ index: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' }
};
export class CreateClusterWizardHelper extends PageHelper {
pages = pages;
export class CreateClusterHostPageHelper extends HostsPageHelper {
pages = {
- index: { url: '#/expand-cluster', id: 'cd-wizard' },
+ index: { url: '#/expand-cluster?welcome=true', id: 'cd-wizard' },
add: { url: '', id: 'cd-host-form' }
};
export class CreateClusterServicePageHelper extends ServicesPageHelper {
pages = {
- index: { url: '#/expand-cluster', id: 'cd-wizard' },
+ index: { url: '#/expand-cluster?welcome=true', id: 'cd-wizard' },
create: { url: '', id: 'cd-service-form' }
};
create(deviceType: 'hdd' | 'ssd', hostname?: string, expandCluster = false) {
cy.get('[aria-label="toggle advanced mode"]').click();
+ cy.get('[aria-label="toggle advanced mode"]').then(($button) => {
+ if ($button.hasClass('collapsed')) {
+ cy.wrap($button).click();
+ }
+ });
// Click Primary devices Add button
cy.get('cd-osd-devices-selection-groups[name="Primary"]').as('primaryGroups');
cy.get('@primaryGroups').find('button').click();
export class UrlsCollection extends PageHelper {
pages = {
// Cluster expansion
- welcome: { url: '#/expand-cluster', id: 'cd-create-cluster' },
+ welcome: { url: '#/expand-cluster?welcome=true', id: 'cd-create-cluster' },
// Landing page
dashboard: { url: '#/dashboard', id: 'cd-dashboard' },
class="bold">Hosts</td>
<td>{{ hostsCount }}</td>
</tr>
- <tr>
+ <tr *ngIf="!isSimpleDeployment; else simpleDeploymentTextTpl">
<td>
- <dl>
- <dt>
- <p i18n>Storage Capacity</p>
- </dt>
- <dd>
- <p i18n>Number of devices</p>
- </dd>
- <dd>
- <p i18n>Raw capacity</p>
- </dd>
- </dl>
- </td>
+ <dt>
+
<p i18n>Storage Capacity</p>
+ </dt>
+ <dd>
+
<p i18n>Number of devices</p>
+ </dd>
+ <dd>
+
<p i18n>Raw capacity</p>
+ </dd>
+ </dl>
+ </td>
<td class="pt-5"><p>{{ totalDevices }}</p><p>
{{ totalCapacity | dimlessBinary }}</p></td>
</tr>
</fieldset>
</div>
-<div class="col-lg-9">
<legend i18n
class="cd-header">Host Details</legend>
<cd-hosts [hiddenColumns]="['services', 'status']"
[hideToolHeader]="true"
[hasTableDetails]="false"
- [showGeneralActionsOnly]="true">
- </cd-hosts>
-</div>
+ [showGeneralActionsOnly]="true"
+ [showExpandClusterBtn]="false">
+ </cd-hosts>
+ </div>
</div>
+<ng-template #simpleDeploymentTextTpl>
+ <tr>
+ <td>
+ <dl>
+ <dt>
+ <p i18n>Storage Capacity</p>
+ </dt>
+ <dd>
+ <p i18n>{{deploymentDescText}}</p>
+ </dd>
+ </dl>
+ </td>
+ </tr>
+</ng-template>
services: Array<CephServiceSpec> = [];
totalCPUs = 0;
totalMemory = 0;
+ deploymentDescText: string;
+ isSimpleDeployment = true;
constructor(
public wizardStepsService: WizardStepsService,
let dbDevices = 0;
let dbDeviceCapacity = 0;
+ this.isSimpleDeployment = this.osdService.isDeployementModeSimple;
const hostContext = new CdTableFetchDataContext(() => undefined);
this.hostService.list(hostContext.toParams(), 'true').subscribe((resp: object[]) => {
this.hosts = resp;
dbDeviceCapacity = this.osdService.osdDevices['db']['capacity'];
}
+ if (this.isSimpleDeployment) {
+ this.osdService.getDeploymentOptions().subscribe((optionsObj) => {
+ if (!_.isEmpty(optionsObj)) {
+ Object.keys(optionsObj.options).forEach((option) => {
+ if (
+ this.osdService.selectedFormValues &&
+ this.osdService.selectedFormValues.get('deploymentOption').value === option
+ ) {
+ this.deploymentDescText = optionsObj.options[option].desc;
+ }
+ });
+ }
+ });
+ }
+
this.totalDevices = dataDevices + walDevices + dbDevices;
this.osdService.osdDevices['totalDevices'] = this.totalDevices;
this.totalCapacity = dataDeviceCapacity + walDeviceCapacity + dbDeviceCapacity;
<div class="container h-75"
- *ngIf="!startClusterCreation">
+ *ngIf="startClusterCreation">
<div class="row h-100 justify-content-center align-items-center">
<div class="blank-page">
<!-- htmllint img-req-src="false" -->
</div>
<div class="card"
- *ngIf="startClusterCreation">
+ *ngIf="!startClusterCreation">
<div class="card-header"
i18n>Expand Cluster</div>
<div class="container-fluid">
<cd-hosts [hiddenColumns]="['services']"
[hideMaintenance]="true"
[hasTableDetails]="false"
- [showGeneralActionsOnly]="true"></cd-hosts>
+ [showGeneralActionsOnly]="true"
+ [showExpandClusterBtn]="false"></cd-hosts>
</div>
<div *ngSwitchCase="'2'"
class="ms-5">
});
it('should have project name as heading in welcome screen', () => {
+ component.startClusterCreation = true;
+ fixture.detectChanges();
const heading = fixture.debugElement.query(By.css('h3')).nativeElement;
expect(heading.innerHTML).toBe(`Welcome to ${projectConstants.projectName}`);
});
TemplateRef,
ViewChild
} from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import _ from 'lodash';
private clusterService: ClusterService,
private modalService: ModalService,
private taskWrapper: TaskWrapperService,
- private osdService: OsdService
+ private osdService: OsdService,
+ private route: ActivatedRoute
) {
this.permissions = this.authStorageService.getPermissions();
this.currentStepSub = this.wizardStepsService
}
ngOnInit(): void {
+ this.route.queryParams.subscribe((params) => {
+ // reading 'welcome' value true/false to toggle expand-cluster wizand view and welcome view
+ const showWelcomeScreen = params['welcome'];
+ if (showWelcomeScreen) {
+ this.startClusterCreation = showWelcomeScreen;
+ }
+ });
+
this.osdService.getDeploymentOptions().subscribe((options) => {
this.deploymentOption = options;
this.selectedOption = { option: options.recommended_option, encrypted: false };
}
createCluster() {
- this.startClusterCreation = true;
+ this.startClusterCreation = false;
}
skipClusterCreation() {
ngOnDestroy(): void {
this.currentStepSub.unsubscribe();
+ this.osdService.selectedFormValues = null;
}
}
id="host-actions"
[tableActions]="tableActions">
</cd-table-actions>
+ <cd-table-actions [permission]="permissions.hosts"
+ [selection]="selection"
+ btnColor="light"
+ class="btn-group"
+ [tableActions]="expandClusterActions">
+ </cd-table-actions>
</div>
<cd-host-details cdTableDetail
[permissions]="permissions"
@Input()
showGeneralActionsOnly = false;
+ @Input()
+ showExpandClusterBtn = true;
+
permissions: Permissions;
columns: Array<CdTableColumn> = [];
hosts: Array<object> = [];
isLoadingHosts = false;
cdParams = { fromLink: '/hosts' };
tableActions: CdTableAction[];
+ expandClusterActions: CdTableAction[];
selection = new CdTableSelection();
modalRef: NgbModalRef;
isExecuting = false;
) {
super();
this.permissions = this.authStorageService.getPermissions();
+ this.expandClusterActions = [
+ {
+ name: this.actionLabels.EXPAND_CLUSTER,
+ permission: 'create',
+ icon: Icons.expand,
+ routerLink: '/expand-cluster',
+ disable: (selection: CdTableSelection) => this.getDisable('add', selection),
+ visible: () => this.showExpandClusterBtn
+ }
+ ];
this.tableActions = [
{
name: this.actionLabels.ADD,
describe('without data devices selected', () => {
it('should disable preview button', () => {
+ component.simpleDeployment = false;
expectPreviewButton(false);
});
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnDestroy,
+ OnInit,
+ Output,
+ ViewChild
+} from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { Router } from '@angular/router';
templateUrl: './osd-form.component.html',
styleUrls: ['./osd-form.component.scss']
})
-export class OsdFormComponent extends CdForm implements OnInit {
+export class OsdFormComponent extends CdForm implements OnInit, OnDestroy {
@ViewChild('dataDeviceSelectionGroups')
dataDeviceSelectionGroups: OsdDevicesSelectionGroupsComponent;
this.osdService.getDeploymentOptions().subscribe((options) => {
this.deploymentOptions = options;
- this.form.get('deploymentOption').setValue(this.deploymentOptions?.recommended_option);
+ if (!this.osdService.selectedFormValues) {
+ this.form.get('deploymentOption').setValue(this.deploymentOptions?.recommended_option);
+ }
if (this.deploymentOptions?.recommended_option) {
this.enableFeatures();
}
});
+
+ // restoring form value on back/next
+ if (this.osdService.selectedFormValues) {
+ this.form = _.cloneDeep(this.osdService.selectedFormValues);
+ this.form
+ .get('deploymentOption')
+ .setValue(this.osdService.selectedFormValues.value?.deploymentOption);
+ }
+ this.simpleDeployment = this.osdService.isDeployementModeSimple;
this.form.get('walSlots').valueChanges.subscribe((value) => this.setSlots('wal', value));
this.form.get('dbSlots').valueChanges.subscribe((value) => this.setSlots('db', value));
_.each(this.features, (feature) => {
this.previewButtonPanel.submitButton.loading = false;
}
}
+
+ ngOnDestroy() {
+ this.osdService.selectedFormValues = _.cloneDeep(this.form);
+ this.osdService.isDeployementModeSimple = this.dataDeviceSelectionGroups?.devices?.length === 0;
+ }
}
component.login();
expect(routerNavigateSpy).toHaveBeenCalledTimes(1);
- expect(routerNavigateSpy).toHaveBeenCalledWith(['/expand-cluster']);
+ expect(routerNavigateSpy).toHaveBeenCalledWith(['/expand-cluster'], {
+ queryParams: { welcome: true }
+ });
});
});
if (!this.postInstalled && this.route.snapshot.queryParams['returnUrl'] === '/dashboard') {
url = '/expand-cluster';
}
- this.router.navigate([url]);
+ if (url == '/expand-cluster') {
+ this.router.navigate([url], { queryParams: { welcome: true } });
+ } else {
+ this.router.navigate([url]);
+ }
});
}
}
import { OsdSettings } from '../models/osd-settings';
import { SmartDataResponseV1 } from '../models/smart';
import { DeviceService } from '../services/device.service';
+import { CdFormGroup } from '../forms/cd-form-group';
@Injectable({
providedIn: 'root'
private uiPath = 'ui-api/osd';
osdDevices: InventoryDeviceType[] = [];
+ selectedFormValues: CdFormGroup;
+ isDeployementModeSimple: boolean = true;
osdRecvSpeedModalPriorities = {
KNOWN_PRIORITIES: [
DISCONNECT: string;
RECONNECT: string;
AUTHORIZE: string;
+ EXPAND_CLUSTER: string;
constructor() {
/* Create a new item */
this.CONNECT = $localize`Connect`;
this.DISCONNECT = $localize`Disconnect`;
this.RECONNECT = $localize`Reconnect`;
+ this.EXPAND_CLUSTER = $localize`Expand Cluster`;
}
}
right = 'fa fa-arrow-right', // Mark in
down = 'fa fa-arrow-down', // Mark Down
erase = 'fa fa-eraser', // Purge color: bd.$white;
-
+ expand = 'fa fa-expand', // Expand cluster
user = 'fa fa-user', // User, Initiators
users = 'fa fa-users', // Users, Groups
share = 'fa fa-share-alt', // share
projects / ceph.git / commitdiff