diff --git a/public/components/wz-menu/management-side-menu.js b/public/components/wz-menu/management.js similarity index 100% rename from public/components/wz-menu/management-side-menu.js rename to public/components/wz-menu/management.js diff --git a/public/components/wz-menu/wz-menu.js b/public/components/wz-menu/wz-menu.js index 86a644743..c1b08bf1b 100644 --- a/public/components/wz-menu/wz-menu.js +++ b/public/components/wz-menu/wz-menu.js @@ -10,14 +10,15 @@ * Find more information about this on the LICENSE file. */ import React, { Component, Fragment } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiButtonEmpty, EuiCallOut, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; +import ReactDOM from 'react-dom'; +import { EuiFlexGroup, EuiFlexItem, EuiPopover, EuiIcon, EuiButtonEmpty, EuiCallOut, EuiLoadingSpinner, EuiToolTip } from '@elastic/eui'; import { AppState } from '../../react-services/app-state'; import { PatternHandler } from '../../react-services/pattern-handler'; import { WazuhConfig } from '../../react-services/wazuh-config'; import { connect } from 'react-redux'; import WzReduxProvider from '../../redux/wz-redux-provider'; import store from '../../redux/store' -import WzManagementSideMenu from './management-side-menu'; +import Management from './management'; import { npStart } from 'ui/new_platform' import { toastNotifications } from 'ui/notify'; import { GenericRequest } from '../../react-services/generic-request'; @@ -30,6 +31,7 @@ class WzMenu extends Component { super(props); this.state = { showMenu: false, + menuOpened: false, currentMenuTab: "", currentAPI: "", APIlist: [], @@ -222,13 +224,12 @@ class WzMenu extends Component { buildPatternSelector() { return ( - + - + ) } buildApiSelector() { return ( - + - + ) } @@ -276,131 +276,148 @@ class WzMenu extends Component { } render() { - const managementButton = ( - - Management - ); + const menu = ( +
+
+ { this.setMenuItem('overview'); this.setState({ menuOpened: false }) }} > + + Overview + - return ( - - - - {this.state.showMenu && ( -
-
- - - - this.setMenuItem('overview')} > - Overview - + + + Management + + { this.setMenuItem('agents-preview'); this.setState({ menuOpened: false }) }}> + + Agents + - this.setMenuItem('manager')}> - Management - + { this.setMenuItem('wazuh-dev'); this.setState({ menuOpened: false }) }}> + + Dev Tools + - this.setMenuItem('agents-preview')}> - - Agents - +
+ {this.state.currentAPI && this.state.APIlist && this.state.APIlist.length > 1 && + ( + this.buildApiSelector() + ) + } + {!this.state.currentAPI && + ( + No API + ) + } + {this.state.showSelector && this.state.theresPattern && this.state.patternList && this.state.patternList.length > 1 && + ( + this.buildPatternSelector() + ) + } +
- this.setMenuItem('wazuh-dev')}> - - Dev Tools - - - - - - - {this.state.currentAPI && this.state.APIlist && this.state.APIlist.length > 1 && - ( - this.buildApiSelector() - ) - } - {!this.state.currentAPI && - ( - No API - ) - } -     - {this.state.showSelector && this.state.theresPattern && this.state.patternList && this.state.patternList.length > 1 && - ( - this.buildPatternSelector() - ) - } - - - - this.setMenuItem('settings')}> - - - - - -
-
- )} - {this.props.state.wazuhNotReadyYet && + { this.setMenuItem('settings'); this.setState({ menuOpened: false }) }}> + + App settings + +
+
+ {this.state.isManagementPopoverOpen && ( - - + + )} +
+
+ ); - -

