[Logs UI] Support switching between log source modes (elastic#124929)

* [Logs UI] Enable switching between log source modes (elastic#120082) * [Logs UI] Improve Data view selection section (elastic#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 <[email protected]>
dgieselaar · Feb 15, 2022 · f5041b4 · f5041b4
1 parent ff5a4dc
commit f5041b4
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 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
@@ -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<LogIndexNameReference, FormValidationError>;
-  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 (
     <>
-      <EuiTitle size="s">
-        <h3>
-          <FormattedMessage
-            id="xpack.infra.sourceConfiguration.indicesSectionTitle"
-            defaultMessage="Indices"
-          />
-        </h3>
-      </EuiTitle>
-      <EuiSpacer size="m" />
-      <EuiCallOut title={indexPatternInformationCalloutTitle} iconType="wrench">
-        <FormattedMessage
-          tagName="p"
-          id="xpack.infra.logSourceConfiguration.indexPatternInformationCalloutDescription"
-          defaultMessage="The Logs UI can now integrate with data views to configure the used indices."
-        />
-        <EuiButton onClick={onSwitchToIndexPatternReference}>
-          <FormattedMessage
-            id="xpack.infra.logSourceConfiguration.switchToDataViewReferenceButtonLabel"
-            defaultMessage="Use data views"
-          />
-        </EuiButton>
-      </EuiCallOut>
-      <EuiSpacer size="m" />
       <EuiDescribedFormGroup
         title={
           <h4>
@@ -118,10 +84,3 @@ const getIndexNamesInputFieldProps = getInputFieldProps<LogIndexNameReference>(
   }),
   ({ 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
@@ -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 (
     <>
-      <EuiTitle size="s">
-        <h3>
-          <FormattedMessage
-            id="xpack.infra.logSourceConfiguration.dataViewSectionTitle"
-            defaultMessage="Data view"
-          />
-        </h3>
-      </EuiTitle>
-      <EuiSpacer size="m" />
       <DataViewsInlineHelpMessage />
       <EuiSpacer size="m" />
       <EuiDescribedFormGroup
@@ -105,7 +96,7 @@ const DataViewsInlineHelpMessage = React.memo(() => {
   return (
     <FormattedMessage
       id="xpack.infra.logSourceConfiguration.logDataViewHelpText"
-      defaultMessage="Data views are shared among apps in the Kibana space and can be managed via the {dataViewsManagementLink}."
+      defaultMessage="Data views are shared among apps in the Kibana space and can be managed via the {dataViewsManagementLink}. A single data view can target multiple indices."
       values={{
         dataViewsManagementLink: (
           <EuiLink {...dataViewsManagementLinkProps}>

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
@@ -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
@@ -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<LogIndexReference | undefined, FormValidationError>;
 }>(({ 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 (
+    <EuiFormFieldset
+      legend={{
+        children: (
+          <EuiTitle size="s">
+            <h3>
+              <FormattedMessage
+                id="xpack.infra.logSourceConfiguration.logSourcesTitle"
+                defaultMessage="Log sources"
+              />
+            </h3>
+          </EuiTitle>
+        ),
+      }}
+    >
+      <EuiCheckableCard
+        id="dataView"
+        label={
+          <EuiTitle size="xs">
+            <h2>
+              <FormattedMessage
+                id="xpack.infra.logSourceConfiguration.dataViewSectionTitle"
+                defaultMessage="Data view (recommended)"
+              />
+            </h2>
+          </EuiTitle>
+        }
+        name="dataView"
+        value="dataView"
+        checked={isIndexPatternFormElement(indicesFormElement)}
+        onChange={changeToIndexPatternType}
+        disabled={isReadOnly}
+      >
+        {isIndexPatternFormElement(indicesFormElement) && (
+          <IndexPatternConfigurationPanel
+            isLoading={isLoading}
+            isReadOnly={isReadOnly}
+            indexPatternFormElement={indicesFormElement}
+          />
+        )}
+      </EuiCheckableCard>
+      <EuiSpacer size="m" />
 
-  if (isIndexPatternFormElement(indicesFormElement)) {
-    return (
-      <IndexPatternConfigurationPanel
-        isLoading={isLoading}
-        isReadOnly={isReadOnly}
-        indexPatternFormElement={indicesFormElement}
-      />
-    );
-  } else if (isIndexNamesFormElement(indicesFormElement)) {
-    return (
-      <>
-        <IndexNamesConfigurationPanel
-          isLoading={isLoading}
-          isReadOnly={isReadOnly}
-          indexNamesFormElement={indicesFormElement}
-          onSwitchToIndexPatternReference={switchToIndexPatternReference}
-        />
-      </>
-    );
-  } else {
-    return null;
-  }
+      <EuiCheckableCard
+        id="indexNames"
+        label={
+          <EuiTitle size="xs">
+            <h2>
+              <FormattedMessage
+                id="xpack.infra.sourceConfiguration.indicesSectionTitle"
+                defaultMessage="Indices"
+              />
+            </h2>
+          </EuiTitle>
+        }
+        name="indexNames"
+        value="indexNames"
+        checked={isIndexNamesFormElement(indicesFormElement)}
+        onChange={changeToIndexNameType}
+        disabled={isReadOnly}
+      >
+        {isIndexNamesFormElement(indicesFormElement) && (
+          <IndexNamesConfigurationPanel
+            isLoading={isLoading}
+            isReadOnly={isReadOnly}
+            indexNamesFormElement={indicesFormElement}
+          />
+        )}
+      </EuiCheckableCard>
+    </EuiFormFieldset>
+  );
 });
 
 const isIndexPatternFormElement = isFormElementForType(

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -13772,16 +13772,13 @@
     "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}が存在する必要があります。",
     "xpack.infra.logSourceConfiguration.missingDataViewsLabel": "データビュー{indexPatternId}が見つかりません",
     "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
@@ -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": "无法加载配置",