jaegertracing · anshgoyalevil · Aug 25, 2023 · Aug 25, 2023 · Aug 25, 2023 · Aug 25, 2023
@@ -26,7 +26,9 @@
     "typescript": "5.2.2"
   },
   "resolutions": {
-    "**/lodash": "4.17.21"
+    "**/lodash": "4.17.21",
+    "**/@types/react": "16.14.35",
+    "**/@types/react-dom": "16.9.18"
   },
   "workspaces": {
     "packages": [

@@ -18,7 +18,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@types/match-sorter": "^2.3.0",
-    "@types/react": "16.8.7",
+    "@types/react": "16.14.35",
     "@types/react-window": "^1.8.0",
     "@types/redux-form": "^8.3.5",
     "@types/rollup-plugin-visualizer": "^4.2.1",
@@ -42,6 +42,7 @@
     "vite-plugin-imp": "^2.3.1"
   },
   "dependencies": {
+    "@ant-design/compatible": "^1.1.2",
     "@ant-design/icons": "4.0.0",
     "@jaegertracing/plexus": "0.2.0",
     "@pyroscope/flamegraph": "0.21.4",
@@ -52,7 +53,7 @@
     "@types/react-redux": "^5.0.6",
     "@types/react-router-dom": "^4.3.1",
     "@types/redux-actions": "2.2.1",
-    "antd": "3.26.20",
+    "antd": "4.24.13",
     "chance": "^1.0.10",
     "classnames": "^2.2.5",
     "combokeys": "^3.0.0",

@@ -34,3 +34,7 @@ limitations under the License.
 .Page--content--no-embedded {
   top: var(--nav-height);
 }
+
+.ant-menu-item:hover {
+  background-color: transparent !important;
+}
@@ -96,9 +96,9 @@ function getItem(item: ConfigMenuItem) {
 function CustomNavDropdown({ label, items }: ConfigMenuGroup) {
   const menuItems = <Menu>{items.map(getItem)}</Menu>;
   return (
-    <Dropdown overlay={menuItems} placement="bottomRight">
-      <a>
-        {label} <DownOutlined />
+    <Dropdown overlay={menuItems} placement="bottomCenter">
+      <a style={{ color: 'white' }}>
+        {label} <DownOutlined style={{ paddingRight: '20px' }} />
       </a>
     </Dropdown>
   );
@@ -123,14 +123,10 @@ export function TopNavImpl(props: Props) {
           if (isItem(m)) {
             return getItem(m);
           }
-          return (
-            <Menu.Item key={m.label}>
-              <CustomNavDropdown key={m.label} {...m} />
-            </Menu.Item>
-          );
+          return <CustomNavDropdown key={m.label} {...m} />;
         })}
       </Menu>
-      <Menu theme="dark" mode="horizontal" selectable={false} selectedKeys={[pathname]}>
+      <Menu theme="dark" mode="horizontal" selectable={false} selectedKeys={[pathname]} disabledOverflow>
         <Menu.Item>
           <Link to={prefixUrl('/')} style={{ fontSize: '14px', fontWeight: 500 }}>
             JAEGER UI

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 // Copyright (c) 2017 Uber Technologies, Inc.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -13,7 +14,9 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Form, Input } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Input } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { RouteComponentProps, Router as RouterHistory, withRouter } from 'react-router-dom';
 

@@ -1384,13 +1384,8 @@ exports[`<DdgNodeContent> renders the number of operations if there are multiple
               value={null}
             />
           }
-          mouseEnterDelay={0.1}
-          mouseLeaveDelay={0.1}
-          overlayStyle={Object {}}
           placement="bottom"
           title="Select Operation to Filter Graph"
-          transitionName="zoom-big"
-          trigger="hover"
         >
           <span>
             4 Operations

@@ -80,13 +80,8 @@ exports[`Selector renders buttons with expected text and classNames 1`] = `
       </button>,
     ]
   }
-  mouseEnterDelay={0.1}
-  mouseLeaveDelay={0.1}
-  overlayStyle={Object {}}
   placement="bottom"
   title="Visible downstream hops"
-  transitionName="zoom-big"
-  trigger="hover"
 >
   <span
     className="HopsSelector--Selector"
@@ -210,13 +205,8 @@ exports[`Selector renders upstream hops with negative distance correctly 1`] = `
       </button>,
     ]
   }
-  mouseEnterDelay={0.1}
-  mouseLeaveDelay={0.1}
-  overlayStyle={Object {}}
   placement="bottom"
   title="Visible upstream hops"
-  transitionName="zoom-big"
-  trigger="hover"
 >
   <span
     className="HopsSelector--Selector"

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Input, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
+import type { InputRef } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { MdVisibility, MdVisibilityOff } from 'react-icons/md';
 
@@ -47,7 +48,7 @@ type TProps = {
   visEncoding?: string;
 };
 export default class Header extends React.PureComponent<TProps> {
-  private _uiFindInput: React.RefObject<Input> = React.createRef();
+  private _uiFindInput: React.RefObject<InputRef> = React.createRef();
 
   static defaultProps = {
     showParameters: true,

@@ -66,12 +66,7 @@ exports[`<SidePanel> render renders detailLink 1`] = `
     </span>
     <Tooltip
       arrowPointAtCenter={true}
-      autoAdjustOverflow={true}
-      mouseEnterDelay={0.1}
-      mouseLeaveDelay={0.1}
-      placement="top"
       title="More Info"
-      transitionName="zoom-big-fast"
     >
       <a
         className="Ddg--DetailsPanel--DetailLink"

@@ -2,7 +2,7 @@
 
 exports[`<SidePanel> info button  opens info modal 1`] = `
 Object {
-  "content": <withStore(Table)
+  "content": <ForwardRef(InternalTable)
     columns={
       Array [
         Object {

@@ -3,11 +3,9 @@
 exports[`<MonitorATMEmptyState> ATM snapshot test 1`] = `
 <Col>
   <Row
-    gutter={0}
     justify="center"
   >
     <Col
-      offset={8}
       span={8}
     >
       <img
@@ -18,12 +16,10 @@ exports[`<MonitorATMEmptyState> ATM snapshot test 1`] = `
     </Col>
   </Row>
   <Row
-    gutter={0}
     justify="center"
   >
     <Col
       className="center-empty-state"
-      offset={9}
       span={6}
     >
       <h2
@@ -42,21 +38,15 @@ exports[`<MonitorATMEmptyState> ATM snapshot test 1`] = `
         Service Performance Monitoring aggregates tracing data into RED metrics and visualizes them in service and operation level dashboards.
       </h4>
       <Button
-        block={false}
         className="button-empty-state"
-        ghost={false}
-        htmlType="button"
-        loading={false}
         onClick={[Function]}
       >
         Read the Documentation
       </Button>
       <Row
-        gutter={0}
         justify="center"
       >
         <Col
-          offset={2}
           span={20}
         >
           <Alert

@@ -32,7 +32,7 @@ export default class MonitorATMEmptyState extends React.PureComponent {
     return (
       <Col>
         <Row justify="center">
-          <Col span={8} offset={8}>
+          <Col span={8}>
             <img
               className="monitor-preview-image-empty-state"
               alt="jaeger-monitor-tab-preview"
@@ -41,7 +41,7 @@ export default class MonitorATMEmptyState extends React.PureComponent {
           </Col>
         </Row>
         <Row justify="center">
-          <Col span={6} offset={9} className="center-empty-state">
+          <Col span={6} className="center-empty-state">
             {this.config.mainTitle && <h2 className="main-title-empty-state">{this.config.mainTitle}</h2>}
             {this.config.subTitle && <h3 className="sub-title-empty-state">{this.config.subTitle}</h3>}
             {this.config.description && (
@@ -59,7 +59,7 @@ export default class MonitorATMEmptyState extends React.PureComponent {
             )}
             {this.config.alert && (
               <Row justify="center">
-                <Col span={20} offset={2}>
+                <Col span={20}>
                   <Alert message={this.config.alert.message} type={this.config.alert.type} showIcon />
                 </Col>
               </Row>