feat(project): add tooltip to vuln progress bar

Signed-off-by: Adam Setch <[email protected]>
DependencyTrack · Feb 8, 2024 · 9d2bfb0 · 9d2bfb0
1 parent b692f7e
commit 9d2bfb0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/views/components/SeverityProgressBar.vue b/src/views/components/SeverityProgressBar.vue
@@ -5,13 +5,28 @@
     </b-progress>
   </span>
   <span v-else class="progress">
-    <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 :id="'progressbar' + hoverId" class="table-progress">
+      <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>
+    <b-tooltip :target="'progressbar' + hoverId" placement="left" noninteractive>
+      <div style="text-align: left;">
+        <h5>{{$t('message.severity')}}</h5>
+        <p>
+          {{$t('severity.critical')}}: {{ critical }}<br>
+          {{$t('severity.high')}}: {{ high }}<br>
+          {{$t('severity.medium')}}: {{ medium }}<br>
+          {{$t('severity.low')}}: {{ low }}<br>
+          {{$t('severity.unassigned')}}: {{ unassigned }}<br>
+        </p>
+        {{$t('message.total')}}: {{ vulnerabilities }}
+      </div>
+    </b-tooltip>
   </span>
 </template>
 
@@ -23,7 +38,14 @@
       high: Number,
       medium: Number,
       low: Number,
-      unassigned: Number
-    }
+      unassigned: Number,
+      $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>
diff --git a/src/views/portfolio/projects/ProjectList.vue b/src/views/portfolio/projects/ProjectList.vue
@@ -273,7 +273,7 @@ import ProjectCreateProjectModal from "./ProjectCreateProjectModal";
             title: this.$t('message.vulnerabilities'),
             field: "metrics.vulnerabilities", // this column uses other fields, but the field id must be unique
             sortable: false,
-            formatter(_, row) {
+            formatter: function(_, row) {
               let metrics = row.metrics
               if (typeof metrics === "undefined") {
                 return "-"; // No vulnerability info available
@@ -288,12 +288,13 @@ import ProjectCreateProjectModal from "./ProjectCreateProjectModal";
                   high: metrics.high,
                   medium: metrics.medium,
                   low: metrics.low,
-                  unassigned: metrics.unassigned
+                  unassigned: metrics.unassigned,
+                  $t: this.$t.bind(this),
                 }
               });
               progressBar.$mount();
               return progressBar.$el.outerHTML;
-            }
+            }.bind(this)
           }
         ],
         data: [],