feat: show/hide timestamp and body fields in logs explorer (raw, default, column views)

[ahmadshaheer]

Summary

Overview

Adds flexibility to control the visibility of timestamp and body fields across all logs explorer views (raw, default, column) while maintaining backward compatibility.

Key Changes

• Makes timestamp and body fields optional in logs display
• Adds default visibility for timestamp and body columns on new logs explorer visits
• Implements user preference persistence for column visibility

Backward Compatibility

• Automatically migrates old logs explorer URLs that lack timestamp/body in selectColumns
• Preserves functionality of existing saved views by adding default columns

User Experience

• Respects user preferences when timestamp/body columns are intentionally hidden
• Preserves column visibility choices in newly saved views
• Ensures at least one column is always visible to prevent empty logs

Related Issues / PR's

close #4999

Screenshots

2025-01-22.19-36-34.mov

Affected Areas and Manually Tested Areas

• Visit the logs explorer page from any other page, it should display the timestamp and body columns
• Visit a logs explorer link that doesn't have timestamp and body in the selectColumns query param, it should display the timestamp and body columns
• Visit the logs explorer page, and remove the timestamp / body columns from the options menu, it should be hidden
• Select an old saved view that doesn't have timestamp and body in the selectColumns, it should display the timestamp and body columns
• Remove the timestamp / body columns from the options menu, save the view, upon setting the view, it should respect the preference of removed columns
• While remove the columns from the options menu, don't allow removing the last column that can cause empty log line

---

Important

Adds optional visibility for timestamp and body fields in logs explorer views with user preference persistence and backward compatibility.

• Behavior:
  • Timestamp and body fields are now optional in logs explorer views (ListLogView, RawLogView, useTableView).
  • Default visibility for timestamp and body columns on new visits.
  • User preferences for column visibility are persisted.
• Backward Compatibility:
  • Migrates old logs explorer URLs missing timestamp/body in selectColumns.
  • Preserves existing saved views by adding default columns.
• User Experience:
  • Respects user preferences when timestamp/body columns are hidden.
  • Ensures at least one column is visible to prevent empty logs.
• Misc:
  • Adds defaultLogsSelectedColumns in constants.ts for default column settings.
  • Updates useOptionsMenu to handle new default columns and versioning.
  • Modifies LogsFormatOptionsMenu to prevent removing the last visible column.

^{This description was created by for 37d1f62. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 5d10be0 in 1 minute and 1 seconds

More details

• Looked at 394 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. frontend/src/components/Logs/TableView/useTableView.tsx:51

• Draft comment:
  Ensure that the filtering logic for fields correctly handles cases where 'timestamp' or 'body' might not be present in the fields array. This could lead to unexpected behavior if the fields array does not contain these fields.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx:125

• Draft comment:
  Ensure that the filtering logic in tableHeader correctly handles cases where the column key might be undefined or null to prevent unexpected behavior.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In the InfinityTableView component, the tableHeader function filters columns based on the presence of a key. However, it does not handle cases where the key might be undefined or null, which could lead to unexpected behavior.

3. frontend/src/components/Logs/ListLogView/index.tsx:222

• Draft comment:
  Avoid using inline styles. Use external stylesheets, CSS classes, or styled components instead.
• Reason this comment was not posted:
  Comment was on unchanged code.

4. frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts:32

• Draft comment:
  Avoid using inline styles. Use external stylesheets, CSS classes, or styled components instead.
• Reason this comment was not posted:
  Marked as duplicate.

5. frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts:29

• Draft comment:
  Avoid using inline styles. Use external stylesheets, CSS classes, or styled components instead.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_QqxiGtLkzvfjA5WO

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 37d1f62 in 59 seconds

More details

• Looked at 242 lines of code in 6 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx:420

• Draft comment:
  Consider refactoring the repeated logic addColumn?.value?.length > 1 into a variable for clarity and maintainability. This logic is used in multiple places, such as line 420 and line 413.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The code in LogsFormatOptionsMenu.tsx uses addColumn?.value?.length > 1 to conditionally render the delete button. This logic is repeated in multiple places, which can be refactored for clarity and maintainability.

2. frontend/src/container/ExplorerOptions/ExplorerOptions.tsx:293

• Draft comment:
  Consider refactoring the repeated logic of omitting the version key from options into a separate function for clarity and maintainability. This logic is used in multiple places, such as line 293 and line 290.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In ExplorerOptions.tsx, the omit function is used to remove the version key from options. This is done to maintain backward compatibility. However, this logic is repeated in multiple places, which can be refactored for clarity and maintainability.

3. frontend/src/pages/LogsExplorer/index.tsx:88

• Draft comment:
  Consider refactoring the migrateOptionsQuery function into a utility function for clarity and maintainability, as this logic is crucial for backward compatibility and is used in multiple places.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In LogsExplorer/index.tsx, the migrateOptionsQuery function is used to add default columns if the version is missing. This logic is crucial for backward compatibility and is repeated in multiple places. It can be refactored into a utility function for clarity and maintainability.

Workflow ID: wflow_ck1W2UTBj4oHglRg

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[nityanandagohain]

looks good to me, @vikrantgupta25 please review it from code prespective.