Skip to content

feat(x2a): Telemetry data for each job#2500

Merged
mareklibra merged 4 commits intoredhat-developer:mainfrom
eloycoto:TelemetryInformation
Mar 10, 2026
Merged

feat(x2a): Telemetry data for each job#2500
mareklibra merged 4 commits intoredhat-developer:mainfrom
eloycoto:TelemetryInformation

Conversation

@eloycoto
Copy link
Copy Markdown
Contributor

@eloycoto eloycoto commented Mar 9, 2026

Add a way to digest the telemetry data per each agent, so the user is able to understand what the LLM is doing.

image

@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented Mar 9, 2026

Missing Changesets

The following package(s) are changed by this PR but do not have a changeset:

  • @red-hat-developer-hub/backstage-plugin-x2a

See CONTRIBUTING.md for more information about how to add changesets.

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-x2a workspaces/x2a/plugins/x2a none v1.0.2

@rhdh-qodo-merge
Copy link
Copy Markdown

Review Summary by Qodo

Add telemetry data visualization for agent job execution

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add telemetry data visualization for LLM agent execution
• Create formatDuration utility for human-readable time display
• Display agent metrics including duration and tool calls
• Add multilingual support for telemetry UI labels
Diagram
flowchart LR
  A["Phase Data with Telemetry"] -->|"consumed by"| B["PhaseDetails Component"]
  B -->|"renders"| C["PhaseTelemetry Component"]
  C -->|"uses"| D["formatDuration Utility"]
  C -->|"displays"| E["Agent Metrics Table"]
  E -->|"shows"| F["Agent Name, Duration, Tool Calls"]
  G["Translation Files"] -->|"provides labels"| C
Loading

Grey Divider

File Changes

1. workspaces/x2a/plugins/x2a/src/components/tools/formatDuration.ts ✨ Enhancement +31/-0

New utility function for duration formatting

workspaces/x2a/plugins/x2a/src/components/tools/formatDuration.ts


2. workspaces/x2a/plugins/x2a/src/components/tools/index.ts ✨ Enhancement +1/-0

Export new formatDuration utility function

workspaces/x2a/plugins/x2a/src/components/tools/index.ts


3. workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx ✨ Enhancement +111/-0

New component for displaying agent telemetry metrics

workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx


View more (6)
4. workspaces/x2a/plugins/x2a/src/components/PhaseDetails.tsx ✨ Enhancement +13/-1

Integrate telemetry display in phase details view

workspaces/x2a/plugins/x2a/src/components/PhaseDetails.tsx


5. workspaces/x2a/plugins/x2a/src/translations/ref.ts 📝 Documentation +7/-0

Add English telemetry translation keys and labels

workspaces/x2a/plugins/x2a/src/translations/ref.ts


6. workspaces/x2a/plugins/x2a/src/translations/de.ts 📝 Documentation +6/-0

Add German telemetry translation keys and labels

workspaces/x2a/plugins/x2a/src/translations/de.ts


7. workspaces/x2a/plugins/x2a/src/translations/es.ts 📝 Documentation +6/-0

Add Spanish telemetry translation keys and labels

workspaces/x2a/plugins/x2a/src/translations/es.ts


8. workspaces/x2a/plugins/x2a/src/translations/fr.ts 📝 Documentation +6/-0

Add French telemetry translation keys and labels

workspaces/x2a/plugins/x2a/src/translations/fr.ts


9. workspaces/x2a/plugins/x2a/src/translations/it.ts 📝 Documentation +6/-0

Add Italian telemetry translation keys and labels

workspaces/x2a/plugins/x2a/src/translations/it.ts


Grey Divider

Qodo Logo

@rhdh-qodo-merge
Copy link
Copy Markdown

rhdh-qodo-merge Bot commented Mar 9, 2026

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider


Action required

1. Invalid Box gap prop 🐞 Bug ✓ Correctness
Description
ToolCallsCell uses gap={0.5} on a Box imported from @material-ui/core (MUI v4). This prop is
not part of the v4 Box system props and may be forwarded as an invalid DOM attribute, leading to
React warnings and unreliable/absent chip spacing.
Code

workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx[46]

+    <Box display="flex" flexWrap="wrap" gap={0.5}>
Evidence
The telemetry UI uses Box from @material-ui/core and passes a gap prop. The plugin dependency
list shows @material-ui/core v4, and there is no evidence of adopting the v5 Box API in this
plugin; therefore gap is very likely not handled as a system prop and may be forwarded to the DOM
instead of being applied as layout spacing.

workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx[18-56]
workspaces/x2a/plugins/x2a/package.json[37-53]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`ToolCallsCell` uses `&lt;Box gap={0.5}&gt;` while importing `Box` from `@material-ui/core` (MUI v4). `gap` is not a reliable prop for v4 `Box` and can be forwarded as an invalid DOM attribute, producing React warnings and inconsistent spacing.

### Issue Context
This plugin depends on `@material-ui/core` v4, and the component imports `Box` from that package. Use v4-supported spacing patterns.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx[32-57]

