mgr/dashboard: Add scrub action to the OSD table

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 364ac5c6680af3626fbfcc7abbc7c7c35e5e13cd..9d0460e2b3e3e1f0da78576d1300e3cbbe5acb5e 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
@@ -18,9 +18,7 @@ import { OsdPerformanceHistogramComponent } from './osd/osd-performance-histogra
 import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.component';
 
 @NgModule({
-  entryComponents: [
-    OsdDetailsComponent
-  ],
+  entryComponents: [OsdDetailsComponent, OsdScrubModalComponent],
   imports: [
     CommonModule,
     PerformanceCounterModule,

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index 86db34300a437b5fab024aca4c9e992a980ccb0f..c25b416d2766e96d83e4814d84734c5a1c756c9d 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -10,6 +10,37 @@
           selectionType="single"
           (updateSelection)="updateSelection($event)"
           [updateSelectionOnRefresh]="false">
+  <div class="table-actions">
+    <div class="btn-group"
+         dropdown>
+      <button dropdownToggle
+              type="button"
+              class="btn btn-sm btn-primary dropdown-toggle tc_scrub_toggle"
+              [ngClass]="{disabled: !tableComponent.selection.hasSelection}">
+        <ng-container i18n> Perform Task</ng-container>
+        <span class="caret"></span>
+      </button>
+      <ul *dropdownMenu
+          class="dropdown-menu"
+          role="menu">
+        <li role="menuitem"
+            (click)="scrubAction(false)">
+          <a>
+            <i class="fa fa-fw fa-stethoscope"></i>
+            <ng-container i18n>Scrub</ng-container>
+          </a>
+        </li>
+        <li role="menuitem"
+            (click)="scrubAction(true)">
+          <a>
+            <i class="fa fa-fw fa-stethoscope"></i>
+            <ng-container i18n>Deep Scrub</ng-container>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
   <cd-osd-details cdTableDetail
                   [selection]="selection">
   </cd-osd-details>
@@ -20,12 +51,14 @@
   <span *ngFor="let state of value; last as last">
     <span [class.text-success]="'up' === state || 'in' === state"
           [class.text-warning]="'down' === state || 'out' === state">
-      {{ state }}</span><span *ngIf="!last">, </span>
+      {{ state }}</span>
+    <span *ngIf="!last">, </span>
     <!-- Has to be on the same line to prevent a space between state and comma. -->
   </span>
 </ng-template>
 
 <ng-template #osdUsageTpl
              let-row="row">
-  <cd-usage-bar [totalBytes]="row.stats.stat_bytes" [usedBytes]="row.stats.stat_bytes_used"></cd-usage-bar>
+  <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
+                [usedBytes]="row.stats.stat_bytes_used"></cd-usage-bar>
 </ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index 2f3980947f5bb1c92eca1e65bec76459f22b45d8..223debe42bfc89e02c85d4931a863faa9ad6b2b0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -1,38 +1,44 @@
 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
+import { BsModalRef, BsModalService } from 'ngx-bootstrap';
+
 import { OsdService } from '../../../../shared/api/osd.service';
+import { TableComponent } from '../../../../shared/datatable/table/table.component';
 import { CellTemplate } from '../../../../shared/enum/cell-template.enum';
 import { CdTableColumn } from '../../../../shared/models/cd-table-column';
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
 import { DimlessBinaryPipe } from '../../../../shared/pipes/dimless-binary.pipe';
+import { OsdScrubModalComponent } from '../osd-scrub-modal/osd-scrub-modal.component';
 
 @Component({
   selector: 'cd-osd-list',
   templateUrl: './osd-list.component.html',
   styleUrls: ['./osd-list.component.scss']
 })
-
 export class OsdListComponent implements OnInit {
   @ViewChild('statusColor') statusColor: TemplateRef<any>;
   @ViewChild('osdUsageTpl') osdUsageTpl: TemplateRef<any>;
+  @ViewChild(TableComponent) tableComponent: TableComponent;
 
+  bsModalRef: BsModalRef;
   osds = [];
   columns: CdTableColumn[];
   selection = new CdTableSelection();
 
   constructor(
     private osdService: OsdService,
-    private dimlessBinaryPipe: DimlessBinaryPipe
-  ) { }
+    private dimlessBinaryPipe: DimlessBinaryPipe,
+    private modalService: BsModalService
+  ) {}
 
   ngOnInit() {
     this.columns = [
-      {prop: 'host.name', name: 'Host'},
-      {prop: 'id', name: 'ID', cellTransformation: CellTemplate.bold},
-      {prop: 'collectedStates', name: 'Status', cellTemplate: this.statusColor},
-      {prop: 'stats.numpg', name: 'PGs'},
-      {prop: 'stats.stat_bytes', name: 'Size', pipe: this.dimlessBinaryPipe},
-      {name: 'Usage', cellTemplate: this.osdUsageTpl},
+      { prop: 'host.name', name: 'Host' },
+      { prop: 'id', name: 'ID', cellTransformation: CellTemplate.bold },
+      { prop: 'collectedStates', name: 'Status', cellTemplate: this.statusColor },
+      { prop: 'stats.numpg', name: 'PGs' },
+      { prop: 'stats.stat_bytes', name: 'Size', pipe: this.dimlessBinaryPipe },
+      { name: 'Usage', cellTemplate: this.osdUsageTpl },
       {
         prop: 'stats_history.out_bytes',
         name: 'Read bytes',
@@ -43,8 +49,8 @@ export class OsdListComponent implements OnInit {
         name: 'Writes bytes',
         cellTransformation: CellTemplate.sparkline
       },
-      {prop: 'stats.op_r', name: 'Read ops', cellTransformation: CellTemplate.perSecond},
-      {prop: 'stats.op_w', name: 'Write ops', cellTransformation: CellTemplate.perSecond}
+      { prop: 'stats.op_r', name: 'Read ops', cellTransformation: CellTemplate.perSecond },
+      { prop: 'stats.op_w', name: 'Write ops', cellTransformation: CellTemplate.perSecond }
     ];
   }
 
@@ -57,19 +63,32 @@ export class OsdListComponent implements OnInit {
       this.osds = data;
       data.map((osd) => {
         osd.collectedStates = this.collectStates(osd);
-        osd.stats_history.out_bytes = osd.stats_history.op_out_bytes.map(i => i[1]);
-        osd.stats_history.in_bytes = osd.stats_history.op_in_bytes.map(i => i[1]);
+        osd.stats_history.out_bytes = osd.stats_history.op_out_bytes.map((i) => i[1]);
+        osd.stats_history.in_bytes = osd.stats_history.op_in_bytes.map((i) => i[1]);
         return osd;
       });
     });
   }
 
   collectStates(osd) {
-    const select = (onState, offState) => osd[onState] ? onState : offState;
+    const select = (onState, offState) => (osd[onState] ? onState : offState);
     return [select('up', 'down'), select('in', 'out')];
   }
 
   beforeShowDetails(selection: CdTableSelection) {
     return selection.hasSingleSelection;
   }
+
+  scrubAction(deep) {
+    if (!this.tableComponent.selection.hasSelection) {
+      return;
+    }
+
+    const initialState = {
+      selected: this.tableComponent.selection.selected,
+      deep: deep
+    };
+
+    this.bsModalRef = this.modalService.show(OsdScrubModalComponent, { initialState });
+  }
 }