Skip to content

Commit b23508e

Browse files
turtledreamsturtledreams
committed
tooltip info
1 parent b3774be commit b23508e

File tree

4 files changed

+152
-6
lines changed

4 files changed

+152
-6
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -405,6 +405,10 @@
405405
placement: {
406406
type: String,
407407
default: 'auto'
408+
},
409+
tooltipClass: {
410+
type: String,
411+
default: ''
408412
}
409413
},
410414
computed: {
@@ -415,7 +419,7 @@
415419
};
416420
}
417421
},
418-
template: '<i v-if="tooltip" :class="\'cly-vue-tooltip-icon \' + icon" v-tooltip="tooltipConf"></i>'
422+
template: '<i v-if="tooltip" :class="\'cly-vue-tooltip-icon \' + icon + \' \' + tooltipClass" v-tooltip="tooltipConf"></i>'
419423
}));
420424

421425
Vue.component("cly-remover", countlyBaseComponent.extend({

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

Lines changed: 123 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,36 @@
11
/*global app, countlyVue, countlySDK, CV, countlyCommon*/
22
(function() {
3+
var SC_VER = 1; // check/update sdk/api/api.js for this
4+
var v0_android = "22.09.4";
5+
var v0_ios = "23.02.2";
6+
var v1_android = "25.3.0";
7+
var v1_ios = "25.3.0";
8+
var v1_web = "25.3.0";
9+
// Supporting SDK Versions for the SC options
10+
var supportedSDKVersion = {
11+
tracking: { android: v0_android, ios: v0_ios, web: v1_web },
12+
networking: { android: v0_android, ios: v0_ios, web: v1_web },
13+
crt: { android: v1_android, ios: v1_ios, web: v1_web },
14+
vt: { android: v1_android, ios: v1_ios, web: v1_web },
15+
st: { android: v1_android, ios: v1_ios, web: v1_web },
16+
cet: { android: v1_android, ios: v1_ios, web: v1_web },
17+
ecz: { android: v1_android, ios: v1_ios, web: v1_web },
18+
cr: { android: v1_android, ios: v1_ios, web: v1_web },
19+
sui: { android: v1_android, ios: v1_ios, web: v1_web },
20+
eqs: { android: v1_android, ios: v1_ios, web: v1_web },
21+
rqs: { android: v1_android, ios: v1_ios, web: v1_web },
22+
czi: { android: v1_android, ios: v1_ios, web: v1_web },
23+
dort: { android: v1_android, ios: v1_ios, web: v1_web },
24+
scui: { android: v1_android, ios: v1_ios, web: v1_web },
25+
lkl: { android: v1_android, ios: v1_ios, web: v1_web },
26+
lvs: { android: v1_android, ios: v1_ios, web: v1_web },
27+
lsv: { android: v1_android, ios: v1_ios, web: v1_web },
28+
lbc: { android: v1_android, ios: v1_ios, web: v1_web },
29+
ltlpt: { android: v1_android, ios: v1_ios, web: v1_web },
30+
ltl: { android: v1_android, ios: v1_ios, web: v1_web },
31+
lt: { android: v1_android, ios: v1_ios, web: v1_web }
32+
};
33+
334
var FEATURE_NAME = "sdk";
435
var SDK = countlyVue.views.create({
536
template: CV.T('/sdk/templates/sdk-main.html'),
@@ -49,7 +80,10 @@
4980
template: CV.T('/sdk/templates/config.html'),
5081
created: function() {
5182
var self = this;
52-
this.$store.dispatch("countlySDK/initialize").then(function() {
83+
Promise.all([
84+
this.$store.dispatch("countlySDK/initialize"),
85+
this.$store.dispatch("countlySDK/fetchSDKStats") // fetch sdk version data for tooltips
86+
]).then(function () {
5387
self.$store.dispatch("countlySDK/sdk/setTableLoading", false);
5488
});
5589
},
@@ -238,10 +272,15 @@
238272
}
239273
},
240274
diff: [],
241-
description: "This is experimental feature and not all SDKs and SDK versions yet support it. Refer to the SDK documentation for more information",
242-
downloadDescription: "Download the current SDK configuration as a JSON file to provide to the SDK",
275+
description: "This is experimental feature and not all SDKs and SDK versions yet support it. Refer to the SDK documentation for more information"
243276
};
244277
},
278+
mounted: function() {
279+
var self = this;
280+
this.$nextTick(function () {
281+
self.checkSdkSupport();
282+
});
283+
},
245284
methods: {
246285
onChange: function(key, value) {
247286
this.configs[key].value = value;
@@ -264,7 +303,7 @@
264303
downloadConfig: function() {
265304
var params = this.$store.getters["countlySDK/sdk/all"];
266305
var data = {};
267-
data.v = 1; // check sdk/api/api.js for version
306+
data.v = SC_VER;
268307
data.t = Date.now();
269308
data.c = params || {};
270309
var configData = JSON.stringify(data, null, 2);
@@ -318,6 +357,85 @@
318357
for (var key in this.configs) {
319358
this.configs[key].value = typeof data[key] !== "undefined" ? data[key] : this.configs[key].default;
320359
}
360+
},
361+
semverToNumber: function(version) {
362+
const parts = version.split('.').map(Number);
363+
return parts[0] * 1_000_000 + parts[1] * 1_000 + parts[2];
364+
},
365+
checkSdkSupport: function() {
366+
for (var key in this.configs) {
367+
this.configs[key].tooltipMessage = "No SDK data present. Please use the latest versions of Android, Web, iOS, Flutter or RN SDKs to use this Server Config option.";
368+
this.configs[key].tooltipClass = 'tooltip-neutral';
369+
}
370+
371+
if (!this.$store.state.countlySDK ||
372+
!this.$store.state.countlySDK.stats ||
373+
!this.$store.state.countlySDK.stats.sdk ||
374+
!this.$store.state.countlySDK.stats.sdk.versions ||
375+
this.$store.state.countlySDK.stats.sdk.versions.length === 0) {
376+
setTimeout(() => {
377+
this.checkSdkSupport();
378+
}, 500);
379+
return;
380+
}
381+
382+
const availableData = this.$store.state.countlySDK.stats.sdk.versions;
383+
const latestVersions = availableData.reduce((acc, sdk) => {
384+
if (!sdk.data || sdk.data.length === 0) {
385+
return acc;
386+
}
387+
acc[sdk.label] = sdk.data[0].sdk_version;
388+
return acc;
389+
}, {});
390+
391+
const configKeyList = Object.keys(this.configs);
392+
configKeyList.forEach(configKey => {
393+
const configSupportedVersions = supportedSDKVersion[configKey];
394+
if (!configSupportedVersions) {
395+
return;
396+
}
397+
398+
var supportLevel = 0;
399+
var unsupportedList = [];
400+
if (latestVersions["javascript_native_web"]) {
401+
if (this.semverToNumber(latestVersions["javascript_native_web"]) >= this.semverToNumber(configSupportedVersions.web)) {
402+
supportLevel++;
403+
} else {
404+
unsupportedList.push("Web SDK");
405+
}
406+
}
407+
408+
if (latestVersions["java-native-android"]) {
409+
if (this.semverToNumber(latestVersions["java-native-android"]) >= this.semverToNumber(configSupportedVersions.android)) {
410+
supportLevel++;
411+
} else {
412+
unsupportedList.push("Android SDK");
413+
}
414+
}
415+
416+
if (latestVersions["objc-native-ios"]) {
417+
418+
if (this.semverToNumber(latestVersions["objc-native-ios"]) >= this.semverToNumber(configSupportedVersions.ios)) {
419+
supportLevel++;
420+
} else {
421+
unsupportedList.push("iOS SDK");
422+
}
423+
}
424+
425+
if (supportLevel === Object.keys(latestVersions).length) { // all correct version
426+
this.configs[configKey].tooltipMessage = 'You are using SDKs that support this option.';
427+
this.configs[configKey].tooltipClass = 'tooltip-success';
428+
} else if (unsupportedList.length > 0) { // some/all wrong version
429+
this.configs[configKey].tooltipMessage = 'Some SDKs you use do not support this option: ' + unsupportedList.join(', ') + '. Try upgrading to the latest version.';
430+
this.configs[configKey].tooltipClass = 'tooltip-warning';
431+
432+
} else { // none supported
433+
this.configs[configKey].tooltipMessage = 'None of the SDKs you use support this option. Please use the latest versions of Android, Web, iOS, Flutter or RN SDKs to use this Server Config option.';
434+
this.configs[configKey].tooltipClass = 'tooltip-danger';
435+
}
436+
437+
});
438+
this.$forceUpdate();
321439
}
322440
}
323441
});
@@ -775,4 +893,5 @@
775893
permission: FEATURE_NAME,
776894
vuex: []
777895
});
896+
778897
})();

