Skip to content

Commit 92f0e52

Browse files
anwesha-palit-redhatanwesha-palit-redhat
committed
feat: added consoledataview and modified styles
1 parent 66b56e1 commit 92f0e52

18 files changed

Lines changed: 562 additions & 551 deletions

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

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,22 @@ const getChartData = (
6767
return chartData;
6868
};
6969

70+
const BOTTOM_PAD_DEFAULT = 35;
71+
const BOTTOM_PAD_ROTATED = 55;
72+
const BOTTOM_PAD_LABEL = 15;
73+
const CHART_BODY_TOP_OFFSET = 10;
74+
const CHART_BODY_MIN_HEIGHT = 50;
75+
const CHART_BODY_MAX_HEIGHT = 100;
76+
const CHART_ASPECT_RATIO = 5;
77+
7078
const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
7179
timespan,
7280
domain,
7381
bordered,
7482
interval,
7583
parentName,
7684
namespace,
77-
kind
85+
kind,
7886
}) => {
7987
const { t } = useTranslation('plugin__pipelines-console-plugin');
8088
const isDevConsoleProxyAvailable = useFlag(FLAGS.DEVCONSOLE_PROXY);
@@ -93,10 +101,10 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
93101
};
94102
const [chartWidth, setChartWidth] = useState(0);
95103
const chartContainerRef = useCallback((node: HTMLDivElement | null) => {
96-
if (node) {
97-
setChartWidth(node.clientWidth);
98-
}
99-
}, []);
104+
if (node) {
105+
setChartWidth(node.clientWidth);
106+
}
107+
}, []);
100108

101109
if (namespace == ALL_NAMESPACES_KEY) {
102110
namespace = '-';
@@ -239,31 +247,36 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
239247
verticalAnchor: 'end',
240248
},
241249
};
242-
bottomPad = 55;
250+
bottomPad = BOTTOM_PAD_ROTATED;
243251
} else {
244-
bottomPad = 35;
252+
bottomPad = BOTTOM_PAD_DEFAULT;
245253
}
246-
if (showLabel) bottomPad += 15;
247-
// Calculating height using this formula with the help of width and bottom padding
248-
const chartHeight = 10 + Math.max(50, Math.min(100, Math.round(chartWidth / 5))) + bottomPad;
254+
if (showLabel) bottomPad += BOTTOM_PAD_LABEL;
255+
const chartBodyHeight = Math.max(CHART_BODY_MIN_HEIGHT, Math.min(CHART_BODY_MAX_HEIGHT, Math.round(chartWidth / CHART_ASPECT_RATIO)));
256+
const chartHeight = CHART_BODY_TOP_OFFSET + chartBodyHeight + bottomPad;
249257

250258
return (
251259
<>
252-
<Card
253-
className={classNames('pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
254-
'pipeline-overview__number-of-plr-card': !pipelineAverageDurationError,
255-
'card-border': bordered,
256-
'pf-v6-u-h-100': !pipelineAverageDurationError,
257-
})}
260+
<Card
261+
className={classNames(
262+
'pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column',
263+
{
264+
'pipeline-overview__number-of-plr-card':
265+
!pipelineAverageDurationError,
266+
'card-border': bordered,
267+
'pf-v6-u-h-100': !pipelineAverageDurationError,
268+
},
269+
)}
258270
>
259271
<CardTitle className="pipeline-overview__number-of-plr-card__title">
260272
<span>{t('Average duration')}</span>
261273
</CardTitle>
262-
<CardBody
263-
className={classNames({
264-
'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,
265-
})}
266-
>
274+
<CardBody
275+
className={classNames({
276+
'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':
277+
!pipelineAverageDurationError,
278+
})}
279+
>
267280
{pipelineAverageDurationError ? (
268281
<Alert
269282
variant="danger"
@@ -274,7 +287,9 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
274287
) : (
275288
<div
276289
ref={chartContainerRef}
277-
className={`pf-v6-u-w-100 ${chartWidth > 0 ? 'pf-v6-u-h-100' : ''}`}
290+
className={`pf-v6-u-w-100 ${
291+
chartWidth > 0 ? 'pf-v6-u-h-100' : ''
292+
}`}
278293
>
279294
{loaded ? (
280295
<Chart
@@ -325,4 +340,4 @@ const PipelinesAverageDuration: FC<PipelinesAverageDurationProps> = ({
325340
);
326341
};
327342

328-
export default PipelinesAverageDuration;
343+
export default PipelinesAverageDuration;

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,14 @@ const getChartData = (
7878
return chartData;
7979
};
8080

81+
const BOTTOM_PAD_DEFAULT = 35;
82+
const BOTTOM_PAD_ROTATED = 55;
83+
const BOTTOM_PAD_LABEL = 15;
84+
const CHART_BODY_TOP_OFFSET = 10;
85+
const CHART_BODY_MIN_HEIGHT = 50;
86+
const CHART_BODY_MAX_HEIGHT = 100;
87+
const CHART_ASPECT_RATIO = 5;
88+
8189
const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
8290
timespan,
8391
domain,
@@ -97,10 +105,10 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
97105
};
98106
const [chartWidth, setChartWidth] = useState(0);
99107
const chartContainerRef = useCallback((node: HTMLDivElement | null) => {
100-
if (node) {
101-
setChartWidth(node.clientWidth);
102-
}
103-
}, []);
108+
if (node) {
109+
setChartWidth(node.clientWidth);
110+
}
111+
}, []);
104112

105113
const [tickValues, type] = getXaxisValues(timespan);
106114
const [averageDurationError, setAverageDurationError] = useState<
@@ -299,13 +307,13 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
299307
verticalAnchor: 'end',
300308
},
301309
};
302-
bottomPad = 55;
310+
bottomPad = BOTTOM_PAD_ROTATED;
303311
} else {
304-
bottomPad = 35;
312+
bottomPad = BOTTOM_PAD_DEFAULT;
305313
}
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;
314+
if (showLabel) bottomPad += BOTTOM_PAD_LABEL;
315+
const chartBodyHeight = Math.max(CHART_BODY_MIN_HEIGHT, Math.min(CHART_BODY_MAX_HEIGHT, Math.round(chartWidth / CHART_ASPECT_RATIO)));
316+
const chartHeight = CHART_BODY_TOP_OFFSET + chartBodyHeight + bottomPad;
309317

