Merge branch 'main' into e2e/dashboard-create-flow

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/computeVisualLayout.test.ts

@@ -11,6 +11,7 @@ function makeSpan(
 ): FlamegraphSpan {
 	return {
 		parentSpanId: '',
+		traceId: 'trace-1',
 		hasError: false,
 		serviceName: 'svc',
 		name: 'op',

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -6,6 +6,7 @@ export const MOCK_SPAN: FlamegraphSpan = {
 	durationNano: 50_000_000, // 50ms
 	spanId: 'span-1',
 	parentSpanId: '',
+	traceId: 'trace-1',
 	hasError: false,
 	serviceName: 'test-service',
 	name: 'test-span',

frontend/src/types/api/trace/getTraceFlamegraph.ts

@@ -23,6 +23,7 @@ export interface FlamegraphSpan {
 	durationNano: number;
 	spanId: string;
 	parentSpanId: string;
+	traceId: string;
 	hasError: boolean;
 	serviceName: string;
 	name: string;

pkg/query-service/app/clickhouseReader/reader.go

@@ -1140,8 +1140,6 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	// map[traceID][level]span
 	var selectedSpans = [][]*model.FlamegraphSpan{}
 	var traceRoots []*model.FlamegraphSpan
-	// time bounds for Pass 1 and Pass 2 (set on cache miss, zero on cache hit)
-	var tsBucketStart, tsBucketEnd int64
 
 	// get the trace tree from cache!
 	cachedTraceData, err := r.GetFlamegraphSpansForTraceCache(ctx, orgID, traceID)
@@ -1157,59 +1155,62 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	if err != nil {
 		r.logger.Info("cache miss for getFlamegraphSpansForTrace", "traceID", traceID)
 
-		// Inline summary query to get time bounds shared by Pass 1 and Pass 2.
-		var traceSummary model.TraceSummary
-		summaryQuery := fmt.Sprintf(
-			"SELECT trace_id, min(start) AS start, max(end) AS end, sum(num_spans) AS num_spans FROM %s.%s WHERE trace_id=$1 GROUP BY trace_id",
-			r.TraceDB, r.traceSummaryTable)
-		if summaryErr := r.db.QueryRow(ctx, summaryQuery, traceID).Scan(
-			&traceSummary.TraceID, &traceSummary.Start, &traceSummary.End, &traceSummary.NumSpans,
-		); summaryErr != nil {
-			if summaryErr == sql.ErrNoRows {
-				return trace, nil
-			}
-			r.logger.Error("Error in processing flamegraph trace summary sql query", errorsV2.Attr(summaryErr))
-			return nil, model.ExecutionError(fmt.Errorf("getFlamegraphSpansForTrace: error querying trace summary: %w", summaryErr))
+		selectCols := "timestamp, duration_nano, span_id, trace_id, has_error, links as references, resource_string_service$$name, name, events"
+		if len(req.SelectFields) > 0 {
+			selectCols += ", attributes_string, attributes_number, attributes_bool, resources_string"
 		}
-		tsBucketStart = traceSummary.Start.Unix() - 1800
-		tsBucketEnd = traceSummary.End.Unix()
+		flamegraphQuery := fmt.Sprintf("SELECT %s FROM %s.%s WHERE trace_id=$1 and ts_bucket_start>=$2 and ts_bucket_start<=$3 ORDER BY timestamp ASC, name ASC", selectCols, r.TraceDB, r.traceTableName)
 
-		// Pass 1: skeleton query — no events, no attribute maps.
-		// Keeps tree-building memory lean; events are fetched in Pass 2 only for
-		// the windowed spans that are actually returned in the response.
-		skeletonQuery := fmt.Sprintf(
-			"SELECT DISTINCT ON (span_id) timestamp, duration_nano, span_id, parent_span_id, has_error, resource_string_service$$name, name FROM %s.%s WHERE trace_id=$1 AND ts_bucket_start>=$2 AND ts_bucket_start<=$3 ORDER BY timestamp ASC, name ASC",
-			r.TraceDB, r.traceTableName)
-
-		var skeletonSpans []model.SpanItemV2
-		if skeletonErr := r.db.Select(ctx, &skeletonSpans, skeletonQuery, traceID,
-			strconv.FormatInt(tsBucketStart, 10), strconv.FormatInt(tsBucketEnd, 10),
-		); skeletonErr != nil {
-			r.logger.Error("Error in processing flamegraph skeleton sql query", errorsV2.Attr(skeletonErr))
-			return nil, model.ExecutionError(fmt.Errorf("getFlamegraphSpansForTrace: error querying skeleton spans: %w", skeletonErr))
+		searchScanResponses, err := r.GetSpansForTrace(ctx, traceID, flamegraphQuery)
+		if err != nil {
+			return nil, err
 		}
-		if len(skeletonSpans) == 0 {
+		if len(searchScanResponses) == 0 {
 			return trace, nil
 		}
 
-		for _, item := range skeletonSpans {
+		for _, item := range searchScanResponses {
+			ref := []model.OtelSpanRef{}
+			err := json.Unmarshal([]byte(item.References), &ref)
+			if err != nil {
+				r.logger.Error("Error unmarshalling references", errorsV2.Attr(err))
+				return nil, errorsV2.Newf(errorsV2.TypeInternal, errorsV2.CodeInternal, "getFlamegraphSpansForTrace: error in unmarshalling references %s", err.Error())
+			}
+
+			events := make([]model.Event, 0)
+			for _, event := range item.Events {
+				var eventMap model.Event
+				err = json.Unmarshal([]byte(event), &eventMap)
+				if err != nil {
+					r.logger.Error("Error unmarshalling events", errorsV2.Attr(err))
+					return nil, errorsV2.Newf(errorsV2.TypeInternal, errorsV2.CodeInternal, "getFlamegraphSpansForTrace: error in unmarshalling events %s", err.Error())
+				}
+				events = append(events, eventMap)
+			}
+
 			jsonItem := model.FlamegraphSpan{
 				SpanID:       item.SpanID,
+				TraceID:      item.TraceID,
 				ServiceName:  item.ServiceName,
 				Name:         item.Name,
 				DurationNano: item.DurationNano,
 				HasError:     item.HasError,
-				ParentSpanID: item.ParentSpanId,
+				References:   ref,
+				Events:       events,
 				Children:     make([]*model.FlamegraphSpan, 0),
 			}
 
+			if len(req.SelectFields) > 0 {
+				jsonItem.SetRequestedFields(item, req.SelectFields)
+			}
+
 			// metadata calculation
 			startTimeUnixNano := uint64(item.TimeUnixNano.UnixNano())
 			if startTime == 0 || startTimeUnixNano < startTime {
 				startTime = startTimeUnixNano
 			}
 			if endTime == 0 || (startTimeUnixNano+jsonItem.DurationNano) > endTime {
-				endTime = startTimeUnixNano + jsonItem.DurationNano
+				endTime = (startTimeUnixNano + jsonItem.DurationNano)
 			}
 			if durationNano == 0 || jsonItem.DurationNano > durationNano {
 				durationNano = jsonItem.DurationNano
@@ -1218,34 +1219,41 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 			jsonItem.TimeUnixNano = uint64(item.TimeUnixNano.UnixNano() / 1000000)
 			spanIdToSpanNodeMap[jsonItem.SpanID] = &jsonItem
 		}
-		skeletonSpans = nil
 
-		// build parent-child tree using parent_span_id; insert placeholders for missing parents
+		// traverse through the map and append each node to the children array of the parent node
+		// and add missing spans
 		for _, spanNode := range spanIdToSpanNodeMap {
-			if spanNode.ParentSpanID == "" {
-				traceRoots = append(traceRoots, spanNode)
-			} else if parentNode, exists := spanIdToSpanNodeMap[spanNode.ParentSpanID]; exists {
-				parentNode.Children = append(parentNode.Children, spanNode)
-			} else {
-				if _, alreadyCreated := spanIdToSpanNodeMap[spanNode.ParentSpanID]; !alreadyCreated {
-					missingSpan := &model.FlamegraphSpan{
-						SpanID:       spanNode.ParentSpanID,
-						Name:         "Missing Span",
-						TimeUnixNano: spanNode.TimeUnixNano,
-						DurationNano: spanNode.DurationNano,
-						Events:       make([]model.Event, 0),
-						Children:     make([]*model.FlamegraphSpan, 0),
+			hasParentSpanNode := false
+			for _, reference := range spanNode.References {
+				if reference.RefType == "CHILD_OF" && reference.SpanId != "" {
+					hasParentSpanNode = true
+					if parentNode, exists := spanIdToSpanNodeMap[reference.SpanId]; exists {
+						parentNode.Children = append(parentNode.Children, spanNode)
+					} else {
+						// insert the missing spans
+						missingSpan := model.FlamegraphSpan{
+							SpanID:       reference.SpanId,
+							TraceID:      spanNode.TraceID,
+							ServiceName:  "",
+							Name:         "Missing Span",
+							TimeUnixNano: spanNode.TimeUnixNano,
+							DurationNano: spanNode.DurationNano,
+							HasError:     false,
+							Events:       make([]model.Event, 0),
+							Children:     make([]*model.FlamegraphSpan, 0),
+						}
+						missingSpan.Children = append(missingSpan.Children, spanNode)
+						spanIdToSpanNodeMap[missingSpan.SpanID] = &missingSpan
+						traceRoots = append(traceRoots, &missingSpan)
 					}
-					spanIdToSpanNodeMap[missingSpan.SpanID] = missingSpan
-					traceRoots = append(traceRoots, missingSpan)
 				}
-				spanIdToSpanNodeMap[spanNode.ParentSpanID].Children = append(
-					spanIdToSpanNodeMap[spanNode.ParentSpanID].Children, spanNode)
+			}
+			if !hasParentSpanNode && !tracedetail.ContainsFlamegraphSpan(traceRoots, spanNode) {
+				traceRoots = append(traceRoots, spanNode)
 			}
 		}
 
 		selectedSpans = tracedetail.GetAllSpansForFlamegraph(traceRoots, spanIdToSpanNodeMap)
-		spanIdToSpanNodeMap = nil
 
 		// TODO: set the trace data (model.GetFlamegraphSpansForTraceCache) in cache here
 		// removed existing cache usage since it was not getting used due to this bug https://github.com/SigNoz/engineering-pod/issues/4648
@@ -1268,74 +1276,6 @@ func (r *ClickHouseReader) GetFlamegraphSpansForTrace(ctx context.Context, orgID
 	}
 	r.logger.Debug("getFlamegraphSpansForTrace: processing post cache", "duration", time.Since(processingPostCache), "traceID", traceID, "totalSpans", totalSpanCount, "limit", clientLimit)
 
-	// Pass 2: hydrate events and requested attribute fields only for the selected window spans.
-	// tsBucketStart is non-zero only when we performed a DB fetch (cache miss path).
-	if err != nil && tsBucketStart != 0 {
-		needsAttrMaps := false
-		needsResourceMap := false
-		for _, f := range req.SelectFields {
-			if f.FieldContext == telemetrytypes.FieldContextAttribute {
-				needsAttrMaps = true
-			}
-			if f.FieldContext == telemetrytypes.FieldContextResource {
-				needsResourceMap = true
-			}
-		}
-
-		selectedSpanIDs := make([]string, 0)
-		selectedSpanMap := make(map[string]*model.FlamegraphSpan)
-		for _, level := range selectedSpansForRequest {
-			for _, span := range level {
-				selectedSpanIDs = append(selectedSpanIDs, span.SpanID)
-				selectedSpanMap[span.SpanID] = span
-			}
-		}
-
-		if len(selectedSpanIDs) > 0 {
-			hydrateCols := "span_id, events"
-			if needsAttrMaps {
-				hydrateCols += ", attributes_string, attributes_number, attributes_bool"
-			}
-			if needsResourceMap {
-				hydrateCols += ", resources_string"
-			}
-			hydrateQuery := fmt.Sprintf(
-				"SELECT %s FROM %s.%s WHERE trace_id=@traceID AND ts_bucket_start>=@tsStart AND ts_bucket_start<=@tsEnd AND span_id IN @spanIDs",
-				hydrateCols, r.TraceDB, r.traceTableName)
-
-			var hydrateRows []model.SpanItemV2
-			if hydrateErr := r.db.Select(ctx, &hydrateRows, hydrateQuery,
-				clickhouse.Named("traceID", traceID),
-				clickhouse.Named("tsStart", tsBucketStart),
-				clickhouse.Named("tsEnd", tsBucketEnd),
-				clickhouse.Named("spanIDs", selectedSpanIDs),
-			); hydrateErr != nil {
-				r.logger.Error("Error in processing flamegraph hydration sql query", errorsV2.Attr(hydrateErr))
-				return nil, model.ExecutionError(fmt.Errorf("getFlamegraphSpansForTrace: error querying events: %w", hydrateErr))
-			}
-
-			for _, item := range hydrateRows {
-				span, ok := selectedSpanMap[item.SpanID]
-				if !ok {
-					continue
-				}
-				events := make([]model.Event, 0, len(item.Events))
-				for _, event := range item.Events {
-					var eventMap model.Event
-					if unmarshalErr := json.Unmarshal([]byte(event), &eventMap); unmarshalErr != nil {
-						r.logger.Error("Error unmarshalling events", errorsV2.Attr(unmarshalErr))
-						return nil, errorsV2.Newf(errorsV2.TypeInternal, errorsV2.CodeInternal, "getFlamegraphSpansForTrace: error in unmarshalling events %s", unmarshalErr.Error())
-					}
-					events = append(events, eventMap)
-				}
-				span.Events = events
-				if len(req.SelectFields) > 0 {
-					span.SetRequestedFields(item, req.SelectFields)
-				}
-			}
-		}
-	}
-
 	trace.Spans = selectedSpansForRequest
 	trace.StartTimestampMillis = startTime / 1000000
 	trace.EndTimestampMillis = endTime / 1000000

pkg/query-service/model/response.go

@@ -297,13 +297,14 @@ type FlamegraphSpan struct {
 	TimeUnixNano uint64            `json:"timestamp"`
 	DurationNano uint64            `json:"durationNano"`
 	SpanID       string            `json:"spanId"`
+	TraceID      string            `json:"traceId"`
 	HasError     bool              `json:"hasError"`
 	ServiceName  string            `json:"serviceName"`
 	Name         string            `json:"name"`
 	Level        int64             `json:"level"`
-	ParentSpanID string            `json:"parentSpanId"`
 	Events       []Event           `json:"event"`
-	Children     []*FlamegraphSpan `json:"-"`
+	References   []OtelSpanRef     `json:"references,omitempty"`
+	Children     []*FlamegraphSpan `json:"children"`
 	Attributes   map[string]any    `json:"attributes,omitempty"`
 	Resource     map[string]string `json:"resource,omitempty"`
 }

tests/e2e/helpers/dashboards.ts

@@ -3,6 +3,10 @@ import path from 'path';
 import type { APIRequestContext, Locator, Page } from '@playwright/test';
 
 import apmMetricsTemplate from '../testdata/apm-metrics.json';
+import queriesData from '../testdata/queries.json';
+
+export type SignalType = 'metrics' | 'logs' | 'traces';
+export type QueriesData = typeof queriesData;
 
 // ─── Constants ───────────────────────────────────────────────────────────
 //
@@ -177,3 +181,145 @@ export async function openDashboardActionMenu(
 	await icon.click();
 	return page.getByRole('tooltip');
 }
+
+// ─── Dashboard detail page helpers ──────────────────────────────────────────
+
+/**
+ * Click the Configure button (`data-testid="show-drawer"`) on a dashboard
+ * detail page and wait for the settings drawer (`.settings-container-root`) to
+ * be visible. Works from both the empty-state view and the populated toolbar —
+ * both render the same testid.
+ *
+ * Returns the drawer locator so callers can scope further assertions to it.
+ */
+export async function openDashboardSettingsDrawer(page: Page): Promise<Locator> {
+	await page.getByTestId('show-drawer').first().click();
+	const drawer = page.locator('.settings-container-root');
+	await drawer.waitFor({ state: 'visible' });
+	return drawer;
+}
+
+/**
+ * Click `data-testid="save-dashboard-config"` and wait for the resulting
+ * `PUT /api/v1/dashboards/<id>` response. The Save button is only rendered
+ * when there is at least one unsaved change — callers must ensure the drawer
+ * has been dirtied before calling this.
+ */
+export async function saveDashboardSettings(page: Page): Promise<void> {
+	const patchResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByTestId('save-dashboard-config').click();
+	await patchResponse;
+}
+
+/**
+ * Rename a dashboard via the toolbar options popover:
+ * opens the popover (`data-testid="options"`), clicks "Rename", fills the
+ * input, clicks "Rename Dashboard", and waits for the PUT response.
+ *
+ * Pre-condition: the caller must be on the dashboard detail page.
+ */
+export async function renameDashboardViaToolbar(
+	page: Page,
+	newTitle: string,
+): Promise<void> {
+	await page.getByTestId('options').click();
+	await page.getByRole('button', { name: 'Rename' }).click();
+
+	const modal = page.getByRole('dialog');
+	await modal.waitFor({ state: 'visible' });
+
+	const input = modal.getByTestId('dashboard-name');
+	await input.clear();
+	await input.fill(newTitle);
+
+	const patchResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByRole('button', { name: 'Rename Dashboard' }).click();
+	await patchResponse;
+
+	await modal.waitFor({ state: 'hidden' });
+}
+
+// ─── Add panel flow ─────────────────────────────────────────────────────────
+
+/**
+ * From the dashboard detail page (must already be loaded), drive the full
+ * "Add Panel" flow for the given signal type:
+ *   1. Click the empty-state `add-panel` CTA to open the New Panel modal.
+ *   2. Pick the Time Series panel type.
+ *   3. Fill the panel name in the right pane (drives the post-save assertion).
+ *   4. For metrics: type the metric name from `queries.json` into the metric
+ *      AutoComplete and select it from the dropdown. For logs/traces: switch
+ *      the data-source selector to LOGS / TRACES; default Query Builder state
+ *      is sufficient (queries.json query strings are empty by design).
+ *   5. Click Save Changes, confirm the modal, and wait for the
+ *      PUT /api/v1/dashboards/<id> response.
+ *
+ * Throws if the PUT response is not 2xx. After return, the page is back on
+ * the dashboard detail page; the caller asserts the panel rendered.
+ */
+export async function configureAndSavePanel(
+	page: Page,
+	signal: SignalType,
+	panelTitle: string,
+): Promise<void> {
+	await page.getByTestId('add-panel').click();
+
+	const newPanelModal = page
+		.getByRole('dialog')
+		.filter({ hasText: 'New Panel' });
+	await newPanelModal.waitFor({ state: 'visible' });
+	await newPanelModal.getByTestId('panel-type-graph').click();
+
+	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
+	await page.getByTestId('panel-name-input').fill(panelTitle);
+
+	if (signal === 'metrics') {
+		const metricName = queriesData.metrics.metricName;
+		// The testid is on the Ant Select wrapper <div>; the editable input
+		// lives inside it. Target the descendant input for fill().
+		const metricInput = page.getByTestId('metric-name-selector-0').locator('input');
+		await metricInput.click();
+		await metricInput.fill(metricName);
+		// AutoComplete debounces and fetches; wait for the option then click.
+		await page
+			.locator('.ant-select-item-option-content', { hasText: metricName })
+			.first()
+			.click();
+	} else {
+		// logs / traces — switch the data source. Default query is sufficient.
+		await page.getByTestId('query-data-source-selector-0').click();
+		await page
+			.locator('.ant-select-item-option-content', {
+				hasText: signal.toUpperCase(),
+			})
+			.click();
+	}
+
+	const putResponse = page.waitForResponse(
+		(r) =>
+			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+	);
+	await page.getByTestId('new-widget-save').click();
+
+	// Confirmation modal (title varies: "Save Widget" vs "Unsaved Changes" —
+	// don't assert title, just click OK on the topmost dialog).
+	const confirmModal = page.getByRole('dialog').last();
+	await confirmModal.waitFor({ state: 'visible' });
+	await confirmModal.getByRole('button', { name: /^OK$/i }).click();
+
+	const res = await putResponse;
+	if (!res.ok()) {
+		throw new Error(
+			`PUT /api/v1/dashboards failed ${res.status()}: ${await res.text()}`,
+		);
+	}
+
+	// Save navigates back to /dashboard/<id> (no /new suffix).
+	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
+}

tests/e2e/testdata/queries.json

@@ -0,0 +1,12 @@
+{
+    "logs": {
+        "query": ""
+    },
+    "metrics": {
+        "metricName": "signoz_calls_total",
+        "query": ""
+    },
+    "traces": {
+        "query": ""
+    }
+}

tests/e2e/tests/dashboards/create.spec.ts

@@ -0,0 +1,550 @@
+import path from 'path';
+import type { Page } from '@playwright/test';
+
+import { expect, test } from '../../fixtures/auth';
+import { newAdminContext } from '../../helpers/auth';
+import {
+	APM_METRICS_TITLE,
+	authToken,
+	configureAndSavePanel,
+	createDashboardViaApi,
+	deleteDashboardViaApi,
+	gotoDashboardsList,
+	openDashboardSettingsDrawer,
+	renameDashboardViaToolbar,
+	saveDashboardSettings,
+	SEARCH_PLACEHOLDER,
+} from '../../helpers/dashboards';
+
+// All tests mutate dashboard state (create / rename / delete). Run serially to
+// prevent cross-test interference on the list and detail pages.
+test.describe.configure({ mode: 'serial' });
+
+// ─── Suite-level seed registry ────────────────────────────────────────────────
+//
+// Every dashboard created by any test is registered here; one afterAll tears
+// them all down. Tests that don't create anything (TC-10, TC-11, TC-13) need
+// no cleanup entry.
+const seedIds = new Set<string>();
+const BASE_FIXTURE_TITLE = 'create-flow-base-fixture';
+
+const APM_METRICS_TESTDATA_PATH = path.resolve(
+	__dirname,
+	'../../testdata/apm-metrics.json',
+);
+
+async function seed(page: Page, title: string): Promise<string> {
+	const id = await createDashboardViaApi(page, title);
+	seedIds.add(id);
+	return id;
+}
+
+test.beforeAll(async ({ browser }) => {
+	// Seed one base dashboard so the list is non-empty and the
+	// `new-dashboard-cta` header button is rendered for all tests that
+	// drive the "New dashboard" dropdown from the list page.
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		seedIds.add(await createDashboardViaApi(page, BASE_FIXTURE_TITLE));
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.afterAll(async ({ browser }) => {
+	if (seedIds.size === 0) return;
+	const ctx = await newAdminContext(browser);
+	const page = await ctx.newPage();
+	try {
+		const token = await authToken(page);
+		for (const id of [...seedIds]) {
+			await deleteDashboardViaApi(ctx.request, id, token);
+			seedIds.delete(id);
+		}
+	} finally {
+		await ctx.close();
+	}
+});
+
+test.describe('Dashboard Create Flow', () => {
+	// ─── 1. Create Dashboard (blank) ─────────────────────────────────────────
+
+	test('TC-01 blank create lands on onboarding state with correct default title', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+
+		const postResponse = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
+		);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('create-dashboard-menu-cta').click();
+		const res = await postResponse;
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
+
+		expect(res.status()).toBeGreaterThanOrEqual(200);
+		expect(res.status()).toBeLessThan(300);
+		const body = (await res.json()) as {
+			data: { data: { title: string }; id: string };
+		};
+		expect(body.data.data.title).toBe('Sample Title');
+
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+		// DashboardDescription always renders dashboard-title even on blank dashboards.
+		await expect(page.getByTestId('dashboard-title')).toBeVisible();
+		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
+		await expect(page.getByText('Configure your new dashboard')).toBeVisible();
+		await expect(page.getByTestId('show-drawer').first()).toBeVisible();
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		// Register the UI-created dashboard for cleanup.
+		const id = body.data.id;
+		expect(id, 'POST response must include a dashboard id').toBeTruthy();
+		seedIds.add(id);
+	});
+
+	test('TC-02 configure drawer opens with Overview tab and pre-fills existing title', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc02');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+
+		// Overview tab is the default active tab.
+		await expect(drawer.getByRole('button', { name: 'Overview' })).toBeVisible();
+
+		const nameInput = drawer.getByTestId('dashboard-name');
+		await expect(nameInput).toHaveValue('create-flow-tc02');
+
+		const descInput = drawer.getByTestId('dashboard-desc');
+		await expect(descInput).toBeVisible();
+		await expect(descInput).toHaveValue('');
+
+		await expect(
+			drawer.getByPlaceholder('Start typing your tag name'),
+		).toBeVisible();
+
+		// Ant Drawer does not close on Escape — use the X close button in the header.
+		await drawer.getByRole('button', { name: 'Close' }).click();
+		await expect(drawer).not.toHaveClass(/ant-drawer-open/);
+	});
+
+	test('TC-03 rename title, add description and tags, save persists to list', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc03-original');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+
+		const nameInput = drawer.getByTestId('dashboard-name');
+		await nameInput.clear();
+		await nameInput.fill('create-flow-tc03-renamed');
+		await expect(drawer.getByText(/1 unsaved change/)).toBeVisible();
+
+		await drawer.getByTestId('dashboard-desc').fill('A test description');
+		await expect(drawer.getByText(/2 unsaved changes/)).toBeVisible();
+
+		const tagInput = drawer.getByPlaceholder('Start typing your tag name');
+		await tagInput.click();
+		await tagInput.fill('e2e-tag');
+		await page.keyboard.press('Enter');
+		await expect(drawer.getByText(/3 unsaved changes/)).toBeVisible();
+
+		// Click save and wait for the unsaved-changes footer to disappear — the
+		// footer only clears after the PUT success callback re-syncs local state.
+		await page.getByTestId('save-dashboard-config').click();
+		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
+
+		await drawer.getByRole('button', { name: 'Close' }).click();
+
+		// Renamed dashboard appears in the list.
+		await gotoDashboardsList(page);
+		const searchInput = page.getByPlaceholder(SEARCH_PLACEHOLDER);
+		await searchInput.fill('create-flow-tc03-renamed');
+		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
+
+		// Tag search also surfaces the renamed dashboard.
+		await searchInput.fill('e2e-tag');
+		await expect(page.getByText('create-flow-tc03-renamed').first()).toBeVisible();
+	});
+
+	test('TC-04 discard reverts unsaved changes without API call', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc04');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+
+		const nameInput = drawer.getByTestId('dashboard-name');
+		await nameInput.clear();
+		await nameInput.fill('create-flow-tc04-discarded');
+		await drawer.getByTestId('dashboard-desc').fill('discarded desc');
+		await expect(drawer.getByText(/unsaved change/)).toBeVisible();
+
+		// Intercept any PUT to detect an unwanted save.
+		let patchFired = false;
+		await page.route(/\/api\/v1\/dashboards\//, (route) => {
+			if (route.request().method() === 'PUT') {
+				patchFired = true;
+			}
+			route.continue();
+		});
+
+		await drawer.getByRole('button', { name: 'Discard' }).click();
+
+		await expect(drawer.getByText(/unsaved change/)).not.toBeVisible();
+		await expect(nameInput).toHaveValue('create-flow-tc04');
+		await expect(drawer.getByTestId('dashboard-desc')).toHaveValue('');
+		expect(patchFired).toBe(false);
+	});
+
+	test('TC-05 rename via toolbar options popover persists to the toolbar title', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc05');
+		await page.goto(`/dashboard/${id}`);
+
+		// DashboardDescription toolbar always renders — even on blank dashboards.
+		await expect(page.getByTestId('options')).toBeVisible();
+
+		await renameDashboardViaToolbar(page, 'create-flow-tc05-renamed');
+
+		await expect(page.getByTestId('dashboard-title')).toHaveText(
+			'create-flow-tc05-renamed',
+		);
+	});
+
+	// ─── 2. Variables ─────────────────────────────────────────────────────────
+
+	test('TC-06 add a Custom variable, verify it appears in the variables bar', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc06');
+		await page.goto(`/dashboard/${id}`);
+
+		const drawer = await openDashboardSettingsDrawer(page);
+		await drawer.getByRole('button', { name: 'Variables' }).click();
+
+		await drawer.getByTestId('add-new-variable').click();
+		await expect(drawer.getByRole('button', { name: 'All variables' })).toBeVisible();
+
+		await drawer
+			.getByPlaceholder('Unique name of the variable')
+			.fill('env');
+
+		await drawer.getByRole('button', { name: 'Custom' }).click();
+
+		// After selecting "Custom" type, the Options collapse panel contains a
+		// textarea with placeholder "Enter options separated by commas."
+		const customInput = drawer.getByPlaceholder(
+			'Enter options separated by commas.',
+		);
+		await customInput.fill('prod,staging,dev');
+
+		const patchResponse = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+		);
+		await drawer.getByRole('button', { name: 'Save Variable' }).click();
+		const res = await patchResponse;
+		expect(res.status()).toBeGreaterThanOrEqual(200);
+		expect(res.status()).toBeLessThan(300);
+
+		// After saving, the variable form disappears and the table row is visible.
+		await expect(drawer.getByRole('button', { name: 'All variables' })).not.toBeVisible();
+		await expect(drawer.getByText('env')).toBeVisible();
+
+		// Close the drawer via its X button and check the variables bar.
+		await drawer.getByRole('button', { name: 'Close' }).click();
+		await expect(page.locator('.dashboard-variables')).toBeVisible();
+	});
+
+	test('TC-07 duplicate variable name is rejected inline', async ({
+		authedPage: page,
+	}) => {
+		// Seed a dashboard that already has a variable named 'env'.
+		const id = await seed(page, 'create-flow-tc07');
+		await page.goto(`/dashboard/${id}`);
+
+		// Use the UI to add the first variable so the state is real.
+		const drawer = await openDashboardSettingsDrawer(page);
+		await drawer.getByRole('button', { name: 'Variables' }).click();
+		await drawer.getByTestId('add-new-variable').click();
+		await drawer.getByPlaceholder('Unique name of the variable').fill('env');
+		await drawer.getByRole('button', { name: 'Custom' }).click();
+		await drawer
+			.getByPlaceholder('Enter options separated by commas.')
+			.fill('prod');
+		const firstSave = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
+		);
+		await drawer.getByRole('button', { name: 'Save Variable' }).click();
+		await firstSave;
+
+		// Now try to add a second variable with the same name.
+		await drawer.getByTestId('add-new-variable').click();
+		const nameInput = drawer.getByPlaceholder('Unique name of the variable');
+		await nameInput.fill('env');
+
+		await expect(
+			drawer.getByText('Variable name already exists'),
+		).toBeVisible();
+		await expect(
+			drawer.getByRole('button', { name: 'Save Variable' }),
+		).toBeDisabled();
+	});
+
+	// ─── 3. Import JSON ───────────────────────────────────────────────────────
+	//
+	// TC-08 and TC-12 are merged: TC-08 covers the POST contract and navigation;
+	// the merged test also navigates back to the list and verifies metadata
+	// surfacing (the TC-12 concern). This avoids two identical import flows.
+
+	test('TC-08 import via file upload creates dashboard, navigates to detail, and surfaces metadata in list', async ({
+		authedPage: page,
+	}) => {
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
+		await expect(dialog).toBeVisible();
+
+		const postResponse = page.waitForResponse(
+			(r) =>
+				r.request().method() === 'POST' && /\/api\/v1\/dashboards/.test(r.url()),
+		);
+		await dialog.locator('input[type="file"]').setInputFiles(APM_METRICS_TESTDATA_PATH);
+		await dialog.getByRole('button', { name: 'Import and Next' }).click();
+		const res = await postResponse;
+
+		expect(res.status()).toBeGreaterThanOrEqual(200);
+		expect(res.status()).toBeLessThan(300);
+
+		await page.waitForURL(/\/dashboard\/[0-9a-f-]+/);
+
+		// Register for cleanup.
+		const urlMatch = page.url().match(/\/dashboard\/([0-9a-f-]+)/);
+		expect(urlMatch, 'URL must contain dashboard ID').not.toBeNull();
+		seedIds.add(urlMatch![1]);
+
+		await expect(page.getByTestId('dashboard-title')).toHaveText(APM_METRICS_TITLE);
+
+		// Navigate back and confirm the imported dashboard surfaces in the list
+		// with at least one tag chip (TC-12 coverage).
+		await gotoDashboardsList(page);
+		await page.getByPlaceholder(SEARCH_PLACEHOLDER).fill(APM_METRICS_TITLE);
+		await expect(page.getByText(APM_METRICS_TITLE).first()).toBeVisible();
+		// The apm-metrics fixture has tags ['apm', 'latency', 'error rate', 'throughput'].
+		await expect(page.getByText('apm').first()).toBeVisible();
+	});
+
+	// TC-09 (Monaco paste path) is intentionally dropped — the file-upload
+	// path (TC-08) exercises the same populate-editor-then-import code path.
+	// Keyboard-typing large JSON into Monaco is unreliable in headless CI.
+
+	test('TC-10 invalid JSON via file upload shows "Invalid JSON" error', async ({
+		authedPage: page,
+	}) => {
+		// No dashboard is created by this test — no cleanup entry needed.
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
+		await expect(dialog).toBeVisible();
+
+		await dialog.locator('input[type="file"]').setInputFiles({
+			name: 'bad.json',
+			mimeType: 'application/json',
+			buffer: Buffer.from('not valid json {'),
+		});
+
+		await expect(dialog.getByText('Invalid JSON')).toBeVisible();
+		await expect(dialog).toBeVisible();
+
+		// Clicking "Import and Next" with invalid content should surface an error
+		// and keep the dialog open.
+		await dialog.getByRole('button', { name: 'Import and Next' }).click();
+		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+		await expect(dialog).toBeVisible();
+	});
+
+	test('TC-11 import with empty editor clicking Import and Next shows error', async ({
+		authedPage: page,
+	}) => {
+		// No dashboard is created — no cleanup entry needed.
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+		await page.getByTestId('import-json-menu-cta').click();
+
+		const dialog = page.getByRole('dialog').filter({ hasText: 'Import Dashboard JSON' });
+		await expect(dialog).toBeVisible();
+
+		await dialog.getByRole('button', { name: 'Import and Next' }).click();
+
+		await expect(dialog.getByText('Error loading JSON file')).toBeVisible();
+		await expect(dialog).toBeVisible();
+		await expect(page).not.toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+	});
+
+	// ─── 4. View Templates ────────────────────────────────────────────────────
+
+	test('TC-13 View templates menu item is an external link targeting a new tab', async ({
+		authedPage: page,
+	}) => {
+		// No dashboard is created — no cleanup entry needed.
+		// The assertion guards against the link being silently changed to an
+		// in-app modal or a different URL (the DashboardTemplatesModal exists in
+		// source but is never triggered from this menu item).
+		await gotoDashboardsList(page);
+		await page.getByTestId('new-dashboard-cta').click();
+
+		const link = page.getByTestId('view-templates-menu-cta');
+		await expect(link).toBeVisible();
+
+		await expect(link).toHaveAttribute(
+			'href',
+			/signoz\.io\/docs\/dashboards\/dashboard-templates/,
+		);
+		await expect(link).toHaveAttribute('target', '_blank');
+		await expect(link).toHaveAttribute('rel', /noopener/);
+	});
+
+	// ─── 5. Post-Create Dashboard Detail — Panel Addition ────────────────────
+
+	test('TC-14 New Panel modal opens and selecting Time Series navigates to widget editor', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc14');
+		await page.goto(`/dashboard/${id}`);
+
+		await expect(page.getByText('Welcome to your new dashboard')).toBeVisible();
+
+		await page.getByTestId('add-panel').click();
+		// PANEL_TYPES enum: TIME_SERIES='graph', VALUE='value', TABLE='table'
+		// — the testid is panel-type-<enum-value>, not panel-type-<enum-name>.
+		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
+		await expect(modal).toBeVisible();
+
+		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
+		await expect(modal.getByTestId('panel-type-value')).toBeVisible();
+		await expect(modal.getByTestId('panel-type-table')).toBeVisible();
+
+		await modal.getByTestId('panel-type-graph').click();
+		await expect(page).toHaveURL(/graphType=graph/);
+	});
+
+	test('TC-15 New Panel button from toolbar header opens the same panel type modal', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc15');
+		await page.goto(`/dashboard/${id}`);
+
+		// The toolbar "New Panel" button (add-panel-header) is present even on
+		// a blank dashboard, alongside the empty-state "add-panel" button.
+		await expect(page.getByTestId('add-panel-header')).toBeVisible();
+		await page.getByTestId('add-panel-header').click();
+
+		const modal = page.getByRole('dialog').filter({ hasText: 'New Panel' });
+		await expect(modal).toBeVisible();
+		await expect(modal.getByTestId('panel-type-graph')).toBeVisible();
+
+		// Click the modal X button to close (Escape also works but may conflict
+		// with the Enterprise modal in the background; explicit click is more reliable).
+		await modal.getByRole('button', { name: 'Close' }).click();
+		await expect(modal).not.toBeVisible();
+	});
+
+	// ─── 6. Cancellation and Navigation Away ─────────────────────────────────
+
+	test('TC-16 browser Back from dashboard detail returns to list with URL preserved', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc16');
+
+		await page.goto(`/dashboard?search=create-flow-tc16`);
+		await page
+			.getByRole('heading', { name: 'Dashboards', level: 1 })
+			.waitFor({ state: 'visible' });
+
+		await page.getByAltText('dashboard-image').first().click();
+		await expect(page).toHaveURL(/\/dashboard\/[0-9a-f-]+/);
+
+		await page.goBack();
+		await expect(page).toHaveURL(/search=create-flow-tc16/);
+		await expect(
+			page.getByPlaceholder(SEARCH_PLACEHOLDER),
+		).toHaveValue('create-flow-tc16');
+	});
+
+	test('TC-17 navigating away with the settings drawer open does not crash', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'create-flow-tc17');
+		await page.goto(`/dashboard/${id}`);
+
+		await openDashboardSettingsDrawer(page);
+
+		// Navigate away without closing the drawer.
+		await page.goto('/dashboard');
+		await expect(page).toHaveURL(/\/dashboard($|\?)/);
+		await expect(
+			page.getByRole('heading', { name: 'Dashboards', level: 1 }),
+		).toBeVisible();
+		// No error overlay should be present.
+		await expect(
+			page.getByRole('alert').filter({ hasText: /error/i }),
+		).toHaveCount(0);
+	});
+
+	// ─── 7. Add Panel — end-to-end per signal ────────────────────────────────
+	//
+	// TC-14/TC-15 verify the New Panel modal opens and routes to the widget
+	// editor. The TCs below go further: configure a query for each signal
+	// using values from testdata/queries.json, save the panel, return to the
+	// dashboard, and verify the panel card renders.
+
+	test('TC-18 add metrics Time Series panel using signoz_calls_total from queries.json', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'add-panel-metrics');
+		await page.goto(`/dashboard/${id}`);
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		await configureAndSavePanel(page, 'metrics', 'metrics-timeseries');
+
+		await expect(page.getByTestId('metrics-timeseries')).toBeVisible();
+	});
+
+	test('TC-19 add logs Time Series panel with default query from queries.json', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'add-panel-logs');
+		await page.goto(`/dashboard/${id}`);
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		await configureAndSavePanel(page, 'logs', 'logs-timeseries');
+
+		await expect(page.getByTestId('logs-timeseries')).toBeVisible();
+	});
+
+	test('TC-20 add traces Time Series panel with default query from queries.json', async ({
+		authedPage: page,
+	}) => {
+		const id = await seed(page, 'add-panel-traces');
+		await page.goto(`/dashboard/${id}`);
+		await expect(page.getByTestId('add-panel')).toBeVisible();
+
+		await configureAndSavePanel(page, 'traces', 'traces-timeseries');
+
+		await expect(page.getByTestId('traces-timeseries')).toBeVisible();
+	});
+});