feature/debug-info (#286)

* rename 'ENV' to 'PRODUCTION' and default to true

* set env PRODUCTION

* refactor file download process

* add last_recipe.json and log downloads

* changelog + version bump

* set env on workflows

* bump version

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/api/api-utils.js

@@ -61,9 +61,16 @@ const apiReq = {
     processResponse(response);
     return response;
   },
+
+  async download(url) {
+    const response = await this.get(url);
+    const token = response.data.fileToken;
+
+    const tokenURL = baseURL + "utils/download?token=" + token;
+    window.open(tokenURL, "_blank");
+    return response.data;
+  },
 };
 
-
-
 export { apiReq };
 export { baseURL };

frontend/src/api/backup.js

@@ -4,7 +4,7 @@ import { store } from "@/store";
 
 const backupBase = baseURL + "backups/";
 
-const backupURLs = {
+export const backupURLs = {
   // Backup
   available: `${backupBase}available`,
   createBackup: `${backupBase}export/database`,
@@ -13,6 +13,8 @@ const backupURLs = {
   downloadBackup: fileName => `${backupBase}${fileName}/download`,
 };
 
+
+
 export const backupAPI = {
   /**
    * Request all backups available on the server
@@ -43,19 +45,19 @@ export const backupAPI = {
   /**
    * Creates a backup on the serve given a set of options
    * @param {object} data
-   * @returns 
+   * @returns
    */
   async create(options) {
     let response = apiReq.post(backupURLs.createBackup, options);
     return response;
   },
   /**
-   * Downloads a file from the server. I don't actually think this is used? 
-   * @param {string} fileName 
+   * Downloads a file from the server. I don't actually think this is used?
+   * @param {string} fileName
    * @returns Download URL
    */
   async download(fileName) {
-    let response = await apiReq.get(backupURLs.downloadBackup(fileName));
-    return response.data;
+    const url = backupURLs.downloadBackup(fileName);
+    apiReq.download(url);
   },
 };

frontend/src/components/Admin/Backup/ImportDialog.vue

@@ -37,14 +37,7 @@
         <v-divider></v-divider>
 
         <v-card-actions>
-          <v-btn
-            color="accent"
-            text
-            :loading="downloading"
-            @click="downloadFile(`/api/backups/${name}/download`)"
-          >
-            {{ $t("general.download") }}
-          </v-btn>
+          <TheDownloadBtn :download-url="downloadUrl" />
           <v-spacer></v-spacer>
           <v-btn color="error" text @click="raiseEvent('delete')">
             {{ $t("general.delete") }}
@@ -66,9 +59,10 @@
 
 <script>
 import ImportOptions from "@/components/Admin/Backup/ImportOptions";
-import axios from "axios";
+import TheDownloadBtn from "@/components/UI/TheDownloadBtn.vue";
+import { backupURLs } from "@/api/backup";
 export default {
-  components: { ImportOptions },
+  components: { ImportOptions, TheDownloadBtn },
   props: {
     name: {
       default: "Backup Name",
@@ -92,6 +86,11 @@ export default {
       downloading: false,
     };
   },
+  computed: {
+    downloadUrl() {
+      return backupURLs.downloadBackup(this.name);
+    },
+  },
   methods: {
     updateOptions(options) {
       this.options = options;
@@ -116,23 +115,6 @@ export default {
       this.close();
       this.$emit(event, eventData);
     },
-    async downloadFile(downloadURL) {
-      this.downloading = true;
-      const response = await axios({
-        url: downloadURL,
-        method: "GET",
-        responseType: "blob", // important
-      });
-
-      const url = window.URL.createObjectURL(new Blob([response.data]));
-      const link = document.createElement("a");
-      link.href = url;
-      link.setAttribute("download", `${this.name}.zip`);
-      document.body.appendChild(link);
-      link.click();
-
-      this.downloading = false;
-    },
   },
 };
 </script>

frontend/src/components/UI/TheDownloadBtn.vue

@@ -0,0 +1,51 @@
+<template>
+  <v-btn color="accent" text :loading="downloading" @click="downloadFile">
+    {{ showButtonText }}
+  </v-btn>
+</template>
+
+<script>
+/**
+ * The download button used for the entire site
+ * pass a URL to the endpoint that will return a
+ * file_token which will then be used to request the file
+ * from the server and open that link in a new tab
+ */
+import { apiReq } from "@/api/api-utils";
+export default {
+  props: {
+    /**
+     * URL to get token from
+     */
+    downloadUrl: {
+      default: "",
+    },
+    /**
+     * Override button text. Defaults to "Download"
+     */
+    buttonText: {
+      default: null,
+    },
+  },
+  data() {
+    return {
+      downloading: false,
+    };
+  },
+  computed: {
+    showButtonText() {
+      return this.buttonText || this.$t("general.download");
+    },
+  },
+  methods: {
+    async downloadFile() {
+      this.downloading = true;
+      await apiReq.download(this.downloadUrl);
+      this.downloading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/pages/Admin/About/index.vue

@@ -20,6 +20,17 @@
           </v-list-item>
         </v-list-item-group>
       </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <TheDownloadBtn
+          button-text="Download Recipe JSON"
+          download-url="/api/debug/last-recipe-json"
+        />
+        <TheDownloadBtn
+          button-text="Download Log"
+          download-url="/api/debug/log"
+        />
+      </v-card-actions>
       <v-divider></v-divider>
     </v-card>
   </div>
@@ -27,7 +38,9 @@
 
 <script>
 import { api } from "@/api";
+import TheDownloadBtn from "@/components/UI/TheDownloadBtn";
 export default {
+  components: { TheDownloadBtn },
   data() {
     return {
       prettyInfo: [],