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

Change the display order of tabs in all modules #6067

Merged
merged 4 commits into from
Oct 30, 2023
Merged

Change the display order of tabs in all modules #6067

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f50fe4
Change the display order of tabs in all modules
chantal-kelm Oct 27, 2023
82a9866
Change the display order of tabs in all modules
chantal-kelm Oct 27, 2023
61d9609
update changelog
chantal-kelm Oct 27, 2023
fe7fcf5
Merge branch '5818-Update-dashboards' into 6066-Change-the-display-or…
chantal-kelm Oct 27, 2023
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 @@ -12,6 +12,7 @@ All notable changes to the Wazuh app project will be documented in this file.
### 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

Expand Down
28 changes: 14 additions & 14 deletions plugins/main/public/components/common/modules/modules-defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ const EventsTab = {
component: Events,
};
const RegulatoryComplianceTabs = [
DashboardTab,
{
id: 'inventory',
name: 'Controls',
buttons: [ButtonModuleExploreAgent],
component: ComplianceTable,
},
DashboardTab,
EventsTab,
];

Expand All @@ -55,13 +55,13 @@ export const ModulesDefaults = {
fim: {
init: 'dashboard',
tabs: [
DashboardTab,
{
id: 'inventory',
name: 'Inventory',
buttons: [ButtonModuleExploreAgent],
component: MainFim,
},
DashboardTab,
EventsTab,
],
availableFor: ['manager', 'agent'],
Expand Down Expand Up @@ -90,14 +90,14 @@ export const ModulesDefaults = {
init: 'dashboard',
tabs: [
{
id: 'inventory',
name: 'Inventory',
id: 'dashboard',
name: 'Dashboard',
buttons: [ButtonModuleExploreAgent],
component: MainSca,
},
{
id: 'dashboard',
name: 'Dashboard',
id: 'inventory',
name: 'Inventory',
buttons: [ButtonModuleExploreAgent],
component: MainSca,
},
Expand All @@ -109,32 +109,32 @@ export const ModulesDefaults = {
office: {
init: 'dashboard',
tabs: [
{
id: 'inventory',
name: 'Panel',
buttons: [ButtonModuleExploreAgent],
component: withModuleNotForAgent(OfficePanel),
},
{
id: 'dashboard',
name: 'Dashboard',
buttons: [ButtonModuleExploreAgent, ButtonModuleGenerateReport],
component: withModuleNotForAgent(Dashboard),
},
{
id: 'inventory',
name: 'Panel',
buttons: [ButtonModuleExploreAgent],
component: withModuleNotForAgent(OfficePanel),
},
{ ...EventsTab, component: withModuleNotForAgent(Events) },
],
availableFor: ['manager'],
},
github: {
init: 'dashboard',
tabs: [
DashboardTab,
{
id: 'inventory',
name: 'Panel',
buttons: [ButtonModuleExploreAgent],
component: GitHubPanel,
},
DashboardTab,
EventsTab,
],
availableFor: ['manager', 'agent'],
Expand All @@ -161,6 +161,7 @@ export const ModulesDefaults = {
mitre: {
init: 'dashboard',
tabs: [
DashboardTab,
{
id: 'intelligence',
name: 'Intelligence',
Expand All @@ -172,7 +173,6 @@ export const ModulesDefaults = {
buttons: [ButtonModuleExploreAgent],
component: MainMitre,
},
DashboardTab,
EventsTab,
],
availableFor: ['manager', 'agent'],
Expand Down
105 changes: 58 additions & 47 deletions plugins/main/public/components/wz-menu/wz-menu-overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,14 @@
* Find more information about this on the LICENSE file.
*/
import React, { Component } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiFlexGrid, EuiButtonEmpty, EuiSideNav, EuiIcon } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiFlexGrid,
EuiButtonEmpty,
EuiSideNav,
EuiIcon,
} from '@elastic/eui';
import { connect } from 'react-redux';
import store from '../../redux/store';
import { updateCurrentAgentData } from '../../redux/actions/appStateActions';
Expand All @@ -26,7 +33,7 @@ class WzMenuOverview extends Component {
super(props);
this.currentApi = JSON.parse(AppState.getCurrentAPI()).id;
this.state = {
extensions: []
extensions: [],
};

this.overviewSections = {
Expand Down Expand Up @@ -75,7 +82,8 @@ class WzMenuOverview extends Component {
},
sca: {
id: WAZUH_MODULES_ID.SECURITY_CONFIGURATION_ASSESSMENT,
cyTestId: WAZUH_MENU_MODULES_SECTIONS_CY_TEST_ID.SECURITY_CONFIGURATION_ASSESSMENT,
cyTestId:
WAZUH_MENU_MODULES_SECTIONS_CY_TEST_ID.SECURITY_CONFIGURATION_ASSESSMENT,
text: 'Security configuration assessment',
},
audit: {
Expand Down Expand Up @@ -156,28 +164,28 @@ class WzMenuOverview extends Component {
this.overviewSections.office,
this.overviewSections.aws,
this.overviewSections.gcp,
this.overviewSections.github
this.overviewSections.github,
];
this.auditingItems = [
this.overviewSections.pm,
this.overviewSections.audit,
this.overviewSections.oscap,
this.overviewSections.ciscat,
this.overviewSections.sca
this.overviewSections.sca,
];
this.threatDetectionItems = [
this.overviewSections.vuls,
this.overviewSections.virustotal,
this.overviewSections.osquery,
this.overviewSections.docker,
this.overviewSections.mitre
this.overviewSections.mitre,
];
this.regulatoryComplianceItems = [
this.overviewSections.pci,
this.overviewSections.gdpr,
this.overviewSections.hipaa,
this.overviewSections.nist,
this.overviewSections.tsc
this.overviewSections.tsc,
];
}

Expand All @@ -192,19 +200,20 @@ class WzMenuOverview extends Component {
this.props.closePopover();
const params = { tab: section };
if (this.props.currentAgentData.id)
params["agentId"] = this.props.currentAgentData.id;
if (section === "sca") { // SCA initial tab is inventory
params["tabView"] = "inventory"
params['agentId'] = this.props.currentAgentData.id;
if (section === 'sca') {
// SCA initial tab is inventory
params['tabView'] = 'dashboard';
}

if (this.props.currentTab !== section) {
// do not redirect if we already are in that tab
if (!this.props.isAgent) {
AppNavigate.navigateToModule(ev, 'overview', params)
AppNavigate.navigateToModule(ev, 'overview', params);
} else {
if (!this.props.switchTab) {
this.props.updateCurrentAgentData(this.props.isAgent);
AppNavigate.navigateToModule(ev, 'overview', params)
AppNavigate.navigateToModule(ev, 'overview', params);
} else {
this.props.switchTab(section);
}
Expand All @@ -215,9 +224,16 @@ class WzMenuOverview extends Component {
createItems = items => {
const keyExists = key => Object.keys(this.state.extensions).includes(key);
const keyIsTrue = key => (this.state.extensions || [])[key];
return items.filter(item =>
(Object.keys(this.props.currentAgentData).length ? hasAgentSupportModule(this.props.currentAgentData, item.id) : true) && Object.keys(this.state.extensions).length && (!keyExists(item.id) || keyIsTrue(item.id))
).map(item => this.createItem(item));
return items
.filter(
item =>
(Object.keys(this.props.currentAgentData).length
? hasAgentSupportModule(this.props.currentAgentData, item.id)
: true) &&
Object.keys(this.state.extensions).length &&
(!keyExists(item.id) || keyIsTrue(item.id)),
)
.map(item => this.createItem(item));
};

createItem = (item, data = {}) => {
Expand All @@ -228,8 +244,8 @@ class WzMenuOverview extends Component {
name: item.text,
'data-test-subj': item.cyTestId,
isSelected: this.props.currentTab === item.id,
onClick: () => { },
onMouseDown: (ev) => this.clickMenuItem(ev, item.id)
onClick: () => {},
onMouseDown: ev => this.clickMenuItem(ev, item.id),
};
};

Expand All @@ -239,57 +255,58 @@ class WzMenuOverview extends Component {
}

render() {

const securityInformation = [
{
name: this.overviewSections.securityInformation.text,
id: this.overviewSections.securityInformation.id,
icon: <EuiIcon type="managementApp" color="primary" />,
items: this.createItems(this.securityInformationItems)
}
icon: <EuiIcon type='managementApp' color='primary' />,
items: this.createItems(this.securityInformationItems),
},
];

const auditing = [
{
name: this.overviewSections.auditing.text,
id: this.overviewSections.auditing.id,
icon: <EuiIcon type="managementApp" color="primary" />,
items: this.createItems(this.auditingItems)
}
icon: <EuiIcon type='managementApp' color='primary' />,
items: this.createItems(this.auditingItems),
},
];

const threatDetection = [
{
name: this.overviewSections.threatDetection.text,
id: this.overviewSections.threatDetection.id,
icon: <EuiIcon type="reportingApp" color="primary" />,
items: this.createItems(this.threatDetectionItems)
}
icon: <EuiIcon type='reportingApp' color='primary' />,
items: this.createItems(this.threatDetectionItems),
},
];

const regulatoryCompliance = [
{
name: this.overviewSections.regulatoryCompliance.text,
id: this.overviewSections.regulatoryCompliance.id,
icon: <EuiIcon type="reportingApp" color="primary" />,
items: this.createItems(this.regulatoryComplianceItems)
}
icon: <EuiIcon type='reportingApp' color='primary' />,
items: this.createItems(this.regulatoryComplianceItems),
},
];

const agentData = store.getState().appStateReducers.currentAgentData
const agentData = store.getState().appStateReducers.currentAgentData;

return (
<div className="WzManagementSideMenu wz-menu-overview">
{Object.keys(this.state.extensions).length && (
<div className='WzManagementSideMenu wz-menu-overview'>
{(Object.keys(this.state.extensions).length && (
<div>
{!agentData.id && (
<EuiFlexGroup>
<EuiFlexItem grow={false} style={{ marginLeft: 14 }}>
<EuiButtonEmpty iconType="apps"
<EuiButtonEmpty
iconType='apps'
onClick={() => {
this.props.closePopover();
window.location.href = '#/overview';
}}>
}}
>
Modules directory
</EuiButtonEmpty>
</EuiFlexItem>
Expand All @@ -303,10 +320,7 @@ class WzMenuOverview extends Component {
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiSideNav
items={auditing}
style={{ padding: '4px 12px' }}
/>
<EuiSideNav items={auditing} style={{ padding: '4px 12px' }} />
</EuiFlexItem>
<EuiFlexItem>
<EuiSideNav
Expand All @@ -322,8 +336,7 @@ class WzMenuOverview extends Component {
</EuiFlexItem>
</EuiFlexGrid>
</div>
) || (<div style={{ width: 300 }}></div>
)}
)) || <div style={{ width: 300 }}></div>}
</div>
);
}
Expand All @@ -332,15 +345,13 @@ class WzMenuOverview extends Component {
const mapStateToProps = state => {
return {
currentAgentData: state.appStateReducers.currentAgentData,
currentTab: state.appStateReducers.currentTab
currentTab: state.appStateReducers.currentTab,
};
};

const mapDispatchToProps = dispatch => ({
updateCurrentAgentData: (agentData) => dispatch(updateCurrentAgentData(agentData))
updateCurrentAgentData: agentData =>
dispatch(updateCurrentAgentData(agentData)),
});

export default connect(
mapStateToProps,
mapDispatchToProps
)(WzMenuOverview);
export default connect(mapStateToProps, mapDispatchToProps)(WzMenuOverview);
Loading