[CHANGES] Rewritten display of alerts and silences to use vuejs #124
Conversation
Codecov Report
@@ Coverage Diff @@
## master #124 +/- ##
=========================================
+ Coverage 44.69% 45.1% +0.41%
=========================================
Files 38 38
Lines 2394 2361 -33
=========================================
- Hits 1070 1065 -5
+ Misses 1324 1296 -28
Continue to review full report at Codecov.
|
* Initial work to move from jquery to vuejs for more straightforward code * Fetching alerts and silences uses javascript fetch api * More client side rendering results in smaller requests * Uses datetime-local for datepicker. Currently this only works at chrome but will consider looking at something for firefox and chrome support in the near future
| <dd> | ||
| <ul class="list-inline"> | ||
| <li v-for="(value, label, index) in alert.labels"> | ||
| <a @click.prevent="silenceAppendLabel" class="label label-warning" v-bind:data-label="label" v-bind:data-value="value">{{label}}:{{value}}</a> |
There was a problem hiding this comment.
Since v-on is omitted, it is better to omit v-bind.
There was a problem hiding this comment.
v-on has a shortcut as @ so @click.prevent is the same as v-on:click.prevent. The v-bind:data-label are so I can read those values from the click event
There was a problem hiding this comment.
I know that v-bind also has a shortcut.
There was a problem hiding this comment.
Ah, yes I should probably be more consistent with using short forms or not. Do you have a preference for short vs long forms ?
There was a problem hiding this comment.
I like short form better.
However, if the long form is used in the project, i will use that.
Short form was used in this PR, so I wrote this comment.
| <td> | ||
| <ul class="list-inline"> | ||
| <li v-for="match in silence.matchers"> | ||
| <a @click.prevent="silenceAppendLabel" class="label label-warning" v-bind:data-label="match.name" v-bind:data-value="match.value">{{match.name}}:{{match.value}}</a> |
There was a problem hiding this comment.
same as promgen/templates/promgen/alert_row.html#L11
| @@ -0,0 +1,8 @@ | |||
| {% for message in messages %} | |||
| <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}" role="alert"> | |||
There was a problem hiding this comment.
ref: https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax
This is a little difficult to understand, so how about this ?
| <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}" role="alert"> | |
| <div class="alert" :class="{ alertMessageTags }" role="alert"> |
and you can write such a property.
computed: {
alertMessageTags: function () {
return {
`alert-${message.tags}`: this.message.tags
}
}
}There was a problem hiding this comment.
Ah, that part is actually still django template code it's unfortunate that the vue js and django templates look the same (so in some places I had to have django ignore vuejs blocks)
promgen/static/js/promgen.vue.js
Outdated
| this.fetchSilences(); | ||
| } | ||
| }) | ||
|
|
promgen/proxy.py
Outdated
| return HttpResponse( | ||
| response.text, status=response.status_code, content_type="application/json" | ||
| ) | ||
|
|
| </button> | ||
| {{ message }} | ||
| </div> | ||
| {% endfor %} |
| <button class="btn btn-primary">{% trans "Subscribe to Notifications" %}</button> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| </div> |
kfdm
changed the title
but will consider looking at something for firefox and chrome support
in the near future
There is a slight regression in the since that Firefox and Safari do not properly support
datetime-localforinputfields but since this PR has already gotten rather large, they will be handled in a future pull request