[WIP] mgr/dashboard: support editing block mirror pools

Signed-off-by: Jason Dillaman <dillaman@redhat.com>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/mirroring.module.ts

@@ -18,9 +18,15 @@ import { ImageListComponent } from './image-list/image-list.component';
 import { MirrorHealthColorPipe } from './mirror-health-color.pipe';
 import { OverviewComponent } from './overview/overview.component';
 import { PoolListComponent } from './pool-list/pool-list.component';
+import { PoolEditModeModalComponent } from './pool-edit-mode-modal/pool-edit-mode-modal.component';
+import { PoolEditPeerModalComponent } from './pool-edit-peer-modal/pool-edit-peer-modal.component';
 
 @NgModule({
-  entryComponents: [OverviewComponent],
+  entryComponents: [
+    OverviewComponent,
+    PoolEditModeModalComponent,
+    PoolEditPeerModalComponent
+  ],
   imports: [
     CommonModule,
     TabsModule.forRoot(),
@@ -39,6 +45,8 @@ import { PoolListComponent } from './pool-list/pool-list.component';
     DaemonListComponent,
     ImageListComponent,
     OverviewComponent,
+    PoolEditModeModalComponent,
+    PoolEditPeerModalComponent,
     PoolListComponent,
     MirrorHealthColorPipe
   ],

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.html

@@ -0,0 +1,51 @@
+<cd-modal>
+  <ng-container i18n
+                class="modal-title">Edit pool mirror mode</ng-container>
+
+  <ng-container class="modal-content">
+    <form name="editModeForm"
+          class="form"
+          #formDir="ngForm"
+          [formGroup]="editModeForm"
+          novalidate>
+      <div class="modal-body">
+        <p>
+          <ng-container i18n>To edit the mirror mode for pool</ng-container>&nbsp;
+          <kbd>{{ poolName }}</kbd>
+          <ng-container i18n>, select a new mode from the list and click</ng-container>&nbsp;
+          <kbd i18n>Update</kbd>.&nbsp;
+        </p>
+
+        <div class="form-group"
+             [ngClass]="{'has-error': editModeForm.showError('mirrorMode', formDir)}">
+          <label class="control-label"
+                 for="mirrorMode">
+            <span i18n>Mode</span>
+          </label>
+          <select id="mirrorMode"
+                  name="mirrorMode"
+                  class="form-control"
+                  formControlName="mirrorMode">
+            <option *ngFor="let mirrorMode of mirrorModes"
+                    [value]="mirrorMode.id">{{ mirrorMode.name }}</option>
+          </select>
+          <span class="help-block"
+                *ngIf="editModeForm.showError('mirrorMode', formDir, 'cannotDisable')"
+                i18n>Peer clusters must be removed prior to disabling mirror.</span>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <div class="button-group text-right">
+          <cd-submit-button i18n
+                            [form]="editModeForm"
+                            (submitAction)="update()">Update</cd-submit-button>
+          <button i18n
+                  type="button"
+                  class="btn btn-sm btn-default"
+                  (click)="modalRef.hide()">Cancel</button>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-mode-modal/pool-edit-mode-modal.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+import * as moment from 'moment';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+import { RbdService } from '../../../../shared/api/rbd.service';
+import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
+import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
+import { CdValidators } from '../../../../shared/forms/cd-validators';
+import { ExecutingTask } from '../../../../shared/models/executing-task';
+import { FinishedTask } from '../../../../shared/models/finished-task';
+import { TaskWrapperService } from '../../../../shared/services/task-wrapper.service';
+
+@Component({
+  selector: 'cd-pool-edit-mode-modal',
+  templateUrl: './pool-edit-mode-modal.component.html',
+  styleUrls: ['./pool-edit-mode-modal.component.scss']
+})
+export class PoolEditModeModalComponent implements OnInit {
+  metaType: string;
+  poolName: string;
+  mirrorMode: string;
+  executingTasks: ExecutingTask[];
+
+  editModeForm: CdFormGroup;
+  bsConfig = {
+    containerClass: 'theme-default'
+  };
+  pattern: string;
+
+  mirrorModes: Array<{id: string, name: string}> = [
+    {id: 'disabled', name: 'Disabled'},
+    {id: 'pool', name: 'Pool'},
+    {id: 'image', name: 'Image'}
+  ];
+
+  constructor(
+    private rbdService: RbdService,
+    public modalRef: BsModalRef,
+    private fb: CdFormBuilder,
+    private taskWrapper: TaskWrapperService
+  ) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.editModeForm = new CdFormGroup({
+      mirrorMode: new FormControl('', {
+        validators: [Validators.required]
+      })
+    });
+  }
+
+  ngOnInit() {
+    this.pattern = `${this.poolName}/${this.mirrorMode}`;
+  }
+
+  update() {
+    // TODO
+    this.modalRef.hide();
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.html

@@ -0,0 +1,51 @@
+<cd-modal>
+  <ng-container i18n
+                class="modal-title">Edit pool mirror peer</ng-container>
+
+  <ng-container class="modal-content">
+    <form name="editPeerForm"
+          class="form"
+          #formDir="ngForm"
+          [formGroup]="editPeerForm"
+          novalidate>
+      <div class="modal-body">
+        <p>
+          <ng-container i18n>To edit the mirror mode for pool</ng-container>&nbsp;
+          <kbd>{{ poolName }}</kbd>
+          <ng-container i18n>, select a new mode from the list and click</ng-container>&nbsp;
+          <kbd i18n>Update</kbd>.&nbsp;
+        </p>
+
+        <div class="form-group"
+             [ngClass]="{'has-error': editPeerForm.showError('mirrorMode', formDir)}">
+          <label class="control-label"
+                 for="mirrorMode">
+            <span i18n>Mode</span>
+          </label>
+          <select id="mirrorMode"
+                  name="mirrorMode"
+                  class="form-control"
+                  formControlName="mirrorMode">
+            <option *ngFor="let mirrorMode of mirrorModes"
+                    [value]="mirrorMode.id">{{ mirrorMode.name }}</option>
+          </select>
+          <span class="help-block"
+                *ngIf="editPeerForm.showError('mirrorMode', formDir, 'cannotDisable')"
+                i18n>Peer clusters must be removed prior to disabling mirror.</span>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <div class="button-group text-right">
+          <cd-submit-button i18n
+                            [form]="editPeerForm"
+                            (submitAction)="update()">Update</cd-submit-button>
+          <button i18n
+                  type="button"
+                  class="btn btn-sm btn-default"
+                  (click)="modalRef.hide()">Cancel</button>
+        </div>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-edit-peer-modal/pool-edit-peer-modal.component.ts

@@ -0,0 +1,63 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+
+import * as moment from 'moment';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+import { RbdService } from '../../../../shared/api/rbd.service';
+import { CdFormBuilder } from '../../../../shared/forms/cd-form-builder';
+import { CdFormGroup } from '../../../../shared/forms/cd-form-group';
+import { CdValidators } from '../../../../shared/forms/cd-validators';
+import { ExecutingTask } from '../../../../shared/models/executing-task';
+import { FinishedTask } from '../../../../shared/models/finished-task';
+import { TaskWrapperService } from '../../../../shared/services/task-wrapper.service';
+
+@Component({
+  selector: 'cd-pool-edit-peer-modal',
+  templateUrl: './pool-edit-peer-modal.component.html',
+  styleUrls: ['./pool-edit-peer-modal.component.scss']
+})
+export class PoolEditPeerModalComponent implements OnInit {
+  metaType: string;
+  poolName: string;
+  mirrorMode: string;
+  executingTasks: ExecutingTask[];
+
+  editPeerForm: CdFormGroup;
+  bsConfig = {
+    containerClass: 'theme-default'
+  };
+  pattern: string;
+
+  mirrorModes: Array<{id: string, name: string}> = [
+    {id: 'disabled', name: 'Disabled'},
+    {id: 'pool', name: 'Pool'},
+    {id: 'image', name: 'Image'}
+  ];
+
+  constructor(
+    private rbdService: RbdService,
+    public modalRef: BsModalRef,
+    private fb: CdFormBuilder,
+    private taskWrapper: TaskWrapperService
+  ) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.editPeerForm = new CdFormGroup({
+      mirrorMode: new FormControl('', {
+        validators: [Validators.required]
+      })
+    });
+  }
+
+  ngOnInit() {
+    this.pattern = `${this.poolName}/${this.mirrorMode}`;
+  }
+
+  update() {
+    // TODO
+    this.modalRef.hide();
+  }
+}

src/pybind/mgr/dashboard/frontend/src/app/ceph/block/mirroring/pool-list/pool-list.component.html

@@ -1,8 +1,17 @@
 <cd-table [data]="data"
           columnMode="flex"
           [columns]="columns"
+          identifier="name"
+          forceIdentifier="true"
           [autoReload]="0"
-          (fetchData)="refresh()">
+          (fetchData)="refresh()"
+          selectionType="single"
+          (updateSelection)="updateSelection($event)">
+  <cd-table-actions class="table-actions"
+                    [permission]="permission"
+                    [selection]="selection"
+                    [tableActions]="tableActions">
+  </cd-table-actions>
 </cd-table>
 
 <ng-template #healthTmpl