Logs Panel: Table UI - Reordering table columns via drag-and-drop #79536

gtk-grafana · 2023-12-14T19:43:11Z

What is this feature?
Adding react-beautiful-dnd to field selection UI to facilitate ordering columns in table UI

Why do we need this feature?
The table UI facilities users to make associations between field values; customizing the order of fields is going to provide our users with the flexibility to do just that.

Who is this feature for?
Logs table users in explore

Which issue(s) does this PR fix?:

Fixes #78837

Special notes for your reviewer:

Please check that:

It works as expected from a user's perspective.
If this is a pre-GA feature, it is behind a feature toggle.
The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

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

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

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

gtk-grafana · 2024-01-09T15:33:13Z

Bug: looks like the position of the field is preventing the query filters from working in the table cell.

gtk-grafana · 2024-01-09T15:49:21Z

Ugh, the above bug is caused by parseLegacyLogsFrame which will just grab the first string field as the body. Looks like legacy dataframe format assumes that the first string field is the body, but allowing users to re-order will break that assumption.
But we do run parseLogsFrame before we re-order fields in the LogsTableWrap.tsx, and then we run it again in the LogsTable, which is where we get the erroneous result.
I'll take a look and see if we can pass the logsFrame result from LogsTableWrap instead of running parseLogsFrame twice.

…ld, breaking query filters in table cell. Update unit tests

…837/logs-table-ui-column-ordering

gtk-grafana · 2024-01-09T17:02:30Z

Was able to resolve the above bug by passing through the logsFrame before the transformations are applied

gtk-grafana · 2024-01-09T17:08:54Z

We added the drag icon used in the transformation UI to each selected field allowing users to reorder columns, and removed the percentage from active fields.

@niat22 Would love to review this when you have some time!

svennergr

Left a few comments. Overall just some nits, feature works great! 🚀

svennergr · 2024-01-16T17:40:06Z

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

