mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Search][ES3][Coming soon pages] Connectors and Web crawlers coming soon pages (#199284)
## Summary This PR exposes upcoming Elastic managed connectors and Elastic managed web crawlers in 2 different coming soon pages. From the connectors journey, the initial empty state will perform as a shuttler to let users choose between Self-managed and Elastic managed approaches. The self-managed CTA button will take us to the current connectors creation flow in ES3. The secondary CTA will take us to the Elastic managed coming soon page. Once users would have any connector created the initial connectors empty state will go away. But we will let users come back to the Elastic managed connector coming soon page showing a Callout on top of the connectors list. From the Web crawlers journey, the initial empty state let us choose also between Self-managed and Elastic managed web crawlers approaches. The first one will take us to the Open web crawler repo and the second CTA button will take us to the Elastic managed web crawler coming soon page.  ### Tasks - [x] Modify current connectors empty state to become the landing to go for Self-managed or Elastic managed connectors - [x] Create the Elastic managed connectors coming soon page - [x] Create the Web crawlers empty state page - [x] Create the Elastic managed Web crawlers coming soon page - [x] Add the Web crawlers navigation entry point - [x] Add a Callout when listing existing connectors to take users to the Elastic managed coming soon page. - [x] Callout issue 1: Clicking Callout CTA button doesn't take us to that page, it looks like a React router issue. - [x] Callout issue 2: Handle the dismissible state persistency - [ ] Validate that we can capture required telemetry ### 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 - [ ] [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 - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [ ] 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)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### Risk Matrix Delete this section if it is not applicable to this PR. Before closing this PR, invite QA, stakeholders, and other developers to identify risks that should be tested prior to the change/feature release. When forming the risk matrix, consider some of the following examples and how they may potentially impact the change: | Risk | Probability | Severity | Mitigation/Notes | |---------------------------|-------------|----------|-------------------------| | Multiple Spaces—unexpected behavior in non-default Kibana Space. | Low | High | Integration tests will verify that all features are still supported in non-default Kibana Space and when user switches between spaces. | | Multiple nodes—Elasticsearch polling might have race conditions when multiple Kibana nodes are polling for the same tasks. | High | Low | Tasks are idempotent, so executing them multiple times will not result in logical error, but will degrade performance. To test for this case we add plenty of unit tests around this logic and document manual testing procedure. | | Code should gracefully handle cases when feature X or plugin Y are disabled. | Medium | High | Unit tests will verify that any feature flag or plugin combination still results in our service operational. | | [See more potential risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) | ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels) - [ ] This will appear in the **Release Notes** and follow the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
José Luis González
GitHub
parent
2dc1ce3151
commit
d14c03e22d
28 changed files with 1321 additions and 196 deletions
|
|
@ -16,6 +16,7 @@ export const ENTERPRISE_SEARCH_APPSEARCH_APP_ID = 'appSearch';
|
|||
export const ENTERPRISE_SEARCH_WORKPLACESEARCH_APP_ID = 'workplaceSearch';
|
||||
export const SERVERLESS_ES_APP_ID = 'serverlessElasticsearch';
|
||||
export const SERVERLESS_ES_CONNECTORS_ID = 'serverlessConnectors';
|
||||
export const SERVERLESS_ES_WEB_CRAWLERS_ID = 'serverlessWebCrawlers';
|
||||
export const SERVERLESS_ES_SEARCH_PLAYGROUND_ID = 'searchPlayground';
|
||||
export const SERVERLESS_ES_SEARCH_INFERENCE_ENDPOINTS_ID = 'searchInferenceEndpoints';
|
||||
export const SEARCH_HOMEPAGE = 'searchHomepage';
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
import {
|
||||
SERVERLESS_ES_APP_ID,
|
||||
SERVERLESS_ES_CONNECTORS_ID,
|
||||
SERVERLESS_ES_WEB_CRAWLERS_ID,
|
||||
ENTERPRISE_SEARCH_APP_ID,
|
||||
ENTERPRISE_SEARCH_CONTENT_APP_ID,
|
||||
ENTERPRISE_SEARCH_APPLICATIONS_APP_ID,
|
||||
|
|
@ -38,6 +39,7 @@ export type EnterpriseSearchAppsearchApp = typeof ENTERPRISE_SEARCH_APPSEARCH_AP
|
|||
export type EnterpriseSearchWorkplaceSearchApp = typeof ENTERPRISE_SEARCH_WORKPLACESEARCH_APP_ID;
|
||||
export type ServerlessSearchApp = typeof SERVERLESS_ES_APP_ID;
|
||||
export type ConnectorsId = typeof SERVERLESS_ES_CONNECTORS_ID;
|
||||
export type ServerlessWebCrawlers = typeof SERVERLESS_ES_WEB_CRAWLERS_ID;
|
||||
export type SearchPlaygroundId = typeof SERVERLESS_ES_SEARCH_PLAYGROUND_ID;
|
||||
export type SearchInferenceEndpointsId = typeof SERVERLESS_ES_SEARCH_INFERENCE_ENDPOINTS_ID;
|
||||
export type SearchHomepage = typeof SEARCH_HOMEPAGE;
|
||||
|
|
@ -68,6 +70,7 @@ export type DeepLinkId =
|
|||
| EnterpriseSearchWorkplaceSearchApp
|
||||
| ServerlessSearchApp
|
||||
| ConnectorsId
|
||||
| ServerlessWebCrawlers
|
||||
| SearchPlaygroundId
|
||||
| SearchInferenceEndpointsId
|
||||
| SearchHomepage
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { useValues } from 'kea';
|
|||
import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { CRAWLER } from '../../../../../common/constants';
|
||||
import { HttpLogic } from '../../../shared/http';
|
||||
import { GithubIcon } from '../../../shared/icons/github_icon';
|
||||
import { KibanaLogic } from '../../../shared/kibana';
|
||||
|
|
@ -49,7 +48,7 @@ export const CrawlerEmptyState: React.FC = () => {
|
|||
color="primary"
|
||||
fill
|
||||
iconType={GithubIcon}
|
||||
href={CRAWLER.github_repo}
|
||||
href={'https://github.com/elastic/crawler'}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.enterpriseSearch.crawlerEmptyState.openSourceCrawlerButtonLabel',
|
||||
|
|
|
|||
|
|
@ -65,6 +65,13 @@ export const CONNECTOR_LABEL: string = i18n.translate('xpack.serverlessSearch.co
|
|||
defaultMessage: 'Connector',
|
||||
});
|
||||
|
||||
export const WEB_CRAWLERS_LABEL: string = i18n.translate(
|
||||
'xpack.serverlessSearch.webCrawlersLabel',
|
||||
{
|
||||
defaultMessage: 'Web crawlers',
|
||||
}
|
||||
);
|
||||
|
||||
export const DELETE_CONNECTOR_LABEL = i18n.translate(
|
||||
'xpack.serverlessSearch.connectors.deleteConnectorLabel',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
* 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 { EuiStepsHorizontal, EuiStepsHorizontalProps } from '@elastic/eui';
|
||||
import { css } from '@emotion/react';
|
||||
|
||||
interface DecorativeHorizontalStepperProps {
|
||||
stepCount?: number;
|
||||
}
|
||||
|
||||
export const DecorativeHorizontalStepper: React.FC<DecorativeHorizontalStepperProps> = ({
|
||||
stepCount = 2,
|
||||
}) => {
|
||||
// Generate the steps dynamically based on the stepCount prop
|
||||
const horizontalSteps: EuiStepsHorizontalProps['steps'] = Array.from(
|
||||
{ length: stepCount },
|
||||
(_, index) => ({
|
||||
title: '',
|
||||
status: 'incomplete',
|
||||
onClick: () => {},
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
/* This is a presentational component, not intended for user interaction:
|
||||
pointer-events: none, prevents user interaction with the component.
|
||||
inert prevents click, focus, and other interactive events, removing it from the tab order.
|
||||
role="presentation" indicates that this component is purely decorative and not interactive for assistive technologies.
|
||||
Together, these attributes help ensure the component is accesible. */
|
||||
<EuiStepsHorizontal
|
||||
css={css`
|
||||
pointer-events: none;
|
||||
`}
|
||||
steps={horizontalSteps}
|
||||
size="s"
|
||||
role="presentation"
|
||||
// @ts-ignore due to React 18 and TypeScript doesn't have native HTML inert attribute support yet
|
||||
inert=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* 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 { EuiToolTip, EuiIcon } from '@elastic/eui';
|
||||
|
||||
export const ConnectorIcon: React.FC<{ name: string; serviceType: string; iconPath?: string }> = ({
|
||||
name,
|
||||
serviceType,
|
||||
iconPath,
|
||||
}) => (
|
||||
<EuiToolTip content={name}>
|
||||
<EuiIcon size="l" title={name} id={serviceType} type={iconPath || 'defaultIcon'} />
|
||||
</EuiToolTip>
|
||||
);
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
/*
|
||||
* 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 {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPanel,
|
||||
EuiIcon,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
EuiBadge,
|
||||
EuiButtonEmpty,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
// import { generatePath } from 'react-router-dom';
|
||||
import { SERVERLESS_ES_CONNECTORS_ID } from '@kbn/deeplinks-search/constants';
|
||||
import { useKibanaServices } from '../../hooks/use_kibana';
|
||||
import { useConnectorTypes } from '../../hooks/api/use_connector_types';
|
||||
import { useAssetBasePath } from '../../hooks/use_asset_base_path';
|
||||
|
||||
import { BACK_LABEL } from '../../../../common/i18n_string';
|
||||
// import { BASE_CONNECTORS_PATH } from '../../constants';
|
||||
import { ConnectorIcon } from './connector_icon';
|
||||
import { DecorativeHorizontalStepper } from '../common/decorative_horizontal_stepper';
|
||||
|
||||
export const ElasticManagedConnectorComingSoon: React.FC = () => {
|
||||
const connectorTypes = useConnectorTypes();
|
||||
|
||||
const connectorExamples = connectorTypes.filter((connector) =>
|
||||
['Gmail', 'Sharepoint Online', 'Jira Cloud', 'Dropbox'].includes(connector.name)
|
||||
);
|
||||
|
||||
const {
|
||||
application: { navigateToApp },
|
||||
} = useKibanaServices();
|
||||
|
||||
const assetBasePath = useAssetBasePath();
|
||||
const connectorsIcon = assetBasePath + '/connectors.svg';
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center" direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiPanel paddingSize="l" hasShadow={false} hasBorder>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="l"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiButtonEmpty
|
||||
data-test-subj="serverlessSearchElasticManagedConnectorEmptyBackButton"
|
||||
iconType="arrowLeft"
|
||||
onClick={() => navigateToApp(SERVERLESS_ES_CONNECTORS_ID)}
|
||||
>
|
||||
{BACK_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="xxl" type={connectorsIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
{i18n.translate('xpack.serverlessSearch.elasticManagedConnectorEmpty.title', {
|
||||
defaultMessage: 'Elastic managed connectors',
|
||||
})}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiBadge color="accent">Coming soon</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText textAlign="center" color="subdued">
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.elasticManagedConnectorEmpty.description',
|
||||
{
|
||||
defaultMessage:
|
||||
"We're actively developing Elastic managed connectors, that won't require any self-managed infrastructure. You'll be able to handle all configuration in the UI. This will simplify syncing your data into a serverless Elasticsearch project. This new workflow will have two steps:",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel color="subdued">
|
||||
<EuiFlexItem grow={false}>
|
||||
<DecorativeHorizontalStepper stepCount={2} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
direction="row"
|
||||
gutterSize="s"
|
||||
>
|
||||
{connectorExamples.map((connector, index) => (
|
||||
<React.Fragment key={connector.serviceType}>
|
||||
{index === Math.floor(connectorExamples.length / 2) && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type="documents" />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
<EuiFlexItem grow={false}>
|
||||
<ConnectorIcon
|
||||
name={connector.name}
|
||||
serviceType={connector.serviceType}
|
||||
iconPath={connector.iconPath}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.elasticManagedConnectorEmpty.guideOneDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
"Choose from over 30 third-party data sources you'd like to sync",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type={connectorsIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="logoElastic" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.elasticManagedConnectorEmpty.guideThreeDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
'Enter access and connection details for your data source and run your first sync using the Kibana UI',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
@ -14,30 +14,49 @@ import {
|
|||
EuiText,
|
||||
EuiLink,
|
||||
EuiButton,
|
||||
EuiToolTip,
|
||||
EuiBadge,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
||||
import { docLinks } from '../../../../common/doc_links';
|
||||
import { useKibanaServices } from '../../hooks/use_kibana';
|
||||
import { useConnectorTypes } from '../../hooks/api/use_connector_types';
|
||||
import { useCreateConnector } from '../../hooks/api/use_create_connector';
|
||||
import { useAssetBasePath } from '../../hooks/use_asset_base_path';
|
||||
import { useConnectors } from '../../hooks/api/use_connectors';
|
||||
import { DecorativeHorizontalStepper } from '../common/decorative_horizontal_stepper';
|
||||
import { ConnectorIcon } from './connector_icon';
|
||||
|
||||
import { ELASTIC_MANAGED_CONNECTOR_PATH, BASE_CONNECTORS_PATH } from '../../constants';
|
||||
|
||||
export const EmptyConnectorsPrompt: React.FC = () => {
|
||||
const connectorTypes = useConnectorTypes();
|
||||
|
||||
const connectorExamples = connectorTypes.filter((connector) =>
|
||||
['Gmail', 'Sharepoint Online', 'Jira Cloud', 'Dropbox'].includes(connector.name)
|
||||
);
|
||||
const { createConnector, isLoading } = useCreateConnector();
|
||||
const { data } = useConnectors();
|
||||
|
||||
const assetBasePath = useAssetBasePath();
|
||||
const connectorsPath = assetBasePath + '/connectors.svg';
|
||||
|
||||
const {
|
||||
application: { navigateToUrl },
|
||||
} = useKibanaServices();
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center" direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiPanel paddingSize="l" hasShadow={false} hasBorder>
|
||||
<EuiFlexGroup alignItems="center" justifyContent="center" direction="column">
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="l"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="xxl" type={connectorsPath} />
|
||||
</EuiFlexItem>
|
||||
|
|
@ -45,13 +64,13 @@ export const EmptyConnectorsPrompt: React.FC = () => {
|
|||
<EuiTitle>
|
||||
<h2>
|
||||
{i18n.translate('xpack.serverlessSearch.connectorsEmpty.title', {
|
||||
defaultMessage: 'Create a connector',
|
||||
defaultMessage: 'Set up a new connector',
|
||||
})}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<EuiText textAlign="center" color="subdued">
|
||||
<p>
|
||||
{i18n.translate('xpack.serverlessSearch.connectorsEmpty.description', {
|
||||
defaultMessage:
|
||||
|
|
@ -60,155 +79,215 @@ export const EmptyConnectorsPrompt: React.FC = () => {
|
|||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel color="subdued">
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup justifyContent="center" alignItems="center" direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type="documents" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.guideOneDescription',
|
||||
{
|
||||
defaultMessage: "Choose a data source you'd like to sync",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel color="subdued">
|
||||
<EuiFlexItem grow={false}>
|
||||
<DecorativeHorizontalStepper stepCount={3} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup justifyContent="center" alignItems="center" direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type={connectorsPath} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.serverlessSearch.connectorsEmpty.guideTwoDescription"
|
||||
defaultMessage="Deploy connector code on your own infrastructure by running from {source}, or using {docker}"
|
||||
values={{
|
||||
source: (
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptSourceLink"
|
||||
href={docLinks.connectorsRunFromSource}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.sourceLabel',
|
||||
{ defaultMessage: 'source' }
|
||||
)}
|
||||
</EuiLink>
|
||||
),
|
||||
docker: (
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptDockerLink"
|
||||
href={docLinks.connectorsRunWithDocker}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.dockerLabel',
|
||||
{ defaultMessage: 'Docker' }
|
||||
)}
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup justifyContent="center" alignItems="center" direction="column">
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
direction="row"
|
||||
gutterSize="s"
|
||||
>
|
||||
{connectorExamples.map((connector, index) => (
|
||||
<React.Fragment key={connector.serviceType}>
|
||||
{index === Math.floor(connectorExamples.length / 2) && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type="documents" />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
<EuiFlexItem grow={false}>
|
||||
<ConnectorIcon
|
||||
name={connector.name}
|
||||
serviceType={connector.serviceType}
|
||||
iconPath={connector.iconPath}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.guideOneDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
"Choose from over 30 third-party data sources you'd like to sync",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="documents" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type={connectorsPath} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="logoElastic" />
|
||||
<EuiIcon color="primary" size="l" type="launch" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.guideThreeDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
'Enter access and connection details for your data source and run your first sync',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.serverlessSearch.connectorsEmpty.guideTwoDescription"
|
||||
defaultMessage="Deploy connector code on your own infrastructure by running from {source}, or using {docker}"
|
||||
values={{
|
||||
source: (
|
||||
<EuiLink
|
||||
target="_blank"
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptSourceLink"
|
||||
href={docLinks.connectorsRunFromSource}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.sourceLabel',
|
||||
{ defaultMessage: 'source' }
|
||||
)}
|
||||
</EuiLink>
|
||||
),
|
||||
docker: (
|
||||
<EuiLink
|
||||
target="_blank"
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptDockerLink"
|
||||
href={docLinks.connectorsRunWithDocker}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.dockerLabel',
|
||||
{ defaultMessage: 'Docker' }
|
||||
)}
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="documents" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type={connectorsPath} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="logoElastic" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.guideThreeDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
'Enter access and connection details for your data source and run your first sync',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup direction="row" gutterSize="m">
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptCreateConnectorButton"
|
||||
disabled={!data?.canManageConnectors}
|
||||
fill
|
||||
iconType="plusInCircle"
|
||||
onClick={() => createConnector()}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
{i18n.translate('xpack.serverlessSearch.connectorsEmpty.selfManagedButton', {
|
||||
defaultMessage: 'Self-managed connector',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup direction="column" gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptCreateElasticManagedConnectorButton"
|
||||
isLoading={isLoading}
|
||||
onClick={() =>
|
||||
navigateToUrl(`${BASE_CONNECTORS_PATH}/${ELASTIC_MANAGED_CONNECTOR_PATH}`)
|
||||
}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsEmpty.elasticManagedButton',
|
||||
{
|
||||
defaultMessage: 'Elastic managed connector',
|
||||
}
|
||||
)}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="accent">Coming soon</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptCreateConnectorButton"
|
||||
disabled={!data?.canManageConnectors}
|
||||
fill
|
||||
iconType="plusInCircleFilled"
|
||||
onClick={() => createConnector()}
|
||||
isLoading={isLoading}
|
||||
>
|
||||
{i18n.translate('xpack.serverlessSearch.connectorsEmpty.createConnector', {
|
||||
defaultMessage: 'Create connector',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle>
|
||||
<h3>
|
||||
{i18n.translate('xpack.serverlessSearch.connectorsEmpty.availableConnectors', {
|
||||
defaultMessage: 'Available connectors',
|
||||
})}
|
||||
</h3>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup gutterSize="s">
|
||||
{connectorTypes.map((connectorType) => (
|
||||
<EuiFlexItem key={connectorType.name}>
|
||||
<EuiToolTip content={connectorType.name}>
|
||||
<EuiIcon
|
||||
size="l"
|
||||
title={connectorType.name}
|
||||
id={connectorType.serviceType}
|
||||
type={connectorType.iconPath}
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
))}
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
/*
|
||||
* 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 { EuiLink, EuiPageTemplate, EuiText } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { LEARN_MORE_LABEL } from '../../../common/i18n_string';
|
||||
|
||||
import { useKibanaServices } from '../hooks/use_kibana';
|
||||
import { ElasticManagedConnectorComingSoon } from './connectors/elastic_managed_connector_coming_soon';
|
||||
|
||||
import { docLinks } from '../../../common/doc_links';
|
||||
|
||||
export const ConnectorsElasticManaged = () => {
|
||||
const { console: consolePlugin } = useKibanaServices();
|
||||
|
||||
const embeddableConsole = useMemo(
|
||||
() => (consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null),
|
||||
[consolePlugin]
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiPageTemplate offset={0} grow restrictWidth data-test-subj="svlSearchConnectorsPage">
|
||||
<EuiPageTemplate.Header
|
||||
pageTitle={i18n.translate('xpack.serverlessSearch.connectors.title', {
|
||||
defaultMessage: 'Connectors',
|
||||
})}
|
||||
data-test-subj="serverlessSearchConnectorsTitle"
|
||||
restrictWidth
|
||||
>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.serverlessSearch.connectors.headerContent"
|
||||
defaultMessage="Sync third-party data sources to Elasticsearch, by deploying Elastic connectors on your own infrastructure. {learnMoreLink}"
|
||||
values={{
|
||||
learnMoreLink: (
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchConnectorsOverviewLink"
|
||||
target="_blank"
|
||||
href={docLinks.connectors}
|
||||
>
|
||||
{LEARN_MORE_LABEL}
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Header>
|
||||
<EuiPageTemplate.Section restrictWidth color="subdued">
|
||||
<ElasticManagedConnectorComingSoon />
|
||||
</EuiPageTemplate.Section>
|
||||
{embeddableConsole}
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
@ -7,30 +7,36 @@
|
|||
|
||||
import {
|
||||
EuiButton,
|
||||
EuiCallOut,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiIcon,
|
||||
EuiLink,
|
||||
EuiPageTemplate,
|
||||
EuiSpacer,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import React, { useMemo } from 'react';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
|
||||
import { GithubLink } from '@kbn/search-api-panels';
|
||||
import { docLinks } from '../../../common/doc_links';
|
||||
import { LEARN_MORE_LABEL } from '../../../common/i18n_string';
|
||||
import { PLUGIN_ID } from '../../../common';
|
||||
import { useConnectors } from '../hooks/api/use_connectors';
|
||||
import { useCreateConnector } from '../hooks/api/use_create_connector';
|
||||
import { useKibanaServices } from '../hooks/use_kibana';
|
||||
import { EmptyConnectorsPrompt } from './connectors/empty_connectors_prompt';
|
||||
import { ConnectorsTable } from './connectors/connectors_table';
|
||||
import { ConnectorPrivilegesCallout } from './connectors/connector_config/connector_privileges_callout';
|
||||
import { useAssetBasePath } from '../hooks/use_asset_base_path';
|
||||
|
||||
import { BASE_CONNECTORS_PATH, ELASTIC_MANAGED_CONNECTOR_PATH } from '../constants';
|
||||
|
||||
const CALLOUT_KEY = 'search.connectors.ElasticManaged.ComingSoon.feedbackCallout';
|
||||
|
||||
export const ConnectorsOverview = () => {
|
||||
const { data, isLoading: connectorsLoading } = useConnectors();
|
||||
const { http, console: consolePlugin } = useKibanaServices();
|
||||
const { console: consolePlugin } = useKibanaServices();
|
||||
const { createConnector, isLoading } = useCreateConnector();
|
||||
const embeddableConsole = useMemo(
|
||||
() => (consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null),
|
||||
|
|
@ -39,6 +45,18 @@ export const ConnectorsOverview = () => {
|
|||
|
||||
const canManageConnectors = !data || data.canManageConnectors;
|
||||
|
||||
const {
|
||||
application: { navigateToUrl },
|
||||
} = useKibanaServices();
|
||||
|
||||
const [showCallOut, setShowCallOut] = useState(sessionStorage.getItem(CALLOUT_KEY) !== 'hidden');
|
||||
|
||||
const onDismiss = () => {
|
||||
setShowCallOut(false);
|
||||
sessionStorage.setItem(CALLOUT_KEY, 'hidden');
|
||||
};
|
||||
const assetBasePath = useAssetBasePath();
|
||||
|
||||
return (
|
||||
<EuiPageTemplate offset={0} grow restrictWidth data-test-subj="svlSearchConnectorsPage">
|
||||
<EuiPageTemplate.Header
|
||||
|
|
@ -47,52 +65,38 @@ export const ConnectorsOverview = () => {
|
|||
})}
|
||||
data-test-subj="serverlessSearchConnectorsTitle"
|
||||
restrictWidth
|
||||
rightSideItems={[
|
||||
<EuiFlexGroup direction="row" alignItems="flexStart" justifyContent="center">
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
gutterSize="xs"
|
||||
justifyContent="flexEnd"
|
||||
direction="row"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon
|
||||
size="s"
|
||||
type={http.basePath.prepend(`/plugins/${PLUGIN_ID}/assets/github.svg`)}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText size="s">
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchConnectorsOverviewElasticConnectorsLink"
|
||||
target="_blank"
|
||||
href="https://github.com/elastic/connectors"
|
||||
>
|
||||
{i18n.translate('xpack.serverlessSearch.connectorsPythonLink', {
|
||||
rightSideItems={
|
||||
connectorsLoading || (data?.connectors || []).length > 0
|
||||
? [
|
||||
<EuiFlexGroup direction="row" alignItems="center" justifyContent="center">
|
||||
<EuiFlexItem>
|
||||
<GithubLink
|
||||
href={'https://github.com/elastic/connectors'}
|
||||
label={i18n.translate('xpack.serverlessSearch.connectorsPythonLink', {
|
||||
defaultMessage: 'elastic/connectors',
|
||||
})}
|
||||
</EuiLink>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchConnectorsOverviewCreateConnectorButton"
|
||||
disabled={!canManageConnectors}
|
||||
isLoading={isLoading}
|
||||
fill
|
||||
iconType="plusInCircleFilled"
|
||||
onClick={() => createConnector()}
|
||||
>
|
||||
{i18n.translate('xpack.serverlessSearch.connectors.createConnector', {
|
||||
defaultMessage: 'Create connector',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>,
|
||||
]}
|
||||
assetBasePath={assetBasePath}
|
||||
data-test-subj="serverlessSearchConnectorsOverviewElasticConnectorsLink"
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchConnectorsOverviewCreateConnectorButton"
|
||||
disabled={!canManageConnectors}
|
||||
isLoading={isLoading}
|
||||
fill
|
||||
iconType="plusInCircleFilled"
|
||||
onClick={() => createConnector()}
|
||||
>
|
||||
{i18n.translate('xpack.serverlessSearch.connectors.createConnector', {
|
||||
defaultMessage: 'Create connector',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>,
|
||||
]
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<EuiText>
|
||||
<p>
|
||||
|
|
@ -103,7 +107,6 @@ export const ConnectorsOverview = () => {
|
|||
learnMoreLink: (
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchConnectorsOverviewLink"
|
||||
external
|
||||
target="_blank"
|
||||
href={docLinks.connectors}
|
||||
>
|
||||
|
|
@ -118,7 +121,39 @@ export const ConnectorsOverview = () => {
|
|||
<EuiPageTemplate.Section restrictWidth color="subdued">
|
||||
<ConnectorPrivilegesCallout />
|
||||
{connectorsLoading || (data?.connectors || []).length > 0 ? (
|
||||
<ConnectorsTable />
|
||||
<>
|
||||
{showCallOut && (
|
||||
<>
|
||||
<EuiCallOut
|
||||
size="m"
|
||||
title="Coming soon Elastic managed connectors."
|
||||
iconType="pin"
|
||||
onDismiss={onDismiss}
|
||||
>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.connectorsOverview.calloutDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
"We're actively developing Elastic managed connectors, that won't require any self-managed infrastructure. You'll be able to handle all configuration in the UI. This will simplify syncing your data into a serverless Elasticsearch project.",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchConnectorsOverviewLinkButtonButton"
|
||||
color="primary"
|
||||
onClick={() =>
|
||||
navigateToUrl(`${BASE_CONNECTORS_PATH}/${ELASTIC_MANAGED_CONNECTOR_PATH}`)
|
||||
}
|
||||
>
|
||||
{LEARN_MORE_LABEL}
|
||||
</EuiButton>
|
||||
</EuiCallOut>
|
||||
<EuiSpacer size="m" />
|
||||
</>
|
||||
)}
|
||||
<ConnectorsTable />
|
||||
</>
|
||||
) : (
|
||||
<EmptyConnectorsPrompt />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,15 @@ import { Route, Routes } from '@kbn/shared-ux-router';
|
|||
import React from 'react';
|
||||
import { EditConnector } from './connectors/edit_connector';
|
||||
import { ConnectorsOverview } from './connectors_overview';
|
||||
import { ConnectorsElasticManaged } from './connectors_elastic_managed';
|
||||
import { ELASTIC_MANAGED_CONNECTOR_PATH } from '../constants';
|
||||
|
||||
export const ConnectorsRouter: React.FC = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route exact path={ELASTIC_MANAGED_CONNECTOR_PATH}>
|
||||
<ConnectorsElasticManaged />
|
||||
</Route>
|
||||
<Route exact path={'/:id'}>
|
||||
<EditConnector />
|
||||
</Route>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,171 @@
|
|||
/*
|
||||
* 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 {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPanel,
|
||||
EuiIcon,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
EuiBadge,
|
||||
EuiButtonEmpty,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { useKibanaServices } from '../../hooks/use_kibana';
|
||||
import { useAssetBasePath } from '../../hooks/use_asset_base_path';
|
||||
|
||||
import { BACK_LABEL } from '../../../../common/i18n_string';
|
||||
import { DecorativeHorizontalStepper } from '../common/decorative_horizontal_stepper';
|
||||
|
||||
export const ElasticManagedWebCrawlersCommingSoon: React.FC = () => {
|
||||
const {
|
||||
application: { navigateToUrl },
|
||||
} = useKibanaServices();
|
||||
|
||||
const assetBasePath = useAssetBasePath();
|
||||
const webCrawlerIcon = assetBasePath + '/web_crawlers.svg';
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center" direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiPanel paddingSize="l" hasShadow={false} hasBorder>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="l"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiButtonEmpty
|
||||
data-test-subj="serverlessSearchElasticManagedWebCrawlerEmptyBackButton"
|
||||
iconType="arrowLeft"
|
||||
onClick={() => navigateToUrl(`./`)}
|
||||
>
|
||||
{BACK_LABEL}
|
||||
</EuiButtonEmpty>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="xxl" type={webCrawlerIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
{i18n.translate('xpack.serverlessSearch.elasticManagedWebCrawlerEmpty.title', {
|
||||
defaultMessage: 'Elastic managed web crawlers',
|
||||
})}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiBadge color="accent">Coming soon</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText textAlign="center" color="subdued">
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.elasticManagedWebCrawlerEmpty.description',
|
||||
{
|
||||
defaultMessage:
|
||||
"We're actively developing Elastic managed web crawlers, that won't require any self-managed infrastructure. You'll be able to handle all configuration in the UI. This will simplify syncing your data into a serverless Elasticsearch project. This new workflow will have two steps:",
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel color="subdued">
|
||||
<EuiFlexItem grow={false}>
|
||||
<DecorativeHorizontalStepper stepCount={2} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
direction="row"
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type="globe" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.elasticManagedWebCrawlerEmpty.guideOneDescription',
|
||||
{
|
||||
defaultMessage: 'Set one or more domain URLs you want to crawl',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type={webCrawlerIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="logoElastic" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.elasticManagedWebCrawlerEmpty.guideThreeDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
'Configure all the web crawler process using Kibana',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
/*
|
||||
* 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 {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiPanel,
|
||||
EuiIcon,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
EuiLink,
|
||||
EuiButton,
|
||||
EuiBadge,
|
||||
} from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
|
||||
import { useKibanaServices } from '../../hooks/use_kibana';
|
||||
import { useAssetBasePath } from '../../hooks/use_asset_base_path';
|
||||
|
||||
import { ELASTIC_MANAGED_WEB_CRAWLERS_PATH, BASE_WEB_CRAWLERS_PATH } from '../../constants';
|
||||
import { DecorativeHorizontalStepper } from '../common/decorative_horizontal_stepper';
|
||||
|
||||
export const EmptyWebCrawlersPrompt: React.FC = () => {
|
||||
const {
|
||||
application: { navigateToUrl },
|
||||
} = useKibanaServices();
|
||||
|
||||
const assetBasePath = useAssetBasePath();
|
||||
const webCrawlersIcon = assetBasePath + '/web_crawlers.svg';
|
||||
const githubIcon = assetBasePath + '/github_white.svg';
|
||||
|
||||
return (
|
||||
<EuiFlexGroup alignItems="center" direction="column">
|
||||
<EuiFlexItem>
|
||||
<EuiPanel paddingSize="l" hasShadow={false} hasBorder>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="l"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="xxl" type={webCrawlersIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiTitle>
|
||||
<h2>
|
||||
{i18n.translate('xpack.serverlessSearch.webCrawlersEmpty.title', {
|
||||
defaultMessage: 'Set up a web crawler',
|
||||
})}
|
||||
</h2>
|
||||
</EuiTitle>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText textAlign="center" color="subdued">
|
||||
<p>
|
||||
{i18n.translate('xpack.serverlessSearch.webCrawlersEmpty.description', {
|
||||
defaultMessage:
|
||||
"To set up and deploy a web crawler you'll be working between data source, your terminal, and the Kibana UI. The high level process looks like this:",
|
||||
})}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
direction="column"
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiPanel color="subdued">
|
||||
<EuiFlexItem grow={false}>
|
||||
<DecorativeHorizontalStepper stepCount={3} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type={webCrawlersIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="launch" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.serverlessSearch.webCrawlersEmpty.guideTwoDescription"
|
||||
defaultMessage="Deploy web crawler code on your own infrastructure by running from {source}, or using {docker}"
|
||||
values={{
|
||||
source: (
|
||||
<EuiLink
|
||||
target="_blank"
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptSourceLink"
|
||||
href={'https://github.com/elastic/crawler'}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.webCrawlersEmpty.sourceLabel',
|
||||
{ defaultMessage: 'source' }
|
||||
)}
|
||||
</EuiLink>
|
||||
),
|
||||
docker: (
|
||||
<EuiLink
|
||||
target="_blank"
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptDockerLink"
|
||||
href={
|
||||
'https://github.com/elastic/crawler?tab=readme-ov-file#running-open-crawler-with-docker'
|
||||
}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.webCrawlersEmpty.dockerLabel',
|
||||
{ defaultMessage: 'Docker' }
|
||||
)}
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
direction="row"
|
||||
gutterSize="s"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon color="primary" size="l" type="globe" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.webCrawlersEmpty.guideOneDescription',
|
||||
{
|
||||
defaultMessage: 'Set one or more domain URLs you want to crawl',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup
|
||||
justifyContent="flexStart"
|
||||
alignItems="center"
|
||||
direction="column"
|
||||
>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiFlexGroup
|
||||
gutterSize="s"
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="globe" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type={webCrawlersIcon} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon size="m" type="sortRight" />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiIcon color="primary" size="l" type="logoElasticsearch" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiText>
|
||||
<p>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.webCrawlersEmpty.guideThreeDescription',
|
||||
{
|
||||
defaultMessage:
|
||||
'Configure your web crawler and connect it to Elasticsearch',
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
<EuiFlexGroup direction="row" gutterSize="m">
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptCreateSelfManagedConnectorButton"
|
||||
fill
|
||||
iconType={githubIcon}
|
||||
href={'https://github.com/elastic/crawler'}
|
||||
>
|
||||
{i18n.translate('xpack.serverlessSearch.webCrawlersEmpty.selfManagedButton', {
|
||||
defaultMessage: 'Self-managed web crawler',
|
||||
})}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem>
|
||||
<EuiFlexGroup direction="column" gutterSize="s" alignItems="center">
|
||||
<EuiFlexItem>
|
||||
<EuiButton
|
||||
data-test-subj="serverlessSearchEmptyConnectorsPromptCreateElasticManagedConnectorButton"
|
||||
onClick={() =>
|
||||
navigateToUrl(
|
||||
`${BASE_WEB_CRAWLERS_PATH}/${ELASTIC_MANAGED_WEB_CRAWLERS_PATH}`
|
||||
)
|
||||
}
|
||||
>
|
||||
{i18n.translate(
|
||||
'xpack.serverlessSearch.webCrawlersEmpty.elasticManagedButton',
|
||||
{
|
||||
defaultMessage: 'Elastic managed web crawler',
|
||||
}
|
||||
)}
|
||||
</EuiButton>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<EuiBadge color="accent">Coming soon</EuiBadge>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanel>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* 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 { EuiLink, EuiPageTemplate, EuiText } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { LEARN_MORE_LABEL } from '../../../common/i18n_string';
|
||||
|
||||
import { useKibanaServices } from '../hooks/use_kibana';
|
||||
import { ElasticManagedWebCrawlersCommingSoon } from './web_crawlers/elastic_managed_web_crawler_coming_soon';
|
||||
|
||||
export const WebCrawlersElasticManaged = () => {
|
||||
const { console: consolePlugin } = useKibanaServices();
|
||||
|
||||
const embeddableConsole = useMemo(
|
||||
() => (consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null),
|
||||
[consolePlugin]
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiPageTemplate offset={0} grow restrictWidth data-test-subj="svlSearchConnectorsPage">
|
||||
<EuiPageTemplate.Header
|
||||
pageTitle={i18n.translate('xpack.serverlessSearch.webcrawlers.title', {
|
||||
defaultMessage: 'Web crawlers',
|
||||
})}
|
||||
data-test-subj="serverlessSearchConnectorsTitle"
|
||||
restrictWidth
|
||||
>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.serverlessSearch.webcrawlers.headerContent"
|
||||
defaultMessage="Discover extract and index searchable content from websites and knowledge bases {learnMoreLink}"
|
||||
values={{
|
||||
learnMoreLink: (
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchConnectorsOverviewLink"
|
||||
external
|
||||
target="_blank"
|
||||
href={'https://github.com/elastic/crawler'}
|
||||
>
|
||||
{LEARN_MORE_LABEL}
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Header>
|
||||
<EuiPageTemplate.Section restrictWidth color="subdued">
|
||||
<ElasticManagedWebCrawlersCommingSoon />
|
||||
</EuiPageTemplate.Section>
|
||||
{embeddableConsole}
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
* 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 { EuiLink, EuiPageTemplate, EuiText } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import { LEARN_MORE_LABEL } from '../../../common/i18n_string';
|
||||
|
||||
import { useKibanaServices } from '../hooks/use_kibana';
|
||||
import { EmptyWebCrawlersPrompt } from './web_crawlers/empty_web_crawlers_prompt';
|
||||
|
||||
export const WebCrawlersOverview = () => {
|
||||
const { console: consolePlugin } = useKibanaServices();
|
||||
|
||||
const embeddableConsole = useMemo(
|
||||
() => (consolePlugin?.EmbeddableConsole ? <consolePlugin.EmbeddableConsole /> : null),
|
||||
[consolePlugin]
|
||||
);
|
||||
|
||||
return (
|
||||
<EuiPageTemplate offset={0} grow restrictWidth data-test-subj="svlSearchConnectorsPage">
|
||||
<EuiPageTemplate.Header
|
||||
pageTitle={i18n.translate('xpack.serverlessSearch.webcrawlers.title', {
|
||||
defaultMessage: 'Web crawlers',
|
||||
})}
|
||||
data-test-subj="serverlessSearchConnectorsTitle"
|
||||
restrictWidth
|
||||
>
|
||||
<EuiText>
|
||||
<p>
|
||||
<FormattedMessage
|
||||
id="xpack.serverlessSearch.webcrawlers.headerContent"
|
||||
defaultMessage="Discover extract and index searchable content from websites and knowledge bases {learnMoreLink}"
|
||||
values={{
|
||||
learnMoreLink: (
|
||||
<EuiLink
|
||||
data-test-subj="serverlessSearchConnectorsLearnMoreLink"
|
||||
external
|
||||
target="_blank"
|
||||
href={'https://github.com/elastic/crawler'}
|
||||
>
|
||||
{LEARN_MORE_LABEL}
|
||||
</EuiLink>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiPageTemplate.Header>
|
||||
<EuiPageTemplate.Section restrictWidth color="subdued">
|
||||
<EmptyWebCrawlersPrompt />
|
||||
</EuiPageTemplate.Section>
|
||||
{embeddableConsole}
|
||||
</EuiPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
/*
|
||||
* 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 { Route, Routes } from '@kbn/shared-ux-router';
|
||||
import React from 'react';
|
||||
import { WebCrawlersOverview } from './web_crawlers_overview';
|
||||
import { WebCrawlersElasticManaged } from './web_crawlers_elastic_managed';
|
||||
|
||||
export const WebCrawlersRouter: React.FC = () => {
|
||||
return (
|
||||
<Routes>
|
||||
<Route exact path="/">
|
||||
<WebCrawlersOverview />
|
||||
</Route>
|
||||
<Route exact path="/elastic_managed">
|
||||
<WebCrawlersElasticManaged />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
|
@ -12,5 +12,8 @@ export const INDEX_NAME_PLACEHOLDER = 'index_name';
|
|||
|
||||
// Paths
|
||||
export const BASE_CONNECTORS_PATH = 'connectors';
|
||||
export const BASE_WEB_CRAWLERS_PATH = 'web_crawlers';
|
||||
export const EDIT_CONNECTOR_PATH = `${BASE_CONNECTORS_PATH}/:id`;
|
||||
export const ELASTIC_MANAGED_CONNECTOR_PATH = '/elastic_managed';
|
||||
export const ELASTIC_MANAGED_WEB_CRAWLERS_PATH = '/elastic_managed';
|
||||
export const FILE_UPLOAD_PATH = '/app/ml/filedatavisualizer';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
/*
|
||||
* 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 { CoreStart } from '@kbn/core-lifecycle-browser';
|
||||
|
||||
import { I18nProvider } from '@kbn/i18n-react';
|
||||
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
|
||||
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
|
||||
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
|
||||
import ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||||
import { Router } from '@kbn/shared-ux-router';
|
||||
import { ServerlessSearchContext } from './hooks/use_kibana';
|
||||
|
||||
export async function renderApp(
|
||||
element: HTMLElement,
|
||||
core: CoreStart,
|
||||
services: ServerlessSearchContext,
|
||||
queryClient: QueryClient
|
||||
) {
|
||||
const { WebCrawlersRouter } = await import('./components/web_crawlers_router');
|
||||
|
||||
ReactDOM.render(
|
||||
<KibanaRenderContextProvider {...core}>
|
||||
<KibanaContextProvider services={{ ...core, ...services }}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
<I18nProvider>
|
||||
<Router history={services.history}>
|
||||
<WebCrawlersRouter />
|
||||
</Router>
|
||||
</I18nProvider>
|
||||
</QueryClientProvider>
|
||||
</KibanaContextProvider>
|
||||
</KibanaRenderContextProvider>,
|
||||
element
|
||||
);
|
||||
return () => ReactDOM.unmountComponentAtNode(element);
|
||||
}
|
||||
|
|
@ -1 +1,11 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15 15 70 70" fill="none"><circle cx="50" cy="50" r="35" fill="#0060d5"/><mask id="A" maskUnits="userSpaceOnUse" x="15" y="15" width="70" height="70" mask-type="alpha"><circle cx="50" cy="50" r="35" fill="#0060d5"/></mask><g mask="url(#A)"><path fill-rule="evenodd" d="M49.293 36.565l-2.828-2.828a5 5 0 0 0-7.071 0l-5.657 5.657a5 5 0 0 0 0 7.071l2.828 2.828 12.728-12.728zm-.707-4.95a8 8 0 0 0-11.314 0l-5.657 5.657a8 8 0 0 0 0 11.314l4.95 4.95 16.971-16.971-4.95-4.95zm17.678 21.92l-2.828-2.828-12.728 12.728 2.828 2.828a5 5 0 0 0 7.071 0l5.657-5.657a5 5 0 0 0 0-7.071zm-2.828-7.071l-16.97 16.971 4.95 4.95a8 8 0 0 0 11.314 0l5.657-5.657a8 8 0 0 0 0-11.314l-4.95-4.95z" fill="#fff"/><rect x="23.13" y="21.716" width="20" height="3" rx="1.5" transform="rotate(45 23.13 21.716)" fill="#fff"/><rect x="64.142" y="62.728" width="20" height="3" rx="1.5" transform="rotate(45 64.142 62.728)" fill="#fff"/><rect x="40.101" y="45.757" width="11" height="3" rx="1.5" transform="rotate(45 40.101 45.757)" fill="#fff"/><rect x="47.879" y="37.979" width="11" height="3" rx="1.5" transform="rotate(45 47.879 37.979)" fill="#fff"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<g clip-path="url(#a)">
|
||||
<path fill="#343741" d="m10.059 19.244-5.303-5.303 1.673-.448 4.078 4.078 5.572-1.493 1.492-5.57-4.078-4.08.448-1.672 5.303 5.303-1.716 6.408 3.712 3.712-.224.836-.837.225-3.712-3.713-6.408 1.717Z"/>
|
||||
<path fill="#007871" fill-rule="evenodd" d="m14.652 14.652-3.623.97-2.651-2.651.746-2.786L2.76 3.821l.224-.837.837-.224 6.364 6.364 2.785-.746 2.652 2.652-.97 3.622Zm-.703-3.174-.522 1.95-1.95.521-1.426-1.427.522-1.949 1.95-.522 1.426 1.427Z" clip-rule="evenodd"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="a">
|
||||
<path fill="#fff" d="M0 0h24v24H0z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 710 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
||||
<path fill="#343741" fill-rule="evenodd" d="M11.25 1.933v-.75L12 .75l.75.433v.75l7.593 4.384.65-.375.75.433v.866l-.65.375v8.768l.65.375v.866l-.75.433-.65-.375-7.593 4.384v.75l-.75.433-.75-.433v-.75l-7.593-4.384-.65.375-.75-.433v-.866l.65-.375V7.616l-.65-.375v-.866l.75-.433.65.375 7.593-4.384Zm1.5 6 2.397 1.384 1.098-.634-3.495-2.018v1.268Zm3.147 2.683v2.768l1.098.634V9.982l-1.098.634Zm-.75 4.067-2.397 1.384v1.268l3.495-2.018-1.098-.634Zm-3.897 1.384-2.397-1.384-1.098.634 3.495 2.018v-1.268Zm-3.147-2.683v-2.768l-1.098-.634v4.036l1.098-.634Zm.75-4.067 2.397-1.384V6.665L7.755 8.683l1.098.634Zm8.892-1.5L12.75 4.933V3.665l6.093 3.518-1.098.634Zm.75 7.067V9.116l1.098-.634v7.036l-1.098-.634Zm-5.745 4.183 4.995-2.884 1.098.634-6.093 3.518v-1.268Zm-6.495-2.884 4.995 2.884v1.268l-6.093-3.518 1.098-.634Zm-.75-7.067v5.768l-1.098.634V8.482l1.098.634Zm5.745-4.183L6.255 7.817l-1.098-.634 6.093-3.518v1.268Zm-1.647 5.683L12 9.232l2.397 1.384v2.768L12 14.768l-2.397-1.384v-2.768Z" clip-rule="evenodd"/>
|
||||
<path fill="#007871" d="m12 10.5 1.299.75v1.5L12 13.5l-1.299-.75v-1.5L12 10.5Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -8,7 +8,7 @@
|
|||
import type { AppDeepLinkId, NavigationTreeDefinition } from '@kbn/core-chrome-browser';
|
||||
import type { ApplicationStart } from '@kbn/core-application-browser';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { CONNECTORS_LABEL } from '../common/i18n_string';
|
||||
import { CONNECTORS_LABEL, WEB_CRAWLERS_LABEL } from '../common/i18n_string';
|
||||
|
||||
export const navigationTree = ({ isAppRegistered }: ApplicationStart): NavigationTreeDefinition => {
|
||||
function isAvailable<T>(appId: string, content: T): T[] {
|
||||
|
|
@ -54,6 +54,10 @@ export const navigationTree = ({ isAppRegistered }: ApplicationStart): Navigatio
|
|||
title: CONNECTORS_LABEL,
|
||||
link: 'serverlessConnectors',
|
||||
},
|
||||
{
|
||||
title: WEB_CRAWLERS_LABEL,
|
||||
link: 'serverlessWebCrawlers',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -120,6 +120,27 @@ export class ServerlessSearchPlugin
|
|||
},
|
||||
});
|
||||
|
||||
const webCrawlersTitle = i18n.translate('xpack.serverlessSearch.app.webCrawlers.title', {
|
||||
defaultMessage: 'Web Crawlers',
|
||||
});
|
||||
|
||||
core.application.register({
|
||||
id: 'serverlessWebCrawlers',
|
||||
title: webCrawlersTitle,
|
||||
appRoute: '/app/web_crawlers',
|
||||
euiIconType: 'logoElastic',
|
||||
category: DEFAULT_APP_CATEGORIES.enterpriseSearch,
|
||||
visibleIn: [],
|
||||
async mount({ element, history }: AppMountParameters) {
|
||||
const { renderApp } = await import('./application/web_crawlers');
|
||||
const [coreStart, services] = await core.getStartServices();
|
||||
coreStart.chrome.docTitle.change(webCrawlersTitle);
|
||||
docLinks.setDocLinks(coreStart.docLinks.links);
|
||||
|
||||
return await renderApp(element, coreStart, { history, ...services }, queryClient);
|
||||
},
|
||||
});
|
||||
|
||||
const { searchIndices } = setupDeps;
|
||||
core.application.register({
|
||||
id: 'serverlessHomeRedirect',
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
"@kbn/core-http-server",
|
||||
"@kbn/logging",
|
||||
"@kbn/security-plugin-types-public",
|
||||
"@kbn/deeplinks-search",
|
||||
"@kbn/core-application-browser",
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43115,8 +43115,6 @@
|
|||
"xpack.serverlessSearch.connectors.typeLabel": "Type",
|
||||
"xpack.serverlessSearch.connectors.variablesTitle": "Variable pour votre {url}",
|
||||
"xpack.serverlessSearch.connectors.waitingForConnection": "En attente de connexion",
|
||||
"xpack.serverlessSearch.connectorsEmpty.availableConnectors": "Connecteurs disponibles",
|
||||
"xpack.serverlessSearch.connectorsEmpty.createConnector": "Créer un connecteur",
|
||||
"xpack.serverlessSearch.connectorsEmpty.description": "La configuration et le déploiement d'un connecteur se passe entre la source de données tierce, votre terminal et l'UI sans serveur d'Elasticsearch. Le processus à haut niveau ressemble à ça :",
|
||||
"xpack.serverlessSearch.connectorsEmpty.dockerLabel": "Docker",
|
||||
"xpack.serverlessSearch.connectorsEmpty.guideOneDescription": "Choisissez une source de données à synchroniser",
|
||||
|
|
|
|||
|
|
@ -43081,8 +43081,6 @@
|
|||
"xpack.serverlessSearch.connectors.typeLabel": "型",
|
||||
"xpack.serverlessSearch.connectors.variablesTitle": "{url}の変数",
|
||||
"xpack.serverlessSearch.connectors.waitingForConnection": "接続を待機中",
|
||||
"xpack.serverlessSearch.connectorsEmpty.availableConnectors": "使用可能なコネクター",
|
||||
"xpack.serverlessSearch.connectorsEmpty.createConnector": "コネクターを作成",
|
||||
"xpack.serverlessSearch.connectorsEmpty.description": "コネクターを設定およびデプロイするには、サードパーティのデータソース、端末、ElasticsearchサーバーレスUI の間で作業することになります。プロセスの概要は次のとおりです。",
|
||||
"xpack.serverlessSearch.connectorsEmpty.dockerLabel": "Docker",
|
||||
"xpack.serverlessSearch.connectorsEmpty.guideOneDescription": "同期したいデータソースを選択します。",
|
||||
|
|
|
|||
|
|
@ -42429,8 +42429,6 @@
|
|||
"xpack.serverlessSearch.connectors.typeLabel": "类型",
|
||||
"xpack.serverlessSearch.connectors.variablesTitle": "您的 {url} 的变量",
|
||||
"xpack.serverlessSearch.connectors.waitingForConnection": "等待连接",
|
||||
"xpack.serverlessSearch.connectorsEmpty.availableConnectors": "可用连接器",
|
||||
"xpack.serverlessSearch.connectorsEmpty.createConnector": "创建连接器",
|
||||
"xpack.serverlessSearch.connectorsEmpty.description": "要设置并部署连接器，您需要在第三方数据源、终端与 Elasticsearch 无服务器 UI 之间开展工作。高级流程类似于这样：",
|
||||
"xpack.serverlessSearch.connectorsEmpty.dockerLabel": "Docker",
|
||||
"xpack.serverlessSearch.connectorsEmpty.guideOneDescription": "选择要同步的数据源",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export function SvlSearchConnectorsPageProvider({ getService }: FtrProviderConte
|
|||
return {
|
||||
connectorConfigurationPage: {
|
||||
async createConnector() {
|
||||
await testSubjects.click('serverlessSearchConnectorsOverviewCreateConnectorButton');
|
||||
await testSubjects.click('serverlessSearchEmptyConnectorsPromptCreateConnectorButton');
|
||||
await testSubjects.existOrFail('serverlessSearchEditConnectorButton');
|
||||
await testSubjects.exists('serverlessSearchConnectorLinkElasticsearchRunWithDockerButton');
|
||||
await testSubjects.exists('serverlessSearchConnectorLinkElasticsearchRunFromSourceButton');
|
||||
|
|
@ -90,9 +90,9 @@ export function SvlSearchConnectorsPageProvider({ getService }: FtrProviderConte
|
|||
},
|
||||
async expectConnectorOverviewPageComponentsToExist() {
|
||||
await testSubjects.existOrFail('serverlessSearchConnectorsTitle');
|
||||
await testSubjects.existOrFail('serverlessSearchConnectorsOverviewElasticConnectorsLink');
|
||||
// await testSubjects.existOrFail('serverlessSearchConnectorsOverviewElasticConnectorsLink');
|
||||
await testSubjects.exists('serverlessSearchEmptyConnectorsPromptCreateConnectorButton');
|
||||
await testSubjects.existOrFail('serverlessSearchConnectorsOverviewCreateConnectorButton');
|
||||
// await testSubjects.existOrFail('serverlessSearchConnectorsOverviewCreateConnectorButton');
|
||||
},
|
||||
async expectConnectorTableToExist() {
|
||||
await testSubjects.existOrFail('serverlessSearchConnectorTable');
|
||||
|
|
|
|||
|
|
@ -241,6 +241,7 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
|
|||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Data' });
|
||||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Index Management' });
|
||||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Connectors' });
|
||||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Web crawlers' });
|
||||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Build' });
|
||||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Dev Tools' });
|
||||
await solutionNavigation.sidenav.expectLinkExists({ text: 'Playground' });
|
||||
|
|
@ -265,6 +266,7 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
|
|||
'data',
|
||||
'management:index_management',
|
||||
'serverlessConnectors',
|
||||
'serverlessWebCrawlers',
|
||||
'build',
|
||||
'dev_tools',
|
||||
'searchPlayground',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue