Function LogsFilterPanel

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx:1179–1469

({ searchQuery, onSearchQueryChange }: LogsFilterPanelProps)

}

function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelProps) {
  const params = useParams()
  const workspaceId = params.workspaceId as string

  const {
    level,
    setLevel,
    workflowIds,
    setWorkflowIds,
    folderIds,
    setFolderIds,
    triggers,
    setTriggers,
    timeRange,
    setTimeRange,
    startDate,
    endDate,
    setDateRange,
    clearDateRange,
    resetFilters,
  } = useLogFilters()

  const [datePickerOpen, setDatePickerOpen] = useState(false)
  const previousTimeRangeRef = useRef(timeRange)
  const dateRangeAppliedRef = useRef(false)
  const { data: folders = {} } = useFolderMap(workspaceId)
  const { data: allWorkflowList = [] } = useWorkflows(workspaceId)

  const workflows = allWorkflowList.map((w) => ({ id: w.id, name: w.name }))
  const folderList = Object.values(folders).filter((f) => f.workspaceId === workspaceId)

  const selectedStatuses = level === 'all' || !level ? [] : level.split(',').filter(Boolean)

  const statusOptions: ComboboxOption[] = useMemo(
    () =>
      (Object.keys(STATUS_CONFIG) as LogStatus[])
        .filter((status) => STATUS_CONFIG[status].filterable)
        .map((status) => ({
          value: status,
          label: STATUS_CONFIG[status].label,
          icon: getColorIcon(STATUS_CONFIG[status].color),
        })),
    []
  )

  const handleStatusChange = (values: string[]) => {
    setLevel(values.length === 0 ? 'all' : values.join(','))
  }

  const statusDisplayLabel =
    selectedStatuses.length === 0
      ? 'Status'
      : selectedStatuses.length === 1
        ? statusOptions.find((s) => s.value === selectedStatuses[0])?.label || '1 selected'
        : `${selectedStatuses.length} selected`

  const selectedStatusColor =
    selectedStatuses.length === 1