Skip to content

Commit

Permalink
Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
TejasQ committed Nov 16, 2023
1 parent adb6c9b commit 2f24a8f
Show file tree
Hide file tree
Showing 20 changed files with 1,399 additions and 207 deletions.
14 changes: 7 additions & 7 deletions web-client/src/lib/formatters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export function timestampToDate(ts: Timestamp): Date {
}

export function convertTimestampToNanoseconds(timestamp: Timestamp): number {
return (Number(timestamp.seconds) * 1e9) + (timestamp.nanos);
return Number(timestamp.seconds) * 1e9 + timestamp.nanos;
}

export function formatMs(ms: string) {
Expand All @@ -29,10 +29,10 @@ export function formatTimestamp(stamp: Date) {
}

export function getTime(date: Date) {
return Intl.DateTimeFormat('en-US', {
hour: '2-digit',
minute: '2-digit',
return Intl.DateTimeFormat("en-US", {
hour: "2-digit",
minute: "2-digit",
hour12: false,
second: '2-digit'
}).format(date,)
}
second: "2-digit",
}).format(date);
}
16 changes: 11 additions & 5 deletions web-client/src/lib/sources/code-highlight.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ type HighlighterCodeParamsForSources = Readonly<

type HighlighterCodeParamsForSpans = Readonly<{
lang: HighlighterLang;
}>
}>;

export const SUPPORTED_LANGS = [
"js",
Expand Down Expand Up @@ -39,9 +39,15 @@ export function bytesToHtml(
return highlighter.codeToHtml(text, { lang });
}

export async function getHighlightedCode(sourcesArg: HighlighterCodeParamsForSources): Promise<string | undefined>;
export async function getHighlightedCode(spansArg: HighlighterCodeParamsForSpans): Promise<(code: string) => string>
export async function getHighlightedCode(arg: HighlighterCodeParamsForSources | HighlighterCodeParamsForSpans) {
export async function getHighlightedCode(
sourcesArg: HighlighterCodeParamsForSources
): Promise<string | undefined>;
export async function getHighlightedCode(
spansArg: HighlighterCodeParamsForSpans
): Promise<(code: string) => string>;
export async function getHighlightedCode(
arg: HighlighterCodeParamsForSources | HighlighterCodeParamsForSpans
) {
setCDN("/shiki/");
const responseWasm = await fetch("/shiki/onig.wasm");
setWasm(responseWasm);
Expand All @@ -54,7 +60,7 @@ export async function getHighlightedCode(arg: HighlighterCodeParamsForSources |

if ("lang" in arg) {
const { lang } = arg;
return (code: string) => highlighter.codeToHtml(code, { lang })
return (code: string) => highlighter.codeToHtml(code, { lang });
}

const [sourcesClient, path, size, lang] = arg;
Expand Down
24 changes: 15 additions & 9 deletions web-client/src/lib/span/a.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,20 @@ import { Span } from "../connection/monitor";
import { Metadata } from "../proto/common";
import { flattenChildren } from "./flattenChildren";

type Options = { span: Span, metadata: Map<bigint, Metadata> }
type Options = { span: Span; metadata: Map<bigint, Metadata> };

export function recursivelyFindSpanByName({ span, metadata }: Options, name: string): Span[] | null {
const meta = metadata.get(span.metadataId)!;
if (meta.name === name) {
return [span];
}
export function recursivelyFindSpanByName(
{ span, metadata }: Options,
name: string
): Span[] | null {
const meta = metadata.get(span.metadataId)!;
if (meta.name === name) {
return [span];
}

const allChildren = flattenChildren(span.children);
return allChildren?.filter(c => metadata.get(c.metadataId)!.name === name) ?? null;
}
const allChildren = flattenChildren(span.children);
return (
allChildren?.filter((c) => metadata.get(c.metadataId)!.name === name) ??
null
);
}
24 changes: 12 additions & 12 deletions web-client/src/lib/span/flattenChildren.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { Span } from "../connection/monitor";

export function flattenChildren(objects: Span[]): Span[] {
let result: Span[] = [];
let result: Span[] = [];

objects.forEach(obj => {
const children = obj.children ?? [];
const currentObj = { ...obj }
currentObj.children = [];
result.push(currentObj);
objects.forEach((obj) => {
const children = obj.children ?? [];
const currentObj = { ...obj };
currentObj.children = [];
result.push(currentObj);

if (children) {
result = result.concat(flattenChildren(children));
}
});
if (children) {
result = result.concat(flattenChildren(children));
}
});

return result;
}
return result;
}
39 changes: 22 additions & 17 deletions web-client/src/lib/span/formatSpansForUi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,28 @@ import { getIpcRequestName } from "./getIpcRequestName";
import { normalizeSpans } from "./normalizeSpans";

type Options = {
spans: Span[]
metadata: Map<bigint, Metadata>
}
spans: Span[];
metadata: Map<bigint, Metadata>;
};

export function formatSpansForUi({ spans, metadata }: Options): any {
const result = normalizeSpans(spans).map(span => {
return ({
id: String(span.id),
name: getIpcRequestName({ metadata, span }) || '-',
initiated: span.createdAt / 1000000,
time: span.closedAt ? (span.closedAt - span.createdAt) / 1e6 : 0,
waterfall: `width:${span.width}%;margin-left:${span.marginLeft}%;`,
start: span.marginLeft,
slices: span.slices.map(slice => `width:${slice.width}%;margin-left:${slice.marginLeft}%;`),
children: formatSpansForUi({ spans: flattenChildren(span.children), metadata })
})
})
const result = normalizeSpans(spans).map((span) => {
return {
id: String(span.id),
name: getIpcRequestName({ metadata, span }) || "-",
initiated: span.createdAt / 1000000,
time: span.closedAt > 0 ? (span.closedAt - span.createdAt) / 1e6 : 0,
waterfall: `width:${span.width}%;margin-left:${span.marginLeft}%;`,
start: span.marginLeft,
slices: span.slices.map(
(slice) => `width:${slice.width}%;margin-left:${slice.marginLeft}%;`
),
children: formatSpansForUi({
spans: flattenChildren(span.children),
metadata,
}),
};
});

return result;
}
return result;
}
23 changes: 15 additions & 8 deletions web-client/src/lib/span/getColumnDirection.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
import type { SortDirection, SortableColumn, ColumnSort } from "~/views/dashboard/span-waterfall";
import type {
SortDirection,
SortableColumn,
ColumnSort,
} from "~/views/dashboard/span-waterfall";

export function getColumnDirection(columnSort: ColumnSort, name: SortableColumn): SortDirection {
if (columnSort.name === name) {
if (columnSort.direction === "asc") return "desc"
return "asc"
}
export function getColumnDirection(
columnSort: ColumnSort,
name: SortableColumn
): SortDirection {
if (columnSort.name === name) {
if (columnSort.direction === "asc") return "desc";
return "asc";
}

return "asc"
}
return "asc";
}
37 changes: 19 additions & 18 deletions web-client/src/lib/span/getIpcRequestName.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,25 @@ import { Metadata } from "../proto/common";
import { recursivelyFindSpanByName } from "./recursivelyFindSpanByName";

type Options = {
metadata: Map<bigint, Metadata>
span: Span
}
metadata: Map<bigint, Metadata>;
span: Span;
};

