diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d1480b279..22d904df84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Changed the agents summary in overview with no results to an agent deployment help message. [#7041](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7041) - 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 diff --git a/plugins/main/public/components/common/welcome/overview-welcome.js b/plugins/main/public/components/common/welcome/overview-welcome.js index 868136ddc9..70af0d608b 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,57 @@ 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='wz-module-card-title h-100' + title={app.title} + titleSize='xs' + 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/common/welcome/welcome.scss b/plugins/main/public/components/common/welcome/welcome.scss index 0ce9e18dda..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,7 +33,6 @@ span.statWithLink:hover { text-decoration: underline; } -.wz-welcome-page .flex-redirect-app-links { - display: flex; - flex-grow: 1; +.wz-module-card-title .euiCard__content .euiTitle { + font-weight: 400; } 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/__snapshots__/stats.test.tsx.snap b/plugins/main/public/controllers/overview/components/__snapshots__/stats.test.tsx.snap index 1f7b3597f0..96310fd8a7 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,304 +3,300 @@ exports[`Stats component renders correctly to match the snapshot 1`] = `
+
-
+ +
+

+ This instance has no agents registered. +
+ Please deploy agents to begin monitoring your endpoints. +

+
+
+ -
+ +
+
+ - - 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 -
+
diff --git a/plugins/main/public/controllers/overview/components/stats.js b/plugins/main/public/controllers/overview/components/stats.js index 60d1c790bf..97fbb7cfec 100644 --- a/plugins/main/public/controllers/overview/components/stats.js +++ b/plugins/main/public/controllers/overview/components/stats.js @@ -16,7 +16,6 @@ import { EuiCard, EuiFlexItem, EuiFlexGroup, - EuiPage, EuiToolTip, EuiEmptyPrompt, } from '@elastic/eui'; @@ -86,75 +85,72 @@ export const Stats = withErrorBoundary( ); return ( - - - - - {hasResults ? ( - ({ - onClick, - label, - value: - typeof this.props[status] !== 'undefined' - ? this.props[status] - : 0, - color, - }), - )} + + + + {hasResults ? ( + ({ + onClick, + label, + value: + typeof this.props[status] !== 'undefined' + ? this.props[status] + : 0, + color, + }), + )} + /> + ) : ( + !hasResults && + this.props !== undefined && ( + + This instance has no agents registered. +
+ Please deploy agents to begin monitoring your endpoints. +

+ } + actions={ + + Deploy new agent + + } /> - ) : ( - !hasResults && - this.props !== undefined && ( - - This instance has no agents registered. -
- Please deploy agents to begin monitoring your - endpoints. -

- } - actions={ - - Deploy new agent - - } - /> - ) - )} - - - - - - - - - - - - - - + ) + )} + + + + + + + + + + + + + ); } },