From 184bfdbe9305fe8cc739243aca1d14297bd34f70 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 17 Jun 2022 13:03:31 +0200 Subject: [PATCH] [Backport 4.3-7.16] Fixed code editor component height in logs layout (Management and Settings) (#4273) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed code editor component height in logs layout (Management and Settings) (#4253) * Fixed management logs layout * Added dynamic offset * Updated CHANGELOG * Fixed offset calculation depends on height screen * Used calc in overflow height in codeblock * Added calc in settings logs * changelog: replaced PR entry Co-authored-by: Antonio David Gutiérrez (cherry picked from commit b7eed0b7c50b6528debde5c37689a46ec48d8cc0) Co-authored-by: Maximiliano Ibarra --- CHANGELOG.md | 1 + .../components/settings/settings-logs/logs.js | 59 ++++++------------- .../components/management/mg-logs/logs.js | 23 +++----- 3 files changed, 27 insertions(+), 56 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c19af8b2a0..c14c9d635a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ All notable changes to the Wazuh app project will be documented in this file. - Removed a logged error that appeared when the `statistics` tasks tried to create an index with the same name, causing the second task to fail on the creation of the index because it already exists [#4235](https://github.com/wazuh/wazuh-kibana-app/pull/4235) - Fixed a UI crash due to a query with syntax errors in `Modules/Security events` [#4237](https://github.com/wazuh/wazuh-kibana-app/pull/4237) - Fixed an error when generating a module report after changing the selected agent [#4240](https://github.com/wazuh/wazuh-kibana-app/pull/4240) +- Fixed a UI problem that required scrolling to see the logs in Management/Logs and Settings/Logs [#4253](https://github.com/wazuh/wazuh-kibana-app/pull/4253) ## Wazuh v4.3.4 - Kibana 7.10.2, 7.16.x, 7.17.x - Revision 4305 diff --git a/public/components/settings/settings-logs/logs.js b/public/components/settings/settings-logs/logs.js index 7a5fad1b12..ff8f219eb5 100644 --- a/public/components/settings/settings-logs/logs.js +++ b/public/components/settings/settings-logs/logs.js @@ -21,7 +21,7 @@ import { EuiButtonEmpty, EuiTitle, EuiText, - EuiProgress + EuiProgress, } from '@elastic/eui'; import { formatUIDate } from '../../../react-services/time-service'; @@ -33,66 +33,50 @@ import { getPluginDataPath } from '../../../../common/plugin'; class SettingsLogs extends Component { constructor(props) { super(props); - this.offset = 275; this.state = { logs: [], - refreshingEntries: false + refreshingEntries: false, }; + this.HEIGHT_WITHOUT_CODE_EDITOR = 325; } - updateHeight = () => { - this.height = window.innerHeight - this.offset; //eslint-disable-line - this.forceUpdate(); - }; - componentDidMount() { store.dispatch(updateSelectedSettingsSection('logs')); this._isMounted = true; this.refresh(); - this.height = window.innerHeight - this.offset; //eslint-disable-line - window.addEventListener('resize', this.updateHeight); //eslint-disable-line } componentWillUnmount() { this._isMounted = false; - window.removeEventListener('resize', this.updateHeight); //eslint-disable-line } async refresh() { this.setState({ - refreshingEntries: true + refreshingEntries: true, }); const logs = await this.props.getLogs(); - this._isMounted && this.setState({ - refreshingEntries: false, - logs - }); + this._isMounted && + this.setState({ + refreshingEntries: false, + logs, + }); } formatDate(date) { - return formatUIDate(date) - .replace('-', '/') - .replace('T', ' ') - .replace('Z', '') - .split('.')[0]; + return formatUIDate(date).replace('-', '/').replace('T', ' ').replace('Z', '').split('.')[0]; } getMessage(log) { const data = log.data || log.message; return typeof data === 'object' ? data.message || JSON.stringify(data) : data.toString(); - } + } render() { let text = ''; - (this.state.logs || []).forEach(x => { + (this.state.logs || []).forEach((x) => { text = text + - (this.formatDate(x.date) + - ' ' + - x.level.toUpperCase() + - ' ' + - this.getMessage(x) + - '\n'); + (this.formatDate(x.date) + ' ' + x.level.toUpperCase() + ' ' + this.getMessage(x) + '\n'); }); return ( @@ -108,10 +92,7 @@ class SettingsLogs extends Component { - await this.refresh()} - > + await this.refresh()}> Refresh @@ -119,16 +100,14 @@ class SettingsLogs extends Component { Log file located at {getPluginDataPath('logs/wazuhapp.log')} - {this.state.refreshingEntries && ( - - )} + {this.state.refreshingEntries && } {!this.state.refreshingEntries && ( -
+
{text} @@ -140,6 +119,4 @@ class SettingsLogs extends Component { } } -export default withErrorBoundary( - SettingsLogs -) +export default withErrorBoundary(SettingsLogs); diff --git a/public/controllers/management/components/management/mg-logs/logs.js b/public/controllers/management/components/management/mg-logs/logs.js index 23c9e0a630..623182f23e 100644 --- a/public/controllers/management/components/management/mg-logs/logs.js +++ b/public/controllers/management/components/management/mg-logs/logs.js @@ -52,7 +52,6 @@ export default compose( class WzLogs extends Component { constructor(props) { super(props); - this.offset = 350; this.state = { isCluster: false, selectedDaemon: '', @@ -72,17 +71,11 @@ export default compose( realTime: false, }; this.ITEM_STYLE = { width: '300px' }; + this.HEIGHT_WITHOUT_CODE_EDITOR = 400; } - updateHeight = () => { - this.height = window.innerHeight - this.offset; - this.forceUpdate(); - }; - async componentDidMount() { try { - this.height = window.innerHeight - this.offset; - window.addEventListener('resize', this.updateHeight); this.setState({ isLoading: true }); const { nodeList, logsPath, selectedNode } = await this.getLogsPath(); @@ -131,7 +124,6 @@ export default compose( } componentWillUnmount() { - window.removeEventListener('resize', this.updateHeight); clearInterval(this.realTimeInterval); } @@ -383,7 +375,7 @@ export default compose( exportFormatted = async () => { try { - this.setState({generatingCsv: true}) + this.setState({ generatingCsv: true }); this.showToast('success', 'Your download should begin automatically...', 3000); const filters = this.buildFilters(); await exportCsv( @@ -405,7 +397,7 @@ export default compose( }; getErrorOrchestrator().handleError(options); } - this.setState({generatingCsv: false}) + this.setState({ generatingCsv: false }); }; header() { @@ -424,10 +416,11 @@ export default compose( - + isLoading={this.state.generatingCsv} + > Export formatted @@ -528,7 +521,7 @@ export default compose( fontSize="s" paddingSize="m" color="dark" - overflowHeight={this.height} + overflowHeight={`calc(100vh - ${this.HEIGHT_WITHOUT_CODE_EDITOR}px)`} > {this.state.logsList}