Skip to content

SRVKP-9680 Fix the alignment of Pipelines Overview page #869

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pratap0007 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

SRVKP-9680 Fix the alignment of Pipelines Overview page #869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/components/pac/PacOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ const PacOverview: React.FC<PacOverviewProps> = ({
return (
<>
<NamespaceBar isDisabled={true} />
<PageSection hasBodyWrapper={false}
<PageSection
hasBodyWrapper={false}
type="breadcrumb"
className="co-m-nav-title--detail pipelines-console-plugin__background-transparent"
>
Expand Down Expand Up @@ -88,7 +89,8 @@ const PacOverview: React.FC<PacOverviewProps> = ({
return (
<>
<NamespaceBar isDisabled={true} />
<PageSection hasBodyWrapper={false}
<PageSection
hasBodyWrapper={false}
type="breadcrumb"
className="co-m-nav-title--detail pipelines-console-plugin__background-transparent"
>
Expand Down
10 changes: 5 additions & 5 deletions src/components/pipelines-overview/NamespaceDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
import { alphanumericCompare } from './utils';
import { useTranslation } from 'react-i18next';

import './PipelinesOverview.scss';
import {
useFlag,
useK8sWatchResource,
Expand Down Expand Up @@ -65,8 +64,10 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
}, [projects, projectsLoaded]);

return (
<>
<label className="project-dropdown-label">{t('Project')}</label>
<div className="form-group">
<div>
<label>{t('Project')}</label>
</div>
<Dropdown
isOpen={isOpen}
onOpenChange={(isOpen: boolean) => setValue(isOpen)}
Expand All @@ -80,7 +81,6 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
{selected !== ALL_NAMESPACES_KEY ? selected : allNamespacesTitle}
</MenuToggle>
)}
className="pipeline-overview__variable-dropdown"
isScrollable
>
<DropdownList>
Expand All @@ -96,7 +96,7 @@ const NameSpaceDropdown: React.FC<NameSpaceDropdownProps> = ({
))}
</DropdownList>
</Dropdown>
</>
</div>
);
};

Expand Down
7 changes: 0 additions & 7 deletions src/components/pipelines-overview/PipelineRunsDurationCard.scss
View file
Open in desktop

This file was deleted.

