1 files changed, 105 insertions, 0 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
new file mode 100755
index 000000000..8debf9dc6
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration-details/configuration-details.component.html
@@ -0,0 +1,105 @@
+<ng-container *ngIf="selection">
+  <table class="table table-striped table-bordered">
+    <tbody>
+      <tr>
+        <td i18n
+            class="bold w-25">Name</td>
+        <td class="w-75">{{ selection.name }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Description</td>
+        <td>{{ selection.desc }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Long description</td>
+        <td>{{ selection.long_desc }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Current values</td>
+        <td>
+          <span *ngFor="let conf of selection.value; last as isLast">
+            {{ conf.section }}: {{ conf.value }}{{ !isLast ? "," : "" }}<br />
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Default</td>
+        <td>{{ selection.default }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Daemon default</td>
+        <td>{{ selection.daemon_default }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Type</td>
+        <td>{{ selection.type }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Min</td>
+        <td>{{ selection.min }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Max</td>
+        <td>{{ selection.max }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Flags</td>
+        <td>
+          <span *ngFor="let flag of selection.flags">
+            <span title="{{ flags[flag] }}">
+              <span class="badge badge-dark mr-2">{{ flag | uppercase }}</span>
+            </span>
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Services</td>
+        <td>
+          <span *ngFor="let service of selection.services">
+            <span class="badge badge-dark mr-2">{{ service }}</span>
+          </span>
+        </td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Source</td>
+        <td>{{ selection.source }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Level</td>
+        <td>{{ selection.level }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Can be updated at runtime (editable)</td>
+        <td>{{ selection.can_update_at_runtime | booleanText }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Tags</td>
+        <td>{{ selection.tags }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">Enum values</td>
+        <td>{{ selection.enum_values }}</td>
+      </tr>
+      <tr>
+        <td i18n
+            class="bold">See also</td>
+        <td>{{ selection.see_also }}</td>
+      </tr>
+    </tbody>
+  </table>
+</ng-container>