Abnormally high memory usage

[StayYoung2yz]

Hi.

Issue Summary
Abnormally high memory usage.

Environment

• OS: Windows & Mac

• API version: alerta v8.0.3, alerta-webui v8.0.1

• Deployment: Local test, Pycharm, VSCode

• Database: MongoDB

• Server config:
  Auth enabled? No
  Customer views? No

• web UI version: v8.0.1

• CLI version: v8.0.3

To Reproduce
Steps to reproduce the behavior:

1. Send about 30 alerts by Postman.
2. high JS memory usage and slow GC happens, even the animation is a little bit slow when changing tabs.

Expected behavior
Better performance.

Screenshots

Additional context
#162
Looks like this bug. Is it fixed?

[StayYoung2yz]

And here I think is strange.
Alerts.vue, line 394:

refreshAlerts() {
      this.getEnvironments()
      this.getAlerts()
        .then(() => {
          this.isNewOpenAlerts && this.playSound()
          this.timer = setTimeout(() => this.refreshAlerts(), this.refreshInterval)
        })
 }

alert.service.ts, line 40:

getAlerts(query: object) {
    if (query && queryInProgress) {
      queryInProgress.cancel('Too many search requests. Cancelling current query.')
    }
    queryInProgress = axios.CancelToken.source()
    let config = {
      params: query,
      cancelToken: queryInProgress.token
    }
    return api.get('/alerts', config)
}

If I stayed at the list page and do nothing, the interval will call getAlerts again, query && queryInProgress will be true.
Seems this request should be cancelled, but it still be sended to backend.

[satterly]

There were some performance improvements recently. Can you run the latest version (v8.3.1) and let me know if you see the same issues?

[StayYoung2yz]

Hi Satterly.
Thanks a lot for your help, the performance has improved after #430 and #431.

And I guess the list filter can also be lazy loaded.
Please check my pull request.

[satterly]

Thanks I'll take a look at your PR. Did you test master? ie. including #433?