45 changes: 22 additions & 23 deletions src/components/pipelines-overview/PipelineRunsDurationCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
Grid,
GridItem,
} from '@patternfly/react-core';
import { t_chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
import { useFlag } from '@openshift-console/dynamic-plugin-sdk';
import { SummaryProps, getFilter, useInterval } from './utils';
import { getResultsSummary } from '../utils/summary-api';
Expand All @@ -23,8 +24,6 @@ import { ALL_NAMESPACES_KEY } from '../../consts';
import { formatTime, getDropDownDate } from './dateTime';
import { LoadingInline } from '../Loading';

import './PipelineRunsDurationCard.scss';

interface PipelinesRunsDurationProps {
namespace: string;
timespan: number;
Expand Down Expand Up @@ -111,7 +110,7 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
return (
<>
<Card
className={classNames('pipeline-overview__duration-card', {
className={classNames('pf-v6-u-h-100', {
'card-border': bordered,
})}
>
Expand All @@ -129,19 +128,17 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
/>
) : (
<>
<Grid
hasGutter
className="pipeline-overview__duration-card__grid"
>
<GridItem span={6}>
<Grid hasGutter className="cpf-v6-u-mb-sm">
<GridItem span={9} className="pf-v6-u-mb-sm">
<span>
<MonitoringIcon className="pipeline-overview__duration-card__icon" />
<MonitoringIcon className="pf-v6-u-mr-sm" />
{t('Average duration')}
</span>
</GridItem>
<GridItem
span={6}
className="pipeline-overview__duration-card__value"
span={3}
style={{ color: blueColor.value }}
className="pf-v6-u-text-align-end"
>
{loaded ? (
summaryData?.['avg_duration'] ? (
Expand All @@ -154,19 +151,20 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
)}
</GridItem>
</Grid>
<Grid
hasGutter
className="pipeline-overview__duration-card__grid"
>
<GridItem span={6}>
<Grid hasGutter className="pf-v6-u-mb-sm">
<GridItem span={9} className="pf-v6-u-mb-sm">
<span>
<InfoCircleIcon className="pipeline-overview__duration-card__info-icon" />
<InfoCircleIcon
className="pf-v6-u-mr-sm"
style={{ color: blueColor.value }}
/>
{t('Maximum')}
</span>
</GridItem>
<GridItem
span={6}
className="pipeline-overview__duration-card__value"
span={3}
className="pf-v6-u-text-align-end"
style={{ color: blueColor.value }}
>
{loaded ? (
summaryData?.['max_duration'] ? (
Expand All @@ -180,15 +178,16 @@ const PipelinesRunsDurationCard: React.FC<PipelinesRunsDurationProps> = ({
</GridItem>
</Grid>
<Grid hasGutter>
<GridItem span={6}>
<GridItem span={9}>
<span>
<HistoryIcon className="pipeline-overview__duration-card__icon" />
<HistoryIcon className="pf-v6-u-mr-sm" />
{t('Total duration')}
</span>
</GridItem>
<GridItem
span={6}
className="pipeline-overview__duration-card__value"
span={3}
className="pf-v6-u-text-align-end"
style={{ color: blueColor.value }}
>
{loaded ? (
summaryData?.['total_duration'] ? (
Expand Down
53 changes: 31 additions & 22 deletions src/components/pipelines-overview/PipelineRunsDurationCardK8s.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
InfoCircleIcon,
MonitoringIcon,
} from '@patternfly/react-icons';
import { t_chart_color_blue_300 as blueColor } from '@patternfly/react-tokens/dist/js/t_chart_color_blue_300';
import {
Alert,
Card,
Expand All @@ -24,7 +25,6 @@ import {

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

import './PipelineRunsDurationCard.scss';
import {
usePipelineMetricsForAllNamespacePoll,
usePipelineMetricsForNamespaceForPipelinePoll,
Expand Down Expand Up @@ -183,15 +183,16 @@ const PipelineRunsDurationCardK8s: React.FC<PipelinesRunsDurationProps> = ({
return (
<>
<Card
className={classNames('pipeline-overview__duration-card', {
className={classNames('pf-v6-u-h-100', {
'card-border': bordered,
})}
style={{ minWidth: '100%', fontSize: 18 }}
>
<CardTitle>
<CardTitle style={{ fontSize: 20 }}>
<span>{t('Duration')}</span>
</CardTitle>
<Divider />
<CardBody>
<CardBody style={{ fontSize: 18, minWidth: 'min-content' }}>
{pipelineRunsDurationError ? (
<Alert
variant="danger"
Expand All @@ -203,17 +204,19 @@ const PipelineRunsDurationCardK8s: React.FC<PipelinesRunsDurationProps> = ({
<>
<Grid
hasGutter
className="pipeline-overview__duration-card__grid"
className="pf-v6-u-mb-sm"
style={{ fontSize: 18 }}
>
<GridItem span={6}>
<span>
<MonitoringIcon className="pipeline-overview__duration-card__icon" />
<GridItem span={9} className="pf-v6-u-mb-sm">
<span style={{ fontSize: 18 }}>
<MonitoringIcon className="pf-v6-u-mr-sm" />
{t('Average duration')}
</span>
</GridItem>
<GridItem
span={6}
className="pipeline-overview__duration-card__value"
span={3}
style={{ color: blueColor.value, fontSize: 18 }}
className="pf-v6-u-text-align-end"
>
{loadingPipelineRunsCount ? (
<LoadingInline />
Expand All @@ -224,31 +227,37 @@ const PipelineRunsDurationCardK8s: React.FC<PipelinesRunsDurationProps> = ({
</Grid>
<Grid
hasGutter
className="pipeline-overview__duration-card__grid"
className="pf-v6-u-mb-sm"
style={{ fontSize: 18 }}
>
<GridItem span={6}>
<span>
<InfoCircleIcon className="pipeline-overview__duration-card__info-icon" />
<GridItem span={9} className="pf-v6-u-mb-sm">
<span style={{ fontSize: 18 }}>
<InfoCircleIcon
style={{ color: blueColor.value }}
className="pf-v6-u-mr-sm"
/>
{t('Maximum')}
</span>
</GridItem>
<GridItem
span={6}
className="pipeline-overview__duration-card__value"
span={3}
style={{ color: blueColor.value, fontSize: 18 }}
className="pf-v6-u-text-align-end"
>
{loadingPipelineRunsCount ? <LoadingInline /> : '-'}
</GridItem>
</Grid>
<Grid hasGutter>
<GridItem span={6}>
<span>
<HistoryIcon className="pipeline-overview__duration-card__icon" />
<Grid hasGutter style={{ fontSize: 18 }}>
<GridItem span={9}>
<span style={{ fontSize: 18 }}>
<HistoryIcon className="pf-v6-u-mr-sm" />
{t('Total duration')}
</span>
</GridItem>
<GridItem
span={6}
className="pipeline-overview__duration-card__value"
span={3}
className="pf-v6-u-text-align-end"
style={{ color: blueColor.value, fontSize: 18 }}
>
{loadingPipelineRunsDuration ? (
<LoadingInline />
Expand Down
36 changes: 28 additions & 8 deletions src/components/pipelines-overview/PipelineRunsNumbersChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,16 +237,30 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
className={classNames({
'pipeline-overview__number-of-plr-card': !pipelineRunsChartError,
'card-border': bordered,
'pf-v6-u-h-100': !pipelineRunsChartError,
})}
style={{
minHeight: '220px',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
}}
>
<CardTitle className="pipeline-overview__number-of-plr-card__title">
<CardTitle className="pf-v6-u-pb-0">
<span>{t('Number of PipelineRuns')}</span>
</CardTitle>
<CardBody
className={classNames({
'pipeline-overview__number-of-plr-card__body':
!pipelineRunsChartError,
})}
style={{
...(!pipelineRunsChartError && {
flex: '1 1 0',
minHeight: 0,
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'flex-start',
padding: 0,
}),
}}
>
{pipelineRunsChartError ? (
<Alert
Expand All @@ -256,7 +270,12 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
className="pf-v6-u-mb-md pf-v6-u-ml-lg pf-v6-u-mt-lg"
/>
) : (
<div className="pipeline-overview__number-of-plr-card__bar-chart-div">
<div
style={{
minHeight: 145,
flexShrink: 0,
}}
>
{loaded ? (
<Chart
containerComponent={
Expand All @@ -273,7 +292,8 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
padding={{
top: 10,
bottom: 55,
left: 50,
left: 40,
right: 50,
}}
themeColor={ChartThemeColor.blue}
>
Expand All @@ -289,7 +309,7 @@ const PipelinesRunsNumbersChart: React.FC<PipelinesRunsNumbersChartProps> = ({
</ChartGroup>
</Chart>
) : (
<div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-h-100">
<div className="pipeline-overview__number-of-plr-card__loading pf-v6-u-pl-md pf-v6-u-h-100">
<LoadingInline />
</div>
)}
Expand Down
Loading