Skip to content

Commit

Permalink
improve pipelines awareness
Browse files Browse the repository at this point in the history
  • Loading branch information
saarikabhasi committed Apr 30, 2024
1 parent 2d63f72 commit 3baa1af
Show file tree
Hide file tree
Showing 8 changed files with 361 additions and 55 deletions.
228 changes: 228 additions & 0 deletions packages/kbn-search-api-panels/components/preprocess_data.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
/*
* 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 {
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
EuiText,
EuiThemeProvider,
EuiTitle,
EuiToken,
EuiPanel,
EuiLink,
EuiFlexGrid,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';

export const PreprocessDataPanel: React.FC = () => {
return (
<EuiThemeProvider colorMode="dark">
<EuiPanel paddingSize="xl">
<EuiFlexGrid direction="column" columns={2} gutterSize="xl">
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiToken iconType="sparkles" size="l" color="#466B8D" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate(
'searchApiPanels.preprocessData.overview.dataEnrichment.title',
{
defaultMessage: 'Data enrichment',
}
)}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
<p>
{i18n.translate(
'searchApiPanels.preprocessData.overview.dataEnrichment.description',
{
defaultMessage:
'Add information from external sources or apply transformations to your documents for more contextual, insightful search.',
}
)}
</p>
</EuiText>
<EuiSpacer size="s" />
<EuiText>
<p>
<EuiLink href={'#'} target="_blank">
{i18n.translate(
'searchApiPanels.preprocessData.overview.dataEnrichment.learnMore',
{
defaultMessage: 'Learn More',
}
)}
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiToken iconType="logstashFilter" size="l" color="#466B8D" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate('searchApiPanels.pipeline.overview.dataFiltering.title', {
defaultMessage: 'Data filtering',
})}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
{i18n.translate('searchApiPanels.pipeline.overview.dataFiltering.description', {
defaultMessage:
'Remove fields from documents like sensitive information from documents before indexing.',
})}
</EuiText>
<EuiSpacer size="s" />
<EuiText>
<p>
<EuiLink href={'#'} target="_blank">
{i18n.translate(
'searchApiPanels.preprocessData.overview.dataFiltering.learnMore',
{
defaultMessage: 'Learn More',
}
)}
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiToken iconType="tokenArray" size="l" fill="none" color="#466B8D" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate('searchApiPanels.pipeline.overview.arrayJsonHandling.title', {
defaultMessage: 'Array/JSON handling',
})}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
{i18n.translate(
'searchApiPanels.pipeline.overview.arrayJsonHandling.description',
{
defaultMessage: 'Run batch processors, parse JSON data and sort elements.',
}
)}
</EuiText>
<EuiSpacer size="s" />
<EuiText>
<p>
<EuiLink href={'#'} target="_blank">
{i18n.translate(
'searchApiPanels.preprocessData.overview.arrayJsonHandling.learnMore',
{
defaultMessage: 'Learn More',
}
)}
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiToken iconType="cut" size="l" color="#466B8D" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate('searchApiPanels.pipeline.overview.dataTransformation.title', {
defaultMessage: 'Data transformation',
})}
</h3>
</EuiTitle>
<EuiSpacer size="s" />
<EuiText size="s">
{i18n.translate(
'searchApiPanels.pipeline.overview.dataTransformation.description',
{
defaultMessage:
'Parse information from your documents to ensure they conform to a standardized format.',
}
)}
</EuiText>
<EuiSpacer size="s" />
<EuiText size="s">
<p>
<EuiLink href={'#'} target="_blank">
{i18n.translate(
'searchApiPanels.preprocessData.overview.dataTransformation.learnMore',
{
defaultMessage: 'Learn More',
}
)}
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup alignItems="flexStart" justifyContent="flexStart">
<EuiFlexItem grow={false}>
<EuiToken iconType="controlsVertical" size="l" color="#466B8D" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h3>
{i18n.translate('searchApiPanels.pipeline.overview.pipelineHandling.title', {
defaultMessage: 'Pipeline handling',
})}
</h3>
</EuiTitle>

<EuiText size="s">
{i18n.translate(
'searchApiPanels.pipeline.overview.pipelineHandling.description',
{
defaultMessage:
'Handle error exceptions, execute another pipeline or reroute document to another index',
}
)}
</EuiText>
<EuiSpacer size="s" />
<EuiText>
<p>
<EuiLink href={'#'} target="_blank">
{i18n.translate(
'searchApiPanels.preprocessData.overview.pipelineHandling.learnMore',
{
defaultMessage: 'Learn More',
}
)}
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGrid>
</EuiPanel>
</EuiThemeProvider>
);
};
1 change: 1 addition & 0 deletions packages/kbn-search-api-panels/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export * from './components/pipeline_panel';
export * from './components/select_client';
export * from './components/try_in_console_button';
export * from './components/install_client';
export * from './components/preprocess_data';

export * from './types';
export * from './utils';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,21 @@
* 2.0.
*/

import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import {
EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiLink,
EuiPanel,
EuiSpacer,
EuiText,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Connector, ConnectorStatus } from '@kbn/search-connectors';
import React, { useState } from 'react';
import { useQueryClient, useMutation } from '@tanstack/react-query';
import { FormattedMessage } from '@kbn/i18n-react';
import { isValidIndexName } from '../../../../utils/validate_index_name';
import { SAVE_LABEL } from '../../../../../common/i18n_string';
import { useConnector } from '../../../hooks/api/use_connector';
Expand Down Expand Up @@ -80,6 +90,61 @@ export const ConnectorIndexName: React.FC<ConnectorIndexNameProps> = ({ connecto
onChange={(name) => setNewIndexname(name)}
/>
<EuiSpacer />
<EuiPanel hasBorder>
<EuiFlexGroup direction="column" justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3>
{i18n.translate('xpack.serverlessSearch.connectors.config.preprocessData.title', {
defaultMessage: 'Preprocess your data',
})}
</h3>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText>
<p>
<FormattedMessage
id="xpack.serverlessSearch.connectors.config.preprocessData.description"
defaultMessage="You can use ingest pipelines to preprocess data before indexing into Elasticseearch. Connectors clients use {clientIngestionPipeline} pipeline before indexing data into Elasticsearch"
values={{
clientIngestionPipeline: (
<strong>
{i18n.translate(
'xpack.serverlessSearch.connectors.config.preprocessData.clientIngestionPipeline',
{
defaultMessage: 'search-default-ingestion',
}
)}
,
</strong>
),
}}
/>
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem>
<EuiText>
<p>
<EuiLink
data-test-subj="serverlessSearchConnectorIndexNameLearnMoreLink"
href={'#'}
target="_blank"
>
{i18n.translate(
'xpack.serverlessSearch.connectors.config.preprocessDataTitle.learnMore',
{
defaultMessage: 'Learn More',
}
)}
</EuiLink>
</p>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<EuiSpacer />
<ApiKeyPanel connector={connector} />
<EuiSpacer />
<EuiFlexGroup>
Expand Down
Loading

0 comments on commit 3baa1af

Please sign in to comment.