implement alert template exclusions

src/components/AlertsIcon.vue

@@ -7,7 +7,7 @@
         <q-item v-for="alert in topAlerts" :key="alert.id">
           <q-item-section>
             <q-item-label overline>{{ alert.client }} - {{ alert.site }} - {{ alert.hostname }}</q-item-label>
-            <q-item-label>
+            <q-item-label lines="1">
               <q-icon size="xs" :class="`text-${alertIconColor(alert.severity)}`" :name="alert.severity"></q-icon>
               {{ alert.message }}
             </q-item-label>

src/components/AlertsManager.vue

@@ -86,17 +86,18 @@
                 :class="rowSelectedClass(props.row.id, selectedTemplate)"
                 @click="selectedTemplate = props.row"
                 @contextmenu="selectedTemplate = props.row"
+                @dblclick="showEditTemplateModal(props.row)"
               >
                 <!-- context menu -->
                 <q-menu context-menu>
                   <q-list dense style="min-width: 200px">
-                    <q-item clickable v-close-popup @click="showEditTemplateModal(props.row)" id="context-edit">
+                    <q-item clickable v-close-popup @click="showEditTemplateModal(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="deleteTemplate(props.row)" id="context-delete">
+                    <q-item clickable v-close-popup @click="deleteTemplate(props.row)">
                       <q-item-section side>
                         <q-icon name="delete" />
                       </q-item-section>
@@ -105,6 +106,15 @@
 
                     <q-separator></q-separator>
 
+                    <q-item clickable v-close-popup @click="showAlertExclusions(props.row)">
+                      <q-item-section side>
+                        <q-icon name="rule" />
+                      </q-item-section>
+                      <q-item-section>Alert Exclusions</q-item-section>
+                    </q-item>
+
+                    <q-separator></q-separator>
+
                     <q-item clickable v-close-popup>
                       <q-item-section>Close</q-item-section>
                     </q-item>
@@ -137,7 +147,18 @@
                 <!-- applied to -->
                 <q-td>Applied To Placeholder</q-td>
                 <!-- alert exclusions -->
-                <q-td> Alert Exclusions </q-td>
+                <q-td>
+                  <span
+                    style="cursor: pointer; text-decoration: underline"
+                    class="text-primary"
+                    @click="showAlertExclusions(props.row)"
+                    >Alert Exclusions ({{
+                      props.row.excluded_agents.length +
+                      props.row.excluded_clients.length +
+                      props.row.excluded_sites.length
+                    }})</span
+                  ></q-td
+                >
                 <!-- actions -->
                 <q-td>{{ props.row.actions.length }} actions</q-td>
               </q-tr>
@@ -152,6 +173,7 @@
 <script>
 import mixins from "@/mixins/mixins";
 import AlertTemplateForm from "@/components/modals/alerts/AlertTemplateForm";
+import AlertExclusions from "@/components/modals/alerts/AlertExclusions";
 
 export default {
   name: "AlertsManager",
@@ -257,6 +279,17 @@ export default {
           this.refresh();
         });
     },
