Merge pull request #675 from openWB/feature-enhanced-log-card

benderl · web-flow · commit 13127e5200ea · 2025-03-26T11:37:14.000+01:00
Feature enhanced log card
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "mqtt": "^4.3.8",
+    "pako": "^2.1.0",
     "popper.js": "^1.16.1",
     "stream-browserify": "^3.0.0",
     "url": "^0.11.4",
diff --git a/src/components/OpenwbBaseCard.vue b/src/components/OpenwbBaseCard.vue
@@ -97,15 +97,18 @@ export default {
     collapsible: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },
   },
+  emits: ["collapsed", "expanded"],
   data() {
     return {
       isCollapsed: this.collapsible && this.collapsed,
     };
   },
+
   methods: {
     toggleBody() {
       if (this.collapsible === true) {
         this.isCollapsed = !this.isCollapsed;
+        this.$emit(this.isCollapsed ? "collapsed" : "expanded");
       }
     },
   },
diff --git a/src/components/debug_config/LogCard.vue b/src/components/debug_config/LogCard.vue
@@ -4,29 +4,81 @@
     class="log-card"
     :collapsible="true"
     :collapsed="true"
+    @expanded="onCardExpand"
   >
-    <template #actions>
+    <template #actions="{ collapsed }">
       <openwb-base-avatar
-        class="bg-success clickable"
-        @click.stop="loadLog(logFile)"
+        v-if="!collapsed"
+        class="clickable mr-1"
+        :class="pastebinLink ? 'bg-success' : 'bg-info'"
+        @click.stop="postToPastebin"
+      >
+        <font-awesome-icon
+          fixed-width
+          :icon="pastebinLink ? ['fas', 'check'] : ['fas', 'share-nodes']"
+          :title="pastebinLink ? 'Link in die Zwischenablage kopiert' : 'Log auf paste.openwb.de teilen'"
+        />
+      </openwb-base-avatar>
+      <openwb-base-avatar
+        v-if="!collapsed"
+        class="clickable mr-1"
+        :class="copyMessage ? 'bg-success' : 'bg-info'"
+        @click.stop="copyToClipboard(logData)"
+      >
+        <font-awesome-icon
+          fixed-width
+          :icon="copyMessage ? ['fas', 'check'] : ['fas', 'clipboard']"
+          :title="copyMessage ? 'Log in die Zwischenablage kopiert' : 'Log kopieren'"
+        />
+      </openwb-base-avatar>
+      <openwb-base-avatar
+        v-if="!collapsed"
+        class="clickable"
+        :class="loading ? 'bg-success' : 'bg-info'"
+        @click.stop="loadLog(logFile, selectedVariant)"
       >
         <font-awesome-icon
           fixed-width
           :class="loading ? 'fa-spin-pulse' : ''"
           :icon="loading ? ['fas', 'spinner'] : ['fas', 'file-download']"
+          title="Log laden/aktualisieren"
         />
       </openwb-base-avatar>
     </template>
