mgr/dashboard: Hide empty fields in KV-table

It exends the key value table by the option to hide empty fields.

Fixes: https://tracker.ceph.com/issues/37860
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 7ff6dd7e175cb1d1222e73431aa694369281bcea..cb69b3badfa16df23289b7b1a0bf2bcde237e238 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
@@ -271,4 +271,59 @@ describe('TableKeyValueComponent', () => {
       expect(called).toBeTruthy();
     });
   });
+
+  describe('hide empty items', () => {
+    beforeEach(() => {
+      component.data = {
+        string: '',
+        array: [],
+        object: {},
+        emptyObject: {
+          string: '',
+          array: [],
+          object: {}
+        },
+        someNumber: 0,
+        someDifferentNumber: 1,
+        someArray: [0, 1],
+        someString: '0',
+        someObject: {
+          empty: {},
+          something: 0.1
+        }
+      };
+      component.renderObjects = true;
+    });
+
+    it('should show all items as default', () => {
+      expect(component.hideEmpty).toBe(false);
+      component.ngOnInit();
+      expect(component.tableData).toEqual([
+        { key: 'array', value: '' },
+        { key: 'emptyObject array', value: '' },
+        { key: 'emptyObject object', value: '' },
+        { key: 'emptyObject string', value: '' },
+        { key: 'object', value: '' },
+        { key: 'someArray', value: '0, 1' },
+        { key: 'someDifferentNumber', value: 1 },
+        { key: 'someNumber', value: 0 },
+        { key: 'someObject empty', value: '' },
+        { key: 'someObject something', value: 0.1 },
+        { key: 'someString', value: '0' },
+        { key: 'string', value: '' }
+      ]);
+    });
+
+    it('should hide all empty items', () => {
+      component.hideEmpty = true;
+      component.ngOnInit();
+      expect(component.tableData).toEqual([
+        { key: 'someArray', value: '0, 1' },
+        { key: 'someDifferentNumber', value: 1 },
+        { key: 'someNumber', value: 0 },
+        { key: 'someObject something', value: 0.1 },
+        { key: 'someString', value: '0' }
+      ]);
+    });
+  });
 });

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 c4fb5f9d1a74bc4ee6d4ee555508d1c30984452e..500ee033d3922cf587c6bbb30258dad29550d22c 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
@@ -14,6 +14,11 @@ import { CellTemplate } from '../../enum/cell-template.enum';
 import { CdTableColumn } from '../../models/cd-table-column';
 import { TableComponent } from '../table/table.component';
 
+class Item {
+  key: string;
+  value: any;
+}
+
 /**
  * Display the given data in a 2 column data table. The left column
  * shows the 'key' attribute, the right column the 'value' attribute.
@@ -40,12 +45,11 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
   // Only used if objects are rendered
   @Input()
   appendParentKey = true;
+  @Input()
+  hideEmpty = false;
 
   columns: Array<CdTableColumn> = [];
-  tableData: {
-    key: string;
-    value: any;
-  }[];
+  tableData: Item[];
 
   /**
    * The function that will be called to update the input data.
@@ -91,7 +95,7 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     this.tableData = this._makePairs(this.data);
   }
 
-  _makePairs(data: any) {
+  _makePairs(data: any): Item[] {
     let temp = [];
     if (!data) {
       return; // Wait for data
@@ -106,7 +110,7 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     return this.renderObjects ? this._insertFlattenObjects(temp) : temp;
   }
 
-  _makePairsFromArray(data: any[]) {
+  _makePairsFromArray(data: any[]): Item[] {
     let temp = [];
     const first = data[0];
     if (_.isArray(first)) {
@@ -131,7 +135,7 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     return temp;
   }
 
-  _makePairsFromObject(data: object) {
+  _makePairsFromObject(data: object): Item[] {
     return Object.keys(data).map((k) => ({
       key: k,
       value: data[k]
@@ -168,11 +172,15 @@ export class TableKeyValueComponent implements OnInit, OnChanges {
     return temp;
   }
 
-  _convertValue(v: any) {
+  _convertValue(v: Item): Item {
     if (_.isArray(v.value)) {
       v.value = v.value.map((item) => (_.isObject(item) ? JSON.stringify(item) : item)).join(', ');
-    } else if (_.isObject(v.value) && !this.renderObjects) {
+    }
+    const isEmpty = _.isEmpty(v.value) && !_.isNumber(v.value);
+    if ((this.hideEmpty && isEmpty) || (_.isObject(v.value) && !this.renderObjects)) {
       return;
+    } else if (isEmpty && !this.hideEmpty && v.value !== '') {
+      v.value = '';
     }
     return v;
   }