-
Notifications
You must be signed in to change notification settings - Fork 151
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[IMPROVEMENT] Improve performance of rendering alerts and silences #372
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For the Link Farm
page, we could improve the performance by limiting the number of items shown. Creating a separate API and controlling rendering in Vue would be one of the options.
<div class="panel-heading"> | ||
<a @click.prevent="toggleTarget('silences-project-{{project.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a> | ||
<a @click="toggleCollapse('silences-project-{{project.name|slugify}}')" class="btn btn-warning btn-sm" role="button">Silences</a> | ||
</div> | ||
<table id="silences-project-{{project.name|slugify}}" class="table table-bordered table-condensed"> | ||
<tr v-for="(silence, index) in filterActiveSilences" v-if="silence.labels.project == '{{project.name}}'"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Using v-for
with v-if
is not recommended. Additionally, this iterates over all active alerts/silences, which takes time, but currently doesn't look like a problem. I'll improve this in the next PR.
return new Set(this.globalSilences | ||
.filter(x => x.status.state == 'active') | ||
return new Set(this.filterActiveSilences |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The behavior here has changed slightly. I noticed that filterActiveSilences
was changed from state == 'active'
to state != 'expired'
. I think we want the same behavior here?
* Extract silence form into a new `<silence-form>` component * Template is now included as a X-Template. Without transpilation, we don't have access to single file components, and this way we don't have to keep it as a string * Extract shared state into a simple state store * This allowed to simplify silence label update functions * Cleanup `silence_form.html` * CSRF tokens are no longer needed, since we pass them with cookies * `.lazy` modifier is no longer necessary after #372 * Use arrow functions to avoid `this` reassignment
Description
This PR improves performance of rendering alerts and silences in Vue.
Currently, all alerts and silences are always rendered and hidden using the
collapse
CSS rule. This causes rendering delays on page load and whenever components need to be re-rendered (for example, on form input change; #370).With changes introduced in this PR, all alerts and silences are now hidden behind
v-if
, so the HTML elements are not generated/rendered until the expression is truthy.Detailed changes
toggleComponent()
, which dynamically toggles the state of componentscomponents
object does not have any properties, it needs to be updated usingthis.$set()
toggleComponent()
for all elements that previously usedtoggleTarget()
andcollapse
v-cloak
to top-level element of specific componentsv-show
withv-if
so we skip rendering ofv-for
if it's not necessaryprevent
modifier on@click
computed
methodsfilterActive{Alerts,Silences}
Set
, there's no need to sort the valuestoggleTarget()
totoggleCollapse()
toggleComponent()
cannot be usedImprovements
Before the improvements, the page would be mostly unresponsive until the
Alerts
block is rendered.Note: All measurements are approximate page reload times without cache, and were performed with 1660 alerts, 25 silences and 6000 farms.
Link Farm
since that needs to render the HTML of 6000 farms.Alerts
section, now takes 500ms longer to open, since the HTML elements need to be generated.Alerts
section is open.