[Backport 4.3-7.16] Fixed code editor component height in logs layout…

… (Management and Settings) (#4273) 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 <[email protected]> (cherry picked from commit b7eed0b) Co-authored-by: Maximiliano Ibarra <[email protected]>
wazuh · Jun 17, 2022 · 184bfdb · 184bfdb
1 parent 17f144d
commit 184bfdb
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 56 deletions.
diff --git 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
@@ -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 (
       <EuiPage>
@@ -108,27 +92,22 @@ class SettingsLogs extends Component {
               </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                iconType="refresh"
-                onClick={async () => await this.refresh()}
-              >
+              <EuiButtonEmpty iconType="refresh" onClick={async () => await this.refresh()}>
                 Refresh
               </EuiButtonEmpty>
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiText color="subdued" style={{ paddingBottom: '15px' }}>
             Log file located at {getPluginDataPath('logs/wazuhapp.log')}
           </EuiText>
-          {this.state.refreshingEntries && (
-            <EuiProgress size="xs" color="primary" />
-          )}
+          {this.state.refreshingEntries && <EuiProgress size="xs" color="primary" />}
           {!this.state.refreshingEntries && (
-            <div className='code-block-log-viewer-container'>
+            <div className="code-block-log-viewer-container">
               <EuiCodeBlock
                 fontSize="s"
                 paddingSize="m"
                 color="dark"
-                overflowHeight={this.height}
+                overflowHeight={`calc(100vh - ${this.HEIGHT_WITHOUT_CODE_EDITOR}px)`}
               >
                 {text}
               </EuiCodeBlock>
@@ -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
@@ -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(
             <EuiFlexItem grow={false}>
               <EuiFlexGroup>
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty 
-                    iconType="importAction" 
+                  <EuiButtonEmpty
+                    iconType="importAction"
                     onClick={this.exportFormatted}
-                    isLoading={this.state.generatingCsv}>
+                    isLoading={this.state.generatingCsv}
+                  >
                     Export formatted
                   </EuiButtonEmpty>
                 </EuiFlexItem>
@@ -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}
                 </EuiCodeBlock>