Rewote percentageBar and Bar, Implemented severity beased color on the bar

Author: xingzhang-suse

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>
 

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/rancher-rewritten/shell/components/PercentageBar.vue

@@ -0,0 +1,136 @@
+<script>
+import Bar from '@sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/graph/Bar';
+import { formatPercent } from '@shell/utils/string';
+
+export const PreferredDirection = {
+  LESS: 'LESS',
+  MORE: 'MORE'
+};
+
+/**
+ * A percentage bar which can be used to display how much a resource is being consumed.
+ */
+export default {
+  components: { Bar },
+  props:      {
+    /**
+     * A value representing the percentage to be displayed. *Must be a value between 0 and 100*.
+     */
+    value: {
+      type:     Number,
+      required: true,
+      validator(value) {
+        return value >= 0;
+      }
+    },
+
+    /**
+     * A value which indicates which direction is better so we can change the color appropriately (Valid values: 'LESS' or 'MORE')
+     */
+    preferredDirection: {
+      type:    String,
+      default: PreferredDirection.LESS
+    },
+
+    /**
+     * Determines whether we display the numerical percentage value to the right of the bar.
+     */
+    showPercentage: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Optional map of percentage:color class stops to apply to bar
+     */
+
+    colorStops: {
+      type:    Object,
+      default: null
+    },
+
+    /**
+     * Show vertical lines to denote where multiple sources that are contributing to this percentage end
+     */
+    slices: {
+      type:    Array,
+      default: () => []
+    },
+
+    /**
+     * Define the height of the percentage bar
+     */
+    height: {
+      type: Number,
+      default: 15
+    }
+  },
+
+  computed: {
+    primaryColor() {
+      const isLess = this.preferredDirection === PreferredDirection.LESS;
+
+      if (this.colorStops) {
+        const thresholds = Object.keys(this.colorStops).sort();
+
+        if (isLess) {
+          let i = thresholds.length - 1;
+
+          while (this.value < thresholds[i]) {
+            i--;
+          }
+
+          return this.colorStops[thresholds[i]];
+        } else {
+          let i = 0;
+
+          while (this.value > thresholds[i]) {
+            i++;
+          }
+
+          return this.colorStops[thresholds[i]];
+        }
+      }
+      const threshold = isLess ? 80 : 20;
+
+      const left = isLess ? this.value : threshold;
+      const right = isLess ? threshold : this.value;
+
+      if (left <= right) {
+        return '--primary';
+      }
+
+      return '--error';
+    },
+    formattedPercentage() {
+      return formatPercent(this.value);
+    }
+  },
+};
+</script>
+
+<template>
+  <span class="percentage-bar">
+    <Bar
+      :percentage="value"
+      :primary-color="primaryColor"
+      :slices="slices"
+      :height="height"
+    />
+    <span
+      v-if="showPercentage"
+      class="ml-5 percentage-value"
+    >{{ formattedPercentage }}</span>
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.percentage-bar {
+  display: flex;
+  flex-direction: row;
+
+  .percentage-value {
+    word-break: keep-all;
+  }
+}
+</style>

pkg/sbombastic-image-vulnerability-scanner/components/rancher-rewritten/shell/components/graph/Bar.vue

@@ -0,0 +1,86 @@
+<script>
+export default {
+  props: {
+    percentage: {
+      type:     Number,
+      required: true
+    },
+    primaryColor: {
+      type:    String,
+      default: '--primary'
+    },
+    secondaryColor: {
+      type:    String,
+      default: '--border'
+    },
+    slices: {
+      type:    Array,
+      default: () => []
+    },
+    height: {
+      type: Number,
+      default: 15
+    }
+  },
+  computed: {
+    indicatorStyle() {
+      return {
+        width:           `${ this.percentage }%`,
+        height:          `${ this.height }px`,
+        backgroundColor: `var(${ this.primaryColor })`
+      };
+    },
+    barStyle() {
+      return { 
+        backgroundColor: `var(${ this.secondaryColor })`,
+        height:          `${ this.height }px`,
+        borderRadius: `${ this.height / 2 }px`,
+      };
+    },
+    sliceStyles() {
+      return this.slices.map((slice) => ({
+        left:       `${ slice }%`,
+        visibility: slice < this.percentage ? 'visible' : 'hidden'
+      }));
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="bar"
+    :style="barStyle"
+  >
+    <div
+      class="indicator"
+      :style="indicatorStyle"
+    />
+    <div
+      v-for="(sliceStyle, i) in sliceStyles"
+      :key="i"
+      class="slice"
+      :style="sliceStyle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bar {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+
+    .indicator {
+        height: 100%;
+    }
+
+    .slice {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: var(--body-bg);
+    }
+}
+</style>

pkg/sbombastic-image-vulnerability-scanner/l10n/en-us.yaml

@@ -4,6 +4,9 @@ imageScanner:
   images:
     title: Images
     downloadReport: Download full report
+    imageBySeverityChart:
+      title: Most affected images at risk
+      subTitle: images in total
     filters:
       image:
         allImages: All images
@@ -19,4 +22,12 @@ imageScanner:
         registry: Registry
   vulnerabilities:
     title: Vulnerabilities
+  enum:
+    severity:
+      critical: Critical
+      high: High
+      medium: Medium
+      low: Low
+      none: None
+
 

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/ImageOverview.vue

@@ -165,11 +165,11 @@
           },
         ],
         severityData: {
-          Critical: 1627,
-          High: 353,
-          Medium: 246,
-          Low: 65,
-          None: 293,
+          critical: 1627,
+          high: 353,
+          medium: 246,
+          low: 1265,
+          none: 293,
         },
         filterCveOptions,
         filterImageOptions,

pkg/sbombastic-image-vulnerability-scanner/pages/c/_cluster/sbombastic-image-vulnerability-scanner/vulnerabilities.vue

@@ -4,7 +4,7 @@
         <h1>Vulnerabilities</h1>
     </div>
     <div class="charts">
-      <SeverityBarChart :severityData="severityData" />
+      <SeverityBarChart :severityData="severityData" description="vulnerabilities in total"/>
     </div>
     <div class="table">
       <ScoreBadge :score="7.8" :scoreType="'v2'" style="width: 123px; height: 24px;"/>
@@ -25,11 +25,11 @@
     data() {
       return {
         severityData: {
-          Critical: 1627,
-          High: 353,
-          Medium: 246,
-          Low: 65,
-          None: 293,
+          critical: 1627,
+          high: 353,
+          medium: 246,
+          low: 1265,
+          none: 293,
         }
       };
     }