Skip to content

Commit

Permalink
implement filter feature
Browse files Browse the repository at this point in the history
  • Loading branch information
bai1024 committed Aug 20, 2024
1 parent c23a795 commit 0ced17b
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 39 deletions.
87 changes: 55 additions & 32 deletions promgen/static/js/promgen.vue.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,14 @@ const silenceTableStore = Vue.reactive({
show: false,
labels: []
},
addFilterLabel(label) {
if (!this.state.labels.includes(label)) {
this.state.labels.push(label);
} else {
console.log(`Label "${label}" already exists.`);
addFilterLabel(label, value) {
const existingLabel = this.state.labels.find(item => item.label === label && item.value === value);
if (!existingLabel) {
this.state.labels.push({ label, value });
}
},
removeFilterLabel(label) {
const index = this.state.labels.indexOf(label);
removeFilterLabel(label, value) {
const index = this.state.labels.findIndex(item => item.label === label && item.value === value);
if (index > -1) {
this.state.labels.splice(index, 1);
}
Expand Down Expand Up @@ -357,59 +356,77 @@ app.component('silence-table-modal', {
template: '#silence-table-modal-template',
delimiters: ['[[', ']]'],
mixins: [mixins],
data: () => ({
state: silenceTableStore.state,
form: {},
store: dataStore
}),
data() {
return {
state: silenceTableStore.state,
form: {
labels: [],
label: '',
value: ''
},
store: dataStore
};
},
computed: {
globalMessages() {
return globalStore.state.messages;
},
activeSilences() {
return this.$root.activeSilences;
return this.$root.activeSilences || [];
},
filteredSilences() {
if (!this.form.labels || this.form.labels.length === 0) {
return this.activeSilences;
}

return this.activeSilences.filter(silence => {
return this.state.labels.every(label =>
silence.labels[label] !== undefined
);
});

// TODO: Implement filtering
return this.form.labels.some(filterLabel => {
return silence.matchers.some(matcher =>
matcher.name === filterLabel.label &&
matcher.value === filterLabel.value
);
});
});
}
},
methods: {
hideModal() {
const modal = $('#silenceTableModal');
if (modal.length) {
globalStore.setMessages([]);
this.form = {};
this.state = silenceTableStore.state;
this.form.labels = [];
modal.modal('hide');
}
},
showModal() {
const modal = $('#silenceTableModal');
if (modal.length) {
modal.on('hidden.bs.modal', function (e) {
modal.on('hidden.bs.modal', () => {
silenceTableStore.hideModal();
});
modal.modal('show');
}
},
addFilterLabel() {
if (this.form.label) {
silenceTableStore.addFilterLabel(this.form.label);
addFilterLabel(label, value) {
if (label && value) {
if (!this.form.labels.some(item => item.label === label && item.value === value)) {
this.form.labels.push({ label, value });
}
silenceTableStore.addFilterLabel(label, value);
} else if (this.form.label && this.form.value) {
if (!this.form.labels.some(item => item.label === this.form.label && item.value === this.form.value)) {
this.form.labels.push({ label: this.form.label, value: this.form.value });
}
silenceTableStore.addFilterLabel(this.form.label, this.form.value);
this.form.label = '';
this.$forceUpdate();
}
this.form.value = '';
}
},

removeFilterLabel(label, value) {
this.form.labels = this.form.labels.filter(item => !(item.label === label && item.value === value));
silenceTableStore.removeFilterLabel(label, value);
},

removeFilterLabel(label) {
silenceTableStore.removeFilterLabel(label);
this.$forceUpdate();
},
},
watch: {
"state.show"(val) {
Expand All @@ -419,5 +436,11 @@ app.component('silence-table-modal', {
this.hideModal();
}
},
"state.labels": {
handler(newLabels) {
this.form.labels = newLabels.map(label => ({ ...label }));
},
deep: true
}
},
});
18 changes: 11 additions & 7 deletions promgen/templates/promgen/vue/silence_table_modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
<div class="row mb-4">
<div class="col-md-12">
<div style="display: flex;align-items: center;">
<input type="text" placeholder="Input filter matchers" v-model="form.label" class="form-control">
<input type="text" placeholder="inpout filter matcher label" v-model="form.label" class="form-control">
<input type="text" placeholder="=~" style="max-width: 50px; text-align: center;" class="form-control ml-2 mr-2" disabled>
<input type="text" placeholder="input filter matcher value" v-model="form.value" class="form-control">
<button type="button" class="btn btn-primary ml-2" @click="addFilterLabel">&plus;</button>
</div>
</div>
Expand All @@ -23,10 +25,10 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
<div class="col-md-12">
<div class="labels">
<ul class="list-inline promgen-labels-list">
<li v-for="label in state.labels">
<li v-for="item in state.labels" :key="`${item.label}-${item.value}`">
<div class="promgen-label-target">
<span>[[label]]</span>
<span @click="removeFilterLabel(label)" aria-hidden="true" class="promgen-label-close">&times;</span>
<span>[[item.label]]=~[[item.value]]</span>
<span @click="removeFilterLabel(item.label, item.value)" aria-hidden="true" class="promgen-label-close">&times;</span>
</div>
</li>
</ul>
Expand All @@ -45,11 +47,13 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
<th>Action</th>
</tr>
</thead>

<tbody>
<tr v-for="silence in filteredSilences">
{% include 'promgen/silence_row.html' %}
</tr>
<template v-for="silence in filteredSilences" :key="silence.id">
<silence-row :silence="silence" label-color="warning" @matcher-click="addFilterLabel" />
</template>
</tbody>

</table>
</div>
</div>
Expand Down

0 comments on commit 0ced17b

Please sign in to comment.