Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Containers have different margins #7034

Merged
merged 12 commits into from
Oct 14, 2024
Merged

Containers have different margins #7034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
628f654
Add padding to welcome page and stats component
guidomodarelli Sep 30, 2024
43f52c4
Update stats page styling with welcome stats class
guidomodarelli Sep 30, 2024
ba28cc1
Update imports and component structure in stats.js
guidomodarelli Sep 30, 2024
f817ef9
Adjust padding in welcome and stats components
guidomodarelli Sep 30, 2024
4626373
Update stats component imports and class definition
guidomodarelli Sep 30, 2024
0332dc6
Update feature container margins for consistent design
guidomodarelli Sep 30, 2024
7bf3e98
Refactor overview components layout and structure
guidomodarelli Oct 2, 2024
d14e2f6
Update stats test snapshot for component changes
guidomodarelli Oct 2, 2024
ff721a0
Merge branch '4.10.0' into enhancement/7027-containers-have-different…
guidomodarelli Oct 2, 2024
b7f040c
Add grow property to EuiFlexItem and adjust card styling
guidomodarelli Oct 2, 2024
586140c
Remove welcome stats styles from overview component
guidomodarelli Oct 8, 2024
0f40f09
Merge branch '4.10.0' into enhancement/7027-containers-have-different…
guidomodarelli Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
107 changes: 50 additions & 57 deletions plugins/main/public/components/common/welcome/overview-welcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
EuiSpacer,
EuiFlexGrid,
EuiCallOut,
EuiPage,
} from '@elastic/eui';
import './welcome.scss';
import { withErrorBoundary, withGlobalBreadcrumb } from '../hocs';
Expand Down Expand Up @@ -111,63 +110,57 @@ export const OverviewWelcome = compose(

render() {
return (
<Fragment>
<EuiPage className='wz-welcome-page'>
<EuiFlexGroup gutterSize='l'>
<EuiFlexItem>
{this.props.agentsCountTotal === 0 && this.addAgent()}
<EuiFlexGroup gutterSize='none'>
<EuiFlexGrid columns={2}>
{appCategories.map(({ label, apps }) => (
<EuiFlexItem key={label}>
<EuiCard
title
description
betaBadgeLabel={
Categories.find(category => category.id === label)
?.label
}
>
<EuiSpacer size='s' />
<EuiFlexGrid columns={2}>
{apps.map(app => (
<EuiFlexItem key={app.id}>
<RedirectAppLinks
className='flex-redirect-app-links'
application={getCore().application}
>
<EuiCard
size='xs'
layout='horizontal'
icon={
<EuiIcon
size='xl'
type={app.euiIconType}
/>
}
className='homSynopsis__card'
title={app.title}
href={NavigationService.getInstance().getUrlForApp(
app.id,
)}
data-test-subj={`overviewWelcome${this.strtools.capitalize(
app.id,
)}`}
description={app.description}
/>
</RedirectAppLinks>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiCard>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexGroup gutterSize='l'>
<EuiFlexItem>
{this.props.agentsCountTotal === 0 && this.addAgent()}
<EuiFlexGroup gutterSize='none'>
<EuiFlexGrid columns={2}>
{appCategories.map(({ label, apps }) => (
<EuiFlexItem key={label}>
<EuiCard
title
description
betaBadgeLabel={
Categories.find(category => category.id === label)
?.label
}
>
<EuiSpacer size='s' />
<EuiFlexGrid columns={2}>
{apps.map(app => (
<EuiFlexItem key={app.id} grow>
<RedirectAppLinks
className='h-100'
application={getCore().application}
>
<EuiCard
size='xs'
layout='horizontal'
icon={
<EuiIcon size='xl' type={app.euiIconType} />
}
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}
/>
</RedirectAppLinks>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiCard>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiFlexGroup>
</EuiPage>
</Fragment>
</EuiFlexItem>
</EuiFlexGroup>
);
}
},
Expand Down
16 changes: 2 additions & 14 deletions plugins/main/public/components/common/welcome/welcome.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
.wz-welcome-page .euiCard .euiTitle,
.wz-module-body .euiCard .euiTitle {
font-size: 16px;
font-weight: 400;
guidomodarelli marked this conversation as resolved.
Show resolved Hide resolved
}

.wz-welcome-page .euiCard .euiText,
.wz-module-body .euiCard .euiText {
font-family: sans-serif;
}
guidomodarelli marked this conversation as resolved.
Show resolved Hide resolved

.wz-module-header-agent:not(.wz-module-header-agent-main) {
background: white;
border-bottom: 1px solid #d3dae6;
Expand Down Expand Up @@ -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 {
guidomodarelli marked this conversation as resolved.
Show resolved Hide resolved
font-weight: 400;
}
15 changes: 11 additions & 4 deletions plugins/main/public/components/overview/overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -158,10 +159,16 @@ export const Overview: React.FC = withRouteResolvers({
</>
)}
{tab === 'welcome' && (
<>
<Stats {...agentsCounts} />
<OverviewWelcome {...agentsCounts} />
</>
<EuiPage paddingSize='l'>
<EuiFlexGroup direction='column'>
<EuiFlexItem>
<Stats {...agentsCounts} />
</EuiFlexItem>
<EuiFlexItem>
<OverviewWelcome {...agentsCounts} />
</EuiFlexItem>
</EuiFlexGroup>
</EuiPage>
)}
</>
);
Expand Down
Loading
Loading