Skip to content

[APM] Add alert and SLO badges to the service map embeddable #266360

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlejandroFrndz merged 12 commits into from
May 5, 2026
Merged

[APM] Add alert and SLO badges to the service map embeddable #266360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
8ec2fcb
Enable badges in embeddable
AlejandroFrndz Apr 29, 2026
fa9d12d
Fix badge popping
AlejandroFrndz Apr 29, 2026
4080145
useServiceMapBadges tests
AlejandroFrndz Apr 29, 2026
81dba59
useSloOverviewFlyout tests
AlejandroFrndz Apr 29, 2026
3d1949e
Self-review updates
AlejandroFrndz Apr 29, 2026
06f9401
fix apm services table tests
AlejandroFrndz Apr 29, 2026
252a61a
Merge branch 'main' into 265994-enable-badges-service-map-embeddable
elasticmachine May 4, 2026
bd72796
Fix test mocks
AlejandroFrndz May 4, 2026
c4c901b
fix unstable history object
AlejandroFrndz May 4, 2026
42907dc
DRY history path
AlejandroFrndz May 4, 2026
b28d41e
Skip history.replace on first render
AlejandroFrndz May 4, 2026
fc1139e
useServiceMapBadges() fetch status not initiated test
AlejandroFrndz May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...gins/apm/public/components/app/service_inventory/service_list/apm_services_table.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ jest.mock('../../../alerting/ui_components/alerting_flyout', () => ({
}));

jest.mock('../../../shared/slo_overview_flyout', () => ({
...jest.requireActual('../../../shared/slo_overview_flyout'),
SloOverviewFlyout: ({ serviceName }: { serviceName: string }) => (
<div data-test-subj="sloOverviewFlyout">SLO Overview Flyout for {serviceName}</div>
),
Expand Down
16 changes: 3 additions & 13 deletions ...y/plugins/apm/public/components/app/service_inventory/service_list/apm_services_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import {
APM_SLO_INDICATOR_TYPES,
type ApmIndicatorType,
} from '../../../../../common/slo_indicator_types';
import { SloOverviewFlyout } from '../../../shared/slo_overview_flyout';
import { SloOverviewFlyout, useSloOverviewFlyout } from '../../../shared/slo_overview_flyout';
import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
import { useApmIndexSettingsContext } from '../../../../context/apm_index_settings/use_apm_index_settings_context';
import { listMetricColumnPreset } from '../../../../utils/column_presets';
Expand Down Expand Up @@ -440,18 +440,8 @@ export function ApmServicesTable({
});
}, []);

const [sloOverviewFlyout, setSloOverviewFlyout] = useState<{
serviceName: string;
agentName?: AgentName;
} | null>(null);

const openSloOverviewFlyout = useCallback((serviceName: string, agentName?: AgentName) => {
setSloOverviewFlyout({ serviceName, agentName });
}, []);

const closeSloOverviewFlyout = useCallback(() => {
setSloOverviewFlyout(null);
}, []);
const { sloOverviewFlyout, openSloOverviewFlyout, closeSloOverviewFlyout } =
useSloOverviewFlyout();

const CreateSloFlyout =
sloFlyoutState.isOpen && sloFlyoutState.indicatorType && sloFlyoutState.serviceName
Expand Down
64 changes: 13 additions & 51 deletions x-pack/solutions/observability/plugins/apm/public/components/app/service_map/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,8 @@

import { usePerformanceContext } from '@kbn/ebt-tools';
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, useEuiTheme } from '@elastic/eui';
import type { AgentName } from '@kbn/elastic-agent-utils';
import type { ReactNode } from 'react';
import React, { useLayoutEffect, useMemo, useRef, useState, useCallback } from 'react';
import React, { useLayoutEffect, useRef, useState, useCallback } from 'react';
import useWindowSize from 'react-use/lib/useWindowSize';
import { cx } from '@emotion/css';
import {
Expand All @@ -19,11 +18,7 @@ import {
import { SERVICE_MAP_WRAPPER_FULL_SCREEN_CLASS, SERVICE_MAP_FULL_SCREEN_CLASS } from './constants';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { isActivePlatinumLicense } from '../../../../common/license_check';
import {
invalidLicenseMessage,
isServiceNodeData,
SERVICE_MAP_TIMEOUT_ERROR,
} from '../../../../common/service_map';
import { invalidLicenseMessage, SERVICE_MAP_TIMEOUT_ERROR } from '../../../../common/service_map';
import { FETCH_STATUS } from '../../../hooks/use_fetcher';
import { useLicenseContext } from '../../../context/license/use_license_context';
import { LicensePrompt } from '../../shared/license_prompt';
Expand All @@ -36,8 +31,7 @@ import { useApmRouter } from '../../../hooks/use_apm_router';
import type { Environment } from '../../../../common/environment_rt';
import { useTimeRange } from '../../../hooks/use_time_range';
import { DisabledPrompt } from './disabled_prompt';
import { SloOverviewFlyout } from '../../shared/slo_overview_flyout';
import { mergeServiceMapNodesWithBadges } from './merge_service_map_nodes_with_badges';
import { SloOverviewFlyout, useSloOverviewFlyout } from '../../shared/slo_overview_flyout';
import { useServiceMap } from './use_service_map';
import { useServiceMapBadges } from './use_service_map_badges';
import { ServiceMapGraph } from './graph';
Expand Down Expand Up @@ -168,18 +162,8 @@ export function ServiceMap({
});
}, []);

