Skip to content

Commit

Permalink
Modify Overview application to display the new menu (#5852)
Browse files Browse the repository at this point in the history 
* Fix endpoint summary and server managment redirections

* fix: adapt the redirections to applications

- Endpoints summary
- IT Hygiene
- Groups

* fix(health-check): fix redirection to health check the removed the tab query parameter from URL and then the previous URL could not be rebuilt

* fix(redirections): redirection from Overview app to Endpoints summary

* fix(redirections): removed wz- prefix from the redirections to applications

* Change overview page, linked to the new menu estructure

* fix: move definitions of applications in the home application

* fix: application descriptions

---------

Co-authored-by: Antonio David Gutiérrez <[email protected]>
  • Loading branch information
@JuanGarriuz @Desvelao
JuanGarriuz and Desvelao authored Sep 18, 2023
1 parent 6eafba2 commit 2af4c53
Show file tree
Hide file tree
Showing 3 changed files with 724 additions and 688 deletions.
177 changes: 58 additions & 119 deletions plugins/main/public/components/common/welcome/overview-welcome.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,27 @@ import {
withGlobalBreadcrumb,
withReduxProvider,
} from '../hocs';
import {
LogoDocker,
LogoGitHub,
LogoGoogleCloud,
LogoOffice365,
} from '../logos';
import { compose } from 'redux';
import { getNavigationAppURL } from '../../../react-services/navigate-app';
import {
getNavigationAppURL,
navigateAppURL,
} from '../../../react-services/navigate-app';
import { Applications, Categories } from '../../../utils/applications';

const appCategories = Applications.reduce((categories, app) => {
const existingCategory = categories.find(
category => category.label === app.category,
);
if (existingCategory) {
existingCategory.apps.push(app);
} else {
categories.push({
label: app.category,
apps: [app],
});
}
return categories;
}, []);

export const OverviewWelcome = compose(
withReduxProvider,
Expand Down Expand Up @@ -108,123 +121,49 @@ export const OverviewWelcome = compose(
return (
<Fragment>
<EuiPage className='wz-welcome-page'>
<EuiFlexGroup>
<EuiFlexGroup gutterSize='l'>
{this.props.agentsCountTotal == 0 && this.addAgent()}
<EuiFlexItem>
{this.props.agentsCountTotal == 0 && this.addAgent()}
<EuiFlexGroup>
<EuiFlexItem>
<EuiCard
title
description
betaBadgeLabel='Security Information Management'
>
<EuiSpacer size='s' />
<EuiFlexGrid columns={2}>
{this.buildTabCard('general', 'dashboardApp')}
{this.buildTabCard('fim', 'filebeatApp')}
{this.props.extensions.aws &&
this.buildTabCard('aws', 'logoAWSMono')}
{this.props.extensions.office &&
this.buildTabCard('office', LogoOffice365)}
{this.props.extensions.gcp &&
this.buildTabCard('gcp', LogoGoogleCloud)}
{this.props.extensions.github &&
this.buildTabCard('github', LogoGitHub)}
</EuiFlexGrid>
</EuiCard>
</EuiFlexItem>
<EuiFlexItem>
<EuiCard
title
description
betaBadgeLabel='Auditing and Policy Monitoring'
>
<EuiSpacer size='s' />
<EuiFlexGrid columns={2}>
{this.buildTabCard('pm', 'advancedSettingsApp')}
{this.props.extensions.audit &&
this.buildTabCard('audit', 'monitoringApp')}
{this.props.extensions.oscap &&
this.buildTabCard('oscap', 'codeApp')}
{this.props.extensions.ciscat &&
this.buildTabCard('ciscat', 'auditbeatApp')}
{this.buildTabCard('sca', 'securityAnalyticsApp')}
</EuiFlexGrid>
</EuiCard>
</EuiFlexItem>
</EuiFlexGroup>

<EuiSpacer size='xl' />
<EuiFlexGroup>
<EuiFlexItem>
<EuiCard
title
description
betaBadgeLabel='Threat Detection and Response'
>
<EuiSpacer size='s' />
<EuiFlexGrid columns={2}>
{this.buildTabCard('vuls', 'securityApp')}
{this.props.extensions.virustotal &&
this.buildTabCard('virustotal', 'savedObjectsApp')}
{this.props.extensions.osquery &&
this.buildTabCard('osquery', 'searchProfilerApp')}
{this.props.extensions.docker &&
this.buildTabCard('docker', LogoDocker)}
{this.buildTabCard('mitre', 'spacesApp')}
{/* TODO- Change "spacesApp" icon*/}
</EuiFlexGrid>
</EuiCard>
</EuiFlexItem>

<EuiFlexItem>
<EuiCard
title
description
betaBadgeLabel='Regulatory Compliance'
>
<EuiSpacer size='s' />
{!this.props.extensions.pci &&
!this.props.extensions.gdpr &&
!this.props.extensions.hipaa &&
!this.props.extensions.tsc &&
!this.props.extensions.nist && (
<EuiFlexGroup>
<EuiFlexItem>
<EuiCallOut
title={
<p>
Click the <EuiIcon type='eye' /> icon to
show regulatory compliance extensions.
</p>
<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}>
<EuiCard
size='xs'
layout='horizontal'
icon={
<EuiIcon
size='xl'
type={app.euiIconType}
color='primary'
/>
}
color='success'
iconType='help'
className='homSynopsis__card'
title={app.title}
onClick={() => navigateAppURL(`/app/${app.id}`)}
data-test-subj={`overviewWelcome${this.strtools.capitalize(
app.id,
)}`}
description={app.description}
/>
</EuiFlexItem>
</EuiFlexGroup>
)}
{(this.props.extensions.pci ||
this.props.extensions.gdpr ||
this.props.extensions.hipaa ||
this.props.extensions.tsc ||
this.props.extensions.nist) && (
<EuiFlexGrid columns={2}>
{this.props.extensions.pci &&
this.buildTabCard('pci', 'visTagCloud')}
{this.props.extensions.nist &&
this.buildTabCard('nist', 'apmApp')}
{this.props.extensions.tsc &&
this.buildTabCard('tsc', 'apmApp')}
{this.props.extensions.gdpr &&
this.buildTabCard('gdpr', 'visBarVertical')}
{this.props.extensions.hipaa &&
this.buildTabCard('hipaa', 'emsApp')}
))}
</EuiFlexGrid>
)}
</EuiCard>
</EuiFlexItem>
</EuiFlexGroup>
</EuiCard>
</EuiFlexItem>
))}
</EuiFlexGrid>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPage>
Expand Down
Loading

0 comments on commit 2af4c53

Please sign in to comment.