fix pending actions

This commit is contained in:
sadnub
2020-11-06 13:26:25 -05:00
parent bf8612969a
commit 6bfbb0fa85
6 changed files with 187 additions and 255 deletions

View File

@@ -84,7 +84,7 @@
<q-item-section>Edit {{ props.row.hostname }}</q-item-section>
</q-item>
<!-- agent pending actions -->
<q-item clickable v-close-popup @click="showPendingActions(props.row.id, props.row.hostname)">
<q-item clickable v-close-popup @click="showPendingActionsModal(props.row.id)">
<q-item-section side>
<q-icon size="xs" name="far fa-clock" />
</q-item-section>
@@ -306,7 +306,11 @@
<RebootLater @close="showRebootLaterModal = false" />
</q-dialog>
<!-- pending actions modal -->
<PendingActions />
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="showPendingActions" @hide="closePendingActionsModal">
<PendingActions :agentpk="pendingActionAgentPk" @close="closePendingActionsModal" />
</q-dialog>
</div>
<!-- add policy modal -->
<q-dialog v-model="showPolicyAddModal">
<PolicyAdd @close="showPolicyAddModal = false" type="agent" :pk="policyAddPk" />
@@ -367,6 +371,8 @@ export default {
showAgentRecovery: false,
showRunScript: false,
policyAddPk: null,
showPendingActions: false,
pendingActionAgentPk: null,
};
},
methods: {
@@ -400,9 +406,13 @@ export default {
agentEdited() {
this.$emit("refreshEdit");
},
showPendingActions(pk, hostname) {
const data = { action: true, agentpk: pk, hostname: hostname };
this.$store.commit("logs/TOGGLE_PENDING_ACTIONS", data);
showPendingActionsModal(pk) {
this.showPendingActions = true;
this.pendingActionAgentPk = pk;
},
closePendingActionsModal() {
this.showPendingActions = false;
this.pendingActionAgentPk = null;
},
takeControl(pk) {
const url = this.$router.resolve(`/takecontrol/${pk}`).href;

View File

@@ -45,7 +45,7 @@
<q-item clickable v-close-popup @click="showAuditManager = true">
<q-item-section>Audit Log</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="getLog">
<q-item clickable v-close-popup @click="showDebugLog = true">
<q-item-section>Debug Log</q-item-section>
</q-item>
</q-list>
@@ -68,7 +68,7 @@
<q-btn size="md" dense no-caps flat label="View">
<q-menu auto-close>
<q-list dense style="min-width: 100px">
<q-item clickable v-close-popup @click="showPendingActions">
<q-item clickable v-close-popup @click="showPendingActions = true">
<q-item-section>Pending Actions</q-item-section>
</q-item>
</q-list>
@@ -148,13 +148,29 @@
<EditCoreSettings @close="showEditCoreSettingsModal = false" />
</q-dialog>
<!-- debug log modal -->
<LogModal />
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="showDebugLog" maximized transition-show="slide-up" transition-hide="slide-down">
<LogModal @close="showAuditManager = false" />
</q-dialog>
</div>
<!-- audit log modal -->
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="showAuditManager" maximized transition-show="slide-up" transition-hide="slide-down">
<AuditManager @close="showAuditManager = false" />
</q-dialog>
</div>
<!-- pending actions modal -->
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="showPendingActions">
<PendingActions @close="showPendingActions = false" />
</q-dialog>
</div>
<!-- audit manager -->
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="showAuditManager" maximized transition-show="slide-up" transition-hide="slide-down">
<AuditManager @close="showAuditManager = false" />
</q-dialog>
</div>
<!-- Install Agents -->
<div class="q-pa-md q-gutter-sm">
<q-dialog v-model="showInstallAgent">
@@ -202,6 +218,7 @@
<script>
import LogModal from "@/components/modals/logs/LogModal";
import PendingActions from "@/components/modals/logs/PendingActions";
import ClientsForm from "@/components/modals/clients/ClientsForm";
import SitesForm from "@/components/modals/clients/SitesForm";
import UpdateAgents from "@/components/modals/agents/UpdateAgents";
@@ -219,6 +236,7 @@ export default {
name: "FileBar",
components: {
LogModal,
PendingActions,
ClientsForm,
SitesForm,
UpdateAgents,
@@ -246,8 +264,10 @@ export default {
showUploadMesh: false,
showAuditManager: false,
showBulkAction: false,
showPendingActions: false,
bulkMode: null,
showDeployment: false,
showDebugLog: false,
};
},
methods: {
@@ -273,13 +293,6 @@ export default {
this.bulkMode = null;
this.showBulkAction = false;
},
getLog() {
this.$store.commit("logs/TOGGLE_LOG_MODAL", true);
},
showPendingActions() {
const data = { action: true, agentpk: null, hostname: null };
this.$store.commit("logs/TOGGLE_PENDING_ACTIONS", data);
},
showScriptManager() {
this.$store.commit("TOGGLE_SCRIPT_MANAGER", true);
},

View File

@@ -1,67 +1,47 @@
<template>
<div class="q-pa-md q-gutter-sm">
<q-dialog
:value="toggleLogModal"
@hide="hideLogModal"
@show="getLog"
maximized
transition-show="slide-up"
transition-hide="slide-down"
>
<q-card class="bg-grey-10 text-white">
<q-bar>
<q-btn @click="getLog" class="q-mr-sm" dense flat push icon="refresh" label="Refresh" />Debug Log
<q-space />
<q-btn color="primary" text-color="white" label="Download log" @click="downloadLog" />
<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 row">
<div class="col-2">
<q-select
dark
dense
options-dense
outlined
v-model="agent"
:options="agents"
label="Filter Agent"
@input="getLog"
/>
</div>
<div class="col-1">
<q-select
dark
dense
options-dense
outlined
v-model="order"
:options="orders"
label="Order"
@input="getLog"
/>
</div>
</div>
<q-card-section>
<q-radio dark v-model="loglevel" color="cyan" val="info" label="Info" @input="getLog" />
<q-radio dark v-model="loglevel" color="red" val="critical" label="Critical" @input="getLog" />
<q-radio dark v-model="loglevel" color="red" val="error" label="Error" @input="getLog" />
<q-radio dark v-model="loglevel" color="yellow" val="warning" label="Warning" @input="getLog" />
</q-card-section>
<q-separator />
<q-card-section>
<q-scroll-area
:thumb-style="{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }"
style="height: 60vh"
>
<pre>{{ logContent }}</pre>
</q-scroll-area>
</q-card-section>
</q-card>
</q-dialog>
</div>
<q-card class="bg-grey-10 text-white">
<q-bar>
<q-btn @click="getLog" class="q-mr-sm" dense flat push icon="refresh" label="Refresh" />Debug Log
<q-space />
<q-btn color="primary" text-color="white" label="Download log" @click="downloadLog" />
<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 row">
<div class="col-2">
<q-select
dark
dense
options-dense
outlined
v-model="agent"
:options="agents"
label="Filter Agent"
@input="getLog"
/>
</div>
<div class="col-1">
<q-select dark dense options-dense outlined v-model="order" :options="orders" label="Order" @input="getLog" />
</div>
</div>
<q-card-section>
<q-radio dark v-model="loglevel" color="cyan" val="info" label="Info" @input="getLog" />
<q-radio dark v-model="loglevel" color="red" val="critical" label="Critical" @input="getLog" />
<q-radio dark v-model="loglevel" color="red" val="error" label="Error" @input="getLog" />
<q-radio dark v-model="loglevel" color="yellow" val="warning" label="Warning" @input="getLog" />
</q-card-section>
<q-separator />
<q-card-section>
<q-scroll-area
:thumb-style="{ right: '4px', borderRadius: '5px', background: 'red', width: '10px', opacity: 1 }"
style="height: 60vh"
>
<pre>{{ logContent }}</pre>
</q-scroll-area>
</q-card-section>
</q-card>
</template>
<script>
@@ -99,14 +79,9 @@ export default {
this.agents.unshift("all");
});
},
hideLogModal() {
this.$store.commit("logs/TOGGLE_LOG_MODAL", false);
},
},
computed: {
...mapState({
toggleLogModal: state => state.logs.toggleLogModal,
}),
created() {
this.getLog();
},
};
</script>

View File

@@ -1,101 +1,98 @@
<template>
<div class="q-pa-md q-gutter-sm">
<q-dialog :value="togglePendingActions" @hide="hidePendingActions" @show="getPendingActions">
<q-card style="width: 900px; max-width: 90vw;">
<q-inner-loading :showing="actionsLoading">
<q-spinner size="40px" color="primary" />
</q-inner-loading>
<q-bar>
<q-btn @click="getPendingActions" class="q-mr-sm" dense flat push icon="refresh" />
{{ title }}
<q-space />
<q-btn dense flat icon="close" v-close-popup />
</q-bar>
<div v-if="actions.length !== 0" class="q-pa-md">
<div class="row">
<div class="col">
<q-btn
label="Cancel Action"
:disable="selectedRow === null || selectedStatus === 'completed' || actionType === 'taskaction'"
color="red"
icon="cancel"
dense
unelevated
no-caps
size="md"
@click="cancelPendingAction"
/>
</div>
<div class="col-7"></div>
<div class="col">
<q-btn
:label="showCompleted ? `Hide ${completedCount} Completed` : `Show ${completedCount} Completed`"
:icon="showCompleted ? 'visibility_off' : 'visibility'"
@click="showCompleted = !showCompleted"
dense
unelevated
no-caps
size="md"
/>
</div>
</div>
<q-table
<q-card style="width: 900px; max-width: 90vw">
<q-bar>
<q-btn @click="getPendingActions" class="q-mr-sm" dense flat push icon="refresh" />
{{ title }}
<q-space />
<q-btn dense flat icon="close" v-close-popup />
</q-bar>
<div v-if="actions.length !== 0" class="q-pa-md">
<div class="row">
<div class="col">
<q-btn
label="Cancel Action"
:disable="selectedRow === null || selectedStatus === 'completed' || actionType === 'taskaction'"
color="red"
icon="cancel"
dense
class="remote-bg-tbl-sticky"
:data="filter"
:columns="columns"
:visible-columns="visibleColumns"
:pagination.sync="pagination"
row-key="id"
binary-state-sort
hide-bottom
virtual-scroll
flat
:rows-per-page-options="[0]"
>
<template slot="body" slot-scope="props" :props="props">
<q-tr
:class="rowClass(props.row.id, props.row.status)"
@click="rowSelected(props.row.id, props.row.status, props.row.action_type)"
>
<q-td v-if="props.row.action_type === 'schedreboot'">
<q-icon name="power_settings_new" size="sm" />
</q-td>
<q-td v-else-if="props.row.action_type === 'taskaction'">
<q-icon name="fas fa-tasks" size="sm" />
</q-td>
<q-td>{{ props.row.due }}</q-td>
<q-td>{{ props.row.description }}</q-td>
<q-td v-show="agentpk === null">{{ props.row.hostname }}</q-td>
<q-td v-show="agentpk === null">{{ props.row.client }}</q-td>
<q-td v-show="agentpk === null">{{ props.row.site }}</q-td>
</q-tr>
</template>
</q-table>
unelevated
no-caps
size="md"
@click="cancelPendingAction"
/>
</div>
<div v-else class="q-pa-md">No pending actions</div>
<q-card-section></q-card-section>
<q-separator />
<q-card-section></q-card-section>
</q-card>
</q-dialog>
</div>
<div class="col-7"></div>
<div class="col">
<q-btn
:label="showCompleted ? `Hide ${completedCount} Completed` : `Show ${completedCount} Completed`"
:icon="showCompleted ? 'visibility_off' : 'visibility'"
@click="showCompleted = !showCompleted"
dense
unelevated
no-caps
size="md"
/>
</div>
</div>
<q-table
dense
class="remote-bg-tbl-sticky"
:data="filter"
:columns="columns"
:visible-columns="visibleColumns"
:pagination.sync="pagination"
row-key="id"
binary-state-sort
hide-bottom
virtual-scroll
flat
:rows-per-page-options="[0]"
>
<template slot="body" slot-scope="props" :props="props">
<q-tr
:class="rowClass(props.row.id, props.row.status)"
@click="rowSelected(props.row.id, props.row.status, props.row.action_type)"
>
<q-td v-if="props.row.action_type === 'schedreboot'">
<q-icon name="power_settings_new" size="sm" />
</q-td>
<q-td v-else-if="props.row.action_type === 'taskaction'">
<q-icon name="fas fa-tasks" size="sm" />
</q-td>
<q-td>{{ props.row.due }}</q-td>
<q-td>{{ props.row.description }}</q-td>
<q-td v-show="!!agentpk">{{ props.row.hostname }}</q-td>
<q-td v-show="!!agentpk">{{ props.row.client }}</q-td>
<q-td v-show="!!agentpk">{{ props.row.site }}</q-td>
</q-tr>
</template>
</q-table>
</div>
<div v-else class="q-pa-md">No pending actions</div>
<q-card-section></q-card-section>
<q-separator />
<q-card-section></q-card-section>
</q-card>
</template>
<script>
import axios from "axios";
import mixins from "@/mixins/mixins";
import { mapGetters } from "vuex";
export default {
name: "PendingActions",
mixins: [mixins],
props: {
agentpk: Number,
},
data() {
return {
actions: [],
selectedRow: null,
showCompleted: false,
selectedStatus: null,
actionType: null,
hostname: "",
pagination: {
rowsPerPage: 0,
sortBy: "due",
@@ -124,8 +121,22 @@ export default {
},
methods: {
getPendingActions() {
this.$q.loading.show();
this.clearRow();
this.$store.dispatch("logs/getPendingActions");
axios
.get(this.url)
.then(r => {
this.actions = Object.freeze(r.data);
if (this.agentpk !== null && this.agentpk !== undefined) {
this.hostname = r.data[0].hostname;
}
this.$q.loading.hide();
})
.catch(e => {
this.$q.loading.hide();
});
},
cancelPendingAction() {
this.$q
@@ -150,11 +161,6 @@ export default {
});
});
},
hidePendingActions() {
this.showCompleted = false;
this.selectedStatus = null;
this.$store.commit("logs/CLEAR_PENDING_ACTIONS");
},
rowSelected(pk, status, actiontype) {
this.selectedRow = pk;
this.selectedStatus = status;
@@ -162,6 +168,8 @@ export default {
},
clearRow() {
this.selectedRow = null;
this.selectedStatus = null;
this.actionType = null;
},
rowClass(id, status) {
if (this.selectedRow === id && status !== "completed") {
@@ -172,28 +180,27 @@ export default {
},
},
computed: {
...mapGetters({
hostname: "logs/actionsHostname",
togglePendingActions: "logs/togglePendingActions",
actions: "logs/allPendingActions",
agentpk: "logs/actionsAgentPk",
actionsLoading: "logs/pendingActionsLoading",
}),
url() {
return !!this.agentpk ? `/logs/${this.agentpk}/pendingactions/` : "/logs/allpendingactions/";
},
filter() {
return this.showCompleted ? this.actions : this.actions.filter(k => k.status === "pending");
},
columns() {
return this.agentpk === null ? this.all_columns : this.agent_columns;
return !!this.agentpk ? this.all_columns : this.agent_columns;
},
visibleColumns() {
return this.agentpk === null ? this.all_visibleColumns : this.agent_visibleColumns;
return !!this.agentpk ? this.all_visibleColumns : this.agent_visibleColumns;
},
title() {
return this.agentpk === null ? "All Pending Actions" : `Pending Actions for ${this.hostname}`;
return !!this.agentpk ? "All Pending Actions" : `Pending Actions for ${this.hostname}`;
},
completedCount() {
return this.actions.filter(k => k.status === "completed").length;
},
},
created() {
this.getPendingActions();
},
};
</script>

View File

@@ -2,7 +2,6 @@ import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import { Notify } from "quasar";
import logModule from "./logs";
import alertsModule from "./alerts";
import automationModule from "./automation";
import adminModule from "./admin.js"
@@ -12,7 +11,6 @@ Vue.use(Vuex);
export default function () {
const Store = new Vuex.Store({
modules: {
logs: logModule,
automation: automationModule,
alerts: alertsModule,
admin: adminModule

View File

@@ -1,71 +0,0 @@
import axios from "axios";
export default {
namespaced: true,
state: {
toggleLogModal: false,
togglePendingActions: false,
pendingActionsLoading: false,
actionsAgentPk: null,
actionsHostname: null,
allPendingActions: []
},
getters: {
actionsHostname(state) {
return state.actionsHostname;
},
togglePendingActions(state) {
return state.togglePendingActions;
},
allPendingActions(state) {
return state.allPendingActions;
},
actionsAgentPk(state) {
return state.actionsAgentPk;
},
pendingActionsLoading(state) {
return state.pendingActionsLoading;
}
},
mutations: {
PENDING_ACTIONS_LOADING(state, visible) {
state.pendingActionsLoading = visible;
},
TOGGLE_LOG_MODAL(state, action) {
state.toggleLogModal = action;
},
TOGGLE_PENDING_ACTIONS(state, { action, agentpk, hostname }) {
state.actionsAgentPk = agentpk;
state.actionsHostname = hostname;
state.togglePendingActions = action;
},
SET_PENDING_ACTIONS(state, actions) {
state.allPendingActions = actions;
},
CLEAR_PENDING_ACTIONS(state) {
state.togglePendingActions = false;
state.allPendingActions = [];
state.actionsAgentPk = null;
state.actionsHostname = null;
},
},
actions: {
getPendingActions({ commit, state }) {
commit("PENDING_ACTIONS_LOADING", true);
const url = state.actionsAgentPk === null
? "/logs/allpendingactions/"
: `/logs/${state.actionsAgentPk}/pendingactions/`;
axios.get(url).then(r => {
commit("SET_PENDING_ACTIONS", r.data);
commit("PENDING_ACTIONS_LOADING", false);
})
},
loadAuditLogs(context, data) {
return axios.patch("/logs/auditlogs/", data)
},
optionsFilter(context, data) {
return axios.post(`logs/auditlogs/optionsfilter/`, data)
}
}
}