+    <openwb-base-alert
+      v-if="foundFiles.length > 0"
+      subtype="info"
+    >
+      Im {{ title }} stehen unterschiedliche Logauszüge zur Verfügung. Standardmässig werden Logs der letzten 3
+      Durchläufe geladen, für viele Fälle sollte dies ausreichen. Optional kann auch das gesamte Log geladen werden.<br />
+      Wurde eine Warnung oder ein Fehler protokolliert steht zusätzlich der letzte Durchlauf mit Warnungen und Fehlern
+      zur Verfügung.<br />
+      <openwb-base-select-input
+        v-model="selectedVariant"
+        title="Logfile"
+        required
+        :options="foundFiles.map((file) => ({ value: file.suffix, text: file.title }))"
+        @change="loadLog(logFile, selectedVariant)"
+      />
+    </openwb-base-alert>
     <pre class="log-data mb-0">{{ logData }}</pre>
   </openwb-base-card>
 </template>
 
 <script>
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faFileDownload as fasFileDownload, faSpinner as fasSpinner } from "@fortawesome/free-solid-svg-icons";
+import {
+  faClipboard as fasClipboard,
+  faFileDownload as fasFileDownload,
+  faSpinner as fasSpinner,
+  faShareNodes as fasShareNodes,
+  faCheck as fasCheck,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import axios from "axios";
+import pako from "pako";
 
-library.add(fasFileDownload, fasSpinner);
+library.add(fasFileDownload, fasSpinner, fasClipboard, fasShareNodes, fasCheck);
 
 export default {
   name: "OpenwbLogCard",
@@ -47,22 +99,35 @@ export default {
     return {
       logData: "-- noch nicht geladen --",
       loading: false,
+      foundFiles: [], // Array to store found files with title, suffix, and description
+      selectedVariant: "", // Selected file variant
+      copyMessage: false, // Flag to show copy message
+      pastebinLink: "", // Link to the pastebin entry
     };
   },
   methods: {
-    async getFilePromise(myFile, ignore404 = false) {
-      return this.axios
-        .get(location.protocol + "//" + location.host + myFile)
+    async getFilePromise(myFile, ignore404 = false, handleError = true, useHead = false) {
+      const requestMethod = useHead ? "head" : "get";
+      return axios[requestMethod](location.protocol + "//" + location.host + myFile)
         .then((response) => {
-          return response.data;
+          if (useHead) {
+            // If the request is successful, the file exists
+            return true;
+          } else {
+            const data = response.data;
+            return data ? data : "log file is empty";
+          }
         })
         .catch((error) => {
+          if (!handleError) {
+            throw error;
+          }
           if (error.response) {
-            // The request was made and the server responded with a status code
+            // The request was made but the server responded with a status code
             // that falls out of the range of 2xx
             if (error.response.status == 404 && ignore404) {
               // ignore a 404 if requested, used for rotated log files which may not exist yet
-              return "";
+              return useHead ? false : "";
             }
             return (
               "A 404 is expected if running node.js dev server!\n" +
@@ -83,10 +148,14 @@ export default {
           }
         });
     },
-    async loadLog(fileName) {
+    async loadLog(fileName, fileNameVariant = "") {
       this.logData = "wird aktualisiert...";
       this.loading = true;
+      this.pastebinLink = ""; // Clear the pastebin link
       var logContents = "";
+      if (fileNameVariant) {
+        fileName = fileName.replace(".log", `.${fileNameVariant}.log`);
+      }
 
       for (let i = 4; i >= 1; i--) {
         const result = await this.getFilePromise(fileName + "." + i, true);
@@ -99,6 +168,109 @@ export default {
       this.logData = logContents;
       this.loading = false;
     },
+    async checkLatestLog(fileName) {
+      // Define file name variations
+      const fileVariations = [
+        { suffix: "latest", title: "Letzten 3 Durchläufe", description: "Logs der Letzten 3 Durchläufe laden" },
+        { suffix: "current", title: "Letzter Durchlauf", description: "Logs des letzten Durchlaufs laden" },
+        {
+          suffix: "latest-warning",
+          title: "Letzter Durchlauf mit Warnung oder Fehler",
+          description: "Fehlerprotokoll laden",
+        },
+        // Add more variations as needed
+      ];
+      // Check for the existence of the .latest log file
+      this.foundFiles = [];
+      for (const variation of fileVariations) {
+        const variantFileName = fileName.replace(".log", `.${variation.suffix}.log`);
+        try {
+          await this.getFilePromise(variantFileName, false, false, true);
+          this.foundFiles.push(variation);
+          if (variation.suffix === "latest") {
+            this.selectedVariant = "latest";
+            console.log("Found latest log file: ", variantFileName);
+          }
+        } catch (error) {
+          console.log(error);
+        }
+      }
+      if (this.foundFiles.length > 0) {
+        this.foundFiles.push({
+          suffix: "",
+          title: "Vollständiges Log",
+          description: "Vollständiges Log laden",
+        });
+      }
+    },
+    async onCardExpand() {
+      await this.checkLatestLog(this.logFile);
+      this.loadLog(this.logFile, this.selectedVariant);
+    },
+    copyToClipboard(text = this.logData, showMessage = true) {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard
+          .writeText(text)
+          .then(() => {
+            if (showMessage) {
+              this.showCopyMessage();
+            }
+          })
+          .catch((err) => {
+            console.error("Fehler beim Kopieren in die Zwischenablage: ", err);
+          });
+      } else {
+        // Fallback method for older browsers and non-HTTPS contexts
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          if (showMessage) {
+            this.showCopyMessage();
+          }
+        } catch (err) {
+          console.error("Fehler beim Kopieren in die Zwischenablage: ", err);
+        }
+        document.body.removeChild(textArea);
+      }
+    },
+    showCopyMessage() {
+      this.copyMessage = true;
+      this.$root.postClientMessage("Log in die Zwischenablage kopiert.", "info");
+      setTimeout(() => {
+        this.copyMessage = false;
+      }, 3000); // Message disappears after 3 seconds
+    },
+    async postToPastebin() {
+      try {
+        // Compress the log data using gzip
+        const compressedData = pako.gzip(this.logData);
+
+        const response = await axios.post("https://bytebin.openwb.de/post", compressedData, {
+          headers: {
+            "Content-Type": "text/log",
+            "Content-Encoding": "gzip",
+          },
+        });
+
+        if (!response.data.key) {
+          throw new Error("Key is missing in the response");
+        }
+
+        const pastebinKey = response.data.key;
+        this.pastebinLink = `https://paste.openwb.de/${pastebinKey}`;
+        console.log("Pastebin link:", this.pastebinLink);
+        this.copyToClipboard(this.pastebinLink, false);
+        this.$root.postClientMessage(
+          `Log an Pastebin gesendet.<br>Key: <a href='${this.pastebinLink}' target='_blank' rel='noopener noreferrer'>${pastebinKey}</a><br>Der Link wurde in die Zwischenablage kopiert.`,
+          "info",
+        );
+      } catch (error) {
+        console.error("Fehler beim Posten auf paste.openwb.de: ", error);
+      }
+    },
   },
 };
 </script>
