-
Notifications
You must be signed in to change notification settings - Fork 8.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Vega] Implement context filter modification #17586
Conversation
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
💚 Build Succeeded |
@nyurik I tested this out a bit. Didn't have time to add a filter to an already existing chart, but it does seem to work great. Filters are applied to the dashboard and update all other visualizations appropriately. My only feedback is around the "apply filter" button after selecting rom a time range. Is there any reason why we don't automatically apply the filter if you've selected a timeframe? That would match all other charts. Can this be done or was it the way the example you provided was configured? |
@alexfrancoeur that's just how I designed that specific graph - I wanted to be able to readjust the selected range -- dragging the sides or the whole thing, before confirming (button click or range doubleclick) that's the range I want. But from Vega's perspective, you can do these commands at any point, even on load - e.g. if the data contains something bad, zoom in right away. |
@Bargs, could you take a look at the filter approach I'm using. (@alexfrancoeur suggested i poke you on this) |
💔 Build Failed |
jenkins, test this |
💚 Build Succeeded |
💔 Build Failed |
💚 Build Succeeded |
💔 Build Failed |
@ppisljar are you sure that patch fixed it? jenkins fails to retest for some reason |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Got only a couple of minor issues, the only thing blocking for me is the proper check in the _parseTimeRange
method, the rest looks good and seems to be working.
@@ -60,8 +60,8 @@ VisTypesRegistryProvider.register((Private) => { | |||
responseHandler: 'none', | |||
options: { | |||
showIndexSelection: false, | |||
showQueryBar: false, | |||
showFilterBar: false, | |||
showQueryBar: true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For what do we actually show the query bar? Since we cannot manipulate the query?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why can't we? My understanding is that this bar allows users to delete and examine the queries when they are developing the vis. I have been using it to test things extensively. I'm not sure about the dashboard impact, but i guess it is similar there.
// in case functions don't match the list above | ||
throw new Error(`${funcName}() is not defined for this graph`); | ||
} | ||
await this[handlerFunc].apply(this, args); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can't we use this[handlerFunc](...args)
directly?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good catch!
// Try to parse as relative dates too (absolute dates will also be accepted) | ||
const startDate = dateMath.parse(start); | ||
const endDate = dateMath.parse(end); | ||
if (!startDate.isValid() || !endDate.isValid()) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
startDate
and endDate
could be undefined
in case the user specified an invalid format. I think we should fix that if
for also checking for that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done. BTW, note that moment({a:1})
is, for some weird reason, is a valid date :(
💔 Build Failed |
elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ``` changed Vega signal to custom func rough draft implementation support timefilter, filter removal use buildQueryFilter wrapper rebase and sync with tooltip func error handling, filters (WIP) console.log to dbg removeFilter manual merge of upstream patch
💔 Build Failed |
sigh, jenkins, please retest |
jenkins retest this |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested with the given spec, and also tested the kibanaSetTimeFilter
with different configuration (Chrome, Linux). Everything seems to work as expected. LGTM.
💚 Build Succeeded |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great addition! 🔥
* [Vega] Implement context filter modification elastic#17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
* [Vega] Implement context filter modification #17210 Testing code (click button) ``` { "$schema": "https://vega.github.io/schema/vega/v3.json", "marks": [ { "name": "myButton", "type": "rect", "encode": { "enter": { "xc": {"signal": "width/2"}, "yc": {"signal": "height/2"}, "width": {"signal": "width*0.8"}, "height": {"signal": "height*0.8"}, "cornerRadius": {"value": 6}, "strokeWidth": {"value": 10} }, "update": { "stroke": {"value": "gray"}, "fill": {"value": "lightgray"} }, "hover": {"fill": {"value": "gray"}} } } ], "signals": [ { "name": "%ADD_FILTER%", "on": [ { "events": "@mybutton:click", "update": "{field: 'SRC', value: 10, operator: 'IS'}" } ] } ] } ```
💔 Build Failed |
Please tell me how to specify meta. |
@acro-yoshioka I don't think it is possible at the moment, please create a new issue for that. CC: @timroes |
Thank you for your comment ! |
Any solution yet? Thank you! |
Implements #17210
API:
kibanaAddFilter
- adds ES query filter to the filter barkibanaRemoveFilter(query, [meta])
- same params as addingkibanaRemoveAllFilters()
kibanaSetTimeFilter(start, end)
sets time range for the dashboard - works with numbers, strings, and dates.Extensive example: https://gist.github.com/nyurik/3c579fb8e81c8a981d4b267ad1767227
Simple testing code (click or shift click to set/unset)
Release Summary: Vega now allows modifying filters and the time range in Kibana, by adding utility functions, that can be called in your signal handlers. Check the PR description for a description of the functions.