From 6eebb1c8e1fcd9b4905c0406ce8ca6ab5229f68c Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 31 Jan 2024 15:19:49 -0500
Subject: [PATCH 1/3] feat(vulnerabilities): enhance Vulnerabilities UI to be
 able to toggle affected projects by active/inactive

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../vulnerabilities/AffectedProjects.vue      | 61 ++++++++++++++++++-
 .../vulnerabilities/VulnerabilityList.vue     |  3 +-
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/src/views/portfolio/vulnerabilities/AffectedProjects.vue b/src/views/portfolio/vulnerabilities/AffectedProjects.vue
index f3f3e9a9e..c0cbcf9cd 100644
--- a/src/views/portfolio/vulnerabilities/AffectedProjects.vue
+++ b/src/views/portfolio/vulnerabilities/AffectedProjects.vue
@@ -1,19 +1,33 @@
 <template>
+  <div>
+    <div id="projectsToolbar" class="bs-table-custom-toolbar">
+      <c-switch style="margin-left:1rem; margin-right:.5rem" id="showInactiveProjects" color="primary" v-model="showInactiveProjects" label v-bind="labelIcon" /><span class="text-muted">{{ $t('message.show_inactive_projects') }}</span>
+    </div>
     <bootstrap-table
       ref="table"
       :columns="columns"
       :data="data"
       :options="options"
-      @on-load-success="tableLoaded">
+      @on-load-success="tableLoaded"
+      @on-post-body="onPostBody">
     </bootstrap-table>
+  </div>
 </template>
 
 <script>
   import xssFilters from "xss-filters";
   import permissionsMixin from "../../../mixins/permissionsMixin";
+  import { Switch as cSwitch } from '@coreui/vue';
+
 
   export default {
     mixins: [permissionsMixin],
+    components: {
+      cSwitch
+    },
+    beforeCreate() {
+      this.showInactiveProjects = (localStorage && localStorage.getItem("AffectedProjectListShowInactiveProjects") !== null) ? (localStorage.getItem("AffectedProjectListShowInactiveProjects") === "true") : false;
+    },
     props: {
       source: String,
       vulnId: String,
@@ -21,6 +35,11 @@
     },
     data() {
       return {
+        showInactiveProjects: this.showInactiveProjects,
+        labelIcon: {
+          dataOn: '\u2713',
+          dataOff: '\u2715'
+        },
         columns: [
           {
             title: this.$t('message.name'),
@@ -45,6 +64,15 @@
             title: this.$t('message.version'),
             field: "version",
             sortable: true,
+          },
+          {
+            title: this.$t('message.active'),
+            field: "active",
+            formatter(value, row, index) {
+              return value === true ? '<i class="fa fa-check-square-o" />' : "";
+            },
+            align: "center",
+            sortable: true
           }
         ],
         data: [],
@@ -61,14 +89,43 @@
           icons: {
             refresh: 'fa-refresh'
           },
-          url: `${this.$api.BASE_URL}/${this.$api.URL_VULNERABILITY}/source/${this.source}/vuln/${this.vulnId}/projects`
+          url: this.apiUrl()
         }
       };
     },
     methods: {
+      apiUrl: function () {
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_VULNERABILITY}/source/${this.source}/vuln/${this.vulnId}/projects`;
+        if (this.showInactiveProjects === undefined) {
+          url += "?excludeInactive=true";
+        } else {
+          url += "?excludeInactive=" + !this.showInactiveProjects;
+        }
+        return url;
+      },
       tableLoaded: function(array) {
         this.$emit('total', array.length);
+      },
+      refreshTable: function () {
+        this.$refs.table.refresh({
+          url: this.apiUrl(),
+          silent: true,
+          pageNumber: 1
+        });
+      },
+      onPostBody: function () {
+        this.$refs.table.hideLoading();
       }
+    },
+    watch: {
+      showInactiveProjects() {
+        if (localStorage) {
+          localStorage.setItem("AffectedProjectListShowInactiveProjects", this.showInactiveProjects.toString());
+        }
+        this.$refs.table.showLoading();
+        this.currentPage = 1;
+        this.refreshTable();
+      },
     }
   };
 </script>
diff --git a/src/views/portfolio/vulnerabilities/VulnerabilityList.vue b/src/views/portfolio/vulnerabilities/VulnerabilityList.vue
index debf1e8b2..eab9ddec2 100644
--- a/src/views/portfolio/vulnerabilities/VulnerabilityList.vue
+++ b/src/views/portfolio/vulnerabilities/VulnerabilityList.vue
@@ -53,6 +53,7 @@ import VulnerabilityCreateVulnerabilityModal from "./VulnerabilityCreateVulnerab
     },
     data() {
       return {
+        showInactiveProjects: this.showInactiveProjects,
         columns: [
           {
             title: this.$t('message.name'),
@@ -111,7 +112,7 @@ import VulnerabilityCreateVulnerabilityModal from "./VulnerabilityCreateVulnerab
           },
           {
             title: this.$t('message.projects'),
-            field: "affectedProjectCount",
+            field: "affectedActiveProjectCount",
             class: "tight",
             sortable: false
           },

From a480d2545e995b2ddb54d5547c8bf17c84035808 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 31 Jan 2024 15:29:55 -0500
Subject: [PATCH 2/3] feat(vulnerabilities): enhance Vulnerabilities UI to be
 able to toggle affected projects by active/inactive

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/views/portfolio/vulnerabilities/AffectedProjects.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/portfolio/vulnerabilities/AffectedProjects.vue b/src/views/portfolio/vulnerabilities/AffectedProjects.vue
index c0cbcf9cd..890ca55da 100644
--- a/src/views/portfolio/vulnerabilities/AffectedProjects.vue
+++ b/src/views/portfolio/vulnerabilities/AffectedProjects.vue
@@ -68,7 +68,7 @@
           {
             title: this.$t('message.active'),
             field: "active",
-            formatter(value, row, index) {
+            formatter(value) {
               return value === true ? '<i class="fa fa-check-square-o" />' : "";
             },
             align: "center",

From 470769461409139947dcbc5713a4988c6bb0b8a7 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 31 Jan 2024 16:04:35 -0500
Subject: [PATCH 3/3] feat(vulnerabilities): enhance Vulnerabilities UI to be
 able to toggle affected projects by active/inactive

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/views/portfolio/vulnerabilities/AffectedProjects.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/portfolio/vulnerabilities/AffectedProjects.vue b/src/views/portfolio/vulnerabilities/AffectedProjects.vue
index 890ca55da..bc003f738 100644
--- a/src/views/portfolio/vulnerabilities/AffectedProjects.vue
+++ b/src/views/portfolio/vulnerabilities/AffectedProjects.vue
@@ -86,6 +86,7 @@
           queryParamsType: 'pageSize',
           pageList: '[10, 25, 50, 100]',
           pageSize: 10,
+          toolbar: '#projectsToolbar',
           icons: {
             refresh: 'fa-refresh'
           },