From bfaa4e6da9bb482aea8ca258fed98c208361a7ca Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Fri, 22 Jan 2021 19:25:13 -0500
Subject: [PATCH] automation manager rework start

---
 src/components/AlertsManager.vue              |  54 +-
 src/components/FileBar.vue                    |  16 +-
 src/components/ScriptManager.vue              |   2 +-
 .../automation/AutomationManager.vue          | 613 +++++++++---------
 .../automation/PolicyAutomatedTasksTab.vue    |   3 +
 src/components/automation/PolicyChecksTab.vue |  34 +-
 src/components/automation/PolicyOverview.vue  | 128 ++--
 .../automation/PolicySubTableTabs.vue         |  46 --
 .../automation/modals/PolicyStatus.vue        | 204 +++---
 .../automation/modals/RelationsView.vue       |   4 +-
 .../modals/agents/PatchPolicyForm.vue         |  52 +-
 src/components/ui/DialogWrapper.vue           |  45 ++
 src/store/index.js                            |   2 -
 13 files changed, 608 insertions(+), 595 deletions(-)
 delete mode 100644 src/components/automation/PolicySubTableTabs.vue
 create mode 100644 src/components/ui/DialogWrapper.vue

diff --git a/src/components/AlertsManager.vue b/src/components/AlertsManager.vue
index c7f95b8..51dd14f 100644
--- a/src/components/AlertsManager.vue
+++ b/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">
-              <q-tr :props="props">
-                <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>
+            <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>
 
-                  <q-th
-                    v-else-if="col.name === 'email_severity' || col.name === 'text_severity'"
-                    auto-width
-                    :key="col.name"
-                  >
-                    {{ col.label }}
-                  </q-th>
+            <template v-slot:header-cell-email_severity="props">
+              <q-th :props="props" auto-width>
+                {{ props.name }}
+              </q-th>
+            </template>
 
-                  <q-th v-else :key="col.name" :props="props">{{ col.label }}</q-th>
-                </template>
-              </q-tr>
+            <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="
-                  editTemplate = props.row;
-                  props.selected = true;
-                "
-                @contextmenu="
-                  editTemplate = props.row;
-                  props.selected = true;
-                "
+                @click="selected = props.row"
+                @contextmenu="selected = props.row"
               >
                 <!-- context menu -->
                 <q-menu context-menu>
@@ -212,7 +204,9 @@ export default {
         },
       ],
       pagination: {
-        rowsPerPage: 9999,
+        rowsPerPage: 0,
+        sortBy: "name",
+        descending: true,
       },
     };
   },
diff --git a/src/components/FileBar.vue b/src/components/FileBar.vue
index 24111da..bda0e3a 100644
--- a/src/components/FileBar.vue
+++ b/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,
diff --git a/src/components/ScriptManager.vue b/src/components/ScriptManager.vue
index df53db5..27aebf7 100644
--- a/src/components/ScriptManager.vue
+++ b/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]"
diff --git a/src/components/automation/AutomationManager.vue b/src/components/automation/AutomationManager.vue
index b212170..09044a2 100644
--- a/src/components/automation/AutomationManager.vue
+++ b/src/components/automation/AutomationManager.vue
@@ -1,256 +1,248 @@
 <template>
