[7.x] [Observability] Creates "Add data" links in all Observability app headers (#69016)

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;
@@ -22,6 +23,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) {
@@ -47,6 +52,8 @@ export const PageHeader = React.memo(
         </StyledPicker>
       ) : null;
 
+    const kibana = useKibana();
+
     const extraLinkComponents = !extraLinks ? null : (
       <EuiFlexGroup alignItems="flexEnd" responsive={false}>
         <EuiFlexItem grow={false}>
@@ -59,6 +66,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>
     );