-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into revert-fs-changes
- Loading branch information
Showing
80 changed files
with
1,195 additions
and
1,274 deletions.
There are no files selected for viewing
Validating CODEOWNERS rules …
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,81 @@ | ||
| /* | ||
| * 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 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React, { useState } from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| import { AppMountParameters } from '@kbn/core-application-browser'; | ||
| import { | ||
| EuiPage, | ||
| EuiPageBody, | ||
| EuiPageHeader, | ||
| EuiPageSection, | ||
| EuiPageTemplate, | ||
| EuiSpacer, | ||
| EuiTab, | ||
| EuiTabs, | ||
| } from '@elastic/eui'; | ||
| import { Overview } from './overview'; | ||
| import { RenderExamples } from './render_examples'; | ||
|
|
||
| const OVERVIEW_TAB_ID = 'overview'; | ||
| const RENDER_TAB_ID = 'render'; | ||
|
|
||
| const App = () => { | ||
| const [selectedTabId, setSelectedTabId] = useState(OVERVIEW_TAB_ID); | ||
|
|
||
| function onSelectedTabChanged(tabId: string) { | ||
| setSelectedTabId(tabId); | ||
| } | ||
|
|
||
| function renderTabContent() { | ||
| if (selectedTabId === RENDER_TAB_ID) { | ||
| return <RenderExamples />; | ||
| } | ||
|
|
||
| return <Overview />; | ||
| } | ||
|
|
||
| return ( | ||
| <EuiPage> | ||
| <EuiPageBody> | ||
| <EuiPageSection> | ||
| <EuiPageHeader pageTitle="Embeddables" /> | ||
| </EuiPageSection> | ||
| <EuiPageTemplate.Section> | ||
| <EuiPageSection> | ||
| <EuiTabs> | ||
| <EuiTab | ||
| onClick={() => onSelectedTabChanged(OVERVIEW_TAB_ID)} | ||
| isSelected={OVERVIEW_TAB_ID === selectedTabId} | ||
| > | ||
| Embeddables overview | ||
| </EuiTab> | ||
| <EuiTab | ||
| onClick={() => onSelectedTabChanged(RENDER_TAB_ID)} | ||
| isSelected={RENDER_TAB_ID === selectedTabId} | ||
| > | ||
| Rendering embeddables in your application | ||
| </EuiTab> | ||
| </EuiTabs> | ||
|
|
||
| <EuiSpacer /> | ||
|
|
||
| {renderTabContent()} | ||
| </EuiPageSection> | ||
| </EuiPageTemplate.Section> | ||
| </EuiPageBody> | ||
| </EuiPage> | ||
| ); | ||
| }; | ||
|
|
||
| export const renderApp = (element: AppMountParameters['element']) => { | ||
| ReactDOM.render(<App />, element); | ||
|
|
||
| return () => ReactDOM.unmountComponentAtNode(element); | ||
| }; |
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,22 @@ | ||
| /* | ||
| * 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 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import { EuiText } from '@elastic/eui'; | ||
|
|
||
| export const Overview = () => { | ||
| return ( | ||
| <EuiText> | ||
| <p> | ||
| Embeddables are React components that manage their own state, can be serialized and | ||
| deserialized, and return an API that can be used to interact with them imperatively. | ||
| </p> | ||
| </EuiText> | ||
| ); | ||
| }; |
137 changes: 137 additions & 0 deletions
137
examples/embeddable_examples/public/app/render_examples.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,137 @@ | ||
| /* | ||
| * 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 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import React, { useMemo, useState } from 'react'; | ||
|
|
||
| import { ReactEmbeddableRenderer } from '@kbn/embeddable-plugin/public'; | ||
| import { | ||
| EuiCodeBlock, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiSpacer, | ||
| EuiSuperDatePicker, | ||
| EuiSwitch, | ||
| EuiText, | ||
| OnTimeChangeProps, | ||
| } from '@elastic/eui'; | ||
| import { BehaviorSubject, Subject } from 'rxjs'; | ||
| import { TimeRange } from '@kbn/es-query'; | ||
| import { useBatchedOptionalPublishingSubjects } from '@kbn/presentation-publishing'; | ||
| import { SearchEmbeddableRenderer } from '../react_embeddables/search/search_embeddable_renderer'; | ||
| import { SEARCH_EMBEDDABLE_ID } from '../react_embeddables/search/constants'; | ||
| import type { Api, State } from '../react_embeddables/search/types'; | ||
|
|
||
| export const RenderExamples = () => { | ||
| const initialState = useMemo(() => { | ||
| return { | ||
| rawState: { | ||
| timeRange: undefined, | ||
| }, | ||
| references: [], | ||
| }; | ||
| // only run onMount | ||
| }, []); | ||
|
|
||
| const parentApi = useMemo(() => { | ||
| return { | ||
| reload$: new Subject<void>(), | ||
| timeRange$: new BehaviorSubject<TimeRange>({ | ||
| from: 'now-24h', | ||
| to: 'now', | ||
| }), | ||
| }; | ||
| // only run onMount | ||
| }, []); | ||
|
|
||
| const [api, setApi] = useState<Api | null>(null); | ||
| const [hidePanelChrome, setHidePanelChrome] = useState<boolean>(false); | ||
| const [dataLoading, timeRange] = useBatchedOptionalPublishingSubjects( | ||
| api?.dataLoading, | ||
| parentApi.timeRange$ | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| <EuiSuperDatePicker | ||
| isLoading={dataLoading ? dataLoading : false} | ||
| start={timeRange.from} | ||
| end={timeRange.to} | ||
| onTimeChange={({ start, end }: OnTimeChangeProps) => { | ||
| parentApi.timeRange$.next({ | ||
| from: start, | ||
| to: end, | ||
| }); | ||
| }} | ||
| onRefresh={() => { | ||
| parentApi.reload$.next(); | ||
| }} | ||
| /> | ||
|
|
||
| <EuiSpacer size="s" /> | ||
|
|
||
| <EuiFlexGroup> | ||
| <EuiFlexItem> | ||
| <EuiText> | ||
| <p> | ||
| Use <strong>ReactEmbeddableRenderer</strong> to render embeddables. | ||
| </p> | ||
| </EuiText> | ||
|
|
||
| <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m"> | ||
| {`<ReactEmbeddableRenderer<State, Api> | ||
| type={SEARCH_EMBEDDABLE_ID} | ||
| state={initialState} | ||
| parentApi={parentApi} | ||
| onApiAvailable={(newApi) => { | ||
| setApi(newApi); | ||
| }} | ||
| hidePanelChrome={hidePanelChrome} | ||
| />`} | ||
| </EuiCodeBlock> | ||
|
|
||
| <EuiSpacer size="s" /> | ||
|
|
||
| <EuiSwitch | ||
| label="Set hidePanelChrome to render embeddable without Panel wrapper." | ||
| checked={hidePanelChrome} | ||
| onChange={(e) => setHidePanelChrome(e.target.checked)} | ||
| /> | ||
|
|
||
| <EuiSpacer size="s" /> | ||
|
|
||
| <ReactEmbeddableRenderer<State, Api> | ||
| key={hidePanelChrome ? 'hideChrome' : 'showChrome'} | ||
| type={SEARCH_EMBEDDABLE_ID} | ||
| state={initialState} | ||
| parentApi={parentApi} | ||
| onApiAvailable={(newApi) => { | ||
| setApi(newApi); | ||
| }} | ||
| hidePanelChrome={hidePanelChrome} | ||
| /> | ||
| </EuiFlexItem> | ||
|
|
||
| <EuiFlexItem> | ||
| <EuiText> | ||
| <p>To avoid leaking embeddable details, wrap ReactEmbeddableRenderer in a component.</p> | ||
| </EuiText> | ||
|
|
||
| <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m"> | ||
| {`<SearchEmbeddableRenderer | ||
| timeRange={timeRange} | ||
| />`} | ||
| </EuiCodeBlock> | ||
|
|
||
| <EuiSpacer size="s" /> | ||
|
|
||
| <SearchEmbeddableRenderer timeRange={timeRange} /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </div> | ||
| ); | ||
| }; |
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,31 @@ | ||
| /* | ||
| * 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 and the Server Side Public License, v 1; you may not use this file except | ||
| * in compliance with, at your election, the Elastic License 2.0 or the Server | ||
| * Side Public License, v 1. | ||
| */ | ||
|
|
||
| import { AppMountParameters, CoreSetup } from '@kbn/core/public'; | ||
| import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public'; | ||
| import type { StartDeps } from '../plugin'; | ||
|
|
||
| const APP_ID = 'embeddablesApp'; | ||
| const title = 'Embeddables'; | ||
|
|
||
| export function setupApp(core: CoreSetup<StartDeps>, developerExamples: DeveloperExamplesSetup) { | ||
| core.application.register({ | ||
| id: APP_ID, | ||
| title, | ||
| visibleIn: [], | ||
| async mount(params: AppMountParameters) { | ||
| const { renderApp } = await import('./app'); | ||
| return renderApp(params.element); | ||
| }, | ||
| }); | ||
| developerExamples.register({ | ||
| appId: APP_ID, | ||
| title, | ||
| description: `Learn how to create new embeddable types and use embeddables in your application.`, | ||
| }); | ||
| } |
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
Oops, something went wrong.