Add SLO create callout to service overview, transactions page and transactions details #159958
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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, transactionType }, | ||
| } = useApmParams('/services/{serviceName}/overview'); | ||
|
|
||
| const { start, end } = useTimeRange({ rangeFrom, rangeTo }); | ||
|
|
@@ -76,13 +79,29 @@ export function ServiceOverview() { | |
| ? 'column' | ||
| : 'row'; | ||
|
|
||
| const [sloCalloutDismissed, setSloCalloutDismissed] = useLocalStorage( | ||
| 'apm.sloCalloutDismissed', | ||
| false | ||
| ); | ||
|
|
||
| return ( | ||
| <AnnotationsContextProvider | ||
| serviceName={serviceName} | ||
| environment={environment} | ||
| start={start} | ||
| end={end} | ||
| > | ||
| {!sloCalloutDismissed && ( | ||
|
There was a problem hiding this comment. Shouldn't we also show this callout if an SLO is not current configured for this variables? or are we planning to show it even when the user has one configured? There was a problem hiding this comment. Good point, I think after creating one we shouldn’t show the callout again, @gbamparop do we know if we can check if there are SLOs already created for the user? There was a problem hiding this comment. That's a good point, we could reach to the AO team for this, but I would leave it simple for 8.9. There was a problem hiding this comment. Please create a follow up story for this There was a problem hiding this comment. We are dismissing the callout after navigating to create SLO, change added here 2a6aa66 There was a problem hiding this comment. What about detecting if an SLO rule is already created? Maybe a follow up for that one? There was a problem hiding this comment. We don't offer yet an easy way to search for an SLO with specific params. You could search for all SLOs created with the On a side note, are we planning of supporting creating SLO with the There was a problem hiding this comment. Thanks @kdelemme, I think for the porpoise of this, checking if there's at least one created will work for us. |
||
| <SloCallout | ||
| dismissCallout={() => { | ||
| setSloCalloutDismissed(true); | ||
| }} | ||
| serviceName={serviceName} | ||
| environment={environment} | ||
| transactionType={transactionType} | ||
| /> | ||
| )} | ||
| <EuiSpacer /> | ||
| <ChartPointerEventContextProvider> | ||
| <EuiFlexGroup direction="column" gutterSize="s"> | ||
| {fallbackToTransactions && ( | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<T> = { | ||
| [P in keyof T]?: T[P] extends Array<infer U> | ||
| ? Array<RecursivePartial<U>> | ||
| : T[P] extends object | undefined | ||
| ? RecursivePartial<T[P]> | ||
| : T[P]; | ||
| }; | ||
|
|
||
| export function SloCallout({ | ||
| dismissCallout, | ||
| serviceName, | ||
| environment, | ||
| transactionType, | ||
| transactionName, | ||
| }: Props) { | ||
| const { core } = useApmPluginContext(); | ||
| const { basePath } = core.http; | ||
|
|
||
| const sloInput: RecursivePartial<CreateSLOInput> = { | ||
| indicator: { | ||
| type: 'sli.apm.transactionErrorRate', | ||
| params: { | ||
| service: serviceName, | ||
| environment, | ||
| transactionName: transactionName ?? '', | ||
| transactionType: transactionType ?? '', | ||
| }, | ||
| }, | ||
| }; | ||
| const sloParams = `?_a=${encode(sloInput)}`; | ||
|
|
||
| return ( | ||
| <EuiCallOut | ||
| title={i18n.translate('xpack.apm.slo.callout.title', { | ||
| defaultMessage: 'Respond quicker with SLOs', | ||
| })} | ||
| iconType="lock" | ||
| > | ||
| <EuiFlexGroup direction="row" gutterSize="s" alignItems="center"> | ||
| <EuiFlexItem> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.apm.slo.callout.description" | ||
| defaultMessage="How quickly will you respond if the service goes down? Keep the performance, speed and user experience high with a SLO" | ||
| /> | ||
| </p> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiFlexGroup> | ||
| <EuiFlexItem> | ||
| <EuiLink | ||
| data-test-subj="apmCreateSloLink" | ||
| href={basePath.prepend( | ||
| `/app/observability/slos/create${sloParams}` | ||
| )} | ||
|
Comment on lines
+79
to
+82
There was a problem hiding this comment. 😍 Looking forward to see this in APM 👏🏻 |
||
| > | ||
| <EuiButton | ||
| data-test-subj="apmSloCalloutCreateSloButton" | ||
| onClick={() => { | ||
| dismissCallout(); | ||
| }} | ||
| > | ||
| {i18n.translate('xpack.apm.slo.callout.createButton', { | ||
| defaultMessage: 'Create SLO', | ||
| })} | ||
| </EuiButton> | ||
| </EuiLink> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <EuiButton | ||
| color="text" | ||
| data-test-subj="apmSloDismissButton" | ||
| onClick={() => { | ||
| dismissCallout(); | ||
| }} | ||
| > | ||
| {i18n.translate('xpack.apm.slo.callout.dimissButton', { | ||
| defaultMessage: 'Hide this', | ||
| })} | ||
| </EuiButton> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </EuiCallOut> | ||
| ); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are we cleaning this value? if not, this user will not see the callout again unless he is using another computer, incognito mode, another window, etc. Is that the intention? if that's not the intention maybe using sessionStorage could help us here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, as far as I know if the user clicks to hide the callout it's not going to show again as we do in other places
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that we discussed that the callout will be hidden if the user chooses to hide it or clicks the button to crate an SLO.