From 7861792ef68e7080c3ef2c1af0a583bf6fbbf542 Mon Sep 17 00:00:00 2001
From: sadnub <josh@torchlake.com>
Date: Mon, 25 Jan 2021 18:01:25 -0500
Subject: [PATCH] alerts overview work

---
 src/components/AlertsIcon.vue                 |  67 ++--
 src/components/ScriptManager.vue              |   2 +-
 .../automation/AutomationManager.vue          |   9 +-
 src/components/automation/PolicyOverview.vue  |  53 ++-
 .../automation/modals/PolicyAdd.vue           |  15 +-
 .../modals/alerts/AlertsOverview.vue          | 314 ++++++++++++++----
 src/views/Dashboard.vue                       |   2 +-
 7 files changed, 322 insertions(+), 140 deletions(-)

diff --git a/src/components/AlertsIcon.vue b/src/components/AlertsIcon.vue
index c3da7c3..f981cf5 100644
--- a/src/components/AlertsIcon.vue
+++ b/src/components/AlertsIcon.vue
@@ -1,18 +1,14 @@
 <template>
   <q-btn dense flat icon="notifications">
-    <q-badge v-if="alerts.length !== 0" color="red" floating transparent>{{ alertsLengthText() }}</q-badge>
+    <q-badge v-if="alertsCount > 0" color="red" floating transparent>{{ alertsCountText() }}</q-badge>
     <q-menu>
       <q-list separator>
-        <q-item v-if="alerts.length === 0">No New Alerts</q-item>
-        <q-item v-for="alert in alerts" :key="alert.id">
+        <q-item v-if="alertsCount === 0">No New Alerts</q-item>
+        <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-icon
-                size="xs"
-                :class="`text-${alertColor(alert.severity)}`"
-                :name="alert.severity"
-              ></q-icon>
+              <q-icon size="xs" :class="`text-${alertIconColor(alert.severity)}`" :name="alert.severity"></q-icon>
               {{ alert.message }}
             </q-item-label>
           </q-item-section>
@@ -20,51 +16,56 @@
           <q-item-section side top>
             <q-item-label caption>{{ alertTime(alert.alert_time) }}</q-item-label>
             <q-item-label>
-              <q-icon name="snooze" size="xs">
+              <q-icon name="snooze" size="xs" class="cursor-pointer">
                 <q-tooltip>Snooze the alert for 24 hours</q-tooltip>
               </q-icon>
-              <q-icon name="alarm_off" size="xs">
+              <q-icon name="alarm_off" size="xs" class="cursor-pointer">
                 <q-tooltip>Dismiss alert</q-tooltip>
               </q-icon>
             </q-item-label>
           </q-item-section>
         </q-item>
-        <q-item clickable @click="showAlertsModal = true">View All Alerts ({{ alerts.length }})</q-item>
+        <q-item clickable @click="showOverview">View All Alerts ({{ alertsCount }})</q-item>
       </q-list>
     </q-menu>
