From d70461ff99325036f5bc4af6ef76465c4b82bf15 Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Thu, 3 Aug 2023 16:30:09 +0200 Subject: [PATCH 1/6] Implement telemetry for the asset details --- .../asset_details/asset_details.stories.tsx | 10 +- .../asset_details/asset_details.tsx | 45 +++++++-- .../asset_details_embeddable.tsx | 4 +- .../components/alerts_tooltip_content.tsx | 2 +- .../components/expandable_content.tsx | 5 +- .../components/asset_details/constants.ts | 8 ++ .../asset_details/header/header.tsx | 16 +-- .../hooks/use_asset_details_state.ts | 8 +- .../asset_details/hooks/use_tab_switcher.tsx | 1 + .../asset_details/links/link_to_alerts.tsx | 2 +- .../links/link_to_alerts_page.tsx | 10 +- .../links/link_to_apm_services.tsx | 8 +- .../links/link_to_node_details.tsx | 16 +-- .../asset_details/links/tab_to_apm_traces.tsx | 8 +- .../asset_details/links/tab_to_uptime.tsx | 15 ++- .../tabs/anomalies/anomalies.tsx | 4 +- .../asset_details/tabs/logs/logs.tsx | 19 ++-- .../metadata/add_metadata_filter_button.tsx | 4 +- .../tabs/metadata/add_pin_to_row.tsx | 6 +- .../tabs/metadata/metadata.test.tsx | 5 +- .../asset_details/tabs/metadata/metadata.tsx | 10 +- .../asset_details/tabs/metadata/table.tsx | 8 +- .../asset_details/tabs/osquery/osquery.tsx | 8 +- .../asset_details/tabs/overview/alerts.tsx | 24 ++--- .../tabs/overview/kpis/kpi_grid.tsx | 2 +- .../asset_details/tabs/overview/kpis/tile.tsx | 2 +- .../metadata_summary/metadata_header.tsx | 4 +- .../metadata_summary_list.tsx | 2 +- .../tabs/overview/metrics/metric_chart.tsx | 2 +- .../tabs/overview/metrics/metrics_grid.tsx | 6 +- .../asset_details/tabs/overview/overview.tsx | 16 +-- .../tabs/processes/processes.tsx | 10 +- .../tabs/processes/processes_table.tsx | 2 +- .../tabs/processes/summary_table.tsx | 5 +- .../public/components/asset_details/types.ts | 11 +-- .../host_details_flyout/flyout_wrapper.tsx | 9 +- .../services/telemetry/telemetry_client.ts | 5 + .../services/telemetry/telemetry_events.ts | 28 ++++++ .../telemetry/telemetry_service.test.ts | 24 +++++ .../infra/public/services/telemetry/types.ts | 15 ++- .../page_objects/infra_hosts_view.ts | 97 +++++++++---------- 41 files changed, 303 insertions(+), 183 deletions(-) create mode 100644 x-pack/plugins/infra/public/components/asset_details/constants.ts diff --git a/x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx b/x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx index a90fe5764f531..824a4e5f65ef0 100644 --- a/x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/asset_details.stories.tsx @@ -22,42 +22,36 @@ const tabs: Tab[] = [ name: i18n.translate('xpack.infra.nodeDetails.tabs.overview.title', { defaultMessage: 'Overview', }), - 'data-test-subj': 'hostsView-flyout-tabs-overview', }, { id: FlyoutTabIds.LOGS, name: i18n.translate('xpack.infra.nodeDetails.tabs.logs', { defaultMessage: 'Logs', }), - 'data-test-subj': 'hostsView-flyout-tabs-logs', }, { id: FlyoutTabIds.METADATA, name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.metadata', { defaultMessage: 'Metadata', }), - 'data-test-subj': 'hostsView-flyout-tabs-metadata', }, { id: FlyoutTabIds.PROCESSES, name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.processes', { defaultMessage: 'Processes', }), - 'data-test-subj': 'hostsView-flyout-tabs-processes', }, { id: FlyoutTabIds.ANOMALIES, name: i18n.translate('xpack.infra.nodeDetails.tabs.anomalies', { defaultMessage: 'Anomalies', }), - 'data-test-subj': 'hostsView-flyout-tabs-anomalies', }, { id: FlyoutTabIds.LINK_TO_APM, name: i18n.translate('xpack.infra.infra.nodeDetails.apmTabLabel', { defaultMessage: 'APM', }), - 'data-test-subj': 'hostsView-flyout-apm-link', }, ]; @@ -96,7 +90,7 @@ const FlyoutTemplate: Story = (args) => { Open flyout ); @@ -107,7 +101,7 @@ export const Page = PageTemplate.bind({}); export const Flyout = FlyoutTemplate.bind({}); Flyout.args = { renderMode: { - showInFlyout: true, + mode: 'flyout', closeFlyout: () => {}, }, }; diff --git a/x-pack/plugins/infra/public/components/asset_details/asset_details.tsx b/x-pack/plugins/infra/public/components/asset_details/asset_details.tsx index 101a23a4d084e..238a8c5f00250 100644 --- a/x-pack/plugins/infra/public/components/asset_details/asset_details.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/asset_details.tsx @@ -7,11 +7,17 @@ import React from 'react'; import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody } from '@elastic/eui'; +import useEffectOnce from 'react-use/lib/useEffectOnce'; import type { AssetDetailsProps, RenderMode } from './types'; import { Content } from './content/content'; import { Header } from './header/header'; -import { TabSwitcherProvider } from './hooks/use_tab_switcher'; -import { AssetDetailsStateProvider } from './hooks/use_asset_details_state'; +import { TabSwitcherProvider, useTabSwitcherContext } from './hooks/use_tab_switcher'; +import { + AssetDetailsStateProvider, + useAssetDetailsStateContext, +} from './hooks/use_asset_details_state'; +import { useKibanaContextForPlugin } from '../../hooks/use_kibana'; +import { ASSET_DETAILS_FLYOUT_COMPONENT_NAME } from './constants'; interface ContentTemplateProps { header: React.ReactElement; @@ -20,8 +26,27 @@ interface ContentTemplateProps { } const ContentTemplate = ({ header, body, renderMode }: ContentTemplateProps) => { - return renderMode.showInFlyout ? ( - + const { assetType } = useAssetDetailsStateContext(); + const { initialActiveTabId } = useTabSwitcherContext(); + const { + services: { telemetry }, + } = useKibanaContextForPlugin(); + + useEffectOnce(() => { + telemetry.reportAssetDetailsFlyoutViewed({ + componentName: ASSET_DETAILS_FLYOUT_COMPONENT_NAME, + assetType, + tabId: initialActiveTabId, + }); + }); + + return renderMode.mode === 'flyout' ? ( + {header} {body} @@ -34,25 +59,27 @@ const ContentTemplate = ({ header, body, renderMode }: ContentTemplateProps) => }; export const AssetDetails = ({ - node, + asset, dateRange, activeTabId, overrides, onTabsStateChange, tabs = [], links = [], - nodeType = 'host', + assetType = 'host', renderMode = { - showInFlyout: false, + mode: 'page', }, }: AssetDetailsProps) => { return ( - + 0 ? activeTabId ?? tabs[0].id : undefined} > } + header={
} body={} renderMode={renderMode} /> diff --git a/x-pack/plugins/infra/public/components/asset_details/asset_details_embeddable.tsx b/x-pack/plugins/infra/public/components/asset_details/asset_details_embeddable.tsx index 355d8fac0055b..534ba4c2e4265 100644 --- a/x-pack/plugins/infra/public/components/asset_details/asset_details_embeddable.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/asset_details_embeddable.tsx @@ -73,8 +73,8 @@ export class AssetDetailsEmbeddable extends Embeddable { values={{ documentation: ( diff --git a/x-pack/plugins/infra/public/components/asset_details/components/expandable_content.tsx b/x-pack/plugins/infra/public/components/asset_details/components/expandable_content.tsx index 60f487d52d0ea..0cd5e1a53013a 100644 --- a/x-pack/plugins/infra/public/components/asset_details/components/expandable_content.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/components/expandable_content.tsx @@ -31,7 +31,10 @@ export const ExpandableContent = (props: ExpandableContentProps) => { {shouldShowMore && ( <> {' ... '} - + & { const APM_FIELD = 'host.hostname'; export const Header = ({ tabs = [], links = [], compact }: Props) => { - const { node, nodeType, overrides, dateRange: timeRange } = useAssetDetailsStateContext(); + const { asset, assetType, overrides, dateRange: timeRange } = useAssetDetailsStateContext(); const { euiTheme } = useEuiTheme(); const { showTab, activeTabId } = useTabSwitcherContext(); @@ -46,23 +47,23 @@ export const Header = ({ tabs = [], links = [], compact }: Props) => { const tabLinkComponents = { [FlyoutTabIds.LINK_TO_APM]: (tab: Tab) => ( - + ), [FlyoutTabIds.LINK_TO_UPTIME]: (tab: Tab) => ( - + ), }; const topCornerLinkComponents: Record = { nodeDetails: ( ), alertRule: , - apmServices: , + apmServices: , }; const tabEntries = tabs.map(({ name, ...tab }) => { @@ -77,6 +78,7 @@ export const Header = ({ tabs = [], links = [], compact }: Props) => { return ( onTabClick(tab.id)} isSelected={tab.id === activeTabId} @@ -102,7 +104,7 @@ export const Header = ({ tabs = [], links = [], compact }: Props) => { `} > - {compact ?

{node.name}

:

{node.name}

} + {compact ?

{asset.name}

:

{asset.name}

} ; } export function useAssetDetailsState({ state }: UseAssetDetailsStateProps) { - const { node, nodeType, dateRange: rawDateRange, onTabsStateChange, overrides } = state; + const { asset, assetType, dateRange: rawDateRange, onTabsStateChange, overrides } = state; const dateRange = useMemo(() => { const { from = DEFAULT_DATE_RANGE.from, to = DEFAULT_DATE_RANGE.to } = @@ -36,8 +36,8 @@ export function useAssetDetailsState({ state }: UseAssetDetailsStateProps) { const dateRangeTs = toTimestampRange(dateRange); return { - node, - nodeType, + asset, + assetType, dateRange, dateRangeTs, onTabsStateChange, diff --git a/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx b/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx index 60dc710b8613f..6bdcbca214d37 100644 --- a/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/hooks/use_tab_switcher.tsx @@ -33,6 +33,7 @@ export function useTabSwitcher({ initialActiveTabId }: TabSwitcherParams) { }; return { + initialActiveTabId, activeTabId, renderedTabsSet, showTab, diff --git a/x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts.tsx b/x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts.tsx index 47d7075cb60dc..e5a5cc6340abe 100644 --- a/x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts.tsx @@ -15,7 +15,7 @@ export interface LinkToAlertsRuleProps { export const LinkToAlertsRule = ({ onClick }: LinkToAlertsRuleProps) => { return ( { +export const LinkToAlertsPage = ({ assetName, queryField, dateRange }: LinkToAlertsPageProps) => { const { services } = useKibanaContextForPlugin(); const { http } = services; const linkToAlertsPage = http.basePath.prepend( `${ALERTS_PATH}?_a=${encode({ - kuery: `${queryField}:"${nodeName}"`, + kuery: `${queryField}:"${assetName}"`, rangeFrom: dateRange.from, rangeTo: dateRange.to, status: 'all', @@ -35,7 +35,7 @@ export const LinkToAlertsPage = ({ nodeName, queryField, dateRange }: LinkToAler return ( { +export const LinkToApmServices = ({ assetName, apmField }: LinkToApmServicesProps) => { const { services } = useKibanaContextForPlugin(); const { http } = services; const queryString = new URLSearchParams( encode( stringify({ - kuery: `${apmField}:"${nodeName}"`, + kuery: `${apmField}:"${assetName}"`, }) ) ); @@ -34,7 +34,7 @@ export const LinkToApmServices = ({ nodeName, apmField }: LinkToApmServicesProps return ( { - const inventoryModel = findInventoryModel(nodeType); + const inventoryModel = findInventoryModel(assetType); const nodeDetailFrom = currentTimestamp - inventoryModel.metrics.defaultTimeRangeInSeconds * 1000; const nodeDetailMenuItemLinkProps = useLinkProps({ ...getNodeDetailUrl({ - nodeType, - nodeId: nodeName, + nodeType: assetType, + nodeId: assetName, from: nodeDetailFrom, to: currentTimestamp, }), @@ -37,7 +37,7 @@ export const LinkToNodeDetails = ({ return ( { +export const TabToApmTraces = ({ assetName, apmField, name, ...props }: LinkToApmServicesProps) => { const { euiTheme } = useEuiTheme(); const apmTracesMenuItemLinkProps = useLinkProps({ app: 'apm', hash: 'traces', search: { - kuery: `${apmField}:"${nodeName}"`, + kuery: `${apmField}:"${assetName}"`, }, }); @@ -30,7 +30,7 @@ export const TabToApmTraces = ({ nodeName, apmField, name, ...props }: LinkToApm { +export const TabToUptime = ({ + assetType, + assetName, + nodeIp, + name, + ...props +}: LinkToUptimeProps) => { const { share } = useKibanaContextForPlugin().services; const { euiTheme } = useEuiTheme(); return ( share.url.locators .get(uptimeOverviewLocatorID)! - .navigate({ [nodeType]: nodeName, ip: nodeIp }) + .navigate({ [assetType]: assetName, ip: nodeIp }) } > { - const { node, overrides } = useAssetDetailsStateContext(); + const { asset, overrides } = useAssetDetailsStateContext(); const { onClose = () => {} } = overrides?.anomalies ?? {}; - return ; + return ; }; diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx index 087c34551c440..35337032805c1 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/logs/logs.tsx @@ -22,7 +22,7 @@ import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state const TEXT_QUERY_THROTTLE_INTERVAL_MS = 500; export const Logs = () => { - const { node, nodeType, overrides, onTabsStateChange, dateRangeTs } = + const { asset, assetType, overrides, onTabsStateChange, dateRangeTs } = useAssetDetailsStateContext(); const { logView: overrideLogView, query: overrideQuery } = overrides?.logs ?? {}; @@ -49,7 +49,7 @@ export const Logs = () => { const filter = useMemo(() => { const query = [ - `${findInventoryFields(nodeType).id}: "${node.name}"`, + `${findInventoryFields(assetType).id}: "${asset.name}"`, ...(textQueryDebounced !== '' ? [textQueryDebounced] : []), ].join(' and '); @@ -57,7 +57,7 @@ export const Logs = () => { language: 'kuery', query, }; - }, [nodeType, node.name, textQueryDebounced]); + }, [assetType, asset.name, textQueryDebounced]); const onQueryChange = useCallback((e: React.ChangeEvent) => { setTextQuery(e.target.value); @@ -70,13 +70,20 @@ export const Logs = () => { const logsUrl = useMemo(() => { return locators.nodeLogsLocator.getRedirectUrl({ - nodeType, - nodeId: node.name, + nodeType: assetType, + nodeId: asset.name, time: startTimestamp, filter: textQueryDebounced, logView, }); - }, [locators.nodeLogsLocator, node.name, nodeType, startTimestamp, textQueryDebounced, logView]); + }, [ + locators.nodeLogsLocator, + asset.name, + assetType, + startTimestamp, + textQueryDebounced, + logView, + ]); return ( diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_metadata_filter_button.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_metadata_filter_button.tsx index 31d978235be32..a2d04b1c36184 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_metadata_filter_button.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_metadata_filter_button.tsx @@ -75,7 +75,7 @@ export const AddMetadataFilterButton = ({ item }: AddMetadataFilterButtonProps) color="text" iconType="filter" display="base" - data-test-subj="hostsView-flyout-metadata-remove-filter" + data-test-subj="infraAssetDetailsMetadataRemoveFilterButton" aria-label={i18n.translate('xpack.infra.metadataEmbeddable.filterAriaLabel', { defaultMessage: 'Filter', })} @@ -102,7 +102,7 @@ export const AddMetadataFilterButton = ({ item }: AddMetadataFilterButtonProps) color="primary" size="s" iconType="filter" - data-test-subj="hostsView-flyout-metadata-add-filter" + data-test-subj="infraAssetDetailsMetadataAddFilterButton" aria-label={i18n.translate('xpack.infra.metadataEmbeddable.AddFilterAriaLabel', { defaultMessage: 'Add Filter', })} diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx index a1e7c3f106497..1e5e31b887911 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/add_pin_to_row.tsx @@ -47,8 +47,8 @@ export const AddMetadataPinToRow = ({ size="s" color="primary" iconType="pinFilled" - data-test-subj="infraMetadataEmbeddableRemovePin" - aria-label={i18n.translate('xpack.infra.metadataEmbeddable.pinAriaLabel', { + data-test-subj="infraAssetDetailsMetadataRemovePin" + aria-label={i18n.translate('xpack.infra.metadata.pinAriaLabel', { defaultMessage: 'Pinned field', })} onClick={handleRemovePin} @@ -65,7 +65,7 @@ export const AddMetadataPinToRow = ({ color="primary" size="s" iconType="pin" - data-test-subj="infraMetadataEmbeddableAddPin" + data-test-subj="infraAssetDetailsMetadataAddPin" aria-label={PIN_FIELD} onClick={handleAddPin} /> diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx index eeff58d30d1e7..dac8f47971ff8 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx @@ -7,7 +7,6 @@ import React from 'react'; import { Metadata } from './metadata'; - import { useMetadata } from '../../hooks/use_metadata'; import { useSourceContext } from '../../../../containers/metrics_source'; import { render } from '@testing-library/react'; @@ -27,8 +26,8 @@ const renderHostMetadata = () => from: '2023-04-09T11:07:49Z', to: '2023-04-09T11:23:49Z', }, - nodeType: 'host', - node: { + assetType: 'host', + asset: { id: 'host-1', name: 'host-1', }, diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx index 23a3e5f193409..3af67ac97d32d 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx @@ -24,26 +24,26 @@ export interface MetadataSearchUrlState { } export interface MetadataProps { + assetName: string; + assetType: InventoryItemType; dateRange: TimeRange; - nodeName: string; - nodeType: InventoryItemType; showActionsColumn?: boolean; search?: string; onSearchChange?: (query: string) => void; } export const Metadata = () => { - const { node, nodeType, overrides, dateRangeTs, onTabsStateChange } = + const { asset, assetType, overrides, dateRangeTs, onTabsStateChange } = useAssetDetailsStateContext(); const { query, showActionsColumn = false } = overrides?.metadata ?? {}; - const inventoryModel = findInventoryModel(nodeType); + const inventoryModel = findInventoryModel(assetType); const { sourceId } = useSourceContext(); const { loading: metadataLoading, error: fetchMetadataError, metadata, - } = useMetadata(node.name, nodeType, inventoryModel.requiredMetrics, sourceId, dateRangeTs); + } = useMetadata(asset.name, assetType, inventoryModel.requiredMetrics, sourceId, dateRangeTs); const fields = useMemo(() => getAllFields(metadata), [metadata]); diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/table.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/table.tsx index 5fe888c26e8bf..8355713d14d97 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/table.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/table.tsx @@ -141,7 +141,7 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn const searchBar: EuiSearchBarProps = { onChange: searchBarOnChange, box: { - 'data-test-subj': 'infraHostMetadataSearchBarInput', + 'data-test-subj': 'infraAssetDetailsMetadataSearchBarInput', incremental: true, schema: true, placeholder: SEARCH_PLACEHOLDER, @@ -171,7 +171,7 @@ export const Table = ({ loading, rows, onSearchChange, search, showActionsColumn return ( {LOADING} +
{LOADING}
) : ( -
{NO_METADATA_FOUND}
+
{NO_METADATA_FOUND}
) } /> diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/osquery/osquery.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/osquery/osquery.tsx index 06640540af16d..b18a2f802e085 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/osquery/osquery.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/osquery/osquery.tsx @@ -14,12 +14,12 @@ import { useMetadata } from '../../hooks/use_metadata'; import { useAssetDetailsStateContext } from '../../hooks/use_asset_details_state'; export const Osquery = () => { - const { node, nodeType, dateRangeTs } = useAssetDetailsStateContext(); - const inventoryModel = findInventoryModel(nodeType); + const { asset, assetType, dateRangeTs } = useAssetDetailsStateContext(); + const inventoryModel = findInventoryModel(assetType); const { sourceId } = useSourceContext(); const { loading, metadata } = useMetadata( - node.name, - nodeType, + asset.name, + assetType, inventoryModel.requiredMetrics, sourceId, dateRangeTs diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx index 87ebaae1f5f20..2edac4abbbdda 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx @@ -25,12 +25,12 @@ import { useBoolean } from '../../../../hooks/use_boolean'; import { ALERT_STATUS_ALL } from '../../../../common/alerts/constants'; export const AlertsSummaryContent = ({ - nodeName, - nodeType, + assetName, + assetType, dateRange, }: { - nodeName: string; - nodeType: InventoryItemType; + assetName: string; + assetType: InventoryItemType; dateRange: TimeRange; }) => { const [isAlertFlyoutVisible, { toggle: toggleAlertFlyout }] = useBoolean(false); @@ -39,10 +39,10 @@ export const AlertsSummaryContent = ({ () => createAlertsEsQuery({ dateRange, - hostNodeNames: [nodeName], + hostNodeNames: [assetName], status: ALERT_STATUS_ALL, }), - [nodeName, dateRange] + [assetName, dateRange] ); return ( @@ -56,8 +56,8 @@ export const AlertsSummaryContent = ({ @@ -65,8 +65,8 @@ export const AlertsSummaryContent = ({ @@ -112,7 +112,7 @@ const AlertsSectionTitle = () => { return ( - +
{ diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx index b86201a29098c..42b646d6d5792 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/kpi_grid.tsx @@ -12,7 +12,7 @@ import { KPI_CHARTS } from '../../../../../common/visualizations/lens/dashboards export const KPIGrid = React.memo(({ nodeName, dataView, timeRange: dateRange }: TileProps) => { return ( <> - + {KPI_CHARTS.map((chartProp, index) => ( diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx index 9907b81d64fc0..af1d1c7fe7c4e 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx @@ -100,7 +100,7 @@ export const Tile = ({ anchorClassName="eui-fullWidth" > { @@ -72,7 +72,7 @@ export const MetadataHeader = ({ metadataValue }: MetadataSummaryProps) => { values={{ documentation: ( diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx index 1aedec3f05037..ee7210dd2d8de 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx @@ -78,7 +78,7 @@ export const MetadataSummaryList = ({ metadata, metadataLoading }: MetadataSumma ) : ( - + {CHARTS_IN_ORDER.map(({ dataViewType, ...chartProp }, index) => ( { - const { node, nodeType, overrides, dateRange } = useAssetDetailsStateContext(); + const { asset, assetType, overrides, dateRange } = useAssetDetailsStateContext(); const { logsDataView, metricsDataView } = overrides?.overview ?? {}; - const inventoryModel = findInventoryModel(nodeType); + const inventoryModel = findInventoryModel(assetType); const { sourceId } = useSourceContext(); const { loading: metadataLoading, error: fetchMetadataError, metadata, } = useMetadata( - node.name, - nodeType, + asset.name, + assetType, inventoryModel.requiredMetrics, sourceId, toTimestampRange(dateRange) @@ -41,7 +41,7 @@ export const Overview = () => { return ( - + {fetchMetadataError ? ( @@ -59,7 +59,7 @@ export const Overview = () => { values={{ reload: ( window.location.reload()} > {i18n.translate('xpack.infra.assetDetailsEmbeddable.overview.errorAction', { @@ -76,7 +76,7 @@ export const Overview = () => { - + @@ -84,7 +84,7 @@ export const Overview = () => { timeRange={dateRange} logsDataView={logsDataView} metricsDataView={metricsDataView} - nodeName={node.name} + nodeName={asset.name} /> diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx index b91c96c3c948e..7bb8e96276fd8 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/processes.tsx @@ -35,7 +35,7 @@ const options = Object.entries(STATE_NAMES).map(([value, view]: [string, string] })); export const Processes = () => { - const { node, nodeType, overrides, dateRangeTs, onTabsStateChange } = + const { asset, assetType, overrides, dateRangeTs, onTabsStateChange } = useAssetDetailsStateContext(); const { query: overrideQuery } = overrides?.processes ?? {}; @@ -52,9 +52,9 @@ export const Processes = () => { }); const hostTerm = useMemo(() => { - const field = getFieldByType(nodeType) ?? nodeType; - return { [field]: node.name }; - }, [node.name, nodeType]); + const field = getFieldByType(assetType) ?? assetType; + return { [field]: asset.name }; + }, [asset.name, assetType]); const { loading, @@ -159,7 +159,7 @@ export const Processes = () => { } actions={ - + {columns.map((column) => ( diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/summary_table.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/summary_table.tsx index 57814aa7bacc2..928f48307eee7 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/processes/summary_table.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/processes/summary_table.tsx @@ -59,7 +59,10 @@ export const SummaryTable = ({ processSummary, isLoading }: Props) => { {Object.entries(processCount).map(([field, value]) => ( - + {columnTitles[field as keyof SummaryRecord]} {value === -1 ? : value} diff --git a/x-pack/plugins/infra/public/components/asset_details/types.ts b/x-pack/plugins/infra/public/components/asset_details/types.ts index ebd3c8823b8ca..cbf66d66f0a27 100644 --- a/x-pack/plugins/infra/public/components/asset_details/types.ts +++ b/x-pack/plugins/infra/public/components/asset_details/types.ts @@ -13,7 +13,7 @@ import type { InventoryItemType } from '../../../common/inventory_models/types'; interface Metadata { ip?: string | null; } -export type Node = Metadata & { +export type Asset = Metadata & { id: string; name: string; }; @@ -60,11 +60,11 @@ export interface TabState { export interface FlyoutProps { closeFlyout: () => void; - showInFlyout: true; + mode: 'flyout'; } export interface FullPageProps { - showInFlyout: false; + mode: 'page'; } export type RenderMode = FlyoutProps | FullPageProps; @@ -72,14 +72,13 @@ export type RenderMode = FlyoutProps | FullPageProps; export interface Tab { id: FlyoutTabIds; name: string; - 'data-test-subj': string; } export type LinkOptions = 'alertRule' | 'nodeDetails' | 'apmServices'; export interface AssetDetailsProps { - node: Node; - nodeType: InventoryItemType; + asset: Asset; + assetType: InventoryItemType; dateRange: TimeRange; tabs: Tab[]; activeTabId?: TabIds; diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx index a1d8542130c14..884e0dd389cd3 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/flyout_wrapper.tsx @@ -7,7 +7,6 @@ import React from 'react'; import useAsync from 'react-use/lib/useAsync'; -import type { InventoryItemType } from '../../../../../../common/inventory_models/types'; import { useUnifiedSearchContext } from '../../hooks/use_unified_search'; import type { HostNodeRow } from '../../hooks/use_hosts_table'; import { HostFlyout, useHostFlyoutUrlState } from '../../hooks/use_host_flyout_url_state'; @@ -21,8 +20,6 @@ export interface Props { closeFlyout: () => void; } -const NODE_TYPE = 'host' as InventoryItemType; - export const FlyoutWrapper = ({ node, closeFlyout }: Props) => { const { searchCriteria } = useUnifiedSearchContext(); const { dataView } = useMetricsDataViewContext(); @@ -39,8 +36,8 @@ export const FlyoutWrapper = ({ node, closeFlyout }: Props) => { return ( { tabs={orderedFlyoutTabs} links={['apmServices', 'nodeDetails']} renderMode={{ - showInFlyout: true, + mode: 'flyout', closeFlyout, }} /> diff --git a/x-pack/plugins/infra/public/services/telemetry/telemetry_client.ts b/x-pack/plugins/infra/public/services/telemetry/telemetry_client.ts index 56eb8d1af2c77..9107157c9835d 100644 --- a/x-pack/plugins/infra/public/services/telemetry/telemetry_client.ts +++ b/x-pack/plugins/infra/public/services/telemetry/telemetry_client.ts @@ -7,6 +7,7 @@ import { AnalyticsServiceSetup } from '@kbn/core-analytics-server'; import { + AssetDetailsFlyoutViewedParams, HostEntryClickedParams, HostFlyoutFilterActionParams, HostsViewQueryHostsCountRetrievedParams, @@ -60,4 +61,8 @@ export class TelemetryClient implements ITelemetryClient { params ); } + + public reportAssetDetailsFlyoutViewed = (params: AssetDetailsFlyoutViewedParams) => { + this.analytics.reportEvent(InfraTelemetryEventTypes.ASSET_DETAILS_FLYOUT_VIEWED, params); + }; } diff --git a/x-pack/plugins/infra/public/services/telemetry/telemetry_events.ts b/x-pack/plugins/infra/public/services/telemetry/telemetry_events.ts index 4d55baf61674b..56cce313ec219 100644 --- a/x-pack/plugins/infra/public/services/telemetry/telemetry_events.ts +++ b/x-pack/plugins/infra/public/services/telemetry/telemetry_events.ts @@ -112,7 +112,35 @@ const hostViewTotalHostCountRetrieved: InfraTelemetryEvent = { }, }; +const assetDetailsFlyoutViewed: InfraTelemetryEvent = { + eventType: InfraTelemetryEventTypes.ASSET_DETAILS_FLYOUT_VIEWED, + schema: { + componentName: { + type: 'keyword', + _meta: { + description: 'Hostname for the clicked host.', + optional: false, + }, + }, + assetType: { + type: 'keyword', + _meta: { + description: 'Cloud provider for the clicked host.', + optional: false, + }, + }, + tabId: { + type: 'keyword', + _meta: { + description: 'Cloud provider for the clicked host.', + optional: true, + }, + }, + }, +}; + export const infraTelemetryEvents = [ + assetDetailsFlyoutViewed, hostsViewQuerySubmittedEvent, hostsEntryClickedEvent, hostFlyoutRemoveFilter, diff --git a/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts b/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts index 6e2030a3fdaf3..aae02f17e5b8e 100644 --- a/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts +++ b/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts @@ -183,4 +183,28 @@ describe('TelemetryService', () => { ); }); }); + + describe('#reportAssetDetailsFlyoutViewed', () => { + it('should report asset details viewed with properties', async () => { + const setupParams = getSetupParams(); + service.setup(setupParams); + const telemetry = service.start(); + + telemetry.reportAssetDetailsFlyoutViewed({ + componentName: 'infraAssetDetailsFlyout', + assetType: 'host', + tabId: 'overview', + }); + + expect(setupParams.analytics.reportEvent).toHaveBeenCalledTimes(1); + expect(setupParams.analytics.reportEvent).toHaveBeenCalledWith( + InfraTelemetryEventTypes.HOSTS_VIEW_QUERY_SUBMITTED, + { + componentName: 'infraAssetDetailsFlyout', + assetType: 'host', + tabId: 'overview', + } + ); + }); + }); }); diff --git a/x-pack/plugins/infra/public/services/telemetry/types.ts b/x-pack/plugins/infra/public/services/telemetry/types.ts index 0ccd6c0633b4a..2ecf8115eaa58 100644 --- a/x-pack/plugins/infra/public/services/telemetry/types.ts +++ b/x-pack/plugins/infra/public/services/telemetry/types.ts @@ -18,6 +18,7 @@ export enum InfraTelemetryEventTypes { HOST_FLYOUT_FILTER_REMOVED = 'Host Flyout Filter Removed', HOST_FLYOUT_FILTER_ADDED = 'Host Flyout Filter Added', HOST_VIEW_TOTAL_HOST_COUNT_RETRIEVED = 'Host View Total Host Count Retrieved', + ASSET_DETAILS_FLYOUT_VIEWED = 'Asset Details Flyout Viewed', } export interface HostsViewQuerySubmittedParams { @@ -41,11 +42,18 @@ export interface HostsViewQueryHostsCountRetrievedParams { total: number; } +export interface AssetDetailsFlyoutViewedParams { + assetType: string; + componentName: string; + tabId?: string; +} + export type InfraTelemetryEventParams = | HostsViewQuerySubmittedParams | HostEntryClickedParams | HostFlyoutFilterActionParams - | HostsViewQueryHostsCountRetrievedParams; + | HostsViewQueryHostsCountRetrievedParams + | AssetDetailsFlyoutViewedParams; export interface ITelemetryClient { reportHostEntryClicked(params: HostEntryClickedParams): void; @@ -53,6 +61,7 @@ export interface ITelemetryClient { reportHostFlyoutFilterAdded(params: HostFlyoutFilterActionParams): void; reportHostsViewTotalHostCountRetrieved(params: HostsViewQueryHostsCountRetrievedParams): void; reportHostsViewQuerySubmitted(params: HostsViewQuerySubmittedParams): void; + reportAssetDetailsFlyoutViewed(params: AssetDetailsFlyoutViewedParams): void; } export type InfraTelemetryEvent = @@ -75,4 +84,8 @@ export type InfraTelemetryEvent = | { eventType: InfraTelemetryEventTypes.HOST_VIEW_TOTAL_HOST_COUNT_RETRIEVED; schema: RootSchema; + } + | { + eventType: InfraTelemetryEventTypes.ASSET_DETAILS_FLYOUT_VIEWED; + schema: RootSchema; }; diff --git a/x-pack/test/functional/page_objects/infra_hosts_view.ts b/x-pack/test/functional/page_objects/infra_hosts_view.ts index b56b57843cd3b..428b4c5594a02 100644 --- a/x-pack/test/functional/page_objects/infra_hosts_view.ts +++ b/x-pack/test/functional/page_objects/infra_hosts_view.ts @@ -12,14 +12,6 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { const testSubjects = getService('testSubjects'); return { - async clickTryHostViewLink() { - return await testSubjects.click('inventory-hostsView-link'); - }, - - async clickTryHostViewBadge() { - return await testSubjects.click('inventory-hostsView-link-badge'); - }, - async clickTableOpenFlyoutButton() { return testSubjects.click('hostsView-flyout-button'); }, @@ -40,32 +32,47 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return testSubjects.click('euiFlyoutCloseButton'); }, + async getBetaBadgeExists() { + return testSubjects.exists('infra-beta-badge'); + }, + + // Inventory UI + async clickTryHostViewLink() { + return await testSubjects.click('inventory-hostsView-link'); + }, + + async clickTryHostViewBadge() { + return await testSubjects.click('inventory-hostsView-link-badge'); + }, + + // Asset Details Flyout + async clickOverviewFlyoutTab() { - return testSubjects.click('hostsView-flyout-tabs-overview'); + return testSubjects.click('infraAssetDetailsOverviewTab'); }, async clickMetadataFlyoutTab() { - return testSubjects.click('hostsView-flyout-tabs-metadata'); + return testSubjects.click('infraAssetDetailsMetadataTab'); }, - async clickOverviewLinkToAlerts() { - return testSubjects.click('assetDetails-flyout-alerts-link'); + async clickProcessesFlyoutTab() { + return testSubjects.click('infraAssetDetailsProcessesTab'); }, - async clickOverviewOpenAlertsFlyout() { - return testSubjects.click('infraNodeContextPopoverCreateInventoryRuleButton'); + async clickLogsFlyoutTab() { + return testSubjects.click('infraAssetDetailsMetadataShowAllButton'); }, - async clickProcessesFlyoutTab() { - return testSubjects.click('hostsView-flyout-tabs-processes'); + async clickOverviewLinkToAlerts() { + return testSubjects.click('infraAssetDetailsAlertsShowAllButton'); }, - async clickShowAllMetadataOverviewTab() { - return testSubjects.click('infraMetadataSummaryShowAllMetadataButton'); + async clickOverviewOpenAlertsFlyout() { + return testSubjects.click('infraAssetDetailsCreateAlertsRuleButton'); }, - async clickLogsFlyoutTab() { - return testSubjects.click('hostsView-flyout-tabs-logs'); + async clickShowAllMetadataOverviewTab() { + return testSubjects.click('infraAssetDetailsMetadataShowAllButton'); }, async clickProcessesTableExpandButton() { @@ -73,28 +80,26 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { }, async clickFlyoutApmServicesLink() { - return testSubjects.click('hostsView-flyout-apm-services-link'); + return testSubjects.click('infraAssetDetailsViewAPMServicesButton'); }, async clickAddMetadataPin() { - return testSubjects.click('infraMetadataEmbeddableAddPin'); + return testSubjects.click('infraAssetDetailsMetadataAddPin'); }, async clickRemoveMetadataPin() { - return testSubjects.click('infraMetadataEmbeddableRemovePin'); + return testSubjects.click('infraAssetDetailsMetadataRemovePin'); }, async clickAddMetadataFilter() { - return testSubjects.click('hostsView-flyout-metadata-add-filter'); + return testSubjects.click('infraAssetDetailsMetadataAddFilter'); }, async clickRemoveMetadataFilter() { - return testSubjects.click('hostsView-flyout-metadata-remove-filter'); + return testSubjects.click('infraAssetDetailsMetadataRemoveFilter'); }, - async getBetaBadgeExists() { - return testSubjects.exists('infra-beta-badge'); - }, + // Splash screen async getHostsLandingPageDisabled() { const container = await testSubjects.find('hostView-no-enable-access'); @@ -203,16 +208,16 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { return div.getAttribute('title'); }, - // Flyout Tabs + // Asset Details Flyout Tabs async getAssetDetailsKPITileValue(type: string) { - const container = await testSubjects.find('assetDetailsKPIGrid'); + const container = await testSubjects.find('infraAssetDetailsKPIGrid'); const element = await container.findByTestSubject(`assetDetailsKPI-${type}`); const div = await element.findByClassName('echMetricText__value'); return div.getAttribute('title'); }, overviewAlertsTitleExist() { - return testSubjects.exists('assetDetailsAlertsTitle'); + return testSubjects.exists('nfraAssetDetailsAlertsTitle'); }, async getActiveAlertsCountText() { @@ -228,26 +233,16 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { }, async getAssetDetailsMetricsCharts() { - const container = await testSubjects.find('assetDetailsMetricsChartGrid'); - return container.findAllByCssSelector('[data-test-subj*="assetDetailsMetricsChart"]'); - }, - - getMetadataTab() { - return testSubjects.find('hostsView-flyout-tabs-metadata'); + const container = await testSubjects.find('infraAssetDetailsMetricsChartGrid'); + return container.findAllByCssSelector('[data-test-subj*="infraAssetDetailsMetricsChart"]'); }, metadataTableExist() { - return testSubjects.exists('infraMetadataTable'); - }, - - async getMetadataTabName() { - const tabElement = await this.getMetadataTab(); - const tabTitle = await tabElement.findByClassName('euiTab__content'); - return tabTitle.getVisibleText(); + return testSubjects.exists('infraAssetDetailsMetadataTable'); }, async getRemovePinExist() { - return testSubjects.exists('infraMetadataEmbeddableRemovePin'); + return testSubjects.exists('infraAssetDetailsMetadataRemovePin'); }, async getAppliedFilter() { @@ -258,21 +253,25 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) { }, async getRemoveFilterExist() { - return testSubjects.exists('hostsView-flyout-metadata-remove-filter'); + return testSubjects.exists('infraAssetDetailsMetadataRemoveFilter'); }, async getProcessesTabContentTitle(index: number) { - const processesListElements = await testSubjects.findAll('infraProcessesSummaryTableItem'); + const processesListElements = await testSubjects.findAll( + 'infraAssetDetailsProcessesSummaryTableItem' + ); return processesListElements[index].findByCssSelector('dt'); }, async getProcessesTabContentTotalValue() { - const processesListElements = await testSubjects.findAll('infraProcessesSummaryTableItem'); + const processesListElements = await testSubjects.findAll( + 'infraAssetDetailsProcessesSummaryTableItem' + ); return processesListElements[0].findByCssSelector('dd'); }, getProcessesTable() { - return testSubjects.find('infraProcessesTable'); + return testSubjects.find('infraAssetDetailsProcessesTable'); }, async getProcessesTableBody() { From 48b947cb0d7d65c45ebb6bd99334578b44a1a580 Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Thu, 3 Aug 2023 16:58:41 +0200 Subject: [PATCH 2/6] Fix tests --- .../tabs/overview/metrics/metric_chart.tsx | 2 +- .../test/functional/page_objects/infra_hosts_view.ts | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx index 2ee2e6b78c551..c5deb50406b87 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metric_chart.tsx @@ -76,7 +76,7 @@ export const MetricChart = ({ min-height: calc(${MIN_HEIGHT}px + ${euiTheme.size.l}); position: relative; `} - data-test-subj={`assetDetailsMetricsChart${id}`} + data-test-subj={`infraAssetDetailsMetricsChart${id}`} > {error ? ( Date: Fri, 4 Aug 2023 09:41:12 +0200 Subject: [PATCH 3/6] Fix build --- .../__stories__/context/fixtures/asset_details_state.ts | 4 ++-- .../metrics/hosts/components/host_details_flyout/tabs.ts | 6 ------ .../public/services/telemetry/telemetry_client.mock.ts | 1 + .../public/services/telemetry/telemetry_service.test.ts | 2 +- 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_state.ts b/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_state.ts index edcd1d0627d3d..4e88dc368ca0a 100644 --- a/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_state.ts +++ b/x-pack/plugins/infra/public/components/asset_details/__stories__/context/fixtures/asset_details_state.ts @@ -9,7 +9,7 @@ import type { DataViewField, DataView } from '@kbn/data-views-plugin/common'; import { UseAssetDetailsStateProps } from '../../../hooks/use_asset_details_state'; export const assetDetailsState: UseAssetDetailsStateProps['state'] = { - node: { + asset: { name: 'host1', id: 'host1-macOS', ip: '192.168.0.1', @@ -29,7 +29,7 @@ export const assetDetailsState: UseAssetDetailsStateProps['state'] = { showActionsColumn: true, }, }, - nodeType: 'host', + assetType: 'host', dateRange: { from: '2023-04-09T11:07:49Z', to: '2023-04-09T11:23:49Z', diff --git a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts index 4445e5fba924a..7d354d19bed12 100644 --- a/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts +++ b/x-pack/plugins/infra/public/pages/metrics/hosts/components/host_details_flyout/tabs.ts @@ -14,41 +14,35 @@ export const orderedFlyoutTabs: Tab[] = [ name: i18n.translate('xpack.infra.nodeDetails.tabs.overview.title', { defaultMessage: 'Overview', }), - 'data-test-subj': 'hostsView-flyout-tabs-overview', }, { id: FlyoutTabIds.METADATA, name: i18n.translate('xpack.infra.nodeDetails.tabs.metadata.title', { defaultMessage: 'Metadata', }), - 'data-test-subj': 'hostsView-flyout-tabs-metadata', }, { id: FlyoutTabIds.PROCESSES, name: i18n.translate('xpack.infra.metrics.nodeDetails.tabs.processes', { defaultMessage: 'Processes', }), - 'data-test-subj': 'hostsView-flyout-tabs-processes', }, { id: FlyoutTabIds.LOGS, name: i18n.translate('xpack.infra.nodeDetails.tabs.logs.title', { defaultMessage: 'Logs', }), - 'data-test-subj': 'hostsView-flyout-tabs-logs', }, { id: FlyoutTabIds.ANOMALIES, name: i18n.translate('xpack.infra.nodeDetails.tabs.anomalies', { defaultMessage: 'Anomalies', }), - 'data-test-subj': 'hostsView-flyout-tabs-anomalies', }, { id: FlyoutTabIds.OSQUERY, name: i18n.translate('xpack.infra.nodeDetails.tabs.osquery', { defaultMessage: 'Osquery', }), - 'data-test-subj': 'hostsView-flyout-tabs-Osquery', }, ]; diff --git a/x-pack/plugins/infra/public/services/telemetry/telemetry_client.mock.ts b/x-pack/plugins/infra/public/services/telemetry/telemetry_client.mock.ts index 3f913bd8d5611..604fdcc272493 100644 --- a/x-pack/plugins/infra/public/services/telemetry/telemetry_client.mock.ts +++ b/x-pack/plugins/infra/public/services/telemetry/telemetry_client.mock.ts @@ -13,4 +13,5 @@ export const createTelemetryClientMock = (): jest.Mocked => ({ reportHostFlyoutFilterRemoved: jest.fn(), reportHostFlyoutFilterAdded: jest.fn(), reportHostsViewTotalHostCountRetrieved: jest.fn(), + reportAssetDetailsFlyoutViewed: jest.fn(), }); diff --git a/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts b/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts index aae02f17e5b8e..b3c4b02468ca6 100644 --- a/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts +++ b/x-pack/plugins/infra/public/services/telemetry/telemetry_service.test.ts @@ -198,7 +198,7 @@ describe('TelemetryService', () => { expect(setupParams.analytics.reportEvent).toHaveBeenCalledTimes(1); expect(setupParams.analytics.reportEvent).toHaveBeenCalledWith( - InfraTelemetryEventTypes.HOSTS_VIEW_QUERY_SUBMITTED, + InfraTelemetryEventTypes.ASSET_DETAILS_FLYOUT_VIEWED, { componentName: 'infraAssetDetailsFlyout', assetType: 'host', From 3f3669062fcffe0468e02f81b5d06d87b3ee2564 Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Fri, 4 Aug 2023 10:38:02 +0200 Subject: [PATCH 4/6] Fix metadata.tsx unit test --- .../tabs/metadata/metadata.test.tsx | 14 +++++++------- .../asset_details/tabs/metadata/metadata.tsx | 2 +- .../dev_docs/reference/metricbeat.yarn.yml | 17 ++++++++++++++--- 3 files changed, 22 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx index dac8f47971ff8..9f8a04ef64e6c 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.test.tsx @@ -68,30 +68,30 @@ describe('Single Host Metadata (Hosts View)', () => { mockUseMetadata({ error: 'Internal server error' }); const result = renderHostMetadata(); - expect(result.queryByTestId('infraMetadataErrorCallout')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataErrorCallout')).toBeInTheDocument(); }); it('should show an no data message if fetching the metadata returns an empty array', async () => { mockUseMetadata({ metadata: [] }); const result = renderHostMetadata(); - expect(result.queryByTestId('infraHostMetadataSearchBarInput')).toBeInTheDocument(); - expect(result.queryByTestId('infraHostMetadataNoData')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataSearchBarInput')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataNoData')).toBeInTheDocument(); }); it('should show the metadata table if metadata is returned', async () => { mockUseMetadata({ metadata: [{ name: 'host.os.name', value: 'Ubuntu' }] }); const result = renderHostMetadata(); - expect(result.queryByTestId('infraHostMetadataSearchBarInput')).toBeInTheDocument(); - expect(result.queryByTestId('infraMetadataTable')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataSearchBarInput')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataTable')).toBeInTheDocument(); }); it('should return loading text if loading', async () => { mockUseMetadata({ loading: true }); const result = renderHostMetadata(); - expect(result.queryByTestId('infraHostMetadataSearchBarInput')).toBeInTheDocument(); - expect(result.queryByTestId('infraHostMetadataLoading')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataSearchBarInput')).toBeInTheDocument(); + expect(result.queryByTestId('infraAssetDetailsMetadataLoading')).toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx index 3af67ac97d32d..4a759e5718d13 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/metadata/metadata.tsx @@ -64,7 +64,7 @@ export const Metadata = () => { })} color="danger" iconType="error" - data-test-subj="infraMetadataErrorCallout" + data-test-subj="infraAssetDetailsMetadataErrorCallout" > Date: Mon, 7 Aug 2023 16:27:06 +0200 Subject: [PATCH 5/6] Adjust KPIs data-test-subj --- .../components/asset_details/tabs/overview/kpis/tile.tsx | 4 ++-- x-pack/test/functional/page_objects/infra_hosts_view.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx index af1d1c7fe7c4e..b8861708859e6 100644 --- a/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx +++ b/x-pack/plugins/infra/public/components/asset_details/tabs/overview/kpis/tile.tsx @@ -71,7 +71,7 @@ export const Tile = ({ {error ? ( Date: Thu, 10 Aug 2023 13:32:37 +0200 Subject: [PATCH 6/6] revert metricbeat.yarn.yml changes --- .../dev_docs/reference/metricbeat.yarn.yml | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/monitoring/dev_docs/reference/metricbeat.yarn.yml b/x-pack/plugins/monitoring/dev_docs/reference/metricbeat.yarn.yml index 5ca892d61e787..abccff300a0b3 100644 --- a/x-pack/plugins/monitoring/dev_docs/reference/metricbeat.yarn.yml +++ b/x-pack/plugins/monitoring/dev_docs/reference/metricbeat.yarn.yml @@ -4,17 +4,6 @@ http.enabled: true http.host: "0.0.0.0" metricbeat.modules: - - module: system - - module: nginx - metricsets: - - stubstatus - period: 10s - - # Nginx hosts - hosts: ["http://127.0.0.1:8080"] - - # Path to server status. Default nginx_status - server_status_path: "nginx_status" - module: elasticsearch xpack.enabled: true period: 10s @@ -27,7 +16,7 @@ metricbeat.modules: xpack.enabled: true basepath: "/ftw" period: 10s - hosts: ["host.docker.internal:5601"] + hosts: [ "host.docker.internal:5601" ] username: "elastic" password: "changeme" @@ -47,6 +36,6 @@ metricbeat.modules: - "host.docker.internal:9600" output.elasticsearch: - hosts: ["host.docker.internal:9200"] + hosts: [ "host.docker.internal:9200" ] username: "elastic" - password: "changeme" + password: "changeme" \ No newline at end of file