chore: update dashboard for ai observability (#12875)

#### Description
Adds the actual dashboard to the backend.

<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR
Part of https://github.com/SigNoz/engineering-pod/issues/4501

### Additional information
- Draft until the dashboard DTO changes merge; the query fixes below
land on top of them.
- will update the dashboard based on ai query builder

frontend/src/container/LLMObservability/AttributeMapping/TestTab/__tests__/TestTab.test.tsx

@@ -63,26 +63,6 @@ const EDITED_SPAN_JSON = `{
   }
 }`;
 
-const SPAN_WITH_EXTRA_KEY_JSON = `{
-  "attributes": {
-    "input.value": "What is quantum computing?"
-  },
-  "resource": {
-    "service.name": "llm-gateway"
-  },
-  "demo": {
-    "name": "demo"
-  }
-}`;
-
-const EXTRA_KEY_RESULT_SPAN = {
-	attributes: {
-		'input.value': 'What is quantum computing?',
-		[MAPPED_ATTRIBUTE_KEY]: 'What is quantum computing?',
-	},
-	resource: { 'service.name': 'llm-gateway' },
-};
-
 const SPAN_INPUT_KEY = LOCALSTORAGE.LLM_ATTRIBUTE_MAPPING_TEST_SPAN;
 
 describe('TestTab — sample-span flow', () => {
@@ -124,47 +104,6 @@ describe('TestTab — sample-span flow', () => {
 		expect(screen.queryByTestId('test-error')).not.toBeInTheDocument();
 	});
 
-	it('trims extra top-level keys and sends only the envelope', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		let body: { spans?: { attributes?: Record<string, unknown> }[] } | undefined;
-		server.use(
-			rest.post(TEST_ENDPOINT, async (req, res, ctx) => {
-				body = await req.json();
-				return res(
-					ctx.status(200),
-					ctx.json(makeTestResponse([EXTRA_KEY_RESULT_SPAN])),
-				);
-			}),
-		);
-
-		render(<LLMObservabilityAttributeMapping />);
-
-		await user.click(screen.getByRole('tab', { name: 'Test' }));
-		const runBtn = await screen.findByTestId('run-test-button');
-
-		await user.clear(screen.getByTestId('monaco'));
-		await user.paste(SPAN_WITH_EXTRA_KEY_JSON);
-
-		await waitFor(() =>
-			expect(screen.getByTestId('monaco')).toHaveValue(SPAN_WITH_EXTRA_KEY_JSON),
-		);
-		expect(screen.queryByTestId('test-input-error')).not.toBeInTheDocument();
-
-		await user.click(runBtn);
-
-		await expect(
-			screen.findByTestId('test-results'),
-		).resolves.toBeInTheDocument();
-		expect(body?.spans?.[0]?.attributes).toStrictEqual({
-			'input.value': 'What is quantum computing?',
-		});
-		expect(screen.getByTestId('test-result-0-attributes')).toHaveTextContent(
-			MAPPED_ATTRIBUTE_KEY,
-		);
-		expect(screen.getByTestId('test-result-0-resource')).toBeInTheDocument();
-		expect(screen.getByText('populated')).toBeInTheDocument();
-	});
-
 	it('surfaces a backend error and renders no results', async () => {
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		server.use(

frontend/src/container/LLMObservability/AttributeMapping/TestTab/__tests__/testPayload.test.ts

@@ -1,51 +0,0 @@
-import { parseSpanInput } from '../testPayload';
-
-describe('parseSpanInput', () => {
-	it('reads the envelope and trims extra top-level keys', () => {
-		const span = parseSpanInput(`{
-			"attributes": { "llm.model_name": "gpt-4o" },
-			"resource": { "service.name": "llm-gateway" },
-			"demo": { "name": "demo" }
-		}`);
-
-		expect(span.attributes).toStrictEqual({ 'llm.model_name': 'gpt-4o' });
-		expect(span.resource).toStrictEqual({ 'service.name': 'llm-gateway' });
-	});
-
-	it('reads a clean envelope', () => {
-		const span = parseSpanInput(`{
-			"attributes": { "llm.model_name": "gpt-4o" },
-			"resource": { "service.name": "llm-gateway" }
-		}`);
-
-		expect(span.attributes).toStrictEqual({ 'llm.model_name': 'gpt-4o' });
-		expect(span.resource).toStrictEqual({ 'service.name': 'llm-gateway' });
-	});
-
-	it('treats an envelope-less object as a bare attribute map', () => {
-		const span = parseSpanInput('{ "llm.model_name": "gpt-4o", "demo": "x" }');
-
-		expect(span.attributes).toStrictEqual({
-			'llm.model_name': 'gpt-4o',
-			demo: 'x',
-		});
-		expect(span.resource).toStrictEqual({});
-	});
-
-	it('drops an envelope key that is not an object', () => {
-		const span = parseSpanInput(
-			'{ "attributes": { "llm.provider": "openai" }, "resource": "oops" }',
-		);
-
-		expect(span.attributes).toStrictEqual({ 'llm.provider': 'openai' });
-		expect(span.resource).toStrictEqual({});
-	});
-
-	it.each([
-		['   ', 'Paste a JSON span object to run the test.'],
-		['{ "a": }', 'Invalid JSON — check for trailing commas or missing quotes.'],
-		['[1, 2]', 'Span must be a JSON object of attribute key-value pairs.'],
-	])('rejects %p', (input, message) => {
-		expect(() => parseSpanInput(input)).toThrow(message);
-	});
-});

frontend/src/container/LLMObservability/AttributeMapping/TestTab/testPayload.ts

@@ -51,9 +51,13 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
 	return value !== null && typeof value === 'object' && !Array.isArray(value);
 }
 
-// Any other top-level key (a real span carries name, spanId, kind...) is trimmed.
 function isSpanEnvelope(parsed: Record<string, unknown>): boolean {
-	return isPlainObject(parsed.attributes) || isPlainObject(parsed.resource);
+	const keys = Object.keys(parsed);
+	return (
+		keys.length > 0 &&
+		keys.every((key) => key === 'attributes' || key === 'resource') &&
+		(isPlainObject(parsed.attributes) || isPlainObject(parsed.resource))
+	);
 }
 
 export function parseSpanInput(input: string): SpantypesSpanMapperTestSpanDTO {

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/__tests__/UnpricedModelsTab.test.tsx

@@ -167,7 +167,7 @@ describe('UnpricedModelsTab (integration)', () => {
 
 		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
 
-		// Open the row's dropdown and take the "Create a new pricing model" escape hatch
+		// Open the row's dropdown and take the "Create pricing for …" escape hatch
 		// instead of mapping onto an existing billing model.
 		await user.click(screen.getByTestId(`map-to-select-${MODEL}`));
 		await user.click(await screen.findByTestId(`map-to-create-${MODEL}`));

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.module.scss

@@ -14,24 +14,6 @@
 	width: 280px;
 }
 
-.createFooter {
-	padding: var(--spacing-2);
-	background-color: var(--l2-background);
-}
-
-.createItem {
-	gap: var(--spacing-4);
-	font-style: normal;
-	color: var(--accent-primary);
-	--command-item-cursor: pointer;
-	--command-item-svg-size: var(--spacing-7);
-
-	&[data-selected='true'] {
-		background-color: var(--callout-primary-background);
-		color: var(--accent-primary);
-	}
-}
-
 .skeletonList {
 	display: flex;
 	flex-direction: column;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.tsx

@@ -119,18 +119,15 @@ function MapToBillingModelSelect({
 						    options scroll. Escape hatch when no existing billing model fits:
 						    define this model's own pricing rather than mapping onto another. */}
 						<ComboboxSeparator alwaysRender />
-						<div className={styles.createFooter}>
-							<ComboboxCreateItem
-								className={styles.createItem}
-								inputValue={modelName}
-								value={`create-pricing-${modelName}`}
-								prefix={<Plus size={14} />}
-								onSelect={handleCreateNew}
-								testId={`map-to-create-${modelName}`}
-							>
-								Create a new pricing model
-							</ComboboxCreateItem>
-						</div>
+						<ComboboxCreateItem
+							inputValue={modelName}
+							value={`create-pricing-${modelName}`}
+							prefix={<Plus size={14} />}
+							onSelect={handleCreateNew}
+							testId={`map-to-create-${modelName}`}
+						>
+							Create pricing for &quot;{modelName}&quot;
+						</ComboboxCreateItem>
 					</ComboboxCommand>
 				</ComboboxContent>
 			</Combobox>

pkg/modules/spanmapper/implspanmapper/fs/definitions/gen_ai.llm.json

@@ -1,5 +1,5 @@
 {
-  "version": 1,
+  "version": 2,
   "definition": {
     "name": "gen_ai.llm",
     "condition": {
@@ -114,20 +114,6 @@
           ]
         }
       },
-      {
-        "name": "gen_ai.operation.name",
-        "fieldContext": "attribute",
-        "config": {
-          "sources": [
-            {
-              "key": "llm.request.type",
-              "context": "attribute",
-              "operation": "copy",
-              "priority": 10
-            }
-          ]
-        }
-      },
       {
         "name": "gen_ai.usage.input_tokens",
         "fieldContext": "attribute",
@@ -293,6 +279,12 @@
               "operation": "copy",
               "priority": 30
             },
+            {
+              "key": "ai.response.toolCalls",
+              "context": "attribute",
+              "operation": "copy",
+              "priority": 25
+            },
             {
               "key": "ai.response.text",
               "context": "attribute",
@@ -329,7 +321,7 @@
         }
       },
       {
-        "name": "gen_ai.response.finish_reason",
+        "name": "gen_ai.response.finish_reasons",
         "fieldContext": "attribute",
         "config": {
           "sources": [

pkg/modules/spanmapper/implspanmapper/fs/definitions/gen_ai.tool.json

@@ -1,11 +1,20 @@
 {
-  "version": 1,
+  "version": 2,
   "definition": {
     "name": "gen_ai.tool",
     "condition": {
       "attributes": [
         {
-          "value": "tool"
+          "value": "tool.name"
+        },
+        {
+          "value": "ai.toolCall."
+        },
+        {
+          "value": "tool_call_args"
+        },
+        {
+          "value": "tool_response"
         }
       ],
       "resource": []