From a8f203931ff17d587f11e752d388411916ffed63 Mon Sep 17 00:00:00 2001 From: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com> Date: Wed, 22 Nov 2023 12:06:58 -0500 Subject: [PATCH] [Serverless Search] Update Getting Ingest Data section (#171035) ## Summary PR updates Getting Started Ingest data row to match [design](https://www.figma.com/file/aRW3wtDRGgwOunC8vXIvdm/Milestone-0-UX?type=design&node-id=3893-443443&mode=design&t=PYPiODRJvKspgxQc-0) . ## Screen shot Getting ingest data row ## Screen Recording https://github.com/elastic/kibana/assets/55930906/2c9454ee-b23f-4a7e-9d16-cfcd3697e1a1 ### 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) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../components/ingest_data.tsx | 134 ++++---------- .../components/ingestions_panel.tsx | 131 ++++++++++++++ .../components/integrations_panel.tsx | 168 ------------------ packages/kbn-search-api-panels/index.tsx | 2 +- .../components/connectors_ingestion.tsx | 95 ++++++++++ .../application/components/overview.tsx | 2 + .../translations/translations/fr-FR.json | 16 -- .../translations/translations/ja-JP.json | 16 -- .../translations/translations/zh-CN.json | 16 -- 9 files changed, 260 insertions(+), 320 deletions(-) create mode 100644 packages/kbn-search-api-panels/components/ingestions_panel.tsx delete mode 100644 packages/kbn-search-api-panels/components/integrations_panel.tsx create mode 100644 x-pack/plugins/serverless_search/public/application/components/connectors_ingestion.tsx diff --git a/packages/kbn-search-api-panels/components/ingest_data.tsx b/packages/kbn-search-api-panels/components/ingest_data.tsx index 0b0e11b13618d..f8ba59d29bf30 100644 --- a/packages/kbn-search-api-panels/components/ingest_data.tsx +++ b/packages/kbn-search-api-panels/components/ingest_data.tsx @@ -6,25 +6,22 @@ * Side Public License, v 1. */ -import React, { useState } from 'react'; +import React from 'react'; -import { EuiCheckableCard, EuiFormFieldset, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui'; +import { EuiSpacer, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { ApplicationStart } from '@kbn/core-application-browser'; import type { SharePluginStart } from '@kbn/share-plugin/public'; import { CodeBox } from './code_box'; import { LanguageDefinition } from '../types'; import { OverviewPanel } from './overview_panel'; -import { IntegrationsPanel } from './integrations_panel'; - +import { IngestionsPanel } from './ingestions_panel'; interface IngestDataProps { codeSnippet: string; selectedLanguage: LanguageDefinition; setSelectedLanguage: (language: LanguageDefinition) => void; docLinks: { beats: string; - connectors: string; - integrations: string; logstash: string; }; assetBasePath: string; @@ -32,6 +29,7 @@ interface IngestDataProps { sharePlugin: SharePluginStart; languages: LanguageDefinition[]; consoleRequest?: string; + additionalIngestionPanel?: React.ReactNode; } export const IngestData: React.FC = ({ @@ -44,115 +42,45 @@ export const IngestData: React.FC = ({ sharePlugin, languages, consoleRequest, + additionalIngestionPanel, }) => { - const [selectedIngestMethod, setSelectedIngestMethod] = useState< - 'ingestViaApi' | 'ingestViaIntegration' - >('ingestViaApi'); return ( - ) : ( - - ) + } - links={[ - ...(selectedLanguage.apiReference - ? [ - { - href: selectedLanguage.apiReference, - label: i18n.translate('searchApiPanels.welcomeBanner.ingestData.clientDocLink', { - defaultMessage: '{languageName} API reference', - values: { languageName: selectedLanguage.name }, - }), - }, - ] - : []), - { - href: docLinks.integrations, - label: i18n.translate('searchApiPanels.welcomeBanner.ingestData.integrationsLink', { - defaultMessage: 'About Integrations', - }), - }, - ]} + links={[]} title={i18n.translate('searchApiPanels.welcomeBanner.ingestData.title', { defaultMessage: 'Ingest data', })} > - - -

- {i18n.translate('searchApiPanels.welcomeBanner.ingestData.ingestApiLabel', { - defaultMessage: 'Ingest via API', - })} -

- - } - value="ingestViaApi" - checked={selectedIngestMethod === 'ingestViaApi'} - onChange={() => setSelectedIngestMethod('ingestViaApi')} - > - - {i18n.translate('searchApiPanels.welcomeBanner.ingestData.ingestApiDescription', { - defaultMessage: - 'The most flexible way to index data, enabling full control over your customization and optimization options.', - })} - - - - -