### Suggested implementation direction
- Remove `gap={0.5}` from the `Box`.
- Add spacing via v4-supported props, e.g. wrap each `Chip` in a `&lt;Box mr={0.5} mb={0.5}&gt;...&lt;/Box&gt;`, or apply a `className`/`style` with margins to the `Chip` wrapper.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

);

return (
<Box display="flex" flexWrap="wrap" gap={0.5}>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Invalid box gap prop 🐞 Bug ✓ Correctness

ToolCallsCell uses gap={0.5} on a Box imported from @material-ui/core (MUI v4). This prop is
not part of the v4 Box system props and may be forwarded as an invalid DOM attribute, leading to
React warnings and unreliable/absent chip spacing.
Agent Prompt
### Issue description
`ToolCallsCell` uses `<Box gap={0.5}>` while importing `Box` from `@material-ui/core` (MUI v4). `gap` is not a reliable prop for v4 `Box` and can be forwarded as an invalid DOM attribute, producing React warnings and inconsistent spacing.

### Issue Context
This plugin depends on `@material-ui/core` v4, and the component imports `Box` from that package. Use v4-supported spacing patterns.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx[32-57]

### Suggested implementation direction
- Remove `gap={0.5}` from the `Box`.
- Add spacing via v4-supported props, e.g. wrap each `Chip` in a `<Box mr={0.5} mb={0.5}>...</Box>`, or apply a `className`/`style` with margins to the `Chip` wrapper.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

@eloycoto eloycoto force-pushed the TelemetryInformation branch from 2a4a7fe to 1cf7ee8 Compare March 9, 2026 16:09
Add a way to digest the telemetry data per each agent, so the user is able to understand what the LLM is doing.

Signed-off-by: Eloy Coto <eloy.coto@acalustra.com>
@eloycoto eloycoto force-pushed the TelemetryInformation branch from 1cf7ee8 to 30398e3 Compare March 9, 2026 16:22
Copy link
Copy Markdown
Member

@mareklibra mareklibra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rendering the data as chips prevents copy&paste and is hard to see/analyze otherwise.
@ShiranHi , any suggestions, please?

* limitations under the License.
*/

export const formatDuration = (durationSeconds: number): string => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add tests, cover NaN, null or undefined

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mind reusing the computeDuration() in the PhaseDetails.tsx

return (
<Box className={classes.chipContainer}>
{sortedToolCalls.map(([tool, count]) => (
<Chip
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Chip component is not ideal way to represent this kind of data. Let's find another form which allows easier analysis of the data.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1

}, [telemetry]);

const columns = useMemo((): TableColumn<AgentRow>[] => {
return [
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we render telemetry.summary as well?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about metrics?

@ShiranHi
Copy link
Copy Markdown

ShiranHi commented Mar 10, 2026

Rendering the data as chips prevents copy&paste and is hard to see/analyze otherwise. @ShiranHi , any suggestions, please?

I agree regarding the "Tool calls" column, the current chip layout makes the table cluttered and prevents quick comparisons. I suggest renaming the column to "Count of tool calls" and switching to a plain, vertically aligned list. This keeps the counts on the left for easy scanning while removing the visual noise of the chips.

For example:
Column name "Count of tool calls"
• 18 add_checklist_task
• 12 update_checklist_task
• 08 ansible_write
• 04 read_file

What do you think?

@eloycoto
Copy link
Copy Markdown
Contributor Author

I agree regarding the "Tool calls" column, the current chip layout makes the table cluttered and prevents quick comparisons. I suggest renaming the column to "Count of tool calls" and switching to a plain, vertically aligned list. This keeps the counts on the left for easy scanning while removing the visual noise of the chips.

For example:
Column name "Count of tool calls"
• 18 add_checklist_task
• 12 update_checklist_task
• 08 ansible_write
• 04 read_file

What do you think?

Make sense, let me implement it :)

@eloycoto
Copy link
Copy Markdown
Contributor Author

done, changes done:
image

Comment thread workspaces/x2a/plugins/x2a/src/components/PhaseTelemetry.tsx Outdated
Co-authored-by: Marek Libra <marek.libra@gmail.com>
@sonarqubecloud
Copy link
Copy Markdown

@mareklibra mareklibra merged commit b1f8e1d into redhat-developer:main Mar 10, 2026
9 checks passed
HusneShabbir pushed a commit to HusneShabbir/rhdh-plugins that referenced this pull request Mar 12, 2026
* feat(x2a): Telemetry data for each job

Add a way to digest the telemetry data per each agent, so the user is able to understand what the LLM is doing.

Signed-off-by: Eloy Coto <eloy.coto@acalustra.com>

* fix(x2a): format duration example

* feat(x2a): telemetry with ul list instead of chips

* Apply suggestion from @mareklibra

Co-authored-by: Marek Libra <marek.libra@gmail.com>

---------

Signed-off-by: Eloy Coto <eloy.coto@acalustra.com>
Co-authored-by: Marek Libra <marek.libra@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants