From 167797d2810f39151a5cac3327ccb26a939f55aa Mon Sep 17 00:00:00 2001 From: Sandeep Kumawat Date: Wed, 28 Aug 2024 09:27:16 +0530 Subject: [PATCH] Fit and Finish Changes for DataStreams and Rollups Signed-off-by: Sandeep Kumawat --- .../components/ContentPanel/ContentPanel.tsx | 4 +- .../__snapshots__/ContentPanel.test.tsx.snap | 4 +- .../DescriptionListHoz/DescriptionListHoz.tsx | 1 + .../DescriptionListHoz.test.tsx.snap | 2 +- .../__snapshots__/IndexDetail.test.tsx.snap | 4 +- .../components/IndexMapping/IndexMapping.tsx | 5 +- .../ErrorNotification.test.tsx.snap | 2 +- .../__snapshots__/IndexDetail.test.tsx.snap | 4 +- .../__snapshots__/IndexForm.test.tsx.snap | 22 +- .../NotificationConfig/NotificationConfig.tsx | 8 +- .../NotificationConfig.test.tsx.snap | 40 ++- .../__snapshots__/Aliases.test.tsx.snap | 2 +- .../ChangeManagedIndices.test.tsx.snap | 2 +- .../__snapshots__/NewPolicy.test.tsx.snap | 2 +- .../__snapshots__/ChangePolicy.test.tsx.snap | 4 +- .../ComposableTemplates.test.tsx.snap | 2 +- .../CreateComposableTemplate.test.tsx.snap | 10 +- .../TemplateDetail.test.tsx.snap | 10 +- .../IndexSettings/IndexSettings.tsx | 71 ++-- .../BackingIndices/BackingIndices.tsx | 44 ++- .../CreateDataStream.test.tsx.snap | 49 +-- .../DataStreamDetail/DataStreamDetail.tsx | 122 +++++-- .../DataStreamDetail.test.tsx.snap | 49 +-- .../DefineDataStream/DefineDataStream.tsx | 326 ++++++++++-------- .../containers/IndexAlias/IndexAlias.tsx | 59 ++-- .../TemplateMappings/TemplateMappings.tsx | 48 ++- public/pages/CreateDataStream/hooks.tsx | 2 +- .../DefineTemplate.test.tsx.snap | 8 +- .../CreateIndexTemplate.test.tsx.snap | 34 +- .../TemplateDetail.test.tsx.snap | 18 +- .../ConfigurePolicy.test.tsx.snap | 2 +- .../__snapshots__/DefinePolicy.test.tsx.snap | 2 +- .../__snapshots__/CreatePolicy.test.tsx.snap | 8 +- .../CreateRollupForm.test.tsx.snap | 4 +- .../CreateTransformForm.test.tsx.snap | 4 +- .../IndexControls/IndexControls.tsx | 2 +- .../__snapshots__/IndexControls.test.tsx.snap | 3 +- .../containers/DataStreams/DataStreams.tsx | 42 ++- .../__snapshots__/DataStreams.test.tsx.snap | 5 +- .../__snapshots__/EditRollup.test.tsx.snap | 4 +- .../ForceMergeAdvancedOptions.tsx | 23 +- .../ForceMergeAdvancedOptions.test.tsx.snap | 48 ++- .../container/ForceMerge/ForceMerge.tsx | 37 +- .../__snapshots__/ForceMerge.test.tsx.snap | 154 ++++----- .../__snapshots__/Indices.test.tsx.snap | 2 +- .../ManagedIndices.test.tsx.snap | 2 +- .../__snapshots__/Policies.test.tsx.snap | 2 +- .../PolicySettings.test.tsx.snap | 2 +- .../CreateIndexFlyout.test.tsx.snap | 22 +- .../__snapshots__/Reindex.test.tsx.snap | 10 +- .../Rollover/containers/Rollover/Rollover.tsx | 79 +++-- .../__snapshots__/Rollover.test.tsx.snap | 162 +++++---- .../__snapshots__/ShrinkIndex.test.tsx.snap | 28 +- .../__snapshots__/Templates.test.tsx.snap | 2 +- .../__snapshots__/EditTransform.test.tsx.snap | 6 +- .../__snapshots__/ISMTemplates.test.tsx.snap | 2 +- .../__snapshots__/PolicyInfo.test.tsx.snap | 2 +- .../States/__snapshots__/States.test.tsx.snap | 2 +- .../ErrorNotification.test.tsx.snap | 2 +- 59 files changed, 949 insertions(+), 672 deletions(-) diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index 0d7b9354f..e905e7000 100644 --- a/public/components/ContentPanel/ContentPanel.tsx +++ b/public/components/ContentPanel/ContentPanel.tsx @@ -64,7 +64,7 @@ const ContentPanel: React.SFC = ({ const isGhost = color === "ghost"; const titleContent = ( @@ -111,7 +111,7 @@ const ContentPanel: React.SFC = ({ {children ? (
spec renders the component 1`] = ` >
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
Testing ContentPanel diff --git a/public/components/DescriptionListHoz/DescriptionListHoz.tsx b/public/components/DescriptionListHoz/DescriptionListHoz.tsx index 87b47d419..dd6edfcc5 100644 --- a/public/components/DescriptionListHoz/DescriptionListHoz.tsx +++ b/public/components/DescriptionListHoz/DescriptionListHoz.tsx @@ -13,6 +13,7 @@ const DisplayItem = ( const { listItem, ...others } = props; return ( spec renders the component 1`] = ` class="euiFlexItem" >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
) : ( -

You have no field mappings.

+ +

You have no field mappings.

+ )} {readonly ? null : ( <> diff --git a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap index f1ccbd6fa..f44ef30dc 100644 --- a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap +++ b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap @@ -7,7 +7,7 @@ exports[` spec renders the component 1`] = ` >
spec render the component 1`] = ` >
spec render the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render page 1`] = ` >
spec render page 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render page 1`] = ` >
spec render page 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render page 1`] = ` >
spec render page 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render page 1`] = `
-

- You have no field mappings. -

+
+

+ You have no field mappings. +

+
diff --git a/public/containers/NotificationConfig/NotificationConfig.tsx b/public/containers/NotificationConfig/NotificationConfig.tsx index 1649ecd8e..28f8f077e 100644 --- a/public/containers/NotificationConfig/NotificationConfig.tsx +++ b/public/containers/NotificationConfig/NotificationConfig.tsx @@ -4,7 +4,7 @@ */ import React, { useRef, forwardRef, useMemo, useImperativeHandle, useContext, useEffect, useState } from "react"; -import { EuiBadge, EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from "@elastic/eui"; +import { EuiBadge, EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui"; import ChannelSelect, { useChannels } from "../ChannelSelect"; import { AllBuiltInComponents } from "../../components/FormGenerator"; import { @@ -122,9 +122,9 @@ const NotificationConfig = ( const content = (
- -
Notifications
- + +

Notifications

+ spec renders with create permission and no defa class="euiSpacer euiSpacer--l" />
-
- Notifications -
+

+ Notifications +

+
@@ -111,11 +113,13 @@ exports[` spec renders with full permission and default n class="euiSpacer euiSpacer--l" />
-
- Notifications -
+

+ Notifications +

+
@@ -287,11 +291,13 @@ exports[` spec renders with full permission and no defaul class="euiSpacer euiSpacer--l" />
-
- Notifications -
+

+ Notifications +

+
@@ -407,11 +413,13 @@ exports[` spec renders with view permission and default n class="euiSpacer euiSpacer--l" />
-
- Notifications -
+

+ Notifications +

+
diff --git a/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap b/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap index caa3632b3..38b7686d5 100644 --- a/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap +++ b/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap @@ -7,7 +7,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec it goes to templates page when click >
spec it goes to templates page when click class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec it goes to templates page when click >
spec it goes to templates page when click >
spec it goes to templates page when click >
spec render component 1`] = ` >
spec render component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render component 1`] = ` >
spec render component 1`] = ` >
spec render component 1`] = ` >
- - Index settings - + +

Index settings

+ {readonly ? ( - + + {listItems.map((item) => ( + + +
{item.title}
+
{item.description}
+ + + ))} + ) : ( <> + {" "} +

Number of primary shards

+ + } helpText="Specify the number of primary shards in the index. Default is 1." {...getCommonFormRowProps(["template", "settings", "index.number_of_shards"], field)} > @@ -55,7 +70,12 @@ export default function IndexSettings(props: SubDetailProps) { + {" "} +

Number of replicas

+ + } helpText="Specify the number of replicas each primary shard should have. Default is 1." {...getCommonFormRowProps(["template", "settings", "index.number_of_replicas"], field)} > @@ -67,7 +87,12 @@ export default function IndexSettings(props: SubDetailProps) { + {" "} +

Refresh interval

+ + } helpText="Specify how often the index should refresh, which publishes its most recent changes and makes them available for search. Default is 1s." {...getCommonFormRowProps(["template", "settings", "index.refresh_interval"], field)} > diff --git a/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx b/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx index 9f941c933..016e86c22 100644 --- a/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx +++ b/public/pages/CreateDataStream/containers/BackingIndices/BackingIndices.tsx @@ -3,7 +3,18 @@ * SPDX-License-Identifier: Apache-2.0 */ import React, { useContext, useEffect, useState } from "react"; -import { EuiBasicTable, EuiHealth, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui"; +import { + EuiBasicTable, + EuiHealth, + EuiLink, + EuiSpacer, + EuiText, + EuiTitle, + EuiFlexGroup, + EuiHorizontalRule, + EuiPanel, + EuiFlexItem, +} from "@elastic/eui"; import { ServicesContext } from "../../../../services"; import { BrowserServices } from "../../../../models/interfaces"; import { ManagedCatIndex } from "../../../../../server/models/interfaces"; @@ -53,22 +64,19 @@ export default function BackingIndices(props: SubDetailProps) { }, [values.name]); const writingIndex = (values.indices || [])[(values.indices?.length || 0) - 1]?.index_name; return ( - - - Backing indexes - - - <> - - - } - > - + + + +

Backing indexes

+ + + +

+ A data stream is composed of backing indexes. Search requests are routed to all backing indexes, while indexing requests are + routed to the write backing index. +

+ + - + ); } diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap index f607a6d8f..68750c054 100644 --- a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap +++ b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap @@ -91,37 +91,22 @@ exports[` spec it goes to data streams page when click cance />
-

+

Define data stream - - - - -

+
-
-
+
spec it goes to data streams page when click cance class="euiFormLabel euiFormRow__label" for="some_html_id" > - Data stream name +
+

+ Data stream name +

+
spec it goes to data streams page when click cance class="euiFormLabel euiFormRow__label" for="some_html_id" > - Matching template +
+

+ Matching template +

+
- No index template matched +
+

+ No index template matched +

+
diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx index 3c269515a..79863b430 100644 --- a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx +++ b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx @@ -4,7 +4,19 @@ */ import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react"; -import { EuiSmallButton, EuiSmallButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui"; +import { + EuiSmallButton, + EuiSmallButtonEmpty, + EuiCallOut, + EuiFlexGroup, + EuiFlexItem, + EuiLink, + EuiSpacer, + EuiTitle, + EuiText, + EuiPanel, + EuiHorizontalRule, +} from "@elastic/eui"; import { TemplateItemRemote } from "../../../../../models/interfaces"; import useField, { FieldInstance } from "../../../../lib/field"; import CustomFormRow from "../../../../components/CustomFormRow"; @@ -27,7 +39,11 @@ import BackingIndices from "../BackingIndices"; import DataStreamsActions from "../../../DataStreams/containers/DataStreamsActions"; import { ExternalLink } from "../../../utils/display-utils"; import { getApplication, getNavigationUI } from "../../../../services/Services"; -import { TopNavControlButtonData } from "../../../../../../../src/plugins/navigation/public"; +import { + TopNavControlButtonData, + TopNavControlLinkData, + TopNavControlDescriptionData, +} from "../../../../../../../src/plugins/navigation/public"; export interface DataStreamDetailProps { dataStream?: string; @@ -111,16 +127,20 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref) field, }; - const descriptionData = [ + const description = [ { - renderComponent: ( - - A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while indexing - requests

- are routed to the latest write index. - - ), - }, + description: + "A data stream is composed of multiple backing indexes. Search requests are routed to all the backing indexes, while indexing requests are routed to the latest write index.", + links: { + label: "Learn more", + href: coreServices.docLinks.links.opensearch.dataStreams, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; const controlsData = [ @@ -151,12 +171,35 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref) } as TopNavControlButtonData, ]; + const callOut = ( + + No data stream templates created. To create a data stream, you must first define its mappings and settings by creating a data + stream template.{" "} + { + props.history.push(`${ROUTES.CREATE_TEMPLATE}?values=${JSON.stringify({ data_stream: {} })}`)} + color={"warning"} + > + Create template + + } + + } + iconType="alert" + size="s" + color={"warning"} + /> + ); + const { HeaderControl } = getNavigationUI(); - const { setAppRightControls, setAppDescriptionControls } = getApplication(); + const { setAppRightControls, setAppDescriptionControls, setAppBottomControls } = getApplication(); return ( <> - {!isEdit && props.useNewUX && } + {!isEdit && props.useNewUX && } {isEdit && props.useNewUX && } {!props.useNewUX && ( <> @@ -208,31 +251,44 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref) )} {!isLoading && !templates.length && !isEdit ? ( - <> - - To create a data stream, you must first define its mappings and settings by creating a data stream template. - -
- props.history.push(`${ROUTES.CREATE_TEMPLATE}?values=${JSON.stringify({ data_stream: {} })}`)}> - Create template - -
- - - + !props.useNewUX ? ( + <> + + To create a data stream, you must first define its mappings and settings by creating a data stream template. + +
+ props.history.push(`${ROUTES.CREATE_TEMPLATE}?values=${JSON.stringify({ data_stream: {} })}`)} + > + Create template + +
+ + + + ) : ( + + ) ) : null} {values.matchedTemplate ? ( <> - - - - - - - - + + + +

Inherited settings from template

+ + + +
+ + + + + +
+ ) : null} {isEdit ? ( diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap index 3cf7ebe74..420fd61d2 100644 --- a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap +++ b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap @@ -88,37 +88,22 @@ exports[` spec render component 1`] = ` />
-

+

Define data stream - - - - -

+
-
-
+
spec render component 1`] = ` class="euiFormLabel euiFormRow__label" for="some_html_id" > - Data stream name +
+

+ Data stream name +

+
spec render component 1`] = ` class="euiFormLabel euiFormRow__label" for="some_html_id" > - Matching template +
+

+ Matching template +

+
- No index template matched +
+

+ No index template matched +

+
diff --git a/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx b/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx index 16c14ed07..d3c20ceca 100644 --- a/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx +++ b/public/pages/CreateDataStream/containers/DefineDataStream/DefineDataStream.tsx @@ -3,7 +3,19 @@ * SPDX-License-Identifier: Apache-2.0 */ import React, { useRef, useMemo } from "react"; -import { EuiLink, EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiBadge, EuiToolTip, EuiHealth } from "@elastic/eui"; +import { + EuiLink, + EuiSpacer, + EuiFlexGroup, + EuiFlexItem, + EuiBadge, + EuiToolTip, + EuiHealth, + EuiText, + EuiPanel, + EuiHorizontalRule, + EuiFlexGrid, +} from "@elastic/eui"; import { DataStreamInEdit, SubDetailProps, TemplateItem } from "../../interface"; import { ContentPanel } from "../../../../components/ContentPanel"; import CustomFormRow from "../../../../components/CustomFormRow"; @@ -84,146 +96,188 @@ export default function DefineDataStream( }); } }; + + const listItems = [ + { + title: "Name", + description: values.name, + }, + { + title: "Status", + description: ((health: string) => { + const healthLowerCase = health?.toLowerCase() as "green" | "yellow" | "red"; + const color = health ? HEALTH_TO_COLOR[healthLowerCase] : "subdued"; + const text = (health || "").toLowerCase(); + return ( + + + {text} + + + ); + })(values.status), + }, + { + title: "Template name", + description: {values.template}, + }, + { + title: "Backing indexes", + description: (values.indices || []).length, + }, + { + title: "Timefield", + description: values.timestamp_field?.name || "", + }, + ]; + + const createTitle = ( + +

Define data stream

+ + ); + return isEdit ? ( - - - { - const healthLowerCase = health?.toLowerCase() as "green" | "yellow" | "red"; - const color = health ? HEALTH_TO_COLOR[healthLowerCase] : "subdued"; - const text = (health || "").toLowerCase(); - return ( - - - {text} - - - ); - })(values.status), - }, - { - title: "Template name", - description: {values.template}, - }, - { - title: "Backing indexes", - description: (values.indices || []).length, - }, - { - title: "Timefield", - description: values.timestamp_field?.name || "", - }, - ]} - /> - + + + +