export function getIpcRequestName({ metadata, span }: Options) {
const meta = metadata.get(span.metadataId);
if (meta?.name === "wry::ipc::handle") {
const commandHandlerSpan = recursivelyFindSpanByName(
{ span, metadata },
"ipc::request::handle"
)?.[0] ?? null;
if (commandHandlerSpan) {
const val = commandHandlerSpan.fields.find(
(f) => f.name === "cmd"
)?.value;
// this is actually always strVal unless the Tauri tracing implementation messes it up
return val?.oneofKind === "strVal" ? val.strVal : null;
}
const meta = metadata.get(span.metadataId);
if (meta?.name === "wry::ipc::handle") {
const commandHandlerSpan =
recursivelyFindSpanByName(
{ span, metadata },
"ipc::request::handle"
)?.[0] ?? null;
if (commandHandlerSpan) {
const val = commandHandlerSpan.fields.find(
(f) => f.name === "cmd"
)?.value;
// this is actually always strVal unless the Tauri tracing implementation messes it up
return val?.oneofKind === "strVal" ? val.strVal : null;
}
return meta?.name ?? null;
};
}
return meta?.name ?? null;
}
70 changes: 39 additions & 31 deletions web-client/src/lib/span/getIpcRequestValue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,49 @@ import { Field, Metadata } from "../proto/common";
import { recursivelyFindSpanByName as recursivelyFindSpansByName } from "./recursivelyFindSpanByName";

