import ceph quincy 17.2.4

[ceph.git] / ceph / src / pybind / mgr / dashboard / frontend / src / app / ceph / block / mirroring / overview / overview.component.ts

diff --git a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.ts b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.ts
index c919e03cdbb82680370a4ab4a603a1f19e4641f4..3ee1fa81334285d4ee56b38533e4bf9662bf5d9e 100644 (file)
--- a/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.ts
+++ b/ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/overview/overview.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs';
@@ -7,14 +8,16 @@ import { Pool } from '~/app/ceph/pool/pool';
 import { RbdMirroringService } from '~/app/shared/api/rbd-mirroring.service';
 import { Icons } from '~/app/shared/enum/icons.enum';
 import { ViewCacheStatus } from '~/app/shared/enum/view-cache-status.enum';
+import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
 import { CdTableAction } from '~/app/shared/models/cd-table-action';
 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
+import { FinishedTask } from '~/app/shared/models/finished-task';
 import { Permission } from '~/app/shared/models/permissions';
 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 { BootstrapCreateModalComponent } from '../bootstrap-create-modal/bootstrap-create-modal.component';
 import { BootstrapImportModalComponent } from '../bootstrap-import-modal/bootstrap-import-modal.component';
-import { EditSiteNameModalComponent } from '../edit-site-name-modal/edit-site-name-modal.component';
 
 @Component({
   selector: 'cd-mirroring',
@@ -22,6 +25,7 @@ import { EditSiteNameModalComponent } from '../edit-site-name-modal/edit-site-na
   styleUrls: ['./overview.component.scss']
 })
 export class OverviewComponent implements OnInit, OnDestroy {
+  rbdmirroringForm: CdFormGroup;
   permission: Permission;
   tableActions: CdTableAction[];
   selection = new CdTableSelection();
@@ -30,27 +34,24 @@ export class OverviewComponent implements OnInit, OnDestroy {
   siteName: any;
   status: ViewCacheStatus;
   private subs = new Subscription();
+  editing = false;
+
+  icons = Icons;
 
   constructor(
     private authStorageService: AuthStorageService,
     private rbdMirroringService: RbdMirroringService,
-    private modalService: ModalService
+    private modalService: ModalService,
+    private taskWrapper: TaskWrapperService
   ) {
     this.permission = this.authStorageService.getPermissions().rbdMirroring;
 
-    const editSiteNameAction: CdTableAction = {
-      permission: 'update',
-      icon: Icons.edit,
-      click: () => this.editSiteNameModal(),
-      name: $localize`Edit Site Name`,
-      canBePrimary: () => true,
-      disable: () => false
-    };
     const createBootstrapAction: CdTableAction = {
       permission: 'update',
       icon: Icons.upload,
       click: () => this.createBootstrapModal(),
       name: $localize`Create Bootstrap Token`,
+      canBePrimary: () => true,
       disable: () => false
     };
     const importBootstrapAction: CdTableAction = {
@@ -60,30 +61,49 @@ export class OverviewComponent implements OnInit, OnDestroy {
       name: $localize`Import Bootstrap Token`,
       disable: () => this.peersExist
     };
-    this.tableActions = [editSiteNameAction, createBootstrapAction, importBootstrapAction];
+    this.tableActions = [createBootstrapAction, importBootstrapAction];
   }
 
   ngOnInit() {
+    this.createForm();
     this.subs.add(this.rbdMirroringService.startPolling());
     this.subs.add(
       this.rbdMirroringService.subscribeSummary((data) => {
         this.status = data.content_data.status;
-        this.siteName = data.site_name;
 
         this.peersExist = !!data.content_data.pools.find((o: Pool) => o['peer_uuids'].length > 0);
       })
     );
+    this.rbdMirroringService.getSiteName().subscribe((response: any) => {
+      this.siteName = response.site_name;
+      this.rbdmirroringForm.get('siteName').setValue(this.siteName);
+    });
+  }
+
+  private createForm() {
+    this.rbdmirroringForm = new CdFormGroup({
+      siteName: new FormControl({ value: '', disabled: true })
+    });
   }
 
   ngOnDestroy(): void {
     this.subs.unsubscribe();
   }
 
-  editSiteNameModal() {
-    const initialState = {
-      siteName: this.siteName
-    };
-    this.modalRef = this.modalService.show(EditSiteNameModalComponent, initialState);
+  updateSiteName() {
+    if (this.editing) {
+      const action = this.taskWrapper.wrapTaskAroundCall({
+        task: new FinishedTask('rbd/mirroring/site_name/edit', {}),
+        call: this.rbdMirroringService.setSiteName(this.rbdmirroringForm.getValue('siteName'))
+      });
+
+      action.subscribe({
+        complete: () => {
+          this.rbdMirroringService.refresh();
+        }
+      });
+    }
+    this.editing = !this.editing;
   }
 
   createBootstrapModal() {