github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] Replace deprecated page components (#162836)

Browse source 
- Closes https://github.com/elastic/kibana/issues/161426

## Summary

This PR updates usage of Eui page components for the following plugins.
Also took this opportunity to make these pages a little nicer.

### src/plugins/data_view_management

Before:
<img width="600" alt="Screenshot 2023-07-31 at 20 09 28"
src="5b52d31d-b759-40f9-8a8e-d428f6431f45">

After:
<img width="600" alt="Screenshot 2023-07-31 at 20 09 37"
src="dfd738d9-fa19-41d2-a55e-6157d9f2310a">


### examples/search_examples

Before:
<img width="600" alt="Screenshot 2023-07-31 at 17 41 03"
src="cc739f2d-bbaa-4cae-80d8-27599170a40a">

After:
<img width="600" alt="Screenshot 2023-07-31 at 18 01 47"
src="ab596aae-f9b4-48f0-8401-a507f4814624">

Before:
<img width="600" alt="Screenshot 2023-07-31 at 20 30 19"
src="40327fdd-7161-4d65-86ff-ff38455477fb">

After:
<img width="600" alt="Screenshot 2023-07-31 at 20 30 39"
src="8455c09f-6d84-4ad1-9e25-f8555a4f40db">

Before:
<img width="600" alt="Screenshot 2023-07-31 at 18 20 47"
src="68b05f4a-fcc0-4051-92b4-88a34bd22fb6">

After:
<img width="600" alt="Screenshot 2023-07-31 at 18 44 32"
src="1fd00e7e-3663-470f-927a-b7d7a0fe6c20">

### examples/partial_results_example

Before:
<img width="600" alt="Screenshot 2023-07-31 at 17 29 32"
src="589a2d93-c42a-4948-b805-0447e96f8ae4">

After:
<img width="600" alt="Screenshot 2023-07-31 at 17 31 52"
src="22df2b40-a9ec-4e11-b4dc-19da86c73059">

### examples/field_formats_example

Before:
<img width="600" alt="Screenshot 2023-07-31 at 17 27 44"
src="d3fa1fc3-e3e2-4f69-87e5-7187f8d3b000">

After:
<img width="600" alt="Screenshot 2023-07-31 at 17 27 56"
src="5633dba4-85ed-4767-bc8c-dee0c4da8798">

### examples/data_view_field_editor_example

Before:
<img width="600" alt="Screenshot 2023-07-31 at 17 33 15"
src="0be36a57-aef3-4679-ac77-9d5073b72fc2">

After:
<img width="600" alt="Screenshot 2023-07-31 at 17 37 34"
src="e43b0a1d-12fe-4d06-90b0-63cbc36e5ac2">


### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
This commit is contained in:
Julia Rechkunova 2023-08-02 20:08:17 +02:00 • committed by GitHub
parent ffb716d8af
commit 148f9d757f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 975 additions and 1031 deletions
Download patch file Download diff file Expand all files Collapse all files

21
examples/data_view_field_editor_example/public/app.tsx
View file

@ -13,11 +13,8 @@ import {
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
EuiInMemoryTable, EuiInMemoryTable,
EuiPage, EuiPageTemplate,
EuiPageBody, EuiSpacer,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiText, EuiText,
useGeneratedHtmlId, useGeneratedHtmlId,
} from '@elastic/eui'; } from '@elastic/eui';
@ -86,6 +83,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
const content = dataView ? ( const content = dataView ? (
<> <>
<EuiText data-test-subj="dataViewTitle">Data view: {dataView.title}</EuiText> <EuiText data-test-subj="dataViewTitle">Data view: {dataView.title}</EuiText>
<EuiSpacer />
<EuiFlexGroup alignItems="center"> <EuiFlexGroup alignItems="center">
<EuiFlexItem grow={false}> <EuiFlexItem grow={false}>
<EuiButton <EuiButton
@ -118,6 +116,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
/> />
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer size="s" />
<EuiInMemoryTable<DataViewField> <EuiInMemoryTable<DataViewField>
items={fields} items={fields}
columns={columns} columns={columns}
@ -136,14 +135,10 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
); );
return ( return (
<EuiPage> <EuiPageTemplate offset={0}>
<EuiPageBody> <EuiPageTemplate.Header pageTitle="Data view field editor demo" />
<EuiPageHeader>Data view field editor demo</EuiPageHeader> <EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>
<EuiPageContent> </EuiPageTemplate>
<EuiPageContentBody>{content}</EuiPageContentBody>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
); );
}; };

