Add agent visualization and KPI to overview

CHANGELOG.md

@@ -24,7 +24,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Change the display order of tabs in all modules. [#6067](https:/wazuh/wazuh-dashboard-plugins/pull/6067)
 - Upgraded the `axios` dependency to `1.6.1` [#6114](https:/wazuh/wazuh-dashboard-plugins/pull/6114)
 - Changed the api configuration title in the Server APIs section. [#6373](https:/wazuh/wazuh-dashboard-plugins/pull/6373)
-- Changed overview home top KPIs. [#6379](https:/wazuh/wazuh-dashboard-plugins/pull/6379) [#6408](https:/wazuh/wazuh-dashboard-plugins/pull/6408)
+- Changed overview home top KPIs. [#6379](https:/wazuh/wazuh-dashboard-plugins/pull/6379) [#6408](https:/wazuh/wazuh-dashboard-plugins/pull/6408) [#6569](https:/wazuh/wazuh-dashboard-plugins/pull/6569)
 - Updated the PDF report year number. [#6492](https:/wazuh/wazuh-dashboard-plugins/pull/6492)
 
 ### Fixed

plugins/main/common/constants.ts

@@ -338,6 +338,15 @@ export const PLUGIN_PLATFORM_REQUEST_HEADERS = {
 export const PLUGIN_APP_NAME = 'Wazuh dashboard';
 
 // UI
+export const UI_COLOR_STATUS = {
+ success: '#007871',
+ danger: '#BD271E',
+ warning: '#FEC514',
+ disabled: '#646A77',
+ info: '#6092C0',
+ default: '#000000',
+} as const;
+
 export const API_NAME_AGENT_STATUS = {
  ACTIVE: 'active',
  DISCONNECTED: 'disconnected',
@@ -346,11 +355,11 @@ export const API_NAME_AGENT_STATUS = {
 } as const;
 
 export const UI_COLOR_AGENT_STATUS = {
- [API_NAME_AGENT_STATUS.ACTIVE]: '#007871',
- [API_NAME_AGENT_STATUS.DISCONNECTED]: '#BD271E',
- [API_NAME_AGENT_STATUS.PENDING]: '#FEC514',
- [API_NAME_AGENT_STATUS.NEVER_CONNECTED]: '#646A77',
- default: '#000000',
+ [API_NAME_AGENT_STATUS.ACTIVE]: UI_COLOR_STATUS.success,
+ [API_NAME_AGENT_STATUS.DISCONNECTED]: UI_COLOR_STATUS.danger,
+ [API_NAME_AGENT_STATUS.PENDING]: UI_COLOR_STATUS.warning,
+ [API_NAME_AGENT_STATUS.NEVER_CONNECTED]: UI_COLOR_STATUS.disabled,
+ default: UI_COLOR_STATUS.default,
 } as const;
 
 export const UI_LABEL_NAME_AGENT_STATUS = {

plugins/main/public/components/common/welcome/overview-welcome.js

@@ -113,7 +113,7 @@ export const OverviewWelcome = compose(
  <EuiFlexGroup gutterSize='l'>
  <EuiFlexItem>
  {this.props.agentsCountTotal === 0 && this.addAgent()}
- <EuiFlexGroup>
+ <EuiFlexGroup gutterSize='none'>
  <EuiFlexGrid columns={2}>
  {appCategories.map(({ label, apps }) => (
  <EuiFlexItem key={label}>
@@ -129,7 +129,8 @@ export const OverviewWelcome = compose(
  <EuiFlexGrid columns={2}>
  {apps.map(app => (
  <EuiFlexItem key={app.id}>
- <RedirectAppLinks className='flex-redirect-app-links'
+ <RedirectAppLinks
+ className='flex-redirect-app-links'
  application={getCore().application}
  >
  <EuiCard