core: frontend: components: SettingsMenu: Use new remove_log_stream

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

core/frontend/src/components/app/SettingsMenu.vue

@@ -73,7 +73,7 @@
             <v-btn
               v-tooltip="'Frees up space on the SD card'"
               class="ma-2"
-              :disabled="disable_remove"
+              :disabled="disable_remove || deletion_in_progress"
               @click="remove_service_log_files"
             >
               <v-icon left>
@@ -83,6 +83,26 @@
             </v-btn>
           </v-card-actions>
 
+          <v-expand-transition>
+            <div v-if="deletion_in_progress" class="pa-4">
+              <v-progress-linear
+                indeterminate
+                color="primary"
+              />
+              <div class="mt-2">
+                <div class="text-subtitle-2">
+                  Deleting: {{ current_deletion_path }}
+                </div>
+                <div class="text-caption">
+                  Size: {{ formatSize(current_deletion_size / 1024) }}
+                </div>
+                <div class="text-caption">
+                  Status: {{ current_deletion_status }}
+                </div>
+              </div>
+            </div>
+          </v-expand-transition>
+
           <v-divider />
 
           <v-card-title class="align-center">
@@ -180,6 +200,10 @@ export default Vue.extend({
       operation_in_progress: false,
       operation_description: '',
       operation_error: undefined as undefined | string,
+      deletion_in_progress: false,
+      current_deletion_path: '',
+      current_deletion_size: 0,
+      current_deletion_status: '',
     }
   },
   computed: {
@@ -197,6 +221,9 @@ export default Vue.extend({
       this.operation_in_progress = true
       this.operation_description = description
     },
+    formatSize(bytes: number): string {
+      return prettifySize(bytes)
+    },
     async download_service_log_files(): Promise<void> {
       const folder = await filebrowser.fetchFolder('system_logs')
       await filebrowser.downloadFolder(folder)
@@ -216,7 +243,7 @@ export default Vue.extend({
           const folder_data_bytes = response.data
           const one_hundred_MB = 100 * 2 ** 20
           this.disable_remove = folder_data_bytes < one_hundred_MB
-          this.log_folder_size = prettifySize(folder_data_bytes / 1024)
+          this.log_folder_size = this.formatSize(folder_data_bytes / 1024)
         })
         .catch((error) => {
           this.operation_error = String(error)
@@ -235,7 +262,7 @@ export default Vue.extend({
           const folder_data_bytes = response.data
           const one_hundred_MB = 100 * 2 ** 20
           this.disable_remove_mavlink = folder_data_bytes < one_hundred_MB
-          this.mavlink_log_folder_size = prettifySize(folder_data_bytes / 1024)
+          this.mavlink_log_folder_size = this.formatSize(folder_data_bytes / 1024)
         })
         .catch((error) => {
           this.operation_error = String(error)
@@ -265,23 +292,54 @@ export default Vue.extend({
     },
     async remove_service_log_files(): Promise<void> {
       this.prepare_operation('Removing system log files...')
+      this.deletion_in_progress = true
+      this.current_deletion_path = ''
+      this.current_deletion_size = 0
+      this.current_deletion_status = 'Starting deletion...'
 
-      await back_axios({
-        url: `${API_URL}/services/remove_log`,
-        method: 'post',
-        params: {
-          i_know_what_i_am_doing: true,
-        },
-        timeout: 20000,
-      })
-        .then(() => {
-          this.get_log_folder_size()
+      try {
+        const response = await back_axios({
+          url: `${API_URL}/services/remove_log_stream`,
+          method: 'post',
+          params: {
+            i_know_what_i_am_doing: true,
+          },
+          responseType: 'stream',
+          timeout: 60000,
         })
-        .catch((error) => {
-          this.operation_error = String(error)
-          notifier.pushBackError('REMOVE_SERVICES_LOG_FAIL', error)
-        })
-      this.operation_in_progress = false
+
+        const reader = response.data.getReader()
+        const decoder = new TextDecoder()
+
+        let readResult = await reader.read()
+        while (!readResult.done) {
+          const chunk = decoder.decode(readResult.value)
+          const lines = chunk.split('\n').filter((line) => { line.trim() })
+
+          for (const line of lines) {
+            try {
+              const info = JSON.parse(line)
+              this.current_deletion_path = info.path
+              this.current_deletion_size = info.size
+              this.current_deletion_status = info.success ? 'Successfully deleted' : 'Failed to delete'
+            } catch (e) {
+              console.error('Error parsing deletion info:', e)
+            }
+          }
+          readResult = await reader.read()
+        }
+
+        await this.get_log_folder_size()
+      } catch (error) {
+        this.operation_error = String(error)
+        notifier.pushBackError('REMOVE_SERVICES_LOG_FAIL', error)
+      } finally {
+        this.operation_in_progress = false
+        this.deletion_in_progress = false
+        this.current_deletion_path = ''
+        this.current_deletion_size = 0
+        this.current_deletion_status = ''
+      }
     },
     async remove_mavlink_log_files(): Promise<void> {
       this.prepare_operation('Removing MAVLink log files...')