mgr/dashboard: Use column filtering feature for Configuration page

Signed-off-by: Kiefer Chang <kiefer.chang@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html
index 36e65bd619bbb62c9bffe2355637a00c380ee02d..f4b6401a24662f8f1f95d6e7f236dc831d8095a1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.html
@@ -1,6 +1,7 @@
-<cd-table [data]="data | filter:filters"
+<cd-table [data]="data"
           (fetchData)="getConfigurationList($event)"
           [columns]="columns"
+          [extraFilterableColumns]="filters"
           selectionType="single"
           (updateSelection)="updateSelection($event)">
   <cd-table-actions class="table-actions"
@@ -8,29 +9,6 @@
                     [selection]="selection"
                     [tableActions]="tableActions">
   </cd-table-actions>
-  <div class="table-filters form-inline">
-    <div class="form-group filter"
-         *ngFor="let filter of filters">
-      <label class="col-form-label">{{ filter.label }}: </label>
-      <select class="form-control custom-select"
-              [(ngModel)]="filter.value"
-              (ngModelChange)="updateFilter()">
-        <option *ngFor="let opt of filter.options">{{ opt }}</option>
-      </select>
-    </div>
-
-    <div class="widget-toolbar tc_refreshBtn">
-      <button type="button"
-              title="Reset filters"
-              class="btn btn-light"
-              (click)="resetFilter()">
-        <span [ngClass]="[icons.stack]">
-          <i [ngClass]="[icons.filter, icons.stack2x]"></i>
-          <i [ngClass]="[icons.destroy, icons.stack1x]"></i>
-        </span>
-      </button>
-    </div>
-  </div>
   <cd-configuration-details cdTableDetail
                             [selection]="selection">
   </cd-configuration-details>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts
index 00f67a2b231aeaa93d09e82fa00a3e084050dcc6..712d0d8a064cb31cb27d4e788707f63a5ed1a5b9 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/configuration/configuration.component.ts
@@ -25,14 +25,13 @@ export class ConfigurationComponent implements OnInit {
   icons = Icons;
   columns: CdTableColumn[];
   selection = new CdTableSelection();
-  filters = [
+  filters: CdTableColumn[] = [
     {
-      label: this.i18n('Level'),
+      name: this.i18n('Level'),
       prop: 'level',
-      initValue: 'basic',
-      value: 'basic',
-      options: ['basic', 'advanced', 'dev'],
-      applyFilter: (row, value) => {
+      filterOptions: ['basic', 'advanced', 'dev'],
+      filterInitValue: 'basic',
+      filterPredicate: (row, value) => {
         enum Level {
           basic = 0,
           advanced = 1,
@@ -45,34 +44,21 @@ export class ConfigurationComponent implements OnInit {
       }
     },
     {
-      label: this.i18n('Service'),
+      name: this.i18n('Service'),
       prop: 'services',
-      initValue: 'any',
-      value: 'any',
-      options: ['any', 'mon', 'mgr', 'osd', 'mds', 'common', 'mds_client', 'rgw'],
-      applyFilter: (row, value) => {
-        if (value === 'any') {
-          return true;
-        }
-
+      filterOptions: ['mon', 'mgr', 'osd', 'mds', 'common', 'mds_client', 'rgw'],
+      filterPredicate: (row, value) => {
         return row.services.includes(value);
       }
     },
     {
-      label: this.i18n('Source'),
+      name: this.i18n('Source'),
       prop: 'source',
-      initValue: 'any',
-      value: 'any',
-      options: ['any', 'mon'],
-      applyFilter: (row, value) => {
-        if (value === 'any') {
-          return true;
-        }
-
+      filterOptions: ['mon'],
+      filterPredicate: (row, value) => {
         if (!row.hasOwnProperty('source')) {
           return false;
         }
-
         return row.source.includes(value);
       }
     }
@@ -138,17 +124,6 @@ export class ConfigurationComponent implements OnInit {
     );
   }
 
-  updateFilter() {
-    this.data = [...this.data];
-  }
-
-  resetFilter() {
-    this.filters.forEach((item) => {
-      item.value = item.initValue;
-    });
-    this.data = [...this.data];
-  }
-
   isEditable(selection: CdTableSelection): boolean {
     if (selection.selected.length !== 1) {
       return false;