Add hover to PolicyBiolationProgressBar

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

Author: sekwah41

src/views/components/PolicyViolationProgressBar.vue

@@ -5,21 +5,35 @@
     </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 :id="'progressbar' + hoverId" class="table-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>
+  <b-tooltip :target="'progressbar' + hoverId" placement="left" noninteractive>
+    Info: {{ info }}<br>
+    Warn: {{ warn }}<br>
+    Fail: {{ fail }}<br>
+    Total: {{ total }}<br>
+  </b-tooltip>
   </span>
 </template>
 
 <script>
-  export default {
-    props: {
-      total: Number,
-      info: Number,
-      warn: Number,
-      fail: Number,
-    }
-  }
+export default {
+  props: {
+    total: Number,
+    info: Number,
+    warn: Number,
+    fail: Number,
+  },
+  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/portfolio/projects/ProjectList.vue

@@ -125,15 +125,14 @@
               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
+                  info: metrics.policyViolationsInfo,
                 }
               });
               progressBar.$mount();