Fix the layout issu eon severityBarChart and utilize it in image overview page

Author: xingzhang-suse

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

@@ -0,0 +1,63 @@
+<template>
+    <div class="chart-area">
+        <div class="title">
+            Most affected images at risk
+        </div>
+        <div class="severity-bar-chart">
+            <SeverityBarChart :severityData="severityData" />
+        </div>
+    </div>
+</template>
+
+<script>
+  import SeverityBarChart from '@sbombastic-image-vulnerability-scanner/components/common/SeverityBarChart';
+
+  export default {
+    name: 'imageRiskAssessment',
+    components: {
+      SeverityBarChart
+    },
+    props: {
+        severityData: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+      return {
+        severityData: {
+          Critical: 1627,
+          High: 353,
+          Medium: 246,
+          Low: 65,
+          None: 293,
+        }
+      };
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+    .chart-area {
+        display: flex;
+        padding: 16px;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 12px;
+        flex: 1 0 0;
+        border-right: 1px solid #DCDEE7;
+        .title {
+            color: #141419;
+            font-family: Lato;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 21px; /* 116.667% */
+        }
+        .severity-bar-chart {
+            padding: 4px 8px;
+            align-items: center;
+            align-self: stretch;
+        }
+    }
+</style>

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

@@ -7,7 +7,7 @@
     <div class="severity-chart">
       <div v-for="(value, key) in severityData" :key="key" class="severity-item">
         <div class="severity-item-name">{{ key }}</div>
-        <PercentageBar :modelValue="percentage(value)" style="width: 314px" />
+        <PercentageBar class="severity-item-bar" :modelValue="percentage(value)" />
         <div class="severity-item-value"> {{ value }}</div>
       </div>
     </div>
@@ -51,6 +51,7 @@ export default {
 
     .severity-heading {
       display: flex;
+      flex: 1;
       width: 160px;
       flex-direction: column;
       justify-content: center;
@@ -74,39 +75,39 @@ export default {
         font-style: normal;
         font-weight: 400;
         line-height: normal;
+        text-align: center;
       }
     }
 
     .severity-chart {
       display: flex;
       flex-direction: column;
-      align-items: flex-start;
       gap: 4px;
-      flex: 1 0 0;
+      flex: 3;
 
       .severity-item {
         display: flex;
-        justify-content: flex-end;
         align-items: center;
         gap: 12px;
-        align-self: stretch;
 
         .severity-item-name {
-          display: flex;
           width: 80px;
-          align-items: center;
+          align-items: right;
           gap: 12px;
-          align-self: stretch;
         }
 
+        .severity-item-bar {
+          flex: 1;
+          overflow: hidden;
+        }
         .severity-item-value {
-          display: flex;
-          width: 45px;
-          justify-content: flex-end;
-          align-items: center;
+          width: 30px;
+          text-align: right;
+          align-items: left;
           gap: 12px;
-          align-self: stretch;
         }
+
+        
       }
     }
   }

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

@@ -34,7 +34,7 @@
     </div>
     <div class="summary-section">
       <TopRiskyImagesChart :topRiskyImages="topRiskyImages"/>
-      <TopRiskyImagesChart :topRiskyImages="topRiskyImages"/>
+      <ImageRiskAssessment :severityData="severityData"/>
     </div>
     <div class="table-filter-section">
       <div class="table-filter">
@@ -93,11 +93,13 @@
 <script>
   import LabeledSelect from "@shell/components/form/LabeledSelect";
   import TopRiskyImagesChart from "@sbombastic-image-vulnerability-scanner/components/TopRiskyImagesChart";
+  import ImageRiskAssessment from "@sbombastic-image-vulnerability-scanner/components/ImageRiskAssessment"
   export default {
     name: 'imageOverview',
     components: {
       LabeledSelect,
       TopRiskyImagesChart,
+      ImageRiskAssessment,
     },
     data() {
       const filterCveOptions = [
@@ -162,6 +164,13 @@
             }
           },
         ],
+        severityData: {
+          Critical: 1627,
+          High: 353,
+          Medium: 246,
+          Low: 65,
+          None: 293,
+        },
         filterCveOptions,
         filterImageOptions,
         selectedCveFilter: filterCveOptions[0],

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

@@ -56,9 +56,9 @@
 
   .charts {
     /* layout */
-    display: flex;
-    align-items: flex-start;
+    align-items: center;
     align-self: stretch;
+    padding: 4px 48px;
     /* style */
     border-radius: 6px;
     border: 1px solid #DCDEE7;