fix(System): empty disk usage info on startup

pedrolamas · pedrolamas · commit 1a9274b6b55a · 2025-03-03T11:57:38.000Z
Signed-off-by: Pedro Lamas &lt;pedrolamas@gmail.com&gt;
diff --git a/src/components/widgets/stats/PrinterStatsCard.vue b/src/components/widgets/stats/PrinterStatsCard.vue
@@ -22,33 +22,6 @@
     </template>
 
     <v-card-text>
-      <!-- <div class="mb-4">
-        <v-layout justify-space-between>
-          <div class="grey--text text--darken-2">{{ $t('app.file_system.label.disk_usage') }}</div>
-        </v-layout>
-        <v-progress-linear
-          :size="90"
-          :height="10"
-          :value="fileSystemUsedPercent"
-          color="primary"
-          class="my-1"
-        >
-        </v-progress-linear>
-
-        <v-layout justify-space-between>
-          <div class="grey--text">
-            <span class="focus--text">
-              {{ $filters.getReadableFileSizeString(fileSystemUsage.used) }}
-            </span> {{ $t('app.general.label.used') }}
-          </div>
-          <div class="grey--text">
-            <span class="focus--text">
-              {{ $filters.getReadableFileSizeString(fileSystemUsage.free) }}
-            </span> {{ $t('app.general.label.free') }}
-          </div>
-        </v-layout>
-      </div> -->
-
       <v-row v-if="supportsHistoryComponent">
         <v-col cols="3">
           <v-card
@@ -134,7 +107,6 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import { SocketActions } from '@/api/socketActions'
-import type { DiskUsage } from '@/store/files/types'
 
 @Component({})
 export default class PrinterStatsCard extends Vue {
@@ -145,17 +117,6 @@ export default class PrinterStatsCard extends Vue {
     return this.$store.getters['history/getRollUp']
   }
 
-  get fileSystemUsedPercent () {
-    // (250 / 500) * 100
-    const total = this.fileSystemUsage.total
-    const used = this.fileSystemUsage.used
-    return Math.floor((used / total) * 100).toFixed()
-  }
-
-  get fileSystemUsage (): DiskUsage {
-    return this.$store.state.files.disk_usage
-  }
-
   get supportsHistoryComponent (): boolean {
     return this.$store.getters['server/componentSupport']('history')
   }
diff --git a/src/components/widgets/system/DiskUsageCard.vue b/src/components/widgets/system/DiskUsageCard.vue
@@ -3,7 +3,7 @@
     :title="$t('app.file_system.label.diskinfo')"
     icon="$harddisk"
   >
-    <v-card-text>
+    <v-card-text v-if="diskUsage">
       <v-layout justify-space-between>
         <div>
           {{ $t('app.file_system.label.disk_usage') }}
@@ -21,13 +21,13 @@
       <v-layout justify-space-between>
         <div>
           <span class="focus--text">
-            {{ $filters.getReadableFileSizeString(fileSystemUsage.used) }}
+            {{ $filters.getReadableFileSizeString(diskUsage.used) }}
           </span>
           <span class="secondary--text">{{ $t('app.general.label.used') }}</span>
         </div>
         <div>
           <span class="focus--text">
-            {{ $filters.getReadableFileSizeString(fileSystemUsage.free) }}
+            {{ $filters.getReadableFileSizeString(diskUsage.free) }}
           </span>
           <span class="secondary--text">{{ $t('app.general.label.free') }}</span>
         </div>
@@ -68,6 +68,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import type { SystemInfo } from '@/store/server/types'
 import type { DiskUsage } from '@/store/files/types'
+import { SocketActions } from '@/api/socketActions'
 
 @Component({})
 export default class PrinterStatsCard extends Vue {
@@ -78,13 +79,21 @@ export default class PrinterStatsCard extends Vue {
   }
 
   get fileSystemUsedPercent () {
-    const total = this.fileSystemUsage.total
-    const used = this.fileSystemUsage.used
-    return Math.floor((used / total) * 100).toFixed()
+    const diskUsage = this.diskUsage
+
+    return diskUsage == null
+      ? 0
+      : Math.floor((diskUsage.used / diskUsage.total) * 100)
   }
 
-  get fileSystemUsage (): DiskUsage {
-    return this.$store.state.files.disk_usage
+  get diskUsage (): DiskUsage | null {
+    const diskUsage: DiskUsage | null = this.$store.state.files.disk_usage
+
+    if (diskUsage == null) {
+      SocketActions.serverFilesGetDirectory('config')
+    }
+
+    return diskUsage
   }
 }
 </script>
diff --git a/src/store/files/getters.ts b/src/store/files/getters.ts
@@ -232,6 +232,6 @@ export const getters: GetterTree<FilesState, RootState> = {
    */
   getLowOnSpace: (state) => {
     // 1073741824 = 1gb
-    return state.disk_usage.free < 1073741824
+    return state.disk_usage != null && state.disk_usage.free < 1073741824
   }
 }
diff --git a/src/store/files/state.ts b/src/store/files/state.ts
@@ -5,11 +5,7 @@ export const defaultState = (): FilesState => {
     uploads: [],
     download: null,
     currentPaths: {},
-    disk_usage: {
-      total: 0,
-      used: 0,
-      free: 0
-    },
+    disk_usage: null,
     rootFiles: {},
     pathFiles: {}
   }
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>;
-  disk_usage: DiskUsage;
+  disk_usage: DiskUsage | null;
   rootFiles: Record<string, MoonrakerRootFile[] | undefined>;
   pathFiles: Record<string, MoonrakerPathContent | undefined>;
 }

Original file line number	Diff line number	Diff line change
`@@ -232,6 +232,6 @@ export const getters: GetterTree<FilesState, RootState> = {`
`232`	`232`	`*/`
`233`	`233`	`getLowOnSpace: (state) => {`
`234`	`234`	`// 1073741824 = 1gb`
`235`		`- return state.disk_usage.free < 1073741824`
	`235`	`+ return state.disk_usage != null && state.disk_usage.free < 1073741824`
`236`	`236`	`}`
`237`	`237`	`}`
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`		`- disk_usage: DiskUsage;`
	`10`	`+ disk_usage: DiskUsage \| null;`
`11`	`11`	`rootFiles: Record<string, MoonrakerRootFile[] \| undefined>;`
`12`	`12`	`pathFiles: Record<string, MoonrakerPathContent \| undefined>;`
`13`	`13`	`}`