diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.jsx b/packages/jaeger-ui/src/components/DependencyGraph/index.jsx
index 1c8246c911..a06e07f2ca 100644
--- a/packages/jaeger-ui/src/components/DependencyGraph/index.jsx
+++ b/packages/jaeger-ui/src/components/DependencyGraph/index.jsx
@@ -31,8 +31,6 @@ import { getConfigValue } from '../../utils/config/get-config';
import './index.css';
import withRouteProps from '../../utils/withRouteProps';
-const TabPane = Tabs.TabPane;
-
// export for tests
export const GRAPH_TYPES = {
FORCE_DIRECTED: { type: 'FORCE_DIRECTED', name: 'Force Directed Graph' },
@@ -92,6 +90,19 @@ export class DependencyGraphPageImpl extends Component {
if (dependencies.length <= dagMaxNumServices) {
GRAPH_TYPE_OPTIONS.push(GRAPH_TYPES.DAG);
}
+ const tabItems = [];
+ GRAPH_TYPE_OPTIONS.forEach(opt => {
+ tabItems.push({
+ label: opt.name,
+ key: opt.type,
+ children: (
+
+ {opt.type === 'FORCE_DIRECTED' && }
+ {opt.type === 'DAG' && }
+
+ ),
+ });
+ });
return (
- {GRAPH_TYPE_OPTIONS.map(opt => (
-
-
- {opt.type === 'FORCE_DIRECTED' && }
- {opt.type === 'DAG' && }
-
-
- ))}
-
+ items={tabItems}
+ />
);
}
}
diff --git a/packages/jaeger-ui/src/components/DependencyGraph/index.test.js b/packages/jaeger-ui/src/components/DependencyGraph/index.test.js
index 8e051422f4..c555f10744 100644
--- a/packages/jaeger-ui/src/components/DependencyGraph/index.test.js
+++ b/packages/jaeger-ui/src/components/DependencyGraph/index.test.js
@@ -13,11 +13,8 @@
// limitations under the License.
import React from 'react';
-import { Tabs } from 'antd';
import { shallow } from 'enzyme';
-import DAG from './DAG';
-import DependencyForceGraph from './DependencyForceGraph';
import {
DependencyGraphPageImpl as DependencyGraph,
GRAPH_TYPES,
@@ -78,21 +75,21 @@ describe('', () => {
describe('graph types', () => {
it('renders a menu with options for the graph types', () => {
- expect(wrapper.find(Tabs.TabPane).length).toBe(Object.keys(GRAPH_TYPES).length);
- expect(wrapper.find({ tab: GRAPH_TYPES.FORCE_DIRECTED.name }).length).toBe(1);
- expect(wrapper.find({ tab: GRAPH_TYPES.DAG.name }).length).toBe(1);
+ expect(wrapper.props().items.length).toBe(Object.keys(GRAPH_TYPES).length);
+ expect(wrapper.props().items[0].name).toBe(Object.keys(GRAPH_TYPES)[0].name);
+ expect(wrapper.props().items[1].name).toBe(Object.keys(GRAPH_TYPES)[1].name);
});
it('renders a force graph when FORCE_GRAPH is the selected type', () => {
wrapper.simulate('change', GRAPH_TYPES.FORCE_DIRECTED.type);
expect(wrapper.state('graphType')).toBe(GRAPH_TYPES.FORCE_DIRECTED.type);
- expect(wrapper.find(DependencyForceGraph).length).toBe(1);
+ expect(wrapper.props().activeKey).toBe(GRAPH_TYPES.FORCE_DIRECTED.type);
});
it('renders a DAG graph when DAG is the selected type', () => {
wrapper.simulate('change', GRAPH_TYPES.DAG.type);
expect(wrapper.state('graphType')).toBe(GRAPH_TYPES.DAG.type);
- expect(wrapper.find(DAG).length).toBe(1);
+ expect(wrapper.props().activeKey).toBe(GRAPH_TYPES.DAG.type);
});
});
});
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.test.js
index 2de8209f85..2de6ee2cf8 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.test.js
@@ -30,16 +30,10 @@ describe('AltViewOptions', () => {
let wrapper;
const getLink = text => {
- const menu = shallow(wrapper.find(Dropdown).prop('overlay')).dive();
- const links = menu.find(Link);
+ const links = wrapper.find(Dropdown).prop('menu').items;
for (let i = 0; i < links.length; i++) {
- const link = links.at(i);
- if (link.children().text() === text) return link;
- }
- const links2 = menu.find('a');
- for (let i = 0; i < links2.length; i++) {
- const link = links2.at(i);
- if (link.children().text() === text) return link;
+ const link = links[i];
+ if (link.label.props.children === text) return link.label.props;
}
throw new Error(`Could not find "${text}"`);
};
@@ -77,11 +71,11 @@ describe('AltViewOptions', () => {
it('tracks viewing JSONs', () => {
expect(trackJsonView).not.toHaveBeenCalled();
- getLink('Trace JSON').simulate('click');
+ getLink('Trace JSON').onClick();
expect(trackJsonView).toHaveBeenCalledTimes(1);
expect(trackRawJsonView).not.toHaveBeenCalled();
- getLink('Trace JSON (unadjusted)').simulate('click');
+ getLink('Trace JSON (unadjusted)').onClick();
expect(trackRawJsonView).toHaveBeenCalledTimes(1);
expect(trackJsonView).toHaveBeenCalledTimes(1);
@@ -126,7 +120,7 @@ describe('AltViewOptions', () => {
expect(props.onTraceViewChange).toHaveBeenCalledTimes(i);
expect(trackFn).not.toHaveBeenCalled();
- getLink(link).simulate('click');
+ getLink(link).onClick();
expect(props.onTraceViewChange).toHaveBeenCalledTimes(i + 1);
viewInteractions.forEach(({ trackFn: fn }, j) => {
expect(fn).toHaveBeenCalledTimes(j <= i ? 1 : 0);
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx
index 15e55cebe3..68cd4008a5 100644
--- a/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TracePageHeader/AltViewOptions.tsx
@@ -13,7 +13,7 @@
// limitations under the License.
import * as React from 'react';
-import { Dropdown, Menu, Button } from 'antd';
+import { Dropdown, Button } from 'antd';
import { IoChevronDown } from 'react-icons/io5';
import { Link } from 'react-router-dom';
import './AltViewOptions.css';
@@ -76,17 +76,21 @@ export default function AltViewOptions(props: Props) {
onTraceViewChange(item);
};
- const menu = (
-
- );
+ ),
+ }
+ );
+ }
const currentItem = MENU_ITEMS.find(item => item.viewType === viewType);
const dropdownText = currentItem ? currentItem.label : 'Alternate Views';
return (
-
+