github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Synthetics] Fixed bad loading state for grouped monitor cards (#214428)

Browse source 
Fixes #191649.

The bad loading state reported in the issue was probably caused by the
`isLoading` flag passed to the `EuiAccordion` component.

By checking the source code of the `EuiAccordion` component I found out
that that flag changes both `extraActions` and `children` into a loading
spinner.

![Screenshot 2025-03-13 at 16 29
13](https://github.com/user-attachments/assets/f5416a2a-55bf-4c66-826b-36a41317dbc4)

Also changed the number of rows passed to the `OverviewLoader` component
to match the `rowSize` set by the user.

Here the final result:



https://github.com/user-attachments/assets/215af2e2-11f7-4cec-b00d-061ec4e60ee6
This commit is contained in:
Francesco Fagnani 2025-03-14 09:50:58 +01:00 • committed by GitHub
parent a2d2054148
commit 67e292e8f9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 57 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

99
x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/grid_by_group/grid_group_item.tsx
View file

@ -98,58 +98,59 @@ export const GroupGridItem = ({
</EuiFlexGroup>
}
extraAction={
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem>
<EuiButtonIcon
data-test-subj="syntheticsGroupGridItemButton"
isDisabled={groupMonitors.length === 0}
className="fullScreenButton"
iconType="fullScreen"
aria-label={i18n.translate(
'xpack.synthetics.groupGridItem.euiButtonIcon.fullScreenLabel',
{ defaultMessage: 'Full screen' }
)}
onClick={() => {
if (fullScreenGroup) {
setFullScreenGroup('');
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
setFullScreenGroup(groupLabel);
}
}}
/>
</EuiFlexItem>
isLoading ? null : (
<EuiFlexGroup alignItems="center" gutterSize="m">
<EuiFlexItem>
<EuiButtonIcon
data-test-subj="syntheticsGroupGridItemButton"
isDisabled={groupMonitors.length === 0}
className="fullScreenButton"
iconType="fullScreen"
aria-label={i18n.translate(
'xpack.synthetics.groupGridItem.euiButtonIcon.fullScreenLabel',
{ defaultMessage: 'Full screen' }
)}
onClick={() => {
if (fullScreenGroup) {
setFullScreenGroup('');
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
setFullScreenGroup(groupLabel);
}
}}
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiBadge color="danger">
{i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.downCount', {
defaultMessage: '{downCount} Down',
values: { downCount: downMonitorsCount },
})}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem>
<EuiBadge color="danger">
{i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.downCount', {
defaultMessage: '{downCount} Down',
values: { downCount: downMonitorsCount },
})}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem>
<EuiBadge color="success">
{i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.upCount', {
defaultMessage: '{upCount} Up',
values: { upCount: groupMonitors.length - downMonitorsCount },
})}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem>
<EuiBadge color="success">
{i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.upCount', {
defaultMessage: '{upCount} Up',
values: { upCount: groupMonitors.length - downMonitorsCount },
})}
</EuiBadge>
</EuiFlexItem>
<EuiFlexItem>
<EuiBadge color="subdued">
{i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.count', {
defaultMessage: '{count, number} {count, plural, one {monitor} other {monitors}}',
values: { count: groupMonitors.length },
})}
</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem>
<EuiBadge color="subdued">
{i18n.translate('xpack.synthetics.groupGridItem.monitorsBadgeLabel.count', {
defaultMessage: '{count, number} {count, plural, one {monitor} other {monitors}}',
values: { count: groupMonitors.length },
})}
</EuiBadge>
</EuiFlexItem>
</EuiFlexGroup>
)
}
isLoading={isLoading}
>
<EuiSpacer size="m" />
@ -169,7 +170,7 @@ export const GroupGridItem = ({
))}
</EuiFlexGrid>
) : (
<OverviewLoader rows={2} />
<OverviewLoader rows={rowSize} />
)}
<EuiSpacer size="m" />
<EuiTablePagination

16
x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_loader.tsx
View file

@ -14,14 +14,12 @@ export const OverviewLoader = ({ rows }: { rows?: number }) => {
const COLUMNS = 4;
const loaders = Array(ROWS * COLUMNS).fill(null);
return (
<>
<EuiFlexGrid gutterSize="m" columns={COLUMNS}>
{loaders.map((_, i) => (
<EuiFlexItem key={i}>
<OverviewGridItemLoader />
</EuiFlexItem>
))}
</EuiFlexGrid>
</>
<EuiFlexGrid gutterSize="m" columns={COLUMNS}>
{loaders.map((_, i) => (
<EuiFlexItem key={i}>
<OverviewGridItemLoader />
</EuiFlexItem>
))}
</EuiFlexGrid>
);
};