Skip to content

Commit 8de5e46

Browse files
CookiezaursCookiezaurs
authored
Merge pull request #5701 from Countly/SER-1886-deleting-crash-group-warning-confirmation-notification
[SER-1886] Deleting Crash group: Warning + Confirmation notification
2 parents 445e4d1 + 00e1215 commit 8de5e46

File tree

5 files changed

+168
-30
lines changed

5 files changed

+168
-30
lines changed

‎frontend/express/public/javascripts/countly/vue/components/helpers.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1293,6 +1293,63 @@
12931293
</div>'
12941294
});
12951295

1296+
Vue.component("cly-list-drawer", countlyBaseComponent.extend({
1297+
props: {
1298+
list: {
1299+
type: Array,
1300+
required: true,
1301+
},
1302+
dropdownText: {
1303+
type: String,
1304+
default: 'Listed item(s) will be affected by this action',
1305+
required: false,
1306+
},
1307+
},
1308+
data: function() {
1309+
return {
1310+
isOpen: false,
1311+
options: {
1312+
vuescroll: {
1313+
sizeStrategy: 'number',
1314+
},
1315+
scrollPanel: {
1316+
initialScrollX: false,
1317+
},
1318+
rail: {
1319+
gutterOfSide: "4px",
1320+
gutterOfEnds: "16px",
1321+
keepShow: false,
1322+
},
1323+
bar: {
1324+
background: "#A7AEB8",
1325+
size: "6px",
1326+
keepShow: false,
1327+
}
1328+
},
1329+
};
1330+
},
1331+
methods: {
1332+
toggleList: function() {
1333+
this.isOpen = !this.isOpen;
1334+
},
1335+
},
1336+
template: '<div class="cly-list-drawer">\
1337+
<div class="cly-list-drawer__text-clickable bu-pt-4 bu-pb-3 bu-has-text-weight-medium" @click="toggleList">\
1338+
{{ dropdownText }}\
1339+
<i class="cly-io-16 cly-io cly-io-chevron-down" :class="{ \'rotate-icon\': isOpen }"></i>\
1340+
</div>\
1341+
<div v-if="isOpen" class="cly-list-drawer__list">\
1342+
<vue-scroll :ops="options">\
1343+
<div>\
1344+
<ul>\
1345+
<li v-for="ev in list">{{ev}}</li>\
1346+
</ul>\
1347+
</div>\
1348+
</vue-scroll>\
1349+
</div>\
1350+
</div>'
1351+
}));
1352+
12961353
Vue.component("cly-auto-refresh-toggle", countlyBaseComponent.extend({
12971354
template: "<div class='cly-vue-auto-refresh-toggle'>\
12981355
<div v-if='autoRefresh' class='bu-level-item'>\

‎frontend/express/public/stylesheets/vue/clyvue.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4501,6 +4501,47 @@
45014501
}
45024502
}
45034503

4504+
.cly-list-drawer {
4505+
.cly-list-drawer__text-clickable {
4506+
color: #0166D6;
4507+
cursor: pointer;
4508+
}
4509+
.cly-list-drawer__text-clickable i {
4510+
transition: transform 0.3s, -webkit-transform .3s;
4511+
}
4512+
.rotate-icon {
4513+
transform: rotate(180deg);
4514+
}
4515+
.cly-io {
4516+
display: inline-block;
4517+
}
4518+
.__view {
4519+
min-height: auto !important;
4520+
}
4521+
4522+
&__list {
4523+
height: 150px;
4524+
background-color: #F6F6F6;
4525+
overflow: auto;
4526+
border-radius: 4px;
4527+
ul {
4528+
list-style: none;
4529+
padding: 0px;
4530+
margin: 0px;
4531+
li {
4532+
padding-left: 16px;
4533+
padding-top: 0.5rem;
4534+
}
4535+
li:first-child {
4536+
padding-top: 1rem;
4537+
}
4538+
li:last-child {
4539+
padding-bottom: 1rem;
4540+
}
4541+
}
4542+
}
4543+
}
4544+
45044545
.cly-vue-device-selector {
45054546
background-color: #FFF;
45064547
border-radius: 10px;

‎plugins/crashes/frontend/public/javascripts/countly.views.js‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -451,7 +451,9 @@
451451
formatDate: function(row, col, cell) {
452452
return moment(cell * 1000).format("lll");
453453
},
454-
hasDrillPermission: countlyAuth.validateRead('drill')
454+
hasDrillPermission: countlyAuth.validateRead('drill'),
455+
showDeleteDialog: false,
456+
selectedGroups: [],
455457
};
456458
},
457459
computed: {
@@ -552,7 +554,17 @@
552554
},
553555
loading: function() {
554556
return this.$store.getters["countlyCrashes/overview/loading"];
555-
}
557+
},
558+
confirmDialogTitle: function() {
559+
var title = "crashes.confirm-action-title";
560+
title = this.selectedGroups.length > 1 ? title + "-plural" : title;
561+
return CV.i18n(title);
562+
},
563+
confirmDialogText: function() {
564+
var text = "crashes.groups-confirm-delete";
565+
text = this.selectedGroups.length > 1 ? text + "-plural" : text;
566+
return CV.i18n(text, this.selectedGroups.length);
567+
},
556568
},
557569
methods: {
558570
refresh: function(force) {
@@ -575,7 +587,9 @@
575587
},
576588
handleSelectionChange: function(selectedRows, force = false) {
577589
var self = this;
590+
this.selectedGroups = [];
578591
this.$data.selectedCrashgroups = selectedRows.map(function(row) {
592+
self.selectedGroups.push(row.name);
579593
return row._id;
580594
});
581595
if (force) {
@@ -605,33 +619,30 @@
605619
promise = this.$store.dispatch("countlyCrashes/overview/setSelectedAsShown", this.$data.selectedCrashgroups);
606620
}
607621
else if (state === "delete") {
608-
CountlyHelpers.confirm(jQuery.i18n.prop("crashes.confirm-delete", 1), "red", function(result) {
609-
if (result) {
610-
self.$store.dispatch("countlyCrashes/overview/setSelectedAsDeleted", self.$data.selectedCrashgroups)
611-
.then(function(response) {
612-
if (Array.isArray(response.result)) {
613-
var itemList = response.result.reduce(function(acc, curr) {
614-
acc += "<li>" + curr + "</li>";
615-
return acc;
616-
}, "");
617-
CountlyHelpers.alert("<ul>" + itemList + "</ul>", "red", { title: CV.i18n("crashes.alert-fails") });
618-
}
619-
else {
620-
CountlyHelpers.notify({
621-
title: jQuery.i18n.map["systemlogs.action.crash_deleted"],
622-
message: jQuery.i18n.map["systemlogs.action.crash_deleted"]
623-
});
624-
}
625-
}).finally(function() {
626-
// Reset selection if command is delete or hide
627-
// if (["delete", "hide"].includes(state)) {
628-
self.selectedCrashgroups = [];
629-
self.$refs.dataTable.$refs.elTable.clearSelection();
630-
// }
622+
self.$store.dispatch("countlyCrashes/overview/setSelectedAsDeleted", self.$data.selectedCrashgroups)
623+
.then(function(response) {
624+
if (Array.isArray(response.result)) {
625+
var itemList = response.result.reduce(function(acc, curr) {
626+
acc += "<li>" + curr + "</li>";
627+
return acc;
628+
}, "");
629+
CountlyHelpers.alert("<ul>" + itemList + "</ul>", "red", { title: CV.i18n("crashes.alert-fails") });
630+
}
631+
else {
632+
CountlyHelpers.notify({
633+
title: jQuery.i18n.map["systemlogs.action.crash_deleted"],
634+
message: jQuery.i18n.map["systemlogs.action.crash_group_deleted"]
631635
});
632-
}
633-
});
634-
636+
}
637+
}).finally(function() {
638+
// Reset selection if command is delete or hide
639+
// if (["delete", "hide"].includes(state)) {
640+
self.selectedCrashgroups = [];
641+
self.$refs.dataTable.$refs.elTable.clearSelection();
642+
self.closeDeleteForm();
643+
self.refresh();
644+
// }
645+
});
635646
}
636647

637648
if (typeof promise !== "undefined") {
@@ -676,7 +687,13 @@
676687
},
677688
unpatchSelectedGroups: function() {
678689
this.handleSelectionChange([], true);
679-
}
690+
},
691+
showDeleteForm: function() {
692+
this.showDeleteDialog = true;
693+
},
694+
closeDeleteForm: function() {
695+
this.showDeleteDialog = false;
696+
},
680697
},
681698
beforeCreate: function() {
682699
var query = {};

‎plugins/crashes/frontend/public/localization/crashes.properties‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,9 @@ crashes.confirm-action-hide = Are you sure you want to hide {0} item(s)
136136
crashes.confirm-action-show = Are you sure you want to unhide {0} item(s)
137137
crashes.confirm-action-resolving = Are you sure you want to move {0} item(s) to resolving state?
138138

139+
crashes.confirm-action-title = Delete Crash Group
140+
crashes.confirm-action-title-plural = Delete Crash Groups
141+
crashes.yes-delete = Yes, delete group
139142

140143
crashes.stacktrace = Stacktrace
141144
crashes.download-stacktrace = Download stacktrace
@@ -177,6 +180,10 @@ crashes.help-free-users= Number of users who have not experienced a crash for th
177180
crashes.help-free-sessions = Number of sessions during which the selected crash did not occur in the selected time period, expressed as a percentage of the total number of sessions within that time period.
178181
crashes.help-crash-fatality = Number of fatal crashes, expressed as a percentage of the total number of crashes that have occurred.
179182

183+
crashes.groups-confirm-delete= 1 item will be affected by this action
184+
crashes.groups-confirm-delete-plural= {0} items will be affected by this action
185+
crashes.groups-want-to-delete= Do you want to delete crash group(s) permanently? This action is not reversible.
186+
180187
crashes.report_limit = Amount of reports displayed
181188
crashes.total_overall=OVERALL
182189
crashes.fatal_crash_count=Fatal Crash Count
@@ -221,6 +228,7 @@ systemlogs.action.crash_added_comment = Crash Added Comment
221228
systemlogs.action.crash_edited_comment = Crash Edited Comment
222229
systemlogs.action.crash_deleted_comment = Crash Deleted Comment
223230
systemlogs.action.crash_deleted = Crash Deleted
231+
systemlogs.action.crash_group_deleted = Crash group’s data has been deleted.
224232
internal-events.[CLY]_crash = Crash
225233
crashes.show-binary-images = Show binary images
226234
crashes.binary-images = Binary Images

‎plugins/crashes/frontend/public/templates/overview.html‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
<el-dropdown-item command="hide"><i class="cly-io cly-io-eye-off"></i>{{ i18n('crashes.action-hide') }}</el-dropdown-item>
7878
</cly-more-options>
7979
<span class="vertical-divider bu-mr-4 bu-ml-4"></span>
80-
<el-button v-if="canUserDelete" class="bu-mr-3" size="small" type="default" @click="setSelectedAs('delete')">
80+
<el-button v-if="canUserDelete" class="bu-mr-3" size="small" type="default" @click="showDeleteForm">
8181
<i class="cly-io-16 cly-io cly-io-trash" style="color:red"></i>
8282
<span class="ml-1" style="color: red">
8383
{{ i18n('crashes.action-delete') }}
@@ -89,6 +89,21 @@
8989
</div>
9090
</template>
9191
</cly-diff-helper>
92+
<cly-confirm-dialog
93+
@cancel="closeDeleteForm"
94+
@confirm="setSelectedAs('delete')"
95+
:before-close="closeDeleteForm"
96+
ref="deleteConfirmDialog"
97+
:visible.sync="showDeleteDialog"
98+
dialogType="danger"
99+
:saveButtonLabel="i18n('crashes.yes-delete')"
100+
:cancelButtonLabel="i18n('common.no-dont-delete')"
101+
:title=confirmDialogTitle>
102+
<template slot-scope="scope">
103+
{{i18n('crashes.groups-want-to-delete')}}
104+
<cly-list-drawer :list="selectedGroups" :dropdownText="confirmDialogText"></cly-list-drawer>
105+
</template>
106+
</cly-confirm-dialog>
92107
</template>
93108
</cly-datatable-n>
94109
</cly-main>

0 commit comments

Comments
 (0)