mgr/dashboard v2: Don't show details if multiple OSDs are selected

Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/cluster.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/cluster.module.ts
index 8f5b7b44ba928844822fb9f50ed7c1f03ceb26d1..9b683f0a8d40d418b9e57b6fdb3261af41c1564a 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/cluster.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/cluster.module.ts
@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
-import { AccordionModule, TabsModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap';
 import { ComponentsModule } from '../../shared/components/components.module';
 import { SharedModule } from '../../shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
@@ -26,7 +26,6 @@ import { OsdService } from './osd/osd.service';
     CommonModule,
     PerformanceCounterModule,
     ComponentsModule,
-    AccordionModule,
     TabsModule,
     SharedModule,
     RouterModule,

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
index ac1cde1fa50969f7e8b6d0c4b8f0eedd21a3baec..831e5620dc30bcddcfc0263dfbe940fbb4dff912 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.html
@@ -1,42 +1,36 @@
-<accordion>
-  <accordion-group *ngFor="let osd of selected"
-                   [heading]="osd.tree.name"
-                   [isOpen]="true">
-    <div *ngIf="osd.loaded">
-      <tabset>
-        <tab heading="Attributes (OSD map)">
-          <cd-table-key-value [data]="osd.details.osd_map">
-          </cd-table-key-value>
-        </tab>
-        <tab heading="Metadata">
-          <cd-table-key-value *ngIf="osd.details.osd_metadata"
-                              (fetchData)="osd.autoRefresh()"
-                              [data]="osd.details.osd_metadata">
-          </cd-table-key-value>
-        </tab>
-        <tab heading="Performance counter">
-          <cd-table-performance-counter serviceType="osd"
-                                        [serviceId]="osd.id">
-          </cd-table-performance-counter>
-        </tab>
-        <tab heading="Histogram">
-          <h3 *ngIf="osd.histogram_failed">
-            Histogram not available -> <span class="text-warning">{{ osd.histogram_failed }}</span>
-          </h3>
-          <div class="row" *ngIf="osd.details.histogram">
-            <div class="col-md-6">
-              <h4>Writes</h4>
-              <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_w_latency_in_bytes_histogram">
-              </cd-osd-performance-histogram>
-            </div>
-            <div class="col-md-6">
-              <h4>Reads</h4>
-              <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_r_latency_out_bytes_histogram">
-              </cd-osd-performance-histogram>
-            </div>
-          </div>
-        </tab>
-      </tabset>
+<tabset>
+  <tab heading="Attributes (OSD map)">
+    <cd-table-key-value *ngIf="osd.loaded"
+                        [data]="osd.details.osd_map">
+    </cd-table-key-value>
+  </tab>
+  <tab heading="Metadata">
+    <cd-table-key-value *ngIf="osd.loaded"
+                        (fetchData)="osd.autoRefresh()"
+                        [data]="osd.details.osd_metadata">
+    </cd-table-key-value>
+  </tab>
+  <tab heading="Performance counter">
+    <cd-table-performance-counter *ngIf="osd.loaded"
+                                  serviceType="osd"
+                                  [serviceId]="osd.id">
+    </cd-table-performance-counter>
+  </tab>
+  <tab heading="Histogram">
+    <h3 *ngIf="osd.loaded && osd.histogram_failed">
+      Histogram not available -> <span class="text-warning">{{ osd.histogram_failed }}</span>
+    </h3>
+    <div class="row" *ngIf="osd.loaded && osd.details.histogram">
+      <div class="col-md-6">
+        <h4>Writes</h4>
+        <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_w_latency_in_bytes_histogram">
+        </cd-osd-performance-histogram>
+      </div>
+      <div class="col-md-6">
+        <h4>Reads</h4>
+        <cd-osd-performance-histogram [histogram]="osd.details.histogram.osd.op_r_latency_out_bytes_histogram">
+        </cd-osd-performance-histogram>
+      </div>
     </div>
-  </accordion-group>
-</accordion>
+  </tab>
+</tabset>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts
index 45b4b15ff8b64abaf4406b1ff1f8afd94d4b9688..67eaaa9c41b028f39b20e233c9293929c29ac600 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.spec.ts
@@ -1,7 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AccordionConfig, AccordionModule, TabsModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap';
 
 import { DataTableModule } from '../../../../shared/datatable/datatable.module';
 import { PerformanceCounterModule } from '../../../performance-counter/performance-counter.module';
@@ -19,8 +19,7 @@ describe('OsdDetailsComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         HttpClientModule,
-        AccordionModule,
-        TabsModule,
+        TabsModule.forRoot(),
         PerformanceCounterModule,
         DataTableModule
       ],
@@ -28,7 +27,7 @@ describe('OsdDetailsComponent', () => {
         OsdDetailsComponent,
         OsdPerformanceHistogramComponent
       ],
-      providers: [OsdService, AccordionConfig]
+      providers: [OsdService]
     })
     .compileComponents();
   }));

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
index 28f22f3f67c8071f17f3a5ea3595bb9232857952..572e0d65b549de17b46204eb20f0d1a91619bfbb 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-details/osd-details.component.ts
@@ -10,28 +10,34 @@ import { OsdService } from '../osd.service';
   styleUrls: ['./osd-details.component.scss']
 })
 export class OsdDetailsComponent implements OnInit {
-  @Input() selected?: any[];
+  osd: any;
+
+  @Input() selected?: any[] = [];
 
   constructor(private osdService: OsdService) {}
 
   ngOnInit() {
-    _.each(this.selected, (osd) => {
-      this.refresh(osd);
-      osd.autoRefresh = () => {
-        this.refresh(osd);
+    this.osd = {
+      loaded: false
+    };
+    if (this.selected.length > 0) {
+      this.osd = this.selected[0];
+      this.osd.autoRefresh = () => {
+        this.refresh();
       };
-    });
+      this.refresh();
+    }
   }
 
-  refresh(osd: any) {
-    this.osdService.getDetails(osd.tree.id).subscribe((data: any) => {
-      osd.details = data;
-      if (!_.isObject(data.histogram)) {
-        osd.histogram_failed = data.histogram;
-        osd.details.histogram = undefined;
-      }
-      osd.loaded = true;
-    });
+  refresh() {
+    this.osdService.getDetails(this.osd.tree.id)
+      .subscribe((data: any) => {
+        this.osd.details = data;
+        if (!_.isObject(data.histogram)) {
+          this.osd.histogram_failed = data.histogram;
+          this.osd.details.histogram = undefined;
+        }
+        this.osd.loaded = true;
+      });
   }
-
 }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
index e8b9a0ce3304ecea4fe98418af50cafd1c782b0d..d67eefb55bf8bcacb669fb0045ec871bcf12698b 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.html
@@ -7,7 +7,8 @@
 <cd-table [data]="osds"
           (fetchData)="getOsdList()"
           [columns]="columns"
-          [detailsComponent]="detailsComponent">
+          [detailsComponent]="detailsComponent"
+          [beforeShowDetails]="beforeShowDetails">
 </cd-table>
 <ng-template #statusColor
              let-value="value">

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
index 4871fd62c03fa98ded9faee7ecb9ade2c822c1f0..06faf69da28c3035160e9475868a2ad8d4e1ee68 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.spec.ts
@@ -1,7 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AccordionModule, TabsModule } from 'ngx-bootstrap';
+import { TabsModule } from 'ngx-bootstrap';
 
 import { DataTableModule } from '../../../../shared/datatable/datatable.module';
 import { DimlessPipe } from '../../../../shared/pipes/dimless.pipe';
@@ -22,7 +22,6 @@ describe('OsdListComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         HttpClientModule,
-        AccordionModule,
         PerformanceCounterModule,
         TabsModule,
         DataTableModule

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
index a179ba1601ec8531780627e2f0c04efbb21fe344..5573550e982580376d0eefd6d2c39aca66f9ad9d 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/cluster/osd/osd-list/osd-list.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
 
 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 { DimlessPipe } from '../../../../shared/pipes/dimless.pipe';
 import { OsdService } from '../osd.service';
 
@@ -62,4 +63,8 @@ export class OsdListComponent implements OnInit {
     const select = (onState, offState) => osd[onState] ? onState : offState;
     return [select('up', 'down'), select('in', 'out')];
   }
+
+  beforeShowDetails(selection: CdTableSelection) {
+    return selection.hasSingleSelection;
+  }
 }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
index 870ed29633d8ff2dd80e6a6e8f2009f37df0d978..5ba9c0c7129caa15fdeee2cde0c8ad016c86b157 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/datatable/table/table.component.ts
@@ -228,6 +228,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     }
     if (_.isFunction(this.beforeShowDetails)) {
       if (!this.beforeShowDetails(this.selection)) {
+        this.detailTemplate.viewContainerRef.clear();
         return;
       }
     }