Merge branch 'main' into priyanshu-kun/#1723

Signed-off-by: Priyanshu Sharma <priyanshushrama709@gmail.com>

.eslintrc.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 module.exports = {
-  root:true,
+  root: true,
   env: {
     browser: true,
     jest: true,
@@ -26,7 +26,7 @@ module.exports = {
       },
     },
   },
-  extends: ['airbnb', 'prettier','eslint:recommended','plugin:@typescript-eslint/recommended'],
+  extends: ['airbnb', 'prettier', 'eslint:recommended', 'plugin:@typescript-eslint/recommended'],
   overrides: [
     {
       files: ['*.ts', '*.tsx'],
@@ -76,14 +76,14 @@ module.exports = {
     'no-self-compare': 0,
     'no-underscore-dangle': 0,
     'prefer-destructuring': 0,
-    
+
     /* tsx */
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": "warn",
-    "@typescript-eslint/no-var-requires": "warn",
-    "@typescript-eslint/no-empty-function": "warn",
-    "@typescript-eslint/ban-types": "warn",
-    "@typescript-eslint/ban-ts-comment": "warn",
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/no-var-requires': 'warn',
+    '@typescript-eslint/no-empty-function': 'warn',
+    '@typescript-eslint/ban-types': 'warn',
+    '@typescript-eslint/ban-ts-comment': 'warn',
 
     /* jsx */
     'jsx-a11y/anchor-is-valid': 0,

.github/workflows/lint-build.yml

@@ -0,0 +1,30 @@
+name: "Lint and Build"
+
+on:
+  push:
+    branches: [main]
+
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ (github.event.pull_request && github.event.pull_request.number) || github.ref || github.run_id }}
+  cancel-in-progress: true
+
+jobs:
+  lint-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          cache: yarn
+          node-version: '16'
+      - run: yarn install --frozen-lockfile
+      - name: Run depcheck
+        run: |
+          yarn global add depcheck
+          yarn run depcheck
+      - run: yarn lint
+      - run: yarn build

.github/workflows/unit-tests.yml

@@ -22,12 +22,6 @@ jobs:
           cache: yarn
           node-version: '16'
       - run: yarn install --frozen-lockfile
-      - name: Run depcheck
-        run: |
-          yarn global add depcheck
-          yarn run depcheck
-      - run: yarn lint
-      - run: yarn build
       - run: yarn coverage
       - name: Upload coverage to codecov.io
         uses: codecov/codecov-action@v3

BUILD.md

@@ -54,14 +54,14 @@ Runs after the top-level `yarn install`. This ensures `./packages/plexus` builds
 `tsc-lint-debug` is for diagnosing problems with linking, resolving files, or aliases in TypeScript code. It lists the files involved in the compilation.
 
 ### `test`
+
 `test` runs tests for all packages.
 
 Note that `./packages/plexus` does not yet have any tests, as tracked in issue [#340](https://github.com/jaegertracing/jaeger-ui/issues/340).
 
 `./packages/jaeger-ui` uses [Jest](https://jestjs.io/) for testing. It can be useful to directly run tests for that package by running `yarn test` from its directory, rather than the repository root.
 
-Tests for React components in `./packages/jaeger-ui` make extensive use of Jest's [snapshot testing](https://jestjs.io/docs/28.x/snapshot-testing) functionality. These snapshots can be regenerated by running `yarn test -u` from the package directory to regenerate all snapshots,
-or `yarn test -u --testNamePattern <test name>` to regenerate snapshots for a subset of tests only.
+Tests for React components in `./packages/jaeger-ui` make extensive use of Jest's [snapshot testing](https://jestjs.io/docs/28.x/snapshot-testing) functionality. These snapshots can be regenerated by running `yarn test -u` from the package directory to regenerate all snapshots, or `yarn test -u --testNamePattern <test name>` to regenerate snapshots for a subset of tests only.
 
 ### `husky` . `hooks` . `pre-commit`
 
@@ -74,10 +74,10 @@ Pretty basic.
 Note: This configuration is extended by `./packages/plexus/.eslintrc.js`.
 
 ## `.github/workflows`
+
 Holds GitHub Actions workflows used in CI and in release.
 
-CodeCov is integrated into the unit tests workflow to report coverage data from `./packages/jaeger-ui`.
-When unit tests are added to Plexus, this integration will need to be updated to gather coverage data for Plexus as well.
+CodeCov is integrated into the unit tests workflow to report coverage data from `./packages/jaeger-ui`. When unit tests are added to Plexus, this integration will need to be updated to gather coverage data for Plexus as well.
 
 [`yarn install --frozen-lockfile`](https://yarnpkg.com/lang/en/docs/cli/install/#toc-yarn-install-frozen-lockfile) ensures installs in CI fail if they would typically mutate the lockfile.
 

CHANGELOG.md

@@ -6,6 +6,19 @@
 
 ### Fixes
 
+## v1.33.0 (2023-08-06)
+
+### Enhancements
+
+- [feature] Visualize Critical Path of a trace ([@GLVSKiriti](https://github.com/GLVSKiriti) in [#1582](https://github.com/jaegertracing/jaeger-ui/pull/1582))
+- Add JSON Folding Support in Logs ([@prathamesh-mutkure](https://github.com/prathamesh-mutkure) in [#1724](https://github.com/jaegertracing/jaeger-ui/pull/1724))
+- Recognize uninstrumented services via both producer and client span kinds ([@Wck-iipi](https://github.com/Wck-iipi) in [#1681](https://github.com/jaegertracing/jaeger-ui/pull/1681))
+
+### Fixes
+
+- fix: Make popup on the Search input field less intrusive enhancement ([@anikdhabal](https://github.com/anikdhabal) in [#1685](https://github.com/jaegertracing/jaeger-ui/pull/1685))
+- Resolves #1697 - Bug fix of popover not closing ([@jriyyya](https://github.com/jriyyya) in [#1705](https://github.com/jaegertracing/jaeger-ui/pull/1705))
+
 ## v1.32.0 (2023-08-14)
 
 ### Enhancements
@@ -56,7 +69,6 @@
 - Bump @babel/eslint-parser from 7.21.8 to 7.22.5 ([@dependabot](https://github.com/dependabot) in [#1483](https://github.com/jaegertracing/jaeger-ui/pull/1483))
 - Bump @babel/core from 7.22.1 to 7.22.5 ([@dependabot](https://github.com/dependabot) in [#1484](https://github.com/jaegertracing/jaeger-ui/pull/1484))
 
-
 ## v1.30.0 (2023-06-05)
 
 ### Enhancements
@@ -69,14 +81,12 @@
 
 - Bump webpack from 5.80.0 to 5.85.0 ([@dependabot](https://github.com/dependabot) in [#1457](https://github.com/jaegertracing/jaeger-ui/pull/1457))
 
-
 ## v1.29.1 (2023-05-03)
 
 ### Fixes
 
 - Fix format of a downloaded json file ([@Katarzyna-B](https://github.com/Katarzyna-B) in [#1306](https://github.com/jaegertracing/jaeger-ui/pull/1306))
 
-
 ## v1.29.0 (2023-04-10)
 
 ### Enhancements
@@ -102,7 +112,6 @@
 - Bump vite from 4.1.4 to 4.2.0 ([@dependabot](https://github.com/dependabot) in [#1281](https://github.com/jaegertracing/jaeger-ui/pull/1281))
 - Bump typescript from 4.9.5 to 5.0.2 ([@dependabot](https://github.com/dependabot) in [#1282](https://github.com/jaegertracing/jaeger-ui/pull/1282))
 
-
 ## v1.28.1 (2023-03-15)
 
 ### Fixes

README.md

@@ -21,6 +21,7 @@ Stuck somewhere or found a bug? See [Getting in Touch](https://www.jaegertracing
 - [Running on Windows OS](#running-on-windows-os)
 
 ### Prerequisites
+
 - [nvm (Node Version Manager)](https://github.com/nvm-sh/nvm)
 - [Node.JS](https://nodejs.org/en)
 - npm package manager
@@ -92,6 +93,7 @@ The above command will run a web server on `http://localhost:5173` that will ser
 While we don't natively support Windows OS for running the Jaeger UI Dev Environment, you can use Windows Subsystem for Linux (WSL) to run it.
 
 Here are some steps to follow:
+
 1. Install WSL: https://learn.microsoft.com/en-us/windows/wsl/install
 2. Install Node.JS: https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-wsl
 3. Install Yarn: https://dev.to/bonstine/installing-yarn-on-wsl-38p2
@@ -113,4 +115,3 @@ See the [configuration guide](https://www.jaegertracing.io/docs/latest/frontend-
 [aio-docs]: https://www.jaegertracing.io/docs/latest/getting-started/
 [fossa-img]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fjaegertracing%2Fjaeger-ui.svg?type=shield
 [fossa]: https://app.fossa.io/projects/git%2Bgithub.com%2Fjaegertracing%2Fjaeger-ui?ref=badge_shield
-

package.json

@@ -9,24 +9,26 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@typescript-eslint/eslint-plugin": "6.4.1",
-    "@typescript-eslint/parser": "6.4.1",
-    "eslint": "8.47.0",
+    "@typescript-eslint/eslint-plugin": "6.5.0",
+    "@typescript-eslint/parser": "6.5.0",
+    "eslint": "8.48.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.33.2",
     "husky": "8.0.3",
     "jsdom": "22.1.0",
-    "lerna": "7.1.5",
+    "lerna": "7.2.0",
     "npm-run-all": "4.1.5",
-    "prettier": "3.0.2",
+    "prettier": "3.0.3",
     "rxjs-compat": "6.6.7",
     "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": [

packages/jaeger-ui/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "jaeger-ui",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "main": "src/index.tsx",
   "license": "Apache-2.0",
   "homepage": ".",
@@ -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",
@@ -106,7 +107,7 @@
     "start:ga-debug": "REACT_APP_GA_DEBUG=1 REACT_APP_VSN_STATE=$(../../scripts/get-tracking-version.js) vite",
     "start": "vite",
     "test": "jest",
-    "test-ci": "CI=1 jest --color"
+    "test-ci": "CI=1 jest --silent --color"
   },
   "jest": {
     "globalSetup": "./test/jest.global-setup.js",

packages/jaeger-ui/src/components/App/Page.css

@@ -34,3 +34,7 @@ limitations under the License.
 .Page--content--no-embedded {
   top: var(--nav-height);
 }
+
+.ant-menu-item:hover {
+  background-color: transparent !important;
+}

packages/jaeger-ui/src/components/App/TopNav.tsx

@@ -117,18 +117,14 @@ export function TopNavImpl(props: Props) {
   return (
     <div>
       <Menu theme="dark" mode="horizontal" selectable={false} className="ub-right" selectedKeys={[pathname]}>
-        <Menu.Item>
+        <Menu.Item style={{ paddingRight: '40px' }}>
           <TraceIDSearchInput />
         </Menu.Item>
         {menuItems.map(m => {
           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]}>

packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx

@@ -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 { IoSearch } from 'react-icons/io5';
 import { RouteComponentProps, Router as RouterHistory, withRouter } from 'react-router-dom';

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/__snapshots__/index.test.js.snap

@@ -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

packages/jaeger-ui/src/components/DeepDependencies/Header/HopsSelector/__snapshots__/Selector.test.js.snap

@@ -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"

packages/jaeger-ui/src/components/DeepDependencies/Header/index.tsx

@@ -15,7 +15,6 @@
 import * as React from 'react';
 import { Input, Tooltip } from 'antd';
 import { IoEye, IoEyeOff, IoSearch } from 'react-icons/io5';
-
 import HopsSelector from './HopsSelector';
 import NameSelector from '../../common/NameSelector';
 import LayoutSettings from './LayoutSettings';
@@ -46,7 +45,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,

packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/DetailsPanel.test.js.snap

@@ -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"

packages/jaeger-ui/src/components/DeepDependencies/SidePanel/__snapshots__/index.test.js.snap

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