Merge pull request #723 from setchy/feature/vulnerabilities-active-inactive-toggle

feat(vulnerabilities): support active/inactive affected projects

Author: nscuro

src/views/portfolio/vulnerabilities/AffectedProjects.vue

@@ -1,26 +1,45 @@
 <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,
       vulnerability: String
     },
     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) {
+              return value === true ? '<i class="fa fa-check-square-o" />' : "";
+            },
+            align: "center",
+            sortable: true
           }
         ],
         data: [],
@@ -58,17 +86,47 @@
           queryParamsType: 'pageSize',
           pageList: '[10, 25, 50, 100]',
           pageSize: 10,
+          toolbar: '#projectsToolbar',
           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>

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
           },