mirror of
https://github.com/valitydev/wazuh-kibana-app.git
synced 2024-11-06 09:55:18 +00:00
Add wz-menu redesigned
This commit is contained in:
JuanCarlos
parent
40e482b9c8
commit
2af695b210
@ -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 (
|
||||
<span className="small">
|
||||
<EuiButtonEmpty>
|
||||
<EuiToolTip position="bottom" content="Selected index pattern">
|
||||
<EuiIcon type='ip' color="primary" size='m'></EuiIcon>
|
||||
</EuiToolTip>
|
||||
<select className="wz-menu-select" value={this.state.currentSelectedPattern}
|
||||
onChange={this.changePattern} aria-label="Index pattern selector">
|
||||
|
||||
{this.state.patternList.map((item, idx) => {
|
||||
return (
|
||||
<option className="wz-menu-select-option" key={idx} value={item.id}>
|
||||
@ -236,19 +237,18 @@ class WzMenu extends Component {
|
||||
</option>)
|
||||
})}
|
||||
</select>
|
||||
</span>
|
||||
</EuiButtonEmpty>
|
||||
)
|
||||
}
|
||||
|
||||
buildApiSelector() {
|
||||
return (
|
||||
<span className="small">
|
||||
<EuiButtonEmpty>
|
||||
<EuiToolTip position="bottom" content="Selected API">
|
||||
<EuiIcon type='starFilledSpace' color="primary" size='m'></EuiIcon>
|
||||
</EuiToolTip>
|
||||
<select onMouseEnter={async () => this.loadApiList()} className="wz-menu-select" value={this.state.currentAPI}
|
||||
onChange={this.changeAPI} aria-label="API selector">
|
||||
|
||||
{this.state.APIlist.map((item, idx) => {
|
||||
return (
|
||||
<option className="wz-menu-select-option" key={idx} value={item.id}>
|
||||
@ -256,7 +256,7 @@ class WzMenu extends Component {
|
||||
</option>)
|
||||
})}
|
||||
</select>
|
||||
</span>
|
||||
</EuiButtonEmpty>
|
||||
)
|
||||
}
|
||||
|
||||
@ -276,131 +276,148 @@ class WzMenu extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const managementButton = (
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "manager" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
onClick={this.onClickManagementButton.bind(this)}
|
||||
iconType="arrowDown"
|
||||
iconSide="right">
|
||||
<EuiIcon type='managementApp' color='primary' size='m' />Management
|
||||
</EuiButtonEmpty>);
|
||||
const menu = (
|
||||
<div className="wz-menu-wrapper">
|
||||
<div className="wz-menu-left-side">
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "overview" || this.state.currentMenuTab === "health-check" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/overview"
|
||||
onClick={() => { this.setMenuItem('overview'); this.setState({ menuOpened: false }) }} >
|
||||
<EuiIcon type='visualizeApp' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">Overview</span>
|
||||
</EuiButtonEmpty>
|
||||
|
||||
return (
|
||||
<WzReduxProvider>
|
||||
<Fragment>
|
||||
<WzGlobalBreadcrumbWrapper></WzGlobalBreadcrumbWrapper>
|
||||
{this.state.showMenu && (
|
||||
<div>
|
||||
<div className="wz-menu-wrapper">
|
||||
<EuiFlexGroup className="wz-menu" responsive={false} direction="row">
|
||||
<EuiFlexItem >
|
||||
<EuiFlexGroup style={{ marginLeft: "10px", marginTop: "-6px" }}>
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "overview" || this.state.currentMenuTab === "health-check" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/overview"
|
||||
onClick={() => this.setMenuItem('overview')} >
|
||||
<EuiIcon type='visualizeApp' color='primary' size='m' />Overview
|
||||
</EuiButtonEmpty>
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "manager" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
onClick={this.onClickManagementButton.bind(this)}>
|
||||
<EuiIcon type='managementApp' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">Management</span>
|
||||
</EuiButtonEmpty>
|
||||
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "agents-preview" || this.state.currentMenuTab === 'agents' ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/agents-preview"
|
||||
onClick={() => { this.setMenuItem('agents-preview'); this.setState({ menuOpened: false }) }}>
|
||||
<EuiIcon type='watchesApp' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">Agents</span>
|
||||
</EuiButtonEmpty>
|
||||
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "manager" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/manager"
|
||||
onClick={() => this.setMenuItem('manager')}>
|
||||
<EuiIcon type='managementApp' color='primary' size='m' />Management
|
||||
</EuiButtonEmpty>
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "wazuh-dev" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/wazuh-dev"
|
||||
onClick={() => { this.setMenuItem('wazuh-dev'); this.setState({ menuOpened: false }) }}>
|
||||
<EuiIcon type='console' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">Dev Tools</span>
|
||||
</EuiButtonEmpty>
|
||||
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "agents-preview" || this.state.currentMenuTab === 'agents' ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/agents-preview"
|
||||
onClick={() => this.setMenuItem('agents-preview')}>
|
||||
<EuiIcon type='watchesApp' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">Agents</span>
|
||||
</EuiButtonEmpty>
|
||||
<div style={{ marginTop: 65 }}>
|
||||
{this.state.currentAPI && this.state.APIlist && this.state.APIlist.length > 1 &&
|
||||
(
|
||||
this.buildApiSelector()
|
||||
)
|
||||
}
|
||||
{!this.state.currentAPI &&
|
||||
(
|
||||
<span> No API </span>
|
||||
)
|
||||
}
|
||||
{this.state.showSelector && this.state.theresPattern && this.state.patternList && this.state.patternList.length > 1 &&
|
||||
(
|
||||
this.buildPatternSelector()
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button " + (this.state.currentMenuTab === "wazuh-dev" ? "wz-menu-active" : "")}
|
||||
color="text"
|
||||
href="#/wazuh-dev"
|
||||
onClick={() => this.setMenuItem('wazuh-dev')}>
|
||||
<EuiIcon type='console' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">Dev Tools</span>
|
||||
</EuiButtonEmpty>
|
||||
|
||||
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} style={{ paddingTop: "6px", marginRight: "-4px", display: "inline" }}>
|
||||
{this.state.currentAPI && this.state.APIlist && this.state.APIlist.length > 1 &&
|
||||
(
|
||||
this.buildApiSelector()
|
||||
)
|
||||
}
|
||||
{!this.state.currentAPI &&
|
||||
(
|
||||
<span> No API </span>
|
||||
)
|
||||
}
|
||||
|
||||
{this.state.showSelector && this.state.theresPattern && this.state.patternList && this.state.patternList.length > 1 &&
|
||||
(
|
||||
this.buildPatternSelector()
|
||||
)
|
||||
}
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem grow={false} style={{ marginTop: "6px", marginRight: "1px" }}>
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button" + (this.state.currentMenuTab === "settings" ? " wz-menu-active" : "")}
|
||||
href="#/settings"
|
||||
color="text"
|
||||
aria-label="Settings"
|
||||
onClick={() => this.setMenuItem('settings')}>
|
||||
<EuiIcon type='advancedSettingsApp' color='primary' size='m' style={{ marginRight: 0 }} />
|
||||
<span> </span>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{this.props.state.wazuhNotReadyYet &&
|
||||
<EuiButtonEmpty
|
||||
className={"wz-menu-button" + (this.state.currentMenuTab === "settings" ? " wz-menu-active" : "")}
|
||||
href="#/settings"
|
||||
color="text"
|
||||
aria-label="Settings"
|
||||
onClick={() => { this.setMenuItem('settings'); this.setState({ menuOpened: false }) }}>
|
||||
<EuiIcon type='advancedSettingsApp' color='primary' size='m' />
|
||||
<span className="wz-menu-button-title ">App settings</span>
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
<div className="wz-menu-right-side">
|
||||
{this.state.isManagementPopoverOpen &&
|
||||
(
|
||||
<EuiCallOut title={this.props.state.wazuhNotReadyYet} color="warning" style={{ margin: "60px 8px -50px 8px", }}>
|
||||
<EuiFlexGroup responsive={false} direction="row" style={{ maxHeight: "40px", marginTop: "-45px" }}>
|
||||
<Management></Management>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
<EuiFlexItem>
|
||||
<p></p>
|
||||
</EuiFlexItem>
|
||||
{this.props.state.wazuhNotReadyYet.includes("Restarting") &&
|
||||
(
|
||||
<EuiFlexItem grow={false}>
|
||||
<p>
|
||||
<EuiLoadingSpinner size="l" />
|
||||
</p>
|
||||
</EuiFlexItem>
|
||||
)
|
||||
}
|
||||
{this.props.state.wazuhNotReadyYet === "Wazuh could not be recovered." &&
|
||||
(
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty grow={false} onClick={() => location.reload()} className="WzNotReadyButton" >
|
||||
<span> Reload </span>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
const logotype_url = chrome.addBasePath('/plugins/wazuh/img/logotype.svg');
|
||||
const mainButton = (
|
||||
<button onClick={() => this.setState({ menuOpened: !this.state.menuOpened })}>
|
||||
<EuiFlexGroup direction="row" style={{ paddingTop: 5 }}>
|
||||
<EuiFlexItem grow={false} style={{ marginRight: 0 }}>
|
||||
<img src={logotype_url} className="navBarLogo" alt=""></img>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} style={{ margin: '12px 6px' }}>
|
||||
{this.state.menuOpened && (
|
||||
<EuiIcon color='subdued' type='arrowUp' size='l' />
|
||||
)}
|
||||
{!this.state.menuOpened && (
|
||||
<EuiIcon color='subdued' type='arrowDown' size='l' />
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</button>);
|
||||
|
||||
)
|
||||
}
|
||||
</EuiFlexGroup>
|
||||
</EuiCallOut>
|
||||
)
|
||||
}
|
||||
</Fragment>
|
||||
</WzReduxProvider>
|
||||
const container = document.getElementsByClassName('euiBreadcrumbs');
|
||||
return (
|
||||
ReactDOM.createPortal(
|
||||
<WzReduxProvider>
|
||||
{this.state.showMenu && (
|
||||
<Fragment>
|
||||
<EuiPopover
|
||||
panelClassName='wz-menu-popover'
|
||||
button={mainButton}
|
||||
isOpen={this.state.menuOpened}
|
||||
closePopover={() => this.setState({ menuOpened: false })}
|
||||
anchorPosition="downLeft">
|
||||
<Fragment>
|
||||
{menu}
|
||||
</Fragment>
|
||||
</EuiPopover>
|
||||
<WzGlobalBreadcrumbWrapper></WzGlobalBreadcrumbWrapper>
|
||||
{this.props.state.wazuhNotReadyYet &&
|
||||
(
|
||||
<EuiCallOut title={this.props.state.wazuhNotReadyYet} color="warning" style={{ margin: "60px 8px -50px 8px", }}>
|
||||
<EuiFlexGroup responsive={false} direction="row" style={{ maxHeight: "40px", marginTop: "-45px" }}>
|
||||
<EuiFlexItem>
|
||||
<p></p>
|
||||
</EuiFlexItem>
|
||||
{this.props.state.wazuhNotReadyYet.includes("Restarting") &&
|
||||
(
|
||||
<EuiFlexItem grow={false}>
|
||||
<p> <EuiLoadingSpinner size="l" /> </p>
|
||||
</EuiFlexItem>
|
||||
)
|
||||
}
|
||||
{this.props.state.wazuhNotReadyYet === "Wazuh could not be recovered." &&
|
||||
(
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButtonEmpty grow={false} onClick={() => location.reload()} className="WzNotReadyButton" >
|
||||
<span> Reload </span>
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
)
|
||||
}
|
||||
</EuiFlexGroup>
|
||||
</EuiCallOut>
|
||||
)
|
||||
}
|
||||
</Fragment>
|
||||
)}
|
||||
</WzReduxProvider>
|
||||
,
|
||||
container[0])
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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){
|
||||
|
||||
18
public/img/logotype.svg
Normal file
18
public/img/logotype.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg width="305" height="72.67" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<style>.a{fill:#00a9e5;}</style>
|
||||
</defs>
|
||||
<title>wazuh_blue_full copia</title>
|
||||
<g>
|
||||
<title>background</title>
|
||||
<rect fill="none" id="canvas_background" height="74.67" width="307" y="-1" x="-1"/>
|
||||
</g>
|
||||
<g>
|
||||
<title>Layer 1</title>
|
||||
<path fill="#C97A86" id="svg_1" d="m74.93,12.5l-19.63,37l-6.62,-13.29l-9.63,0l-7.29,13.29l-19.5,-37l-10.08,0l24.94,46.19a4.92,4.92 0 0 0 6.83,2a5,5 0 0 0 1.85,-2l7.5,-14.12l7.42,14.12a5.13,5.13 0 0 0 1.86,2a4.68,4.68 0 0 0 2.46,0.66a4.83,4.83 0 0 0 2.48,-0.66a5,5 0 0 0 1.9,-2l24.92,-46.19" class="a"/>
|
||||
<path id="svg_2" d="m105.47,12.5a3.83,3.83 0 0 0 -2.36,-0.73a4,4 0 0 0 -2.38,0.73a6.25,6.25 0 0 0 -1.73,2l-27.72,46.18l9.62,0l7.38,-12.48l28.91,0l7.62,12.48l10.19,0l-27.84,-46.18a6.57,6.57 0 0 0 -1.69,-2zm-13.36,29.2l10.68,-18.06l10.74,18l-21.42,0.06z" class="a"/>
|
||||
<path id="svg_3" d="m184.48,16.73a3.76,3.76 0 0 0 -1.48,-3.23a5.37,5.37 0 0 0 -3.26,-1l-41.74,0l0,8l32.8,0l-31.74,32a5,5 0 0 0 -1.71,3.54a3.77,3.77 0 0 0 1.42,3.19a5.28,5.28 0 0 0 3.31,1.08l42.2,0l0,-8.02l-33.28,0l31.74,-32a5,5 0 0 0 1.74,-3.56z" class="a"/>
|
||||
<path id="svg_4" d="m236.42,39.39a19.11,19.11 0 0 1 -0.91,6.24a9.25,9.25 0 0 1 -2.91,4.24a13,13 0 0 1 -5.4,2.42a45.77,45.77 0 0 1 -16.72,0a13,13 0 0 1 -5.4,-2.42a9.27,9.27 0 0 1 -2.92,-4.24a19.15,19.15 0 0 1 -0.89,-6.24l0,-26.89l-8.7,0l0,26.89a29,29 0 0 0 1.43,9.71a15.92,15.92 0 0 0 4.57,6.87a19.74,19.74 0 0 0 8.06,4a46.12,46.12 0 0 0 11.9,1.33a46.56,46.56 0 0 0 12,-1.33a19.82,19.82 0 0 0 8.05,-4a16,16 0 0 0 4.58,-6.87a29.26,29.26 0 0 0 1.46,-9.71l0,-26.89l-8.22,0l0.02,26.89z" class="a"/>
|
||||
<polygon id="svg_5" points="291.05999755859375,12.47000028192997 291.05999755859375,32.419998183846474 260.69000244140625,32.419998183846474 260.69000244140625,12.47000028192997 252.260009765625,12.47000028192997 252.260009765625,60.87999726831913 260.69000244140625,60.87999726831913 260.69000244140625,39.919998183846474 291.05999755859375,39.919998183846474 291.05999755859375,60.87999726831913 299.4800109863281,60.87999726831913 299.4800109863281,12.47000028192997 291.05999755859375,12.47000028192997 " class="a"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -998,10 +998,6 @@ wz-xml-file-editor {
|
||||
background: #fafbfd;
|
||||
}
|
||||
|
||||
.navBarLogo {
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
.application{
|
||||
background: #fafbfd;
|
||||
}
|
||||
|
||||
@ -19,10 +19,6 @@ html {
|
||||
font-size: 14px!important;
|
||||
}
|
||||
|
||||
.mainView{
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.h-100{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -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(
|
||||
`<img src="${url}" class="navBarLogo" alt="">`
|
||||
``
|
||||
);
|
||||
}, 100);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user