[ML] Add Index Pattern Management to Index Data Visualizer (#101316) (#…

…103156) * [ML] Add index pattern editor flyout * [ML] Add indexPatternField editor plugin as opt dependency * [ML] Remove lens from ML's dependency * [ML] Fix custom display name cause field to be missing * [ML] Add delete option * [ML] Fix aggregatableFields logic * [ML] Add functional tests * [ML] Fix labels & consolidate addRuntimeFields * [ML] Add tooltip to show or hide distributions * Consolidate refreshPage * [ML] Fix tests Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Quynh Nguyen <[email protected]>
elastic · Jun 23, 2021 · 1fc00c0 · 1fc00c0
1 parent 2b242d4
commit 1fc00c0
Show file tree

Hide file tree

Showing 26 changed files with 886 additions and 73 deletions.
diff --git a/src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.tsx b/src/plugins/index_pattern_field_editor/public/components/field_editor/field_editor.tsx
@@ -216,7 +216,11 @@ const FieldEditorComponent = ({
     Boolean(field?.type) && field?.type !== (updatedType && updatedType[0].value);
 
   return (
-    <Form form={form} className="indexPatternFieldEditor__form">
+    <Form
+      form={form}
+      className="indexPatternFieldEditor__form"
+      data-test-subj={'indexPatternFieldEditorForm'}
+    >
       <EuiFlexGroup>
         {/* Name */}
         <EuiFlexItem>

diff --git a/x-pack/plugins/data_visualizer/kibana.json b/x-pack/plugins/data_visualizer/kibana.json
@@ -16,7 +16,8 @@
     "security",
     "maps",
     "home",
-    "lens"
+    "lens",
+    "indexPatternFieldEditor"
   ],
   "requiredBundles": [
     "home",

diff --git a/...sualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx b/...sualizer/public/application/common/components/date_picker_wrapper/date_picker_wrapper.tsx
@@ -18,7 +18,7 @@ import {
 
 import { useUrlState } from '../../util/url_state';
 import { useDataVisualizerKibana } from '../../../kibana_context';
-import { dataVisualizerTimefilterRefresh$ } from '../../../index_data_visualizer/services/timefilter_refresh_service';
+import { dataVisualizerRefresh$ } from '../../../index_data_visualizer/services/timefilter_refresh_service';
 
 interface TimePickerQuickRange {
   from: string;
@@ -50,7 +50,7 @@ function getRecentlyUsedRangesFactory(timeHistory: TimeHistoryContract) {
 }
 
 function updateLastRefresh(timeRange: OnRefreshProps) {
-  dataVisualizerTimefilterRefresh$.next({ lastRefresh: Date.now(), timeRange });
+  dataVisualizerRefresh$.next({ lastRefresh: Date.now(), timeRange });
 }
 
 export const DatePickerWrapper: FC = () => {

diff --git a/...ata_visualizer/public/application/common/components/field_data_row/action_menu/actions.ts b/...ata_visualizer/public/application/common/components/field_data_row/action_menu/actions.ts
@@ -7,19 +7,37 @@
 
 import { i18n } from '@kbn/i18n';
 import { Action } from '@elastic/eui/src/components/basic_table/action_types';
+import { MutableRefObject } from 'react';
 import { getCompatibleLensDataType, getLensAttributes } from './lens_utils';
 import { IndexPattern } from '../../../../../../../../../src/plugins/data/common/index_patterns/index_patterns';
 import { CombinedQuery } from '../../../../index_data_visualizer/types/combined_query';
 import { FieldVisConfig } from '../../stats_table/types';
-import { LensPublicStart } from '../../../../../../../lens/public';
+import { DataVisualizerKibanaReactContextValue } from '../../../../kibana_context';
+import {
+  dataVisualizerRefresh$,
+  Refresh,
+} from '../../../../index_data_visualizer/services/timefilter_refresh_service';
+
 export function getActions(
   indexPattern: IndexPattern,
-  lensPlugin: LensPublicStart,
-  combinedQuery: CombinedQuery
+  services: DataVisualizerKibanaReactContextValue['services'],
+  combinedQuery: CombinedQuery,
+  actionFlyoutRef: MutableRefObject<(() => void | undefined) | undefined>
 ): Array<Action<FieldVisConfig>> {
-  const canUseLensEditor = lensPlugin.canUseEditor();
-  return [
-    {
+  const { lens: lensPlugin, indexPatternFieldEditor } = services;
+
+  const actions: Array<Action<FieldVisConfig>> = [];
+
+  const refreshPage = () => {
+    const refresh: Refresh = {
+      lastRefresh: Date.now(),
+    };
+    dataVisualizerRefresh$.next(refresh);
+  };
+  // Navigate to Lens with prefilled chart for data field
+  if (lensPlugin !== undefined) {
+    const canUseLensEditor = lensPlugin?.canUseEditor();
+    actions.push({
       name: i18n.translate('xpack.dataVisualizer.index.dataGrid.exploreInLensTitle', {
         defaultMessage: 'Explore in Lens',
       }),
@@ -40,6 +58,56 @@ export function getActions(
         }
       },
       'data-test-subj': 'dataVisualizerActionViewInLensButton',
-    },
-  ];
+    });
+  }
+
+  // Allow to edit index pattern field
+  if (indexPatternFieldEditor?.userPermissions.editIndexPattern()) {
+    actions.push({
+      name: i18n.translate('xpack.dataVisualizer.index.dataGrid.editIndexPatternFieldTitle', {
+        defaultMessage: 'Edit index pattern field',
+      }),
+      description: i18n.translate(
+        'xpack.dataVisualizer.index.dataGrid.editIndexPatternFieldDescription',
+        {
+          defaultMessage: 'Edit index pattern field',
+        }
+      ),
+      type: 'icon',
+      icon: 'indexEdit',
+      onClick: (item: FieldVisConfig) => {
+        actionFlyoutRef.current = indexPatternFieldEditor?.openEditor({
+          ctx: { indexPattern },
+          fieldName: item.fieldName,
+          onSave: refreshPage,
+        });
+      },
+      'data-test-subj': 'dataVisualizerActionEditIndexPatternFieldButton',
+    });
+    actions.push({
+      name: i18n.translate('xpack.dataVisualizer.index.dataGrid.deleteIndexPatternFieldTitle', {
+        defaultMessage: 'Delete index pattern field',
+      }),
+      description: i18n.translate(
+        'xpack.dataVisualizer.index.dataGrid.deleteIndexPatternFieldDescription',
+        {
+          defaultMessage: 'Delete index pattern field',
+        }
+      ),
+      type: 'icon',
+      icon: 'trash',
+      available: (item: FieldVisConfig) => {
+        return item.deletable === true;
+      },
+      onClick: (item: FieldVisConfig) => {
+        actionFlyoutRef.current = indexPatternFieldEditor?.openDeleteModal({
+          ctx: { indexPattern },
+          fieldName: item.fieldName!,
+          onDelete: refreshPage,
+        });
+      },
+      'data-test-subj': 'dataVisualizerActionDeleteIndexPatternFieldButton',
+    });
+  }
+  return actions;
 }
diff --git a/...sualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx b/...sualizer/public/application/common/components/stats_table/data_visualizer_stats_table.tsx
@@ -15,6 +15,7 @@ import {
   EuiIcon,
   EuiInMemoryTable,
   EuiText,
+  EuiToolTip,
   HorizontalAlignment,
   LEFT_ALIGNMENT,
   RIGHT_ALIGNMENT,
@@ -111,6 +112,7 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
       width: '40px',
       isExpander: true,
       render: (item: DataVisualizerTableItem) => {
+        const displayName = item.displayName ?? item.fieldName;
         if (item.fieldName === undefined) return null;
         const direction = expandedRowItemIds.includes(item.fieldName) ? 'arrowUp' : 'arrowDown';
         return (
@@ -121,11 +123,11 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
               expandedRowItemIds.includes(item.fieldName)
                 ? i18n.translate('xpack.dataVisualizer.dataGrid.rowCollapse', {
                     defaultMessage: 'Hide details for {fieldName}',
-                    values: { fieldName: item.fieldName },
+                    values: { fieldName: displayName },
                   })
                 : i18n.translate('xpack.dataVisualizer.dataGrid.rowExpand', {
                     defaultMessage: 'Show details for {fieldName}',
-                    values: { fieldName: item.fieldName },
+                    values: { fieldName: displayName },
                   })
             }
             iconType={direction}
@@ -157,11 +159,15 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
         }),
         sortable: true,
         truncateText: true,
-        render: (fieldName: string) => (
-          <EuiText size="s">
-            <b>{fieldName}</b>
-          </EuiText>
-        ),
+        render: (fieldName: string, item: DataVisualizerTableItem) => {
+          const displayName = item.displayName ?? item.fieldName;
+
+          return (
+            <EuiText size="s">
+              <b data-test-subj={`dataVisualizerDisplayName-${item.fieldName}`}>{displayName}</b>
+            </EuiText>
+          );
+        },
         align: LEFT_ALIGNMENT as HorizontalAlignment,
         'data-test-subj': 'dataVisualizerTableColumnName',
       },
@@ -194,18 +200,33 @@ export const DataVisualizerTable = <T extends DataVisualizerTableItem>({
             {i18n.translate('xpack.dataVisualizer.dataGrid.distributionsColumnName', {
               defaultMessage: 'Distributions',
             })}
-            <EuiButtonIcon
-              style={{ marginLeft: 4 }}
-              size={'s'}
-              iconType={showDistributions ? 'eye' : 'eyeClosed'}
-              onClick={() => toggleShowDistribution()}
-              aria-label={i18n.translate(
-                'xpack.dataVisualizer.dataGrid.showDistributionsAriaLabel',
-                {
-                  defaultMessage: 'Show distributions',
+            <EuiToolTip
+              content={
+                !showDistributions
+                  ? i18n.translate('xpack.dataVisualizer.dataGrid.showDistributionsTooltip', {
+                      defaultMessage: 'Show distributions',
+                    })
+                  : i18n.translate('xpack.dataVisualizer.dataGrid.hideDistributionsTooltip', {
+                      defaultMessage: 'Hide distributions',
+                    })
+              }
+            >
+              <EuiButtonIcon
+                style={{ marginLeft: 4 }}
+                size={'s'}
+                iconType={showDistributions ? 'eye' : 'eyeClosed'}
+                onClick={() => toggleShowDistribution()}
+                aria-label={
+                  !showDistributions
+                    ? i18n.translate('xpack.dataVisualizer.dataGrid.showDistributionsAriaLabel', {
+                        defaultMessage: 'Show distributions',
+                      })
+                    : i18n.translate('xpack.dataVisualizer.dataGrid.hideDistributionsAriaLabel', {
+                        defaultMessage: 'Hide distributions',
+                      })
                 }
-              )}
-            />
+              />
+            </EuiToolTip>
           </div>
         ),
         render: (item: DataVisualizerTableItem) => {

diff --git a/...ata_visualizer/public/application/common/components/stats_table/types/field_vis_config.ts b/...ata_visualizer/public/application/common/components/stats_table/types/field_vis_config.ts
@@ -24,17 +24,20 @@ export interface MetricFieldVisStats {
 export interface FieldVisConfig {
   type: JobFieldType;
   fieldName?: string;
+  displayName?: string;
   existsInDocs: boolean;
   aggregatable: boolean;
   loading: boolean;
   stats?: FieldVisStats;
   fieldFormat?: any;
   isUnsupportedType?: boolean;
+  deletable?: boolean;
 }
 
 export interface FileBasedFieldVisConfig {
   type: JobFieldType;
   fieldName?: string;
+  displayName?: string;
   stats?: FieldVisStats;
   format?: string;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,8 @@ @@
         "security",
         "maps",
         "home",
-        "lens"
+        "lens",
+        "indexPatternFieldEditor"
       ],
       "requiredBundles": [
         "home",
@@ Expand Down @@