Skip to content

Commit

Permalink
Merge pull request #5840 from Countly/anna/next
Browse files Browse the repository at this point in the history 
[core Added scrolling to omitted segment list if list is too long.   [views] UI for view omitting
  • Loading branch information
@Cookiezaurs
Cookiezaurs authored Dec 4, 2024
2 parents 5864276 + d898c78 commit e108f11
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 8 deletions.
10 changes: 6 additions & 4 deletions frontend/express/public/javascripts/countly/vue/templates/selectx.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,13 +129,15 @@
@change="handleValueChange"
v-model="innerValue">
</cly-checklistbox>
<div class="cly-vue-events-omitted-segments bu-ml-1" v-if="hasDisabledOptions && searchQuery == ''">
<div class="cly-vue-events-omitted-segments bu-ml-1" style="height:150px;" v-if="hasDisabledOptions && searchQuery == ''">
<div class="cly-vue-events-omitted-segments__title">
{{disabledOptions.label}}
</div>
<div class="cly-vue-events-omitted-segments__item" v-for="item in disabledOptions.options">
{{item.label}}
</div>
<vue-scroll :ops='{bar: {background: "#A7AEB8",size: "6px",specifyBorderRadius: "3px",keepShow: true}}'>
<div class="cly-vue-events-omitted-segments__item" v-for="item in disabledOptions.options">
{{item.label}}
</div>
</vue-scroll>
</div>
</el-tab-pane>
</el-tabs>
Expand Down
2 changes: 1 addition & 1 deletion plugins/views/api/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1313,7 +1313,7 @@ const escapedViewSegments = { "name": true, "segment": true, "height": true, "wi
if (res1 && res1.omit) {
res.omit = res1.omit;
}
if (common.drillDb) {
if (common.drillDb && !params.qstring.skip_domains) {
var collectionName = "drill_events" + crypto.createHash('sha1').update("[CLY]_action" + params.qstring.app_id).digest('hex');
common.drillDb.collection(collectionName).findOne({"_id": "meta_v2"}, {_id: 0, "sg.domain": 1}, function(err3, meta1) {
if (meta1 && meta1.sg && meta1.sg.domain.values) {
Expand Down
63 changes: 60 additions & 3 deletions plugins/views/frontend/public/javascripts/countly.models.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,36 @@
CountlyHelpers.createMetricModel(countlyViews, {name: "views"}, jQuery);

countlyViews.service = {
fetchMetaData: function() {
return CV.$.ajax({
type: "GET",
url: countlyCommon.API_PARTS.data.r,
data: {
"app_id": countlyCommon.ACTIVE_APP_ID,
"method": "get_view_segments",
"skip_domains": true
},
dataType: "json",
success: function(json) {
if (json && json.segments) {
for (var i = 0; i < json.segments.length; i++) {
json.segments[i] = countlyCommon.decode(json.segments[i]);
}
_segments = json.segments;
for (let segment in _segments) {
_segments[segment].sort(Intl.Collator().compare);
}
}
if (json && json.omit) {
for (let index = 0; index < json.omit.length; index++) {
json.omit[index] = countlyCommon.decode(json.omit[index]);
}
_omit = json.omit;
_omit.sort(Intl.Collator().compare);
}
}
});
},
fetchData: function(context) {
_segment = context.state.selectedSegment;
_segmentVal = context.state.selectedSegmentValue;
Expand Down Expand Up @@ -59,8 +89,6 @@
data: data,
dataType: "json",
}, {"disableAutoCatch": true});


},
updateViews: function(statusObj) {
return CV.$.ajax({
Expand All @@ -85,6 +113,18 @@
},
dataType: "json"
}, {"disableAutoCatch": true});
},
omitSegments: function(segments) {
return CV.$.ajax({
type: "POST",
url: countlyCommon.API_PARTS.data.w + "/views",
data: {
app_id: countlyCommon.ACTIVE_APP_ID,
"method": "omit_segments",
"omit_list": segments
},
dataType: "json"
}, {"disableAutoCatch": true});
}
};

Expand Down Expand Up @@ -461,8 +501,17 @@
};

var ViewsActions = {
fetchMetaData: function(context) {
return countlyViews.service.fetchMetaData()
.then(function() {
context.commit('setSegments', _segments);
context.commit('setOmittedSegments', _omit);
context.dispatch('onFetchSuccess');
}).catch(function(error) {
context.dispatch('onFetchError', error);
});
},
fetchTotals: function(context) {

return countlyViews.service.fetchTotals()
.then(function(response) {
context.commit('setTotals', response || {});
Expand Down Expand Up @@ -520,6 +569,14 @@
context.dispatch('onUpdateError', error);
});
},
omitSegments: function(context, data) {
context.dispatch('onUpdateError', "");
return countlyViews.service.omitSegments(data).then(function() {

}).catch(function(error) {
context.dispatch('onUpdateError', error);
});
},
onFetchInit: function(context) {
context.commit('setFetchInit');
},
Expand Down
31 changes: 31 additions & 0 deletions plugins/views/frontend/public/javascripts/countly.views.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,24 @@
deleteDialogText: "",
deleteDialogConfirmText: CV.i18n('views.yes-delete-view'),
showDeleteDialog: false,
availableSegments: ["platform"],
omitList: [],
segmentsLoaded: false,
};
},
mounted: function() {
var self = this;
this.$store.dispatch('countlyViews/fetchMetaData').then(function() {
var segments = self.$store.state.countlyViews.segments || {};
self.availableSegments = [];
for (var key in segments) {
self.availableSegments.push({value: key, label: key});
}
var omittedSegments = self.$store.getters['countlyViews/getOmittedSegments'];
self.omitList = omittedSegments || [];
self.segmentsLoaded = true;

});
},
methods: {
handleSelectionChange: function(selectedRows) {
Expand All @@ -43,6 +58,22 @@
}
}
},
omitSegments: function() {
var self = this;
CountlyHelpers.confirm(CV.i18n('views.omit-segments-confirm'), "red", function(result) {
if (!result) {
return true;
}
self.$store.dispatch("countlyViews/omitSegments", JSON.stringify(self.omitList)).then(function() {
if (self.$store.getters["countlyViews/updateError"]) {
CountlyHelpers.notify({type: "error", title: jQuery.i18n.map["common.error"], message: self.$store.getters["countlyViews/updateError"], sticky: false, clearAll: true});
}
else {
CountlyHelpers.notify({type: "ok", title: jQuery.i18n.map["common.success"], message: jQuery.i18n.map["events.general.changes-saved"], sticky: false, clearAll: true});
}
});
});
},
deleteManyViews: function() {
if (this.selectedViews.length > 0) {
if (this.selectedViews.length === 1) {
Expand Down
1 change: 1 addition & 0 deletions plugins/views/frontend/public/localization/views.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ internal-events.[CLY]_action = Action
systemlogs.action.view_deleted = View Deleted
systemlogs.action.view_segments_ommit_complete = View segment ommiting complete
systemlogs.action.view_segments_ommit = View segment ommiting start
views.omit-segments-confirm = Do you want to omit selected segments for all views in this app?
views.max-views-limit = Maximum limit of unique views ({0}) has been reached. Limit can be adjusted on the Views configurations page.
views.drill-drawer.title = Drill views
views.drill-drawer.save-button = Go to Drill
Expand Down
21 changes: 21 additions & 0 deletions plugins/views/frontend/public/templates/manageViews.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,27 @@
{{deleteDialogText}}
</template>
</cly-confirm-dialog>
<cly-section>
<div class="bu-p-4">
<div class="text-smallish font-weight-bold bu-mb-2" data-test-id="manage-views-omit-title" >{{i18n('data-manager.omit-segments')}}
<cly-tooltip-icon data-test-id="manage-views-omit-tooltip" class="bu-is-flex-grow-1 bu-ml-2" :tooltip="i18n('data-manager.omit-segments.tooltip')"></cly-tooltip-icon>
</div>
<cly-select-x
data-test-id="manage-views-omit-select"
mode="multi-check"
value=omitList
:collapseTags = "false"
:options="availableSegments"
:show-search="true"
:searchable="true"
width="100%"
:placeholder="i18n('data-manager.omit-segments')"
v-model="omitList"
style="margin-top:2px; display:block;">
</cly-select-x>
<el-button class="bu-mt-2" v-if="canUserDelete" ref="omitSegmentsButton" type="success" @click="omitSegments" >{{i18n('common.save')}}</el-button>
</div>
</cly-section>
<cly-section>
<cly-datatable-n :default-sort="{prop: 'view', order: 'ascending'}" :trackedFields="['display']" :data-source="remoteTableDataSource" ref="editViewsTable" @selection-change="handleSelectionChange" >
<template v-slot:header-left>
Expand Down

0 comments on commit e108f11

Please sign in to comment.