[Metrics UI] Node details design feedback (#85433)
* Add back the tooltip * Add selected state * lint fixes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
e8e6780fef
commit
617852f602
|
@ -16,6 +16,7 @@ import {
|
|||
InfraWaffleMapNode,
|
||||
InfraWaffleMapOptions,
|
||||
} from '../../../../../lib/lib';
|
||||
import { ConditionalToolTip } from './conditional_tooltip';
|
||||
import { colorFromValue } from '../../lib/color_from_value';
|
||||
import { InventoryItemType } from '../../../../../../common/inventory_models/types';
|
||||
import { NodeContextPopover } from '../node_details/overlay';
|
||||
|
@ -55,6 +56,8 @@ export const Node = class extends React.PureComponent<Props, State> {
|
|||
values: { nodeName: node.name },
|
||||
});
|
||||
|
||||
const nodeBorder = this.state.isOverlayOpen ? { border: 'solid 4px #000' } : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<NodeContextMenu
|
||||
|
@ -67,28 +70,37 @@ export const Node = class extends React.PureComponent<Props, State> {
|
|||
popoverPosition="downCenter"
|
||||
openNewOverlay={this.toggleNewOverlay}
|
||||
>
|
||||
<NodeContainer
|
||||
data-test-subj="nodeContainer"
|
||||
style={{ width: squareSize || 0, height: squareSize || 0 }}
|
||||
onClick={this.togglePopover}
|
||||
<ConditionalToolTip
|
||||
currentTime={currentTime}
|
||||
formatter={formatter}
|
||||
hidden={isPopoverOpen}
|
||||
node={node}
|
||||
options={options}
|
||||
nodeType={nodeType}
|
||||
>
|
||||
<SquareOuter color={color}>
|
||||
<SquareInner color={color}>
|
||||
{valueMode ? (
|
||||
<ValueInner aria-label={nodeAriaLabel}>
|
||||
<Label color={color}>{node.name}</Label>
|
||||
<Value color={color}>{value}</Value>
|
||||
</ValueInner>
|
||||
) : (
|
||||
ellipsisMode && (
|
||||
<NodeContainer
|
||||
data-test-subj="nodeContainer"
|
||||
style={{ width: squareSize || 0, height: squareSize || 0 }}
|
||||
onClick={this.togglePopover}
|
||||
>
|
||||
<SquareOuter color={color} style={nodeBorder}>
|
||||
<SquareInner color={color}>
|
||||
{valueMode ? (
|
||||
<ValueInner aria-label={nodeAriaLabel}>
|
||||
<Label color={color}>...</Label>
|
||||
<Label color={color}>{node.name}</Label>
|
||||
<Value color={color}>{value}</Value>
|
||||
</ValueInner>
|
||||
)
|
||||
)}
|
||||
</SquareInner>
|
||||
</SquareOuter>
|
||||
</NodeContainer>
|
||||
) : (
|
||||
ellipsisMode && (
|
||||
<ValueInner aria-label={nodeAriaLabel}>
|
||||
<Label color={color}>...</Label>
|
||||
</ValueInner>
|
||||
)
|
||||
)}
|
||||
</SquareInner>
|
||||
</SquareOuter>
|
||||
</NodeContainer>
|
||||
</ConditionalToolTip>
|
||||
</NodeContextMenu>
|
||||
<NodeContextPopover
|
||||
node={node}
|
||||
|
|
Loading…
Reference in a new issue