chore: init commit

* fix: added a fix for tooltip height when legend is too big

* fix: minor changes

* chore: refactored tooltip compute code + added test for tooltip

* chore: added test for tooltip util

* chore: pr review changes

.github/workflows/integrationci.yaml

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

cmd/community/server.go

@@ -85,6 +85,9 @@ 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,6 +9,7 @@ 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"
@@ -124,6 +125,10 @@ 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,11 +307,16 @@ components:
           type: string
         value:
           type: string
+      required:
+      - id
+      - value
       type: object
     GatewaytypesGettableCreatedIngestionKeyLimit:
       properties:
         id:
           type: string
+      required:
+      - id
       type: object
     GatewaytypesGettableIngestionKeys:
       properties:
@@ -432,6 +437,8 @@ components:
             type: string
           nullable: true
           type: array
+      required:
+      - name
       type: object
     GatewaytypesPostableIngestionKeyLimit:
       properties:
@@ -454,6 +461,8 @@ components:
             type: string
           nullable: true
           type: array
+      required:
+      - config
       type: object
     MetricsexplorertypesListMetric:
       properties:
@@ -1920,6 +1929,82 @@ 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
@@ -3138,12 +3223,29 @@ 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
@@ -3168,12 +3270,29 @@ 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
@@ -4720,6 +4839,7 @@ paths:
       parameters:
       - in: query
         name: name
+        required: true
         schema:
           type: string
       - in: query
@@ -5538,6 +5658,174 @@ 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
@@ -5932,4 +6220,58 @@ paths:
         - VIEWER
       summary: Query range
       tags:
-      - query
+      - 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

docs/contributing/go/handler.md

@@ -155,6 +155,7 @@ 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.
@@ -172,8 +173,170 @@ 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

@@ -0,0 +1,178 @@
+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

@@ -10,9 +10,7 @@ import (
 	"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"
@@ -57,7 +55,6 @@ 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)
 
@@ -106,14 +103,6 @@ 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))
 

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

@@ -2,16 +2,11 @@ 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"
@@ -20,8 +15,6 @@ 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) {
@@ -144,140 +137,3 @@ 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

@@ -240,7 +240,6 @@ 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/zeus/httpzeus/provider.go

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

frontend/package.json

@@ -58,6 +58,7 @@
 		"@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,5 +12,6 @@
 	"pipeline": "Pipeline",
 	"pipelines": "Pipelines",
 	"archives": "Archives",
-	"logs_to_metrics": "Logs To Metrics"
+	"logs_to_metrics": "Logs To Metrics",
+	"roles": "Roles"
 }

frontend/public/locales/en/routes.json

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

frontend/public/locales/en/titles.json

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

frontend/src/api/customDomain/getDeploymentsData.ts

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/querier/index.ts

@@ -16,6 +16,7 @@ import type {
 	Querybuildertypesv5QueryRangeRequestDTO,
 	QueryRangeV5200,
 	RenderErrorResponseDTO,
+	ReplaceVariables200,
 } from '../sigNoz.schemas';
 
 type AwaitedInput<T> = PromiseLike<T> | T;
@@ -105,3 +106,86 @@ 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,6 +2414,91 @@ 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;
 };
@@ -2954,7 +3039,7 @@ export type SearchIngestionKeysParams = {
 	 * @type string
 	 * @description undefined
 	 */
-	name?: string;
+	name: string;
 	/**
 	 * @type integer
 	 * @description undefined
@@ -3129,6 +3214,14 @@ export type RotateSession200 = {
 	status?: string;
 };
 
+export type GetHosts200 = {
+	data?: ZeustypesGettableHostDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};
+
 export type QueryRangeV5200 = {
 	data?: Querybuildertypesv5QueryRangeResponseDTO;
 	/**
@@ -3136,3 +3229,11 @@ export type QueryRangeV5200 = {
 	 */
 	status?: string;
 };
+
+export type ReplaceVariables200 = {
+	data?: Querybuildertypesv5QueryRangeRequestDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};

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

