SRVKP-11383: Fix alignment of loading indicators in pipeline overview charts and pipelines metric charts ( Prometheus )

[adityavshinde]

Description

This PR is for Prometheus metrics which improves the UI of the Pipeline Overview page during the data-fetching phase. Previously, the loading spinners in the chart cards were misaligned. This update uses PatternFly 6 flex utilities to properly center the <LoadingInline /> components both vertically and horizontally within their respective chart areas.

Additionally, it prevents the search bar and pipeline/repository toggle controls from rendering prematurely on the list page while the initial data is still loading.

Behaviour ( via Screen Recording )

Before

Prometheus-loader-before.mp4

After

Prometheus-loader-after.mp4

Changes Made

• PipelinesAverageDurationK8s.tsx: Added PatternFly flex centering utilities (justify-content-center, align-items-center) to the loading wrapper.
• PipelinesRunsStatusCardK8s.tsx: Conditionally applied centering utilities for both the Donut chart and Line chart loaders to ensure perfect alignment without breaking the loaded chart layouts.
• PipelinerunsNumbersChartK8s.tsx: Centered the loading spinner for the numbers chart area.
• PipelineRunsListPageK8s.tsx: Wrapped the upper controls grid (SearchInputField and ToggleGroup) in a loaded condition so they only appear once the underlying list data is ready.

How to Test

1. Navigate to the Pipeline Overview page. Also need to change the console-extensions.json for Prometheus
2. Throttling your network speed in the browser dev tools (e.g., set to "Slow 3G") can help visualize the loading state.
3. Verify that the loading spinners for the Average Duration, PipelineRun Status, and Number of PipelineRuns cards are perfectly centered.
4. Verify that the search input and toggle group at the bottom of the page do not appear until the data has finished loading.

[openshift-ci-robot]

@adityavshinde: This pull request references SRVKP-11383 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 bug to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Description

This PR is for Prometheus metrics which improves the UI of the Pipeline Overview page during the data-fetching phase. Previously, the loading spinners in the chart cards were misaligned. This update uses PatternFly 6 flex utilities to properly center the <LoadingInline /> components both vertically and horizontally within their respective chart areas.

Additionally, it prevents the search bar and pipeline/repository toggle controls from rendering prematurely on the list page while the initial data is still loading.

Behaviour ( via Screen Recording )

Before

Prometheus-loader-before.mp4

After

Prometheus-loader-after.mp4

Changes Made

• PipelinesAverageDurationK8s.tsx: Added PatternFly flex centering utilities (justify-content-center, align-items-center) to the loading wrapper.
• PipelinesRunsStatusCardK8s.tsx: Conditionally applied centering utilities for both the Donut chart and Line chart loaders to ensure perfect alignment without breaking the loaded chart layouts.
• PipelinerunsNumbersChartK8s.tsx: Centered the loading spinner for the numbers chart area.
• PipelineRunsListPageK8s.tsx: Wrapped the upper controls grid (SearchInputField and ToggleGroup) in a loaded condition so they only appear once the underlying list data is ready.

How to Test

1. Navigate to the Pipeline Overview page. Also need to change the console-extensions.json for Prometheus
2. Throttling your network speed in the browser dev tools (e.g., set to "Slow 3G") can help visualize the loading state.
3. Verify that the loading spinners for the Average Duration, PipelineRun Status, and Number of PipelineRuns cards are perfectly centered.
4. Verify that the search input and toggle group at the bottom of the page do not appear until the data has finished loading.

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]

@adityavshinde: This pull request references SRVKP-11383 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 bug to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Description

This PR is for Prometheus metrics which improves the UI of the Pipeline Overview page during the data-fetching phase. Previously, the loading spinners in the chart cards were misaligned. This update uses PatternFly 6 flex utilities to properly center the <LoadingInline /> components both vertically and horizontally within their respective chart areas.

Additionally, it prevents the search bar and pipeline/repository toggle controls from rendering prematurely on the list page while the initial data is still loading.

Behaviour ( via Screen Recording )

Before

Prometheus-loader-before.mp4

After

Prometheus-loader-after.mp4

Changes Made

• PipelinesAverageDurationK8s.tsx: Added PatternFly flex centering utilities (justify-content-center, align-items-center) to the loading wrapper.
• PipelinesRunsStatusCardK8s.tsx: Conditionally applied centering utilities for both the Donut chart and Line chart loaders to ensure perfect alignment without breaking the loaded chart layouts.
• PipelinerunsNumbersChartK8s.tsx: Centered the loading spinner for the numbers chart area.
• PipelineRunsListPageK8s.tsx: Wrapped the upper controls grid (SearchInputField and ToggleGroup) in a loaded condition so they only appear once the underlying list data is ready.

How to Test

1. Navigate to the Pipeline Overview page. Also need to change the console-extensions.json for Prometheus
2. Throttling your network speed in the browser dev tools (e.g., set to "Slow 3G") can help visualize the loading state.
3. Verify that the loading spinners for the Average Duration, PipelineRun Status, and Number of PipelineRuns cards are perfectly centered.
4. Verify that the search input and toggle group at the bottom of the page do not appear until the data has finished loading.

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]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: adityavshinde
Once this PR has been reviewed and has the lgtm label, please assign arvindk-softwaredev 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:

• OWNERS

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

[anwesha-palit-redhat]

Similar loader issue here ( please refer to the screen recording below )
Additionally the font-size is different between prometheus and tekton results, if possible please update it, if required you can create a new Jira but we should ensure that the font-sizes are similar between these 2 views

prometheus-verification-2.mov

prometheus-verification-1.mov