Improve agent details page

CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Changed
 
+- Refined the layout of the agent details view [#7193](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7193)
 - Changed the width of the command column, relocate argvs column and change the width of the rest of the columns in the table processes. [#7195](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7195)
 
 ## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 03

plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AgentStatus component Renders status indicator with the its color and the label in lower case - {"status":"active","color":"#007871","label":"Active","agent":{"status_code":0}} 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
 >
   <span
     class="euiToolTipAnchor"
@@ -11,7 +11,7 @@
       class="euiHealth euiHealth--textSizeS wz-flex"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
       >
         <div
           class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -28,7 +28,7 @@
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
               d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
             />
           </svg>
         </div>
@@ -44,7 +44,7 @@
     active
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-hidden="true"
@@ -59,16 +59,16 @@
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
       />
     </svg>
   </span>
 </div>
 `;
 
 exports[`AgentStatus component Renders status indicator with the its color and the label in lower case - {"status":"disconnected","color":"#BD271E","label":"Disconnected","agent":{"status_code":1}} 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
 >
   <span
     class="euiToolTipAnchor"
@@ -112,7 +112,7 @@
     disconnected
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
@@ -180,7 +180,7 @@
     never connected
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
@@ -248,7 +248,7 @@
     pending
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"

plugins/main/public/components/agents/agent-status.scss

@@ -0,0 +1,3 @@
+.wz-agent-icon-tip {
+  margin-left: 5px;
+}

plugins/main/public/components/agents/agent-status.tsx

@@ -9,6 +9,7 @@ import { EuiIconTip } from '@elastic/eui';
 import { AGENT_STATUS_CODE } from '../../../common/constants';
 import '../../styles/common.scss';
 import { Agent } from '../endpoints-summary/types';
+import './agent-status.scss';
 
 interface AgentStatusProps {
   status: TAgentStatus;
@@ -37,7 +38,7 @@ export const AgentStatus = ({
         tooltip={agentStatusLabelByAgentStatus(status).toLowerCase()}
       />
       <EuiIconTip
-        anchorClassName='wz-margin-left-10'
+        anchorClassName='wz-agent-icon-tip'
         aria-label='Description'
         size='m'
         type='iInCircle'