feat: split components

PostHog · Jan 14, 2025 · 16d62c3 · 16d62c3
1 parent a0a4ecb
commit 16d62c3
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 48 deletions.
diff --git a/frontend/src/scenes/llm-observability/LLMObservabilityDashboard.tsx b/frontend/src/scenes/llm-observability/LLMObservabilityDashboard.tsx
@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+import { BindLogic, useActions, useValues } from 'kea'
+import { QueryCard } from 'lib/components/Cards/InsightCard/QueryCard'
+import { DateFilter } from 'lib/components/DateFilter/DateFilter'
+import { TestAccountFilterSwitch } from 'lib/components/TestAccountFiltersSwitch'
+
+import { dataNodeCollectionLogic } from '~/queries/nodes/DataNode/dataNodeCollectionLogic'
+import { InsightVizNode, NodeKind } from '~/queries/schema/schema-general'
+
+import { LLM_OBSERVABILITY_DATA_COLLECTION_NODE_ID, llmObservabilityLogic } from './llmObservabilityLogic'
+
+const Filters = (): JSX.Element => {
+    const {
+        dateFilter: { dateTo, dateFrom },
+        shouldFilterTestAccounts,
+    } = useValues(llmObservabilityLogic)
+    const { setDates, setShouldFilterTestAccounts } = useActions(llmObservabilityLogic)
+
+    return (
+        <div className="mb-4 flex justify-between items-center">
+            <DateFilter dateFrom={dateFrom} dateTo={dateTo} onChange={setDates} />
+            <TestAccountFilterSwitch checked={shouldFilterTestAccounts} onChange={setShouldFilterTestAccounts} />
+        </div>
+    )
+}
+
+const Tiles = (): JSX.Element => {
+    const { tiles } = useValues(llmObservabilityLogic)
+
+    return (
+        <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-6 gap-4">
+            {tiles.map(({ title, description, query }, i) => (
+                <QueryCard
+                    key={i}
+                    title={title}
+                    description={description}
+                    query={{ kind: NodeKind.InsightVizNode, source: query } as InsightVizNode}
+                    className={clsx('h-96', i < 3 || i >= 5 ? 'xl:col-span-2' : 'xl:col-span-3')}
+                />
+            ))}
+        </div>
+    )
+}
+
+export function LLMObservabilityDashboard(): JSX.Element {
+    return (
+        <BindLogic logic={dataNodeCollectionLogic} props={{ key: LLM_OBSERVABILITY_DATA_COLLECTION_NODE_ID }}>
+            <Filters />
+            <Tiles />
+        </BindLogic>
+    )
+}
diff --git a/frontend/src/scenes/llm-observability/LLMObservabilityScene.tsx b/frontend/src/scenes/llm-observability/LLMObservabilityScene.tsx
@@ -1,53 +1,15 @@
-import { LemonBanner, Link } from '@posthog/lemon-ui'
-import clsx from 'clsx'
-import { BindLogic, useActions, useValues } from 'kea'
-import { QueryCard } from 'lib/components/Cards/InsightCard/QueryCard'
-import { DateFilter } from 'lib/components/DateFilter/DateFilter'
-import { TestAccountFilterSwitch } from 'lib/components/TestAccountFiltersSwitch'
+import { LemonBanner, LemonTabs, Link } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
 import { SceneExport } from 'scenes/sceneTypes'
 
-import { dataNodeCollectionLogic } from '~/queries/nodes/DataNode/dataNodeCollectionLogic'
-import { InsightVizNode, NodeKind } from '~/queries/schema/schema-general'
-
-import { LLM_OBSERVABILITY_DATA_COLLECTION_NODE_ID, llmObservabilityLogic } from './llmObservabilityLogic'
+import { LLMObservabilityDashboard } from './LLMObservabilityDashboard'
+import { llmObservabilityLogic, LLMObservabilityTab } from './llmObservabilityLogic'
+import { LLMObservabilityTraces } from './LLMObservabilityTraces'
 
 export const scene: SceneExport = {
     component: LLMObservabilityScene,
 }
 
