Display storage use of host/puter separately

packages/backend/src/routers/df.js

@@ -22,6 +22,8 @@ const config = require('../config.js');
 const router = new express.Router();
 const auth = require('../middleware/auth.js');
 
+// TODO: Why is this both a POST and a GET?
+
 // -----------------------------------------------------------------------// 
 // POST /df
 // -----------------------------------------------------------------------//
@@ -35,11 +37,13 @@ router.post('/df', auth, express.json(), async (req, response, next)=>{
         return response.status(400).send({code: 'account_is_not_verified', message: 'Account is not verified'});
     
     const {df} = require('../helpers');
+    const svc_hostDiskUsage = req.services.get('host-disk-usage', { optional: true });
     try{
         // auth
         response.send({
             used: parseInt(await df(req.user.id)),
             capacity: config.is_storage_limited ? (req.user.free_storage === undefined || req.user.free_storage === null) ? config.storage_capacity : req.user.free_storage : config.available_device_storage,
+            ...(svc_hostDiskUsage ? svc_hostDiskUsage.get_extra() : {}),
         });
     }catch(e){
         console.log(e)
@@ -60,11 +64,13 @@ router.get('/df', auth, express.json(), async (req, response, next)=>{
         return response.status(400).send({code: 'account_is_not_verified', message: 'Account is not verified'});
     
     const {df} = require('../helpers');
+    const svc_hostDiskUsage = req.services.get('host-disk-usage', { optional: true });
     try{
         // auth
         response.send({
             used: parseInt(await df(req.user.id)),
             capacity: config.is_storage_limited ? (req.user.free_storage === undefined || req.user.free_storage === null) ? config.storage_capacity : req.user.free_storage : config.available_device_storage,
+            ...(svc_hostDiskUsage ? svc_hostDiskUsage.get_extra() : {}),
         });
     }catch(e){
         console.log(e)

packages/backend/src/services/HostDiskUsageService.js

@@ -21,7 +21,6 @@ class HostDiskUsageService extends BaseService {
         } else if (current_platform == "linux") {
             const mountpoint = this.get_linux_mountpint(process.cwd());
             free_space = this.get_disk_capacity_linux(mountpoint);
-            // TODO: Implement for linux systems
         } else if (current_platform == "win32") {
             this.log.warn('HostDiskUsageService: Windows is not supported yet');
             // TODO: Implement for windows systems
@@ -31,6 +30,31 @@ class HostDiskUsageService extends BaseService {
         config.available_device_storage = free_space;
     }
 
+    // TODO: TTL cache this value
+    get_host_usage () {
+        const current_platform = process.platform;
+
+        let disk_use = 0;
+        if (current_platform == "darwin") {
+            const mountpoint = this.get_darwin_mountpoint(process.cwd());
+            disk_use = this.get_disk_use_darwin(mountpoint);
+        } else if (current_platform == "linux") {
+            const mountpoint = this.get_linux_mountpint(process.cwd());
+            disk_use = this.get_disk_use_linux(mountpoint);
+        } else if (current_platform == "win32") {
+            this.log.warn('HostDiskUsageService: Windows is not supported yet');
+            // TODO: Implement for windows systems
+        }
+        return disk_use;
+    }
+
+    // Called by the /df endpoint
+    get_extra () {
+        return {
+            host_used: this.get_host_usage(),
+        };
+    }
+
 
     // Get the mountpoint/drive of the current working directory in mac os
     get_darwin_mountpoint(directory) {
@@ -50,14 +74,13 @@ class HostDiskUsageService extends BaseService {
 
     // Get the free space on the mountpoint/drive in mac os
     get_disk_capacity_darwin(mountpoint) {
-        const disk_info = execSync(`df -P "${mountpoint}" | awk 'NR==2 {print $4}'`, { encoding: 'utf-8' }).trim().split(' ');
+        const disk_info = execSync(`df -P "${mountpoint}" | awk 'NR==2 {print $2}'`, { encoding: 'utf-8' }).trim().split(' ');
         return parseInt(disk_info) * 512;
     }
 
     // Get the free space on the mountpoint/drive in linux
     get_disk_capacity_linux(mountpoint) {
-        // TODO: Implement for linux systems
+        const disk_info = execSync(`df -P "${mountpoint}" | awk 'NR==2 {print $2}'`, { encoding: 'utf-8' }).trim().split(' ');
-        const disk_info = execSync(`df -P "${mountpoint}" | awk 'NR==2 {print $4}'`, { encoding: 'utf-8' }).trim().split(' ');
         return parseInt(disk_info) * 1024;
     }
 
@@ -65,6 +88,23 @@ class HostDiskUsageService extends BaseService {
     get_disk_capacity_windows(drive) {
         // TODO: Implement for windows systems
     }
+
+    // Get the free space on the mountpoint/drive in mac os
+    get_disk_use_darwin(mountpoint) {
+        const disk_info = execSync(`df -P "${mountpoint}" | awk 'NR==2 {print $4}'`, { encoding: 'utf-8' }).trim().split(' ');
+        return parseInt(disk_info) * 512;
+    }
+
+    // Get the free space on the mountpoint/drive in linux
+    get_disk_use_linux(mountpoint) {
+        const disk_info = execSync(`df -P "${mountpoint}" | awk 'NR==2 {print $4}'`, { encoding: 'utf-8' }).trim().split(' ');
+        return parseInt(disk_info) * 1024;
+    }
+
+    // Get the free space on the drive in windows
+    get_disk_use_windows(drive) {
+        // TODO: Implement for windows systems
+    }
 }
 
 module.exports = HostDiskUsageService;

src/UI/Settings/UIWindowSettings.js

@@ -58,10 +58,12 @@ async function UIWindowSettings(options){
                                 <span id="storage-used"></span>
                                 <span> used of </span>
                                 <span id="storage-capacity"></span>
+                                <span id="storage-puter-used-w" style="display:none;">&nbsp;(<span id="storage-puter-used"></span> ${i18n('storage_puter_used')})</span>
                             </div>
                             <div id="storage-bar-wrapper">
                                 <span id="storage-used-percent"></span>
                                 <div id="storage-bar"></div>
+                                <div id="storage-bar-host"></div>
                             </div>
                         </div>`
                 h += `</div>`;
@@ -247,10 +249,26 @@ async function UIWindowSettings(options){
                 let usage_percentage = (res.used / res.capacity * 100).toFixed(0);
                 usage_percentage = usage_percentage > 100 ? 100 : usage_percentage;
 
-                $('#storage-used').html(byte_format(res.used));
+                let general_used = res.used;
+
+                let host_usage_percentage = 0;
+                if ( res.host_used ) {
+                    $('#storage-puter-used').html(byte_format(res.used));
+                    $('#storage-puter-used-w').show();
+
+                    general_used = res.host_used;
+                    host_usage_percentage = ((res.host_used - res.used) / res.capacity * 100).toFixed(0);
+                }
+
+                $('#storage-used').html(byte_format(general_used));
                 $('#storage-capacity').html(byte_format(res.capacity));
-                $('#storage-used-percent').html(usage_percentage + '%');
+                $('#storage-used-percent').html(
+                    usage_percentage + '%' +
+                    (host_usage_percentage > 0
+                        ? ' / ' + host_usage_percentage + '%' : '')
+                );
                 $('#storage-bar').css('width', usage_percentage + '%');
+                $('#storage-bar-host').css('width', host_usage_percentage + '%');
                 if (usage_percentage >= 100) {
                     $('#storage-bar').css({
                         'border-top-right-radius': '3px',