Skip to content

[Graph] Settings EUI-ification#44587

Merged
flash1293 merged 115 commits intoelastic:masterfrom
flash1293:graph/settings
Sep 13, 2019
Merged

[Graph] Settings EUI-ification#44587
flash1293 merged 115 commits intoelastic:masterfrom
flash1293:graph/settings

Conversation

@flash1293
Copy link
Copy Markdown
Contributor

@flash1293 flash1293 commented Sep 2, 2019

Summary

This PR moves the "Advanced settings", "Blacklist" and "Drill-downs" menus into an EUI flyout.
The inspect view is not part of this because it will be rewritten to use the standard "Inspect panel" from other apps instead.

It also fixes #18027 by adding a KQL encoder for drilldown URLs and fixing the default configured drilldown.

Various supplemental files have been moved to typescript in the process.

Advanced settings

before
Screenshot 2019-09-02 at 08 54 03

after
Screenshot 2019-09-06 at 10 31 36

Blacklist

before
Screenshot 2019-09-02 at 08 54 15

after
Screenshot 2019-09-06 at 10 31 41

Drill-downs

before
Screenshot 2019-09-02 at 08 54 08

after list
Screenshot 2019-09-06 at 10 51 31

after form
Screenshot 2019-09-06 at 10 51 37

when a auto-templatable URL is pasted
Screenshot 2019-09-06 at 10 52 10

Initial text

ping @cchaos this PR is not ready yet from a technical standpoint but it's far enough to talk about how these menus should look like.

Currently the flyout opens with a click on the "Settings" menu button, initially showing the advanced settings form.

Maybe we could move the individual tabs of the flyout into separate flyouts to save a click when going into blacklist or drill-downs, but it might make the menu to busy, not sure about that.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

For maintainers

@flash1293 flash1293 requested a review from cchaos September 11, 2019 08:47
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Copy link
Copy Markdown
Member

@kertal kertal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM 👨‍🎨. just minor remarks. There's one thing to investigate. After setting the Sample Size to 100. I clicked on the magnifier to redo the search, but the sample size didn't change (2000). Tested in Chrome

*
* @returns A lookup function taking an item of the list supplied to the
* hook and returning the id for the given item.
*/
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice!

/**
* This is a helper to tie state updates that happen somewhere else back to an angular scope.
* It is roughly comparable to `reactDirective`, but does not have to be used from within a
* template.
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very smart!

<EuiFieldNumber
fullWidth
min={1}
step={1}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes sense to define a max , although I doubt somebody is a stupid as me like me, setting the max docs to a few billons or more
Bildschirmfoto 2019-09-12 um 15 00 41
would lead to a 500. There a some other numeric fields on this tab where it might make sense to define max.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There shouldn't be a theoretical limit - Maybe you chose a field that contains multiple values in a single document?

This must be a single-term field or searches will be rejected with an error

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When you type in a number that's out of range of int (>2147483647 says elasticsearch) you get an Exception

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@flash1293
Copy link
Copy Markdown
Contributor Author

@kertal Thanks for your review. Very good catch with the sample size - changed settings weren't propagated correctly if the Graph is already initialized. This should be fixed now, could you check again?

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@flash1293
Copy link
Copy Markdown
Contributor Author

Jenkins, test this

@kertal kertal self-requested a review September 12, 2019 17:02
Copy link
Copy Markdown
Member

@kertal kertal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM, tested changes propagation, works correctly in Chrome now :)

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Copy link
Copy Markdown
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, just one suggestion for the tabs

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@flash1293 flash1293 merged commit 6763836 into elastic:master Sep 13, 2019
@flash1293 flash1293 deleted the graph/settings branch September 13, 2019 13:31
flash1293 added a commit to flash1293/kibana that referenced this pull request Sep 13, 2019
* create graph listing page

* clean up app folder

* remove inline loading menu

* also add badge to workspace route

* fix tests

* fix graph spaces functional test

* generate documentation for new breadcrumb property

* fix test subject names

* remove unused translations

* start implementing save modal flow for Graph

* fix spaces functional test

* wip save modal

* wip save modal

* add and style save modal

* add placeholder to description field

* disable dirty check on breadcrumb navigation and fix delete function

* reactify most of settings

* improve onClick typing on breadcrumb

* fix newline error and use new types in dashboard app controller

* EUIify drilldown

* EUIify drilldown

* fix translation errors

* fix i18n translation for real

* fix icon and work on autoreplace template logic

* use switch instead of checkbox

* code review

* fix i18n phrases

* remove fragments

* add KQL encoder to be able to drill down to discover

* fix flyout overflow issue

* delete old settings logic

* remove obsolete files

* fix tests

* fix i18n phrase typo

* fix most translations

* start implementing review comments

* continue implementing review

* continue cleanup of settings forms

* remove unnecessary max-width and add commentary

* move to async syntax

* clean up implementation

* use description instead of title

* work on settings form

* fix snapshot

* fix drilldown list

* add tests for use_list_keys

* rename stuff and add documentation

* fix translatiojns

* fix some rename references

* start typing saving and loading

* typing persistence stuff

* adress review comments and set width for all save modals

* type serializing logic

* fix bug and improve typing

* fix classname

* wip

* wip

* add notes

* style blacklist group

* remove merge marker

* improve icon rendering

* wip

* start refactoring

* remove js implementation

* remove js implementation

* remove duplicate file

* add some tests

* Design cleanup

* Fix SASS files

* revert style fixes in app.js

* implement todos

* fix errors and prematurely enabling inspect panel

* deselect icon after clicking again

* fix types

* make icon list accessible

* clean up and add some more tests

* improve number handling

* fix deserialization

* polishing drilldown-ui

* rename types

* clean up imports

* fix tests

* add handling for canEditDrillDowns setting

* propagate changes to workspace client

* align tabs with other elements
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Feature:Graph Graph application feature release_note:enhancement Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v7.5.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Graph] Raw Documents drilldown broken

5 participants