Merge pull request #5 from junhaoliao/ictrl_review

hide quota check in the FM if the target doesn't support that

Author: KevinHaoranZhang

client/src/actions/sftp.js

@@ -143,31 +143,25 @@ export const sftp_chmod = (fm, cwd, name, mode, recursive) => {
             fm.showAlert('Error: ' + error.message);
         }
     });
-}
+};
 
 export const sftp_quota = (fm, cwd, ms) => {
-    fm.setState({
-        loading: true
-    })
-    axios.post("/exec_blocking", {
+    // load silently as much as possible
+    //  because not all machines support quota checking
+    axios.post('/exec_blocking', {
         session_id: fm.session_id,
-        cmd: "quota -s | tail -n 1"
+        cmd: 'quota -s | tail -n 1'
     }).then(res => {
-        fm.loadDir(cwd)
-        const mem = res.data.match(/[0-9]+[a-zA-Z]+/g)
+        const mem = res.data.match(/[0-9]+[a-zA-Z]+/g);
         ms.setState({
-            memQuota: parseInt(mem[1]),
-            memUnit: mem[0].replace(/[0-9]+/,''),
-            memUsed: parseInt(mem[0])
-        })
+            used: parseInt(mem[0]),
+            usedUnit: mem[0].replace(/[0-9]+/, ''),
+            quota: parseInt(mem[1]),
+            quotaUnit: mem[1].replace(/[0-9]+/, ''),
+        });
     }).catch(error => {
-        fm.loadDir(cwd)
-        if (error.response) {
-            fm.showAlert(htmlResponseToReason(error.response.data));
-        } else {
-            // Something happened in setting up the request that triggered an Error
-            fm.showAlert('Error: ' + error.message);
-        }
+        // handle this silently because not all machines support quota checking
+        ms.setState({quota: null});
     });
-}
+};
 

client/src/actions/utils.js

@@ -3,11 +3,11 @@ export const htmlResponseToReason = (response) => {
     html.innerHTML = response;
     const reasonHTML = html.children[1];
     try {
-        const reasonTitle = reasonHTML.children[0].innerText
-        const reasonContent = reasonHTML.children[1].innerText
+        const reasonTitle = reasonHTML.children[0].innerText;
+        const reasonContent = reasonHTML.children[1].innerText;
         return `${reasonTitle} - ${reasonContent}`;
     } catch (_) {
-        return reasonHTML.innerText
+        return reasonHTML.innerText;
     }
 
 };

client/src/interface/components/MemoryUsage/index.js

@@ -1,21 +1,20 @@
 import React from 'react';
