fix: guide user on empty external api monitoring page

Fixes #3703

.devenv/docker/clickhouse/compose.yaml

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

.github/CODEOWNERS

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

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

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

.github/workflows/gor-signoz.yaml

@@ -37,10 +37,6 @@ jobs:
           echo 'APPCUES_APP_ID="${{ secrets.APPCUES_APP_ID }}"' >> .env
           echo 'PYLON_IDENTITY_SECRET="${{ secrets.PYLON_IDENTITY_SECRET }}"' >> .env
           echo 'DOCS_BASE_URL="https://signoz.io"' >> .env
-      - name: node-setup
-        uses: actions/setup-node@v5
-        with:
-          node-version: "22"
       - name: build-frontend
         run: make js-build
       - name: upload-frontend-artifact

.github/workflows/integrationci.yaml

@@ -46,7 +46,6 @@ jobs:
           - ttl
           - preference
           - logspipelines
-          - alerts
         sqlstore-provider:
           - postgres
           - sqlite

.gitignore

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

README.md

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

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.110.1
+    image: signoz/signoz:v0.108.0
     command:
       - --config=/root/config/prometheus.yml
     ports:
@@ -209,7 +209,7 @@ services:
       retries: 3
   otel-collector:
     !!merge <<: *db-depend
-    image: signoz/signoz-otel-collector:v0.129.13
+    image: signoz/signoz-otel-collector:v0.129.12
     command:
       - --config=/etc/otel-collector-config.yaml
       - --manager-config=/etc/manager-config.yaml
@@ -233,7 +233,7 @@ services:
       - signoz
   schema-migrator:
     !!merge <<: *common
-    image: signoz/signoz-schema-migrator:v0.129.13
+    image: signoz/signoz-schema-migrator:v0.129.12
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/contributing/onboarding.md

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

ee/query-service/anomaly/params.go

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

ee/query-service/rules/anomaly.go

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

ee/query-service/rules/anomaly_test.go

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

frontend/.eslintrc.js

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

frontend/package.json

@@ -105,7 +105,6 @@
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
-		"immer": "11.1.3",
 		"jest": "^27.5.1",
 		"js-base64": "^3.7.2",
 		"less": "^4.1.2",

frontend/public/Logos/groq.svg

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

frontend/public/Logos/langtrace.svg

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

