mgr/dashboard: Add Modified filter to Configuration table

Fixes: https://tracker.ceph.com/issues/24996
Signed-off-by: Tiago Melo <tmelo@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/e2e/cluster/configuration.e2e-spec.ts b/src/pybind/mgr/dashboard/frontend/e2e/cluster/configuration.e2e-spec.ts
index bf2f125b9998b1042109f9f47c847535e7527ef1..a806c31ef03601327e4c49df1fb2f1a4f8fa8220 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/e2e/cluster/configuration.e2e-spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/e2e/cluster/configuration.e2e-spec.ts
@@ -42,13 +42,21 @@ describe('Configuration page', () => {
   });
 
   describe('edit configuration test', () => {
+    const configName = 'client_cache_size';
+
     beforeAll(async () => {
       await configuration.navigateTo();
     });
 
-    it('should click and edit a configuration and results should appear in the table', async () => {
-      const configName = 'client_cache_size';
+    beforeEach(async () => {
+      await configuration.clearTableSearchInput();
+    });
+
+    afterAll(async () => {
+      await configuration.configClear(configName);
+    });
 
+    it('should click and edit a configuration and results should appear in the table', async () => {
       await configuration.edit(
         configName,
         ['global', '1'],
@@ -58,7 +66,16 @@ describe('Configuration page', () => {
         ['mds', '5'],
         ['client', '6']
       );
-      await configuration.configClear(configName);
+    });
+
+    it('should show only modified configurations', async () => {
+      await configuration.filterTable('Modified', 'yes');
+      expect(await configuration.getTableFoundCount()).toBe(1);
+    });
+
+    it('should hide all modified configurations', async () => {
+      await configuration.filterTable('Modified', 'no');
+      expect(await configuration.getTableFoundCount()).toBeGreaterThan(1);
     });
   });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/e2e/page-helper.po.ts b/src/pybind/mgr/dashboard/frontend/e2e/page-helper.po.ts
index 464d61ed78a96fb75d9c98a3cd1e989ca1ba4f3f..350be2238b3e8e6c801277aad271e68ef96077f1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/e2e/page-helper.po.ts
+++ b/src/pybind/mgr/dashboard/frontend/e2e/page-helper.po.ts
@@ -92,6 +92,14 @@ export abstract class PageHelper {
     return Number(text.match(/(\d+)\s+selected/)[1]);
   }
 
+  async getTableFoundCount(): Promise<number> {
+    const text = await $$('.datatable-footer-inner .page-count span')
+      .filter(async (e) => (await e.getText()).includes('found'))
+      .first()
+      .getText();
+    return Number(text.match(/(\d+)\s+found/)[1]);
+  }
+
   getFirstTableCellWithText(content: string): ElementFinder {
     return element.all(by.cssContainingText('.datatable-body-cell-label', content)).first();
   }
@@ -316,4 +324,16 @@ export abstract class PageHelper {
       (e: ElementFinder) => e.click()
     );
   }
+
+  async filterTable(name: string, option: string) {
+    await this.waitClickableAndClick($('.tc_filter_name > a'));
+    await element(by.cssContainingText(`.tc_filter_name .dropdown-item`, name)).click();
+
+    await this.waitClickableAndClick($('.tc_filter_option > a'));
+    await element(by.cssContainingText(`.tc_filter_option .dropdown-item`, option)).click();
+  }
+
+  async clearTableSearchInput() {
+    return this.waitClickableAndClick($('cd-table .search button'));
+  }
 }

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 712d0d8a064cb31cb27d4e788707f63a5ed1a5b9..61aadf31566e30460e83567e744c8449a51e3438 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
@@ -61,6 +61,22 @@ export class ConfigurationComponent implements OnInit {
         }
         return row.source.includes(value);
       }
+    },
+    {
+      name: this.i18n('Modified'),
+      prop: 'modified',
+      filterOptions: ['yes', 'no'],
+      filterPredicate: (row, value) => {
+        if (value === 'yes' && row.hasOwnProperty('value')) {
+          return true;
+        }
+
+        if (value === 'no' && !row.hasOwnProperty('value')) {
+          return true;
+        }
+
+        return false;
+      }
     }
   ];
 

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 b1200fda06ca0f0e57b1faaca175064b10afa7d8..9330ae85fab1d3f0013b069300483746afec8109 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
@@ -26,9 +26,9 @@
     <div *ngIf="columnFilters.length !== 0"
          class="btn-group widget-toolbar">
       <div dropdown
-           class="btn-group">
+           class="btn-group tc_filter_name">
         <a dropdownToggle
-           class="btn btn-light dropdown-toggle tc_columnBtn"
+           class="btn btn-light dropdown-toggle"
            data-toggle="dropdown">
           <i [ngClass]="[icons.large, icons.filter]"></i>
           {{ selectedFilter.column.name }}
@@ -45,7 +45,7 @@
         </ul>
       </div>
       <div dropdown
-           class="btn-group">
+           class="btn-group tc_filter_option">
         <a dropdownToggle
            class="btn btn-light dropdown-toggle"
            [class.disabled]="selectedFilter.options.length === 0"