[ObsUX] Add accordion sections and attributes tables #224185
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services) |
.../components/observability/attributes/doc_viewer_attributes_overview/attributes_accordion.tsx
Outdated
Show resolved
Hide resolved
.../components/observability/attributes/doc_viewer_attributes_overview/attributes_accordion.tsx
Outdated
Show resolved
Hide resolved
| onAddColumn, | ||
| onRemoveColumn, | ||
| }: DocViewRenderProps) { | ||
| const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null); |
Contributor
There was a problem hiding this comment.
Why not useRef here instead of useState? That's usually recommended when dealing with refs
Contributor
Author
There was a problem hiding this comment.
Yes, you're right, I changed at some point and don't remember why
Contributor
Author
There was a problem hiding this comment.
Now, I remembered why I changed, using useRef, the containerHeight is not working, we needed so it not scrolls the tabs up
Screen.Recording.2025-06-18.at.08.56.32.mov
So, I checked how was done in table.tsx in platform, and they make it work with useState
...c/components/observability/attributes/doc_viewer_attributes_overview/attributes_overview.tsx
Show resolved
Hide resolved
...c/components/observability/attributes/doc_viewer_attributes_overview/attributes_overview.tsx
Outdated
Show resolved
Hide resolved
...c/components/observability/attributes/doc_viewer_attributes_overview/attributes_overview.tsx
Outdated
Show resolved
Hide resolved
...blic/components/observability/attributes/doc_viewer_attributes_overview/attributes_table.tsx
Outdated
Show resolved
Hide resolved
AlexGPlay
reviewed
Jun 18, 2025
...c/components/observability/attributes/doc_viewer_attributes_overview/attributes_overview.tsx
Outdated
Show resolved
Hide resolved
AlexGPlay
reviewed
Jun 18, 2025
...c/components/observability/attributes/doc_viewer_attributes_overview/attributes_overview.tsx
Outdated
Show resolved
Hide resolved
AlexGPlay
reviewed
Jun 18, 2025
...blic/components/observability/attributes/doc_viewer_attributes_overview/attributes_table.tsx
Outdated
Show resolved
Hide resolved
AlexGPlay
reviewed
Jun 18, 2025
...blic/components/observability/attributes/doc_viewer_attributes_overview/attributes_table.tsx
Outdated
Show resolved
Hide resolved
AlexGPlay
reviewed
Jun 18, 2025
| type DataStreamType = 'logs' | 'metrics' | 'traces' | undefined; | ||
|
|
||
| export function getDataStreamType(record: DataTableRecord): DataStreamType { | ||
| const types = getFieldValue(record, 'data_stream.type') as string[] | undefined; |
Contributor
There was a problem hiding this comment.
is this type assertion needed?
Contributor
Author
There was a problem hiding this comment.
I added it because ts was complaining that getFieldValue return unknown
AlexGPlay
reviewed
Jun 18, 2025
Comment on lines
+126
to
+128
| const containerHeight = containerRef | ||
| ? getTabContentAvailableHeight(containerRef, decreaseAvailableHeightBy ?? DEFAULT_MARGIN_BOTTOM) | ||
| : 0; |
Contributor
There was a problem hiding this comment.
nit: since we need a ref for some rendering should this be a useLayoutEffect/useEffect + useState?
Contributor
Author
There was a problem hiding this comment.
hi @AlexGPlay, that's what also @crespocarlos commented, I used the same as in table.tsx to not scroll the tabs, see my comment here
I'm open to find a better solution if you have a suggestion
Contributor
There was a problem hiding this comment.
no worries then, it's pretty similar to the useEffect + useState solution in terms of re-renders and this one looks good 👍
tonyghiani
approved these changes
Jun 18, 2025
Contributor
tonyghiani
left a comment
There was a problem hiding this comment.
Changes to get_doc_viewer LGTM 👌
crespocarlos
approved these changes
Jun 18, 2025
Contributor
crespocarlos
left a comment
There was a problem hiding this comment.
LGTM! Thanks for the changes.
AlexGPlay
approved these changes
Jun 18, 2025
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Module Count
Public APIs missing comments
Async chunks
Page load bundle
Unknown metric groupsAPI count
async chunk count
ESLint disabled line counts
Total ESLint disabled count
History
|
Contributor
|
Starting backport for target branches: 8.19 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jun 18, 2025
Closes elastic#221927 ## Summary #### New Component: `AttributesOverview` - Introduced a new component to provide a unified, user-friendly overview of document attributes in the Observability context. - The component organizes attributes into three main groups: - Signal attributes (e.g., attributes.*) - Resource attributes (e.g., resource.attributes.*) - Scope attributes (e.g., scope.attributes.*) - Each group is rendered in its own accordion section for clarity and ease of navigation. #### Search and Filtering - Added a search bar to filter attribute fields by name or value, improving discoverability. - Filtering logic ensures only relevant fields are shown in each section, based on both prefix and search term. #### Table Actions for Fields - Each attribute row in the table now includes cell actions, allowing users to: - Filter by field value directly from the table. - Add or remove fields as columns in Discover with a single click. - These actions improve workflow efficiency and align with Discover’s interactive capabilities. #### Integration - The new overview is integrated into the unified doc viewer, replacing or enhancing previous attribute display mechanisms. - Each accordion section uses the `AttributesAccordion` and `AttributesTable` components. #### Result The new attributes overview provides a clear, organized, and filterable view of all relevant document attributes, improving usability and consistency across the Observability UI. <img width="770" alt="image" src="https://github.com/user-attachments/assets/36fee343-fe63-4c55-ab37-0317a8512abf" />  ### Test: #### How to generate OTel data - Follow https://github.com/smith/elastic-stack-docker-compose?tab=readme-ov-file#elastic-stack-docker-compose #### How to test - Make sure your solution view is Observability - update your `kibana.yml` ``` discover.experimental.enabledProfiles: - observability-root-profile-with-attributes-tab # if you want to test it with the additional profiles add the following to your `kibana.yaml` - observability-traces-data-source-profile - observability-traces-transaction-document-profile - observability-traces-span-document-profile ``` (cherry picked from commit 04116c4)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jun 18, 2025
…#224435) # Backport This will backport the following commits from `main` to `8.19`: - [[ObsUX] Add accordion sections and attributes tables (#224185)](#224185) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Miriam","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-06-18T14:05:48Z","message":"[ObsUX] Add accordion sections and attributes tables (#224185)\n\nCloses https://github.com/elastic/kibana/issues/221927\n\n## Summary\n\n#### New Component: `AttributesOverview`\n\n- Introduced a new component to provide a unified, user-friendly\noverview of document attributes in the Observability context.\n- The component organizes attributes into three main groups:\n - Signal attributes (e.g., attributes.*)\n - Resource attributes (e.g., resource.attributes.*)\n - Scope attributes (e.g., scope.attributes.*)\n- Each group is rendered in its own accordion section for clarity and\nease of navigation.\n\n#### Search and Filtering\n\n- Added a search bar to filter attribute fields by name or value,\nimproving discoverability.\n- Filtering logic ensures only relevant fields are shown in each\nsection, based on both prefix and search term.\n\n#### Table Actions for Fields\n\n- Each attribute row in the table now includes cell actions, allowing\nusers to:\n- Filter by field value directly from the table.\n- Add or remove fields as columns in Discover with a single click.\n- These actions improve workflow efficiency and align with Discover’s\ninteractive capabilities.\n\n#### Integration\n\n- The new overview is integrated into the unified doc viewer, replacing\nor enhancing previous attribute display mechanisms.\n- Each accordion section uses the `AttributesAccordion` and\n`AttributesTable` components.\n\n#### Result\nThe new attributes overview provides a clear, organized, and filterable\nview of all relevant document attributes, improving usability and\nconsistency across the Observability UI.\n\n<img width=\"770\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/36fee343-fe63-4c55-ab37-0317a8512abf\"\n/>\n\n\n\n\n### Test:\n#### How to generate OTel data\n- Follow\nhttps://github.com/smith/elastic-stack-docker-compose?tab=readme-ov-file#elastic-stack-docker-compose\n\n#### How to test\n- Make sure your solution view is Observability\n- update your `kibana.yml` \n\n```\ndiscover.experimental.enabledProfiles:\n - observability-root-profile-with-attributes-tab\n # if you want to test it with the additional profiles add the following to your `kibana.yaml` \n - observability-traces-data-source-profile\n - observability-traces-transaction-document-profile\n - observability-traces-span-document-profile\n```","sha":"04116c4d15b28153ac42015607b75a683f573b5a","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:feature","Team:obs-ux-infra_services","backport:version","v9.1.0","v8.19.0"],"title":"[ObsUX] Add accordion sections and attributes tables","number":224185,"url":"https://github.com/elastic/kibana/pull/224185","mergeCommit":{"message":"[ObsUX] Add accordion sections and attributes tables (#224185)\n\nCloses https://github.com/elastic/kibana/issues/221927\n\n## Summary\n\n#### New Component: `AttributesOverview`\n\n- Introduced a new component to provide a unified, user-friendly\noverview of document attributes in the Observability context.\n- The component organizes attributes into three main groups:\n - Signal attributes (e.g., attributes.*)\n - Resource attributes (e.g., resource.attributes.*)\n - Scope attributes (e.g., scope.attributes.*)\n- Each group is rendered in its own accordion section for clarity and\nease of navigation.\n\n#### Search and Filtering\n\n- Added a search bar to filter attribute fields by name or value,\nimproving discoverability.\n- Filtering logic ensures only relevant fields are shown in each\nsection, based on both prefix and search term.\n\n#### Table Actions for Fields\n\n- Each attribute row in the table now includes cell actions, allowing\nusers to:\n- Filter by field value directly from the table.\n- Add or remove fields as columns in Discover with a single click.\n- These actions improve workflow efficiency and align with Discover’s\ninteractive capabilities.\n\n#### Integration\n\n- The new overview is integrated into the unified doc viewer, replacing\nor enhancing previous attribute display mechanisms.\n- Each accordion section uses the `AttributesAccordion` and\n`AttributesTable` components.\n\n#### Result\nThe new attributes overview provides a clear, organized, and filterable\nview of all relevant document attributes, improving usability and\nconsistency across the Observability UI.\n\n<img width=\"770\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/36fee343-fe63-4c55-ab37-0317a8512abf\"\n/>\n\n\n\n\n### Test:\n#### How to generate OTel data\n- Follow\nhttps://github.com/smith/elastic-stack-docker-compose?tab=readme-ov-file#elastic-stack-docker-compose\n\n#### How to test\n- Make sure your solution view is Observability\n- update your `kibana.yml` \n\n```\ndiscover.experimental.enabledProfiles:\n - observability-root-profile-with-attributes-tab\n # if you want to test it with the additional profiles add the following to your `kibana.yaml` \n - observability-traces-data-source-profile\n - observability-traces-transaction-document-profile\n - observability-traces-span-document-profile\n```","sha":"04116c4d15b28153ac42015607b75a683f573b5a"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/224185","number":224185,"mergeCommit":{"message":"[ObsUX] Add accordion sections and attributes tables (#224185)\n\nCloses https://github.com/elastic/kibana/issues/221927\n\n## Summary\n\n#### New Component: `AttributesOverview`\n\n- Introduced a new component to provide a unified, user-friendly\noverview of document attributes in the Observability context.\n- The component organizes attributes into three main groups:\n - Signal attributes (e.g., attributes.*)\n - Resource attributes (e.g., resource.attributes.*)\n - Scope attributes (e.g., scope.attributes.*)\n- Each group is rendered in its own accordion section for clarity and\nease of navigation.\n\n#### Search and Filtering\n\n- Added a search bar to filter attribute fields by name or value,\nimproving discoverability.\n- Filtering logic ensures only relevant fields are shown in each\nsection, based on both prefix and search term.\n\n#### Table Actions for Fields\n\n- Each attribute row in the table now includes cell actions, allowing\nusers to:\n- Filter by field value directly from the table.\n- Add or remove fields as columns in Discover with a single click.\n- These actions improve workflow efficiency and align with Discover’s\ninteractive capabilities.\n\n#### Integration\n\n- The new overview is integrated into the unified doc viewer, replacing\nor enhancing previous attribute display mechanisms.\n- Each accordion section uses the `AttributesAccordion` and\n`AttributesTable` components.\n\n#### Result\nThe new attributes overview provides a clear, organized, and filterable\nview of all relevant document attributes, improving usability and\nconsistency across the Observability UI.\n\n<img width=\"770\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/36fee343-fe63-4c55-ab37-0317a8512abf\"\n/>\n\n\n\n\n### Test:\n#### How to generate OTel data\n- Follow\nhttps://github.com/smith/elastic-stack-docker-compose?tab=readme-ov-file#elastic-stack-docker-compose\n\n#### How to test\n- Make sure your solution view is Observability\n- update your `kibana.yml` \n\n```\ndiscover.experimental.enabledProfiles:\n - observability-root-profile-with-attributes-tab\n # if you want to test it with the additional profiles add the following to your `kibana.yaml` \n - observability-traces-data-source-profile\n - observability-traces-transaction-document-profile\n - observability-traces-span-document-profile\n```","sha":"04116c4d15b28153ac42015607b75a683f573b5a"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Miriam <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #221927
Summary
New Component:
AttributesOverviewSearch and Filtering
Table Actions for Fields
Integration
AttributesAccordionandAttributesTablecomponents.Result
The new attributes overview provides a clear, organized, and filterable view of all relevant document attributes, improving usability and consistency across the Observability UI.
Test:
How to generate OTel data
How to test
kibana.yml