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', }, ],