247 lines
9.3 KiB
JavaScript
247 lines
9.3 KiB
JavaScript
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';
|
|
import DropDown from '../../components/UI/DropDown/DropDown';
|
|
import * as Constants from '../../constants';
|
|
|
|
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, url) => dispatch(addS3Mount(name, accessKey, secretKey, region, bucketName, url)),
|
|
notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
|
|
}
|
|
};
|
|
|
|
const default_state = {
|
|
AccessKey: '',
|
|
BucketName: '',
|
|
DisplayRemote: false,
|
|
DisplayS3: false,
|
|
HostNameOrIp: '',
|
|
Name: '',
|
|
Port: 20000,
|
|
Provider: Constants.S3_PROVIDER_LIST[0],
|
|
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({
|
|
DisplayRemote: false
|
|
}, () => {
|
|
this.props.addRemoteMount(this.state.HostNameOrIp, this.state.Port, this.state.Token);
|
|
this.setState({
|
|
...default_state,
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
addS3Mount = () => {
|
|
if (this.state.Name.length === 0) {
|
|
this.props.notifyError('Name cannot be empty.');
|
|
} else if (this.state.AccessKey.length === 0) {
|
|
this.props.notifyError('AccessKey cannot be empty.');
|
|
} else if (this.state.SecretKey.length === 0) {
|
|
this.props.notifyError('SecretKey cannot be empty.')
|
|
} else {
|
|
const provider = 'S3' + this.state.Name;
|
|
if (this.props.S3Mounts.includes(provider)) {
|
|
this.props.notifyError('Remote host already exists');
|
|
} else {
|
|
this.setState({
|
|
DisplayS3: false
|
|
}, () => {
|
|
this.props.addS3Mount(this.state.Name, this.state.AccessKey, this.state.SecretKey,
|
|
this.state.Region, this.state.BucketName, Constants.S3_PROVIDER_URL[this.state.Provider]);
|
|
this.setState({
|
|
...default_state,
|
|
});
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
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)'}}/>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<Button buttonStyles={{width: '100%'}}
|
|
clicked={() => this.addRemoteMount()}>OK</Button>
|
|
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
|
<Button buttonStyles={{width: '100%'}}
|
|
clicked={() => this.setState({DisplayRemote: false})}>Cancel</Button>
|
|
</div>
|
|
</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>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<Text text={'Name'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
|
<Text text={'Provider'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
</div>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<input onChange={e => this.setState({Name: e.target.value.trim()})}
|
|
className={'ConfigurationItemInput'}
|
|
style={{width: '100%'}}
|
|
type={'text'}
|
|
value={this.state.Name}/>
|
|
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
|
<DropDown changed={e => this.setState({Provider: e.target.value})}
|
|
items={Constants.S3_PROVIDER_LIST}
|
|
selected={this.state.Provider}/>
|
|
</div>
|
|
<div style={{paddingTop: 'var(--default_spacing)'}}/>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<Text text={'Bucket Name (optional)'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
|
<Text text={'Region'}
|
|
textAlign={'left'}
|
|
type={'Heading2'}/>
|
|
</div>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<input onChange={e => this.setState({BucketName: e.target.value})}
|
|
className={'ConfigurationItemInput'}
|
|
style={{width: '100%'}}
|
|
type={'text'}
|
|
value={this.state.BucketName}/>
|
|
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
|
<input onChange={e => this.setState({Region: e.target.value})}
|
|
className={'ConfigurationItemInput'}
|
|
type={'text'}
|
|
value={this.state.Region}/>
|
|
</div>
|
|
<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: 'calc(var(--default_spacing) * 2)'}}/>
|
|
<div style={{display: 'flex', flexDirection: 'row'}}>
|
|
<div style={{width: '200%'}}/>
|
|
<Button buttonStyles={{width: '100%'}}
|
|
clicked={() => this.addS3Mount()}>OK</Button>
|
|
<div style={{paddingLeft: 'var(--default_spacing)'}}/>
|
|
<Button buttonStyles={{width: '100%'}}
|
|
clicked={() => this.setState({DisplayS3: false})}>Cancel</Button>
|
|
</div>
|
|
</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>
|
|
);
|
|
}
|
|
});
|