frontend: pull tracker: Add parseStreaming

* Add parse streaming utils in pull tracker to allow receive correct
  errors from kraken using streaming operations

core/frontend/src/components/cloud/CloudTrayMenu.vue

@@ -293,7 +293,9 @@ export default Vue.extend({
 
       this.pull_tracker = new PullTracker(
         () => console.log('Major Tom Install Ready'),
-        () => console.error('Major Tom Install Error'),
+        (error: string) => {
+          this.setOperationError('Failed to install Major Tom.', error)
+        },
       )
 
       try {

core/frontend/src/components/version-chooser/VersionChooser.vue

@@ -501,7 +501,7 @@ export default Vue.extend({
             tag,
           },
           onDownloadProgress: (progressEvent) => {
-            tracker.digestNewData(progressEvent)
+            tracker.digestNewData(progressEvent, false)
             this.pull_output = tracker.pull_output
             this.download_percentage = tracker.download_percentage
             this.extraction_percentage = tracker.extraction_percentage

core/frontend/src/utils/pull_tracker.ts

@@ -1,4 +1,5 @@
 import { Dictionary } from '@/types/common'
+import { parseStreamingResponse } from '@/utils/streaming'
 
 class PullTracker {
   private layer_status: Dictionary<string> = {}
@@ -80,13 +81,12 @@ class PullTracker {
     this.extraction_percentage = extraction_current / extraction_total / 0.01
   }
 
-  digestNewData(progressEvent: {currentTarget: { response: string}}): void {
+  digestStreamFragment(fragment: string): void {
     // dataChunk contains the data that have been obtained so far (the whole data so far)..
     // The received data is descbribed at
     // https://docker-py.readthedocs.io/en/stable/api.html#docker.api.image.ImageApiMixin.pull
-    const dataChunk = progressEvent?.currentTarget?.response
     // As the data consists of multiple jsons, the following like is a hack to split them
-    const dataList = (this.left_over_data + dataChunk.replaceAll('}{', '}\n\n{')).split('\n\n')
+    const dataList = (this.left_over_data + fragment.replaceAll('}{', '}\n\n{')).split('\n\n')
     this.left_over_data = ''
 
     for (const line of dataList) {
@@ -145,5 +145,24 @@ class PullTracker {
 
     this.updateSimplifiedProgress()
   }
+
+  digestNewData(progressEvent: {currentTarget: { response: string }}, parseFragments = true): void {
+    let buffer = progressEvent?.currentTarget?.response
+
+    if (parseFragments) {
+      const fragments = parseStreamingResponse(progressEvent?.currentTarget?.response)
+
+      buffer = ''
+      for (const fragment of fragments) {
+        if (fragment.status >= 400 || fragment.error) {
+          return this.onerror(fragment.error ?? `Unknown error with status ${fragment.status}`)
+        }
+
+        buffer += fragment.data
+      }
+    }
+
+    return this.digestStreamFragment(buffer)
+  }
 }
 export default PullTracker

core/frontend/src/views/ExtensionManagerView.vue

@@ -210,6 +210,7 @@ import { Dictionary } from '@/types/common'
 import { kraken_service } from '@/types/frontend_services'
 import back_axios from '@/utils/api'
 import PullTracker from '@/utils/pull_tracker'
+import { parseStreamingResponse } from '@/utils/streaming'
 
 import {
   ExtensionData, InstalledExtensionData, RunningContainer, Version,
@@ -492,8 +493,27 @@ export default Vue.extend({
           container_name: this.getContainerName(extension),
         },
         onDownloadProgress: (progressEvent) => {
-          const chunk = progressEvent.currentTarget.response
-          this.$set(this, 'log_output', ansi.ansi_to_html(chunk))
+          const fragments = parseStreamingResponse(progressEvent.currentTarget.response)
+
+          let buffer = ''
+          for (const fragment of fragments) {
+            // If no logs are available kraken will wait till timeout and stop the stream
+            if (fragment.status === 408) {
+              if (buffer === '') {
+                buffer = 'No logs available'
+              }
+              continue
+            }
+
+            if (fragment.status >= 400 || fragment.error) {
+              notifier.pushBackError('EXTENSIONS_LOG_FETCH_FAIL', fragment.error)
+              return
+            }
+
+            buffer += fragment.data
+          }
+
+          this.$set(this, 'log_output', ansi.ansi_to_html(buffer))
           this.show_log = true
           this.setLoading(extension, false)
           this.$nextTick(() => {
@@ -507,7 +527,7 @@ export default Vue.extend({
             output.scrollTop = output.scrollHeight
           })
         },
-        timeout: 30000,
+        timeout: 35000,
       })
         .then(() => {
           this.setLoading(extension, false)