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

* Add data options to all Observability app headers * Updated failing snapshot * [Uptime] Update snapshot Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
2020-06-18 09:35:48 +02:00 · 2020-06-18 09:35:48 +02:00 · f27162a213
parent 9f9a5c69f9
commit f27162a213
7 changed files with 106 additions and 7 deletions
--- a/x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx
+++ b/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>

--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/test/snapshots/ServiceOverview.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/test/snapshots/ServiceOverview.test.tsx.snap
@ -114,7 +114,7 @@ NodeList [
                  <span
                    class="euiButton__text"
                  >
-                    Setup Instructions
+                    Setup instructions
                  </span>
                </span>
              </button>
--- a/x-pack/plugins/apm/public/components/shared/Links/SetupInstructionsLink.tsx
+++ b/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>
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/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',
+});
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/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>

--- a/x-pack/plugins/uptime/public/pages/tests/snapshots/page_header.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/pages/tests/snapshots/page_header.test.tsx.snap
@ -104,6 +104,29 @@ Array [
            </button>
          </a>
        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary"
+            type="button"
+          >
+            <span
+              class="euiButtonEmpty__content"
+            >
+              <div
+                aria-hidden="true"
+                class="euiButtonEmpty__icon"
+                data-euiicon-type="plusInCircle"
+              />
+              <span
+                class="euiButtonEmpty__text"
+              >
+                Add data
+              </span>
+            </span>
+          </button>
+        </div>
      </div>
    </div>
    <div
--- a/x-pack/plugins/uptime/public/pages/page_header.tsx
+++ b/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>
    );