[Observability] Creates "Add data" links in all Observability app headers

x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx

@@ -4,8 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import {
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiTitle,
+ EuiButtonEmpty,
+} from '@elastic/eui';
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 import { ApmHeader } from '../../shared/ApmHeader';
 import { ServiceDetailTabs } from './ServiceDetailTabs';
 import { ServiceIntegrations } from './ServiceIntegrations';
@@ -33,6 +39,12 @@ export function ServiceDetails({ tab }: Props) {
  const isAlertingAvailable =
  isAlertingPluginEnabled && (canReadAlerts || canSaveAlerts);
 
+ const { core } = useApmPluginContext();
+
+ const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
+ defaultMessage: 'Add data',
+ });
+
  return (
  <div>
  <ApmHeader>
@@ -53,6 +65,16 @@ export function ServiceDetails({ tab }: Props) {
  />
  </EuiFlexItem>
  )}
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ href={core.http.basePath.prepend('/app/home#/tutorial/apm')}
+ size="s"
+ color="primary"
+ iconType="plusInCircle"
+ >
+ {ADD_DATA_LABEL}
+ </EuiButtonEmpty>
+ </EuiFlexItem>
  </EuiFlexGroup>
  </ApmHeader>
 

x-pack/plugins/apm/public/components/shared/Links/SetupInstructionsLink.tsx

@@ -12,10 +12,14 @@ import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 const SETUP_INSTRUCTIONS_LABEL = i18n.translate(
  'xpack.apm.setupInstructionsButtonLabel',
  {
- defaultMessage: 'Setup Instructions',
+ defaultMessage: 'Setup instructions',
  }
 );
 
+const ADD_DATA_LABEL = i18n.translate('xpack.apm.addDataButtonLabel', {
+ defaultMessage: 'Add data',
+});
+
 // renders a filled button or a link as a kibana link to setup instructions
 export function SetupInstructionsLink({
  buttonFill = false,
@@ -30,8 +34,8 @@ export function SetupInstructionsLink({
  {SETUP_INSTRUCTIONS_LABEL}
  </EuiButton>
  ) : (
- <EuiButtonEmpty size="s" color="primary" iconType="help">
- {SETUP_INSTRUCTIONS_LABEL}
+ <EuiButtonEmpty size="s" color="primary" iconType="plusInCircle">
+ {ADD_DATA_LABEL}
  </EuiButtonEmpty>
  )}
  </EuiLink>

x-pack/plugins/infra/public/pages/logs/page_content.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
@@ -32,6 +32,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
  const { initialize } = useLogSourceContext();
 
+ const kibana = useKibana();
+
  useMount(() => {
  initialize();
  });
@@ -88,6 +90,16 @@ export const LogsPageContent: React.FunctionComponent = () => {
  <EuiFlexItem grow={false}>
  <AlertDropdown />
  </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ href={kibana.services?.application?.getUrlForApp('/home#/tutorial_directory/logging')}
+ size="s"
+ color="primary"
+ iconType="plusInCircle"
+ >
+ {ADD_DATA_LABEL}
+ </EuiButtonEmpty>
+ </EuiFlexItem>
  </EuiFlexGroup>
  </AppNavigation>
  <Switch>
@@ -123,3 +135,7 @@ const settingsTabTitle = i18n.translate('xpack.infra.logs.index.settingsTabTitle
 });
 
 const feedbackLinkUrl = 'https://discuss.elastic.co/c/logs';
+
+const ADD_DATA_LABEL = i18n.translate('xpack.infra.logsHeaderAddDataButtonLabel', {
+ defaultMessage: 'Add data',
+});

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 
-import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import { EuiErrorBoundary, EuiFlexItem, EuiFlexGroup, EuiButtonEmpty } from '@elastic/eui';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { RoutedTabs } from '../../components/navigation/routed_tabs';
@@ -32,9 +32,15 @@ import { WaffleFiltersProvider } from './inventory_view/hooks/use_waffle_filters
 import { InventoryAlertDropdown } from '../../components/alerting/inventory/alert_dropdown';
 import { MetricsAlertDropdown } from '../../alerting/metric_threshold/components/alert_dropdown';
 
+const ADD_DATA_LABEL = i18n.translate('xpack.infra.metricsHeaderAddDataButtonLabel', {
+ defaultMessage: 'Add data',
+});
+
 export const InfrastructurePage = ({ match }: RouteComponentProps) => {
  const uiCapabilities = useKibana().services.application?.capabilities;
 
+ const kibana = useKibana();
+
  return (
  <EuiErrorBoundary>
  <Source.Provider sourceId="default">
@@ -102,6 +108,18 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
  <Route path={'/explorer'} component={MetricsAlertDropdown} />
  <Route path={'/inventory'} component={InventoryAlertDropdown} />
  </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ href={kibana.services?.application?.getUrlForApp(
+ '/home#/tutorial_directory/metrics'
+ )}
+ size="s"
+ color="primary"
+ iconType="plusInCircle"
+ >
+ {ADD_DATA_LABEL}
+ </EuiButtonEmpty>
+ </EuiFlexItem>
  </EuiFlexGroup>
  </AppNavigation>
 

x-pack/plugins/uptime/public/pages/page_header.tsx

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import { UptimeDatePicker } from '../components/common/uptime_date_picker';
 import { SETTINGS_ROUTE } from '../../common/constants';
 import { ToggleAlertFlyoutButton } from '../components/overview/alerts/alerts_containers';
+import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 
 interface PageHeaderProps {
  headingText: string | JSX.Element;
@@ -23,6 +24,10 @@ const SETTINGS_LINK_TEXT = i18n.translate('xpack.uptime.page_header.settingsLink
  defaultMessage: 'Settings',
 });
 
+const ADD_DATA_LABEL = i18n.translate('xpack.uptime.addDataButtonLabel', {
+ defaultMessage: 'Add data',
+});
+
 const StyledPicker = styled(EuiFlexItem)`
  &&& {
  @media only screen and (max-width: 1024px) and (min-width: 868px) {
@@ -52,6 +57,8 @@ export const PageHeader = React.memo(
  </StyledPicker>
  ) : null;
 
+ const kibana = useKibana();
+
  const extraLinkComponents = !extraLinks ? null : (
  <EuiFlexGroup alignItems="flexEnd" responsive={false}>
  <EuiFlexItem grow={false}>
@@ -64,6 +71,15 @@ export const PageHeader = React.memo(
  </EuiButtonEmpty>
  </Link>
  </EuiFlexItem>
+ <EuiFlexItem grow={false}>
+ <EuiButtonEmpty
+ href={kibana.services?.application?.getUrlForApp('/home#/tutorial/uptimeMonitors')}
+ color="primary"
+ iconType="plusInCircle"
+ >
+ {ADD_DATA_LABEL}
+ </EuiButtonEmpty>
+ </EuiFlexItem>
  </EuiFlexGroup>
  );