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
2023-01-27 14:13:17 +00:00
1 parent 7c02d9bb8a
commit afd39c18ba
@@ -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"]
@@ -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
@@ -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",
@@ -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/
 ```
@@ -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",
@@ -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"
-  }
-}
@@ -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);
-  });
-});
@@ -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',
-  },
-];
@@ -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;
@@ -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;
@@ -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[];
-};
@@ -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"
-  ]
-}
@@ -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;
@@ -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]) {
@@ -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';
@@ -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 {
@@ -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';

@@ -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';
@@ -16,8 +16,8 @@ import cx from 'classnames';
 import memoizeOne from 'memoize-one';
 import * as React from 'react';

-import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../..';
-import { TraceSpan, Trace } from '../../types/trace';
+import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../../index';
+import { TraceSpan, Trace } from '../../types';
 import { ubPb2, ubPx2, ubRelative } from '../../uberUtilityStyles';

 import CanvasSpanGraph from './CanvasSpanGraph';
@@ -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;
@@ -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
@@ -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');
@@ -23,8 +23,7 @@ import { useStyles2 } from '@grafana/ui';

 import { autoColor } from '../Theme';
 import { Popover } from '../common/Popover';
-import { TNil } from '../types';
-import { TraceSpan } from '../types/trace';
+import { TraceSpan, TNil } from '../types';

 import AccordianLogs from './SpanDetail/AccordianLogs';
 import { ViewedBoundsFunctionType } from './utils';
@@ -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';

@@ -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>
@@ -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 } from '../../types/trace';
+import { TraceKeyValuePair, TraceLink, TNil } from '../../types';
 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,
@@ -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,
@@ -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,
@@ -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,
@@ -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 } from '../../types/trace';
+import { TraceKeyValuePair, TraceLink, TNil } from '../../types';
 import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';

 const copyIconClassName = 'copyIcon';
@@ -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';
@@ -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>
@@ -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';
@@ -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 (
@@ -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`).
@@ -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;
@@ -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';
@@ -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>;
-    for (let i = 0; i < nextPropKeys.length; i += 1) {
-      if (nextProps[nextPropKeys[i]] !== this.props[nextPropKeys[i]]) {
+    let key: keyof VirtualizedTraceViewProps;
+    for (key in nextProps) {
+      if (nextProps[key] !== this.props[key]) {
        // Unless the only change was props.shouldScrollToFirstUiFindMatch changing to false.
-        if (nextPropKeys[i] === 'shouldScrollToFirstUiFindMatch') {
-          if (nextProps[nextPropKeys[i]]) {
+        if (key === 'shouldScrollToFirstUiFindMatch') {
+          if (nextProps[key]) {
            return true;
          }
        } else {
@@ -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,
@@ -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 };
 /**
@@ -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('');
@@ -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(() => {
@@ -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);
  };

@@ -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;
@@ -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 = {
@@ -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;