Explore: Refactor trace view and move to core (#61938)

* Move TraceView to core grafana

* Remove unused code

* yarn install

* Remove jaeger-ui-components from CODEOWNERS and other tools

* Type fixes

* yarn install

* Remove mock that we no longer need

* Fix merge conflicts

* Re-add Apache license for trace view components

* Use an exclamation-circle instead of triangle to denote errors

* Remove eslint disables and update betterer results instead

.betterer.results

@@ -1689,97 +1689,6 @@ exports[`better eslint`] = {
     "packages/grafana-ui/src/utils/useAsyncDependency.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "packages/jaeger-ui-components/src/ScrollManager.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
-    ],
-    "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
-    ],
-    "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
-    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/utils.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/common/BreakableText.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/common/UiFindInput.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "packages/jaeger-ui-components/src/constants/index.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
-    ],
-    "packages/jaeger-ui-components/src/constants/tag-keys.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
-    ],
-    "packages/jaeger-ui-components/src/keyboard-shortcuts.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
-    "packages/jaeger-ui-components/src/model/link-patterns.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
-      [0, 0, 0, "Do not use any type assertions.", "10"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
-      [0, 0, 0, "Do not use any type assertions.", "12"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "13"]
-    ],
-    "packages/jaeger-ui-components/src/model/transform-trace-data.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
-    ],
-    "packages/jaeger-ui-components/src/types/api-error.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/types/links.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/types/trace.ts:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/utils/DraggableManager/types.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
-    "packages/jaeger-ui-components/src/utils/date.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "plugins-bundled/internal/input-datasource/src/InputDatasource.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
@@ -3883,6 +3792,63 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
       [0, 0, 0, "Do not use any type assertions.", "5"]
     ],
+    "public/app/features/explore/TraceView/components/ScrollManager.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+    ],
+    "public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/Scrubber.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+    ],
+    "public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/render-into-canvas.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/TraceTimelineViewer/ListView/index.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBar.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/TraceTimelineViewer/utils.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/common/BreakableText.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/constants/index.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/demo/trace-generators.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/model/link-patterns.test.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
+    ],
+    "public/app/features/explore/TraceView/components/model/link-patterns.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "8"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "9"],
+      [0, 0, 0, "Do not use any type assertions.", "10"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
+      [0, 0, 0, "Do not use any type assertions.", "12"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "13"]
+    ],
+    "public/app/features/explore/TraceView/components/model/transform-trace-data.tsx:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
+    "public/app/features/explore/TraceView/components/types/trace.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
     "public/app/features/explore/TraceView/createSpanLink.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]

.github/CODEOWNERS

@@ -306,7 +306,6 @@ WORKFLOW.md @torkelo
 /packages/grafana-ui/src/components/TimeSeries/ @grafana/grafana-bi-squad
 /packages/grafana-ui/src/components/uPlot/ @grafana/grafana-bi-squad
 /packages/grafana-ui/src/utils/storybook/ @grafana/plugins-platform-frontend
-/packages/jaeger-ui-components// @grafana/observability-traces-and-profiling
 /packages/grafana-data/src/**/*logs* @grafana/observability-logs
 /plugins-bundled/ @grafana/plugins-platform-frontend
 
@@ -436,6 +435,8 @@ lerna.json @grafana/frontend-ops
 /public/app/features/explore/Logs.tsx @grafana/observability-logs
 /public/app/features/explore/LogsContainer.tsx @grafana/observability-logs
 
+/public/app/features/explore/TraceView/ @grafana/observability-traces-and-profiling
+
 /public/api-merged.json @grafana/backend-platform
 /public/api-spec.json @grafana/backend-platform
 /public/openapi3.json @grafana/backend-platform

.github/renovate.json5

