[One Discover] Add logic to customise column header in Discover via contextual exper… by achyutjhunjhunwala · Pull Request #226039 · elastic/kibana

achyutjhunjhunwala · 2025-07-01T15:21:26Z

closes https://github.com/elastic/logs-dev/issues/187

This PR adds an extension point to update Discover Column Headers in general via Contextual Profiles. For this particular PR, we only add icons for the summary column, but this PR would enable users to completely control the column header.

Tooltip with Contextual Experience - Logs

Tooltip with Contextual Experience - Traces

Tooltip without Contextual Experience - Default

…ience

elasticmachine · 2025-07-01T15:21:30Z

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)

src/platform/plugins/shared/discover/public/application/main/hooks/grid_customisations/logs.tsx

logeekal

Hey @achyutjhunjhunwala , it will be great if you can add a demo of how this change changes UI. It helps to get some context regarding the change.

Thanks.

jughosta

Hi @achyutjhunjhunwala,

Thanks for working on this new extension! Left some suggestions in comments.

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_column_header.tsx

src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_columns.tsx

...file_providers/observability/logs_data_source_profile/accessors/get_column_configuration.tsx

...le_providers/observability/traces_data_source_profile/accessors/get_column_configuration.tsx

src/platform/plugins/shared/discover/public/context_awareness/types.ts

achyutjhunjhunwala · 2025-07-02T13:42:59Z

Hey @achyutjhunjhunwala , it will be great if you can add a demo of how this change changes UI. It helps to get some context regarding the change.

Thanks.

@logeekal Sorry, i missed to post it here. I added it in the original linked ticket

https://github.com/elastic/logs-dev/issues/187#issuecomment-3024117125

…textual-profiles

tonyghiani

Codewise looks good to me and Julia already commented about improvements, it would be great to get a quick check on the copies.

achyutjhunjhunwala · 2025-07-07T14:12:29Z

Codewise looks good to me and Julia already commented about improvements, it would be great to get a quick check on the copies.

@tonyghiani Thank you so much for the feedback and review. The copy has already been verified in the linked original ticket here - https://github.com/elastic/logs-dev/issues/187#issuecomment-3024167718

…textual-profiles

cauemarcondes

LGTM

...e_providers/observability/traces_data_source_profile/accessors/get_columns_configuration.tsx

iblancof · 2025-07-08T07:10:25Z

...ile_providers/observability/logs_data_source_profile/accessors/get_columns_configuration.tsx

+    <FormattedMessage
+      id="discover.unifiedDataTable.tableHeader.logsContext.sourceFieldIconTooltip"
+      defaultMessage="Displays the most relevant resource identifiers like:{br}{br}service.name{br}host.name{br}kubernetes.pod.name{br}etc.{br}{br}followed by the log or error message.{br}if no message fields are present, it shows the full document instead"
+      values={{ br: <br /> }}


I tested it locally because the screenshots you shared didn’t quite match the content, just wanted to double check how it looked in the UI.

In the logs one, for example, it feels a bit off: there are line breaks, some sentences start without a capital letter after a dot, and the final dot is missing.

@iblancof The text was changed after the demo session to the team last week.I will update the screenshot in the description of this PR now.

The text and design both are indeed intended.

Line breaks are required here to make this list looks more readable.
The whole thing is a single sentence, just formatted like this.

Good catch on the period at the end of the sentence, and the missing capitalisation at start of the sentence. i will add that

Fixed e366f15

Thanks for sharing the context and making those small tweaks!

Agree with @iblancof that the tooltip content looks off. Even after the latest changes. Too many line breaks reduces readability of it.

Also instead of:

servicen.name host.name kubernetes.pod.name etc

we could rather show it as a list:

- servicen.name - host.name - kubernetes.pod.name - etc

Or rewrite it as 2 paragraphs:

Displays the most relevant resource identifiers (service.name, host.name, kubernetes.pod.name, etc) followed by the log or error message.
If no message-fields are present, it shows key:value pairs for the available fields.

@jughosta This design has been discussed multiple times and already approved by the Product team (cc: @LucaWintergerst)

Too many line breaks may be makes it difficult to read it in the code, but the intention here is to make it more readable to end user.

I like the suggestion to make it as a list adding the hyphens.

Unfortunately this could have been better handled inside a EuiPopover but given EUI guidenlines, we cannot use a Popover for onHover triggers.

Please check the description for updated Screenshot

…textual-profiles

achyutjhunjhunwala · 2025-07-08T07:48:39Z

@logeekal @jughosta Can you both please have a look on the PR and provide the final approval

logeekal

Thanks for reminder. I did the desk testing of Security solution and changes look good.

jughosta

Thanks for the changes!

...m/packages/shared/kbn-unified-data-table/src/components/data_table_summary_column_header.tsx

…textual-profiles

src/platform/packages/shared/kbn-unified-data-table/index.ts

jughosta · 2025-07-09T09:45:37Z

...ile_providers/observability/logs_data_source_profile/accessors/get_columns_configuration.tsx

