Commit Graph

38 Commits

Author SHA1 Message Date
Matias Chomicki aaccd22a45
Logs Panel: Add unique labels support for dashboards (#111124)
* New logs panel: add basic show unique labels support

* LogList: switch to useMeasure to detect overflow

* LogList: remove debounce from size calculations reset

* Update test

* LogLine: keep unique labels expanded state between re-renders

* Remove hardcoded true

* LogListModel: add new property

* LogLine: switch to custom resize observer

* Revert removed changes

* Imports order

* Add missing function call in effect

* LogList: use improved debouncing for overflow

* LogLine: refactor resize listeners

* LogLine: mix observer with animation frame

* Prettier

* LogLabels: make button smaller

* LogLine: fix unwrapped unique labels

* Prettier

* LogListContext: sync mode only if not empty

* Revert "LogListContext: sync mode only if not empty"

This reverts commit 2b78249b35.

* module: remove default value
2025-09-17 15:26:42 +00:00
Matias Chomicki a044f567a8
Logs Panel: Sync visual options in panel editor (#111163)
* Logs panel: sync visual options in panel editor

* LogListContext: sync uniqueLabels

* Tranlations

* Prettier

* PrettifyJSON before syntax highlighting

* Update LogListContext.tsx

* LogListContext: fix prettify json option callback

* LogListControls: fix third state for wrapping

* Update test

* chore: fix label capitalization
2025-09-17 10:13:13 +00:00
Matias Chomicki bbc401a6be
New Log Details: Inline improvements (#110276)
* LogLineDetails: make inline details taller

* Translations: add missing plurals

* Update sidebar icon

* LogList: default to inline details

* LogLineDetails: details by screen width

* Inline details: slightly smaller

* LogLineDetails: use container size for default mode
2025-09-03 18:53:38 +02:00
Matias Chomicki 9dfd250049
Log line details: Update styles (#110472)
* LogLineDetails: show border right when controls are disabled

* LogLineDetails: update styles

* Update types in test

* Update background, border, and shadow

* Close details: fix tooltip
2025-09-03 17:44:29 +02:00
Matias Chomicki e30931c219
Log Line: Add custom highlight renderer (#110335)
* LogLine: implement custom highlight renderer

* Log line: fully replace highlighted body with highlight tokens

* processing: update test

* Add unit test

* Add deeply nested JSON test

* processing: update clone function

* Scroll to log line: find by uid

* LogLineDetailsLog: check if the log contains ansi

* Prettier
2025-08-29 20:33:21 +02:00
Matias Chomicki e78f6b6b37
New Logs Panel: Extend line wrapping to control JSON formatting (#110224)
* LogListControls: add third state to line wrapping

* LogListContext: decouple wrapLogMessage and prettifyJSON from state object

* Processing: reformat JSON according to prettifyJSON

* LogListControls: update class names and colors

* onLogOptionsChangeType: update type signature

* Update type

* Update tests

* Dont translate the plus sign

* Comments
2025-08-27 17:34:14 +00:00
Matias Chomicki 4eeb6c3ed8
Logs Panel: fix conditionally called React hooks (#110113)
* Logs Panel: fix conditionally called React hooks

* Update betterer
2025-08-25 17:50:49 +02:00
Matias Chomicki 9646a06a91
Log Details: Show embedded trace if available (#109926)
* LogLineDetails: get link details from href

* links: create module

* LogList: pass time zone and time range to Details

* LogLineDetailsTrace: create component

* InlineLogDetails: pass time range and time zone

* LogLineDetailsTrace: show loading and error messages

* Update tests

* LogLineDetailsTrace: update message styles

* Prettier

* Add test

* LogLineDetails: add embedded metric test

* Prettier

* LogLineDetailsTrace: use unique request id

* LogLineDetailsTrace: reset state when props change

* Chore: rename

* Chore: rename

* links: add integration test

* Prettier
2025-08-25 14:06:01 +00:00
Matias Chomicki 01d48e26fe
New Logs Context: Add time window option (#109901)
* LogLineDetails: add open and close events

* LogLineContext: add interval picker

* Log Context: allow to customize the time window around the log

* Loki: support custom time window

* LogLineContext: implement variable time window

* Remove console

* LogLineContext: store and format options

* LogLineContext: replace radio with combobox

* LogLineContext: run time window on the first request

* InfiniteScroll: use loading to prevent fake events

* Chore: update old comment

* Minor reorg

* Clean up unnecessary styles

* LogLineContext: fix overflow and scroll

* LogList: fix loading prop

* Update comment

* Translations

* Update public/app/features/logs/components/panel/LogLineContext.tsx

* LogLineContext: move default to constant

* LogLineContext: add test

* Prettier

* New Logs Context: Generic DS support for time window option (#109934)

* chore: add supportsAdjustableWindow to logs context interface

* Build

---------

Co-authored-by: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
2025-08-21 13:50:05 +00:00
Matias Chomicki 9a6b012ea4
New Logs Panel: Performance and display updates and fixes (#109672)
* LogLine: don't run overflow check with unwrapped logs

* InfiniteScroll: don't listen to scroll events without scroll

* InfiniteScroll: minimize use of element.scrollHeight

* LogLineDetails: constrain to 95vw

* LogList: process logs while streaming

* Remove unused prop

* InfiniteScroll: update test

* Update test

* Inline Log Details: read max width from context

* Remove console
2025-08-18 19:06:31 +00:00
Matias Chomicki f77e8839d9
New Logs Panel: Display nanoseconds if present (#109210)
* processing: display nanoseconds if present

* Nanoseconds: add control in log line menu

* virtualization: adapt to timestamp format

* Translations

* LogLine: update test

* virtualization: update test

* LogLineMenu: update test

* LogListControls: add third state for new logs panel timestamps

* Logs Panel: expose as a new panel option

* Translations

* Logs Panel: set timestamp resolution from panel config

* Module: add default value

* LogLine: update test

* Spelling

* chore: rename setter

* LogListControls: use custom button for resolution

* Translations

* Translations

* Prettier

* Logs Panel: conditionally show timestamp and details options

* Add integration test
2025-08-08 17:13:01 +00:00
Matias Chomicki 94874823ce
New Log Context: Scroll and resize improvements (#109143)
* LogList: keep scroll position after scrolling top

* Infinite Scroll: add unit tests

* Remove log

* Remove log

* LogList: unify height calculation

* LogList: manage list height with resize observer

* LogLineDetails: report app with details displayed
2025-08-05 15:03:03 +02:00
Matias Chomicki 3f90c85c4e
New Logs Context: Logs context using the new Logs Panel (#108852)
* LogLineContext: initial support

* LogLineContext: infinite scroll bottom

* LogLineContext: clean up styles and support both scrolls

* InfiniteScroll: support top scrolling

* LogLineContext: support center matched line

* LogLineContext: read options from storage

* LogLineContext: move padding container

* LogLineContext: reset on ui change

* LogLineContext: improve sort order and fix open in split

* LogLineContext: show log line

* Translations

* LogsPanel: integrate new context component

* LogLineContext: add unit test

* Prettier

* Remove unused import

* InfiniteScroll: add "scroll to load more" top

* LogLineContext: rename collapsible

* Update tests

* LogLineContext: refactor center button

* LogLineContext: handle overflow in small viewports

* LogLineContext: format referenced log line

* Memoize

* LogLineContext: make modal bigger

* LogList: improve a11y

* LogLineContext: flexbox magic

* LogLineContext: revert center button change

* LogsPanel: hide overflow

* LogLineContext: responsive min-height

* LogLineContext: fix wrap log message

* InfiniteScroll: improve direction handling

* Add feature flag

* Implement feature flag

* InfiniteScroll: report direction
2025-08-01 11:30:17 +00:00
Matias Chomicki 10b235ec75
New Logs Panel: always show horizontal scroll when unwrapped (#108530) 2025-07-23 17:10:22 +02:00
Matias Chomicki 046134db22
New Logs Panel: Add events for Panel and Details (#108272)
* New Logs Panel: Add events for Panel and Details

* Logs Panel: add noInteractions property

* New Logs Panel: conditionally report interactions

* Test
2025-07-18 13:13:51 +02:00
Matias Chomicki 433a5fd464
Logs: refactor unescaped content (#108187) 2025-07-17 10:59:03 +02:00
Matias Chomicki 2e58ce7980
Log Line Details: Add inline mode for the Details component (#107718)
* LogLineContext: add sidebar mode

* LogLine: initial support for inline details

* LogLine: finally figure out field overflow

* LogLineDetails: support inline details in unwrapped mode

* LogLineDetails: fix borders in inline mode

* LogLineDetails: support unwrapped inline details

* LogLineDetails: fix inline unwrapped mode

* LogLineDetails: debug and translations

* Fix types

* LogLine: update test

* LogLineDetails: slightly taller

* LogListContext: fix NaN default width

* Remove console log

* LogList: add inline details test

* virtualization: update test

* Fix imports
2025-07-09 16:07:19 +02:00
Matias Chomicki 89e8a03859
New Log Details: Add support to sort displayed fields (#107635)
* Create LogLineDetailsDisplayedFields

* Log labels: properly implement plurals

* Pluralize

* LogListContext: pass setDisplayedFields

* LogLineDetailsDisplayedFields: update displayed fields

* LogLineDetails: scroll to item after opening details

* LogListContext: serve logOptionsStorageKey

* Update test

* Missing translations

* LogLineDetailsDisplayedFields: update styles

* LogLineDetails: update text selectors

* Update tests

* Reorganize log details: improve discoverability

* Update test
2025-07-08 11:57:28 +02:00
Matias Chomicki 41014f29ed
New Log Details: Create initial component for Log Details (#107466)
Actionlint / Lint GitHub Actions files (push) Waiting to run Details
Backend Code Checks / Validate Backend Configs (push) Waiting to run Details
Backend Unit Tests / Detect whether code changed (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (1/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (2/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (3/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (4/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (5/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (6/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (7/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (8/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (1/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (2/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (3/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (4/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (5/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (6/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (7/8) (push) Blocked by required conditions Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (8/8) (push) Blocked by required conditions Details
Backend Unit Tests / All backend unit tests complete (push) Blocked by required conditions Details
CodeQL checks / Analyze (actions) (push) Waiting to run Details
CodeQL checks / Analyze (go) (push) Waiting to run Details
CodeQL checks / Analyze (javascript) (push) Waiting to run Details
Lint Frontend / Detect whether code changed (push) Waiting to run Details
Lint Frontend / Lint (push) Blocked by required conditions Details
Lint Frontend / Typecheck (push) Blocked by required conditions Details
Lint Frontend / Betterer (push) Blocked by required conditions Details
golangci-lint / lint-go (push) Waiting to run Details
Crowdin Upload Action / upload-sources-to-crowdin (push) Waiting to run Details
Verify i18n / verify-i18n (push) Waiting to run Details
End-to-end tests / Detect whether code changed (push) Waiting to run Details
End-to-end tests / Build & Package Grafana (push) Blocked by required conditions Details
End-to-end tests / Build E2E test runner (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/dashboards-suite, dashboards-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/panels-suite, panels-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/smoke-tests-suite, smoke-tests-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (--flags="--env dashboardScene=false", e2e/old-arch/various-suite, various-suite (old arch)) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (e2e/dashboards-suite, dashboards-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (e2e/panels-suite, panels-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (e2e/smoke-tests-suite, smoke-tests-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (e2e/various-suite, various-suite) (push) Blocked by required conditions Details
End-to-end tests / A11y test (push) Blocked by required conditions Details
End-to-end tests / All E2E tests complete (push) Blocked by required conditions Details
Frontend tests / Detect whether code changed (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (1) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (2) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (3) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (4) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (5) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (6) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (7) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (8) (push) Blocked by required conditions Details
Frontend tests / All frontend unit tests complete (push) Blocked by required conditions Details
Integration Tests / Sqlite (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / All backend integration tests complete (push) Blocked by required conditions Details
publish-kinds-next / main (push) Waiting to run Details
Reject GitHub secrets / reject-gh-secrets (push) Waiting to run Details
Build Release Packages / setup (push) Waiting to run Details
Build Release Packages / Dispatch grafana-enterprise build (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:darwin/amd64, darwin-amd64) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:darwin/arm64, darwin-arm64) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:linux/amd64,deb:grafana:linux/amd64,rpm:grafana:linux/amd64,docker:grafana:linux/amd64,docker:grafana:linux/amd64:ubuntu,npm:grafana,storybook, linux-amd64) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:linux/arm/v6,deb:grafana:linux/arm/v6, linux-armv6) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:linux/arm/v7,deb:grafana:linux/arm/v7,docker:grafana:linux/arm/v7,docker:grafana:linux/arm/v7:ubuntu, linux-armv7) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:linux/arm64,deb:grafana:linux/arm64,rpm:grafana:linux/arm64,docker:grafana:linux/arm64,docker:grafana:linux/arm64:ubuntu, linux-arm64) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:linux/s390x,deb:grafana:linux/s390x,rpm:grafana:linux/s390x,docker:grafana:linux/s390x,docker:grafana:linux/s390x:ubuntu, linux-s390x) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:windows/amd64,zip:grafana:windows/amd64,msi:grafana:windows/amd64, windows-amd64) (push) Blocked by required conditions Details
Build Release Packages / ${{ needs.setup.outputs.version }} / ${{ matrix.name }} (targz:grafana:windows/arm64,zip:grafana:windows/arm64, windows-arm64) (push) Blocked by required conditions Details
Build Release Packages / Upload artifacts (push) Blocked by required conditions Details
Run dashboard schema v2 e2e / dashboard-schema-v2-e2e (push) Waiting to run Details
Shellcheck / Shellcheck scripts (push) Waiting to run Details
Verify Storybook / Verify Storybook (push) Waiting to run Details
Swagger generated code / Verify committed API specs match (push) Waiting to run Details
Dispatch sync to mirror / dispatch-job (push) Waiting to run Details
Trivy Scan / trivy-scan (push) Waiting to run Details
* Log Details: fork and refactor as functional

* LogDetailsBody: refactor styles

* LogDetails: decouple from old panel

* LogDetails: extract and centralize styles

* LogDetailsRow: refactor as functional

* Fix unused

* Fix wrong label

* LogDetails: create new component

* LogLineDetails: process links and add sample sections

* LogLineDetails: create and use LogLineDetailsFields

* LogLineDetails: group labels by type

* LogLineDetails: render all fields

* Removed unused components

* Fix imports

* LogLineDetails: fix label

* LogLineDetailsFields: fix stats

* LogLinedetailsFields: add base styles

* LogLineDetails: store open state

* getLabelTypeFromRow: internationalize and add plural support

* LogLineDetails: get plural field types

* LogLineDetails: sticky header

* LogLineDetails: introduce log details header

* LogLineDetails: extract into submodules

* LogDetails: add more header options and store collapsed state

* LogDetails: add scroll for log line

* LogLineDetailsHeader: add log line toggle button

* LogLineDetailsFieldS: improve sizes

* LogLineDetails: add search handler

* LogLineDetailsFields: implement search

* LogLineDetailsFields: switch to fixed key width

* LogLineDetailsFields: refactor fields display

* Link: remove tooltip

* Fix translations

* Revert "Link: remove tooltip"

This reverts commit cd927302a7889b9430008ae3b81ace0aed343f5f.

* LogLineDetailsFields: switch to css grid

* Remap new translations

* LogLineDetails: implement disable actions

* LogLineDetailsFields: migrate links to css grid

* LogLineDetailsFields: migrate stats to css grid

* LogLabelStats: make functional

* LogLineDetailsHeader: refactor listener

* LogLineDetailsFields: decrease column minwidth

* Reuse current panel unit tests

* Translations

* Test search

* Update public/app/features/logs/components/panel/LogLineDetails.test.tsx

* LogLineDetailsHeader: fix zIndex

* Create LogLineDetailsDisplayedFields

* Revert "Create LogLineDetailsDisplayedFields"

This reverts commit 57d460d966483c3126738994e2705b6578aac120.

* LogList: recover unwrapped horizontal scroll

* LogLineDetails: apply styles suggestion

* LogLineDetailsComponent: fix group option name

* LogLineDetailsHeader: tweak styles

* LogLineDetailsComponent: remove margin of last collapsable
2025-07-03 22:57:14 +02:00
Matias Chomicki 855f133d1e
New Logs Panel: fix unwrapped logs display (#107391)
* LogLine: remove new lines in unwrapped mode

* Displayed fields: fix displayed fields when the body is included

* LogLine: prevent overflows from extremely long lines with incorrect width measurement

* Update tests

* virtualization: test calculateFieldDimensions

* getGridTemplateColumns: consider displayed fields to set the grid sizes

* LogList: hide overflowing fields in unwrapped mode

* processing: extract regex

* LogLine: improve hover and selected state

* virtualization: strip ansi color codes for measurement

* Update tests

* LogLine: improve log line pre-resize state

* Revert "LogLine: improve log line pre-resize state"

This reverts commit a6b4ddded5.

* LogLine: improve hover/active color
2025-07-01 09:55:26 +00:00
Matias Chomicki 18757952eb
New Logs Panel: Support multiple virtualization instances for different font sizes (#107023)
* LogList: memoize styles

* virtualization: refactor to support multiple instances

* LogList: refactor to support multiple virtualization instances

* Update tests

* LogLine: unfocus test

* virtualization: refactor class to use the provided font size

* LogLine: split component to reduce re-renders
2025-06-21 14:38:46 +02:00
Matias Chomicki 693bc51693
New Logs Panel: Read default font size from storage + add missing unescaped content check + fix mutation (#106755)
* Logs Panel: remove default value to it's taken from local storage code

* processing: do not remove newlines, let truncation handle

* LogList: check and pass unescaped content to context

* LogLine: prevent mutation of searchWords

* grammar: use parseFlags

* grammar: escape regex
2025-06-17 23:10:34 +02:00
Matias Chomicki 5f3c04f537
New Logs Panel: Implement client-side text search (#106448)
* LogList: add key bindings hook

* LogListContext: add search support

* LogList: create and integrate LogListSearch

* useKeyBindings: close search with escape

* LogListSearch: implement go to results

* LogLine: support highlight in logs with ansi colors

* LogListSearchContext: extract from LogListContext

* LogListSearch: highlight matches in ansi logs

* LogListSearch: fix count

* LogListSearch: implement optional results filtering

* Translations

* LogListSearch: display within the panel and add tooltip

* Translations

* LogList: highlight search words and search matches

* LogListSearch: remove ufuzzy

Unfortunately we can't highlight ufuzzy matches

* LogListSearch: clean up removed ufuzzy implementation

* Prettier

* LogListSearch: search in displayed fields

* useKeyBindings: switch to native event listeners

* LogListSearch: fix effect loop

* LogListSearch: remove character so people don't think this text comes from AI

* LogLine: add text search test cases

* LogList: add integration test case

* LogListSearch: use uncontrolled input and react transitions

* LogListSearch: import t from i18n

* LogListControls: add search control

* LogListSearch: escape regexes
2025-06-13 14:50:03 +02:00
Hugo Häggmark 2b8c74de2e
i18n: removes useTranslate hook (#106556)
* i18n: removes useTranslate hook

* chore: fix duplicate imports

* chore: fix import sorting and hook dependencies
2025-06-12 11:03:52 +02:00
Matias Chomicki db83b4ef17
New Logs Panel: font size selector and Log Details size improvments (#106376)
* LogList: create font size option

* LogList: prevent option fontSize bouncing

* LogListContext: fix stored container size bigger than container

* LogList: render smaller font size

* virtualization: adjust to variable font size

* virtualization: strip white characters of at the start successive long lines

* LogList: add font size to log size cache

* LogList: use getters instead of fixed constants

* LogLine: prevent unnecessary overflow calls

* virtualization: strip ansi color codes before measuring

* LogListDetails: adjust size on resize and give logs panel a min width

* LogsPanel: add showControls as a dashboard option

* virtualization: update test

* virtualization: add small test case

* processing: update font size

* LogListControls: update test

* Extract translations

* Logs Panel: enable controls by default

* LogListContext: update mock

* ControlledLogRows: add missing prop

* LogLine: remove height ref

* LogList: dont touch the debounced function on successive calls

* LogLine: update test

* LogsPanel: make controls default to false again

* LogsPanel: make controls default to false again

* LogLineDetails: fix height resizing and make close button sticky

* LogLine: memo log component

* LogLineDetails: fix close button position

* New Logs Panel: Add Popover Menu support (#106394)

* LogList: add popover menu support

* LogList: test popover menu

* Chore: remove unnecessary optional chain op

* LogLinedDetails: fix close button position with and without scroll
2025-06-10 09:59:01 +00:00
Matias Chomicki b3596e8c72
New Logs Panel: Render new panel using the current visualization (#105968)
Actionlint / Lint GitHub Actions files (push) Waiting to run Details
Backend Code Checks / Validate Backend Configs (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Backend Unit Tests / Grafana (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Backend Unit Tests / Grafana Enterprise (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
CodeQL checks / Analyze (actions) (push) Waiting to run Details
CodeQL checks / Analyze (go) (push) Waiting to run Details
CodeQL checks / Analyze (javascript) (push) Waiting to run Details
CodeQL checks / Analyze (python) (push) Waiting to run Details
Lint Frontend / Verify i18n (push) Waiting to run Details
Lint Frontend / Lint (push) Waiting to run Details
Lint Frontend / Typecheck (push) Waiting to run Details
Lint Frontend / Betterer (push) Waiting to run Details
End-to-end tests / Build & Package Grafana (push) Waiting to run Details
End-to-end tests / ${{ matrix.suite }} (dashboards-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (panels-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (smoke-tests-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (various-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (old arch) (old-arch/dashboards-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (old arch) (old-arch/panels-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (old arch) (old-arch/smoke-tests-suite) (push) Blocked by required conditions Details
End-to-end tests / ${{ matrix.suite }} (old arch) (old-arch/various-suite) (push) Blocked by required conditions Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (1) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (2) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (3) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (4) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (5) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (6) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (7) (push) Waiting to run Details
Frontend tests / Unit tests (${{ matrix.chunk }} / 8) (8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / Sqlite (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / MySQL (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (1/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (2/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (3/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (4/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (5/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (6/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (7/8) (push) Waiting to run Details
Integration Tests / Postgres (${{ matrix.shard }}) (8/8) (push) Waiting to run Details
Reject GitHub secrets / reject-gh-secrets (push) Waiting to run Details
Run dashboard schema v2 e2e / dashboard-schema-v2-e2e (push) Waiting to run Details
Dispatch sync to mirror / dispatch-job (push) Waiting to run Details
publish-kinds-next / main (push) Has been cancelled Details
* LogsPanel: integrate new panel via feature flag

* Log Line: move sampled/errors/deduplication count outside of log line body

* LogList: increase overscan count

* Logs Panel: enable deduplication for infinite scrolling

* Logs Panel: remove margin overflowing drilldown

* Logs Panel: add missing dependency to effect

* Logs Panel: pass missing callback

* Remove console log

* LogLine: show cursor pointer only when interactable

* LogLineDetails: make resize handler more obvious

* LogsPanel: add missing props to from panel

* LogLineMenu: add support for custom items

* LogsPanel: pass custom menu items to LogList

* Fix imports

* Chore: comments and missing argument

* LogLineMenu: pass log to event listener

* LogListContext: filter log details when no longer present in the new response

* chore: log

* LogsPanel: conditionally show options per feature flag status

* LogLine: align logs when some of them are sampled or with errors

* Chore: update tests

* LogLineMenu: test custom options

* LogsSamplePanel: show controls

* LogsPanel: move return after hooks to prevent bugs
2025-06-01 14:29:49 +02:00
Matias Chomicki a676fd620a
New Logs Panel: follow up improvements and fixes (#105767)
* LogList: add version with no scroll

* LogList: fix support for permalinked and pinned logs

* LogLineDetails: improve resizable

* LogList: improve height adjustment when details are open

* LogList: let the people select text

* Revert "LogList: add version with no scroll"

This reverts commit f26cdce696.

* LogList: update test

* New Logs Panel: rename permalinkedRowId to permalinkedLogId

* LogListContext: update mock

* ControlledLogRows: implement custom scrollIntoView

* Logs Panel: fix re-render regression

* LogLine: tweak hover and expanded colors
2025-05-22 21:12:06 +03:00
Matias Chomicki 9308f86d63
New Logs Panel: Add Log Details support (#105609)
* Log list: add onclick listener

* LogListContext: add basic details support

* LogLineDetails: create component

* Address lint issues

* Log Details: make resizable and store size

* LogListModel: add sampled and error support

* LogDetails: pass more required props

* LogLineContext: add interactive callbacks support

* LogLineDetails: pass interactive callbacks

* LogList: pass displayedFields callbacks

* LogLine: move click listener

* LogLineMenu: support showing details

* LogLine: move onclick listener

* LogListContext: remove displayedFields intermediation

* i18n

* LogListContext: abstract details shown function

* LogLine: visually show expanded lines

* LogDetails: remove min width for labels

* LogLineDetails: add close button

* LogList: add extra wrapper to get width

* LogLineDetails: update logs size on resize

* virtualization: update to new width reference

* LogLine: check overflow on every re-render

* LogList: debug virtualization when resizing

* LogLineDetails: make it scrollable

* LogListContext: make detailsWidth not undefined

* Update tests with new attributes

* LogLine: update collapsed state with container changes

* LogLine: move cursor property to clickable styles

* LogList: fix height recalculation when display options change

* Logs: fix feature toggles support

* Logs: more feature toggles adjustments

* Lint

* LogLine: support duplicates, hasError, and isSampled

* Logs: debug feature flag combinations

* i18n

* Prettier

* New Logs Panel: generate storage key for dashboards

* Explore Logs: fix filtered levels

* Logs Sample: integrate new panel

* LogLine: fix unwrapped logs

* Fix test

* Update test

* Logs panel: update test

* Prettier

* LogLine: update tests

* LogLineMenu: update test

* LogList: update unit test

* processing: update test

* virtualization: update unit test
2025-05-20 20:28:35 +03:00
Matias Chomicki 441e45d88a
New Logs Panel: Handle long lines (#103171)
* LogLine: introduce truncation limit

* Processing: turn LogListModel into a class

* LogLine: introduce collapsed/expanded state and read from model

* Virtualization: correct extra line for controls in size

* LogLine: fix collapsed state initialization

* Add new criteria to define long lines to truncate

* Virtualization: better truncation limit

* Check collapsed state based on container size

* Update function name

* Extract translations

* LogLine: update unit test

* virtualization: add unit test

* processing: update unit test

* Fix focused test

* processing: process fields on demand

* Logs: consider loading state from explore

* LogList: improve resize and recalculation

* chore: build?
2025-05-07 01:26:54 +03:00
Edvard Falkskär e45f2d0a18
Logs: Add labels as variable for use in correlations/links (#103605) 2025-04-15 16:08:29 +02:00
Matias Chomicki 778d0b2da4
Logs: Clean up Explore meta information (#103801)
* LogLabels: add displayMax property

* MetaInfoText: prevent label wrapping

* LogsMetaRow: remove unescaped content and max characters

* LogsMetaRow: use font weight normal

* LogLabels: add button to collapse back

* LogsMetaRow: set line height

* LogsMetaRow: save common logs state

* LogsMetaRow: update unit tests

* LogLabels: update unit test

* LogListContext: add forceEscape option

* LogListContext: move forceEscape and hasUnescapedContents

* LogListControls: move forceEscape to controls

* LogList: read forceEscape from context

* i18n

* LogListControls: test new control

* Update betterer

* logsModel: update test

* LogLabels: replace characters with icons

* Prettier

* LogLabels: add aria labels

* i18n

* Update tests

* Update test
2025-04-10 19:47:17 +01:00
Matias Chomicki e2a6f9a849
Logs: Add new Controls component to Explore (#103401)
* ControlledLogRows: create component

* Fix imports

* ControlledLogRows: handle scroll events

* Rename storage key prop

* LogListControls: externally control syntax highlighting

* ControlledLogRows: add support for level filtering

* Logs: implement deduplication from controls

* Fix imports

* Create feature flag

* Use feature flag

* LogListControls: add download button

* LogsMetaRow: extract download function to logs utils

* Filter and download logs

* Update tests with new props

* LogList: pass logs and logs meta to context

* Remove prefix from downloaded file

* Update unit tests

* LogListControl: update unit tests

* Fix type assertion

* Fix imports

* Formatting

* i18n

* Fix test

* LogListControls: adjust scroll to top styles

* LogListContext: control legacy options

* LogListControls: add showUniqueLabels and prettifyJSON options

* LogListControls: test new controls

* Extract translations

* Hide old controls by feature flag

* LogListControls: update prettify json copy

* ControlledLogRows: disable preview

* Prettier

* LogListControls: Fix test
2025-04-07 16:38:55 +02:00
Matias Chomicki 06c83f7d4d
New Logs Panel: Add LogListControl component (#102359)
* LogListNavigation: create component

* LogListNavigation: make it optional

* Refactor Navigation into Controls

* Explore Logs: hide old panel options

* LogListControls: add more controls and apply new styles

* LogListControls: update width

* Remove console log

* LogList: wrap component in context

* LogListContext: make it stateful

* LogListControls: connect with context

* LogListContext: sync displayed fields

* LogListContext: add syntax highlighting control

* LogLine: improve color with highlighting off

* LogListControls: improve button styles

* LogListControls: add sort order option

* LogListControls: add dedup strategy

* LogListContext: sync prop changes with state

* LogList: add option change callback

* LogListContext: sync external changes only when showControls is disabled

* LogListContext: unify sync effect

* LogListControls: improve buttons active css

* LogListContext: add optional storage support

* LogList: make syntaxHighlighting and read from store or default to true

* LogsPanel: add support for new options

* Generated file

* Update tests

* New Logs Panel: add showControls option

* LogList: make eventBus optional

* LogsPanel: expose syntaxHighlighting

* LogsPanel: expose grammar to plugins

* Remove incorrect legacy file

* LogListControls: allow options change with controls enabled in panel editor

* LogLine: apply no-highlighting class to ansi wrapper

* LogListControls: add frontend level filtering

* LogList: filter by filterLevels

* LogListControls: allow filterLevels in dashboards

* LogLine: update unit tests

* LogLineMenu: update unit test

* LogListControls: add unit test

* Revert

* LogList: add unit test

* LogList: add onLogRowHover support

* LogList: test hover events

* LogsPanel: add unit test

* LogLine: use theme color for errors

* LogLine: minor tweak to hover state

* Chore: fix test case name

* LogListControls: add border

* LogListControls: prevent default on wrap toggle click

* LogLine: switch info and debug colors

* ContentOutline + LogControls: sync displayed levels and minor outline improvements

* LogListContext: sync with external filterLevel changes

* Logs: work with arrays of LogLevel and not plain strings

* Fix type

* LogListControl: increase controls size
2025-04-04 14:53:12 +02:00
Matias Chomicki b63b4596a0
New Logs Panel: Log line tokenization and syntax highlighting (#101401)
* Logs: preprocess and highlight with Prism

* Processing: highlight logs on demand

* LogList: reset sizes when wrap changes

* Extend base grammar to support numbers, dates, strings, and fields

* Refactor grammar

* LogList: fix size recalculation after logs update

* LogLine: add ansi support

* Processing: Use raw instead of entry

* Capitalize level

* Remove colors from timestamps

* added highlight colors

* Fix oopsies

* LogLine: Remove repeated css attribute

* Log grammar: update log token string

* Formatting

* LogLine: fix underflow detection

* Grammar: fine tune, add durations

* LogLine: change rgba colors to theme colors

* Update tests

* Grammar: add uids

* LogLine: dont render empty logLevel when logs are wrapped

* Virtualization: fix calculation when level is unknown

* Remove console log

* Chore: fix log line message

* LogLine: remove opacity change on hover

* LogLine: tweak colors and highlight urls

* Tweak colors, remove numbers

* Remove unnecessary selector

* Fix imports

* Chore: move dimensions code to virtualization

* processing: add unit tests

* Revert change

* Grammar: add unit tests

* Remove stale assertion

* LogLine: define critical color

* Fix alpha dependency

---------

Co-authored-by: Joan <zizzpudding@gmail.com>
Co-authored-by: Joan Wortman <joanwortman@Joans-MacBook-Air-2.local>
2025-03-26 12:48:26 +01:00
Matias Chomicki d78c646f93
New Logs Panel: Log line menu (#101060)
* Create LogLineMenu component

* Fine tune icon width

* LogLineMenu: Add placeholder options

* utils: create reusable handleOpenLogsContextClick

* LogLineMenu: add callbacks to menu items

* LogListContext: create component

* LogList: use log list context to connect menu callbacks

* LogLine: add pinned style

* Remove unused imports

* LogLine: add unit test

* LogLine: add menu test case

* LogLineMenu: add unit test

* LogLineMessage: add unit test

* LogListContext: add unit test

* Remove unused code

* Extract translations

* Fix handleOpenLogsContextClick

* Chore: memoize styles

* Virtualization: update node used for underflow detection

* Use useStyles2 instead of manually memoizing

* Virtualization: export getter instead of variable

* Open context: move stopPropagation to the old panel code

* Logs: add new container class
2025-02-27 18:34:02 +02:00
Matias Chomicki 03dcd25a32
New Logs Panel: Displayed fields support (#100643)
* LogList: add displayedFields and getFieldLinks props

* Render displayed fields

* LogLine: rename function

* Refactor log dimensions

* Generate styles in parent component

* Log List: implement tabular unwrapped logs

* Rename class

* Log line: center fields

* Parametrize field gap

* Virtualization: update measurement to support displayed fields

* Shorten visible level

* Do not calculate dimensions when logs are wrapped

* Logs Navigation: fix width when flag is enabled

* Pass styles to LogLineMessage

* Formatting

* Fix unwrapped logs when showTime is off

* LogLine: update css selectors for fields
2025-02-27 12:31:55 +02:00
Matias Chomicki b814f1628f
New Logs Panel: Add infinite scrolling support (#99773)
* Create Infinite Scroll wrapper component

* Logs list: refactor event subscriber

* Infinitely load logs

* Move renderer to Infinite Scroll component

* Implement infinite scroll state

* Switch internal implementation to use the existing infinite scrolling component logic

* Integrate with logs panel

* Move scrolling management to infinite scrolling component

* LogList: change subscription dependency to prevent unnecessary runs

* Infinite scroll: remove autoscrolling

* Logs Panel: fix dependencies to prevent re-renders on refresh

* Infinite scroll: introduce pre-scroll state

* LogList: expose initial log position prop

* Infinite scroll: less work on scroll and autoscroll behavior

* Remove console

* Fix imports

* Add infinite scroll translations

* Fix imports

* Add visual delimiter for new pages and increase gap

* Remove log

* Chore: rename interface to LogListModel

* Hover: decrease opacity

* Fix no-logs state

* Prettier

* Infinite scroll: move scroll delimiter

* Load more message: make it clickable
2025-02-14 13:52:34 +02:00
Matias Chomicki ff926c5ac5
Logs Panel: Base elements for the new visualization (#99084)
* Create base components

* Create measurement service

* Add container for list

* Use measurement to render virtualized log lines

* Match rendered styles in 2d context for measuring

* Improve virtualization initialization and handle resize

* Introduce log line processing

* Virtualization: fix measurement of lines with line endings

* Virtualization: include scrollbar width in calculation

* Remove logs

* Virtualization: optimize text measurement

* Add support for forceEscape

* Log line: properly style wrapped/unwrapped lines

* Virtualization: handle possible overflows

* Improve overflow handling

* LogList: remove scroll position ref

* Remove logs

* Remove log

* Add top/bottom navigation buttons

* Add timestamp to pre-processing

* Add showtime support

* Fix imports

* Chore: simplify dedup

* Show level

* Refactor measurement and measure level and timestamp

* Virtualization: skip unnecessary measurements

* Improve measurements to minimize overflow chance

* Introduce logline colors

* Update palette

* Remove pretiffying

* Add comment

* Remove unused variable

* Add color for info level

* Fix dependencies

* Refactor overflow to account for smaller estimations

* Debounce resizing

* Fix imports

* Further optimize height calculation

* Remove outline

* Unused import

* Use less under/overflow method

* Respond to height changes

* Refactor size adjustment to account for layout changes

* Add Logs Panel support

* Add margin bottom to log lines

* Remove unused option

* LogList: container div should never be null

Bad API design

* Log List: make app not undefined and update containerElement usages

* New Logs Panel: Create as new visualization (#99427)

* Logs Panel: clean up old panel

* Logs Panel New: create as new visualization

* Plugin: mark as alpha

* Logs panel new: hold container in a state variable

* Logs panel: fix no data state

* Create newLogsPanel feature flag

* Logs: use new feature flag

* Prettier

* Add new panel to code owners

* Logs Navigation: add translations

* Address betterer issues

* Fix import

* Extract translations

* Update virtualization.ts

* Virtualization: add DOM fallback for text measurement

* Run gen-cue

* plugins_integration_test: add logs-new to expected plugins
2025-02-04 18:40:17 +01:00