Added policy violations bar

Signed-off-by: Sekwah <[email protected]>

Author: sekwah41

src/assets/scss/_custom.scss

@@ -26,7 +26,7 @@
 }
 // Fixes the width for the bootstrap progress bar in tables
 .table-progress {
-  width: 100%;
+  width: 100% !important;
 }
 .severity-critical-bg, .bg-severity-critical, .bg-CRITICAL {
   background: $severity-critical none;
@@ -43,6 +43,12 @@
 .severity-info-bg, .bg-severity-info, .bg-INFO {
   background: $severity-info none;
 }
+.severity-warn-bg {
+  background: $severity-medium none;
+}
+.severity-fail-bg {
+  background: $severity-critical none;
+}
 .bg-violation-type {
   background: $widget-3;
 }

src/views/components/PolicyViolationProgressBar.vue

@@ -0,0 +1,25 @@
+<template>
+  <span v-if="total === 0" class="progress">
+    <b-progress class="table-progress" :max="'0'" show-value>
+      <b-progress-bar class="table-progress" value="0"></b-progress-bar>
+    </b-progress>
+  </span>
+  <span v-else class="progress">
+    <b-progress class="table-progress" :max="total" show-value>
+      <b-progress-bar :value="info" class="severity-info-bg"></b-progress-bar>
+      <b-progress-bar :value="warn" class="severity-warn-bg"></b-progress-bar>
+      <b-progress-bar :value="fail" class="severity-fail-bg"></b-progress-bar>
+    </b-progress>
+  </span>
+</template>
+
+<script>
+  export default {
+    props: {
+      total: Number,
+      info: Number,
+      warn: Number,
+      fail: Number,
+    }
+  }
+</script>

src/views/portfolio/projects/ProjectList.vue

@@ -24,6 +24,7 @@
   import PortfolioWidgetRow from "../../dashboard/PortfolioWidgetRow";
   import ProjectCreateProjectModal from "./ProjectCreateProjectModal";
   import SeverityProgressBar from "../../components/SeverityProgressBar";
+  import PolicyViolationProgressBar from "../../components/PolicyViolationProgressBar";
   import xssFilters from "xss-filters";
   import permissionsMixin from "../../../mixins/permissionsMixin";
 
@@ -119,7 +120,25 @@
           },
           {
             title: this.$t('message.policy_violations'),
-            field: "metrics.policyViolationsTotal"
+            field: "metrics",
+            formatter(metrics, row, index) {
+              if (typeof metrics === "undefined") {
+                return "-"; // No vulnerability info available
+              }
+              console.log(metrics);
+
+              let ComponentClass = Vue.extend(PolicyViolationProgressBar);
+              let progressBar = new ComponentClass({
+                propsData: {
+                  total: metrics.policyViolationsTotal,
+                  warn: metrics.policyViolationsWarn,
+                  fail: metrics.policyViolationsFail,
+                  info: metrics.policyViolationsInfo
+                }
+              });
+              progressBar.$mount();
+              return progressBar.$el.outerHTML;
+            }
           },
           {
             title: this.$t('message.vulnerabilities'),