Merge pull request #306 from Ponkhy/import-export

Added import and export function

src/languages/de-DE.js

@@ -113,11 +113,19 @@ export default {
     "Create your admin account": "Erstelle dein Admin Konto",
     "Repeat Password": "Wiederhole das Passwort",
     "Resource Record Type": "Resource Record Type",
+    "Import/Export Backup": "Import/Export Backup",
+    "Export": "Export",
+    "Import": "Import",
     respTime: "Antw. Zeit (ms)",
     notAvailableShort: "N/A",
     "Default enabled": "Standardmäßig aktiviert",
     "Also apply to existing monitors": "Auch für alle existierenden Monitore aktivieren",
     enableDefaultNotificationDescription: "Für jeden neuen Monitor wird diese Benachrichtigung standardmäßig aktiviert. Die Benachrichtigung kann weiterhin für jeden Monitor separat deaktiviert werden.",
     Create: "Erstellen",
-    "Auto Get": "Auto Get"
+    "Auto Get": "Auto Get",
+    backupDescription: "Es können alle Monitore und alle Benachrichtigungen in einer JSON-Datei gesichert werden.",
+    backupDescription2: "PS: Verlaufs- und Ereignisdaten sind nicht enthalten.",
+    backupDescription3: "Sensible Daten wie Benachrichtigungstoken sind in der Exportdatei enthalten, bitte bewahre sie sorgfältig auf.",
+    alertNoFile: "Bitte wähle eine Datei zum importieren aus.",
+    alertWrongFileType: "Bitte wähle eine JSON Datei aus.",
 }

src/languages/en.js

@@ -111,6 +111,9 @@ export default {
     "Last Result": "Last Result",
     "Create your admin account": "Create your admin account",
     "Repeat Password": "Repeat Password",
+    "Import/Export Backup": "Import/Export Backup",
+    "Export": "Export",
+    "Import": "Import",
     respTime: "Resp. Time (ms)",
     notAvailableShort: "N/A",
     "Default enabled": "Default enabled",
@@ -119,5 +122,10 @@ export default {
     "Clear Data": "Clear Data",
     Events: "Events",
     Heartbeats: "Heartbeats",
-    "Auto Get": "Auto Get"
+    "Auto Get": "Auto Get",
+    backupDescription: "You can backup all monitors and all notifications into a JSON file.",
+    backupDescription2: "PS: History and event data is not included.",
+    backupDescription3: "Sensitive data such as notification tokens is included in the export file, please keep it carefully.",
+    alertNoFile: "Please select a file to import.",
+    alertWrongFileType: "Please select a JSON file.",
 }

src/mixins/socket.js

@@ -254,6 +254,10 @@ export default {
             this.importantHeartbeatList = {}
         },
 
+        uploadBackup(uploadedJSON, callback) {
+            socket.emit("uploadBackup", uploadedJSON, callback)
+        },
+
         clearEvents(monitorID, callback) {
             socket.emit("clearEvents", monitorID, callback)
         },

src/pages/Settings.vue

@@ -120,6 +120,27 @@
                                 </form>
                             </template>
 
+                            <h2 class="mt-5 mb-2">{{ $t("Import/Export Backup") }}</h2>
+
+                            <p>
+                                {{ $t("backupDescription") }} <br />
+                                ({{ $t("backupDescription2") }}) <br />
+                            </p>
+
+                            <div class="input-group mb-3">
+                                <button class="btn btn-outline-primary" @click="downloadBackup">{{ $t("Export") }}</button>
+                                <button type="button" class="btn btn-outline-primary" :disabled="processing" @click="importBackup">
+                                    <div v-if="processing" class="spinner-border spinner-border-sm me-1"></div>
+                                    {{ $t("Import") }}
+                                </button>
+                                <input id="importBackup" type="file" class="form-control" accept="application/json">
+                            </div>
+                            <div v-if="importAlert" class="alert alert-danger mt-3" style="padding: 6px 16px;">
+                                {{ importAlert }}
+                            </div>
+
+                            <p><strong>{{ $t("backupDescription3") }}</strong></p>
+
                             <h2 class="mt-5 mb-2">{{ $t("Advanced") }}</h2>
 
                             <div class="mb-3">
@@ -275,6 +296,8 @@ export default {
 
             },
             loaded: false,
+            importAlert: null,
+            processing: false,
         }
     },
     watch: {
@@ -351,6 +374,52 @@ export default {
             this.$root.storage().removeItem("token");
         },
 
+        downloadBackup() {
+            let time = dayjs().format("YYYY_MM_DD-hh_mm_ss");
+            let fileName = `Uptime_Kuma_Backup_${time}.json`;
+            let monitorList = Object.values(this.$root.monitorList);
+            let exportData = {
+                version: this.$root.info.version,
+                notificationList: this.$root.notificationList,
+                monitorList: monitorList,
+            }
+            exportData = JSON.stringify(exportData);
+            let downloadItem = document.createElement("a");
+            downloadItem.setAttribute("href", "data:application/json;charset=utf-8," + encodeURI(exportData));
+            downloadItem.setAttribute("download", fileName);
+            downloadItem.click();
+        },
+
+        importBackup() {
+            this.processing = true;
+            let uploadItem = document.getElementById("importBackup").files;
+
+            if (uploadItem.length <= 0) {
+                this.processing = false;
+                return this.importAlert = this.$t("alertNoFile")
+            }
+
+            if (uploadItem.item(0).type !== "application/json") {
+                this.processing = false;
+                return this.importAlert = this.$t("alertWrongFileType")
+            }
+
+            let fileReader = new FileReader();
+            fileReader.readAsText(uploadItem.item(0));
+
+            fileReader.onload = item => {
+                this.$root.uploadBackup(item.target.result, (res) => {
+                    this.processing = false;
+
+                    if (res.ok) {
+                        toast.success(res.msg);
+                    } else {
+                        toast.error(res.msg);
+                    }
+                })
+            }
+        },
+
         clearStatistics() {
             this.$root.clearStatistics((res) => {
                 if (res.ok) {
@@ -388,6 +457,18 @@ export default {
     .btn-check:hover + .btn-outline-primary {
         color: #000;
     }
+
+    #importBackup {
+        &::file-selector-button {
+            color: $primary;
+            background-color: $dark-bg;
+        }
+
+        &:hover:not(:disabled):not([readonly])::file-selector-button {
+            color: $dark-font-color2;
+            background-color: $primary;
+        }
+    }
 }
 
 footer {