[Backport 4.4-1.2-wzd] Modify agent overview page (#4571)

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 <[email protected]> Co-authored-by: Nico Guevara <[email protected]> Co-authored-by: Alex Ruiz Becerra <[email protected]> (cherry picked from commit 309227b) Co-authored-by: Matias Ezequiel Moreno <[email protected]>
wazuh · Sep 22, 2022 · 7baf8d6 · 7baf8d6
1 parent 7e9d05b
commit 7baf8d6
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 25 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed nested fields filtering in dashboards tables and KPIs [#4425](https:/wazuh/wazuh-kibana-app/pull/4425)
 - Fixed nested field rendering in security alerts table details [#4428](https:/wazuh/wazuh-kibana-app/pull/4428)
 - Fixed a bug where the Wazuh logo was used instead of the custom one [#4539](https:/wazuh/wazuh-kibana-app/pull/4539)
+- Fixed rendering problems of the `Agent Overview` section in low resolutions [#4516](https:/wazuh/wazuh-kibana-app/pull/4516)
 
 ## Wazuh v4.3.8 - OpenSearch Dashboards 1.2.0 - 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>