-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ML] Support search for partitions on Single Metric Viewer (#53879)
* [ML] agg for partition field values * [ML] change api * [ML] load entity values * [ML] check for partition field names * [ML] wip * [ML] refactor api * [ML] debounce input * [ML] remove Record, improve types, fix typo * [ML] jobId as dedicated param, jsdoc comments * [ML] result_type term based on model plot config * [ML] remove redundant criteria for job id * [ML] refactor getPartitionFieldsValues to TS Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
- Loading branch information
1 parent
825748e
commit 8ac233f
Showing
11 changed files
with
458 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 0 additions & 120 deletions
120
...gins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.js
This file was deleted.
Oops, something went wrong.
156 changes: 156 additions & 0 deletions
156
...ins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,156 @@ | ||
| /* | ||
| * 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 React, { Component } from 'react'; | ||
| import { FormattedMessage } from '@kbn/i18n/react'; | ||
| import { i18n } from '@kbn/i18n'; | ||
|
|
||
| import { | ||
| EuiComboBox, | ||
| EuiComboBoxOptionProps, | ||
| EuiFlexItem, | ||
| EuiFormRow, | ||
| EuiToolTip, | ||
| } from '@elastic/eui'; | ||
|
|
||
| export interface Entity { | ||
| fieldName: string; | ||
| fieldValue: any; | ||
| fieldValues: any; | ||
| } | ||
|
|
||
| function getEntityControlOptions(entity: Entity): EuiComboBoxOptionProps[] { | ||
| if (!Array.isArray(entity.fieldValues)) { | ||
| return []; | ||
| } | ||
|
|
||
| return entity.fieldValues.map(value => { | ||
| return { label: value }; | ||
| }); | ||
| } | ||
|
|
||
| interface EntityControlProps { | ||
| entity: Entity; | ||
| entityFieldValueChanged: (entity: Entity, fieldValue: any) => void; | ||
| onSearchChange: (entity: Entity, queryTerm: string) => void; | ||
| forceSelection: boolean; | ||
| } | ||
|
|
||
| interface EntityControlState { | ||
| selectedOptions: EuiComboBoxOptionProps[] | undefined; | ||
| isLoading: boolean; | ||
| options: EuiComboBoxOptionProps[] | undefined; | ||
| } | ||
|
|
||
| export class EntityControl extends Component<EntityControlProps, EntityControlState> { | ||
| inputRef: any; | ||
|
|
||
| state = { | ||
| selectedOptions: undefined, | ||
| options: undefined, | ||
| isLoading: false, | ||
| }; | ||
|
|
||
| componentDidUpdate(prevProps: EntityControlProps) { | ||
| const { entity, forceSelection } = this.props; | ||
| const { selectedOptions } = this.state; | ||
|
|
||
| if (prevProps.entity === entity) { | ||
| return; | ||
| } | ||
|
|
||
| const { fieldValue } = entity; | ||
|
|
||
| const options = getEntityControlOptions(entity); | ||
|
|
||
| let selectedOptionsUpdate: EuiComboBoxOptionProps[] | undefined = selectedOptions; | ||
| if ( | ||
| (selectedOptions === undefined && fieldValue.length > 0) || | ||
| (Array.isArray(selectedOptions) && | ||
| // @ts-ignore | ||
| selectedOptions[0].label !== fieldValue && | ||
| fieldValue.length > 0) | ||
| ) { | ||
| selectedOptionsUpdate = [{ label: fieldValue }]; | ||
| } else if (Array.isArray(selectedOptions) && fieldValue.length === 0) { | ||
| selectedOptionsUpdate = undefined; | ||
| } | ||
|
|
||
| this.setState({ | ||
| options, | ||
| isLoading: false, | ||
| selectedOptions: selectedOptionsUpdate, | ||
| }); | ||
|
|
||
| if (forceSelection && this.inputRef) { | ||
| this.inputRef.focus(); | ||
| } | ||
| } | ||
|
|
||
| onChange = (selectedOptions: EuiComboBoxOptionProps[]) => { | ||
| const options = selectedOptions.length > 0 ? selectedOptions : undefined; | ||
| this.setState({ | ||
| selectedOptions: options, | ||
| }); | ||
|
|
||
| const fieldValue = | ||
| Array.isArray(options) && options[0].label.length > 0 ? options[0].label : ''; | ||
| this.props.entityFieldValueChanged(this.props.entity, fieldValue); | ||
| }; | ||
|
|
||
| onSearchChange = (searchValue: string) => { | ||
| this.setState({ | ||
| isLoading: true, | ||
| options: [], | ||
| }); | ||
| this.props.onSearchChange(this.props.entity, searchValue); | ||
| }; | ||
|
|
||
| render() { | ||
| const { entity, forceSelection } = this.props; | ||
| const { selectedOptions, isLoading, options } = this.state; | ||
|
|
||
| const control = ( | ||
| <EuiComboBox | ||
| async | ||
| isLoading={isLoading} | ||
| inputRef={input => { | ||
| if (input) { | ||
| this.inputRef = input; | ||
| } | ||
| }} | ||
| style={{ minWidth: '300px' }} | ||
| placeholder={i18n.translate('xpack.ml.timeSeriesExplorer.enterValuePlaceholder', { | ||
| defaultMessage: 'Enter value', | ||
| })} | ||
| singleSelection={{ asPlainText: true }} | ||
| options={options} | ||
| selectedOptions={selectedOptions} | ||
| onChange={this.onChange} | ||
| onSearchChange={this.onSearchChange} | ||
| isClearable={false} | ||
| /> | ||
| ); | ||
|
|
||
| const selectMessage = ( | ||
| <FormattedMessage | ||
| id="xpack.ml.timeSeriesExplorer.selectFieldMessage" | ||
| defaultMessage="Select {fieldName}" | ||
| values={{ fieldName: entity.fieldName }} | ||
| /> | ||
| ); | ||
|
|
||
| return ( | ||
| <EuiFlexItem grow={false}> | ||
| <EuiFormRow label={entity.fieldName} helpText={forceSelection ? selectMessage : null}> | ||
| <EuiToolTip position="right" content={forceSelection ? selectMessage : null}> | ||
| {control} | ||
| </EuiToolTip> | ||
| </EuiFormRow> | ||
| </EuiFlexItem> | ||
| ); | ||
| } | ||
| } |
File renamed without changes.
Oops, something went wrong.