X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=ceph%2Fsrc%2Fpybind%2Fmgr%2Fdashboard%2Ffrontend%2Fsrc%2Fapp%2Fceph%2Fcluster%2Fosd%2Fosd-form%2Fosd-form.component.ts;h=e2085548f0f51e8afe844a3c0b610c0345e0c827;hb=39ae355f72b1d71f2212a99f2bd9f6c1e0d35528;hp=7b6c44742a75684c5eaabc7252341bfe64bf68ce;hpb=f67539c23b11f3b8a2ecaeeddf7a403ae1c442a8;p=ceph.git diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts index 7b6c44742..e2085548f 100644 --- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts +++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { FormControl, Validators } from '@angular/forms'; +import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { FormControl } from '@angular/forms'; import { Router } from '@angular/router'; import _ from 'lodash'; @@ -7,14 +7,21 @@ import _ from 'lodash'; import { InventoryDevice } from '~/app/ceph/cluster/inventory/inventory-devices/inventory-device.model'; import { HostService } from '~/app/shared/api/host.service'; import { OrchestratorService } from '~/app/shared/api/orchestrator.service'; +import { OsdService } from '~/app/shared/api/osd.service'; import { FormButtonPanelComponent } from '~/app/shared/components/form-button-panel/form-button-panel.component'; -import { ActionLabelsI18n } from '~/app/shared/constants/app.constants'; +import { ActionLabelsI18n, URLVerbs } from '~/app/shared/constants/app.constants'; import { Icons } from '~/app/shared/enum/icons.enum'; import { CdForm } from '~/app/shared/forms/cd-form'; import { CdFormGroup } from '~/app/shared/forms/cd-form-group'; import { CdTableColumn } from '~/app/shared/models/cd-table-column'; +import { FinishedTask } from '~/app/shared/models/finished-task'; +import { + DeploymentOptions, + OsdDeploymentOptions +} from '~/app/shared/models/osd-deployment-options'; import { AuthStorageService } from '~/app/shared/services/auth-storage.service'; import { ModalService } from '~/app/shared/services/modal.service'; +import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service'; import { OsdCreationPreviewModalComponent } from '../osd-creation-preview-modal/osd-creation-preview-modal.component'; import { DevicesSelectionChangeEvent } from '../osd-devices-selection-groups/devices-selection-change-event.interface'; import { DevicesSelectionClearEvent } from '../osd-devices-selection-groups/devices-selection-clear-event.interface'; @@ -40,6 +47,18 @@ export class OsdFormComponent extends CdForm implements OnInit { @ViewChild('previewButtonPanel') previewButtonPanel: FormButtonPanelComponent; + @Input() + hideTitle = false; + + @Input() + hideSubmitBtn = false; + + @Output() emitDriveGroup: EventEmitter = new EventEmitter(); + + @Output() emitDeploymentOption: EventEmitter = new EventEmitter(); + + @Output() emitMode: EventEmitter = new EventEmitter(); + icons = Icons; form: CdFormGroup; @@ -62,13 +81,20 @@ export class OsdFormComponent extends CdForm implements OnInit { hasOrchestrator = true; + simpleDeployment = true; + + deploymentOptions: DeploymentOptions; + optionNames = Object.values(OsdDeploymentOptions); + constructor( public actionLabels: ActionLabelsI18n, private authStorageService: AuthStorageService, private orchService: OrchestratorService, private hostService: HostService, private router: Router, - private modalService: ModalService + private modalService: ModalService, + private osdService: OsdService, + private taskWrapper: TaskWrapperService ) { super(); this.resource = $localize`OSDs`; @@ -93,6 +119,14 @@ export class OsdFormComponent extends CdForm implements OnInit { } }); + this.osdService.getDeploymentOptions().subscribe((options) => { + this.deploymentOptions = options; + this.form.get('deploymentOption').setValue(this.deploymentOptions?.recommended_option); + + if (this.deploymentOptions?.recommended_option) { + this.enableFeatures(); + } + }); 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) => { @@ -105,19 +139,16 @@ export class OsdFormComponent extends CdForm implements OnInit { createForm() { this.form = new CdFormGroup({ - walSlots: new FormControl(0, { - validators: [Validators.min(0)] - }), - dbSlots: new FormControl(0, { - validators: [Validators.min(0)] - }), + walSlots: new FormControl(0), + dbSlots: new FormControl(0), features: new CdFormGroup( this.featureList.reduce((acc: object, e) => { // disable initially because no data devices are selected acc[e.key] = new FormControl({ value: false, disabled: true }); return acc; }, {}) - ) + ), + deploymentOption: new FormControl(0) }); } @@ -182,10 +213,13 @@ export class OsdFormComponent extends CdForm implements OnInit { this.enableFeatures(); } this.driveGroup.setDeviceSelection(event.type, event.filters); + + this.emitDriveGroup.emit(this.driveGroup); } onDevicesCleared(event: DevicesSelectionClearEvent) { if (event.type === 'data') { + this.hostname = ''; this.availDevices = [...this.allDevices]; this.walDeviceSelectionGroups.devices = []; this.dbDeviceSelectionGroups.devices = []; @@ -201,16 +235,52 @@ export class OsdFormComponent extends CdForm implements OnInit { } } + emitDeploymentSelection() { + const option = this.form.get('deploymentOption').value; + const encrypted = this.form.get('encrypted').value; + this.emitDeploymentOption.emit({ option: option, encrypted: encrypted }); + } + + emitDeploymentMode() { + this.simpleDeployment = !this.simpleDeployment; + if (!this.simpleDeployment && this.dataDeviceSelectionGroups.devices.length === 0) { + this.disableFeatures(); + } else { + this.enableFeatures(); + } + this.emitMode.emit(this.simpleDeployment); + } + submit() { - // use user name and timestamp for drive group name - const user = this.authStorageService.getUsername(); - this.driveGroup.setName(`dashboard-${user}-${_.now()}`); - const modalRef = this.modalService.show(OsdCreationPreviewModalComponent, { - driveGroups: [this.driveGroup.spec] - }); - modalRef.componentInstance.submitAction.subscribe(() => { - this.router.navigate(['/osd']); - }); - this.previewButtonPanel.submitButton.loading = false; + if (this.simpleDeployment) { + const option = this.form.get('deploymentOption').value; + const encrypted = this.form.get('encrypted').value; + const deploymentSpec = { option: option, encrypted: encrypted }; + const title = this.deploymentOptions.options[deploymentSpec.option].title; + const trackingId = `${title} deployment`; + this.taskWrapper + .wrapTaskAroundCall({ + task: new FinishedTask('osd/' + URLVerbs.CREATE, { + tracking_id: trackingId + }), + call: this.osdService.create([deploymentSpec], trackingId, 'predefined') + }) + .subscribe({ + complete: () => { + this.router.navigate(['/osd']); + } + }); + } else { + // use user name and timestamp for drive group name + const user = this.authStorageService.getUsername(); + this.driveGroup.setName(`dashboard-${user}-${_.now()}`); + const modalRef = this.modalService.show(OsdCreationPreviewModalComponent, { + driveGroups: [this.driveGroup.spec] + }); + modalRef.componentInstance.submitAction.subscribe(() => { + this.router.navigate(['/osd']); + }); + this.previewButtonPanel.submitButton.loading = false; + } } }