Skip to content

Commit 2ad471b

Browse files
ferpasriferpasri
committed
Improve webstudio
1 parent 9e34a7d commit 2ad471b

4 files changed

Lines changed: 334 additions & 102 deletions

File tree

‎webstudio/frontend/src/TestResultsView.svelte‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,8 @@
9292
$: visibleResultFiles = filterResultFiles(selectedResultGroup?.files || [], fileFilterMode);
9393
$: resultSummary = summarizeResultGroup(selectedResultGroup);
9494
$: maxVerdictCount = Math.max(...resultSummary.verdictGroups.map((group) => group.count), 1);
95-
$: totalOutcomeCount = Math.max(resultSummary.okCount + resultSummary.failedVerdictCount, 1);
95+
$: totalVerdictOutcomeCount = resultSummary.okCount + resultSummary.failedVerdictCount;
96+
$: totalOutcomeCount = Math.max(totalVerdictOutcomeCount, 1);
9697
$: showingReport = selectedResultFile !== null;
9798
</script>
9899
@@ -149,7 +150,8 @@
149150
class="source-item result-file-item"
150151
on:click={() => selectResultGroup(resultGroup)}
151152
>
152-
<span>{resultGroup.name}</span>
153+
<span class="result-list-icon result-list-icon-folder" aria-hidden="true"></span>
154+
<span class="result-item-label">{resultGroup.name}</span>
153155
</button>
154156
{/each}
155157
{:else if resultsData?.groups?.length > 0}
@@ -166,6 +168,7 @@
166168
disabled={!selectedResultGroup}
167169
on:click={openDeleteGroupDialog}
168170
>
171+
<span class="result-delete-icon" aria-hidden="true"></span>
169172
Delete Output Folder
170173
</button>
171174
</div>
@@ -196,7 +199,8 @@
196199
title={resultFile.name}
197200
on:click={() => loadResultFile(resultFile)}
198201
>
199-
<span>{formatResultFileLabel(resultFile.name)}</span>
202+
<span class="result-list-icon result-list-icon-file" aria-hidden="true"></span>
203+
<span class="result-item-label">{formatResultFileLabel(resultFile.name)}</span>
200204
</button>
201205
{/each}
202206
{:else if selectedResultGroup}
@@ -212,6 +216,7 @@
212216
disabled={!selectedResultFile}
213217
on:click={openDeleteFileDialog}
214218
>
219+
<span class="result-delete-icon" aria-hidden="true"></span>
215220
Delete File
216221
</button>
217222
</div>
@@ -242,39 +247,54 @@
242247
<section class="results-summary-dashboard">
243248
<section class="results-summary-card">
244249
<div class="verdict-summary-grid">
245-
<div class="verdict-summary-header-inline">
246-
<span class="eyebrow">Verdict Outcomes</span>
247-
<div class="verdict-summary-totals">
248-
<span class="verdict-total verdict-total-ok">{resultSummary.okCount} OK</span>
249-
<span class="verdict-total verdict-total-failed">{resultSummary.failedVerdictCount} FAILED</span>
250+
<div class="results-summary-hero">
251+
<article class="results-summary-total-card">
252+
<span class="results-summary-icon">Summary</span>
253+
<div>
254+
<strong>{totalVerdictOutcomeCount}</strong>
255+
<span>Total Outcomes</span>
256+
</div>
257+
</article>
258+
<article class="verdict-total verdict-total-ok">
259+
<strong>{resultSummary.okCount} OK</strong>
260+
<span>{((resultSummary.okCount / totalOutcomeCount) * 100).toFixed(1)}%</span>
261+
</article>
262+
<article class="verdict-total verdict-total-failed">
263+
<strong>{resultSummary.failedVerdictCount} FAILED</strong>
264+
<span>{((resultSummary.failedVerdictCount / totalOutcomeCount) * 100).toFixed(1)}%</span>
265+
</article>
266+
<div class="verdict-outcome-track" aria-hidden="true">
267+
<div
268+
class="verdict-outcome-segment verdict-outcome-segment-ok"
269+
style={`width: ${(resultSummary.okCount / totalOutcomeCount) * 100}%`}
270+
></div>
271+
<div
272+
class="verdict-outcome-segment verdict-outcome-segment-failed"
273+
style={`width: ${(resultSummary.failedVerdictCount / totalOutcomeCount) * 100}%`}
274+
></div>
250275
</div>
251276
</div>
252277
253-
<div class="verdict-outcome-track" aria-hidden="true">
254-
<div
255-
class="verdict-outcome-segment verdict-outcome-segment-ok"
256-
style={`width: ${(resultSummary.okCount / totalOutcomeCount) * 100}%`}
257-
></div>
258-
<div
259-
class="verdict-outcome-segment verdict-outcome-segment-failed"
260-
style={`width: ${(resultSummary.failedVerdictCount / totalOutcomeCount) * 100}%`}
261-
></div>
278+
<div class="verdict-summary-header-inline">
279+
<span class="eyebrow">Verdict Outcomes</span>
262280
</div>
263281
264282
{#if resultSummary.verdictGroups.length > 0}
265283
<div class="verdict-types-scroll">
266284
{#each resultSummary.verdictGroups as verdictGroup}
267285
<article class="verdict-type-row">
286+
<span class="verdict-type-icon" style={`background: ${verdictGroup.color};`}>!</span>
268287
<div class="verdict-summary-copy">
269288
<span class="verdict-summary-label">{verdictGroup.label}</span>
270-
<strong>{verdictGroup.count}</strong>
271289
</div>
272290
<div class="verdict-summary-bar-track">
273291
<div
274292
class="verdict-summary-bar"
275293
style={`width: ${(verdictGroup.count / maxVerdictCount) * 100}%; background: linear-gradient(90deg, ${verdictGroup.color}, ${verdictGroup.color});`}
276294
></div>
277295
</div>
296+
<strong class="verdict-type-count">{verdictGroup.count}</strong>
297+
<span class="verdict-type-percent">{((verdictGroup.count / totalOutcomeCount) * 100).toFixed(1)}%</span>
278298
</article>
279299
{/each}
280300
</div>
@@ -283,20 +303,6 @@
283303
{/if}
284304
</div>
285305
</section>
286-
<section class="results-run-metadata">
287-
<article>
288-
<span class="eyebrow">Selected Run</span>
289-
<strong>{selectedResultGroup.name}</strong>
290-
</article>
291-
<article>
292-
<span class="eyebrow">Generated Verdict Files</span>
293-
<strong>{selectedResultGroup.files?.length || 0}</strong>
294-
</article>
295-
<article>
296-
<span class="eyebrow">Sequences</span>
297-
<strong>{selectedResultGroup.totalSequenceCount || selectedResultGroup.files?.length || 0}</strong>
298-
</article>
299-
</section>
300306
</section>
301307
{:else}
302308
<div class="composition-modal-empty results-empty-state">

0 commit comments

Comments
 (0)