Merge pull request #1004 from adityavshinde/fix/SRVKP-10871

SRVKP-10871: Alignment fix for Pipelines Metrics page

Author: openshift-merge-bot[bot]

src/components/pipelines-metrics/PipelinesAverageDurationK8s.tsx

@@ -42,6 +42,7 @@ interface PipelinesAverageDurationProps {
   interval?: number;
   parentName?: string;
   namespace?: string;
+  width?: number;
 }
 type DomainType = { x?: DomainTuple; y?: DomainTuple };
 
@@ -85,6 +86,7 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
   interval,
   parentName,
   namespace,
+  width = 530
 }) => {
   const { t } = useTranslation('plugin__pipelines-console-plugin');
   const startTimespan = timespan - parsePrometheusDuration('1d');
@@ -297,23 +299,28 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
   return (
     <>
       <Card
-        className={classNames('pipeline-overview__number-of-plr-card', {
+        className={classNames({
+          'pf-v6-u-h-100 pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column': !averageDurationError,
           'card-border': bordered,
         })}
       >
-        <CardTitle className="pipeline-overview__number-of-plr-card__title">
+        <CardTitle className="pf-v6-u-pb-0">
           <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': !averageDurationError,
+          })}
+        >
           {averageDurationError ? (
             <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-ml-lg"
             />
           ) : (
-            <div className="pipeline-overview__number-of-plr-card__bar-chart-div">
+            <div className="pf-v6-u-flex-shrink-0">
               {!averageDurationLoading ? (
                 <Chart
                   containerComponent={
@@ -326,11 +333,12 @@ const PipelinesAverageDurationK8s: 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}
                 >

src/components/pipelines-metrics/PipelinesMetrics.scss

@@ -17,7 +17,6 @@ import {
   useQueryParams,
 } from '../pipelines-overview/utils';
 import { PipelineKind } from '../../types';
-import './PipelinesMetrics.scss';
 
 type PipelinesMetricsPageProps = {
   obj: PipelineKind;

src/components/pipelines-metrics/PipelinesMetricsPage.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useState } from 'react';
-import { Flex, FlexItem } from '@patternfly/react-core';
+import { Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
 import {
   formatPrometheusDuration,
   parsePrometheusDuration,
@@ -13,7 +13,6 @@ import {
   useQueryParams,
 } from '../pipelines-overview/utils';
 import { PipelineKind } from '../../types';
-import './PipelinesMetrics.scss';
 import PipelineRunsStatusCardK8s from '../pipelines-overview/PipelineRunsStatusCardK8s';
 import PipelineRunsNumbersChartK8s from '../pipelines-overview/PipelineRunsNumbersChartK8s';
 import PipelineRunsDurationCardK8s from '../pipelines-overview/PipelineRunsDurationCardK8s';
@@ -57,10 +56,10 @@ const PipelinesMetricsPageK8s: FC<PipelinesMetricsPageProps> = ({
 
   return (
     <>
-      <div className="k8s-overview-info-alert">
+      <div className="pf-v6-u-mt-md pf-v6-u-mx-md">
         <K8sDataLimitationAlert />
       </div>
-      <Flex className="pipelines-metrix-dropdown">
+      <Flex className="pf-v6-u-mt-md pf-v6-u-ml-md">
         <FlexItem>
           <TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
         </FlexItem>
@@ -69,7 +68,7 @@ const PipelinesMetricsPageK8s: FC<PipelinesMetricsPageProps> = ({
         </FlexItem>
       </Flex>
 
-      <div className="pipelines-metrics__background">
+      <div className="pf-v6-u-p-md" style={{backgroundColor: 'var(--pf-t--global--background--color--secondary--default)'}}>
         <PipelineRunsStatusCardK8s
           timespan={timespan}
           domain={{ y: [0, 100] }}
@@ -79,44 +78,34 @@ const PipelinesMetricsPageK8s: FC<PipelinesMetricsPageProps> = ({
           interval={interval}
         />
 
-        <Flex>
-          <FlexItem
-            className="pipelines-metrics__cards"
-            grow={{ default: 'grow' }}
-          >
+        <Grid hasGutter className='pf-v6-u-mt-md'>
+          <GridItem span={12} md={6} lg={4} className='pf-v6-u-display-flex pf-v6-u-min-width pf-v6-u-w-100'>
             <PipelineRunsNumbersChartK8s
               namespace={namespace}
               parentName={parentName}
               timespan={timespan}
               interval={interval}
               domain={{ y: [0, 500] }}
-              width={400}
             />
-          </FlexItem>
-          <FlexItem
-            className="pipelines-metrics__cards"
-            grow={{ default: 'grow' }}
-          >
+          </GridItem>
+          <GridItem span={12} md={6} lg={4} className='pf-v6-u-display-flex pf-v6-u-min-width pf-v6-u-w-100'>
             <PipelinesAverageDurationK8s
               timespan={timespan}
               domain={{ y: [0, 5] }}
               namespace={namespace}
               parentName={parentName}
               interval={interval}
             />
-          </FlexItem>
-          <FlexItem
-            className="pipelines-metrics__cards"
-            grow={{ default: 'grow' }}
-          >
+          </GridItem>
+          <GridItem span={12} md={12} lg={4} className='pf-v6-u-display-flex pf-v6-u-min-width pf-v6-u-w-100'>
             <PipelineRunsDurationCardK8s
               namespace={namespace}
               parentName={parentName}
               timespan={timespan}
               interval={interval}
             />
-          </FlexItem>
-        </Flex>
+          </GridItem>
+        </Grid>
       </div>
     </>
   );

src/components/pipelines-metrics/PipelinesMetricsPageK8s.tsx

@@ -259,7 +259,7 @@ const PipelineRunsNumbersChartK8s: FC<PipelinesRunsNumbersChartProps> = ({
     <>
       <Card
         className={classNames({
-          'pf-v6-u-h-100 pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column': !pipelineRunsChartError,
+          'pf-v6-u-h-100 pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column': !pipelineRunsChartError,
           'card-border': bordered,
         })}
       >