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>

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 efe071a02278d9b2b1d92f12378235f0e028f839..9299ffac05d968b721912e08249f8e626fac579a 100644 (file)
--- 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 e968d6d90861aafa31bbd1e8a9bc03cde6e298d9..a22f286ae6344541b59eebd95d18aff4c7575c5f 100644 (file)
--- 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 96a5a2cc4ba5c9bb06b490f02b6c92770eb61b0e..4ac81a1b77e7cf51a1242952067ddd4adf22891a 100644 (file)
--- 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 8df7729997188b34fcc103556a12e17d288fcd06..8acc8046a44308d095668a9f016eb10f708e7efe 100644 (file)
--- 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;
     });