maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Specify widths on table columns to support long field names (#17344) (#17395)

Browse source 
* Specify widths on table columns to support long field names
This commit is contained in:
Jen Huang 2018-03-26 12:08:53 -07:00 committed by GitHub
parent 9f803a6590
commit 1038070430
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 76 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -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",

144
src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap
View file

@ -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>
`; `;

56
src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/indexed_fields_table/components/table/table.js
View file

@ -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> &nbsp;
{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> &nbsp;
{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',
} }
]; ];

4
src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/__tests__/__snapshots__/table.test.js.snap
View file

@ -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",
}, },
] ]
} }

10
src/core_plugins/kibana/public/management/sections/indices/edit_index_pattern/scripted_fields_table/components/table/table.js
View file

@ -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 = {

6
yarn.lock
View file

@ -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"