-
-    <q-dialog
-      v-model="showAlertsModal"
-      maximized
-      transition-show="slide-up"
-      transition-hide="slide-down"
-    >
-      <AlertsOverview @close="showAlertsModal = false" />
-    </q-dialog>
   </q-btn>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
 import mixins from "@/mixins/mixins";
 import AlertsOverview from "@/components/modals/alerts/AlertsOverview";
 
 export default {
   name: "AlertsIcon",
-  components: { AlertsOverview },
   mixins: [mixins],
   data() {
     return {
-      showAlertsModal: false,
+      alertsCount: 0,
+      topAlerts: [],
     };
   },
   methods: {
     getAlerts() {
-      this.$store.dispatch("alerts/getAlerts").catch(error => {
-        console.error(error);
+      this.$q.loading.show();
+      this.$axios
+        .patch("alerts/alerts/", { top: 10 })
+        .then(r => {
+          this.alertsCount = r.data.alerts_count;
+          this.topAlerts = r.data.alerts;
+          this.$q.loading.hide();
+        })
+        .catch(error => {
+          this.$q.loading.hide();
+          this.notifyError("Unable to get alerts");
+        });
+    },
+    showOverview() {
+      this.$q.dialog({
+        component: AlertsOverview,
+        parent: this,
       });
     },
-    alertColor(type) {
+    alertIconColor(type) {
       if (type === "error") {
         return "red";
       }
@@ -72,20 +73,14 @@ export default {
         return "orange";
       }
     },
-    alertsLengthText() {
-      if (this.alerts.length > 9) {
-        return "9+";
+    alertsCountText() {
+      if (this.alertsCount > 99) {
+        return "99+";
       } else {
-        return this.alerts.length;
+        return this.alertsCount;
       }
     },
   },
-  computed: {
-    ...mapGetters({
-      newAlerts: "alerts/getNewAlerts",
-      alerts: "alerts/getAlerts",
-    }),
-  },
   mounted() {
     this.getAlerts();
   },
diff --git a/src/components/ScriptManager.vue b/src/components/ScriptManager.vue
index 27aebf7..41d9cfd 100644
--- a/src/components/ScriptManager.vue
+++ b/src/components/ScriptManager.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 60vw; max-width: 90vw">
+  <div style="width: 90vw; max-width: 90vw">
     <q-card>
       <q-bar>
         <q-btn @click="getScripts" class="q-mr-sm" dense flat push icon="refresh" />Script Manager
diff --git a/src/components/automation/AutomationManager.vue b/src/components/automation/AutomationManager.vue
index f1100ec..9a8ca61 100644
--- a/src/components/automation/AutomationManager.vue
+++ b/src/components/automation/AutomationManager.vue
@@ -311,7 +311,7 @@ export default {
       this.getPolicies();
       this.clearRow();
     },
-    deletePolicy(id) {
+    deletePolicy(policy) {
       this.$q
         .dialog({
           title: "Delete policy?",
@@ -319,12 +319,16 @@ export default {
           ok: { label: "Delete", color: "negative" },
         })
         .onOk(() => {
+          this.$q.loading.show();
           this.$axios
-            .delete(`/automation/policies/${pk}/`)
+            .delete(`/automation/policies/${policy.id}/`)
             .then(r => {
+              this.refresh();
+              this.$q.loading.hide();
               this.notifySuccess("Policy was deleted!");
             })
             .catch(error => {
+              this.$q.loading.hide();
               this.notifyError("An Error occured while deleting policy");
             });
         });
@@ -422,6 +426,7 @@ export default {
       this.$axios
         .put(`/automation/policies/${data.id}/`, data)
         .then(r => {
+          this.refresh();
           this.$q.loading.hide();
           this.notifySuccess(text);
         })
diff --git a/src/components/automation/PolicyOverview.vue b/src/components/automation/PolicyOverview.vue
index 8b88387..1716746 100644
--- a/src/components/automation/PolicyOverview.vue
+++ b/src/components/automation/PolicyOverview.vue
@@ -16,8 +16,7 @@
               :nodes="clientSiteTree"
               node-key="id"
               selected-color="primary"
-              @update:selected="setSelectedPolicyId(key)"
-              default-expand-all
+              :selected.sync="selectedPolicyId"
             ></q-tree>
           </div>
         </template>
@@ -39,10 +38,10 @@
           </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" />
+              <PolicyChecksTab v-if="!!selectedPolicyId" :selectedPolicy="selectedPolicyId" />
             </q-tab-panel>
             <q-tab-panel name="tasks">
-              <PolicyAutomatedTasksTab :selectedPolicy="selectedPolicyId" />
+              <PolicyAutomatedTasksTab v-if="!!selectedPolicyId" :selectedPolicy="selectedPolicyId" />
             </q-tab-panel>
           </q-tab-panels>
         </template>
@@ -85,12 +84,6 @@ export default {
           this.notifyError("Error getting policy tree data");
         });
     },
-    setSelectedPolicyId(key) {
-      if (!key) {
-        return;
-      }
-      this.selectedPolicyId = this.$refs.tree.getNodeByKey(key);
-    },
     processTreeDataFromApi(data) {
       /* Structure
        * [{
@@ -114,10 +107,10 @@ export default {
       // Used by tree for unique identification
       let unique_id = 0;
 
-      for (let client in data) {
+      for (let client of data) {
         var client_temp = {};
 
-        client_temp["label"] = data[client].name;
+        client_temp["label"] = client.name;
         client_temp["id"] = unique_id;
         client_temp["icon"] = "business";
         client_temp["selectable"] = false;
@@ -126,41 +119,41 @@ export default {
         unique_id--;
 
         // Add any server policies assigned to client
-        if (data[client].server_policy !== null) {
+        if (!!client.server_policy) {
           let disabled = "";
 
           // Indicate if the policy is active or not
-          if (!data[client].server_policy.active) {
+          if (!client.server_policy.active) {
             disabled = " (disabled)";
           }
 
           client_temp["children"].push({
-            label: data[client].server_policy.name + " (Servers)" + disabled,
+            label: client.server_policy.name + " (Servers)" + disabled,
             icon: "policy",
-            id: data[client].server_policy.id,
+            id: client.server_policy.id,
           });
         }
 
         // Add any workstation policies assigned to client
-        if (data[client].workstation_policy !== null) {
+        if (!!client.workstation_policy) {
           let disabled = "";
 
           // Indicate if the policy is active or not
-          if (!data[client].workstation_policy.active) {
+          if (!client.workstation_policy.active) {
             disabled = " (disabled)";
           }
 
           client_temp["children"].push({
-            label: data[client].workstation_policy.name + " (Workstations)" + disabled,
+            label: client.workstation_policy.name + " (Workstations)" + disabled,
             icon: "policy",
-            id: data[client].workstation_policy.id,
+            id: client.workstation_policy.id,
           });
         }
 
         // Iterate through Sites
-        for (let site in data[client].sites) {
+        for (let site of client.sites) {
           var site_temp = {};
-          site_temp["label"] = data[client].sites[site].name;
+          site_temp["label"] = site.name;
           site_temp["id"] = unique_id;
           site_temp["icon"] = "apartment";
           site_temp["selectable"] = false;
@@ -168,36 +161,36 @@ export default {
           unique_id--;
 
           // Add any server policies assigned to site
-          if (data[client].sites[site].server_policy !== null) {
+          if (!!site.server_policy) {
             site_temp["children"] = [];
 
             // Indicate if the policy is active or not
             let disabled = "";
-            if (!data[client].sites[site].server_policy.active) {
+            if (!site.server_policy.active) {
               disabled = " (disabled)";
             }
 
             site_temp["children"].push({
-              label: data[client].sites[site].server_policy.name + " (Servers)" + disabled,
+              label: site.server_policy.name + " (Servers)" + disabled,
               icon: "policy",
-              id: data[client].sites[site].server_policy.id,
+              id: site.server_policy.id,
             });
           }
 
           // Add any server policies assigned to site
-          if (data[client].sites[site].workstation_policy !== null) {
+          if (!!site.workstation_policy) {
             site_temp["children"] = [];
 
             // Indicate if the policy is active or not
             let disabled = "";
-            if (!data[client].sites[site].workstation_policy.active) {
+            if (!site.workstation_policy.active) {
               disabled = " (disabled)";
             }
 
             site_temp["children"].push({
-              label: data[client].sites[site].workstation_policy.name + " (Workstations)" + disabled,
+              label: site.workstation_policy.name + " (Workstations)" + disabled,
               icon: "policy",
-              id: data[client].sites[site].workstation_policy.id,
+              id: site.workstation_policy.id,
             });
           }
 
diff --git a/src/components/automation/modals/PolicyAdd.vue b/src/components/automation/modals/PolicyAdd.vue
index 69e6b28..440b317 100644
--- a/src/components/automation/modals/PolicyAdd.vue
+++ b/src/components/automation/modals/PolicyAdd.vue
@@ -11,7 +11,7 @@
       <q-form @submit="submit">
         <q-card-section v-if="options.length > 0">
           <q-select
-            v-if="type !== 'agent'"
+            v-if="type === 'client' || type === 'site'"
             class="q-mb-md"
             v-model="selectedServerPolicy"
             :options="options"
@@ -25,7 +25,7 @@
           >
           </q-select>
           <q-select
-            v-if="type !== 'agent'"
+            v-if="type === 'client' || type === 'site'"
             v-model="selectedWorkstationPolicy"
             :options="options"
             outlined
@@ -91,7 +91,7 @@ export default {
   methods: {
     submit() {
       // check if data was changed
-      if (this.type !== "agent") {
+      if (this.type === "client" || this.type === "site") {
         if (
           this.object.workstation_policy === this.selectedWorkstationPolicy &&
           this.object.server_policy === this.selectedServerPolicy
@@ -99,11 +99,13 @@ export default {
           this.hide();
           return;
         }
-      } else {
+      } else if (this.type === "agent") {
         if (this.object.policy === this.selectedAgentPolicy) {
           this.hide();
           return;
         }
+      } else {
+        return;
       }
       this.$q.loading.show();
 
@@ -112,14 +114,13 @@ export default {
         type: this.type,
       };
 
-      if (this.type !== "agent") {
+      if (this.type === "client" || this.type === "site") {
         data.server_policy = this.selectedServerPolicy;
         data.workstation_policy = this.selectedWorkstationPolicy;
-      } else {
+      } else if (this.type === "agent") {
         data.policy = this.selectedAgentPolicy;
       }
 
-      console.log(data);
       this.$axios
         .post(`/automation/related/`, data)
         .then(r => {
diff --git a/src/components/modals/alerts/AlertsOverview.vue b/src/components/modals/alerts/AlertsOverview.vue
index e429ded..593f999 100644
--- a/src/components/modals/alerts/AlertsOverview.vue
+++ b/src/components/modals/alerts/AlertsOverview.vue
@@ -1,86 +1,270 @@
 <template>
-  <q-card>
-    <q-bar>
-      Alerts 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-dialog ref="dialog" @hide="onHide" maximized transition-show="slide-up" transition-hide="slide-down">
+    <q-card>
+      <q-bar>
+        <q-btn @click="search" class="q-mr-sm" dense flat push icon="refresh" />
+        <q-space />
+        Alerts 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-separator />
+      <div class="text-h6 q-pl-sm q-pt-sm">Filter</div>
+      <div class="row">
+        <div class="q-pa-sm col-3">
+          <q-select
+            v-model="clientFilter"
+            :options="clientsOptions"
+            label="Clients"
+            multiple
+            outlined
+            dense
+            use-chips
+            map-options
+            emit-value
+          />
+        </div>
+        <div class="q-pa-sm col-3">
+          <q-select
+            v-model="severityFilter"
+            :options="severityOptions"
+            label="Severity"
+            multiple
+            outlined
+            dense
+            use-chips
+            map-options
+            emit-value
+          />
+        </div>
+        <div class="q-pa-sm col-2">
+          <q-select outlined dense v-model="timeFilter" label="Time" emit-value map-options :options="timeOptions" />
+        </div>
+        <div class="q-pa-sm col-2">
+          <q-checkbox outlined dense v-model="includeSnoozed" label="Include snoozed" />
+          <q-checkbox outlined dense v-model="includeResolved" label="Include resolved" />
+        </div>
+        <div class="q-pa-sm col-1">
+          <q-btn color="primary" label="Search" @click="search" />
+        </div>
+      </div>
 
-    <q-card-section class="row">
-      <div class="col-3">
-        <q-input outlined dense v-model="search">
-          <template v-slot:append>
-            <q-icon v-if="search !== ''" name="close" @click="search = ''" class="cursor-pointer" />
-            <q-icon name="search" />
+      <q-separator />
+
+      <q-card-section>
+        <q-table
+          :table-class="{ 'table-bgcolor': !$q.dark.isActive, 'table-bgcolor-dark': $q.dark.isActive }"
+          class="tabs-tbl-sticky"
+          :data="alerts"
+          :columns="columns"
+          :rows-per-page-options="[0]"
+          :pagination.sync="pagination"
+          :no-data-label="noDataText"
+          :visible-columns="visibleColumns"
+          :selected.sync="selectedAlerts"
+          selection="multiple"
+          binary-state-sort
+          row-key="id"
+          dense
+          virtual-scroll
+        >
+          <template v-slot:top="props">
+            <div class="col-2 q-table__title">Treats</div>
+
+            <q-btn-dropdown label="Bulk Actions" v-if="props.selected > 0">
+              <q-list dense>
+                <q-item clickable v-close-popup @click="snoozeAlert(props.selected)">
+                  <q-item-section>
+                    <q-item-label>Snooze alerts</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="resolveAlert(props.selected)">
+                  <q-item-section>
+                    <q-item-label>Resolve alert</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-btn-dropdown>
           </template>
 
-          <template v-slot:hint>Type in client, site, or agent name</template>
-        </q-input>
-      </div>
+          <template v-slot:body-cell-actions="props">
+            <q-td :props="props">
+              <q-icon name="snooze" size="sm" class="cursor-pointer" @click="snoozeAlert(props.row)">
+                <q-tooltip>Snooze alert</q-tooltip>
+              </q-icon>
+              <q-icon name="alarm_off" size="sm" class="cursor-pointer" @click="resolveAlert(props.row)">
+                <q-tooltip>Dismiss alert</q-tooltip>
+              </q-icon>
+            </q-td>
+          </template>
 
-      <div class="col-3">
-        <q-checkbox outlined dense v-model="includeDismissed" label="Include dismissed alerts?" />
-      </div>
-    </q-card-section>
-
-    <q-separator />
-
-    <q-list separator>
-      <q-item v-if="alerts.length === 0">No Alerts!</q-item>
-      <q-item v-for="alert in alerts" :key="alert.id">
-        <q-item-section>
-          <q-item-label overline>{{ alert.client }} - {{ alert.site }} - {{ alert.hostname }}</q-item-label>
-          <q-item-label>
-            <q-icon size="sm" :class="`text-${alertColor(alert.severity)}`" :name="alert.severity"></q-icon>
-            {{ alert.message }}
-          </q-item-label>
-        </q-item-section>
-
-        <q-item-section side top>
-          <q-item-label caption>{{ alertTime(alert.alert_time) }}</q-item-label>
-          <q-item-label>
-            <q-icon name="snooze" size="sm">
-              <q-tooltip>Snooze the alert for 24 hours</q-tooltip>
-            </q-icon>
-            <q-icon name="alarm_off" size="sm">
-              <q-tooltip>Dismiss alert</q-tooltip>
-            </q-icon>
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-    </q-list>
-  </q-card>
+          <template v-slot:body-cell-severity="props">
+            <q-td :props="props">
+              <q-badge :color="alertColor(props.row.severity)">{{ capitalize(props.row.severity) }}</q-badge>
+            </q-td>
+          </template>
+        </q-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script>
 import mixins from "@/mixins/mixins";
-import { mapGetters } from "vuex";
 
 export default {
   name: "AlertsOverview",
   mixins: [mixins],
   data() {
     return {
-      search: "",
-      includeDismissed: false,
+      alerts: [],
+      selectedAlerts: [],
+      severityFilter: [],
+      clientFilter: [],
+      timeFilter: 30,
+      includeResolved: false,
+      includeSnoozed: false,
+      searched: false,
+      clientsOptions: [],
+      severityOptions: [
+        { label: "Informational", value: "info" },
+        { label: "Warning", value: "warning" },
+        { label: "Error", value: "error" },
+      ],
+      timeOptions: [
+        { value: 1, label: "1 Day Ago" },
+        { value: 7, label: "1 Week Ago" },
+        { value: 30, label: "30 Days Ago" },
+        { value: 90, label: "3 Months Ago" },
+        { value: 180, label: "6 Months Ago" },
+        { value: 365, label: "1 Year Ago" },
+        { value: 0, label: "Everything" },
+      ],
+      columns: [
+        { name: "alert_time", label: "Time", field: "alert_time", align: "left", sortable: true },
+        { name: "hostname", label: "Agent", field: "hostname", align: "left", sortable: true },
+        {
+          name: "alert_type",
+          label: "Type",
+          field: "alert_type",
+          align: "left",
+          sortable: true,
+          format: a => this.capitalize(a),
+        },
+        { name: "severity", label: "Severity", field: "severity", align: "left", sortable: true },
+        { name: "message", label: "Message", field: "message", align: "left", sortable: true },
+        { name: "resolved_on", label: "Resolved On", field: "resolved_on", align: "left", sortable: true },
+        { name: "snooze_until", label: "Snoozed Until", field: "snoozed_until", align: "left", sortable: true },
+        { name: "actions", label: "Actions", align: "left" },
+      ],
+      pagination: {
+        rowsPerPage: 0,
+        sortBy: "alert_time",
+        descending: true,
+      },
     };
   },
+  computed: {
+    noDataText() {
+      return this.searched ? "No data found. Try to refine you search" : "Click search to find alerts";
+    },
+    visibleColumns() {
+      return this.columns.map(column => {
+        if (column.name === "snooze_until") {
+          if (this.includeSnoozed) return column.name;
+        } else if (column.name === "resolved_on") {
+          if (this.includeResolved) return column.name;
+        } else {
+          return column.name;
+        }
+      });
+    },
+  },
   methods: {
     getAlerts() {
       this.$q.loading.show();
 
-      this.$store
-        .dispatch("alerts/getAlerts")
-        .then(response => {
+      this.$axios
+        .get("alerts/alerts/")
+        .then(r => {
+          this.alerts = r.data;
           this.$q.loading.hide();
         })
         .catch(error => {
           this.$q.loading.hide();
-          this.notifyError("Something went wrong");
+          this.notifyError("There was an issue getting alerts");
+        });
+    },
+    getClients() {
+      this.$axios.get("/clients/clients/").then(r => {
+        this.clientsOptions = Object.freeze(r.data.map(client => ({ label: client.name, value: client.id })));
+      });
+    },
+    search() {
+      this.$q.loading.show();
+
+      this.searched = true;
+
+      let data = {
+        snoozedFilter: this.includeSnoozed,
+        resolvedFilter: this.includeResolved,
+      };
+
+      if (this.clientFilter.length > 0) data["clientFilter"] = this.clientFilter;
+      if (this.timeFilter) data["timeFilter"] = this.timeFilter;
+      if (this.severityFilter.length > 0) data["severityFilter"] = this.severityFilter;
+
+      this.$axios
+        .patch("/alerts/alerts/", data)
+        .then(r => {
+          this.$q.loading.hide();
+          this.alerts = Object.freeze(r.data);
+        })
+        .catch(e => {
+          this.notifyError("There was an issue getting alerts");
+          this.$q.loading.hide();
+        });
+    },
+    snoozeAlert(alert) {
+      this.$q.loading.show();
+
+      const data = {
+        id: alert.id,
+        snoozed: true,
+      };
+
+      this.$axios
+        .put(`alerts/alerts/${alert.id}/`, data)
+        .then(r => {
+          this.search();
+          this.$q.loading.hide();
+          this.notifySuccess("The alert has been snoozed for 48 hours");
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+          this.notifyError("There was an issue snoozing alert");
+        });
+    },
+    resolveAlert(alert) {
+      this.$q.loading.show();
+
+      const data = {
+        id: alert.id,
+        resolved: true,
+      };
+
+      this.$axios
+        .put(`alerts/alerts/${alert.id}/`, data)
+        .then(r => {
+          this.search();
+          this.$q.loading.hide();
+          this.notifySuccess("The alert has been snoozed for 48 hours");
+        })
+        .catch(e => {
+          this.$q.loading.hide();
+          this.notifyError("There was an issue snoozing alert");
         });
     },
     alertColor(severity) {
@@ -94,14 +278,18 @@ export default {
         return "blue";
       }
     },
-  },
-  computed: {
-    ...mapGetters({
-      alerts: "alerts/getAlerts",
-    }),
+    show() {
+      this.$refs.dialog.show();
+    },
+    hide() {
+      this.$refs.dialog.hide();
+    },
+    onHide() {
+      this.$emit("hide");
+    },
   },
   mounted() {
-    this.getAlerts();
+    this.getClients();
   },
 };
 </script>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index e26c8e3..26d14dc 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -69,7 +69,7 @@
           </q-menu>
         </q-chip>
 
-        <!--<AlertsIcon />-->
+        <AlertsIcon />
 
         <q-btn-dropdown flat no-caps stretch :label="user">
           <q-list>