Skip to content

Commit a9caa8b

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #1022 from adityavshinde/fix/SRVKP-11383
SRVKP-11383: Fix alignment of loading indicators in pipeline overview charts and pipelines metric charts ( Prometheus )
2 parents 4dc6fca + d23f435 commit a9caa8b

4 files changed

Lines changed: 132 additions & 88 deletions

File tree

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { FC } from 'react';
2-
import { useState, useEffect } from 'react';
2+
import { useState, useEffect, useCallback } from 'react';
33
import _ from 'lodash';
44
import classNames from 'classnames';
55
import { useTranslation } from 'react-i18next';
@@ -42,7 +42,6 @@ interface PipelinesAverageDurationProps {
4242
interval?: number;
4343
parentName?: string;
4444
namespace?: string;
45-
width?: number;
4645
}
4746
type DomainType = { x?: DomainTuple; y?: DomainTuple };
4847

@@ -86,7 +85,6 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
8685
interval,
8786
parentName,
8887
namespace,
89-
width = 530,
9088
}) => {
9189
const { t } = useTranslation('plugin__pipelines-console-plugin');
9290
const startTimespan = timespan - parsePrometheusDuration('1d');
@@ -97,6 +95,13 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
9795
x: domainX || [startDate, endDate],
9896
y: domainY || undefined,
9997
};
98+
const [chartWidth, setChartWidth] = useState(0);
99+
const chartContainerRef = useCallback((node: HTMLDivElement | null) => {
100+
if (node) {
101+
setChartWidth(node.clientWidth);
102+
}
103+
}, []);
104+
100105
const [tickValues, type] = getXaxisValues(timespan);
101106
const [averageDurationError, setAverageDurationError] = useState<
102107
string | null
@@ -283,6 +288,7 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
283288
fontSize: 12,
284289
},
285290
};
291+
let bottomPad: number;
286292
if (tickValues.length > 7) {
287293
xAxisStyle = {
288294
tickLabels: {
@@ -293,7 +299,13 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
293299
verticalAnchor: 'end',
294300
},
295301
};
302+
bottomPad = 55;
303+
} else {
304+
bottomPad = 35;
296305
}
306+
if (showLabel) bottomPad += 15;
307+
// Calculating height using this formula with the help of width and bottom padding
308+
const chartHeight = 10 + Math.max(50, Math.min(100, Math.round(chartWidth / 5))) + bottomPad;
297309

