Merge pull request #52 from xingzhang-suse/main

Added more UI components

Author: rushk014

pkg/sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="chart-area">
         <div class="title">
-            Most affected images at risk
+            {{ t('imageScanner.images.imageBySeverityChart.title') }}
         </div>
         <div class="severity-bar-chart">
-            <SeverityBarChart :severityData="severityData" />
+            <SeverityBarChart :severityData="severityData" :description="t('imageScanner.images.imageBySeverityChart.subTitle')" />
         </div>
     </div>
 </template>
@@ -23,17 +23,7 @@
             required: true
         }
     },
-    data() {
-      return {
-        severityData: {
-          Critical: 1627,
-          High: 353,
-          Medium: 246,
-          Low: 65,
-          None: 293,
-        }
-      };
-    }
+    data() {}
   }
 </script>
 
@@ -45,7 +35,6 @@
         align-items: flex-start;
         gap: 12px;
         flex: 1 0 0;
-        border-right: 1px solid #DCDEE7;
         .title {
             color: #141419;
             font-family: Lato;

pkg/sbombastic-image-vulnerability-scanner/components/common/AmountBarBySeverity.vue

@@ -1,5 +1,12 @@
 <template>
-  <div>
+  <div v-if="isCollapsed">
+    <StackedPercentageBar
+      :percentages="pecentages"
+      :primaryColors="['#880E1E','#D32F2F','#FB8C00','#FDD835','#E0E0E0','#F4F5FA']"
+      :height="7"
+    />
+  </div>
+  <div v-else>
     <div class="bar">
       <div class="badge" :class="badgeColor('critical', cveAmount.critical)">{{ cveAmount.critical }}</div>
       <div class="badge"  :class="badgeColor('high', cveAmount.high)">{{ cveAmount.high }}</div>
@@ -11,12 +18,20 @@
 </template>
 
 <script>
+  import StackedPercentageBar from '@sbombastic-image-vulnerability-scanner/components/common/StackedPercentageBar';
   export default {
     name: 'amountBarBySeverity',
+    components: {
+      StackedPercentageBar,
+    },
     props: {
       cveAmount: {
         type: Object,
         default:  () => {}
+      },
+      isCollapsed: {
+        type: Boolean,
+        default: false,
       }
     },
     methods: {
@@ -26,6 +41,18 @@
         _class[className] = true;
         return _class;
       } 
+    },
+    computed: {
+      pecentages() {
+        let total = this.cveAmount.critical + this.cveAmount.high + this.cveAmount.medium + this.cveAmount.low + this.cveAmount.none;
+        return [
+          this.cveAmount.critical * 100 / total,
+          this.cveAmount.high * 100 / total,
+         this.cveAmount.medium * 100 / total,
+          this.cveAmount.low * 100 / total,
+          this.cveAmount.none * 100 / total,
+        ];
+      }
     }
   }
 </script>

pkg/sbombastic-image-vulnerability-scanner/components/common/BlockPercentageBar.vue

@@ -0,0 +1,88 @@
+<template>
+  <div ref="bar" class="bar-container">
+    <div
+      v-for="n in totalBlocks"
+      :key="n"
+      class="block"
+      :class="{ filled: n <= filledBlocks }"
+    ></div>
+  </div>
+</template>
+
+<script>
+    export default {
+    name: 'blockPercentageBar',
+    props: {
+        percentage: {
+            type: Number,
+            required: true,
+            validator: value => value >= 0 && value <= 100,
+        },
+        eventHandler: {
+            type: Function
+        },
+    },
+    data() {
+        return {
+            totalBlocks: 0,
+            filledBlocks: 0,
+            resizeObserver: null,
+        }
+    },
+    methods: {
+        calculateBlocks() {
+            const el = this.$refs.bar
+            if (!el) return;
+            const width = el.offsetWidth;
+            const blockWidth = 4;
+            const total = Math.floor(width / blockWidth / 2);
+            this.totalBlocks = total;
+            this.filledBlocks = Math.round((this.percentage / 100) * total);
+        },
+        debounce(func, delay = 300) {
+            let timeout
+            return function (...args) {
+                clearTimeout(timeout)
+                timeout = setTimeout(() => func.apply(this, args), delay)
+            }
+        }
+    },
+    watch: {
+        percentage() {
+            this.calculateBlocks();
+        },
+    },
+    mounted() {
+        this.calculateBlocks();
+        // window.addEventListener('resize', this.debounce(this.calculateBlocks, 500));
+        this.eventHandler(this.calculateBlocks);
+    },
+    onBeforeUnmount() {
+        // window.removeEventListener('resize', this.debounce(this.calculateBlocks, 500));
+    },
+    beforeDestroy() {
+        // window.removeEventListener('resize', this.debounce(this.calculateBlocks, 500));
+    },
+    }
+</script>
+
+<style scoped>
+    .bar-container {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(4px, 1fr);
+        gap: 3px;
+        width: 100%;
+        height: 16px;
+    }
+
+    .block {
+        background-color: #e0e0e0;
+        border-radius: 1px;
+        transition: background-color 0.2s ease;
+    }
+
+    .block.filled {
+        background-color: #888ca0;
+    }
+</style>

