CONSOLE-4529: POC PodList using DataView PF extension #14897

Hyperkid123 · 2025-03-24T12:26:44Z

Jira: https://issues.redhat.com/browse/CONSOLE-4529

Replacing virtualized table with DataView component from PR extension.

Out of scope

Data view also provides a toolbar, however, toolbar implementation is not used here yet. It should be a follow-up once some design differences are addressed and potential issues with state management using mutable data structures.

Changes

Implement the pod PodList table using the DataView table component. Some code is copied and pasted from the virtualized table to prevent cyclic import and regressions to existing code.

The component re-uses almost all existing code. Most of the work is related to mapping current data to the required DataView format.

The infinite scroll table is replaced with a paginated table.

openshift-ci-robot · 2025-03-24T12:26:49Z

@Hyperkid123: This pull request references CONSOLE-4529 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 spike to target the "4.19.0" version, but no target version was set.

Details

In response to this:

Jira: https://issues.redhat.com/browse/CONSOLE-4529

Replacing virtualized table with DataView component from PR extension.

Out of scope

Data view also provides a toolbar, however, toolbar implementation is not used here yet. It should be a follow-up once some design differences are addressed and potential issues with state management using mutable data structures.

Changes

Implement the pod PodList table using the DataView table component. Some code is copied and pasted from the virtualized table to prevent cyclic import and regressions to existing code.

The component re-uses almost all existing code. Most of the work is related to mapping current data to the required DataView format.

The infinite scroll table is replaced with a paginated table.

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 · 2025-03-24T12:27:09Z

Hi @Hyperkid123. Thanks for your PR.

I'm waiting for a openshift member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

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.

openshift-ci · 2025-03-30T08:14:03Z

@Mylanos: The label(s) /label ok-to-test cannot be applied. These labels are supported: acknowledge-critical-fixes-only, platform/aws, platform/azure, platform/baremetal, platform/google, platform/libvirt, platform/openstack, ga, tide/merge-method-merge, tide/merge-method-rebase, tide/merge-method-squash, px-approved, docs-approved, qe-approved, ux-approved, no-qe, downstream-change-needed, rebase/manual, cluster-config-api-changed, approved, backport-risk-assessed, bugzilla/valid-bug, cherry-pick-approved, jira/valid-bug, plugin-api-approved, plugin-api-changed, stability-fix-approved, staff-eng-approved. Is this label configured under labels -> additional_labels or labels -> restricted_labels in plugin.yaml?

Details

In response to this:

/label ok-to-test

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.

openshift-merge-robot · 2025-03-30T08:14:09Z

PR needs rebase.

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.

Mylanos · 2025-03-30T08:14:29Z

/ok-to-test

openshift-ci · 2025-04-01T08:41:03Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: Hyperkid123
Once this PR has been reviewed and has the lgtm label, please assign rawagner for approval. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

frontend/OWNERS

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

rhamilto · 2025-05-13T15:01:17Z

frontend/public/components/data-view-poc/DataViewPodList.tsx

+ * The sorting logic was copied over from public/components/factory/Table/VirtualizedTable.tsx file
+ * For the most part it is 1:1
+ * column removal based on screen size was omitted from POC
+ * the columnShift attribute was omitted from the POC


It appears columnShift was added for the local storage operator plugin, which has since moved out of the repo, and I don't see any other instances that are using it, so I think it is ok to omit for now.

rhamilto · 2025-05-13T15:22:56Z

frontend/public/components/data-view-poc/DataViewPodList.tsx

