Merge branch 'main' into SIG-3496

.github/workflows/integrationci.yaml

@@ -53,9 +53,9 @@ jobs:
           - sqlite
         clickhouse-version:
           - 25.5.6
-          - 25.10.5
+          - 25.10.1
         schema-migrator-version:
-          - v0.142.0
+          - v0.129.7
         postgres-version:
           - 15
     if: |

cmd/community/server.go

@@ -85,9 +85,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
-		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
-			return querier.NewHandler(ps, q, a)
-		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)

cmd/enterprise/server.go

@@ -9,7 +9,6 @@ import (
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn"
 	"github.com/SigNoz/signoz/ee/authn/callbackauthn/samlcallbackauthn"
 	"github.com/SigNoz/signoz/ee/authz/openfgaauthz"
-	eequerier "github.com/SigNoz/signoz/ee/querier"
 	"github.com/SigNoz/signoz/ee/authz/openfgaschema"
 	"github.com/SigNoz/signoz/ee/gateway/httpgateway"
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
@@ -125,10 +124,6 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
-		func(ps factory.ProviderSettings, q querier.Querier, a analytics.Analytics) querier.Handler {
-			communityHandler := querier.NewHandler(ps, q, a)
-			return eequerier.NewHandler(ps, q, communityHandler)
-		},
 	)
 
 	if err != nil {

docs/api/openapi.yml

@@ -307,16 +307,11 @@ components:
           type: string
         value:
           type: string
-      required:
-      - id
-      - value
       type: object
     GatewaytypesGettableCreatedIngestionKeyLimit:
       properties:
         id:
           type: string
-      required:
-      - id
       type: object
     GatewaytypesGettableIngestionKeys:
       properties:
@@ -437,8 +432,6 @@ components:
             type: string
           nullable: true
           type: array
-      required:
-      - name
       type: object
     GatewaytypesPostableIngestionKeyLimit:
       properties:
@@ -461,8 +454,6 @@ components:
             type: string
           nullable: true
           type: array
-      required:
-      - config
       type: object
     MetricsexplorertypesListMetric:
       properties:
@@ -1929,82 +1920,6 @@ components:
           format: date-time
           type: string
       type: object
-    ZeustypesGettableHost:
-      properties:
-        hosts:
-          items:
-            $ref: '#/components/schemas/ZeustypesHost'
-          nullable: true
-          type: array
-        name:
-          type: string
-        state:
-          type: string
-        tier:
-          type: string
-      required:
-      - name
-      - state
-      - tier
-      - hosts
-      type: object
-    ZeustypesHost:
-      properties:
-        is_default:
-          type: boolean
-        name:
-          type: string
-        url:
-          type: string
-      required:
-      - name
-      - is_default
-      - url
-      type: object
-    ZeustypesPostableHost:
-      properties:
-        name:
-          type: string
-      required:
-      - name
-      type: object
-    ZeustypesPostableProfile:
-      properties:
-        existing_observability_tool:
-          type: string
-        has_existing_observability_tool:
-          type: boolean
-        logs_scale_per_day_in_gb:
-          format: int64
-          type: integer
-        number_of_hosts:
-          format: int64
-          type: integer
-        number_of_services:
-          format: int64
-          type: integer
-        reasons_for_interest_in_signoz:
-          items:
-            type: string
-          nullable: true
-          type: array
-        timeline_for_migrating_to_signoz:
-          type: string
-        uses_otel:
-          type: boolean
-        where_did_you_discover_signoz:
-          type: string
-      required:
-      - uses_otel
-      - has_existing_observability_tool
-      - existing_observability_tool
-      - reasons_for_interest_in_signoz
-      - logs_scale_per_day_in_gb
-      - number_of_services
-      - number_of_hosts
-      - where_did_you_discover_signoz
-      - timeline_for_migrating_to_signoz
-      type: object
   securitySchemes:
     api_key:
       description: API Keys
@@ -3223,29 +3138,12 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
         "500":
           content:
             application/json:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
       summary: Promote and index paths
       tags:
       - logs
@@ -3270,29 +3168,12 @@ paths:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
         "500":
           content:
             application/json:
               schema:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
-      security:
-      - api_key:
-        - EDITOR
-      - tokenizer:
-        - EDITOR
       summary: Promote and index paths
       tags:
       - logs
@@ -4839,7 +4720,6 @@ paths:
       parameters:
       - in: query
         name: name
-        required: true
         schema:
           type: string
       - in: query
@@ -5658,174 +5538,6 @@ paths:
       summary: Rotate session
       tags:
       - sessions
-  /api/v2/zeus/hosts:
-    get:
-      deprecated: false
-      description: This endpoint gets the host info from zeus.
-      operationId: GetHosts
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/ZeustypesGettableHost'
-                  status:
-                    type: string
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Get host info from Zeus.
-      tags:
-      - zeus
-    put:
-      deprecated: false
-      description: This endpoint saves the host of a deployment to zeus.
-      operationId: PutHost
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ZeustypesPostableHost'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Put host in Zeus for a deployment.
-      tags:
-      - zeus
-  /api/v2/zeus/profiles:
-    put:
-      deprecated: false
-      description: This endpoint saves the profile of a deployment to zeus.
-      operationId: PutProfile
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ZeustypesPostableProfile'
-      responses:
-        "204":
-          description: No Content
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Put profile in Zeus for a deployment.
-      tags:
-      - zeus
   /api/v5/query_range:
     post:
       deprecated: false
@@ -6220,58 +5932,4 @@ paths:
         - VIEWER
       summary: Query range
       tags:
-      - querier
-  /api/v5/substitute_vars:
-    post:
-      deprecated: false
-      description: Replace variables in a query
-      operationId: ReplaceVariables
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeRequest'
-                  status:
-                    type: string
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Replace variables
-      tags:
-      - querier
+      - query

docs/contributing/go/handler.md

@@ -155,7 +155,6 @@ The `handler.New` function ties the HTTP handler to OpenAPI metadata via `OpenAP
 - **Request / RequestContentType**:
   - `Request` is a Go type that describes the request body or form.
   - `RequestContentType` is usually `"application/json"` or `"application/x-www-form-urlencoded"` (for callbacks like SAML).
-- **RequestExamples**: An array of `handler.OpenAPIExample` that provide concrete request payloads in the generated spec. See [Adding request examples](#adding-request-examples) below.
 - **Response / ResponseContentType**:
   - `Response` is the Go type for the successful response payload.
   - `ResponseContentType` is usually `"application/json"`; use `""` for responses without a body.
@@ -173,170 +172,8 @@ See existing examples in:
 - `addUserRoutes` (for typical JSON request/response)
 - `addSessionRoutes` (for form-encoded and redirect flows)
 
-## OpenAPI schema details for request/response types
-
-The OpenAPI spec is generated from the Go types you pass as `Request` and `Response` in `OpenAPIDef`. The following struct tags and interfaces control how those types appear in the generated schema.
-
-### Adding request examples
-
-Use the `RequestExamples` field in `OpenAPIDef` to provide concrete request payloads. Each example is a `handler.OpenAPIExample`:
-
-```go
-type OpenAPIExample struct {
-    Name        string // unique key for the example (e.g. "traces_time_series")
-    Summary     string // short description shown in docs (e.g. "Time series: count spans grouped by service")
-    Description string // optional longer description
-    Value       any    // the example payload, typically map[string]any
-}
-```
-
-For reference, see `pkg/apiserver/signozapiserver/querier.go` which defines examples inline for the `/api/v5/query_range` endpoint:
-
-```go
-if err := router.Handle("/api/v5/query_range", handler.New(provider.authZ.ViewAccess(provider.querierHandler.QueryRange), handler.OpenAPIDef{
-    ID:                 "QueryRangeV5",
-    Tags:               []string{"querier"},
-    Summary:            "Query range",
-    Description:        "Execute a composite query over a time range.",
-    Request:            new(qbtypes.QueryRangeRequest),
-    RequestContentType: "application/json",
-    RequestExamples: []handler.OpenAPIExample{
-        {
-            Name:    "traces_time_series",
-            Summary: "Time series: count spans grouped by service",
-            Value: map[string]any{
-                "schemaVersion": "v1",
-                "start":         1640995200000,
-                "end":           1640998800000,
-                "requestType":   "time_series",
-                "compositeQuery": map[string]any{
-                    "queries": []any{
-                        map[string]any{
-                            "type": "builder_query",
-                            "spec": map[string]any{
-                                "name":   "A",
-                                "signal": "traces",
-                                // ...
-                            },
-                        },
-                    },
-                },
-            },
-        },
-        // ... more examples
-    },
-    // ...
-})).Methods(http.MethodPost).GetError(); err != nil {
-    return err
-}
-```
-
-### `required` tag
-
-Use `required:"true"` on struct fields where the property is expected to be **present** in the JSON payload. This is different from the zero value, a field can have its zero value (e.g. `0`, `""`, `false`) and still be required. The `required` tag means the key itself must exist in the JSON object.
-
-```go
-type ListItem struct {
-    ...
-}
-
-type ListResponse struct {
-	List  []ListItem `json:"list" required:"true" nullable:"true"`
-	Total uint64     `json:"total" required:"true"`
-}
-```
-
-In this example, a response like `{"list": null, "total": 0}` is valid. Both keys are present (satisfying `required`), `total` has its zero value, and `list` is null (allowed by `nullable`). But `{"total": 0}` would violate the schema because the `list` key is missing.
-
-### `nullable` tag
-
-Use `nullable:"true"` on struct fields that can be `null` in the JSON payload. This is especially important for **slice and map fields** because in Go, the zero value for these types is `nil`, which serializes to `null` in JSON (not `[]` or `{}`).
-
-Be explicit about the distinction:
-
-- **Nullable list** (`nullable:"true"`): the field can be `null`. Use this when the Go code may return `nil` for the slice.
-- **Non-nullable list** (no `nullable` tag): the field is always an array, never `null`. Ensure the Go code initializes it to an empty slice (e.g. `make([]T, 0)`) before serializing.
-
-```go
-// Non-nullable: Go code must ensure this is always an initialized slice.
-type NonNullableExample struct {
-    Items []Item `json:"items" required:"true"`
-}
-```
-
-When defining your types, ask yourself: "Can this field be `null` in the JSON response, or is it always an array/object?" If the Go code ever returns a `nil` slice or map, mark it `nullable:"true"`.
-
-### `Enum()` method
-
-For types that have a fixed set of acceptable values, implement the `Enum() []any` method. This generates an `enum` constraint in the JSON schema so the OpenAPI spec accurately restricts the values.
-
-```go
-type Signal struct {
-    valuer.String
-}
-
-var (
-    SignalTraces  = Signal{valuer.NewString("traces")}
-    SignalLogs    = Signal{valuer.NewString("logs")}
-    SignalMetrics = Signal{valuer.NewString("metrics")}
-)
-
-func (Signal) Enum() []any {
-    return []any{
-        SignalTraces,
-        SignalLogs,
-        SignalMetrics,
-    }
-}
-```
-
-This produces the following in the generated OpenAPI spec:
-
-```yaml
-Signal:
-  enum:
-  - traces
-  - logs
-  - metrics
-  type: string
-```
-
-Every type with a known set of values **must** implement `Enum()`. Without it, the JSON schema will only show the base type (e.g. `string`) with no value constraints.
-
-### `JSONSchema()` method (custom schema)
-
-For types that need a completely custom JSON schema (for example, a field that accepts either a string or a number), implement the `jsonschema.Exposer` interface:
-
-```go
-var _ jsonschema.Exposer = Step{}
-
-func (Step) JSONSchema() (jsonschema.Schema, error) {
-    s := jsonschema.Schema{}
-    s.WithDescription("Step interval. Accepts a duration string or seconds.")
-
-    strSchema := jsonschema.Schema{}
-    strSchema.WithType(jsonschema.String.Type())
-    strSchema.WithExamples("60s", "5m", "1h")
-
-    numSchema := jsonschema.Schema{}
-    numSchema.WithType(jsonschema.Number.Type())
-    numSchema.WithExamples(60, 300, 3600)
-
-    s.OneOf = []jsonschema.SchemaOrBool{
-        strSchema.ToSchemaOrBool(),
-        numSchema.ToSchemaOrBool(),
-    }
-    return s, nil
-}
-```
-
-
 ## What should I remember?
 
 - **Keep handlers thin**: focus on HTTP concerns and delegate logic to modules/services.
 - **Always register routes through `signozapiserver`** using `handler.New` and a complete `OpenAPIDef`.
 - **Choose accurate request/response types** from the `types` packages so OpenAPI schemas are correct.
-- **Add `required:"true"`** on fields where the key must be present in the JSON (this is about key presence, not about the zero value).
-- **Add `nullable:"true"`** on fields that can be `null`. Pay special attention to slices and maps -- in Go these default to `nil` which serializes to `null`. If the field should always be an array, initialize it and do not mark it nullable.
-- **Implement `Enum()`** on every type that has a fixed set of acceptable values so the JSON schema generates proper `enum` constraints.
-- **Add request examples** via `RequestExamples` in `OpenAPIDef` for any non-trivial endpoint. See `pkg/apiserver/signozapiserver/querier.go` for reference.

ee/querier/handler.go

@@ -1,178 +0,0 @@
-package querier
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"io"
-	"net/http"
-	"runtime/debug"
-
-	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/factory"
-	"github.com/SigNoz/signoz/pkg/http/render"
-	"github.com/SigNoz/signoz/pkg/querier"
-	"github.com/SigNoz/signoz/pkg/types/authtypes"
-	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-type handler struct {
-	set       factory.ProviderSettings
-	querier   querier.Querier
-	community querier.Handler
-}
-
-func NewHandler(set factory.ProviderSettings, querier querier.Querier, community querier.Handler) querier.Handler {
-	return &handler{
-		set:       set,
-		querier:   querier,
-		community: community,
-	}
-}
-
-func (h *handler) QueryRange(rw http.ResponseWriter, req *http.Request) {
-	bodyBytes, err := io.ReadAll(req.Body)
-	if err != nil {
-		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to read request body: %v", err))
-		return
-	}
-	req.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
-
-	ctx := req.Context()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	var queryRangeRequest qbtypes.QueryRangeRequest
-	if err := json.NewDecoder(req.Body).Decode(&queryRangeRequest); err != nil {
-		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to decode request body: %v", err))
-		return
-	}
-
-	defer func() {
-		if r := recover(); r != nil {
-			stackTrace := string(debug.Stack())
-
-			queryJSON, _ := json.Marshal(queryRangeRequest)
-
-			h.set.Logger.ErrorContext(ctx, "panic in QueryRange",
-				"error", r,
-				"user", claims.UserID,
-				"payload", string(queryJSON),
-				"stacktrace", stackTrace,
-			)
-
-			render.Error(rw, errors.NewInternalf(
-				errors.CodeInternal,
-				"Something went wrong on our end. It's not you, it's us. Our team is notified about it. Reach out to support if issue persists.",
-			))
-		}
-	}()
-
-	if err := queryRangeRequest.Validate(); err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	if anomalyQuery, ok := queryRangeRequest.IsAnomalyRequest(); ok {
-		anomalies, err := h.handleAnomalyQuery(ctx, orgID, anomalyQuery, queryRangeRequest)
-		if err != nil {
-			render.Error(rw, errors.NewInternalf(errors.CodeInternal, "failed to get anomalies: %v", err))
-			return
-		}
-
-		results := []any{}
-		for _, item := range anomalies.Results {
-			results = append(results, item)
-		}
-
-		// Build step intervals from the anomaly query
-		stepIntervals := make(map[string]uint64)
-		if anomalyQuery.StepInterval.Duration > 0 {
-			stepIntervals[anomalyQuery.Name] = uint64(anomalyQuery.StepInterval.Duration.Seconds())
-		}
-
-		finalResp := &qbtypes.QueryRangeResponse{
-			Type: queryRangeRequest.RequestType,
-			Data: qbtypes.QueryData{
-				Results: results,
-			},
-			Meta: qbtypes.ExecStats{
-				StepIntervals: stepIntervals,
-			},
-		}
-
-		render.Success(rw, http.StatusOK, finalResp)
-		return
-	}
-
-	// regular query range request, delegate to community handler
-	req.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
-	h.community.QueryRange(rw, req)
-}
-
-func (h *handler) QueryRawStream(rw http.ResponseWriter, req *http.Request) {
-	h.community.QueryRawStream(rw, req)
-}
-
-func (h *handler) ReplaceVariables(rw http.ResponseWriter, req *http.Request) {
-	h.community.ReplaceVariables(rw, req)
-}
-
-func extractSeasonality(anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]) anomalyV2.Seasonality {
-	for _, fn := range anomalyQuery.Functions {
-		if fn.Name == qbtypes.FunctionNameAnomaly {
-			for _, arg := range fn.Args {
-				if arg.Name == "seasonality" {
-					if seasonalityStr, ok := arg.Value.(string); ok {
-						switch seasonalityStr {
-						case "weekly":
-							return anomalyV2.SeasonalityWeekly
-						case "hourly":
-							return anomalyV2.SeasonalityHourly
-						}
-					}
-				}
-			}
-		}
-	}
-	return anomalyV2.SeasonalityDaily // default
-}
-
-func (h *handler) createAnomalyProvider(seasonality anomalyV2.Seasonality) anomalyV2.Provider {
-	switch seasonality {
-	case anomalyV2.SeasonalityWeekly:
-		return anomalyV2.NewWeeklyProvider(
-			anomalyV2.WithQuerier[*anomalyV2.WeeklyProvider](h.querier),
-			anomalyV2.WithLogger[*anomalyV2.WeeklyProvider](h.set.Logger),
-		)
-	case anomalyV2.SeasonalityHourly:
-		return anomalyV2.NewHourlyProvider(
-			anomalyV2.WithQuerier[*anomalyV2.HourlyProvider](h.querier),
-			anomalyV2.WithLogger[*anomalyV2.HourlyProvider](h.set.Logger),
-		)
-	default:
-		return anomalyV2.NewDailyProvider(
-			anomalyV2.WithQuerier[*anomalyV2.DailyProvider](h.querier),
-			anomalyV2.WithLogger[*anomalyV2.DailyProvider](h.set.Logger),
-		)
-	}
-}
-
-func (h *handler) handleAnomalyQuery(ctx context.Context, orgID valuer.UUID, anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation], queryRangeRequest qbtypes.QueryRangeRequest) (*anomalyV2.AnomaliesResponse, error) {
-	seasonality := extractSeasonality(anomalyQuery)
-	provider := h.createAnomalyProvider(seasonality)
-
-	return provider.GetAnomalies(ctx, orgID, &anomalyV2.AnomaliesRequest{Params: queryRangeRequest})
-}

ee/query-service/app/api/api.go

@@ -2,13 +2,17 @@ package api
 
 import (
 	"net/http"
+	"net/http/httputil"
 	"time"
 
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
+	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
 	"github.com/SigNoz/signoz/pkg/global"
+	"github.com/SigNoz/signoz/pkg/http/handler"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
+	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/cloudintegrations"
 	"github.com/SigNoz/signoz/pkg/query-service/app/integrations"
@@ -29,6 +33,7 @@ type APIHandlerOptions struct {
 	IntegrationsController        *integrations.Controller
 	CloudIntegrationsController   *cloudintegrations.Controller
 	LogsParsingPipelineController *logparsingpipeline.LogParsingPipelineController
+	Gateway                       *httputil.ReverseProxy
 	GatewayUrl                    string
 	// Querier Influx Interval
 	FluxInterval time.Duration
@@ -52,6 +57,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
 		Signoz:                        signoz,
+		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
 	}, config)
 
@@ -74,6 +80,10 @@ func (ah *APIHandler) UM() *usage.Manager {
 	return ah.opts.UsageManager
 }
 
+func (ah *APIHandler) Gateway() *httputil.ReverseProxy {
+	return ah.opts.Gateway
+}
+
 // RegisterRoutes registers routes for this handler on the given router
 func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// note: add ee override methods first
@@ -96,6 +106,17 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	// v4
 	router.HandleFunc("/api/v4/query_range", am.ViewAccess(ah.queryRangeV4)).Methods(http.MethodPost)
 
+	// v5
+	router.Handle("/api/v5/query_range", handler.New(
+		am.ViewAccess(ah.queryRangeV5),
+		querierAPI.QueryRangeV5OpenAPIDef,
+	)).Methods(http.MethodPost)
+
+	router.HandleFunc("/api/v5/substitute_vars", am.ViewAccess(ah.QuerierAPI.ReplaceVariables)).Methods(http.MethodPost)
+
+	// Gateway
+	router.PathPrefix(gateway.RoutePrefix).HandlerFunc(am.EditAccess(ah.ServeGatewayHTTP))
+
 	ah.APIHandler.RegisterRoutes(router, am)
 
 }

ee/query-service/app/api/gateway.go

@@ -0,0 +1,58 @@
+package api
+
+import (
+	"net/http"
+	"strings"
+
+	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+func (ah *APIHandler) ServeGatewayHTTP(rw http.ResponseWriter, req *http.Request) {
+	ctx := req.Context()
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "orgId is invalid"))
+		return
+	}
+
+	validPath := false
+	for _, allowedPrefix := range gateway.AllowedPrefix {
+		if strings.HasPrefix(req.URL.Path, gateway.RoutePrefix+allowedPrefix) {
+			validPath = true
+			break
+		}
+	}
+
+	if !validPath {
+		rw.WriteHeader(http.StatusNotFound)
+		return
+	}
+
+	license, err := ah.Signoz.Licensing.GetActive(ctx, orgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	//Create headers
+	var licenseKey string
+	if license != nil {
+		licenseKey = license.Key
+	}
+
+	req.Header.Set("X-Signoz-Cloud-Api-Key", licenseKey)
+	req.Header.Set("X-Consumer-Username", "lid:00000000-0000-0000-0000-000000000000")
+	req.Header.Set("X-Consumer-Groups", "ns:default")
+
+	ah.Gateway().ServeHTTP(rw, req)
+}

ee/query-service/app/api/queryrange.go

@@ -2,11 +2,16 @@ package api
 
 import (
 	"bytes"
+	"context"
+	"encoding/json"
 	"fmt"
 	"io"
 	"net/http"
+	"runtime/debug"
 
+	anomalyV2 "github.com/SigNoz/signoz/ee/anomaly"
 	"github.com/SigNoz/signoz/ee/query-service/anomaly"
+	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/http/render"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/query-service/app/queryBuilder"
@@ -15,6 +20,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
 	"go.uber.org/zap"
+
+	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 )
 
 func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
@@ -137,3 +144,140 @@ func (aH *APIHandler) queryRangeV4(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+func extractSeasonality(anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]) anomalyV2.Seasonality {
+	for _, fn := range anomalyQuery.Functions {
+		if fn.Name == qbtypes.FunctionNameAnomaly {
+			for _, arg := range fn.Args {
+				if arg.Name == "seasonality" {
+					if seasonalityStr, ok := arg.Value.(string); ok {
+						switch seasonalityStr {
+						case "weekly":
+							return anomalyV2.SeasonalityWeekly
+						case "hourly":
+							return anomalyV2.SeasonalityHourly
+						}
+					}
+				}
+			}
+		}
+	}
+	return anomalyV2.SeasonalityDaily // default
+}
+
+func createAnomalyProvider(aH *APIHandler, seasonality anomalyV2.Seasonality) anomalyV2.Provider {
+	switch seasonality {
+	case anomalyV2.SeasonalityWeekly:
+		return anomalyV2.NewWeeklyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.WeeklyProvider](aH.Signoz.Querier),
+			anomalyV2.WithLogger[*anomalyV2.WeeklyProvider](aH.Signoz.Instrumentation.Logger()),
+		)
+	case anomalyV2.SeasonalityHourly:
+		return anomalyV2.NewHourlyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.HourlyProvider](aH.Signoz.Querier),
+			anomalyV2.WithLogger[*anomalyV2.HourlyProvider](aH.Signoz.Instrumentation.Logger()),
+		)
+	default:
+		return anomalyV2.NewDailyProvider(
+			anomalyV2.WithQuerier[*anomalyV2.DailyProvider](aH.Signoz.Querier),
+			anomalyV2.WithLogger[*anomalyV2.DailyProvider](aH.Signoz.Instrumentation.Logger()),
+		)
+	}
+}
+
+func (aH *APIHandler) handleAnomalyQuery(ctx context.Context, orgID valuer.UUID, anomalyQuery *qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation], queryRangeRequest qbtypes.QueryRangeRequest) (*anomalyV2.AnomaliesResponse, error) {
+	seasonality := extractSeasonality(anomalyQuery)
+	provider := createAnomalyProvider(aH, seasonality)
+
+	return provider.GetAnomalies(ctx, orgID, &anomalyV2.AnomaliesRequest{Params: queryRangeRequest})
+}
+
+func (aH *APIHandler) queryRangeV5(rw http.ResponseWriter, req *http.Request) {
+
+	bodyBytes, err := io.ReadAll(req.Body)
+	if err != nil {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to read request body: %v", err))
+		return
+	}
+	req.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
+
+	ctx := req.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	var queryRangeRequest qbtypes.QueryRangeRequest
+	if err := json.NewDecoder(req.Body).Decode(&queryRangeRequest); err != nil {
+		render.Error(rw, errors.NewInvalidInputf(errors.CodeInvalidInput, "failed to decode request body: %v", err))
+		return
+	}
+
+	defer func() {
+		if r := recover(); r != nil {
+			stackTrace := string(debug.Stack())
+
+			queryJSON, _ := json.Marshal(queryRangeRequest)
+
+			aH.Signoz.Instrumentation.Logger().ErrorContext(ctx, "panic in QueryRange",
+				"error", r,
+				"user", claims.UserID,
+				"payload", string(queryJSON),
+				"stacktrace", stackTrace,
+			)
+
+			render.Error(rw, errors.NewInternalf(
+				errors.CodeInternal,
+				"Something went wrong on our end. It's not you, it's us. Our team is notified about it. Reach out to support if issue persists.",
+			))
+		}
+	}()
+
+	if err := queryRangeRequest.Validate(); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID, err := valuer.NewUUID(claims.OrgID)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if anomalyQuery, ok := queryRangeRequest.IsAnomalyRequest(); ok {
+		anomalies, err := aH.handleAnomalyQuery(ctx, orgID, anomalyQuery, queryRangeRequest)
+		if err != nil {
+			render.Error(rw, errors.NewInternalf(errors.CodeInternal, "failed to get anomalies: %v", err))
+			return
+		}
+
+		results := []any{}
+		for _, item := range anomalies.Results {
+			results = append(results, item)
+		}
+
+		// Build step intervals from the anomaly query
+		stepIntervals := make(map[string]uint64)
+		if anomalyQuery.StepInterval.Duration > 0 {
+			stepIntervals[anomalyQuery.Name] = uint64(anomalyQuery.StepInterval.Duration.Seconds())
+		}
+
+		finalResp := &qbtypes.QueryRangeResponse{
+			Type: queryRangeRequest.RequestType,
+			Data: qbtypes.QueryData{
+				Results: results,
+			},
+			Meta: qbtypes.ExecStats{
+				StepIntervals: stepIntervals,
+			},
+		}
+
+		render.Success(rw, http.StatusOK, finalResp)
+		return
+	} else {
+		// regular query range request, let the querier handle it
+		req.Body = io.NopCloser(bytes.NewBuffer(bodyBytes))
+		aH.QuerierAPI.QueryRange(rw, req)
+	}
+}

ee/query-service/app/server.go

@@ -19,6 +19,7 @@ import (
 	"github.com/gorilla/handlers"
 
 	"github.com/SigNoz/signoz/ee/query-service/app/api"
+	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/rules"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
@@ -71,6 +72,11 @@ type Server struct {
 
 // NewServer creates and initializes Server
 func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
+	gatewayProxy, err := gateway.NewProxy(config.Gateway.URL.String(), gateway.RoutePrefix)
+	if err != nil {
+		return nil, err
+	}
+
 	cacheForTraceDetail, err := memorycache.New(context.TODO(), signoz.Instrumentation.ToProviderSettings(), cache.Config{
 		Provider: "memory",
 		Memory: cache.Memory{
@@ -164,6 +170,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		CloudIntegrationsController:   cloudIntegrationsController,
 		LogsParsingPipelineController: logParsingPipelineController,
 		FluxInterval:                  config.Querier.FluxInterval,
+		Gateway:                       gatewayProxy,
 		GatewayUrl:                    config.Gateway.URL.String(),
 		GlobalConfig:                  config.Global,
 	}
@@ -233,6 +240,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
+	apiHandler.RegisterQueryRangeV5Routes(r, am)
 	apiHandler.RegisterWebSocketPaths(r, am)
 	apiHandler.RegisterMessagingQueuesRoutes(r, am)
 	apiHandler.RegisterThirdPartyApiRoutes(r, am)

ee/query-service/integrations/gateway/noop.go

@@ -0,0 +1,9 @@
+package gateway
+
+import (
+	"net/http/httputil"
+)
+
+func NewNoopProxy() (*httputil.ReverseProxy, error) {
+	return &httputil.ReverseProxy{}, nil
+}

ee/query-service/integrations/gateway/proxy.go

@@ -0,0 +1,66 @@
+package gateway
+
+import (
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"path"
+	"strings"
+)
+
+var (
+	RoutePrefix   string   = "/api/gateway"
+	AllowedPrefix []string = []string{"/v1/workspaces/me", "/v2/profiles/me", "/v2/deployments/me"}
+)
+
+type proxy struct {
+	url       *url.URL
+	stripPath string
+}
+
+func NewProxy(u string, stripPath string) (*httputil.ReverseProxy, error) {
+	url, err := url.Parse(u)
+	if err != nil {
+		return nil, err
+	}
+
+	proxy := &proxy{url: url, stripPath: stripPath}
+
+	return &httputil.ReverseProxy{
+		Rewrite:        proxy.rewrite,
+		ModifyResponse: proxy.modifyResponse,
+		ErrorHandler:   proxy.errorHandler,
+	}, nil
+}
+
+func (p *proxy) rewrite(pr *httputil.ProxyRequest) {
+	pr.SetURL(p.url)
+	pr.SetXForwarded()
+	pr.Out.URL.Path = cleanPath(strings.ReplaceAll(pr.Out.URL.Path, p.stripPath, ""))
+}
+
+func (p *proxy) modifyResponse(res *http.Response) error {
+	return nil
+}
+
+func (p *proxy) errorHandler(rw http.ResponseWriter, req *http.Request, err error) {
+	rw.WriteHeader(http.StatusBadGateway)
+}
+
+func cleanPath(p string) string {
+	if p == "" {
+		return "/"
+	}
+	if p[0] != '/' {
+		p = "/" + p
+	}
+	np := path.Clean(p)
+	if p[len(p)-1] == '/' && np != "/" {
+		if len(p) == len(np)+1 && strings.HasPrefix(p, np) {
+			np = p
+		} else {
+			np += "/"
+		}
+	}
+	return np
+}

ee/query-service/integrations/gateway/proxy_test.go

@@ -0,0 +1,61 @@
+package gateway
+
+import (
+	"context"
+	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+)
+
+func TestProxyRewrite(t *testing.T) {
+	testCases := []struct {
+		name      string
+		url       *url.URL
+		stripPath string
+		in        *url.URL
+		expected  *url.URL
+	}{
+		{
+			name:      "SamePathAdded",
+			url:       &url.URL{Scheme: "http", Host: "backend", Path: "/path1"},
+			stripPath: "/strip",
+			in:        &url.URL{Scheme: "http", Host: "localhost", Path: "/strip/path1"},
+			expected:  &url.URL{Scheme: "http", Host: "backend", Path: "/path1/path1"},
+		},
+		{
+			name:      "NoStripPathInput",
+			url:       &url.URL{Scheme: "http", Host: "backend"},
+			stripPath: "",
+			in:        &url.URL{Scheme: "http", Host: "localhost", Path: "/strip/path1"},
+			expected:  &url.URL{Scheme: "http", Host: "backend", Path: "/strip/path1"},
+		},
+		{
+			name:      "NoStripPathPresentInReq",
+			url:       &url.URL{Scheme: "http", Host: "backend"},
+			stripPath: "/not-found",
+			in:        &url.URL{Scheme: "http", Host: "localhost", Path: "/strip/path1"},
+			expected:  &url.URL{Scheme: "http", Host: "backend", Path: "/strip/path1"},
+		},
+	}
+
+	for _, tc := range testCases {
+		proxy, err := NewProxy(tc.url.String(), tc.stripPath)
+		require.NoError(t, err)
+		inReq, err := http.NewRequest(http.MethodGet, tc.in.String(), nil)
+		require.NoError(t, err)
+		proxyReq := &httputil.ProxyRequest{
+			In:  inReq,
+			Out: inReq.Clone(context.Background()),
+		}
+		proxy.Rewrite(proxyReq)
+
+		assert.Equal(t, tc.expected.Host, proxyReq.Out.URL.Host)
+		assert.Equal(t, tc.expected.Scheme, proxyReq.Out.URL.Scheme)
+		assert.Equal(t, tc.expected.Path, proxyReq.Out.URL.Path)
+		assert.Equal(t, tc.expected.Query(), proxyReq.Out.URL.Query())
+	}
+}

ee/zeus/httpzeus/provider.go

@@ -3,7 +3,6 @@ package httpzeus
 import (
 	"bytes"
 	"context"
-	"encoding/json"
 	"io"
 	"net/http"
 	"net/url"
@@ -11,7 +10,6 @@ import (
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/http/client"
-	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/tidwall/gjson"
 )
@@ -121,13 +119,8 @@ func (provider *Provider) PutMeters(ctx context.Context, key string, data []byte
 	return err
 }
 
-func (provider *Provider) PutProfile(ctx context.Context, key string, profile *zeustypes.PostableProfile) error {
-	body, err := json.Marshal(profile)
-	if err != nil {
-		return err
-	}
-
-	_, err = provider.do(
+func (provider *Provider) PutProfile(ctx context.Context, key string, body []byte) error {
+	_, err := provider.do(
 		ctx,
 		provider.config.URL.JoinPath("/v2/profiles/me"),
 		http.MethodPut,
@@ -138,15 +131,10 @@ func (provider *Provider) PutProfile(ctx context.Context, key string, profile *z
 	return err
 }
 
-func (provider *Provider) PutHost(ctx context.Context, key string, host *zeustypes.PostableHost) error {
-	body, err := json.Marshal(host)
-	if err != nil {
-		return err
-	}
-
-	_, err = provider.do(
+func (provider *Provider) PutHost(ctx context.Context, key string, body []byte) error {
+	_, err := provider.do(
 		ctx,
-		provider.config.URL.JoinPath("/v2/deployments/me/host"),
+		provider.config.URL.JoinPath("/v2/deployments/me/hosts"),
 		http.MethodPut,
 		key,
 		body,
@@ -181,28 +169,21 @@ func (provider *Provider) do(ctx context.Context, url *url.URL, method string, k
 		return body, nil
 	}
 
-	errorMessage := gjson.GetBytes(body, "error").String()
-	if errorMessage == "" {
-		errorMessage = "an unknown error occurred"
-	}
-
-	return nil, provider.errFromStatusCode(response.StatusCode, errorMessage)
+	return nil, provider.errFromStatusCode(response.StatusCode)
 }
 
 // This can be taken down to the client package
-func (provider *Provider) errFromStatusCode(statusCode int, errorMessage string) error {
+func (provider *Provider) errFromStatusCode(statusCode int) error {
 	switch statusCode {
 	case http.StatusBadRequest:
-		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, errorMessage)
+		return errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "bad request")
 	case http.StatusUnauthorized:
-		return errors.New(errors.TypeUnauthenticated, errors.CodeUnauthenticated, errorMessage)
+		return errors.Newf(errors.TypeUnauthenticated, errors.CodeUnauthenticated, "unauthenticated")
 	case http.StatusForbidden:
-		return errors.New(errors.TypeForbidden, errors.CodeForbidden, errorMessage)
+		return errors.Newf(errors.TypeForbidden, errors.CodeForbidden, "forbidden")
 	case http.StatusNotFound:
-		return errors.New(errors.TypeNotFound, errors.CodeNotFound, errorMessage)
-	case http.StatusConflict:
-		return errors.New(errors.TypeAlreadyExists, errors.CodeAlreadyExists, errorMessage)
+		return errors.Newf(errors.TypeNotFound, errors.CodeNotFound, "not found")
 	}
 
-	return errors.New(errors.TypeInternal, errors.CodeInternal, errorMessage)
+	return errors.Newf(errors.TypeInternal, errors.CodeInternal, "internal")
 }

frontend/package.json

@@ -58,7 +58,6 @@
 		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
-		"@signozhq/switch": "0.0.2",
 		"@signozhq/table": "0.3.7",
 		"@signozhq/tooltip": "0.0.2",
 		"@tanstack/react-table": "8.20.6",

frontend/public/locales/en-GB/routes.json

@@ -12,6 +12,5 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles"
+	"logs_to_metrics": "Logs To Metrics"
 }

frontend/public/locales/en/routes.json

@@ -12,6 +12,5 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics",
-	"roles": "Roles"
+	"logs_to_metrics": "Logs To Metrics"
 }

frontend/public/locales/en/titles.json

@@ -73,6 +73,5 @@
 	"API_MONITORING": "SigNoz | External APIs",
 	"METER_EXPLORER": "SigNoz | Meter Explorer",
 	"METER_EXPLORER_VIEWS": "SigNoz | Meter Explorer Views",
-	"METER": "SigNoz | Meter",
-	"ROLES_SETTINGS": "SigNoz | Roles"
+	"METER": "SigNoz | Meter"
 }

frontend/src/api/IngestionKeys/createIngestionKey.ts

@@ -0,0 +1,29 @@
+import { GatewayApiV1Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	CreateIngestionKeyProps,
+	IngestionKeyProps,
+} from 'types/api/ingestionKeys/types';
+
+const createIngestionKey = async (
+	props: CreateIngestionKeyProps,
+): Promise<SuccessResponse<IngestionKeyProps> | ErrorResponse> => {
+	try {
+		const response = await GatewayApiV1Instance.post('/workspaces/me/keys', {
+			...props,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default createIngestionKey;

frontend/src/api/IngestionKeys/deleteIngestionKey.ts

@@ -0,0 +1,26 @@
+import { GatewayApiV1Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AllIngestionKeyProps } from 'types/api/ingestionKeys/types';
+
+const deleteIngestionKey = async (
+	id: string,
+): Promise<SuccessResponse<AllIngestionKeyProps> | ErrorResponse> => {
+	try {
+		const response = await GatewayApiV1Instance.delete(
+			`/workspaces/me/keys/${id}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default deleteIngestionKey;

frontend/src/api/IngestionKeys/getAllIngestionKeys.ts

@@ -0,0 +1,21 @@
+import { GatewayApiV1Instance } from 'api';
+import { AxiosResponse } from 'axios';
+import {
+	AllIngestionKeyProps,
+	GetIngestionKeyProps,
+} from 'types/api/ingestionKeys/types';
+
+export const getAllIngestionKeys = (
+	props: GetIngestionKeyProps,
+): Promise<AxiosResponse<AllIngestionKeyProps>> => {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	const { search, per_page, page } = props;
+
+	const BASE_URL = '/workspaces/me/keys';
+	const URL_QUERY_PARAMS =
+		search && search.length > 0
+			? `/search?name=${search}&page=1&per_page=100`
+			: `?page=${page}&per_page=${per_page}`;
+
+	return GatewayApiV1Instance.get(`${BASE_URL}${URL_QUERY_PARAMS}`);
+};

frontend/src/api/IngestionKeys/limits/createLimitsForKey.ts

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-throw-literal */
+import { GatewayApiV1Instance } from 'api';
+import axios from 'axios';
+import {
+	AddLimitProps,
+	LimitSuccessProps,
+} from 'types/api/ingestionKeys/limits/types';
+
+interface SuccessResponse<T> {
+	statusCode: number;
+	error: null;
+	message: string;
+	payload: T;
+}
+
+interface ErrorResponse {
+	statusCode: number;
+	error: string;
+	message: string;
+	payload: null;
+}
+
+const createLimitForIngestionKey = async (
+	props: AddLimitProps,
+): Promise<SuccessResponse<LimitSuccessProps> | ErrorResponse> => {
+	try {
+		const response = await GatewayApiV1Instance.post(
+			`/workspaces/me/keys/${props.keyID}/limits`,
+			{
+				...props,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		if (axios.isAxiosError(error)) {
+			// Axios error
+			const errResponse: ErrorResponse = {
+				statusCode: error.response?.status || 500,
+				error: error.response?.data?.error,
+				message: error.response?.data?.status || 'An error occurred',
+				payload: null,
+			};
+
+			throw errResponse;
+		} else {
+			// Non-Axios error
+			const errResponse: ErrorResponse = {
+				statusCode: 500,
+				error: 'Unknown error',
+				message: 'An unknown error occurred',
+				payload: null,
+			};
+
+			throw errResponse;
+		}
+	}
+};
+
+export default createLimitForIngestionKey;

frontend/src/api/IngestionKeys/limits/deleteLimitsForIngestionKey.ts

@@ -0,0 +1,26 @@
+import { GatewayApiV1Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { AllIngestionKeyProps } from 'types/api/ingestionKeys/types';
+
+const deleteLimitsForIngestionKey = async (
+	id: string,
+): Promise<SuccessResponse<AllIngestionKeyProps> | ErrorResponse> => {
+	try {
+		const response = await GatewayApiV1Instance.delete(
+			`/workspaces/me/limits/${id}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default deleteLimitsForIngestionKey;

frontend/src/api/IngestionKeys/limits/updateLimitsForIngestionKey.ts

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-throw-literal */
+import { GatewayApiV1Instance } from 'api';
+import axios from 'axios';
+import {
+	LimitSuccessProps,
+	UpdateLimitProps,
+} from 'types/api/ingestionKeys/limits/types';
+
+interface SuccessResponse<T> {
+	statusCode: number;
+	error: null;
+	message: string;
+	payload: T;
+}
+
+interface ErrorResponse {
+	statusCode: number;
+	error: string;
+	message: string;
+	payload: null;
+}
+
+const updateLimitForIngestionKey = async (
+	props: UpdateLimitProps,
+): Promise<SuccessResponse<LimitSuccessProps> | ErrorResponse> => {
+	try {
+		const response = await GatewayApiV1Instance.patch(
+			`/workspaces/me/limits/${props.limitID}`,
+			{
+				config: props.config,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		if (axios.isAxiosError(error)) {
+			// Axios error
+			const errResponse: ErrorResponse = {
+				statusCode: error.response?.status || 500,
+				error: error.response?.data?.error,
+				message: error.response?.data?.status || 'An error occurred',
+				payload: null,
+			};
+
+			throw errResponse;
+		} else {
+			// Non-Axios error
+			const errResponse: ErrorResponse = {
+				statusCode: 500,
+				error: 'Unknown error',
+				message: 'An unknown error occurred',
+				payload: null,
+			};
+
+			throw errResponse;
+		}
+	}
+};
+
+export default updateLimitForIngestionKey;

frontend/src/api/IngestionKeys/updateIngestionKey.ts

@@ -0,0 +1,32 @@
+import { GatewayApiV1Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IngestionKeysPayloadProps,
+	UpdateIngestionKeyProps,
+} from 'types/api/ingestionKeys/types';
+
+const updateIngestionKey = async (
+	props: UpdateIngestionKeyProps,
+): Promise<SuccessResponse<IngestionKeysPayloadProps> | ErrorResponse> => {
+	try {
+		const response = await GatewayApiV1Instance.patch(
+			`/workspaces/me/keys/${props.id}`,
+			{
+				...props.data,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default updateIngestionKey;

frontend/src/api/apiV1.ts

@@ -4,6 +4,8 @@ export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
 export const apiV4 = '/api/v4/';
 export const apiV5 = '/api/v5/';
+export const gatewayApiV1 = '/api/gateway/v1/';
+export const gatewayApiV2 = '/api/gateway/v2/';
 export const apiAlertManager = '/api/alertmanager/';
 
 export default apiV1;

frontend/src/api/customDomain/getDeploymentsData.ts

@@ -0,0 +1,7 @@
+import { GatewayApiV2Instance as axios } from 'api';
+import { AxiosResponse } from 'axios';
+import { DeploymentsDataProps } from 'types/api/customDomain/types';
+
+export const getDeploymentsData = (): Promise<
+	AxiosResponse<DeploymentsDataProps>
+> => axios.get(`/deployments/me`);

frontend/src/api/customDomain/updateSubDomain.ts

@@ -0,0 +1,16 @@
+import { GatewayApiV2Instance as axios } from 'api';
+import { AxiosError } from 'axios';
+import { SuccessResponse } from 'types/api';
+import {
+	PayloadProps,
+	UpdateCustomDomainProps,
+} from 'types/api/customDomain/types';
+
+const updateSubDomainAPI = async (
+	props: UpdateCustomDomainProps,
+): Promise<SuccessResponse<PayloadProps> | AxiosError> =>
+	axios.put(`/deployments/me/host`, {
+		...props.data,
+	});
+
+export default updateSubDomainAPI;

frontend/src/api/generated/services/gateway/index.ts

@@ -678,7 +678,7 @@ export const useUpdateIngestionKeyLimit = <
  * @summary Search ingestion keys for workspace
  */
 export const searchIngestionKeys = (
-	params: SearchIngestionKeysParams,
+	params?: SearchIngestionKeysParams,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<SearchIngestionKeys200>({
@@ -699,7 +699,7 @@ export const getSearchIngestionKeysQueryOptions = <
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: SearchIngestionKeysParams,
+	params?: SearchIngestionKeysParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof searchIngestionKeys>>,
@@ -737,7 +737,7 @@ export function useSearchIngestionKeys<
 	TData = Awaited<ReturnType<typeof searchIngestionKeys>>,
 	TError = RenderErrorResponseDTO
 >(
-	params: SearchIngestionKeysParams,
+	params?: SearchIngestionKeysParams,
 	options?: {
 		query?: UseQueryOptions<
 			Awaited<ReturnType<typeof searchIngestionKeys>>,
@@ -762,7 +762,7 @@ export function useSearchIngestionKeys<
  */
 export const invalidateSearchIngestionKeys = async (
 	queryClient: QueryClient,
-	params: SearchIngestionKeysParams,
+	params?: SearchIngestionKeysParams,
 	options?: InvalidateOptions,
 ): Promise<QueryClient> => {
 	await queryClient.invalidateQueries(

frontend/src/api/generated/services/query/index.ts

@@ -16,7 +16,6 @@ import type {
 	Querybuildertypesv5QueryRangeRequestDTO,
 	QueryRangeV5200,
 	RenderErrorResponseDTO,
-	ReplaceVariables200,
 } from '../sigNoz.schemas';
 
 type AwaitedInput<T> = PromiseLike<T> | T;
@@ -106,86 +105,3 @@ export const useQueryRangeV5 = <
 
 	return useMutation(mutationOptions);
 };
-/**
- * Replace variables in a query
- * @summary Replace variables
- */
-export const replaceVariables = (
-	querybuildertypesv5QueryRangeRequestDTO: Querybuildertypesv5QueryRangeRequestDTO,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ReplaceVariables200>({
-		url: `/api/v5/substitute_vars`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: querybuildertypesv5QueryRangeRequestDTO,
-		signal,
-	});
-};
-
-export const getReplaceVariablesMutationOptions = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof replaceVariables>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof replaceVariables>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationKey = ['replaceVariables'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof replaceVariables>>,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return replaceVariables(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ReplaceVariablesMutationResult = NonNullable<
-	Awaited<ReturnType<typeof replaceVariables>>
->;
-export type ReplaceVariablesMutationBody = Querybuildertypesv5QueryRangeRequestDTO;
-export type ReplaceVariablesMutationError = RenderErrorResponseDTO;
-
-/**
- * @summary Replace variables
- */
-export const useReplaceVariables = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof replaceVariables>>,
-		TError,
-		{ data: Querybuildertypesv5QueryRangeRequestDTO },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof replaceVariables>>,
-	TError,
-	{ data: Querybuildertypesv5QueryRangeRequestDTO },
-	TContext
-> => {
-	const mutationOptions = getReplaceVariablesMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -453,18 +453,18 @@ export interface GatewaytypesGettableCreatedIngestionKeyDTO {
 	/**
 	 * @type string
 	 */
-	id: string;
+	id?: string;
 	/**
 	 * @type string
 	 */
-	value: string;
+	value?: string;
 }
 
 export interface GatewaytypesGettableCreatedIngestionKeyLimitDTO {
 	/**
 	 * @type string
 	 */
-	id: string;
+	id?: string;
 }
 
 export interface GatewaytypesGettableIngestionKeysDTO {
@@ -616,7 +616,7 @@ export interface GatewaytypesPostableIngestionKeyDTO {
 	/**
 	 * @type string
 	 */
-	name: string;
+	name?: string;
 	/**
 	 * @type array
 	 * @nullable true
@@ -638,7 +638,7 @@ export interface GatewaytypesPostableIngestionKeyLimitDTO {
 }
 
 export interface GatewaytypesUpdatableIngestionKeyLimitDTO {
-	config: GatewaytypesLimitConfigDTO;
+	config?: GatewaytypesLimitConfigDTO;
 	/**
 	 * @type array
 	 * @nullable true
@@ -2414,91 +2414,6 @@ export interface TypesUserDTO {
 	updatedAt?: Date;
 }
 
-export interface ZeustypesGettableHostDTO {
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	hosts: ZeustypesHostDTO[] | null;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	state: string;
-	/**
-	 * @type string
-	 */
-	tier: string;
-}
-
-export interface ZeustypesHostDTO {
-	/**
-	 * @type boolean
-	 */
-	is_default: boolean;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	url: string;
-}
-
-export interface ZeustypesPostableHostDTO {
-	/**
-	 * @type string
-	 */
-	name: string;
-}
-
-export interface ZeustypesPostableProfileDTO {
-	/**
-	 * @type string
-	 */
-	existing_observability_tool: string;
-	/**
-	 * @type boolean
-	 */
-	has_existing_observability_tool: boolean;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	logs_scale_per_day_in_gb: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	number_of_hosts: number;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	number_of_services: number;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	reasons_for_interest_in_signoz: string[] | null;
-	/**
-	 * @type string
-	 */
-	timeline_for_migrating_to_signoz: string;
-	/**
-	 * @type boolean
-	 */
-	uses_otel: boolean;
-	/**
-	 * @type string
-	 */
-	where_did_you_discover_signoz: string;
-}
-
 export type ChangePasswordPathParameters = {
 	id: string;
 };
@@ -3039,7 +2954,7 @@ export type SearchIngestionKeysParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	name: string;
+	name?: string;
 	/**
 	 * @type integer
 	 * @description undefined
@@ -3214,14 +3129,6 @@ export type RotateSession200 = {
 	status?: string;
 };
 
-export type GetHosts200 = {
-	data?: ZeustypesGettableHostDTO;
-	/**
-	 * @type string
-	 */
-	status?: string;
-};
-
 export type QueryRangeV5200 = {
 	data?: Querybuildertypesv5QueryRangeResponseDTO;
 	/**
@@ -3229,11 +3136,3 @@ export type QueryRangeV5200 = {
 	 */
 	status?: string;
 };
-
-export type ReplaceVariables200 = {
-	data?: Querybuildertypesv5QueryRangeRequestDTO;
-	/**
-	 * @type string
-	 */
-	status?: string;
-};

frontend/src/api/generated/services/zeus/index.ts

@@ -1,269 +0,0 @@
-/**
- * ! Do not edit manually
- * * The file has been auto-generated using Orval for SigNoz
- * * regenerate with 'yarn generate:api'
- * SigNoz
- */
-import type {
-	InvalidateOptions,
-	MutationFunction,
-	QueryClient,
-	QueryFunction,
-	QueryKey,
-	UseMutationOptions,
-	UseMutationResult,
-	UseQueryOptions,
-	UseQueryResult,
-} from 'react-query';
-import { useMutation, useQuery } from 'react-query';
-
-import { GeneratedAPIInstance } from '../../../index';
-import type {
-	GetHosts200,
-	RenderErrorResponseDTO,
-	ZeustypesPostableHostDTO,
-	ZeustypesPostableProfileDTO,
-} from '../sigNoz.schemas';
-
-type AwaitedInput<T> = PromiseLike<T> | T;
-
-type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
-
-/**
- * This endpoint gets the host info from zeus.
- * @summary Get host info from Zeus.
- */
-export const getHosts = (signal?: AbortSignal) => {
-	return GeneratedAPIInstance<GetHosts200>({
-		url: `/api/v2/zeus/hosts`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetHostsQueryKey = () => {
-	return ['getHosts'] as const;
-};
-
-export const getGetHostsQueryOptions = <
-	TData = Awaited<ReturnType<typeof getHosts>>,
-	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getHosts>>, TError, TData>;
-}) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey = queryOptions?.queryKey ?? getGetHostsQueryKey();
-
-	const queryFn: QueryFunction<Awaited<ReturnType<typeof getHosts>>> = ({
-		signal,
-	}) => getHosts(signal);
-
-	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
-		Awaited<ReturnType<typeof getHosts>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetHostsQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getHosts>>
->;
-export type GetHostsQueryError = RenderErrorResponseDTO;
-
-/**
- * @summary Get host info from Zeus.
- */
-
-export function useGetHosts<
-	TData = Awaited<ReturnType<typeof getHosts>>,
-	TError = RenderErrorResponseDTO
->(options?: {
-	query?: UseQueryOptions<Awaited<ReturnType<typeof getHosts>>, TError, TData>;
-}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetHostsQueryOptions(options);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	query.queryKey = queryOptions.queryKey;
-
-	return query;
-}
-
-/**
- * @summary Get host info from Zeus.
- */
-export const invalidateGetHosts = async (
-	queryClient: QueryClient,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetHostsQueryKey() },
-		options,
-	);
-
-	return queryClient;
-};
-
-/**
- * This endpoint saves the host of a deployment to zeus.
- * @summary Put host in Zeus for a deployment.
- */
-export const putHost = (zeustypesPostableHostDTO: ZeustypesPostableHostDTO) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/zeus/hosts`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: zeustypesPostableHostDTO,
-	});
-};
-
-export const getPutHostMutationOptions = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof putHost>>,
-		TError,
-		{ data: ZeustypesPostableHostDTO },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof putHost>>,
-	TError,
-	{ data: ZeustypesPostableHostDTO },
-	TContext
-> => {
-	const mutationKey = ['putHost'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof putHost>>,
-		{ data: ZeustypesPostableHostDTO }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return putHost(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PutHostMutationResult = NonNullable<
-	Awaited<ReturnType<typeof putHost>>
->;
-export type PutHostMutationBody = ZeustypesPostableHostDTO;
-export type PutHostMutationError = RenderErrorResponseDTO;
-
-/**
- * @summary Put host in Zeus for a deployment.
- */
-export const usePutHost = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof putHost>>,
-		TError,
-		{ data: ZeustypesPostableHostDTO },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof putHost>>,
-	TError,
-	{ data: ZeustypesPostableHostDTO },
-	TContext
-> => {
-	const mutationOptions = getPutHostMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * This endpoint saves the profile of a deployment to zeus.
- * @summary Put profile in Zeus for a deployment.
- */
-export const putProfile = (
-	zeustypesPostableProfileDTO: ZeustypesPostableProfileDTO,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/zeus/profiles`,
-		method: 'PUT',
-		headers: { 'Content-Type': 'application/json' },
-		data: zeustypesPostableProfileDTO,
-	});
-};
-
-export const getPutProfileMutationOptions = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof putProfile>>,
-		TError,
-		{ data: ZeustypesPostableProfileDTO },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof putProfile>>,
-	TError,
-	{ data: ZeustypesPostableProfileDTO },
-	TContext
-> => {
-	const mutationKey = ['putProfile'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-		  'mutationKey' in options.mutation &&
-		  options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof putProfile>>,
-		{ data: ZeustypesPostableProfileDTO }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return putProfile(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type PutProfileMutationResult = NonNullable<
-	Awaited<ReturnType<typeof putProfile>>
->;
-export type PutProfileMutationBody = ZeustypesPostableProfileDTO;
-export type PutProfileMutationError = RenderErrorResponseDTO;
-
-/**
- * @summary Put profile in Zeus for a deployment.
- */
-export const usePutProfile = <
-	TError = RenderErrorResponseDTO,
-	TContext = unknown
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof putProfile>>,
-		TError,
-		{ data: ZeustypesPostableProfileDTO },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof putProfile>>,
-	TError,
-	{ data: ZeustypesPostableProfileDTO },
-	TContext
-> => {
-	const mutationOptions = getPutProfileMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};

frontend/src/api/index.ts

@@ -15,7 +15,15 @@ import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { eventEmitter } from 'utils/getEventEmitter';
 
-import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
+import apiV1, {
+	apiAlertManager,
+	apiV2,
+	apiV3,
+	apiV4,
+	apiV5,
+	gatewayApiV1,
+	gatewayApiV2,
+} from './apiV1';
 import { Logout } from './utils';
 
 const RESPONSE_TIMEOUT_THRESHOLD = 5000; // 5 seconds
@@ -203,6 +211,24 @@ LogEventAxiosInstance.interceptors.response.use(
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 //
 
+// gateway Api V1
+export const GatewayApiV1Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${gatewayApiV1}`,
+});
+
+GatewayApiV1Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+
+GatewayApiV1Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
+// gateway Api V2
+export const GatewayApiV2Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${gatewayApiV2}`,
+});
+
 // generated API Instance
 export const GeneratedAPIInstance = axios.create({
 	baseURL: ENVIRONMENT.baseURL,
@@ -214,6 +240,14 @@ GeneratedAPIInstance.interceptors.response.use(
 	interceptorRejected,
 );
 
+GatewayApiV2Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+
+GatewayApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
 AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejected,

frontend/src/api/metricsExplorer/v2/getMetricMetadata.ts

@@ -11,10 +11,13 @@ export const getMetricMetadata = async (
 ): Promise<SuccessResponseV2<MetricMetadataResponse> | ErrorResponseV2> => {
 	try {
 		const encodedMetricName = encodeURIComponent(metricName);
-		const response = await axios.get(`/metrics/${encodedMetricName}/metadata`, {
-			signal,
-			headers,
-		});
+		const response = await axios.get(
+			`/metrics/metadata?metricName=${encodedMetricName}`,
+			{
+				signal,
+				headers,
+			},
+		);
 
 		return {
 			httpStatusCode: response.status,

frontend/src/api/onboarding/updateProfile.ts

@@ -0,0 +1,20 @@
+import { GatewayApiV2Instance } from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { UpdateProfileProps } from 'types/api/onboarding/types';
+
+const updateProfile = async (
+	props: UpdateProfileProps,
+): Promise<SuccessResponse<UpdateProfileProps> | ErrorResponse> => {
+	const response = await GatewayApiV2Instance.put('/profiles/me', {
+		...props,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};
+
+export default updateProfile;

frontend/src/api/v1/domains/id/delete.ts

@@ -0,0 +1,19 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
+
+const deleteDomain = async (id: string): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.delete<null>(`/domains/${id}`);
+
+		return {
+			httpStatusCode: response.status,
+			data: null,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default deleteDomain;

frontend/src/api/v1/domains/id/put.ts

@@ -0,0 +1,25 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
+import { UpdatableAuthDomain } from 'types/api/v1/domains/put';
+
+const put = async (
+	props: UpdatableAuthDomain,
+): Promise<SuccessResponseV2<null>> => {
+	try {
+		const response = await axios.put<RawSuccessResponse<null>>(
+			`/domains/${props.id}`,
+			{ config: props.config },
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default put;

frontend/src/api/v1/domains/list.ts

@@ -0,0 +1,24 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
+import { GettableAuthDomain } from 'types/api/v1/domains/list';
+
+const listAllDomain = async (): Promise<
+	SuccessResponseV2<GettableAuthDomain[]>
+> => {
+	try {
+		const response = await axios.get<RawSuccessResponse<GettableAuthDomain[]>>(
+			`/domains`,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default listAllDomain;

frontend/src/api/v1/domains/post.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
+import { GettableAuthDomain } from 'types/api/v1/domains/list';
+import { PostableAuthDomain } from 'types/api/v1/domains/post';
+
+const post = async (
+	props: PostableAuthDomain,
+): Promise<SuccessResponseV2<GettableAuthDomain>> => {
+	try {
+		const response = await axios.post<RawSuccessResponse<GettableAuthDomain>>(
+			`/domains`,
+			props,
+		);
+
+		return {
+			httpStatusCode: response.status,
+			data: response.data.data,
+		};
+	} catch (error) {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	}
+};
+
+export default post;

frontend/src/auto-import-registry.d.ts

@@ -24,6 +24,5 @@ import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
-import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/tooltip';

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -42,7 +42,6 @@
 		display: flex;
 		flex-direction: column;
 		padding: 16px;
-		padding-bottom: 0;
 	}
 
 	.title {
@@ -191,7 +190,7 @@
 		padding: 0px;
 	}
 	.log-detail-drawer__footer-hint {
-		position: sticky;
+		position: absolute;
 		bottom: 0;
 		left: 0;
 		right: 0;
@@ -367,7 +366,7 @@
 	}
 
 	.log-detail-drawer__footer-hint {
-		position: sticky;
+		position: absolute;
 		bottom: 0;
 		left: 0;
 		right: 0;

frontend/src/constants/routes.ts

@@ -55,7 +55,6 @@ const ROUTES = {
 	LOGS_INDEX_FIELDS: '/logs-explorer/index-fields',
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/settings/billing',
-	ROLES_SETTINGS: '/settings/roles',
 	SUPPORT: '/support',
 	LOGS_SAVE_VIEWS: '/logs/saved-views',
 	TRACES_SAVE_VIEWS: '/traces/saved-views',

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/AllEndPoints.tsx

@@ -202,7 +202,7 @@ function AllEndPoints({
 
 	const onRowClick = useCallback(
 		(props: any): void => {
-			setSelectedEndPointName(props[SPAN_ATTRIBUTES.HTTP_URL] as string);
+			setSelectedEndPointName(props[SPAN_ATTRIBUTES.URL_PATH] as string);
 			setSelectedView(VIEWS.ENDPOINT_STATS);
 			const initialItems = [
 				...(filters?.items || []),
@@ -213,7 +213,7 @@ function AllEndPoints({
 				op: 'AND',
 			});
 			setParams({
-				selectedEndPointName: props[SPAN_ATTRIBUTES.HTTP_URL] as string,
+				selectedEndPointName: props[SPAN_ATTRIBUTES.URL_PATH] as string,
 				selectedView: VIEWS.ENDPOINT_STATS,
 				endPointDetailsLocalFilters: {
 					items: initialItems,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/EndPointDetails.tsx

@@ -33,7 +33,7 @@ import { SPAN_ATTRIBUTES } from './constants';
 
 const httpUrlKey = {
 	dataType: DataTypes.String,
-	key: SPAN_ATTRIBUTES.HTTP_URL,
+	key: SPAN_ATTRIBUTES.URL_PATH,
 	type: 'tag',
 };
 
@@ -93,7 +93,7 @@ function EndPointDetails({
 				return currentFilters; // No change needed, prevents loop
 			}
 
-			// Rebuild filters: Keep non-http_url filters and add/update http_url filter based on prop
+			// Rebuild filters: Keep non-http.url filters and add/update http.url filter based on prop
 			const otherFilters = currentFilters?.items?.filter(
 				(item) => item.key?.key !== httpUrlKey.key,
 			);
@@ -125,7 +125,7 @@ function EndPointDetails({
 		(newFilters: IBuilderQuery['filters']): void => {
 			// 1. Update local filters state immediately
 			setFilters(newFilters);
-			// Filter out http_url filter before saving to params
+			// Filter out http.url filter before saving to params
 			const filteredNewFilters = {
 				op: 'AND',
 				items:
@@ -299,6 +299,7 @@ function EndPointDetails({
 					endPointStatusCodeLatencyBarChartsDataQuery
 				}
 				domainName={domainName}
+				endPointName={endPointName}
 				filters={filters}
 				timeRange={timeRange}
 				onDragSelect={onDragSelect}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -56,15 +56,15 @@ function TopErrors({
 				{
 					items: endPointName
 						? [
-								// Remove any existing http_url filters from initialFilters to avoid duplicates
+								// Remove any existing http.url filters from initialFilters to avoid duplicates
 								...(initialFilters?.items?.filter(
-									(item) => item.key?.key !== SPAN_ATTRIBUTES.HTTP_URL,
+									(item) => item.key?.key !== SPAN_ATTRIBUTES.URL_PATH,
 								) || []),
 								{
 									id: '92b8a1c1',
 									key: {
 										dataType: DataTypes.String,
-										key: SPAN_ATTRIBUTES.HTTP_URL,
+										key: SPAN_ATTRIBUTES.URL_PATH,
 										type: 'tag',
 									},
 									op: '=',

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.test.tsx

@@ -9,7 +9,6 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
-import { SPAN_ATTRIBUTES } from '../constants';
 import DomainMetrics from './DomainMetrics';
 
 // Mock the API call
@@ -127,9 +126,11 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 				'count()',
 			);
 			// Verify exact domain filter expression structure
-			expect(queryA.filter.expression).toContain("http_host = '0.0.0.0'");
 			expect(queryA.filter.expression).toContain(
-				`${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
+			expect(queryA.filter.expression).toContain(
+				'url.full EXISTS OR http.url EXISTS',
 			);
 
 			// Verify Query B - p99 latency
@@ -141,13 +142,17 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 				'p99(duration_nano)',
 			);
 			// Verify exact domain filter expression structure
-			expect(queryB.filter.expression).toContain("http_host = '0.0.0.0'");
+			expect(queryB.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
 
 			// Verify Query C - error count (disabled)
 			const queryC = queryData.find((q: any) => q.queryName === 'C');
 			expect(queryC).toBeDefined();
 			expect(queryC.disabled).toBe(true);
-			expect(queryC.filter.expression).toContain("http_host = '0.0.0.0'");
+			expect(queryC.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
 			expect(queryC.aggregations?.[0]).toBeDefined();
 			expect((queryC.aggregations?.[0] as TraceAggregation)?.expression).toBe(
 				'count()',
@@ -164,7 +169,9 @@ describe('DomainMetrics - V5 Query Payload Tests', () => {
 				'max(timestamp)',
 			);
 			// Verify exact domain filter expression structure
-			expect(queryD.filter.expression).toContain("http_host = '0.0.0.0'");
+			expect(queryD.filter.expression).toContain(
+				"(net.peer.name = '0.0.0.0' OR server.address = '0.0.0.0')",
+			);
 
 			// Verify Formula F1 - error rate calculation
 			const formulas = payload.query.builder.queryFormulas;

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.test.tsx

@@ -153,7 +153,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				// Verify exact domain filter expression structure
 				if (queryA.filter) {
 					expect(queryA.filter.expression).toContain(
-						`http_host = 'api.example.com'`,
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
 					);
 					expect(queryA.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -171,7 +171,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				// Verify exact domain filter expression structure
 				if (queryB.filter) {
 					expect(queryB.filter.expression).toContain(
-						`http_host = 'api.example.com'`,
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
 					);
 					expect(queryB.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -185,7 +185,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				expect(queryC.aggregateOperator).toBe('count');
 				if (queryC.filter) {
 					expect(queryC.filter.expression).toContain(
-						`http_host = 'api.example.com'`,
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
 					);
 					expect(queryC.filter.expression).toContain("kind_string = 'Client'");
 					expect(queryC.filter.expression).toContain('has_error = true');
@@ -204,7 +204,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				// Verify exact domain filter expression structure
 				if (queryD.filter) {
 					expect(queryD.filter.expression).toContain(
-						`http_host = 'api.example.com'`,
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
 					);
 					expect(queryD.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -221,7 +221,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 				}
 				if (queryE.filter) {
 					expect(queryE.filter.expression).toContain(
-						`http_host = 'api.example.com'`,
+						"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com')",
 					);
 					expect(queryE.filter.expression).toContain("kind_string = 'Client'");
 				}
@@ -291,7 +291,7 @@ describe('EndPointMetrics - V5 Query Payload Tests', () => {
 					expect(query.filter.expression).toContain('staging');
 					// Also verify domain filter is still present
 					expect(query.filter.expression).toContain(
-						"http_host = 'api.internal.com'",
+						"(net.peer.name = 'api.internal.com' OR server.address = 'api.internal.com')",
 					);
 					// Verify client kind filter is present
 					expect(query.filter.expression).toContain("kind_string = 'Client'");

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -34,6 +34,7 @@ function StatusCodeBarCharts({
 	endPointStatusCodeBarChartsDataQuery,
 	endPointStatusCodeLatencyBarChartsDataQuery,
 	domainName,
+	endPointName,
 	filters,
 	timeRange,
 	onDragSelect,
@@ -47,6 +48,7 @@ function StatusCodeBarCharts({
 		unknown
 	>;
 	domainName: string;
+	endPointName: string;
 	filters: IBuilderQuery['filters'];
 	timeRange: {
 		startTime: number;
@@ -142,11 +144,11 @@ function StatusCodeBarCharts({
 
 	const widget = useMemo<Widgets>(
 		() =>
-			getStatusCodeBarChartWidgetData(domainName, {
+			getStatusCodeBarChartWidgetData(domainName, endPointName, {
 				items: [...(filters?.items || [])],
 				op: filters?.op || 'AND',
 			}),
-		[domainName, filters],
+		[domainName, endPointName, filters],
 	);
 
 	const graphClickHandler = useCallback(
@@ -164,7 +166,6 @@ function StatusCodeBarCharts({
 				xValue,
 				TWO_AND_HALF_MINUTES_IN_MILLISECONDS,
 			);
-
 			handleGraphClick({
 				xValue,
 				yValue,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -12,7 +12,7 @@ export const VIEW_TYPES = {
 
 // Span attribute keys - these are the source of truth for all attribute keys
 export const SPAN_ATTRIBUTES = {
-	HTTP_URL: 'http_url',
+	URL_PATH: 'http.url',
 	RESPONSE_STATUS_CODE: 'response_status_code',
 	SERVER_NAME: 'http_host',
 	SERVER_PORT: 'net.peer.port',

frontend/src/container/ApiMonitoring/__tests__/APIMonitoringUtils.test.tsx

@@ -280,7 +280,7 @@ describe('API Monitoring Utils', () => {
 			const endpointFilter = result?.items?.find(
 				(item) =>
 					item.key &&
-					item.key.key === SPAN_ATTRIBUTES.HTTP_URL &&
+					item.key.key === SPAN_ATTRIBUTES.URL_PATH &&
 					item.value === endPointName,
 			);
 			expect(endpointFilter).toBeDefined();
@@ -344,12 +344,13 @@ describe('API Monitoring Utils', () => {
 	describe('getFormattedEndPointDropDownData', () => {
 		it('should format endpoint dropdown data correctly', () => {
 			// Arrange
-			const URL_PATH_KEY = SPAN_ATTRIBUTES.HTTP_URL;
+			const URL_PATH_KEY = SPAN_ATTRIBUTES.URL_PATH;
 			const mockData = [
 				{
 					data: {
 						// eslint-disable-next-line sonarjs/no-duplicate-string
 						[URL_PATH_KEY]: '/api/users',
+						'url.full': 'http://example.com/api/users',
 						A: 150, // count or other metric
 					},
 				},
@@ -357,6 +358,7 @@ describe('API Monitoring Utils', () => {
 					data: {
 						// eslint-disable-next-line sonarjs/no-duplicate-string
 						[URL_PATH_KEY]: '/api/orders',
+						'url.full': 'http://example.com/api/orders',
 						A: 75,
 					},
 				},
@@ -404,7 +406,7 @@ describe('API Monitoring Utils', () => {
 
 		it('should handle items without URL path', () => {
 			// Arrange
-			const URL_PATH_KEY = SPAN_ATTRIBUTES.HTTP_URL;
+			const URL_PATH_KEY = SPAN_ATTRIBUTES.URL_PATH;
 			type MockDataType = {
 				data: {
 					[key: string]: string | number;
@@ -710,11 +712,13 @@ describe('API Monitoring Utils', () => {
 		it('should generate widget configuration for status code bar chart', () => {
 			// Arrange
 			const domainName = 'test-domain';
+			const endPointName = '/api/test';
 			const filters = { items: [], op: 'AND' };
 
 			// Act
 			const result = getStatusCodeBarChartWidgetData(
 				domainName,
+				endPointName,
 				filters as IBuilderQuery['filters'],
 			);
 
@@ -737,11 +741,21 @@ describe('API Monitoring Utils', () => {
 			if (domainFilter) {
 				expect(domainFilter.value).toBe(domainName);
 			}
+
+			// Should have endpoint filter if provided
+			const endpointFilter = queryData.filters?.items?.find(
+				(item) => item.key && item.key.key === SPAN_ATTRIBUTES.URL_PATH,
+			);
+			expect(endpointFilter).toBeDefined();
+			if (endpointFilter) {
+				expect(endpointFilter.value).toBe(endPointName);
+			}
 		});
 
 		it('should include custom filters in the widget configuration', () => {
 			// Arrange
 			const domainName = 'test-domain';
+			const endPointName = '/api/test';
 			const customFilter = {
 				id: 'custom-filter',
 				key: {
@@ -757,6 +771,7 @@ describe('API Monitoring Utils', () => {
 			// Act
 			const result = getStatusCodeBarChartWidgetData(
 				domainName,
+				endPointName,
 				filters as IBuilderQuery['filters'],
 			);
 

frontend/src/container/ApiMonitoring/__tests__/AllEndPoints.test.tsx

@@ -25,7 +25,7 @@ jest.mock('container/GridCardLayout/GridCard', () => ({
 				type="button"
 				data-testid="row-click-button"
 				onClick={(): void =>
-					customOnRowClick({ [SPAN_ATTRIBUTES.HTTP_URL]: '/api/test' })
+					customOnRowClick({ [SPAN_ATTRIBUTES.URL_PATH]: '/api/test' })
 				}
 			>
 				Click Row

frontend/src/container/ApiMonitoring/__tests__/AllEndpointsWidgetV5Migration.test.tsx

@@ -6,10 +6,10 @@
  * These tests validate the migration from V4 to V5 format for getAllEndpointsWidgetData:
  * - Filter format change: filters.items[] → filter.expression
  * - Aggregation format: aggregateAttribute → aggregations[] array
- * - Domain filter: http_host = '${domainName}'
+ * - Domain filter: (net.peer.name OR server.address)
  * - Kind filter: kind_string = 'Client'
  * - Four queries: A (count), B (p99 latency), C (max timestamp), D (error count - disabled)
- * - GroupBy: http_url with type 'attribute'
+ * - GroupBy: Both http.url AND url.full with type 'attribute'
  */
 import { getAllEndpointsWidgetData } from 'container/ApiMonitoring/utils';
 import {
@@ -18,8 +18,6 @@ import {
 } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
-import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
-
 describe('AllEndpointsWidget - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const emptyFilters: IBuilderQuery['filters'] = {
@@ -94,28 +92,28 @@ describe('AllEndpointsWidget - V5 Migration Validation', () => {
 
 			const [queryA, queryB, queryC, queryD] = widget.query.builder.queryData;
 
-			const baseExpression = `http_host = '${mockDomainName}' AND kind_string = 'Client'`;
+			const baseExpression = `(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}') AND kind_string = 'Client'`;
 
 			// Queries A, B, C have identical base filter
 			expect(queryA.filter?.expression).toBe(
-				`${baseExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+				`${baseExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 			);
 			expect(queryB.filter?.expression).toBe(
-				`${baseExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+				`${baseExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 			);
 			expect(queryC.filter?.expression).toBe(
-				`${baseExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+				`${baseExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 			);
 
 			// Query D has additional has_error filter
 			expect(queryD.filter?.expression).toBe(
-				`${baseExpression} AND has_error = true AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+				`${baseExpression} AND has_error = true AND (http.url EXISTS OR url.full EXISTS)`,
 			);
 		});
 	});
 
 	describe('2. GroupBy Structure', () => {
-		it(`default groupBy includes ${SPAN_ATTRIBUTES.HTTP_URL} with type attribute`, () => {
+		it('default groupBy includes both http.url and url.full with type attribute', () => {
 			const widget = getAllEndpointsWidgetData(
 				emptyGroupBy,
 				mockDomainName,
@@ -126,13 +124,23 @@ describe('AllEndpointsWidget - V5 Migration Validation', () => {
 
 			// All queries should have the same default groupBy
 			queryData.forEach((query) => {
-				expect(query.groupBy).toHaveLength(1);
+				expect(query.groupBy).toHaveLength(2);
 
+				// http.url
 				expect(query.groupBy).toContainEqual({
 					dataType: DataTypes.String,
 					isColumn: false,
 					isJSON: false,
-					key: SPAN_ATTRIBUTES.HTTP_URL,
+					key: 'http.url',
+					type: 'attribute',
+				});
+
+				// url.full
+				expect(query.groupBy).toContainEqual({
+					dataType: DataTypes.String,
+					isColumn: false,
+					isJSON: false,
+					key: 'url.full',
 					type: 'attribute',
 				});
 			});
@@ -162,18 +170,19 @@ describe('AllEndpointsWidget - V5 Migration Validation', () => {
 
 			// All queries should have defaults + custom groupBy
 			queryData.forEach((query) => {
-				expect(query.groupBy).toHaveLength(3); // 1 default + 2 custom
+				expect(query.groupBy).toHaveLength(4); // 2 defaults + 2 custom
 
-				// First two should be defaults (http_url)
-				expect(query.groupBy[0].key).toBe(SPAN_ATTRIBUTES.HTTP_URL);
+				// First two should be defaults (http.url, url.full)
+				expect(query.groupBy[0].key).toBe('http.url');
+				expect(query.groupBy[1].key).toBe('url.full');
 
 				// Last two should be custom (matching subset of properties)
-				expect(query.groupBy[1]).toMatchObject({
+				expect(query.groupBy[2]).toMatchObject({
 					dataType: DataTypes.String,
 					key: 'service.name',
 					type: 'resource',
 				});
-				expect(query.groupBy[2]).toMatchObject({
+				expect(query.groupBy[3]).toMatchObject({
 					dataType: DataTypes.String,
 					key: 'deployment.environment',
 					type: 'resource',

frontend/src/container/ApiMonitoring/__tests__/EndPointDetails.test.tsx

@@ -258,7 +258,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
 						value: '/api/test',
 					}),
 				]),
@@ -278,7 +278,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
 						value: '/api/test',
 					}),
 				]),
@@ -360,7 +360,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
 						value: '/api/test',
 					}),
 				]),
@@ -373,7 +373,7 @@ describe('EndPointDetails Component', () => {
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({
-						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
+						key: expect.objectContaining({ key: SPAN_ATTRIBUTES.URL_PATH }),
 						value: '/api/test',
 					}),
 				]),

frontend/src/container/ApiMonitoring/__tests__/EndPointsDropDown.test.tsx

@@ -191,7 +191,7 @@ describe('EndPointsDropDown Component', () => {
 
 	it('formats data using the utility function', () => {
 		const mockRows = [
-			{ data: { [SPAN_ATTRIBUTES.HTTP_URL]: '/api/test', A: 10 } },
+			{ data: { [SPAN_ATTRIBUTES.URL_PATH]: '/api/test', A: 10 } },
 		];
 
 		const dataProps = {

frontend/src/container/ApiMonitoring/__tests__/EndpointDropdownV5Migration.test.tsx

@@ -6,18 +6,15 @@
  * These tests validate the migration from V4 to V5 format for the third payload
  * in getEndPointDetailsQueryPayload (endpoint dropdown data):
  * - Filter format change: filters.items[] → filter.expression
- * - Domain handling: http_host = '${domainName}'
+ * - Domain handling: (net.peer.name OR server.address)
  * - Kind filter: kind_string = 'Client'
- * - Existence check: http_url EXISTS
+ * - Existence check: (http.url EXISTS OR url.full EXISTS)
  * - Aggregation: count() expression
- * - GroupBy: http_url with type 'attribute'
+ * - GroupBy: Both http.url AND url.full with type 'attribute'
  */
 import { getEndPointDetailsQueryPayload } from 'container/ApiMonitoring/utils';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
-import { SPAN_ATTRIBUTES } from '../Explorer/Domains/DomainDetails/constants';
-
 describe('EndpointDropdown - V5 Migration Validation', () => {
 	const mockDomainName = 'api.example.com';
 	const mockStartTime = 1000;
@@ -46,9 +43,9 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters');
 
-			// Base filter 1: Domain http_host = '${domainName}'
+			// Base filter 1: Domain (net.peer.name OR server.address)
 			expect(queryA.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Base filter 2: Kind
@@ -56,7 +53,7 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 
 			// Base filter 3: Existence check
 			expect(queryA.filter?.expression).toContain(
-				`${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+				'(http.url EXISTS OR url.full EXISTS)',
 			);
 
 			// V5 Aggregation format: aggregations array (not aggregateAttribute)
@@ -67,11 +64,16 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 			});
 			expect(queryA).not.toHaveProperty('aggregateAttribute');
 
-			// GroupBy: http_url
-			expect(queryA.groupBy).toHaveLength(1);
+			// GroupBy: Both http.url and url.full
+			expect(queryA.groupBy).toHaveLength(2);
 			expect(queryA.groupBy).toContainEqual({
-				key: SPAN_ATTRIBUTES.HTTP_URL,
-				dataType: DataTypes.String,
+				key: 'http.url',
+				dataType: 'string',
+				type: 'attribute',
+			});
+			expect(queryA.groupBy).toContainEqual({
+				key: 'url.full',
+				dataType: 'string',
 				type: 'attribute',
 			});
 		});
@@ -118,7 +120,53 @@ describe('EndpointDropdown - V5 Migration Validation', () => {
 
 			// Exact filter expression with custom filters merged
 			expect(expression).toBe(
-				`${SPAN_ATTRIBUTES.SERVER_NAME} = 'api.example.com' AND kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS service.name = 'user-service' AND deployment.environment = 'production'`,
+				"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com') AND kind_string = 'Client' AND (http.url EXISTS OR url.full EXISTS) service.name = 'user-service' AND deployment.environment = 'production'",
+			);
+		});
+	});
+
+	describe('3. HTTP URL Filter Special Handling', () => {
+		it('converts http.url filter to (http.url OR url.full) expression', () => {
+			const filtersWithHttpUrl: IBuilderQuery['filters'] = {
+				items: [
+					{
+						id: 'http-url-filter',
+						key: {
+							key: 'http.url',
+							dataType: 'string' as any,
+							type: 'tag',
+						},
+						op: '=',
+						value: '/api/users',
+					},
+					{
+						id: 'service-filter',
+						key: {
+							key: 'service.name',
+							dataType: 'string' as any,
+							type: 'resource',
+						},
+						op: '=',
+						value: 'user-service',
+					},
+				],
+				op: 'AND',
+			};
+
+			const payload = getEndPointDetailsQueryPayload(
+				mockDomainName,
+				mockStartTime,
+				mockEndTime,
+				filtersWithHttpUrl,
+			);
+
+			const dropdownQuery = payload[2];
+			const expression =
+				dropdownQuery.query.builder.queryData[0].filter?.expression;
+
+			// CRITICAL: Exact filter expression with http.url converted to OR logic
+			expect(expression).toBe(
+				"(net.peer.name = 'api.example.com' OR server.address = 'api.example.com') AND kind_string = 'Client' AND (http.url EXISTS OR url.full EXISTS) service.name = 'user-service' AND (http.url = '/api/users' OR url.full = '/api/users')",
 			);
 		});
 	});

frontend/src/container/ApiMonitoring/__tests__/MetricOverTimeV5Migration.test.tsx

@@ -33,7 +33,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 			expect(queryData).not.toHaveProperty('filters.items');
 		});
 
-		it('uses new domain filter format: (http_host)', () => {
+		it('uses new domain filter format: (net.peer.name OR server.address)', () => {
 			const widget = getRateOverTimeWidgetData(
 				mockDomainName,
 				mockEndpointName,
@@ -44,7 +44,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 
 			// Verify EXACT new filter format with OR operator
 			expect(queryData?.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Endpoint name is used in legend, not filter
@@ -90,7 +90,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 
 			// Verify domain filter is present
 			expect(queryData?.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Verify custom filters are merged into the expression
@@ -120,7 +120,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 			expect(queryData).not.toHaveProperty('filters.items');
 		});
 
-		it('uses new domain filter format: (http_host)', () => {
+		it('uses new domain filter format: (net.peer.name OR server.address)', () => {
 			const widget = getLatencyOverTimeWidgetData(
 				mockDomainName,
 				mockEndpointName,
@@ -132,7 +132,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 			// Verify EXACT new filter format with OR operator
 			expect(queryData.filter).toBeDefined();
 			expect(queryData?.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Endpoint name is used in legend, not filter
@@ -166,7 +166,7 @@ describe('MetricOverTime - V5 Migration Validation', () => {
 
 			// Verify domain filter is present
 			expect(queryData?.filter?.expression).toContain(
-				`http_host = '${mockDomainName}' service.name = 'user-service'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}') service.name = 'user-service'`,
 			);
 		});
 	});

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarCharts.test.tsx

@@ -142,6 +142,7 @@ describe('StatusCodeBarCharts', () => {
 		endTime: 1609545600000,
 	};
 	const mockDomainName = 'test-domain';
+	const mockEndPointName = '/api/test';
 	const onDragSelectMock = jest.fn();
 	const refetchFn = jest.fn();
 
@@ -231,6 +232,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
+				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -266,6 +268,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
+				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -308,6 +311,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
+				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -352,6 +356,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
+				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -399,6 +404,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
+				endPointName={mockEndPointName}
 				filters={mockFilters}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -413,6 +419,7 @@ describe('StatusCodeBarCharts', () => {
 		// but we've confirmed the function is mocked and ready to be tested
 		expect(getStatusCodeBarChartWidgetData).toHaveBeenCalledWith(
 			mockDomainName,
+			mockEndPointName,
 			expect.objectContaining({
 				items: [],
 				op: 'AND',
@@ -460,6 +467,7 @@ describe('StatusCodeBarCharts', () => {
 				endPointStatusCodeBarChartsDataQuery={mockStatusCodeQuery as any}
 				endPointStatusCodeLatencyBarChartsDataQuery={mockLatencyQuery as any}
 				domainName={mockDomainName}
+				endPointName={mockEndPointName}
 				filters={mockCustomFilters as IBuilderQuery['filters']}
 				timeRange={mockTimeRange}
 				onDragSelect={onDragSelectMock}
@@ -469,6 +477,7 @@ describe('StatusCodeBarCharts', () => {
 		// Assert widget creation was called with the correct parameters
 		expect(getStatusCodeBarChartWidgetData).toHaveBeenCalledWith(
 			mockDomainName,
+			mockEndPointName,
 			expect.objectContaining({
 				items: expect.arrayContaining([
 					expect.objectContaining({ id: 'custom-filter' }),

frontend/src/container/ApiMonitoring/__tests__/StatusCodeBarChartsV5Migration.test.tsx

@@ -10,7 +10,7 @@
  *
  * V5 Changes:
  * - Filter format change: filters.items[] → filter.expression
- * - Domain filter: (http_host)
+ * - Domain filter: (net.peer.name OR server.address)
  * - Kind filter: kind_string = 'Client'
  * - stepInterval: 60 → null
  * - Grouped by response_status_code
@@ -47,9 +47,9 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters.items');
 
-			// Base filter 1: Domain (http_host)
+			// Base filter 1: Domain (net.peer.name OR server.address)
 			expect(queryA.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Base filter 2: Kind
@@ -96,9 +96,9 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters.items');
 
-			// Base filter 1: Domain (http_host)
+			// Base filter 1: Domain (net.peer.name OR server.address)
 			expect(queryA.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Base filter 2: Kind
@@ -177,7 +177,7 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(callsExpression).toBe(latencyExpression);
 
 			// Verify base filters
-			expect(callsExpression).toContain('http_host');
+			expect(callsExpression).toContain('net.peer.name');
 			expect(callsExpression).toContain("kind_string = 'Client'");
 
 			// Verify custom filters are merged
@@ -187,4 +187,51 @@ describe('StatusCodeBarCharts - V5 Migration Validation', () => {
 			expect(callsExpression).toContain('production');
 		});
 	});
+
+	describe('4. HTTP URL Filter Handling', () => {
+		it('converts http.url filter to (http.url OR url.full) expression in both charts', () => {
+			const filtersWithHttpUrl: IBuilderQuery['filters'] = {
+				items: [
+					{
+						id: 'http-url-filter',
+						key: {
+							key: 'http.url',
+							dataType: 'string' as any,
+							type: 'tag',
+						},
+						op: '=',
+						value: '/api/metrics',
+					},
+				],
+				op: 'AND',
+			};
+
+			const payload = getEndPointDetailsQueryPayload(
+				mockDomainName,
+				mockStartTime,
+				mockEndTime,
+				filtersWithHttpUrl,
+			);
+
+			const callsChartQuery = payload[4];
+			const latencyChartQuery = payload[5];
+
+			const callsExpression =
+				callsChartQuery.query.builder.queryData[0].filter?.expression;
+			const latencyExpression =
+				latencyChartQuery.query.builder.queryData[0].filter?.expression;
+
+			// CRITICAL: http.url converted to OR logic
+			expect(callsExpression).toContain(
+				"(http.url = '/api/metrics' OR url.full = '/api/metrics')",
+			);
+			expect(latencyExpression).toContain(
+				"(http.url = '/api/metrics' OR url.full = '/api/metrics')",
+			);
+
+			// Base filters still present
+			expect(callsExpression).toContain('net.peer.name');
+			expect(callsExpression).toContain("kind_string = 'Client'");
+		});
+	});
 });

frontend/src/container/ApiMonitoring/__tests__/StatusCodeTableV5Migration.test.tsx

@@ -6,8 +6,8 @@
  * These tests validate the migration from V4 to V5 format for the second payload
  * in getEndPointDetailsQueryPayload (status code table data):
  * - Filter format change: filters.items[] → filter.expression
- * - URL handling: Special logic for http_url
- * - Domain filter: http_host = '${domainName}'
+ * - URL handling: Special logic for (http.url OR url.full)
+ * - Domain filter: (net.peer.name OR server.address)
  * - Kind filter: kind_string = 'Client'
  * - Kind filter: response_status_code EXISTS
  * - Three queries: A (count), B (p99 latency), C (rate)
@@ -45,9 +45,9 @@ describe('StatusCodeTable - V5 Migration Validation', () => {
 			expect(typeof queryA.filter?.expression).toBe('string');
 			expect(queryA).not.toHaveProperty('filters.items');
 
-			// Base filter 1: Domain (http_host)
+			// Base filter 1: Domain (net.peer.name OR server.address)
 			expect(queryA.filter?.expression).toContain(
-				`http_host = '${mockDomainName}'`,
+				`(net.peer.name = '${mockDomainName}' OR server.address = '${mockDomainName}')`,
 			);
 
 			// Base filter 2: Kind
@@ -149,7 +149,7 @@ describe('StatusCodeTable - V5 Migration Validation', () => {
 				statusCodeQuery.query.builder.queryData[0].filter?.expression;
 
 			// Base filters present
-			expect(expression).toContain('http_host');
+			expect(expression).toContain('net.peer.name');
 			expect(expression).toContain("kind_string = 'Client'");
 			expect(expression).toContain('response_status_code EXISTS');
 
@@ -165,4 +165,62 @@ describe('StatusCodeTable - V5 Migration Validation', () => {
 			expect(queries[1].filter?.expression).toBe(queries[2].filter?.expression);
 		});
 	});
+
+	describe('4. HTTP URL Filter Handling', () => {
+		it('converts http.url filter to (http.url OR url.full) expression', () => {
+			const filtersWithHttpUrl: IBuilderQuery['filters'] = {
+				items: [
+					{
+						id: 'http-url-filter',
+						key: {
+							key: 'http.url',
+							dataType: 'string' as any,
+							type: 'tag',
+						},
+						op: '=',
+						value: '/api/users',
+					},
+					{
+						id: 'service-filter',
+						key: {
+							key: 'service.name',
+							dataType: 'string' as any,
+							type: 'resource',
+						},
+						op: '=',
+						value: 'user-service',
+					},
+				],
+				op: 'AND',
+			};
+
+			const payload = getEndPointDetailsQueryPayload(
+				mockDomainName,
+				mockStartTime,
+				mockEndTime,
+				filtersWithHttpUrl,
+			);
+
+			const statusCodeQuery = payload[1];
+			const expression =
+				statusCodeQuery.query.builder.queryData[0].filter?.expression;
+
+			// CRITICAL: http.url converted to OR logic
+			expect(expression).toContain(
+				"(http.url = '/api/users' OR url.full = '/api/users')",
+			);
+
+			// Other filters still present
+			expect(expression).toContain('service.name');
+			expect(expression).toContain('user-service');
+
+			// Base filters present
+			expect(expression).toContain('net.peer.name');
+			expect(expression).toContain("kind_string = 'Client'");
+			expect(expression).toContain('response_status_code EXISTS');
+
+			// All ANDed together (at least 2 ANDs: domain+kind, custom filter, url condition)
+			expect(expression?.match(/AND/g)?.length).toBeGreaterThanOrEqual(2);
+		});
+	});
 });

frontend/src/container/ApiMonitoring/__tests__/TopErrors.test.tsx

@@ -84,7 +84,7 @@ describe('TopErrors', () => {
 									{
 										columns: [
 											{
-												name: SPAN_ATTRIBUTES.HTTP_URL,
+												name: 'http.url',
 												fieldDataType: 'string',
 												fieldContext: 'attribute',
 											},
@@ -124,7 +124,7 @@ describe('TopErrors', () => {
 										table: {
 											rows: [
 												{
-													http_url: '/api/test',
+													'http.url': '/api/test',
 													A: 100,
 												},
 											],
@@ -206,7 +206,7 @@ describe('TopErrors', () => {
 		expect(navigateMock).toHaveBeenCalledWith({
 			filters: expect.arrayContaining([
 				expect.objectContaining({
-					key: expect.objectContaining({ key: SPAN_ATTRIBUTES.HTTP_URL }),
+					key: expect.objectContaining({ key: 'http.url' }),
 					op: '=',
 					value: '/api/test',
 				}),
@@ -335,7 +335,7 @@ describe('TopErrors', () => {
 
 		// Verify all required filters are present
 		expect(filterExpression).toContain(
-			`kind_string = 'Client' AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS AND ${SPAN_ATTRIBUTES.SERVER_NAME} = 'test-domain' AND has_error = true`,
+			`kind_string = 'Client' AND (http.url EXISTS OR url.full EXISTS) AND (net.peer.name = 'test-domain' OR server.address = 'test-domain') AND has_error = true`,
 		);
 	});
 });

frontend/src/container/ApiMonitoring/utils.tsx

@@ -15,6 +15,7 @@ import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsAppli
 import { convertNanoToMilliseconds } from 'container/MetricsExplorer/Summary/utils';
 import dayjs from 'dayjs';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { cloneDeep } from 'lodash-es';
 import { ArrowUpDown, ChevronDown, ChevronRight, Info } from 'lucide-react';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
@@ -56,12 +57,12 @@ export const getDisplayValue = (value: unknown): string =>
 	isEmptyFilterValue(value) ? '-' : String(value);
 
 export const getDomainNameFilterExpression = (domainName: string): string =>
-	`http_host = '${domainName}'`;
+	`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`;
 
 export const clientKindExpression = `kind_string = 'Client'`;
 
 /**
- * Converts filters to expression
+ * Converts filters to expression, handling http.url specially by creating (http.url OR url.full) condition
  * @param filters Filters to convert
  * @param baseExpression Base expression to combine with filters
  * @returns Filter expression string
@@ -74,6 +75,34 @@ export const convertFiltersWithUrlHandling = (
 		return baseExpression;
 	}
 
+	// Check if filters contain http.url (SPAN_ATTRIBUTES.URL_PATH)
+	const httpUrlFilter = filters.items?.find(
+		(item) => item.key?.key === SPAN_ATTRIBUTES.URL_PATH,
+	);
+
+	// If http.url filter exists, create modified filters with (http.url OR url.full)
+	if (httpUrlFilter && httpUrlFilter.value) {
+		// Remove ALL http.url filters from items (guards against duplicates)
+		const otherFilters = filters.items?.filter(
+			(item) => item.key?.key !== SPAN_ATTRIBUTES.URL_PATH,
+		);
+
+		// Convert to expression first with other filters
+		const {
+			filter: intermediateFilter,
+		} = convertFiltersToExpressionWithExistingQuery(
+			{ ...filters, items: otherFilters || [] },
+			baseExpression,
+		);
+
+		// Add the OR condition for http.url and url.full
+		const urlValue = httpUrlFilter.value;
+		const urlCondition = `(http.url = '${urlValue}' OR url.full = '${urlValue}')`;
+		return intermediateFilter.expression.trim()
+			? `${intermediateFilter.expression} AND ${urlCondition}`
+			: urlCondition;
+	}
+
 	const { filter } = convertFiltersToExpressionWithExistingQuery(
 		filters,
 		baseExpression,
@@ -342,7 +371,7 @@ export const formatDataForTable = (
 	});
 };
 
-const urlExpression = `${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`;
+const urlExpression = `(url.full EXISTS OR http.url EXISTS)`;
 
 export const getDomainMetricsQueryPayload = (
 	domainName: string,
@@ -559,7 +588,14 @@ const defaultGroupBy = [
 		dataType: DataTypes.String,
 		isColumn: false,
 		isJSON: false,
-		key: SPAN_ATTRIBUTES.HTTP_URL,
+		key: SPAN_ATTRIBUTES.URL_PATH,
+		type: 'attribute',
+	},
+	{
+		dataType: DataTypes.String,
+		isColumn: false,
+		isJSON: false,
+		key: 'url.full',
 		type: 'attribute',
 	},
 	// {
@@ -831,8 +867,8 @@ function buildFilterExpression(
 ): string {
 	const baseFilterParts = [
 		`kind_string = 'Client'`,
-		`${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
-		`${SPAN_ATTRIBUTES.SERVER_NAME} = '${domainName}'`,
+		`(http.url EXISTS OR url.full EXISTS)`,
+		`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`,
 		`has_error = true`,
 	];
 	if (showStatusCodeErrors) {
@@ -874,7 +910,12 @@ export const getTopErrorsQueryPayload = (
 						filter: { expression: filterExpression },
 						groupBy: [
 							{
-								name: SPAN_ATTRIBUTES.HTTP_URL,
+								name: 'http.url',
+								fieldDataType: 'string',
+								fieldContext: 'attribute',
+							},
+							{
+								name: 'url.full',
 								fieldDataType: 'string',
 								fieldContext: 'attribute',
 							},
@@ -1093,11 +1134,11 @@ export const formatEndPointsDataForTable = (
 	if (!isGroupedByAttribute) {
 		formattedData = data?.map((endpoint) => {
 			const { port } = extractPortAndEndpoint(
-				(endpoint.data[SPAN_ATTRIBUTES.HTTP_URL] as string) || '',
+				(endpoint.data[SPAN_ATTRIBUTES.URL_PATH] as string) || '',
 			);
 			return {
 				key: v4(),
-				endpointName: (endpoint.data[SPAN_ATTRIBUTES.HTTP_URL] as string) || '-',
+				endpointName: (endpoint.data[SPAN_ATTRIBUTES.URL_PATH] as string) || '-',
 				port,
 				callCount:
 					endpoint.data.A === 'n/a' || endpoint.data.A === undefined
@@ -1221,7 +1262,9 @@ export const formatTopErrorsDataForTable = (
 
 		return {
 			key: v4(),
-			endpointName: getDisplayValue(rowObj[SPAN_ATTRIBUTES.HTTP_URL]),
+			endpointName: getDisplayValue(
+				rowObj[SPAN_ATTRIBUTES.URL_PATH] || rowObj['url.full'],
+			),
 			statusCode: getDisplayValue(rowObj[SPAN_ATTRIBUTES.RESPONSE_STATUS_CODE]),
 			statusMessage: getDisplayValue(rowObj.status_message),
 			count: getDisplayValue(rowObj.__result_0),
@@ -1238,10 +1281,10 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'ea16470b',
 			key: {
-				key: SPAN_ATTRIBUTES.HTTP_URL,
+				key: 'http.url',
 				dataType: DataTypes.String,
 				type: 'tag',
-				id: `${SPAN_ATTRIBUTES.HTTP_URL}--string--tag--false`,
+				id: 'http.url--string--tag--false',
 			},
 			op: '=',
 			value: endPointName,
@@ -1738,7 +1781,7 @@ export const getEndPointDetailsQueryPayload = (
 								filters || { items: [], op: 'AND' },
 								`${getDomainNameFilterExpression(
 									domainName,
-								)} AND ${clientKindExpression} AND ${SPAN_ATTRIBUTES.HTTP_URL} EXISTS`,
+								)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 							),
 						},
 						expression: 'A',
@@ -1750,7 +1793,12 @@ export const getEndPointDetailsQueryPayload = (
 						orderBy: [],
 						groupBy: [
 							{
-								key: SPAN_ATTRIBUTES.HTTP_URL,
+								key: SPAN_ATTRIBUTES.URL_PATH,
+								dataType: DataTypes.String,
+								type: 'attribute',
+							},
+							{
+								key: 'url.full',
 								dataType: DataTypes.String,
 								type: 'attribute',
 							},
@@ -2177,7 +2225,7 @@ export const getEndPointZeroStateQueryPayload = (
 						orderBy: [],
 						groupBy: [
 							{
-								key: SPAN_ATTRIBUTES.HTTP_URL,
+								key: SPAN_ATTRIBUTES.URL_PATH,
 								dataType: DataTypes.String,
 								type: 'tag',
 							},
@@ -2371,7 +2419,8 @@ export const statusCodeWidgetInfo = [
 
 interface EndPointDropDownResponseRow {
 	data: {
-		[SPAN_ATTRIBUTES.HTTP_URL]: string;
+		[SPAN_ATTRIBUTES.URL_PATH]: string;
+		'url.full': string;
 		A: number;
 	};
 }
@@ -2390,8 +2439,8 @@ export const getFormattedEndPointDropDownData = (
 	}
 	return data.map((row) => ({
 		key: v4(),
-		label: row.data[SPAN_ATTRIBUTES.HTTP_URL] || '-',
-		value: row.data[SPAN_ATTRIBUTES.HTTP_URL] || '-',
+		label: row.data[SPAN_ATTRIBUTES.URL_PATH] || row.data['url.full'] || '-',
+		value: row.data[SPAN_ATTRIBUTES.URL_PATH] || row.data['url.full'] || '-',
 	}));
 };
 
@@ -2720,6 +2769,7 @@ export const groupStatusCodes = (
 
 export const getStatusCodeBarChartWidgetData = (
 	domainName: string,
+	endPointName: string,
 	filters: IBuilderQuery['filters'],
 ): Widgets => ({
 	query: {
@@ -2748,6 +2798,20 @@ export const getStatusCodeBarChartWidgetData = (
 								op: '=',
 								value: domainName,
 							},
+							...(endPointName
+								? [
+										{
+											id: '8b1be6f0',
+											key: {
+												dataType: DataTypes.String,
+												key: SPAN_ATTRIBUTES.URL_PATH,
+												type: 'tag',
+											},
+											op: '=',
+											value: endPointName,
+										},
+								  ]
+								: []),
 							...(filters?.items || []),
 						],
 						op: 'AND',
@@ -2869,7 +2933,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND http_url EXISTS`,
+							)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 						),
 					},
 					functions: [],
@@ -2901,7 +2965,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND http_url EXISTS`,
+							)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 						),
 					},
 					functions: [],
@@ -2933,7 +2997,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND http_url EXISTS`,
+							)} AND ${clientKindExpression} AND (http.url EXISTS OR url.full EXISTS)`,
 						),
 					},
 					functions: [],
@@ -2965,7 +3029,7 @@ export const getAllEndpointsWidgetData = (
 							filters,
 							`${getDomainNameFilterExpression(
 								domainName,
-							)} AND ${clientKindExpression} AND has_error = true AND http_url EXISTS`,
+							)} AND ${clientKindExpression} AND has_error = true AND (http.url EXISTS OR url.full EXISTS)`,
 						),
 					},
 					functions: [],
@@ -2996,12 +3060,24 @@ export const getAllEndpointsWidgetData = (
 	);
 
 	widget.renderColumnCell = {
-		[SPAN_ATTRIBUTES.HTTP_URL]: (url: string | number): ReactNode => {
-			if (isEmptyFilterValue(url) || !url || url === 'n/a') {
+		[SPAN_ATTRIBUTES.URL_PATH]: (
+			url: string | number,
+			record?: RowData,
+		): ReactNode => {
+			// First try to use the url from the column value
+			let urlValue = url;
+
+			// If url is empty/null and we have the record, fallback to url.full
+			if (isEmptyFilterValue(url) && record) {
+				const { 'url.full': urlFull } = record;
+				urlValue = urlFull;
+			}
+
+			if (!urlValue || urlValue === 'n/a') {
 				return <span>-</span>;
 			}
 
-			const { endpoint } = extractPortAndEndpoint(String(url));
+			const { endpoint } = extractPortAndEndpoint(String(urlValue));
 			return <span>{getDisplayValue(endpoint)}</span>;
 		},
 		A: (numOfCalls: any): ReactNode => (
@@ -3056,8 +3132,8 @@ export const getAllEndpointsWidgetData = (
 	};
 
 	widget.customColTitles = {
-		[SPAN_ATTRIBUTES.HTTP_URL]: 'Endpoint',
-		[SPAN_ATTRIBUTES.SERVER_PORT]: 'Port',
+		[SPAN_ATTRIBUTES.URL_PATH]: 'Endpoint',
+		'net.peer.port': 'Port',
 	};
 
 	widget.title = (
@@ -3082,10 +3158,12 @@ export const getAllEndpointsWidgetData = (
 		</div>
 	);
 
+	widget.hiddenColumns = ['url.full'];
+
 	return widget;
 };
 
-const keysToRemove = [SPAN_ATTRIBUTES.HTTP_URL, 'A', 'B', 'C', 'F1'];
+const keysToRemove = ['http.url', 'url.full', 'A', 'B', 'C', 'F1'];
 
 export const getGroupByFiltersFromGroupByValues = (
 	rowData: any,
@@ -3143,7 +3221,7 @@ export const getRateOverTimeWidgetData = (
 					filter: {
 						expression: convertFiltersWithUrlHandling(
 							filters || { items: [], op: 'AND' },
-							`http_host = '${domainName}'`,
+							`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`,
 						),
 					},
 					functions: [],
@@ -3194,7 +3272,7 @@ export const getLatencyOverTimeWidgetData = (
 					filter: {
 						expression: convertFiltersWithUrlHandling(
 							filters || { items: [], op: 'AND' },
-							`http_host = '${domainName}'`,
+							`(net.peer.name = '${domainName}' OR server.address = '${domainName}')`,
 						),
 					},
 					functions: [],

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useMutation } from 'react-query';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import {
@@ -14,16 +15,14 @@ import {
 	Tag,
 	Typography,
 } from 'antd';
-import {
-	RenderErrorResponseDTO,
-	ZeustypesHostDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { useGetHosts, usePutHost } from 'api/generated/services/zeus';
+import updateSubDomainAPI from 'api/customDomain/updateSubDomain';
 import { AxiosError } from 'axios';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
+import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
 import { useNotifications } from 'hooks/useNotifications';
 import { InfoIcon, Link2, Pencil } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
+import { HostsProps } from 'types/api/customDomain/types';
 
 import './CustomDomainSettings.styles.scss';
 
@@ -36,7 +35,7 @@ export default function CustomDomainSettings(): JSX.Element {
 	const { notifications } = useNotifications();
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isPollingEnabled, setIsPollingEnabled] = useState(false);
-	const [hosts, setHosts] = useState<ZeustypesHostDTO[] | null>(null);
+	const [hosts, setHosts] = useState<HostsProps[] | null>(null);
 
 	const [updateDomainError, setUpdateDomainError] = useState<AxiosError | null>(
 		null,
@@ -58,37 +57,36 @@ export default function CustomDomainSettings(): JSX.Element {
 	};
 
 	const {
-		data: hostsData,
-		isLoading: isLoadingHosts,
-		isFetching: isFetchingHosts,
-		refetch: refetchHosts,
-	} = useGetHosts();
+		data: deploymentsData,
+		isLoading: isLoadingDeploymentsData,
+		isFetching: isFetchingDeploymentsData,
+		refetch: refetchDeploymentsData,
+	} = useGetDeploymentsData(true);
 
 	const {
 		mutate: updateSubDomain,
 		isLoading: isLoadingUpdateCustomDomain,
-	} = usePutHost<AxiosError<RenderErrorResponseDTO>>();
-
-	const stripProtocol = (url: string): string => {
-		return url?.split('://')[1] ?? url;
-	};
-
-	const dnsSuffix = useMemo(() => {
-		const defaultHost = hosts?.find((h) => h.is_default);
-		return defaultHost?.url && defaultHost?.name
-			? defaultHost.url.split(`${defaultHost.name}.`)[1] || ''
-			: '';
-	}, [hosts]);
+	} = useMutation(updateSubDomainAPI, {
+		onSuccess: () => {
+			setIsPollingEnabled(true);
+			refetchDeploymentsData();
+			setIsEditModalOpen(false);
+		},
+		onError: (error: AxiosError) => {
+			setUpdateDomainError(error);
+			setIsPollingEnabled(false);
+		},
+	});
 
 	useEffect(() => {
-		if (isFetchingHosts) {
+		if (isFetchingDeploymentsData) {
 			return;
 		}
 
-		if (hostsData?.data?.status === 'success') {
-			setHosts(hostsData?.data?.data?.hosts ?? null);
+		if (deploymentsData?.data?.status === 'success') {
+			setHosts(deploymentsData.data.data.hosts);
 
-			const activeCustomDomain = hostsData?.data?.data?.hosts?.find(
+			const activeCustomDomain = deploymentsData.data.data.hosts.find(
 				(host) => !host.is_default,
 			);
 
@@ -99,36 +97,32 @@ export default function CustomDomainSettings(): JSX.Element {
 			}
 		}
 
-		if (hostsData?.data?.data?.state !== 'HEALTHY' && isPollingEnabled) {
+		if (deploymentsData?.data?.data?.state !== 'HEALTHY' && isPollingEnabled) {
 			setTimeout(() => {
-				refetchHosts();
+				refetchDeploymentsData();
 			}, 3000);
 		}
 
-		if (hostsData?.data?.data?.state === 'HEALTHY') {
+		if (deploymentsData?.data?.data.state === 'HEALTHY') {
 			setIsPollingEnabled(false);
 		}
-	}, [hostsData, refetchHosts, isPollingEnabled, isFetchingHosts]);
+	}, [
+		deploymentsData,
+		refetchDeploymentsData,
+		isPollingEnabled,
+		isFetchingDeploymentsData,
+	]);
 
 	const onUpdateCustomDomainSettings = (): void => {
 		editForm
 			.validateFields()
 			.then((values) => {
 				if (values.subdomain) {
-					updateSubDomain(
-						{ data: { name: values.subdomain } },
-						{
-							onSuccess: () => {
-								setIsPollingEnabled(true);
-								refetchHosts();
-								setIsEditModalOpen(false);
-							},
-							onError: (error: AxiosError<RenderErrorResponseDTO>) => {
-								setUpdateDomainError(error as AxiosError);
-								setIsPollingEnabled(false);
-							},
+					updateSubDomain({
+						data: {
+							name: values.subdomain,
 						},
-					);
+					});
 
 					setCustomDomainDetails({
 						subdomain: values.subdomain,
@@ -140,8 +134,10 @@ export default function CustomDomainSettings(): JSX.Element {
 			});
 	};
 
-	const onCopyUrlHandler = (url: string): void => {
-		setCopyUrl(stripProtocol(url));
+	const onCopyUrlHandler = (host: string): void => {
+		const url = `${host}.${deploymentsData?.data.data.cluster.region.dns}`;
+
+		setCopyUrl(url);
 		notifications.success({
 			message: 'Copied to clipboard',
 		});
@@ -161,7 +157,7 @@ export default function CustomDomainSettings(): JSX.Element {
 			</div>
 
 			<div className="custom-domain-settings-content">
-				{!isLoadingHosts && (
+				{!isLoadingDeploymentsData && (
 					<Card className="custom-domain-settings-card">
 						<div className="custom-domain-settings-content-header">
 							Team {org?.[0]?.displayName} Information
@@ -173,9 +169,10 @@ export default function CustomDomainSettings(): JSX.Element {
 									<div
 										className="custom-domain-url"
 										key={host.name}
-										onClick={(): void => onCopyUrlHandler(host.url || '')}
+										onClick={(): void => onCopyUrlHandler(host.name)}
 									>
-										<Link2 size={12} /> {stripProtocol(host.url || '')}
+										<Link2 size={12} /> {host.name}.
+										{deploymentsData?.data.data.cluster.region.dns}
 										{host.is_default && <Tag color={Color.BG_ROBIN_500}>Default</Tag>}
 									</div>
 								))}
@@ -184,7 +181,11 @@ export default function CustomDomainSettings(): JSX.Element {
 							<div className="custom-domain-url-edit-btn">
 								<Button
 									className="periscope-btn"
-									disabled={isLoadingHosts || isFetchingHosts || isPollingEnabled}
+									disabled={
+										isLoadingDeploymentsData ||
+										isFetchingDeploymentsData ||
+										isPollingEnabled
+									}
 									type="default"
 									icon={<Pencil size={10} />}
 									onClick={(): void => setIsEditModalOpen(true)}
@@ -197,7 +198,7 @@ export default function CustomDomainSettings(): JSX.Element {
 						{isPollingEnabled && (
 							<Alert
 								className="custom-domain-update-status"
-								message={`Updating your URL to ⎯ ${customDomainDetails?.subdomain}.${dnsSuffix}. This may take a few mins.`}
+								message={`Updating your URL to ⎯ ${customDomainDetails?.subdomain}.${deploymentsData?.data.data.cluster.region.dns}. This may take a few mins.`}
 								type="info"
 								icon={<InfoIcon size={12} />}
 							/>
@@ -205,7 +206,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					</Card>
 				)}
 
-				{isLoadingHosts && (
+				{isLoadingDeploymentsData && (
 					<Card className="custom-domain-settings-card">
 						<Skeleton
 							className="custom-domain-settings-skeleton"
@@ -254,7 +255,7 @@ export default function CustomDomainSettings(): JSX.Element {
 									addonBefore={updateDomainError && <InfoIcon size={12} color="red" />}
 									placeholder="Enter Domain"
 									onChange={(): void => setUpdateDomainError(null)}
-									addonAfter={dnsSuffix}
+									addonAfter={deploymentsData?.data.data.cluster.region.dns}
 									autoFocus
 								/>
 							</Form.Item>
@@ -266,8 +267,7 @@ export default function CustomDomainSettings(): JSX.Element {
 							{updateDomainError.status === 409 ? (
 								<Alert
 									message={
-										(updateDomainError?.response?.data as RenderErrorResponseDTO)?.error
-											?.message ||
+										(updateDomainError?.response?.data as { error?: string })?.error ||
 										'You’ve already updated the custom domain once today. To make further changes, please contact our support team for assistance.'
 									}
 									type="warning"
@@ -275,10 +275,7 @@ export default function CustomDomainSettings(): JSX.Element {
 								/>
 							) : (
 								<Typography.Text type="danger">
-									{
-										(updateDomainError?.response?.data as RenderErrorResponseDTO)?.error
-											?.message
-									}
+									{(updateDomainError.response?.data as { error: string })?.error}
 								</Typography.Text>
 							)}
 						</div>

frontend/src/container/CustomDomainSettings/__tests__/CustomDomainSettings.test.tsx

@@ -1,128 +0,0 @@
-import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import CustomDomainSettings from '../CustomDomainSettings';
-
-const ZEUS_HOSTS_ENDPOINT = '*/api/v2/zeus/hosts';
-
-const mockHostsResponse: GetHosts200 = {
-	status: 'success',
-	data: {
-		name: 'accepted-starfish',
-		state: 'HEALTHY',
-		tier: 'PREMIUM',
-		hosts: [
-			{
-				name: 'accepted-starfish',
-				is_default: true,
-				url: 'https://accepted-starfish.test.cloud',
-			},
-			{
-				name: 'custom-host',
-				is_default: false,
-				url: 'https://custom-host.test.cloud',
-			},
-		],
-	},
-};
-
-describe('CustomDomainSettings', () => {
-	afterEach(() => server.resetHandlers());
-
-	it('renders host URLs with protocol stripped and marks the default host', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		render(<CustomDomainSettings />);
-
-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
-		await screen.findByText(/custom-host\.test\.cloud/i);
-		expect(screen.getByText('Default')).toBeInTheDocument();
-	});
-
-	it('opens edit modal with DNS suffix derived from the default host', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<CustomDomainSettings />);
-
-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
-
-		await user.click(
-			screen.getByRole('button', { name: /customize team['’]s url/i }),
-		);
-
-		expect(
-			screen.getByRole('dialog', { name: /customize your team['’]s url/i }),
-		).toBeInTheDocument();
-		// DNS suffix is the part of the default host URL after the name prefix
-		expect(screen.getByText('test.cloud')).toBeInTheDocument();
-	});
-
-	it('submits PUT to /zeus/hosts with the entered subdomain as the payload', async () => {
-		let capturedBody: Record<string, unknown> = {};
-
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-			rest.put(ZEUS_HOSTS_ENDPOINT, async (req, res, ctx) => {
-				capturedBody = await req.json<Record<string, unknown>>();
-				return res(ctx.status(200), ctx.json({}));
-			}),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<CustomDomainSettings />);
-
-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /customize team['’]s url/i }),
-		);
-
-		const input = screen.getByPlaceholderText(/enter domain/i);
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
-
-		await waitFor(() => {
-			expect(capturedBody).toEqual({ name: 'myteam' });
-		});
-	});
-
-	it('shows contact support option when domain update returns 409', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-			rest.put(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(
-					ctx.status(409),
-					ctx.json({ error: { message: 'Already updated today' } }),
-				),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		render(<CustomDomainSettings />);
-
-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /customize team['’]s url/i }),
-		);
-		await user.type(screen.getByPlaceholderText(/enter domain/i), 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
-
-		expect(
-			await screen.findByRole('button', { name: /contact support/i }),
-		).toBeInTheDocument();
-	});
-});

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -34,9 +34,6 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
-	const dynamicVariableOrder = useDashboardVariablesSelector(
-		(state) => state.dynamicVariableOrder,
-	);
 	const dependencyData = useDashboardVariablesSelector(
 		(state) => state.dependencyData,
 	);
@@ -55,11 +52,10 @@ function DashboardVariableSelection(): JSX.Element | null {
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
 
 	// Memoize the order key to avoid unnecessary triggers
-	const variableOrderKey = useMemo(() => {
-		const queryVariableOrderKey = dependencyData?.order?.join(',') ?? '';
-		const dynamicVariableOrderKey = dynamicVariableOrder?.join(',') ?? '';
-		return `${queryVariableOrderKey}|${dynamicVariableOrderKey}`;
-	}, [dependencyData?.order, dynamicVariableOrder]);
+	const dependencyOrderKey = useMemo(
+		() => dependencyData?.order?.join(',') ?? '',
+		[dependencyData?.order],
+	);
 
 	// Initialize fetch store then start a new fetch cycle.
 	// Runs on dependency order changes, and time range changes.
@@ -70,7 +66,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		initializeVariableFetchStore(allVariableNames);
 		enqueueFetchOfAllVariables();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [variableOrderKey, minTime, maxTime]);
+	}, [dependencyOrderKey, minTime, maxTime]);
 
 	// Performance optimization: For dynamic variables with allSelected=true, we don't store
 	// individual values in localStorage since we can always derive them from available options.

frontend/src/container/DashboardContainer/DashboardVariablesSelection/__test__/DashboardVariableSelection.test.tsx

@@ -1,203 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import { act, render } from '@testing-library/react';
-import {
-	dashboardVariablesStore,
-	setDashboardVariablesStore,
-	updateDashboardVariablesStore,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import {
-	IDashboardVariables,
-	IDashboardVariablesStoreState,
-} from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreTypes';
-import {
-	enqueueFetchOfAllVariables,
-	initializeVariableFetchStore,
-} from 'providers/Dashboard/store/variableFetchStore';
-import { IDashboardVariable } from 'types/api/dashboard/getAll';
-
-import DashboardVariableSelection from '../DashboardVariableSelection';
-
-// Mock providers/Dashboard/Dashboard
-const mockSetSelectedDashboard = jest.fn();
-const mockUpdateLocalStorageDashboardVariables = jest.fn();
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): Record<string, unknown> => ({
-		setSelectedDashboard: mockSetSelectedDashboard,
-		updateLocalStorageDashboardVariables: mockUpdateLocalStorageDashboardVariables,
-	}),
-}));
-
-// Mock hooks/dashboard/useVariablesFromUrl
-const mockUpdateUrlVariable = jest.fn();
-const mockGetUrlVariables = jest.fn().mockReturnValue({});
-jest.mock('hooks/dashboard/useVariablesFromUrl', () => ({
-	__esModule: true,
-	default: (): Record<string, unknown> => ({
-		updateUrlVariable: mockUpdateUrlVariable,
-		getUrlVariables: mockGetUrlVariables,
-	}),
-}));
-
-// Mock variableFetchStore functions
-jest.mock('providers/Dashboard/store/variableFetchStore', () => ({
-	initializeVariableFetchStore: jest.fn(),
-	enqueueFetchOfAllVariables: jest.fn(),
-	enqueueDescendantsOfVariable: jest.fn(),
-}));
-
-// Mock initializeDefaultVariables
-jest.mock('providers/Dashboard/initializeDefaultVariables', () => ({
-	initializeDefaultVariables: jest.fn(),
-}));
-
-// Mock react-redux useSelector for globalTime
-jest.mock('react-redux', () => ({
-	...jest.requireActual('react-redux'),
-	useSelector: jest.fn().mockReturnValue({ minTime: 1000, maxTime: 2000 }),
-}));
-
-// Mock VariableItem to avoid rendering complexity
-jest.mock('../VariableItem', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="variable-item" />,
-}));
-
-function createVariable(
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable {
-	return {
-		id: 'test-id',
-		name: 'test-var',
-		description: '',
-		type: 'QUERY',
-		sort: 'DISABLED',
-		showALLOption: false,
-		multiSelect: false,
-		order: 0,
-		...overrides,
-	};
-}
-
-function resetStore(): void {
-	dashboardVariablesStore.set(() => ({
-		dashboardId: '',
-		variables: {},
-		sortedVariablesArray: [],
-		dependencyData: null,
-		variableTypes: {},
-		dynamicVariableOrder: [],
-	}));
-}
-
-describe('DashboardVariableSelection', () => {
-	beforeEach(() => {
-		resetStore();
-		jest.clearAllMocks();
-	});
-
-	it('should call initializeVariableFetchStore and enqueueFetchOfAllVariables on mount', () => {
-		const variables: IDashboardVariables = {
-			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-		};
-
-		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
-
-		render(<DashboardVariableSelection />);
-
-		expect(initializeVariableFetchStore).toHaveBeenCalledWith(['env']);
-		expect(enqueueFetchOfAllVariables).toHaveBeenCalled();
-	});
-
-	it('should re-trigger fetch cycle when dynamicVariableOrder changes', () => {
-		const variables: IDashboardVariables = {
-			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-		};
-
-		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
-
-		render(<DashboardVariableSelection />);
-
-		// Clear mocks after initial render
-		(initializeVariableFetchStore as jest.Mock).mockClear();
-		(enqueueFetchOfAllVariables as jest.Mock).mockClear();
-
-		// Add a DYNAMIC variable which changes dynamicVariableOrder
-		act(() => {
-			updateDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-					dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-				},
-			});
-		});
-
-		expect(initializeVariableFetchStore).toHaveBeenCalledWith(
-			expect.arrayContaining(['env', 'dyn1']),
-		);
-		expect(enqueueFetchOfAllVariables).toHaveBeenCalled();
-	});
-
-	it('should re-trigger fetch cycle when a dynamic variable is removed', () => {
-		const variables: IDashboardVariables = {
-			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-			dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-			dyn2: createVariable({ name: 'dyn2', type: 'DYNAMIC', order: 2 }),
-		};
-
-		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
-
-		render(<DashboardVariableSelection />);
-
-		(initializeVariableFetchStore as jest.Mock).mockClear();
-		(enqueueFetchOfAllVariables as jest.Mock).mockClear();
-
-		// Remove dyn2, changing dynamicVariableOrder from ['dyn1','dyn2'] to ['dyn1']
-		act(() => {
-			updateDashboardVariablesStore({
-				dashboardId: 'dash-1',
-				variables: {
-					env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-					dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-				},
-			});
-		});
-
-		expect(initializeVariableFetchStore).toHaveBeenCalledWith(['env', 'dyn1']);
-		expect(enqueueFetchOfAllVariables).toHaveBeenCalled();
-	});
-
-	it('should NOT re-trigger fetch cycle when dynamicVariableOrder stays the same', () => {
-		const variables: IDashboardVariables = {
-			env: createVariable({ name: 'env', type: 'QUERY', order: 0 }),
-			dyn1: createVariable({ name: 'dyn1', type: 'DYNAMIC', order: 1 }),
-		};
-
-		setDashboardVariablesStore({ dashboardId: 'dash-1', variables });
-
-		render(<DashboardVariableSelection />);
-
-		(initializeVariableFetchStore as jest.Mock).mockClear();
-		(enqueueFetchOfAllVariables as jest.Mock).mockClear();
-
-		// Update a non-dynamic variable's selectedValue — dynamicVariableOrder unchanged
-		act(() => {
-			const snapshot = dashboardVariablesStore.getSnapshot();
-			dashboardVariablesStore.set(
-				(): IDashboardVariablesStoreState => ({
-					...snapshot,
-					variables: {
-						...snapshot.variables,
-						env: {
-							...snapshot.variables.env,
-							selectedValue: 'production',
-						},
-					},
-				}),
-			);
-		});
-
-		expect(initializeVariableFetchStore).not.toHaveBeenCalled();
-		expect(enqueueFetchOfAllVariables).not.toHaveBeenCalled();
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
 import {
 	HistogramTooltipProps,
 	TooltipRenderArgs,
@@ -21,11 +22,21 @@ export default function Histogram(props: HistogramChartProps): JSX.Element {
 			if (customRenderTooltip) {
 				return customRenderTooltip(props);
 			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
 			const tooltipProps: HistogramTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				content,
 			};
 			return <HistogramTooltip {...tooltipProps} />;
 		},

frontend/src/container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
 import TimeSeriesTooltip from 'lib/uPlotV2/components/Tooltip/TimeSeriesTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
 import {
 	TimeSeriesTooltipProps,
 	TooltipRenderArgs,
@@ -16,11 +17,21 @@ export default function TimeSeries(props: TimeSeriesChartProps): JSX.Element {
 			if (customRenderTooltip) {
 				return customRenderTooltip(props);
 			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
 			const tooltipProps: TimeSeriesTooltipProps = {
 				...props,
 				timezone: rest.timezone,
 				yAxisUnit: rest.yAxisUnit,
 				decimalPrecision: rest.decimalPrecision,
+				content,
 			};
 			return <TimeSeriesTooltip {...tooltipProps} />;
 		},

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.styles.scss

@@ -1,22 +1,3 @@
-.chart-manager-series-label {
-	width: 100%;
-	min-width: 0;
-	max-width: 100%;
-	cursor: pointer;
-	border: none;
-	background-color: transparent;
-	color: inherit;
-	text-align: left;
-	padding: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&:disabled {
-		cursor: not-allowed;
-	}
-}
-
 .chart-manager-container {
 	width: 100%;
 	max-height: calc(40% - 40px);

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,28 +1,24 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button, Input } from 'antd';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
+import { getGraphManagerTableColumns } from 'container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns';
+import { ExtendedChartDataset } from 'container/GridCardLayout/GridCard/FullView/types';
+import { getDefaultTableDataSet } from 'container/GridCardLayout/GridCard/FullView/utils';
 import { useNotifications } from 'hooks/useNotifications';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { usePlotContext } from 'lib/uPlotV2/context/PlotContext';
 import useLegendsSync from 'lib/uPlotV2/hooks/useLegendsSync';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 
-import { getChartManagerColumns } from './columns';
-import { ExtendedChartDataset, getDefaultTableDataSet } from './utils';
-
 import './ChartManager.styles.scss';
 
 interface ChartManagerProps {
 	config: UPlotConfigBuilder;
 	alignedData: uPlot.AlignedData;
 	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
 	onCancel?: () => void;
 }
 
-const X_AXIS_INDEX = 0;
-
 /**
  * ChartManager provides a tabular view to manage the visibility of
  * individual series on a uPlot chart.
@@ -32,12 +28,16 @@ const X_AXIS_INDEX = 0;
  * - filter series by label
  * - toggle individual series on/off
  * - persist the visibility configuration to local storage.
+ *
+ * @param config - `UPlotConfigBuilder` instance used to derive chart options.
+ * @param alignedData - uPlot aligned data used to build the initial table dataset.
+ * @param yAxisUnit - Optional unit label for Y-axis values shown in the table.
+ * @param onCancel - Optional callback invoked when the user cancels the dialog.
  */
 export default function ChartManager({
 	config,
 	alignedData,
 	yAxisUnit,
-	decimalPrecision = PrecisionOptionsEnum.TWO,
 	onCancel,
 }: ChartManagerProps): JSX.Element {
 	const { notifications } = useNotifications();
@@ -53,13 +53,8 @@ export default function ChartManager({
 	const { isDashboardLocked } = useDashboard();
 
 	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(() =>
-		getDefaultTableDataSet(
-			config.getConfig() as uPlot.Options,
-			alignedData,
-			decimalPrecision,
-		),
+		getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
 	);
-	const [filterValue, setFilterValue] = useState('');
 
 	const graphVisibilityState = useMemo(
 		() =>
@@ -72,62 +67,46 @@ export default function ChartManager({
 
 	useEffect(() => {
 		setTableDataSet(
-			getDefaultTableDataSet(
-				config.getConfig() as uPlot.Options,
-				alignedData,
-				decimalPrecision,
-			),
+			getDefaultTableDataSet(config.getConfig() as uPlot.Options, alignedData),
 		);
-		setFilterValue('');
-	}, [alignedData, config, decimalPrecision]);
+	}, [alignedData, config]);
 
-	const handleFilterChange = useCallback(
-		(e: React.ChangeEvent<HTMLInputElement>): void => {
-			setFilterValue(e.target.value.toLowerCase());
+	const filterHandler = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>): void => {
+			const value = event.target.value.toString().toLowerCase();
+			const updatedDataSet = tableDataSet.map((item) => {
+				if (item.label?.toLocaleLowerCase().includes(value)) {
+					return { ...item, show: true };
+				}
+				return { ...item, show: false };
+			});
+			setTableDataSet(updatedDataSet);
 		},
-		[],
+		[tableDataSet],
 	);
 
-	const handleToggleSeriesOnOff = useCallback(
-		(index: number): void => {
-			onToggleSeriesOnOff(index);
-		},
-		[onToggleSeriesOnOff],
+	const dataSource = useMemo(
+		() =>
+			tableDataSet.filter(
+				(item, index) => index !== 0 && item.show, // skipping the first item as it is the x-axis
+			),
+		[tableDataSet],
 	);
 
-	const dataSource = useMemo(() => {
-		const filter = filterValue.trim();
-		return tableDataSet.filter((item, index) => {
-			if (index === X_AXIS_INDEX) {
-				return false;
-			}
-			if (!filter) {
-				return true;
-			}
-			return item.label?.toLowerCase().includes(filter) ?? false;
-		});
-	}, [tableDataSet, filterValue]);
-
 	const columns = useMemo(
 		() =>
-			getChartManagerColumns({
+			getGraphManagerTableColumns({
 				tableDataSet,
+				checkBoxOnChangeHandler: (_e, index) => {
+					onToggleSeriesOnOff(index);
+				},
 				graphVisibilityState,
-				onToggleSeriesOnOff: handleToggleSeriesOnOff,
-				onToggleSeriesVisibility,
+				labelClickedHandler: onToggleSeriesVisibility,
 				yAxisUnit,
 				isGraphDisabled: isDashboardLocked,
-				decimalPrecision,
 			}),
-		[
-			tableDataSet,
-			graphVisibilityState,
-			handleToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit,
-			isDashboardLocked,
-			decimalPrecision,
-		],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[tableDataSet, graphVisibilityState, yAxisUnit, isDashboardLocked],
 	);
 
 	const handleSave = useCallback((): void => {
@@ -135,23 +114,20 @@ export default function ChartManager({
 		notifications.success({
 			message: 'The updated graphs & legends are saved',
 		});
-		onCancel?.();
+		if (onCancel) {
+			onCancel();
+		}
 	}, [syncSeriesVisibilityToLocalStorage, notifications, onCancel]);
 
 	return (
 		<div className="chart-manager-container">
 			<div className="chart-manager-header">
-				<Input
-					placeholder="Filter Series"
-					value={filterValue}
-					onChange={handleFilterChange}
-					data-testid="filter-input"
-				/>
+				<Input onChange={filterHandler} placeholder="Filter Series" />
 				<div className="chart-manager-actions-container">
-					<Button type="default" onClick={onCancel} data-testid="cancel-button">
+					<Button type="default" onClick={onCancel}>
 						Cancel
 					</Button>
-					<Button type="primary" onClick={handleSave} data-testid="save-button">
+					<Button type="primary" onClick={handleSave}>
 						Save
 					</Button>
 				</div>
@@ -160,10 +136,10 @@ export default function ChartManager({
 				<ResizeTable
 					columns={columns}
 					dataSource={dataSource}
+					virtual
 					rowKey="index"
 					scroll={{ y: 200 }}
 					pagination={false}
-					virtual
 				/>
 			</div>
 		</div>

frontend/src/container/DashboardContainer/visualization/components/ChartManager/SeriesLabel.tsx

@@ -1,31 +0,0 @@
-import { Tooltip } from 'antd';
-
-import './ChartManager.styles.scss';
-
-interface SeriesLabelProps {
-	label: string;
-	labelIndex: number;
-	onClick: (idx: number) => void;
-	disabled?: boolean;
-}
-
-export function SeriesLabel({
-	label,
-	labelIndex,
-	onClick,
-	disabled,
-}: SeriesLabelProps): JSX.Element {
-	return (
-		<Tooltip placement="topLeft" title={label}>
-			<button
-				className="chart-manager-series-label"
-				disabled={disabled}
-				type="button"
-				data-testid={`series-label-button-${labelIndex}`}
-				onClick={(): void => onClick(labelIndex)}
-			>
-				{label}
-			</button>
-		</Tooltip>
-	);
-}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/ChartManager.test.tsx

@@ -1,172 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { render, screen } from 'tests/test-utils';
-
-import ChartManager from '../ChartManager';
-
-const mockSyncSeriesVisibilityToLocalStorage = jest.fn();
-const mockNotificationsSuccess = jest.fn();
-
-jest.mock('lib/uPlotV2/context/PlotContext', () => ({
-	usePlotContext: (): {
-		onToggleSeriesOnOff: jest.Mock;
-		onToggleSeriesVisibility: jest.Mock;
-		syncSeriesVisibilityToLocalStorage: jest.Mock;
-	} => ({
-		onToggleSeriesOnOff: jest.fn(),
-		onToggleSeriesVisibility: jest.fn(),
-		syncSeriesVisibilityToLocalStorage: mockSyncSeriesVisibilityToLocalStorage,
-	}),
-}));
-
-jest.mock('lib/uPlotV2/hooks/useLegendsSync', () => ({
-	__esModule: true,
-	default: (): {
-		legendItemsMap: { [key: number]: { show: boolean; label: string } };
-	} => ({
-		legendItemsMap: {
-			0: { show: true, label: 'Time' },
-			1: { show: true, label: 'Series 1' },
-			2: { show: true, label: 'Series 2' },
-		},
-	}),
-}));
-
-jest.mock('providers/Dashboard/Dashboard', () => ({
-	useDashboard: (): { isDashboardLocked: boolean } => ({
-		isDashboardLocked: false,
-	}),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): { notifications: { success: jest.Mock } } => ({
-		notifications: {
-			success: mockNotificationsSuccess,
-		},
-	}),
-}));
-
-jest.mock('components/ResizeTable', () => {
-	const MockTable = ({
-		dataSource,
-		columns,
-	}: {
-		dataSource: { index: number; label?: string }[];
-		columns: { key: string; title: string }[];
-	}): JSX.Element => (
-		<div data-testid="resize-table">
-			{columns.map((col) => (
-				<span key={col.key}>{col.title}</span>
-			))}
-			{dataSource.map((row) => (
-				<div key={row.index} data-testid={`row-${row.index}`}>
-					{row.label}
-				</div>
-			))}
-		</div>
-	);
-	return { ResizeTable: MockTable };
-});
-
-const createMockConfig = (): { getConfig: () => uPlot.Options } => ({
-	getConfig: (): uPlot.Options => ({
-		width: 100,
-		height: 100,
-		series: [
-			{ label: 'Time', value: 'time' },
-			{ label: 'Series 1', scale: 'y' },
-			{ label: 'Series 2', scale: 'y' },
-		],
-	}),
-});
-
-const createAlignedData = (): uPlot.AlignedData => [
-	[1000, 2000, 3000],
-	[10, 20, 30],
-	[1, 2, 3],
-];
-
-describe('ChartManager', () => {
-	const mockOnCancel = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders filter input and action buttons', () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as any}
-				alignedData={createAlignedData()}
-				onCancel={mockOnCancel}
-			/>,
-		);
-
-		expect(screen.getByPlaceholderText('Filter Series')).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
-	});
-
-	it('renders ResizeTable with data', () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-			/>,
-		);
-
-		expect(screen.getByTestId('resize-table')).toBeInTheDocument();
-	});
-
-	it('calls onCancel when Cancel button is clicked', async () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-				onCancel={mockOnCancel}
-			/>,
-		);
-
-		await userEvent.click(screen.getByTestId('cancel-button'));
-
-		expect(mockOnCancel).toHaveBeenCalledTimes(1);
-	});
-
-	it('filters table data when typing in filter input', async () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-			/>,
-		);
-
-		// Before filter: both Series 1 and Series 2 rows are visible
-		expect(screen.getByTestId('row-1')).toBeInTheDocument();
-		expect(screen.getByTestId('row-2')).toBeInTheDocument();
-
-		const filterInput = screen.getByTestId('filter-input');
-		await userEvent.type(filterInput, 'Series 1');
-
-		// After filter: only Series 1 row is visible, Series 2 row is filtered out
-		expect(screen.getByTestId('row-1')).toBeInTheDocument();
-		expect(screen.queryByTestId('row-2')).not.toBeInTheDocument();
-	});
-
-	it('calls syncSeriesVisibilityToLocalStorage, notifications.success, and onCancel when Save is clicked', async () => {
-		render(
-			<ChartManager
-				config={createMockConfig() as UPlotConfigBuilder}
-				alignedData={createAlignedData()}
-				onCancel={mockOnCancel}
-			/>,
-		);
-
-		await userEvent.click(screen.getByTestId('save-button'));
-
-		expect(mockSyncSeriesVisibilityToLocalStorage).toHaveBeenCalledTimes(1);
-		expect(mockNotificationsSuccess).toHaveBeenCalledWith({
-			message: 'The updated graphs & legends are saved',
-		});
-		expect(mockOnCancel).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/SeriesLabel.test.tsx

@@ -1,39 +0,0 @@
-import userEvent from '@testing-library/user-event';
-import { render, screen } from 'tests/test-utils';
-
-import { SeriesLabel } from '../SeriesLabel';
-
-describe('SeriesLabel', () => {
-	it('renders the label text', () => {
-		render(
-			<SeriesLabel label="Test Series Label" labelIndex={1} onClick={jest.fn()} />,
-		);
-		expect(screen.getByTestId('series-label-button-1')).toHaveTextContent(
-			'Test Series Label',
-		);
-	});
-
-	it('calls onClick with labelIndex when clicked', async () => {
-		const onClick = jest.fn();
-		render(<SeriesLabel label="Series A" labelIndex={2} onClick={onClick} />);
-
-		await userEvent.click(screen.getByTestId('series-label-button-2'));
-
-		expect(onClick).toHaveBeenCalledWith(2);
-		expect(onClick).toHaveBeenCalledTimes(1);
-	});
-
-	it('renders disabled button when disabled prop is true', () => {
-		render(
-			<SeriesLabel label="Disabled" labelIndex={0} onClick={jest.fn()} disabled />,
-		);
-		const button = screen.getByTestId('series-label-button-0');
-		expect(button).toBeDisabled();
-	});
-
-	it('has chart-manager-series-label class', () => {
-		render(<SeriesLabel label="Label" labelIndex={0} onClick={jest.fn()} />);
-		const button = screen.getByTestId('series-label-button-0');
-		expect(button).toHaveClass('chart-manager-series-label');
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/columns.test.tsx

@@ -1,167 +0,0 @@
-import { render } from '@testing-library/react';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
-
-import { getChartManagerColumns } from '../columns';
-import { ExtendedChartDataset } from '../utils';
-
-const createMockDataset = (
-	index: number,
-	overrides: Partial<ExtendedChartDataset> = {},
-): ExtendedChartDataset =>
-	({
-		index,
-		label: `Series ${index}`,
-		show: true,
-		sum: 100,
-		avg: 50,
-		min: 10,
-		max: 90,
-		stroke: '#ff0000',
-		...overrides,
-	} as ExtendedChartDataset);
-
-describe('getChartManagerColumns', () => {
-	const tableDataSet: ExtendedChartDataset[] = [
-		createMockDataset(0, { label: 'Time' }),
-		createMockDataset(1),
-		createMockDataset(2),
-	];
-	const graphVisibilityState = [true, true, false];
-	const onToggleSeriesOnOff = jest.fn();
-	const onToggleSeriesVisibility = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('returns columns with expected structure', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		expect(columns).toHaveLength(6);
-		expect(columns[0].key).toBe('index');
-		expect(columns[1].key).toBe('label');
-		expect(columns[2].key).toBe('avg');
-		expect(columns[3].key).toBe('sum');
-		expect(columns[4].key).toBe('max');
-		expect(columns[5].key).toBe('min');
-	});
-
-	it('includes Label column with title', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		const labelCol = columns.find((c) => c.key === 'label');
-		expect(labelCol?.title).toBe('Label');
-	});
-
-	it('formats column titles with yAxisUnit', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit: 'ms',
-		});
-
-		const avgCol = columns.find((c) => c.key === 'avg');
-		expect(avgCol?.title).toBe(
-			`Avg (in ${Y_AXIS_UNIT_NAMES[UniversalYAxisUnit.MILLISECONDS]})`,
-		);
-	});
-
-	it('numeric column render returns formatted string with yAxisUnit', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit: 'ms',
-		});
-
-		const avgCol = columns.find((c) => c.key === 'avg');
-		const renderFn = avgCol?.render as
-			| ((val: number, record: ExtendedChartDataset, index: number) => string)
-			| undefined;
-		expect(renderFn).toBeDefined();
-		const output = renderFn?.(123.45, tableDataSet[1], 1);
-		expect(output).toBe('123.45 ms');
-	});
-
-	it('numeric column render formats zero when value is undefined', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-			yAxisUnit: 'none',
-		});
-
-		const sumCol = columns.find((c) => c.key === 'sum');
-		const renderFn = sumCol?.render as
-			| ((
-					val: number | undefined,
-					record: ExtendedChartDataset,
-					index: number,
-			  ) => string)
-			| undefined;
-		const output = renderFn?.(undefined, tableDataSet[1], 1);
-		expect(output).toBe('0');
-	});
-
-	it('label column render displays label text and is clickable', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		const labelCol = columns.find((c) => c.key === 'label');
-		const renderFn = labelCol?.render as
-			| ((
-					label: string,
-					record: ExtendedChartDataset,
-					index: number,
-			  ) => JSX.Element)
-			| undefined;
-		expect(renderFn).toBeDefined();
-		const renderResult = renderFn!('Series 1', tableDataSet[1], 1);
-
-		const { getByRole } = render(renderResult);
-		expect(getByRole('button', { name: 'Series 1' })).toBeInTheDocument();
-	});
-
-	it('index column render renders checkbox with correct checked state', () => {
-		const columns = getChartManagerColumns({
-			tableDataSet,
-			graphVisibilityState,
-			onToggleSeriesOnOff,
-			onToggleSeriesVisibility,
-		});
-
-		const indexCol = columns.find((c) => c.key === 'index');
-		const renderFn = indexCol?.render as
-			| ((
-					_val: unknown,
-					record: ExtendedChartDataset,
-					index: number,
-			  ) => JSX.Element)
-			| undefined;
-		expect(renderFn).toBeDefined();
-		const { container } = render(renderFn!(null, tableDataSet[1], 1));
-
-		const checkbox = container.querySelector('input[type="checkbox"]');
-		expect(checkbox).toBeInTheDocument();
-		expect(checkbox).toBeChecked(); // graphVisibilityState[1] is true
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/__tests__/utils.test.ts

@@ -1,113 +0,0 @@
-import { PrecisionOptionsEnum } from 'components/Graph/types';
-
-import {
-	formatTableValueWithUnit,
-	getDefaultTableDataSet,
-	getTableColumnTitle,
-} from '../utils';
-
-describe('ChartManager utils', () => {
-	describe('getDefaultTableDataSet', () => {
-		const createOptions = (seriesCount: number): uPlot.Options => ({
-			series: Array.from({ length: seriesCount }, (_, i) =>
-				i === 0
-					? { label: 'Time', value: 'time' }
-					: { label: `Series ${i}`, scale: 'y' },
-			),
-			width: 100,
-			height: 100,
-		});
-
-		it('returns one row per series with computed stats', () => {
-			const options = createOptions(3);
-			const data: uPlot.AlignedData = [
-				[1000, 2000, 3000],
-				[10, 20, 30],
-				[1, 2, 3],
-			];
-
-			const result = getDefaultTableDataSet(options, data);
-
-			expect(result).toHaveLength(3);
-			expect(result[0]).toMatchObject({
-				index: 0,
-				label: 'Time',
-				show: true,
-			});
-			expect(result[1]).toMatchObject({
-				index: 1,
-				label: 'Series 1',
-				show: true,
-				sum: 60,
-				avg: 20,
-				max: 30,
-				min: 10,
-			});
-			expect(result[2]).toMatchObject({
-				index: 2,
-				label: 'Series 2',
-				show: true,
-				sum: 6,
-				avg: 2,
-				max: 3,
-				min: 1,
-			});
-		});
-
-		it('handles empty data arrays', () => {
-			const options = createOptions(2);
-			const data: uPlot.AlignedData = [[], []];
-
-			const result = getDefaultTableDataSet(options, data);
-
-			expect(result[0]).toMatchObject({
-				sum: 0,
-				avg: 0,
-				max: 0,
-				min: 0,
-			});
-		});
-
-		it('respects decimalPrecision parameter', () => {
-			const options = createOptions(2);
-			const data: uPlot.AlignedData = [[1000], [123.454]];
-
-			const resultTwo = getDefaultTableDataSet(
-				options,
-				data,
-				PrecisionOptionsEnum.TWO,
-			);
-			expect(resultTwo[1].avg).toBe(123.45);
-
-			const resultZero = getDefaultTableDataSet(
-				options,
-				data,
-				PrecisionOptionsEnum.ZERO,
-			);
-			expect(resultZero[1].avg).toBe(123);
-		});
-	});
-
-	describe('formatTableValueWithUnit', () => {
-		it('formats value with unit', () => {
-			const result = formatTableValueWithUnit(1234.56, 'ms');
-			expect(result).toBe('1.23 s');
-		});
-
-		it('falls back to none format when yAxisUnit is undefined', () => {
-			const result = formatTableValueWithUnit(123.45);
-			expect(result).toBe('123.45');
-		});
-	});
-
-	describe('getTableColumnTitle', () => {
-		it('returns title only when yAxisUnit is undefined', () => {
-			expect(getTableColumnTitle('Avg')).toBe('Avg');
-		});
-
-		it('returns title with unit when yAxisUnit is provided', () => {
-			const result = getTableColumnTitle('Avg', 'ms');
-			expect(result).toBe('Avg (in Milliseconds (ms))');
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/components/ChartManager/columns.tsx

@@ -1,94 +0,0 @@
-import { ColumnType } from 'antd/es/table';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import CustomCheckBox from 'container/GridCardLayout/GridCard/FullView/TableRender/CustomCheckBox';
-
-import { SeriesLabel } from './SeriesLabel';
-import {
-	ExtendedChartDataset,
-	formatTableValueWithUnit,
-	getTableColumnTitle,
-} from './utils';
-
-export interface GetChartManagerColumnsParams {
-	tableDataSet: ExtendedChartDataset[];
-	graphVisibilityState: boolean[];
-	onToggleSeriesOnOff: (index: number) => void;
-	onToggleSeriesVisibility: (index: number) => void;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	isGraphDisabled?: boolean;
-}
-
-export function getChartManagerColumns({
-	tableDataSet,
-	graphVisibilityState,
-	onToggleSeriesOnOff,
-	onToggleSeriesVisibility,
-	yAxisUnit,
-	decimalPrecision = PrecisionOptionsEnum.TWO,
-	isGraphDisabled,
-}: GetChartManagerColumnsParams): ColumnType<ExtendedChartDataset>[] {
-	return [
-		{
-			title: '',
-			width: 50,
-			dataIndex: 'index',
-			key: 'index',
-			render: (_: unknown, record: ExtendedChartDataset): JSX.Element => (
-				<CustomCheckBox
-					data={tableDataSet}
-					graphVisibilityState={graphVisibilityState}
-					index={record.index}
-					disabled={isGraphDisabled}
-					checkBoxOnChangeHandler={(_e, idx): void => onToggleSeriesOnOff(idx)}
-				/>
-			),
-		},
-		{
-			title: 'Label',
-			width: 300,
-			dataIndex: 'label',
-			key: 'label',
-			render: (label: string, record: ExtendedChartDataset): JSX.Element => (
-				<SeriesLabel
-					label={label ?? ''}
-					labelIndex={record.index}
-					disabled={isGraphDisabled}
-					onClick={onToggleSeriesVisibility}
-				/>
-			),
-		},
-		{
-			title: getTableColumnTitle('Avg', yAxisUnit),
-			width: 90,
-			dataIndex: 'avg',
-			key: 'avg',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-		{
-			title: getTableColumnTitle('Sum', yAxisUnit),
-			width: 90,
-			dataIndex: 'sum',
-			key: 'sum',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-		{
-			title: getTableColumnTitle('Max', yAxisUnit),
-			width: 90,
-			dataIndex: 'max',
-			key: 'max',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-		{
-			title: getTableColumnTitle('Min', yAxisUnit),
-			width: 90,
-			dataIndex: 'min',
-			key: 'min',
-			render: (val: number | undefined): string =>
-				formatTableValueWithUnit(val ?? 0, yAxisUnit, decimalPrecision),
-		},
-	];
-}

frontend/src/container/DashboardContainer/visualization/components/ChartManager/utils.ts

@@ -1,93 +0,0 @@
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { Y_AXIS_UNIT_NAMES } from 'components/YAxisUnitSelector/constants';
-import uPlot from 'uplot';
-
-/** Extended series with computed stats for table display */
-export type ExtendedChartDataset = uPlot.Series & {
-	show: boolean;
-	sum: number;
-	avg: number;
-	min: number;
-	max: number;
-	index: number;
-};
-
-function roundToDecimalPrecision(
-	value: number,
-	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
-): number {
-	if (
-		typeof value !== 'number' ||
-		Number.isNaN(value) ||
-		value === Infinity ||
-		value === -Infinity
-	) {
-		return 0;
-	}
-
-	if (decimalPrecision === PrecisionOptionsEnum.FULL) {
-		return value;
-	}
-
-	// regex to match the decimal precision for the given decimal precision
-	const regex = new RegExp(`^-?\\d*\\.?0*\\d{0,${decimalPrecision}}`);
-	const matched = value ? value.toFixed(decimalPrecision).match(regex) : null;
-	return matched ? parseFloat(matched[0]) : 0;
-}
-
-/** Build table dataset from uPlot options and aligned data */
-export function getDefaultTableDataSet(
-	options: uPlot.Options,
-	data: uPlot.AlignedData,
-	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
-): ExtendedChartDataset[] {
-	return options.series.map(
-		(series: uPlot.Series, index: number): ExtendedChartDataset => {
-			const arr = (data[index] as number[]) ?? [];
-			const sum = arr.reduce((a, b) => a + b, 0) || 0;
-			const count = arr.length || 1;
-
-			const hasValues = arr.length > 0;
-			return {
-				...series,
-				index,
-				show: true,
-				sum: roundToDecimalPrecision(sum, decimalPrecision),
-				avg: roundToDecimalPrecision(sum / count, decimalPrecision),
-				max: hasValues
-					? roundToDecimalPrecision(Math.max(...arr), decimalPrecision)
-					: 0,
-				min: hasValues
-					? roundToDecimalPrecision(Math.min(...arr), decimalPrecision)
-					: 0,
-			};
-		},
-	);
-}
-
-/** Format numeric value for table display using yAxisUnit */
-export function formatTableValueWithUnit(
-	value: number,
-	yAxisUnit?: string,
-	decimalPrecision: PrecisionOption = PrecisionOptionsEnum.TWO,
-): string {
-	return `${getYAxisFormattedValue(
-		String(value),
-		yAxisUnit ?? 'none',
-		decimalPrecision,
-	)}`;
-}
-
-/** Format column header with optional unit */
-export function getTableColumnTitle(title: string, yAxisUnit?: string): string {
-	if (!yAxisUnit) {
-		return title;
-	}
-	const universalName =
-		Y_AXIS_UNIT_NAMES[yAxisUnit as keyof typeof Y_AXIS_UNIT_NAMES];
-	if (!universalName) {
-		return `${title} (in ${yAxisUnit})`;
-	}
-	return `${title} (in ${universalName})`;
-}

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -96,7 +96,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 				config={config}
 				alignedData={chartData}
 				yAxisUnit={widget.yAxisUnit}
-				decimalPrecision={widget.decimalPrecision}
 				onCancel={onToggleModelHandler}
 			/>
 		);
@@ -106,7 +105,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		chartData,
 		widget.yAxisUnit,
 		onToggleModelHandler,
-		widget.decimalPrecision,
 	]);
 
 	const onPlotDestroy = useCallback(() => {

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -95,7 +95,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 				config={config}
 				alignedData={chartData}
 				yAxisUnit={widget.yAxisUnit}
-				decimalPrecision={widget.decimalPrecision}
 				onCancel={onToggleModelHandler}
 			/>
 		);
@@ -105,7 +104,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		chartData,
 		widget.yAxisUnit,
 		onToggleModelHandler,
-		widget.decimalPrecision,
 	]);
 
 	return (

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -1,325 +0,0 @@
-import { Widgets } from 'types/api/dashboard/getAll';
-import {
-	MetricRangePayloadProps,
-	MetricRangePayloadV3,
-} from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-
-import { PanelMode } from '../../types';
-import { prepareChartData, prepareUPlotConfig } from '../utils';
-
-jest.mock(
-	'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils',
-	() => ({
-		getStoredSeriesVisibility: jest.fn(),
-	}),
-);
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	__esModule: true,
-	default: jest.fn().mockReturnValue({ name: 'onClickPlugin' }),
-}));
-
-jest.mock('lib/dashboard/getQueryResults', () => ({
-	getLegend: jest.fn(
-		(_queryData: unknown, _query: unknown, labelName: string) =>
-			`legend-${labelName}`,
-	),
-}));
-
-jest.mock('lib/getLabelName', () => ({
-	__esModule: true,
-	default: jest.fn(
-		(_metric: unknown, _queryName: string, _legend: string) => 'baseLabel',
-	),
-}));
-
-const getLegendMock = jest.requireMock('lib/dashboard/getQueryResults')
-	.getLegend as jest.Mock;
-const getLabelNameMock = jest.requireMock('lib/getLabelName')
-	.default as jest.Mock;
-
-const createApiResponse = (
-	result: MetricRangePayloadProps['data']['result'] = [],
-): MetricRangePayloadProps => ({
-	data: {
-		result,
-		resultType: 'matrix',
-		newResult: (null as unknown) as MetricRangePayloadV3,
-	},
-});
-
-const createWidget = (overrides: Partial<Widgets> = {}): Widgets =>
-	({
-		id: 'widget-1',
-		yAxisUnit: 'ms',
-		isLogScale: false,
-		thresholds: [],
-		customLegendColors: {},
-		...overrides,
-	} as Widgets);
-
-const defaultTimezone = {
-	name: 'UTC',
-	value: 'UTC',
-	offset: 'UTC',
-	searchIndex: 'UTC',
-};
-
-describe('TimeSeriesPanel utils', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		getLabelNameMock.mockReturnValue('baseLabel');
-		getLegendMock.mockImplementation(
-			(_queryData: unknown, _query: unknown, labelName: string) =>
-				`legend-${labelName}`,
-		);
-	});
-
-	describe('prepareChartData', () => {
-		it('returns aligned data with timestamps and empty series when result is empty', () => {
-			const apiResponse = createApiResponse([]);
-
-			const data = prepareChartData(apiResponse);
-
-			expect(data).toHaveLength(1);
-			expect(data[0]).toEqual([]);
-		});
-
-		it('returns timestamps and one series of y values for single series', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					legend: 'Series A',
-					values: [
-						[1000, '10'],
-						[2000, '20'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const data = prepareChartData(apiResponse);
-
-			expect(data).toHaveLength(2);
-			expect(data[0]).toEqual([1000, 2000]);
-			expect(data[1]).toEqual([10, 20]);
-		});
-
-		it('merges timestamps and fills missing values with null for multiple series', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [
-						[1000, '1'],
-						[3000, '3'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [
-						[1000, '10'],
-						[2000, '20'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const data = prepareChartData(apiResponse);
-
-			expect(data[0]).toEqual([1000, 2000, 3000]);
-			// First series: 1, null, 3
-			expect(data[1]).toEqual([1, null, 3]);
-			// Second series: 10, 20, null
-			expect(data[2]).toEqual([10, 20, null]);
-		});
-	});
-
-	describe('prepareUPlotConfig', () => {
-		const baseParams = {
-			widget: createWidget(),
-			isDarkMode: true,
-			currentQuery: {} as Query,
-			onClick: jest.fn(),
-			onDragSelect: jest.fn(),
-			apiResponse: createApiResponse(),
-			timezone: defaultTimezone,
-			panelMode: PanelMode.DASHBOARD_VIEW,
-		};
-
-		it('adds no series when apiResponse has empty result', () => {
-			const builder = prepareUPlotConfig(baseParams);
-
-			const config = builder.getConfig();
-			// Base series (timestamp) only
-			expect(config.series).toHaveLength(1);
-		});
-
-		it('adds one series per result item with label from getLabelName when no currentQuery', () => {
-			getLegendMock.mockReset();
-			const apiResponse = createApiResponse([
-				{
-					metric: { __name__: 'cpu' },
-					queryName: 'Q1',
-					legend: 'CPU',
-					values: [
-						[1000, '1'],
-						[2000, '2'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: (null as unknown) as Query,
-			});
-
-			expect(getLabelNameMock).toHaveBeenCalled();
-			expect(getLegendMock).not.toHaveBeenCalled();
-
-			const config = builder.getConfig();
-			expect(config.series).toHaveLength(2);
-			expect(config.series?.[1]).toMatchObject({
-				label: 'baseLabel',
-				scale: 'y',
-			});
-		});
-
-		it('uses getLegend for label when currentQuery is provided', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					legend: 'L1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: {} as Query,
-			});
-
-			expect(getLegendMock).toHaveBeenCalledWith(
-				{
-					legend: 'L1',
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				},
-				{},
-				'baseLabel',
-			);
-
-			const config = prepareUPlotConfig({
-				...baseParams,
-				apiResponse,
-				currentQuery: {} as Query,
-			}).getConfig();
-			expect(config.series?.[1]).toMatchObject({
-				label: 'legend-baseLabel',
-			});
-		});
-
-		it('uses DrawStyle.Line and VisibilityMode.Never when series has multiple valid points', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [
-						[1000, '1'],
-						[2000, '2'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({ ...baseParams, apiResponse });
-			const config = builder.getConfig();
-			const series = config.series?.[1];
-
-			expect(config.series).toHaveLength(2);
-			// Line style and points never for multi-point series (checked via builder API)
-			const legendItems = builder.getLegendItems();
-			expect(Object.keys(legendItems)).toHaveLength(1);
-			// multi-point series → points hidden
-			expect(series).toBeDefined();
-			expect(series!.points?.show).toBe(false);
-		});
-
-		it('uses DrawStyle.Points and shows points when series has only one valid point', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [
-						[1000, '1'],
-						[2000, 'NaN'],
-						[3000, 'invalid'],
-					],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({ ...baseParams, apiResponse });
-			const config = builder.getConfig();
-
-			expect(config.series).toHaveLength(2);
-			const seriesConfig = config.series?.[1];
-			expect(seriesConfig).toBeDefined();
-			// Single valid point -> Points draw style (asserted via series config)
-			expect(seriesConfig).toMatchObject({
-				scale: 'y',
-				spanGaps: true,
-			});
-			// single-point series → points shown
-			expect(seriesConfig).toBeDefined();
-			expect(seriesConfig!.points?.show).toBe(true);
-		});
-
-		it('uses widget customLegendColors to set series stroke color', () => {
-			const widget = createWidget({
-				customLegendColors: { 'legend-baseLabel': '#ff0000' },
-			});
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({
-				...baseParams,
-				widget,
-				apiResponse,
-			});
-
-			const config = builder.getConfig();
-			const seriesConfig = config.series?.[1];
-			expect(seriesConfig).toBeDefined();
-			expect(seriesConfig!.stroke).toBe('#ff0000');
-		});
-
-		it('adds multiple series when result has multiple items', () => {
-			const apiResponse = createApiResponse([
-				{
-					metric: {},
-					queryName: 'Q1',
-					values: [[1000, '1']],
-				} as MetricRangePayloadProps['data']['result'][0],
-				{
-					metric: {},
-					queryName: 'Q2',
-					values: [[1000, '2']],
-				} as MetricRangePayloadProps['data']['result'][0],
-			]);
-
-			const builder = prepareUPlotConfig({ ...baseParams, apiResponse });
-			const config = builder.getConfig();
-
-			expect(config.series).toHaveLength(3);
-		});
-	});
-});

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -15,12 +15,10 @@ import {
 	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
 import get from 'lodash-es/get';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { QueryData } from 'types/api/widgets/getQuery';
 
 import { PanelMode } from '../types';
 import { buildBaseConfig } from '../utils/baseConfigBuilder';
@@ -35,22 +33,6 @@ export const prepareChartData = (
 	return [timestampArr, ...yAxisValuesArr];
 };
 
-function hasSingleVisiblePointForSeries(series: QueryData): boolean {
-	const rawValues = series.values ?? [];
-	let validPointCount = 0;
-
-	for (const [, rawValue] of rawValues) {
-		if (!isInvalidPlotValue(rawValue)) {
-			validPointCount += 1;
-			if (validPointCount > 1) {
-				return false;
-			}
-		}
-	}
-
-	return true;
-}
-
 export const prepareUPlotConfig = ({
 	widget,
 	isDarkMode,
@@ -95,8 +77,9 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});
 
-	apiResponse.data?.result?.forEach((series) => {
-		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
+	const seriesList = apiResponse.data?.result || [];
+
+	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query
@@ -109,15 +92,13 @@ export const prepareUPlotConfig = ({
 
 		builder.addSeries({
 			scaleKey: 'y',
-			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
+			drawStyle: DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
-			showPoints: hasSingleValidPoint
-				? VisibilityMode.Always
-				: VisibilityMode.Never,
+			showPoints: VisibilityMode.Never,
 			pointSize: 5,
 			isDarkMode,
 			panelType: PANEL_TYPES.TIME_SERIES,

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -2,10 +2,10 @@
 import { useEffect, useState } from 'react';
 import { Button, Skeleton, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetHosts } from 'api/generated/services/zeus';
 import ROUTES from 'constants/routes';
+import { useGetDeploymentsData } from 'hooks/CustomDomain/useGetDeploymentsData';
 import history from 'lib/history';
-import { Link2 } from 'lucide-react';
+import { Globe, Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
@@ -26,21 +26,36 @@ function DataSourceInfo({
 	const isEnabled =
 		activeLicense && activeLicense.platform === LicensePlatform.CLOUD;
 
-	const { data: hostsData, isError } = useGetHosts({
-		query: { enabled: isEnabled || false },
-	});
+	const {
+		data: deploymentsData,
+		isError: isErrorDeploymentsData,
+	} = useGetDeploymentsData(isEnabled || false);
 
+	const [region, setRegion] = useState<string>('');
 	const [url, setUrl] = useState<string>('');
 
 	useEffect(() => {
-		if (hostsData) {
-			const defaultHost = hostsData?.data?.data?.hosts?.find((h) => h.is_default);
-			if (defaultHost?.url) {
-				const url = defaultHost?.url?.split('://')[1] ?? '';
-				setUrl(url);
+		if (deploymentsData) {
+			switch (deploymentsData?.data.data.cluster.region.name) {
+				case 'in':
+					setRegion('India');
+					break;
+				case 'us':
+					setRegion('United States');
+					break;
+				case 'eu':
+					setRegion('Europe');
+					break;
+				default:
+					setRegion(deploymentsData?.data.data.cluster.region.name);
+					break;
 			}
+
+			setUrl(
+				`${deploymentsData?.data.data.name}.${deploymentsData?.data.data.cluster.region.dns}`,
+			);
 		}
-	}, [hostsData]);
+	}, [deploymentsData]);
 
 	const renderNotSendingData = (): JSX.Element => (
 		<>
@@ -108,8 +123,14 @@ function DataSourceInfo({
 							</Button>
 						</div>
 
-						{!isError && hostsData && (
+						{!isErrorDeploymentsData && deploymentsData && (
 							<div className="workspace-details">
+								<div className="workspace-region">
+									<Globe size={10} />
+
+									<Typography>{region}</Typography>
+								</div>
+
 								<div className="workspace-url">
 									<Link2 size={12} />
 
@@ -135,11 +156,17 @@ function DataSourceInfo({
 				Hello there, Welcome to your SigNoz workspace
 			</Typography>
 
-			{!isError && hostsData && (
+			{!isErrorDeploymentsData && deploymentsData && (
 				<Card className="welcome-card">
 					<Card.Content>
 						<div className="workspace-ready-container">
 							<div className="workspace-details">
+								<div className="workspace-region">
+									<Globe size={10} />
+
+									<Typography>{region}</Typography>
+								</div>
+
 								<div className="workspace-url">
 									<Link2 size={12} />
 

frontend/src/container/Home/DataSourceInfo/__tests__/DataSourceInfo.test.tsx

@@ -1,69 +0,0 @@
-import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
-import { rest, server } from 'mocks-server/server';
-import { render, screen } from 'tests/test-utils';
-
-import DataSourceInfo from '../DataSourceInfo';
-
-const ZEUS_HOSTS_ENDPOINT = '*/api/v2/zeus/hosts';
-
-const mockHostsResponse: GetHosts200 = {
-	status: 'success',
-	data: {
-		name: 'accepted-starfish',
-		state: 'HEALTHY',
-		tier: 'PREMIUM',
-		hosts: [
-			{
-				name: 'accepted-starfish',
-				is_default: true,
-				url: 'https://accepted-starfish.test.cloud',
-			},
-			{
-				name: 'custom-host',
-				is_default: false,
-				url: 'https://custom-host.test.cloud',
-			},
-		],
-	},
-};
-
-describe('DataSourceInfo', () => {
-	afterEach(() => server.resetHandlers());
-
-	it('renders the default workspace URL with protocol stripped', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		render(<DataSourceInfo dataSentToSigNoz={false} isLoading={false} />);
-
-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
-	});
-
-	it('does not render workspace URL when GET /zeus/hosts fails', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(500), ctx.json({})),
-			),
-		);
-
-		render(<DataSourceInfo dataSentToSigNoz={false} isLoading={false} />);
-
-		await screen.findByText(/Your workspace is ready/i);
-		expect(screen.queryByText(/signoz\.cloud/i)).not.toBeInTheDocument();
-	});
-
-	it('renders workspace URL in the data-received view when telemetry is flowing', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		render(<DataSourceInfo dataSentToSigNoz={true} isLoading={false} />);
-
-		await screen.findByText(/accepted-starfish\.test\.cloud/i);
-	});
-});

frontend/src/container/IngestionSettings/__tests__/MultiIngestionSettings.test.tsx

@@ -36,6 +36,24 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
+// Mock deployments data hook to avoid unrelated network calls in this page
+jest.mock(
+	'hooks/CustomDomain/useGetDeploymentsData',
+	(): Record<string, unknown> => ({
+		useGetDeploymentsData: (): {
+			data: undefined;
+			isLoading: boolean;
+			isFetching: boolean;
+			isError: boolean;
+		} => ({
+			data: undefined,
+			isLoading: false,
+			isFetching: false,
+			isError: false,
+		}),
+	}),
+);
+
 const TEST_CREATED_UPDATED = '2024-01-01T00:00:00Z';
 const TEST_EXPIRES_AT = '2030-01-01T00:00:00Z';
 const TEST_WORKSPACE_ID = 'w1';

frontend/src/container/MetricsExplorer/Explorer/RelatedMetricsCard.tsx

@@ -39,10 +39,7 @@ function RelatedMetricsCard({ metric }: RelatedMetricsCardProps): JSX.Element {
 					dataSource={DataSource.METRICS}
 				/>
 			)}
-			<DashboardsAndAlertsPopover
-				dashboards={metric.dashboards}
-				alerts={metric.alerts}
-			/>
+			<DashboardsAndAlertsPopover metricName={metric.name} />
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/Inspect/utils.tsx

@@ -2,8 +2,8 @@
 import { useMemo, useState } from 'react';
 import { Card, Input, Select, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { InspectMetricsSeries } from 'api/metricsExplorer/getInspectMetricsDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
 import classNames from 'classnames';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { AggregatorFilter } from 'container/QueryBuilder/filters';
@@ -40,8 +40,10 @@ import {
  * returns true if the feature flag is enabled, false otherwise
  * Show the inspect button in  metrics explorer if the feature flag is enabled
  */
-export function isInspectEnabled(metricType: MetricType | undefined): boolean {
-	return metricType === MetricType.GAUGE;
+export function isInspectEnabled(
+	metricType: MetrictypesTypeDTO | undefined,
+): boolean {
+	return metricType === MetrictypesTypeDTO.gauge;
 }
 
 export function getAllTimestampsOfMetrics(

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -1,8 +1,17 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Button, Collapse, Input, Menu, Popover, Typography } from 'antd';
+import {
+	Button,
+	Collapse,
+	Input,
+	Menu,
+	Popover,
+	Skeleton,
+	Typography,
+} from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
+import { useGetMetricAttributes } from 'api/generated/services/metrics';
 import { ResizeTable } from 'components/ResizeTable';
 import { DataType } from 'container/LogDetailedView/TableView';
 import { useNotifications } from 'hooks/useNotifications';
@@ -15,6 +24,8 @@ import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { AllAttributesProps, AllAttributesValueProps } from './types';
 import { getMetricDetailsQuery } from './utils';
 
+const ALL_ATTRIBUTES_KEY = 'all-attributes';
+
 export function AllAttributesValue({
 	filterKey,
 	filterValue,
@@ -110,12 +121,22 @@ export function AllAttributesValue({
 
 function AllAttributes({
 	metricName,
-	attributes,
 	metricType,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
-	const [activeKey, setActiveKey] = useState<string | string[]>(
-		'all-attributes',
+	const [activeKey, setActiveKey] = useState<string[]>([ALL_ATTRIBUTES_KEY]);
+
+	const {
+		data: attributesData,
+		isLoading: isLoadingAttributes,
+		isError: isErrorAttributes,
+	} = useGetMetricAttributes({
+		metricName,
+	});
+
+	const attributes = useMemo(
+		() => attributesData?.data?.data?.attributes ?? [],
+		[attributesData],
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
@@ -178,7 +199,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.value.some((value) =>
+					attribute.values?.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),
@@ -195,7 +216,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.value,
+							value: attribute.values,
 						},
 				  }))
 				: [],
@@ -252,6 +273,10 @@ function AllAttributes({
 		],
 	);
 
+	const emptyText = isErrorAttributes
+		? 'Error fetching attributes'
+		: 'No attributes found';
+
 	const items = useMemo(
 		() => [
 			{
@@ -270,6 +295,7 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
+							disabled={isLoadingAttributes}
 						/>
 					</div>
 				),
@@ -277,25 +303,37 @@ function AllAttributes({
 				children: (
 					<ResizeTable
 						columns={columns}
+						loading={isLoadingAttributes}
 						tableLayout="fixed"
 						dataSource={tableData}
 						pagination={false}
 						showHeader={false}
 						className="metrics-accordion-content all-attributes-content"
 						scroll={{ y: 600 }}
+						locale={{
+							emptyText,
+						}}
 					/>
 				),
 			},
 		],
-		[columns, tableData, searchString],
+		[searchString, columns, isLoadingAttributes, tableData, emptyText],
 	);
 
+	if (isLoadingAttributes) {
+		return (
+			<div className="all-attributes-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered
-			className="metrics-accordion metrics-metadata-accordion"
+			className="metrics-accordion"
 			activeKey={activeKey}
-			onChange={(keys): void => setActiveKey(keys)}
+			onChange={(keys): void => setActiveKey(keys as string[])}
 			items={items}
 		/>
 	);

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -2,36 +2,84 @@ import { useMemo } from 'react';
 import { generatePath } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Dropdown, Typography } from 'antd';
+import { Skeleton } from 'antd/lib';
+import {
+	useGetMetricAlerts,
+	useGetMetricDashboards,
+} from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Bell, Grid } from 'lucide-react';
+import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
 
 function DashboardsAndAlertsPopover({
-	alerts,
-	dashboards,
+	metricName,
 }: DashboardsAndAlertsPopoverProps): JSX.Element | null {
 	const { safeNavigate } = useSafeNavigate();
 	const params = useUrlQuery();
 
+	const {
+		data: alertsData,
+		isLoading: isLoadingAlerts,
+		isError: isErrorAlerts,
+	} = useGetMetricAlerts(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const {
+		data: dashboardsData,
+		isLoading: isLoadingDashboards,
+		isError: isErrorDashboards,
+	} = useGetMetricDashboards(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const alerts = useMemo(() => {
+		return alertsData?.data?.data?.alerts ?? [];
+	}, [alertsData]);
+
+	const dashboards = useMemo(() => {
+		const currentDashboards = dashboardsData?.data?.data?.dashboards ?? [];
+		// Remove duplicate dashboards
+		return currentDashboards.filter(
+			(dashboard, index, self) =>
+				index === self.findIndex((t) => t.dashboardId === dashboard.dashboardId),
+		);
+	}, [dashboardsData]);
+
 	const alertsPopoverContent = useMemo(() => {
 		if (alerts && alerts.length > 0) {
 			return alerts.map((alert) => ({
-				key: alert.alert_id,
+				key: alert.alertId,
 				label: (
 					<Typography.Link
-						key={alert.alert_id}
+						key={alert.alertId}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alert_id);
+							params.set(QueryParams.ruleId, alert.alertId);
 							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{alert.alert_name || alert.alert_id}
+						{alert.alertName || alert.alertId}
 					</Typography.Link>
 				),
 			}));
@@ -39,41 +87,44 @@ function DashboardsAndAlertsPopover({
 		return null;
 	}, [alerts, params]);
 
-	const uniqueDashboards = useMemo(
-		() =>
-			dashboards?.filter(
-				(item, index, self) =>
-					index === self.findIndex((t) => t.dashboard_id === item.dashboard_id),
-			),
-		[dashboards],
-	);
-
 	const dashboardsPopoverContent = useMemo(() => {
-		if (uniqueDashboards && uniqueDashboards.length > 0) {
-			return uniqueDashboards.map((dashboard) => ({
-				key: dashboard.dashboard_id,
+		if (dashboards && dashboards.length > 0) {
+			return dashboards.map((dashboard) => ({
+				key: dashboard.dashboardId,
 				label: (
 					<Typography.Link
-						key={dashboard.dashboard_id}
+						key={dashboard.dashboardId}
 						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboard_id,
+									dashboardId: dashboard.dashboardId,
 								}),
 							);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{dashboard.dashboard_name || dashboard.dashboard_id}
+						{dashboard.dashboardName || dashboard.dashboardId}
 					</Typography.Link>
 				),
 			}));
 		}
 		return null;
-	}, [uniqueDashboards, safeNavigate]);
+	}, [dashboards, safeNavigate]);
 
-	if (!dashboardsPopoverContent && !alertsPopoverContent) {
-		return null;
+	if (isLoadingAlerts || isLoadingDashboards) {
+		return (
+			<div className="dashboards-and-alerts-popover-container">
+				<Skeleton title={false} paragraph={{ rows: 1 }} active />
+			</div>
+		);
+	}
+
+	// If there are no dashboards or alerts or both have errors, don't show the popover
+	const hidePopover =
+		(!dashboardsPopoverContent && !alertsPopoverContent) ||
+		(isErrorAlerts && isErrorDashboards);
+	if (hidePopover) {
+		return <div className="dashboards-and-alerts-popover-container" />;
 	}
 
 	return (
@@ -92,8 +143,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{uniqueDashboards?.length} dashboard
-							{uniqueDashboards?.length === 1 ? '' : 's'}
+							{pluralize(dashboards.length, 'dashboard')}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -112,7 +162,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{alerts?.length} alert {alerts?.length === 1 ? 'rule' : 'rules'}
+							{pluralize(alerts.length, 'alert rule')}
 						</Typography.Text>
 					</div>
 				</Dropdown>

frontend/src/container/MetricsExplorer/MetricDetails/Highlights.tsx

@@ -0,0 +1,129 @@
+import { useMemo } from 'react';
+import { Skeleton, Tooltip, Typography } from 'antd';
+import { useGetMetricHighlights } from 'api/generated/services/metrics';
+
+import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
+import { HighlightsProps } from './types';
+import {
+	formatNumberToCompactFormat,
+	formatTimestampToReadableDate,
+} from './utils';
+
+function Highlights({ metricName }: HighlightsProps): JSX.Element {
+	const {
+		data: metricHighlightsData,
+		isLoading: isLoadingMetricHighlights,
+		isError: isErrorMetricHighlights,
+	} = useGetMetricHighlights(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
+	);
+
+	const metricHighlights = useMemo(() => {
+		return metricHighlightsData?.data?.data ?? null;
+	}, [metricHighlightsData]);
+
+	const dataPoints = useMemo(() => {
+		if (!metricHighlights) {
+			return null;
+		}
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip title={metricHighlights?.dataPoints?.toLocaleString()}>
+					{formatNumberIntoHumanReadableFormat(metricHighlights?.dataPoints ?? 0)}
+				</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	const timeSeries = useMemo(() => {
+		if (!metricHighlights) {
+			return null;
+		}
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+
+		const timeSeriesActive = formatNumberToCompactFormat(
+			metricHighlights.activeTimeSeries,
+		);
+		const timeSeriesTotal = formatNumberToCompactFormat(
+			metricHighlights.totalTimeSeries,
+		);
+
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip
+					title="Active time series are those that have received data points in the last 1
+					hour."
+					placement="top"
+				>
+					<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
+				</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	const lastReceived = useMemo(() => {
+		if (!metricHighlights) {
+			return null;
+		}
+		if (isErrorMetricHighlights) {
+			return (
+				<Typography.Text className="metric-details-grid-value">-</Typography.Text>
+			);
+		}
+		const displayText = formatTimestampToReadableDate(
+			metricHighlights.lastReceived,
+		);
+		return (
+			<Typography.Text className="metric-details-grid-value">
+				<Tooltip title={displayText}>{displayText}</Tooltip>
+			</Typography.Text>
+		);
+	}, [metricHighlights, isErrorMetricHighlights]);
+
+	if (isLoadingMetricHighlights) {
+		return (
+			<div className="metric-details-content-grid">
+				<Skeleton title={false} paragraph={{ rows: 2 }} active />
+			</div>
+		);
+	}
+
+	return (
+		<div className="metric-details-content-grid">
+			<div className="labels-row">
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					SAMPLES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					TIME SERIES
+				</Typography.Text>
+				<Typography.Text type="secondary" className="metric-details-grid-label">
+					LAST RECEIVED
+				</Typography.Text>
+			</div>
+			<div className="values-row">
+				{dataPoints}
+				{timeSeries}
+				{lastReceived}
+			</div>
+		</div>
+	);
+}
+
+export default Highlights;

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,45 +1,55 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
-import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { UpdateMetricMetadataProps } from 'api/metricsExplorer/updateMetricMetadata';
+import {
+	invalidateGetMetricMetadata,
+	useUpdateMetricMetadata,
+} from 'api/generated/services/metrics';
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { ResizeTable } from 'components/ResizeTable';
 import YAxisUnitSelector from 'components/YAxisUnitSelector';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import FieldRenderer from 'container/LogDetailedView/FieldRenderer';
 import { DataType } from 'container/LogDetailedView/TableView';
-import { useUpdateMetricMetadata } from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import { useNotifications } from 'hooks/useNotifications';
 import { Edit2, Save, X } from 'lucide-react';
 
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
+import { MetricTypeViewRenderer } from '../Summary/utils';
 import {
-	METRIC_TYPE_LABEL_MAP,
-	METRIC_TYPE_VALUES_MAP,
-} from '../Summary/constants';
-import { MetricTypeRenderer } from '../Summary/utils';
-import { METRIC_METADATA_KEYS } from './constants';
-import { MetadataProps } from './types';
-import { determineIsMonotonic } from './utils';
+	METRIC_METADATA_KEYS,
+	METRIC_METADATA_TEMPORALITY_OPTIONS,
+	METRIC_METADATA_TYPE_OPTIONS,
+	METRIC_METADATA_UPDATE_ERROR_MESSAGE,
+} from './constants';
+import { MetadataProps, MetricMetadataState, TableFields } from './types';
+import { transformUpdateMetricMetadataRequest } from './utils';
 
 function Metadata({
 	metricName,
 	metadata,
-	refetchMetricDetails,
+	isErrorMetricMetadata,
+	isLoadingMetricMetadata,
 }: MetadataProps): JSX.Element {
 	const [isEditing, setIsEditing] = useState(false);
+
 	const [
-		metricMetadata,
-		setMetricMetadata,
-	] = useState<UpdateMetricMetadataProps>({
-		metricType: metadata?.metric_type || MetricType.SUM,
-		description: metadata?.description || '',
-		temporality: metadata?.temporality,
-		unit: metadata?.unit,
+		metricMetadataState,
+		setMetricMetadataState,
+	] = useState<MetricMetadataState>({
+		type: MetrictypesTypeDTO.sum,
+		description: '',
+		temporality: MetrictypesTemporalityDTO.unspecified,
+		unit: '',
 	});
 	const { notifications } = useNotifications();
 	const {
@@ -51,15 +61,24 @@ function Metadata({
 	);
 	const queryClient = useQueryClient();
 
+	// Initialize state from metadata api data
+	useEffect(() => {
+		if (metadata) {
+			setMetricMetadataState({
+				type: metadata.type,
+				description: metadata.description,
+				temporality: metadata.temporality,
+				unit: metadata.unit,
+			});
+		}
+	}, [metadata]);
+
 	const tableData = useMemo(
 		() =>
 			metadata
-				? Object.keys({
-						...metadata,
-						temporality: metadata?.temporality,
-				  })
+				? Object.keys(metadata)
 						// Filter out monotonic as user input is not required
-						.filter((key) => key !== 'monotonic')
+						.filter((key) => key !== TableFields.IS_MONOTONIC)
 						.map((key) => ({
 							key,
 							value: {
@@ -72,89 +91,96 @@ function Metadata({
 	);
 
 	// Render un-editable field value
-	const renderUneditableField = useCallback((key: string, value: string) => {
-		if (key === 'metric_type') {
-			return <MetricTypeRenderer type={value as MetricType} />;
-		}
-		let fieldValue = value;
-		if (key === 'unit') {
-			fieldValue = getUniversalNameFromMetricUnit(value);
-		}
-		return <FieldRenderer field={fieldValue || '-'} />;
-	}, []);
+	const renderUneditableField = useCallback(
+		(key: keyof MetricMetadataState, value: string) => {
+			if (isErrorMetricMetadata) {
+				return <FieldRenderer field="-" />;
+			}
+			if (key === TableFields.TYPE) {
+				return <MetricTypeViewRenderer type={value as MetrictypesTypeDTO} />;
+			}
+			if (key === TableFields.Temporality) {
+				const temporality = METRIC_METADATA_TEMPORALITY_OPTIONS.find(
+					(option) => option.value === value,
+				);
+				return <FieldRenderer field={temporality?.label || '-'} />;
+			}
+			let fieldValue = value;
+			if (key === TableFields.UNIT) {
+				fieldValue = getUniversalNameFromMetricUnit(value);
+			}
+			return <FieldRenderer field={fieldValue || '-'} />;
+		},
+		[isErrorMetricMetadata],
+	);
 
 	const renderColumnValue = useCallback(
-		(field: { value: string; key: string }): JSX.Element => {
+		(field: { value: string; key: keyof MetricMetadataState }): JSX.Element => {
 			if (!isEditing) {
 				return renderUneditableField(field.key, field.value);
 			}
 
 			// Don't allow editing of unit if it's already set
-			const metricUnitAlreadySet = field.key === 'unit' && Boolean(metadata?.unit);
+			const metricUnitAlreadySet =
+				field.key === TableFields.UNIT && Boolean(metadata?.unit);
 			if (metricUnitAlreadySet) {
 				return renderUneditableField(field.key, field.value);
 			}
 
-			if (field.key === 'metric_type') {
+			if (field.key === TableFields.TYPE) {
 				return (
 					<Select
 						data-testid="metric-type-select"
-						options={Object.entries(METRIC_TYPE_VALUES_MAP).map(([key]) => ({
-							value: key,
-							label: METRIC_TYPE_LABEL_MAP[key as MetricType],
-						}))}
-						value={metricMetadata.metricType}
+						options={METRIC_METADATA_TYPE_OPTIONS}
+						value={metricMetadataState.type}
 						onChange={(value): void => {
-							setMetricMetadata((prev) => ({
+							setMetricMetadataState((prev) => ({
 								...prev,
-								metricType: value as MetricType,
+								type: value,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === 'unit') {
+			if (field.key === TableFields.UNIT) {
 				return (
 					<YAxisUnitSelector
-						value={metricMetadata.unit}
+						value={metricMetadataState.unit}
 						onChange={(value): void => {
-							setMetricMetadata((prev) => ({ ...prev, unit: value }));
+							setMetricMetadataState((prev) => ({ ...prev, unit: value }));
 						}}
 						data-testid="unit-select"
 						source={YAxisSource.EXPLORER}
 					/>
 				);
 			}
-			if (field.key === 'temporality') {
+			if (field.key === TableFields.Temporality) {
+				const temporalityValue =
+					metricMetadataState.temporality === MetrictypesTemporalityDTO.unspecified
+						? undefined
+						: metricMetadataState.temporality;
 				return (
 					<Select
 						data-testid="temporality-select"
-						options={Object.values(Temporality).map((key) => ({
-							value: key,
-							label: key,
-						}))}
-						value={metricMetadata.temporality}
+						options={METRIC_METADATA_TEMPORALITY_OPTIONS}
+						value={temporalityValue}
 						onChange={(value): void => {
-							setMetricMetadata((prev) => ({
+							setMetricMetadataState((prev) => ({
 								...prev,
-								temporality: value as Temporality,
+								temporality: value,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === 'description') {
+			if (field.key === TableFields.DESCRIPTION) {
 				return (
 					<Input
 						data-testid="description-input"
 						name={field.key}
-						defaultValue={
-							metricMetadata[
-								field.key as Exclude<keyof UpdateMetricMetadataProps, 'isMonotonic'>
-							]
-						}
+						defaultValue={metricMetadataState.description}
 						onChange={(e): void => {
-							setMetricMetadata((prev) => ({
+							setMetricMetadataState((prev) => ({
 								...prev,
 								[field.key]: e.target.value,
 							}));
@@ -164,7 +190,7 @@ function Metadata({
 			}
 			return <FieldRenderer field="-" />;
 		},
-		[isEditing, metadata?.unit, metricMetadata, renderUneditableField],
+		[isEditing, metadata?.unit, metricMetadataState, renderUneditableField],
 	);
 
 	const columns: ColumnsType<DataType> = useMemo(
@@ -201,18 +227,14 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				metricName,
-				payload: {
-					...metricMetadata,
-					isMonotonic: determineIsMonotonic(
-						metricMetadata.metricType,
-						metricMetadata.temporality,
-					),
+				pathParams: {
+					metricName: metricName ?? '',
 				},
+				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{
 				onSuccess: (response): void => {
-					if (response?.statusCode === 200) {
+					if (response.status === 200) {
 						logEvent(MetricsExplorerEvents.MetricMetadataUpdated, {
 							[MetricsExplorerEventKeys.MetricName]: metricName,
 							[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -221,32 +243,52 @@ function Metadata({
 						notifications.success({
 							message: 'Metadata updated successfully',
 						});
-						refetchMetricDetails();
 						setIsEditing(false);
-						queryClient.invalidateQueries(['metricsList']);
+						// TODO(@amlannandy): To update this to use invalidateGetMetricList
+						// once we have switched to the V2 API in summary page
+						queryClient.invalidateQueries([REACT_QUERY_KEY.GET_METRICS_LIST]);
+						invalidateGetMetricMetadata(queryClient, {
+							metricName,
+						});
 					} else {
 						notifications.error({
-							message:
-								'Failed to update metadata, please try again. If the issue persists, please contact support.',
+							message: METRIC_METADATA_UPDATE_ERROR_MESSAGE,
 						});
 					}
 				},
-				onError: (): void =>
+				onError: (error): void => {
+					const errorMessage = (error as AxiosError<RenderErrorResponseDTO>).response
+						?.data.error?.message;
 					notifications.error({
-						message:
-							'Failed to update metadata, please try again. If the issue persists, please contact support.',
-					}),
+						message: errorMessage || METRIC_METADATA_UPDATE_ERROR_MESSAGE,
+					});
+				},
 			},
 		);
 	}, [
 		updateMetricMetadata,
 		metricName,
-		metricMetadata,
+		metricMetadataState,
 		notifications,
-		refetchMetricDetails,
 		queryClient,
 	]);
 
+	const cancelEdit = useCallback(
+		(e: React.MouseEvent<HTMLElement, MouseEvent>): void => {
+			e.stopPropagation();
+			if (metadata) {
+				setMetricMetadataState({
+					type: metadata.type,
+					description: metadata.description,
+					unit: metadata.unit,
+					temporality: metadata.temporality,
+				});
+			}
+			setIsEditing(false);
+		},
+		[metadata],
+	);
+
 	const actionButton = useMemo(() => {
 		if (isEditing) {
 			return (
@@ -254,10 +296,7 @@ function Metadata({
 					<Button
 						className="action-button"
 						type="text"
-						onClick={(e): void => {
-							e.stopPropagation();
-							setIsEditing(false);
-						}}
+						onClick={cancelEdit}
 						disabled={isUpdatingMetricsMetadata}
 					>
 						<X size={14} />
@@ -294,7 +333,7 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
+	}, [isEditing, isUpdatingMetricsMetadata, cancelEdit, handleSave]);
 
 	const items = useMemo(
 		() => [
@@ -321,6 +360,14 @@ function Metadata({
 		[actionButton, columns, tableData],
 	);
 
+	if (isLoadingMetricMetadata) {
+		return (
+			<div className="metrics-metadata-skeleton-container">
+				<Skeleton active paragraph={{ rows: 8 }} />
+			</div>
+		);
+	}
+
 	return (
 		<Collapse
 			bordered

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -39,6 +39,7 @@
 		gap: 12px;
 
 		.metric-details-content-grid {
+			height: 50px;
 			.labels-row,
 			.values-row {
 				display: grid;
@@ -72,6 +73,7 @@
 		.dashboards-and-alerts-popover-container {
 			display: flex;
 			gap: 16px;
+			height: 32px;
 
 			.dashboards-and-alerts-popover {
 				border-radius: 20px;
@@ -102,6 +104,14 @@
 			}
 		}
 
+		.metrics-metadata-skeleton-container {
+			height: 330px;
+		}
+
+		.all-attributes-skeleton-container {
+			height: 600px;
+		}
+
 		.metrics-accordion {
 			.ant-table-body {
 				&::-webkit-scrollbar {
@@ -148,7 +158,6 @@
 
 				.all-attributes-search-input {
 					width: 300px;
-					border: 1px solid var(--bg-slate-300);
 				}
 			}
 
@@ -161,6 +170,7 @@
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
 								color: var(--bg-robin-400);
+								background-color: transparent;
 							}
 						}
 						.all-attributes-contribution {
@@ -237,6 +247,7 @@
 			}
 
 			.metric-metadata-value {
+				height: 67px;
 				background: rgba(22, 25, 34, 0.4);
 				overflow-x: scroll;
 				.field-renderer-container {
@@ -330,18 +341,26 @@
 	.metric-details-content {
 		.metrics-accordion {
 			.metrics-accordion-header {
-				.action-button {
-					.ant-typography {
-						color: var(--bg-slate-400);
+				.action-menu {
+					.action-button {
+						.ant-typography {
+							color: var(--bg-slate-400);
+						}
 					}
 				}
 			}
 
 			.metrics-accordion-content {
 				.metric-metadata-key {
+					.field-renderer-container {
+						.label {
+							color: var(--bg-slate-300);
+						}
+					}
+
 					.all-attributes-key {
 						.ant-typography:last-child {
-							color: var(--bg-slate-400);
+							color: var(--bg-vanilla-200);
 							background-color: var(--bg-robin-300);
 						}
 					}

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -1,16 +1,8 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import {
-	Button,
-	Divider,
-	Drawer,
-	Empty,
-	Skeleton,
-	Tooltip,
-	Typography,
-} from 'antd';
+import { Button, Divider, Drawer, Empty, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
+import { useGetMetricMetadata } from 'api/generated/services/metrics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 
@@ -19,16 +11,12 @@ import ROUTES from '../../../constants/routes';
 import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { MetricsExplorerEventKeys, MetricsExplorerEvents } from '../events';
 import { isInspectEnabled } from '../Inspect/utils';
-import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import AllAttributes from './AllAttributes';
 import DashboardsAndAlertsPopover from './DashboardsAndAlertsPopover';
+import Highlights from './Highlights';
 import Metadata from './Metadata';
 import { MetricDetailsProps } from './types';
-import {
-	formatNumberToCompactFormat,
-	formatTimestampToReadableDate,
-	getMetricDetailsQuery,
-} from './utils';
+import { getMetricDetailsQuery } from './utils';
 
 import './MetricDetails.styles.scss';
 import '../Summary/Summary.styles.scss';
@@ -43,55 +31,52 @@ function MetricDetails({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const {
-		data,
-		isLoading,
-		isFetching,
-		error: metricDetailsError,
-		refetch: refetchMetricDetails,
-	} = useGetMetricDetails(metricName ?? '', {
-		enabled: !!metricName,
-	});
-
-	const metric = data?.payload?.data;
-
-	const lastReceived = useMemo(() => {
-		if (!metric) {
-			return null;
-		}
-		return formatTimestampToReadableDate(metric.lastReceived);
-	}, [metric]);
-
-	const showInspectFeature = useMemo(
-		() => isInspectEnabled(metric?.metadata?.metric_type),
-		[metric],
+		data: metricMetadataResponse,
+		isLoading: isLoadingMetricMetadata,
+		isError: isErrorMetricMetadata,
+	} = useGetMetricMetadata(
+		{
+			metricName: metricName ?? '',
+		},
+		{
+			query: {
+				enabled: !!metricName,
+			},
+		},
 	);
 
-	const isMetricDetailsLoading = isLoading || isFetching;
-
-	const timeSeries = useMemo(() => {
-		if (!metric) {
+	const metadata = useMemo(() => {
+		if (
+			!metricMetadataResponse ||
+			!metricMetadataResponse.data ||
+			!metricMetadataResponse.data.data
+		) {
 			return null;
 		}
-		const timeSeriesActive = formatNumberToCompactFormat(metric.timeSeriesActive);
-		const timeSeriesTotal = formatNumberToCompactFormat(metric.timeSeriesTotal);
+		const {
+			type,
+			description,
+			unit,
+			temporality,
+			isMonotonic,
+		} = metricMetadataResponse.data.data;
 
-		return (
-			<Tooltip
-				title="Active time series are those that have received data points in the last 1
-					hour."
-				placement="top"
-			>
-				<span>{`${timeSeriesTotal} total ⎯ ${timeSeriesActive} active`}</span>
-			</Tooltip>
-		);
-	}, [metric]);
+		return {
+			type,
+			description,
+			unit,
+			temporality,
+			isMonotonic,
+		};
+	}, [metricMetadataResponse]);
+
+	const showInspectFeature = useMemo(() => isInspectEnabled(metadata?.type), [
+		metadata,
+	]);
 
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
-			const compositeQuery = getMetricDetailsQuery(
-				metricName,
-				metric?.metadata?.metric_type,
-			);
+			const compositeQuery = getMetricDetailsQuery(metricName, metadata?.type);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -107,9 +92,7 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metric?.metadata?.metric_type]);
-
-	const isMetricDetailsError = metricDetailsError || !metric;
+	}, [metricName, handleExplorerTabChange, metadata?.type]);
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -117,6 +100,10 @@ function MetricDetails({
 		});
 	}, []);
 
+	if (!metricName) {
+		return <Empty description="Metric not found" />;
+	}
+
 	return (
 		<Drawer
 			width="60%"
@@ -124,13 +111,13 @@ function MetricDetails({
 				<div className="metric-details-header">
 					<div className="metric-details-title">
 						<Divider type="vertical" />
-						<Typography.Text>{metric?.name}</Typography.Text>
+						<Typography.Text>{metricName}</Typography.Text>
 					</div>
 					<div className="metric-details-header-buttons">
 						<Button
 							onClick={goToMetricsExplorerwithSelectedMetric}
 							icon={<Compass size={16} />}
-							disabled={!metricName}
+							disabled={!metricName || isLoadingMetricMetadata}
 							data-testid="open-in-explorer-button"
 						>
 							Open in Explorer
@@ -140,10 +127,11 @@ function MetricDetails({
 							<Button
 								className="inspect-metrics-button"
 								aria-label="Inspect Metric"
+								disabled={!metricName || isLoadingMetricMetadata}
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
-									if (metric?.name) {
-										openInspectModal(metric.name);
+									if (metricName) {
+										openInspectModal(metricName);
 									}
 								}}
 								data-testid="inspect-metric-button"
@@ -163,60 +151,17 @@ function MetricDetails({
 			destroyOnClose
 			closeIcon={<X size={16} />}
 		>
-			{isMetricDetailsLoading && (
-				<div data-testid="metric-details-skeleton">
-					<Skeleton active />
-				</div>
-			)}
-			{isMetricDetailsError && !isMetricDetailsLoading && (
-				<Empty description="Error fetching metric details" />
-			)}
-			{!isMetricDetailsLoading && !isMetricDetailsError && (
-				<div className="metric-details-content">
-					<div className="metric-details-content-grid">
-						<div className="labels-row">
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								SAMPLES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								TIME SERIES
-							</Typography.Text>
-							<Typography.Text type="secondary" className="metric-details-grid-label">
-								LAST RECEIVED
-							</Typography.Text>
-						</div>
-						<div className="values-row">
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={metric?.samples.toLocaleString()}>
-									{formatNumberIntoHumanReadableFormat(metric?.samples)}
-								</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={timeSeries}>{timeSeries}</Tooltip>
-							</Typography.Text>
-							<Typography.Text className="metric-details-grid-value">
-								<Tooltip title={lastReceived}>{lastReceived}</Tooltip>
-							</Typography.Text>
-						</div>
-					</div>
-					<DashboardsAndAlertsPopover
-						dashboards={metric.dashboards}
-						alerts={metric.alerts}
-					/>
-					<Metadata
-						metricName={metric?.name}
-						metadata={metric.metadata}
-						refetchMetricDetails={refetchMetricDetails}
-					/>
-					{metric.attributes && (
-						<AllAttributes
-							metricName={metric?.name}
-							attributes={metric.attributes}
-							metricType={metric?.metadata?.metric_type}
-						/>
-					)}
-				</div>
-			)}
+			<div className="metric-details-content">
+				<Highlights metricName={metricName} />
+				<DashboardsAndAlertsPopover metricName={metricName} />
+				<Metadata
+					metricName={metricName}
+					metadata={metadata}
+					isErrorMetricMetadata={isErrorMetricMetadata}
+					isLoadingMetricMetadata={isLoadingMetricMetadata}
+				/>
+				<AllAttributes metricName={metricName} metricType={metadata?.type} />
+			</div>
 		</Drawer>
 	);
 }

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/AllAttributes.test.tsx

@@ -1,11 +1,13 @@
 import * as reactUseHooks from 'react-use';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
+import { userEvent } from 'tests/test-utils';
 
-import { MetricDetailsAttribute } from '../../../../api/metricsExplorer/getMetricDetails';
 import ROUTES from '../../../../constants/routes';
 import AllAttributes, { AllAttributesValue } from '../AllAttributes';
+import { getMockMetricAttributesData } from './testUtlls';
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
@@ -21,33 +23,28 @@ jest
 	});
 
 const mockMetricName = 'test-metric';
-const mockMetricType = MetricType.GAUGE;
-const mockAttributes: MetricDetailsAttribute[] = [
-	{
-		key: 'attribute1',
-		value: ['value1', 'value2'],
-		valueCount: 2,
-	},
-	{
-		key: 'attribute2',
-		value: ['value3'],
-		valueCount: 1,
-	},
-];
+const mockMetricType = MetrictypesTypeDTO.gauge;
 
 const mockUseCopyToClipboard = jest.fn();
 jest
 	.spyOn(reactUseHooks, 'useCopyToClipboard')
 	.mockReturnValue([{ value: 'value1' }, mockUseCopyToClipboard] as any);
 
+const useGetMetricAttributesMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricAttributes',
+);
+
 describe('AllAttributes', () => {
+	beforeEach(() => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData(),
+		});
+	});
+
 	it('renders attributes section with title', () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
@@ -55,11 +52,7 @@ describe('AllAttributes', () => {
 
 	it('renders all attribute keys and values', () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		// Check attribute keys are rendered
@@ -74,11 +67,7 @@ describe('AllAttributes', () => {
 
 	it('renders value counts correctly', () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		expect(screen.getByText('2')).toBeInTheDocument(); // For attribute1
@@ -86,41 +75,35 @@ describe('AllAttributes', () => {
 	});
 
 	it('handles empty attributes array', () => {
+		useGetMetricAttributesMock.mockReturnValue({
+			...getMockMetricAttributesData({
+				data: {
+					attributes: [],
+					totalKeys: 0,
+				},
+			}),
+		});
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={[]}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
 
 		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-		expect(screen.queryByText('No data')).toBeInTheDocument();
+		expect(screen.getByText('No attributes found')).toBeInTheDocument();
 	});
 
-	it('clicking on an attribute key opens the explorer with the attribute filter applied', () => {
+	it('clicking on an attribute key opens the explorer with the attribute filter applied', async () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
-		fireEvent.click(screen.getByText('attribute1'));
+		await userEvent.click(screen.getByText('attribute1'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 	});
 
-	it('filters attributes based on search input', () => {
+	it('filters attributes based on search input', async () => {
 		render(
-			<AllAttributes
-				metricName={mockMetricName}
-				attributes={mockAttributes}
-				metricType={mockMetricType}
-			/>,
+			<AllAttributes metricName={mockMetricName} metricType={mockMetricType} />,
 		);
-		fireEvent.change(screen.getByPlaceholderText('Search'), {
-			target: { value: 'value1' },
-		});
+		await userEvent.type(screen.getByPlaceholderText('Search'), 'value1');
 
 		expect(screen.getByText('attribute1')).toBeInTheDocument();
 		expect(screen.getByText('value1')).toBeInTheDocument();
@@ -144,7 +127,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.getByText('value2')).toBeInTheDocument();
 	});
 
-	it('loads more attributes when show more button is clicked', () => {
+	it('loads more attributes when show more button is clicked', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -155,7 +138,7 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.queryByText('value6')).not.toBeInTheDocument();
-		fireEvent.click(screen.getByText('Show More'));
+		await userEvent.click(screen.getByText('Show More'));
 		expect(screen.getByText('value6')).toBeInTheDocument();
 	});
 
@@ -172,7 +155,7 @@ describe('AllAttributesValue', () => {
 		expect(screen.queryByText('Show More')).not.toBeInTheDocument();
 	});
 
-	it('copy button should copy the attribute value to the clipboard', () => {
+	it('copy button should copy the attribute value to the clipboard', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -183,13 +166,13 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('value1'));
+		await userEvent.click(screen.getByText('value1'));
 		expect(screen.getByText('Copy Attribute')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('Copy Attribute'));
+		await userEvent.click(screen.getByText('Copy Attribute'));
 		expect(mockUseCopyToClipboard).toHaveBeenCalledWith('value1');
 	});
 
-	it('explorer button should go to metrics explore with the attribute filter applied', () => {
+	it('explorer button should go to metrics explore with the attribute filter applied', async () => {
 		render(
 			<AllAttributesValue
 				filterKey="attribute1"
@@ -200,10 +183,10 @@ describe('AllAttributesValue', () => {
 			/>,
 		);
 		expect(screen.getByText('value1')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('value1'));
+		await userEvent.click(screen.getByText('value1'));
 
 		expect(screen.getByText('Open in Explorer')).toBeInTheDocument();
-		fireEvent.click(screen.getByText('Open in Explorer'));
+		await userEvent.click(screen.getByText('Open in Explorer'));
 		expect(mockGoToMetricsExploreWithAppliedAttribute).toHaveBeenCalledWith(
 			'attribute1',
 			'value1',

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/DashboardsAndAlertsPopover.test.tsx

@@ -1,26 +1,17 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import { QueryParams } from 'constants/query';
+import { userEvent } from 'tests/test-utils';
 
 import DashboardsAndAlertsPopover from '../DashboardsAndAlertsPopover';
-
-const mockAlert1 = {
-	alert_id: '1',
-	alert_name: 'Alert 1',
-};
-const mockAlert2 = {
-	alert_id: '2',
-	alert_name: 'Alert 2',
-};
-const mockDashboard1 = {
-	dashboard_id: '1',
-	dashboard_name: 'Dashboard 1',
-};
-const mockDashboard2 = {
-	dashboard_id: '2',
-	dashboard_name: 'Dashboard 2',
-};
-const mockAlerts = [mockAlert1, mockAlert2];
-const mockDashboards = [mockDashboard1, mockDashboard2];
+import {
+	getMockAlertsData,
+	getMockDashboardsData,
+	MOCK_ALERT_1,
+	MOCK_ALERT_2,
+	MOCK_DASHBOARD_1,
+	MOCK_DASHBOARD_2,
+} from './testUtlls';
 
 const mockSafeNavigate = jest.fn();
 jest.mock('hooks/useSafeNavigate', () => ({
@@ -28,7 +19,6 @@ jest.mock('hooks/useSafeNavigate', () => ({
 		safeNavigate: mockSafeNavigate,
 	}),
 }));
-
 const mockSetQuery = jest.fn();
 const mockUrlQuery = {
 	set: mockSetQuery,
@@ -39,125 +29,155 @@ jest.mock('hooks/useUrlQuery', () => ({
 	default: jest.fn(() => mockUrlQuery),
 }));
 
-describe('DashboardsAndAlertsPopover', () => {
-	it('renders the popover correctly with multiple dashboards and alerts', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+const MOCK_METRIC_NAME = 'test-metric';
 
-		expect(
-			screen.getByText(`${mockDashboards.length} dashboards`),
-		).toBeInTheDocument();
-		expect(
-			screen.getByText(`${mockAlerts.length} alert rules`),
-		).toBeInTheDocument();
+const useGetMetricAlertsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricAlerts',
+);
+const useGetMetricDashboardsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricDashboards',
+);
+
+describe('DashboardsAndAlertsPopover', () => {
+	beforeEach(() => {
+		useGetMetricAlertsMock.mockReturnValue(getMockAlertsData());
+		useGetMetricDashboardsMock.mockReturnValue(getMockDashboardsData());
+	});
+
+	it('renders the popover correctly with multiple dashboards and alerts', () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		expect(screen.getByText(`2 dashboards`)).toBeInTheDocument();
+		expect(screen.getByText(`2 alert rules`)).toBeInTheDocument();
 	});
 
 	it('renders null with no dashboards and alerts', () => {
-		const { container } = render(
-			<DashboardsAndAlertsPopover alerts={[]} dashboards={[]} />,
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: undefined,
+			}),
 		);
-		expect(container).toBeEmptyDOMElement();
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: undefined,
+			}),
+		);
+
+		const { container } = render(
+			<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />,
+		);
+
+		expect(
+			container.querySelector('dashboards-and-alerts-popover-container'),
+		).toBeNull();
 	});
 
 	it('renders popover with single dashboard and alert', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={[mockAlert1]}
-				dashboards={[mockDashboard1]}
-			/>,
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [MOCK_ALERT_1],
+				},
+			}),
 		);
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [MOCK_DASHBOARD_1],
+				},
+			}),
+		);
+
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
 		expect(screen.getByText(`1 dashboard`)).toBeInTheDocument();
 		expect(screen.getByText(`1 alert rule`)).toBeInTheDocument();
 	});
 
-	it('renders popover with dashboard id if name is not available', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={[{ ...mockDashboard1, dashboard_name: undefined } as any]}
-			/>,
+	it('renders popover with dashboard id if name is not available', async () => {
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [{ ...MOCK_DASHBOARD_1, dashboardName: '' }],
+				},
+			}),
 		);
 
-		fireEvent.click(screen.getByText(`1 dashboard`));
-		expect(screen.getByText(mockDashboard1.dashboard_id)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		await userEvent.click(screen.getByText(`1 dashboard`));
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardId)).toBeInTheDocument();
 	});
 
-	it('renders popover with alert id if name is not available', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={[{ ...mockAlert1, alert_name: undefined } as any]}
-				dashboards={mockDashboards}
-			/>,
+	it('renders popover with alert id if name is not available', async () => {
+		useGetMetricAlertsMock.mockReturnValue(
+			getMockAlertsData({
+				data: {
+					alerts: [{ ...MOCK_ALERT_1, alertName: '' }],
+				},
+			}),
 		);
 
-		fireEvent.click(screen.getByText(`1 alert rule`));
-		expect(screen.getByText(mockAlert1.alert_id)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		await userEvent.click(screen.getByText(`1 alert rule`));
+		expect(screen.getByText(MOCK_ALERT_1.alertId)).toBeInTheDocument();
 	});
 
-	it('navigates to the dashboard when the dashboard is clicked', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+	it('navigates to the dashboard when the dashboard is clicked', async () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
 
 		// Click on 2 dashboards button
-		fireEvent.click(screen.getByText(`${mockDashboards.length} dashboards`));
+		await userEvent.click(screen.getByText(`2 dashboards`));
 		// Popover showing list of 2 dashboards should be visible
-		expect(screen.getByText(mockDashboard1.dashboard_name)).toBeInTheDocument();
-		expect(screen.getByText(mockDashboard2.dashboard_name)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_2.dashboardName)).toBeInTheDocument();
 
 		// Click on the first dashboard
-		fireEvent.click(screen.getByText(mockDashboard1.dashboard_name));
+		await userEvent.click(screen.getByText(MOCK_DASHBOARD_1.dashboardName));
 
 		// Should navigate to the dashboard
 		expect(mockSafeNavigate).toHaveBeenCalledWith(
-			`/dashboard/${mockDashboard1.dashboard_id}`,
+			`/dashboard/${MOCK_DASHBOARD_1.dashboardId}`,
 		);
 	});
 
-	it('navigates to the alert when the alert is clicked', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={mockDashboards}
-			/>,
-		);
+	it('navigates to the alert when the alert is clicked', async () => {
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
 
 		// Click on 2 alert rules button
-		fireEvent.click(screen.getByText(`${mockAlerts.length} alert rules`));
+		await userEvent.click(screen.getByText(`2 alert rules`));
 		// Popover showing list of 2 alert rules should be visible
-		expect(screen.getByText(mockAlert1.alert_name)).toBeInTheDocument();
-		expect(screen.getByText(mockAlert2.alert_name)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_ALERT_1.alertName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_ALERT_2.alertName)).toBeInTheDocument();
 
 		// Click on the first alert rule
-		fireEvent.click(screen.getByText(mockAlert1.alert_name));
+		await userEvent.click(screen.getByText(MOCK_ALERT_1.alertName));
 
 		// Should navigate to the alert rule
 		expect(mockSetQuery).toHaveBeenCalledWith(
 			QueryParams.ruleId,
-			mockAlert1.alert_id,
+			MOCK_ALERT_1.alertId,
 		);
 	});
 
-	it('renders unique dashboards even when there are duplicates', () => {
-		render(
-			<DashboardsAndAlertsPopover
-				alerts={mockAlerts}
-				dashboards={[...mockDashboards, mockDashboard1]}
-			/>,
+	it('renders unique dashboards even when there are duplicates', async () => {
+		useGetMetricDashboardsMock.mockReturnValue(
+			getMockDashboardsData({
+				data: {
+					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2, MOCK_DASHBOARD_1],
+				},
+			}),
 		);
-		expect(
-			screen.getByText(`${mockDashboards.length} dashboards`),
-		).toBeInTheDocument();
 
-		fireEvent.click(screen.getByText(`${mockDashboards.length} dashboards`));
-		expect(screen.getByText(mockDashboard1.dashboard_name)).toBeInTheDocument();
-		expect(screen.getByText(mockDashboard2.dashboard_name)).toBeInTheDocument();
+		render(<DashboardsAndAlertsPopover metricName={MOCK_METRIC_NAME} />);
+
+		expect(screen.getByText('2 dashboards')).toBeInTheDocument();
+
+		await userEvent.click(screen.getByText('2 dashboards'));
+		expect(screen.getByText(MOCK_DASHBOARD_1.dashboardName)).toBeInTheDocument();
+		expect(screen.getByText(MOCK_DASHBOARD_2.dashboardName)).toBeInTheDocument();
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Highlights.test.tsx

@@ -0,0 +1,85 @@
+import { render } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+
+import Highlights from '../Highlights';
+import { formatTimestampToReadableDate } from '../utils';
+import { getMockMetricHighlightsData } from './testUtlls';
+
+const MOCK_METRIC_NAME = 'test-metric';
+const METRIC_DETAILS_GRID_VALUE_SELECTOR = '.metric-details-grid-value';
+
+const useGetMetricHighlightsMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricHighlights',
+);
+
+describe('Highlights', () => {
+	beforeEach(() => {
+		useGetMetricHighlightsMock.mockReturnValue(getMockMetricHighlightsData());
+	});
+
+	it('should render all highlights data correctly', () => {
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const metricHighlightsValues = container.querySelectorAll(
+			METRIC_DETAILS_GRID_VALUE_SELECTOR,
+		);
+
+		expect(metricHighlightsValues).toHaveLength(3);
+		expect(metricHighlightsValues[0].textContent).toBe('1M+');
+		expect(metricHighlightsValues[1].textContent).toBe('1M total ⎯ 1M active');
+		expect(metricHighlightsValues[2].textContent).toBe(
+			formatTimestampToReadableDate('2026-01-24T00:00:00Z'),
+		);
+	});
+
+	it('should render "-" for highlights data when there is an error', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData(
+				{},
+				{
+					isError: true,
+				},
+			),
+		);
+
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const metricHighlightsValues = container.querySelectorAll(
+			METRIC_DETAILS_GRID_VALUE_SELECTOR,
+		);
+		expect(metricHighlightsValues[0].textContent).toBe('-');
+		expect(metricHighlightsValues[1].textContent).toBe('-');
+		expect(metricHighlightsValues[2].textContent).toBe('-');
+	});
+
+	it('should render loading state when data is loading', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData(
+				{},
+				{
+					isLoading: true,
+				},
+			),
+		);
+
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		expect(container.querySelector('.ant-skeleton')).toBeInTheDocument();
+	});
+
+	it('should not render grid values when there is no data', () => {
+		useGetMetricHighlightsMock.mockReturnValue(
+			getMockMetricHighlightsData({
+				data: undefined,
+			}),
+		);
+
+		const { container } = render(<Highlights metricName={MOCK_METRIC_NAME} />);
+
+		const metricHighlightsValues = container.querySelectorAll(
+			METRIC_DETAILS_GRID_VALUE_SELECTOR,
+		);
+		expect(metricHighlightsValues).toHaveLength(0);
+	});
+});

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/Metadata.test.tsx

@@ -1,16 +1,25 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import {
+	GetMetricMetadata200,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { AxiosResponse } from 'axios';
 import {
 	UniversalYAxisUnit,
 	YAxisUnitSelectorProps,
 } from 'components/YAxisUnitSelector/types';
-import * as useUpdateMetricMetadataHooks from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import * as useNotificationsHooks from 'hooks/useNotifications';
+import { userEvent } from 'tests/test-utils';
 import { SelectOption } from 'types/common/select';
 
 import Metadata from '../Metadata';
+import { MetricMetadata } from '../types';
+import { transformMetricMetadata } from '../utils';
+import { getMockMetricMetadataData } from './testUtlls';
 
 // Mock antd select for testing
 jest.mock('antd', () => ({
@@ -72,13 +81,18 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
+const mockUseUpdateMetricMetadataHook = jest.spyOn(
+	metricsExplorerHooks,
+	'useUpdateMetricMetadata',
+);
+type UseUpdateMetricMetadataResult = ReturnType<
+	typeof metricsExplorerHooks.useUpdateMetricMetadata
+>;
 const mockUseUpdateMetricMetadata = jest.fn();
-jest
-	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
-	.mockReturnValue({
-		mutate: mockUseUpdateMetricMetadata,
-		isLoading: false,
-	} as any);
+
+const mockMetricMetadata = transformMetricMetadata(
+	(getMockMetricMetadataData().data as AxiosResponse<GetMetricMetadata200>).data,
+) as MetricMetadata;
 
 const mockErrorNotification = jest.fn();
 const mockSuccessNotification = jest.fn();
@@ -90,46 +104,47 @@ jest.spyOn(useNotificationsHooks, 'useNotifications').mockReturnValue({
 } as any);
 
 const mockMetricName = 'test_metric';
-const mockMetricMetadata = {
-	metric_type: MetricType.GAUGE,
-	description: 'test_description',
-	unit: 'test_unit',
-	temporality: Temporality.DELTA,
-};
-const mockRefetchMetricDetails = jest.fn();
 
 describe('Metadata', () => {
+	beforeEach(() => {
+		mockUseUpdateMetricMetadataHook.mockReturnValue(({
+			mutate: mockUseUpdateMetricMetadata,
+		} as Partial<UseUpdateMetricMetadataResult>) as UseUpdateMetricMetadataResult);
+	});
+
 	it('should render the metadata properly', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		expect(screen.getByText('Metric Type')).toBeInTheDocument();
-		expect(screen.getByText(mockMetricMetadata.metric_type)).toBeInTheDocument();
+		expect(screen.getByText('Gauge')).toBeInTheDocument();
 		expect(screen.getByText('Description')).toBeInTheDocument();
 		expect(screen.getByText(mockMetricMetadata.description)).toBeInTheDocument();
 		expect(screen.getByText('Unit')).toBeInTheDocument();
 		expect(screen.getByText(mockMetricMetadata.unit)).toBeInTheDocument();
 		expect(screen.getByText('Temporality')).toBeInTheDocument();
-		expect(screen.getByText(mockMetricMetadata.temporality)).toBeInTheDocument();
+		expect(screen.getByText('Delta')).toBeInTheDocument();
 	});
 
-	it('editing the metadata should show the form inputs', () => {
+	it('editing the metadata should show the form inputs', async () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		expect(screen.getByTestId('metric-type-select')).toBeInTheDocument();
 		expect(screen.getByTestId('temporality-select')).toBeInTheDocument();
@@ -144,52 +159,47 @@ describe('Metadata', () => {
 					...mockMetricMetadata,
 					unit: '',
 				}}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
 		expect(metricDescriptionInput).toBeInTheDocument();
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const metricTypeSelect = screen.getByTestId('metric-type-select');
 		expect(metricTypeSelect).toBeInTheDocument();
-		fireEvent.change(metricTypeSelect, {
-			target: { value: MetricType.SUM },
-		});
+		await userEvent.selectOptions(metricTypeSelect, MetrictypesTypeDTO.sum);
 
 		const temporalitySelect = screen.getByTestId('temporality-select');
 		expect(temporalitySelect).toBeInTheDocument();
-		fireEvent.change(temporalitySelect, {
-			target: { value: Temporality.CUMULATIVE },
-		});
+		await userEvent.selectOptions(temporalitySelect, Temporality.CUMULATIVE);
 
 		const unitSelect = screen.getByTestId('unit-select');
 		expect(unitSelect).toBeInTheDocument();
-		fireEvent.change(unitSelect, {
-			target: { value: 'By' },
-		});
+		await userEvent.selectOptions(unitSelect, 'By');
 
 		const saveButton = screen.getByText('Save');
 		expect(saveButton).toBeInTheDocument();
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
-				metricName: mockMetricName,
-				payload: expect.objectContaining({
-					description: 'Updated description',
-					metricType: MetricType.SUM,
-					temporality: Temporality.CUMULATIVE,
+				data: expect.objectContaining({
+					type: MetrictypesTypeDTO.sum,
+					temporality: MetrictypesTemporalityDTO.cumulative,
 					unit: 'By',
 					isMonotonic: true,
 				}),
+				pathParams: {
+					metricName: mockMetricName,
+				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),
@@ -203,29 +213,28 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ statusCode: 200 });
+		onSuccessCallback({ status: 200 });
 
 		expect(mockSuccessNotification).toHaveBeenCalledWith({
 			message: 'Metadata updated successfully',
 		});
-		expect(mockRefetchMetricDetails).toHaveBeenCalled();
 	});
 
 	it('should show error notification when metadata update fails with non-200 response', async () => {
@@ -233,24 +242,24 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ statusCode: 500 });
+		onSuccessCallback({ status: 500 });
 
 		expect(mockErrorNotification).toHaveBeenCalledWith({
 			message:
@@ -263,20 +272,20 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		fireEvent.change(metricDescriptionInput, {
-			target: { value: 'Updated description' },
-		});
+		await userEvent.clear(metricDescriptionInput);
+		await userEvent.type(metricDescriptionInput, 'Updated description');
 
 		const saveButton = screen.getByText('Save');
-		fireEvent.click(saveButton);
+		await userEvent.click(saveButton);
 
 		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
 
@@ -289,39 +298,41 @@ describe('Metadata', () => {
 		});
 	});
 
-	it('cancel button should cancel the edit mode', () => {
+	it('cancel button should cancel the edit mode', async () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const cancelButton = screen.getByText('Cancel');
 		expect(cancelButton).toBeInTheDocument();
-		fireEvent.click(cancelButton);
+		await userEvent.click(cancelButton);
 
 		const editButton2 = screen.getByText('Edit');
 		expect(editButton2).toBeInTheDocument();
 	});
 
-	it('should not allow editing of unit if it is already set', () => {
+	it('should not allow editing of unit if it is already set', async () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				refetchMetricDetails={mockRefetchMetricDetails}
+				isErrorMetricMetadata={false}
+				isLoadingMetricMetadata={false}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		fireEvent.click(editButton);
+		await userEvent.click(editButton);
 
 		const unitSelect = screen.queryByTestId('unit-select');
 		expect(unitSelect).not.toBeInTheDocument();

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/MetricDetails.test.tsx

@@ -1,68 +1,16 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { MetricDetails as MetricDetailsType } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
-import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
+import { render, screen } from '@testing-library/react';
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
 import ROUTES from 'constants/routes';
-import * as useGetMetricDetails from 'hooks/metricsExplorer/useGetMetricDetails';
-import * as useUpdateMetricMetadata from 'hooks/metricsExplorer/useUpdateMetricMetadata';
 import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
+import { userEvent } from 'tests/test-utils';
 
 import MetricDetails from '../MetricDetails';
+import { getMockMetricMetadataData } from './testUtlls';
 
 const mockMetricName = 'test-metric';
-const mockMetricDescription = 'description for a test metric';
-const mockMetricData: MetricDetailsType = {
-	name: mockMetricName,
-	description: mockMetricDescription,
-	unit: 'count',
-	attributes: [
-		{
-			key: 'test-attribute',
-			value: ['test-value'],
-			valueCount: 1,
-		},
-	],
-	alerts: [],
-	dashboards: [],
-	metadata: {
-		metric_type: MetricType.SUM,
-		description: mockMetricDescription,
-		unit: 'count',
-	},
-	type: '',
-	timeseries: 0,
-	samples: 0,
-	timeSeriesTotal: 0,
-	timeSeriesActive: 0,
-	lastReceived: '',
-};
 const mockOpenInspectModal = jest.fn();
 const mockOnClose = jest.fn();
 
-const mockUseGetMetricDetailsData = {
-	data: {
-		payload: {
-			data: mockMetricData,
-		},
-	},
-	isLoading: false,
-	isFetching: false,
-	isError: false,
-	error: null,
-	refetch: jest.fn(),
-};
-
-jest
-	.spyOn(useGetMetricDetails, 'useGetMetricDetails')
-	.mockReturnValue(mockUseGetMetricDetailsData as any);
-
-jest.spyOn(useUpdateMetricMetadata, 'useUpdateMetricMetadata').mockReturnValue({
-	mutate: jest.fn(),
-	isLoading: false,
-	isError: false,
-	error: null,
-} as any);
-
 const mockHandleExplorerTabChange = jest.fn();
 jest
 	.spyOn(useHandleExplorerTabChange, 'useHandleExplorerTabChange')
@@ -88,7 +36,50 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/AllAttributes',
+	() =>
+		function MockAllAttributes(): JSX.Element {
+			return <div data-testid="all-attributes">All Attributes</div>;
+		},
+);
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover',
+	() =>
+		function MockDashboardsAndAlertsPopover(): JSX.Element {
+			return (
+				<div data-testid="dashboards-and-alerts-popover">
+					Dashboards and Alerts Popover
+				</div>
+			);
+		},
+);
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/Highlights',
+	() =>
+		function MockHighlights(): JSX.Element {
+			return <div data-testid="highlights">Highlights</div>;
+		},
+);
+
+jest.mock(
+	'container/MetricsExplorer/MetricDetails/Metadata',
+	() =>
+		function MockMetadata(): JSX.Element {
+			return <div data-testid="metadata">Metadata</div>;
+		},
+);
+
+const useGetMetricMetadataMock = jest.spyOn(
+	metricsExplorerHooks,
+	'useGetMetricMetadata',
+);
+
 describe('MetricDetails', () => {
+	beforeEach(() => {
+		useGetMetricMetadataMock.mockReturnValue(getMockMetricMetadataData());
+	});
+
 	it('renders metric details correctly', () => {
 		render(
 			<MetricDetails
@@ -101,27 +92,15 @@ describe('MetricDetails', () => {
 		);
 
 		expect(screen.getByText(mockMetricName)).toBeInTheDocument();
-		expect(screen.getByText(mockMetricDescription)).toBeInTheDocument();
+		expect(screen.getByTestId('all-attributes')).toBeInTheDocument();
 		expect(
-			screen.getByText(getUniversalNameFromMetricUnit(mockMetricData.unit)),
+			screen.getByTestId('dashboards-and-alerts-popover'),
 		).toBeInTheDocument();
+		expect(screen.getByTestId('highlights')).toBeInTheDocument();
+		expect(screen.getByTestId('metadata')).toBeInTheDocument();
 	});
 
-	it('renders the "open in explorer" and "inspect" buttons', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValueOnce({
-			...mockUseGetMetricDetailsData,
-			data: {
-				payload: {
-					data: {
-						...mockMetricData,
-						metadata: {
-							...mockMetricData.metadata,
-							metric_type: MetricType.GAUGE,
-						},
-					},
-				},
-			},
-		} as any);
+	it('renders the "open in explorer" and "inspect" buttons', async () => {
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
@@ -135,93 +114,24 @@ describe('MetricDetails', () => {
 		expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
 		expect(screen.getByTestId('inspect-metric-button')).toBeInTheDocument();
 
-		fireEvent.click(screen.getByTestId('open-in-explorer-button'));
+		await userEvent.click(screen.getByTestId('open-in-explorer-button'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 
-		fireEvent.click(screen.getByTestId('inspect-metric-button'));
+		await userEvent.click(screen.getByTestId('inspect-metric-button'));
 		expect(mockOpenInspectModal).toHaveBeenCalled();
 	});
 
-	it('should render error state when metric details are not found', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			isError: true,
-			error: {
-				message: 'Error fetching metric details',
-			},
-		} as any);
-
+	it('should render empty state when metric name is not provided', () => {
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
 				isOpen
-				metricName={mockMetricName}
+				metricName={null}
 				isModalTimeSelection
 				openInspectModal={mockOpenInspectModal}
 			/>,
 		);
 
-		expect(screen.getByText('Error fetching metric details')).toBeInTheDocument();
-	});
-
-	it('should render loading state when metric details are loading', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			isLoading: true,
-		} as any);
-
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByTestId('metric-details-skeleton')).toBeInTheDocument();
-	});
-
-	it('should render all attributes section', () => {
-		jest
-			.spyOn(useGetMetricDetails, 'useGetMetricDetails')
-			.mockReturnValue(mockUseGetMetricDetailsData as any);
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.getByText('All Attributes')).toBeInTheDocument();
-	});
-
-	it('should not render all attributes section when relevant data is not present', () => {
-		jest.spyOn(useGetMetricDetails, 'useGetMetricDetails').mockReturnValue({
-			...mockUseGetMetricDetailsData,
-			data: {
-				payload: {
-					data: {
-						...mockMetricData,
-						attributes: null,
-					},
-				},
-			},
-		} as any);
-		render(
-			<MetricDetails
-				onClose={mockOnClose}
-				isOpen
-				metricName={mockMetricName}
-				isModalTimeSelection
-				openInspectModal={mockOpenInspectModal}
-			/>,
-		);
-
-		expect(screen.queryByText('All Attributes')).not.toBeInTheDocument();
+		expect(screen.getByText('Metric not found')).toBeInTheDocument();
 	});
 });

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/testUtlls.ts

@@ -0,0 +1,175 @@
+import * as metricsExplorerHooks from 'api/generated/services/metrics';
+import {
+	GetMetricAlerts200,
+	GetMetricAttributes200,
+	GetMetricDashboards200,
+	GetMetricHighlights200,
+	GetMetricMetadata200,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+export function getMockMetricHighlightsData(
+	overrides?: Partial<GetMetricHighlights200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricHighlights> {
+	return {
+		data: {
+			data: {
+				data: {
+					dataPoints: 1000000,
+					lastReceived: '2026-01-24T00:00:00Z',
+					totalTimeSeries: 1000000,
+					activeTimeSeries: 1000000,
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricHighlights>;
+}
+
+export const MOCK_DASHBOARD_1 = {
+	dashboardName: 'Dashboard 1',
+	dashboardId: '1',
+	widgetId: '1',
+	widgetName: 'Widget 1',
+};
+export const MOCK_DASHBOARD_2 = {
+	dashboardName: 'Dashboard 2',
+	dashboardId: '2',
+	widgetId: '2',
+	widgetName: 'Widget 2',
+};
+export const MOCK_ALERT_1 = {
+	alertName: 'Alert 1',
+	alertId: '1',
+};
+export const MOCK_ALERT_2 = {
+	alertName: 'Alert 2',
+	alertId: '2',
+};
+
+export function getMockDashboardsData(
+	overrides?: Partial<GetMetricDashboards200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards> {
+	return {
+		data: {
+			data: {
+				data: {
+					dashboards: [MOCK_DASHBOARD_1, MOCK_DASHBOARD_2],
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricDashboards>;
+}
+
+export function getMockAlertsData(
+	overrides?: Partial<GetMetricAlerts200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricAlerts> {
+	return {
+		data: {
+			data: {
+				data: {
+					alerts: [MOCK_ALERT_1, MOCK_ALERT_2],
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricAlerts>;
+}
+
+export function getMockMetricAttributesData(
+	overrides?: Partial<GetMetricAttributes200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricAttributes> {
+	return {
+		data: {
+			data: {
+				data: {
+					attributes: [
+						{
+							key: 'attribute1',
+							values: ['value1', 'value2'],
+							valueCount: 2,
+						},
+						{
+							key: 'attribute2',
+							values: ['value3'],
+							valueCount: 1,
+						},
+					],
+					totalKeys: 2,
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricAttributes>;
+}
+
+export function getMockMetricMetadataData(
+	overrides?: Partial<GetMetricMetadata200>,
+	{
+		isLoading = false,
+		isError = false,
+	}: {
+		isLoading?: boolean;
+		isError?: boolean;
+	} = {},
+): ReturnType<typeof metricsExplorerHooks.useGetMetricMetadata> {
+	return {
+		data: {
+			data: {
+				data: {
+					description: 'test_description',
+					type: MetrictypesTypeDTO.gauge,
+					unit: 'test_unit',
+					temporality: MetrictypesTemporalityDTO.delta,
+					isMonotonic: false,
+				},
+				status: 'success',
+				...overrides,
+			},
+		},
+		isLoading,
+		isError,
+	} as ReturnType<typeof metricsExplorerHooks.useGetMetricMetadata>;
+}

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/utils.test.ts

@@ -1,5 +1,7 @@
-import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 import {
 	determineIsMonotonic,
@@ -10,35 +12,48 @@ import {
 describe('MetricDetails utils', () => {
 	describe('determineIsMonotonic', () => {
 		it('should return true for histogram metrics', () => {
-			expect(determineIsMonotonic(MetricType.HISTOGRAM)).toBe(true);
+			expect(determineIsMonotonic(MetrictypesTypeDTO.histogram)).toBe(true);
 		});
 
 		it('should return true for exponential histogram metrics', () => {
-			expect(determineIsMonotonic(MetricType.EXPONENTIAL_HISTOGRAM)).toBe(true);
-		});
-
-		it('should return false for gauge metrics', () => {
-			expect(determineIsMonotonic(MetricType.GAUGE)).toBe(false);
-		});
-
-		it('should return false for summary metrics', () => {
-			expect(determineIsMonotonic(MetricType.SUMMARY)).toBe(false);
-		});
-
-		it('should return true for sum metrics with cumulative temporality', () => {
-			expect(determineIsMonotonic(MetricType.SUM, Temporality.CUMULATIVE)).toBe(
+			expect(determineIsMonotonic(MetrictypesTypeDTO.exponentialhistogram)).toBe(
 				true,
 			);
 		});
 
+		it('should return false for gauge metrics', () => {
+			expect(determineIsMonotonic(MetrictypesTypeDTO.gauge)).toBe(false);
+		});
+
+		it('should return false for summary metrics', () => {
+			expect(determineIsMonotonic(MetrictypesTypeDTO.summary)).toBe(false);
+		});
+
+		it('should return true for sum metrics with cumulative temporality', () => {
+			expect(
+				determineIsMonotonic(
+					MetrictypesTypeDTO.sum,
+					MetrictypesTemporalityDTO.cumulative,
+				),
+			).toBe(true);
+		});
+
 		it('should return false for sum metrics with delta temporality', () => {
-			expect(determineIsMonotonic(MetricType.SUM, Temporality.DELTA)).toBe(false);
+			expect(
+				determineIsMonotonic(
+					MetrictypesTypeDTO.sum,
+					MetrictypesTemporalityDTO.delta,
+				),
+			).toBe(false);
 		});
 
 		it('should return false by default', () => {
-			expect(determineIsMonotonic('' as MetricType, '' as Temporality)).toBe(
-				false,
-			);
+			expect(
+				determineIsMonotonic(
+					'' as MetrictypesTypeDTO,
+					'' as MetrictypesTemporalityDTO,
+				),
+			).toBe(false);
 		});
 	});
 
@@ -115,13 +130,16 @@ describe('MetricDetails utils', () => {
 		const API_GATEWAY = 'api-gateway';
 
 		it('should create correct query for SUM metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUM);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.sum,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('rate');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('rate');
@@ -129,13 +147,16 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for GAUGE metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.GAUGE);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.gauge,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.GAUGE,
+				MetrictypesTypeDTO.gauge,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('avg');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('avg');
@@ -143,13 +164,16 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for SUMMARY metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUMMARY);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.summary,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.SUMMARY,
+				MetrictypesTypeDTO.summary,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -157,13 +181,16 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for HISTOGRAM metric type', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.HISTOGRAM);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.histogram,
+			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.HISTOGRAM,
+				MetrictypesTypeDTO.histogram,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -173,14 +200,14 @@ describe('MetricDetails utils', () => {
 		it('should create correct query for EXPONENTIAL_HISTOGRAM metric type', () => {
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.EXPONENTIAL_HISTOGRAM,
+				MetrictypesTypeDTO.exponentialhistogram,
 			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetricType.EXPONENTIAL_HISTOGRAM,
+				MetrictypesTypeDTO.exponentialhistogram,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -203,7 +230,7 @@ describe('MetricDetails utils', () => {
 			const filter = { key: 'service', value: API_GATEWAY };
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 				filter,
 			);
 
@@ -221,7 +248,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'service';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 				undefined,
 				groupBy,
 			);
@@ -236,7 +263,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'endpoint';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetricType.SUM,
+				MetrictypesTypeDTO.sum,
 				filter,
 				groupBy,
 			);
@@ -250,7 +277,10 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should not include filters or groupBy when not provided', () => {
-			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUM);
+			const query = getMetricDetailsQuery(
+				TEST_METRIC_NAME,
+				MetrictypesTypeDTO.sum,
+			);
 
 			expect(query.builder.queryData[0]?.filters?.items).toHaveLength(0);
 			expect(query.builder.queryData[0]?.groupBy).toHaveLength(0);

frontend/src/container/MetricsExplorer/MetricDetails/constants.ts

@@ -1,6 +1,48 @@
+import {
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
 export const METRIC_METADATA_KEYS = {
 	description: 'Description',
 	unit: 'Unit',
-	metric_type: 'Metric Type',
+	type: 'Metric Type',
 	temporality: 'Temporality',
 };
+
+export const METRIC_METADATA_TEMPORALITY_OPTIONS = [
+	{
+		value: MetrictypesTemporalityDTO.delta,
+		label: 'Delta',
+	},
+	{
+		value: MetrictypesTemporalityDTO.cumulative,
+		label: 'Cumulative',
+	},
+];
+
+export const METRIC_METADATA_TYPE_OPTIONS = [
+	{
+		value: MetrictypesTypeDTO.sum,
+		label: 'Sum',
+	},
+	{
+		value: MetrictypesTypeDTO.gauge,
+		label: 'Gauge',
+	},
+	{
+		value: MetrictypesTypeDTO.histogram,
+		label: 'Histogram',
+	},
+	{
+		value: MetrictypesTypeDTO.summary,
+		label: 'Summary',
+	},
+	{
+		value: MetrictypesTypeDTO.exponentialhistogram,
+		label: 'Exponential Histogram',
+	},
+];
+
+export const METRIC_METADATA_UPDATE_ERROR_MESSAGE =
+	'Failed to update metadata, please try again. If the issue persists, please contact support.';

frontend/src/container/MetricsExplorer/MetricDetails/types.ts

@@ -1,10 +1,12 @@
 import {
-	MetricDetails,
-	MetricDetailsAlert,
-	MetricDetailsAttribute,
-	MetricDetailsDashboard,
-} from 'api/metricsExplorer/getMetricDetails';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+	MetricsexplorertypesMetricAlertDTO,
+	MetricsexplorertypesMetricAttributeDTO,
+	MetricsexplorertypesMetricDashboardDTO,
+	MetricsexplorertypesMetricHighlightsResponseDTO,
+	MetricsexplorertypesMetricMetadataDTO,
+	MetrictypesTemporalityDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 
 export interface MetricDetailsProps {
 	onClose: () => void;
@@ -14,21 +16,23 @@ export interface MetricDetailsProps {
 	openInspectModal?: (metricName: string) => void;
 }
 
+export interface HighlightsProps {
+	metricName: string;
+}
 export interface DashboardsAndAlertsPopoverProps {
-	dashboards: MetricDetailsDashboard[] | null;
-	alerts: MetricDetailsAlert[] | null;
+	metricName: string;
 }
 
 export interface MetadataProps {
 	metricName: string;
-	metadata: MetricDetails['metadata'] | undefined;
-	refetchMetricDetails: () => void;
+	metadata: MetricMetadata | null;
+	isErrorMetricMetadata: boolean;
+	isLoadingMetricMetadata: boolean;
 }
 
 export interface AllAttributesProps {
-	attributes: MetricDetailsAttribute[];
 	metricName: string;
-	metricType: MetricType | undefined;
+	metricType: MetrictypesTypeDTO | undefined;
 }
 
 export interface AllAttributesValueProps {
@@ -36,3 +40,27 @@ export interface AllAttributesValueProps {
 	filterValue: string[];
 	goToMetricsExploreWithAppliedAttribute: (key: string, value: string) => void;
 }
+
+export type MetricHighlight = MetricsexplorertypesMetricHighlightsResponseDTO;
+
+export type MetricAlert = MetricsexplorertypesMetricAlertDTO;
+
+export type MetricDashboard = MetricsexplorertypesMetricDashboardDTO;
+
+export type MetricMetadata = MetricsexplorertypesMetricMetadataDTO;
+export interface MetricMetadataState {
+	type: MetrictypesTypeDTO;
+	description: string;
+	temporality?: MetrictypesTemporalityDTO;
+	unit: string;
+}
+
+export type MetricAttribute = MetricsexplorertypesMetricAttributeDTO;
+
+export enum TableFields {
+	DESCRIPTION = 'description',
+	UNIT = 'unit',
+	TYPE = 'type',
+	Temporality = 'temporality',
+	IS_MONOTONIC = 'isMonotonic',
+}