From 6a0d63eb8133bd01e8f5cb73f9782bbe7496db83 Mon Sep 17 00:00:00 2001 From: Guido Modarelli <38738725+guidomodarelli@users.noreply.github.com> Date: Wed, 11 Dec 2024 15:30:45 -0300 Subject: [PATCH] Improve agent details page (#7196) * style(top_packages_table): increase padding size in EuiPanel for improved layout consistency and visual appearance * style(vuls_welcome_panel): align text to the left for better readability in vulnerability panel component * refactor(agents-welcome): update malware detection to vulnerability detection for better alignment with application terminology * feat(ribbon): add condensed prop to IRibbonItem and implement logic for displaying condensed items in the ribbon component * fix(dashboard_panels): adjust height of panel '1' from 12 to 7 for improved layout consistency in dashboard panels * chore(changelog): document changes to agent details page for better readability and layout consistency * fix(vuls_panel): change padding size of EuiPanel from 's' to 'm' for improved layout consistency in the welcome panel * fix(agent_info): update IP address style to set min and max width for improved layout consistency in agent info display * Add euiFlexGroup element to inventory test snapshot * fix(agent_details): refine layout of agent details view for improved readability and consistency [#7193] * feat(wz-text-tooltip): implement text truncation with tooltip for improved text display in component [#7194] * style(ribbon-item): adjust max-width for mobile responsiveness in ribbon-item component [#7200] * style(agent-info): update minWidth and maxWidth for better layout in agent info component [#7201] * style(wz-text-tooltip): add anchorClassName for full width in tooltip component [#7195] * feat(ribbon-item): enhance rendering logic and add render prop for dynamic content * style(wz-ribbon-item): prevent growth of ribbon item for consistent layout [#7202] * style(wz-ribbon-item): set font size and prevent growth for consistent layout across inventory components [#7206] * style(agent-info): remove min-width for agent status to enhance layout consistency [#7207] * style(agent-status): add custom margin for icon tip to improve alignment [#7208] * style(agent-info): modify IP address styling to support IPv6 with adjusted min/max widths [#7209] * style(ribbon): reduce group length in GroupTruncate to enhance display [#7210] * style(agent-info): streamline styling by removing minWidth properties for cleaner display within agent info component [#7211] * style(wz-text-tooltip): enhance text display responsiveness with word-break and white-space adjustments for smaller screens [#7212] * Update lifecycle method from componentDidMount to componentDidUpdate * Increase group truncate length to 30 characters * style(agent-info): make 'Group' value condensed and remove maxWidth for 'Operating system' display * fix(ribbon-item): rename elementStyle to contentStyle for clarity in WzTextWithTooltipIfTruncated component * refactor(wz-text-tooltip): rename buildContent to renderContent for improved readability in WzTextWithTooltipIfTruncated component * refactor(wz-text-tooltip): extract createClone method for cleaner code and improved readability in WzTextWithTooltipIfTruncated component * refactor(ribbon-item): change item.style to contentStyle for improved clarity in WzRibbonItem component * feat(platform): add getPlatformIcon and getOsName functions for improved agent OS representation in the application * feat(agent-info): enhance OS display by integrating platform icon and name in InventoryMetrics and AgentInfo components * refactor(ribbon-item): update WzTextWithTooltipIfTruncated to use contentStyle for cleaner code in ribbon-item component * refactor(ribbon-item): use contentStyle instead of item.style for improved clarity in ribbon-item component rendering * refactor(wz-text-with-tooltip): convert class to functional component with hooks for cleaner state management and rendering logic * refactor(agent-info): add minWidth style to registration and last keep-alive fields for better layout consistency * refactor(agent-status): update tooltip class name for improved styling consistency in status indicators --------- Co-authored-by: Federico Rodriguez --- CHANGELOG.md | 1 + .../__snapshots__/agent-status.test.tsx.snap | 8 +- .../components/agents/agent-status.scss | 3 + .../public/components/agents/agent-status.tsx | 3 +- .../__snapshots__/inventory.test.tsx.snap | 560 ++++++++++-------- .../components/syscollector-metrics.tsx | 8 + .../components/common/platform/index.tsx | 44 ++ .../components/common/ribbon/ribbon-item.scss | 6 + .../components/common/ribbon/ribbon-item.tsx | 84 +-- .../components/common/ribbon/ribbon.scss | 18 + .../components/common/ribbon/ribbon.tsx | 12 +- .../agent-group-truncate/group-truncate.tsx | 82 +-- .../common/welcome/agent-info/agent-info.tsx | 38 +- .../common/welcome/agents-welcome.js | 4 +- .../top_packages_table/top_packages_table.tsx | 2 +- .../vuls_panel/vuls_welcome_panel.tsx | 3 +- .../welcome/dashboard/dashboard_panels.ts | 2 +- .../wz-text-with-tooltip-if-truncated.scss | 12 + .../wz-text-with-tooltip-if-truncated.tsx | 130 ++-- plugins/main/public/styles/common.scss | 2 +- 20 files changed, 569 insertions(+), 453 deletions(-) create mode 100644 plugins/main/public/components/agents/agent-status.scss create mode 100644 plugins/main/public/components/common/platform/index.tsx create mode 100644 plugins/main/public/components/common/ribbon/ribbon.scss create mode 100644 plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 599e239464..b2432582b8 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap b/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap index 281620631e..6e7375e505 100644 --- a/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap +++ b/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap @@ -44,7 +44,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t active
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
( + <> + {getPlatformIcon(value)} + {getOsName(value)} + + ), }, { key: 'cpu', diff --git a/plugins/main/public/components/common/platform/index.tsx b/plugins/main/public/components/common/platform/index.tsx new file mode 100644 index 0000000000..a3b70d9929 --- /dev/null +++ b/plugins/main/public/components/common/platform/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { WAZUH_AGENTS_OS_TYPE } from '../../../../common/constants'; +import { getAgentOSType } from '../../../react-services'; +import { Agent } from '../../endpoints-summary/types'; + +export const getPlatformIcon = (agent?: Agent): React.JSX.Element => { + let icon = ''; + const osType = getAgentOSType(agent); + if (osType === WAZUH_AGENTS_OS_TYPE.DARWIN) { + icon = 'apple'; + } else if ( + [WAZUH_AGENTS_OS_TYPE.WINDOWS, WAZUH_AGENTS_OS_TYPE.LINUX].includes(osType) + ) { + icon = osType; + } + + if (icon) { + return ( + + ); + } + return <>; +}; + +export const getOsName = (agent?: Agent) => { + const { name, version } = agent?.os || {}; + + if (!name && !version) { + return '-'; + } + + if (!version) { + return name; + } + + if (!name) { + return version; + } + + return `${name} ${version}`; +}; diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.scss b/plugins/main/public/components/common/ribbon/ribbon-item.scss index bf543a6a40..ae0e83a0f0 100644 --- a/plugins/main/public/components/common/ribbon/ribbon-item.scss +++ b/plugins/main/public/components/common/ribbon/ribbon-item.scss @@ -2,3 +2,9 @@ font-size: 12px; font-family: sans-serif; } + +@media (max-width: 767px) { + .wz-ribbon-item { + max-width: none !important; + } +} diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx index 29741c8a6b..b3fbb2a5f8 100644 --- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx +++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx @@ -1,13 +1,12 @@ import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; import React from 'react'; -import { WAZUH_AGENTS_OS_TYPE } from '../../../../common/constants'; import { AgentStatus } from '../../agents/agent-status'; import { Agent } from '../../endpoints-summary/types'; import { WzStat } from '../../wz-stat'; import { GroupTruncate } from '../util/agent-group-truncate'; import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated'; import './ribbon-item.scss'; -import { getAgentOSType } from '../../../react-services'; +import { TAgentStatus } from '../../../../common/services/wz_agent_status'; const FONT_SIZE = 12; @@ -23,7 +22,8 @@ export type IRibbonItem