BlueOS frontend: refactor log download in the settings menu

fix: #3642, fix: #3284

Had to change the folder download logic to know when the download operation has finished to disable/enable the buttons.

For some reason the size of the loaded file presented to the user in the UI is sometimes smaller than the resulting size of the compressed file. From what I understood, this is related to axios compressing the files on the go; thus it can not inform the total size during the operation

Summary by Sourcery

Refactor the settings menu’s log download flow to use a new FolderManager and axios-based downloads with progress tracking, add a reusable ProgressInformation component for UI feedback, and prevent concurrent operations by disabling buttons while activities are in progress.

New Features:

Implement file download over axios with progress events in filebrowser, replacing the previous window.open approach
Introduce FolderManager utility to orchestrate folder downloads with progress tracking
Add ProgressInformation Vue component to display real-time download and deletion progress

Enhancements:

Refactor SettingsMenu to integrate FolderManager and ProgressInformation and disable download/remove buttons during active operations

Nov 06 '25 18:11 nicoschmdt

Reviewer's Guide

Refactored the log download flow by replacing direct filebrowser calls with a new FolderManager that streams downloads via axios, added a reusable ProgressInformation component for both download and deletion progress, and updated the SettingsMenu to use these abstractions and disable controls during operations.

Sequence diagram for log download flow with FolderManager

sequenceDiagram
  actor User
  participant SettingsMenu
  participant FolderManager
  participant filebrowser
  participant back_axios
  participant ProgressInformation

  User->>SettingsMenu: Clicks 'Download log files'
  SettingsMenu->>FolderManager: downloadFolder('system_logs')
  FolderManager->>filebrowser: fetchFolder('system_logs')
  filebrowser-->>FolderManager: returns folder
  FolderManager->>filebrowser: downloadFolder(folder, progressHandler)
  filebrowser->>back_axios: GET /raw/{folder.path}/?algo=zip
  back_axios-->>filebrowser: Streams download progress
  filebrowser-->>FolderManager: Calls progressHandler(event)
  FolderManager->>ProgressInformation: Updates progress props
  FolderManager-->>SettingsMenu: Operation complete
  SettingsMenu->>ProgressInformation: Show completion

Class diagram for new FolderManager and ProgressInformation components

classDiagram
  class FolderManager {
    +downloadedBytes: number
    +totalBytes: number
    +startTime: number
    +downloadSpeed: number
    +inProgress: boolean
    +downloadFolder(logs: string): Promise<void>
    +resetDownloadVariables(): void
  }

  class ProgressInformation {
    +type: string
    +operation: string
    +currentSize: number
    +totalSize: number
    +downloadSpeed: number
    +currentPath: string
    +status: string
    +formatSize(kb_bytes: number): string
  }

  SettingsMenu --> FolderManager : uses
  SettingsMenu --> ProgressInformation : uses

File-Level Changes

Change	Details	Files
Overhauled download implementation to support progress tracking	Added progressHandler parameter to filebrowser.downloadFolder Replaced window.open with axios GET requests and Blob creation Emitted success and error notifications after download	`core/frontend/src/libs/filebrowser.ts`
Created FolderManager to manage download state	Implemented inProgress flag, byte counters, and download speed calculation Wrapped filebrowser.downloadFolder with progress callbacks Reset progress variables on completion	`core/frontend/src/utils/folder_manager.ts`
Introduced ProgressInformation component for UI feedback	New Vue component rendering progress bars and metadata Handles both 'download' and 'deletion' display modes Formats sizes and speeds using helper functions	`core/frontend/src/components/common/ProgressInformation.vue`
Refactored SettingsMenu to use FolderManager and ProgressInformation	Imported and instantiated system and mavlink FolderManager instances Disabled buttons based on inProgress flags Replaced manual progress UI blocks with ProgressInformation usage Updated download methods to call FolderManager.downloadFolder	`core/frontend/src/components/app/SettingsMenu.vue`

Assessment against linked issues

Issue	Objective	Addressed	Explanation
https://github.com/bluerobotics/BlueOS/issues/3642	Prevent the user from clicking the 'Download' button while files are being deleted.	✅

Possibly linked issues

#User can click 'Download' while files are being deleted: PR disables download and delete buttons during ongoing operations, preventing the simultaneous actions described in the issue.

Tips and commands

Interacting with Sourcery

Trigger a new review: Comment @sourcery-ai review on the pull request.
Continue discussions: Reply directly to Sourcery's review comments.
Generate a GitHub issue from a review comment: Ask Sourcery to create an issue from a review comment by replying to it. You can also reply to a review comment with @sourcery-ai issue to create an issue from it.
Generate a pull request title: Write @sourcery-ai anywhere in the pull request title to generate a title at any time. You can also comment @sourcery-ai title on the pull request to (re-)generate the title at any time.
Generate a pull request summary: Write @sourcery-ai summary anywhere in the pull request body to generate a PR summary at any time exactly where you want it. You can also comment @sourcery-ai summary on the pull request to (re-)generate the summary at any time.
Generate reviewer's guide: Comment @sourcery-ai guide on the pull request to (re-)generate the reviewer's guide at any time.
Resolve all Sourcery comments: Comment @sourcery-ai resolve on the pull request to resolve all Sourcery comments. Useful if you've already addressed all the comments and don't want to see them anymore.
Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull request to dismiss all existing Sourcery reviews. Especially useful if you want to start fresh with a new review - don't forget to comment @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others.
Change the review language.
Add, remove or edit custom review instructions.
Adjust other review settings.

Getting Help

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

Nov 06 '25 18:11 sourcery-ai[bot]

thus it can not inform the total size during the operation

I don't think that's a problem. I think the original idea for that size was the disk usage size, not the compressed download size

Nov 06 '25 18:11 joaoantoniocardoso

Hmm, two things here:

The numbers on Chrome seem too hectic:

https://github.com/user-attachments/assets/800601f3-0277-4d96-a4bd-d7b070cb439e

I can't make it work on Firefox:

https://github.com/user-attachments/assets/35807fc4-0630-4e97-88e7-b970806f8e69

Nov 13 '25 18:11 joaoantoniocardoso