368 lines
10 KiB
Vue
368 lines
10 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<q-btn
|
|
v-if="!!selectedPolicy"
|
|
class="q-mr-sm"
|
|
dense
|
|
flat
|
|
push
|
|
@click="getTasks"
|
|
icon="refresh"
|
|
/>
|
|
<q-btn
|
|
v-if="!!selectedPolicy"
|
|
icon="add"
|
|
label="Add Task"
|
|
no-caps
|
|
dense
|
|
flat
|
|
push
|
|
@click="showAddTask"
|
|
/>
|
|
<q-table
|
|
:table-class="{
|
|
'table-bgcolor': !$q.dark.isActive,
|
|
'table-bgcolor-dark': $q.dark.isActive,
|
|
}"
|
|
class="tabs-tbl-sticky"
|
|
:rows="tasks"
|
|
:columns="columns"
|
|
:rows-per-page-options="[0]"
|
|
v-model:pagination="pagination"
|
|
dense
|
|
row-key="id"
|
|
binary-state-sort
|
|
hide-pagination
|
|
virtual-scroll
|
|
>
|
|
<!-- No data Slot -->
|
|
<template v-slot:no-data>
|
|
<div class="full-width row flex-center q-gutter-sm">
|
|
<span v-if="!selectedPolicy"
|
|
>Click on a policy to see the tasks</span
|
|
>
|
|
<span v-else>There are no tasks added to this policy</span>
|
|
</div>
|
|
</template>
|
|
<!-- header slots -->
|
|
<template v-slot:header-cell-enabled="props">
|
|
<q-th auto-width :props="props">
|
|
<small>Enabled</small>
|
|
</q-th>
|
|
</template>
|
|
|
|
<template v-slot:header-cell-smsalert="props">
|
|
<q-th auto-width :props="props">
|
|
<q-icon name="phone_android" size="1.5em">
|
|
<q-tooltip>SMS Alert</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
|
|
<template v-slot:header-cell-emailalert="props">
|
|
<q-th auto-width :props="props">
|
|
<q-icon name="email" size="1.5em">
|
|
<q-tooltip>Email Alert</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
<template v-slot:header-cell-dashboardalert="props">
|
|
<q-th auto-width :props="props">
|
|
<q-icon name="notifications" size="1.5em">
|
|
<q-tooltip>Dashboard Alert</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
|
|
<template v-slot:header-cell-collector="props">
|
|
<q-th auto-width :props="props">
|
|
<q-icon name="mdi-database-arrow-up" size="1.5em">
|
|
<q-tooltip>Collector Task</q-tooltip>
|
|
</q-icon>
|
|
</q-th>
|
|
</template>
|
|
|
|
<!-- body slots -->
|
|
<template v-slot:body="props">
|
|
<q-tr class="cursor-pointer" @dblclick="showEditTask(props.row)">
|
|
<!-- context menu -->
|
|
<q-menu context-menu>
|
|
<q-list dense style="min-width: 200px">
|
|
<q-item clickable v-close-popup @click="runTask(props.row)">
|
|
<q-item-section side>
|
|
<q-icon name="play_arrow" />
|
|
</q-item-section>
|
|
<q-item-section>Run task now</q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-close-popup
|
|
@click="showEditTask(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="deleteTask(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-item clickable v-close-popup @click="showStatus(props.row)">
|
|
<q-item-section side>
|
|
<q-icon name="sync" />
|
|
</q-item-section>
|
|
<q-item-section>Policy Status</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item clickable v-close-popup>
|
|
<q-item-section>Close</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
<!-- tds -->
|
|
<q-td>
|
|
<q-checkbox
|
|
dense
|
|
@update:model-value="
|
|
editTask(props.row, { enabled: !props.row.enabled })
|
|
"
|
|
v-model="props.row.enabled"
|
|
/>
|
|
</q-td>
|
|
|
|
<q-td>
|
|
<q-checkbox
|
|
dense
|
|
@update:model-value="
|
|
editTask(props.row, { text_alert: !props.row.text_alert })
|
|
"
|
|
v-model="props.row.text_alert"
|
|
/>
|
|
</q-td>
|
|
<!-- email alert -->
|
|
<q-td>
|
|
<q-checkbox
|
|
dense
|
|
@update:model-value="
|
|
editTask(props.row, { email_alert: !props.row.email_alert })
|
|
"
|
|
v-model="props.row.email_alert"
|
|
/>
|
|
</q-td>
|
|
<!-- dashboard alert -->
|
|
<q-td>
|
|
<q-checkbox
|
|
dense
|
|
@update:model-value="
|
|
editTask(props.row, {
|
|
dashboard_alert: !props.row.dashboard_alert,
|
|
})
|
|
"
|
|
v-model="props.row.dashboard_alert"
|
|
/>
|
|
</q-td>
|
|
<!-- is collector task -->
|
|
<q-td>
|
|
<q-icon
|
|
v-if="!!props.row.custom_field"
|
|
style="font-size: 1.3rem"
|
|
name="check"
|
|
>
|
|
<q-tooltip
|
|
>The task updates a custom field on the agent</q-tooltip
|
|
>
|
|
</q-icon>
|
|
</q-td>
|
|
<q-td>{{ props.row.name }}</q-td>
|
|
<q-td>{{ props.row.schedule }}</q-td>
|
|
<q-td>
|
|
<span
|
|
style="cursor: pointer; text-decoration: underline"
|
|
@click="showStatus(props.row)"
|
|
class="status-cell text-primary"
|
|
>See Status</span
|
|
>
|
|
</q-td>
|
|
<q-td>{{ props.row.check_name }}</q-td>
|
|
</q-tr>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import mixins from "@/mixins/mixins";
|
|
import AutomatedTaskForm from "@/components/tasks/AutomatedTaskForm";
|
|
import PolicyStatus from "@/components/automation/modals/PolicyStatus";
|
|
|
|
export default {
|
|
name: "PolicyAutomatedTasksTab",
|
|
mixins: [mixins],
|
|
props: {
|
|
selectedPolicy: !Number,
|
|
},
|
|
data() {
|
|
return {
|
|
tasks: [],
|
|
columns: [
|
|
{ name: "enabled", align: "left", field: "enabled" },
|
|
{ name: "smsalert", field: "text_alert", align: "left" },
|
|
{ name: "emailalert", field: "email_alert", align: "left" },
|
|
{ name: "dashboardalert", field: "dashboard_alert", align: "left" },
|
|
{
|
|
name: "collector",
|
|
label: "Collector",
|
|
field: "custom_field",
|
|
align: "left",
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: "name",
|
|
label: "Name",
|
|
field: "name",
|
|
align: "left",
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: "schedule",
|
|
label: "Schedule",
|
|
field: "schedule",
|
|
align: "left",
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: "status",
|
|
label: "More Info",
|
|
field: "more_info",
|
|
align: "left",
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: "check_name",
|
|
label: "Assigned Check",
|
|
field: "check_name",
|
|
align: "left",
|
|
sortable: true,
|
|
},
|
|
],
|
|
pagination: {
|
|
rowsPerPage: 0,
|
|
sortBy: "name",
|
|
descending: true,
|
|
},
|
|
};
|
|
},
|
|
watch: {
|
|
selectedPolicy: function (newValue, oldValue) {
|
|
if (newValue !== oldValue) this.getTasks();
|
|
},
|
|
},
|
|
methods: {
|
|
getTasks() {
|
|
this.$q.loading.show();
|
|
this.$axios
|
|
.get(`/automation/policies/${this.selectedPolicy}/tasks/`)
|
|
.then((r) => {
|
|
this.tasks = r.data;
|
|
this.$q.loading.hide();
|
|
})
|
|
.catch(() => {
|
|
this.$q.loading.hide();
|
|
});
|
|
},
|
|
editTask(task, data) {
|
|
this.$axios
|
|
.put(`/tasks/${task.id}/`, data)
|
|
.then((r) => {
|
|
this.$q.loading.hide();
|
|
this.notifySuccess(r.data);
|
|
this.getTasks();
|
|
})
|
|
.catch(() => {
|
|
this.$q.loading.hide();
|
|
});
|
|
},
|
|
showAddTask() {
|
|
this.$q
|
|
.dialog({
|
|
component: AutomatedTaskForm,
|
|
componentProps: {
|
|
parent: { policy: this.selectedPolicy },
|
|
},
|
|
})
|
|
.onOk(this.getTasks);
|
|
},
|
|
showEditTask(task) {
|
|
this.$q
|
|
.dialog({
|
|
component: AutomatedTaskForm,
|
|
componentProps: {
|
|
task: task,
|
|
parent: { policy: this.selectedPolicy },
|
|
},
|
|
})
|
|
.onOk(this.getTasks);
|
|
},
|
|
showStatus(task) {
|
|
this.$q.dialog({
|
|
component: PolicyStatus,
|
|
componentProps: {
|
|
type: "task",
|
|
item: task,
|
|
},
|
|
});
|
|
},
|
|
runTask(task) {
|
|
if (!task.enabled) {
|
|
this.notifyError(
|
|
"Task cannot be run when it's disabled. Enable it first."
|
|
);
|
|
return;
|
|
}
|
|
|
|
this.$q.loading.show();
|
|
this.$axios
|
|
.post(`/automation/tasks/${task.id}/run/`)
|
|
.then(() => {
|
|
this.$q.loading.hide();
|
|
this.notifySuccess("The task was initated on all affected agents");
|
|
})
|
|
.catch(() => {
|
|
this.$q.loading.hide();
|
|
});
|
|
},
|
|
deleteTask(task) {
|
|
this.$q
|
|
.dialog({
|
|
title: "Are you sure?",
|
|
message: `Delete ${task.name} task`,
|
|
cancel: true,
|
|
persistent: true,
|
|
})
|
|
.onOk(() => {
|
|
this.$q.loading.show();
|
|
this.$axios
|
|
.delete(`/tasks/${task.id}/`)
|
|
.then(() => {
|
|
this.getTasks();
|
|
this.$q.loading.hide();
|
|
this.notifySuccess("Task was deleted successfully");
|
|
})
|
|
.catch(() => {
|
|
this.$q.loading.hide();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
created() {
|
|
this.getTasks();
|
|
},
|
|
};
|
|
</script>
|