mgr/dashboard: Clean up TableComponent

- updateFilter(): Replace `event` argument with `clearSearch`
- Rename `data` to `rows` and `d` to `row` and `c` to `col`

Signed-off-by: Patrick Nawracay <pnawracay@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
index 637529ee5d7704c94694ff37254013f1ffddaee9..13ee5a7786ed9d7c097117ad0c9a9d14649103ad 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.html
@@ -22,11 +22,11 @@
       <input class="form-control"
              type="text"
              [(ngModel)]="search"
-             (keyup)="updateFilter($event)">
+             (keyup)="updateFilter()">
       <span class="input-group-btn">
         <button type="button"
                 class="btn btn-default clear-input tc_clearInputBtn"
-                (click)="updateFilter()">
+                (click)="updateFilter(true)">
           <i class="icon-prepend fa fa-remove"></i>
         </button>
       </span>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
index e82a10978ce8b0f24a1f1a3812ed39d13cd0fc72..0b6e7468b6de59ef63fab453adb17935980c5c5b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/datatable/table/table.component.spec.ts
@@ -100,7 +100,7 @@ describe('TableComponent', () => {
     describe('test search', () => {
       const doSearch = (search: string, expectedLength: number, firstObject: object) => {
         component.search = search;
-        component.updateFilter(true);
+        component.updateFilter();
         expect(component.rows.length).toBe(expectedLength);
         expect(component.rows[0]).toEqual(firstObject);
       };
@@ -131,7 +131,7 @@ describe('TableComponent', () => {
         const searchTest = (s: string, st: string[]) => {
           component.search = s;
           searchTerms = st;
-          component.updateFilter(true);
+          component.updateFilter();
         };
         searchTest('a b c', ['a', 'b', 'c']);
         searchTest('a+b c', ['a+b', 'c']);
@@ -168,9 +168,9 @@ describe('TableComponent', () => {
       it('should restore full table after search', () => {
         expect(component.rows.length).toBe(100);
         component.search = '13';
-        component.updateFilter(true);
-        expect(component.rows.length).toBe(9);
         component.updateFilter();
+        expect(component.rows.length).toBe(9);
+        component.updateFilter(true);
         expect(component.rows.length).toBe(100);
       });
     });

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 efb2644d00c420102b786eb4d3894e126d2514f9..dbf8d1b426fb725b8fdd59381188002db7e9624f 100644 (file)
--- 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
@@ -384,7 +384,7 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     }
     this.rows = [...this.data];
     if (this.search.length > 0) {
-      this.updateFilter(true);
+      this.updateFilter();
     }
     this.reset();
     this.updateSelected();
@@ -468,10 +468,11 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     this.userConfig.sorts = sorts;
   }
 
-  updateFilter(event?: any) {
-    if (!event) {
+  updateFilter(clearSearch = false) {
+    if (clearSearch) {
       this.search = '';
     }
+    // prepare search strings
     let search = this.search.toLowerCase().replace(/,/g, '');
     const columns = this.columns.filter((c) => c.cellTransformation !== CellTemplate.sparkline);
     if (search.match(/['"][^'"]+['"]/)) {
@@ -509,20 +510,22 @@ export class TableComponent implements AfterContentChecked, OnInit, OnChanges, O
     return this.subSearch(data, currentSearch, columnsClone);
   }
 
-  basicDataSearch(searchTerm: string, data: any[], columns: CdTableColumn[]) {
+  basicDataSearch(searchTerm: string, rows: any[], columns: CdTableColumn[]) {
     if (searchTerm.length === 0) {
-      return data;
+      return rows;
     }
-    return data.filter((d) => {
+    return rows.filter((row) => {
       return (
-        columns.filter((c) => {
-          let cellValue: any = _.get(d, c.prop);
-          if (!_.isUndefined(c.pipe)) {
-            cellValue = c.pipe.transform(cellValue);
+        columns.filter((col) => {
+          let cellValue: any = _.get(row, col.prop);
+
+          if (!_.isUndefined(col.pipe)) {
+            cellValue = col.pipe.transform(cellValue);
           }
           if (_.isUndefined(cellValue)) {
             return;
           }
+
           if (_.isArray(cellValue)) {
             cellValue = cellValue.join(' ');
           } else if (_.isNumber(cellValue) || _.isBoolean(cellValue)) {