From 45ebb80b65cd9271296cb945954e7b68f9664c46 Mon Sep 17 00:00:00 2001 From: Ansh Goyal Date: Tue, 10 Oct 2023 10:49:44 +0530 Subject: [PATCH 1/7] fix: remove deprc usage from DependencyGraph Signed-off-by: Ansh Goyal --- .../src/components/DependencyGraph/index.jsx | 27 ++++++++++--------- .../components/DependencyGraph/index.test.js | 15 +++++------ 2 files changed, 22 insertions(+), 20 deletions(-) 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..2fae192dcf 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,23 @@ 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); + expect(wrapper.props().activeKey).not.toBe(GRAPH_TYPES.DAG.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); + expect(wrapper.props().activeKey).not.toBe(GRAPH_TYPES.FORCE_DIRECTED.type); }); }); }); From 11a4da6b241ff0ccced34c04f918492ba954d734 Mon Sep 17 00:00:00 2001 From: Ansh Goyal Date: Tue, 10 Oct 2023 11:57:48 +0530 Subject: [PATCH 2/7] fix: remove deprc overlay from ExternalLinks comp Signed-off-by: Ansh Goyal --- .../components/common/ExternalLinks.test.js | 10 ++++---- .../src/components/common/ExternalLinks.tsx | 23 ++++++++----------- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/jaeger-ui/src/components/common/ExternalLinks.test.js b/packages/jaeger-ui/src/components/common/ExternalLinks.test.js index 279055b009..a85681af7a 100644 --- a/packages/jaeger-ui/src/components/common/ExternalLinks.test.js +++ b/packages/jaeger-ui/src/components/common/ExternalLinks.test.js @@ -14,7 +14,7 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { Menu, Dropdown } from 'antd'; +import { Dropdown } from 'antd'; import ExternalLinks from './ExternalLinks'; @@ -30,13 +30,11 @@ describe('', () => { const wrapper = shallow(); const dropdown = wrapper.find(Dropdown); expect(dropdown.length).toBe(1); - const linkValues = shallow(dropdown.first().props().overlay).dive(); - const submenuItems = linkValues.find(Menu.Item); + const submenuItems = wrapper.props().menu.items[0].label.props.items; expect(submenuItems.length).toBe(links.length); submenuItems.forEach((subMenu, i) => { - const linkValue = subMenu.find('LinkValue'); - expect(linkValue.props().href).toBe(links[i].url); - expect(linkValue.props().children).toBe(links[i].text); + expect(subMenu.label.props.href).toBe(links[i].url); + expect(subMenu.label.props.children).toBe(links[i].text); }); }); diff --git a/packages/jaeger-ui/src/components/common/ExternalLinks.tsx b/packages/jaeger-ui/src/components/common/ExternalLinks.tsx index 39959414a5..b815458e3a 100644 --- a/packages/jaeger-ui/src/components/common/ExternalLinks.tsx +++ b/packages/jaeger-ui/src/components/common/ExternalLinks.tsx @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Dropdown, Menu } from 'antd'; +import { Dropdown, Menu, MenuProps } from 'antd'; import * as React from 'react'; import { Link } from '../../types/trace'; import NewWindowIcon from './NewWindowIcon'; @@ -39,17 +39,14 @@ const LinkValue = (props: { ); // export for testing -export const linkValueList = (links: Link[]) => ( - - {links.map(({ text, url }, index) => ( - // `index` is necessary in the key because url can repeat - // eslint-disable-next-line react/no-array-index-key - - {text} - - ))} - -); +export const linkValueList = (links: Link[]) => { + const menuItems: MenuProps['items'] = links.map(({ text, url }, index) => ({ + label: {text}, + key: `${url}-${index}`, + })); + + return [{ label: , key: 'external-links' }]; +}; export default function ExternalLinks(props: ExternalLinksProps) { const { links } = props; @@ -57,7 +54,7 @@ export default function ExternalLinks(props: ExternalLinksProps) { return ; } return ( - + From 439a21ab3ca813c10415c5ba44fe7619dbaa0b71 Mon Sep 17 00:00:00 2001 From: Ansh Goyal Date: Tue, 10 Oct 2023 14:33:37 +0530 Subject: [PATCH 3/7] fix: remove deprc usage from AltViewOptions Signed-off-by: Ansh Goyal --- .../TracePageHeader/AltViewOptions.test.js | 18 +-- .../TracePageHeader/AltViewOptions.tsx | 47 +++---- .../__snapshots__/AltViewOptions.test.js.snap | 118 ++++++++++-------- .../components/common/NameSelector.test.js | 2 +- .../src/components/common/NameSelector.tsx | 4 +- .../__snapshots__/NameSelector.test.js.snap | 16 +-- 6 files changed, 106 insertions(+), 99 deletions(-) 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..807ec9106c 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,20 @@ export default function AltViewOptions(props: Props) { onTraceViewChange(item); }; - const menu = ( - - {MENU_ITEMS.filter(item => item.viewType !== viewType).map(item => ( - - handleSelectView(item.viewType)} role="button"> - {item.label} - - - ))} - {!disableJsonView && ( - + const dropdownItems = [ + ...MENU_ITEMS.filter(item => item.viewType !== viewType).map(item => ({ + label: ( + handleSelectView(item.viewType)} role="button"> + {item.label} + + ), + key: item.viewType as ETraceViewType | string, + })), + ]; + if (!disableJsonView) { + dropdownItems.push( + { + label: ( Trace JSON - - )} - {!disableJsonView && ( - + ), + key: 'trace-json', + }, + { + label: ( Trace JSON (unadjusted) - - )} - - ); + ), + key: 'trace-json-unadjusted', + } + ); + } const currentItem = MENU_ITEMS.find(item => item.viewType === viewType); const dropdownText = currentItem ? currentItem.label : 'Alternate Views'; return ( - + + menu={ + Object { + "items": Array [ + Object { + "key": "TraceGraph", + "label": + Trace Graph + , + }, + Object { + "key": "TraceStatistics", + "label": + Trace Statistics + , + }, + Object { + "key": "TraceSpansView", + "label": + Trace Spans Table + , + }, + Object { + "key": "TraceFlamegraph", + "label": + Trace Flamegraph + , + }, + Object { + "key": "trace-json", + "label": + Trace JSON + , + }, + Object { + "key": "trace-json-unadjusted", + "label": + Trace JSON (unadjusted) + , + }, + ], + } } >