From 32ee4764797dbdfcf981ade29c4a85bd5d8ebdf3 Mon Sep 17 00:00:00 2001
From: Tatjana Dehler <tdehler@suse.com>
Date: Wed, 25 Apr 2018 15:06:32 +0200
Subject: [PATCH] mgr/dashboard: replace configuration html table with cd-table

The configuration documentation page still uses a normal html table.
This commit replaces the table with the cd-table to make use of its
advanced features here.

Signed-off-by: Tatjana Dehler <tdehler@suse.com>
---
 .../configuration.component.html              | 66 +++++--------------
 .../configuration.component.scss              |  7 +-
 .../configuration.component.spec.ts           |  3 +-
 .../configuration/configuration.component.ts  | 37 ++++++-----
 4 files changed, 42 insertions(+), 71 deletions(-)

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 efe071a02278d..9299ffac05d96 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
@@ -5,11 +5,13 @@
         aria-current="page">Configuration Documentation</li>
   </ol>
 </nav>
-
-<div class="dataTables_wrapper">
-  <div class="dataTables_header clearfix form-inline">
-    <!-- filters -->
-    <div class="form-group pull-right filter"
+<cd-table [data]="data | filter:filters"
+          (fetchData)="getConfigurationList()"
+          [columns]="columns"
+          selectionType="single"
+          (updateSelection)="updateSelection($event)">
+  <div class="table-actions form-inline">
+    <div class="form-group filter"
          *ngFor="let filter of filters">
       <label>{{ filter.label }}: </label>
       <select class="form-control input-sm"
@@ -18,50 +20,12 @@
         <option *ngFor="let opt of filter.options">{{ opt }}</option>
       </select>
     </div>
-    <!-- end filters -->
   </div>
-
-  <table class="oadatatable table table-striped table-condensed table-bordered table-hover">
-    <thead class="datatable-header">
-      <tr>
-        <th >Name</th>
-        <th style="width:400px;">Description</th>
-        <th>Type</th>
-        <th>Level</th>
-        <th style="width: 200px">Default</th>
-        <th>Tags</th>
-        <th>Services</th>
-        <th>See_also</th>
-        <th>Max</th>
-        <th>Min</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let row of data | filter:filters">
-        <td >{{ row.name }}</td>
-        <td>
-          <p>
-            {{ row.desc }}</p>
-          <p *ngIf="row.long_desc"
-             class=text-muted>{{ row.long_desc }}</p>
-        </td>
-        <td>{{ row.type }}</td>
-        <td>{{ row.level }}</td>
-        <td class="wrap">
-          {{ row.default }} {{ row.daemon_default }}
-        </td>
-        <td>
-          <p *ngFor="let item of row.tags">{{ item }}</p>
-        </td>
-        <td>
-          <p *ngFor="let item of row.services">{{ item }}</p>
-        </td>
-        <td class="wrap">
-          <p *ngFor="let item of row.see_also">{{ item }}</p>
-        </td>
-        <td>{{ row.max }}</td>
-        <td>{{ row.min }}</td>
-      </tr>
-    </tbody>
-  </table>
-</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>
+</cd-table>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss
index e968d6d90861a..a22f286ae6344 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.scss
@@ -1,5 +1,8 @@
-@import '../../../shared/datatable/table/table.component.scss';
 
-td.wrap {
+.filter {
+  padding-right: 8px;
+}
+
+::ng-deep datatable-body-cell.wrap {
   word-break: break-all;
 }
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 96a5a2cc4ba5c..4ac81a1b77e7c 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
@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 
+import { TabsModule } from 'ngx-bootstrap/tabs/tabs.module';
 import { Observable } from 'rxjs/Observable';
 
 import { ConfigurationService } from '../../../shared/api/configuration.service';
@@ -24,7 +25,7 @@ describe('ConfigurationComponent', () => {
       TestBed.configureTestingModule({
         declarations: [ConfigurationComponent],
         providers: [{ provide: ConfigurationService, useValue: fakeService }],
-        imports: [SharedModule, FormsModule]
+        imports: [SharedModule, FormsModule, TabsModule.forRoot()]
       }).compileComponents();
     })
   );
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts
index 8df7729997188..8acc8046a4430 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts
@@ -1,17 +1,18 @@
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ConfigurationService } from '../../../shared/api/configuration.service';
+import { CdTableColumn } from '../../../shared/models/cd-table-column';
+import { CdTableSelection } from '../../../shared/models/cd-table-selection';
 
 @Component({
   selector: 'cd-configuration',
   templateUrl: './configuration.component.html',
   styleUrls: ['./configuration.component.scss']
 })
-export class ConfigurationComponent implements OnInit {
-  @ViewChild('arrayTmpl') arrayTmpl: TemplateRef<any>;
-
+export class ConfigurationComponent {
   data = [];
-  columns: any;
+  columns: CdTableColumn[];
+  selection = new CdTableSelection();
 
   filters = [
     {
@@ -35,7 +36,7 @@ export class ConfigurationComponent implements OnInit {
       label: 'Service',
       prop: 'services',
       value: 'any',
-      options: ['mon', 'mgr', 'osd', 'mds', 'common', 'mds_client', 'rgw', 'any'],
+      options: ['any', 'mon', 'mgr', 'osd', 'mds', 'common', 'mds_client', 'rgw'],
       applyFilter: (row, value) => {
         if (value === 'any') {
           return true;
@@ -46,28 +47,30 @@ export class ConfigurationComponent implements OnInit {
     }
   ];
 
-  constructor(private configurationService: ConfigurationService) {}
-
-  ngOnInit() {
+  constructor(
+    private configurationService: ConfigurationService,
+  ) {
     this.columns = [
       { flexGrow: 2, canAutoResize: true, prop: 'name' },
-      { flexGrow: 2, prop: 'desc', name: 'Description' },
-      { flexGrow: 2, prop: 'long_desc', name: 'Long description' },
+      { flexGrow: 2, prop: 'desc', name: 'Description', cellClass: 'wrap' },
+      { flexGrow: 2, prop: 'long_desc', name: 'Long description', cellClass: 'wrap' },
       { flexGrow: 1, prop: 'type' },
       { flexGrow: 1, prop: 'level' },
-      { flexGrow: 1, prop: 'default' },
+      { flexGrow: 1, prop: 'default', cellClass: 'wrap'},
       { flexGrow: 2, prop: 'daemon_default', name: 'Daemon default' },
-      { flexGrow: 1, prop: 'tags', name: 'Tags', cellTemplate: this.arrayTmpl },
-      { flexGrow: 1, prop: 'services', name: 'Services', cellTemplate: this.arrayTmpl },
-      { flexGrow: 1, prop: 'see_also', name: 'See_also', cellTemplate: this.arrayTmpl },
+      { flexGrow: 1, prop: 'tags', name: 'Tags' },
+      { flexGrow: 1, prop: 'services', name: 'Services' },
+      { flexGrow: 1, prop: 'see_also', name: 'See_also', cellClass: 'wrap' },
       { flexGrow: 1, prop: 'max', name: 'Max' },
       { flexGrow: 1, prop: 'min', name: 'Min' }
     ];
+  }
 
-    this.fetchData();
+  updateSelection(selection: CdTableSelection) {
+    this.selection = selection;
   }
 
-  fetchData() {
+  getConfigurationList() {
     this.configurationService.getConfigData().subscribe((data: any) => {
       this.data = data;
     });
-- 
2.39.5