minor ui improvements

PeCoReT · Jun 4, 2024 · 44f876a · 44f876a
1 parent 6bca0f9
commit 44f876a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/frontend/src/service/ASMonitorService.js b/frontend/src/service/ASMonitorService.js
@@ -225,8 +225,8 @@ export default class ASMonitorService {
         return api.get(url, config);
     }
 
-    deletePort(api, programId, hostId, id) {
-        let url = `/asmonitor/programs/${programId}/targets/${hostId}/port/${id}/`;
+    deletePort(api, id) {
+        let url = `/attack-surface/ports/${id}/`;
         return api.delete(url);
     }
 

diff --git a/frontend/src/views/pages/attack_surface/PortList.vue b/frontend/src/views/pages/attack_surface/PortList.vue
@@ -18,6 +18,8 @@ export default {
             loading: false,
             pagination: { limit: 25, page: 1 },
             totalRecords: 0,
+            deleteButtonLoading: false,
+            selectedItems: [],
             filters: {
                 port: { value: null },
                 'target.program.name': { value: null },
@@ -67,21 +69,26 @@ export default {
                 this.totalRecords = resp.data.count;
             });
         },
-        confirmDialogDelete(id) {
+        bulkDeleteConfirm() {
             this.$confirm.require({
-                message: 'Do you want to remove this port?',
+                message: 'Do you want to delete all selected items?',
                 header: 'Delete confirmation',
                 icon: 'fa fa-trash',
                 acceptClass: 'p-button-danger',
                 accept: () => {
-                    this.service.deletePort(this.$api, id).then(() => {
-                        this.$toast.add({
-                            severity: 'info',
-                            summary: 'Deleted',
-                            detail: 'Port was removed!',
-                            life: 3000
+                    this.deleteButtonLoading = true;
+                    this.loading = true;
+                    let itemsDeleted = 0;
+                    this.selectedItems.forEach((item) => {
+                        this.service.deletePort(this.$api, item.pk).then(() => {
+                            itemsDeleted++;
+                            if (itemsDeleted === this.selectedItems.length) {
+                                this.loading = false;
+                                this.deleteButtonLoading = false;
+                                this.selectedItems = [];
+                                this.getItems();
+                            }
                         });
-                        this.getItems();
                     });
                 }
             });
@@ -97,9 +104,9 @@ export default {
                 :total-records="totalRecords"
                 :loading="loading"
                 :pagination="pagination"
-                blank-slate-text="No urls found!"
-                blank-slate-title="No URLs"
-                blank-slate-icon="fa fa-sitemap"
+                blank-slate-text="No ports found!"
+                blank-slate-title="No Ports"
+                blank-slate-icon="fa fa-circle-nodes"
                 :model-value="items"
                 :show-search="true"
                 @search="onSearch"
@@ -108,7 +115,12 @@ export default {
                 v-model:filters="filters"
                 @filter="getItems"
                 filter-display="menu"
+                v-model:selection="selectedItems"
             >
+                <template #bulk-edit>
+                    <Button v-if="selectedItems.length > 0" icon="fa fa-trash" outlined severity="danger" @click="bulkDeleteConfirm" class="ml-2"></Button>
+                </template>
+                <Column selection-mode="multiple" headerStyle=""></Column>
                 <Column field="port" header="Port" :show-filter-match-modes="false">
                     <template #filter="{ filterModel }">
                         <InputText v-model="filterModel.value"></InputText>

diff --git a/frontend/src/views/pages/attack_surface/URLList.vue b/frontend/src/views/pages/attack_surface/URLList.vue
@@ -21,7 +21,8 @@ export default {
             totalRecords: 0,
             techChoices: [],
             techService: new TechnologyService(),
-
+            selectedItems: [],
+            deleteButtonLoading: false,
             filters: {
                 technologies: { value: null }
             },
@@ -93,21 +94,26 @@ export default {
                 params: { urlId: row.data.pk }
             });
         },
-        confirmDialogDelete(id) {
+        bulkDeleteConfirm() {
             this.$confirm.require({
-                message: 'Do you want to remove this url?',
+                message: 'Do you want to delete all selected items?',
                 header: 'Delete confirmation',
                 icon: 'fa fa-trash',
                 acceptClass: 'p-button-danger',
                 accept: () => {
-                    this.service.deleteURL(this.$api, id).then(() => {
-                        this.$toast.add({
-                            severity: 'info',
-                            summary: 'Deleted',
-                            detail: 'URL was removed!',
-                            life: 3000
+                    this.deleteButtonLoading = true;
+                    this.loading = true;
+                    let itemsDeleted = 0;
+                    this.selectedItems.forEach((item) => {
+                        this.service.deleteURL(this.$api, item.pk).then(() => {
+                            itemsDeleted++;
+                            if (itemsDeleted === this.selectedItems.length) {
+                                this.loading = false;
+                                this.deleteButtonLoading = false;
+                                this.selectedItems = [];
+                                this.getItems();
+                            }
                         });
-                        this.getItems();
                     });
                 }
             });
@@ -138,7 +144,12 @@ export default {
                 @filter="getItems"
                 @row-click="onRowClick"
                 filter-display="menu"
+                v-model:selection="selectedItems"
             >
+                <template #bulk-edit>
+                    <Button v-if="selectedItems.length > 0" icon="fa fa-trash" outlined severity="danger" @click="bulkDeleteConfirm" class="ml-2"></Button>
+                </template>
+                <Column selection-mode="multiple" headerStyle=""></Column>
                 <Column field="url" header="URL">
                     <template #body="slotProps">
                         <span v-if="slotProps.data.url.length > 120" v-tooltip="slotProps.data.url">{{ slotProps.data.url.substring(0, 120) }}...</span>