From 248119ec8c506311f8d24a35ccae318e066b3026 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Gonz=C3=A1lez?= Date: Tue, 29 Oct 2024 23:18:49 +0100 Subject: [PATCH] [Search][Connectors] Create connector via try in console (#197757) ## Summary This PR enables the possibility of creating a connector opening the embedded console in the start step. ![CleanShot 2024-10-28 at 10 00 04](https://github.com/user-attachments/assets/bf2c0a89-1c18-4fcd-8c2b-4fbbe3ef80a9) --------- Co-authored-by: Liam Thompson <32779855+leemthompo@users.noreply.github.com> Co-authored-by: Elastic Machine --- .../enterprise_search/common/constants.ts | 44 ------ .../components/manual_configuration.tsx | 143 +++++++++++++++++- 2 files changed, 142 insertions(+), 45 deletions(-) diff --git a/x-pack/plugins/enterprise_search/common/constants.ts b/x-pack/plugins/enterprise_search/common/constants.ts index 4da0244b2ec5e..67dfa03dc3705 100644 --- a/x-pack/plugins/enterprise_search/common/constants.ts +++ b/x-pack/plugins/enterprise_search/common/constants.ts @@ -218,50 +218,6 @@ export const CREATE_CONNECTOR_PLUGIN = { --index-language en --from-file config.yml `, - CONSOLE_SNIPPET: dedent`# Create an index -PUT /my-index-000001 -{ - "settings": { - "index": { - "number_of_shards": 3, - "number_of_replicas": 2 - } - } -} - -# Create an API key -POST /_security/api_key -{ - "name": "my-api-key", - "expiration": "1d", - "role_descriptors": - { - "role-a": { - "cluster": ["all"], - "indices": [ - { - "names": ["index-a*"], - "privileges": ["read"] - } - ] - }, - "role-b": { - "cluster": ["all"], - "indices": [ - { - "names": ["index-b*"], - "privileges": ["all"] - }] - } - }, "metadata": - { "application": "my-application", - "environment": { - "level": 1, - "trusted": true, - "tags": ["dev", "staging"] - } - } - }`, }; export const LICENSED_SUPPORT_URL = 'https://support.elastic.co'; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx index 13273266a2068..825f47920d256 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connectors/create_connector/components/manual_configuration.tsx @@ -6,16 +6,27 @@ */ import React, { useState } from 'react'; +import { css } from '@emotion/react'; +import dedent from 'dedent'; + +import { useValues } from 'kea'; + import { EuiButtonIcon, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover, useGeneratedHtmlId, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { useKibana } from '@kbn/kibana-react-plugin/public'; +import { NATIVE_CONNECTOR_DEFINITIONS, NativeConnector } from '@kbn/search-connectors'; +import { TryInConsoleButton } from '@kbn/try-in-console'; +import { KibanaDeps } from '../../../../../../../common/types'; +import { NewConnectorLogic } from '../../../new_index/method_connector/new_connector_logic'; import { SelfManagePreference } from '../create_connector'; import { ManualConfigurationFlyout } from './manual_configuration_flyout'; @@ -25,10 +36,18 @@ export interface ManualConfigurationProps { selfManagePreference: SelfManagePreference; } +interface ConnectorConfiguration { + [key: string]: { + value: string; + }; +} + export const ManualConfiguration: React.FC = ({ isDisabled, selfManagePreference, }) => { + const { euiTheme } = useEuiTheme(); + const { services } = useKibana(); const [isPopoverOpen, setPopover] = useState(false); const splitButtonPopoverId = useGeneratedHtmlId({ prefix: 'splitButtonPopover', @@ -40,9 +59,104 @@ export const ManualConfiguration: React.FC = ({ const closePopover = () => { setPopover(false); }; - + const { selectedConnector, rawName } = useValues(NewConnectorLogic); const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); const [flyoutContent, setFlyoutContent] = useState<'manual_config' | 'client'>(); + const getCodeSnippet = (): string => { + const connectorInfo: NativeConnector | undefined = selectedConnector?.serviceType + ? NATIVE_CONNECTOR_DEFINITIONS[selectedConnector.serviceType] + : undefined; + if (!connectorInfo) { + return ''; + } + + const dynamicConfigValues = Object.entries( + connectorInfo.configuration as ConnectorConfiguration + ) + .map(([key, config]) => { + const defaultValue = config ? JSON.stringify(config.value) : null; + return ` "${key}": ${defaultValue}`; + }) + .join(',\n'); + const CONSOLE_SNIPPET = dedent` # Example of how to create a ${connectorInfo?.name} connector using the API +# This also creates related resources like an index and an API key. +# This is an alternative to using the UI creation flow. + +# 1. Create an index +PUT connector-${rawName} +{ + "settings": { + "index": { + "number_of_shards": 3, + "number_of_replicas": 2 + } + } +} +# 2. Create a connector +PUT _connector/${rawName} +{ + "name": "My ${connectorInfo?.name} connector", + "index_name": "connector-${rawName}", + "service_type": "${selectedConnector?.serviceType}" +} +# 3. Create an API key +POST /_security/api_key +{ + "name": "${rawName}-api-key", + "role_descriptors": { + "${selectedConnector?.serviceType}-api-key-role": { + "cluster": [ + "monitor", + "manage_connector" + ], + "indices": [ + { + "names": [ + "connector-${rawName}", + ".search-acl-filter-connector-${rawName}", + ".elastic-connectors*" + ], + "privileges": [ + "all" + ], + "allow_restricted_indices": false + } + ] + } + } +} + +# 🔧 Configure your connector +# NOTE: Configuration keys differ per service type. +PUT _connector/${rawName}/_configuration +{ + "values": { +${dynamicConfigValues} + } +} + +# 🔌 Verify your connector is connected +GET _connector/${rawName} + +# 🔄 Sync data +POST _connector/_sync_job +{ + "id": "${rawName}", + "job_type": "full" +} + +# ⏳ Check sync status +GET _connector/_sync_job?connector_id=${rawName}&size=1 + +# Once the job completes, the status should return completed +# 🎉 Verify that data is present in the index with the following API call +GET connector-${rawName}/_count + +# 🔎 Elasticsearch stores data in documents, which are JSON objects. List the individual documents with the following API call +GET connector-${rawName}/_search +`; + return CONSOLE_SNIPPET; + }; const items = [ = ({ { defaultMessage: 'Manual configuration' } )} , + { + closePopover(); + }} + css={css` + .euiLink { + color: ${euiTheme.colors.text}; + font-weight: ${euiTheme.font.weight.regular}; + } + `} + > + + ,