From dfed68feedaaffa6e0feb6a25d051000bd87b4d0 Mon Sep 17 00:00:00 2001 From: Hamas Shafiq Date: Mon, 12 Dec 2022 17:08:01 +0000 Subject: [PATCH] Chore: Refactor `packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail` to TS (#59850) --- ...es.test.js => AccordianKeyValues.test.tsx} | 12 +++---- .../SpanDetail/AccordianKeyValues.tsx | 2 +- ...ianLogs.test.js => AccordianLogs.test.tsx} | 8 ++--- .../SpanDetail/AccordianLogs.tsx | 2 +- ...s.test.js => AccordianReferences.test.tsx} | 10 +++--- .../SpanDetail/AccordianReferences.tsx | 2 +- ...ianText.test.js => AccordianText.test.tsx} | 0 ...sTable.test.js => KeyValuesTable.test.tsx} | 8 ++--- .../SpanDetail/KeyValuesTable.tsx | 2 +- .../{TextList.test.js => TextList.test.tsx} | 2 +- .../{index.test.js => index.test.tsx} | 35 ++++++++++--------- .../TraceTimelineViewer/SpanDetail/index.tsx | 2 +- 12 files changed, 43 insertions(+), 42 deletions(-) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{AccordianKeyValues.test.js => AccordianKeyValues.test.tsx} (87%) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{AccordianLogs.test.js => AccordianLogs.test.tsx} (89%) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{AccordianReferences.test.js => AccordianReferences.test.tsx} (87%) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{AccordianText.test.js => AccordianText.test.tsx} (100%) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{KeyValuesTable.test.js => KeyValuesTable.test.tsx} (91%) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{TextList.test.js => TextList.test.tsx} (94%) rename packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/{index.test.js => index.test.tsx} (81%) diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.tsx similarity index 87% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.tsx index d25e857a5c8..06c6c8f1d2d 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.tsx @@ -15,14 +15,14 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import AccordianKeyValues, { KeyValuesSummary } from './AccordianKeyValues'; +import AccordianKeyValues, { KeyValuesSummary, AccordianKeyValuesProps } from './AccordianKeyValues'; const tags = [ { key: 'span.kind', value: 'client' }, { key: 'omg', value: 'mos-def' }, ]; -const setupAccordian = (propOverrides) => { +const setupAccordian = (propOverrides?: AccordianKeyValuesProps) => { const props = { compact: false, data: tags, @@ -31,10 +31,10 @@ const setupAccordian = (propOverrides) => { onToggle: jest.fn(), ...propOverrides, }; - return render(); + return render(); }; -const setupKeyValues = (propOverrides) => { +const setupKeyValues = (propOverrides?: AccordianKeyValuesProps) => { const props = { data: tags, ...propOverrides, @@ -48,7 +48,7 @@ describe('KeyValuesSummary tests', () => { }); it('returns `null` when props.data is empty', () => { - setupKeyValues({ data: null }); + setupKeyValues({ data: null } as unknown as AccordianKeyValuesProps); expect(screen.queryAllByRole('table')).toHaveLength(0); expect(screen.queryAllByRole('row')).toHaveLength(0); @@ -95,7 +95,7 @@ describe('AccordianKeyValues test', () => { }); it('renders the summary instead of the table when it is not expanded', () => { - setupAccordian({ isOpen: false }); + setupAccordian({ isOpen: false } as AccordianKeyValuesProps); expect( screen.getByRole('switch', { name: 'test accordian: span.kind = client omg = mos-def' }) diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx index afac5297b21..66db2f97d76 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx @@ -86,7 +86,7 @@ export const getStyles = (theme: GrafanaTheme2) => { }; }; -type AccordianKeyValuesProps = { +export type AccordianKeyValuesProps = { className?: string | TNil; data: TraceKeyValuePair[]; highContrast?: boolean; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.tsx similarity index 89% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.tsx index 592af162af1..190a2a736e9 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.test.tsx @@ -15,7 +15,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import AccordianLogs from './AccordianLogs'; +import AccordianLogs, { AccordianLogsProps } from './AccordianLogs'; const logs = [ { @@ -34,7 +34,7 @@ const logs = [ }, ]; -const setup = (propOverrides) => { +const setup = (propOverrides?: AccordianLogsProps) => { const props = { logs, isOpen: false, @@ -60,13 +60,13 @@ describe('AccordianLogs tests', () => { }); it('hides log entries when not expanded', () => { - setup({ isOpen: false }); + setup({ isOpen: false } as AccordianLogsProps); expect(screen.queryByRole('table')).not.toBeInTheDocument(); }); it('shows log entries when expanded', () => { - setup({ isOpen: true }); + setup({ isOpen: true } as AccordianLogsProps); expect(screen.getByRole('table')).toBeInTheDocument(); expect(screen.queryAllByRole('cell')).toHaveLength(6); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx index 065fda8cceb..72409092a1f 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx @@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => { }; }; -type AccordianLogsProps = { +export type AccordianLogsProps = { interactive?: boolean; isOpen: boolean; linksGetter: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.tsx similarity index 87% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.tsx index e0ea5d8c38c..f0bde178776 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.test.tsx @@ -15,7 +15,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import AccordianReferences, { References } from './AccordianReferences'; +import AccordianReferences, { AccordianReferencesProps } from './AccordianReferences'; const traceID = 'trace1'; const references = [ @@ -54,7 +54,7 @@ const references = [ const link = { href: 'link' }; -const setup = (propOverrides) => { +const setup = (propOverrides?: AccordianReferencesProps) => { const props = { compact: false, data: references, @@ -65,7 +65,7 @@ const setup = (propOverrides) => { ...propOverrides, }; - return render(); + return render(); }; describe('AccordianReferences tests', () => { @@ -80,14 +80,14 @@ describe('AccordianReferences tests', () => { }); it('content doesnt show when not expanded', () => { - setup({ isOpen: false }); + setup({ isOpen: false } as AccordianReferencesProps); expect(screen.queryByRole('link', { name: /^View\sLinked/ })).not.toBeInTheDocument(); expect(screen.queryAllByRole('link', { name: /^service\d\sop\d/ })).toHaveLength(0); }); it('renders the content when it is expanded', () => { - setup({ isOpen: true }); + setup({ isOpen: true } as AccordianReferencesProps); expect(screen.getByRole('switch', { name: 'References (3)' })).toBeInTheDocument(); expect(screen.getAllByRole('link', { name: /^service\d\sop\d/ })).toHaveLength(2); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx index e976bfb4d83..3d4defe5cf6 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianReferences.tsx @@ -111,7 +111,7 @@ const getStyles = (theme: GrafanaTheme2) => { }; }; -type AccordianReferencesProps = { +export type AccordianReferencesProps = { data: TraceSpanReference[]; highContrast?: boolean; interactive?: boolean; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.tsx similarity index 100% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/AccordianText.test.tsx diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.tsx similarity index 91% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.tsx index 2b5d018f415..130f2c637e0 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.test.tsx @@ -15,7 +15,7 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; -import KeyValuesTable, { LinkValue } from './KeyValuesTable'; +import KeyValuesTable, { LinkValue, KeyValuesTableProps } from './KeyValuesTable'; const data = [ { key: 'span.kind', value: 'client' }, @@ -24,12 +24,12 @@ const data = [ { key: 'jsonkey', value: JSON.stringify({ hello: 'world' }) }, ]; -const setup = (propOverrides) => { +const setup = (propOverrides?: KeyValuesTableProps) => { const props = { data: data, ...propOverrides, }; - return render(); + return render(); }; describe('LinkValue', () => { @@ -79,7 +79,7 @@ describe('KeyValuesTable tests', () => { }, ] : [], - }); + } as KeyValuesTableProps); expect(screen.getByRole('row', { name: 'span.kind More info about client' })).toBeInTheDocument(); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx index 42ed0bb9855..ec5ad19b68e 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx @@ -99,7 +99,7 @@ LinkValue.defaultProps = { title: '', }; -type KeyValuesTableProps = { +export type KeyValuesTableProps = { data: TraceKeyValuePair[]; linksGetter: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil; }; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.tsx similarity index 94% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.tsx index 7e71bd6c85b..9870fa5e6dd 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/TextList.test.tsx @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { render, screen, within } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React from 'react'; import TextList from './TextList'; diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.tsx similarity index 81% rename from packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js rename to packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.tsx index 70f74c92848..081ec6bab28 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.test.tsx @@ -17,6 +17,7 @@ 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'; @@ -24,11 +25,11 @@ import { formatDuration } from '../utils'; import DetailState from './DetailState'; -import SpanDetail, { getAbsoluteTime } from './index'; +import SpanDetail, { getAbsoluteTime, SpanDetailProps } from './index'; describe('', () => { // use `transformTraceData` on a fake trace to get a fully processed span - const span = transformTraceData(traceGenerator.trace({ numberOfSpans: 1 })).spans[0]; + const span = transformTraceData(traceGenerator.trace({ numberOfSpans: 1 }))!.spans[0]; const detailState = new DetailState().toggleLogs().toggleProcess().toggleReferences().toggleTags(); const traceStartTime = 5; const topOfExploreViewRef = jest.fn(); @@ -78,7 +79,7 @@ describe('', () => { }, spanID: 'span1', traceID: 'trace1', - }, + } as TraceSpanReference, { refType: 'CHILD_OF', span: { @@ -91,7 +92,7 @@ describe('', () => { }, spanID: 'span4', traceID: 'trace1', - }, + } as TraceSpanReference, { refType: 'CHILD_OF', span: { @@ -104,11 +105,11 @@ describe('', () => { }, spanID: 'span5', traceID: 'trace2', - }, + } as TraceSpanReference, ]; beforeEach(() => { - formatDuration.mockReset(); + jest.mocked(formatDuration).mockReset(); props.tagsToggle.mockReset(); props.processToggle.mockReset(); props.logsToggle.mockReset(); @@ -116,24 +117,24 @@ describe('', () => { }); it('renders without exploding', () => { - expect(() => render()).not.toThrow(); + expect(() => render()).not.toThrow(); }); it('shows the operation name', () => { - render(); + render(); expect(screen.getByRole('heading', { name: span.operationName })).toBeInTheDocument(); }); it('lists the service name, duration and start time', () => { - render(); + render(); expect(screen.getByText('Duration:')).toBeInTheDocument(); expect(screen.getByText('Service:')).toBeInTheDocument(); expect(screen.getByText('Start Time:')).toBeInTheDocument(); }); it('start time shows the absolute time', () => { - render(); - const absoluteTime = getAbsoluteTime(span.startTime); + render(); + const absoluteTime = getAbsoluteTime(span.startTime, 'browser'); expect( screen.getByText((text) => { return text.includes(absoluteTime); @@ -142,19 +143,19 @@ describe('', () => { }); it('renders the span tags', async () => { - render(); + render(); await userEvent.click(screen.getByRole('switch', { name: /Attributes/ })); expect(props.tagsToggle).toHaveBeenLastCalledWith(span.spanID); }); it('renders the process tags', async () => { - render(); + render(); await userEvent.click(screen.getByRole('switch', { name: /Resource/ })); expect(props.processToggle).toHaveBeenLastCalledWith(span.spanID); }); it('renders the logs', async () => { - render(); + render(); await userEvent.click(screen.getByRole('switch', { name: /Events/ })); expect(props.logsToggle).toHaveBeenLastCalledWith(span.spanID); await userEvent.click(screen.getByRole('switch', { name: /oh the log/ })); @@ -162,19 +163,19 @@ describe('', () => { }); it('renders the warnings', async () => { - render(); + render(); await userEvent.click(screen.getByRole('switch', { name: /Warnings/ })); expect(props.warningsToggle).toHaveBeenLastCalledWith(span.spanID); }); it('renders the references', async () => { - render(); + render(); await userEvent.click(screen.getByRole('switch', { name: /References/ })); expect(props.referencesToggle).toHaveBeenLastCalledWith(span.spanID); }); it('renders deep link URL', () => { - render(); + render(); expect(document.getElementsByTagName('a').length).toBeGreaterThan(1); }); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx index 5bb0ceacf17..98e2abd3cbb 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/index.tsx @@ -103,7 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => { }; }; -type SpanDetailProps = { +export type SpanDetailProps = { detailState: DetailState; linksGetter: ((links: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil; logItemToggle: (spanID: string, log: TraceLog) => void;