11'use client'
22
3- import { memo , useCallback , useMemo , useState } from 'react'
3+ import { memo , useCallback , useMemo , useRef , useState } from 'react'
44import { ArrowUp , Bell , Library , MoreHorizontal , RefreshCw } from 'lucide-react'
55import { useParams } from 'next/navigation'
6+ import { usePostHog } from 'posthog-js/react'
67import { useShallow } from 'zustand/react/shallow'
78import {
89 Button ,
@@ -18,6 +19,7 @@ import { DatePicker } from '@/components/emcn/components/date-picker/date-picker
1819import { cn } from '@/lib/core/utils/cn'
1920import { hasActiveFilters } from '@/lib/logs/filters'
2021import { getTriggerOptions } from '@/lib/logs/get-trigger-options'
22+ import { captureEvent } from '@/lib/posthog/client'
2123import { type LogStatus , STATUS_CONFIG } from '@/app/workspace/[workspaceId]/logs/utils'
2224import { getBlock } from '@/blocks/registry'
2325import { useFolderMap } from '@/hooks/queries/folders'
@@ -179,6 +181,9 @@ export const LogsToolbar = memo(function LogsToolbar({
179181} : LogsToolbarProps ) {
180182 const params = useParams ( )
181183 const workspaceId = params . workspaceId as string
184+ const posthog = usePostHog ( )
185+ const posthogRef = useRef ( posthog )
186+ posthogRef . current = posthog
182187
183188 const {
184189 level,
@@ -258,8 +263,45 @@ export const LogsToolbar = memo(function LogsToolbar({
258263 } else {
259264 setLevel ( values . join ( ',' ) )
260265 }
266+ captureEvent ( posthogRef . current , 'logs_filter_applied' , {
267+ filter_type : 'status' ,
268+ workspace_id : workspaceId ,
269+ } )
261270 } ,
262- [ setLevel ]
271+ [ setLevel , workspaceId ]
272+ )
273+
274+ const handleWorkflowFilterChange = useCallback (
275+ ( values : string [ ] ) => {
276+ setWorkflowIds ( values )
277+ captureEvent ( posthogRef . current , 'logs_filter_applied' , {
278+ filter_type : 'workflow' ,
279+ workspace_id : workspaceId ,
280+ } )
281+ } ,
282+ [ setWorkflowIds , workspaceId ]
283+ )
284+
285+ const handleFolderFilterChange = useCallback (
286+ ( values : string [ ] ) => {
287+ setFolderIds ( values )
288+ captureEvent ( posthogRef . current , 'logs_filter_applied' , {
289+ filter_type : 'folder' ,
290+ workspace_id : workspaceId ,
291+ } )
292+ } ,
293+ [ setFolderIds , workspaceId ]
294+ )
295+
296+ const handleTriggerFilterChange = useCallback (
297+ ( values : string [ ] ) => {
298+ setTriggers ( values )
299+ captureEvent ( posthogRef . current , 'logs_filter_applied' , {
300+ filter_type : 'trigger' ,
301+ workspace_id : workspaceId ,
302+ } )
303+ } ,
304+ [ setTriggers , workspaceId ]
263305 )
264306
265307 const statusDisplayLabel = useMemo ( ( ) => {
@@ -348,9 +390,13 @@ export const LogsToolbar = memo(function LogsToolbar({
348390 } else {
349391 clearDateRange ( )
350392 setTimeRange ( val as typeof timeRange )
393+ captureEvent ( posthogRef . current , 'logs_filter_applied' , {
394+ filter_type : 'time' ,
395+ workspace_id : workspaceId ,
396+ } )
351397 }
352398 } ,
353- [ timeRange , setTimeRange , clearDateRange ]
399+ [ timeRange , setTimeRange , clearDateRange , workspaceId ]
354400 )
355401
356402 /**
@@ -545,7 +591,7 @@ export const LogsToolbar = memo(function LogsToolbar({
545591 options = { workflowOptions }
546592 multiSelect
547593 multiSelectValues = { workflowIds }
548- onMultiSelectChange = { setWorkflowIds }
594+ onMultiSelectChange = { handleWorkflowFilterChange }
549595 placeholder = 'All workflows'
550596 overlayContent = {
551597 < span className = 'flex items-center gap-1.5 truncate text-[var(--text-primary)]' >
@@ -580,7 +626,7 @@ export const LogsToolbar = memo(function LogsToolbar({
580626 options = { folderOptions }
581627 multiSelect
582628 multiSelectValues = { folderIds }
583- onMultiSelectChange = { setFolderIds }
629+ onMultiSelectChange = { handleFolderFilterChange }
584630 placeholder = 'All folders'
585631 overlayContent = {
586632 < span className = 'truncate text-[var(--text-primary)]' >
@@ -605,7 +651,7 @@ export const LogsToolbar = memo(function LogsToolbar({
605651 options = { triggerOptions }
606652 multiSelect
607653 multiSelectValues = { triggers }
608- onMultiSelectChange = { setTriggers }
654+ onMultiSelectChange = { handleTriggerFilterChange }
609655 placeholder = 'All triggers'
610656 overlayContent = {
611657 < span className = 'truncate text-[var(--text-primary)]' >
@@ -676,7 +722,7 @@ export const LogsToolbar = memo(function LogsToolbar({
676722 options = { workflowOptions }
677723 multiSelect
678724 multiSelectValues = { workflowIds }
679- onMultiSelectChange = { setWorkflowIds }
725+ onMultiSelectChange = { handleWorkflowFilterChange }
680726 placeholder = 'Workflow'
681727 overlayContent = {
682728 < span className = 'flex items-center gap-1.5 truncate text-[var(--text-primary)]' >
@@ -707,7 +753,7 @@ export const LogsToolbar = memo(function LogsToolbar({
707753 options = { folderOptions }
708754 multiSelect
709755 multiSelectValues = { folderIds }
710- onMultiSelectChange = { setFolderIds }
756+ onMultiSelectChange = { handleFolderFilterChange }
711757 placeholder = 'Folder'
712758 overlayContent = {
713759 < span className = 'truncate text-[var(--text-primary)]' > { folderDisplayLabel } </ span >
@@ -726,7 +772,7 @@ export const LogsToolbar = memo(function LogsToolbar({
726772 options = { triggerOptions }
727773 multiSelect
728774 multiSelectValues = { triggers }
729- onMultiSelectChange = { setTriggers }
775+ onMultiSelectChange = { handleTriggerFilterChange }
730776 placeholder = 'Trigger'
731777 overlayContent = {
732778 < span className = 'truncate text-[var(--text-primary)]' > { triggerDisplayLabel } </ span >
0 commit comments