Merge pull request #1658 from Kobzol/artifact-size-ui

Add artifact size UI to compare page

Author: Kobzol

database/src/pool.rs

@@ -91,6 +91,9 @@ pub trait Connection: Send + Sync {
     /// bytes.
     async fn record_artifact_size(&self, artifact: ArtifactIdNumber, component: &str, size: u64);
 
+    /// Returns the sizes of individual components of a single artifact.
+    async fn get_artifact_size(&self, aid: ArtifactIdNumber) -> HashMap<String, u64>;
+
     /// Returns vector of bootstrap build times for the given artifacts. The kth
     /// element is the minimum build time for the kth artifact in `aids`, across
     /// all collections for the artifact, or none if there is no bootstrap data

database/src/pool/postgres.rs

@@ -337,6 +337,7 @@ pub struct CachedStatements {
     insert_runtime_pstat: Statement,
     get_runtime_pstat: Statement,
     record_artifact_size: Statement,
+    get_artifact_size: Statement,
 }
 
 pub struct PostgresTransaction<'a> {
@@ -530,6 +531,10 @@ impl PostgresConnection {
                     do update
                     set size = excluded.size
                 ").await.unwrap(),
+                get_artifact_size: conn.prepare("
+                    select component, size from artifact_size
+                    where aid = $1
+                ").await.unwrap()
             }),
             conn,
         }
@@ -930,6 +935,18 @@ where
             .unwrap();
     }
 
