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,102 @@
+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
+
+  @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
+  }
+
+  @Action
+  async fetchUsage(query: DiskUsageQuery): Promise<void> {
+    this.setLoading(true)
+    this.setError(null)
+
+    await back_axios({
+      method: 'get',
+      url: `${this.API_URL}/usage`,
+      params: query,
+      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(async () => {
+        // Refresh after delete using the current usage query to reflect changes
+        if (this.usage) {
+          await this.fetchUsage({
+            path: this.usage.root.path,
+            depth: this.usage.depth,
+            include_files: this.usage.include_files,
+            min_size_bytes: this.usage.min_size_bytes,
+          })
+        }
+      })
+      .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,223 @@
+<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 }} {{ totalSize ? ` (${totalSize})` : '' }}</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-center" style="width: 150px;">
+                    Usage
+                  </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="5" 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>
+                    <v-progress-linear
+                      :value="getPercentage(child.size_bytes)"
+                      height="16"
+                      rounded
+                      color="primary"
+                    >
+                      <template #default>
+                        <span class="text-caption white--text">
+                          {{ getPercentage(child.size_bytes).toFixed(1) }}%
+                        </span>
+                      </template>
+                    </v-progress-linear>
+                  </td>
+                  <td class="text-right">
+                    {{ prettifySize(child.size_bytes / 1024) }}
+                  </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'
+import { prettifySize } from '@/utils/helper_functions'
+
+export default Vue.extend({
+  data() {
+    return {
+      path: '/',
+      depth: 2,
+      includeFiles: true,
+      minSizeKb: 0,
+    }
+  },
+  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 {
+      const currentPath = this.path as string
+      return currentPath !== '/'
+    },
+    totalSize(): string {
+      if (!this.usage?.root?.size_bytes) {
+        return ''
+      }
+      return prettifySize(this.usage.root.size_bytes / 1024)
+    },
+  },
+  mounted(): void {
+    this.fetchUsage()
+  },
+  methods: {
+    async fetchUsage(): Promise<void> {
+      const currentPath = this.path as string
+      const currentDepth = this.depth as number
+      const currentIncludeFiles = this.includeFiles as boolean
+      const currentMinSizeKb = this.minSizeKb as number
+      await disk_store.fetchUsage({
+        path: currentPath || '/',
+        depth: Math.max(currentDepth, 0),
+        include_files: currentIncludeFiles,
+        min_size_bytes: Math.max(0, currentMinSizeKb * 1024),
+      })
+    },
+    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)
+    },
+    getPercentage(sizeBytes: number): number {
+      const parentSize = this.usage?.root?.size_bytes ?? 0
+      if (parentSize <= 0) {
+        return 0
+      }
+      return sizeBytes / parentSize * 100
+    },
+    prettifySize,
+  },
+})
+</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,
         },