frontend/public/Logos/traceloop.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" preserveAspectRatio="xMidYMid meet">
-  <image width="256" height="256" href="data:image/webp;base64,UklGRjoOAABXRUJQVlA4WAoAAAAQAAAA/wAA/wAAQUxQSLsGAAAB8IZtE+q22baNJFsOrKIpqC01lLw1jOWayszMTGFmZo6s0nWVmQzXFeb4KoUjwwVO1BguV3HBDIL5YZqZNda/bIqICYCw/8P+DxvYmulyt2AX/ce+2UkyIm5/v8iHWra4XZnWDt1ciF178NP+Au7/H2pbeHN7did2/dV3cfX4HDV22tuw52AoGHicp8c+1DnH3sqJoaH/OpavUWsnANyEoeKvPRmeQL1vAmthyIBT6ezlihVaMzB0rLCRPYKap2eFEHg12beqZblDiclkv6nmbg4l3qEyUPVmDCW/pOqnGwZDifepLtAt6AklFlBBnWqer0OJu8j2qPb1UyFEw7lkk1V7yqgKHf4G5PGNilUZMClkaEygg+WKTQKI/DlUmACMRrFaP0cCQL/S0OADCwdcekap0n7QekBRKOC0AW+KR6WiAdC2scHf1VU+COwXvK+Pf4MBHUxaW9qFBX58tTtITMmqVKV0bRJ01nHDXV3z7aPOBbkJaXdpeYMDwv4/C6GR+uJYLV/OPF+MdeCjY8W/ekusnJQHxtK/mGp0JiPXh5oGdtxlkeBY5UVz5j8aISFmYSny+nIzOtJnM+p7IJnNNr0RzXtsMN9LNShwc592RnhR49oMph7/RFM3PcBk/whleke0MbAadW66jiVyG5o8cBeL5TOUWj0QAIwS1Pq3OI7laPraJI7xKLfEAFiOen/IMNBvPtzG0L9BEC6H6AbFgol0X6GGY+g2ouSG6NdQ80VkF/pUeJfM/qcofC1PtYNkD6CKZWTXouy8MtVaIqgW64AxVG8KK0Pd46neV2Iw1VJh2juoPtJtjbR63XpQOZVIppohrP6gauVA/YYOTRFUDwo7uEa1T8kG6bAbqHsJWzNKtTvJoEiFF8hgj6xRkK/Yf6x0L2pwpjvdnaLyAUYE9LoF6COOKPAMMG4XFBgBANPU2gCcl1ab7gvg7OuVMw1ab1LqcxsLpNabbEd3Fhh6RsomaHuCT6HgQhswDykxlcsOzJccF+GbAO1fnq3O7pHA32P+X6b5MRX47ZOq+LIvhw4nTMx2e7Qsypt5Ocjs+dDffjzlkV68dd4wkBl1tyv/pIfcnT0xAcL+P9twwsRst4f8ZL7rnighQ+duLvaI//FvjxhCLpuZW+TR0p09MaFjl2cje9Vku4AbfkSz/rWop4DhO1Hb7Ms7MMGHEo9fwmXfiGY+NYzLuiCI+vomtLMJhf4+nCdqG5q7IZXH9gnqvKmNaSjW24/lUzR7bQrLWtR6GgCMCMjBnRxPovmPRzDciGoHRgDko+S76Lr/XwF8ic5aqBfmwygUfYDuOdTwv3S3o+aj1sjCvmTbVcBhZB+ptuagsIepbI06jCX7VbWD9cLmUF2EOrqouqPq9Sh8LdVgJT6n6qOb+JVUVyjxAVW0cmXCxlFdqMQyKmuzamV5wq6ngtM6PEQFP6uW95qs6iiyt1TwxZLNU+216AZRm4B8pArfAHmCX7GGaFguqdFBB/9QIDCIDv6m2HIAo0TQRGBMrDXfCmCMrVSrxACAgdVivrRwwB0Bs+2I5IBrGpSqHgitR3iFfGoH3vuazLWlB/CmV6vkHQFt99ksoeY1C3APPmKipuk24E48oNDmPtDBjFwfU9nCWBBoe/iASbxrHCDQctf2gCq+3AzopJH64lj6B1MsIDX2llfHin9soBWknpfx8lgtX0w1IOz/sxA6briL/LbhhhzrxZl3aXltX0GxV90l/gZHp5LWliKrf++zdhGj3/8DNT251CEiZnYBmrJ0bVJHjA1+5D91M1+fb1HdlsVRbLZJdWha/wajnQFFKHO+hWmMFzU+GMd07lY0ddGANvqVotQVPCMbUOeiGJYe/0KTl/YDgMifUe6jHLEVqPU2C8ff0fQ/RwJMQsF/RDN8gHo/zZCJCk4Co0oSLqG7LKjY6Qi6nzSoMp5C0ZU2spWo+a1kQ1DFp76WhaPJilVzkc3U4WuPsNepzkHVD5J9r4MnKGw5VYpulWSHdQii8LVUg3X7i+y4DtgsbAFVsm6nyX7Wodkt7EmqSL9qu8k+1sGdJSyJCvJVW0D2kg5ZGbKOAfk41QaT9Q6okG4tFPUU3fm1iu0B+s81KLTCTZKORdDBJL2CoxgSGhW4CQCcchquAEbbHrUWAOcL5nMCANhzpLTcCqzRJ5T6yMICS82WY28FdqeMymuB+fzNKi22APM4n6mcdmj35kK+lndjgN3yfIU6B68B/kF7zFN4M3TUmulytzB4t0/pCyLtD3z8X78ajUc2XAMyhy8/WCevxe3KtELY/2H/hw0OAFZQOCBYBwAAcDIAnQEqAAEAAT5tMpJFpCOhmApkyEAGxLE3cLO/I/8A/AD9APeogBDf+wH8n/gH4AfoB/D8D/bUGJv3b8rvGLBD2z8kv6L+13LBGO/UZ+8+1n5jf2T+j+wDzCP0i/03UP8wn6r/83/Ye+Z/jv7B7I/13/ID5AP6p/eP/Z7WHqRft57AH8g/2XpTfsZ/3fkf/a/9xvgd/XX/4ewB6AHVf9AP4B+AH6V0/6X/37XCnfIaNJCv3UeIbyMN5GG7FGGXSbcdew8aH+Bc8jPujAWD5wlI0vGluc15OXPagLZ8UxFfBAlngGwyAgncED6mebGS9plnBjVRDpz0QjHI7NbLJCxCvFKIDQxTIXTAX5W3acocmvQ/OXAfnjdGNjAFiZXJq+/TbBzGEHdg+muQ+hFFPR2JnvUSNpSYiGR57j5nlFet8+EyOPVmbGlR6r47DqM+38DTtDHOHz36jaDYexg9qHpxk3+59nQC1SOzy4m4u34GLkKXdKCpMehdu53FcSHUZwi37E2m0zNsuu+Q0aSFfuo8Q3kYbyMN5GG6AAD8hoAAAAAAAtSatOsx3/xQJLZJVNwvp3oF/sWdRuskPj8s391kh8d5sIy+9WFVihdPhMB/7oNptL8qeszrOKuQiABZ2qtQOEHxZqWJnio26h/5Vo4krKGOO0sEz6Hv5rWo4fY5j+Zkip4N2flcerdMsQa4aobjtm8EeilMPd1RKe3T2L0a/Cv9h3t065fg6SjwXyBvg2hYN5RVMz/+NTMiir38FhGGkGCU+n7zH7a6z+ZsKOKACwNxEF24gJYE5Z8YDT/LDnQYzNPs7fnw0DWqqrx34u1n8kIsG90iig+vnPhkaVDzEnlMOItgwAov/p/WcPmzTS/ESKniY3/MPn06vQ7wic6l2jPoEyPrpPntLEOo7YMH2DlbEeYrf53exjRiZcoP/Ct0vnxkiHQpZk7RAgR6cllYgknBYToYbOnOoJ31iIPn+tjP9Wi1AD4rjN8FcbwzXiiXhq7Gpi/P39FnE7kEHxM3vJ6IfeN8kET6YhP9+bS4Ndq9z76kggowPI6pCeXTbktqMjiZBKP512NVTKWySMPWK2cDgYHLavMlfOsRt+ejI3anQJ8WOB5Sj4jg+PmmRO0YbrVrKJlMyW9DQhQxUYSb68hxwsa0pT95muv26wX/UbDfNNZqiY+FY3E3IrOLBfx/PvkZag+Z1tU15DmS4oWxI1MZPiItkOO5brQrLJ4gEX/aqDZVYH5qQqEYAdzEawMyn+D8EIsnVFuZBNbvILVTzHSwk5p+TPibb4Bij8La/IJ3+b8zP3KyRwEs7cd4bm+Kk65mOeRHpY//wUWtOhkyo+qCpkP9B+BZwjtgg93EV8KAePfDCEvQd6szMwcXg364KeljltsktN3CEwdKtH5sTvqV4jy9/ySVzVng2aUX/rOq5NjhT5vpK5nuKGWPdhY6RWG/JJfzsRE9JFNVJDLuZWWPyOhtK52DWPq8KkvizSdW1HXse/jEbnWBMMY4QwuO7eYDSR462HFk4zWyEZKugT+Uop5KD4KF+4xpfPgWfPcD4doS/+fEI2HjOrl8ctTT0EKp255SHoe3jdEi6QVMzZoAJS4j6vntijLltNjzgznBcSIrdKAgCdZjX9+VDrtqECJvxN3Z0S2oEoVZf2tji5V6DXamlubRVYpvsgB0DK/ACFIRFc4ggMNRpcbv9wYeN/ch3k6B5RkfzyDTkXb+RkS8ZLdbq1+tq/I8eK9g1/wuAZNhQkc5QmjUYgl3QAo86JmxC4zO0au6U/fSE11r16YB3WkeheQcJUKCbRTGS8OOs30DN7fpcxuuyEU3yM8HEqoyjd1rdQAi9K6LdRvQyLh3A9JmvA1EAjN8i2uLOeZi81BhiwAsZle61AOM78/l7yxuHy40ECHE9YostmdueER4HTWcMMGg0X8eJcujrbN1S4qyGxITPLghrKViISKTyPZ5qSo6EwnWhwA+XrAtKvtNVyS5f2iWAFmfHlQxfB+NXNwhxPwQ2akkMg3wgSifNE4lDRelowqblVu+ByzHBWsJkemp5mw2u/1Wl+RmpkyV7U5cIjxTkKyprg12fSsb7L3rIIHxd4ZgDArHDgESQGwDGC+iMlFrZKAfhcSUxuvPko5fkWdmQ/+oI2RMP4/d0h4/foef6PFHier1x+nRlT+0ZjBnE6Z32aVtbLbEPc+Z/EgAGsRF1RpteYADfJzufleSz65a2AZGpwwvDlrHbL9WdGx4Ww776VnxhYV27x6KH0biDB/mTxsIwv4zQQiKkDjcibMmzgp2PvZ3foNNj+SEDx11+lqzPpayPGMBRlQgr9yVhV93j2rzdy+mYvCoHNBVmA6kubmaB2ilYOI/AMpq6CFrzpkL8UJoedOwyLxtwJIWPjP+a++KkMbgYxBuo7dViu8XMjZ9jD1lMMABEIMT5fvOnzyyoKUFfnseMxeoFZjuySXC9vxk95ivyfGaZgXSPDdaiQAGYrj9aBUAAAAAAAA=" />
-</svg>

