diff --git a/client/src/actions/sftp.js b/client/src/actions/sftp.js index a14bb22b..002fcc76 100644 --- a/client/src/actions/sftp.js +++ b/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}); }); -} +}; diff --git a/client/src/actions/utils.js b/client/src/actions/utils.js index 4bc0dc68..9745c835 100644 --- a/client/src/actions/utils.js +++ b/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; } }; \ No newline at end of file diff --git a/client/src/interface/components/MemoryUsage/index.js b/client/src/interface/components/MemoryUsage/index.js index 1a685ca4..5e798db6 100644 --- a/client/src/interface/components/MemoryUsage/index.js +++ b/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 ( - - + + - - {`${Math.round( - props.value, - )}%`} + + + {props.loading ? : `${Math.round(props.value)}`}% + ); @@ -26,10 +25,11 @@ 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() { @@ -37,15 +37,27 @@ export default class MemoryUsage extends React.Component { this.props.fm, this.props.fm.state.cwd, this - ) + ); } render() { - return (
- - - {this.state.memUsed} {this.state.memUnit} of {this.state.memQuota} {this.state.memUnit} Used - + const { + used, + usedUnit, + quota, + quotaUnit + } = this.state; + const loading = (quota === 0); + const loadFailed = (quota === null); + return (
+ + + {loading ? : `${used}${usedUnit}`} + {' / '} + {loading ? : `${quota}${quotaUnit}`} + {' Used'} +
); } diff --git a/client/src/interface/pages/FileManager/index.js b/client/src/interface/pages/FileManager/index.js index 55c076e1..03ff82db 100644 --- a/client/src/interface/pages/FileManager/index.js +++ b/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]}/> ))} - - - + - + - + @@ -381,7 +380,7 @@ export default class FileManager extends React.Component { transitionDuration={100} > + onClick={this.handleNewFolderDialogOpen}>