Repository: louislam/uptime-kuma
File: src/pages/DashboardHome.vue (Vue)

Code before:

            if (monitorIDs.length === 0) {
                this.clearingAllEvents = false;
                this.$root.notyf.error(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (res && res.ok) {
                        done++;
                    } else {
                        failed++;
                    }
                    if (done + failed === monitorIDs.length) {
                        this.clearingAllEvents = false;
                        this.page = 1;
                        this.getImportantHeartbeatListLength();
                        if (failed === 0) {
                            this.$root.notyf.success(this.$t("Events cleared successfully"));
                        } else {
                            this.$root.notyf.error(this.$t("Some events could not be cleared"));
                        }
                    }
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;

    tr {
        transition: all ease-in-out 0.2ms;
    }

Review comment (bug):
This seems kind of hacky. Can we move this outside of the loop?

```suggestion
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.notyf.success(this.$t("Events cleared successfully"));
            } else {
                this.$root.notyf.error(this.$t("Some events could not be cleared"));
            }

```

Code after:
            if (total === 0) {
                this.clearingAllEvents = false;
                this.$root.toastError(this.$t("No monitors found"));
                return;
            }

            monitorIDs.forEach((monitorID) => {
                this.$root.getSocket().emit("clearEvents", monitorID, (res) => {
                    if (!res || !res.ok) {
                        failed++;
                    }
                });
            });
            this.clearingAllEvents = false;
            this.page = 1;
            this.getImportantHeartbeatListLength();
            if (failed === 0) {
                this.$root.toastSuccess(this.$t("Events cleared successfully"));
            } else {
                this.$root.toastError(
                    this.$t("Could not clear events", {
                        failed,
                        total,
                    })
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../assets/vars";

.num {
    font-size: 30px;
    color: $primary;
    font-weight: bold;
    display: block;
}

.shadow-box {
    padding: 20px;
}

table {
    font-size: 14px;

    tr {
        transition: all ease-in-out 0.2ms;
    }