[chore]: minimize eslint setting overrides

.eslintrc.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 module.exports = {
+  root:true,
   env: {
     browser: true,
     jest: true,
@@ -25,20 +26,8 @@ module.exports = {
       },
     },
   },
-  extends: ['airbnb', 'prettier'],
+  extends: ['airbnb', 'prettier','eslint:recommended','plugin:@typescript-eslint/recommended'],
   overrides: [
-    {
-      files: ['*.jsx', '*.test.js'],
-      parser: '@babel/eslint-parser',
-      parserOptions: {
-        requireConfigFile: false,
-        babelOptions: {
-          babelrc: false,
-          configFile: false,
-          presets: ["@babel/preset-react"],
-        },
-      }
-    },
     {
       files: ['*.ts', '*.tsx'],
       parser: '@typescript-eslint/parser',
@@ -58,8 +47,7 @@ module.exports = {
         ],
 
         // Disable ESLint core rules for which @typescript-eslint provides TypeScript-specific equivalents.
-        'no-unused-vars': 0,
-        '@typescript-eslint/no-unused-vars': 1,
+        '@typescript-eslint/no-this-alias': 0,
         'no-use-before-define': 0,
         '@typescript-eslint/no-use-before-define': 1,
         'no-redeclare': 0,
@@ -75,13 +63,6 @@ module.exports = {
         'react/no-unused-prop-types': 0,
       },
     },
-    {
-      files: ['*.test.js'],
-      rules: {
-        // Used for Jest module mocking.
-        'no-import-assign': 0,
-      },
-    },
   ],
   rules: {
     /* general */
@@ -95,6 +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",
 
     /* jsx */
     'jsx-a11y/anchor-is-valid': 0,

packages/jaeger-ui/src/components/DeepDependencies/Graph/DdgNodeContent/calc-positioning.tsx

@@ -102,7 +102,7 @@ export function _initOpSpan() {
  *     recursive call stack.
  * @returns {number} - Width of narrowest rectangle that contains given words across given lines.
  */
-function calcWidth(lengths: number[], lines: number, longestThusFar: number = 0): number {
+function calcWidth(lengths: number[], lines: number, longestThusFar = 0): number {
   // Base case: all words on one line means line length is total word length
   const total = lengths.reduce((sum, curr) => curr + sum, 0);
   if (lines === 1) return total;

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

@@ -37,6 +37,7 @@ import {
   EDdgDensity,
   EDirection,
   EViewModifier,
+  TDdgModel,
   TDdgModelParams,
   TDdgSparseUrlState,
   TDdgVertex,
@@ -47,6 +48,17 @@ import { ReduxState } from '../../types';
 import { TDdgStateEntry } from '../../types/TDdgState';
 
 import './index.css';
+import { ApiError } from '../../types/api-error';
+
+interface IDoneState {
+  state: typeof fetchedState.DONE;
+  model: TDdgModel;
+  viewModifiers: Map<number, number>;
+}
+interface IErrorState {
+  state: typeof fetchedState.ERROR;
+  error: ApiError;
+}
 
 export type TDispatchProps = {
   addViewModifier?: (kwarg: TDdgModelParams & { viewModifier: number; visibilityIndices: number[] }) => void;
@@ -174,7 +186,7 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
     const { visEncoding } = this.props.urlState;
 
     if (graphState && graphState.state === fetchedState.DONE) {
-      const { model: ddgModel } = graphState;
+      const { model: ddgModel } = graphState as IDoneState;
 
       this.updateUrlState({
         visEncoding: encodeDistance({
@@ -265,17 +277,19 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
     } = this.props;
     const { density, operation, service, visEncoding } = urlState;
     const distanceToPathElems =
-      graphState && graphState.state === fetchedState.DONE ? graphState.model.distanceToPathElems : undefined;
+      graphState && graphState.state === fetchedState.DONE
+        ? (graphState as IDoneState).model.distanceToPathElems
+        : undefined;
     const uiFindMatches = graph && graph.getVisibleUiFindMatches(uiFind, visEncoding);
     const hiddenUiFindMatches = graph && graph.getHiddenUiFindMatches(uiFind, visEncoding);
 
     let content: React.ReactElement | null = null;
-    let wrapperClassName: string = '';
+    let wrapperClassName = '';
     if (!graphState) {
       content = <h1>Enter query above</h1>;
     } else if (graphState.state === fetchedState.DONE && graph) {
       const { edges, vertices } = graph.getVisible(visEncoding);
-      const { viewModifiers } = graphState;
+      const { viewModifiers } = graphState as IDoneState;
       const { edges: edgesViewModifiers, vertices: verticesViewModifiers } = graph.getDerivedViewModifiers(
         visEncoding,
         viewModifiers
@@ -313,8 +327,8 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
           </>
         );
       } else if (
-        graphState.model.distanceToPathElems.has(-1) ||
-        graphState.model.distanceToPathElems.has(1)
+        (graphState as IDoneState).model.distanceToPathElems.has(-1) ||
+        (graphState as IDoneState).model.distanceToPathElems.has(1)
       ) {
         content = (
           <>
@@ -349,7 +363,7 @@ export class DeepDependencyGraphPageImpl extends React.PureComponent<TProps, TSt
     } else if (graphState.state === fetchedState.ERROR) {
       content = (
         <>
-          <ErrorMessage error={graphState.error} className="ub-m4" />
+          <ErrorMessage error={(graphState as IErrorState).error} className="ub-m4" />
           <p className="Ddg--center">If you are using an adblocker, whitelist Jaeger and retry.</p>
         </>
       );
@@ -405,7 +419,7 @@ export function mapStateToProps(state: ReduxState, ownProps: TOwnProps): TReduxP
   }
   let graph: GraphModel | undefined;
   if (graphState && graphState.state === fetchedState.DONE) {
-    graph = makeGraph(graphState.model, showOp, density);
+    graph = makeGraph((graphState as IDoneState).model, showOp, density);
   }
   return {
     graph,

packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx

@@ -142,7 +142,7 @@ type TPropsWithInjectedFormProps = TProps & InjectedFormProps<{}, TProps>;
 export class MonitorATMServicesViewImpl extends React.PureComponent<TPropsWithInjectedFormProps, StateType> {
   docsLink: string;
   graphDivWrapper: React.RefObject<HTMLInputElement>;
-  serviceSelectorValue: string = '';
+  serviceSelectorValue = '';
   endTime: number = Date.now();
   state = {
     graphWidth: 300,

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/CohortTable.tsx

@@ -36,7 +36,7 @@ const { Column } = Table;
 
 const defaultRowSelection = {
   hideDefaultSelections: true,
-  type: 'radio' as 'radio',
+  type: 'radio' as const,
 };
 
 export const NEED_MORE_TRACES_MESSAGE = (

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/ListView/index.tsx

@@ -453,7 +453,7 @@ export default class ListView extends React.Component<TListViewProps> {
       wrapperProps.style.overflowY = 'auto';
     }
     const scrollerStyle = {
-      position: 'relative' as 'relative',
+      position: 'relative' as const,
       height: this._yPositions.getEstimatedHeight(),
     };
     return (

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/duck.tsx

@@ -105,11 +105,11 @@ const fullActions = createActions<TActionTypes>({
 
 export const actions = (fullActions as any).jaegerUi.traceTimelineViewer as TTimelineViewerActions;
 
-function calculateFocusedFindRowStates(uiFind: string, spans: Span[], allowHide: boolean = true) {
+function calculateFocusedFindRowStates(uiFind: string, spans: Span[], allowHide = true) {
   const spansMap = new Map();
   const childrenHiddenIDs: Set<string> = new Set();
   const detailStates: Map<string, DetailState> = new Map();
-  let shouldScrollToFirstUiFindMatch: boolean = false;
+  let shouldScrollToFirstUiFindMatch = false;
 
   spans.forEach(span => {
     spansMap.set(span.spanID, span);

packages/jaeger-ui/src/components/TracePage/scroll-page.tsx

@@ -28,7 +28,7 @@ function _onTweenUpdate({ done, value }: { done: boolean; value: number }) {
   }
 }
 
-export function scrollBy(yDelta: number, appendToLast: boolean = false) {
+export function scrollBy(yDelta: number, appendToLast = false) {
   const { scrollY } = window;
   let targetFrom = scrollY;
   if (appendToLast && lastTween) {

packages/jaeger-ui/src/components/common/DetailsCard/DetailTable.tsx

@@ -83,7 +83,7 @@ export const _makeColumns = ({ defs, rows }: { defs: TColumnDefs; rows: TRow[] }
   defs.map((def: TColumnDef | string) => {
     let dataIndex: string;
     let key: string;
-    let sortable: boolean = true;
+    let sortable = true;
     let style: React.CSSProperties | undefined;
     let title: string;
     if (typeof def === 'string') {

packages/jaeger-ui/src/components/common/TraceName.tsx

@@ -49,7 +49,7 @@ export default function TraceName(props: Props) {
   } else if (state === fetchedState.LOADING) {
     title = <LoadingIndicator small />;
   } else {
-    const text: string = String(traceName || FALLBACK_TRACE_NAME);
+    const text = String(traceName || FALLBACK_TRACE_NAME);
     title = <BreakableText text={text} />;
   }
   return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;

packages/jaeger-ui/src/constants/index.tsx

@@ -12,14 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export const TOP_NAV_HEIGHT = 46 as 46;
+export const TOP_NAV_HEIGHT = 46;
 
-export const FALLBACK_DAG_MAX_NUM_SERVICES = 100 as 100;
-export const FALLBACK_TRACE_NAME = '<trace-without-root-span>' as '<trace-without-root-span>';
+export const FALLBACK_DAG_MAX_NUM_SERVICES = 100;
+export const FALLBACK_TRACE_NAME = '<trace-without-root-span>';
 
-export const FETCH_DONE = 'FETCH_DONE' as 'FETCH_DONE';
-export const FETCH_ERROR = 'FETCH_ERROR' as 'FETCH_ERROR';
-export const FETCH_LOADING = 'FETCH_LOADING' as 'FETCH_LOADING';
+export const FETCH_DONE = 'FETCH_DONE';
+export const FETCH_ERROR = 'FETCH_ERROR';
+export const FETCH_LOADING = 'FETCH_LOADING';
 
 export const fetchedState = {
   DONE: FETCH_DONE,

packages/jaeger-ui/src/constants/search-form.tsx

@@ -12,8 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export const DEFAULT_OPERATION = 'all' as 'all';
-export const DEFAULT_LOOKBACK = '1h' as '1h';
-export const DEFAULT_LIMIT = 20 as 20;
+export const DEFAULT_OPERATION = 'all';
+export const DEFAULT_LOOKBACK = '1h';
+export const DEFAULT_LIMIT = 20;
 
-export const FORM_CHANGE_ACTION_TYPE = '@@redux-form/CHANGE' as '@@redux-form/CHANGE';
+export const FORM_CHANGE_ACTION_TYPE = '@@redux-form/CHANGE';

packages/jaeger-ui/src/constants/tag-keys.tsx

@@ -12,6 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export const HTTP_METHOD = 'http.method' as 'http.method';
-export const PEER_SERVICE = 'peer.service' as 'peer.service';
-export const SPAN_KIND = 'span.kind' as 'span.kind';
+export const HTTP_METHOD = 'http.method';
+export const PEER_SERVICE = 'peer.service';
+export const SPAN_KIND = 'span.kind';

packages/jaeger-ui/src/model/transform-trace-data.tsx

@@ -122,7 +122,7 @@ export default function transformTraceData(data: TraceData & { spans: SpanData[]
   const spans: Span[] = [];
   const svcCounts: Record<string, number> = {};
 
-  tree.walk((spanID: string, node: TreeNode, depth: number = 0) => {
+  tree.walk((spanID: string, node: TreeNode, depth = 0) => {
     if (spanID === '__root__') {
       return;
     }

packages/jaeger-ui/src/reducers/ddg.tsx

@@ -25,6 +25,7 @@ import {
   TDdgActionMeta,
   TDdgAddViewModifierPayload,
   TDdgClearViewModifiersFromIndicesPayload,
+  TDdgModel,
   TDdgPayload,
   TDdgRemoveViewModifierFromIndicesPayload,
   TDdgRemoveViewModifierPayload,
@@ -33,6 +34,12 @@ import {
 import TDdgState, { TDdgStateEntry } from '../types/TDdgState';
 import guardReducer, { guardReducerWithMeta } from '../utils/guardReducer';
 
+interface IDoneState {
+  state: typeof fetchedState.DONE;
+  model: TDdgModel;
+  viewModifiers: Map<number, number>;
+}
+
 export function addViewModifier(state: TDdgState, payload: TDdgAddViewModifierPayload) {
   const { visibilityIndices, viewModifier } = payload;
   const key = getStateEntryKey(payload);
@@ -42,7 +49,7 @@ export function addViewModifier(state: TDdgState, payload: TDdgAddViewModifierPa
     return state;
   }
 
-  const viewModifiers = new Map(stateEntry.viewModifiers);
+  const viewModifiers: any = new Map((stateEntry as IDoneState).viewModifiers);
   visibilityIndices.forEach(idx => {
     viewModifiers.set(idx, (viewModifiers.get(idx) || 0) | viewModifier); // eslint-disable-line no-bitwise
   });
@@ -65,7 +72,7 @@ export function viewModifierRemoval(state: TDdgState, payload: TDdgViewModifierR
     return state;
   }
 
-  const viewModifiers = new Map(stateEntry.viewModifiers);
+  const viewModifiers: any = new Map((stateEntry as IDoneState).viewModifiers);
   const indicesToUpdate = visibilityIndices || Array.from(viewModifiers.keys());
 
   indicesToUpdate.forEach(idx => {

packages/jaeger-ui/src/reducers/metrics.mock.js

@@ -595,7 +595,7 @@ const serviceOpsCallsWithNull = {
           },
           {
             gaugeValue: {
-              // eslint-disable-next-line no-loss-of-precision
+              // eslint-disable-next-line @typescript-eslint/no-loss-of-precision
               doubleValue: 0.031052384663085615,
             },
             timestamp: '2021-09-13T12:01:36.235Z',
@@ -659,7 +659,7 @@ const serviceOpsCallsZeroDivision = {
           },
           {
             gaugeValue: {
-              // eslint-disable-next-line no-loss-of-precision
+              // eslint-disable-next-line @typescript-eslint/no-loss-of-precision
               doubleValue: 0.031052384663085615,
             },
             timestamp: '2021-09-13T12:01:36.235Z',

packages/jaeger-ui/src/utils/date.tsx

@@ -133,7 +133,7 @@ export function formatDuration(duration: number): string {
   return secondaryValue === 0 ? primaryUnitString : `${primaryUnitString} ${secondaryUnitString}`;
 }
 
-export function formatRelativeDate(value: any, fullMonthName: boolean = false) {
+export function formatRelativeDate(value: any, fullMonthName = false) {
   const m = moment.isMoment(value) ? value : moment(value);
   const monthFormat = fullMonthName ? 'MMMM' : 'MMM';
   const dt = new Date();

packages/jaeger-ui/src/utils/tracking/conv-raven-to-ga.tsx

@@ -43,7 +43,7 @@ const warn = console.warn.bind(console);
 const origin = window.location.origin + prefixUrl('');
 
 // truncate and use "~" instead of ellipsis bc it's shorter
-function truncate(str: string, len: number, front: boolean = false) {
+function truncate(str: string, len: number, front = false) {
   if (str.length > len) {
     if (!front) {
       return `${str.slice(0, len - 1)}~`;
@@ -84,7 +84,7 @@ function getSym(syms: typeof NAV_SYMBOLS | typeof FETCH_SYMBOLS, str: string) {
 //
 //   The real error message
 //     ! The real error message
-function convErrorMessage(message: string, maxLen: number = 0) {
+function convErrorMessage(message: string, maxLen = 0) {
   let msg = collapseWhitespace(message);
   const parts = ['! '];
   const j = msg.indexOf(':');

packages/jaeger-ui/src/utils/tracking/ga.test.js

@@ -207,6 +207,7 @@ describe('google analytics tracking', () => {
     });
 
     it('isDebugMode = true', () => {
+      // eslint-disable-next-line no-import-assign
       utils.logTrackingCalls = jest.fn();
       trackingDebug.init();
       trackingDebug.trackError();