From 8014c065e8035ecc9bfeb4e7a7c9f4e034784096 Mon Sep 17 00:00:00 2001 From: Gaurav Tewari Date: Mon, 20 Jul 2026 16:48:08 +0530 Subject: [PATCH 1/4] feat: rename llm o11y to ai o11y [2/2] (#12141) * feat: add llm o11y to side nav * chore: rename route * chore: review comments * chore: update constants * chore: change name to ai * chore: rename draft * chore: move model pricing out of settings * chore: update comment * revert: undo LLM->AI file/dir moves, keep constant rename Reverts the two file-relocation commits (c25060950 rename LLMObservability dir -> AIObservability; 1a18bc848 move ModelPricing out of Settings) while preserving the LLM->AI string/constant renames (route constants + paths, side-nav entry/labels, page titles, permission keys). Component files stay under container/LLMObservability with their original names. --------- Co-authored-by: Gaurav Tewari --- frontend/public/locales/en-GB/titles.json | 6 +++--- frontend/public/locales/en/titles.json | 6 +++--- frontend/src/AppRoutes/Private.tsx | 4 ++-- frontend/src/AppRoutes/routes.ts | 12 ++++++------ frontend/src/constants/routes.ts | 8 ++++---- .../__tests__/LLMObservability.test.tsx | 14 +++++++------- .../hooks/useLLMObservabilityTabs.tsx | 6 +++--- frontend/src/container/SideNav/SideNav.tsx | 2 +- frontend/src/container/SideNav/menuItems.tsx | 8 ++++---- .../TopNav/DateTimeSelectionV2/constants.ts | 6 +++--- frontend/src/utils/permission/index.ts | 8 ++++---- 11 files changed, 40 insertions(+), 40 deletions(-) diff --git a/frontend/public/locales/en-GB/titles.json b/frontend/public/locales/en-GB/titles.json index 7d1657d8638..285698c3c7f 100644 --- a/frontend/public/locales/en-GB/titles.json +++ b/frontend/public/locales/en-GB/titles.json @@ -62,7 +62,7 @@ "TRACES_FUNNELS_DETAIL": "SigNoz | Funnel", "INTEGRATIONS_DETAIL": "SigNoz | Integration", "PUBLIC_DASHBOARD": "SigNoz | Dashboard", - "LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview", - "LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration", - "LLM_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | LLM Observability Attribute Mapping" + "AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview", + "AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration", + "AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping" } \ No newline at end of file diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json index 109edbe6262..9824e544678 100644 --- a/frontend/public/locales/en/titles.json +++ b/frontend/public/locales/en/titles.json @@ -87,7 +87,7 @@ "TRACES_FUNNELS_DETAIL": "SigNoz | Funnel", "INTEGRATIONS_DETAIL": "SigNoz | Integration", "PUBLIC_DASHBOARD": "SigNoz | Dashboard", - "LLM_OBSERVABILITY_OVERVIEW": "SigNoz | LLM Observability Overview", - "LLM_OBSERVABILITY_CONFIGURATION": "SigNoz | LLM Observability Configuration", - "LLM_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | LLM Observability Attribute Mapping" + "AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview", + "AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration", + "AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping" } \ No newline at end of file diff --git a/frontend/src/AppRoutes/Private.tsx b/frontend/src/AppRoutes/Private.tsx index a11c0e046e1..b1775d1810d 100644 --- a/frontend/src/AppRoutes/Private.tsx +++ b/frontend/src/AppRoutes/Private.tsx @@ -134,8 +134,8 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element { } if ( - (pathname.startsWith(`${ROUTES.LLM_OBSERVABILITY_BASE}/`) || - pathname === ROUTES.LLM_OBSERVABILITY_BASE) && + (pathname.startsWith(`${ROUTES.AI_OBSERVABILITY_BASE}/`) || + pathname === ROUTES.AI_OBSERVABILITY_BASE) && !isAIObservabilityEnabled ) { return ; diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts index 09e87a894f1..7d7b50cdb6e 100644 --- a/frontend/src/AppRoutes/routes.ts +++ b/frontend/src/AppRoutes/routes.ts @@ -514,24 +514,24 @@ const routes: AppRoutes[] = [ isPrivate: true, }, { - path: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING, + path: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING, exact: true, component: LLMObservabilityPage, - key: 'LLM_OBSERVABILITY_ATTRIBUTE_MAPPING', + key: 'AI_OBSERVABILITY_ATTRIBUTE_MAPPING', isPrivate: true, }, { - path: ROUTES.LLM_OBSERVABILITY_OVERVIEW, + path: ROUTES.AI_OBSERVABILITY_OVERVIEW, exact: true, component: LLMObservabilityPage, - key: 'LLM_OBSERVABILITY_OVERVIEW', + key: 'AI_OBSERVABILITY_OVERVIEW', isPrivate: true, }, { - path: ROUTES.LLM_OBSERVABILITY_CONFIGURATION, + path: ROUTES.AI_OBSERVABILITY_CONFIGURATION, exact: true, component: LLMObservabilityPage, - key: 'LLM_OBSERVABILITY_CONFIGURATION', + key: 'AI_OBSERVABILITY_CONFIGURATION', isPrivate: true, }, ]; diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index a792e0a9c38..a00056b5222 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -89,10 +89,10 @@ const ROUTES = { AI_ASSISTANT_BASE: '/ai-assistant', AI_ASSISTANT_ICON_PREVIEW: '/ai-assistant-icon-preview', MCP_SERVER: '/settings/mcp-server', - LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: '/llm-observability/attribute-mapping', - LLM_OBSERVABILITY_BASE: '/llm-observability', - LLM_OBSERVABILITY_OVERVIEW: '/llm-observability/overview', - LLM_OBSERVABILITY_CONFIGURATION: '/llm-observability/configuration', + AI_OBSERVABILITY_ATTRIBUTE_MAPPING: '/ai-observability/attribute-mapping', + AI_OBSERVABILITY_BASE: '/ai-observability', + AI_OBSERVABILITY_OVERVIEW: '/ai-observability/overview', + AI_OBSERVABILITY_CONFIGURATION: '/ai-observability/configuration', } as const; export default ROUTES; diff --git a/frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx b/frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx index 22c767edc45..40bc6ef94a9 100644 --- a/frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx +++ b/frontend/src/container/LLMObservability/__tests__/LLMObservability.test.tsx @@ -37,7 +37,7 @@ describe('LLMObservability (integration)', () => { it('renders the overview panel and the tab bar on the overview route', () => { render(, undefined, { - initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW, + initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW, }); expect(screen.getByTestId('llm-observability-tabs')).toBeInTheDocument(); @@ -55,32 +55,32 @@ describe('LLMObservability (integration)', () => { it('navigates to the configuration route when the Model pricing tab is clicked', async () => { const user = userEvent.setup({ pointerEventsCheck: 0 }); render(, undefined, { - initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW, + initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW, }); await user.click(screen.getByRole('tab', { name: 'Model pricing' })); expect(safeNavigateMock).toHaveBeenCalledWith( - ROUTES.LLM_OBSERVABILITY_CONFIGURATION, + ROUTES.AI_OBSERVABILITY_CONFIGURATION, ); }); it('navigates to the attribute mapping route when that tab is clicked', async () => { const user = userEvent.setup({ pointerEventsCheck: 0 }); render(, undefined, { - initialRoute: ROUTES.LLM_OBSERVABILITY_OVERVIEW, + initialRoute: ROUTES.AI_OBSERVABILITY_OVERVIEW, }); await user.click(screen.getByRole('tab', { name: 'Attribute Mapping' })); expect(safeNavigateMock).toHaveBeenCalledWith( - ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING, + ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING, ); }); it('renders the attribute mapping page on the attribute mapping route', () => { render(, undefined, { - initialRoute: ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING, + initialRoute: ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING, }); expect( @@ -91,7 +91,7 @@ describe('LLMObservability (integration)', () => { it('renders the model-pricing page on the configuration route', async () => { setupList(); render(, undefined, { - initialRoute: ROUTES.LLM_OBSERVABILITY_CONFIGURATION, + initialRoute: ROUTES.AI_OBSERVABILITY_CONFIGURATION, }); await waitFor(() => diff --git a/frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx b/frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx index 1684cd91be0..0d838045310 100644 --- a/frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx +++ b/frontend/src/container/LLMObservability/hooks/useLLMObservabilityTabs.tsx @@ -8,9 +8,9 @@ import LLMObservabilityAttributeMapping from '../AttributeMapping/LLMObservabili import Overview from '../Overview/Overview'; import LLMObservabilityModelPricing from '../Settings/ModelPricing/LLMObservabilityModelPricing'; -const OVERVIEW_KEY = ROUTES.LLM_OBSERVABILITY_OVERVIEW; -const CONFIGURATION_KEY = ROUTES.LLM_OBSERVABILITY_CONFIGURATION; -const ATTRIBUTE_MAPPING_KEY = ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING; +const OVERVIEW_KEY = ROUTES.AI_OBSERVABILITY_OVERVIEW; +const CONFIGURATION_KEY = ROUTES.AI_OBSERVABILITY_CONFIGURATION; +const ATTRIBUTE_MAPPING_KEY = ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING; interface UseLLMObservabilityTabsResult { items: TabItemProps[]; diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx index b1bfbe2be70..67225b3457a 100644 --- a/frontend/src/container/SideNav/SideNav.tsx +++ b/frontend/src/container/SideNav/SideNav.tsx @@ -294,7 +294,7 @@ function SideNav({ isPinned }: { isPinned: boolean }): JSX.Element { if (item.key === ROUTES.INTEGRATIONS) { return shouldShowIntegrationsValue; } - if (item.key === ROUTES.LLM_OBSERVABILITY_OVERVIEW) { + if (item.key === ROUTES.AI_OBSERVABILITY_OVERVIEW) { return isAIObservabilityEnabled; } return item.isEnabled; diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx index 068f2de2248..e11c52874f1 100644 --- a/frontend/src/container/SideNav/menuItems.tsx +++ b/frontend/src/container/SideNav/menuItems.tsx @@ -290,14 +290,14 @@ export const defaultMoreMenuItems: SidebarItem[] = [ itemKey: 'external-apis', }, { - key: ROUTES.LLM_OBSERVABILITY_OVERVIEW, - label: 'LLM Observability', + key: ROUTES.AI_OBSERVABILITY_OVERVIEW, + label: 'AI Observability', icon: , isNew: true, // Gated behind the `enable_ai_observability` feature flag in // SideNav's `computedSecondaryMenuItems`; disabled by default. isEnabled: false, - itemKey: 'llm-observability', + itemKey: 'ai-observability', }, { key: ROUTES.METER, @@ -576,7 +576,7 @@ export const NEW_ROUTES_MENU_ITEM_KEY_MAP: Record = { ROUTES.INFRASTRUCTURE_MONITORING_HOSTS, [ROUTES.API_MONITORING_BASE]: ROUTES.API_MONITORING, [ROUTES.MESSAGING_QUEUES_BASE]: ROUTES.MESSAGING_QUEUES_OVERVIEW, - [ROUTES.LLM_OBSERVABILITY_BASE]: ROUTES.LLM_OBSERVABILITY_OVERVIEW, + [ROUTES.AI_OBSERVABILITY_BASE]: ROUTES.AI_OBSERVABILITY_OVERVIEW, // `getActiveMenuKeyFromPath` strips the URL down to its first segment; // `/ai-assistant/` reduces to `/ai-assistant`, which we point back // to the AI Assistant menu item's concrete key. diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts index 238c53dedd5..120fdb36597 100644 --- a/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts +++ b/frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts @@ -203,9 +203,9 @@ export const routesToSkip = [ ROUTES.METER_EXPLORER_VIEWS, ROUTES.METRICS_EXPLORER_VOLUME_CONTROL, ROUTES.SOMETHING_WENT_WRONG, - ROUTES.LLM_OBSERVABILITY_OVERVIEW, - ROUTES.LLM_OBSERVABILITY_CONFIGURATION, - ROUTES.LLM_OBSERVABILITY_ATTRIBUTE_MAPPING, + ROUTES.AI_OBSERVABILITY_OVERVIEW, + ROUTES.AI_OBSERVABILITY_CONFIGURATION, + ROUTES.AI_OBSERVABILITY_ATTRIBUTE_MAPPING, ]; export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS]; diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts index dc2e0d6c196..f2af7c2fd77 100644 --- a/frontend/src/utils/permission/index.ts +++ b/frontend/src/utils/permission/index.ts @@ -136,8 +136,8 @@ export const routePermission: Record = { AI_ASSISTANT_ICON_PREVIEW: ['ADMIN', 'EDITOR', 'VIEWER'], MCP_SERVER: ['ADMIN', 'EDITOR', 'VIEWER'], AI_ASSISTANT_BASE: ['ADMIN', 'EDITOR', 'VIEWER'], - LLM_OBSERVABILITY_ATTRIBUTE_MAPPING: ['ADMIN', 'EDITOR', 'VIEWER'], - LLM_OBSERVABILITY_BASE: ['ADMIN', 'EDITOR', 'VIEWER'], - LLM_OBSERVABILITY_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'], - LLM_OBSERVABILITY_CONFIGURATION: ['ADMIN', 'EDITOR', 'VIEWER'], + AI_OBSERVABILITY_ATTRIBUTE_MAPPING: ['ADMIN', 'EDITOR', 'VIEWER'], + AI_OBSERVABILITY_BASE: ['ADMIN', 'EDITOR', 'VIEWER'], + AI_OBSERVABILITY_OVERVIEW: ['ADMIN', 'EDITOR', 'VIEWER'], + AI_OBSERVABILITY_CONFIGURATION: ['ADMIN', 'EDITOR', 'VIEWER'], }; From 0b7c266b092b2140f2e7234ff5cd38fbbde14452 Mon Sep 17 00:00:00 2001 From: Gaurav Tewari Date: Mon, 20 Jul 2026 16:49:48 +0530 Subject: [PATCH 2/4] fix: css fixes for llm o11y model pricing and overview (#12145) * fix: css fixes for llm o11y model pricing and overview * fix: spacing issue * chore: update modal drawer cost * chore: remove comments * chore: spacing between chips right --------- Co-authored-by: Gaurav Tewari --- .../LLMObservability/Overview/Overview.module.scss | 2 -- .../ModelCostDrawer/ModelCostDrawer.module.scss | 4 +++- .../ExtraPricingBuckets/ExtraPricingBuckets.module.scss | 1 - .../components/PatternEditor/PatternEditor.module.scss | 5 ++--- .../components/SourceSelector/SourceSelector.module.scss | 8 +------- .../components/SourceSelector/SourceSelector.tsx | 4 ++-- .../UnpricedModelsTab/UnpricedModelsTab.module.scss | 1 + 7 files changed, 9 insertions(+), 16 deletions(-) diff --git a/frontend/src/container/LLMObservability/Overview/Overview.module.scss b/frontend/src/container/LLMObservability/Overview/Overview.module.scss index d640e1544a1..488cdaef6f0 100644 --- a/frontend/src/container/LLMObservability/Overview/Overview.module.scss +++ b/frontend/src/container/LLMObservability/Overview/Overview.module.scss @@ -9,6 +9,4 @@ :global([class*='dashboardPageHeader']) { display: none; } - // remove margin added by the hidden header to avoid extra whitespace at the top of the page - margin-top: calc(var(--spacing-8) * -1); } diff --git a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss index bdda8835639..9ca894cb260 100644 --- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss +++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/ModelCostDrawer.module.scss @@ -18,7 +18,7 @@ --dialog-footer-padding: var(--spacing-8) var(--spacing-12); display: flex; - overflow-y: auto; + overflow: hidden; // The drawer body — children render inside [data-slot='drawer-description'] // (this is the @signozhq drawer, not antd, so .ant-drawer-body was a no-op). @@ -27,6 +27,8 @@ flex-direction: column; gap: var(--spacing-12); padding: var(--spacing-10) var(--spacing-12); + min-height: 0; + overflow-y: auto; } [data-slot='select-content'] { diff --git a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss index 6185c0a806a..2207f14279e 100644 --- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss +++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/ExtraPricingBuckets/ExtraPricingBuckets.module.scss @@ -51,7 +51,6 @@ gap: var(--spacing-5); padding: var(--spacing-6); border-radius: 6px; - background: var(--l2-background); border: 1px solid var(--l2-border); } diff --git a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss index 698dc1b55a9..808c8e62fc2 100644 --- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss +++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/PatternEditor/PatternEditor.module.scss @@ -9,7 +9,6 @@ .patternBox { display: flex; flex-direction: column; - gap: var(--spacing-6); padding: var(--spacing-6); border-radius: 6px; border: 1px solid var(--l2-border); @@ -18,14 +17,14 @@ .patternChips { display: flex; flex-wrap: wrap; - gap: var(--spacing-3); - min-height: 28px; + gap: var(--spacing-0) var(--spacing-3); } .patternChip { display: inline-flex; align-items: center; gap: var(--spacing-2); + margin-bottom: var(--spacing-4); } .patternChipRemove { diff --git a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss index 2fc083b8ffb..fd46bb5532f 100644 --- a/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss +++ b/frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/components/SourceSelector/SourceSelector.module.scss @@ -30,7 +30,6 @@ padding: var(--spacing-5) var(--spacing-6); border-radius: var(--radius-2); border: 1px solid transparent; - background: var(--l3-background); margin: 0; width: 100%; // Include padding + border in the 100% width so the card fits inside @@ -67,16 +66,11 @@ // Radix RadioGroupItem renders