@@ -5,7 +5,6 @@
   "enabledManagers": ["npm"],
   "ignoreDeps": [
     "@types/systemjs",
-    "@types/react-icons", // jaeger-ui-components is being refactored to use @grafana/ui icons instead
     "commander", // we are planning to remove this, so no need to update it
     "execa", // we should bump this once we move to esm modules
     "history", // we should bump this together with react-router-dom
@@ -13,7 +12,6 @@
     "monaco-editor", // due to us exposing this via @grafana/ui/CodeEditor's props bumping can break plugins
     "node-fetch", // we should bump this once we move to esm modules
     "react-hook-form", // due to us exposing these hooks via @grafana/ui form components bumping can break plugins
-    "react-icons", // jaeger-ui-components is being refactored to use @grafana/ui icons instead
     "react-redux", // react-beautiful-dnd depends on react-redux 7.x, we need to update that one first
     "react-router-dom", // we should bump this together with history
     "systemjs",

LICENSING.md

@@ -15,7 +15,6 @@ packages/grafana-e2e-selectors/
 packages/grafana-runtime/
 packages/grafana-toolkit/
 packages/grafana-ui/
-packages/jaeger-ui-components/
 packaging/
 kinds/
 pkg/kinds/
@@ -23,6 +22,7 @@ pkg/kindsys/
 pkg/registry/corekind/
 grafana-mixin/
 public/app/plugins/datasource/tempo
+public/app/features/explore/TraceView/components
 public/img/icons/solid/
 public/img/icons/unicons/
 ```

package.json

@@ -178,6 +178,7 @@
     "babel-plugin-macros": "3.1.0",
     "blob-polyfill": "7.0.20220408",
     "browserslist": "^4.21.4",
+    "chance": "^1.0.10",
     "codeowners": "^5.1.1",
     "copy-webpack-plugin": "9.0.1",
     "css-loader": "6.7.1",
@@ -270,7 +271,6 @@
     "@grafana/scenes": "latest",
     "@grafana/schema": "workspace:*",
     "@grafana/ui": "workspace:*",
-    "@jaegertracing/jaeger-ui-components": "workspace:*",
     "@kusto/monaco-kusto": "5.3.6",
     "@leeoniya/ufuzzy": "0.9.1",
     "@lezer/common": "1.0.1",
@@ -315,6 +315,7 @@
     "calculate-size": "1.1.1",
     "centrifuge": "3.1.0",
     "classnames": "2.3.2",
+    "combokeys": "^3.0.0",
     "comlink": "4.3.1",
     "common-tags": "1.8.2",
     "core-js": "3.27.1",
@@ -338,12 +339,14 @@
     "immutable": "4.2.2",
     "jquery": "3.6.1",
     "js-yaml": "^4.1.0",
+    "json-markup": "^1.1.0",
     "json-source-map": "0.6.1",
     "jsurl": "^0.1.5",
     "kbar": "0.1.0-beta.36",
     "lodash": "4.17.21",
     "logfmt": "^1.3.2",
     "lru-cache": "7.14.0",
+    "lru-memoize": "^1.1.0",
     "memoize-one": "6.0.0",
     "moment": "2.29.4",
     "moment-timezone": "0.5.38",
@@ -409,6 +412,7 @@
     "tether-drop": "https://github.com/torkelo/drop",
     "tinycolor2": "1.4.2",
     "tslib": "2.4.1",
+    "tween-functions": "^1.2.0",
     "uplot": "1.6.24",
     "uuid": "9.0.0",
     "vendor": "link:./public/vendor",

packages/jaeger-ui-components/package.json

@@ -1,58 +0,0 @@
-{
-  "name": "@jaegertracing/jaeger-ui-components",
-  "version": "9.4.0-pre",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
-  "license": "Apache-2.0",
-  "private": true,
-  "scripts": {
-    "typecheck": "tsc --noEmit"
-  },
-  "devDependencies": {
-    "@grafana/tsconfig": "^1.2.0-rc1",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.4",
-    "@testing-library/user-event": "14.4.3",
-    "@types/deep-freeze": "^0.1.1",
-    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/jest": "29.2.3",
-    "@types/lodash": "4.14.187",
-    "@types/prop-types": "15.7.5",
-    "@types/react": "17.0.42",
-    "@types/react-icons": "2.2.7",
-    "@types/sinon": "^10.0.13",
-    "@types/slate-react": "0.22.9",
-    "@types/testing-library__jest-dom": "5.14.5",
-    "@types/tinycolor2": "1.4.3",
-    "sinon": "14.0.1",
-    "typescript": "4.8.4"
-  },
-  "dependencies": {
-    "@emotion/css": "11.10.5",
-    "@grafana/data": "9.4.0-pre",
-    "@grafana/e2e-selectors": "9.4.0-pre",
-    "@grafana/runtime": "9.4.0-pre",
-    "@grafana/ui": "9.4.0-pre",
-    "chance": "^1.0.10",
-    "classnames": "^2.2.5",
-    "combokeys": "^3.0.0",
-    "copy-to-clipboard": "^3.1.0",
-    "deep-freeze": "^0.0.1",
-    "fuzzy": "^0.1.3",
-    "hoist-non-react-statics": "^3.3.2",
-    "json-markup": "^1.1.0",
-    "lodash": "4.17.21",
-    "lru-memoize": "^1.1.0",
-    "memoize-one": "6.0.0",
-    "moment": "2.29.4",
-    "moment-timezone": "0.5.38",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-icons": "2.2.7",
-    "reselect": "4.1.6",
-    "tinycolor2": "1.4.2",
-    "tslib": "2.4.1",
-    "tween-functions": "^1.2.0"
-  }
-}

packages/jaeger-ui-components/src/common/NewWindowIcon.test.tsx

@@ -1,26 +0,0 @@
-// Copyright (c) 2019 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { render } from '@testing-library/react';
-import React from 'react';
-
-import NewWindowIcon, { getStyles } from './NewWindowIcon';
-
-describe('NewWindowIcon', () => {
-  it('adds is-large className when props.isLarge is true', () => {
-    const { container } = render(<NewWindowIcon isLarge />);
-    const styles = getStyles();
-    expect(container.firstChild).toHaveClass(styles.NewWindowIconLarge);
-  });
-});

packages/jaeger-ui-components/src/constants/default-config.tsx

@@ -1,86 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import deepFreeze from 'deep-freeze';
-
-import { FALLBACK_DAG_MAX_NUM_SERVICES } from './index';
-
-export default deepFreeze(
-  Object.defineProperty(
-    {
-      archiveEnabled: false,
-      dependencies: {
-        dagMaxNumServices: FALLBACK_DAG_MAX_NUM_SERVICES,
-        menuEnabled: true,
-      },
-      linkPatterns: [],
-      menu: [
-        {
-          label: 'About Jaeger',
-          items: [
-            {
-              label: 'GitHub',
-              url: 'https://github.com/uber/jaeger',
-            },
-            {
-              label: 'Docs',
-              url: 'http://jaeger.readthedocs.io/en/latest/',
-            },
-            {
-              label: 'Twitter',
-              url: 'https://twitter.com/JaegerTracing',
-            },
-            {
-              label: 'Discussion Group',
-              url: 'https://groups.google.com/forum/#!forum/jaeger-tracing',
-            },
-            {
-              label: 'Gitter.im',
-              url: 'https://gitter.im/jaegertracing/Lobby',
-            },
-            {
-              label: 'Blog',
-              url: 'https://medium.com/jaegertracing/',
-            },
-          ],
-        },
-      ],
-      search: {
-        maxLookback: {
-          label: '2 Days',
-          value: '2d',
-        },
-        maxLimit: 1500,
-      },
-      tracking: {
-        gaID: null,
-        trackErrors: true,
-      },
-    },
-    // fields that should be individually merged vs wholesale replaced
-    '__mergeFields',
-    { value: ['dependencies', 'search', 'tracking'] }
-  )
-);
-
-export const deprecations = [
-  {
-    formerKey: 'dependenciesMenuEnabled',
-    currentKey: 'dependencies.menuEnabled',
-  },
-  {
-    formerKey: 'gaTrackingID',
-    currentKey: 'tracking.gaID',
-  },
-];

packages/jaeger-ui-components/src/types/TDdgState.tsx

@@ -1,37 +0,0 @@
-// Copyright (c) 2019 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { fetchedState } from '../constants';
-import { TDdgModel } from '../model/ddg/types';
-
-import { ApiError } from './api-error';
-
-export type TDdgStateEntry =
-  | {
-      state: typeof fetchedState.LOADING;
-    }
-  | {
-      error: ApiError;
-      state: typeof fetchedState.ERROR;
-    }
-  | {
-      model: TDdgModel;
-      state: typeof fetchedState.DONE;
-      viewModifiers: Map<number, number>;
-    };
-
-type TDdgState = Record<string, TDdgStateEntry>;
-
-// eslint-disable-next-line no-undef
-export default TDdgState;

packages/jaeger-ui-components/src/types/embedded.tsx

@@ -1,25 +0,0 @@
-// Copyright (c) 2018 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-type EmbeddedStateV0 = {
-  version: 'v0';
-  searchHideGraph: boolean;
-  timeline: {
-    collapseTitle: boolean;
-    hideMinimap: boolean;
-    hideSummary: boolean;
-  };
-};
-
-export type EmbeddedState = EmbeddedStateV0;

packages/jaeger-ui-components/src/types/search.tsx

@@ -1,54 +0,0 @@
-// Copyright (c) 2017 Uber Technologies, Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { TNil } from '.';
-
-export type SearchQuery = {
-  end: number | string;
-  limit: number | string;
-  lookback: string;
-  maxDuration: null | string;
-  minDuration: null | string;
-  operation: string | TNil;
-  service: string;
-  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: Array<{ name: string; numberOfSpans: number }>;
-};
-
-export type TraceSummaries = {
-  /**
-   * Duration of longest trace in `traces` in milliseconds.
-   */
-  maxDuration: number;
-  traces: TraceSummary[];
-};

packages/jaeger-ui-components/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "allowJs": true,
-    "jsx": "react"
-  },
-  "exclude": ["dist", "node_modules"],
-  "extends": "@grafana/tsconfig",
-  "include": [
-    "src/**/*.ts*",
-    "typings",
-    "../../public/app/types/jquery/*.ts",
-    "../../public/app/types/*.d.ts",
-    "../grafana-ui/src/types/*.d.ts"
-  ]
-}

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -63,10 +63,6 @@ jest.mock('react-virtualized-auto-sizer', () => {
   return ({ children }: AutoSizerProps) => children({ height: 1, width: 1 });
 });
 
-// the mock below gets rid of this warning from recompose:
-// Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.
-jest.mock('@jaegertracing/jaeger-ui-components', () => ({}));
-
 interface ScenarioContext {
   dashboard?: DashboardModel | null;
   container?: HTMLElement;

public/app/features/explore/TraceView/TraceView.test.tsx

@@ -1,5 +1,3 @@
-import { TopOfViewRefType } from '@jaegertracing/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView';
-import { TraceData, TraceSpanData } from '@jaegertracing/jaeger-ui-components/src/types/trace';
 import { render, prettyDOM, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { createRef } from 'react';
@@ -12,6 +10,8 @@ import { ExploreId } from 'app/types';
 import { configureStore } from '../../../store/configureStore';
 
 import { TraceView } from './TraceView';
+import { TopOfViewRefType } from './components/TraceTimelineViewer/VirtualizedTraceView';
+import { TraceData, TraceSpanData } from './components/types/trace';
 import { transformDataFrames } from './utils/transform';
 
 function getTraceView(frames: DataFrame[]) {
@@ -23,7 +23,7 @@ function getTraceView(frames: DataFrame[]) {
   };
   const topOfViewRef = createRef<HTMLDivElement>();
 
-  const traceView = (
+  return (
     <Provider store={store}>
       <TraceView
         exploreId={ExploreId.left}
@@ -39,7 +39,6 @@ function getTraceView(frames: DataFrame[]) {
       />
     </Provider>
   );
-  return traceView;
 }
 
 function renderTraceView(frames = [frameOld]) {

public/app/features/explore/TraceView/TraceView.tsx

@@ -1,5 +1,4 @@
 import { css } from '@emotion/css';
-import { TopOfViewRefType } from '@jaegertracing/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView';
 import React, { RefObject, useCallback, useMemo, useState } from 'react';
 
 import {
@@ -17,13 +16,6 @@ import {
 import { getTemplateSrv } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
 import { useStyles2 } from '@grafana/ui';
-import {
-  SpanBarOptionsData,
-  Trace,
-  TracePageHeader,
-  TraceTimelineViewer,
-  TTraceTimeline,
-} from '@jaegertracing/jaeger-ui-components';
 import { getTraceToLogsOptions, TraceToLogsData } from 'app/core/components/TraceToLogs/TraceToLogsSettings';
 import { TraceToMetricsData } from 'app/core/components/TraceToMetrics/TraceToMetricsSettings';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
@@ -34,6 +26,8 @@ import { ExploreId } from 'app/types/explore';
 
 import { changePanelState } from '../state/explorePane';
 
+import { SpanBarOptionsData, Trace, TracePageHeader, TraceTimelineViewer, TTraceTimeline } from './components';
+import { TopOfViewRefType } from './components/TraceTimelineViewer/VirtualizedTraceView';
 import { createSpanLinkFactory } from './createSpanLink';
 import { useChildrenState } from './useChildrenState';
 import { useDetailState } from './useDetailState';

public/app/features/explore/TraceView/TraceViewContainer.tsx

@@ -1,5 +1,3 @@
-import TracePageSearchBar from '@jaegertracing/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar';
-import { TopOfViewRefType } from '@jaegertracing/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView';
 import React, { RefObject, useMemo, useState } from 'react';
 
 import { DataFrame, SplitOpen, PanelData } from '@grafana/data';
@@ -8,6 +6,8 @@ import { StoreState, useSelector } from 'app/types';
 import { ExploreId } from 'app/types/explore';
 
 import { TraceView } from './TraceView';
+import TracePageSearchBar from './components/TracePageHeader/TracePageSearchBar';
+import { TopOfViewRefType } from './components/TraceTimelineViewer/VirtualizedTraceView';
 import { useSearch } from './useSearch';
 import { transformDataFrames } from './utils/transform';
 interface Props {

public/app/features/explore/TraceView/components/ScrollManager.test.ts

@@ -14,9 +14,8 @@
 
 jest.mock('./scroll-page');
 
-import traceGenerator from '../src/demo/trace-generators';
-
 import ScrollManager, { Accessors } from './ScrollManager';
+import traceGenerator from './demo/trace-generators';
 import { scrollBy, scrollTo } from './scroll-page';
 import { Trace, TraceSpanData, TraceSpanReference } from './types/trace';
 

public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/ViewingLayer.tsx

@@ -19,8 +19,8 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { withTheme2, stylesFactory, Button } from '@grafana/ui';
 
-import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate, TNil } from '../..';
 import { autoColor } from '../../Theme';
+import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate, TNil } from '../../index';
 import DraggableManager, { DraggableBounds, DraggingUpdate, EUpdateTypes } from '../../utils/DraggableManager';
 
 import GraphTicks from './GraphTicks';

public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/index.tsx

@@ -16,8 +16,8 @@ import cx from 'classnames';
 import memoizeOne from 'memoize-one';
 import * as React from 'react';
 
-import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../..';
+import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../../index';
-import { TraceSpan, Trace } from '../../types/trace';
+import { TraceSpan, Trace } from '../../types';
 import { ubPb2, ubPx2, ubRelative } from '../../uberUtilityStyles';
 
 import CanvasSpanGraph from './CanvasSpanGraph';

public/app/features/explore/TraceView/components/TracePageHeader/SpanGraph/render-into-canvas.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TNil } from '../..';
+import { TNil } from '../../index';
 
 // exported for tests
 export const ITEM_ALPHA = 0.8;

public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.tsx

@@ -16,18 +16,17 @@ import { css } from '@emotion/css';
 import cx from 'classnames';
 import { get as _get, maxBy as _maxBy, values as _values } from 'lodash';
 import * as React from 'react';
-import MdKeyboardArrowRight from 'react-icons/lib/md/keyboard-arrow-right';
 
 import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 
-import { autoColor, TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '..';
 import ExternalLinks from '../common/ExternalLinks';
 import LabeledList from '../common/LabeledList';
 import TraceName from '../common/TraceName';
+import { autoColor, TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../index';
 import { getTraceLinks } from '../model/link-patterns';
 import { getTraceName } from '../model/trace-viewer';
-import { Trace } from '../types/trace';
+import { Trace } from '../types';
 import { uTxMuted } from '../uberUtilityStyles';
 import { formatDuration } from '../utils/date';
 
@@ -247,7 +246,8 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
             role="switch"
             aria-checked={!slimView}
           >
-            <MdKeyboardArrowRight
+            <Icon
+              name={'angle-right'}
               className={cx(
                 styles.TracePageHeaderDetailToggle,
                 !slimView && styles.TracePageHeaderDetailToggleExpanded

public/app/features/explore/TraceView/components/TraceTimelineViewer/ListView/index.tsx

@@ -195,6 +195,7 @@ export default class ListView extends React.Component<TListViewProps> {
     this._htmlTopOffset = -1;
     this._windowScrollListenerAdded = false;
     // _htmlElm is only relevant if props.windowScroller is true
+    // eslint-disable-next-line
     this._htmlElm = document.documentElement as any;
     this._wrapperElm = undefined;
     this._itemHolderElm = undefined;
@@ -378,6 +379,7 @@ export default class ListView extends React.Component<TListViewProps> {
     const nodes = this._itemHolderElm.childNodes;
     const max = nodes.length;
     for (let i = 0; i < max; i++) {
+      // eslint-disable-next-line
       const node: HTMLElement = nodes[i] as any;
       // use `.getAttribute(...)` instead of `.dataset` for jest / JSDOM
       const itemKey = node.getAttribute('data-item-key');

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBar.tsx

@@ -23,8 +23,7 @@ import { useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
 import { Popover } from '../common/Popover';
-import { TNil } from '../types';
+import { TraceSpan, TNil } from '../types';
-import { TraceSpan } from '../types/trace';
 
 import AccordianLogs from './SpanDetail/AccordianLogs';
 import { ViewedBoundsFunctionType } from './utils';

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.test.tsx

@@ -15,10 +15,10 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { SpanLinks } from 'src/types/links';
-import { TraceSpan } from 'src/types/trace';
 
 import { NONE, DURATION, TAG } from '../settings/SpanBarSettings';
+import { TraceSpan } from '../types';
+import { SpanLinks } from '../types/links';
 
 import SpanBarRow, { SpanBarRowProps } from './SpanBarRow';
 

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanBarRow.tsx

@@ -15,17 +15,14 @@
 import { css, keyframes } from '@emotion/css';
 import cx from 'classnames';
 import * as React from 'react';
-import IoAlert from 'react-icons/lib/io/alert';
-import IoArrowRightA from 'react-icons/lib/io/arrow-right-a';
 
 import { GrafanaTheme2, TraceKeyValuePair } from '@grafana/data';
-import { stylesFactory, withTheme2 } from '@grafana/ui';
+import { Icon, stylesFactory, withTheme2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
 import { DURATION, NONE, TAG } from '../settings/SpanBarSettings';
-import { SpanBarOptions, SpanLinkFunc, TNil } from '../types';
+import { SpanBarOptions, SpanLinkFunc, TraceSpan, TNil } from '../types';
 import { SpanLinks } from '../types/links';
-import { TraceSpan } from '../types/trace';
 
 import SpanBar from './SpanBar';
 import { SpanLinksMenu } from './SpanLinks';
@@ -43,13 +40,13 @@ const nameColumnClassName = 'nameColumn';
 
 const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   const animations = {
+    label: 'flash',
     flash: keyframes`
-    label: flash;
     from {
       background-color: ${autoColor(theme, '#68b9ff')};
     }
     to {
-      background-color: default;
+      background-color: 'default';
     }
   `,
   };
@@ -458,7 +455,8 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
                 })}
               >
                 {showErrorIcon && (
-                  <IoAlert
+                  <Icon
+                    name={'exclamation-circle'}
                     style={{
                       backgroundColor: span.errorIconColor
                         ? autoColor(theme, span.errorIconColor)
@@ -470,13 +468,14 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
                 {serviceName}{' '}
                 {rpc && (
                   <span>
-                    <IoArrowRightA /> <i className={styles.rpcColorMarker} style={{ background: rpc.color }} />
+                    <Icon name={'arrow-right'} />{' '}
+                    <i className={styles.rpcColorMarker} style={{ background: rpc.color }} />
                     {rpc.serviceName}
                   </span>
                 )}
                 {noInstrumentedServer && (
                   <span>
-                    <IoArrowRightA />{' '}
+                    <Icon name={'arrow-right'} />{' '}
                     <i className={styles.rpcColorMarker} style={{ background: noInstrumentedServer.color }} />
                     {noInstrumentedServer.serviceName}
                   </span>

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx

@@ -15,15 +15,12 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
 import * as React from 'react';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
-import { TNil } from '../../types';
+import { TraceKeyValuePair, TraceLink, TNil } from '../../types';
-import { TraceKeyValuePair, TraceLink } from '../../types/trace';
 import { uAlignIcon, uTxEllipsis } from '../../uberUtilityStyles';
 
 import * as markers from './AccordianKeyValues.markers';
@@ -132,7 +129,11 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
   let arrow: React.ReactNode | null = null;
   let headerProps: {} | null = null;
   if (interactive) {
-    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowRight className={iconCls} />;
+    arrow = isOpen ? (
+      <Icon name={'angle-down'} className={iconCls} />
+    ) : (
+      <Icon name={'angle-right'} className={iconCls} />
+    );
     headerProps = {
       'aria-checked': isOpen,
       onClick: isEmpty ? null : onToggle,

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx

@@ -15,11 +15,9 @@
 import { css } from '@emotion/css';
 import { sortBy as _sortBy } from 'lodash';
 import * as React from 'react';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import { TNil } from '../../types';
@@ -77,7 +75,11 @@ export default function AccordianLogs(props: AccordianLogsProps) {
   let HeaderComponent: 'span' | 'a' = 'span';
   let headerProps: {} | null = null;
   if (interactive) {
-    arrow = isOpen ? <IoIosArrowDown className={uAlignIcon} /> : <IoIosArrowRight className="u-align-icon" />;
+    arrow = isOpen ? (
+      <Icon name={'angle-down'} className={uAlignIcon} />
+    ) : (
+      <Icon name={'angle-right'} className="u-align-icon" />
+    );
     HeaderComponent = 'a';
     headerProps = {
       'aria-checked': isOpen,

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx

@@ -14,8 +14,6 @@
 
 import { css, cx } from '@emotion/css';
 import * as React from 'react';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
 
 import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -199,7 +197,11 @@ const AccordianReferences: React.FC<AccordianReferencesProps> = ({
   let HeaderComponent: 'span' | 'a' = 'span';
   let headerProps: {} | null = null;
   if (interactive) {
-    arrow = isOpen ? <IoIosArrowDown className={uAlignIcon} /> : <IoIosArrowRight className={uAlignIcon} />;
+    arrow = isOpen ? (
+      <Icon name={'angle-down'} className={uAlignIcon} />
+    ) : (
+      <Icon name={'angle-right'} className={uAlignIcon} />
+    );
     HeaderComponent = 'a';
     headerProps = {
       'aria-checked': isOpen,

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx

@@ -15,11 +15,9 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
 import * as React from 'react';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
-import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import { TNil } from '../../types';
@@ -76,7 +74,11 @@ export default function AccordianText(props: AccordianTextProps) {
   let arrow: React.ReactNode | null = null;
   let headerProps: {} | null = null;
   if (interactive) {
-    arrow = isOpen ? <IoIosArrowDown className={iconCls} /> : <IoIosArrowRight className={iconCls} />;
+    arrow = isOpen ? (
+      <Icon name={'angle-down'} className={iconCls} />
+    ) : (
+      <Icon name={'angle-right'} className={iconCls} />
+    );
     headerProps = {
       'aria-checked': isOpen,
       onClick: isEmpty ? null : onToggle,

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -22,8 +22,7 @@ import { Icon, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import CopyIcon from '../../common/CopyIcon';
-import { TNil } from '../../types';
+import { TraceKeyValuePair, TraceLink, TNil } from '../../types';
-import { TraceKeyValuePair, TraceLink } from '../../types/trace';
 import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';
 
 const copyIconClassName = 'copyIcon';

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.test.tsx

@@ -17,10 +17,10 @@ jest.mock('../utils');
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { TraceSpanReference } from 'src/types/trace';
 
 import traceGenerator from '../../demo/trace-generators';
 import transformTraceData from '../../model/transform-trace-data';
+import { TraceSpanReference } from '../../types/trace';
 import { formatDuration } from '../utils';
 
 import DetailState from './DetailState';

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx

@@ -15,11 +15,10 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
 import React from 'react';
-import IoLink from 'react-icons/lib/io/link';
 
 import { dateTimeFormat, GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
-import { Button, DataLinkButton, TextArea, useStyles2 } from '@grafana/ui';
+import { Button, DataLinkButton, Icon, TextArea, useStyles2 } from '@grafana/ui';
 
 import { autoColor } from '../../Theme';
 import { Divider } from '../../common/Divider';
@@ -344,7 +343,7 @@ export default function SpanDetail(props: SpanDetailProps) {
                 }
               }}
             >
-              <IoLink className={cx(uAlignIcon, styles.LinkIcon)}></IoLink>
+              <Icon name={'link'} className={cx(uAlignIcon, styles.LinkIcon)}></Icon>
             </a>
             <span className={styles.debugLabel} data-label="SpanID:" /> {spanID}
           </small>

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.test.tsx

@@ -15,10 +15,10 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { TraceSpan } from 'src/types/trace';
 
 import { createTheme } from '@grafana/data';
 
+import { TraceSpan } from '../types';
 import spanAncestorIdsSpy from '../utils/span-ancestor-ids';
 
 import SpanTreeOffset, { getStyles, TProps } from './SpanTreeOffset';

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanTreeOffset.tsx

@@ -16,14 +16,12 @@ import { css } from '@emotion/css';
 import cx from 'classnames';
 import { get as _get } from 'lodash';
 import React from 'react';
-import IoChevronRight from 'react-icons/lib/io/chevron-right';
-import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { stylesFactory, withTheme2 } from '@grafana/ui';
+import { Icon, stylesFactory, withTheme2 } from '@grafana/ui';
 
 import { autoColor } from '../Theme';
-import { TraceSpan } from '../types/trace';
+import { TraceSpan } from '../types';
 import spanAncestorIds from '../utils/span-ancestor-ids';
 
 export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
@@ -142,9 +140,9 @@ export class UnthemedSpanTreeOffset extends React.PureComponent<TProps> {
       showChildrenIcon &&
       hasChildren &&
       (childrenVisible ? (
-        <IoIosArrowDown data-testid="icon-arrow-down" />
+        <Icon name={'angle-down'} data-testid="icon-arrow-down" />
       ) : (
-        <IoChevronRight data-testid="icon-arrow-right" />
+        <Icon name={'angle-right'} data-testid="icon-arrow-right" />
       ));
     const styles = getStyles(theme);
     return (

public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx

@@ -178,7 +178,6 @@ export default class TimelineColumnResizer extends React.PureComponent<
     if (this._dragManager.isDragging() && this._rootElm && dragPosition != null) {
       isDraggingLeft = dragPosition < position;
       isDraggingRight = dragPosition > position;
-      left = `${dragPosition * 100}%`;
       // Draw a highlight from the current dragged position back to the original
       // position, e.g. highlight the change. Draw the highlight via `left` and
       // `right` css styles (simpler than using `width`).

public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx

@@ -85,7 +85,7 @@ export type TimelineViewingLayerProps = {
    * bounds for dragging need to be recalculated. In practice, the name column
    * width serves fine for this.
    */
-  boundsInvalidator: any | null | undefined;
+  boundsInvalidator: number | null | undefined;
   updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
   updateViewRangeTime: TUpdateViewRangeTimeFunction;
   viewRangeTime: ViewRangeTime;

public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.test.tsx

@@ -13,10 +13,10 @@
 // limitations under the License.
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { Trace } from 'src/types/trace';
 
 import traceGenerator from '../demo/trace-generators';
 import transformTraceData from '../model/transform-trace-data';
+import { Trace } from '../types';
 
 import SpanTreeOffset from './SpanTreeOffset';
 import VirtualizedTraceView, { VirtualizedTraceViewProps } from './VirtualizedTraceView';

public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -16,7 +16,7 @@ import { css } from '@emotion/css';
 import { isEqual } from 'lodash';
 import memoizeOne from 'memoize-one';
 import * as React from 'react';
-import { createRef, RefObject } from 'react';
+import { RefObject } from 'react';
 
 import { GrafanaTheme2, LinkModel, TimeZone } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
@@ -196,7 +196,6 @@ const memoizedGetClipping = memoizeOne(getClipping, isEqual);
 // export from tests
 export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTraceViewProps> {
   listView: ListView | TNil;
-  topTraceViewRef = createRef<HTMLDivElement>();
 
   constructor(props: VirtualizedTraceViewProps) {
     super(props);
@@ -210,12 +209,12 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
 
   shouldComponentUpdate(nextProps: VirtualizedTraceViewProps) {
     // If any prop updates, VirtualizedTraceViewImpl should update.
-    const nextPropKeys = Object.keys(nextProps) as Array<keyof VirtualizedTraceViewProps>;
+    let key: keyof VirtualizedTraceViewProps;
-    for (let i = 0; i < nextPropKeys.length; i += 1) {
+    for (key in nextProps) {
-      if (nextProps[nextPropKeys[i]] !== this.props[nextPropKeys[i]]) {
+      if (nextProps[key] !== this.props[key]) {
         // Unless the only change was props.shouldScrollToFirstUiFindMatch changing to false.
-        if (nextPropKeys[i] === 'shouldScrollToFirstUiFindMatch') {
+        if (key === 'shouldScrollToFirstUiFindMatch') {
-          if (nextProps[nextPropKeys[i]]) {
+          if (nextProps[key]) {
             return true;
           }
         } else {

public/app/features/explore/TraceView/components/TraceTimelineViewer/utils.test.ts

@@ -12,9 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from 'src/types/trace';
-
 import traceGenerator from '../demo/trace-generators';
+import { TraceSpan } from '../types';
 
 import {
   findServerChildSpan,

public/app/features/explore/TraceView/components/TraceTimelineViewer/utils.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from '../types/trace';
+import { TraceSpan } from '../types';
 
 export type ViewedBoundsFunctionType = (start: number, end: number) => { start: number; end: number };
 /**

public/app/features/explore/TraceView/components/common/BreakableText.tsx

@@ -43,7 +43,7 @@ export default function BreakableText(
   const { className, text, wordRegexp = WORD_RX } = props;
   const styles = useStyles2(getStyles);
   if (!text) {
-    return typeof text === 'string' ? text : null;
+    return null;
   }
   const spans = [];
   wordRegexp.exec('');

public/app/features/explore/TraceView/components/common/CopyIcon.test.tsx

@@ -13,12 +13,15 @@
 // limitations under the License.
 
 import { render, screen } from '@testing-library/react';
-import * as copy from 'copy-to-clipboard';
 import React from 'react';
 
 import CopyIcon from './CopyIcon';
 
-jest.mock('copy-to-clipboard');
+Object.assign(navigator, {
+  clipboard: {
+    writeText: () => {},
+  },
+});
 
 describe('<CopyIcon />', () => {
   const props = {
@@ -29,7 +32,7 @@ describe('<CopyIcon />', () => {
   let copySpy: jest.SpyInstance;
 
   beforeAll(() => {
-    copySpy = jest.spyOn(copy, 'default');
+    copySpy = jest.spyOn(navigator.clipboard, 'writeText');
   });
 
   beforeEach(() => {

public/app/features/explore/TraceView/components/common/CopyIcon.tsx

@@ -14,7 +14,6 @@
 
 import { css } from '@emotion/css';
 import cx from 'classnames';
-import copy from 'copy-to-clipboard';
 import React, { useState } from 'react';
 
 import { Button, IconName, Tooltip, useStyles2 } from '@grafana/ui';
@@ -48,7 +47,7 @@ export default function CopyIcon(props: PropsType) {
   const [hasCopied, setHasCopied] = useState(false);
 
   const handleClick = () => {
-    copy(props.copyText);
+    navigator.clipboard.writeText(props.copyText);
     setHasCopied(true);
   };
 

public/app/features/explore/TraceView/components/common/LabeledList.tsx

@@ -28,7 +28,7 @@ const getStyles = (divider: boolean) => (theme: GrafanaTheme2) => {
       list-style: none;
       margin: 0;
       padding: 0;
-      ${divider === true &&
+      ${divider &&
       `
         margin-right: -8px;
         display: flex;
@@ -39,7 +39,7 @@ const getStyles = (divider: boolean) => (theme: GrafanaTheme2) => {
     LabeledListItem: css`
       label: LabeledListItem;
       display: inline-block;
-      ${divider === true &&
+      ${divider &&
       `
         border-right: 1px solid ${autoColor(theme, '#ddd')};
         padding: 0 8px;

public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx

@@ -15,9 +15,8 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
 import React from 'react';
-import IoAndroidOpen from 'react-icons/lib/io/android-open';
 
-import { useStyles2 } from '@grafana/ui';
+import { Icon, useStyles2 } from '@grafana/ui';
 
 export const getStyles = () => {
   return {
@@ -37,7 +36,7 @@ export default function NewWindowIcon(props: Props) {
   const { isLarge, className, ...rest } = props;
   const styles = useStyles2(getStyles);
   const cls = cx({ [styles.NewWindowIconLarge]: isLarge }, className);
-  return <IoAndroidOpen className={cls} {...rest} />;
+  return <Icon className={cls} name={'anchor'} {...rest} />;
 }
 
 NewWindowIcon.defaultProps = {

public/app/features/explore/TraceView/components/common/UiFindInput.tsx

@@ -16,13 +16,12 @@ import * as React from 'react';
 
 import { IconButton, Input } from '@grafana/ui';
 
-import { TNil } from '../types/index';
+import { TNil } from '../types';
 
 type Props = {
   allowClear?: boolean;
-  inputProps: Record<string, any>;
+  inputProps: Record<string, unknown>;
   location: Location;
-  match: any;
   trackFindFunction?: (str: string | TNil) => void;
   value: string | undefined;
   onChange: (value: string) => void;