Skip to content

Commit

Permalink
Convert SearchResults and index components to TS
Browse files Browse the repository at this point in the history 
As with jaegertracing#1218, convert
SearchResults and the root index component to use TS and the .tsx file
extension rather than plain .js. TS was chosen here since SearchResults
was already using Flow types, and index is trivially convertible.

Adding `@types/react-form` as a new dev dependency to provide typings
for `redux-form` in `SearchResults` in turn revealed type errors in the
usage of `redux-form` in the `ServicesView` component, so update that
component accordingly. Likewise, the conversion from Flow to TS revealed
some typing errors in child components.

Also update the list of JS files to be included in the TS linting
process - since we now have two new TS files to be built and linted, the
JS files that these import in turn need to be explicitly listed in
tsconfig.lint.json, otherwise `tsc` complains that they are not included
in the build.

Signed-off-by: Máté Szabó <mszabo@fandom.com>
  • Loading branch information
@mszabo-wikia
mszabo-wikia committed Feb 27, 2023
1 parent 2c16fa5 commit 66cd2e2
Show file tree
Hide file tree
Showing 10 changed files with 83 additions and 68 deletions.
1 change: 1 addition & 0 deletions packages/jaeger-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"devDependencies": {
"@types/match-sorter": "^2.3.0",
"@types/react-window": "^1.8.0",
"@types/redux-form": "^8.3.5",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"babel-plugin-import": "1.13.5",
"bluebird": "^3.5.0",
Expand Down
10 changes: 8 additions & 2 deletions packages/jaeger-ui/src/components/DeepDependencies/traces.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,13 @@
// limitations under the License.

import * as React from 'react';
import { History as RouterHistory, Location } from 'history';
import _get from 'lodash/get';
import memoizeOne from 'memoize-one';
import queryString from 'query-string';
import { connect } from 'react-redux';

import { DeepDependencyGraphPageImpl, TOwnProps, TProps, TReduxProps } from '.';
import { DeepDependencyGraphPageImpl, TReduxProps } from '.';
import { getUrlState, sanitizeUrlState } from './url';
import { ROUTE_PATH } from '../SearchTracePage/url';
import GraphModel, { makeGraph } from '../../model/ddg/GraphModel';
Expand Down Expand Up @@ -59,8 +60,13 @@ export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxP
};
}

type TOwnProps = {
history: RouterHistory;
location: Location;
};

