mgr/dashboard: Handle class objects as regular objects in KV-table

Fixes: https://tracker.ceph.com/issues/36468
Signed-off-by: Stephan Müller <smueller@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
index 9e7e2a8e56dcb0ffb395534fe0152ec38f18713a..ab6bd4bcb572c6bcb4fc4eae048ced42ba77b953 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.spec.ts
@@ -85,9 +85,46 @@ describe('TableKeyValueComponent', () => {
     component.data = [['someKey', 0, 3]];
     expect(() => component.ngOnInit()).toThrowError('Wrong array format: [string, any][]');
     component.data = [{ somekey: 939, somethingElse: 'test' }];
-    expect(() => component.ngOnInit()).toThrowError(
-      'Wrong object array format: {key: string, value: any}[]'
-    );
+  });
+
+  describe('Class objects equal plain objects', () => {
+    class Example {
+      sth = 'something';
+      deep?: Example;
+      constructor(deep: boolean) {
+        if (deep) {
+          this.deep = new Example(false);
+        }
+      }
+    }
+
+    const classExample = new Example(true);
+    const objectExample = {
+      sth: 'something',
+      deep: {
+        sth: 'something'
+      }
+    };
+
+    const getTableData = (data) => {
+      component.data = data;
+      expect(() => component.ngOnInit()).not.toThrow();
+      return component.tableData;
+    };
+
+    const doesClassEqualsObject = (classData, objectData, dataLength) => {
+      const classTableData = getTableData(classData);
+      expect(classTableData).toEqual(getTableData(objectData));
+      expect(classTableData.length).toBe(dataLength);
+    };
+
+    it('should convert class objects the same way as plain objects', () => {
+      doesClassEqualsObject(classExample, objectExample, 1);
+      doesClassEqualsObject([classExample], [objectExample], 1);
+      component.renderObjects = true;
+      doesClassEqualsObject(classExample, objectExample, 2);
+      doesClassEqualsObject([classExample], [objectExample], 2);
+    });
   });
 
   it('tests _makePairs', () => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
index 5b8dee8e5352a5076ed13e3536ed4a0233d08245..5439aab493109ce4b1bb22879973ee11574aa214 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table-key-value/table-key-value.component.ts
@@ -97,7 +97,7 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
       return; // Wait for data
     } else if (_.isArray(data)) {
       temp = this._makePairsFromArray(data);
-    } else if (_.isPlainObject(data)) {
+    } else if (_.isObject(data)) {
       temp = this._makePairsFromObject(data);
     } else {
       throw new Error('Wrong data format');
@@ -109,22 +109,23 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
   _makePairsFromArray(data: any[]) {
     let temp = [];
     const first = data[0];
-    if (_.isPlainObject(first)) {
+    if (_.isArray(first)) {
+      if (first.length === 2) {
+        temp = data.map((a) => ({
+          key: a[0],
+          value: a[1]
+        }));
+      } else {
+        throw new Error('Wrong array format: [string, any][]');
+      }
+    } else if (_.isObject(first)) {
       if (_.has(first, 'key') && _.has(first, 'value')) {
         temp = [...data];
       } else {
-        throw new Error('Wrong object array format: {key: string, value: any}[]');
-      }
-    } else {
-      if (_.isArray(first)) {
-        if (first.length === 2) {
-          temp = data.map((a) => ({
-            key: a[0],
-            value: a[1]
-          }));
-        } else {
-          throw new Error('Wrong array format: [string, any][]');
-        }
+        temp = data.reduce(
+          (previous: any[], item) => previous.concat(this._makePairsFromObject(item)),
+          temp
+        );
       }
     }
     return temp;
@@ -139,7 +140,7 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
 
   _insertFlattenObjects(temp: any[]) {
     temp.forEach((v, i) => {
-      if (_.isPlainObject(v.value)) {
+      if (_.isObject(v.value)) {
         temp.splice(i, 1);
         this._makePairs(v.value).forEach((item) => {
           if (this.appendParentKey) {
@@ -155,10 +156,8 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
 
   _convertValue(v: any) {
     if (_.isArray(v.value)) {
-      v.value = v.value
-        .map((item) => (_.isPlainObject(item) ? JSON.stringify(item) : item))
-        .join(', ');
-    } else if (_.isPlainObject(v.value) && !this.renderObjects) {
+      v.value = v.value.map((item) => (_.isObject(item) ? JSON.stringify(item) : item)).join(', ');
+    } else if (_.isObject(v.value) && !this.renderObjects) {
       return;
     }
     return v;