feat(FileSystem): disk space alert below 20% or 1Gb

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/widgets/filesystem/FileSystemToolbar.vue

@@ -209,7 +209,7 @@ export default class FileSystemToolbar extends Mixins(StatesMixin) {
   }
 
   get lowOnSpace (): boolean {
-    return this.$typedGetters['files/getLowOnSpace'](this.root)
+    return this.$typedGetters['files/getDiskUsage'](this.root)?.lowOnSpace ?? false
   }
 
   // Properties of the current root.

src/components/widgets/system/DiskUsageCard.vue

@@ -50,8 +50,8 @@
       <v-progress-linear
         :size="90"
         :height="10"
-        :value="fileSystemUsedPercent"
-        color="primary"
+        :value="diskUsage?.usedPercent"
+        :color="diskUsage?.lowOnSpace ? 'error': 'primary'"
         class="my-1"
       />
 
@@ -83,7 +83,7 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
-import type { DiskUsage } from '@/store/files/types'
+import type { AppDiskUsage } from '@/store/files/types'
 import { SocketActions } from '@/api/socketActions'
 import StateMixin from '@/mixins/state'
 
@@ -105,9 +105,9 @@ export default class DiskUsageCard extends Mixins(StateMixin) {
     return this.hasWait(`${this.$waits.onFileSystem}/${this.currentRoot}/`)
   }
 
-  get diskUsage (): DiskUsage | undefined {
+  get diskUsage (): AppDiskUsage | undefined {
     if (this.currentRoot != null) {
-      const diskUsage: DiskUsage | undefined = this.$typedState.files.diskUsage[this.currentRoot]
+      const diskUsage: AppDiskUsage | undefined = this.$typedGetters['files/getDiskUsage'](this.currentRoot)
 
       if (diskUsage == null) {
         SocketActions.serverFilesGetDirectory(this.currentRoot)
@@ -117,12 +117,6 @@ export default class DiskUsageCard extends Mixins(StateMixin) {
     }
   }
 
-  get fileSystemUsedPercent (): number {
-    return this.diskUsage == null
-      ? 0
-      : Math.floor((this.diskUsage.used / this.diskUsage.total) * 100)
-  }
-
   handleRefresh () {
     if (this.currentRoot != null) {
       SocketActions.serverFilesGetDirectory(this.currentRoot)

src/store/files/getters.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import type { GetterTree } from 'vuex'
-import type { AppDirectory, AppFile, AppFileMeta, AppFileWithMeta, FileBrowserEntry, FilesState, MoonrakerFile, MoonrakerFileWithMeta, RootProperties } from './types'
+import type { AppDirectory, AppDiskUsage, AppFile, AppFileMeta, AppFileWithMeta, FileBrowserEntry, FilesState, MoonrakerFile, MoonrakerFileWithMeta, RootProperties } from './types'
 import type { RootState } from '../types'
 import type { HistoryItem } from '../history/types'
 import { SupportedImageFormats, SupportedMarkdownFormats, SupportedVideoFormats } from '@/globals'
@@ -227,12 +227,19 @@ export const getters = {
     return state.currentPaths[root] ?? ''
   },
 
-  /**
-   * Returns a boolean indicating if we're low on disk space.
-   */
-  getLowOnSpace: (state) => (root: string) => {
+  getDiskUsage: (state) => (root: string): AppDiskUsage | undefined => {
     const diskUsage = state.diskUsage[root]
-    // 1073741824 = 1gb
-    return diskUsage != null && diskUsage.free < 1073741824
+
+    if (diskUsage != null) {
+      // 1073741824 = 1gb
+      const lowOnSpace = diskUsage.free < Math.min(1073741824, diskUsage.total * 0.2)
+      const usedPercent = Math.floor((diskUsage.used / diskUsage.total) * 100)
+
+      return {
+        ...diskUsage,
+        usedPercent,
+        lowOnSpace
+      }
+    }
   }
 } satisfies GetterTree<FilesState, RootState>

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, DiskUsage } from './types'
+import type { FilesState, MoonrakerRootFile, MoonrakerPathContent, MoonrakerFile, MoonrakerFileWithMeta, FilePaths, MoonrakerDir, MoonrakerDiskUsage } 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: { root: string, disk_usage: DiskUsage }) {
+  setDiskUsage (state, payload: { root: string, disk_usage: MoonrakerDiskUsage }) {
     Vue.set(state.diskUsage, payload.root, payload.disk_usage)
   }
 } satisfies MutationTree<FilesState>

src/store/files/types.ts

@@ -7,17 +7,22 @@ export interface FilesState {
   uploads: FileUpload[];
   download: FileDownload | null;
   currentPaths: Record<string, string>;
-  diskUsage: Record<string, DiskUsage | undefined>;
+  diskUsage: Record<string, MoonrakerDiskUsage | undefined>;
   rootFiles: Record<string, MoonrakerRootFile[] | undefined>;
   pathContent: Record<string, MoonrakerPathContent | undefined>;
 }
 
-export interface DiskUsage {
+export interface MoonrakerDiskUsage {
   total: number;
   used: number;
   free: number;
 }
 
+export interface AppDiskUsage extends MoonrakerDiskUsage {
+  usedPercent: number;
+  lowOnSpace: boolean;
+}
+
 export interface MoonrakerRootFile {
   path: string;
   modified: number;
@@ -79,7 +84,7 @@ export interface AppDirectory extends MoonrakerDir {
 export interface DirectoryInformation {
   dirs: MoonrakerDir[];
   files: (MoonrakerFile | MoonrakerFileWithMeta)[];
-  disk_usage: DiskUsage;
+  disk_usage: MoonrakerDiskUsage;
   root_info: RootInfo;
 }