forked from elastic/kibana
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Uptime] Show URL and metrics on sidebar and waterfall item tooltips (e…
…lastic#99985) * Add URL to metrics tooltip. * Add screenreader label for URL container. * Add metrics to URL sidebar tooltip. * Rename vars. * Delete unnecessary code. * Undo rename. * Extract component to dedicated file, add tests. * Fix error in test. * Add offset index to heading of waterfall chart tooltip. * Format the waterfall tool tip header. * Add horizontal rule and bold text for waterfall tooltip. * Extract inline helper function to module-level for reuse. * Reuse waterfall tooltip style. * Style reusable tooltip content. * Adapt existing chart tooltip to use tooltip content component for better consistency. * Delete test code. * Style EUI tooltip arrow. * Revert whitespace change. * Delete obsolete test. * Implement and use common tooltip heading formatter function. * Add tests for new formatter function. * Fix a typo. * Add a comment explaining a style hack. * Add optional chaining to avoid breaking a test. * Revert previous change, use RTL wrapper, rename describe block. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
- Loading branch information
1 parent
aa8aa7f
commit 8f83090
Showing
7 changed files
with
180 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
...lic/components/monitor/synthetics/waterfall/components/waterfall_tooltip_content.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { render } from '../../../../../lib/helper/rtl_helpers'; | ||
| import { WaterfallTooltipContent } from './waterfall_tooltip_content'; | ||
|
|
||
| jest.mock('../context/waterfall_chart', () => ({ | ||
| useWaterfallContext: jest.fn().mockReturnValue({ | ||
| data: [ | ||
| { | ||
| x: 0, | ||
| config: { | ||
| url: 'https://www.elastic.co', | ||
| tooltipProps: { | ||
| colour: '#000000', | ||
| value: 'test-val', | ||
| }, | ||
| showTooltip: true, | ||
| }, | ||
| }, | ||
| { | ||
| x: 0, | ||
| config: { | ||
| url: 'https://www.elastic.co/with/missing/tooltip.props', | ||
| showTooltip: true, | ||
| }, | ||
| }, | ||
| { | ||
| x: 1, | ||
| config: { | ||
| url: 'https://www.elastic.co/someresource.path', | ||
| tooltipProps: { | ||
| colour: '#010000', | ||
| value: 'test-val-missing', | ||
| }, | ||
| showTooltip: true, | ||
| }, | ||
| }, | ||
| ], | ||
| renderTooltipItem: (props: any) => ( | ||
| <div aria-label="tooltip item"> | ||
| <div>{props.colour}</div> | ||
| <div>{props.value}</div> | ||
| </div> | ||
| ), | ||
| sidebarItems: [ | ||
| { | ||
| isHighlighted: true, | ||
| index: 0, | ||
| offsetIndex: 1, | ||
| url: 'https://www.elastic.co', | ||
| status: 200, | ||
| method: 'GET', | ||
| }, | ||
| ], | ||
| }), | ||
| })); | ||
|
|
||
| describe('WaterfallTooltipContent', () => { | ||
| it('renders tooltip', () => { | ||
| const { getByText, queryByText } = render( | ||
| <WaterfallTooltipContent text="1. https://www.elastic.co" url="https://www.elastic.co" /> | ||
| ); | ||
| expect(getByText('#000000')).toBeInTheDocument(); | ||
| expect(getByText('test-val')).toBeInTheDocument(); | ||
| expect(getByText('1. https://www.elastic.co')).toBeInTheDocument(); | ||
| expect(queryByText('#010000')).toBeNull(); | ||
| expect(queryByText('test-val-missing')).toBeNull(); | ||
| }); | ||
|
|
||
| it(`doesn't render metric if tooltip props missing`, () => { | ||
| const { getAllByLabelText, getByText } = render( | ||
| <WaterfallTooltipContent text="1. https://www.elastic.co" url="https://www.elastic.co" /> | ||
| ); | ||
| const metricElements = getAllByLabelText('tooltip item'); | ||
| expect(metricElements).toHaveLength(1); | ||
| expect(getByText('test-val')).toBeInTheDocument(); | ||
| }); | ||
| }); |
46 changes: 46 additions & 0 deletions
46
...e/public/components/monitor/synthetics/waterfall/components/waterfall_tooltip_content.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License | ||
| * 2.0; you may not use this file except in compliance with the Elastic License | ||
| * 2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiText } from '@elastic/eui'; | ||
| import { useWaterfallContext } from '../context/waterfall_chart'; | ||
| import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common'; | ||
|
|
||
| interface Props { | ||
| text: string; | ||
| url: string; | ||
| } | ||
|
|
||
| const StyledText = euiStyled(EuiText)` | ||
| font-weight: bold; | ||
| `; | ||
|
|
||
| const StyledHorizontalRule = euiStyled(EuiHorizontalRule)` | ||
| background-color: ${(props) => props.theme.eui.euiColorDarkShade}; | ||
| `; | ||
|
|
||
| export const WaterfallTooltipContent: React.FC<Props> = ({ text, url }) => { | ||
| const { data, renderTooltipItem, sidebarItems } = useWaterfallContext(); | ||
|
|
||
| const tooltipMetrics = data.filter( | ||
| (datum) => | ||
| datum.x === sidebarItems?.find((sidebarItem) => sidebarItem.url === url)?.index && | ||
| datum.config.tooltipProps && | ||
| datum.config.showTooltip | ||
| ); | ||
| return ( | ||
| <> | ||
| <StyledText>{text}</StyledText> | ||
| <StyledHorizontalRule margin="none" /> | ||
| <EuiFlexGroup direction="column" gutterSize="none"> | ||
| {tooltipMetrics.map((item, idx) => ( | ||
| <EuiFlexItem key={idx}>{renderTooltipItem(item.config.tooltipProps)}</EuiFlexItem> | ||
| ))} | ||
| </EuiFlexGroup> | ||
| </> | ||
| ); | ||
| }; |