-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[APM][ECO] Promote new experience when no apm data found (#188867)
closes elastic/observability-dev#3737 ## Summary - When FF is disabled it shows the existing no data page - The no data config is very limited in the template, thus we had to go against the guidelines and create a custom no data page for the new experience. - The user needs to have permissions to enable EEM, othewise same modal appears with slightly different copy Additionally, the PR includes - Small refactoring in the enablement component in order to share it - Add short link that was misseed https://github.com/user-attachments/assets/5d3bbe83-682a-47a1-a9af-770f1ca42876 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
- Loading branch information
1 parent
2cc0332
commit 5d9d92b
Showing
6 changed files
with
232 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
124 changes: 124 additions & 0 deletions
124
...bservability_solution/apm/public/components/routing/templates/custom_no_data_template.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,124 @@ | ||
| /* | ||
| * 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 { | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiSpacer, | ||
| EuiTextColor, | ||
| EuiText, | ||
| EuiButton, | ||
| EuiPageTemplate, | ||
| EuiCard, | ||
| EuiImage, | ||
| EuiScreenReaderOnly, | ||
| } from '@elastic/eui'; | ||
| import { useKibana } from '@kbn/kibana-react-plugin/public'; | ||
| import React from 'react'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { KibanaSolutionAvatar } from '@kbn/shared-ux-avatar-solution'; | ||
| import { NoDataConfig } from '@kbn/shared-ux-page-no-data-config-types'; | ||
| import { ApmPluginStartDeps } from '../../../plugin'; | ||
| import { EntityEnablement } from '../../shared/entity_enablement'; | ||
|
|
||
| export function CustomNoDataTemplate({ | ||
| isPageDataLoaded, | ||
| noDataConfig, | ||
| }: { | ||
| isPageDataLoaded: boolean; | ||
| noDataConfig?: NoDataConfig; | ||
| }) { | ||
| const { services } = useKibana<ApmPluginStartDeps>(); | ||
| const { http, observabilityShared } = services; | ||
| const basePath = http?.basePath.get(); | ||
|
|
||
| const ObservabilityPageTemplate = observabilityShared.navigation.PageTemplate; | ||
| const imageUrl = `${basePath}/plugins/kibanaReact/assets/elastic_agent_card.svg`; | ||
|
|
||
| return ( | ||
| <ObservabilityPageTemplate isPageDataLoaded={isPageDataLoaded} paddingSize="none"> | ||
| <EuiPageTemplate panelled={false} offset={0} restrictWidth="960px"> | ||
| <EuiPageTemplate.Section alignment="center" component="div" grow> | ||
| <EuiText textAlign="center"> | ||
| <KibanaSolutionAvatar name="observability" iconType="logoObservability" size="xxl" /> | ||
| <EuiSpacer size="l" /> | ||
| <h1> | ||
| {i18n.translate('xpack.apm.customEmtpyState.title', { | ||
| defaultMessage: 'Detect and resolve problems with your application', | ||
| })} | ||
| </h1> | ||
| <EuiTextColor color="subdued"> | ||
| <p> | ||
| {i18n.translate('xpack.apm.customEmtpyState.description', { | ||
| defaultMessage: | ||
| 'Start collecting data for your applications and services so you can detect and resolve problems faster.', | ||
| })} | ||
| </p> | ||
| </EuiTextColor> | ||
| </EuiText> | ||
| <EuiSpacer size="xxl" /> | ||
| <EuiCard | ||
| css={{ maxWidth: 400, marginInline: 'auto' }} | ||
| paddingSize="l" | ||
| title={ | ||
| <EuiScreenReaderOnly> | ||
| <span> | ||
| {i18n.translate('xpack.apm.customEmtpyState.title.reader', { | ||
| defaultMessage: 'Add APM data', | ||
| })} | ||
| </span> | ||
| </EuiScreenReaderOnly> | ||
| } | ||
| description={i18n.translate('xpack.apm.customEmtpyState.card.description', { | ||
| defaultMessage: | ||
| 'Use APM agents to collect APM data. We make it easy with agents for many popular languages.', | ||
| })} | ||
| footer={ | ||
| <EuiFlexGroup justifyContent="center"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiButton | ||
| data-test-subj="apmCustomNoDataTemplateAddApmAgentButton" | ||
| color="primary" | ||
| fill | ||
| href={noDataConfig?.action.elasticAgent.href} | ||
| > | ||
| {noDataConfig?.action.elasticAgent.title} | ||
| </EuiButton> | ||
| <EuiSpacer size="m" /> | ||
| <EuiText size="s"> | ||
| <p> | ||
| <EntityEnablement | ||
| label={i18n.translate('xpack.apm.customEmtpyState.card.link', { | ||
| defaultMessage: 'Try creating services from logs', | ||
| })} | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| } | ||
| image={ | ||
| <EuiImage | ||
| size="fullWidth" | ||
| style={{ | ||
| width: 'max(100%, 360px)', | ||
| height: 240, | ||
| objectFit: 'cover', | ||
| background: 'aliceblue', | ||
| }} | ||
| url={imageUrl} | ||
| alt={i18n.translate('xpack.apm.customEmtpyState.img.alt', { | ||
| defaultMessage: 'Image of the Elastic Agent card', | ||
| })} | ||
| /> | ||
| } | ||
| /> | ||
| </EuiPageTemplate.Section> | ||
| </EuiPageTemplate> | ||
| </ObservabilityPageTemplate> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.