From e95e785f1c61029a299ecc1eb9e80bb9f7218b53 Mon Sep 17 00:00:00 2001
From: Joao Mario Lago <joao.mario.lago@hotmail.com>
Date: Thu, 17 Oct 2024 11:40:44 -0300
Subject: [PATCH] core:frontend:ExtManagerView: Allows download log

* Allows users to download streamed logs from ext as files, even when
  container is reconnecting small pieces of logs that it was able to
  stream will be at the file
---
 .../src/views/ExtensionManagerView.vue        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/core/frontend/src/views/ExtensionManagerView.vue b/core/frontend/src/views/ExtensionManagerView.vue
index 942944caf0..872ad54e97 100644
--- a/core/frontend/src/views/ExtensionManagerView.vue
+++ b/core/frontend/src/views/ExtensionManagerView.vue
@@ -39,11 +39,14 @@
             label="Follow Logs"
             hide-details
           />
+          <v-btn class="ml-3" icon @click="downloadCurrentLog">
+            <v-icon>mdi-download</v-icon>
+          </v-btn>
         </v-app-bar>
         <v-sheet>
           <v-card-text ref="logContainer" class="scrollable-content">
             <!-- eslint-disable -->
-            <pre class="logs" v-html="log_output" />
+            <pre class="logs" v-html="html_log_output" />
             <!-- eslint-enable -->
           </v-card-text>
         </v-sheet>
@@ -178,6 +181,7 @@
 <script lang="ts">
 import AnsiUp from 'ansi_up'
 import axios, { CancelTokenSource } from 'axios'
+import { saveAs } from 'file-saver'
 import Vue from 'vue'
 
 import NotSafeOverlay from '@/components/common/NotSafeOverlay.vue'
@@ -204,8 +208,8 @@ import {
 } from '../types/kraken'
 
 const API_URL = '/kraken/v1.0'
-
 const notifier = new Notifier(kraken_service)
+const ansi = new AnsiUp()
 
 export default Vue.extend({
   name: 'ExtensionManagerView',
@@ -244,6 +248,7 @@ export default Vue.extend({
       log_abort_controller: null as null | CancelTokenSource,
       log_output: null as null | string,
       log_info_output: null as null | string,
+      log_container_name: null as null | string,
       metrics: {} as Dictionary<{ cpu: number, memory: number}>,
       metrics_interval: 0,
       edited_extension: null as null | InstalledExtensionData & { editing: boolean },
@@ -269,6 +274,9 @@ export default Vue.extend({
 
       return this.manifest as ExtensionData[]
     },
+    html_log_output(): string {
+      return ansi.ansi_to_html(this.log_output ?? '')
+    },
   },
   watch: {
     show_log: {
@@ -457,16 +465,15 @@ export default Vue.extend({
       this.show_log = true
       let outputBuffer = ''
 
-      const containerName = `extension-${(extension.docker + extension.tag).replace(/[^a-zA-Z0-9]/g, '')}`
+      this.log_container_name = `extension-${(extension.docker + extension.tag).replace(/[^a-zA-Z0-9]/g, '')}`
       const fetchLogs = (): void => {
-        const ansi = new AnsiUp()
         let lastDecode = ''
 
         back_axios({
           method: 'get',
           url: `${API_URL}/log`,
           params: {
-            container_name: containerName,
+            container_name: this.log_container_name,
           },
           onDownloadProgress: (progressEvent) => {
             const result = aggregateStreamingResponse(
@@ -475,7 +482,7 @@ export default Vue.extend({
             )
 
             if (result) {
-              lastDecode = ansi.ansi_to_html(result)
+              lastDecode = result
               this.log_info_output = `Logs for ${extension.name}`
               this.$set(this, 'log_output', outputBuffer + lastDecode)
             }
@@ -504,6 +511,10 @@ export default Vue.extend({
 
       fetchLogs()
     },
+    async downloadCurrentLog() {
+      const file = new File([this.log_output ?? ''], `${this.log_container_name}.log`, { type: 'text/plain' })
+      saveAs(file)
+    },
     showModal(extension: ExtensionData) {
       this.show_dialog = true
       this.selected_extension = extension