mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Discover] Replace deprecated page components (#162836)
- 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
GitHub
parent
ffb716d8af
commit
148f9d757f
9 changed files with 975 additions and 1031 deletions
|
|
@ -13,11 +13,8 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiInMemoryTable,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageTemplate,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
useGeneratedHtmlId,
|
||||
} from '@elastic/eui';
|
||||
|
|
@ -86,6 +83,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
|
|||
const content = dataView ? (
|
||||
<>
|
||||
<EuiText data-test-subj="dataViewTitle">Data view: {dataView.title}</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiFlexGroup alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiButton
|
||||
|
|
@ -118,6 +116,7 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiInMemoryTable<DataViewField>
|
||||
items={fields}
|
||||
columns={columns}
|
||||
|
|
@ -136,14 +135,10 @@ const DataViewFieldEditorExample = ({ dataView, dataViewFieldEditor }: Props) =>
|
|||
);
|
||||
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageBody>
|
||||
<EuiPageHeader>Data view field editor demo</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContentBody>{content}</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
<EuiPageTemplate offset={0}>
|
||||
<EuiPageTemplate.Header pageTitle="Data view field editor demo" />
|
||||
<EuiPageTemplate.Section>{content}</EuiPageTemplate.Section>
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -13,12 +13,7 @@ import {
|
|||
EuiCode,
|
||||
EuiCodeBlock,
|
||||
EuiLink,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPageTemplate,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
|
|
@ -61,7 +56,7 @@ const UsingAnExistingFieldFormatExample: React.FC<{ deps: Deps }> = (props) => {
|
|||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiCodeBlock>{example1SampleCode}</EuiCodeBlock>
|
||||
<EuiCodeBlock language="jsx">{example1SampleCode}</EuiCodeBlock>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiBasicTable
|
||||
data-test-subj={'example1 sample table'}
|
||||
|
|
@ -97,11 +92,11 @@ const CreatingCustomFieldFormat: React.FC<{ deps: Deps }> = (props) => {
|
|||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiCodeBlock>{example2SampleCodePart1}</EuiCodeBlock>
|
||||
<EuiCodeBlock language="jsx">{example2SampleCodePart1}</EuiCodeBlock>
|
||||
<EuiSpacer size={'xs'} />
|
||||
<EuiCodeBlock>{example2SampleCodePart2}</EuiCodeBlock>
|
||||
<EuiCodeBlock language="jsx">{example2SampleCodePart2}</EuiCodeBlock>
|
||||
<EuiSpacer size={'xs'} />
|
||||
<EuiCodeBlock>{example2SampleCodePart3}</EuiCodeBlock>
|
||||
<EuiCodeBlock language="jsx">{example2SampleCodePart3}</EuiCodeBlock>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiBasicTable
|
||||
items={sample}
|
||||
|
|
@ -151,7 +146,7 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
|
|||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'s'} />
|
||||
<EuiCodeBlock>{example3SampleCode}</EuiCodeBlock>
|
||||
<EuiCodeBlock language="jsx">{example3SampleCode}</EuiCodeBlock>
|
||||
<EuiSpacer size={'s'} />
|
||||
|
||||
<EuiCallOut
|
||||
|
|
@ -173,45 +168,29 @@ const CreatingCustomFieldFormatEditor: React.FC<{ deps: Deps }> = (props) => {
|
|||
|
||||
export const App: React.FC<{ deps: Deps }> = (props) => {
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||
<EuiPageHeader>
|
||||
<EuiPageHeaderSection>
|
||||
<EuiTitle size="l">
|
||||
<h1>Field formats examples</h1>
|
||||
</EuiTitle>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
|
||||
<section>
|
||||
<EuiTitle size="m">
|
||||
<h2>Using an existing field format</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<UsingAnExistingFieldFormatExample deps={props.deps} />
|
||||
</section>
|
||||
<EuiSpacer />
|
||||
<EuiSpacer />
|
||||
<section>
|
||||
<EuiTitle size="m">
|
||||
<h2>Creating a custom field format</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<CreatingCustomFieldFormat deps={props.deps} />
|
||||
</section>
|
||||
<EuiSpacer />
|
||||
<EuiSpacer />
|
||||
<section>
|
||||
<EuiTitle size="m">
|
||||
<h2>Creating a custom field format editor</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<CreatingCustomFieldFormatEditor deps={props.deps} />
|
||||
</section>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
<EuiPageTemplate offset={0}>
|
||||
<EuiPageTemplate.Header pageTitle="Field formats examples" />
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="m">
|
||||
<h2>Using an existing field format</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<UsingAnExistingFieldFormatExample deps={props.deps} />
|
||||
</EuiPageTemplate.Section>
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="m">
|
||||
<h2>Creating a custom field format</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<CreatingCustomFieldFormat deps={props.deps} />
|
||||
</EuiPageTemplate.Section>
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="m">
|
||||
<h2>Creating a custom field format editor</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<CreatingCustomFieldFormatEditor deps={props.deps} />
|
||||
</EuiPageTemplate.Section>
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,15 +12,9 @@ import {
|
|||
EuiBasicTable,
|
||||
EuiCallOut,
|
||||
EuiCodeBlock,
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPageTemplate,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
} from '@elastic/eui';
|
||||
import type { Datatable } from '@kbn/expressions-plugin/common';
|
||||
import { ExpressionsContext } from './expressions_context';
|
||||
|
|
@ -46,45 +40,35 @@ export function App() {
|
|||
}, [expressions]);
|
||||
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
|
||||
<EuiPageHeader>
|
||||
<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">
|
||||
<p>
|
||||
This example listens for the window events and adds them to the table along with a
|
||||
trigger counter.
|
||||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'m'} />
|
||||
<EuiCodeBlock>{expression}</EuiCodeBlock>
|
||||
<EuiSpacer size={'m'} />
|
||||
{datatable ? (
|
||||
<EuiBasicTable
|
||||
textOnly={true}
|
||||
data-test-subj={'example-table'}
|
||||
columns={datatable.columns?.map(({ id: field, name }) => ({
|
||||
field,
|
||||
name,
|
||||
'data-test-subj': `example-column-${field.toLowerCase()}`,
|
||||
}))}
|
||||
items={datatable.rows ?? []}
|
||||
/>
|
||||
) : (
|
||||
<EuiCallOut color="success">
|
||||
<p>Click or press any key.</p>
|
||||
</EuiCallOut>
|
||||
)}
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
<EuiPageTemplate offset={0}>
|
||||
<EuiPageTemplate.Header pageTitle="Partial Results Demo" />
|
||||
<EuiPageTemplate.Section>
|
||||
<EuiText data-test-subj="example-help">
|
||||
<p>
|
||||
This example listens for the window events and adds them to the table along with a
|
||||
trigger counter.
|
||||
</p>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'m'} />
|
||||
<EuiCodeBlock>{expression}</EuiCodeBlock>
|
||||
<EuiSpacer size={'m'} />
|
||||
{datatable ? (
|
||||
<EuiBasicTable
|
||||
textOnly={true}
|
||||
data-test-subj={'example-table'}
|
||||
columns={datatable.columns?.map(({ id: field, name }) => ({
|
||||
field,
|
||||
name,
|
||||
'data-test-subj': `example-column-${field.toLowerCase()}`,
|
||||
}))}
|
||||
items={datatable.rows ?? []}
|
||||
/>
|
||||
) : (
|
||||
<EuiCallOut color="success">
|
||||
<p>Click or press any key.</p>
|
||||
</EuiCallOut>
|
||||
)}
|
||||
</EuiPageTemplate.Section>
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
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 { PLUGIN_ID } from '../../common';
|
||||
|
||||
|
|
@ -55,11 +55,11 @@ export const SearchExamplePage: React.FC<Props> = ({
|
|||
basePath,
|
||||
}: PropsWithChildren<Props>) => {
|
||||
return (
|
||||
<EuiPage>
|
||||
<EuiPageSideBar>
|
||||
<EuiPageTemplate offset={0}>
|
||||
<EuiPageTemplate.Sidebar>
|
||||
<SideNav exampleLinks={exampleLinks} basePath={basePath} />
|
||||
</EuiPageSideBar>
|
||||
</EuiPageTemplate.Sidebar>
|
||||
{children}
|
||||
</EuiPage>
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -16,11 +16,7 @@ import {
|
|||
EuiFlexGrid,
|
||||
EuiFlexItem,
|
||||
EuiFormLabel,
|
||||
EuiHorizontalRule,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageTemplate,
|
||||
EuiProgress,
|
||||
EuiSpacer,
|
||||
EuiTabbedContent,
|
||||
|
|
@ -531,333 +527,322 @@ export const SearchExamplesApp = ({
|
|||
];
|
||||
|
||||
return (
|
||||
<EuiPageBody>
|
||||
<EuiPageHeader>
|
||||
<EuiTitle size="l">
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id="searchExamples.helloWorldText"
|
||||
defaultMessage="{name}"
|
||||
values={{ name: PLUGIN_NAME }}
|
||||
<>
|
||||
<EuiPageTemplate.Header
|
||||
pageTitle={i18n.translate('searchExamples.helloWorldText', {
|
||||
defaultMessage: '{name}',
|
||||
values: { name: PLUGIN_NAME },
|
||||
})}
|
||||
/>
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<navigation.ui.TopNavMenu
|
||||
appName={PLUGIN_ID}
|
||||
showSearchBar={true}
|
||||
useDefaultBehaviors={true}
|
||||
indexPatterns={dataView ? [dataView] : undefined}
|
||||
/>
|
||||
<EuiFlexGrid columns={4}>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Data view</EuiFormLabel>
|
||||
<IndexPatternSelect
|
||||
placeholder={i18n.translate('searchSessionExample.selectDataViewPlaceholder', {
|
||||
defaultMessage: 'Select data view',
|
||||
})}
|
||||
indexPatternId={dataView?.id || ''}
|
||||
onChange={async (dataViewId?: string) => {
|
||||
if (dataViewId) {
|
||||
const newDataView = await data.dataViews.get(dataViewId);
|
||||
setDataView(newDataView);
|
||||
} else {
|
||||
setDataView(undefined);
|
||||
}
|
||||
}}
|
||||
isClearable={false}
|
||||
data-test-subj="dataViewSelector"
|
||||
/>
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContentBody>
|
||||
<navigation.ui.TopNavMenu
|
||||
appName={PLUGIN_ID}
|
||||
showSearchBar={true}
|
||||
useDefaultBehaviors={true}
|
||||
indexPatterns={dataView ? [dataView] : undefined}
|
||||
/>
|
||||
<EuiFlexGrid columns={4}>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Data view</EuiFormLabel>
|
||||
<IndexPatternSelect
|
||||
placeholder={i18n.translate('searchSessionExample.selectDataViewPlaceholder', {
|
||||
defaultMessage: 'Select data view',
|
||||
})}
|
||||
indexPatternId={dataView?.id || ''}
|
||||
onChange={async (dataViewId?: string) => {
|
||||
if (dataViewId) {
|
||||
const newDataView = await data.dataViews.get(dataViewId);
|
||||
setDataView(newDataView);
|
||||
} else {
|
||||
setDataView(undefined);
|
||||
}
|
||||
}}
|
||||
isClearable={false}
|
||||
data-test-subj="dataViewSelector"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Field (using {bucketAggType} buckets)</EuiFormLabel>
|
||||
<EuiComboBox
|
||||
options={formatFieldsToComboBox(getAggregatableStrings(fields))}
|
||||
selectedOptions={formatFieldToComboBox(selectedBucketField)}
|
||||
singleSelection={true}
|
||||
onChange={(option) => {
|
||||
if (option.length) {
|
||||
const fld = dataView?.getFieldByName(option[0].label);
|
||||
setSelectedBucketField(fld || null);
|
||||
} else {
|
||||
setSelectedBucketField(null);
|
||||
}
|
||||
}}
|
||||
sortMatchesBy="startsWith"
|
||||
data-test-subj="searchBucketField"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Numeric Field (using {metricAggType} metrics)</EuiFormLabel>
|
||||
<EuiComboBox
|
||||
options={formatFieldsToComboBox(getNumeric(fields))}
|
||||
selectedOptions={formatFieldToComboBox(selectedNumericField)}
|
||||
singleSelection={true}
|
||||
onChange={(option) => {
|
||||
if (option.length) {
|
||||
const fld = dataView?.getFieldByName(option[0].label);
|
||||
setSelectedNumericField(fld || null);
|
||||
} else {
|
||||
setSelectedNumericField(null);
|
||||
}
|
||||
}}
|
||||
sortMatchesBy="startsWith"
|
||||
data-test-subj="searchMetricField"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Fields to queryString</EuiFormLabel>
|
||||
<EuiComboBox
|
||||
options={formatFieldsToComboBox(fields)}
|
||||
selectedOptions={formatFieldsToComboBox(selectedFields)}
|
||||
singleSelection={false}
|
||||
onChange={(option) => {
|
||||
const flds = option
|
||||
.map((opt) => dataView?.getFieldByName(opt?.label))
|
||||
.filter((f) => f);
|
||||
setSelectedFields(flds.length ? (flds as DataViewField[]) : []);
|
||||
}}
|
||||
sortMatchesBy="startsWith"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Field (using {bucketAggType} buckets)</EuiFormLabel>
|
||||
<EuiComboBox
|
||||
options={formatFieldsToComboBox(getAggregatableStrings(fields))}
|
||||
selectedOptions={formatFieldToComboBox(selectedBucketField)}
|
||||
singleSelection={true}
|
||||
onChange={(option) => {
|
||||
if (option.length) {
|
||||
const fld = dataView?.getFieldByName(option[0].label);
|
||||
setSelectedBucketField(fld || null);
|
||||
} else {
|
||||
setSelectedBucketField(null);
|
||||
}
|
||||
}}
|
||||
sortMatchesBy="startsWith"
|
||||
data-test-subj="searchBucketField"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Numeric Field (using {metricAggType} metrics)</EuiFormLabel>
|
||||
<EuiComboBox
|
||||
options={formatFieldsToComboBox(getNumeric(fields))}
|
||||
selectedOptions={formatFieldToComboBox(selectedNumericField)}
|
||||
singleSelection={true}
|
||||
onChange={(option) => {
|
||||
if (option.length) {
|
||||
const fld = dataView?.getFieldByName(option[0].label);
|
||||
setSelectedNumericField(fld || null);
|
||||
} else {
|
||||
setSelectedNumericField(null);
|
||||
}
|
||||
}}
|
||||
sortMatchesBy="startsWith"
|
||||
data-test-subj="searchMetricField"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFormLabel>Fields to queryString</EuiFormLabel>
|
||||
<EuiComboBox
|
||||
options={formatFieldsToComboBox(fields)}
|
||||
selectedOptions={formatFieldsToComboBox(selectedFields)}
|
||||
singleSelection={false}
|
||||
onChange={(option) => {
|
||||
const flds = option
|
||||
.map((opt) => dataView?.getFieldByName(opt?.label))
|
||||
.filter((f) => f);
|
||||
setSelectedFields(flds.length ? (flds as DataViewField[]) : []);
|
||||
}}
|
||||
sortMatchesBy="startsWith"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
|
||||
<EuiHorizontalRule />
|
||||
<EuiSpacer size="xl" />
|
||||
|
||||
<EuiFlexGrid columns={2}>
|
||||
<EuiFlexItem style={{ width: '40%' }}>
|
||||
<EuiFlexGrid columns={2}>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="s">
|
||||
<h3>
|
||||
Searching Elasticsearch using <EuiCode>data.search</EuiCode>
|
||||
</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
If you want to fetch data from Elasticsearch, you can use the different services
|
||||
provided by the <EuiCode>data</EuiCode> plugin. These help you get the data view and
|
||||
search bar configuration, format them into a DSL query and send it to Elasticsearch.
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>
|
||||
Searching Elasticsearch using <EuiCode>data.search</EuiCode>
|
||||
</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
If you want to fetch data from Elasticsearch, you can use the different services
|
||||
provided by the <EuiCode>data</EuiCode> plugin. These help you get the data view and
|
||||
search bar configuration, format them into a DSL query and send it to Elasticsearch.
|
||||
<EuiSpacer />
|
||||
<EuiButtonEmpty size="xs" onClick={onClickHandler} iconType="play">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Request from low-level client (data.search.search)."
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText size="xs" color="subdued" className="searchExampleStepDsc">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Metrics aggregation with raw documents in response."
|
||||
/>
|
||||
</EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => onSearchSourceClickHandler(true, true)}
|
||||
iconType="play"
|
||||
data-test-subj="searchSourceWithOther"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchSource.buttonText"
|
||||
defaultMessage="Request from high-level client (data.search.searchSource)"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText size="xs" color="subdued" className="searchExampleStepDsc">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Bucket and metrics aggregations, with other bucket and default warnings."
|
||||
/>
|
||||
</EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => onSearchSourceClickHandler(false, false)}
|
||||
iconType="play"
|
||||
data-test-subj="searchSourceWithoutOther"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchSource.buttonText"
|
||||
defaultMessage="Request from high-level client (data.search.searchSource)"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText size="xs" color="subdued" className="searchExampleStepDsc">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Bucket and metrics aggregations, without other bucket and with custom logic to handle warnings."
|
||||
/>
|
||||
</EuiText>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="xs">
|
||||
<h3>Handling errors & warnings</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
When fetching data from Elasticsearch, there are several different ways warnings and
|
||||
errors may be returned. In general, it is recommended to surface these in the UX.
|
||||
<EuiSpacer />
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onWarningSearchClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="searchWithWarning"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchWithWarningButtonText"
|
||||
defaultMessage="Request with a warning in response"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText />
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onErrorSearchClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="searchWithError"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchWithErrorButtonText"
|
||||
defaultMessage="Request with an error in response"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="xs">
|
||||
<h3>Handling partial results</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
The observable returned from <EuiCode>data.search</EuiCode> provides partial results
|
||||
when the response is not yet complete. These can be handled to update a chart or
|
||||
simply a progress bar:
|
||||
<EuiSpacer />
|
||||
<EuiCodeBlock language="html" fontSize="s" paddingSize="s" overflowHeight={450}>
|
||||
<EuiProgress value={response.loaded} max={response.total}
|
||||
/>
|
||||
</EuiCodeBlock>
|
||||
Below is an example showing a custom search strategy that emits partial Fibonacci
|
||||
sequences up to the length provided, updates the response with each partial result,
|
||||
and updates a progress bar (see the Response tab).
|
||||
<EuiFieldNumber
|
||||
id="FibonacciN"
|
||||
placeholder="Number of Fibonacci numbers to generate"
|
||||
value={fibonacciN}
|
||||
onChange={(event) => setFibonacciN(parseInt(event.target.value, 10))}
|
||||
<EuiButtonEmpty size="xs" onClick={onClickHandler} iconType="play">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Request from low-level client (data.search.search)."
|
||||
/>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onPartialResultsClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="requestFibonacci"
|
||||
>
|
||||
Request Fibonacci sequence
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>Writing a custom search strategy</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
If you want to do some pre or post processing on the server, you might want to
|
||||
create a custom search strategy. This example uses such a strategy, passing in
|
||||
custom input and receiving custom output back.
|
||||
<EuiSpacer />
|
||||
<EuiCheckbox
|
||||
id="GetCool"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="searchExamples.getCoolCheckbox"
|
||||
defaultMessage="Get cool parameter?"
|
||||
/>
|
||||
}
|
||||
checked={getCool}
|
||||
onChange={(event) => setGetCool(event.target.checked)}
|
||||
</EuiButtonEmpty>
|
||||
<EuiText size="xs" color="subdued" className="searchExampleStepDsc">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Metrics aggregation with raw documents in response."
|
||||
/>
|
||||
<EuiButtonEmpty size="xs" onClick={onMyStrategyClickHandler} iconType="play">
|
||||
<FormattedMessage
|
||||
id="searchExamples.myStrategyButtonText"
|
||||
defaultMessage="Request from low-level client via My Strategy"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => onSearchSourceClickHandler(true, true)}
|
||||
iconType="play"
|
||||
data-test-subj="searchSourceWithOther"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchSource.buttonText"
|
||||
defaultMessage="Request from high-level client (data.search.searchSource)"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText size="xs" color="subdued" className="searchExampleStepDsc">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Bucket and metrics aggregations, with other bucket and default warnings."
|
||||
/>
|
||||
</EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => onSearchSourceClickHandler(false, false)}
|
||||
iconType="play"
|
||||
data-test-subj="searchSourceWithoutOther"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchSource.buttonText"
|
||||
defaultMessage="Request from high-level client (data.search.searchSource)"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText size="xs" color="subdued" className="searchExampleStepDsc">
|
||||
<FormattedMessage
|
||||
id="searchExamples.buttonText"
|
||||
defaultMessage="Bucket and metrics aggregations, without other bucket and with custom logic to handle warnings."
|
||||
/>
|
||||
</EuiText>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="xs">
|
||||
<h3>Handling errors & warnings</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
When fetching data from Elasticsearch, there are several different ways warnings and
|
||||
errors may be returned. In general, it is recommended to surface these in the UX.
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>Client side search session caching</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => data.search.session.start()}
|
||||
iconType="warning"
|
||||
data-test-subj="searchExamplesStartSession"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.startNewSession"
|
||||
defaultMessage="Start a new session"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => data.search.session.clear()}
|
||||
iconType="warning"
|
||||
data-test-subj="searchExamplesClearSession"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.clearSession"
|
||||
defaultMessage="Clear session"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onClientSideSessionCacheClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="searchExamplesCacheSearch"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.myStrategyButtonText"
|
||||
defaultMessage="Request from low-level client via My Strategy"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onWarningSearchClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="searchWithWarning"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchWithWarningButtonText"
|
||||
defaultMessage="Request with a warning in response"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiText />
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onErrorSearchClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="searchWithError"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.searchWithErrorButtonText"
|
||||
defaultMessage="Request with an error in response"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="xs">
|
||||
<h3>Handling partial results</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
The observable returned from <EuiCode>data.search</EuiCode> provides partial results
|
||||
when the response is not yet complete. These can be handled to update a chart or
|
||||
simply a progress bar:
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>Using search on the server</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
You can also run your search request from the server, without registering a search
|
||||
strategy. This request does not take the configuration of{' '}
|
||||
<EuiCode>TopNavMenu</EuiCode> into account, but you could pass those down to the
|
||||
server as well.
|
||||
<br />
|
||||
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
|
||||
query or leaves the page without waiting for the result. Cancellation API is similar
|
||||
on client and server and use `AbortController`.
|
||||
<EuiSpacer />
|
||||
<EuiButtonEmpty size="xs" onClick={onServerClickHandler} iconType="play">
|
||||
<FormattedMessage
|
||||
id="searchExamples.myServerButtonText"
|
||||
defaultMessage="Request from low-level client on the server"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem style={{ width: '60%' }}>
|
||||
<EuiTabbedContent
|
||||
tabs={reqTabs}
|
||||
selectedTab={reqTabs[selectedTab]}
|
||||
onTabClick={(tab) => setSelectedTab(reqTabs.indexOf(tab))}
|
||||
<EuiCodeBlock language="html" fontSize="s" paddingSize="s" overflowHeight={450}>
|
||||
<EuiProgress value={response.loaded} max={response.total}
|
||||
/>
|
||||
</EuiCodeBlock>
|
||||
Below is an example showing a custom search strategy that emits partial Fibonacci
|
||||
sequences up to the length provided, updates the response with each partial result,
|
||||
and updates a progress bar (see the Response tab).
|
||||
<EuiFieldNumber
|
||||
id="FibonacciN"
|
||||
placeholder="Number of Fibonacci numbers to generate"
|
||||
value={fibonacciN}
|
||||
onChange={(event) => setFibonacciN(parseInt(event.target.value, 10))}
|
||||
/>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onPartialResultsClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="requestFibonacci"
|
||||
>
|
||||
Request Fibonacci sequence
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>Writing a custom search strategy</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
If you want to do some pre or post processing on the server, you might want to create
|
||||
a custom search strategy. This example uses such a strategy, passing in custom input
|
||||
and receiving custom output back.
|
||||
<EuiSpacer />
|
||||
{currentAbortController && isLoading && (
|
||||
<EuiButtonEmpty size="xs" onClick={() => currentAbortController?.abort()}>
|
||||
<EuiCheckbox
|
||||
id="GetCool"
|
||||
label={
|
||||
<FormattedMessage
|
||||
id="searchExamples.abortButtonText"
|
||||
defaultMessage="Abort request"
|
||||
id="searchExamples.getCoolCheckbox"
|
||||
defaultMessage="Get cool parameter?"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
}
|
||||
checked={getCool}
|
||||
onChange={(event) => setGetCool(event.target.checked)}
|
||||
/>
|
||||
<EuiButtonEmpty size="xs" onClick={onMyStrategyClickHandler} iconType="play">
|
||||
<FormattedMessage
|
||||
id="searchExamples.myStrategyButtonText"
|
||||
defaultMessage="Request from low-level client via My Strategy"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>Client side search session caching</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => data.search.session.start()}
|
||||
iconType="warning"
|
||||
data-test-subj="searchExamplesStartSession"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.startNewSession"
|
||||
defaultMessage="Start a new session"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => data.search.session.clear()}
|
||||
iconType="warning"
|
||||
data-test-subj="searchExamplesClearSession"
|
||||
>
|
||||
<FormattedMessage id="searchExamples.clearSession" defaultMessage="Clear session" />
|
||||
</EuiButtonEmpty>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={onClientSideSessionCacheClickHandler}
|
||||
iconType="play"
|
||||
data-test-subj="searchExamplesCacheSearch"
|
||||
>
|
||||
<FormattedMessage
|
||||
id="searchExamples.myStrategyButtonText"
|
||||
defaultMessage="Request from low-level client via My Strategy"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
<EuiSpacer />
|
||||
<EuiTitle size="s">
|
||||
<h3>Using search on the server</h3>
|
||||
</EuiTitle>
|
||||
<EuiText>
|
||||
You can also run your search request from the server, without registering a search
|
||||
strategy. This request does not take the configuration of{' '}
|
||||
<EuiCode>TopNavMenu</EuiCode> into account, but you could pass those down to the
|
||||
server as well.
|
||||
<br />
|
||||
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 query
|
||||
or leaves the page without waiting for the result. Cancellation API is similar on
|
||||
client and server and use `AbortController`.
|
||||
<EuiSpacer />
|
||||
<EuiButtonEmpty size="xs" onClick={onServerClickHandler} iconType="play">
|
||||
<FormattedMessage
|
||||
id="searchExamples.myServerButtonText"
|
||||
defaultMessage="Request from low-level client on the server"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem style={{ width: '60%' }}>
|
||||
<EuiTabbedContent
|
||||
tabs={reqTabs}
|
||||
selectedTab={reqTabs[selectedTab]}
|
||||
onTabClick={(tab) => setSelectedTab(reqTabs.indexOf(tab))}
|
||||
/>
|
||||
<EuiSpacer />
|
||||
{currentAbortController && isLoading && (
|
||||
<EuiButtonEmpty size="xs" onClick={() => currentAbortController?.abort()}>
|
||||
<FormattedMessage
|
||||
id="searchExamples.abortButtonText"
|
||||
defaultMessage="Abort request"
|
||||
/>
|
||||
</EuiButtonEmpty>
|
||||
)}
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
</EuiPageTemplate.Section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
|
|||
import useObservable from 'react-use/lib/useObservable';
|
||||
import {
|
||||
EuiAccordion,
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiCallOut,
|
||||
EuiCode,
|
||||
|
|
@ -20,11 +21,7 @@ import {
|
|||
EuiFlexItem,
|
||||
EuiFormLabel,
|
||||
EuiLoadingSpinner,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPageTemplate,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
EuiTitle,
|
||||
|
|
@ -228,49 +225,43 @@ export const SearchSessionsExampleApp = ({
|
|||
}, [search, state.restoreSessionId]);
|
||||
|
||||
return (
|
||||
<EuiPageBody>
|
||||
<EuiPageHeader>
|
||||
<EuiPageHeaderSection>
|
||||
<EuiTitle size="l">
|
||||
<h1>Search session example</h1>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
{!isShardDelayEnabled(data) && (
|
||||
<>
|
||||
<NoShardDelayCallout />
|
||||
<EuiSpacer />
|
||||
</>
|
||||
)}
|
||||
{!dataView && (
|
||||
<>
|
||||
<NoDataViewsCallout />
|
||||
<EuiSpacer />
|
||||
</>
|
||||
)}
|
||||
<EuiText>
|
||||
<p>
|
||||
This example shows how you can use <EuiCode>data.search.session</EuiCode> service to
|
||||
group your searches into a search session and allow user to save search results for
|
||||
later. <br />
|
||||
Start a long-running search, save the session and then restore it. See how fast search
|
||||
is completed when restoring the session comparing to when doing initial search. <br />
|
||||
<br />
|
||||
Follow this demo step-by-step:{' '}
|
||||
<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
|
||||
save the session and when initial search is completed you can{' '}
|
||||
<b>restore the session</b>: the search will re-run reusing previous results. It will
|
||||
finish a lot faster then the initial search. You can also{' '}
|
||||
<b>go to search sessions management</b> and <b>get back to the stored results</b> from
|
||||
there.
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContentBody>
|
||||
{!isRestoring && (
|
||||
<>
|
||||
<>
|
||||
<EuiPageTemplate.Header pageTitle="Search session example" />
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
{!isShardDelayEnabled(data) && (
|
||||
<>
|
||||
<NoShardDelayCallout />
|
||||
<EuiSpacer />
|
||||
</>
|
||||
)}
|
||||
{!dataView && (
|
||||
<>
|
||||
<NoDataViewsCallout />
|
||||
<EuiSpacer />
|
||||
</>
|
||||
)}
|
||||
<EuiText>
|
||||
<p>
|
||||
This example shows how you can use <EuiCode>data.search.session</EuiCode> service to
|
||||
group your searches into a search session and allow user to save search results for
|
||||
later. <br />
|
||||
Start a long-running search, save the session and then restore it. See how fast search
|
||||
is completed when restoring the session comparing to when doing initial search. <br />
|
||||
<br />
|
||||
Follow this demo step-by-step:{' '}
|
||||
<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
|
||||
save the session and when initial search is completed you can <b>restore the session</b>
|
||||
: the search will re-run reusing previous results. It will finish a lot faster then the
|
||||
initial search. You can also <b>go to search sessions management</b> and{' '}
|
||||
<b>get back to the stored results</b> from there.
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Section>
|
||||
<>
|
||||
{!isRestoring && (
|
||||
<>
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="s">
|
||||
<h2>1. Configure the search query (OK to leave defaults)</h2>
|
||||
</EuiTitle>
|
||||
|
|
@ -313,22 +304,24 @@ export const SearchSessionsExampleApp = ({
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size={'xl'} />
|
||||
</EuiPageTemplate.Section>
|
||||
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="s">
|
||||
<h2>
|
||||
2. Start the search using <EuiCode>data.search</EuiCode> service
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
<EuiText style={{ maxWidth: 600 }}>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText>
|
||||
In this example each search creates a new session by calling{' '}
|
||||
<EuiCode>data.search.session.start()</EuiCode> that returns a{' '}
|
||||
<EuiCode>searchSessionId</EuiCode>. Then this <EuiCode>searchSessionId</EuiCode> is
|
||||
passed into a search request.
|
||||
<EuiSpacer />
|
||||
<div>
|
||||
{demoStep === DemoStep.ConfigureQuery && (
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
flush="both"
|
||||
onClick={() => search()}
|
||||
iconType="play"
|
||||
disabled={isSearching || !dataView || !numericFieldName}
|
||||
|
|
@ -337,148 +330,170 @@ export const SearchSessionsExampleApp = ({
|
|||
Start the search from low-level client (data.search.search)
|
||||
</EuiButtonEmpty>
|
||||
)}
|
||||
{isSearching && <EuiLoadingSpinner />}
|
||||
|
||||
{isSearching && (
|
||||
<>
|
||||
<EuiSpacer />
|
||||
<EuiLoadingSpinner />
|
||||
</>
|
||||
)}
|
||||
|
||||
{response && request && (
|
||||
<SearchInspector
|
||||
accordionId={'1'}
|
||||
request={request}
|
||||
response={response}
|
||||
tookMs={tookMs}
|
||||
/>
|
||||
<>
|
||||
<EuiSpacer />
|
||||
<SearchInspector
|
||||
accordionId={'1'}
|
||||
request={request}
|
||||
response={response}
|
||||
tookMs={tookMs}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</EuiText>
|
||||
<EuiSpacer size={'xl'} />
|
||||
{(demoStep === DemoStep.RunSession ||
|
||||
demoStep === DemoStep.RestoreSessionOnScreen ||
|
||||
demoStep === DemoStep.SaveSession) && (
|
||||
<>
|
||||
<EuiTitle size="s">
|
||||
<h2>3. Save your session</h2>
|
||||
</EuiTitle>
|
||||
<EuiText style={{ maxWidth: 600 }}>
|
||||
Use the search session indicator in the Kibana header to save the search
|
||||
session.
|
||||
<div>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
iconType={'save'}
|
||||
onClick={() => {
|
||||
// hack for demo purposes:
|
||||
document
|
||||
.querySelector('[data-test-subj="searchSessionIndicator"]')
|
||||
?.querySelector('button')
|
||||
?.click();
|
||||
}}
|
||||
isDisabled={
|
||||
demoStep === DemoStep.RestoreSessionOnScreen ||
|
||||
demoStep === DemoStep.SaveSession
|
||||
}
|
||||
>
|
||||
Try saving the session using the search session indicator in the header.
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
</EuiText>
|
||||
</>
|
||||
)}
|
||||
{(demoStep === DemoStep.RestoreSessionOnScreen ||
|
||||
demoStep === DemoStep.SaveSession) && (
|
||||
<>
|
||||
<EuiSpacer size={'xl'} />
|
||||
<EuiTitle size="s">
|
||||
<h2>4. Restore the session</h2>
|
||||
</EuiTitle>
|
||||
<EuiText style={{ maxWidth: 600 }}>
|
||||
Now you can restore your saved session. The same search request completes
|
||||
significantly faster because it reuses stored results.
|
||||
<EuiSpacer />
|
||||
<div>
|
||||
{!isSearching && !restoreResponse && (
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
iconType={'refresh'}
|
||||
onClick={() => {
|
||||
search(data.search.session.getSessionId());
|
||||
}}
|
||||
data-test-subj={'restoreSearch'}
|
||||
>
|
||||
Restore the search session
|
||||
</EuiButtonEmpty>
|
||||
)}
|
||||
{isSearching && <EuiLoadingSpinner />}
|
||||
</EuiPageTemplate.Section>
|
||||
|
||||
{restoreRequest && restoreResponse && (
|
||||
{(demoStep === DemoStep.RunSession ||
|
||||
demoStep === DemoStep.RestoreSessionOnScreen ||
|
||||
demoStep === DemoStep.SaveSession) && (
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="s">
|
||||
<h2>3. Save your session</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText>
|
||||
Use the search session indicator in the Kibana header to save the search session.
|
||||
<div>
|
||||
<EuiButtonEmpty
|
||||
flush="both"
|
||||
iconType="save"
|
||||
onClick={() => {
|
||||
// hack for demo purposes:
|
||||
document
|
||||
.querySelector('[data-test-subj="searchSessionIndicator"]')
|
||||
?.querySelector('button')
|
||||
?.click();
|
||||
}}
|
||||
isDisabled={
|
||||
demoStep === DemoStep.RestoreSessionOnScreen ||
|
||||
demoStep === DemoStep.SaveSession
|
||||
}
|
||||
>
|
||||
Try saving the session using the search session indicator in the header.
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Section>
|
||||
)}
|
||||
|
||||
{(demoStep === DemoStep.RestoreSessionOnScreen ||
|
||||
demoStep === DemoStep.SaveSession) && (
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="s">
|
||||
<h2>4. Restore the session</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText>
|
||||
Now you can restore your saved session. The same search request completes
|
||||
significantly faster because it reuses stored results.
|
||||
<div>
|
||||
{!isSearching && !restoreResponse && (
|
||||
<EuiButtonEmpty
|
||||
flush="both"
|
||||
iconType="refresh"
|
||||
onClick={() => {
|
||||
search(data.search.session.getSessionId());
|
||||
}}
|
||||
data-test-subj={'restoreSearch'}
|
||||
>
|
||||
Restore the search session
|
||||
</EuiButtonEmpty>
|
||||
)}
|
||||
|
||||
{isSearching && (
|
||||
<>
|
||||
<EuiSpacer />
|
||||
<EuiLoadingSpinner />
|
||||
</>
|
||||
)}
|
||||
|
||||
{restoreRequest && restoreResponse && (
|
||||
<>
|
||||
<EuiSpacer />
|
||||
<SearchInspector
|
||||
accordionId={'2'}
|
||||
request={restoreRequest}
|
||||
response={restoreResponse}
|
||||
tookMs={restoreTookMs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</EuiText>
|
||||
</>
|
||||
)}
|
||||
{demoStep === DemoStep.RestoreSessionOnScreen && (
|
||||
<>
|
||||
<EuiSpacer size={'xl'} />
|
||||
<EuiTitle size="s">
|
||||
<h2>5. Restore from Management</h2>
|
||||
</EuiTitle>
|
||||
<EuiText style={{ maxWidth: 600 }}>
|
||||
You can also get back to your session from the Search Session Management.
|
||||
<div>
|
||||
<EuiButtonEmpty
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
// hack for demo purposes:
|
||||
document
|
||||
.querySelector('[data-test-subj="searchSessionIndicator"]')
|
||||
?.querySelector('button')
|
||||
?.click();
|
||||
}}
|
||||
>
|
||||
Use Search Session indicator to navigate to management
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
</EuiText>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isRestoring && (
|
||||
<>
|
||||
<EuiTitle size="s">
|
||||
<h2>You restored the search session!</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<EuiText style={{ maxWidth: 600 }}>
|
||||
{isSearching && <EuiLoadingSpinner />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Section>
|
||||
)}
|
||||
|
||||
{restoreRequest && restoreResponse && (
|
||||
<SearchInspector
|
||||
accordionId={'2'}
|
||||
request={restoreRequest}
|
||||
response={restoreResponse}
|
||||
tookMs={restoreTookMs}
|
||||
/>
|
||||
)}
|
||||
</EuiText>
|
||||
</>
|
||||
)}
|
||||
<EuiSpacer size={'xl'} />
|
||||
<EuiButtonEmpty
|
||||
{demoStep === DemoStep.RestoreSessionOnScreen && (
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="s">
|
||||
<h2>5. Restore from Management</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText>
|
||||
You can also get back to your session from the Search Session Management.
|
||||
<div>
|
||||
<EuiButtonEmpty
|
||||
flush="both"
|
||||
iconType="refresh"
|
||||
onClick={() => {
|
||||
// hack for demo purposes:
|
||||
document
|
||||
.querySelector('[data-test-subj="searchSessionIndicator"]')
|
||||
?.querySelector('button')
|
||||
?.click();
|
||||
}}
|
||||
>
|
||||
Use Search Session indicator to navigate to management
|
||||
</EuiButtonEmpty>
|
||||
</div>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Section>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{isRestoring && (
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiTitle size="s">
|
||||
<h2>You restored the search session!</h2>
|
||||
</EuiTitle>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiText>
|
||||
{isSearching && <EuiLoadingSpinner />}
|
||||
|
||||
{restoreRequest && restoreResponse && (
|
||||
<SearchInspector
|
||||
accordionId={'2'}
|
||||
request={restoreRequest}
|
||||
response={restoreResponse}
|
||||
tookMs={restoreTookMs}
|
||||
/>
|
||||
)}
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Section>
|
||||
)}
|
||||
<EuiPageTemplate.Section>
|
||||
<EuiButton
|
||||
onClick={() => {
|
||||
// hack to quickly reset all the state and remove state stuff from the URL
|
||||
window.location.assign(window.location.href.split('?')[0]);
|
||||
}}
|
||||
>
|
||||
Start again
|
||||
</EuiButtonEmpty>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiButton>
|
||||
</EuiPageTemplate.Section>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -770,7 +785,9 @@ function NoShardDelayCallout() {
|
|||
queries. <br />
|
||||
We recommend to enable it in your <EuiCode>kibana.dev.yml</EuiCode>:
|
||||
</p>
|
||||
<EuiCodeBlock isCopyable={true}>data.search.aggs.shardDelay.enabled: true</EuiCodeBlock>
|
||||
<EuiCodeBlock isCopyable={true} language="yaml">
|
||||
data.search.aggs.shardDelay.enabled: true
|
||||
</EuiCodeBlock>
|
||||
</EuiCallOut>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,15 +13,12 @@ import {
|
|||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiForm,
|
||||
EuiPageBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageHeader,
|
||||
EuiPageTemplate,
|
||||
EuiPanel,
|
||||
EuiSuperUpdateButton,
|
||||
EuiText,
|
||||
EuiTextArea,
|
||||
EuiTitle,
|
||||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { CoreStart } from '@kbn/core/public';
|
||||
|
|
@ -87,78 +84,74 @@ export const SqlSearchExampleApp = ({ notifications, data }: SearchExamplesAppDe
|
|||
};
|
||||
|
||||
return (
|
||||
<EuiPageBody>
|
||||
<EuiPageHeader>
|
||||
<EuiTitle size="l">
|
||||
<h1>SQL search example</h1>
|
||||
</EuiTitle>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContent>
|
||||
<EuiPageContentBody>
|
||||
<EuiForm>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow>
|
||||
<EuiTextArea
|
||||
placeholder="SELECT * FROM library ORDER BY page_count DESC"
|
||||
aria-label="SQL query to run"
|
||||
value={sqlQuery}
|
||||
onChange={(e) => setSqlQuery(e.target.value)}
|
||||
fullWidth
|
||||
data-test-subj="sqlQueryInput"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSuperUpdateButton
|
||||
isLoading={isLoading}
|
||||
isDisabled={sqlQuery.length === 0}
|
||||
onClick={doSearch}
|
||||
fill={true}
|
||||
data-test-subj="querySubmitButton"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiForm>
|
||||
|
||||
<EuiFlexGroup gutterSize="l">
|
||||
<EuiFlexItem grow style={{ minWidth: 0 }}>
|
||||
<EuiPanel grow>
|
||||
<EuiText>
|
||||
<h3>Request</h3>
|
||||
</EuiText>
|
||||
<EuiCodeBlock
|
||||
language="json"
|
||||
fontSize="s"
|
||||
paddingSize="s"
|
||||
overflowHeight={720}
|
||||
isCopyable
|
||||
data-test-subj="requestCodeBlock"
|
||||
isVirtualized
|
||||
>
|
||||
{JSON.stringify(request, null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</EuiPanel>
|
||||
<>
|
||||
<EuiPageTemplate.Header pageTitle="SQL search example" />
|
||||
<EuiPageTemplate.Section grow={false}>
|
||||
<EuiForm>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow>
|
||||
<EuiTextArea
|
||||
placeholder="SELECT * FROM library ORDER BY page_count DESC"
|
||||
aria-label="SQL query to run"
|
||||
value={sqlQuery}
|
||||
onChange={(e) => setSqlQuery(e.target.value)}
|
||||
fullWidth
|
||||
data-test-subj="sqlQueryInput"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow style={{ minWidth: 0 }}>
|
||||
<EuiPanel grow>
|
||||
<EuiText>
|
||||
<h3>Response</h3>
|
||||
</EuiText>
|
||||
<EuiCodeBlock
|
||||
language="json"
|
||||
fontSize="s"
|
||||
paddingSize="s"
|
||||
isCopyable
|
||||
data-test-subj="responseCodeBlock"
|
||||
overflowHeight={720}
|
||||
isVirtualized
|
||||
>
|
||||
{JSON.stringify(rawResponse, null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</EuiPanel>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiSuperUpdateButton
|
||||
isLoading={isLoading}
|
||||
isDisabled={sqlQuery.length === 0}
|
||||
onClick={doSearch}
|
||||
fill={true}
|
||||
data-test-subj="querySubmitButton"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</EuiPageBody>
|
||||
</EuiForm>
|
||||
|
||||
<EuiSpacer />
|
||||
|
||||
<EuiFlexGroup gutterSize="l">
|
||||
<EuiFlexItem grow style={{ minWidth: 0 }}>
|
||||
<EuiPanel grow hasShadow={false} hasBorder>
|
||||
<EuiText>
|
||||
<h3>Request</h3>
|
||||
</EuiText>
|
||||
<EuiCodeBlock
|
||||
language="json"
|
||||
fontSize="s"
|
||||
paddingSize="s"
|
||||
overflowHeight={720}
|
||||
isCopyable
|
||||
data-test-subj="requestCodeBlock"
|
||||
isVirtualized
|
||||
>
|
||||
{JSON.stringify(request, null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow style={{ minWidth: 0 }}>
|
||||
<EuiPanel grow hasShadow={false} hasBorder>
|
||||
<EuiText>
|
||||
<h3>Response</h3>
|
||||
</EuiText>
|
||||
<EuiCodeBlock
|
||||
language="json"
|
||||
fontSize="s"
|
||||
paddingSize="s"
|
||||
isCopyable
|
||||
data-test-subj="responseCodeBlock"
|
||||
overflowHeight={720}
|
||||
isVirtualized
|
||||
>
|
||||
{JSON.stringify(rawResponse, null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPageTemplate.Section>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,218 +1,213 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`EmptyIndexListPrompt should render normally 1`] = `
|
||||
<Fragment>
|
||||
<EuiPageContent_Deprecated
|
||||
className="inpEmptyState"
|
||||
color="subdued"
|
||||
data-test-subj="indexPatternEmptyState"
|
||||
grow={false}
|
||||
horizontalPosition="center"
|
||||
verticalPosition="center"
|
||||
>
|
||||
<EuiPageContentHeader_Deprecated>
|
||||
<EuiPageContentHeaderSection_Deprecated>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<EuiPanel
|
||||
className="inpEmptyState"
|
||||
color="subdued"
|
||||
data-test-subj="indexPatternEmptyState"
|
||||
hasShadow={false}
|
||||
paddingSize="xl"
|
||||
>
|
||||
<EuiPageHeader>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
defaultMessage="Ready to try Kibana? First, you need data."
|
||||
id="indexPatternManagement.createDataView.emptyState.noDataTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageHeader>
|
||||
<EuiSpacer
|
||||
size="xl"
|
||||
/>
|
||||
<div>
|
||||
<EuiFlexGrid
|
||||
className="inpEmptyState__cardGrid"
|
||||
columns={3}
|
||||
responsive={true}
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
description={
|
||||
<FormattedMessage
|
||||
defaultMessage="Ready to try Kibana? First, you need data."
|
||||
id="indexPatternManagement.createDataView.emptyState.noDataTitle"
|
||||
defaultMessage="Add data from a variety of sources."
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardDescription"
|
||||
values={Object {}}
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageContentHeaderSection_Deprecated>
|
||||
</EuiPageContentHeader_Deprecated>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
color="subdued"
|
||||
size="xl"
|
||||
type="database"
|
||||
/>
|
||||
}
|
||||
onClick={[Function]}
|
||||
title={
|
||||
<FormattedMessage
|
||||
defaultMessage="Add integration"
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
description={
|
||||
<FormattedMessage
|
||||
defaultMessage="Import a CSV, NDJSON, or log file."
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardDescription"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
color="subdued"
|
||||
size="xl"
|
||||
type="document"
|
||||
/>
|
||||
}
|
||||
onClick={[Function]}
|
||||
title={
|
||||
<FormattedMessage
|
||||
defaultMessage="Upload a file"
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
description={
|
||||
<FormattedMessage
|
||||
defaultMessage="Load a data set and a Kibana dashboard."
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardDescription"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
color="subdued"
|
||||
size="xl"
|
||||
type="heatmap"
|
||||
/>
|
||||
}
|
||||
onClick={[Function]}
|
||||
title={
|
||||
<FormattedMessage
|
||||
defaultMessage="Add sample data"
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
<EuiSpacer
|
||||
size="m"
|
||||
size="xxl"
|
||||
/>
|
||||
<EuiPageContentBody_Deprecated>
|
||||
<EuiFlexGrid
|
||||
className="inpEmptyState__cardGrid"
|
||||
columns={3}
|
||||
responsive={true}
|
||||
<div
|
||||
className="inpEmptyState__footer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
description={
|
||||
<FormattedMessage
|
||||
defaultMessage="Add data from a variety of sources."
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardDescription"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
color="subdued"
|
||||
size="xl"
|
||||
type="database"
|
||||
/>
|
||||
}
|
||||
onClick={[Function]}
|
||||
title={
|
||||
<FormattedMessage
|
||||
defaultMessage="Add integration"
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
description={
|
||||
<FormattedMessage
|
||||
defaultMessage="Import a CSV, NDJSON, or log file."
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardDescription"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
color="subdued"
|
||||
size="xl"
|
||||
type="document"
|
||||
/>
|
||||
}
|
||||
onClick={[Function]}
|
||||
title={
|
||||
<FormattedMessage
|
||||
defaultMessage="Upload a file"
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
description={
|
||||
<FormattedMessage
|
||||
defaultMessage="Load a data set and a Kibana dashboard."
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardDescription"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
icon={
|
||||
<EuiIcon
|
||||
color="subdued"
|
||||
size="xl"
|
||||
type="heatmap"
|
||||
/>
|
||||
}
|
||||
onClick={[Function]}
|
||||
title={
|
||||
<FormattedMessage
|
||||
defaultMessage="Add sample data"
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardTitle"
|
||||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
<EuiSpacer
|
||||
size="xxl"
|
||||
/>
|
||||
<div
|
||||
className="inpEmptyState__footer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
justifyContent="center"
|
||||
<EuiFlexItem
|
||||
className="inpEmptyState__footerFlexItem"
|
||||
grow={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="inpEmptyState__footerFlexItem"
|
||||
grow={false}
|
||||
>
|
||||
<EuiDescriptionList
|
||||
listItems={
|
||||
Array [
|
||||
Object {
|
||||
"description": <EuiLink
|
||||
external={true}
|
||||
href="http://elastic.co"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Read documentation"
|
||||
id="indexPatternManagement.createDataView.emptyState.readDocs"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
"title": <FormattedMessage
|
||||
defaultMessage="Want to learn more?"
|
||||
id="indexPatternManagement.createDataView.emptyState.learnMore"
|
||||
<EuiDescriptionList
|
||||
listItems={
|
||||
Array [
|
||||
Object {
|
||||
"description": <EuiLink
|
||||
external={true}
|
||||
href="http://elastic.co"
|
||||
target="_blank"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Read documentation"
|
||||
id="indexPatternManagement.createDataView.emptyState.readDocs"
|
||||
values={Object {}}
|
||||
/>,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="inpEmptyState__footerFlexItem"
|
||||
grow={false}
|
||||
>
|
||||
<EuiDescriptionList
|
||||
listItems={
|
||||
Array [
|
||||
Object {
|
||||
"description": <EuiLink
|
||||
data-test-subj="refreshIndicesButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Check for new data"
|
||||
id="indexPatternManagement.createDataView.emptyState.checkDataButton"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
||||
<EuiIcon
|
||||
size="s"
|
||||
type="refresh"
|
||||
/>
|
||||
</EuiLink>,
|
||||
"title": <FormattedMessage
|
||||
defaultMessage="Think you already have data?"
|
||||
id="indexPatternManagement.createDataView.emptyState.haveData"
|
||||
values={Object {}}
|
||||
/>,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer />
|
||||
<EuiText
|
||||
color="subdued"
|
||||
size="xs"
|
||||
textAlign="center"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="You can also {link}"
|
||||
id="indexPatternManagement.createDataView.emptyState.createAnywayTxt"
|
||||
values={
|
||||
Object {
|
||||
"link": <EuiLink
|
||||
data-test-subj="createAnyway"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="create a data view against hidden, system or default indices."
|
||||
id="indexPatternManagement.createDataView.emptyState.createAnywayLink"
|
||||
/>
|
||||
</EuiLink>,
|
||||
"title": <FormattedMessage
|
||||
defaultMessage="Want to learn more?"
|
||||
id="indexPatternManagement.createDataView.emptyState.learnMore"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
}
|
||||
/>,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</EuiText>
|
||||
</div>
|
||||
</EuiPageContentBody_Deprecated>
|
||||
</EuiPageContent_Deprecated>
|
||||
</Fragment>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="inpEmptyState__footerFlexItem"
|
||||
grow={false}
|
||||
>
|
||||
<EuiDescriptionList
|
||||
listItems={
|
||||
Array [
|
||||
Object {
|
||||
"description": <EuiLink
|
||||
data-test-subj="refreshIndicesButton"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="Check for new data"
|
||||
id="indexPatternManagement.createDataView.emptyState.checkDataButton"
|
||||
values={Object {}}
|
||||
/>
|
||||
|
||||
<EuiIcon
|
||||
size="s"
|
||||
type="refresh"
|
||||
/>
|
||||
</EuiLink>,
|
||||
"title": <FormattedMessage
|
||||
defaultMessage="Think you already have data?"
|
||||
id="indexPatternManagement.createDataView.emptyState.haveData"
|
||||
values={Object {}}
|
||||
/>,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer />
|
||||
<EuiText
|
||||
color="subdued"
|
||||
size="xs"
|
||||
textAlign="center"
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="You can also {link}"
|
||||
id="indexPatternManagement.createDataView.emptyState.createAnywayTxt"
|
||||
values={
|
||||
Object {
|
||||
"link": <EuiLink
|
||||
data-test-subj="createAnyway"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="create a data view against hidden, system or default indices."
|
||||
id="indexPatternManagement.createDataView.emptyState.createAnywayLink"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiLink>,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</EuiText>
|
||||
</div>
|
||||
</div>
|
||||
</EuiPanel>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -8,13 +8,12 @@
|
|||
|
||||
import './empty_index_list_prompt.scss';
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import {
|
||||
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
|
||||
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
|
||||
EuiPanel,
|
||||
EuiPageHeader,
|
||||
EuiTitle,
|
||||
EuiPageContentBody_Deprecated as EuiPageContentBody,
|
||||
EuiPageContent_Deprecated as EuiPageContent,
|
||||
EuiIcon,
|
||||
EuiSpacer,
|
||||
EuiFlexItem,
|
||||
|
|
@ -25,7 +24,6 @@ import {
|
|||
EuiText,
|
||||
EuiFlexGroup,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { ApplicationStart } from '@kbn/core/public';
|
||||
|
||||
export const EmptyIndexListPrompt = ({
|
||||
|
|
@ -61,146 +59,144 @@ export const EmptyIndexListPrompt = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<EuiPageContent
|
||||
className="inpEmptyState"
|
||||
grow={false}
|
||||
data-test-subj="indexPatternEmptyState"
|
||||
verticalPosition="center"
|
||||
horizontalPosition="center"
|
||||
color="subdued"
|
||||
>
|
||||
<EuiPageContentHeader>
|
||||
<EuiPageContentHeaderSection>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<EuiPanel
|
||||
className="inpEmptyState"
|
||||
data-test-subj="indexPatternEmptyState"
|
||||
color="subdued"
|
||||
hasShadow={false}
|
||||
paddingSize="xl"
|
||||
css={css`
|
||||
margin: auto;
|
||||
`}
|
||||
>
|
||||
<EuiPageHeader>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.noDataTitle"
|
||||
defaultMessage="Ready to try Kibana? First, you need data."
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageHeader>
|
||||
<EuiSpacer size="xl" />
|
||||
<div>
|
||||
<EuiFlexGrid className="inpEmptyState__cardGrid" columns={3} responsive={true}>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
onClick={() => {
|
||||
navigateToApp('integrations', { path: '/browse' });
|
||||
}}
|
||||
icon={<EuiIcon size="xl" type="database" color="subdued" />}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.noDataTitle"
|
||||
defaultMessage="Ready to try Kibana? First, you need data."
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardTitle"
|
||||
defaultMessage="Add integration"
|
||||
/>
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiPageContentHeaderSection>
|
||||
</EuiPageContentHeader>
|
||||
<EuiSpacer size="m" />
|
||||
<EuiPageContentBody>
|
||||
<EuiFlexGrid className="inpEmptyState__cardGrid" columns={3} responsive={true}>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
onClick={() => {
|
||||
navigateToApp('integrations', { path: '/browse' });
|
||||
}}
|
||||
icon={<EuiIcon size="xl" type="database" color="subdued" />}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardTitle"
|
||||
defaultMessage="Add integration"
|
||||
/>
|
||||
}
|
||||
description={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardDescription"
|
||||
defaultMessage="Add data from a variety of sources."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
onClick={() => navigateToApp('home', { path: '#/tutorial_directory/fileDataViz' })}
|
||||
className="inpEmptyState__card"
|
||||
icon={<EuiIcon size="xl" type="document" color="subdued" />}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardTitle"
|
||||
defaultMessage="Upload a file"
|
||||
/>
|
||||
}
|
||||
description={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardDescription"
|
||||
defaultMessage="Import a CSV, NDJSON, or log file."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
onClick={() => {
|
||||
navigateToApp('home', { path: '#/tutorial_directory/sampleData' });
|
||||
}}
|
||||
icon={<EuiIcon size="xl" type="heatmap" color="subdued" />}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardTitle"
|
||||
defaultMessage="Add sample data"
|
||||
/>
|
||||
}
|
||||
description={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardDescription"
|
||||
defaultMessage="Load a data set and a Kibana dashboard."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
<EuiSpacer size="xxl" />
|
||||
<div className="inpEmptyState__footer">
|
||||
<EuiFlexGroup justifyContent="center">
|
||||
<EuiFlexItem grow={false} className="inpEmptyState__footerFlexItem">
|
||||
<EuiDescriptionList
|
||||
listItems={[
|
||||
{
|
||||
title: (
|
||||
}
|
||||
description={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.integrationCardDescription"
|
||||
defaultMessage="Add data from a variety of sources."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
onClick={() => navigateToApp('home', { path: '#/tutorial_directory/fileDataViz' })}
|
||||
className="inpEmptyState__card"
|
||||
icon={<EuiIcon size="xl" type="document" color="subdued" />}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardTitle"
|
||||
defaultMessage="Upload a file"
|
||||
/>
|
||||
}
|
||||
description={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.uploadCardDescription"
|
||||
defaultMessage="Import a CSV, NDJSON, or log file."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiCard
|
||||
className="inpEmptyState__card"
|
||||
onClick={() => {
|
||||
navigateToApp('home', { path: '#/tutorial_directory/sampleData' });
|
||||
}}
|
||||
icon={<EuiIcon size="xl" type="heatmap" color="subdued" />}
|
||||
title={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardTitle"
|
||||
defaultMessage="Add sample data"
|
||||
/>
|
||||
}
|
||||
description={
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.sampleDataCardDescription"
|
||||
defaultMessage="Load a data set and a Kibana dashboard."
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGrid>
|
||||
<EuiSpacer size="xxl" />
|
||||
<div className="inpEmptyState__footer">
|
||||
<EuiFlexGroup justifyContent="center">
|
||||
<EuiFlexItem grow={false} className="inpEmptyState__footerFlexItem">
|
||||
<EuiDescriptionList
|
||||
listItems={[
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.learnMore"
|
||||
defaultMessage="Want to learn more?"
|
||||
/>
|
||||
),
|
||||
description: (
|
||||
<EuiLink href={addDataUrl} target="_blank" external>
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.learnMore"
|
||||
defaultMessage="Want to learn more?"
|
||||
id="indexPatternManagement.createDataView.emptyState.readDocs"
|
||||
defaultMessage="Read documentation"
|
||||
/>
|
||||
),
|
||||
description: (
|
||||
<EuiLink href={addDataUrl} target="_blank" external>
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.readDocs"
|
||||
defaultMessage="Read documentation"
|
||||
/>
|
||||
</EuiLink>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} className="inpEmptyState__footerFlexItem">
|
||||
<EuiDescriptionList
|
||||
listItems={[
|
||||
{
|
||||
title: (
|
||||
</EuiLink>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false} className="inpEmptyState__footerFlexItem">
|
||||
<EuiDescriptionList
|
||||
listItems={[
|
||||
{
|
||||
title: (
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.haveData"
|
||||
defaultMessage="Think you already have data?"
|
||||
/>
|
||||
),
|
||||
description: (
|
||||
<EuiLink onClick={onRefresh} data-test-subj="refreshIndicesButton">
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.haveData"
|
||||
defaultMessage="Think you already have data?"
|
||||
/>
|
||||
),
|
||||
description: (
|
||||
<EuiLink onClick={onRefresh} data-test-subj="refreshIndicesButton">
|
||||
<FormattedMessage
|
||||
id="indexPatternManagement.createDataView.emptyState.checkDataButton"
|
||||
defaultMessage="Check for new data"
|
||||
/>{' '}
|
||||
<EuiIcon type="refresh" size="s" />
|
||||
</EuiLink>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer />
|
||||
{canSaveIndexPattern && createAnywayLink}
|
||||
</div>
|
||||
</EuiPageContentBody>
|
||||
</EuiPageContent>
|
||||
</>
|
||||
id="indexPatternManagement.createDataView.emptyState.checkDataButton"
|
||||
defaultMessage="Check for new data"
|
||||
/>{' '}
|
||||
<EuiIcon type="refresh" size="s" />
|
||||
</EuiLink>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer />
|
||||
{canSaveIndexPattern && createAnywayLink}
|
||||
</div>
|
||||
</div>
|
||||
</EuiPanel>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue