Merge branch 'fix/required_fields_1' of github.com:SigNoz/signoz into fix/required_fields_1

* fix: instrumentation changes to capture query duration properly

* chore: move changes to rows.go

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
@@ -4720,6 +4805,7 @@ paths:
       parameters:
       - in: query
         name: name
+        required: true
         schema:
           type: string
       - in: query
@@ -5538,6 +5624,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

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,169 @@ 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/querier/openapi.go` which defines some examples for the `/api/v5/query_range` endpoint:
+
+```go
+var QueryRangeV5OpenAPIDef = handler.OpenAPIDef{
+    ID:              "QueryRangeV5",
+    Tags:            []string{"query"},
+    Summary:         "Query range",
+    Description:     "Execute a composite query over a time range.",
+    Request:         new(qbtypes.QueryRangeRequest),
+    RequestExamples: queryRangeV5Examples, // []handler.OpenAPIExample
+    // ...
+}
+
+var queryRangeV5Examples = []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
+}
+```
+
+### `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/querier/openapi.go` for reference.

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/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/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/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;
 	/**

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

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

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

frontend/src/container/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/lib/uPlotV2/components/Tooltip/HistogramTooltip.tsx

@@ -1,31 +1,8 @@
-import { useMemo } from 'react';
-
-import { HistogramTooltipProps, TooltipContentItem } from '../types';
+import { HistogramTooltipProps } from '../types';
 import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
 
 export default function HistogramTooltip(
 	props: HistogramTooltipProps,
 ): JSX.Element {
-	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} />;
+	return <Tooltip {...props} showTooltipHeader={false} />;
 }

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

@@ -1,31 +1,8 @@
-import { useMemo } from 'react';
-
-import { TimeSeriesTooltipProps, TooltipContentItem } from '../types';
+import { TimeSeriesTooltipProps } from '../types';
 import Tooltip from './Tooltip';
-import { buildTooltipContent } from './utils';
 
 export default function TimeSeriesTooltip(
 	props: TimeSeriesTooltipProps,
 ): JSX.Element {
-	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} />;
+	return <Tooltip {...props} />;
 }

frontend/src/lib/uPlotV2/components/Tooltip/Tooltip.styles.scss

@@ -28,23 +28,18 @@
 		font-weight: 500;
 	}
 
-	.uplot-tooltip-list-container {
-		overflow-y: auto;
-		max-height: 330px;
+	.uplot-tooltip-list {
+		&::-webkit-scrollbar {
+			width: 0.3rem;
+		}
 
-		.uplot-tooltip-list {
-			&::-webkit-scrollbar {
-				width: 0.3rem;
-			}
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
 
-			&::-webkit-scrollbar-track {
-				background: transparent;
-			}
-
-			&::-webkit-scrollbar-thumb {
-				background: var(--bg-slate-100);
-				border-radius: 0.5rem;
-			}
+		&::-webkit-scrollbar-thumb {
+			background: var(--bg-slate-100);
+			border-radius: 0.5rem;
 		}
 	}
 

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -11,7 +11,6 @@ import './Tooltip.styles.scss';
 
 const TOOLTIP_LIST_MAX_HEIGHT = 330;
 const TOOLTIP_ITEM_HEIGHT = 38;
-const TOOLTIP_LIST_PADDING = 10;
 
 export default function Tooltip({
 	uPlotInstance,
@@ -20,7 +19,7 @@ export default function Tooltip({
 	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	const [listHeight, setListHeight] = useState(0);
+
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
@@ -42,52 +41,42 @@ export default function Tooltip({
 		showTooltipHeader,
 	]);
 
-	const virtuosoStyle = useMemo(() => {
-		return {
-			height:
-				listHeight > 0
-					? Math.min(listHeight + TOOLTIP_LIST_PADDING, TOOLTIP_LIST_MAX_HEIGHT)
-					: Math.min(
-							tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
-							TOOLTIP_LIST_MAX_HEIGHT,
-					  ),
-			width: '100%',
-		};
-	}, [listHeight, tooltipContent.length]);
-
 	return (
 		<div
 			className={cx(
 				'uplot-tooltip-container',
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
-			data-testid="uplot-tooltip-container"
 		>
 			{showTooltipHeader && (
-				<div className="uplot-tooltip-header" data-testid="uplot-tooltip-header">
+				<div className="uplot-tooltip-header">
 					<span>{headerTitle}</span>
 				</div>
 			)}
-			<div className="uplot-tooltip-list-container">
+			<div
+				style={{
+					height: Math.min(
+						tooltipContent.length * TOOLTIP_ITEM_HEIGHT,
+						TOOLTIP_LIST_MAX_HEIGHT,
+					),
+					minHeight: 0,
+				}}
+			>
 				{tooltipContent.length > 0 ? (
 					<Virtuoso
 						className="uplot-tooltip-list"
-						data-testid="uplot-tooltip-list"
 						data={tooltipContent}
-						style={virtuosoStyle}
-						totalListHeightChanged={setListHeight}
+						defaultItemHeight={TOOLTIP_ITEM_HEIGHT}
 						itemContent={(_, item): JSX.Element => (
-							<div className="uplot-tooltip-item" data-testid="uplot-tooltip-item">
+							<div className="uplot-tooltip-item">
 								<div
 									className="uplot-tooltip-item-marker"
 									style={{ borderColor: item.color }}
 									data-is-legend-marker={true}
-									data-testid="uplot-tooltip-item-marker"
 								/>
 								<div
 									className="uplot-tooltip-item-content"
 									style={{ color: item.color, fontWeight: item.isActive ? 700 : 400 }}
-									data-testid="uplot-tooltip-item-content"
 								>
 									{item.label}: {item.tooltipValue}
 								</div>

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,208 +0,0 @@
-import React from 'react';
-import { VirtuosoMockContext } from 'react-virtuoso';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { render, RenderResult, screen } from 'tests/test-utils';
-import uPlot from 'uplot';
-
-import { TooltipContentItem } from '../../types';
-import Tooltip from '../Tooltip';
-
-type MockVirtuosoProps = {
-	data: TooltipContentItem[];
-	itemContent: (index: number, item: TooltipContentItem) => React.ReactNode;
-	className?: string;
-	style?: React.CSSProperties;
-	totalListHeightChanged?: (height: number) => void;
-	'data-testid'?: string;
-};
-
-let mockTotalListHeight = 200;
-
-jest.mock('react-virtuoso', () => {
-	const actual = jest.requireActual('react-virtuoso');
-
-	return {
-		...actual,
-		Virtuoso: ({
-			data,
-			itemContent,
-			className,
-			style,
-			totalListHeightChanged,
-			'data-testid': dataTestId,
-		}: MockVirtuosoProps): JSX.Element => {
-			if (totalListHeightChanged) {
-				// Simulate Virtuoso reporting total list height
-				totalListHeightChanged(mockTotalListHeight);
-			}
-
-			return (
-				<div className={className} style={style} data-testid={dataTestId}>
-					{data.map((item, index) => (
-						<div key={item.label ?? index.toString()}>{itemContent(index, item)}</div>
-					))}
-				</div>
-			);
-		},
-	};
-});
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: jest.fn(),
-}));
-
-const mockUseIsDarkMode = useIsDarkMode as jest.MockedFunction<
-	typeof useIsDarkMode
->;
-
-type TooltipTestProps = React.ComponentProps<typeof Tooltip>;
-
-function createTooltipContent(
-	overrides: Partial<TooltipContentItem> = {},
-): TooltipContentItem {
-	return {
-		label: 'Series A',
-		value: 10,
-		tooltipValue: '10',
-		color: '#ff0000',
-		isActive: true,
-		...overrides,
-	};
-}
-
-function createUPlotInstance(cursorIdx: number | null): uPlot {
-	return ({
-		data: [[1], []],
-		cursor: { idx: cursorIdx },
-		// The rest of the uPlot fields are not used by Tooltip
-	} as unknown) as uPlot;
-}
-
-function renderTooltip(props: Partial<TooltipTestProps> = {}): RenderResult {
-	const defaultProps: TooltipTestProps = {
-		uPlotInstance: createUPlotInstance(null),
-		timezone: 'UTC',
-		content: [],
-		showTooltipHeader: true,
-		// TooltipRenderArgs (not used directly in component but required by type)
-		dataIndexes: [],
-		seriesIndex: null,
-		isPinned: false,
-		dismiss: jest.fn(),
-		viaSync: false,
-	} as TooltipTestProps;
-
-	return render(
-		<VirtuosoMockContext.Provider value={{ viewportHeight: 300, itemHeight: 38 }}>
-			<Tooltip {...defaultProps} {...props} />
-		</VirtuosoMockContext.Provider>,
-	);
-}
-
-describe('Tooltip', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseIsDarkMode.mockReturnValue(false);
-		mockTotalListHeight = 200;
-	});
-
-	it('renders header title when showTooltipHeader is true and cursor index is present', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		renderTooltip({ uPlotInstance });
-
-		const expectedTitle = dayjs(1 * 1000)
-			.tz('UTC')
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-
-		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
-	});
-
-	it('does not render header when showTooltipHeader is false', () => {
-		const uPlotInstance = createUPlotInstance(0);
-
-		renderTooltip({ uPlotInstance, showTooltipHeader: false });
-
-		const unexpectedTitle = dayjs(1 * 1000)
-			.tz('UTC')
-			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-
-		expect(screen.queryByText(unexpectedTitle)).not.toBeInTheDocument();
-	});
-
-	it('renders lightMode class when dark mode is disabled', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		mockUseIsDarkMode.mockReturnValue(false);
-
-		renderTooltip({ uPlotInstance });
-
-		const container = screen.getByTestId('uplot-tooltip-container');
-
-		expect(container).toHaveClass('lightMode');
-		expect(container).not.toHaveClass('darkMode');
-	});
-
-	it('renders darkMode class when dark mode is enabled', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		mockUseIsDarkMode.mockReturnValue(true);
-
-		renderTooltip({ uPlotInstance });
-
-		const container = screen.getByTestId('uplot-tooltip-container');
-
-		expect(container).toHaveClass('darkMode');
-		expect(container).not.toHaveClass('lightMode');
-	});
-
-	it('renders tooltip items when content is provided', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent()];
-
-		renderTooltip({ uPlotInstance, content });
-
-		const list = screen.queryByTestId('uplot-tooltip-list');
-
-		expect(list).not.toBeNull();
-
-		const marker = screen.getByTestId('uplot-tooltip-item-marker');
-		const itemContent = screen.getByTestId('uplot-tooltip-item-content');
-
-		expect(marker).toHaveStyle({ borderColor: '#ff0000' });
-		expect(itemContent).toHaveStyle({ color: '#ff0000', fontWeight: '700' });
-		expect(itemContent).toHaveTextContent('Series A: 10');
-	});
-
-	it('does not render tooltip list when content is empty', () => {
-		const uPlotInstance = createUPlotInstance(null);
-
-		renderTooltip({ uPlotInstance, content: [] });
-
-		const list = screen.queryByTestId('uplot-tooltip-list');
-
-		expect(list).toBeNull();
-	});
-
-	it('sets tooltip list height based on content length, height returned by Virtuoso', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent(), createTooltipContent()];
-
-		renderTooltip({ uPlotInstance, content });
-
-		const list = screen.getByTestId('uplot-tooltip-list');
-		expect(list).toHaveStyle({ height: '210px' });
-	});
-
-	it('sets tooltip list height based on content length when Virtuoso reports 0 height', () => {
-		const uPlotInstance = createUPlotInstance(null);
-		const content = [createTooltipContent(), createTooltipContent()];
-		mockTotalListHeight = 0;
-
-		renderTooltip({ uPlotInstance, content });
-
-		const list = screen.getByTestId('uplot-tooltip-list');
-		// Falls back to content length: 2 items * 38px = 76px
-		expect(list).toHaveStyle({ height: '76px' });
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/utils.test.ts

@@ -1,277 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import uPlot, { AlignedData, Series } from 'uplot';
-
-import { TooltipContentItem } from '../../types';
-import {
-	buildTooltipContent,
-	FALLBACK_SERIES_COLOR,
-	getTooltipBaseValue,
-	resolveSeriesColor,
-} from '../utils';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getToolTipValue: jest.fn(),
-}));
-
-const mockGetToolTipValue = getToolTipValue as jest.MockedFunction<
-	typeof getToolTipValue
->;
-
-function createUPlotInstance(): uPlot {
-	return ({
-		data: [],
-		cursor: { idx: 0 },
-	} as unknown) as uPlot;
-}
-
-describe('Tooltip utils', () => {
-	describe('resolveSeriesColor', () => {
-		it('returns string stroke when provided', () => {
-			const u = createUPlotInstance();
-			const stroke: Series.Stroke = '#ff0000';
-
-			const color = resolveSeriesColor(stroke, u, 1);
-
-			expect(color).toBe('#ff0000');
-		});
-
-		it('returns result of stroke function when provided', () => {
-			const u = createUPlotInstance();
-			const strokeFn: Series.Stroke = (uInstance, seriesIdx): string =>
-				`color-${seriesIdx}-${uInstance.cursor.idx}`;
-
-			const color = resolveSeriesColor(strokeFn, u, 2);
-
-			expect(color).toBe('color-2-0');
-		});
-
-		it('returns fallback color when stroke is not provided', () => {
-			const u = createUPlotInstance();
-
-			const color = resolveSeriesColor(undefined, u, 1);
-
-			expect(color).toBe(FALLBACK_SERIES_COLOR);
-		});
-	});
-
-	describe('getTooltipBaseValue', () => {
-		it('returns value from aligned data for non-stacked charts', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20],
-			];
-
-			const result = getTooltipBaseValue({
-				data,
-				index: 1,
-				dataIndex: 1,
-				isStackedBarChart: false,
-			});
-
-			expect(result).toBe(20);
-		});
-
-		it('returns null when value is missing', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[10, null],
-			];
-
-			const result = getTooltipBaseValue({
-				data,
-				index: 1,
-				dataIndex: 1,
-			});
-
-			expect(result).toBeNull();
-		});
-
-		it('subtracts next visible stacked value for stacked bar charts', () => {
-			// data[1] and data[2] contain stacked values at dataIndex 1
-			const data: AlignedData = [
-				[0, 1],
-				[30, 60], // series 1 stacked
-				[10, 20], // series 2 stacked
-			];
-
-			const series: Series[] = [
-				{ label: 'x', show: true } as Series,
-				{ label: 'A', show: true } as Series,
-				{ label: 'B', show: true } as Series,
-			];
-
-			const result = getTooltipBaseValue({
-				data,
-				index: 1,
-				dataIndex: 1,
-				isStackedBarChart: true,
-				series,
-			});
-
-			// 60 (stacked at series 1) - 20 (next visible stacked) = 40
-			expect(result).toBe(40);
-		});
-
-		it('skips hidden series when computing base value for stacked charts', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[30, 60], // series 1 stacked
-				[10, 20], // series 2 stacked but hidden
-				[5, 10], // series 3 stacked and visible
-			];
-
-			const series: Series[] = [
-				{ label: 'x', show: true } as Series,
-				{ label: 'A', show: true } as Series,
-				{ label: 'B', show: false } as Series,
-				{ label: 'C', show: true } as Series,
-			];
-
-			const result = getTooltipBaseValue({
-				data,
-				index: 1,
-				dataIndex: 1,
-				isStackedBarChart: true,
-				series,
-			});
-
-			// 60 (stacked at series 1) - 10 (next *visible* stacked, series 3) = 50
-			expect(result).toBe(50);
-		});
-
-		it('does not subtract when there is no next visible series', () => {
-			const data: AlignedData = [
-				[0, 1],
-				[10, 20], // series 1
-				[5, (null as unknown) as number], // series 2 missing
-			];
-
-			const series: Series[] = [
-				{ label: 'x', show: true } as Series,
-				{ label: 'A', show: true } as Series,
-				{ label: 'B', show: false } as Series,
-			];
-
-			const result = getTooltipBaseValue({
-				data,
-				index: 1,
-				dataIndex: 1,
-				isStackedBarChart: true,
-				series,
-			});
-
-			expect(result).toBe(20);
-		});
-	});
-
-	describe('buildTooltipContent', () => {
-		const yAxisUnit = 'ms';
-		const decimalPrecision: PrecisionOption = 2;
-
-		beforeEach(() => {
-			mockGetToolTipValue.mockReset();
-			mockGetToolTipValue.mockImplementation(
-				(value: string | number): string => `formatted-${value}`,
-			);
-		});
-
-		function createSeriesConfig(): Series[] {
-			return [
-				{ label: 'x', show: true } as Series,
-				{ label: 'A', show: true, stroke: '#ff0000' } as Series,
-				{
-					label: 'B',
-					show: true,
-					stroke: (_u: uPlot, idx: number): string => `color-${idx}`,
-				} as Series,
-				{ label: 'C', show: false, stroke: '#00ff00' } as Series,
-			];
-		}
-
-		it('builds tooltip content with active series first', () => {
-			const data: AlignedData = [[0], [10], [20], [30]];
-			const series = createSeriesConfig();
-			const dataIndexes = [null, 0, 0, 0];
-			const u = createUPlotInstance();
-
-			const result = buildTooltipContent({
-				data,
-				series,
-				dataIndexes,
-				activeSeriesIndex: 2,
-				uPlotInstance: u,
-				yAxisUnit,
-				decimalPrecision,
-			});
-
-			expect(result).toHaveLength(2);
-			// Active (series index 2) should come first
-			expect(result[0]).toMatchObject<Partial<TooltipContentItem>>({
-				label: 'B',
-				value: 20,
-				tooltipValue: 'formatted-20',
-				color: 'color-2',
-				isActive: true,
-			});
-			expect(result[1]).toMatchObject<Partial<TooltipContentItem>>({
-				label: 'A',
-				value: 10,
-				tooltipValue: 'formatted-10',
-				color: '#ff0000',
-				isActive: false,
-			});
-		});
-
-		it('skips series with null data index or non-finite values', () => {
-			const data: AlignedData = [[0], [42], [Infinity]];
-			const series: Series[] = [
-				{ label: 'x', show: true } as Series,
-				{ label: 'A', show: true, stroke: '#ff0000' } as Series,
-				{ label: 'B', show: true, stroke: '#00ff00' } as Series,
-			];
-			const dataIndexes = [null, 0, null];
-			const u = createUPlotInstance();
-
-			const result = buildTooltipContent({
-				data,
-				series,
-				dataIndexes,
-				activeSeriesIndex: 1,
-				uPlotInstance: u,
-				yAxisUnit,
-				decimalPrecision,
-			});
-
-			// Only the finite, non-null value from series A should be included
-			expect(result).toHaveLength(1);
-			expect(result[0].label).toBe('A');
-		});
-
-		it('uses stacked base values when building content for stacked bar charts', () => {
-			const data: AlignedData = [[0], [60], [30]];
-			const series: Series[] = [
-				{ label: 'x', show: true } as Series,
-				{ label: 'A', show: true, stroke: '#ff0000' } as Series,
-				{ label: 'B', show: true, stroke: '#00ff00' } as Series,
-			];
-			const dataIndexes = [null, 0, 0];
-			const u = createUPlotInstance();
-
-			const result = buildTooltipContent({
-				data,
-				series,
-				dataIndexes,
-				activeSeriesIndex: 1,
-				uPlotInstance: u,
-				yAxisUnit,
-				decimalPrecision,
-				isStackedBarChart: true,
-			});
-
-			// baseValue for series 1 at index 0 should be 60 - 30 (next visible) = 30
-			expect(result[0].value).toBe(30);
-			expect(result[1].value).toBe(30);
-		});
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/utils.ts

@@ -4,7 +4,7 @@ import uPlot, { AlignedData, Series } from 'uplot';
 
 import { TooltipContentItem } from '../types';
 
-export const FALLBACK_SERIES_COLOR = '#000000';
+const FALLBACK_SERIES_COLOR = '#000000';
 
 export function resolveSeriesColor(
 	stroke: Series.Stroke | undefined,

frontend/src/mocks-server/__mockdata__/roles.ts

@@ -0,0 +1,64 @@
+import { RoletypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+
+const orgId = '019ba2bb-2fa1-7b24-8159-cfca08617ef9';
+
+export const managedRoles: RoletypesRoleDTO[] = [
+	{
+		id: '019c24aa-2248-756f-9833-984f1ab63819',
+		createdAt: new Date('2026-02-03T18:00:55.624356Z'),
+		updatedAt: new Date('2026-02-03T18:00:55.624356Z'),
+		name: 'signoz-admin',
+		description:
+			'Role assigned to users who have full administrative access to SigNoz resources.',
+		type: 'managed',
+		orgId,
+	},
+	{
+		id: '019c24aa-2248-757c-9faf-7b1e899751e0',
+		createdAt: new Date('2026-02-03T18:00:55.624359Z'),
+		updatedAt: new Date('2026-02-03T18:00:55.624359Z'),
+		name: 'signoz-editor',
+		description:
+			'Role assigned to users who can create, edit, and manage SigNoz resources but do not have full administrative privileges.',
+		type: 'managed',
+		orgId,
+	},
+	{
+		id: '019c24aa-2248-7585-a129-4188b3473c27',
+		createdAt: new Date('2026-02-03T18:00:55.624362Z'),
+		updatedAt: new Date('2026-02-03T18:00:55.624362Z'),
+		name: 'signoz-viewer',
+		description:
+			'Role assigned to users who have read-only access to SigNoz resources.',
+		type: 'managed',
+		orgId,
+	},
+];
+
+export const customRoles: RoletypesRoleDTO[] = [
+	{
+		id: '019c24aa-3333-0001-aaaa-111111111111',
+		createdAt: new Date('2026-02-10T10:30:00.000Z'),
+		updatedAt: new Date('2026-02-12T14:20:00.000Z'),
+		name: 'billing-manager',
+		description: 'Custom role for managing billing and invoices.',
+		type: 'custom',
+		orgId,
+	},
+	{
+		id: '019c24aa-3333-0002-bbbb-222222222222',
+		createdAt: new Date('2026-02-11T09:00:00.000Z'),
+		updatedAt: new Date('2026-02-13T11:45:00.000Z'),
+		name: 'dashboard-creator',
+		description: 'Custom role allowing users to create and manage dashboards.',
+		type: 'custom',
+		orgId,
+	},
+];
+
+export const allRoles: RoletypesRoleDTO[] = [...managedRoles, ...customRoles];
+
+export const listRolesSuccessResponse = {
+	status: 'success',
+	data: allRoles,
+};

frontend/src/pages/Settings/Settings.tsx

@@ -77,6 +77,7 @@ function SettingsPage(): JSX.Element {
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.CUSTOM_DOMAIN_SETTINGS ||
 							item.key === ROUTES.API_KEYS ||
@@ -107,6 +108,7 @@ function SettingsPage(): JSX.Element {
 						...item,
 						isEnabled:
 							item.key === ROUTES.BILLING ||
+							item.key === ROUTES.ROLES_SETTINGS ||
 							item.key === ROUTES.INTEGRATIONS ||
 							item.key === ROUTES.API_KEYS ||
 							item.key === ROUTES.ORG_SETTINGS ||
@@ -134,7 +136,9 @@ function SettingsPage(): JSX.Element {
 					updatedItems = updatedItems.map((item) => ({
 						...item,
 						isEnabled:
-							item.key === ROUTES.API_KEYS || item.key === ROUTES.ORG_SETTINGS
+							item.key === ROUTES.API_KEYS ||
+							item.key === ROUTES.ORG_SETTINGS ||
+							item.key === ROUTES.ROLES_SETTINGS
 								? true
 								: item.isEnabled,
 					}));

frontend/src/pages/Settings/config.tsx

@@ -12,6 +12,7 @@ import IngestionSettings from 'container/IngestionSettings/IngestionSettings';
 import MultiIngestionSettings from 'container/IngestionSettings/MultiIngestionSettings';
 import MySettings from 'container/MySettings';
 import OrganizationSettings from 'container/OrganizationSettings';
+import RolesSettings from 'container/RolesSettings';
 import { TFunction } from 'i18next';
 import {
 	Backpack,
@@ -24,6 +25,7 @@ import {
 	KeySquare,
 	Pencil,
 	Plus,
+	Shield,
 	User,
 } from 'lucide-react';
 import ChannelsEdit from 'pages/ChannelsEdit';
@@ -148,6 +150,19 @@ export const billingSettings = (t: TFunction): RouteTabProps['routes'] => [
 	},
 ];
 
+export const rolesSettings = (t: TFunction): RouteTabProps['routes'] => [
+	{
+		Component: RolesSettings,
+		name: (
+			<div className="periscope-tab">
+				<Shield size={16} /> {t('routes:roles').toString()}
+			</div>
+		),
+		route: ROUTES.ROLES_SETTINGS,
+		key: ROUTES.ROLES_SETTINGS,
+	},
+];
+
 export const keyboardShortcuts = (t: TFunction): RouteTabProps['routes'] => [
 	{
 		Component: Shortcuts,

frontend/src/pages/Settings/utils.ts

@@ -15,6 +15,7 @@ import {
 	multiIngestionSettings,
 	mySettings,
 	organizationSettings,
+	rolesSettings,
 } from './config';
 
 export const getRoutes = (
@@ -66,6 +67,10 @@ export const getRoutes = (
 		settings.push(...customDomainSettings(t), ...billingSettings(t));
 	}
 
+	if (isAdmin) {
+		settings.push(...rolesSettings(t));
+	}
+
 	settings.push(
 		...mySettings(t),
 		...createAlertChannels(t),

frontend/src/utils/errorUtils.ts

@@ -1,3 +1,8 @@
+import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
+import { AxiosError } from 'axios';
+import { ErrorV2Resp } from 'types/api';
+import APIError from 'types/api/error';
+
 /**
  * Extracts HTTP status code from various error types
  * @param error - The error object (could be APIError, AxiosError, or other error types)
@@ -28,3 +33,25 @@ export const isRetryableError = (error: any): boolean => {
 	// If no status code is available, default to retryable
 	return !statusCode || statusCode >= 500;
 };
+
+export function toAPIError(
+	error: unknown,
+	defaultMessage = 'An unexpected error occurred.',
+): APIError {
+	try {
+		ErrorResponseHandlerV2(error as AxiosError<ErrorV2Resp>);
+	} catch (apiError) {
+		if (apiError instanceof APIError) {
+			return apiError;
+		}
+	}
+	return new APIError({
+		httpStatusCode: 500,
+		error: {
+			code: 'UNKNOWN_ERROR',
+			message: defaultMessage,
+			url: '',
+			errors: [],
+		},
+	});
+}

frontend/src/utils/permission/index.ts

@@ -97,6 +97,7 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	GET_STARTED_AZURE_MONITORING: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_LOCKED: ['ADMIN', 'EDITOR', 'VIEWER'],
 	WORKSPACE_SUSPENDED: ['ADMIN', 'EDITOR', 'VIEWER'],
+	ROLES_SETTINGS: ['ADMIN'],
 	BILLING: ['ADMIN'],
 	SUPPORT: ['ADMIN', 'EDITOR', 'VIEWER'],
 	SOMETHING_WENT_WRONG: ['ADMIN', 'EDITOR', 'VIEWER'],

pkg/apiserver/signozapiserver/provider.go

@@ -22,6 +22,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/user"
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
+	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/gorilla/mux"
 )
 
@@ -44,6 +45,7 @@ type provider struct {
 	gatewayHandler         gateway.Handler
 	fieldsHandler          fields.Handler
 	authzHandler           authz.Handler
+	zeusHandler            zeus.Handler
 }
 
 func NewFactory(
@@ -63,6 +65,7 @@ func NewFactory(
 	gatewayHandler gateway.Handler,
 	fieldsHandler fields.Handler,
 	authzHandler authz.Handler,
+	zeusHandler zeus.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
 	return factory.NewProviderFactory(factory.MustNewName("signoz"), func(ctx context.Context, providerSettings factory.ProviderSettings, config apiserver.Config) (apiserver.APIServer, error) {
 		return newProvider(
@@ -85,6 +88,7 @@ func NewFactory(
 			gatewayHandler,
 			fieldsHandler,
 			authzHandler,
+			zeusHandler,
 		)
 	})
 }
@@ -109,6 +113,7 @@ func newProvider(
 	gatewayHandler gateway.Handler,
 	fieldsHandler fields.Handler,
 	authzHandler authz.Handler,
+	zeusHandler zeus.Handler,
 ) (apiserver.APIServer, error) {
 	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/pkg/apiserver/signozapiserver")
 	router := mux.NewRouter().UseEncodedPath()
@@ -131,6 +136,7 @@ func newProvider(
 		gatewayHandler:         gatewayHandler,
 		fieldsHandler:          fieldsHandler,
 		authzHandler:           authzHandler,
+		zeusHandler:            zeusHandler,
 	}
 
 	provider.authZ = middleware.NewAuthZ(settings.Logger(), orgGetter, authz)
@@ -199,6 +205,10 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
+	if err := provider.addZeusRoutes(router); err != nil {
+		return err
+	}
+
 	return nil
 }
 

pkg/apiserver/signozapiserver/zeus.go

@@ -0,0 +1,65 @@
+package signozapiserver
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/http/handler"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
+	"github.com/gorilla/mux"
+)
+
+func (provider *provider) addZeusRoutes(router *mux.Router) error {
+	if err := router.Handle("/api/v2/zeus/profiles", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.PutProfile), handler.OpenAPIDef{
+		ID:                  "PutProfile",
+		Tags:                []string{"zeus"},
+		Summary:             "Put profile in Zeus for a deployment.",
+		Description:         "This endpoint saves the profile of a deployment to zeus.",
+		Request:             new(zeustypes.PostableProfile),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/zeus/hosts", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.GetHosts), handler.OpenAPIDef{
+		ID:                  "GetHosts",
+		Tags:                []string{"zeus"},
+		Summary:             "Get host info from Zeus.",
+		Description:         "This endpoint gets the host info from zeus.",
+		Request:             nil,
+		RequestContentType:  "",
+		Response:            new(zeustypes.GettableHost),
+		ResponseContentType: "application/json",
+		SuccessStatusCode:   http.StatusOK,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v2/zeus/hosts", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.PutHost), handler.OpenAPIDef{
+		ID:                  "PutHost",
+		Tags:                []string{"zeus"},
+		Summary:             "Put host in Zeus for a deployment.",
+		Description:         "This endpoint saves the host of a deployment to zeus.",
+		Request:             new(zeustypes.PostableHost),
+		RequestContentType:  "application/json",
+		Response:            nil,
+		ResponseContentType: "",
+		SuccessStatusCode:   http.StatusNoContent,
+		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound, http.StatusConflict},
+		Deprecated:          false,
+		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+	})).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	return nil
+}

pkg/signoz/handler.go

@@ -31,6 +31,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/tracefunnel/impltracefunnel"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
 type Handlers struct {
@@ -48,6 +49,7 @@ type Handlers struct {
 	GatewayHandler  gateway.Handler
 	Fields          fields.Handler
 	AuthzHandler    authz.Handler
+	ZeusHandler     zeus.Handler
 }
 
 func NewHandlers(
@@ -60,6 +62,7 @@ func NewHandlers(
 	gatewayService gateway.Gateway,
 	telemetryMetadataStore telemetrytypes.MetadataStore,
 	authz authz.AuthZ,
+	zeusService zeus.Zeus,
 ) Handlers {
 	return Handlers{
 		SavedView:       implsavedview.NewHandler(modules.SavedView),
@@ -76,5 +79,6 @@ func NewHandlers(
 		GatewayHandler:  gateway.NewHandler(gatewayService),
 		Fields:          implfields.NewHandler(providerSettings, telemetryMetadataStore),
 		AuthzHandler:    signozauthzapi.NewHandler(authz),
+		ZeusHandler:     zeus.NewHandler(zeusService, licensing),
 	}
 }

pkg/signoz/handler_test.go

@@ -42,7 +42,7 @@ func TestNewHandlers(t *testing.T) {
 	dashboardModule := impldashboard.NewModule(impldashboard.NewStore(sqlstore), providerSettings, nil, orgGetter, queryParser)
 	modules := NewModules(sqlstore, tokenizer, emailing, providerSettings, orgGetter, alertmanager, nil, nil, nil, nil, nil, nil, nil, queryParser, Config{}, dashboardModule)
 
-	handlers := NewHandlers(modules, providerSettings, nil, nil, nil, nil, nil, nil, nil)
+	handlers := NewHandlers(modules, providerSettings, nil, nil, nil, nil, nil, nil, nil, nil)
 	reflectVal := reflect.ValueOf(handlers)
 	for i := 0; i < reflectVal.NumField(); i++ {
 		f := reflectVal.Field(i)

pkg/signoz/openapi.go

@@ -28,6 +28,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/types/ctxtypes"
 	"github.com/gorilla/mux"
+	"github.com/SigNoz/signoz/pkg/zeus"
 	"github.com/swaggest/jsonschema-go"
 	"github.com/swaggest/openapi-go"
 	"github.com/swaggest/openapi-go/openapi3"
@@ -58,6 +59,7 @@ func NewOpenAPI(ctx context.Context, instrumentation instrumentation.Instrumenta
 		struct{ gateway.Handler }{},
 		struct{ fields.Handler }{},
 		struct{ authz.Handler }{},
+		struct{ zeus.Handler }{},
 	).New(ctx, instrumentation.ToProviderSettings(), apiserver.Config{})
 	if err != nil {
 		return nil, err

pkg/signoz/provider.go

@@ -252,6 +252,7 @@ func NewAPIServerProviderFactories(orgGetter organization.Getter, authz authz.Au
 			handlers.GatewayHandler,
 			handlers.Fields,
 			handlers.AuthzHandler,
+			handlers.ZeusHandler,
 		),
 	)
 }

pkg/signoz/signoz.go

@@ -392,7 +392,7 @@ func New(
 	userService := impluser.NewService(providerSettings, impluser.NewStore(sqlstore, providerSettings), modules.User, orgGetter, authz, config.User.Root)
 
 	// Initialize all handlers for the modules
-	handlers := NewHandlers(modules, providerSettings, querier, licensing, global, flagger, gateway, telemetryMetadataStore, authz)
+	handlers := NewHandlers(modules, providerSettings, querier, licensing, global, flagger, gateway, telemetryMetadataStore, authz, zeus)
 
 	// Initialize the API server
 	apiserver, err := factory.NewProviderFromNamedMap(

pkg/telemetrystore/clickhousetelemetrystore/provider.go

@@ -40,7 +40,6 @@ func New(ctx context.Context, providerSettings factory.ProviderSettings, config
 		return nil, err
 	}
 
-
 	hooks := make([]telemetrystore.TelemetryStoreHook, len(hookFactories))
 	for i, hookFactory := range hookFactories {
 		hook, err := hookFactory.New(ctx, providerSettings, config)
@@ -83,11 +82,18 @@ func (p *provider) Query(ctx context.Context, query string, args ...interface{})
 
 	ctx = telemetrystore.WrapBeforeQuery(p.hooks, ctx, event)
 	rows, err := p.clickHouseConn.Query(ctx, query, args...)
+	if err != nil {
+		event.Err = err
+		telemetrystore.WrapAfterQuery(p.hooks, ctx, event)
+		return nil, err
+	}
 
-	event.Err = err
-	telemetrystore.WrapAfterQuery(p.hooks, ctx, event)
-
-	return rows, err
+	return &rowsWithHooks{
+		Rows:    rows,
+		ctx:     ctx,
+		event:   event,
+		onClose: func() { telemetrystore.WrapAfterQuery(p.hooks, ctx, event) },
+	}, nil
 }
 
 func (p *provider) QueryRow(ctx context.Context, query string, args ...interface{}) driver.Row {

pkg/telemetrystore/clickhousetelemetrystore/rows.go

@@ -0,0 +1,37 @@
+package clickhousetelemetrystore
+
+import (
+	"context"
+
+	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+)
+
+// rowsWithHooks wraps driver.Rows and defers AfterQuery hooks until Close(),
+// so the instrumentation span covers the full query lifecycle including row consumption.
+type rowsWithHooks struct {
+	driver.Rows
+	ctx     context.Context
+	event   *telemetrystore.QueryEvent
+	onClose func()
+	closed  bool
+}
+
+func (r *rowsWithHooks) Close() error {
+	// delegate to the original rows.Close() if already closed
+	if r.closed {
+		return r.Rows.Close()
+	}
+
+	// mark as closed and run the onClose hook
+	r.closed = true
+	if err := r.Rows.Err(); err != nil {
+		r.event.Err = err
+	}
+	closeErr := r.Rows.Close()
+	if closeErr != nil {
+		r.event.Err = closeErr
+	}
+	r.onClose()
+	return closeErr
+}

pkg/types/gatewaytypes/ingestionkey.go

@@ -60,7 +60,7 @@ type IngestionKeysParams struct {
 }
 
 type SearchIngestionKeysParams struct {
-	Name    string `query:"name"`
+	Name    string `query:"name" required:"true"`
 	Page    int    `query:"page"`
 	PerPage int    `query:"per_page"`
 }
@@ -71,14 +71,14 @@ type GettableIngestionKeys struct {
 }
 
 type PostableIngestionKey struct {
-	Name      string    `json:"name"`
+	Name      string    `json:"name" required:"true"`
 	Tags      []string  `json:"tags"`
 	ExpiresAt time.Time `json:"expires_at"`
 }
 
 type GettableCreatedIngestionKey struct {
-	ID    string `json:"id"`
-	Value string `json:"value"`
+	ID    string `json:"id" required:"true"`
+	Value string `json:"value" required:"true"`
 }
 
 type PostableIngestionKeyLimit struct {
@@ -88,10 +88,10 @@ type PostableIngestionKeyLimit struct {
 }
 
 type GettableCreatedIngestionKeyLimit struct {
-	ID string `json:"id"`
+	ID string `json:"id" required:"true"`
 }
 
 type UpdatableIngestionKeyLimit struct {
-	Config LimitConfig `json:"config"`
+	Config LimitConfig `json:"config" required:"true"`
 	Tags   []string    `json:"tags"`
 }

pkg/types/zeustypes/types.go

@@ -0,0 +1,58 @@
+package zeustypes
+
+import (
+	"net/url"
+
+	"github.com/tidwall/gjson"
+)
+
+type PostableHost struct {
+	Name string `json:"name" required:"true"`
+}
+
+type PostableProfile struct {
+	UsesOtel                     bool     `json:"uses_otel" required:"true"`
+	HasExistingObservabilityTool bool     `json:"has_existing_observability_tool" required:"true"`
+	ExistingObservabilityTool    string   `json:"existing_observability_tool" required:"true"`
+	ReasonsForInterestInSigNoz   []string `json:"reasons_for_interest_in_signoz" required:"true"`
+	LogsScalePerDayInGB          int64    `json:"logs_scale_per_day_in_gb" required:"true"`
+	NumberOfServices             int64    `json:"number_of_services" required:"true"`
+	NumberOfHosts                int64    `json:"number_of_hosts" required:"true"`
+	WhereDidYouDiscoverSigNoz    string   `json:"where_did_you_discover_signoz" required:"true"`
+	TimelineForMigratingToSigNoz string   `json:"timeline_for_migrating_to_signoz" required:"true"`
+}
+
+type GettableHost struct {
+	Name  string `json:"name" required:"true"`
+	State string `json:"state" required:"true"`
+	Tier  string `json:"tier" required:"true"`
+	Hosts []Host `json:"hosts" required:"true"`
+}
+
+type Host struct {
+	Name      string `json:"name" required:"true"`
+	IsDefault bool   `json:"is_default" required:"true"`
+	URL       string `json:"url" required:"true"`
+}
+
+func NewGettableHost(data []byte) *GettableHost {
+	parsed := gjson.ParseBytes(data)
+	dns := parsed.Get("cluster.region.dns").String()
+
+	hostResults := parsed.Get("hosts").Array()
+	hosts := make([]Host, len(hostResults))
+
+	for i, h := range hostResults {
+		name := h.Get("name").String()
+		hosts[i].Name = name
+		hosts[i].IsDefault = h.Get("is_default").Bool()
+		hosts[i].URL = (&url.URL{Scheme: "https", Host: name + "." + dns}).String()
+	}
+
+	return &GettableHost{
+		Name:  parsed.Get("name").String(),
+		State: parsed.Get("state").String(),
+		Tier:  parsed.Get("tier").String(),
+		Hosts: hosts,
+	}
+}

pkg/zeus/handler.go

@@ -0,0 +1,114 @@
+package zeus
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/http/binding"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type handler struct {
+	zeus      Zeus
+	licensing licensing.Licensing
+}
+
+func NewHandler(zeus Zeus, licensing licensing.Licensing) Handler {
+	return &handler{
+		zeus:      zeus,
+		licensing: licensing,
+	}
+}
+
+func (h *handler) PutProfile(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	license, err := h.licensing.GetActive(ctx, valuer.MustNewUUID(claims.OrgID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := new(zeustypes.PostableProfile)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if err := h.zeus.PutProfile(ctx, license.Key, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+func (h *handler) GetHosts(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	license, err := h.licensing.GetActive(ctx, valuer.MustNewUUID(claims.OrgID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	deploymentBytes, err := h.zeus.GetDeployment(ctx, license.Key)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	response := zeustypes.NewGettableHost(deploymentBytes)
+
+	render.Success(rw, http.StatusOK, response)
+}
+
+func (h *handler) PutHost(rw http.ResponseWriter, r *http.Request) {
+	ctx := r.Context()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	license, err := h.licensing.GetActive(ctx, valuer.MustNewUUID(claims.OrgID))
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	req := new(zeustypes.PostableHost)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if req.Name == "" {
+		render.Error(rw, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "name is required"))
+		return
+	}
+
+	if err := h.zeus.PutHost(ctx, license.Key, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}

pkg/zeus/noopzeus/provider.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 	"github.com/SigNoz/signoz/pkg/zeus"
 )
 
@@ -40,10 +41,10 @@ func (provider *provider) PutMeters(_ context.Context, _ string, _ []byte) error
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting meters is not supported")
 }
 
-func (provider *provider) PutProfile(_ context.Context, _ string, _ []byte) error {
+func (provider *provider) PutProfile(_ context.Context, _ string, _ *zeustypes.PostableProfile) error {
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting profile is not supported")
 }
 
-func (provider *provider) PutHost(_ context.Context, _ string, _ []byte) error {
+func (provider *provider) PutHost(_ context.Context, _ string, _ *zeustypes.PostableHost) error {
 	return errors.New(errors.TypeUnsupported, zeus.ErrCodeUnsupported, "putting host is not supported")
 }

pkg/zeus/zeus.go

@@ -2,8 +2,10 @@ package zeus
 
 import (
 	"context"
+	"net/http"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/types/zeustypes"
 )
 
 var (
@@ -28,8 +30,19 @@ type Zeus interface {
 	PutMeters(context.Context, string, []byte) error
 
 	// Put profile for the given license key.
-	PutProfile(context.Context, string, []byte) error
+	PutProfile(context.Context, string, *zeustypes.PostableProfile) error
 
 	// Put host for the given license key.
-	PutHost(context.Context, string, []byte) error
+	PutHost(context.Context, string, *zeustypes.PostableHost) error
+}
+
+type Handler interface {
+	// API level handler for PutProfile
+	PutProfile(http.ResponseWriter, *http.Request)
+
+	// API level handler for getting hosts a slim wrapper around GetDeployment
+	GetHosts(http.ResponseWriter, *http.Request)
+
+	// API level handler for PutHost
+	PutHost(http.ResponseWriter, *http.Request)
 }