bbgo_origin/frontend/components/ConfigureDatabaseForm.js

191 lines
7.0 KiB
JavaScript
Raw Normal View History

2021-02-02 09:26:35 +00:00
import React from 'react';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import FormHelperText from '@material-ui/core/FormHelperText';
2021-02-06 06:55:15 +00:00
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';
2021-02-02 09:26:35 +00:00
import Alert from '@material-ui/lab/Alert';
2021-02-06 06:55:15 +00:00
import {configureDatabase, testDatabaseConnection} from '../api/bbgo';
2021-02-02 09:26:35 +00:00
import {makeStyles} from '@material-ui/core/styles';
const useStyles = makeStyles((theme) => ({
formControl: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
minWidth: 120,
},
buttons: {
display: 'flex',
justifyContent: 'flex-end',
marginTop: theme.spacing(2),
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
'& > *': {
marginLeft: theme.spacing(1),
}
},
}));
2021-02-06 06:55:15 +00:00
export default function ConfigureDatabaseForm({onConfigured}) {
2021-02-02 09:26:35 +00:00
const classes = useStyles();
const [mysqlURL, setMysqlURL] = React.useState("root@tcp(127.0.0.1:3306)/bbgo")
2021-02-06 06:55:15 +00:00
const [driver, setDriver] = React.useState("sqlite3");
2021-02-02 09:26:35 +00:00
const [testing, setTesting] = React.useState(false);
const [testResponse, setTestResponse] = React.useState(null);
const [configured, setConfigured] = React.useState(false);
const resetTestResponse = () => {
setTestResponse(null)
}
const handleConfigureDatabase = (event) => {
configureDatabase(mysqlURL, (response) => {
console.log(response);
setTesting(false);
setTestResponse(response);
if (onConfigured) {
setConfigured(true);
setTimeout(onConfigured, 3000);
}
}).catch((err) => {
console.error(err);
2021-02-02 09:26:35 +00:00
setTesting(false);
setTestResponse(err.response.data);
2021-02-02 09:26:35 +00:00
})
}
const handleTestConnection = (event) => {
setTesting(true);
testDatabaseConnection(mysqlURL, (response) => {
console.log(response)
setTesting(false)
setTestResponse(response)
}).catch((err) => {
console.error(err)
2021-02-02 09:26:35 +00:00
setTesting(false)
setTestResponse(err.response.data)
2021-02-02 09:26:35 +00:00
})
};
return (
<React.Fragment>
<Typography variant="h6" gutterBottom>
Configure Database
</Typography>
<Typography variant="body1" gutterBottom>
2021-02-06 06:55:15 +00:00
If you have database installed on your machine, you can enter the DSN string in the following field.
Please note this is optional, you CAN SKIP this step.
2021-02-02 09:26:35 +00:00
</Typography>
2021-02-06 06:55:15 +00:00
2021-02-02 09:26:35 +00:00
<Grid container spacing={3}>
2021-02-06 06:55:15 +00:00
<Grid item xs={12} sm={4}>
<Box m={6}>
<FormControl component="fieldset" required={true}>
<FormLabel component="legend">Database Driver</FormLabel>
<RadioGroup aria-label="driver" name="driver" value={driver} onChange={(event) => {
setDriver(event.target.value);
}}>
<FormControlLabel value="sqlite3" control={<Radio/>} label="Standard (Default)"/>
<FormControlLabel value="mysql" control={<Radio/>} label="MySQL"/>
</RadioGroup>
</FormControl>
<FormHelperText>
</FormHelperText>
</Box>
</Grid>
{driver === "mysql" ? (
<Grid item xs={12} sm={8}>
<TextField id="mysql_url" name="mysql_url" label="MySQL Data Source Name"
fullWidth
required
defaultValue={mysqlURL}
onChange={(event) => {
setMysqlURL(event.target.value)
resetTestResponse()
}}
/>
<FormHelperText>MySQL DSN</FormHelperText>
<Typography variant="body1" gutterBottom>
If you have database installed on your machine, you can enter the DSN string like the
2021-02-02 09:26:35 +00:00
following
format:
2021-02-06 06:55:15 +00:00
<br/>
<pre><code>root:password@tcp(127.0.0.1:3306)/bbgo</code></pre>
2021-02-02 09:26:35 +00:00
2021-02-06 06:55:15 +00:00
<br/>
Be sure to create your database before using it. You need to execute the following statement
2021-02-02 09:26:35 +00:00
to
create a database:
2021-02-06 06:55:15 +00:00
<br/>
<pre><code>CREATE DATABASE bbgo CHARSET utf8;</code></pre>
</Typography>
</Grid>
) : (
<Grid item xs={12} sm={8}>
<Box m={6}>
<Typography variant="body1" gutterBottom>
If you don't know what to choose, just pick the standard driver (sqlite3).
<br/>
For professionals, you can pick MySQL driver, BBGO works best with MySQL, especially for
larger data scale.
</Typography>
</Box>
</Grid>
)}
2021-02-02 09:26:35 +00:00
</Grid>
2021-02-06 06:55:15 +00:00
2021-02-02 09:26:35 +00:00
<div className={classes.buttons}>
<Button
color="primary"
onClick={handleTestConnection}
disabled={testing || configured}
>
{testing ? "Testing" : "Test Connection"}
</Button>
<Button
variant="contained"
color="primary"
disabled={testing || configured}
onClick={handleConfigureDatabase}
>
Configure
</Button>
</div>
{
testResponse ? testResponse.error ? (
<Box m={2}>
<Alert severity="error">{testResponse.error}</Alert>
</Box>
) : testResponse.success ? (
<Box m={2}>
<Alert severity="success">Connection Test Succeeded</Alert>
</Box>
) : null : null
}
</React.Fragment>
);
}