+            <div className={styles.columnWrapper} {...provided.droppableProps} ref={provided.innerRef}>
+              {labelKeys.sort(sortLabels(labels)).map((labelName, index) => (
+                <Draggable draggableId={labelName} key={labelName} index={index}>
+                  {(provided: DraggableProvided) => (


Would be great to get a slightly different background color - maybe just secondary? - on the draggable when it's being dragged. Looks like you could use something like this: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#2-snapshot-draggablestatesnapshot

I played around with it for a bit: this is what I eventually pushed.
https://github.com/grafana/grafana/assets/109082771/addcb91d-cad5-4387-86fd-535f5b687719

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

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

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

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

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

…ield

… of https://github.com/grafana/grafana into gtk-grafana/issues/78837/logs-table-ui-column-ordering

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

svennergr

Awesome! Thanks for the prompt changes 🚀🚀

…afana#79536) * Implement react-beautiful-dnd to facilitate column reordering * Refactoring field display components * Refactoring internal types to better align with Grafana style guide --------- Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

…9536) * Implement react-beautiful-dnd to facilitate column reordering * Refactoring field display components * Refactoring internal types to better align with Grafana style guide --------- Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

adding react-beautiful-dnd to faciliate column reordering

48c962e

grafana-delivery-bot bot added this to the 10.3.x milestone Dec 14, 2023

grafana-pr-automation bot added area/frontend area/explore labels Dec 14, 2023

gtk-grafana added 4 commits December 14, 2023 14:09

refactor, clean up

71f2865

fix orders in unit tests

e3bfedd

add field order to localstorage transformations

c999af4

dont swap indicies, splice in

f872b41

gtk-grafana self-assigned this Dec 19, 2023

gtk-grafana added 2 commits December 19, 2023 11:18

clean up, add icon

1e33413

clean up imports

457e146

gtk-grafana commented Dec 19, 2023

View reviewed changes

public/app/features/explore/Logs/LogsTableMultiSelect.tsx Outdated Show resolved Hide resolved

gtk-grafana added 4 commits December 19, 2023 12:49

refactor and clean up styles

227cc55

remove the percentage for selected fields

610b519

clean up styles

8cbb0dc

additional refactor

03424fb

gtk-grafana commented Dec 19, 2023

View reviewed changes

public/app/features/explore/Logs/LogsTableWrap.tsx Outdated Show resolved Hide resolved

gtk-grafana commented Jan 9, 2024

View reviewed changes

public/app/features/explore/Logs/LogsTableActiveFields.tsx Outdated Show resolved Hide resolved

clean up

debabc0

gtk-grafana added 2 commits January 9, 2024 10:58

fix bug causing the first string field to be selected as the body fie…

e798516

…ld, breaking query filters in table cell. Update unit tests

Merge remote-tracking branch 'origin/main' into gtk-grafana/issues/78…

89af62f

…837/logs-table-ui-column-ordering

gtk-grafana marked this pull request as ready for review January 10, 2024 16:43

gtk-grafana requested review from a team as code owners January 10, 2024 16:43

gtk-grafana added no-backport Skip backport of PR no-changelog Skip including change in changelog/release notes labels Jan 10, 2024

gtk-grafana requested review from svennergr and a team January 16, 2024 13:15

svennergr reviewed Jan 16, 2024

View reviewed changes

gtk-grafana and others added 12 commits January 16, 2024 12:07

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

403b2a0

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

conditionally render title tag value

4875d43

unify multiple prop destructuring/messy code

c7f4620

clean up comments, refactor types, conditionally render LogsTableNavF…

571033b

…ield

remove typescript optional annotation for required prop

5504155

Merge branch 'gtk-grafana/issues/78837/logs-table-ui-column-ordering'…

c4d2c6d

… of https://github.com/grafana/grafana into gtk-grafana/issues/78837/logs-table-ui-column-ordering

undo last change

d8866d2

remove comments

72e63d3

refactor typenames

1b9ff3d

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

6aee15d

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

add visual differentiation for field while dragging

358a155

remove uneeded ?

513c0bd

svennergr self-requested a review January 16, 2024 20:13

svennergr approved these changes Jan 16, 2024

View reviewed changes

gtk-grafana changed the title ~~Logs Panel: Table UI - Reordering fields~~ Logs Panel: Table UI - Reordering table columns via drag-and-drop Jan 16, 2024

gtk-grafana added add to changelog and removed no-changelog Skip including change in changelog/release notes labels Jan 16, 2024

gtk-grafana merged commit 7b8db64 into main Jan 16, 2024
19 checks passed

gtk-grafana deleted the gtk-grafana/issues/78837/logs-table-ui-column-ordering branch January 16, 2024 20:27

grafana-delivery-bot bot modified the milestones: 10.3.x, 10.4.x Jan 16, 2024

aangelisc modified the milestones: 10.4.x, 10.4.0 Mar 6, 2024

BrewTestBot mentioned this pull request Mar 6, 2024

grafana 10.4.0 Homebrew/homebrew-core#165251

Closed

BrewTestBot mentioned this pull request Mar 14, 2024

grafana 10.4.0 Homebrew/homebrew-core#166070

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Logs Panel: Table UI - Reordering table columns via drag-and-drop #79536

Logs Panel: Table UI - Reordering table columns via drag-and-drop #79536

gtk-grafana commented Dec 14, 2023 •

edited

Loading

gtk-grafana commented Jan 9, 2024

gtk-grafana commented Jan 9, 2024

gtk-grafana commented Jan 9, 2024

gtk-grafana commented Jan 9, 2024 •

edited

Loading

svennergr left a comment

svennergr Jan 16, 2024 •

edited

Loading

gtk-grafana Jan 16, 2024

svennergr left a comment

Logs Panel: Table UI - Reordering table columns via drag-and-drop #79536

Logs Panel: Table UI - Reordering table columns via drag-and-drop #79536

Conversation

gtk-grafana commented Dec 14, 2023 • edited Loading

gtk-grafana commented Jan 9, 2024

gtk-grafana commented Jan 9, 2024

gtk-grafana commented Jan 9, 2024

gtk-grafana commented Jan 9, 2024 • edited Loading

svennergr left a comment

Choose a reason for hiding this comment

svennergr Jan 16, 2024 • edited Loading

Choose a reason for hiding this comment

gtk-grafana Jan 16, 2024

Choose a reason for hiding this comment

svennergr left a comment

Choose a reason for hiding this comment

gtk-grafana commented Dec 14, 2023 •

edited

Loading

gtk-grafana commented Jan 9, 2024 •

edited

Loading

svennergr Jan 16, 2024 •

edited

Loading