From 39c416f08e95cd780edb2393d8255f4781b794db Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 17 Oct 2024 11:56:27 -0300
Subject: [PATCH] Refactor AgentsWelcome component structure and layout

---
 .../common/welcome/agents-welcome.js          | 126 +++++++++---------
 1 file changed, 61 insertions(+), 65 deletions(-)

diff --git a/plugins/main/public/components/common/welcome/agents-welcome.js b/plugins/main/public/components/common/welcome/agents-welcome.js
index 43bdc85ef4..30172d58e2 100644
--- a/plugins/main/public/components/common/welcome/agents-welcome.js
+++ b/plugins/main/public/components/common/welcome/agents-welcome.js
@@ -456,69 +456,66 @@ export const AgentsWelcome = compose(
             <div className='wz-module-header-agent-wrapper'>
               <div className='wz-module-header-agent-main'>{title}</div>
             </div>
-            <div className='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'
+            <EuiPage>
+              <EuiPageBody component='div'>
+                <div className='wz-module-header-nav'>
+                  <EuiPanel
+                    grow
+                    paddingSize='s'
+                    className='wz-welcome-page-agent-info'
+                  >
+                    <AgentInfo
+                      agent={this.props.agent}
+                      isCondensed={false}
+                      hideActions={true}
+                      {...this.props}
+                    ></AgentInfo>
+                  </EuiPanel>
+                </div>
+                <EuiFlexGroup>
+                  <EuiFlexItem />
+                  <EuiFlexItem
+                    style={{
+                      alignItems: 'flex-end',
+                      marginTop: 10,
+                      marginBottom: 10,
+                    }}
+                  >
+                    {' '}
+                    {/* TODO: Replace with SearchBar and replace implementation to get the time range in AgentView component*/}
+                    <WzDatePicker condensed={true} onTimeChange={() => { }} />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                {(this.state.widthWindow < 1150 && (
+                  <Fragment>
+                    <EuiFlexGroup wrap>
+                      <EuiFlexItem
+                        key={'Wazuh-App-Agents-Welcome-MITRE-Top-Tactics'}
                       >
-                        <AgentInfo
-                          agent={this.props.agent}
-                          isCondensed={false}
-                          hideActions={true}
-                          {...this.props}
-                        ></AgentInfo>
-                      </EuiPanel>
-                    </div>
-                  </div>
-                  <EuiFlexGroup>
-                    <EuiFlexItem />
-                    <EuiFlexItem
-                      style={{
-                        alignItems: 'flex-end',
-                        marginTop: 10,
-                        marginBottom: 10,
-                      }}
-                    >
-                      {' '}
-                      {/* TODO: Replace with SearchBar and replace implementation to get the time range in AgentView component*/}
-                      <WzDatePicker condensed={true} onTimeChange={() => {}} />
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                  {(this.state.widthWindow < 1150 && (
-                    <Fragment>
-                      <EuiFlexGroup wrap>
-                        <EuiFlexItem
-                          key={'Wazuh-App-Agents-Welcome-MITRE-Top-Tactics'}
-                        >
-                          {this.renderMitrePanel()}
-                        </EuiFlexItem>
-                        {this.renderCompliancePanel()}
-                      </EuiFlexGroup>
-                      <EuiSpacer size='m' />
-                      <EuiFlexGroup>
-                        <FimEventsTable agent={this.props.agent} />
-                      </EuiFlexGroup>
-                      <EuiSpacer size='m' />
-                      <EuiFlexGroup>
-                        <EuiFlexItem
-                          key={'Wazuh-App-Agents-Welcome-Events-Evolution'}
-                        >
-                          {' '}
-                          {/* Events count evolution */}
-                          {this.renderEventCountVisualization()}
-                        </EuiFlexItem>
-                      </EuiFlexGroup>
-                      <EuiSpacer size='m' />
-                      <EuiFlexGroup>
-                        <EuiFlexItem>{this.renderSCALastScan()}</EuiFlexItem>
-                      </EuiFlexGroup>
-                    </Fragment>
-                  )) || (
+                        {this.renderMitrePanel()}
+                      </EuiFlexItem>
+                      {this.renderCompliancePanel()}
+                    </EuiFlexGroup>
+                    <EuiSpacer size='m' />
+                    <EuiFlexGroup>
+                      <FimEventsTable agent={this.props.agent} />
+                    </EuiFlexGroup>
+                    <EuiSpacer size='m' />
+                    <EuiFlexGroup>
+                      <EuiFlexItem
+                        key={'Wazuh-App-Agents-Welcome-Events-Evolution'}
+                      >
+                        {' '}
+                        {/* Events count evolution */}
+                        {this.renderEventCountVisualization()}
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                    <EuiSpacer size='m' />
+                    <EuiFlexGroup>
+                      <EuiFlexItem>{this.renderSCALastScan()}</EuiFlexItem>
+                    </EuiFlexGroup>
+                  </Fragment>
+                )) || (
                     <Fragment>
                       <EuiFlexGroup>
                         <EuiFlexItem>
@@ -546,9 +543,8 @@ export const AgentsWelcome = compose(
                       </EuiFlexGroup>
                     </Fragment>
                   )}
-                </EuiPageBody>
-              </EuiPage>
-            </div>
+              </EuiPageBody>
+            </EuiPage>
           </div>
         </IntlProvider>
       );