-  <div style="width: 60vw; max-width: 90vw">
-    <q-card>
-      <q-bar>
-        <q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />Automation 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">
-        <div class="q-gutter-sm">
-          <q-btn ref="new" label="New" dense flat push unelevated no-caps icon="add" @click="showAddPolicyModal" />
-          <q-btn
-            ref="edit"
-            label="Edit"
-            :disable="selectedRow === null"
-            dense
-            flat
-            push
-            unelevated
-            no-caps
-            icon="edit"
-            @click="showEditPolicyModal(selectedRow)"
-          />
-          <q-btn
-            ref="delete"
-            label="Delete"
-            :disable="selectedRow === null"
-            dense
-            flat
-            push
-            unelevated
-            no-caps
-            icon="delete"
-            @click="deletePolicy(selectedRow)"
-          />
-          <q-btn
-            ref="overview"
-            label="Policy Overview"
-            dense
-            flat
-            push
-            unelevated
-            no-caps
-            icon="remove_red_eye"
-            @click="showPolicyOverview"
-          />
-        </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
-          no-data-label="No Policies"
-        >
-          <!-- header slots -->
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <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>
-
-                <q-th v-else-if="col.name === 'enforced'" auto-width :key="col.name">
-                  <q-icon name="security" size="1.5em">
-                    <q-tooltip>Enforce Policy (Will override Agent tasks/checks)</q-tooltip>
-                  </q-icon>
-                </q-th>
-
-                <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">
-              <!-- 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-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-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-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="showRelationsModal(props.row)" id="context-relation">
-                    <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-section side>
-                      <q-icon name="system_update" />
-                    </q-item-section>
-                    <q-item-section>{{ patchPolicyText(props.row) }}</q-item-section>
-                  </q-item>
-
-                  <q-item clickable v-close-popup @click="showAlertTemplateAdd(props.row)">
-                    <q-item-section side>
-                      <q-icon name="warning" />
-                    </q-item-section>
-                    <q-item-section>{{ alertTemplateText(props.row) }}</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="toggleCheckbox(props.row, 'Active')" v-model="props.row.active" />
-              </q-td>
-              <!-- enforced checkbox -->
-              <q-td>
-                <q-checkbox dense @input="toggleCheckbox(props.row, 'Enforced')" v-model="props.row.enforced" />
-              </q-td>
-              <q-td>
-                {{ props.row.name }}
-                <q-chip v-if="props.row.default_server_policy" color="primary" text-color="white" size="sm"
-                  >Default Server</q-chip
-                >
-                <q-chip v-if="props.row.default_workstation_policy" color="primary" text-color="white" size="sm"
-                  >Default Workstation</q-chip
-                >
-              </q-td>
-              <q-td>{{ props.row.desc }}</q-td>
-              <q-td>
-                <span
-                  style="cursor: pointer; text-decoration: underline"
-                  class="text-primary"
-                  @click="showRelationsModal(props.row)"
-                  >{{ `Show Relations (${props.row.agents_count}+)` }}</span
-                >
-              </q-td>
-              <q-td>
-                <span
-                  style="cursor: pointer; text-decoration: underline"
-                  class="text-primary"
-                  @click="showEditPatchPolicyModal(props.row)"
-                  >{{ patchPolicyText(props.row) }}</span
-                >
-              </q-td>
-              <q-td>
-                <span
-                  style="cursor: pointer; text-decoration: underline"
-                  class="text-primary"
-                  @click="showAlertTemplateAdd(props.row)"
-                  >{{ alertTemplateText(props.row) }}</span
-                >
-              </q-td>
-              <q-td>
-                <q-icon name="content_copy" size="1.5em" @click="showCopyPolicyModal(props.row)">
-                  <q-tooltip>Create a copy of this policy</q-tooltip>
-                </q-icon>
-              </q-td>
-            </q-tr>
-          </template>
-        </q-table>
-      </div>
-
-      <q-card-section>
-        <PolicySubTableTabs />
-      </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-dialog ref="dialog" @hide="onHide">
+    <div class="q-dialog-plugin" style="min-width: 90vw; max-width: 90vw">
+      <q-card>
         <q-bar>
