[Serverless Search] Adding pipeline section on the Serverless Search landing page (#171892)

## Summary

Closes https://github.com/elastic/enterprise-search-team/issues/6236

Adding a new section(pipeline) to transform the ingested data further.

![Screenshot 2023-11-27 at 3 18
01 PM](5a45eba5-48c6-4550-97bd-eeac91a01bdf)


### Checklist

Delete any items that are not applicable to this PR.

- [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)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [X] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [X] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [X] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [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)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Samiul Monir 2023-11-29 14:00:44 -05:00 committed by GitHub
parent 9f86c05d03
commit 552680f92c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 253 additions and 2 deletions

View file

@ -18,6 +18,7 @@ class ESDocLinks {
public metadata: string = '';
public roleDescriptors: string = '';
public securityApis: string = '';
public ingestionPipelines: string = '';
// Client links
public elasticsearchClients: string = '';
// go
@ -59,6 +60,7 @@ class ESDocLinks {
this.metadata = newDocLinks.security.mappingRoles;
this.roleDescriptors = newDocLinks.serverlessSecurity.apiKeyPrivileges;
this.securityApis = newDocLinks.apis.securityApis;
this.ingestionPipelines = newDocLinks.ingest.pipelines;
// Client links
this.elasticsearchClients = newDocLinks.serverlessClients.clientLib;

View file

@ -83,6 +83,10 @@ describe('<Overview />', () => {
const { getByRole } = render(<Overview />);
expect(getByRole('heading', { name: 'Build your first search query' })).toBeDefined();
});
test('transform data', () => {
const { getByRole } = render(<Overview />);
expect(getByRole('heading', { name: 'Transform and enrich your data' })).toBeDefined();
});
test("what's next?", () => {
const { getByRole } = render(<Overview />);
expect(getByRole('heading', { name: 'Do more with your data' })).toBeDefined();

View file

@ -13,6 +13,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiLink,
EuiPageTemplate,
EuiPanel,
EuiSpacer,
@ -21,6 +22,7 @@ import {
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import {
WelcomeBanner,
IngestData,
@ -39,8 +41,8 @@ import type {
} from '@kbn/search-api-panels';
import { useLocation } from 'react-router-dom';
import { docLinks } from '../../../common/doc_links';
import { PLUGIN_ID } from '../../../common';
import { useKibanaServices } from '../hooks/use_kibana';
import { useAssetBasePath } from '../hooks/use_asset_base_path';
import {
API_KEY_PLACEHOLDER,
CLOUD_ID_PLACEHOLDER,
@ -53,6 +55,8 @@ import './overview.scss';
import { ApiKeyPanel } from './api_key/api_key';
import { ConnectorsCallout } from './connectors_callout';
import { ConnectorIngestionPanel } from './connectors_ingestion';
import { PipelineButtonOverview } from './pipeline_button_overview';
import { PipelinePanel } from './pipeline_panel';
export const ElasticsearchOverview = () => {
const [selectedLanguage, setSelectedLanguage] = useState<LanguageDefinition>(javaDefinition);
@ -65,7 +69,7 @@ export const ElasticsearchOverview = () => {
cloudId: cloud?.cloudId ?? CLOUD_ID_PLACEHOLDER,
};
}, [cloud]);
const assetBasePath = http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets`);
const assetBasePath = useAssetBasePath();
const codeSnippetArguments: LanguageDefinitionSnippetArguments = {
url: elasticsearchURL,
apiKey: clientApiKey,
@ -338,6 +342,42 @@ export const ElasticsearchOverview = () => {
})}
/>
</EuiPageTemplate.Section>
<EuiPageTemplate.Section
color="subdued"
bottomBorder="extended"
data-test-subj="pipeline-client-section"
>
<OverviewPanel
description={
<FormattedMessage
id="xpack.serverlessSearch.pipeline.description"
defaultMessage="Use {ingestPipelinesLink} to preprocess your data before it's indexed into Elasticsearch, which is often much easier than post-processing. Use any combination of ingest processors to add, delete, or transform fields in your documents."
values={{
ingestPipelinesLink: (
<EuiLink
data-test-subj="serverlessSearchElasticsearchOverviewIngestPipelinesLink"
href={docLinks.ingestionPipelines}
target="_blank"
>
{i18n.translate(
'xpack.serverlessSearch.pipeline.description.ingestPipelinesLink.link',
{
defaultMessage: 'ingest pipelines',
}
)}
</EuiLink>
),
}}
/>
}
leftPanelContent={<PipelinePanel />}
links={[]}
title={i18n.translate('xpack.serverlessSearch.pipeline.title', {
defaultMessage: 'Transform and enrich your data',
})}
children={<PipelineButtonOverview />}
/>
</EuiPageTemplate.Section>
<EuiPageTemplate.Section
alignment="top"
className="serverlessSearchOverviewFooterSection"

View file

@ -0,0 +1,37 @@
/*
* 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 { EuiSpacer, EuiText, EuiButton } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useKibanaServices } from '../hooks/use_kibana';
export const PipelineButtonOverview: React.FC = () => {
const {
application: { navigateToUrl },
} = useKibanaServices();
return (
<>
<EuiSpacer />
<EuiButton
iconType="plusInCircle"
size="s"
onClick={() => navigateToUrl('/app/management/ingest/ingest_pipelines/create')}
data-test-subj="create-a-pipeline-button"
>
<EuiText size="s">
{i18n.translate('xpack.serverlessSearch.pipeline.description.createButtonLabel', {
defaultMessage: 'Create a pipeline',
})}
</EuiText>
</EuiButton>
</>
);
};

View file

@ -0,0 +1,124 @@
/*
* 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 {
EuiThemeProvider,
EuiPanel,
EuiFlexGroup,
EuiFlexItem,
EuiTitle,
EuiSpacer,
EuiText,
EuiImage,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useAssetBasePath } from '../hooks/use_asset_base_path';
export const PipelinePanel: React.FC = () => {
const assetBasePath = useAssetBasePath();
return (
<EuiThemeProvider colorMode="dark">
<EuiPanel paddingSize="xl">
<EuiFlexGroup direction="column" gutterSize="xl">
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiImage alt="cluster" src={`${assetBasePath}/cluster.svg`} />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate(
'xpack.serverlessSearch.pipeline.overview.dataEnrichment.title',
{
defaultMessage: 'Enrich Data',
}
)}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
<p>
{i18n.translate(
'xpack.serverlessSearch.pipeline.overview.dataEnrichment.description',
{
defaultMessage:
'Add information from external sources or apply transformations to your documents for more contextual, insightful search.',
}
)}
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiImage alt="cut" src={`${assetBasePath}/cut.svg`} />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate(
'xpack.serverlessSearch.pipeline.overview.extAndStandard.title',
{
defaultMessage: 'Extract and standardize',
}
)}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
{i18n.translate(
'xpack.serverlessSearch.pipeline.overview.extAndStandard.description',
{
defaultMessage:
'Parse information from your documents to ensure they conform to a standardized format.',
}
)}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiImage alt="reporter" src={`${assetBasePath}/reporter.svg`} />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate(
'xpack.serverlessSearch.pipeline.overview.anonymization.title',
{
defaultMessage: 'Anonymize data',
}
)}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
{i18n.translate(
'xpack.serverlessSearch.pipeline.overview.anonymization.description',
{
defaultMessage:
'Remove sensitive information from documents before indexing.',
}
)}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
</EuiThemeProvider>
);
};

View file

@ -0,0 +1,4 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="#79AAD9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.25 10.5C23.6581 10.5 27.3049 13.7596 27.9114 18H35.7134C36.2282 16.5435 37.6172 15.5 39.25 15.5C41.3211 15.5 43 17.1789 43 19.25C43 21.3211 41.3211 23 39.25 23C37.6172 23 36.2282 21.9565 35.7134 20.5H27.9114C27.6993 21.9824 27.1157 23.345 26.2579 24.4903L31.5095 29.7423C32.9702 28.6481 34.7844 28 36.75 28C41.5825 28 45.5 31.9175 45.5 36.75C45.5 41.5825 41.5825 45.5 36.75 45.5C32.3419 45.5 28.6951 42.2404 28.0886 38H20.2866C19.7718 39.4565 18.3828 40.5 16.75 40.5C14.6789 40.5 13 38.8211 13 36.75C13 34.6789 14.6789 33 16.75 33C18.3828 33 19.7718 34.0435 20.2866 35.5H28.0886C28.3006 34.0178 28.8841 32.6554 29.7418 31.5101L24.4902 26.258C23.0294 27.352 21.2154 28 19.25 28C14.4175 28 10.5 24.0825 10.5 19.25C10.5 14.4175 14.4175 10.5 19.25 10.5ZM19.25 25.5C22.7018 25.5 25.5 22.7018 25.5 19.25C25.5 15.7982 22.7018 13 19.25 13C15.7982 13 13 15.7982 13 19.25C13 22.7018 15.7982 25.5 19.25 25.5ZM38 19.25C38 19.9404 38.5596 20.5 39.25 20.5C39.9404 20.5 40.5 19.9404 40.5 19.25C40.5 18.5596 39.9404 18 39.25 18C38.5596 18 38 18.5596 38 19.25ZM36.75 43C33.2982 43 30.5 40.2018 30.5 36.75C30.5 33.2982 33.2982 30.5 36.75 30.5C40.2018 30.5 43 33.2982 43 36.75C43 40.2018 40.2018 43 36.75 43ZM18 36.75C18 37.4404 17.4404 38 16.75 38C16.0596 38 15.5 37.4404 15.5 36.75C15.5 36.0596 16.0596 35.5 16.75 35.5C17.4404 35.5 18 36.0596 18 36.75Z" fill="#4A7194"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,11 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="#6DCCB1"/>
<g clip-path="url(#clip0_1564_106662)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8557 35.6855L16.0761 37.0561C12.7157 38.0196 9.21041 36.0766 8.24684 32.7162C7.28326 29.3558 9.22626 25.8506 12.5867 24.887L17.4543 23.4912C19.8262 22.8111 22.2704 23.5791 23.8419 25.2715L27.666 11.9351C28.0138 10.7221 29.1657 9.69248 30.5642 8.84101C31.2405 8.42924 31.8652 8.14614 32.5122 8.04084C34.5463 7.70982 36.2699 9.43566 35.6654 11.5949L31.9342 24.607L44.4051 21.0311C46.5643 20.4265 48.2902 22.1501 47.9592 24.1842C47.8539 24.8312 47.5708 25.4559 47.159 26.1322C46.3075 27.5307 45.2779 28.6826 44.0649 29.0304L31.8073 32.5452C33.2293 34.1142 33.8318 36.3606 33.2052 38.5457L31.8094 43.4133C30.8459 46.7737 27.3406 48.7167 23.9802 47.7532C20.6198 46.7896 18.6768 43.2843 19.6404 39.9239L20.8557 35.6855ZM21.6786 32.8156L22.878 28.633C22.8691 28.5983 22.8597 28.5636 22.8497 28.5289C22.2716 26.5127 20.1684 25.3469 18.1522 25.925L13.2845 27.3208C11.2683 27.899 10.1025 30.0021 10.6806 32.0184C11.2588 34.0346 13.362 35.2004 15.3782 34.6223L21.6786 32.8156ZM31.1113 27.4769L30.2883 30.3468L43.3671 26.5966C44.1783 26.3639 46.3221 23.1236 45.103 23.4649L31.1113 27.4769ZM22.0742 40.6218C21.496 42.638 22.6618 44.7412 24.6781 45.3194C26.6943 45.8975 28.7975 44.7317 29.3756 42.7155L30.7714 37.8478C31.3495 35.8316 30.1837 33.7284 28.1675 33.1503C27.7408 33.0279 27.3102 32.9837 26.891 33.0091L33.2316 10.897C33.5728 9.67792 30.3325 11.8217 30.0999 12.6329L22.0742 40.6218ZM24.508 41.3197L25.9038 36.4521C26.0965 35.78 26.7975 35.3914 27.4696 35.5841C28.1417 35.7768 28.5303 36.4779 28.3376 37.1499L26.9418 42.0176C26.7491 42.6897 26.048 43.0783 25.376 42.8855C24.7039 42.6928 24.3153 41.9918 24.508 41.3197ZM14.6803 32.1884C14.0082 32.3812 13.3072 31.9926 13.1145 31.3205C12.9217 30.6484 13.3103 29.9473 13.9824 29.7546L18.8501 28.3589C19.5221 28.1661 20.2232 28.5547 20.4159 29.2268C20.6086 29.8989 20.22 30.6 19.5479 30.7927L14.6803 32.1884Z" fill="#007E77"/>
</g>
<defs>
<clipPath id="clip0_1564_106662">
<rect width="40" height="40" fill="white" transform="translate(8 8)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

@ -0,0 +1,11 @@
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="56" height="56" rx="28" fill="#E4A6C7"/>
<g clip-path="url(#clip0_1564_106675)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.21 10.2375L23.185 8.89505C22.8488 8.7833 22.4926 8.7443 22.1401 8.78064C21.7877 8.81698 21.447 8.92783 21.1406 9.10583C20.8342 9.28384 20.5692 9.52494 20.3631 9.81315C20.1569 10.1014 20.0144 10.4301 19.945 10.7775L18.5 18H14.25C13.9185 18 13.6005 18.1317 13.3661 18.3662C13.1317 18.6006 13 18.9185 13 19.25C13 19.5816 13.1317 19.8995 13.3661 20.1339C13.6005 20.3684 13.9185 20.5 14.25 20.5H18.315C17.8121 22.4489 17.908 24.504 18.59 26.3976L13.41 25.535C13.052 25.4755 12.6854 25.4947 12.3355 25.5911C11.9857 25.6876 11.661 25.859 11.3841 26.0936C11.1072 26.3282 10.8847 26.6202 10.732 26.9494C10.5793 27.2786 10.5002 27.6372 10.5 28V30.5C11.41 30.5 12.265 30.7425 13 31.17V28L15.5 28.4175L20.1475 29.1925L25.555 30.0925L26.75 30.2925V45.2925L13 43V39.83C12.2404 40.27 11.3779 40.5012 10.5 40.5V43C10.5003 43.5918 10.7105 44.1643 11.0931 44.6157C11.4758 45.067 12.0062 45.368 12.59 45.465L27.59 47.965C27.86 48.01 28.14 48.01 28.41 47.965L43.41 45.465C43.9938 45.368 44.5242 45.067 44.9068 44.6157C45.2895 44.1643 45.4997 43.5918 45.5 43V40.5C44.6222 40.5012 43.7596 40.27 43 39.83V43L29.25 45.2925V30.2925L30.445 30.0925L35.8525 29.1925L40.5 28.4151L43 28V31.17C43.7596 30.7301 44.6222 30.4989 45.5 30.5V28C45.4998 27.6372 45.4207 27.2786 45.268 26.9494C45.1153 26.6202 44.8928 26.3282 44.6159 26.0936C44.339 25.859 44.0143 25.6876 43.6645 25.5911C43.3146 25.4947 42.948 25.4755 42.59 25.535L37.4075 26.3976C38.0928 24.5047 38.1896 22.4489 37.685 20.5H41.75C42.0815 20.5 42.3995 20.3684 42.6339 20.1339C42.8683 19.8995 43 19.5816 43 19.25C43 18.9185 42.8683 18.6006 42.6339 18.3662C42.3995 18.1317 42.0815 18 41.75 18H37.5L36.055 10.775C35.985 10.4277 35.842 10.0993 35.6355 9.81142C35.4289 9.52357 35.1636 9.2829 34.857 9.10537C34.5504 8.92784 34.2095 8.81751 33.8571 8.78168C33.5046 8.74585 33.1486 8.78535 32.8125 8.89755L28.79 10.2375C28.2772 10.4084 27.7228 10.4084 27.21 10.2375ZM34.41 26.8976C34.9862 25.9464 35.3447 24.8795 35.4597 23.7733C35.5747 22.6672 35.4433 21.5494 35.075 20.5H20.925C20.5567 21.5494 20.4253 22.6672 20.5403 23.7733C20.6553 24.8795 21.0138 25.9464 21.59 26.8976L28 27.965L34.41 26.8976ZM35 18H31L30.5 15.5L34.25 14.25L35 18ZM10.5 38C11.163 38 11.7989 37.7367 12.2678 37.2678C12.7366 36.799 13 36.1631 13 35.5C13 34.837 12.7366 34.2011 12.2678 33.7323C11.7989 33.2634 11.163 33 10.5 33C9.83696 33 9.20107 33.2634 8.73223 33.7323C8.26339 34.2011 8 34.837 8 35.5C8 36.1631 8.26339 36.799 8.73223 37.2678C9.20107 37.7367 9.83696 38 10.5 38ZM45.5 38C46.163 38 46.7989 37.7367 47.2678 37.2678C47.7366 36.799 48 36.1631 48 35.5C48 34.837 47.7366 34.2011 47.2678 33.7323C46.7989 33.2634 46.163 33 45.5 33C44.837 33 44.2011 33.2634 43.7322 33.7323C43.2634 34.2011 43 34.837 43 35.5C43 36.1631 43.2634 36.799 43.7322 37.2678C44.2011 37.7367 44.837 38 45.5 38Z" fill="#C4407C"/>
</g>
<defs>
<clipPath id="clip0_1564_106675">
<rect width="40" height="40" fill="white" transform="translate(8 8)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

View file

@ -10,6 +10,7 @@ import { FtrProviderContext } from '../ftr_provider_context';
export function SvlSearchLandingPageProvider({ getService }: FtrProviderContext) {
const testSubjects = getService('testSubjects');
const browser = getService('browser');
return {
async assertSvlSearchSideNavExists() {
@ -75,5 +76,15 @@ export function SvlSearchLandingPageProvider({ getService }: FtrProviderContext)
});
},
},
pipeline: {
async click() {
await testSubjects.click('create-a-pipeline-button');
},
async expectNavigateToCreatePipelinePage() {
expect(await browser.getCurrentUrl()).contain(
'/app/management/ingest/ingest_pipelines/create'
);
},
},
};
}

View file

@ -81,5 +81,12 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
await pageObjects.svlSearchLandingPage.apiKeys.createApiKeyCancel();
});
});
describe('Pipeline creation', async () => {
it('can redirect to the pipeline creation index page', async () => {
await pageObjects.svlSearchLandingPage.pipeline.click();
await pageObjects.svlSearchLandingPage.pipeline.expectNavigateToCreatePipelinePage();
});
});
});
}