51
examples/field_formats_example/public/app.tsx
View file

@ -13,12 +13,7 @@ import {
EuiCode, EuiCode,
EuiCodeBlock, EuiCodeBlock,
EuiLink, EuiLink,
EuiPage, EuiPageTemplate,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPageHeaderSection,
EuiSpacer, EuiSpacer,
EuiText, EuiText,
EuiTitle, EuiTitle,
@ -61,7 +56,7 @@ const UsingAnExistingFieldFormatExample: React.FC<{ deps: Deps }> = (props) => {
</p> </p>
</EuiText> </EuiText>
<EuiSpacer size={'s'} /> <EuiSpacer size={'s'} />
<EuiCodeBlock>{example1SampleCode}</EuiCodeBlock> <EuiCodeBlock language="jsx">{example1SampleCode}</EuiCodeBlock>
<EuiSpacer size={'s'} /> <EuiSpacer size={'s'} />
<EuiBasicTable <EuiBasicTable
data-test-subj={'example1 sample table'} data-test-subj={'example1 sample table'}
@ -97,11 +92,11 @@ const CreatingCustomFieldFormat: React.FC<{ deps: Deps }> = (props) => {
</p> </p>
</EuiText> </EuiText>
<EuiSpacer size={'s'} /> <EuiSpacer size={'s'} />
<EuiCodeBlock>{example2SampleCodePart1}</EuiCodeBlock> <EuiCodeBlock language="jsx">{example2SampleCodePart1}</EuiCodeBlock>
<EuiSpacer size={'xs'} /> <EuiSpacer size={'xs'} />
<EuiCodeBlock>{example2SampleCodePart2}</EuiCodeBlock> <EuiCodeBlock language="jsx">{example2SampleCodePart2}</EuiCodeBlock>
<EuiSpacer size={'xs'} /> <EuiSpacer size={'xs'} />
<EuiCodeBlock>{example2SampleCodePart3}</EuiCodeBlock> <EuiCodeBlock language="jsx">{example2SampleCodePart3}</EuiCodeBlock>
<EuiSpacer size={'s'} /> <EuiSpacer size={'s'} />
<EuiBasicTable <EuiBasicTable
items={sample} items={sample}
@ -151,7 +146,7 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
</p> </p>
</EuiText> </EuiText>
<EuiSpacer size={'s'} /> <EuiSpacer size={'s'} />
<EuiCodeBlock>{example3SampleCode}</EuiCodeBlock> <EuiCodeBlock language="jsx">{example3SampleCode}</EuiCodeBlock>
<EuiSpacer size={'s'} /> <EuiSpacer size={'s'} />
<EuiCallOut <EuiCallOut
@ -173,45 +168,29 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
export const App: React.FC<{ deps: Deps }> = (props) => { export const App: React.FC<{ deps: Deps }> = (props) => {
return ( return (
<EuiPage> <EuiPageTemplate offset={0}>
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}> <EuiPageTemplate.Header pageTitle="Field formats examples" />
<EuiPageHeader> <EuiPageTemplate.Section grow={false}>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>Field formats examples</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
<section>
<EuiTitle size="m"> <EuiTitle size="m">
<h2>Using an existing field format</h2> <h2>Using an existing field format</h2>
</EuiTitle> </EuiTitle>
<EuiSpacer /> <EuiSpacer />
<UsingAnExistingFieldFormatExample deps={props.deps} /> <UsingAnExistingFieldFormatExample deps={props.deps} />
</section> </EuiPageTemplate.Section>
<EuiSpacer /> <EuiPageTemplate.Section grow={false}>
<EuiSpacer />
<section>
<EuiTitle size="m"> <EuiTitle size="m">
<h2>Creating a custom field format</h2> <h2>Creating a custom field format</h2>
</EuiTitle> </EuiTitle>
<EuiSpacer /> <EuiSpacer />
<CreatingCustomFieldFormat deps={props.deps} /> <CreatingCustomFieldFormat deps={props.deps} />
</section> </EuiPageTemplate.Section>
<EuiSpacer /> <EuiPageTemplate.Section grow={false}>
<EuiSpacer />
<section>
<EuiTitle size="m"> <EuiTitle size="m">
<h2>Creating a custom field format editor</h2> <h2>Creating a custom field format editor</h2>
</EuiTitle> </EuiTitle>
<EuiSpacer /> <EuiSpacer />
<CreatingCustomFieldFormatEditor deps={props.deps} /> <CreatingCustomFieldFormatEditor deps={props.deps} />
</section> </EuiPageTemplate.Section>
</EuiPageContentBody> </EuiPageTemplate>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
); );
}; };

28
examples/partial_results_example/public/app/app.tsx
View file

@ -12,15 +12,9 @@ import {
EuiBasicTable, EuiBasicTable,
EuiCallOut, EuiCallOut,
EuiCodeBlock, EuiCodeBlock,
EuiPage, EuiPageTemplate,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPageHeaderSection,
EuiSpacer, EuiSpacer,
EuiText, EuiText,
EuiTitle,
} from '@elastic/eui'; } from '@elastic/eui';
import type { Datatable } from '@kbn/expressions-plugin/common'; import type { Datatable } from '@kbn/expressions-plugin/common';
import { ExpressionsContext } from './expressions_context'; import { ExpressionsContext } from './expressions_context';
@ -46,17 +40,9 @@ export function App() {
}, [expressions]); }, [expressions]);
return ( return (
<EuiPage> <EuiPageTemplate offset={0}>
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}> <EuiPageTemplate.Header pageTitle="Partial Results Demo" />
<EuiPageHeader> <EuiPageTemplate.Section>
<EuiPageHeaderSection>
<EuiTitle size="l">
<h1>Partial Results Demo</h1>
</EuiTitle>
</EuiPageHeaderSection>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
<EuiText data-test-subj="example-help"> <EuiText data-test-subj="example-help">
<p> <p>
This example listens for the window events and adds them to the table along with a This example listens for the window events and adds them to the table along with a
@ -82,9 +68,7 @@ export function App() {
<p>Click or press any key.</p> <p>Click or press any key.</p>
</EuiCallOut> </EuiCallOut>
)} )}
</EuiPageContentBody> </EuiPageTemplate.Section>
</EuiPageContent> </EuiPageTemplate>
</EuiPageBody>
</EuiPage>
); );
} }

