Use EuiTokens for ES field types #57911

cchaos · 2020-02-18T20:50:27Z

EUI 19.0 added EuiToken types that line up with ES field types so that we can use them as a consistent way to render the symbols associated with these field types.

This PR will assume to update the current displays to use EuiToken and if possible, the singular component provided by Kibana: FieldIcon.

FieldIcon extends EuiToken and all of its props. However, it no longer accepts the useColor prop and instead consumers can pass down whatever color they want, including 'gray'. It also uses the scripted flag to make the token fill: 'dark' to differentiate.

Example of new usages in:

Discover

Graph

Lens

Note: The getColorForDataType method no longer returned the correct color and EuiProgress doesn’t currently support all the colors from the token map, so it was removed. @cchaos will follow up with a PR to address the coloring of the field data charts. Right now they will fallback to pink for progress and default for charts.

Maps

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility, including a check against Firefox & ~~IE11~~ IE is broken

For maintainers

This was checked for breaking API changes and was labeled appropriately

# Conflicts: # src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap # src/plugins/kibana_react/public/field_icon/field_icon.tsx

# Conflicts: # x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

# Conflicts: # src/legacy/core_plugins/kibana/public/discover/np_ready/components/table/table_row.tsx # src/legacy/ui/public/directives/field_name/field_name.tsx

snide · 2020-02-18T23:06:02Z

Yell when / if this is ready for review. Did a visual scan and it looks ok. Noticed some tiny things in the code. Also tried merging this into my discover branch and it seems to do OK,

alisonelizabeth · 2020-02-19T17:16:16Z

This is awesome! It would be great to incorporate these icons into the mappings editor at some point. I did a quick audit, and there are a few field types that are available in the mappings editor, but do not have a dedicated icon. Here is the list with a brief description, along with a link to the documentation.

Binary: a binary value as a Base64-encoded string
Completion suggester: provides autocomplete functionality
Dense vector: stores vectors of float values
Flattened: maps an object as a single field
Join: defines parent-child relationships among documents of the same index
Keyword: supports searching for an exact value
Percolator: enables percolator queries
Rank feature: accepts a number that will boost documents in rank_feature queries
Rank features: accepts numeric vectors that will boost documents in rank_feature queries
Search-as-you-type: breaks strings into subfields for search suggestions, and will match terms at any position in the string
Text: supports full-text search by breaking strings into individual, searchable terms
Token Count: accepts string values; these values are analyzed, and the number of tokens in the string are indexed

cchaos · 2020-02-19T17:45:27Z

Thank you @alisonelizabeth !! Some of these other field types are quite complicated and I think it will take some time to come up with a visual mapping for each (or groups of types). For this particular PR, since most of the UI's I'm tackling use the simple ones that already have mappings (otherwise they just show a ?), I'd like to create a separate issue and follow-up PR for the rest of these.

But let me know if there are any in the list that absolutely need to be addressed ASAP and I'll work to incorporate those in here. But we'll definitely get some visual mappings figured out for your implementation in the mappings editor.

alisonelizabeth · 2020-02-19T19:42:21Z

@cchaos That works for me - thanks! I don't think there are any that need to be addressed immediately. We are already tracking this work via #57159.

@cchaos

The method no longer returns the correct color and EuiProgress doesn’t currently support all the colors from the token map. @cchaos will follow up with a PR to address the coloring of the field data charts. Right now they will fallback to pink for progress and default for charts.

kindsun

Maps lgtm! Really nice improvement. Looks great!

code review
tested locally in chrome

flash1293

Graph changes LGTM, also looked briefly through Discover and Lens and everything looks fine for me. Thanks a lot for this!

cchaos · 2020-02-21T16:13:58Z

@elasticmachine merge upstream

kertal

Code LGTM, very nice change!

snide

Couple questions. Looked locally though and seems ok.

x-pack/legacy/plugins/lens/public/indexpattern_datasource/_field_item.scss

snide · 2020-02-21T18:44:29Z

