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

## Summary

Resolves #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
This commit is contained in:
Bailey Cash 2025-01-24 09:15:11 -05:00 committed by GitHub
parent 18c73ea26a
commit f0eb5d6957
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 47 additions and 2 deletions

View file

@ -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`,

View file

@ -390,6 +390,7 @@ export interface DocLinks {
syntheticsCommandReference: string;
syntheticsProjectMonitors: string;
syntheticsMigrateFromIntegration: string;
slo: string;
sloBurnRateRule: string;
aiAssistant: string;
}>;

View file

@ -19,6 +19,14 @@ export const kibanaStartMock = {
...observabilityPublicPluginsStartMock.createStart(),
storage: coreMock.createStorage(),
cases: { ...casesPluginMock.createStartContract() },
docLinks: {
links: {
query: {},
observability: {
slo: 'dummy_link',
},
},
},
},
};
},

View file

@ -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')}

View file

@ -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'),

View file

@ -104,6 +104,9 @@ const mockKibana = (license: ILicense | null = licenseMock) => {
docLinks: {
links: {
query: {},
observability: {
slo: 'dummy_link',
},
},
},
http: {

View file

@ -100,6 +100,9 @@ const mockKibana = () => {
docLinks: {
links: {
query: {},
observability: {
slo: 'dummy_link',
},
},
},
http: {

View file

@ -52,6 +52,14 @@ const mockKibana = () => {
prepend: (url: string) => url,
},
},
docLinks: {
links: {
query: {},
observability: {
slo: 'dummy_link',
},
},
},
observabilityAIAssistant: mockObservabilityAIAssistant,
},
});

View file

@ -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', {