feat: add quick filters analytics

src/lib/actions/analytics.ts

@@ -319,5 +319,6 @@ export enum Submit {
     MessagingTopicUpdateName = 'submit_messaging_topic_update_name',
     MessagingTopicUpdatePermissions = 'submit_messaging_topic_update_permissions',
     MessagingTopicSubscriberAdd = 'submit_messaging_topic_subscriber_add',
-    MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete'
+    MessagingTopicSubscriberDelete = 'submit_messaging_topic_subscriber_delete',
+    ApplyQuickFilter = 'submit_apply_quick_filter'
 }

src/lib/elements/pill.svelte

@@ -12,6 +12,7 @@
     export let external = false;
     export let href: string = null;
     export let event: string = null;
+    export let eventData: Record<string, unknown> = {};
     export let style = '';
     let classes = '';
     export { classes as class };
@@ -22,7 +23,8 @@
         }
 
         trackEvent(`click_${event}`, {
-            from: 'tag'
+            from: 'tag',
+            ...eventData
         });
     }
 </script>

src/routes/(console)/project-[project]/functions/function-[function]/executions/quickFilters.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
+    import { Submit, trackEvent } from '$lib/actions/analytics';
     import { DropList, DropListItem } from '$lib/components';
     import {
         addFilter,
@@ -163,6 +164,11 @@
             }
         }
         queries.apply();
+        trackEvent(Submit.ApplyQuickFilter, {
+            source: 'function_executions',
+            column: colTitle,
+            value: value || arrayValues.join(', ')
+        });
     }
 
     function addStatusCodeFilter(value: string, colId: string) {
@@ -179,7 +185,11 @@
 
 {#each [statusFilter, triggerFilter, methodFilter] as filter}
     <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill button on:click={() => (filter.show = !filter.show)}>
+        <Pill
+            button
+            on:click={() => (filter.show = !filter.show)}
+            event="apply_quick_filter"
+            eventData={{ source: 'function_execution', column: filter.title }}>
             {#key filter.tag}
                 <span use:tagFormat>
                     {filter?.tag ?? filter.title}
@@ -226,7 +236,11 @@
 {/each}
 {#each [statusCodeFilter, createdAtFilter] as filter}
     <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill button on:click={() => (filter.show = !filter.show)}>
+        <Pill
+            button
+            on:click={() => (filter.show = !filter.show)}
+            event="apply_quick_filter"
+            eventData={{ source: 'function_execution', column: filter.title }}>
             {#key filter.tag}
                 <span use:tagFormat>
                     {filter?.tag ?? filter.title}

src/routes/(console)/project-[project]/functions/function-[function]/quickFilters.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
+    import { Submit, trackEvent } from '$lib/actions/analytics';
     import { DropList, DropListItem } from '$lib/components';
     import {
         addFilter,
@@ -162,6 +163,11 @@
             }
         }
         queries.apply();
+        trackEvent(Submit.ApplyQuickFilter, {
+            source: 'function_deployments',
+            column: colTitle,
+            value: value || arrayValues.join(', ')
+        });
     }
 
     function addSizeFilter(value: string, colId: string) {
@@ -177,7 +183,11 @@
 
 {#each [typeFilter] as filter}
     <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill button on:click={() => (filter.show = !filter.show)}>
+        <Pill
+            button
+            on:click={() => (filter.show = !filter.show)}
+            event="apply_quick_filter"
+            eventData={{ source: 'function_deployments', column: filter.title }}>
             {#key filter.tag}
                 <span use:tagFormat>
                     {filter?.tag ?? filter.title}
@@ -224,7 +234,11 @@
 {/each}
 {#each [sizeFilter] as filter}
     <DropList bind:show={filter.show} noArrow class="u-margin-block-start-16">
-        <Pill button on:click={() => (filter.show = !filter.show)}>
+        <Pill
+            button
+            on:click={() => (filter.show = !filter.show)}
+            event="apply_quick_filter"
+            eventData={{ source: 'function_deployments', column: filter.title }}>
             {#key filter.tag}
                 <span use:tagFormat>
                     {filter?.tag ?? filter.title}