@@ -0,0 +1,269 @@
+/**
+ * ! 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/metricsExplorer/v2/getMetricMetadata.ts

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

frontend/src/api/onboarding/updateProfile.ts

@@ -1,20 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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,5 +24,6 @@ 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,6 +42,7 @@
 		display: flex;
 		flex-direction: column;
 		padding: 16px;
+		padding-bottom: 0;
 	}
 
 	.title {
@@ -190,7 +191,7 @@
 		padding: 0px;
 	}
 	.log-detail-drawer__footer-hint {
-		position: absolute;
+		position: sticky;
 		bottom: 0;
 		left: 0;
 		right: 0;
@@ -366,7 +367,7 @@
 	}
 
 	.log-detail-drawer__footer-hint {
-		position: absolute;
+		position: sticky;
 		bottom: 0;
 		left: 0;
 		right: 0;

frontend/src/constants/routes.ts

@@ -55,6 +55,7 @@ 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/CustomDomainSettings/CustomDomainSettings.tsx

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

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

@@ -0,0 +1,128 @@
+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,6 +34,9 @@ function DashboardVariableSelection(): JSX.Element | null {
 	const sortedVariablesArray = useDashboardVariablesSelector(
 		(state) => state.sortedVariablesArray,
 	);
+	const dynamicVariableOrder = useDashboardVariablesSelector(
+		(state) => state.dynamicVariableOrder,
+	);
 	const dependencyData = useDashboardVariablesSelector(
 		(state) => state.dependencyData,
 	);
@@ -52,10 +55,11 @@ function DashboardVariableSelection(): JSX.Element | null {
 	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
 
 	// Memoize the order key to avoid unnecessary triggers
-	const dependencyOrderKey = useMemo(
-		() => dependencyData?.order?.join(',') ?? '',
-		[dependencyData?.order],
-	);
+	const variableOrderKey = useMemo(() => {
+		const queryVariableOrderKey = dependencyData?.order?.join(',') ?? '';
+		const dynamicVariableOrderKey = dynamicVariableOrder?.join(',') ?? '';
+		return `${queryVariableOrderKey}|${dynamicVariableOrderKey}`;
+	}, [dependencyData?.order, dynamicVariableOrder]);
 
 	// Initialize fetch store then start a new fetch cycle.
 	// Runs on dependency order changes, and time range changes.
@@ -66,7 +70,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		initializeVariableFetchStore(allVariableNames);
 		enqueueFetchOfAllVariables();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dependencyOrderKey, minTime, maxTime]);
+	}, [variableOrderKey, 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

@@ -0,0 +1,203 @@
+/* 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,7 +1,6 @@
 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,
@@ -22,21 +21,11 @@ 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,7 +1,6 @@
 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,
@@ -17,21 +16,11 @@ 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/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -0,0 +1,325 @@
+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,10 +15,12 @@ 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';
@@ -33,6 +35,22 @@ 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,
@@ -77,9 +95,8 @@ export const prepareUPlotConfig = ({
 		stepInterval: minStepInterval,
 	});
 
-	const seriesList = apiResponse.data?.result || [];
-
-	seriesList.forEach((series) => {
+	apiResponse.data?.result?.forEach((series) => {
+		const hasSingleValidPoint = hasSingleVisiblePointForSeries(series);
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query
@@ -92,13 +109,15 @@ export const prepareUPlotConfig = ({
 
 		builder.addSeries({
 			scaleKey: 'y',
-			drawStyle: DrawStyle.Line,
+			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
 			lineStyle: LineStyle.Solid,
 			lineInterpolation: LineInterpolation.Spline,
-			showPoints: VisibilityMode.Never,
+			showPoints: hasSingleValidPoint
+				? VisibilityMode.Always
+				: 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 { Globe, Link2 } from 'lucide-react';
+import { 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,36 +26,21 @@ function DataSourceInfo({
 	const isEnabled =
 		activeLicense && activeLicense.platform === LicensePlatform.CLOUD;
 
-	const {
-		data: deploymentsData,
-		isError: isErrorDeploymentsData,
-	} = useGetDeploymentsData(isEnabled || false);
+	const { data: hostsData, isError } = useGetHosts({
+		query: { enabled: isEnabled || false },
+	});
 
-	const [region, setRegion] = useState<string>('');
 	const [url, setUrl] = useState<string>('');
 
 	useEffect(() => {
-		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;
+		if (hostsData) {
+			const defaultHost = hostsData?.data?.data?.hosts?.find((h) => h.is_default);
+			if (defaultHost?.url) {
+				const url = defaultHost?.url?.split('://')[1] ?? '';
+				setUrl(url);
 			}
-
-			setUrl(
-				`${deploymentsData?.data.data.name}.${deploymentsData?.data.data.cluster.region.dns}`,
-			);
 		}
-	}, [deploymentsData]);
+	}, [hostsData]);
 
 	const renderNotSendingData = (): JSX.Element => (
 		<>
@@ -123,14 +108,8 @@ function DataSourceInfo({
 							</Button>
 						</div>
 
-						{!isErrorDeploymentsData && deploymentsData && (
+						{!isError && hostsData && (
 							<div className="workspace-details">
-								<div className="workspace-region">
-									<Globe size={10} />
-
-									<Typography>{region}</Typography>
-								</div>
-
 								<div className="workspace-url">
 									<Link2 size={12} />
 
@@ -156,17 +135,11 @@ function DataSourceInfo({
 				Hello there, Welcome to your SigNoz workspace
 			</Typography>
 
-			{!isErrorDeploymentsData && deploymentsData && (
+			{!isError && hostsData && (
 				<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

@@ -0,0 +1,69 @@
+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,24 +36,6 @@ 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,7 +39,10 @@ function RelatedMetricsCard({ metric }: RelatedMetricsCardProps): JSX.Element {
 					dataSource={DataSource.METRICS}
 				/>
 			)}
-			<DashboardsAndAlertsPopover metricName={metric.name} />
+			<DashboardsAndAlertsPopover
+				dashboards={metric.dashboards}
+				alerts={metric.alerts}
+			/>
 		</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,10 +40,8 @@ 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: MetrictypesTypeDTO | undefined,
-): boolean {
-	return metricType === MetrictypesTypeDTO.gauge;
+export function isInspectEnabled(metricType: MetricType | undefined): boolean {
+	return metricType === MetricType.GAUGE;
 }
 
 export function getAllTimestampsOfMetrics(

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

@@ -1,17 +1,8 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	Button,
-	Collapse,
-	Input,
-	Menu,
-	Popover,
-	Skeleton,
-	Typography,
-} from 'antd';
+import { Button, Collapse, Input, Menu, Popover, 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';
@@ -24,8 +15,6 @@ 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,
@@ -121,22 +110,12 @@ export function AllAttributesValue({
 
 function AllAttributes({
 	metricName,
+	attributes,
 	metricType,
 }: AllAttributesProps): JSX.Element {
 	const [searchString, setSearchString] = useState('');
-	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 [activeKey, setActiveKey] = useState<string | string[]>(
+		'all-attributes',
 	);
 
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
@@ -199,7 +178,7 @@ function AllAttributes({
 			attributes.filter(
 				(attribute) =>
 					attribute.key.toLowerCase().includes(searchString.toLowerCase()) ||
-					attribute.values?.some((value) =>
+					attribute.value.some((value) =>
 						value.toLowerCase().includes(searchString.toLowerCase()),
 					),
 			),
@@ -216,7 +195,7 @@ function AllAttributes({
 						},
 						value: {
 							key: attribute.key,
-							value: attribute.values,
+							value: attribute.value,
 						},
 				  }))
 				: [],
@@ -273,10 +252,6 @@ function AllAttributes({
 		],
 	);
 
-	const emptyText = isErrorAttributes
-		? 'Error fetching attributes'
-		: 'No attributes found';
-
 	const items = useMemo(
 		() => [
 			{
@@ -295,7 +270,6 @@ function AllAttributes({
 							onClick={(e): void => {
 								e.stopPropagation();
 							}}
-							disabled={isLoadingAttributes}
 						/>
 					</div>
 				),
@@ -303,37 +277,25 @@ 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,
-						}}
 					/>
 				),
 			},
 		],
-		[searchString, columns, isLoadingAttributes, tableData, emptyText],
+		[columns, tableData, searchString],
 	);
 
-	if (isLoadingAttributes) {
-		return (
-			<div className="all-attributes-skeleton-container">
-				<Skeleton active paragraph={{ rows: 8 }} />
-			</div>
-		);
-	}
-
 	return (
 		<Collapse
 			bordered
-			className="metrics-accordion"
+			className="metrics-accordion metrics-metadata-accordion"
 			activeKey={activeKey}
-			onChange={(keys): void => setActiveKey(keys as string[])}
+			onChange={(keys): void => setActiveKey(keys)}
 			items={items}
 		/>
 	);

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

@@ -2,84 +2,36 @@ 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({
-	metricName,
+	alerts,
+	dashboards,
 }: 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.alertId,
+				key: alert.alert_id,
 				label: (
 					<Typography.Link
-						key={alert.alertId}
+						key={alert.alert_id}
 						onClick={(): void => {
-							params.set(QueryParams.ruleId, alert.alertId);
+							params.set(QueryParams.ruleId, alert.alert_id);
 							history.push(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{alert.alertName || alert.alertId}
+						{alert.alert_name || alert.alert_id}
 					</Typography.Link>
 				),
 			}));
@@ -87,44 +39,41 @@ 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 (dashboards && dashboards.length > 0) {
-			return dashboards.map((dashboard) => ({
-				key: dashboard.dashboardId,
+		if (uniqueDashboards && uniqueDashboards.length > 0) {
+			return uniqueDashboards.map((dashboard) => ({
+				key: dashboard.dashboard_id,
 				label: (
 					<Typography.Link
-						key={dashboard.dashboardId}
+						key={dashboard.dashboard_id}
 						onClick={(): void => {
 							safeNavigate(
 								generatePath(ROUTES.DASHBOARD, {
-									dashboardId: dashboard.dashboardId,
+									dashboardId: dashboard.dashboard_id,
 								}),
 							);
 						}}
 						className="dashboards-popover-content-item"
 					>
-						{dashboard.dashboardName || dashboard.dashboardId}
+						{dashboard.dashboard_name || dashboard.dashboard_id}
 					</Typography.Link>
 				),
 			}));
 		}
 		return null;
-	}, [dashboards, safeNavigate]);
+	}, [uniqueDashboards, safeNavigate]);
 
-	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" />;
+	if (!dashboardsPopoverContent && !alertsPopoverContent) {
+		return null;
 	}
 
 	return (
@@ -143,7 +92,8 @@ function DashboardsAndAlertsPopover({
 					>
 						<Grid size={12} color={Color.BG_SIENNA_500} />
 						<Typography.Text>
-							{pluralize(dashboards.length, 'dashboard')}
+							{uniqueDashboards?.length} dashboard
+							{uniqueDashboards?.length === 1 ? '' : 's'}
 						</Typography.Text>
 					</div>
 				</Dropdown>
@@ -162,7 +112,7 @@ function DashboardsAndAlertsPopover({
 					>
 						<Bell size={12} color={Color.BG_SAKURA_500} />
 						<Typography.Text>
-							{pluralize(alerts.length, 'alert rule')}
+							{alerts?.length} alert {alerts?.length === 1 ? 'rule' : 'rules'}
 						</Typography.Text>
 					</div>
 				</Dropdown>

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

@@ -1,129 +0,0 @@
-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,55 +1,45 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
-import { Button, Collapse, Input, Select, Skeleton, Typography } from 'antd';
+import { Button, Collapse, Input, Select, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import logEvent from 'api/common/logEvent';
-import {
-	invalidateGetMetricMetadata,
-	useUpdateMetricMetadata,
-} from 'api/generated/services/metrics';
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-	RenderErrorResponseDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { AxiosError } from 'axios';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { UpdateMetricMetadataProps } from 'api/metricsExplorer/updateMetricMetadata';
 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_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';
+	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';
 
 function Metadata({
 	metricName,
 	metadata,
-	isErrorMetricMetadata,
-	isLoadingMetricMetadata,
+	refetchMetricDetails,
 }: MetadataProps): JSX.Element {
 	const [isEditing, setIsEditing] = useState(false);
-
 	const [
-		metricMetadataState,
-		setMetricMetadataState,
-	] = useState<MetricMetadataState>({
-		type: MetrictypesTypeDTO.sum,
-		description: '',
-		temporality: MetrictypesTemporalityDTO.unspecified,
-		unit: '',
+		metricMetadata,
+		setMetricMetadata,
+	] = useState<UpdateMetricMetadataProps>({
+		metricType: metadata?.metric_type || MetricType.SUM,
+		description: metadata?.description || '',
+		temporality: metadata?.temporality,
+		unit: metadata?.unit,
 	});
 	const { notifications } = useNotifications();
 	const {
@@ -61,24 +51,15 @@ 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)
+				? Object.keys({
+						...metadata,
+						temporality: metadata?.temporality,
+				  })
 						// Filter out monotonic as user input is not required
-						.filter((key) => key !== TableFields.IS_MONOTONIC)
+						.filter((key) => key !== 'monotonic')
 						.map((key) => ({
 							key,
 							value: {
@@ -91,96 +72,89 @@ function Metadata({
 	);
 
 	// Render un-editable field value
-	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 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 renderColumnValue = useCallback(
-		(field: { value: string; key: keyof MetricMetadataState }): JSX.Element => {
+		(field: { value: string; key: string }): 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 === TableFields.UNIT && Boolean(metadata?.unit);
+			const metricUnitAlreadySet = field.key === 'unit' && Boolean(metadata?.unit);
 			if (metricUnitAlreadySet) {
 				return renderUneditableField(field.key, field.value);
 			}
 
-			if (field.key === TableFields.TYPE) {
+			if (field.key === 'metric_type') {
 				return (
 					<Select
 						data-testid="metric-type-select"
-						options={METRIC_METADATA_TYPE_OPTIONS}
-						value={metricMetadataState.type}
+						options={Object.entries(METRIC_TYPE_VALUES_MAP).map(([key]) => ({
+							value: key,
+							label: METRIC_TYPE_LABEL_MAP[key as MetricType],
+						}))}
+						value={metricMetadata.metricType}
 						onChange={(value): void => {
-							setMetricMetadataState((prev) => ({
+							setMetricMetadata((prev) => ({
 								...prev,
-								type: value,
+								metricType: value as MetricType,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === TableFields.UNIT) {
+			if (field.key === 'unit') {
 				return (
 					<YAxisUnitSelector
-						value={metricMetadataState.unit}
+						value={metricMetadata.unit}
 						onChange={(value): void => {
-							setMetricMetadataState((prev) => ({ ...prev, unit: value }));
+							setMetricMetadata((prev) => ({ ...prev, unit: value }));
 						}}
 						data-testid="unit-select"
 						source={YAxisSource.EXPLORER}
 					/>
 				);
 			}
-			if (field.key === TableFields.Temporality) {
-				const temporalityValue =
-					metricMetadataState.temporality === MetrictypesTemporalityDTO.unspecified
-						? undefined
-						: metricMetadataState.temporality;
+			if (field.key === 'temporality') {
 				return (
 					<Select
 						data-testid="temporality-select"
-						options={METRIC_METADATA_TEMPORALITY_OPTIONS}
-						value={temporalityValue}
+						options={Object.values(Temporality).map((key) => ({
+							value: key,
+							label: key,
+						}))}
+						value={metricMetadata.temporality}
 						onChange={(value): void => {
-							setMetricMetadataState((prev) => ({
+							setMetricMetadata((prev) => ({
 								...prev,
-								temporality: value,
+								temporality: value as Temporality,
 							}));
 						}}
 					/>
 				);
 			}
-			if (field.key === TableFields.DESCRIPTION) {
+			if (field.key === 'description') {
 				return (
 					<Input
 						data-testid="description-input"
 						name={field.key}
-						defaultValue={metricMetadataState.description}
+						defaultValue={
+							metricMetadata[
+								field.key as Exclude<keyof UpdateMetricMetadataProps, 'isMonotonic'>
+							]
+						}
 						onChange={(e): void => {
-							setMetricMetadataState((prev) => ({
+							setMetricMetadata((prev) => ({
 								...prev,
 								[field.key]: e.target.value,
 							}));
@@ -190,7 +164,7 @@ function Metadata({
 			}
 			return <FieldRenderer field="-" />;
 		},
-		[isEditing, metadata?.unit, metricMetadataState, renderUneditableField],
+		[isEditing, metadata?.unit, metricMetadata, renderUneditableField],
 	);
 
 	const columns: ColumnsType<DataType> = useMemo(
@@ -227,14 +201,18 @@ function Metadata({
 	const handleSave = useCallback(() => {
 		updateMetricMetadata(
 			{
-				pathParams: {
-					metricName: metricName ?? '',
+				metricName,
+				payload: {
+					...metricMetadata,
+					isMonotonic: determineIsMonotonic(
+						metricMetadata.metricType,
+						metricMetadata.temporality,
+					),
 				},
-				data: transformUpdateMetricMetadataRequest(metricName, metricMetadataState),
 			},
 			{
 				onSuccess: (response): void => {
-					if (response.status === 200) {
+					if (response?.statusCode === 200) {
 						logEvent(MetricsExplorerEvents.MetricMetadataUpdated, {
 							[MetricsExplorerEventKeys.MetricName]: metricName,
 							[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -243,52 +221,32 @@ function Metadata({
 						notifications.success({
 							message: 'Metadata updated successfully',
 						});
+						refetchMetricDetails();
 						setIsEditing(false);
-						// 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,
-						});
+						queryClient.invalidateQueries(['metricsList']);
 					} else {
 						notifications.error({
-							message: METRIC_METADATA_UPDATE_ERROR_MESSAGE,
+							message:
+								'Failed to update metadata, please try again. If the issue persists, please contact support.',
 						});
 					}
 				},
-				onError: (error): void => {
-					const errorMessage = (error as AxiosError<RenderErrorResponseDTO>).response
-						?.data.error?.message;
+				onError: (): void =>
 					notifications.error({
-						message: errorMessage || METRIC_METADATA_UPDATE_ERROR_MESSAGE,
-					});
-				},
+						message:
+							'Failed to update metadata, please try again. If the issue persists, please contact support.',
+					}),
 			},
 		);
 	}, [
 		updateMetricMetadata,
 		metricName,
-		metricMetadataState,
+		metricMetadata,
 		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 (
@@ -296,7 +254,10 @@ function Metadata({
 					<Button
 						className="action-button"
 						type="text"
-						onClick={cancelEdit}
+						onClick={(e): void => {
+							e.stopPropagation();
+							setIsEditing(false);
+						}}
 						disabled={isUpdatingMetricsMetadata}
 					>
 						<X size={14} />
@@ -333,7 +294,7 @@ function Metadata({
 				</Button>
 			</div>
 		);
-	}, [isEditing, isUpdatingMetricsMetadata, cancelEdit, handleSave]);
+	}, [handleSave, isEditing, isUpdatingMetricsMetadata]);
 
 	const items = useMemo(
 		() => [
@@ -360,14 +321,6 @@ 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,7 +39,6 @@
 		gap: 12px;
 
 		.metric-details-content-grid {
-			height: 50px;
 			.labels-row,
 			.values-row {
 				display: grid;
@@ -73,7 +72,6 @@
 		.dashboards-and-alerts-popover-container {
 			display: flex;
 			gap: 16px;
-			height: 32px;
 
 			.dashboards-and-alerts-popover {
 				border-radius: 20px;
@@ -104,14 +102,6 @@
 			}
 		}
 
-		.metrics-metadata-skeleton-container {
-			height: 330px;
-		}
-
-		.all-attributes-skeleton-container {
-			height: 600px;
-		}
-
 		.metrics-accordion {
 			.ant-table-body {
 				&::-webkit-scrollbar {
@@ -158,6 +148,7 @@
 
 				.all-attributes-search-input {
 					width: 300px;
+					border: 1px solid var(--bg-slate-300);
 				}
 			}
 
@@ -170,7 +161,6 @@
 							.ant-typography:first-child {
 								font-family: 'Geist Mono';
 								color: var(--bg-robin-400);
-								background-color: transparent;
 							}
 						}
 						.all-attributes-contribution {
@@ -247,7 +237,6 @@
 			}
 
 			.metric-metadata-value {
-				height: 67px;
 				background: rgba(22, 25, 34, 0.4);
 				overflow-x: scroll;
 				.field-renderer-container {
@@ -341,26 +330,18 @@
 	.metric-details-content {
 		.metrics-accordion {
 			.metrics-accordion-header {
-				.action-menu {
-					.action-button {
-						.ant-typography {
-							color: var(--bg-slate-400);
-						}
+				.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-vanilla-200);
+							color: var(--bg-slate-400);
 							background-color: var(--bg-robin-300);
 						}
 					}

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

@@ -1,8 +1,16 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Empty, Typography } from 'antd';
+import {
+	Button,
+	Divider,
+	Drawer,
+	Empty,
+	Skeleton,
+	Tooltip,
+	Typography,
+} from 'antd';
 import logEvent from 'api/common/logEvent';
-import { useGetMetricMetadata } from 'api/generated/services/metrics';
+import { useGetMetricDetails } from 'hooks/metricsExplorer/useGetMetricDetails';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 
@@ -11,12 +19,16 @@ 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 { getMetricDetailsQuery } from './utils';
+import {
+	formatNumberToCompactFormat,
+	formatTimestampToReadableDate,
+	getMetricDetailsQuery,
+} from './utils';
 
 import './MetricDetails.styles.scss';
 import '../Summary/Summary.styles.scss';
@@ -31,52 +43,55 @@ function MetricDetails({
 	const { handleExplorerTabChange } = useHandleExplorerTabChange();
 
 	const {
-		data: metricMetadataResponse,
-		isLoading: isLoadingMetricMetadata,
-		isError: isErrorMetricMetadata,
-	} = useGetMetricMetadata(
-		{
-			metricName: metricName ?? '',
-		},
-		{
-			query: {
-				enabled: !!metricName,
-			},
-		},
-	);
+		data,
+		isLoading,
+		isFetching,
+		error: metricDetailsError,
+		refetch: refetchMetricDetails,
+	} = useGetMetricDetails(metricName ?? '', {
+		enabled: !!metricName,
+	});
 
-	const metadata = useMemo(() => {
-		if (
-			!metricMetadataResponse ||
-			!metricMetadataResponse.data ||
-			!metricMetadataResponse.data.data
-		) {
+	const metric = data?.payload?.data;
+
+	const lastReceived = useMemo(() => {
+		if (!metric) {
 			return null;
 		}
-		const {
-			type,
-			description,
-			unit,
-			temporality,
-			isMonotonic,
-		} = metricMetadataResponse.data.data;
+		return formatTimestampToReadableDate(metric.lastReceived);
+	}, [metric]);
 
-		return {
-			type,
-			description,
-			unit,
-			temporality,
-			isMonotonic,
-		};
-	}, [metricMetadataResponse]);
+	const showInspectFeature = useMemo(
+		() => isInspectEnabled(metric?.metadata?.metric_type),
+		[metric],
+	);
 
-	const showInspectFeature = useMemo(() => isInspectEnabled(metadata?.type), [
-		metadata,
-	]);
+	const isMetricDetailsLoading = isLoading || isFetching;
+
+	const timeSeries = useMemo(() => {
+		if (!metric) {
+			return null;
+		}
+		const timeSeriesActive = formatNumberToCompactFormat(metric.timeSeriesActive);
+		const timeSeriesTotal = formatNumberToCompactFormat(metric.timeSeriesTotal);
+
+		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]);
 
 	const goToMetricsExplorerwithSelectedMetric = useCallback(() => {
 		if (metricName) {
-			const compositeQuery = getMetricDetailsQuery(metricName, metadata?.type);
+			const compositeQuery = getMetricDetailsQuery(
+				metricName,
+				metric?.metadata?.metric_type,
+			);
 			handleExplorerTabChange(
 				PANEL_TYPES.TIME_SERIES,
 				{
@@ -92,7 +107,9 @@ function MetricDetails({
 				[MetricsExplorerEventKeys.Modal]: 'metric-details',
 			});
 		}
-	}, [metricName, handleExplorerTabChange, metadata?.type]);
+	}, [metricName, handleExplorerTabChange, metric?.metadata?.metric_type]);
+
+	const isMetricDetailsError = metricDetailsError || !metric;
 
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.ModalOpened, {
@@ -100,10 +117,6 @@ function MetricDetails({
 		});
 	}, []);
 
-	if (!metricName) {
-		return <Empty description="Metric not found" />;
-	}
-
 	return (
 		<Drawer
 			width="60%"
@@ -111,13 +124,13 @@ function MetricDetails({
 				<div className="metric-details-header">
 					<div className="metric-details-title">
 						<Divider type="vertical" />
-						<Typography.Text>{metricName}</Typography.Text>
+						<Typography.Text>{metric?.name}</Typography.Text>
 					</div>
 					<div className="metric-details-header-buttons">
 						<Button
 							onClick={goToMetricsExplorerwithSelectedMetric}
 							icon={<Compass size={16} />}
-							disabled={!metricName || isLoadingMetricMetadata}
+							disabled={!metricName}
 							data-testid="open-in-explorer-button"
 						>
 							Open in Explorer
@@ -127,11 +140,10 @@ function MetricDetails({
 							<Button
 								className="inspect-metrics-button"
 								aria-label="Inspect Metric"
-								disabled={!metricName || isLoadingMetricMetadata}
 								icon={<Crosshair size={18} />}
 								onClick={(): void => {
-									if (metricName) {
-										openInspectModal(metricName);
+									if (metric?.name) {
+										openInspectModal(metric.name);
 									}
 								}}
 								data-testid="inspect-metric-button"
@@ -151,17 +163,60 @@ function MetricDetails({
 			destroyOnClose
 			closeIcon={<X size={16} />}
 		>
-			<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>
+			{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>
+			)}
 		</Drawer>
 	);
 }

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

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

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

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

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

@@ -1,85 +0,0 @@
-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,25 +1,16 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-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 { fireEvent, render, screen } from '@testing-library/react';
 import { Temporality } from 'api/metricsExplorer/getMetricDetails';
-import { AxiosResponse } from 'axios';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 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', () => ({
@@ -81,18 +72,13 @@ jest.mock('react-query', () => ({
 	}),
 }));
 
-const mockUseUpdateMetricMetadataHook = jest.spyOn(
-	metricsExplorerHooks,
-	'useUpdateMetricMetadata',
-);
-type UseUpdateMetricMetadataResult = ReturnType<
-	typeof metricsExplorerHooks.useUpdateMetricMetadata
->;
 const mockUseUpdateMetricMetadata = jest.fn();
-
-const mockMetricMetadata = transformMetricMetadata(
-	(getMockMetricMetadataData().data as AxiosResponse<GetMetricMetadata200>).data,
-) as MetricMetadata;
+jest
+	.spyOn(useUpdateMetricMetadataHooks, 'useUpdateMetricMetadata')
+	.mockReturnValue({
+		mutate: mockUseUpdateMetricMetadata,
+		isLoading: false,
+	} as any);
 
 const mockErrorNotification = jest.fn();
 const mockSuccessNotification = jest.fn();
@@ -104,47 +90,46 @@ 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}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		expect(screen.getByText('Metric Type')).toBeInTheDocument();
-		expect(screen.getByText('Gauge')).toBeInTheDocument();
+		expect(screen.getByText(mockMetricMetadata.metric_type)).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('Delta')).toBeInTheDocument();
+		expect(screen.getByText(mockMetricMetadata.temporality)).toBeInTheDocument();
 	});
 
-	it('editing the metadata should show the form inputs', async () => {
+	it('editing the metadata should show the form inputs', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		expect(screen.getByTestId('metric-type-select')).toBeInTheDocument();
 		expect(screen.getByTestId('temporality-select')).toBeInTheDocument();
@@ -159,47 +144,52 @@ describe('Metadata', () => {
 					...mockMetricMetadata,
 					unit: '',
 				}}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
 		expect(metricDescriptionInput).toBeInTheDocument();
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const metricTypeSelect = screen.getByTestId('metric-type-select');
 		expect(metricTypeSelect).toBeInTheDocument();
-		await userEvent.selectOptions(metricTypeSelect, MetrictypesTypeDTO.sum);
+		fireEvent.change(metricTypeSelect, {
+			target: { value: MetricType.SUM },
+		});
 
 		const temporalitySelect = screen.getByTestId('temporality-select');
 		expect(temporalitySelect).toBeInTheDocument();
-		await userEvent.selectOptions(temporalitySelect, Temporality.CUMULATIVE);
+		fireEvent.change(temporalitySelect, {
+			target: { value: Temporality.CUMULATIVE },
+		});
 
 		const unitSelect = screen.getByTestId('unit-select');
 		expect(unitSelect).toBeInTheDocument();
-		await userEvent.selectOptions(unitSelect, 'By');
+		fireEvent.change(unitSelect, {
+			target: { value: 'By' },
+		});
 
 		const saveButton = screen.getByText('Save');
 		expect(saveButton).toBeInTheDocument();
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		expect(mockUseUpdateMetricMetadata).toHaveBeenCalledWith(
 			expect.objectContaining({
-				data: expect.objectContaining({
-					type: MetrictypesTypeDTO.sum,
-					temporality: MetrictypesTemporalityDTO.cumulative,
+				metricName: mockMetricName,
+				payload: expect.objectContaining({
+					description: 'Updated description',
+					metricType: MetricType.SUM,
+					temporality: Temporality.CUMULATIVE,
 					unit: 'By',
 					isMonotonic: true,
 				}),
-				pathParams: {
-					metricName: mockMetricName,
-				},
 			}),
 			expect.objectContaining({
 				onSuccess: expect.any(Function),
@@ -213,28 +203,29 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const saveButton = screen.getByText('Save');
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ status: 200 });
+		onSuccessCallback({ statusCode: 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 () => {
@@ -242,24 +233,24 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const saveButton = screen.getByText('Save');
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		const onSuccessCallback =
 			mockUseUpdateMetricMetadata.mock.calls[0][1].onSuccess;
-		onSuccessCallback({ status: 500 });
+		onSuccessCallback({ statusCode: 500 });
 
 		expect(mockErrorNotification).toHaveBeenCalledWith({
 			message:
@@ -272,20 +263,20 @@ describe('Metadata', () => {
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const metricDescriptionInput = screen.getByTestId('description-input');
-		await userEvent.clear(metricDescriptionInput);
-		await userEvent.type(metricDescriptionInput, 'Updated description');
+		fireEvent.change(metricDescriptionInput, {
+			target: { value: 'Updated description' },
+		});
 
 		const saveButton = screen.getByText('Save');
-		await userEvent.click(saveButton);
+		fireEvent.click(saveButton);
 
 		const onErrorCallback = mockUseUpdateMetricMetadata.mock.calls[0][1].onError;
 
@@ -298,41 +289,39 @@ describe('Metadata', () => {
 		});
 	});
 
-	it('cancel button should cancel the edit mode', async () => {
+	it('cancel button should cancel the edit mode', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const cancelButton = screen.getByText('Cancel');
 		expect(cancelButton).toBeInTheDocument();
-		await userEvent.click(cancelButton);
+		fireEvent.click(cancelButton);
 
 		const editButton2 = screen.getByText('Edit');
 		expect(editButton2).toBeInTheDocument();
 	});
 
-	it('should not allow editing of unit if it is already set', async () => {
+	it('should not allow editing of unit if it is already set', () => {
 		render(
 			<Metadata
 				metricName={mockMetricName}
 				metadata={mockMetricMetadata}
-				isErrorMetricMetadata={false}
-				isLoadingMetricMetadata={false}
+				refetchMetricDetails={mockRefetchMetricDetails}
 			/>,
 		);
 
 		const editButton = screen.getByText('Edit');
 		expect(editButton).toBeInTheDocument();
-		await userEvent.click(editButton);
+		fireEvent.click(editButton);
 
 		const unitSelect = screen.queryByTestId('unit-select');
 		expect(unitSelect).not.toBeInTheDocument();

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

@@ -1,16 +1,68 @@
-import { render, screen } from '@testing-library/react';
-import * as metricsExplorerHooks from 'api/generated/services/metrics';
+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 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')
@@ -36,50 +88,7 @@ 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
@@ -92,15 +101,27 @@ describe('MetricDetails', () => {
 		);
 
 		expect(screen.getByText(mockMetricName)).toBeInTheDocument();
-		expect(screen.getByTestId('all-attributes')).toBeInTheDocument();
+		expect(screen.getByText(mockMetricDescription)).toBeInTheDocument();
 		expect(
-			screen.getByTestId('dashboards-and-alerts-popover'),
+			screen.getByText(getUniversalNameFromMetricUnit(mockMetricData.unit)),
 		).toBeInTheDocument();
-		expect(screen.getByTestId('highlights')).toBeInTheDocument();
-		expect(screen.getByTestId('metadata')).toBeInTheDocument();
 	});
 
-	it('renders the "open in explorer" and "inspect" buttons', async () => {
+	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);
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
@@ -114,24 +135,93 @@ describe('MetricDetails', () => {
 		expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
 		expect(screen.getByTestId('inspect-metric-button')).toBeInTheDocument();
 
-		await userEvent.click(screen.getByTestId('open-in-explorer-button'));
+		fireEvent.click(screen.getByTestId('open-in-explorer-button'));
 		expect(mockHandleExplorerTabChange).toHaveBeenCalled();
 
-		await userEvent.click(screen.getByTestId('inspect-metric-button'));
+		fireEvent.click(screen.getByTestId('inspect-metric-button'));
 		expect(mockOpenInspectModal).toHaveBeenCalled();
 	});
 
-	it('should render empty state when metric name is not provided', () => {
+	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);
+
 		render(
 			<MetricDetails
 				onClose={mockOnClose}
 				isOpen
-				metricName={null}
+				metricName={mockMetricName}
 				isModalTimeSelection
 				openInspectModal={mockOpenInspectModal}
 			/>,
 		);
 
-		expect(screen.getByText('Metric not found')).toBeInTheDocument();
+		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();
 	});
 });

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

@@ -1,175 +0,0 @@
-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,7 +1,5 @@
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+import { Temporality } from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 import {
 	determineIsMonotonic,
@@ -12,48 +10,35 @@ import {
 describe('MetricDetails utils', () => {
 	describe('determineIsMonotonic', () => {
 		it('should return true for histogram metrics', () => {
-			expect(determineIsMonotonic(MetrictypesTypeDTO.histogram)).toBe(true);
+			expect(determineIsMonotonic(MetricType.HISTOGRAM)).toBe(true);
 		});
 
 		it('should return true for exponential histogram metrics', () => {
-			expect(determineIsMonotonic(MetrictypesTypeDTO.exponentialhistogram)).toBe(
+			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(
 				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(
-					MetrictypesTypeDTO.sum,
-					MetrictypesTemporalityDTO.delta,
-				),
-			).toBe(false);
+			expect(determineIsMonotonic(MetricType.SUM, Temporality.DELTA)).toBe(false);
 		});
 
 		it('should return false by default', () => {
-			expect(
-				determineIsMonotonic(
-					'' as MetrictypesTypeDTO,
-					'' as MetrictypesTemporalityDTO,
-				),
-			).toBe(false);
+			expect(determineIsMonotonic('' as MetricType, '' as Temporality)).toBe(
+				false,
+			);
 		});
 	});
 
@@ -130,16 +115,13 @@ describe('MetricDetails utils', () => {
 		const API_GATEWAY = 'api-gateway';
 
 		it('should create correct query for SUM metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUM);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('rate');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('rate');
@@ -147,16 +129,13 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for GAUGE metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.gauge,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.GAUGE);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.gauge,
+				MetricType.GAUGE,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('avg');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('avg');
@@ -164,16 +143,13 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for SUMMARY metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.summary,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.SUMMARY);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.summary,
+				MetricType.SUMMARY,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -181,16 +157,13 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should create correct query for HISTOGRAM metric type', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.histogram,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.HISTOGRAM);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.histogram,
+				MetricType.HISTOGRAM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -200,14 +173,14 @@ describe('MetricDetails utils', () => {
 		it('should create correct query for EXPONENTIAL_HISTOGRAM metric type', () => {
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.exponentialhistogram,
+				MetricType.EXPONENTIAL_HISTOGRAM,
 			);
 
 			expect(query.builder.queryData[0]?.aggregateAttribute?.key).toBe(
 				TEST_METRIC_NAME,
 			);
 			expect(query.builder.queryData[0]?.aggregateAttribute?.type).toBe(
-				MetrictypesTypeDTO.exponentialhistogram,
+				MetricType.EXPONENTIAL_HISTOGRAM,
 			);
 			expect(query.builder.queryData[0]?.aggregateOperator).toBe('noop');
 			expect(query.builder.queryData[0]?.timeAggregation).toBe('noop');
@@ -230,7 +203,7 @@ describe('MetricDetails utils', () => {
 			const filter = { key: 'service', value: API_GATEWAY };
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 				filter,
 			);
 
@@ -248,7 +221,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'service';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 				undefined,
 				groupBy,
 			);
@@ -263,7 +236,7 @@ describe('MetricDetails utils', () => {
 			const groupBy = 'endpoint';
 			const query = getMetricDetailsQuery(
 				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
+				MetricType.SUM,
 				filter,
 				groupBy,
 			);
@@ -277,10 +250,7 @@ describe('MetricDetails utils', () => {
 		});
 
 		it('should not include filters or groupBy when not provided', () => {
-			const query = getMetricDetailsQuery(
-				TEST_METRIC_NAME,
-				MetrictypesTypeDTO.sum,
-			);
+			const query = getMetricDetailsQuery(TEST_METRIC_NAME, MetricType.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,48 +1,6 @@
-import {
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
 export const METRIC_METADATA_KEYS = {
 	description: 'Description',
 	unit: 'Unit',
-	type: 'Metric Type',
+	metric_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,12 +1,10 @@
 import {
-	MetricsexplorertypesMetricAlertDTO,
-	MetricsexplorertypesMetricAttributeDTO,
-	MetricsexplorertypesMetricDashboardDTO,
-	MetricsexplorertypesMetricHighlightsResponseDTO,
-	MetricsexplorertypesMetricMetadataDTO,
-	MetrictypesTemporalityDTO,
-	MetrictypesTypeDTO,
-} from 'api/generated/services/sigNoz.schemas';
+	MetricDetails,
+	MetricDetailsAlert,
+	MetricDetailsAttribute,
+	MetricDetailsDashboard,
+} from 'api/metricsExplorer/getMetricDetails';
+import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 export interface MetricDetailsProps {
 	onClose: () => void;
@@ -16,23 +14,21 @@ export interface MetricDetailsProps {
 	openInspectModal?: (metricName: string) => void;
 }
 
-export interface HighlightsProps {
-	metricName: string;
-}
 export interface DashboardsAndAlertsPopoverProps {
-	metricName: string;
+	dashboards: MetricDetailsDashboard[] | null;
+	alerts: MetricDetailsAlert[] | null;
 }
 
 export interface MetadataProps {
 	metricName: string;
-	metadata: MetricMetadata | null;
-	isErrorMetricMetadata: boolean;
-	isLoadingMetricMetadata: boolean;
+	metadata: MetricDetails['metadata'] | undefined;
+	refetchMetricDetails: () => void;
 }
 
 export interface AllAttributesProps {
+	attributes: MetricDetailsAttribute[];
 	metricName: string;
-	metricType: MetrictypesTypeDTO | undefined;
+	metricType: MetricType | undefined;
 }
 
 export interface AllAttributesValueProps {
@@ -40,27 +36,3 @@ 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',
-}

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

@@ -1,23 +1,12 @@
-import { UpdateMetricMetadataMutationBody } 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 { SpaceAggregation, TimeAggregation } from 'api/v5/v5';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 
-import { MetricMetadata, MetricMetadataState } from './types';
-
-export function formatTimestampToReadableDate(
-	timestamp: number | string | undefined,
-): string {
-	if (!timestamp) {
-		return '-';
-	}
+export function formatTimestampToReadableDate(timestamp: string): string {
 	const date = new Date(timestamp);
 	const now = new Date();
 	const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
@@ -50,10 +39,7 @@ export function formatTimestampToReadableDate(
 	return date.toLocaleDateString();
 }
 
-export function formatNumberToCompactFormat(num: number | undefined): string {
-	if (!num) {
-		return '-';
-	}
+export function formatNumberToCompactFormat(num: number): string {
 	return new Intl.NumberFormat('en-US', {
 		notation: 'compact',
 		maximumFractionDigits: 1,
@@ -61,30 +47,27 @@ export function formatNumberToCompactFormat(num: number | undefined): string {
 }
 
 export function determineIsMonotonic(
-	metricType: MetrictypesTypeDTO,
-	temporality?: MetrictypesTemporalityDTO,
+	metricType: MetricType,
+	temporality?: Temporality,
 ): boolean {
 	if (
-		metricType === MetrictypesTypeDTO.histogram ||
-		metricType === MetrictypesTypeDTO.exponentialhistogram
+		metricType === MetricType.HISTOGRAM ||
+		metricType === MetricType.EXPONENTIAL_HISTOGRAM
 	) {
 		return true;
 	}
-	if (
-		metricType === MetrictypesTypeDTO.gauge ||
-		metricType === MetrictypesTypeDTO.summary
-	) {
+	if (metricType === MetricType.GAUGE || metricType === MetricType.SUMMARY) {
 		return false;
 	}
-	if (metricType === MetrictypesTypeDTO.sum) {
-		return temporality === MetrictypesTemporalityDTO.cumulative;
+	if (metricType === MetricType.SUM) {
+		return temporality === Temporality.CUMULATIVE;
 	}
 	return false;
 }
 
 export function getMetricDetailsQuery(
 	metricName: string,
-	metricType: MetrictypesTypeDTO | undefined,
+	metricType: MetricType | undefined,
 	filter?: { key: string; value: string },
 	groupBy?: string,
 ): Query {
@@ -92,23 +75,23 @@ export function getMetricDetailsQuery(
 	let spaceAggregation;
 	let aggregateOperator;
 	switch (metricType) {
-		case MetrictypesTypeDTO.sum:
+		case MetricType.SUM:
 			timeAggregation = 'rate';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'rate';
 			break;
-		case MetrictypesTypeDTO.gauge:
+		case MetricType.GAUGE:
 			timeAggregation = 'avg';
 			spaceAggregation = 'avg';
 			aggregateOperator = 'avg';
 			break;
-		case MetrictypesTypeDTO.summary:
+		case MetricType.SUMMARY:
 			timeAggregation = 'noop';
 			spaceAggregation = 'sum';
 			aggregateOperator = 'noop';
 			break;
-		case MetrictypesTypeDTO.histogram:
-		case MetrictypesTypeDTO.exponentialhistogram:
+		case MetricType.HISTOGRAM:
+		case MetricType.EXPONENTIAL_HISTOGRAM:
 			timeAggregation = 'noop';
 			spaceAggregation = 'p90';
 			aggregateOperator = 'noop';
@@ -177,38 +160,3 @@ export function getMetricDetailsQuery(
 		},
 	};
 }
-
-export function transformMetricMetadata(
-	apiData: GetMetricMetadata200 | undefined,
-): MetricMetadata | null {
-	if (!apiData || !apiData.data) {
-		return null;
-	}
-	const { type, description, unit, temporality, isMonotonic } = apiData.data;
-
-	return {
-		type,
-		description,
-		unit,
-		temporality,
-		isMonotonic,
-	};
-}
-
-export function transformUpdateMetricMetadataRequest(
-	metricName: string,
-	metricMetadata: MetricMetadataState,
-): UpdateMetricMetadataMutationBody {
-	return {
-		metricName: metricName,
-		type: metricMetadata.type,
-		description: metricMetadata.description,
-		unit: metricMetadata.unit,
-		temporality:
-			metricMetadata.temporality ?? MetrictypesTemporalityDTO.unspecified,
-		isMonotonic: determineIsMonotonic(
-			metricMetadata.type,
-			metricMetadata.temporality,
-		),
-	};
-}

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -5,7 +5,6 @@ import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
 import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
@@ -129,7 +128,7 @@ function Summary(): JSX.Element {
 	} = useGetMetricsList(metricsListQuery, {
 		enabled: !!metricsListQuery && !isInspectModalOpen,
 		queryKey: [
-			REACT_QUERY_KEY.GET_METRICS_LIST,
+			'metricsList',
 			queryFiltersWithoutId,
 			orderBy,
 			pageSize,

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

@@ -1,4 +1,3 @@
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
 import { TreemapViewType } from './types';
@@ -26,16 +25,7 @@ export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'Exp. Histogram',
 };
 
-export const METRIC_TYPE_VIEW_LABEL_MAP: Record<MetrictypesTypeDTO, string> = {
-	[MetrictypesTypeDTO.sum]: 'Sum',
-	[MetrictypesTypeDTO.gauge]: 'Gauge',
-	[MetrictypesTypeDTO.histogram]: 'Histogram',
-	[MetrictypesTypeDTO.summary]: 'Summary',
-	[MetrictypesTypeDTO.exponentialhistogram]: 'Exp. Histogram',
-};
-
-// TODO(@amlannandy): To remove this once API migration is complete
-export const METRIC_TYPE_VALUES_MAP: Record<MetricType, string> = {
+export const METRIC_TYPE_VALUES_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
 	[MetricType.HISTOGRAM]: 'Histogram',
@@ -43,14 +33,6 @@ export const METRIC_TYPE_VALUES_MAP: Record<MetricType, string> = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'ExponentialHistogram',
 };
 
-export const METRIC_TYPE_VIEW_VALUES_MAP: Record<MetrictypesTypeDTO, string> = {
-	[MetrictypesTypeDTO.sum]: 'Sum',
-	[MetrictypesTypeDTO.gauge]: 'Gauge',
-	[MetrictypesTypeDTO.histogram]: 'Histogram',
-	[MetrictypesTypeDTO.summary]: 'Summary',
-	[MetrictypesTypeDTO.exponentialhistogram]: 'ExponentialHistogram',
-};
-
 export const IS_METRIC_DETAILS_OPEN_KEY = 'isMetricDetailsOpen';
 export const IS_INSPECT_MODAL_OPEN_KEY = 'isInspectModalOpen';
 export const SELECTED_METRIC_NAME_KEY = 'selectedMetricName';

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

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
-import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import {
 	MetricsListItemData,
 	MetricsListPayload,
@@ -22,7 +21,7 @@ import {
 } from 'lucide-react';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { METRIC_TYPE_LABEL_MAP, METRIC_TYPE_VIEW_LABEL_MAP } from './constants';
+import { METRIC_TYPE_LABEL_MAP } from './constants';
 import MetricNameSearch from './MetricNameSearch';
 import MetricTypeSearch from './MetricTypeSearch';
 import { MetricsListItemRowData, TreemapTile, TreemapViewType } from './types';
@@ -144,60 +143,6 @@ export function MetricTypeRenderer({
 	);
 }
 
-export function MetricTypeViewRenderer({
-	type,
-}: {
-	type: MetrictypesTypeDTO;
-}): JSX.Element {
-	const [icon, color] = useMemo(() => {
-		switch (type) {
-			case MetrictypesTypeDTO.sum:
-				return [
-					<Diff key={type} size={12} color={Color.BG_ROBIN_500} />,
-					Color.BG_ROBIN_500,
-				];
-			case MetrictypesTypeDTO.gauge:
-				return [
-					<Gauge key={type} size={12} color={Color.BG_SAKURA_500} />,
-					Color.BG_SAKURA_500,
-				];
-			case MetrictypesTypeDTO.histogram:
-				return [
-					<BarChart2 key={type} size={12} color={Color.BG_SIENNA_500} />,
-					Color.BG_SIENNA_500,
-				];
-			case MetrictypesTypeDTO.summary:
-				return [
-					<BarChartHorizontal key={type} size={12} color={Color.BG_FOREST_500} />,
-					Color.BG_FOREST_500,
-				];
-			case MetrictypesTypeDTO.exponentialhistogram:
-				return [
-					<BarChart key={type} size={12} color={Color.BG_AQUA_500} />,
-					Color.BG_AQUA_500,
-				];
-			default:
-				return [null, ''];
-		}
-	}, [type]);
-
-	return (
-		<div
-			className="metric-type-renderer"
-			style={{
-				backgroundColor: `${color}33`,
-				border: `1px solid ${color}`,
-				color,
-			}}
-		>
-			{icon}
-			<Typography.Text style={{ color, fontSize: 12 }}>
-				{METRIC_TYPE_VIEW_LABEL_MAP[type]}
-			</Typography.Text>
-		</div>
-	);
-}
-
 function ValidateRowValueWrapper({
 	value,
 	children,
@@ -215,9 +160,6 @@ export const formatNumberIntoHumanReadableFormat = (
 	num: number,
 	addPlusSign = true,
 ): string => {
-	if (!num) {
-		return '-';
-	}
 	function format(num: number, divisor: number, suffix: string): string {
 		const value = num / divisor;
 		return value % 1 === 0

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphContainer.tsx

@@ -51,28 +51,6 @@ function WidgetGraphContainer({
 		return <Spinner size="large" tip="Loading..." />;
 	}
 
-	if (
-		selectedGraph !== PANEL_TYPES.LIST &&
-		selectedGraph !== PANEL_TYPES.VALUE &&
-		queryResponse.data?.payload.data?.result?.length === 0
-	) {
-		return (
-			<NotFoundContainer>
-				<Typography>No Data</Typography>
-			</NotFoundContainer>
-		);
-	}
-	if (
-		(selectedGraph === PANEL_TYPES.LIST || selectedGraph === PANEL_TYPES.VALUE) &&
-		queryResponse.data?.payload?.data?.newResult?.data?.result?.length === 0
-	) {
-		return (
-			<NotFoundContainer>
-				<Typography>No Data</Typography>
-			</NotFoundContainer>
-		);
-	}
-
 	if (queryResponse.isIdle) {
 		return (
 			<NotFoundContainer>

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

@@ -26,7 +26,7 @@ jest.mock('lib/history', () => ({
 // API Endpoints
 const ORG_PREFERENCES_ENDPOINT = '*/api/v1/org/preferences/list';
 const UPDATE_ORG_PREFERENCE_ENDPOINT = '*/api/v1/org/preferences/name/update';