// export for tests
export class TracesDdgImpl extends React.PureComponent<TProps & { showSvcOpsHeader: never; baseUrl: never }> {
export class TracesDdgImpl extends React.PureComponent<TOwnProps & TReduxProps> {
render(): React.ReactNode {
const { location } = this.props;
const urlArgs = queryString.parse(location.search);
Expand Down
15 changes: 8 additions & 7 deletions packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@ import { ActionFunction, Action } from 'redux-actions';
import _debounce from 'lodash/debounce';
import _isEqual from 'lodash/isEqual';
import _isEmpty from 'lodash/isEmpty';
// @ts-ignore
import { Field, formValueSelector, reduxForm } from 'redux-form';
import { Field, formValueSelector, InjectedFormProps, reduxForm } from 'redux-form';
// @ts-ignore
import store from 'store';
import { connect } from 'react-redux';
Expand Down Expand Up @@ -137,8 +136,10 @@ const convertServiceErrorRateToPercentages = (serviceErrorRate: null | ServiceMe
return { ...serviceErrorRate, metricPoints: convertedMetricsPoints };
};

type TPropsWithInjectedFormProps = TProps & InjectedFormProps<{}, TProps>;

// export for tests
export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, StateType> {
export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithInjectedFormProps, StateType> {
docsLink: string;
graphDivWrapper: React.RefObject<HTMLInputElement>;
serviceSelectorValue: string = '';
Expand All @@ -150,7 +151,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
graphXDomain: [],
};

constructor(props: TProps) {
constructor(props: TPropsWithInjectedFormProps) {
super(props);
this.graphDivWrapper = React.createRef();
this.docsLink = getConfigValue('monitor.docsLink');
Expand Down Expand Up @@ -271,7 +272,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
<Col span={6}>
<h2 className="service-selector-header">Choose service</h2>
<Field
onChange={(e: Event, newValue: string) => trackSelectService(newValue)}
onChange={(e, newValue: string) => trackSelectService(newValue)}
name="service"
component={AdaptedVirtualSelect}
placeholder="Select A Service"
Expand Down Expand Up @@ -310,7 +311,7 @@ export class MonitorATMServicesViewImpl extends React.PureComponent<TProps, Stat
name="timeframe"
component={AdaptedVirtualSelect}
placeholder="Select A Timeframe"
onChange={(e: Event, value: number) => {
onChange={(e, value: number) => {
const { label } = timeFrameOptions.find(option => option.value === value)!;
trackSelectTimeframe(label);
}}
Expand Down Expand Up @@ -455,7 +456,7 @@ export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
reduxForm<{}, TProps>({
form: 'serviceForm',
})(MonitorATMServicesViewImpl)
);
3 changes: 2 additions & 1 deletion packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

import * as React from 'react';
import { Col, Divider, Row, Tag } from 'antd';
import { LocationDescriptor } from 'history';
import { Link } from 'react-router-dom';

import { sortBy } from 'lodash';
Expand All @@ -34,7 +35,7 @@ import './ResultItem.css';
type Props = {
durationPercent: number;
isInDiffCohort: boolean;
linkTo: string;
linkTo: LocationDescriptor;
toggleComparison: (traceID: string) => void;
trace: Trace;
disableComparision: boolean;
Expand Down
7 changes: 5 additions & 2 deletions packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItemTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

import * as React from 'react';
import { Checkbox } from 'antd';
import { LocationDescriptor } from 'history';
import { Link } from 'react-router-dom';

import TraceName from '../../common/TraceName';
Expand All @@ -30,7 +31,7 @@ type Props = {
durationPercent?: number;
error?: ApiError;
isInDiffCohort: boolean;
linkTo: string | TNil;
linkTo: LocationDescriptor | TNil;
state?: FetchedState | TNil;
targetBlank?: boolean;
toggleComparison: (traceID: string, isInDiffCohort: boolean) => void;
Expand Down Expand Up @@ -72,7 +73,9 @@ export default class ResultItemTitle extends React.PureComponent<Props> {
} = this.props;
// Use a div when the ResultItemTitle doesn't link to anything
let WrapperComponent: string | typeof Link = 'div';
const wrapperProps: Record<string, string> = { className: 'ResultItemTitle--item ub-flex-auto' };
const wrapperProps: Record<string, string | LocationDescriptor> = {
className: 'ResultItemTitle--item ub-flex-auto',
};
if (linkTo) {
wrapperProps.to = linkTo;
WrapperComponent = Link;
Expand Down
50 changes: 24 additions & 26 deletions ...ts/SearchTracePage/SearchResults/index.js → ...s/SearchTracePage/SearchResults/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@
import * as React from 'react';
import { Select } from 'antd';
import { History as RouterHistory, Location } from 'history';
import { Link, withRouter } from 'react-router-dom';
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import { Field, formValueSelector, reduxForm } from 'redux-form';
import queryString from 'query-string';

import AltViewOptions from './AltViewOptions';
import DiffSelection from './DiffSelection';
import * as markers from './index.markers';
import { trackAltView } from './index.track';
import { EAltViewActions, trackAltView } from './index.track';
import ResultItem from './ResultItem';
import ScatterPlot from './ScatterPlot';
import { getUrl } from '../url';
Expand All @@ -37,28 +37,28 @@ import { getPercentageOfDuration } from '../../../utils/date';
import { stripEmbeddedState } from '../../../utils/embedded-url';
import reduxFormFieldAdapter from '../../../utils/redux-form-field-adapter';

import type { FetchedTrace } from '../../../types';
import type { SearchQuery } from '../../../types/search';
import type { KeyValuePair } from '../../../types/trace';
import { FetchedTrace } from '../../../types';
import { SearchQuery } from '../../../types/search';
import { KeyValuePair, Trace } from '../../../types/trace';

import './index.css';

type SearchResultsProps = {
cohortAddTrace: string => void,
cohortRemoveTrace: string => void,
diffCohort: FetchedTrace[],
disableComparisons: boolean,
goToTrace: string => void,
hideGraph: boolean,
history: RouterHistory,
loading: boolean,
location: Location,
maxTraceDuration: number,
queryOfResults?: SearchQuery,
showStandaloneLink: boolean,
skipMessage?: boolean,
spanLinks?: Record<string, string> | undefined | null,
traces: TraceSummary[],
cohortAddTrace: (traceId: string) => void;
cohortRemoveTrace: (traceId: string) => void;
diffCohort: FetchedTrace[];
disableComparisons: boolean;
goToTrace: (traceId: string) => void;
hideGraph: boolean;
history: RouterHistory;
loading: boolean;
location: Location;
maxTraceDuration: number;
queryOfResults?: SearchQuery;
showStandaloneLink: boolean;
skipMessage?: boolean;
spanLinks?: Record<string, string> | undefined;
traces: Trace[];
};

const Option = Select.Option;
Expand Down Expand Up @@ -90,12 +90,10 @@ const SelectSort = reduxForm({

export const sortFormSelector = formValueSelector('traceResultsSort');

export class UnconnectedSearchResults extends React.PureComponent<SearchResultsProps> {
props: SearchResultsProps;

export class UnconnectedSearchResults extends React.PureComponent<SearchResultsProps & RouteComponentProps> {
static defaultProps = { skipMessage: false, spanLinks: undefined, queryOfResults: undefined };

toggleComparison = (traceID: string, remove: boolean) => {
toggleComparison = (traceID: string, remove?: boolean) => {
const { cohortAddTrace, cohortRemoveTrace } = this.props;
if (remove) {
cohortRemoveTrace(traceID);
Expand All @@ -107,7 +105,7 @@ export class UnconnectedSearchResults extends React.PureComponent<SearchResultsP
onDdgViewClicked = () => {
const { location, history } = this.props;
const urlState = queryString.parse(location.search);
const view = urlState.view && urlState.view === 'ddg' ? 'traces' : 'ddg';
const view = urlState.view && urlState.view === 'ddg' ? EAltViewActions.Traces : EAltViewActions.Ddg;
trackAltView(view);
history.push(getUrl({ ...urlState, view }));
};
Expand Down Expand Up @@ -172,7 +170,7 @@ export class UnconnectedSearchResults extends React.PureComponent<SearchResultsP
name: t.traceName,
color: t.spans.some(sp => sp.tags.some(isErrorTag)) ? 'red' : '#12939A',
}))}
onValueClick={t => {
onValueClick={(t: Trace) => {
goToTrace(t.traceID);
}}
/>
Expand Down
5 changes: 2 additions & 3 deletions packages/jaeger-ui/src/index.js → packages/jaeger-ui/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import './site-prefix';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
import { document } from 'global';

import JaegerUIApp from './components/App';
import { context as trackingContext } from './utils/tracking';
Expand All @@ -36,9 +35,9 @@ import 'u-basscss/css/typography.css';

const UI_ROOT_ID = 'jaeger-ui-root';

const root = createRoot(document.getElementById(UI_ROOT_ID));
const root = createRoot(document.getElementById(UI_ROOT_ID)!);

if (trackingContext) {
if (typeof trackingContext === 'object' && trackingContext !== null) {
trackingContext.context(() => {
root.render(
<BrowserRouter>
Expand Down
27 changes: 0 additions & 27 deletions packages/jaeger-ui/src/types/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,3 @@ export type SearchQuery = {
start: number | string;
tags: string | TNil;
};

/**
* Type used to summarize traces for the search page.
*/
export type TraceSummary = {
/**
* Duration of trace in milliseconds.
*/
duration: number;
/**
* Start time of trace in milliseconds.
*/
timestamp: number;
traceName: string;
traceID: string;
numberOfErredSpans: number;
numberOfSpans: number;
services: { name: string; numberOfSpans: number }[];
};

export type TraceSummaries = {
/**
* Duration of longest trace in `traces` in milliseconds.
*/
maxDuration: number;
traces: TraceSummary[];
};
18 changes: 18 additions & 0 deletions packages/jaeger-ui/tsconfig.lint.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,29 @@
"files": [
"src/actions/jaeger-api.js",
"src/api/jaeger.js",
"src/components/App/index.js",
"src/components/DependencyGraph/DAG.js",
"src/components/DependencyGraph/DependencyForceGraph.js",
"src/components/DependencyGraph/index.js",
"src/components/SearchTracePage/index.js",
"src/components/SearchTracePage/SearchForm.js",
"src/components/SearchTracePage/SearchForm.markers.js",
"src/components/SearchTracePage/SearchResults/ScatterPlot.js",
"src/components/SearchTracePage/SearchResults/index.markers.js",
"src/components/SearchTracePage/SearchResults/ResultItem.markers.js",
"src/middlewares/index.js",
"src/model/order-by.js",
"src/propTypes/dependencies.js",
"src/reducers/config.js",
"src/reducers/dependencies.js",
"src/reducers/index.js",
"src/reducers/services.js",
"src/reducers/trace.js",
"src/selectors/dependencies.js",
"src/selectors/process.js",
"src/selectors/span.js",
"src/selectors/trace.js",
"src/utils/configure-store.js",
"src/utils/sort.js",
"src/utils/TreeNode.js"
]
Expand Down
15 changes: 15 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2718,6 +2718,14 @@
version "2.2.1"
resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.2.1.tgz#c1f4a7283ecd3cd696291550361e441bf9389370"

"@types/redux-form@^8.3.5":
version "8.3.5"
resolved "https://registry.yarnpkg.com/@types/redux-form/-/redux-form-8.3.5.tgz#7c55f4182952a41eca67e9d26e2a41ad425859a5"
integrity sha512-SchB4i7nxgWNbJS4cXEZducztkvHzVrb5xlAXwfLpbrLPo6tMY06+kx1GqMv42+YnGy9TpCAkF51a21HatqWBA==
dependencies:
"@types/react" "*"
redux "^3.6.0 || ^4.0.0"

"@types/scheduler@*":
version "0.16.2"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
Expand Down Expand Up @@ -15311,6 +15319,13 @@ redux@^3.0.2, redux@^3.6.0, redux@^3.7.2:
loose-envify "^1.1.0"
symbol-observable "^1.0.3"

"redux@^3.6.0 || ^4.0.0":
version "4.2.1"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
dependencies:
"@babel/runtime" "^7.9.2"

regenerate-unicode-properties@^10.1.0:
version "10.1.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
Expand Down

0 comments on commit 66cd2e2

Please sign in to comment.