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

[ahmadshaheer]

Summary

Related Issues / PR's

close #4999
close https://github.com/SigNoz/engineering-pod/issues/2166

Screenshots

Before:

2025-01-16.16-36-11.mov

After:

2025-01-16.16-27-47.mov

Affected Areas and Manually Tested Areas

Tested:

• Hide timestamp / body columns in logs explorer, switch between (raw, default, column views), it shouldn't be visible
• Add them back, and they should be shown in all of the above views

Affected areas:

• Logs explorer views
  • Raw
  • Default
  • Column

---

Important

Add feature to toggle visibility of 'timestamp' and 'body' fields in logs explorer views.

• Behavior:
  • Add ability to show/hide timestamp and body fields in logs explorer views (ListLogView, RawLogView, TableView).
  • Update defaultOptionsQuery in constants.ts to include timestamp and body as default selected columns.
• Components:
  • ListLogView: Conditional rendering of LogGeneralField for timestamp and body.
  • RawLogView: Conditional rendering of timestamp and body in log text.
  • useTableView: Conditional rendering of timestamp and body columns.
• Options Menu:
  • Update useOptionsMenu to handle timestamp and body as default attributes for logs.
  • Modify searchedAttributeKeys to include timestamp and body for logs.

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

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to a217260 in 1 minute and 9 seconds

More details

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

1. frontend/src/components/Logs/ListLogView/index.tsx:219

• Draft comment:
  Typo in variable name: updatedSelecedFields should be updatedSelectedFields. This typo appears multiple times in this file and could lead to confusion or errors.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

2. frontend/src/components/Logs/RawLogView/index.tsx:75

• Draft comment:
  Typo in variable name: updatedSelecedFields should be updatedSelectedFields. This typo appears multiple times in this file and could lead to confusion or errors.
• Reason this comment was not posted:
  Marked as duplicate.

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

• Draft comment:
  The filtering logic for fields should ensure that 'timestamp' and 'body' are only excluded if they are not selected. Double-check the logic to ensure it aligns with the intended functionality of the PR.
• Reason this comment was not posted:
  Comment did not seem useful.

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

• Draft comment:
  Ensure that the filtering logic for columns correctly handles the 'timestamp' and 'body' fields based on user selection. This is crucial for the feature to work as intended.
• Reason this comment was not posted:
  Marked as duplicate.

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

• Draft comment:
  Avoid using inline styles for setting the color. Consider using CSS classes or styled components instead.
• Reason this comment was not posted:
  Comment was on unchanged code.

6. frontend/src/components/Logs/RawLogView/index.tsx:98

• Draft comment:
  Avoid using inline styles for setting the color. Consider using CSS classes or styled components instead.
• Reason this comment was not posted:
  Marked as duplicate.

7. frontend/src/components/Logs/TableView/useTableView.tsx:96

• Draft comment:
  Avoid using inline styles for setting the color. Consider using CSS classes or styled components instead.
• Reason this comment was not posted:
  Marked as duplicate.

8. frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx:126

• Draft comment:
  Avoid using inline styles for setting the color. Consider using CSS classes or styled components instead.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_EddsqU1y7IAX0Q8N

---

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

[vikrantgupta25]

when only the timestamp is present, the column view looks weird with timestamp column being given half the screen width

[ellipsis-dev]

👍 Looks good to me! Incremental review on 50b07b6 in 21 seconds

More details

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

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

• Draft comment:
  The padding set for $isLogIndicator overrides the padding set by fontSize. Consider combining these styles to avoid conflicts and ensure consistent styling. This issue is also present in TableHeaderCellStyled on line 89.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_lzyqgxpymMYJDSvI

---

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

[ahmadshaheer]

when only the timestamp is present, the column view looks weird with timestamp column being given half the screen width

Thanks for pointing this out, @vikrantgupta25, I fixed the issue 🙏 🙂 .