Big Performance Bug: Many links cause full page reload

[torkelo]

Many links, like dashboard links from endpoint list and configure links. Most links it seems cause full page reload. Very expensive with a single page application like Grafana.

The reason for some could be the use of $event.stopPropagation(); which stops the navigation event from being handled by angular instead the browser uses the default action and does a full page reload with the anchor link.

Very basic testing shows that this is causing about 1-5 seconds of dashboard load time when clicking on endpoint or hearts from the endpoint list.

[woodsaj]

@torkelo any suggestions on how to fix this? The stopPropagation() was added to handle ng-click'able regions layered over one another.

[torkelo]

it's tricky, will try a few things :)

[torkelo]

Ok found a very nice solution.

Instead of stopping the propagation on the links, ignore them in the parent container's gotoDashboard method. It's quite easy to filter these clicks out.

gotoDashboard(endpoint, evt) {
    var clickTargetIsLinkOrHasLinkParents = $(evt.target).closest('a').length > 0;
    if (clickTargetIsLinkOrHasLinkParents === false) {
      this.$location.path("/dashboard/db/worldping-endpoint-summary").search({"var-collector": "All", "var-endpoint": endpoint.slug});
    }
  }

The logic is that if the click originated from or has an anchor parent, then ignore the event. This way the problem is isolated to one location instead of having stopPropagation everywhere.

I tried to apply the same solution to the endpoint details page and probe pages but I do not really understand the logic there, the anchors all use gotoDashboard and none use hrefs so to use the same approach requires a bigger refactoring. I would suggest building the url on the view model and use that in the view template (so it can use href's instead of ng-clicks on the anchors)