Skip to content

Commit 6dd9447

Browse files
KobzolKobzol
committed
Handle review remarks
1 parent ac3d9d9 commit 6dd9447

File tree

4 files changed

+141
-123
lines changed

4 files changed

+141
-123
lines changed

‎site/frontend/src/components/perfetto-link.vue

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
11
<script setup lang="ts">
22
import {computed} from "vue";
33
import {openTraceInPerfetto} from "../perfetto";
4-
import {croxTraceUrl} from "../self-profile";
4+
import {chromeProfileUrl} from "../self-profile";
55
import {CompileTestCase} from "../pages/compare/compile/common";
66
import {ArtifactDescription} from "../pages/compare/types";
77
88
const props = defineProps<{
9-
label: string;
109
artifact: ArtifactDescription;
1110
testCase: CompileTestCase;
1211
}>();
1312
1413
const link = computed(() => {
15-
return croxTraceUrl(
14+
return chromeProfileUrl(
1615
props.artifact.commit,
1716
`${props.testCase.benchmark}-${props.testCase.profile.toLowerCase()}`,
1817
props.testCase.scenario
1918
);
2019
});
20+
21+
// This title will appear as the trace name in Perfetto
2122
const traceTitle = computed(() => {
2223
return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.artifact.commit})`;
2324
});
2425
</script>
2526

2627
<template>
27-
<a @click="openTraceInPerfetto(link, traceTitle)">{{ props.label }}</a>
28+
<a
29+
@click="openTraceInPerfetto(link, traceTitle)"
30+
title="Open the self-profile query trace in Perfetto. You have to wait a bit for the profile to be downloaded after clicking on the link."
31+
><slot></slot
32+
></a>
2833
</template>
2934

3035
<style scoped lang="scss">

‎site/frontend/src/pages/compare/compile/table/benchmark-detail.vue

Lines changed: 18 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ import {GraphData, GraphKind, GraphsSelector} from "../../../../graph/data";
1414
import uPlot from "uplot";
1515
import CachegrindCmd from "../../../../components/cachegrind-cmd.vue";
1616
import {COMPILE_DETAIL_RESOLVER} from "./detail-resolver";
17-
import {openTraceInPerfetto} from "../../../../perfetto";
18-
import {croxTraceUrl} from "../../../../self-profile";
1917
import PerfettoLink from "../../../../components/perfetto-link.vue";
2018
2119
const props = defineProps<{
@@ -266,27 +264,6 @@ function changeProfileCommand(event: Event) {
266264
profileCommand.value = target.value as ProfileCommand;
267265
}
268266
269-
const traceLinkBefore = computed(() => {
270-
return croxTraceUrl(
271-
props.artifact.commit,
272-
`${props.testCase.benchmark}-${props.testCase.profile.toLowerCase()}`,
273-
props.testCase.scenario
274-
);
275-
});
276-
const traceLinkAfter = computed(() => {
277-
return croxTraceUrl(
278-
props.baseArtifact.commit,
279-
`${props.testCase.benchmark}-${props.testCase.profile.toLowerCase()}`,
280-
props.testCase.scenario
281-
);
282-
});
283-
const traceLinkTitleBefore = computed(() => {
284-
return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.baseArtifact.commit})`;
285-
});
286-
const traceLinkTitleAfter = computed(() => {
287-
return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.artifact.commit})`;
288-
});
289-
290267
onMounted(() => renderGraphs());
291268
</script>
292269

@@ -351,36 +328,32 @@ onMounted(() => renderGraphs());
351328
</a>
352329
</li>
353330
<li>
354-
<a
355-
:href="graphLink(props.artifact, props.metric, props.testCase)"
356-
target="_blank"
357-
>
358-
History graph
359-
</a>
360-
</li>
361-
<li>
331+
Before:
362332
<a :href="detailedQueryLink(props.baseArtifact)" target="_blank">
363-
Self-profile (before)
364-
</a>
365-
</li>
366-
<li>
333+
self-profile</a
334+
>,
367335
<PerfettoLink
368336
:artifact="props.baseArtifact"
369-
label="Query trace (before)"
370337
:test-case="props.testCase"
371-
/>
338+
>query trace</PerfettoLink
339+
>
372340
</li>
373341
<li>
374-
<a :href="detailedQueryLink(props.artifact)" target="_blank">
375-
Self-profile (after)
376-
</a>
342+
After:
343+
<a :href="detailedQueryLink(props.artifact)" target="_blank"
344+
>self-profile</a
345+
>,
346+
<PerfettoLink :artifact="props.artifact" :test-case="props.testCase"
347+
>query trace</PerfettoLink
348+
>
377349
</li>
378350
<li>
379-
<PerfettoLink
380-
:artifact="props.artifact"
381-
label="Query trace (after)"
382-
:test-case="props.testCase"
383-
/>
351+
<a
352+
:href="graphLink(props.artifact, props.metric, props.testCase)"
353+
target="_blank"
354+
>
355+
History graph
356+
</a>
384357
</li>
385358
<li>
386359
<a :href="benchmarkLink(testCase.benchmark)" target="_blank">

‎site/frontend/src/pages/detailed-query.ts

Lines changed: 109 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import {createUrlWithAppendedParams, getUrlParams} from "../utils/navigation";
22
import {postMsgpack} from "../utils/requests";
33
import {SELF_PROFILE_DATA_URL} from "../urls";
4-
import {croxTraceUrl, processedSelfProfileUrl} from "../self-profile";
4+
import {
5+
chromeProfileUrl,
6+
processedSelfProfileRelativeUrl,
7+
} from "../self-profile";
58
import {openTraceInPerfetto} from "../perfetto";
69

710
function to_seconds(time) {
@@ -43,6 +46,106 @@ function fmt_delta(to, delta, is_integral_delta) {
4346
)} ≈ ${delta.toFixed(3)}">${text}</span>`;
4447
}
4548

