feat: enhance monitor deletion functionality by adding child deletion… (#6314)

Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/lang/en.json

@@ -596,6 +596,8 @@
     "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?",
+    "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?",
     "deleteNotificationMsg": "Are you sure want to delete this notification for all monitors?",
     "dnsPortDescription": "DNS server port. Defaults to 53. You can change the port at any time.",

src/mixins/socket.js

@@ -602,11 +602,12 @@ export default {
         /**
          * Delete monitor by ID
          * @param {number} monitorID ID of monitor to delete
+         * @param {boolean} deleteChildren Whether to delete child monitors (for groups)
          * @param {socketCB} callback Callback for socket response
          * @returns {void}
          */
-        deleteMonitor(monitorID, callback) {
-            socket.emit("deleteMonitor", monitorID, callback);
+        deleteMonitor(monitorID, deleteChildren, callback) {
+            socket.emit("deleteMonitor", monitorID, deleteChildren, callback);
         },
 
         /**

src/pages/Details.vue

@@ -441,7 +441,23 @@
                 :no-text="$t('No')"
                 @yes="deleteMonitor"
             >
-                {{ $t("deleteMonitorMsg") }}
+                <div v-if="monitor && monitor.type === 'group'">
+                    <div>{{ $t("deleteGroupMsg") }}</div>
+                    <div v-if="hasChildren" class="form-check">
+                        <input
+                            id="delete-children-checkbox"
+                            v-model="deleteChildrenMonitors"
+                            class="form-check-input"
+                            type="checkbox"
+                        >
+                        <label class="form-check-label" for="delete-children-checkbox">
+                            {{ $t("deleteChildrenMonitors", childrenCount, { count: childrenCount }) }}
+                        </label>
+                    </div>
+                </div>
+                <div v-else>
+                    {{ $t("deleteMonitorMsg") }}
+                </div>
             </Confirm>
 
             <Confirm
@@ -530,6 +546,7 @@ export default {
                 currentExample: "javascript-fetch",
                 code: "",
             },
+            deleteChildrenMonitors: false,
         };
     },
     computed: {
@@ -538,6 +555,26 @@ export default {
             return this.$root.monitorList[id];
         },
 
+        /**
+         * Get the count of children monitors for this group
+         * @returns {number} Number of children monitors
+         */
+        childrenCount() {
+            if (!this.monitor || this.monitor.type !== "group") {
+                return 0;
+            }
+            const children = Object.values(this.$root.monitorList).filter(m => m.parent === this.monitor.id);
+            return children.length;
+        },
+
+        /**
+         * Check if the monitor is a group and has children
+         * @returns {boolean} True if monitor is a group with children
+         */
+        hasChildren() {
+            return this.childrenCount > 0;
+        },
+
         lastHeartBeat() {
             // Also trigger screenshot refresh here
             // eslint-disable-next-line vue/no-side-effects-in-computed-properties
@@ -752,7 +789,7 @@ export default {
          * @returns {void}
          */
         deleteMonitor() {
-            this.$root.deleteMonitor(this.monitor.id, (res) => {
+            this.$root.deleteMonitor(this.monitor.id, this.deleteChildrenMonitors, (res) => {
                 this.$root.toastRes(res);
                 if (res.ok) {
                     this.$router.push("/dashboard");
@@ -937,6 +974,10 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
+.form-check {
+    margin-top: 16px;
+}
+
 @media (max-width: 767px) {
     .badge {
         margin-top: 14px;