@@ -61,7 +36,7 @@ export const TimelineCallDetails = ({ timestamp, call }: { timestamp?: Timestamp
-
+
Request
diff --git a/frontend/src/features/timeline/filters/TimelineFilterPanel.tsx b/frontend/src/features/timeline/filters/TimelineFilterPanel.tsx
index 95d64010d..03f391ec9 100644
--- a/frontend/src/features/timeline/filters/TimelineFilterPanel.tsx
+++ b/frontend/src/features/timeline/filters/TimelineFilterPanel.tsx
@@ -1,9 +1,9 @@
import { PhoneIcon, RocketLaunchIcon } from '@heroicons/react/24/outline'
import type React from 'react'
-import { useContext, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useModules } from '../../../api/modules/use-modules'
+import { eventTypesFilter, logLevelFilter, modulesFilter } from '../../../api/timeline'
import { EventType, type EventsQuery_Filter, LogLevel } from '../../../protos/xyz/block/ftl/v1/console/console_pb'
-import { modulesContext } from '../../../providers/modules-provider'
-import { eventTypesFilter, logLevelFilter, modulesFilter } from '../../../services/console.service'
import { textColor } from '../../../utils'
import { LogLevelBadgeSmall } from '../../logs/LogLevelBadgeSmall'
import { logLevelBgColor, logLevelColor, logLevelRingColor } from '../../logs/log.utils'
@@ -43,24 +43,24 @@ export const TimelineFilterPanel = ({
}: {
onFiltersChanged: (filters: EventsQuery_Filter[]) => void
}) => {
- const modules = useContext(modulesContext)
+ const modules = useModules()
const [selectedEventTypes, setSelectedEventTypes] = useState
(Object.keys(EVENT_TYPES))
const [selectedModules, setSelectedModules] = useState([])
const [previousModules, setPreviousModules] = useState([])
const [selectedLogLevel, setSelectedLogLevel] = useState(1)
useEffect(() => {
- if (modules.modules.length === 0) {
+ if (!modules.isSuccess || modules.data.modules.length === 0) {
return
}
- const newModules = modules.modules.map((module) => module.deploymentKey)
+ const newModules = modules.data.modules.map((module) => module.deploymentKey)
const addedModules = newModules.filter((name) => !previousModules.includes(name))
if (addedModules.length > 0) {
setSelectedModules((prevSelected) => [...prevSelected, ...addedModules])
}
setPreviousModules(newModules)
- }, [modules])
+ }, [modules.data])
useEffect(() => {
const filter: EventsQuery_Filter[] = []
@@ -144,40 +144,42 @@ export const TimelineFilterPanel = ({
-
-
-
- |
-
-
- {modules.modules.map((module) => (
-
-
- handleModuleChanged(module.deploymentKey, e.target.checked)}
- className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer'
- />
-
-
-
-
+ {modules.isSuccess && (
+
+
+
+ |
+
- ))}
-
+ {modules.data.modules.map((module) => (
+
+
+ handleModuleChanged(module.deploymentKey, e.target.checked)}
+ className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer'
+ />
+
+
+
+
+
+ ))}
+
+ )}