Explore: Display log lines context #17097

dprokop · 2019-05-15T15:04:11Z

This PR introduces a possibility to display Loki log line context, meaning that it when clicked on "Show context" in log row, additional log rows for a given row's log stream will be fetched and diaspayed.

react-use

In this PR react-use lib is introduced for common react hooks to be available in Grafana's codebase. Main reason for that is usage of useAsync in LogRowContextProvider to make fetching context and additional context rows easy. Instead of using React's class component lifecycle, hooks take responsibility for managing the context state and delivering it to log context components.

TODO:

Implement fetching additional context
Fix ClickOutsideWrapper
Improve UI

davkal · 2019-05-15T15:19:57Z

Looks very promising 🚀

Here is some feedback on what's already there:

the area of the context lines looks too similar to the rest, I think it needs more visual differentiation
the after context included the pivot line
the content of the after context keeps changing order, see the times in this screenshot:

Otherwise great stuff!

package.json

packages/grafana-ui/src/types/datasource.ts

davkal · 2019-05-16T13:09:43Z

Looking really good now. More feedback:

the outside click to close works well
the pivot line still gets repeated in the after context (see pic)
i'd add a mini border radius to the context containers
the after context container shadow overlaps with the pivot row (see pic)
i'd differentiate the "Showing X rows" from "Load Y more" a bit more, e.g., make the status pale, and keep the action vibrant.

Stretch goals:

loading more should only load more for the given direction
add a mini search bar next to Showing and Load, to quickly filter lines by a term

This feature is really shaping up 🚀

…l row being duplicated in context

davkal · 2019-05-17T10:26:07Z

Last UX item: Some context queries return with an error (or no results). In my case it was an error 502, but there was nothing shown. Would be great to get 0-results and error feedback.
Notice how there are no context containers:

I think that's it for this PR.

Follow-up work:

Small search field in the context containers to quickly filter for a keyword
Been playing with this now a bit and one thing for highly aggregated log streams (streams of lots of sub stream), the context query results can be really minimal, say 1-4 lines. In that case it'd be great if I could A) see the label set used for the context query, and B) remove individual labels so that fewer streams are filtered out.

davkal

Works really well. Minor nits here and there, but otherwise good to merge.

public/app/features/explore/LogRow.tsx

public/app/features/explore/LogRowContext.tsx

public/app/features/explore/state/actionTypes.ts

torkelo · 2019-05-20T06:50:31Z

packages/grafana-ui/src/types/datasource.ts

+  /**
+   * Retrieve context for a given log row
+   */
+  getLogRowContext?(row: any, limit?: number): Promise<DataQueryResponse>;


is a row completely untyped? don't we need the LogsModel and the row model is LogRowModel (and could be good to have both).

Agree about LogRowModel. Not necessarily abut LogsModel - why do you think it could be helpful?

I am not 100% sure a single row can be enough information to construct a query for the context. You might need labels and the original query & response to create the context query.

torkelo · 2019-05-20T06:51:47Z

packages/grafana-ui/src/types/datasource.ts

@@ -282,6 +287,10 @@ export interface DataQueryResponse {
  data: DataQueryResponseData[];
 }

