Redesign the SCA table from agent's dashboard

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:/wazuh/wazuh-kibana-app/pull/4323)
 - Added agent synchronization status in the agent module. [#3874](https:/wazuh/wazuh-kibana-app/pull/3874)
+- Redesign the SCA table from agent's dashboard [#4512](https:/wazuh/wazuh-kibana-app/pull/4512)
 
 ### Changed
 

public/components/agents/sca/index.ts

@@ -1,2 +1,3 @@
 export { MainSca } from './main';
-export { Inventory } from './inventory';
+export { Inventory } from './inventory';
+export * from './inventory/index'

public/components/agents/sca/inventory.tsx

@@ -16,7 +16,6 @@ import {
  EuiFlexGroup,
  EuiPanel,
  EuiPage,
- EuiBasicTable,
  EuiSpacer,
  EuiText,
  EuiProgress,
@@ -44,38 +43,49 @@ 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 { AppNavigate } from '../../../react-services/app-navigate';
+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<InventoryProps, InventoryState> {
  _isMount = false;
+ agent: { [key: string]: any } = {};
  columnsPolicies: object[];
  lookingPolicy: { [key: string]: any } | false = false;
  constructor(props) {
  super(props);
- const { agent } = this.props;
  this.state = {
- agent,
  itemIdToExpandedRowMap: {},
  showMoreInfo: false,
  loading: false,
  filters: [],
  pageTableChecks: { pageIndex: 0 },
  policies: [],
+ checks: [],
+ redirect: false,
+ secondTable: false,
+ secondTableBack: false,
+ checksIsLoading: false,
  lookingPolicy: false,
  loadingPolicy: false,
  };
@@ -174,6 +184,13 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  pageTableChecks: { pageIndex: 0, pageSize: this.state.pageTableChecks.pageSize },
  });
  }
+
+ const regex = new RegExp('redirectPolicyTable=' + '[^&]*');
+ 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, checksIsLoading: true})
+ }
  }
 
  componentWillUnmount() {
@@ -207,28 +224,31 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  }
  }
 
- /**
- *
- * @param policy
- */
- async loadScaPolicy(policy) {
+ handleBack (ev) {
+ AppNavigate.navigateToModule(ev, 'agents', { tab: 'welcome', agent: this.props.agent.id });
+ ev.stopPropagation();
+ };
+
+ async loadScaPolicy(policy, secondTable?) {
  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;
- this._isMount && this.setState({ lookingPolicy: policyData, loadingPolicy: false });
+ this._isMount &&
+ this.setState({ lookingPolicy: policyData, loadingPolicy: false, checksIsLoading: false });
  } catch (error) {
- this.setState({ lookingPolicy: policy, loadingPolicy: false });
+ this.setState({ lookingPolicy: policy, loadingPolicy: false, checksIsLoading: false });
  const options: UIErrorLog = {
  context: `${Inventory.name}.loadScaPolicy`,
  level: UI_LOGGER_LEVELS.ERROR as UILogLevel,
@@ -242,16 +262,61 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  getErrorOrchestrator().handleError(options);
  }
  } else {
- this._isMount && this.setState({ lookingPolicy: policy, loadingPolicy: false, items: [] });
+ this._isMount && this.setState({ lookingPolicy: policy, loadingPolicy: false, items: [], checksIsLoading: false });
  }
  }
 
