Merge pull request ceph#24606 from p-na/osd-actions-fe

mgr/dashboard: Add support for managing individual OSD settings/characteristics in the frontend Reviewed-by: Tiago Melo <[email protected]> Reviewed-by: Tatjana Dehler <[email protected]> Reviewed-by: Ricardo Marques <[email protected]>
AsylumCorp · Oct 26, 2018 · b9e9741 · b9e9741
2 parents e5a166f + 7a0b4e7
commit b9e9741
Show file tree

Hide file tree

Showing 40 changed files with 725 additions and 142 deletions.
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard/frontend/src/app/app-routing.module.ts
@@ -73,9 +73,15 @@ const routes: Routes = [
   },
   {
     path: 'osd',
-    component: OsdListComponent,
     canActivate: [AuthGuardService],
-    data: { breadcrumbs: 'Cluster/OSDs' }
+    canActivateChild: [AuthGuardService],
+    data: { breadcrumbs: 'Cluster/OSDs' },
+    children: [
+      {
+        path: '',
+        component: OsdListComponent
+      }
+    ]
   },
   {
     path: 'configuration',

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-list/rbd-list.component.ts
@@ -5,7 +5,7 @@ import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 
 import { RbdService } from '../../../shared/api/rbd.service';
 import { ConfirmationModalComponent } from '../../../shared/components/confirmation-modal/confirmation-modal.component';
-import { DeletionModalComponent } from '../../../shared/components/deletion-modal/deletion-modal.component';
+import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
 import { TableComponent } from '../../../shared/datatable/table/table.component';
 import { CellTemplate } from '../../../shared/enum/cell-template.enum';
 import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
@@ -85,7 +85,7 @@ export class RbdListComponent implements OnInit {
       permission: 'create',
       icon: 'fa-plus',
       routerLink: () => '/block/rbd/add',
-      buttonCondition: (selection: CdTableSelection) => !selection.hasSingleSelection,
+      canBePrimary: (selection: CdTableSelection) => !selection.hasSingleSelection,
       name: 'Add'
     };
     const editAction: CdTableAction = {
@@ -102,7 +102,7 @@ export class RbdListComponent implements OnInit {
     };
     const copyAction: CdTableAction = {
       permission: 'create',
-      buttonCondition: (selection: CdTableSelection) => selection.hasSingleSelection,
+      canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
       disable: (selection: CdTableSelection) =>
         !selection.hasSingleSelection || selection.first().cdExecuting,
       icon: 'fa-copy',
@@ -272,7 +272,7 @@ export class RbdListComponent implements OnInit {
     const poolName = this.selection.first().pool_name;
     const imageName = this.selection.first().name;
 
-    this.modalRef = this.modalService.show(DeletionModalComponent, {
+    this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
       initialState: {
         itemDescription: 'RBD',
         submitActionObservable: () =>

diff --git a/...mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-actions.model.ts b/...mgr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-actions.model.ts
@@ -28,15 +28,15 @@ export class RbdSnapshotActionsModel {
   };
   clone: CdTableAction = {
     permission: 'create',
-    buttonCondition: (selection: CdTableSelection) => selection.hasSingleSelection,
+    canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
     disable: (selection: CdTableSelection) =>
       !selection.hasSingleSelection || selection.first().cdExecuting,
     icon: 'fa-clone',
     name: 'Clone'
   };
   copy: CdTableAction = {
     permission: 'create',
-    buttonCondition: (selection: CdTableSelection) => selection.hasSingleSelection,
+    canBePrimary: (selection: CdTableSelection) => selection.hasSingleSelection,
     disable: (selection: CdTableSelection) =>
       !selection.hasSingleSelection || selection.first().cdExecuting,
     icon: 'fa-copy',

diff --git a/...gr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts b/...gr/dashboard/frontend/src/app/ceph/block/rbd-snapshot-list/rbd-snapshot-list.component.ts
@@ -6,7 +6,7 @@ import { of } from 'rxjs';
 
 import { RbdService } from '../../../shared/api/rbd.service';
 import { ConfirmationModalComponent } from '../../../shared/components/confirmation-modal/confirmation-modal.component';
-import { DeletionModalComponent } from '../../../shared/components/deletion-modal/deletion-modal.component';
+import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
 import { CellTemplate } from '../../../shared/enum/cell-template.enum';
 import { CdTableAction } from '../../../shared/models/cd-table-action';
 import { CdTableColumn } from '../../../shared/models/cd-table-column';
@@ -269,7 +269,7 @@ export class RbdSnapshotListComponent implements OnInit, OnChanges {
 
   deleteSnapshotModal() {
     const snapshotName = this.selection.selected[0].name;
-    this.modalRef = this.modalService.show(DeletionModalComponent, {
+    this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
       initialState: {
         itemDescription: 'RBD snapshot',
         submitAction: () => this._asyncTask('deleteSnapshot', 'rbd/snap/delete', snapshotName)

diff --git a/...bind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.ts b/...bind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-list/rbd-trash-list.component.ts
@@ -5,7 +5,7 @@ import * as moment from 'moment';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 
 import { RbdService } from '../../../shared/api/rbd.service';
-import { DeletionModalComponent } from '../../../shared/components/deletion-modal/deletion-modal.component';
+import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
 import { TableComponent } from '../../../shared/datatable/table/table.component';
 import { CellTemplate } from '../../../shared/enum/cell-template.enum';
 import { ViewCacheStatus } from '../../../shared/enum/view-cache-status.enum';
@@ -177,7 +177,7 @@ export class RbdTrashListComponent implements OnInit {
     const imageId = this.selection.first().id;
     const expiresAt = this.selection.first().deferment_end_time;
 
-    this.modalRef = this.modalService.show(DeletionModalComponent, {
+    this.modalRef = this.modalService.show(CriticalConfirmationModalComponent, {
       initialState: {
         itemDescription: 'RBD',
         bodyTemplate: this.deleteTpl,

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
@@ -3,9 +3,11 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
+import { AlertModule } from 'ngx-bootstrap/alert';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { TabsModule } from 'ngx-bootstrap/tabs';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 import { SharedModule } from '../../shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
@@ -19,10 +21,16 @@ import { OsdDetailsComponent } from './osd/osd-details/osd-details.component';
 import { OsdFlagsModalComponent } from './osd/osd-flags-modal/osd-flags-modal.component';
 import { OsdListComponent } from './osd/osd-list/osd-list.component';
 import { OsdPerformanceHistogramComponent } from './osd/osd-performance-histogram/osd-performance-histogram.component';
+import { OsdReweightModalComponent } from './osd/osd-reweight-modal/osd-reweight-modal.component';
 import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.component';
 
 @NgModule({
-  entryComponents: [OsdDetailsComponent, OsdScrubModalComponent, OsdFlagsModalComponent],
+  entryComponents: [
+    OsdDetailsComponent,
+    OsdScrubModalComponent,
+    OsdFlagsModalComponent,
+    OsdReweightModalComponent
+  ],
   imports: [
     CommonModule,
     PerformanceCounterModule,
@@ -32,7 +40,9 @@ import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.co
     FormsModule,
     ReactiveFormsModule,
     BsDropdownModule.forRoot(),
-    ModalModule.forRoot()
+    ModalModule.forRoot(),
+    AlertModule.forRoot(),
+    TooltipModule.forRoot()
   ],
   declarations: [
     HostsComponent,
@@ -45,7 +55,8 @@ import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.co
     OsdFlagsModalComponent,
     HostDetailsComponent,
     ConfigurationDetailsComponent,
-    ConfigurationFormComponent
+    ConfigurationFormComponent,
+    OsdReweightModalComponent
   ]
 })
 export class ClusterModule {}
diff --git a/...d/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html b/...d/src/app/ceph/cluster/configuration/configuration-form/configuration-form.component.html
@@ -136,6 +136,11 @@ <h3 class="panel-title">
                       i18n>
                   {{ patternHelpText }}
                 </span>
+                <span class="help-block"
+                      *ngIf="configForm.showError(section, formDir, 'invalidUuid')"
+                      i18n>
+                  {{ patternHelpText }}
+                </span>
                 <span class="help-block"
                       *ngIf="configForm.showError(section, formDir, 'max')"
                       i18n>

diff --git a/...nd/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/...nd/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
@@ -6,7 +6,7 @@
   </tab>
   <tab heading="Metadata">
     <cd-table-key-value *ngIf="osd.loaded && osd.details.osd_metadata; else noMetaData"
-                        (fetchData)="osd.autoRefresh()"
+                        (fetchData)="refresh()"
                         [data]="osd.details.osd_metadata">
     </cd-table-key-value>
     <ng-template #noMetaData>

diff --git a/...bind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts b/...bind/mgr/dashboard/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
@@ -24,9 +24,6 @@ export class OsdDetailsComponent implements OnChanges {
     };
     if (this.selection.hasSelection) {
       this.osd = this.selection.first();
-      this.osd.autoRefresh = () => {
-        this.refresh();
-      };
       this.refresh();
     }
   }

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
@@ -7,10 +7,9 @@
               selectionType="single"
               (updateSelection)="updateSelection($event)"
               [updateSelectionOnRefresh]="'never'">
-      <div class="table-actions btn-toolbar" *ngIf="permission.update">
+      <div class="table-actions btn-toolbar">
         <cd-table-actions [permission]="permission"
                           [selection]="selection"
-                          onlyDropDown="Perform Task"
                           class="btn-group"
                           [tableActions]="tableActions">
         </cd-table-actions>
@@ -53,3 +52,28 @@
     </cd-grafana>
   </tab>
 </tabset>
+
+<ng-template #osdUsageTpl
+             let-row="row">
+  <cd-usage-bar [totalBytes]="row.stats.stat_bytes"
+                [usedBytes]="row.stats.stat_bytes_used"></cd-usage-bar>
+</ng-template>
+
+<ng-template #markOsdConfirmationTpl i18n let-markActionDescription="markActionDescription">
+  <strong>OSD {{ selection.first().id }}</strong> will be marked
+  <strong>{{ markActionDescription }}</strong> if you proceed.
+</ng-template>
+
+<ng-template #criticalConfirmationTpl
+             i18n
+             let-safeToDestroyResult="result"
+             let-actionDescription="actionDescription">
+  <div *ngIf="!safeToDestroyResult['safe-to-destroy']"
+       class="danger">
+    <cd-warning-panel>
+      {{ safeToDestroyResult.message }}
+    </cd-warning-panel>
+  </div>
+  <strong>OSD {{ selection.first().id }}</strong> will be
+  <strong>{{ actionDescription }}</strong> if you proceed.
+</ng-template>