const [sloOverviewFlyout, setSloOverviewFlyout] = useState<{
serviceName: string;
agentName?: AgentName;
} | null>(null);

const openSloOverviewFlyout = useCallback((name: string, agent?: AgentName) => {
setSloOverviewFlyout({ serviceName: name, agentName: agent });
}, []);

const closeSloOverviewFlyout = useCallback(() => {
setSloOverviewFlyout(null);
}, []);
const { sloOverviewFlyout, openSloOverviewFlyout, closeSloOverviewFlyout } =
useSloOverviewFlyout();

useLayoutEffect(() => {
if (isFullscreen) {
Expand All @@ -191,39 +175,15 @@ export function ServiceMap({
}
}, [isFullscreen, bodyClassesToToggle]);

const serviceNamesForBadges = useMemo(() => {
const names = new Set<string>();
for (const node of data.nodes) {
if (isServiceNodeData(node.data)) {
names.add(node.data.label);
}
}
return [...names].sort();
}, [data.nodes]);

const badgesFetchEnabled =
!!license &&
isActivePlatinumLicense(license) &&
config.serviceMapEnabled &&
status === FETCH_STATUS.SUCCESS &&
serviceNamesForBadges.length > 0;

const { data: badgesData, status: badgesStatus } = useServiceMapBadges({
serviceNames: serviceNamesForBadges,
const { nodes: nodesForGraph, status: badgesStatus } = useServiceMapBadges({
environment,
start,
end,
kuery,
enabled: badgesFetchEnabled ?? false,
nodes: data.nodes,
nodesStatus: status,
});

const nodesForGraph = useMemo(() => {
if (badgesStatus !== FETCH_STATUS.SUCCESS || !badgesData) {
return data.nodes;
}
return mergeServiceMapNodesWithBadges(data.nodes, badgesData);
}, [badgesData, badgesStatus, data.nodes]);

if (!license) {
return null;
}
Expand Down Expand Up @@ -280,6 +240,8 @@ export function ServiceMap({
});
}

const isLoading = status === FETCH_STATUS.LOADING || badgesStatus === FETCH_STATUS.LOADING;

return (
<ServiceMapSloFlyoutProvider onSloBadgeClick={openSloOverviewFlyout}>
<div
Expand All @@ -299,11 +261,11 @@ export function ServiceMap({
}}
ref={ref}
>
{status === FETCH_STATUS.LOADING && <LoadingSpinner />}
{isLoading && <LoadingSpinner />}
<ServiceMapGraph
height={mapHeight}
nodes={nodesForGraph}
edges={data.edges}
nodes={isLoading ? [] : nodesForGraph}
edges={isLoading ? [] : data.edges}
serviceName={serviceName}
highlightedServiceName={serviceName}
environment={environment}
Expand Down
Loading
Loading