Merge pull request #111 from sekwah41/policy-violations

Policy violations

Author: stevespringett

.gitignore

@@ -23,3 +23,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Generates as part of serve
+src/version.json

package-lock.json

@@ -24,21 +24,21 @@
     "@coreui/icons": "0.4.1",
     "@coreui/vue": "2.1.2",
     "@johmun/vue-tags-input": "2.1.0",
-    "axios": "0.21.4",
-    "bootstrap": "4.6.1",
-    "bootstrap-table": "1.15.5",
-    "bootstrap-vue": "2.5.0",
+    "axios": "0.21.1",
+    "bootstrap": "4.6.0",
+    "bootstrap-table": "1.19.1",
+    "bootstrap-vue": "2.21.2",
     "chart.js": "2.9.4",
     "core-js": "2.6.12",
-    "css-vars-ponyfill": "2.4.7",
+    "css-vars-ponyfill": "2.4.3",
     "font-awesome": "4.7.0",
-    "jquery": "3.6.0",
-    "lodash-es": "4.17.21",
-    "oidc-client": "1.11.5",
-    "perfect-scrollbar": "1.5.5",
+    "jquery": "3.5.1",
+    "lodash-es": "4.17.20",
+    "oidc-client": "1.11.3",
+    "perfect-scrollbar": "1.4.0",
     "simple-line-icons": "2.5.5",
-    "vee-validate": "3.4.14",
-    "vue": "2.6.14",
+    "vee-validate": "3.4.5",
+    "vue": "2.6.12",
     "vue-axios": "2.1.5",
     "vue-bootstrap-toggle": "1.1.4",
     "vue-chartjs": "3.5.1",

package.json

@@ -24,6 +24,10 @@
 .severity-unassigned {
   color: $severity-unassigned;
 }
+// Fixes the width for the bootstrap progress bar in tables
+.table-progress {
+  width: 100% !important;
+}
 .severity-critical-bg, .bg-severity-critical, .bg-CRITICAL {
   background: $severity-critical none;
 }
@@ -39,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/assets/scss/_custom.scss

@@ -476,7 +476,10 @@
   "policy_violation": {
     "fails": "Violation Failures",
     "warns": "Violation Warnings",
-    "infos": "Informational Violations"
+    "infos": "Informational Violations",
+    "license": "License Violations",
+    "operational": "Operational Violations",
+    "security": "Security Violations"
   },
   "severity": {
     "critical": "Critical",

src/i18n/locales/en.json

@@ -0,0 +1,48 @@
+<template>
+  <span v-if="metrics.policyViolationsTotal === 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">
+    <span :id="'progressbar' + hoverId" class="table-progress">
+      <b-progress class="table-progress" :max="metrics.policyViolationsTotal" show-value>
+        <b-progress-bar :value="metrics.policyViolationsInfo" class="severity-info-bg"></b-progress-bar>
+        <b-progress-bar :value="metrics.policyViolationsWarn" class="severity-warn-bg"></b-progress-bar>
+        <b-progress-bar :value="metrics.policyViolationsFail" class="severity-fail-bg"></b-progress-bar>
+      </b-progress>
+    </span>
+  <b-tooltip :target="'progressbar' + hoverId" placement="left" noninteractive>
+    <div style="text-align: left;">
+      <h5>{{$t('message.type')}}</h5>
+      <p>
+        {{$t('policy_violation.license')}}: {{ metrics.policyViolationsLicenseTotal }}<br>
+        {{$t('policy_violation.operational')}}: {{ metrics.policyViolationsOperationalTotal }}<br>
+        {{$t('policy_violation.security')}}: {{ metrics.policyViolationsSecurityTotal }}<br>
+      </p>
+      <h5>{{ $t('message.violation_state') }}</h5>
+      <p>
+        {{$t('policy_violation.infos')}}: {{ metrics.policyViolationsInfo }}<br>
+        {{$t('policy_violation.warns')}}: {{ metrics.policyViolationsWarn }}<br>
+        {{$t('policy_violation.fails')}}: {{ metrics.policyViolationsFail }}<br>
+      </p>
+      {{$t('message.total')}}: {{ metrics.policyViolationsTotal }}
+    </div>
+  </b-tooltip>
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    metrics: Object,
+    $t: Function,
+  },
+  data() {
+    return {
+      // Workaround for vue references to the progress-bars. Using the ref targets doesn't seem to work.
+      hoverId: Math.random().toString(36),
+    };
+  },
+}
+</script>

src/views/components/PolicyViolationProgressBar.vue

@@ -1,13 +1,17 @@
 <template>
   <span v-if="vulnerabilities === 0" class="progress">
-    <div class="progress-bar" style="width: 100%">0</div>
+    <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">
-    <div v-if="critical > 0" class="progress-bar severity-critical-bg" v-bind:style="criticalWidth">{{critical}}</div>
-    <div v-if="high > 0" class="progress-bar severity-high-bg" v-bind:style="highWidth">{{high}}</div>
-    <div v-if="medium > 0" class="progress-bar severity-medium-bg" v-bind:style="mediumWidth">{{medium}}</div>
-    <div v-if="low > 0" class="progress-bar severity-low-bg" v-bind:style="lowWidth">{{low}}</div>
-    <div v-if="unassigned > 0" class="progress-bar severity-unassigned-bg" v-bind:style="unassignedWidth">{{unassigned}}</div>
+    <b-progress class="table-progress" :max="vulnerabilities" show-value>
+      <b-progress-bar :value="critical" class="severity-critical-bg"></b-progress-bar>
+      <b-progress-bar :value="high" class="severity-high-bg"></b-progress-bar>
+      <b-progress-bar :value="medium" class="severity-medium-bg"></b-progress-bar>
+      <b-progress-bar :value="low" class="severity-low-bg"></b-progress-bar>
+      <b-progress-bar :value="unassigned" class="severity-unassigned-bg"></b-progress-bar>
+    </b-progress>
   </span>
 </template>
 
@@ -20,23 +24,6 @@
       medium: Number,
       low: Number,
       unassigned: Number
-    },
-    computed: {
-      criticalWidth: function () {
-        return "width:" + (100 * this.critical) / this.vulnerabilities + "%";
-      },
-      highWidth: function () {
-        return "width:" + (100 * this.high) / this.vulnerabilities + "%";
-      },
-      mediumWidth: function () {
-        return "width:" + (100 * this.medium) / this.vulnerabilities + "%";
-      },
-      lowWidth: function () {
-        return "width:" + (100 * this.low) / this.vulnerabilities + "%";
-      },
-      unassignedWidth: function () {
-        return "width:" + (100 * this.unassigned) / this.vulnerabilities + "%";
-      }
     }
   }
 </script>

src/views/components/SeverityProgressBar.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";
 
@@ -117,6 +118,24 @@
             align: "center",
             sortable: true
           },
+          {
+            title: this.$t('message.policy_violations'),
+            field: "metrics",
+            formatter: function (metrics) {
+              if (typeof metrics === "undefined") {
+                return "-"; // No vulnerability info available
+              }
+              let ComponentClass = Vue.extend(PolicyViolationProgressBar);
+              let progressBar = new ComponentClass({
+                propsData: {
+                  metrics,
+                  $t: this.$t.bind(this),
+                }
+              });
+              progressBar.$mount();
+              return progressBar.$el.outerHTML;
+            }.bind(this)
+          },
           {
             title: this.$t('message.vulnerabilities'),
             field: "metrics",