add headingLevel + fix gutter props in IntegrationDetailMetrics
@@ -28,7 +28,8 @@ export interface IIntegrationDetailMetricsProps {
uptimeDuration?: string;
}
-export const IntegrationDetailMetrics: React.FunctionComponent<IIntegrationDetailMetricsProps> = ({
+export const IntegrationDetailMetrics: React.FunctionComponent<IIntegrationDetailMetricsProps> =
+ ({
i18nLastProcessed,
i18nNoDataAvailable,
i18nSince,
@@ -44,15 +45,21 @@ export const IntegrationDetailMetrics: React.FunctionComponent<IIntegrationDetai
const okMessagesCount = messages - errors;
return (
<PageSection className="integration-detail-metrics">
- <Grid md={6} xl={3} gutter={'sm'}>
+ <Grid md={6} xl={3} hasGutter={true}>
<GridItem>
<Card data-testid={'integration-detail-metrics-total-errors-card'}>
<CardHeader>
- <Title size="lg">{i18nTotalErrors}</Title>
+ <Title size="lg" headingLevel={'h3'}>
+ {i18nTotalErrors}
+ </Title>
</CardHeader>
<CardBody>
<br />
- <Title size={'xl'} data-testid={'integration-detail-metrics-total-errors'}>
+ <Title
+ size={'xl'}
+ data-testid={'integration-detail-metrics-total-errors'}
+ headingLevel={'h4'}
+ >
<ErrorCircleOIcon color={global_danger_color_100.value} />
&nbsp;{errors}
</Title>
@@ -60,9 +67,13 @@ export const IntegrationDetailMetrics: React.FunctionComponent<IIntegrationDetai
</Card>
</GridItem>
<GridItem>
- <Card data-testid={'integration-detail-metrics-last-processed-card'}>
+ <Card
+ data-testid={'integration-detail-metrics-last-processed-card'}
+ >
<CardHeader>
- <Title size={'lg'}>{i18nLastProcessed}</Title>
+ <Title size={'lg'} headingLevel={'h3'}>
+ {i18nLastProcessed}
+ </Title>
</CardHeader>
<CardBody>
<br />
@@ -70,6 +81,7 @@ export const IntegrationDetailMetrics: React.FunctionComponent<IIntegrationDetai
size={'xl'}
className="integration-detail-metrics__last-processed"
data-testid={'integration-detail-metrics-last-processed'}
+ headingLevel={'h4'}
>
{lastProcessed ? lastProcessed : i18nNoDataAvailable}
</Title>
