chore: temp commit

* feat: added new time-series graph

* chore: updated types for charts

.claude/CLAUDE.md

@@ -1,136 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-SigNoz is an open-source observability platform (APM, logs, metrics, traces) built on OpenTelemetry and ClickHouse. It provides a unified solution for monitoring applications with features including distributed tracing, log management, metrics dashboards, and alerting.
-
-## Build and Development Commands
-
-### Development Environment Setup
-```bash
-make devenv-up              # Start ClickHouse and OTel Collector for local dev
-make devenv-clickhouse      # Start only ClickHouse
-make devenv-signoz-otel-collector  # Start only OTel Collector
-make devenv-clickhouse-clean       # Clean ClickHouse data
-```
-
-### Backend (Go)
-```bash
-make go-run-community       # Run community backend server
-make go-run-enterprise      # Run enterprise backend server
-make go-test                # Run all Go unit tests
-go test -race ./pkg/...     # Run tests for specific package
-go test -race ./pkg/querier/...  # Example: run querier tests
-```
-
-### Integration Tests (Python)
-```bash
-cd tests/integration
-uv sync                     # Install dependencies
-make py-test-setup          # Start test environment (keep running with --reuse)
-make py-test                # Run all integration tests
-make py-test-teardown       # Stop test environment
-
-# Run specific test
-uv run pytest --basetemp=./tmp/ -vv --reuse src/<suite>/<file>.py::test_name
-```
-
-### Code Quality
-```bash
-# Go linting (golangci-lint)
-golangci-lint run
-
-# Python formatting/linting
-make py-fmt                 # Format with black
-make py-lint                # Run isort, autoflake, pylint
-```
-
-### OpenAPI Generation
-```bash
-go run cmd/enterprise/*.go generate openapi
-```
-
-## Architecture Overview
-
-### Backend Structure
-
-The Go backend follows a **provider pattern** for dependency injection:
-
-- **`pkg/signoz/`** - IoC container that wires all providers together
-- **`pkg/modules/`** - Business logic modules (user, organization, dashboard, etc.)
-- **`pkg/<provider>/`** - Provider implementations following consistent structure:
-  - `<name>.go` - Interface definition
-  - `config.go` - Configuration (implements `factory.Config`)
-  - `<implname><name>/provider.go` - Implementation
-  - `<name>test/` - Mock implementations for testing
-
-### Key Packages
-- **`pkg/querier/`** - Query engine for telemetry data (logs, traces, metrics)
-- **`pkg/telemetrystore/`** - ClickHouse telemetry storage interface
-- **`pkg/sqlstore/`** - Relational database (SQLite/PostgreSQL) for metadata
-- **`pkg/apiserver/`** - HTTP API server with OpenAPI integration
-- **`pkg/alertmanager/`** - Alert management
-- **`pkg/authn/`, `pkg/authz/`** - Authentication and authorization
-- **`pkg/flagger/`** - Feature flags (OpenFeature-based)
-- **`pkg/errors/`** - Structured error handling
-
-### Enterprise vs Community
-- **`cmd/community/`** - Community edition entry point
-- **`cmd/enterprise/`** - Enterprise edition entry point
-- **`ee/`** - Enterprise-only features
-
-## Code Conventions
-
-### Error Handling
-Use the custom `pkg/errors` package instead of standard library:
-```go
-errors.New(typ, code, message)           // Instead of errors.New()
-errors.Newf(typ, code, message, args...) // Instead of fmt.Errorf()
-errors.Wrapf(err, typ, code, msg)        // Wrap with context
-```
-
-Define domain-specific error codes:
-```go
-var CodeThingNotFound = errors.MustNewCode("thing_not_found")
-```
-
-### HTTP Handlers
-Handlers are thin adapters in modules that:
-1. Extract auth context from request
-2. Decode request body using `binding` package
-3. Call module functions
-4. Return responses using `render` package
-
-Register routes in `pkg/apiserver/signozapiserver/` with `handler.New()` and `OpenAPIDef`.
-
-### SQL/Database
-- Use Bun ORM via `sqlstore.BunDBCtx(ctx)`
-- Star schema with `organizations` as central entity
-- All tables have `id`, `created_at`, `updated_at`, `org_id` columns
-- Write idempotent migrations in `pkg/sqlmigration/`
-- No `ON CASCADE` deletes - handle in application logic
-
-### REST Endpoints
-- Use plural resource names: `/v1/organizations`, `/v1/users`
-- Use `me` for current user/org: `/v1/organizations/me/users`
-- Follow RESTful conventions for CRUD operations
-
-### Linting Rules (from .golangci.yml)
-- Don't use `errors` package - use `pkg/errors`
-- Don't use `zap` logger - use `slog`
-- Don't use `fmt.Errorf` or `fmt.Print*`
-
-## Testing
-
-### Unit Tests
-- Run with race detector: `go test -race ./...`
-- Provider mocks are in `<provider>test/` packages
-
-### Integration Tests
-- Located in `tests/integration/`
-- Use pytest with testcontainers
-- Files prefixed with numbers for execution order (e.g., `01_database.py`)
-- Always use `--reuse` flag during development
-- Fixtures in `tests/integration/fixtures/`

.claude/skills/commit/SKILL.md

@@ -1,37 +0,0 @@
----
-name: commit
-description: Create a conventional commit with staged changes
-allowed-tools: Bash(git commit:*)
----
-
-# Create Conventional Commit
-
-Commit staged changes using conventional commit format: `type(scope): description`
-
-## Types
-
-- `feat:` - New feature
-- `fix:` - Bug fix
-- `chore:` - Maintenance/refactor/tooling
-- `test:` - Tests only
-- `docs:` - Documentation
-
-## Process
-
-1. Review staged changes: `git diff --cached`
-2. Determine type, optional scope, and description (imperative, <70 chars)
-3. Commit using HEREDOC:
-   ```bash
-   git commit -m "$(cat <<'EOF'
-   type(scope): description
-   EOF
-   )"
-   ```
-4. Verify: `git log -1`
-
-## Notes
-
-- Description: imperative mood, lowercase, no period
-- Body: explain WHY, not WHAT (code shows what). Keep it concise and brief.
-- Do not include co-authored by claude in commit message, we want ownership and accountability to remain with the human contributor.
-- Do not automatically add files to stage unless asked to.

.claude/skills/raise-pr/SKILL.md

@@ -1,55 +0,0 @@
----
-name: raise-pr
-description: Create a pull request with auto-filled template. Pass 'commit' to commit staged changes first.
-allowed-tools: Bash(gh:*, git:*), Read
-argument-hint: [commit?]
----
-
-# Raise Pull Request
-
-Create a PR with auto-filled template from commits after origin/main.
-
-## Arguments
-
-- No argument: Create PR with existing commits
-- `commit`: Commit staged changes first, then create PR
-
-## Process
-
-1. **If `$ARGUMENTS` is "commit"**: Review staged changes and commit with descriptive message
-    - Check for staged changes: `git diff --cached --stat`
-    - If changes exist:
-        - Review the changes: `git diff --cached`
-        - Use commit skill for making the commit, i.e. follow conventional commit practices
-        - Commit command: `git commit -m "message"`
-
-2. **Analyze commits since origin/main**:
-   - `git log origin/main..HEAD --pretty=format:"%s%n%b"` - get commit messages
-   - `git diff origin/main...HEAD --stat` - see changes
-
-3. **Read template**: `.github/pull_request_template.md`
-
-4. **Generate PR**:
-   - **Title**: Short (<70 chars), from commit messages or main change
-   - **Body**: Fill template sections based on commits/changes, keep these minimal and to the point:
-     - Summary (why/what/approach) - end with "Closes #<issue_number>" if issue number is available from branch name (git branch --show-current)
-     - Change Type checkboxes
-     - Bug Context (if applicable)
-     - Testing Strategy
-     - Risk Assessment
-     - Changelog (if user-facing)
-     - Checklist
-
-5. **Create PR**:
-   ```bash
-   git push -u origin $(git branch --show-current)
-   gh pr create --base main --title "..." --body "..."
-   gh pr view
-   ```
-
-## Notes
-
-- Analyze ALL commits messages from origin/main to HEAD
-- Fill template sections based on commit messages, look into code changes if messages doesn't have all the context.
-- Leave template sections as they are if you can't determine the content
-- Don't add the changes to git stage, only commit or push whatever user has already staged

.claude/skills/review/SKILL.md

@@ -1,228 +0,0 @@
----
-name: review
-description: Review code changes for bugs, performance issues, and SigNoz convention compliance
-allowed-tools: Bash(git:*, gh:*), Read, Glob, Grep
----
-
-# Review Command
-
-Perform a thorough code review following SigNoz's coding conventions and contributing guidelines and for feature intent completion.
-
-## Usage
-
-Invoke this command to review code changes with actionable and concise feedback.
-
-## Process
-
-1. **Determine scope**:
-   - Ask user what to review if not specified:
-     - Current git diff (staged or unstaged)
-     - All changes since origin/main or a commit range
-
-2. **Gather context**:
-   ```bash
-   # For current changes
-   git diff --cached           # Staged changes
-   git diff                    # Unstaged changes
-
-   # For commit range
-   git diff origin/main...HEAD # All changes since main
-   
-   # for last commit only
-   git diff HEAD~1..HEAD
-   ```
-
-3. **Read all relevant files thoroughly**:
-   - Understand the context and purpose of changes
-
-4. **Review against SigNoz guidelines**:
-   - **Frontend**: Check [Frontend Guidelines](../../frontend/CONTRIBUTIONS.md)
-   - **Backend/Architecture**: Check [CLAUDE.md](../CLAUDE.md) for provider pattern, error handling, SQL, REST, and linting conventions
-   - **General**: Check [Contributing Guidelines](../../CONTRIBUTING.md)
-   - **Commits**: Verify [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
-
-5. **Verify feature intent**:
-   - Read the PR description, commit message, or linked issue to understand *what* the change claims to do
-   - Trace the code path end-to-end to confirm the change actually achieves its stated goal
-   - Check that the happy path works as described
-   - Identify any scenarios where the feature silently does nothing or produces wrong results
-
-6. **Review for bug introduction**:
-   - **Regressions**: Does the change break existing behavior? Check callers of modified functions/interfaces
-   - **Edge cases**: Empty inputs, nil/undefined values, boundary conditions, concurrent access
-   - **Error paths**: Are all error cases handled? Can errors be swallowed silently?
-   - **State management**: Are state transitions correct? Can state become inconsistent?
-   - **Race conditions**: Shared mutable state, async operations, missing locks or guards
-   - **Type mismatches**: Unsafe casts, implicit conversions, `any` usage hiding real types
-
-7. **Review for performance implications**:
-   - **Backend**: N+1 queries, missing indexes, unbounded result sets, large allocations in hot paths, unnecessary DB round-trips
-   - **Frontend**: Unnecessary re-renders from inline objects/functions as props, missing memoization on expensive computations, large bundle imports that should be lazy-loaded, unthrottled event handlers
-   - **General**: O(n²) or worse algorithms on potentially large datasets, unnecessary network calls, missing pagination or limits
-
-8. **Provide actionable, concise feedback** in structured format
-
-## Review Checklist
-
-For coding conventions and style, refer to the linked guideline docs. This checklist focuses on **review-specific concerns** that guidelines alone don't catch.
-
-### Correctness & Intent
-- [ ] Change achieves what the PR/commit/issue describes
-- [ ] Happy path works end-to-end
-- [ ] Edge cases handled (empty, nil, boundary, concurrent)
-- [ ] Error paths don't swallow failures silently
-- [ ] No regressions to existing callers of modified code
-
-### Security
-- [ ] No exposed secrets, API keys, credentials
-- [ ] No sensitive data in logs
-- [ ] Input validation at system boundaries
-- [ ] Authentication/authorization checked for new endpoints
-- [ ] No SQL injection or XSS risks
-
-### Performance
-- [ ] No N+1 queries or unbounded result sets
-- [ ] No unnecessary re-renders (inline objects/functions as props, missing memoization)
-- [ ] No large imports that should be lazy-loaded
-- [ ] No O(n²) on potentially large datasets
-- [ ] Pagination/limits present where needed
-
-### Testing
-- [ ] Edge cases and error paths tested
-- [ ] Tests are deterministic (no flakiness)
-
-## Output Format
-
-Provide feedback in this structured format:
-
-```markdown
-## Code Review
-
-**Scope**: [What was reviewed]
-**Overall**: [1-2 sentence summary and general sentiment]
-
----
-
-### 🚨 Critical Issues (Must Fix)
-
-1. **[Category]** `file:line`
-   **Problem**: [What's wrong]
-   **Why**: [Why it matters]
-   **Fix**: [Specific solution]
-   ```[language]
-   // Example fix if helpful
-   ```
-
-### ⚠️ Suggestions (Should Consider)
-
-1. **[Category]** `file:line`
-   **Issue**: [What could be improved]
-   **Suggestion**: [Concrete improvement]
-
----
-
-**References**:
-- [Relevant guideline links]
-```
-
-## Review Categories
-
-Use these categories for issues:
-
-- **Bug / Regression**: Logic errors, edge cases, race conditions, broken existing behavior
-- **Feature Gap**: Change doesn't fully achieve its stated intent
-- **Security Risk**: Authentication, authorization, data exposure, injection
-- **Performance Issue**: Inefficient queries, unnecessary re-renders, memory leaks, unbounded data
-- **Convention Violation**: Style, patterns, architectural guidelines (link to relevant guideline doc)
-- **Code Quality**: Complexity, duplication, naming, type safety
-- **Testing**: Missing tests, inadequate coverage, flaky tests
-
-## Example Review
-
-```markdown
-## Code Review
-
-**Scope**: Changes in `frontend/src/pages/TraceDetail/` (3 files, 245 additions)
-**Overall**: Good implementation of pagination feature. Found 2 critical issues and 3 suggestions.
-
----
-
-### 🚨 Critical Issues (Must Fix)
-
-1. **Security Risk** `TraceList.tsx:45`
-   **Problem**: API token exposed in client-side code
-   **Why**: Security vulnerability - tokens should never be in frontend
-   **Fix**: Move authentication to backend, use session-based auth
-
-2. **Performance Issue** `TraceList.tsx:89`
-   **Problem**: Inline function passed as prop causes unnecessary re-renders
-   **Why**: Violates frontend guideline, degrades performance with large lists
-   **Fix**:
-   ```typescript
-   const handleTraceClick = useCallback((traceId: string) => {
-     navigate(`/trace/${traceId}`);
-   }, [navigate]);
-   ```
-
-### ⚠️ Suggestions (Should Consider)
-
-1. **Code Quality** `TraceList.tsx:120-180`
-   **Issue**: Function exceeds 40-line guideline
-   **Suggestion**: Extract into smaller functions:
-   - `filterTracesByTimeRange()`
-   - `aggregateMetrics()`
-   - `renderChartData()`
-
-2. **Type Safety** `types.ts:23`
-   **Issue**: Using `any` for trace attributes
-   **Suggestion**: Define proper interface for TraceAttributes
-
-3. **Convention** `TraceList.tsx:12`
-   **Issue**: File imports not organized
-   **Suggestion**: Let simple-import-sort auto-organize (will happen on save)
-
----
-
-**References**:
-- [Frontend Guidelines](../../frontend/CONTRIBUTIONS.md)
-- [useCallback best practices](https://kentcdodds.com/blog/usememo-and-usecallback)
-```
-
-## Tone Guidelines
-
-- **Be respectful**: Focus on code, not the person
-- **Be specific**: Always reference exact file:line locations
-- **Be concise**: Get to the point, avoid verbosity
-- **Be actionable**: Every comment should have clear resolution path
-- **Be educational**: Explain why something is an issue, link to guidelines
-
-## Priority Levels
-
-1. **Critical (🚨)**: Security, bugs, data corruption, crashes
-2. **Important (⚠️)**: Performance, maintainability, convention violations
-3. **Nice to have (💡)**: Style preferences, micro-optimizations
-
-## Important Notes
-
-- **Reference specific guidelines** from docs when applicable
-- **Provide code examples** for fixes when helpful
-- **Ask questions** if code intent is unclear
-- **Link to external resources** for educational value
-- **Distinguish** must-fix from should-consider
-- **Be concise** - reviewers value their time
-
-## Critical Rules
-
-- **NEVER** be vague - always specify file and line number
-- **NEVER** just point out problems - suggest solutions
-- **NEVER** review without reading the actual code
-- **ALWAYS** check against SigNoz's specific guidelines
-- **ALWAYS** provide rationale for each comment
-- **ALWAYS** be constructive and respectful
-
-## Reference Documents
-
-- [Frontend Guidelines](../../frontend/CONTRIBUTIONS.md) - React, TypeScript, styling
-- [Contributing Guidelines](../../CONTRIBUTING.md) - Workflow, commit conventions
-- [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) - Commit format
-- [CLAUDE.md](../CLAUDE.md) - Project architecture and conventions

.devenv/docker/clickhouse/compose.yaml

@@ -42,7 +42,7 @@ services:
       timeout: 5s
       retries: 3
   schema-migrator-sync:
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.13
     container_name: schema-migrator-sync
     command:
       - sync
@@ -55,7 +55,7 @@ services:
         condition: service_healthy
     restart: on-failure
   schema-migrator-async:
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.13
     container_name: schema-migrator-async
     command:
       - async

.github/CODEOWNERS

@@ -110,6 +110,7 @@
 # Dashboard Owners
 
 /frontend/src/hooks/dashboard/ @SigNoz/pulse-frontend
+/frontend/src/providers/Dashboard/ @SigNoz/pulse-frontend
 
 ## Dashboard Types
 
@@ -131,3 +132,6 @@
 
 /frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
 /frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend
+
+## UplotV2 
+/frontend/src/lib/uPlotV2/ @SigNoz/pulse-frontend

.github/workflows/build-enterprise.yaml

@@ -70,6 +70,7 @@ jobs:
           echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> frontend/.env
           echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> frontend/.env
           echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'DOCS_BASE_URL="https://signoz.io"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/build-staging.yaml

@@ -69,6 +69,7 @@ jobs:
           echo 'PYLON_APP_ID="${{ secrets.NP_PYLON_APP_ID }}"' >> frontend/.env
           echo 'APPCUES_APP_ID="${{ secrets.NP_APPCUES_APP_ID }}"' >> frontend/.env
           echo 'PYLON_IDENTITY_SECRET="${{ secrets.NP_PYLON_IDENTITY_SECRET }}"' >> frontend/.env
+          echo 'DOCS_BASE_URL="https://staging.signoz.io"' >> frontend/.env
       - name: cache-dotenv
         uses: actions/cache@v4
         with:

.github/workflows/gor-signoz-community.yaml

@@ -3,8 +3,8 @@ name: gor-signoz-community
 on:
   push:
     tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
-      - 'v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+'
+      - "v[0-9]+.[0-9]+.[0-9]+"
+      - "v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+"
 
 permissions:
   contents: write
@@ -21,6 +21,10 @@ jobs:
         shell: bash
         run: |
           echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+      - name: node-setup
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact
@@ -89,7 +93,7 @@ jobs:
         uses: goreleaser/goreleaser-action@v6
         with:
           distribution: goreleaser-pro
-          version: '~> v2'
+          version: "~> v2"
           args: release --config ${{ env.CONFIG_PATH }} --clean --split
           workdir: .
         env:
@@ -147,7 +151,7 @@ jobs:
         if: steps.cache-linux.outputs.cache-hit == 'true' && steps.cache-darwin.outputs.cache-hit == 'true' # only run if caches hit
         with:
           distribution: goreleaser-pro
-          version: '~> v2'
+          version: "~> v2"
           args: continue --merge
           workdir: .
         env:

.github/workflows/gor-signoz.yaml

@@ -3,8 +3,8 @@ name: gor-signoz
 on:
   push:
     tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
-      - 'v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+'
+      - "v[0-9]+.[0-9]+.[0-9]+"
+      - "v[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+"
 
 permissions:
   contents: write
@@ -36,8 +36,13 @@ jobs:
           echo 'PYLON_APP_ID="${{ secrets.PYLON_APP_ID }}"' >> .env
           echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
           echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
+          echo 'DOCS_BASE_URL="https://signoz.io"' >> .env
+      - name: node-setup
+        uses: actions/setup-node@v5
+        with:
+          node-version: "22"
       - name: build-frontend
-        run:  make js-build
+        run: make js-build
       - name: upload-frontend-artifact
         uses: actions/upload-artifact@v4
         with:
@@ -104,7 +109,7 @@ jobs:
         uses: goreleaser/goreleaser-action@v6
         with:
           distribution: goreleaser-pro
-          version: '~> v2'
+          version: "~> v2"
           args: release --config ${{ env.CONFIG_PATH }} --clean --split
           workdir: .
         env:
@@ -161,7 +166,7 @@ jobs:
         if: steps.cache-linux.outputs.cache-hit == 'true' && steps.cache-darwin.outputs.cache-hit == 'true' # only run if caches hit
         with:
           distribution: goreleaser-pro
-          version: '~> v2'
+          version: "~> v2"
           args: continue --merge
           workdir: .
         env:

.github/workflows/integrationci.yaml

@@ -42,10 +42,12 @@ jobs:
           - callbackauthn
           - cloudintegrations
           - dashboard
-          - querier
-          - ttl
-          - preference
           - logspipelines
+          - preference
+          - querier
+          - role
+          - ttl
+          - alerts
         sqlstore-provider:
           - postgres
           - sqlite

.gitignore

@@ -57,7 +57,6 @@ bin/
 .local/
 */query-service/queries.active
 ee/query-service/db
-
 # e2e
 
 e2e/node_modules/

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
-	"eslint.workingDirectories": ["./frontend"],
+	"eslint.workingDirectories": [
+		"./frontend"
+	],
 	"editor.formatOnSave": true,
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.codeActionsOnSave": {
@@ -9,5 +11,8 @@
 	"[go]": {
 		"editor.formatOnSave": true,
 		"editor.defaultFormatter": "golang.go"
+	},
+	"[sql]": {
+		"editor.defaultFormatter": "adpyke.vscode-sql-formatter"
 	}
 }

README.md

@@ -66,6 +66,17 @@ Read [more](https://signoz.io/metrics-and-dashboards/).
 
 ![metrics-n-dashboards-cover](https://github.com/user-attachments/assets/a536fd71-1d2c-4681-aa7e-516d754c47a5)
 
+### LLM Observability
+
+Monitor and debug your LLM applications with comprehensive observability. Track LLM calls, analyze token usage, monitor performance, and gain insights into your AI application's behavior in production.
+
+SigNoz LLM observability helps you understand how your language models are performing, identify issues with prompts and responses, track token usage and costs, and optimize your AI applications for better performance and reliability.
+
+[Get started with LLM Observability →](https://signoz.io/docs/llm-observability/)
+
+![llm-observability-cover](https://github.com/user-attachments/assets/a6cc0ca3-59df-48f9-9c16-7c843fccff96)
+
+
 ### Alerts
 
 Use alerts in SigNoz to get notified when anything unusual happens in your application. You can set alerts on any type of telemetry signal (logs, metrics, traces), create thresholds and set up a notification channel to get notified. Advanced features like alert history and anomaly detection can help you create smarter alerts.

cmd/community/server.go

@@ -19,6 +19,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/role"
+	"github.com/SigNoz/signoz/pkg/modules/role/implrole"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/query-service/app"
 	"github.com/SigNoz/signoz/pkg/queryparser"
@@ -80,12 +81,15 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, _ role.Module, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, _ role.Setter, _ role.Granter, queryParser queryparser.QueryParser, _ querier.Querier, _ licensing.Licensing) dashboard.Module {
 			return impldashboard.NewModule(impldashboard.NewStore(store), settings, analytics, orgGetter, queryParser)
 		},
 		func(_ licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return noopgateway.NewProviderFactory()
 		},
+		func(store sqlstore.SQLStore, authz authz.AuthZ, licensing licensing.Licensing, _ []role.RegisterTypeable) role.Setter {
+			return implrole.NewSetter(implrole.NewStore(store), authz)
+		},
 	)
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)

cmd/enterprise/server.go

@@ -14,6 +14,7 @@ import (
 	enterpriselicensing "github.com/SigNoz/signoz/ee/licensing"
 	"github.com/SigNoz/signoz/ee/licensing/httplicensing"
 	"github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard"
+	"github.com/SigNoz/signoz/ee/modules/role/implrole"
 	enterpriseapp "github.com/SigNoz/signoz/ee/query-service/app"
 	"github.com/SigNoz/signoz/ee/sqlschema/postgressqlschema"
 	"github.com/SigNoz/signoz/ee/sqlstore/postgressqlstore"
@@ -29,6 +30,7 @@ import (
 	pkgimpldashboard "github.com/SigNoz/signoz/pkg/modules/dashboard/impldashboard"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/role"
+	pkgimplrole "github.com/SigNoz/signoz/pkg/modules/role/implrole"
 	"github.com/SigNoz/signoz/pkg/querier"
 	"github.com/SigNoz/signoz/pkg/queryparser"
 	"github.com/SigNoz/signoz/pkg/signoz"
@@ -119,13 +121,17 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 		func(ctx context.Context, sqlstore sqlstore.SQLStore) factory.ProviderFactory[authz.AuthZ, authz.Config] {
 			return openfgaauthz.NewProviderFactory(sqlstore, openfgaschema.NewSchema().Get(ctx))
 		},
-		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, role role.Module, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
-			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, role, queryParser, querier, licensing)
+		func(store sqlstore.SQLStore, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, roleSetter role.Setter, granter role.Granter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+			return impldashboard.NewModule(pkgimpldashboard.NewStore(store), settings, analytics, orgGetter, roleSetter, granter, queryParser, querier, licensing)
 		},
 		func(licensing licensing.Licensing) factory.ProviderFactory[gateway.Gateway, gateway.Config] {
 			return httpgateway.NewProviderFactory(licensing)
 		},
+		func(store sqlstore.SQLStore, authz authz.AuthZ, licensing licensing.Licensing, registry []role.RegisterTypeable) role.Setter {
+			return implrole.NewSetter(pkgimplrole.NewStore(store), authz, licensing, registry)
+		},
 	)
+
 	if err != nil {
 		logger.ErrorContext(ctx, "failed to create signoz", "error", err)
 		return err

conf/example.yaml

@@ -291,3 +291,12 @@ flagger:
     float:
     integer:
     object:
+
+##################### User #####################
+user:
+  password:
+    reset:
+      # Whether to allow users to reset their password themselves.
+      allow_self: true
+      # The duration within which a user can reset their password.
+      max_token_lifetime: 6h

deploy/docker-swarm/docker-compose.ha.yaml

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.108.0
+    image: signoz/signoz:v0.110.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.12
+    image: signoz/signoz-otel-collector:v0.129.13
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.13
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.108.0
+    image: signoz/signoz:v0.110.1
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -150,7 +150,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.12
+    image: signoz/signoz-otel-collector:v0.129.13
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -176,7 +176,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.12
+    image: signoz/signoz-schema-migrator:v0.129.13
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.108.0}
+    image: signoz/signoz:${VERSION:-v0.110.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -213,7 +213,7 @@ services:
   # TODO: support otel-collector multiple replicas. Nginx/Traefik for loadbalancing?
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -239,7 +239,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -250,7 +250,7 @@ services:
         condition: service_healthy
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-async
     command:
       - async

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.108.0}
+    image: signoz/signoz:${VERSION:-v0.110.1}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml
@@ -144,7 +144,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.129.13}
     container_name: signoz-otel-collector
     command:
       - --config=/etc/otel-collector-config.yaml
