automation manager rework start

web/src/components/AlertsManager.vue

@@ -1,6 +1,6 @@
 <template>
   <q-dialog ref="dialog" @hide="onHide">
-    <div class="q-dialog-plugin" style="width: 900px; max-width: 90vw">
+    <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
@@ -42,34 +42,32 @@
             :data="templates"
             :columns="columns"
             :pagination.sync="pagination"
-            :selected.sync="selected"
-            selection="single"
             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="props">
+            <template v-slot:header-cell-is_active="props">
-              <q-tr :props="props">
+              <q-th :props="props" auto-width>
-                <template v-for="col in props.cols">
-                  <q-th v-if="col.name === 'is_active'" auto-width :key="col.name">
                 <q-icon name="power_settings_new" size="1.5em">
                   <q-tooltip>Enable Template</q-tooltip>
                 </q-icon>
               </q-th>
-
-                  <q-th
-                    v-else-if="col.name === 'email_severity' || col.name === 'text_severity'"
-                    auto-width
-                    :key="col.name"
-                  >
-                    {{ col.label }}
-                  </q-th>
-
-                  <q-th v-else :key="col.name" :props="props">{{ col.label }}</q-th>
             </template>
-              </q-tr>
+
+            <template v-slot:header-cell-email_severity="props">
+              <q-th :props="props" auto-width>
+                {{ props.name }}
+              </q-th>
+            </template>
+
+            <template v-slot:header-cell-text_severity="props">
+              <q-th :props="props" auto-width>
+                {{ props.name }}
+              </q-th>
             </template>
             <!-- body slots -->
             <template v-slot:body="props">
@@ -77,14 +75,8 @@
                 :props="props"
                 class="cursor-pointer"
                 :class="rowSelectedClass(props.row.id, selected)"
-                @click="
+                @click="selected = props.row"
-                  editTemplate = props.row;
+                @contextmenu="selected = props.row"
-                  props.selected = true;
-                "
-                @contextmenu="
-                  editTemplate = props.row;
-                  props.selected = true;
-                "
               >
                 <!-- context menu -->
                 <q-menu context-menu>
@@ -212,7 +204,9 @@ export default {
         },
       ],
       pagination: {
-        rowsPerPage: 9999,
+        rowsPerPage: 0,
+        sortBy: "name",
+        descending: true,
       },
     };
   },

web/src/components/FileBar.vue

@@ -100,7 +100,7 @@
                 <q-item-section>Script Manager</q-item-section>
               </q-item>
               <!-- automation manager -->
-              <q-item clickable v-close-popup @click="showAutomationManager = true">
+              <q-item clickable v-close-popup @click="showAutomationManager">
                 <q-item-section>Automation Manager</q-item-section>
               </q-item>
               <!-- alerts manager -->
@@ -191,12 +191,6 @@
           <ScriptManager @close="showScriptManager = false" />
         </q-dialog>
       </div>
-      <!-- Automation Manager -->
-      <div class="q-pa-md q-gutter-sm">
-        <q-dialog v-model="showAutomationManager">
-          <AutomationManager @close="showAutomationManager = false" />
-        </q-dialog>
-      </div>
       <!-- Admin Manager -->
       <div class="q-pa-md q-gutter-sm">
         <q-dialog v-model="showAdminManager">
