mgr/dashboard: fix the exception when displaying OSD preview modal

Adapt changes in https://github.com/ceph/ceph/pull/37994.
- The preview button should not spin.
- The preview button should be enabled again after destroying the
  preview modal.

Fixes: https://tracker.ceph.com/issues/48421
Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
index 8907b161605e18a2d7b4b61a03d2f89cb9665b23..0f1a5de6dee88d291c0743e2194b7a14012f64a6 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.html
@@ -122,7 +122,8 @@
         </fieldset>
       </div>
       <div class="card-footer">
-        <cd-form-button-panel (submitActionEvent)="submit()"
+        <cd-form-button-panel #previewButtonPanel
+                              (submitActionEvent)="submit()"
                               [form]="form"
                               [disabled]="dataDeviceSelectionGroups.devices.length === 0"
                               [submitText]="actionLabels.PREVIEW"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts
index 71bec7adfc1ea49c4e48ff6c917735f7c3bc5142..1421c9277a3565795b239602c15be0c5e99454e4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-form/osd-form.component.ts
@@ -6,7 +6,7 @@ import _ from 'lodash';
 
 import { InventoryDevice } from '~/app/ceph/cluster/inventory/inventory-devices/inventory-device.model';
 import { OrchestratorService } from '~/app/shared/api/orchestrator.service';
-import { SubmitButtonComponent } from '~/app/shared/components/submit-button/submit-button.component';
+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';
@@ -36,8 +36,8 @@ export class OsdFormComponent extends CdForm implements OnInit {
   @ViewChild('dbDeviceSelectionGroups')
   dbDeviceSelectionGroups: OsdDevicesSelectionGroupsComponent;
 
-  @ViewChild('previewButton')
-  previewButton: SubmitButtonComponent;
+  @ViewChild('previewButtonPanel')
+  previewButtonPanel: FormButtonPanelComponent;
 
   icons = Icons;
 
@@ -209,6 +209,6 @@ export class OsdFormComponent extends CdForm implements OnInit {
     modalRef.componentInstance.submitAction.subscribe(() => {
       this.router.navigate(['/osd']);
     });
-    this.previewButton.loading = false;
+    this.previewButtonPanel.submitButton.loading = false;
   }
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts
index 7684d1915632b03cba176de01b184338c6608a02..0d48f63c05b65e4bc4bec4886b80dd9fee4a262e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/form-button-panel/form-button-panel.component.ts
@@ -1,9 +1,10 @@
 import { Location } from '@angular/common';
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { FormGroup, NgForm } from '@angular/forms';
 
 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
 import { ModalService } from '~/app/shared/services/modal.service';
+import { SubmitButtonComponent } from '../submit-button/submit-button.component';
 
 @Component({
   selector: 'cd-form-button-panel',
@@ -11,6 +12,9 @@ import { ModalService } from '~/app/shared/services/modal.service';
   styleUrls: ['./form-button-panel.component.scss']
 })
 export class FormButtonPanelComponent {
+  @ViewChild(SubmitButtonComponent)
+  submitButton: SubmitButtonComponent;
+
   @Output()
   submitActionEvent = new EventEmitter();
   @Output()