From 628f6549d19c5f5779413fff03b7227401631cf4 Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Mon, 30 Sep 2024 09:00:48 -0300 Subject: [PATCH 01/10] Add padding to welcome page and stats component --- plugins/main/public/components/common/welcome/welcome.scss | 4 ++++ plugins/main/public/controllers/overview/components/stats.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/plugins/main/public/components/common/welcome/welcome.scss b/plugins/main/public/components/common/welcome/welcome.scss index 0ce9e18dda..e2756c0b80 100644 --- a/plugins/main/public/components/common/welcome/welcome.scss +++ b/plugins/main/public/components/common/welcome/welcome.scss @@ -48,3 +48,7 @@ span.statWithLink:hover { display: flex; flex-grow: 1; } + +.wz-welcome-page { + padding-bottom: 24px; +} \ No newline at end of file diff --git a/plugins/main/public/controllers/overview/components/stats.js b/plugins/main/public/controllers/overview/components/stats.js index 782e7c9638..685a68aee1 100644 --- a/plugins/main/public/controllers/overview/components/stats.js +++ b/plugins/main/public/controllers/overview/components/stats.js @@ -82,7 +82,7 @@ export const Stats = withErrorBoundary( ({ status }) => this.props[status], ); return ( - + From 43f52c435dbdea986be8b72389e0b8cd13af2b71 Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Mon, 30 Sep 2024 09:01:56 -0300 Subject: [PATCH 02/10] Update stats page styling with welcome stats class --- plugins/main/public/controllers/overview/components/stats.js | 2 +- .../main/public/controllers/overview/components/stats.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/plugins/main/public/controllers/overview/components/stats.js b/plugins/main/public/controllers/overview/components/stats.js index 685a68aee1..35b8bc09f3 100644 --- a/plugins/main/public/controllers/overview/components/stats.js +++ b/plugins/main/public/controllers/overview/components/stats.js @@ -82,7 +82,7 @@ export const Stats = withErrorBoundary( ({ status }) => this.props[status], ); return ( - + diff --git a/plugins/main/public/controllers/overview/components/stats.scss b/plugins/main/public/controllers/overview/components/stats.scss index 8e8bfcf937..6bec32a9fa 100644 --- a/plugins/main/public/controllers/overview/components/stats.scss +++ b/plugins/main/public/controllers/overview/components/stats.scss @@ -1,3 +1,8 @@ .vulnerabilites-summary-card { padding-top: 2vh; } + +.wz-welcome-stats { + padding-top: 24px; + padding-bottom: 8px; +} \ No newline at end of file From ba28cc12fd6005a6053f79231f70a7907cb7df28 Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Mon, 30 Sep 2024 09:02:24 -0300 Subject: [PATCH 03/10] Update imports and component structure in stats.js --- .../controllers/overview/components/stats.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/plugins/main/public/controllers/overview/components/stats.js b/plugins/main/public/controllers/overview/components/stats.js index 35b8bc09f3..ab06446131 100644 --- a/plugins/main/public/controllers/overview/components/stats.js +++ b/plugins/main/public/controllers/overview/components/stats.js @@ -10,25 +10,25 @@ * * Find more information about this on the LICENSE file. */ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { EuiCard, - EuiFlexItem, EuiFlexGroup, + EuiFlexItem, EuiPage, EuiToolTip, } from '@elastic/eui'; -import { withErrorBoundary } from '../../../components/common/hocs'; +import PropTypes from 'prop-types'; +import { Component } from 'react'; import { API_NAME_AGENT_STATUS } from '../../../../common/constants'; import { - agentStatusLabelByAgentStatus, agentStatusColorByAgentStatus, + agentStatusLabelByAgentStatus, } from '../../../../common/services/wz_agent_status'; -import { endpointSummary } from '../../../utils/applications'; -import { LastAlertsStat } from './last-alerts-stat'; import { VisualizationBasic } from '../../../components/common/charts/visualizations/basic'; +import { withErrorBoundary } from '../../../components/common/hocs'; import NavigationService from '../../../react-services/navigation-service'; +import { endpointSummary } from '../../../utils/applications'; +import { LastAlertsStat } from './last-alerts-stat'; import './stats.scss'; export const Stats = withErrorBoundary( class Stats extends Component { From f817ef931f2ae20edc4b159cb38bc8a336c9a4cc Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Mon, 30 Sep 2024 09:37:21 -0300 Subject: [PATCH 04/10] Adjust padding in welcome and stats components --- plugins/main/public/components/common/welcome/welcome.scss | 2 +- plugins/main/public/controllers/overview/components/stats.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/main/public/components/common/welcome/welcome.scss b/plugins/main/public/components/common/welcome/welcome.scss index e2756c0b80..5754123f55 100644 --- a/plugins/main/public/components/common/welcome/welcome.scss +++ b/plugins/main/public/components/common/welcome/welcome.scss @@ -51,4 +51,4 @@ span.statWithLink:hover { .wz-welcome-page { padding-bottom: 24px; -} \ No newline at end of file +} diff --git a/plugins/main/public/controllers/overview/components/stats.scss b/plugins/main/public/controllers/overview/components/stats.scss index 6bec32a9fa..6d18137c71 100644 --- a/plugins/main/public/controllers/overview/components/stats.scss +++ b/plugins/main/public/controllers/overview/components/stats.scss @@ -5,4 +5,4 @@ .wz-welcome-stats { padding-top: 24px; padding-bottom: 8px; -} \ No newline at end of file +} From 4626373e6563cd82ec1b063907a3e22e468c7f76 Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Mon, 30 Sep 2024 10:25:23 -0300 Subject: [PATCH 05/10] Update stats component imports and class definition --- .../components/__snapshots__/stats.test.tsx.snap | 2 +- .../controllers/overview/components/stats.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap index 4b0953aba0..4fe01ec984 100644 --- a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap +++ b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
Date: Mon, 30 Sep 2024 10:31:39 -0300 Subject: [PATCH 06/10] Update feature container margins for consistent design --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c144e2ddeb..29ba34f4c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Changed Malware detection dashboard visualizations [#6964](https://github.com/wazuh/wazuh-dashboard-plugins/issues/6964) - Changed malware feature description [#7036](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7036) - Changed the font size of the kpi subtitles and the features descriptions [#7033](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7033) +- Changed feature container margins to ensure consistent separation and uniform design. [#7034](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7034) ### Fixed From 7bf3e985146617c8441e4770771f01a7e1e270ec Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Wed, 2 Oct 2024 07:38:11 -0300 Subject: [PATCH 07/10] Refactor overview components layout and structure --- .../common/welcome/overview-welcome.js | 106 ++++++++---------- .../public/components/overview/overview.tsx | 15 ++- .../controllers/overview/components/stats.js | 84 ++++++-------- 3 files changed, 97 insertions(+), 108 deletions(-) diff --git a/plugins/main/public/components/common/welcome/overview-welcome.js b/plugins/main/public/components/common/welcome/overview-welcome.js index 868136ddc9..1ba09d2153 100644 --- a/plugins/main/public/components/common/welcome/overview-welcome.js +++ b/plugins/main/public/components/common/welcome/overview-welcome.js @@ -21,7 +21,6 @@ import { EuiSpacer, EuiFlexGrid, EuiCallOut, - EuiPage, } from '@elastic/eui'; import './welcome.scss'; import { withErrorBoundary, withGlobalBreadcrumb } from '../hocs'; @@ -111,63 +110,56 @@ export const OverviewWelcome = compose( render() { return ( - - - - - {this.props.agentsCountTotal === 0 && this.addAgent()} - - - {appCategories.map(({ label, apps }) => ( - - category.id === label) - ?.label - } - > - - - {apps.map(app => ( - - - - } - className='homSynopsis__card' - title={app.title} - href={NavigationService.getInstance().getUrlForApp( - app.id, - )} - data-test-subj={`overviewWelcome${this.strtools.capitalize( - app.id, - )}`} - description={app.description} - /> - - - ))} - - - - ))} - - - + + + {this.props.agentsCountTotal === 0 && this.addAgent()} + + + {appCategories.map(({ label, apps }) => ( + + category.id === label) + ?.label + } + > + + + {apps.map(app => ( + + + + } + className='homSynopsis__card' + title={app.title} + href={NavigationService.getInstance().getUrlForApp( + app.id, + )} + data-test-subj={`overviewWelcome${this.strtools.capitalize( + app.id, + )}`} + description={app.description} + /> + + + ))} + + + + ))} + - - + + ); } }, diff --git a/plugins/main/public/components/overview/overview.tsx b/plugins/main/public/components/overview/overview.tsx index 12476ad0a7..56afe727c8 100644 --- a/plugins/main/public/components/overview/overview.tsx +++ b/plugins/main/public/components/overview/overview.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import { EuiPage, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { getDataPlugin, getUiSettings } from '../../kibana-services'; import { Stats } from '../../controllers/overview/components/stats'; import { AppState, WzRequest } from '../../react-services'; @@ -158,10 +159,16 @@ export const Overview: React.FC = withRouteResolvers({ )} {tab === 'welcome' && ( - <> - - - + + + + + + + + + + )} ); diff --git a/plugins/main/public/controllers/overview/components/stats.js b/plugins/main/public/controllers/overview/components/stats.js index 35b8bc09f3..46b9125f04 100644 --- a/plugins/main/public/controllers/overview/components/stats.js +++ b/plugins/main/public/controllers/overview/components/stats.js @@ -12,13 +12,7 @@ */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { - EuiCard, - EuiFlexItem, - EuiFlexGroup, - EuiPage, - EuiToolTip, -} from '@elastic/eui'; +import { EuiCard, EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui'; import { withErrorBoundary } from '../../../components/common/hocs'; import { API_NAME_AGENT_STATUS } from '../../../../common/constants'; import { @@ -82,46 +76,42 @@ export const Stats = withErrorBoundary( ({ status }) => this.props[status], ); return ( - - - - - ({ - onClick, - label, - value: - typeof this.props[status] !== 'undefined' - ? this.props[status] - : 0, - color, - }), - ) - } - noDataTitle='No results' - noDataMessage='No results were found.' - /> - - - - - - - - - - - - - - + + + + ({ + onClick, + label, + value: + typeof this.props[status] !== 'undefined' + ? this.props[status] + : 0, + color, + })) + } + noDataTitle='No results' + noDataMessage='No results were found.' + /> + + + + + + + + + + + + + ); } }, From d14e2f6c5f67bc97832a6da4eb3cf3afbd1db480 Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Wed, 2 Oct 2024 13:45:49 -0300 Subject: [PATCH 08/10] Update stats test snapshot for component changes --- .../__snapshots__/stats.test.tsx.snap | 402 +++++++++--------- 1 file changed, 199 insertions(+), 203 deletions(-) diff --git a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap index 4fe01ec984..d0b8785bbf 100644 --- a/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap +++ b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap @@ -3,299 +3,295 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
+
-
+
+

+ No results +

+ -
-

- No results -

- -
-
- No results were found. -
- -
+ No results were found. +
+
+
+ - - Agents summary - + Agents summary -
+
+
+
+
-
-
- -
- + Critical severity +
- + + + - + + +

+
+
+ Rule level 15 or higher
+
+
-
- -
- + High severity +
- + + + - + + +

+
+
+ Rule level 12 to 14
+
+
-
- -
- + Medium severity +
- + + + - + + +

+
+
+ Rule level 7 to 11
+
+
-
- -
- + Low severity +
- + + + - + + +

+
+
+ Rule level 0 to 6
+
+ - - Last 24 hours alerts - + Last 24 hours alerts -
+
From b7f040cdab2ebe829b216e3f8ce145d68f41e138 Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Wed, 2 Oct 2024 15:51:01 -0300 Subject: [PATCH 09/10] Add grow property to EuiFlexItem and adjust card styling --- .../common/welcome/overview-welcome.js | 7 ++++--- .../components/common/welcome/welcome.scss | 20 ++----------------- 2 files changed, 6 insertions(+), 21 deletions(-) diff --git a/plugins/main/public/components/common/welcome/overview-welcome.js b/plugins/main/public/components/common/welcome/overview-welcome.js index 1ba09d2153..70af0d608b 100644 --- a/plugins/main/public/components/common/welcome/overview-welcome.js +++ b/plugins/main/public/components/common/welcome/overview-welcome.js @@ -128,9 +128,9 @@ export const OverviewWelcome = compose( {apps.map(app => ( - + } - className='homSynopsis__card' + className='wz-module-card-title h-100' title={app.title} + titleSize='xs' href={NavigationService.getInstance().getUrlForApp( app.id, )} diff --git a/plugins/main/public/components/common/welcome/welcome.scss b/plugins/main/public/components/common/welcome/welcome.scss index 5754123f55..ab06214b0d 100644 --- a/plugins/main/public/components/common/welcome/welcome.scss +++ b/plugins/main/public/components/common/welcome/welcome.scss @@ -1,14 +1,3 @@ -.wz-welcome-page .euiCard .euiTitle, -.wz-module-body .euiCard .euiTitle { - font-size: 16px; - font-weight: 400; -} - -.wz-welcome-page .euiCard .euiText, -.wz-module-body .euiCard .euiText { - font-family: sans-serif; -} - .wz-module-header-agent:not(.wz-module-header-agent-main) { background: white; border-bottom: 1px solid #d3dae6; @@ -44,11 +33,6 @@ span.statWithLink:hover { text-decoration: underline; } -.wz-welcome-page .flex-redirect-app-links { - display: flex; - flex-grow: 1; -} - -.wz-welcome-page { - padding-bottom: 24px; +.wz-module-card-title .euiCard__content .euiTitle { + font-weight: 400; } From 586140c0692d0bde6b27c4c43425b039af0b444b Mon Sep 17 00:00:00 2001 From: Guido Modarelli Date: Tue, 8 Oct 2024 08:11:57 -0300 Subject: [PATCH 10/10] Remove welcome stats styles from overview component --- .../main/public/controllers/overview/components/stats.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/plugins/main/public/controllers/overview/components/stats.scss b/plugins/main/public/controllers/overview/components/stats.scss index 6d18137c71..8e8bfcf937 100644 --- a/plugins/main/public/controllers/overview/components/stats.scss +++ b/plugins/main/public/controllers/overview/components/stats.scss @@ -1,8 +1,3 @@ .vulnerabilites-summary-card { padding-top: 2vh; } - -.wz-welcome-stats { - padding-top: 24px; - padding-bottom: 8px; -}