Fix artifact table display

The table was broken because nightly has recently stopped shipping `libtest.so`, and one piece of the code was accessing `undefined` artifact data. This commit makes component handling more robust.

Author: Kobzol

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

@@ -13,16 +13,37 @@ const props = defineProps<{
   b: ArtifactDescription;
 }>();
 
+interface ComponentSize {
+  name: string;
+  before: number | undefined;
+  after: number | undefined;
+}
+
+const allComponents: ComponentSize[] = [
+  ...new Set([
+    ...Object.keys(props.a.component_sizes),
+    ...Object.keys(props.b.component_sizes),
+  ]),
+].map((name) => {
+  const before = props.a.component_sizes[name];
+  const after = props.b.component_sizes[name];
+  return {
+    name,
+    before,
+    after,
+  };
+});
+
 // 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");
+const components = allComponents.sort((a, b) => {
+  const aLib = isLibrary(a.name);
+  const bLib = isLibrary(b.name);
   if (aLib && !bLib) {
     return 1;
   } else if (!aLib && bLib) {
     return -1;
   } else {
-    return a.localeCompare(b);
+    return a.name.localeCompare(b.name);
   }
 });
 
@@ -54,6 +75,13 @@ function formatChangeTitle(
   return (b - a).toLocaleString();
 }
 
+function formatTitle(value: number | undefined): string {
+  if (!isValidValue(value)) {
+    return "Missing value";
+  }
+  return value.toLocaleString();
+}
+
 function formatChange(a: number | undefined, b: number | undefined): string {
   if (!isValidValue(a) || !isValidValue(b)) {
     return "-";
@@ -111,68 +139,33 @@ function generateTitle(component: string): string {
       <tbody>
         <tr v-for="component in components">
           <td class="component">
-            {{ formatName(component) }}
-            <Tooltip>{{ generateTitle(component) }}</Tooltip>
+            {{ formatName(component.name) }}
+            <Tooltip>{{ generateTitle(component.name) }}</Tooltip>
           </td>
           <td>
-            {{ isLibrary(component) ? "Library" : "Binary" }}
+            {{ isLibrary(component.name) ? "Library" : "Binary" }}
           </td>
           <td>
-            <div
-              class="aligned"
-              :title="a.component_sizes[component].toLocaleString()"
-            >
-              {{ formatValue(a.component_sizes[component]) }}
+            <div class="aligned" :title="formatTitle(component.before)">
+              {{ formatValue(component.before) }}
             </div>
           </td>
           <td>
-            <div
-              class="aligned"
-              :title="b.component_sizes[component].toLocaleString()"
-            >
-              {{ formatValue(b.component_sizes[component]) }}
+            <div class="aligned" :title="formatTitle(component.after)">
+              {{ formatValue(component.after) }}
             </div>
           </td>
-          <td
-            :class="
-              getClass(
-                a.component_sizes[component],
-                b.component_sizes[component]
-              )
-            "
-          >
+          <td :class="getClass(component.before, component.after)">
             <div
               class="aligned"
-              :title="
-                formatChangeTitle(
-                  a.component_sizes[component],
-                  b.component_sizes[component]
-                )
-              "
+              :title="formatChangeTitle(component.before, component.after)"
             >
-              {{
-                formatChange(
-                  a.component_sizes[component],
-                  b.component_sizes[component]
-                )
-              }}
+              {{ formatChange(component.before, component.after) }}
             </div>
           </td>
-          <td
-            :class="
-              getClass(
-                a.component_sizes[component],
-                b.component_sizes[component]
-              )
-            "
-          >
+          <td :class="getClass(component.before, component.after)">
             <div class="aligned">
-              {{
-                formatPercentChange(
-                  a.component_sizes[component],
-                  b.component_sizes[component]
-                )
-              }}
+              {{ formatPercentChange(component.before, component.after) }}
             </div>
           </td>
         </tr>