Explore: Logging query live preview of matches

A logging query has a selector part and a regexp. The regexp matches are highlighted when results return.
This change adds live preview to matches when modifying the regexp in a search field.

- delegate retrieval of match query to datasource
- datasource returns search expressions to be used to highlight a live preview of matches
- logs row now takes preview highlights
- logs row renders preview highlights with dotted line to distinguish from query run matches (solid line)
- fix react-highlight-words version to ensure custom chunk matcher
- custom chunk matcher can now also take incomplete regexps, eg, `(level` without inifinte looping
- perf: debounce of live preview to 500ms
- perf: only top 100 rows get the live preview
- preview is only supported with one query row (multiple rows semantic makes this tricky: regexp for row n should only filter results for query n)
This commit is contained in:
David Kaltschmidt
2018-12-01 15:26:51 +01:00
parent 34b8c5bb61
commit 6ee7459f22
9 changed files with 109 additions and 43 deletions

View File

@@ -307,6 +307,11 @@
background-color: rgba($typeahead-selected-color, 0.1);
}
.logs-row-match-highlight--preview {
background-color: lighten($typeahead-selected-color, 70%);
border-bottom-style: dotted;
}
.logs-row-level {
background-color: transparent;
margin: 2px 0;