[Uptime] Add Kuery Bar by justinkambic · Pull Request #43621 · elastic/kibana

justinkambic · 2019-08-20T21:02:40Z

Summary

Add Kuery Bar.

Understanding this PR

This diff is rather large so I have composed the guide below to help reviewers parse and understand it. A large portion of the added code involves tests, snapshots, or code copied from APM that we will ultimately not be maintaining.

I've also taken the liberty of removing a large amount of code that this PR will make obsolete. Additionally, I've removed some code that is not in use.

Filter group

One critical part of this change that added significant complexity was keeping our existing filtering experience functional. This necessitated the creation of an additional component. Code for fetching filter values has moved from the old search bar component to here.

The way filtering now works is a combination of two criteria.

The Kuery Bar - this is more-or-less unchanged under the hood from the APM version. There were some top-level additions/deletions I made when integrating it.
The Filter Group - These are pre-loaded shortcuts users can employ to filter on things like ID, location, etc. When a user selects a value to filter on, a new entry is added/updated in a map that stores the filter's field name and selected values. Values in the map are or'd at the value level, and and'd at the field level.

Example:

[
  {
    'monitor.id': ['green-0001', 'green-0002']
  },
  {
    'observer.geo.name': ['us-east-1', 'us-west-2']
  }
]

yields a Kuery string like:

'(monitor.id:green-0001 or monitor.id:green-0002) and (observer.geo.name:us-east-1 or observer.geo.name:us-east-2)'

After the filter query is generated, the output of the filter and search are and'd together, an ES DSL is generated, and the resultant string is provided to the server and persisted in a new filters URL parameter.

Kuery Bar

This patch finally adds the KueryBar to Uptime. The eventual goal is for this to be a common component that is shared amongst the various Observability solutions. For this present iteration, we are copying the code from APM. I have added an declaration file for the Typeahead class, and placed some custom code in the main index.tsx file. The KueryBar places its output into the existing search URL parameter.

Server

Previously we had no control over the selection of filters applied on monitor.status, as the output of the buttons was a plaintext string. Since we have more control over the persisted filter logic, we can handle the special case of monitor.status separately; as such the server and GraphQL methods now accept a separate status flag, along with the JSON string to use as part of the Elasticsearch queries.

Testing this PR

From a UI perspective the changes in this PR are localized to the Overview page. We've added the Kuery Bar and a series of filter dropdowns. Testing this PR is fairly straightforward.

Configure Heartbeat to ship Uptime data.
Load this patch, attempt to use the Kuery Bar.
Attempt to use the filter dropdowns.
Use the filters in concert with the Kuery Bar. This means filtering by status or location, along with a monitor ID or URL in the search bar.

Checklist

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

This was checked for cross-browser compatibility, including a check against IE11
Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-08-20T21:02:43Z

Pinging @elastic/uptime

elasticmachine · 2019-08-21T00:10:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-21T21:35:25Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-23T19:24:53Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-26T17:26:30Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-28T05:41:49Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-28T13:41:03Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-28T17:13:43Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-29T21:26:16Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-29T23:05:38Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-30T14:30:45Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-08-30T20:10:18Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-02T04:20:40Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-03T03:37:10Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-10T03:04:45Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-10T03:48:51Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

justinkambic · 2019-09-12T19:44:36Z

@shahzad31 @katrin-freihofner can you let me know if you're able to reproduce issues again? I think all your previous feedback is addressed at this point.

justinkambic · 2019-09-12T19:44:45Z

jenkins test this

elasticmachine · 2019-09-12T20:50:10Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-12T21:44:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

katrin-freihofner · 2019-09-13T12:14:59Z

@justinkambic looks good to me. I could not reproduce any of the issues. Nice work!

elasticmachine · 2019-09-13T19:40:55Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

shahzad31

Issues are resolved and code looks clean now :)

jasonrhodes

@justinkambic looks great to me -- there are a few things that are going to make this not work for infra/logs but we should obviously wait to address those until we build a shared version. This is a great step forward toward that!

justinkambic · 2019-09-16T21:09:25Z

there are a few things that are going to make this not work for infra/logs but we should obviously wait to address those until we build a shared version. This is a great step forward toward that!

@jasonrhodes yeah I'm aware I injected some Uptime-specific logic but like you say, I figure we can refactor/straighten that out in the next phase. Uptime will be better situated to handle that at that point, too!

andrewvc · 2019-09-16T21:40:56Z

