[Obs-UX-Management] SLO documentation in page header (elastic#208075)

## Summary Resolves elastic#198176 This PR: - Adds link to SLO documentation to SLO page header - Creates a new path constant for SLO documentation to be shared between the welcome page and page header links <img width="836" alt="Screenshot 2025-01-23 at 10 05 12 AM" src="https://github.com/user-attachments/assets/bf5e0a91-eac2-4a2e-8819-5a5c62016f4e" /> ### Testing (Manual) Both "Read the docs" and "SLO Documentation" links should both go to the same place, in a new tab: https://www.elastic.co/guide/en/observability/current/slo.html
kdelemme · Jan 24, 2025 · f0eb5d6 · f0eb5d6
1 parent 18c73ea
commit f0eb5d6
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 2 deletions.
diff --git a/src/platform/packages/shared/kbn-doc-links/src/get_doc_links.ts b/src/platform/packages/shared/kbn-doc-links/src/get_doc_links.ts
@@ -575,6 +575,9 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
         ? `${SERVERLESS_DOCS}observability-synthetics-get-started-project.html`
         : `${OBSERVABILITY_DOCS}synthetic-run-tests.html#synthetic-monitor-choose-project`,
       syntheticsMigrateFromIntegration: `${OBSERVABILITY_DOCS}synthetics-migrate-from-integration.html`,
+      slo: isServerless
+        ? `${SERVERLESS_DOCS}observability-slos.html`
+        : `${OBSERVABILITY_DOCS}slo.html`,
       sloBurnRateRule: isServerless
         ? `${SERVERLESS_DOCS}observability-create-slo-burn-rate-alert-rule.html`
         : `${OBSERVABILITY_DOCS}slo-burn-rate-alert.html`,

diff --git a/src/platform/packages/shared/kbn-doc-links/src/types.ts b/src/platform/packages/shared/kbn-doc-links/src/types.ts
@@ -390,6 +390,7 @@ export interface DocLinks {
     syntheticsCommandReference: string;
     syntheticsProjectMonitors: string;
     syntheticsMigrateFromIntegration: string;
+    slo: string;
     sloBurnRateRule: string;
     aiAssistant: string;
   }>;

diff --git a/x-pack/solutions/observability/plugins/observability/public/utils/kibana_react.mock.ts b/x-pack/solutions/observability/plugins/observability/public/utils/kibana_react.mock.ts
@@ -19,6 +19,14 @@ export const kibanaStartMock = {
         ...observabilityPublicPluginsStartMock.createStart(),
         storage: coreMock.createStorage(),
         cases: { ...casesPluginMock.createStartContract() },
+        docLinks: {
+          links: {
+            query: {},
+            observability: {
+              slo: 'dummy_link',
+            },
+          },
+        },
       },
     };
   },

diff --git a/x-pack/solutions/observability/plugins/slo/public/components/header_menu/header_menu.tsx b/x-pack/solutions/observability/plugins/slo/public/components/header_menu/header_menu.tsx
@@ -14,7 +14,7 @@ import { usePluginContext } from '../../hooks/use_plugin_context';
 import { SLOS_BASE_PATH, SLO_SETTINGS_PATH } from '../../../common/locators/paths';
 
 export function HeaderMenu(): React.ReactElement | null {
-  const { http, theme } = useKibana().services;
+  const { http, theme, docLinks } = useKibana().services;
 
   const { appMountParameters, isServerless } = usePluginContext();
   return (
@@ -25,6 +25,16 @@ export function HeaderMenu(): React.ReactElement | null {
       <EuiFlexGroup responsive={false} gutterSize="s">
         <EuiFlexItem>
           <EuiHeaderLinks>
+            <EuiHeaderLink
+              color="primary"
+              href={docLinks.links.observability.slo}
+              iconType="documentation"
+              target="_blank"
+            >
+              {i18n.translate('xpack.slo.headerMenu.documentation', {
+                defaultMessage: 'SLO documentation',
+              })}
+            </EuiHeaderLink>
             <EuiHeaderLink
               color="primary"
               href={http.basePath.prepend('/app/observabilityOnboarding')}

diff --git a/x-pack/solutions/observability/plugins/slo/public/pages/slo_details/slo_details.test.tsx b/x-pack/solutions/observability/plugins/slo/public/pages/slo_details/slo_details.test.tsx
@@ -92,6 +92,14 @@ const mockKibana = () => {
           get: () => 'http://localhost:5601',
         },
       },
+      docLinks: {
+        links: {
+          query: {},
+          observability: {
+            slo: 'dummy_link',
+          },
+        },
+      },
       dataViews: {
         create: jest.fn().mockResolvedValue({
           getIndexPattern: jest.fn().mockReturnValue('some-index'),

diff --git a/x-pack/solutions/observability/plugins/slo/public/pages/slo_edit/slo_edit.test.tsx b/x-pack/solutions/observability/plugins/slo/public/pages/slo_edit/slo_edit.test.tsx
@@ -104,6 +104,9 @@ const mockKibana = (license: ILicense | null = licenseMock) => {
       docLinks: {
         links: {
           query: {},
+          observability: {
+            slo: 'dummy_link',
+          },
         },
       },
       http: {

diff --git a/x-pack/solutions/observability/plugins/slo/public/pages/slos/slos.test.tsx b/x-pack/solutions/observability/plugins/slo/public/pages/slos/slos.test.tsx
@@ -100,6 +100,9 @@ const mockKibana = () => {
       docLinks: {
         links: {
           query: {},
+          observability: {
+            slo: 'dummy_link',
+          },
         },
       },
       http: {

diff --git a/x-pack/solutions/observability/plugins/slo/public/pages/slos_welcome/slos_welcome.test.tsx b/x-pack/solutions/observability/plugins/slo/public/pages/slos_welcome/slos_welcome.test.tsx
@@ -52,6 +52,14 @@ const mockKibana = () => {
           prepend: (url: string) => url,
         },
       },
+      docLinks: {
+        links: {
+          query: {},
+          observability: {
+            slo: 'dummy_link',
+          },
+        },
+      },
       observabilityAIAssistant: mockObservabilityAIAssistant,
     },
   });

diff --git a/x-pack/solutions/observability/plugins/slo/public/pages/slos_welcome/slos_welcome.tsx b/x-pack/solutions/observability/plugins/slo/public/pages/slos_welcome/slos_welcome.tsx
@@ -32,6 +32,7 @@ export function SlosWelcomePage() {
   const {
     application: { navigateToUrl },
     http: { basePath },
+    docLinks,
   } = useKibana().services;
 
   const { ObservabilityPageTemplate } = usePluginContext();
@@ -179,7 +180,7 @@ export function SlosWelcomePage() {
             &nbsp;
             <EuiLink
               data-test-subj="o11ySloListWelcomePromptReadTheDocsLink"
-              href="https://www.elastic.co/guide/en/observability/current/slo.html"
+              href={docLinks.links.observability.slo}
               target="_blank"
             >
               {i18n.translate('xpack.slo.sloList.welcomePrompt.learnMoreLink', {