-const UPDATE_PROFILE_ENDPOINT = '*/api/gateway/v2/profiles/me';
+const UPDATE_PROFILE_ENDPOINT = '*/api/v2/zeus/profiles';
 const EDIT_ORG_ENDPOINT = '*/api/v2/orgs/me';
 const INVITE_USERS_ENDPOINT = '*/api/v1/invite/bulk/create';
 
@@ -277,6 +277,46 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 
+		it('fires PUT to /zeus/profiles and advances to step 4 on success', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			let profilePutCalled = false;
+
+			server.use(
+				rest.put(UPDATE_PROFILE_ENDPOINT, (_, res, ctx) => {
+					profilePutCalled = true;
+					return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
+				}),
+			);
+
+			render(<OnboardingQuestionaire />);
+
+			// Navigate to step 3
+			await user.click(screen.getByLabelText(/datadog/i));
+			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
+			await user.click(screen.getByRole('button', { name: /next/i }));
+
+			await user.type(
+				await screen.findByPlaceholderText(/e\.g\., googling/i),
+				'Found via Google',
+			);
+			await user.click(screen.getByLabelText(/lowering observability costs/i));
+			await user.click(screen.getByRole('button', { name: /next/i }));
+
+			// Click "I'll do this later" on step 3 — triggers PUT /zeus/profiles
+			await user.click(
+				await screen.findByRole('button', { name: /i'll do this later/i }),
+			);
+
+			await waitFor(() => {
+				expect(profilePutCalled).toBe(true);
+				// Step 3 content is gone — successfully advanced to step 4
+				expect(
+					screen.queryByText(/what does your scale approximately look like/i),
+				).not.toBeInTheDocument();
+			});
+		});
+
 		it('shows do later button', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from 'react-query';
+import { toast } from '@signozhq/sonner';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import logEvent from 'api/common/logEvent';
-import updateProfileAPI from 'api/onboarding/updateProfile';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { usePutProfile } from 'api/generated/services/zeus';
 import listOrgPreferences from 'api/v1/org/preferences/list';
 import updateOrgPreferenceAPI from 'api/v1/org/preferences/name/update';
 import { AxiosError } from 'axios';
@@ -121,20 +123,9 @@ function OnboardingQuestionaire(): JSX.Element {
 		optimiseSignozDetails.hostsPerDay === 0 &&
 		optimiseSignozDetails.services === 0;
 
-	const { mutate: updateProfile, isLoading: isUpdatingProfile } = useMutation(
-		updateProfileAPI,
-		{
-			onSuccess: () => {
-				setCurrentStep(4);
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-
-				// Allow user to proceed even if API fails
-				setCurrentStep(4);
-			},
-		},
-	);
+	const { mutate: updateProfile, isLoading: isUpdatingProfile } = usePutProfile<
+		AxiosError<RenderErrorResponseDTO>
+	>();
 
 	const { mutate: updateOrgPreference } = useMutation(updateOrgPreferenceAPI, {
 		onSuccess: () => {
@@ -153,29 +144,44 @@ function OnboardingQuestionaire(): JSX.Element {
 			nextPageID: 4,
 		});
 
-		updateProfile({
-			uses_otel: orgDetails?.usesOtel as boolean,
-			has_existing_observability_tool: orgDetails?.usesObservability as boolean,
-			existing_observability_tool:
-				orgDetails?.observabilityTool === 'Others'
-					? (orgDetails?.otherTool as string)
-					: (orgDetails?.observabilityTool as string),
-			where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
-			timeline_for_migrating_to_signoz: orgDetails?.migrationTimeline as string,
-			reasons_for_interest_in_signoz: signozDetails?.interestInSignoz?.includes(
-				'Others',
-			)
-				? ([
-						...(signozDetails?.interestInSignoz?.filter(
-							(item) => item !== 'Others',
-						) || []),
-						signozDetails?.otherInterestInSignoz,
-				  ] as string[])
-				: (signozDetails?.interestInSignoz as string[]),
-			logs_scale_per_day_in_gb: optimiseSignozDetails?.logsPerDay as number,
-			number_of_hosts: optimiseSignozDetails?.hostsPerDay as number,
-			number_of_services: optimiseSignozDetails?.services as number,
-		});
+		updateProfile(
+			{
+				data: {
+					uses_otel: orgDetails?.usesOtel as boolean,
+					has_existing_observability_tool: orgDetails?.usesObservability as boolean,
+					existing_observability_tool:
+						orgDetails?.observabilityTool === 'Others'
+							? (orgDetails?.otherTool as string)
+							: (orgDetails?.observabilityTool as string),
+					where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
+					timeline_for_migrating_to_signoz: orgDetails?.migrationTimeline as string,
+					reasons_for_interest_in_signoz: signozDetails?.interestInSignoz?.includes(
+						'Others',
+					)
+						? ([
+								...(signozDetails?.interestInSignoz?.filter(
+									(item) => item !== 'Others',
+								) || []),
+								signozDetails?.otherInterestInSignoz,
+						  ] as string[])
+						: (signozDetails?.interestInSignoz as string[]),
+					logs_scale_per_day_in_gb: optimiseSignozDetails?.logsPerDay as number,
+					number_of_hosts: optimiseSignozDetails?.hostsPerDay as number,
+					number_of_services: optimiseSignozDetails?.services as number,
+				},
+			},
+			{
+				onSuccess: () => {
+					setCurrentStep(4);
+				},
+				onError: (error: any) => {
+					toast.error(error?.message || SOMETHING_WENT_WRONG);
+
+					// Allow user to proceed even if API fails
+					setCurrentStep(4);
+				},
+			},
+		);
 	};
 
 	const handleOnboardingComplete = (): void => {

frontend/src/container/OrganizationSettings/AuthDomain/AuthDomain.styles.scss

@@ -7,6 +7,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+
+		.auth-domain-title {
+			margin: 0;
+			font-size: 20px;
+			font-weight: 600;
+		}
 	}
 }
 
@@ -15,5 +21,36 @@
 		display: flex;
 		flex-direction: row;
 		gap: 24px;
+
+		.auth-domain-list-action-link {
+			cursor: pointer;
+			color: var(--primary);
+			transition: color 0.3s;
+			border: none;
+			background: none;
+			padding: 0;
+			font-size: inherit;
+
+			&:hover {
+				opacity: 0.8;
+				text-decoration: underline;
+			}
+
+			&.delete {
+				color: var(--destructive);
+			}
+		}
+	}
+
+	.auth-domain-list-na {
+		padding-left: 6px;
+		color: var(--text-secondary);
+	}
+}
+
+.delete-ingestion-key-modal {
+	.delete-text {
+		color: var(--text);
+		margin: 0;
 	}
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.tsx

@@ -1,28 +1,38 @@
-import { useState } from 'react';
-import { Button, Form, Modal } from 'antd';
-import put from 'api/v1/domains/id/put';
-import post from 'api/v1/domains/post';
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { toast } from '@signozhq/sonner';
+import { Form, Modal } from 'antd';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import {
+	useCreateAuthDomain,
+	useUpdateAuthDomain,
+} from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	AuthtypesGoogleConfigDTO,
+	AuthtypesRoleMappingDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import { FeatureKeys } from 'constants/features';
 import { defaultTo } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-import { PostableAuthDomain } from 'types/api/v1/domains/post';
 
 import AuthnProviderSelector from './AuthnProviderSelector';
+import {
+	convertDomainMappingsToRecord,
+	convertGroupMappingsToRecord,
+	FormValues,
+	prepareInitialValues,
+} from './CreateEdit.utils';
 import ConfigureGoogleAuthAuthnProvider from './Providers/AuthnGoogleAuth';
 import ConfigureOIDCAuthnProvider from './Providers/AuthnOIDC';
 import ConfigureSAMLAuthnProvider from './Providers/AuthnSAML';
 
 import './CreateEdit.styles.scss';
-
-interface CreateOrEditProps {
-	isCreate: boolean;
-	onClose: () => void;
-	record?: GettableAuthDomain;
-}
-
 function configureAuthnProvider(
 	authnProvider: string,
 	isCreate: boolean,
@@ -39,64 +49,186 @@ function configureAuthnProvider(
 	}
 }
 
+interface CreateOrEditProps {
+	isCreate: boolean;
+	onClose: () => void;
+	record?: AuthtypesGettableAuthDomainDTO;
+}
+
 function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 	const { isCreate, record, onClose } = props;
-	const [form] = Form.useForm<PostableAuthDomain>();
+	const [form] = Form.useForm<FormValues>();
 	const [authnProvider, setAuthnProvider] = useState<string>(
 		record?.ssoType || '',
 	);
 
 	const { showErrorModal } = useErrorModal();
 	const { featureFlags } = useAppContext();
+
+	const handleError = useCallback(
+		(error: AxiosError<RenderErrorResponseDTO>): void => {
+			try {
+				ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+			} catch (apiError) {
+				showErrorModal(apiError as APIError);
+			}
+		},
+		[showErrorModal],
+	);
 	const samlEnabled =
 		featureFlags?.find((flag) => flag.name === FeatureKeys.SSO)?.active || false;
 
-	const onSubmitHandler = async (): Promise<void> => {
+	const {
+		mutate: createAuthDomain,
+		isLoading: isCreating,
+	} = useCreateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
+
+	const {
+		mutate: updateAuthDomain,
+		isLoading: isUpdating,
+	} = useUpdateAuthDomain<AxiosError<RenderErrorResponseDTO>>();
+
+	/**
+	 * Prepares Google Auth config for API payload
+	 */
+	const getGoogleAuthConfig = useCallback(():
+		| AuthtypesGoogleConfigDTO
+		| undefined => {
+		const config = form.getFieldValue('googleAuthConfig');
+		if (!config) {
+			return undefined;
+		}
+
+		const { domainToAdminEmailList, ...rest } = config;
+		const domainToAdminEmail = convertDomainMappingsToRecord(
+			domainToAdminEmailList,
+		);
+
+		return {
+			...rest,
+			...(domainToAdminEmail && { domainToAdminEmail }),
+		};
+	}, [form]);
+
+	// Prepares role mapping for API payload
+	const getRoleMapping = useCallback((): AuthtypesRoleMappingDTO | undefined => {
+		const roleMapping = form.getFieldValue('roleMapping');
+		if (!roleMapping) {
+			return undefined;
+		}
+
+		const { groupMappingsList, ...rest } = roleMapping;
+		const groupMappings = convertGroupMappingsToRecord(groupMappingsList);
+
+		// Only return roleMapping if there's meaningful content
+		const hasDefaultRole = !!rest.defaultRole;
+		const hasUseRoleAttribute = rest.useRoleAttribute === true;
+		const hasGroupMappings =
+			groupMappings && Object.keys(groupMappings).length > 0;
+
+		if (!hasDefaultRole && !hasUseRoleAttribute && !hasGroupMappings) {
+			return undefined;
+		}
+
+		return {
+			...rest,
+			...(groupMappings && { groupMappings }),
+		};
+	}, [form]);
+
+	const onSubmitHandler = useCallback(async (): Promise<void> => {
+		try {
+			await form.validateFields();
+		} catch {
+			return;
+		}
+
 		const name = form.getFieldValue('name');
-		const googleAuthConfig = form.getFieldValue('googleAuthConfig');
+		const googleAuthConfig = getGoogleAuthConfig();
 		const samlConfig = form.getFieldValue('samlConfig');
 		const oidcConfig = form.getFieldValue('oidcConfig');
+		const roleMapping = getRoleMapping();
 
-		try {
-			if (isCreate) {
-				await post({
-					name,
-					config: {
-						ssoEnabled: true,
-						ssoType: authnProvider,
-						googleAuthConfig,
-						samlConfig,
-						oidcConfig,
+		if (isCreate) {
+			createAuthDomain(
+				{
+					data: {
+						name,
+						config: {
+							ssoEnabled: true,
+							ssoType: authnProvider,
+							googleAuthConfig,
+							samlConfig,
+							oidcConfig,
+							roleMapping,
+						},
 					},
-				});
-			} else {
-				await put({
-					id: record?.id || '',
-					config: {
-						ssoEnabled: form.getFieldValue('ssoEnabled'),
-						ssoType: authnProvider,
-						googleAuthConfig,
-						samlConfig,
-						oidcConfig,
+				},
+				{
+					onSuccess: () => {
+						toast.success('Domain created successfully');
+						onClose();
 					},
-				});
+					onError: handleError,
+				},
+			);
+		} else {
+			if (!record?.id) {
+				return;
 			}
 
-			onClose();
-		} catch (error) {
-			showErrorModal(error as APIError);
+			updateAuthDomain(
+				{
+					pathParams: { id: record.id },
+					data: {
+						config: {
+							ssoEnabled: form.getFieldValue('ssoEnabled'),
+							ssoType: authnProvider,
+							googleAuthConfig,
+							samlConfig,
+							oidcConfig,
+							roleMapping,
+						},
+					},
+				},
+				{
+					onSuccess: () => {
+						toast.success('Domain updated successfully');
+						onClose();
+					},
+					onError: handleError,
+				},
+			);
 		}
-	};
+	}, [
+		authnProvider,
+		createAuthDomain,
+		form,
+		getGoogleAuthConfig,
+		getRoleMapping,
+		handleError,
+		isCreate,
 
-	const onBackHandler = (): void => {
+		onClose,
+		record,
+		updateAuthDomain,
+	]);
+
+	const onBackHandler = useCallback((): void => {
+		form.resetFields();
 		setAuthnProvider('');
-	};
+	}, [form]);
 
 	return (
-		<Modal open footer={null} onCancel={onClose}>
+		<Modal
+			open
+			footer={null}
+			onCancel={onClose}
+			width={authnProvider ? 980 : undefined}
+		>
 			<Form
 				name="auth-domain"
-				initialValues={defaultTo(record, {
+				initialValues={defaultTo(prepareInitialValues(record), {
 					name: '',
 					ssoEnabled: false,
 					ssoType: '',
@@ -114,9 +246,22 @@ function CreateOrEdit(props: CreateOrEditProps): JSX.Element {
 					<div className="auth-domain-configure">
 						{configureAuthnProvider(authnProvider, isCreate)}
 						<section className="action-buttons">
-							{isCreate && <Button onClick={onBackHandler}>Back</Button>}
-							{!isCreate && <Button onClick={onClose}>Cancel</Button>}
-							<Button onClick={onSubmitHandler} type="primary">
+							{isCreate && (
+								<Button onClick={onBackHandler} variant="solid" color="secondary">
+									Back
+								</Button>
+							)}
+							{!isCreate && (
+								<Button onClick={onClose} variant="solid" color="secondary">
+									Cancel
+								</Button>
+							)}
+							<Button
+								onClick={onSubmitHandler}
+								variant="solid"
+								color="primary"
+								loading={isCreating || isUpdating}
+							>
 								Save Changes
 							</Button>
 						</section>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/CreateEdit.utils.ts

@@ -0,0 +1,134 @@
+import {
+	AuthtypesGettableAuthDomainDTO,
+	AuthtypesGoogleConfigDTO,
+	AuthtypesOIDCConfigDTO,
+	AuthtypesRoleMappingDTO,
+	AuthtypesSamlConfigDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Form values interface for internal use (includes array-based fields for UI)
+export interface FormValues {
+	name?: string;
+	ssoEnabled?: boolean;
+	ssoType?: string;
+	googleAuthConfig?: AuthtypesGoogleConfigDTO & {
+		domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>;
+	};
+	samlConfig?: AuthtypesSamlConfigDTO;
+	oidcConfig?: AuthtypesOIDCConfigDTO;
+	roleMapping?: AuthtypesRoleMappingDTO & {
+		groupMappingsList?: Array<{ groupName?: string; role?: string }>;
+	};
+}
+
+/**
+ * Converts groupMappingsList array to groupMappings Record for API
+ */
+export function convertGroupMappingsToRecord(
+	groupMappingsList?: Array<{ groupName?: string; role?: string }>,
+): Record<string, string> | undefined {
+	if (!Array.isArray(groupMappingsList) || groupMappingsList.length === 0) {
+		return undefined;
+	}
+
+	const groupMappings: Record<string, string> = {};
+	groupMappingsList.forEach((item) => {
+		if (item.groupName && item.role) {
+			groupMappings[item.groupName] = item.role;
+		}
+	});
+
+	return Object.keys(groupMappings).length > 0 ? groupMappings : undefined;
+}
+
+/**
+ * Converts groupMappings Record to groupMappingsList array for form
+ */
+export function convertGroupMappingsToList(
+	groupMappings?: Record<string, string> | null,
+): Array<{ groupName: string; role: string }> {
+	if (!groupMappings) {
+		return [];
+	}
+
+	return Object.entries(groupMappings).map(([groupName, role]) => ({
+		groupName,
+		role,
+	}));
+}
+
+/**
+ * Converts domainToAdminEmailList array to domainToAdminEmail Record for API
+ */
+export function convertDomainMappingsToRecord(
+	domainToAdminEmailList?: Array<{ domain?: string; adminEmail?: string }>,
+): Record<string, string> | undefined {
+	if (
+		!Array.isArray(domainToAdminEmailList) ||
+		domainToAdminEmailList.length === 0
+	) {
+		return undefined;
+	}
+
+	const domainToAdminEmail: Record<string, string> = {};
+	domainToAdminEmailList.forEach((item) => {
+		if (item.domain && item.adminEmail) {
+			domainToAdminEmail[item.domain] = item.adminEmail;
+		}
+	});
+
+	return Object.keys(domainToAdminEmail).length > 0
+		? domainToAdminEmail
+		: undefined;
+}
+
+/**
+ * Converts domainToAdminEmail Record to domainToAdminEmailList array for form
+ */
+export function convertDomainMappingsToList(
+	domainToAdminEmail?: Record<string, string>,
+): Array<{ domain: string; adminEmail: string }> {
+	if (!domainToAdminEmail) {
+		return [];
+	}
+
+	return Object.entries(domainToAdminEmail).map(([domain, adminEmail]) => ({
+		domain,
+		adminEmail,
+	}));
+}
+
+/**
+ * Prepares initial form values from API record
+ */
+export function prepareInitialValues(
+	record?: AuthtypesGettableAuthDomainDTO,
+): FormValues {
+	if (!record) {
+		return {
+			name: '',
+			ssoEnabled: false,
+			ssoType: '',
+		};
+	}
+
+	return {
+		...record,
+		googleAuthConfig: record.googleAuthConfig
+			? {
+					...record.googleAuthConfig,
+					domainToAdminEmailList: convertDomainMappingsToList(
+						record.googleAuthConfig.domainToAdminEmail,
+					),
+			  }
+			: undefined,
+		roleMapping: record.roleMapping
+			? {
+					...record.roleMapping,
+					groupMappingsList: convertGroupMappingsToList(
+						record.roleMapping.groupMappings,
+					),
+			  }
+			: undefined,
+	};
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnGoogleAuth.tsx

@@ -1,20 +1,67 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Color, Style } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import DomainMappingList from './components/DomainMappingList';
+import EmailTagInput from './components/EmailTagInput';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'workspace-groups' | 'role-mapping' | null;
+
 function ConfigureGoogleAuthAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+	const fetchGroups = Form.useWatch(['googleAuthConfig', 'fetchGroups'], form);
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleWorkspaceGroupsChange = useCallback(
+		(keys: string | string[]): void => {
+			const isExpanding = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			setExpandedSection(isExpanding ? 'workspace-groups' : null);
+		},
+		[],
+	);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
+	const {
+		hasErrors: hasWorkspaceGroupsErrors,
+		errorMessages: workspaceGroupsErrorMessages,
+	} = useCollapseSectionErrors(
+		['googleAuthConfig'],
+		[
+			['googleAuthConfig', 'fetchGroups'],
+			['googleAuthConfig', 'serviceAccountJson'],
+			['googleAuthConfig', 'domainToAdminEmailList'],
+			['googleAuthConfig', 'fetchTransitiveGroupMembership'],
+			['googleAuthConfig', 'allowedGroups'],
+		],
+	);
+
 	return (
-		<div className="google-auth">
-			<section className="header">
-				<Typography.Text className="title">
-					Edit Google Authentication
-				</Typography.Text>
-				<Typography.Paragraph className="description">
+		<div className="authn-provider">
+			<section className="authn-provider__header">
+				<h3 className="authn-provider__title">Edit Google Authentication</h3>
+				<p className="authn-provider__description">
 					Enter OAuth 2.0 credentials obtained from the Google API Console below.
 					Read the{' '}
 					<a
@@ -25,50 +72,247 @@ function ConfigureGoogleAuthAuthnProvider({
 						docs
 					</a>{' '}
 					for more information.
-				</Typography.Paragraph>
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				className="field"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="authn-provider__columns">
+				{/* Left Column - Core OAuth Settings */}
+				<div className="authn-provider__left">
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="google-domain">
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="google-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client ID"
-				name={['googleAuthConfig', 'clientId']}
-				className="field"
-				tooltip={{
-					title: `ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="google-client-id">
+							Client ID
+							<Tooltip title="ClientID is the application's ID. For example, 292085223830.apps.googleusercontent.com.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientId']}
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Client ID is required', whitespace: true },
+							]}
+						>
+							<Input id="google-client-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client Secret"
-				name={['googleAuthConfig', 'clientSecret']}
-				className="field"
-				tooltip={{
-					title: `It is the application's secret.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="google-client-secret">
+							Client Secret
+							<Tooltip title="It is the application's secret.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['googleAuthConfig', 'clientSecret']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'Client Secret is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="google-client-secret" />
+						</Form.Item>
+					</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="Google OAuth2 won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['googleAuthConfig', 'insecureSkipEmailVerified']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="google-skip-email-verification"
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['googleAuthConfig', 'insecureSkipEmailVerified'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
+							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+						</Tooltip>
+					</div>
+
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="Google OAuth2 won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
+
+				{/* Right Column - Google Workspace Groups (Advanced) */}
+				<div className="authn-provider__right">
+					<Collapse
+						bordered={false}
+						activeKey={
+							expandedSection === 'workspace-groups' ? ['workspace-groups'] : []
+						}
+						onChange={handleWorkspaceGroupsChange}
+						className="authn-provider__collapse"
+						expandIcon={(): null => null}
+					>
+						<Collapse.Panel
+							key="workspace-groups"
+							header={
+								<div className="authn-provider__collapse-header">
+									{expandedSection !== 'workspace-groups' ? (
+										<ChevronRight size={16} />
+									) : (
+										<ChevronDown size={16} />
+									)}
+									<div className="authn-provider__collapse-header-text">
+										<h4 className="authn-provider__section-title">
+											Google Workspace Groups (Advanced)
+										</h4>
+										<p className="authn-provider__section-description">
+											Enable group fetching to retrieve user groups from Google Workspace.
+											Requires a Service Account with domain-wide delegation.
+										</p>
+									</div>
+									{expandedSection !== 'workspace-groups' && hasWorkspaceGroupsErrors && (
+										<Tooltip
+											title={
+												<div>
+													{workspaceGroupsErrorMessages.map((msg) => (
+														<div key={msg}>{msg}</div>
+													))}
+												</div>
+											}
+										>
+											<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+										</Tooltip>
+									)}
+								</div>
+							}
+						>
+							<div className="authn-provider__group-content">
+								<div className="authn-provider__checkbox-row">
+									<Form.Item
+										name={['googleAuthConfig', 'fetchGroups']}
+										valuePropName="checked"
+										noStyle
+									>
+										<Checkbox
+											id="google-fetch-groups"
+											labelName="Fetch Groups"
+											onCheckedChange={(checked: boolean): void => {
+												form.setFieldValue(['googleAuthConfig', 'fetchGroups'], checked);
+											}}
+										/>
+									</Form.Item>
+									<Tooltip title="Enable fetching Google Workspace groups for the user. Requires service account configuration.">
+										<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+									</Tooltip>
+								</div>
+
+								{fetchGroups && (
+									<div className="authn-provider__group-fields">
+										<div className="authn-provider__field-group">
+											<label
+												className="authn-provider__label"
+												htmlFor="google-service-account-json"
+											>
+												Service Account JSON
+												<Tooltip title="The JSON content of the Google Service Account credentials file. Required for group fetching.">
+													<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'serviceAccountJson']}
+												className="authn-provider__form-item"
+											>
+												<TextArea
+													id="google-service-account-json"
+													rows={3}
+													placeholder="Paste service account JSON"
+													className="authn-provider__textarea"
+												/>
+											</Form.Item>
+										</div>
+
+										<DomainMappingList
+											fieldNamePrefix={['googleAuthConfig', 'domainToAdminEmailList']}
+										/>
+
+										<div className="authn-provider__checkbox-row">
+											<Form.Item
+												name={['googleAuthConfig', 'fetchTransitiveGroupMembership']}
+												valuePropName="checked"
+												noStyle
+											>
+												<Checkbox
+													id="google-transitive-membership"
+													labelName="Fetch Transitive Group Membership"
+													onCheckedChange={(checked: boolean): void => {
+														form.setFieldValue(
+															['googleAuthConfig', 'fetchTransitiveGroupMembership'],
+															checked,
+														);
+													}}
+												/>
+											</Form.Item>
+											<Tooltip title="If enabled, recursively fetch groups that contain other groups (transitive membership).">
+												<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+											</Tooltip>
+										</div>
+
+										<div className="authn-provider__field-group">
+											<label
+												className="authn-provider__label"
+												htmlFor="google-allowed-groups"
+											>
+												Allowed Groups
+												<Tooltip title="Optional list of allowed groups. If configured, only users belonging to one of these groups will be allowed to login.">
+													<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+												</Tooltip>
+											</label>
+											<Form.Item
+												name={['googleAuthConfig', 'allowedGroups']}
+												className="authn-provider__form-item"
+											>
+												<EmailTagInput placeholder="Type a group email and press Enter" />
+											</Form.Item>
+										</div>
+									</div>
+								)}
+							</div>
+						</Collapse.Panel>
+					</Collapse>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnOIDC.tsx

@@ -1,110 +1,212 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox, Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Style } from '@signozhq/design-tokens';
+import { CircleHelp } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form, Tooltip } from 'antd';
+
+import ClaimMappingSection from './components/ClaimMappingSection';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'claim-mapping' | 'role-mapping' | null;
+
 function ConfigureOIDCAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleClaimMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'claim-mapping' : null);
+	}, []);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
-		<div className="saml">
-			<section className="header">
-				<Typography.Text className="title">
-					Edit OIDC Authentication
-				</Typography.Text>
+		<div className="authn-provider">
+			<section className="authn-provider__header">
+				<h3 className="authn-provider__title">Edit OIDC Authentication</h3>
+				<p className="authn-provider__description">
+					Configure OpenID Connect Single Sign-On with your Identity Provider. Read
+					the{' '}
+					<a
+						href="https://signoz.io/docs/userguide/sso-authentication"
+						target="_blank"
+						rel="noreferrer"
+					>
+						docs
+					</a>{' '}
+					for more information.
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="authn-provider__columns">
+				{/* Left Column - Core OIDC Settings */}
+				<div className="authn-provider__left">
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-domain">
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Issuer URL"
-				name={['oidcConfig', 'issuer']}
-				tooltip={{
-					title: `It is the URL identifier for the service. For example: "https://accounts.google.com" or "https://login.salesforce.com".`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-issuer">
+							Issuer URL
+							<Tooltip title='The URL identifier for the OIDC provider. For example: "https://accounts.google.com" or "https://login.salesforce.com".'>
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuer']}
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Issuer URL is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-issuer" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Issuer Alias"
-				name={['oidcConfig', 'issuerAlias']}
-				tooltip={{
-					title: `Some offspec providers like Azure, Oracle IDCS have oidc discovery url different from issuer url which causes issuerValidation to fail.
-					This provides a way to override the Issuer url from the .well-known/openid-configuration issuer`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-issuer-alias">
+							Issuer Alias
+							<Tooltip title="Optional: Override the issuer URL from .well-known/openid-configuration for providers like Azure or Oracle IDCS.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'issuerAlias']}
+							className="authn-provider__form-item"
+						>
+							<Input id="oidc-issuer-alias" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client ID"
-				name={['oidcConfig', 'clientId']}
-				tooltip={{ title: `It is the application's ID.` }}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-client-id">
+							Client ID
+							<Tooltip title="The application's client ID from your OIDC provider.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientId']}
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Client ID is required', whitespace: true },
+							]}
+						>
+							<Input id="oidc-client-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Client Secret"
-				name={['oidcConfig', 'clientSecret']}
-				tooltip={{ title: `It is the application's secret.` }}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="oidc-client-secret">
+							Client Secret
+							<Tooltip title="The application's client secret from your OIDC provider.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['oidcConfig', 'clientSecret']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'Client Secret is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="oidc-client-secret" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Email Claim Mapping"
-				name={['oidcConfig', 'claimMapping', 'email']}
-				tooltip={{
-					title: `Mapping of email claims to the corresponding email field in the token.`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['oidcConfig', 'insecureSkipEmailVerified']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="oidc-skip-email-verification"
+								labelName="Skip Email Verification"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['oidcConfig', 'insecureSkipEmailVerified'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title='Whether to skip email verification. Defaults to "false"'>
+							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+						</Tooltip>
+					</div>
 
-			<Form.Item
-				label="Skip Email Verification"
-				name={['oidcConfig', 'insecureSkipEmailVerified']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Whether to skip email verification. Defaults to "false"`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['oidcConfig', 'getUserInfo']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="oidc-get-user-info"
+								labelName="Get User Info"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(['oidcConfig', 'getUserInfo'], checked);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title="Use the userinfo endpoint to get additional claims. Useful when providers return thin ID tokens.">
+							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+						</Tooltip>
+					</div>
 
-			<Form.Item
-				label="Get User Info"
-				name={['oidcConfig', 'getUserInfo']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Uses the userinfo endpoint to get additional claims for the token. This is especially useful where upstreams return "thin" id tokens`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="OIDC won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="OIDC won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+				{/* Right Column - Advanced Settings */}
+				<div className="authn-provider__right">
+					<ClaimMappingSection
+						fieldNamePrefix={['oidcConfig', 'claimMapping']}
+						isExpanded={expandedSection === 'claim-mapping'}
+						onExpandChange={handleClaimMappingChange}
+					/>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/AuthnSAML.tsx

@@ -1,82 +1,191 @@
+import { useCallback, useState } from 'react';
 import { Callout } from '@signozhq/callout';
-import { Checkbox, Form, Input, Typography } from 'antd';
+import { Checkbox } from '@signozhq/checkbox';
+import { Style } from '@signozhq/design-tokens';
+import { CircleHelp } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form, Tooltip } from 'antd';
+import TextArea from 'antd/lib/input/TextArea';
+
+import AttributeMappingSection from './components/AttributeMappingSection';
+import RoleMappingSection from './components/RoleMappingSection';
 
 import './Providers.styles.scss';
 
+type ExpandedSection = 'attribute-mapping' | 'role-mapping' | null;
+
 function ConfigureSAMLAuthnProvider({
 	isCreate,
 }: {
 	isCreate: boolean;
 }): JSX.Element {
+	const form = Form.useFormInstance();
+
+	const [expandedSection, setExpandedSection] = useState<ExpandedSection>(null);
+
+	const handleAttributeMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'attribute-mapping' : null);
+	}, []);
+
+	const handleRoleMappingChange = useCallback((expanded: boolean): void => {
+		setExpandedSection(expanded ? 'role-mapping' : null);
+	}, []);
+
 	return (
-		<div className="saml">
-			<section className="header">
-				<Typography.Text className="title">
-					Edit SAML Authentication
-				</Typography.Text>
+		<div className="authn-provider">
+			<section className="authn-provider__header">
+				<h3 className="authn-provider__title">Edit SAML Authentication</h3>
+				<p className="authn-provider__description">
+					Configure SAML 2.0 Single Sign-On with your Identity Provider. Read the{' '}
+					<a
+						href="https://signoz.io/docs/userguide/sso-authentication"
+						target="_blank"
+						rel="noreferrer"
+					>
+						docs
+					</a>{' '}
+					for more information.
+				</p>
 			</section>
 
-			<Form.Item
-				label="Domain"
-				name="name"
-				tooltip={{
-					title:
-						'The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)',
-				}}
-			>
-				<Input disabled={!isCreate} />
-			</Form.Item>
+			<div className="authn-provider__columns">
+				{/* Left Column - Core SAML Settings */}
+				<div className="authn-provider__left">
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-domain">
+							Domain
+							<Tooltip title="The email domain for users who should use SSO (e.g., `example.com` for users with `@example.com` emails)">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name="name"
+							className="authn-provider__form-item"
+							rules={[
+								{ required: true, message: 'Domain is required', whitespace: true },
+							]}
+						>
+							<Input id="saml-domain" disabled={!isCreate} />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML ACS URL"
-				name={['samlConfig', 'samlIdp']}
-				tooltip={{
-					title: `The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider. Example: <md:SingleSignOnService Binding="urn:oasis:names:tc:SAML:2.0:bindings:HTTP-POST" Location="{samlIdp}"/>`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-acs-url">
+							SAML ACS URL
+							<Tooltip title="The SSO endpoint of the SAML identity provider. It can typically be found in the SingleSignOnService element in the SAML metadata of the identity provider.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlIdp']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML ACS URL is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="saml-acs-url" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML Entity ID"
-				name={['samlConfig', 'samlEntity']}
-				tooltip={{
-					title: `The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata of the identity provider. Example: <md:EntityDescriptor xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata" entityID="{samlEntity}">`,
-				}}
-			>
-				<Input />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-entity-id">
+							SAML Entity ID
+							<Tooltip title="The entityID of the SAML identity provider. It can typically be found in the EntityID attribute of the EntityDescriptor element in the SAML metadata.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlEntity']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Entity ID is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<Input id="saml-entity-id" />
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="SAML X.509 Certificate"
-				name={['samlConfig', 'samlCert']}
-				tooltip={{
-					title: `The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata of the identity provider. Example: <ds:X509Certificate><ds:X509Certificate>{samlCert}</ds:X509Certificate></ds:X509Certificate>`,
-				}}
-			>
-				<Input.TextArea rows={4} />
-			</Form.Item>
+					<div className="authn-provider__field-group">
+						<label className="authn-provider__label" htmlFor="saml-certificate">
+							SAML X.509 Certificate
+							<Tooltip title="The certificate of the SAML identity provider. It can typically be found in the X509Certificate element in the SAML metadata.">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</label>
+						<Form.Item
+							name={['samlConfig', 'samlCert']}
+							className="authn-provider__form-item"
+							rules={[
+								{
+									required: true,
+									message: 'SAML Certificate is required',
+									whitespace: true,
+								},
+							]}
+						>
+							<TextArea
+								id="saml-certificate"
+								rows={3}
+								placeholder="Paste X.509 certificate"
+								className="authn-provider__textarea"
+							/>
+						</Form.Item>
+					</div>
 
-			<Form.Item
-				label="Skip Signing AuthN Requests"
-				name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
-				valuePropName="checked"
-				className="field"
-				tooltip={{
-					title: `Whether to skip signing the SAML requests. It can typically be found in the WantAuthnRequestsSigned attribute of the IDPSSODescriptor element in the SAML metadata of the identity provider. Example: <md:IDPSSODescriptor WantAuthnRequestsSigned="false" protocolSupportEnumeration="urn:oasis:names:tc:SAML:2.0:protocol">
-					For providers like jumpcloud, this should be set to true.Note: This is the reverse of WantAuthnRequestsSigned. If WantAuthnRequestsSigned is false, then InsecureSkipAuthNRequestsSigned should be true.`,
-				}}
-			>
-				<Checkbox />
-			</Form.Item>
+					<div className="authn-provider__checkbox-row">
+						<Form.Item
+							name={['samlConfig', 'insecureSkipAuthNRequestsSigned']}
+							valuePropName="checked"
+							noStyle
+						>
+							<Checkbox
+								id="saml-skip-signing"
+								labelName="Skip Signing AuthN Requests"
+								onCheckedChange={(checked: boolean): void => {
+									form.setFieldValue(
+										['samlConfig', 'insecureSkipAuthNRequestsSigned'],
+										checked,
+									);
+								}}
+							/>
+						</Form.Item>
+						<Tooltip title="Whether to skip signing the SAML requests. For providers like JumpCloud, this should be enabled.">
+							<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+						</Tooltip>
+					</div>
 
-			<Callout
-				type="warning"
-				size="small"
-				showIcon
-				description="SAML won’t be enabled unless you enter all the attributes above"
-				className="callout"
-			/>
+					<Callout
+						type="warning"
+						size="small"
+						showIcon
+						description="SAML won't be enabled unless you enter all the attributes above"
+						className="callout"
+					/>
+				</div>
+
+				{/* Right Column - Advanced Settings */}
+				<div className="authn-provider__right">
+					<AttributeMappingSection
+						fieldNamePrefix={['samlConfig', 'attributeMapping']}
+						isExpanded={expandedSection === 'attribute-mapping'}
+						onExpandChange={handleAttributeMappingChange}
+					/>
+
+					<RoleMappingSection
+						fieldNamePrefix={['roleMapping']}
+						isExpanded={expandedSection === 'role-mapping'}
+						onExpandChange={handleRoleMappingChange}
+					/>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/Providers.styles.scss

@@ -1,24 +1,240 @@
-.google-auth {
+.authn-provider {
 	display: flex;
 	flex-direction: column;
 
-	.ant-form-item {
-		margin-bottom: 12px !important;
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		margin-bottom: 16px;
 	}
 
-	.header {
+	&__title {
+		margin: 0;
+		color: var(--l1-foreground);
+		font-family: 'Inter', sans-serif;
+		font-size: 14px;
+		font-weight: 600;
+		line-height: 20px;
+	}
+
+	&__description {
+		margin: 0;
+		color: var(--l2-foreground);
+		font-family: 'Inter', sans-serif;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+
+		a {
+			color: var(--accent-primary);
+			text-decoration: none;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&__columns {
+		display: grid;
+		grid-template-columns: 0.9fr 1fr;
+		gap: 24px;
+	}
+
+	&__left {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__right {
+		border-left: 1px solid var(--l3-border);
+		padding-left: 24px;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__field-group {
 		display: flex;
 		flex-direction: column;
 		gap: 4px;
 		margin-bottom: 12px;
+	}
 
-		.title {
-			font-weight: bold;
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		margin-bottom: 12px;
+	}
+
+	input,
+	textarea {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
 		}
 
-		.description {
-			margin-bottom: 0px !important;
+		&:hover {
+			border-color: var(--l3-border) !important;
 		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--primary) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+
+	textarea {
+		height: auto;
+	}
+	&__textarea {
+		min-height: 60px !important;
+		max-height: 200px;
+		resize: vertical;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+		font-family: 'SF Mono', monospace;
+		font-size: 12px;
+		line-height: 18px;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			font-family: Inter, sans-serif;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--primary) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+
+	button[role='checkbox'] {
+		border: 1px solid var(--l2-foreground) !important;
+		border-radius: 2px;
+
+		&[data-state='checked'] {
+			background-color: var(--primary) !important;
+			border-color: var(--primary) !important;
+		}
+	}
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__group-content {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	&__group-fields {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		.authn-provider__field-group,
+		.authn-provider__checkbox-row {
+			margin-bottom: 0;
+		}
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
 	}
 
 	.callout {

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.styles.scss

@@ -0,0 +1,128 @@
+.attribute-mapping-section {
+	display: flex;
+	flex-direction: column;
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--primary) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/AttributeMappingSection.tsx

@@ -0,0 +1,175 @@
+import { useCallback, useState } from 'react';
+import { Color, Style } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import './AttributeMappingSection.styles.scss';
+
+interface AttributeMappingSectionProps {
+	fieldNamePrefix: string[];
+	isExpanded?: boolean;
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function AttributeMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: AttributeMappingSectionProps): JSX.Element {
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['attribute-mapping'] : [];
+	const { hasErrors, errorMessages } = useCollapseSectionErrors(fieldNamePrefix);
+
+	return (
+		<div className="attribute-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="attribute-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="attribute-mapping"
+					header={
+						<div
+							className="attribute-mapping-section__collapse-header"
+							role="button"
+							aria-expanded={expanded}
+							aria-controls="attribute-mapping-content"
+						>
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="attribute-mapping-section__collapse-header-text">
+								<h4 className="attribute-mapping-section__section-title">
+									Attribute Mapping (Advanced)
+								</h4>
+								<p className="attribute-mapping-section__section-description">
+									Configure how SAML assertion attributes from your Identity Provider map
+									to SigNoz user attributes. Leave empty to use default values.
+								</p>
+							</div>
+							{!expanded && hasErrors && (
+								<Tooltip
+									title={
+										<>
+											{errorMessages.map((msg) => (
+												<div key={msg}>{msg}</div>
+											))}
+										</>
+									}
+								>
+									<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+								</Tooltip>
+							)}
+						</div>
+					}
+				>
+					<div
+						id="attribute-mapping-content"
+						className="attribute-mapping-section__content"
+					>
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="email-attribute"
+							>
+								Email Attribute
+								<Tooltip title="The SAML attribute key that contains the user's email. Default: 'email'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'email']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="email-attribute" placeholder="Email" />
+							</Form.Item>
+						</div>
+
+						{/* Name Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="name-attribute"
+							>
+								Name Attribute
+								<Tooltip title="The SAML attribute key that contains the user's display name. Default: 'name'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="name-attribute" placeholder="Name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="groups-attribute"
+							>
+								Groups Attribute
+								<Tooltip title="The SAML attribute key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="groups-attribute" placeholder="Groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Attribute */}
+						<div className="attribute-mapping-section__field-group">
+							<label
+								className="attribute-mapping-section__label"
+								htmlFor="role-attribute"
+							>
+								Role Attribute
+								<Tooltip title="The SAML attribute key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="attribute-mapping-section__form-item"
+							>
+								<Input id="role-attribute" placeholder="Role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default AttributeMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.styles.scss

@@ -0,0 +1,128 @@
+.claim-mapping-section {
+	display: flex;
+	flex-direction: column;
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--primary) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/ClaimMappingSection.tsx

@@ -0,0 +1,161 @@
+import { useCallback, useState } from 'react';
+import { Color, Style } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Tooltip } from 'antd';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import './ClaimMappingSection.styles.scss';
+
+interface ClaimMappingSectionProps {
+	fieldNamePrefix: string[];
+	isExpanded?: boolean;
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function ClaimMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: ClaimMappingSectionProps): JSX.Element {
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['claim-mapping'] : [];
+	const { hasErrors, errorMessages } = useCollapseSectionErrors(fieldNamePrefix);
+
+	return (
+		<div className="claim-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="claim-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="claim-mapping"
+					header={
+						<div
+							className="claim-mapping-section__collapse-header"
+							role="button"
+							aria-expanded={expanded}
+							aria-controls="claim-mapping-content"
+						>
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="claim-mapping-section__collapse-header-text">
+								<h4 className="claim-mapping-section__section-title">
+									Claim Mapping (Advanced)
+								</h4>
+								<p className="claim-mapping-section__section-description">
+									Configure how claims from your Identity Provider map to SigNoz user
+									attributes. Leave empty to use default values.
+								</p>
+							</div>
+							{!expanded && hasErrors && (
+								<Tooltip
+									title={
+										<>
+											{errorMessages.map((msg) => (
+												<div key={msg}>{msg}</div>
+											))}
+										</>
+									}
+								>
+									<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+								</Tooltip>
+							)}
+						</div>
+					}
+				>
+					<div id="claim-mapping-content" className="claim-mapping-section__content">
+						{/* Email Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="email-claim">
+								Email Claim
+								<Tooltip title="The claim key that contains the user's email address. Default: 'email'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'email']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="email-claim" placeholder="Email" />
+							</Form.Item>
+						</div>
+
+						{/* Name Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="name-claim">
+								Name Claim
+								<Tooltip title="The claim key that contains the user's display name. Default: 'name'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'name']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="name-claim" placeholder="Name" />
+							</Form.Item>
+						</div>
+
+						{/* Groups Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="groups-claim">
+								Groups Claim
+								<Tooltip title="The claim key that contains the user's group memberships. Used for role mapping. Default: 'groups'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'groups']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="groups-claim" placeholder="Groups" />
+							</Form.Item>
+						</div>
+
+						{/* Role Claim */}
+						<div className="claim-mapping-section__field-group">
+							<label className="claim-mapping-section__label" htmlFor="role-claim">
+								Role Claim
+								<Tooltip title="The claim key that contains the user's role directly from the IDP. Default: 'role'">
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'role']}
+								className="claim-mapping-section__form-item"
+							>
+								<Input id="role-claim" placeholder="Role" />
+							</Form.Item>
+						</div>
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default ClaimMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.styles.scss

@@ -0,0 +1,103 @@
+.domain-mapping-list {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+
+	&__header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-bottom: 4px;
+	}
+
+	&__title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+	}
+
+	&__field {
+		flex: 1;
+	}
+
+	&__remove-btn {
+		flex-shrink: 0;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: 32px !important;
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 2px !important;
+		background: transparent !important;
+		color: var(--destructive) !important;
+		opacity: 0.6 !important;
+		cursor: pointer;
+		transition: background-color 0.2s, opacity 0.2s;
+		box-shadow: none !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			color: var(--destructive) !important;
+			width: 12px !important;
+			height: 12px !important;
+		}
+
+		&:hover {
+			background: rgba(229, 72, 77, 0.1) !important;
+			opacity: 0.9 !important;
+			color: var(--destructive) !important;
+
+			svg {
+				color: var(--destructive) !important;
+			}
+		}
+
+		&:active {
+			opacity: 0.7 !important;
+			background: rgba(229, 72, 77, 0.15) !important;
+		}
+	}
+
+	&__add-btn {
+		width: 100%;
+
+		// Ensure icon is visible
+		svg,
+		[class*='icon'] {
+			color: var(--l2-foreground) !important;
+			display: inline-block !important;
+			opacity: 1 !important;
+		}
+
+		&:hover {
+			color: var(--l1-foreground);
+
+			svg,
+			[class*='icon'] {
+				color: var(--l1-foreground) !important;
+			}
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.tsx

@@ -0,0 +1,87 @@
+import { Button } from '@signozhq/button';
+import { Plus, Trash2 } from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Form } from 'antd';
+
+import './DomainMappingList.styles.scss';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+const validateEmail = (_: unknown, value: string): Promise<void> => {
+	if (!value) {
+		return Promise.reject(new Error('Admin email is required'));
+	}
+	if (!EMAIL_REGEX.test(value)) {
+		return Promise.reject(new Error('Please enter a valid email'));
+	}
+	return Promise.resolve();
+};
+
+interface DomainMappingListProps {
+	fieldNamePrefix: string[];
+}
+
+function DomainMappingList({
+	fieldNamePrefix,
+}: DomainMappingListProps): JSX.Element {
+	return (
+		<div className="domain-mapping-list">
+			<div className="domain-mapping-list__header">
+				<span className="domain-mapping-list__title">
+					Domain to Admin Email Mapping
+				</span>
+				<p className="domain-mapping-list__description">
+					Map workspace domains to admin emails for service account impersonation.
+					Use &quot;*&quot; as a wildcard for any domain.
+				</p>
+			</div>
+
+			<Form.List name={fieldNamePrefix}>
+				{(fields, { add, remove }): JSX.Element => (
+					<div className="domain-mapping-list__items">
+						{fields.map((field) => (
+							<div key={field.key} className="domain-mapping-list__row">
+								<Form.Item
+									name={[field.name, 'domain']}
+									className="domain-mapping-list__field"
+									rules={[{ required: true, message: 'Domain is required' }]}
+								>
+									<Input placeholder="Domain (e.g., example.com or *)" />
+								</Form.Item>
+
+								<Form.Item
+									name={[field.name, 'adminEmail']}
+									className="domain-mapping-list__field"
+									rules={[{ validator: validateEmail }]}
+								>
+									<Input placeholder="Admin Email" />
+								</Form.Item>
+
+								<Button
+									variant="ghost"
+									color="secondary"
+									className="domain-mapping-list__remove-btn"
+									onClick={(): void => remove(field.name)}
+									aria-label="Remove mapping"
+								>
+									<Trash2 size={12} />
+								</Button>
+							</div>
+						))}
+
+						<Button
+							variant="dashed"
+							onClick={(): void => add({ domain: '', adminEmail: '' })}
+							prefixIcon={<Plus size={14} />}
+							className="domain-mapping-list__add-btn"
+						>
+							Add Domain Mapping
+						</Button>
+					</div>
+				)}
+			</Form.List>
+		</div>
+	);
+}
+
+export default DomainMappingList;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.styles.scss

@@ -0,0 +1,28 @@
+.email-tag-input {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+
+	&__select {
+		width: 100%;
+
+		.ant-select-selector {
+			.ant-select-selection-search {
+				input {
+					height: 32px !important;
+					border: none !important;
+					background: transparent !important;
+					padding: 0 !important;
+					margin: 0 !important;
+					box-shadow: none !important;
+					font-family: inherit !important;
+				}
+			}
+		}
+	}
+
+	&__error {
+		margin: 0;
+		color: var(--destructive);
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/EmailTagInput.tsx

@@ -0,0 +1,58 @@
+import { useCallback, useState } from 'react';
+import { Select, Tooltip } from 'antd';
+
+import './EmailTagInput.styles.scss';
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+interface EmailTagInputProps {
+	value?: string[];
+	onChange?: (value: string[]) => void;
+	placeholder?: string;
+}
+
+function EmailTagInput({
+	value = [],
+	onChange,
+	placeholder = 'Type an email and press Enter',
+}: EmailTagInputProps): JSX.Element {
+	const [validationError, setValidationError] = useState('');
+
+	const handleChange = useCallback(
+		(newValues: string[]): void => {
+			const addedValues = newValues.filter((v) => !value.includes(v));
+			const invalidEmail = addedValues.find((v) => !EMAIL_REGEX.test(v));
+
+			if (invalidEmail) {
+				setValidationError(`"${invalidEmail}" is not a valid email`);
+				return;
+			}
+			setValidationError('');
+			onChange?.(newValues);
+		},
+		[onChange, value],
+	);
+
+	return (
+		<div className="email-tag-input">
+			<Tooltip
+				title={validationError}
+				open={!!validationError}
+				placement="topRight"
+			>
+				<Select
+					mode="tags"
+					value={value}
+					onChange={handleChange}
+					placeholder={placeholder}
+					tokenSeparators={[',', ' ']}
+					className="email-tag-input__select"
+					allowClear
+					status={validationError ? 'error' : undefined}
+				/>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default EmailTagInput;

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.styles.scss

@@ -0,0 +1,288 @@
+.role-mapping-section {
+	display: flex;
+	flex-direction: column;
+	margin-top: 24px;
+
+	&__collapse {
+		background: transparent !important;
+
+		.ant-collapse-item {
+			border: none !important;
+		}
+
+		.ant-collapse-header {
+			padding: 0 !important;
+		}
+
+		.ant-collapse-content {
+			border-top: none !important;
+			background: transparent !important;
+		}
+
+		.ant-collapse-content-box {
+			padding: 12px 0 0 24px !important;
+		}
+	}
+
+	&__collapse-header {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+		cursor: pointer;
+		position: relative;
+		width: 100%;
+
+		svg {
+			margin-top: 2px;
+			color: var(--l3-foreground);
+			flex-shrink: 0;
+		}
+	}
+
+	&__collapse-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__section-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__section-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		max-height: 45vh;
+		overflow-y: auto;
+		padding-right: 4px;
+
+		// Thin scrollbar
+		&::-webkit-scrollbar {
+			width: 4px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l3-foreground);
+			border-radius: 4px;
+
+			&:hover {
+				background: var(--l2-foreground);
+			}
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-foreground) transparent;
+	}
+
+	&__field-group {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		gap: 6px;
+		color: var(--l1-foreground);
+	}
+
+	&__form-item {
+		margin-bottom: 0 !important;
+	}
+
+	&__checkbox-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	&__select {
+		width: 100%;
+
+		&.ant-select {
+			.ant-select-selector {
+				height: 32px;
+				background: var(--l3-background) !important;
+				border: 1px solid var(--l3-border) !important;
+				border-radius: 2px;
+				color: var(--l1-foreground) !important;
+
+				.ant-select-selection-item {
+					color: var(--l1-foreground) !important;
+				}
+			}
+
+			&:hover .ant-select-selector {
+				border-color: var(--l3-border) !important;
+			}
+
+			&.ant-select-focused .ant-select-selector {
+				border-color: var(--primary) !important;
+				box-shadow: none !important;
+			}
+
+			.ant-select-arrow {
+				color: var(--l3-foreground);
+			}
+		}
+	}
+
+	&__group-mappings {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__group-header {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-bottom: 4px;
+	}
+
+	&__group-title {
+		margin: 0;
+		color: var(--l1-foreground);
+	}
+
+	&__group-description {
+		margin: 0;
+		color: var(--l3-foreground);
+	}
+
+	&__items {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 8px;
+
+		.ant-form-item {
+			margin-bottom: 0;
+		}
+	}
+
+	&__field {
+		&--group {
+			flex: 2;
+		}
+
+		&--role {
+			flex: 1;
+			min-width: 120px;
+		}
+	}
+
+	&__remove-btn {
+		flex-shrink: 0;
+		width: 32px !important;
+		height: 32px !important;
+		min-width: 32px !important;
+		padding: 0 !important;
+		border: none !important;
+		border-radius: 2px !important;
+		background: transparent !important;
+		color: var(--destructive) !important;
+		opacity: 0.6 !important;
+		cursor: pointer;
+		transition: background-color 0.2s, opacity 0.2s;
+		box-shadow: none !important;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		svg {
+			color: var(--destructive) !important;
+			width: 12px !important;
+			height: 12px !important;
+		}
+
+		&:hover {
+			background: rgba(229, 72, 77, 0.1) !important;
+			opacity: 0.9 !important;
+			color: var(--destructive) !important;
+
+			svg {
+				color: var(--destructive) !important;
+			}
+		}
+
+		&:active {
+			opacity: 0.7 !important;
+			background: rgba(229, 72, 77, 0.15) !important;
+		}
+	}
+
+	&__add-btn {
+		width: 100%;
+
+		// Ensure icon is visible
+		svg,
+		[class*='icon'] {
+			color: var(--l2-foreground) !important;
+			display: inline-block !important;
+			opacity: 1 !important;
+		}
+
+		&:hover {
+			color: var(--l1-foreground);
+
+			svg,
+			[class*='icon'] {
+				color: var(--l1-foreground) !important;
+			}
+		}
+	}
+
+	// --- Checkbox border visibility ---
+	button[role='checkbox'] {
+		border: 1px solid var(--l2-foreground) !important;
+		border-radius: 2px;
+
+		&[data-state='checked'] {
+			background-color: var(--primary) !important;
+			border-color: var(--primary) !important;
+		}
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	input {
+		height: 32px;
+		background: var(--l3-background) !important;
+		border: 1px solid var(--l3-border) !important;
+		border-radius: 2px;
+		color: var(--l1-foreground) !important;
+
+		&::placeholder {
+			color: var(--l3-foreground) !important;
+			opacity: 1;
+		}
+
+		&:hover {
+			border-color: var(--l3-border) !important;
+		}
+
+		&:focus,
+		&:focus-visible {
+			border-color: var(--primary) !important;
+			box-shadow: none !important;
+			outline: none;
+		}
+	}
+}

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/RoleMappingSection.tsx

@@ -0,0 +1,216 @@
+import { useCallback, useState } from 'react';
+import { Button } from '@signozhq/button';
+import { Checkbox } from '@signozhq/checkbox';
+import { Color, Style } from '@signozhq/design-tokens';
+import {
+	ChevronDown,
+	ChevronRight,
+	CircleHelp,
+	Plus,
+	Trash2,
+	TriangleAlert,
+} from '@signozhq/icons';
+import { Input } from '@signozhq/input';
+import { Collapse, Form, Select, Tooltip } from 'antd';
+import { useCollapseSectionErrors } from 'hooks/useCollapseSectionErrors';
+
+import './RoleMappingSection.styles.scss';
+
+const ROLE_OPTIONS = [
+	{ value: 'VIEWER', label: 'VIEWER' },
+	{ value: 'EDITOR', label: 'EDITOR' },
+	{ value: 'ADMIN', label: 'ADMIN' },
+];
+
+interface RoleMappingSectionProps {
+	fieldNamePrefix: string[];
+	isExpanded?: boolean;
+	onExpandChange?: (expanded: boolean) => void;
+}
+
+function RoleMappingSection({
+	fieldNamePrefix,
+	isExpanded,
+	onExpandChange,
+}: RoleMappingSectionProps): JSX.Element {
+	const form = Form.useFormInstance();
+	const useRoleAttribute = Form.useWatch(
+		[...fieldNamePrefix, 'useRoleAttribute'],
+		form,
+	);
+
+	// Support both controlled and uncontrolled modes
+	const [internalExpanded, setInternalExpanded] = useState(false);
+	const isControlled = isExpanded !== undefined;
+	const expanded = isControlled ? isExpanded : internalExpanded;
+
+	const handleCollapseChange = useCallback(
+		(keys: string | string[]): void => {
+			const newExpanded = Array.isArray(keys) ? keys.length > 0 : !!keys;
+			if (isControlled && onExpandChange) {
+				onExpandChange(newExpanded);
+			} else {
+				setInternalExpanded(newExpanded);
+			}
+		},
+		[isControlled, onExpandChange],
+	);
+
+	const collapseActiveKey = expanded ? ['role-mapping'] : [];
+	const { hasErrors, errorMessages } = useCollapseSectionErrors(fieldNamePrefix);
+
+	return (
+		<div className="role-mapping-section">
+			<Collapse
+				bordered={false}
+				activeKey={collapseActiveKey}
+				onChange={handleCollapseChange}
+				className="role-mapping-section__collapse"
+				expandIcon={(): null => null}
+			>
+				<Collapse.Panel
+					key="role-mapping"
+					header={
+						<div
+							className="role-mapping-section__collapse-header"
+							role="button"
+							aria-expanded={expanded}
+							aria-controls="role-mapping-content"
+						>
+							{!expanded ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
+							<div className="role-mapping-section__collapse-header-text">
+								<h4 className="role-mapping-section__section-title">
+									Role Mapping (Advanced)
+								</h4>
+								<p className="role-mapping-section__section-description">
+									Configure how user roles are determined from your Identity Provider.
+									You can either use a direct role attribute or map IDP groups to SigNoz
+									roles.
+								</p>
+							</div>
+							{!expanded && hasErrors && (
+								<Tooltip
+									title={
+										<>
+											{errorMessages.map((msg) => (
+												<div key={msg}>{msg}</div>
+											))}
+										</>
+									}
+								>
+									<TriangleAlert size={16} color={Color.BG_CHERRY_500} />
+								</Tooltip>
+							)}
+						</div>
+					}
+				>
+					<div id="role-mapping-content" className="role-mapping-section__content">
+						<div className="role-mapping-section__field-group">
+							<label className="role-mapping-section__label" htmlFor="default-role">
+								Default Role
+								<Tooltip title='The default role assigned to new SSO users if no other role mapping applies. Default: "VIEWER"'>
+									<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+								</Tooltip>
+							</label>
+							<Form.Item
+								name={[...fieldNamePrefix, 'defaultRole']}
+								className="role-mapping-section__form-item"
+								initialValue="VIEWER"
+							>
+								<Select
+									id="default-role"
+									options={ROLE_OPTIONS}
+									className="role-mapping-section__select"
+								/>
+							</Form.Item>
+						</div>
+
+						<div className="role-mapping-section__checkbox-row">
+							<Form.Item
+								name={[...fieldNamePrefix, 'useRoleAttribute']}
+								valuePropName="checked"
+								noStyle
+							>
+								<Checkbox
+									id="use-role-attribute"
+									labelName="Use Role Attribute Directly"
+									onCheckedChange={(checked: boolean): void => {
+										form.setFieldValue([...fieldNamePrefix, 'useRoleAttribute'], checked);
+									}}
+								/>
+							</Form.Item>
+							<Tooltip title="If enabled, the role claim/attribute from the IDP will be used directly instead of group mappings. The role value must match a SigNoz role (VIEWER, EDITOR, or ADMIN).">
+								<CircleHelp size={14} color={Style.L3_FOREGROUND} cursor="help" />
+							</Tooltip>
+						</div>
+
+						{!useRoleAttribute && (
+							<div className="role-mapping-section__group-mappings">
+								<div className="role-mapping-section__group-header">
+									<span className="role-mapping-section__group-title">
+										Group to Role Mappings
+									</span>
+									<p className="role-mapping-section__group-description">
+										Map IDP group names to SigNoz roles. If a user belongs to multiple
+										groups, the highest privilege role will be assigned.
+									</p>
+								</div>
+
+								<Form.List name={[...fieldNamePrefix, 'groupMappingsList']}>
+									{(fields, { add, remove }): JSX.Element => (
+										<div className="role-mapping-section__items">
+											{fields.map((field) => (
+												<div key={field.key} className="role-mapping-section__row">
+													<Form.Item
+														name={[field.name, 'groupName']}
+														className="role-mapping-section__field role-mapping-section__field--group"
+														rules={[{ required: true, message: 'Group name is required' }]}
+													>
+														<Input placeholder="IDP Group Name" />
+													</Form.Item>
+
+													<Form.Item
+														name={[field.name, 'role']}
+														className="role-mapping-section__field role-mapping-section__field--role"
+														rules={[{ required: true, message: 'Role is required' }]}
+														initialValue="VIEWER"
+													>
+														<Select
+															options={ROLE_OPTIONS}
+															className="role-mapping-section__select"
+														/>
+													</Form.Item>
+
+													<Button
+														variant="ghost"
+														color="secondary"
+														className="role-mapping-section__remove-btn"
+														onClick={(): void => remove(field.name)}
+														aria-label="Remove mapping"
+													>
+														<Trash2 size={12} />
+													</Button>
+												</div>
+											))}
+
+											<Button
+												variant="dashed"
+												onClick={(): void => add({ groupName: '', role: 'VIEWER' })}
+												prefixIcon={<Plus size={14} />}
+												className="role-mapping-section__add-btn"
+											>
+												Add Group Mapping
+											</Button>
+										</div>
+									)}
+								</Form.List>
+							</div>
+						)}
+					</div>
+				</Collapse.Panel>
+			</Collapse>
+		</div>
+	);
+}
+
+export default RoleMappingSection;

frontend/src/container/OrganizationSettings/AuthDomain/SSOEnforcementToggle.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { Switch } from '@signozhq/switch';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { useUpdateAuthDomain } from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
+interface SSOEnforcementToggleProps {
+	isDefaultChecked: boolean;
+	record: AuthtypesGettableAuthDomainDTO;
+}
+
+function SSOEnforcementToggle({
+	isDefaultChecked,
+	record,
+}: SSOEnforcementToggleProps): JSX.Element {
+	const [isChecked, setIsChecked] = useState<boolean>(isDefaultChecked);
+	const { showErrorModal } = useErrorModal();
+
+	useEffect(() => {
+		setIsChecked(isDefaultChecked);
+	}, [isDefaultChecked]);
+
+	const { mutate: updateAuthDomain, isLoading } = useUpdateAuthDomain<
+		AxiosError<RenderErrorResponseDTO>
+	>();
+
+	const onChangeHandler = (checked: boolean): void => {
+		if (!record.id) {
+			return;
+		}
+
+		setIsChecked(checked);
+
+		updateAuthDomain(
+			{
+				pathParams: { id: record.id },
+				data: {
+					config: {
+						ssoEnabled: checked,
+						ssoType: record.ssoType,
+						googleAuthConfig: record.googleAuthConfig,
+						oidcConfig: record.oidcConfig,
+						samlConfig: record.samlConfig,
+						roleMapping: record.roleMapping,
+					},
+				},
+			},
+			{
+				onError: (error) => {
+					setIsChecked(!checked);
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
+	};
+
+	return (
+		<Switch
+			disabled={isLoading}
+			checked={isChecked}
+			onCheckedChange={onChangeHandler}
+		/>
+	);
+}
+
+export default SSOEnforcementToggle;

frontend/src/container/OrganizationSettings/AuthDomain/Toggle.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { Switch } from 'antd';
-import put from 'api/v1/domains/id/put';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-import { GettableAuthDomain } from 'types/api/v1/domains/list';
-
-function Toggle({ isDefaultChecked, record }: ToggleProps): JSX.Element {
-	const [isChecked, setIsChecked] = useState<boolean>(isDefaultChecked);
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const { showErrorModal } = useErrorModal();
-
-	const onChangeHandler = async (checked: boolean): Promise<void> => {
-		setIsLoading(true);
-
-		try {
-			await put({
-				id: record.id,
-				config: {
-					ssoEnabled: checked,
-					ssoType: record.ssoType,
-					googleAuthConfig: record.googleAuthConfig,
-					oidcConfig: record.oidcConfig,
-					samlConfig: record.samlConfig,
-				},
-			});
-			setIsChecked(checked);
-		} catch (error) {
-			showErrorModal(error as APIError);
-		}
-
-		setIsLoading(false);
-	};
-
-	return (
-		<Switch loading={isLoading} checked={isChecked} onChange={onChangeHandler} />
-	);
-}
-
-interface ToggleProps {
-	isDefaultChecked: boolean;
-	record: GettableAuthDomain;
-}
-
-export default Toggle;

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/AuthDomain.test.tsx

@@ -0,0 +1,138 @@
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import AuthDomain from '../index';
+import {
+	AUTH_DOMAINS_LIST_ENDPOINT,
+	mockDomainsListResponse,
+	mockEmptyDomainsResponse,
+	mockErrorResponse,
+} from './mocks';
+
+jest.mock('@signozhq/sonner', () => ({
+	toast: {
+		success: jest.fn(),
+		error: jest.fn(),
+	},
+}));
+
+describe('AuthDomain', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	describe('List View', () => {
+		it('renders page header and add button', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			expect(screen.getByText(/authenticated domains/i)).toBeInTheDocument();
+			expect(
+				screen.getByRole('button', { name: /add domain/i }),
+			).toBeInTheDocument();
+		});
+
+		it('renders list of auth domains successfully', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockDomainsListResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(screen.getByText('signoz.io')).toBeInTheDocument();
+				expect(screen.getByText('example.com')).toBeInTheDocument();
+				expect(screen.getByText('corp.io')).toBeInTheDocument();
+			});
+		});
+
+		it('renders empty state when no domains exist', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(screen.getByText(/no data/i)).toBeInTheDocument();
+			});
+		});
+
+		it('displays error content when API fails', async () => {
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(500), ctx.json(mockErrorResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/failed to perform operation/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Add Domain', () => {
+		it('opens create modal when Add Domain button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockEmptyDomainsResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			const addButton = await screen.findByRole('button', { name: /add domain/i });
+			await user.click(addButton);
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/configure authentication method/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Configure Domain', () => {
+		it('opens edit modal when configure action is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			server.use(
+				rest.get(AUTH_DOMAINS_LIST_ENDPOINT, (_, res, ctx) =>
+					res(ctx.status(200), ctx.json(mockDomainsListResponse)),
+				),
+			);
+
+			render(<AuthDomain />);
+
+			await waitFor(() => {
+				expect(screen.getByText('signoz.io')).toBeInTheDocument();
+			});
+
+			const configureLinks = await screen.findAllByText(/configure google auth/i);
+			await user.click(configureLinks[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+			});
+		});
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.test.tsx

@@ -0,0 +1,354 @@
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import CreateEdit from '../CreateEdit/CreateEdit';
+import {
+	mockDomainWithRoleMapping,
+	mockGoogleAuthDomain,
+	mockGoogleAuthWithWorkspaceGroups,
+	mockOidcAuthDomain,
+	mockOidcWithClaimMapping,
+	mockSamlAuthDomain,
+	mockSamlWithAttributeMapping,
+} from './mocks';
+
+const mockOnClose = jest.fn();
+
+describe('CreateEdit Modal', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	describe('Provider Selection (Create Mode)', () => {
+		it('renders provider selection when creating new domain', () => {
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			expect(
+				screen.getByText(/configure authentication method/i),
+			).toBeInTheDocument();
+			expect(screen.getByText(/google apps authentication/i)).toBeInTheDocument();
+			expect(screen.getByText(/saml authentication/i)).toBeInTheDocument();
+			expect(screen.getByText(/oidc authentication/i)).toBeInTheDocument();
+		});
+
+		it('returns to provider selection when back button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+			});
+
+			const backButton = screen.getByRole('button', { name: /back/i });
+			await user.click(backButton);
+
+			await waitFor(() => {
+				expect(
+					screen.getByText(/configure authentication method/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Edit Mode', () => {
+		it('shows provider form directly when editing existing domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+			expect(
+				screen.queryByText(/configure authentication method/i),
+			).not.toBeInTheDocument();
+		});
+
+		it('pre-fills form with existing domain values', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByDisplayValue('signoz.io')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('test-client-id')).toBeInTheDocument();
+		});
+
+		it('disables domain field when editing', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const domainInput = screen.getByDisplayValue('signoz.io');
+			expect(domainInput).toBeDisabled();
+		});
+
+		it('shows cancel button instead of back when editing', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', { name: /back/i }),
+			).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Form Validation', () => {
+		it('shows validation error when submitting without required fields', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			const saveButton = await screen.findByRole('button', {
+				name: /save changes/i,
+			});
+			await user.click(saveButton);
+
+			await waitFor(() => {
+				expect(screen.getByText(/domain is required/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Google Auth Provider', () => {
+		it('shows Google Auth form fields', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/edit google authentication/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/domain/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/client id/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/client secret/i)).toBeInTheDocument();
+				expect(screen.getByText(/skip email verification/i)).toBeInTheDocument();
+			});
+		});
+
+		it('shows workspace groups section when expanded', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthWithWorkspaceGroups}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const workspaceHeader = screen.getByText(/google workspace groups/i);
+			await user.click(workspaceHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/fetch groups/i)).toBeInTheDocument();
+				expect(screen.getByText(/service account json/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('SAML Provider', () => {
+		it('shows SAML-specific fields when editing SAML domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockSamlAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit saml authentication/i)).toBeInTheDocument();
+			expect(
+				screen.getByDisplayValue('https://idp.example.com/sso'),
+			).toBeInTheDocument();
+			expect(screen.getByDisplayValue('urn:example:idp')).toBeInTheDocument();
+		});
+
+		it('shows attribute mapping section for SAML', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockSamlWithAttributeMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(
+				screen.getByText(/attribute mapping \(advanced\)/i),
+			).toBeInTheDocument();
+
+			const attributeHeader = screen.getByText(/attribute mapping \(advanced\)/i);
+			await user.click(attributeHeader);
+
+			await waitFor(() => {
+				expect(screen.getByLabelText(/name attribute/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/groups attribute/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/role attribute/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('OIDC Provider', () => {
+		it('shows OIDC-specific fields when editing OIDC domain', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/edit oidc authentication/i)).toBeInTheDocument();
+			expect(screen.getByDisplayValue('https://oidc.corp.io')).toBeInTheDocument();
+			expect(screen.getByDisplayValue('oidc-client-id')).toBeInTheDocument();
+		});
+
+		it('shows claim mapping section for OIDC', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcWithClaimMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/claim mapping \(advanced\)/i)).toBeInTheDocument();
+
+			const claimHeader = screen.getByText(/claim mapping \(advanced\)/i);
+			await user.click(claimHeader);
+
+			await waitFor(() => {
+				expect(screen.getByLabelText(/email claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/name claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/groups claim/i)).toBeInTheDocument();
+				expect(screen.getByLabelText(/role claim/i)).toBeInTheDocument();
+			});
+		});
+
+		it('shows OIDC options checkboxes', () => {
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockOidcAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			expect(screen.getByText(/skip email verification/i)).toBeInTheDocument();
+			expect(screen.getByText(/get user info/i)).toBeInTheDocument();
+		});
+	});
+
+	describe('Role Mapping', () => {
+		it('shows role mapping section in provider forms', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<CreateEdit isCreate onClose={mockOnClose} />);
+
+			const configureButtons = await screen.findAllByRole('button', {
+				name: /configure/i,
+			});
+			await user.click(configureButtons[0]);
+
+			await waitFor(() => {
+				expect(screen.getByText(/role mapping \(advanced\)/i)).toBeInTheDocument();
+			});
+		});
+
+		it('expands role mapping section to show default role selector', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockDomainWithRoleMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const roleMappingHeader = screen.getByText(/role mapping \(advanced\)/i);
+			await user.click(roleMappingHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/default role/i)).toBeInTheDocument();
+				expect(
+					screen.getByText(/use role attribute directly/i),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('shows group mappings section when useRoleAttribute is false', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockDomainWithRoleMapping}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const roleMappingHeader = screen.getByText(/role mapping \(advanced\)/i);
+			await user.click(roleMappingHeader);
+
+			await waitFor(() => {
+				expect(screen.getByText(/group to role mappings/i)).toBeInTheDocument();
+				expect(
+					screen.getByRole('button', { name: /add group mapping/i }),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Modal Actions', () => {
+		it('calls onClose when cancel button is clicked', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(
+				<CreateEdit
+					isCreate={false}
+					record={mockGoogleAuthDomain}
+					onClose={mockOnClose}
+				/>,
+			);
+
+			const cancelButton = screen.getByRole('button', { name: /cancel/i });
+			await user.click(cancelButton);
+
+			expect(mockOnClose).toHaveBeenCalled();
+		});
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/SSOEnforcementToggle.test.tsx

@@ -0,0 +1,130 @@
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+
+import SSOEnforcementToggle from '../SSOEnforcementToggle';
+import {
+	AUTH_DOMAINS_UPDATE_ENDPOINT,
+	mockErrorResponse,
+	mockGoogleAuthDomain,
+	mockUpdateSuccessResponse,
+} from './mocks';
+
+describe('SSOEnforcementToggle', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+	});
+
+	it('renders switch with correct initial state', () => {
+		render(
+			<SSOEnforcementToggle
+				isDefaultChecked={true}
+				record={mockGoogleAuthDomain}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		expect(switchElement).toBeChecked();
+	});
+
+	it('renders unchecked switch when SSO is disabled', () => {
+		render(
+			<SSOEnforcementToggle
+				isDefaultChecked={false}
+				record={{ ...mockGoogleAuthDomain, ssoEnabled: false }}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		expect(switchElement).not.toBeChecked();
+	});
+
+	it('calls update API when toggle is clicked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const mockUpdateAPI = jest.fn();
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, async (req, res, ctx) => {
+				const body = await req.json();
+				mockUpdateAPI(body);
+				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+			}),
+		);
+
+		render(
+			<SSOEnforcementToggle
+				isDefaultChecked={true}
+				record={mockGoogleAuthDomain}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		await waitFor(() => {
+			expect(switchElement).not.toBeChecked();
+		});
+
+		expect(mockUpdateAPI).toHaveBeenCalledTimes(1);
+		expect(mockUpdateAPI).toHaveBeenCalledWith(
+			expect.objectContaining({
+				config: expect.objectContaining({
+					ssoEnabled: false,
+				}),
+			}),
+		);
+	});
+
+	it('shows error modal when update fails', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(500), ctx.json(mockErrorResponse)),
+			),
+		);
+
+		render(
+			<SSOEnforcementToggle
+				isDefaultChecked={true}
+				record={mockGoogleAuthDomain}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		await waitFor(() => {
+			expect(screen.getByText(/failed to perform operation/i)).toBeInTheDocument();
+		});
+	});
+
+	it('does not call API when record has no id', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		let apiCalled = false;
+
+		server.use(
+			rest.put(AUTH_DOMAINS_UPDATE_ENDPOINT, (_, res, ctx) => {
+				apiCalled = true;
+				return res(ctx.status(200), ctx.json(mockUpdateSuccessResponse));
+			}),
+		);
+
+		render(
+			<SSOEnforcementToggle
+				isDefaultChecked={true}
+				record={{ ...mockGoogleAuthDomain, id: undefined }}
+			/>,
+		);
+
+		const switchElement = screen.getByRole('switch');
+		await user.click(switchElement);
+
+		// Wait a bit to ensure no API call was made
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		expect(apiCalled).toBe(false);
+	});
+});

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/mocks.ts

@@ -0,0 +1,220 @@
+import { AuthtypesGettableAuthDomainDTO } from 'api/generated/services/sigNoz.schemas';
+
+// API Endpoints
+export const AUTH_DOMAINS_LIST_ENDPOINT = '*/api/v1/domains';
+export const AUTH_DOMAINS_CREATE_ENDPOINT = '*/api/v1/domains';
+export const AUTH_DOMAINS_UPDATE_ENDPOINT = '*/api/v1/domains/:id';
+export const AUTH_DOMAINS_DELETE_ENDPOINT = '*/api/v1/domains/:id';
+
+// Mock Auth Domain with Google Auth
+export const mockGoogleAuthDomain: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-1',
+	name: 'signoz.io',
+	ssoEnabled: true,
+	ssoType: 'google_auth',
+	googleAuthConfig: {
+		clientId: 'test-client-id',
+		clientSecret: 'test-client-secret',
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-1',
+	},
+};
+
+// Mock Auth Domain with SAML
+export const mockSamlAuthDomain: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-2',
+	name: 'example.com',
+	ssoEnabled: false,
+	ssoType: 'saml',
+	samlConfig: {
+		samlIdp: 'https://idp.example.com/sso',
+		samlEntity: 'urn:example:idp',
+		samlCert: 'MOCK_CERTIFICATE',
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-2',
+	},
+};
+
+// Mock Auth Domain with OIDC
+export const mockOidcAuthDomain: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-3',
+	name: 'corp.io',
+	ssoEnabled: true,
+	ssoType: 'oidc',
+	oidcConfig: {
+		issuer: 'https://oidc.corp.io',
+		clientId: 'oidc-client-id',
+		clientSecret: 'oidc-client-secret',
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-3',
+	},
+};
+
+// Mock Auth Domain with Role Mapping
+export const mockDomainWithRoleMapping: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-4',
+	name: 'enterprise.com',
+	ssoEnabled: true,
+	ssoType: 'saml',
+	samlConfig: {
+		samlIdp: 'https://idp.enterprise.com/sso',
+		samlEntity: 'urn:enterprise:idp',
+		samlCert: 'MOCK_CERTIFICATE',
+	},
+	roleMapping: {
+		defaultRole: 'EDITOR',
+		useRoleAttribute: false,
+		groupMappings: {
+			'admin-group': 'ADMIN',
+			'dev-team': 'EDITOR',
+			viewers: 'VIEWER',
+		},
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-4',
+	},
+};
+
+// Mock Auth Domain with useRoleAttribute enabled
+export const mockDomainWithDirectRoleAttribute: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-5',
+	name: 'direct-role.com',
+	ssoEnabled: true,
+	ssoType: 'oidc',
+	oidcConfig: {
+		issuer: 'https://oidc.direct-role.com',
+		clientId: 'direct-role-client-id',
+		clientSecret: 'direct-role-client-secret',
+	},
+	roleMapping: {
+		defaultRole: 'VIEWER',
+		useRoleAttribute: true,
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-5',
+	},
+};
+
+// Mock OIDC domain with claim mapping
+export const mockOidcWithClaimMapping: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-6',
+	name: 'oidc-claims.com',
+	ssoEnabled: true,
+	ssoType: 'oidc',
+	oidcConfig: {
+		issuer: 'https://oidc.claims.com',
+		issuerAlias: 'https://alias.claims.com',
+		clientId: 'claims-client-id',
+		clientSecret: 'claims-client-secret',
+		insecureSkipEmailVerified: true,
+		getUserInfo: true,
+		claimMapping: {
+			email: 'user_email',
+			name: 'display_name',
+			groups: 'user_groups',
+			role: 'user_role',
+		},
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-6',
+	},
+};
+
+// Mock SAML domain with attribute mapping
+export const mockSamlWithAttributeMapping: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-7',
+	name: 'saml-attrs.com',
+	ssoEnabled: true,
+	ssoType: 'saml',
+	samlConfig: {
+		samlIdp: 'https://idp.saml-attrs.com/sso',
+		samlEntity: 'urn:saml-attrs:idp',
+		samlCert: 'MOCK_CERTIFICATE_ATTRS',
+		insecureSkipAuthNRequestsSigned: true,
+		attributeMapping: {
+			name: 'user_display_name',
+			groups: 'member_of',
+			role: 'signoz_role',
+		},
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-7',
+	},
+};
+
+// Mock Google Auth with workspace groups
+export const mockGoogleAuthWithWorkspaceGroups: AuthtypesGettableAuthDomainDTO = {
+	id: 'domain-8',
+	name: 'google-groups.com',
+	ssoEnabled: true,
+	ssoType: 'google_auth',
+	googleAuthConfig: {
+		clientId: 'google-groups-client-id',
+		clientSecret: 'google-groups-client-secret',
+		insecureSkipEmailVerified: false,
+		fetchGroups: true,
+		serviceAccountJson: '{"type": "service_account"}',
+		domainToAdminEmail: {
+			'google-groups.com': 'admin@google-groups.com',
+		},
+		fetchTransitiveGroupMembership: true,
+		allowedGroups: ['allowed-group-1', 'allowed-group-2'],
+	},
+	authNProviderInfo: {
+		relayStatePath: 'api/v1/sso/relay/domain-8',
+	},
+};
+
+// Mock empty list response
+export const mockEmptyDomainsResponse = {
+	status: 'success',
+	data: [],
+};
+
+// Mock list response with domains
+export const mockDomainsListResponse = {
+	status: 'success',
+	data: [mockGoogleAuthDomain, mockSamlAuthDomain, mockOidcAuthDomain],
+};
+
+// Mock single domain list response
+export const mockSingleDomainResponse = {
+	status: 'success',
+	data: [mockGoogleAuthDomain],
+};
+
+// Mock success responses
+export const mockCreateSuccessResponse = {
+	status: 'success',
+	data: mockGoogleAuthDomain,
+};
+
+export const mockUpdateSuccessResponse = {
+	status: 'success',
+	data: { ...mockGoogleAuthDomain, ssoEnabled: false },
+};
+
+export const mockDeleteSuccessResponse = {
+	status: 'success',
+	data: 'Domain deleted successfully',
+};
+
+// Mock error responses
+export const mockErrorResponse = {
+	error: {
+		code: 'internal_error',
+		message: 'Failed to perform operation',
+		url: '',
+	},
+};
+
+export const mockValidationErrorResponse = {
+	error: {
+		code: 'invalid_input',
+		message: 'Domain name is required',
+		url: '',
+	},
+};

frontend/src/container/OrganizationSettings/AuthDomain/index.tsx

@@ -1,151 +1,214 @@
-import { useState } from 'react';
-import { useQuery } from 'react-query';
+import { useCallback, useMemo, useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Table, Typography } from 'antd';
+import { Button } from '@signozhq/button';
+import { Trash2, X } from '@signozhq/icons';
+import { toast } from '@signozhq/sonner';
+import { Modal } from 'antd';
+import { Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import deleteDomain from 'api/v1/domains/id/delete';
-import listAllDomain from 'api/v1/domains/list';
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import {
+	useDeleteAuthDomain,
+	useListAuthDomains,
+} from 'api/generated/services/authdomains';
+import {
+	AuthtypesGettableAuthDomainDTO,
+	RenderErrorResponseDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import CopyToClipboard from 'periscope/components/CopyToClipboard';
 import { useErrorModal } from 'providers/ErrorModalProvider';
+import { ErrorV2Resp } from 'types/api';
 import APIError from 'types/api/error';
-import { GettableAuthDomain, SSOType } from 'types/api/v1/domains/list';
 
 import CreateEdit from './CreateEdit/CreateEdit';
-import Toggle from './Toggle';
+import SSOEnforcementToggle from './SSOEnforcementToggle';
 
 import './AuthDomain.styles.scss';
+import '../../IngestionSettings/IngestionSettings.styles.scss';
 
-const columns: ColumnsType<GettableAuthDomain> = [
-	{
-		title: 'Domain',
-		dataIndex: 'name',
-		key: 'name',
-		width: 100,
-		render: (val): JSX.Element => <Typography.Text>{val}</Typography.Text>,
-	},
-	{
-		title: 'Enforce SSO',
-		dataIndex: 'ssoEnabled',
-		key: 'ssoEnabled',
-		width: 80,
-		render: (value: boolean, record: GettableAuthDomain): JSX.Element => (
-			<Toggle isDefaultChecked={value} record={record} />
-		),
-	},
-	{
-		title: 'IDP Initiated SSO URL',
-		dataIndex: 'relayState',
-		key: 'relayState',
-		width: 80,
-		render: (_, record: GettableAuthDomain): JSX.Element => {
-			const relayPath = record.authNProviderInfo.relayStatePath;
-			if (!relayPath) {
-				return (
-					<Typography.Text style={{ paddingLeft: '6px' }}>N/A</Typography.Text>
-				);
-			}
-
-			const href = `${window.location.origin}/${relayPath}`;
-			return <CopyToClipboard textToCopy={href} />;
-		},
-	},
-	{
-		title: 'Action',
-		dataIndex: 'action',
-		key: 'action',
-		width: 100,
-		render: (_, record: GettableAuthDomain): JSX.Element => (
-			<section className="auth-domain-list-column-action">
-				<Typography.Link data-column-action="configure">
-					Configure {SSOType.get(record.ssoType)}
-				</Typography.Link>
-				<Typography.Link type="danger" data-column-action="delete">
-					Delete
-				</Typography.Link>
-			</section>
-		),
-	},
-];
-
-async function deleteDomainById(
-	id: string,
-	showErrorModal: (error: APIError) => void,
-	refetchAuthDomainListResponse: () => void,
-): Promise<void> {
-	try {
-		await deleteDomain(id);
-		refetchAuthDomainListResponse();
-	} catch (error) {
-		showErrorModal(error as APIError);
-	}
-}
+export const SSOType = new Map<string, string>([
+	['google_auth', 'Google Auth'],
+	['saml', 'SAML'],
+	['email_password', 'Email Password'],
+	['oidc', 'OIDC'],
+]);
 
 function AuthDomain(): JSX.Element {
-	const [record, setRecord] = useState<GettableAuthDomain>();
+	const [record, setRecord] = useState<AuthtypesGettableAuthDomainDTO>();
 	const [addDomain, setAddDomain] = useState<boolean>(false);
+	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+	const [
+		activeDomain,
+		setActiveDomain,
+	] = useState<AuthtypesGettableAuthDomainDTO | null>(null);
+
 	const { showErrorModal } = useErrorModal();
+
 	const {
 		data: authDomainListResponse,
 		isLoading: isLoadingAuthDomainListResponse,
 		isFetching: isFetchingAuthDomainListResponse,
 		error: errorFetchingAuthDomainListResponse,
 		refetch: refetchAuthDomainListResponse,
-	} = useQuery({
-		queryFn: listAllDomain,
-		queryKey: ['/api/v1/domains', 'list'],
-		enabled: true,
-	});
+	} = useListAuthDomains();
+
+	const { mutate: deleteAuthDomain, isLoading } = useDeleteAuthDomain<
+		AxiosError<RenderErrorResponseDTO>
+	>();
+
+	const showDeleteModal = useCallback(
+		(domain: AuthtypesGettableAuthDomainDTO): void => {
+			setActiveDomain(domain);
+			setIsDeleteModalOpen(true);
+		},
+		[],
+	);
+
+	const hideDeleteModal = useCallback((): void => {
+		setIsDeleteModalOpen(false);
+		setActiveDomain(null);
+	}, []);
+
+	const handleDeleteDomain = useCallback((): void => {
+		if (!activeDomain?.id) {
+			return;
+		}
+
+		deleteAuthDomain(
+			{ pathParams: { id: activeDomain.id } },
+			{
+				onSuccess: () => {
+					toast.success('Domain deleted successfully');
+					refetchAuthDomainListResponse();
+					hideDeleteModal();
+				},
+				onError: (error) => {
+					try {
+						ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+					} catch (apiError) {
+						showErrorModal(apiError as APIError);
+					}
+				},
+			},
+		);
+	}, [
+		activeDomain,
+		deleteAuthDomain,
+		hideDeleteModal,
+
+		refetchAuthDomainListResponse,
+		showErrorModal,
+	]);
+
+	const formattedError = useMemo(() => {
+		if (!errorFetchingAuthDomainListResponse) {
+			return null;
+		}
+
+		let errorResult: APIError | null = null;
+		try {
+			ErrorResponseHandlerV2(
+				errorFetchingAuthDomainListResponse as AxiosError<ErrorV2Resp>,
+			);
+		} catch (error) {
+			errorResult = error as APIError;
+		}
+		return errorResult;
+	}, [errorFetchingAuthDomainListResponse]);
+
+	const columns: ColumnsType<AuthtypesGettableAuthDomainDTO> = useMemo(
+		() => [
+			{
+				title: 'Domain',
+				dataIndex: 'name',
+				key: 'name',
+				width: 100,
+				render: (val): JSX.Element => <span>{val}</span>,
+			},
+			{
+				title: 'Enforce SSO',
+				dataIndex: 'ssoEnabled',
+				key: 'ssoEnabled',
+				width: 80,
+				render: (
+					value: boolean,
+					record: AuthtypesGettableAuthDomainDTO,
+				): JSX.Element => (
+					<SSOEnforcementToggle isDefaultChecked={value} record={record} />
+				),
+			},
+			{
+				title: 'IDP Initiated SSO URL',
+				dataIndex: 'relayState',
+				key: 'relayState',
+				width: 80,
+				render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => {
+					const relayPath = record.authNProviderInfo?.relayStatePath;
+					if (!relayPath) {
+						return <span className="auth-domain-list-na">N/A</span>;
+					}
+
+					const href = `${window.location.origin}/${relayPath}`;
+					return <CopyToClipboard textToCopy={href} />;
+				},
+			},
+			{
+				title: 'Action',
+				dataIndex: 'action',
+				key: 'action',
+				width: 100,
+				render: (_, record: AuthtypesGettableAuthDomainDTO): JSX.Element => (
+					<section className="auth-domain-list-column-action">
+						<Button
+							className="auth-domain-list-action-link"
+							onClick={(): void => setRecord(record)}
+							variant="link"
+						>
+							Configure {SSOType.get(record.ssoType || '')}
+						</Button>
+						<Button
+							className="auth-domain-list-action-link delete"
+							onClick={(): void => showDeleteModal(record)}
+							variant="link"
+						>
+							Delete
+						</Button>
+					</section>
+				),
+			},
+		],
+		[showDeleteModal],
+	);
 
 	return (
 		<div className="auth-domain">
 			<section className="auth-domain-header">
-				<Typography.Title level={3}>Authenticated Domains</Typography.Title>
+				<h3 className="auth-domain-title">Authenticated Domains</h3>
 				<Button
-					type="primary"
-					icon={<PlusOutlined />}
+					prefixIcon={<PlusOutlined />}
 					onClick={(): void => {
 						setAddDomain(true);
 					}}
-					className="button"
+					variant="solid"
+					size="sm"
+					color="primary"
 				>
 					Add Domain
 				</Button>
 			</section>
-			{(errorFetchingAuthDomainListResponse as APIError) && (
-				<ErrorContent error={errorFetchingAuthDomainListResponse as APIError} />
-			)}
-			{!(errorFetchingAuthDomainListResponse as APIError) && (
+			{formattedError && <ErrorContent error={formattedError} />}
+			{!errorFetchingAuthDomainListResponse && (
 				<Table
 					columns={columns}
-					dataSource={authDomainListResponse?.data}
-					onRow={(record): any => ({
-						onClick: (
-							event: React.SyntheticEvent<HTMLLinkElement, MouseEvent>,
-						): void => {
-							const target = event.target as HTMLLinkElement;
-							const { columnAction } = target.dataset;
-							switch (columnAction) {
-								case 'configure':
-									setRecord(record);
-
-									break;
-								case 'delete':
-									deleteDomainById(
-										record.id,
-										showErrorModal,
-										refetchAuthDomainListResponse,
-									);
-									break;
-								default:
-									console.error('Unknown action:', columnAction);
-							}
-						},
-					})}
+					dataSource={authDomainListResponse?.data?.data}
+					onRow={undefined}
 					loading={
 						isLoadingAuthDomainListResponse || isFetchingAuthDomainListResponse
 					}
 					className="auth-domain-list"
+					rowKey="id"
 				/>
 			)}
 			{(addDomain || record) && (
@@ -159,6 +222,39 @@ function AuthDomain(): JSX.Element {
 					}}
 				/>
 			)}
+
+			<Modal
+				className="delete-ingestion-key-modal"
+				title={<span className="title">Delete Domain</span>}
+				open={isDeleteModalOpen}
+				closable
+				onCancel={hideDeleteModal}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={hideDeleteModal}
+						className="cancel-btn"
+						prefixIcon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<Button
+						key="submit"
+						prefixIcon={<Trash2 size={16} />}
+						onClick={handleDeleteDomain}
+						className="delete-btn"
+						loading={isLoading}
+					>
+						Delete Domain
+					</Button>,
+				]}
+			>
+				<p className="delete-text">
+					Are you sure you want to delete the domain{' '}
+					<strong>{activeDomain?.name}</strong>? This action cannot be undone.
+				</p>
+			</Modal>
 		</div>
 	);
 }

frontend/src/container/PanelWrapper/PanelWrapper.tsx

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import Spinner from 'components/Spinner';
 
 import { PanelTypeVsPanelWrapper } from './constants';
 import { PanelWrapperProps } from './panelWrapper.types';
@@ -32,6 +33,11 @@ function PanelWrapper({
 		// eslint-disable-next-line react/jsx-no-useless-fragment
 		return <></>;
 	}
+
+	if (queryResponse.isFetching || queryResponse.isLoading) {
+		return <Spinner height="100%" size="large" tip="Loading..." />;
+	}
+
 	return (
 		<Component
 			panelMode={panelMode}

frontend/src/container/RolesSettings/RolesComponents/RolesListingTable.tsx

@@ -0,0 +1,246 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Pagination, Skeleton } from 'antd';
+import { useListRoles } from 'api/generated/services/role';
+import { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import useUrlQuery from 'hooks/useUrlQuery';
+import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
+import { useTimezone } from 'providers/Timezone';
+import { toAPIError } from 'utils/errorUtils';
+
+import '../RolesSettings.styles.scss';
+
+const PAGE_SIZE = 20;
+
+type DisplayItem =
+	| { type: 'section'; label: string; count?: number }
+	| { type: 'role'; role: RoletypesRoleDTO };
+
+interface RolesListingTableProps {
+	searchQuery: string;
+}
+
+function RolesListingTable({
+	searchQuery,
+}: RolesListingTableProps): JSX.Element {
+	const { data, isLoading, isError, error } = useListRoles();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	const history = useHistory();
+	const urlQuery = useUrlQuery();
+	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
+	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
+
+	const setCurrentPage = useCallback(
+		(page: number): void => {
+			urlQuery.set('page', String(page));
+			history.replace({ search: urlQuery.toString() });
+		},
+		[history, urlQuery],
+	);
+
+	const roles = useMemo(() => data?.data?.data ?? [], [data]);
+
+	const formatTimestamp = (date?: Date | string): string => {
+		if (!date) {
+			return '—';
+		}
+		const d = new Date(date);
+
+		if (Number.isNaN(d.getTime())) {
+			return '—';
+		}
+
+		return formatTimezoneAdjustedTimestamp(date, DATE_TIME_FORMATS.DASH_DATETIME);
+	};
+
+	const filteredRoles = useMemo(() => {
+		if (!searchQuery.trim()) {
+			return roles;
+		}
+		const query = searchQuery.toLowerCase();
+		return roles.filter(
+			(role) =>
+				role.name?.toLowerCase().includes(query) ||
+				role.description?.toLowerCase().includes(query),
+		);
+	}, [roles, searchQuery]);
+
+	const managedRoles = useMemo(
+		() => filteredRoles.filter((role) => role.type?.toLowerCase() === 'managed'),
+		[filteredRoles],
+	);
+	const customRoles = useMemo(
+		() => filteredRoles.filter((role) => role.type?.toLowerCase() === 'custom'),
+		[filteredRoles],
+	);
+
+	// Combine managed + custom into a flat display list for pagination
+	const displayList = useMemo((): DisplayItem[] => {
+		const result: DisplayItem[] = [];
+
+		if (managedRoles.length > 0) {
+			result.push({ type: 'section', label: 'Managed roles' });
+			managedRoles.forEach((role) => result.push({ type: 'role', role }));
+		}
+		if (customRoles.length > 0) {
+			result.push({
+				type: 'section',
+				label: 'Custom roles',
+				count: customRoles.length,
+			});
+			customRoles.forEach((role) => result.push({ type: 'role', role }));
+		}
+		return result;
+	}, [managedRoles, customRoles]);
+
+	const totalRoleCount = managedRoles.length + customRoles.length;
+
+	// Ensure current page is valid; if out of bounds, redirect to last available page
+	useEffect(() => {
+		if (isLoading || totalRoleCount === 0) {
+			return;
+		}
+		const maxPage = Math.ceil(totalRoleCount / PAGE_SIZE);
+		if (currentPage > maxPage) {
+			setCurrentPage(maxPage);
+		}
+	}, [isLoading, totalRoleCount, currentPage, setCurrentPage]);
+
+	// Paginate: count only role items, but include section headers contextually
+	const paginatedItems = useMemo((): DisplayItem[] => {
+		const startRole = (currentPage - 1) * PAGE_SIZE;
+		const endRole = startRole + PAGE_SIZE;
+		let roleIndex = 0;
+		let lastSection: DisplayItem | null = null;
+		const result: DisplayItem[] = [];
+
+		for (const item of displayList) {
+			if (item.type === 'section') {
+				lastSection = item;
+			} else {
+				if (roleIndex >= startRole && roleIndex < endRole) {
+					// Insert section header before first role in that section on this page
+					if (lastSection) {
+						result.push(lastSection);
+						lastSection = null;
+					}
+					result.push(item);
+				}
+				roleIndex++;
+			}
+		}
+		return result;
+	}, [displayList, currentPage]);
+
+	const showPaginationItem = (total: number, range: number[]): JSX.Element => (
+		<>
+			<span className="numbers">
+				{range[0]} &#8212; {range[1]}
+			</span>
+			<span className="total"> of {total}</span>
+		</>
+	);
+
+	if (isLoading) {
+		return (
+			<div className="roles-listing-table">
+				<Skeleton active paragraph={{ rows: 5 }} />
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="roles-listing-table">
+				<ErrorInPlace
+					error={toAPIError(
+						error,
+						'An unexpected error occurred while fetching roles.',
+					)}
+				/>
+			</div>
+		);
+	}
+
+	if (filteredRoles.length === 0) {
+		return (
+			<div className="roles-listing-table">
+				<div className="roles-table-empty">
+					{searchQuery ? 'No roles match your search.' : 'No roles found.'}
+				</div>
+			</div>
+		);
+	}
+
+	// todo: use table from periscope when its available for consumption
+	const renderRow = (role: RoletypesRoleDTO): JSX.Element => (
+		<div key={role.id} className="roles-table-row">
+			<div className="roles-table-cell roles-table-cell--name">
+				{role.name ?? '—'}
+			</div>
+			<div className="roles-table-cell roles-table-cell--description">
+				<LineClampedText
+					text={role.description ?? '—'}
+					tooltipProps={{ overlayClassName: 'roles-description-tooltip' }}
+				/>
+			</div>
+			<div className="roles-table-cell roles-table-cell--updated-at">
+				{formatTimestamp(role.updatedAt)}
+			</div>
+			<div className="roles-table-cell roles-table-cell--created-at">
+				{formatTimestamp(role.createdAt)}
+			</div>
+		</div>
+	);
+
+	return (
+		<div className="roles-listing-table">
+			<div className="roles-table-scroll-container">
+				<div className="roles-table-inner">
+					<div className="roles-table-header">
+						<div className="roles-table-header-cell roles-table-header-cell--name">
+							Name
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--description">
+							Description
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--updated-at">
+							Updated At
+						</div>
+						<div className="roles-table-header-cell roles-table-header-cell--created-at">
+							Created At
+						</div>
+					</div>
+
+					{paginatedItems.map((item) =>
+						item.type === 'section' ? (
+							<h3 key={`section-${item.label}`} className="roles-table-section-header">
+								{item.label}
+								{item.count !== undefined && (
+									<span className="roles-table-section-header__count">{item.count}</span>
+								)}
+							</h3>
+						) : (
+							renderRow(item.role)
+						),
+					)}
+				</div>
+			</div>
+
+			<Pagination
+				current={currentPage}
+				pageSize={PAGE_SIZE}
+				total={totalRoleCount}
+				showTotal={showPaginationItem}
+				showSizeChanger={false}
+				hideOnSinglePage
+				onChange={(page): void => setCurrentPage(page)}
+				className="roles-table-pagination"
+			/>
+		</div>
+	);
+}
+
+export default RolesListingTable;

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -0,0 +1,238 @@
+.roles-settings {
+	.roles-settings-header {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		width: 100%;
+		padding: 16px;
+
+		.roles-settings-header-title {
+			color: var(--text-base-white);
+			font-family: Inter;
+			font-style: normal;
+			font-size: 18px;
+			font-weight: 500;
+			line-height: 28px;
+			letter-spacing: -0.09px;
+		}
+
+		.roles-settings-header-description {
+			color: var(--foreground);
+			font-family: Inter;
+			font-style: normal;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.roles-settings-content {
+		padding: 0 16px;
+	}
+
+	// todo: https://github.com/SigNoz/components/issues/116
+	.roles-search-wrapper {
+		input {
+			width: 100%;
+			background: var(--l3-background);
+			border: 1px solid var(--l3-border);
+			border-radius: 2px;
+			padding: 6px 6px 6px 8px;
+			font-family: Inter;
+			font-size: 14px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+			color: var(--l1-foreground);
+			outline: none;
+			height: 32px;
+
+			&::placeholder {
+				color: var(--l3-foreground);
+			}
+
+			&:focus {
+				border-color: var(--input);
+			}
+		}
+	}
+}
+
+.roles-description-tooltip {
+	max-height: none;
+	overflow-y: visible;
+}
+
+.roles-listing-table {
+	margin-top: 12px;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.roles-table-scroll-container {
+	overflow-x: auto;
+}
+
+.roles-table-inner {
+	min-width: 850px;
+}
+
+.roles-table-header {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	gap: 24px;
+}
+
+.roles-table-header-cell {
+	font-family: Inter;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.44px;
+	color: var(--foreground);
+	line-height: 16px;
+
+	&--name {
+		flex: 0 0 180px;
+	}
+
+	&--description {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&--created-at {
+		flex: 0 0 180px;
+		text-align: right;
+	}
+
+	&--updated-at {
+		flex: 0 0 180px;
+		text-align: right;
+	}
+}
+
+.roles-table-section-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: 32px;
+	padding: 0 16px;
+	background: rgba(171, 189, 255, 0.04);
+	border-top: 1px solid var(--secondary);
+	border-bottom: 1px solid var(--secondary);
+	font-family: Inter;
+	font-size: 12px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 16px;
+	margin: 0;
+
+	&__count {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 20px;
+		height: 18px;
+		padding: 0 6px;
+		border-radius: 9px;
+		background: var(--l3-background);
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--foreground);
+		line-height: 1;
+	}
+}
+
+.roles-table-row {
+	display: flex;
+	align-items: center;
+	padding: 8px 16px;
+	background: rgba(171, 189, 255, 0.02);
+	border-bottom: 1px solid var(--secondary);
+	gap: 24px;
+}
+
+.roles-table-cell {
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+	color: var(--foreground);
+	line-height: 20px;
+
+	&--name {
+		flex: 0 0 180px;
+		font-weight: 500;
+	}
+
+	&--description {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	&--created-at {
+		flex: 0 0 180px;
+		text-align: right;
+		white-space: nowrap;
+	}
+
+	&--updated-at {
+		flex: 0 0 180px;
+		text-align: right;
+		white-space: nowrap;
+	}
+}
+
+.roles-table-empty {
+	padding: 24px 16px;
+	text-align: center;
+	color: var(--foreground);
+	font-family: Inter;
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.roles-table-pagination {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 8px 16px;
+
+	.ant-pagination-total-text {
+		margin-right: auto;
+
+		.numbers {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+		}
+
+		.total {
+			font-family: Inter;
+			font-size: 12px;
+			color: var(--foreground);
+			opacity: 0.5;
+		}
+	}
+}
+
+.lightMode {
+	.roles-settings {
+		.roles-settings-header {
+			.roles-settings-header-title {
+				color: var(--text-base-black);
+			}
+		}
+	}
+
+	.roles-table-section-header {
+		background: rgba(0, 0, 0, 0.03);
+	}
+
+	.roles-table-row {
+		background: rgba(0, 0, 0, 0.01);
+	}
+}

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { Input } from '@signozhq/input';
+
+import RolesListingTable from './RolesComponents/RolesListingTable';
+
+import './RolesSettings.styles.scss';
+
+function RolesSettings(): JSX.Element {
+	const [searchQuery, setSearchQuery] = useState('');
+
+	return (
+		<div className="roles-settings" data-testid="roles-settings">
+			<div className="roles-settings-header">
+				<h3 className="roles-settings-header-title">Roles</h3>
+				<p className="roles-settings-header-description">
+					Create and manage custom roles for your team.
+				</p>
+			</div>
+			<div className="roles-settings-content">
+				<div className="roles-search-wrapper">
+					<Input
+						type="search"
+						placeholder="Search for roles..."
+						value={searchQuery}
+						onChange={(e): void => setSearchQuery(e.target.value)}
+					/>
+				</div>
+				<RolesListingTable searchQuery={searchQuery} />
+			</div>
+		</div>
+	);
+}
+
+export default RolesSettings;

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

@@ -0,0 +1,232 @@
+import {
+	allRoles,
+	listRolesSuccessResponse,
+} from 'mocks-server/__mockdata__/roles';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { render, screen, userEvent } from 'tests/test-utils';
+
+import RolesSettings from '../RolesSettings';
+
+const rolesApiURL = 'http://localhost/api/v1/roles';
+
+describe('RolesSettings', () => {
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders the header and search input', () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(screen.getByText('Roles')).toBeInTheDocument();
+		expect(
+			screen.getByText('Create and manage custom roles for your team.'),
+		).toBeInTheDocument();
+		expect(
+			screen.getByPlaceholderText('Search for roles...'),
+		).toBeInTheDocument();
+	});
+
+	it('displays roles grouped by managed and custom sections', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		// Section headers
+		expect(screen.getByText('Managed roles')).toBeInTheDocument();
+		expect(screen.getByText('Custom roles')).toBeInTheDocument();
+
+		// Managed roles
+		expect(screen.getByText('signoz-admin')).toBeInTheDocument();
+		expect(screen.getByText('signoz-editor')).toBeInTheDocument();
+		expect(screen.getByText('signoz-viewer')).toBeInTheDocument();
+
+		// Custom roles
+		expect(screen.getByText('billing-manager')).toBeInTheDocument();
+		expect(screen.getByText('dashboard-creator')).toBeInTheDocument();
+
+		// Custom roles count badge
+		expect(screen.getByText('2')).toBeInTheDocument();
+
+		// Column headers
+		expect(screen.getByText('Name')).toBeInTheDocument();
+		expect(screen.getByText('Description')).toBeInTheDocument();
+		expect(screen.getByText('Updated At')).toBeInTheDocument();
+		expect(screen.getByText('Created At')).toBeInTheDocument();
+	});
+
+	it('filters roles by search query on name', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const searchInput = screen.getByPlaceholderText('Search for roles...');
+
+		await user.type(searchInput, 'billing');
+
+		expect(await screen.findByText('billing-manager')).toBeInTheDocument();
+		expect(screen.queryByText('signoz-admin')).not.toBeInTheDocument();
+		expect(screen.queryByText('signoz-editor')).not.toBeInTheDocument();
+		expect(screen.queryByText('dashboard-creator')).not.toBeInTheDocument();
+	});
+
+	it('filters roles by search query on description', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const searchInput = screen.getByPlaceholderText('Search for roles...');
+
+		await user.type(searchInput, 'read-only');
+
+		expect(await screen.findByText('signoz-viewer')).toBeInTheDocument();
+		expect(screen.queryByText('signoz-admin')).not.toBeInTheDocument();
+		expect(screen.queryByText('billing-manager')).not.toBeInTheDocument();
+	});
+
+	it('shows empty state when search matches nothing', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		const searchInput = screen.getByPlaceholderText('Search for roles...');
+
+		await user.type(searchInput, 'nonexistentrole');
+
+		expect(
+			await screen.findByText('No roles match your search.'),
+		).toBeInTheDocument();
+	});
+
+	it('shows loading skeleton while fetching', () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.delay(200), ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(document.querySelector('.ant-skeleton')).toBeInTheDocument();
+	});
+
+	it('shows error state when API fails', async () => {
+		const errorMessage = 'Failed to fetch roles';
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(
+					ctx.status(500),
+					ctx.json({
+						error: {
+							code: 'INTERNAL_ERROR',
+							message: errorMessage,
+							url: '',
+							errors: [],
+						},
+					}),
+				),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText(errorMessage)).toBeInTheDocument();
+	});
+
+	it('shows empty state when API returns no roles', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json({ status: 'success', data: [] })),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('No roles found.')).toBeInTheDocument();
+	});
+
+	it('renders descriptions for all roles', async () => {
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('signoz-admin')).toBeInTheDocument();
+
+		for (const role of allRoles) {
+			if (role.description) {
+				expect(screen.getByText(role.description)).toBeInTheDocument();
+			}
+		}
+	});
+
+	it('handles invalid dates gracefully by showing fallback', async () => {
+		const invalidRole = {
+			id: 'edge-0009',
+			createdAt: ('invalid-date' as unknown) as Date,
+			updatedAt: ('not-a-date' as unknown) as Date,
+			name: 'invalid-date-role',
+			description: 'Tests date parsing fallback.',
+			type: 'custom',
+			orgId: 'org-001',
+		};
+
+		server.use(
+			rest.get(rolesApiURL, (_req, res, ctx) =>
+				res(
+					ctx.status(200),
+					ctx.json({
+						status: 'success',
+						data: [invalidRole],
+					}),
+				),
+			),
+		);
+
+		render(<RolesSettings />);
+
+		expect(await screen.findByText('invalid-date-role')).toBeInTheDocument();
+
+		// Verify the "—" (em-dash) fallback is shown for both cells
+		const dashFallback = screen.getAllByText('—');
+		// In renderRow: name, description, updatedAt, createdAt.
+		// Total dashes expected: 2 (for both dates)
+		expect(dashFallback.length).toBeGreaterThanOrEqual(2);
+	});
+});

frontend/src/container/RolesSettings/index.tsx

@@ -0,0 +1 @@
+export { default } from './RolesSettings';

frontend/src/container/SideNav/menuItems.tsx

@@ -28,6 +28,7 @@ import {
 	ScrollText,
 	Search,
 	Settings,
+	Shield,
 	Slack,
 	Unplug,
 	User,
@@ -312,6 +313,13 @@ export const settingsMenuItems: SidebarItem[] = [
 		isEnabled: false,
 		itemKey: 'billing',
 	},
+	{
+		key: ROUTES.ROLES_SETTINGS,
+		label: 'Roles',
+		icon: <Shield size={16} />,
+		isEnabled: false,
+		itemKey: 'roles',
+	},
 	{
 		key: ROUTES.ORG_SETTINGS,
 		label: 'Members & SSO',

frontend/src/container/TopNav/DateTimeSelectionV2/constants.ts

@@ -159,6 +159,7 @@ export const routesToSkip = [
 	ROUTES.ERROR_DETAIL,
 	ROUTES.LOGS_PIPELINES,
 	ROUTES.BILLING,
+	ROUTES.ROLES_SETTINGS,
 	ROUTES.SUPPORT,
 	ROUTES.WORKSPACE_LOCKED,
 	ROUTES.WORKSPACE_SUSPENDED,

frontend/src/hooks/CustomDomain/useGetDeploymentsData.ts

@@ -1,13 +0,0 @@
-import { useQuery, UseQueryResult } from 'react-query';
-import { getDeploymentsData } from 'api/customDomain/getDeploymentsData';
-import { AxiosError, AxiosResponse } from 'axios';
-import { DeploymentsDataProps } from 'types/api/customDomain/types';
-
-export const useGetDeploymentsData = (
-	isEnabled: boolean,
-): UseQueryResult<AxiosResponse<DeploymentsDataProps>, AxiosError> =>
-	useQuery<AxiosResponse<DeploymentsDataProps>, AxiosError>({
-		queryKey: ['getDeploymentsData'],
-		queryFn: () => getDeploymentsData(),
-		enabled: isEnabled,
-	});

frontend/src/hooks/useCollapseSectionErrors.ts

@@ -0,0 +1,61 @@
+import { useMemo } from 'react';
+import { Form } from 'antd';
+
+export interface CollapseSectionErrors {
+	hasErrors: boolean;
+	errorMessages: string[];
+}
+
+/**
+ * Detects validation errors in a form section
+ * @param fieldNamePrefix - Field path prefix for the section
+ * @param specificFields - Optional specific field prefixes to check (uses prefix matching)
+ */
+export function useCollapseSectionErrors(
+	fieldNamePrefix: string[],
+	specificFields?: string[][],
+): CollapseSectionErrors {
+	const form = Form.useFormInstance();
+	// Refer: https://github.com/SigNoz/signoz/pull/10276#discussion_r2819372174
+	Form.useWatch([], form);
+
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	return useMemo(() => {
+		const fieldErrors = form.getFieldsError();
+		const messages: string[] = [];
+
+		if (specificFields?.length) {
+			fieldErrors.forEach((field) => {
+				const fieldPath = Array.isArray(field.name) ? field.name : [field.name];
+
+				const isMatch = specificFields.some((specificField) => {
+					if (fieldPath.length < specificField.length) {
+						return false;
+					}
+					return specificField.every((part, idx) => fieldPath[idx] === part);
+				});
+
+				if (isMatch && field.errors.length > 0) {
+					field.errors.forEach((error) => messages.push(error));
+				}
+			});
+		} else {
+			const prefixPath = fieldNamePrefix.join('.');
+
+			fieldErrors.forEach((field) => {
+				const fieldPath = Array.isArray(field.name)
+					? field.name.join('.')
+					: String(field.name);
+
+				if (fieldPath.startsWith(prefixPath) && field.errors.length > 0) {
+					field.errors.forEach((error) => messages.push(error));
+				}
+			});
+		}
+
+		return {
+			hasErrors: messages.length > 0,
+			errorMessages: messages,
+		};
+	}, [form, fieldNamePrefix, specificFields]);
+}

frontend/src/lib/uPlotV2/components/Tooltip/HistogramTooltip.tsx

@@ -1,8 +1,31 @@
-import { HistogramTooltipProps } from '../types';
+import { useMemo } from 'react';
+
+import { HistogramTooltipProps, TooltipContentItem } from '../types';
 import Tooltip from './Tooltip';
+import { buildTooltipContent } from './utils';
 
 export default function HistogramTooltip(
 	props: HistogramTooltipProps,
 ): JSX.Element {
-	return <Tooltip {...props} showTooltipHeader={false} />;
+	const content = useMemo(
+		(): TooltipContentItem[] =>
+			buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: props.yAxisUnit ?? '',
+				decimalPrecision: props.decimalPrecision,
+			}),
+		[
+			props.uPlotInstance,
+			props.seriesIndex,
+			props.dataIndexes,
+			props.yAxisUnit,
+			props.decimalPrecision,
+		],
+	);
+
+	return <Tooltip {...props} content={content} showTooltipHeader={false} />;
 }

frontend/src/lib/uPlotV2/components/Tooltip/TimeSeriesTooltip.tsx

@@ -1,8 +1,31 @@
-import { TimeSeriesTooltipProps } from '../types';
+import { useMemo } from 'react';
+
+import { TimeSeriesTooltipProps, TooltipContentItem } from '../types';
 import Tooltip from './Tooltip';
+import { buildTooltipContent } from './utils';
 
 export default function TimeSeriesTooltip(
 	props: TimeSeriesTooltipProps,
 ): JSX.Element {
-	return <Tooltip {...props} />;
+	const content = useMemo(
+		(): TooltipContentItem[] =>
+			buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: props.yAxisUnit ?? '',
+				decimalPrecision: props.decimalPrecision,
+			}),
+		[
+			props.uPlotInstance,
+			props.seriesIndex,
+			props.dataIndexes,
+			props.yAxisUnit,
+			props.decimalPrecision,
+		],
+	);
+
+	return <Tooltip {...props} content={content} />;
 }