Checked out the latest version, looks and works great in my browser!

elasticmachine · 2019-09-16T23:11:57Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* Add saved objects provider, auto-creation of index pattern. * Fix outdated import. * Add KueryBar component to Uptime app. * Extract module helper function to higher scope for greater reuse. * Reduce nesting in URL hook. * Update client usage of previously-moved helper function. * Add export for helper function to helper directory. * Add index pattern adapter to client lib. * Add KueryBar to Overview Page. * Add KueryBar and new filter group. * Move new components to appropriate directory. * Fix overview page import. * Delete status filter helper functions. * Remove from list of recommended fields. * Update domain files to use status filter. * Update GraphQL queries to use status filter. * Update GraphQL endpoint to accept status filter. * Delete obsolete component and associated files. * Add custom filter components. * Delete unneeded code. * Update adapters to accept statusFilter parameter. * Remove obsolete code. * Alphabetize object declaration. * Add index pattern helper function. * Update Overview handling of filters/user search. * Update GraphQL inferred types. * Delete obsolete component. * Update outdated unit test for stringify_url_params. * Add index file to new adapter directory. * Update test framework files to satisfy new typing requirements. * Update test snapshot for useUrlParams. * Update JSDoc comment in pings adapter. * Update pings adapter tests to use new `statusFilter` parameter. * Delete tests and fixtures for obsolete endpoints. * Update outdated fixture. * Update status filter usages for snapshot query tests. * Delete obsolete imports from index file. * Delete obsolete monitor list getter. * Update supported URL params for new param keys. * Remove unused prop reference. * Improve naming in new filter components. * Clean up function body. * Internationalize filter components. * Update internationalization key. * Add test for new helper function. * Extract function to dedicated file, add tests. * Add tests for filter popover. * Move FilterStatusButton to appropriate directory. * Add test for FilterStatusButton. * Add tests for getIndexPattern helper. * Extract helper function to dedicated file. * Add tests to combineFiltersAndUserSearch helper function. * Extract inline JSX to new component and add tests. * Remove obsolete code, update index pattern getter, and add tests. * Add filter clause helper function and tests. * Replace custom filter formatting code with calls to new helper function. * Move filter components to dedicated directory. * Rename filter files. * Delete obsolete snapshot. * Fix broken import in test file. * Update a comment. * Simplify index pattern loading in KueryBar. * Delete unused prop. * Extract toggle handler to external function and write tests. * Delete obsolete int'l labels and reuse existing ones in current code. * Delete remaining unused translation key. * Rename a file. * Handle numeric values for filters. Position KueryBar and FilterGroup on same line. * Remove ID's and URL's from FilterGroup. * Remove unneeded onOutsideClick handler from styled component to silence warning. * Escape colons in filters. * Escape colons in filters. * Fix bug in snapshot code - calculate total after filtering by status. * Add specific message to MonitorList when filters are active. * Introduce missing prop to unit tests. * Delete unused translation keys. * Undo filter-related changes to snapshot adapter function. * Remove unnecessary spread. * Update filter popover to trap focus and improve keyboard experience. * Update broken test snapshots.

