]> git.proxmox.com Git - ceph.git/blobdiff - ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts
import ceph quincy 17.2.6
[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / cluster / osd / osd-form / osd-form.component.ts
index 7b6c44742a75684c5eaabc7252341bfe64bf68ce..e2085548f0f51e8afe844a3c0b610c0345e0c827 100644 (file)
@@ -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<DriveGroup> = new EventEmitter();
+
+  @Output() emitDeploymentOption: EventEmitter<object> = new EventEmitter();
+
+  @Output() emitMode: EventEmitter<boolean> = 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;
+    }
   }
 }