-          {{ patchPolicyModalText() }}
+          <q-btn ref="refresh" @click="refresh" class="q-mr-sm" dense flat push icon="refresh" />Automation 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="scroll" style="height: 70vh">
-          <PatchPolicyForm :policy="policy" @close="closePatchPolicyModal" />
+        <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="showAddPolicyForm" />
+            <q-btn
+              ref="edit"
+              label="Edit"
+              :disable="!selectedPolicy"
+              dense
+              flat
+              push
+              unelevated
+              no-caps
+              icon="edit"
+              @click="showEditPolicyForm(selectedPolicy)"
+            />
+            <q-btn
+              ref="delete"
+              label="Delete"
+              :disable="!selectedPolicy"
+              dense
+              flat
+              push
+              unelevated
+              no-caps
+              icon="delete"
+              @click="deletePolicy(selectedPolicy)"
+            />
+            <q-btn
+              ref="overview"
+              label="Policy Overview"
+              dense
+              flat
+              push
+              unelevated
+              no-caps
+              icon="remove_red_eye"
+              @click="showPolicyOverview"
+            />
+          </div>
+          <q-table
+            :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
+            :data="policies"
+            :columns="columns"
+            :pagination.sync="pagination"
+            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-cell-active="props">
+              <q-th :props="props" auto-width>
+                <q-icon name="power_settings_new" size="1.5em">
+                  <q-tooltip>Enable Policy</q-tooltip>
+                </q-icon>
+              </q-th>
+            </template>
+
+            <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>
+
+            <!-- body slots -->
+            <template v-slot:body="props">
+              <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="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="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)">
+                      <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="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="showPatchPolicyForm(props.row)">
+                      <q-item-section side>
+                        <q-icon name="system_update" />
+                      </q-item-section>
+                      <q-item-section>{{ patchPolicyText(props.row) }}</q-item-section>
+                    </q-item>
+
+                    <q-item clickable v-close-popup @click="showAlertTemplateAdd(props.row)">
+                      <q-item-section side>
+                        <q-icon name="warning" />
+                      </q-item-section>
+                      <q-item-section>{{ alertTemplateText(props.row) }}</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="toggleCheckbox(props.row, 'Active')" v-model="props.row.active" />
+                </q-td>
+                <!-- enforced checkbox -->
+                <q-td>
+                  <q-checkbox dense @input="toggleCheckbox(props.row, 'Enforced')" v-model="props.row.enforced" />
+                </q-td>
+                <q-td>
+                  {{ props.row.name }}
+                  <q-chip v-if="props.row.default_server_policy" color="primary" text-color="white" size="sm"
+                    >Default Server</q-chip
+                  >
+                  <q-chip v-if="props.row.default_workstation_policy" color="primary" text-color="white" size="sm"
+                    >Default Workstation</q-chip
+                  >
+                </q-td>
+                <q-td>{{ props.row.desc }}</q-td>
+                <q-td>
+                  <span
+                    style="cursor: pointer; text-decoration: underline"
+                    class="text-primary"
+                    @click="showRelations(props.row)"
+                    >{{ `Show Relations (${props.row.agents_count}+)` }}</span
+                  >
+                </q-td>
+                <q-td>
+                  <span
+                    style="cursor: pointer; text-decoration: underline"
+                    class="text-primary"
+                    @click="showPatchPolicyForm(props.row)"
+                    >{{ patchPolicyText(props.row) }}</span
+                  >
+                </q-td>
+                <q-td>
+                  <span
+                    style="cursor: pointer; text-decoration: underline"
+                    class="text-primary"
+                    @click="showAlertTemplateAdd(props.row)"
+                    >{{ alertTemplateText(props.row) }}</span
+                  >
+                </q-td>
+                <q-td>
+                  <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>
+              </q-tr>
+            </template>
+          </q-table>
         </div>
+
+        <q-card-section>
+          <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>
-    </q-dialog>
-  </div>
+    </div>
+  </q-dialog>
 </template>
 
 <script>
-import mixins, { notifySuccessConfig, notifyErrorConfig } from "@/mixins/mixins";
-import { mapState } from "vuex";
+import mixins from "@/mixins/mixins";
+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,
-      showPolicyOverviewModal: false,
-      showRelationsViewModal: false,
-      showPatchPolicyModal: false,
-      policy: null,
-      editPolicyId: null,
-      copyPolicy: null,
-      selected: [],
+      subtab: "checks",
+      policies: [],
+      selectedPolicy: null,
       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");
