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 /**
@@ -360,8 +406,12 @@ export const LogsToolbar = memo(function LogsToolbar({
360406 ( start : string , end : string ) => {
361407 setDateRange ( start , end )
362408 setDatePickerOpen ( false )
409+ captureEvent ( posthogRef . current , 'logs_filter_applied' , {
410+ filter_type : 'time' ,
411+ workspace_id : workspaceId ,
412+ } )
363413 } ,
364- [ setDateRange ]
414+ [ setDateRange , workspaceId ]
365415 )
366416
367417 /**
@@ -545,7 +595,7 @@ export const LogsToolbar = memo(function LogsToolbar({
545595 options = { workflowOptions }
546596 multiSelect
547597 multiSelectValues = { workflowIds }
548- onMultiSelectChange = { setWorkflowIds }
598+ onMultiSelectChange = { handleWorkflowFilterChange }
549599 placeholder = 'All workflows'
550600 overlayContent = {
551601 < span className = 'flex items-center gap-1.5 truncate text-[var(--text-primary)]' >
@@ -580,7 +630,7 @@ export const LogsToolbar = memo(function LogsToolbar({
580630 options = { folderOptions }
581631 multiSelect
582632 multiSelectValues = { folderIds }
583- onMultiSelectChange = { setFolderIds }
633+ onMultiSelectChange = { handleFolderFilterChange }
584634 placeholder = 'All folders'
585635 overlayContent = {
586636 < span className = 'truncate text-[var(--text-primary)]' >
@@ -605,7 +655,7 @@ export const LogsToolbar = memo(function LogsToolbar({
605655 options = { triggerOptions }
606656 multiSelect
607657 multiSelectValues = { triggers }
608- onMultiSelectChange = { setTriggers }
658+ onMultiSelectChange = { handleTriggerFilterChange }
609659 placeholder = 'All triggers'
610660 overlayContent = {
611661 < span className = 'truncate text-[var(--text-primary)]' >
@@ -676,7 +726,7 @@ export const LogsToolbar = memo(function LogsToolbar({
676726 options = { workflowOptions }
677727 multiSelect
678728 multiSelectValues = { workflowIds }
679- onMultiSelectChange = { setWorkflowIds }
729+ onMultiSelectChange = { handleWorkflowFilterChange }
680730 placeholder = 'Workflow'
681731 overlayContent = {
682732 < span className = 'flex items-center gap-1.5 truncate text-[var(--text-primary)]' >
@@ -707,7 +757,7 @@ export const LogsToolbar = memo(function LogsToolbar({
707757 options = { folderOptions }
708758 multiSelect
709759 multiSelectValues = { folderIds }
710- onMultiSelectChange = { setFolderIds }
760+ onMultiSelectChange = { handleFolderFilterChange }
711761 placeholder = 'Folder'
712762 overlayContent = {
713763 < span className = 'truncate text-[var(--text-primary)]' > { folderDisplayLabel } </ span >
@@ -726,7 +776,7 @@ export const LogsToolbar = memo(function LogsToolbar({
726776 options = { triggerOptions }
727777 multiSelect
728778 multiSelectValues = { triggers }
729- onMultiSelectChange = { setTriggers }
779+ onMultiSelectChange = { handleTriggerFilterChange }
730780 placeholder = 'Trigger'
731781 overlayContent = {
732782 < span className = 'truncate text-[var(--text-primary)]' > { triggerDisplayLabel } </ span >
0 commit comments