Skip to content

Commit 495fb6c

Browse files
committed
Add kind column and change table positioning
1 parent bb9e841 commit 495fb6c

File tree

1 file changed

+87
-68
lines changed

1 file changed

+87
-68
lines changed

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

Lines changed: 87 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,25 @@ const props = defineProps<{
1313
b: ArtifactDescription;
1414
}>();
1515
16-
// Sort binaries first, libraries later. Then within each category, sort in descending order by size
17-
// of the original (a) artifact component.
18-
const components = Object.entries(props.a.component_sizes)
19-
.sort((a, b) => {
20-
const aLib = a[0].startsWith("lib");
21-
const bLib = b[0].startsWith("lib");
22-
if (aLib && !bLib) {
23-
return 1;
24-
} else if (!aLib && bLib) {
25-
return -1;
26-
} else {
27-
return b[1] - a[1];
28-
}
29-
})
30-
.map((item) => item[0]);
16+
// Sort binaries first, libraries later. Then within each category, sort alphabetically.
17+
const components = Object.keys(props.a.component_sizes).sort((a, b) => {
18+
const aLib = a.startsWith("lib");
19+
const bLib = b.startsWith("lib");
20+
if (aLib && !bLib) {
21+
return 1;
22+
} else if (!aLib && bLib) {
23+
return -1;
24+
} else {
25+
return a.localeCompare(b);
26+
}
27+
});
28+
29+
function isLibrary(component: string): boolean {
30+
return component.startsWith("lib");
31+
}
3132
3233
function formatName(component: string): string {
33-
if (component.startsWith("lib")) {
34+
if (isLibrary(component)) {
3435
return `${component}.so`;
3536
}
3637
return component;
@@ -85,69 +86,84 @@ function generateTitle(component: string): string {
8586

8687
<template>
8788
<div class="category-title">Artifact component sizes</div>
88-
<table>
89-
<thead>
90-
<tr>
91-
<th>Component</th>
92-
<th>Before</th>
93-
<th>After</th>
94-
<th>Change</th>
95-
<th>% Change</th>
96-
</tr>
97-
</thead>
98-
<tbody>
99-
<tr v-for="component in components">
100-
<td class="component" :title="generateTitle(component)">
101-
{{ formatName(component) }}
102-
<Tooltip>{{ generateTitle(component) }}</Tooltip>
103-
</td>
104-
<td>
105-
<div class="aligned">
106-
{{ formatValue(a.component_sizes[component]) }}
107-
</div>
108-
</td>
109-
<td>
110-
<div class="aligned">
111-
{{ formatValue(b.component_sizes[component]) }}
112-
</div>
113-
</td>
114-
<td
115-
:class="
116-
getClass(a.component_sizes[component], b.component_sizes[component])
117-
"
118-
>
119-
<div class="aligned">
120-
{{
121-
formatChange(
89+
<div class="wrapper">
90+
<table>
91+
<thead>
92+
<tr>
93+
<th>Component</th>
94+
<th>Kind</th>
95+
<th class="aligned-header">Before</th>
96+
<th class="aligned-header">After</th>
97+
<th class="aligned-header">Change</th>
98+
<th class="aligned-header">% Change</th>
99+
</tr>
100+
</thead>
101+
<tbody>
102+
<tr v-for="component in components">
103+
<td class="component">
104+
{{ formatName(component) }}
105+
<Tooltip>{{ generateTitle(component) }}</Tooltip>
106+
</td>
107+
<td>
108+
{{ isLibrary(component) ? "Library" : "Binary" }}
109+
</td>
110+
<td>
111+
<div class="aligned">
112+
{{ formatValue(a.component_sizes[component]) }}
113+
</div>
114+
</td>
115+
<td>
116+
<div class="aligned">
117+
{{ formatValue(b.component_sizes[component]) }}
118+
</div>
119+
</td>
120+
<td
121+
:class="
122+
getClass(
122123
a.component_sizes[component],
123124
b.component_sizes[component]
124125
)
125-
}}
126-
</div>
127-
</td>
128-
<td
129-
:class="
130-
getClass(a.component_sizes[component], b.component_sizes[component])
131-
"
132-
>
133-
<div class="aligned">
134-
{{
135-
formatPercentChange(
126+
"
127+
>
128+
<div class="aligned">
129+
{{
130+
formatChange(
131+
a.component_sizes[component],
132+
b.component_sizes[component]
133+
)
134+
}}
135+
</div>
136+
</td>
137+
<td
138+
:class="
139+
getClass(
136140
a.component_sizes[component],
137141
b.component_sizes[component]
138142
)
139-
}}
140-
</div>
141-
</td>
142-
</tr>
143-
</tbody>
144-
</table>
143+
"
144+
>
145+
<div class="aligned">
146+
{{
147+
formatPercentChange(
148+
a.component_sizes[component],
149+
b.component_sizes[component]
150+
)
151+
}}
152+
</div>
153+
</td>
154+
</tr>
155+
</tbody>
156+
</table>
157+
</div>
145158
</template>
146159

147160
<style scoped lang="scss">
161+
.wrapper {
162+
display: flex;
163+
justify-content: center;
164+
}
148165
table {
149166
table-layout: fixed;
150-
width: 100%;
151167
margin-top: 10px;
152168
153169
td,
@@ -167,5 +183,8 @@ table {
167183
width: 120px;
168184
}
169185
}
186+
.aligned-header {
187+
text-align: right;
188+
}
170189
}
171190
</style>

0 commit comments

Comments
 (0)