From 608e3f5582604e6a7079859bcf722d7c645a4245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Haugsb=C3=B8?= <mathiash98@gmail.com>
Date: Tue, 27 Dec 2022 23:26:05 +0100
Subject: [PATCH 1/7] Feature: Clone existing monitor

Closes #565
Closes #2319

Adds the feature of cloning existing monitor, I have briefly tested it with ping and https and ensured that all properties was cloned including notifications.
---
 src/languages/en.js       |  2 ++
 src/pages/Details.vue     |  3 +++
 src/pages/EditMonitor.vue | 27 ++++++++++++++++++++++++---
 src/router.js             |  4 ++++
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index e760f92ea..59ea0570d 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -57,6 +57,7 @@ export default {
     List: "List",
     Add: "Add",
     "Add New Monitor": "Add New Monitor",
+    "Clone Monitor": "Clone Monitor",
     "Quick Stats": "Quick Stats",
     Up: "Up",
     Down: "Down",
@@ -70,6 +71,7 @@ export default {
     "No important events": "No important events",
     Resume: "Resume",
     Edit: "Edit",
+    Clone: "Clone",
     Delete: "Delete",
     Current: "Current",
     Uptime: "Uptime",
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 6d6a8dd9c..40ed0358d 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -30,6 +30,9 @@
                     <router-link :to=" '/edit/' + monitor.id " class="btn btn-normal">
                         <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                     </router-link>
+                    <router-link :to=" '/clone/' + monitor.id " class="btn btn-normal">
+                        <font-awesome-icon icon="plus" /> {{ $t("Clone") }}
+                    </router-link>
                     <button class="btn btn-danger" @click="deleteDialog">
                         <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
                     </button>
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index c9d5ad2f1..f0c99b5b5 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -620,13 +620,23 @@ export default {
         },
 
         pageName() {
-            return this.$t((this.isAdd) ? "Add New Monitor" : "Edit");
+            let name = "Add New Monitor";
+            if (this.isClone) {
+                name = "Clone Monitor";
+            } else if (this.isEdit) {
+                name = "Edit";
+            }
+            return this.$t(name);
         },
 
         isAdd() {
             return this.$route.path === "/add";
         },
 
+        isClone() {
+            return this.$route.path.startsWith("/clone");
+        },
+
         isEdit() {
             return this.$route.path.startsWith("/edit");
         },
@@ -804,11 +814,22 @@ message HealthCheckResponse {
                         this.monitor.notificationIDList[this.$root.notificationList[i].id] = true;
                     }
                 }
-            } else if (this.isEdit) {
+            } else if (this.isEdit || this.isClone) {
                 this.$root.getSocket().emit("getMonitor", this.$route.params.id, (res) => {
                     if (res.ok) {
                         this.monitor = res.monitor;
 
+                        if (this.isClone) {
+                            /**
+                             * Cloning a monitor will include properties that can not be posted to backend
+                             * as they are not valid columns in the SQLite table.
+                             */
+                            this.monitor.id = undefined; // Remove id when cloning as we want a new id
+                            this.monitor.includeSensitiveData = undefined;
+                            this.monitor.maintenance = undefined;
+                            this.monitor.tags = undefined; // FIXME: Cloning tags does not work yet
+                        }
+
                         // Handling for monitors that are created before 1.7.0
                         if (this.monitor.retryInterval === 0) {
                             this.monitor.retryInterval = this.monitor.interval;
@@ -866,7 +887,7 @@ message HealthCheckResponse {
                 this.monitor.headers = JSON.stringify(JSON.parse(this.monitor.headers), null, 4);
             }
 
-            if (this.isAdd) {
+            if (this.isAdd || this.isClone) {
                 this.$root.add(this.monitor, async (res) => {
 
                     if (res.ok) {
diff --git a/src/router.js b/src/router.js
index 380488264..a5938c22d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -63,6 +63,10 @@ const routes = [
                                         path: "/edit/:id",
                                         component: EditMonitor,
                                     },
+                                    {
+                                        path: "/clone/:id",
+                                        component: EditMonitor,
+                                    },
                                 ],
                             },
                             {

From 4d0bdae6bf4ead2617f9b9f71e97e5edf0466d7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Haugsb=C3=B8?= <mathiash98@gmail.com>
Date: Tue, 27 Dec 2022 23:27:23 +0100
Subject: [PATCH 2/7] Add jsdoc for Tag type

Does not work properly but is still useful
---
 src/components/Tag.vue         | 10 ++++++++--
 src/components/TagsManager.vue | 20 +++++++++++++++++++-
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 0325d9900..705408b2d 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -18,9 +18,15 @@
 </template>
 
 <script>
+/**
+* @typedef {import('./TagsManager.vue').Tag} Tag
+*/
+
 export default {
     props: {
-        /** Object representing tag */
+        /** Object representing tag
+         * @type {Tag}
+         */
         item: {
             type: Object,
             required: true,
@@ -32,7 +38,7 @@ export default {
         },
         /**
          * Size of tag
-         * @values normal, small
+         * @type {"normal" | "small"}
          */
         size: {
             type: String,
diff --git a/src/components/TagsManager.vue b/src/components/TagsManager.vue
index 2958babe8..9de3208f1 100644
--- a/src/components/TagsManager.vue
+++ b/src/components/TagsManager.vue
@@ -133,13 +133,27 @@ import { useToast } from "vue-toastification";
 import Tag from "../components/Tag.vue";
 const toast = useToast();
 
+/**
+ * @typedef Tag
+ * @type {object}
+ * @property {number | undefined} id
+ * @property {number | undefined} monitor_id
+ * @property {number | undefined} tag_id
+ * @property {string} value
+ * @property {string} name
+ * @property {string} color
+ * @property {boolean | undefined} new
+ */
+
 export default {
     components: {
         Tag,
         VueMultiselect,
     },
     props: {
-        /** Array of tags to be pre-selected */
+        /** Array of tags to be pre-selected
+         * @type {Tag[]}
+         */
         preSelectedTags: {
             type: Array,
             default: () => [],
@@ -147,10 +161,14 @@ export default {
     },
     data() {
         return {
+            /** @type {Modal | null} */
             modal: null,
+            /** @type {Tag[]} */
             existingTags: [],
             processing: false,
+            /** @type {Tag[]} */
             newTags: [],
+            /** @type {Tag[]} */
             deleteTags: [],
             newDraftTag: {
                 name: null,

From 239910a27c77b77a67d111abe19ecc7fa5f06591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Haugsb=C3=B8?= <mathiash98@gmail.com>
Date: Mon, 2 Jan 2023 13:17:38 +0100
Subject: [PATCH 3/7] Change clone icon from plus to clone

Co-authored-by: Adam Stachowicz <saibamenppl@gmail.com>
---
 src/pages/Details.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index 40ed0358d..fce3fde59 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -31,7 +31,7 @@
                         <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                     </router-link>
                     <router-link :to=" '/clone/' + monitor.id " class="btn btn-normal">
-                        <font-awesome-icon icon="plus" /> {{ $t("Clone") }}
+                        <font-awesome-icon icon="clone" /> {{ $t("Clone") }}
                     </router-link>
                     <button class="btn btn-danger" @click="deleteDialog">
                         <font-awesome-icon icon="trash" /> {{ $t("Delete") }}

From 54cd7a040293714fcf6edd494e95becaa40b1219 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 25 Feb 2023 15:08:39 +0800
Subject: [PATCH 4/7] Merge manually

---
 src/lang/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lang/en.json b/src/lang/en.json
index 83bc22316..29bd0bb59 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -439,6 +439,8 @@
     "uninstalling": "Uninstalling",
     "confirmUninstallPlugin": "Are you sure want to uninstall this plugin?",
     "notificationRegional": "Regional",
+    "Clone Monitor": "Clone Monitor",
+    "Clone": "Clone",
     "smtp": "Email (SMTP)",
     "secureOptionNone": "None / STARTTLS (25, 587)",
     "secureOptionTLS": "TLS (465)",

From f9a6d7ec44b0e4cf4b3f7c8f572928b297a7cbd6 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 25 Feb 2023 16:19:48 +0800
Subject: [PATCH 5/7] Add a missing icon

---
 src/icon.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/icon.js b/src/icon.js
index 6cc997bbd..a69b2a88b 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -3,6 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
 // Add Free Font Awesome Icons
 // https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
+// In order to add an icon, you have to:
+// 1) add the icon name in the import statement below;
+// 2) add the icon name to the library.add() statement below.
 import {
     faArrowAltCircleUp,
     faCog,
@@ -45,6 +48,7 @@ import {
     faHeartbeat,
     faFilter,
     faInfoCircle,
+    faClone,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -90,6 +94,7 @@ library.add(
     faHeartbeat,
     faFilter,
     faInfoCircle,
+    faClone,
 );
 
 export { FontAwesomeIcon };

From 43c797a34e2d08300386a06da6c04c8b5b57efe3 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 25 Feb 2023 16:20:59 +0800
Subject: [PATCH 6/7] Do not active the old monitor in the clone page

---
 src/router.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/router.js b/src/router.js
index f1cf8a085..b9ee26318 100644
--- a/src/router.js
+++ b/src/router.js
@@ -65,12 +65,12 @@ const routes = [
                                         path: "/edit/:id",
                                         component: EditMonitor,
                                     },
-                                    {
-                                        path: "/clone/:id",
-                                        component: EditMonitor,
-                                    },
                                 ],
                             },
+                            {
+                                path: "/clone/:id",
+                                component: EditMonitor,
+                            },
                             {
                                 path: "/add",
                                 component: EditMonitor,

From 4fed0c152e901477a42481e5a016c9cae6456c44 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sat, 25 Feb 2023 17:05:03 +0800
Subject: [PATCH 7/7] Show `Copy of` in front of the cloned monitor name

---
 src/lang/en.json          | 1 +
 src/pages/EditMonitor.vue | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index 29bd0bb59..ad55fe6e8 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -441,6 +441,7 @@
     "notificationRegional": "Regional",
     "Clone Monitor": "Clone Monitor",
     "Clone": "Clone",
+    "cloneOf": "Clone of {0}",
     "smtp": "Email (SMTP)",
     "secureOptionNone": "None / STARTTLS (25, 587)",
     "secureOptionTLS": "TLS (465)",
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index e7ecb58ac..4a4ae9823 100644
--- a/src/pages/EditMonitor.vue
+++ b/src/pages/EditMonitor.vue
@@ -922,13 +922,14 @@ message HealthCheckResponse {
                         this.monitor = res.monitor;
 
                         if (this.isClone) {
-                            /**
-                             * Cloning a monitor will include properties that can not be posted to backend
-                             * as they are not valid columns in the SQLite table.
-                             */
+                            /*
+                         * Cloning a monitor will include properties that can not be posted to backend
+                         * as they are not valid columns in the SQLite table.
+                         */
                             this.monitor.id = undefined; // Remove id when cloning as we want a new id
                             this.monitor.includeSensitiveData = undefined;
                             this.monitor.maintenance = undefined;
+                            this.monitor.name = this.$t("cloneOf", [ this.monitor.name ]);
                             this.monitor.tags = undefined; // FIXME: Cloning tags does not work yet
                         }