Skip to content

Commit 5701cf0

Browse files
pratap0007pratap0007
committed
refactor pipelines-overview page to use PatternFly v6 utilities
- Remove PipelinesOverview.scss, PipelineRunsDurationCard.scss, and PipelineRunsTotalCard.scss - Replace custom classes with pf-v6 utility classes across pipelines overview cards - Apply inline styles where needed for chart/card layout (flex, minHeight) Signed-off-by: Shiv Verma <shverma@redhat.com>
1 parent c387d0b commit 5701cf0

19 files changed

Lines changed: 224 additions & 365 deletions

‎src/components/pac/PacOverview.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ const PacOverview: FC<PacOverviewProps> = ({
6060
return (
6161
<>
6262
<NamespaceBar isDisabled={true} />
63-
<PageSection hasBodyWrapper={false}
63+
<PageSection
64+
hasBodyWrapper={false}
6465
type="breadcrumb"
6566
className="co-m-nav-title--detail pipelines-console-plugin__background-transparent"
6667
>
@@ -89,7 +90,8 @@ const PacOverview: FC<PacOverviewProps> = ({
8990
return (
9091
<>
9192
<NamespaceBar isDisabled={true} />
92-
<PageSection hasBodyWrapper={false}
93+
<PageSection
94+
hasBodyWrapper={false}
9395
type="breadcrumb"
9496
className="co-m-nav-title--detail pipelines-console-plugin__background-transparent"
9597
>

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

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as _ from 'lodash';
2-
import type { FC, Ref } from 'react';
2+
import type { FC } from 'react';
33
import { useState, useCallback, useMemo } from 'react';
44
import {
55
Dropdown,
@@ -11,7 +11,6 @@ import {
1111
import { alphanumericCompare } from './utils';
1212
import { useTranslation } from 'react-i18next';
1313

14-
import './PipelinesOverview.scss';
1514
import {
1615
useFlag,
1716
useK8sWatchResource,
@@ -65,38 +64,41 @@ const NameSpaceDropdown: FC<NameSpaceDropdownProps> = ({
6564
return items;
6665
}, [projects, projectsLoaded]);
6766

68-
return (<>
69-
<label className="project-dropdown-label">{t('Project')}</label>
70-
<Dropdown
71-
isOpen={isOpen}
72-
onOpenChange={(isOpen: boolean) => setValue(isOpen)}
73-
onSelect={setClosed}
74-
toggle={(toggleRef: Ref<MenuToggleElement>) => (
75-
<MenuToggle
76-
ref={toggleRef}
77-
onClick={toggleIsOpen}
78-
isExpanded={isOpen}
79-
>
80-
{selected !== ALL_NAMESPACES_KEY ? selected : allNamespacesTitle}
81-
</MenuToggle>
82-
)}
83-
className="pipeline-overview__variable-dropdown"
84-
isScrollable
85-
>
86-
<DropdownList>
87-
{_.map(optionItems, (name, key) => (
88-
<DropdownItem
89-
component="button"
90-
key={key}
91-
onClick={() => setSelected(name.key)}
92-
className={'max-height-menu'}
67+
return (
68+
<div className="form-group">
69+
<div>
70+
<label>{t('Project')}</label>
71+
</div>
72+
<Dropdown
73+
isOpen={isOpen}
74+
onOpenChange={(isOpen: boolean) => setValue(isOpen)}
75+
onSelect={setClosed}
76+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
77+
<MenuToggle
78+
ref={toggleRef}
79+
onClick={toggleIsOpen}
80+
isExpanded={isOpen}
9381
>
94-
{name.title}
95-
</DropdownItem>
96-
))}
97-
</DropdownList>
98-
</Dropdown>
99-
</>);
82+
{selected !== ALL_NAMESPACES_KEY ? selected : allNamespacesTitle}
83+
</MenuToggle>
84+
)}
85+
isScrollable
86+
>
87+
<DropdownList>
88+
{_.map(optionItems, (name, key) => (
89+
<DropdownItem
90+
component="button"
91+
key={key}
92+
onClick={() => setSelected(name.key)}
93+
className={'max-height-menu'}
94+
>
95+
{name.title}
96+
</DropdownItem>
97+
))}
98+
</DropdownList>
99+
</Dropdown>
100+
</div>
101+
);
100102
};
101103

102104
export default NameSpaceDropdown;

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

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

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

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { ALL_NAMESPACES_KEY } from '../../consts';
2424
import { formatTime, getDropDownDate } from './dateTime';
2525
import { LoadingInline } from '../Loading';
2626

27-
import './PipelineRunsDurationCard.scss';
27+
import './PipelinesOverview.scss';
2828

2929
interface PipelinesRunsDurationProps {
3030
namespace: string;
@@ -48,8 +48,9 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
4848
const isDevConsoleProxyAvailable = useFlag(FLAGS.DEVCONSOLE_PROXY);
4949
const [summaryData, setSummaryData] = useState<SummaryProps>({});
5050
const [loaded, setLoaded] = useState(false);
51-
const [pipelineRunsDurationError, setPipelineRunsDurationError] =
52-
useState<string | undefined>();
51+
const [pipelineRunsDurationError, setPipelineRunsDurationError] = useState<
52+
string | undefined
53+
>();
5354
const abortControllerRef = useRef<AbortController>();
5455

5556
if (namespace == ALL_NAMESPACES_KEY) {
@@ -112,7 +113,7 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
112113
return (
113114
<>
114115
<Card
115-
className={classNames('pipeline-overview__duration-card', {
116+
className={classNames('pf-v6-u-h-100', {
116117
'card-border': bordered,
117118
})}
118119
>
@@ -130,19 +131,16 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
130131
/>
131132
) : (
132133
<>
133-
<Grid
134-
hasGutter
135-
className="pipeline-overview__duration-card__grid"
136-
>
137-
<GridItem span={6}>
134+
<Grid hasGutter className="cpf-v6-u-mb-sm">
135+
<GridItem span={9} className="pf-v6-u-mb-sm">
138136
<span>
139-
<MonitoringIcon className="pipeline-overview__duration-card__icon" />
137+
<MonitoringIcon className="pf-v6-u-mr-sm" />
140138
{t('Average duration')}
141139
</span>
142140
</GridItem>
143141
<GridItem
144-
span={6}
145-
className="pipeline-overview__duration-card__value"
142+
span={3}
143+
className="pf-v6-u-text-align-end pipeline-overview__chart-color-blue"
146144
>
147145
{loaded ? (
148146
summaryData?.['avg_duration'] ? (
@@ -155,19 +153,16 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
155153
)}
156154
</GridItem>
157155
</Grid>
158-
<Grid
159-
hasGutter
160-
className="pipeline-overview__duration-card__grid"
161-
>
162-
<GridItem span={6}>
156+
<Grid hasGutter className="pf-v6-u-mb-sm">
157+
<GridItem span={9} className="pf-v6-u-mb-sm">
163158
<span>
164-
<InfoCircleIcon className="pipeline-overview__duration-card__info-icon" />
159+
<InfoCircleIcon className="pf-v6-u-mr-sm pipeline-overview__chart-color-blue" />
165160
{t('Maximum')}
166161
</span>
167162
</GridItem>
168163
<GridItem
169-
span={6}
170-
className="pipeline-overview__duration-card__value"
164+
span={3}
165+
className="pf-v6-u-text-align-end pipeline-overview__chart-color-blue"
171166
>
172167
{loaded ? (
173168
summaryData?.['max_duration'] ? (
@@ -181,15 +176,15 @@ const PipelinesRunsDurationCard: FC<PipelinesRunsDurationProps> = ({
181176
</GridItem>
182177
</Grid>
183178
<Grid hasGutter>
184-
<GridItem span={6}>
179+
<GridItem span={9}>
185180
<span>
186-
<HistoryIcon className="pipeline-overview__duration-card__icon" />
181+
<HistoryIcon className="pf-v6-u-mr-sm" />
187182
{t('Total duration')}
188183
</span>
189184
</GridItem>
190185
<GridItem
191-
span={6}
192-
className="pipeline-overview__duration-card__value"
186+
span={3}
187+
className="pf-v6-u-text-align-end pipeline-overview__chart-color-blue"
193188
>
194189
{loaded ? (
195190
summaryData?.['total_duration'] ? (

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

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525

2626
import { ALL_NAMESPACES_KEY } from '../../consts';
2727

28-
import './PipelineRunsDurationCard.scss';
2928
import {
3029
usePipelineMetricsForAllNamespacePoll,
3130
usePipelineMetricsForNamespaceForPipelinePoll,
@@ -35,6 +34,8 @@ import { MetricsQueryPrefix, PipelineQuery } from '../pipelines-metrics/utils';
3534
import { getXaxisValues } from './dateTime';
3635
import { LoadingInline } from '../Loading';
3736

37+
import './PipelinesOverview.scss';
38+
3839
interface PipelinesRunsDurationProps {
3940
namespace: string;
4041
timespan: number;
@@ -184,15 +185,15 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
184185
return (
185186
<>
186187
<Card
187-
className={classNames('pipeline-overview__duration-card', {
188+
className={classNames('pf-v6-u-h-100 pipeline-overview__min-width-full pf-v6-u-font-size-lg', {
188189
'card-border': bordered,
189190
})}
190191
>
191-
<CardTitle>
192+
<CardTitle className="pf-v6-u-font-size-xl">
192193
<span>{t('Duration')}</span>
193194
</CardTitle>
194195
<Divider />
195-
<CardBody>
196+
<CardBody className="pf-v6-u-font-size-lg pipeline-overview__min-width-min-content">
196197
{pipelineRunsDurationError ? (
197198
<Alert
198199
variant="danger"
@@ -204,17 +205,17 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
204205
<>
205206
<Grid
206207
hasGutter
207-
className="pipeline-overview__duration-card__grid"
208+
className="pf-v6-u-mb-sm pf-v6-u-font-size-lg"
208209
>
209-
<GridItem span={6}>
210-
<span>
211-
<MonitoringIcon className="pipeline-overview__duration-card__icon" />
210+
<GridItem span={9} className="pf-v6-u-mb-sm">
211+
<span className="pf-v6-u-font-size-lg">
212+
<MonitoringIcon className="pf-v6-u-mr-sm" />
212213
{t('Average duration')}
213214
</span>
214215
</GridItem>
215216
<GridItem
216-
span={6}
217-
className="pipeline-overview__duration-card__value"
217+
span={3}
218+
className="pf-v6-u-text-align-end pf-v6-u-font-size-lg pipeline-overview__chart-color-blue"
218219
>
219220
{loadingPipelineRunsCount ? (
220221
<LoadingInline />
@@ -225,31 +226,33 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
225226
</Grid>
226227
<Grid
227228
hasGutter
228-
className="pipeline-overview__duration-card__grid"
229+
className="pf-v6-u-mb-sm pf-v6-u-font-size-lg"
229230
>
230-
<GridItem span={6}>
231-
<span>
232-
<InfoCircleIcon className="pipeline-overview__duration-card__info-icon" />
231+
<GridItem span={9} className="pf-v6-u-mb-sm">
232+
<span className="pf-v6-u-font-size-lg">
233+
<InfoCircleIcon
234+
className="pf-v6-u-mr-sm pipeline-overview__chart-color-blue"
235+
/>
233236
{t('Maximum')}
234237
</span>
235238
</GridItem>
236239
<GridItem
237-
span={6}
238-
className="pipeline-overview__duration-card__value"
240+
span={3}
241+
className="pf-v6-u-text-align-end pf-v6-u-font-size-lg pipeline-overview__chart-color-blue"
239242
>
240243
{loadingPipelineRunsCount ? <LoadingInline /> : '-'}
241244
</GridItem>
242245
</Grid>
243-
<Grid hasGutter>
244-
<GridItem span={6}>
245-
<span>
246-
<HistoryIcon className="pipeline-overview__duration-card__icon" />
246+
<Grid hasGutter className="pf-v6-u-font-size-lg">
247+
<GridItem span={9}>
248+
<span className="pf-v6-u-font-size-lg">
249+
<HistoryIcon className="pf-v6-u-mr-sm" />
247250
{t('Total duration')}
248251
</span>
249252
</GridItem>
250253
<GridItem
251-
span={6}
252-
className="pipeline-overview__duration-card__value"
254+
span={3}
255+
className="pf-v6-u-text-align-end pf-v6-u-font-size-lg pipeline-overview__chart-color-blue"
253256
>
254257
{loadingPipelineRunsDuration ? (
255258
<LoadingInline />

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ import { ALL_NAMESPACES_KEY } from '../../consts';
2929
import { getFilter, useInterval } from './utils';
3030
import { LoadingInline } from '../Loading';
3131

32+
import './PipelinesOverview.scss';
33+
3234
interface PipelinesRunsNumbersChartProps {
3335
namespace?: string;
3436
timespan?: number;
@@ -235,18 +237,18 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
235237
return (
236238
<>
237239
<Card
238-
className={classNames({
240+
className={classNames('pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
239241
'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
240242
'card-border': bordered,
243+
'pf-v6-u-h-100': !pipelineRunsChartError,
241244
})}
242245
>
243-
<CardTitle className="pipeline-overview__number-of-plr-card__title">
246+
<CardTitle className="pf-v6-u-pb-0">
244247
<span>{t('Number of PipelineRuns')}</span>
245248
</CardTitle>
246249
<CardBody
247250
className={classNames({
248-
'pipeline-overview__number-of-plr-card__body':
249-
!pipelineRunsChartError,
251+
'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': !pipelineRunsChartError,
250252
})}
251253
>
252254
{pipelineRunsChartError ? (
@@ -257,7 +259,9 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
257259
className="pf-v6-u-mb-md pf-v6-u-ml-lg pf-v6-u-mt-lg"
258260
/>
259261
) : (
260-
<div className="pipeline-overview__number-of-plr-card__bar-chart-div">
262+
<div
263+
className="pf-v6-u-flex-shrink-0"
264+
>
261265
{loaded ? (
262266
<Chart
263267
containerComponent={
@@ -274,7 +278,8 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
274278
padding={{
275279
top: 10,
276280
bottom: 55,
277-
left: 50,
281+
left: 40,
282+
right: 50,
278283
}}
279284
themeColor={ChartThemeColor.blue}
280285
>
@@ -290,7 +295,7 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
290295
</ChartGroup>
291296
</Chart>
292297
) : (
293-
<div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-h-100">
298+
<div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-pl-md pf-v6-u-h-100">
294299
<LoadingInline />
295300
</div>
296301
)}

0 commit comments

Comments
 (0)