First cut at analytics

Signed-off-by: Heiko W. Rupp <[email protected]>

Author: pilhuhn

.env.github.example

@@ -23,3 +23,11 @@ IL_ENABLE_DEV_MODE=true #Enable this option if you want to enable UI features th
 NEXT_PUBLIC_EXPERIMENTAL_FEATURES=false
 
 SLACK_WEBHOOK_URL=
+
+# Analtyics setup
+# UMAMI_KEY: 'umami-key'
+# UMAMI_HOST_URL: 'http://umami-host:3000'
+# SEGMENT_KEY: 'segment-key'
+# Next needs to be in one line
+# SEGMENT_INTEGRATIONS: '{"Segment.io": {"apiHost": "some.host.com/connections/api/v1","protocol": "https"}}'
+# SEGMENT_CDN: 'https://some.host.com/connections/cdn'

.env.native.example

@@ -14,3 +14,12 @@ NEXT_PUBLIC_EXPERIMENTAL_FEATURES=false
 # IL_FILE_CONVERSION_SERVICE=http://localhost:5001 # Uncomment and fill in the http://host:port if the docling conversion service is running.
 # NEXT_PUBLIC_API_SERVER=http://localhost:8080 # Uncomment and point to the URL the api-server is running on. Native mode only and needs to be running on the same host as the UI.
 # NEXT_PUBLIC_MODEL_SERVER_URL=http://x.x.x.x # Used for model chat evaluation vLLM instances. Currently, server side rendering is not supported so the client must have access to this address for model chat evaluation to function in the UI. Currently ports, 8000 & 8001 are hardcoded and why it is not an option to set.
+
+
+# Analtyics setup
+# UMAMI_KEY: 'umami-key'
+# UMAMI_HOST_URL: 'http://umami-host:3000'
+# SEGMENT_KEY: 'segment-key'
+# Next needs to be in one line
+# SEGMENT_INTEGRATIONS: '{"Segment.io": {"apiHost": "some.host.com/connections/api/v1","protocol": "https"}}'
+# SEGMENT_CDN: 'https://some.host.com/connections/cdn'

package-lock.json

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+ const uiConfig = {
+   umamiKey: process.env.UMAMI_KEY || '',
+   umamiHostUrl: process.env.UMAMI_HOST_URL || '',
+   segmentKey: process.env.SEGMENT_KEY || '',
+   segmentCdn: process.env.SEGMENT_CDN || '',
+   segmentIntegrations: {}
+ } ;
+
+  const tmp = process.env.SEGMENT_INTEGRATIONS;
+  if (tmp) {
+    uiConfig.segmentIntegrations = JSON.parse(tmp);
+  }
+
+ return NextResponse.json(uiConfig);
+}

src/app/api/analyticsConfig/route.ts

