[ML] Data Frame Analytics: replace deprecated EuiCodeEditor (#108306)
* switch dfa create, runtime, and expanded row json editor to new codeEditor * add aria label. wrap codeEditor in div to allow data attribute for test * update functional test service for new code editor
This commit is contained in:
parent
64a63e6f9e
commit
c8ddf94c97
4 changed files with 98 additions and 76 deletions
|
@ -7,22 +7,11 @@
|
|||
|
||||
import React, { FC, Fragment, useEffect, useMemo, useRef } from 'react';
|
||||
import { debounce } from 'lodash';
|
||||
import {
|
||||
EuiCallOut,
|
||||
EuiCodeEditor,
|
||||
EuiFieldText,
|
||||
EuiForm,
|
||||
EuiFormRow,
|
||||
EuiSpacer,
|
||||
EuiSwitch,
|
||||
} from '@elastic/eui';
|
||||
import { EuiCallOut, EuiFieldText, EuiForm, EuiFormRow, EuiSpacer, EuiSwitch } from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { XJsonMode } from '../../../../../../../shared_imports';
|
||||
|
||||
const xJsonMode = new XJsonMode();
|
||||
|
||||
import { CodeEditor } from '../../../../../../../../../../src/plugins/kibana_react/public';
|
||||
import { useNotifications } from '../../../../../contexts/kibana';
|
||||
import { ml } from '../../../../../services/ml_api_service';
|
||||
import { extractErrorMessage } from '../../../../../../../common/util/errors';
|
||||
|
@ -155,22 +144,37 @@ export const CreateAnalyticsAdvancedEditor: FC<CreateAnalyticsFormProps> = (prop
|
|||
)}
|
||||
style={{ maxWidth: '100%' }}
|
||||
>
|
||||
<EuiCodeEditor
|
||||
isReadOnly={isJobCreated}
|
||||
mode={xJsonMode}
|
||||
width="100%"
|
||||
<CodeEditor
|
||||
languageId={'json'}
|
||||
height={500}
|
||||
languageConfiguration={{
|
||||
autoClosingPairs: [
|
||||
{
|
||||
open: '{',
|
||||
close: '}',
|
||||
},
|
||||
],
|
||||
}}
|
||||
value={advancedEditorRawString}
|
||||
onChange={onChange}
|
||||
setOptions={{
|
||||
fontSize: '12px',
|
||||
options={{
|
||||
ariaLabel: i18n.translate(
|
||||
'xpack.ml.dataframe.analytics.create.advancedEditor.codeEditorAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Advanced analytics job editor',
|
||||
}
|
||||
),
|
||||
automaticLayout: true,
|
||||
readOnly: isJobCreated,
|
||||
fontSize: 12,
|
||||
scrollBeyondLastLine: false,
|
||||
quickSuggestions: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'indent',
|
||||
}}
|
||||
theme="textmate"
|
||||
aria-label={i18n.translate(
|
||||
'xpack.ml.dataframe.analytics.create.advancedEditor.codeEditorAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Advanced analytics job editor',
|
||||
}
|
||||
)}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
<EuiSpacer />
|
||||
|
|
|
@ -7,8 +7,9 @@
|
|||
|
||||
import { isEqual } from 'lodash';
|
||||
import React, { memo, FC } from 'react';
|
||||
import { EuiCodeEditor } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { CodeEditor } from '../../../../../../../../../../src/plugins/kibana_react/public';
|
||||
import { isRuntimeMappings } from '../../../../../../../common/util/runtime_field_utils';
|
||||
import { XJsonModeType } from './runtime_mappings';
|
||||
|
||||
|
@ -31,48 +32,54 @@ export const RuntimeMappingsEditor: FC<Props> = memo(
|
|||
advancedRuntimeMappingsConfig,
|
||||
}) => {
|
||||
return (
|
||||
<EuiCodeEditor
|
||||
data-test-subj="mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor"
|
||||
style={{ border: '1px solid #e3e6ef' }}
|
||||
height="250px"
|
||||
width="100%"
|
||||
mode={xJsonMode}
|
||||
value={advancedRuntimeMappingsConfig}
|
||||
onChange={(d: string) => {
|
||||
setAdvancedRuntimeMappingsConfig(d);
|
||||
<div data-test-subj="mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor">
|
||||
<CodeEditor
|
||||
height={250}
|
||||
languageId={'json'}
|
||||
onChange={(d: string) => {
|
||||
setAdvancedRuntimeMappingsConfig(d);
|
||||
|
||||
// Disable the "Apply"-Button if the config hasn't changed.
|
||||
if (advancedEditorRuntimeMappingsLastApplied === d) {
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
return;
|
||||
}
|
||||
// Disable the "Apply"-Button if the config hasn't changed.
|
||||
if (advancedEditorRuntimeMappingsLastApplied === d) {
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Enable Apply button so user can remove previously created runtime field
|
||||
if (d === '') {
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(true);
|
||||
return;
|
||||
}
|
||||
// Enable Apply button so user can remove previously created runtime field
|
||||
if (d === '') {
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to parse the string passed on from the editor.
|
||||
// If parsing fails, the "Apply"-Button will be disabled
|
||||
try {
|
||||
const parsedJson = JSON.parse(convertToJson(d));
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(isRuntimeMappings(parsedJson));
|
||||
} catch (e) {
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
setOptions={{
|
||||
fontSize: '12px',
|
||||
}}
|
||||
theme="textmate"
|
||||
aria-label={i18n.translate(
|
||||
'xpack.ml.dataframe.analytics.createWizard.runtimeMappings.advancedEditorAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Advanced runtime editor',
|
||||
}
|
||||
)}
|
||||
/>
|
||||
// Try to parse the string passed on from the editor.
|
||||
// If parsing fails, the "Apply"-Button will be disabled
|
||||
try {
|
||||
const parsedJson = JSON.parse(convertToJson(d));
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(isRuntimeMappings(parsedJson));
|
||||
} catch (e) {
|
||||
setIsRuntimeMappingsEditorApplyButtonEnabled(false);
|
||||
}
|
||||
}}
|
||||
options={{
|
||||
ariaLabel: i18n.translate(
|
||||
'xpack.ml.dataframe.analytics.createWizard.runtimeMappings.advancedEditorAriaLabel',
|
||||
{
|
||||
defaultMessage: 'Advanced runtime editor',
|
||||
}
|
||||
),
|
||||
automaticLayout: true,
|
||||
fontSize: 12,
|
||||
scrollBeyondLastLine: false,
|
||||
quickSuggestions: true,
|
||||
minimap: {
|
||||
enabled: false,
|
||||
},
|
||||
wordWrap: 'on',
|
||||
wrappingIndent: 'indent',
|
||||
}}
|
||||
value={advancedRuntimeMappingsConfig}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
(prevProps, nextProps) => isEqual(pickProps(prevProps), pickProps(nextProps))
|
||||
|
|
|
@ -7,7 +7,9 @@
|
|||
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import { EuiCodeEditor, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
interface Props {
|
||||
json: object;
|
||||
|
@ -19,14 +21,23 @@ export const ExpandedRowJsonPane: FC<Props> = ({ json, dataTestSubj }) => {
|
|||
<EuiFlexGroup data-test-subj={dataTestSubj}>
|
||||
<EuiFlexItem>
|
||||
<EuiSpacer size="s" />
|
||||
<EuiCodeEditor
|
||||
value={JSON.stringify(json, null, 2)}
|
||||
readOnly={true}
|
||||
mode="json"
|
||||
<EuiCodeBlock
|
||||
aria-label={i18n.translate(
|
||||
'xpack.ml.dataframe.analyticsList.analyticsDetails.expandedRowJsonPane',
|
||||
{
|
||||
defaultMessage: 'JSON of data frame analytics configuration',
|
||||
}
|
||||
)}
|
||||
style={{ width: '100%' }}
|
||||
theme="textmate"
|
||||
language="json"
|
||||
fontSize="s"
|
||||
paddingSize="s"
|
||||
overflowHeight={300}
|
||||
isCopyable
|
||||
data-test-subj={`mlAnalyticsDetailsJsonPreview`}
|
||||
/>
|
||||
>
|
||||
{JSON.stringify(json, null, 2)}
|
||||
</EuiCodeBlock>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}> </EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
|
|
|
@ -277,9 +277,9 @@ export function MachineLearningDataFrameAnalyticsCreationProvider(
|
|||
async assertRuntimeMappingsEditorContent(expectedContent: string[]) {
|
||||
await this.assertRuntimeMappingEditorExists();
|
||||
|
||||
const runtimeMappingsEditorString = await aceEditor.getValue(
|
||||
'mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor'
|
||||
);
|
||||
const wrapper = await testSubjects.find('mlDataFrameAnalyticsAdvancedRuntimeMappingsEditor');
|
||||
const editor = await wrapper.findByCssSelector('.monaco-editor .view-lines');
|
||||
const runtimeMappingsEditorString = await editor.getVisibleText();
|
||||
// Not all lines may be visible in the editor and thus aceEditor may not return all lines.
|
||||
// This means we might not get back valid JSON so we only test against the first few lines
|
||||
// and see if the string matches.
|
||||
|
|
Loading…
Reference in a new issue