call sync api to check sync status

This commit is contained in:
c9s 2021-02-21 18:08:22 +08:00
parent 9ea1a22b3f
commit 9d4047f21d
2 changed files with 52 additions and 2 deletions

View File

@ -8,6 +8,12 @@ export function ping(cb) {
}); });
} }
export function querySyncStatus(cb) {
return axios.get(baseURL + '/api/environment/syncing').then(response => {
cb(response.data.syncing)
});
}
export function testDatabaseConnection(params, cb) { export function testDatabaseConnection(params, cb) {
return axios.post(baseURL + '/api/setup/test-db', params).then(response => { return axios.post(baseURL + '/api/setup/test-db', params).then(response => {
cb(response.data) cb(response.data)

View File

@ -4,21 +4,46 @@ import Head from 'next/head';
import {ThemeProvider} from '@material-ui/core/styles'; import {ThemeProvider} from '@material-ui/core/styles';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme'; import theme from '../src/theme';
import '../styles/globals.css' import '../styles/globals.css'
import {querySyncStatus} from "../api/bbgo";
export default function MyApp(props) { export default function MyApp(props) {
const {Component, pageProps} = props; const {Component, pageProps} = props;
const [syncing, setSyncing] = React.useState(true)
React.useEffect(() => { React.useEffect(() => {
// Remove the server-side injected CSS. // Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side'); const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) { if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles); jssStyles.parentElement.removeChild(jssStyles);
} }
let poller = null
const pollSyncStatus = () => {
querySyncStatus((status) => {
setSyncing(status)
if (!status) {
clearInterval(poller)
}
}).catch((err) => {
console.error(err)
})
}
poller = setInterval(pollSyncStatus, 1000)
}, []); }, []);
const handleClose = (e) => {}
return ( return (
<React.Fragment> <React.Fragment>
<Head> <Head>
@ -28,8 +53,27 @@ export default function MyApp(props) {
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline/> <CssBaseline/>
{
syncing ? (
<React.Fragment>
<Dialog
open={syncing}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Syncing Trades"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
The environment is syncing trades from the exchange sessions.
Please wait a moment...
</DialogContentText>
</DialogContent>
</Dialog>
</React.Fragment>
) : (
<Component {...pageProps}/> <Component {...pageProps}/>
)
}
</ThemeProvider> </ThemeProvider>
</React.Fragment> </React.Fragment>
); );