Persist search page column width

[JeyRathnam]

Current scenario:

1. Navigate to /search
2. Increase width of any of the available columns
3. Navigate away from search to any of the other pages
4. navigate back to /search and the column width would reset

Could maybe leverage local storage to store column width and persist that locally on the browser.

[JeyRathnam]

If this is something we want to fix, I'd like to work on this as well :)

[MikeShi42]

This is a good point! I think it'd be nice to persist column widths.

I think a few gotchas to answer would be:

1. How would the user be able to reset the column widths?

I think we can introduce a reset button in the log table when the widths are customize/persisted, there might be a "smart" way to do it automatically, but I can't think of a good action to auto-reset the widths.

2. How will this handle custom widths in the dashboard? Where there can be multiple log tables in a single dashboard.

I think for now the easiest way is to simply only persist the column widths on the search page, maybe the LogTable component can take a flag for whether column widths should be persisted locally.

An alternative is that each LogTable get assigned some unique/persistent id, and in local storage each LogTable id has its own corresponding set of custom sizes. This seems more complicated (LogTables don't have persistent ids today) and likely a good v2 of this issue.

3. Minor thing to look out for - you can also add custom columns to a table, so the number of columns can change.

Today they're custom columns are ephemeral and in the future they may be DB persisted, I don't think this matters as the message column will "soak up" any excess column widths, but I guess there might be an edge case where if you add too many columns, it'll make the LogTable wonky/break when it's trying to restore persisted column widths.

Anyways those issues aside, would love to have you take this on if you'd like! You can use the useLocalStorage hook here and the table widths are currently set up in the LogTable component here. Let me know if you'd need any help getting started :)

[JeyRathnam]

@MikeShi42 Thank you for the notes above, I have a draft PR ready for review.

How would the user be able to reset the column widths?

I have added option in header next to "Show Log Patterns" as "Reset Column Sizes"

How will this handle custom widths in the dashboard? Where there can be multiple log tables in a single dashboard.

Column sizes require "tableId" prop for column sizes to work, the ID is used for storage. the ID prop ideally is unique per table. I did debate on taking the URL path into consideration when saving to storage, as that would mean the column sizes are unique per URL and per table. but I didn't want to over complicate it for now. I can add that if we want to go that route.

Minor thing to look out for - you can also add custom columns to a table, so the number of columns can change.

I haven't really found an elegant solution to this, looking for any feedback here.

I have used "any" ts type, I haven't found a way to get around it, any help appreciated here as well.