- /**
- *
- * @param color
- * @param title
- * @param time
- */
+ toggleDetails = (item) => {
+ const itemIdToExpandedRowMap = { ...this.state.itemIdToExpandedRowMap };
+
+ 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 listItems = [
+ {
+ title: 'Check not applicable due to:',
+ description: item.reason,
+ },
+ {
+ title: 'Rationale',
+ description: item.rationale || '-',
+ },
+ {
+ title: 'Remediation',
+ description: item.remediation || '-',
+ },
+ {
+ title: 'Description',
+ description: item.description || '-',
+ },
+ {
+ title: (item.directory || '').includes(',') ? 'Paths' : 'Path',
+ description: item.directory,
+ },
+ {
+ title: checks,
+ description: <RuleText rules={item.rules.length ? item.rules : []} />,
+ },
+ {
+ title: 'Compliance',
+ description: <ComplianceText complianceText={complianceText} />,
+ },
+ ];
+ const itemsToShow = listItems.filter((x) => {
+ return x.description;
+ });
+ itemIdToExpandedRowMap[item.id] = <EuiDescriptionList listItems={itemsToShow} />;
+ }
+ this.setState({ itemIdToExpandedRowMap });
+ };
+
  showToast = (color, title, time) => {
  getToasts().add({
  color: color,
@@ -295,33 +360,35 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  }
 
  render() {
- const getPoliciesRowProps = (item, idx) => {
- return {
-  'data-test-subj': `sca-row-${idx}`,
-  className: 'customRowClass',
-  onClick: () => this.loadScaPolicy(item),
-  };
- };
+ const { onClickRow } = this.props
+
+ const handlePoliciesTableClickRow = async (policy) => {
+ onClickRow ? onClickRow(policy) : await this.loadScaPolicy(policy.policy_id)
+ this.setState({ loading: false, redirect: true })
+ }
+
  const buttonPopover = (
  <EuiButtonEmpty
  iconType="iInCircle"
  aria-label="Help"
  onClick={() => this.setState({ showMoreInfo: !this.state.showMoreInfo })}
  ></EuiButtonEmpty>
  );
+ const { agent } = this.props;
+
  return (
  <Fragment>
  <div>
- {this.state.loading && (
+ {this.state.loading || this.state.checksIsLoading && (
  <div style={{ margin: 16 }}>
  <EuiSpacer size="m" />
  <EuiProgress size="xs" color="primary" />
  </div>
  )}
  </div>
  <EuiPage>
- {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 && (
  <EuiCallOut title="No scans available" iconType="iInCircle">
@@ -331,8 +398,8 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  </EuiCallOut>
  )}
 
- {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 && (
  <EuiCallOut
  title="Agent has never connected"
@@ -344,11 +411,11 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  </EuiButton>
  </EuiCallOut>
  )}
- {this.props.agent &&
- (this.props.agent || {}).os &&
+ {agent &&
+ (agent || {}).os &&
  !this.state.lookingPolicy &&
  this.state.policies.length > 0 &&
- !this.state.loading && (
+ !this.state.loading && !this.state.checksIsLoading && (
  <div>
  {this.state.policies.length && (
  <EuiFlexGroup style={{ marginTop: 0 }}>
@@ -382,32 +449,32 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  ))}
  </EuiFlexGroup>
  )}
- <EuiSpacer size="m" />
- <EuiPanel paddingSize="l">
- <EuiFlexGroup>
- <EuiFlexItem>
- <EuiBasicTable
- items={this.state.policies}
+  <EuiSpacer size="m" />
+ <EuiFlexGroup>
+ <EuiFlexItem>
+ <EuiPanel>
+ <SCAPoliciesTable
+ agent={this.props.agent}
  columns={this.columnsPolicies}
- rowProps={getPoliciesRowProps}
+ rowProps={handlePoliciesTableClickRow}
  />
- </EuiFlexItem>
- </EuiFlexGroup>
- </EuiPanel>
+ </EuiPanel>
+ </EuiFlexItem>
+ </EuiFlexGroup>
  </div>
  )}
- {this.props.agent &&
- (this.props.agent || {}).os &&
+ {agent &&
+ (agent || {}).os &&
  this.state.lookingPolicy &&
- !this.state.loading && (
+ ((!this.state.loading) || (!this.state.checksIsLoading )) && (
  <div>
  <EuiPanel paddingSize="l">
  <EuiFlexGroup>
  <EuiFlexItem grow={false}>
  <EuiButtonIcon
  color="primary"
  style={{ padding: '6px 0px' }}
- onClick={() => this.loadScaPolicy(false)}
+ onClick={this.state.secondTableBack ? (ev) => this.handleBack(ev) : () => this.loadScaPolicy(false)}
  iconType="arrowLeft"
  aria-label="Back to policies"
  {...{ iconSize: 'l' }}
@@ -436,6 +503,22 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  </h2>
  </EuiTitle>
  </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ iconType="importAction"
+ onClick={async () => await this.downloadCsv()}
+ >
+ Export formatted
+ </EuiButtonEmpty>
+ </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ iconType="refresh"
+ onClick={() => this.loadScaPolicy(this.state.lookingPolicy.policy_id)}
+ >
+ Refresh
+ </EuiButtonEmpty>
+ </EuiFlexItem>
  </EuiFlexGroup>
  <EuiSpacer size="m" />
  <EuiFlexGroup>
@@ -495,7 +578,7 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  <EuiFlexItem>
  <InventoryPolicyChecksTable
  agent={this.props.agent}
- lookingPolicy={this.state.lookingPolicy}
+ lookingPolicy={this.state.lookingPolicy} 
  />
  </EuiFlexItem>
  </EuiFlexGroup>
@@ -507,3 +590,7 @@ export class Inventory extends Component<InventoryProps, InventoryState> {
  );
  }
 }
+
+Inventory.defaultProps = {
+ onClickRow: undefined
+} 

public/components/agents/sca/inventory/agent-policies-table.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { TableWzAPI } from '../../../common/tables/table-wz-api';
+
+type Props = {
+ columns: any[];
+ rowProps?: any;
+ agent: { [key in string]: any };
+ tableProps?: any;
+};
+
+export default function SCAPoliciesTable(props: Props) {
+ const { columns, rowProps, agent, tableProps } = props;
+
+ const getPoliciesRowProps = (item: any, idx: string) => {
+ return {
+ 'data-test-subj': `sca-row-${idx}`,
+ className: 'customRowClass',
+ onClick: rowProps ? () => rowProps(item) : null
+ }
+ }
+
+ return (
+ <>
+ <TableWzAPI 
+ tableInitialSortingField="policy_id"
+ endpoint={`/sca/${agent.id}`} 
+ tableColumns={columns} 
+ rowProps={getPoliciesRowProps}
+ { ...tableProps}
+ />
+ </>
+ );
+}