[ML] Replacing EuiSuperSelect in file data visualizer (#31128) (#31235)

* [ML] replacing EuiSuperSelect in file data visualizer

* fixed format

* updating tests
This commit is contained in:
James Gowdy 2019-02-15 10:35:05 +00:00 committed by GitHub
parent 6a380f3abf
commit edd42619ed
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 183 additions and 426 deletions

View file

@ -36,39 +36,36 @@ exports[`Overrides render overrides 1`] = `
/>
}
>
<EuiSuperSelect
<EuiComboBox
compressed={false}
fullWidth={false}
hasDividers={false}
isClearable={false}
onChange={[Function]}
options={
Array [
Object {
"inputDisplay": <span>
delimited
</span>,
"value": "delimited",
"label": "delimited",
},
Object {
"inputDisplay": <span>
ndjson
</span>,
"value": "ndjson",
"label": "ndjson",
},
Object {
"inputDisplay": <span>
semi_structured_text
</span>,
"value": "semi_structured_text",
},
Object {
"inputDisplay": <span>
xml
</span>,
"value": "xml",
"label": "semi_structured_text",
},
]
}
selectedOptions={
Array [
Object {
"label": "",
},
]
}
singleSelection={
Object {
"asPlainText": true,
}
}
/>
</EuiFormRow>
<EuiFormRow
@ -83,573 +80,306 @@ exports[`Overrides render overrides 1`] = `
/>
}
>
<EuiSuperSelect
<EuiComboBox
compressed={false}
fullWidth={false}
hasDividers={false}
isClearable={false}
onChange={[Function]}
options={
Array [
Object {
"inputDisplay": <span>
dd/MMM/yyyy:HH:mm:ss XX
</span>,
"value": "dd/MMM/yyyy:HH:mm:ss XX",
"label": "dd/MMM/yyyy:HH:mm:ss XX",
},
Object {
"inputDisplay": <span>
EEE MMM dd HH:mm zzz yyyy
</span>,
"value": "EEE MMM dd HH:mm zzz yyyy",
"label": "EEE MMM dd HH:mm zzz yyyy",
},
Object {
"inputDisplay": <span>
EEE MMM dd HH:mm:ss yyyy
</span>,
"value": "EEE MMM dd HH:mm:ss yyyy",
"label": "EEE MMM dd HH:mm:ss yyyy",
},
Object {
"inputDisplay": <span>
EEE MMM dd HH:mm:ss zzz yyyy
</span>,
"value": "EEE MMM dd HH:mm:ss zzz yyyy",
"label": "EEE MMM dd HH:mm:ss zzz yyyy",
},
Object {
"inputDisplay": <span>
EEE MMM dd yyyy HH:mm zzz
</span>,
"value": "EEE MMM dd yyyy HH:mm zzz",
"label": "EEE MMM dd yyyy HH:mm zzz",
},
Object {
"inputDisplay": <span>
EEE MMM dd yyyy HH:mm:ss zzz
</span>,
"value": "EEE MMM dd yyyy HH:mm:ss zzz",
"label": "EEE MMM dd yyyy HH:mm:ss zzz",
},
Object {
"inputDisplay": <span>
EEE, dd MMM yyyy HH:mm XX
</span>,
"value": "EEE, dd MMM yyyy HH:mm XX",
"label": "EEE, dd MMM yyyy HH:mm XX",
},
Object {
"inputDisplay": <span>
EEE, dd MMM yyyy HH:mm XXX
</span>,
"value": "EEE, dd MMM yyyy HH:mm XXX",
"label": "EEE, dd MMM yyyy HH:mm XXX",
},
Object {
"inputDisplay": <span>
EEE, dd MMM yyyy HH:mm:ss XX
</span>,
"value": "EEE, dd MMM yyyy HH:mm:ss XX",
"label": "EEE, dd MMM yyyy HH:mm:ss XX",
},
Object {
"inputDisplay": <span>
EEE, dd MMM yyyy HH:mm:ss XXX
</span>,
"value": "EEE, dd MMM yyyy HH:mm:ss XXX",
"label": "EEE, dd MMM yyyy HH:mm:ss XXX",
},
Object {
"inputDisplay": <span>
ISO8601
</span>,
"value": "ISO8601",
"label": "ISO8601",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss
</span>,
"value": "MMM dd HH:mm:ss",
"label": "MMM dd HH:mm:ss",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss,SSS
</span>,
"value": "MMM dd HH:mm:ss,SSS",
"label": "MMM dd HH:mm:ss,SSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss,SSSSSS
</span>,
"value": "MMM dd HH:mm:ss,SSSSSS",
"label": "MMM dd HH:mm:ss,SSSSSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss,SSSSSSSSS
</span>,
"value": "MMM dd HH:mm:ss,SSSSSSSSS",
"label": "MMM dd HH:mm:ss,SSSSSSSSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss.SSS
</span>,
"value": "MMM dd HH:mm:ss.SSS",
"label": "MMM dd HH:mm:ss.SSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss.SSSSSS
</span>,
"value": "MMM dd HH:mm:ss.SSSSSS",
"label": "MMM dd HH:mm:ss.SSSSSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss.SSSSSSSSS
</span>,
"value": "MMM dd HH:mm:ss.SSSSSSSSS",
"label": "MMM dd HH:mm:ss.SSSSSSSSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss:SSS
</span>,
"value": "MMM dd HH:mm:ss:SSS",
"label": "MMM dd HH:mm:ss:SSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss:SSSSSS
</span>,
"value": "MMM dd HH:mm:ss:SSSSSS",
"label": "MMM dd HH:mm:ss:SSSSSS",
},
Object {
"inputDisplay": <span>
MMM dd HH:mm:ss:SSSSSSSSS
</span>,
"value": "MMM dd HH:mm:ss:SSSSSSSSS",
"label": "MMM dd HH:mm:ss:SSSSSSSSS",
},
Object {
"inputDisplay": <span>
MMM dd yyyy HH:mm:ss
</span>,
"value": "MMM dd yyyy HH:mm:ss",
"label": "MMM dd yyyy HH:mm:ss",
},
Object {
"inputDisplay": <span>
MMM dd, yyyy h:mm:ss a
</span>,
"value": "MMM dd, yyyy h:mm:ss a",
"label": "MMM dd, yyyy h:mm:ss a",
},
Object {
"inputDisplay": <span>
TAI64N
</span>,
"value": "TAI64N",
"label": "TAI64N",
},
Object {
"inputDisplay": <span>
UNIX
</span>,
"value": "UNIX",
"label": "UNIX",
},
Object {
"inputDisplay": <span>
UNIX_MS
</span>,
"value": "UNIX_MS",
"label": "UNIX_MS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss
</span>,
"value": "yyyy-MM-dd HH:mm:ss",
"label": "yyyy-MM-dd HH:mm:ss",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSS",
"label": "yyyy-MM-dd HH:mm:ss,SSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSS",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSSSSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSSSSS",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSS",
"label": "yyyy-MM-dd HH:mm:ss.SSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSS",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSSSSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSSSSS",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSS",
"label": "yyyy-MM-dd HH:mm:ss:SSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSS",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSSSSS
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSSSSS",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSS XX",
"label": "yyyy-MM-dd HH:mm:ss,SSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSS XX",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSSSSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSSSSS XX",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSSSSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSS XX",
"label": "yyyy-MM-dd HH:mm:ss.SSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSS XX",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSSSSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSSSSS XX",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSSSSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSS XX",
"label": "yyyy-MM-dd HH:mm:ss:SSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSS XX",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSSSSS XX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSSSSS XX",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSSSSS XX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSXX",
"label": "yyyy-MM-dd HH:mm:ss,SSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSSXX",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSSSSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSSSSSXX",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSXX",
"label": "yyyy-MM-dd HH:mm:ss.SSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSSXX",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSSSSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSSSSSXX",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSXX",
"label": "yyyy-MM-dd HH:mm:ss:SSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSSXX",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSSSSSXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSSSSSXX",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSXXX",
"label": "yyyy-MM-dd HH:mm:ss,SSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSSXXX",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss,SSSSSSSSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss,SSSSSSSSSXXX",
"label": "yyyy-MM-dd HH:mm:ss,SSSSSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSXXX",
"label": "yyyy-MM-dd HH:mm:ss.SSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSSXXX",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss.SSSSSSSSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss.SSSSSSSSSXXX",
"label": "yyyy-MM-dd HH:mm:ss.SSSSSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSXXX",
"label": "yyyy-MM-dd HH:mm:ss:SSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSSXXX",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ss:SSSSSSSSSXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ss:SSSSSSSSSXXX",
"label": "yyyy-MM-dd HH:mm:ss:SSSSSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSS",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSSSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSSSS",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSS",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSS",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSSSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSSSS",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSS",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSS",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSSSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSSSS",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSS
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSS",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSS",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSSSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSSSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSSSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSSXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSSXX",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSSXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSSSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss,SSSSSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSSSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss.SSSSSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSSSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSSXXX
</span>,
"value": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSSXXX",
"label": "yyyy-MM-dd'T'HH:mm:ss:SSSSSSSSSXXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ssXX
</span>,
"value": "yyyy-MM-dd HH:mm:ssXX",
"label": "yyyy-MM-dd HH:mm:ssXX",
},
Object {
"inputDisplay": <span>
yyyy-MM-dd HH:mm:ssXXX
</span>,
"value": "yyyy-MM-dd HH:mm:ssXXX",
"label": "yyyy-MM-dd HH:mm:ssXXX",
},
Object {
"inputDisplay": <span>
yyyyMMddHHmmss
</span>,
"value": "yyyyMMddHHmmss",
"label": "yyyyMMddHHmmss",
},
]
}
selectedOptions={
Array [
Object {
"label": "",
},
]
}
singleSelection={
Object {
"asPlainText": true,
}
}
/>
</EuiFormRow>
<EuiFormRow
@ -664,12 +394,24 @@ exports[`Overrides render overrides 1`] = `
/>
}
>
<EuiSuperSelect
<EuiComboBox
compressed={false}
fullWidth={false}
hasDividers={false}
isClearable={false}
onChange={[Function]}
options={Array []}
selectedOptions={
Array [
Object {
"label": "",
},
]
}
singleSelection={
Object {
"asPlainText": true,
}
}
/>
</EuiFormRow>
</EuiForm>

View file

@ -9,7 +9,7 @@ export const FORMAT_OPTIONS = [
'delimited',
'ndjson',
'semi_structured_text',
'xml',
// 'xml',
];
export const TIMESTAMP_OPTIONS = [

View file

@ -5,7 +5,6 @@
*/
import React from 'react';
import {
FORMAT_OPTIONS,
TIMESTAMP_OPTIONS,
@ -15,12 +14,7 @@ import {
} from './option_lists';
function getOptions(list) {
return list.map(o => (
{
value: o,
inputDisplay: (<span>{o}</span>),
}
));
return list.map(o => ({ label: o }));
}
export function getFormatOptions() {

View file

@ -15,7 +15,7 @@ import {
EuiForm,
EuiFormRow,
EuiFieldText,
EuiSuperSelect,
EuiComboBox,
EuiCheckbox,
EuiSpacer,
EuiTitle,
@ -129,19 +129,23 @@ export class Overrides extends Component {
this.setState({ overrides });
}
onFormatChange = (format) => {
onFormatChange = ([opt]) => {
const format = opt ? opt.label : '';
this.setOverride({ format });
}
onTimestampFormatChange = (timestampFormat) => {
onTimestampFormatChange = ([opt]) => {
const timestampFormat = opt ? opt.label : '';
this.setOverride({ timestampFormat });
}
onTimestampFieldChange = (timestampField) => {
onTimestampFieldChange = ([opt]) => {
const timestampField = opt ? opt.label : '';
this.setOverride({ timestampField });
}
onDelimiterChange = (delimiter) => {
onDelimiterChange = ([opt]) => {
const delimiter = opt ? opt.label : '';
this.setOverride({ delimiter });
}
@ -149,7 +153,8 @@ export class Overrides extends Component {
this.setState({ customDelimiter: e.target.value });
}
onQuoteChange = (quote) => {
onQuoteChange = ([opt]) => {
const quote = opt ? opt.label : '';
this.setOverride({ quote });
}
@ -161,7 +166,8 @@ export class Overrides extends Component {
this.setOverride({ shouldTrimFields: e.target.checked });
}
onCharsetChange = (charset) => {
onCharsetChange = ([opt]) => {
const charset = opt ? opt.label : '';
this.setOverride({ charset });
}
@ -212,7 +218,7 @@ export class Overrides extends Component {
linesToSample,
} = overrides;
const fieldOptions = fields.map(f => ({ value: f, inputDisplay: f }));
const fieldOptions = fields.map(f => ({ label: f }));
return (
@ -242,10 +248,12 @@ export class Overrides extends Component {
/>
}
>
<EuiSuperSelect
<EuiComboBox
options={formatOptions}
valueOfSelected={format}
selectedOptions={selectedOption(format)}
onChange={this.onFormatChange}
singleSelection={{ asPlainText: true }}
isClearable={false}
/>
</EuiFormRow>
{
@ -259,10 +267,12 @@ export class Overrides extends Component {
/>
}
>
<EuiSuperSelect
<EuiComboBox
options={delimiterOptions}
valueOfSelected={delimiter}
selectedOptions={selectedOption(delimiter)}
onChange={this.onDelimiterChange}
singleSelection={{ asPlainText: true }}
isClearable={false}
/>
</EuiFormRow>
{
@ -290,10 +300,12 @@ export class Overrides extends Component {
/>
}
>
<EuiSuperSelect
<EuiComboBox
options={quoteOptions}
valueOfSelected={quote}
selectedOptions={selectedOption(quote)}
onChange={this.onQuoteChange}
singleSelection={{ asPlainText: true }}
isClearable={false}
/>
</EuiFormRow>
@ -355,10 +367,12 @@ export class Overrides extends Component {
/>
}
>
<EuiSuperSelect
<EuiComboBox
options={timestampFormatOptions}
valueOfSelected={timestampFormat}
selectedOptions={selectedOption(timestampFormat)}
onChange={this.onTimestampFormatChange}
singleSelection={{ asPlainText: true }}
isClearable={false}
/>
</EuiFormRow>
@ -370,20 +384,23 @@ export class Overrides extends Component {
/>
}
>
<EuiSuperSelect
<EuiComboBox
options={fieldOptions}
valueOfSelected={timestampField}
selectedOptions={selectedOption(timestampField)}
onChange={this.onTimestampFieldChange}
singleSelection={{ asPlainText: true }}
isClearable={false}
/>
</EuiFormRow>
{/* <EuiFormRow
label="Charset"
>
<EuiSuperSelect
<EuiComboBox
options={charsetOptions}
valueOfSelected={charset}
onChange={this.onCharsetChange}
selectedOptions={selectedOption(charset)}
singleSelection={{ asPlainText: true }}
isClearable={false}
/>
</EuiFormRow> */}
{
@ -422,6 +439,10 @@ export class Overrides extends Component {
}
}
function selectedOption(opt) {
return [{ label: (opt || '') }];
}
// Some delimiter characters cannot be used as items in select list.
// so show a textual description of the character instead.
function convertDelimiter(d) {

View file

@ -46,7 +46,7 @@ describe('Overrides', () => {
expect(component.state('overrides').format).toEqual(FORMAT_1);
component.instance().onFormatChange(FORMAT_2);
component.instance().onFormatChange([{ label: FORMAT_2 }]);
expect(component.state('overrides').format).toEqual(FORMAT_2);