@@ -36,6 +36,7 @@ const ChatPage: React.FC = () => {
           variant="link"
           isInline
           onClick={(e) => {
+            window.analytics.trackSingleItem('Chat Cleared', {});
             e.preventDefault();
             router.push('/playground/endpoints');
           }}

src/app/playground/chat/page.tsx

@@ -66,6 +66,7 @@ const EndpointsPage: React.FC = () => {
   };
 
   const handleSaveEndpoint = () => {
+    window.analytics.trackSingleItem(currentEndpoint ? 'Model Endpoint edited' : 'Model Endpoint added', {})
     const updatedUrl = removeTrailingSlash(url);
     if (currentEndpoint) {
       const updatedEndpoint: ExtendedEndpoint = {

src/app/playground/endpoints/page.tsx

@@ -32,6 +32,7 @@ import {
 import { BarsIcon } from '@patternfly/react-icons';
 import ThemePreference from '@/components/ThemePreference/ThemePreference';
 import '../styles/globals.scss';
+import { initAnalytics } from '@/components/analytics/initAnalytics';
 
 interface IAppLayout {
   children: React.ReactNode;
@@ -61,6 +62,28 @@ const AppLayout: React.FunctionComponent<IAppLayout> = ({ children, className })
     fetchExperimentalFeature();
   }, []);
 
+  React.useEffect(() => {
+    console.log("Get analytics effect " + window.analytics);
+    if (!window.analytics) {
+      initAnalytics();
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (window.analytics) {
+      window.analytics.trackPageView(pathname);
+    }
+
+  }, [pathname]);
+
+  React.useEffect(() => {
+    console.log(("Identify effect " + session?.user) )
+    if (window.analytics) {
+      // TODO we may potentially want to hash this. Also different code per target install?
+      window.analytics.identify(session?.user?.name ? session.user.name : '-unknown-user-name ');
+    }
+  },[session?.user?.name,session?.user]);
+
   React.useEffect(() => {
     if (status === 'loading') return; // Do nothing while loading
     if (!session && pathname !== '/login') {

src/components/AppLayout.tsx

@@ -139,9 +139,11 @@ export const ContributionWizard: React.FunctionComponent<Props> = ({
 
   const autoFillForm = (): void => {
     setFormData(isSkillContribution ? { ...autoFillSkillsFields } : { ...autoFillKnowledgeFields });
+    window.analytics.trackSingleItem('AutoFill Clicked', {isSkillContribution});
   };
 
   const handleCancel = () => {
+    window.analytics.trackSingleItem('Contribution Cancelled', {isSkillContribution});
     router.push('/dashboard');
   };
 

src/components/Contribute/ContributionWizard/ContributionWizard.tsx

@@ -110,10 +110,12 @@ const KnowledgeSeedExamples: React.FC<Props> = ({ isGithubMode, seedExamples, on
     seedExample.immutable = false;
     seedExample.isExpanded = true;
     onUpdateSeedExamples([...seedExamples, seedExample]);
+    window.analytics.trackSingleItem("Added Seed", {isSkillContribution: false});
   };
 
   const deleteSeedExample = (seedExampleIndex: number): void => {
     onUpdateSeedExamples(seedExamples.filter((_, index: number) => index !== seedExampleIndex));
+    window.analytics.trackSingleItem("Deleted Seed", {isSkillContribution: false});
   };
 
   return (

src/components/Contribute/Knowledge/KnowledgeSeedExamples/KnowledgeSeedExamples.tsx

@@ -340,6 +340,7 @@ export const KnowledgeWizard: React.FunctionComponent<KnowledgeFormProps> = ({ k
   };
 
   const handleSubmit = async (githubUsername: string): Promise<boolean> => {
+    window.analytics.trackSingleItem("Knowledge Contribution Submitted", {}); // TODO add data
     if (knowledgeEditFormData) {
       const result = isGithubMode
         ? await updateGithubKnowledgeData(session, knowledgeFormData, knowledgeEditFormData, updateActionGroupAlertContent)
@@ -363,6 +364,7 @@ export const KnowledgeWizard: React.FunctionComponent<KnowledgeFormProps> = ({ k
 
   const onYamlUploadKnowledgeFillForm = (data: KnowledgeYamlData): void => {
     setKnowledgeFormData(addYamlUploadKnowledge(knowledgeFormData, data));
+    window.analytics.trackSingleItem('Knowledge Yaml uploaded', {});
     updateActionGroupAlertContent({
       title: 'YAML Uploaded Successfully',
       message: 'Your knowledge form has been populated based on the uploaded YAML file.',

src/components/Contribute/Knowledge/KnowledgeWizard/KnowledgeWizard.tsx

@@ -49,10 +49,12 @@ const SkillSeedExamples: React.FC<Props> = ({ seedExamples, onSelectContext, onU
     seedExample.immutable = false;
     seedExample.isExpanded = true;
     onUpdateSeedExamples([...seedExamples, seedExample]);
+    window.analytics.trackSingleItem("Added Seed", {isSkillContribution: true});
   };
 
   const deleteSeedExample = (seedExampleIndex: number): void => {
     onUpdateSeedExamples(seedExamples.filter((_, index: number) => index !== seedExampleIndex));
+    window.analytics.trackSingleItem("Deleted Seed", {isSkillContribution: true});
   };
 
   return (

src/components/Contribute/Skill/SkillSeedExamples/SkillSeedExamples.tsx

@@ -187,6 +187,7 @@ export const SkillWizard: React.FunctionComponent<Props> = ({ skillEditFormData,
   };
 
   const handleSubmit = async (githubUsername: string): Promise<boolean> => {
+    window.analytics.trackSingleItem("Knowledge Contribution Submitted", {}); // TODO better place, add data
     if (skillEditFormData) {
       const result = isGithubMode
         ? await updateGithubSkillData(session, skillFormData, skillEditFormData, updateActionGroupAlertContent)
@@ -211,6 +212,7 @@ export const SkillWizard: React.FunctionComponent<Props> = ({ skillEditFormData,
 
   const onYamlUploadSkillFillForm = (data: SkillYamlData): void => {
     setSkillFormData(addYamlUploadSkill(skillFormData, data));
+    window.analytics.trackSingleItem('Skill Yaml uploaded', {});
     updateActionGroupAlertContent({
       title: 'YAML Uploaded Successfully',
       message: 'Your skill form has been populated based on the uploaded YAML file.',

src/components/Contribute/Skill/SkillWizard/SkillWizard.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { TrackingApi } from '@patternfly/chatbot/src/tracking/tracking_api';
+import { getTrackingProviders } from '@patternfly/chatbot';
+
+declare global {
+  interface Window {
+    analytics: TrackingApi;
+  }
+}
+
+export const initAnalytics = () : TrackingApi => {
+  console.log('initAnalytics');
+
+  if (window.analytics) {
+    return window.analytics;
+  }
+
+  let api: TrackingApi ;
+  fetch('/api/analyticsConfig', {
+    method: 'GET'
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      console.log(data);
+      api = getTrackingProviders(data);
+      window.analytics = api;
+      return api;
+    })
+    .catch((error) => {
+      console.error(error);
+      api = getTrackingProviders({ console: true })
+      window.analytics = api;
+      return api;
+    });
+
+  // Should not be reached, but lint complains otherwise
+  return getTrackingProviders({ console: true });
+};