Merge pull request #244 from HeyPuter/eric/host-storage

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 $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) * 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

@@ -60,10 +60,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>`;
@@ -261,10 +263,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',

src/css/style.css

@@ -3531,6 +3531,7 @@ label {
 }
 
 #storage-bar {
+    float: left;
     height: 15px;
     background-color: #dbe3ef;
     border-top-left-radius: 3px;
@@ -3538,12 +3539,20 @@ label {
     width: 0;
 }
 
+#storage-bar-host {
+    float: left;
+    height: 15px;
+    background-color: #dbe3ef9c;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    width: 0;
+}
+
 #storage-used-percent {
     position: absolute;
-    left: calc(50% - 20px);
     text-align: center;
     display: inline-block;
-    width: 40px;
+    width: 100%;
     font-size: 13px;
 }
 

src/i18n/translations/de.js

@@ -146,6 +146,7 @@ const de = {
         size: 'Größe',
         sort_by: 'Sotieren nach',
         start: 'Start',
+        storage_puter_used: 'Verwendet von Puter',
         taking_longer_than_usual: 'Dauert etwas länger als gewöhnlich. Bitte warten...',
         text_document: 'Textdokument',
         tos_fineprint: `Indem Sie auf „Kostenloses Konto erstellen“ klicken, stimmen Sie den {{link=terms}}Nutzungsbedingungen{{/link}} und der {{link=privacy}}Datenschutzerklärung{{/link}} von Puter zu.`,

src/i18n/translations/en.js

@@ -196,6 +196,7 @@ const en = {
         start: 'Start',
         status: "Status",
         storage_usage: "Storage Usage",
+        storage_puter_used: 'used by Puter',
         taking_longer_than_usual: 'Taking a little longer than usual. Please wait...',
         terms: "Terms",
         text_document: 'Text document',

src/i18n/translations/fa.js

@@ -147,6 +147,7 @@ const fa = {
         size: 'اندازه',
         sort_by: 'مرتب سازی بر اساس',
         start: 'شروع',
+        storage_puter_used: 'استفاده شده توسط Puter',
         taking_longer_than_usual: 'کمی بیشتر از معمول طول می کشد. لطفا صبر کنید...',
         text_document: 'سند متنی',
         tos_fineprint: `با کلیک بر روی 'ایجاد حساب کاربری رایگان' شما با {{link=terms}}شرایط خدمات{{/link}} و {{link=privacy}}سیاست حفظ حریم خصوصی{{/link}} Puter موافقت می کنید.`,

src/i18n/translations/ko.js

@@ -21,7 +21,9 @@ const ko = {
     english_name: "Korean",
     code: "ko",
     dictionary: {
+        about: "정보",
         access_granted_to: "접근 권한 부여",
+        account: "계정",
         add_existing_account: "기존 계정 추가",
         all_fields_required: '모든 필드는 필수입니다.',
         apply: "적용",
@@ -34,6 +36,10 @@ const ko = {
         change_language: "언어 변경",
         change_password: "비밀번호 변경",
         change_username: "사용자 이름 변경",
+        clock: '시계',
+        clock_visible_hide: '숨기기 - 항상 숨김',
+        clock_visible_show: '표시 - 항상 표시',
+        clock_visible_auto: '자동 - 숨김',
         close_all_windows: "모든 창 닫기",
         color: '색상',
         confirm_account_for_free_referral_storage_c2a: '계정을 생성하고 이메일 주소를 확인하여 1GB의 무료 저장 공간을 받으십시오. 친구도 1GB의 무료 저장 공간을 받게 됩니다.',
@@ -52,6 +58,7 @@ const ko = {
         cut: '잘라내기',
         date_modified: '수정한 날짜',
         delete: '삭제',
+        delete_account: "계정 삭제",
         delete_permanently: "영구 삭제",
         deploy_as_app: '앱으로 배포',
         descending: '내림차순',
@@ -80,6 +87,7 @@ const ko = {
         items_in_trash_cannot_be_renamed: `이 항목은 휴지통에 있기 때문에 이름을 바꿀 수 없습니다. 이 항목의 이름을 바꾸려면 먼저 휴지통에서 끌어내십시오.`,
         jpeg_image: 'JPEG 이미지',
         keep_in_taskbar: '작업 표시줄에 유지',
+        language: "언어",
         log_in: "로그인",
         log_out: '로그아웃',
         move: '이동',
@@ -136,6 +144,7 @@ const ko = {
         send: "보내기",
         send_password_recovery_email: "비밀번호 복구 이메일 보내기",
         session_saved: "계정을 생성해 주셔서 감사합니다. 이 세션이 저장되었습니다.",
+        settings: "설정",
         set_new_password: "새 비밀번호 설정",
         share_to: "공유",
         show_all_windows: "모든 창 표시",
@@ -146,6 +155,8 @@ const ko = {
         size: '크기',
         sort_by: '정렬 기준',
         start: '시작',
+        storage_usage: "저장 공간 사용량",
+        storage_puter_used: 'Puter에서 사용 중',
         taking_longer_than_usual: '보통보다 조금 더 오래 걸립니다. 잠시만 기다려 주십시오...',
         text_document: '텍스트 문서',
         tos_fineprint: `무료 계정 생성을 클릭하면 Puter의 {{link=terms}}서비스 약관{{/link}}과 {{link=privacy}}개인정보 보호정책{{/link}}에 동의하는 것입니다.`,
@@ -157,7 +168,9 @@ const ko = {
         upload_here: '여기에 업로드',
         username: "사용자 이름",
         username_changed: '사용자 이름이 성공적으로 업데이트되었습니다.',
+        usage: "사용량",
         versions: "버전",
+        visibility: '가시성',
         yes_release_it: '예, 해제합니다',
         you_have_been_referred_to_puter_by_a_friend: "친구가 Puter로 추천했습니다!",
         zip: "압축",