Merge pull request #5746 from Countly/SER-2099-do-a-small-product-frontend-improvement-for-alerts

[SER-2099] added enabled-disabled filter to alerts table

Author: ar2rsawseen

plugins/alerts/frontend/public/javascripts/countly.views.js

@@ -1069,6 +1069,12 @@
         computed: {
             tableRows: function() {
                 var rows = this.$store.getters["countlyAlerts/table/all"];
+                if (this.tableFilterStatus !== "all") {
+                    var enabled = this.tableFilterStatus === "enabled" ? true : false;
+                    rows = rows.filter(function(r) {
+                        return r.enabled === enabled;
+                    });
+                }
                 if (this.filteredApps.length > 0) {
                     var self = this;
                     rows = rows.filter(function(r) {
@@ -1106,6 +1112,7 @@
                 appsSelectorOption: appsSelectorOption,
                 filterStatus: "all",
                 filteredApps: [],
+                tableFilterStatus: "all",
                 tableDynamicCols: [
                     {
                         value: "appNameList",

plugins/alerts/frontend/public/localization/alerts.properties

@@ -108,4 +108,6 @@ alert.email-header = Email Notification
 alerts.email-icon = This alert can only be used within Hooks to trigger actions.
 alerts.common-icon-info = Alert will be triggered as soon as a new response is submitted for the selected widget.
 alerts.crashes-icon = Alert will be triggered as soon as a new, before unseen crash occurs.
-
+alerts.status-all = All alerts
+alerts.status-enabled = Enabled
+alerts.status-disabled = Disabled

plugins/alerts/frontend/public/templates/vue-main.html

@@ -48,6 +48,13 @@
                 :default-sort="{prop: 'createdAt', order: 'descending'}"
             >
                 <template v-slot:header-left="scope">
+                    <div class="bu-mr-2">
+                        <el-radio-group :plain="true" v-model="tableFilterStatus">
+                            <el-radio-button label="all">{{i18n('alerts.status-all')}}</el-radio-button>
+                            <el-radio-button label="enabled">{{i18n('alerts.status-enabled')}}</el-radio-button>
+                            <el-radio-button label="disabled">{{i18n('alerts.status-disabled')}}</el-radio-button> 
+                        </el-radio-group>
+                    </div>
                     <div class="alerts-table-app-selector">
                         <cly-select-x
                            :placeholder="i18n('alert.all-applications')"