CONSOLE-3955: Migrate LogSnippet to PatternFly component by stefanonardo · Pull Request #16190 · openshift/console

stefanonardo · 2026-03-24T09:37:00Z

Replace custom LogSnippet with the PatternFly component.
The PatternFly LogSnippet renders an alert by default instead of a left red border.

After:

Summary by CodeRabbit

Refactor
- Restructured log snippet component implementation to improve code organization and ensure better consistency across the application.
Style
- Updated spacing and padding for log snippet displays in build overview pages, enhancing visual presentation and readability of build logs.

openshift-ci-robot · 2026-03-24T09:37:05Z

@stefanonardo: This pull request references CONSOLE-3955 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

The PatternFly LogSnippet renders an alert by default instead of a left red border.

After:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

openshift-ci-robot · 2026-03-24T09:39:42Z

@stefanonardo: This pull request references CONSOLE-3955 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

The PatternFly LogSnippet renders an alert by default instead of a left red border.

After:

Summary by CodeRabbit

Refactor

Restructured log snippet component implementation to improve code organization and ensure better consistency across the application.

Style

Updated spacing and padding for log snippet displays in build overview pages, enhancing visual presentation and readability of build logs.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

coderabbitai · 2026-03-24T09:44:44Z

📝 Walkthrough

Walkthrough

The LogSnippet component is being migrated from the internal @console/shared package to PatternFly's component library (@patternfly/react-component-groups). The internal implementation, including its TypeScript component, SCSS stylesheet, and barrel exports, is being removed. The BuildOverview component is updated to import from the new PatternFly source, with the message prop restructured to wrap content in a  element and a new CSS class added for styling adjustments.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/packages/topology/src/components/workload/BuildOverview.tsx`:
- Line 2: The import is using the package internals for LogSnippet; change the
import to use the package root by replacing the internal path import of
LogSnippet with "import { LogSnippet } from
'@patternfly/react-component-groups'"; confirm that LogSnippet is exported from
`@patternfly/react-component-groups`@6.4.0 before changing (or if not exported,
add a short comment documenting the dependency and open an issue with PatternFly
to request a root export), and update any other occurrences in BuildOverview.tsx
that reference the internal path to keep imports consistent.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 323e6a7f-4dd8-4a1e-a0c7-f7125009cc44

📥 Commits

Reviewing files that changed from the base of the PR and between e44327c and 3ee31a8.

📒 Files selected for processing (6)

frontend/packages/console-shared/src/components/index.ts
frontend/packages/console-shared/src/components/log/LogSnippet.scss
frontend/packages/console-shared/src/components/log/LogSnippet.tsx
frontend/packages/console-shared/src/components/log/index.ts
frontend/packages/topology/src/components/workload/BuildOverview.scss
frontend/packages/topology/src/components/workload/BuildOverview.tsx

💤 Files with no reviewable changes (4)

frontend/packages/console-shared/src/components/log/index.ts
frontend/packages/console-shared/src/components/index.ts
frontend/packages/console-shared/src/components/log/LogSnippet.scss
frontend/packages/console-shared/src/components/log/LogSnippet.tsx

📜 Review details

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

frontend/packages/topology/src/components/workload/BuildOverview.scss
frontend/packages/topology/src/components/workload/BuildOverview.tsx

🔀 Multi-repo context openshift/console-operator

Linked repositories findings

openshift/console-operator