-    },
-    policyRowSelected({ added, keys, rows }) {
-      // 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]);
+      this.$axios.get("/automation/policies/").then(r => {
+        console.log(r.data);
+        this.policies = r.data;
+      });
     },
     clearRow() {
-      this.$store.commit("automation/setSelectedPolicy", null);
-      this.$store.commit("automation/setPolicyChecks", []);
-      this.$store.commit("automation/setPolicyAutomatedTasks", {});
+      this.selectedPolicy = null;
     },
     refresh() {
       this.getPolicies();
@@ -324,44 +313,77 @@ export default {
           ok: { label: "Delete", color: "negative" },
         })
         .onOk(() => {
-          this.$store
-            .dispatch("automation/deletePolicy", id)
-            .then(response => {
-              this.$q.notify(notifySuccessConfig("Policy was deleted!"));
+          this.$axios
+            .delete(`/automation/policies/${pk}/`)
+            .then(r => {
+              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) {
-      this.policy = policy;
-      this.showRelationsViewModal = true;
-    },
-    closeRelationsModal() {
-      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;
+    showRelations(policy) {
+      this.$q.dialog({
+        component: RelationsView,
+        parent: this,
+        policy: policy,
+      });
     },
     showPolicyOverview() {
-      this.showPolicyOverviewModal = true;
-      this.clearRow();
+      this.$q.dialog({
+        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
-        .dispatch("automation/editPolicy", data)
-        .then(response => {
-          this.$q.notify(notifySuccessConfig(text));
+      this.$axios
+        .put(`/automation/policies/${data.id}/`, data)
+        .then(r => {
+          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";
-    },
-    patchPolicyModalText() {
-      if (this.policy !== null) {
-        return this.policy.winupdatepolicy.length === 1 ? "Edit Patch Policy" : "Add Patch Policy";
-      }
+      return policy.winupdatepolicy.length > 0 ? "Show Patch Policy" : "Create 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>
\ No newline at end of file
diff --git a/src/components/automation/PolicyAutomatedTasksTab.vue b/src/components/automation/PolicyAutomatedTasksTab.vue
index 02dac91..669f7bc 100644
--- a/src/components/automation/PolicyAutomatedTasksTab.vue
+++ b/src/components/automation/PolicyAutomatedTasksTab.vue
@@ -144,6 +144,9 @@ export default {
     PolicyStatus,
   },
   mixins: [mixins],
+  props: {
+    selectedPolicy: !Number
+  },
   data() {
     return {
       showAddAutomatedTask: false,
diff --git a/src/components/automation/PolicyChecksTab.vue b/src/components/automation/PolicyChecksTab.vue
index 560bc24..778d24a 100644
--- a/src/components/automation/PolicyChecksTab.vue
+++ b/src/components/automation/PolicyChecksTab.vue
@@ -194,8 +194,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
-import mixins, { notifySuccessConfig, notifyErrorConfig } from "@/mixins/mixins";
+import mixins 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) {
-      this.statusCheck = check;
-      this.showPolicyCheckStatus = true;
+    showPolicyStatus(check) {
+      this.$q.dialog({
+        component: PolicyStatus,
+        parent: this,
+        check: check,
+      });
     },
-    closePolicyCheckStatusModal() {
-      this.showPolicyCheckStatus = false;
-      this.statusCheck = {};
-    },
-  },
-  computed: {
-    ...mapGetters({
-      checks: "automation/checks",
-      selectedPolicy: "automation/selectedPolicyPk",
-    }),
   },
 };
 </script>
diff --git a/src/components/automation/PolicyOverview.vue b/src/components/automation/PolicyOverview.vue
index 4aafb77..8b88387 100644
--- a/src/components/automation/PolicyOverview.vue
+++ b/src/components/automation/PolicyOverview.vue
@@ -1,57 +1,58 @@
 <template>
-  <q-card 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 />
-      <q-btn dense flat icon="close" v-close-popup>
-        <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
-      </q-btn>
-    </q-bar>
-    <q-splitter v-model="splitterModel" style="height: 600px">
-      <template v-slot:before>
-        <div class="q-pa-md">
-          <q-tree
-            ref="tree"
-            :nodes="clientSiteTree"
-            node-key="id"
-            :selected.sync="selected"
-            selected-color="primary"
-            @update:selected="loadPolicyDetails"
-            default-expand-all
-          ></q-tree>
-        </div>
-      </template>
+  <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 />
+        <q-btn dense flat icon="close" v-close-popup>
+          <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
+        </q-btn>
+      </q-bar>
+      <q-splitter v-model="splitterModel" style="height: 600px">
+        <template v-slot:before>
+          <div class="q-pa-md">
+            <q-tree
+              ref="tree"
+              :nodes="clientSiteTree"
+              node-key="id"
+              selected-color="primary"
+              @update:selected="setSelectedPolicyId(key)"
+              default-expand-all
+            ></q-tree>
+          </div>
+        </template>
 
-      <template v-slot:after>
-        <q-tabs
-          v-model="selectedTab"
-          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-tab-panels v-model="selectedTab" animated transition-prev="jump-up" transition-next="jump-up">
-          <q-tab-panel name="checks">
-            <PolicyChecksTab />
-          </q-tab-panel>
-          <q-tab-panel name="tasks">
-            <PolicyAutomatedTasksTab />
-          </q-tab-panel>
-        </q-tab-panels>
-      </template>
-    </q-splitter>
-  </q-card>
+        <template v-slot:after>
+          <q-tabs
+            v-model="selectedTab"
+            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-tab-panels v-model="selectedTab" animated transition-prev="jump-up" transition-next="jump-up">
+            <q-tab-panel name="checks">
+              <PolicyChecksTab :selectedPolicy="selectedPolicyId" />
+            </q-tab-panel>
+            <q-tab-panel name="tasks">
+              <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: "",
-      selectedPolicy: {},
+      selectedPolicyId: null,
       selectedTab: "checks",
       clientSiteTree: [],
     };
@@ -74,27 +74,22 @@ export default {
   methods: {
     getPolicyTree() {
       this.$q.loading.show();
-      this.$store
-        .dispatch("automation/loadPolicyTreeData")
+      this.$axios
+        .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) {
-      if (key === undefined || key === null) {
+    setSelectedPolicyId(key) {
+      if (!key) {
         return;
       }
-
-      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);
+      this.selectedPolicyId = this.$refs.tree.getNodeByKey(key);
     },
     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();
diff --git a/src/components/automation/PolicySubTableTabs.vue b/src/components/automation/PolicySubTableTabs.vue
deleted file mode 100644
index 77abeb5..0000000
--- a/src/components/automation/PolicySubTableTabs.vue
+++ /dev/null
@@ -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>
-
diff --git a/src/components/automation/modals/PolicyStatus.vue b/src/components/automation/modals/PolicyStatus.vue
index 73fb82f..f6b2e45 100644
--- a/src/components/automation/modals/PolicyStatus.vue
+++ b/src/components/automation/modals/PolicyStatus.vue
@@ -1,104 +1,103 @@
 <template>
-  <q-card style="width: 90vw">
-    <q-card-section class="row items-center">
-      <div class="text-h6">{{ this.title }}</div>
-      <q-space />
-      <q-btn icon="close" flat round dense v-close-popup />
-    </q-card-section>
-    <q-card-section>
-      <q-table
-        dense
-        :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
-        class="tabs-tbl-sticky"
-        style="max-height: 35vh"
-        :data="tableData"
-        :columns="columns"
-        row-key="id"
-        binary-state-sort
-        :pagination.sync="pagination"
-        hide-pagination
-      >
-        <!-- 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>
-            <!-- tds -->
-            <q-td>{{ props.row.hostname }}</q-td>
-            <!-- status icon -->
-            <q-td v-if="props.row.status === 'pending'"></q-td>
-            <q-td v-else-if="props.row.status === 'passing'">
-              <q-icon style="font-size: 1.3rem" color="positive" name="check_circle" />
-            </q-td>
-            <q-td v-else-if="props.row.status === 'failing'">
-              <q-icon style="font-size: 1.3rem" color="negative" name="error" />
-            </q-td>
-            <q-td v-else></q-td>
-            <!-- status text -->
-            <q-td v-if="props.row.status === 'pending'">Awaiting First Synchronization</q-td>
-            <q-td v-else-if="props.row.status === 'passing'">
-              <q-badge color="positive">No Issues</q-badge>
-            </q-td>
-            <q-td v-else-if="props.row.status === 'failing'">
-              <q-badge color="negative">Failing</q-badge>
-            </q-td>
-            <q-td v-else-if="props.row.sync_status === 'notsynced'">Will sync on next agent checkin</q-td>
-            <q-td v-else-if="props.row.sync_status === 'synced'">Synced with agent</q-td>
-            <q-td v-else-if="props.row.sync_status === 'pendingdeletion'">Pending deletion on agent</q-td>
-            <!-- more info -->
-            <q-td v-if="props.row.check_type === 'ping'">
-              <span
-                style="cursor: pointer; text-decoration: underline"
-                @click="pingInfo(props.row)"
-                class="ping-cell text-primary"
-                >output</span
+  <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 />
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-card-section>
+      <q-card-section>
+        <q-table
+          dense
+          :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
+          class="tabs-tbl-sticky"
+          style="max-height: 35vh"
+          :data="tableData"
+          :columns="columns"
+          row-key="id"
+          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>
+          <!-- body slots -->
+          <template v-slot:body="props" :props="props">
+            <q-tr>
+              <!-- tds -->
+              <q-td>{{ props.row.hostname }}</q-td>
+              <!-- status icon -->
+              <q-td v-if="props.row.status === 'pending'"></q-td>
+              <q-td v-else-if="props.row.status === 'passing'">
+                <q-icon style="font-size: 1.3rem" color="positive" name="check_circle" />
+              </q-td>
+              <q-td v-else-if="props.row.status === 'failing'">
+                <q-icon style="font-size: 1.3rem" color="negative" name="error" />
+              </q-td>
+              <q-td v-else></q-td>
+              <!-- status text -->
+              <q-td v-if="props.row.status === 'pending'">Awaiting First Synchronization</q-td>
+              <q-td v-else-if="props.row.status === 'passing'">
+                <q-badge color="positive">No Issues</q-badge>
+              </q-td>
+              <q-td v-else-if="props.row.status === 'failing'">
+                <q-badge color="negative">Failing</q-badge>
+              </q-td>
+              <q-td v-else-if="props.row.sync_status === 'notsynced'">Will sync on next agent checkin</q-td>
+              <q-td v-else-if="props.row.sync_status === 'synced'">Synced with agent</q-td>
+              <q-td v-else-if="props.row.sync_status === 'pendingdeletion'">Pending deletion on agent</q-td>
+              <!-- more info -->
+              <q-td v-if="props.row.check_type === 'ping'">
+                <span
+                  style="cursor: pointer; text-decoration: underline"
+                  @click="pingInfo(props.row)"
+                  class="ping-cell text-primary"
+                  >output</span
+                >
+              </q-td>
+              <q-td
+                v-else-if="
+                  props.row.check_type === 'script' || props.row.retcode || props.row.stdout || props.row.stderr
+                "
               >
-            </q-td>
-            <q-td
-              v-else-if="props.row.check_type === 'script' || props.row.retcode || props.row.stdout || props.row.stderr"
-            >
-              <span
-                style="cursor: pointer; text-decoration: underline"
-                @click="scriptMoreInfo(props.row)"
-                class="script-cell text-primary"
-                >output</span
-              >
-            </q-td>
-            <q-td v-else-if="props.row.check_type === 'eventlog'">
-              <span
-                style="cursor: pointer; text-decoration: underline"
-                @click="eventLogMoreInfo(props.row)"
-                class="eventlog-cell text-primary"
-                >output</span
-              >
-            </q-td>
-            <q-td v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'">{{
-              props.row.history_info
-            }}</q-td>
-            <q-td v-else-if="props.row.more_info">{{ props.row.more_info }}</q-td>
-            <q-td v-else>Awaiting Output</q-td>
-            <!-- last run -->
-            <q-td>{{ props.row.last_run }}</q-td>
-          </q-tr>
-        </template>
-      </q-table>
-    </q-card-section>
+                <span
+                  style="cursor: pointer; text-decoration: underline"
+                  @click="scriptMoreInfo(props.row)"
+                  class="script-cell text-primary"
+                  >output</span
+                >
+              </q-td>
+              <q-td v-else-if="props.row.check_type === 'eventlog'">
+                <span
+                  style="cursor: pointer; text-decoration: underline"
+                  @click="eventLogMoreInfo(props.row)"
+                  class="eventlog-cell text-primary"
+                  >output</span
+                >
+              </q-td>
+              <q-td v-else-if="props.row.check_type === 'cpuload' || props.row.check_type === 'memory'">{{
+                props.row.history_info
+              }}</q-td>
+              <q-td v-else-if="props.row.more_info">{{ props.row.more_info }}</q-td>
+              <q-td v-else>Awaiting Output</q-td>
+              <!-- last run -->
+              <q-td>{{ props.row.last_run }}</q-td>
+            </q-tr>
+          </template>
+        </q-table>
+      </q-card-section>
 
-    <q-dialog v-model="showScriptOutput" @hide="closeScriptOutput">
-      <ScriptOutput @close="closeScriptOutput" :scriptInfo="scriptInfo" />
-    </q-dialog>
-    <q-dialog v-model="showEventLogOutput" @hide="closeEventLogOutput">
-      <EventLogCheckOutput @close="closeEventLogOutput" :evtlogdata="evtLogData" />
-    </q-dialog>
-  </q-card>
+      <q-dialog v-model="showScriptOutput" @hide="closeScriptOutput">
+        <ScriptOutput @close="closeScriptOutput" :scriptInfo="scriptInfo" />
+      </q-dialog>
+      <q-dialog v-model="showEventLogOutput" @hide="closeEventLogOutput">
+        <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") {
diff --git a/src/components/automation/modals/RelationsView.vue b/src/components/automation/modals/RelationsView.vue
index 1a92646..1a8d840 100644
--- a/src/components/automation/modals/RelationsView.vue
+++ b/src/components/automation/modals/RelationsView.vue
@@ -129,8 +129,8 @@ export default {
   mounted() {
     this.$q.loading.show();
 
-    this.$store
-      .dispatch("automation/getRelated", this.policy.id)
+    this.$axios
+      .patch(`/automation/related/`, data)
       .then(r => {
         this.$q.loading.hide();
         this.related = r.data;
diff --git a/src/components/modals/agents/PatchPolicyForm.vue b/src/components/modals/agents/PatchPolicyForm.vue
index ed1236b..5367398 100644
--- a/src/components/modals/agents/PatchPolicyForm.vue
+++ b/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
-            .dispatch("automation/editPatchPolicy", this.winupdatepolicy)
+          this.$axios
+            .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
-            .dispatch("automation/addPatchPolicy", this.winupdatepolicy)
+          this.$axios
+            .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
-            .dispatch("automation/deletePatchPolicy", this.winupdatepolicy.id)
-            .then(response => {
+          this.$axios
+            .delete(`/automation/winupdatepolicy/${policy.id}/`)
+            .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.winupdatepolicy.length === 1) {
-        this.winupdatepolicy = this.policy.winupdatepolicy[0];
-        this.editing = true;
-      } else {
-        this.winupdatepolicy = this.defaultWinUpdatePolicy;
-        this.winupdatepolicy.policy = this.policy.id;
-        this.editing = false;
-      }
+    if (this.policy && this.policy.winupdatepolicy[0]) {
+      this.winupdatepolicy = this.policy.winupdatepolicy[0];
+      this.editing = true;
+    } 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];
 
diff --git a/src/components/ui/DialogWrapper.vue b/src/components/ui/DialogWrapper.vue
new file mode 100644
index 0000000..f4801b9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index b6ee99e..67447f2 100644
--- a/src/store/index.js
+++ b/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) {