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;
}