Skip to content

Commit

Permalink
refactor filter selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@bai1024
bai1024 committed Sep 9, 2024
1 parent 59f703c commit e51a19d
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 52 deletions.
108 changes: 62 additions & 46 deletions promgen/static/js/promgen.vue.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,31 +39,6 @@ const silenceStore = Vue.reactive({
},
});

const silenceListStore = Vue.reactive({
state: {
show: false,
labels: []
},
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, value) {
const index = this.state.labels.findIndex(item => item.label === label && item.value === value);
if (index > -1) {
this.state.labels.splice(index, 1);
}
},
showModal() {
this.state.show = true;
},
hideModal() {
this.state.show = false;
},
});

const exporterTestResultStore = Vue.reactive({
results: {},
addResult(url, statusCode) {
Expand Down Expand Up @@ -352,6 +327,31 @@ app.component('exporter-test', {
}
});

const silenceListStore = Vue.reactive({
state: {
show: false,
labels: []
},
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, value) {
const index = this.state.labels.findIndex(item => item.label === label && item.value === value);
if (index > -1) {
this.state.labels.splice(index, 1);
}
},
showModal() {
this.state.show = true;
},
hideModal() {
this.state.show = false;
},
});

app.component('silence-list-modal', {
template: '#silence-list-modal-template',
delimiters: ['[[', ']]'],
Expand All @@ -360,7 +360,6 @@ app.component('silence-list-modal', {
return {
state: silenceListStore.state,
form: {
labels: [],
label: '',
value: ''
},
Expand All @@ -372,26 +371,49 @@ app.component('silence-list-modal', {
return this.$root.activeSilences || [];
},
filteredSilences() {
if (!this.form.labels || this.form.labels.length === 0) {
if (!this.state.labels || this.state.labels.length === 0) {
return this.activeSilences;
}

return this.activeSilences.filter(silence => {
return this.form.labels.some(filterLabel => {
return this.state.labels.some(filterLabel => {
return silence.matchers.some(matcher =>
matcher.name === filterLabel.label &&
matcher.value === filterLabel.value
);
});
});
});
},
uniqueLabels() {
const labels = new Set();
this.activeSilences.forEach(silence => {
silence.matchers.forEach(matcher => {
labels.add(matcher.name);
});
});
return Array.from(labels);
},
filteredValues() {
if (!this.form.label) return [];
const values = new Set();
this.activeSilences.forEach(silence => {
silence.matchers.forEach(matcher => {
if (matcher.name === this.form.label) {
values.add(matcher.value);
}
});
});
return Array.from(values);
}
},
methods: {
hideModal() {
const modal = $('#silenceListModal');
if (modal.length) {
globalStore.setMessages([]);
this.form.labels = [];
silenceListStore.state.labels = [];
this.form.label = '';
this.form.value = '';
modal.modal('hide');
}
},
Expand All @@ -406,23 +428,23 @@ app.component('silence-list-modal', {
},
addFilterLabel(label, value) {
if (label && value) {
if (!this.form.labels.some(item => item.label === label && item.value === value)) {
this.form.labels.push({ label, value });
if (!this.state.labels.some(item => item.label === label && item.value === value)) {
silenceListStore.addFilterLabel(label, value);
}
silenceListStore.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 });
if (!this.state.labels.some(item => item.label === this.form.label && item.value === this.form.value)) {
silenceListStore.addFilterLabel(this.form.label, this.form.value);
}
silenceListStore.addFilterLabel(this.form.label, this.form.value);
this.form.label = '';
this.form.value = '';
}
this.form.label = '';
this.form.value = '';
},
removeFilterLabel(label, value) {
this.form.labels = this.form.labels.filter(item => !(item.label === label && item.value === value));
silenceListStore.removeFilterLabel(label, value);
},
updateValueOptions() {
this.form.value = '';
}
},
watch: {
"state.show"(val) {
Expand All @@ -431,12 +453,6 @@ app.component('silence-list-modal', {
} else {
this.hideModal();
}
},
"state.labels": {
handler(newLabels) {
this.form.labels = newLabels.map(label => ({ ...label }));
},
deep: true
}
},
});
15 changes: 9 additions & 6 deletions promgen/templates/promgen/vue/silence_list_modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,19 @@ <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="inpout filter matcher label" v-model="form.label" class="form-control">
<select v-model="form.label" class="form-control" @change="updateValueOptions">
<option value="">Select a label</option>
<option v-for="label in uniqueLabels" :value="label">[[label]]</option>
</select>
<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>
<select v-model="form.value" class="form-control" :disabled="!form.label">
<option value="">Select a value</option>
<option v-for="value in filteredValues" :value="value">[[value]]</option>
</select>
<button type="button" class="btn btn-primary ml-2" @click="addFilterLabel" :disabled="!form.label || !form.value">&plus;</button>
</div>
</div>
</div>


<div class="row mb-4">
<div class="col-md-12">
<div class="labels">
Expand All @@ -47,7 +51,6 @@ <h4 class="modal-title" id="silenceModalLabel">Silence</h4>
<th>Action</th>
</tr>
</thead>

<tbody>
<template v-for="silence in filteredSilences" :key="silence.id">
<silence-row :silence="silence" label-color="info" @matcher-click="addFilterLabel" />
Expand Down

0 comments on commit e51a19d

Please sign in to comment.