+/**
+ * The sorting logic was copied over from public/components/factory/Table/VirtualizedTable.tsx file
+ * For the most part it is 1:1
+ * column removal based on screen size was omitted from POC


Do we want to preserve column removal as that is not PatternFly default behavior. @spadgett, @jhadvig, WDYT?

The more I continue to think about this, the more I think we need to engage UXD and PatternFly here. We have some very wide tables that will be unusable without a solution. PatternFly's sticky column seems like an obvious choice.

And if we do go the sticky column route, we could conceivably drop the maximum number of columns (currently 9) that can be active when column management is in use?

Also wondering if column management shouldn't be enabled on all tables? We've had requests for columns to be resizable, but PatternFly doesn't yet support that. Being able to manage the columns may help in that regard?

You can still use the original column "hiding" mechanism. You have to use different elements as your width baseline.

About the sticky columns, you can use any valid PF prop on your columns/cells.

You can still use the original column "hiding" mechanism. You have to use different elements as your width baseline.

Are you referring to column removal from right to left as the viewport shrinks? If so, can you clarify what you mean by "use different elements as your width baseline"?

Yes. I mean that. You can still do that, Its all about what data you feed to the data view. If you used the virtualized table as your element where you computed the widht and visible elements, now you would do that with the data view columns instead.

rhamilto · 2025-05-14T14:24:31Z

frontend/public/components/data-view-poc/DataViewPodList.tsx

+  }, {});
+  const debouncedOnFilterChange = useDebounceCallback(onFilterChange, 500);
+  const debouncedSetSearchParams = useDebounceCallback(setSearchParams, 500);
+  // Currently there is a big that will only return the first item from the query, even though there are multiple items for one group


@Hyperkid123, can you clarify what you mean here? I'm not clear on what you're describing.

Oh sorry. There was a bug. I fixed it here: patternfly/react-data-view#395

Bug not big 🙂

rhamilto · 2025-05-14T14:25:50Z

frontend/public/components/data-view-poc/DataViewPodList.tsx

+  const debouncedOnFilterChange = useDebounceCallback(onFilterChange, 500);
+  const debouncedSetSearchParams = useDebounceCallback(setSearchParams, 500);
+  // Currently there is a big that will only return the first item from the query, even though there are multiple items for one group
+  const { onSetFilters, filters: dataViewFilters } = useDataViewFilters({


clearAllFilters is missing here. I added it and passed it to <DataViewToolbar>, but it's not working. Any ideas?

Thinking this is a PatternFly bug.

patternfly/react-data-view#395

Thanks, @Hyperkid123. The clearAllFilters bug persists with v6.2.0 that includes patternfly/react-data-view#395.

When using clearAllFilters, the filters don't get unset.

Screen.Recording.2025-05-27.at.9.01.47.AM.mov

When removing the individual filter, the filter does get unset.

Screen.Recording.2025-05-27.at.9.02.08.AM.mov

OK I don't think its something specific to data view, I think it might be something with how I integrated it into the OCP. I'll poke around for a bit now.

Well no wonder, I did not add the clear all callback at all 🙂 . It should be a prop on this line: https://github.com/openshift/console/pull/14897/files#diff-73803de448a478f334f4a0c2b0c1b23bbc51a1835f6dcbb92b0afb74f6f956b0R752

Let me add a sample.

@rhamilto ok I've added the callback here: dd3ecf8

its almost working, I think with how the filtering is wired in this component in general it will need some extra bits than just using the standard callback. By iterating over the actual filters that are managed outside of data view and clearing them I am able to use that clear all and it clears the data.

Now that is where some OCP expertise is required as I did not want to start changing the data state management for the filters. Right with the POC the filters are being managed in two places. Which is most likely the reason why the standard clear all filters callback from data view does not do the job.

You will probably have to chose one or the other and not mix them.

Ok. I cobbled together a POC that only uses data view filters and everything works as expected.

Thats great to hear!

openshift-ci · 2025-05-28T12:11:59Z

@Hyperkid123: The following tests failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/okd-scos-images	`6a816c1`	link	true	`/test okd-scos-images`
ci/prow/e2e-gcp-console	`dd3ecf8`	link	true	`/test e2e-gcp-console`
ci/prow/images	`dd3ecf8`	link	true	`/test images`
ci/prow/frontend	`dd3ecf8`	link	true	`/test frontend`
ci/prow/backend	`dd3ecf8`	link	true	`/test backend`
ci/prow/okd-scos-e2e-aws-ovn	`dd3ecf8`	link	false	`/test okd-scos-e2e-aws-ovn`
ci/prow/analyze	`dd3ecf8`	link	true	`/test analyze`

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.

openshift-bot · 2025-08-28T09:00:37Z

Issues go stale after 90d of inactivity.

Mark the issue as fresh by commenting /remove-lifecycle stale.
Stale issues rot after an additional 30d of inactivity and eventually close.
Exclude this issue from closing by commenting /lifecycle frozen.

If this issue is safe to close now please do so with /close.

/lifecycle stale

openshift-bot · 2025-09-28T00:30:56Z

Stale issues rot after 30d of inactivity.

Mark the issue as fresh by commenting /remove-lifecycle rotten.
Rotten issues close after an additional 30d of inactivity.
Exclude this issue from closing by commenting /lifecycle frozen.

If this issue is safe to close now please do so with /close.

/lifecycle rotten
/remove-lifecycle stale

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

openshift-ci bot requested review from Mylanos and cajieh March 24, 2025 12:26

openshift-ci bot added component/core Related to console core functionality needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. labels Mar 24, 2025

Hyperkid123 changed the title ~~CONSOLE-4529: PodList using DataView PF extension~~ CONSOLE-4529: POC PodList using DataView PF extension Mar 24, 2025

openshift-merge-robot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Mar 30, 2025

openshift-ci bot added ok-to-test Indicates a non-member PR verified by an org member that is safe to test. and removed needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. labels Mar 30, 2025

Hyperkid123 force-pushed the data-view-poc branch from beae73a to 6107c3d Compare April 1, 2025 08:40

CONSOLE-4529: PodList using DataView PF extension

6a816c1

Hyperkid123 force-pushed the data-view-poc branch from 6107c3d to 6a816c1 Compare April 1, 2025 09:05

rhamilto reviewed May 13, 2025

View reviewed changes

rhamilto reviewed May 14, 2025

View reviewed changes

rhamilto mentioned this pull request May 15, 2025

[WIP] Data view poc #15057

Closed

Fix DataView POC clear-all filters callback

dd3ecf8

gansheer mentioned this pull request Jun 27, 2025

Migrate list page to Patternfly DataView camel-tooling/camel-dashboard-console#43

Open

vojtechszocs mentioned this pull request Aug 7, 2025

CONSOLE-4667: Add ResourceDataView component and related code #15375

Merged

openshift-ci bot added the lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. label Aug 28, 2025

openshift-ci bot added lifecycle/rotten Denotes an issue or PR that has aged beyond stale and will be auto-closed. and removed lifecycle/stale Denotes an issue or PR has remained open with no activity and has become stale. labels Sep 28, 2025

Hyperkid123 closed this Sep 30, 2025

Hyperkid123 deleted the data-view-poc branch September 30, 2025 06:55

CONSOLE-4529: POC PodList using DataView PF extension #14897

CONSOLE-4529: POC PodList using DataView PF extension #14897

Uh oh!

Conversation

Hyperkid123 commented Mar 24, 2025

Out of scope

Changes

Uh oh!

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

Uh oh!

Out of scope

Changes

Uh oh!

openshift-ci bot commented Mar 24, 2025

Uh oh!

openshift-ci bot commented Mar 30, 2025

Uh oh!

openshift-merge-robot commented Mar 30, 2025

Uh oh!

Mylanos commented Mar 30, 2025

Uh oh!

openshift-ci bot commented Apr 1, 2025

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!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hyperkid123 May 28, 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!

openshift-ci bot commented May 28, 2025

Uh oh!

openshift-bot commented Aug 28, 2025

Uh oh!

openshift-bot commented Sep 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

openshift-ci-robot commented Mar 24, 2025 •

edited by openshift-ci bot

Loading

Hyperkid123 May 28, 2025 •

edited

Loading