- - {this.props.state.wazuhNotReadyYet.includes("Restarting") && - ( - -

-     -

- - ) - } - {this.props.state.wazuhNotReadyYet === "Wazuh could not be recovered." && - ( - - location.reload()} className="WzNotReadyButton" > - Reload - - + const logotype_url = chrome.addBasePath('/plugins/wazuh/img/logotype.svg'); + const mainButton = ( + ); - ) - } - - - ) - } - - + const container = document.getElementsByClassName('euiBreadcrumbs'); + return ( + ReactDOM.createPortal( + + {this.state.showMenu && ( + + this.setState({ menuOpened: false })} + anchorPosition="downLeft"> + + {menu} + + + + {this.props.state.wazuhNotReadyYet && + ( + + + +

+ + {this.props.state.wazuhNotReadyYet.includes("Restarting") && + ( + +

   

+ + ) + } + {this.props.state.wazuhNotReadyYet === "Wazuh could not be recovered." && + ( + + location.reload()} className="WzNotReadyButton" > + Reload + + + ) + } + + + ) + } + + )} + + , + container[0]) ); } } diff --git a/public/components/wz-menu/wz-menu.less b/public/components/wz-menu/wz-menu.less index 9d74c8e55..c459106d9 100644 --- a/public/components/wz-menu/wz-menu.less +++ b/public/components/wz-menu/wz-menu.less @@ -27,7 +27,6 @@ wz-menu { border-bottom: 1px solid #d3dae6; font-size: 14px; position: relative !important; - height: 50px; } .wz-menu a:focus{ @@ -35,11 +34,35 @@ wz-menu { } .wz-menu-wrapper{ - width: 100%; + margin-top: -16px; + margin-left: -16px; + margin-bottom: -16px; + display: flex; +} + +.wz-menu-left-side{ + width: 200px; + background: #fafbfd; + padding: 16px; + border-right: 1px solid #d3dae6; +} + +.wz-menu-right-side{ + padding: 16px; +} + +.navBarLogo { + width: 100px; + filter: brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(1757%) hue-rotate(186deg) brightness(94%) contrast(101%); + } + +.wz-menu-popover{ position: fixed; - padding-left: 48px; - z-index: 999; - left: 0; + top: 56px !important; + left: 48px !important; + z-index: 8!important; + border-radius: 0px 0px 4px 0px; + max-height: unset!important; } @media only screen and (max-width: 767px){ diff --git a/public/img/logotype.svg b/public/img/logotype.svg new file mode 100644 index 000000000..62598ec0e --- /dev/null +++ b/public/img/logotype.svg @@ -0,0 +1,18 @@ + + + + + wazuh_blue_full copia + + background + + + + Layer 1 + + + + + + + \ No newline at end of file diff --git a/public/less/common.less b/public/less/common.less index ad1871132..a4c25d5d9 100644 --- a/public/less/common.less +++ b/public/less/common.less @@ -998,10 +998,6 @@ wz-xml-file-editor { background: #fafbfd; } -.navBarLogo { - width: 125px; -} - .application{ background: #fafbfd; } diff --git a/public/less/layout.less b/public/less/layout.less index dd4aa20c6..e102471ef 100644 --- a/public/less/layout.less +++ b/public/less/layout.less @@ -19,10 +19,6 @@ html { font-size: 14px!important; } -.mainView{ - padding-top: 50px; -} - .h-100{ height: 100%; } diff --git a/public/utils/wz-logo-menu.js b/public/utils/wz-logo-menu.js index 0834bcdde..605b850e5 100644 --- a/public/utils/wz-logo-menu.js +++ b/public/utils/wz-logo-menu.js @@ -1,5 +1,5 @@ /* - * Wazuh app - Replace Wazuh name string by logo + * Wazuh app - Remove Wazuh name * Copyright (C) 2015-2020 Wazuh, Inc. * * This program is free software; you can redistribute it and/or modify @@ -10,18 +10,15 @@ * Find more information about this on the LICENSE file. */ -import chrome from 'ui/chrome'; - -// Adds the logowz-menu +// Remove Kibana Wazuh name and breadcrumb export const changeWazuhNavLogo = () => { const interval = setInterval(() => { const nav = $('nav'); if (nav.length) { clearInterval(interval); } - const url = chrome.addBasePath('/plugins/wazuh/img/logo.svg'); $('.euiHeader > .euiBreadcrumbs > .euiBreadcrumb').html( - `` + `` ); }, 100); }; \ No newline at end of file