core: frontend: Add disk-usage page

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

Author: patrickelectric

core/frontend/src/menus.ts

@@ -43,6 +43,13 @@ const menus = [
     text: 'Browse all the files in BlueOS. Useful for fetching logs,'
       + ' tweaking configurations, and development.',
   },
+  {
+    title: 'Disk',
+    icon: 'mdi-harddisk',
+    route: '/tools/disk',
+    advanced: true,
+    text: 'Visualize disk usage and delete files/folders.',
+  },
   {
     title: 'Log Browser',
     icon: 'mdi-math-log',

core/frontend/src/router/index.ts

@@ -43,6 +43,11 @@ const routes: Array<RouteConfig> = [
     name: 'File Browser',
     component: defineAsyncComponent(() => import('../views/FileBrowserView.vue')),
   },
+  {
+    path: '/tools/disk',
+    name: 'Disk',
+    component: defineAsyncComponent(() => import('../views/Disk.vue')),
+  },
   {
     path: '/tools/web-terminal',
     name: 'Terminal',

core/frontend/src/store/disk.ts

@@ -0,0 +1,113 @@
+import {
+  Action, Module, Mutation, VuexModule, getModule,
+} from 'vuex-module-decorators'
+
+import store from '@/store'
+import { DiskUsageQuery, DiskUsageResponse } from '@/types/disk'
+import back_axios, { isBackendOffline } from '@/utils/api'
+
+@Module({ dynamic: true, store, name: 'disk' })
+class DiskStore extends VuexModule {
+  API_URL = '/disk-usage/v1.0/disk'
+
+  usage: DiskUsageResponse | null = null
+
+  loading = false
+
+  deleting = false
+
+  error: string | null = null
+
+  last_query: DiskUsageQuery = {
+    path: '/',
+    depth: 10,
+    include_files: true,
+    min_size_bytes: 0,
+  }
+
+  @Mutation
+  setUsage(value: DiskUsageResponse | null): void {
+    this.usage = value
+  }
+
+  @Mutation
+  setLoading(value: boolean): void {
+    this.loading = value
+  }
+
+  @Mutation
+  setDeleting(value: boolean): void {
+    this.deleting = value
+  }
+
+  @Mutation
+  setError(message: string | null): void {
+    this.error = message
+  }
+
+  @Mutation
+  setLastQuery(query: DiskUsageQuery): void {
+    this.last_query = query
+  }
+
+  @Action
+  async fetchUsage(query: DiskUsageQuery): Promise<void> {
+    const merged: DiskUsageQuery = {
+      ...this.last_query,
+      ...query,
+    }
+
+    this.setLoading(true)
+    this.setError(null)
+    this.setLastQuery(merged)
+
+    await back_axios({
+      method: 'get',
+      url: `${this.API_URL}/usage`,
+      params: merged,
+      timeout: 120000,
+    })
+      .then((response) => {
+        this.setUsage(response.data as DiskUsageResponse)
+      })
+      .catch((error) => {
+        this.setUsage(null)
+        if (isBackendOffline(error)) {
+          return
+        }
+        this.setError(`Failed to fetch disk usage: ${error.message}`)
+      })
+      .finally(() => {
+        this.setLoading(false)
+      })
+  }
+
+  @Action
+  async deletePath(path: string): Promise<void> {
+    this.setDeleting(true)
+    this.setError(null)
+    await back_axios({
+      method: 'delete',
+      url: `${this.API_URL}/paths/${encodeURIComponent(path)}`,
+      timeout: 120000,
+    })
+      .then(() => {
+        // Refresh after delete using the last query to reflect changes
+        this.fetchUsage(this.last_query)
+      })
+      .catch((error) => {
+        if (isBackendOffline(error)) {
+          return
+        }
+        this.setError(`Failed to delete path: ${error.response?.data?.detail || error.message}`)
+      })
+      .finally(() => {
+        this.setDeleting(false)
+      })
+  }
+}
+
+const disk_store = getModule(DiskStore)
+
+export { DiskStore }
+export default disk_store

core/frontend/src/types/disk.ts

@@ -0,0 +1,22 @@
+export interface DiskNode {
+  name: string
+  path: string
+  size_bytes: number
+  is_dir: boolean
+  children: DiskNode[]
+}
+
+export interface DiskUsageResponse {
+  root: DiskNode
+  generated_at: number
+  depth: number
+  include_files: boolean
+  min_size_bytes: number
+}
+
+export interface DiskUsageQuery {
+  path?: string
+  depth?: number
+  include_files?: boolean
+  min_size_bytes?: number
+}

core/frontend/src/views/Disk.vue

@@ -0,0 +1,204 @@
+<template>
+  <v-container fluid>
+    <v-row v-if="error">
+      <v-col cols="12">
+        <v-alert type="error" dense outlined>
+          {{ error }}
+        </v-alert>
+      </v-col>
+    </v-row>
+    <v-row v-if="loading">
+      <v-col cols="12">
+        <v-progress-linear
+          color="primary"
+          indeterminate
+          height="6"
+          rounded
+          class="mb-2"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-else>
+      <v-col cols="12">
+        <v-card outlined>
+          <v-card-title class="py-2 d-flex justify-space-between align-center">
+            <span>{{ path }} {{ totalSizeGb ? ` (${totalSizeGb} GB)` : '' }}</span>
+            <v-btn
+              icon
+              small
+              :disabled="!canGoUp"
+              @click="goUp"
+            >
+              <v-icon>mdi-arrow-up</v-icon>
+            </v-btn>
+          </v-card-title>
+          <v-divider />
+          <v-card-text class="pa-0">
+            <v-simple-table dense>
+              <thead>
+                <tr>
+                  <th class="text-left">Name</th>
+                  <th class="text-right">Size</th>
+                  <th class="text-center">Type</th>
+                  <th class="text-center">Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-if="!usage || usage.root.children.length === 0">
+                  <td colspan="4" class="text-center grey--text text--darken-1">
+                    No entries.
+                  </td>
+                </tr>
+                <tr
+                  v-for="child in sortedChildren"
+                  :key="child.path"
+                  :class="{ 'clickable-row': child.is_dir }"
+                  @click="navigate(child)"
+                >
+                  <td>
+                    <v-icon left small>
+                      {{ child.is_dir ? 'mdi-folder' : 'mdi-file' }}
+                    </v-icon>
+                    {{ child.name }}
+                  </td>
+                  <td class="text-right">
+                    {{ formatBytes(child.size_bytes) }}
+                  </td>
+                  <td class="text-center">
+                    {{ child.is_dir ? 'Dir' : 'File' }}
+                  </td>
+                  <td class="text-center">
+                    <v-btn
+                      icon
+                      small
+                      color="red"
+                      :loading="deleting"
+                      @click.stop="confirmDelete(child)"
+                    >
+                      <v-icon small>mdi-delete</v-icon>
+                    </v-btn>
+                  </td>
+                </tr>
+              </tbody>
+            </v-simple-table>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import disk_store from '@/store/disk'
+import { DiskNode } from '@/types/disk'
+
+export default Vue.extend({
+  data() {
+    return {
+      path: disk_store.last_query.path || '/',
+      depth: disk_store.last_query.depth ?? 10,
+      includeFiles: disk_store.last_query.include_files ?? true,
+      minSizeKb: Math.floor((disk_store.last_query.min_size_bytes ?? 0) / 1024),
+    }
+  },
+  computed: {
+    usage() {
+      return disk_store.usage
+    },
+    loading(): boolean {
+      return disk_store.loading
+    },
+    deleting(): boolean {
+      return disk_store.deleting
+    },
+    error(): string | null {
+      return disk_store.error
+    },
+    sortedChildren(): DiskNode[] {
+      if (!this.usage) {
+        return []
+      }
+      return [...this.usage.root.children].sort((a, b) => b.size_bytes - a.size_bytes)
+    },
+    canGoUp(): boolean {
+      return (this.path as string) !== '/'
+    },
+    totalSizeGb(): string {
+      if (!this.usage?.root?.size_bytes) {
+        return ''
+      }
+      const gb = this.usage.root.size_bytes / (1024 ** 3)
+      return gb.toFixed(2)
+    },
+    generatedAt(): string {
+      if (!this.usage?.generated_at) {
+        return '—'
+      }
+      const date = new Date(this.usage.generated_at * 1000)
+      return date.toLocaleString()
+    },
+  },
+  mounted(): void {
+    this.fetchUsage()
+  },
+  methods: {
+    async fetchUsage(): Promise<void> {
+      await disk_store.fetchUsage({
+        path: (this.path as string) || '/',
+        depth: Math.max(this.depth as number, 0),
+        include_files: this.includeFiles as boolean,
+        min_size_bytes: Math.max(0, (this.minSizeKb as number) * 1024),
+      })
+    },
+    onBreadcrumb(payload: { item?: { path?: string }, path?: string }): void {
+      const targetPath = payload?.item?.path ?? payload.path ?? '/'
+      this.path = targetPath || '/'
+      this.fetchUsage()
+    },
+    goUp(): void {
+      if (!this.canGoUp) {
+        return
+      }
+      const currentPath = this.path as string
+      const trimmed = currentPath.endsWith('/') ? currentPath.slice(0, -1) : currentPath
+      const parent = trimmed.substring(0, trimmed.lastIndexOf('/')) || '/'
+      this.path = parent
+      this.fetchUsage()
+    },
+    navigate(node: DiskNode): void {
+      if (!node.is_dir) {
+        return
+      }
+      this.path = node.path
+      this.fetchUsage()
+    },
+    async confirmDelete(node: DiskNode): Promise<void> {
+      const confirmed = window.confirm(`Delete ${node.path}? This cannot be undone.`)
+      if (!confirmed) {
+        return
+      }
+      await disk_store.deletePath(node.path)
+    },
+    formatBytes(bytes: number): string {
+      if (bytes <= 0 || Number.isNaN(bytes)) {
+        return '0 B'
+      }
+      const units = ['B', 'KB', 'MB', 'GB', 'TB']
+      const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1)
+      const value = bytes / (1024 ** exponent)
+      return `${value.toFixed(value >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`
+    },
+  },
+})
+</script>
+
+<style scoped>
+.clickable-row {
+  cursor: pointer;
+}
+.clickable-row:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+</style>

core/frontend/vite.config.js

@@ -145,6 +145,9 @@ export default defineConfig(({ command, mode }) => {
         '^/commander': {
           target: SERVER_ADDRESS,
         },
+        '^/disk-usage': {
+          target: SERVER_ADDRESS,
+        },
         '^/docker': {
           target: SERVER_ADDRESS,
         },