refactor(ui): posthog as composable and option for ui telemetry

relate to kestra-io/kestra-ee#4831

Author: tchiotludo

cli/src/main/resources/application.yml

@@ -235,6 +235,9 @@ kestra:
   traces:
     root: DISABLED
 
+  ui-anonymous-usage-report:
+    enabled: true
+
   anonymous-usage-report:
     enabled: true
     uri: https://api.kestra.io/v1/reports/server-events

ui/src/App.vue

@@ -17,14 +17,14 @@
     import VueTour from "./components/onboarding/VueTour.vue";
     import DefaultLayout from "override/components/layout/DefaultLayout.vue";
     import DocIdDisplay from "./components/DocIdDisplay.vue";
-    import posthog from "posthog-js";
     import "@kestra-io/ui-libs/style.css";
 
     import {useApiStore} from "./stores/api";
     import {usePluginsStore} from "./stores/plugins";
     import {useLayoutStore} from "./stores/layout";
     import {useCoreStore} from "./stores/core";
     import {useDocStore} from "./stores/doc";
+    import {initPostHogForSetup} from "./composables/usePosthog";
     import {useMiscStore} from "override/stores/misc";
     import {useExecutionsStore} from "./stores/executions";
     import * as BasicAuth from "./utils/basicAuth";
@@ -116,63 +116,10 @@
                     uid: uid,
                 });
 
-                const apiConfig = await this.apiStore.loadConfig();
-                this.initStats(apiConfig, config, uid);
+                await initPostHogForSetup(config);
 
                 return config;
             },
-            initStats(apiConfig, config, uid) {
-                if (this.miscStore.configs["isAnonymousUsageEnabled"] === false) {
-                    return;
-                }
-
-                // only run posthog in production
-                if (import.meta.env.MODE === "production") {
-                    posthog.init(
-                        apiConfig.posthog.token,
-                        {
-                            api_host: apiConfig.posthog.apiHost,
-                            ui_host: "https://eu.posthog.com",
-                            capture_pageview: false,
-                            capture_pageleave: true,
-                            autocapture: false,
-                        }
-                    )
-
-                    posthog.register_once(this.statsGlobalData(config, uid));
-
-                    if (!posthog.get_property("__alias")) {
-                        posthog.alias(apiConfig.id);
-                    }
-                }
-
-                let surveyVisible = false;
-                window.addEventListener("PHSurveyShown", () => {
-                    surveyVisible = true;
-                });
-
-                window.addEventListener("PHSurveyClosed", () => {
-                    surveyVisible = false;
-                })
-
-                window.addEventListener("KestraRouterAfterEach", () => {
-                    if (surveyVisible) {
-                        window.dispatchEvent(new Event("PHSurveyClosed"))
-                        surveyVisible = false;
-                    }
-                })
-            },
-            statsGlobalData(config, uid) {
-                return {
-                    from: "APP",
-                    iid: config.uuid,
-                    uid: uid,
-                    app: {
-                        version: config.version,
-                        type: "OSS"
-                    }
-                }
-            },
         },
         watch: {
             $route: {

ui/src/components/basicauth/BasicAuthSetup.vue

@@ -208,7 +208,7 @@
     import MailChecker from "mailchecker"
     import {useMiscStore} from "override/stores/misc"
     import {useSurveySkip} from "../../composables/useSurveyData"
-    import {initPostHogForSetup, trackSetupEvent} from "../../utils/setupPosthog"
+    import {initPostHogForSetup, trackSetupEvent} from "../../composables/usePosthog"
 
     import Cogs from "vue-material-design-icons/Cogs.vue"
     import AccountPlus from "vue-material-design-icons/AccountPlus.vue"
@@ -312,9 +312,9 @@
     const setupConfigurationLines = computed<ConfigLine[]>(() => {
         if (!setupConfiguration.value) return []
         const configs = miscStore.configs
-        
+
         const basicAuthValue = activeStep.value >= 1 || configs?.isBasicAuthInitialized
-        
+
         return [
             {name: "repository", icon: Database, value: setupConfiguration.value.repositoryType || "NOT SETUP"},
             {name: "queue", icon: CurrentDc, value: setupConfiguration.value.queueType || "NOT SETUP"},
@@ -420,9 +420,9 @@
                 user_email: userFormData.value.username
             }, userFormData.value)
 
-            
+
             localStorage.setItem("basicAuthUserCreated", "true")
-            
+
             nextStep()
         } catch (error: any) {
             trackSetupEvent("setup_flow:account_creation_failed", {

ui/src/utils/setupPosthog.ts ui/src/composables/usePosthog.tsui/src/utils/setupPosthog.ts renamed to ui/src/composables/usePosthog.ts

@@ -16,17 +16,31 @@ interface UserFormData {
 
 interface Config {
     isAnonymousUsageEnabled?: boolean
+    isUiAnonymousUsageEnabled?: boolean
     uuid?: string
     version?: string
+    edition?: string
+}
+
+function statsGlobalData(config: Config, uid: string): any {
+    return {
+        from: "APP",
+        iid: config.uuid,
+        uid: uid,
+        app: {
+            version: config.version,
+            type: config.edition
+        }
+    }
 }
 
 export async function initPostHogForSetup(config: Config): Promise<void> {
     try {
-        if (!config?.isAnonymousUsageEnabled) return
+        if (!config.isUiAnonymousUsageEnabled) return
 
         const apiStore = useApiStore()
         const apiConfig = await apiStore.loadConfig()
-        
+
         if (!apiConfig?.posthog?.token || (window as any).posthog?.__loaded) return
 
         const uid = getUID()
@@ -42,22 +56,40 @@ export async function initPostHogForSetup(config: Config): Promise<void> {
             autocapture: false,
         })
 
+        posthog.register_once(statsGlobalData(config, uid));
+
         if (!posthog.get_property("__alias")) {
             posthog.alias(apiConfig.id)
         }
+
+        let surveyVisible = false;
+        window.addEventListener("PHSurveyShown", () => {
+            surveyVisible = true;
+        });
+
+        window.addEventListener("PHSurveyClosed", () => {
+            surveyVisible = false;
+        })
+
+        window.addEventListener("KestraRouterAfterEach", () => {
+            if (surveyVisible) {
+                window.dispatchEvent(new Event("PHSurveyClosed"))
+                surveyVisible = false;
+            }
+        })
     } catch (error) {
         console.error("Failed to initialize PostHog:", error)
     }
 }
 
 export function trackSetupEvent(
-    eventName: string, 
-    additionalData: Record<string, any>, 
+    eventName: string,
+    additionalData: Record<string, any>,
     userFormData: UserFormData
 ): void {
     const miscStore = useMiscStore()
     const uid = getUID()
-    
+
     if (!miscStore.configs?.isAnonymousUsageEnabled || !uid) return
 
     const userInfo = userFormData.firstName ? {