Disables the migration button and show an alert when WebSocket server is down (Closes #3)

parent 756c26d3
Pipeline #77370536 passed with stages
in 9 minutes and 4 seconds
......@@ -3,6 +3,7 @@
## Unreleased
- Updates migration page style
- Disables the migration button and show an alert when WebSocket server is down (Closes #3)
## 0.1.1 - (2019-06-09)
......
......@@ -28,6 +28,7 @@ class App extends React.Component {
render() {
const {
actionCableDisconnected,
backToAppButtonVisible,
error,
loading,
......@@ -52,6 +53,12 @@ class App extends React.Component {
<Loader />
)}
{actionCableDisconnected && (
<Alert color="danger" className="d-flex">
WebSocket connection failed, please check your WebSocket server.
</Alert>
)}
{error && (
<Alert color="danger" className="d-flex">
Something went wrong while fetching the pending migrations.
......@@ -60,26 +67,50 @@ class App extends React.Component {
{Array.isArray(scripts) && scripts.length === 0 && (
<Alert color="warning" className="d-flex">
No pending migration scripts found. Did you ran manually the `rails db:migrate` command?
No pending migration scripts found.
Did you ran manually the `rails db:migrate` command?
</Alert>
)}
{Array.isArray(scripts) && scripts.length > 0 && (
<React.Fragment>
<div className="d-flex flex-row w-100">
<div className="d-flex flex-row flex-fill overflow-auto mt-5" style={{maxHeight: '70vh'}}>
<div
className="d-flex flex-row flex-fill overflow-auto mt-5"
style={{ maxHeight: '70vh' }}
>
<MigrationScriptList scripts={scripts} />
</div>
</div>
<div className="d-flex flex-column align-items-end mt-3 w-100">
{migrateButtonVisible && (
<Button className="mr-3" color="primary" onClick={() => this.migrateNow()} disabled={migrateButtonDisabled}>Migrate now!</Button>
<Button
className="mr-3"
color="primary"
onClick={() => this.migrateNow()}
disabled={migrateButtonDisabled || actionCableDisconnected}
>
Migrate now!
</Button>
)}
{retryButtonVisible && (
<Button className="mr-3" color="danger" onClick={() => this.retryMigrateNow()} disabled={retryButtonDisabled}>Retry failed scripts</Button>
<Button
className="mr-3"
color="danger"
onClick={() => this.retryMigrateNow()}
disabled={retryButtonDisabled || actionCableDisconnected}
>
Retry failed scripts
</Button>
)}
{backToAppButtonVisible && (
<Button className="mr-3" color="success" onClick={() => this.goBackToTheApp()}>Go back to my app!</Button>
<Button
className="mr-3"
color="success"
onClick={() => this.goBackToTheApp()}
>
Go back to my app!
</Button>
)}
</div>
</React.Fragment>
......@@ -91,19 +122,9 @@ class App extends React.Component {
}
}
const mapStateToProps = (state) => {
const {
backToAppButtonVisible,
error,
loading,
migrateButtonDisabled,
migrateButtonVisible,
retryButtonDisabled,
retryButtonVisible,
scripts
} = state.app
return {
const mapStateToProps = ({
actionCable: { disconnected: actionCableDisconnected },
app: {
backToAppButtonVisible,
error,
loading,
......@@ -113,6 +134,16 @@ const mapStateToProps = (state) => {
retryButtonVisible,
scripts
}
}
}) => ({
actionCableDisconnected,
backToAppButtonVisible,
error,
loading,
migrateButtonDisabled,
migrateButtonVisible,
retryButtonDisabled,
retryButtonVisible,
scripts
})
export default connect(mapStateToProps)(App)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment