Merge pull request #1005 from ankrsinha/fix/SRVKP-10073

openshift-merge-bot[bot] · web-flow · commit eff032ddc292 · 2026-03-30T12:33:03.000Z
SRVKP-10073: Remove nested scrollbars from pipeline metrics page
diff --git a/src/components/pipelines-metrics/PipelinesAverageDuration.tsx b/src/components/pipelines-metrics/PipelinesAverageDuration.tsx
@@ -38,6 +38,7 @@ interface PipelinesAverageDurationProps {
   parentName?: string;
   kind?: string;
   namespace?: string;
+  width?: number;
 }
 type DomainType = { x?: DomainTuple; y?: DomainTuple };
 
@@ -75,6 +76,7 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
   parentName,
   namespace,
   kind,
+  width = 530
 }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const isDevConsoleProxyAvailable = useFlag(FLAGS.DEVCONSOLE_PROXY);
@@ -236,24 +238,30 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
 
   return (
     <>
-      <Card
-        className={classNames('pipeline-overview__number-of-plr-card', {
+     <Card
+        className={classNames('pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
+          'pipeline-overview__number-of-plr-card': !pipelineAverageDurationError,
           'card-border': bordered,
+          'pf-v6-u-h-100': !pipelineAverageDurationError,
         })}
       >
         <CardTitle className="pipeline-overview__number-of-plr-card__title">
           <span>{t('Average duration')}</span>
         </CardTitle>
-        <CardBody className="pipeline-overview__number-of-plr-card__body">
+         <CardBody
+            className={classNames({
+              'pf-v6-u-flex-1 pipeline-overview__min-height-0 pf-v6-u-display-flex pf-v6-u-flex-direction-column pf-v6-u-justify-content-flex-end pf-v6-u-align-items-flex-start pf-v6-u-p-0': !pipelineAverageDurationError,
+            })}
+          >
           {pipelineAverageDurationError ? (
             <Alert
               variant="danger"
               isInline
               title={t('Unable to load average duration')}
-              className="pf-v5-u-my-lg pf-v5-u-ml-lg"
+              className="pf-v6-u-mb-md pf-v6-u-ml-lg pf-v6-u-mt-lg"
             />
           ) : (
-            <div className="pipeline-overview__number-of-plr-card__bar-chart-div">
+            <div className="pf-v6-u-flex-shrink-0">
               {loaded ? (
                 <Chart
                   containerComponent={
@@ -266,11 +274,12 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
                   domain={domainValue}
                   domainPadding={{ x: [30, 25] }}
                   height={145}
-                  width={400}
+                  width={width}
                   padding={{
                     top: 10,
                     bottom: 55,
                     left: 50,
+                    right: 50,
                   }}
                   themeColor={ChartThemeColor.blue}
                 >
@@ -290,7 +299,7 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
                   </ChartGroup>
                 </Chart>
               ) : (
-                <div className="pipeline-overview__number-of-plr-card__loading pf-v5-u-h-100">
+                <div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-h-100">
                   <LoadingInline />
                 </div>
               )}
diff --git a/src/components/pipelines-metrics/PipelinesMetricsPage.tsx b/src/components/pipelines-metrics/PipelinesMetricsPage.tsx
@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useState } from 'react';
 import PipelineRunsStatusCard from '../pipelines-overview/PipelineRunsStatusCard';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
 import PipelinesRunsDurationCard from '../pipelines-overview/PipelineRunsDurationCard';
 import PipelinesRunsNumbersChart from '../pipelines-overview/PipelineRunsNumbersChart';
 import {
@@ -53,7 +53,7 @@ const PipelinesMetricsPage: FC<PipelinesMetricsPageProps> = ({ obj }) => {
 
   return (
     <>
-      <Flex className="pipelines-metrix-dropdown">
+      <Flex className="pf-v6-u-mt-md pf-v6-u-ml-md">
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
         </FlexItem>
@@ -62,7 +62,7 @@ const PipelinesMetricsPage: FC<PipelinesMetricsPageProps> = ({ obj }) => {
         </FlexItem>
       </Flex>
 
-      <div className="pipelines-metrics__background">
+      <div className="pf-v6-u-p-md" style={{backgroundColor: 'var(--pf-t--global--background--color--secondary--default)'}}>
         <PipelineRunsStatusCard
           timespan={timespan}
           domain={{ y: [0, 100] }}
@@ -73,47 +73,37 @@ const PipelinesMetricsPage: FC<PipelinesMetricsPageProps> = ({ obj }) => {
           interval={interval}
         />
 
-        <Flex>
-          <FlexItem
-            className="pipelines-metrics__cards"
-            grow={{ default: 'grow' }}
-          >
-            <PipelinesRunsNumbersChart
-              namespace={namespace}
-              parentName={parentName}
-              timespan={timespan}
-              interval={interval}
-              kind={obj.kind}
-              domain={{ y: [0, 500] }}
-              width={400}
-            />
-          </FlexItem>
-          <FlexItem
-            className="pipelines-metrics__cards"
-            grow={{ default: 'grow' }}
-          >
-            <PipelinesAverageDuration
-              timespan={timespan}
-              domain={{ y: [0, 5] }}
-              namespace={namespace}
-              parentName={parentName}
-              interval={interval}
-              kind={obj.kind}
-            />
-          </FlexItem>
-          <FlexItem
-            className="pipelines-metrics__cards"
-            grow={{ default: 'grow' }}
-          >
-            <PipelinesRunsDurationCard
-              namespace={namespace}
-              parentName={parentName}
-              timespan={timespan}
-              interval={interval}
-              kind={obj.kind}
-            />
-          </FlexItem>
-        </Flex>
+        <Grid hasGutter className="pf-v6-u-mt-md">
+          <GridItem span={12} md={6} lg={4} className="pf-v6-u-min-width pf-v6-u-w-100">
+              <PipelinesRunsNumbersChart
+                namespace={namespace}
+                parentName={parentName}
+                timespan={timespan}
+                interval={interval}
+                kind={obj.kind}
+                domain={{ y: [0, 500] }}
+              />
+          </GridItem>
+          <GridItem span={12} md={6} lg={4} className="pf-v6-u-min-width pf-v6-u-w-100">
+              <PipelinesAverageDuration
+                timespan={timespan}
+                domain={{ y: [0, 5] }}
+                namespace={namespace}
+                parentName={parentName}
+                interval={interval}
+                kind={obj.kind}
+              />
+          </GridItem>
+          <GridItem span={12} md={12} lg={4} className="pf-v6-u-min-width pf-v6-u-w-100">
+              <PipelinesRunsDurationCard
+                namespace={namespace}
+                parentName={parentName}
+                timespan={timespan}
+                interval={interval}
+                kind={obj.kind}
+              />
+          </GridItem>
+        </Grid>
       </div>
     </>
   );
diff --git a/src/components/pipelines-overview/PipelineRunsDurationCard.tsx b/src/components/pipelines-overview/PipelineRunsDurationCard.tsx
@@ -113,7 +113,7 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
   return (
     <>
       <Card
-        className={classNames('pf-v6-u-h-100', {
+        className={classNames('pf-v6-u-h-100 pipeline-overview__min-width-full pf-v6-u-font-size-lg', {
           'card-border': bordered,
         })}
       >
diff --git a/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx b/src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
@@ -237,7 +237,7 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
   return (
     <>
       <Card
-        className={classNames('pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
+        className={classNames('pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
           'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
           'card-border': bordered,
           'pf-v6-u-h-100': !pipelineRunsChartError,

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({`
`113`	`113`	`return (`
`114`	`114`	`<>`
`115`	`115`	`<Card`
`116`		`- className={classNames('pf-v6-u-h-100', {`
	`116`	`+ className={classNames('pf-v6-u-h-100 pipeline-overview__min-width-full pf-v6-u-font-size-lg', {`
`117`	`117`	`'card-border': bordered,`
`118`	`118`	`})}`
`119`	`119`	`>`