- {i18n.translate('searchApiPanels.welcomeBanner.ingestData.ingestIntegrationLabel', { - defaultMessage: 'Ingest via integration', - })} -

- - } - value="ingestViaIntegration" - checked={selectedIngestMethod === 'ingestViaIntegration'} - onChange={() => setSelectedIngestMethod('ingestViaIntegration')} - > - - {i18n.translate( - 'searchApiPanels.welcomeBanner.ingestData.ingestIntegrationDescription', - { - defaultMessage: - 'Specialized ingestion tools optimized for transforming data and shipping it to Elasticsearch.', - } - )} - - - + +

+ {i18n.translate('searchApiPanels.welcomeBanner.ingestData.alternativeOptions', { + defaultMessage: 'Alternative ingestion options', + })} +

+ + + + ); }; diff --git a/packages/kbn-search-api-panels/components/ingestions_panel.tsx b/packages/kbn-search-api-panels/components/ingestions_panel.tsx new file mode 100644 index 0000000000000..ef9a0ef95ad09 --- /dev/null +++ b/packages/kbn-search-api-panels/components/ingestions_panel.tsx @@ -0,0 +1,131 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; + +import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiSpacer, EuiText, EuiLink } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { GithubLink } from './github_link'; + +interface IngestionPanelProps { + additionalIngestionPanel?: React.ReactNode; + docLinks: { beats: string; logstash: string }; + assetBasePath: string; +} + +export const IngestionsPanel: React.FC = ({ + additionalIngestionPanel, + docLinks, + assetBasePath, +}) => { + const panels = [ + { + description: i18n.translate( + 'searchApiPanels.welcomeBanner.ingestData.alternativeOptions.logstashDescription', + { + defaultMessage: + 'General-purpose data processing pipeline for Elasticsearch. Use Logstash to extract and transform data from a variety of inputs and outputs.', + } + ), + title: i18n.translate( + 'searchApiPanels.welcomeBanner.ingestData.alternativeOptions.logstashTitle', + { + defaultMessage: 'Logstash', + } + ), + links: [ + { + href: docLinks.logstash, + label: i18n.translate( + 'searchApiPanels.welcomeBanner.ingestData.alternativeOptions.logstashDocumentationLabel', + { + defaultMessage: 'Documentation', + } + ), + }, + { + href: 'https://github.com/elastic/logstash', + isGithubLink: true, + label: 'logstash', + }, + ], + }, + { + description: i18n.translate( + 'searchApiPanels.welcomeBanner.ingestData.alternativeOptions.beatsDescription', + { + defaultMessage: + 'Lightweight, single-purpose data shippers for Elasticsearch. Use Beats to send operational data from your servers.', + } + ), + title: i18n.translate( + 'searchApiPanels.welcomeBanner.ingestData.alternativeOptions.beatsTitle', + { + defaultMessage: 'Beats', + } + ), + links: [ + { + href: docLinks.beats, + label: i18n.translate( + 'searchApiPanels.welcomeBanner.ingestData.alternativeOptions.beatsDocumentationLabel', + { + defaultMessage: 'Documentation', + } + ), + }, + { + href: 'https://github.com/elastic/beats', + isGithubLink: true, + label: 'beats', + }, + ], + }, + ]; + return ( + <> + {additionalIngestionPanel} + {panels.map(({ title, description, links }, panelIndex) => ( + + + +
{title}
+ + + +

{description}

+ + + {links && links.length > 0 && ( + <> + + {links.map(({ label, href, isGithubLink }, linksIndex) => ( + + {isGithubLink ? ( + + ) : ( + + {label} + + )} + + ))} + + + + )} + + ))} + + ); +}; diff --git a/packages/kbn-search-api-panels/components/integrations_panel.tsx b/packages/kbn-search-api-panels/components/integrations_panel.tsx deleted file mode 100644 index 3f6005f26cebd..0000000000000 --- a/packages/kbn-search-api-panels/components/integrations_panel.tsx +++ /dev/null @@ -1,168 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; - -import { - EuiThemeProvider, - EuiPanel, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiTitle, - EuiSpacer, - EuiText, - EuiLink, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; -import { LEARN_MORE_LABEL } from '../constants'; -import { GithubLink } from './github_link'; - -export interface IntegrationsPanelProps { - docLinks: { beats: string; connectors: string; logstash: string }; - assetBasePath: string; -} - -export const IntegrationsPanel: React.FC = ({ - docLinks, - assetBasePath, -}) => { - return ( - - - - - - - - -

- {i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashTitle', { - defaultMessage: 'Logstash', - })} -

- - - -

- {i18n.translate('searchApiPanels.welcomeBanner.ingestData.logstashDescription', { - defaultMessage: - 'Add data to your data stream or index to make it searchable. Choose an ingestion method that fits your application and workflow.', - })} -

- - - - - - - {LEARN_MORE_LABEL} - - - - - - - - - - - - - - - - -

- {i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsTitle', { - defaultMessage: 'Beats', - })} -

- - - - {i18n.translate('searchApiPanels.welcomeBanner.ingestData.beatsDescription', { - defaultMessage: - 'Lightweight, single-purpose data shippers for Elasticsearch. Use Beats to send operational data from your servers.', - })} - - - - - - - {LEARN_MORE_LABEL} - - - - - - - - - - - - - - - - -

- {i18n.translate('searchApiPanels.welcomeBanner.ingestData.connectorsTitle', { - defaultMessage: 'Connector clients', - })} -

- - - - {i18n.translate('searchApiPanels.welcomeBanner.ingestData.connectorsDescription', { - defaultMessage: - 'Specialized integrations for syncing data from third-party sources to Elasticsearch. Use Elastic connectors to sync content from a range of databases and object stores.', - })} - - - - - - - {LEARN_MORE_LABEL} - - - - - - - - - - - - ); -}; diff --git a/packages/kbn-search-api-panels/index.tsx b/packages/kbn-search-api-panels/index.tsx index 059aaf184ebf5..7372e381c576b 100644 --- a/packages/kbn-search-api-panels/index.tsx +++ b/packages/kbn-search-api-panels/index.tsx @@ -14,7 +14,7 @@ import { AuthenticatedUser } from '@kbn/security-plugin/common'; export * from './components/code_box'; export * from './components/github_link'; export * from './components/ingest_data'; -export * from './components/integrations_panel'; +export * from './components/ingestions_panel'; export * from './components/language_client_panel'; export * from './components/overview_panel'; export * from './components/select_client'; diff --git a/x-pack/plugins/serverless_search/public/application/components/connectors_ingestion.tsx b/x-pack/plugins/serverless_search/public/application/components/connectors_ingestion.tsx new file mode 100644 index 0000000000000..6be9b28707dff --- /dev/null +++ b/x-pack/plugins/serverless_search/public/application/components/connectors_ingestion.tsx @@ -0,0 +1,95 @@ +/* + * 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 { + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiSpacer, + EuiText, + EuiLink, + EuiIcon, +} from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import { GithubLink } from '@kbn/search-api-panels'; + +import React from 'react'; +import { useCreateConnector } from '../hooks/api/use_create_connector'; + +export const ConnectorIngestionPanel: React.FC<{ assetBasePath: string }> = ({ assetBasePath }) => { + const { createConnector } = useCreateConnector(); + return ( + + + +
+ {i18n.translate( + 'xpack.serverlessSearch.ingestData.alternativeOptions.connectorsTitle', + { + defaultMessage: 'Connectors', + } + )} +
+ + + +

+ {i18n.translate( + 'xpack.serverlessSearch.ingestData.alternativeOptions.connectorsDescription', + { + defaultMessage: + 'Sync third-party data sources to Elasticsearch, by deploying open code Elastic connectors on your own infrastructure. ', + } + )} +

+ + + + + createConnector()}> + {i18n.translate( + 'xpack.serverlessSearch.ingestData.alternativeOptions.setupConnectorLabel', + { + defaultMessage: 'Set up a connector', + } + )} + + + + + + + + + + + + + + {i18n.translate( + 'xpack.serverlessSearch.ingestData.alternativeOptions.connectorDockerLabel', + { + defaultMessage: 'Docker', + } + )} + + + + + + + + + ); +}; diff --git a/x-pack/plugins/serverless_search/public/application/components/overview.tsx b/x-pack/plugins/serverless_search/public/application/components/overview.tsx index cb32a66cea20d..65fe81dda72a8 100644 --- a/x-pack/plugins/serverless_search/public/application/components/overview.tsx +++ b/x-pack/plugins/serverless_search/public/application/components/overview.tsx @@ -52,6 +52,7 @@ import { LanguageGrid } from './languages/language_grid'; import './overview.scss'; import { ApiKeyPanel } from './api_key/api_key'; import { ConnectorsCallout } from './connectors_callout'; +import { ConnectorIngestionPanel } from './connectors_ingestion'; export const ElasticsearchOverview = () => { const [selectedLanguage, setSelectedLanguage] = useState(javaDefinition); @@ -302,6 +303,7 @@ export const ElasticsearchOverview = () => { docLinks={docLinks} application={application} sharePlugin={share} + additionalIngestionPanel={} />