Feature/database backups (#1040)

* add annotations to docs

* alchemy data dumper

* initial tests

* sourcery refactor

* db backups/restore

* potential postgres fix

* potential postgres fix

* this is terrible

* potential pg fix

* cleanup

* remove unused import

* fix comparison

* generate frontend types

* update timestamp and add directory filter

* rewrite to new admin-api

* update backup routers

* add file_token response helper

* update imports

* remove test_backup

frontend/api/admin-api.ts

@@ -2,26 +2,23 @@ import { AdminAboutAPI } from "./admin/admin-about";
 import { AdminTaskAPI } from "./admin/admin-tasks";
 import { AdminUsersApi } from "./admin/admin-users";
 import { AdminGroupsApi } from "./admin/admin-groups";
+import { AdminBackupsApi } from "./admin/admin-backups";
 import { ApiRequestInstance } from "~/types/api";
 
 export class AdminAPI {
-  private static instance: AdminAPI;
   public about: AdminAboutAPI;
   public serverTasks: AdminTaskAPI;
   public users: AdminUsersApi;
   public groups: AdminGroupsApi;
+  public backups: AdminBackupsApi;
 
   constructor(requests: ApiRequestInstance) {
-    if (AdminAPI.instance instanceof AdminAPI) {
-      return AdminAPI.instance;
-    }
-
     this.about = new AdminAboutAPI(requests);
     this.serverTasks = new AdminTaskAPI(requests);
     this.users = new AdminUsersApi(requests);
     this.groups = new AdminGroupsApi(requests);
+    this.backups = new AdminBackupsApi(requests);
 
     Object.freeze(this);
-    AdminAPI.instance = this;
   }
 }

frontend/api/admin/admin-backups.ts

@@ -0,0 +1,33 @@
+import { BaseAPI } from "../_base";
+import { AllBackups } from "~/types/api-types/admin";
+import { ErrorResponse, FileTokenResponse, SuccessResponse } from "~/types/api-types/response";
+
+const prefix = "/api";
+
+const routes = {
+  base: `${prefix}/admin/backups`,
+  item: (name: string) => `${prefix}/admin/backups/${name}`,
+  restore: (name: string) => `${prefix}/admin/backups/${name}/restore`,
+};
+
+export class AdminBackupsApi extends BaseAPI {
+  async getAll() {
+    return await this.requests.get<AllBackups>(routes.base);
+  }
+
+  async create() {
+    return await this.requests.post<SuccessResponse | ErrorResponse>(routes.base, {});
+  }
+
+  async get(fileName: string) {
+    return await this.requests.get<FileTokenResponse>(routes.item(fileName));
+  }
+
+  async delete(fileName: string) {
+    return await this.requests.delete<SuccessResponse | ErrorResponse>(routes.item(fileName));
+  }
+
+  async restore(fileName: string) {
+    return await this.requests.post<SuccessResponse | ErrorResponse>(routes.restore(fileName), {});
+  }
+}

frontend/api/class-interfaces/utils.ts

@@ -3,7 +3,7 @@ import { BaseAPI } from "../_base";
 const prefix = "/api";
 
 interface DownloadData {
-  fileToken: string,
+  fileToken: string;
 }
 
 export class UtilsAPI extends BaseAPI {

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -9,13 +9,12 @@
         <h3 v-if="showTitleEditor[index]" class="mt-2">{{ ingredient.title }}</h3>
         <v-divider v-if="showTitleEditor[index]"></v-divider>
         <v-list-item dense @click="toggleChecked(index)">
-          <v-checkbox hide-details :value="checked[index]" class="pt-0 my-auto py-auto" color="secondary"> </v-checkbox>
+          <v-checkbox hide-details :value="checked[index]" color="secondary" />
           <v-list-item-content>
             <VueMarkdown
               class="ma-0 pa-0 text-subtitle-1 dense-markdown"
               :source="parseIngredientText(ingredient, disableAmount, scale)"
-            >
-            </VueMarkdown>
+            />
           </v-list-item-content>
         </v-list-item>
       </div>
@@ -86,4 +85,13 @@ export default defineComponent({
 .dense-markdown p {
   margin: auto !important;
 }
+
+.v-input--selection-controls {
+  margin-top: 0.5rem;
+  margin-bottom: auto !important;
+}
+
+.v-input--selection-controls__input {
+  margin-bottom: auto !important;
+}
 </style>

frontend/pages/admin/backups.vue

@@ -1,9 +1,7 @@
-// TODO: Create a new datatable below to display the import summary json files saved on server (Need to do as well).
 <template>
   <v-container fluid>
+    <BannerExperimental issue="https://github.com/hay-kot/mealie/issues/871"></BannerExperimental>
     <section>
-      <BaseCardSectionTitle title="Site Backups"> </BaseCardSectionTitle>
-
       <!-- Delete Dialog -->
       <BaseDialog
         v-model="deleteDialog"
@@ -18,48 +16,44 @@
       </BaseDialog>
 
       <!-- Import Dialog -->
-      <BaseDialog
-        v-model="importDialog"
-        :title="selected.name"
-        :icon="$globals.icons.database"
-        :submit-text="$t('general.import')"
-        @submit="importBackup()"
-      >
+      <BaseDialog v-model="importDialog" color="error" title="Backup Restore" :icon="$globals.icons.database">
         <v-divider></v-divider>
         <v-card-text>
-          <AdminBackupImportOptions v-model="selected.options" class="mt-5 mb-2" :import-backup="true" />
-        </v-card-text>
+          Restoring this backup will overwrite all the current data in your database and in the data directory and
+          replace them with the contents of this backup. <b> This action cannot be undone - use with caution. </b> If
+          the restoration is successful, you will be logged out.
 
-        <v-divider></v-divider>
+          <v-checkbox
+            v-model="confirmImport"
+            class="checkbox-top"
+            color="error"
+            hide-details
+            label="I understand that this action is irreversible, destructive and may cause data loss"
+          ></v-checkbox>
+        </v-card-text>
+        <v-card-actions class="justify-center pt-0">
+          <BaseButton delete :disabled="!confirmImport" @click="restoreBackup(selected)">
+            <template #icon> {{ $globals.icons.database }} </template>
+            Restore Backup
+          </BaseButton>
+        </v-card-actions>
+        <p class="caption pb-0 mb-1 text-center">
+          {{ selected.name }}
+        </p>
       </BaseDialog>
 
-      <v-card outlined>
-        <v-card-title class="py-2"> {{ $t("settings.backup.create-heading") }} </v-card-title>
-        <v-divider class="mx-2"></v-divider>
-        <v-form @submit.prevent="createBackup()">
-          <v-card-text>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores molestiae alias incidunt fugiat!
-            Recusandae natus numquam iusto voluptates deserunt quia? Sed voluptate rem facilis tempora, perspiciatis
-            corrupti dolore obcaecati laudantium!
-            <div style="max-width: 300px">
-              <v-text-field
-                v-model="backupOptions.tag"
-                class="mt-4"
-                :label="$t('settings.backup.backup-tag') + ' (optional)'"
-              >
-              </v-text-field>
-              <AdminBackupImportOptions v-model="backupOptions.options" class="mt-5 mb-2" />
-              <v-divider class="my-3"></v-divider>
-            </div>
-            <v-card-actions>
-              <BaseButton type="submit"> </BaseButton>
-            </v-card-actions>
+      <section>
+        <BaseCardSectionTitle title="Backups">
+          <v-card-text class="py-0 px-1">
+            Backups a total snapshots of the database and data directory of the site. This includes all data and cannot
+            be set to exclude subsets of data. You can think off this as a snapshot of Mealie at a specific time.
+            Currently, this backup mechanism is not cross-version and therefore cannot be used to migrate data between
+            versions (data migrations are not done automatically). These serve as a database agnostic way to export and
+            import data or backup the site to an external location.
           </v-card-text>
-        </v-form>
-      </v-card>
+        </BaseCardSectionTitle>
+        <BaseButton @click="createBackup"> {{ $t("settings.backup.create-heading") }} </BaseButton>
 
-      <section class="mt-5">
-        <BaseCardSectionTitle title="Backups"></BaseCardSectionTitle>
         <v-data-table
           :headers="headers"
           :items="backups.imports || []"
@@ -93,7 +87,7 @@
             <AppButtonUpload
               :text-btn="false"
               class="mr-4"
-              url="/api/backups/upload"
+              url="/api/admin/backups/upload"
               accept=".zip"
               color="info"
               @uploaded="refreshBackups()"
@@ -102,24 +96,66 @@
         </div>
       </section>
     </section>
+    <v-container class="mt-4 d-flex justify-end">
+      <v-btn outlined rounded to="/user/group/data/migrations"> Looking For Migrations? </v-btn>
+    </v-container>
   </v-container>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
-import AdminBackupImportOptions from "@/components/Domain/Admin/AdminBackupImportOptions.vue";
-import { useBackups } from "~/composables/use-backups";
+import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { onMounted } from "vue-demi";
+import { useAdminApi } from "~/composables/api";
+import { AllBackups } from "~/types/api-types/admin";
 
 export default defineComponent({
-  components: { AdminBackupImportOptions },
   layout: "admin",
   setup() {
-    const { i18n } = useContext();
+    const { i18n, $auth } = useContext();
 
-    const { selected, backups, backupOptions, deleteTarget, refreshBackups, importBackup, createBackup, deleteBackup } =
-      useBackups();
+    const adminApi = useAdminApi();
+    const selected = ref("");
+
+    const backups = ref<AllBackups>({
+      imports: [],
+      templates: [],
+    });
+
+    async function refreshBackups() {
+      const { data } = await adminApi.backups.getAll();
+      if (data) {
+        backups.value = data;
+      }
+    }
+
+    async function createBackup() {
+      const { data } = await adminApi.backups.create();
+
+      if (!data?.error) {
+        refreshBackups();
+      }
+    }
+
+    async function restoreBackup(fileName: string) {
+      const { data } = await adminApi.backups.restore(fileName);
+
+      if (!data?.error) {
+        $auth.logout();
+      }
+    }
+
+    const deleteTarget = ref("");
+
+    async function deleteBackup() {
+      const { data } = await adminApi.backups.delete(deleteTarget.value);
+
+      if (!data?.error) {
+        refreshBackups();
+      }
+    }
 
     const state = reactive({
+      confirmImport: false,
       deleteDialog: false,
       createDialog: false,
       importDialog: false,
@@ -136,22 +172,23 @@ export default defineComponent({
       if (selected.value === null || selected.value === undefined) {
         return;
       }
-      selected.value.name = data.name;
+      selected.value = data.name;
       state.importDialog = true;
     }
 
-    const backupsFileNameDownload = (fileName: string) => `api/backups/${fileName}/download`;
+    const backupsFileNameDownload = (fileName: string) => `api/admin/backups/${fileName}`;
+
+    onMounted(refreshBackups);
 
     return {
+      restoreBackup,
       selected,
       ...toRefs(state),
-      backupOptions,
       backups,
       createBackup,
       deleteBackup,
-      setSelected,
       deleteTarget,
-      importBackup,
+      setSelected,
       refreshBackups,
       backupsFileNameDownload,
     };
@@ -163,6 +200,9 @@ export default defineComponent({
   },
 });
 </script>
-    
-<style scoped>
-</style>
+
+<style>
+.v-input--selection-controls__input {
+  margin-bottom: auto;
+}
+</style>

frontend/types/api-types/admin.ts

@@ -99,12 +99,12 @@ export interface RecipeSummary {
   dateUpdated?: string;
 }
 export interface RecipeCategory {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
 export interface RecipeTag {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }

frontend/types/api-types/cookbook.ts

@@ -24,7 +24,7 @@ export interface ReadCookBook {
   position?: number;
   categories?: CategoryBase[];
   groupId: string;
-  id: number;
+  id: string;
 }
 export interface RecipeCategoryResponse {
   name: string;
@@ -55,12 +55,12 @@ export interface RecipeSummary {
   dateUpdated?: string;
 }
 export interface RecipeCategory {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
 export interface RecipeTag {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
@@ -117,7 +117,7 @@ export interface RecipeCookBook {
   position?: number;
   categories: RecipeCategoryResponse[];
   groupId: string;
-  id: number;
+  id: string;
 }
 export interface SaveCookBook {
   name: string;
@@ -134,5 +134,5 @@ export interface UpdateCookBook {
   position?: number;
   categories?: CategoryBase[];
   groupId: string;
-  id: number;
+  id: string;
 }

frontend/types/api-types/group.ts

@@ -206,7 +206,7 @@ export interface ReadGroupPreferences {
   recipeDisableComments?: boolean;
   recipeDisableAmount?: boolean;
   groupId: string;
-  id: number;
+  id: string;
 }
 export interface ReadInviteToken {
   token: string;
@@ -219,7 +219,7 @@ export interface ReadWebhook {
   url?: string;
   time?: string;
   groupId: string;
-  id: number;
+  id: string;
 }
 export interface RecipeSummary {
   id?: string;
@@ -244,12 +244,12 @@ export interface RecipeSummary {
   dateUpdated?: string;
 }
 export interface RecipeCategory {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
 export interface RecipeTag {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }

frontend/types/api-types/meal-plan.ts

@@ -7,7 +7,7 @@
 
 export type PlanEntryType = "breakfast" | "lunch" | "dinner" | "side";
 export type PlanRulesDay = "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday" | "unset";
-export type PlanRulesType = "breakfast" | "lunch" | "dinner" | "unset";
+export type PlanRulesType = "breakfast" | "lunch" | "dinner" | "side" | "unset";
 
 export interface Category {
   id: string;
@@ -118,12 +118,12 @@ export interface RecipeSummary {
   dateUpdated?: string;
 }
 export interface RecipeCategory {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
 export interface RecipeTag {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }

frontend/types/api-types/recipe.ts

@@ -67,12 +67,12 @@ export interface CreateRecipeBulk {
   tags?: RecipeTag[];
 }
 export interface RecipeCategory {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
 export interface RecipeTag {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }

frontend/types/api-types/response.ts

@@ -10,6 +10,9 @@ export interface ErrorResponse {
   error?: boolean;
   exception?: string;
 }
+export interface FileTokenResponse {
+  file_token: string;
+}
 export interface SuccessResponse {
   message: string;
   error?: boolean;

frontend/types/api-types/user.ts

@@ -74,7 +74,7 @@ export interface ReadGroupPreferences {
   recipeDisableComments?: boolean;
   recipeDisableAmount?: boolean;
   groupId: string;
-  id: number;
+  id: string;
 }
 export interface LoingLiveTokenIn {
   name: string;
@@ -131,12 +131,12 @@ export interface RecipeSummary {
   dateUpdated?: string;
 }
 export interface RecipeCategory {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
 export interface RecipeTag {
-  id: string;
+  id?: string;
   name: string;
   slug: string;
 }
@@ -196,26 +196,12 @@ export interface SavePasswordResetToken {
   userId: string;
   token: string;
 }
-export interface SignUpIn {
-  name: string;
-  admin: boolean;
-}
-export interface SignUpOut {
-  name: string;
-  admin: boolean;
-  token: string;
-  id: number;
-}
-export interface SignUpToken {
-  name: string;
-  admin: boolean;
-  token: string;
-}
 export interface Token {
   access_token: string;
   token_type: string;
 }
 export interface TokenData {
+  user_id?: string;
   username?: string;
 }
 export interface UpdateGroup {