frontend: Use new disk speed test API

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

Author: patrickelectric

core/frontend/src/store/disk.ts

@@ -3,8 +3,9 @@ import {
 } from 'vuex-module-decorators'
 
 import store from '@/store'
-import { DiskSpeedResult, DiskUsageQuery, DiskUsageResponse } from '@/types/disk'
+import { DiskSpeedResult, DiskSpeedTestPoint, DiskUsageQuery, DiskUsageResponse } from '@/types/disk'
 import back_axios, { isBackendOffline } from '@/utils/api'
+import { parseStreamingResponse } from '@/utils/streaming'
 
 @Module({ dynamic: true, store, name: 'disk' })
 class DiskStore extends VuexModule {
@@ -20,8 +21,12 @@ class DiskStore extends VuexModule {
 
   speedResult: DiskSpeedResult | null = null
 
+  speedResults: DiskSpeedTestPoint[] = []
+
   speedTesting = false
 
+  speedTestProgress = ''
+
   speedError: string | null = null
 
   @Mutation
@@ -49,11 +54,26 @@ class DiskStore extends VuexModule {
     this.speedResult = value
   }
 
+  @Mutation
+  setSpeedResults(value: DiskSpeedTestPoint[]): void {
+    this.speedResults = value
+  }
+
+  @Mutation
+  addSpeedResult(point: DiskSpeedTestPoint): void {
+    this.speedResults = [...this.speedResults, point]
+  }
+
   @Mutation
   setSpeedTesting(value: boolean): void {
     this.speedTesting = value
   }
 
+  @Mutation
+  setSpeedTestProgress(value: string): void {
+    this.speedTestProgress = value
+  }
+
   @Mutation
   setSpeedError(message: string | null): void {
     this.speedError = message
@@ -158,6 +178,57 @@ class DiskStore extends VuexModule {
         this.setSpeedTesting(false)
       })
   }
+
+  @Action
+  async runMultiSizeSpeedTest(): Promise<void> {
+    this.setSpeedTesting(true)
+    this.setSpeedError(null)
+    this.setSpeedResults([])
+    this.setSpeedTestProgress('Starting tests...')
+
+    let processedFragments = 0
+
+    try {
+      await back_axios({
+        method: 'get',
+        url: `${this.API_URL}/speed/stream`,
+        timeout: 600000,
+        onDownloadProgress: (progressEvent: { currentTarget?: { response?: string } }) => {
+          const response = progressEvent.currentTarget?.response
+          if (!response) return
+
+          const fragments = parseStreamingResponse(response)
+          const validFragments = fragments.filter((f) => f.fragment >= 0 && f.status === 200 && f.data)
+
+          for (let i = processedFragments; i < validFragments.length; i++) {
+            const fragment = validFragments[i]
+            if (!fragment.data) continue
+
+            try {
+              const point = JSON.parse(fragment.data) as DiskSpeedTestPoint
+              this.addSpeedResult(point)
+              this.setSpeedTestProgress(`Tested ${point.size_mb} MB`)
+            } catch (e) {
+              console.error('Failed to parse speed test point:', e)
+            }
+          }
+          processedFragments = validFragments.length
+        },
+      })
+
+      this.setSpeedTestProgress('Test complete')
+    } catch (error) {
+      if (isBackendOffline(error)) {
+        this.setSpeedTesting(false)
+        return
+      }
+      const axiosError = error as { response?: { data?: { detail?: string } }; message?: string }
+      const message = axiosError.response?.data?.detail || axiosError.message || 'Unknown error'
+      this.setSpeedError(`Speed test failed: ${message}`)
+    } finally {
+      this.setSpeedTesting(false)
+    }
+  }
 }
 
 const disk_store = getModule(DiskStore)

core/frontend/src/types/disk.ts

@@ -29,3 +29,9 @@ export interface DiskSpeedResult {
   success: boolean
   error: string | null
 }
+
+export interface DiskSpeedTestPoint {
+  size_mb: number
+  write_speed: number | null
+  read_speed: number | null
+}

core/frontend/src/views/Disk.vue

@@ -149,7 +149,7 @@
       <!-- Speed Test Tab -->
       <v-tab-item>
         <v-container class="d-flex flex-row align-center justify-center fluid">
-          <v-card min-width="390px" class="ma-5">
+          <v-card max-width="500px" class="ma-5">
             <v-card-title class="justify-center">
               Disk Speed Test
             </v-card-title>
@@ -159,57 +159,55 @@
             <v-col>
               <v-col class="d-flex justify-center">
                 <v-progress-circular
-                  v-if="speedTesting"
                   :rotate="90"
                   :width="15"
-                  :indeterminate="speedTesting"
+                  :value="speedResults.length * 100 / 4"
+                  :indeterminate="speedTesting && speedResults.length === 0"
                   ratio="1"
                   color="primary"
                   size="200"
                 >
