mgr/dashboard: Add OSD scrub modal component

Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
index b1bdeaba2de81389bc03bb498f2fa4f69682f316..364ac5c6680af3626fbfcc7abbc7c7c35e5e13cd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ModalModule } from 'ngx-bootstrap/modal';
 import { TabsModule } from 'ngx-bootstrap/tabs';
 
 import { SharedModule } from '../../shared/shared.module';
@@ -12,9 +14,8 @@ import { HostsComponent } from './hosts/hosts.component';
 import { MonitorComponent } from './monitor/monitor.component';
 import { OsdDetailsComponent } from './osd/osd-details/osd-details.component';
 import { OsdListComponent } from './osd/osd-list/osd-list.component';
-import {
-  OsdPerformanceHistogramComponent
-} from './osd/osd-performance-histogram/osd-performance-histogram.component';
+import { OsdPerformanceHistogramComponent } from './osd/osd-performance-histogram/osd-performance-histogram.component';
+import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.component';
 
 @NgModule({
   entryComponents: [
@@ -26,7 +27,10 @@ import {
     TabsModule.forRoot(),
     SharedModule,
     RouterModule,
-    FormsModule
+    FormsModule,
+    ReactiveFormsModule,
+    BsDropdownModule.forRoot(),
+    ModalModule.forRoot()
   ],
   declarations: [
     HostsComponent,
@@ -34,7 +38,8 @@ import {
     ConfigurationComponent,
     OsdListComponent,
     OsdDetailsComponent,
-    OsdPerformanceHistogramComponent
+    OsdPerformanceHistogramComponent,
+    OsdScrubModalComponent
   ]
 })
 export class ClusterModule {}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html
new file mode 100644 (file)
index 0000000..77e588f
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.html
@@ -0,0 +1,37 @@
+<cd-modal [modalRef]="bsModalRef">
+  <ng-container class="modal-title"
+                i18n>
+    OSDs {{ deep ? 'Deep ' : '' }}Scrub
+  </ng-container>
+
+  <ng-container class="modal-content">
+    <form name="scrubForm"
+          class="form-horizontal"
+          #formDir="ngForm"
+          [formGroup]="scrubForm"
+          novalidate>
+      <div class="modal-body">
+        <div *ngIf="selected.length === 1">
+          <p i18n>
+            You are about to apply a {{ deep ? 'deep ' : '' }}scrub to the OSD
+            <strong>{{ selected[0].id }}</strong>.
+          </p>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <cd-submit-button (submitAction)="scrub()"
+                          [form]="scrubForm"
+                          i18n>
+          Submit
+        </cd-submit-button>
+
+        <button class="btn btn-link btn-sm"
+                (click)="bsModalRef.hide()"
+                i18n>
+          Cancel
+        </button>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.scss
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.spec.ts
new file mode 100644 (file)
index 0000000..4788966
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.spec.ts
@@ -0,0 +1,55 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { BsModalRef } from 'ngx-bootstrap';
+
+import { OsdService } from '../../../../shared/api/osd.service';
+import { NotificationService } from '../../../../shared/services/notification.service';
+import { OsdScrubModalComponent } from './osd-scrub-modal.component';
+
+describe('OsdScrubModalComponent', () => {
+  let component: OsdScrubModalComponent;
+  let fixture: ComponentFixture<OsdScrubModalComponent>;
+
+  const fakeService = {
+    list: () => {
+      return new Promise(function(resolve, reject) {
+        return {};
+      });
+    },
+    scrub: (data: any) => {
+      return new Promise(function(resolve, reject) {
+        return {};
+      });
+    },
+    scrub_many: (data: any) => {
+      return new Promise(function(resolve, reject) {
+        return {};
+      });
+    }
+  };
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ReactiveFormsModule],
+      declarations: [OsdScrubModalComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+      providers: [
+        BsModalRef,
+        { provide: OsdService, useValue: fakeService },
+        { provide: NotificationService, useValue: fakeService }
+      ]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OsdScrubModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts
new file mode 100644 (file)
index 0000000..7847387
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-scrub-modal/osd-scrub-modal.component.ts
@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { BsModalRef } from 'ngx-bootstrap';
+
+import { OsdService } from '../../../../shared/api/osd.service';
+import { NotificationType } from '../../../../shared/enum/notification-type.enum';
+import { NotificationService } from '../../../../shared/services/notification.service';
+
+@Component({
+  selector: 'cd-osd-scrub-modal',
+  templateUrl: './osd-scrub-modal.component.html',
+  styleUrls: ['./osd-scrub-modal.component.scss']
+})
+export class OsdScrubModalComponent implements OnInit {
+  deep: boolean;
+  selected = [];
+  scrubForm: FormGroup;
+
+  constructor(
+    public bsModalRef: BsModalRef,
+    private osdService: OsdService,
+    private notificationService: NotificationService
+  ) {}
+
+  ngOnInit() {
+    this.scrubForm = new FormGroup({});
+  }
+
+  scrub() {
+    const id = this.selected[0].id;
+
+    this.osdService.scrub(id, this.deep).subscribe(
+      (res) => {
+        const operation = this.deep ? 'Deep scrub' : 'Scrub';
+
+        this.notificationService.show(
+          NotificationType.success,
+          `${operation} was initialized in the following OSD: ${id}`
+        );
+
+        this.bsModalRef.hide();
+      },
+      () => {
+        this.bsModalRef.hide();
+      }
+    );
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
index 0c5ba7337621a1fdd67d384e2a36c00bdde93e99..ff6f46268e77d411ef13c802f575157fa5dd3406 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/components.module.ts
@@ -28,7 +28,7 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     ChartsModule,
     ReactiveFormsModule,
     PipesModule,
-    ModalModule.forRoot()
+    ModalModule.forRoot(),
   ],
   declarations: [
     ViewCacheComponent,
@@ -51,7 +51,8 @@ import { ViewCacheComponent } from './view-cache/view-cache.component';
     ErrorPanelComponent,
     LoadingPanelComponent,
     InfoPanelComponent,
-    UsageBarComponent
+    UsageBarComponent,
+    ModalComponent
   ],
   entryComponents: [
     ModalComponent,