feat: show disk info per registered directory (#1660)

pedrolamas · web-flow · commit cb6442b1161b · 2025-04-01T14:55:44.000+01:00
Signed-off-by: Pedro Lamas &lt;pedrolamas@gmail.com&gt;
diff --git a/src/components/widgets/filesystem/FileSystemToolbar.vue b/src/components/widgets/filesystem/FileSystemToolbar.vue
@@ -11,7 +11,7 @@
     <v-spacer />
 
     <v-tooltip
-      v-if="lowOnSpace && !loading"
+      v-if="klippyReady && !loading && lowOnSpace"
       bottom
     >
       <template #activator="{ on, attrs }">
@@ -209,8 +209,7 @@ export default class FileSystemToolbar extends Mixins(StatesMixin) {
   }
 
   get lowOnSpace (): boolean {
-    if (!this.klippyReady) return false
-    return this.$typedGetters['files/getLowOnSpace']
+    return this.$typedGetters['files/getLowOnSpace'](this.root)
   }
 
   // Properties of the current root.
diff --git a/src/components/widgets/system/DiskUsageCard.vue b/src/components/widgets/system/DiskUsageCard.vue
@@ -1,9 +1,46 @@
 <template>
   <collapsable-card
+    v-if="roots.length > 0"
     :title="$t('app.file_system.label.diskinfo')"
     icon="$harddisk"
   >
-    <v-card-text v-if="diskUsage">
+    <v-toolbar dense>
+      <v-tabs
+        v-model="tab"
+        show-arrows
+      >
+        <v-tab
+          v-for="(root, index) in roots"
+          :key="index"
+        >
+          {{ root }}
+        </v-tab>
+      </v-tabs>
+
+      <v-spacer />
+
+      <v-tooltip bottom>
+        <template #activator="{ on, attrs }">
+          <app-btn
+            v-bind="attrs"
+            icon
+            :disabled="!diskUsage || loading"
+            @click.prevent.stop="handleRefresh()"
+            v-on="on"
+          >
+            <v-icon
+              dense
+              :class="{ 'spin-alt': loading }"
+            >
+              $refresh
+            </v-icon>
+          </app-btn>
+        </template>
+        <span>{{ $t('app.general.btn.refresh') }}</span>
+      </v-tooltip>
+    </v-toolbar>
+
+    <v-card-text>
       <v-layout justify-space-between>
         <div>
           {{ $t('app.file_system.label.disk_usage') }}
@@ -21,79 +58,75 @@
       <v-layout justify-space-between>
         <div>
           <span class="focus--text">
-            {{ $filters.getReadableFileSizeString(diskUsage.used) }}
+            {{
+              diskUsage != null
+                ? $filters.getReadableFileSizeString(diskUsage.used)
+                : '?'
+            }}
           </span>
           <span class="secondary--text">{{ $t('app.general.label.used') }}</span>
         </div>
         <div>
           <span class="focus--text">
-            {{ $filters.getReadableFileSizeString(diskUsage.free) }}
+            {{
+              diskUsage != null
+                ? $filters.getReadableFileSizeString(diskUsage.free)
+                : '?'
+            }}
           </span>
           <span class="secondary--text">{{ $t('app.general.label.free') }}</span>
         </div>
       </v-layout>
     </v-card-text>
-
-    <v-simple-table
-      v-if="sdInfo"
-      dense
-    >
-      <tbody>
-        <tr v-if="sdInfo.manufacturer">
-          <th>{{ $t('app.system_info.label.manufacturer') }}</th>
-          <td>{{ sdInfo.manufacturer }}</td>
-        </tr>
-        <tr v-if="sdInfo.manufacturer_date">
-          <th>{{ $t('app.system_info.label.manufactured') }}</th>
-          <td>{{ sdInfo.manufacturer_date }}</td>
-        </tr>
-        <tr v-if="sdInfo.product_name">
-          <th>{{ $t('app.system_info.label.product_name') }}</th>
-          <td>{{ sdInfo.product_name }} {{ sdInfo.product_revision }}</td>
-        </tr>
-        <tr v-if="sdInfo.capacity">
-          <th>{{ $t('app.system_info.label.capacity') }}</th>
-          <td>{{ sdInfo.capacity }}</td>
-        </tr>
-        <tr v-if="sdInfo.serial_number">
-          <th>{{ $t('app.system_info.label.serial_number') }}</th>
-          <td>{{ sdInfo.serial_number }}</td>
-        </tr>
-      </tbody>
-    </v-simple-table>
   </collapsable-card>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-import type { SystemInfo } from '@/store/server/types'
+import { Component, Mixins } from 'vue-property-decorator'
 import type { DiskUsage } from '@/store/files/types'
 import { SocketActions } from '@/api/socketActions'
+import StateMixin from '@/mixins/state'
 
 @Component({})
-export default class PrinterStatsCard extends Vue {
-  get sdInfo () {
-    const info: SystemInfo | null = this.$typedState.server.system_info
+export default class DiskUsageCard extends Mixins(StateMixin) {
+  tab: number | null = null
 
-    return info?.sd_info
+  get roots (): string[] {
+    return this.$typedState.server.info.registered_directories
   }
 
-  get fileSystemUsedPercent () {
-    const diskUsage = this.diskUsage
+  get currentRoot (): string | null {
+    return this.tab != null
+      ? this.roots[this.tab] ?? null
+      : null
+  }
 
-    return diskUsage == null
-      ? 0
-      : Math.floor((diskUsage.used / diskUsage.total) * 100)
+  get loading (): boolean {
+    return this.hasWait(`${this.$waits.onFileSystem}/${this.currentRoot}/`)
   }
 
-  get diskUsage (): DiskUsage | null {
-    const diskUsage: DiskUsage | null = this.$typedState.files.diskUsage
+  get diskUsage (): DiskUsage | undefined {
+    if (this.currentRoot != null) {
+      const diskUsage: DiskUsage | undefined = this.$typedState.files.diskUsage[this.currentRoot]
 
-    if (diskUsage == null) {
-      SocketActions.serverFilesGetDirectory('config')
+      if (diskUsage == null) {
+        SocketActions.serverFilesGetDirectory(this.currentRoot)
+      }
+
+      return diskUsage
     }
+  }
+
+  get fileSystemUsedPercent (): number {
+    return this.diskUsage == null
+      ? 0
+      : Math.floor((this.diskUsage.used / this.diskUsage.total) * 100)
+  }
 
-    return diskUsage
+  handleRefresh () {
+    if (this.currentRoot != null) {
+      SocketActions.serverFilesGetDirectory(this.currentRoot)
+    }
   }
 }
 </script>
diff --git a/src/components/widgets/system/SdInfoCard.vue b/src/components/widgets/system/SdInfoCard.vue
@@ -0,0 +1,45 @@
+<template>
+  <collapsable-card
+    v-if="sdInfo != null && Object.keys(sdInfo).length > 0"
+    :title="$t('app.file_system.label.sd_card_info')"
+    icon="$microSd"
+  >
+    <v-simple-table dense>
+      <tbody>
+        <tr v-if="sdInfo.manufacturer">
+          <th>{{ $t('app.system_info.label.manufacturer') }}</th>
+          <td>{{ sdInfo.manufacturer }}</td>
+        </tr>
+        <tr v-if="sdInfo.manufacturer_date">
+          <th>{{ $t('app.system_info.label.manufactured') }}</th>
+          <td>{{ sdInfo.manufacturer_date }}</td>
+        </tr>
+        <tr v-if="sdInfo.product_name">
+          <th>{{ $t('app.system_info.label.product_name') }}</th>
+          <td>{{ sdInfo.product_name }} {{ sdInfo.product_revision }}</td>
+        </tr>
+        <tr v-if="sdInfo.capacity">
+          <th>{{ $t('app.system_info.label.capacity') }}</th>
+          <td>{{ sdInfo.capacity }}</td>
+        </tr>
+        <tr v-if="sdInfo.serial_number">
+          <th>{{ $t('app.system_info.label.serial_number') }}</th>
+          <td>{{ sdInfo.serial_number }}</td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+  </collapsable-card>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import type { SystemInfo } from '@/store/server/types'
+
+@Component({})
+export default class SdInfoCard extends Vue {
+  get sdInfo () {
+    const info: SystemInfo | null = this.$typedState.server.system_info
+
+    return info?.sd_info
+  }
+}
+</script>
diff --git a/src/globals.ts b/src/globals.ts
@@ -117,6 +117,7 @@ import {
   mdiCircleSlice3,
   mdiCodeJson,
   mdiHarddisk,
+  mdiMicroSd,
   mdiLayersTripleOutline,
   mdiMessageTextOutline,
   mdiFormatListBulleted,
@@ -414,6 +415,7 @@ export const Icons = Object.freeze({
   codeJson: mdiCodeJson,
   desktopTower: mdiDesktopTower,
   harddisk: mdiHarddisk,
+  microSd: mdiMicroSd,
   message: mdiMessageTextOutline,
   list: mdiFormatListBulleted,
   fullScreen: mdiFullscreen,
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
@@ -91,6 +91,7 @@ app:
       dir_name: Directory name
       disk_usage: Disk Usage
       diskinfo: Disk Information
+      sd_card_info: SD Card Information
       downloaded: Downloaded
       file_name: Filename
       transfer_rate: Transfer rate
diff --git a/src/store/files/actions.ts b/src/store/files/actions.ts
@@ -31,6 +31,7 @@ export const actions = {
   async onServerFilesGetDirectory ({ commit }, payload: ObjectWithRequest<DirectoryInformation>) {
     const { disk_usage, files, dirs } = payload
     const { path } = payload.__request__.params ?? {}
+    const [root] = path.split('/', 1)
 
     const filteredDirs = dirs
       .filter(file =>
@@ -39,7 +40,7 @@ export const actions = {
         !Globals.FILTERED_FILES_EXTENSION.some(e => file.dirname.endsWith(e))
       )
 
-    commit('setDiskUsage', disk_usage)
+    commit('setDiskUsage', { root, disk_usage })
     commit('setServerFilesGetDirectory', { path, content: { files, dirs: filteredDirs } })
   },
 
diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
@@ -230,8 +230,9 @@ export const getters = {
   /**
    * Returns a boolean indicating if we're low on disk space.
    */
-  getLowOnSpace: (state) => {
+  getLowOnSpace: (state) => (root: string) => {
+    const diskUsage = state.diskUsage[root]
     // 1073741824 = 1gb
-    return state.diskUsage != null && state.diskUsage.free < 1073741824
+    return diskUsage != null && diskUsage.free < 1073741824
   }
 } satisfies GetterTree<FilesState, RootState>
diff --git a/src/store/files/mutations.ts b/src/store/files/mutations.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import type { MutationTree } from 'vuex'
-import type { FilesState, MoonrakerRootFile, MoonrakerPathContent, MoonrakerFile, MoonrakerFileWithMeta, FilePaths, MoonrakerDir } from './types'
+import type { FilesState, MoonrakerRootFile, MoonrakerPathContent, MoonrakerFile, MoonrakerFileWithMeta, FilePaths, MoonrakerDir, DiskUsage } from './types'
 import { defaultState } from './state'
 import { Globals } from '@/globals'
 
@@ -171,7 +171,7 @@ export const mutations = {
     Vue.set(state.currentPaths, payload.root, payload.path)
   },
 
-  setDiskUsage (state, payload) {
-    Vue.set(state, 'diskUsage', payload)
+  setDiskUsage (state, payload: { root: string, disk_usage: DiskUsage }) {
+    Vue.set(state.diskUsage, payload.root, payload.disk_usage)
   }
 } satisfies MutationTree<FilesState>
diff --git a/src/store/files/state.ts b/src/store/files/state.ts
@@ -5,7 +5,7 @@ export const defaultState = (): FilesState => {
     uploads: [],
     download: null,
     currentPaths: {},
-    diskUsage: null,
+    diskUsage: {},
     rootFiles: {},
     pathContent: {}
   }
diff --git a/src/store/files/types.ts b/src/store/files/types.ts
@@ -7,7 +7,7 @@ export interface FilesState {
   uploads: FileUpload[];
   download: FileDownload | null;
   currentPaths: Record<string, string>;
-  diskUsage: DiskUsage | null;
+  diskUsage: Record<string, DiskUsage | undefined>;
   rootFiles: Record<string, MoonrakerRootFile[] | undefined>;
   pathContent: Record<string, MoonrakerPathContent | undefined>;
 }
diff --git a/src/views/System.vue b/src/views/System.vue
@@ -6,6 +6,8 @@
     >
       <system-overview-card class="mb-2 mb-md-4" />
 
+      <sd-info-card class="mb-2 mb-md-4" />
+
       <disk-usage-card />
     </v-col>
 
@@ -35,6 +37,7 @@ import SystemOverviewCard from '@/components/widgets/system/SystemOverviewCard.v
 import McuCard from '@/components/widgets/system/McuCard.vue'
 import SystemUsageCard from '@/components/widgets/system/SystemUsageCard.vue'
 import DiskUsageCard from '@/components/widgets/system/DiskUsageCard.vue'
+import SdInfoCard from '@/components/widgets/system/SdInfoCard.vue'
 import type { MCU } from '@/store/printer/types'
 
 @Component({
@@ -43,7 +46,8 @@ import type { MCU } from '@/store/printer/types'
     SystemOverviewCard,
     McuCard,
     SystemUsageCard,
-    DiskUsageCard
+    DiskUsageCard,
+    SdInfoCard
   }
 })
 export default class Configure extends Mixins(StateMixin) {

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`<v-spacer />`
`12`	`12`
`13`	`13`	`<v-tooltip`
`14`		`- v-if="lowOnSpace && !loading"`
	`14`	`+ v-if="klippyReady && !loading && lowOnSpace"`
`15`	`15`	`bottom`
`16`	`16`	`>`
`17`	`17`	`<template #activator="{ on, attrs }">`
`@@ -209,8 +209,7 @@ export default class FileSystemToolbar extends Mixins(StatesMixin) {`
`209`	`209`	`}`
`210`	`210`
`211`	`211`	`get lowOnSpace (): boolean {`
`212`		`- if (!this.klippyReady) return false`
`213`		`- return this.$typedGetters['files/getLowOnSpace']`
	`212`	`+ return this.$typedGetters['files/getLowOnSpace'](this.root)`
`214`	`213`	`}`
`215`	`214`
`216`	`215`	`// Properties of the current root.`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ export const defaultState = (): FilesState => {`
`5`	`5`	`uploads: [],`
`6`	`6`	`download: null,`
`7`	`7`	`currentPaths: {},`
`8`		`- diskUsage: null,`
	`8`	`+ diskUsage: {},`
`9`	`9`	`rootFiles: {},`
`10`	`10`	`pathContent: {}`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ export interface FilesState {`
`7`	`7`	`uploads: FileUpload[];`
`8`	`8`	`download: FileDownload \| null;`
`9`	`9`	`currentPaths: Record<string, string>;`
`10`		`- diskUsage: DiskUsage \| null;`
	`10`	`+ diskUsage: Record<string, DiskUsage \| undefined>;`
`11`	`11`	`rootFiles: Record<string, MoonrakerRootFile[] \| undefined>;`
`12`	`12`	`pathContent: Record<string, MoonrakerPathContent \| undefined>;`
`13`	`13`	`}`