-                  <span v-if="speedTesting">Testing...</span>
+                  <span v-if="speedTesting">{{ speedTestProgress }}</span>
+                  <span v-else-if="hasResults">{{ speedResults.length }}/4</span>
                   <span v-else>Click to start</span>
                 </v-progress-circular>
 
-                <v-list v-else>
+                <v-list>
                   <v-list-item>
                     <v-list-item-icon>
-                      <v-icon v-tooltip="'Write speed'">
-                        mdi-alpha-w-box-outline
+                      <v-icon v-tooltip="'Write speed (avg)'">
+                        mdi-pencil
                       </v-icon>
                     </v-list-item-icon>
                     <v-list-item-subtitle>
-                      {{ speedResult?.write_speed_mbps ? speedResult.write_speed_mbps.toFixed(2) : '...' }} MiB/s
+                      {{ avgWriteSpeed }} MiB/s
                     </v-list-item-subtitle>
                   </v-list-item>
 
                   <v-list-item>
                     <v-list-item-icon>
-                      <v-icon v-tooltip="'Read speed'">
-                        mdi-alpha-r-box-outline
+                      <v-icon v-tooltip="'Read speed (avg)'">
+                        mdi-book-open-page-variant
                       </v-icon>
                     </v-list-item-icon>
                     <v-list-item-subtitle>
-                      {{ speedResult?.read_speed_mbps ? speedResult.read_speed_mbps.toFixed(2) : '...' }} MiB/s
+                      {{ avgReadSpeed }} MiB/s
                     </v-list-item-subtitle>
                   </v-list-item>
                 </v-list>
               </v-col>
 
+              <v-col v-if="hasResults">
+                <disk-speed-graph
+                  style="width: 100%"
+                  :data="speedResults"
+                />
+              </v-col>
+
               <v-alert v-if="speedError" type="error" dense outlined class="ma-4">
                 {{ speedError }}
               </v-alert>
 
-              <v-alert
-                v-if="speedResult && !speedResult.success"
-                type="warning"
-                dense
-                outlined
-                class="ma-4"
-              >
-                Test failed: {{ speedResult.error }}
-              </v-alert>
-
               <div
                 class="transition-swing pa-6"
                 align="center"
@@ -238,12 +236,16 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import DiskSpeedGraph from '@/components/disk/DiskSpeedGraph.vue'
 import disk_store from '@/store/disk'
-import { DiskNode, DiskSpeedResult } from '@/types/disk'
+import { DiskNode, DiskSpeedTestPoint } from '@/types/disk'
 import { prettifySize } from '@/utils/helper_functions'
 
 export default Vue.extend({
   name: 'DiskView',
+  components: {
+    DiskSpeedGraph,
+  },
   data() {
     return {
       activeTab: 0,
@@ -267,12 +269,15 @@ export default Vue.extend({
     error(): string | null {
       return disk_store.error
     },
-    speedResult(): DiskSpeedResult | null {
-      return disk_store.speedResult
+    speedResults(): DiskSpeedTestPoint[] {
+      return disk_store.speedResults
     },
     speedTesting(): boolean {
       return disk_store.speedTesting
     },
+    speedTestProgress(): string {
+      return disk_store.speedTestProgress
+    },
     speedError(): string | null {
       return disk_store.speedError
     },
@@ -302,16 +307,31 @@ export default Vue.extend({
     },
     state(): string {
       if (this.speedTesting) {
-        return 'Running test...'
+        return this.speedTestProgress || 'Running test...'
       }
-      if (this.speedResult?.success) {
+      if (this.speedResults.length === 4) {
         return 'Test complete'
       }
-      if (this.speedResult && !this.speedResult.success) {
+      if (this.speedError) {
         return 'Test failed'
       }
       return 'Click to start'
     },
+    hasResults(): boolean {
+      return this.speedResults.length > 0
+    },
+    avgWriteSpeed(): string {
+      const speeds = this.speedResults.map((r) => r.write_speed).filter((s): s is number => s !== null)
+      if (speeds.length === 0) return '...'
+      const avg = speeds.reduce((a, b) => a + b, 0) / speeds.length
+      return avg.toFixed(2)
+    },
+    avgReadSpeed(): string {
+      const speeds = this.speedResults.map((r) => r.read_speed).filter((s): s is number => s !== null)
+      if (speeds.length === 0) return '...'
+      const avg = speeds.reduce((a, b) => a + b, 0) / speeds.length
+      return avg.toFixed(2)
+    },
   },
   mounted(): void {
     this.fetchUsage()
@@ -395,7 +415,7 @@ export default Vue.extend({
       return sizeBytes / parentSize * 100
     },
     async runSpeedTest(): Promise<void> {
-      await disk_store.runSpeedTest(1024 * 1024 * 1024)
+      await disk_store.runMultiSizeSpeedTest()
     },
     prettifySize,
   },