-import { sftp_quota } from '../../../actions/sftp';
-import {
-    Box,
-    LinearProgress,
-    Typography
-} from '@material-ui/core'
+import {sftp_quota} from '../../../actions/sftp';
+import {Box, LinearProgress, Skeleton, Typography} from '@material-ui/core';
 
 function LinearProgressWithLabel(props) {
     return (
         <Box sx={{display: 'flex', alignItems: 'center'}}>
-            <Box sx={{width: '100%', mr: 1}}>
-                <LinearProgress variant="determinate" {...props} />
+            <Box flexGrow={1}>
+                <LinearProgress
+                    variant={props.loading ? 'indeterminate' : 'determinate'}
+                    value={props.value}
+                />
             </Box>
-            <Box sx={{minWidth: 35}}>
-                <Typography variant="body2" color="text.secondary">{`${Math.round(
-                    props.value,
-                )}%`}</Typography>
+            <Box sx={{marginLeft: 1.5}}>
+                <Typography display={'flex'} variant="body2" color="text.secondary">
+                    {props.loading ? <Skeleton width={15}/> : `${Math.round(props.value)}`}%
+                </Typography>
             </Box>
         </Box>
     );
@@ -26,26 +25,39 @@ export default class MemoryUsage extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            memQuota:  0,
-            memUnit: '',
-            memUsed: 0
-        }
+            used: 0,
+            usedUnit: '',
+            quota: 0,
+            quotaUnit: ''
+        };
     }
 
     componentDidMount() {
         sftp_quota(
             this.props.fm,
             this.props.fm.state.cwd,
             this
-        )
+        );
     }
 
     render() {
-        return (<div>
-            <LinearProgressWithLabel variant="determinate" value={this.state.memUsed / this.state.memQuota * 100}/>
-            <Typography variant="caption" display="block">
-                {this.state.memUsed} {this.state.memUnit} of {this.state.memQuota} {this.state.memUnit} Used
-            </Typography>
+        const {
+            used,
+            usedUnit,
+            quota,
+            quotaUnit
+        } = this.state;
+        const loading = (quota === 0);
+        const loadFailed = (quota === null);
+        return (<div style={{width: '100%', visibility: loadFailed ? 'hidden' : 'visible'}}>
+                <LinearProgressWithLabel loading={loading}
+                                         value={used / quota * 100}/>
+                <Typography variant="caption" display={'flex'}>
+                    {loading ? <Skeleton width={44}/> : `${used}${usedUnit}`}
+                    {' / '}
+                    {loading ? <Skeleton width={44}/> : `${quota}${quotaUnit}`}
+                    {' Used'}
+                </Typography>
             </div>
         );
     }

client/src/interface/pages/FileManager/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-    Alert, Box,
+    Alert,
     Divider,
     Drawer,
     duration,
@@ -12,7 +12,8 @@ import {
     Menu,
     MenuItem,
     Paper,
-    Snackbar, Typography
+    Snackbar,
+    Typography
 } from '@material-ui/core';
 import {DataGrid} from '@material-ui/data-grid';
 
@@ -70,7 +71,7 @@ export default class FileManager extends React.Component {
             filesDisplaying: [],
             loading: true,
             newMenuAnchorEl: null,
-            newFolderDialogOpen:false,
+            newFolderDialogOpen: false,
             uploadWindowCollapsed: false,
             uploadProgress: []
         };
@@ -217,14 +218,14 @@ export default class FileManager extends React.Component {
         });
     };
 
-    handleNewFolderDialogOpen= (_) => {
-        this.handleNewMenuClose()
+    handleNewFolderDialogOpen = (_) => {
+        this.handleNewMenuClose();
         this.setState({newFolderDialogOpen: true});
     };
-    handleNewFolderDialogClose = () =>{
+    handleNewFolderDialogClose = () => {
         this.setState({newFolderDialogOpen: false});
-        this.loadDir(this.state.cwd)
-    }
+        this.loadDir(this.state.cwd);
+    };
 
     handleNewMenuOpen = (_) => {
         this.setState({newMenuAnchorEl: document.getElementById('new-button')});
@@ -298,17 +299,15 @@ export default class FileManager extends React.Component {
                                     primary={item[1]}/>
                             </ListItem>
                         ))}
-                    </List>
-                    <Divider/>
-                    <List style={{width: drawerWidth}}>
+                        <Divider/>
                         <ListItem>
                             <ListItemIcon>
                                 <FilterDrama/>
                             </ListItemIcon>
-                            <ListItemText primary="Storage" />
+                            <ListItemText primary="Storage"/>
                         </ListItem>
                         <ListItem>
-                            <MemoryUsage fm={this}></MemoryUsage>
+                            <MemoryUsage fm={this}/>
                         </ListItem>
                     </List>
                 </Drawer>
@@ -381,7 +380,7 @@ export default class FileManager extends React.Component {
                     transitionDuration={100}
                 >
                     <MenuItem key={'new-menu-folder'} style={{width: drawerWidth - 32}}
-                    onClick={this.handleNewFolderDialogOpen}>
+                              onClick={this.handleNewFolderDialogOpen}>
                         <ListItemIcon>
                             <CreateNewFolder/>
                         </ListItemIcon>