fix: lint issues

Co-authored-by: Tushar Vats <tushar@signoz.io>

frontend/src/components/ValueGraph/index.tsx

@@ -93,7 +93,6 @@ function ValueGraph({
 		<div
 			ref={containerRef}
 			className="value-graph-container"
-			data-testid="value-graph-container"
 			style={{
 				backgroundColor:
 					threshold.thresholdFormat === 'Background'

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -98,11 +98,7 @@ function YAxisUnitSelector({
 				{categoriesToRender.map((category) => (
 					<Select.OptGroup key={category.name} label={category.name}>
 						{category.units.map((unit) => (
-							<Select.Option
-								key={unit.id}
-								value={unit.id}
-								data-testid={`unit-option-${unit.id}`}
-							>
+							<Select.Option key={unit.id} value={unit.id}>
 								{unit.name}
 							</Select.Option>
 						))}

frontend/src/container/GridTableComponent/index.tsx

@@ -159,8 +159,6 @@ function GridTableComponent({
 				if (threshold && idx !== -1) {
 					return (
 						<div
-							data-testid="threshold-styled-cell"
-							data-threshold-format={threshold.thresholdFormat}
 							style={
 								threshold.thresholdFormat === 'Background'
 									? { backgroundColor: threshold.thresholdColor }

frontend/src/container/NewWidget/RightContainer/Threshold/Threshold.tsx

@@ -231,14 +231,12 @@ function Threshold({
 							type="text"
 							icon={<Pencil size={14} />}
 							className="edit-btn"
-							data-testid="threshold-edit-btn"
 							onClick={editHandler}
 						/>
 						<Button
 							type="text"
 							icon={<Trash2 size={14} />}
 							className="delete-btn"
-							data-testid="threshold-delete-btn"
 							onClick={deleteHandler}
 						/>
 					</div>

pkg/querier/builder_query.go

@@ -265,6 +265,15 @@ func (q *builderQuery[T]) executeWithContext(ctx context.Context, query string,
 		return nil, err
 	}
 
+	// TODO: This should move to readAsRaw function in consume.go but for now we are keeping it here since it's only relevant for traces
+	if q.spec.Signal == telemetrytypes.SignalTraces {
+		if raw, ok := payload.(*qbtypes.RawData); ok {
+			for _, rr := range raw.Rows {
+				mergeSpanAttributeColumns(rr.Data)
+			}
+		}
+	}
+
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,

pkg/querier/consume.go

@@ -13,6 +13,7 @@ import (
 
 	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 )
 
@@ -431,6 +432,53 @@ func readAsRaw(rows driver.Rows, queryName string) (*qbtypes.RawData, error) {
 	}, nil
 }
 
+// mergeSpanAttributeColumns merges (attributes_string, attributes_number, attributes_bool, resources_string) into
+// unified "attributes" and "resource" keys, and parses the stringified `events`
+// and `links` columns into structured slices. Raw DB columns are removed.
+func mergeSpanAttributeColumns(data map[string]any) {
+	attrStr, hasStr := data["attributes_string"]
+	attrNum, hasNum := data["attributes_number"]
+	attrBool, hasBool := data["attributes_bool"]
+	// todo(nitya): move to resource json
+	resStr, hasRes := data["resources_string"]
+	if hasStr || hasNum || hasBool || hasRes {
+		attributes := make(map[string]any)
+		if m, ok := attrStr.(map[string]string); ok {
+			for k, v := range m {
+				attributes[k] = v
+			}
+		}
+		if m, ok := attrNum.(map[string]float64); ok {
+			for k, v := range m {
+				attributes[k] = v
+			}
+		}
+		if m, ok := attrBool.(map[string]bool); ok {
+			for k, v := range m {
+				attributes[k] = v
+			}
+		}
+		delete(data, "attributes_string")
+		delete(data, "attributes_number")
+		delete(data, "attributes_bool")
+		data["attributes"] = attributes
+
+		resource := map[string]string{}
+		if m, ok := resStr.(map[string]string); ok {
+			resource = m
+		}
+		data["resource"] = resource
+		delete(data, "resources_string")
+	}
+
+	if raw, ok := data["events"]; ok {
+		data["events"] = spantypes.ParseEvents(raw)
+	}
+	if raw, ok := data["links"]; ok {
+		data["links"] = spantypes.ParseLinks(raw)
+	}
+}
+
 // numericAsFloat converts numeric types to float64 efficiently.
 func numericAsFloat(v any) float64 {
 	switch x := v.(type) {

pkg/querier/consume_test.go

@@ -0,0 +1,91 @@
+package querier
+
+import (
+	"reflect"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/types/spantypes"
+)
+
+func TestMergeSpanAttributeColumns_ParsesEventsAndLinks(t *testing.T) {
+	data := map[string]any{
+		"attributes_string": map[string]string{"http.method": "GET"},
+		"attributes_number": map[string]float64{"http.status_code": 200},
+		"attributes_bool":   map[string]bool{"is_root": true},
+		"resources_string":  map[string]string{"service.name": "api"},
+		"events": []string{
+			`{"name":"request_received","timeUnixNano":1778489782759245000,"attributeMap":{"http.method":"GET","http.route":"/api/chat"}}`,
+			`{"name":"cache_lookup","timeUnixNano":1778489782811697000,"attributeMap":{"cache.hit":"true","cache.key":"user:123:prompt"}}`,
+		},
+		"links": `[{"traceId":"abc","spanId":"123","refType":"CHILD_OF"},{"traceId":"def","spanId":"456","refType":"FOLLOWS_FROM"}]`,
+	}
+
+	mergeSpanAttributeColumns(data)
+
+	attrs, ok := data["attributes"].(map[string]any)
+	if !ok {
+		t.Fatalf("expected attributes to be map[string]any, got %T", data["attributes"])
+	}
+	if attrs["http.method"] != "GET" || attrs["http.status_code"] != float64(200) || attrs["is_root"] != true {
+		t.Fatalf("attributes not merged correctly: %#v", attrs)
+	}
+
+	res, ok := data["resource"].(map[string]string)
+	if !ok || res["service.name"] != "api" {
+		t.Fatalf("resource not set correctly: %#v", data["resource"])
+	}
+
+	for _, removed := range []string{"attributes_string", "attributes_number", "attributes_bool", "resources_string"} {
+		if _, present := data[removed]; present {
+			t.Fatalf("expected %s to be removed", removed)
+		}
+	}
+
+	events, ok := data["events"].([]spantypes.Event)
+	if !ok {
+		t.Fatalf("expected events to be []spantypes.Event, got %T", data["events"])
+	}
+	wantEvents := []spantypes.Event{
+		{
+			Name:         "request_received",
+			TimeUnixNano: 1778489782759245000,
+			Attributes:   map[string]any{"http.method": "GET", "http.route": "/api/chat"},
+		},
+		{
+			Name:         "cache_lookup",
+			TimeUnixNano: 1778489782811697000,
+			Attributes:   map[string]any{"cache.hit": "true", "cache.key": "user:123:prompt"},
+		},
+	}
+	if !reflect.DeepEqual(events, wantEvents) {
+		t.Fatalf("events parsed incorrectly:\n got:  %#v\nwant: %#v", events, wantEvents)
+	}
+
+	links, ok := data["links"].([]spantypes.Link)
+	if !ok {
+		t.Fatalf("expected links to be []spantypes.Link, got %T", data["links"])
+	}
+	wantLinks := []spantypes.Link{
+		{TraceID: "abc", SpanID: "123"},
+		{TraceID: "def", SpanID: "456"},
+	}
+	if !reflect.DeepEqual(links, wantLinks) {
+		t.Fatalf("links parsed incorrectly:\n got:  %#v\nwant: %#v", links, wantLinks)
+	}
+}
+
+func TestMergeSpanAttributeColumns_EmptyEventsAndLinks(t *testing.T) {
+	data := map[string]any{
+		"events": []string{},
+		"links":  "[]",
+	}
+
+	mergeSpanAttributeColumns(data)
+
+	if events, ok := data["events"].([]spantypes.Event); !ok || len(events) != 0 {
+		t.Fatalf("expected empty []spantypes.Event, got %#v", data["events"])
+	}
+	if links, ok := data["links"].([]spantypes.Link); !ok || len(links) != 0 {
+		t.Fatalf("expected empty []spantypes.Link, got %#v", data["links"])
+	}
+}

pkg/querier/trace_operator_query.go

@@ -85,6 +85,13 @@ func (q *traceOperatorQuery) executeWithContext(ctx context.Context, query strin
 		return nil, err
 	}
 
+	// TODO: This should move to readAsRaw function in consume.go but for now we can keep it here since it's only relevant for traces
+	if raw, ok := payload.(*qbtypes.RawData); ok {
+		for _, rr := range raw.Rows {
+			mergeSpanAttributeColumns(rr.Data)
+		}
+	}
+
 	return &qbtypes.Result{
 		Type:  q.kind,
 		Value: payload,

pkg/telemetrytraces/const.go

@@ -1,6 +1,50 @@
 package telemetrytraces
 
-import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+import (
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+)
+
+const (
+
+	// Internal Columns.
+	SpanTimestampBucketStartColumn = "ts_bucket_start"
+	SpanResourceFingerPrintColumn  = "resource_fingerprint"
+
+	// Intrinsic Columns.
+	SpanTimestampColumn        = "timestamp"
+	SpanTraceIDColumn          = "trace_id"
+	SpanSpanIDColumn           = "span_id"
+	SpanTraceStateColumn       = "trace_state"
+	SpanParentSpanIDColumn     = "parent_span_id"
+	SpanFlagsColumn            = "flags"
+	SpanNameColumn             = "name"
+	SpanKindColumn             = "kind"
+	SpanKindStringColumn       = "kind_string"
+	SpanDurationNanoColumn     = "duration_nano"
+	SpanStatusCodeColumn       = "status_code"
+	SpanStatusMessageColumn    = "status_message"
+	SpanStatusCodeStringColumn = "status_code_string"
+	SpanEventsColumn           = "events"
+	SpanLinksColumn            = "links"
+
+	// Calculated Columns.
+	SpanResponseStatusCodeColumn = "response_status_code"
+	SpanExternalHTTPURLColumn    = "external_http_url"
+	SpanHTTPURLColumn            = "http_url"
+	SpanExternalHTTPMethodColumn = "external_http_method"
+	SpanHTTPMethodColumn         = "http_method"
+	SpanHTTPHostColumn           = "http_host"
+	SpanDBNameColumn             = "db_name"
+	SpanDBOperationColumn        = "db_operation"
+	SpanHasErrorColumn           = "has_error"
+	SpanIsRemoteColumn           = "is_remote"
+
+	// Contextual Columns.
+	SpanAttributesStringColumn = "attributes_string"
+	SpanAttributesNumberColumn = "attributes_number"
+	SpanAttributesBoolColumn   = "attributes_bool"
+	SpanResourcesStringColumn  = "resources_string"
+)
 
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{
@@ -334,6 +378,51 @@ var (
 	SpanSearchScopeRoot       = "isroot"
 	SpanSearchScopeEntryPoint = "isentrypoint"
 
+	// IntrinsicSpanFields lists the intrinsic span columns, in the order they
+	// should appear when a raw query expands its SelectFields.
+	IntrinsicSpanFields = []telemetrytypes.TelemetryFieldKey{
+		{Name: SpanTimestampColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanTraceIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanTraceStateColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanParentSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanFlagsColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanNameColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanKindColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanKindStringColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanDurationNanoColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanStatusCodeColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanStatusMessageColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanStatusCodeStringColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanEventsColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanLinksColumn, FieldContext: telemetrytypes.FieldContextSpan},
+	}
+
+	// CalculatedSpanFields lists the calculated/derived span columns, in the
+	// order they should appear when a raw query expands its SelectFields.
+	CalculatedSpanFields = []telemetrytypes.TelemetryFieldKey{
+		{Name: SpanResponseStatusCodeColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanExternalHTTPURLColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanHTTPURLColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanExternalHTTPMethodColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanHTTPMethodColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanHTTPHostColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanDBNameColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanDBOperationColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanHasErrorColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanIsRemoteColumn, FieldContext: telemetrytypes.FieldContextSpan},
+	}
+
+	// ContextualSpanColumns lists the typed attribute and resource columns
+	// selected raw (rather than via ColumnExpressionFor) so that consume.go
+	// can merge them into unified "attributes" and "resource" maps.
+	ContextualSpanColumns = []string{
+		SpanAttributesStringColumn,
+		SpanAttributesNumberColumn,
+		SpanAttributesBoolColumn,
+		SpanResourcesStringColumn,
+	}
+
 	DefaultFields = map[string]telemetrytypes.TelemetryFieldKey{
 		"timestamp": {
 			Name:          "timestamp",

pkg/telemetrytraces/field_mapper_test.go

@@ -78,6 +78,17 @@ func TestGetFieldKeyName(t *testing.T) {
 			expectedResult: "multiIf(resource.`deployment.environment` IS NOT NULL, resource.`deployment.environment`::String, `resource_string_deployment$$environment_exists`==true, `resource_string_deployment$$environment`, NULL)",
 			expectedError:  nil,
 		},
+		{
+			// Query like `attribute.attribute_string:string` should resolve to `attributes_string['attribute_string']`.
+			name: "Attribute key whose name collides with contextual map column resolves as a map lookup",
+			key: telemetrytypes.TelemetryFieldKey{
+				Name:          SpanAttributesStringColumn,
+				FieldContext:  telemetrytypes.FieldContextAttribute,
+				FieldDataType: telemetrytypes.FieldDataTypeString,
+			},
+			expectedResult: "attributes_string['attributes_string']",
+			expectedError:  nil,
+		},
 		{
 			name: "Non-existent column",
 			key: telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/statement_builder.go

@@ -4,7 +4,6 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
-	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -16,7 +15,6 @@ import (
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
-	"golang.org/x/exp/maps"
 )
 
 var (
@@ -89,40 +87,13 @@ func (b *traceQueryStatementBuilder) Build(
 		return nil, err
 	}
 
-	/*
-		Adding a tech debt note here:
-		This piece of code is a hot fix and should be removed once we close issue: engineering-pod/issues/3622
-	*/
-	/*
-		-------------------------------- Start of tech debt ----------------------------
-	*/
+	isSelectFieldsEmpty := false
 	if requestType == qbtypes.RequestTypeRaw {
-
-		selectedFields := query.SelectFields
-
-		if len(selectedFields) == 0 {
-			sortedKeys := maps.Keys(DefaultFields)
-			slices.Sort(sortedKeys)
-			for _, key := range sortedKeys {
-				selectedFields = append(selectedFields, DefaultFields[key])
-			}
-			query.SelectFields = selectedFields
-		}
-
-		selectFieldKeys := []string{}
-		for _, field := range selectedFields {
-			selectFieldKeys = append(selectFieldKeys, field.Name)
-		}
-
-		for _, x := range []string{"timestamp", "span_id", "trace_id"} {
-			if !slices.Contains(selectFieldKeys, x) {
-				query.SelectFields = append(query.SelectFields, DefaultFields[x])
-			}
-		}
+		isSelectFieldsEmpty = len(query.SelectFields) == 0
+		// we are expanding here to ensure that all the conflicts are taken care in adjustKeys
+		// i.e if there is a conflict we strip away context of the key in adjustKeys
+		query = b.expandRawSelectFields(query)
 	}
-	/*
-		-------------------------------- End of tech debt ----------------------------
-	*/
 
 	query = b.adjustKeys(ctx, keys, query, requestType)
 
@@ -131,7 +102,7 @@ func (b *traceQueryStatementBuilder) Build(
 
 	switch requestType {
 	case qbtypes.RequestTypeRaw:
-		return b.buildListQuery(ctx, q, query, start, end, keys, variables)
+		return b.buildListQuery(ctx, q, query, start, end, keys, variables, isSelectFieldsEmpty)
 	case qbtypes.RequestTypeTimeSeries:
 		return b.buildTimeSeriesQuery(ctx, q, query, start, end, keys, variables)
 	case qbtypes.RequestTypeScalar:
@@ -295,6 +266,7 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 	start, end uint64,
 	keys map[string][]*telemetrytypes.TelemetryFieldKey,
 	variables map[string]qbtypes.VariableItem,
+	isSelectFieldsEmpty bool,
 ) (*qbtypes.Statement, error) {
 
 	var (
@@ -309,7 +281,6 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		cteArgs = append(cteArgs, args)
 	}
 
-	// TODO: should we deprecate `SelectFields` and return everything from a span like we do for logs?
 	for _, field := range query.SelectFields {
 		colExpr, err := b.fm.ColumnExpressionFor(ctx, start, end, &field, keys)
 		if err != nil {
@@ -318,6 +289,12 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		sb.SelectMore(colExpr)
 	}
 
+	if isSelectFieldsEmpty {
+		for _, col := range ContextualSpanColumns {
+			sb.SelectMore(col)
+		}
+	}
+
 	// From table
 	sb.From(fmt.Sprintf("%s.%s", DBName, SpanIndexV3TableName))
 
@@ -844,3 +821,30 @@ func (b *traceQueryStatementBuilder) buildResourceFilterCTE(
 		variables,
 	)
 }
+
+// expandRawSelectFields populates SelectFields for raw (list view) queries.
+// It must be called before adjustKeys so that normalization runs over the full set.
+func (b *traceQueryStatementBuilder) expandRawSelectFields(query qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation]) qbtypes.QueryBuilderQuery[qbtypes.TraceAggregation] {
+	if len(query.SelectFields) == 0 {
+		selectFields := make([]telemetrytypes.TelemetryFieldKey, 0, len(IntrinsicSpanFields)+len(CalculatedSpanFields))
+		selectFields = append(selectFields, IntrinsicSpanFields...)
+		selectFields = append(selectFields, CalculatedSpanFields...)
+		query.SelectFields = selectFields
+		return query
+	}
+
+	selectFields := []telemetrytypes.TelemetryFieldKey{
+		{Name: SpanTimestampColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanTraceIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
+		{Name: SpanSpanIDColumn, FieldContext: telemetrytypes.FieldContextSpan},
+	}
+	for _, field := range query.SelectFields {
+		// TODO(tvats): If a user specifies attribute.timestamp in the select fields, this loop will basically ignore it, as we already added a field by default. This can be fixed once we close https://github.com/SigNoz/engineering-pod/issues/3693
+		if field.Name == SpanTimestampColumn || field.Name == SpanTraceIDColumn || field.Name == SpanSpanIDColumn {
+			continue
+		}
+		selectFields = append(selectFields, field)
+	}
+	query.SelectFields = selectFields
+	return query
+}

pkg/telemetrytraces/stmt_builder_test.go

@@ -439,7 +439,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				},
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, duration_nano AS `duration_nano`, `attribute_number_cart$$items_count` AS `cart.items_count`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, duration_nano AS `duration_nano`, `attribute_number_cart$$items_count` AS `cart.items_count` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -468,7 +468,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY attributes_string['user.id'] AS `user.id` desc LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY attributes_string['user.id'] AS `user.id` desc LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -512,7 +512,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, response_status_code AS `responseStatusCode`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, response_status_code AS `responseStatusCode` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -556,7 +556,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, multiIf(toString(`attribute_string_mixed$$materialization$$key`) != '', toString(`attribute_string_mixed$$materialization$$key`), toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)) != '', toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)), NULL) AS `mixed.materialization.key`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, multiIf(toString(`attribute_string_mixed$$materialization$$key`) != '', toString(`attribute_string_mixed$$materialization$$key`), toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)) != '', toString(multiIf(resource.`mixed.materialization.key` IS NOT NULL, resource.`mixed.materialization.key`::String, mapContains(resources_string, 'mixed.materialization.key'), resources_string['mixed.materialization.key'], NULL)), NULL) AS `mixed.materialization.key` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -601,7 +601,7 @@ func TestStatementBuilderListQuery(t *testing.T) {
 				Limit: 10,
 			},
 			expected: qbtypes.Statement{
-				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, `attribute_string_mixed$$materialization$$key` AS `mixed.materialization.key`, timestamp AS `timestamp`, span_id AS `span_id`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "WITH __resource_filter AS (SELECT fingerprint FROM signoz_traces.distributed_traces_v3_resource WHERE (simpleJSONExtractString(labels, 'service.name') = ? AND labels LIKE ? AND labels LIKE ?) AND seen_at_ts_bucket_start >= ? AND seen_at_ts_bucket_start <= ?) SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, name AS `name`, resource_string_service$$name AS `serviceName`, duration_nano AS `durationNano`, http_method AS `httpMethod`, `attribute_string_mixed$$materialization$$key` AS `mixed.materialization.key` FROM signoz_traces.distributed_signoz_index_v3 WHERE resource_fingerprint GLOBAL IN (SELECT fingerprint FROM __resource_filter) AND timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"redis-manual", "%service.name%", "%service.name\":\"redis-manual%", uint64(1747945619), uint64(1747983448), "1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -711,7 +711,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 				Limit:        10,
 			},
 			expected: qbtypes.Statement{
-				Query: "SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
+				Query: "SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? LIMIT ?",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,
@@ -744,7 +744,7 @@ func TestStatementBuilderListQueryWithCorruptData(t *testing.T) {
 				}},
 			},
 			expected: qbtypes.Statement{
-				Query: "SELECT duration_nano AS `duration_nano`, name AS `name`, response_status_code AS `response_status_code`, multiIf(resource.`service.name` IS NOT NULL, resource.`service.name`::String, mapContains(resources_string, 'service.name'), resources_string['service.name'], NULL) AS `service.name`, span_id AS `span_id`, timestamp AS `timestamp`, trace_id AS `trace_id` FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp AS `timestamp` asc LIMIT ?",
+				Query: "SELECT timestamp AS `timestamp`, trace_id AS `trace_id`, span_id AS `span_id`, trace_state AS `trace_state`, parent_span_id AS `parent_span_id`, flags AS `flags`, name AS `name`, kind AS `kind`, kind_string AS `kind_string`, duration_nano AS `duration_nano`, status_code AS `status_code`, status_message AS `status_message`, status_code_string AS `status_code_string`, events AS `events`, links AS `links`, response_status_code AS `response_status_code`, external_http_url AS `external_http_url`, http_url AS `http_url`, external_http_method AS `external_http_method`, http_method AS `http_method`, http_host AS `http_host`, db_name AS `db_name`, db_operation AS `db_operation`, has_error AS `has_error`, is_remote AS `is_remote`, attributes_string, attributes_number, attributes_bool, resources_string FROM signoz_traces.distributed_signoz_index_v3 WHERE timestamp >= ? AND timestamp < ? AND ts_bucket_start >= ? AND ts_bucket_start <= ? ORDER BY timestamp AS `timestamp` asc LIMIT ?",
 				Args:  []any{"1747947419000000000", "1747983448000000000", uint64(1747945619), uint64(1747983448), 10},
 			},
 			expectedErr: nil,

pkg/types/querybuildertypes/querybuildertypesv5/resp.go

@@ -236,6 +236,7 @@ type RawStream struct {
 	Error chan error
 }
 
+
 func roundToNonZeroDecimals(val float64, n int) float64 {
 	if val == 0 || math.IsNaN(val) || math.IsInf(val, 0) {
 		return val

pkg/types/spantypes/event.go

@@ -0,0 +1,59 @@
+package spantypes
+
+import "encoding/json"
+
+type Event struct {
+	Name         string         `json:"name"`
+	TimeUnixNano uint64         `json:"timeUnixNano"`
+	Attributes   map[string]any `json:"attributes,omitempty"`
+}
+
+// Link is the response shape for a span link.
+// The refType field is intentionally not decoded; it's a Jaeger-era
+// concept that OTel doesn't model, so we drop it on the way out.
+type Link struct {
+	TraceID string `json:"traceId,omitempty"`
+	SpanID  string `json:"spanId,omitempty"`
+}
+
+// dbEvent matches the JSON object stored in the ClickHouse `events`
+// Array(String) column.
+type dbEvent struct {
+	Name         string         `json:"name"`
+	TimeUnixNano uint64         `json:"timeUnixNano"`
+	AttributeMap map[string]any `json:"attributeMap"`
+}
+
+// ParseEvents column (Array(String) of JSON-encoded events) into a slice of Event values.
+// Malformed entries are skipped.
+func ParseEvents(raw any) []Event {
+	strs, ok := raw.([]string)
+	if !ok {
+		return []Event{}
+	}
+	events := make([]Event, 0, len(strs))
+	for _, s := range strs {
+		var e dbEvent
+		if err := json.Unmarshal([]byte(s), &e); err != nil {
+			continue
+		}
+		events = append(events, Event{
+			Name:         e.Name,
+			TimeUnixNano: e.TimeUnixNano,
+			Attributes:   e.AttributeMap,
+		})
+	}
+	return events
+}
+
+func ParseLinks(raw any) []Link {
+	s, ok := raw.(string)
+	if !ok || s == "" {
+		return []Link{}
+	}
+	var links []Link
+	if err := json.Unmarshal([]byte(s), &links); err != nil {
+		return []Link{}
+	}
+	return links
+}

tests/e2e/helpers/dashboards.ts

@@ -3,10 +3,6 @@ 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 ───────────────────────────────────────────────────────────
 //
@@ -181,248 +177,3 @@ 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-]+(?:\?|$)/);
-}
-
-// ─── Widget editor (re-open existing panel) ────────────────────────────────
-
-/**
- * Display labels surfaced in the `panel-change-select` Ant Select inside the
- * widget editor. The mapping to URL `graphType` values comes from the
- * `PANEL_TYPES` enum: TIME_SERIES='graph', VALUE='value', and so on.
- */
-export type PanelDisplayLabel =
-	| 'Time Series'
-	| 'Number'
-	| 'Table'
-	| 'List'
-	| 'Bar'
-	| 'Pie'
-	| 'Histogram';
-
-const PANEL_DISPLAY_TO_GRAPH_TYPE: Record<PanelDisplayLabel, string> = {
-	'Time Series': 'graph',
-	Number: 'value',
-	Table: 'table',
-	List: 'list',
-	Bar: 'bar',
-	Pie: 'pie',
-	Histogram: 'histogram',
-};
-
-/**
- * Open the widget editor for an existing panel by driving the panel header
- * options menu (the three-dot Ant `Dropdown` next to the title).
- *
- * The widget-header-options button is `visibility: hidden` until the panel is
- * hovered (see `GridCardLayout.styles.scss`) — except on TABLE panels, where
- * `globalSearchAvailable` keeps it permanently visible. Hovering the title
- * testid first works for both states.
- */
-export async function openWidgetEditor(
-	page: Page,
-	panelTitle: string,
-): Promise<void> {
-	await page.getByTestId(panelTitle).first().hover();
-	await page.getByTestId('widget-header-options').first().click();
-	await page
-		.getByRole('menuitem', { name: /^edit$/i })
-		.first()
-		.click();
-	await page.waitForURL(/widgetId=/);
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-}
-
-/**
- * Click "Save Changes" in the widget editor, confirm via the OK button on the
- * resulting modal, await the dashboard PUT response, and wait for navigation
- * back to `/dashboard/<id>`. Throws if the PUT response is not 2xx.
- *
- * The confirmation modal title varies between "Save Widget" and "Unsaved
- * Changes" depending on whether the query was modified — don't assert title,
- * just OK the topmost dialog.
- */
-export async function saveWidgetEdit(page: Page): Promise<void> {
-	const putResponse = page.waitForResponse(
-		(r) =>
-			r.request().method() === 'PUT' && /\/api\/v1\/dashboards\//.test(r.url()),
-	);
-	await page.getByTestId('new-widget-save').click();
-	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()}`,
-		);
-	}
-	await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-}
-
-/**
- * Switch the editor's panel display type via the Ant `Select` exposed as
- * `data-testid="panel-change-select"`. The select options carry the display
- * label as visible text (matches `PanelDisplay` enum values). After the
- * change, this helper waits for the URL `graphType` param to reflect the new
- * panel type and for the Save Changes button to re-render — the editor
- * re-routes mid-flow via `redirectWithQueryBuilderData`.
- *
- * Note: the "List" option is filtered out of the dropdown when the current
- * query contains a metrics data source (see VisualizationSettingsSection).
- */
-export async function changePanelType(
-	page: Page,
-	displayLabel: PanelDisplayLabel,
-): Promise<void> {
-	const expectedGraphType = PANEL_DISPLAY_TO_GRAPH_TYPE[displayLabel];
-	await page.getByTestId('panel-change-select').click();
-	// Each option renders a .select-option containing the display text — match
-	// against the typography element to avoid matching the trigger itself.
-	await page
-		.locator('.ant-select-item-option .display', { hasText: displayLabel })
-		.first()
-		.click();
-	await page.waitForURL(new RegExp(`graphType=${expectedGraphType}`));
-	await page.getByTestId('new-widget-save').waitFor({ state: 'visible' });
-}

tests/e2e/testdata/queries.json

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

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

@@ -1,550 +0,0 @@
-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();
-	});
-});

tests/e2e/tests/dashboards/panels/bar.spec.ts

@@ -1,484 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'bar-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'bar-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Bar');
-		await saveWidgetEdit(page);
-	} 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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-async function selectYAxisUnit(
-	page: Page,
-	wrapperSelector: string,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const wrapper = page.locator(wrapperSelector).first();
-	await wrapper.locator('.ant-select').click();
-	await wrapper.locator('.ant-select input').fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Bar Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('bar-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('bar-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'bar-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'bar-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and toggles the widget-header info icon', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E bar description');
-		await saveWidgetEdit(page);
-
-		const header = page
-			.locator('.widget-header-container')
-			.filter({ hasText: FIXTURE_PANEL_TITLE });
-		await expect(header.locator('.info-tooltip').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E bar description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-		await expect(header.locator('.info-tooltip')).toHaveCount(0);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 stack series toggle persists; editor reflects state via data-stacking-state', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		const stackSwitch = page.locator('section.stack-chart').getByRole('switch');
-		const panelChangeSelect = page.getByTestId('panel-change-select');
-
-		await expect(stackSwitch).toHaveAttribute('aria-checked', 'false');
-		await expect(panelChangeSelect).toHaveAttribute('data-stacking-state', 'false');
-
-		await stackSwitch.click();
-		await expect(stackSwitch).toHaveAttribute('aria-checked', 'true');
-		await expect(panelChangeSelect).toHaveAttribute('data-stacking-state', 'true');
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.stack-chart').getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-		await expect(page.getByTestId('panel-change-select')).toHaveAttribute(
-			'data-stacking-state',
-			'true',
-		);
-
-		// Reset
-		await page.locator('section.stack-chart').getByRole('switch').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 Y-axis unit persists', async ({ authedPage: page }) => {
-		// Tooltip-based visible-change check is omitted — the test stack's
-		// `signoz_calls_total` data slides outside the dashboard's default
-		// "Last 30 minutes" window mid-suite, so the rendered panel often
-		// shows "No Data" and the tooltip never appears. Verify persistence
-		// only — the selector value round-trips through PUT.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await selectYAxisUnit(
-			page,
-			'.y-axis-unit-selector-v2',
-			'Milliseconds',
-			'Milliseconds (ms)',
-		);
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Milliseconds/);
-
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 decimal precision persists', async ({ authedPage: page }) => {
-		// Tooltip-based visible-change check is omitted for the same reason
-		// as TC-05.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 soft min and soft max persist (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-
-		await page.locator('section.soft-min-max .ant-input-number-input').first().fill('10');
-		await page.locator('section.soft-min-max .ant-input-number-input').last().fill('100');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').first(),
-		).toHaveValue('10');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').last(),
-		).toHaveValue('100');
-
-		await page.locator('section.soft-min-max .ant-input-number-input').first().fill('');
-		await page.locator('section.soft-min-max .ant-input-number-input').last().fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 log scale persists (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-		await page.locator('section.log-scale .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Logarithmic$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.log-scale .ant-select-selection-item').first(),
-		).toContainText(/Logarithmic/);
-
-		await page.locator('section.log-scale .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Linear$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-09 legend position swap toggles chart-layout--legend-right and shows the search input', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Right$/ })
-			.first()
-			.click();
-
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Legend');
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Bottom$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-	});
-
-	test('TC-10 Legend Colors panel renders one row per query series with a default color swatch', async ({
-		authedPage: page,
-	}) => {
-		// Driving the Ant ColorPicker is fiddly across builds (trigger class
-		// varies, preset chips may not be configured). Per-option testids have
-		// been added in `YAxisUnitSelector.tsx` for the unit picker, but the
-		// LegendColors picker uses Ant's `ColorPicker` directly with no stable
-		// testids. The pragmatic check is structural: when a query has run
-		// and produced series, the Legend Colors collapse panel renders one
-		// row per legend label with a `.legend-marker` carrying an inline
-		// `background-color` (the auto-assigned default). This guards against
-		// regressions in the LegendColors → query-response wiring.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
-		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
-
-		const items = page.locator('.legend-items .legend-item');
-		await items.first().waitFor({ state: 'visible' });
-		expect(await items.count()).toBeGreaterThan(0);
-
-		const firstMarker = items.first().locator('.legend-marker');
-		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
-		expect(markerStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-11 threshold add + persistence (canvas-only line)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// Bar thresholds do NOT have a label input — the time-series-alerts block
-		// only renders for TIME_SERIES. Skip label.
-		await card.getByTestId('threshold-value-input').fill('100');
-
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		await expect(page.locator('.threshold-container').first()).toBeVisible();
-
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-12 panel type swap from Bar to Time Series and back persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-
-		// Editor-side visual change: Time-Series-only section appears.
-		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		await changePanelType(page, 'Bar');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-13 sections hidden for BAR are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Hidden by the panel-type matrix for BAR.
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-
-		// Expected to be present.
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-		await expect(page.locator('section.stack-chart').first()).toBeVisible();
-		await expect(page.locator('section.panel-time-preference').first()).toBeVisible();
-
-		await expandSection(page, 'Axes');
-		await expect(page.locator('section.soft-min-max').first()).toBeVisible();
-		await expect(page.locator('section.log-scale').first()).toBeVisible();
-
-		await expandSection(page, 'Legend');
-		await expect(page.locator('section.legend-position').first()).toBeVisible();
-
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-14 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-bar-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/histogram.spec.ts

@@ -1,313 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'histogram-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'histogram-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Histogram');
-		await saveWidgetEdit(page);
-	} 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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-test.describe('Histogram Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('histogram-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(
-			page.getByTestId('histogram-controls-renamed').first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, 'histogram-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'histogram-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and toggles the widget-header info icon', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E histogram description');
-		await saveWidgetEdit(page);
-
-		const header = page
-			.locator('.widget-header-container')
-			.filter({ hasText: FIXTURE_PANEL_TITLE });
-		await expect(header.locator('.info-tooltip').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E histogram description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-		await expect(header.locator('.info-tooltip')).toHaveCount(0);
-	});
-
-	test('TC-03 bucket count and bucket width persist (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Section is titled "Histogram / Buckets" — literal slash + spaces.
-		await expandSection(page, 'Histogram / Buckets');
-
-		const bucketCount = page.locator('.bucket-input .ant-input-number-input').first();
-		const bucketWidth = page
-			.locator('.histogram-settings__bucket-input .ant-input-number-input')
-			.first();
-
-		await bucketCount.fill('50');
-		await bucketWidth.fill('1.5');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Histogram / Buckets');
-		await expect(
-			page.locator('.bucket-input .ant-input-number-input').first(),
-		).toHaveValue('50');
-		await expect(
-			page
-				.locator('.histogram-settings__bucket-input .ant-input-number-input')
-				.first(),
-		// Ant InputNumber with precision={2} formats 1.5 → "1.50"
-		).toHaveValue('1.50');
-
-		// Reset
-		await page
-			.locator('.bucket-input .ant-input-number-input')
-			.first()
-			.fill('');
-		await page
-			.locator('.histogram-settings__bucket-input .ant-input-number-input')
-			.first()
-			.fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 "Merge all series" toggle removes .legend-container from the DOM', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Histogram / Buckets');
-
-		// Live preview: legend should be present when toggle is OFF.
-		// (Use `.first()` because the editor may render multiple chart areas.)
-		await expect(page.locator('.legend-container').first()).toBeVisible();
-
-		const mergeSwitch = page
-			.locator('section.histogram-settings__combine-hist')
-			.getByRole('switch');
-		await expect(mergeSwitch).toHaveAttribute('aria-checked', 'false');
-		await mergeSwitch.click();
-		await expect(mergeSwitch).toHaveAttribute('aria-checked', 'true');
-
-		// Histogram passes `showLegend={!isQueriesMerged}` → legend container is
-		// not rendered when the merge toggle is ON.
-		await expect(page.locator('.legend-container')).toHaveCount(0);
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: legend container also absent.
-		await expect(page.locator('.legend-container')).toHaveCount(0);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Histogram / Buckets');
-		await expect(
-			page
-				.locator('section.histogram-settings__combine-hist')
-				.getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-
-		// Reset
-		await page
-			.locator('section.histogram-settings__combine-hist')
-			.getByRole('switch')
-			.click();
-		await saveWidgetEdit(page);
-		await expect(page.locator('.legend-container').first()).toBeVisible();
-	});
-
-	test('TC-05 Legend Colors panel renders one row per query series with a default color swatch', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
-		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
-
-		const items = page.locator('.legend-items .legend-item');
-		await items.first().waitFor({ state: 'visible' });
-		expect(await items.count()).toBeGreaterThan(0);
-
-		const firstMarker = items.first().locator('.legend-marker');
-		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
-		expect(markerStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-06 panel type swap from Histogram to Time Series and back persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-
-		// Editor-side visual change: Time Series sections appear, Histogram-only
-		// section disappears.
-		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
-		await expect(page.locator('.histogram-settings__bucket-config')).toHaveCount(0);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		// Reset
-		await changePanelType(page, 'Histogram');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 sections hidden for HISTOGRAM are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.panel-time-preference')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('.y-axis-unit-selector-v2')).toHaveCount(0);
-		await expect(page.locator('.decimal-precision-selector')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		await expandSection(page, 'Histogram / Buckets');
-		await expect(
-			page.locator('.histogram-settings__bucket-config').first(),
-		).toBeVisible();
-
-		await expandSection(page, 'Legend');
-		await expect(page.locator('.legend-colors-collapse').first()).toBeVisible();
-	});
-
-	test('TC-08 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-histogram-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/list.spec.ts

@@ -1,192 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'list-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'list-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		// LIST panels require a logs (or traces) data source — metrics queries
-		// hide the LIST option from panel-change-select.
-		await configureAndSavePanel(page, 'logs', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'List');
-		await saveWidgetEdit(page);
-	} 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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-test.describe('List Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('list-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('list-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'list-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'list-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and shows info icon on header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E list description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E list description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel type switch from List to Table persists and re-renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Table');
-		// Table re-renders Decimal Precision + Column Units in the right pane.
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Panel card should now render an Ant table head.
-		await expect(
-			page
-				.locator('[data-testid="' + FIXTURE_PANEL_TITLE + '"]')
-				.first(),
-		).toBeVisible();
-		await expect(page.locator('.ant-table-thead').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=table/);
-
-		// Reset back to List.
-		await changePanelType(page, 'List');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 sections hidden for LIST are not rendered in the right pane', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.panel-time-preference')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('.decimal-precision-selector')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-		await expect(page.locator('.y-axis-unit-selector-v2')).toHaveCount(0);
-		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-description-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-	});
-
-	test('TC-05 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-list-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/pie.spec.ts

@@ -1,417 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'pie-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'pie-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Pie');
-		await saveWidgetEdit(page);
-	} 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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-async function selectYAxisUnit(
-	page: Page,
-	wrapperSelector: string,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const wrapper = page.locator(wrapperSelector).first();
-	await wrapper.locator('.ant-select').click();
-	await wrapper.locator('.ant-select input').fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-/**
- * Trigger the arc tooltip for the first pie slice and return its rendered
- * value text. Pie uses `@visx/tooltip` (plain DOM portal — not canvas) so the
- * tooltip node is reliably queryable.
- *
- * Playwright's `.hover()` is blocked by the SVG element intercepting pointer
- * events. `page.mouse.move` bypasses actionability checks but still relies on
- * the browser hit-testing landing on the `<g>`. The most reliable path is
- * `page.evaluate` firing a native `MouseEvent` of type `mouseover` directly
- * on the arc `<g>` element — React 17+ delegates `onMouseEnter` via
- * `mouseover` on the root, but also captures synthetic `mouseover` events
- * dispatched on child elements and applies enter/leave semantics.
- */
-async function readPieArcTooltipText(page: Page): Promise<string> {
-	// Wait for the arc group to be in the DOM.
-	const firstArcG = page.locator('.piechart-container svg g g').first();
-	await firstArcG.waitFor({ state: 'visible' });
-
-	// Dispatch a synthetic mouseover directly on the arc <g>. This reaches
-	// React's event delegation layer regardless of SVG pointer-event interception.
-	// All browser globals are cast via `(globalThis as any)` because the
-	// tsconfig lib does not include "dom" — page.evaluate callbacks run in the
-	// browser but are type-checked in the Node context.
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	await page.evaluate((sel: string) => {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const w = globalThis as any;
-		const g = w.document.querySelector(sel);
-		if (!g) throw new Error('Arc <g> not found');
-		g.dispatchEvent(new w.MouseEvent('mouseover', { bubbles: true, cancelable: true }));
-	}, '.piechart-container svg g g');
-
-	const tooltip = page.locator('.piechart-tooltip').first();
-	await tooltip.waitFor({ state: 'visible', timeout: 5000 });
-	const valueText = (await page.locator('.tooltip-value').first().textContent()) ?? '';
-
-	// Dispatch mouseout on the arc to close the tooltip.
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	await page.evaluate((sel: string) => {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const w = globalThis as any;
-		const g = w.document.querySelector(sel);
-		if (!g) return;
-		g.dispatchEvent(new w.MouseEvent('mouseout', { bubbles: true, cancelable: true }));
-	}, '.piechart-container svg g g');
-	return valueText;
-}
-
-test.describe('Pie Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('pie-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('pie-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'pie-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'pie-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and toggles the widget-header info icon', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E pie description');
-		await saveWidgetEdit(page);
-
-		const header = page
-			.locator('.widget-header-container')
-			.filter({ hasText: FIXTURE_PANEL_TITLE });
-		await expect(header.locator('.info-tooltip').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E pie description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-		await expect(header.locator('.info-tooltip')).toHaveCount(0);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 Y-axis unit applies to the SVG centre text and arc tooltip', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await selectYAxisUnit(
-			page,
-			'.y-axis-unit-selector-v2',
-			'Milliseconds',
-			'Milliseconds (ms)',
-		);
-		await saveWidgetEdit(page);
-
-		// Visible change 1: the SVG centre text gains a `ms` tspan when a
-		// unit is set.
-		const centreTspans = page.locator('.piechart-container svg text tspan');
-		await centreTspans.first().waitFor({ state: 'visible' });
-		const tspanTexts = await centreTspans.allTextContents();
-		expect(tspanTexts.some((t) => /ms/.test(t))).toBe(true);
-
-		// Visible change 2: the arc tooltip includes the `ms` suffix.
-		const tooltipText = await readPieArcTooltipText(page);
-		expect(tooltipText).toMatch(/ms/);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Milliseconds/);
-
-		// Reset
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision changes the rendered arc-tooltip values', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		// A unit is required for decimal precision to have a visible effect.
-		await selectYAxisUnit(
-			page,
-			'.y-axis-unit-selector-v2',
-			'Seconds',
-			'Seconds (s)',
-		);
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		// Visible change: arc tooltip numeric portion has no decimal point.
-		const tooltipText = await readPieArcTooltipText(page);
-		const numericPart = tooltipText.replace(/[A-Za-z]+/g, '');
-		expect(numericPart).not.toMatch(/\./);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 Legend Colors panel renders one row per query series with a default color swatch', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
-		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
-
-		const items = page.locator('.legend-items .legend-item');
-		await items.first().waitFor({ state: 'visible' });
-		expect(await items.count()).toBeGreaterThan(0);
-
-		const firstMarker = items.first().locator('.legend-marker');
-		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
-		expect(markerStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-07 piechart-legend-item count matches the number of query series', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-
-		// On the dashboard, count legend items and assert each has a coloured
-		// swatch.
-		await page.locator('.piechart-legend-item').first().waitFor({ state: 'visible' });
-		const dashboardCount = await page.locator('.piechart-legend-item').count();
-		expect(dashboardCount).toBeGreaterThan(0);
-
-		const firstSwatchStyle = (await page
-			.locator('.piechart-legend-item .piechart-legend-label')
-			.first()
-			.getAttribute('style')) ?? '';
-		expect(firstSwatchStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-08 panel type swap from Pie to Time Series and back persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-
-		// Editor-side visual change: Time Series sections appear, Pie-only
-		// `.piechart-wrapper` is gone from the editor preview area.
-		await expect(page.locator('section.fill-gaps').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render now shows a uPlot chart, not a piechart.
-		await expect(page.getByTestId('uplot-main-div').first()).toBeVisible();
-		await expect(page.locator('.piechart-wrapper')).toHaveCount(0);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		// Reset
-		await changePanelType(page, 'Pie');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-09 sections hidden for PIE are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('.column-unit-selector')).toHaveCount(0);
-		await expect(page.getByTestId('add-threshold-cta')).toHaveCount(0);
-		await expect(page.locator('.histogram-settings__bucket-config')).toHaveCount(
-			0,
-		);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-		await expect(page.locator('section.panel-time-preference').first()).toBeVisible();
-
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.locator('.y-axis-unit-selector-v2').first()).toBeVisible();
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		await expandSection(page, 'Legend');
-		await expect(page.locator('.legend-colors-collapse').first()).toBeVisible();
-	});
-
-	test('TC-10 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-pie-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/table.spec.ts

@@ -1,470 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'table-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'table-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Table');
-		await saveWidgetEdit(page);
-	} 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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Return the last <td> in the first data row of the panel's Ant Design table.
- * Ant Design applies .ant-table-row to actual data rows only (not header rows),
- * so this correctly skips the fixed/sticky header tbody rows.
- *
- * For the metrics panel the row has: td[0] = label column, td[last] = value
- * column (the aggregation query "A"). The last td is thus the value cell.
- * However, depending on the panel query there may only be ONE td per row. Use
- * the cell that contains a non-empty value: any td that is not purely the
- * label placeholder.
- *
- * NOTE: the value cell wraps its text in a <button> element (from the
- * QueryTable open-traces render path) so textContent picks it up correctly.
- */
-async function getFirstDataCell(page: Page) {
-	// .ant-table-row targets Ant Design data rows only (not header/fixed rows).
-	const firstRow = page.locator('tr.ant-table-row').first();
-	await firstRow.waitFor({ state: 'visible' });
-	// Return the last <td> — for a metrics table with columns [label, A] this
-	// is the value column. For a single-column table it is the only column.
-	return firstRow.locator('td').last();
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. If it is already open (content div has the `open` class), this is
- * a no-op. Otherwise it clicks the header button and waits for the content to
- * become visible.
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) => el.classList.contains('open'));
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from the column-unit selector dropdown by typing a search
- * term, then clicking the filtered option. Scoped to .column-unit-selector to
- * avoid matching the Y-axis unit selectors on other panel types.
- *
- * The selector has `showSearch` enabled and renders a long virtualised option
- * list — typing first avoids instability from the list re-rendering when the
- * target option is off-screen.
- */
-async function selectColumnUnit(
-	page: Page,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const unitSelect = page
-		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select')
-		.first();
-	await unitSelect.click();
-	await page
-		.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select input')
-		.first()
-		.fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Table Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('table-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('table-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'table-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'table-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and shows info icon on header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E table description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E table description',
-		);
-
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 column unit formats the matching column cells and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Use selectColumnUnit to avoid virtualised-list detached-DOM failures.
-		await selectColumnUnit(page, 'Milliseconds', 'Milliseconds (ms)');
-
-		await saveWidgetEdit(page);
-
-		// Cell text in the data column should now contain the `ms` suffix.
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toContainText(/ms/);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// Section starts collapsed again on re-open — expand before asserting.
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page
-				.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-selection-item')
-				.first(),
-		).toContainText(/Milliseconds/);
-
-		// Reset — clear the unit via the Ant Select allowClear X button.
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision changes the number of decimals when a column unit is set', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Set a column unit so decimal precision has a visible effect.
-		await selectColumnUnit(page, 'Seconds', 'Seconds (s)');
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		const cell = await getFirstDataCell(page);
-		await expect(cell).toContainText(/s/);
-		const text = (await cell.textContent()) ?? '';
-		expect(text.replace(/\s*s\s*$/, '')).not.toMatch(/\./);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// Section starts collapsed again on re-open — expand before asserting.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset: decimal precision back to 2, clear column unit.
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2')
-			.first()
-			.hover();
-		await page
-			.locator('.column-unit-selector .y-axis-unit-selector-v2 .ant-select-clear')
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 column-targeted Background threshold paints only the targeted column', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// For TABLE thresholds the column selector (table-operator-input-selector)
-		// defaults to the first aggregation query column (typically `A`). Operator
-		// defaults to '>'; switch to '>=' so it reliably matches non-negative values.
-		await card.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		await card.getByTestId('threshold-color-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: 'Background' })
-			.first()
-			.click();
-
-		// Save the threshold row (commits it to the thresholds state array).
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// Find a data row and inspect its cells. Use tr.ant-table-row to skip
-		// fixed-header tbody rows that Ant Design inserts for sticky scroll.
-		// QueryTable wraps each cell in <div role="button">; the threshold
-		// styled <div> is nested inside it. Use div[style] to target the first
-		// <div> that actually carries an inline style — that is the threshold div.
-		// TODO: switch to `getByTestId('threshold-styled-cell')` once the frontend
-		// build deployed to the test stack picks up the testid added in
-		// GridTableComponent/index.tsx (the host also carries
-		// `data-threshold-format="Background|Text"` to discriminate variants).
-		const row = page.locator('tr.ant-table-row').first();
-		await row.waitFor({ state: 'visible' });
-		const dataCellInner = row.locator('td').last().locator('div[style]').first();
-		const dataStyle = (await dataCellInner.getAttribute('style')) ?? '';
-		expect(dataStyle).toMatch(/background-color:/);
-
-		// Reset — delete the threshold. Edit/delete buttons are display:none
-		// by default and revealed only on .threshold-card-container:hover.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// ThresholdsSection defaultOpen is based on threshold count at mount; may
-		// start collapsed due to async state loading — always expand before interacting.
-		await expandSection(page, 'Thresholds');
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` once the stack
-		// frontend rebuild picks up the testid added in Threshold.tsx.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 column-targeted Text threshold colors only the targeted column text', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		await card.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-		// Format defaults to 'Text' — no change needed.
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// QueryTable wraps each cell in <div role="button">; the threshold styled
-		// <div> is nested inside. Use div[style] to find the threshold div directly.
-		// TODO: same testid migration as TC-06 once the frontend rebuild lands.
-		const row = page.locator('tr.ant-table-row').first();
-		await row.waitFor({ state: 'visible' });
-		const dataCellInner = row.locator('td').last().locator('div[style]').first();
-		const dataStyle = (await dataCellInner.getAttribute('style')) ?? '';
-		expect(dataStyle).toMatch(/color:/);
-		expect(dataStyle).not.toMatch(/background-color:/);
-
-		// Reset
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after frontend rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 sections hidden for TABLE are not rendered', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		// decimal-precision-selector and column-unit-selector are inside the
-		// "Formatting & Units" section which starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-		await expect(page.locator('.column-unit-selector').first()).toBeVisible();
-
-		// add-threshold-cta is inside "Thresholds" which is also collapsed.
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-09 panel type switch from Table to Number persists and re-renders as a number', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Number');
-		// Number panel exposes the Y-axis unit selector in the Formatting & Units section.
-		await expect(page.locator('.y-axis-unit-selector-v2').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await expect(page.getByTestId('value-graph-text').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=value/);
-
-		// Reset: switch back to Table.
-		await changePanelType(page, 'Table');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-10 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-table-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/time-series.spec.ts

@@ -1,584 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-// All TCs share one fixture panel — run serially.
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'time-series-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'time-series-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		// configureAndSavePanel creates a Time Series (graph) panel by default —
-		// no panel-type swap needed here.
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. No-op if already open.
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-	if (!isOpen) {
-		await section.locator('button.settings-section-header').click();
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from a Y-axis-unit-selector wrapper by typing a search term
- * first (Ant Select has a virtualised option list — typing first prevents
- * detached-DOM failures when the target option is off-screen).
- *
- * `wrapperSelector` is the CSS selector for the enclosing
- * `.y-axis-unit-selector-v2` instance (use `.y-axis-unit-selector-v2` for the
- * Formatting Y-axis unit; threshold cards have their own nested instance —
- * scope accordingly).
- */
-async function selectYAxisUnit(
-	page: Page,
-	wrapperSelector: string,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	const wrapper = page.locator(wrapperSelector).first();
-	await wrapper.locator('.ant-select').click();
-	await wrapper.locator('.ant-select input').fill(searchTerm);
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Time Series Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('ts-controls-renamed');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('ts-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'ts-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'ts-controls-renamed',
-		);
-
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 description persists and toggles the widget-header info icon', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E time series description');
-		await saveWidgetEdit(page);
-
-		// Visible change: info icon appears in the widget header.
-		const header = page
-			.locator('.widget-header-container')
-			.filter({ hasText: FIXTURE_PANEL_TITLE });
-		await expect(header.locator('.info-tooltip').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E time series description',
-		);
-
-		// Reset and assert the info icon disappears.
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-		await expect(header.locator('.info-tooltip')).toHaveCount(0);
-	});
-
-	test('TC-03 panel time preference switches to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		// Reset
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 fill gaps toggle persists', async ({ authedPage: page }) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// canvas-only — visible chart effect not asserted (canvas-drawn series).
-		const fillGapsSwitch = page.locator('section.fill-gaps').getByRole('switch');
-		await expect(fillGapsSwitch).toHaveAttribute('aria-checked', 'false');
-		await fillGapsSwitch.click();
-		await expect(fillGapsSwitch).toHaveAttribute('aria-checked', 'true');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.fill-gaps').getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-
-		// Reset
-		await page.locator('section.fill-gaps').getByRole('switch').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 Y-axis unit persists', async ({ authedPage: page }) => {
-		// The plan asks for a tooltip-driven visible-change check (hover the
-		// chart, assert tooltip text contains `ms`). In practice the test
-		// stack's `signoz_calls_total` data slides outside the dashboard's
-		// default "Last 30 minutes" window between the suite-start golden
-		// reseed and the time TC-05 runs, so the rendered panel often shows
-		// "No Data" and the tooltip never appears. Until the seeder either
-		// emits points in a rolling-now window or the dashboard global-time
-		// preset gets widened from the test fixture, the tooltip assertion is
-		// not viable. Verify persistence only — the selector value round-trips
-		// through PUT and re-renders in the editor.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await selectYAxisUnit(
-			page,
-			'.y-axis-unit-selector-v2',
-			'Milliseconds',
-			'Milliseconds (ms)',
-		);
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Milliseconds/);
-
-		// Reset — clear via allowClear.
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 decimal precision persists', async ({ authedPage: page }) => {
-		// Tooltip-based visible-change assertion is omitted for the same reason
-		// as TC-05 — `signoz_calls_total` data window flakes mid-suite. Verify
-		// persistence only.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Formatting & Units');
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 soft min and soft max persist (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-
-		// Soft Min is the first .ant-input-number inside section.soft-min-max.
-		const softMin = page.locator('section.soft-min-max .ant-input-number-input').first();
-		const softMax = page.locator('section.soft-min-max .ant-input-number-input').last();
-
-		await softMin.fill('10');
-		await softMax.fill('100');
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').first(),
-		).toHaveValue('10');
-		await expect(
-			page.locator('section.soft-min-max .ant-input-number-input').last(),
-		).toHaveValue('100');
-
-		// Reset — clear both. (Note: the |...|| 0 coercion in onClickSaveHandler
-		// will persist 0 not null after this save; that's the known behaviour.)
-		await page
-			.locator('section.soft-min-max .ant-input-number-input')
-			.first()
-			.fill('');
-		await page
-			.locator('section.soft-min-max .ant-input-number-input')
-			.last()
-			.fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 log scale persists (canvas-only visual)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Axes');
-		const logScaleSelect = page.locator('section.log-scale .ant-select').first();
-		await logScaleSelect.click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Logarithmic$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Axes');
-		await expect(
-			page.locator('section.log-scale .ant-select-selection-item').first(),
-		).toContainText(/Logarithmic/);
-
-		// Reset
-		await page.locator('section.log-scale .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Linear$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-09 legend position swap toggles the chart-layout--legend-right class and shows the search input', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		// Before: legend is at the bottom; no chart-layout--legend-right; no
-		// legend-search-input.
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-
-		// Switch to Right.
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Right$/ })
-			.first()
-			.click();
-
-		// In-editor live preview: layout updates.
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Dashboard: same assertions hold on the rendered panel card.
-		await expect(page.locator('.chart-layout--legend-right').first()).toBeVisible();
-		await expect(page.getByTestId('legend-search-input').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Legend');
-		await expect(
-			page.locator('section.legend-position .ant-select-selection-item').first(),
-		).toContainText(/Right/);
-
-		// Reset to Bottom and assert the class disappears.
-		await page.locator('section.legend-position .ant-select').first().click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: /^Bottom$/ })
-			.first()
-			.click();
-		await saveWidgetEdit(page);
-		await expect(page.locator('.chart-layout--legend-right')).toHaveCount(0);
-		await expect(page.getByTestId('legend-search-input')).toHaveCount(0);
-	});
-
-	test('TC-09b Legend Colors panel renders one row per query series with a default color swatch', async ({
-		authedPage: page,
-	}) => {
-		// The original plan was to drive the Ant `ColorPicker` and assert a
-		// custom color round-trips. The Ant ColorPicker DOM is fiddly to drive
-		// reliably from Playwright (the trigger is the wrapped child element,
-		// presets vary by build, and committing a color requires Escape /
-		// click-outside semantics that depend on portal positioning). The
-		// pragmatic check we ship here is the *structural* one: when a query
-		// has run and produced series, the LegendColors collapse panel renders
-		// one row per legend label with a `.legend-marker` that carries an
-		// inline `background-color` (the auto-assigned default). This guards
-		// against regressions in the LegendColors → query-response wiring,
-		// which is the part most likely to silently break.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Legend');
-
-		// Expand the Ant Collapse panel "Legend Colors" (it sits below the
-		// Position selector inside the Legend SettingsSection).
-		const legendColorsCollapse = page.locator('.legend-colors-collapse').first();
-		await legendColorsCollapse.locator('.ant-collapse-header').first().click();
-
-		// After expansion: at least one per-series row, each with a coloured
-		// `.legend-marker` swatch carrying inline backgroundColor.
-		const items = page.locator('.legend-items .legend-item');
-		await items.first().waitFor({ state: 'visible' });
-		expect(await items.count()).toBeGreaterThan(0);
-
-		const firstMarker = items.first().locator('.legend-marker');
-		const markerStyle = (await firstMarker.getAttribute('style')) ?? '';
-		expect(markerStyle).toMatch(/background-color:/);
-	});
-
-	test('TC-10 threshold add + persistence (canvas-only line)', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		// Time Series thresholds have a label input (unique to TIME_SERIES).
-		await card.getByTestId('threshold-label-input').fill('alert-threshold');
-		await card.getByTestId('threshold-value-input').fill('500');
-
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// canvas-only — line is canvas-drawn. Verify persistence by re-open.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-		await expect(page.locator('.threshold-container').first()).toBeVisible();
-
-		// Reset — delete via hover-revealed button.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-11 threshold value persists in edit mode after save + re-open', async ({
-		authedPage: page,
-	}) => {
-		// Originally drove the threshold's V1 unit selector to assert
-		// `'seconds (s)'` round-trips. The V1 selector's `handleSearch`
-		// filterOption hides every option when a V2-style search term is typed
-		// AND the dropdown options don't reliably surface in the
-		// currently-visible portal under Playwright. We've added per-option
-		// `data-testid="unit-option-<id>"` in `YAxisUnitSelector.tsx`; once the
-		// test stack frontend rebuilds with that testid, this TC can be
-		// upgraded to pick the unit deterministically via
-		// `page.getByTestId('unit-option-s')`. Meanwhile the TC verifies the
-		// numeric value field round-trips through edit mode — the most common
-		// regression vector and the one most worth guarding.
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const card = page.locator('.threshold-container').first();
-
-		await card.getByTestId('threshold-value-input').fill('100');
-		await card.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Thresholds');
-
-		// Re-enter edit mode and assert the value field carries the saved 100.
-		const cardAfter = page.locator('.threshold-container').first();
-		await cardAfter.hover();
-		// TODO: switch to `getByTestId('threshold-edit-btn')` after stack rebuild.
-		await cardAfter.locator('button.edit-btn').click();
-		await expect(cardAfter.getByTestId('threshold-value-input')).toHaveValue(
-			'100',
-		);
-
-		// Reset — discard the edit, then delete.
-		await cardAfter.getByRole('button', { name: /^discard$/i }).click();
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` after stack rebuild.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-12 panel type swap from Time Series to Bar and back persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Bar');
-
-		// Editor-side visual change: Bar-only section appears, Time-Series-only
-		// section disappears.
-		await expect(page.locator('section.stack-chart').first()).toBeVisible();
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=bar/);
-
-		// Reset
-		await changePanelType(page, 'Time Series');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-13 fill gaps and panel time preference persist together', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Set both.
-		await page.locator('section.fill-gaps').getByRole('switch').click();
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i })
-			.click();
-		await page.getByRole('menuitem', { name: /Last 1 hr/i }).click();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.fill-gaps').getByRole('switch'),
-		).toHaveAttribute('aria-checked', 'true');
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 1 hr/i);
-
-		// Reset both.
-		await page.locator('section.fill-gaps').getByRole('switch').click();
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-14 discarding right-pane changes does not persist', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-ts-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		await page
-			.getByRole('dialog')
-			.last()
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — direct navigation
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/e2e/tests/dashboards/panels/value.spec.ts

@@ -1,495 +0,0 @@
-import type { Page } from '@playwright/test';
-
-import { expect, test } from '../../../fixtures/auth';
-import { newAdminContext } from '../../../helpers/auth';
-import {
-	authToken,
-	changePanelType,
-	configureAndSavePanel,
-	createDashboardViaApi,
-	deleteDashboardViaApi,
-	findDashboardIdByTitle,
-	openWidgetEditor,
-	saveWidgetEdit,
-} from '../../../helpers/dashboards';
-
-// All TCs operate on the same fixture panel and toggle its state — they MUST
-// run serially within the worker. Project-level fullyParallel still runs this
-// file in parallel with other files.
-test.describe.configure({ mode: 'serial' });
-
-const FIXTURE_DASHBOARD_TITLE = 'value-controls-fixture';
-const FIXTURE_PANEL_TITLE = 'value-controls-panel';
-
-const seedIds = new Set<string>();
-
-test.beforeAll(async ({ browser }) => {
-	const ctx = await newAdminContext(browser);
-	const page = await ctx.newPage();
-	try {
-		const id = await createDashboardViaApi(page, FIXTURE_DASHBOARD_TITLE);
-		seedIds.add(id);
-		await page.goto(`/dashboard/${id}`);
-		await page.getByTestId('add-panel').waitFor({ state: 'visible' });
-		await configureAndSavePanel(page, 'metrics', FIXTURE_PANEL_TITLE);
-		// configureAndSavePanel creates a Time Series panel. Switch it to the
-		// Number (VALUE) type before the per-TC bodies run.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await changePanelType(page, 'Number');
-		await saveWidgetEdit(page);
-	} 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();
-	}
-});
-
-async function gotoFixtureDashboard(page: Page): Promise<void> {
-	const id = await findDashboardIdByTitle(page, FIXTURE_DASHBOARD_TITLE);
-	expect(id, `${FIXTURE_DASHBOARD_TITLE} not found`).toBeTruthy();
-	await page.goto(`/dashboard/${id}`);
-	await page.getByTestId(FIXTURE_PANEL_TITLE).first().waitFor({ state: 'visible' });
-}
-
-/**
- * Ensure a SettingsSection accordion in the widget editor right pane is
- * expanded. If it is already open (content div has the `open` class), this is
- * a no-op. Otherwise it clicks the header button and waits for the CSS
- * transition to complete. This handles both the common case (collapsed on
- * mount) and the defensive case (already open).
- */
-async function expandSection(page: Page, title: string): Promise<void> {
-	// Find the settings-section that contains this title in its header.
-	const section = page
-		.locator('.settings-section')
-		.filter({ has: page.locator('button.settings-section-header', { hasText: title }) });
-
-	// Check if the content div already has the `open` class.
-	const contentDiv = section.locator('.settings-section-content');
-	const isOpen = await contentDiv.evaluate((el) =>
-		el.classList.contains('open'),
-	);
-
-	if (!isOpen) {
-		// Click the header button to open the section.
-		await section.locator('button.settings-section-header').click();
-		// Wait for the CSS transition to complete (opacity 0→1, max-height 0→1000px).
-		await contentDiv.waitFor({ state: 'visible' });
-	}
-}
-
-/**
- * Select a unit from the Y-axis unit selector dropdown by typing a search
- * term, then clicking the filtered option. The selector has `showSearch`
- * enabled and renders a long virtualised option list — typing first avoids
- * instability from the virtualised list re-rendering when the target option
- * is off-screen.
- */
-async function selectYAxisUnit(
-	page: Page,
-	searchTerm: string,
-	optionText: string,
-): Promise<void> {
-	// Click the outer wrapper to open the dropdown.
-	const unitSelect = page.locator('.y-axis-unit-selector-v2 .ant-select').first();
-	await unitSelect.click();
-	// The Ant Select input is now focused — type to filter the virtual list.
-	await page.locator('.y-axis-unit-selector-v2 .ant-select input').first().fill(searchTerm);
-	// Wait for the dropdown to show the filtered option, then click it.
-	await page
-		.locator('.ant-select-item-option-content', { hasText: optionText })
-		.first()
-		.click();
-}
-
-test.describe('Value Panel Controls', () => {
-	test('TC-01 panel name persists and is reflected in the widget header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('value-controls-renamed');
-		await saveWidgetEdit(page);
-
-		await expect(page.getByTestId('value-controls-renamed').first()).toBeVisible();
-
-		await openWidgetEditor(page, 'value-controls-renamed');
-		await expect(page.getByTestId('panel-name-input')).toHaveValue(
-			'value-controls-renamed',
-		);
-
-		// Reset back to fixture title so subsequent TCs locate the panel.
-		await page.getByTestId('panel-name-input').fill(FIXTURE_PANEL_TITLE);
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-02 panel description persists and renders the info icon on the header', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page
-			.getByTestId('panel-description-input')
-			.fill('E2E test description');
-		await saveWidgetEdit(page);
-
-		await expect(
-			page
-				.locator('.widget-header-container')
-				.filter({ hasText: FIXTURE_PANEL_TITLE })
-				.locator('.info-tooltip')
-				.first(),
-		).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page.getByTestId('panel-description-input')).toHaveValue(
-			'E2E test description',
-		);
-
-		// Reset
-		await page.getByTestId('panel-description-input').fill('');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-03 panel time preference switches from Global Time to Last 15 min and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		const timeButton = page
-			.locator('section.panel-time-preference')
-			.getByRole('button', { name: /global time/i });
-		await timeButton.click();
-		await page.getByRole('menuitem', { name: /Last 15 min/i }).click();
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(
-			page.locator('section.panel-time-preference').getByRole('button'),
-		).toContainText(/Last 15 min/i);
-
-		// Reset
-		await page
-			.locator('section.panel-time-preference')
-			.getByRole('button')
-			.click();
-		await page.getByRole('menuitem', { name: /Global Time/i }).click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-04 Y-axis unit applies a suffix to the rendered value and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// The Y-Axis Unit selector has showSearch enabled and a long virtualised
-		// option list. Type "Seconds" to filter before clicking.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-
-		// Live preview should now render a suffix unit `s`.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		// Back on the dashboard the panel card should also render the suffix.
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(
-			page.locator('.y-axis-unit-selector-v2 .ant-select-selection-item').first(),
-		).toContainText(/Seconds/);
-
-		// Reset — clear the unit via allowClear (X button on the Ant Select).
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-05 decimal precision reformats the rendered value when a unit is set', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Setting a unit is required for decimal precision to have a visible
-		// effect — see Known Limitations #3 in the test plan.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '0 decimals' })
-			.first()
-			.click();
-
-		// Live preview: the numeric text should no longer contain a decimal point.
-		await expect(page.getByTestId('value-graph-text').first()).not.toContainText(
-			/\./,
-		);
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: same assertion.
-		await expect(page.getByTestId('value-graph-text').first()).not.toContainText(
-			/\./,
-		);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toContainText(
-			/0 decimals/,
-		);
-
-		// Reset: restore default 2 decimals and clear the unit.
-		await page.getByTestId('decimal-precision-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '2 decimals' })
-			.first()
-			.click();
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-06 Text-format threshold colors the rendered value text and persists', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds
-		// (defaultOpen={!!thresholds.length}) — expand it first.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-
-		// VALUE panels do not render a threshold label input — only operator,
-		// value, unit, format (Text/Background), and color. Defaults: operator
-		// '>', format 'Text', value 0, color 'Red'. We force operator to '>=' so
-		// the threshold reliably matches non-negative values.
-		const thresholdCard = page.locator('.threshold-container').first();
-		await thresholdCard
-			.getByTestId('operator-input-selector')
-			.click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		// Save the threshold row (commits it to the thresholds state array). The
-		// dashboard PUT still needs `saveWidgetEdit` after this.
-		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
-
-		await saveWidgetEdit(page);
-
-		// Dashboard render: value text should now carry an inline color style.
-		const valueText = page.getByTestId('value-graph-text').first();
-		await expect(valueText).toBeVisible();
-		const inlineStyle = await valueText.getAttribute('style');
-		expect(inlineStyle).toMatch(/color:/);
-
-		// Re-open editor and verify the threshold round-tripped.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// The ThresholdsSection defaultOpen is based on threshold count at mount
-		// time; due to async state loading it may start collapsed. Expand it.
-		await expandSection(page, 'Thresholds');
-		await expect(
-			page.locator('.threshold-container').first(),
-		).toBeVisible();
-
-		// Reset — delete the threshold. The delete button is `display:none` by
-		// default and revealed only on `.threshold-card-container:hover`; hover
-		// the card so the CSS :hover rule activates, then click via testid.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` once the frontend
-		// build deployed to the test stack includes the new testid (added in
-		// Threshold.tsx). The class-based fallback is robust meanwhile.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-07 Background-format threshold paints the value container background', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Thresholds" section starts collapsed when there are no thresholds.
-		await expandSection(page, 'Thresholds');
-		await page.getByTestId('add-threshold-cta').click();
-		const thresholdCard = page.locator('.threshold-container').first();
-
-		// Set operator >= and switch format from Text to Background.
-		await thresholdCard.getByTestId('operator-input-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: '>=' })
-			.first()
-			.click();
-
-		await thresholdCard.getByTestId('threshold-color-selector').click();
-		await page
-			.locator('.ant-select-item-option-content', { hasText: 'Background' })
-			.first()
-			.click();
-
-		await thresholdCard.getByRole('button', { name: /save changes/i }).click();
-		await saveWidgetEdit(page);
-
-		// Dashboard render: .value-graph-container should now have an inline
-		// background-color style. TODO: switch to `getByTestId('value-graph-container')`
-		// once the frontend build deployed to the test stack picks up the testid
-		// added in ValueGraph/index.tsx.
-		const container = page.locator('.value-graph-container').first();
-		await expect(container).toBeVisible();
-		const inlineStyle = await container.getAttribute('style');
-		expect(inlineStyle).toMatch(/background-color:/);
-
-		// Reset
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		// ThresholdsSection may start collapsed even with thresholds — always
-		// expand before interacting with threshold cards.
-		await expandSection(page, 'Thresholds');
-		// Edit/delete buttons are display:none by default, revealed on :hover.
-		const firstCard = page.locator('.threshold-card-container').first();
-		await firstCard.hover();
-		// TODO: switch to `getByTestId('threshold-delete-btn')` once the frontend
-		// build deployed to the test stack includes the new testid (added in
-		// Threshold.tsx). The class-based fallback is robust meanwhile.
-		await firstCard.locator('button.delete-btn').click();
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-08 clearing the Y-axis unit removes the suffix from the rendered value', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// The "Formatting & Units" section starts collapsed — expand it first.
-		await expandSection(page, 'Formatting & Units');
-
-		// Apply a unit first.
-		await selectYAxisUnit(page, 'Seconds', 'Seconds (s)');
-		await saveWidgetEdit(page);
-		await expect(page.getByTestId('value-graph-suffix-unit').first()).toBeVisible();
-
-		// Clear it.
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expandSection(page, 'Formatting & Units');
-		await page.locator('.y-axis-unit-selector-v2').first().hover();
-		await page.locator('.y-axis-unit-selector-v2 .ant-select-clear').first().click();
-		await saveWidgetEdit(page);
-
-		// Suffix should be gone from the rendered panel.
-		await expect(page.getByTestId('value-graph-suffix-unit')).toHaveCount(0);
-	});
-
-	test('TC-09 panel type switch from Number to Time Series persists and re-renders', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await changePanelType(page, 'Time Series');
-		// Time Series exposes Fill gaps — confirm the right pane re-rendered.
-		await expect(page.locator('section.fill-gaps')).toBeVisible();
-
-		await saveWidgetEdit(page);
-
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-		await expect(page).toHaveURL(/graphType=graph/);
-
-		// Reset: switch back to Number for downstream TCs.
-		await changePanelType(page, 'Number');
-		await saveWidgetEdit(page);
-	});
-
-	test('TC-10 sections hidden for VALUE are not rendered in the right pane', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		// Hidden by the panel-type matrix for VALUE — these sections are not
-		// rendered in the DOM at all (conditionally excluded by RightContainer).
-		await expect(page.locator('section.soft-min-max')).toHaveCount(0);
-		await expect(page.locator('section.log-scale')).toHaveCount(0);
-		await expect(page.locator('section.legend-position')).toHaveCount(0);
-		await expect(page.locator('section.fill-gaps')).toHaveCount(0);
-		await expect(page.locator('section.stack-chart')).toHaveCount(0);
-
-		// Expected to be present in the always-open General and Visualization
-		// sections.
-		await expect(page.getByTestId('panel-name-input')).toBeVisible();
-		await expect(page.getByTestId('panel-change-select')).toBeVisible();
-
-		// The "Formatting & Units" section is collapsed on open — expand it to
-		// verify the controls are rendered for VALUE.
-		await expandSection(page, 'Formatting & Units');
-		await expect(page.getByTestId('decimal-precision-selector')).toBeVisible();
-
-		// The "Thresholds" section is collapsed when there are no thresholds —
-		// expand it to verify the Add Threshold CTA is rendered for VALUE.
-		await expandSection(page, 'Thresholds');
-		await expect(page.getByTestId('add-threshold-cta')).toBeVisible();
-	});
-
-	test('TC-11 discarding right-pane changes does not persist or visually update', async ({
-		authedPage: page,
-	}) => {
-		await gotoFixtureDashboard(page);
-		await openWidgetEditor(page, FIXTURE_PANEL_TITLE);
-
-		await page.getByTestId('panel-name-input').fill('discard-value-test');
-
-		let putFired = false;
-		await page.route(/\/api\/v1\/dashboards\//, (route) => {
-			if (route.request().method() === 'PUT') {
-				putFired = true;
-			}
-			route.continue();
-		});
-
-		await page.getByTestId('discard-button').click();
-		// If a discard confirmation appears, OK it. Right-pane-only changes
-		// usually don't trigger one.
-		const confirmDialog = page.getByRole('dialog').last();
-		await confirmDialog
-			.getByRole('button', { name: /^OK$/i })
-			.click({ timeout: 1000 })
-			.catch(() => {
-				// no modal — the editor navigated away immediately
-			});
-
-		await page.waitForURL(/\/dashboard\/[0-9a-f-]+(?:\?|$)/);
-		await expect(page.getByTestId(FIXTURE_PANEL_TITLE).first()).toBeVisible();
-		expect(putFired).toBe(false);
-	});
-});

tests/fixtures/traces.py

@@ -236,8 +236,9 @@ class Traces(ABC):
     attributes_number: dict[str, np.float64]
     attributes_bool: dict[str, bool]
     resources_string: dict[str, str]
-    events: list[str]
-    links: str
+    # Accepting parsed events and links, but will be stored as list[str], str in db
+    events: list[dict[str, Any]]
+    links: list[dict[str, Any]]
     response_status_code: str
     external_http_url: str
     http_url: str
@@ -423,10 +424,17 @@ class Traces(ABC):
                     )
                 )
 
-        # Process events and derive error events
+        # Process events and derive error events. self.events holds the parsed
+        # response shape; np_arr() encodes back to the DB format on insert.
         self.events = []
         for event in events:
-            self.events.append(json.dumps([event.name, event.time_unix_nano, event.attribute_map]))
+            self.events.append(
+                {
+                    "name": event.name,
+                    "timeUnixNano": int(event.time_unix_nano),
+                    "attributes": dict(event.attribute_map),
+                }
+            )
 
             # Create error events for exception events (following Go exporter logic)
             if event.name == "exception":
@@ -448,7 +456,26 @@ class Traces(ABC):
                 ),
             )
 
-        self.links = json.dumps([link.__dict__() for link in links_copy], separators=(",", ":"))
+        # self.links holds the parsed response shape (trace_id/span_id only;
+        # ref_type is dropped to match the API). np_arr() re-encodes for DB insert.
+        self.links = [{"traceId": link.trace_id, "spanId": link.span_id} for link in links_copy]
+        self._links_db = json.dumps(
+            [link.__dict__() for link in links_copy],
+            separators=(",", ":"),
+        )
+        # DB shape per event: {"name", "timeUnixNano", "attributeMap"}. Must match
+        # what the consume-layer parser in pkg/types/spantypes expects.
+        self._events_db = [
+            json.dumps(
+                {
+                    "name": event.name,
+                    "timeUnixNano": int(event.time_unix_nano),
+                    "attributeMap": dict(event.attribute_map),
+                },
+                separators=(",", ":"),
+            )
+            for event in events
+        ]
 
         # Initialize resource
         self.resource = []
@@ -563,8 +590,8 @@ class Traces(ABC):
                 self.attributes_number,
                 self.attributes_bool,
                 self.resources_string,
-                self.events,
-                self.links,
+                self._events_db,
+                self._links_db,
                 self.response_status_code,
                 self.external_http_url,
                 self.http_url,

tests/integration/tests/querier/04_traces.py

@@ -17,7 +17,51 @@ from fixtures.querier import (
     index_series_by_label,
     make_query_request,
 )
-from fixtures.traces import TraceIdGenerator, Traces, TracesKind, TracesStatusCode
+from fixtures.traces import (
+    TraceIdGenerator,
+    Traces,
+    TracesEvent,
+    TracesKind,
+    TracesLink,
+    TracesRefType,
+    TracesStatusCode,
+)
+
+# All keys returned by the trace list endpoint when selectFields is empty:
+# every intrinsic and calculated column, plus the merged `attributes` and
+# `resource` maps that wrap the contextual columns in the response layer.
+ALL_SELECT_FIELDS = [
+    # all intrinsic columns
+    "timestamp",
+    "trace_id",
+    "span_id",
+    "trace_state",
+    "parent_span_id",
+    "flags",
+    "name",
+    "kind",
+    "kind_string",
+    "duration_nano",
+    "status_code",
+    "status_message",
+    "status_code_string",
+    "events",
+    "links",
+    # all calculated columns
+    "response_status_code",
+    "external_http_url",
+    "http_url",
+    "external_http_method",
+    "http_method",
+    "http_host",
+    "db_name",
+    "db_operation",
+    "has_error",
+    "is_remote",
+    # all contextual columns (merged in response layer)
+    "attributes",
+    "resource",
+]
 
 
 def test_traces_list(
@@ -473,7 +517,9 @@ def test_traces_list(
 @pytest.mark.parametrize(
     "payload,status_code,results",
     [
-        # Case 1: order by timestamp field which there in attributes as well
+        # Case 1: order by timestamp; empty selectFields returns the full
+        # response shape (all intrinsic + calculated columns plus the merged
+        # `attributes` and `resource` maps). x[3] (topic-service) is latest.
         pytest.param(
             {
                 "type": "builder_query",
@@ -487,19 +533,42 @@ def test_traces_list(
             },
             HTTPStatus.OK,
             lambda x: [
-                x[3].duration_nano,
+                {
+                    **x[3].attribute_string,
+                    **x[3].attributes_number,
+                    **x[3].attributes_bool,
+                },  # attributes
+                x[3].db_name,
+                x[3].db_operation,
+                int(x[3].duration_nano),
+                x[3].events,
+                x[3].external_http_method,
+                x[3].external_http_url,
+                int(x[3].flags),
+                x[3].has_error,
+                x[3].http_host,
+                x[3].http_method,
+                x[3].http_url,
+                x[3].is_remote,
+                int(x[3].kind),
+                x[3].kind_string,
+                x[3].links,
                 x[3].name,
+                x[3].parent_span_id,
+                x[3].resources_string,
                 x[3].response_status_code,
-                x[3].service_name,
                 x[3].span_id,
+                int(x[3].status_code),
+                x[3].status_code_string,
+                x[3].status_message,
                 format_timestamp(x[3].timestamp),
                 x[3].trace_id,
+                x[3].trace_state,
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
-        # Case 2: order by attribute timestamp field which is there in attributes as well
-        # This should break but it doesn't because attribute.timestamp gets adjusted to timestamp
-        # because of default trace.timestamp gets added by default and bug in field mapper picks
-        # instrinsic field
+        # Case 2: order by attribute.timestamp. The key resolves to the
+        # intrinsic span.timestamp column, so the latest span (x[3]) is
+        # returned with the same full response shape as Case 1.
         pytest.param(
             {
                 "type": "builder_query",
@@ -513,13 +582,37 @@ def test_traces_list(
             },
             HTTPStatus.OK,
             lambda x: [
-                x[3].duration_nano,
+                {
+                    **x[3].attribute_string,
+                    **x[3].attributes_number,
+                    **x[3].attributes_bool,
+                },  # attributes
+                x[3].db_name,
+                x[3].db_operation,
+                int(x[3].duration_nano),
+                x[3].events,
+                x[3].external_http_method,
+                x[3].external_http_url,
+                int(x[3].flags),
+                x[3].has_error,
+                x[3].http_host,
+                x[3].http_method,
+                x[3].http_url,
+                x[3].is_remote,
+                int(x[3].kind),
+                x[3].kind_string,
+                x[3].links,
                 x[3].name,
+                x[3].parent_span_id,
+                x[3].resources_string,
                 x[3].response_status_code,
-                x[3].service_name,
                 x[3].span_id,
+                int(x[3].status_code),
+                x[3].status_code_string,
+                x[3].status_message,
                 format_timestamp(x[3].timestamp),
                 x[3].trace_id,
+                x[3].trace_state,
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 3: select timestamp with empty order by
@@ -542,7 +635,7 @@ def test_traces_list(
             ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 4: select attribute.timestamp with empty order by
-        # This doesn't return any data because of where_clause using aliased timestamp
+        # This returns the one span which has attribute.timestamp
         pytest.param(
             {
                 "type": "builder_query",
@@ -556,7 +649,11 @@ def test_traces_list(
                 },
             },
             HTTPStatus.OK,
-            lambda x: [],  # type: Callable[[List[Traces]], List[Any]]
+            lambda x: [
+                x[0].span_id,
+                format_timestamp(x[0].timestamp),
+                x[0].trace_id,
+            ],  # type: Callable[[List[Traces]], List[Any]]
         ),
         # Case 5: select timestamp with timestamp order by
         pytest.param(
@@ -693,6 +790,159 @@ def test_traces_list_with_corrupt_data(
                 assert data[key] == value
 
 
+def _verify_events_links_full(rows: list[dict], traces: list[Traces]) -> None:
+    """Empty-selectFields case: events/links arrive parsed into structured objects.
+    Every row's events/links should match the fixture's stored parsed shape
+    (the fixture's `.events`/`.links` mirror the API response shape directly).
+    """
+    for row, trace in zip(rows, traces, strict=True):
+        assert row["data"]["events"] == trace.events
+        assert row["data"]["links"] == trace.links
+        # Jaeger-era `refType` is dropped at the consume layer.
+        for link in row["data"]["links"]:
+            assert "refType" not in link
+
+
+def _verify_events_links_skip(rows: list[dict], traces: list[Traces]) -> None:
+    """Projected-selectFields case: nothing to verify beyond the key set."""
+
+
+@pytest.mark.parametrize(
+    "select_fields,status_code,expected_keys,verify_values",
+    [
+        pytest.param(
+            [],
+            HTTPStatus.OK,
+            ALL_SELECT_FIELDS,
+            _verify_events_links_full,
+        ),
+        pytest.param(
+            [
+                {"name": "service.name"},
+            ],
+            HTTPStatus.OK,
+            ["timestamp", "trace_id", "span_id", "service.name"],
+            _verify_events_links_skip,
+        ),
+    ],
+)
+def test_traces_list_with_select_fields(
+    signoz: types.SigNoz,
+    create_user_admin: None,  # pylint: disable=unused-argument
+    get_token: Callable[[str, str], str],
+    insert_traces: Callable[[list[Traces]], None],
+    select_fields: list[dict],
+    status_code: HTTPStatus,
+    expected_keys: list[str],
+    verify_values: Callable[[list[dict], list[Traces]], None],
+) -> None:
+    """
+    Setup:
+    Insert a root span with no events/links and a child span carrying two
+    events and one user-supplied link.
+
+    Tests:
+    1. Empty select fields should return all the fields, and the `events` /
+       `links` columns should arrive parsed into structured objects (events
+       carry `attributes`, links carry only `traceId`/`spanId` — refType is
+       dropped at the consume layer).
+    2. Non-empty select field should return the select field along with
+       timestamp, trace_id and span_id.
+    """
+    now = datetime.now(tz=UTC).replace(second=0, microsecond=0)
+
+    parent_trace_id = TraceIdGenerator.trace_id()
+    parent_span_id = TraceIdGenerator.span_id()
+    child_span_id = TraceIdGenerator.span_id()
+    linked_trace_id = TraceIdGenerator.trace_id()
+    linked_span_id = TraceIdGenerator.span_id()
+
+    event_one = TracesEvent(
+        name="request_received",
+        timestamp=now - timedelta(seconds=3, microseconds=500_000),
+        attribute_map={"http.method": "GET", "http.route": "/api/chat"},
+    )
+    event_two = TracesEvent(
+        name="cache_lookup",
+        timestamp=now - timedelta(seconds=3, microseconds=400_000),
+        attribute_map={"cache.hit": "true", "cache.key": "user:123:prompt"},
+    )
+    user_link = TracesLink(
+        trace_id=linked_trace_id,
+        span_id=linked_span_id,
+        ref_type=TracesRefType.REF_TYPE_FOLLOWS_FROM,
+    )
+
+    traces = [
+        # Root span: no events, no links. Verifies the empty-case parsed shape.
+        Traces(
+            timestamp=now - timedelta(seconds=4),
+            duration=timedelta(seconds=3),
+            trace_id=parent_trace_id,
+            span_id=parent_span_id,
+            parent_span_id="",
+            name="root span",
+            kind=TracesKind.SPAN_KIND_SERVER,
+            status_code=TracesStatusCode.STATUS_CODE_OK,
+            resources={"service.name": "events-links-service"},
+            attributes={"http.request.method": "GET"},
+        ),
+        # Child span: two events + one user-supplied link. The fixture
+        # auto-inserts a CHILD_OF link for the parent, so the parsed response
+        # contains two links total — the auto-inserted one first.
+        Traces(
+            timestamp=now - timedelta(seconds=3),
+            duration=timedelta(seconds=1),
+            trace_id=parent_trace_id,
+            span_id=child_span_id,
+            parent_span_id=parent_span_id,
+            name="child span",
+            kind=TracesKind.SPAN_KIND_INTERNAL,
+            status_code=TracesStatusCode.STATUS_CODE_OK,
+            resources={"service.name": "events-links-service"},
+            attributes={"http.request.method": "GET"},
+            events=[event_one, event_two],
+            links=[user_link],
+        ),
+    ]
+
+    insert_traces(traces)
+
+    token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
+
+    payload = {
+        "type": "builder_query",
+        "spec": {
+            "name": "A",
+            "signal": "traces",
+            "filter": {"expression": "resource.service.name = 'events-links-service'"},
+            "selectFields": select_fields,
+            "order": [{"key": {"name": "timestamp"}, "direction": "asc"}],
+            "limit": 10,
+        },
+    }
+
+    response = make_query_request(
+        signoz,
+        token,
+        start_ms=int((datetime.now(tz=UTC) - timedelta(minutes=5)).timestamp() * 1000),
+        end_ms=int(datetime.now(tz=UTC).timestamp() * 1000),
+        request_type="raw",
+        queries=[payload],
+    )
+    assert response.status_code == status_code
+
+    if response.status_code != HTTPStatus.OK:
+        return
+
+    rows = response.json()["data"]["data"]["results"][0]["rows"]
+    assert len(rows) == 2
+    for row in rows:
+        assert set(row["data"].keys()) == set(expected_keys)
+
+    verify_values(rows, traces)
+
+
 @pytest.mark.parametrize(
     "order_by,aggregation_alias,expected_status",
     [