From f4b2f4d91d2c16cd5a846327ec0c364a1bbd4d4e Mon Sep 17 00:00:00 2001
From: Tatjana Dehler <tdehler@suse.com>
Date: Wed, 10 Oct 2018 16:12:32 +0200
Subject: [PATCH] mgr/dashboard: config options table cleanup

Remove columns 'tags', 'enum_values', 'long_desc', 'type', 'flags',
'daemon_default', 'desc', 'level', 'can_update_at_runtime', 'services',
'max', 'see_also', 'min' and 'source' from table view and add them to
the details.
The table contains 'name', 'value' and 'default' only.

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

Signed-off-by: Tatjana Dehler <tdehler@suse.com>
---
 .../configuration-details.component.html      | 107 +++++++++++++++++-
 .../configuration-details.component.ts        |  13 +++
 .../configuration.component.html              |  10 --
 .../configuration/configuration.component.ts  |  34 +-----
 4 files changed, 120 insertions(+), 44 deletions(-)

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
index ea9b527b785..35e47e0d610 100755
--- 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
@@ -1,7 +1,108 @@
-<tabset cdTableDetail *ngIf="selection?.hasSingleSelection">
+<tabset *ngIf="selection?.hasSingleSelection">
   <tab i18n-heading
        heading="Details">
-    <cd-table-key-value [data]="selection.first()" [autoReload]="false">
-    </cd-table-key-value>
+    <table class="table table-striped table-bordered">
+      <tbody>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Name</td>
+          <td class="col-sm-3">{{ selectedItem.name }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Description</td>
+          <td class="col-sm-3">{{ selectedItem.desc }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Long description</td>
+          <td class="col-sm-3">{{ selectedItem.long_desc }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Current values</td>
+          <td class="col-sm-3">
+            <span *ngFor="let conf of selectedItem.value; last as isLast">
+              {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br/>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Default</td>
+          <td class="col-sm-3">{{ selectedItem.default }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Daemon default</td>
+          <td class="col-sm-3">{{ selectedItem.daemon_default }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Type</td>
+          <td class="col-sm-3">{{ selectedItem.type }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Min</td>
+          <td class="col-sm-3">{{ selectedItem.min }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Max</td>
+          <td class="col-sm-3">{{ selectedItem.max }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Flags</td>
+          <td class="col-sm-3">
+            <span *ngFor="let flag of selectedItem.flags">
+              <span title="{{ flags[flag] }}">
+                <span class="badge badge-pill badge-primary margin-right-sm">{{ flag | uppercase }}</span>
+              </span>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Services</td>
+          <td class="col-sm-3">
+            <span *ngFor="let service of selectedItem.services">
+              <span class="badge badge-pill badge-primary margin-right-sm">{{ service }}</span>
+            </span>
+          </td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Source</td>
+          <td class="col-sm-3">{{ selectedItem.source }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Level</td>
+          <td class="col-sm-3">{{ selectedItem.level }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Can be updated at runtime</td>
+          <td class="col-sm-3">{{ selectedItem.can_update_at_runtime }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Tags</td>
+          <td class="col-sm-3">{{ selectedItem.tags }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">Enum values</td>
+          <td class="col-sm-3">{{ selectedItem.enum_values }}</td>
+        </tr>
+        <tr>
+          <td i18n
+              class="bold col-sm-1">See also</td>
+          <td class="col-sm-3">{{ selectedItem.see_also }}</td>
+        </tr>
+      </tbody>
+    </table>
   </tab>
 </tabset>
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
index 359898da122..5ab66d78f86 100755
--- 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
@@ -1,5 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core';
 
+import * as _ from 'lodash';
+
 import { CdTableSelection } from '../../../../shared/models/cd-table-selection';
 
 @Component({
@@ -11,12 +13,23 @@ export class ConfigurationDetailsComponent implements OnChanges {
   @Input()
   selection: CdTableSelection;
   selectedItem: any;
+  flags = {
+    runtime: 'The value can be updated at runtime.',
+    no_mon_update:
+      'Daemons/clients do not pull this value from the monitor config database. ' +
+      `We disallow setting this option via 'ceph config set ...'. This option should be ` +
+      'configured via ceph.conf or via the command line.',
+    startup: 'Option takes effect only during daemon startup.',
+    cluster_create: 'Option only affects cluster creation.',
+    create: 'Option only affects daemon creation.'
+  };
 
   constructor() {}
 
   ngOnChanges() {
     if (this.selection.hasSelection) {
       this.selectedItem = this.selection.first();
+      this.selectedItem.services = _.split(this.selectedItem.services, ',');
     }
   }
 }
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 88b4a2a3e4e..c6fce9f3132 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
@@ -31,13 +31,3 @@
     </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>
-  </span>
-</ng-template>
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 a9a983e647b..65e95b4f5bc 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
@@ -68,16 +68,6 @@ export class ConfigurationComponent implements OnInit {
       }
     }
   ];
-  flags = {
-    runtime: 'The value can be updated at runtime.',
-    no_mon_update:
-      'Daemons/clients do not pull this value from the monitor config database. ' +
-      `We disallow setting this option via 'ceph config set ...'. This option should be ` +
-      'configured via ceph.conf or via the command line.',
-    startup: 'Option takes effect only during daemon startup.',
-    cluster_create: 'Option only affects cluster creation.',
-    create: 'Option only affects daemon creation.'
-  };
 
   @ViewChild('confValTpl')
   public confValTpl: TemplateRef<any>;
@@ -102,33 +92,15 @@ export class ConfigurationComponent implements OnInit {
 
   ngOnInit() {
     this.columns = [
-      { flexGrow: 2, canAutoResize: true, prop: 'name' },
+      { canAutoResize: true, prop: 'name' },
+      { prop: 'desc', name: 'Description', cellClass: 'wrap' },
       {
-        flexGrow: 2,
         prop: 'value',
         name: 'Current value',
         cellClass: 'wrap',
         cellTemplate: this.confValTpl
       },
-      { flexGrow: 1, prop: 'source' },
-      { flexGrow: 2, prop: 'desc', name: 'Description', cellClass: 'wrap' },
-      { flexGrow: 2, prop: 'long_desc', name: 'Long description', cellClass: 'wrap' },
-      {
-        flexGrow: 2,
-        prop: 'flags',
-        name: 'Flags',
-        cellClass: 'wrap',
-        cellTemplate: this.confFlagTpl
-      },
-      { flexGrow: 1, prop: 'type' },
-      { flexGrow: 1, prop: 'level' },
-      { flexGrow: 1, prop: 'default', cellClass: 'wrap' },
-      { flexGrow: 2, prop: 'daemon_default', name: 'Daemon default' },
-      { 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' }
+      { prop: 'default', cellClass: 'wrap' }
     ];
   }
 
-- 
2.39.5