-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[APM] Create plugin for logs onboarding (#154728)
Closes #154733 Creates a new plugin for logs onboarding with wizard to organize steps into discrete views. #### TODO: - [x] rename plugin to observability_onboarding - [x] configure: UI and server plugin - [x] enable/disable new plugin - [x] remove the link to it from Observability nav --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Yngrid Coello <yngrid.coello@elastic.co> Co-authored-by: Yngrid Coello <yngrdyn@gmail.com>
- Loading branch information
4 people
authored
Apr 25, 2023
1 parent
4dda8cf
commit 0772456
Showing
41 changed files
with
2,280 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "singleQuote": true, | ||
| "semi": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| # Observability onboarding plugin | ||
|
|
||
| This plugin provides an onboarding framework for observability solutions: Logs and APM. |
14 changes: 14 additions & 0 deletions
14
x-pack/plugins/observability_onboarding/common/fetch_options.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import type { HttpFetchOptions } from '@kbn/core/public'; | ||
|
|
||
| export type FetchOptions = Omit<HttpFetchOptions, 'body'> & { | ||
| pathname: string; | ||
| method?: string; | ||
| body?: any; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| export const PLUGIN_ID = 'observabilityOnboarding'; | ||
| export const PLUGIN_NAME = 'observabilityOnboarding'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| const path = require('path'); | ||
|
|
||
| module.exports = { | ||
| preset: '@kbn/test', | ||
| rootDir: path.resolve(__dirname, '../../..'), | ||
| roots: ['<rootDir>/x-pack/plugins/observability_onboarding'], | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "type": "plugin", | ||
| "id": "@kbn/observability-onboarding-plugin", | ||
| "owner": "@elastic/apm-ui", | ||
| "plugin": { | ||
| "id": "observabilityOnboarding", | ||
| "server": true, | ||
| "browser": true, | ||
| "configPath": ["xpack", "observability_onboarding"], | ||
| "requiredPlugins": [ | ||
| "data", | ||
| "observability", | ||
| ], | ||
| "optionalPlugins": [ | ||
| "cloud", | ||
| "usageCollection", | ||
| ], | ||
| "requiredBundles": [ | ||
| "kibanaReact" | ||
| ], | ||
| "extraPublicDirs": ["common"] | ||
| } | ||
| } |
179 changes: 179 additions & 0 deletions
179
x-pack/plugins/observability_onboarding/public/application/app.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import { EuiErrorBoundary } from '@elastic/eui'; | ||
| import { Theme, ThemeProvider } from '@emotion/react'; | ||
| import { | ||
| APP_WRAPPER_CLASS, | ||
| AppMountParameters, | ||
| CoreStart, | ||
| } from '@kbn/core/public'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { | ||
| KibanaContextProvider, | ||
| KibanaThemeProvider, | ||
| RedirectAppLinks, | ||
| useKibana, | ||
| useUiSetting$, | ||
| } from '@kbn/kibana-react-plugin/public'; | ||
| import { useBreadcrumbs } from '@kbn/observability-plugin/public'; | ||
| import { RouterProvider, createRouter } from '@kbn/typed-react-router-config'; | ||
| import { euiDarkVars, euiLightVars } from '@kbn/ui-theme'; | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { Redirect, RouteComponentProps, RouteProps } from 'react-router-dom'; | ||
| import { Home } from '../components/app/home'; | ||
| import { | ||
| ObservabilityOnboardingPluginSetupDeps, | ||
| ObservabilityOnboardingPluginStartDeps, | ||
| } from '../plugin'; | ||
|
|
||
| export type BreadcrumbTitle< | ||
| T extends { [K in keyof T]?: string | undefined } = {} | ||
| > = string | ((props: RouteComponentProps<T>) => string) | null; | ||
|
|
||
| export interface RouteDefinition< | ||
| T extends { [K in keyof T]?: string | undefined } = any | ||
| > extends RouteProps { | ||
| breadcrumb: BreadcrumbTitle<T>; | ||
| } | ||
|
|
||
| export const onBoardingTitle = i18n.translate( | ||
| 'xpack.observability_onboarding.breadcrumbs.onboarding', | ||
| { | ||
| defaultMessage: 'Onboarding', | ||
| } | ||
| ); | ||
|
|
||
| export const onboardingRoutes: RouteDefinition[] = [ | ||
| { | ||
| exact: true, | ||
| path: '/', | ||
| render: () => <Redirect to="/observabilityOnboarding" />, | ||
| breadcrumb: onBoardingTitle, | ||
| }, | ||
| ]; | ||
|
|
||
| function ObservabilityOnboardingApp() { | ||
| const [darkMode] = useUiSetting$<boolean>('theme:darkMode'); | ||
|
|
||
| const { http } = useKibana<ObservabilityOnboardingPluginStartDeps>().services; | ||
| const basePath = http.basePath.get(); | ||
|
|
||
| useBreadcrumbs([ | ||
| { | ||
| text: onBoardingTitle, | ||
| href: basePath + '/app/observabilityOnboarding', | ||
| }, | ||
| { | ||
| text: i18n.translate('xpack.observability_onboarding.breadcrumbs.logs', { | ||
| defaultMessage: 'Logs', | ||
| }), | ||
| }, | ||
| ]); | ||
|
|
||
| return ( | ||
| <ThemeProvider | ||
| theme={(outerTheme?: Theme) => ({ | ||
| ...outerTheme, | ||
| eui: darkMode ? euiDarkVars : euiLightVars, | ||
| darkMode, | ||
| })} | ||
| > | ||
| <div className={APP_WRAPPER_CLASS} data-test-subj="csmMainContainer"> | ||
| <Home /> | ||
| </div> | ||
| </ThemeProvider> | ||
| ); | ||
| } | ||
|
|
||
| export const observabilityOnboardingRouter = createRouter({}); | ||
|
|
||
| export function ObservabilityOnboardingAppRoot({ | ||
| appMountParameters, | ||
| core, | ||
| deps, | ||
| corePlugins: { observability, data }, | ||
| }: { | ||
| appMountParameters: AppMountParameters; | ||
| core: CoreStart; | ||
| deps: ObservabilityOnboardingPluginSetupDeps; | ||
| corePlugins: ObservabilityOnboardingPluginStartDeps; | ||
| }) { | ||
| const { history } = appMountParameters; | ||
| const i18nCore = core.i18n; | ||
| const plugins = { ...deps }; | ||
|
|
||
| return ( | ||
| <RedirectAppLinks | ||
| className={APP_WRAPPER_CLASS} | ||
| application={core.application} | ||
| > | ||
| <KibanaContextProvider | ||
| services={{ | ||
| ...core, | ||
| ...plugins, | ||
| observability, | ||
| data, | ||
| }} | ||
| > | ||
| <KibanaThemeProvider | ||
| theme$={appMountParameters.theme$} | ||
| modify={{ | ||
| breakpoint: { | ||
| xxl: 1600, | ||
| xxxl: 2000, | ||
| }, | ||
| }} | ||
| > | ||
| <i18nCore.Context> | ||
| <RouterProvider | ||
| history={history} | ||
| router={observabilityOnboardingRouter} | ||
| > | ||
| <EuiErrorBoundary> | ||
| <ObservabilityOnboardingApp /> | ||
| </EuiErrorBoundary> | ||
| </RouterProvider> | ||
| </i18nCore.Context> | ||
| </KibanaThemeProvider> | ||
| </KibanaContextProvider> | ||
| </RedirectAppLinks> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * This module is rendered asynchronously in the Kibana platform. | ||
| */ | ||
|
|
||
| export const renderApp = ({ | ||
| core, | ||
| deps, | ||
| appMountParameters, | ||
| corePlugins, | ||
| }: { | ||
| core: CoreStart; | ||
| deps: ObservabilityOnboardingPluginSetupDeps; | ||
| appMountParameters: AppMountParameters; | ||
| corePlugins: ObservabilityOnboardingPluginStartDeps; | ||
| }) => { | ||
| const { element } = appMountParameters; | ||
|
|
||
| ReactDOM.render( | ||
| <ObservabilityOnboardingAppRoot | ||
| appMountParameters={appMountParameters} | ||
| core={core} | ||
| deps={deps} | ||
| corePlugins={corePlugins} | ||
| />, | ||
| element | ||
| ); | ||
| return () => { | ||
| corePlugins.data.search.session.clear(); | ||
| ReactDOM.unmountComponentAtNode(element); | ||
| }; | ||
| }; |
Oops, something went wrong.