BlockStorage/repertory-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Partial S3 support

Browse Source
This commit is contained in:
sgraves76
2020-08-15 13:14:44 -05:00
parent 3846c85500
commit 27aa0ae8dc
17 changed files with 588 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/containers/AddMount/AddMount.css Normal file
View 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
View 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>
);
}
});

4
src/containers/AddRemoteMount/AddRemoteMount.css
View File

@@ -1,4 +0,0 @@
.AddRemoteMount {
margin: 0;
padding: 0;
}

117
src/containers/AddRemoteMount/AddRemoteMount.js
View File

@@ -1,117 +0,0 @@
import React from 'react';
import {Component} from 'react';
import './AddRemoteMount.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} from '../../redux/actions/mount_actions';
import {createModalConditionally} from '../../utils';
const mapStateToProps = state => {
return {
RemoteMounts: state.mounts.RemoteMounts,
};
};
const mapDispatchToProps = dispatch => {
return {
addRemoteMount: (hostNameOrIp, port, token) => dispatch(addRemoteMount(hostNameOrIp, port, token)),
notifyError: (msg, critical, callback) => dispatch(notifyError(msg, critical, callback)),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(class extends Component {
state = {
Display: false,
HostNameOrIp: '',
Port: 20000,
Token: '',
};
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({
HostNameOrIp: '',
Port: 20000,
Token: '',
});
});
}
}
};
handleAddRemoteMount = () => {
this.setState({
Display: true,
});
};
render() {
const displayAdd = createModalConditionally(this.state.Display, (
<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({Display: false})}>Cancel</Button>
</td>
</tr>
</tbody>
</table>
</Box>
));
return (
<div className={'AddRemoteMount'}>
{displayAdd}
<Button clicked={this.handleAddRemoteMount}>Add Remote Mount</Button>
</div>
);
}
});

7
src/containers/Configuration/Configuration.js
View File