+    async fn get_artifact_size(&self, aid: ArtifactIdNumber) -> HashMap<String, u64> {
+        let rows = self
+            .conn()
+            .query(&self.statements().get_artifact_size, &[&aid.0])
+            .await
+            .unwrap();
+
+        rows.into_iter()
+            .map(|row| (row.get::<_, String>(0), row.get::<_, u32>(1) as u64))
+            .collect()
+    }
+
     async fn artifact_id(&self, artifact: &ArtifactId) -> ArtifactIdNumber {
         let (name, date, ty) = match artifact {
             ArtifactId::Commit(commit) => (

database/src/pool/sqlite.rs

@@ -812,6 +812,18 @@ impl Connection for SqliteConnection {
             .unwrap();
     }
 
+    async fn get_artifact_size(&self, aid: ArtifactIdNumber) -> HashMap<String, u64> {
+        self.raw_ref()
+            .prepare("select component, size from artifact_size where aid = ?")
+            .unwrap()
+            .query_map(params![&aid.0], |row| {
+                Ok((row.get::<_, String>(0)?, row.get::<_, u64>(1)?))
+            })
+            .unwrap()
+            .map(|r| r.unwrap())
+            .collect()
+    }
+
     async fn get_bootstrap(&self, aids: &[ArtifactIdNumber]) -> Vec<Option<Duration>> {
         aids.iter()
             .map(|aid| {

site/frontend/src/pages/compare/artifact-size/artifact-size-table.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import {ArtifactDescription} from "../types";
+import {
+  diffClass,
+  formatPercentChange,
+  formatSize,
+  isValidValue,
+} from "../shared";
+import Tooltip from "../tooltip.vue";
+
+const props = defineProps<{
+  a: ArtifactDescription;
+  b: ArtifactDescription;
+}>();
+
+// Sort binaries first, libraries later. Then within each category, sort alphabetically.
+const components = Object.keys(props.a.component_sizes).sort((a, b) => {
+  const aLib = a.startsWith("lib");
+  const bLib = b.startsWith("lib");
+  if (aLib && !bLib) {
+    return 1;
+  } else if (!aLib && bLib) {
+    return -1;
+  } else {
+    return a.localeCompare(b);
+  }
+});
+
+function isLibrary(component: string): boolean {
+  return component.startsWith("lib");
+}
+
+function formatName(component: string): string {
+  if (isLibrary(component)) {
+    return `${component}.so`;
+  }
+  return component;
+}
+
+function formatValue(value: number | undefined): string {
+  if (!isValidValue(value)) {
+    return "-";
+  }
+  return formatSize(value);
+}
+
+function formatChangeTitle(
+  a: number | undefined,
+  b: number | undefined
+): string {
+  if (!isValidValue(a) || !isValidValue(b)) {
+    return "";
+  }
+  return (b - a).toLocaleString();
+}
+
+function formatChange(a: number | undefined, b: number | undefined): string {
+  if (!isValidValue(a) || !isValidValue(b)) {
+    return "-";
+  }
+  const diff = b - a;
+  const formatted = formatSize(Math.abs(diff));
+  if (diff < 0) {
+    return `-${formatted}`;
+  }
+  return formatted;
+}
+
+function getClass(a: number | undefined, b: number | undefined): string {
+  if (!isValidValue(a) || !isValidValue(b) || a == b) {
+    return "";
+  }
+  return diffClass(b - a);
+}
+
+function generateTitle(component: string): string {
+  if (component === "rustc") {
+    return `Executable of the Rust compiler. A small wrapper that links to librustc_driver.so, which provides most of the compiler logic.`;
+  } else if (component === "rustdoc") {
+    return `Executable of rustdoc. Links to librustc_driver.so, which provides most of the compiler logic.`;
+  } else if (component === "cargo") {
+    return "Executable of cargo.";
+  } else if (component === "librustc_driver") {
+    return `Shared library containing the core implementation of the compiler. It is used by several other tools and binaries.`;
+  } else if (component === "libLLVM") {
+    return `Shared library of the LLVM codegen backend. It is used by librustc_driver.so.`;
+  } else if (component === "libstd") {
+    return `Shared library containing the Rust standard library. It is used by librustc_driver.so.`;
+  } else if (component === "libtest") {
+    return `Shared library containing the Rust test harness.`;
+  } else {
+    return ""; // Unknown component
+  }
+}
+</script>
+
+<template>
+  <div class="category-title">Artifact component sizes</div>
+  <div class="wrapper">
+    <table>
+      <thead>
+        <tr>
+          <th>Component</th>
+          <th>Kind</th>
+          <th class="aligned-header">Before</th>
+          <th class="aligned-header">After</th>
+          <th class="aligned-header">Change</th>
+          <th class="aligned-header">% Change</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="component in components">
+          <td class="component">
+            {{ formatName(component) }}
+            <Tooltip>{{ generateTitle(component) }}</Tooltip>
+          </td>
+          <td>
+            {{ isLibrary(component) ? "Library" : "Binary" }}
+          </td>
+          <td>
+            <div
+              class="aligned"
+              :title="a.component_sizes[component].toLocaleString()"
+            >
+              {{ formatValue(a.component_sizes[component]) }}
+            </div>
+          </td>
+          <td>
+            <div
+              class="aligned"
+              :title="b.component_sizes[component].toLocaleString()"
+            >
+              {{ formatValue(b.component_sizes[component]) }}
+            </div>
+          </td>
+          <td
+            :class="
+              getClass(
+                a.component_sizes[component],
+                b.component_sizes[component]
+              )
+            "
+          >
+            <div
+              class="aligned"
+              :title="
+                formatChangeTitle(
+                  a.component_sizes[component],
+                  b.component_sizes[component]
+                )
+              "
+            >
+              {{
+                formatChange(
+                  a.component_sizes[component],
+                  b.component_sizes[component]
+                )
+              }}
+            </div>
+          </td>
+          <td
+            :class="
+              getClass(
+                a.component_sizes[component],
+                b.component_sizes[component]
+              )
+            "
+          >
+            <div class="aligned">
+              {{
+                formatPercentChange(
+                  a.component_sizes[component],
+                  b.component_sizes[component]
+                )
+              }}
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  display: flex;
+  justify-content: center;
+}
+table {
+  table-layout: fixed;
+  margin-top: 10px;
+
+  td,
+  th {
+    text-align: center;
+    padding: 0.3em;
+  }
+
+  .component {
+    word-break: break-word;
+  }
+
+  .aligned {
+    text-align: right;
+
+    @media (min-width: 600px) {
+      width: 120px;
+    }
+  }
+  .aligned-header {
+    text-align: right;
+  }
+}
+</style>

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

@@ -28,6 +28,7 @@ import {
   computeRuntimeComparisonsWithNonRelevant,
   defaultRuntimeFilter,
 } from "./runtime/common";
+import ArtifactSizeTable from "./artifact-size/artifact-size-table.vue";
 
 function loadSelectorFromUrl(urlParams: Dict<string>): CompareSelector {
   const start = urlParams["start"] ?? "";
@@ -46,6 +47,7 @@ function loadTabFromUrl(urlParams: Dict<string>): Tab | null {
     compile: Tab.CompileTime,
     runtime: Tab.Runtime,
     bootstrap: Tab.Bootstrap,
+    ["artifact-size"]: Tab.ArtifactSize,
   };
   return tabs[tab] ?? null;
 }
@@ -121,10 +123,19 @@ const activeTab = computed((): Tab => {
   if (tab.value === Tab.Runtime && !runtimeDataAvailable.value) {
     return Tab.CompileTime;
   }
+  if (tab.value === Tab.ArtifactSize && !artifactSizeAvailable.value) {
+    return Tab.CompileTime;
+  }
   return tab.value;
 });
 
 const runtimeDataAvailable = computed(() => runtimeSummary.value !== null);
+const artifactSizeAvailable = computed(
+  () =>
+    data.value != null &&
+    (Object.keys(data.value.a.component_sizes).length > 0 ||
+      Object.keys(data.value.b.component_sizes).length > 0)
+);
 
 function changeTab(newTab: Tab) {
   tab.value = newTab;
@@ -163,14 +174,17 @@ loadCompareData(selector, loading);
           :benchmark-info="info"
         />
       </template>
-      <BootstrapTable v-if="activeTab === Tab.Bootstrap" :data="data" />
       <template v-if="runtimeDataAvailable && activeTab === Tab.Runtime">
         <RuntimeBenchmarksPage
           :data="data"
           :selector="selector"
           :benchmark-info="info"
         />
       </template>
+      <BootstrapTable v-if="activeTab === Tab.Bootstrap" :data="data" />
+      <template v-if="artifactSizeAvailable && activeTab === Tab.ArtifactSize">
+        <ArtifactSizeTable :a="data.a" :b="data.b" />
+      </template>
     </div>
   </div>
   <br />

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

@@ -7,6 +7,7 @@ export function formatDate(dateString: string): string {
     date.getUTCDate()
   )} `;
 }
+
 export function signIfPositive(pct: number): string {
   if (pct >= 0) {
     return "+";
@@ -34,3 +35,35 @@ export function diffClass(diff: number): string {
   }
   return "negative";
 }
+
+const KiB = 1024;
+const MiB = KiB * 1024;
+const GiB = MiB * 1024;
+
+export function formatSize(size: number): string {
+  if (size >= GiB) {
+    return `${(size / GiB).toFixed(2)} GiB`;
+  } else if (size >= MiB) {
+    return `${(size / MiB).toFixed(2)} MiB`;
+  } else if (size >= KiB) {
+    return `${(size / KiB).toFixed(2)} KiB`;
+  }
+  return `${size} B`;
+}
+
+// Formats a percentual change between two values
+export function formatPercentChange(
+  before: number | undefined,
+  after: number | undefined,
+  invalidPlaceholder: string = "-"
+): string {
+  if (!isValidValue(before) || !isValidValue(after)) {
+    return invalidPlaceholder;
+  }
+  return `${(((after - before) / before) * 100).toFixed(3)}%`;
+}
+
+// Checks if the value is not undefined and not zero
+export function isValidValue(size: number | undefined): boolean {
+  return size !== undefined && size !== 0;
+}