diff --git a/public/components/ContentPanel/ContentPanel.tsx b/public/components/ContentPanel/ContentPanel.tsx index 5c30772d8..e8f11b420 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" >
@@ -217,11 +221,9 @@ export default function ClearCacheModal(props: ClearCacheModalProps) { - {" "} - {" "} -

Clear cache for {type}

{" "} - {" "} +

Clear cache for {type}

+ diff --git a/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap b/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap index 0050fe07f..9e9afcef2 100644 --- a/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap +++ b/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap @@ -39,18 +39,14 @@ HTMLCollection [
-
-

Clear cache for indexes

-
-
spec renders the component 1`] = ` >
- {" "} - {" "} -

Flush {flushTarget}

{" "} - {" "} +

Flush {flushTarget}

+
{/* we will not display this part if not flushAll and there is no flushable items */} - {flushAll &&

{flushAllMessage}

} + {flushAll && ( + +

{flushAllMessage}

+ + )} {!!unBlockedItems.length && ( <> @@ -187,10 +189,14 @@ export default function FlushIndexModal(props: FlushIndexModalProps) { )} diff --git a/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap b/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap index 24b648ed7..72a9780e7 100644 --- a/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap +++ b/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap @@ -40,18 +40,14 @@ HTMLCollection [ class="euiModalHeader__title" data-test-subj="flushModalTitle" > -
-

Flush aliases

-
-
-

- The following aliases will not be flushed because one or more indexes are either closed or in red status: -

+
+

+ The following aliases will not be flushed because one or more indexes are either closed or in red status: +

+
    -
  • - alias1 -
    • -
  • - alias3 -
    • +
    +
  • + alias1 +
    • +
    +
    +
  • + alias3 +
    • +
@@ -204,18 +212,14 @@ HTMLCollection [ class="euiModalHeader__title" data-test-subj="flushModalTitle" > -
-

Flush data streams

-
-
-

- The following data streams will not be flushed because one or more backing indexes are either closed or in red status: -

+
+

+ The following data streams will not be flushed because one or more backing indexes are either closed or in red status: +

+
    -
  • - ds1 -
    • -
  • - ds3 -
    • +
    +
  • + ds1 +
    • +
    +
    +
  • + ds3 +
    • +
@@ -368,18 +384,14 @@ HTMLCollection [ class="euiModalHeader__title" data-test-subj="flushModalTitle" > -
-

Flush indexes

-
-
-

- The following indexes will not be flushed because they are either closed or in red status: -

+
+

+ The following indexes will not be flushed because they are either closed or in red status: +

+
    -
  • - test_index1 -
    • -
  • - test_index4 -
    • +
    +
  • + test_index1 +
    • +
    +
    +
  • + test_index4 +
    • +
@@ -535,18 +559,14 @@ HTMLCollection [ class="euiModalHeader__title" data-test-subj="flushModalTitle" > -
-

Flush indexes

-
-
-

- All open indexes will be flushed. -

+
+

+ All open indexes will be flushed. +

+
@@ -575,9 +599,13 @@ HTMLCollection [
-

- The following indexes will not be flushed because they are either closed or in red status: -

+
+

+ The following indexes will not be flushed because they are either closed or in red status: +

+
    @@ -678,18 +706,14 @@ HTMLCollection [ class="euiModalHeader__title" data-test-subj="flushModalTitle" > -
    -

    Flush indexes

    -
    -
-

- The following indexes will not be flushed because they are either closed or in red status: -

+
+

+ The following indexes will not be flushed because they are either closed or in red status: +

+
    diff --git a/public/containers/NotificationConfig/NotificationConfig.tsx b/public/containers/NotificationConfig/NotificationConfig.tsx index e3d93c948..122ca60ae 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, EuiText } from "@elastic/eui"; +import { EuiBadge, EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui"; import ChannelSelect, { useChannels } from "../ChannelSelect"; import { AllBuiltInComponents } from "../../components/FormGenerator"; import { diff --git a/public/containers/RefreshAction/index.tsx b/public/containers/RefreshAction/index.tsx index 21255a595..f3a551751 100644 --- a/public/containers/RefreshAction/index.tsx +++ b/public/containers/RefreshAction/index.tsx @@ -169,11 +169,9 @@ export default function RefreshActionModal(props: RefreshActionModalProps) { - {" "} - {" "} -

    Refresh {type}

    {" "} -     {" "} +

    Refresh {type}

    +     diff --git a/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap b/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap index 66c329ee7..ef3950bbd 100644 --- a/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap +++ b/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap @@ -174,18 +174,14 @@ exports[` spec refresh alias by calling commonService 1`] = `
    -
    -

    Refresh aliases

    -
    -
spec refresh multi alias even failed to get index st
-
-

Refresh aliases

-
-
-
-

Flush aliases

-
-
-

- The following aliases will not be flushed because one or more indexes are either closed or in red status: -

+
+

+ The following aliases will not be flushed because one or more indexes are either closed or in red status: +

+
    -
  • - alias1 -
    • -
  • - alias3 -
    • +
    +
  • + alias1 +
    • +
    +
    +
  • + alias3 +
    • +
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 f9bd52208..15750f288 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 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 110c87690..6797333ca 100644 --- a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap +++ b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap @@ -11,11 +11,13 @@ exports[` spec it goes to data streams page when click cance
-

- Create data stream -

+

+ Create data stream +

+
spec it goes to data streams page when click cance />
-
-

- Define data stream - - - - -

-
+

+ 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 +

+
@@ -252,10 +255,7 @@ exports[` spec it goes to data streams page when click cance class="euiSpacer euiSpacer--l" />
-
) 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 = [ @@ -141,7 +162,11 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref) run: () => { Modal.show({ "data-test-subj": "dataStreamJSONDetailModal", - title: values.name, + title: ( + +

{values.name}

+ + ), content: , }); }, @@ -151,18 +176,43 @@ 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 && ( <> - {isEdit ?

{values.name}

:

Create data stream

} + + {{isEdit ?

{values.name}

:

Create data stream

}} + {isEdit ? null : ( ) )} {!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 ? ( @@ -244,8 +307,7 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref) {isEdit ? null : ( <> - - + Cancel 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 1367d72fe..fd6bb54a1 100644 --- a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap +++ b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap @@ -8,11 +8,13 @@ exports[` spec render component 1`] = `
-

- Create data stream -

+

+ Create data stream +

+
spec render component 1`] = ` />
-
-

- Define data stream - - - - -

-
+

+ 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 +

+
@@ -249,10 +252,7 @@ exports[` spec render component 1`] = ` class="euiSpacer euiSpacer--l" />
-
{ + 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 render template pages 1`] = ` >
spec render template pages 1`] = ` class="euiHorizontalRule euiHorizontalRule--full" />
spec render component in non-edit-mode 1`] = ` >
spec render component in non-edit-mode 1`] = ` class="euiHorizontalRule euiHorizontalRule--full" />
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`] = ` >
- + - -

Additional aggregation{` (${selectedDimensionField.length})`}

- + +

Additional aggregation{` (${selectedDimensionField.length})`}

+ - - – optional - + +

+ {" "} + – optional{" "} +

+ @@ -378,11 +381,13 @@ export default class AdvancedAggregation extends Component -

- The order of fields impacts rollup performance. Aggregating by smaller buckets and then by larger buckets is faster - than the opposite. For example, if you are rolling up flight data for five airlines with 100 destinations, - aggregating by airline and then by destination is faster than aggregating by destination first. -

+ +

+ The order of fields impacts rollup performance. Aggregating by smaller buckets and then by larger buckets is + faster than the opposite. For example, if you are rolling up flight data for five airlines with 100 destinations, + aggregating by airline and then by destination is faster than aggregating by destination first. +

+ @@ -404,79 +409,77 @@ export default class AdvancedAggregation extends Component -
- - - No fields added for aggregations - - - - - - - - Add fields - - - - - - - - } - /> - - {isModalVisible && ( - - - - Add fields - + + + No fields added for aggregations + + + + + + + + Add fields + + + + + + + + } + /> + + {isModalVisible && ( + + + + Add fields + - - - - - + + + + + - - - Cancel - - { - this.closeModal(); - this.onClickAdd(); - }} - data-test-subj="addFieldsAggregationAdd" - > - Add - - - - - )} -
+ + + Cancel + + { + this.closeModal(); + this.onClickAdd(); + }} + data-test-subj="addFieldsAggregationAdd" + > + Add + + + + + )} ); } diff --git a/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx b/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx index 668f51b32..70dd2ff97 100644 --- a/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx +++ b/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx @@ -4,8 +4,17 @@ */ import React, { ChangeEvent } from "react"; -import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui"; -import { ContentPanel } from "../../../../components/ContentPanel"; +import { + EuiSpacer, + EuiCompressedFormRow, + EuiCompressedFieldText, + EuiTextArea, + EuiText, + EuiFlexGroup, + EuiFlexItem, + EuiHorizontalRule, + EuiPanel, +} from "@elastic/eui"; interface ConfigureRollupProps { isEdit: boolean; @@ -17,36 +26,48 @@ interface ConfigureRollupProps { } const ConfigureRollup = ({ isEdit, rollupId, rollupIdError, onChangeName, onChangeDescription, description }: ConfigureRollupProps) => ( - -
- - - - - - - - -

Description

- - - - - – optional - - - - - - - -
- + + + +

Job name and description

+ + + + +

Name

+ + } + helpText="Specify a unique, descriptive name." + isInvalid={!!rollupIdError} + error={rollupIdError} + > + + + + + + +

Description

+ + + + + – optional + + + + + + + + ); export default ConfigureRollup; diff --git a/public/pages/CreateRollup/components/CreateRollupSteps/CreateRollupSteps.tsx b/public/pages/CreateRollup/components/CreateRollupSteps/CreateRollupSteps.tsx index c9fe44e7d..81eb71f39 100644 --- a/public/pages/CreateRollup/components/CreateRollupSteps/CreateRollupSteps.tsx +++ b/public/pages/CreateRollup/components/CreateRollupSteps/CreateRollupSteps.tsx @@ -34,7 +34,7 @@ const setOfSteps = (step: number) => { }; const CreateRollupSteps = ({ step }: CreateRollupStepsProps) => (
- +
); diff --git a/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx b/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx index f8f0b3d57..db92af3d5 100644 --- a/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx +++ b/public/pages/CreateRollup/components/HistogramAndMetrics/HistogramAndMetrics.tsx @@ -18,6 +18,8 @@ import { Pagination, EuiIcon, EuiTableSortingType, + EuiPanel, + EuiHorizontalRule, } from "@elastic/eui"; import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel"; import { ModalConsumer } from "../../../../components/Modal"; @@ -182,28 +184,32 @@ export default class HistogramAndMetrics extends Component - {() => ( - onChangeStep(2), + + + + +

{AGGREGATION_AND_METRIC_SETTINGS}

+ + + + + {() => ( + onChangeStep(2), + }, }, - }, - ]} - /> - )} - - } - bodyStyles={{ padding: "initial" }} - title={AGGREGATION_AND_METRIC_SETTINGS} - titleSize="s" - > -
+ ]} + /> + )} + + + + +

Time aggregation

@@ -255,7 +261,7 @@ export default class HistogramAndMetrics extends Component
- + ); } } diff --git a/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx b/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx index b6e797a64..e5ba8bae8 100644 --- a/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx +++ b/public/pages/CreateRollup/components/JobNameAndIndices/JobNameAndIndices.tsx @@ -4,7 +4,7 @@ */ import React, { Component } from "react"; -import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText } from "@elastic/eui"; +import { EuiFlexGrid, EuiSpacer, EuiFlexItem, EuiText, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from "@elastic/eui"; import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel"; import { ModalConsumer } from "../../../../components/Modal"; import { IndexItem } from "../../../../../models/interfaces"; @@ -26,50 +26,54 @@ export default class JobNameAndIndices extends Component const { rollupId, description, onChangeStep, sourceIndex, targetIndex } = this.props; return ( - - {() => ( - onChangeStep(1), + + + + +

Job name and indexes

+ + + + + {() => ( + onChangeStep(1), + }, }, - }, - ]} - /> - )} - - } - bodyStyles={{ padding: "initial" }} - title="Job name and indexes" - titleSize="s" - > -
+ ]} + /> + )} + + + + +
- +
Name
{rollupId}
 - +
Source Index
{sourceIndex[0].label}
 - +
Target index
{targetIndex[0].label}
 - +
Description
{description == "" ? "-" : description}
 @@ -77,7 +81,7 @@ export default class JobNameAndIndices extends Component
- + ); } } diff --git a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx index e48fb485a..ae8fface3 100644 --- a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx +++ b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx @@ -512,14 +512,16 @@ export default class MetricsCalculation extends Component - -

Additional metrics{` (${selectedMetrics.length})`}

- + +

Additional metrics{` (${selectedMetrics.length})`}

+ - - – optional - + +

+ – optional +

+ diff --git a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx index 190337431..fa33e50c8 100644 --- a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx +++ b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx @@ -4,7 +4,7 @@ */ import React, { Component, Fragment } from "react"; -import { EuiSpacer, EuiCompressedFormRow, EuiCallOut, EuiText, EuiLink } from "@elastic/eui"; +import { EuiSpacer, EuiCompressedFormRow, EuiCallOut, EuiText, EuiLink, EuiFlexGroup, EuiHorizontalRule, EuiPanel } from "@elastic/eui"; import { EuiComboBoxOptionOption } from "@elastic/eui/src/components/combo_box/types"; import _ from "lodash"; import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning"; @@ -121,72 +121,86 @@ export default class RollupIndices extends Component -
- - + + + +

Indices

+ + + + + +

You can't change indices after creating a job. Double-check the source and target index names before proceeding.

- - {hasAggregation && ( - - - -

Note: changing source index will erase all existing definitions about aggregations and metrics.

- - - )} - - + + {hasAggregation && ( + + + +

Note: changing source index will erase all existing definitions about aggregations and metrics.

+ + + )} + + +

Source index

+ + } + error={sourceIndexError} + isInvalid={sourceIndexError != ""} + helpText="The index pattern on which to performed the rollup job. You can use * as a wildcard." + > + - - - - + + + +

Target index

+ + } + error={targetIndexError} + isInvalid={targetIndexError != ""} + helpText={ + + { + "The target index stores rollup results. You can select an existing index or type in a new index name with embedded variables " + } + { + + Learn more + + } + + } + > + - { - "The target index stores rollup results. You can select an existing index or type in a new index name with embedded variables " - } - { - - Learn more - - } - - } - > - - -
- + data-test-subj="targetIndexCombobox" + /> + + ); } } diff --git a/public/pages/CreateRollup/components/Schedule/Schedule.tsx b/public/pages/CreateRollup/components/Schedule/Schedule.tsx index 0328f0470..c49b3530b 100644 --- a/public/pages/CreateRollup/components/Schedule/Schedule.tsx +++ b/public/pages/CreateRollup/components/Schedule/Schedule.tsx @@ -17,6 +17,8 @@ import { EuiTextArea, EuiFormHelpText, EuiText, + EuiHorizontalRule, + EuiPanel, } from "@elastic/eui"; import { DelayTimeunitOptions, ScheduleIntervalTimeunitOptions } from "../../utils/constants"; import { ContentPanel } from "../../../../components/ContentPanel"; @@ -67,14 +69,17 @@ const selectInterval = ( onChangeTimeunit: (value: ChangeEvent) => void ) => ( + +

Rollup interval

+ - + - + void) => ( - + +

Continuous

+ + } + > { onChangeIntervalTimeunit, } = this.props; return ( - -
- {!isEdit && ( - - )} - - {!isEdit && isContinuous(continuousJob, onChangeContinuousJob)} + + + +

Schedule

+ + + + {!isEdit && ( + + )} + {!isEdit && isContinuous(continuousJob, onChangeContinuousJob)} - - - - + +

Rollup execution frequency

+ + } + > + + + - {continuousDefinition == "fixed" ? ( - selectInterval(interval, intervalTimeunit, intervalError, onChangeIntervalTime, onChangeIntervalTimeunit) - ) : ( - - - - - - - - - )} + {continuousDefinition == "fixed" ? ( + selectInterval(interval, intervalTimeunit, intervalError, onChangeIntervalTime, onChangeIntervalTimeunit) + ) : ( + + +

Define by cron expression

+ + } + > + + + +

Timezone

+ + } + helpText="A day starts from 00:00:00 in the specified timezone." + > + + + + )} - + - - - - - - - - - -

Execution delay

- - - - - – optional - - - - - - - - - - - - - - - The amount of time the job waits for data ingestion to accommodate any necessary processing time. - -
- + +

Page per execution

+ + } + helpText="The number of pages every execution processes. A larger number means faster execution and higher costs on memory." + > + + + + +

+ Execution delay – optional +

+ + + + + + + + + + + + + + + The amount of time the job waits for data ingestion to accommodate any necessary processing time. + + ); } } diff --git a/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx b/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx index c90af94d2..3bee71757 100644 --- a/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx +++ b/public/pages/CreateRollup/components/ScheduleRolesAndNotifications/ScheduleRolesAndNotifications.tsx @@ -4,7 +4,7 @@ */ import React, { Component } from "react"; -import { EuiFlexGrid, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui"; +import { EuiFlexGrid, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiPanel, EuiSpacer, EuiText } from "@elastic/eui"; import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel"; import { ModalConsumer } from "../../../../components/Modal"; import { parseTimeunit, buildIntervalScheduleText, buildCronScheduleText } from "../../utils/helpers"; @@ -45,50 +45,54 @@ export default class ScheduleRolesAndNotifications extends Component - {() => ( - onChangeStep(3), + + + + +

Schedule

+ + + + + {() => ( + onChangeStep(3), + }, }, - }, - ]} - /> - )} - - } - bodyStyles={{ padding: "initial" }} - title="Schedule" - titleSize="s" - > -
+ ]} + /> + )} + + + + +
- +
Enabled by default
{jobEnabledByDefault ? "Yes" : "No"}
 - +
Schedule
{scheduleText}
 - +
Pages per execution
{pageSize}
 - +
Execution delay
{isNaN(delayTime) || delayTime == undefined || delayTime == 0 ? "-" : delayTime + " " + parseTimeunit(delayTimeunit)} @@ -98,7 +102,7 @@ export default class ScheduleRolesAndNotifications extends Component
- + ); } } diff --git a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx index dea4b8f83..78f57e5f1 100644 --- a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx +++ b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx @@ -83,85 +83,104 @@ export default class TimeAggregation extends Component - -

Time aggregation

- + +

Time aggregation

+ - Your source indices must include a timestamp field. The rollup job creates a date histogram for the field you specify." " + Your source indices must include a timestamp field. The rollup job creates a date histogram for the field you specify. -
- - - - - - - onChangeIntervalType(id)} - name="intervalType" - /> - - - {intervalType == "fixed" ? ( - - - - - - - - - - - - - - ) : ( - - - - -
Every 1
{" "} - - - - - - - - - - )} - - - - - -
+ + +

Timestamp field

+ + } + error={timestampError} + isInvalid={!!timestampError} + > + + + + +

Interval type

+ + } + > + onChangeIntervalType(id)} + name="intervalType" + /> + + + +

Interval

+ + + {intervalType == "fixed" ? ( + + + + + + + + + + + + + + ) : ( + + + + +
Every 1
{" "} + + + + + + + + + + )} + + + +

Timezone

+ + } + helpText="A day starts from 00:00:00 in the specified timezone." + > + + ); } diff --git a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx index e61fc13d1..04b58d5cf 100644 --- a/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx +++ b/public/pages/CreateRollup/containers/CreateRollup/CreateRollup.tsx @@ -4,7 +4,7 @@ */ import React, { ChangeEvent, Component, useContext } from "react"; -import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption } from "@elastic/eui"; +import { EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiComboBoxOptionOption, EuiText } from "@elastic/eui"; import { RouteComponentProps } from "react-router-dom"; import { RollupService } from "../../../../services"; import ConfigureRollup from "../../components/ConfigureRollup"; @@ -46,9 +46,9 @@ export default class CreateRollup extends Component { ? () => { return ( <> - +

Set up indices

- + ); diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx index 4f7db9022..0d90bf29f 100644 --- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx +++ b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx @@ -699,7 +699,7 @@ export class CreateRollupForm extends Component - + Cancel diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap b/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap index 89f07df44..e141a7095 100644 --- a/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap +++ b/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap @@ -22,13 +22,13 @@ exports[` spec renders the component 1`] = ` class="euiSteps" >
spec renders the component 1`] = `
Set up indices
@@ -53,13 +53,13 @@ exports[` spec renders the component 1`] = ` />
spec renders the component 1`] = `
Define aggregations and metrics
@@ -84,13 +84,13 @@ exports[` spec renders the component 1`] = ` />
spec renders the component 1`] = `
Specify schedule
@@ -115,13 +115,13 @@ exports[` spec renders the component 1`] = ` />
spec renders the component 1`] = `
Review and create
@@ -151,395 +151,376 @@ exports[` spec renders the component 1`] = `
-

- Set up indices -

+

+ Set up indices +

+
-
-

- Job name and description - - - - -

-
+

+ Job name and description +

-
-
-
+ +
+
+
-
-
- -
-
-
- Specify a unique, descriptive name. -
+
-
-
-
-

- Description -

-
-
-
-
-
- - – optional - -
-
-
+ Specify a unique, descriptive name.
+
+
+
+
+
+ class="euiText euiText--small" + > +

+ Description +

+
+
+
-