‎plugins/sdk/frontend/public/stylesheets/main.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,3 +71,19 @@
7171
margin-left: 8px;
7272
}
7373
}
74+
75+
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-success {
76+
color: #6c3 !important;
77+
}
78+
79+
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-warning {
80+
color: #fc0 !important;
81+
}
82+
83+
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-danger {
84+
color: #f55 !important;
85+
}
86+
87+
.cly-vue-tooltip-icon.ion.ion-help-circled.tooltip-neutral {
88+
color: #A7AEB8 !important;
89+
}

‎plugins/sdk/frontend/public/templates/config.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@ <h3 v-if="group.label" class="bu-mb-4" data-test-id="sdk-control-label">
3030
v-for="key in group.list" :key="key"
3131
class="bu-columns bu-is-vcentered bu-p-5 config-section">
3232
<div class="bu-column bu-is-7">
33-
<p class="bu-has-text-weight-medium" :data-test-id="getData[key].name.toLowerCase().replaceAll(' ', '-') + '-title-label'">{{getData[key].name}}</p>
33+
<p class="bu-has-text-weight-medium" :data-test-id="getData[key].name.toLowerCase().replaceAll(' ', '-') + '-title-label'">
34+
{{getData[key].name}}
35+
<cly-tooltip-icon
36+
:tooltip="getData[key].tooltipMessage"
37+
placement="right"
38+
:tooltip-class="getData[key].tooltipClass">
39+
</cly-tooltip-icon>
40+
</p>
3441
<p class="bu-has-text-weight-normal bu-mt-2" :data-test-id="getData[key].name.toLowerCase().replaceAll(' ', '-') + '-description-label'" v-html="getData[key].description" v-if="getData[key].description"></p>
3542
</div>
3643
<div class="bu-column bu-is-2"></div>

0 commit comments

Comments
 (0)