[ML] EuiDataGrid ml/transform components. (#63447)

Cleanup and consolidation of code related to EuiDataGrid. The transform wizard source and pivot preview table as well as the data frame analytics results pages now share a common code base related to data grid tables.

To avoid tight coupling of components and hooks, the hooks are not within the common data grid component. Instead the hooks need to be used on the outer wrapping component and the results will be passed as props to the data grid component. This allows us to pass data from different data sources (transform index source, pivot previews, analytics results) into a shared component.

x-pack/plugins/transform/public/app/components/pivot_preview/common.test.ts → x-pack/plugins/ml/public/application/components/data_grid/common.test.ts

@@ -6,16 +6,7 @@
 
 import { EuiDataGridSorting } from '@elastic/eui';
 
-import {
-  getPreviewRequestBody,
-  PivotAggsConfig,
-  PivotGroupByConfig,
-  PIVOT_SUPPORTED_AGGS,
-  PIVOT_SUPPORTED_GROUP_BY_AGGS,
-  SimpleQuery,
-} from '../../common';
-
-import { multiColumnSortFactory, getPivotPreviewDevConsoleStatement } from './common';
+import { multiColumnSortFactory } from './common';
 
 describe('Transform: Define Pivot Common', () => {
   test('multiColumnSortFactory()', () => {
@@ -65,53 +56,4 @@ describe('Transform: Define Pivot Common', () => {
       { s: 'a', n: 1 },
     ]);
   });
-
-  test('getPivotPreviewDevConsoleStatement()', () => {
-    const query: SimpleQuery = {
-      query_string: {
-        query: '*',
-        default_operator: 'AND',
-      },
-    };
-    const groupBy: PivotGroupByConfig = {
-      agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
-      field: 'the-group-by-field',
-      aggName: 'the-group-by-agg-name',
-      dropDownName: 'the-group-by-drop-down-name',
-    };
-    const agg: PivotAggsConfig = {
-      agg: PIVOT_SUPPORTED_AGGS.AVG,
-      field: 'the-agg-field',
-      aggName: 'the-agg-agg-name',
-      dropDownName: 'the-agg-drop-down-name',
-    };
-    const request = getPreviewRequestBody('the-index-pattern-title', query, [groupBy], [agg]);
-    const pivotPreviewDevConsoleStatement = getPivotPreviewDevConsoleStatement(request);
-
-    expect(pivotPreviewDevConsoleStatement).toBe(`POST _transform/_preview
-{
-  "source": {
-    "index": [
-      "the-index-pattern-title"
-    ]
-  },
-  "pivot": {
-    "group_by": {
-      "the-group-by-agg-name": {
-        "terms": {
-          "field": "the-group-by-field"
-        }
-      }
-    },
-    "aggregations": {
-      "the-agg-agg-name": {
-        "avg": {
-          "field": "the-agg-field"
-        }
-      }
-    }
-  }
-}
-`);
-  });
 });

x-pack/plugins/ml/public/application/components/data_grid/common.ts

@@ -0,0 +1,287 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import moment from 'moment-timezone';
+import { useEffect, useMemo } from 'react';
+
+import {
+  EuiDataGridCellValueElementProps,
+  EuiDataGridSorting,
+  EuiDataGridStyle,
+} from '@elastic/eui';
+
+import {
+  IndexPattern,
+  IFieldType,
+  ES_FIELD_TYPES,
+  KBN_FIELD_TYPES,
+} from '../../../../../../../src/plugins/data/public';
+
+import {
+  BASIC_NUMERICAL_TYPES,
+  EXTENDED_NUMERICAL_TYPES,
+} from '../../data_frame_analytics/common/fields';
+
+import {
+  FEATURE_IMPORTANCE,
+  FEATURE_INFLUENCE,
+  OUTLIER_SCORE,
+} from '../../data_frame_analytics/common/constants';
+import { formatHumanReadableDateTimeSeconds } from '../../util/date_utils';
+import { getNestedProperty } from '../../util/object_utils';
+import { mlFieldFormatService } from '../../services/field_format_service';
+
+import { DataGridItem, IndexPagination, RenderCellValue } from './types';
+
+export const INIT_MAX_COLUMNS = 20;
+
+export const euiDataGridStyle: EuiDataGridStyle = {
+  border: 'all',
+  fontSize: 's',
+  cellPadding: 's',
+  stripes: false,
+  rowHover: 'none',
+  header: 'shade',
+};
+
+export const euiDataGridToolbarSettings = {
+  showColumnSelector: true,
+  showStyleSelector: false,
+  showSortSelector: true,
+  showFullScreenSelector: false,
+};
+
+export const getFieldsFromKibanaIndexPattern = (indexPattern: IndexPattern): string[] => {
+  const allFields = indexPattern.fields.map(f => f.name);
+  const indexPatternFields: string[] = allFields.filter(f => {
+    if (indexPattern.metaFields.includes(f)) {
+      return false;
+    }
+
+    const fieldParts = f.split('.');
+    const lastPart = fieldParts.pop();
+    if (lastPart === 'keyword' && allFields.includes(fieldParts.join('.'))) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return indexPatternFields;
+};
+
+export interface FieldTypes {
+  [key: string]: ES_FIELD_TYPES;
+}
+
+export const getDataGridSchemasFromFieldTypes = (fieldTypes: FieldTypes, resultsField: string) => {
+  return Object.keys(fieldTypes).map(field => {
+    // Built-in values are ['boolean', 'currency', 'datetime', 'numeric', 'json']
+    // To fall back to the default string schema it needs to be undefined.
+    let schema;
+    const isSortable = true;
+    const type = fieldTypes[field];
+
+    const isNumber =
+      type !== undefined && (BASIC_NUMERICAL_TYPES.has(type) || EXTENDED_NUMERICAL_TYPES.has(type));
+    if (isNumber) {
+      schema = 'numeric';
+    }
+
+    switch (type) {
+      case 'date':
+        schema = 'datetime';
+        break;
+      case 'geo_point':
+        schema = 'json';
+        break;
+      case 'boolean':
+        schema = 'boolean';
+        break;
+    }
+
+    if (
+      field === `${resultsField}.${OUTLIER_SCORE}` ||
+      field.includes(`${resultsField}.${FEATURE_INFLUENCE}`)
+    ) {
+      schema = 'numeric';
+    }
+
+    if (field.includes(`${resultsField}.${FEATURE_IMPORTANCE}`)) {
+      schema = 'json';
+    }
+
+    return { id: field, schema, isSortable };
+  });
+};
+
+export const getDataGridSchemaFromKibanaFieldType = (field: IFieldType | undefined) => {
+  // Built-in values are ['boolean', 'currency', 'datetime', 'numeric', 'json']
+  // To fall back to the default string schema it needs to be undefined.
+  let schema;
+
+  switch (field?.type) {
+    case KBN_FIELD_TYPES.BOOLEAN:
+      schema = 'boolean';
+      break;
+    case KBN_FIELD_TYPES.DATE:
+      schema = 'datetime';
+      break;
+    case KBN_FIELD_TYPES.GEO_POINT:
+    case KBN_FIELD_TYPES.GEO_SHAPE:
+      schema = 'json';
+      break;
+    case KBN_FIELD_TYPES.NUMBER:
+      schema = 'numeric';
+      break;
+  }
+
+  return schema;
+};
+
+export const useRenderCellValue = (
+  indexPattern: IndexPattern | undefined,
+  pagination: IndexPagination,
+  tableItems: DataGridItem[],
+  resultsField?: string,
+  cellPropsCallback?: (
+    columnId: string,
+    cellValue: any,
+    fullItem: Record<string, any>,
+    setCellProps: EuiDataGridCellValueElementProps['setCellProps']
+  ) => void
+): RenderCellValue => {
+  const renderCellValue: RenderCellValue = useMemo(() => {
+    return ({
+      rowIndex,
+      columnId,
+      setCellProps,
+    }: {
+      rowIndex: number;
+      columnId: string;
+      setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
+    }) => {
+      const adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize;
+
+      const fullItem = tableItems[adjustedRowIndex];
+
+      if (fullItem === undefined) {
+        return null;
+      }
+
+      if (indexPattern === undefined) {
+        return null;
+      }
+
+      let format: any;
+
+      if (indexPattern !== undefined) {
+        format = mlFieldFormatService.getFieldFormatFromIndexPattern(indexPattern, columnId, '');
+      }
+
+      function getCellValue(cId: string) {
+        if (cId.includes(`.${FEATURE_INFLUENCE}.`) && resultsField !== undefined) {
+          const results = getNestedProperty(tableItems[adjustedRowIndex], resultsField, null);
+          return results[cId.replace(`${resultsField}.`, '')];
+        }
+
+        return tableItems.hasOwnProperty(adjustedRowIndex)
+          ? getNestedProperty(tableItems[adjustedRowIndex], cId, null)
+          : null;
+      }
+
+      const cellValue = getCellValue(columnId);
+
+      // React by default doesn't all us to use a hook in a callback.
+      // However, this one will be passed on to EuiDataGrid and its docs
+      // recommend wrapping `setCellProps` in a `useEffect()` hook
+      // so we're ignoring the linting rule here.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(() => {
+        if (typeof cellPropsCallback === 'function') {
+          cellPropsCallback(columnId, cellValue, fullItem, setCellProps);
+        }
+      }, [columnId, cellValue]);
+
+      if (typeof cellValue === 'object' && cellValue !== null) {
+        return JSON.stringify(cellValue);
+      }
+
+      if (cellValue === undefined || cellValue === null) {
+        return null;
+      }
+
+      if (format !== undefined) {
+        return format.convert(cellValue, 'text');
+      }
+
+      if (typeof cellValue === 'string' || cellValue === null) {
+        return cellValue;
+      }
+
+      const field = indexPattern.fields.getByName(columnId);
+      if (field?.type === KBN_FIELD_TYPES.DATE) {
+        return formatHumanReadableDateTimeSeconds(moment(cellValue).unix() * 1000);
+      }
+
+      if (typeof cellValue === 'boolean') {
+        return cellValue ? 'true' : 'false';
+      }
+
+      if (typeof cellValue === 'object' && cellValue !== null) {
+        return JSON.stringify(cellValue);
+      }
+
+      return cellValue;
+    };
+  }, [indexPattern?.fields, pagination.pageIndex, pagination.pageSize, tableItems]);
+  return renderCellValue;
+};
+
+/**
+ * Helper to sort an array of objects based on an EuiDataGrid sorting configuration.
+ * `sortFn()` is recursive to support sorting on multiple columns.
+ *
+ * @param sortingColumns - The EUI data grid sorting configuration
+ * @returns The sorting function which can be used with an array's sort() function.
+ */
+export const multiColumnSortFactory = (sortingColumns: EuiDataGridSorting['columns']) => {
+  const isString = (arg: any): arg is string => {
+    return typeof arg === 'string';
+  };
+
+  const sortFn = (a: any, b: any, sortingColumnIndex = 0): number => {
+    const sort = sortingColumns[sortingColumnIndex];
+    const aValue = getNestedProperty(a, sort.id, null);
+    const bValue = getNestedProperty(b, sort.id, null);
+
+    if (typeof aValue === 'number' && typeof bValue === 'number') {
+      if (aValue < bValue) {
+        return sort.direction === 'asc' ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sort.direction === 'asc' ? 1 : -1;
+      }
+    }
+
+    if (isString(aValue) && isString(bValue)) {
+      if (aValue.localeCompare(bValue) === -1) {
+        return sort.direction === 'asc' ? -1 : 1;
+      }
+      if (aValue.localeCompare(bValue) === 1) {
+        return sort.direction === 'asc' ? 1 : -1;
+      }
+    }
+
+    if (sortingColumnIndex + 1 < sortingColumns.length) {
+      return sortFn(a, b, sortingColumnIndex + 1);
+    }
+
+    return 0;
+  };
+
+  return sortFn;
+};