core: frontend: Add disk-usage page

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

Author: patrickelectric

core/frontend/src/components/disk/DiskTreemap.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <apexchart
+      type="treemap"
+      height="420"
+      :options="chartOptions"
+      :series="series"
+      @dataPointSelection="onSelect"
+    />
+    <div
+      v-if="!loading && (!root || root.children.length === 0)"
+      class="text-caption mt-2 grey--text text--darken-1"
+    >
+      No entries to display for this path.
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { ApexOptions } from 'apexcharts'
+
+import { DiskNode } from '@/types/disk'
+
+interface TreemapDatum {
+  x: string
+  y: number
+  path: string
+  is_dir: boolean
+  size_bytes: number
+}
+
+export default Vue.extend({
+  props: {
+    root: {
+      type: Object as PropType<DiskNode | null>,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    series(): { data: TreemapDatum[] }[] {
+      if (!this.root) {
+        return [{ data: [] }]
+      }
+
+      const children = this.root.children || []
+      return [{
+        data: children.map((child) => ({
+          x: child.name || '/',
+          y: Math.max(child.size_bytes, 1),
+          path: child.path,
+          is_dir: child.is_dir,
+          size_bytes: child.size_bytes,
+        })),
+      }]
+    },
+    chartOptions(): ApexOptions {
+      return {
+        chart: {
+          toolbar: {
+            show: false,
+          },
+        },
+        legend: {
+          show: false,
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: (_: any, opts: any) => {
+            const datum = (opts.w.config.series[0].data as TreemapDatum[])[opts.dataPointIndex]
+            return `${datum.x}\n${this.formatBytes(datum.size_bytes)}`
+          },
+          style: {
+            fontSize: '12px',
+          },
+        },
+        tooltip: {
+          y: {
+            formatter: (value: number, opts: any) => {
+              const datum = (opts.w.config.series[0].data as TreemapDatum[])[opts.dataPointIndex]
+              return `${this.formatBytes(value)} (${datum.path})`
+            },
+          },
+        },
+        colors: ['#42a5f5', '#26c6da', '#7e57c2', '#66bb6a', '#ffa726', '#ef5350'],
+      }
+    },
+  },
+  methods: {
+    onSelect(_event: MouseEvent, chartContext: any, config: any): void {
+      const data = chartContext?.w?.config?.series?.[0]?.data as TreemapDatum[] | undefined
+      if (!data || !data[config.dataPointIndex]) {
+        return
+      }
+      const datum = data[config.dataPointIndex]
+      this.$emit('select', datum.path, datum.is_dir)
+    },
+    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>
+.apexcharts-canvas {
+  max-height: 430px;
+}
+</style>

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
+}