Created stacked percentage bar for severity based amount under collapsed mode; Created block percentage bar for affacted image column

Author: xingzhang-suse

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

@@ -35,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/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>

pkg/sbombastic-image-vulnerability-scanner/config/sbombastic-image-vulnerability-scanner.ts

@@ -12,31 +12,31 @@ export function init($plugin: IPlugin, store: any) {
       inStore: "cluster",
   });
 
-    virtualType({
-        labelKey: 'imageScanner.registries.title',
-        name: PAGE.REGISTRIES,
-        namespaced: false,
-        route:    {
-            name:   `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
-            params: {
-                product: PRODUCT_NAME
-            },
-            meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
-        }
-    });
-
-     virtualType({
-        labelKey: 'imageScanner.images.title',
-        name: PAGE.IMAGE_OVERVIEW,
-        namespaced: false,
-        route:    {
-            name:   `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_OVERVIEW}`,
-            params: {
-                product: PRODUCT_NAME
-            },
-            meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
-        }
-    });
+  virtualType({
+      labelKey: 'imageScanner.registries.title',
+      name: PAGE.REGISTRIES,
+      namespaced: false,
+      route:    {
+          name:   `c-cluster-${PRODUCT_NAME}-${PAGE.REGISTRIES}`,
+          params: {
+              product: PRODUCT_NAME
+          },
+          meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
+      }
+  });
+
+  virtualType({
+    labelKey: 'imageScanner.images.title',
+    name: PAGE.IMAGE_OVERVIEW,
+    namespaced: false,
+    route:    {
+        name:   `c-cluster-${PRODUCT_NAME}-${PAGE.IMAGE_OVERVIEW}`,
+        params: {
+            product: PRODUCT_NAME
+        },
+        meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME }
+    }
+  });
 
   virtualType({
     label: store.getters["i18n/t"]("image_scanner.vulnerabilities.title"),
@@ -51,10 +51,24 @@ export function init($plugin: IPlugin, store: any) {
     },
   });
 
+  virtualType({
+    label: "Components Demo",
+    name: "demo",
+    namespaced: false,
+    route: {
+      name: `c-cluster-${PRODUCT_NAME}-demo`,
+      params: {
+        product: PRODUCT_NAME,
+      },
+      meta: { pkg: PRODUCT_NAME, product: PRODUCT_NAME },
+    },
+  });
+
     basicType([
         PAGE.REGISTRIES,
         PAGE.IMAGE_OVERVIEW,
-        PAGE.VULNERABILITY_OVERVIEW
+        PAGE.VULNERABILITY_OVERVIEW,
+        "demo"
     ]);
 
 }