* [Uptime] Add Kuery Bar (#43621) * Add saved objects provider, auto-creation of index pattern. * Fix outdated import. * Add KueryBar component to Uptime app. * Extract module helper function to higher scope for greater reuse. * Reduce nesting in URL hook. * Update client usage of previously-moved helper function. * Add export for helper function to helper directory. * Add index pattern adapter to client lib. * Add KueryBar to Overview Page. * Add KueryBar and new filter group. * Move new components to appropriate directory. * Fix overview page import. * Delete status filter helper functions. * Remove from list of recommended fields. * Update domain files to use status filter. * Update GraphQL queries to use status filter. * Update GraphQL endpoint to accept status filter. * Delete obsolete component and associated files. * Add custom filter components. * Delete unneeded code. * Update adapters to accept statusFilter parameter. * Remove obsolete code. * Alphabetize object declaration. * Add index pattern helper function. * Update Overview handling of filters/user search. * Update GraphQL inferred types. * Delete obsolete component. * Update outdated unit test for stringify_url_params. * Add index file to new adapter directory. * Update test framework files to satisfy new typing requirements. * Update test snapshot for useUrlParams. * Update JSDoc comment in pings adapter. * Update pings adapter tests to use new `statusFilter` parameter. * Delete tests and fixtures for obsolete endpoints. * Update outdated fixture. * Update status filter usages for snapshot query tests. * Delete obsolete imports from index file. * Delete obsolete monitor list getter. * Update supported URL params for new param keys. * Remove unused prop reference. * Improve naming in new filter components. * Clean up function body. * Internationalize filter components. * Update internationalization key. * Add test for new helper function. * Extract function to dedicated file, add tests. * Add tests for filter popover. * Move FilterStatusButton to appropriate directory. * Add test for FilterStatusButton. * Add tests for getIndexPattern helper. * Extract helper function to dedicated file. * Add tests to combineFiltersAndUserSearch helper function. * Extract inline JSX to new component and add tests. * Remove obsolete code, update index pattern getter, and add tests. * Add filter clause helper function and tests. * Replace custom filter formatting code with calls to new helper function. * Move filter components to dedicated directory. * Rename filter files. * Delete obsolete snapshot. * Fix broken import in test file. * Update a comment. * Simplify index pattern loading in KueryBar. * Delete unused prop. * Extract toggle handler to external function and write tests. * Delete obsolete int'l labels and reuse existing ones in current code. * Delete remaining unused translation key. * Rename a file. * Handle numeric values for filters. Position KueryBar and FilterGroup on same line. * Remove ID's and URL's from FilterGroup. * Remove unneeded onOutsideClick handler from styled component to silence warning. * Escape colons in filters. * Escape colons in filters. * Fix bug in snapshot code - calculate total after filtering by status. * Add specific message to MonitorList when filters are active. * Introduce missing prop to unit tests. * Delete unused translation keys. * Undo filter-related changes to snapshot adapter function. * Remove unnecessary spread. * Update filter popover to trap focus and improve keyboard experience. * Update broken test snapshots. * Update snap.

justinkambic · 2019-09-19T01:59:09Z

Backported to:
7.x/7.5.0 bf9f9f1
#45859

* Add saved objects provider, auto-creation of index pattern. * Fix outdated import. * Add KueryBar component to Uptime app. * Extract module helper function to higher scope for greater reuse. * Reduce nesting in URL hook. * Update client usage of previously-moved helper function. * Add export for helper function to helper directory. * Add index pattern adapter to client lib. * Add KueryBar to Overview Page. * Add KueryBar and new filter group. * Move new components to appropriate directory. * Fix overview page import. * Delete status filter helper functions. * Remove from list of recommended fields. * Update domain files to use status filter. * Update GraphQL queries to use status filter. * Update GraphQL endpoint to accept status filter. * Delete obsolete component and associated files. * Add custom filter components. * Delete unneeded code. * Update adapters to accept statusFilter parameter. * Remove obsolete code. * Alphabetize object declaration. * Add index pattern helper function. * Update Overview handling of filters/user search. * Update GraphQL inferred types. * Delete obsolete component. * Update outdated unit test for stringify_url_params. * Add index file to new adapter directory. * Update test framework files to satisfy new typing requirements. * Update test snapshot for useUrlParams. * Update JSDoc comment in pings adapter. * Update pings adapter tests to use new `statusFilter` parameter. * Delete tests and fixtures for obsolete endpoints. * Update outdated fixture. * Update status filter usages for snapshot query tests. * Delete obsolete imports from index file. * Delete obsolete monitor list getter. * Update supported URL params for new param keys. * Remove unused prop reference. * Improve naming in new filter components. * Clean up function body. * Internationalize filter components. * Update internationalization key. * Add test for new helper function. * Extract function to dedicated file, add tests. * Add tests for filter popover. * Move FilterStatusButton to appropriate directory. * Add test for FilterStatusButton. * Add tests for getIndexPattern helper. * Extract helper function to dedicated file. * Add tests to combineFiltersAndUserSearch helper function. * Extract inline JSX to new component and add tests. * Remove obsolete code, update index pattern getter, and add tests. * Add filter clause helper function and tests. * Replace custom filter formatting code with calls to new helper function. * Move filter components to dedicated directory. * Rename filter files. * Delete obsolete snapshot. * Fix broken import in test file. * Update a comment. * Simplify index pattern loading in KueryBar. * Delete unused prop. * Extract toggle handler to external function and write tests. * Delete obsolete int'l labels and reuse existing ones in current code. * Delete remaining unused translation key. * Rename a file. * Handle numeric values for filters. Position KueryBar and FilterGroup on same line. * Remove ID's and URL's from FilterGroup. * Remove unneeded onOutsideClick handler from styled component to silence warning. * Escape colons in filters. * Escape colons in filters. * Fix bug in snapshot code - calculate total after filtering by status. * Add specific message to MonitorList when filters are active. * Introduce missing prop to unit tests. * Delete unused translation keys. * Undo filter-related changes to snapshot adapter function. * Remove unnecessary spread. * Update filter popover to trap focus and improve keyboard experience. * Update broken test snapshots.

justinkambic added release_note:enhancement v8.0.0 Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v7.4.0 labels Aug 20, 2019

justinkambic self-assigned this Aug 20, 2019

justinkambic force-pushed the uptime_kuery-bar branch from 9240269 to 90936c8 Compare August 21, 2019 20:38

justinkambic force-pushed the uptime_kuery-bar branch from 90936c8 to 714bb3d Compare August 23, 2019 18:03

justinkambic force-pushed the uptime_kuery-bar branch from 714bb3d to 1866861 Compare August 26, 2019 16:05

justinkambic force-pushed the uptime_kuery-bar branch from 1866861 to e3eab5d Compare August 28, 2019 05:11

justinkambic force-pushed the uptime_kuery-bar branch from 065b371 to def4457 Compare August 29, 2019 19:45

justinkambic force-pushed the uptime_kuery-bar branch from f15c89c to 7ffb1e7 Compare August 30, 2019 18:26

justinkambic added v7.5.0 and removed v7.4.0 labels Aug 30, 2019

justinkambic force-pushed the uptime_kuery-bar branch from 7ffb1e7 to 48f059e Compare September 2, 2019 02:43

justinkambic force-pushed the uptime_kuery-bar branch from 48f059e to 4a38231 Compare September 3, 2019 02:02

andrewvc mentioned this pull request Sep 3, 2019

Replace search bar with Kuery bar elastic/uptime#25

Closed

shahzad31 requested changes Sep 10, 2019

View reviewed changes

Comment thread x-pack/legacy/plugins/uptime/public/components/functional/filter_group/filter_group.tsx Outdated

Comment thread x-pack/legacy/plugins/uptime/public/lib/helper/stringify_kueries.ts

justinkambic added 3 commits September 12, 2019 13:27

Merge branch 'master' into uptime_kuery-bar

148f7e5

Remove unnecessary spread.

d6ebad9

Update filter popover to trap focus and improve keyboard experience.

62787ab

justinkambic added 2 commits September 13, 2019 13:46

Merge branch 'master' into uptime_kuery-bar

f3b9309

Update broken test snapshots.

5254649

shahzad31 approved these changes Sep 13, 2019

View reviewed changes

jasonrhodes approved these changes Sep 16, 2019

View reviewed changes

Merge branch 'master' into uptime_kuery-bar

2c1e177

justinkambic merged commit 4999d09 into elastic:master Sep 17, 2019

justinkambic mentioned this pull request Sep 17, 2019

[7.x] [Uptime] Add Kuery Bar (#43621) #45859

Merged

justinkambic added the backport pending label Sep 17, 2019

justinkambic deleted the uptime_kuery-bar branch September 19, 2019 01:59

justinkambic removed the backport pending label Sep 19, 2019

Conversation

justinkambic commented Aug 20, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Understanding this PR

Filter group

Kuery Bar

Server

Testing this PR

Checklist

For maintainers

Uh oh!

elasticmachine commented Aug 20, 2019

Uh oh!

elasticmachine commented Aug 21, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 21, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 23, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 26, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 28, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 28, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 28, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 29, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 29, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 30, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Aug 30, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 2, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 3, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 10, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 10, 2019

💚 Build Succeeded

Uh oh!

Uh oh!

Uh oh!

justinkambic commented Sep 12, 2019

Uh oh!

justinkambic commented Sep 12, 2019

Uh oh!

elasticmachine commented Sep 12, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Sep 12, 2019

💔 Build Failed

Uh oh!

katrin-freihofner commented Sep 13, 2019

Uh oh!

elasticmachine commented Sep 13, 2019

💚 Build Succeeded

Uh oh!

shahzad31 left a comment

Choose a reason for hiding this comment

Uh oh!

jasonrhodes left a comment

justinkambic commented Aug 20, 2019 •

edited

Loading