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