Skip to content

Commit 54f34c7

Browse files
ankrsinhaankrsinha
committed
fix: remove nested scrollbars and align metric cards for tekton-results
- Override PF Card overflow to remove internal scrollbars - Ensure charts render at natural height using min-height - Remove PipelineMetrics.scss as it's no longer needed Signed-off-by: Ankur Sinha <anksinha@redhat.com> remove commented PipelineMetrics.scss import Signed-off-by: Ankur Sinha <anksinha@redhat.com>
1 parent a777dbd commit 54f34c7

6 files changed

Lines changed: 52 additions & 89 deletions

File tree

‎src/components/pipelines-metrics/PipelinesAverageDuration.tsx‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ interface PipelinesAverageDurationProps {
3838
parentName?: string;
3939
kind?: string;
4040
namespace?: string;
41+
width?: number;
4142
}
4243
type DomainType = { x?: DomainTuple; y?: DomainTuple };
4344

@@ -75,6 +76,7 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
7576
parentName,
7677
namespace,
7778
kind,
79+
width = 530
7880
}) => {
7981
const { t } = useTranslation('plugin__pipelines-console-plugin');
8082
const isDevConsoleProxyAvailable = useFlag(FLAGS.DEVCONSOLE_PROXY);
@@ -236,24 +238,30 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
236238

237239
return (
238240
<>
239-
<Card
240-
className={classNames('pipeline-overview__number-of-plr-card', {
241+
<Card
242+
className={classNames('pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
243+
'pipeline-overview__number-of-plr-card': !pipelineAverageDurationError,
241244
'card-border': bordered,
245+
'pf-v6-u-h-100': !pipelineAverageDurationError,
242246
})}
243247
>
244248
<CardTitle className="pipeline-overview__number-of-plr-card__title">
245249
<span>{t('Average duration')}</span>
246250
</CardTitle>
247-
<CardBody className="pipeline-overview__number-of-plr-card__body">
251+
<CardBody
252+
className={classNames({
253+
'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,
254+
})}
255+
>
248256
{pipelineAverageDurationError ? (
249257
<Alert
250258
variant="danger"
251259
isInline
252260
title={t('Unable to load average duration')}
253-
className="pf-v5-u-my-lg pf-v5-u-ml-lg"
261+
className="pf-v6-u-mb-md pf-v6-u-ml-lg pf-v6-u-mt-lg"
254262
/>
255263
) : (
256-
<div className="pipeline-overview__number-of-plr-card__bar-chart-div">
264+
<div className="pf-v6-u-flex-shrink-0">
257265
{loaded ? (
258266
<Chart
259267
containerComponent={
@@ -266,11 +274,12 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
266274
domain={domainValue}
267275
domainPadding={{ x: [30, 25] }}
268276
height={145}
269-
width={400}
277+
width={width}
270278
padding={{
271279
top: 10,
272280
bottom: 55,
273281
left: 50,
282+
right: 50,
274283
}}
275284
themeColor={ChartThemeColor.blue}
276285
>
@@ -290,7 +299,7 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
290299
</ChartGroup>
291300
</Chart>
292301
) : (
293-
<div className="pipeline-overview__number-of-plr-card__loading pf-v5-u-h-100">
302+
<div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-h-100">
294303
<LoadingInline />
295304
</div>
296305
)}

‎src/components/pipelines-metrics/PipelinesMetrics.scss‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎src/components/pipelines-metrics/PipelinesMetricsPage.tsx‎

Lines changed: 34 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { FC } from 'react';
22
import { useState } from 'react';
33
import PipelineRunsStatusCard from '../pipelines-overview/PipelineRunsStatusCard';
4-
import { Flex, FlexItem } from '@patternfly/react-core';
4+
import { Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core';
55
import PipelinesRunsDurationCard from '../pipelines-overview/PipelineRunsDurationCard';
66
import PipelinesRunsNumbersChart from '../pipelines-overview/PipelineRunsNumbersChart';
77
import {
@@ -17,7 +17,6 @@ import {
1717
useQueryParams,
1818
} from '../pipelines-overview/utils';
1919
import { PipelineKind } from '../../types';
20-
import './PipelinesMetrics.scss';
2120

2221
type PipelinesMetricsPageProps = {
2322
obj: PipelineKind;
@@ -54,7 +53,7 @@ const PipelinesMetricsPage: FC<PipelinesMetricsPageProps> = ({ obj }) => {
5453

5554
return (
5655
<>
57-
<Flex className="pipelines-metrix-dropdown">
56+
<Flex className="pf-v6-u-mt-md pf-v6-u-ml-md">
5857
<FlexItem>
5958
<TimeRangeDropdown timespan={timespan} setTimespan={setTimespan} />
6059
</FlexItem>
@@ -63,7 +62,7 @@ const PipelinesMetricsPage: FC<PipelinesMetricsPageProps> = ({ obj }) => {
6362
</FlexItem>
6463
</Flex>
6564

66-
<div className="pipelines-metrics__background">
65+
<div className="pf-v6-u-p-md" style={{backgroundColor: 'var(--pf-t--global--background--color--secondary--default)'}}>
6766
<PipelineRunsStatusCard
6867
timespan={timespan}
6968
domain={{ y: [0, 100] }}
@@ -74,47 +73,37 @@ const PipelinesMetricsPage: FC<PipelinesMetricsPageProps> = ({ obj }) => {
7473
interval={interval}
7574
/>
7675

77-
<Flex>
78-
<FlexItem
79-
className="pipelines-metrics__cards"
80-
grow={{ default: 'grow' }}
81-
>
82-
<PipelinesRunsNumbersChart
83-
namespace={namespace}
84-
parentName={parentName}
85-
timespan={timespan}
86-
interval={interval}
87-
kind={obj.kind}
88-
domain={{ y: [0, 500] }}
89-
width={400}
90-
/>
91-
</FlexItem>
92-
<FlexItem
93-
className="pipelines-metrics__cards"
94-
grow={{ default: 'grow' }}
95-
>
96-
<PipelinesAverageDuration
97-
timespan={timespan}
98-
domain={{ y: [0, 5] }}
99-
namespace={namespace}
100-
parentName={parentName}
101-
interval={interval}
102-
kind={obj.kind}
103-
/>
104-
</FlexItem>
105-
<FlexItem
106-
className="pipelines-metrics__cards"
107-
grow={{ default: 'grow' }}
108-
>
109-
<PipelinesRunsDurationCard
110-
namespace={namespace}
111-
parentName={parentName}
112-
timespan={timespan}
113-
interval={interval}
114-
kind={obj.kind}
115-
/>
116-
</FlexItem>
117-
</Flex>
76+
<Grid hasGutter className="pf-v6-u-mt-md">
77+
<GridItem span={12} md={6} lg={4} className="pf-v6-u-min-width pf-v6-u-w-100">
78+
<PipelinesRunsNumbersChart
79+
namespace={namespace}
80+
parentName={parentName}
81+
timespan={timespan}
82+
interval={interval}
83+
kind={obj.kind}
84+
domain={{ y: [0, 500] }}
85+
/>
86+
</GridItem>
87+
<GridItem span={12} md={6} lg={4} className="pf-v6-u-min-width pf-v6-u-w-100">
88+
<PipelinesAverageDuration
89+
timespan={timespan}
90+
domain={{ y: [0, 5] }}
91+
namespace={namespace}
92+
parentName={parentName}
93+
interval={interval}
94+
kind={obj.kind}
95+
/>
96+
</GridItem>
97+
<GridItem span={12} md={12} lg={4} className="pf-v6-u-min-width pf-v6-u-w-100">
98+
<PipelinesRunsDurationCard
99+
namespace={namespace}
100+
parentName={parentName}
101+
timespan={timespan}
102+
interval={interval}
103+
kind={obj.kind}
104+
/>
105+
</GridItem>
106+
</Grid>
118107
</div>
119108
</>
120109
);

‎src/components/pipelines-metrics/PipelinesMetricsPageK8s.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
useQueryParams,
1414
} from '../pipelines-overview/utils';
1515
import { PipelineKind } from '../../types';
16-
import './PipelinesMetrics.scss';
1716
import PipelineRunsStatusCardK8s from '../pipelines-overview/PipelineRunsStatusCardK8s';
1817
import PipelineRunsNumbersChartK8s from '../pipelines-overview/PipelineRunsNumbersChartK8s';
1918
import PipelineRunsDurationCardK8s from '../pipelines-overview/PipelineRunsDurationCardK8s';

‎src/components/pipelines-overview/PipelineRunsDurationCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
113113
return (
114114
<>
115115
<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', {
117117
'card-border': bordered,
118118
})}
119119
>

‎src/components/pipelines-overview/PipelineRunsNumbersChart.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
237237
return (
238238
<>
239239
<Card
240-
className={classNames('pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
240+
className={classNames('pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
241241
'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
242242
'card-border': bordered,
243243
'pf-v6-u-h-100': !pipelineRunsChartError,

0 commit comments

Comments
 (0)