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=7b6c44742a75684c5eaabc7252341bfe64bf68ce;hb=f67539c23b11f3b8a2ecaeeddf7a403ae1c442a8;hp=b38e540ddf2978c6286fad1f16ec66e91588778d;hpb=64a4c04e6850c6d9086e4c37f57c4eada541b05e;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 b38e540dd..7b6c44742 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
@@ -2,18 +2,19 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { I18n } from '@ngx-translate/i18n-polyfill';
-import * as _ from 'lodash';
-import { BsModalService } from 'ngx-bootstrap/modal';
-
-import { OrchestratorService } from '../../../../shared/api/orchestrator.service';
-import { SubmitButtonComponent } from '../../../../shared/components/submit-button/submit-button.component';
-import { ActionLabelsI18n } from '../../../../shared/constants/app.constants';
-import { Icons } from '../../../../shared/enum/icons.enum';
-import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
-import { CdTableColumn } from '../../../../shared/models/cd-table-column';
-import { AuthStorageService } from '../../../../shared/services/auth-storage.service';
-import { InventoryDevice } from '../../inventory/inventory-devices/inventory-device.model';
+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 { FormButtonPanelComponent } from '~/app/shared/components/form-button-panel/form-button-panel.component';
+import { ActionLabelsI18n } 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 { AuthStorageService } from '~/app/shared/services/auth-storage.service';
+import { ModalService } from '~/app/shared/services/modal.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';
@@ -26,25 +27,24 @@ import { OsdFeature } from './osd-feature.interface';
   templateUrl: './osd-form.component.html',
   styleUrls: ['./osd-form.component.scss']
 })
-export class OsdFormComponent implements OnInit {
-  @ViewChild('dataDeviceSelectionGroups', { static: false })
+export class OsdFormComponent extends CdForm implements OnInit {
+  @ViewChild('dataDeviceSelectionGroups')
   dataDeviceSelectionGroups: OsdDevicesSelectionGroupsComponent;
 
-  @ViewChild('walDeviceSelectionGroups', { static: false })
+  @ViewChild('walDeviceSelectionGroups')
   walDeviceSelectionGroups: OsdDevicesSelectionGroupsComponent;
 
-  @ViewChild('dbDeviceSelectionGroups', { static: false })
+  @ViewChild('dbDeviceSelectionGroups')
   dbDeviceSelectionGroups: OsdDevicesSelectionGroupsComponent;
 
-  @ViewChild('previewButton', { static: false })
-  previewButton: SubmitButtonComponent;
+  @ViewChild('previewButtonPanel')
+  previewButtonPanel: FormButtonPanelComponent;
 
   icons = Icons;
 
   form: CdFormGroup;
   columns: Array<CdTableColumn> = [];
 
-  loading = false;
   allDevices: InventoryDevice[] = [];
 
   availDevices: InventoryDevice[] = [];
@@ -60,22 +60,23 @@ export class OsdFormComponent implements OnInit {
   features: { [key: string]: OsdFeature };
   featureList: OsdFeature[] = [];
 
-  hasOrchestrator = false;
+  hasOrchestrator = true;
 
   constructor(
     public actionLabels: ActionLabelsI18n,
     private authStorageService: AuthStorageService,
-    private i18n: I18n,
     private orchService: OrchestratorService,
+    private hostService: HostService,
     private router: Router,
-    private bsModalService: BsModalService
+    private modalService: ModalService
   ) {
-    this.resource = this.i18n('OSDs');
+    super();
+    this.resource = $localize`OSDs`;
     this.action = this.actionLabels.CREATE;
     this.features = {
       encrypted: {
         key: 'encrypted',
-        desc: this.i18n('Encryption')
+        desc: $localize`Encryption`
       }
     };
     this.featureList = _.map(this.features, (o, key) => Object.assign(o, { key: key }));
@@ -85,8 +86,10 @@ export class OsdFormComponent implements OnInit {
   ngOnInit() {
     this.orchService.status().subscribe((status) => {
       this.hasOrchestrator = status.available;
-      if (this.hasOrchestrator) {
+      if (status.available) {
         this.getDataDevices();
+      } else {
+        this.loadingNone();
       }
     });
 
@@ -119,20 +122,16 @@ export class OsdFormComponent implements OnInit {
   }
 
   getDataDevices() {
-    if (this.loading) {
-      return;
-    }
-    this.loading = true;
-    this.orchService.inventoryDeviceList().subscribe(
+    this.hostService.inventoryDeviceList().subscribe(
       (devices: InventoryDevice[]) => {
         this.allDevices = _.filter(devices, 'available');
         this.availDevices = [...this.allDevices];
-        this.loading = false;
+        this.loadingReady();
       },
       () => {
         this.allDevices = [];
         this.availDevices = [];
-        this.loading = false;
+        this.loadingError();
       }
     );
   }
@@ -206,12 +205,12 @@ export class OsdFormComponent implements OnInit {
     // use user name and timestamp for drive group name
     const user = this.authStorageService.getUsername();
     this.driveGroup.setName(`dashboard-${user}-${_.now()}`);
-    const modalRef = this.bsModalService.show(OsdCreationPreviewModalComponent, {
-      initialState: { driveGroups: [this.driveGroup.spec] }
+    const modalRef = this.modalService.show(OsdCreationPreviewModalComponent, {
+      driveGroups: [this.driveGroup.spec]
     });
-    modalRef.content.submitAction.subscribe(() => {
+    modalRef.componentInstance.submitAction.subscribe(() => {
       this.router.navigate(['/osd']);
     });
-    this.previewButton.loading = false;
+    this.previewButtonPanel.submitButton.loading = false;
   }
 }