+    showAlertExclusions(template) {
+      this.$q
+        .dialog({
+          component: AlertExclusions,
+          parent: this,
+          template: template,
+        })
+        .onOk(() => {
+          this.refresh();
+        });
+    },
     toggleEnabled(template) {
       let text = template.is_active ? "Template enabled successfully" : "Template disabled successfully";
 

src/components/automation/AutomationManager.vue

@@ -85,6 +85,7 @@
                 :class="rowSelectedClass(props.row.id, selectedPolicy)"
                 @click="selectedPolicy = props.row"
                 @contextmenu="selectedPolicy = props.row"
+                @dblclick="showEditPolicyForm(props.row)"
               >
                 <!-- context menu -->
                 <q-menu context-menu>

src/components/automation/PolicyAutomatedTasksTab.vue

@@ -64,7 +64,7 @@
           </template>
           <!-- body slots -->
           <template v-slot:body="props" :props="props">
-            <q-tr @contextmenu="editTaskPk = props.row.id">
+            <q-tr @dblclick="showEditTask(props.row)">
               <!-- context menu -->
               <q-menu context-menu>
                 <q-list dense style="min-width: 200px">
@@ -74,7 +74,7 @@
                     </q-item-section>
                     <q-item-section>Run task now</q-item-section>
                   </q-item>
-                  <q-item clickable v-close-popup @click="showEditTask(props.row)" v-if="!props.row.managed_by_policy">
+                  <q-item clickable v-close-popup @click="showEditTask(props.row)">
                     <q-item-section side>
                       <q-icon name="edit" />
                     </q-item-section>

src/components/automation/PolicyChecksTab.vue

@@ -99,17 +99,17 @@
           </template>
           <!-- body slots -->
           <template v-slot:body="props">
-            <q-tr :props="props">
+            <q-tr :props="props" @dblclick="showEditDialog(props.row)">
               <!-- context menu -->
               <q-menu context-menu>
                 <q-list dense style="min-width: 200px">
-                  <q-item clickable v-close-popup @click="showEditDialog(props.row)" id="context-edit">
+                  <q-item clickable v-close-popup @click="showEditDialog(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="deleteCheck(props.row)" id="context-delete">
+                  <q-item clickable v-close-popup @click="deleteCheck(props.row)">
                     <q-item-section side>
                       <q-icon name="delete" />
                     </q-item-section>
@@ -118,7 +118,7 @@
 
                   <q-separator></q-separator>
 
-                  <q-item clickable v-close-popup @click="showPolicyStatus(props.row)" id="context-status">
+                  <q-item clickable v-close-popup @click="showPolicyStatus(props.row)">
                     <q-item-section side>
                       <q-icon name="sync" />
                     </q-item-section>

src/components/modals/alerts/AlertExclusions.vue

@@ -0,0 +1,153 @@
+<template>
+  <q-dialog ref="dialog" @hide="onHide">
+    <q-card style="width: 50vw; max-width: 50vw">
+      <q-bar>
+        Alert Exclusions for {{ template.name }}
+        <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-form ref="form" @submit.prevent="onSubmit">
+        <q-card-section>
+          <q-select
+            label="Excluded Clients"
+            dense
+            options-dense
+            outlined
+            multiple
+            v-model="localTemplate.excluded_clients"
+            :options="clientOptions"
+            use-chips
+            map-options
+            emit-value
+          />
+        </q-card-section>
+        <q-card-section>
+          <q-select
+            label="Excluded Sites"
+            dense
+            options-dense
+            outlined
+            multiple
+            v-model="localTemplate.excluded_sites"
+            :options="siteOptions"
+            use-chips
+            map-options
+            emit-value
+          >
+            <template v-slot:option="scope">
+              <q-item v-if="!scope.opt.category" v-bind="scope.itemProps" v-on="scope.itemEvents" class="q-pl-lg">
+                <q-item-section>
+                  <q-item-label v-html="scope.opt.label"></q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item-label v-if="scope.opt.category" header>{{ scope.opt.category }}</q-item-label>
+            </template>
+          </q-select>
+        </q-card-section>
+        <q-card-section>
+          <q-select
+            label="Excluded Agents"
+            dense
+            options-dense
+            outlined
+            multiple
+            v-model="localTemplate.excluded_agents"
+            :options="agentOptions"
+            use-chips
+            map-options
+            emit-value
+          />
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn dense flat label="Cancel" v-close-popup />
+          <q-btn dense flat label="Save" color="primary" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import mixins from "@/mixins/mixins";
+export default {
+  name: "AlertExclusions",
+  props: { template: !Object },
+  mixins: [mixins],
+  data() {
+    return {
+      localTemplate: {
+        excluded_clients: [],
+        excluded_sites: [],
+        excluded_agents: [],
+      },
+      clientOptions: [],
+      siteOptions: [],
+      agentOptions: [],
+    };
+  },
+  methods: {
+    onSubmit() {
+      this.$axios
+        .put(`alerts/alerttemplates/${this.template.id}/`, this.localTemplate)
+        .then(r => {
+          this.$q.loading.hide();
+          this.onOk();
+          this.notifySuccess("Alert Template exclusions added");
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+          this.notifyError("There was an issue adding alert exclusions");
+        });
+    },
+    getClients() {
+      this.$axios.get("/clients/clients/").then(r => {
+        this.clientOptions = r.data.map(client => ({ label: client.name, value: client.id }));
+      });
+    },
+    getSites() {
+      this.$axios.get("/clients/clients/").then(r => {
+        r.data.forEach(client => {
+          this.siteOptions.push({ category: client.name });
+          client.sites.forEach(site => this.siteOptions.push({ label: site.name, value: site.id }));
+        });
+      });
+    },
+    getAgents() {
+      this.$axios.get("/agents/listagentsnodetail/").then(r => {
+        const ret = r.data.map(agent => ({ label: agent.hostname, value: agent.pk }));
+        this.agentOptions = Object.freeze(ret.sort((a, b) => a.label.localeCompare(b.label)));
+      });
+    },
+    getOptions() {
+      this.getClients();
+      this.getSites();
+      this.getAgents();
+    },
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
+    onOk() {
+      this.$emit("ok");
+      this.hide();
+    },
+  },
+  mounted() {
+    this.getOptions();
+
+    // copy prop data locally
+    this.localTemplate.id = this.template.id;
+    this.localTemplate.excluded_clients = this.template.excluded_clients;
+    this.localTemplate.excluded_sites = this.template.excluded_sites;
+    this.localTemplate.excluded_agents = this.template.excluded_agents;
+  },
+};
+</script>

src/components/modals/alerts/AlertTemplateForm.vue

@@ -559,7 +559,7 @@ export default {
           .put(`alerts/alerttemplates/${this.template.id}/`, this.template)
           .then(r => {
             this.$q.loading.hide();
-            this.onOK();
+            this.onOk();
             this.notifySuccess("Alert Template edited!");
           })
           .catch(e => {
@@ -571,7 +571,7 @@ export default {
           .post("alerts/alerttemplates/", this.template)
           .then(r => {
             this.$q.loading.hide();
-            this.onOK();
+            this.onOk();
             this.notifySuccess(`Alert Template was added!`);
           })
           .catch(e => {
@@ -596,7 +596,7 @@ export default {
     onHide() {
       this.$emit("hide");
     },
-    onOK() {
+    onOk() {
       this.$emit("ok");
       this.hide();
     },