-
Notifications
You must be signed in to change notification settings - Fork 8.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Serverless Search] Index Management - Index Details Overview (#173581)
## Summary This PR implements a new Overview tab for an Index details in Index Management for Serverless. It has data panels for information about the index and optional empty states if the index has no documents. (see Screenshots) ### Screenshots Index with data  Index without data    Connector Index without data  ### 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) - [ ] [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)) - [ ] 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)
- Loading branch information
1 parent
6bec710
commit 5798255
Showing
26 changed files
with
1,278 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
x-pack/plugins/serverless_search/public/application/components/badge_list.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /* | ||
| * 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 { EuiBadgeGroup, EuiBadge } from '@elastic/eui'; | ||
|
|
||
| export interface BadgeListProps { | ||
| badges: React.ReactNode[]; | ||
| maxBadgesToDisplay?: number; | ||
| } | ||
|
|
||
| export const BadgeList = ({ badges, maxBadgesToDisplay }: BadgeListProps) => { | ||
| const maxBadges = maxBadgesToDisplay ?? 3; | ||
| if (badges.length === 0) { | ||
| return <></>; | ||
| } | ||
|
|
||
| const badgesToDisplay = badges.slice(0, maxBadges); | ||
| return ( | ||
| <EuiBadgeGroup gutterSize="s" css={{ width: '100%' }}> | ||
| {badgesToDisplay.map((badge) => badge)} | ||
| {badges.length > maxBadges && ( | ||
| <EuiBadge color="hollow">+{badges.length - maxBadges}</EuiBadge> | ||
| )} | ||
| </EuiBadgeGroup> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
166 changes: 166 additions & 0 deletions
166
...ins/serverless_search/public/application/components/index_management/api_empty_prompt.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,166 @@ | ||
| /* | ||
| * 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, { useMemo, useState } from 'react'; | ||
| import { i18n } from '@kbn/i18n'; | ||
| import { FormattedMessage } from '@kbn/i18n-react'; | ||
| import { | ||
| EuiEmptyPrompt, | ||
| EuiFlexItem, | ||
| EuiFlexGroup, | ||
| EuiIcon, | ||
| EuiText, | ||
| EuiButtonEmpty, | ||
| EuiLink, | ||
| EuiPanel, | ||
| EuiTitle, | ||
| EuiSpacer, | ||
| EuiSteps, | ||
| } from '@elastic/eui'; | ||
| import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps'; | ||
| import { | ||
| CodeBox, | ||
| getConsoleRequest, | ||
| getLanguageDefinitionCodeSnippet, | ||
| LanguageDefinition, | ||
| LanguageDefinitionSnippetArguments, | ||
| } from '@kbn/search-api-panels'; | ||
|
|
||
| import { BACK_LABEL } from '../../../../common/i18n_string'; | ||
|
|
||
| import { useAssetBasePath } from '../../hooks/use_asset_base_path'; | ||
| import { useKibanaServices } from '../../hooks/use_kibana'; | ||
| import { javaDefinition } from '../languages/java'; | ||
| import { languageDefinitions } from '../languages/languages'; | ||
| import { LanguageGrid } from '../languages/language_grid'; | ||
| import { | ||
| API_KEY_PLACEHOLDER, | ||
| CLOUD_ID_PLACEHOLDER, | ||
| ELASTICSEARCH_URL_PLACEHOLDER, | ||
| } from '../../constants'; | ||
|
|
||
| import { ApiKeyPanel } from '../api_key/api_key'; | ||
|
|
||
| export interface APIIndexEmptyPromptProps { | ||
| indexName: string; | ||
| onBackClick?: () => void; | ||
| } | ||
|
|
||
| export const APIIndexEmptyPrompt = ({ indexName, onBackClick }: APIIndexEmptyPromptProps) => { | ||
| const { application, cloud, share } = useKibanaServices(); | ||
| const assetBasePath = useAssetBasePath(); | ||
| const [selectedLanguage, setSelectedLanguage] = | ||
| React.useState<LanguageDefinition>(javaDefinition); | ||
| const [clientApiKey, setClientApiKey] = useState<string>(API_KEY_PLACEHOLDER); | ||
| const { elasticsearchURL, cloudId } = useMemo(() => { | ||
| return { | ||
| elasticsearchURL: cloud?.elasticsearchUrl ?? ELASTICSEARCH_URL_PLACEHOLDER, | ||
| cloudId: cloud?.cloudId ?? CLOUD_ID_PLACEHOLDER, | ||
| }; | ||
| }, [cloud]); | ||
| const codeSnippetArguments: LanguageDefinitionSnippetArguments = { | ||
| url: elasticsearchURL, | ||
| apiKey: clientApiKey, | ||
| cloudId, | ||
| indexName, | ||
| }; | ||
|
|
||
| const apiIngestSteps: EuiContainedStepProps[] = [ | ||
| { | ||
| title: i18n.translate( | ||
| 'xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.ingest.title', | ||
| { defaultMessage: 'Ingest data via API using a programming language client' } | ||
| ), | ||
| children: ( | ||
| <EuiFlexGroup direction="column"> | ||
| <EuiFlexItem> | ||
| <LanguageGrid | ||
| assetBasePath={assetBasePath} | ||
| setSelectedLanguage={setSelectedLanguage} | ||
| languages={languageDefinitions} | ||
| selectedLanguage={selectedLanguage.id} | ||
| /> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <CodeBox | ||
| languages={languageDefinitions} | ||
| codeSnippet={getLanguageDefinitionCodeSnippet( | ||
| selectedLanguage, | ||
| 'ingestDataIndex', | ||
| codeSnippetArguments | ||
| )} | ||
| consoleRequest={getConsoleRequest('ingestDataIndex')} | ||
| selectedLanguage={selectedLanguage} | ||
| setSelectedLanguage={setSelectedLanguage} | ||
| assetBasePath={assetBasePath} | ||
| application={application} | ||
| sharePlugin={share} | ||
| /> | ||
| </EuiFlexItem> | ||
| </EuiFlexGroup> | ||
| ), | ||
| }, | ||
| { | ||
| title: i18n.translate( | ||
| 'xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.apiKey.title', | ||
| { defaultMessage: 'Prepare an API key' } | ||
| ), | ||
| children: <ApiKeyPanel setClientApiKey={setClientApiKey} />, | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <EuiPanel> | ||
| <EuiButtonEmpty | ||
| data-test-subj="serverlessSearchAPIIndexEmptyPromptBackButton" | ||
| onClick={onBackClick} | ||
| iconSide="left" | ||
| iconType="arrowLeft" | ||
| > | ||
| {BACK_LABEL} | ||
| </EuiButtonEmpty> | ||
| <EuiEmptyPrompt | ||
| icon={<EuiIcon type="addDataApp" size="xl" />} | ||
| title={ | ||
| <EuiTitle size="xs"> | ||
| <h5> | ||
| <FormattedMessage | ||
| id="xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.title" | ||
| defaultMessage="Ingest content" | ||
| /> | ||
| </h5> | ||
| </EuiTitle> | ||
| } | ||
| body={ | ||
| <EuiText> | ||
| <p> | ||
| <FormattedMessage | ||
| id="xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.body" | ||
| defaultMessage="Customize these variables to match your content. For a full setup guide, visit our {getStartedLink} guide." | ||
| values={{ | ||
| getStartedLink: ( | ||
| <EuiLink | ||
| data-test-subj="serverlessSearchAPIIndexEmptyPromptGetStartedLink" | ||
| onClick={() => application.navigateToApp('elasticsearch')} | ||
| > | ||
| {i18n.translate( | ||
| 'xpack.serverlessSearch.indexManagement.indexDetails.overview.emptyPrompt.api.body.getStartedLink', | ||
| { defaultMessage: 'Get started' } | ||
| )} | ||
| </EuiLink> | ||
| ), | ||
| }} | ||
| /> | ||
| </p> | ||
| </EuiText> | ||
| } | ||
| /> | ||
| <EuiSpacer /> | ||
| <EuiSteps steps={apiIngestSteps} titleSize="xs" /> | ||
| </EuiPanel> | ||
| ); | ||
| }; |
33 changes: 33 additions & 0 deletions
33
...rverless_search/public/application/components/index_management/connector_empty_prompt.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| /* | ||
| * 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 { EuiButtonEmpty, EuiPanel } from '@elastic/eui'; | ||
|
|
||
| import { BACK_LABEL } from '../../../../common/i18n_string'; | ||
| import { EmptyConnectorsPrompt } from '../connectors/empty_connectors_prompt'; | ||
|
|
||
| interface ConnectorIndexEmptyPromptProps { | ||
| indexName: string; | ||
| onBackClick?: () => void; | ||
| } | ||
|
|
||
| export const ConnectorIndexEmptyPrompt = ({ onBackClick }: ConnectorIndexEmptyPromptProps) => { | ||
| return ( | ||
| <EuiPanel> | ||
| <EuiButtonEmpty | ||
| data-test-subj="serverlessSearchConnectorIndexEmptyPromptBackButton" | ||
| onClick={onBackClick} | ||
| iconSide="left" | ||
| iconType="arrowLeft" | ||
| > | ||
| {BACK_LABEL} | ||
| </EuiButtonEmpty> | ||
| <EmptyConnectorsPrompt /> | ||
| </EuiPanel> | ||
| ); | ||
| }; |
Oops, something went wrong.