forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[8.9] ESRE landing page panels and links (elastic#159851)
## Summary This PR follows elastic#159809 and adds content to the expandable accordion sections. The 1st accorion (ELSER) is open by default on page visit. We're also adding links in the sections, which point to documentation or to internal Kibana pages (e.g. Behavioral Analytics, Trained Models). New entries are being added to the doc links files.  ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [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)) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Liam Thompson <32779855+leemthompo@users.noreply.github.com>
- Loading branch information
3 people
committed
Jun 20, 2023
1 parent
f233933
commit 2422c01
Showing
13 changed files
with
743 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
.../plugins/enterprise_search/public/applications/esre/components/esre_guide/elser_panel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import { generatePath } from 'react-router-dom'; | ||
|
|
||
| import { | ||
| EuiButton, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiLink, | ||
| EuiSpacer, | ||
| EuiSteps, | ||
| EuiText, | ||
| } from '@elastic/eui'; | ||
| import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
|
|
||
| import { ENTERPRISE_SEARCH_CONTENT_PLUGIN } from '../../../../../common/constants'; | ||
| import { NEW_INDEX_PATH } from '../../../enterprise_search_content/routes'; | ||
| import { docLinks } from '../../../shared/doc_links'; | ||
| import { EuiLinkTo } from '../../../shared/react_router_helpers'; | ||
|
|
||
| const steps: EuiContainedStepProps[] = [ | ||
| { | ||
| title: i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step1.title', { | ||
| defaultMessage: 'Create an index', | ||
| }), | ||
| children: ( | ||
| <EuiLinkTo | ||
| to={generatePath(ENTERPRISE_SEARCH_CONTENT_PLUGIN.URL + NEW_INDEX_PATH)} | ||
| shouldNotCreateHref | ||
| > | ||
| <EuiButton iconType="plusInCircle"> | ||
| {i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step1.buttonLabel', { | ||
| defaultMessage: 'Create an index', | ||
| })} | ||
| </EuiButton> | ||
| </EuiLinkTo> | ||
| ), | ||
| status: 'incomplete', | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step2.title', { | ||
| defaultMessage: "Navigate to index's Pipelines tab", | ||
| }), | ||
| children: ( | ||
| <EuiText> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.enterpriseSearch.esre.elserPanel.step2.description" | ||
| defaultMessage="After creating an index, select it and click the tab called {pipelinesName}." | ||
| values={{ | ||
| pipelinesName: ( | ||
| <strong> | ||
| " | ||
| {i18n.translate( | ||
| 'xpack.enterpriseSearch.esre.elserPanel.step2.description.pipelinesName', | ||
| { | ||
| defaultMessage: 'Pipelines', | ||
| } | ||
| )} | ||
| " | ||
| </strong> | ||
| ), | ||
| }} | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| ), | ||
| status: 'incomplete', | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.enterpriseSearch.esre.elserPanel.step3.title', { | ||
| defaultMessage: 'Follow the on-screen instructions to deploy ELSER', | ||
| }), | ||
| children: ( | ||
| <EuiText> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.enterpriseSearch.esre.elserPanel.step3.description" | ||
| defaultMessage="Locate the panel that allows you to one click deploy ELSER and create an inference pipeline using that model." | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| ), | ||
| status: 'incomplete', | ||
| }, | ||
| ]; | ||
|
|
||
| export const ElserPanel: React.FC = () => ( | ||
| <> | ||
| <EuiSpacer /> | ||
| <EuiFlexGroup direction="column"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.enterpriseSearch.esre.elser.description" | ||
| defaultMessage="Effortlessly deploy the {elser} for instant text semantic search capabilities in just a few clicks. This model expands your document and query text using the 'text_expansion' field, delivering seamless search out of the box." | ||
| values={{ | ||
| elser: ( | ||
| <EuiLink target="_blank" href={docLinks.elser} external={false}> | ||
| {i18n.translate('xpack.enterpriseSearch.esre.elser.description.elserLinkText', { | ||
| defaultMessage: 'Elastic Learned Sparse Encoder', | ||
| })} | ||
| </EuiLink> | ||
| ), | ||
| }} | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiSteps steps={steps} titleSize="xs" /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 82 additions & 0 deletions
82
...rprise_search/public/applications/esre/components/esre_guide/linear_combination_panel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import { generatePath } from 'react-router-dom'; | ||
|
|
||
| import { | ||
| EuiButton, | ||
| EuiFlexGroup, | ||
| EuiFlexItem, | ||
| EuiLink, | ||
| EuiSpacer, | ||
| EuiSteps, | ||
| EuiText, | ||
| } from '@elastic/eui'; | ||
| import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
|
|
||
| import { DEV_TOOLS_CONSOLE_PATH } from '../../../enterprise_search_content/routes'; | ||
| import { docLinks } from '../../../shared/doc_links'; | ||
| import { EuiLinkTo } from '../../../shared/react_router_helpers'; | ||
|
|
||
| const steps: EuiContainedStepProps[] = [ | ||
| { | ||
| title: i18n.translate('xpack.enterpriseSearch.esre.linearCombinationPanel.step1.title', { | ||
| defaultMessage: 'Discover how to use linear combination in _search queries', | ||
| }), | ||
| children: ( | ||
| <EuiLink href={docLinks.knnSearchCombine} target="_blank" external> | ||
| {i18n.translate( | ||
| 'xpack.enterpriseSearch.esre.linearCombinationPanel.step1.knnSearchCombineLinkText', | ||
| { | ||
| defaultMessage: 'Combine approximate kNN with other features', | ||
| } | ||
| )} | ||
| </EuiLink> | ||
| ), | ||
| status: 'incomplete', | ||
| }, | ||
| { | ||
| title: i18n.translate('xpack.enterpriseSearch.esre.linearCombinationPanel.step2.title', { | ||
| defaultMessage: 'Try it today in Console', | ||
| }), | ||
| children: ( | ||
| <EuiLinkTo to={generatePath(DEV_TOOLS_CONSOLE_PATH)} shouldNotCreateHref> | ||
| <EuiButton> | ||
| {i18n.translate('xpack.enterpriseSearch.esre.linearCombinationPanel.step2.buttonLabel', { | ||
| defaultMessage: 'Open Console', | ||
| })} | ||
| </EuiButton> | ||
| </EuiLinkTo> | ||
| ), | ||
| status: 'incomplete', | ||
| }, | ||
| ]; | ||
|
|
||
| export const LinearCombinationPanel: React.FC = () => ( | ||
| <> | ||
| <EuiSpacer /> | ||
| <EuiFlexGroup direction="column"> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiText> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.enterpriseSearch.esre.linearCombinationPanel.description" | ||
| defaultMessage="Used to calculate a similarity score or distance between data points. Combines attributes or features using weights, which enables customized relevance factors." | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem grow={false}> | ||
| <EuiSteps steps={steps} titleSize="xs" /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| </> | ||
| ); |
Oops, something went wrong.