Data stream details

+ + + +
+ + {listItems.map((item) => ( + + +
{item.title}
+
{item.description}
+ + + ))} + +
+ ) : ( - - - - Enter a data stream name. It must match an index pattern from a data stream template.{" "} - - Manage templates. - - - } - > - ({ - label: item.name, - value: item, - }))} - renderOption={(option: { value: TemplateItem; label: string }) => { - return ( - - {option.value.index_template.index_patterns.join(",")} - - {option.label} - - - ); - }} - async - {...suggestionRegister} - value={comboBoxRef.current?.state.hasFocus ? undefined : suggestionRegister.value} - ref={comboBoxRef} - onCreateOption={() => {}} - customOptionText={ - searchValue - ? `{searchValue} does not match index patterns from any templates. Enter another name or create a data stream template.` - : `There are no data stream templates. Please create a data stream template.` + + + +

Define data stream

+ + + +
+ +

Data stream name

+ + } + fullWidth + helpText={ + <> + Enter a data stream name. It must match an index pattern from a data stream template.{" "} + + Manage templates. + + } - onSearchChange={(dataStreamName: string) => { - if (!dataStreamName) { - return; + > + ({ + label: item.name, + value: item, + }))} + renderOption={(option: { value: TemplateItem; label: string }) => { + return ( + + {option.value.index_template.index_patterns.join(",")} + + {option.label} + + + ); + }} + async + {...suggestionRegister} + value={comboBoxRef.current?.state.hasFocus ? undefined : suggestionRegister.value} + ref={comboBoxRef} + onCreateOption={() => {}} + customOptionText={ + searchValue + ? `{searchValue} does not match index patterns from any templates. Enter another name or create a data stream template.` + : `There are no data stream templates. Please create a data stream template.` } - field.setValue("name", dataStreamName); - }} - onFocus={() => { - comboBoxRef.current?.setState({ - searchValue: field.getValue("name") || "", - }); - }} - onBlur={() => { - onBlurCallback(); - comboBoxRef.current?.setState({ - searchValue: "", - }); - }} - onChange={(value: string, selectedOption: { value: TemplateItem }) => { - if (!value) { - field.resetValues({ - name: "", + onSearchChange={(dataStreamName: string) => { + if (!dataStreamName) { + return; + } + field.setValue("name", dataStreamName); + }} + onFocus={() => { + comboBoxRef.current?.setState({ + searchValue: field.getValue("name") || "", + }); + }} + onBlur={() => { + onBlurCallback(); + comboBoxRef.current?.setState({ + searchValue: "", }); - } else { - const findItem = selectedOption.value; - const { findMatchesPattern, findWordLikePattern } = findPatternMatchesString(searchValue, findItem); - let finalSearchValue = searchValue; - if (findMatchesPattern) { - // do nothing - } else if (findWordLikePattern) { - const finalReplaceValue = getStringBeforeStar(findWordLikePattern); - finalSearchValue = finalReplaceValue; - field.setValue("name", finalReplaceValue); + }} + onChange={(value: string, selectedOption: { value: TemplateItem }) => { + if (!value) { + field.resetValues({ + name: "", + }); + } else { + const findItem = selectedOption.value; + const { findMatchesPattern, findWordLikePattern } = findPatternMatchesString(searchValue, findItem); + let finalSearchValue = searchValue; + if (findMatchesPattern) { + // do nothing + } else if (findWordLikePattern) { + const finalReplaceValue = getStringBeforeStar(findWordLikePattern); + finalSearchValue = finalReplaceValue; + field.setValue("name", finalReplaceValue); + } + setTimeout(() => { + comboBoxRef.current?.setState( + { + searchValue: finalSearchValue, + hasFocus: true, + isListOpen: true, + }, + () => { + onBlurCallback(); + } + ); + }, 100); } - setTimeout(() => { - comboBoxRef.current?.setState( - { - searchValue: finalSearchValue, - hasFocus: true, - isListOpen: true, - }, - () => { - onBlurCallback(); - } - ); - }, 100); - } - }} - /> - - - - {values.matchedTemplate ? ( - - {values.matchedTemplate} - - ) : ( - <>No index template matched - )} - - + }} + /> + + + +

Matching template

+ + } + > + {values.matchedTemplate ? ( + + {values.matchedTemplate} + + ) : ( + +

No index template matched

+ + )} + +
+ ); } diff --git a/public/pages/CreateDataStream/containers/IndexAlias/IndexAlias.tsx b/public/pages/CreateDataStream/containers/IndexAlias/IndexAlias.tsx index ac4f8773b..9b0839e08 100644 --- a/public/pages/CreateDataStream/containers/IndexAlias/IndexAlias.tsx +++ b/public/pages/CreateDataStream/containers/IndexAlias/IndexAlias.tsx @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ import React, { useContext } from "react"; -import { EuiSpacer, EuiTitle } from "@elastic/eui"; +import { EuiSpacer, EuiTitle, EuiText, EuiFlexGrid, EuiFlexItem } from "@elastic/eui"; import AliasSelect from "../../../../components/AliasSelect"; import CustomFormRow from "../../../../components/CustomFormRow"; import { ServicesContext } from "../../../../services"; @@ -16,32 +16,40 @@ export default function IndexAlias(props: SubDetailProps) { const { isEdit, field } = props; const values = field.getValues(); const services = useContext(ServicesContext) as BrowserServices; + + const listItems = [ + { + title: "Alias names", + description: Object.keys(values?.template?.aliases || {}).join(",") || "-", + }, + ]; + return ( <> - - -
Index alias
- - } - helpText="Allow the new indexes to be referenced by existing aliases or specify a new alias." - > - <> - - + +

Index alias

+ + } + helpText="Allow the new indexes to be referenced by existing aliases or specify a new alias." + > + <> + {!isEdit ? ( <> - + + {listItems.map((item) => ( + + +
{item.title}
+
{item.description}
+ + + ))} + ) : ( <> @@ -49,7 +57,12 @@ export default function IndexAlias(props: SubDetailProps) { + {" "} +

Index alias

{" "} + + } helpText="Select existing aliases or specify a new alias." > - - -
Index mapping
- - } - helpText={ -
- Define how documents and their fields are stored and indexed.{" "} - - Learn more - -
- } - > - <> - - + +

Index mapping

+ + } + helpText={ +
+ Define how documents and their fields are stored and indexed.{" "} + + Learn more + +
+ } + > + <> + spec renders the component in edit mode >
spec renders the component in edit mode class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec renders the component in non-edit m >
spec renders the component in non-edit m class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render template pages 1`] = ` >
spec render template pages 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` >
spec render template pages 1`] = ` class="euiHorizontalRule euiHorizontalRule--full" />
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = ` class="euiFlexItem" >
spec render template pages 1`] = `
-

- You have no field mappings. -

+
+

+ You have no field mappings. +

+
spec render component in non-edit-mode 1`] = ` >
spec render component in non-edit-mode 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec render component in non-edit-mode 1`] = ` >
spec render component in non-edit-mode 1`] = ` class="euiHorizontalRule euiHorizontalRule--full" />
spec render component in non-edit-mode 1`] = `
-

- You have no field mappings. -

+
+

+ You have no field mappings. +

+
diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap index 75b67021c..1c120e283 100644 --- a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap +++ b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap @@ -7,7 +7,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the create component 1`] = ` >
spec renders the create component 1`] = ` >
spec renders the edit component 1`] = ` >
spec renders the edit component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
+ spec renders the component 1`] = `
- Data streams simplify the management of time-series data. Data streams are composed of multiple backing indexes. Search{" "} -

- requests are routed to all backing indexes, while indexing requests are routed to the latest write index.{" "} - - - ), - }, + description: + "Data streams simplify the management of time-series data. Data streams are composed of multiple backing indexes. Search requests are routed to all backing indexes, while indexing requests are routed to the latest write index.", + links: { + label: "Learn more", + href: (this.context as CoreStart).docLinks.links.opensearch.dataStreams, + iconType: "popout", + iconSide: "right", + controlType: "link", + target: "_blank", + flush: "both", + } as TopNavControlLinkData, + } as TopNavControlDescriptionData, ]; - const searchbar_padding = { padding: "0px 0px 16px 0px" }; return useNewUX ? ( <> - - - + + + + {/* */} - + ) : ( <> diff --git a/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap b/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap index ca81487cc..2a489823b 100644 --- a/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap +++ b/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap @@ -7,7 +7,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` style="padding: initial;" >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
{ +

Index segments

+ + } helpText="Define how many segments to merge to." > { /> - + +

Flush indexes

+ + } + helpText="Opensearch will perform a flush on the indexes after the force merge." + > { +

Remove deleted documents

+ + } fullWidth helpText="Expunge all segments containing more than 10% of deleted documents. The percentage is configurable in the index.merge.policy.expunge_deletes_allowed setting." > diff --git a/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap b/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap index ca8ee9b9b..6feaa37ad 100644 --- a/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap +++ b/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap @@ -18,7 +18,13 @@ Object { class="euiFormLabel euiFormRow__label" for="some_html_id" > - Index segments +
+

+ Index segments +

+
- Flush indexes +
+

+ Flush indexes +

+
- Remove deleted documents +
+

+ Remove deleted documents +

+
- Index segments +
+

+ Index segments +

+
- Flush indexes +
+

+ Flush indexes +

+
- Remove deleted documents +
+

+ Remove deleted documents +

+
- -

Advanced settings

- + +

Advanced settings

+ ); @@ -211,10 +213,19 @@ export default function ForceMergeWrapper(props: Omit )} - - + + + +

Configure source index

+ + + +

Select source indexes or data streams

+ + } isInvalid={!!field.getError("indexes")} error={field.getError("indexes")} fullWidth @@ -242,14 +253,16 @@ export default function ForceMergeWrapper(props: Omit - {notReadOnlyIndexes.length ? ( - - {notReadOnlyIndexes.map((item) => item[0]).join(", ")} is not a read-only index. We recommend only performing force merge with - read-only indexes to pervent large segments being produced. - + <> + + + {notReadOnlyIndexes.map((item) => item[0]).join(", ")} is not a read-only index. We recommend only performing force merge with + read-only indexes to pervent large segments being produced. + + ) : null} - + diff --git a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap index 7325372fe..2bc1303e6 100644 --- a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap +++ b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap @@ -29,122 +29,108 @@ exports[` spec renders the component 1`] = ` />
-

+

Configure source index - - - - -

+
-
-
- -
+

+ Select source indexes or data streams +

+
+ +
+
+ Select one or more indexes or data streams you want to force merge. +
+
-
-
spec renders the component 1`] = ` >
spec renders the component 1`] = `
-

- Advanced settings -

+

+ Advanced settings +

+
diff --git a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap index 26164b897..4edf91f41 100644 --- a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap +++ b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap @@ -7,7 +7,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
-

- You have no field mappings. -

+
+

+ You have no field mappings. +

+
diff --git a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap index 3f8dae5da..1c2dae9a6 100644 --- a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap +++ b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap @@ -50,7 +50,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec renders the component 1`] = ` >
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec renders the component 1`] = ` >
)} - + + + +