+      ...column,
+      display: (
+        <DataTableSummaryColumnHeaderLogsContext
+          columnDisplayName={column.displayAsText}


It will be controlled then by another logic

kibana/src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_columns.tsx

Lines 173 to 177 in b4b49ac

const columnDisplayName = getColumnDisplayName(

columnName,

dataViewField?.displayName,

columnDisplay

);

Suggested change

columnDisplayName={column.displayAsText}

If the prop is removed, then it would use the new default value which you defined in src/platform/packages/shared/kbn-unified-data-table/src/components/data_table_summary_column_header.tsx

May be this is the intended behaviour.

How i see this is, the column get passed as a prop to this customisation which is used to render the column header. Now i want to keep the existing logic as much a possible and only apply customisation where required.

Meaning the columnDisplayNameis currently controlled via this function getColumnDisplayName. If tomorrow someone does some changes to this generic function, every other usage of this customisation would automatically inherit it.

whereas the default handling logic would handle situation where a generic customisation decided to completely remove the name, which wouldn't be ideal

jughosta · 2025-07-09T09:46:10Z

...ile_providers/observability/logs_data_source_profile/accessors/get_columns_configuration.tsx

+
+  return (
+    <UnifiedDataTableSummaryColumnHeader
+      columnDisplayName={columnDisplayName}


Suggested change

columnDisplayName={columnDisplayName}

same as above

jughosta · 2025-07-09T09:46:23Z

...e_providers/observability/traces_data_source_profile/accessors/get_columns_configuration.tsx

+      ...column,
+      display: (
+        <DataTableSummaryColumnHeaderTracesContext
+          columnDisplayName={column.displayAsText}


Suggested change

columnDisplayName={column.displayAsText}

same as above

jughosta · 2025-07-09T09:46:30Z

...e_providers/observability/traces_data_source_profile/accessors/get_columns_configuration.tsx

+
+  return (
+    <UnifiedDataTableSummaryColumnHeader
+      columnDisplayName={columnDisplayName}


Suggested change

columnDisplayName={columnDisplayName}

jughosta · 2025-07-09T10:08:43Z

...ile_providers/observability/logs_data_source_profile/accessors/get_columns_configuration.tsx

+    <FormattedMessage
+      id="discover.unifiedDataTable.tableHeader.logsContext.sourceFieldIconTooltip"
+      defaultMessage="Displays the most relevant resource identifiers like:{br}{br}service.name{br}host.name{br}kubernetes.pod.name{br}etc.{br}{br}followed by the log or error message.{br}if no message fields are present, it shows the full document instead"
+      values={{ br: <br /> }}


Agree with @iblancof that the tooltip content looks off. Even after the latest changes. Too many line breaks reduces readability of it.

Also instead of:

servicen.name host.name kubernetes.pod.name etc

we could rather show it as a list:

- servicen.name - host.name - kubernetes.pod.name - etc

jughosta · 2025-07-09T10:12:51Z

...ile_providers/observability/logs_data_source_profile/accessors/get_columns_configuration.tsx

+    <FormattedMessage
+      id="discover.unifiedDataTable.tableHeader.logsContext.sourceFieldIconTooltip"
+      defaultMessage="Displays the most relevant resource identifiers like:{br}{br}service.name{br}host.name{br}kubernetes.pod.name{br}etc.{br}{br}followed by the log or error message.{br}if no message fields are present, it shows the full document instead"
+      values={{ br: <br /> }}


Or rewrite it as 2 paragraphs:

Displays the most relevant resource identifiers (service.name, host.name, kubernetes.pod.name, etc) followed by the log or error message.
If no message-fields are present, it shows key:value pairs for the available fields.

elasticmachine · 2025-07-09T13:07:01Z

💚 Build Succeeded

Buildkite Build
Commit: 015ac3c

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cloudSecurityPosture`	714	715	+1
`discover`	1462	1465	+3
`esqlDataGrid`	445	446	+1
`lens`	1446	1447	+1
`securitySolution`	7838	7839	+1
`slo`	1300	1301	+1
total			+8

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/unified-data-table`	93	100	+7

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`cloudSecurityPosture`	555.0KB	555.9KB	+866.0B
`discover`	1.1MB	1.1MB	-850.0B
`esqlDataGrid`	157.2KB	158.1KB	+865.0B
`securitySolution`	9.8MB	9.8MB	+865.0B
`slo`	988.7KB	989.6KB	+871.0B
total			+2.6KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`cloudSecurityPosture`	19.0KB	19.0KB	-1.0B
`discover`	22.5KB	22.5KB	+36.0B
total			+35.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/unified-data-table`	102	109	+7

async chunk count

id	before	after	diff
`discover`	39	40	+1

History

💔 Build #317117 failed 749e7d5
💔 Build #316774 failed f9b578d
💚 Build #316534 succeeded 3a1e70a
💔 Build #316359 failed c2df0be
💔 Build #316236 failed b1cbe5e

cc @achyutjhunjhunwala

…ontextual exper… (elastic#226039) closes elastic/logs-dev#187 This PR adds an extension point to update Discover Column Headers in general via Contextual Profiles. For this particular PR, we only add icons for the summary column, but this PR would enable users to completely control the column header.

Add logic to customise column header in Discover via contextual exper…

1945c43

…ience

achyutjhunjhunwala self-assigned this Jul 1, 2025

achyutjhunjhunwala added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Jul 1, 2025

achyutjhunjhunwala requested a review from a team July 1, 2025 15:21

achyutjhunjhunwala requested review from a team as code owners July 1, 2025 15:21

achyutjhunjhunwala added the Team:obs-onboarding Observability Onboarding Team label Jul 1, 2025

achyutjhunjhunwala requested a review from a team as a code owner July 1, 2025 15:21

achyutjhunjhunwala commented Jul 1, 2025

View reviewed changes

src/platform/plugins/shared/discover/public/application/main/hooks/grid_customisations/logs.tsx Show resolved Hide resolved

achyutjhunjhunwala added 2 commits July 2, 2025 12:55

Fix checktype issues

4907b9c

Fix text punctuations

84ac05e

logeekal reviewed Jul 2, 2025

View reviewed changes

jughosta reviewed Jul 2, 2025

View reviewed changes

kertal added Feature:Discover Discover Application Project:OneDiscover Enrich Discover with contextual awareness labels Jul 2, 2025

achyutjhunjhunwala added 2 commits July 2, 2025 18:44

Merge branch 'main' into Add-column-header-customisation-hook-via-con…

a47eab9

…textual-profiles

Merge branch 'main' into Add-column-header-customisation-hook-via-con…

b1cbe5e

…textual-profiles

tonyghiani approved these changes Jul 7, 2025

View reviewed changes

achyutjhunjhunwala added 3 commits July 7, 2025 15:32

Fix all review comments from Data Discover team

6403707

Update text

cd3254d

Fix content for traces as well

d6aab91

achyutjhunjhunwala added 3 commits July 7, 2025 16:14

remove unwanted tests

c2df0be

Update snapshots for unit tests due to component name change

509b680

Merge branch 'main' into Add-column-header-customisation-hook-via-con…

3a1e70a

…textual-profiles

achyutjhunjhunwala enabled auto-merge (squash) July 7, 2025 20:09

cauemarcondes approved these changes Jul 7, 2025

View reviewed changes

iblancof reviewed Jul 8, 2025

View reviewed changes

...e_providers/observability/traces_data_source_profile/accessors/get_columns_configuration.tsx Outdated Show resolved Hide resolved

iblancof reviewed Jul 8, 2025

View reviewed changes

achyutjhunjhunwala added 2 commits July 8, 2025 09:42

Add the missing period at the end

e366f15

Merge branch 'main' into Add-column-header-customisation-hook-via-con…

038f6e3

…textual-profiles

logeekal approved these changes Jul 8, 2025

View reviewed changes

jughosta reviewed Jul 8, 2025

View reviewed changes

achyutjhunjhunwala added 3 commits July 8, 2025 14:31

Fix further review comments

f9b578d

Fix import change

21028e6

Merge branch 'main' into Add-column-header-customisation-hook-via-con…

749e7d5

…textual-profiles

jughosta reviewed Jul 9, 2025

View reviewed changes

achyutjhunjhunwala added 2 commits July 9, 2025 12:16

Fix Unit tests and added more coverage

8006fe6

Fix last set of review comments wrt design

015ac3c

jughosta approved these changes Jul 9, 2025

View reviewed changes

achyutjhunjhunwala merged commit 1d6038d into elastic:main Jul 9, 2025
12 checks passed

achyutjhunjhunwala deleted the Add-column-header-customisation-hook-via-contextual-profiles branch July 9, 2025 13:06

kibanamachine added the v9.2.0 label Jul 9, 2025

davismcphee mentioned this pull request Jul 18, 2025

[Discover] Custom column header extension point in mixed data scenarios #228674

Open

	const columnDisplayName = getColumnDisplayName(
	columnName,
	dataViewField?.displayName,
	columnDisplay
	);

Conversation

achyutjhunjhunwala commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tooltip with Contextual Experience - Logs

Tooltip with Contextual Experience - Traces

Tooltip without Contextual Experience - Default

Uh oh!

elasticmachine commented Jul 1, 2025

Uh oh!

Uh oh!

logeekal left a comment

Choose a reason for hiding this comment

Uh oh!

jughosta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

achyutjhunjhunwala commented Jul 2, 2025

Uh oh!

tonyghiani left a comment

Choose a reason for hiding this comment

Uh oh!

achyutjhunjhunwala commented Jul 7, 2025

Uh oh!

cauemarcondes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achyutjhunjhunwala Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achyutjhunjhunwala commented Jul 8, 2025

Uh oh!

logeekal left a comment

Choose a reason for hiding this comment

Uh oh!

jughosta left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achyutjhunjhunwala Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

achyutjhunjhunwala commented Jul 1, 2025 •

edited

Loading

achyutjhunjhunwala Jul 8, 2025 •

edited

Loading

achyutjhunjhunwala Jul 9, 2025 •

edited

Loading