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

[Stack Monitoring] Align text size of offline cells with metric cells (#124237)

Browse source 
* [Stack Monitoring] Align text size of offline cells with metric cells (#124235)

* Update snap for cells test
This commit is contained in:
Milton Hultgren 2022-02-03 09:13:07 +01:00 • committed by GitHub
parent 54360133ee
commit 63013b9dff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 74 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap generated
View file

@ -2,7 +2,7 @@
exports[`Node Listing Metric Cell should format N/A as the metric for an offline node 1`] = `
<div
class="monTableCell__number monTableCell__offline"
class="monTableCell__offline"
>
N/A
</div>

154
x-pack/plugins/monitoring/public/components/elasticsearch/nodes/cells.js
View file

@ -27,7 +27,7 @@ const TRENDING_UP = i18n.translate('xpack.monitoring.elasticsearch.node.cells.tr
});
function OfflineCell() {
return <div className="monTableCell__number monTableCell__offline">N/A</div>;
return <div className="monTableCell__offline">N/A</div>;
}
const getDirection = (slope) => {
@ -56,88 +56,80 @@ function MetricCell({ isOnline, metric = {}, isPercent, ...props }) {
const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
const closePopover = () => setIsPopoverOpen(false);
if (isOnline) {
const { lastVal, maxVal, minVal, slope } = get(metric, 'summary', {});
const format = get(metric, 'metric.format');
const units = get(metric, 'metric.units');
const tooltipItems = [
{
title: i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.trending', {
defaultMessage: 'Trending',
}),
description: getDirection(slope),
},
{
title: i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.max', {
defaultMessage: 'Max value',
}),
description: metricVal(maxVal, format, isPercent, units),
},
{
title: i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.min', {
defaultMessage: 'Min value',
}),
description: metricVal(minVal, format, isPercent, units),
},
];
const iconLabel = i18n.translate(
'xpack.monitoring.elasticsearch.node.cells.tooltip.iconLabel',
{
defaultMessage: 'More information about this metric',
}
);
const button = (
<EuiButtonIcon
color="text"
onClick={onButtonClick}
iconType={getIcon(slope)}
data-test-subj={`monitoringCellIcon-${props['data-test-subj']}`}
title={iconLabel}
aria-label={iconLabel}
/>
);
return (
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false} />
<EuiFlexItem grow={false}>
<EuiFlexGroup data-test-subj={props['data-test-subj']} gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiPopover
ownFocus
button={button}
isOpen={isPopoverOpen}
closePopover={closePopover}
>
<div data-test-subj={`monitoringCellPopover-${props['data-test-subj']}`}>
<EuiDescriptionList
type="column"
compressed
listItems={tooltipItems}
style={{ maxWidth: '150px' }}
/>
<EuiSpacer size="s" />
<EuiText size="xs">
{i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.preface', {
defaultMessage: 'Applies to current time period',
})}
</EuiText>
</div>
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText>{metricVal(lastVal, format, isPercent)}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
if (!isOnline) {
return <OfflineCell />;
}
return <OfflineCell />;
const { lastVal, maxVal, minVal, slope } = get(metric, 'summary', {});
const format = get(metric, 'metric.format');
const units = get(metric, 'metric.units');
const tooltipItems = [
{
title: i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.trending', {
defaultMessage: 'Trending',
}),
description: getDirection(slope),
},
{
title: i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.max', {
defaultMessage: 'Max value',
}),
description: metricVal(maxVal, format, isPercent, units),
},
{
title: i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.min', {
defaultMessage: 'Min value',
}),
description: metricVal(minVal, format, isPercent, units),
},
];
const iconLabel = i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.iconLabel', {
defaultMessage: 'More information about this metric',
});
const button = (
<EuiButtonIcon
color="text"
onClick={onButtonClick}
iconType={getIcon(slope)}
data-test-subj={`monitoringCellIcon-${props['data-test-subj']}`}
title={iconLabel}
aria-label={iconLabel}
/>
);
return (
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false} />
<EuiFlexItem grow={false}>
<EuiFlexGroup data-test-subj={props['data-test-subj']} gutterSize="xs">
<EuiFlexItem grow={false}>
<EuiPopover ownFocus button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
<div data-test-subj={`monitoringCellPopover-${props['data-test-subj']}`}>
<EuiDescriptionList
type="column"
compressed
listItems={tooltipItems}
style={{ maxWidth: '150px' }}
/>
<EuiSpacer size="s" />
<EuiText size="xs">
{i18n.translate('xpack.monitoring.elasticsearch.node.cells.tooltip.preface', {
defaultMessage: 'Applies to current time period',
})}
</EuiText>
</div>
</EuiPopover>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText>{metricVal(lastVal, format, isPercent)}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
);
}
export { OfflineCell, MetricCell };