Partial S3 support
This commit is contained in:
13
src/containers/AddMount/AddMount.css
Normal file
13
src/containers/AddMount/AddMount.css
Normal file
@@ -0,0 +1,13 @@
|
||||
.AddRemoteMount {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.AddMountButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.AddMountButton {
|
||||
flex: 1;
|
||||
}
|
||||
222
src/containers/AddMount/AddMount.js
Normal file
222
src/containers/AddMount/AddMount.js
Normal file
@@ -0,0 +1,222 @@
|
||||
import React from 'react';
|
||||
import {Component} from 'react';
|
||||
import './AddMount.css';
|
||||
import {connect} from 'react-redux';
|
||||
import Button from '../../components/UI/Button/Button';
|
||||
import Box from '../../components/UI/Box/Box';
|
||||
import Text from '../../components/UI/Text/Text';
|
||||
import {notifyError} from '../../redux/actions/error_actions';
|
||||
import {addRemoteMount, addS3Mount} from '../../redux/actions/mount_actions';
|
||||
import {createModalConditionally} from '../../utils';
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
RemoteMounts: state.mounts.RemoteMounts,
|
||||
S3Mounts: state.mounts.S3Mounts,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
|
||||
addS3Mount: (name, accessKey, secretKey, region, bucketName) => dispatch(addS3Mount(name, accessKey, secretKey, region, bucketName)),
|
||||
notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
|
||||
}
|
||||
};
|
||||
|
||||
const default_state = {
|
||||
AccessKey: '',
|
||||
BucketName: '',
|
||||
DisplayRemote: false,
|
||||
DisplayS3: false,
|
||||
HostNameOrIp: '',
|
||||
Name: '',
|
||||
Port: 20000,
|
||||
Region: 'any',
|
||||
SecretKey: '',
|
||||
Token: '',
|
||||
};
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(class extends Component {
|
||||
state = {
|
||||
...default_state,
|
||||
};
|
||||
|
||||
addRemoteMount = () => {
|
||||
if (this.state.HostNameOrIp.length === 0) {
|
||||
this.props.notifyError('Hostname or IP cannot be empty.');
|
||||
} else {
|
||||
const provider = 'Remote' + this.state.HostNameOrIp + ':' + this.state.Port;
|
||||
if (this.props.RemoteMounts.includes(provider)) {
|
||||
this.props.notifyError('Remote host already exists');
|
||||
} else {
|
||||
this.setState({
|
||||
Display: false
|
||||
}, () => {
|
||||
this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
|
||||
this.setState({
|
||||
...default_state,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
addS3Mount = () => {
|
||||
|
||||
};
|
||||
|
||||
handleAddS3Mount = () => {
|
||||
this.setState({
|
||||
DisplayRemote: false,
|
||||
DisplayS3: true,
|
||||
});
|
||||
};
|
||||
|
||||
handleAddRemoteMount = () => {
|
||||
this.setState({
|
||||
DisplayRemote: true,
|
||||
DisplayS3: false,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const displayAddRemote = createModalConditionally(this.state.DisplayRemote, (
|
||||
<Box dxDark
|
||||
dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
|
||||
<h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote
|
||||
Mount</h1>
|
||||
<Text text={'Hostname or IP'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<input onChange={e => this.setState({HostNameOrIp: e.target.value.trim()})}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'text'}
|
||||
value={this.state.HostNameOrIp}/>
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
<Text text={'Port'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<input max={65535}
|
||||
min={1025}
|
||||
onChange={e => this.setState({Port: e.target.value})}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'number'}
|
||||
value={this.state.Port}/>
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
<Text text={'Remote Token'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<input onChange={e => this.setState({Token: e.target.value})}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'text'}
|
||||
value={this.state.Token}/>
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
<table cellSpacing={1}
|
||||
width="100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
<Button buttonStyles={{width: '100%'}}
|
||||
clicked={() => this.addRemoteMount()}>OK</Button>
|
||||
</td>
|
||||
<td width="50%">
|
||||
<Button buttonStyles={{width: '100%'}}
|
||||
clicked={() => this.setState({DisplayRemote: false})}>Cancel</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Box>
|
||||
));
|
||||
|
||||
const displayAddS3 = createModalConditionally(this.state.DisplayS3, (
|
||||
<Box dxDark
|
||||
dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
|
||||
<h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add S3
|
||||
Mount</h1>
|
||||
<Text text={'Name'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<input onChange={e => this.setState({Name: e.target.value.trim()})}
|
||||
className={'ConfigurationItemInput'}
|
||||
style={{width: '100%'}}
|
||||
type={'text'}
|
||||
value={this.state.Name}/>
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
<Text text={'Bucket Name (optional)'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<input onChange={e => this.setState({BucketName: e.target.value})}
|
||||
className={'ConfigurationItemInput'}
|
||||
style={{width: '100%'}}
|
||||
type={'text'}
|
||||
value={this.state.BucketName}/>
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
<Text text={'Region'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<input onChange={e => this.setState({Region: e.target.value})}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'text'}
|
||||
value={this.state.Region}/>
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
|
||||
<div style={{display: 'flex', flexDirection: 'row'}}>
|
||||
<Text text={'Access Key'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
||||
<Text text={'Secret Key'}
|
||||
textAlign={'left'}
|
||||
type={'Heading2'}/>
|
||||
</div>
|
||||
<div style={{display: 'flex', flexDirection: 'row'}}>
|
||||
<input onChange={e => this.setState({AccessKey: e.target.value})}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'text'}
|
||||
value={this.state.AccessKey}/>
|
||||
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
||||
<input onChange={e => this.setState({SecretKey: e.target.value})}
|
||||
className={'ConfigurationItemInput'}
|
||||
type={'text'}
|
||||
value={this.state.SecretKey}/>
|
||||
</div>
|
||||
|
||||
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
||||
<table cellSpacing={1}
|
||||
width="100%">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="50%">
|
||||
<Button buttonStyles={{width: '100%'}}
|
||||
clicked={() => this.addS3Mount()}>OK</Button>
|
||||
</td>
|
||||
<td width="50%">
|
||||
<Button buttonStyles={{width: '100%'}}
|
||||
clicked={() => this.setState({DisplayS3: false})}>Cancel</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Box>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className={'AddMount'}>
|
||||
{displayAddRemote}
|
||||
{displayAddS3}
|
||||
<div className={'AddMountButtons'}>
|
||||
{this.props.remoteSupported ?
|
||||
<Button className={'AddMountButton'}
|
||||
clicked={this.handleAddRemoteMount}>Add Remote Mount</Button> : null}
|
||||
{this.props.remoteSupported && this.props.s3Supported ?
|
||||
<div style={{paddingRight: 'var(--default_spacing)'}}/> : null}
|
||||
{this.props.s3Supported ?
|
||||
<Button className={'AddMountButton'}
|
||||
clicked={this.handleAddS3Mount}>Add S3 Mount</Button> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user