public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert changes and use UITooltip and UIPopover

Browse Source
This commit is contained in:
Zoltán Bedi
2021-02-05 15:46:15 +01:00
parent 58d3d77113
commit 324a2ec5c0
10 changed files with 110 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.test.js
+2 -3
View File
@@ -19,8 +19,7 @@ import ReferencesButton, { getStyles } from './ReferencesButton';
import transformTraceData from '../model/transform-trace-data';
import traceGenerator from '../demo/trace-generators';
import ReferenceLink from '../url/ReferenceLink';
import { UIDropdown, UIMenuItem } from '../uiElementsContext';
import { Tooltip } from '@grafana/ui';
import { UIDropdown, UIMenuItem, UITooltip } from '../uiElementsContext';
describe(ReferencesButton, () => {
const trace = transformTraceData(traceGenerator.trace({ numberOfSpans: 10 }));
@@ -52,7 +51,7 @@ describe(ReferencesButton, () => {
const wrapper = shallow(<ReferencesButton {...props} />);
const dropdown = wrapper.find(UIDropdown);
const refLink = wrapper.find(ReferenceLink);
const tooltip = wrapper.find(Tooltip);
const tooltip = wrapper.find(UITooltip);
const styles = getStyles();
expect(dropdown.length).toBe(0);
packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx
+7 -7
View File
@@ -16,11 +16,10 @@ import React from 'react';
import { css } from 'emotion';
import NewWindowIcon from '../common/NewWindowIcon';
import { TraceSpanReference } from '@grafana/data';
import { UIDropdown, UIMenuItem, UIMenu } from '../uiElementsContext';
import { UITooltip, UIDropdown, UIMenuItem, UIMenu, TooltipPlacement } from '../uiElementsContext';
import ReferenceLink from '../url/ReferenceLink';
import { createStyle } from '../Theme';
import { Tooltip } from '@grafana/ui';
export const getStyles = createStyle(() => {
return {
@@ -80,26 +79,27 @@ export default class ReferencesButton extends React.PureComponent<TReferencesBut
const tooltipProps = {
arrowPointAtCenter: true,
mouseLeaveDelay: 0.5,
content: tooltipText,
placement: 'bottom' as TooltipPlacement,
title: tooltipText,
overlayClassName: styles.tooltip,
};
if (references.length > 1) {
return (
<Tooltip {...tooltipProps}>
<UITooltip {...tooltipProps}>
<UIDropdown overlay={this.referencesList(references)} placement="bottomRight" trigger={['click']}>
<a className={styles.MultiParent}>{children}</a>
</UIDropdown>
</Tooltip>
</UITooltip>
);
}
const ref = references[0];
return (
<Tooltip {...tooltipProps}>
<UITooltip {...tooltipProps}>
<ReferenceLink reference={ref} focusSpan={focusSpan} className={styles.MultiParent}>
{children}
</ReferenceLink>
</Tooltip>
</UITooltip>
);
}
}
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.test.js
+13 -5
View File
@@ -14,7 +14,7 @@
import React from 'react';
import { mount } from 'enzyme';
import { Tooltip } from '@grafana/ui';
import UIElementsContext, { UIPopover } from '../uiElementsContext';
import SpanBar from './SpanBar';
@@ -73,9 +73,13 @@ describe('<SpanBar>', () => {
};
it('renders without exploding', () => {
const wrapper = mount(<SpanBar {...props} />);
const wrapper = mount(
<UIElementsContext.Provider value={{ Popover: () => '' }}>
<SpanBar {...props} />
</UIElementsContext.Provider>
);
expect(wrapper).toBeDefined();
const { onMouseLeave, onMouseOver } = wrapper.find('[data-test-id="SpanBar--wrapper"]').props();
const { onMouseOver, onMouseLeave } = wrapper.find('[data-test-id="SpanBar--wrapper"]').props();
const labelElm = wrapper.find('[data-test-id="SpanBar--label"]');
expect(labelElm.text()).toBe(shortLabel);
onMouseOver();
@@ -86,7 +90,11 @@ describe('<SpanBar>', () => {
it('log markers count', () => {
// 3 log entries, two grouped together with the same timestamp
const wrapper = mount(<SpanBar {...props} />);
expect(wrapper.find(Tooltip).length).toEqual(2);
const wrapper = mount(
<UIElementsContext.Provider value={{ Popover: () => '' }}>
<SpanBar {...props} />
</UIElementsContext.Provider>
);
expect(wrapper.find(UIPopover).length).toEqual(2);
});
});
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx
+4 -4
View File
@@ -24,7 +24,7 @@ import { ViewedBoundsFunctionType } from './utils';
import { TNil } from '../types';
import { TraceSpan } from '@grafana/data';
import { createStyle } from '../Theme';
import { Tooltip } from '@grafana/ui';
import { UIPopover } from '../uiElementsContext';
const getStyles = createStyle(() => {
return {
@@ -181,15 +181,15 @@ function SpanBar(props: TInnerProps) {
</div>
<div>
{Object.keys(logGroups).map((positionKey) => (
<Tooltip
<UIPopover
key={positionKey}
placement="auto"
placement="topLeft"
content={
<AccordianLogs interactive={false} isOpen logs={logGroups[positionKey]} timestamp={traceStartTime} />
}
>
<div className={styles.logMarker} style={{ left: positionKey }} />
</Tooltip>
</UIPopover>
))}
</div>
{rpc && (
packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx
+1 -1
View File
@@ -268,7 +268,7 @@ export default function SpanDetail(props: SpanDetailProps) {
<CopyIcon
copyText={deepLinkCopyText}
icon="link"
placement="right-end"
placement="topRight"
tooltipTitle="Copy deep link to this span"
/>
</small>
packages/jaeger-ui-components/src/common/CopyIcon.test.js
+6 -7
View File
@@ -15,8 +15,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import * as copy from 'copy-to-clipboard';
import { UIButton } from '../uiElementsContext';
import { Tooltip } from '@grafana/ui';
import { UIButton, UITooltip } from '../uiElementsContext';
import CopyIcon from './CopyIcon';
@@ -53,19 +52,19 @@ describe('<CopyIcon />', () => {
expect(copySpy).toHaveBeenCalledWith(props.copyText);
});
it.skip('updates state when tooltip hides and state.hasCopied is true', () => {
it('updates state when tooltip hides and state.hasCopied is true', () => {
wrapper.setState({ hasCopied: true });
wrapper.find(Tooltip).prop('onVisibleChange')(false);
wrapper.find(UITooltip).prop('onVisibleChange')(false);
expect(wrapper.state().hasCopied).toBe(false);
const state = wrapper.state();
wrapper.find(Tooltip).prop('onVisibleChange')(false);
wrapper.find(UITooltip).prop('onVisibleChange')(false);
expect(wrapper.state()).toBe(state);
});
it.skip('persists state when tooltip opens', () => {
it('persists state when tooltip opens', () => {
wrapper.setState({ hasCopied: true });
wrapper.find(Tooltip).prop('onVisibleChange')(true);
wrapper.find(UITooltip).prop('onVisibleChange')(true);
expect(wrapper.state().hasCopied).toBe(true);
});
});
packages/jaeger-ui-components/src/common/CopyIcon.tsx
+8 -8
View File
@@ -17,10 +17,8 @@ import { css } from 'emotion';
import cx from 'classnames';
import copy from 'copy-to-clipboard';
import { UIButton } from '../uiElementsContext';
import { UITooltip, TooltipPlacement, UIButton } from '../uiElementsContext';
import { createStyle } from '../Theme';
import { Tooltip } from '@grafana/ui';
import { TooltipPlacement } from '@grafana/ui/src/components/Tooltip/PopoverController';
const getStyles = createStyle(() => {
return {
@@ -50,7 +48,7 @@ type PropsType = {
type StateType = {
hasCopied: boolean;
};
// TODO(Zoltan): This component is not working properly right now. Decide what to do with it.
export default class CopyIcon extends React.PureComponent<PropsType, StateType> {
static defaultProps: Partial<PropsType> = {
className: undefined,
@@ -80,10 +78,12 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
render() {
const styles = getStyles();
return (
<Tooltip
// onVisibleChange={this.handleTooltipVisibilityChange}
<UITooltip
arrowPointAtCenter
mouseLeaveDelay={0.5}
onVisibleChange={this.handleTooltipVisibilityChange}
placement={this.props.placement}
content={this.state.hasCopied ? 'Copied' : this.props.tooltipTitle}
title={this.state.hasCopied ? 'Copied' : this.props.tooltipTitle}
>
<UIButton
className={cx(styles.CopyIcon, this.props.className)}
@@ -91,7 +91,7 @@ export default class CopyIcon extends React.PureComponent<PropsType, StateType>
icon={this.props.icon}
onClick={this.handleClick}
/>
</Tooltip>
</UITooltip>
);
}
}
packages/jaeger-ui-components/src/common/__snapshots__/CopyIcon.test.js.snap
+6 -3
View File
@@ -1,9 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<CopyIcon /> renders as expected 1`] = `
<Tooltip
content="tooltipTitleValue"
<UITooltip
arrowPointAtCenter={true}
mouseLeaveDelay={0.5}
onVisibleChange={[Function]}
placement="left"
title="tooltipTitleValue"
>
<UIButton
className="css-oqwzau classNameValue"
@@ -11,5 +14,5 @@ exports[`<CopyIcon /> renders as expected 1`] = `
icon="copy"
onClick={[Function]}
/>
</Tooltip>
</UITooltip>
`;
packages/jaeger-ui-components/src/uiElementsContext.tsx
+55 -1
View File
@@ -12,7 +12,59 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import React from 'react';
import React, { ReactElement } from 'react';
export type TooltipPlacement =
| 'top'
| 'left'
| 'right'
| 'bottom'
| 'topLeft'
| 'topRight'
| 'bottomLeft'
| 'bottomRight'
| 'leftTop'
| 'leftBottom'
| 'rightTop'
| 'rightBottom';
export type PopoverProps = {
children: ReactElement;
content: ReactElement;
arrowPointAtCenter?: boolean;
overlayClassName?: string;
placement?: TooltipPlacement;
};
export const UIPopover: React.ComponentType<PopoverProps> = function UIPopover(props: PopoverProps) {
return (
<GetElementsContext>
{(elements: Elements) => {
return <elements.Popover {...props} />;
}}
</GetElementsContext>
);
};
export type TooltipProps = {
title: string | ReactElement;
getPopupContainer?: (triggerNode: Element) => HTMLElement;
overlayClassName?: string;
children: ReactElement;
placement?: TooltipPlacement;
mouseLeaveDelay?: number;
arrowPointAtCenter?: boolean;
onVisibleChange?: (visible: boolean) => void;
};
export const UITooltip: React.ComponentType<TooltipProps> = function UITooltip(props: TooltipProps) {
return (
<GetElementsContext>
{(elements: Elements) => {
return <elements.Tooltip {...props} />;
}}
</GetElementsContext>
);
};
export type IconProps = {
type: string;
@@ -146,6 +198,8 @@ export const UIInputGroup = function UIInputGroup(props: InputGroupProps) {
};
export type Elements = {
Popover: React.ComponentType<PopoverProps>;
Tooltip: React.ComponentType<TooltipProps>;
Icon: React.ComponentType<IconProps>;
Dropdown: React.ComponentType<DropdownProps>;
Menu: React.ComponentType<MenuProps>;
public/app/features/explore/TraceView/uiElements.tsx
+8 -2
View File
@@ -1,6 +1,6 @@
import { GrafanaTheme } from '@grafana/data';
import { Button, Input, stylesFactory, useTheme } from '@grafana/ui';
import { ButtonProps, Elements } from '@jaegertracing/jaeger-ui-components';
import { Button, Input, stylesFactory, Tooltip as GrafanaTooltip, useTheme } from '@grafana/ui';
import { ButtonProps, Elements, PopoverProps, TooltipProps } from '@jaegertracing/jaeger-ui-components';
import cx from 'classnames';
import { css } from 'emotion';
import React from 'react';
@@ -12,6 +12,12 @@ import React from 'react';
// This needs to be static to prevent remounting on every render.
export const UIElements: Elements = {
Popover({ children, content }: PopoverProps) {
return <GrafanaTooltip content={content}>{children}</GrafanaTooltip>;
},
Tooltip({ children, title }: TooltipProps) {
return <GrafanaTooltip content={title}>{children}</GrafanaTooltip>;
},
Icon: (() => null as any) as any,
Dropdown: (() => null as any) as any,
Menu: (() => null as any) as any,