@@ -166,7 +166,7 @@ services:
         condition: service_healthy
   schema-migrator-sync:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-sync
     command:
       - sync
@@ -178,7 +178,7 @@ services:
     restart: on-failure
   schema-migrator-async:
     !!merge <<: *db-depend
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-v0.129.13}
     container_name: schema-migrator-async
     command:
       - async

docs/api/openapi.yml

@@ -209,7 +209,7 @@ paths:
   /api/v1/dashboards/{id}/public:
     delete:
       deprecated: false
-      description: This endpoints deletes the public sharing config and disables the
+      description: This endpoint deletes the public sharing config and disables the
         public sharing of a dashboard
       operationId: DeletePublicDashboard
       parameters:
@@ -253,7 +253,7 @@ paths:
       - dashboard
     get:
       deprecated: false
-      description: This endpoints returns public sharing config for a dashboard
+      description: This endpoint returns public sharing config for a dashboard
       operationId: GetPublicDashboard
       parameters:
       - in: path
@@ -301,7 +301,7 @@ paths:
       - dashboard
     post:
       deprecated: false
-      description: This endpoints creates public sharing config and enables public
+      description: This endpoint creates public sharing config and enables public
         sharing of the dashboard
       operationId: CreatePublicDashboard
       parameters:
@@ -355,7 +355,7 @@ paths:
       - dashboard
     put:
       deprecated: false
-      description: This endpoints updates the public sharing config for a dashboard
+      description: This endpoint updates the public sharing config for a dashboard
       operationId: UpdatePublicDashboard
       parameters:
       - in: path
@@ -671,7 +671,7 @@ paths:
   /api/v1/global/config:
     get:
       deprecated: false
-      description: This endpoints returns global config
+      description: This endpoint returns global config
       operationId: GetGlobalConfig
       responses:
         "200":
@@ -1447,8 +1447,7 @@ paths:
   /api/v1/public/dashboards/{id}:
     get:
       deprecated: false
-      description: This endpoints returns the sanitized dashboard data for public
-        access
+      description: This endpoint returns the sanitized dashboard data for public access
       operationId: GetPublicDashboardData
       parameters:
       - in: path
@@ -1579,6 +1578,228 @@ paths:
       summary: Reset password
       tags:
       - users
+  /api/v1/roles:
+    get:
+      deprecated: false
+      description: This endpoint lists all roles
+      operationId: ListRoles
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    items:
+                      $ref: '#/components/schemas/RoletypesRole'
+                    type: array
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: List roles
+      tags:
+      - role
+    post:
+      deprecated: false
+      description: This endpoint creates a role
+      operationId: CreateRole
+      responses:
+        "201":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/TypesIdentifiable'
+                  status:
+                    type: string
+                type: object
+          description: Created
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Create role
+      tags:
+      - role
+  /api/v1/roles/{id}:
+    delete:
+      deprecated: false
+      description: This endpoint deletes a role
+      operationId: DeleteRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Delete role
+      tags:
+      - role
+    get:
+      deprecated: false
+      description: This endpoint gets a role
+      operationId: GetRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/RoletypesRole'
+                  status:
+                    type: string
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get role
+      tags:
+      - role
+    patch:
+      deprecated: false
+      description: This endpoint patches a role
+      operationId: PatchRole
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          content:
+            application/json:
+              schema:
+                type: string
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Patch role
+      tags:
+      - role
   /api/v1/user:
     get:
       deprecated: false
@@ -1985,6 +2206,35 @@ paths:
       summary: Update user preference
       tags:
       - preferences
+  /api/v2/factor_password/forgot:
+    post:
+      deprecated: false
+      description: This endpoint initiates the forgot password flow by sending a reset
+        password email
+      operationId: ForgotPassword
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/TypesPostableForgotPassword'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      summary: Forgot password
+      tags:
+      - users
   /api/v2/features:
     get:
       deprecated: false
@@ -2035,6 +2285,15 @@ paths:
       deprecated: false
       description: This endpoint returns the ingestion keys for a workspace
       operationId: GetIngestionKeys
+      parameters:
+      - in: query
+        name: page
+        schema:
+          type: integer
+      - in: query
+        name: per_page
+        schema:
+          type: integer
       responses:
         "200":
           content:
@@ -2347,6 +2606,19 @@ paths:
       deprecated: false
       description: This endpoint returns the ingestion keys for a workspace
       operationId: SearchIngestionKeys
+      parameters:
+      - in: query
+        name: name
+        schema:
+          type: string
+      - in: query
+        name: page
+        schema:
+          type: integer
+      - in: query
+        name: per_page
+        schema:
+          type: integer
       responses:
         "200":
           content:
@@ -3859,6 +4131,25 @@ components:
         status:
           type: string
       type: object
+    RoletypesRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      type: object
     TypesChangePasswordRequest:
       properties:
         newPassword:
@@ -3979,6 +4270,15 @@ components:
         token:
           type: string
       type: object
+    TypesPostableForgotPassword:
+      properties:
+        email:
+          type: string
+        frontendBaseURL:
+          type: string
+        orgId:
+          type: string
+      type: object
     TypesPostableInvite:
       properties:
         email:
@@ -3999,6 +4299,9 @@ components:
       type: object
     TypesResetPasswordToken:
       properties:
+        expiresAt:
+          format: date-time
+          type: string
         id:
           type: string
         passwordId:

docs/contributing/onboarding.md

@@ -24,7 +24,7 @@ The configuration file is a JSON array containing data source objects. Each obje
 | `label` | `string` | Display name shown to users (e.g., `"AWS EC2"`) |
 | `tags` | `string[]` | Array of category tags for grouping (e.g., `["AWS"]`, `["database"]`) |
 | `module` | `string` | Destination module after onboarding completion |
-| `imgUrl` | `string` | Path to the logo/icon (e.g., `"/Logos/ec2.svg"`) |
+| `imgUrl` | `string` | Path to the logo/icon **(SVG required)** (e.g., `"/Logos/ec2.svg"`) |
 
 ### Optional Keys
 

ee/authz/openfgaauthz/provider.go

@@ -47,7 +47,7 @@ func (provider *provider) Check(ctx context.Context, tuple *openfgav1.TupleKey)
 	return provider.pkgAuthzService.Check(ctx, tuple)
 }
 
-func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, _ authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims authtypes.Claims, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
 	subject, err := authtypes.NewSubject(authtypes.TypeableUser, claims.UserID, orgID, nil)
 	if err != nil {
 		return err
@@ -66,7 +66,7 @@ func (provider *provider) CheckWithTupleCreation(ctx context.Context, claims aut
 	return nil
 }
 
-func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, _ authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector) error {
+func (provider *provider) CheckWithTupleCreationWithoutClaims(ctx context.Context, orgID valuer.UUID, relation authtypes.Relation, typeable authtypes.Typeable, selectors []authtypes.Selector, _ []authtypes.Selector) error {
 	subject, err := authtypes.NewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.String(), orgID, nil)
 	if err != nil {
 		return err

ee/modules/dashboard/impldashboard/module.go

@@ -26,12 +26,13 @@ type module struct {
 	pkgDashboardModule dashboard.Module
 	store              dashboardtypes.Store
 	settings           factory.ScopedProviderSettings
-	role               role.Module
+	roleSetter         role.Setter
+	granter            role.Granter
 	querier            querier.Querier
 	licensing          licensing.Licensing
 }
 
-func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, role role.Module, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
+func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, analytics analytics.Analytics, orgGetter organization.Getter, roleSetter role.Setter, granter role.Granter, queryParser queryparser.QueryParser, querier querier.Querier, licensing licensing.Licensing) dashboard.Module {
 	scopedProviderSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/ee/modules/dashboard/impldashboard")
 	pkgDashboardModule := pkgimpldashboard.NewModule(store, settings, analytics, orgGetter, queryParser)
 
@@ -39,7 +40,8 @@ func NewModule(store dashboardtypes.Store, settings factory.ProviderSettings, an
 		pkgDashboardModule: pkgDashboardModule,
 		store:              store,
 		settings:           scopedProviderSettings,
-		role:               role,
+		roleSetter:         roleSetter,
+		granter:            granter,
 		querier:            querier,
 		licensing:          licensing,
 	}
@@ -59,12 +61,12 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.Newf(errors.TypeAlreadyExists, dashboardtypes.ErrCodePublicDashboardAlreadyExists, "dashboard with id %s is already public", storablePublicDashboard.DashboardID)
 	}
 
-	role, err := module.role.GetOrCreate(ctx, roletypes.NewRole(roletypes.AnonymousUserRoleName, roletypes.AnonymousUserRoleDescription, roletypes.RoleTypeManaged.StringValue(), orgID))
+	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
 	if err != nil {
 		return err
 	}
 
-	err = module.role.Assign(ctx, role.ID, orgID, authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.StringValue(), orgID, nil))
+	err = module.granter.Grant(ctx, orgID, roletypes.SigNozAnonymousRoleName, authtypes.MustNewSubject(authtypes.TypeableAnonymous, authtypes.AnonymousUser.StringValue(), orgID, nil))
 	if err != nil {
 		return err
 	}
@@ -77,7 +79,7 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
 	)
 
-	err = module.role.PatchObjects(ctx, orgID, role.ID, authtypes.RelationRead, []*authtypes.Object{additionObject}, nil)
+	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, []*authtypes.Object{additionObject}, nil)
 	if err != nil {
 		return err
 	}
@@ -193,7 +195,7 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return err
 	}
 
-	role, err := module.role.GetOrCreate(ctx, roletypes.NewRole(roletypes.AnonymousUserRoleName, roletypes.AnonymousUserRoleDescription, roletypes.RoleTypeManaged.StringValue(), orgID))
+	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
 	if err != nil {
 		return err
 	}
@@ -206,7 +208,7 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
 	)
 
-	err = module.role.PatchObjects(ctx, orgID, role.ID, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
+	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
 	if err != nil {
 		return err
 	}
@@ -270,7 +272,7 @@ func (module *module) deletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return err
 	}
 
-	role, err := module.role.GetOrCreate(ctx, roletypes.NewRole(roletypes.AnonymousUserRoleName, roletypes.AnonymousUserRoleDescription, roletypes.RoleTypeManaged.StringValue(), orgID))
+	role, err := module.roleSetter.GetOrCreate(ctx, orgID, roletypes.NewRole(roletypes.SigNozAnonymousRoleName, roletypes.SigNozAnonymousRoleDescription, roletypes.RoleTypeManaged, orgID))
 	if err != nil {
 		return err
 	}
@@ -283,7 +285,7 @@ func (module *module) deletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
 	)
 