310318
return (
311319
<>
@@ -335,7 +343,9 @@ const PipelinesAverageDurationK8s: FC<PipelinesAverageDurationProps> = ({
335343
) : (
336344
<div
337345
ref={chartContainerRef}
338-
className={`pf-v6-u-w-100 ${chartWidth > 0 ? 'pf-v6-u-h-100' : ''}`}
346+
className={`pf-v6-u-w-100 ${
347+
chartWidth > 0 ? 'pf-v6-u-h-100' : ''
348+
}`}
339349
>
340350
{!averageDurationLoading ? (
341351
<Chart

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

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
5353
bordered,
5454
}) => {
5555
const { t } = useTranslation('plugin__pipelines-console-plugin');
56-
const [pipelineRunsDurationError, setPipelineRunsDurationError] =
57-
useState<string | null>(null);
56+
const [pipelineRunsDurationError, setPipelineRunsDurationError] = useState<
57+
string | null
58+
>(null);
5859

5960
const [
6061
totalPipelineRunsCountData,
@@ -185,15 +186,18 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
185186
return (
186187
<>
187188
<Card
188-
className={classNames('pf-v6-u-h-100 pipeline-overview__min-width-full pf-v6-u-font-size-lg', {
189-
'card-border': bordered,
190-
})}
189+
className={classNames(
190+
'pf-v6-u-h-100 pipeline-overview__min-width-full',
191+
{
192+
'card-border': bordered,
193+
},
194+
)}
191195
>
192-
<CardTitle className="pf-v6-u-font-size-xl">
196+
<CardTitle>
193197
<span>{t('Duration')}</span>
194198
</CardTitle>
195199
<Divider />
196-
<CardBody className="pf-v6-u-font-size-lg pipeline-overview__min-width-min-content">
200+
<CardBody>
197201
{pipelineRunsDurationError ? (
198202
<Alert
199203
variant="danger"
@@ -203,19 +207,16 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
203207
/>
204208
) : (
205209
<>
206-
<Grid
207-
hasGutter
208-
className="pf-v6-u-mb-sm pf-v6-u-font-size-lg"
209-
>
210+
<Grid hasGutter className="pf-v6-u-mb-sm">
210211
<GridItem span={9} className="pf-v6-u-mb-sm">
211-
<span className="pf-v6-u-font-size-lg">
212+
<span>
212213
<MonitoringIcon className="pf-v6-u-mr-sm" />
213214
{t('Average duration')}
214215
</span>
215216
</GridItem>
216217
<GridItem
217218
span={3}
218-
className="pf-v6-u-text-align-end pf-v6-u-font-size-lg pipeline-overview__chart-color-blue"
219+
className="pf-v6-u-text-align-end pipeline-overview__chart-color-blue"
219220
>
220221
{loadingPipelineRunsCount ? (
221222
<LoadingInline />
@@ -224,35 +225,30 @@ const PipelineRunsDurationCardK8s: FC<PipelinesRunsDurationProps> = ({
224225
)}
225226
</GridItem>
226227
</Grid>
227-
<Grid
228-
hasGutter
229-
className="pf-v6-u-mb-sm pf-v6-u-font-size-lg"
230-
>
228+
<Grid hasGutter className="pf-v6-u-mb-sm">
231229
<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-
/>
230+
<span>
231+
<InfoCircleIcon className="pf-v6-u-mr-sm pipeline-overview__chart-color-blue" />
236232
{t('Maximum')}
237233
</span>
238234
</GridItem>
239235
<GridItem
240236
span={3}
241-
className="pf-v6-u-text-align-end pf-v6-u-font-size-lg pipeline-overview__chart-color-blue"
237+
className="pf-v6-u-text-align-end pipeline-overview__chart-color-blue"
242238
>
243239
{loadingPipelineRunsCount ? <LoadingInline /> : '-'}
244240
</GridItem>
245241
</Grid>
246-
<Grid hasGutter className="pf-v6-u-font-size-lg">
242+
<Grid hasGutter>
247243
<GridItem span={9}>
248-
<span className="pf-v6-u-font-size-lg">
244+
<span>
249245
<HistoryIcon className="pf-v6-u-mr-sm" />
250246
{t('Total duration')}
251247
</span>
252248
</GridItem>
253249
<GridItem
254250
span={3}
255-
className="pf-v6-u-text-align-end pf-v6-u-font-size-lg pipeline-overview__chart-color-blue"
251+
className="pf-v6-u-text-align-end pipeline-overview__chart-color-blue"
256252
>
257253
{loadingPipelineRunsDuration ? (
258254
<LoadingInline />

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

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ const getChartData = (
6666
return chartData;
6767
};
6868

69+
const BOTTOM_PAD_DEFAULT = 35;
70+
const BOTTOM_PAD_ROTATED = 55;
71+
const BOTTOM_PAD_LABEL = 15;
72+
const CHART_BODY_TOP_OFFSET = 10;
73+
const CHART_BODY_MIN_HEIGHT = 50;
74+
const CHART_BODY_MAX_HEIGHT = 100;
75+
const CHART_ASPECT_RATIO = 5;
76+
6977
const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
7078
namespace,
7179
timespan,
@@ -235,29 +243,33 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
235243
verticalAnchor: 'end',
236244
},
237245
};
238-
bottomPad = 55;
246+
bottomPad = BOTTOM_PAD_ROTATED;
239247
} else {
240-
bottomPad = 35;
248+
bottomPad = BOTTOM_PAD_DEFAULT;
241249
}
242-
if (showLabel) bottomPad += 15;
243-
// Calculating height using this formula with the help of width and bottom padding
244-
const chartHeight = 10 + Math.max(50, Math.min(100, Math.round(chartWidth / 5))) + bottomPad;
250+
if (showLabel) bottomPad += BOTTOM_PAD_LABEL;
251+
const chartBodyHeight = Math.max(CHART_BODY_MIN_HEIGHT, Math.min(CHART_BODY_MAX_HEIGHT, Math.round(chartWidth / CHART_ASPECT_RATIO)));
252+
const chartHeight = CHART_BODY_TOP_OFFSET + chartBodyHeight + bottomPad;
245253

246254
return (
247255
<>
248256
<Card
249-
className={classNames('pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column', {
250-
'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
251-
'card-border': bordered,
252-
'pf-v6-u-h-100': !pipelineRunsChartError,
253-
})}
257+
className={classNames(
258+
'pipeline-overview__min-width-full pipeline-overview__overflow-hidden pf-v6-u-display-flex pf-v6-u-flex-direction-column',
259+
{
260+
'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
261+
'card-border': bordered,
262+
'pf-v6-u-h-100': !pipelineRunsChartError,
263+
},
264+
)}
254265
>
255266
<CardTitle className="pf-v6-u-pb-0">
256267
<span>{t('Number of PipelineRuns')}</span>
257268
</CardTitle>
258269
<CardBody
259270
className={classNames({
260-
'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,
271+
'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':
272+
!pipelineRunsChartError,
261273
})}
262274
>
263275
{pipelineRunsChartError ? (
@@ -270,7 +282,9 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
270282
) : (
271283
<div
272284
ref={chartContainerRef}
273-
className={`pf-v6-u-w-100 ${chartWidth > 0 ? 'pf-v6-u-h-100' : ''}`}
285+
className={`pf-v6-u-w-100 ${
286+
chartWidth > 0 ? 'pf-v6-u-h-100' : ''
287+
}`}
274288
>
275289
{loaded ? (
276290
<Chart
@@ -286,10 +300,10 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
286300
height={chartHeight}
287301
width={chartWidth}
288302
padding={{
289-
top: 10,
303+
top: 20,
290304
bottom: bottomPad,
291-
left: 40,
292-
right: 50,
305+
left: 50,
306+
right: 40,
293307
}}
294308
themeColor={ChartThemeColor.blue}
295309
>
@@ -317,4 +331,4 @@ const PipelinesRunsNumbersChart: FC<PipelinesRunsNumbersChartProps> = ({
317331
);
318332
};
319333

320-
export default PipelinesRunsNumbersChart;
334+
export default PipelinesRunsNumbersChart;

0 commit comments

Comments
 (0)