Specify widths on table columns to support long field names (#17344)
* Specify widths on table columns to support long field names
This commit is contained in:
parent
ac0a496c70
commit
e285627ea6
|
@ -78,7 +78,7 @@
|
|||
"url": "https://github.com/elastic/kibana.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@elastic/eui": "0.0.33",
|
||||
"@elastic/eui": "0.0.34",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/numeral": "2.3.1",
|
||||
"@elastic/ui-ace": "0.2.3",
|
||||
|
|
|
@ -1,84 +1,34 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table should render conflicting type 1`] = `
|
||||
<div
|
||||
data-test-subj="indexedFieldType"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
component="div"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
<span>
|
||||
conflict
|
||||
<span>
|
||||
|
||||
<EuiToolTip
|
||||
content="The type of this field changes across indices. It is unavailable for many analysis functions."
|
||||
position="top"
|
||||
>
|
||||
conflict
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiToolTip
|
||||
content="The type of this field changes across indices. It is unavailable for many analysis functions."
|
||||
position="top"
|
||||
>
|
||||
<EuiIcon
|
||||
color="warning"
|
||||
size="m"
|
||||
type="alert"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
<EuiIcon
|
||||
color="warning"
|
||||
size="m"
|
||||
type="alert"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Table should render normal field name 1`] = `
|
||||
<div
|
||||
data-test-subj="indexedFieldName"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
component="div"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
Elastic
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
<span>
|
||||
Elastic
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Table should render normal type 1`] = `
|
||||
<div
|
||||
data-test-subj="indexedFieldType"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
component="div"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
>
|
||||
string
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
<span>
|
||||
string
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`Table should render normally 1`] = `
|
||||
|
@ -86,13 +36,16 @@ exports[`Table should render normally 1`] = `
|
|||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"data-test-subj": "indexedFieldName",
|
||||
"dataType": "string",
|
||||
"field": "displayName",
|
||||
"name": "Name",
|
||||
"render": [Function],
|
||||
"sortable": true,
|
||||
"width": "38%",
|
||||
},
|
||||
Object {
|
||||
"data-test-subj": "indexedFieldType",
|
||||
"dataType": "string",
|
||||
"field": "type",
|
||||
"name": "Type",
|
||||
|
@ -140,6 +93,7 @@ exports[`Table should render normally 1`] = `
|
|||
},
|
||||
],
|
||||
"name": "",
|
||||
"width": "40px",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
@ -191,38 +145,20 @@ exports[`Table should render the boolean template (true) 1`] = `
|
|||
`;
|
||||
|
||||
exports[`Table should render timestamp field name 1`] = `
|
||||
<div
|
||||
data-test-subj="indexedFieldName"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
component="div"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={false}
|
||||
<span>
|
||||
timestamp
|
||||
<span>
|
||||
|
||||
<EuiToolTip
|
||||
content="This field represents the time that events occurred."
|
||||
position="top"
|
||||
>
|
||||
timestamp
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
component="div"
|
||||
grow={true}
|
||||
>
|
||||
<EuiToolTip
|
||||
content="This field represents the time that events occurred."
|
||||
position="top"
|
||||
>
|
||||
<EuiIcon
|
||||
color="primary"
|
||||
size="m"
|
||||
type="clock"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
<EuiIcon
|
||||
color="primary"
|
||||
size="m"
|
||||
type="clock"
|
||||
/>
|
||||
</EuiToolTip>
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
|
|
@ -2,8 +2,6 @@ import React, { PureComponent } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiIcon,
|
||||
EuiInMemoryTable,
|
||||
EuiToolTip,
|
||||
|
@ -22,39 +20,33 @@ export class Table extends PureComponent {
|
|||
|
||||
renderFieldName(name, isTimeField) {
|
||||
return (
|
||||
<div data-test-subj="indexedFieldName">
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
{name}
|
||||
</EuiFlexItem>
|
||||
{isTimeField ? (
|
||||
<EuiFlexItem>
|
||||
<EuiToolTip content="This field represents the time that events occurred.">
|
||||
<EuiIcon type="clock" color="primary" />
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
) : ''}
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
<span>
|
||||
{name}
|
||||
{isTimeField ? (
|
||||
<span>
|
||||
|
||||
<EuiToolTip content="This field represents the time that events occurred.">
|
||||
<EuiIcon type="clock" color="primary" />
|
||||
</EuiToolTip>
|
||||
</span>
|
||||
) : ''}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
renderFieldType(type, isConflict) {
|
||||
return (
|
||||
<div data-test-subj="indexedFieldType">
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
{type}
|
||||
</EuiFlexItem>
|
||||
{isConflict ? (
|
||||
<EuiFlexItem>
|
||||
<EuiToolTip content="The type of this field changes across indices. It is unavailable for many analysis functions.">
|
||||
<EuiIcon type="alert" color="warning" />
|
||||
</EuiToolTip>
|
||||
</EuiFlexItem>
|
||||
) : ''}
|
||||
</EuiFlexGroup>
|
||||
</div>
|
||||
<span>
|
||||
{type}
|
||||
{isConflict ? (
|
||||
<span>
|
||||
|
||||
<EuiToolTip content="The type of this field changes across indices. It is unavailable for many analysis functions.">
|
||||
<EuiIcon type="alert" color="warning" />
|
||||
</EuiToolTip>
|
||||
</span>
|
||||
) : ''}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -75,6 +67,8 @@ export class Table extends PureComponent {
|
|||
render: (value) => {
|
||||
return this.renderFieldName(value, indexPattern.timeFieldName === value);
|
||||
},
|
||||
width: '38%',
|
||||
'data-test-subj': 'indexedFieldName',
|
||||
},
|
||||
{
|
||||
field: 'type',
|
||||
|
@ -84,6 +78,7 @@ export class Table extends PureComponent {
|
|||
render: (value) => {
|
||||
return this.renderFieldType(value, value === 'conflict');
|
||||
},
|
||||
'data-test-subj': 'indexedFieldType',
|
||||
},
|
||||
{
|
||||
field: 'format',
|
||||
|
@ -126,6 +121,7 @@ export class Table extends PureComponent {
|
|||
type: 'icon',
|
||||
},
|
||||
],
|
||||
width: '40px',
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
@ -10,13 +10,14 @@ exports[`Table should render normally 1`] = `
|
|||
"field": "displayName",
|
||||
"name": "Name",
|
||||
"sortable": true,
|
||||
"width": "38%",
|
||||
},
|
||||
Object {
|
||||
"data-test-subj": "scriptedFieldLang",
|
||||
"dataType": "string",
|
||||
"description": "Language used for the field",
|
||||
"field": "lang",
|
||||
"name": "Lang",
|
||||
"render": [Function],
|
||||
"sortable": true,
|
||||
},
|
||||
Object {
|
||||
|
@ -50,6 +51,7 @@ exports[`Table should render normally 1`] = `
|
|||
},
|
||||
],
|
||||
"name": "",
|
||||
"width": "40px",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
@ -38,19 +38,14 @@ export class Table extends PureComponent {
|
|||
description: `Name of the field`,
|
||||
dataType: 'string',
|
||||
sortable: true,
|
||||
width: '38%',
|
||||
}, {
|
||||
field: 'lang',
|
||||
name: 'Lang',
|
||||
description: `Language used for the field`,
|
||||
dataType: 'string',
|
||||
sortable: true,
|
||||
render: value => {
|
||||
return (
|
||||
<span data-test-subj="scriptedFieldLang">
|
||||
{value}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
'data-test-subj': 'scriptedFieldLang',
|
||||
}, {
|
||||
field: 'script',
|
||||
name: 'Script',
|
||||
|
@ -77,6 +72,7 @@ export class Table extends PureComponent {
|
|||
color: 'danger',
|
||||
onClick: deleteField,
|
||||
}],
|
||||
width: '40px',
|
||||
}];
|
||||
|
||||
const pagination = {
|
||||
|
|
|
@ -87,9 +87,9 @@
|
|||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@elastic/eui@0.0.33":
|
||||
version "0.0.33"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.33.tgz#de30a9301d48644a94e3cec02dd77332a16cd2a9"
|
||||
"@elastic/eui@0.0.34":
|
||||
version "0.0.34"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.34.tgz#75266fb39975903d842a7c877db27e1f4ea56a71"
|
||||
dependencies:
|
||||
brace "^0.10.0"
|
||||
classnames "^2.2.5"
|
||||
|
@ -11183,6 +11183,9 @@ to-object-path@^0.3.0:
|
|||
to-regex-range@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
|
||||
dependencies:
|
||||
is-number "^3.0.0"
|
||||
repeat-string "^1.6.1"
|
||||
|
||||
to-regex@^3.0.1:
|
||||
version "3.0.2"
|
||||
|
|
Loading…
Reference in a new issue