Configure source

+ + + {sourceType === "alias" && filterByMinimatch(tempValue.source || "", SYSTEM_ALIAS) ? ( <> @@ -268,7 +286,11 @@ export default function Rollover(props: RolloverProps) { { name: "source", rowProps: { - label: "Select an alias or data stream", + label: ( + +

Select an alias or data stream

+ + ), helpText: "Select an alias or data stream to roll over.", }, options: { @@ -303,8 +325,16 @@ export default function Rollover(props: RolloverProps) { return ( <> - - {writingIndex} + +

Assigned write index

+ + } + > + + {writingIndex} + ); @@ -312,25 +342,30 @@ export default function Rollover(props: RolloverProps) { return null; })()} - + {sourceType === "alias" && writingIndex ? ( <> - { - indexFormRef.current?.importSettings({ - index: writingIndex, - }); - }} - > - Import from old write index - - } - > + + + + +

Configure new rollover index

+ + + + { + indexFormRef.current?.importSettings({ + index: writingIndex, + }); + }} + > + Import from old write index + + + + - + ) : null} diff --git a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap index 45b190cd0..aea4b98a3 100644 --- a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap +++ b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap @@ -27,128 +27,120 @@ exports[`container spec render the component 1`] = `
-

+

Configure source - - - - -

+
-
- -
+

+ Select an alias or data stream +

+
+ +
+
+ Select an alias or data stream to roll over. +
+
- Select an alias or data stream to roll over. -
-
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap index 0fc667260..58bb4c543 100644 --- a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap +++ b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap @@ -50,7 +50,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec renders the component 1`] = ` class="euiFlexItem" >
spec renders the component 1`] = ` class="euiFlexItem" >
spec renders the component 1`] = ` class="euiFlexItem" >
spec renders the component 1`] = ` class="euiFlexItem" >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall" />
spec renders the component 1`] = ` class="euiHorizontalRule euiHorizontalRule--full" />
-
- Notifications -
+

+ Notifications +

+
diff --git a/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap b/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap index a33118792..fad8161e2 100644 --- a/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap +++ b/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap @@ -7,7 +7,7 @@ exports[` spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >
spec renders the component 1`] = ` >