From bbd69caf17c64f5e93d95375a66ebf07efc427fb Mon Sep 17 00:00:00 2001
From: Tatjana Dehler <tdehler@suse.com>
Date: Mon, 8 Oct 2018 11:49:11 +0200
Subject: [PATCH] mgr/dashboard: move config table details to their own
 component

Fixes: http://tracker.ceph.com/issues/24455

Signed-off-by: Tatjana Dehler <tdehler@suse.com>
---
 .../src/app/ceph/cluster/cluster.module.ts    |  4 +-
 .../configuration-details.component.html      |  7 ++++
 .../configuration-details.component.scss      |  0
 .../configuration-details.component.spec.ts   | 27 +++++++++++++
 .../configuration-details.component.ts        | 22 ++++++++++
 .../configuration.component.html              | 40 +++++++++----------
 .../configuration.component.spec.ts           |  3 +-
 7 files changed, 80 insertions(+), 23 deletions(-)
 create mode 100755 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
 create mode 100755 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.scss
 create mode 100755 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts
 create mode 100755 src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.ts

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 357c8062a4a..563871f5321 100644
--- 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
@@ -9,6 +9,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
 
 import { SharedModule } from '../../shared/shared.module';
 import { PerformanceCounterModule } from '../performance-counter/performance-counter.module';
+import { ConfigurationDetailsComponent } from './configuration/configuration-details/configuration-details.component';
 import { ConfigurationComponent } from './configuration/configuration.component';
 import { HostDetailsComponent } from './hosts/host-details/host-details.component';
 import { HostsComponent } from './hosts/hosts.component';
@@ -41,7 +42,8 @@ import { OsdScrubModalComponent } from './osd/osd-scrub-modal/osd-scrub-modal.co
     OsdPerformanceHistogramComponent,
     OsdScrubModalComponent,
     OsdFlagsModalComponent,
-    HostDetailsComponent
+    HostDetailsComponent,
+    ConfigurationDetailsComponent
   ]
 })
 export class ClusterModule {}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
new file mode 100755
index 00000000000..ea9b527b785
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
@@ -0,0 +1,7 @@
+<tabset cdTableDetail *ngIf="selection?.hasSingleSelection">
+  <tab i18n-heading
+       heading="Details">
+    <cd-table-key-value [data]="selection.first()" [autoReload]="false">
+    </cd-table-key-value>
+  </tab>
+</tabset>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.scss
new file mode 100755
index 00000000000..e69de29bb2d
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts
new file mode 100755
index 00000000000..dd70c1df22a
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.spec.ts
@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TabsModule } from 'ngx-bootstrap';
+
+import { configureTestBed } from '../../../../../testing/unit-test-helper';
+import { DataTableModule } from '../../../../shared/datatable/datatable.module';
+import { ConfigurationDetailsComponent } from './configuration-details.component';
+
+describe('ConfigurationDetailsComponent', () => {
+  let component: ConfigurationDetailsComponent;
+  let fixture: ComponentFixture<ConfigurationDetailsComponent>;
+
+  configureTestBed({
+    declarations: [ConfigurationDetailsComponent],
+    imports: [DataTableModule, TabsModule.forRoot()]
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfigurationDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.ts
new file mode 100755
index 00000000000..359898da122
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input, OnChanges } from '@angular/core';
+
+import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
+
+@Component({
+  selector: 'cd-configuration-details',
+  templateUrl: './configuration-details.component.html',
+  styleUrls: ['./configuration-details.component.scss']
+})
+export class ConfigurationDetailsComponent implements OnChanges {
+  @Input()
+  selection: CdTableSelection;
+  selectedItem: any;
+
+  constructor() {}
+
+  ngOnChanges() {
+    if (this.selection.hasSelection) {
+      this.selectedItem = this.selection.first();
+    }
+  }
+}
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html
index 7b3aeb3aa4c..b7012699ece 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html
@@ -14,27 +14,25 @@
       </select>
     </div>
   </div>
-  <tabset cdTableDetail *ngIf="selection.hasSingleSelection">
-    <tab i18n-heading
-         heading="Details">
-      <cd-table-key-value [data]="selection.first()" [autoReload]="false">
-      </cd-table-key-value>
-    </tab>
-  </tabset>
-  <ng-template #confValTpl let-value="value">
-    <span *ngIf="value">
-      <span *ngFor="let conf of value; last as isLast">
-        {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br/>
-      </span>
+  <cd-configuration-details cdTableDetail
+                            [selection]="selection">
+  </cd-configuration-details>
+</cd-table>
+
+<ng-template #confValTpl let-value="value">
+  <span *ngIf="value">
+    <span *ngFor="let conf of value; last as isLast">
+      {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br/>
     </span>
-  </ng-template>
-  <ng-template #confFlagTpl let-value="value">
-    <span *ngIf="value !== ''">
-      <span *ngFor="let flag of value; last as isLast">
-        <span title="{{ flags[flag] }}">
-          {{ flag | uppercase }}{{ !isLast ? "," : "" }}<br/>
-        </span>
+  </span>
+</ng-template>
+
+<ng-template #confFlagTpl let-value="value">
+  <span *ngIf="value !== ''">
+    <span *ngFor="let flag of value; last as isLast">
+      <span title="{{ flags[flag] }}">
+        {{ flag | uppercase }}{{ !isLast ? "," : "" }}<br/>
       </span>
     </span>
-  </ng-template>
-</cd-table>
+  </span>
+</ng-template>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.spec.ts
index 9bc397802ad..4099de03ec1 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.spec.ts
@@ -8,6 +8,7 @@ import { TabsModule } from 'ngx-bootstrap/tabs/tabs.module';
 import { configureTestBed } from '../../../../testing/unit-test-helper';
 import { ConfigurationService } from '../../../shared/api/configuration.service';
 import { SharedModule } from '../../../shared/shared.module';
+import { ConfigurationDetailsComponent } from './configuration-details/configuration-details.component';
 import { ConfigurationComponent } from './configuration.component';
 
 describe('ConfigurationComponent', () => {
@@ -15,7 +16,7 @@ describe('ConfigurationComponent', () => {
   let fixture: ComponentFixture<ConfigurationComponent>;
 
   configureTestBed({
-    declarations: [ConfigurationComponent],
+    declarations: [ConfigurationComponent, ConfigurationDetailsComponent],
     providers: [ConfigurationService],
     imports: [
       SharedModule,
-- 
2.39.5