Merge branch 'main' into SIG-3098

.github/CODEOWNERS

@@ -16,13 +16,13 @@
 
 # Scaffold Owners
 
-/pkg/config/ @vikrantgupta25
-/pkg/errors/ @vikrantgupta25
-/pkg/factory/ @vikrantgupta25
-/pkg/types/ @vikrantgupta25
-/pkg/valuer/ @vikrantgupta25
-/cmd/ @vikrantgupta25
-.golangci.yml @vikrantgupta25
+/pkg/config/ @therealpandey
+/pkg/errors/ @therealpandey
+/pkg/factory/ @therealpandey
+/pkg/types/ @therealpandey
+/pkg/valuer/ @therealpandey
+/cmd/ @therealpandey
+.golangci.yml @therealpandey
 
 # Zeus Owners
 
@@ -48,78 +48,22 @@
 /pkg/querier/ @srikanthccv
 /pkg/variables/ @srikanthccv
 /pkg/types/querybuildertypes/ @srikanthccv
-/pkg/types/telemetrytypes/ @srikanthccv
 /pkg/querybuilder/ @srikanthccv
 /pkg/telemetrylogs/ @srikanthccv
 /pkg/telemetrymetadata/ @srikanthccv
 /pkg/telemetrymetrics/ @srikanthccv
 /pkg/telemetrytraces/ @srikanthccv
 
-# Metrics
-
-/pkg/types/metrictypes/ @srikanthccv
-/pkg/types/metricsexplorertypes/ @srikanthccv
-/pkg/modules/metricsexplorer/ @srikanthccv
-/pkg/prometheus/ @srikanthccv
-
-# APM
-
-/pkg/types/servicetypes/ @srikanthccv
-/pkg/types/apdextypes/ @srikanthccv
-/pkg/modules/apdex/ @srikanthccv
-/pkg/modules/services/ @srikanthccv
-
-# Dashboard
-
-/pkg/types/dashboardtypes/ @srikanthccv
-/pkg/modules/dashboard/ @srikanthccv
-
-# Rule/Alertmanager
-
-/pkg/types/ruletypes/ @srikanthccv
-/pkg/types/alertmanagertypes @srikanthccv
-/pkg/alertmanager/ @srikanthccv
-/pkg/ruler/ @srikanthccv
-
-# Correlation-adjacent
-
-/pkg/contextlinks/ @srikanthccv
-/pkg/types/parsertypes/ @srikanthccv
-/pkg/queryparser/ @srikanthccv
-
 # AuthN / AuthZ Owners
 
-/pkg/authz/ @vikrantgupta25
-/ee/authz/ @vikrantgupta25
-/pkg/authn/ @vikrantgupta25
-/ee/authn/ @vikrantgupta25
-/pkg/modules/user/ @vikrantgupta25
-/pkg/modules/session/ @vikrantgupta25
-/pkg/modules/organization/ @vikrantgupta25
-/pkg/modules/authdomain/ @vikrantgupta25
-/pkg/modules/role/ @vikrantgupta25
+/pkg/authz/ @vikrantgupta25 @therealpandey
 
 # Integration tests
 
-/tests/integration/ @vikrantgupta25
+/tests/integration/ @therealpandey
 
 # Dashboard Owners
 
-/frontend/src/hooks/dashboard/ @SigNoz/pulse-frontend
-
-## Dashboard List
-
-/frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
-/frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
-
-## Dashboard Page
-
 /frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
-/frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
+/frontend/src/container/NewDashboard/ @SigNoz/pulse-frontend
 /frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
-/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
-
-## Public Dashboard Page
-
-/frontend/src/pages/PublicDashboard/ @SigNoz/pulse-frontend
-/frontend/src/container/PublicDashboardContainer/ @SigNoz/pulse-frontend

.github/pull_request_template.md

@@ -1,76 +1,86 @@
-## Pull Request
+## 📄 Summary
+
+<!-- Describe the purpose of the PR in a few sentences. What does it fix/add/update? -->
 
 ---
 
-### 📄 Summary
-> Why does this change exist?  
-> What problem does it solve, and why is this the right approach?
+## ✅ Changes
+
+- [ ] Feature: Brief description
+- [ ] Bug fix: Brief description
 
 ---
 
-### ✅ Change Type
-_Select all that apply_
 
-- [ ] ✨ Feature
-- [ ] 🐛 Bug fix
-- [ ] ♻️ Refactor
-- [ ] 🛠️ Infra / Tooling
-- [ ] 🧪 Test-only
+## 📝 Changelog 
+
+> Fill this only if the change affects users, APIs, UI, or documented behavior.
+Mention as N/A for internal refactors or non-user-visible changes.
+
+**Deployment Type:** Cloud / OSS / Enterprise
+
+**Type:** Feature / Bug Fix / Maintenance
+
+**Description:** Short, user-facing summary of the change
 
 ---
 
-### 🐛 Bug Context
-> Required if this PR fixes a bug
+## 🏷️ Required: Add Relevant Labels
 
-#### Root Cause
-> What caused the issue?  
-> Regression, faulty assumption, edge case, refactor, etc.
+> ⚠️ **Manually add appropriate labels in the PR sidebar**  
+Please select one or more labels (as applicable):
 
-#### Fix Strategy
-> How does this PR address the root cause?
+ex:
+
+- `frontend`
+- `backend`
+- `devops`
+- `bug`
+- `enhancement`
+- `ui`
+- `test`
 
 ---
 
-### 🧪 Testing Strategy
-> How was this change validated?
+## 👥 Reviewers
 
-- Tests added/updated:
-- Manual verification:
-- Edge cases covered:
+> Tag the relevant teams for review:
+
+- frontend / backend / devops
 
 ---
 
-### ⚠️ Risk & Impact Assessment
-> What could break? How do we recover?
+## 🧪 How to Test
 
-- Blast radius:
-- Potential regressions:
-- Rollback plan:
+<!-- Describe how reviewers can test this PR -->
+1. ...
+2. ...
+3. ...
 
 ---
 
-### 📝 Changelog
-> Fill only if this affects users, APIs, UI, or documented behavior  
-> Use **N/A** for internal or non-user-facing changes
+## 🔍 Related Issues
 
-| Field | Value |
-|------|-------|
-| Deployment Type | Cloud / OSS / Enterprise |
-| Change Type | Feature / Bug Fix / Maintenance |
-| Description | User-facing summary |
+<!-- Reference any related issues (e.g. Fixes #123, Closes #456) -->
+Closes #
 
 ---
 
-### 📋 Checklist
-- [ ] Tests added or explicitly not required
-- [ ] Manually tested
-- [ ] Breaking changes documented
-- [ ] Backward compatibility considered
+## 📸 Screenshots / Screen Recording (if applicable / mandatory for UI related changes)
+
+<!-- Add screenshots or GIFs to help visualize changes -->
+
+---
+
+## 📋 Checklist
+
+- [ ] Dev Review
+- [ ] Test cases added (Unit/ Integration / E2E)
+- [ ] Manually tested the changes
+
 
 ---
 
 ## 👀 Notes for Reviewers
 
 <!-- Anything reviewers should keep in mind while reviewing -->
-
----

.gitignore

@@ -12,6 +12,7 @@ frontend/coverage
 
 # production
 frontend/build
+frontend/.vscode
 frontend/.yarnclean
 frontend/.temp_cache
 frontend/test-results
@@ -30,6 +31,7 @@ frontend/src/constants/env.ts
 
 .idea
 
+**/.vscode
 **/build
 **/storage
 **/locust-scripts/__pycache__/

.vscode/settings.json

@@ -1,9 +0,0 @@
-{
-	"eslint.workingDirectories": ["./frontend"],
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true
-}

Makefile

@@ -86,7 +86,7 @@ go-run-enterprise: ## Runs the enterprise go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
 	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
-	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
+	SIGNOZ_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \
@@ -103,7 +103,7 @@ go-run-community: ## Runs the community go backend server
 	@SIGNOZ_INSTRUMENTATION_LOGS_LEVEL=debug \
 	SIGNOZ_SQLSTORE_SQLITE_PATH=signoz.db \
 	SIGNOZ_WEB_ENABLED=false \
-	SIGNOZ_TOKENIZER_JWT_SECRET=secret \
+	SIGNOZ_JWT_SECRET=secret \
 	SIGNOZ_ALERTMANAGER_PROVIDER=signoz \
 	SIGNOZ_TELEMETRYSTORE_PROVIDER=clickhouse \
 	SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://127.0.0.1:9000 \

context7.json

@@ -1,4 +0,0 @@
-{
-  "url": "https://context7.com/signoz/signoz",
-  "public_key": "pk_6g9GfjdkuPEIDuTGAxnol"
-}

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.107.0
+    image: signoz/signoz:v0.106.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -195,7 +195,7 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-swarm
-      - SIGNOZ_TOKENIZER_JWT_SECRET=secret
+      - SIGNOZ_JWT_SECRET=secret
       - DOT_METRICS_ENABLED=true
     healthcheck:
       test:

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.107.0
+    image: signoz/signoz:v0.106.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

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.107.0}
+    image: signoz/signoz:${VERSION:-v0.106.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

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.107.0}
+    image: signoz/signoz:${VERSION:-v0.106.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

docs/api/openapi.yml

@@ -607,186 +607,6 @@ paths:
       summary: Update auth domain
       tags:
       - authdomains
-  /api/v1/fields/keys:
-    get:
-      deprecated: false
-      description: This endpoint returns field keys
-      operationId: GetFieldsKeys
-      parameters:
-      - in: query
-        name: signal
-        schema:
-          type: string
-      - in: query
-        name: source
-        schema:
-          type: string
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      - in: query
-        name: startUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: endUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: fieldContext
-        schema:
-          type: string
-      - in: query
-        name: fieldDataType
-        schema:
-          type: string
-      - content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TelemetrytypesMetricContext'
-        in: query
-        name: metricContext
-      - in: query
-        name: name
-        schema:
-          type: string
-      - in: query
-        name: searchText
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TelemetrytypesGettableFieldKeys'
-                  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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get field keys
-      tags:
-      - fields
-  /api/v1/fields/values:
-    get:
-      deprecated: false
-      description: This endpoint returns field values
-      operationId: GetFieldsValues
-      parameters:
-      - in: query
-        name: signal
-        schema:
-          type: string
-      - in: query
-        name: source
-        schema:
-          type: string
-      - in: query
-        name: limit
-        schema:
-          type: integer
-      - in: query
-        name: startUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: endUnixMilli
-        schema:
-          format: int64
-          type: integer
-      - in: query
-        name: fieldContext
-        schema:
-          type: string
-      - in: query
-        name: fieldDataType
-        schema:
-          type: string
-      - content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/TelemetrytypesMetricContext'
-        in: query
-        name: metricContext
-      - in: query
-        name: name
-        schema:
-          type: string
-      - in: query
-        name: searchText
-        schema:
-          type: string
-      - in: query
-        name: existingQuery
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TelemetrytypesGettableFieldValues'
-                  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:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get field values
-      tags:
-      - fields
   /api/v1/getResetPasswordToken/{id}:
     get:
       deprecated: false
@@ -2916,25 +2736,12 @@ paths:
       - sessions
 components:
   schemas:
-    AuthtypesAttributeMapping:
-      properties:
-        email:
-          type: string
-        groups:
-          type: string
-        name:
-          type: string
-        role:
-          type: string
-      type: object
     AuthtypesAuthDomainConfig:
       properties:
         googleAuthConfig:
           $ref: '#/components/schemas/AuthtypesGoogleConfig'
         oidcConfig:
           $ref: '#/components/schemas/AuthtypesOIDCConfig'
-        roleMapping:
-          $ref: '#/components/schemas/AuthtypesRoleMapping'
         samlConfig:
           $ref: '#/components/schemas/AuthtypesSamlConfig'
         ssoEnabled:
@@ -2968,6 +2775,11 @@ components:
         url:
           type: string
       type: object
+    AuthtypesClaimMapping:
+      properties:
+        email:
+          type: string
+      type: object
     AuthtypesDeprecatedGettableLogin:
       properties:
         accessJwt:
@@ -2999,8 +2811,6 @@ components:
           $ref: '#/components/schemas/AuthtypesOIDCConfig'
         orgId:
           type: string
-        roleMapping:
-          $ref: '#/components/schemas/AuthtypesRoleMapping'
         samlConfig:
           $ref: '#/components/schemas/AuthtypesSamlConfig'
         ssoEnabled:
@@ -3024,33 +2834,17 @@ components:
       type: object
     AuthtypesGoogleConfig:
       properties:
-        allowedGroups:
-          items:
-            type: string
-          type: array
         clientId:
           type: string
         clientSecret:
           type: string
-        domainToAdminEmail:
-          additionalProperties:
-            type: string
-          type: object
-        fetchGroups:
-          type: boolean
-        fetchTransitiveGroupMembership:
-          type: boolean
-        insecureSkipEmailVerified:
-          type: boolean
         redirectURI:
           type: string
-        serviceAccountJson:
-          type: string
       type: object
     AuthtypesOIDCConfig:
       properties:
         claimMapping:
-          $ref: '#/components/schemas/AuthtypesAttributeMapping'
+          $ref: '#/components/schemas/AuthtypesClaimMapping'
         clientId:
           type: string
         clientSecret:
@@ -3101,22 +2895,8 @@ components:
         refreshToken:
           type: string
       type: object
-    AuthtypesRoleMapping:
-      properties:
-        defaultRole:
-          type: string
-        groupMappings:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        useRoleAttribute:
-          type: boolean
-      type: object
     AuthtypesSamlConfig:
       properties:
-        attributeMapping:
-          $ref: '#/components/schemas/AuthtypesAttributeMapping'
         insecureSkipAuthNRequestsSigned:
           type: boolean
         samlCert:
@@ -3561,65 +3341,6 @@ components:
         status:
           type: string
       type: object
-    TelemetrytypesGettableFieldKeys:
-      properties:
-        complete:
-          type: boolean
-        keys:
-          additionalProperties:
-            items:
-              $ref: '#/components/schemas/TelemetrytypesTelemetryFieldKey'
-            type: array
-          nullable: true
-          type: object
-      type: object
-    TelemetrytypesGettableFieldValues:
-      properties:
-        complete:
-          type: boolean
-        values:
-          $ref: '#/components/schemas/TelemetrytypesTelemetryFieldValues'
-      type: object
-    TelemetrytypesMetricContext:
-      properties:
-        metricName:
-          type: string
-      type: object
-    TelemetrytypesTelemetryFieldKey:
-      properties:
-        description:
-          type: string
-        fieldContext:
-          type: string
-        fieldDataType:
-          type: string
-        name:
-          type: string
-        signal:
-          type: string
-        unit:
-          type: string
-      type: object
-    TelemetrytypesTelemetryFieldValues:
-      properties:
-        boolValues:
-          items:
-            type: boolean
-          type: array
-        numberValues:
-          items:
-            format: double
-            type: number
-          type: array
-        relatedValues:
-          items:
-            type: string
-          type: array
-        stringValues:
-          items:
-            type: string
-          type: array
-      type: object
     TypesChangePasswordRequest:
       properties:
         newPassword:

ee/authn/callbackauthn/oidccallbackauthn/authn.go

@@ -2,7 +2,6 @@ package oidccallbackauthn
 
 import (
 	"context"
-	"fmt"
 	"net/url"
 
 	"github.com/SigNoz/signoz/pkg/authn"
@@ -20,27 +19,25 @@ const (
 	redirectPath string = "/api/v1/complete/oidc"
 )
 
-var defaultScopes []string = []string{"email", "profile", oidc.ScopeOpenID}
+var (
+	scopes []string = []string{"email", oidc.ScopeOpenID}
+)
 
 var _ authn.CallbackAuthN = (*AuthN)(nil)
 
 type AuthN struct {
-	settings   factory.ScopedProviderSettings
 	store      authtypes.AuthNStore
 	licensing  licensing.Licensing
 	httpClient *client.Client
 }
 
 func New(store authtypes.AuthNStore, licensing licensing.Licensing, providerSettings factory.ProviderSettings) (*AuthN, error) {
-	settings := factory.NewScopedProviderSettings(providerSettings, "github.com/SigNoz/signoz/ee/authn/callbackauthn/oidccallbackauthn")
-
 	httpClient, err := client.New(providerSettings.Logger, providerSettings.TracerProvider, providerSettings.MeterProvider)
 	if err != nil {
 		return nil, err
 	}
 
 	return &AuthN{
-		settings:   settings,
 		store:      store,
 		licensing:  licensing,
 		httpClient: httpClient,
@@ -129,40 +126,7 @@ func (a *AuthN) HandleCallback(ctx context.Context, query url.Values) (*authtype
 		}
 	}
 
-	name := ""
-	if nameClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Name; nameClaim != "" {
-		if n, ok := claims[nameClaim].(string); ok {
-			name = n
-		}
-	}
-
-	var groups []string
-	if groupsClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Groups; groupsClaim != "" {
-		if claimValue, exists := claims[groupsClaim]; exists {
-			switch g := claimValue.(type) {
-			case []any:
-				for _, group := range g {
-					if gs, ok := group.(string); ok {
-						groups = append(groups, gs)
-					}
-				}
-			case string:
-				// Some IDPs return a single group as a string instead of an array
-				groups = append(groups, g)
-			default:
-				a.settings.Logger().WarnContext(ctx, "oidc: unsupported groups type", "type", fmt.Sprintf("%T", claimValue))
-			}
-		}
-	}
-
-	role := ""
-	if roleClaim := authDomain.AuthDomainConfig().OIDC.ClaimMapping.Role; roleClaim != "" {
-		if r, ok := claims[roleClaim].(string); ok {
-			role = r
-		}
-	}
-
-	return authtypes.NewCallbackIdentity(name, email, authDomain.StorableAuthDomain().OrgID, state, groups, role), nil
+	return authtypes.NewCallbackIdentity("", email, authDomain.StorableAuthDomain().OrgID, state), nil
 }
 
 func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDomain) *authtypes.AuthNProviderInfo {
@@ -181,13 +145,6 @@ func (a *AuthN) oidcProviderAndoauth2Config(ctx context.Context, siteURL *url.UR
 		return nil, nil, err
 	}
 
-	scopes := make([]string, len(defaultScopes))
-	copy(scopes, defaultScopes)
-
-	if authDomain.AuthDomainConfig().RoleMapping != nil && len(authDomain.AuthDomainConfig().RoleMapping.GroupMappings) > 0 {
-		scopes = append(scopes, "groups")
-	}
-
 	return oidcProvider, &oauth2.Config{
 		ClientID:     authDomain.AuthDomainConfig().OIDC.ClientID,
 		ClientSecret: authDomain.AuthDomainConfig().OIDC.ClientSecret,

ee/authn/callbackauthn/samlcallbackauthn/authn.go

@@ -96,26 +96,7 @@ func (a *AuthN) HandleCallback(ctx context.Context, formValues url.Values) (*aut
 		return nil, errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "saml: invalid email").WithAdditional("The nameID assertion is used to retrieve the email address, please check your IDP configuration and try again.")
 	}
 
-	name := ""
-	if nameAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Name; nameAttribute != "" {
-		if val := assertionInfo.Values.Get(nameAttribute); val != "" {
-			name = val
-		}
-	}
-
-	var groups []string
-	if groupAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Groups; groupAttribute != "" {
-		groups = assertionInfo.Values.GetAll(groupAttribute)
-	}
-
-	role := ""
-	if roleAttribute := authDomain.AuthDomainConfig().SAML.AttributeMapping.Role; roleAttribute != "" {
-		if val := assertionInfo.Values.Get(roleAttribute); val != "" {
-			role = val
-		}
-	}
-
-	return authtypes.NewCallbackIdentity(name, email, authDomain.StorableAuthDomain().OrgID, state, groups, role), nil
+	return authtypes.NewCallbackIdentity("", email, authDomain.StorableAuthDomain().OrgID, state), nil
 }
 
 func (a *AuthN) ProviderInfo(ctx context.Context, authDomain *authtypes.AuthDomain) *authtypes.AuthNProviderInfo {

ee/modules/dashboard/impldashboard/module.go

@@ -163,7 +163,7 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 	}
 
 	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		err := module.deletePublic(ctx, orgID, id)
+		err := module.DeletePublic(ctx, orgID, id)
 		if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 			return err
 		}
@@ -263,35 +263,3 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, role types.Role, lock bool) error {
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, role, lock)
 }
-
-func (module *module) deletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
-	publicDashboard, err := module.store.GetPublic(ctx, dashboardID.String())
-	if err != nil {
-		return err
-	}
-
-	role, err := module.role.GetOrCreate(ctx, roletypes.NewRole(roletypes.AnonymousUserRoleName, roletypes.AnonymousUserRoleDescription, roletypes.RoleTypeManaged.StringValue(), orgID))
-	if err != nil {
-		return err
-	}
-
-	deletionObject := authtypes.MustNewObject(
-		authtypes.Resource{
-			Name: dashboardtypes.TypeableMetaResourcePublicDashboard.Name(),
-			Type: authtypes.TypeMetaResource,
-		},
-		authtypes.MustNewSelector(authtypes.TypeMetaResource, publicDashboard.ID.String()),
-	)
-
-	err = module.role.PatchObjects(ctx, orgID, role.ID, authtypes.RelationRead, nil, []*authtypes.Object{deletionObject})
-	if err != nil {
-		return err
-	}
-
-	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
-	if err != nil {
-		return err
-	}
-
-	return nil
-}

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

@@ -9,6 +9,7 @@ import (
 	"github.com/SigNoz/signoz/ee/query-service/integrations/gateway"
 	"github.com/SigNoz/signoz/ee/query-service/usage"
 	"github.com/SigNoz/signoz/pkg/alertmanager"
+	"github.com/SigNoz/signoz/pkg/apis/fields"
 	"github.com/SigNoz/signoz/pkg/http/middleware"
 	querierAPI "github.com/SigNoz/signoz/pkg/querier"
 	baseapp "github.com/SigNoz/signoz/pkg/query-service/app"
@@ -53,6 +54,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		FluxInterval:                  opts.FluxInterval,
 		AlertmanagerAPI:               alertmanager.NewAPI(signoz.Alertmanager),
 		LicensingAPI:                  httplicensing.NewLicensingAPI(signoz.Licensing),
+		FieldsAPI:                     fields.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.TelemetryStore),
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),

ee/query-service/app/server.go

@@ -236,6 +236,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler, web web.Web) (*h
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterCloudIntegrationsRoutes(r, am)
+	apiHandler.RegisterFieldsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterInfraMetricsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)

frontend/.eslintrc.js

