maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Metrics UI] Node details design feedback (#85433)

Browse source 
* 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:
Phillip Burch 2020-12-10 13:38:17 -06:00 committed by GitHub
parent e8e6780fef
commit 617852f602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node.tsx
View file

@ -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}