x-pack/legacy/plugins/maps/public/components/single_field_select.js

-      <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
-    </span>
+    <EuiFlexGroup className={contentClassName} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={null}>


Is the null on purpose here?

snide · 2020-02-21T18:46:41Z

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/field_select.js

-      <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
-    </span>
+    <EuiFlexGroup className={contentClassName} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={null}>


These values aren't technically wrong, so I'm just going to allow them.

x-pack/legacy/plugins/lens/public/indexpattern_datasource/_field_item.scss

mattkime

Looks great!

kibanamachine · 2020-02-21T20:57:05Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 9d42fb8

History

💚 Build #28171 succeeded 5f2bbb0
💚 Build #27743 succeeded 51abef4
💔 Build #27725 failed f8e827b
💔 Build #27478 failed 10e6525

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

…_improve-advanced-settings-save * commit '98aa1d2d4f974f72a9a5397b1b91f11509f6fb7a': [SIEM] [Case] Enable case by default. Snake to camel on UI (elastic#57936) [File upload] Update remaining File Upload dependencies for NP migration (elastic#58128) Use EuiTokens for ES field types (elastic#57911) Added UI support for the default action group for Alert Type Model (elastic#57603) force savedObject API consumers to define SO type explicitly (elastic#58022) Update dependency @elastic/charts to ^17.1.1 (elastic#57634)

@cchaos

* [FieldIcon] Refactor to extend EuiToken and props * [Add to FieldIcon] Export props * [Graph] Updated instances of FieldIcon * [Maps] Update FieldIcon instance * [Lens] Update FieldIcon usage * [Discover] Update FieldIcon usage * Remove comment * [Lens] Delete unused files * [Graph] Fix alignments * More cleanup * Fixing snaps * [Lens] Removing method `getColorForDataType` The method no longer returns the correct color and EuiProgress doesn’t currently support all the colors from the token map. @cchaos will follow up with a PR to address the coloring of the field data charts. Right now they will fallback to pink for progress and default for charts. * [Maps] Fixing implementations of FieldIcon * [Graph] Using css utility class instead of custom class * Snap * Fix css to use var

…-out-of-legacy * 'master' of github.com:elastic/kibana: [SIEM] [Case] Enable case by default. Snake to camel on UI (elastic#57936) [File upload] Update remaining File Upload dependencies for NP migration (elastic#58128) Use EuiTokens for ES field types (elastic#57911) Added UI support for the default action group for Alert Type Model (elastic#57603) force savedObject API consumers to define SO type explicitly (elastic#58022) Update dependency @elastic/charts to ^17.1.1 (elastic#57634) [Endpoint] Add a flyout to alert list. (elastic#57926) Make sure index pattern has fields before parsing (elastic#58242) Sanitize workpad before sending to API (elastic#57704) [ML] Transform: Support multi-line JSON notation in advanced editor (elastic#58015) [Endpoint] Refactor Management List Tests (elastic#58148) [kbn/optimizer] include bootstrap cache key in optimizer cache key (elastic#58176) Do not refresh color scale on each lookup (elastic#57792) Updating to @elastic/[email protected] (elastic#54662) Trigger context (elastic#57870) [ML] Transforms: Adds clone feature to transforms list. (elastic#57837) [ML] New Platform server shim: update fields service routes (elastic#58060) [Endpoint] EMT-184: change endpoints to metadata up and down the code base. (elastic#58038)

cchaos added 7 commits February 18, 2020 15:09

[FieldIcon] Refactor to extend EuiToken and props

58ab090

# Conflicts: # src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap # src/plugins/kibana_react/public/field_icon/field_icon.tsx

[Add to FieldIcon] Export props

5a3d595

[Graph] Updated instances of FieldIcon

9b0e856

[Maps] Update FieldIcon instance

c00d1fb

[Lens] Update FieldIcon usage

626b8b0

# Conflicts: # x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx

[Discover] Update FieldIcon usage

8752c1d

# Conflicts: # src/legacy/core_plugins/kibana/public/discover/np_ready/components/table/table_row.tsx # src/legacy/ui/public/directives/field_name/field_name.tsx

Remove comment

10e6525

cchaos mentioned this pull request Feb 19, 2020

[Design] More visual mappings (EuiTokenMap) for specific ES field types #58036

Closed

[Lens] Delete unused files

f3da3a1

cchaos added 7 commits February 19, 2020 14:49

[Graph] Fix alignments

7fa6d90

More cleanup

f75bb81

Fixing snaps

f8e827b

[Maps] Fixing implementations of FieldIcon

c555652

[Graph] Using css utility class instead of custom class

f0e70fa

Snap

51abef4

cchaos added v7.7.0 v8.0.0 release_note:enhancement labels Feb 19, 2020

cchaos marked this pull request as ready for review February 19, 2020 21:38

cchaos requested a review from a team February 19, 2020 21:38

cchaos requested review from a team as code owners February 19, 2020 21:38

cchaos changed the title ~~[WIP] Use EuiTokens for ES field types~~ Use EuiTokens for ES field types Feb 19, 2020

cchaos requested a review from snide February 20, 2020 03:02

kindsun approved these changes Feb 20, 2020

View reviewed changes

kertal self-requested a review February 20, 2020 19:57

flash1293 approved these changes Feb 21, 2020

View reviewed changes

Merge branch 'master' into working/tokens_for_field_types

5f2bbb0

kertal approved these changes Feb 21, 2020

View reviewed changes

snide reviewed Feb 21, 2020

View reviewed changes

x-pack/legacy/plugins/lens/public/indexpattern_datasource/_field_item.scss Outdated Show resolved Hide resolved

Fix css to use var

9d42fb8

cchaos requested a review from snide February 21, 2020 19:12

snide approved these changes Feb 21, 2020

View reviewed changes

mattkime approved these changes Feb 21, 2020

View reviewed changes

cchaos merged commit 5fefb76 into elastic:master Feb 21, 2020

cchaos mentioned this pull request Feb 21, 2020

[7.x] Use EuiTokens for ES field types (#57911) #58293

Merged

cchaos deleted the working/tokens_for_field_types branch February 21, 2020 23:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use EuiTokens for ES field types #57911

Use EuiTokens for ES field types #57911

cchaos commented Feb 18, 2020 •

edited

Loading

snide commented Feb 18, 2020

alisonelizabeth commented Feb 19, 2020

cchaos commented Feb 19, 2020 •

edited

Loading

alisonelizabeth commented Feb 19, 2020

kindsun left a comment

flash1293 left a comment

cchaos commented Feb 21, 2020

kertal left a comment

snide left a comment

snide Feb 21, 2020

snide Feb 21, 2020

cchaos Feb 21, 2020

mattkime left a comment

kibanamachine commented Feb 21, 2020

Use EuiTokens for ES field types #57911

Use EuiTokens for ES field types #57911

Conversation

cchaos commented Feb 18, 2020 • edited Loading

Discover

Graph

Lens

Maps

Checklist

For maintainers

snide commented Feb 18, 2020

alisonelizabeth commented Feb 19, 2020

cchaos commented Feb 19, 2020 • edited Loading

alisonelizabeth commented Feb 19, 2020

kindsun left a comment

Choose a reason for hiding this comment

flash1293 left a comment

Choose a reason for hiding this comment

cchaos commented Feb 21, 2020

kertal left a comment

Choose a reason for hiding this comment

snide left a comment

Choose a reason for hiding this comment

snide Feb 21, 2020

Choose a reason for hiding this comment

snide Feb 21, 2020

Choose a reason for hiding this comment

cchaos Feb 21, 2020

Choose a reason for hiding this comment

mattkime left a comment

Choose a reason for hiding this comment

kibanamachine commented Feb 21, 2020

💚 Build Succeeded

History

cchaos commented Feb 18, 2020 •

edited

Loading

cchaos commented Feb 19, 2020 •

edited

Loading