From 1e428adc21c50fcb78a754d91eaee7ef5c1320ec Mon Sep 17 00:00:00 2001 From: Irene Blanco Date: Tue, 27 Aug 2024 13:44:54 +0200 Subject: [PATCH] [Infra][Hosts] Display N/A badge for APM hosts without system metrics (#191181) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Closes https://github.com/elastic/kibana/issues/190516 This PR introduces an "N/A" badge for hosts that are returned by the `metrics/infra/host` API with `hasSystemMetrics` set to `false`. This enhancement will help users quickly identify and address issues with APM hosts that are not monitored by the system integration. The badge will provide an explanation of the problem and suggest troubleshooting steps. ![Screen Recording 2024-08-23 at 11 58 29](https://github.com/user-attachments/assets/e4e72ac5-5244-4863-915d-51b14ebf078a) **Automated tests** Upon reviewing the code, I noticed that this screen is covered by functional tests. My initial idea was to add some functional tests to verify the badge display as well as the button and link redirections. However, I found that this is quite complex, as it involves modifying the data used in the tests, and I’m still not very familiar with that process. Given the deadline for this epic, I’ve decided not to include tests in this issue. If we believe they are really necessary, I would need to spend some time understanding how data is managed in our functional testing layer. Any feedback on this would be greatly appreciated. --- .../add_data_troubleshooting_popover.tsx | 111 ++++++++++++++++++ .../hosts/hooks/use_hosts_table.test.ts | 4 +- .../metrics/hosts/hooks/use_hosts_table.tsx | 58 +++++++-- 3 files changed, 158 insertions(+), 15 deletions(-) create mode 100644 x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/table/add_data_troubleshooting_popover.tsx diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/table/add_data_troubleshooting_popover.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/table/add_data_troubleshooting_popover.tsx new file mode 100644 index 0000000000000..419f78a892352 --- /dev/null +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/table/add_data_troubleshooting_popover.tsx @@ -0,0 +1,111 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { + EuiBadge, + EuiButton, + EuiFlexGroup, + EuiFlexItem, + EuiLink, + EuiPopover, + EuiPopoverFooter, + EuiPopoverTitle, + EuiText, +} from '@elastic/eui'; + +import { + ObservabilityOnboardingLocatorParams, + OBSERVABILITY_ONBOARDING_LOCATOR, +} from '@kbn/deeplinks-observability'; +import { i18n } from '@kbn/i18n'; +import { useBoolean } from '@kbn/react-hooks'; + +import { useKibanaContextForPlugin } from '../../../../../hooks/use_kibana'; +import { APM_HOST_TROUBLESHOOTING_LINK } from '../../../../../components/asset_details/constants'; + +const popoverContent = { + title: i18n.translate('xpack.infra.addDataPopover.wantToSeeMorePopoverTitleLabel', { + defaultMessage: 'Want to see more?', + }), + content: i18n.translate('xpack.infra.addDataPopover.understandHostPerformanceByTextLabel', { + defaultMessage: 'Understand host performance by collecting more metrics.', + }), + button: i18n.translate('xpack.infra.addDataPopover.understandHostPerformanceByTextLabel', { + defaultMessage: 'Add data', + }), + link: i18n.translate('xpack.infra.addDataPopover.troubleshootingLinkLabel', { + defaultMessage: 'Troubleshooting', + }), +}; + +const badgeContent = i18n.translate('xpack.infra.addDataPopover.naBadgeLabel', { + defaultMessage: 'N/A', +}); + +export const AddDataTroubleshootingPopover = () => { + const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false); + + const { + services: { share }, + } = useKibanaContextForPlugin(); + const addDataLinkHref = share.url.locators + .get(OBSERVABILITY_ONBOARDING_LOCATOR) + ?.getRedirectUrl({ category: 'logs' }); + + const onButtonClick = () => togglePopover(); + + return ( + + {badgeContent} + + } + isOpen={isPopoverOpen} + closePopover={closePopover} + > + {popoverContent.title} + + {popoverContent.content} + + + + + + {popoverContent.button} + + + + + + {popoverContent.link} + + + + + + + ); +}; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.test.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.test.ts index 965f6acd24c93..a0ebb20184912 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.test.ts +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.test.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { useHostsTable } from './use_hosts_table'; +import { type HostNodeRow, useHostsTable } from './use_hosts_table'; import { renderHook } from '@testing-library/react-hooks'; import { InfraAssetMetricsItem } from '../../../../../common/http_api'; import * as useUnifiedSearchHooks from './use_unified_search'; @@ -158,7 +158,7 @@ describe('useHostTable hook', () => { } as unknown as ReturnType); }); it('it should map the nodes returned from the snapshot api to a format matching eui table items', () => { - const expected = [ + const expected: Array> = [ { name: 'host-0', os: '-', diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx index 4bdb72e625a89..e881950df570c 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/hooks/use_hosts_table.tsx @@ -40,6 +40,7 @@ import { ColumnHeader } from '../components/table/column_header'; import { TABLE_COLUMN_LABEL, TABLE_CONTENT_LABEL } from '../translations'; import { METRICS_TOOLTIP } from '../../../../common/visualizations'; import { buildCombinedAssetFilter } from '../../../../utils/filters/build'; +import { AddDataTroubleshootingPopover } from '../components/table/add_data_troubleshooting_popover'; /** * Columns and items types @@ -64,10 +65,31 @@ export type HostNodeRow = HostMetadata & * Helper functions */ const formatMetric = (type: InfraAssetMetricType, value: number | undefined | null) => { - return value || value === 0 ? createInventoryMetricFormatter({ type })(value) : 'N/A'; + const defaultValue = value ?? 0; + return createInventoryMetricFormatter({ type })(defaultValue); +}; + +const buildMetricCell = ( + value: number | null, + formatType: InfraAssetMetricType, + hasSystemMetrics?: boolean +) => { + if (!hasSystemMetrics && value === null) { + return ; + } + + return formatMetric(formatType, value); }; const buildItemsList = (nodes: InfraAssetMetricsItem[]): HostNodeRow[] => { + nodes.map((node) => { + if (node.name === 'instance') { + node.metrics[0].value = 0; + node.hasSystemMetrics = true; + } + return node; + }); + return nodes.map(({ metrics, metadata, name, alertsCount, hasSystemMetrics }) => { const metadataKeyValue = metadata.reduce( (acc, curr) => ({ @@ -89,7 +111,7 @@ const buildItemsList = (nodes: InfraAssetMetricsItem[]): HostNodeRow[] => { ...metrics.reduce( (acc, curr) => ({ ...acc, - [curr.name]: curr.value ?? 0, + [curr.name]: curr.value, }), {} as HostMetrics ), @@ -104,12 +126,15 @@ const isTitleColumn = (cell: HostNodeRow[keyof HostNodeRow]): cell is HostNodeRo }; const sortValues = (aValue: any, bValue: any, { direction }: Sorting) => { - if (typeof aValue === 'string' && typeof bValue === 'string') { - return direction === 'desc' ? bValue.localeCompare(aValue) : aValue.localeCompare(bValue); + const a = aValue ?? -1; + const b = bValue ?? -1; + + if (typeof a === 'string' && typeof b === 'string') { + return direction === 'desc' ? b.localeCompare(a) : a.localeCompare(b); } - if (isNumber(aValue) && isNumber(bValue)) { - return direction === 'desc' ? bValue - aValue : aValue - bValue; + if (isNumber(a) && isNumber(b)) { + return direction === 'desc' ? b - a : a - b; } return 1; @@ -358,7 +383,8 @@ export const useHostsTable = () => { field: 'cpuV2', sortable: true, 'data-test-subj': 'hostsView-tableRow-cpuUsage', - render: (avg: number) => formatMetric('cpuV2', avg), + render: (avg: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(avg, 'cpuV2', hasSystemMetrics), align: 'right', }, { @@ -373,7 +399,8 @@ export const useHostsTable = () => { field: 'normalizedLoad1m', sortable: true, 'data-test-subj': 'hostsView-tableRow-normalizedLoad1m', - render: (avg: number) => formatMetric('normalizedLoad1m', avg), + render: (avg: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(avg, 'normalizedLoad1m', hasSystemMetrics), align: 'right', }, { @@ -388,7 +415,8 @@ export const useHostsTable = () => { field: 'memory', sortable: true, 'data-test-subj': 'hostsView-tableRow-memoryUsage', - render: (avg: number) => formatMetric('memory', avg), + render: (avg: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(avg, 'memory', hasSystemMetrics), align: 'right', }, { @@ -403,7 +431,8 @@ export const useHostsTable = () => { field: 'memoryFree', sortable: true, 'data-test-subj': 'hostsView-tableRow-memoryFree', - render: (avg: number) => formatMetric('memoryFree', avg), + render: (avg: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(avg, 'memoryFree', hasSystemMetrics), align: 'right', }, { @@ -418,7 +447,8 @@ export const useHostsTable = () => { field: 'diskSpaceUsage', sortable: true, 'data-test-subj': 'hostsView-tableRow-diskSpaceUsage', - render: (max: number) => formatMetric('diskSpaceUsage', max), + render: (max: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(max, 'diskSpaceUsage', hasSystemMetrics), align: 'right', }, { @@ -433,7 +463,8 @@ export const useHostsTable = () => { field: 'rxV2', sortable: true, 'data-test-subj': 'hostsView-tableRow-rx', - render: (avg: number) => formatMetric('rx', avg), + render: (avg: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(avg, 'rx', hasSystemMetrics), align: 'right', }, { @@ -448,7 +479,8 @@ export const useHostsTable = () => { field: 'txV2', sortable: true, 'data-test-subj': 'hostsView-tableRow-tx', - render: (avg: number) => formatMetric('tx', avg), + render: (avg: number, { hasSystemMetrics }: HostNodeRow) => + buildMetricCell(avg, 'tx', hasSystemMetrics), align: 'right', }, ],