Tracing: Specify type of the data frame that is expected for TraceView (#31465)

* Use dataframe API for jeager

* Move types around

* Fix imports

* Simplify the data frame type

* Add comment

* Move the transform to separate file

* Fix logs timestamp

* Add/update tests for trace view

* Fix lint

* Add test to compare old and new format rendering

* Fix test imports

* Update data source tests

packages/jaeger-ui-components/src/ScrollManager.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { TNil } from './types';
-import { TraceSpan, TraceSpanReference, Trace } from '@grafana/data';
+import { TraceSpan, TraceSpanReference, Trace } from './types/trace';
 
 /**
  * `Accessors` is necessary because `ScrollManager` needs to be created by

packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx

@@ -19,7 +19,7 @@ import CanvasSpanGraph from './CanvasSpanGraph';
 import TickLabels from './TickLabels';
 import ViewingLayer from './ViewingLayer';
 import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from '../..';
-import { TraceSpan, Trace } from '@grafana/data';
+import { TraceSpan, Trace } from '../../types/trace';
 import { ubPb2, ubPx2, ubRelative } from '../../uberUtilityStyles';
 
 const DEFAULT_HEIGHT = 60;

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -27,7 +27,7 @@ import LabeledList from '../common/LabeledList';
 import TraceName from '../common/TraceName';
 import { getTraceName } from '../model/trace-viewer';
 import { TNil } from '../types';
-import { Trace } from '@grafana/data';
+import { Trace } from '../types/trace';
 import { formatDatetime, formatDuration } from '../utils/date';
 import { getTraceLinks } from '../model/link-patterns';
 

packages/jaeger-ui-components/src/TraceTimelineViewer/ReferencesButton.tsx

@@ -15,7 +15,7 @@
 import React from 'react';
 import { css } from 'emotion';
 import NewWindowIcon from '../common/NewWindowIcon';
-import { TraceSpanReference } from '@grafana/data';
+import { TraceSpanReference } from '../types/trace';
 import { UITooltip, UIDropdown, UIMenuItem, UIMenu, TooltipPlacement } from '../uiElementsContext';
 
 import ReferenceLink from '../url/ReferenceLink';

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBar.tsx

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from '@grafana/data';
 import cx from 'classnames';
 import { css } from 'emotion';
 import _groupBy from 'lodash/groupBy';
 import React from 'react';
 import { compose, onlyUpdateForKeys, withProps, withState } from 'recompose';
 import { autoColor, createStyle, Theme } from '../Theme';
+import { TraceSpan } from '../types/trace';
 import { TNil } from '../types';
 import { UIPopover } from '../uiElementsContext';
 import AccordianLogs from './SpanDetail/AccordianLogs';

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx

@@ -28,7 +28,7 @@ import SpanBar from './SpanBar';
 import Ticks from './Ticks';
 
 import { TNil } from '../types';
-import { TraceSpan } from '@grafana/data';
+import { TraceSpan } from '../types/trace';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
 
 const getStyles = createStyle((theme: Theme) => {

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx

@@ -21,7 +21,7 @@ import cx from 'classnames';
 import * as markers from './AccordianKeyValues.markers';
 import KeyValuesTable from './KeyValuesTable';
 import { TNil } from '../../types';
-import { TraceKeyValuePair, TraceLink } from '@grafana/data';
+import { TraceKeyValuePair, TraceLink } from '../../types/trace';
 import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
 import { uAlignIcon, uTxEllipsis } from '../../uberUtilityStyles';
 

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx

@@ -21,7 +21,7 @@ import { css } from 'emotion';
 import AccordianKeyValues from './AccordianKeyValues';
 import { formatDuration } from '../utils';
 import { TNil } from '../../types';
-import { TraceLog, TraceKeyValuePair, TraceLink } from '@grafana/data';
+import { TraceLog, TraceKeyValuePair, TraceLink } from '../../types/trace';
 import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
 import { uAlignIcon, ubMb1 } from '../../uberUtilityStyles';
 

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx

@@ -18,7 +18,7 @@ import cx from 'classnames';
 
 import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
 import IoIosArrowRight from 'react-icons/lib/io/ios-arrow-right';
-import { TraceSpanReference } from '@grafana/data';
+import { TraceSpanReference } from '../../types/trace';
 import ReferenceLink from '../../url/ReferenceLink';
 
 import { createStyle } from '../../Theme';

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/DetailState.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceLog } from '@grafana/data';
+import { TraceLog } from '../../types/trace';
 
 /**
  * Which items of a {@link SpanDetail} component are expanded.

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -20,7 +20,7 @@ import cx from 'classnames';
 import CopyIcon from '../../common/CopyIcon';
 
 import { TNil } from '../../types';
-import { TraceKeyValuePair, TraceLink } from '@grafana/data';
+import { TraceKeyValuePair, TraceLink } from '../../types/trace';
 import { UIDropdown, UIIcon, UIMenu, UIMenuItem } from '../../uiElementsContext';
 import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
 import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx

@@ -25,7 +25,7 @@ import CopyIcon from '../../common/CopyIcon';
 import LabeledList from '../../common/LabeledList';
 
 import { TNil } from '../../types';
-import { TraceKeyValuePair, TraceLink, TraceLog, TraceSpan } from '@grafana/data';
+import { TraceKeyValuePair, TraceLink, TraceLog, TraceSpan } from '../../types/trace';
 import AccordianReferences from './AccordianReferences';
 import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
 import { UIDivider } from '../../uiElementsContext';

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetailRow.tsx

@@ -21,7 +21,7 @@ import SpanTreeOffset from './SpanTreeOffset';
 import TimelineRow from './TimelineRow';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
 
-import { TraceLog, TraceSpan, TraceKeyValuePair, TraceLink } from '@grafana/data';
+import { TraceLog, TraceSpan, TraceKeyValuePair, TraceLink } from '../types/trace';
 import { CreateSpanLink } from './types';
 
 const getStyles = createStyle((theme: Theme) => {

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.tsx

@@ -19,7 +19,7 @@ import IoIosArrowDown from 'react-icons/lib/io/ios-arrow-down';
 import { css } from 'emotion';
 import cx from 'classnames';
 
-import { TraceSpan } from '@grafana/data';
+import { TraceSpan } from '../types/trace';
 import spanAncestorIds from '../utils/span-ancestor-ids';
 
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';

packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -29,7 +29,7 @@ import {
 import { Accessors } from '../ScrollManager';
 import { getColorByKey } from '../utils/color-generator';
 import { TNil } from '../types';
-import { TraceLog, TraceSpan, Trace, TraceKeyValuePair, TraceLink } from '@grafana/data';
+import { TraceLog, TraceSpan, Trace, TraceKeyValuePair, TraceLink } from '../types/trace';
 import TTraceTimeline from '../types/TTraceTimeline';
 
 import { createStyle, Theme, withTheme } from '../Theme';

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

@@ -21,7 +21,7 @@ import { merge as mergeShortcuts } from '../keyboard-shortcuts';
 import { Accessors } from '../ScrollManager';
 import { TUpdateViewRangeTimeFunction, ViewRange, ViewRangeTimeUpdate } from './types';
 import { TNil } from '../types';
-import { TraceSpan, Trace, TraceLog, TraceKeyValuePair, TraceLink } from '@grafana/data';
+import { TraceSpan, Trace, TraceLog, TraceKeyValuePair, TraceLink } from '../types/trace';
 import TTraceTimeline from '../types/TTraceTimeline';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
 import ExternalLinkContext from '../url/externalLinkContext';

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

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from '@grafana/data';
+import { TraceSpan } from '../types/trace';
 import { TNil } from '../types';
 
 interface TimeCursorUpdate {

packages/jaeger-ui-components/src/TraceTimelineViewer/utils.tsx

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

packages/jaeger-ui-components/src/model/link-patterns.tsx

@@ -17,7 +17,7 @@ import memoize from 'lru-memoize';
 import { getConfigValue } from '../utils/config/get-config';
 import { getParent } from './span';
 import { TNil } from '../types';
-import { TraceSpan, TraceLink, TraceKeyValuePair, Trace } from '@grafana/data';
+import { TraceSpan, TraceLink, TraceKeyValuePair, Trace } from '../types/trace';
 
 const parameterRegExp = /#\{([^{}]*)\}/g;
 

packages/jaeger-ui-components/src/model/span.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from '@grafana/data';
+import { TraceSpan } from '../types/trace';
 
 /**
  * Searches the span.references to find 'CHILD_OF' reference type or returns null.

packages/jaeger-ui-components/src/model/trace-viewer.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceSpan } from '@grafana/data';
+import { TraceSpan } from '../types/trace';
 
 export function getTraceName(spans: TraceSpan[]): string {
   const span = spans.filter((sp) => !sp.references || !sp.references.length)[0];

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

@@ -17,7 +17,7 @@ import _isEqual from 'lodash/isEqual';
 // @ts-ignore
 import { getTraceSpanIdsAsTree } from '../selectors/trace';
 import { getConfigValue } from '../utils/config/get-config';
-import { TraceKeyValuePair, TraceSpan, Trace, TraceViewData } from '@grafana/data';
+import { TraceKeyValuePair, TraceSpan, Trace, TraceResponse } from '../types/trace';
 // @ts-ignore
 import TreeNode from '../utils/TreeNode';
 
@@ -71,7 +71,7 @@ export function orderTags(spanTags: TraceKeyValuePair[], topPrefixes?: string[])
  * NOTE: Mutates `data` - Transform the HTTP response data into the form the app
  * generally requires.
  */
-export default function transformTraceData(data: TraceViewData | undefined): Trace | null {
+export default function transformTraceData(data: TraceResponse | undefined): Trace | null {
   if (!data?.traceID) {
     return null;
   }

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

@@ -13,7 +13,9 @@
 // limitations under the License.
 
 import { ApiError } from './api-error';
-import { Trace } from '@grafana/data';
+import { Trace } from './trace';
+
+export { TraceSpan, TraceResponse, Trace, TraceProcess, TraceKeyValuePair, TraceLink } from './trace';
 
 export { default as TTraceTimeline } from './TTraceTimeline';
 export { default as TNil } from './TNil';

packages/jaeger-ui-components/src/types/trace.ts

@@ -0,0 +1,94 @@
+// 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.
+
+/**
+ * All timestamps are in microseconds
+ */
+
+// TODO: Everett Tech Debt: Fix KeyValuePair types
+export type TraceKeyValuePair = {
+  key: string;
+  type?: string;
+  value: any;
+};
+
+export type TraceLink = {
+  url: string;
+  text: string;
+};
+
+export type TraceLog = {
+  timestamp: number;
+  fields: TraceKeyValuePair[];
+};
+
+export type TraceProcess = {
+  serviceName: string;
+  tags: TraceKeyValuePair[];
+};
+
+export type TraceSpanReference = {
+  refType: 'CHILD_OF' | 'FOLLOWS_FROM';
+  // eslint-disable-next-line no-use-before-define
+  span?: TraceSpan | null | undefined;
+  spanID: string;
+  traceID: string;
+};
+
+export type TraceSpanData = {
+  spanID: string;
+  traceID: string;
+  processID: string;
+  operationName: string;
+  // Times are in microseconds
+  startTime: number;
+  duration: number;
+  logs: TraceLog[];
+  tags?: TraceKeyValuePair[];
+  references?: TraceSpanReference[];
+  warnings?: string[] | null;
+  stackTraces?: string[];
+  flags: number;
+  errorIconColor?: string;
+};
+
+export type TraceSpan = TraceSpanData & {
+  depth: number;
+  hasChildren: boolean;
+  process: TraceProcess;
+  relativeStartTime: number;
+  tags: NonNullable<TraceSpanData['tags']>;
+  references: NonNullable<TraceSpanData['references']>;
+  warnings: NonNullable<TraceSpanData['warnings']>;
+  subsidiarilyReferencedBy: TraceSpanReference[];
+};
+
+export type TraceData = {
+  processes: Record<string, TraceProcess>;
+  traceID: string;
+  warnings?: string[] | null;
+};
+
+export type TraceResponse = TraceData & {
+  spans: TraceSpanData[];
+};
+
+export type Trace = TraceData & {
+  duration: number;
+  endTime: number;
+  spans: TraceSpan[];
+  startTime: number;
+  traceName: string;
+  services: Array<{ name: string; numberOfSpans: number }>;
+};

packages/jaeger-ui-components/src/url/ReferenceLink.tsx

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import React from 'react';
-import { TraceSpanReference } from '@grafana/data';
+import { TraceSpanReference } from '../types/trace';
 import ExternalLinkContext from './externalLinkContext';
 
 type ReferenceLinkProps = {

packages/jaeger-ui-components/src/utils/filter-spans.tsx

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { TraceKeyValuePair, TraceSpan } from '@grafana/data';
+import { TraceKeyValuePair, TraceSpan } from '../types/trace';
 import { TNil } from '../types';
 
 export default function filterSpans(textFilter: string, spans: TraceSpan[] | TNil) {

packages/jaeger-ui-components/src/utils/span-ancestor-ids.tsx

@@ -16,7 +16,7 @@ import _find from 'lodash/find';
 import _get from 'lodash/get';
 
 import { TNil } from '../types';
-import { TraceSpan } from '@grafana/data';
+import { TraceSpan } from '../types/trace';
 
 function getFirstAncestor(span: TraceSpan): TraceSpan | TNil {
   return _get(