-	err = module.role.PatchObjects(ctx, orgID, role.ID, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
+	err = module.roleSetter.PatchObjects(ctx, orgID, role.Name, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
 	if err != nil {
 		return err
 	}

ee/modules/role/implrole/setter.go

@@ -0,0 +1,165 @@
+package implrole
+
+import (
+	"context"
+	"slices"
+
+	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/licensing"
+	"github.com/SigNoz/signoz/pkg/modules/role"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/roletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type setter struct {
+	store     roletypes.Store
+	authz     authz.AuthZ
+	licensing licensing.Licensing
+	registry  []role.RegisterTypeable
+}
+
+func NewSetter(store roletypes.Store, authz authz.AuthZ, licensing licensing.Licensing, registry []role.RegisterTypeable) role.Setter {
+	return &setter{
+		store:     store,
+		authz:     authz,
+		licensing: licensing,
+		registry:  registry,
+	}
+}
+
+func (setter *setter) Create(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return setter.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+}
+
+func (setter *setter) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) (*roletypes.Role, error) {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	existingRole, err := setter.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
+	if err != nil {
+		if !errors.Ast(err, errors.TypeNotFound) {
+			return nil, err
+		}
+	}
+
+	if existingRole != nil {
+		return roletypes.NewRoleFromStorableRole(existingRole), nil
+	}
+
+	err = setter.store.Create(ctx, roletypes.NewStorableRoleFromRole(role))
+	if err != nil {
+		return nil, err
+	}
+
+	return role, nil
+}
+
+func (setter *setter) GetResources(_ context.Context) []*authtypes.Resource {
+	typeables := make([]authtypes.Typeable, 0)
+	for _, register := range setter.registry {
+		typeables = append(typeables, register.MustGetTypeables()...)
+	}
+	// role module cannot self register itself!
+	typeables = append(typeables, setter.MustGetTypeables()...)
+
+	resources := make([]*authtypes.Resource, 0)
+	for _, typeable := range typeables {
+		resources = append(resources, &authtypes.Resource{Name: typeable.Name(), Type: typeable.Type()})
+	}
+
+	return resources
+}
+
+func (setter *setter) GetObjects(ctx context.Context, orgID valuer.UUID, id valuer.UUID, relation authtypes.Relation) ([]*authtypes.Object, error) {
+	storableRole, err := setter.store.Get(ctx, orgID, id)
+	if err != nil {
+		return nil, err
+	}
+
+	objects := make([]*authtypes.Object, 0)
+	for _, resource := range setter.GetResources(ctx) {
+		if slices.Contains(authtypes.TypeableRelations[resource.Type], relation) {
+			resourceObjects, err := setter.
+				authz.
+				ListObjects(
+					ctx,
+					authtypes.MustNewSubject(authtypes.TypeableRole, storableRole.ID.String(), orgID, &authtypes.RelationAssignee),
+					relation,
+					authtypes.MustNewTypeableFromType(resource.Type, resource.Name),
+				)
+			if err != nil {
+				return nil, err
+			}
+
+			objects = append(objects, resourceObjects...)
+		}
+	}
+
+	return objects, nil
+}
+
+func (setter *setter) Patch(ctx context.Context, orgID valuer.UUID, role *roletypes.Role) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	return setter.store.Update(ctx, orgID, roletypes.NewStorableRoleFromRole(role))
+}
+
+func (setter *setter) PatchObjects(ctx context.Context, orgID valuer.UUID, name string, relation authtypes.Relation, additions, deletions []*authtypes.Object) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	additionTuples, err := roletypes.GetAdditionTuples(name, orgID, relation, additions)
+	if err != nil {
+		return err
+	}
+
+	deletionTuples, err := roletypes.GetDeletionTuples(name, orgID, relation, deletions)
+	if err != nil {
+		return err
+	}
+
+	err = setter.authz.Write(ctx, additionTuples, deletionTuples)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (setter *setter) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	_, err := setter.licensing.GetActive(ctx, orgID)
+	if err != nil {
+		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
+	}
+
+	storableRole, err := setter.store.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	role := roletypes.NewRoleFromStorableRole(storableRole)
+	err = role.CanEditDelete()
+	if err != nil {
+		return err
+	}
+
+	return setter.store.Delete(ctx, orgID, id)
+}
+
+func (setter *setter) MustGetTypeables() []authtypes.Typeable {
+	return []authtypes.Typeable{authtypes.TypeableRole, roletypes.TypeableResourcesRoles}
+}

ee/query-service/anomaly/params.go