vendor/github.com/openshift/api/build/v1/types.go — contains a Build API field LogSnippet string json:"logSnippet,omitempty"`.[::openshift/console-operator::vendor/github.com/openshift/api/build/v1/types.go]
vendor/github.com/openshift/api/build/v1/generated.pb.go — multiple references to LogSnippet in protobuf marshaling/unmarshaling and string output (e.g., i -= len(m.LogSnippet), m.LogSnippet = string(...), `LogSnippet:` + fmt.Sprintf("%v", this.LogSnippet) +, etc.).[::openshift/console-operator::vendor/github.com/openshift/api/build/v1/generated.pb.go]

Notes: These show that the cluster Build API surfaces a logSnippet field (data model), which consumers (UIs) may render. The PR removed the LogSnippet React component from @console/shared and switched to a PatternFly component in topology; ensure other UI consumers that previously imported LogSnippet from @console/shared are updated to use the new PatternFly component or updated import paths.

🔇 Additional comments (2)

frontend/packages/topology/src/components/workload/BuildOverview.scss (1)

11-14: LGTM — CSS addition is consistent with existing patterns.

The new class follows the BEM naming convention already established in this file. The padding values align the log snippet content appropriately within the PatternFly alert layout.

frontend/packages/topology/src/components/workload/BuildOverview.tsx (1)

87-93: Migration to PatternFly LogSnippet confirmed—clean migration with no lingering dependencies.

Verification shows no imports of the old LogSnippet from @console/shared remain in the console repo. The component correctly imports from @patternfly/react-component-groups/src/LogSnippet and aligns with PatternFly's API.

Minor note: if message is undefined in the Build status, the code renders undefined. While acceptable, this could be tightened with a simple conditional like message && {message} to avoid the empty paragraph.

frontend/packages/topology/src/components/workload/BuildOverview.tsx

openshift-ci-robot · 2026-03-24T10:45:33Z

@stefanonardo: This pull request references CONSOLE-3955 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Replace custom LogSnippet with the PatternFly component.
The PatternFly LogSnippet renders an alert by default instead of a left red border.

After:

Summary by CodeRabbit

Refactor

Restructured log snippet component implementation to improve code organization and ensure better consistency across the application.

Style

Updated spacing and padding for log snippet displays in build overview pages, enhancing visual presentation and readability of build logs.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

logonoff

Nice!!

/label px-approved
/label docs-approved

logonoff · 2026-03-24T20:31:35Z

frontend/packages/topology/src/components/workload/BuildOverview.tsx

+  return unsuccessful ? (
+    <LogSnippet
+      className="build-overview__log-snippet"
+      message={<p>{message}</p>}


LogSnippet should already wrap the content in a pre or code so the p isn't necessary

@logonoff we do this to suppress the alert icon since we already display it in the component above the LogSnippet: https://github.com/patternfly/react-component-groups/blob/main/packages/module/src/LogSnippet/LogSnippet.tsx#L19

keep in mind that message is the "title" of the log snippet, the actual log is passed in logSnippet

logonoff · 2026-03-24T20:34:23Z

frontend/packages/topology/src/components/workload/BuildOverview.scss

+
+.build-overview__log-snippet {
+  padding: 10px 0 10px 19px;
+}


in general we prefer using PatternFly tokens and CSS where possible. there are a bunch of utility classes (https://www.patternfly.org/utility-classes/spacing) you can use which align with the PatternFly token system (https://www.patternfly.org/tokens/all-patternfly-tokens)

updated, thank you for the tip

openshift-ci-robot · 2026-03-25T09:40:32Z

@stefanonardo: This pull request references CONSOLE-3955 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Replace custom LogSnippet with the PatternFly component.
The PatternFly LogSnippet renders an alert by default instead of a left red border.

After:

Summary by CodeRabbit

Refactor

Restructured log snippet component implementation to improve code organization and ensure better consistency across the application.

Style

Updated spacing and padding for log snippet displays in build overview pages, enhancing visual presentation and readability of build logs.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

logonoff

/lgtm

openshift-ci · 2026-03-25T11:56:55Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff, stefanonardo

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

stefanonardo · 2026-03-26T09:47:21Z

/retest-required

openshift-ci · 2026-03-26T14:29:43Z

@stefanonardo: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

logonoff · 2026-03-26T14:50:27Z

/assign @yapei

openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Mar 24, 2026

openshift-ci bot requested review from TheRealJon and rhamilto March 24, 2026 09:37

openshift-ci bot added component/shared Related to console-shared component/topology Related to topology labels Mar 24, 2026

coderabbitai bot reviewed Mar 24, 2026

View reviewed changes

frontend/packages/topology/src/components/workload/BuildOverview.tsx Outdated Show resolved Hide resolved

stefanonardo force-pushed the CONSOLE-3955 branch from 3ee31a8 to fd4b2ec Compare March 24, 2026 09:56

jhadvig assigned sg00dwin Mar 24, 2026

logonoff reviewed Mar 24, 2026

View reviewed changes

openshift-ci bot added px-approved Signifies that Product Support has signed off on this PR docs-approved Signifies that Docs has signed off on this PR labels Mar 24, 2026

Migrate LogSnippet to PatternFly component

247c83f

stefanonardo force-pushed the CONSOLE-3955 branch from fd4b2ec to 247c83f Compare March 25, 2026 09:41

logonoff approved these changes Mar 25, 2026

View reviewed changes

openshift-ci bot assigned logonoff Mar 25, 2026

openshift-ci bot added the lgtm Indicates that a PR is ready to be merged. label Mar 25, 2026

openshift-ci bot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Mar 25, 2026

openshift-ci bot assigned yapei Mar 26, 2026

Conversation

stefanonardo commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

openshift-ci-robot commented Mar 24, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

openshift-ci-robot commented Mar 24, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 24, 2026

Walkthrough

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Linked repositories findings

openshift/console-operator

Uh oh!

Uh oh!

openshift-ci-robot commented Mar 24, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

logonoff Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

stefanonardo Mar 25, 2026 • 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!

logonoff Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

stefanonardo Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

openshift-ci-robot commented Mar 25, 2026 • edited by openshift-ci bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

logonoff left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci bot commented Mar 25, 2026

Uh oh!

stefanonardo commented Mar 26, 2026

Uh oh!

openshift-ci bot commented Mar 26, 2026

Uh oh!

logonoff commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

stefanonardo commented Mar 24, 2026 •

edited

Loading

openshift-ci-robot commented Mar 24, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Mar 24, 2026 •

edited by openshift-ci bot

Loading

openshift-ci-robot commented Mar 24, 2026 •

edited by openshift-ci bot

Loading

stefanonardo Mar 25, 2026 •

edited

Loading

openshift-ci-robot commented Mar 25, 2026 •

edited by openshift-ci bot

Loading