Added UI linking to query on project classifiers - DependencyTrack/dependency-track#1185

Signed-off-by: Steve Springett <[email protected]>

Author: stevespringett

src/shared/common.js

@@ -6,6 +6,7 @@
 
 "use strict";
 
+const xssFilters = require("xss-filters");
 const $common = function() {
 };
 
@@ -213,6 +214,32 @@ $common.componentClassifierLabelFormatter = (i18n) => {
   }
 };
 
+/**
+ *
+ * @param {*} i18n - VueI18n instance with $t translate function available
+ * @returns a specialized label for component and project classifiers (APPLICATION, LIBRARY, etc).
+ * It must have a corresponding entry in the locales files (e.g. src/locales/en.json)
+ * (application, library, etc.)
+ */
+$common.componentClassifierLabelProjectUrlFormatter = (i18n) => {
+  return function (value) {
+    let url = "../projects/?classifier=" + value;
+    switch (value) {
+      case 'APPLICATION':
+      case 'FRAMEWORK':
+      case 'LIBRARY':
+      case 'CONTAINER':
+      case 'OPERATING_SYSTEM':
+      case 'DEVICE':
+      case 'FIRMWARE':
+      case 'FILE':
+        return `<a href="${url}">${i18n.$t(`message.component_${value.toLowerCase()}`)}</a>`
+      default:
+        return null;
+    }
+  }
+};
+
 /**
  * Given a UNIX timestamp, this function will return a formatted date.
  * i.e. 15 Jan 2017
@@ -315,6 +342,7 @@ module.exports = {
   makeAnalysisStateLabelFormatter: $common.makeAnalysisStateLabelFormatter,
   makeAnalysisJustificationLabelFormatter: $common.makeAnalysisJustificationLabelFormatter,
   componentClassifierLabelFormatter: $common.componentClassifierLabelFormatter,
+  componentClassifierLabelProjectUrlFormatter: $common.componentClassifierLabelProjectUrlFormatter,
   formatTimestamp: $common.formatTimestamp,
   concatenateComponentName: $common.concatenateComponentName,
   valueWithDefault: $common.valueWithDefault,

src/views/portfolio/projects/ProjectList.vue

@@ -97,7 +97,7 @@
             title: this.$t('message.classifier'),
             field: "classifier",
             sortable: true,
-            formatter: common.componentClassifierLabelFormatter(this),
+            formatter: common.componentClassifierLabelProjectUrlFormatter(this),
           },
           {
             title: this.$t('message.last_bom_import'),