298310
return (
299311
<>
@@ -321,7 +333,10 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
321333
className="pf-v6-u-ml-lg"
322334
/>
323335
) : (
324-
<div className="pf-v6-u-flex-shrink-0">
336+
<div
337+
ref={chartContainerRef}
338+
className={`pf-v6-u-w-100 ${chartWidth > 0 ? 'pf-v6-u-h-100' : ''}`}
339+
>
325340
{!averageDurationLoading ? (
326341
<Chart
327342
containerComponent={
@@ -333,11 +348,11 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
333348
scale={{ x: 'time', y: 'linear' }}
334349
domain={domainValue}
335350
domainPadding={{ x: [30, 25] }}
336-
height={145}
337-
width={width}
351+
height={chartHeight}
352+
width={chartWidth}
338353
padding={{
339354
top: 10,
340-
bottom: 55,
355+
bottom: bottomPad,
341356
left: 50,
342357
right: 50,
343358
}}
@@ -359,7 +374,7 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
359374
</ChartGroup>
360375
</Chart>
361376
) : (
362-
<div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-h-100">
377+
<div className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-h-100 pf-v6-u-p-md pf-v6-u-p-0-on-md">
363378
<LoadingInline />
364379
</div>
365380
)}

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

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { FC } from 'react';
2-
import { useState, useMemo, useEffect } from 'react';
2+
import { useState, useMemo, useEffect, useCallback } from 'react';
33
import * as _ from 'lodash';
44
import classNames from 'classnames';
55
import { useTranslation } from 'react-i18next';
@@ -34,16 +34,13 @@ import {
3434
} from '../pipelines-metrics/utils';
3535
import { LoadingInline } from '../Loading';
3636

37-
import './PipelinesOverview.scss';
38-
3937
interface PipelinesRunsNumbersChartProps {
4038
namespace?: string;
4139
timespan?: number;
4240
interval?: number;
4341
domain?: DomainPropType;
4442
parentName?: string;
4543
bordered?: boolean;
46-
width?: number;
4744
}
4845
type DomainType = { x?: DomainTuple; y?: DomainTuple };
4946

@@ -115,7 +112,6 @@ const PipelineRunsNumbersChartK8s: FC<PipelinesRunsNumbersChartProps> = ({
115112
domain,
116113
parentName,
117114
bordered,
118-
width = 530,
119115
}) => {
120116
const { t } = useTranslation('plugin__pipelines-console-plugin');
121117
const startTimespan = timespan - parsePrometheusDuration('1d');
@@ -233,6 +229,13 @@ const PipelineRunsNumbersChartK8s: FC<PipelinesRunsNumbersChartProps> = ({
233229
fontSize: 12,
234230
},
235231
};
232+
const [chartWidth, setChartWidth] = useState(0);
233+
const chartContainerRef = useCallback((node: HTMLDivElement | null) => {
234+
if (node) {
235+
setChartWidth(node.clientWidth);
236+
}
237+
}, []);
238+
let bottomPad: number;
236239
if (tickValues.length > 7) {
237240
xAxisStyle = {
238241
tickLabels: {
@@ -243,7 +246,13 @@ const PipelineRunsNumbersChartK8s: FC<PipelinesRunsNumbersChartProps> = ({
243246
verticalAnchor: 'end',
244247
},
245248
};
249+
bottomPad = 55;
250+
} else {
251+
bottomPad = 35;
246252
}
253+
if (showLabel) bottomPad += 15;
254+
// Calculating height using this formula with the help of width and bottom padding
255+
const chartHeight = 10 + Math.max(50, Math.min(100, Math.round(chartWidth / 5))) + bottomPad;
247256

248257
useEffect(() => {
249258
const hasNonAbortError =
@@ -280,10 +289,13 @@ const PipelineRunsNumbersChartK8s: FC<PipelinesRunsNumbersChartProps> = ({
280289
/>
281290
) : (
282291
<div
283-
className="pf-v6-u-flex-shrink-0"
292+
ref={chartContainerRef}
293+
className={`pf-v6-u-w-100 ${chartWidth > 0 ? 'pf-v6-u-h-100' : ''}`}
284294
>
285295
{loadingRunSuccessRatioData ? (
286-
<LoadingInline />
296+
<div className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-h-100 pf-v6-u-p-md pf-v6-u-p-0-on-md">
297+
<LoadingInline />
298+
</div>
287299
) : (
288300
<Chart
289301
containerComponent={
@@ -295,11 +307,11 @@ const PipelineRunsNumbersChartK8s: FC<PipelinesRunsNumbersChartProps> = ({
295307
scale={{ x: 'time', y: 'linear' }}
296308
domain={domainValue}
297309
domainPadding={{ x: [30, 25] }}
298-
height={145}
299-
width={width}
310+
height={chartHeight}
311+
width={chartWidth}
300312
padding={{
301313
top: 10,
302-
bottom: 55,
314+
bottom: bottomPad,
303315
left: 50,
304316
right: 50,
305317
}}

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

Lines changed: 69 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -565,64 +565,78 @@ const PipelineRunsStatusCardK8s: FC<PipelinesRunsStatusCardProps> = ({
565565
) : (
566566
<Grid className="pf-v6-u-align-items-center">
567567
<GridItem xl2={4} xl={12} lg={12} md={12} sm={12}>
568-
{loadingRunSuccessRatioData ? (
569-
<LoadingInline />
570-
) : (
571-
<div>
572-
<ChartDonut
573-
constrainToVisibleArea={true}
574-
data={donutDataK8s}
575-
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
576-
legendData={legendData}
577-
colorScale={colorScale}
578-
legendOrientation="vertical"
579-
legendPosition="right"
580-
height={200}
581-
padding={{
582-
bottom: 30,
583-
right: 140, // Adjusted to accommodate legend
584-
top: 20,
585-
}}
586-
legendComponent={
587-
<ChartLegend
588-
data={legendData}
589-
style={{
590-
labels: {
591-
fill: 'var(--pf-t--global--text--color--regular)',
568+
<div className="pf-v6-u-display-flex pf-v6-u-align-items-center pipeline-overview__chart-area">
569+
{loadingRunSuccessRatioData ? (
570+
<div className="pf-v6-u-display-flex pf-v6-u-align-items-center pf-v6-u-justify-content-center pf-v6-u-w-100">
571+
<LoadingInline />
572+
</div>
573+
) : (
574+
<div>
575+
<ChartDonut
576+
constrainToVisibleArea={true}
577+
data={donutDataK8s}
578+
labels={({ datum }) => `${datum.x}: ${datum.y}%`}
579+
legendData={legendData}
580+
colorScale={colorScale}
581+
legendOrientation="vertical"
582+
legendPosition="right"
583+
height={200}
584+
padding={{
585+
bottom: 30,
586+
right: 140, // Adjusted to accommodate legend
587+
top: 20,
588+
}}
589+
legendComponent={
590+
<ChartLegend
591+
data={legendData}
592+
style={{
593+
labels: {
594+
fill: 'var(--pf-t--global--text--color--regular)',
595+
fontSize: 14,
596+
},
597+
}}
598+
/>
599+
}
600+
subTitle={t('Succeeded')}
601+
subTitleComponent={
602+
<ChartLabel
603+
style={{
604+
fill: 'var(--pf-t--global--text--color--subtle)',
592605
fontSize: 14,
593-
},
594-
}}
595-
/>
596-
}
597-
subTitle={t('Succeeded')}
598-
subTitleComponent={
599-
<ChartLabel
600-
style={{
601-
fill: 'var(--pf-t--global--text--color--subtle)',
602-
fontSize: 14,
603-
}}
604-
/>
605-
}
606-
title={
607-
typeof donutDataObjK8s !== 'undefined'
608-
? `${donutDataObjK8s?.succeeded}/${totalPipelineRuns}`
609-
: ''
610-
}
611-
titleComponent={
612-
<ChartLabel
613-
style={{
614-
fill: 'var(--pf-t--global--text--color--regular)',
615-
fontSize: 24,
616-
}}
617-
/>
618-
}
619-
width={350}
620-
/>
621-
</div>
622-
)}
606+
}}
607+
/>
608+
}
609+
title={
610+
typeof donutDataObjK8s !== 'undefined'
611+
? `${donutDataObjK8s?.succeeded}/${totalPipelineRuns}`
612+
: ''
613+
}
614+
titleComponent={
615+
<ChartLabel
616+
style={{
617+
fill: 'var(--pf-t--global--text--color--regular)',
618+
fontSize: 24,
619+
}}
620+
/>
621+
}
622+
width={350}
623+
/>
624+
</div>
625+
)}
626+
</div>
623627
</GridItem>
624628
<GridItem xl2={8} xl={12} lg={12} md={12} sm={12}>
625-
<div className="pf-v6-u-display-flex pf-v6-u-align-items-flex-end pf-v6-u-h-100">
629+
<div
630+
className={classNames(
631+
'pf-v6-u-display-flex pf-v6-u-h-100 pf-v6-u-w-100 pipeline-overview__chart-area',
632+
{
633+
'pf-v6-u-align-items-flex-end':
634+
!loadingTotalPipelineRunsData,
635+
'pf-v6-u-align-items-center pf-v6-u-justify-content-center':
636+
loadingTotalPipelineRunsData,
637+
},
638+
)}
639+
>
626640
{loadingTotalPipelineRunsData ? (
627641
<LoadingInline />
628642
) : (

‎src/components/pipelines-overview/list-pages/PipelineRunsListPageK8s.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -271,20 +271,22 @@ const PipelineRunsListPageK8s: FC<PipelineRunsListPageProps> = ({
271271
/>
272272
) : (
273273
<>
274-
<Grid hasGutter className="pipeline-overview__listpage__grid">
275-
<GridItem
276-
span={9}
277-
className="pipeline-overview__listpage__griditem"
278-
>
279-
{/* Lastrun Status is not provided by API */}
280-
{/* <StatusDropdown /> */}
281-
<SearchInputField
282-
searchText={searchText}
283-
pageFlag={pageFlag}
284-
handleNameChange={handleNameChange}
285-
/>
286-
</GridItem>
287-
{/*
274+
{!loadingPipelineRunsMetricsCount &&
275+
!loadingPipelineRunsMetricsSum && (
276+
<Grid hasGutter className="pipeline-overview__listpage__grid">
277+
<GridItem
278+
span={9}
279+
className="pipeline-overview__listpage__griditem"
280+
>
281+
{/* Lastrun Status is not provided by API */}
282+
{/* <StatusDropdown /> */}
283+
<SearchInputField
284+
searchText={searchText}
285+
pageFlag={pageFlag}
286+
handleNameChange={handleNameChange}
287+
/>
288+
</GridItem>
289+
{/*
288290
Since Pipeline metrics for PAC is not available, commenting this
289291
<GridItem span={3}>
290292
<ToggleGroup className="pipeline-overview__listpage__button">
@@ -302,7 +304,8 @@ const PipelineRunsListPageK8s: FC<PipelineRunsListPageProps> = ({
302304
/>
303305
</ToggleGroup>
304306
</GridItem> */}
305-
</Grid>
307+
</Grid>
308+
)}
306309
<Grid hasGutter>
307310
<GridItem span={12}>
308311
{pageFlag === 1 ? (

0 commit comments

Comments
 (0)