@@ -50,7 +50,7 @@ type GetAnomaliesResponse struct {
 //
 //	                  ^                                  ^
 //		              |                                  |
-//			(rounded value for past peiod)    +      (seasonal growth)
+//			(rounded value for past period)    +      (seasonal growth)
 //
 // score = abs(value - prediction) / stddev (current_season_query)
 type anomalyQueryParams struct {
@@ -74,12 +74,12 @@ type anomalyQueryParams struct {
 	//        : For daily seasonality, this is the query range params for the (now-2d-5m, now-1d)
 	//        : For hourly seasonality, this is the query range params for the (now-2h-5m, now-1h)
 	PastSeasonQuery *v3.QueryRangeParamsV3
-	// Past2SeasonQuery is the query range params for past 2 seasonal period to the current season
+	// Past2SeasonQuery is the query range params for past 2 seasonal periods to the current season
 	// Example: For weekly seasonality, this is the query range params for the (now-3w-5m, now-2w)
 	//        : For daily seasonality, this is the query range params for the (now-3d-5m, now-2d)
 	//        : For hourly seasonality, this is the query range params for the (now-3h-5m, now-2h)
 	Past2SeasonQuery *v3.QueryRangeParamsV3
-	// Past3SeasonQuery is the query range params for past 3 seasonal period to the current season
+	// Past3SeasonQuery is the query range params for past 3 seasonal periods to the current season
 	// Example: For weekly seasonality, this is the query range params for the (now-4w-5m, now-3w)
 	//        : For daily seasonality, this is the query range params for the (now-4d-5m, now-3d)
 	//        : For hourly seasonality, this is the query range params for the (now-4h-5m, now-3h)

ee/query-service/app/server.go

@@ -211,7 +211,7 @@ func (s Server) HealthCheckStatus() chan healthcheck.Status {
 
 func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*http.Server, error) {
 	r := baseapp.NewRouter()
-	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz)
+	am := middleware.NewAuthZ(s.signoz.Instrumentation.Logger(), s.signoz.Modules.OrgGetter, s.signoz.Authz, s.signoz.Modules.RoleGetter)
 
 	r.Use(otelmux.Middleware(
 		"apiserver",

ee/query-service/rules/anomaly.go

@@ -234,6 +234,11 @@ func (r *AnomalyRule) buildAndRunQuery(ctx context.Context, orgID valuer.UUID, t
 		}
 	}
 
+	hasData := len(queryResult.AnomalyScores) > 0
+	if missingDataAlert := r.HandleMissingDataAlert(ctx, ts, hasData); missingDataAlert != nil {
+		return ruletypes.Vector{*missingDataAlert}, nil
+	}
+
 	var resultVector ruletypes.Vector
 
 	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)
@@ -285,6 +290,11 @@ func (r *AnomalyRule) buildAndRunQueryV5(ctx context.Context, orgID valuer.UUID,
 
 	queryResult := transition.ConvertV5TimeSeriesDataToV4Result(qbResult)
 
+	hasData := len(queryResult.AnomalyScores) > 0
+	if missingDataAlert := r.HandleMissingDataAlert(ctx, ts, hasData); missingDataAlert != nil {
+		return ruletypes.Vector{*missingDataAlert}, nil
+	}
+
 	var resultVector ruletypes.Vector
 
 	scoresJSON, _ := json.Marshal(queryResult.AnomalyScores)

ee/query-service/rules/anomaly_test.go

@@ -0,0 +1,268 @@
+package rules
+
+import (
+	"context"
+	"testing"
+	"time"
+
+	"github.com/stretchr/testify/assert"
+	"github.com/stretchr/testify/require"
+
+	"github.com/SigNoz/signoz/ee/query-service/anomaly"
+	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
+	"github.com/SigNoz/signoz/pkg/query-service/app/clickhouseReader"
+	v3 "github.com/SigNoz/signoz/pkg/query-service/model/v3"
+	"github.com/SigNoz/signoz/pkg/telemetrystore"
+	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
+	"github.com/SigNoz/signoz/pkg/types/ruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+// mockAnomalyProvider is a mock implementation of anomaly.Provider for testing.
+// We need this because the anomaly provider makes 6 different queries for various
+// time periods (current, past period, current season, past season, past 2 seasons,
+// past 3 seasons), making it cumbersome to create mock data.
+type mockAnomalyProvider struct {
+	responses []*anomaly.GetAnomaliesResponse
+	callCount int
+}
+
+func (m *mockAnomalyProvider) GetAnomalies(ctx context.Context, orgID valuer.UUID, req *anomaly.GetAnomaliesRequest) (*anomaly.GetAnomaliesResponse, error) {
+	if m.callCount >= len(m.responses) {
+		return &anomaly.GetAnomaliesResponse{Results: []*v3.Result{}}, nil
+	}
+	resp := m.responses[m.callCount]
+	m.callCount++
+	return resp, nil
+}
+
+func TestAnomalyRule_NoData_AlertOnAbsent(t *testing.T) {
+	// Test basic AlertOnAbsent functionality (without AbsentFor grace period)
+
+	baseTime := time.Unix(1700000000, 0)
+	evalWindow := 5 * time.Minute
+	evalTime := baseTime.Add(5 * time.Minute)
+
+	target := 500.0
+
+	postableRule := ruletypes.PostableRule{
+		AlertName: "Test anomaly no data",
+		AlertType: ruletypes.AlertTypeMetric,
+		RuleType:  RuleTypeAnomaly,
+		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
+			EvalWindow: ruletypes.Duration(evalWindow),
+			Frequency:  ruletypes.Duration(1 * time.Minute),
+		}},
+		RuleCondition: &ruletypes.RuleCondition{
+			CompareOp: ruletypes.ValueIsAbove,
+			MatchType: ruletypes.AtleastOnce,
+			Target:    &target,
+			CompositeQuery: &v3.CompositeQuery{
+				QueryType: v3.QueryTypeBuilder,
+				BuilderQueries: map[string]*v3.BuilderQuery{
+					"A": {
+						QueryName:   "A",
+						Expression:  "A",
+						DataSource:  v3.DataSourceMetrics,
+						Temporality: v3.Unspecified,
+					},
+				},
+			},
+			SelectedQuery: "A",
+			Seasonality:   "daily",
+			Thresholds: &ruletypes.RuleThresholdData{
+				Kind: ruletypes.BasicThresholdKind,
+				Spec: ruletypes.BasicRuleThresholds{{
+					Name:        "Test anomaly no data",
+					TargetValue: &target,
+					MatchType:   ruletypes.AtleastOnce,
+					CompareOp:   ruletypes.ValueIsAbove,
+				}},
+			},
+		},
+	}
+
+	responseNoData := &anomaly.GetAnomaliesResponse{
+		Results: []*v3.Result{
+			{
+				QueryName:     "A",
+				AnomalyScores: []*v3.Series{},
+			},
+		},
+	}
+
+	cases := []struct {
+		description   string
+		alertOnAbsent bool
+		expectAlerts  int
+	}{
+		{
+			description:   "AlertOnAbsent=false",
+			alertOnAbsent: false,
+			expectAlerts:  0,
+		},
+		{
+			description:   "AlertOnAbsent=true",
+			alertOnAbsent: true,
+			expectAlerts:  1,
+		},
+	}
+
+	logger := instrumentationtest.New().Logger()
+
+	for _, c := range cases {
+		t.Run(c.description, func(t *testing.T) {
+			postableRule.RuleCondition.AlertOnAbsent = c.alertOnAbsent
+
+			telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, nil)
+			options := clickhouseReader.NewOptions("primaryNamespace")
+			reader := clickhouseReader.NewReader(nil, telemetryStore, nil, "", time.Second, nil, nil, options)
+
+			rule, err := NewAnomalyRule(
+				"test-anomaly-rule",
+				valuer.GenerateUUID(),
+				&postableRule,
+				reader,
+				nil,
+				logger,
+				nil,
+			)
+			require.NoError(t, err)
+
+			rule.provider = &mockAnomalyProvider{
+				responses: []*anomaly.GetAnomaliesResponse{responseNoData},
+			}
+
+			alertsFound, err := rule.Eval(context.Background(), evalTime)
+			require.NoError(t, err)
+			assert.Equal(t, c.expectAlerts, alertsFound)
+		})
+	}
+}
+
+func TestAnomalyRule_NoData_AbsentFor(t *testing.T) {
+	// Test missing data alert with AbsentFor grace period
+	// 1. Call Eval with data at time t1, to populate lastTimestampWithDatapoints
+	// 2. Call Eval without data at time t2
+	// 3. Alert fires only if t2 - t1 > AbsentFor
+
+	baseTime := time.Unix(1700000000, 0)
+	evalWindow := 5 * time.Minute
+
+	// Set target higher than test data so regular threshold alerts don't fire
+	target := 500.0
+
+	postableRule := ruletypes.PostableRule{
+		AlertName: "Test anomaly no data with AbsentFor",
+		AlertType: ruletypes.AlertTypeMetric,
+		RuleType:  RuleTypeAnomaly,
+		Evaluation: &ruletypes.EvaluationEnvelope{Kind: ruletypes.RollingEvaluation, Spec: ruletypes.RollingWindow{
+			EvalWindow: ruletypes.Duration(evalWindow),
+			Frequency:  ruletypes.Duration(time.Minute),
+		}},
+		RuleCondition: &ruletypes.RuleCondition{
+			CompareOp:     ruletypes.ValueIsAbove,
+			MatchType:     ruletypes.AtleastOnce,
+			AlertOnAbsent: true,
+			Target:        &target,
+			CompositeQuery: &v3.CompositeQuery{
+				QueryType: v3.QueryTypeBuilder,
+				BuilderQueries: map[string]*v3.BuilderQuery{
+					"A": {
+						QueryName:   "A",
+						Expression:  "A",
+						DataSource:  v3.DataSourceMetrics,
+						Temporality: v3.Unspecified,
+					},
+				},
+			},
+			SelectedQuery: "A",
+			Seasonality:   "daily",
+			Thresholds: &ruletypes.RuleThresholdData{
+				Kind: ruletypes.BasicThresholdKind,
+				Spec: ruletypes.BasicRuleThresholds{{
+					Name:        "Test anomaly no data with AbsentFor",
+					TargetValue: &target,
+					MatchType:   ruletypes.AtleastOnce,
+					CompareOp:   ruletypes.ValueIsAbove,
+				}},
+			},
+		},
+	}
+
+	responseNoData := &anomaly.GetAnomaliesResponse{
+		Results: []*v3.Result{
+			{
+				QueryName:     "A",
+				AnomalyScores: []*v3.Series{},
+			},
+		},
+	}
+
+	cases := []struct {
+		description        string
+		absentFor          uint64
+		timeBetweenEvals   time.Duration
+		expectAlertOnEval2 int
+	}{
+		{
+			description:        "WithinGracePeriod",
+			absentFor:          5,
+			timeBetweenEvals:   4 * time.Minute,
+			expectAlertOnEval2: 0,
+		},
+		{
+			description:        "AfterGracePeriod",
+			absentFor:          5,
+			timeBetweenEvals:   6 * time.Minute,
+			expectAlertOnEval2: 1,
+		},
+	}
+
+	logger := instrumentationtest.New().Logger()
+
+	for _, c := range cases {
+		t.Run(c.description, func(t *testing.T) {
+			postableRule.RuleCondition.AbsentFor = c.absentFor
+
+			t1 := baseTime.Add(5 * time.Minute)
+			t2 := t1.Add(c.timeBetweenEvals)
+
+			responseWithData := &anomaly.GetAnomaliesResponse{
+				Results: []*v3.Result{
+					{
+						QueryName: "A",
+						AnomalyScores: []*v3.Series{
+							{
+								Labels: map[string]string{"test": "label"},
+								Points: []v3.Point{
+									{Timestamp: baseTime.UnixMilli(), Value: 1.0},
+									{Timestamp: baseTime.Add(time.Minute).UnixMilli(), Value: 1.5},
+								},
+							},
+						},
+					},
+				},
+			}
+
+			telemetryStore := telemetrystoretest.New(telemetrystore.Config{}, nil)
+			options := clickhouseReader.NewOptions("primaryNamespace")
+			reader := clickhouseReader.NewReader(nil, telemetryStore, nil, "", time.Second, nil, nil, options)
+
+			rule, err := NewAnomalyRule("test-anomaly-rule", valuer.GenerateUUID(), &postableRule, reader, nil, logger, nil)
+			require.NoError(t, err)
+
+			rule.provider = &mockAnomalyProvider{
+				responses: []*anomaly.GetAnomaliesResponse{responseWithData, responseNoData},
+			}
+
+			alertsFound1, err := rule.Eval(context.Background(), t1)
+			require.NoError(t, err)
+			assert.Equal(t, 0, alertsFound1, "First eval with data should not alert")
+
+			alertsFound2, err := rule.Eval(context.Background(), t2)
+			require.NoError(t, err)
+			assert.Equal(t, c.expectAlertOnEval2, alertsFound2)
+		})
+	}
+}

ee/query-service/rules/manager.go

@@ -26,6 +26,7 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	if err != nil {
 		return nil, errors.NewInvalidInputf(errors.CodeInvalidInput, "evaluation is invalid: %v", err)
 	}
+
 	if opts.Rule.RuleType == ruletypes.RuleTypeThreshold {
 		// create a threshold rule
 		tr, err := baserules.NewThresholdRule(

frontend/.eslintrc.js

@@ -118,21 +118,20 @@ module.exports = {
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // Prevents importing packages not in package.json
 		// 'import/no-cycle': 'warn', // TODO: Enable later to detect circular dependencies
 
-		// TODO: Enable in separate PR with auto fixes
-		// // Import sorting rules
-		// 'simple-import-sort/imports': [
-		// 	'error',
-		// 	{
-		// 		groups: [
-		// 			['^react', '^@?\\w'], // React first, then external packages
-		// 			['^@/'], // Absolute imports with @ alias
-		// 			['^\\u0000'], // Side effect imports (import './file')
-		// 			['^\\.'], // Relative imports
-		// 			['^.+\\.s?css$'], // Style imports
-		// 		],
-		// 	},
-		// ],
-		// 'simple-import-sort/exports': 'error', // Auto-sorts exports
+		// Import sorting rules
+		'simple-import-sort/imports': [
+			'error',
+			{
+				groups: [
+					['^react', '^@?\\w'], // React first, then external packages
+					['^@/'], // Absolute imports with @ alias
+					['^\\u0000'], // Side effect imports (import './file')
+					['^\\.'], // Relative imports
+					['^.+\\.s?css$'], // Style imports
+				],
+			},
+		],
+		'simple-import-sort/exports': 'error', // Auto-sorts exports
 
 		// Prettier - code formatting
 		'prettier/prettier': [

frontend/package.json

@@ -51,7 +51,7 @@
 		"@signozhq/checkbox": "0.0.2",
 		"@signozhq/combobox": "0.0.2",
 		"@signozhq/command": "0.0.0",
-		"@signozhq/design-tokens": "1.1.4",
+		"@signozhq/design-tokens": "2.1.1",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
 		"@signozhq/resizable": "0.0.0",
@@ -105,6 +105,7 @@
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
+		"immer": "11.1.3",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
 		"less": "^4.1.2",

frontend/public/Logos/groq.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>

frontend/public/Logos/langtrace.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
+  <image width="200" height="200" href="data:image/webp;base64,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" />
+</svg>

frontend/public/Logos/traceloop.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid meet">
+  <image width="256" height="256" href="data:image/webp;base64,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" />
+</svg>

frontend/src/AppRoutes/Private.tsx

@@ -1,3 +1,6 @@
+import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { matchPath, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -9,9 +12,6 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import history from 'lib/history';
 import { isEmpty } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { matchPath, useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import APIError from 'types/api/error';
 import { LicensePlatform, LicenseState } from 'types/api/licensesV3/getActive';

frontend/src/AppRoutes/index.tsx

@@ -1,3 +1,6 @@
+import { Suspense, useCallback, useEffect, useState } from 'react';
+import { Route, Router, Switch } from 'react-router-dom';
+import { CompatRouter } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
@@ -30,9 +33,6 @@ import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import { Suspense, useCallback, useEffect, useState } from 'react';
-import { Route, Router, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import { LicenseStatus } from 'types/api/licensesV3/getActive';
 import { extractDomain } from 'utils/app';
 

frontend/src/AppRoutes/routes.ts

@@ -1,8 +1,8 @@
+import { RouteProps } from 'react-router-dom';
 import ROUTES from 'constants/routes';
 import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
 import MessagingQueues from 'pages/MessagingQueues';
 import MeterExplorer from 'pages/MeterExplorer';
-import { RouteProps } from 'react-router-dom';
 
 import {
 	AlertHistory,

frontend/src/ReactI18/index.tsx

@@ -1,7 +1,7 @@
+import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
-import { initReactI18next } from 'react-i18next';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AuthtypesPostableAuthDomainDTO,
 	AuthtypesUpdateableAuthDomainDTO,
@@ -27,8 +28,6 @@ import type {
 	UpdateAuthDomainPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	CreatePublicDashboard201,
 	CreatePublicDashboardPathParameters,
@@ -33,14 +34,12 @@ import type {
 	UpdatePublicDashboardPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 
 /**
- * This endpoints deletes the public sharing config and disables the public sharing of a dashboard
+ * This endpoint deletes the public sharing config and disables the public sharing of a dashboard
  * @summary Delete public dashboard
  */
 export const deletePublicDashboard = ({
@@ -119,7 +118,7 @@ export const useDeletePublicDashboard = <
 	return useMutation(mutationOptions);
 };
 /**
- * This endpoints returns public sharing config for a dashboard
+ * This endpoint returns public sharing config for a dashboard
  * @summary Get public dashboard
  */
 export const getPublicDashboard = (
@@ -223,7 +222,7 @@ export const invalidateGetPublicDashboard = async (
 };
 
 /**
- * This endpoints creates public sharing config and enables public sharing of the dashboard
+ * This endpoint creates public sharing config and enables public sharing of the dashboard
  * @summary Create public dashboard
  */
 export const createPublicDashboard = (
@@ -322,7 +321,7 @@ export const useCreatePublicDashboard = <
 	return useMutation(mutationOptions);
 };
 /**
- * This endpoints updates the public sharing config for a dashboard
+ * This endpoint updates the public sharing config for a dashboard
  * @summary Update public dashboard
  */
 export const updatePublicDashboard = (
@@ -419,7 +418,7 @@ export const useUpdatePublicDashboard = <
 	return useMutation(mutationOptions);
 };
 /**
- * This endpoints returns the sanitized dashboard data for public access
+ * This endpoint returns the sanitized dashboard data for public access
  * @summary Get public dashboard data
  */
 export const getPublicDashboardData = (

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -13,10 +12,10 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-
-import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
+import { useQuery } from 'react-query';
 
 import { GeneratedAPIInstance } from '../../../index';
+import type { GetFeatures200, RenderErrorResponseDTO } from '../sigNoz.schemas';
 
 type AwaitedInput<T> = PromiseLike<T> | T;
 

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	CreateIngestionKey200,
 	CreateIngestionKeyLimit201,
@@ -33,8 +34,6 @@ import type {
 	UpdateIngestionKeyPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	QueryClient,
@@ -13,20 +12,20 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetGlobalConfig200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
 
 /**
- * This endpoints returns global config
+ * This endpoint returns global config
  * @summary Get global config
  */
 export const getGlobalConfig = (signal?: AbortSignal) => {

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,15 +15,15 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	ListPromotedAndIndexedPaths200,
 	PromotetypesPromotePathDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMetricAlerts200,
 	GetMetricAlertsParams,
@@ -37,8 +38,6 @@ import type {
 	UpdateMetricMetadataPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,15 +15,15 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetMyOrganization200,
 	RenderErrorResponseDTO,
 	TypesOrganizationDTO,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	GetOrgPreference200,
 	GetOrgPreferencePathParameters,
@@ -30,8 +31,6 @@ import type {
 	UpdateUserPreferencePathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -0,0 +1,433 @@
+/**
+ * ! 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 {
+	CreateRole201,
+	DeleteRolePathParameters,
+	GetRole200,
+	GetRolePathParameters,
+	ListRoles200,
+	PatchRolePathParameters,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+type AwaitedInput<T> = PromiseLike<T> | T;
+
+type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
+
+/**
+ * This endpoint lists all roles
+ * @summary List roles
+ */
+export const listRoles = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<ListRoles200>({
+		url: `/api/v1/roles`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getListRolesQueryKey = () => {
+	return ['listRoles'] as const;
+};
+
+export const getListRolesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listRoles>>,
+	TError = RenderErrorResponseDTO
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof listRoles>>, TError, TData>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getListRolesQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof listRoles>>> = ({
+		signal,
+	}) => listRoles(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listRoles>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListRolesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listRoles>>
+>;
+export type ListRolesQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary List roles
+ */
+
+export function useListRoles<
+	TData = Awaited<ReturnType<typeof listRoles>>,
+	TError = RenderErrorResponseDTO
+>(options?: {
+	query?: UseQueryOptions<Awaited<ReturnType<typeof listRoles>>, TError, TData>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListRolesQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List roles
+ */
+export const invalidateListRoles = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListRolesQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint creates a role
+ * @summary Create role
+ */
+export const createRole = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<CreateRole201>({
+		url: `/api/v1/roles`,
+		method: 'POST',
+		signal,
+	});
+};
+
+export const getCreateRoleMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRole>>,
+		TError,
+		void,
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createRole>>,
+	TError,
+	void,
+	TContext
+> => {
+	const mutationKey = ['createRole'];
+	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 createRole>>,
+		void
+	> = () => {
+		return createRole();
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createRole>>
+>;
+
+export type CreateRoleMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Create role
+ */
+export const useCreateRole = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createRole>>,
+		TError,
+		void,
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createRole>>,
+	TError,
+	void,
+	TContext
+> => {
+	const mutationOptions = getCreateRoleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint deletes a role
+ * @summary Delete role
+ */
+export const deleteRole = ({ id }: DeleteRolePathParameters) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v1/roles/${id}`,
+		method: 'DELETE',
+	});
+};
+
+export const getDeleteRoleMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRole>>,
+		TError,
+		{ pathParams: DeleteRolePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteRole>>,
+	TError,
+	{ pathParams: DeleteRolePathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteRole'];
+	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 deleteRole>>,
+		{ pathParams: DeleteRolePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteRole(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteRole>>
+>;
+
+export type DeleteRoleMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Delete role
+ */
+export const useDeleteRole = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteRole>>,
+		TError,
+		{ pathParams: DeleteRolePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteRole>>,
+	TError,
+	{ pathParams: DeleteRolePathParameters },
+	TContext
+> => {
+	const mutationOptions = getDeleteRoleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This endpoint gets a role
+ * @summary Get role
+ */
+export const getRole = (
+	{ id }: GetRolePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetRole200>({
+		url: `/api/v1/roles/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetRoleQueryKey = ({ id }: GetRolePathParameters) => {
+	return ['getRole'] as const;
+};
+
+export const getGetRoleQueryOptions = <
+	TData = Awaited<ReturnType<typeof getRole>>,
+	TError = RenderErrorResponseDTO
+>(
+	{ id }: GetRolePathParameters,
+	options?: {
+		query?: UseQueryOptions<Awaited<ReturnType<typeof getRole>>, TError, TData>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetRoleQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getRole>>> = ({
+		signal,
+	}) => getRole({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<Awaited<ReturnType<typeof getRole>>, TError, TData> & {
+		queryKey: QueryKey;
+	};
+};
+
+export type GetRoleQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getRole>>
+>;
+export type GetRoleQueryError = RenderErrorResponseDTO;
+
+/**
+ * @summary Get role
+ */
+
+export function useGetRole<
+	TData = Awaited<ReturnType<typeof getRole>>,
+	TError = RenderErrorResponseDTO
+>(
+	{ id }: GetRolePathParameters,
+	options?: {
+		query?: UseQueryOptions<Awaited<ReturnType<typeof getRole>>, TError, TData>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetRoleQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get role
+ */
+export const invalidateGetRole = async (
+	queryClient: QueryClient,
+	{ id }: GetRolePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetRoleQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint patches a role
+ * @summary Patch role
+ */
+export const patchRole = ({ id }: PatchRolePathParameters) => {
+	return GeneratedAPIInstance<string>({
+		url: `/api/v1/roles/${id}`,
+		method: 'PATCH',
+	});
+};
+
+export const getPatchRoleMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchRole>>,
+		TError,
+		{ pathParams: PatchRolePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof patchRole>>,
+	TError,
+	{ pathParams: PatchRolePathParameters },
+	TContext
+> => {
+	const mutationKey = ['patchRole'];
+	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 patchRole>>,
+		{ pathParams: PatchRolePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return patchRole(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type PatchRoleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof patchRole>>
+>;
+
+export type PatchRoleMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Patch role
+ */
+export const usePatchRole = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof patchRole>>,
+		TError,
+		{ pathParams: PatchRolePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof patchRole>>,
+	TError,
+	{ pathParams: PatchRolePathParameters },
+	TContext
+> => {
+	const mutationOptions = getPatchRoleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AuthtypesPostableEmailPasswordSessionDTO,
 	AuthtypesPostableRotateTokenDTO,
@@ -31,8 +32,6 @@ import type {
 	RotateSession200,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

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

@@ -1110,6 +1110,39 @@ export interface RenderErrorResponseDTO {
 	status?: string;
 }
 
+export interface RoletypesRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type string
+	 */
+	orgId?: string;
+	/**
+	 * @type string
+	 */
+	type?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+}
+
 export interface TypesChangePasswordRequestDTO {
 	/**
 	 * @type string
@@ -1310,6 +1343,21 @@ export interface TypesPostableAcceptInviteDTO {
 	token?: string;
 }
 
+export interface TypesPostableForgotPasswordDTO {
+	/**
+	 * @type string
+	 */
+	email?: string;
+	/**
+	 * @type string
+	 */
+	frontendBaseURL?: string;
+	/**
+	 * @type string
+	 */
+	orgId?: string;
+}
+
 export interface TypesPostableInviteDTO {
 	/**
 	 * @type string
@@ -1341,6 +1389,11 @@ export interface TypesPostableResetPasswordDTO {
 }
 
 export interface TypesResetPasswordTokenDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	expiresAt?: Date;
 	/**
 	 * @type string
 	 */
@@ -1682,6 +1735,42 @@ export type GetPublicDashboardWidgetQueryRange200 = {
 	status?: string;
 };
 
+export type ListRoles200 = {
+	/**
+	 * @type array
+	 */
+	data?: RoletypesRoleDTO[];
+	/**
+	 * @type string
+	 */
+	status?: string;
+};
+
+export type CreateRole201 = {
+	data?: TypesIdentifiableDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};
+
+export type DeleteRolePathParameters = {
+	id: string;
+};
+export type GetRolePathParameters = {
+	id: string;
+};
+export type GetRole200 = {
+	data?: RoletypesRoleDTO;
+	/**
+	 * @type string
+	 */
+	status?: string;
+};
+
+export type PatchRolePathParameters = {
+	id: string;
+};
 export type ListUsers200 = {
 	/**
 	 * @type array

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

@@ -4,7 +4,6 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
-import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -16,7 +15,9 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
+import { useMutation, useQuery } from 'react-query';
 
+import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AcceptInvite201,
 	ChangePasswordPathParameters,
@@ -37,8 +38,9 @@ import type {
 	RenderErrorResponseDTO,
 	RevokeAPIKeyPathParameters,
 	TypesChangePasswordRequestDTO,
-	TypesPostableAPIKeyDTO,
 	TypesPostableAcceptInviteDTO,
+	TypesPostableAPIKeyDTO,
+	TypesPostableForgotPasswordDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesStorableAPIKeyDTO,
@@ -48,8 +50,6 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
-import { GeneratedAPIInstance } from '../../../index';
-
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;
@@ -1568,3 +1568,87 @@ export const invalidateGetMyUser = async (
 
 	return queryClient;
 };
+
+/**
+ * This endpoint initiates the forgot password flow by sending a reset password email
+ * @summary Forgot password
+ */
+export const forgotPassword = (
+	typesPostableForgotPasswordDTO: TypesPostableForgotPasswordDTO,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v2/factor_password/forgot`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: typesPostableForgotPasswordDTO,
+		signal,
+	});
+};
+
+export const getForgotPasswordMutationOptions = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof forgotPassword>>,
+		TError,
+		{ data: TypesPostableForgotPasswordDTO },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof forgotPassword>>,
+	TError,
+	{ data: TypesPostableForgotPasswordDTO },
+	TContext
+> => {
+	const mutationKey = ['forgotPassword'];
+	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 forgotPassword>>,
+		{ data: TypesPostableForgotPasswordDTO }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return forgotPassword(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ForgotPasswordMutationResult = NonNullable<
+	Awaited<ReturnType<typeof forgotPassword>>
+>;
+export type ForgotPasswordMutationBody = TypesPostableForgotPasswordDTO;
+export type ForgotPasswordMutationError = RenderErrorResponseDTO;
+
+/**
+ * @summary Forgot password
+ */
+export const useForgotPassword = <
+	TError = RenderErrorResponseDTO,
+	TContext = unknown
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof forgotPassword>>,
+		TError,
+		{ data: TypesPostableForgotPasswordDTO },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof forgotPassword>>,
+	TError,
+	{ data: TypesPostableForgotPasswordDTO },
+	TContext
+> => {
+	const mutationOptions = getForgotPasswordMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

frontend/src/api/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable no-param-reassign */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { QueryClient } from 'react-query';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import post from 'api/v2/sessions/rotate/post';
 import afterLogin from 'AppRoutes/utils';
@@ -12,7 +13,6 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { QueryClient } from 'react-query';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, {

frontend/src/api/plannedDowntime/deleteDowntimeSchedule.ts

@@ -1,5 +1,5 @@
-import axios from 'api';
 import { useMutation, UseMutationResult } from 'react-query';
+import axios from 'api';
 
 export interface DeleteDowntimeScheduleProps {
 	id?: number;

frontend/src/api/plannedDowntime/getAllDowntimeSchedules.ts

@@ -1,7 +1,7 @@
+import { useQuery, UseQueryResult } from 'react-query';
 import axios from 'api';
 import { AxiosError, AxiosResponse } from 'axios';
 import { Option } from 'container/PlannedDowntime/PlannedDowntimeutils';
-import { useQuery, UseQueryResult } from 'react-query';
 
 export type Recurrence = {
 	startTime?: string | null;

frontend/src/components/AlertDetailsFilters/Filters.tsx

@@ -1,7 +1,7 @@
-import './Filters.styles.scss';
-
 import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 
+import './Filters.styles.scss';
+
 export function Filters(): JSX.Element {
 	return (
 		<div className="filters">

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,10 +1,10 @@
-import './AppLoading.styles.scss';
-
 import { Typography } from 'antd';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';
 
+import './AppLoading.styles.scss';
+
 function AppLoading(): JSX.Element {
 	// Get theme from localStorage directly to avoid context dependency
 	const getThemeFromStorage = (): boolean => {

frontend/src/components/AuthError/AuthError.tsx

@@ -1,9 +1,9 @@
-import './AuthError.styles.scss';
-
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import { CircleAlert } from 'lucide-react';
 import APIError from 'types/api/error';
 
+import './AuthError.styles.scss';
+
 interface AuthErrorProps {
 	error: APIError;
 }

frontend/src/components/AuthPageContainer/AuthFooter.styles.scss

@@ -16,8 +16,8 @@
 	justify-content: center;
 	gap: 16px;
 	padding: 12px;
-	background: var(--bg-ink-400, #121317);
-	border: 1px solid var(--bg-ink-200, #23262e);
+	background: var(--bg-ink-400);
+	border: 1px solid var(--bg-ink-200);
 	border-radius: 4px;
 }
 
@@ -49,7 +49,7 @@
 	font-size: 11px;
 	font-weight: 400;
 	line-height: 1;
-	color: var(--text-neutral-dark-100, #adb4c2);
+	color: var(--text-neutral-dark-100);
 	text-align: center;
 }
 
@@ -67,7 +67,7 @@
 
 .auth-footer-link-icon {
 	flex-shrink: 0;
-	color: var(--text-neutral-dark-50, #eceef2);
+	color: var(--text-neutral-dark-50);
 }
 
 .auth-footer-link-status {
@@ -84,14 +84,14 @@
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background: var(--bg-ink-200, #23262e);
+	background: var(--bg-ink-200);
 	flex-shrink: 0;
 }
 
 .lightMode {
 	.auth-footer-content {
-		background: var(--bg-base-white, #ffffff);
-		border-color: var(--bg-vanilla-300, #e9e9e9);
+		background: var(--bg-base-white);
+		border-color: var(--bg-vanilla-300);
 		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
 	}
 
@@ -102,14 +102,14 @@
 	}
 
 	.auth-footer-text {
-		color: var(--text-neutral-light-200, #80828d);
+		color: var(--text-neutral-light-200);
 	}
 
 	.auth-footer-link-icon {
-		color: var(--text-neutral-light-100, #62636c);
+		color: var(--text-neutral-light-100);
 	}
 
 	.auth-footer-separator {
-		background: var(--bg-vanilla-300, #e9e9e9);
+		background: var(--bg-vanilla-300);
 	}
 }

frontend/src/components/AuthPageContainer/AuthFooter.tsx

@@ -1,7 +1,7 @@
-import './AuthFooter.styles.scss';
-
-import { ArrowUpRight } from 'lucide-react';
 import React from 'react';
+import { ArrowUpRight } from 'lucide-react';
+
+import './AuthFooter.styles.scss';
 
 interface FooterItem {
 	icon?: string;

frontend/src/components/AuthPageContainer/AuthHeader.styles.scss

@@ -30,7 +30,7 @@
 	font-size: 15.4px;
 	font-weight: 500;
 	line-height: 17.5px;
-	color: var(--text-neutral-dark-50, #eceef2);
+	color: var(--text-neutral-dark-50);
 	white-space: nowrap;
 }
 
@@ -41,7 +41,7 @@
 	gap: 8px;
 	height: 32px;
 	padding: 10px 16px;
-	background: var(--bg-ink-400, #121317);
+	background: var(--bg-ink-400);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -52,13 +52,13 @@
 		font-size: 11px;
 		font-weight: 500;
 		line-height: 1;
-		color: var(--text-neutral-dark-100, #adb4c2);
+		color: var(--text-neutral-dark-100);
 		text-align: center;
 	}
 
 	svg {
 		flex-shrink: 0;
-		color: var(--text-neutral-dark-100, #adb4c2);
+		color: var(--text-neutral-dark-100);
 	}
 
 	&:hover {
@@ -68,15 +68,15 @@
 
 .lightMode {
 	.auth-header-logo-text {
-		color: var(--text-neutral-light-100, #62636c);
+		color: var(--text-neutral-light-100);
 	}
 
 	.auth-header-help-button {
-		background: var(--bg-vanilla-200, #f5f5f5);
+		background: var(--bg-vanilla-200);
 
 		span,
 		svg {
-			color: var(--text-neutral-light-200, #80828d);
+			color: var(--text-neutral-light-200);
 		}
 	}
 }

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,8 +1,8 @@
-import './AuthHeader.styles.scss';
-
+import { useCallback } from 'react';
 import { Button } from '@signozhq/button';
 import { LifeBuoy } from 'lucide-react';
-import { useCallback } from 'react';
+
+import './AuthHeader.styles.scss';
 
 function AuthHeader(): JSX.Element {
 	const handleGetHelp = useCallback((): void => {

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -4,7 +4,7 @@
 	position: relative;
 	min-height: 100vh;
 	width: 100%;
-	background: var(--bg-neutral-dark-1000, #0a0c10);
+	background: var(--bg-neutral-dark-1000);
 	display: flex;
 	flex-direction: column;
 }
@@ -33,7 +33,7 @@
 .bg-dot-pattern {
 	background: radial-gradient(
 		circle,
-		var(--bg-neutral-dark-50, #eceef2) 1px,
+		var(--bg-neutral-dark-50) 1px,
 		transparent 1px
 	);
 	background-size: 12px 12px;
@@ -85,8 +85,8 @@
 	height: 100%;
 	background-image: repeating-linear-gradient(
 		to bottom,
-		var(--bg-ink-200, #23262e) 0px,
-		var(--bg-ink-200, #23262e) 4px,
+		var(--bg-ink-200) 0px,
+		var(--bg-ink-200) 4px,
 		transparent 4px,
 		transparent 8px
 	);
@@ -146,7 +146,7 @@
 
 .lightMode {
 	.auth-page-wrapper {
-		background: var(--bg-base-white, #ffffff);
+		background: var(--bg-base-white);
 	}
 
 	.bg-dot-pattern {
@@ -172,8 +172,8 @@
 	.auth-page-line-right {
 		background-image: repeating-linear-gradient(
 			to bottom,
-			var(--bg-vanilla-300, #e9e9e9) 0px,
-			var(--bg-vanilla-300, #e9e9e9) 4px,
+			var(--bg-vanilla-300) 0px,
+			var(--bg-vanilla-300) 4px,
 			transparent 4px,
 			transparent 8px
 		);

frontend/src/components/AuthPageContainer/index.tsx

@@ -1,10 +1,10 @@
-import './AuthPageContainer.styles.scss';
-
 import { PropsWithChildren } from 'react';
 
 import AuthFooter from './AuthFooter';
 import AuthHeader from './AuthHeader';
 
+import './AuthPageContainer.styles.scss';
+
 type AuthPageContainerProps = PropsWithChildren<{
 	isOnboarding?: boolean;
 }>;

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -1,5 +1,5 @@
-import './CeleryOverviewConfigOptions.styles.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Row, Select, Spin } from 'antd';
 import {
 	getValuesFromQueryParams,
@@ -9,8 +9,8 @@ import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOpt
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useCallback, useMemo, useState } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+
+import './CeleryOverviewConfigOptions.styles.scss';
 
 export interface SelectOptionConfig {
 	placeholder: string;

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -1,5 +1,6 @@
-import './CeleryOverviewTable.styles.scss';
-
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useSelector } from 'react-redux';
 import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
@@ -27,13 +28,12 @@ import useDragColumns from 'hooks/useDragColumns';
 import { getDraggedColumns } from 'hooks/useDragColumns/utils';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { formatNumericValue } from 'utils/numericUtils';
 
+import './CeleryOverviewTable.styles.scss';
+
 const INITIAL_PAGE_SIZE = 20;
 
 const showPaginationItem = (total: number, range: number[]): JSX.Element => (

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,10 +1,8 @@
-import './CeleryTaskConfigOptions.styles.scss';
-
+import { useHistory, useLocation } from 'react-router-dom';
 import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { useHistory, useLocation } from 'react-router-dom';
 
 import {
 	getValuesFromQueryParams,
@@ -12,6 +10,8 @@ import {
 } from '../CeleryUtils';
 import { useCeleryFilterOptions } from '../useCeleryFilterOptions';
 
+import './CeleryTaskConfigOptions.styles.scss';
+
 function CeleryTaskConfigOptions(): JSX.Element {
 	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
 		'celery.task_name',

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
 import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { useQuery } from 'react-query';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,5 +1,4 @@
-import './CeleryTaskDetail.style.scss';
-
+import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -7,7 +6,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { X } from 'lucide-react';
-import { useState } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';
@@ -16,6 +14,8 @@ import CeleryTaskGraph from '../CeleryTaskGraph/CeleryTaskGraph';
 import { createFiltersFromData } from '../CeleryUtils';
 import { useNavigateToExplorer } from '../useNavigateToExplorer';
 
+import './CeleryTaskDetail.style.scss';
+
 export type CeleryTaskData = {
 	entity: string;
 	value: string | number;

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx

@@ -1,5 +1,6 @@
-import './CeleryTaskGraph.style.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -10,9 +11,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -39,6 +37,8 @@ import {
 	CeleryTaskStateGraphConfig,
 } from './CeleryTaskStateGraphConfig';
 
+import './CeleryTaskGraph.style.scss';
+
 function CeleryTaskBar({
 	onClick,
 	queryEnabled,

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -1,3 +1,6 @@
+import { useCallback, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -8,9 +11,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,12 +1,10 @@
-import './CeleryTaskGraph.style.scss';
-
+import { useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
 import { Card, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
@@ -24,6 +22,8 @@ import {
 } from './CeleryTaskGraphUtils';
 import CeleryTaskLatencyGraph from './CeleryTaskLatencyGraph';
 
+import './CeleryTaskGraph.style.scss';
+
 export default function CeleryTaskGraphGrid({
 	onClick,
 	queryEnabled,

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx

@@ -1,5 +1,6 @@
-import './CeleryTaskGraph.style.scss';
-
+import { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
 import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
@@ -13,9 +14,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useMemo, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { DataSource } from 'types/common/queryBuilder';
@@ -29,6 +27,8 @@ import {
 import { useNavigateToExplorer } from '../useNavigateToExplorer';
 import { celeryTaskLatencyWidgetData } from './CeleryTaskGraphUtils';
 
+import './CeleryTaskGraph.style.scss';
+
 interface TabData {
 	label: string;
 	key: string;

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx

@@ -1,11 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import './CeleryTaskGraph.style.scss';
-
+import { Dispatch, SetStateAction, useMemo } from 'react';
 import { Col, Row } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Dispatch, SetStateAction, useMemo } from 'react';
 
 import {
 	applyCeleryFilterOnWidgetData,
@@ -19,6 +17,8 @@ import {
 } from './CeleryTaskGraphUtils';
 import { useGetValueFromWidget } from './useGetValueFromWidget';
 
+import './CeleryTaskGraph.style.scss';
+
 interface TabData {
 	label: string;
 	key: string;

frontend/src/components/CeleryTask/CeleryTaskGraph/useGetValueFromWidget.ts

@@ -1,10 +1,10 @@
+import { useCallback } from 'react';
+import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { getQueryPayloadFromWidgetsData } from 'pages/Celery/CeleryOverview/CeleryOverviewUtils';
-import { useCallback } from 'react';
-import { useQueries } from 'react-query';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

@@ -1,6 +1,6 @@
+import { useState } from 'react';
 import { DefaultOptionType } from 'antd/es/select';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { useState } from 'react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { useSelector } from 'react-redux';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
@@ -5,8 +7,6 @@ import useUpdatedQuery from 'container/GridCardLayout/useResolveQuery';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback } from 'react';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

@@ -1,9 +1,9 @@
-import './ChangePercentagePill.styles.scss';
-
 import { Color } from '@signozhq/design-tokens';
 import cx from 'classnames';
 import { ArrowDown, ArrowUp } from 'lucide-react';
 
+import './ChangePercentagePill.styles.scss';
+
 interface ChangePercentagePillProps {
 	percentage: number;
 	direction: number;

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,5 +1,5 @@
-import './ChangelogModal.styles.scss';
-
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { Button, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
@@ -9,13 +9,13 @@ import dayjs from 'dayjs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
 
 import ChangelogRenderer from './components/ChangelogRenderer';
 
+import './ChangelogModal.styles.scss';
+
 interface Props {
 	changelog: ChangelogSchema;
 	onClose: () => void;

frontend/src/components/ChangelogModal/components/ChangelogRenderer.tsx

@@ -1,7 +1,5 @@
-import './ChangelogRenderer.styles.scss';
-
-import dayjs from 'dayjs';
 import ReactMarkdown from 'react-markdown';
+import dayjs from 'dayjs';
 import {
 	ChangelogSchema,
 	Media,
@@ -9,6 +7,8 @@ import {
 	SupportedVideoTypes,
 } from 'types/api/changelog/getChangelogByVersion';
 
+import './ChangelogRenderer.styles.scss';
+
 interface Props {
 	changelog: ChangelogSchema;
 }

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,11 +1,11 @@
+import { useState } from 'react';
+import { useMutation } from 'react-query';
+import { useLocation } from 'react-router-dom';
 import { Button, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
 import { CreditCard, MessageSquareText, X } from 'lucide-react';
-import { useState } from 'react';
-import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -1,7 +1,13 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 
-import './ClientSideQBSearch.styles.scss';
-
+import {
+	KeyboardEvent,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Select, Tag, Tooltip } from 'antd';
 import {
@@ -33,14 +39,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
-import {
-	KeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
 import {
 	BaseAutocompleteData,
 	DataTypes,
@@ -52,6 +50,8 @@ import {
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
+import './ClientSideQBSearch.styles.scss';
+
 export interface AttributeKey {
 	key: string;
 }

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -1,9 +1,9 @@
-import './Common.styles.scss';
-
 import { Typography } from 'antd';
 
 import APIError from '../../types/api/error';
 
+import './Common.styles.scss';
+
 interface ErrorStateComponentProps {
 	message?: string;
 	error?: APIError;

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -131,6 +131,45 @@
 	border-top: 1px solid var(--bg-ink-200);
 	padding: 8px 14px;
 	.timezone-container {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&__left {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 6px;
+
+			.timezone__name {
+				font-size: 12px;
+				line-height: 16px;
+				color: var(--bg-robin-400);
+				font-weight: 500;
+			}
+
+			.timezone__separator {
+				font-size: 12px;
+				line-height: 16px;
+				color: var(--bg-robin-300);
+				font-weight: 500;
+			}
+
+			.timezone__offset {
+				font-size: 11px;
+				line-height: 14px;
+				color: var(--bg-robin-400);
+				font-weight: 500;
+			}
+		}
+
+		&__right {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 6px;
+		}
+
 		&,
 		.timezone {
 			font-family: Inter;
@@ -138,6 +177,7 @@
 			line-height: 16px;
 			letter-spacing: -0.06px;
 		}
+
 		display: flex;
 		align-items: center;
 		color: var(--bg-vanilla-400);
@@ -156,18 +196,21 @@
 		}
 	}
 }
+
 .timezone-badge {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	background: rgba(171, 189, 255, 0.04);
-	color: var(--bg-vanilla-100);
-	font-size: 12px;
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
+	font-size: 9px;
 	font-weight: 400;
-	line-height: 16px;
-	letter-spacing: -0.06px;
+	line-height: 12px;
+	letter-spacing: -0.045px;
+	margin-right: 4px;
+	width: 72px;
 	cursor: pointer;
 }
 
@@ -183,6 +226,7 @@
 	font-size: 11px;
 	color: var(--bg-vanilla-400);
 	background-color: var(--bg-ink-200);
+	cursor: pointer;
 
 	&.is-live {
 		background-color: transparent;
@@ -238,11 +282,10 @@
 	.date-time-popover__footer {
 		border-color: var(--bg-vanilla-400);
 	}
+
 	.timezone-container {
 		color: var(--bg-ink-400);
-		&__clock-icon {
-			stroke: var(--bg-ink-400);
-		}
+
 		.timezone {
 			color: var(--bg-ink-100);
 			background: rgb(179 179 179 / 15%);

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -1,10 +1,16 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import './CustomTimePicker.styles.scss';
-
+import {
+	ChangeEvent,
+	Dispatch,
+	SetStateAction,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
-import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
@@ -18,23 +24,14 @@ import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import { defaultTo, isFunction, noop } from 'lodash-es';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	ChangeEvent,
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { TimeRangeValidationResult, validateTimeRange } from 'utils/timeUtils';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
 
+import './CustomTimePicker.styles.scss';
+
 const maxAllowedMinTimeInMonths = 15;
 type ViewType = 'datetime' | 'timezone';
 const DEFAULT_VIEW: ViewType = 'datetime';
@@ -113,22 +110,8 @@ function CustomTimePicker({
 
 	const [activeView, setActiveView] = useState<ViewType>(DEFAULT_VIEW);
 
-	const { timezone, browserTimezone } = useTimezone();
+	const { timezone } = useTimezone();
 	const activeTimezoneOffset = timezone.offset;
-	const isTimezoneOverridden = useMemo(
-		() => timezone.offset !== browserTimezone.offset,
-		[timezone, browserTimezone],
-	);
-
-	const handleViewChange = useCallback(
-		(newView: 'timezone' | 'datetime'): void => {
-			if (activeView !== newView) {
-				setActiveView(newView);
-			}
-			setOpen(true);
-		},
-		[activeView, setOpen],
-	);
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
@@ -371,6 +354,7 @@ function CustomTimePicker({
 			startTime,
 			endTime,
 			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
+			timezone.value,
 		);
 
 		if (!isValidTimeRange) {
@@ -422,8 +406,8 @@ function CustomTimePicker({
 		</div>
 	);
 
-	const handleOpen = (e: React.SyntheticEvent): void => {
-		e.stopPropagation();
+	const handleOpen = (e?: React.SyntheticEvent): void => {
+		e?.stopPropagation?.();
 
 		if (showLiveLogs) {
 			setOpen(true);
@@ -436,12 +420,12 @@ function CustomTimePicker({
 		// reset the input status and error message as we reset the time to previous correct value
 		resetErrorStatus();
 
-		const startTime = dayjs(minTime / 1000_000).format(
-			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
-		);
-		const endTime = dayjs(maxTime / 1000_000).format(
-			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
-		);
+		const startTime = dayjs(minTime / 1000_000)
+			.tz(timezone.value)
+			.format(DATE_TIME_FORMATS.UK_DATETIME_SECONDS);
+		const endTime = dayjs(maxTime / 1000_000)
+			.tz(timezone.value)
+			.format(DATE_TIME_FORMATS.UK_DATETIME_SECONDS);
 
 		setInputValue(`${startTime} - ${endTime}`);
 	};
@@ -468,18 +452,6 @@ function CustomTimePicker({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]);
 
-	const handleTimezoneHintClick = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		handleViewChange('timezone');
-		setIsOpenedFromFooter(false);
-		logEvent(
-			'DateTimePicker: Timezone picker opened from time range input badge',
-			{
-				page: location.pathname,
-			},
-		);
-	};
-
 	const handleInputBlur = (): void => {
 		resetErrorStatus();
 	};
@@ -498,20 +470,28 @@ function CustomTimePicker({
 		return '';
 	};
 
+	const focusInput = (): void => {
+		// Use setTimeout to wait for React to update the DOM and make input editable
+		setTimeout(() => {
+			const inputElement = inputRef.current?.input;
+			if (inputElement) {
+				inputElement.focus();
+				inputElement.select();
+			}
+		}, 100);
+	};
+
 	// Focus and select input text when popover opens
 	useEffect(() => {
 		if (open && inputRef.current) {
-			// Use setTimeout to wait for React to update the DOM and make input editable
-			setTimeout(() => {
-				const inputElement = inputRef.current?.input;
-				if (inputElement) {
-					inputElement.focus();
-					inputElement.select();
-				}
-			}, 0);
+			focusInput();
 		}
 	}, [open]);
 
+	const handleTimezoneChange = (): void => {
+		focusInput();
+	};
+
 	return (
 		<div className="custom-time-picker">
 			<Tooltip title={getTooltipTitle()} placement="top">
@@ -532,6 +512,7 @@ function CustomTimePicker({
 								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
 								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
 								onSelectHandler={handleSelect}
+								onTimezoneChange={handleTimezoneChange}
 								onGoLive={defaultTo(onGoLive, noop)}
 								onExitLiveLogs={defaultTo(onExitLiveLogs, noop)}
 								options={items}
@@ -583,8 +564,8 @@ function CustomTimePicker({
 						prefix={getInputPrefix()}
 						suffix={
 							<div className="time-input-suffix">
-								{!!isTimezoneOverridden && activeTimezoneOffset && (
-									<div className="timezone-badge" onClick={handleTimezoneHintClick}>
+								{activeTimezoneOffset && (
+									<div className="timezone-badge">
 										<span>{activeTimezoneOffset}</span>
 									</div>
 								)}

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -1,5 +1,12 @@
-import './CustomTimePicker.styles.scss';
-
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -16,21 +23,15 @@ import {
 import dayjs from 'dayjs';
 import { Clock, PenLine, TriangleAlertIcon } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useMemo,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 import { TimeRangeValidationResult } from 'utils/timeUtils';
 
 import CalendarContainer from './CalendarContainer';
 import { CustomTimePickerInputStatus } from './CustomTimePicker';
 import TimezonePicker from './TimezonePicker';
+import { Timezone } from './timezoneUtils';
+
+import './CustomTimePicker.styles.scss';
 
 const TO_MILLISECONDS_FACTOR = 1000_000;
 
@@ -52,6 +53,7 @@ interface CustomTimePickerPopoverContentProps {
 		lexicalContext?: LexicalContext,
 	) => void;
 	onSelectHandler: (label: string, value: string) => void;
+	onTimezoneChange: (timezone: Timezone) => void;
 	onGoLive: () => void;
 	selectedTime: string;
 	activeView: 'datetime' | 'timezone';
@@ -101,6 +103,7 @@ function CustomTimePickerPopoverContent({
 	setCustomDTPickerVisible,
 	onCustomDateHandler,
 	onSelectHandler,
+	onTimezoneChange,
 	onGoLive,
 	selectedTime,
 	activeView,
@@ -208,6 +211,7 @@ function CustomTimePickerPopoverContent({
 					setActiveView={setActiveView}
 					setIsOpen={setIsOpen}
 					isOpenedFromFooter={isOpenedFromFooter}
+					onTimezoneSelect={onTimezoneChange}
 				/>
 			</div>
 		);
@@ -352,26 +356,30 @@ function CustomTimePickerPopoverContent({
 
 			<div className="date-time-popover__footer">
 				<div className="timezone-container">
-					<Clock
-						color={Color.BG_VANILLA_400}
-						className="timezone-container__clock-icon"
-						height={12}
-						width={12}
-					/>
-					<span className="timezone__icon">Current timezone</span>
-					<div>⎯</div>
-					<button
-						type="button"
-						className="timezone"
-						onClick={handleTimezoneHintClick}
-					>
-						<span>{activeTimezoneOffset}</span>
-						<PenLine
-							color={Color.BG_VANILLA_100}
-							className="timezone__icon"
-							size={10}
+					<div className="timezone-container__left">
+						<Clock
+							color={Color.BG_ROBIN_400}
+							className="timezone-container__clock-icon"
+							height={12}
+							width={12}
 						/>
-					</button>
+
+						<span className="timezone__name">{timezone.name}</span>
+						<span className="timezone__separator">⎯</span>
+						<span className="timezone__offset">{activeTimezoneOffset}</span>
+					</div>
+
+					<div className="timezone-container__right">
+						<Button
+							type="text"
+							size="small"
+							className="periscope-btn text timezone-change-button"
+							onClick={handleTimezoneHintClick}
+							icon={<PenLine size={10} />}
+						>
+							Change Timezone
+						</Button>
+					</div>
 				</div>
 			</div>
 		</>

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import './RangePickerModal.styles.scss';
-
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { DatePicker } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
@@ -11,11 +11,11 @@ import {
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import dayjs, { Dayjs } from 'dayjs';
 import { useTimezone } from 'providers/Timezone';
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import './RangePickerModal.styles.scss';
+
 interface RangePickerModalProps {
 	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
 	setIsOpen: Dispatch<SetStateAction<boolean>>;

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -1,5 +1,10 @@
-import './TimezonePicker.styles.scss';
-
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useState,
+} from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -8,16 +13,11 @@ import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShort
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { Check, Search } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useState,
-} from 'react';
 
 import { Timezone, TIMEZONE_DATA } from './timezoneUtils';
 
+import './TimezonePicker.styles.scss';
+
 interface SearchBarProps {
 	value: string;
 	onChange: (value: string) => void;
@@ -121,12 +121,14 @@ interface TimezonePickerProps {
 	setActiveView: Dispatch<SetStateAction<'datetime' | 'timezone'>>;
 	setIsOpen: Dispatch<SetStateAction<boolean>>;
 	isOpenedFromFooter: boolean;
+	onTimezoneSelect: (timezone: Timezone) => void;
 }
 
 function TimezonePicker({
 	setActiveView,
 	setIsOpen,
 	isOpenedFromFooter,
+	onTimezoneSelect,
 }: TimezonePickerProps): JSX.Element {
 	const [searchTerm, setSearchTerm] = useState('');
 	const { timezone, updateTimezone } = useTimezone();
@@ -153,11 +155,11 @@ function TimezonePicker({
 	}, [isOpenedFromFooter, setActiveView, setIsOpen]);
 
 	const handleTimezoneSelect = useCallback(
-		(timezone: Timezone) => {
+		(timezone: Timezone): void => {
 			setSelectedTimezone(timezone.name);
 			updateTimezone(timezone);
+			onTimezoneSelect(timezone);
 			handleCloseTimezonePicker();
-			setIsOpen(false);
 			logEvent('DateTimePicker: New Timezone Selected', {
 				timezone: {
 					name: timezone.name,
@@ -165,7 +167,7 @@ function TimezonePicker({
 				},
 			});
 		},
-		[handleCloseTimezonePicker, setIsOpen, updateTimezone],
+		[handleCloseTimezonePicker, updateTimezone, onTimezoneSelect],
 	);
 
 	// Register keyboard shortcuts
@@ -194,7 +196,7 @@ function TimezonePicker({
 			<div className="timezone-picker__list">
 				{getFilteredTimezones(searchTerm).map((timezone) => (
 					<TimezoneItem
-						key={timezone.value}
+						key={`${timezone.value}-${timezone.name}`}
 						timezone={timezone}
 						isSelected={timezone.name === selectedTimezone}
 						onClick={(): void => handleTimezoneSelect(timezone)}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -1,8 +1,8 @@
-import './DetailsDrawer.styles.scss';
-
+import { Dispatch, SetStateAction } from 'react';
 import { Drawer, Tabs, TabsProps } from 'antd';
 import cx from 'classnames';
-import { Dispatch, SetStateAction } from 'react';
+
+import './DetailsDrawer.styles.scss';
 
 interface IDetailsDrawerProps {
 	open: boolean;

frontend/src/components/DropDown/DropDown.tsx

@@ -1,9 +1,9 @@
-import './DropDown.styles.scss';
-
+import { useState } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useState } from 'react';
+
+import './DropDown.styles.scss';
 
 function DropDown({
 	element,

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import MEditor, { EditorProps } from '@monaco-editor/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useMemo } from 'react';
 
 function Editor({
 	value,

frontend/src/components/ErrorBoundaryHOC/__tests__/withErrorBoundary.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 
 import withErrorBoundary, {
 	WithErrorBoundaryOptions,

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import { useState } from 'react';
+import { Button } from 'antd';
 
 import { withErrorBoundary } from './index';
 

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx

@@ -1,5 +1,5 @@
-import * as Sentry from '@sentry/react';
 import { ComponentType, ReactElement } from 'react';
+import * as Sentry from '@sentry/react';
 
 import ErrorBoundaryFallback from '../../pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

@@ -1,5 +1,5 @@
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import { ReactNode } from 'react';
+import ErrorContent from 'components/ErrorModal/components/ErrorContent';
 import APIError from 'types/api/error';
 
 interface ErrorInPlaceProps {

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,15 +1,15 @@
-import './ErrorModal.styles.scss';
-
+import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Modal, Tag } from 'antd';
 import { CircleAlert, X } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
-import React from 'react';
 import APIError from 'types/api/error';
 
 import ErrorContent from './components/ErrorContent';
 
+import './ErrorModal.styles.scss';
+
 type Props = {
 	error: APIError;
 	triggerComponent?: React.ReactElement;

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -1,14 +1,14 @@
-import './ErrorContent.styles.scss';
-
+import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { BookOpenText, ChevronsDown } from 'lucide-react';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
-import { ReactNode } from 'react';
 import APIError from 'types/api/error';
 
+import './ErrorContent.styles.scss';
+
 interface ErrorContentProps {
 	error: APIError;
 	icon?: ReactNode;