-const Filters = (): JSX.Element => {
-    const {
-        dateFilter: { dateTo, dateFrom },
-        shouldFilterTestAccounts,
-    } = useValues(llmObservabilityLogic)
-    const { setDates, setShouldFilterTestAccounts } = useActions(llmObservabilityLogic)
-
-    return (
-        <div className="mb-4 flex justify-between items-center">
-            <DateFilter dateFrom={dateFrom} dateTo={dateTo} onChange={setDates} />
-            <TestAccountFilterSwitch checked={shouldFilterTestAccounts} onChange={setShouldFilterTestAccounts} />
-        </div>
-    )
-}
-
-const Tiles = (): JSX.Element => {
-    const { tiles } = useValues(llmObservabilityLogic)
-
-    return (
-        <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-6 gap-4">
-            {tiles.map(({ title, description, query }, i) => (
-                <QueryCard
-                    key={i}
-                    title={title}
-                    description={description}
-                    query={{ kind: NodeKind.InsightVizNode, source: query } as InsightVizNode}
-                    className={clsx('h-96', i < 3 || i >= 5 ? 'xl:col-span-2' : 'xl:col-span-3')}
-                />
-            ))}
-        </div>
-    )
-}
-
 const IngestionStatusCheck = (): JSX.Element | null => {
     const { hasSentAiGenerationEvent } = useValues(llmObservabilityLogic)
     if (hasSentAiGenerationEvent !== false) {
@@ -74,12 +36,28 @@ const IngestionStatusCheck = (): JSX.Element | null => {
 }
 
 export function LLMObservabilityScene(): JSX.Element {
+    const { activeTab } = useValues(llmObservabilityLogic)
+    const { setActiveTab } = useActions(llmObservabilityLogic)
+
     return (
-        <BindLogic logic={dataNodeCollectionLogic} props={{ key: LLM_OBSERVABILITY_DATA_COLLECTION_NODE_ID }}>
+        <>
             <IngestionStatusCheck />
-
-            <Filters />
-            <Tiles />
-        </BindLogic>
+            <LemonTabs
+                activeKey={activeTab}
+                onChange={setActiveTab}
+                tabs={[
+                    {
+                        key: LLMObservabilityTab.Dashboard,
+                        label: 'Overview',
+                        content: <LLMObservabilityDashboard />,
+                    },
+                    {
+                        key: LLMObservabilityTab.Traces,
+                        label: 'Traces',
+                        content: <LLMObservabilityTraces />,
+                    },
+                ]}
+            />
+        </>
     )
 }
diff --git a/frontend/src/scenes/llm-observability/LLMObservabilityTraces.tsx b/frontend/src/scenes/llm-observability/LLMObservabilityTraces.tsx
@@ -0,0 +1,3 @@
+export function LLMObservabilityTraces(): JSX.Element {
+    return <div>Traces</div>
+}
diff --git a/frontend/src/scenes/llm-observability/llmObservabilityLogic.tsx b/frontend/src/scenes/llm-observability/llmObservabilityLogic.tsx
@@ -30,6 +30,11 @@ export interface QueryTile {
     }
 }
 
+export enum LLMObservabilityTab {
+    Dashboard = 'dashboard',
+    Traces = 'traces',
+}
+
 const isDefinitionStale = (definition: EventDefinition): boolean => {
     const parsedLastSeen = definition.last_seen_at ? dayjs(definition.last_seen_at) : null
     return !!parsedLastSeen && dayjs().diff(parsedLastSeen, 'seconds') > STALE_EVENT_SECONDS
@@ -41,6 +46,7 @@ export const llmObservabilityLogic = kea<llmObservabilityLogicType>([
     actions({
         setDates: (dateFrom: string | null, dateTo: string | null) => ({ dateFrom, dateTo }),
         setShouldFilterTestAccounts: (shouldFilterTestAccounts: boolean) => ({ shouldFilterTestAccounts }),
+        setActiveTab: (activeTab: LLMObservabilityTab) => ({ activeTab }),
     }),
 
     reducers({
@@ -59,6 +65,7 @@ export const llmObservabilityLogic = kea<llmObservabilityLogicType>([
                 setShouldFilterTestAccounts: (_, { shouldFilterTestAccounts }) => shouldFilterTestAccounts,
             },
         ],
+        activeTab: [LLMObservabilityTab.Dashboard, { setActiveTab: (_, { activeTab }) => activeTab }],
     }),
 
     selectors({