@@ -82,6 +82,7 @@ class Configuration extends IPCContainer {
this.sendRequest(Constants.IPC_Get_Config_Template, {
Provider: this.props.DisplayConfiguration,
Remote: this.props.DisplayRemoteConfiguration,
S3: this.props.DisplayS3Configuration,
Version: this.props.version,
});
}
@@ -96,7 +97,7 @@ class Configuration extends IPCContainer {
const itemList = Object
.keys(config)
.map(key => {
const ret = {
return {
advanced: template[key] ? template[key].advanced : false,
hide_remote: template[key] ? template[key].hide_remote : false,
label: key,
@@ -108,7 +109,6 @@ class Configuration extends IPCContainer {
config[key] :
config[key].toString(),
};
return ret;
})
.filter(i=> {
let ret = template[i.label];
@@ -193,6 +193,7 @@ class Configuration extends IPCContainer {
this.sendRequest(Constants.IPC_Get_Config, {
Provider: this.props.DisplayConfiguration,
Remote: this.props.DisplayRemoteConfiguration,
S3: this.props.DisplayS3Configuration,
Version: this.props.version,
});
});
@@ -240,6 +241,7 @@ class Configuration extends IPCContainer {
Items: changedItems,
Provider: this.props.DisplayConfiguration,
Remote: this.props.DisplayRemoteConfiguration,
S3: this.props.DisplayS3Configuration,
Version: this.props.version,
});
});
@@ -361,6 +363,7 @@ const mapStateToProps = state => {
return {
DisplayConfiguration: state.mounts.DisplayConfiguration,
DisplayRemoteConfiguration: state.mounts.DisplayRemoteConfiguration,
DisplayS3Configuration: state.mounts.DisplayS3Configuration,
Platform: state.common.Platform,
}
};

19
src/containers/MountItems/MountItem/MountItem.js
View File

@@ -31,7 +31,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = dispatch => {
return {
displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
displayConfiguration: (provider, remote, s3) => dispatch(displayConfiguration(provider, remote, s3)),
displaySkynetExport: display => dispatch(displaySkynetExport(display)),
displaySkynetImport: display => dispatch(displaySkynetImport(display)),
removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
@@ -63,7 +63,9 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
rowSpan={6}>
<img alt=''
height={'16px'}
onClick={props.MState.AllowMount ? ()=>props.displayConfiguration(props.provider, props.remote) : e=>{e.preventDefault();}}
onClick={props.MState.AllowMount ? () => props.displayConfiguration(props.provider, props.remote, props.s3) : e => {
e.preventDefault();
}}
src={configureImage}
style={{padding: 0, border: 0, margin: 0, ...pointer}}
width={'16px'}/>
@@ -120,12 +122,13 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
width={19}/>;
const actionsDisplay = (
<Button clicked={()=>props.clicked(props.provider, props.remote, !props.MState.Mounted, props.PState.MountLocation)}
col={inputColumnSpan + 2}
colSpan={21}
disabled={!props.MState.AllowMount}
row={secondRow}
rowSpan={7}>
<Button
clicked={() => props.clicked(props.provider, props.remote, props.s3, !props.MState.Mounted, props.PState.MountLocation)}
col={inputColumnSpan + 2}
colSpan={21}
disabled={!props.MState.AllowMount}
row={secondRow}
rowSpan={7}>
{buttonDisplay}
</Button>);

67
src/containers/MountItems/MountItems.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import AddRemoteMount from '../AddRemoteMount/AddRemoteMount';
import AddMount from '../AddMount/AddMount';
import Box from '../../components/UI/Box/Box';
import Button from '../../components/UI/Button/Button';
import {connect} from 'react-redux';
@@ -94,7 +94,7 @@ class MountItems extends IPCContainer {
}
};
displayRetryMount = (provider, remote, mountLocation, msg) => {
displayRetryMount = (provider, remote, s3, mountLocation, msg) => {
if (!this.state.RetryItems[provider]) {
let retryItems = {
...this.state.RetryItems
@@ -121,7 +121,7 @@ class MountItems extends IPCContainer {
const retrySeconds = retryItems[provider].RetrySeconds - 1;
if (retrySeconds === 0) {
this.cancelRetryMount(provider, () => {
this.handleMountUnMount(provider, remote,true, mountLocation);
this.handleMountUnMount(provider, remote, s3, true, mountLocation);
});
} else {
retryItems[provider].RetrySeconds = retrySeconds;
@@ -152,17 +152,18 @@ class MountItems extends IPCContainer {
this.props.setProviderState(provider, state);
};
handleMountUnMount = (provider, remote, mount, location) => {
handleMountUnMount = (provider, remote, s3, mount, location) => {
if (!location || (location.trim().length === 0)) {
this.props.notifyError('Mount location is not set');
} else {
let allowAction = true;
if (mount) {
let result = remote || provider === 'S3' || provider === 'Skynet' ?
let result = remote || s3 || provider === 'Skynet' ?
{Valid: true, Success: true} :
this.sendSyncRequest(Constants.IPC_Check_Daemon_Version, {
Provider: provider,
Remote: remote,
S3: s3,
Version: this.props.InstalledVersion
}).data;
if (result.Success) {
@@ -179,11 +180,11 @@ class MountItems extends IPCContainer {
} else {
allowAction = false;
if ((result.Code === new Uint32Array([-1])[0]) || (result.Code === new Uint8Array([-1])[0])) {
this.displayRetryMount(provider, remote, location, 'Failed to connect to ' + provider + ' daemon');
this.displayRetryMount(provider, remote, s3, location, 'Failed to connect to ' + provider + ' daemon');
} else if ((result.Code === new Uint32Array([-3])[0]) || (result.Code === new Uint8Array([-3])[0])) {
this.displayRetryMount(provider, remote, location, 'Incompatible ' + provider + ' daemon. Please upgrade ' + provider + '.');
this.displayRetryMount(provider, remote, s3, location, 'Incompatible ' + provider + ' daemon. Please upgrade ' + provider + '.');
} else {
this.displayRetryMount(provider, remote, location, 'Version check failed: ' + result.Error);
this.displayRetryMount(provider, remote, s3, location, 'Version check failed: ' + result.Error);
}
}
} else {
@@ -191,7 +192,7 @@ class MountItems extends IPCContainer {
if (this.props.Platform === 'win32') {
this.props.notifyError('Failed to launch repertory. Please install Microsoft Visual C++ Redistributable for Visual Studio 2015, 2017 and 2019.');
} else {
this.displayRetryMount(provider, remote, location, 'Version check failed: ' + result.Error);
this.displayRetryMount(provider, remote, s3, location, 'Version check failed: ' + result.Error);
}
}
}
@@ -205,6 +206,7 @@ class MountItems extends IPCContainer {
Location: location,
Provider: provider,
Remote: remote,
S3: s3,
Version: this.props.InstalledVersion,
});
} else {
@@ -212,6 +214,7 @@ class MountItems extends IPCContainer {
Location: location,
Provider: provider,
Remote: remote,
S3: s3,
Version: this.props.InstalledVersion,
});
}
@@ -221,8 +224,7 @@ class MountItems extends IPCContainer {
getProviderList = providersOnly => {
const providerList = Constants.PROVIDER_LIST.filter(i => {
return ((i === 'S3') && this.props.s3Supported) ||
((i === 'Skynet') && this.props.skynetSupported) ||
return ((i === 'Skynet') && this.props.skynetSupported) ||
((i === 'ScPrime') && this.props.scPrimeSupported) ||
((i === 'Sia') && this.props.siaSupported);
});
@@ -232,9 +234,15 @@ class MountItems extends IPCContainer {
remoteList = [...this.props.RemoteMounts];
}
let s3List = [];
if (this.props.s3Supported && !providersOnly) {
s3List = [...this.props.S3Mounts];
}
return [
...providerList,
...remoteList,
...s3List,
];
};
@@ -337,7 +345,11 @@ class MountItems extends IPCContainer {
retryDisplay = (
<Modal>
<Box dxDark dxStyle={{padding: 'var(--default_spacing)', minWidth: '70vw'}}>
<h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)', color: 'var(--text_color_error)'}}>Mount Failed</h1>
<h1 style={{
textAlign: 'center',
paddingBottom: 'var(--default_spacing)',
color: 'var(--text_color_error)'
}}>Mount Failed</h1>
{retryList}
</Box>
</Modal>
@@ -345,8 +357,10 @@ class MountItems extends IPCContainer {
}
let footerItems = [];
if (this.props.remoteSupported) {
footerItems.push(<AddRemoteMount key={'hi_' + footerItems.length}/>);
if (this.props.remoteSupported || this.props.s3Supported) {
footerItems.push(<AddMount remoteSupported={this.props.remoteSupported}
s3Supported={this.props.s3Supported}
key={'hi_' + footerItems.length}/>);
} else {
footerItems.push(<div key={'hi_' + footerItems.length}
style={{height: '27px'}}/>);
@@ -380,15 +394,31 @@ class MountItems extends IPCContainer {
items.push(<div key={'it_' + items.length}
style={{paddingTop: 'var(--default_spacing)'}}/>)
}
items.splice(items.length - 1, 1);
} else {
items.splice(items.length - 1, 1)
}
if (this.props.s3Supported) {
for (const provider of this.props.S3Mounts) {
items.push((
<MountItem allowRemove={true}
browseClicked={this.handleBrowseLocation}
changed={e => this.handleMountLocationChanged(provider, e.target.value)}
clicked={this.handleMountUnMount}
key={'it_' + items.length}
provider={provider}
s3/>
));
items.push(<div key={'it_' + items.length}
style={{paddingTop: 'var(--default_spacing)'}}/>)
}
}
items.splice(items.length - 1, 1);
return (
<div style={{margin: 0, padding: 0}}>
{retryDisplay}
<div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
<div
className={this.props.remoteSupported || this.props.s3Supported ? 'MountItemsRemote' : 'MountItems'}>
{items}
</div>
<div style={{paddingTop: 'var(--default_spacing)'}}/>
@@ -406,6 +436,7 @@ const mapStateToProps = state => {
Platform: state.common.Platform,
ProviderState: state.mounts.ProviderState,
RemoteMounts: state.mounts.RemoteMounts,
S3Mounts: state.mounts.S3Mounts,
}
};