improvements to the edit agent modal

This commit is contained in:
wh1te909
2020-03-29 01:41:41 +00:00
parent d56463911a
commit ac26407e30
9 changed files with 298 additions and 281 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 639 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 484 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 448 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 508 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 273 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 645 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 615 B

View File

@@ -51,7 +51,7 @@
<q-list dense style="min-width: 200px">
<q-item clickable v-close-popup @click="showEditAgentModal = true">
<q-item-section avatar>
<q-icon style="font-size: 0.9rem;" name="edit" />
<q-icon name="fas fa-edit" />
</q-item-section>
<q-item-section>Edit {{ props.row.hostname }}</q-item-section>
</q-item>
@@ -64,7 +64,7 @@
@click.stop.prevent="takeControl(props.row.id)"
>
<q-item-section avatar>
<q-icon style="font-size: 0.8rem;" name="fas fa-desktop" />
<q-icon name="fas fa-desktop" />
</q-item-section>
<q-item-section>Take Control</q-item-section>
@@ -77,22 +77,24 @@
@click="toggleSendCommand(props.row.id, props.row.hostname)"
>
<q-item-section avatar>
<q-icon style="font-size: 0.8rem;" name="fas fa-terminal" />
<q-icon name="fas fa-terminal" />
</q-item-section>
<q-item-section>Send Command</q-item-section>
</q-item>
<q-separator />
<q-item clickable v-close-popup @click.stop.prevent="remoteBG(props.row.id)">
<q-item-section class="remote-bg" side></q-item-section>
<q-item-section avatar>
<q-icon name="fas fa-cogs" />
</q-item-section>
<q-item-section>Remote Background</q-item-section>
</q-item>
<!-- patch management -->
<q-separator />
<q-item clickable>
<q-item-section side>
<q-icon name="power_settings_new" />
<q-item-section avatar>
<q-icon name="system_update" />
</q-item-section>
<q-item-section>Patch Management</q-item-section>
<q-item-section side>
@@ -116,7 +118,7 @@
<q-separator />
<q-item clickable>
<q-item-section side>
<q-item-section avatar>
<q-icon name="power_settings_new" />
</q-item-section>
<q-item-section>Reboot</q-item-section>
@@ -150,7 +152,7 @@
<q-separator />
<q-item clickable v-close-popup @click.stop.prevent="removeAgent(props.row.id, props.row.hostname)">
<q-item-section side><q-icon name="delete" /></q-item-section>
<q-item-section avatar><q-icon name="delete" /></q-item-section>
<q-item-section>Remove Agent</q-item-section>
</q-item>
@@ -475,11 +477,6 @@ export default {
.highlight {
background-color: #c9e6ff;
}
.remote-bg {
background: url("../assets/remote-bg.png") no-repeat center;
width: 16px;
margin-right: 10px;
}
.agent-offline {
background: gray !important
}

View File

@@ -1,6 +1,6 @@
<template>
<q-card style="min-width: 700px">
<q-splitter v-model="splitterModel" style="height: 700px">
<q-card style="min-width: 800px" v-if="agentLoaded && clientsLoaded">
<q-splitter v-model="splitterModel">
<template v-slot:before>
<q-tabs dense v-model="tab" vertical class="text-primary">
<q-tab name="general" label="General" />
@@ -10,214 +10,279 @@
<template v-slot:after>
<q-form @submit.prevent="editAgent">
<q-card-section class="row items-center">
<div class="text-h6">Edit {{ hostname }}</div>
<div class="text-h6">Edit {{ agent.hostname }}</div>
<q-space />
<q-btn icon="close" flat round dense v-close-popup />
</q-card-section>
<q-tab-panels v-model="tab" animated transition-prev="jump-up" transition-next="jump-up">
<!-- general -->
<q-tab-panel name="general">
<q-card-section>
<q-select
@input="site = sites[0]"
dense
outlined
v-model="client"
:options="Object.keys(tree)"
label="Client"
/>
</q-card-section>
<q-card-section>
<q-select dense outlined v-model="site" :options="sites" label="Site" />
</q-card-section>
<q-card-section>
<q-select
dense
outlined
v-model="monType"
:options="monTypes"
label="Monitoring mode"
/>
</q-card-section>
<q-card-section>
<q-input
outlined
dense
v-model="desc"
label="Description"
:rules="[val => !!val || '*Required']"
/>
</q-card-section>
<q-card-section>
<q-input
dense
outlined
v-model.number="checkInterval"
label="Interval for checks (seconds)"
:rules="[
<q-scroll-area :thumb-style="thumbStyle" style="height: 500px;">
<q-tab-panels
v-model="tab"
animated
transition-prev="jump-up"
transition-next="jump-up"
>
<!-- general -->
<q-tab-panel name="general">
<q-card-section class="row">
<div class="col-2">Client:</div>
<div class="col-2"></div>
<q-select
@input="agent.site = sites[0]"
dense
outlined
v-model="agent.client"
:options="Object.keys(tree)"
class="col-8"
/>
</q-card-section>
<q-card-section class="row">
<div class="col-2">Site:</div>
<div class="col-2"></div>
<q-select class="col-8" dense outlined v-model="agent.site" :options="sites" />
</q-card-section>
<q-card-section class="row">
<div class="col-2">Type:</div>
<div class="col-2"></div>
<q-select
dense
outlined
v-model="agent.monitoring_type"
:options="monTypes"
class="col-8"
/>
</q-card-section>
<q-card-section class="row">
<div class="col-2">Description:</div>
<div class="col-2"></div>
<q-input
outlined
dense
v-model="agent.description"
class="col-8"
:rules="[val => !!val || '*Required']"
/>
</q-card-section>
<q-card-section class="row">
<div class="col-10">Check interval:</div>
<q-input
dense
type="number"
filled
label="Seconds"
v-model.number="agent.check_interval"
class="col-2"
:rules="[
val => !!val || '*Required',
val => val >= 60 || 'Minimum is 60 seconds',
val => val <= 3600 || 'Maximum is 3600 seconds'
]"
/>
</q-card-section>
<q-card-section>
<q-input
dense
outlined
v-model.number="overdueTime"
label="Send an overdue alert if the server has not reported in after (minutes)"
:rules="[
/>
</q-card-section>
<q-card-section class="row">
<div
class="col-10"
>Send an overdue alert if the server has not reported in after:</div>
<q-input
dense
type="number"
filled
label="Minutes"
v-model.number="agent.overdue_time"
class="col-2"
:rules="[
val => !!val || '*Required',
val => val >= 5 || 'Minimum is 5 minutes',
val => val < 9999999 || 'Maximum is 9999999 minutes'
]"
/>
</q-card-section>
<q-card-section>
<q-checkbox v-model="emailAlert" label="Get overdue email alerts" />
<q-space />
<q-checkbox v-model="textAlert" label="Get overdue text alerts" />
</q-card-section>
</q-tab-panel>
<!-- patch -->
<q-tab-panel name="patch">
<!-- Auto Approval -->
<div class="text-subtitle2">Auto Approval</div>
<hr />
<q-card-section class="row">
<div class="col-3">Severity</div>
<div class="col-4"></div>
<div class="col-5">Action</div>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Critical:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="critical"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Important:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="important"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Moderate:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="moderate"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Low:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="low"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Other:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="other"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<!-- Installation Schedule -->
<div class="text-subtitle2">Installation Schedule</div>
<hr />
<q-card-section class="row">
<div class="col-3">Scheduled Time:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="scheduledTime"
:options="timeOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section>
<div class="q-gutter-sm">
<q-checkbox v-model="dayOptions" :val="0" label="Monday" />
<q-checkbox v-model="dayOptions" :val="1" label="Tuesday" />
<q-checkbox v-model="dayOptions" :val="2" label="Wednesday" />
<q-checkbox v-model="dayOptions" :val="3" label="Thursday" />
<q-checkbox v-model="dayOptions" :val="4" label="Friday" />
<q-checkbox v-model="dayOptions" :val="5" label="Saturday" />
<q-checkbox v-model="dayOptions" :val="6" label="Sunday" />
</div>
</q-card-section>
<!-- Reboot After Installation -->
<div class="text-subtitle2">Reboot After Installation</div>
<hr />
<q-card-section class="row">
<div class="q-gutter-sm">
<q-radio v-model="rebootAfterInstall" val="never" label="Never" />
<q-radio v-model="rebootAfterInstall" val="required" label="When Required" />
<q-radio v-model="rebootAfterInstall" val="always" label="Always" />
</div>
</q-card-section>
<!-- Failed Patches -->
<div class="text-subtitle2">Failed Patches</div>
<hr />
<q-card-section class="row">
<div class="col-5">
<q-checkbox v-model="reprocessFailed" label="Reprocess failed patches" />
</div>
<div class="col-3">
<q-input
dense
v-model.number="reprocessFailedTimes"
type="number"
filled
label="Times"
:rules="[ val => val > 0 || 'Must be greater than 0']"
/>
</div>
<div class="col-3"></div>
<q-checkbox
v-model="emailIfFail"
label="Send an email when patch installation fails"
/>
</q-card-section>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
<q-card-section class="row">
<q-checkbox v-model="agent.overdue_email_alert" label="Get overdue email alerts" />
<q-checkbox v-model="agent.overdue_text_alert" label="Get overdue sms alerts" />
</q-card-section>
</q-tab-panel>
<!-- patch -->
<q-tab-panel name="patch">
<!-- Auto Approval -->
<div class="text-subtitle2">Auto Approval</div>
<hr />
<q-card-section class="row">
<div class="col-3">Severity</div>
<div class="col-4"></div>
<div class="col-5">Action</div>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Critical:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="agent.winupdatepolicy[0].critical"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Important:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="agent.winupdatepolicy[0].important"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Moderate:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="agent.winupdatepolicy[0].moderate"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Low:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="agent.winupdatepolicy[0].low"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section class="row">
<div class="col-3">Other:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="agent.winupdatepolicy[0].other"
:options="severityOptions"
emit-value
map-options
/>
</q-card-section>
<!-- Installation Schedule -->
<div class="text-subtitle2">Installation Schedule</div>
<hr />
<q-card-section class="row">
<div class="col-3">Scheduled Time:</div>
<div class="col-4"></div>
<q-select
dense
class="col-5"
outlined
v-model="agent.winupdatepolicy[0].run_time_hour"
:options="timeOptions"
emit-value
map-options
/>
</q-card-section>
<q-card-section>
<div class="q-gutter-sm">
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="0"
label="Monday"
/>
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="1"
label="Tuesday"
/>
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="2"
label="Wednesday"
/>
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="3"
label="Thursday"
/>
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="4"
label="Friday"
/>
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="5"
label="Saturday"
/>
<q-checkbox
v-model="agent.winupdatepolicy[0].run_time_days"
:val="6"
label="Sunday"
/>
</div>
</q-card-section>
<!-- Reboot After Installation -->
<div class="text-subtitle2">Reboot After Installation</div>
<hr />
<q-card-section class="row">
<div class="q-gutter-sm">
<q-radio
v-model="agent.winupdatepolicy[0].reboot_after_install"
val="never"
label="Never"
/>
<q-radio
v-model="agent.winupdatepolicy[0].reboot_after_install"
val="required"
label="When Required"
/>
<q-radio
v-model="agent.winupdatepolicy[0].reboot_after_install"
val="always"
label="Always"
/>
</div>
</q-card-section>
<!-- Failed Patches -->
<div class="text-subtitle2">Failed Patches</div>
<hr />
<q-card-section class="row">
<div class="col-5">
<q-checkbox
v-model="agent.winupdatepolicy[0].reprocess_failed"
label="Reprocess failed patches"
/>
</div>
<div class="col-3">
<q-input
dense
v-model.number="agent.winupdatepolicy[0].reprocess_failed_times"
type="number"
filled
label="Times"
:rules="[ val => val > 0 || 'Must be greater than 0']"
/>
</div>
<div class="col-3"></div>
<q-checkbox
v-model="agent.winupdatepolicy[0].email_if_fail"
label="Send an email when patch installation fails"
/>
</q-card-section>
</q-tab-panel>
</q-tab-panels>
</q-scroll-area>
<q-card-section class="row items-center">
<q-btn label="Save" color="primary" type="submit" />
<q-btn label="Cancel" v-close-popup />
@@ -238,19 +303,11 @@ export default {
mixins: [mixins],
data() {
return {
pk: null,
hostname: "",
client: "",
site: "",
monType: "",
agentLoaded: false,
clientsLoaded: false,
agent: {},
monTypes: ["server", "workstation"],
desc: "",
overdueTime: null,
checkInterval: null,
emailAlert: null,
textAlert: null,
tree: {},
updatePolicy: [],
splitterModel: 15,
tab: "general",
severityOptions: [
@@ -259,74 +316,35 @@ export default {
{ label: "Ignore", value: "ignore" }
],
timeOptions: scheduledTimes,
dayOptions: [],
scheduledTime: null,
rebootAfterInstall: null,
reprocessFailed: null,
reprocessFailedTimes: null,
emailIfFail: null,
critical: null,
important: null,
moderate: null,
low: null,
other: null
thumbStyle: {
right: "2px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
}
};
},
methods: {
getAgentInfo() {
axios.get(`/agents/${this.selectedAgentPk}/agentdetail/`).then(r => {
this.pk = r.data.id;
this.hostname = r.data.hostname;
this.client = r.data.client;
this.site = r.data.site;
this.monType = r.data.monitoring_type;
this.desc = r.data.description;
this.overdueTime = r.data.overdue_time;
this.checkInterval = r.data.check_interval;
this.emailAlert = r.data.overdue_email_alert;
this.textAlert = r.data.overdue_text_alert;
this.updatePolicy = r.data.winupdatepolicy;
this.critical = r.data.winupdatepolicy[0].critical;
this.important = r.data.winupdatepolicy[0].important;
this.moderate = r.data.winupdatepolicy[0].moderate;
this.low = r.data.winupdatepolicy[0].low;
this.other = r.data.winupdatepolicy[0].other;
this.scheduledTime = r.data.winupdatepolicy[0].run_time_hour;
this.dayOptions = r.data.winupdatepolicy[0].run_time_days;
this.rebootAfterInstall =
r.data.winupdatepolicy[0].reboot_after_install;
this.reprocessFailed = r.data.winupdatepolicy[0].reprocess_failed;
this.reprocessFailedTimes =
r.data.winupdatepolicy[0].reprocess_failed_times;
this.emailIfFail = r.data.winupdatepolicy[0].email_if_fail;
this.agent = r.data;
this.agentLoaded = true;
});
},
getClientsSites() {
axios.get("/clients/loadclients/").then(r => (this.tree = r.data));
axios.get("/clients/loadclients/").then(r => {
this.tree = r.data;
this.clientsLoaded = true;
});
},
editAgent() {
const data = {
pk: this.pk,
client: this.client,
site: this.site,
montype: this.monType,
desc: this.desc,
overduetime: this.overdueTime,
checkinterval: this.checkInterval,
emailalert: this.emailAlert,
textalert: this.textAlert,
critical: this.critical,
important: this.important,
moderate: this.moderate,
low: this.low,
other: this.other,
scheduledtime: this.scheduledTime,
dayoptions: this.dayOptions,
rebootafterinstall: this.rebootAfterInstall,
reprocessfailed: this.reprocessFailed,
reprocessfailedtimes: this.reprocessFailedTimes,
emailiffail: this.emailIfFail
};
let data = this.agent;
delete data.services;
delete data.wmi_detail;
delete data.disks;
delete data.local_ip;
axios
.patch("/agents/editagent/", data)
.then(r => {
@@ -340,7 +358,9 @@ export default {
computed: {
...mapGetters(["selectedAgentPk"]),
sites() {
return this.tree[this.client];
if (this.agentLoaded && this.clientsLoaded) {
return this.tree[this.agent.client];
}
}
},
created() {