From 86a0a80cb038cca0ad064fef710848ec8562eb53 Mon Sep 17 00:00:00 2001
From: Ivo Almeida <ialmeida@redhat.com>
Date: Fri, 13 Sep 2024 12:24:09 +0100
Subject: [PATCH] mgr/dashboard: fix table filter

Fixes: https://tracker.ceph.com/issues/68063

Signed-off-by: Ivo Almeida <ialmeida@redhat.com>
---
 .../shared/datatable/table/table.component.ts | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
index 97bcee3dfe348..5b2bd777dc7a0 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.ts
@@ -284,15 +284,21 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
    * how the table is renderer a second time, we now clone that list into a
    * local variable and only use the clone.
    */
-  localColumns: CdTableColumn[];
+  set localColumns(value: CdTableColumn[]) {
+    this._localColumns = this.getTableColumnsWithNames(value);
+  }
+
+  get localColumns(): CdTableColumn[] {
+    return this._localColumns;
+  }
+
+  private _localColumns: CdTableColumn[];
 
   model: TableModel = new TableModel();
 
   set tableColumns(value: CdTableColumn[]) {
     // In case a name is not provided set it to the prop name if present or an empty string
-    const valuesWithNames = value.map((col: CdTableColumn) =>
-      col?.name ? col : { ...col, name: col?.prop ? _.capitalize(_.toString(col.prop)) : '' }
-    );
+    const valuesWithNames = this.getTableColumnsWithNames(value);
     this._tableColumns = valuesWithNames;
     this._tableHeaders.next(valuesWithNames);
   }
@@ -307,6 +313,18 @@ export class TableComponent implements AfterViewInit, OnInit, OnChanges, OnDestr
     return this.localColumns?.filter?.((x) => !x.isHidden);
   }
 
+  getTableColumnsWithNames(value: CdTableColumn[]): CdTableColumn[] {
+    return value.map((col: CdTableColumn) =>
+      col?.name ? col : { ...col, name: col?.prop ? this.deCamelCase(String(col?.prop)) : '' }
+    );
+  }
+
+  deCamelCase(str: string): string {
+    return str
+      .replace(/([A-Z])/g, (match) => ` ${match}`)
+      .replace(/^./, (match) => match.toUpperCase());
+  }
+
   icons = Icons;
   cellTemplates: {
     [key: string]: TemplateRef<any>;
-- 
2.39.5