+export interface LogRowContextQueryResponse {
+  data: Array<Array<string | DataQueryError>>;


this response type looks very strange, should this not be SeriesData?

* 'master' of github.com:grafana/grafana: LDAP: add tests for initialBind (#17132) Explore: Adds Live option for supported datasources (#17062) alerting: fix a bunch of lint issues. (#17128) chore: mocks plugin loader for DataSourceSettingsPage tests (#17157) Release: Improved cherry pick task (#17087) Explore: Fix selection/copy of log lines (#17121) Explore: Fix empty space in toolbar on smaller devices (#17110) Explore: display log line context (#17097) Plugins: expose rxjs matching 6.4.0 (#17148) Chore: fix codespell issue with build (#17144)

yandingkang · 2022-01-20T09:11:06Z

@dprokop Is it possible to display more than 10 log rows when I click "Load 10 more" ?

dprokop added 6 commits May 14, 2019 20:15

WIP

b4fdfdd

Extend DataSourceAPI to enable log row context retrieval

a86b177

Add react-use package

f568115

Display log row context in UI

4472857

Cleanup first iteration

629c2dd

Merge branch 'master' into explore/logs-context

6008900

dprokop requested a review from davkal May 15, 2019 15:04

Remove comments

eed471b

dprokop added area/explore datasource/Loki labels May 15, 2019

dprokop added this to the 6.3 milestone May 15, 2019

dprokop self-assigned this May 15, 2019

Prettier

b0d7659

davkal reviewed May 15, 2019

View reviewed changes

package.json Show resolved Hide resolved

torkelo reviewed May 15, 2019

View reviewed changes

packages/grafana-ui/src/types/datasource.ts Outdated Show resolved Hide resolved

dprokop added 3 commits May 16, 2019 09:50

Merge branch 'master' into explore/logs-context

0094f10

Don't render log row context, if context is empty

a8d78b2

Make Loki datasource return "after" log context in correct order

5b03fec

This comment has been minimized.

Sign in to view

Improve UI and enable loading additional rows

279c7ca

dprokop added 2 commits May 16, 2019 16:15

Don't show Load more context links when there are no more new results

ef4bc35

Minor style updates

56a5fe3

This comment has been minimized.

Sign in to view

dprokop added 4 commits May 17, 2019 09:20

Make the build pass by loosening typing

f89245b

Update getLogRowContext to return DataQueryResponse

0342bd5

Use DataQueryResponse in log row context provider, filter out origina…

579759a

…l row being duplicated in context

Merge branch 'master' into explore/logs-context

ec740a6

dprokop marked this pull request as ready for review May 17, 2019 10:08

dprokop added 2 commits May 17, 2019 14:49

Simple and hacky error handling for Loki context queries

bb19779

Remove comment

be46ea0

davkal approved these changes May 17, 2019

View reviewed changes

dprokop added 2 commits May 19, 2019 17:09

Minor tweaks

177e858

Merge branch 'master' into explore/logs-context

5452549

dprokop merged commit 12e0616 into master May 20, 2019

torkelo reviewed May 20, 2019

View reviewed changes

dprokop deleted the explore/logs-context branch May 20, 2019 07:02

marefr mentioned this pull request May 20, 2019

Explore: context for loki log lines #15140

Closed

marefr added the add to changelog label May 20, 2019

marefr changed the title ~~Explore: display log line context~~ Explore: Display log lines context May 20, 2019

This was referenced May 21, 2019

Explore: Update the way Loki retrieve log context #17204

Merged

Explore: improvements to Loki log row context #17205

Closed

benmarsden mentioned this pull request Nov 4, 2019

Log Panel: Add Show context feature #20166

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Explore: Display log lines context #17097

Explore: Display log lines context #17097

dprokop commented May 15, 2019 •

edited

Loading

davkal commented May 15, 2019

This comment has been minimized.

davkal commented May 16, 2019 •

edited

Loading

This comment has been minimized.

davkal commented May 17, 2019

davkal left a comment

torkelo May 20, 2019

dprokop May 20, 2019 •

edited

Loading

torkelo May 20, 2019 •

edited

Loading

torkelo May 20, 2019

yandingkang commented Jan 20, 2022

Explore: Display log lines context #17097

Explore: Display log lines context #17097

Conversation

dprokop commented May 15, 2019 • edited Loading

react-use

davkal commented May 15, 2019

This comment has been minimized.

davkal commented May 16, 2019 • edited Loading

This comment has been minimized.

davkal commented May 17, 2019

davkal left a comment

Choose a reason for hiding this comment

torkelo May 20, 2019

Choose a reason for hiding this comment

dprokop May 20, 2019 • edited Loading

Choose a reason for hiding this comment

torkelo May 20, 2019 • edited Loading

Choose a reason for hiding this comment

torkelo May 20, 2019

Choose a reason for hiding this comment

yandingkang commented Jan 20, 2022

dprokop commented May 15, 2019 •

edited

Loading

davkal commented May 16, 2019 •

edited

Loading

dprokop May 20, 2019 •

edited

Loading

torkelo May 20, 2019 •

edited

Loading