@@ -251,7 +245,6 @@ export default {
     UpdateAgents,
     ScriptManager,
     EditCoreSettings,
-    AutomationManager,
     InstallAgent,
     UploadMesh,
     AdminManager,
@@ -269,7 +262,6 @@ export default {
       clientOp: null,
       showUpdateAgentsModal: false,
       showEditCoreSettingsModal: false,
-      showAutomationManager: false,
       showAdminManager: false,
       showInstallAgent: false,
       showUploadMesh: false,
@@ -305,6 +297,12 @@ export default {
       this.bulkMode = null;
       this.showBulkAction = false;
     },
+    showAutomationManager() {
+      this.$q.dialog({
+        component: AutomationManager,
+        parent: this,
+      });
+    },
     showAlertsManager() {
       this.$q.dialog({
         component: AlertsManager,

web/src/components/ScriptManager.vue

@@ -216,7 +216,7 @@
           :filter="search"
           row-key="id"
           binary-state-sort
-          hide-bottom
+          hide-pagination
           virtual-scroll
           flat
           :rows-per-page-options="[0]"

web/src/components/automation/AutomationManager.vue

@@ -1,5 +1,6 @@
 <template>
-  <div style="width: 60vw; max-width: 90vw">
+  <q-dialog ref="dialog" @hide="onHide">
+    <div class="q-dialog-plugin" style="min-width: 90vw; max-width: 90vw">
       <q-card>
         <q-bar>
           <q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />Automation Manager
@@ -10,30 +11,30 @@
         </q-bar>
         <div class="q-pa-md">
           <div class="q-gutter-sm">
-          <q-btn ref="new" label="New" dense flat push unelevated no-caps icon="add" @click="showAddPolicyModal" />
+            <q-btn ref="new" label="New" dense flat push unelevated no-caps icon="add" @click="showAddPolicyForm" />
             <q-btn
               ref="edit"
               label="Edit"
-            :disable="selectedRow === null"
+              :disable="!selectedPolicy"
               dense
               flat
               push
               unelevated
               no-caps
               icon="edit"
-            @click="showEditPolicyModal(selectedRow)"
+              @click="showEditPolicyForm(selectedPolicy)"
             />
             <q-btn
               ref="delete"
               label="Delete"
-            :disable="selectedRow === null"
+              :disable="!selectedPolicy"
               dense
               flat
               push
               unelevated
               no-caps
               icon="delete"
-            @click="deletePolicy(selectedRow)"
+              @click="deletePolicy(selectedPolicy)"
             />
             <q-btn
               ref="overview"
@@ -49,59 +50,61 @@
           </div>
           <q-table
             :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
-          dense
             :data="policies"
             :columns="columns"
             :pagination.sync="pagination"
-          :selected.sync="selected"
-          selection="single"
-          @selection="policyRowSelected"
             row-key="id"
             binary-state-sort
             hide-pagination
+            virtual-scroll
+            dense
+            flat
+            :rows-per-page-options="[0]"
             no-data-label="No Policies"
           >
             <!-- header slots -->
-          <template v-slot:header="props">
+            <template v-slot:header-cell-active="props">
-            <q-tr :props="props">
+              <q-th :props="props" auto-width>
-              <template v-for="col in props.cols">
-                <q-th v-if="col.name === 'active'" auto-width :key="col.name">
                 <q-icon name="power_settings_new" size="1.5em">
                   <q-tooltip>Enable Policy</q-tooltip>
                 </q-icon>
               </q-th>
+            </template>
 
-                <q-th v-else-if="col.name === 'enforced'" auto-width :key="col.name">
+            <template v-slot:header-cell-enforced="props">
+              <q-th :props="props" auto-width>
                 <q-icon name="security" size="1.5em">
                   <q-tooltip>Enforce Policy (Will override Agent tasks/checks)</q-tooltip>
                 </q-icon>
               </q-th>
+            </template>
 
-                <q-th v-else :key="col.name" :props="props">{{ col.label }}</q-th>
-              </template>
-            </q-tr>
-          </template>
             <!-- body slots -->
             <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer" @click="props.selected = true">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                @click="selectedPolicy = props.row"
+                @contextmenu="selectedPolicy = props.row"
+              >
                 <!-- context menu -->
                 <q-menu context-menu>
                   <q-list dense style="min-width: 200px">
-                  <q-item clickable v-close-popup @click="showEditPolicyModal(props.row.id)" id="context-edit">
+                    <q-item clickable v-close-popup @click="showEditPolicyForm(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="showCopyPolicyModal(props.row)" id="context-copy">
+                    <q-item clickable v-close-popup @click="showAddPolicyForm(props.row)">
                       <q-item-section side>
                         <q-icon name="content_copy" />
                       </q-item-section>
                       <q-item-section>Copy</q-item-section>
                     </q-item>
 
-                  <q-item clickable v-close-popup @click="deletePolicy(props.row.id)" id="context-delete">
+                    <q-item clickable v-close-popup @click="deletePolicy(props.row.id)">
                       <q-item-section side>
                         <q-icon name="delete" />
                       </q-item-section>
@@ -110,14 +113,14 @@
 
                     <q-separator></q-separator>
 
-                  <q-item clickable v-close-popup @click="showRelationsModal(props.row)" id="context-relation">
+                    <q-item clickable v-close-popup @click="showRelations(props.row)">
                       <q-item-section side>
                         <q-icon name="account_tree" />
                       </q-item-section>
                       <q-item-section>Show Relations</q-item-section>
                     </q-item>
 
-                  <q-item clickable v-close-popup @click="showEditPatchPolicyModal(props.row)" id="context-winupdate">
+                    <q-item clickable v-close-popup @click="showPatchPolicyForm(props.row)">
                       <q-item-section side>
                         <q-icon name="system_update" />
                       </q-item-section>
@@ -160,7 +163,7 @@
                   <span
                     style="cursor: pointer; text-decoration: underline"
                     class="text-primary"
-                  @click="showRelationsModal(props.row)"
+                    @click="showRelations(props.row)"
                     >{{ `Show Relations (${props.row.agents_count}+)` }}</span
                   >
                 </q-td>
@@ -168,7 +171,7 @@
                   <span
                     style="cursor: pointer; text-decoration: underline"
                     class="text-primary"
-                  @click="showEditPatchPolicyModal(props.row)"
+                    @click="showPatchPolicyForm(props.row)"
                     >{{ patchPolicyText(props.row) }}</span
                   >
                 </q-td>
@@ -181,7 +184,7 @@
                   >
                 </q-td>
                 <q-td>
-                <q-icon name="content_copy" size="1.5em" @click="showCopyPolicyModal(props.row)">
+                  <q-icon name="content_copy" size="1.5em" @click="showAddPolicyForm(props.row)">
                     <q-tooltip>Create a copy of this policy</q-tooltip>
                   </q-icon>
                 </q-td>
@@ -191,66 +194,55 @@
         </div>
 
         <q-card-section>
-        <PolicySubTableTabs />
+          <q-tabs
+            v-model="subtab"
+            dense
+            inline-label
+            class="text-grey"
+            active-color="primary"
+            indicator-color="primary"
+            align="left"
+            narrow-indicator
+            no-caps
+          >
+            <q-tab name="checks" icon="fas fa-check-double" label="Checks" />
+            <q-tab name="tasks" icon="fas fa-tasks" label="Tasks" />
+          </q-tabs>
+          <q-separator />
+          <q-tab-panels v-model="subtab" :animated="false">
+            <q-tab-panel name="checks">
+              <PolicyChecksTab :selectedPolicy="selectedPolicy" />
+            </q-tab-panel>
+            <q-tab-panel name="tasks">
+              <PolicyAutomatedTasksTab :selectedPolicy="selectedPolicy" />
+            </q-tab-panel>
+          </q-tab-panels>
         </q-card-section>
       </q-card>
-
-    <!-- policy form modal -->
-    <q-dialog v-model="showPolicyFormModal" @hide="closePolicyFormModal">
-      <PolicyForm :pk="editPolicyId" :copyPolicy="copyPolicy" @close="closePolicyFormModal" />
-    </q-dialog>
-
-    <!-- policy overview modal -->
-    <q-dialog v-model="showPolicyOverviewModal" @hide="clearRow">
-      <PolicyOverview />
-    </q-dialog>
-
-    <!-- policy relations modal -->
-    <q-dialog v-model="showRelationsViewModal" @hide="closeRelationsModal">
-      <RelationsView :policy="policy" />
-    </q-dialog>
-
-    <!-- patch policy modal -->
-    <q-dialog v-model="showPatchPolicyModal" @hide="closePatchPolicyModal">
-      <q-card style="width: 900px; max-width: 90vw">
-        <q-bar>
-          {{ patchPolicyModalText() }}
-          <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="scroll" style="height: 70vh">
-          <PatchPolicyForm :policy="policy" @close="closePatchPolicyModal" />
     </div>
-      </q-card>
   </q-dialog>
-  </div>
 </template>
 
 <script>
-import mixins, { notifySuccessConfig, notifyErrorConfig } from "@/mixins/mixins";
+import mixins from "@/mixins/mixins";
-import { mapState } from "vuex";
+import DialogWrapper from "@/components/ui/DialogWrapper";
 import PolicyForm from "@/components/automation/modals/PolicyForm";
 import PolicyOverview from "@/components/automation/PolicyOverview";
-import PolicySubTableTabs from "@/components/automation/PolicySubTableTabs";
 import RelationsView from "@/components/automation/modals/RelationsView";
 import PatchPolicyForm from "@/components/modals/agents/PatchPolicyForm";
+import AlertTemplateAdd from "@/components/modals/alerts/AlertTemplateAdd";
+import PolicyChecksTab from "@/components/automation/PolicyChecksTab";
+import PolicyAutomatedTasksTab from "@/components/automation/PolicyAutomatedTasksTab";
 
 export default {
   name: "AutomationManager",
-  components: { PolicyForm, PolicyOverview, PolicySubTableTabs, RelationsView, PatchPolicyForm },
+  components: { PolicyChecksTab, PolicyAutomatedTasksTab },
   mixins: [mixins],
   data() {
     return {
-      showPolicyFormModal: false,
+      subtab: "checks",
-      showPolicyOverviewModal: false,
+      policies: [],
-      showRelationsViewModal: false,
+      selectedPolicy: null,
-      showPatchPolicyModal: false,
-      policy: null,
-      editPolicyId: null,
-      copyPolicy: null,
-      selected: [],
       columns: [
         { name: "active", label: "Active", field: "active", align: "left" },
         { name: "enforced", label: "Enforced", field: "enforced", align: "left" },
@@ -293,24 +285,21 @@ export default {
         },
       ],
       pagination: {
-        rowsPerPage: 9999,
+        rowsPerPage: 0,
+        sortBy: "name",
+        descending: true,
       },
     };
   },
   methods: {
     getPolicies() {
-      this.$store.dispatch("automation/loadPolicies");
+      this.$axios.get("/automation/policies/").then(r => {
-    },
+        console.log(r.data);
-    policyRowSelected({ added, keys, rows }) {
+        this.policies = r.data;
-      // First item of the keys array is the selected policy pk
+      });
-      this.$store.commit("automation/setSelectedPolicy", keys[0]);
-      this.$store.dispatch("automation/loadPolicyChecks", keys[0]);
-      this.$store.dispatch("automation/loadPolicyAutomatedTasks", keys[0]);
     },
     clearRow() {
-      this.$store.commit("automation/setSelectedPolicy", null);
+      this.selectedPolicy = null;
-      this.$store.commit("automation/setPolicyChecks", []);
-      this.$store.commit("automation/setPolicyAutomatedTasks", {});
     },
     refresh() {
       this.getPolicies();
@@ -324,44 +313,77 @@ export default {
           ok: { label: "Delete", color: "negative" },
         })
         .onOk(() => {
-          this.$store
+          this.$axios
-            .dispatch("automation/deletePolicy", id)
+            .delete(`/automation/policies/${pk}/`)
-            .then(response => {
+            .then(r => {
-              this.$q.notify(notifySuccessConfig("Policy was deleted!"));
+              this.notifySuccess("Policy was deleted!");
             })
             .catch(error => {
-              this.$q.notify(notifyErrorConfig("An Error occured while deleting policy"));
+              this.notifyError("An Error occured while deleting policy");
             });
         });
     },
-    showRelationsModal(policy) {
+    showRelations(policy) {
-      this.policy = policy;
+      this.$q.dialog({
-      this.showRelationsViewModal = true;
+        component: RelationsView,
-    },
+        parent: this,
-    closeRelationsModal() {
+        policy: policy,
-      this.policy = null;
+      });
-      this.showRelationsViewModal = false;
-    },
-    showEditPolicyModal(id) {
-      this.editPolicyId = id;
-      this.showPolicyFormModal = true;
-    },
-    showCopyPolicyModal(policy) {
-      this.copyPolicy = policy;
-      this.showPolicyFormModal = true;
-    },
-    closePolicyFormModal() {
-      this.showPolicyFormModal = false;
-      this.editPolicyId = null;
-      this.copyPolicyId = null;
-      this.refresh();
-    },
-    showAddPolicyModal() {
-      this.showPolicyFormModal = true;
     },
     showPolicyOverview() {
-      this.showPolicyOverviewModal = true;
+      this.$q.dialog({
-      this.clearRow();
+        component: PolicyOverview,
+        parent: this,
+      });
+    },
+    showAddPolicyForm(policy) {
+      this.$q
+        .dialog({
+          component: PolicyForm,
+          parent: this,
+          copyPolicy: policy,
+        })
+        .onOk(() => {
+          this.refresh();
+        });
+    },
+    showEditPolicyForm(policy) {
+      this.$q
+        .dialog({
+          component: PolicyForm,
+          parent: this,
+          policy: policy,
+        })
+        .onOk(() => {
+          this.refresh();
+        });
+    },
+    showAlertTemplateAdd(policy) {
+      this.$q
+        .dialog({
+          component: AlertTemplateAdd,
+          parent: this,
+          type: "policy",
+          object: policy,
+        })
+        .onOk(() => {
+          this.refresh();
+        });
+    },
+    showPatchPolicyForm(policy) {
+      this.$q
+        .dialog({
+          component: DialogWrapper,
+          parent: this,
+          title: policy.winupdatepolicy.length > 0 ? "Edit Patch Policy" : "Add Patch Policy",
+          vuecomponent: PatchPolicyForm,
+          componentProps: {
+            policy: policy,
+          },
+        })
+        .onOk(() => {
+          this.refresh();
+        });
     },
     toggleCheckbox(policy, type) {
       let text = "";
@@ -380,44 +402,33 @@ export default {
         enforced: policy.enforced,
       };
 
-      this.$store
+      this.$axios
-        .dispatch("automation/editPolicy", data)
+        .put(`/automation/policies/${data.id}/`, data)
-        .then(response => {
+        .then(r => {
-          this.$q.notify(notifySuccessConfig(text));
+          this.notifySuccess(text);
         })
         .catch(error => {
-          this.$q.notify(notifyErrorConfig("An Error occured while editing policy"));
+          this.notifyError("An Error occured while editing policy");
         });
     },
-    showEditPatchPolicyModal(policy) {
-      this.policy = policy;
-      this.showPatchPolicyModal = true;
-    },
-    closePatchPolicyModal(policy) {
-      this.policy = null;
-      this.showPatchPolicyModal = false;
-      this.refresh();
-    },
     patchPolicyText(policy) {
-      return policy.winupdatepolicy.length === 1 ? "Show Patch Policy" : "Create Patch Policy";
+      return policy.winupdatepolicy.length > 0 ? "Show Patch Policy" : "Create Patch Policy";
-    },
-    patchPolicyModalText() {
-      if (this.policy !== null) {
-        return this.policy.winupdatepolicy.length === 1 ? "Edit Patch Policy" : "Add Patch Policy";
-      }
     },
     alertTemplateText(policy) {
-      return this.policy.alert_template ? "Modify Alert Template" : "Assign Alert Template";
+      return policy.alert_template ? "Modify Alert Template" : "Assign Alert Template";
     },
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
     },
-  computed: {
-    ...mapState({
-      policies: state => state.automation.policies,
-      selectedRow: state => state.automation.selectedPolicy,
-    }),
   },
   mounted() {
-    this.refresh();
+    this.getPolicies();
   },
 };
 </script>

web/src/components/automation/PolicyAutomatedTasksTab.vue

@@ -144,6 +144,9 @@ export default {
     PolicyStatus,
   },
   mixins: [mixins],
+  props: {
+    selectedPolicy: !Number
+  },
   data() {
     return {
       showAddAutomatedTask: false,

web/src/components/automation/PolicyChecksTab.vue

@@ -194,8 +194,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import mixins from "@/mixins/mixins";
-import mixins, { notifySuccessConfig, notifyErrorConfig } from "@/mixins/mixins";
 import PolicyStatus from "@/components/automation/modals/PolicyStatus";
 import DiskSpaceCheck from "@/components/modals/checks/DiskSpaceCheck";
 import PingCheck from "@/components/modals/checks/PingCheck";
@@ -218,8 +217,12 @@ export default {
     EventLogCheck,
   },
   mixins: [mixins],
+  props: {
+    selectedPolicy: !Number,
+  },
   data() {
     return {
+      checks: [],
       dialogComponent: null,
       showDialog: false,
       showPolicyCheckStatus: false,
@@ -233,7 +236,9 @@ export default {
         { name: "assigned_task", label: "Assigned Tasks", field: "assigned_task", align: "left", sortable: true },
       ],
       pagination: {
-        rowsPerPage: 9999,
+        rowsPerPage: 0,
+        sortBy: "status",
+        descending: true,
       },
     };
   },
@@ -310,25 +315,18 @@ export default {
             .dispatch("deleteCheck", check.id)
             .then(r => {
               this.$store.dispatch("automation/loadPolicyChecks", check.id);
-              this.$q.notify(notifySuccessConfig("Check Deleted!"));
+              this.notifySuccess("Check Deleted!");
             })
-            .catch(e => this.$q.notify(notifyErrorConfig("An Error Occurred while deleting")));
+            .catch(e => this.notifyError("An Error Occurred while deleting"));
         });
     },
-    showPolicyCheckStatusModal(check) {
+    showPolicyStatus(check) {
-      this.statusCheck = check;
+      this.$q.dialog({
-      this.showPolicyCheckStatus = true;
+        component: PolicyStatus,
+        parent: this,
+        check: check,
+      });
     },
-    closePolicyCheckStatusModal() {
-      this.showPolicyCheckStatus = false;
-      this.statusCheck = {};
-    },
-  },
-  computed: {
-    ...mapGetters({
-      checks: "automation/checks",
-      selectedPolicy: "automation/selectedPolicyPk",
-    }),
   },
 };
 </script>

web/src/components/automation/PolicyOverview.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-card style="width: 900px; max-width: 90vw">
+  <q-dialog ref="dialog" @hide="onHide">
+    <q-card class="q-dialog-plugin" style="width: 900px; max-width: 90vw">
       <q-bar>
         <q-btn @click="getPolicyTree" class="q-mr-sm" dense flat push icon="refresh" />Policy Overview
         <q-space />
@@ -14,9 +15,8 @@
               ref="tree"
               :nodes="clientSiteTree"
               node-key="id"
-            :selected.sync="selected"
               selected-color="primary"
-            @update:selected="loadPolicyDetails"
+              @update:selected="setSelectedPolicyId(key)"
               default-expand-all
             ></q-tree>
           </div>
@@ -39,19 +39,20 @@
           </q-tabs>
           <q-tab-panels v-model="selectedTab" animated transition-prev="jump-up" transition-next="jump-up">
             <q-tab-panel name="checks">
-            <PolicyChecksTab />
+              <PolicyChecksTab :selectedPolicy="selectedPolicyId" />
             </q-tab-panel>
             <q-tab-panel name="tasks">
-            <PolicyAutomatedTasksTab />
+              <PolicyAutomatedTasksTab :selectedPolicy="selectedPolicyId" />
             </q-tab-panel>
           </q-tab-panels>
         </template>
       </q-splitter>
     </q-card>
+  </q-dialog>
 </template>
 
 <script>
-import mixins, { notifyErrorConfig } from "@/mixins/mixins";
+import mixins from "@/mixins/mixins";
 import PolicyChecksTab from "@/components/automation/PolicyChecksTab";
 import PolicyAutomatedTasksTab from "@/components/automation/PolicyAutomatedTasksTab";
 
@@ -65,8 +66,7 @@ export default {
   data() {
     return {
       splitterModel: 25,
-      selected: "",
+      selectedPolicyId: null,
-      selectedPolicy: {},
       selectedTab: "checks",
       clientSiteTree: [],
     };
@@ -74,27 +74,22 @@ export default {
   methods: {
     getPolicyTree() {
       this.$q.loading.show();
-      this.$store
+      this.$axios
-        .dispatch("automation/loadPolicyTreeData")
+        .get("/automation/policies/overview/")
         .then(r => {
           this.processTreeDataFromApi(r.data);
           this.$q.loading.hide();
         })
         .catch(e => {
           this.$q.loading.hide();
-          this.$q.notify(notifyErrorConfig(e.response.data));
+          this.notifyError("Error getting policy tree data");
         });
     },
-    loadPolicyDetails(key) {
+    setSelectedPolicyId(key) {
-      if (key === undefined || key === null) {
+      if (!key) {
         return;
       }
-
+      this.selectedPolicyId = this.$refs.tree.getNodeByKey(key);
-      this.selectedPolicy = this.$refs.tree.getNodeByKey(key);
-
-      this.$store.dispatch("automation/loadPolicyChecks", this.selectedPolicy.id);
-      this.$store.commit("automation/setSelectedPolicy", this.selectedPolicy.id);
-      this.$store.dispatch("automation/loadPolicyAutomatedTasks", this.selectedPolicy.id);
     },
     processTreeDataFromApi(data) {
       /* Structure
@@ -216,6 +211,15 @@ export default {
 
       this.clientSiteTree = result;
     },
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
   },
   mounted() {
     this.getPolicyTree();

web/src/components/automation/PolicySubTableTabs.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="q-pa-md">
-    <q-tabs
-      v-model="subtab"
-      dense
-      inline-label
-      class="text-grey"
-      active-color="primary"
-      indicator-color="primary"
-      align="left"
-      narrow-indicator
-      no-caps
-    >
-      <q-tab name="checks" icon="fas fa-check-double" label="Checks" />
-      <q-tab name="tasks" icon="fas fa-tasks" label="Tasks" />
-    </q-tabs>
-    <q-separator />
-    <q-tab-panels v-model="subtab" :animated="false">
-      <q-tab-panel name="checks">
-        <PolicyChecksTab />
-      </q-tab-panel>
-      <q-tab-panel name="tasks">
-        <PolicyAutomatedTasksTab />
-      </q-tab-panel>
-    </q-tab-panels>
-  </div>
-</template>
-
-<script>
-import PolicyChecksTab from "@/components/automation/PolicyChecksTab";
-import PolicyAutomatedTasksTab from "@/components/automation/PolicyAutomatedTasksTab";
-
-export default {
-  name: "PolicySubTableTabs",
-  components: {
-    PolicyChecksTab,
-    PolicyAutomatedTasksTab,
-  },
-  data() {
-    return {
-      subtab: "checks",
-    };
-  },
-};
-</script>
-

web/src/components/automation/modals/PolicyStatus.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-card style="width: 90vw">
+  <q-dialog ref="dialog" @hide="onHide">
+    <q-card class="q-dialog-plugin" style="width: 90vw">
       <q-card-section class="row items-center">
         <div class="text-h6">{{ this.title }}</div>
         <q-space />
@@ -17,17 +18,12 @@
           binary-state-sort
           :pagination.sync="pagination"
           hide-pagination
+          no-data-label="There are no agents in this policy"
         >
           <!-- header slots -->
           <template v-slot:header-cell-statusicon="props">
             <q-th auto-width :props="props"></q-th>
           </template>
-        <!-- No data Slot -->
-        <template v-slot:no-data>
-          <div class="full-width row flex-center q-gutter-sm">
-            <span>There are no agents applied to this policy</span>
-          </div>
-        </template>
           <!-- body slots -->
           <template v-slot:body="props" :props="props">
             <q-tr>
@@ -63,7 +59,9 @@
                 >
               </q-td>
               <q-td
-              v-else-if="props.row.check_type === 'script' || props.row.retcode || props.row.stdout || props.row.stderr"
+                v-else-if="
+                  props.row.check_type === 'script' || props.row.retcode || props.row.stdout || props.row.stderr
+                "
               >
                 <span
                   style="cursor: pointer; text-decoration: underline"
@@ -99,6 +97,7 @@
         <EventLogCheckOutput @close="closeEventLogOutput" :evtlogdata="evtLogData" />
       </q-dialog>
     </q-card>
+  </q-dialog>
 </template>
 
 <script>
@@ -214,6 +213,15 @@ export default {
       this.evtLogData = check;
       this.showEventLogOutput = true;
     },
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
   },
   mounted() {
     if (this.type === "task") {

web/src/components/automation/modals/RelationsView.vue

@@ -129,8 +129,8 @@ export default {
   mounted() {
     this.$q.loading.show();
 
-    this.$store
+    this.$axios
-      .dispatch("automation/getRelated", this.policy.id)
+      .patch(`/automation/related/`, data)
       .then(r => {
         this.$q.loading.hide();
         this.related = r.data;

web/src/components/modals/agents/PatchPolicyForm.vue

@@ -217,16 +217,17 @@
       />
     </q-card-section>
     <q-card-actions align="left" v-if="policy">
-      <q-btn label="Apply" color="primary" @click="submit" />
+      <q-btn label="Submit" color="primary" @click="submit" />
+      <q-btn label="Cancel" @click="$emit('hide')" />
       <q-space />
-      <q-btn v-if="editing" label="Remove Policy" color="negative" @click="deletePolicy" />
+      <q-btn v-if="editing" label="Remove Policy" color="negative" @click="deletePolicy(winupdatepolicy)" />
     </q-card-actions>
   </div>
 </template>
 
 <script>
 import { scheduledTimes, monthDays } from "@/mixins/data";
-import { notifySuccessConfig, notifyErrorConfig } from "@/mixins/mixins";
+import mixins from "@/mixins/mixins";
 
 export default {
   name: "PatchPolicyForm",
@@ -234,6 +235,7 @@ export default {
     policy: Object,
     agent: Object,
   },
+  mixins: [mixins],
   data() {
     return {
       editing: true,
@@ -279,34 +281,34 @@ export default {
       if (this.policy) {
         // editing patch policy
         if (this.editing) {
-          this.$store
+          this.$axios
-            .dispatch("automation/editPatchPolicy", this.winupdatepolicy)
+            .put(`/automation/winupdatepolicy/${this.winupdatepolicy.id}/`, this.winupdatepolicy)
             .then(response => {
               this.$q.loading.hide();
               this.$emit("close");
-              this.$q.notify(notifySuccessConfig("Patch policy was edited successfully!"));
+              this.notifySuccess("Patch policy was edited successfully!");
             })
             .catch(error => {
               this.$q.loading.hide();
-              this.$q.notify(notifyErrorConfig("An Error occured while editing patch policy"));
+              this.notifyError("An Error occured while editing patch policy");
             });
         } else {
           // adding patch policy
-          this.$store
+          this.$axios
-            .dispatch("automation/addPatchPolicy", this.winupdatepolicy)
+            .post("/automation/winupdatepolicy/", this.winupdatepolicy)
             .then(response => {
               this.$q.loading.hide();
               this.$emit("close");
-              this.$q.notify(notifySuccessConfig("Patch policy was created successfully!"));
+              this.notifySuccess("Patch policy was created successfully!");
             })
             .catch(error => {
               this.$q.loading.hide();
-              this.$q.notify(notifyErrorConfig("An Error occured while adding patch policy"));
+              this.notifyError("An Error occured while adding patch policy");
             });
         }
       }
     },
-    deletePolicy() {
+    deletePolicy(policy) {
       this.$q
         .dialog({
           title: "Delete patch policy?",
@@ -315,30 +317,28 @@ export default {
         })
         .onOk(() => {
           this.$q.loading.show();
-          this.$store
+          this.$axios
-            .dispatch("automation/deletePatchPolicy", this.winupdatepolicy.id)
+            .delete(`/automation/winupdatepolicy/${policy.id}/`)
-            .then(response => {
+            .then(r => {
               this.$q.loading.hide();
               this.$emit("close");
-              this.$q.notify(notifySuccessConfig("Patch policy was cleared successfully!"));
+              this.notifySuccess("Patch policy was deleted successfully!");
             })
             .catch(error => {
               this.$q.loading.hide();
-              this.$q.notify(notifyErrorConfig("An Error occured while clearing the patch policy"));
+              this.notifyError("An Error occured while clearing the patch policy");
             });
         });
     },
   },
   mounted() {
-    if (this.policy) {
+    if (this.policy && this.policy.winupdatepolicy[0]) {
-      if (this.policy.winupdatepolicy.length === 1) {
       this.winupdatepolicy = this.policy.winupdatepolicy[0];
       this.editing = true;
-      } else {
+    } else if (this.policy) {
       this.winupdatepolicy = this.defaultWinUpdatePolicy;
       this.winupdatepolicy.policy = this.policy.id;
       this.editing = false;
-      }
     } else if (this.agent) {
       this.winupdatepolicy = this.agent.winupdatepolicy[0];
 

web/src/components/ui/DialogWrapper.vue

@@ -0,0 +1,45 @@
+<template>
+  <q-dialog ref="dialog" @hide="onHide">
+    <q-card class="q-dialog-plugin">
+      <q-bar>
+        <slot name="bar">
+          {{ title }}
+          <q-space />
+          <q-btn dense flat icon="close" v-close-popup>
+            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+          </q-btn>
+        </slot>
+      </q-bar>
+      <div class="scroll" style="height: 70vh">
+        <component :is="vuecomponent" v-bind="{ ...$attrs, ...componentProps }" @close="onOk" @hide="hide" />
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+export default {
+  name: "DialogWrapper",
+  props: {
+    vuecomponent: {},
+    title: String,
+    componentProps: Object,
+  },
+  inheritAttrs: false,
+  methods: {
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
+    onOk() {
+      this.$emit("ok");
+      this.hide();
+    },
+  },
+};
+</script>

web/src/store/index.js

@@ -229,8 +229,6 @@ export default function () {
             this.$router.push({ name: "InitialSetup" });
           }
 
-          console.log(r.data)
-
           let output = [];
           for (let client of r.data) {