Fix pagination in SCA checks table when expanding some row (#3018)

* fix(frontend): Fix pagination in SCA checks table when expand some row
wazuh · Mar 1, 2021 · 20499ac · 20499ac
1 parent 375d2f1
commit 20499ac
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Fixed
 
 - Fix SCA policy detail showing name and check results about another policy [#3007](https://github.com/wazuh/wazuh-kibana-app/pull/3007)
+- Fix pagination in SCA checks table when expand some row [#3018](https://github.com/wazuh/wazuh-kibana-app/pull/3018)
 
 ## Wazuh v4.1.1 - Kibana 7.10.0 , 7.10.2 - Revision 4102
 

diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx
@@ -27,13 +27,14 @@ import exportCsv from '../../../react-services/wz-csv';
 import { getToasts }  from '../../../kibana-services';
 import { WzSearchBar } from '../../../components/wz-search-bar';
 import { RuleText, ComplianceText } from './components';
+import _ from 'lodash';
 
 export class Inventory extends Component {
   _isMount = false;
   constructor(props) {
     super(props);
     const { agent } = this.props;
-    this.state = { agent, items: [], itemIdToExpandedRowMap: {}, showMoreInfo: false, loading: false, filters: [] }
+    this.state = { agent, items: [], itemIdToExpandedRowMap: {}, showMoreInfo: false, loading: false, filters: [], pageTableChecks: {pageIndex: 0} }
     this.policies = [];
     this.suggestions = {};
     this.columnsPolicies = [
@@ -169,8 +170,11 @@ export class Inventory extends Component {
   }
 
   async componentDidUpdate(prevProps, prevState) {
-    if (JSON.stringify(this.props.agent) !== JSON.stringify(prevProps.agent)) {
+    if (!_.isEqual(this.props.agent, prevProps.agent)) {
       this.setState({ lookingPolicy: false }, async () => await this.initialize());
+    };
+    if(!_.isEqual(this.state.filters, prevState.filters)){
+      this.setState({itemIdToExpandedRowMap: {}, pageTableChecks: {pageIndex: 0, pageSize: this.state.pageTableChecks.pageSize}});
     }
   }
 
@@ -259,7 +263,7 @@ export class Inventory extends Component {
   }
 
   async loadScaPolicy(policy) {
-    this._isMount && this.setState({ loadingPolicy: true, itemIdToExpandedRowMap: {}, pageIndex: 0 });
+    this._isMount && this.setState({ loadingPolicy: true, itemIdToExpandedRowMap: {}, pageTableChecks: {pageIndex: 0} });
     if (policy) {
       try {
         const policyResponse = await WzRequest.apiReq(
@@ -311,25 +315,16 @@ export class Inventory extends Component {
   toggleDetails = item => {
     const itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap };
 
-    item.complianceText = '';
-    if (item.compliance && item.compliance.length) {
-      item.compliance.forEach(x => {
-        item.complianceText += `${x.key}: ${x.value}\n`;
-      });
-    }
-    if (item.rules.length) {
-      item.rulesText = '';
-      item.rules.forEach(x => {
-        item.rulesText += `${x.rule}\n`;
-      });
-    }
-
     if (itemIdToExpandedRowMap[item.id]) {
       delete itemIdToExpandedRowMap[item.id];
     } else {
       let checks = '';
       checks += (item.rules || []).length > 1 ? 'Checks' : 'Check';
       checks += item.condition ? ` (Condition: ${item.condition})` : '';
+      const complianceText = item.compliance && item.compliance.length 
+        ? item.compliance.map(el => `${el.key}: ${el.value}`).join('\n')
+        : '';
+      const rulesText = item.rules.length ? item.rules.map(el => el.rule).join('\n') : '';
       const listItems = [
         {
           title: 'Check not applicable due to:',
@@ -353,11 +348,11 @@ export class Inventory extends Component {
         },
         {
           title: checks,
-          description: <RuleText rulesText={item.rulesText} />,
+          description: <RuleText rulesText={rulesText} />,
         },
         {
           title: 'Compliance',
-          description: <ComplianceText complianceText={item.complianceText} />
+          description: <ComplianceText complianceText={complianceText} />
         }
       ];
       const itemsToShow = listItems.filter(x => {
@@ -394,6 +389,10 @@ export class Inventory extends Component {
     return <button onClick={() => this.setState({ filters: [{ field, value }] })}>{text}</button>
   }
 
+  onChangeTableChecks({ page: {index: pageIndex, size: pageSize} }){
+    this.setState({ pageTableChecks: {pageIndex, pageSize} });
+  }
+
   render() {
     const getPoliciesRowProps = (item, idx) => {
       return {
@@ -565,8 +564,9 @@ export class Inventory extends Component {
                       itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
                       isExpandable={true}
                       sorting={sorting}
-                      pagination={true}
+                      pagination={this.state.pageTableChecks}
                       loading={this.state.loadingPolicy}
+                      onTableChange={(change) => this.onChangeTableChecks(change)}
                     />
                   </EuiFlexItem>
                 </EuiFlexGroup>