pkg/sbombastic-image-vulnerability-scanner/components/common/ScoreBadge.vue

@@ -7,10 +7,16 @@
 
 <script>
   export default {
-    name: 'ScoreBadge',
+    name: 'scoreBadge',
     props: {
-      score: Number,
-      scoreType: String
+      score:{
+        type: Number,
+        default: 0
+      },
+      scoreType: {
+        type: String,
+        default: ""
+      }
     },
     computed: {
       severity() {

pkg/sbombastic-image-vulnerability-scanner/components/common/SeverityBarChart.vue

@@ -2,20 +2,20 @@
   <div class="severity-bar-chart">
     <div class="severity-heading">
       <span class="vul-total">{{ total }}</span>
-      <span class="vul-desc">vulnerabilities in total</span>
+      <span class="vul-desc">{{ description }}</span>
     </div>
     <div class="severity-chart">
       <div v-for="(value, key) in severityData" :key="key" class="severity-item">
-        <div class="severity-item-name">{{ key }}</div>
-        <PercentageBar class="severity-item-bar" :modelValue="percentage(value)" />
+        <div class="severity-item-name">{{ t(`imageScanner.enum.severity.${ key }`) }}</div>
+        <PercentageBar class="severity-item-bar" :colorStops="{0: `--cve-${ key }`}" :value="percentage(value)" :height="7"/>
         <div class="severity-item-value"> {{ value }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import PercentageBar from '@shell/components/PercentageBar.vue';
+import PercentageBar from '@sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/PercentageBar';
 
 export default {
   name: 'SeverityBarChart',
@@ -26,7 +26,11 @@ export default {
     severityData: {
       type: Object,
       required: true
-    }
+    },
+    description: {
+      type: String,
+      required: true
+    },
   },
   methods: {
     percentage(value) {
@@ -84,10 +88,10 @@ export default {
       flex-direction: column;
       gap: 4px;
       flex: 3;
-
       .severity-item {
         display: flex;
         align-items: center;
+        margin: 2px 0;
         gap: 12px;
 
         .severity-item-name {
@@ -100,15 +104,22 @@ export default {
           flex: 1;
           overflow: hidden;
         }
+      
         .severity-item-value {
-          width: 30px;
+          width: 50px;
           text-align: right;
           align-items: left;
           gap: 12px;
         }
-
-        
       }
     }
+
+
+    --cve-critical: #880E1E;
+    --cve-high: #DE2136;
+    --cve-medium: #FF8533;
+    --cve-low: #EEC707;
+    --cve-none: #DCDEE7;
+    --border: #F4F5FA;
   }
 </style>

pkg/sbombastic-image-vulnerability-scanner/components/common/StackedPercentageBar.vue

@@ -0,0 +1,68 @@
+<script>
+    export default {
+        name: "stackedPercentageBar",
+        props: {
+            percentages: {
+                type:     Array,
+                required: true,
+                validator(value) {
+                    return value.reduce((curr, sum) => sum + curr) <= 100;
+                }
+            },
+            primaryColors: {
+                type:    Array,
+                default: ['--primary']
+            },
+            secondaryColor: {
+                type:    String,
+                default: '--border'
+            },
+            height: {
+                type: Number,
+                default: 15
+            }
+        },
+        computed: {
+            indicatorStyle() {
+                return this.percentages.map((percentage, index) => {
+                    return {
+                        width:           `${ percentage }%`,
+                        height:          `${ this.height }px`,
+                        backgroundColor: this.primaryColors[index]
+                    }
+                });
+            },
+            barStyle() {
+                return { 
+                    backgroundColor: `var(${ this.secondaryColor })`,
+                    height:          `${ this.height }px`,
+                    borderRadius: `${ this.height / 2 }px`,
+                };
+            },
+        }
+    };
+</script>
+
+<template>
+  <div
+    class="bar"
+    :style="barStyle"
+  >
+    <div v-for="(percentage, index) in percentages"
+      class="indicator"
+      :style="indicatorStyle[index]"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bar {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .indicator {
+        height: 100%;
+    }
+}
+</style>