Logs: Add permalink to log lines #69464

svennergr · 2023-06-02T13:51:00Z

What is this feature?

This feature add the log line permalinking functionality to Grafana. Users in Explore can use a button to generate a shortlink pointing to one exact logline.

Who is this feature for?

Grafana Logs users.

Which issue(s) does this PR fix?:

Fixes #67379

Special notes for your reviewer:

Currently this works only without the exploreScrollableLogsContainer feature toggle. I'll work on a fix for that in a separate PR.

Start Grafana
Start a source of logs, e.g. make devenv sources=loki
Go to Explore and query logs
Hover over a logline
Click the "Link" button
A short url is copied to the clipboard

github-actions · 2023-06-02T14:12:06Z

Backend code coverage report for PR #69464
No changes

github-actions · 2023-06-02T14:12:08Z

Frontend code coverage report for PR #69464

Plugin	Main	PR	Difference
explore	87.09%	87.02%	-.07%

svennergr · 2023-06-02T14:37:17Z

One thing that I noticed and I am unsure about the correct solution:

Screen.Recording.2023-06-02.at.15.59.58.mov

Basically, if a user is coming from a permalink the UI scrolls to that logline. That's fine. Let's say users then run different queries with results not containing the logline, that's also fine. But then users run a query with results containing the permalinked logline, the visualisation will now also scroll to that logline.

I kind of like this, but it can also be super distracting if people aren't interested in the linked logline anymore.
I was thinking about adding a second state to the permalink-button, which stays "active" so users can toggle off the "linked" state.

matyax · 2023-06-02T14:41:21Z

@svennergr Regarding your last comment, I think after using the permalink and getting to the linked line, the "permalinked" state should be gone, i.e., even if they run the same query again, they should not be scrolled again. The only way to return to the linked log line should be by browsing the link again.

That is how, IMO, links usually work, and feels like the expected UX for it.

svennergr · 2023-06-02T14:56:52Z

the "permalinked" state should be gone

Just to clarify, you wouldn't remove highlighting from the logline, would you?

matyax · 2023-06-02T15:02:24Z

I would. I don't think I would expect to see the line highlighted again after changing the query or re-executing it.

Another thing that stands out to me is that I think we should highlight the permalinked line a little bit more, because as it currently is it can be easily missed. One big reason for this is accessibility, where slight contrast changes might not be noticeable for some people.

svennergr · 2023-06-02T15:05:25Z

Yea, I talked about that with @niat22 already. It won't be part of this PR though.

Thanks for your feedback - much appreciated!

ivanahuckova

THIS IS SO GOOD 🔥! Left some feedback/questions bellow.

.betterer.results

public/app/features/explore/Logs/Logs.test.tsx

public/app/features/logs/components/LogRows.tsx

public/app/features/logs/components/LogRowMessage.tsx

public/app/features/logs/components/LogRowMessage.test.tsx

public/app/features/logs/components/LogRow.test.tsx

public/app/features/explore/Logs/Logs.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

ivanahuckova

Left couple more feedback mostly related to details, nothing big

public/app/features/logs/components/LogRowMessage.tsx

public/app/features/logs/components/getLogRowStyles.ts

public/app/features/explore/Logs/Logs.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

ivanahuckova

LGTM

* create explore panel state for logs * add props to LogRows and unify * pass properties from explore to logs * add css * implement button and scrolling * export and use `getUrlStateFromPaneState` * make `scrollIntoView` optional * change state handling for permalinks * change link icon * removed unused state * add tests for `LogRowMessage` * remove unused prop * fix name * reorg component * add `LogRow` tests * add test for `Logs` * Update public/app/features/logs/components/LogRow.test.tsx Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> * Update public/app/features/explore/Logs/Logs.test.tsx Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> * improve types in test * fix props export in Logs.tsx * fix props export in LogRowMessage.tsx * fix props export in LogRow.tsx * fixed import * fix theme import * remove hidden style * add better test names * change to `log line` rather logline Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> * fix tooltips * remove unused css --------- Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

svennergr added add to changelog no-backport Skip backport of PR add to what's new labels Jun 2, 2023

svennergr added this to the 10.1.x milestone Jun 2, 2023

svennergr self-assigned this Jun 2, 2023

grafanabot added area/frontend area/explore labels Jun 2, 2023