frontend/src/AppRoutes/Private.tsx

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

frontend/src/AppRoutes/index.tsx

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/ReactI18/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -4,6 +4,7 @@
  * * regenerate with 'yarn generate:api'
  * SigNoz
  */
+import { useMutation, useQuery } from 'react-query';
 import type {
 	InvalidateOptions,
 	MutationFunction,
@@ -15,9 +16,7 @@ import type {
 	UseQueryOptions,
 	UseQueryResult,
 } from 'react-query';
-import { useMutation, useQuery } from 'react-query';
 
-import { GeneratedAPIInstance } from '../../../index';
 import type {
 	AcceptInvite201,
 	ChangePasswordPathParameters,
@@ -38,8 +37,8 @@ import type {
 	RenderErrorResponseDTO,
 	RevokeAPIKeyPathParameters,
 	TypesChangePasswordRequestDTO,
-	TypesPostableAcceptInviteDTO,
 	TypesPostableAPIKeyDTO,
+	TypesPostableAcceptInviteDTO,
 	TypesPostableInviteDTO,
 	TypesPostableResetPasswordDTO,
 	TypesStorableAPIKeyDTO,
@@ -49,6 +48,8 @@ import type {
 	UpdateUserPathParameters,
 } from '../sigNoz.schemas';
 
+import { GeneratedAPIInstance } from '../../../index';
+
 type AwaitedInput<T> = PromiseLike<T> | T;
 
 type Awaited<O> = O extends AwaitedInput<infer T> ? T : never;

frontend/src/api/index.ts

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

frontend/src/api/plannedDowntime/deleteDowntimeSchedule.ts

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

frontend/src/api/plannedDowntime/getAllDowntimeSchedules.ts

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

frontend/src/components/AlertDetailsFilters/Filters.tsx

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

frontend/src/components/AppLoading/AppLoading.tsx

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

frontend/src/components/AuthError/AuthError.tsx

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

frontend/src/components/AuthPageContainer/AuthFooter.tsx

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

frontend/src/components/AuthPageContainer/AuthHeader.tsx

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

frontend/src/components/AuthPageContainer/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/components/CeleryTask/useCeleryFilterOptions.ts

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

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

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

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

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

frontend/src/components/ChangelogModal/ChangelogModal.tsx

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

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

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

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

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

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

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

frontend/src/components/Common/ErrorStateComponent.tsx

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

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

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

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

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

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

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

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

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

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

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

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

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

frontend/src/components/DropDown/DropDown.tsx

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

frontend/src/components/Editor/index.tsx

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

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

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

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

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

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.tsx

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

frontend/src/components/ErrorInPlace/ErrorInPlace.tsx

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

frontend/src/components/ErrorModal/ErrorModal.tsx

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

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

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

frontend/src/components/ErrorPopover/ErrorPopover.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { ReactNode } from 'react';
 import { Popover, PopoverProps } from 'antd';
+import { ReactNode } from 'react';
 
 interface ErrorPopoverProps extends Omit<PopoverProps, 'content'> {
 	/** Content to display in the popover */

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
 import {
 	DeleteOutlined,
 	MoreOutlined,
@@ -31,6 +29,8 @@ import { useUpdateView } from 'hooks/saveViews/useUpdateView';
 import useErrorNotification from 'hooks/useErrorNotification';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { popupContainer } from 'utils/selectPopupContainer';
 

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,10 +1,10 @@
-import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
+import { MouseEvent, useCallback } from 'react';
 
 import { MenuItemContainer } from './styles';
 import { MenuItemLabelGeneratorProps } from './types';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
 import { Card, Form, Input, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { useTranslation } from 'react-i18next';
 
 import { SaveButton } from './styles';
 import { SaveViewFormProps, SaveViewWithNameProps } from './types';

frontend/src/components/ExplorerCard/test/SaveViewWithName.test.tsx

@@ -1,6 +1,6 @@
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { fireEvent, render } from '@testing-library/react';
 import ROUTES from 'constants/routes';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { DataSource } from 'types/common/queryBuilder';
 
 import SaveViewWithName from '../SaveViewWithName';

frontend/src/components/ExplorerCard/types.ts

@@ -1,9 +1,9 @@
-import { UseMutateAsyncFunction } from 'react-query';
 import { FormInstance } from 'antd';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { AxiosResponse } from 'axios';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { OptionsQuery } from 'container/OptionsMenu/types';
+import { UseMutateAsyncFunction } from 'react-query';
 import { ICompositeMetricQuery } from 'types/api/alerts/compositeQuery';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import {

frontend/src/components/Graph/index.tsx

@@ -1,12 +1,3 @@
-import {
-	forwardRef,
-	memo,
-	useCallback,
-	useEffect,
-	useImperativeHandle,
-	useMemo,
-	useRef,
-} from 'react';
 import {
 	_adapters,
 	BarController,
@@ -33,6 +24,15 @@ import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import isEqual from 'lodash-es/isEqual';
 import { useTimezone } from 'providers/Timezone';
+import {
+	forwardRef,
+	memo,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+} from 'react';
 
 import { hasData } from './hasData';
 import { legend } from './Plugin';

frontend/src/components/Graph/types.ts

@@ -1,4 +1,3 @@
-import { ForwardedRef, ReactNode } from 'react';
 import {
 	ActiveElement,
 	Chart,
@@ -8,6 +7,7 @@ import {
 	ChartType,
 	TimeUnit,
 } from 'chart.js';
+import { ForwardedRef, ReactNode } from 'react';
 
 import {
 	dragSelectPluginId,

frontend/src/components/Graph/utils.ts

@@ -1,10 +1,10 @@
-import { MutableRefObject } from 'react';
 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';
 import dayjs from 'dayjs';
+import { MutableRefObject } from 'react';
 
 import { getAxisLabelColor } from './helpers';
 import {

frontend/src/components/Graph/xAxisConfig.ts

@@ -1,6 +1,6 @@
+import { Chart, TimeUnit } from 'chart.js';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { Chart, TimeUnit } from 'chart.js';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { handleContactSupport } from 'pages/Integrations/utils';
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 	const [activeTab, setActiveTab] = useState('feedback');

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -1,16 +1,16 @@
-import { useCallback, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import './HeaderRightSection.styles.scss';
+
 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Globe, Inbox, SquarePen } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
 import ShareURLModal from './ShareURLModal';
 
-import './HeaderRightSection.styles.scss';
-
 interface HeaderRightSectionProps {
 	enableAnnouncements: boolean;
 	enableShare: boolean;

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -1,7 +1,3 @@
-import { useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Switch, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -10,6 +6,10 @@ import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 // Mock dependencies before imports
-import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { handleContactSupport } from 'pages/Integrations/utils';
+import { useLocation } from 'react-router-dom';
 
 import FeedbackModal from '../FeedbackModal';
 

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -2,11 +2,11 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable react/jsx-props-no-spreading */
 // Mock dependencies before imports
-import { useLocation } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useLocation } from 'react-router-dom';
 
 import HeaderRightSection from '../HeaderRightSection';
 

frontend/src/components/HeaderRightSection/__tests__/ShareURLModal.test.tsx

@@ -1,13 +1,13 @@
 // Mock dependencies before imports
-import { useSelector } from 'react-redux';
-import { matchPath, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
+import { useSelector } from 'react-redux';
+import { matchPath, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
 
 import ShareURLModal from '../ShareURLModal';
 

frontend/src/components/HostMetricsDetail/Containers/Containers.tsx

@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
+import './Containers.styles.scss';
+
 import { Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
 
-import './Containers.styles.scss';
-
 const { Text } = Typography;
 
 function Containers(): JSX.Element {

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

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import './HostMetricTraces.styles.scss';
+
 import logEvent from 'api/common/logEvent';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -21,6 +21,8 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
@@ -28,8 +30,6 @@ import { VIEWS } from '../constants';
 import { getHostTracesQueryPayload, selectedColumns } from './constants';
 import { getListColumns } from './utils';
 
-import './HostMetricTraces.styles.scss';
-
 interface Props {
 	timeRange: {
 		startTime: number;

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { useSearchParams } from 'react-router-dom-v5-compat';
+import './HostMetricsDetail.styles.scss';
+
 import { Color, Spacing } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -38,6 +37,9 @@ import {
 	ScrollText,
 	X,
 } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom-v5-compat';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
@@ -58,8 +60,6 @@ import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailed
 import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
 import Metrics from './Metrics/Metrics';
 import Processes from './Processes/Processes';
-
-import './HostMetricsDetail.styles.scss';
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function HostMetricsDetails({
 	host,

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

@@ -1,4 +1,5 @@
-import { useMemo } from 'react';
+import './HostMetricLogs.styles.scss';
+
 import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {
@@ -6,14 +7,13 @@ import {
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useMemo } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { VIEWS } from '../constants';
 import HostMetricsLogs from './HostMetricsLogs';
 
-import './HostMetricLogs.styles.scss';
-
 interface Props {
 	timeRange: {
 		startTime: number;

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

@@ -1,7 +1,6 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import './HostMetricLogs.styles.scss';
+
 import { Card } from 'antd';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -11,14 +10,15 @@ import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useCallback, useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Virtuoso } from 'react-virtuoso';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 import { getHostLogsQueryPayload } from './constants';
 import NoLogsContainer from './NoLogsContainer';
 
-import './HostMetricLogs.styles.scss';
-
 interface Props {
 	timeRange: {
 		startTime: number;