From 5eb7c8c1c72661a85295a9ec17ee45bbf8b07afe Mon Sep 17 00:00:00 2001
From: john0030710 <john0030710@gmail.com>
Date: Mon, 12 Jan 2026 04:11:22 +0100
Subject: [PATCH] feat: Add bulk delete functionality for selected monitors

- Add delete button to multi-select controls in MonitorList
- Implement deleteSelected() method to delete multiple monitors
- Add confirmation dialog for bulk delete operations
- Add deleteSelectedMonitorsMsg translation key
- Style delete button with danger styling for better UX

Fixes #6641
---
 src/components/MonitorList.vue | 39 ++++++++++++++++++++++++++++++++++
 src/lang/en.json               |  1 +
 2 files changed, 40 insertions(+)

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index c77eed02c..8c748af28 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -46,6 +46,10 @@
                     <font-awesome-icon icon="play" size="sm" />
                     {{ $t("Resume") }}
                 </button>
+                <button class="btn-outline-normal btn-danger" @click="deleteDialog">
+                    <font-awesome-icon icon="trash" size="sm" />
+                    {{ $t("Delete") }}
+                </button>
 
                 <span v-if="selectedMonitorCount > 0">
                     {{ $t("selectedMonitorCount", [selectedMonitorCount]) }}
@@ -81,6 +85,10 @@
     <Confirm ref="confirmPause" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="pauseSelected">
         {{ $t("pauseMonitorMsg") }}
     </Confirm>
+
+    <Confirm ref="confirmDelete" :yes-text="$t('Yes')" :no-text="$t('No')" @yes="deleteSelected">
+        {{ $t("deleteSelectedMonitorsMsg") }}
+    </Confirm>
 </template>
 
 <script>
@@ -302,6 +310,13 @@ export default {
         pauseDialog() {
             this.$refs.confirmPause.show();
         },
+        /**
+         * Show dialog to confirm delete
+         * @returns {void}
+         */
+        deleteDialog() {
+            this.$refs.confirmDelete.show();
+        },
         /**
          * Pause each selected monitor
          * @returns {void}
@@ -324,6 +339,20 @@ export default {
 
             this.cancelSelectMode();
         },
+        /**
+         * Delete each selected monitor
+         * @returns {void}
+         */
+        deleteSelected() {
+            const selectedIds = Object.keys(this.selectedMonitors);
+            
+            // Delete each selected monitor
+            selectedIds.forEach((id) => {
+                this.$root.deleteMonitor(id, false, () => {});
+            });
+
+            this.cancelSelectMode();
+        },
         /**
          * Whether a monitor should be displayed based on the filters
          * @param {object} monitor Monitor to check
@@ -504,4 +533,14 @@ export default {
     align-items: center;
     gap: 10px;
 }
+
+.btn-danger {
+    color: #dc3545;
+    border-color: #dc3545;
+}
+
+.btn-danger:hover {
+    background-color: #dc3545;
+    color: white;
+}
 </style>
diff --git a/src/lang/en.json b/src/lang/en.json
index d7e7ad0fb..f0be9c41f 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -624,6 +624,7 @@
     "grpcMethodDescription": "Method name is convert to camelCase format such as sayHello, check, etc.",
     "acceptedStatusCodesDescription": "Select status codes which are considered as a successful response.",
     "deleteMonitorMsg": "Are you sure want to delete this monitor?",
+    "deleteSelectedMonitorsMsg": "Are you sure want to delete selected monitors?",
     "deleteGroupMsg": "Are you sure you want to delete this group?",
     "deleteChildrenMonitors": "Also delete the direct child monitors and its children if it has any | Also delete all {count} direct child monitors and their children if they have any",
     "deleteMaintenanceMsg": "Are you sure want to delete this maintenance?",