type SpanName =
/* tracks the whole duration of a req. fields: id = invoke ID and kind = "postmessage" */
| "ipc::request"
/* = the time it takes to deserialize the arguments. fields: id = invoke ID and args = string repo of the unparsed data */
| "ipc::request::deserialize_arg"
/* this gets emitted when we have found the right handler and are processing the request. fields: id= Invoke ID, cmd = the command name, kind the kind of command, loc.line the source code line of the handler, loc.col the source code column of the handler, is_internal = whether the command is internal to tauri or user defined */
| "ipc::request::handler"
/* this tracks the duration of the user written code that handles the request */
| "ipc::request::run"
/* tracks how much time it took to respond to the request (from the rust side) */
| "ipc::request::respond"
/* shows the actual response */
| "ipc::request::response"
/* tracks the whole duration of a req. fields: id = invoke ID and kind = "postmessage" */
| "ipc::request"
/* = the time it takes to deserialize the arguments. fields: id = invoke ID and args = string repo of the unparsed data */
| "ipc::request::deserialize_arg"
/* this gets emitted when we have found the right handler and are processing the request. fields: id= Invoke ID, cmd = the command name, kind the kind of command, loc.line the source code line of the handler, loc.col the source code column of the handler, is_internal = whether the command is internal to tauri or user defined */
| "ipc::request::handler"
/* this tracks the duration of the user written code that handles the request */
| "ipc::request::run"
/* tracks how much time it took to respond to the request (from the rust side) */
| "ipc::request::respond"
/* shows the actual response */
| "ipc::request::response";

type Options = {
metadata: Map<bigint, Metadata>
rootSpan: Span,
}
metadata: Map<bigint, Metadata>;
rootSpan: Span;
};

export function getIpcRequestValues({ metadata, rootSpan }: Options) {
return function (name: SpanName) {
const spans = recursivelyFindSpansByName(
{ span: rootSpan, metadata },
name
);
return function (name: SpanName) {
const spans = recursivelyFindSpansByName(
{ span: rootSpan, metadata },
name
);

if (!spans) {
return null;
}
if (!spans) {
return null;
}

const result = {
spans,
fields: spans.map(span => (span?.fields?.reduce((acc, field) => ({ ...acc, [field.name]: field.value }), {}) ?? {}) as Record<string, Field['value']>),
metadata: spans.map(span => metadata.get(span?.metadataId ?? BigInt(0)))
}
const result = {
spans,
fields: spans.map(
(span) =>
(span?.fields?.reduce(
(acc, field) => ({ ...acc, [field.name]: field.value }),
{}
) ?? {}) as Record<string, Field["value"]>
),
metadata: spans.map((span) =>
metadata.get(span?.metadataId ?? BigInt(0))
),
};

return result;
}
};
return result;
};
}
55 changes: 31 additions & 24 deletions web-client/src/lib/span/normalizeSpans.ts
Original file line number Diff line number Diff line change
@@ -1,37 +1,44 @@
import { Span } from "../connection/monitor";

function scaleNumbers(numbers: number[], min: number, max: number): number[] {
const range = max - min;
return numbers.map(num => ((num - min) / range) * 100).map(num => Math.max(0, Math.min(num, 100)));
const range = max - min;
return numbers
.map((num) => ((num - min) / range) * 100)
.map((num) => Math.max(0, Math.min(num, 100)));
}

function scaleToMax(numbers: number[], max: number): number[] {
return numbers.map(num => (num / max) * 100);
return numbers.map((num) => (num / max) * 100);
}

export function normalizeSpans(spans: Span[]) {
const start = Math.min(...spans.map(span => span.createdAt));
const end = Math.max(...spans.filter(s => s.closedAt > 0).map(span => span.closedAt));
const totalDuration = end - start;
const start = Math.min(...spans.map((span) => span.createdAt));
const end = Math.max(
...spans.filter((s) => s.closedAt > 0).map((span) => span.closedAt)
);
const totalDuration = end - start;

const result = spans.map(span => {
const allExits = span.exits.reduce((acc, e) => acc + e, 0);
const allEnters = span.enters.reduce((acc, e) => acc + e, 0);
const result = spans.map((span) => {
const allExits = span.exits.reduce((acc, e) => acc + e, 0);
const allEnters = span.enters.reduce((acc, e) => acc + e, 0);
return {
width: scaleToMax([span.duration], totalDuration)[0],
marginLeft: scaleNumbers([span.createdAt], start, end)[0],
slices: span.enters.map((enter, i) => {
const width = scaleToMax(
[span.exits[i] - enter],
allExits - allEnters
)[0];
const offset = scaleNumbers([enter], span.createdAt, span.closedAt)[0];
const marginLeft = offset - (offset * width) / 100;
return {
width: scaleToMax([span.duration], totalDuration)[0],
marginLeft: scaleNumbers([span.createdAt], start, end)[0],
slices: span.enters.map((enter, i) => {
const width = scaleToMax([span.exits[i] - enter], allExits - allEnters)[0];
const offset = scaleNumbers([enter], span.createdAt, span.closedAt)[0];
const marginLeft = offset - (offset * width / 100);
return {
width,
marginLeft
}
})
}
})
width,
marginLeft,
};
}),
};
});

const newSpans = spans.map((s, i) => ({ ...s, ...result[i] }))
return newSpans;
const newSpans = spans.map((s, i) => ({ ...s, ...result[i] }));
return newSpans;
}
Loading

0 comments on commit 2f24a8f

Please sign in to comment.