mirror of
https://github.com/jpros/tacticalrmm-web.git
synced 2026-03-05 13:24:04 +00:00
327 lines
11 KiB
Vue
327 lines
11 KiB
Vue
<template>
|
|
<q-dialog ref="dialog" @hide="onHide">
|
|
<div class="q-dialog-plugin" style="width: 90vw; max-width: 90vw">
|
|
<q-card>
|
|
<q-bar>
|
|
<q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />Alerts Manager
|
|
<q-space />
|
|
<q-btn dense flat icon="close" v-close-popup>
|
|
<q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
|
|
</q-btn>
|
|
</q-bar>
|
|
<div class="q-pa-md" style="min-height: 65vh; max-height: 65vh">
|
|
<div class="q-gutter-sm">
|
|
<q-btn ref="new" label="New" dense flat push unelevated no-caps icon="add" @click="showAddTemplateModal" />
|
|
<q-btn
|
|
ref="edit"
|
|
label="Edit"
|
|
:disable="!selectedTemplate"
|
|
dense
|
|
flat
|
|
push
|
|
unelevated
|
|
no-caps
|
|
icon="edit"
|
|
@click="showEditTemplateModal(selectedTemplate)"
|
|
/>
|
|
<q-btn
|
|
ref="delete"
|
|
label="Delete"
|
|
:disable="!selectedTemplate"
|
|
dense
|
|
flat
|
|
push
|
|
unelevated
|
|
no-caps
|
|
icon="delete"
|
|
@click="deleteTemplate(selectedTemplate)"
|
|
/>
|
|
</div>
|
|
<q-table
|
|
dense
|
|
:data="templates"
|
|
:columns="columns"
|
|
:pagination.sync="pagination"
|
|
row-key="id"
|
|
binary-state-sort
|
|
hide-pagination
|
|
virtual-scroll
|
|
:rows-per-page-options="[0]"
|
|
no-data-label="No Alert Templates"
|
|
>
|
|
<!-- header slots -->
|
|
<template v-slot:header-cell-is_active="props">
|
|
<q-th :props="props" auto-width>
|
|
<q-icon name="power_settings_new" size="1.5em">
|
|
<q-tooltip>Enable Template</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
<template v-slot:header-cell-agent_settings="props">
|
|
<q-th :props="props" auto-width>
|
|
<q-icon name="devices" size="1.5em">
|
|
<q-tooltip>Has agent alert settings</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
<template v-slot:header-cell-check_settings="props">
|
|
<q-th :props="props" auto-width>
|
|
<q-icon name="fas fa-check-double" size="1.5em">
|
|
<q-tooltip>Has check alert settings</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
<template v-slot:header-cell-task_settings="props">
|
|
<q-th :props="props" auto-width>
|
|
<q-icon name="fas fa-tasks" size="1.5em">
|
|
<q-tooltip>Has task alert settings</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
<!-- body slots -->
|
|
<template v-slot:body="props">
|
|
<q-tr
|
|
:props="props"
|
|
class="cursor-pointer"
|
|
:class="rowSelectedClass(props.row.id, selectedTemplate)"
|
|
@click="selectedTemplate = props.row"
|
|
@contextmenu="selectedTemplate = props.row"
|
|
@dblclick="showEditTemplateModal(props.row)"
|
|
>
|
|
<!-- context menu -->
|
|
<q-menu context-menu>
|
|
<q-list dense style="min-width: 200px">
|
|
<q-item clickable v-close-popup @click="showEditTemplateModal(props.row)">
|
|
<q-item-section side>
|
|
<q-icon name="edit" />
|
|
</q-item-section>
|
|
<q-item-section>Edit</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup @click="deleteTemplate(props.row)">
|
|
<q-item-section side>
|
|
<q-icon name="delete" />
|
|
</q-item-section>
|
|
<q-item-section>Delete</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator></q-separator>
|
|
|
|
<q-item clickable v-close-popup @click="showAlertExclusions(props.row)">
|
|
<q-item-section side>
|
|
<q-icon name="rule" />
|
|
</q-item-section>
|
|
<q-item-section>Alert Exclusions</q-item-section>
|
|
</q-item>
|
|
|
|
<q-separator></q-separator>
|
|
|
|
<q-item clickable v-close-popup>
|
|
<q-item-section>Close</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
<!-- enabled checkbox -->
|
|
<q-td>
|
|
<q-checkbox dense @input="toggleEnabled(props.row)" v-model="props.row.is_active" />
|
|
</q-td>
|
|
<!-- agent settings -->
|
|
<q-td>
|
|
<q-icon v-if="props.row.agent_settings" color="primary" name="done" size="sm">
|
|
<q-tooltip>Alert template has agent alert settings</q-tooltip>
|
|
</q-icon>
|
|
</q-td>
|
|
<!-- text settings -->
|
|
<q-td>
|
|
<q-icon v-if="props.row.check_settings" color="primary" name="done" size="sm">
|
|
<q-tooltip>Alert template has check alert settings</q-tooltip>
|
|
</q-icon>
|
|
</q-td>
|
|
<!-- dashboard settings -->
|
|
<q-td>
|
|
<q-icon v-if="props.row.task_settings" color="primary" name="done" size="sm">
|
|
<q-tooltip>Alert template has task alert settings</q-tooltip>
|
|
</q-icon>
|
|
</q-td>
|
|
<!-- name -->
|
|
<q-td>{{ props.row.name }}</q-td>
|
|
<!-- applied to -->
|
|
<q-td>Applied To Placeholder</q-td>
|
|
<!-- alert exclusions -->
|
|
<q-td>
|
|
<span
|
|
style="cursor: pointer; text-decoration: underline"
|
|
class="text-primary"
|
|
@click="showAlertExclusions(props.row)"
|
|
>Alert Exclusions ({{
|
|
props.row.excluded_agents.length +
|
|
props.row.excluded_clients.length +
|
|
props.row.excluded_sites.length
|
|
}})</span
|
|
></q-td
|
|
>
|
|
<!-- actions -->
|
|
<q-td>{{ props.row.actions.length }} actions</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</q-card>
|
|
</div>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import mixins from "@/mixins/mixins";
|
|
import AlertTemplateForm from "@/components/modals/alerts/AlertTemplateForm";
|
|
import AlertExclusions from "@/components/modals/alerts/AlertExclusions";
|
|
|
|
export default {
|
|
name: "AlertsManager",
|
|
mixins: [mixins],
|
|
data() {
|
|
return {
|
|
selectedTemplate: null,
|
|
templates: [],
|
|
columns: [
|
|
{ name: "is_active", label: "Active", field: "is_active", align: "left" },
|
|
{ name: "agent_settings", label: "Agent Settings", field: "agent_settings" },
|
|
{ name: "check_settings", label: "Check Settings", field: "check_settings" },
|
|
{ name: "task_settings", label: "Task Settings", field: "task_settings" },
|
|
{ name: "name", label: "Name", field: "name", align: "left" },
|
|
{
|
|
name: "applied_to",
|
|
label: "Applied To",
|
|
field: "applied_to",
|
|
align: "left",
|
|
},
|
|
{
|
|
name: "alert_exclusions",
|
|
label: "Alert Exclusions",
|
|
field: "alert_exclusions",
|
|
align: "left",
|
|
},
|
|
{
|
|
name: "actions",
|
|
label: "Actions",
|
|
field: "actions",
|
|
align: "left",
|
|
},
|
|
],
|
|
pagination: {
|
|
rowsPerPage: 0,
|
|
sortBy: "name",
|
|
descending: true,
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
getTemplates() {
|
|
this.$q.loading.show();
|
|
this.$axios
|
|
.get("alerts/alerttemplates/")
|
|
.then(r => {
|
|
this.templates = r.data;
|
|
this.$q.loading.hide();
|
|
})
|
|
.catch(e => {
|
|
this.$q.loading.hide();
|
|
this.notifyError("Unable to pull Alert Templates.");
|
|
});
|
|
},
|
|
clearRow() {
|
|
this.selectedTemplate = null;
|
|
},
|
|
refresh() {
|
|
this.getTemplates();
|
|
this.clearRow();
|
|
},
|
|
deleteTemplate(template) {
|
|
this.$q
|
|
.dialog({
|
|
title: `Delete alert template ${template.name}?`,
|
|
cancel: true,
|
|
ok: { label: "Delete", color: "negative" },
|
|
})
|
|
.onOk(() => {
|
|
this.$q.loading.show();
|
|
this.$axios
|
|
.delete(`alerts/alerttemplates/${template.id}/`)
|
|
.then(r => {
|
|
this.getTemplates();
|
|
this.$q.loading.hide();
|
|
this.notifySuccess(`Alert template ${template.name} was deleted!`);
|
|
})
|
|
.catch(error => {
|
|
this.$q.loading.hide();
|
|
this.notifyError(`An Error occured while deleting alert template: ${template.name}`);
|
|
});
|
|
});
|
|
},
|
|
showEditTemplateModal(template) {
|
|
this.$q
|
|
.dialog({
|
|
component: AlertTemplateForm,
|
|
parent: this,
|
|
alertTemplate: template,
|
|
})
|
|
.onOk(() => {
|
|
this.refresh();
|
|
});
|
|
},
|
|
showAddTemplateModal() {
|
|
this.clearRow();
|
|
this.$q
|
|
.dialog({
|
|
component: AlertTemplateForm,
|
|
parent: this,
|
|
})
|
|
.onOk(() => {
|
|
this.refresh();
|
|
});
|
|
},
|
|
showAlertExclusions(template) {
|
|
this.$q
|
|
.dialog({
|
|
component: AlertExclusions,
|
|
parent: this,
|
|
template: template,
|
|
})
|
|
.onOk(() => {
|
|
this.refresh();
|
|
});
|
|
},
|
|
toggleEnabled(template) {
|
|
let text = template.is_active ? "Template enabled successfully" : "Template disabled successfully";
|
|
|
|
const data = {
|
|
id: template.id,
|
|
is_active: template.is_active,
|
|
};
|
|
|
|
this.$axios
|
|
.put(`alerts/alerttemplates/${template.id}/`, data)
|
|
.then(r => {
|
|
this.notifySuccess(text);
|
|
})
|
|
.catch(error => {
|
|
this.notifyError("An Error occured while editing the template");
|
|
});
|
|
},
|
|
rowSelectedClass(id, selectedTemplate) {
|
|
if (selectedTemplate && selectedTemplate.id === id) return this.$q.dark.isActive ? "highlight-dark" : "highlight";
|
|
},
|
|
show() {
|
|
this.$refs.dialog.show();
|
|
},
|
|
hide() {
|
|
this.$refs.dialog.hide();
|
|
},
|
|
onHide() {
|
|
this.$emit("hide");
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getTemplates();
|
|
},
|
|
};
|
|
</script> |