49+
function raw_self_profile_link(
50+
commit: string,
51+
benchmark: string,
52+
scenario: string
53+
): string {
54+
const url = `/perf/download-raw-self-profile?commit=${commit}&benchmark=${benchmark}&scenario=${scenario}`;
55+
return `<a href="${url}">raw</a>`;
56+
}
57+
58+
function processed_link(
59+
commit: string,
60+
benchmark: string,
61+
scenario: string,
62+
type: string
63+
): string {
64+
const url = processedSelfProfileRelativeUrl(
65+
commit,
66+
benchmark,
67+
scenario,
68+
type
69+
);
70+
return `<a href="${url}">${type}</a>`;
71+
}
72+
73+
// FIXME: remove this hack and use the PerfettoLink component once this page is
74+
// converted to Vue.
75+
function perfetto_profiler_link(
76+
id: string,
77+
commit: string,
78+
benchmark: string,
79+
scenario: string
80+
): string {
81+
let link = chromeProfileUrl(commit, benchmark, scenario);
82+
let traceTitle = `${benchmark}-${scenario} (${commit})`;
83+
document.addEventListener("click", (event) => {
84+
if ((event.target as HTMLElement).id === id) {
85+
openTraceInPerfetto(link, traceTitle);
86+
}
87+
});
88+
return `<a href="#" id="${id}">Perfetto</a>`;
89+
}
90+
91+
function firefox_profiler_link(
92+
commit: string,
93+
benchmark: string,
94+
scenario: string
95+
): string {
96+
let crox_url = encodeURIComponent(
97+
chromeProfileUrl(commit, benchmark, scenario)
98+
);
99+
let ff_url = `https://profiler.firefox.com/from-url/${crox_url}/marker-chart/?v=5`;
100+
return `<a href="${ff_url}">Firefox profiler</a>`;
101+
}
102+
103+
function createDownloadLinks(
104+
state: Selector,
105+
commit: string,
106+
label: string
107+
): string {
108+
const raw = raw_self_profile_link(
109+
state.commit,
110+
state.benchmark,
111+
state.scenario
112+
);
113+
const flamegraph_link = processed_link(
114+
commit,
115+
state.benchmark,
116+
state.scenario,
117+
"flamegraph"
118+
);
119+
const crox_link = processed_link(
120+
commit,
121+
state.benchmark,
122+
state.scenario,
123+
"crox"
124+
);
125+
const codegen = processed_link(
126+
commit,
127+
state.benchmark,
128+
state.scenario,
129+
"codegen-schedule"
130+
);
131+
const perfetto = perfetto_profiler_link(
132+
`perfetto-${label}`,
133+
commit,
134+
state.benchmark,
135+
state.scenario
136+
);
137+
const firefox = firefox_profiler_link(
138+
state.base_commit,
139+
state.benchmark,
140+
state.scenario
141+
);
142+
143+
return `Download/view ${raw}, ${flamegraph_link}, ${crox_link}, ${codegen} (${perfetto}, ${firefox}) results for ${commit.substring(
144+
0,
145+
10
146+
)} (${label} commit)`;
147+
}
148+
46149
function populate_data(data, state: Selector) {
47150
let txt = `${state.commit.substring(0, 10)}: Self profile results for ${
48151
state.benchmark
@@ -57,79 +160,15 @@ function populate_data(data, state: Selector) {
57160
txt += `<br><a href="${self_href}">query info for just this commit</a>`;
58161
}
59162
document.querySelector("#title").innerHTML = txt;
60-
let dl_link = (commit, bench, run) => {
61-
let url = `/perf/download-raw-self-profile?commit=${commit}&benchmark=${bench}&scenario=${run}`;
62-
return `<a href="${url}">raw</a>`;
63-
};
64-
let processed_link = (commit, {benchmark, scenario}, ty) => {
65-
let url = processedSelfProfileUrl(commit, benchmark, scenario, ty);
66-
return `<a href="${url}">${ty}</a>`;
67-
};
68-
// FIXME: remove this hack and use the PerfettoLink component once this page is
69-
// converted to Vue.
70-
let perfetto_profiler_link = (id, commit, bench, run) => {
71-
let link = croxTraceUrl(commit, bench, run);
72-
let traceTitle = `${bench}-${run} (${commit})`;
73-
document.addEventListener("click", (event) => {
74-
if ((event.target as HTMLElement).id === id) {
75-
openTraceInPerfetto(link, traceTitle);
76-
}
77-
});
78-
return `<a href="#" id="${id}">Perfetto</a>`;
79-
};
80-
let firefox_profiler_link = (commit, bench, run) => {
81-
let crox_url = encodeURIComponent(croxTraceUrl(commit, bench, run));
82-
let ff_url = `https://profiler.firefox.com/from-url/${crox_url}/marker-chart/?v=5`;
83-
return `<a href="${ff_url}">Firefox profiler</a>`;
84-
};
163+
85164
txt = "";
86165
if (state.base_commit) {
87-
txt += `Download/view
88-
${dl_link(
89-
state.base_commit,
90-
state.benchmark,
91-
state.scenario
92-
)},
93-
${processed_link(state.base_commit, state, "flamegraph")},
94-
${processed_link(state.base_commit, state, "crox")},
95-
${processed_link(
96-
state.base_commit,
97-
state,
98-
"codegen-schedule"
99-
)}
100-
(${perfetto_profiler_link(
101-
"perfetto-before",
102-
state.base_commit,
103-
state.benchmark,
104-
state.scenario
105-
)}, ${firefox_profiler_link(
106-
state.base_commit,
107-
state.benchmark,
108-
state.scenario
109-
)})
110-
results for ${state.base_commit.substring(
111-
0,
112-
10
113-
)} (base commit)`;
166+
txt += createDownloadLinks(state, state.base_commit, "base");
114167
txt += "<br>";
115168
}
116-
txt += `Download/view
117-
${dl_link(state.commit, state.benchmark, state.scenario)},
118-
${processed_link(state.commit, state, "flamegraph")},
119-
${processed_link(state.commit, state, "crox")},
120-
${processed_link(state.commit, state, "codegen-schedule")}
121-
(${perfetto_profiler_link(
122-
"perfetto-after",
123-
state.commit,
124-
state.benchmark,
125-
state.scenario
126-
)}, ${firefox_profiler_link(
127-
state.commit,
128-
state.benchmark,
129-
state.scenario
130-
)})
131-
results for ${state.commit.substring(0, 10)} (new commit)`;
132-
// TODO: use the Cachegrind Vue components once this page is refactored to Vue
169+
txt += createDownloadLinks(state, state.commit, "new");
170+
171+
// FIXME: use the Cachegrind Vue components once this page is refactored to Vue
133172
let profile = (b) =>
134173
b.endsWith("-opt")
135174
? "Opt"

‎site/frontend/src/self-profile.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
// Returns the URL to a processed Crox format of a self-profile query.
2-
export function croxTraceUrl(
1+
// Returns the URL to a measureme self-profile data, processed into the
2+
// Chrome profiler format.
3+
export function chromeProfileUrl(
34
commit: string,
45
benchmarkAndProfile: string,
56
scenario: string
67
): string {
7-
const relativeUrl = processedSelfProfileUrl(
8+
const relativeUrl = processedSelfProfileRelativeUrl(
89
commit,
910
benchmarkAndProfile,
1011
scenario,
@@ -13,7 +14,7 @@ export function croxTraceUrl(
1314
return window.location.origin + relativeUrl;
1415
}
1516

16-
export function processedSelfProfileUrl(
17+
export function processedSelfProfileRelativeUrl(
1718
commit: string,
1819
benchmarkAndProfile: string,
1920
scenario: string,

0 commit comments

Comments
 (0)