Skip to content

Commit 1021fb4

Browse files
walterrawalterra
committed
[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.
1 parent 742ef2f commit 1021fb4

70 files changed

Lines changed: 2234 additions & 3949 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,7 @@
66

77
import { EuiDataGridSorting } from '@elastic/eui';
88

9-
import {
10-
getPreviewRequestBody,
11-
PivotAggsConfig,
12-
PivotGroupByConfig,
13-
PIVOT_SUPPORTED_AGGS,
14-
PIVOT_SUPPORTED_GROUP_BY_AGGS,
15-
SimpleQuery,
16-
} from '../../common';
17-
18-
import { multiColumnSortFactory, getPivotPreviewDevConsoleStatement } from './common';
9+
import { multiColumnSortFactory } from './common';
1910

2011
describe('Transform: Define Pivot Common', () => {
2112
test('multiColumnSortFactory()', () => {
@@ -65,53 +56,4 @@ describe('Transform: Define Pivot Common', () => {
6556
{ s: 'a', n: 1 },
6657
]);
6758
});
68-
69-
test('getPivotPreviewDevConsoleStatement()', () => {
70-
const query: SimpleQuery = {
71-
query_string: {
72-
query: '*',
73-
default_operator: 'AND',
74-
},
75-
};
76-
const groupBy: PivotGroupByConfig = {
77-
agg: PIVOT_SUPPORTED_GROUP_BY_AGGS.TERMS,
78-
field: 'the-group-by-field',
79-
aggName: 'the-group-by-agg-name',
80-
dropDownName: 'the-group-by-drop-down-name',
81-
};
82-
const agg: PivotAggsConfig = {
83-
agg: PIVOT_SUPPORTED_AGGS.AVG,
84-
field: 'the-agg-field',
85-
aggName: 'the-agg-agg-name',
86-
dropDownName: 'the-agg-drop-down-name',
87-
};
88-
const request = getPreviewRequestBody('the-index-pattern-title', query, [groupBy], [agg]);
89-
const pivotPreviewDevConsoleStatement = getPivotPreviewDevConsoleStatement(request);
90-
91-
expect(pivotPreviewDevConsoleStatement).toBe(`POST _transform/_preview
92-
{
93-
"source": {
94-
"index": [
95-
"the-index-pattern-title"
96-
]
97-
},
98-
"pivot": {
99-
"group_by": {
100-
"the-group-by-agg-name": {
101-
"terms": {
102-
"field": "the-group-by-field"
103-
}
104-
}
105-
},
106-
"aggregations": {
107-
"the-agg-agg-name": {
108-
"avg": {
109-
"field": "the-agg-field"
110-
}
111-
}
112-
}
113-
}
114-
}
115-
`);
116-
});
11759
});

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

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import moment from 'moment-timezone';
8+
import { useEffect, useMemo } from 'react';
9+
10+
import {
11+
EuiDataGridCellValueElementProps,
12+
EuiDataGridSorting,
13+
EuiDataGridStyle,
14+
} from '@elastic/eui';
15+
16+
import {
17+
IndexPattern,
18+
IFieldType,
19+
ES_FIELD_TYPES,
20+
KBN_FIELD_TYPES,
21+
} from '../../../../../../../src/plugins/data/public';
22+
23+
import {
24+
BASIC_NUMERICAL_TYPES,
25+
EXTENDED_NUMERICAL_TYPES,
26+
} from '../../data_frame_analytics/common/fields';
27+
28+
import {
29+
FEATURE_IMPORTANCE,
30+
FEATURE_INFLUENCE,
31+
OUTLIER_SCORE,
32+
} from '../../data_frame_analytics/common/constants';
33+
import { formatHumanReadableDateTimeSeconds } from '../../util/date_utils';
34+
import { getNestedProperty } from '../../util/object_utils';
35+
import { mlFieldFormatService } from '../../services/field_format_service';
36+
37+
import { DataGridItem, IndexPagination, RenderCellValue } from './types';
38+
39+
export const INIT_MAX_COLUMNS = 20;
40+
41+
export const euiDataGridStyle: EuiDataGridStyle = {
42+
border: 'all',
43+
fontSize: 's',
44+
cellPadding: 's',
45+
stripes: false,
46+
rowHover: 'none',
47+
header: 'shade',
48+
};
49+
50+
export const euiDataGridToolbarSettings = {
51+
showColumnSelector: true,
52+
showStyleSelector: false,
53+
showSortSelector: true,
54+
showFullScreenSelector: false,
55+
};
56+
57+
export const getFieldsFromKibanaIndexPattern = (indexPattern: IndexPattern): string[] => {
58+
const allFields = indexPattern.fields.map(f => f.name);
59+
const indexPatternFields: string[] = allFields.filter(f => {
60+
if (indexPattern.metaFields.includes(f)) {
61+
return false;
62+
}
63+
64+
const fieldParts = f.split('.');
65+
const lastPart = fieldParts.pop();
66+
if (lastPart === 'keyword' && allFields.includes(fieldParts.join('.'))) {
67+
return false;
68+
}
69+
70+
return true;
71+
});
72+
73+
return indexPatternFields;
74+
};
75+
76+
export interface FieldTypes {
77+
[key: string]: ES_FIELD_TYPES;
78+
}
79+
80+
export const getDataGridSchemasFromFieldTypes = (fieldTypes: FieldTypes, resultsField: string) => {
81+
return Object.keys(fieldTypes).map(field => {
82+
// Built-in values are ['boolean', 'currency', 'datetime', 'numeric', 'json']
83+
// To fall back to the default string schema it needs to be undefined.
84+
let schema;
85+
const isSortable = true;
86+
const type = fieldTypes[field];
87+
88+
const isNumber =
89+
type !== undefined && (BASIC_NUMERICAL_TYPES.has(type) || EXTENDED_NUMERICAL_TYPES.has(type));
90+
if (isNumber) {
91+
schema = 'numeric';
92+
}
93+
94+
switch (type) {
95+
case 'date':
96+
schema = 'datetime';
97+
break;
98+
case 'geo_point':
99+
schema = 'json';
100+
break;
101+
case 'boolean':
102+
schema = 'boolean';
103+
break;
104+
}
105+
106+
if (
107+
field === `${resultsField}.${OUTLIER_SCORE}` ||
108+
field.includes(`${resultsField}.${FEATURE_INFLUENCE}`)
109+
) {
110+
schema = 'numeric';
111+
}
112+
113+
if (field.includes(`${resultsField}.${FEATURE_IMPORTANCE}`)) {
114+
schema = 'json';
115+
}
116+
117+
return { id: field, schema, isSortable };
118+
});
119+
};
120+
121+
export const getDataGridSchemaFromKibanaFieldType = (field: IFieldType | undefined) => {
122+
// Built-in values are ['boolean', 'currency', 'datetime', 'numeric', 'json']
123+
// To fall back to the default string schema it needs to be undefined.
124+
let schema;
125+
126+
switch (field?.type) {
127+
case KBN_FIELD_TYPES.BOOLEAN:
128+
schema = 'boolean';
129+
break;
130+
case KBN_FIELD_TYPES.DATE:
131+
schema = 'datetime';
132+
break;
133+
case KBN_FIELD_TYPES.GEO_POINT:
134+
case KBN_FIELD_TYPES.GEO_SHAPE:
135+
schema = 'json';
136+
break;
137+
case KBN_FIELD_TYPES.NUMBER:
138+
schema = 'numeric';
139+
break;
140+
}
141+
142+
return schema;
143+
};
144+
145+
export const useRenderCellValue = (
146+
indexPattern: IndexPattern | undefined,
147+
pagination: IndexPagination,
148+
tableItems: DataGridItem[],
149+
resultsField?: string,
150+
cellPropsCallback?: (
151+
columnId: string,
152+
cellValue: any,
153+
fullItem: Record<string, any>,
154+
setCellProps: EuiDataGridCellValueElementProps['setCellProps']
155+
) => void
156+
): RenderCellValue => {
157+
const renderCellValue: RenderCellValue = useMemo(() => {
158+
return ({
159+
rowIndex,
160+
columnId,
161+
setCellProps,
162+
}: {
163+
rowIndex: number;
164+
columnId: string;
165+
setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
166+
}) => {
167+
const adjustedRowIndex = rowIndex - pagination.pageIndex * pagination.pageSize;
168+
169+
const fullItem = tableItems[adjustedRowIndex];
170+
171+
if (fullItem === undefined) {
172+
return null;
173+
}
174+
175+
if (indexPattern === undefined) {
176+
return null;
177+
}
178+
179+
let format: any;
180+
181+
if (indexPattern !== undefined) {
182+
format = mlFieldFormatService.getFieldFormatFromIndexPattern(indexPattern, columnId, '');
183+
}
184+
185+
function getCellValue(cId: string) {
186+
if (cId.includes(`.${FEATURE_INFLUENCE}.`) && resultsField !== undefined) {
187+
const results = getNestedProperty(tableItems[adjustedRowIndex], resultsField, null);
188+
return results[cId.replace(`${resultsField}.`, '')];
189+
}
190+
191+
return tableItems.hasOwnProperty(adjustedRowIndex)
192+
? getNestedProperty(tableItems[adjustedRowIndex], cId, null)
193+
: null;
194+
}
195+
196+
const cellValue = getCellValue(columnId);
197+
198+
// React by default doesn't all us to use a hook in a callback.
199+
// However, this one will be passed on to EuiDataGrid and its docs
200+
// recommend wrapping `setCellProps` in a `useEffect()` hook
201+
// so we're ignoring the linting rule here.
202+
// eslint-disable-next-line react-hooks/rules-of-hooks
203+
useEffect(() => {
204+
if (typeof cellPropsCallback === 'function') {
205+
cellPropsCallback(columnId, cellValue, fullItem, setCellProps);
206+
}
207+
}, [columnId, cellValue]);
208+
209+
if (typeof cellValue === 'object' && cellValue !== null) {
210+
return JSON.stringify(cellValue);
211+
}
212+
213+
if (cellValue === undefined || cellValue === null) {
214+
return null;
215+
}
216+
217+
if (format !== undefined) {
218+
return format.convert(cellValue, 'text');
219+
}
220+
221+
if (typeof cellValue === 'string' || cellValue === null) {
222+
return cellValue;
223+
}
224+
225+
const field = indexPattern.fields.getByName(columnId);
226+
if (field?.type === KBN_FIELD_TYPES.DATE) {
227+
return formatHumanReadableDateTimeSeconds(moment(cellValue).unix() * 1000);
228+
}
229+
230+
if (typeof cellValue === 'boolean') {
231+
return cellValue ? 'true' : 'false';
232+
}
233+
234+
if (typeof cellValue === 'object' && cellValue !== null) {
235+
return JSON.stringify(cellValue);
236+
}
237+
238+
return cellValue;
239+
};
240+
}, [indexPattern?.fields, pagination.pageIndex, pagination.pageSize, tableItems]);
241+
return renderCellValue;
242+
};
243+
244+
/**
245+
* Helper to sort an array of objects based on an EuiDataGrid sorting configuration.
246+
* `sortFn()` is recursive to support sorting on multiple columns.
247+
*
248+
* @param sortingColumns - The EUI data grid sorting configuration
249+
* @returns The sorting function which can be used with an array's sort() function.
250+
*/
251+
export const multiColumnSortFactory = (sortingColumns: EuiDataGridSorting['columns']) => {
252+
const isString = (arg: any): arg is string => {
253+
return typeof arg === 'string';
254+
};
255+
256+
const sortFn = (a: any, b: any, sortingColumnIndex = 0): number => {
257+
const sort = sortingColumns[sortingColumnIndex];
258+
const aValue = getNestedProperty(a, sort.id, null);
259+
const bValue = getNestedProperty(b, sort.id, null);
260+
261+
if (typeof aValue === 'number' && typeof bValue === 'number') {
262+
if (aValue < bValue) {
263+
return sort.direction === 'asc' ? -1 : 1;
264+
}
265+
if (aValue > bValue) {
266+
return sort.direction === 'asc' ? 1 : -1;
267+
}
268+
}
269+
270+
if (isString(aValue) && isString(bValue)) {
271+
if (aValue.localeCompare(bValue) === -1) {
272+
return sort.direction === 'asc' ? -1 : 1;
273+
}
274+
if (aValue.localeCompare(bValue) === 1) {
275+
return sort.direction === 'asc' ? 1 : -1;
276+
}
277+
}
278+
279+
if (sortingColumnIndex + 1 < sortingColumns.length) {
280+
return sortFn(a, b, sortingColumnIndex + 1);
281+
}
282+
283+
return 0;
284+
};
285+
286+
return sortFn;
287+
};

0 commit comments

Comments
 (0)