From f5041b43acef99b3629a8a6e013a97d5c5a4888e Mon Sep 17 00:00:00 2001 From: Milton Hultgren Date: Tue, 15 Feb 2022 09:38:23 +0100 Subject: [PATCH] [Logs UI] Support switching between log source modes (#124929) * [Logs UI] Enable switching between log source modes (#120082) * [Logs UI] Improve Data view selection section (#124251) * Update translation files * Apply review requests Apply useCallback optimization Add telemetry tracking for users opting out of data view usage Remove extra visual space at the bottom of the card Improve initial render state of data view panel Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- .../index_names_configuration_panel.tsx | 45 +------ .../index_pattern_configuration_panel.tsx | 13 +- .../logs/settings/index_pattern_selector.tsx | 2 +- .../settings/indices_configuration_panel.tsx | 125 ++++++++++++++---- .../translations/translations/ja-JP.json | 3 - .../translations/translations/zh-CN.json | 3 - 6 files changed, 103 insertions(+), 88 deletions(-) diff --git a/x-pack/plugins/infra/public/pages/logs/settings/index_names_configuration_panel.tsx b/x-pack/plugins/infra/public/pages/logs/settings/index_names_configuration_panel.tsx index 49e847e944694..5da03d9cb22c1 100644 --- a/x-pack/plugins/infra/public/pages/logs/settings/index_names_configuration_panel.tsx +++ b/x-pack/plugins/infra/public/pages/logs/settings/index_names_configuration_panel.tsx @@ -5,17 +5,7 @@ * 2.0. */ -import { - EuiButton, - EuiCallOut, - EuiCode, - EuiDescribedFormGroup, - EuiFieldText, - EuiFormRow, - EuiSpacer, - EuiTitle, -} from '@elastic/eui'; -import { i18n } from '@kbn/i18n'; +import { EuiCode, EuiDescribedFormGroup, EuiFieldText, EuiFormRow } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { useTrackPageview } from '../../../../../observability/public'; @@ -28,8 +18,7 @@ export const IndexNamesConfigurationPanel: React.FC<{ isLoading: boolean; isReadOnly: boolean; indexNamesFormElement: FormElement; - onSwitchToIndexPatternReference: () => void; -}> = ({ isLoading, isReadOnly, indexNamesFormElement, onSwitchToIndexPatternReference }) => { +}> = ({ isLoading, isReadOnly, indexNamesFormElement }) => { useTrackPageview({ app: 'infra_logs', path: 'log_source_configuration_index_name' }); useTrackPageview({ app: 'infra_logs', @@ -39,29 +28,6 @@ export const IndexNamesConfigurationPanel: React.FC<{ return ( <> - -

- -

- - - - - - - - - @@ -118,10 +84,3 @@ const getIndexNamesInputFieldProps = getInputFieldProps( }), ({ indexName }) => indexName ); - -const indexPatternInformationCalloutTitle = i18n.translate( - 'xpack.infra.logSourceConfiguration.indexPatternInformationCalloutTitle', - { - defaultMessage: 'New configuration option', - } -); diff --git a/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_configuration_panel.tsx b/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_configuration_panel.tsx index 17d537101e5d2..2d1c407595f61 100644 --- a/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_configuration_panel.tsx +++ b/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_configuration_panel.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiDescribedFormGroup, EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { EuiDescribedFormGroup, EuiFormRow, EuiLink, EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import React, { useCallback, useMemo } from 'react'; import { useTrackPageview } from '../../../../../observability/public'; @@ -44,15 +44,6 @@ export const IndexPatternConfigurationPanel: React.FC<{ return ( <> - -

- -

- - { return ( diff --git a/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_selector.tsx b/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_selector.tsx index cbc9bc477829d..c63b27f6d0ce1 100644 --- a/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_selector.tsx +++ b/x-pack/plugins/infra/public/pages/logs/settings/index_pattern_selector.tsx @@ -76,7 +76,7 @@ export const IndexPatternSelector: React.FC<{ options={availableOptions} placeholder={indexPatternSelectorPlaceholder} selectedOptions={selectedOptions} - singleSelection={true} + singleSelection={{ asPlainText: true }} onChange={changeSelectedIndexPatterns} /> ); diff --git a/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.tsx b/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.tsx index 064d5f7907037..46af94989f259 100644 --- a/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.tsx +++ b/x-pack/plugins/infra/public/pages/logs/settings/indices_configuration_panel.tsx @@ -5,6 +5,8 @@ * 2.0. */ +import { EuiCheckableCard, EuiFormFieldset, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; import React, { useCallback } from 'react'; import { useUiTracker } from '../../../../../observability/public'; import { @@ -23,37 +25,106 @@ export const IndicesConfigurationPanel = React.memo<{ isReadOnly: boolean; indicesFormElement: FormElement; }>(({ isLoading, isReadOnly, indicesFormElement }) => { - const trackSwitchToIndexPatternReference = useUiTracker({ app: 'infra_logs' }); + const trackChangeIndexSourceType = useUiTracker({ app: 'infra_logs' }); - const switchToIndexPatternReference = useCallback(() => { - indicesFormElement.updateValue(() => undefined); - trackSwitchToIndexPatternReference({ + const changeToIndexPatternType = useCallback(() => { + if (indicesFormElement.initialValue?.type === 'index_pattern') { + indicesFormElement.updateValue(() => indicesFormElement.initialValue); + } else { + indicesFormElement.updateValue(() => undefined); + } + + trackChangeIndexSourceType({ metric: 'configuration_switch_to_index_pattern_reference', }); - }, [indicesFormElement, trackSwitchToIndexPatternReference]); + }, [indicesFormElement, trackChangeIndexSourceType]); + + const changeToIndexNameType = useCallback(() => { + if (indicesFormElement.initialValue?.type === 'index_name') { + indicesFormElement.updateValue(() => indicesFormElement.initialValue); + } else { + indicesFormElement.updateValue(() => ({ + type: 'index_name', + indexName: '', + })); + } + + trackChangeIndexSourceType({ + metric: 'configuration_switch_to_index_names_reference', + }); + }, [indicesFormElement, trackChangeIndexSourceType]); + + return ( + +

+ +

+ + ), + }} + > + +

+ +

+ + } + name="dataView" + value="dataView" + checked={isIndexPatternFormElement(indicesFormElement)} + onChange={changeToIndexPatternType} + disabled={isReadOnly} + > + {isIndexPatternFormElement(indicesFormElement) && ( + + )} + + - if (isIndexPatternFormElement(indicesFormElement)) { - return ( - - ); - } else if (isIndexNamesFormElement(indicesFormElement)) { - return ( - <> - - - ); - } else { - return null; - } + +

+ +

+ + } + name="indexNames" + value="indexNames" + checked={isIndexNamesFormElement(indicesFormElement)} + onChange={changeToIndexNameType} + disabled={isReadOnly} + > + {isIndexNamesFormElement(indicesFormElement) && ( + + )} + + + ); }); const isIndexPatternFormElement = isFormElementForType( diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index a991ead4705c9..9c38543d56fbc 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -13772,8 +13772,6 @@ "xpack.infra.logSourceConfiguration.dataViewTitle": "ログデータビュー", "xpack.infra.logSourceConfiguration.emptyColumnListErrorMessage": "列リストは未入力のままにできません。", "xpack.infra.logSourceConfiguration.emptyFieldErrorMessage": "フィールド'{fieldName}'は未入力のままにできません。", - "xpack.infra.logSourceConfiguration.indexPatternInformationCalloutDescription": "ログUIはデータビューと統合し、使用されているインデックスを構成します。", - "xpack.infra.logSourceConfiguration.indexPatternInformationCalloutTitle": "新しい構成オプション", "xpack.infra.logSourceConfiguration.invalidMessageFieldTypeErrorMessage": "{messageField}フィールドはテキストフィールドでなければなりません。", "xpack.infra.logSourceConfiguration.logSourceConfigurationFormErrorsCalloutTitle": "一貫しないソース構成", "xpack.infra.logSourceConfiguration.missingDataViewErrorMessage": "データビュー{dataViewId}が存在する必要があります。", @@ -13781,7 +13779,6 @@ "xpack.infra.logSourceConfiguration.missingMessageFieldErrorMessage": "データビューには{messageField}フィールドが必要です。", "xpack.infra.logSourceConfiguration.missingTimestampFieldErrorMessage": "データビューは時間に基づく必要があります。", "xpack.infra.logSourceConfiguration.rollupIndexPatternErrorMessage": "データビューがロールアップインデックスパターンであってはなりません。", - "xpack.infra.logSourceConfiguration.switchToDataViewReferenceButtonLabel": "データビューを使用", "xpack.infra.logSourceConfiguration.unsavedFormPromptMessage": "終了してよろしいですか？変更内容は失われます", "xpack.infra.logSourceErrorPage.failedToLoadSourceMessage": "構成の読み込み試行中にエラーが発生しました。再試行するか、構成を変更して問題を修正してください。", "xpack.infra.logSourceErrorPage.failedToLoadSourceTitle": "構成を読み込めませんでした", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index cabdbb00bf7c0..d94df37a7c260 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -13723,8 +13723,6 @@ "xpack.infra.logSourceConfiguration.dataViewTitle": "日志数据视图", "xpack.infra.logSourceConfiguration.emptyColumnListErrorMessage": "列列表不得为空。", "xpack.infra.logSourceConfiguration.emptyFieldErrorMessage": "字段“{fieldName}”不得为空。", - "xpack.infra.logSourceConfiguration.indexPatternInformationCalloutDescription": "现在，Logs UI 可以与数据视图集成以配置使用的索引。", - "xpack.infra.logSourceConfiguration.indexPatternInformationCalloutTitle": "新配置选项", "xpack.infra.logSourceConfiguration.invalidMessageFieldTypeErrorMessage": "{messageField} 字段必须是文本字段。", "xpack.infra.logSourceConfiguration.logDataViewHelpText": "数据视图在 Kibana 工作区中的应用间共享，并可以通过 {dataViewsManagementLink} 进行管理。", "xpack.infra.logSourceConfiguration.logSourceConfigurationFormErrorsCalloutTitle": "内容配置不一致", @@ -13733,7 +13731,6 @@ "xpack.infra.logSourceConfiguration.missingMessageFieldErrorMessage": "数据视图必须包含 {messageField} 字段。", "xpack.infra.logSourceConfiguration.missingTimestampFieldErrorMessage": "数据视图必须基于时间。", "xpack.infra.logSourceConfiguration.rollupIndexPatternErrorMessage": "数据视图不得为汇总/打包索引模式。", - "xpack.infra.logSourceConfiguration.switchToDataViewReferenceButtonLabel": "使用数据视图", "xpack.infra.logSourceConfiguration.unsavedFormPromptMessage": "是否确定要离开？更改将丢失", "xpack.infra.logSourceErrorPage.failedToLoadSourceMessage": "尝试加载配置时出错。请重试或更改配置以解决问题。", "xpack.infra.logSourceErrorPage.failedToLoadSourceTitle": "无法加载配置",