jaegertracing · albertteoh · Oct 4, 2023 · Oct 4, 2023 · Oct 4, 2023 · Oct 4, 2023
@@ -32,3 +32,4 @@ coverage:
         paths: null
 ignore:
   - "packages/jaeger-ui/src/utils/helpers/ReactShallowRenderer.js"
+  - "scripts"
@@ -21,4 +21,8 @@ npm-debug.log
 yarn-error.log
 lerna-debug.log
 .eslintcache
-.vscode
+.vscode
+
+# scripts
+scripts/release-notes.py
+scripts/draft-release.py
@@ -1,2 +1,3 @@
 # Ignore generated files
-packages/jaeger-ui/index.d.ts
+packages/jaeger-ui/index.d.ts
+scripts
@@ -6,6 +6,35 @@
 
 ### Fixes
 
+## v1.34.0 (2023-10-04)
+
+### Enhancements
+
+- Handle Critical Path computation when child span starts before and ends after parent span. ([@GLVSKiriti](https://github.com/GLVSKiriti) in [#1780](https://github.com/jaegertracing/jaeger-ui/pull/1780))
+
+### Fixes
+
+- Restore ability to search in select fields ([@prathamesh-mutkure](https://github.com/prathamesh-mutkure) in [#1805](https://github.com/jaegertracing/jaeger-ui/pull/1805))
+- Replace match.params with useparams hook ([@anshgoyalevil](https://github.com/anshgoyalevil) in [#1837](https://github.com/jaegertracing/jaeger-ui/pull/1837))
+- Add custom withrouteprops hoc for react-router-dom v6 migration ([@anshgoyalevil](https://github.com/anshgoyalevil) in [#1836](https://github.com/jaegertracing/jaeger-ui/pull/1836))
+- Remove unused icon ([@priyanshu-kun](https://github.com/priyanshu-kun) in [#1829](https://github.com/jaegertracing/jaeger-ui/pull/1829))
+- Improve tooltip for elasticsearch tag queries ([@pavolloffay](https://github.com/pavolloffay) in [#1809](https://github.com/jaegertracing/jaeger-ui/pull/1809))
+- Replace react-router-redux with redux-first-history ([@anshgoyalevil](https://github.com/anshgoyalevil) in [#1826](https://github.com/jaegertracing/jaeger-ui/pull/1826))
+- Fix all controversial icons. ([@priyanshu-kun](https://github.com/priyanshu-kun) in [#1824](https://github.com/jaegertracing/jaeger-ui/pull/1824))
+- Speed up tests locally by upto 45% ([@anshgoyalevil](https://github.com/anshgoyalevil) in [#1818](https://github.com/jaegertracing/jaeger-ui/pull/1818))
+- Priyanshu kun/clean any ([@priyanshu-kun](https://github.com/priyanshu-kun) in [#1814](https://github.com/jaegertracing/jaeger-ui/pull/1814))
+- Moment.js replaced with dayjs ([@prathamesh-mutkure](https://github.com/prathamesh-mutkure) in [#1738](https://github.com/jaegertracing/jaeger-ui/pull/1738))
+- Replaced all uncontroversial icons from various icon sets to io5 ([@priyanshu-kun](https://github.com/priyanshu-kun) in [#1771](https://github.com/jaegertracing/jaeger-ui/pull/1771))
+- Speed up ci unit-test workflow by 28% ([@anshgoyalevil](https://github.com/anshgoyalevil) in [#1804](https://github.com/jaegertracing/jaeger-ui/pull/1804))
+- Fix linting warnings for no-unused-vars, no-var-requires ([@priyanshu-kun](https://github.com/priyanshu-kun) in [#1800](https://github.com/jaegertracing/jaeger-ui/pull/1800))
+- Improve tooltip for tag search ([@yurishkuro](https://github.com/yurishkuro) in [#1799](https://github.com/jaegertracing/jaeger-ui/pull/1799))
+- Fix copyicon to receive reactnode instead of string ([@anshgoyalevil](https://github.com/anshgoyalevil) in [#1791](https://github.com/jaegertracing/jaeger-ui/pull/1791))
+- Refactor critical path code to prevent it from ever throwing exceptions ([@GLVSKiriti](https://github.com/GLVSKiriti) in [#1785](https://github.com/jaegertracing/jaeger-ui/pull/1785))
+- Print suggestion on fixing prettier-lint errors ([@yurishkuro](https://github.com/yurishkuro) in [#1783](https://github.com/jaegertracing/jaeger-ui/pull/1783))
+- Upgrade to node 18 ([@yurishkuro](https://github.com/yurishkuro) in [#1776](https://github.com/jaegertracing/jaeger-ui/pull/1776))
+- Extend try/catch for critical path ([@yurishkuro](https://github.com/yurishkuro) in [#1778](https://github.com/jaegertracing/jaeger-ui/pull/1778))
+- Convert utils/treenode.js and selectors/trace.js to typescript ([@yurishkuro](https://github.com/yurishkuro) in [#1777](https://github.com/jaegertracing/jaeger-ui/pull/1777))
+
 ## v1.33.0 (2023-08-06)
 
 ### Enhancements

@@ -0,0 +1,11 @@
+.PHONY: changelog
+changelog:
+	wget https://raw.githubusercontent.com/jaegertracing/jaeger/main/scripts/release-notes.py -O ./scripts/release-notes.py -q
+	chmod 755 ./scripts/release-notes.py
+	./scripts/release-notes.py --exclude-dependabot --repo jaeger-ui
+
+.PHONY: draft-release
+draft-release:
+	wget https://raw.githubusercontent.com/jaegertracing/jaeger/main/scripts/draft-release.py -O ./scripts/draft-release.py -q
+	chmod 755 ./scripts/draft-release.py
+	./scripts/draft-release.py --title "Jaeger UI" --repo jaeger-ui
@@ -1,20 +1,16 @@
 # Cutting a Jaeger UI release
 
-1. Determine the version for the release.
-   - Follow [semver.org](https://semver.org) to determine the new version for Jaeger UI.
-     - Review all changes since the last release to determine how, if at all, any externally facing APIs are impacted. This includes, but is not limited to, the UI config and URL routes such as deep-linking and configuring the embedded mode.
-   - Preface the version with a "v", e.g. `v1.0.0`.
-1. Create and merge, per approval, a PR which preps the release.
+1. Create and merge, per approval, a PR which preps the release ([example](https://github.com/jaegertracing/jaeger-ui/pull/1767)).
    1. The PR title should match the format "Prepare release vX.Y.Z".
-   1. CHANGELOG.md
-      - Change the version of the current release from "Next (unreleased)" to "vX.Y.Z (Month D, YYYY)" where "vX.Y.Z" is the semver for this release.
-      - Make sure all relevant changes made since the last release are present and listed under the current release.
-        - Tip: Run `node scripts/get-changelog.js` script that prints a dozen most recent commits in the chagelog format.
+   2. CHANGELOG.md
+      - Change the version of the current release from "Next (unreleased)" to "vX.Y.Z (Month D, YYYY)" where "vX.Y.Z" is the [semver](https://semver.org) for this release.
+      - Run `make changelog` to list all changes since the last release.
+      - Review all changes to determine how, if at all, any externally facing APIs are impacted. This includes, but is not limited to, the UI config and URL routes such as deep-linking and configuring the embedded mode.
       - If necessary, add a note detailing any impact to externally facing APIs.
-   1. Update `packages/jaeger-ui/package.json#version` to refer to the version being released.
-1. Create a GitHub release.
+   3. Update `packages/jaeger-ui/package.json#version` to refer to the version being released.
+2. Create a GitHub release.
    - Automated (requires [gh](https://cli.github.com/manual/installation)):
-     - `python ./scripts/draft-release.py`
+     - `make draft-release`
    - Manual:
      - The tag and release must refer to the commit created when the PR from the previous step was merged.
      - The tag name for the GitHub release should be the version for the release. It should include the "v", e.g. `v1.0.0`.

@@ -9,8 +9,8 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
-    "@typescript-eslint/eslint-plugin": "6.7.3",
-    "@typescript-eslint/parser": "6.7.3",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
+    "@typescript-eslint/parser": "6.7.4",
     "eslint": "8.50.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "9.0.0",

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "jaeger-ui",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "main": "src/index.tsx",
   "license": "Apache-2.0",
   "homepage": ".",
@@ -17,7 +17,7 @@
     "@babel/preset-typescript": "^7.21.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
-    "@types/react": "16.14.35",
+    "@types/react": "18.2.24",
     "@types/react-window": "^1.8.0",
     "@types/redux-form": "^8.3.5",
     "@types/rollup-plugin-visualizer": "^4.2.1",

@@ -50,6 +50,7 @@ import {
   trackViewAllTraces,
 } from './index.track';
 import withRouteProps from '../../../utils/withRouteProps';
+import SearchableSelect from '../../common/SearchableSelect';
 
 type StateType = {
   graphWidth: number;
@@ -270,7 +271,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
               <Field
                 onChange={(e, newValue: string) => trackSelectService(newValue)}
                 name="service"
-                component={reduxFormFieldAdapter({ AntInputComponent: Select })}
+                component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
                 placeholder="Select A Service"
                 props={{
                   className: 'select-a-service-input',
@@ -309,7 +310,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithIn
             <Col span={8} className="timeframe-selector">
               <Field
                 name="timeframe"
-                component={reduxFormFieldAdapter({ AntInputComponent: Select })}
+                component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
                 placeholder="Select A Timeframe"
                 onChange={(e, value: number) => {
                   const { label } = timeFrameOptions.find(option => option.value === value)!;

@@ -37,13 +37,14 @@ import { formatDate, formatTime } from '../../utils/date';
 import reduxFormFieldAdapter from '../../utils/redux-form-field-adapter';
 import { DEFAULT_OPERATION, DEFAULT_LIMIT, DEFAULT_LOOKBACK } from '../../constants/search-form';
 import { getConfigValue } from '../../utils/config/get-config';
+import SearchableSelect from '../common/SearchableSelect';
 import './SearchForm.css';
 
 const FormItem = Form.Item;
 const Option = Select.Option;
 
 const AdaptedInput = reduxFormFieldAdapter({ AntInputComponent: Input });
-const AdaptedSelect = reduxFormFieldAdapter({ AntInputComponent: Select });
+const AdaptedSelect = reduxFormFieldAdapter({ AntInputComponent: SearchableSelect });
 const ValidatedAdaptedInput = reduxFormFieldAdapter({ AntInputComponent: Input, isValidatedInput: true });
 
 export function getUnixTimeStampInMSFromForm({ startDate, startDateTime, endDate, endDateTime }) {
@@ -163,7 +164,7 @@ export const optionsWithinMaxLookback = memoizeOne(maxLookback => {
   }
   return options.map(({ label, value }) => (
     <Option key={value} value={value}>
-      Last {label}
+      {`Last ${label}`}
     </Option>
   ));
 });
@@ -377,7 +378,14 @@ export class SearchFormImpl extends React.PureComponent {
         </FormItem>
 
         <FormItem label="Lookback">
-          <Field name="lookback" component={AdaptedSelect} props={{ disabled, defaultValue: '1h' }}>
+          <Field
+            name="lookback"
+            component={AdaptedSelect}
+            props={{
+              disabled,
+              defaultValue: '1h',
+            }}
+          >
             {optionsWithinMaxLookback(searchMaxLookback)}
             <Option value="custom">Custom Time Range</Option>
           </Field>

@@ -212,7 +212,7 @@ describe('lookback utils', () => {
       expect(options.length).toBe(threeHoursOfExpectedOptions.length);
       options.forEach(({ props }, i) => {
         expect(props.value).toBe(threeHoursOfExpectedOptions[i].value);
-        expect(props.children[1]).toBe(threeHoursOfExpectedOptions[i].label);
+        expect(props.children).toBe(`Last ${threeHoursOfExpectedOptions[i].label}`);
       });
     });
 
@@ -227,7 +227,7 @@ describe('lookback utils', () => {
       expect(options.length).toBe(expectedOptions.length);
       options.forEach(({ props }, i) => {
         expect(props.value).toBe(expectedOptions[i].value);
-        expect(props.children[1]).toBe(expectedOptions[i].label);
+        expect(props.children).toBe(`Last ${expectedOptions[i].label}`);
       });
     });
 
@@ -243,7 +243,7 @@ describe('lookback utils', () => {
       expect(options.length).toBe(expectedOptions.length);
       options.forEach(({ props }, i) => {
         expect(props.value).toBe(expectedOptions[i].value);
-        expect(props.children[1]).toBe(expectedOptions[i].label);
+        expect(props.children).toBe(`Last ${expectedOptions[i].label}`);
       });
     });
   });

@@ -45,6 +45,7 @@ import { KeyValuePair, Trace, TraceData } from '../../../types/trace';
 import './index.css';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
 import withRouteProps from '../../../utils/withRouteProps';
+import SearchableSelect from '../../common/SearchableSelect';
 
 type SearchResultsProps = {
   cohortAddTrace: (traceId: string) => void;
@@ -74,7 +75,11 @@ function SelectSortImpl() {
   return (
     <label>
       Sort:{' '}
-      <Field name="sortBy" component={reduxFormFieldAdapter({ AntInputComponent: Select })}>
+      <Field
+        name="sortBy"
+        component={reduxFormFieldAdapter({ AntInputComponent: SearchableSelect })}
+        props={{}}
+      >
         <Option value={orderBy.MOST_RECENT}>Most Recent</Option>
         <Option value={orderBy.LONGEST_FIRST}>Longest First</Option>
         <Option value={orderBy.SHORTEST_FIRST}>Shortest First</Option>

@@ -48,21 +48,22 @@ describe('<TraceSpanView>', () => {
   it('Should change value when onChange was called', () => {
     const event = ['service2'];
     wrapper = shallow(<TraceSpanView {...defaultProps} />);
-    wrapper.find('.serviceNameDD ForwardRef(InternalSelect)').simulate('change', event);
+
+    wrapper.find({ 'data-testid': 'select-service' }).simulate('change', event);
     expect(wrapper.state('selectedServiceName')).toEqual(['service2']);
   });
   it('Should change value when onChange and Rest the value when called reset', () => {
     const event = ['service2'];
     wrapper = shallow(<TraceSpanView {...defaultProps} />);
-    wrapper.find('.serviceNameDD ForwardRef(InternalSelect)').simulate('change', event);
+    wrapper.find({ 'data-testid': 'select-service' }).simulate('change', event);
     expect(wrapper.state('selectedServiceName')).toEqual(['service2']);
     wrapper.find('.reset-filter Button').simulate('click');
     expect(wrapper.state('selectedServiceName')).toEqual([]);
   });
   it('Should change value when onChange OperatioName DDwas called', () => {
     const event = ['op2', 'op3'];
     wrapper = shallow(<TraceSpanView {...defaultProps} />);
-    wrapper.find('.operationNameDD ForwardRef(InternalSelect)').simulate('change', event);
+    wrapper.find({ 'data-testid': 'select-operation' }).simulate('change', event);
     expect(wrapper.state('selectedOperationName')).toEqual(['op2', 'op3']);
   });
   it('check handler', () => {

@@ -24,6 +24,7 @@ import { Trace, Span } from '../../../types/trace';
 import { timeConversion } from '../../../utils/date';
 import prefixUrl from '../../../utils/prefix-url';
 import { getTargetEmptyOrBlank } from '../../../utils/config/get-target';
+import SearchableSelect from '../../common/SearchableSelect';
 
 const Option = Select.Option;
 
@@ -187,9 +188,8 @@ export default class TraceSpanView extends Component<Props, State> {
               wrapperCol={{ span: 18 }}
               className="serviceNameDD"
             >
-              <Select
+              <SearchableSelect
                 allowClear
-                showSearch
                 mode="multiple"
                 style={{ width: '100%' }}
                 maxTagCount={4}
@@ -203,6 +203,7 @@ export default class TraceSpanView extends Component<Props, State> {
                   }));
                   this.onFilteredChangeCustom(entry as [], 'process.serviceName' as keyof Span);
                 }}
+                data-testid="select-service"
               >
                 {this.state.serviceNamesList.map(name => {
                   return (
@@ -211,7 +212,7 @@ export default class TraceSpanView extends Component<Props, State> {
                     </Option>
                   );
                 })}
-              </Select>
+              </SearchableSelect>
             </Form.Item>
           </Col>
           <Col span={9}>
@@ -221,9 +222,8 @@ export default class TraceSpanView extends Component<Props, State> {
               wrapperCol={{ span: 18 }}
               className="operationNameDD"
             >
-              <Select
+              <SearchableSelect
                 allowClear
-                showSearch
                 mode="multiple"
                 style={{ width: '100%' }}
                 maxTagCount={4}
@@ -237,6 +237,7 @@ export default class TraceSpanView extends Component<Props, State> {
                   }));
                   this.onFilteredChangeCustom(entry as [], 'operationName');
                 }}
+                data-testid="select-operation"
               >
                 {this.uniqueOperationNameOptions().map((name: string) => {
                   return (
@@ -245,7 +246,7 @@ export default class TraceSpanView extends Component<Props, State> {
                     </Option>
                   );
                 })}
-              </Select>
+              </SearchableSelect>
             </Form.Item>
           </Col>
           <Col span={2} push={6}>