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

Remove application menu in the IT Hygiene #6176

Merged
merged 5 commits into from
Dec 1, 2023
Merged

Remove application menu in the IT Hygiene #6176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
57db450
feat: remove application menu in IT Hygiene application
Desvelao Nov 29, 2023
9ce696d
fix: remove unused files and styles
Desvelao Nov 29, 2023
93c017d
changelog: add pull request entry
Desvelao Nov 29, 2023
3b7c73a
Merge branch '4.8.0' into feat/6169-remove-it-hygiene-menu
chantal-kelm Nov 30, 2023
39315a8
Merge branch '4.8.0' into feat/6169-remove-it-hygiene-menu
Desvelao Dec 1, 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
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ All notable changes to the Wazuh app project will be documented in this file.
- Added global vulnerabilities dashboards [#5896](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5896) [#6179](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6179)
- Added an agent selector to the IT Hygiene application [#5840](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5840)
- Added query results limit when the search exceed 10000 hits [#6106](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6106)
- Added a redirection button to Endpoint Summary from IT Hygiene application [6176](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6176)

### Changed

Expand All @@ -30,6 +31,7 @@ All notable changes to the Wazuh app project will be documented in this file.

- Removed the `disabled_roles` and `customization.logo.sidebar` settings [#5840](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5840)
- Removed the ability to configure the visibility of modules and removed `extensions.*` settings [#5840](https://github.com/wazuh/wazuh-dashboard-plugins/pull/5840)
- Removed the application menu in the IT Hygiene application [6176](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6176)
- Removed the implicit filter of WQL language of the search bar UI [#6174](https://github.com/wazuh/wazuh-dashboard-plugins/pull/6174)

## Wazuh v4.7.1 - OpenSearch Dashboards 2.8.0 - Revision 01
Expand Down
259 changes: 47 additions & 212 deletions plugins/main/public/components/common/welcome/agents-welcome.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import {
EuiFlexGrid,
EuiButtonEmpty,
EuiPage,
EuiPopover,
EuiLoadingChart,
EuiToolTip,
EuiButtonIcon,
Expand All @@ -35,7 +34,6 @@ import {
} from './components';
import { AgentInfo } from './agents-info';
import WzReduxProvider from '../../../redux/wz-redux-provider';
import MenuAgent from './components/menu-agent';
import './welcome.scss';
import { WzDatePicker } from '../../../components/wz-date-picker/wz-date-picker';
import KibanaVis from '../../../kibana-integrations/kibana-vis';
Expand All @@ -53,7 +51,6 @@ import {
getCore,
getDataPlugin,
} from '../../../kibana-services';
import { hasAgentSupportModule } from '../../../react-services/wz-agents';
import {
withErrorBoundary,
withGlobalBreadcrumb,
Expand All @@ -62,7 +59,6 @@ import {
} from '../hocs';
import { compose } from 'redux';
import { API_NAME_AGENT_STATUS } from '../../../../common/constants';
import { WAZUH_MODULES } from '../../../../common/wazuh-modules';
import {
PromptAgentNeverConnected,
PromptNoSelectedAgent,
Expand All @@ -71,12 +67,8 @@ import { connect } from 'react-redux';
import { WzButton } from '../buttons';
import {
Applications,
configurationAssessment,
fileIntegrityMonitoring,
itHygiene,
mitreAttack,
threatHunting,
vulnerabilityDetection,
} from '../../../utils/applications';
import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';

Expand Down Expand Up @@ -120,58 +112,22 @@ export const AgentsWelcome = compose(
)(
class AgentsWelcome extends Component {
_isMount = false;
sidebarSizeDefault;
constructor(props) {
super(props);

this.offset = 275;

this.sidebarSizeDefault = 320;

this.state = {
lastScans: [],
isLoading: true,
sortField: 'start_scan',
sortDirection: 'desc',
actionAgents: true, // Hide actions agents
selectedRequirement: 'pci',
menuAgent: [],
maxModules: 5,
widthWindow: window.innerWidth,
isLocked: false,
};
}

updateWidth = () => {
let menuSize;
if (this.state.isLocked) {
menuSize = window.innerWidth - this.offset - this.sidebarSizeDefault;
} else {
menuSize = window.innerWidth - this.offset;
}
let maxModules = 5;
if (menuSize > 1400) {
maxModules = 5;
} else {
if (menuSize > 1250) {
maxModules = 4;
} else {
if (menuSize > 1100) {
maxModules = 3;
} else {
if (menuSize > 900) {
maxModules = 2;
} else {
maxModules = 1;
if (menuSize < 750) {
maxModules = null;
}
}
}
}
}

this.setState({ maxModules: maxModules, widthWindow: window.innerWidth });
this.setState({ widthWindow: window.innerWidth });
};

/* TODO: we should to create a unique Explore agent button instead
Expand All @@ -192,7 +148,6 @@ export const AgentsWelcome = compose(
/* WORKAROUND: ensure the $scope.agent is synced with the agent stored in Redux (this.props.agent). See agents.js controller.
*/
this.props.setAgent(this.props.agent);
this.updatePinnedApplications();
this.updateWidth();
const tabVisualizations = new TabVisualizations();
tabVisualizations.removeAll();
Expand All @@ -204,10 +159,8 @@ export const AgentsWelcome = compose(
const $injector = getAngularModule().$injector;
this.drawerLokedSubscribtion = getChrome()
.getIsNavDrawerLocked$()
.subscribe(isLocked => {
this.setState({ isLocked }, () => {
this.updateWidth();
});
.subscribe(() => {
this.updateWidth();
});
this.router = $injector.get('$route');
window.addEventListener('resize', this.updateWidth); //eslint-disable-line
Expand All @@ -230,117 +183,34 @@ export const AgentsWelcome = compose(
this.drawerLokedSubscribtion?.unsubscribe();
}

updatePinnedApplications(applications) {
let pinnedApplications;

if (applications) {
pinnedApplications = applications;
} else {
pinnedApplications = window.localStorage.getItem(
'wz-menu-agent-apps-pinned',
)
? JSON.parse(window.localStorage.getItem('wz-menu-agent-apps-pinned'))
: [
// Default pinned applications
threatHunting.id,
fileIntegrityMonitoring.id,
configurationAssessment.id,
vulnerabilityDetection.id,
mitreAttack.id,
];
}

// Ensure the pinned applications are supported
pinnedApplications = pinnedApplications.filter(pinnedApplication =>
Applications.some(({ id }) => id === pinnedApplication),
renderEndpointsSummaryButton() {
const application = Applications.find(
({ id }) => id === 'endpoints-summary',
);

window.localStorage.setItem(
'wz-menu-agent-apps-pinned',
JSON.stringify(pinnedApplications),
);
this.setState({ menuAgent: pinnedApplications });
}

renderModules() {
return (
<Fragment>
{this.state.menuAgent.map((applicationId, i) => {
const moduleID = Object.keys(WAZUH_MODULES).find(
key => WAZUH_MODULES[key]?.appId === applicationId,
).appId;
if (
i < this.state.maxModules &&
hasAgentSupportModule(this.props.agent, moduleID)
) {
return (
<EuiFlexItem
key={i}
grow={false}
style={{ marginLeft: 0, marginTop: 7 }}
>
<RedirectAppLinks application={getCore().application}>
<EuiButtonEmpty
href={getCore().application.getUrlForApp(applicationId)}
style={{ cursor: 'pointer' }}
>
<span>
{
Applications.find(({ id }) => id === applicationId)
.title
}
&nbsp;
</span>
</EuiButtonEmpty>
</RedirectAppLinks>
</EuiFlexItem>
);
}
})}
<EuiFlexItem grow={false} style={{ marginTop: 7 }}>
<EuiPopover
button={
<EuiButtonEmpty
iconSide='right'
iconType='arrowDown'
onClick={() =>
this.setState({ switchModule: !this.state.switchModule })
}
>
More...
</EuiButtonEmpty>
}
isOpen={this.state.switchModule}
closePopover={() => this.setState({ switchModule: false })}
repositionOnScroll={false}
anchorPosition='downCenter'
>
<div>
<WzReduxProvider>
<div style={{ maxWidth: 730 }}>
<MenuAgent
isAgent={this.props.agent}
pinnedApplications={this.state.menuAgent}
updatePinnedApplications={applications =>
this.updatePinnedApplications(applications)
}
closePopover={() => {
this.setState({ switchModule: false });
}}
switchTab={module => this.props.switchTab(module)}
></MenuAgent>
</div>
</WzReduxProvider>
</div>
</EuiPopover>
</EuiFlexItem>
</Fragment>
<RedirectAppLinks application={getCore().application}>
<WzButton
buttonType='empty'
iconType={application.euiIconType}
href={getCore().application.getUrlForApp('endpoints-summary')}
className='wz-it-hygiene-header-button'
tooltip={{
position: 'bottom',
content: application.title,
className: 'wz-it-hygiene-header-button-tooltip',
}}
>
{application.title}
</WzButton>
</RedirectAppLinks>
);
}

renderTitle() {
const notNeedStatus = true;
const thereAreAgentSelected = Boolean(this.props.agent?.id);
// Calculate if the header buttons should display the name or only the icon to be responsive

return (
<EuiFlexGroup
justifyContent='spaceBetween'
Expand All @@ -349,47 +219,9 @@ export const AgentsWelcome = compose(
>
<EuiFlexItem grow={false} className='wz-module-header-agent-title'>
<EuiFlexGroup responsive={false} gutterSize='xs'>
{(this.state.maxModules !== null && this.renderModules()) || (
<EuiFlexItem grow={false} style={{ marginTop: 7 }}>
<EuiPopover
button={
<EuiButtonEmpty
iconSide='right'
iconType='arrowDown'
onClick={() =>
this.setState({
switchModule: !this.state.switchModule,
})
}
>
Applications
</EuiButtonEmpty>
}
isOpen={this.state.switchModule}
closePopover={() => this.setState({ switchModule: false })}
repositionOnScroll={false}
anchorPosition='downCenter'
>
<div>
<WzReduxProvider>
<div style={{ maxWidth: 730 }}>
<MenuAgent
isAgent={this.props.agent}
pinnedApplications={this.state.menuAgent}
updatePinnedApplications={applications =>
this.updatePinnedApplications(applications)
}
closePopover={() => {
this.setState({ switchModule: false });
}}
switchTab={module => this.props.switchTab(module)}
></MenuAgent>
</div>
</WzReduxProvider>
</div>
</EuiPopover>
</EuiFlexItem>
)}
<EuiFlexItem grow={false} style={{ marginLeft: 0, marginTop: 7 }}>
{this.renderEndpointsSummaryButton()}
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem grow={false} className='wz-module-header-agent-title'>
Expand Down Expand Up @@ -433,27 +265,29 @@ export const AgentsWelcome = compose(
onClick={() =>
this.props.switchTab('syscollector', notNeedStatus)
}
tooltip={
this.state.maxModules === null
? { position: 'bottom', content: 'Inventory data' }
: undefined
}
className='wz-it-hygiene-header-button'
tooltip={{
position: 'bottom',
content: 'Inventory data',
className: 'wz-it-hygiene-header-button-tooltip',
}}
>
{this.state.maxModules !== null ? 'Inventory data' : ''}
Inventory data
</WzButton>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginTop: 7 }}>
<WzButton
buttonType='empty'
iconType='stats'
onClick={() => this.props.switchTab('stats', notNeedStatus)}
tooltip={
this.state.maxModules === null
? { position: 'bottom', content: 'Stats' }
: undefined
}
className='wz-it-hygiene-header-button'
tooltip={{
position: 'bottom',
content: 'Stats',
className: 'wz-it-hygiene-header-button-tooltip',
}}
>
{this.state.maxModules !== null ? 'Stats' : ''}
Stats
</WzButton>
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ marginTop: 7 }}>
Expand All @@ -463,13 +297,14 @@ export const AgentsWelcome = compose(
onClick={() =>
this.props.switchTab('configuration', notNeedStatus)
}
tooltip={
this.state.maxModules === null
? { position: 'bottom', content: 'Configuration' }
: undefined
}
className='wz-it-hygiene-header-button'
tooltip={{
position: 'bottom',
content: 'Configuration',
className: 'wz-it-hygiene-header-button-tooltip',
}}
>
{this.state.maxModules !== null ? 'Configuration' : ''}
Configuration
</WzButton>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Loading
Loading