svennergr force-pushed the svennergr/logs-permalink branch 3 times, most recently from 54eb0fc to 68ec5cf Compare June 13, 2023 10:56

svennergr force-pushed the svennergr/logs-permalink branch from 6c2d8ff to 4052cd9 Compare June 15, 2023 09:44

svennergr added 12 commits June 15, 2023 15:04

create explore panel state for logs

f6e422f

add props to LogRows and unify

ebc0ed9

pass properties from explore to logs

ae6d68f

add css

3a11cae

implement button and scrolling

674b783

export and use getUrlStateFromPaneState

cfef0a1

make scrollIntoView optional

a089992

change state handling for permalinks

bc4dc4c

change link icon

0d0b393

removed unused state

49d31ab

add tests for LogRowMessage

d3f4dfc

remove unused prop

f9da55d

svennergr requested a review from academo June 15, 2023 13:09

svennergr mentioned this pull request Jun 15, 2023

Logs: Fix scrolling with exploreScrollableLogsContainer feature flag #70164

Merged

ivanahuckova reviewed Jun 15, 2023

View reviewed changes

svennergr and others added 10 commits June 15, 2023 16:36

Update public/app/features/logs/components/LogRow.test.tsx

3d39f29

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

Update public/app/features/explore/Logs/Logs.test.tsx

b17cbeb

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

improve types in test

e0f9b76

fix props export in Logs.tsx

1607fff

fix props export in LogRowMessage.tsx

5db7ab3

fix props export in LogRow.tsx

b00cebb

fixed import

08f6560

fix theme import

0749352

remove hidden style

05f5b85

add better test names

34a8b11

svennergr requested a review from ivanahuckova June 15, 2023 15:02

ivanahuckova reviewed Jun 16, 2023

View reviewed changes

svennergr and others added 3 commits June 16, 2023 13:39

change to log line rather logline

5a142ab

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

fix tooltips

ad6baaf

remove unused css

5134a52

svennergr requested a review from ivanahuckova June 16, 2023 11:49

ivanahuckova reviewed Jun 16, 2023

View reviewed changes

svennergr requested a review from ivanahuckova June 16, 2023 11:58

ivanahuckova approved these changes Jun 16, 2023

View reviewed changes

svennergr merged commit 6863705 into main Jun 16, 2023
17 checks passed

svennergr deleted the svennergr/logs-permalink branch June 16, 2023 12:07

svennergr mentioned this pull request Jun 20, 2023

Docs: Add docs for log line permalinking #70370

Merged

ricky-undeadcoders modified the milestones: 10.1.x, 10.1.0 Aug 1, 2023

chenrui333 mentioned this pull request Aug 24, 2023

grafana 10.1.0 Homebrew/homebrew-core#140321

Merged

rrajkomar mentioned this pull request Feb 28, 2024

Add Permalink to Loki Log Line in Grafana Alerts #83578

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Logs: Add permalink to log lines #69464

Logs: Add permalink to log lines #69464

svennergr commented Jun 2, 2023 •

edited

github-actions bot commented Jun 2, 2023

github-actions bot commented Jun 2, 2023 •

edited

svennergr commented Jun 2, 2023

matyax commented Jun 2, 2023 •

edited

svennergr commented Jun 2, 2023

matyax commented Jun 2, 2023

svennergr commented Jun 2, 2023 •

edited

ivanahuckova left a comment

ivanahuckova left a comment •

edited

ivanahuckova left a comment

Logs: Add permalink to log lines #69464

Logs: Add permalink to log lines #69464

Conversation

svennergr commented Jun 2, 2023 • edited

github-actions bot commented Jun 2, 2023

github-actions bot commented Jun 2, 2023 • edited

svennergr commented Jun 2, 2023

matyax commented Jun 2, 2023 • edited

svennergr commented Jun 2, 2023

matyax commented Jun 2, 2023

svennergr commented Jun 2, 2023 • edited

ivanahuckova left a comment

Choose a reason for hiding this comment

ivanahuckova left a comment • edited

Choose a reason for hiding this comment

ivanahuckova left a comment

Choose a reason for hiding this comment

svennergr commented Jun 2, 2023 •

edited

github-actions bot commented Jun 2, 2023 •

edited

matyax commented Jun 2, 2023 •

edited

svennergr commented Jun 2, 2023 •

edited

ivanahuckova left a comment •

edited