From 6d8e71c5b0e27214c1db6b22bd61a6ee8a7a02ad Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Wed, 14 Sep 2022 14:05:00 -0300 Subject: [PATCH 01/18] SCA table: Latest scans --- .../welcome/components/sca_scan/sca_scan.tsx | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 19ea2b590e..7f2ab0d231 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -36,7 +36,7 @@ import { formatUIDate } from '../../../../../react-services/time-service'; import { getAngularModule } from '../../../../../kibana-services'; import { withReduxProvider, withUserAuthorizationPrompt } from "../../../hocs"; import { compose } from 'redux'; - +import { Inventory } from '../../../../../components/agents/sca/index'; export const ScaScan = compose( withReduxProvider, withUserAuthorizationPrompt([ @@ -69,6 +69,7 @@ export const ScaScan = compose( }; } + async componentDidMount() { this._isMount = true; const $injector = getAngularModule().$injector; @@ -114,34 +115,36 @@ export const ScaScan = compose( renderScanDetails() { const { isLoading, lastScan } = this.state; + const {agent} = this.props if (isLoading || lastScan === undefined) return; return ( - { + {/* { window.location.href = `#/overview?tab=sca&redirectPolicy=${lastScan.policy_id}`; store.dispatch(updateCurrentAgentData(this.props.agent)); this.router.reload(); } - }> -

{lastScan.name}

- + }> */} + {/*

{lastScan.name}

*/} + + {/* */} - + {/* {lastScan.policy_id} - + */} - + {/*

{lastScan.description}

 - - + */} + {/* - - + */} + {/* @@ -190,7 +193,7 @@ export const ScaScan = compose( Duration: {this.durationScan()} - + */} ) } @@ -227,9 +230,10 @@ export const ScaScan = compose( -

SCA: Last scan

+

SCA: Lastest scans

 - + {/* */} + {/* - + */} {lastScan === undefined && emptyPrompt} From bf727a0bce83a8bf4ee8f97cb6ed315724ec8c90 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Tue, 20 Sep 2022 21:52:29 -0300 Subject: [PATCH 02/18] redirect and states --- public/components/agents/sca/inventory.tsx | 67 +++++++++++---- .../welcome/components/sca_scan/sca_scan.tsx | 84 ++++++++++++++----- 2 files changed, 114 insertions(+), 37 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index 02e0ea576b..eb8a2bb48f 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -49,14 +49,18 @@ import { import { API_NAME_AGENT_STATUS, UI_LOGGER_LEVELS } from '../../../../common/constants'; import { getErrorOrchestrator } from '../../../react-services/common-services'; import { VisualizationBasic } from '../../common/charts/visualizations/basic'; - +import PropTypes from 'prop-types' export class Inventory extends Component { _isMount = false; + props!: { + [key: string]: any + } constructor(props) { super(props); - const { agent } = this.props; + + this.state = { - agent, + // agent, items: [], itemIdToExpandedRowMap: {}, showMoreInfo: false, @@ -64,6 +68,8 @@ export class Inventory extends Component { filters: [], pageTableChecks: { pageIndex: 0 }, policies: [], + redirect: false, + // firstTable: true }; this.suggestions = {}; this.columnsPolicies = [ @@ -175,6 +181,7 @@ export class Inventory extends Component { async componentDidMount() { this._isMount = true; + // this.setState({withoutDashboard: withoutDashboard ? withoutDashboard : false}) await this.initialize(); const regex = new RegExp('redirectPolicy=' + '[^&]*'); const match = window.location.href.match(regex); @@ -186,10 +193,12 @@ export class Inventory extends Component { q: 'policy_id=' + id, }); await this.loadScaPolicy(((((policy || {}).data || {}).data || {}).items || [])[0]); + console.log(window.location.href, 'location') window.location.href = window.location.href.replace( new RegExp('redirectPolicy=' + '[^&]*'), '' ); + console.log('entre') this.setState({ loading: false }); } } catch (error) { @@ -394,6 +403,7 @@ export class Inventory extends Component { } async loadScaPolicy(policy) { + console.log('soy load') this._isMount && this.setState({ loadingPolicy: true, @@ -408,6 +418,7 @@ export class Inventory extends Component { }, }); const [policyData] = policyResponse.data.data.affected_items; + console.log(policyData, 'pol') // It queries all checks without filters, because the filters are applied in the results // due to the use of EuiInMemoryTable instead EuiTable components and do arequest with each change of filters. const checksResponse = await WzRequest.apiReq( @@ -549,11 +560,24 @@ export class Inventory extends Component { } render() { + const { onClickRow } = this.props + const handleOnClick = (policy_id) => { + onClickRow(policy_id) + this.setState({lookingPolicy: true , loading: false, redirect: true}) + } + + // agent && + // (agent || {}).os && + // this.state.lookingPolicy && + // !this.state.loading && + + const getPoliciesRowProps = (item, idx) => { + console.log(item, 'item') return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', - onClick: () => this.loadScaPolicy(item), + onClick: onClickRow ? () => handleOnClick(item.policy_id) : () => this.loadScaPolicy(item), }; }; const getChecksRowProps = (item, idx) => { @@ -577,6 +601,9 @@ export class Inventory extends Component { onClick={() => this.setState({ showMoreInfo: !this.state.showMoreInfo })} > ); + const { agent, withoutDashboard, firstTable } = this.props; + console.log(agent, this.state.lookingPolicy, this.state.loading, this.state.redirect, firstTable, 'perro') + return (
@@ -588,8 +615,8 @@ export class Inventory extends Component { )}
- {this.props.agent && - (this.props.agent || {}).status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED && + {agent && + (agent || {}).status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED && !this.state.policies.length && !this.state.loading && ( @@ -599,8 +626,8 @@ export class Inventory extends Component { )} - {this.props.agent && - (this.props.agent || {}).status === API_NAME_AGENT_STATUS.NEVER_CONNECTED && + {agent && + (agent || {}).status === API_NAME_AGENT_STATUS.NEVER_CONNECTED && !this.state.loading && ( )} - {this.props.agent && - (this.props.agent || {}).os && + {agent && + (agent || {}).os && !this.state.lookingPolicy && this.state.policies.length > 0 && !this.state.loading && (
- {this.state.policies.length && ( + {this.state.policies.length && !withoutDashboard && ( {this.state.policies.map((policy, idx) => ( @@ -654,7 +681,7 @@ export class Inventory extends Component { -
)} - {this.props.agent && - (this.props.agent || {}).os && - this.state.lookingPolicy && + {agent && + (agent || {}).os && + this.state.lookingPolicy && !this.state.loading && (
@@ -813,3 +840,13 @@ export class Inventory extends Component { ); } } + + +Inventory.propTypes = { + withoutDashboard: PropTypes.bool +} + +Inventory.defaultProps = { + withoutDashboard: false, + onClickRow: undefined +} \ No newline at end of file diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 7f2ab0d231..736c6bb073 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -26,7 +26,8 @@ import { EuiButtonIcon, EuiToolTip, EuiEmptyPrompt, - EuiIcon + EuiIcon, + EuiBasicTable, } from '@elastic/eui'; import moment from 'moment-timezone'; import store from '../../../../../redux/store'; @@ -37,6 +38,7 @@ import { getAngularModule } from '../../../../../kibana-services'; import { withReduxProvider, withUserAuthorizationPrompt } from "../../../hocs"; import { compose } from 'redux'; import { Inventory } from '../../../../../components/agents/sca/index'; + export const ScaScan = compose( withReduxProvider, withUserAuthorizationPrompt([ @@ -59,6 +61,7 @@ export const ScaScan = compose( [key: string]: any }, isLoading: Boolean, + firstTable: Boolean } constructor(props) { @@ -66,6 +69,7 @@ export const ScaScan = compose( this.state = { lastScan: {}, isLoading: true, + firstTable: true, }; } @@ -113,6 +117,13 @@ export const ScaScan = compose( } } + onClickRow(policy_id) { + window.location.href = `#/overview?tab=sca&redirectPolicy=${policy_id}`; + store.dispatch(updateCurrentAgentData(this.props.agent)); + this.router.reload(); + // this.setState({firstTable:false}) + } + renderScanDetails() { const { isLoading, lastScan } = this.state; const {agent} = this.props @@ -122,29 +133,45 @@ export const ScaScan = compose( - {/* { + { window.location.href = `#/overview?tab=sca&redirectPolicy=${lastScan.policy_id}`; store.dispatch(updateCurrentAgentData(this.props.agent)); this.router.reload(); } - }> */} - {/*

{lastScan.name}

*/} - - {/* */} + }> +

{lastScan.name}

+ {/* */} + + {/* + + + + + + */} + - {/* + {lastScan.policy_id} - */} + - {/* + + + + +

{lastScan.description}

 - */} - {/* + + - */} - {/* + + @@ -193,7 +220,7 @@ export const ScaScan = compose( Duration: {this.durationScan()} - */} + ) } @@ -229,24 +256,37 @@ export const ScaScan = compose( - + + + { + window.location.href = `#/overview?tab=sca&redirectPolicy=${lastScan.policy_id}`; + store.dispatch(updateCurrentAgentData(this.props.agent)); + this.router.reload(); + } + }> +

SCA: Lastest scans

+ {/* */} + + + + {/*

SCA: Lastest scans

- + */} {/* */} - {/* + { - window.location.href = `#/overview?tab=sca`; - store.dispatch(updateCurrentAgentData(this.props.agent)); - this.router.reload(); - } + window.location.href = `#/overview?tab=sca`; + store.dispatch(updateCurrentAgentData(this.props.agent)); + this.router.reload(); + } } aria-label="Open SCA Scans" /> - */} + {lastScan === undefined && emptyPrompt} From 7fba6a2d533a32e49c059efa80d496fad718c151 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Tue, 20 Sep 2022 23:42:22 -0300 Subject: [PATCH 03/18] params url --- public/components/agents/sca/inventory.tsx | 22 ++++++++++++++----- .../welcome/components/sca_scan/sca_scan.tsx | 13 ++++++++++- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index eb8a2bb48f..67151bfde0 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -70,6 +70,7 @@ export class Inventory extends Component { policies: [], redirect: false, // firstTable: true + secondTable: false }; this.suggestions = {}; this.columnsPolicies = [ @@ -228,6 +229,13 @@ export class Inventory extends Component { pageTableChecks: { pageIndex: 0, pageSize: this.state.pageTableChecks.pageSize }, }); } + + const regex = new RegExp('redirectRule=' + '[^&]*'); + const match = window.location.href.match(regex); + if (match && match[0] && !this.state.secondTable) { + this.loadScaPolicy('cis_ubuntu18-04', true) + console.log(match[0], 'matchi') + } } componentWillUnmount() { @@ -402,19 +410,20 @@ export class Inventory extends Component { } } - async loadScaPolicy(policy) { + async loadScaPolicy(policy, secondTable) { console.log('soy load') this._isMount && this.setState({ loadingPolicy: true, itemIdToExpandedRowMap: {}, pageTableChecks: { pageIndex: 0 }, + secondTable: secondTable ? secondTable : false }); if (policy) { try { const policyResponse = await WzRequest.apiReq('GET', `/sca/${this.props.agent.id}`, { params: { - q: 'policy_id=' + policy.policy_id, + q: 'policy_id=' + policy, }, }); const [policyData] = policyResponse.data.data.affected_items; @@ -423,7 +432,7 @@ export class Inventory extends Component { // due to the use of EuiInMemoryTable instead EuiTable components and do arequest with each change of filters. const checksResponse = await WzRequest.apiReq( 'GET', - `/sca/${this.props.agent.id}/checks/${policy.policy_id}`, + `/sca/${this.props.agent.id}/checks/${policy}`, {} ); const checks = ( @@ -434,7 +443,7 @@ export class Inventory extends Component { this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks }); } catch (error) { this.setState({ lookingPolicy: policy, loadingPolicy: false }); - + console.log(error, 'error') const options: UIErrorLog = { context: `${Inventory.name}.loadScaPolicy`, level: UI_LOGGER_LEVELS.ERROR as UILogLevel, @@ -563,6 +572,7 @@ export class Inventory extends Component { const { onClickRow } = this.props const handleOnClick = (policy_id) => { onClickRow(policy_id) + console.log(policy_id, 'name') this.setState({lookingPolicy: true , loading: false, redirect: true}) } @@ -577,7 +587,7 @@ export class Inventory extends Component { return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', - onClick: onClickRow ? () => handleOnClick(item.policy_id) : () => this.loadScaPolicy(item), + onClick: onClickRow ? () => handleOnClick('nametest') : () => this.loadScaPolicy(item.policy_id), }; }; const getChecksRowProps = (item, idx) => { @@ -742,7 +752,7 @@ export class Inventory extends Component { this.loadScaPolicy(this.state.lookingPolicy)} + onClick={() => this.loadScaPolicy(this.state.lookingPolicy.policy_id)} > Refresh diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 736c6bb073..0470deed66 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -118,16 +118,27 @@ export const ScaScan = compose( } onClickRow(policy_id) { - window.location.href = `#/overview?tab=sca&redirectPolicy=${policy_id}`; + window.location.href = `#/overview?tab=sca&redirectRule=${policy_id}`; store.dispatch(updateCurrentAgentData(this.props.agent)); this.router.reload(); // this.setState({firstTable:false}) + } + + // onClickRow(policy_id) { + // window.location.href = window.location.href.replace( + // new RegExp('redirectRule=' + '[^&]*'), + // `redirectRule=${policy_id}` + // ); + // this.setState({ currentRuleId: lastScan.policy_id, isLoading: true }); + // } renderScanDetails() { const { isLoading, lastScan } = this.state; const {agent} = this.props if (isLoading || lastScan === undefined) return; + + return ( From 6bb26a486b6fe55579deb2f9ab173d4daa1d5c07 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Wed, 21 Sep 2022 09:25:49 -0300 Subject: [PATCH 04/18] the tables are working properly --- public/components/agents/sca/inventory.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index 67151bfde0..06161ee63f 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -233,7 +233,7 @@ export class Inventory extends Component { const regex = new RegExp('redirectRule=' + '[^&]*'); const match = window.location.href.match(regex); if (match && match[0] && !this.state.secondTable) { - this.loadScaPolicy('cis_ubuntu18-04', true) + this.loadScaPolicy(match[0].split('=')[1], true) console.log(match[0], 'matchi') } } @@ -587,7 +587,7 @@ export class Inventory extends Component { return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', - onClick: onClickRow ? () => handleOnClick('nametest') : () => this.loadScaPolicy(item.policy_id), + onClick: onClickRow ? () => handleOnClick(item.policy_id) : () => this.loadScaPolicy(item.policy_id), }; }; const getChecksRowProps = (item, idx) => { From f9fa2fd0342c7d333d05ec1747511bd6bb54652e Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Wed, 21 Sep 2022 09:51:32 -0300 Subject: [PATCH 05/18] styles --- public/components/agents/sca/inventory.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index 06161ee63f..e979e6a501 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -688,7 +688,7 @@ export class Inventory extends Component { )} - + {/* */} - + {/* */}
)} {agent && From 6574890f3b3ba1e00fa1252e0b3037d86afffe55 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Thu, 22 Sep 2022 09:17:58 -0300 Subject: [PATCH 06/18] inventory test --- .../sca/__snapshots__/inventory.test.tsx.snap | 79 +++++++++++++++++++ .../components/agents/sca/inventory.test.tsx | 67 ++++++++++++++++ public/components/agents/sca/inventory.tsx | 79 ++++++++++--------- .../welcome/components/sca_scan/sca_scan.tsx | 2 +- 4 files changed, 190 insertions(+), 37 deletions(-) create mode 100644 public/components/agents/sca/__snapshots__/inventory.test.tsx.snap create mode 100644 public/components/agents/sca/inventory.test.tsx diff --git a/public/components/agents/sca/__snapshots__/inventory.test.tsx.snap b/public/components/agents/sca/__snapshots__/inventory.test.tsx.snap new file mode 100644 index 0000000000..bcebc8aba3 --- /dev/null +++ b/public/components/agents/sca/__snapshots__/inventory.test.tsx.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SCA Inventory Test should render correctly 1`] = ` + +
+
+
+
+
+
+
+ +`; + +exports[`SCA Inventory Test should render correctly 2`] = ` + +
+
+
+
+ + + No scans available + +
+
+ +
+
+
+ +`; + +exports[`SCA Inventory Test should render correctly 3`] = ``; diff --git a/public/components/agents/sca/inventory.test.tsx b/public/components/agents/sca/inventory.test.tsx new file mode 100644 index 0000000000..cd166615db --- /dev/null +++ b/public/components/agents/sca/inventory.test.tsx @@ -0,0 +1,67 @@ +import { fireEvent, render, waitFor } from '@testing-library/react'; +import '@testing-library/jest-dom'; +// import {jest} from '@jest/globals' +import React from 'react'; +import { Inventory } from './inventory' +import * as _ from 'lodash' +import { createGetterSetter } from '../../../utils/create-getter-setter'; +import { ErrorOrchestratorService } from '../../../react-services/error-orchestrator/error-orchestrator.service'; + + +describe('SCA Inventory Test', () => { + // mocked getErrorOrchestrator +const mockedGetErrorOrchestrator = { + handleError: jest.fn(), + }; + + jest.mock('../../../react-services/common-services', () => { + return { + getErrorOrchestrator: () => mockedGetErrorOrchestrator, + }; + }); + // const mockGet = jest.fn(); + // const mockSet = jest.fn(); + // jest.mock('../../../react-services/error-orchestrator/error-orchestrator.service'); + // jest.mock('../../../utils/create-getter-setter'); + it('should render correctly', async () => { + const spyReactConsoleError = jest.spyOn(console, 'error'); + spyReactConsoleError.mockImplementation(() => {}); + const onClickRow = jest.fn() + const props= { + agent: { + agentPlatform:"linux", + configSum:"ab73af41699f13fdd81903b5f23d8d00", + dateAdd: "2022-09-01T15:40:06+00:00", + group: ['default'], + group_config_status: "synced", + id: "001", + ip: "172.18.0.5", + lastKeepAlive: "2022-09-21T23:47:35+00:00", + manager: "wazuh_manager_filebeat_sources_cmake-4.4-7.10.2", + mergedSum: "4a8724b20dee0124ff9656783c490c4e", + name: "wazuh_agent_ubuntu_sources_cmake-4.4", + node_name: "manager-node", + os: {arch: 'x86_64', codename: 'Bionic Beaver', major: '18', minor: '04', name: 'Ubuntu'}, + registerIP: "any", + status: "active", + version: "Wazuh v4.4.0", + }, + onClickRow, + withoutDashboard: true + } + // try { + + const { asFragment, debug } = render(); + debug() + + await waitFor(() => expect(asFragment()).toMatchSnapshot()); + // await waitFor(() => expect(createGetterSetter).toHaveBeenCalledTimes(1)) + // await waitFor(() => expect(ErrorOrchestratorService).toHaveBeenCalledTimes(1)) + // } catch(error) { + // console.log(error) + // } + // expect(asFragment()).toMatchSnapshot(); + // const { debug } = render(); + +}) +}); diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index e979e6a501..f1f63ffba6 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -69,7 +69,6 @@ export class Inventory extends Component { pageTableChecks: { pageIndex: 0 }, policies: [], redirect: false, - // firstTable: true secondTable: false }; this.suggestions = {}; @@ -194,12 +193,12 @@ export class Inventory extends Component { q: 'policy_id=' + id, }); await this.loadScaPolicy(((((policy || {}).data || {}).data || {}).items || [])[0]); - console.log(window.location.href, 'location') + // console.log(window.location.href, 'location') window.location.href = window.location.href.replace( new RegExp('redirectPolicy=' + '[^&]*'), '' ); - console.log('entre') + // console.log('entre') this.setState({ loading: false }); } } catch (error) { @@ -233,8 +232,8 @@ export class Inventory extends Component { const regex = new RegExp('redirectRule=' + '[^&]*'); const match = window.location.href.match(regex); if (match && match[0] && !this.state.secondTable) { - this.loadScaPolicy(match[0].split('=')[1], true) - console.log(match[0], 'matchi') + this.loadScaPolicy(match[0].split('=')[1], true) + // console.log(match[0], 'matchi') } } @@ -411,7 +410,7 @@ export class Inventory extends Component { } async loadScaPolicy(policy, secondTable) { - console.log('soy load') + // console.log('soy load') this._isMount && this.setState({ loadingPolicy: true, @@ -427,7 +426,7 @@ export class Inventory extends Component { }, }); const [policyData] = policyResponse.data.data.affected_items; - console.log(policyData, 'pol') + // console.log(policyData, 'pol') // It queries all checks without filters, because the filters are applied in the results // due to the use of EuiInMemoryTable instead EuiTable components and do arequest with each change of filters. const checksResponse = await WzRequest.apiReq( @@ -443,7 +442,7 @@ export class Inventory extends Component { this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks }); } catch (error) { this.setState({ lookingPolicy: policy, loadingPolicy: false }); - console.log(error, 'error') + // console.log(error, 'error') const options: UIErrorLog = { context: `${Inventory.name}.loadScaPolicy`, level: UI_LOGGER_LEVELS.ERROR as UILogLevel, @@ -467,14 +466,14 @@ export class Inventory extends Component { this.state.filters.every((filter) => filter.field === 'search' ? Object.keys(check).some( - (key) => - ['string', 'number'].includes(typeof check[key]) && - String(check[key]).toLowerCase().includes(filter.value.toLowerCase()) - ) + (key) => + ['string', 'number'].includes(typeof check[key]) && + String(check[key]).toLowerCase().includes(filter.value.toLowerCase()) + ) : typeof check[filter.field] === 'string' && - (filter.value === '' - ? check[filter.field] === filter.value - : check[filter.field].toLowerCase().includes(filter.value.toLowerCase())) + (filter.value === '' + ? check[filter.field] === filter.value + : check[filter.field].toLowerCase().includes(filter.value.toLowerCase())) ) ); @@ -572,8 +571,8 @@ export class Inventory extends Component { const { onClickRow } = this.props const handleOnClick = (policy_id) => { onClickRow(policy_id) - console.log(policy_id, 'name') - this.setState({lookingPolicy: true , loading: false, redirect: true}) + // console.log(policy_id, 'name') + this.setState({ lookingPolicy: true, loading: false, redirect: true }) } // agent && @@ -583,10 +582,12 @@ export class Inventory extends Component { const getPoliciesRowProps = (item, idx) => { - console.log(item, 'item') + // console.log(item, 'item') return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', + //This logic is necessary because when you click on a row in the table, it redirects you to a url that receives + //a parameter and displays the desired table. onClick: onClickRow ? () => handleOnClick(item.policy_id) : () => this.loadScaPolicy(item.policy_id), }; }; @@ -611,9 +612,15 @@ export class Inventory extends Component { onClick={() => this.setState({ showMoreInfo: !this.state.showMoreInfo })} > ); - const { agent, withoutDashboard, firstTable } = this.props; - console.log(agent, this.state.lookingPolicy, this.state.loading, this.state.redirect, firstTable, 'perro') - + const { agent, withoutDashboard } = this.props; + // console.log(agent, this.state.lookingPolicy, this.state.loading, this.state.redirect, 'perro') + // const itemsMapped = this.state.policies.map((item) => { + // return ({ + // ...item, pass:
{item.pass}
, + // fail:
{item.fail}
+ // } + // ) + // }) return (
@@ -689,21 +696,21 @@ export class Inventory extends Component { )} {/* */} - - - - - + + + + + {/* */}
)} {agent && (agent || {}).os && - this.state.lookingPolicy && + this.state.lookingPolicy && !this.state.loading && (
@@ -852,11 +859,11 @@ export class Inventory extends Component { } -Inventory.propTypes = { - withoutDashboard: PropTypes.bool -} +Inventory.propTypes = { + withoutDashboard: PropTypes.bool +} -Inventory.defaultProps = { - withoutDashboard: false, +Inventory.defaultProps = { + withoutDashboard: false, onClickRow: undefined } \ No newline at end of file diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 0470deed66..9ce01105fb 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -173,7 +173,7 @@ export const ScaScan = compose( - + From 71f129da2291d64a56f866cdd4bdcef393024fb9 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Thu, 22 Sep 2022 10:06:08 -0300 Subject: [PATCH 07/18] styles euiFlexGroup --- public/components/common/modules/module.scss | 5 +++++ .../common/welcome/components/sca_scan/sca_scan.tsx | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/public/components/common/modules/module.scss b/public/components/common/modules/module.scss index 4587782af8..351c8e1cbd 100644 --- a/public/components/common/modules/module.scss +++ b/public/components/common/modules/module.scss @@ -139,3 +139,8 @@ discover-app-w .sidebar-container { } } } + +.wz-section-sca-euiFlexGroup { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 9ce01105fb..8a785f402c 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -175,7 +175,7 @@ export const ScaScan = compose( - + {/*

{lastScan.description}

@@ -231,7 +231,7 @@ export const ScaScan = compose( Duration: {this.durationScan()} - + */} ) } @@ -266,7 +266,7 @@ export const ScaScan = compose( - + { @@ -289,6 +289,7 @@ export const ScaScan = compose( { window.location.href = `#/overview?tab=sca`; store.dispatch(updateCurrentAgentData(this.props.agent)); From 9e03a6947a827930f336b4f73e8c66cf0f778209 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Fri, 23 Sep 2022 10:31:49 -0300 Subject: [PATCH 08/18] SCA test, back button and parameter renaming --- .../components/agents/sca/inventory.test.tsx | 32 +++++++++++++------ public/components/agents/sca/inventory.tsx | 25 ++++++++++++--- .../welcome/components/sca_scan/sca_scan.tsx | 2 +- 3 files changed, 45 insertions(+), 14 deletions(-) diff --git a/public/components/agents/sca/inventory.test.tsx b/public/components/agents/sca/inventory.test.tsx index cd166615db..ebc41484a3 100644 --- a/public/components/agents/sca/inventory.test.tsx +++ b/public/components/agents/sca/inventory.test.tsx @@ -6,10 +6,12 @@ import { Inventory } from './inventory' import * as _ from 'lodash' import { createGetterSetter } from '../../../utils/create-getter-setter'; import { ErrorOrchestratorService } from '../../../react-services/error-orchestrator/error-orchestrator.service'; +import configureMockStore from 'redux-mock-store'; +import { Provider } from 'react-redux'; +import { WzRequest } from '../../../react-services/wz-request'; + -describe('SCA Inventory Test', () => { - // mocked getErrorOrchestrator const mockedGetErrorOrchestrator = { handleError: jest.fn(), }; @@ -19,13 +21,24 @@ const mockedGetErrorOrchestrator = { getErrorOrchestrator: () => mockedGetErrorOrchestrator, }; }); + + jest.mock('../../../react-services/wz-request') + +describe('SCA Inventory Test', () => { + // mocked getErrorOrchestrator // const mockGet = jest.fn(); // const mockSet = jest.fn(); // jest.mock('../../../react-services/error-orchestrator/error-orchestrator.service'); // jest.mock('../../../utils/create-getter-setter'); - it('should render correctly', async () => { - const spyReactConsoleError = jest.spyOn(console, 'error'); - spyReactConsoleError.mockImplementation(() => {}); + it('should render correctly', () => { + const mockStore = configureMockStore(); + const store = mockStore({policy_id:'cis_bu'}); + const apiReqMock = jest.fn().mockReturnValue({ + data: { + data: { affected_items: ['hola'] }, + }, + }) + WzRequest.apiReq = apiReqMock const onClickRow = jest.fn() const props= { agent: { @@ -48,20 +61,21 @@ const mockedGetErrorOrchestrator = { }, onClickRow, withoutDashboard: true - } + } // try { - const { asFragment, debug } = render(); + const { asFragment, debug } = render(); debug() - await waitFor(() => expect(asFragment()).toMatchSnapshot()); + // await waitFor(() => expect(asFragment()).toMatchSnapshot()); + expect(apiReqMock).toHaveBeenCalledTimes(1) // await waitFor(() => expect(createGetterSetter).toHaveBeenCalledTimes(1)) // await waitFor(() => expect(ErrorOrchestratorService).toHaveBeenCalledTimes(1)) // } catch(error) { // console.log(error) // } // expect(asFragment()).toMatchSnapshot(); - // const { debug } = render(); + // const { debug } = render(); }) }); diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index f1f63ffba6..367559427e 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -50,6 +50,8 @@ import { API_NAME_AGENT_STATUS, UI_LOGGER_LEVELS } from '../../../../common/cons import { getErrorOrchestrator } from '../../../react-services/common-services'; import { VisualizationBasic } from '../../common/charts/visualizations/basic'; import PropTypes from 'prop-types' +import { AppNavigate } from '../../../react-services/app-navigate'; + export class Inventory extends Component { _isMount = false; props!: { @@ -69,7 +71,8 @@ export class Inventory extends Component { pageTableChecks: { pageIndex: 0 }, policies: [], redirect: false, - secondTable: false + secondTable: false, + secondTableBack: false }; this.suggestions = {}; this.columnsPolicies = [ @@ -229,11 +232,12 @@ export class Inventory extends Component { }); } - const regex = new RegExp('redirectRule=' + '[^&]*'); + const regex = new RegExp('redirectPolicyTable=' + '[^&]*'); const match = window.location.href.match(regex); - if (match && match[0] && !this.state.secondTable) { + if (match && match[0] && !this.state.secondTable && !this.state.secondTableBack) { this.loadScaPolicy(match[0].split('=')[1], true) // console.log(match[0], 'matchi') + this.setState({secondTableBack: true}) } } @@ -409,6 +413,19 @@ export class Inventory extends Component { } } + handleBack (ev) { + AppNavigate.navigateToModule(ev, 'agents', { tab: 'welcome', agent: this.props.agent.id }); + ev.stopPropagation(); + }; + + // handleBack(e) { + // console.log('enytr') + // e.preventDefault() + // return( + // window && window.history && window.history.back() + // ) + // } + async loadScaPolicy(policy, secondTable) { // console.log('soy load') this._isMount && @@ -719,7 +736,7 @@ export class Inventory extends Component { this.loadScaPolicy(false)} + onClick={this.state.secondTableBack ? (ev) => this.handleBack(ev) : () => this.loadScaPolicy(false)} iconType="arrowLeft" aria-label="Back to policies" {...{ iconSize: 'l' }} diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 8a785f402c..173c7206cd 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -118,7 +118,7 @@ export const ScaScan = compose( } onClickRow(policy_id) { - window.location.href = `#/overview?tab=sca&redirectRule=${policy_id}`; + window.location.href = `#/overview?tab=sca&redirectPolicyTable=${policy_id}`; store.dispatch(updateCurrentAgentData(this.props.agent)); this.router.reload(); // this.setState({firstTable:false}) From ba53ea95285a93e648eb22bcc558187bb303cb70 Mon Sep 17 00:00:00 2001 From: "chantal.kelm" Date: Sun, 25 Sep 2022 20:06:48 -0300 Subject: [PATCH 09/18] load for tables --- public/components/agents/sca/inventory.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index 367559427e..e8161f0605 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -72,7 +72,8 @@ export class Inventory extends Component { policies: [], redirect: false, secondTable: false, - secondTableBack: false + secondTableBack: false, + isLoading: false }; this.suggestions = {}; this.columnsPolicies = [ @@ -237,7 +238,7 @@ export class Inventory extends Component { if (match && match[0] && !this.state.secondTable && !this.state.secondTableBack) { this.loadScaPolicy(match[0].split('=')[1], true) // console.log(match[0], 'matchi') - this.setState({secondTableBack: true}) + this.setState({secondTableBack: true, isLoading: true}) } } @@ -456,9 +457,9 @@ export class Inventory extends Component { ).map((item) => ({ ...item, result: item.result || 'not applicable' })); this.buildSuggestionSearchBar(policyData.policy_id, checks); this._isMount && - this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks }); + this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks, isLoading: false }); } catch (error) { - this.setState({ lookingPolicy: policy, loadingPolicy: false }); + this.setState({ lookingPolicy: policy, loadingPolicy: false, isLoading: false }); // console.log(error, 'error') const options: UIErrorLog = { context: `${Inventory.name}.loadScaPolicy`, @@ -473,7 +474,7 @@ export class Inventory extends Component { getErrorOrchestrator().handleError(options); } } else { - this._isMount && this.setState({ lookingPolicy: policy, loadingPolicy: false, items: [] }); + this._isMount && this.setState({ lookingPolicy: policy, loadingPolicy: false, items: [], isLoading: false }); } } @@ -641,7 +642,7 @@ export class Inventory extends Component { return (
- {this.state.loading && ( + {this.state.loading || this.state.isLoading && (
@@ -677,7 +678,7 @@ export class Inventory extends Component { (agent || {}).os && !this.state.lookingPolicy && this.state.policies.length > 0 && - !this.state.loading && ( + !this.state.loading && !this.state.isLoading && (
{this.state.policies.length && !withoutDashboard && ( @@ -728,7 +729,7 @@ export class Inventory extends Component { {agent && (agent || {}).os && this.state.lookingPolicy && - !this.state.loading && ( + ((!this.state.loading) || (!this.state.isLoading )) && (
From 008917467cc1c60e5c7751fe148cc08fc7dc54ba Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Mon, 17 Oct 2022 16:08:36 -0300 Subject: [PATCH 10/18] Added new policies table for reuse in agent welcome and sca --- public/components/agents/sca/index.ts | 3 +- public/components/agents/sca/inventory.tsx | 23 +-- .../agents/sca/inventory/api-request.ts | 11 ++ .../components/agents/sca/inventory/index.ts | 2 + .../agents/sca/inventory/policies-table.tsx | 33 ++++ .../welcome/components/sca_scan/sca_scan.tsx | 184 ++++++++---------- 6 files changed, 141 insertions(+), 115 deletions(-) create mode 100644 public/components/agents/sca/inventory/api-request.ts create mode 100644 public/components/agents/sca/inventory/index.ts create mode 100644 public/components/agents/sca/inventory/policies-table.tsx diff --git a/public/components/agents/sca/index.ts b/public/components/agents/sca/index.ts index 0184fc57f7..90f98e1d76 100644 --- a/public/components/agents/sca/index.ts +++ b/public/components/agents/sca/index.ts @@ -1,2 +1,3 @@ export { MainSca } from './main'; -export { Inventory } from './inventory'; \ No newline at end of file +export { Inventory } from './inventory'; +export * from './inventory/index' \ No newline at end of file diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index e8161f0605..404d0d4b0d 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -16,7 +16,6 @@ import { EuiFlexGroup, EuiPanel, EuiPage, - EuiBasicTable, EuiInMemoryTable, EuiSpacer, EuiText, @@ -51,6 +50,7 @@ import { getErrorOrchestrator } from '../../../react-services/common-services'; import { VisualizationBasic } from '../../common/charts/visualizations/basic'; import PropTypes from 'prop-types' import { AppNavigate } from '../../../react-services/app-navigate'; +import SCAPoliciesTable from './inventory/policies-table'; export class Inventory extends Component { _isMount = false; @@ -185,7 +185,6 @@ export class Inventory extends Component { async componentDidMount() { this._isMount = true; - // this.setState({withoutDashboard: withoutDashboard ? withoutDashboard : false}) await this.initialize(); const regex = new RegExp('redirectPolicy=' + '[^&]*'); const match = window.location.href.match(regex); @@ -197,7 +196,6 @@ export class Inventory extends Component { q: 'policy_id=' + id, }); await this.loadScaPolicy(((((policy || {}).data || {}).data || {}).items || [])[0]); - // console.log(window.location.href, 'location') window.location.href = window.location.href.replace( new RegExp('redirectPolicy=' + '[^&]*'), '' @@ -630,7 +628,7 @@ export class Inventory extends Component { onClick={() => this.setState({ showMoreInfo: !this.state.showMoreInfo })} > ); - const { agent, withoutDashboard } = this.props; + const { agent } = this.props; // console.log(agent, this.state.lookingPolicy, this.state.loading, this.state.redirect, 'perro') // const itemsMapped = this.state.policies.map((item) => { // return ({ @@ -680,7 +678,7 @@ export class Inventory extends Component { this.state.policies.length > 0 && !this.state.loading && !this.state.isLoading && (
- {this.state.policies.length && !withoutDashboard && ( + {this.state.policies.length && ( {this.state.policies.map((policy, idx) => ( @@ -712,18 +710,17 @@ export class Inventory extends Component { ))} )} - - {/* */} + - - {/* */}
)} {agent && @@ -876,12 +873,6 @@ export class Inventory extends Component { } } - -Inventory.propTypes = { - withoutDashboard: PropTypes.bool -} - Inventory.defaultProps = { - withoutDashboard: false, onClickRow: undefined } \ No newline at end of file diff --git a/public/components/agents/sca/inventory/api-request.ts b/public/components/agents/sca/inventory/api-request.ts new file mode 100644 index 0000000000..601263195e --- /dev/null +++ b/public/components/agents/sca/inventory/api-request.ts @@ -0,0 +1,11 @@ +import { WzRequest } from '../../../../react-services/wz-request'; + +export async function getAgentPolicies(agentId) { + const { + data: { + data: { affected_items: policies }, + }, + } = await WzRequest.apiReq('GET', `/sca/${agentId}`, {}); + + return policies; +} diff --git a/public/components/agents/sca/inventory/index.ts b/public/components/agents/sca/inventory/index.ts new file mode 100644 index 0000000000..5d66af3fa9 --- /dev/null +++ b/public/components/agents/sca/inventory/index.ts @@ -0,0 +1,2 @@ +export * from './api-request' +export * from './policies-table' \ No newline at end of file diff --git a/public/components/agents/sca/inventory/policies-table.tsx b/public/components/agents/sca/inventory/policies-table.tsx new file mode 100644 index 0000000000..a9b8086eaf --- /dev/null +++ b/public/components/agents/sca/inventory/policies-table.tsx @@ -0,0 +1,33 @@ +import { EuiBasicTable } from '@elastic/eui'; +import React from 'react'; + +type Props = { + policies: any[]; + columns: any[]; + rowProps?: any; + loading?: boolean; +}; + +export default function SCAPoliciesTable(props: Props) { + const { policies, columns, rowProps, loading = false } = props; + + const handleOnClick = (policy_id) => { + rowProps(policy_id) + } + + const getPoliciesRowProps = (item, idx) => { + return { + 'data-test-subj': `sca-row-${idx}`, + className: 'customRowClass', + //This logic is necessary because when you click on a row in the table, it redirects you to a url that receives + //a parameter and displays the desired table. + onClick: rowProps ? () => handleOnClick(item.policy_id) : () => console.log('no row'), + }; + }; + + return ( + <> + + + ); +} diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 173c7206cd..6cae4c07e0 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -20,24 +20,30 @@ import { EuiText, EuiLink, EuiBadge, - EuiStat, EuiSpacer, EuiLoadingChart, EuiButtonIcon, EuiToolTip, EuiEmptyPrompt, - EuiIcon, - EuiBasicTable, } from '@elastic/eui'; import moment from 'moment-timezone'; import store from '../../../../../redux/store'; import { updateCurrentAgentData } from '../../../../../redux/actions/appStateActions'; import { WzRequest } from '../../../../../react-services'; import { formatUIDate } from '../../../../../react-services/time-service'; +import { + UI_ERROR_SEVERITIES, + UIErrorLog, + UIErrorSeverity, + UILogLevel, +} from '../../../../../react-services/error-orchestrator/types'; +import { UI_LOGGER_LEVELS } from '../../../../../../common/constants'; +import { getErrorOrchestrator } from '../../../../../react-services/common-services'; import { getAngularModule } from '../../../../../kibana-services'; import { withReduxProvider, withUserAuthorizationPrompt } from "../../../hocs"; import { compose } from 'redux'; -import { Inventory } from '../../../../../components/agents/sca/index'; +import { getAgentPolicies } from '../../../../../components/agents/sca/index'; +import SCAPoliciesTable from '../../../../../components/agents/sca/inventory/policies-table'; export const ScaScan = compose( withReduxProvider, @@ -61,7 +67,8 @@ export const ScaScan = compose( [key: string]: any }, isLoading: Boolean, - firstTable: Boolean + firstTable: Boolean, + policies: any[], } constructor(props) { @@ -70,6 +77,7 @@ export const ScaScan = compose( lastScan: {}, isLoading: true, firstTable: true, + policies: [], }; } @@ -79,6 +87,7 @@ export const ScaScan = compose( const $injector = getAngularModule().$injector; this.router = $injector.get('$route'); this.getLastScan(this.props.agent.id); + this.getPolicies(this.props.agent.id); } async getLastScan(agentId: Number) { @@ -119,25 +128,75 @@ export const ScaScan = compose( onClickRow(policy_id) { window.location.href = `#/overview?tab=sca&redirectPolicyTable=${policy_id}`; - store.dispatch(updateCurrentAgentData(this.props.agent)); - this.router.reload(); - // this.setState({firstTable:false}) - + store.dispatch(updateCurrentAgentData(this.props.agent)); + this.router.reload(); + } + + getPolicies = async (agentId) => { + try { + const policies = await getAgentPolicies(agentId); + this.setState({ policies, isLoading: false }); + }catch(error){ + const options: UIErrorLog = { + context: `${ScaScan.name}.initialize`, + level: UI_LOGGER_LEVELS.ERROR as UILogLevel, + severity: UI_ERROR_SEVERITIES.BUSINESS as UIErrorSeverity, + error: { + error: error, + message: error.message || error, + title: error.name, + }, + }; + getErrorOrchestrator().handleError(options); + } } - - // onClickRow(policy_id) { - // window.location.href = window.location.href.replace( - // new RegExp('redirectRule=' + '[^&]*'), - // `redirectRule=${policy_id}` - // ); - // this.setState({ currentRuleId: lastScan.policy_id, isLoading: true }); - // } + + renderScanDetails() { const { isLoading, lastScan } = this.state; - const {agent} = this.props if (isLoading || lastScan === undefined) return; + const columnsPolicies = [ + { + field: 'name', + name: 'Policy', + }, + { + field: 'description', + name: 'Description', + truncateText: true, + }, + { + field: 'end_scan', + name: 'End scan', + dataType: 'date', + render: formatUIDate, + }, + { + field: 'pass', + name: 'Pass', + width: '100px', + }, + { + field: 'fail', + name: 'Fail', + width: '100px', + }, + { + field: 'invalid', + name: 'Not applicable', + width: '100px', + }, + { + field: 'score', + name: 'Score', + render: (score) => { + return `${score}%`; + }, + width: '100px', + }, + ]; return ( @@ -151,19 +210,7 @@ export const ScaScan = compose( } }>

{lastScan.name}

- {/* */} - {/* - - - - - - */} @@ -172,66 +219,12 @@ export const ScaScan = compose( - - + - {/* - - -

{lastScan.description}

- - - - - - - - - - - - - - - - - - - - - - - Start time: {formatUIDate(lastScan.start_scan)} - - - - - Duration: {this.durationScan()} - - - */} ) } @@ -276,14 +269,9 @@ export const ScaScan = compose( } }>

SCA: Lastest scans

- {/* */} - {/* -

SCA: Lastest scans

- */} - {/* */} { - window.location.href = `#/overview?tab=sca`; - store.dispatch(updateCurrentAgentData(this.props.agent)); - this.router.reload(); - } + window.location.href = `#/overview?tab=sca`; + store.dispatch(updateCurrentAgentData(this.props.agent)); + this.router.reload(); + } } aria-label="Open SCA Scans" /> From e458ca631378b81a4ed9a0a702ef9158a7536f7e Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Tue, 18 Oct 2022 12:03:44 -0300 Subject: [PATCH 11/18] Fixed table redirection on row clicked --- public/components/agents/sca/inventory.tsx | 50 +++---------------- .../agents/sca/inventory/policies-table.tsx | 14 ++---- .../welcome/components/sca_scan/sca_scan.tsx | 29 +++++------ 3 files changed, 25 insertions(+), 68 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index 404d0d4b0d..df573d235b 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -48,7 +48,6 @@ import { import { API_NAME_AGENT_STATUS, UI_LOGGER_LEVELS } from '../../../../common/constants'; import { getErrorOrchestrator } from '../../../react-services/common-services'; import { VisualizationBasic } from '../../common/charts/visualizations/basic'; -import PropTypes from 'prop-types' import { AppNavigate } from '../../../react-services/app-navigate'; import SCAPoliciesTable from './inventory/policies-table'; @@ -200,7 +199,6 @@ export class Inventory extends Component { new RegExp('redirectPolicy=' + '[^&]*'), '' ); - // console.log('entre') this.setState({ loading: false }); } } catch (error) { @@ -235,7 +233,6 @@ export class Inventory extends Component { const match = window.location.href.match(regex); if (match && match[0] && !this.state.secondTable && !this.state.secondTableBack) { this.loadScaPolicy(match[0].split('=')[1], true) - // console.log(match[0], 'matchi') this.setState({secondTableBack: true, isLoading: true}) } } @@ -417,16 +414,7 @@ export class Inventory extends Component { ev.stopPropagation(); }; - // handleBack(e) { - // console.log('enytr') - // e.preventDefault() - // return( - // window && window.history && window.history.back() - // ) - // } - - async loadScaPolicy(policy, secondTable) { - // console.log('soy load') + async loadScaPolicy(policy, secondTable?) { this._isMount && this.setState({ loadingPolicy: true, @@ -442,7 +430,6 @@ export class Inventory extends Component { }, }); const [policyData] = policyResponse.data.data.affected_items; - // console.log(policyData, 'pol') // It queries all checks without filters, because the filters are applied in the results // due to the use of EuiInMemoryTable instead EuiTable components and do arequest with each change of filters. const checksResponse = await WzRequest.apiReq( @@ -458,7 +445,6 @@ export class Inventory extends Component { this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks, isLoading: false }); } catch (error) { this.setState({ lookingPolicy: policy, loadingPolicy: false, isLoading: false }); - // console.log(error, 'error') const options: UIErrorLog = { context: `${Inventory.name}.loadScaPolicy`, level: UI_LOGGER_LEVELS.ERROR as UILogLevel, @@ -506,7 +492,6 @@ export class Inventory extends Component { 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:', @@ -585,28 +570,12 @@ export class Inventory extends Component { render() { const { onClickRow } = this.props - const handleOnClick = (policy_id) => { - onClickRow(policy_id) - // console.log(policy_id, 'name') + + const handlePoliciesTableClickRow = (policy_id) => { + onClickRow ? onClickRow(policy_id) : this.loadScaPolicy(policy_id) this.setState({ lookingPolicy: true, loading: false, redirect: true }) } - // agent && - // (agent || {}).os && - // this.state.lookingPolicy && - // !this.state.loading && - - - const getPoliciesRowProps = (item, idx) => { - // console.log(item, 'item') - return { - 'data-test-subj': `sca-row-${idx}`, - className: 'customRowClass', - //This logic is necessary because when you click on a row in the table, it redirects you to a url that receives - //a parameter and displays the desired table. - onClick: onClickRow ? () => handleOnClick(item.policy_id) : () => this.loadScaPolicy(item.policy_id), - }; - }; const getChecksRowProps = (item, idx) => { return { 'data-test-subj': `sca-check-row-${idx}`, @@ -629,14 +598,7 @@ export class Inventory extends Component { > ); const { agent } = this.props; - // console.log(agent, this.state.lookingPolicy, this.state.loading, this.state.redirect, 'perro') - // const itemsMapped = this.state.policies.map((item) => { - // return ({ - // ...item, pass:
{item.pass}
, - // fail:
{item.fail}
- // } - // ) - // }) + return (
@@ -717,7 +679,7 @@ export class Inventory extends Component { loading={this.state.loading} policies={this.state.policies} columns={this.columnsPolicies} - rowProps={getPoliciesRowProps} + rowProps={handlePoliciesTableClickRow} /> diff --git a/public/components/agents/sca/inventory/policies-table.tsx b/public/components/agents/sca/inventory/policies-table.tsx index a9b8086eaf..61c58fff5e 100644 --- a/public/components/agents/sca/inventory/policies-table.tsx +++ b/public/components/agents/sca/inventory/policies-table.tsx @@ -11,23 +11,17 @@ type Props = { export default function SCAPoliciesTable(props: Props) { const { policies, columns, rowProps, loading = false } = props; - const handleOnClick = (policy_id) => { - rowProps(policy_id) - } - const getPoliciesRowProps = (item, idx) => { return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', - //This logic is necessary because when you click on a row in the table, it redirects you to a url that receives - //a parameter and displays the desired table. - onClick: rowProps ? () => handleOnClick(item.policy_id) : () => console.log('no row'), - }; - }; + onClick: rowProps ? () => rowProps(item.policy_id) : null + } + } return ( <> - + ); } diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 6cae4c07e0..654e6755c6 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -45,6 +45,11 @@ import { compose } from 'redux'; import { getAgentPolicies } from '../../../../../components/agents/sca/index'; import SCAPoliciesTable from '../../../../../components/agents/sca/inventory/policies-table'; +type Props = { + agent: { [key in string]: any }; + router: any; // its angular router +} + export const ScaScan = compose( withReduxProvider, withUserAuthorizationPrompt([ @@ -57,11 +62,9 @@ export const ScaScan = compose( {action: 'sca:read', resource: 'agent:group:*'} ] ]) -)(class ScaScan extends Component { +)(class ScaScan extends Component { _isMount = false; - props!: { - [key: string]: any - } + router; state: { lastScan: { [key: string]: any @@ -161,43 +164,41 @@ export const ScaScan = compose( { field: 'name', name: 'Policy', - }, - { - field: 'description', - name: 'Description', - truncateText: true, + width: '40%', }, { field: 'end_scan', name: 'End scan', dataType: 'date', render: formatUIDate, + width: '20%', }, { field: 'pass', name: 'Pass', - width: '100px', + width: '10%', }, { field: 'fail', name: 'Fail', - width: '100px', + width: '10%', }, { field: 'invalid', name: 'Not applicable', - width: '100px', + width: '10%', }, { field: 'score', name: 'Score', + width: '10%', render: (score) => { return `${score}%`; - }, - width: '100px', + } }, ]; + return ( From 253912dcc5e3bb7b4145ce9ab09e0fe0a9fe1381 Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Tue, 18 Oct 2022 12:17:37 -0300 Subject: [PATCH 12/18] Solved review comments --- public/components/agents/sca/inventory.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index df573d235b..bb54925c08 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -72,7 +72,7 @@ export class Inventory extends Component { redirect: false, secondTable: false, secondTableBack: false, - isLoading: false + checksIsLoading: false }; this.suggestions = {}; this.columnsPolicies = [ @@ -233,7 +233,7 @@ export class Inventory extends Component { const match = window.location.href.match(regex); if (match && match[0] && !this.state.secondTable && !this.state.secondTableBack) { this.loadScaPolicy(match[0].split('=')[1], true) - this.setState({secondTableBack: true, isLoading: true}) + this.setState({secondTableBack: true, checksIsLoading: true}) } } @@ -442,9 +442,9 @@ export class Inventory extends Component { ).map((item) => ({ ...item, result: item.result || 'not applicable' })); this.buildSuggestionSearchBar(policyData.policy_id, checks); this._isMount && - this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks, isLoading: false }); + this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks, checksIsLoading: false }); } catch (error) { - this.setState({ lookingPolicy: policy, loadingPolicy: false, isLoading: false }); + this.setState({ lookingPolicy: policy, loadingPolicy: false, checksIsLoading: false }); const options: UIErrorLog = { context: `${Inventory.name}.loadScaPolicy`, level: UI_LOGGER_LEVELS.ERROR as UILogLevel, @@ -458,7 +458,7 @@ export class Inventory extends Component { getErrorOrchestrator().handleError(options); } } else { - this._isMount && this.setState({ lookingPolicy: policy, loadingPolicy: false, items: [], isLoading: false }); + this._isMount && this.setState({ lookingPolicy: policy, loadingPolicy: false, items: [], checksIsLoading: false }); } } @@ -602,7 +602,7 @@ export class Inventory extends Component { return (
- {this.state.loading || this.state.isLoading && ( + {this.state.loading || this.state.checksIsLoading && (
@@ -638,7 +638,7 @@ export class Inventory extends Component { (agent || {}).os && !this.state.lookingPolicy && this.state.policies.length > 0 && - !this.state.loading && !this.state.isLoading && ( + !this.state.loading && !this.state.checksIsLoading && (
{this.state.policies.length && ( @@ -688,7 +688,7 @@ export class Inventory extends Component { {agent && (agent || {}).os && this.state.lookingPolicy && - ((!this.state.loading) || (!this.state.isLoading )) && ( + ((!this.state.loading) || (!this.state.checksIsLoading )) && (
From 65a3d96df04046ccd9727fbda9b00f0f2ab0c029 Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Wed, 19 Oct 2022 15:23:50 -0300 Subject: [PATCH 13/18] Fixed policy row redirect, renaming and remove it unused code --- public/components/agents/sca/inventory.tsx | 89 +++++-------------- ...ies-table.tsx => agent-policies-table.tsx} | 2 +- .../agents/sca/inventory/checks-table.tsx | 1 - .../components/agents/sca/inventory/index.ts | 2 +- .../welcome/components/sca_scan/sca_scan.tsx | 6 +- 5 files changed, 29 insertions(+), 71 deletions(-) rename public/components/agents/sca/inventory/{policies-table.tsx => agent-policies-table.tsx} (90%) diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index bd72f6118b..6d040700b7 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -16,7 +16,6 @@ import { EuiFlexGroup, EuiPanel, EuiPage, - EuiBasicTable, EuiSpacer, EuiText, EuiProgress, @@ -45,47 +44,48 @@ import { API_NAME_AGENT_STATUS, UI_LOGGER_LEVELS } from '../../../../common/cons import { getErrorOrchestrator } from '../../../react-services/common-services'; import { VisualizationBasic } from '../../common/charts/visualizations/basic'; import { AppNavigate } from '../../../react-services/app-navigate'; -import SCAPoliciesTable from './inventory/policies-table'; +import SCAPoliciesTable from './inventory/agent-policies-table'; import { InventoryPolicyChecksTable } from './inventory/checks-table'; +import { RuleText } from './components'; type InventoryProps = { agent: { [key: string]: any }; }; type InventoryState = { - agent: object; itemIdToExpandedRowMap: object; showMoreInfo: boolean; loading: boolean; + checksIsLoading: boolean; + redirect: boolean; filters: object[]; pageTableChecks: { pageIndex: number; pageSize?: number }; policies: object[]; - lookingPolicy: { [key: string]: any } | false; + checks: object[]; + lookingPolicy: { [key: string]: any } | boolean; loadingPolicy: boolean; + secondTable: boolean; + secondTableBack: boolean; }; export class Inventory extends Component { _isMount = false; - props!: { - [key: string]: any - } + agent: { [key: string]: any } = {}; columnsPolicies: object[]; lookingPolicy: { [key: string]: any } | false = false; constructor(props) { super(props); - - this.state = { - agent, itemIdToExpandedRowMap: {}, showMoreInfo: false, loading: false, filters: [], pageTableChecks: { pageIndex: 0 }, policies: [], + checks: [], redirect: false, secondTable: false, secondTableBack: false, - checksIsLoading: false + checksIsLoading: false, lookingPolicy: false, loadingPolicy: false, }; @@ -245,19 +245,8 @@ export class Inventory extends Component { }, }); const [policyData] = policyResponse.data.data.affected_items; - // It queries all checks without filters, because the filters are applied in the results - // due to the use of EuiInMemoryTable instead EuiTable components and do arequest with each change of filters. - const checksResponse = await WzRequest.apiReq( - 'GET', - `/sca/${this.props.agent.id}/checks/${policy}`, - {} - ); - const checks = ( - (((checksResponse || {}).data || {}).data || {}).affected_items || [] - ).map((item) => ({ ...item, result: item.result || 'not applicable' })); - this.buildSuggestionSearchBar(policyData.policy_id, checks); this._isMount && - this.setState({ lookingPolicy: policyData, loadingPolicy: false, items: checks, checksIsLoading: false }); + this.setState({ lookingPolicy: policyData, loadingPolicy: false, checksIsLoading: false }); } catch (error) { this.setState({ lookingPolicy: policy, loadingPolicy: false, checksIsLoading: false }); const options: UIErrorLog = { @@ -277,23 +266,6 @@ export class Inventory extends Component { } } - filterPolicyChecks = () => - !!this.state.items && - this.state.items.filter((check) => - this.state.filters.every((filter) => - filter.field === 'search' - ? Object.keys(check).some( - (key) => - ['string', 'number'].includes(typeof check[key]) && - String(check[key]).toLowerCase().includes(filter.value.toLowerCase()) - ) - : typeof check[filter.field] === 'string' && - (filter.value === '' - ? check[filter.field] === filter.value - : check[filter.field].toLowerCase().includes(filter.value.toLowerCase())) - ) - ); - toggleDetails = (item) => { const itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap }; @@ -390,26 +362,11 @@ export class Inventory extends Component { render() { const { onClickRow } = this.props - const handlePoliciesTableClickRow = (policy_id) => { - onClickRow ? onClickRow(policy_id) : this.loadScaPolicy(policy_id) - this.setState({ lookingPolicy: true, loading: false, redirect: true }) + const handlePoliciesTableClickRow = async (policy) => { + onClickRow ? onClickRow(policy) : await this.loadScaPolicy(policy.policy_id) + this.setState({ loading: false, redirect: true }) } - const getChecksRowProps = (item, idx) => { - return { - 'data-test-subj': `sca-check-row-${idx}`, - className: 'customRowClass', - onClick: () => this.toggleDetails(item), - }; - }; - - const sorting = { - sort: { - field: 'id', - direction: 'asc', - }, - }; - const buttonPopover = ( { - + + +
@@ -620,7 +579,7 @@ export class Inventory extends Component { diff --git a/public/components/agents/sca/inventory/policies-table.tsx b/public/components/agents/sca/inventory/agent-policies-table.tsx similarity index 90% rename from public/components/agents/sca/inventory/policies-table.tsx rename to public/components/agents/sca/inventory/agent-policies-table.tsx index 61c58fff5e..cc7080d803 100644 --- a/public/components/agents/sca/inventory/policies-table.tsx +++ b/public/components/agents/sca/inventory/agent-policies-table.tsx @@ -15,7 +15,7 @@ export default function SCAPoliciesTable(props: Props) { return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', - onClick: rowProps ? () => rowProps(item.policy_id) : null + onClick: rowProps ? () => rowProps(item) : null } } diff --git a/public/components/agents/sca/inventory/checks-table.tsx b/public/components/agents/sca/inventory/checks-table.tsx index 74e01623ac..d31d614e99 100644 --- a/public/components/agents/sca/inventory/checks-table.tsx +++ b/public/components/agents/sca/inventory/checks-table.tsx @@ -231,7 +231,6 @@ export class InventoryPolicyChecksTable extends Component { 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:', diff --git a/public/components/agents/sca/inventory/index.ts b/public/components/agents/sca/inventory/index.ts index 618af637b4..0c9258dbb7 100644 --- a/public/components/agents/sca/inventory/index.ts +++ b/public/components/agents/sca/inventory/index.ts @@ -1,4 +1,4 @@ export * from './api-request' -export * from './policies-table' +export * from './agent-policies-table' export * from './lib'; export * from './checks-table'; diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index 654e6755c6..18b14195f0 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -43,7 +43,7 @@ import { getAngularModule } from '../../../../../kibana-services'; import { withReduxProvider, withUserAuthorizationPrompt } from "../../../hocs"; import { compose } from 'redux'; import { getAgentPolicies } from '../../../../../components/agents/sca/index'; -import SCAPoliciesTable from '../../../../../components/agents/sca/inventory/policies-table'; +import SCAPoliciesTable from '../../../../agents/sca/inventory/agent-policies-table'; type Props = { agent: { [key in string]: any }; @@ -129,8 +129,8 @@ export const ScaScan = compose( } } - onClickRow(policy_id) { - window.location.href = `#/overview?tab=sca&redirectPolicyTable=${policy_id}`; + onClickRow = (policy) => { + window.location.href = `#/overview?tab=sca&redirectPolicyTable=${policy.policy_id}`; store.dispatch(updateCurrentAgentData(this.props.agent)); this.router.reload(); } From d27f9f84832766d6943d133b5dd5d7c9d499f7e6 Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Wed, 19 Oct 2022 15:25:18 -0300 Subject: [PATCH 14/18] Updated CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ec60b122f5..8f769ce9b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Added the option to sort by the agents count in the group table. [#4323](https://github.com/wazuh/wazuh-kibana-app/pull/4323) - Added agent synchronization status in the agent module. [#3874](https://github.com/wazuh/wazuh-kibana-app/pull/3874) +- Added agent's dashboard redesign [#4512](https://github.com/wazuh/wazuh-kibana-app/pull/4512) ### Changed From 8bd7d74e485a455cecf4bb0ef70b85e81a3e4816 Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Thu, 20 Oct 2022 10:54:40 -0300 Subject: [PATCH 15/18] Added pagination --- public/components/agents/sca/inventory.tsx | 3 +- .../sca/inventory/agent-policies-table.tsx | 18 ++++++--- .../agents/sca/inventory/api-request.ts | 11 ------ .../components/agents/sca/inventory/index.ts | 1 - .../common/tables/table-default.tsx | 4 ++ .../common/welcome/agents-welcome.js | 2 +- .../welcome/components/sca_scan/sca_scan.tsx | 38 +++---------------- 7 files changed, 24 insertions(+), 53 deletions(-) delete mode 100644 public/components/agents/sca/inventory/api-request.ts diff --git a/public/components/agents/sca/inventory.tsx b/public/components/agents/sca/inventory.tsx index 6d040700b7..0fcebede02 100644 --- a/public/components/agents/sca/inventory.tsx +++ b/public/components/agents/sca/inventory.tsx @@ -454,8 +454,7 @@ export class Inventory extends Component { diff --git a/public/components/agents/sca/inventory/agent-policies-table.tsx b/public/components/agents/sca/inventory/agent-policies-table.tsx index cc7080d803..2ab8309e7e 100644 --- a/public/components/agents/sca/inventory/agent-policies-table.tsx +++ b/public/components/agents/sca/inventory/agent-policies-table.tsx @@ -1,17 +1,17 @@ -import { EuiBasicTable } from '@elastic/eui'; import React from 'react'; +import { TableWzAPI } from '../../../common/tables/table-wz-api'; type Props = { - policies: any[]; columns: any[]; rowProps?: any; - loading?: boolean; + agent: { [key in string]: any }; + tableProps?: any; }; export default function SCAPoliciesTable(props: Props) { - const { policies, columns, rowProps, loading = false } = props; + const { columns, rowProps, agent, tableProps } = props; - const getPoliciesRowProps = (item, idx) => { + const getPoliciesRowProps = (item: any, idx: string) => { return { 'data-test-subj': `sca-row-${idx}`, className: 'customRowClass', @@ -21,7 +21,13 @@ export default function SCAPoliciesTable(props: Props) { return ( <> - + ); } diff --git a/public/components/agents/sca/inventory/api-request.ts b/public/components/agents/sca/inventory/api-request.ts deleted file mode 100644 index 601263195e..0000000000 --- a/public/components/agents/sca/inventory/api-request.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { WzRequest } from '../../../../react-services/wz-request'; - -export async function getAgentPolicies(agentId) { - const { - data: { - data: { affected_items: policies }, - }, - } = await WzRequest.apiReq('GET', `/sca/${agentId}`, {}); - - return policies; -} diff --git a/public/components/agents/sca/inventory/index.ts b/public/components/agents/sca/inventory/index.ts index 0c9258dbb7..df8e32d03f 100644 --- a/public/components/agents/sca/inventory/index.ts +++ b/public/components/agents/sca/inventory/index.ts @@ -1,4 +1,3 @@ -export * from './api-request' export * from './agent-policies-table' export * from './lib'; export * from './checks-table'; diff --git a/public/components/common/tables/table-default.tsx b/public/components/common/tables/table-default.tsx index c8cf794592..97e3d50974 100644 --- a/public/components/common/tables/table-default.tsx +++ b/public/components/common/tables/table-default.tsx @@ -20,6 +20,7 @@ export function TableDefault({ onSearch, tableColumns, tablePageSizeOptions = [15, 25, 50, 100], + hidePerPageOptions = false, tableInitialSortingDirection = 'asc', tableInitialSortingField = '', tableProps = {}, @@ -107,8 +108,10 @@ export function TableDefault({ ...pagination, totalItemCount: totalItems, pageSizeOptions: tablePageSizeOptions, + hidePerPageOptions }; return ( + <> + ); } diff --git a/public/components/common/welcome/agents-welcome.js b/public/components/common/welcome/agents-welcome.js index 104c58b686..36b3f4fe25 100644 --- a/public/components/common/welcome/agents-welcome.js +++ b/public/components/common/welcome/agents-welcome.js @@ -493,7 +493,7 @@ class AgentsWelcome extends Component { -
+
{ - try { - const policies = await getAgentPolicies(agentId); - this.setState({ policies, isLoading: false }); - }catch(error){ - const options: UIErrorLog = { - context: `${ScaScan.name}.initialize`, - level: UI_LOGGER_LEVELS.ERROR as UILogLevel, - severity: UI_ERROR_SEVERITIES.BUSINESS as UIErrorSeverity, - error: { - error: error, - message: error.message || error, - title: error.name, - }, - }; - getErrorOrchestrator().handleError(options); - } - } - - - renderScanDetails() { const { isLoading, lastScan } = this.state; if (isLoading || lastScan === undefined) return; @@ -198,6 +167,10 @@ export const ScaScan = compose( }, ]; + const tableProps = { + tablePageSizeOptions: [4], + hidePerPageOptions: true + } return ( @@ -221,9 +194,10 @@ export const ScaScan = compose( From 59b6c63013e63d418e2592bc274c26cbe557eef9 Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Thu, 20 Oct 2022 11:14:02 -0300 Subject: [PATCH 16/18] Updated snapshots to fix unit tests --- .../sca/__snapshots__/inventory.test.tsx.snap | 79 ------------------ .../components/agents/sca/inventory.test.tsx | 81 ------------------- .../__snapshots__/table-default.test.tsx.snap | 1 + .../__snapshots__/table-wz-api.test.tsx.snap | 1 + 4 files changed, 2 insertions(+), 160 deletions(-) delete mode 100644 public/components/agents/sca/__snapshots__/inventory.test.tsx.snap delete mode 100644 public/components/agents/sca/inventory.test.tsx diff --git a/public/components/agents/sca/__snapshots__/inventory.test.tsx.snap b/public/components/agents/sca/__snapshots__/inventory.test.tsx.snap deleted file mode 100644 index bcebc8aba3..0000000000 --- a/public/components/agents/sca/__snapshots__/inventory.test.tsx.snap +++ /dev/null @@ -1,79 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SCA Inventory Test should render correctly 1`] = ` - -
-
-
-
-
-
-
- -`; - -exports[`SCA Inventory Test should render correctly 2`] = ` - -
-
-
-
- - - No scans available - -
-
- -
-
-
- -`; - -exports[`SCA Inventory Test should render correctly 3`] = ``; diff --git a/public/components/agents/sca/inventory.test.tsx b/public/components/agents/sca/inventory.test.tsx deleted file mode 100644 index ebc41484a3..0000000000 --- a/public/components/agents/sca/inventory.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { fireEvent, render, waitFor } from '@testing-library/react'; -import '@testing-library/jest-dom'; -// import {jest} from '@jest/globals' -import React from 'react'; -import { Inventory } from './inventory' -import * as _ from 'lodash' -import { createGetterSetter } from '../../../utils/create-getter-setter'; -import { ErrorOrchestratorService } from '../../../react-services/error-orchestrator/error-orchestrator.service'; -import configureMockStore from 'redux-mock-store'; -import { Provider } from 'react-redux'; -import { WzRequest } from '../../../react-services/wz-request'; - - - -const mockedGetErrorOrchestrator = { - handleError: jest.fn(), - }; - - jest.mock('../../../react-services/common-services', () => { - return { - getErrorOrchestrator: () => mockedGetErrorOrchestrator, - }; - }); - - jest.mock('../../../react-services/wz-request') - -describe('SCA Inventory Test', () => { - // mocked getErrorOrchestrator - // const mockGet = jest.fn(); - // const mockSet = jest.fn(); - // jest.mock('../../../react-services/error-orchestrator/error-orchestrator.service'); - // jest.mock('../../../utils/create-getter-setter'); - it('should render correctly', () => { - const mockStore = configureMockStore(); - const store = mockStore({policy_id:'cis_bu'}); - const apiReqMock = jest.fn().mockReturnValue({ - data: { - data: { affected_items: ['hola'] }, - }, - }) - WzRequest.apiReq = apiReqMock - const onClickRow = jest.fn() - const props= { - agent: { - agentPlatform:"linux", - configSum:"ab73af41699f13fdd81903b5f23d8d00", - dateAdd: "2022-09-01T15:40:06+00:00", - group: ['default'], - group_config_status: "synced", - id: "001", - ip: "172.18.0.5", - lastKeepAlive: "2022-09-21T23:47:35+00:00", - manager: "wazuh_manager_filebeat_sources_cmake-4.4-7.10.2", - mergedSum: "4a8724b20dee0124ff9656783c490c4e", - name: "wazuh_agent_ubuntu_sources_cmake-4.4", - node_name: "manager-node", - os: {arch: 'x86_64', codename: 'Bionic Beaver', major: '18', minor: '04', name: 'Ubuntu'}, - registerIP: "any", - status: "active", - version: "Wazuh v4.4.0", - }, - onClickRow, - withoutDashboard: true - } - // try { - - const { asFragment, debug } = render(); - debug() - - // await waitFor(() => expect(asFragment()).toMatchSnapshot()); - expect(apiReqMock).toHaveBeenCalledTimes(1) - // await waitFor(() => expect(createGetterSetter).toHaveBeenCalledTimes(1)) - // await waitFor(() => expect(ErrorOrchestratorService).toHaveBeenCalledTimes(1)) - // } catch(error) { - // console.log(error) - // } - // expect(asFragment()).toMatchSnapshot(); - // const { debug } = render(); - -}) -}); diff --git a/public/components/common/tables/__snapshots__/table-default.test.tsx.snap b/public/components/common/tables/__snapshots__/table-default.test.tsx.snap index e023d4b871..3133597b81 100644 --- a/public/components/common/tables/__snapshots__/table-default.test.tsx.snap +++ b/public/components/common/tables/__snapshots__/table-default.test.tsx.snap @@ -75,6 +75,7 @@ exports[`Table Default component renders correctly to match the snapshot 1`] = ` onChange={[Function]} pagination={ Object { + "hidePerPageOptions": false, "pageIndex": 0, "pageSize": 15, "pageSizeOptions": Array [ diff --git a/public/components/common/tables/__snapshots__/table-wz-api.test.tsx.snap b/public/components/common/tables/__snapshots__/table-wz-api.test.tsx.snap index 77a7e65b17..086cba0b6a 100644 --- a/public/components/common/tables/__snapshots__/table-wz-api.test.tsx.snap +++ b/public/components/common/tables/__snapshots__/table-wz-api.test.tsx.snap @@ -153,6 +153,7 @@ exports[`Table WZ API component renders correctly to match the snapshot 1`] = ` onChange={[Function]} pagination={ Object { + "hidePerPageOptions": false, "pageIndex": 0, "pageSize": 15, "pageSizeOptions": Array [ From 5b712e9c3f8750380a6d0ff0b83f1764e5d0ca5f Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Thu, 20 Oct 2022 11:49:43 -0300 Subject: [PATCH 17/18] Updated CHANGELOG --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c5085bde0..57ec2a3325 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Added the option to sort by the agents count in the group table. [#4323](https://github.com/wazuh/wazuh-kibana-app/pull/4323) - Added agent synchronization status in the agent module. [#3874](https://github.com/wazuh/wazuh-kibana-app/pull/3874) -- Added agent's dashboard redesign [#4512](https://github.com/wazuh/wazuh-kibana-app/pull/4512) +- Redesign the SCA table from agent's dashboard [#4512](https://github.com/wazuh/wazuh-kibana-app/pull/4512) ### Changed From 49f714ff1c63b31c749745e5b2056e80e07b84dd Mon Sep 17 00:00:00 2001 From: Maximiliano Ibarra Date: Thu, 20 Oct 2022 12:04:41 -0300 Subject: [PATCH 18/18] Fixed lastest scan navigation --- .../components/common/welcome/components/sca_scan/sca_scan.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/components/common/welcome/components/sca_scan/sca_scan.tsx b/public/components/common/welcome/components/sca_scan/sca_scan.tsx index e1f5815547..756ea53841 100644 --- a/public/components/common/welcome/components/sca_scan/sca_scan.tsx +++ b/public/components/common/welcome/components/sca_scan/sca_scan.tsx @@ -178,7 +178,7 @@ export const ScaScan = compose( { - window.location.href = `#/overview?tab=sca&redirectPolicy=${lastScan.policy_id}`; + window.location.href = `#/overview?tab=sca&redirectPolicyTable=${lastScan.policy_id}`; store.dispatch(updateCurrentAgentData(this.props.agent)); this.router.reload(); }