From 229416bc279bbadeb7217c6e784e96cacab0d4bf Mon Sep 17 00:00:00 2001
From: Tiago Melo <tmelo@suse.com>
Date: Mon, 20 Jan 2020 18:35:33 -0100
Subject: [PATCH] mgr/dashboard: Add Modified filter to Configuration table

Fixes: https://tracker.ceph.com/issues/24996

Signed-off-by: Tiago Melo <tmelo@suse.com>
---
 .../e2e/cluster/configuration.e2e-spec.ts     | 23 ++++++++++++++++---
 .../dashboard/frontend/e2e/page-helper.po.ts  | 20 ++++++++++++++++
 .../configuration/configuration.component.ts  | 16 +++++++++++++
 .../datatable/table/table.component.html      |  6 ++---
 4 files changed, 59 insertions(+), 6 deletions(-)

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 bf2f125b999..a806c31ef03 100644
--- 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 464d61ed78a..350be2238b3 100644
--- 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 712d0d8a064..61aadf31566 100644
--- 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 b1200fda06c..9330ae85fab 100644
--- 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"
-- 
2.39.5