diff --git a/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue b/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue index f0be922..f033de1 100644 --- a/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue +++ b/pkg/sbombastic-image-vulnerability-scanner/components/ImageDetails.vue @@ -137,8 +137,8 @@ - - +
@@ -154,14 +154,27 @@
-
+
+ - + - +
@@ -207,7 +220,7 @@
-
--> +
@@ -271,7 +284,8 @@ export default { showAllProperties: false, filters: { cveSearch: '', - score: '', + scoreMin: '', + scoreMax: '', packageSearch: '', fixAvailable: 'any', severity: 'any', @@ -352,11 +366,12 @@ export default { ); } - if (this.filters.score) { - const score = parseFloat(this.filters.score); + if (this.filters.scoreMin || this.filters.scoreMax) { filtered = filtered.filter(v => { - const vulnScore = parseFloat(v.score.split(' ')[0]); - return vulnScore >= score; + const vulnScore = parseFloat(v.score.split(' ')[0]) || 0; + const minScore = this.filters.scoreMin ? parseFloat(this.filters.scoreMin) : 0; + const maxScore = this.filters.scoreMax ? parseFloat(this.filters.scoreMax) : 10; + return vulnScore >= minScore && vulnScore <= maxScore; }); } @@ -796,7 +811,16 @@ export default { background: transparent; } +.score-range-wrapper { + display: flex; + align-items: center; + gap: 8px; +} + .score-input { + flex: 1; + min-width: 60px; + text-align: center; color: #BEC1D2; } @@ -804,6 +828,18 @@ export default { color: #BEC1D2; } +.score-separator { + color: #6C6C76; + font-weight: 500; + font-size: 14px; +} + +.score-filter-icon { + color: #6C6C76; + margin-left: 8px; + font-size: 16px; +} + .filter-input:focus { outline: none; }