Modify agent overview page (#4516)

* layout structures are modified * change styles to fix window * Fix visual errors * Change structure * Update changelog * Fix Changelog * Update CHANGELOG.md Co-authored-by: Nico Guevara <nicolas.guevara@wazuh.com> Co-authored-by: Nico Guevara <42900763+Tostti@users.noreply.github.com> Co-authored-by: Alex Ruiz Becerra <alejandro.ruiz.becerra@wazuh.com> (cherry picked from commit 309227b)
wazuh · Sep 22, 2022 · 89f1e54 · 89f1e54
1 parent 128640e
commit 89f1e54
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed nested field rendering in security alerts table details [#4428](https://github.com/wazuh/wazuh-kibana-app/pull/4428)
 - Improved Agents Overview performance [#4363](https://github.com/wazuh/wazuh-kibana-app/pull/4363)
 - Fixed a bug where the Wazuh logo was used instead of the custom one [#4539](https://github.com/wazuh/wazuh-kibana-app/pull/4539)
+- Fixed rendering problems of the `Agent Overview` section in low resolutions [#4516](https://github.com/wazuh/wazuh-kibana-app/pull/4516)
 
 ## Wazuh v4.3.8 - Kibana 7.10.2, 7.16.x, 7.17.x - Revision 4309
 

diff --git a/public/components/common/modules/module.scss b/public/components/common/modules/module.scss
@@ -78,8 +78,13 @@
     padding-top: 105px;
 }
 
-.wz-module.wz-module-welcome .wz-module-body{
-    padding-top: 109px !important;
+.wz-module.wz-module-welcome{
+    .wz-module-agent-body{
+        padding-top: 50px !important;
+    }
+    .wz-module-body{
+        padding-top: 109px !important;
+    }
 }
 
 .wz-module.wz-module-showing-agent .wz-module-body{
@@ -111,19 +116,23 @@ discover-app-w .sidebar-container {
         padding-top: 189px !important;
     }
     @media only screen and (max-width: 767px){
-        .wz-module-header-agent h1{    
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
+        .wz-module.wz-module-welcome .wz-module-agent-body{
+            padding-top: 0px !important;
+        }
+        .wz-module-header-agent{
+            height: auto;
+            h1{    
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
         }
-
         .wz-module-body {
             margin-top: -160px;
         }
 
         .wz-module-header-agent-wrapper, .wz-module-header-nav-wrapper{
             position: relative;
-            padding-left: 0px;
         }
 
         .wz-module-header-nav-wrapper{
@@ -137,5 +146,13 @@ discover-app-w .sidebar-container {
         .wz-module-body-agent-info > .euiFlexGroup > .euiFlexItem {
             max-width: unset!important;
         }
+
+        .wz-module-header-agent-title .euiFlexItem{
+            align-items: flex-start!important;    
+        }
+        .wz-agent-empty-item .euiFlexItem{
+            margin-top: 0px!important;
+            margin-bottom:0px!important;
+        }
     }
 }
diff --git a/public/components/common/welcome/agents-welcome.js b/public/components/common/welcome/agents-welcome.js
@@ -267,9 +267,17 @@ class AgentsWelcome extends Component {
               <span style={{ display: 'inline-flex' }}>
                 <EuiTitle size="s">
                   <h1>
-                    <WzTextWithTooltipIfTruncated position='top' elementStyle={{ maxWidth: "150px" }}>
+                    {this.state.widthWindow >= 768?(
+                      <WzTextWithTooltipIfTruncated position='top' elementStyle={{ maxWidth: "150px" }}>
                       {this.props.agent.name}
-                    </WzTextWithTooltipIfTruncated>
+                      </WzTextWithTooltipIfTruncated>
+                    ):
+                    (
+                      <WzTextWithTooltipIfTruncated position='top'>
+                      {this.props.agent.name}
+                      </WzTextWithTooltipIfTruncated>
+                    )
+                    }
                   </h1>
                 </EuiTitle>
               </span>
@@ -308,7 +316,9 @@ class AgentsWelcome extends Component {
                 </EuiPopover>
               </EuiFlexItem>
               }
+              <div className="wz-agent-empty-item">
               <EuiFlexItem></EuiFlexItem>
+              </div>
               <EuiFlexItem grow={false} style={{ marginTop: 7 }}>
                 <EuiButtonEmpty
                   iconType="inspect"
@@ -536,28 +546,25 @@ class AgentsWelcome extends Component {
 
     return (
       <div className="wz-module wz-module-welcome">
-        <div className='wz-module-header-agent-wrapper'>
-          <div className='wz-module-header-agent wz-module-header-agent-main'>
+        <div className='wz-module-header-agent wz-module-header-agent-wrapper'>
+          <div className='wz-module-header-agent-main'>
             {title}
           </div>
         </div>
-        <div>
-          <div className='wz-module-header-nav-wrapper'>
-            <div className='wz-module-header-nav'>
-              <div style={{ margin: '0 16px' }}>
-                <EuiPanel grow paddingSize='s' className="wz-welcome-page-agent-info">
-                  <AgentInfo agent={this.props.agent} isCondensed={false} hideActions={true} {...this.props}></AgentInfo>
-                </EuiPanel>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className='wz-module-body wz-module-agents-padding-responsive'>
+        <div className='wz-module-agent-body wz-module-agents-padding-responsive'>
           <EuiPage>
             <EuiPageBody component="div">
+
+              <div className='wz-module-header-nav'>
+                <div>
+                  <EuiPanel grow paddingSize='s' className="wz-welcome-page-agent-info">
+                    <AgentInfo agent={this.props.agent} isCondensed={false} hideActions={true} {...this.props}></AgentInfo>
+                  </EuiPanel>
+                </div>
+              </div>
               <EuiFlexGroup>
                 <EuiFlexItem />
-                <EuiFlexItem style={{ alignItems: 'flex-end', marginTop: 6, marginBottom: 10 }}> {/* DatePicker */}
+                <EuiFlexItem style={{ alignItems: 'flex-end', marginTop: 10, marginBottom: 10 }}> {/* DatePicker */}
                   <WzDatePicker condensed={true} onTimeChange={() => { }} />
                 </EuiFlexItem>
               </EuiFlexGroup>