mgr/dashboard: improve formatting of histograms in Telemetry preview form

Histogram data in the Telemetry dashboard preview is displayed horizontally instead of vertically to improve readability.

Fixes: https://tracker.ceph.com/issues/52505
Signed-off-by: Laura Flores <lflores@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
index 4e7336a6d569864741bc8d7d89066c9bc8e31343..bee61022e2ad4836621fb270cf80642e25c4bdb4 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/telemetry/telemetry.component.ts
@@ -88,9 +88,20 @@ export class TelemetryComponent extends CdForm implements OnInit {
     this.configForm = this.formBuilder.group(controlsConfig);
   }
 
+  private replacer(key: string, value: any) {
+    if (key === 'ranges' || key === 'values') {
+      const x = [];
+      for (let i = 0; i < value.length; i++) {
+        x.push(JSON.stringify(value[i]));
+      }
+      return x;
+    }
+    return value;
+  }
+
   private createPreviewForm() {
     const controls = {
-      report: JSON.stringify(this.report, null, 2),
+      report: JSON.stringify(this.report, this.replacer, 2),
       reportId: this.reportId,
       licenseAgrmt: [this.licenseAgrmt, Validators.requiredTrue]
     };