Skip to content

Commit

Permalink
Disable create and clone buttons while waiting for network response. (#…
Browse files Browse the repository at this point in the history 
…423)

I've accidentally created a backfill multiple times thinking I didn't
click the create button and pressing it multiple times as a result. This
disables the button while the request is sending preventing that.
  • Loading branch information
@nath
nath authored Feb 28, 2025
1 parent 1ae6d03 commit 92fd57d
Show file tree
Hide file tree
Showing 2 changed files with 77 additions and 62 deletions.
60 changes: 32 additions & 28 deletions service/web/tabs/app/src/containers/CloneFormContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { LayoutContainer } from "../containers"
interface CloneFormState {
loading: boolean
errorText?: string
cloneButtonDisabled: boolean

statusResponse: any

Expand Down Expand Up @@ -61,6 +62,7 @@ class CloneFormContainer extends React.Component<
this.setState({
loading: false,
errorText: null,
cloneButtonDisabled: false,

statusResponse: null,

Expand Down Expand Up @@ -131,6 +133,35 @@ class CloneFormContainer extends React.Component<
})
}

async handleClick() {
this.setState({ cloneButtonDisabled: true })
try {
const response = await Axios.post(`/backfills/${this.id}/clone`, {
dry_run: this.state.dry_run,
scan_size: this.state.scan_size,
batch_size: this.state.batch_size,
num_threads: this.state.num_threads,
range_clone_type: this.state.range_clone_type,
pkey_range_start: this.nullIfEmpty(this.state.pkey_range_start),
pkey_range_end: this.nullIfEmpty(this.state.pkey_range_end),
backoff_schedule: this.nullIfEmpty(this.state.backoff_schedule),
extra_sleep_ms: this.state.extra_sleep_ms,
parameter_map: this.state.parameters
})
let id = response.data.id
let history = (this.props as any).history
history.push(`/app/backfills/${id}`)
} catch (error) {
console.log(error)
this.setState({
loading: false,
errorText: error.response.data
})
} finally {
this.setState({ cloneButtonDisabled: false })
}
}

render() {
if (!this.state || !this.state.backfills) {
return (
Expand Down Expand Up @@ -320,34 +351,7 @@ class CloneFormContainer extends React.Component<
)}
<Button
onClick={() => {
Axios.post(`/backfills/${this.id}/clone`, {
dry_run: this.state.dry_run,
scan_size: this.state.scan_size,
batch_size: this.state.batch_size,
num_threads: this.state.num_threads,
range_clone_type: this.state.range_clone_type,
pkey_range_start: this.nullIfEmpty(
this.state.pkey_range_start
),
pkey_range_end: this.nullIfEmpty(this.state.pkey_range_end),
backoff_schedule: this.nullIfEmpty(
this.state.backoff_schedule
),
extra_sleep_ms: this.state.extra_sleep_ms,
parameter_map: this.state.parameters
})
.then(response => {
let id = response.data.id
let history = (this.props as any).history
history.push(`/app/backfills/${id}`)
})
.catch(error => {
console.log(error)
this.setState({
loading: false,
errorText: error.response.data
})
})
this.handleClick()
}}
intent={Intent.PRIMARY}
loading={this.state.loading}
Expand Down
79 changes: 45 additions & 34 deletions service/web/tabs/app/src/containers/CreateFormContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { RESERVED_VARIANT } from "../utilities"
interface CreateFormState {
loading: boolean
errorText?: string
createButtonDisabled: boolean
backfill?: IBackfill
dry_run: boolean

Expand Down Expand Up @@ -62,6 +63,7 @@ class CreateFormContainer extends React.Component<
this.setState({
loading: false,
errorText: null,
createButtonDisabled: false,
backfill: null,
dry_run: true,
scan_size: 10000,
Expand All @@ -75,6 +77,45 @@ class CreateFormContainer extends React.Component<
})
}

async handleClick() {
this.setState({ createButtonDisabled: true })

try {
await new Promise(resolve => { setTimeout(resolve, 10000) })
const response = await Axios.post(
`/services/${this.service}/variants/${this.variant}/create`,
{
backfill_name: this.state.backfill.name,
dry_run: this.state.dry_run,
scan_size: this.state.scan_size,
batch_size: this.state.batch_size,
num_threads: this.state.num_threads,
pkey_range_start: this.nullIfEmpty(
this.base64(this.state.pkey_range_start)
),
pkey_range_end: this.nullIfEmpty(
this.base64(this.state.pkey_range_end)
),
backoff_schedule: this.nullIfEmpty(this.state.backoff_schedule),
extra_sleep_ms: this.state.extra_sleep_ms,
parameter_map: this.state.parameters
}
)

let id = response.data.backfill_run_id
let history = (this.props as any).history
history.push(`/app/backfills/${id}`)
} catch (error) {
console.log(error)
this.setState({
loading: false,
errorText: error.response.data
})
} finally {
this.setState({ createButtonDisabled: false })
}
}

render() {
let registeredBackfills = simpleSelectorGet(this.props.simpleNetwork, [
this.registeredBackfills,
Expand Down Expand Up @@ -246,43 +287,13 @@ class CreateFormContainer extends React.Component<
)}
<Button
onClick={() => {
Axios.post(
`/services/${this.service}/variants/${this.variant}/create`,
{
backfill_name: this.state.backfill.name,
dry_run: this.state.dry_run,
scan_size: this.state.scan_size,
batch_size: this.state.batch_size,
num_threads: this.state.num_threads,
pkey_range_start: this.nullIfEmpty(
this.base64(this.state.pkey_range_start)
),
pkey_range_end: this.nullIfEmpty(
this.base64(this.state.pkey_range_end)
),
backoff_schedule: this.nullIfEmpty(
this.state.backoff_schedule
),
extra_sleep_ms: this.state.extra_sleep_ms,
parameter_map: this.state.parameters
}
)
.then(response => {
let id = response.data.backfill_run_id
let history = (this.props as any).history
history.push(`/app/backfills/${id}`)
})
.catch(error => {
console.log(error)
this.setState({
loading: false,
errorText: error.response.data
})
})
this.handleClick()
}}
intent={Intent.PRIMARY}
loading={this.state.loading}
disabled={!this.state.backfill}
disabled={
this.state.createButtonDisabled || !this.state.backfill
}
text={"Create"}
/>
</div>
Expand Down

0 comments on commit 92fd57d

Please sign in to comment.