@@ -7,6 +7,8 @@ module.exports = {
 		'jest/globals': true,
 	},
 	extends: [
+		'airbnb',
+		'airbnb-typescript',
 		'eslint:recommended',
 		'plugin:react/recommended',
 		'plugin:@typescript-eslint/recommended',
@@ -33,7 +35,6 @@ module.exports = {
 		'react-hooks',
 		'prettier',
 		'jest',
-		'jsx-a11y',
 	],
 	settings: {
 		react: {
@@ -71,6 +72,9 @@ module.exports = {
 		'react-hooks/rules-of-hooks': 'error',
 		'react-hooks/exhaustive-deps': 'error',
 
+		// airbnb
+		'no-underscore-dangle': 'off',
+		'no-console': 'off',
 		'import/prefer-default-export': 'off',
 		'import/extensions': [
 			'error',
@@ -83,9 +87,6 @@ module.exports = {
 			},
 		],
 		'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-		// Disabled because TypeScript already handles this check more accurately,
-		// and the rule has false positives with type-only imports (e.g., TooltipProps from antd)
-		'import/named': 'off',
 		'no-plusplus': 'off',
 		'jsx-a11y/label-has-associated-control': [
 			'error',
@@ -103,10 +104,7 @@ module.exports = {
 				},
 			},
 		],
-		// Allow empty functions for mocks, default context values, and noop callbacks
-		'@typescript-eslint/no-empty-function': 'off',
-		// Allow underscore prefix for intentionally unused variables (e.g., const { id: _id, ...rest } = props)
-		'@typescript-eslint/no-unused-vars': 'warn',
+		'@typescript-eslint/no-unused-vars': 'error',
 		'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
 		'arrow-body-style': ['error', 'as-needed'],
 

frontend/.prettierrc.json

@@ -4,14 +4,5 @@
 	"tabWidth": 1,
 	"singleQuote": true,
 	"jsxSingleQuote": false,
-	"semi": true,
-	"printWidth": 80,
-	"bracketSpacing": true,
-	"bracketSameLine": false,
-	"arrowParens": "always",
-	"endOfLine": "lf",
-	"quoteProps": "as-needed",
-	"proseWrap": "preserve",
-	"htmlWhitespaceSensitivity": "css",
-	"embeddedLanguageFormatting": "auto"
+	"semi": true
 }

frontend/.vscode/settings.json

@@ -1,8 +0,0 @@
-{
-	"editor.formatOnSave": true,
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit"
-	},
-	"prettier.requireConfig": true
-}

frontend/CONTRIBUTIONS.md

@@ -34,18 +34,12 @@ Embrace the spirit of collaboration and contribute to the success of our open-so
 ### Linting and Setup
 
 - It is crucial to refrain from disabling ESLint and TypeScript errors within the project. If there is a specific rule that needs to be disabled, provide a clear and justified explanation for doing so. Maintaining the integrity of the linting and type-checking processes ensures code quality and consistency throughout the codebase.
-- In our project, we rely on several essential ESLint plugins and configurations:
+- In our project, we rely on several essential ESLint plugins, namely:
+  - [plugin:@typescript-eslint](https://typescript-eslint.io/rules/)
+  - [airbnb styleguide](https://github.com/airbnb/javascript)
+  - [plugin:sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)
 
-  - [eslint:recommended](https://eslint.org/docs/latest/rules/) - Core ESLint rules for JavaScript best practices
-  - [plugin:@typescript-eslint](https://typescript-eslint.io/rules/) - TypeScript-specific linting rules
-  - [plugin:react](https://github.com/jsx-eslint/eslint-plugin-react) - React best practices and patterns
-  - [plugin:react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) - Rules of Hooks enforcement
-  - [plugin:sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs) - Code quality and complexity analysis
-  - [plugin:prettier](https://github.com/prettier/eslint-plugin-prettier) - Code formatting via Prettier
-  - [simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort) - Automatic import organization
-  - [plugin:jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y) - Accessibility rules for JSX elements
-
-  To ensure compliance with our coding standards and best practices, we encourage you to refer to the documentation of these plugins. Familiarizing yourself with the ESLint rules they provide will help maintain code quality and consistency throughout the project.
+    To ensure compliance with our coding standards and best practices, we encourage you to refer to the documentation of these plugins. Familiarizing yourself with the ESLint rules they provide will help maintain code quality and consistency throughout the project.
 
 ### Naming Conventions
 

frontend/package.json

@@ -219,11 +219,16 @@
 		"compression-webpack-plugin": "9.0.0",
 		"copy-webpack-plugin": "^11.0.0",
 		"eslint": "^7.32.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-airbnb-typescript": "^16.1.4",
 		"eslint-config-prettier": "^8.3.0",
+		"eslint-config-standard": "^16.0.3",
 		"eslint-plugin-import": "^2.28.1",
 		"eslint-plugin-jest": "^26.9.0",
 		"eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-node": "^11.1.0",
 		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-promise": "^5.1.0",
 		"eslint-plugin-react": "^7.24.0",
 		"eslint-plugin-react-hooks": "^4.3.0",
 		"eslint-plugin-simple-import-sort": "^7.0.0",

frontend/public/svgs/barber-pool.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#fff" d="m9.05 20.616 13.968-.178-.06-9.283-14.417.178z"/><path fill="#d80d1a" d="m10.165 20.736-1.302-2.253.127-5.209 5.133 7.491z"/><path fill="#1d86fa" d="m16.72 20.616-6.416-9.401 4.298.06 6.536 9.372z"/><path fill="#d80d1a" d="m22.958 19.125-5.58-7.88 4.118.12 2.12 2.956z"/><path fill="#a1d2d6" d="m8.75 11.722 14.208-.09-.098-.86-14.14.114zM8.99 21.214l14.237-.18-.329-.864-14.237.177z"/><path fill="#c8c8c8" d="M22.772 21.163c.122.147.882.175.882.175s.444.825 1.41.707c.865-.106 1.2-.829 1.2-.829s1.463-.338 2.259-1.464c.846-1.2.882-2.383.882-4.076 0-1.836-.143-3.088-1.076-4.076-1.073-1.134-2.186-1.218-2.186-1.218s-.39-.654-1.271-.636c-.883.018-1.218.74-1.218.74s-.704.151-.882.282c-.091.067-.067 2.703-.054 5.294.012 2.5-.042 4.988.054 5.1"/><path fill="#858585" d="M28.541 16.538c.353.018.345-1.851.036-3.229-.354-1.57-1.694-2.082-1.8-1.993s-.071 1.675.017 1.764c.09.09.918.494 1.2 1.182.283.69.278 2.262.547 2.276M25.299 21.99l-.056-12.213s.258.04.509.207c.242.162.389.395.389.395l.127 10.828s-.176.325-.35.465c-.381.309-.62.318-.62.318"/><path fill="#e1e0e0" d="m24.692 22.043-.157-12.255s-.323.04-.565.258c-.204.182-.318.44-.318.44l.107 11.01s.164.223.353.354c.23.157.58.193.58.193"/><path fill="#c8c8c8" d="M9.13 21.32c.158-.142.036-10.216-.053-10.392-.089-.175-.829-1.069-2.01-1-1.167.069-1.536.876-1.536.876s-1.169.155-2.065 1.5c-.635.954-.82 2.19-.806 3.74.015 1.712.12 3.319 1.142 4.341.982.982 1.94 1.022 1.94 1.022s.267.87 1.573.87c1.289.002 1.816-.956 1.816-.956"/><path fill="#858585" d="M7.548 22.274s-.373-1.907-.427-6.158.256-6.186.256-6.186.258-.017.504.067c.276.093.458.24.458.24s-.244 3.656-.227 5.879c.018 2.222.37 5.85.37 5.85s-.265.153-.423.206c-.164.051-.51.102-.51.102"/><path fill="#e1e0e0" d="M6.858 22.234s-.48-2.45-.533-6.032.157-6.163.157-6.163-.422.127-.633.322c-.21.196-.318.44-.318.44s-.122 3.359-.14 5.39c-.02 2.454.351 5.216.351 5.216s.085.296.345.496c.367.285.771.331.771.331"/><path fill="#fff" d="M6.1 16.763c.19 0 .3 1.251.38 2.58.045.744.411 2.058-.08 2.058-.49 0-.584-.476-.617-2.09-.034-1.612.064-2.548.317-2.548M3.173 16.667c.12-.042.35.634.903 1.156.39.369.76.49.855.744.096.254.222 1.613-.062 1.631-.396.023-1.022-.262-1.393-.933-.59-1.062-.525-2.518-.303-2.598"/></svg>

frontend/public/svgs/tv.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="#455a64" d="m15.255 10.911-4.82-6.048a.204.204 0 0 1 .025-.278.2.2 0 0 1 .284.018l5.127 5.775a.2.2 0 0 1-.018.284l-.307.271a.2.2 0 0 1-.291-.022M16.494 10.878l-.276-.245a.22.22 0 0 1-.017-.313l5.097-5.746a.22.22 0 0 1 .313-.018c.09.078.1.213.027.307l-4.822 5.99a.227.227 0 0 1-.322.025"/><path fill="#455a64" d="M12.389 11.214c0-.775 1.72-1.406 3.842-1.406s3.842.629 3.842 1.406z"/><path fill="#82aec0" d="M28.353 29.337H3.652c-.544 0-.985-.458-.985-1.02V11.8c0-.564.44-1.02.985-1.02h24.703c.542 0 .985.458.985 1.02v16.516c-.003.562-.443 1.02-.987 1.02"/><path fill="#212121" d="M27.637 28.368H4.438a.79.79 0 0 1-.789-.79V12.456a.79.79 0 0 1 .79-.79h23.198c.436 0 .789.354.789.79v15.124a.79.79 0 0 1-.79.789"/><path fill="#b9e4ea" d="m5.2 25.995-1.068 1.677c-.186.293.014.691.36.694h18.414a.536.536 0 0 0 .478-.77l-.667-1.373z"/><path fill="#455a64" d="M27.312 27.662h-2.53a.464.464 0 0 1-.465-.464V21.92c0-.258.209-.464.464-.464h2.531c.258 0 .465.209.465.464v5.278a.464.464 0 0 1-.465.464M26.048 20.226a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062"/><path fill="#82aec0" d="M24.966 17.798a.254.254 0 0 0-.009.313l.504.678c.158.21.363.382.6.497l.76.37a.254.254 0 0 0 .316-.38l-.505-.678a1.65 1.65 0 0 0-.6-.498l-.76-.369a.26.26 0 0 0-.306.067"/><path fill="#455a64" d="M26.048 16.268a1.531 1.531 0 1 0 0-3.062 1.531 1.531 0 0 0 0 3.062"/><path fill="#82aec0" d="M26.049 13.33c-.118 0-.22.08-.247.194l-.2.822a1.65 1.65 0 0 0 0 .78l.2.822a.254.254 0 0 0 .493 0l.2-.822a1.65 1.65 0 0 0 0-.78l-.2-.822a.256.256 0 0 0-.247-.194"/><path fill="#2f7889" d="M22.992 25.219c-.17.77-.742 1.366-1.475 1.529-1.205.269-3.45.604-7.148.604-3.883 0-6.487-.369-7.89-.642-.775-.151-1.384-.787-1.536-1.607-.348-1.885-.786-5.652.018-10.357.15-.871.814-1.54 1.643-1.653 1.495-.207 4.167-.483 7.765-.483 3.414 0 5.7.25 6.997.45.797.124 1.435.77 1.598 1.608.962 4.957.43 8.733.028 10.55"/><path fill="#212121" fill-rule="evenodd" d="M14.37 13.055c-3.576 0-6.227.274-7.705.478-.623.085-1.147.593-1.265 1.288-.794 4.64-.361 8.353-.02 10.201.121.653.6 1.138 1.184 1.252 1.375.267 3.951.634 7.805.634 3.672 0 5.884-.334 7.051-.594.553-.122 1.002-.576 1.139-1.192.392-1.772.917-5.485-.032-10.369-.13-.67-.633-1.161-1.23-1.254-1.272-.197-3.536-.444-6.928-.444m-7.827-.403c1.514-.209 4.206-.486 7.826-.486 3.436 0 5.746.25 7.064.454h.001c1 .156 1.771.959 1.966 1.964.976 5.028.439 8.867.027 10.73-.206.928-.9 1.665-1.814 1.868-1.242.277-3.52.615-7.244.615-3.91 0-6.544-.372-7.975-.65-.967-.19-1.705-.976-1.887-1.963m2.036-12.532c-1.035.142-1.84.972-2.02 2.02-.815 4.768-.372 8.59-.016 10.512" clip-rule="evenodd"/><path fill="url(#a)" d="M8.686 14.175c.373-.045 1.08-.013 1.329.744.248.758-.298.963-.591 1.187-.843.642-1.26.887-1.767 1.587-.404.56-1.111.384-1.322.015-.169-.298-.293-1.253.064-1.884.771-1.351 1.914-1.605 2.287-1.649"/><defs><linearGradient id="a" x1="8.303" x2="8.07" y1="9.59" y2="18.014" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>

frontend/src/components/AuthError/AuthError.styles.scss

@@ -1,145 +0,0 @@
-.auth-error-container {
-	margin-top: 24px;
-	width: 100%;
-	animation: horizontal-shaking 300ms ease-out;
-
-	.error-content {
-		background: rgba(229, 72, 77, 0.1);
-		border: 1px solid rgba(229, 72, 77, 0.2);
-		border-radius: 4px;
-
-		&__summary-section {
-			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
-		}
-
-		&__summary {
-			padding: 16px;
-		}
-
-		&__summary-left {
-			gap: 10px;
-		}
-
-		&__icon-wrapper {
-			width: 12px;
-			height: 12px;
-			flex-shrink: 0;
-		}
-
-		&__summary-text {
-			gap: 6px;
-		}
-
-		&__error-code {
-			color: #fadadb;
-			font-size: 13px;
-			font-weight: 500;
-			line-height: 1;
-			letter-spacing: -0.065px;
-		}
-
-		&__error-message {
-			color: #f5b6b8;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.065px;
-		}
-
-		&__message-badge {
-			padding: 0px 16px 16px;
-		}
-
-		&__message-badge-label-text {
-			color: #fadadb;
-		}
-
-		&__message-badge-line {
-			background-image: radial-gradient(
-				circle,
-				rgba(229, 72, 77, 0.3) 1px,
-				transparent 2px
-			);
-		}
-
-		&__messages-section {
-			padding: 0;
-		}
-
-		&__message-list {
-			max-height: 200px;
-		}
-
-		&__message-item {
-			color: #f5b6b8;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.065px;
-
-			&::before {
-				background: #f5b6b8;
-			}
-		}
-
-		&__scroll-hint {
-			background: rgba(229, 72, 77, 0.2);
-		}
-
-		&__scroll-hint-text {
-			color: #fadadb;
-		}
-	}
-
-	.auth-error-icon {
-		color: var(--bg-cherry-300);
-		padding-top: 1px;
-	}
-}
-
-.lightMode {
-	.auth-error-container {
-		.error-content {
-			background: rgba(229, 72, 77, 0.1);
-			border-color: rgba(229, 72, 77, 0.2);
-
-			&__error-code {
-				color: var(--bg-ink-100);
-			}
-
-			&__error-message {
-				color: var(--bg-ink-400);
-			}
-
-			&__message-item {
-				color: var(--bg-ink-400);
-
-				&::before {
-					background: var(--bg-ink-400);
-				}
-			}
-
-			&__scroll-hint-text {
-				color: var(--bg-ink-100);
-			}
-		}
-	}
-}
-
-@keyframes horizontal-shaking {
-	0% {
-		transform: translateX(0);
-	}
-	25% {
-		transform: translateX(5px);
-	}
-	50% {
-		transform: translateX(-5px);
-	}
-	75% {
-		transform: translateX(5px);
-	}
-	100% {
-		transform: translateX(0);
-	}
-}

frontend/src/components/AuthError/AuthError.tsx

@@ -1,22 +0,0 @@
-import './AuthError.styles.scss';
-
-import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import { CircleAlert } from 'lucide-react';
-import APIError from 'types/api/error';
-
-interface AuthErrorProps {
-	error: APIError;
-}
-
-function AuthError({ error }: AuthErrorProps): JSX.Element {
-	return (
-		<div className="auth-error-container">
-			<ErrorContent
-				error={error}
-				icon={<CircleAlert size={12} className="auth-error-icon" />}
-			/>
-		</div>
-	);
-}
-
-export default AuthError;

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

@@ -1,115 +0,0 @@
-@import '@signozhq/design-tokens/dist/style.css';
-
-.auth-footer {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 24px 0;
-	position: relative;
-	z-index: 10;
-}
-
-.auth-footer-content {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 16px;
-	padding: 12px;
-	background: var(--bg-ink-400, #121317);
-	border: 1px solid var(--bg-ink-200, #23262e);
-	border-radius: 4px;
-}
-
-.auth-footer-item {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	height: 12px;
-}
-
-.auth-footer-status-indicator {
-	width: 6px;
-	height: 6px;
-	border-radius: 9999px;
-	background: #25e192;
-	flex-shrink: 0;
-}
-
-.auth-footer-icon {
-	aspect-ratio: 1.93;
-	width: 29px;
-	flex-shrink: 0;
-	object-fit: contain;
-	opacity: 1;
-}
-
-.auth-footer-text {
-	font-family: var(--font-family-inter, Inter, sans-serif);
-	font-size: 11px;
-	font-weight: 400;
-	line-height: 1;
-	color: var(--text-neutral-dark-100, #adb4c2);
-	text-align: center;
-}
-
-.auth-footer-link {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	text-decoration: none;
-	transition: opacity 0.2s ease;
-
-	&:hover {
-		opacity: 0.8;
-	}
-}
-
-.auth-footer-link-icon {
-	flex-shrink: 0;
-	color: var(--text-neutral-dark-50, #eceef2);
-}
-
-.auth-footer-link-status {
-	.auth-footer-text {
-		color: #25e192;
-	}
-
-	.auth-footer-link-icon {
-		color: #25e192;
-	}
-}
-
-.auth-footer-separator {
-	width: 4px;
-	height: 4px;
-	border-radius: 50%;
-	background: var(--bg-ink-200, #23262e);
-	flex-shrink: 0;
-}
-
-.lightMode {
-	.auth-footer-content {
-		background: var(--bg-base-white, #ffffff);
-		border-color: var(--bg-vanilla-300, #e9e9e9);
-		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
-	}
-
-	.auth-footer-icon {
-		filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(518%)
-			hue-rotate(192deg) brightness(80%) contrast(95%);
-		opacity: 0.9;
-	}
-
-	.auth-footer-text {
-		color: var(--text-neutral-light-200, #80828d);
-	}
-
-	.auth-footer-link-icon {
-		color: var(--text-neutral-light-100, #62636c);
-	}
-
-	.auth-footer-separator {
-		background: var(--bg-vanilla-300, #e9e9e9);
-	}
-}

frontend/src/components/AuthPageContainer/AuthFooter.tsx

@@ -1,75 +0,0 @@
-import './AuthFooter.styles.scss';
-
-import { ArrowUpRight } from 'lucide-react';
-import React from 'react';
-
-interface FooterItem {
-	icon?: string;
-	text: string;
-	url?: string;
-	statusIndicator?: boolean;
-}
-
-const footerItems: FooterItem[] = [
-	{
-		text: 'All systems operational',
-		url: 'https://status.signoz.io/',
-		statusIndicator: true,
-	},
-	{
-		text: 'Privacy',
-		url: 'https://www.signoz.io/privacy',
-	},
-	{
-		text: 'Security',
-		url: 'https://www.signoz.io/security',
-	},
-];
-
-function AuthFooter(): JSX.Element {
-	return (
-		<footer className="auth-footer">
-			<div className="auth-footer-content">
-				{footerItems.map((item, index) => (
-					<React.Fragment key={item.text}>
-						<div className="auth-footer-item">
-							{item.statusIndicator && (
-								<div className="auth-footer-status-indicator" />
-							)}
-							{item.icon && (
-								<img
-									loading="lazy"
-									src={item.icon}
-									alt=""
-									className="auth-footer-icon"
-								/>
-							)}
-							{item.url ? (
-								<a
-									href={item.url}
-									className={`auth-footer-link ${
-										item.statusIndicator ? 'auth-footer-link-status' : ''
-									}`}
-									target="_blank"
-									rel="noopener noreferrer"
-								>
-									<span className="auth-footer-text">{item.text}</span>
-									{!item.statusIndicator && (
-										<ArrowUpRight size={12} className="auth-footer-link-icon" />
-									)}
-								</a>
-							) : (
-								<span className="auth-footer-text">{item.text}</span>
-							)}
-						</div>
-						{index < footerItems.length - 1 && (
-							<div className="auth-footer-separator" />
-						)}
-					</React.Fragment>
-				))}
-			</div>
-		</footer>
-	);
-}
-
-export default AuthFooter;

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

@@ -1,82 +0,0 @@
-@import '@signozhq/design-tokens/dist/style.css';
-
-.auth-header {
-	width: 100%;
-	max-width: 1176px;
-	margin: 0 auto;
-	padding: 12px 0;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
-	z-index: 10;
-}
-
-.auth-header-logo {
-	display: flex;
-	align-items: center;
-	gap: 4.9px;
-	text-decoration: none;
-}
-
-.auth-header-logo-icon {
-	width: 17.5px;
-	height: 17.5px;
-	flex-shrink: 0;
-}
-
-.auth-header-logo-text {
-	font-family: Satoshi, var(--font-family-inter, Inter), sans-serif;
-	font-size: 15.4px;
-	font-weight: 500;
-	line-height: 17.5px;
-	color: var(--text-neutral-dark-50, #eceef2);
-	white-space: nowrap;
-}
-
-.auth-header-help-button {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	height: 32px;
-	padding: 10px 16px;
-	background: var(--bg-ink-400, #121317);
-	border: none;
-	border-radius: 2px;
-	cursor: pointer;
-	transition: opacity 0.2s ease;
-
-	span {
-		font-family: var(--font-family-inter, Inter, sans-serif);
-		font-size: 11px;
-		font-weight: 500;
-		line-height: 1;
-		color: var(--text-neutral-dark-100, #adb4c2);
-		text-align: center;
-	}
-
-	svg {
-		flex-shrink: 0;
-		color: var(--text-neutral-dark-100, #adb4c2);
-	}
-
-	&:hover {
-		opacity: 0.8;
-	}
-}
-
-.lightMode {
-	.auth-header-logo-text {
-		color: var(--text-neutral-light-100, #62636c);
-	}
-
-	.auth-header-help-button {
-		background: var(--bg-vanilla-200, #f5f5f5);
-
-		span,
-		svg {
-			color: var(--text-neutral-light-200, #80828d);
-		}
-	}
-}

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,33 +0,0 @@
-import './AuthHeader.styles.scss';
-
-import { Button } from '@signozhq/button';
-import { LifeBuoy } from 'lucide-react';
-import { useCallback } from 'react';
-
-function AuthHeader(): JSX.Element {
-	const handleGetHelp = useCallback((): void => {
-		window.open('https://signoz.io/support/', '_blank');
-	}, []);
-
-	return (
-		<header className="auth-header">
-			<div className="auth-header-logo">
-				<img
-					src="/Logos/signoz-brand-logo.svg"
-					alt="SigNoz"
-					className="auth-header-logo-icon"
-				/>
-				<span className="auth-header-logo-text">SigNoz</span>
-			</div>
-			<Button
-				className="auth-header-help-button"
-				prefixIcon={<LifeBuoy size={12} />}
-				onClick={handleGetHelp}
-			>
-				Get Help
-			</Button>
-		</header>
-	);
-}
-
-export default AuthHeader;

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

@@ -1,181 +0,0 @@
-@import '@signozhq/design-tokens/dist/style.css';
-
-.auth-page-wrapper {
-	position: relative;
-	min-height: 100vh;
-	width: 100%;
-	background: var(--bg-neutral-dark-1000, #0a0c10);
-	display: flex;
-	flex-direction: column;
-}
-
-.auth-page-background {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
-	overflow: hidden;
-}
-
-.auth-page-dots {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100vh;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.bg-dot-pattern {
-	background: radial-gradient(
-		circle,
-		var(--bg-neutral-dark-50, #eceef2) 1px,
-		transparent 1px
-	);
-	background-size: 12px 12px;
-	opacity: 1;
-}
-
-.masked-dots {
-	mask-image: radial-gradient(
-		circle at 50% 0%,
-		rgba(11, 12, 14, 0.1) 0%,
-		rgba(11, 12, 14, 0) 56.77%
-	);
-	-webkit-mask-image: radial-gradient(
-		circle at 50% 0%,
-		rgba(11, 12, 14, 0.1) 0%,
-		rgba(11, 12, 14, 0) 56.77%
-	);
-}
-
-.auth-page-gradient {
-	position: absolute;
-	left: 0;
-	right: 0;
-	top: 0;
-	margin: 0 auto;
-	height: 450px;
-	width: 100%;
-	flex-shrink: 0;
-	border-radius: 956px;
-	background: radial-gradient(
-		ellipse at center -500px,
-		rgba(78, 116, 248, 0.3) 0%,
-		transparent 70%
-	);
-	opacity: 0.3;
-	filter: blur(150px);
-
-	@media (min-width: 768px) {
-		height: 956px;
-		filter: blur(300px);
-	}
-}
-
-.auth-page-line-left,
-.auth-page-line-right {
-	position: absolute;
-	top: 0;
-	width: 1px;
-	height: 100%;
-	background-image: repeating-linear-gradient(
-		to bottom,
-		var(--bg-ink-200, #23262e) 0px,
-		var(--bg-ink-200, #23262e) 4px,
-		transparent 4px,
-		transparent 8px
-	);
-	pointer-events: none;
-
-	@media (max-width: 1440px) {
-		display: none;
-	}
-}
-
-.auth-page-line-left {
-	left: calc(50% - 600px);
-}
-
-.auth-page-line-right {
-	left: calc(50% + 600px);
-}
-
-.auth-page-layout {
-	position: relative;
-	z-index: 1;
-	width: 100%;
-	max-width: 1440px;
-	margin: 0 auto;
-	min-height: 100vh;
-	display: flex;
-	flex-direction: column;
-
-	@media (max-width: 1440px) {
-		padding: 0 24px;
-	}
-}
-
-.auth-page-content {
-	flex: 1;
-	display: flex;
-	align-items: flex-start;
-	justify-content: center;
-	padding-top: 8vh;
-	padding-bottom: 24px;
-	width: 100%;
-	position: relative;
-
-	@media (max-width: 768px) {
-		padding-top: 15vh;
-		align-items: center;
-	}
-
-	&.onboarding-flow {
-		padding-top: 0;
-
-		@media (max-width: 768px) {
-			padding-top: 0;
-		}
-	}
-}
-
-.lightMode {
-	.auth-page-wrapper {
-		background: var(--bg-base-white, #ffffff);
-	}
-
-	.bg-dot-pattern {
-		background: radial-gradient(circle, rgba(35, 38, 46, 1) 1px, transparent 1px);
-		background-size: 12px 12px;
-	}
-
-	.auth-page-gradient {
-		background: radial-gradient(
-			ellipse at center top,
-			rgba(78, 116, 248, 0.12) 0%,
-			transparent 60%
-		);
-		opacity: 0.8;
-		filter: blur(200px);
-
-		@media (min-width: 768px) {
-			filter: blur(300px);
-		}
-	}
-
-	.auth-page-line-left,
-	.auth-page-line-right {
-		background-image: repeating-linear-gradient(
-			to bottom,
-			var(--bg-vanilla-300, #e9e9e9) 0px,
-			var(--bg-vanilla-300, #e9e9e9) 4px,
-			transparent 4px,
-			transparent 8px
-		);
-	}
-}

frontend/src/components/AuthPageContainer/index.tsx

@@ -1,41 +0,0 @@
-import './AuthPageContainer.styles.scss';
-
-import { PropsWithChildren } from 'react';
-
-import AuthFooter from './AuthFooter';
-import AuthHeader from './AuthHeader';
-
-type AuthPageContainerProps = PropsWithChildren<{
-	isOnboarding?: boolean;
-}>;
-
-function AuthPageContainer({
-	children,
-	isOnboarding = false,
-}: AuthPageContainerProps): JSX.Element {
-	return (
-		<div className="auth-page-wrapper">
-			<div className="auth-page-background">
-				<div className="auth-page-dots bg-dot-pattern masked-dots" />
-				<div className="auth-page-gradient" />
-				<div className="auth-page-line-left" />
-				<div className="auth-page-line-right" />
-			</div>
-			<div className="auth-page-layout">
-				<AuthHeader />
-				<main
-					className={`auth-page-content ${isOnboarding ? 'onboarding-flow' : ''}`}
-				>
-					{children}
-				</main>
-				<AuthFooter />
-			</div>
-		</div>
-	);
-}
-
-AuthPageContainer.defaultProps = {
-	isOnboarding: false,
-};
-
-export default AuthPageContainer;

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -58,7 +58,6 @@
 		flex-direction: column;
 		gap: 16px;
 		padding-left: 30px;
-		margin-bottom: 1rem;
 
 		li {
 			position: relative;

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -98,7 +98,20 @@ function ClientSideQBSearch(
 	const [isOpen, setIsOpen] = useState<boolean>(false);
 
 	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
-	const [tags, setTags] = useState<ITag[]>(filters.items as ITag[]);
+	const [tags, setTags] = useState<ITag[]>(() => {
+		const currentTags: ITag[] = [];
+		filters.items.forEach((item) => {
+			if (item.key) {
+				currentTags.push({
+					id: item.id,
+					key: item.key,
+					op: item.op,
+					value: item.value,
+				});
+			}
+		});
+		return currentTags;
+	});
 
 	// this will maintain the current state of in process filter item
 	const [currentFilterItem, setCurrentFilterItem] = useState<ITag | undefined>();
@@ -143,14 +156,17 @@ function ClientSideQBSearch(
 				setSearchValue((parsedValue as BaseAutocompleteData)?.key);
 			} else if (currentState === DropdownState.OPERATOR) {
 				if (value === OPERATORS.EXISTS || value === OPERATORS.NOT_EXISTS) {
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: value,
-							value: '',
-						} as ITag,
-					]);
+					setTags((prev) => {
+						const newTags = [...prev];
+						if (currentFilterItem?.key) {
+							newTags.push({
+								key: currentFilterItem.key,
+								op: value,
+								value: '',
+							});
+						}
+						return newTags;
+					});
 					setCurrentFilterItem(undefined);
 					setSearchValue('');
 					setCurrentState(DropdownState.ATTRIBUTE_KEY);
@@ -176,14 +192,17 @@ function ClientSideQBSearch(
 						setSearchValue('');
 						setCurrentState(DropdownState.ATTRIBUTE_KEY);
 						setCurrentFilterItem(undefined);
-						setTags((prev) => [
-							...prev,
-							{
-								key: currentFilterItem?.key,
-								op: currentFilterItem?.op,
-								value: tagValue,
-							} as ITag,
-						]);
+						setTags((prev) => {
+							const newTags = [...prev];
+							if (currentFilterItem?.key) {
+								newTags.push({
+									key: currentFilterItem.key,
+									op: currentFilterItem?.op,
+									value: tagValue,
+								});
+							}
+							return newTags;
+						});
 						return;
 					}
 					// this is for adding subsequent comma seperated values
@@ -195,14 +214,17 @@ function ClientSideQBSearch(
 					setSearchValue('');
 					setCurrentState(DropdownState.ATTRIBUTE_KEY);
 					setCurrentFilterItem(undefined);
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: currentFilterItem?.op,
-							value,
-						} as ITag,
-					]);
+					setTags((prev) => {
+						const newTags = [...prev];
+						if (currentFilterItem?.key) {
+							newTags.push({
+								key: currentFilterItem?.key,
+								op: currentFilterItem?.op,
+								value,
+							});
+						}
+						return newTags;
+					});
 				}
 			}
 		},
@@ -255,14 +277,17 @@ function ClientSideQBSearch(
 				currentFilterItem?.op === OPERATORS.NOT_EXISTS
 			) {
 				// is exists and not exists operator is present then convert directly to tag! no need of value here
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: currentFilterItem?.op,
-						value: '',
-					},
-				]);
+				setTags((prev) => {
+					const newTags = [...prev];
+					if (currentFilterItem?.key) {
+						newTags.push({
+							key: currentFilterItem.key,
+							op: currentFilterItem.op,
+							value: '',
+						});
+					}
+					return newTags;
+				});
 				setCurrentFilterItem(undefined);
 				setSearchValue('');
 				setCurrentState(DropdownState.ATTRIBUTE_KEY);
@@ -274,23 +299,25 @@ function ClientSideQBSearch(
 						: 1,
 				)
 			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key as BaseAutocompleteData,
-						op: currentFilterItem?.op as string,
-						value: currentFilterItem?.value || '',
-					},
-				]);
+				setTags((prev) => {
+					const newTags = [...prev];
+					if (currentFilterItem) {
+						const newTag = {
+							key: currentFilterItem?.key,
+							op: currentFilterItem?.op,
+							value: currentFilterItem?.value,
+						};
+						newTags.push(newTag);
+					}
+					return newTags;
+				});
 				setCurrentFilterItem(undefined);
 				setSearchValue('');
 				setCurrentState(DropdownState.ATTRIBUTE_KEY);
 			}
 		}
 	}, [
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		currentFilterItem?.value,
+		currentFilterItem,
 		searchValue,
 		whereClauseConfig?.customKey,
 		whereClauseConfig?.customOp,
@@ -321,14 +348,17 @@ function ClientSideQBSearch(
 				tagOperator === OPERATORS.EXISTS ||
 				tagOperator === OPERATORS.NOT_EXISTS
 			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: tagOperator,
-						value: '',
-					} as ITag,
-				]);
+				setTags((prev) => {
+					const newTags = [...prev];
+					if (currentFilterItem?.key) {
+						newTags.push({
+							key: currentFilterItem.key,
+							op: tagOperator,
+							value: '',
+						});
+					}
+					return newTags;
+				});
 				setCurrentFilterItem(undefined);
 				setSearchValue('');
 				setCurrentState(DropdownState.ATTRIBUTE_KEY);
@@ -498,12 +528,18 @@ function ClientSideQBSearch(
 
 		if (!isEqual(filters, filterTags)) {
 			onChange(filterTags);
-			setTags(
-				filterTags.items.map((tag) => ({
-					...tag,
-					op: getOperatorFromValue(tag.op),
-				})) as ITag[],
-			);
+			const newTags: ITag[] = [];
+			filterTags.items.forEach((tag) => {
+				if (tag.key) {
+					newTags.push({
+						id: tag.id,
+						key: tag.key,
+						op: getOperatorFromValue(tag.op),
+						value: tag.value,
+					});
+				}
+			});
+			setTags(newTags);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [tags]);

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,102 +0,0 @@
-import { Calendar } from '@signozhq/calendar';
-import { Button } from 'antd';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { CalendarIcon, Check, X } from 'lucide-react';
-import { useTimezone } from 'providers/Timezone';
-
-import { DateRange } from './CustomTimePickerPopoverContent';
-
-function CalendarContainer({
-	dateRange,
-	onSelectDateRange,
-	onCancel,
-	onApply,
-}: {
-	dateRange: DateRange;
-	onSelectDateRange: (dateRange: DateRange) => void;
-	onCancel: () => void;
-	onApply: () => void;
-}): JSX.Element {
-	const { timezone } = useTimezone();
-
-	// this is to override the default behavior of the shadcn calendar component
-	// if a range is already selected, clicking on a date will reset selection and set the new date as the start date
-	const handleSelect = (
-		_selected: DateRange | undefined,
-		clickedDate?: Date,
-	): void => {
-		if (!clickedDate) {
-			return;
-		}
-
-		// No dates selected → start new
-		if (!dateRange?.from) {
-			onSelectDateRange({ from: clickedDate });
-			return;
-		}
-
-		// Only start selected → complete the range
-		if (dateRange.from && !dateRange.to) {
-			if (clickedDate < dateRange.from) {
-				onSelectDateRange({ from: clickedDate, to: dateRange.from });
-			} else {
-				onSelectDateRange({ from: dateRange.from, to: clickedDate });
-			}
-			return;
-		}
-
-		onSelectDateRange({ from: clickedDate, to: undefined });
-	};
-
-	return (
-		<div className="calendar-container">
-			<div className="calendar-container-header">
-				<CalendarIcon size={12} />
-				<div className="calendar-container-header-title">
-					{dayjs(dateRange?.from)
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.MONTH_DATE_SHORT)}{' '}
-					-{' '}
-					{dayjs(dateRange?.to)
-						.tz(timezone.value)
-						.format(DATE_TIME_FORMATS.MONTH_DATE_SHORT)}
-				</div>
-			</div>
-
-			<div className="calendar-container-body">
-				<Calendar
-					mode="range"
-					required
-					defaultMonth={dateRange?.from}
-					selected={dateRange}
-					disabled={{
-						after: dayjs().toDate(),
-					}}
-					onSelect={handleSelect}
-				/>
-
-				<div className="calendar-actions">
-					<Button
-						type="primary"
-						className="periscope-btn secondary cancel-btn"
-						onClick={onCancel}
-						icon={<X size={12} />}
-					>
-						Cancel
-					</Button>
-					<Button
-						type="primary"
-						className="periscope-btn primary apply-btn"
-						onClick={onApply}
-						icon={<Check size={12} />}
-					>
-						Apply
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default CalendarContainer;

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

@@ -36,6 +36,7 @@
 }
 
 .time-selection-dropdown-content {
+	min-width: 172px;
 	width: 100%;
 }
 
@@ -47,16 +48,18 @@
 	padding: 4px 8px;
 	padding-left: 0px !important;
 
-	input {
-		width: 280px;
-
-		&::placeholder {
-			color: white;
+	&.custom-time {
+		input:not(:focus) {
+			min-width: 280px;
 		}
+	}
 
-		&:focus::placeholder {
-			color: rgba($color: #ffffff, $alpha: 0.4);
-		}
+	input::placeholder {
+		color: white;
+	}
+
+	input:focus::placeholder {
+		color: rgba($color: #ffffff, $alpha: 0.4);
 	}
 }
 
@@ -172,26 +175,9 @@
 }
 
 .time-input-prefix {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0 4px;
-	border-radius: 3px;
-
-	width: 36px;
-
-	font-size: 11px;
-	color: var(--bg-vanilla-400);
-	background-color: var(--bg-ink-200);
-
-	&.is-live {
-		background-color: transparent;
-		color: var(--bg-forest-500);
-	}
-
 	.live-dot-icon {
-		width: 8px;
-		height: 8px;
+		width: 6px;
+		height: 6px;
 		border-radius: 50%;
 		background-color: var(--bg-forest-500);
 		animation: ripple 1s infinite;
@@ -205,7 +191,7 @@
 	0% {
 		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
 	}
-	60% {
+	70% {
 		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
 	}
 	100% {
@@ -265,11 +251,6 @@
 		background: rgb(179 179 179 / 15%);
 	}
 
-	.time-input-prefix {
-		background-color: var(--bg-vanilla-300);
-		color: var(--bg-ink-400);
-	}
-
 	.time-input-suffix-icon-badge {
 		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -1,9 +1,8 @@
-/* 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 { Input, InputRef, Popover, Tooltip } from 'antd';
+import { Input, Popover, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -14,9 +13,10 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
-import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
+import { isValidTimeFormat } from 'lib/getMinMax';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import debounce from 'lodash-es/debounce';
+import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import {
 	ChangeEvent,
@@ -25,26 +25,20 @@ import {
 	useCallback,
 	useEffect,
 	useMemo,
-	useRef,
 	useState,
 } from 'react';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { popupContainer } from 'utils/selectPopupContainer';
-import { TimeRangeValidationResult, validateTimeRange } from 'utils/timeUtils';
 
 import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
 
-const maxAllowedMinTimeInMonths = 15;
+const maxAllowedMinTimeInMonths = 6;
 type ViewType = 'datetime' | 'timezone';
 const DEFAULT_VIEW: ViewType = 'datetime';
 
-export enum CustomTimePickerInputStatus {
-	SUCCESS = 'success',
-	ERROR = 'error',
-	UNSET = '',
-}
-
 interface CustomTimePickerProps {
 	onSelect: (value: string) => void;
 	onError: (value: boolean) => void;
@@ -70,8 +64,6 @@ interface CustomTimePickerProps {
 	onExitLiveLogs?: () => void;
 	/** When false, hides the "Recently Used" time ranges section */
 	showRecentlyUsed?: boolean;
-	minTime: number;
-	maxTime: number;
 }
 
 function CustomTimePicker({
@@ -92,24 +84,23 @@ function CustomTimePicker({
 	onExitLiveLogs,
 	showLiveLogs,
 	showRecentlyUsed = true,
-	minTime,
-	maxTime,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
 		setSelectedTimePlaceholderValue,
 	] = useState('Select / Enter Time Range');
 
-	const [inputValue, setInputValue] = useState('');
-	const [inputStatus, setInputStatus] = useState<CustomTimePickerInputStatus>(
-		CustomTimePickerInputStatus.UNSET,
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
 	);
-	const [inputErrorDetails, setInputErrorDetails] = useState<
-		TimeRangeValidationResult['errorDetails'] | null
-	>(null);
-	const location = useLocation();
 
-	const inputRef = useRef<InputRef>(null);
+	const [inputValue, setInputValue] = useState('');
+	const [inputStatus, setInputStatus] = useState<'' | 'error' | 'success'>('');
+	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
+		null,
+	);
+	const location = useLocation();
+	const [isInputFocused, setIsInputFocused] = useState(false);
 
 	const [activeView, setActiveView] = useState<ViewType>(DEFAULT_VIEW);
 
@@ -132,48 +123,12 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
-	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
-	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
-	const getSelectedTimeRangeLabelInRelativeFormat = (
-		selectedTime: string,
-	): string => {
-		if (!selectedTime || selectedTime === 'custom') {
-			return selectedTime || '';
-		}
-
-		// Check if the format matches the relative time format (e.g., 1m, 2h, 3d, 4w)
-		const match = selectedTime.match(/^(\d+)([mhdw])$/);
-		if (!match) {
-			// If it doesn't match the format, return as is
-			return `Last ${selectedTime}`;
-		}
-
-		const value = parseInt(match[1], 10);
-		const unit = match[2];
-
-		// Map unit abbreviations to full words
-		const unitMap: Record<string, { singular: string; plural: string }> = {
-			m: { singular: 'minute', plural: 'minutes' },
-			h: { singular: 'hour', plural: 'hours' },
-			d: { singular: 'day', plural: 'days' },
-			w: { singular: 'week', plural: 'weeks' },
-		};
-
-		const unitLabel = value === 1 ? unitMap[unit].singular : unitMap[unit].plural;
-
-		return `Last ${value} ${unitLabel}`;
-	};
-
 	const getSelectedTimeRangeLabel = (
 		selectedTime: string,
 		selectedTimeValue: string,
 	): string => {
-		if (!selectedTime) {
-			return '';
-		}
-
 		if (selectedTime === 'custom') {
-			// TODO: if the user preference is 12 hour format, then convert the date range string to 12-hour format (pick this up while working on 12/24 hour preference feature)
+			// TODO(shaheer): if the user preference is 12 hour format, then convert the date range string to 12-hour format (pick this up while working on 12/24 hour preference feature)
 			// // Convert the date range string to 12-hour format
 			// const dates = selectedTimeValue.split(' - ');
 			// if (dates.length === 2) {
@@ -209,90 +164,42 @@ function CustomTimePicker({
 			}
 		}
 
-		if (isValidShortHandDateTimeFormat(selectedTime)) {
-			return getSelectedTimeRangeLabelInRelativeFormat(selectedTime);
+		if (isValidTimeFormat(selectedTime)) {
+			return selectedTime;
 		}
 
 		return '';
 	};
 
-	const resetErrorStatus = (): void => {
-		setInputStatus(CustomTimePickerInputStatus.UNSET);
-		onError(false);
-		setInputErrorDetails(null);
-	};
-
 	useEffect(() => {
 		if (showLiveLogs) {
 			setSelectedTimePlaceholderValue('Live');
-			setInputValue('Live');
-			resetErrorStatus();
 		} else {
 			const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
 			setSelectedTimePlaceholderValue(value);
-			setInputValue(value);
-			resetErrorStatus();
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [selectedTime, selectedValue, showLiveLogs]);
 
 	const hide = (): void => {
 		setOpen(false);
 	};
 
-	const getInputPrefix = (): JSX.Element => {
-		if (showLiveLogs) {
-			return (
-				<span className="time-input-prefix is-live">
-					<span className="live-dot-icon" />
-				</span>
-			);
-		}
-
-		const timeDifference = getTimeDifference(
-			Number(minTime / 1000_000),
-			Number(maxTime / 1000_000),
-		);
-
-		return <span className="time-input-prefix">{timeDifference}</span>;
-	};
-
 	const handleOpenChange = (newOpen: boolean): void => {
 		setOpen(newOpen);
-
 		if (!newOpen) {
 			setCustomDTPickerVisible?.(false);
 			setActiveView('datetime');
-
-			if (showLiveLogs) {
-				setSelectedTimePlaceholderValue('Live');
-				setInputValue('Live');
-				return;
-			}
-
-			// set the input value to a relative format if the selected time is not custom
-			const inputValue = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-			setInputValue(inputValue);
 		}
 	};
 
-	const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
-		const inputValue = event.target.value;
-		setInputValue(inputValue);
-
-		resetErrorStatus();
-	};
-
-	const handleInputPressEnter = (): void => {
-		// check if the entered time is in the format of 1m, 2h, 3d, 4w
-		const isTimeDurationShortHandFormat = /^(\d+)([mhdw])$/.test(inputValue);
-
-		if (isTimeDurationShortHandFormat) {
-			setInputStatus(CustomTimePickerInputStatus.SUCCESS);
+	const debouncedHandleInputChange = debounce((inputValue): void => {
+		const isValidFormat = /^(\d+)([mhdw])$/.test(inputValue);
+		if (isValidFormat) {
+			setInputStatus('success');
 			onError(false);
-			setInputErrorDetails(null);
+			setInputErrorMessage(null);
 
-			const match = inputValue.match(/^(\d+)([mhdw])$/) as RegExpMatchArray;
+			const match = inputValue.match(/^(\d+)([mhdw])$/);
 
 			const value = parseInt(match[1], 10);
 			const unit = match[2];
@@ -323,13 +230,9 @@ function CustomTimePicker({
 			}
 
 			if (minTime && (!minTime.isValid() || minTime < maxAllowedMinTime)) {
-				setInputStatus(CustomTimePickerInputStatus.ERROR);
+				setInputStatus('error');
 				onError(true);
-				setInputErrorDetails({
-					message: `Please enter time less than ${maxAllowedMinTimeInMonths} months`,
-					code: 'TIME_LESS_THAN_MAX_ALLOWED_TIME_IN_MONTHS',
-					description: `Please enter time less than ${maxAllowedMinTimeInMonths} months`,
-				});
+				setInputErrorMessage('Please enter time less than 6 months');
 				if (isFunction(onCustomTimeStatusUpdate)) {
 					onCustomTimeStatusUpdate(true);
 				}
@@ -338,64 +241,44 @@ function CustomTimePicker({
 					time: [minTime, currentTime],
 					timeStr: inputValue,
 				});
-
-				setOpen(false);
 			}
-
-			return;
-		}
-
-		// parse the input value to get the start and end time
-		const [startTime, endTime] = inputValue.split(/\s[-–]\s/);
-
-		// check if startTime and endTime are epoch format
-		const { isValid: isValidStartTime, range: epochRange } = validateEpochRange(
-			Number(startTime),
-			Number(endTime),
-		);
-
-		if (isValidStartTime && epochRange?.startTime && epochRange?.endTime) {
-			onCustomDateHandler?.([epochRange?.startTime, epochRange?.endTime]);
-
-			setOpen(false);
-
-			return;
-		}
-
-		const {
-			isValid: isValidTimeRange,
-			errorDetails,
-			startTimeMs,
-			endTimeMs,
-		} = validateTimeRange(
-			startTime,
-			endTime,
-			DATE_TIME_FORMATS.UK_DATETIME_SECONDS,
-		);
-
-		if (!isValidTimeRange) {
-			setInputStatus(CustomTimePickerInputStatus.ERROR);
+		} else {
+			setInputStatus('error');
 			onError(true);
-			setInputErrorDetails(errorDetails || null);
-			return;
+			setInputErrorMessage(null);
+			if (isFunction(onCustomTimeStatusUpdate)) {
+				onCustomTimeStatusUpdate(false);
+			}
+		}
+	}, 300);
+
+	const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
+		const inputValue = event.target.value;
+
+		if (inputValue.length > 0) {
+			setOpen(false);
+		} else {
+			setOpen(true);
 		}
 
-		onCustomDateHandler?.([dayjs(startTimeMs), dayjs(endTimeMs)]);
+		setInputValue(inputValue);
 
-		setOpen(false);
+		// Call the debounced function with the input value
+		debouncedHandleInputChange(inputValue);
 	};
 
 	const handleSelect = (label: string, value: string): void => {
-		if (value === 'custom') {
+		if (label === 'Custom') {
 			setCustomDTPickerVisible?.(true);
 			return;
 		}
 
 		onSelect(value);
 		setSelectedTimePlaceholderValue(label);
-		resetErrorStatus();
+		setInputStatus('');
+		onError(false);
+		setInputErrorMessage(null);
 		setInputValue('');
-
 		if (value !== 'custom') {
 			hide();
 		}
@@ -422,48 +305,20 @@ function CustomTimePicker({
 		</div>
 	);
 
-	const handleOpen = (e: React.SyntheticEvent): void => {
-		e.stopPropagation();
-
-		if (showLiveLogs) {
-			setOpen(true);
-			setSelectedTimePlaceholderValue('Live');
-			setInputValue('Live');
-			return;
-		}
-
-		setOpen(true);
-		// 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,
-		);
-
-		setInputValue(`${startTime} - ${endTime}`);
+	const handleFocus = (): void => {
+		setIsInputFocused(true);
+		setActiveView('datetime');
 	};
 
-	const handleClose = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-		setOpen(false);
-		setCustomDTPickerVisible?.(false);
-
-		if (showLiveLogs) {
-			setInputValue('Live');
-			return;
-		}
-
-		// set the input value to a relative format if the selected time is not custom
-		const inputValue = getSelectedTimeRangeLabel(selectedTime, selectedValue);
-		setInputValue(inputValue);
+	const handleBlur = (): void => {
+		setIsInputFocused(false);
 	};
 
 	// this is required as TopNav component wraps the components and we need to clear the state on path change
 	useEffect(() => {
-		resetErrorStatus();
+		setInputStatus('');
+		onError(false);
+		setInputErrorMessage(null);
 		setInputValue('');
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [location.pathname]);
@@ -480,10 +335,6 @@ function CustomTimePicker({
 		);
 	};
 
-	const handleInputBlur = (): void => {
-		resetErrorStatus();
-	};
-
 	const getTooltipTitle = (): string => {
 		if (selectedTime === 'custom' && inputValue === '' && !open) {
 			return `${dayjs(minTime / 1000_000)
@@ -498,19 +349,27 @@ function CustomTimePicker({
 		return '';
 	};
 
-	// 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);
+	const getInputPrefix = (): JSX.Element => {
+		if (showLiveLogs) {
+			return (
+				<div className="time-input-prefix">
+					<div className="live-dot-icon" />
+				</div>
+			);
 		}
-	}, [open]);
+
+		return (
+			<div className="time-input-prefix">
+				{inputValue && inputStatus === 'success' ? (
+					<CheckCircle size={14} color="#51E7A8" />
+				) : (
+					<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
+						<Clock size={14} className="cursor-pointer" />
+					</Tooltip>
+				)}
+			</div>
+		);
+	};
 
 	return (
 		<div className="custom-time-picker">
@@ -526,10 +385,9 @@ function CustomTimePicker({
 					content={
 						newPopover ? (
 							<CustomTimePickerPopoverContent
-								isLiveLogsEnabled={!!showLiveLogs}
 								setIsOpen={setOpen}
-								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
 								customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
+								setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
 								onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
 								onSelectHandler={handleSelect}
 								onGoLive={defaultTo(onGoLive, noop)}
@@ -541,10 +399,6 @@ function CustomTimePicker({
 								setIsOpenedFromFooter={setIsOpenedFromFooter}
 								isOpenedFromFooter={isOpenedFromFooter}
 								showRecentlyUsed={showRecentlyUsed}
-								customDateTimeInputStatus={inputStatus}
-								inputErrorDetails={inputErrorDetails}
-								minTime={minTime}
-								maxTime={maxTime}
 							/>
 						) : (
 							content
@@ -553,32 +407,25 @@ function CustomTimePicker({
 					arrow={false}
 					trigger="click"
 					open={open}
-					destroyTooltipOnHide
 					onOpenChange={handleOpenChange}
 					style={{
 						padding: 0,
 					}}
 				>
 					<Input
-						ref={inputRef}
-						className={cx(
-							'timeSelection-input',
-							inputStatus === CustomTimePickerInputStatus.ERROR ? 'error' : '',
-						)}
+						className="timeSelection-input"
 						type="text"
-						status={
-							inputValue && inputStatus === CustomTimePickerInputStatus.ERROR
-								? 'error'
-								: ''
+						status={inputValue && inputStatus === 'error' ? 'error' : ''}
+						placeholder={
+							isInputFocused
+								? 'Time Format (1m or 2h or 3d or 4w)'
+								: selectedTimePlaceholderValue
 						}
-						readOnly={!open || showLiveLogs}
-						placeholder={selectedTimePlaceholderValue}
 						value={inputValue}
-						onFocus={handleOpen}
-						onClick={handleOpen}
+						onFocus={handleFocus}
+						onClick={handleFocus}
+						onBlur={handleBlur}
 						onChange={handleInputChange}
-						onPressEnter={handleInputPressEnter}
-						onBlur={handleInputBlur}
 						data-1p-ignore
 						prefix={getInputPrefix()}
 						suffix={
@@ -588,25 +435,24 @@ function CustomTimePicker({
 										<span>{activeTimezoneOffset}</span>
 									</div>
 								)}
-
-								{open ? (
-									<ChevronUp
-										size={14}
-										className="cursor-pointer time-input-suffix-icon-badge"
-										onClick={handleClose}
-									/>
-								) : (
-									<ChevronDown
-										size={14}
-										className="cursor-pointer time-input-suffix-icon-badge"
-										onClick={handleOpen}
-									/>
-								)}
+								<ChevronDown
+									size={14}
+									className="cursor-pointer time-input-suffix-icon-badge"
+									onClick={(e): void => {
+										e.stopPropagation();
+										handleViewChange('datetime');
+									}}
+								/>
 							</div>
 						}
 					/>
 				</Popover>
 			</Tooltip>
+			{inputStatus === 'error' && inputErrorMessage && (
+				<Typography.Title level={5} className="valid-format-error">
+					{inputErrorMessage}
+				</Typography.Title>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -4,6 +4,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
+import DatePickerV2 from 'components/DatePickerV2/DatePickerV2';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -14,7 +15,7 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
-import { Clock, PenLine, TriangleAlertIcon } from 'lucide-react';
+import { Clock, PenLine } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import {
 	Dispatch,
@@ -26,23 +27,10 @@ import {
 } 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';
 
-const TO_MILLISECONDS_FACTOR = 1000_000;
-
-export type DateRange = {
-	from: Date | undefined;
-	to?: Date | undefined;
-};
-
 interface CustomTimePickerPopoverContentProps {
-	isLiveLogsEnabled: boolean;
-	minTime: number;
-	maxTime: number;
 	options: any[];
 	setIsOpen: Dispatch<SetStateAction<boolean>>;
 	customDateTimeVisible: boolean;
@@ -60,8 +48,6 @@ interface CustomTimePickerPopoverContentProps {
 	setIsOpenedFromFooter: Dispatch<SetStateAction<boolean>>;
 	onExitLiveLogs: () => void;
 	showRecentlyUsed: boolean;
-	customDateTimeInputStatus: CustomTimePickerInputStatus;
-	inputErrorDetails: TimeRangeValidationResult['errorDetails'] | null;
 }
 
 interface RecentlyUsedDateTimeRange {
@@ -72,29 +58,8 @@ interface RecentlyUsedDateTimeRange {
 	to: string;
 }
 
-const getDateRange = (
-	minTime: number,
-	maxTime: number,
-	timezone: string,
-): DateRange => {
-	const from = dayjs(minTime / TO_MILLISECONDS_FACTOR)
-		.tz(timezone)
-		.startOf('day')
-		.toDate();
-
-	const to = dayjs(maxTime / TO_MILLISECONDS_FACTOR)
-		.tz(timezone)
-		.endOf('day')
-		.toDate();
-
-	return { from, to };
-};
-
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function CustomTimePickerPopoverContent({
-	isLiveLogsEnabled,
-	minTime,
-	maxTime,
 	options,
 	setIsOpen,
 	customDateTimeVisible,
@@ -109,8 +74,6 @@ function CustomTimePickerPopoverContent({
 	setIsOpenedFromFooter,
 	onExitLiveLogs,
 	showRecentlyUsed = true,
-	customDateTimeInputStatus = CustomTimePickerInputStatus.UNSET,
-	inputErrorDetails,
 }: CustomTimePickerPopoverContentProps): JSX.Element {
 	const { pathname } = useLocation();
 
@@ -120,9 +83,6 @@ function CustomTimePickerPopoverContent({
 
 	const url = new URLSearchParams(window.location.search);
 
-	const { timezone } = useTimezone();
-	const activeTimezoneOffset = timezone.offset;
-
 	let panelTypeFromURL = url.get(QueryParams.panelTypes);
 
 	try {
@@ -134,9 +94,8 @@ function CustomTimePickerPopoverContent({
 	const isLogsListView =
 		panelTypeFromURL !== 'table' && panelTypeFromURL !== 'graph'; // we do not select list view in the url
 
-	const [dateRange, setDateRange] = useState<DateRange>(() =>
-		getDateRange(minTime, maxTime, timezone.value),
-	);
+	const { timezone } = useTimezone();
+	const activeTimezoneOffset = timezone.offset;
 
 	const [recentlyUsedTimeRanges, setRecentlyUsedTimeRanges] = useState<
 		RecentlyUsedDateTimeRange[]
@@ -218,66 +177,36 @@ function CustomTimePickerPopoverContent({
 		setIsOpen(false);
 	};
 
-	const handleSelectDateRange = (dateRange: DateRange): void => {
-		setDateRange(dateRange);
-	};
-
-	const handleCalendarRangeApply = (): void => {
-		if (dateRange) {
-			const from = dayjs(dateRange.from)
-				.tz(timezone.value)
-				.startOf('day')
-				.toDate();
-			const to = dayjs(dateRange.to).tz(timezone.value).endOf('day').toDate();
-
-			onCustomDateHandler([dayjs(from), dayjs(to)]);
-		}
-		setIsOpen(false);
-	};
-
-	const handleCalendarRangeCancel = (): void => {
-		setCustomDTPickerVisible(false);
-	};
-
 	return (
 		<>
 			<div className="date-time-popover">
-				<div className="date-time-options">
-					{isLogsExplorerPage && isLogsListView && (
-						<Button
-							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
-							type="text"
-							onClick={handleGoLive}
-						>
-							Live
-						</Button>
-					)}
-					{options.map((option) => (
-						<Button
-							type="text"
-							key={option.label + option.value}
-							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
-								e.stopPropagation();
-								e.preventDefault();
-								handleExitLiveLogs();
-								onSelectHandler(option.label, option.value);
-							}}
-							className={cx(
-								'date-time-options-btn',
-								customDateTimeVisible
-									? option.value === 'custom' && !isLiveLogsEnabled && 'active'
-									: selectedTime === option.value && !isLiveLogsEnabled && 'active',
-							)}
-						>
-							<span className="time-label">{option.label}</span>
-
-							{option.value !== 'custom' && option.value !== '1month' && (
-								<span className="time-value">{option.value}</span>
-							)}
-						</Button>
-					))}
-				</div>
-
+				{!customDateTimeVisible && (
+					<div className="date-time-options">
+						{isLogsExplorerPage && isLogsListView && (
+							<Button className="data-time-live" type="text" onClick={handleGoLive}>
+								Live
+							</Button>
+						)}
+						{options.map((option) => (
+							<Button
+								type="text"
+								key={option.label + option.value}
+								onClick={(): void => {
+									handleExitLiveLogs();
+									onSelectHandler(option.label, option.value);
+								}}
+								className={cx(
+									'date-time-options-btn',
+									customDateTimeVisible
+										? option.value === 'custom' && 'active'
+										: selectedTime === option.value && 'active',
+								)}
+							>
+								{option.label}
+							</Button>
+						))}
+					</div>
+				)}
 				<div
 					className={cx(
 						'relative-date-time',
@@ -285,38 +214,19 @@ function CustomTimePickerPopoverContent({
 					)}
 				>
 					{customDateTimeVisible ? (
-						<CalendarContainer
-							dateRange={dateRange}
-							onSelectDateRange={handleSelectDateRange}
-							onCancel={handleCalendarRangeCancel}
-							onApply={handleCalendarRangeApply}
+						<DatePickerV2
+							onSetCustomDTPickerVisible={setCustomDTPickerVisible}
+							setIsOpen={setIsOpen}
+							onCustomDateHandler={onCustomDateHandler}
 						/>
 					) : (
 						<div className="time-selector-container">
-							{customDateTimeInputStatus === CustomTimePickerInputStatus.ERROR &&
-								inputErrorDetails && (
-									<div className="input-error-message-container">
-										<div className="input-error-message-title">
-											<TriangleAlertIcon color={Color.BG_CHERRY_400} size={16} />
-											<span className="input-error-message-text">
-												{inputErrorDetails.message}
-											</span>
-										</div>
-
-										{inputErrorDetails.description && (
-											<p className="input-error-message-description">
-												{inputErrorDetails.description}
-											</p>
-										)}
-									</div>
-								)}
-
 							<div className="relative-times-container">
 								<div className="time-heading">RELATIVE TIMES</div>
 								<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
 							</div>
 
-							{showRecentlyUsed && recentlyUsedTimeRanges.length > 0 && (
+							{showRecentlyUsed && (
 								<div className="recently-used-container">
 									<div className="time-heading">RECENTLY USED</div>
 									<div className="recently-used-range">

frontend/src/components/DatePickerV2/DatePickerV2.styles.scss

@@ -0,0 +1,114 @@
+.date-picker-v2-container {
+	display: flex;
+	flex-direction: row;
+}
+
+.custom-date-time-picker-v2 {
+	padding: 12px;
+
+	.periscope-calendar {
+		border-radius: 4px;
+		border: none !important;
+		background: none !important;
+		padding: 8px 0 !important;
+	}
+
+	.periscope-calendar-day {
+		background: none !important;
+
+		&.periscope-calendar-today {
+			&.text-accent-foreground {
+				color: var(--bg-vanilla-100) !important;
+			}
+		}
+
+		button {
+			&:hover {
+				background-color: var(--bg-robin-500) !important;
+				color: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+
+	.custom-time-selector {
+		display: flex;
+		flex-direction: row;
+		gap: 16px;
+		align-items: center;
+		justify-content: space-between;
+
+		.time-input {
+			border-radius: 4px;
+			border: none !important;
+			background: none !important;
+			padding: 8px 4px !important;
+			color: var(--bg-vanilla-100) !important;
+
+			&::-webkit-calendar-picker-indicator {
+				display: none !important;
+				-webkit-appearance: none;
+				appearance: none;
+			}
+
+			&:focus {
+				border: none !important;
+				outline: none !important;
+				box-shadow: none !important;
+			}
+
+			&:focus-visible {
+				border: none !important;
+				outline: none !important;
+				box-shadow: none !important;
+			}
+		}
+	}
+
+	.custom-date-time-picker-footer {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+		align-items: center;
+		justify-content: flex-end;
+		margin-top: 16px;
+
+		.next-btn {
+			width: 80px;
+		}
+
+		.clear-btn {
+			width: 80px;
+		}
+	}
+}
+
+.invalid-date-range-tooltip {
+	.ant-tooltip-inner {
+		color: var(--bg-sakura-500) !important;
+	}
+}
+
+.lightMode {
+	.custom-date-time-picker-v2 {
+		.periscope-calendar-day {
+			&.periscope-calendar-today {
+				&.text-accent-foreground {
+					color: var(--bg-ink-500) !important;
+				}
+			}
+
+			button {
+				&:hover {
+					background-color: var(--bg-robin-500) !important;
+					color: var(--bg-ink-500) !important;
+				}
+			}
+		}
+
+		.custom-time-selector {
+			.time-input {
+				color: var(--bg-ink-500) !important;
+			}
+		}
+	}
+}

frontend/src/components/DatePickerV2/DatePickerV2.tsx

@@ -0,0 +1,311 @@
+import './DatePickerV2.styles.scss';
+
+import { Calendar } from '@signozhq/calendar';
+import { Input } from '@signozhq/input';
+import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs, { Dayjs } from 'dayjs';
+import { CornerUpLeft, MoveRight } from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
+import { useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+
+function DatePickerV2({
+	onSetCustomDTPickerVisible,
+	setIsOpen,
+	onCustomDateHandler,
+}: {
+	onSetCustomDTPickerVisible: (visible: boolean) => void;
+	setIsOpen: (isOpen: boolean) => void;
+	onCustomDateHandler: (
+		dateTimeRange: DateTimeRangeType,
+		lexicalContext?: LexicalContext,
+	) => void;
+}): JSX.Element {
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const timeInputRef = useRef<HTMLInputElement>(null);
+
+	const { timezone } = useTimezone();
+
+	const [selectedDateTimeFor, setSelectedDateTimeFor] = useState<'to' | 'from'>(
+		'from',
+	);
+
+	const [selectedFromDateTime, setSelectedFromDateTime] = useState<Dayjs | null>(
+		dayjs(minTime / 1000_000).tz(timezone.value),
+	);
+
+	const [selectedToDateTime, setSelectedToDateTime] = useState<Dayjs | null>(
+		dayjs(maxTime / 1000_000).tz(timezone.value),
+	);
+
+	const handleNext = (): void => {
+		if (selectedDateTimeFor === 'to') {
+			onCustomDateHandler([selectedFromDateTime, selectedToDateTime]);
+
+			addCustomTimeRange([selectedFromDateTime, selectedToDateTime]);
+
+			setIsOpen(false);
+			onSetCustomDTPickerVisible(false);
+			setSelectedDateTimeFor('from');
+		} else {
+			setSelectedDateTimeFor('to');
+		}
+	};
+
+	const handleDateChange = (date: Date | undefined): void => {
+		if (!date) {
+			return;
+		}
+
+		if (selectedDateTimeFor === 'from') {
+			const prevFromDateTime = selectedFromDateTime;
+
+			const newDate = dayjs(date);
+
+			const updatedFromDateTime = prevFromDateTime
+				? prevFromDateTime
+						.year(newDate.year())
+						.month(newDate.month())
+						.date(newDate.date())
+				: dayjs(date).tz(timezone.value);
+
+			setSelectedFromDateTime(updatedFromDateTime);
+		} else {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSelectedToDateTime((prev) => {
+				const newDate = dayjs(date);
+
+				// Update only the date part, keeping time from existing state
+				return prev
+					? prev.year(newDate.year()).month(newDate.month()).date(newDate.date())
+					: dayjs(date).tz(timezone.value);
+			});
+		}
+
+		// focus the time input
+		timeInputRef?.current?.focus();
+	};
+
+	const handleTimeChange = (time: string): void => {
+		// time should have format HH:mm:ss
+		if (!/^\d{2}:\d{2}:\d{2}$/.test(time)) {
+			return;
+		}
+
+		if (selectedDateTimeFor === 'from') {
+			setSelectedFromDateTime((prev) => {
+				if (prev) {
+					return prev
+						.set('hour', parseInt(time.split(':')[0], 10))
+						.set('minute', parseInt(time.split(':')[1], 10))
+						.set('second', parseInt(time.split(':')[2], 10));
+				}
+
+				return prev;
+			});
+		}
+		if (selectedDateTimeFor === 'to') {
+			// eslint-disable-next-line sonarjs/no-identical-functions
+			setSelectedToDateTime((prev) => {
+				if (prev) {
+					return prev
+						.set('hour', parseInt(time.split(':')[0], 10))
+						.set('minute', parseInt(time.split(':')[1], 10))
+						.set('second', parseInt(time.split(':')[2], 10));
+				}
+
+				return prev;
+			});
+		}
+	};
+
+	const getDefaultMonth = (): Date => {
+		let defaultDate = null;
+
+		if (selectedDateTimeFor === 'from') {
+			defaultDate = selectedFromDateTime?.toDate();
+		} else if (selectedDateTimeFor === 'to') {
+			defaultDate = selectedToDateTime?.toDate();
+		}
+
+		return defaultDate ?? new Date();
+	};
+
+	const isValidRange = (): boolean => {
+		if (selectedDateTimeFor === 'to') {
+			return selectedToDateTime?.isAfter(selectedFromDateTime) ?? false;
+		}
+
+		return true;
+	};
+
+	const handleBack = (): void => {
+		setSelectedDateTimeFor('from');
+	};
+
+	const handleHideCustomDTPicker = (): void => {
+		onSetCustomDTPickerVisible(false);
+	};
+
+	const handleSelectDateTimeFor = (selectedDateTimeFor: 'to' | 'from'): void => {
+		setSelectedDateTimeFor(selectedDateTimeFor);
+	};
+
+	return (
+		<div className="date-picker-v2-container">
+			<div className="date-time-custom-options-container">
+				<div
+					className="back-btn"
+					onClick={handleHideCustomDTPicker}
+					role="button"
+					tabIndex={0}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter') {
+							handleHideCustomDTPicker();
+						}
+					}}
+				>
+					<CornerUpLeft size={16} />
+					<span>Back</span>
+				</div>
+
+				<div className="date-time-custom-options">
+					<div
+						role="button"
+						tabIndex={0}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								handleSelectDateTimeFor('from');
+							}
+						}}
+						className={cx(
+							'date-time-custom-option-from',
+							selectedDateTimeFor === 'from' && 'active',
+						)}
+						onClick={(): void => {
+							handleSelectDateTimeFor('from');
+						}}
+					>
+						<div className="date-time-custom-option-from-title">FROM</div>
+						<div className="date-time-custom-option-from-value">
+							{selectedFromDateTime?.format('YYYY-MM-DD HH:mm:ss')}
+						</div>
+					</div>
+					<div
+						role="button"
+						tabIndex={0}
+						onKeyDown={(e): void => {
+							if (e.key === 'Enter') {
+								handleSelectDateTimeFor('to');
+							}
+						}}
+						className={cx(
+							'date-time-custom-option-to',
+							selectedDateTimeFor === 'to' && 'active',
+						)}
+						onClick={(): void => {
+							handleSelectDateTimeFor('to');
+						}}
+					>
+						<div className="date-time-custom-option-to-title">TO</div>
+						<div className="date-time-custom-option-to-value">
+							{selectedToDateTime?.format('YYYY-MM-DD HH:mm:ss')}
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="custom-date-time-picker-v2">
+				<Calendar
+					mode="single"
+					required
+					selected={
+						selectedDateTimeFor === 'from'
+							? selectedFromDateTime?.toDate()
+							: selectedToDateTime?.toDate()
+					}
+					key={selectedDateTimeFor + selectedDateTimeFor}
+					onSelect={handleDateChange}
+					defaultMonth={getDefaultMonth()}
+					disabled={(current): boolean => {
+						if (selectedDateTimeFor === 'to') {
+							// disable dates after today and before selectedFromDateTime
+							const currentDay = dayjs(current);
+							return currentDay.isAfter(dayjs()) || false;
+						}
+
+						if (selectedDateTimeFor === 'from') {
+							// disable dates after selectedToDateTime
+
+							return dayjs(current).isAfter(dayjs()) || false;
+						}
+
+						return false;
+					}}
+					className="rounded-md border"
+					navLayout="after"
+				/>
+
+				<div className="custom-time-selector">
+					<label className="text-xs font-normal block" htmlFor="time-picker">
+						Timestamp
+					</label>
+
+					<MoveRight size={16} />
+
+					<div className="time-input-container">
+						<Input
+							type="time"
+							ref={timeInputRef}
+							className="time-input"
+							value={
+								selectedDateTimeFor === 'from'
+									? selectedFromDateTime?.format('HH:mm:ss')
+									: selectedToDateTime?.format('HH:mm:ss')
+							}
+							onChange={(e): void => handleTimeChange(e.target.value)}
+							step="1"
+						/>
+					</div>
+				</div>
+
+				<div className="custom-date-time-picker-footer">
+					{selectedDateTimeFor === 'to' && (
+						<Button
+							className="periscope-btn secondary clear-btn"
+							type="default"
+							onClick={handleBack}
+						>
+							Back
+						</Button>
+					)}
+					<Tooltip
+						title={
+							!isValidRange() ? 'Invalid range: TO date should be after FROM date' : ''
+						}
+						overlayClassName="invalid-date-range-tooltip"
+					>
+						<Button
+							className="periscope-btn primary next-btn"
+							type="primary"
+							onClick={handleNext}
+							disabled={!isValidRange()}
+						>
+							{selectedDateTimeFor === 'from' ? 'Next' : 'Apply'}
+						</Button>
+					</Tooltip>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default DatePickerV2;

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

@@ -6,15 +6,13 @@ 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';
 
 interface ErrorContentProps {
 	error: APIError;
-	icon?: ReactNode;
 }
 
-function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
+function ErrorContent({ error }: ErrorContentProps): JSX.Element {
 	const {
 		url: errorUrl,
 		errors: errorMessages,
@@ -27,7 +25,9 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 			<section className="error-content__summary-section">
 				<header className="error-content__summary">
 					<div className="error-content__summary-left">
-						<div className="error-content__icon-wrapper">{icon || <ErrorIcon />}</div>
+						<div className="error-content__icon-wrapper">
+							<ErrorIcon />
+						</div>
 
 						<div className="error-content__summary-text">
 							<h2 className="error-content__error-code">{errorCode}</h2>
@@ -95,8 +95,4 @@ function ErrorContent({ error, icon }: ErrorContentProps): JSX.Element {
 	);
 }
 
-ErrorContent.defaultProps = {
-	icon: undefined,
-};
-
 export default ErrorContent;

frontend/src/components/Graph/utils.ts

@@ -1,5 +1,4 @@
 import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
-// eslint-disable-next-line import/namespace -- side-effect import that registers Chart.js date adapter
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -176,8 +176,6 @@ function HostMetricTraces({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx

@@ -87,8 +87,6 @@ function HostMetricLogsDetailedView({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -211,8 +211,6 @@ function Metrics({
 						defaultRelativeTime="5m"
 						isModalTimeSelection={isModalTimeSelection}
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -1,16 +1,16 @@
 import { DrawerProps } from 'antd';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { VIEWS } from './constants';
 
 export type LogDetailProps = {
 	log: ILog | null;
 	selectedTab: VIEWS;
-	handleChangeSelectedView?: ChangeViewFunctionType;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &

frontend/src/components/LogDetail/index.tsx

@@ -55,11 +55,11 @@ function LogDetailInner({
 	log,
 	onClose,
 	onAddToQuery,
+	onGroupByAttribute,
 	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
-	handleChangeSelectedView,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -365,10 +365,10 @@ function LogDetailInner({
 					logData={log}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onClickActionItem}
+					onGroupByAttribute={onGroupByAttribute}
 					isListViewPanel={isListViewPanel}
 					selectedOptions={options}
 					listViewPanelSelectedFields={listViewPanelSelectedFields}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			)}
 			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}

frontend/src/components/Logs/ListLogView/index.tsx

@@ -6,7 +6,6 @@ import cx from 'classnames';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
@@ -109,7 +108,6 @@ type ListLogViewProps = {
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };
 
 function ListLogView({
@@ -120,7 +118,6 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	handleChangeSelectedView,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -134,6 +131,7 @@ function ListLogView({
 		onAddToQuery: handleAddToQuery,
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
+		onGroupByAttribute,
 	} = useActiveLog();
 
 	const isDarkMode = useIsDarkMode();
@@ -257,7 +255,7 @@ function ListLogView({
 					onAddToQuery={handleAddToQuery}
 					selectedTab={VIEW_TYPES.CONTEXT}
 					onClose={handlerClearActiveContextLog}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</>
@@ -266,7 +264,6 @@ function ListLogView({
 
 ListLogView.defaultProps = {
 	activeLog: null,
-	handleChangeSelectedView: undefined,
 };
 
 LogGeneralField.defaultProps = {

frontend/src/components/Logs/RawLogView/index.tsx

@@ -39,7 +39,6 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	handleChangeSelectedView,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -53,6 +52,7 @@ function RawLogView({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 	} = useActiveLog();
 
 	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
@@ -224,12 +224,13 @@ function RawLogView({
 					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</RawLogViewContainer>
 	);
 }
+
 RawLogView.defaultProps = {
 	isActiveLog: false,
 	isReadOnly: false,

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,4 +1,3 @@
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { MouseEvent } from 'react';
 import { IField } from 'types/api/logs/fields';
@@ -15,7 +14,6 @@ export interface RawLogViewProps {
 	fontSize: FontSize;
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 }
 
 export interface RawLogContentProps {

frontend/src/components/NewSelect/__test__/VariableItem.integration.test.tsx

@@ -7,7 +7,7 @@ import { VirtuosoMockContext } from 'react-virtuoso';
 import configureStore from 'redux-mock-store';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
-import VariableItem from '../../../container/DashboardContainer/DashboardVariablesSelection/VariableItem';
+import VariableItem from '../../../container/NewDashboard/DashboardVariablesSelection/VariableItem';
 
 // Mock the dashboard variables query
 jest.mock('api/dashboard/variables/dashboardVariablesQuery', () => ({
@@ -211,10 +211,7 @@ describe('VariableItem Integration Tests', () => {
 			await user.clear(textInput);
 			await user.type(textInput, 'new-text-value');
 
-			// Blur the input to trigger the value update
-			await user.tab();
-
-			// Should call onValueUpdate after blur
+			// Should call onValueUpdate after debounce
 			await waitFor(
 				() => {
 					expect(mockOnValueUpdate).toHaveBeenCalledWith(

frontend/src/components/NewSelect/utils.ts

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { uniqueOptions } from 'container/DashboardContainer/DashboardVariablesSelection/util';
+import { uniqueOptions } from 'container/NewDashboard/DashboardVariablesSelection/util';
 
 import { OptionData } from './types';
 

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -4,7 +4,7 @@ import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
 import { Formula } from 'container/QueryBuilder/components/Formula';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -33,7 +33,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		addTraceOperator,
 		panelType,
 		initialDataSource,
-		handleRunQuery,
 	} = useQueryBuilder();
 
 	const containerRef = useRef(null);
@@ -158,29 +157,10 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 		[showTraceOperator, traceOperator, hasAtLeastOneTraceQuery],
 	);
 
-	const handleKeyDown = useCallback(
-		(e: React.KeyboardEvent<HTMLDivElement>): void => {
-			const target = e.target as HTMLElement | null;
-			const tagName = target?.tagName || '';
-
-			const isInputElement =
-				['INPUT', 'TEXTAREA', 'SELECT'].includes(tagName) ||
-				(target?.getAttribute('contenteditable') || '').toLowerCase() === 'true';
-
-			// Allow input elements in qb to run the query when Cmd/Ctrl + Enter is pressed
-			if (isInputElement && (e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-				e.preventDefault();
-				e.stopPropagation();
-				handleRunQuery();
-			}
-		},
-		[handleRunQuery],
-	);
-
 	return (
 		<QueryBuilderV2Provider>
 			<div className="query-builder-v2">
-				<div className="qb-content-container" onKeyDownCapture={handleKeyDown}>
+				<div className="qb-content-container">
 					{!isMultiQueryAllowed ? (
 						<QueryV2
 							ref={containerRef}

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -11,7 +11,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
 import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -171,9 +171,6 @@ function QueryAddOns({
 
 	const [selectedViews, setSelectedViews] = useState<AddOn[]>([]);
 
-	const initializedRef = useRef(false);
-	const prevAvailableKeysRef = useRef<Set<string> | null>(null);
-
 	const { handleChangeQueryData } = useQueryOperations({
 		index,
 		query,
@@ -216,41 +213,23 @@ function QueryAddOns({
 		}
 		setAddOns(filteredAddOns);
 
-		const availableAddOnKeys = new Set(filteredAddOns.map((a) => a.key));
-		const previousKeys = prevAvailableKeysRef.current;
-		const hasAvailabilityItemsChanged =
-			previousKeys !== null &&
-			(previousKeys.size !== availableAddOnKeys.size ||
-				[...availableAddOnKeys].some((key) => !previousKeys.has(key)));
-		prevAvailableKeysRef.current = availableAddOnKeys;
+		const activeAddOnKeys = new Set(
+			Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
+				.filter(([, path]) => hasValue(get(query, path)))
+				.map(([key]) => key),
+		);
 
-		if (!initializedRef.current || hasAvailabilityItemsChanged) {
-			initializedRef.current = true;
-
-			const activeAddOnKeys = new Set(
-				Object.entries(ADD_ONS_KEYS_TO_QUERY_PATH)
-					.filter(([, path]) => hasValue(get(query, path)))
-					.map(([key]) => key),
-			);
-
-			// Initial seeding from query values on mount
-			setSelectedViews(
-				filteredAddOns.filter(
-					(addOn) =>
-						activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
-				),
-			);
-			return;
-		}
-
-		setSelectedViews((prev) =>
-			prev.filter((view) =>
-				filteredAddOns.some((addOn) => addOn.key === view.key),
+		const availableAddOnKeys = new Set(filteredAddOns.map((addOn) => addOn.key));
+		// Filter and set selected views: add-ons that are both active and available
+		setSelectedViews(
+			filteredAddOns.filter(
+				(addOn) =>
+					activeAddOnKeys.has(addOn.key) && availableAddOnKeys.has(addOn.key),
 			),
 		);
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [panelType, isListViewPanel, query, showReduceTo]);
+	}, [panelType, isListViewPanel, query]);
 
 	const handleOptionClick = (e: RadioChangeEvent): void => {
 		if (selectedViews.find((view) => view.key === e.target.value.key)) {

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1379,6 +1379,8 @@ function QuerySearch({
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
 											onRun(getCurrentExpression());
+										} else {
+											handleRunQuery();
 										}
 										return true;
 									},

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -410,6 +410,8 @@ function TraceOperatorEditor({
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
 											onRun(value);
+										} else {
+											handleRunQuery();
 										}
 										return true;
 									},

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QuerySearch.test.tsx

@@ -270,6 +270,44 @@ describe('QuerySearch (Integration with Real CodeMirror)', () => {
 		await waitFor(() => expect(onRun).toHaveBeenCalled(), { timeout: 2000 });
 	});
 
+	it('calls handleRunQuery when Mod-Enter without onRun', async () => {
+		const mockedHandleRunQuery = handleRunQueryMock as jest.MockedFunction<
+			() => void
+		>;
+		mockedHandleRunQuery.mockClear();
+
+		render(
+			<QuerySearch
+				onChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				queryData={initialQueriesMap.logs.builder.queryData[0]}
+				dataSource={DataSource.LOGS}
+			/>,
+		);
+
+		// Wait for CodeMirror to initialize
+		await waitFor(() => {
+			const editor = document.querySelector(CM_EDITOR_SELECTOR);
+			expect(editor).toBeInTheDocument();
+		});
+
+		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
+		await userEvent.click(editor);
+		await userEvent.type(editor, SAMPLE_VALUE_TYPING_COMPLETE);
+
+		// Use fireEvent for keyboard shortcuts as userEvent might not work well with CodeMirror
+		const modKey = navigator.platform.includes('Mac') ? 'metaKey' : 'ctrlKey';
+		fireEvent.keyDown(editor, {
+			key: 'Enter',
+			code: 'Enter',
+			[modKey]: true,
+			keyCode: 13,
+		});
+
+		await waitFor(() => expect(mockedHandleRunQuery).toHaveBeenCalled(), {
+			timeout: 2000,
+		});
+	});
+
 	it('initializes CodeMirror with expression from queryData.filter.expression on mount', async () => {
 		const testExpression =
 			"http.status_code >= 500 AND service.name = 'frontend'";

frontend/src/components/QueryBuilderV2/QueryV2/__tests__/QueryV2.test.tsx

@@ -3,21 +3,14 @@
 import '@testing-library/jest-dom';
 
 import { jest } from '@jest/globals';
-import { fireEvent, waitFor } from '@testing-library/react';
-import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { render, screen, userEvent } from 'tests/test-utils';
-import {
-	Having,
-	IBuilderQuery,
-	Query,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { EQueryType } from 'types/common/dashboard';
+import { render, screen } from 'tests/test-utils';
+import { Having, IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { UseQueryOperations } from 'types/common/operations.types';
 import { DataSource, QueryBuilderContextType } from 'types/common/queryBuilder';
 
-import { QueryBuilderV2 } from '../../QueryBuilderV2';
+import { QueryV2 } from '../QueryV2';
 
 // Local mocks for domain-specific heavy child components
 jest.mock(
@@ -43,87 +36,16 @@ const mockedUseQueryOperations = jest.mocked(
 	useQueryOperations,
 ) as jest.MockedFunction<UseQueryOperations>;
 
-describe('QueryBuilderV2 + QueryV2 - base render', () => {
-	let handleRunQueryMock: jest.MockedFunction<() => void>;
-
+describe('QueryV2 - base render', () => {
 	beforeEach(() => {
 		const mockCloneQuery = jest.fn() as jest.MockedFunction<
 			(type: string, q: IBuilderQuery) => void
 		>;
-		handleRunQueryMock = jest.fn() as jest.MockedFunction<() => void>;
-		const baseQuery: IBuilderQuery = {
-			queryName: 'A',
-			dataSource: DataSource.LOGS,
-			aggregateOperator: '',
-			aggregations: [],
-			timeAggregation: '',
-			spaceAggregation: '',
-			temporality: '',
-			functions: [],
-			filter: undefined,
-			filters: { items: [], op: 'AND' },
-			groupBy: [],
-			expression: '',
-			disabled: false,
-			having: [] as Having[],
-			limit: 10,
-			stepInterval: null,
-			orderBy: [],
-			legend: 'A',
-		};
-
-		const currentQueryObj: Query = {
-			id: 'test',
-			unit: undefined,
-			queryType: EQueryType.CLICKHOUSE,
-			promql: [],
-			clickhouse_sql: [],
-			builder: {
-				queryData: [baseQuery],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-		};
-
-		const updateAllQueriesOperators: QueryBuilderContextType['updateAllQueriesOperators'] = (
-			q,
-		) => q;
-		const updateQueriesData: QueryBuilderContextType['updateQueriesData'] = (q) =>
-			q;
 
 		mockedUseQueryBuilder.mockReturnValue(({
-			currentQuery: currentQueryObj,
-			stagedQuery: null,
-			lastUsedQuery: null,
-			setLastUsedQuery: jest.fn(),
-			supersetQuery: currentQueryObj,
-			setSupersetQuery: jest.fn(),
-			initialDataSource: null,
-			panelType: PANEL_TYPES.TABLE,
-			isEnabledQuery: true,
-			handleSetQueryData: jest.fn(),
-			handleSetTraceOperatorData: jest.fn(),
-			handleSetFormulaData: jest.fn(),
-			handleSetQueryItemData: jest.fn(),
-			handleSetConfig: jest.fn(),
-			removeQueryBuilderEntityByIndex: jest.fn(),
-			removeAllQueryBuilderEntities: jest.fn(),
-			removeQueryTypeItemByIndex: jest.fn(),
-			addNewBuilderQuery: jest.fn(),
-			addNewFormula: jest.fn(),
-			removeTraceOperator: jest.fn(),
-			addTraceOperator: jest.fn(),
+			// Only fields used by QueryV2
 			cloneQuery: mockCloneQuery,
-			addNewQueryItem: jest.fn(),
-			redirectWithQueryBuilderData: jest.fn(),
-			handleRunQuery: handleRunQueryMock,
-			resetQuery: jest.fn(),
-			handleOnUnitsChange: jest.fn(),
-			updateAllQueriesOperators,
-			updateQueriesData,
-			initQueryBuilderData: jest.fn(),
-			isStagedQueryUpdated: jest.fn(() => false),
-			isDefaultQuery: jest.fn(() => false),
+			panelType: null,
 		} as unknown) as QueryBuilderContextType);
 
 		mockedUseQueryOperations.mockReturnValue({
@@ -149,7 +71,40 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 	});
 
 	it('renders limit input when dataSource is logs', () => {
-		render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
+		const baseQuery: IBuilderQuery = {
+			queryName: 'A',
+			dataSource: DataSource.LOGS,
+			aggregateOperator: '',
+			aggregations: [],
+			timeAggregation: '',
+			spaceAggregation: '',
+			temporality: '',
+			functions: [],
+			filter: undefined,
+			filters: { items: [], op: 'AND' },
+			groupBy: [],
+			expression: '',
+			disabled: false,
+			having: [] as Having[],
+			limit: 10,
+			stepInterval: null,
+			orderBy: [],
+			legend: 'A',
+		};
+
+		render(
+			<QueryV2
+				index={0}
+				isAvailableToDisable
+				query={baseQuery}
+				version="v4"
+				onSignalSourceChange={jest.fn() as jest.MockedFunction<(v: string) => void>}
+				signalSourceChangeEnabled={false}
+				queriesCount={1}
+				showTraceOperator={false}
+				hasTraceOperator={false}
+			/>,
+		);
 
 		// Ensure the Limit add-on input is present and is of type number
 		const limitInput = screen.getByPlaceholderText(
@@ -160,43 +115,4 @@ describe('QueryBuilderV2 + QueryV2 - base render', () => {
 		expect(limitInput).toHaveAttribute('name', 'limit');
 		expect(limitInput).toHaveAttribute('data-testid', 'input-Limit');
 	});
-
-	it('Cmd+Enter on an input triggers handleRunQuery via container handler', async () => {
-		render(<QueryBuilderV2 panelType={PANEL_TYPES.TABLE} version="v4" />);
-
-		const limitInput = screen.getByPlaceholderText('Enter limit');
-		fireEvent.keyDown(limitInput, {
-			key: 'Enter',
-			code: 'Enter',
-			metaKey: true,
-		});
-
-		expect(handleRunQueryMock).toHaveBeenCalled();
-
-		const legendInput = screen.getByPlaceholderText('Write legend format');
-		fireEvent.keyDown(legendInput, {
-			key: 'Enter',
-			code: 'Enter',
-			metaKey: true,
-		});
-
-		expect(handleRunQueryMock).toHaveBeenCalled();
-
-		const CM_EDITOR_SELECTOR = '.cm-editor .cm-content';
-		// Wait for CodeMirror to initialize
-		await waitFor(() => {
-			const editor = document.querySelector(CM_EDITOR_SELECTOR);
-			expect(editor).toBeInTheDocument();
-		});
-
-		const editor = document.querySelector(CM_EDITOR_SELECTOR) as HTMLElement;
-		await userEvent.click(editor);
-		fireEvent.keyDown(editor, {
-			key: 'Enter',
-			code: 'Enter',
-			metaKey: true,
-		});
-
-		expect(handleRunQueryMock).toHaveBeenCalled();
-	});
 });

frontend/src/constants/query.ts

@@ -53,5 +53,4 @@ export enum QueryParams {
 	variables = 'variables',
 	version = 'version',
 	showNewCreateAlertsPage = 'showNewCreateAlertsPage',
-	source = 'source',
 }

frontend/src/constants/queryBuilder.ts

@@ -301,7 +301,6 @@ export const initialQueryState: QueryState = {
 	builder: initialQueryBuilderData,
 	clickhouse_sql: [initialClickHouseData],
 	promql: [initialQueryPromQLData],
-	unit: '',
 };
 
 const initialQueryWithType: Query = {

frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/SettingsDrawer.styles.scss

@@ -1,67 +0,0 @@
-.settings-container-root {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--bg-slate-500);
-		background: var(--bg-ink-400);
-		box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-
-		.ant-drawer-header {
-			height: 48px;
-			border-bottom: 1px solid var(--bg-slate-500);
-			padding: 14px 14px 14px 11px;
-
-			.ant-drawer-header-title {
-				gap: 16px;
-
-				.ant-drawer-title {
-					color: var(--bg-vanilla-400);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-					padding-left: 16px;
-					border-left: 1px solid var(--bg-slate-500);
-				}
-
-				.ant-drawer-close {
-					height: 16px;
-					width: 16px;
-					margin-inline-end: 0px !important;
-				}
-			}
-		}
-
-		.ant-drawer-body {
-			padding: 16px;
-
-			&::-webkit-scrollbar {
-				width: 0.1rem;
-			}
-		}
-	}
-}
-
-.lightMode {
-	.settings-container-root {
-		.ant-drawer-wrapper-body {
-			border-left: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-100);
-
-			.ant-drawer-header {
-				border-bottom: 1px solid var(--bg-vanilla-300);
-
-				.ant-drawer-header-title {
-					.ant-drawer-title {
-						color: var(--bg-ink-400);
-						border-left: 1px solid var(--bg-vanilla-300);
-					}
-
-					.ant-drawer-close {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/DashboardContainer/DashboardDescription/SettingsDrawer/index.tsx

@@ -1,34 +0,0 @@
-import './SettingsDrawer.styles.scss';
-
-import { Drawer } from 'antd';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { memo, PropsWithChildren, ReactElement } from 'react';
-
-type SettingsDrawerProps = PropsWithChildren<{
-	drawerTitle: string;
-	isOpen: boolean;
-	onClose: () => void;
-}>;
-
-function SettingsDrawer({
-	children,
-	drawerTitle,
-	isOpen,
-	onClose,
-}: SettingsDrawerProps): JSX.Element {
-	return (
-		<Drawer
-			title={drawerTitle}
-			placement="right"
-			width="50%"
-			onClose={onClose}
-			open={isOpen}
-			rootClassName="settings-container-root"
-		>
-			{/* Need to type cast because of OverlayScrollbar type definition. We should be good once we remove it. */}
-			<OverlayScrollbar>{children as ReactElement}</OverlayScrollbar>
-		</Drawer>
-	);
-}
-
-export default memo(SettingsDrawer);

frontend/src/container/DashboardContainer/DashboardDescription/types.ts

@@ -1,7 +0,0 @@
-import { MutableRefObject } from 'react';
-
-export interface VariablesSettingsTab {
-	resetState: () => void;
-}
-
-export type VariablesSettingsTabHandle = MutableRefObject<VariablesSettingsTab | null>;

frontend/src/container/DashboardContainer/DashboardVariablesSelection/utils.test.ts

@@ -1,151 +0,0 @@
-import { areArraysEqual, onUpdateVariableNode, VariableGraph } from './util';
-
-describe('areArraysEqual', () => {
-	it('should return true for equal arrays with same order', () => {
-		const array1 = [1, 'a', true, 5, 'hello'];
-		const array2 = [1, 'a', true, 5, 'hello'];
-		expect(areArraysEqual(array1, array2)).toBe(true);
-	});
-
-	it('should return false for equal arrays with different order', () => {
-		const array1 = [1, 'a', true, 5, 'hello'];
-		const array2 = ['hello', 1, true, 'a', 5];
-		expect(areArraysEqual(array1, array2)).toBe(false);
-	});
-
-	it('should return false for arrays with different lengths', () => {
-		const array1 = [1, 'a', true, 5, 'hello'];
-		const array2 = [1, 'a', true, 5];
-		expect(areArraysEqual(array1, array2)).toBe(false);
-	});
-
-	it('should return false for arrays with different elements', () => {
-		const array1 = [1, 'a', true, 5, 'hello'];
-		const array2 = [1, 'a', true, 5, 'world'];
-		expect(areArraysEqual(array1, array2)).toBe(false);
-	});
-
-	it('should return true for empty arrays', () => {
-		const array1: string[] = [];
-		const array2: string[] = [];
-		expect(areArraysEqual(array1, array2)).toBe(true);
-	});
-});
-
-describe('onUpdateVariableNode', () => {
-	// Graph structure:
-	// deployment -> namespace -> service -> pod
-	// deployment has no parents, namespace depends on deployment, etc.
-	const graph: VariableGraph = {
-		deployment: ['namespace'],
-		namespace: ['service'],
-		service: ['pod'],
-		pod: [],
-		customVar: ['namespace'], // CUSTOM variable that affects namespace
-	};
-
-	const topologicalOrder = ['deployment', 'namespace', 'service', 'pod'];
-
-	it('should call callback for the node and all its descendants', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode('deployment', graph, topologicalOrder, callback);
-
-		expect(visited).toEqual(['deployment', 'namespace', 'service', 'pod']);
-	});
-
-	it('should call callback starting from a middle node', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode('namespace', graph, topologicalOrder, callback);
-
-		expect(visited).toEqual(['namespace', 'service', 'pod']);
-	});
-
-	it('should only call callback for the leaf node when updating leaf', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode('pod', graph, topologicalOrder, callback);
-
-		expect(visited).toEqual(['pod']);
-	});
-
-	it('should handle CUSTOM variable not in topologicalOrder by updating its children', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		// customVar is not in topologicalOrder but has namespace as a child
-		onUpdateVariableNode('customVar', graph, topologicalOrder, callback);
-
-		// Should process namespace and its descendants (service, pod)
-		expect(visited).toEqual(['namespace', 'service', 'pod']);
-	});
-
-	it('should handle node not in graph gracefully', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode('unknownNode', graph, topologicalOrder, callback);
-
-		// Should not call callback for any node since unknownNode has no children
-		expect(visited).toEqual([]);
-	});
-
-	it('should handle empty graph', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode('deployment', {}, topologicalOrder, callback);
-
-		// deployment is in topologicalOrder, so callback is called for it
-		expect(visited).toEqual(['deployment']);
-	});
-
-	it('should handle empty topologicalOrder', () => {
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode('deployment', graph, [], callback);
-
-		expect(visited).toEqual([]);
-	});
-
-	it('should handle CUSTOM variable with multiple children', () => {
-		const graphWithMultipleChildren: VariableGraph = {
-			...graph,
-			customMulti: ['namespace', 'service'], // CUSTOM variable affecting multiple nodes
-		};
-
-		const visited: string[] = [];
-		const callback = (node: string): void => {
-			visited.push(node);
-		};
-
-		onUpdateVariableNode(
-			'customMulti',
-			graphWithMultipleChildren,
-			topologicalOrder,
-			callback,
-		);
-
-		// Should process namespace, service, and pod (descendants)
-		expect(visited).toEqual(['namespace', 'service', 'pod']);
-	});
-});

frontend/src/container/FormAlertRules/index.tsx

@@ -788,18 +788,11 @@ function FormAlertRules({
 		featureFlags?.find((flag) => flag.name === FeatureKeys.ANOMALY_DETECTION)
 			?.active || false;
 
-	const source = useMemo(() => urlQuery.get(QueryParams.source) as YAxisSource, [
-		urlQuery,
-	]);
-
 	// Only update automatically when creating a new metrics-based alert rule
-	const shouldUpdateYAxisUnit = useMemo(() => {
-		// Do not update if we are coming to the page from dashboards (we still show warning)
-		if (source === YAxisSource.DASHBOARDS) {
-			return false;
-		}
-		return isNewRule && alertType === AlertTypes.METRICS_BASED_ALERT;
-	}, [isNewRule, alertType, source]);
+	const shouldUpdateYAxisUnit = useMemo(
+		() => isNewRule && alertType === AlertTypes.METRICS_BASED_ALERT,
+		[isNewRule, alertType],
+	);
 
 	const { yAxisUnit: initialYAxisUnit, isLoading } = useGetYAxisUnit(
 		alertDef.condition.selectedQueryName,

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -4,14 +4,11 @@ import './DashboardEmptyState.styles.scss';
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import SettingsDrawer from 'container/DashboardContainer/DashboardDescription/SettingsDrawer';
-import { VariablesSettingsTab } from 'container/DashboardContainer/DashboardDescription/types';
-import DashboardSettings from 'container/DashboardContainer/DashboardSettings';
+import SettingsDrawer from 'container/NewDashboard/DashboardDescription/SettingsDrawer';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useAppContext } from 'providers/App/App';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback } from 'react';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 
@@ -23,11 +20,6 @@ export default function DashboardEmptyState(): JSX.Element {
 		setSelectedRowWidgetId,
 	} = useDashboard();
 
-	const variablesSettingsTabHandle = useRef<VariablesSettingsTab>(null);
-	const [isSettingsDrawerOpen, setIsSettingsDrawerOpen] = useState<boolean>(
-		false,
-	);
-
 	const { user } = useAppContext();
 	let permissions: ComponentTypes[] = ['add_panel'];
 
@@ -52,19 +44,6 @@ export default function DashboardEmptyState(): JSX.Element {
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [handleToggleDashboardSlider]);
-
-	const onConfigureClick = useCallback((): void => {
-		setIsSettingsDrawerOpen(true);
-	}, []);
-
-	const onSettingsDrawerClose = useCallback((): void => {
-		setIsSettingsDrawerOpen(false);
-
-		if (variablesSettingsTabHandle.current) {
-			variablesSettingsTabHandle.current.resetState();
-		}
-	}, []);
-
 	return (
 		<section className="dashboard-empty-state">
 			<div className="dashboard-content">
@@ -98,26 +77,7 @@ export default function DashboardEmptyState(): JSX.Element {
 								Give it a name, add description, tags and variables
 							</Typography.Text>
 						</div>
-						{/* This Empty State needs to be consolidated. The SettingsDrawer should be global to the 
-						whole dashboard page instead of confined to this Empty State */}
-						<Button
-							type="text"
-							className="configure-button"
-							icon={<ConfigureIcon />}
-							data-testid="show-drawer"
-							onClick={onConfigureClick}
-						>
-							Configure
-						</Button>
-						<SettingsDrawer
-							drawerTitle="Dashboard Configuration"
-							isOpen={isSettingsDrawerOpen}
-							onClose={onSettingsDrawerClose}
-						>
-							<DashboardSettings
-								variablesSettingsTabHandle={variablesSettingsTabHandle}
-							/>
-						</SettingsDrawer>
+						<SettingsDrawer drawerTitle="Dashboard Configuration" />
 					</div>
 					<div className="actions-1">
 						<div className="actions-add-panel">

frontend/src/container/GridCardLayout/GridCard/FullView/PanelTypeSelector.tsx

@@ -3,7 +3,7 @@ import './PanelTypeSelector.scss';
 import { Select, Typography } from 'antd';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import GraphTypes from 'container/DashboardContainer/ComponentsSlider/menuItems';
+import GraphTypes from 'container/NewDashboard/ComponentsSlider/menuItems';
 import { handleQueryChange } from 'container/NewWidget/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useCallback } from 'react';

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -318,9 +318,7 @@ function GridCardGraph({
 					version={version}
 					threshold={threshold}
 					headerMenuList={menuList}
-					isFetchingResponse={
-						queryResponse.isFetching || variablesToGetUpdated.length > 0
-					}
+					isFetchingResponse={queryResponse.isFetching}
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}
 					onDragSelect={onDragSelect}

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -10,7 +10,7 @@ import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
-import { DEFAULT_ROW_NAME } from 'container/DashboardContainer/DashboardDescription/utils';
+import { DEFAULT_ROW_NAME } from 'container/NewDashboard/DashboardDescription/utils';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { createDynamicVariableToWidgetsMap } from 'hooks/dashboard/utils';
 import useComponentPermission from 'hooks/useComponentPermission';

frontend/src/container/InfraMonitoringHosts/__tests__/HostsList.test.tsx

@@ -17,7 +17,7 @@ jest.mock('lib/getMinMax', () => ({
 	default: jest.fn().mockImplementation(() => ({
 		minTime: 1713734400000,
 		maxTime: 1713738000000,
-		isValidShortHandDateTimeFormat: jest.fn().mockReturnValue(true),
+		isValidTimeFormat: jest.fn().mockReturnValue(true),
 	})),
 }));
 jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -266,8 +266,6 @@ export default function Events({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogsDetailedView.tsx

@@ -93,8 +93,6 @@ function EntityLogsDetailedView({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -258,8 +258,6 @@ function EntityMetrics<T>({
 						defaultRelativeTime="5m"
 						isModalTimeSelection={isModalTimeSelection}
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -188,8 +188,6 @@ function EntityTraces({
 						onTimeChange={handleTimeChange}
 						defaultRelativeTime="5m"
 						modalSelectedInterval={selectedInterval}
-						modalInitialStartTime={timeRange.startTime * 1000}
-						modalInitialEndTime={timeRange.endTime * 1000}
 					/>
 				</div>
 			</div>

frontend/src/container/InfraMonitoringK8s/__tests__/commonMocks.ts

@@ -62,7 +62,7 @@ const setupCommonMocks = (): void => {
 			minTime: 1713734400000,
 			maxTime: 1713738000000,
 		})),
-		isValidShortHandDateTimeFormat: jest.fn().mockReturnValue(true),
+		isValidTimeFormat: jest.fn().mockReturnValue(true),
 	}));
 
 	jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -28,9 +28,9 @@ import cx from 'classnames';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
-import { sanitizeDashboardData } from 'container/DashboardContainer/DashboardDescription';
-import { downloadObjectAsJson } from 'container/DashboardContainer/DashboardDescription/utils';
-import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { sanitizeDashboardData } from 'container/NewDashboard/DashboardDescription';
+import { downloadObjectAsJson } from 'container/NewDashboard/DashboardDescription/utils';
+import { Base64Icons } from 'container/NewDashboard/DashboardSettings/General/utils';
 import dayjs from 'dayjs';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';

frontend/src/container/ListOfDashboard/ImportJSON/index.tsx

@@ -20,7 +20,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
-import { ExternalLink, Github, MonitorDot, MoveRight } from 'lucide-react';
+import { ExternalLink, Github, MonitorDot, MoveRight, X } from 'lucide-react';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 // #TODO: Lucide will be removing brand icons like GitHub in the future. In that case, we can use Simple Icons. https://simpleicons.org/
 // See more: https://github.com/lucide-icons/lucide/issues/94
@@ -151,10 +151,7 @@ function ImportJSON({
 			wrapClassName="import-json-modal"
 			open={isImportJSONModalVisible}
 			centered
-			closable
-			keyboard
-			maskClosable
-			onCancel={onCancelHandler}
+			closable={false}
 			destroyOnClose
 			width="60vw"
 			footer={
@@ -226,6 +223,8 @@ function ImportJSON({
 			<div className="import-json-content-container">
 				<div className="import-json-content-header">
 					<Typography.Text>{t('import_json')}</Typography.Text>
+
+					<X size={14} className="periscope-btn ghost" onClick={onCancelHandler} />
 				</div>
 
 				<MEditor

frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx

@@ -4,7 +4,6 @@ import { Switch, Typography } from 'antd';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
 import { MAX_LOGS_LIST_SIZE } from 'constants/liveTail';
 import { LOCALSTORAGE } from 'constants/localStorage';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import GoToTop from 'container/GoToTop';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
@@ -22,13 +21,7 @@ import { ILiveLogsLog } from '../LiveLogsList/types';
 import LiveLogsListChart from '../LiveLogsListChart';
 import { QueryHistoryState } from '../types';
 
-interface LiveLogsContainerProps {
-	handleChangeSelectedView?: ChangeViewFunctionType;
-}
-
-function LiveLogsContainer({
-	handleChangeSelectedView,
-}: LiveLogsContainerProps): JSX.Element {
+function LiveLogsContainer(): JSX.Element {
 	const location = useLocation();
 	const [logs, setLogs] = useState<ILiveLogsLog[]>([]);
 	const { currentQuery, stagedQuery } = useQueryBuilder();
@@ -254,7 +247,6 @@ function LiveLogsContainer({
 					<LiveLogsList
 						logs={logs}
 						isLoading={initialLoading && logs.length === 0}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</div>
 			</div>
@@ -264,8 +256,4 @@ function LiveLogsContainer({
 	);
 }
 
-LiveLogsContainer.defaultProps = {
-	handleChangeSelectedView: undefined,
-};
-
 export default LiveLogsContainer;

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -25,11 +25,7 @@ import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import { LiveLogsListProps } from './types';
 
-function LiveLogsList({
-	logs,
-	isLoading,
-	handleChangeSelectedView,
-}: LiveLogsListProps): JSX.Element {
+function LiveLogsList({ logs, isLoading }: LiveLogsListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
 
 	const { isConnectionLoading } = useEventSource();
@@ -40,6 +36,7 @@ function LiveLogsList({
 		activeLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 		onSetActiveLog,
 	} = useActiveLog();
 
@@ -75,7 +72,6 @@ function LiveLogsList({
 						linesPerRow={options.maxLines}
 						selectedFields={selectedFields}
 						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				);
 			}
@@ -89,12 +85,10 @@ function LiveLogsList({
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 					fontSize={options.fontSize}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			);
 		},
 		[
-			handleChangeSelectedView,
 			onAddToQuery,
 			onSetActiveLog,
 			options.fontSize,
@@ -153,7 +147,6 @@ function LiveLogsList({
 								appendTo: 'end',
 								activeLogIndex,
 							}}
-							handleChangeSelectedView={handleChangeSelectedView}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -177,11 +170,12 @@ function LiveLogsList({
 					log={activeLog}
 					onClose={onClearActiveLog}
 					onAddToQuery={onAddToQuery}
+					onGroupByAttribute={onGroupByAttribute}
 					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			)}
 		</div>
 	);
 }
+
 export default memo(LiveLogsList);

frontend/src/container/LiveLogs/LiveLogsList/types.ts

@@ -1,4 +1,3 @@
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { ILog } from 'types/api/logs/log';
 
 export interface ILiveLogsLog {
@@ -9,5 +8,4 @@ export interface ILiveLogsLog {
 export type LiveLogsListProps = {
 	logs: ILiveLogsLog[];
 	isLoading: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };

frontend/src/container/LogDetailedView/Overview.tsx

@@ -12,13 +12,13 @@ import {
 	Typography,
 } from 'antd';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { OptionsQuery } from 'container/OptionsMenu/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronDown, ChevronRight, Search } from 'lucide-react';
 import { ReactNode, useState } from 'react';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { ActionItemProps } from './ActionItem';
 import TableView from './TableView';
@@ -29,7 +29,7 @@ interface OverviewProps {
 	isListViewPanel?: boolean;
 	selectedOptions: OptionsQuery;
 	listViewPanelSelectedFields?: IField[] | null;
-	handleChangeSelectedView?: ChangeViewFunctionType;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 }
 
 type Props = OverviewProps &
@@ -42,8 +42,8 @@ function Overview({
 	onClickActionItem,
 	isListViewPanel = false,
 	selectedOptions,
+	onGroupByAttribute,
 	listViewPanelSelectedFields,
-	handleChangeSelectedView,
 }: Props): JSX.Element {
 	const [isWrapWord, setIsWrapWord] = useState<boolean>(true);
 	const [isSearchVisible, setIsSearchVisible] = useState<boolean>(false);
@@ -208,11 +208,11 @@ function Overview({
 									logData={logData}
 									onAddToQuery={onAddToQuery}
 									fieldSearchInput={fieldSearchInput}
+									onGroupByAttribute={onGroupByAttribute}
 									onClickActionItem={onClickActionItem}
 									isListViewPanel={isListViewPanel}
 									selectedOptions={selectedOptions}
 									listViewPanelSelectedFields={listViewPanelSelectedFields}
-									handleChangeSelectedView={handleChangeSelectedView}
 								/>
 							</>
 						),
@@ -227,7 +227,7 @@ function Overview({
 Overview.defaultProps = {
 	isListViewPanel: false,
 	listViewPanelSelectedFields: null,
-	handleChangeSelectedView: undefined,
+	onGroupByAttribute: undefined,
 };
 
 export default Overview;

frontend/src/container/LogDetailedView/TableView.tsx

@@ -13,7 +13,6 @@ import AddToQueryHOC, {
 import { ResizeTable } from 'components/ResizeTable';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { FontSize, OptionsQuery } from 'container/OptionsMenu/types';
@@ -48,7 +47,7 @@ interface TableViewProps {
 	selectedOptions: OptionsQuery;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
-	handleChangeSelectedView?: ChangeViewFunctionType;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 }
 
 type Props = TableViewProps &
@@ -62,8 +61,8 @@ function TableView({
 	onClickActionItem,
 	isListViewPanel = false,
 	selectedOptions,
+	onGroupByAttribute,
 	listViewPanelSelectedFields,
-	handleChangeSelectedView,
 }: Props): JSX.Element | null {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
@@ -93,10 +92,6 @@ function TableView({
 				}
 			});
 		}
-		// pin trace_id by default when present
-		if (logData?.trace_id) {
-			pinnedAttributes.trace_id = true;
-		}
 
 		setPinnedAttributes(pinnedAttributes);
 	}, [
@@ -296,7 +291,7 @@ function TableView({
 					isfilterInLoading={isfilterInLoading}
 					isfilterOutLoading={isfilterOutLoading}
 					onClickHandler={onClickHandler}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			),
 		},
@@ -339,7 +334,7 @@ function TableView({
 TableView.defaultProps = {
 	isListViewPanel: false,
 	listViewPanelSelectedFields: null,
-	handleChangeSelectedView: undefined,
+	onGroupByAttribute: undefined,
 };
 
 export interface DataType {

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -7,24 +7,15 @@ import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { QueryParams } from 'constants/query';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
 import { useTimezone } from 'providers/Timezone';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
 import { DataType } from '../TableView';
 import {
@@ -42,6 +33,7 @@ interface ITableViewActionsProps {
 	isListViewPanel: boolean;
 	isfilterInLoading: boolean;
 	isfilterOutLoading: boolean;
+	onGroupByAttribute?: (fieldKey: string, dataType?: DataTypes) => Promise<void>;
 	onClickHandler: (
 		operator: string,
 		fieldKey: string,
@@ -49,7 +41,6 @@ interface ITableViewActionsProps {
 		dataType: string | undefined,
 		logType: MetricsType | undefined,
 	) => () => void;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 }
 
 // Memoized Tree Component
@@ -127,12 +118,10 @@ export default function TableViewActions(
 		isfilterInLoading,
 		isfilterOutLoading,
 		onClickHandler,
-		handleChangeSelectedView,
+		onGroupByAttribute,
 	} = props;
 
 	const { pathname } = useLocation();
-	const { stagedQuery, updateQueriesData } = useQueryBuilder();
-	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
 	const { dataType, logType: fieldType } = getFieldAttributes(record.field);
 
 	// there is no option for where clause in old logs explorer and live logs page
@@ -156,42 +145,6 @@ export default function TableViewActions(
 
 	const fieldFilterKey = filterKeyForField(fieldData.field);
 
-	const handleGroupByAttribute = useCallback((): void => {
-		if (!stagedQuery) return;
-		const normalizedDataType: DataTypes | undefined =
-			dataType && Object.values(DataTypes).includes(dataType as DataTypes)
-				? (dataType as DataTypes)
-				: undefined;
-
-		const updatedQuery = updateQueriesData(stagedQuery, 'queryData', (item) => {
-			const newGroupByItem: BaseAutocompleteData = {
-				key: fieldFilterKey,
-				type: fieldType || '',
-				dataType: normalizedDataType,
-			};
-
-			const updatedGroupBy = [...(item.groupBy || []), newGroupByItem];
-
-			return { ...item, groupBy: updatedGroupBy };
-		});
-
-		const queryData: ICurrentQueryData = {
-			name: viewName,
-			id: updatedQuery.id,
-			query: updatedQuery,
-		};
-
-		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
-	}, [
-		stagedQuery,
-		updateQueriesData,
-		fieldFilterKey,
-		fieldType,
-		dataType,
-		handleChangeSelectedView,
-		viewName,
-	]);
-
 	// Memoize textToCopy computation
 	const textToCopy = useMemo(() => {
 		let text = fieldData.value;
@@ -315,7 +268,9 @@ export default function TableViewActions(
 											className="group-by-clause"
 											type="text"
 											icon={<GroupByIcon />}
-											onClick={handleGroupByAttribute}
+											onClick={(): Promise<void> | void =>
+												onGroupByAttribute?.(fieldFilterKey)
+											}
 										>
 											Group By Attribute
 										</Button>
@@ -393,7 +348,9 @@ export default function TableViewActions(
 										className="group-by-clause"
 										type="text"
 										icon={<GroupByIcon />}
-										onClick={handleGroupByAttribute}
+										onClick={(): Promise<void> | void =>
+											onGroupByAttribute?.(fieldFilterKey)
+										}
 									>
 										Group By Attribute
 									</Button>
@@ -416,5 +373,5 @@ export default function TableViewActions(
 }
 
 TableViewActions.defaultProps = {
-	handleChangeSelectedView: undefined,
+	onGroupByAttribute: undefined,
 };

frontend/src/container/LogDetailedView/TableView/__test__/TableViewActions.test.tsx

@@ -1,8 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { RESTRICTED_SELECTED_FIELDS } from 'container/LogsFilters/config';
-import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { ExplorerViews } from 'pages/LogsExplorer/utils';
 
 import TableViewActions from '../TableViewActions';
 import useAsyncJSONProcessing from '../useAsyncJSONProcessing';
@@ -52,20 +49,6 @@ jest.mock('../useAsyncJSONProcessing', () => ({
 	default: jest.fn(),
 }));
 
-jest.mock('antd', () => {
-	const antd = jest.requireActual('antd');
-	return {
-		...antd,
-		// Render popover content inline to make its children testable
-		Popover: ({ content, children }: any): JSX.Element => (
-			<div data-testid="popover">
-				<div data-testid="popover-content">{content}</div>
-				{children}
-			</div>
-		),
-	};
-});
-
 jest.mock('providers/Timezone', () => ({
 	useTimezone: (): {
 		formatTimezoneAdjustedTimestamp: (timestamp: string) => string;
@@ -88,35 +71,29 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('hooks/queryBuilder/useQueryBuilder');
-jest.mock('hooks/queryBuilder/useGetSearchQueryParam');
-
 describe('TableViewActions', () => {
 	const TEST_VALUE = 'test value';
-	const TEST_FIELD = 'test-field';
 	const ACTION_BUTTON_TEST_ID = '.action-btn';
 	const defaultProps = {
 		fieldData: {
-			field: TEST_FIELD,
+			field: 'test-field',
 			value: TEST_VALUE,
 		},
 		record: {
 			key: 'test-key',
-			field: TEST_FIELD,
+			field: 'test-field',
 			value: TEST_VALUE,
 		},
 		isListViewPanel: false,
 		isfilterInLoading: false,
 		isfilterOutLoading: false,
 		onClickHandler: jest.fn(),
-		handleChangeSelectedView: jest.fn(),
+		onGroupByAttribute: jest.fn(),
 	};
 
 	beforeEach(() => {
 		mockCopyToClipboard = jest.fn();
 		mockNotificationsSuccess = jest.fn();
-		defaultProps.onClickHandler = jest.fn();
-		defaultProps.handleChangeSelectedView = jest.fn();
 
 		// Default mock for useAsyncJSONProcessing
 		const mockUseAsyncJSONProcessing = jest.mocked(useAsyncJSONProcessing);
@@ -125,24 +102,6 @@ describe('TableViewActions', () => {
 			treeData: null,
 			error: null,
 		});
-
-		// Default mock for useQueryBuilder
-		jest.mocked(useQueryBuilder).mockReturnValue({
-			stagedQuery: null,
-			updateQueriesData: jest.fn((query, type, callback) => {
-				const updatedBuilder = {
-					...query.builder,
-					[type]: query.builder[type].map(callback),
-				};
-				return {
-					...query,
-					builder: updatedBuilder,
-				};
-			}),
-		} as any);
-
-		// Default mock for useGetSearchQueryParam
-		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
 	});
 
 	it('should render without crashing', () => {
@@ -154,7 +113,7 @@ describe('TableViewActions', () => {
 				isfilterInLoading={defaultProps.isfilterInLoading}
 				isfilterOutLoading={defaultProps.isfilterOutLoading}
 				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				onGroupByAttribute={defaultProps.onGroupByAttribute}
 			/>,
 		);
 		expect(screen.getByText(TEST_VALUE)).toBeInTheDocument();
@@ -176,7 +135,7 @@ describe('TableViewActions', () => {
 					isfilterInLoading={defaultProps.isfilterInLoading}
 					isfilterOutLoading={defaultProps.isfilterOutLoading}
 					onClickHandler={defaultProps.onClickHandler}
-					handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+					onGroupByAttribute={defaultProps.onGroupByAttribute}
 				/>,
 			);
 			// Verify that action buttons are not rendered for restricted fields
@@ -195,100 +154,13 @@ describe('TableViewActions', () => {
 				isfilterInLoading={defaultProps.isfilterInLoading}
 				isfilterOutLoading={defaultProps.isfilterOutLoading}
 				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				onGroupByAttribute={defaultProps.onGroupByAttribute}
 			/>,
 		);
 		// Verify that action buttons are rendered for non-restricted fields
 		expect(container.querySelector(ACTION_BUTTON_TEST_ID)).toBeInTheDocument();
 	});
 
-	it('should call handleChangeSelectedView when clicking group by', () => {
-		const mockStagedQuery = {
-			id: 'test-query-id',
-			queryType: 'queryBuilder',
-			builder: {
-				queryData: [
-					{
-						queryName: 'A',
-						dataSource: 'logs',
-						aggregateOperator: 'count',
-						functions: [],
-						filter: {},
-						groupBy: [],
-						expression: '',
-						disabled: false,
-						having: [],
-						limit: null,
-						stepInterval: null,
-						orderBy: [],
-						legend: '',
-					},
-				],
-				queryFormulas: [],
-				queryTraceOperator: [],
-			},
-			promql: [],
-			clickhouse_sql: [],
-		};
-
-		const mockUpdateQueriesData = jest.fn((query, type, callback) => {
-			const section = query.builder?.[type];
-			if (!Array.isArray(section)) {
-				return query;
-			}
-			return {
-				...query,
-				builder: {
-					...query.builder,
-					[type]: section.map(callback),
-				},
-			};
-		});
-
-		jest.mocked(useQueryBuilder).mockReturnValue({
-			stagedQuery: mockStagedQuery,
-			updateQueriesData: mockUpdateQueriesData,
-		} as any);
-
-		jest.mocked(useGetSearchQueryParam).mockReturnValue(null);
-
-		render(
-			<TableViewActions
-				fieldData={defaultProps.fieldData}
-				record={defaultProps.record}
-				isListViewPanel={defaultProps.isListViewPanel}
-				isfilterInLoading={defaultProps.isfilterInLoading}
-				isfilterOutLoading={defaultProps.isfilterOutLoading}
-				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
-			/>,
-		);
-
-		fireEvent.click(screen.getByText('Group By Attribute'));
-
-		expect(defaultProps.handleChangeSelectedView).toHaveBeenCalledWith(
-			ExplorerViews.TIMESERIES,
-			expect.objectContaining({
-				name: '',
-				id: 'test-query-id',
-				query: expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								groupBy: expect.arrayContaining([
-									expect.objectContaining({
-										key: TEST_FIELD,
-										type: '',
-									}),
-								]),
-							}),
-						]),
-					}),
-				}),
-			}),
-		);
-	});
-
 	it('should not render action buttons in list view panel', () => {
 		const { container } = render(
 			<TableViewActions
@@ -298,7 +170,7 @@ describe('TableViewActions', () => {
 				isfilterInLoading={defaultProps.isfilterInLoading}
 				isfilterOutLoading={defaultProps.isfilterOutLoading}
 				onClickHandler={defaultProps.onClickHandler}
-				handleChangeSelectedView={defaultProps.handleChangeSelectedView}
+				onGroupByAttribute={defaultProps.onGroupByAttribute}
 			/>,
 		);
 		// Verify that action buttons are not rendered in list view panel
@@ -328,7 +200,7 @@ describe('TableViewActions', () => {
 			isfilterInLoading: false,
 			isfilterOutLoading: false,
 			onClickHandler: jest.fn(),
-			handleChangeSelectedView: jest.fn(),
+			onGroupByAttribute: jest.fn(),
 		};
 
 		// Render component with body field
@@ -340,7 +212,7 @@ describe('TableViewActions', () => {
 				isfilterInLoading={bodyProps.isfilterInLoading}
 				isfilterOutLoading={bodyProps.isfilterOutLoading}
 				onClickHandler={bodyProps.onClickHandler}
-				handleChangeSelectedView={bodyProps.handleChangeSelectedView}
+				onGroupByAttribute={bodyProps.onGroupByAttribute}
 			/>,
 		);
 

frontend/src/container/Login/Login.styles.scss

@@ -1,419 +1,44 @@
-@import '@signozhq/design-tokens/dist/style.css';
-
 .login-form-container {
 	display: flex;
 	justify-content: center;
 	width: 100%;
 	align-items: flex-start;
-}
 
-.login-form-header {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	margin-bottom: 32px;
-	text-align: center;
-	width: 100%;
-}
-
-.login-form-emoji {
-	width: 32px;
-	height: 32px;
-	font-size: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.login-form-title {
-	font-family: Inter, sans-serif;
-	font-size: 18px;
-	font-weight: 600;
-	line-height: 1;
-	letter-spacing: 0;
-	color: var(--levels-l1-foreground, #eceef2);
-	margin: 0 !important;
-}
-
-.login-form-description {
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 20px;
-	letter-spacing: -0.065px;
-	color: var(--semantic-secondary-foreground, #adb4c2);
-	max-width: 317px;
-	margin: 0 !important;
-	text-align: center;
-}
-
-.login-form-card {
-	width: 100%;
-	background: var(--semantic-secondary-background, #121317);
-	border: 1px solid var(--semantic-secondary-border, #23262e);
-	border-radius: 4px;
-	padding: 24px;
-	display: flex;
-	flex-direction: column;
-	gap: 24px;
-}
-
-.login-error-container {
-	margin-top: 24px;
-	width: 100%;
-
-	.error-content {
-		background: rgba(229, 72, 77, 0.1);
-		border: 1px solid rgba(229, 72, 77, 0.2);
-		border-radius: 4px;
-
-		&__summary-section {
-			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
-		}
-
-		&__summary {
-			padding: 16px;
-		}
-
-		&__summary-left {
-			gap: 10px;
-		}
-
-		&__icon-wrapper {
-			width: 12px;
-			height: 12px;
-			flex-shrink: 0;
-		}
-
-		.login-error-icon {
-			color: var(--bg-cherry-200);
-			padding-top: 1px;
-		}
-
-		&__summary-text {
-			gap: 6px;
-		}
-
-		&__error-code {
-			color: #fadadb;
-			font-size: 13px;
-			font-weight: 500;
-			line-height: 1;
-			letter-spacing: -0.065px;
-		}
-
-		&__error-message {
-			color: #f5b6b8;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.065px;
-		}
-
-		&__message-badge {
-			padding: 0px 16px 16px;
-		}
-
-		&__message-badge-label-text {
-			color: #fadadb;
-		}
-
-		&__message-badge-line {
-			background-image: radial-gradient(
-				circle,
-				rgba(229, 72, 77, 0.3) 1px,
-				transparent 2px
-			);
-		}
-
-		&__messages-section {
-			padding: 0;
-		}
-
-		&__message-list {
-			max-height: 200px;
-		}
-
-		&__message-item {
-			color: #f5b6b8;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.065px;
-
-			&::before {
-				background: #f5b6b8;
-			}
-		}
-
-		&__scroll-hint {
-			background: rgba(229, 72, 77, 0.2);
-		}
-
-		&__scroll-hint-text {
-			color: #fadadb;
-		}
-	}
-}
-
-.lightMode {
-	.login-error-container {
-		.error-content {
-			background: rgba(229, 72, 77, 0.1);
-			border-color: rgba(229, 72, 77, 0.2);
-
-			&__error-code {
-				color: var(--bg-ink-100);
-			}
-
-			&__error-message {
-				color: var(--bg-ink-400);
-			}
-
-			&__docs-button {
-				color: var(--bg-ink-400);
-				border-color: var(--bg-vanilla-300, #e9e9e9);
-				background: transparent;
-
-				&:hover {
-					color: var(--bg-ink-100);
-					border-color: var(--bg-vanilla-400, #d1d5db);
-					background: transparent;
-				}
-			}
-
-			&__message-badge-label-text {
-				color: var(--bg-ink-100);
-			}
-
-			&__message-item {
-				color: var(--bg-ink-400);
-
-				&::before {
-					background: var(--bg-ink-400);
-				}
-			}
-
-			&__scroll-hint-text {
-				color: var(--bg-ink-100);
-			}
-		}
-	}
-}
-
-.password-label-container {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-	margin-bottom: 12px;
-
-	> label {
-		margin-bottom: 0;
-	}
-}
-
-.forgot-password-link {
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	color: var(--text-neutral-dark-200) !important;
-
-	&:hover {
-		color: var(--text-neutral-dark-300) !important;
-	}
-}
-
-.login-form-input {
-	height: 32px;
-	background: var(--levels-l3-background, #23262e);
-	border: 1px solid var(--levels-l3-border, #2c303a);
-	border-radius: 2px;
-	padding: 6px 8px;
-	font-family: Inter, sans-serif;
-	font-size: 13px;
-	font-weight: 400;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	color: var(--levels-l1-foreground, #eceef2);
-
-	&::placeholder {
-		color: var(--levels-l3-foreground, #747b8b);
+	.login-form-header {
+		margin-bottom: 16px;
 	}
 
-	&:hover {
-		border-color: var(--levels-l3-border, #2c303a);
+	.login-form-header-text {
+		color: var(--text-vanilla-300);
 	}
 
-	&:focus {
-		border-color: var(--semantic-primary-background, #4e74f8);
-		box-shadow: none;
-	}
-
-	// Select component styling to match Input
-	&.ant-select {
-		width: 100%;
-		height: 32px;
-		margin: 0;
-		padding: 0;
-
-		.ant-select-selector {
-			height: 32px !important;
-			min-height: 32px !important;
-			padding: 0 8px !important;
-			border-radius: 2px !important;
-			font-family: Inter, sans-serif !important;
-			font-size: 13px !important;
-			font-weight: 400 !important;
-			line-height: 1 !important;
-			letter-spacing: -0.065px !important;
-			background: var(--levels-l3-background, #23262e) !important;
-			border: 1px solid var(--levels-l3-border, #2c303a) !important;
-			display: flex !important;
-			align-items: center !important;
-		}
-
-		.ant-select-selection-search {
-			height: 20px;
-			line-height: 20px;
-		}
-
-		.ant-select-selection-item,
-		.ant-select-selection-placeholder {
-			line-height: 20px !important;
-			height: 20px !important;
-			font-family: Inter, sans-serif !important;
-			font-size: 13px !important;
-			font-weight: 400 !important;
-			letter-spacing: -0.065px !important;
-			display: flex !important;
-			align-items: center !important;
-			margin: 0 !important;
-		}
-
-		.ant-select-selection-placeholder {
-			color: var(--levels-l3-foreground, #747b8b) !important;
-		}
-
-		.ant-select-selection-item {
-			color: var(--levels-l1-foreground, #eceef2) !important;
-		}
-
-		&:hover .ant-select-selector {
-			border-color: var(--levels-l3-border, #2c303a) !important;
-		}
-
-		&.ant-select-focused .ant-select-selector {
-			border-color: var(--semantic-primary-background, #4e74f8) !important;
-			box-shadow: none !important;
-		}
-	}
-
-	// Remove border for orgId Select only
-	&.login-form-select-no-border {
-		&.ant-select .ant-select-selector {
-			border: none !important;
-		}
-
-		&.ant-select:hover .ant-select-selector {
-			border: none !important;
-		}
-
-		&.ant-select.ant-select-focused .ant-select-selector {
-			border: none !important;
-			box-shadow: none !important;
-		}
-	}
-}
-
-.login-form-actions {
-	width: 100%;
-	margin-top: 24px;
-}
-
-.login-submit-btn {
-	width: 100%;
-	height: 32px;
-	padding: 10px 16px;
-	background: var(--semantic-primary-background, #4e74f8);
-	border: none;
-	border-radius: 2px;
-	font-family: Inter, sans-serif;
-	font-size: 11px;
-	font-weight: 500;
-	line-height: 1;
-	color: var(--semantic-primary-foreground, #eceef2);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-
-	&:hover:not(:disabled) {
-		background: var(--semantic-primary-background, #4e74f8);
-		opacity: 0.9;
-	}
-
-	&:disabled {
-		background: var(--semantic-primary-background, #4e74f8);
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-}
-
-.lightMode {
-	.login-form-title {
-		color: var(--text-ink-500);
-	}
-
-	.login-form-description {
-		color: var(--text-neutral-light-200, #80828d);
-	}
-
-	.login-form-card {
-		background: var(--bg-base-white, #ffffff);
-		border-color: var(--bg-vanilla-300, #e9e9e9);
-	}
-
-	.forgot-password-link {
-		color: var(--text-neutral-dark-300);
+	.next-btn {
+		padding: 0px 16px;
 	}
 
 	.login-form-input {
-		background: var(--bg-vanilla-200, #f5f5f5);
-		border-color: var(--bg-vanilla-300, #e9e9e9);
-		color: var(--text-ink-500);
+		height: 40px;
+	}
 
-		&::placeholder {
-			color: var(--text-neutral-light-200, #80828d);
+	.no-acccount {
+		color: var(--text-vanilla-300);
+		font-size: 12px;
+		margin-top: 16px;
+	}
+}
+
+.lightMode {
+	.login-form-container {
+		.login-form-header {
+			color: var(--text-ink-500);
 		}
 
-		&:focus {
-			border-color: var(--semantic-primary-background, #4e74f8);
+		.login-form-header-text {
+			color: var(--text-ink-500);
 		}
 
-		// Select component light mode styling
-		&.ant-select {
-			.ant-select-selector {
-				background: var(--bg-vanilla-200, #f5f5f5) !important;
-				border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-				color: var(--text-ink-500) !important;
-			}
-
-			.ant-select-selection-placeholder {
-				color: var(--text-neutral-light-200, #80828d) !important;
-			}
-
-			&:hover .ant-select-selector {
-				border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-			}
-
-			&.ant-select-focused .ant-select-selector {
-				border-color: var(--semantic-primary-background, #4e74f8) !important;
-			}
+		.no-acccount {
+			color: var(--text-ink-500);
 		}
 	}
 }

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

@@ -146,7 +146,7 @@ describe('Login Component', () => {
 			).toBeInTheDocument();
 			expect(getByTestId('email')).toBeInTheDocument();
 			expect(getByTestId('initiate_login')).toBeInTheDocument();
-			expect(getByPlaceholderText('e.g. john@signoz.io')).toBeInTheDocument();
+			expect(getByPlaceholderText('name@yourcompany.com')).toBeInTheDocument();
 		});
 
 		it('shows loading state when version data is being fetched', () => {
@@ -213,27 +213,19 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 			);
 
 			const { getByTestId } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -261,21 +253,10 @@ describe('Login Component', () => {
 
 			const { getByTestId, getByText } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -288,27 +269,19 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 			);
 
 			const { getByTestId } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -325,33 +298,25 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockMultiOrgMixedAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockMultiOrgMixedAuth }),
+					),
 				),
 			);
 
 			const { getByTestId, getByText } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
 				expect(getByText('Organization Name')).toBeInTheDocument();
+				expect(screen.getByRole('combobox')).toBeInTheDocument();
 			});
-			await screen.findByRole('combobox');
 
 			// Click on the dropdown to reveal the options
 			await user.click(screen.getByRole('combobox'));
@@ -373,30 +338,25 @@ describe('Login Component', () => {
 
 			render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
-			await screen.findByRole('combobox');
+			await waitFor(() => {
+				expect(screen.getByRole('combobox')).toBeInTheDocument();
+			});
 
 			// Select CALLBACK_AUTHN_ORG
 			await user.click(screen.getByRole('combobox'));
 			await user.click(screen.getByText(CALLBACK_AUTHN_ORG));
 
-			await screen.findByRole('button', { name: /sign in with sso/i });
+			await waitFor(() => {
+				expect(
+					screen.getByRole('button', { name: /login with callback/i }),
+				).toBeInTheDocument();
+			});
 		});
 	});
 
@@ -406,27 +366,19 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 			);
 
 			const { getByTestId, getByText } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -441,7 +393,10 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgCallbackAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgCallbackAuth }),
+					),
 				),
 			);
 
@@ -449,21 +404,10 @@ describe('Login Component', () => {
 				initialRoute: '/login?password=Y',
 			});
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -479,27 +423,19 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgCallbackAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgCallbackAuth }),
+					),
 				),
 			);
 
 			const { getByTestId, queryByTestId } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -522,27 +458,19 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgCallbackAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgCallbackAuth }),
+					),
 				),
 			);
 
 			const { getByTestId, queryByTestId } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -566,7 +494,10 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 				rest.post('*/api/v2/sessions/email_password', async (_, res, ctx) =>
 					res(
@@ -578,21 +509,10 @@ describe('Login Component', () => {
 
 			const { getByTestId } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -617,7 +537,10 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockSingleOrgPasswordAuth })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockSingleOrgPasswordAuth }),
+					),
 				),
 				rest.post('*/api/v2/sessions/email_password', (_, res, ctx) =>
 					res(
@@ -635,21 +558,10 @@ describe('Login Component', () => {
 
 			const { getByTestId, getByText } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -687,7 +599,7 @@ describe('Login Component', () => {
 			});
 
 			await waitFor(() => {
-				expect(getByText('Authentication failed')).toBeInTheDocument();
+				expect(getByText('AUTH_ERROR')).toBeInTheDocument();
 			});
 		});
 
@@ -699,7 +611,7 @@ describe('Login Component', () => {
 
 			await waitFor(() => {
 				expect(queryByText('invalid-json')).not.toBeInTheDocument();
-				expect(getByText('Authentication failed')).toBeInTheDocument();
+				expect(getByText('AUTH_ERROR')).toBeInTheDocument();
 			});
 		});
 	});
@@ -710,27 +622,19 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (req, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockOrgWithWarning })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockOrgWithWarning }),
+					),
 				),
 			);
 
 			render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -762,30 +666,24 @@ describe('Login Component', () => {
 
 			server.use(
 				rest.get(SESSIONS_CONTEXT_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json({ data: mockMultiOrgWithWarning })),
+					res(
+						ctx.status(200),
+						ctx.json({ status: 'success', data: mockMultiOrgWithWarning }),
+					),
 				),
 			);
 
 			const { getByTestId } = render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = getByTestId('email');
+			const nextButton = getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
-			await screen.findByRole('combobox');
+			await waitFor(() => {
+				expect(screen.getByRole('combobox')).toBeInTheDocument();
+			});
 
 			// Select the organization with a warning
 			await user.click(screen.getByRole('combobox'));
@@ -815,21 +713,10 @@ describe('Login Component', () => {
 
 			render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			// Button should be disabled during API call
@@ -850,25 +737,14 @@ describe('Login Component', () => {
 			// Initially shows "Next" button
 			expect(screen.getByTestId('initiate_login')).toBeInTheDocument();
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
-				// Should show "Sign in with Password" button for password auth
+				// Should show "Login" button for password auth
 				expect(screen.getByTestId('password_authn_submit')).toBeInTheDocument();
 				expect(screen.queryByTestId('initiate_login')).not.toBeInTheDocument();
 			});
@@ -892,21 +768,10 @@ describe('Login Component', () => {
 
 			render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {
@@ -945,21 +810,10 @@ describe('Login Component', () => {
 
 			render(<Login />);
 
-			// Wait for version API to complete (email input becomes enabled)
-			const emailInput = await waitFor(() => {
-				const input = screen.getByTestId('email');
-				expect(input).not.toBeDisabled();
-				return input;
-			});
+			const emailInput = screen.getByTestId('email');
+			const nextButton = screen.getByTestId('initiate_login');
 
 			await user.type(emailInput, PASSWORD_AUTHN_EMAIL);
-
-			const nextButton = await waitFor(() => {
-				const button = screen.getByTestId('initiate_login');
-				expect(button).not.toBeDisabled();
-				return button;
-			});
-
 			await user.click(nextButton);
 
 			await waitFor(() => {

frontend/src/container/Login/index.tsx

@@ -1,16 +1,15 @@
 import './Login.styles.scss';
 
-import { Button } from '@signozhq/button';
-import { Form, Input, Select, Tooltip, Typography } from 'antd';
+import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';
 import getVersion from 'api/v1/version/get';
 import get from 'api/v2/sessions/context/get';
 import post from 'api/v2/sessions/email_password/post';
 import afterLogin from 'AppRoutes/utils';
-import AuthError from 'components/AuthError/AuthError';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { ArrowRight } from 'lucide-react';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { ErrorV2 } from 'types/api';
@@ -38,7 +37,6 @@ type FormValues = {
 	url: string;
 };
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function Login(): JSX.Element {
 	const urlQueryParams = useUrlQuery();
 	// override for callbackAuthN in case of some misconfiguration
@@ -63,12 +61,7 @@ function Login(): JSX.Element {
 		setIsLoadingSessionsContext,
 	] = useState<boolean>(false);
 	const [form] = Form.useForm<FormValues>();
-	const [errorMessage, setErrorMessage] = useState<APIError>();
-
-	// Watch form values for validation
-	const email = Form.useWatch('email', form);
-	const password = Form.useWatch('password', form);
-	const orgId = Form.useWatch('orgId', form);
+	const { showErrorModal } = useErrorModal();
 
 	// setupCompleted information to route to signup page in case setup is incomplete
 	const {
@@ -97,7 +90,6 @@ function Login(): JSX.Element {
 	const onNextHandler = async (): Promise<void> => {
 		const email = form.getFieldValue('email');
 		setIsLoadingSessionsContext(true);
-		setErrorMessage(undefined);
 
 		try {
 			const sessionsContextResponse = await get({
@@ -110,7 +102,7 @@ function Login(): JSX.Element {
 				setSessionsOrgId(sessionsContextResponse.data.orgs[0].id);
 			}
 		} catch (error) {
-			setErrorMessage(error as APIError);
+			showErrorModal(error as APIError);
 		}
 		setIsLoadingSessionsContext(false);
 	};
@@ -189,7 +181,6 @@ function Login(): JSX.Element {
 
 	const onSubmitHandler: () => Promise<void> = async () => {
 		setIsSubmitting(true);
-		setErrorMessage(undefined);
 
 		try {
 			if (isPasswordAuthN) {
@@ -214,7 +205,7 @@ function Login(): JSX.Element {
 				window.location.href = url;
 			}
 		} catch (error) {
-			setErrorMessage(error as APIError);
+			showErrorModal(error as APIError);
 		} finally {
 			setIsSubmitting(false);
 		}
@@ -222,7 +213,7 @@ function Login(): JSX.Element {
 
 	useEffect(() => {
 		if (callbackAuthError) {
-			setErrorMessage(
+			showErrorModal(
 				new APIError({
 					httpStatusCode: 500,
 					error: {
@@ -240,140 +231,110 @@ function Login(): JSX.Element {
 		callbackAuthErrorCode,
 		callbackAuthErrorMessage,
 		callbackAuthErrorURL,
-		setErrorMessage,
+		showErrorModal,
 	]);
 
 	useEffect(() => {
 		if (sessionsOrgWarning) {
-			setErrorMessage(
+			showErrorModal(
 				new APIError({
-					httpStatusCode: 400,
 					error: {
 						code: sessionsOrgWarning.code,
 						message: sessionsOrgWarning.message,
 						url: sessionsOrgWarning.url,
 						errors: sessionsOrgWarning.errors,
 					},
+					httpStatusCode: 400,
 				}),
 			);
 		}
-	}, [sessionsOrgWarning, setErrorMessage]);
-
-	// Validation helpers
-	const isEmailValid = Boolean(
-		email?.trim() && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email),
-	);
-
-	const isNextButtonEnabled =
-		isEmailValid && !versionLoading && !sessionsContextLoading;
-
-	const isSubmitButtonEnabled = useMemo((): boolean => {
-		if (!isEmailValid || isSubmitting) return false;
-		const hasMultipleOrgs = (sessionsContext?.orgs.length ?? 0) > 1;
-		if (hasMultipleOrgs && !orgId) {
-			return false;
-		}
-
-		return !(isPasswordAuthN && !password?.trim());
-	}, [
-		isEmailValid,
-		isSubmitting,
-		sessionsContext,
-		orgId,
-		isPasswordAuthN,
-		password,
-	]);
+	}, [sessionsOrgWarning, showErrorModal]);
 
 	return (
 		<div className="login-form-container">
 			<FormContainer form={form} onFinish={onSubmitHandler}>
 				<div className="login-form-header">
-					<div className="login-form-emoji">
-						<img src="/svgs/tv.svg" alt="TV" width="32" height="32" />
-					</div>
-					<Typography.Title level={4} className="login-form-title">
-						Sign in to your workspace
-					</Typography.Title>
-					<Typography.Paragraph className="login-form-description">
+					<Typography.Paragraph className="login-form-header-text">
 						Sign in to monitor, trace, and troubleshoot your applications
 						effortlessly.
 					</Typography.Paragraph>
 				</div>
 
-				<div className="login-form-card">
+				<ParentContainer>
+					<Label htmlFor="signupEmail" style={{ marginTop: 0 }}>
+						Email
+					</Label>
+					<FormContainer.Item name="email">
+						<Input
+							type="email"
+							id="email"
+							data-testid="email"
+							required
+							placeholder="name@yourcompany.com"
+							autoFocus
+							disabled={versionLoading}
+							className="login-form-input"
+							onPressEnter={onNextHandler}
+						/>
+					</FormContainer.Item>
+				</ParentContainer>
+
+				{sessionsContext && sessionsContext.orgs.length > 1 && (
 					<ParentContainer>
-						<Label htmlFor="signupEmail">Email address</Label>
-						<FormContainer.Item name="email">
-							<Input
-								type="email"
-								id="email"
-								data-testid="email"
-								required
-								placeholder="e.g. john@signoz.io"
-								autoFocus
-								disabled={versionLoading}
+						<Label htmlFor="orgId">Organization Name</Label>
+						<FormContainer.Item name="orgId">
+							<Select
+								id="orgId"
+								data-testid="orgId"
 								className="login-form-input"
-								onPressEnter={onNextHandler}
+								placeholder="Select your organization"
+								options={sessionsContext.orgs.map((org) => ({
+									value: org.id,
+									label: org.name || 'default',
+								}))}
+								onChange={(value: string): void => {
+									setSessionsOrgId(value);
+								}}
 							/>
 						</FormContainer.Item>
 					</ParentContainer>
+				)}
 
-					{sessionsContext && sessionsContext.orgs.length > 1 && (
-						<ParentContainer>
-							<Label htmlFor="orgId">Organization Name</Label>
-							<FormContainer.Item name="orgId">
-								<Select
-									id="orgId"
-									data-testid="orgId"
-									className="login-form-input login-form-select-no-border"
-									placeholder="Select your organization"
-									options={sessionsContext.orgs.map((org) => ({
-										value: org.id,
-										label: org.name || 'default',
-									}))}
-									onChange={(value: string): void => {
-										setSessionsOrgId(value);
-									}}
-								/>
-							</FormContainer.Item>
-						</ParentContainer>
-					)}
+				{sessionsContext && isPasswordAuthN && (
+					<ParentContainer>
+						<Label htmlFor="Password">Password</Label>
+						<FormContainer.Item name="password">
+							<Input.Password
+								required
+								id="currentPassword"
+								data-testid="password"
+								disabled={isSubmitting}
+								className="login-form-input"
+							/>
+						</FormContainer.Item>
 
-					{sessionsContext && isPasswordAuthN && (
-						<ParentContainer>
-							<div className="password-label-container">
-								<Label htmlFor="Password">Password</Label>
-								<Tooltip title="Ask your admin to reset your password and send you a new invite link">
-									<Typography.Link className="forgot-password-link">
-										Forgot password?
-									</Typography.Link>
-								</Tooltip>
-							</div>
-							<FormContainer.Item name="password">
-								<Input.Password
-									required
-									placeholder="Enter password"
-									id="currentPassword"
-									data-testid="password"
-									disabled={isSubmitting}
-									className="login-form-input"
-								/>
-							</FormContainer.Item>
-						</ParentContainer>
-					)}
-				</div>
+						<div style={{ marginTop: 8 }}>
+							<Tooltip title="Ask your admin to reset your password and send you a new invite link">
+								<Typography.Link>Forgot password?</Typography.Link>
+							</Tooltip>
+						</div>
+					</ParentContainer>
+				)}
 
-				{errorMessage && <AuthError error={errorMessage} />}
-
-				<div className="login-form-actions">
+				<Space
+					style={{ marginTop: 16 }}
+					align="start"
+					direction="vertical"
+					size={20}
+				>
 					{!sessionsContext && (
 						<Button
-							disabled={!isNextButtonEnabled}
-							variant="solid"
+							disabled={versionLoading || sessionsContextLoading}
+							type="primary"
 							onClick={onNextHandler}
 							data-testid="initiate_login"
-							className="login-submit-btn"
-							suffixIcon={<ArrowRight size={12} />}
+							className="periscope-btn primary next-btn"
+							icon={<ArrowRight size={12} />}
 						>
 							Next
 						</Button>
@@ -381,34 +342,32 @@ function Login(): JSX.Element {
 
 					{sessionsContext && isCallbackAuthN && (
 						<Button
-							disabled={!isSubmitButtonEnabled}
-							variant="solid"
-							type="submit"
-							color="primary"
+							disabled={isSubmitting}
+							type="primary"
+							htmlType="submit"
 							data-testid="callback_authn_submit"
 							data-attr="signup"
-							className="login-submit-btn"
-							suffixIcon={<ArrowRight size={12} />}
+							className="periscope-btn primary next-btn"
+							icon={<ArrowRight size={12} />}
 						>
-							Sign in with SSO
+							Login With Callback
 						</Button>
 					)}
 
 					{sessionsContext && isPasswordAuthN && (
 						<Button
-							disabled={!isSubmitButtonEnabled}
-							variant="solid"
-							color="primary"
+							disabled={isSubmitting}
+							type="primary"
 							data-testid="password_authn_submit"
-							type="submit"
+							htmlType="submit"
 							data-attr="signup"
-							className="login-submit-btn"
-							suffixIcon={<ArrowRight size={12} />}
+							className="periscope-btn primary next-btn"
+							icon={<ArrowRight size={12} />}
 						>
-							Sign in with Password
+							Login
 						</Button>
 					)}
-				</div>
+				</Space>
 			</FormContainer>
 		</div>
 	);

frontend/src/container/Login/styles.ts

@@ -1,21 +1,27 @@
-import { Form } from 'antd';
+import { Card, Form } from 'antd';
 import styled from 'styled-components';
 
-export const Label = styled.label`
-	font-family: var(--font-family-inter, Inter), sans-serif;
-	font-size: 13px;
-	font-weight: 600;
-	line-height: 1;
-	letter-spacing: -0.065px;
-	color: var(--levels-l1-foreground, #eceef2);
-	margin-bottom: 12px;
-	display: block;
-
-	.lightMode & {
-		color: var(--text-ink-500);
+export const FormWrapper = styled(Card)`
+	display: flex;
+	justify-content: center;
+	min-width: 390px;
+	min-height: 430px;
+	max-width: 432px;
+	flex: 1;
+	align-items: flex-start;
+	&&&.ant-card-body {
+		min-width: 100%;
 	}
 `;
 
+export const Label = styled.label`
+	margin-bottom: 11px;
+	margin-top: 19px;
+	display: inline-block;
+	font-size: 1rem;
+	line-height: 24px;
+`;
+
 export const FormContainer = styled(Form)`
 	display: flex;
 	flex-direction: column;
@@ -24,58 +30,9 @@ export const FormContainer = styled(Form)`
 
 	& .ant-form-item {
 		margin-bottom: 0px;
-		width: 100%;
-
-		& .ant-select {
-			width: 100%;
-			margin: 0;
-		}
-
-		& .ant-form-item-control {
-			width: 100%;
-		}
-
-		& .ant-form-item-control-input {
-			width: 100%;
-		}
-
-		& .ant-form-item-control-input-content {
-			width: 100%;
-		}
-	}
-
-	& .ant-input,
-	& .ant-input-password,
-	& .ant-select-selector {
-		background: var(--levels-l3-background, #23262e) !important;
-		border-color: var(--levels-l3-border, #2c303a) !important;
-		color: var(--levels-l1-foreground, #eceef2) !important;
-
-		.lightMode & {
-			background: var(--bg-vanilla-200, #f5f5f5) !important;
-			border-color: var(--bg-vanilla-300, #e9e9e9) !important;
-			color: var(--text-ink-500) !important;
-		}
-	}
-
-	& .ant-input::placeholder {
-		color: var(--levels-l3-foreground, #747b8b) !important;
-
-		.lightMode & {
-			color: var(--text-neutral-light-200, #80828d) !important;
-		}
-	}
-
-	& .ant-input:focus,
-	& .ant-input-password:focus,
-	& .ant-select-focused .ant-select-selector {
-		border-color: var(--semantic-primary-background, #4e74f8) !important;
-		box-shadow: none !important;
 	}
 `;
 
 export const ParentContainer = styled.div`
 	width: 100%;
-	display: flex;
-	flex-direction: column;
 `;

frontend/src/container/LogsExplorerList/ColumnView/ColumnView.tsx

@@ -47,6 +47,7 @@ function ColumnView({
 		onSetActiveLog: handleSetActiveLog,
 		onClearActiveLog: handleClearActiveLog,
 		onAddToQuery: handleAddToQuery,
+		onGroupByAttribute: handleGroupByAttribute,
 	} = useActiveLog();
 
 	const [showActiveLog, setShowActiveLog] = useState<boolean>(false);
@@ -270,6 +271,7 @@ function ColumnView({
 					onClose={handleLogDetailClose}
 					onAddToQuery={handleAddToQuery}
 					onClickActionItem={handleAddToQuery}
+					onGroupByAttribute={handleGroupByAttribute}
 				/>
 			)}
 		</div>

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -58,7 +58,7 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
+		{ isLoading, tableViewProps, infitiyTableProps },
 		ref,
 	): JSX.Element | null {
 		const {
@@ -72,6 +72,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 			onSetActiveLog,
 			onClearActiveLog,
 			onAddToQuery,
+			onGroupByAttribute,
 		} = useActiveLog();
 
 		const { dataSource, columns } = useTableView({
@@ -186,7 +187,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						onClose={handleClearActiveContextLog}
 						onAddToQuery={handleAddToQuery}
 						selectedTab={VIEW_TYPES.CONTEXT}
-						handleChangeSelectedView={handleChangeSelectedView}
+						onGroupByAttribute={onGroupByAttribute}
 					/>
 				)}
 				<LogDetail
@@ -195,7 +196,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 					onClose={onClearActiveLog}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
+					onGroupByAttribute={onGroupByAttribute}
 				/>
 			</>
 		);

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -1,5 +1,4 @@
 import { UseTableViewProps } from 'components/Logs/TableView/types';
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -7,5 +6,4 @@ export type InfinityTableProps = {
 	infitiyTableProps?: {
 		onEndReached: (index: number) => void;
 	};
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };

frontend/src/container/LogsExplorerList/LogsExplorerList.interfaces.ts

@@ -1,4 +1,3 @@
-import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import APIError from 'types/api/error';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -13,5 +12,4 @@ export type LogsExplorerListProps = {
 	error?: Error | APIError;
 	isFilterApplied: boolean;
 	isFrequencyChartVisible: boolean;
-	handleChangeSelectedView?: ChangeViewFunctionType;
 };

frontend/src/container/LogsExplorerList/index.tsx

@@ -48,7 +48,6 @@ function LogsExplorerList({
 	isError,
 	error,
 	isFilterApplied,
-	handleChangeSelectedView,
 }: LogsExplorerListProps): JSX.Element {
 	const ref = useRef<VirtuosoHandle>(null);
 	const { activeLogId } = useCopyLogLink();
@@ -57,6 +56,7 @@ function LogsExplorerList({
 		activeLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 		onSetActiveLog,
 	} = useActiveLog();
 
@@ -100,7 +100,6 @@ function LogsExplorerList({
 						linesPerRow={options.maxLines}
 						selectedFields={selectedFields}
 						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				);
 			}
@@ -115,13 +114,11 @@ function LogsExplorerList({
 					activeLog={activeLog}
 					fontSize={options.fontSize}
 					linesPerRow={options.maxLines}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			);
 		},
 		[
 			activeLog,
-			handleChangeSelectedView,
 			onAddToQuery,
 			onSetActiveLog,
 			options.fontSize,
@@ -152,10 +149,10 @@ function LogsExplorerList({
 						activeLogIndex,
 					}}
 					infitiyTableProps={{ onEndReached }}
-					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			);
 		}
+
 		function getMarginTop(): string {
 			switch (options.fontSize) {
 				case FontSize.SMALL:
@@ -198,7 +195,6 @@ function LogsExplorerList({
 		onEndReached,
 		getItemContent,
 		selectedFields,
-		handleChangeSelectedView,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {
@@ -277,8 +273,8 @@ function LogsExplorerList({
 						log={activeLog}
 						onClose={onClearActiveLog}
 						onAddToQuery={onAddToQuery}
+						onGroupByAttribute={onGroupByAttribute}
 						onClickActionItem={onAddToQuery}
-						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				</>
 			)}

frontend/src/container/LogsExplorerViews/index.tsx

@@ -447,9 +447,8 @@ function LogsExplorerViewsContainer({
 					)}
 
 				<div className="logs-explorer-views-type-content">
-					{showLiveLogs && (
-						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
-					)}
+					{showLiveLogs && <LiveLogs />}
+
 					{selectedPanelType === PANEL_TYPES.LIST && !showLiveLogs && (
 						<LogsExplorerList
 							isLoading={isLoading}
@@ -461,9 +460,9 @@ function LogsExplorerViewsContainer({
 							isError={isError}
 							error={error as APIError}
 							isFilterApplied={!isEmpty(listQuery?.filters?.items)}
-							handleChangeSelectedView={handleChangeSelectedView}
 						/>
 					)}
+
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
 							<div className="time-series-view-container-header">
@@ -484,6 +483,7 @@ function LogsExplorerViewsContainer({
 							/>
 						</div>
 					)}
+
 					{selectedPanelType === PANEL_TYPES.TABLE && !showLiveLogs && (
 						<LogsExplorerTable
 							data={

frontend/src/container/LogsExplorerViews/tests/LogsExplorerPagination.test.tsx

@@ -518,15 +518,15 @@ describe('Logs Explorer -> stage and run query', () => {
 		const initialStart = initialPayload.start;
 		const initialEnd = initialPayload.end;
 
-		// Click the Run Query button
+		// Click the Stage & Run Query button
 		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		await user.click(
 			screen.getByRole('button', {
-				name: /run query/i,
+				name: /stage & run query/i,
 			}),
 		);
 
-		// Wait for additional API calls to be made after clicking Run Query
+		// Wait for additional API calls to be made after clicking Stage & Run Query
 		await waitFor(
 			() => {
 				expect(capturedPayloads.length).toBeGreaterThan(1);

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -89,6 +89,7 @@ function LogsPanelComponent({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 	} = useActiveLog();
 
 	const handleRow = useCallback(
@@ -170,6 +171,7 @@ function LogsPanelComponent({
 				onClose={onClearActiveLog}
 				onAddToQuery={onAddToQuery}
 				onClickActionItem={onAddToQuery}
+				onGroupByAttribute={onGroupByAttribute}
 				isListViewPanel
 				listViewPanelSelectedFields={widget?.selectedLogFields}
 			/>

frontend/src/container/LogsTable/index.tsx

@@ -38,6 +38,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 		activeLog,
 		onClearActiveLog,
 		onAddToQuery,
+		onGroupByAttribute,
 		onSetActiveLog,
 	} = useActiveLog();
 
@@ -156,6 +157,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 				selectedTab={VIEW_TYPES.OVERVIEW}
 				log={activeLog}
 				onClose={onClearActiveLog}
+				onGroupByAttribute={onGroupByAttribute}
 				onAddToQuery={onAddToQuery}
 				onClickActionItem={onAddToQuery}
 			/>

frontend/src/container/MetricsExplorer/Explorer/__tests__/utils.test.tsx

@@ -80,14 +80,14 @@ describe('splitQueryIntoOneChartPerQuery', () => {
 		expect(result[2].builder.queryData).toHaveLength(2); // 2 disabled queries
 		expect(result[2].builder.queryData[0].disabled).toBe(true);
 		expect(result[2].builder.queryData[1].disabled).toBe(true);
-		expect(result[2].unit).toBe('');
+		expect(result[2].unit).toBeUndefined();
 		// Verify query 4 has the correct data
 		expect(result[3].builder.queryFormulas).toHaveLength(1);
 		expect(result[3].builder.queryFormulas[0]).toEqual(MOCK_FORMULA_DATA);
 		expect(result[3].builder.queryData).toHaveLength(2); // 2 disabled queries
 		expect(result[3].builder.queryData[0].disabled).toBe(true);
 		expect(result[3].builder.queryData[1].disabled).toBe(true);
-		expect(result[3].unit).toBe('');
+		expect(result[3].unit).toBeUndefined();
 	});
 });
 

frontend/src/container/MySettings/LicenseSection/LicenseSection.styles.scss

@@ -1,84 +0,0 @@
-.license-section {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	.license-section-header {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-
-		.license-section-title {
-			color: #fff;
-			font-family: Inter;
-			font-size: 16px;
-			font-style: normal;
-			line-height: 24px;
-			letter-spacing: -0.08px;
-		}
-	}
-
-	.license-section-content {
-		display: flex;
-		flex-direction: column;
-		gap: 16px;
-
-		.license-section-content-item {
-			padding: 16px;
-			border: 1px solid var(--Slate-500, #161922);
-			background: var(--Ink-400, #121317);
-			border-radius: 3px;
-
-			.license-section-content-item-title-action {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				gap: 8px;
-
-				color: var(--Vanilla-300, #eee);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: normal;
-				letter-spacing: -0.07px;
-
-				margin-bottom: 8px;
-			}
-
-			.license-section-content-item-description {
-				color: var(--Vanilla-400, #c0c1c3);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-}
-
-.lightMode {
-	.license-section {
-		.license-section-header {
-			.license-section-title {
-				color: var(--bg-ink-400);
-			}
-		}
-
-		.license-section-content {
-			.license-section-content-item {
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-
-				.license-section-content-item-title-action {
-					color: var(--bg-ink-400);
-				}
-
-				.license-section-content-item-description {
-					color: var(--bg-ink-300);
-				}
-			}
-		}
-	}
-}

frontend/src/container/MySettings/LicenseSection/LicenseSection.tsx

@@ -1,65 +0,0 @@
-import './LicenseSection.styles.scss';
-
-import { Button } from '@signozhq/button';
-import { Typography } from 'antd';
-import { useNotifications } from 'hooks/useNotifications';
-import { Copy } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
-import { useCopyToClipboard } from 'react-use';
-
-function LicenseSection(): JSX.Element | null {
-	const { activeLicense } = useAppContext();
-	const { notifications } = useNotifications();
-	const [, handleCopyToClipboard] = useCopyToClipboard();
-
-	const getMaskedKey = (key: string): string => {
-		if (!key || key.length < 4) return key || 'N/A';
-		return `${key.substring(0, 2)}********${key
-			.substring(key.length - 2)
-			.trim()}`;
-	};
-
-	const handleCopyKey = (text: string): void => {
-		handleCopyToClipboard(text);
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
-	};
-
-	if (!activeLicense?.key) {
-		return <></>;
-	}
-
-	return (
-		<div className="license-section">
-			<div className="license-section-header">
-				<div className="license-section-title">License</div>
-			</div>
-
-			<div className="license-section-content">
-				<div className="license-section-content-item">
-					<div className="license-section-content-item-title-action">
-						<span>License key</span>
-						<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-							<Typography.Text code>{getMaskedKey(activeLicense.key)}</Typography.Text>
-							<Button
-								variant="ghost"
-								aria-label="Copy license key"
-								data-testid="license-key-copy-btn"
-								onClick={(): void => handleCopyKey(activeLicense.key)}
-							>
-								<Copy size={14} />
-							</Button>
-						</span>
-					</div>
-
-					<div className="license-section-content-item-description">
-						Your SigNoz license key.
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default LicenseSection;

frontend/src/container/MySettings/LicenseSection/index.ts

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