From ea0935f7d4ac1a1a0f4d93c071938116d1c0aab8 Mon Sep 17 00:00:00 2001 From: Miriam <31922082+MiriamAparicio@users.noreply.github.com> Date: Tue, 20 Jun 2023 14:59:52 +0100 Subject: [PATCH] Add SLO create callout to service overview, transactions page and transactions details (#159958) We split the work for https://github.com/elastic/kibana/issues/157484 into this PR and another one that will add the links to create SLOs from the Alerts and Rules dropdown in APM. Also, the design for the callout was simplified and we will iterate again in 8.10 ### What was done Added callout with links to create SLOs in service overview, transactions overview and transaction details. https://github.com/elastic/kibana/assets/31922082/00f55477-d1ae-4e42-bf7d-2f0af5a5307b --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- .../components/app/service_overview/index.tsx | 21 +++- .../app/transaction_details/index.tsx | 18 +++ .../app/transaction_overview/index.tsx | 17 +++ .../components/shared/slo_callout/index.tsx | 114 ++++++++++++++++++ x-pack/plugins/apm/tsconfig.json | 1 + 5 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/apm/public/components/shared/slo_callout/index.tsx diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx index 40580ef700146..10ad7b947fe9b 100644 --- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx @@ -14,6 +14,7 @@ import { EuiFlexItem, EuiLink, EuiPanel, + EuiSpacer, } from '@elastic/eui'; import { isRumAgentName, @@ -36,6 +37,8 @@ import { ServiceOverviewDependenciesTable } from './service_overview_dependencie import { ServiceOverviewErrorsTable } from './service_overview_errors_table'; import { ServiceOverviewInstancesChartAndTable } from './service_overview_instances_chart_and_table'; import { ServiceOverviewThroughputChart } from './service_overview_throughput_chart'; +import { SloCallout } from '../../shared/slo_callout'; +import { useLocalStorage } from '../../../hooks/use_local_storage'; /** * The height a chart should be if it's next to a table with 5 rows and a title. * Add the height of the pagination row. @@ -49,7 +52,7 @@ export function ServiceOverview() { const { query, - query: { kuery, environment, rangeFrom, rangeTo }, + query: { kuery, environment, rangeFrom, rangeTo, transactionType }, } = useApmParams('/services/{serviceName}/overview'); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); @@ -76,6 +79,11 @@ export function ServiceOverview() { ? 'column' : 'row'; + const [sloCalloutDismissed, setSloCalloutDismissed] = useLocalStorage( + 'apm.sloCalloutDismissed', + false + ); + return ( + {!sloCalloutDismissed && ( + { + setSloCalloutDismissed(true); + }} + serviceName={serviceName} + environment={environment} + transactionType={transactionType} + /> + )} + {fallbackToTransactions && ( diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx index b7c113009d0fa..1c3ea3bf7e5f0 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx @@ -19,6 +19,8 @@ import { TransactionCharts } from '../../shared/charts/transaction_charts'; import { replace } from '../../shared/links/url_helpers'; import { TransactionDetailsTabs } from './transaction_details_tabs'; import { isServerlessAgent } from '../../../../common/agent_name'; +import { useLocalStorage } from '../../../hooks/use_local_storage'; +import { SloCallout } from '../../shared/slo_callout'; export function TransactionDetails() { const { path, query } = useAnyOfApmParams( @@ -32,6 +34,7 @@ export function TransactionDetails() { transactionType: transactionTypeFromUrl, comparisonEnabled, offset, + environment, } = query; const { start, end } = useTimeRange({ rangeFrom, rangeTo }); const apmRouter = useApmRouter(); @@ -61,9 +64,24 @@ export function TransactionDetails() { ); const isServerless = isServerlessAgent(serverlessType); + const [sloCalloutDismissed, setSloCalloutDismissed] = useLocalStorage( + 'apm.sloCalloutDismissed', + false + ); return ( <> + {!sloCalloutDismissed && ( + { + setSloCalloutDismissed(true); + }} + serviceName={serviceName} + environment={environment} + transactionType={transactionType} + transactionName={transactionName} + /> + )} {fallbackToTransactions && } diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx index 21b830fb314af..9981533eead4f 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx @@ -11,10 +11,12 @@ import { useHistory } from 'react-router-dom'; import { isServerlessAgent } from '../../../../common/agent_name'; import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context'; import { useApmParams } from '../../../hooks/use_apm_params'; +import { useLocalStorage } from '../../../hooks/use_local_storage'; import { useTimeRange } from '../../../hooks/use_time_range'; import { AggregatedTransactionsBadge } from '../../shared/aggregated_transactions_badge'; import { TransactionCharts } from '../../shared/charts/transaction_charts'; import { replace } from '../../shared/links/url_helpers'; +import { SloCallout } from '../../shared/slo_callout'; import { TransactionsTable } from '../../shared/transactions_table'; export function TransactionOverview() { @@ -48,8 +50,23 @@ export function TransactionOverview() { const isServerless = isServerlessAgent(serverlessType); + const [sloCalloutDismissed, setSloCalloutDismissed] = useLocalStorage( + 'apm.sloCalloutDismissed', + false + ); + return ( <> + {!sloCalloutDismissed && ( + { + setSloCalloutDismissed(true); + }} + serviceName={serviceName} + environment={environment} + transactionType={transactionType} + /> + )} {fallbackToTransactions && ( <> diff --git a/x-pack/plugins/apm/public/components/shared/slo_callout/index.tsx b/x-pack/plugins/apm/public/components/shared/slo_callout/index.tsx new file mode 100644 index 0000000000000..fa74a2a361bcb --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/slo_callout/index.tsx @@ -0,0 +1,114 @@ +/* + * 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 { + EuiButton, + EuiCallOut, + EuiFlexGroup, + EuiFlexItem, + EuiLink, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { CreateSLOInput } from '@kbn/slo-schema'; +import { encode } from '@kbn/rison'; +import React from 'react'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; + +interface Props { + dismissCallout: () => void; + serviceName: string; + environment: string; + transactionType?: string; + transactionName?: string; +} +type RecursivePartial = { + [P in keyof T]?: T[P] extends Array + ? Array> + : T[P] extends object | undefined + ? RecursivePartial + : T[P]; +}; + +export function SloCallout({ + dismissCallout, + serviceName, + environment, + transactionType, + transactionName, +}: Props) { + const { core } = useApmPluginContext(); + const { basePath } = core.http; + + const sloInput: RecursivePartial = { + indicator: { + type: 'sli.apm.transactionErrorRate', + params: { + service: serviceName, + environment, + transactionName: transactionName ?? '', + transactionType: transactionType ?? '', + }, + }, + }; + const sloParams = `?_a=${encode(sloInput)}`; + + return ( + + + +

+ +

+ + + + + + { + dismissCallout(); + }} + > + {i18n.translate('xpack.apm.slo.callout.createButton', { + defaultMessage: 'Create SLO', + })} + + + + + { + dismissCallout(); + }} + > + {i18n.translate('xpack.apm.slo.callout.dimissButton', { + defaultMessage: 'Hide this', + })} + + + + + + + ); +} diff --git a/x-pack/plugins/apm/tsconfig.json b/x-pack/plugins/apm/tsconfig.json index faa3fa932096f..2e64071c6ebee 100644 --- a/x-pack/plugins/apm/tsconfig.json +++ b/x-pack/plugins/apm/tsconfig.json @@ -93,6 +93,7 @@ "@kbn/dashboard-plugin", "@kbn/controls-plugin", "@kbn/core-http-server", + "@kbn/slo-schema", ], "exclude": [ "target/**/*",