From 712e23ac50fc0b94020cd85a7aecdb03c0063af5 Mon Sep 17 00:00:00 2001 From: Hamas Shafiq Date: Mon, 12 Dec 2022 11:31:53 +0000 Subject: [PATCH] Chore: Refactor `packages/jaeger-ui-components/src/utils` to TypeScript (#59979) --- packages/jaeger-ui-components/package.json | 1 + ...erator.test.js => color-generator.test.ts} | 12 +++++------ .../src/utils/{date.test.js => date.test.ts} | 2 +- ...ter-spans.test.js => filter-spans.test.ts} | 8 +++++--- .../src/utils/{sort.test.js => sort.test.ts} | 0 .../src/utils/{sort.js => sort.ts} | 20 ++++++++++++++----- ...-ids.test.js => span-ancestor-ids.test.ts} | 8 +++++--- ...ationFrame.js => requestAnimationFrame.ts} | 6 +++--- yarn.lock | 3 ++- 9 files changed, 38 insertions(+), 22 deletions(-) rename packages/jaeger-ui-components/src/utils/{color-generator.test.js => color-generator.test.ts} (95%) rename packages/jaeger-ui-components/src/utils/{date.test.js => date.test.ts} (98%) rename packages/jaeger-ui-components/src/utils/{filter-spans.test.js => filter-spans.test.ts} (96%) rename packages/jaeger-ui-components/src/utils/{sort.test.js => sort.test.ts} (100%) rename packages/jaeger-ui-components/src/utils/{sort.js => sort.ts} (67%) rename packages/jaeger-ui-components/src/utils/{span-ancestor-ids.test.js => span-ancestor-ids.test.ts} (89%) rename packages/jaeger-ui-components/src/utils/test/{requestAnimationFrame.js => requestAnimationFrame.ts} (82%) diff --git a/packages/jaeger-ui-components/package.json b/packages/jaeger-ui-components/package.json index 63438c1c2a8..cce91d58fb6 100644 --- a/packages/jaeger-ui-components/package.json +++ b/packages/jaeger-ui-components/package.json @@ -21,6 +21,7 @@ "@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", diff --git a/packages/jaeger-ui-components/src/utils/color-generator.test.js b/packages/jaeger-ui-components/src/utils/color-generator.test.ts similarity index 95% rename from packages/jaeger-ui-components/src/utils/color-generator.test.js rename to packages/jaeger-ui-components/src/utils/color-generator.test.ts index 8da84c832bd..86aecb1476f 100644 --- a/packages/jaeger-ui-components/src/utils/color-generator.test.js +++ b/packages/jaeger-ui-components/src/utils/color-generator.test.ts @@ -18,16 +18,17 @@ import { colors } from '@grafana/ui'; import { getColorByKey, getFilteredColors, clear } from './color-generator'; const colorsToFilter = [...colors]; +let theme = createTheme(); it('gives the same color for the same key', () => { - clear(); + clear(theme); const colorOne = getColorByKey('serviceA', createTheme()); const colorTwo = getColorByKey('serviceA', createTheme()); expect(colorOne).toBe(colorTwo); }); it('gives different colors for each key', () => { - clear(); + clear(theme); const colorOne = getColorByKey('serviceA', createTheme()); const colorTwo = getColorByKey('serviceB', createTheme()); expect(colorOne).not.toBe(colorTwo); @@ -58,8 +59,7 @@ it('should not allow colors with a contrast ratio < 3 in dark mode', () => { }); it('should not allow a color that is the same as the previous color', () => { - clear(); - const theme = createTheme(); + clear(theme); const colorOne = getColorByKey('random4', theme); // #447EBC const colorTwo = getColorByKey('random17', theme); // #447EBC expect(colorOne).not.toBe(colorTwo); @@ -68,8 +68,8 @@ it('should not allow a color that is the same as the previous color', () => { }); it('should not allow a color that looks similar to the previous color', () => { - clear(); - const theme = createTheme({ colors: { mode: 'light' } }); + theme = createTheme({ colors: { mode: 'light' } }); + clear(theme); const colorOne = getColorByKey('random9', theme); // #58140C const colorTwo = getColorByKey('random18', theme); // #511749 expect(colorOne).toBe('#58140C'); diff --git a/packages/jaeger-ui-components/src/utils/date.test.js b/packages/jaeger-ui-components/src/utils/date.test.ts similarity index 98% rename from packages/jaeger-ui-components/src/utils/date.test.js rename to packages/jaeger-ui-components/src/utils/date.test.ts index 64e54bb240f..2be14600ebc 100644 --- a/packages/jaeger-ui-components/src/utils/date.test.js +++ b/packages/jaeger-ui-components/src/utils/date.test.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { formatDuration, ONE_MILLISECOND, ONE_SECOND, ONE_MINUTE, ONE_HOUR, ONE_DAY } from './date.tsx'; +import { formatDuration, ONE_MILLISECOND, ONE_SECOND, ONE_MINUTE, ONE_HOUR, ONE_DAY } from './date'; describe('formatDuration', () => { it('keeps microseconds the same', () => { diff --git a/packages/jaeger-ui-components/src/utils/filter-spans.test.js b/packages/jaeger-ui-components/src/utils/filter-spans.test.ts similarity index 96% rename from packages/jaeger-ui-components/src/utils/filter-spans.test.js rename to packages/jaeger-ui-components/src/utils/filter-spans.test.ts index 01947f940e5..48f704e4cc4 100644 --- a/packages/jaeger-ui-components/src/utils/filter-spans.test.js +++ b/packages/jaeger-ui-components/src/utils/filter-spans.test.ts @@ -12,6 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. +import { TraceSpan } from 'src/types/trace'; + import filterSpans from './filter-spans'; describe('filterSpans', () => { @@ -57,7 +59,7 @@ describe('filterSpans', () => { ], }, ], - }; + } as TraceSpan; // span2 contains strings that end in 1 or 2, for overlap with span0 // KVs in span2 have different numbers for key and value to facilitate excludesKey testing const spanID2 = 'span-id-2'; @@ -102,7 +104,7 @@ describe('filterSpans', () => { }, ], }; - const spans = [span0, span2]; + const spans = [span0, span2] as TraceSpan[]; it('should return `undefined` if spans is falsy', () => { expect(filterSpans('operationName', null)).toBe(undefined); @@ -184,6 +186,6 @@ describe('filterSpans', () => { it('should return no spans when logs is null', () => { const nullSpan = { ...span0, logs: null }; - expect(filterSpans('logFieldKey1', [nullSpan])).toEqual(new Set([])); + expect(filterSpans('logFieldKey1', [nullSpan] as unknown as TraceSpan[])).toEqual(new Set([])); }); }); diff --git a/packages/jaeger-ui-components/src/utils/sort.test.js b/packages/jaeger-ui-components/src/utils/sort.test.ts similarity index 100% rename from packages/jaeger-ui-components/src/utils/sort.test.js rename to packages/jaeger-ui-components/src/utils/sort.test.ts diff --git a/packages/jaeger-ui-components/src/utils/sort.js b/packages/jaeger-ui-components/src/utils/sort.ts similarity index 67% rename from packages/jaeger-ui-components/src/utils/sort.js rename to packages/jaeger-ui-components/src/utils/sort.ts index b75b23b1492..5d3c85872cc 100644 --- a/packages/jaeger-ui-components/src/utils/sort.js +++ b/packages/jaeger-ui-components/src/utils/sort.ts @@ -12,19 +12,24 @@ // See the License for the specific language governing permissions and // limitations under the License. -export function localeStringComparator(itemA, itemB) { +import sinon from 'sinon'; + +export function localeStringComparator(itemA: string, itemB: string) { return itemA.localeCompare(itemB); } -export function numberSortComparator(itemA, itemB) { +export function numberSortComparator(itemA: number, itemB: number) { return itemA - itemB; } -export function classNameForSortDir(dir) { +export function classNameForSortDir(dir: number) { return `sorted ${dir === 1 ? 'ascending' : 'descending'}`; } -export function getNewSortForClick(prevSort, column) { +export function getNewSortForClick( + prevSort: { key: string; dir: number }, + column: { name: string; defaultDir?: number } +) { const { defaultDir = 1 } = column; return { @@ -33,7 +38,12 @@ export function getNewSortForClick(prevSort, column) { }; } -export function createSortClickHandler(column, currentSortKey, currentSortDir, updateSort) { +export function createSortClickHandler( + column: { name: string }, + currentSortKey: string, + currentSortDir: number, + updateSort: sinon.SinonSpy +) { return function onClickSortingElement() { const { key, dir } = getNewSortForClick({ key: currentSortKey, dir: currentSortDir }, column); updateSort(key, dir); diff --git a/packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.js b/packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.ts similarity index 89% rename from packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.js rename to packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.ts index 0714d141b06..76d6fc3d7b5 100644 --- a/packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.js +++ b/packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.ts @@ -12,6 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. +import { TraceSpan } from 'src/types/trace'; + import spanAncestorIdsSpy from './span-ancestor-ids'; describe('spanAncestorIdsSpy', () => { @@ -79,11 +81,11 @@ describe('spanAncestorIdsSpy', () => { references: [], }; - expect(spanAncestorIdsSpy(spanWithoutReferences)).toEqual([]); + expect(spanAncestorIdsSpy(spanWithoutReferences as unknown as TraceSpan)).toEqual([]); }); it('returns all unique spanIDs from first valid CHILD_OF or FOLLOWS_FROM reference up to the root span', () => { - expect(spanAncestorIdsSpy(span)).toEqual(expectedAncestorIds); + expect(spanAncestorIdsSpy(span as TraceSpan)).toEqual(expectedAncestorIds); }); it('ignores references without a span', () => { @@ -91,6 +93,6 @@ describe('spanAncestorIdsSpy', () => { ...span, references: [{ refType: 'CHILD_OF' }, { refType: 'FOLLOWS_FROM', span: {} }, ...span.references], }; - expect(spanAncestorIdsSpy(spanWithSomeEmptyReferences)).toEqual(expectedAncestorIds); + expect(spanAncestorIdsSpy(spanWithSomeEmptyReferences as TraceSpan)).toEqual(expectedAncestorIds); }); }); diff --git a/packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.js b/packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.ts similarity index 82% rename from packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.js rename to packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.ts index 8286e7aa1e1..376c68ea530 100644 --- a/packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.js +++ b/packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.ts @@ -14,15 +14,15 @@ const DEFAULT_ELAPSE = 0; -export default function requestAnimationFrame(callback) { +export default function requestAnimationFrame(callback: FrameRequestCallback) { return setTimeout(callback, DEFAULT_ELAPSE); } -export function cancelAnimationFrame(id) { +export function cancelAnimationFrame(id: string | number | NodeJS.Timeout | undefined) { return clearTimeout(id); } -export function polyfill(target, msElapse = DEFAULT_ELAPSE) { +export function polyfill(target: Window & typeof globalThis, msElapse = DEFAULT_ELAPSE) { const _target = target || global; if (!_target.requestAnimationFrame) { if (msElapse === DEFAULT_ELAPSE) { diff --git a/yarn.lock b/yarn.lock index 805789be51a..d497e92a1fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5337,6 +5337,7 @@ __metadata: "@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 @@ -12042,7 +12043,7 @@ __metadata: languageName: node linkType: hard -"@types/sinon@npm:10.0.13": +"@types/sinon@npm:10.0.13, @types/sinon@npm:^10.0.13": version: 10.0.13 resolution: "@types/sinon@npm:10.0.13" dependencies: