Add runtime benchmarks tab

Author: Kobzol

site/frontend/src/pages/compare/page.vue

@@ -7,7 +7,7 @@ import {
   getUrlParams,
   navigateToUrlParams,
 } from "../../utils/navigation";
-import {Ref, ref} from "vue";
+import {computed, Ref, ref} from "vue";
 import {withLoading} from "../../utils/loading";
 import {postMsgpack} from "../../utils/requests";
 import {COMPARE_DATA_URL} from "../../urls";
@@ -39,12 +39,12 @@ function loadSelectorFromUrl(urlParams: Dict<string>): CompareSelector {
 
 function loadTabFromUrl(urlParams: Dict<string>): Tab | null {
   const tab = urlParams["tab"] ?? "";
-  if (tab == Tab.CompileTime) {
-    return Tab.CompileTime;
-  } else if (tab == Tab.Bootstrap) {
-    return Tab.Bootstrap;
-  }
-  return null;
+  const tabs = {
+    compile: Tab.CompileTime,
+    runtime: Tab.Runtime,
+    bootstrap: Tab.Bootstrap,
+  };
+  return tabs[tab] ?? null;
 }
 
 function storeTabToUrl(urlParams: Dict<string>, tab: Tab) {
@@ -56,24 +56,27 @@ async function loadCompareData(
   selector: CompareSelector,
   loading: Ref<boolean>
 ) {
-  data.value = await withLoading(loading, async () => {
+  const response = await withLoading(loading, async () => {
     const params = {
       start: selector.start,
       end: selector.end,
       stat: selector.stat,
     };
     return await postMsgpack<CompareResponse>(COMPARE_DATA_URL, params);
   });
+  data.value = response;
+
   compileSummary.value = computeSummary(
     filterNonRelevant(
       defaultCompileFilter,
       computeTestCasesWithNonRelevant(
         defaultCompileFilter,
-        data.value,
-        createCompileBenchmarkMap(data.value)
+        response,
+        createCompileBenchmarkMap(response)
       )
     )
   );
+  runtimeDataAvailable.value = response.runtime_comparisons.length > 0;
 }
 
 function updateSelection(params: SelectionParams) {
@@ -88,7 +91,7 @@ function updateSelection(params: SelectionParams) {
 
 const urlParams = getUrlParams();
 
-// Include all relevant changes in the compile-time tab summary
+// Include all relevant changes in the compile-time tab summary.
 // We do not wrap it in computed, because it should be loaded only once, after
 // the data is downloaded.
 const compileSummary: Ref<SummaryGroup | null> = ref(null);
@@ -100,6 +103,14 @@ const selector = loadSelectorFromUrl(urlParams);
 
 const initialTab: Tab = loadTabFromUrl(urlParams) ?? Tab.CompileTime;
 const tab: Ref<Tab> = ref(initialTab);
+const activeTab = computed((): Tab => {
+  if (tab.value === Tab.Runtime && !runtimeDataAvailable.value) {
+    return Tab.CompileTime;
+  }
+  return tab.value;
+});
+
+const runtimeDataAvailable = ref(false);
 
 function changeTab(newTab: Tab) {
   tab.value = newTab;
@@ -130,10 +141,13 @@ loadCompareData(selector, loading);
         :initial-tab="initialTab"
         :compile-time-summary="compileSummary"
       />
-      <template v-if="tab === Tab.CompileTime">
+      <template v-if="activeTab === Tab.CompileTime">
         <CompileBenchmarksPage :data="data" :selector="selector" />
       </template>
-      <BootstrapTable v-if="tab === Tab.Bootstrap" :data="data" />
+      <BootstrapTable v-if="activeTab === Tab.Bootstrap" :data="data" />
+      <template v-if="runtimeDataAvailable && activeTab === Tab.Runtime">
+        Runtime data
+      </template>
     </div>
   </div>
   <br />

site/frontend/src/pages/compare/tabs.vue

@@ -46,7 +46,7 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
   <div class="wrapper">
     <div
       class="tab"
-      title="Compilation time benchmarks"
+      title="Compilation time benchmarks: measure how long does it take to compile various crates using the compared rustc."
       :class="{selected: activeTab === Tab.CompileTime}"
       @click="changeTab(Tab.CompileTime)"
     >
@@ -80,7 +80,16 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
     </div>
     <div
       class="tab"
-      title="Bootstrap duration"
+      title="Runtime benchmarks: measure how long does it take to execute (i.e. how fast are) programs compiled by the compared rustc."
+      :class="{selected: activeTab === Tab.Runtime}"
+      @click="changeTab(Tab.Runtime)"
+    >
+      <div class="title">Runtime</div>
+      <div class="summary runtime"></div>
+    </div>
+    <div
+      class="tab"
+      title="Bootstrap duration: measures how long does it take to compile rustc by itself."
       :class="{selected: activeTab === Tab.Bootstrap}"
       @click="changeTab(Tab.Bootstrap)"
     >

site/frontend/src/pages/compare/types.ts

@@ -74,5 +74,6 @@ export interface CompareResponse {
 
 export enum Tab {
   CompileTime = "compile",
+  Runtime = "runtime",
   Bootstrap = "bootstrap",
 }

site/frontend/src/utils/requests.ts

@@ -28,7 +28,7 @@ export async function getJson<T>(
   return await response.json();
 }
 
-export async function postMsgpack(path: string, body: any) {
+export async function postMsgpack<T>(path: string, body: any): Promise<T> {
   const response = await fetch(path, {
     method: "POST",
     body: JSON.stringify(body),