10
examples/search_examples/public/common/example_page.tsx
View file

@ -7,7 +7,7 @@
*/ */
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { EuiPageTemplate, EuiSideNav } from '@elastic/eui';
import { IBasePath } from '@kbn/core/public'; import { IBasePath } from '@kbn/core/public';
import { PLUGIN_ID } from '../../common'; import { PLUGIN_ID } from '../../common';
@ -55,11 +55,11 @@ export const SearchExamplePage: React.FC<Props> = ({
basePath, basePath,
}: PropsWithChildren<Props>) => { }: PropsWithChildren<Props>) => {
return ( return (
<EuiPage> <EuiPageTemplate offset={0}>
<EuiPageSideBar> <EuiPageTemplate.Sidebar>
<SideNav exampleLinks={exampleLinks} basePath={basePath} /> <SideNav exampleLinks={exampleLinks} basePath={basePath} />
</EuiPageSideBar> </EuiPageTemplate.Sidebar>
{children} {children}
</EuiPage> </EuiPageTemplate>
); );
}; };

53
examples/search_examples/public/search/app.tsx
View file

@ -16,11 +16,7 @@ import {
EuiFlexGrid, EuiFlexGrid,
EuiFlexItem, EuiFlexItem,
EuiFormLabel, EuiFormLabel,
EuiHorizontalRule, EuiPageTemplate,
EuiPageBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiProgress, EuiProgress,
EuiSpacer, EuiSpacer,
EuiTabbedContent, EuiTabbedContent,
@ -531,20 +527,14 @@ export const SearchExamplesApp = ({
]; ];
return ( return (
<EuiPageBody> <>
<EuiPageHeader> <EuiPageTemplate.Header
<EuiTitle size="l"> pageTitle={i18n.translate('searchExamples.helloWorldText', {
<h1> defaultMessage: '{name}',
<FormattedMessage values: { name: PLUGIN_NAME },
id="searchExamples.helloWorldText" })}
defaultMessage="{name}"
values={{ name: PLUGIN_NAME }}
/> />
</h1> <EuiPageTemplate.Section grow={false}>
</EuiTitle>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody>
<navigation.ui.TopNavMenu <navigation.ui.TopNavMenu
appName={PLUGIN_ID} appName={PLUGIN_ID}
showSearchBar={true} showSearchBar={true}
@ -624,11 +614,10 @@ export const SearchExamplesApp = ({
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGrid> </EuiFlexGrid>
<EuiHorizontalRule /> <EuiSpacer size="xl" />
<EuiFlexGrid columns={2}> <EuiFlexGrid columns={2}>
<EuiFlexItem style={{ width: '40%' }}> <EuiFlexItem>
<EuiSpacer />
<EuiTitle size="s"> <EuiTitle size="s">
<h3> <h3>
Searching Elasticsearch using <EuiCode>data.search</EuiCode> Searching Elasticsearch using <EuiCode>data.search</EuiCode>
@ -754,9 +743,9 @@ export const SearchExamplesApp = ({
<h3>Writing a custom search strategy</h3> <h3>Writing a custom search strategy</h3>
</EuiTitle> </EuiTitle>
<EuiText> <EuiText>
If you want to do some pre or post processing on the server, you might want to If you want to do some pre or post processing on the server, you might want to create
create a custom search strategy. This example uses such a strategy, passing in a custom search strategy. This example uses such a strategy, passing in custom input
custom input and receiving custom output back. and receiving custom output back.
<EuiSpacer /> <EuiSpacer />
<EuiCheckbox <EuiCheckbox
id="GetCool" id="GetCool"
@ -798,10 +787,7 @@ export const SearchExamplesApp = ({
iconType="warning" iconType="warning"
data-test-subj="searchExamplesClearSession" data-test-subj="searchExamplesClearSession"
> >
<FormattedMessage <FormattedMessage id="searchExamples.clearSession" defaultMessage="Clear session" />
id="searchExamples.clearSession"
defaultMessage="Clear session"
/>
</EuiButtonEmpty> </EuiButtonEmpty>
<EuiButtonEmpty <EuiButtonEmpty
size="xs" size="xs"
@ -826,9 +812,9 @@ export const SearchExamplesApp = ({
server as well. server as well.
<br /> <br />
When executing search on the server, make sure to cancel the search in case user When executing search on the server, make sure to cancel the search in case user
cancels corresponding network request. This could happen in case user re-runs a cancels corresponding network request. This could happen in case user re-runs a query
query or leaves the page without waiting for the result. Cancellation API is similar or leaves the page without waiting for the result. Cancellation API is similar on
on client and server and use `AbortController`. client and server and use `AbortController`.
<EuiSpacer /> <EuiSpacer />
<EuiButtonEmpty size="xs" onClick={onServerClickHandler} iconType="play"> <EuiButtonEmpty size="xs" onClick={onServerClickHandler} iconType="play">
<FormattedMessage <FormattedMessage
@ -856,8 +842,7 @@ export const SearchExamplesApp = ({
)} )}
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGrid> </EuiFlexGrid>
</EuiPageContentBody> </EuiPageTemplate.Section>
</EuiPageContent> </>
</EuiPageBody>
); );
}; };

133
examples/search_examples/public/search_sessions/app.tsx
View file

@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
import useObservable from 'react-use/lib/useObservable'; import useObservable from 'react-use/lib/useObservable';
import { import {
EuiAccordion, EuiAccordion,
EuiButton,
EuiButtonEmpty, EuiButtonEmpty,
EuiCallOut, EuiCallOut,
EuiCode, EuiCode,
@ -20,11 +21,7 @@ import {
EuiFlexItem, EuiFlexItem,
EuiFormLabel, EuiFormLabel,
EuiLoadingSpinner, EuiLoadingSpinner,
EuiPageBody, EuiPageTemplate,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPageHeaderSection,
EuiSpacer, EuiSpacer,
EuiText, EuiText,
EuiTitle, EuiTitle,
@ -228,13 +225,9 @@ export const SearchSessionsExampleApp = ({
}, [search, state.restoreSessionId]); }, [search, state.restoreSessionId]);
return ( return (
<EuiPageBody> <>
<EuiPageHeader> <EuiPageTemplate.Header pageTitle="Search session example" />
<EuiPageHeaderSection> <EuiPageTemplate.Section grow={false}>
<EuiTitle size="l">
<h1>Search session example</h1>
</EuiTitle>
<EuiSpacer />
{!isShardDelayEnabled(data) && ( {!isShardDelayEnabled(data) && (
<> <>
<NoShardDelayCallout /> <NoShardDelayCallout />
@ -258,19 +251,17 @@ export const SearchSessionsExampleApp = ({
Follow this demo step-by-step:{' '} Follow this demo step-by-step:{' '}
<b>configure the query, start the search and then save your session.</b> You can save <b>configure the query, start the search and then save your session.</b> You can save
your session both when search is still in progress or when it is completed. After you your session both when search is still in progress or when it is completed. After you
save the session and when initial search is completed you can{' '} save the session and when initial search is completed you can <b>restore the session</b>
<b>restore the session</b>: the search will re-run reusing previous results. It will : the search will re-run reusing previous results. It will finish a lot faster then the
finish a lot faster then the initial search. You can also{' '} initial search. You can also <b>go to search sessions management</b> and{' '}
<b>go to search sessions management</b> and <b>get back to the stored results</b> from <b>get back to the stored results</b> from there.
there.
</p> </p>
</EuiText> </EuiText>
</EuiPageHeaderSection> </EuiPageTemplate.Section>
</EuiPageHeader> <>
<EuiPageContent>
<EuiPageContentBody>
{!isRestoring && ( {!isRestoring && (
<> <>
<EuiPageTemplate.Section grow={false}>
<EuiTitle size="s"> <EuiTitle size="s">
<h2>1. Configure the search query (OK to leave defaults)</h2> <h2>1. Configure the search query (OK to leave defaults)</h2>
</EuiTitle> </EuiTitle>
@ -313,22 +304,24 @@ export const SearchSessionsExampleApp = ({
/> />
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
<EuiSpacer size={'xl'} /> </EuiPageTemplate.Section>
<EuiPageTemplate.Section grow={false}>
<EuiTitle size="s"> <EuiTitle size="s">
<h2> <h2>
2. Start the search using <EuiCode>data.search</EuiCode> service 2. Start the search using <EuiCode>data.search</EuiCode> service
</h2> </h2>
</EuiTitle> </EuiTitle>
<EuiText style={{ maxWidth: 600 }}> <EuiSpacer size="s" />
<EuiText>
In this example each search creates a new session by calling{' '} In this example each search creates a new session by calling{' '}
<EuiCode>data.search.session.start()</EuiCode> that returns a{' '} <EuiCode>data.search.session.start()</EuiCode> that returns a{' '}
<EuiCode>searchSessionId</EuiCode>. Then this <EuiCode>searchSessionId</EuiCode> is <EuiCode>searchSessionId</EuiCode>. Then this <EuiCode>searchSessionId</EuiCode> is
passed into a search request. passed into a search request.
<EuiSpacer />
<div> <div>
{demoStep === DemoStep.ConfigureQuery && ( {demoStep === DemoStep.ConfigureQuery && (
<EuiButtonEmpty <EuiButtonEmpty
size="xs" flush="both"
onClick={() => search()} onClick={() => search()}
iconType="play" iconType="play"
disabled={isSearching || !dataView || !numericFieldName} disabled={isSearching || !dataView || !numericFieldName}
@ -337,33 +330,43 @@ export const SearchSessionsExampleApp = ({
Start the search from low-level client (data.search.search) Start the search from low-level client (data.search.search)
</EuiButtonEmpty> </EuiButtonEmpty>
)} )}
{isSearching && <EuiLoadingSpinner />}
{isSearching && (
<>
<EuiSpacer />
<EuiLoadingSpinner />
</>
)}
{response && request && ( {response && request && (
<>
<EuiSpacer />
<SearchInspector <SearchInspector
accordionId={'1'} accordionId={'1'}
request={request} request={request}
response={response} response={response}
tookMs={tookMs} tookMs={tookMs}
/> />
</>
)} )}
</div> </div>
</EuiText> </EuiText>
<EuiSpacer size={'xl'} /> </EuiPageTemplate.Section>
{(demoStep === DemoStep.RunSession || {(demoStep === DemoStep.RunSession ||
demoStep === DemoStep.RestoreSessionOnScreen || demoStep === DemoStep.RestoreSessionOnScreen ||
demoStep === DemoStep.SaveSession) && ( demoStep === DemoStep.SaveSession) && (
<> <EuiPageTemplate.Section grow={false}>
<EuiTitle size="s"> <EuiTitle size="s">
<h2>3. Save your session</h2> <h2>3. Save your session</h2>
</EuiTitle> </EuiTitle>
<EuiText style={{ maxWidth: 600 }}> <EuiSpacer size="s" />
Use the search session indicator in the Kibana header to save the search <EuiText>
session. Use the search session indicator in the Kibana header to save the search session.
<div> <div>
<EuiButtonEmpty <EuiButtonEmpty
size="xs" flush="both"
iconType={'save'} iconType="save"
onClick={() => { onClick={() => {
// hack for demo purposes: // hack for demo purposes:
document document
@ -380,24 +383,24 @@ export const SearchSessionsExampleApp = ({
</EuiButtonEmpty> </EuiButtonEmpty>
</div> </div>
</EuiText> </EuiText>
</> </EuiPageTemplate.Section>
)} )}
{(demoStep === DemoStep.RestoreSessionOnScreen || {(demoStep === DemoStep.RestoreSessionOnScreen ||
demoStep === DemoStep.SaveSession) && ( demoStep === DemoStep.SaveSession) && (
<> <EuiPageTemplate.Section grow={false}>
<EuiSpacer size={'xl'} />
<EuiTitle size="s"> <EuiTitle size="s">
<h2>4. Restore the session</h2> <h2>4. Restore the session</h2>
</EuiTitle> </EuiTitle>
<EuiText style={{ maxWidth: 600 }}> <EuiSpacer size="s" />
<EuiText>
Now you can restore your saved session. The same search request completes Now you can restore your saved session. The same search request completes
significantly faster because it reuses stored results. significantly faster because it reuses stored results.
<EuiSpacer />
<div> <div>
{!isSearching && !restoreResponse && ( {!isSearching && !restoreResponse && (
<EuiButtonEmpty <EuiButtonEmpty
size="xs" flush="both"
iconType={'refresh'} iconType="refresh"
onClick={() => { onClick={() => {
search(data.search.session.getSessionId()); search(data.search.session.getSessionId());
}} }}
@ -406,31 +409,42 @@ export const SearchSessionsExampleApp = ({
Restore the search session Restore the search session
</EuiButtonEmpty> </EuiButtonEmpty>
)} )}
{isSearching && <EuiLoadingSpinner />}
{isSearching && (
<>
<EuiSpacer />
<EuiLoadingSpinner />
</>
)}
{restoreRequest && restoreResponse && ( {restoreRequest && restoreResponse && (
<>
<EuiSpacer />
<SearchInspector <SearchInspector
accordionId={'2'} accordionId={'2'}
request={restoreRequest} request={restoreRequest}
response={restoreResponse} response={restoreResponse}
tookMs={restoreTookMs} tookMs={restoreTookMs}
/> />
</>
)} )}
</div> </div>
</EuiText> </EuiText>
</> </EuiPageTemplate.Section>
)} )}
{demoStep === DemoStep.RestoreSessionOnScreen && ( {demoStep === DemoStep.RestoreSessionOnScreen && (
<> <EuiPageTemplate.Section grow={false}>
<EuiSpacer size={'xl'} />
<EuiTitle size="s"> <EuiTitle size="s">
<h2>5. Restore from Management</h2> <h2>5. Restore from Management</h2>
</EuiTitle> </EuiTitle>
<EuiText style={{ maxWidth: 600 }}> <EuiSpacer size="s" />
<EuiText>
You can also get back to your session from the Search Session Management. You can also get back to your session from the Search Session Management.
<div> <div>
<EuiButtonEmpty <EuiButtonEmpty
size="xs" flush="both"
iconType="refresh"
onClick={() => { onClick={() => {
// hack for demo purposes: // hack for demo purposes:
document document
@ -443,17 +457,18 @@ export const SearchSessionsExampleApp = ({
</EuiButtonEmpty> </EuiButtonEmpty>
</div> </div>
</EuiText> </EuiText>
</> </EuiPageTemplate.Section>
)} )}
</> </>
)} )}
{isRestoring && ( {isRestoring && (
<> <EuiPageTemplate.Section grow={false}>
<EuiTitle size="s"> <EuiTitle size="s">
<h2>You restored the search session!</h2> <h2>You restored the search session!</h2>
</EuiTitle> </EuiTitle>
<EuiSpacer /> <EuiSpacer size="s" />
<EuiText style={{ maxWidth: 600 }}> <EuiText>
{isSearching && <EuiLoadingSpinner />} {isSearching && <EuiLoadingSpinner />}
{restoreRequest && restoreResponse && ( {restoreRequest && restoreResponse && (
@ -465,20 +480,20 @@ export const SearchSessionsExampleApp = ({
/> />
)} )}
</EuiText> </EuiText>
</> </EuiPageTemplate.Section>
)} )}
<EuiSpacer size={'xl'} /> <EuiPageTemplate.Section>
<EuiButtonEmpty <EuiButton
onClick={() => { onClick={() => {
// hack to quickly reset all the state and remove state stuff from the URL // hack to quickly reset all the state and remove state stuff from the URL
window.location.assign(window.location.href.split('?')[0]); window.location.assign(window.location.href.split('?')[0]);
}} }}
> >
Start again Start again
</EuiButtonEmpty> </EuiButton>
</EuiPageContentBody> </EuiPageTemplate.Section>
</EuiPageContent> </>
</EuiPageBody> </>
); );
}; };
@ -770,7 +785,9 @@ function NoShardDelayCallout() {
queries. <br /> queries. <br />
We recommend to enable it in your <EuiCode>kibana.dev.yml</EuiCode>: We recommend to enable it in your <EuiCode>kibana.dev.yml</EuiCode>:
</p> </p>
<EuiCodeBlock isCopyable={true}>data.search.aggs.shardDelay.enabled: true</EuiCodeBlock> <EuiCodeBlock isCopyable={true} language="yaml">
data.search.aggs.shardDelay.enabled: true
</EuiCodeBlock>
</EuiCallOut> </EuiCallOut>
); );
} }

29
examples/search_examples/public/sql_search/app.tsx
View file

@ -13,15 +13,12 @@ import {
EuiFlexGroup, EuiFlexGroup,
EuiFlexItem, EuiFlexItem,
EuiForm, EuiForm,
EuiPageBody, EuiPageTemplate,
EuiPageContent_Deprecated as EuiPageContent,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageHeader,
EuiPanel, EuiPanel,
EuiSuperUpdateButton, EuiSuperUpdateButton,
EuiText, EuiText,
EuiTextArea, EuiTextArea,
EuiTitle, EuiSpacer,
} from '@elastic/eui'; } from '@elastic/eui';
import { CoreStart } from '@kbn/core/public'; import { CoreStart } from '@kbn/core/public';
@ -87,14 +84,9 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
}; };
return ( return (
<EuiPageBody> <>
<EuiPageHeader> <EuiPageTemplate.Header pageTitle="SQL search example" />
<EuiTitle size="l"> <EuiPageTemplate.Section grow={false}>
<h1>SQL search example</h1>
</EuiTitle>
</EuiPageHeader>
<EuiPageContent>
<EuiPageContentBody>
<EuiForm> <EuiForm>
<EuiFlexGroup> <EuiFlexGroup>
<EuiFlexItem grow> <EuiFlexItem grow>
@ -119,9 +111,11 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
</EuiFlexGroup> </EuiFlexGroup>
</EuiForm> </EuiForm>
<EuiSpacer />
<EuiFlexGroup gutterSize="l"> <EuiFlexGroup gutterSize="l">
<EuiFlexItem grow style={{ minWidth: 0 }}> <EuiFlexItem grow style={{ minWidth: 0 }}>
<EuiPanel grow> <EuiPanel grow hasShadow={false} hasBorder>
<EuiText> <EuiText>
<h3>Request</h3> <h3>Request</h3>
</EuiText> </EuiText>
@ -139,7 +133,7 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
</EuiPanel> </EuiPanel>
</EuiFlexItem> </EuiFlexItem>
<EuiFlexItem grow style={{ minWidth: 0 }}> <EuiFlexItem grow style={{ minWidth: 0 }}>
<EuiPanel grow> <EuiPanel grow hasShadow={false} hasBorder>
<EuiText> <EuiText>
<h3>Response</h3> <h3>Response</h3>
</EuiText> </EuiText>
@ -157,8 +151,7 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
</EuiPanel> </EuiPanel>
</EuiFlexItem> </EuiFlexItem>
</EuiFlexGroup> </EuiFlexGroup>
</EuiPageContentBody> </EuiPageTemplate.Section>
</EuiPageContent> </>
</EuiPageBody>
); );
}; };

23
src/plugins/data_view_management/public/components/empty_index_list_prompt/__snapshots__/empty_index_list_prompt.test.tsx.snap generated
View file

@ -1,17 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EmptyIndexListPrompt should render normally 1`] = ` exports[`EmptyIndexListPrompt should render normally 1`] = `
<Fragment> <EuiPanel
<EuiPageContent_Deprecated
className="inpEmptyState" className="inpEmptyState"
color="subdued" color="subdued"
data-test-subj="indexPatternEmptyState" data-test-subj="indexPatternEmptyState"
grow={false} hasShadow={false}
horizontalPosition="center" paddingSize="xl"
verticalPosition="center"
> >
<EuiPageContentHeader_Deprecated> <EuiPageHeader>
<EuiPageContentHeaderSection_Deprecated>
<EuiTitle> <EuiTitle>
<h2> <h2>
<FormattedMessage <FormattedMessage
@ -21,12 +18,11 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
/> />
</h2> </h2>
</EuiTitle> </EuiTitle>
</EuiPageContentHeaderSection_Deprecated> </EuiPageHeader>
</EuiPageContentHeader_Deprecated>
<EuiSpacer <EuiSpacer
size="m" size="xl"
/> />
<EuiPageContentBody_Deprecated> <div>
<EuiFlexGrid <EuiFlexGrid
className="inpEmptyState__cardGrid" className="inpEmptyState__cardGrid"
columns={3} columns={3}
@ -212,7 +208,6 @@ exports[`EmptyIndexListPrompt should render normally 1`] = `
/> />
</EuiText> </EuiText>
</div> </div>
</EuiPageContentBody_Deprecated> </div>
</EuiPageContent_Deprecated> </EuiPanel>
</Fragment>
`; `;

34
src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx
View file

@ -8,13 +8,12 @@
import './empty_index_list_prompt.scss'; import './empty_index_list_prompt.scss';
import React from 'react'; import React from 'react';
import { css } from '@emotion/react';
import { FormattedMessage } from '@kbn/i18n-react'; import { FormattedMessage } from '@kbn/i18n-react';
import { import {
EuiPageContentHeader_Deprecated as EuiPageContentHeader, EuiPanel,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection, EuiPageHeader,
EuiTitle, EuiTitle,
EuiPageContentBody_Deprecated as EuiPageContentBody,
EuiPageContent_Deprecated as EuiPageContent,
EuiIcon, EuiIcon,
EuiSpacer, EuiSpacer,
EuiFlexItem, EuiFlexItem,
@ -25,7 +24,6 @@ import {
EuiText, EuiText,
EuiFlexGroup, EuiFlexGroup,
} from '@elastic/eui'; } from '@elastic/eui';
import { ApplicationStart } from '@kbn/core/public'; import { ApplicationStart } from '@kbn/core/public';
export const EmptyIndexListPrompt = ({ export const EmptyIndexListPrompt = ({
@ -61,17 +59,17 @@ export const EmptyIndexListPrompt = ({
); );
return ( return (
<> <EuiPanel
<EuiPageContent
className="inpEmptyState" className="inpEmptyState"
grow={false}
data-test-subj="indexPatternEmptyState" data-test-subj="indexPatternEmptyState"
verticalPosition="center"
horizontalPosition="center"
color="subdued" color="subdued"
hasShadow={false}
paddingSize="xl"
css={css`
margin: auto;
`}
> >
<EuiPageContentHeader> <EuiPageHeader>
<EuiPageContentHeaderSection>
<EuiTitle> <EuiTitle>
<h2> <h2>
<FormattedMessage <FormattedMessage
@ -80,10 +78,9 @@ export const EmptyIndexListPrompt = ({
/> />
</h2> </h2>
</EuiTitle> </EuiTitle>
</EuiPageContentHeaderSection> </EuiPageHeader>
</EuiPageContentHeader> <EuiSpacer size="xl" />
<EuiSpacer size="m" /> <div>
<EuiPageContentBody>
<EuiFlexGrid className="inpEmptyState__cardGrid" columns={3} responsive={true}> <EuiFlexGrid className="inpEmptyState__cardGrid" columns={3} responsive={true}>
<EuiFlexItem> <EuiFlexItem>
<EuiCard <EuiCard
@ -199,8 +196,7 @@ export const EmptyIndexListPrompt = ({
<EuiSpacer /> <EuiSpacer />
{canSaveIndexPattern && createAnywayLink} {canSaveIndexPattern && createAnywayLink}
</div> </div>
</EuiPageContentBody> </div>
</EuiPageContent> </EuiPanel>
</>
); );
}; };