Update dashboards (#6035)

* Create the security event dashboard (#5892) * Create the security event dashboard * update changelog * Create the malware detection dashboard (#5899) * Create the security event dashboard * Changelog * Create log data analysis dashboard (#5910) * create log data analysis * Update changelog * Update changelog * Update integrity monitoring dashboard (#5929) * update integrity monitoring dashboard * update changelog * Create incident response dashboard (#5934) * create incident response dashboard * Update changelog * Update changelog * Update changelog * Update cloud security dashboard (#5943) * Update cloud security dashboard * Update cloud security dashboard * Update regulatory compliance dashboard (#5942) * update regulatory-compliance * Update changelog * Update containers security dashboard (#5944) * Update containers security dashboard * Update containers security dashboard * Update dashboard security events * Implement the security event dashboard * Implement the fim, pci dashboards * Implement the aws dashboards * Implement the docker dashboard * policy monitoring update * Update security configuration assessment dashboard (#5999) * add a new tab called dashboard in the sca module * New tab called dashboard, logic and error message when you have not selected an agent and when an agent was never logged in. * New inventory view in sca * Case of redirection to sca from agents welcome page * new sca tab with all the casuisticas, mobile styles, redirection from agents, adaptation in wz-visualize for section of sca * delete comment * clean code * fix error this.state.lookingPolicy.name * fix bug in sca dashboard * fix unpinned agent * fix sca dashboard * fix sca dashboard * update changelog and code clean * Refactoring of the security configuration assessment (#6061) * add a new tab called dashboard in the sca module * New tab called dashboard, logic and error message when you have not selected an agent and when an agent was never logged in. * New inventory view in sca * Case of redirection to sca from agents welcome page * new sca tab with all the casuisticas, mobile styles, redirection from agents, adaptation in wz-visualize for section of sca * delete comment * clean code * fix error this.state.lookingPolicy.name * fix bug in sca dashboard * fix unpinned agent * fix sca dashboard * fix sca dashboard * refactor sca section * changelog * clean code * update href * update changelog * Change the display order of tabs in all modules (#6067) * Change the display order of tabs in all modules * Change the display order of tabs in all modules * update changelog * change security events * Remove new dashboards of integrity monitoring security events and amazon aws (#6073) * Remove new dashboards of integrity monitoring, security events and Amazon AWS * clean code * Add graph to docker dashboard (#6075) * Add graph to docker dashboard * clean code * Update top 5 policy monitoring * Update top 5 pci dss * Remove new dashboard of PCI DSS (#6080) --------- Co-authored-by: Federico Rodriguez <[email protected]>
wazuh · Nov 3, 2023 · 62988b0 · 62988b0
1 parent 8651d16
commit 62988b0
Show file tree

Hide file tree

Showing 21 changed files with 2,875 additions and 1,646 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -26,6 +26,11 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Removed the `disabled_roles` and `customization.logo.sidebar` settings [#5840](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5840)
 - Removed the ability to configure the visibility of modules and removed `extensions.*` settings [#5840](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5840)
 
+### Changed
+
+- Changed dashboards. [#6035](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6035)
+- Change the display order of tabs in all modules. [#6067](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6067)
+
 ## Wazuh v4.7.1 - OpenSearch Dashboards 2.8.0 - Revision 00
 
 ### Added

diff --git a/plugins/main/public/components/agents/sca/dashboard/dashboard.scss b/plugins/main/public/components/agents/sca/dashboard/dashboard.scss
@@ -0,0 +1,27 @@
+@media (max-width: 767px) {
+  .sca-module-wrapper-donut {
+    width: 100%;
+    margin-right: 0;
+  }
+  .sca-module-card-visualization {
+    margin-right: 0;
+  }
+
+  .sca-module-panel-policies-table {
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .sca-module-wrapper-donut {
+    width: 50%;
+  }
+  .sca-module-card-visualization {
+    margin-right: 16px;
+  }
+
+  .sca-module-panel-policies-table {
+    margin-right: 16px;
+    padding-bottom: 16px;
+  }
+}
diff --git a/plugins/main/public/components/agents/sca/dashboard/dashboard.tsx b/plugins/main/public/components/agents/sca/dashboard/dashboard.tsx
@@ -0,0 +1,339 @@
+import React, { useState, useEffect } from 'react';
+import {
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiPage,
+  EuiSpacer,
+  EuiText,
+  EuiProgress,
+  EuiTitle,
+  EuiButton,
+  EuiStat,
+  EuiButtonEmpty,
+  EuiToolTip,
+  EuiCallOut,
+  EuiPopover,
+  EuiCard,
+} from '@elastic/eui';
+import { WzRequest } from '../../../../react-services/wz-request';
+import { formatUIDate } from '../../../../react-services/time-service';
+import { UI_ERROR_SEVERITIES } from '../../../../react-services/error-orchestrator/types';
+import {
+  API_NAME_AGENT_STATUS,
+  MODULE_SCA_CHECK_RESULT_LABEL,
+  UI_LOGGER_LEVELS,
+} from '../../../../../common/constants';
+import { getErrorOrchestrator } from '../../../../react-services/common-services';
+import { VisualizationBasic } from '../../../common/charts/visualizations/basic';
+import SCAPoliciesTable from '../inventory/agent-policies-table';
+import { InventoryPolicyChecksTable } from '../inventory/checks-table';
+import { connect } from 'react-redux';
+import './dashboard.scss';
+
+const Dashboard = ({ currentAgentData }) => {
+  const [showMoreInfo, setShowMoreInfo] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [checksIsLoading, setChecksIsLoading] = useState(false);
+  const [filters, setFilters] = useState({});
+  const [lookingPolicy, setLookingPolicy] = useState(null);
+
+  const columnsPolicies = [
+    {
+      field: 'name',
+      name: 'Policy',
+      sortable: true,
+    },
+  ];
+  const updateGraphs = policy => {
+    setLookingPolicy(policy);
+  };
+  const buttonStat = (text, field, value) => {
+    const handleButtonClick = () => {
+      setFilters({ q: `${field}=${value}` });
+    };
+
+    return <button onClick={handleButtonClick}>{text}</button>;
+  };
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      if (!!currentAgentData?.id) {
+        const {
+          data: {
+            data: { affected_items: fetchedPolicies },
+          },
+        } = await WzRequest.apiReq('GET', `/sca/${currentAgentData.id}`, {});
+
+        fetchedPolicies.sort((a, b) => a.policy_id.localeCompare(b.policy_id));
+        if (fetchedPolicies.length > 0) {
+          await loadScaPolicy(fetchedPolicies[0].policy_id, false);
+        }
+      }
+    } catch (error) {
+      handleApiError(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    let storedPolicies = JSON.parse(localStorage.getItem('scaPolicies')) || [];
+    let lastStoredPolicy = storedPolicies[storedPolicies.length - 1];
+    setLookingPolicy(lastStoredPolicy);
+
+    if (lastStoredPolicy === undefined) {
+      fetchData();
+    }
+
+    return () => {
+      localStorage.clear();
+    };
+  }, [currentAgentData]);
+
+  const handleApiError = error => {
+    setLoading(false);
+    setLookingPolicy(null);
+    const options = {
+      level: UI_LOGGER_LEVELS.ERROR,
+      severity: UI_ERROR_SEVERITIES.BUSINESS,
+      error: {
+        error: error,
+        message: error.message || error,
+        title: error.name,
+      },
+    };
+    getErrorOrchestrator().handleError(options);
+  };
+
+  const loadScaPolicy = async policyId => {
+    try {
+      setLookingPolicy(null);
+      setChecksIsLoading(true);
+      const policyResponse = await WzRequest.apiReq(
+        'GET',
+        `/sca/${currentAgentData.id}`,
+        {
+          params: {
+            q: 'policy_id=' + policyId,
+          },
+        },
+      );
+      const [policyData] = policyResponse.data.data.affected_items;
+      setLookingPolicy(policyData);
+      setChecksIsLoading(false);
+    } catch (error) {
+      setLookingPolicy(policyId);
+      setChecksIsLoading(false);
+      handleApiError(error);
+    }
+  };
+
+  const buttonPopover = (
+    <EuiButtonEmpty
+      iconType='iInCircle'
+      aria-label='Help'
+      onClick={() => setShowMoreInfo(!showMoreInfo)}
+    />
+  );
+
+  if (currentAgentData.id === undefined) {
+    return <div>Loading...</div>;
+  }
+
+  const { status, os } = currentAgentData || {};
+
+  return (
+    <div>
+      {(loading || checksIsLoading) && (
+        <div style={{ margin: 16 }}>
+          <EuiSpacer size='m' />
+          <EuiProgress size='xs' color='primary' />
+        </div>
+      )}
+      <EuiPage>
+        {status !== API_NAME_AGENT_STATUS.NEVER_CONNECTED &&
+          !lookingPolicy &&
+          !loading && (
+            <EuiCallOut title='No scans available' iconType='iInCircle'>
+              <EuiButton color='primary' onClick={fetchData}>
+                Refresh'
+              </EuiButton>
+            </EuiCallOut>
+          )}
+        {lookingPolicy && (
+          <div className='sca-module-wrapper-donut'>
+            {
+              <EuiFlexGroup
+                style={{
+                  marginTop: 0,
+                  flexDirection: 'column',
+                  height: '100%',
+                }}
+              >
+                <EuiFlexItem grow={false} className='hi'>
+                  <EuiCard
+                    title
+                    description
+                    betaBadgeLabel={lookingPolicy.name}
+                    className='sca-module-card-visualization'
+                  >
+                    <VisualizationBasic
+                      type='donut'
+                      size={{ width: '100%', height: '150px' }}
+                      data={
+                        lookingPolicy
+                          ? [
+                              {
+                                label: MODULE_SCA_CHECK_RESULT_LABEL.passed,
+                                value: lookingPolicy.pass,
+                                color: '#00a69b',
+                              },
+                              {
+                                label: MODULE_SCA_CHECK_RESULT_LABEL.failed,
+                                value: lookingPolicy.fail,
+                                color: '#ff645c',
+                              },
+                              {
+                                label:
+                                  MODULE_SCA_CHECK_RESULT_LABEL[
+                                    'not applicable'
+                                  ],
+                                value: lookingPolicy.invalid,
+                                color: '#5c6773',
+                              },
+                            ]
+                          : []
+                      }
+                      showLegend
+                      noDataTitle='No results'
+                      noDataMessage='No results were found.'
+                    />
+                    <EuiSpacer size='m' />
+                  </EuiCard>
+                </EuiFlexItem>
+
+                <EuiFlexItem style={{ marginBottom: 0 }}>
+                  <EuiPanel className='sca-module-panel-policies-table'>
+                    <SCAPoliciesTable
+                      agent={currentAgentData}
+                      columns={columnsPolicies}
+                      rowProps={updateGraphs}
+                    />
+                  </EuiPanel>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            }
+          </div>
+        )}
+        {os && lookingPolicy && (!loading || !checksIsLoading) && (
+          <div style={{ marginTop: '12px' }}>
+            <EuiPanel paddingSize='l'>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiTitle size='s'>
+                    <h2>
+                      {lookingPolicy.name}&nbsp;
+                      <EuiToolTip
+                        position='right'
+                        content='Show policy checksum'
+                      >
+                        <EuiPopover
+                          button={buttonPopover}
+                          isOpen={showMoreInfo}
+                          closePopover={() => setShowMoreInfo(false)}
+                        >
+                          <EuiFlexItem style={{ width: 700 }}>
+                            <EuiSpacer size='s' />
+                            <EuiText>
+                              <b>Policy description:</b>{' '}
+                              {lookingPolicy.description}
+                              <br></br>
+                              <b>Policy checksum:</b> {lookingPolicy.hash_file}
+                            </EuiText>
+                          </EuiFlexItem>
+                        </EuiPopover>
+                      </EuiToolTip>
+                    </h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size='m' />
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiStat
+                    title={buttonStat(lookingPolicy.pass, 'result', 'passed')}
+                    description={MODULE_SCA_CHECK_RESULT_LABEL.passed}
+                    titleColor='secondary'
+                    titleSize='m'
+                    textAlign='center'
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiStat
+                    title={buttonStat(lookingPolicy.fail, 'result', 'failed')}
+                    description={MODULE_SCA_CHECK_RESULT_LABEL.failed}
+                    titleColor='danger'
+                    titleSize='m'
+                    textAlign='center'
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiStat
+                    title={buttonStat(
+                      lookingPolicy.invalid,
+                      'result',
+                      'not applicable',
+                    )}
+                    description={
+                      MODULE_SCA_CHECK_RESULT_LABEL['not applicable']
+                    }
+                    titleColor='subdued'
+                    titleSize='m'
+                    textAlign='center'
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiStat
+                    title={`${lookingPolicy.score}%`}
+                    description='Score'
+                    titleColor='accent'
+                    titleSize='m'
+                    textAlign='center'
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiStat
+                    title={formatUIDate(lookingPolicy.end_scan)}
+                    description='End scan'
+                    titleColor='primary'
+                    titleSize='s'
+                    textAlign='center'
+                    style={{ padding: 5 }}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+              <EuiSpacer size='m' />
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <InventoryPolicyChecksTable
+                    agent={currentAgentData}
+                    filters={filters}
+                    lookingPolicy={lookingPolicy}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>
+          </div>
+        )}
+      </EuiPage>
+    </div>
+  );
+};
+
+const mapStateToProps = state => ({
+  currentAgentData: state.appStateReducers.currentAgentData,
+});
+
+export default connect(mapStateToProps)(Dashboard);