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

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