fix: redirect to docs on clicking alert setup guide in create alert page

.github/workflows/docs.yml

@@ -1,83 +0,0 @@
-name: "Update PR labels and Block PR until related docs are shipped for the feature"
-
-on:
-  pull_request:
-    branches:
-      - develop
-    types: [opened, edited, labeled, unlabeled]
-
-permissions:
-  pull-requests: write
-  contents: read
-
-jobs:
-  docs_label_check:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check PR Title and Manage Labels
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const prTitle = context.payload.pull_request.title;
-            const prNumber = context.payload.pull_request.number;
-            const owner = context.repo.owner;
-            const repo = context.repo.repo;
-
-            // Fetch the current PR details to get labels
-            const pr = await github.rest.pulls.get({
-              owner,
-              repo,
-              pull_number: prNumber
-            });
-
-            const labels = pr.data.labels.map(label => label.name);
-
-            if (prTitle.startsWith('feat:')) {
-              const hasDocsRequired = labels.includes('docs required');
-              const hasDocsShipped = labels.includes('docs shipped');
-              const hasDocsNotRequired = labels.includes('docs not required');
-
-              // If "docs not required" is present, skip the checks
-              if (hasDocsNotRequired && !hasDocsRequired) {
-                console.log("Skipping checks due to 'docs not required' label.");
-                return; // Exit the script early
-              }
-              
-              // If "docs shipped" is present, remove "docs required" if it exists
-              if (hasDocsShipped && hasDocsRequired) {
-                await github.rest.issues.removeLabel({
-                  owner,
-                  repo,
-                  issue_number: prNumber,
-                  name: 'docs required'
-                });
-                console.log("Removed 'docs required' label.");
-              }
-
-              // Add "docs required" label if neither "docs shipped" nor "docs required" are present
-              if (!hasDocsRequired && !hasDocsShipped) {
-                await github.rest.issues.addLabels({
-                  owner,
-                  repo,
-                  issue_number: prNumber,
-                  labels: ['docs required']
-                });
-                console.log("Added 'docs required' label.");
-              }
-            }
-
-            // Fetch the updated labels after any changes
-            const updatedPr = await github.rest.pulls.get({
-              owner,
-              repo,
-              pull_number: prNumber
-            });
-
-            const updatedLabels = updatedPr.data.labels.map(label => label.name);
-            const updatedHasDocsRequired = updatedLabels.includes('docs required');
-            const updatedHasDocsShipped = updatedLabels.includes('docs shipped');
-
-            // Block PR if "docs required" is still present and "docs shipped" is missing
-            if (updatedHasDocsRequired && !updatedHasDocsShipped) {
-              core.setFailed("This PR requires documentation. Please remove the 'docs required' label and add the 'docs shipped' label to proceed.");
-            }

.github/workflows/staging-deployment.yaml

@@ -38,7 +38,6 @@ jobs:
           export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
           export OTELCOL_TAG="main"
           export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
-          export KAFKA_SPAN_EVAL="true"
           docker system prune --force
           docker pull signoz/signoz-otel-collector:main
           docker pull signoz/signoz-schema-migrator:main

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.111.5
+    image: signoz/signoz-otel-collector:0.102.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -214,6 +214,7 @@ services:
       - /:/hostfs:ro
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}},dockerswarm.service.name={{.Service.Name}},dockerswarm.task.name={{.Task.Name}}
+      - DOCKER_MULTI_NODE_CLUSTER=false
       - LOW_CARDINAL_EXCEPTION_GROUPING=false
     ports:
       # - "1777:1777"     # pprof extension
@@ -237,7 +238,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.111.5
+      image: signoz/signoz-schema-migrator:0.102.10
       deploy:
         restart_policy:
           condition: on-failure

deploy/docker-swarm/clickhouse-setup/otel-collector-config.yaml

@@ -131,6 +131,7 @@ processors:
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/signoz_traces
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/signoz_metrics
@@ -141,6 +142,7 @@ exporters:
   # logging: {}
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
     use_new_schema: true
 extensions:

deploy/docker/clickhouse-setup/docker-compose-core.yaml

@@ -69,7 +69,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.102.10}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -84,7 +84,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.111.5
+    image: signoz/signoz-otel-collector:0.102.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",

deploy/docker/clickhouse-setup/docker-compose-minimal.yaml

@@ -213,7 +213,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator-sync:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.102.10}
     container_name: otel-migrator-sync
     command:
       - "sync"
@@ -228,7 +228,7 @@ services:
       #   condition: service_healthy
 
   otel-collector-migrator-async:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.102.10}
     container_name: otel-migrator-async
     command:
       - "async"
@@ -245,7 +245,7 @@ services:
       #   condition: service_healthy
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.102.12}
     container_name: signoz-otel-collector
     command:
       [
@@ -262,6 +262,7 @@ services:
       - /:/hostfs:ro
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
+      - DOCKER_MULTI_NODE_CLUSTER=false
       - LOW_CARDINAL_EXCEPTION_GROUPING=false
     ports:
       # - "1777:1777"     # pprof extension

deploy/docker/clickhouse-setup/docker-compose.testing.yaml

@@ -191,7 +191,6 @@ services:
       - GODEBUG=netdns=go
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-standalone-amd
-      - KAFKA_SPAN_EVAL=${KAFKA_SPAN_EVAL:-false}
     restart: on-failure
     healthcheck:
       test:
@@ -220,7 +219,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.111.5}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.102.10}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -234,7 +233,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.111.5}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.102.12}
     container_name: signoz-otel-collector
     command:
       [
@@ -251,6 +250,7 @@ services:
       - /:/hostfs:ro
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
+      - DOCKER_MULTI_NODE_CLUSTER=false
       - LOW_CARDINAL_EXCEPTION_GROUPING=false
     ports:
       # - "1777:1777"     # pprof extension

deploy/docker/clickhouse-setup/otel-collector-config.yaml

@@ -142,6 +142,7 @@ extensions:
 exporters:
   clickhousetraces:
     datasource: tcp://clickhouse:9000/signoz_traces
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
     endpoint: tcp://clickhouse:9000/signoz_metrics
@@ -151,6 +152,7 @@ exporters:
     endpoint: tcp://clickhouse:9000/signoz_metrics
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/signoz_logs
+    docker_multi_node_cluster: ${env:DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
     use_new_schema: true
   # logging: {}

ee/query-service/app/server.go

@@ -31,6 +31,7 @@ import (
 	"go.signoz.io/signoz/ee/query-service/rules"
 	baseauth "go.signoz.io/signoz/pkg/query-service/auth"
 	"go.signoz.io/signoz/pkg/query-service/migrate"
+	"go.signoz.io/signoz/pkg/query-service/model"
 	v3 "go.signoz.io/signoz/pkg/query-service/model/v3"
 
 	licensepkg "go.signoz.io/signoz/ee/query-service/license"
@@ -347,7 +348,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 		}
 
 		if user.User.OrgId == "" {
-			return nil, basemodel.UnauthorizedError(errors.New("orgId is missing in the claims"))
+			return nil, model.UnauthorizedError(errors.New("orgId is missing in the claims"))
 		}
 
 		return user, nil
@@ -764,9 +765,8 @@ func makeRulesManager(
 		Cache:        cache,
 		EvalDelay:    baseconst.GetEvalDelay(),
 
-		PrepareTaskFunc:     rules.PrepareTaskFunc,
-		PrepareTestRuleFunc: rules.TestNotification,
-		UseLogsNewSchema:    useLogsNewSchema,
+		PrepareTaskFunc:  rules.PrepareTaskFunc,
+		UseLogsNewSchema: useLogsNewSchema,
 	}
 
 	// create Manager

ee/query-service/integrations/gateway/proxy.go

@@ -9,8 +9,8 @@ import (
 )
 
 var (
-	RoutePrefix   string   = "/api/gateway"
-	AllowedPrefix []string = []string{"/v1/workspaces/me", "/v2/profiles/me", "/v2/deployments/me"}
+	RoutePrefix   string = "/api/gateway"
+	AllowedPrefix []string = []string{"/v1/workspaces/me", "/v2/profiles/me"}
 )
 
 type proxy struct {

ee/query-service/model/plans.go

@@ -1,7 +1,6 @@
 package model
 
 import (
-	"go.signoz.io/signoz/pkg/query-service/constants"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 )
 
@@ -135,13 +134,6 @@ var BasicPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       basemodel.HostsInfraMonitoring,
-		Active:     constants.EnableHostsInfraMonitoring(),
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }
 
 var ProPlan = basemodel.FeatureSet{
@@ -257,13 +249,6 @@ var ProPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       basemodel.HostsInfraMonitoring,
-		Active:     constants.EnableHostsInfraMonitoring(),
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
@@ -393,11 +378,4 @@ var EnterprisePlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       basemodel.HostsInfraMonitoring,
-		Active:     constants.EnableHostsInfraMonitoring(),
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }

ee/query-service/rules/manager.go

@@ -1,15 +1,10 @@
 package rules
 
 import (
-	"context"
 	"fmt"
 	"time"
 
-	"github.com/google/uuid"
-	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	baserules "go.signoz.io/signoz/pkg/query-service/rules"
-	"go.signoz.io/signoz/pkg/query-service/utils/labels"
-	"go.uber.org/zap"
 )
 
 func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error) {
@@ -84,106 +79,6 @@ func PrepareTaskFunc(opts baserules.PrepareTaskOptions) (baserules.Task, error)
 	return task, nil
 }
 
-// TestNotification prepares a dummy rule for given rule parameters and
-// sends a test notification. returns alert count and error (if any)
-func TestNotification(opts baserules.PrepareTestRuleOptions) (int, *basemodel.ApiError) {
-
-	ctx := context.Background()
-
-	if opts.Rule == nil {
-		return 0, basemodel.BadRequest(fmt.Errorf("rule is required"))
-	}
-
-	parsedRule := opts.Rule
-	var alertname = parsedRule.AlertName
-	if alertname == "" {
-		// alertname is not mandatory for testing, so picking
-		// a random string here
-		alertname = uuid.New().String()
-	}
-
-	// append name to indicate this is test alert
-	parsedRule.AlertName = fmt.Sprintf("%s%s", alertname, baserules.TestAlertPostFix)
-
-	var rule baserules.Rule
-	var err error
-
-	if parsedRule.RuleType == baserules.RuleTypeThreshold {
-
-		// add special labels for test alerts
-		parsedRule.Annotations[labels.AlertSummaryLabel] = fmt.Sprintf("The rule threshold is set to %.4f, and the observed metric value is {{$value}}.", *parsedRule.RuleCondition.Target)
-		parsedRule.Labels[labels.RuleSourceLabel] = ""
-		parsedRule.Labels[labels.AlertRuleIdLabel] = ""
-
-		// create a threshold rule
-		rule, err = baserules.NewThresholdRule(
-			alertname,
-			parsedRule,
-			opts.FF,
-			opts.Reader,
-			opts.UseLogsNewSchema,
-			baserules.WithSendAlways(),
-			baserules.WithSendUnmatched(),
-		)
-
-		if err != nil {
-			zap.L().Error("failed to prepare a new threshold rule for test", zap.String("name", rule.Name()), zap.Error(err))
-			return 0, basemodel.BadRequest(err)
-		}
-
-	} else if parsedRule.RuleType == baserules.RuleTypeProm {
-
-		// create promql rule
-		rule, err = baserules.NewPromRule(
-			alertname,
-			parsedRule,
-			opts.Logger,
-			opts.Reader,
-			opts.ManagerOpts.PqlEngine,
-			baserules.WithSendAlways(),
-			baserules.WithSendUnmatched(),
-		)
-
-		if err != nil {
-			zap.L().Error("failed to prepare a new promql rule for test", zap.String("name", rule.Name()), zap.Error(err))
-			return 0, basemodel.BadRequest(err)
-		}
-	} else if parsedRule.RuleType == baserules.RuleTypeAnomaly {
-		// create anomaly rule
-		rule, err = NewAnomalyRule(
-			alertname,
-			parsedRule,
-			opts.FF,
-			opts.Reader,
-			opts.Cache,
-			baserules.WithSendAlways(),
-			baserules.WithSendUnmatched(),
-		)
-		if err != nil {
-			zap.L().Error("failed to prepare a new anomaly rule for test", zap.String("name", rule.Name()), zap.Error(err))
-			return 0, basemodel.BadRequest(err)
-		}
-	} else {
-		return 0, basemodel.BadRequest(fmt.Errorf("failed to derive ruletype with given information"))
-	}
-
-	// set timestamp to current utc time
-	ts := time.Now().UTC()
-
-	count, err := rule.Eval(ctx, ts)
-	if err != nil {
-		zap.L().Error("evaluating rule failed", zap.String("rule", rule.Name()), zap.Error(err))
-		return 0, basemodel.InternalError(fmt.Errorf("rule evaluation failed"))
-	}
-	alertsFound, ok := count.(int)
-	if !ok {
-		return 0, basemodel.InternalError(fmt.Errorf("something went wrong"))
-	}
-	rule.SendAlerts(ctx, ts, 0, time.Duration(1*time.Minute), opts.NotifyFunc)
-
-	return alertsFound, nil
-}
-
 // newTask returns an appropriate group for
 // rule type
 func newTask(taskType baserules.TaskType, name string, frequency time.Duration, rules []baserules.Rule, opts *baserules.ManagerOptions, notify baserules.NotifyFunc, ruleDB baserules.RuleDB) baserules.Task {

frontend/package.json

@@ -34,7 +34,7 @@
 		"@dnd-kit/core": "6.1.0",
 		"@dnd-kit/modifiers": "7.0.0",
 		"@dnd-kit/sortable": "8.0.0",
-		"@grafana/data": "^11.2.3",
+		"@grafana/data": "^9.5.2",
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
 		"@monaco-editor/react": "^4.3.1",
@@ -51,7 +51,7 @@
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",
 		"antd-table-saveas-excel": "2.2.1",
-		"axios": "1.7.7",
+		"axios": "1.7.4",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -76,7 +76,7 @@
 		"fontfaceobserver": "2.3.0",
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.5.0",
-		"http-proxy-middleware": "2.0.7",
+		"http-proxy-middleware": "2.0.6",
 		"i18next": "^21.6.12",
 		"i18next-browser-languagedetector": "^6.1.3",
 		"i18next-http-backend": "^1.3.2",
@@ -87,8 +87,6 @@
 		"lodash-es": "^4.17.21",
 		"lucide-react": "0.379.0",
 		"mini-css-extract-plugin": "2.4.5",
-		"overlayscrollbars": "^2.8.1",
-		"overlayscrollbars-react": "^0.5.6",
 		"papaparse": "5.4.1",
 		"posthog-js": "1.160.3",
 		"rc-tween-one": "3.0.6",
@@ -109,10 +107,11 @@
 		"react-query": "3.39.3",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
-		"react-router-dom-v5-compat": "6.27.0",
 		"react-syntax-highlighter": "15.5.0",
 		"react-use": "^17.3.2",
 		"react-virtuoso": "4.0.3",
+		"overlayscrollbars-react": "^0.5.6",
+		"overlayscrollbars": "^2.8.1",
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
 		"rehype-raw": "7.0.0",
@@ -124,10 +123,10 @@
 		"ts-node": "^10.2.1",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",
 		"typescript": "^4.0.5",
-		"uplot": "1.6.31",
+		"uplot": "1.6.26",
 		"uuid": "^8.3.2",
 		"web-vitals": "^0.2.4",
-		"webpack": "5.94.0",
+		"webpack": "5.88.2",
 		"webpack-dev-server": "^4.15.1",
 		"webpack-retry-chunk-load-plugin": "3.1.1",
 		"xstate": "^4.31.0"

frontend/public/locales/en-GB/alerts.json

@@ -43,18 +43,11 @@
 	"option_15min": "15 mins",
 	"option_30min": "30 mins",
 	"option_60min": "60 mins",
-	"option_2hours": "2 hours",
-	"option_3hours": "3 hours",
 	"option_4hours": "4 hours",
-	"option_5hours": "5 hours",
+	"option_3hours": "3 hours",
 	"option_6hours": "6 hours",
-	"option_8hours": "8 hours",
-	"option_10hours": "10 hours",
 	"option_12hours": "12 hours",
 	"option_24hours": "24 hours",
-	"option_48hours": "48 hours",
-	"option_72hours": "72 hours",
-	"option_1week": "1 week",
 	"field_threshold": "Alert Threshold",
 	"option_allthetimes": "all the times",
 	"option_atleastonce": "at least once",

frontend/public/locales/en-GB/rules.json

@@ -29,24 +29,12 @@
 	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
-	"option_1min": "1 min",
 	"option_5min": "5 mins",
 	"option_10min": "10 mins",
 	"option_15min": "15 mins",
-	"option_30min": "30 mins",
 	"option_60min": "60 mins",
-	"option_2hours": "2 hours",
-	"option_3hours": "3 hours",
 	"option_4hours": "4 hours",
-	"option_5hours": "5 hours",
-	"option_6hours": "6 hours",
-	"option_8hours": "8 hours",
-	"option_10hours": "10 hours",
-	"option_12hours": "12 hours",
 	"option_24hours": "24 hours",
-	"option_48hours": "48 hours",
-	"option_72hours": "72 hours",
-	"option_1week": "1 week",
 	"field_threshold": "Alert Threshold",
 	"option_allthetimes": "all the times",
 	"option_atleastonce": "at least once",

frontend/public/locales/en/alerts.json

@@ -47,18 +47,11 @@
 	"option_15min": "15 mins",
 	"option_30min": "30 mins",
 	"option_60min": "60 mins",
-	"option_2hours": "2 hours",
 	"option_3hours": "3 hours",
 	"option_4hours": "4 hours",
-	"option_5hours": "5 hours",
 	"option_6hours": "6 hours",
-	"option_8hours": "8 hours",
-	"option_10hours": "10 hours",
 	"option_12hours": "12 hours",
 	"option_24hours": "24 hours",
-	"option_48hours": "48 hours",
-	"option_72hours": "72 hours",
-	"option_1week": "1 week",
 	"field_threshold": "Alert Threshold",
 	"option_allthetimes": "all the times",
 	"option_atleastonce": "at least once",

frontend/public/locales/en/messagingQueuesKafkaOverview.json

@@ -1,50 +1,30 @@
 {
-	"breadcrumb": "Messaging Queues",
-	"header": "Kafka / Overview",
-	"overview": {
-		"title": "Start sending data in as little as 20 minutes",
-		"subtitle": "Connect and Monitor Your Data Streams"
-	},
-	"configureConsumer": {
-		"title": "Configure Consumer",
-		"description": "Add consumer data sources to gain insights and enhance monitoring.",
-		"button": "Get Started"
-	},
-	"configureProducer": {
-		"title": "Configure Producer",
-		"description": "Add producer data sources to gain insights and enhance monitoring.",
-		"button": "Get Started"
-	},
-	"monitorKafka": {
-		"title": "Monitor kafka",
-		"description": "Add your Kafka source to gain insights and enhance activity tracking.",
-		"button": "Get Started"
-	},
-	"summarySection": {
-		"viewDetailsButton": "View Details",
-		"consumer": {
-			"title": "Consumer lag view",
-			"description": "Connect and Monitor Your Data Streams"
-		},
-		"producer": {
-			"title": "Producer latency view",
-			"description": "Connect and Monitor Your Data Streams"
-		},
-		"partition": {
-			"title": "Partition Latency view",
-			"description": "Connect and Monitor Your Data Streams"
-		},
-		"dropRate": {
-			"title": "Drop Rate view",
-			"description": "Connect and Monitor Your Data Streams"
-		}
-	},
-	"confirmModal": {
-		"content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.",
-		"okText": "Proceed"
-	},
-	"overviewSummarySection": {
-		"title": "Monitor Your Data Streams",
-		"subtitle": "Monitor key Kafka metrics like consumer lag and latency to ensure efficient data flow and troubleshoot in real time."
-	}
-}
+  "breadcrumb": "Messaging Queues",
+  "header": "Kafka / Overview",
+  "overview": {
+    "title": "Start sending data in as little as 20 minutes",
+    "subtitle": "Connect and Monitor Your Data Streams"
+  },
+  "configureConsumer": {
+    "title": "Configure Consumer",
+    "description": "Add consumer data sources to gain insights and enhance monitoring.",
+    "button": "Get Started"
+  },
+  "configureProducer": {
+    "title": "Configure Producer",
+    "description": "Add producer data sources to gain insights and enhance monitoring.",
+    "button": "Get Started"
+  },
+  "monitorKafka": {
+    "title": "Monitor kafka",
+    "description": "Add your Kafka source to gain insights and enhance activity tracking.",
+    "button": "Get Started"
+  },
+  "summarySection": {
+    "viewDetailsButton": "View Details"
+  },
+  "confirmModal": {
+    "content": "Before navigating to the details page, please make sure you have configured all the required setup to ensure correct data monitoring.",
+    "okText": "Proceed"
+  }
+}

frontend/public/locales/en/rules.json

@@ -29,24 +29,12 @@
 	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
-	"option_1min": "1 min",
 	"option_5min": "5 mins",
 	"option_10min": "10 mins",
 	"option_15min": "15 mins",
-	"option_30min": "30 mins",
 	"option_60min": "60 mins",
-	"option_2hours": "2 hours",
-	"option_3hours": "3 hours",
 	"option_4hours": "4 hours",
-	"option_5hours": "5 hours",
-	"option_6hours": "6 hours",
-	"option_8hours": "8 hours",
-	"option_10hours": "10 hours",
-	"option_12hours": "12 hours",
 	"option_24hours": "24 hours",
-	"option_48hours": "48 hours",
-	"option_72hours": "72 hours",
-	"option_1week": "1 week",
 	"field_threshold": "Alert Threshold",
 	"option_allthetimes": "all the times",
 	"option_atleastonce": "at least once",

frontend/public/locales/en/titles.json

@@ -4,7 +4,6 @@
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
 	"GET_STARTED": "SigNoz | Get Started",
-	"ONBOARDING": "SigNoz | Get Started",
 	"GET_STARTED_APPLICATION_MONITORING": "SigNoz | Get Started | APM",
 	"GET_STARTED_LOGS_MANAGEMENT": "SigNoz | Get Started | Logs",
 	"GET_STARTED_INFRASTRUCTURE_MONITORING": "SigNoz | Get Started | Infrastructure",

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import getLocalStorageApi from 'api/browser/localstorage/get';
-import getOrgUser from 'api/user/getOrgUser';
 import loginApi from 'api/user/login';
 import { Logout } from 'api/utils';
 import Spinner from 'components/Spinner';
@@ -9,10 +8,8 @@ import ROUTES from 'constants/routes';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import { isEmpty, isNull } from 'lodash-es';
-import { ReactChild, useEffect, useMemo, useState } from 'react';
+import { ReactChild, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
@@ -20,7 +17,6 @@ import { AppState } from 'store/reducers';
 import { getInitialUserTokenRefreshToken } from 'store/utils';
 import AppActions from 'types/actions';
 import { UPDATE_USER_IS_FETCH } from 'types/actions/app';
-import { Organization } from 'types/api/user/getOrganization';
 import AppReducer from 'types/reducer/app';
 import { routePermission } from 'utils/permission';
 
@@ -35,19 +31,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	const location = useLocation();
 	const { pathname } = location;
 
-	const [isLoading, setIsLoading] = useState<boolean>(true);
-
-	const {
-		org,
-		orgPreferences,
-		user,
-		role,
-		isUserFetching,
-		isUserFetchingError,
-		isLoggedIn: isLoggedInState,
-		isFetchingOrgPreferences,
-	} = useSelector<AppState, AppReducer>((state) => state.app);
-
 	const mapRoutes = useMemo(
 		() =>
 			new Map(
@@ -61,21 +44,18 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		[pathname],
 	);
 
-	const isOnboardingComplete = useMemo(
-		() =>
-			orgPreferences?.find(
-				(preference: Record<string, any>) => preference.key === 'ORG_ONBOARDING',
-			)?.value,
-		[orgPreferences],
-	);
-
 	const {
 		data: licensesData,
 		isFetching: isFetchingLicensesData,
 	} = useLicense();
 
-	const { t } = useTranslation(['common']);
+	const {
+		isUserFetching,
+		isUserFetchingError,
+		isLoggedIn: isLoggedInState,
+	} = useSelector<AppState, AppReducer>((state) => state.app);
 
+	const { t } = useTranslation(['common']);
 	const localStorageUserAuthToken = getInitialUserTokenRefreshToken();
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -86,8 +66,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const isOldRoute = oldRoutes.indexOf(pathname) > -1;
 
-	const [orgData, setOrgData] = useState<Organization | undefined>(undefined);
-
 	const isLocalStorageLoggedIn =
 		getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true';
 
@@ -103,63 +81,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	};
 
-	const { data: orgUsers, isLoading: isLoadingOrgUsers } = useQuery({
-		queryFn: () => {
-			if (orgData && orgData.id !== undefined) {
-				return getOrgUser({
-					orgId: orgData.id,
-				});
-			}
-			return undefined;
-		},
-		queryKey: ['getOrgUser'],
-		enabled: !isEmpty(orgData),
-	});
-
-	const checkFirstTimeUser = (): boolean => {
-		const users = orgUsers?.payload || [];
-
-		const remainingUsers = users.filter(
-			(user) => user.email !== 'admin@signoz.cloud',
-		);
-
-		return remainingUsers.length === 1;
-	};
-
-	// Check if the onboarding should be shown based on the org users and onboarding completion status, wait for org users and preferences to load
-	const shouldShowOnboarding = (): boolean => {
-		// Only run this effect if the org users and preferences are loaded
-
-		if (!isLoadingOrgUsers && !isFetchingOrgPreferences) {
-			const isFirstUser = checkFirstTimeUser();
-
-			// Redirect to get started if it's not the first user or if the onboarding is complete
-			return isFirstUser && !isOnboardingComplete;
-		}
-
-		return false;
-	};
-
-	const handleRedirectForOrgOnboarding = (key: string): void => {
-		if (
-			isLoggedInState &&
-			!isFetchingOrgPreferences &&
-			!isLoadingOrgUsers &&
-			!isEmpty(orgUsers?.payload) &&
-			!isNull(orgPreferences)
-		) {
-			if (key === 'ONBOARDING' && isOnboardingComplete) {
-				history.push(ROUTES.APPLICATION);
-			}
-
-			const isFirstTimeUser = checkFirstTimeUser();
-
-			if (isFirstTimeUser && !isOnboardingComplete) {
-				history.push(ROUTES.ONBOARDING);
-			}
-		}
-	};
-
 	const handleUserLoginIfTokenPresent = async (
 		key: keyof typeof ROUTES,
 	): Promise<void> => {
@@ -181,8 +102,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 					response.payload.refreshJwt,
 				);
 
-				handleRedirectForOrgOnboarding(key);
-
 				if (
 					userResponse &&
 					route &&
@@ -210,7 +129,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		) {
 			handleUserLoginIfTokenPresent(key);
 		} else {
-			handleRedirectForOrgOnboarding(key);
+			// user does have localstorage values
 
 			navigateToLoginIfNotLoggedIn(isLocalStorageLoggedIn);
 		}
@@ -241,45 +160,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isFetchingLicensesData]);
 
-	useEffect(() => {
-		if (org && org.length > 0 && org[0].id !== undefined) {
-			setOrgData(org[0]);
-		}
-	}, [org]);
-
-	const handleRouting = (): void => {
-		const showOrgOnboarding = shouldShowOnboarding();
-
-		if (showOrgOnboarding && !isOnboardingComplete) {
-			history.push(ROUTES.ONBOARDING);
-		} else {
-			history.push(ROUTES.APPLICATION);
-		}
-	};
-
-	useEffect(() => {
-		const { isPrivate } = currentRoute || {
-			isPrivate: false,
-		};
-
-		if (isLoggedInState && role && role !== 'ADMIN') {
-			setIsLoading(false);
-		}
-
-		if (!isPrivate) {
-			setIsLoading(false);
-		}
-
-		if (
-			!isEmpty(user) &&
-			!isFetchingOrgPreferences &&
-			!isEmpty(orgUsers?.payload) &&
-			!isNull(orgPreferences)
-		) {
-			setIsLoading(false);
-		}
-	}, [currentRoute, user, role, orgUsers, orgPreferences]);
-
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
 		(async (): Promise<void> => {
@@ -301,8 +181,9 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 						handlePrivateRoutes(key);
 					} else {
 						// no need to fetch the user and make user fetching false
+
 						if (getLocalStorageApi(LOCALSTORAGE.IS_LOGGED_IN) === 'true') {
-							handleRouting();
+							history.push(ROUTES.APPLICATION);
 						}
 						dispatch({
 							type: UPDATE_USER_IS_FETCH,
@@ -314,7 +195,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				} else if (pathname === ROUTES.HOME_PAGE) {
 					// routing to application page over root page
 					if (isLoggedInState) {
-						handleRouting();
+						history.push(ROUTES.APPLICATION);
 					} else {
 						navigateToLoginIfNotLoggedIn();
 					}
@@ -327,20 +208,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				history.push(ROUTES.SOMETHING_WENT_WRONG);
 			}
 		})();
-	}, [
-		dispatch,
-		isLoggedInState,
-		currentRoute,
-		licensesData,
-		orgUsers,
-		orgPreferences,
-	]);
+	}, [dispatch, isLoggedInState, currentRoute, licensesData]);
 
 	if (isUserFetchingError) {
 		return <Redirect to={ROUTES.SOMETHING_WENT_WRONG} />;
 	}
 
-	if (isUserFetching || isLoading) {
+	if (isUserFetching) {
 		return <Spinner tip="Loading..." />;
 	}
 

frontend/src/AppRoutes/index.tsx

@@ -2,7 +2,6 @@ import { ConfigProvider } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
-import getAllOrgPreferences from 'api/preferences/getAllOrgPreferences';
 import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
@@ -25,20 +24,13 @@ import AlertRuleProvider from 'providers/Alert';
 import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import { Suspense, useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { Route, Router, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import {
-	UPDATE_FEATURE_FLAG_RESPONSE,
-	UPDATE_IS_FETCHING_ORG_PREFERENCES,
-	UPDATE_ORG_PREFERENCES,
-} from 'types/actions/app';
+import { UPDATE_FEATURE_FLAG_RESPONSE } from 'types/actions/app';
 import AppReducer, { User } from 'types/reducer/app';
-import { USER_ROLES } from 'types/roles';
 import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app';
 
 import PrivateRoute from './Private';
@@ -73,41 +65,6 @@ function App(): JSX.Element {
 	const isPremiumSupportEnabled =
 		useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false;
 
-	const { data: orgPreferences, isLoading: isLoadingOrgPreferences } = useQuery({
-		queryFn: () => getAllOrgPreferences(),
-		queryKey: ['getOrgPreferences'],
-		enabled: isLoggedInState && role === USER_ROLES.ADMIN,
-	});
-
-	useEffect(() => {
-		if (orgPreferences && !isLoadingOrgPreferences) {
-			dispatch({
-				type: UPDATE_IS_FETCHING_ORG_PREFERENCES,
-				payload: {
-					isFetchingOrgPreferences: false,
-				},
-			});
-
-			dispatch({
-				type: UPDATE_ORG_PREFERENCES,
-				payload: {
-					orgPreferences: orgPreferences.payload?.data || null,
-				},
-			});
-		}
-	}, [orgPreferences, dispatch, isLoadingOrgPreferences]);
-
-	useEffect(() => {
-		if (isLoggedInState && role !== USER_ROLES.ADMIN) {
-			dispatch({
-				type: UPDATE_IS_FETCHING_ORG_PREFERENCES,
-				payload: {
-					isFetchingOrgPreferences: false,
-				},
-			});
-		}
-	}, [isLoggedInState, role, dispatch]);
-
 	const featureResponse = useGetFeatureFlag((allFlags) => {
 		dispatch({
 			type: UPDATE_FEATURE_FLAG_RESPONSE,
@@ -225,16 +182,6 @@ function App(): JSX.Element {
 	}, [isLoggedInState, isOnBasicPlan, user]);
 
 	useEffect(() => {
-		if (pathname === ROUTES.ONBOARDING) {
-			window.Intercom('update', {
-				hide_default_launcher: true,
-			});
-		} else {
-			window.Intercom('update', {
-				hide_default_launcher: false,
-			});
-		}
-
 		trackPageView(pathname);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [pathname]);
@@ -257,7 +204,6 @@ function App(): JSX.Element {
 		user,
 		licenseData,
 		isPremiumSupportEnabled,
-		pathname,
 	]);
 
 	useEffect(() => {
@@ -293,38 +239,36 @@ function App(): JSX.Element {
 	return (
 		<ConfigProvider theme={themeConfig}>
 			<Router history={history}>
-				<CompatRouter>
-					<NotificationProvider>
-						<PrivateRoute>
-							<ResourceProvider>
-								<QueryBuilderProvider>
-									<DashboardProvider>
-										<KeyboardHotkeysProvider>
-											<AlertRuleProvider>
-												<AppLayout>
-													<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-														<Switch>
-															{routes.map(({ path, component, exact }) => (
-																<Route
-																	key={`${path}`}
-																	exact={exact}
-																	path={path}
-																	component={component}
-																/>
-															))}
+				<NotificationProvider>
+					<PrivateRoute>
+						<ResourceProvider>
+							<QueryBuilderProvider>
+								<DashboardProvider>
+									<KeyboardHotkeysProvider>
+										<AlertRuleProvider>
+											<AppLayout>
+												<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+													<Switch>
+														{routes.map(({ path, component, exact }) => (
+															<Route
+																key={`${path}`}
+																exact={exact}
+																path={path}
+																component={component}
+															/>
+														))}
 
-															<Route path="*" component={NotFound} />
-														</Switch>
-													</Suspense>
-												</AppLayout>
-											</AlertRuleProvider>
-										</KeyboardHotkeysProvider>
-									</DashboardProvider>
-								</QueryBuilderProvider>
-							</ResourceProvider>
-						</PrivateRoute>
-					</NotificationProvider>
-				</CompatRouter>
+														<Route path="*" component={NotFound} />
+													</Switch>
+												</Suspense>
+											</AppLayout>
+										</AlertRuleProvider>
+									</KeyboardHotkeysProvider>
+								</DashboardProvider>
+							</QueryBuilderProvider>
+						</ResourceProvider>
+					</PrivateRoute>
+				</NotificationProvider>
 			</Router>
 		</ConfigProvider>
 	);

frontend/src/AppRoutes/pageComponents.ts

@@ -66,10 +66,6 @@ export const Onboarding = Loadable(
 	() => import(/* webpackChunkName: "Onboarding" */ 'pages/OnboardingPage'),
 );
 
-export const OrgOnboarding = Loadable(
-	() => import(/* webpackChunkName: "OrgOnboarding" */ 'pages/OrgOnboarding'),
-);
-
 export const DashboardPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "DashboardPage" */ 'pages/DashboardsListPage'),

frontend/src/AppRoutes/routes.ts

@@ -32,7 +32,6 @@ import {
 	OldLogsExplorer,
 	Onboarding,
 	OrganizationSettings,
-	OrgOnboarding,
 	PasswordReset,
 	PipelinePage,
 	ServiceMapPage,
@@ -69,13 +68,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'GET_STARTED',
 	},
-	{
-		path: ROUTES.ONBOARDING,
-		exact: false,
-		component: OrgOnboarding,
-		isPrivate: true,
-		key: 'ONBOARDING',
-	},
 	{
 		component: LogsIndexToFields,
 		path: ROUTES.LOGS_INDEX_FIELDS,

frontend/src/api/alerts/create.ts

@@ -7,6 +7,7 @@ const create = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	const response = await axios.post('/rules', {
 		...props.data,
+		version: 'v4',
 	});
 
 	return {

frontend/src/api/apiV1.ts

@@ -4,7 +4,6 @@ export const apiV2 = '/api/v2/';
 export const apiV3 = '/api/v3/';
 export const apiV4 = '/api/v4/';
 export const gatewayApiV1 = '/api/gateway/v1/';
-export const gatewayApiV2 = '/api/gateway/v2/';
 export const apiAlertManager = '/api/alertmanager/';
 
 export default apiV1;

frontend/src/api/index.ts

@@ -15,7 +15,6 @@ import apiV1, {
 	apiV3,
 	apiV4,
 	gatewayApiV1,
-	gatewayApiV2,
 } from './apiV1';
 import { Logout } from './utils';
 
@@ -170,19 +169,6 @@ GatewayApiV1Instance.interceptors.response.use(
 GatewayApiV1Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
-// gateway Api V2
-export const GatewayApiV2Instance = axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}${gatewayApiV2}`,
-});
-
-GatewayApiV2Instance.interceptors.response.use(
-	interceptorsResponse,
-	interceptorRejected,
-);
-
-GatewayApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
-//
-
 AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejected,

frontend/src/api/messagingQueues/onboarding/getOnboardingStatus.ts

@@ -1,39 +0,0 @@
-import { ApiBaseInstance } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-export interface OnboardingStatusResponse {
-	status: string;
-	data: {
-		attribute?: string;
-		error_message?: string;
-		status?: string;
-	}[];
-}
-
-const getOnboardingStatus = async (props: {
-	start: number;
-	end: number;
-	endpointService?: string;
-}): Promise<SuccessResponse<OnboardingStatusResponse> | ErrorResponse> => {
-	const { endpointService, ...rest } = props;
-	try {
-		const response = await ApiBaseInstance.post(
-			`/messaging-queues/kafka/onboarding/${endpointService || 'consumers'}`,
-			rest,
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
-	}
-};
-
-export default getOnboardingStatus;

frontend/src/api/onboarding/updateProfile.ts

@@ -1,20 +0,0 @@
-import { GatewayApiV2Instance } from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { UpdateProfileProps } from 'types/api/onboarding/types';
-
-const updateProfile = async (
-	props: UpdateProfileProps,
-): Promise<SuccessResponse<UpdateProfileProps> | ErrorResponse> => {
-	const response = await GatewayApiV2Instance.put('/profiles/me', {
-		...props,
-	});
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};
-
-export default updateProfile;

frontend/src/api/preferences/updateOrgPreference.ts

@@ -10,12 +10,9 @@ const updateOrgPreference = async (
 ): Promise<
 	SuccessResponse<UpdateOrgPreferenceResponseProps> | ErrorResponse
 > => {
-	const response = await axios.put(
-		`/org/preferences/${preferencePayload.preferenceID}`,
-		{
-			preference_value: preferencePayload.value,
-		},
-	);
+	const response = await axios.put(`/org/preferences`, {
+		preference_value: preferencePayload.value,
+	});
 
 	return {
 		statusCode: 200,

frontend/src/api/user/inviteUsers.ts

@@ -1,18 +0,0 @@
-import axios from 'api';
-import { SuccessResponse } from 'types/api';
-import { InviteUsersResponse, UsersProps } from 'types/api/user/inviteUsers';
-
-const inviteUsers = async (
-	users: UsersProps,
-): Promise<SuccessResponse<InviteUsersResponse>> => {
-	const response = await axios.post(`/invite/bulk`, users);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data,
-	};
-};
-
-export default inviteUsers;

frontend/src/components/Logs/LogStateIndicator/utils.test.ts

@@ -17,7 +17,6 @@ describe('getLogIndicatorType', () => {
 			body: 'Sample log Message',
 			resources_string: {},
 			attributesString: {},
-			scope_string: {},
 			attributes_string: {},
 			attributesInt: {},
 			attributesFloat: {},
@@ -41,7 +40,6 @@ describe('getLogIndicatorType', () => {
 			body: 'Sample log Message',
 			resources_string: {},
 			attributesString: {},
-			scope_string: {},
 			attributes_string: {},
 			attributesInt: {},
 			attributesFloat: {},
@@ -64,7 +62,6 @@ describe('getLogIndicatorType', () => {
 			body: 'Sample log Message',
 			resources_string: {},
 			attributesString: {},
-			scope_string: {},
 			attributes_string: {},
 			attributesInt: {},
 			attributesFloat: {},
@@ -86,7 +83,6 @@ describe('getLogIndicatorType', () => {
 			body: 'Sample log',
 			resources_string: {},
 			attributesString: {},
-			scope_string: {},
 			attributes_string: {
 				log_level: 'INFO' as never,
 			},
@@ -116,7 +112,6 @@ describe('getLogIndicatorTypeForTable', () => {
 			attributesString: {},
 			attributes_string: {},
 			attributesInt: {},
-			scope_string: {},
 			attributesFloat: {},
 			severity_text: 'WARN',
 		};
@@ -135,7 +130,6 @@ describe('getLogIndicatorTypeForTable', () => {
 			severity_number: 0,
 			body: 'Sample log message',
 			resources_string: {},
-			scope_string: {},
 			attributesString: {},
 			attributes_string: {},
 			attributesInt: {},
@@ -172,7 +166,6 @@ describe('logIndicatorBySeverityNumber', () => {
 				body: 'Sample log Message',
 				resources_string: {},
 				attributesString: {},
-				scope_string: {},
 				attributes_string: {},
 				attributesInt: {},
 				attributesFloat: {},

frontend/src/constants/query.ts

@@ -37,8 +37,4 @@ export enum QueryParams {
 	partition = 'partition',
 	selectedTimelineQuery = 'selectedTimelineQuery',
 	ruleType = 'ruleType',
-	configDetail = 'configDetail',
-	getStartedSource = 'getStartedSource',
-	getStartedSourceService = 'getStartedSourceService',
-	mqServiceView = 'mqServiceView',
 }

frontend/src/constants/routes.ts

@@ -8,7 +8,6 @@ const ROUTES = {
 	TRACE_DETAIL: '/trace/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	GET_STARTED: '/get-started',
-	ONBOARDING: '/onboarding',
 	GET_STARTED_APPLICATION_MONITORING: '/get-started/application-monitoring',
 	GET_STARTED_LOGS_MANAGEMENT: '/get-started/logs-management',
 	GET_STARTED_INFRASTRUCTURE_MONITORING:

frontend/src/container/AppLayout/AppLayout.styles.scss

@@ -7,8 +7,6 @@
 		width: calc(100% - 64px);
 		z-index: 0;
 
-		margin: 0 auto;
-
 		.content-container {
 			position: relative;
 			margin: 0 1rem;

frontend/src/container/AppLayout/index.tsx

@@ -191,7 +191,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const pageTitle = t(routeKey);
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED ||
-		pathname === ROUTES.ONBOARDING ||
 		pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING ||
 		pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING ||
 		pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT ||

frontend/src/container/CreateAlertRule/defaults.ts

@@ -94,7 +94,6 @@ export const anamolyAlertDefaults: AlertDef = {
 		matchType: defaultMatchType,
 		algorithm: defaultAlgorithm,
 		seasonality: defaultSeasonality,
-		target: 3,
 	},
 	labels: {
 		severity: 'warning',
@@ -105,7 +104,6 @@ export const anamolyAlertDefaults: AlertDef = {
 
 export const logAlertDefaults: AlertDef = {
 	alertType: AlertTypes.LOGS_BASED_ALERT,
-	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -136,7 +134,6 @@ export const logAlertDefaults: AlertDef = {
 
 export const traceAlertDefaults: AlertDef = {
 	alertType: AlertTypes.TRACES_BASED_ALERT,
-	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {
@@ -167,7 +164,6 @@ export const traceAlertDefaults: AlertDef = {
 
 export const exceptionAlertDefaults: AlertDef = {
 	alertType: AlertTypes.EXCEPTIONS_BASED_ALERT,
-	version: ENTITY_VERSION_V4,
 	condition: {
 		compositeQuery: {
 			builderQueries: {

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -181,18 +181,8 @@ function RuleOptions({
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
 			<Select.Option value="15m0s">{t('option_15min')}</Select.Option>
 			<Select.Option value="1h0m0s">{t('option_60min')}</Select.Option>
-			<Select.Option value="2h0m0s">{t('option_2hours')}</Select.Option>
-			<Select.Option value="3h0m0s">{t('option_3hours')}</Select.Option>
 			<Select.Option value="4h0m0s">{t('option_4hours')}</Select.Option>
-			<Select.Option value="5h0m0s">{t('option_5hours')}</Select.Option>
-			<Select.Option value="6h0m0s">{t('option_6hours')}</Select.Option>
-			<Select.Option value="8h0m0s">{t('option_8hours')}</Select.Option>
-			<Select.Option value="10h0m0s">{t('option_10hours')}</Select.Option>
-			<Select.Option value="12h0m0s">{t('option_12hours')}</Select.Option>
 			<Select.Option value="24h0m0s">{t('option_24hours')}</Select.Option>
-			<Select.Option value="48h0m0s">{t('option_48hours')}</Select.Option>
-			<Select.Option value="72h0m0s">{t('option_72hours')}</Select.Option>
-			<Select.Option value="168h0m0s">{t('option_1week')}</Select.Option>
 		</InlineSelect>
 	);
 
@@ -396,31 +386,32 @@ function RuleOptions({
 					renderThresholdRuleOpts()}
 
 				<Space direction="vertical" size="large">
-					{ruleType !== AlertDetectionTypes.ANOMALY_DETECTION_ALERT && (
-						<Space direction="horizontal" align="center">
-							<Form.Item noStyle name={['condition', 'target']}>
-								<InputNumber
-									addonBefore={t('field_threshold')}
-									value={alertDef?.condition?.target}
-									onChange={onChange}
-									type="number"
-									onWheel={(e): void => e.currentTarget.blur()}
-								/>
-							</Form.Item>
+					{queryCategory !== EQueryType.PROM &&
+						ruleType !== AlertDetectionTypes.ANOMALY_DETECTION_ALERT && (
+							<Space direction="horizontal" align="center">
+								<Form.Item noStyle name={['condition', 'target']}>
+									<InputNumber
+										addonBefore={t('field_threshold')}
+										value={alertDef?.condition?.target}
+										onChange={onChange}
+										type="number"
+										onWheel={(e): void => e.currentTarget.blur()}
+									/>
+								</Form.Item>
 
-							<Form.Item noStyle>
-								<Select
-									getPopupContainer={popupContainer}
-									allowClear
-									showSearch
-									options={categorySelectOptions}
-									placeholder={t('field_unit')}
-									value={alertDef.condition.targetUnit}
-									onChange={onChangeAlertUnit}
-								/>
-							</Form.Item>
-						</Space>
-					)}
+								<Form.Item noStyle>
+									<Select
+										getPopupContainer={popupContainer}
+										allowClear
+										showSearch
+										options={categorySelectOptions}
+										placeholder={t('field_unit')}
+										value={alertDef.condition.targetUnit}
+										onChange={onChangeAlertUnit}
+									/>
+								</Form.Item>
+							</Space>
+						)}
 
 					<Collapse>
 						<Collapse.Panel header={t('More options')} key="1">

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -138,9 +138,6 @@ function LabelSelect({
 						if (e.key === 'Enter' || e.code === 'Enter' || e.key === ':') {
 							send('NEXT');
 						}
-						if (state.value === 'Idle') {
-							send('NEXT');
-						}
 					}}
 					bordered={false}
 					value={currentVal as never}

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

@@ -18,7 +18,6 @@ import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import useComponentPermission from 'hooks/useComponentPermission';
-import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { isEmpty } from 'lodash-es';
@@ -73,18 +72,16 @@ function WidgetHeader({
 	tableProcessedDataRef,
 	setSearchTerm,
 }: IWidgetHeaderProps): JSX.Element | null {
-	const urlQuery = useUrlQuery();
 	const onEditHandler = useCallback((): void => {
 		const widgetId = widget.id;
-		urlQuery.set(QueryParams.widgetId, widgetId);
-		urlQuery.set(QueryParams.graphType, widget.panelTypes);
-		urlQuery.set(
-			QueryParams.compositeQuery,
-			encodeURIComponent(JSON.stringify(widget.query)),
+		history.push(
+			`${window.location.pathname}/new?widgetId=${widgetId}&graphType=${
+				widget.panelTypes
+			}&${QueryParams.compositeQuery}=${encodeURIComponent(
+				JSON.stringify(widget.query),
+			)}`,
 		);
-		const generatedUrl = `${window.location.pathname}/new?${urlQuery}`;
-		history.push(generatedUrl);
-	}, [urlQuery, widget.id, widget.panelTypes, widget.query]);
+	}, [widget.id, widget.panelTypes, widget.query]);
 
 	const onCreateAlertsHandler = useCreateAlerts(widget, 'dashboardView');
 

frontend/src/container/ListOfDashboard/DashboardList.styles.scss

@@ -5,17 +5,6 @@
 	justify-content: center;
 	width: 100%;
 
-	// overridding the request integration style to fix the spacing for dashboard list
-	.request-entity-container {
-		margin-bottom: 16px !important;
-		margin-top: 0 !important;
-	}
-
-	.integrations-content {
-		max-width: 100% !important;
-		width: 100% !important;
-	}
-
 	.dashboards-list-view-content {
 		width: calc(100% - 30px);
 		max-width: 836px;

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -77,7 +77,6 @@ import { isCloudUser } from 'utils/app';
 
 import DashboardTemplatesModal from './DashboardTemplates/DashboardTemplatesModal';
 import ImportJSON from './ImportJSON';
-import { RequestDashboardBtn } from './RequestDashboardBtn';
 import { DeleteButton } from './TableComponents/DeleteButton';
 import {
 	DashboardDynamicColumns,
@@ -693,13 +692,6 @@ function DashboardsList(): JSX.Element {
 							Create and manage dashboards for your workspace.
 						</Typography.Text>
 					</Flex>
-					{isCloudUser() && (
-						<div className="integrations-container">
-							<div className="integrations-content">
-								<RequestDashboardBtn />
-							</div>
-						</div>
-					)}
 				</div>
 
 				{isDashboardListLoading ||

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,95 +0,0 @@
-import '../../pages/Integrations/Integrations.styles.scss';
-
-import { LoadingOutlined } from '@ant-design/icons';
-import { Button, Input, Space, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { useNotifications } from 'hooks/useNotifications';
-import { Check } from 'lucide-react';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export function RequestDashboardBtn(): JSX.Element {
-	const [
-		isSubmittingRequestForDashboard,
-		setIsSubmittingRequestForDashboard,
-	] = useState(false);
-
-	const [requestedDashboardName, setRequestedDashboardName] = useState('');
-
-	const { notifications } = useNotifications();
-	const { t } = useTranslation(['common']);
-
-	const handleRequestDashboardSubmit = async (): Promise<void> => {
-		try {
-			setIsSubmittingRequestForDashboard(true);
-			const response = await logEvent('Dashboard Requested', {
-				screen: 'Dashboard list page',
-				dashboard: requestedDashboardName,
-			});
-
-			if (response.statusCode === 200) {
-				notifications.success({
-					message: 'Dashboard Request Submitted',
-				});
-
-				setIsSubmittingRequestForDashboard(false);
-			} else {
-				notifications.error({
-					message:
-						response.error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-
-				setIsSubmittingRequestForDashboard(false);
-			}
-		} catch (error) {
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-
-			setIsSubmittingRequestForDashboard(false);
-		}
-	};
-
-	return (
-		<div className="request-entity-container">
-			<Typography.Text>
-				Can&apos;t find the dashboard you need? Request a new Dashboard.
-			</Typography.Text>
-
-			<div className="form-section">
-				<Space.Compact style={{ width: '100%' }}>
-					<Input
-						placeholder="Enter dashboard name..."
-						style={{ width: 300, marginBottom: 0 }}
-						value={requestedDashboardName}
-						onChange={(e): void => setRequestedDashboardName(e.target.value)}
-					/>
-					<Button
-						className="periscope-btn primary"
-						icon={
-							isSubmittingRequestForDashboard ? (
-								<LoadingOutlined />
-							) : (
-								<Check size={12} />
-							)
-						}
-						type="primary"
-						onClick={handleRequestDashboardSubmit}
-						disabled={
-							isSubmittingRequestForDashboard ||
-							!requestedDashboardName ||
-							requestedDashboardName?.trim().length === 0
-						}
-					>
-						Submit
-					</Button>
-				</Space.Compact>
-			</div>
-		</div>
-	);
-}

frontend/src/container/LogDetailedView/utils.tsx

@@ -157,11 +157,6 @@ export const getFieldAttributes = (field: string): IFieldAttributes => {
 		const stringWithoutPrefix = field.slice('resources_'.length);
 		const parts = splitOnce(stringWithoutPrefix, '.');
 		[dataType, newField] = parts;
-	} else if (field.startsWith('scope_string')) {
-		logType = MetricsType.Scope;
-		const stringWithoutPrefix = field.slice('scope_'.length);
-		const parts = splitOnce(stringWithoutPrefix, '.');
-		[dataType, newField] = parts;
 	}
 
 	return { dataType, newField, logType };
@@ -192,7 +187,6 @@ export const aggregateAttributesResourcesToString = (logData: ILog): string => {
 		traceId: logData.traceId,
 		attributes: {},
 		resources: {},
-		scope: {},
 		severity_text: logData.severity_text,
 		severity_number: logData.severity_number,
 	};
@@ -204,9 +198,6 @@ export const aggregateAttributesResourcesToString = (logData: ILog): string => {
 		} else if (key.startsWith('resources_')) {
 			outputJson.resources = outputJson.resources || {};
 			Object.assign(outputJson.resources, logData[key as keyof ILog]);
-		} else if (key.startsWith('scope_string')) {
-			outputJson.scope = outputJson.scope || {};
-			Object.assign(outputJson.scope, logData[key as keyof ILog]);
 		} else {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore

frontend/src/container/MetricsApplication/constant.ts

@@ -53,7 +53,6 @@ export enum KeyOperationTableHeader {
 export enum MetricsType {
 	Tag = 'tag',
 	Resource = 'resource',
-	Scope = 'scope',
 }
 
 export enum WidgetKeys {

frontend/src/container/OnboardingContainer/Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-runApplication-consumers.md

@@ -1,32 +0,0 @@
- 
-
-Once you are done instrumenting your Java application, you can run it using the below commands
-
-**Note:**
-- Ensure you have Java and Maven installed. Compile your Java consumer applications: Ensure your consumer apps are compiled and ready to run.
-
-**Run Consumer App with Java Agent:**
-
-```bash
-java -javaagent:/path/to/opentelemetry-javaagent.jar \
-     -Dotel.service.name=consumer-svc \
-     -Dotel.traces.exporter=otlp \
-     -Dotel.metrics.exporter=otlp \
-     -Dotel.logs.exporter=otlp \
-     -Dotel.instrumentation.kafka.producer-propagation.enabled=true \
-     -Dotel.instrumentation.kafka.experimental-span-attributes=true \
-     -Dotel.instrumentation.kafka.metric-reporter.enabled=true \
-     -jar /path/to/your/consumer.jar
-```
-
-<path> - update it to the path where you downloaded the Java JAR agent in previous step
-<my-app> - Jar file of your application
-
-&nbsp;
-
-**Note:**
-- In case you're dockerising your application, make sure to dockerise it along with OpenTelemetry instrumentation done in previous step.
-
-&nbsp;
-
-If you encounter any difficulties, please consult the [troubleshooting section](https://signoz.io/docs/instrumentation/springboot/#troubleshooting-your-installation) for assistance.

frontend/src/container/OnboardingContainer/Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-runApplication-producers.md

@@ -1,29 +0,0 @@
- 
-
-Once you are done instrumenting your Java application, you can run it using the below commands
-
-**Note:**
-- Ensure you have Java and Maven installed. Compile your Java producer applications: Ensure your producer apps are compiled and ready to run.
-
-**Run Producer App with Java Agent:**
-
-```bash
-java -javaagent:/path/to/opentelemetry-javaagent.jar \
-     -Dotel.service.name=producer-svc \
-     -Dotel.traces.exporter=otlp \
-     -Dotel.metrics.exporter=otlp \
-     -Dotel.logs.exporter=otlp \
-     -jar /path/to/your/producer.jar
-```
-
-<path> - update it to the path where you downloaded the Java JAR agent in previous step
-<my-app> - Jar file of your application
-
-&nbsp;
-
-**Note:**
-- In case you're dockerising your application, make sure to dockerise it along with OpenTelemetry instrumentation done in previous step.
-
-&nbsp;
-
-If you encounter any difficulties, please consult the [troubleshooting section](https://signoz.io/docs/instrumentation/springboot/#troubleshooting-your-installation) for assistance.

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -312,7 +312,7 @@ export default function Onboarding(): JSX.Element {
 					<div
 						onClick={(): void => {
 							logEvent('Onboarding V2: Skip Button Clicked', {});
-							history.push(ROUTES.APPLICATION);
+							history.push('/');
 						}}
 						className="skip-to-console"
 					>

frontend/src/container/OnboardingContainer/Steps/ConnectionStatus/ConnectionStatus.tsx

@@ -6,16 +6,11 @@ import {
 	LoadingOutlined,
 } from '@ant-design/icons';
 import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
 import Header from 'container/OnboardingContainer/common/Header/Header';
 import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
-import { useOnboardingStatus } from 'hooks/messagingQueue / onboarding/useOnboardingStatus';
 import { useQueryService } from 'hooks/useQueryService';
 import useResourceAttribute from 'hooks/useResourceAttribute';
 import { convertRawQueriesToTraceSelectedTags } from 'hooks/useResourceAttribute/utils';
-import useUrlQuery from 'hooks/useUrlQuery';
-import MessagingQueueHealthCheck from 'pages/MessagingQueues/MessagingQueueHealthCheck/MessagingQueueHealthCheck';
-import { getAttributeDataFromOnboardingStatus } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -32,12 +27,6 @@ export default function ConnectionStatus(): JSX.Element {
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	const urlQuery = useUrlQuery();
-	const getStartedSource = urlQuery.get(QueryParams.getStartedSource);
-	const getStartedSourceService = urlQuery.get(
-		QueryParams.getStartedSourceService,
-	);
-
 	const {
 		serviceName,
 		selectedDataSource,
@@ -68,69 +57,8 @@ export default function ConnectionStatus(): JSX.Element {
 		maxTime,
 		selectedTime,
 		selectedTags,
-		options: {
-			enabled: getStartedSource !== 'kafka',
-		},
 	});
 
-	const [pollInterval, setPollInterval] = useState<number | false>(10000);
-	const {
-		data: onbData,
-		error: onbErr,
-		isFetching: onbFetching,
-	} = useOnboardingStatus(
-		{
-			enabled: getStartedSource === 'kafka',
-			refetchInterval: pollInterval,
-		},
-		getStartedSourceService || '',
-		'query-key-onboarding-status',
-	);
-
-	const [
-		shouldRetryOnboardingCall,
-		setShouldRetryOnboardingCall,
-	] = useState<boolean>(false);
-
-	useEffect(() => {
-		// runs only when the caller is coming from 'kafka' i.e. coming from Messaging Queues - setup helper
-		if (getStartedSource === 'kafka') {
-			if (onbData?.statusCode !== 200) {
-				setShouldRetryOnboardingCall(true);
-			} else if (onbData?.payload?.status === 'success') {
-				const attributeData = getAttributeDataFromOnboardingStatus(
-					onbData?.payload,
-				);
-				if (attributeData.overallStatus === 'success') {
-					setLoading(false);
-					setIsReceivingData(true);
-					setPollInterval(false);
-				} else {
-					setShouldRetryOnboardingCall(true);
-				}
-			}
-		}
-	}, [
-		shouldRetryOnboardingCall,
-		onbData,
-		onbErr,
-		onbFetching,
-		getStartedSource,
-	]);
-
-	useEffect(() => {
-		if (retryCount < 0 && getStartedSource === 'kafka') {
-			setPollInterval(false);
-			setLoading(false);
-		}
-	}, [retryCount, getStartedSource]);
-
-	useEffect(() => {
-		if (getStartedSource === 'kafka' && !onbFetching) {
-			setRetryCount((prevCount) => prevCount - 1);
-		}
-	}, [getStartedSource, onbData, onbFetching]);
-
 	const renderDocsReference = (): JSX.Element => {
 		switch (selectedDataSource?.name) {
 			case 'java':
@@ -264,27 +192,25 @@ export default function ConnectionStatus(): JSX.Element {
 	useEffect(() => {
 		let pollingTimer: string | number | NodeJS.Timer | undefined;
 
-		if (getStartedSource !== 'kafka') {
-			if (loading) {
-				pollingTimer = setInterval(() => {
-					// Trigger a refetch with the updated parameters
-					const updatedMinTime = (Date.now() - 15 * 60 * 1000) * 1000000;
-					const updatedMaxTime = Date.now() * 1000000;
+		if (loading) {
+			pollingTimer = setInterval(() => {
+				// Trigger a refetch with the updated parameters
+				const updatedMinTime = (Date.now() - 15 * 60 * 1000) * 1000000;
+				const updatedMaxTime = Date.now() * 1000000;
 
-					const payload = {
-						maxTime: updatedMaxTime,
-						minTime: updatedMinTime,
-						selectedTime,
-					};
+				const payload = {
+					maxTime: updatedMaxTime,
+					minTime: updatedMinTime,
+					selectedTime,
+				};
 
-					dispatch({
-						type: UPDATE_TIME_INTERVAL,
-						payload,
-					});
-				}, pollingInterval); // Same interval as pollingInterval
-			} else if (!loading && pollingTimer) {
-				clearInterval(pollingTimer);
-			}
+				dispatch({
+					type: UPDATE_TIME_INTERVAL,
+					payload,
+				});
+			}, pollingInterval); // Same interval as pollingInterval
+		} else if (!loading && pollingTimer) {
+			clearInterval(pollingTimer);
 		}
 
 		// Clean up the interval when the component unmounts
@@ -295,24 +221,15 @@ export default function ConnectionStatus(): JSX.Element {
 	}, [refetch, selectedTags, selectedTime, loading]);
 
 	useEffect(() => {
-		if (getStartedSource !== 'kafka') {
-			verifyApplicationData(data);
-		}
+		verifyApplicationData(data);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [isServiceLoading, data, error, isError]);
 
 	useEffect(() => {
-		if (getStartedSource !== 'kafka') {
-			refetch();
-		}
+		refetch();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const isQueryServiceLoading = useMemo(
-		() => isServiceLoading || loading || onbFetching,
-		[isServiceLoading, loading, onbFetching],
-	);
-
 	return (
 		<div className="connection-status-container">
 			<div className="full-docs-link">{renderDocsReference()}</div>
@@ -333,42 +250,30 @@ export default function ConnectionStatus(): JSX.Element {
 					<div className="label"> Status </div>
 
 					<div className="status">
-						{isQueryServiceLoading && <LoadingOutlined />}
-						{!isQueryServiceLoading &&
-							isReceivingData &&
-							(getStartedSource !== 'kafka' ? (
-								<>
-									<CheckCircleTwoTone twoToneColor="#52c41a" />
-									<span> Success </span>
-								</>
-							) : (
-								<MessagingQueueHealthCheck
-									serviceToInclude={[getStartedSourceService || '']}
-								/>
-							))}
-						{!isQueryServiceLoading &&
-							!isReceivingData &&
-							(getStartedSource !== 'kafka' ? (
-								<>
-									<CloseCircleTwoTone twoToneColor="#e84749" />
-									<span> Failed </span>
-								</>
-							) : (
-								<MessagingQueueHealthCheck
-									serviceToInclude={[getStartedSourceService || '']}
-								/>
-							))}
+						{(loading || isServiceLoading) && <LoadingOutlined />}
+						{!(loading || isServiceLoading) && isReceivingData && (
+							<>
+								<CheckCircleTwoTone twoToneColor="#52c41a" />
+								<span> Success </span>
+							</>
+						)}
+						{!(loading || isServiceLoading) && !isReceivingData && (
+							<>
+								<CloseCircleTwoTone twoToneColor="#e84749" />
+								<span> Failed </span>
+							</>
+						)}
 					</div>
 				</div>
 				<div className="details-info">
 					<div className="label"> Details </div>
 
 					<div className="details">
-						{isQueryServiceLoading && <div> Waiting for Update </div>}
-						{!isQueryServiceLoading && isReceivingData && (
+						{(loading || isServiceLoading) && <div> Waiting for Update </div>}
+						{!(loading || isServiceLoading) && isReceivingData && (
 							<div> Received data from the application successfully. </div>
 						)}
-						{!isQueryServiceLoading && !isReceivingData && (
+						{!(loading || isServiceLoading) && !isReceivingData && (
 							<div> Could not detect the install </div>
 						)}
 					</div>

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.styles.scss

@@ -74,11 +74,4 @@ div[class*='-setup-instructions-container'] {
 	.dataSourceName {
 		color: var(--bg-slate-500);
 	}
-}
-
-.supported-languages-container {
-	.disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-}
+}

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -6,21 +6,15 @@ import { LoadingOutlined } from '@ant-design/icons';
 import { Button, Card, Form, Input, Select, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
-import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
-import {
-	ModulesMap,
-	useCases,
-} from 'container/OnboardingContainer/OnboardingContainer';
+import { useCases } from 'container/OnboardingContainer/OnboardingContainer';
 import {
 	getDataSources,
 	getSupportedFrameworks,
 	hasFrameworks,
-	messagingQueueKakfaSupportedDataSources,
 } from 'container/OnboardingContainer/utils/dataSourceUtils';
 import { useNotifications } from 'hooks/useNotifications';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { Blocks, Check } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -39,8 +33,6 @@ export default function DataSource(): JSX.Element {
 	const { t } = useTranslation(['common']);
 	const history = useHistory();
 
-	const getStartedSource = useUrlQuery().get(QueryParams.getStartedSource);
-
 	const {
 		serviceName,
 		selectedModule,
@@ -52,9 +44,6 @@ export default function DataSource(): JSX.Element {
 		updateSelectedFramework,
 	} = useOnboardingContext();
 
-	const isKafkaAPM =
-		getStartedSource === 'kafka' && selectedModule?.id === ModulesMap.APM;
-
 	const [supportedDataSources, setSupportedDataSources] = useState<
 		DataSourceType[]
 	>([]);
@@ -161,19 +150,13 @@ export default function DataSource(): JSX.Element {
 						className={cx(
 							'supported-language',
 							selectedDataSource?.name === dataSource.name ? 'selected' : '',
-							isKafkaAPM &&
-								!messagingQueueKakfaSupportedDataSources.includes(dataSource?.id || '')
-								? 'disabled'
-								: '',
 						)}
 						key={dataSource.name}
 						onClick={(): void => {
-							if (!isKafkaAPM) {
-								updateSelectedFramework(null);
-								updateSelectedEnvironment(null);
-								updateSelectedDataSource(dataSource);
-								form.setFieldsValue({ selectFramework: null });
-							}
+							updateSelectedFramework(null);
+							updateSelectedEnvironment(null);
+							updateSelectedDataSource(dataSource);
+							form.setFieldsValue({ selectFramework: null });
 						}}
 					>
 						<div>

frontend/src/container/OnboardingContainer/Steps/MarkdownStep/MarkdownStep.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import { QueryParams } from 'constants/query';
 import { ApmDocFilePaths } from 'container/OnboardingContainer/constants/apmDocFilePaths';
 import { AwsMonitoringDocFilePaths } from 'container/OnboardingContainer/constants/awsMonitoringDocFilePaths';
 import { AzureMonitoringDocFilePaths } from 'container/OnboardingContainer/constants/azureMonitoringDocFilePaths';
@@ -11,7 +10,6 @@ import {
 	useOnboardingContext,
 } from 'container/OnboardingContainer/context/OnboardingContext';
 import { ModulesMap } from 'container/OnboardingContainer/OnboardingContainer';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { useEffect, useState } from 'react';
 
 export interface IngestionInfoProps {
@@ -33,12 +31,6 @@ export default function MarkdownStep(): JSX.Element {
 
 	const [markdownContent, setMarkdownContent] = useState('');
 
-	const urlQuery = useUrlQuery();
-	const getStartedSource = urlQuery.get(QueryParams.getStartedSource);
-	const getStartedSourceService = urlQuery.get(
-		QueryParams.getStartedSourceService,
-	);
-
 	const { step } = activeStep;
 
 	const getFilePath = (): any => {
@@ -62,12 +54,6 @@ export default function MarkdownStep(): JSX.Element {
 
 		path += `_${step?.id}`;
 
-		if (
-			getStartedSource === 'kafka' &&
-			path === 'APM_java_springBoot_kubernetes_recommendedSteps_runApplication' // todo: Sagar - Make this generic logic in followup PRs
-		) {
-			path += `_${getStartedSourceService}`;
-		}
 		return path;
 	};
 

frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts

@@ -252,8 +252,6 @@ import APM_java_springBoot_docker_recommendedSteps_runApplication from '../Modul
 import APM_java_springBoot_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-installOtelCollector.md';
 import APM_java_springBoot_kubernetes_recommendedSteps_instrumentApplication from '../Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-instrumentApplication.md';
 import APM_java_springBoot_kubernetes_recommendedSteps_runApplication from '../Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-runApplication.md';
-import APM_java_springBoot_kubernetes_recommendedSteps_runApplication_consumers from '../Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-runApplication-consumers.md';
-import APM_java_springBoot_kubernetes_recommendedSteps_runApplication_producers from '../Modules/APM/Java/md-docs/SpringBoot/Kubernetes/springBoot-kubernetes-runApplication-producers.md';
 // SpringBoot-LinuxAMD64-quickstart
 import APM_java_springBoot_linuxAMD64_quickStart_instrumentApplication from '../Modules/APM/Java/md-docs/SpringBoot/LinuxAMD64/QuickStart/springBoot-linuxamd64-quickStart-instrumentApplication.md';
 import APM_java_springBoot_linuxAMD64_quickStart_runApplication from '../Modules/APM/Java/md-docs/SpringBoot/LinuxAMD64/QuickStart/springBoot-linuxamd64-quickStart-runApplication.md';
@@ -1055,8 +1053,6 @@ export const ApmDocFilePaths = {
 	APM_java_springBoot_kubernetes_recommendedSteps_setupOtelCollector,
 	APM_java_springBoot_kubernetes_recommendedSteps_instrumentApplication,
 	APM_java_springBoot_kubernetes_recommendedSteps_runApplication,
-	APM_java_springBoot_kubernetes_recommendedSteps_runApplication_producers,
-	APM_java_springBoot_kubernetes_recommendedSteps_runApplication_consumers,
 
 	// SpringBoot-LinuxAMD64-recommended
 	APM_java_springBoot_linuxAMD64_recommendedSteps_setupOtelCollector,

frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts

@@ -399,5 +399,3 @@ export const moduleRouteMap = {
 	[ModulesMap.AwsMonitoring]: ROUTES.GET_STARTED_AWS_MONITORING,
 	[ModulesMap.AzureMonitoring]: ROUTES.GET_STARTED_AZURE_MONITORING,
 };
-
-export const messagingQueueKakfaSupportedDataSources = ['java'];

frontend/src/container/OnboardingQuestionaire/AboutSigNozQuestions/AboutSigNozQuestions.tsx

@@ -1,235 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import '../OnboardingQuestionaire.styles.scss';
-
-import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { ArrowLeft, ArrowRight, CheckCircle } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-export interface SignozDetails {
-	hearAboutSignoz: string | null;
-	interestInSignoz: string | null;
-	otherInterestInSignoz: string | null;
-	otherAboutSignoz: string | null;
-}
-
-interface AboutSigNozQuestionsProps {
-	signozDetails: SignozDetails;
-	setSignozDetails: (details: SignozDetails) => void;
-	onNext: () => void;
-	onBack: () => void;
-}
-
-const hearAboutSignozOptions: Record<string, string> = {
-	search: 'Google / Search',
-	hackerNews: 'Hacker News',
-	linkedin: 'LinkedIn',
-	twitter: 'Twitter',
-	reddit: 'Reddit',
-	colleaguesFriends: 'Colleagues / Friends',
-};
-
-const interestedInOptions: Record<string, string> = {
-	savingCosts: 'Saving costs',
-	otelNativeStack: 'Interested in Otel-native stack',
-	allInOne: 'All in one (Logs, Metrics & Traces)',
-};
-
-export function AboutSigNozQuestions({
-	signozDetails,
-	setSignozDetails,
-	onNext,
-	onBack,
-}: AboutSigNozQuestionsProps): JSX.Element {
-	const [hearAboutSignoz, setHearAboutSignoz] = useState<string | null>(
-		signozDetails?.hearAboutSignoz || null,
-	);
-	const [otherAboutSignoz, setOtherAboutSignoz] = useState<string>(
-		signozDetails?.otherAboutSignoz || '',
-	);
-	const [interestInSignoz, setInterestInSignoz] = useState<string | null>(
-		signozDetails?.interestInSignoz || null,
-	);
-	const [otherInterestInSignoz, setOtherInterestInSignoz] = useState<string>(
-		signozDetails?.otherInterestInSignoz || '',
-	);
-	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
-
-	useEffect((): void => {
-		if (
-			hearAboutSignoz !== null &&
-			(hearAboutSignoz !== 'Others' || otherAboutSignoz !== '') &&
-			interestInSignoz !== null &&
-			(interestInSignoz !== 'Others' || otherInterestInSignoz !== '')
-		) {
-			setIsNextDisabled(false);
-		} else {
-			setIsNextDisabled(true);
-		}
-	}, [
-		hearAboutSignoz,
-		otherAboutSignoz,
-		interestInSignoz,
-		otherInterestInSignoz,
-	]);
-
-	const handleOnNext = (): void => {
-		setSignozDetails({
-			hearAboutSignoz,
-			otherAboutSignoz,
-			interestInSignoz,
-			otherInterestInSignoz,
-		});
-
-		logEvent('Org Onboarding: Answered', {
-			hearAboutSignoz,
-			otherAboutSignoz,
-			interestInSignoz,
-			otherInterestInSignoz,
-		});
-
-		onNext();
-	};
-
-	const handleOnBack = (): void => {
-		setSignozDetails({
-			hearAboutSignoz,
-			otherAboutSignoz,
-			interestInSignoz,
-			otherInterestInSignoz,
-		});
-
-		onBack();
-	};
-
-	return (
-		<div className="questions-container">
-			<Typography.Title level={3} className="title">
-				Tell Us About Your Interest in SigNoz
-			</Typography.Title>
-			<Typography.Paragraph className="sub-title">
-				We&apos;d love to know a little bit about you and your interest in SigNoz
-			</Typography.Paragraph>
-
-			<div className="questions-form-container">
-				<div className="questions-form">
-					<div className="form-group">
-						<div className="question">Where did you hear about SigNoz?</div>
-						<div className="two-column-grid">
-							{Object.keys(hearAboutSignozOptions).map((option: string) => (
-								<Button
-									key={option}
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										hearAboutSignoz === option ? 'active' : ''
-									}`}
-									onClick={(): void => setHearAboutSignoz(option)}
-								>
-									{hearAboutSignozOptions[option]}
-									{hearAboutSignoz === option && (
-										<CheckCircle size={12} color={Color.BG_FOREST_500} />
-									)}
-								</Button>
-							))}
-
-							{hearAboutSignoz === 'Others' ? (
-								<Input
-									type="text"
-									className="onboarding-questionaire-other-input"
-									placeholder="How you got to know about us"
-									value={otherAboutSignoz}
-									autoFocus
-									addonAfter={
-										otherAboutSignoz !== '' ? (
-											<CheckCircle size={12} color={Color.BG_FOREST_500} />
-										) : (
-											''
-										)
-									}
-									onChange={(e): void => setOtherAboutSignoz(e.target.value)}
-								/>
-							) : (
-								<Button
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										hearAboutSignoz === 'Others' ? 'active' : ''
-									}`}
-									onClick={(): void => setHearAboutSignoz('Others')}
-								>
-									Others
-								</Button>
-							)}
-						</div>
-					</div>
-
-					<div className="form-group">
-						<div className="question">What got you interested in SigNoz?</div>
-						<div className="two-column-grid">
-							{Object.keys(interestedInOptions).map((option: string) => (
-								<Button
-									key={option}
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										interestInSignoz === option ? 'active' : ''
-									}`}
-									onClick={(): void => setInterestInSignoz(option)}
-								>
-									{interestedInOptions[option]}
-									{interestInSignoz === option && (
-										<CheckCircle size={12} color={Color.BG_FOREST_500} />
-									)}
-								</Button>
-							))}
-
-							{interestInSignoz === 'Others' ? (
-								<Input
-									type="text"
-									className="onboarding-questionaire-other-input"
-									placeholder="Please specify your interest"
-									value={otherInterestInSignoz}
-									autoFocus
-									addonAfter={
-										otherInterestInSignoz !== '' ? (
-											<CheckCircle size={12} color={Color.BG_FOREST_500} />
-										) : (
-											''
-										)
-									}
-									onChange={(e): void => setOtherInterestInSignoz(e.target.value)}
-								/>
-							) : (
-								<Button
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										interestInSignoz === 'Others' ? 'active' : ''
-									}`}
-									onClick={(): void => setInterestInSignoz('Others')}
-								>
-									Others
-								</Button>
-							)}
-						</div>
-					</div>
-				</div>
-
-				<div className="next-prev-container">
-					<Button type="default" className="next-button" onClick={handleOnBack}>
-						<ArrowLeft size={14} />
-						Back
-					</Button>
-
-					<Button
-						type="primary"
-						className={`next-button ${isNextDisabled ? 'disabled' : ''}`}
-						onClick={handleOnNext}
-						disabled={isNextDisabled}
-					>
-						Next
-						<ArrowRight size={14} />
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss

@@ -1,122 +0,0 @@
-.team-member-container {
-	display: flex;
-	align-items: center;
-
-	.team-member-role-select {
-		width: 20%;
-
-		.ant-select-selector {
-			border: 1px solid #1d212d;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-		}
-	}
-
-	.team-member-email-input {
-		width: 80%;
-		background-color: #121317;
-		border-top-right-radius: 0px;
-		border-bottom-right-radius: 0px;
-
-		.ant-input,
-		.ant-input-group-addon {
-			background-color: #121317 !important;
-			border-right: 0px;
-			border-top-right-radius: 0px;
-			border-bottom-right-radius: 0px;
-		}
-	}
-}
-
-.questions-form-container {
-	.error-message-container,
-	.success-message-container,
-	.partially-sent-invites-container {
-		border-radius: 4px;
-		width: 100%;
-		display: flex;
-		align-items: center;
-
-		.error-message,
-		.success-message {
-			font-size: 12px;
-			font-weight: 400;
-
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-
-	.invite-users-error-message-container,
-	.invite-users-success-message-container {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 8px;
-
-		.success-message {
-			color: var(--bg-success-500, #00b37e);
-		}
-	}
-
-	.partially-sent-invites-container {
-		margin-top: 16px;
-		padding: 8px;
-		border: 1px solid #1d212d;
-		background-color: #121317;
-
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 8px;
-
-		.partially-sent-invites-message {
-			color: var(--bg-warning-500, #fbbd23);
-
-			font-size: 12px;
-			font-weight: 400;
-
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		}
-	}
-}
-
-.lightMode {
-	.team-member-container {
-		.team-member-role-select {
-			.ant-select-selector {
-				border: 1px solid var(--bg-vanilla-300);
-			}
-		}
-
-		.team-member-email-input {
-			background-color: var(--bg-vanilla-100);
-
-			.ant-input,
-			.ant-input-group-addon {
-				background-color: var(--bg-vanilla-100) !important;
-			}
-		}
-	}
-
-	.questions-form-container {
-		.invite-users-error-message-container,
-		.invite-users-success-message-container {
-			.success-message {
-				color: var(--bg-success-500, #00b37e);
-			}
-		}
-
-		.partially-sent-invites-container {
-			border: 1px solid var(--bg-vanilla-300);
-			background-color: var(--bg-vanilla-100);
-
-			.partially-sent-invites-message {
-				color: var(--bg-warning-500, #fbbd23);
-			}
-		}
-	}
-}

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.tsx

@@ -1,450 +0,0 @@
-import './InviteTeamMembers.styles.scss';
-
-import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Select, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import inviteUsers from 'api/user/inviteUsers';
-import { AxiosError } from 'axios';
-import { cloneDeep, debounce, isEmpty } from 'lodash-es';
-import {
-	ArrowLeft,
-	ArrowRight,
-	CheckCircle,
-	Loader2,
-	Plus,
-	TriangleAlert,
-	X,
-} from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
-import { SuccessResponse } from 'types/api';
-import {
-	FailedInvite,
-	InviteUsersResponse,
-	SuccessfulInvite,
-} from 'types/api/user/inviteUsers';
-import { v4 as uuid } from 'uuid';
-
-interface TeamMember {
-	email: string;
-	role: string;
-	name: string;
-	frontendBaseUrl: string;
-	id: string;
-}
-
-interface InviteTeamMembersProps {
-	isLoading: boolean;
-	teamMembers: TeamMember[] | null;
-	setTeamMembers: (teamMembers: TeamMember[]) => void;
-	onNext: () => void;
-	onBack: () => void;
-}
-
-function InviteTeamMembers({
-	isLoading,
-	teamMembers,
-	setTeamMembers,
-	onNext,
-	onBack,
-}: InviteTeamMembersProps): JSX.Element {
-	const [teamMembersToInvite, setTeamMembersToInvite] = useState<
-		TeamMember[] | null
-	>(teamMembers);
-	const [emailValidity, setEmailValidity] = useState<Record<string, boolean>>(
-		{},
-	);
-	const [hasInvalidEmails, setHasInvalidEmails] = useState<boolean>(false);
-
-	const [hasErrors, setHasErrors] = useState<boolean>(true);
-
-	const [error, setError] = useState<string | null>(null);
-
-	const [inviteUsersErrorResponse, setInviteUsersErrorResponse] = useState<
-		string[] | null
-	>(null);
-
-	const [inviteUsersSuccessResponse, setInviteUsersSuccessResponse] = useState<
-		string[] | null
-	>(null);
-
-	const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
-
-	const defaultTeamMember: TeamMember = {
-		email: '',
-		role: 'EDITOR',
-		name: '',
-		frontendBaseUrl: window.location.origin,
-		id: '',
-	};
-
-	useEffect(() => {
-		if (isEmpty(teamMembers)) {
-			const teamMember = {
-				...defaultTeamMember,
-				id: uuid(),
-			};
-
-			setTeamMembersToInvite([teamMember]);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [teamMembers]);
-
-	const handleAddTeamMember = (): void => {
-		const newTeamMember = {
-			...defaultTeamMember,
-			id: uuid(),
-		};
-		setTeamMembersToInvite((prev) => [...(prev || []), newTeamMember]);
-	};
-
-	const handleRemoveTeamMember = (id: string): void => {
-		setTeamMembersToInvite((prev) => (prev || []).filter((m) => m.id !== id));
-	};
-
-	// Validation function to check all users
-	const validateAllUsers = (): boolean => {
-		let isValid = true;
-
-		const updatedValidity: Record<string, boolean> = {};
-
-		teamMembersToInvite?.forEach((member) => {
-			const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(member.email);
-			if (!emailValid || !member.email) {
-				isValid = false;
-				setHasInvalidEmails(true);
-			}
-			updatedValidity[member.id!] = emailValid;
-		});
-
-		setEmailValidity(updatedValidity);
-
-		return isValid;
-	};
-
-	const parseInviteUsersSuccessResponse = (
-		response: SuccessfulInvite[],
-	): string[] => response.map((invite) => `${invite.email} - Invite Sent`);
-
-	const parseInviteUsersErrorResponse = (response: FailedInvite[]): string[] =>
-		response.map((invite) => `${invite.email} - ${invite.error}`);
-
-	const handleError = (error: AxiosError): void => {
-		const errorMessage = error.response?.data as InviteUsersResponse;
-
-		if (errorMessage?.status === 'failure') {
-			setHasErrors(true);
-
-			const failedInvitesErrorResponse = parseInviteUsersErrorResponse(
-				errorMessage.failed_invites,
-			);
-
-			setInviteUsersErrorResponse(failedInvitesErrorResponse);
-		}
-	};
-
-	const handleInviteUsersSuccess = (
-		response: SuccessResponse<InviteUsersResponse>,
-	): void => {
-		const inviteUsersResponse = response.payload as InviteUsersResponse;
-
-		if (inviteUsersResponse?.status === 'success') {
-			const successfulInvites = parseInviteUsersSuccessResponse(
-				inviteUsersResponse.successful_invites,
-			);
-
-			setDisableNextButton(true);
-
-			setError(null);
-			setHasErrors(false);
-			setInviteUsersErrorResponse(null);
-
-			setInviteUsersSuccessResponse(successfulInvites);
-
-			logEvent('Org Onboarding: Invite Team Members Success', {
-				teamMembers: teamMembersToInvite,
-				totalInvites: inviteUsersResponse.summary.total_invites,
-				successfulInvites: inviteUsersResponse.summary.successful_invites,
-				failedInvites: inviteUsersResponse.summary.failed_invites,
-			});
-
-			setTimeout(() => {
-				setDisableNextButton(false);
-				onNext();
-			}, 1000);
-		} else if (inviteUsersResponse?.status === 'partial_success') {
-			const successfulInvites = parseInviteUsersSuccessResponse(
-				inviteUsersResponse.successful_invites,
-			);
-
-			setInviteUsersSuccessResponse(successfulInvites);
-
-			logEvent('Org Onboarding: Invite Team Members Partial Success', {
-				teamMembers: teamMembersToInvite,
-				totalInvites: inviteUsersResponse.summary.total_invites,
-				successfulInvites: inviteUsersResponse.summary.successful_invites,
-				failedInvites: inviteUsersResponse.summary.failed_invites,
-			});
-
-			if (inviteUsersResponse.failed_invites.length > 0) {
-				setHasErrors(true);
-
-				setInviteUsersErrorResponse(
-					parseInviteUsersErrorResponse(inviteUsersResponse.failed_invites),
-				);
-			}
-		}
-	};
-
-	const { mutate: sendInvites, isLoading: isSendingInvites } = useMutation(
-		inviteUsers,
-		{
-			onSuccess: (response: SuccessResponse<InviteUsersResponse>): void => {
-				handleInviteUsersSuccess(response);
-			},
-			onError: (error: AxiosError): void => {
-				logEvent('Org Onboarding: Invite Team Members Failed', {
-					teamMembers: teamMembersToInvite,
-				});
-
-				handleError(error);
-			},
-		},
-	);
-
-	const handleNext = (): void => {
-		if (validateAllUsers()) {
-			setTeamMembers(teamMembersToInvite || []);
-
-			setHasInvalidEmails(false);
-			setError(null);
-			setHasErrors(false);
-			setInviteUsersErrorResponse(null);
-			setInviteUsersSuccessResponse(null);
-
-			sendInvites({
-				users: teamMembersToInvite || [],
-			});
-		}
-	};
-
-	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const debouncedValidateEmail = useCallback(
-		debounce((email: string, memberId: string) => {
-			const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-			setEmailValidity((prev) => ({ ...prev, [memberId]: isValid }));
-		}, 500),
-		[],
-	);
-
-	const handleEmailChange = (
-		e: React.ChangeEvent<HTMLInputElement>,
-		member: TeamMember,
-	): void => {
-		const { value } = e.target;
-		const updatedMembers = cloneDeep(teamMembersToInvite || []);
-
-		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-		if (memberToUpdate) {
-			memberToUpdate.email = value;
-			setTeamMembersToInvite(updatedMembers);
-			debouncedValidateEmail(value, member.id!);
-		}
-	};
-
-	const handleRoleChange = (role: string, member: TeamMember): void => {
-		const updatedMembers = cloneDeep(teamMembersToInvite || []);
-		const memberToUpdate = updatedMembers.find((m) => m.id === member.id);
-		if (memberToUpdate) {
-			memberToUpdate.role = role;
-			setTeamMembersToInvite(updatedMembers);
-		}
-	};
-
-	const handleDoLater = (): void => {
-		logEvent('Org Onboarding: Clicked Do Later', {
-			currentPageID: 4,
-		});
-
-		onNext();
-	};
-
-	return (
-		<div className="questions-container">
-			<Typography.Title level={3} className="title">
-				Invite your team members
-			</Typography.Title>
-			<Typography.Paragraph className="sub-title">
-				The more your team uses SigNoz, the stronger your observability. Share
-				dashboards, collaborate on alerts, and troubleshoot faster together.
-			</Typography.Paragraph>
-
-			<div className="questions-form-container">
-				<div className="questions-form invite-team-members-form">
-					<div className="form-group">
-						<div className="question-label">
-							Collaborate with your team
-							<div className="question-sub-label">
-								Invite your team to the SigNoz workspace
-							</div>
-						</div>
-
-						<div className="invite-team-members-container">
-							{teamMembersToInvite?.map((member) => (
-								<div className="team-member-container" key={member.id}>
-									<Input
-										placeholder="your-teammate@org.com"
-										value={member.email}
-										type="email"
-										required
-										autoFocus
-										autoComplete="off"
-										className="team-member-email-input"
-										onChange={(e: React.ChangeEvent<HTMLInputElement>): void =>
-											handleEmailChange(e, member)
-										}
-										addonAfter={
-											// eslint-disable-next-line no-nested-ternary
-											emailValidity[member.id!] === undefined ? null : emailValidity[
-													member.id!
-											  ] ? (
-												<CheckCircle size={14} color={Color.BG_FOREST_500} />
-											) : (
-												<TriangleAlert size={14} color={Color.BG_SIENNA_500} />
-											)
-										}
-									/>
-									<Select
-										defaultValue={member.role}
-										onChange={(value): void => handleRoleChange(value, member)}
-										className="team-member-role-select"
-									>
-										<Select.Option value="VIEWER">Viewer</Select.Option>
-										<Select.Option value="EDITOR">Editor</Select.Option>
-										<Select.Option value="ADMIN">Admin</Select.Option>
-									</Select>
-
-									{teamMembersToInvite?.length > 1 && (
-										<Button
-											type="primary"
-											className="remove-team-member-button"
-											icon={<X size={14} />}
-											onClick={(): void => handleRemoveTeamMember(member.id)}
-										/>
-									)}
-								</div>
-							))}
-						</div>
-
-						<div className="invite-team-members-add-another-member-container">
-							<Button
-								type="primary"
-								className="add-another-member-button"
-								icon={<Plus size={14} />}
-								onClick={handleAddTeamMember}
-							>
-								Member
-							</Button>
-						</div>
-					</div>
-
-					{hasInvalidEmails && (
-						<div className="error-message-container">
-							<Typography.Text className="error-message" type="danger">
-								<TriangleAlert size={14} /> Please enter valid emails for all team
-								members
-							</Typography.Text>
-						</div>
-					)}
-
-					{error && (
-						<div className="error-message-container">
-							<Typography.Text className="error-message" type="danger">
-								<TriangleAlert size={14} /> {error}
-							</Typography.Text>
-						</div>
-					)}
-
-					{hasErrors && (
-						<>
-							{/* show only when invites are sent successfully & partial error is present */}
-							{inviteUsersSuccessResponse && inviteUsersErrorResponse && (
-								<div className="success-message-container invite-users-success-message-container">
-									{inviteUsersSuccessResponse?.map((success, index) => (
-										<Typography.Text
-											className="success-message"
-											// eslint-disable-next-line react/no-array-index-key
-											key={`${success}-${index}`}
-										>
-											<CheckCircle size={14} /> {success}
-										</Typography.Text>
-									))}
-								</div>
-							)}
-
-							<div className="error-message-container invite-users-error-message-container">
-								{inviteUsersErrorResponse?.map((error, index) => (
-									<Typography.Text
-										className="error-message"
-										type="danger"
-										// eslint-disable-next-line react/no-array-index-key
-										key={`${error}-${index}`}
-									>
-										<TriangleAlert size={14} /> {error}
-									</Typography.Text>
-								))}
-							</div>
-						</>
-					)}
-				</div>
-
-				{/* Partially sent invites */}
-				{inviteUsersSuccessResponse && inviteUsersErrorResponse && (
-					<div className="partially-sent-invites-container">
-						<Typography.Text className="partially-sent-invites-message">
-							<TriangleAlert size={14} />
-							Some invites were sent successfully. Please fix the errors above and
-							resend invites.
-						</Typography.Text>
-
-						<Typography.Text className="partially-sent-invites-message">
-							You can click on I&apos;ll do this later to go to next step.
-						</Typography.Text>
-					</div>
-				)}
-
-				<div className="next-prev-container">
-					<Button type="default" className="next-button" onClick={onBack}>
-						<ArrowLeft size={14} />
-						Back
-					</Button>
-
-					<Button
-						type="primary"
-						className="next-button"
-						onClick={handleNext}
-						loading={isSendingInvites || isLoading || disableNextButton}
-					>
-						Send Invites
-						<ArrowRight size={14} />
-					</Button>
-				</div>
-
-				<div className="do-later-container">
-					<Button
-						type="link"
-						className="do-later-button"
-						onClick={handleDoLater}
-						disabled={isSendingInvites || disableNextButton}
-					>
-						{isLoading && <Loader2 className="animate-spin" size={16} />}
-
-						<span>I&apos;ll do this later</span>
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default InviteTeamMembers;

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.styles.scss

@@ -1,49 +0,0 @@
-.footer-main-container {
-	display: flex;
-	justify-content: center;
-	box-sizing: border-box;
-}
-
-.footer-container {
-	display: inline-flex;
-	height: 36px;
-	padding: 12px;
-	justify-content: center;
-	align-items: center;
-	gap: 32px;
-	flex-shrink: 0;
-	border-radius: 4px;
-	border: 1px solid var(--Greyscale-Slate-500, #161922);
-	background: var(--Ink-400, #121317);
-
-	width: 100%;
-	max-width: 600px;
-}
-
-.footer-container .footer-content {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-}
-
-.footer-container .footer-link {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	color: #c0c1c3;
-}
-
-.footer-container .footer-text {
-	color: var(--Vanilla-400, var(--Greyscale-Vanilla-400, #c0c1c3));
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: normal;
-	letter-spacing: 0.2px;
-}
-
-.footer-container .footer-dot {
-	width: 4px;
-	height: 4px;
-	fill: var(--Greyscale-Slate-200, #2c3140);
-}

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/OnboardingFooter.tsx

@@ -1,31 +0,0 @@
-import './OnboardingFooter.styles.scss';
-
-import { Dot } from 'lucide-react';
-
-export function OnboardingFooter(): JSX.Element {
-	return (
-		<section className="footer-main-container">
-			<div className="footer-container">
-				<a
-					href="https://trust.signoz.io/"
-					target="_blank"
-					className="footer-content"
-					rel="noreferrer"
-				>
-					<img src="/logos/hippa.svg" alt="HIPPA" className="footer-logo" />
-					<span className="footer-text">HIPPA</span>
-				</a>
-				<Dot size={24} color="#2C3140" />
-				<a
-					href="https://trust.signoz.io/"
-					target="_blank"
-					className="footer-content"
-					rel="noreferrer"
-				>
-					<img src="/logos/soc2.svg" alt="SOC2" className="footer-logo" />
-					<span className="footer-text">SOC2</span>
-				</a>
-			</div>
-		</section>
-	);
-}

frontend/src/container/OnboardingQuestionaire/OnboardingFooter/index.ts

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

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.styles.scss

@@ -1,65 +0,0 @@
-.header-container {
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 12px 0px;
-
-	box-sizing: border-box;
-}
-
-.header-container .logo-container {
-	display: flex;
-	align-items: center;
-	gap: 10px;
-}
-
-.header-container .logo-container img {
-	height: 17.5px;
-	width: 17.5px;
-}
-
-.header-container .logo-text {
-	font-family: 'Work Sans', sans-serif;
-	color: var(--bg-vanilla-100);
-	font-size: 15.4px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 17.5px;
-}
-
-.header-container .get-help-container {
-	display: flex;
-	width: 113px;
-	height: 32px;
-	padding: 6px;
-	justify-content: center;
-	align-items: center;
-	gap: 6px;
-	flex-shrink: 0;
-	border-radius: 2px;
-	border: 1px solid var(--bg-slate-400);
-	background: var(--bg-ink-300);
-	box-shadow: none;
-}
-
-.header-container .get-help-container img {
-	width: 12px;
-	height: 12px;
-	flex-shrink: 0;
-}
-
-.header-container .get-help-text {
-	color: var(--bg-vanilla-400);
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 10px;
-	letter-spacing: 0.12px;
-}
-
-.lightMode {
-	.header-container .logo-text {
-		color: var(--bg-slate-300);
-	}
-}

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/OnboardingHeader.tsx

@@ -1,12 +0,0 @@
-import './OnboardingHeader.styles.scss';
-
-export function OnboardingHeader(): JSX.Element {
-	return (
-		<div className="header-container">
-			<div className="logo-container">
-				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
-				<span className="logo-text">SigNoz</span>
-			</div>
-		</div>
-	);
-}

frontend/src/container/OnboardingQuestionaire/OnboardingHeader/index.ts

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

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -1,597 +0,0 @@
-.onboarding-questionaire-container {
-	width: 100%;
-	display: flex;
-	margin: 0 auto;
-	align-items: center;
-	flex-direction: column;
-	height: 100vh;
-	max-width: 1176px;
-
-	.onboarding-questionaire-header {
-		width: 100%;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		height: 56px;
-	}
-
-	.onboarding-questionaire-content {
-		height: calc(100vh - 56px - 60px);
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		overflow-y: auto;
-
-		.questions-container {
-			color: var(--bg-vanilla-100, #fff);
-			font-family: Inter;
-			font-size: 24px;
-			font-style: normal;
-			font-weight: 600;
-			line-height: 32px;
-			max-width: 600px;
-			margin: 0 auto;
-			border-radius: 8px;
-			max-height: 100%;
-		}
-
-		.title {
-			color: var(--bg-vanilla-100) !important;
-			font-size: 24px !important;
-			line-height: 32px !important;
-			margin-bottom: 8px !important;
-		}
-
-		.sub-title {
-			color: var(--bg-vanilla-400) !important;
-			font-size: 14px !important;
-			font-style: normal;
-			font-weight: 400 !important;
-			line-height: 24px !important;
-			margin-top: 0px !important;
-			margin-bottom: 24px !important;
-		}
-
-		.questions-form-container {
-			max-width: 600px;
-			width: 600px;
-			margin: 0 auto;
-		}
-
-		.questions-form {
-			width: 100%;
-			display: flex;
-			min-height: 420px;
-			padding: 20px 24px 24px 24px;
-			flex-direction: column;
-			align-items: center;
-			gap: 24px;
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-500);
-			background: var(--bg-ink-400);
-
-			.ant-form-item {
-				margin-bottom: 0px !important;
-
-				.ant-form-item-label {
-					label {
-						color: var(--bg-vanilla-100) !important;
-						font-size: 13px !important;
-						font-weight: 500;
-						line-height: 20px;
-					}
-				}
-			}
-
-			&.invite-team-members-form {
-				min-height: calc(420px - 24px);
-				max-height: calc(420px - 24px);
-
-				.invite-team-members-container {
-					max-height: 260px;
-					overflow-y: auto;
-
-					&::-webkit-scrollbar {
-						width: 0.1rem;
-					}
-					&::-webkit-scrollbar-corner {
-						background: transparent;
-					}
-					&::-webkit-scrollbar-thumb {
-						background: rgb(136, 136, 136);
-						border-radius: 0.625rem;
-					}
-					&::-webkit-scrollbar-track {
-						background: transparent;
-					}
-				}
-			}
-		}
-
-		.invite-team-members-container {
-			display: flex;
-			width: 100%;
-			flex-direction: column;
-			gap: 12px;
-
-			.ant-input-group {
-				width: 100%;
-
-				.ant-input {
-					font-size: 12px;
-
-					height: 32px;
-					background: var(--Ink-300, #16181d);
-					border: 1px solid var(--bg-slate-400);
-					color: var(--bg-vanilla-400);
-				}
-
-				.ant-input-group-addon {
-					font-size: 11px;
-					height: 32px;
-					min-width: 80px;
-					background: var(--Ink-300, #16181d);
-					border: 1px solid var(--Greyscale-Slate-400, #1d212d);
-					border-left: 0px;
-					color: var(--bg-vanilla-400);
-				}
-			}
-		}
-
-		.question-label {
-			color: var(--bg-vanilla-100);
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px;
-		}
-
-		.question-sub-label {
-			color: var(--bg-vanilla-400);
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 16px;
-		}
-
-		.next-prev-container {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			gap: 10px;
-			margin-bottom: 24px;
-
-			.ant-btn {
-				flex: 1;
-			}
-		}
-
-		.form-group {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 8px;
-			align-self: stretch;
-		}
-
-		.slider-container {
-			width: 100%;
-
-			.ant-slider .ant-slider-mark {
-				font-size: 10px;
-			}
-		}
-
-		.do-later-container {
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-top: 24px;
-
-			.do-later-button {
-				font-size: 12px;
-
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				gap: 8px;
-			}
-		}
-
-		.question {
-			color: var(--bg-vanilla-100);
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px;
-
-			display: flex;
-			align-items: center;
-			gap: 8px;
-		}
-
-		input[type='text'] {
-			width: 100%;
-			padding: 12px;
-			border-radius: 2px;
-			font-size: 14px;
-			height: 40px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			color: var(--bg-vanilla-100);
-
-			&:focus-visible {
-				outline: none;
-			}
-		}
-
-		.radio-group,
-		.grid,
-		.tool-grid {
-			display: flex;
-			align-items: flex-start;
-			align-content: flex-start;
-			gap: 10px;
-			align-self: stretch;
-			flex-wrap: wrap;
-		}
-
-		.radio-button,
-		.grid-button,
-		.tool-button {
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			padding: 12px;
-			color: var(--bg-vanilla-400);
-			font-size: 14px;
-			font-style: normal;
-			text-align: left;
-			font-weight: 400;
-			transition: background-color 0.3s ease;
-			min-width: 258px;
-			cursor: pointer;
-			box-sizing: border-box;
-		}
-
-		.radio-button.active,
-		.grid-button.active,
-		.tool-button.active,
-		.radio-button:hover,
-		.grid-button:hover,
-		.tool-button:hover {
-			border: 1px solid rgba(78, 116, 248, 0.4);
-			background: rgba(78, 116, 248, 0.2);
-		}
-
-		.two-column-grid {
-			width: 100%;
-			display: grid;
-			grid-template-columns: 1fr 1fr; /* Two equal columns */
-			gap: 10px;
-		}
-
-		.onboarding-questionaire-button,
-		.add-another-member-button,
-		.remove-team-member-button {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			color: var(--bg-vanilla-400);
-			box-shadow: none;
-			font-size: 14px;
-			font-style: normal;
-			text-align: left;
-			font-weight: 400;
-			transition: background-color 0.3s ease;
-			cursor: pointer;
-			height: 40px;
-			box-sizing: border-box;
-
-			&:hover {
-				border: 1px solid rgba(78, 116, 248, 0.4);
-				background: rgba(78, 116, 248, 0.2);
-			}
-
-			&:focus-visible {
-				outline: none;
-			}
-
-			&.active {
-				border: 1px solid rgba(78, 116, 248, 0.4);
-				background: rgba(78, 116, 248, 0.2);
-			}
-		}
-
-		.add-another-member-button,
-		.remove-team-member-button {
-			font-size: 12px;
-			height: 32px;
-		}
-
-		.remove-team-member-button {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			border: 1px solid var(--bg-slate-400);
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-			background-color: var(--bg-ink-300);
-
-			border-left: 0px;
-			border-top-left-radius: 0px;
-			border-bottom-left-radius: 0px;
-		}
-
-		.onboarding-questionaire-other-input {
-			.ant-input-group {
-				.ant-input {
-					border-top-right-radius: 0px !important;
-					border-bottom-right-radius: 0px !important;
-				}
-			}
-		}
-
-		.tool-grid {
-			grid-template-columns: repeat(4, 1fr);
-		}
-
-		.input-field {
-			flex: 0;
-			padding: 12px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			color: var(--bg-vanilla-100);
-			border-radius: 4px;
-			font-size: 14px;
-			min-width: 258px;
-		}
-
-		.next-button {
-			display: flex;
-			height: 40px;
-			padding: 8px 12px 8px 16px;
-			justify-content: center;
-			align-items: center;
-			gap: 6px;
-			align-self: stretch;
-			border: 0px;
-			border-radius: 50px;
-			margin-top: 24px;
-			cursor: pointer;
-		}
-
-		.next-button.disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-			pointer-events: none;
-		}
-
-		.arrow {
-			font-size: 18px;
-			color: var(--bg-vanilla-100);
-		}
-	}
-
-	.onboarding-questionaire-footer {
-		width: 100%;
-		height: 60px;
-		padding: 12px 24px;
-		box-sizing: border-box;
-	}
-
-	.invite-team-members-add-another-member-container {
-		width: 100%;
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		margin-top: 12px;
-	}
-}
-
-.onboarding-questionaire-loading-container {
-	width: 100%;
-	display: flex;
-	height: 100vh;
-	max-width: 600px;
-	justify-content: center;
-	align-items: center;
-	margin: 0 auto;
-}
-
-.lightMode {
-	.onboarding-questionaire-container {
-		.onboarding-questionaire-content {
-			.questions-container {
-				color: var(--bg-slate-300);
-			}
-
-			.title {
-				color: var(--bg-slate-300) !important;
-			}
-
-			.sub-title {
-				color: var(--bg-slate-400) !important;
-			}
-
-			.questions-form {
-				width: 100%;
-				display: flex;
-				min-height: 420px;
-				padding: 20px 24px 24px 24px;
-				flex-direction: column;
-				align-items: center;
-				gap: 24px;
-				border-radius: 4px;
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-
-				.ant-form-item {
-					margin-bottom: 0px !important;
-
-					.ant-form-item-label {
-						label {
-							color: var(--bg-slate-300) !important;
-							font-size: 13px;
-							font-weight: 500;
-							line-height: 20px;
-						}
-					}
-				}
-
-				&.invite-team-members-form {
-					.invite-team-members-container {
-						max-height: 260px;
-						overflow-y: auto;
-
-						&::-webkit-scrollbar {
-							width: 0.1rem;
-						}
-						&::-webkit-scrollbar-corner {
-							background: transparent;
-						}
-						&::-webkit-scrollbar-thumb {
-							background: rgb(136, 136, 136);
-							border-radius: 0.625rem;
-						}
-						&::-webkit-scrollbar-track {
-							background: transparent;
-						}
-					}
-				}
-			}
-
-			.invite-team-members-container {
-				.ant-input-group {
-					.ant-input {
-						background: var(--bg-vanilla-100);
-						border: 1px solid var(--bg-vanilla-300);
-						color: var(--bg-slate-300);
-					}
-
-					.ant-input-group-addon {
-						font-size: 11px;
-						height: 32px;
-						min-width: 80px;
-						background: var(--bg-vanilla-100);
-						border: 1px solid var(--bg-vanilla-300);
-						border-left: 0px;
-						color: var(--bg-slate-300);
-					}
-				}
-			}
-
-			.question-label {
-				color: var(--bg-slate-300);
-			}
-
-			.question-sub-label {
-				color: var(--bg-slate-400);
-			}
-
-			.question {
-				color: var(--bg-slate-300);
-			}
-
-			input[type='text'] {
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-				color: var(--text-ink-300);
-			}
-
-			.radio-button,
-			.grid-button,
-			.tool-button {
-				border-radius: 4px;
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-				padding: 12px;
-				color: var(--bg-slate-300);
-				font-size: 14px;
-				font-style: normal;
-				text-align: left;
-				font-weight: 400;
-				transition: background-color 0.3s ease;
-				min-width: 258px;
-				cursor: pointer;
-				box-sizing: border-box;
-			}
-
-			.radio-button.active,
-			.grid-button.active,
-			.tool-button.active,
-			.radio-button:hover,
-			.grid-button:hover,
-			.tool-button:hover {
-				border: 1px solid rgba(78, 116, 248, 0.4);
-				background: rgba(78, 116, 248, 0.2);
-			}
-
-			.onboarding-questionaire-button,
-			.add-another-member-button,
-			.remove-team-member-button {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				border-radius: 2px;
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-				color: var(--bg-ink-300);
-				box-shadow: none;
-				font-size: 14px;
-				font-style: normal;
-				text-align: left;
-				font-weight: 400;
-				transition: background-color 0.3s ease;
-				cursor: pointer;
-				height: 40px;
-				box-sizing: border-box;
-
-				&:hover {
-					border: 1px solid rgba(78, 116, 248, 0.4);
-					background: rgba(78, 116, 248, 0.2);
-				}
-
-				&:focus-visible {
-					outline: none;
-				}
-
-				&.active {
-					border: 1px solid rgba(78, 116, 248, 0.4);
-					background: rgba(78, 116, 248, 0.2);
-				}
-			}
-
-			.remove-team-member-button {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				border: 1px solid var(--bg-vanilla-300);
-				border-top-left-radius: 0px;
-				border-bottom-left-radius: 0px;
-				background-color: var(--bg-vanilla-100);
-
-				border-left: 0px;
-				border-top-left-radius: 0px;
-				border-bottom-left-radius: 0px;
-			}
-
-			.input-field {
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-100);
-				color: var(--text-ink-300);
-			}
-
-			.arrow {
-				color: var(--bg-slate-300);
-			}
-		}
-	}
-}

frontend/src/container/OnboardingQuestionaire/OptimiseSignozNeeds/OptimiseSignozNeeds.tsx

@@ -1,323 +0,0 @@
-import { Button, Slider, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import { ArrowLeft, ArrowRight, Loader2, Minus } from 'lucide-react';
-import { useEffect, useState } from 'react';
-
-export interface OptimiseSignozDetails {
-	logsPerDay: number;
-	hostsPerDay: number;
-	services: number;
-}
-
-// Define exponential range
-const logsMin = 1; // Set to your minimum value in the exponential range
-const logsMax = 10000; // Set to your maximum value in the exponential range
-
-const hostsMin = 1;
-const hostsMax = 10000;
-
-const servicesMin = 1;
-const servicesMax = 5000;
-
-// Function to convert linear slider value to exponential scale
-const linearToExponential = (
-	value: number,
-	min: number,
-	max: number,
-): number => {
-	const expMin = Math.log10(min);
-	const expMax = Math.log10(max);
-	const expValue = 10 ** (expMin + ((expMax - expMin) * value) / 100);
-	return Math.round(expValue);
-};
-
-const exponentialToLinear = (
-	expValue: number,
-	min: number,
-	max: number,
-): number => {
-	const expMin = Math.log10(min);
-	const expMax = Math.log10(max);
-	const linearValue =
-		((Math.log10(expValue) - expMin) / (expMax - expMin)) * 100;
-	return Math.round(linearValue); // Round to get a whole number within the 0-100 range
-};
-
-interface OptimiseSignozNeedsProps {
-	optimiseSignozDetails: OptimiseSignozDetails;
-	setOptimiseSignozDetails: (details: OptimiseSignozDetails) => void;
-	onNext: () => void;
-	onBack: () => void;
-	onWillDoLater: () => void;
-	isUpdatingProfile: boolean;
-	isNextDisabled: boolean;
-}
-
-const marks = {
-	0: `${linearToExponential(0, logsMin, logsMax).toLocaleString()} GB`,
-	25: `${linearToExponential(25, logsMin, logsMax).toLocaleString()} GB`,
-	50: `${linearToExponential(50, logsMin, logsMax).toLocaleString()} GB`,
-	75: `${linearToExponential(75, logsMin, logsMax).toLocaleString()} GB`,
-	100: `${linearToExponential(100, logsMin, logsMax).toLocaleString()} GB`,
-};
-
-const hostMarks = {
-	0: `${linearToExponential(0, hostsMin, hostsMax).toLocaleString()}`,
-	25: `${linearToExponential(25, hostsMin, hostsMax).toLocaleString()}`,
-	50: `${linearToExponential(50, hostsMin, hostsMax).toLocaleString()}`,
-	75: `${linearToExponential(75, hostsMin, hostsMax).toLocaleString()}`,
-	100: `${linearToExponential(100, hostsMin, hostsMax).toLocaleString()}`,
-};
-
-const serviceMarks = {
-	0: `${linearToExponential(0, servicesMin, servicesMax).toLocaleString()}`,
-	25: `${linearToExponential(25, servicesMin, servicesMax).toLocaleString()}`,
-	50: `${linearToExponential(50, servicesMin, servicesMax).toLocaleString()}`,
-	75: `${linearToExponential(75, servicesMin, servicesMax).toLocaleString()}`,
-	100: `${linearToExponential(100, servicesMin, servicesMax).toLocaleString()}`,
-};
-
-function OptimiseSignozNeeds({
-	isUpdatingProfile,
-	optimiseSignozDetails,
-	setOptimiseSignozDetails,
-	onNext,
-	onBack,
-	onWillDoLater,
-	isNextDisabled,
-}: OptimiseSignozNeedsProps): JSX.Element {
-	const [logsPerDay, setLogsPerDay] = useState<number>(
-		optimiseSignozDetails?.logsPerDay || 0,
-	);
-	const [hostsPerDay, setHostsPerDay] = useState<number>(
-		optimiseSignozDetails?.hostsPerDay || 0,
-	);
-	const [services, setServices] = useState<number>(
-		optimiseSignozDetails?.services || 0,
-	);
-
-	// Internal state for the linear slider
-	const [sliderValues, setSliderValues] = useState({
-		logsPerDay: 0,
-		hostsPerDay: 0,
-		services: 0,
-	});
-
-	useEffect(() => {
-		setSliderValues({
-			logsPerDay: exponentialToLinear(logsPerDay, logsMin, logsMax),
-			hostsPerDay: exponentialToLinear(hostsPerDay, hostsMin, hostsMax),
-			services: exponentialToLinear(services, servicesMin, servicesMax),
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	useEffect(() => {
-		setOptimiseSignozDetails({
-			logsPerDay,
-			hostsPerDay,
-			services,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [services, hostsPerDay, logsPerDay]);
-
-	const handleOnNext = (): void => {
-		logEvent('Org Onboarding: Answered', {
-			logsPerDay,
-			hostsPerDay,
-			services,
-		});
-
-		onNext();
-	};
-
-	const handleOnBack = (): void => {
-		onBack();
-	};
-
-	const handleWillDoLater = (): void => {
-		setOptimiseSignozDetails({
-			logsPerDay: 0,
-			hostsPerDay: 0,
-			services: 0,
-		});
-
-		onWillDoLater();
-
-		logEvent('Org Onboarding: Clicked Do Later', {
-			currentPageID: 3,
-		});
-	};
-
-	const handleSliderChange = (key: string, value: number): void => {
-		setSliderValues({
-			...sliderValues,
-			[key]: value,
-		});
-
-		switch (key) {
-			case 'logsPerDay':
-				setLogsPerDay(linearToExponential(value, logsMin, logsMax));
-				break;
-			case 'hostsPerDay':
-				setHostsPerDay(linearToExponential(value, hostsMin, hostsMax));
-				break;
-			case 'services':
-				setServices(linearToExponential(value, servicesMin, servicesMax));
-				break;
-			default:
-				break;
-		}
-	};
-
-	// Calculate the exponential value based on the current slider position
-	const logsPerDayValue = linearToExponential(
-		sliderValues.logsPerDay,
-		logsMin,
-		logsMax,
-	);
-	const hostsPerDayValue = linearToExponential(
-		sliderValues.hostsPerDay,
-		hostsMin,
-		hostsMax,
-	);
-	const servicesValue = linearToExponential(
-		sliderValues.services,
-		servicesMin,
-		servicesMax,
-	);
-
-	return (
-		<div className="questions-container">
-			<Typography.Title level={3} className="title">
-				Optimize SigNoz for Your Needs
-			</Typography.Title>
-			<Typography.Paragraph className="sub-title">
-				Give us a quick sense of your scale so SigNoz can keep up!
-			</Typography.Paragraph>
-
-			<div className="questions-form-container">
-				<div className="questions-form">
-					<Typography.Paragraph className="question">
-						What does your scale approximately look like?
-					</Typography.Paragraph>
-
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Logs / Day
-						</label>
-						<div className="slider-container">
-							<div>
-								<Slider
-									min={0}
-									max={100}
-									value={sliderValues.logsPerDay}
-									marks={marks}
-									onChange={(value: number): void =>
-										handleSliderChange('logsPerDay', value)
-									}
-									styles={{
-										track: {
-											background: '#4E74F8',
-										},
-									}}
-									tooltip={{
-										formatter: (): string => `${logsPerDayValue.toLocaleString()} GB`, // Show whole number
-									}}
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Metrics <Minus size={14} /> Number of Hosts
-						</label>
-						<div className="slider-container">
-							<div>
-								<Slider
-									min={0}
-									max={100}
-									value={sliderValues.hostsPerDay}
-									marks={hostMarks}
-									onChange={(value: number): void =>
-										handleSliderChange('hostsPerDay', value)
-									}
-									styles={{
-										track: {
-											background: '#4E74F8',
-										},
-									}}
-									tooltip={{
-										formatter: (): string => `${hostsPerDayValue.toLocaleString()}`, // Show whole number
-									}}
-								/>
-							</div>
-						</div>
-					</div>
-
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Number of services
-						</label>
-						<div className="slider-container">
-							<div>
-								<Slider
-									min={0}
-									max={100}
-									value={sliderValues.services}
-									marks={serviceMarks}
-									onChange={(value: number): void =>
-										handleSliderChange('services', value)
-									}
-									styles={{
-										track: {
-											background: '#4E74F8',
-										},
-									}}
-									tooltip={{
-										formatter: (): string => `${servicesValue.toLocaleString()}`, // Show whole number
-									}}
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div className="next-prev-container">
-					<Button
-						type="default"
-						className="next-button"
-						onClick={handleOnBack}
-						disabled={isUpdatingProfile}
-					>
-						<ArrowLeft size={14} />
-						Back
-					</Button>
-
-					<Button
-						type="primary"
-						className="next-button"
-						onClick={handleOnNext}
-						disabled={isUpdatingProfile || isNextDisabled}
-					>
-						Next{' '}
-						{isUpdatingProfile ? (
-							<Loader2 className="animate-spin" />
-						) : (
-							<ArrowRight size={14} />
-						)}
-					</Button>
-				</div>
-
-				<div className="do-later-container">
-					<Button type="link" onClick={handleWillDoLater}>
-						I&apos;ll do this later
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default OptimiseSignozNeeds;

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -1,376 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import '../OnboardingQuestionaire.styles.scss';
-
-import { Color } from '@signozhq/design-tokens';
-import { Button, Input, Typography } from 'antd';
-import logEvent from 'api/common/logEvent';
-import editOrg from 'api/user/editOrg';
-import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, CheckCircle, Loader2 } from 'lucide-react';
-import { Dispatch, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
-import { UPDATE_ORG_NAME } from 'types/actions/app';
-import AppReducer from 'types/reducer/app';
-
-export interface OrgData {
-	id: string;
-	isAnonymous: boolean;
-	name: string;
-}
-
-export interface OrgDetails {
-	organisationName: string;
-	usesObservability: boolean | null;
-	observabilityTool: string | null;
-	otherTool: string | null;
-	familiarity: string | null;
-}
-
-interface OrgQuestionsProps {
-	currentOrgData: OrgData | null;
-	orgDetails: OrgDetails;
-	onNext: (details: OrgDetails) => void;
-}
-
-const observabilityTools = {
-	AWSCloudwatch: 'AWS Cloudwatch',
-	DataDog: 'DataDog',
-	NewRelic: 'New Relic',
-	GrafanaPrometheus: 'Grafana / Prometheus',
-	AzureAppMonitor: 'Azure App Monitor',
-	GCPNativeO11yTools: 'GCP-native o11y tools',
-	Honeycomb: 'Honeycomb',
-};
-
-const o11yFamiliarityOptions: Record<string, string> = {
-	beginner: 'Beginner',
-	intermediate: 'Intermediate',
-	expert: 'Expert',
-	notFamiliar: "I'm not familiar with it",
-};
-
-function OrgQuestions({
-	currentOrgData,
-	orgDetails,
-	onNext,
-}: OrgQuestionsProps): JSX.Element {
-	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
-	const { notifications } = useNotifications();
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-
-	const { t } = useTranslation(['organizationsettings', 'common']);
-
-	const [organisationName, setOrganisationName] = useState<string>(
-		orgDetails?.organisationName || '',
-	);
-	const [usesObservability, setUsesObservability] = useState<boolean | null>(
-		orgDetails?.usesObservability || null,
-	);
-	const [observabilityTool, setObservabilityTool] = useState<string | null>(
-		orgDetails?.observabilityTool || null,
-	);
-	const [otherTool, setOtherTool] = useState<string>(
-		orgDetails?.otherTool || '',
-	);
-	const [familiarity, setFamiliarity] = useState<string | null>(
-		orgDetails?.familiarity || null,
-	);
-	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
-
-	useEffect(() => {
-		setOrganisationName(orgDetails.organisationName);
-	}, [orgDetails.organisationName]);
-
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-
-	const handleOrgNameUpdate = async (): Promise<void> => {
-		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
-		if (
-			!currentOrgData ||
-			!organisationName ||
-			organisationName === '' ||
-			orgDetails.organisationName === organisationName
-		) {
-			logEvent('Org Onboarding: Answered', {
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				familiarity,
-			});
-
-			onNext({
-				organisationName,
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				familiarity,
-			});
-
-			return;
-		}
-
-		try {
-			setIsLoading(true);
-			const { statusCode, error } = await editOrg({
-				isAnonymous: currentOrgData.isAnonymous,
-				name: organisationName,
-				orgId: currentOrgData.id,
-			});
-			if (statusCode === 200) {
-				dispatch({
-					type: UPDATE_ORG_NAME,
-					payload: {
-						orgId: currentOrgData?.id,
-						name: orgDetails.organisationName,
-					},
-				});
-
-				logEvent('Org Onboarding: Org Name Updated', {
-					organisationName: orgDetails.organisationName,
-				});
-
-				logEvent('Org Onboarding: Answered', {
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					familiarity,
-				});
-
-				onNext({
-					organisationName,
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					familiarity,
-				});
-			} else {
-				logEvent('Org Onboarding: Org Name Update Failed', {
-					organisationName: orgDetails.organisationName,
-				});
-
-				notifications.error({
-					message:
-						error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-			}
-			setIsLoading(false);
-		} catch (error) {
-			setIsLoading(false);
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
-	};
-
-	const isValidUsesObservability = (): boolean => {
-		if (usesObservability === null) {
-			return false;
-		}
-
-		if (usesObservability && (!observabilityTool || observabilityTool === '')) {
-			return false;
-		}
-
-		// eslint-disable-next-line sonarjs/prefer-single-boolean-return
-		if (usesObservability && observabilityTool === 'Others' && otherTool === '') {
-			return false;
-		}
-
-		return true;
-	};
-
-	useEffect(() => {
-		const isValidObservability = isValidUsesObservability();
-
-		if (organisationName !== '' && familiarity !== null && isValidObservability) {
-			setIsNextDisabled(false);
-		} else {
-			setIsNextDisabled(true);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		organisationName,
-		usesObservability,
-		familiarity,
-		observabilityTool,
-		otherTool,
-	]);
-
-	const handleOnNext = (): void => {
-		handleOrgNameUpdate();
-	};
-
-	return (
-		<div className="questions-container">
-			<Typography.Title level={3} className="title">
-				Welcome, {user?.name}!
-			</Typography.Title>
-			<Typography.Paragraph className="sub-title">
-				We&apos;ll help you get the most out of SigNoz, whether you&apos;re new to
-				observability or a seasoned pro.
-			</Typography.Paragraph>
-
-			<div className="questions-form-container">
-				<div className="questions-form">
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Your Organisation Name
-						</label>
-						<input
-							type="text"
-							name="organisationName"
-							id="organisationName"
-							placeholder="For eg. Simpsonville..."
-							autoComplete="off"
-							value={organisationName}
-							onChange={(e): void => setOrganisationName(e.target.value)}
-						/>
-					</div>
-
-					<div className="form-group">
-						<label className="question" htmlFor="usesObservability">
-							Do you currently use any observability/monitoring tool?
-						</label>
-
-						<div className="two-column-grid">
-							<Button
-								type="primary"
-								name="usesObservability"
-								className={`onboarding-questionaire-button ${
-									usesObservability === true ? 'active' : ''
-								}`}
-								onClick={(): void => {
-									setUsesObservability(true);
-								}}
-							>
-								Yes{' '}
-								{usesObservability === true && (
-									<CheckCircle size={12} color={Color.BG_FOREST_500} />
-								)}
-							</Button>
-							<Button
-								type="primary"
-								className={`onboarding-questionaire-button ${
-									usesObservability === false ? 'active' : ''
-								}`}
-								onClick={(): void => {
-									setUsesObservability(false);
-									setObservabilityTool(null);
-									setOtherTool('');
-								}}
-							>
-								No{' '}
-								{usesObservability === false && (
-									<CheckCircle size={12} color={Color.BG_FOREST_500} />
-								)}
-							</Button>
-						</div>
-					</div>
-
-					{usesObservability && (
-						<div className="form-group">
-							<label className="question" htmlFor="observabilityTool">
-								Which observability tool do you currently use?
-							</label>
-							<div className="two-column-grid">
-								{Object.keys(observabilityTools).map((tool) => (
-									<Button
-										key={tool}
-										type="primary"
-										className={`onboarding-questionaire-button ${
-											observabilityTool === tool ? 'active' : ''
-										}`}
-										onClick={(): void => setObservabilityTool(tool)}
-									>
-										{observabilityTools[tool as keyof typeof observabilityTools]}
-
-										{observabilityTool === tool && (
-											<CheckCircle size={12} color={Color.BG_FOREST_500} />
-										)}
-									</Button>
-								))}
-
-								{observabilityTool === 'Others' ? (
-									<Input
-										type="text"
-										className="onboarding-questionaire-other-input"
-										placeholder="Please specify the tool"
-										value={otherTool || ''}
-										autoFocus
-										addonAfter={
-											otherTool && otherTool !== '' ? (
-												<CheckCircle size={12} color={Color.BG_FOREST_500} />
-											) : (
-												''
-											)
-										}
-										onChange={(e): void => setOtherTool(e.target.value)}
-									/>
-								) : (
-									<button
-										type="button"
-										className={`onboarding-questionaire-button ${
-											observabilityTool === 'Others' ? 'active' : ''
-										}`}
-										onClick={(): void => setObservabilityTool('Others')}
-									>
-										Others
-									</button>
-								)}
-							</div>
-						</div>
-					)}
-
-					<div className="form-group">
-						<div className="question">
-							Are you familiar with setting up observability (o11y)?
-						</div>
-						<div className="two-column-grid">
-							{Object.keys(o11yFamiliarityOptions).map((option: string) => (
-								<Button
-									key={option}
-									type="primary"
-									className={`onboarding-questionaire-button ${
-										familiarity === option ? 'active' : ''
-									}`}
-									onClick={(): void => setFamiliarity(option)}
-								>
-									{o11yFamiliarityOptions[option]}
-									{familiarity === option && (
-										<CheckCircle size={12} color={Color.BG_FOREST_500} />
-									)}
-								</Button>
-							))}
-						</div>
-					</div>
-				</div>
-
-				<div className="next-prev-container">
-					<Button
-						type="primary"
-						className={`next-button ${isNextDisabled ? 'disabled' : ''}`}
-						onClick={handleOnNext}
-						disabled={isNextDisabled}
-					>
-						Next
-						{isLoading ? (
-							<Loader2 className="animate-spin" />
-						) : (
-							<ArrowRight size={14} />
-						)}
-					</Button>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default OrgQuestions;

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -1,295 +0,0 @@
-import './OnboardingQuestionaire.styles.scss';
-
-import { NotificationInstance } from 'antd/es/notification/interface';
-import logEvent from 'api/common/logEvent';
-import updateProfileAPI from 'api/onboarding/updateProfile';
-import getAllOrgPreferences from 'api/preferences/getAllOrgPreferences';
-import updateOrgPreferenceAPI from 'api/preferences/updateOrgPreference';
-import { AxiosError } from 'axios';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import ROUTES from 'constants/routes';
-import { InviteTeamMembersProps } from 'container/OrganizationSettings/PendingInvitesContainer';
-import { useNotifications } from 'hooks/useNotifications';
-import history from 'lib/history';
-import { useEffect, useState } from 'react';
-import { useMutation, useQuery } from 'react-query';
-import { useDispatch, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import {
-	UPDATE_IS_FETCHING_ORG_PREFERENCES,
-	UPDATE_ORG_PREFERENCES,
-} from 'types/actions/app';
-import AppReducer from 'types/reducer/app';
-
-import {
-	AboutSigNozQuestions,
-	SignozDetails,
-} from './AboutSigNozQuestions/AboutSigNozQuestions';
-import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
-import { OnboardingHeader } from './OnboardingHeader/OnboardingHeader';
-import OptimiseSignozNeeds, {
-	OptimiseSignozDetails,
-} from './OptimiseSignozNeeds/OptimiseSignozNeeds';
-import OrgQuestions, { OrgData, OrgDetails } from './OrgQuestions/OrgQuestions';
-
-export const showErrorNotification = (
-	notifications: NotificationInstance,
-	err: Error,
-): void => {
-	notifications.error({
-		message: err.message || SOMETHING_WENT_WRONG,
-	});
-};
-
-const INITIAL_ORG_DETAILS: OrgDetails = {
-	organisationName: '',
-	usesObservability: true,
-	observabilityTool: '',
-	otherTool: '',
-	familiarity: '',
-};
-
-const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
-	hearAboutSignoz: '',
-	interestInSignoz: '',
-	otherInterestInSignoz: '',
-	otherAboutSignoz: '',
-};
-
-const INITIAL_OPTIMISE_SIGNOZ_DETAILS: OptimiseSignozDetails = {
-	logsPerDay: 0,
-	hostsPerDay: 0,
-	services: 0,
-};
-
-const BACK_BUTTON_EVENT_NAME = 'Org Onboarding: Back Button Clicked';
-const NEXT_BUTTON_EVENT_NAME = 'Org Onboarding: Next Button Clicked';
-const ONBOARDING_COMPLETE_EVENT_NAME = 'Org Onboarding: Complete';
-
-function OnboardingQuestionaire(): JSX.Element {
-	const { notifications } = useNotifications();
-	const { org } = useSelector<AppState, AppReducer>((state) => state.app);
-	const dispatch = useDispatch();
-	const [currentStep, setCurrentStep] = useState<number>(1);
-	const [orgDetails, setOrgDetails] = useState<OrgDetails>(INITIAL_ORG_DETAILS);
-	const [signozDetails, setSignozDetails] = useState<SignozDetails>(
-		INITIAL_SIGNOZ_DETAILS,
-	);
-
-	const [
-		optimiseSignozDetails,
-		setOptimiseSignozDetails,
-	] = useState<OptimiseSignozDetails>(INITIAL_OPTIMISE_SIGNOZ_DETAILS);
-	const [teamMembers, setTeamMembers] = useState<
-		InviteTeamMembersProps[] | null
-	>(null);
-
-	const [currentOrgData, setCurrentOrgData] = useState<OrgData | null>(null);
-
-	const [
-		updatingOrgOnboardingStatus,
-		setUpdatingOrgOnboardingStatus,
-	] = useState<boolean>(false);
-
-	useEffect(() => {
-		if (org) {
-			setCurrentOrgData(org[0]);
-
-			setOrgDetails({
-				...orgDetails,
-				organisationName: org[0].name,
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [org]);
-
-	useEffect(() => {
-		logEvent('Org Onboarding: Started', {
-			org_id: org?.[0]?.id,
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const { refetch: refetchOrgPreferences } = useQuery({
-		queryFn: () => getAllOrgPreferences(),
-		queryKey: ['getOrgPreferences'],
-		enabled: false,
-		refetchOnWindowFocus: false,
-		onSuccess: (response) => {
-			dispatch({
-				type: UPDATE_IS_FETCHING_ORG_PREFERENCES,
-				payload: {
-					isFetchingOrgPreferences: false,
-				},
-			});
-
-			dispatch({
-				type: UPDATE_ORG_PREFERENCES,
-				payload: {
-					orgPreferences: response.payload?.data || null,
-				},
-			});
-
-			setUpdatingOrgOnboardingStatus(false);
-
-			logEvent('Org Onboarding: Redirecting to Get Started', {});
-
-			history.push(ROUTES.GET_STARTED);
-		},
-		onError: () => {
-			setUpdatingOrgOnboardingStatus(false);
-		},
-	});
-
-	const isNextDisabled =
-		optimiseSignozDetails.logsPerDay === 0 &&
-		optimiseSignozDetails.hostsPerDay === 0 &&
-		optimiseSignozDetails.services === 0;
-
-	const { mutate: updateProfile, isLoading: isUpdatingProfile } = useMutation(
-		updateProfileAPI,
-		{
-			onSuccess: () => {
-				setCurrentStep(4);
-			},
-			onError: (error) => {
-				showErrorNotification(notifications, error as AxiosError);
-			},
-		},
-	);
-
-	const { mutate: updateOrgPreference } = useMutation(updateOrgPreferenceAPI, {
-		onSuccess: () => {
-			refetchOrgPreferences();
-		},
-		onError: (error) => {
-			showErrorNotification(notifications, error as AxiosError);
-
-			setUpdatingOrgOnboardingStatus(false);
-		},
-	});
-
-	const handleUpdateProfile = (): void => {
-		logEvent(NEXT_BUTTON_EVENT_NAME, {
-			currentPageID: 3,
-			nextPageID: 4,
-		});
-
-		updateProfile({
-			familiarity_with_observability: orgDetails?.familiarity as string,
-			has_existing_observability_tool: orgDetails?.usesObservability as boolean,
-			existing_observability_tool:
-				orgDetails?.observabilityTool === 'Others'
-					? (orgDetails?.otherTool as string)
-					: (orgDetails?.observabilityTool as string),
-
-			reasons_for_interest_in_signoz:
-				signozDetails?.interestInSignoz === 'Others'
-					? (signozDetails?.otherInterestInSignoz as string)
-					: (signozDetails?.interestInSignoz as string),
-			where_did_you_hear_about_signoz:
-				signozDetails?.hearAboutSignoz === 'Others'
-					? (signozDetails?.otherAboutSignoz as string)
-					: (signozDetails?.hearAboutSignoz as string),
-
-			logs_scale_per_day_in_gb: optimiseSignozDetails?.logsPerDay as number,
-			number_of_hosts: optimiseSignozDetails?.hostsPerDay as number,
-			number_of_services: optimiseSignozDetails?.services as number,
-		});
-	};
-
-	const handleOnboardingComplete = (): void => {
-		logEvent(ONBOARDING_COMPLETE_EVENT_NAME, {
-			currentPageID: 4,
-		});
-
-		setUpdatingOrgOnboardingStatus(true);
-		updateOrgPreference({
-			preferenceID: 'ORG_ONBOARDING',
-			value: true,
-		});
-	};
-
-	return (
-		<div className="onboarding-questionaire-container">
-			<div className="onboarding-questionaire-header">
-				<OnboardingHeader />
-			</div>
-
-			<div className="onboarding-questionaire-content">
-				{currentStep === 1 && (
-					<OrgQuestions
-						currentOrgData={currentOrgData}
-						orgDetails={orgDetails}
-						onNext={(orgDetails: OrgDetails): void => {
-							logEvent(NEXT_BUTTON_EVENT_NAME, {
-								currentPageID: 1,
-								nextPageID: 2,
-							});
-
-							setOrgDetails(orgDetails);
-							setCurrentStep(2);
-						}}
-					/>
-				)}
-
-				{currentStep === 2 && (
-					<AboutSigNozQuestions
-						signozDetails={signozDetails}
-						setSignozDetails={setSignozDetails}
-						onBack={(): void => {
-							logEvent(BACK_BUTTON_EVENT_NAME, {
-								currentPageID: 2,
-								prevPageID: 1,
-							});
-							setCurrentStep(1);
-						}}
-						onNext={(): void => {
-							logEvent(NEXT_BUTTON_EVENT_NAME, {
-								currentPageID: 2,
-								nextPageID: 3,
-							});
-							setCurrentStep(3);
-						}}
-					/>
-				)}
-
-				{currentStep === 3 && (
-					<OptimiseSignozNeeds
-						isNextDisabled={isNextDisabled}
-						isUpdatingProfile={isUpdatingProfile}
-						optimiseSignozDetails={optimiseSignozDetails}
-						setOptimiseSignozDetails={setOptimiseSignozDetails}
-						onBack={(): void => {
-							logEvent(BACK_BUTTON_EVENT_NAME, {
-								currentPageID: 3,
-								prevPageID: 2,
-							});
-							setCurrentStep(2);
-						}}
-						onNext={handleUpdateProfile}
-						onWillDoLater={(): void => setCurrentStep(4)}
-					/>
-				)}
-
-				{currentStep === 4 && (
-					<InviteTeamMembers
-						isLoading={updatingOrgOnboardingStatus}
-						teamMembers={teamMembers}
-						setTeamMembers={setTeamMembers}
-						onBack={(): void => {
-							logEvent(BACK_BUTTON_EVENT_NAME, {
-								currentPageID: 4,
-								prevPageID: 3,
-							});
-							setCurrentStep(3);
-						}}
-						onNext={handleOnboardingComplete}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default OnboardingQuestionaire;

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

@@ -236,9 +236,7 @@ function PendingInvitesContainer(): JSX.Element {
 export interface InviteTeamMembersProps {
 	email: string;
 	name: string;
-	role: string;
-	id: string;
-	frontendBaseUrl: string;
+	role: ROLES;
 }
 
 interface DataProps {

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx

@@ -13,7 +13,6 @@ import {
 import { DataSource, QueryFunctionsTypes } from 'types/common/queryBuilder';
 
 import Function from './Function';
-import { toFloat64 } from './utils';
 
 const defaultMetricFunctionStruct: QueryFunctionProps = {
 	name: QueryFunctionsTypes.CUTOFF_MIN,
@@ -159,13 +158,7 @@ export default function QueryFunctions({
 		const updateFunctions = cloneDeep(functions);
 
 		if (updateFunctions && updateFunctions.length > 0 && updateFunctions[index]) {
-			updateFunctions[index].args = [
-				// timeShift expects a float64 value, so we convert the string to a number
-				// For other functions, we keep the value as a string
-				updateFunctions[index].name === QueryFunctionsTypes.TIME_SHIFT
-					? toFloat64(value)
-					: value,
-			];
+			updateFunctions[index].args = [value];
 			setFunctions(updateFunctions);
 			onChange(updateFunctions);
 		}

frontend/src/container/QueryBuilder/components/QueryFunctions/utils.ts

@@ -1,7 +0,0 @@
-export const toFloat64 = (value: string): number => {
-	const parsed = parseFloat(value);
-	if (!Number.isFinite(parsed)) {
-		console.error(`Invalid value for timeshift. value: ${value}`);
-	}
-	return parsed;
-};

frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx

@@ -81,10 +81,8 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 										prefix: item.type || '',
 										condition: !item.isColumn,
 									}),
-									!item.isColumn && item.type ? item.type : '',
 								)}
 								dataType={item.dataType}
-								type={item.type || ''}
 							/>
 						),
 						value: `${item.key}${selectValueDivider}${createIdFromObjectFields(
@@ -189,9 +187,6 @@ export const AggregatorFilter = memo(function AggregatorFilter({
 			prefix: query.aggregateAttribute.type || '',
 			condition: !query.aggregateAttribute.isColumn,
 		}),
-		!query.aggregateAttribute.isColumn && query.aggregateAttribute.type
-			? query.aggregateAttribute.type
-			: '',
 	);
 
 	return (

frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx

@@ -75,10 +75,8 @@ export const GroupByFilter = memo(function GroupByFilter({
 										prefix: item.type || '',
 										condition: !item.isColumn,
 									}),
-									!item.isColumn && item.type ? item.type : '',
 								)}
 								dataType={item.dataType || ''}
-								type={item.type || ''}
 							/>
 						),
 						value: `${item.id}`,
@@ -168,7 +166,6 @@ export const GroupByFilter = memo(function GroupByFilter({
 						prefix: item.type || '',
 						condition: !item.isColumn,
 					}),
-					!item.isColumn && item.type ? item.type : '',
 				)}`,
 				value: `${item.id}`,
 			}),

frontend/src/container/QueryBuilder/filters/GroupByFilter/utils.ts

@@ -1,9 +1,8 @@
 import { MetricsType } from 'container/MetricsApplication/constant';
 
-export function removePrefix(str: string, type: string): string {
+export function removePrefix(str: string): string {
 	const tagPrefix = `${MetricsType.Tag}_`;
 	const resourcePrefix = `${MetricsType.Resource}_`;
-	const scopePrefix = `${MetricsType.Scope}_`;
 
 	if (str.startsWith(tagPrefix)) {
 		return str.slice(tagPrefix.length);
@@ -11,9 +10,5 @@ export function removePrefix(str: string, type: string): string {
 	if (str.startsWith(resourcePrefix)) {
 		return str.slice(resourcePrefix.length);
 	}
-	if (str.startsWith(scopePrefix) && type === MetricsType.Scope) {
-		return str.slice(scopePrefix.length);
-	}
-
 	return str;
 }

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer.tsx

@@ -3,23 +3,25 @@ import './QueryBuilderSearch.styles.scss';
 import { Tooltip } from 'antd';
 
 import { TagContainer, TagLabel, TagValue } from './style';
+import { getOptionType } from './utils';
 
 function OptionRenderer({
 	label,
 	value,
 	dataType,
-	type,
 }: OptionRendererProps): JSX.Element {
+	const optionType = getOptionType(label);
+
 	return (
 		<span className="option">
-			{type ? (
+			{optionType ? (
 				<Tooltip title={`${value}`} placement="topLeft">
 					<div className="selectOptionContainer">
 						<div className="option-value">{value}</div>
 						<div className="option-meta-data-container">
 							<TagContainer>
 								<TagLabel>Type: </TagLabel>
-								<TagValue>{type}</TagValue>
+								<TagValue>{optionType}</TagValue>
 							</TagContainer>
 							<TagContainer>
 								<TagLabel>Data type: </TagLabel>
@@ -41,7 +43,6 @@ interface OptionRendererProps {
 	label: string;
 	value: string;
 	dataType: string;
-	type: string;
 }
 
 export default OptionRenderer;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -410,7 +410,6 @@ function QueryBuilderSearch({
 									label={option.label}
 									value={option.value}
 									dataType={option.dataType || ''}
-									type={option.type || ''}
 								/>
 								{option.selected && <StyledCheckOutlined />}
 							</Select.Option>

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -260,20 +260,6 @@
 					background: rgba(189, 153, 121, 0.1);
 				}
 			}
-
-			&.scope {
-				border: 1px solid rgba(113, 144, 249, 0.2);
-
-				.ant-typography {
-					color: var(--bg-robin-400);
-					background: rgba(113, 144, 249, 0.1);
-					font-size: 14px;
-				}
-
-				.ant-tag-close-icon {
-					background: rgba(113, 144, 249, 0.1);
-				}
-			}
 		}
 	}
 }

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions.styles.scss

@@ -94,25 +94,6 @@
 						letter-spacing: -0.06px;
 					}
 				}
-
-				&.scope {
-					border-radius: 50px;
-					background: rgba(113, 144, 249, 0.1) !important;
-					color: var(--bg-robin-400) !important;
-
-					.dot {
-						background-color: var(--bg-robin-400);
-					}
-					.text {
-						color: var(--bg-robin-400);
-						font-family: Inter;
-						font-size: 12px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 18px; /* 150% */
-						letter-spacing: -0.06px;
-					}
-				}
 			}
 		}
 		.option-meta-data-container {

frontend/src/container/QueryBuilder/type.ts

@@ -16,5 +16,4 @@ export type Option = {
 	selected?: boolean;
 	dataType?: string;
 	isIndexed?: boolean;
-	type?: string;
 };

frontend/src/container/SideNav/SideNav.tsx

@@ -113,9 +113,7 @@ function SideNav({
 		if (!isOnboardingEnabled || !isCloudUser()) {
 			let items = [...menuItems];
 
-			items = items.filter(
-				(item) => item.key !== ROUTES.GET_STARTED && item.key !== ROUTES.ONBOARDING,
-			);
+			items = items.filter((item) => item.key !== ROUTES.GET_STARTED);
 
 			setMenuItems(items);
 		}

frontend/src/container/SideNav/config.ts

@@ -27,7 +27,6 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.ERROR_DETAIL]: [QueryParams.resourceAttributes],
 	[ROUTES.HOME_PAGE]: [QueryParams.resourceAttributes],
 	[ROUTES.GET_STARTED]: [QueryParams.resourceAttributes],
-	[ROUTES.ONBOARDING]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_ALL_ALERT]: [QueryParams.resourceAttributes],
 	[ROUTES.LIST_LICENSES]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGIN]: [QueryParams.resourceAttributes],

frontend/src/hooks/messagingQueue / onboarding/useOnboardingStatus.tsx

@@ -1,29 +0,0 @@
-import getOnboardingStatus, {
-	OnboardingStatusResponse,
-} from 'api/messagingQueues/onboarding/getOnboardingStatus';
-import { useQuery, UseQueryOptions, UseQueryResult } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-type UseOnboardingStatus = (
-	options?: UseQueryOptions<
-		SuccessResponse<OnboardingStatusResponse> | ErrorResponse
-	>,
-	endpointService?: string,
-	queryKey?: string,
-) => UseQueryResult<SuccessResponse<OnboardingStatusResponse> | ErrorResponse>;
-
-export const useOnboardingStatus: UseOnboardingStatus = (
-	options,
-	endpointService,
-	queryKey,
-) =>
-	useQuery<SuccessResponse<OnboardingStatusResponse> | ErrorResponse>({
-		queryKey: [queryKey || `onboardingStatus-${endpointService}`],
-		queryFn: () =>
-			getOnboardingStatus({
-				start: (Date.now() - 15 * 60 * 1000) * 1_000_000,
-				end: Date.now() * 1_000_000,
-				endpointService,
-			}),
-		...options,
-	});

frontend/src/hooks/queryBuilder/useOptions.ts

@@ -46,7 +46,6 @@ export const useOptions = (
 				value: item.key,
 				dataType: item.dataType,
 				isIndexed: item?.isIndexed,
-				type: item?.type || '',
 			})),
 		[getLabel],
 	);

frontend/src/hooks/useUrlQueryData.ts

@@ -1,8 +1,7 @@
+import useUrlQuery from 'hooks/useUrlQuery';
 import { useCallback, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
-import useUrlQuery from './useUrlQuery';
-
 const useUrlQueryData = <T>(
 	queryKey: string,
 	defaultData?: T,
@@ -11,7 +10,7 @@ const useUrlQueryData = <T>(
 	const location = useLocation();
 	const urlQuery = useUrlQuery();
 
-	const query = useMemo(() => urlQuery.get(queryKey), [urlQuery, queryKey]);
+	const query = useMemo(() => urlQuery.get(queryKey), [queryKey, urlQuery]);
 
 	const queryData: T = useMemo(() => (query ? JSON.parse(query) : defaultData), [
 		query,
@@ -22,19 +21,11 @@ const useUrlQueryData = <T>(
 		(newQueryData: T): void => {
 			const newQuery = JSON.stringify(newQueryData);
 
-			// Create a new URLSearchParams object with the current URL's search params
-			// This ensures we're working with the most up-to-date URL state
-			const currentUrlQuery = new URLSearchParams(window.location.search);
-
-			// Update or add the specified query parameter with the new serialized data
-			currentUrlQuery.set(queryKey, newQuery);
-
-			// Construct the new URL by combining the current pathname with the updated query string
-			const generatedUrl = `${location.pathname}?${currentUrlQuery.toString()}`;
-
+			urlQuery.set(queryKey, newQuery);
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 			history.replace(generatedUrl);
 		},
-		[history, location.pathname, queryKey],
+		[history, location, urlQuery, queryKey],
 	);
 
 	return {

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -163,8 +163,7 @@ export const getUPlotChartOptions = ({
 
 	const stackBarChart = stackChart && isUndefined(hiddenGraph);
 
-	const isAnomalyRule =
-		apiResponse?.data?.newResult?.data?.result[0]?.isAnomaly || false;
+	const isAnomalyRule = apiResponse?.data?.newResult?.data?.result[0].isAnomaly;
 
 	const series = getStackedSeries(apiResponse?.data?.result || []);
 

frontend/src/pages/AlertDetails/hooks.tsx

@@ -57,11 +57,8 @@ export const useAlertHistoryQueryParams = (): {
 
 	const startTime = params.get(QueryParams.startTime);
 	const endTime = params.get(QueryParams.endTime);
-	const relativeTimeParam = params.get(QueryParams.relativeTime);
-
 	const relativeTime =
-		(relativeTimeParam === 'null' ? null : relativeTimeParam) ??
-		RelativeTimeMap['6hr'];
+		params.get(QueryParams.relativeTime) ?? RelativeTimeMap['6hr'];
 
 	const intStartTime = parseInt(startTime || '0', 10);
 	const intEndTime = parseInt(endTime || '0', 10);

frontend/src/pages/Integrations/Integrations.styles.scss

@@ -15,6 +15,7 @@
 				font-style: normal;
 				line-height: 28px; /* 155.556% */
 				letter-spacing: -0.09px;
+				font-family: Inter;
 				font-weight: 500;
 			}
 
@@ -24,6 +25,7 @@
 				font-style: normal;
 				line-height: 20px; /* 142.857% */
 				letter-spacing: -0.07px;
+				font-family: Inter;
 				font-weight: 400;
 			}
 
@@ -127,6 +129,7 @@
 
 					.heading {
 						color: var(--bg-vanilla-100);
+						font-family: Inter;
 						font-size: 14px;
 						font-style: normal;
 						font-weight: 500;
@@ -137,6 +140,7 @@
 
 					.description {
 						color: var(--bg-vanilla-400);
+						font-family: Inter;
 						font-size: 12px;
 						font-style: normal;
 						font-weight: 400;
@@ -159,6 +163,7 @@
 					background: var(--bg-ink-200);
 					box-shadow: none;
 					color: var(--bg-vanilla-400);
+					font-family: Inter;
 					font-size: 12px;
 					font-style: normal;
 					font-weight: 400;

frontend/src/pages/LogsExplorer/utils.tsx

@@ -66,9 +66,9 @@ export const LogsQuickFiltersConfig: IQuickFiltersConfig[] = [
 		type: FiltersType.CHECKBOX,
 		title: 'Hostname',
 		attributeKey: {
-			key: 'host.name',
+			key: 'hostname',
 			dataType: DataTypes.String,
-			type: 'resource',
+			type: 'tag',
 			isColumn: false,
 			isJSON: false,
 		},

frontend/src/pages/MessagingQueues/MQDetailPage/MQDetailPage.tsx

@@ -1,65 +1,26 @@
-/* eslint-disable no-nested-ternary */
 import '../MessagingQueues.styles.scss';
 
 import { Select, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { ListMinus } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import {
-	MessagingQueuesViewType,
-	MessagingQueuesViewTypeOptions,
-	ProducerLatencyOptions,
-} from '../MessagingQueuesUtils';
-import DropRateView from '../MQDetails/DropRateView/DropRateView';
-import MessagingQueueOverview from '../MQDetails/MessagingQueueOverview';
+import { MessagingQueuesViewType } from '../MessagingQueuesUtils';
+import { SelectLabelWithComingSoon } from '../MQCommon/MQCommon';
 import MessagingQueuesDetails from '../MQDetails/MQDetails';
 import MessagingQueuesConfigOptions from '../MQGraph/MQConfigOptions';
 import MessagingQueuesGraph from '../MQGraph/MQGraph';
 
 function MQDetailPage(): JSX.Element {
 	const history = useHistory();
-	const [
-		selectedView,
-		setSelectedView,
-	] = useState<MessagingQueuesViewTypeOptions>(
-		MessagingQueuesViewType.consumerLag.value,
-	);
-
-	const [
-		producerLatencyOption,
-		setproducerLatencyOption,
-	] = useState<ProducerLatencyOptions>(ProducerLatencyOptions.Producers);
-
-	const mqServiceView = useUrlQuery().get(
-		QueryParams.mqServiceView,
-	) as MessagingQueuesViewTypeOptions;
 
 	useEffect(() => {
 		logEvent('Messaging Queues: Detail page visited', {});
 	}, []);
 
-	useEffect(() => {
-		if (mqServiceView) {
-			setSelectedView(mqServiceView);
-		}
-	}, [mqServiceView]);
-
-	const updateUrlQuery = (query: Record<string, string | number>): void => {
-		const searchParams = new URLSearchParams(history.location.search);
-		Object.keys(query).forEach((key) => {
-			searchParams.set(key, query[key].toString());
-		});
-		history.push({
-			search: searchParams.toString(),
-		});
-	};
-
 	return (
 		<div className="messaging-queue-container">
 			<div className="messaging-breadcrumb">
@@ -78,55 +39,50 @@ function MQDetailPage(): JSX.Element {
 						className="messaging-queue-options"
 						defaultValue={MessagingQueuesViewType.consumerLag.value}
 						popupClassName="messaging-queue-options-popup"
-						onChange={(value): void => {
-							setSelectedView(value);
-							updateUrlQuery({ [QueryParams.mqServiceView]: value });
-						}}
-						value={mqServiceView}
 						options={[
 							{
 								label: MessagingQueuesViewType.consumerLag.label,
 								value: MessagingQueuesViewType.consumerLag.value,
 							},
 							{
-								label: MessagingQueuesViewType.partitionLatency.label,
+								label: (
+									<SelectLabelWithComingSoon
+										label={MessagingQueuesViewType.partitionLatency.label}
+									/>
+								),
 								value: MessagingQueuesViewType.partitionLatency.value,
+								disabled: true,
 							},
 							{
-								label: MessagingQueuesViewType.producerLatency.label,
+								label: (
+									<SelectLabelWithComingSoon
+										label={MessagingQueuesViewType.producerLatency.label}
+									/>
+								),
 								value: MessagingQueuesViewType.producerLatency.value,
+								disabled: true,
 							},
 							{
-								label: MessagingQueuesViewType.dropRate.label,
-								value: MessagingQueuesViewType.dropRate.value,
+								label: (
+									<SelectLabelWithComingSoon
+										label={MessagingQueuesViewType.consumerLatency.label}
+									/>
+								),
+								value: MessagingQueuesViewType.consumerLatency.value,
+								disabled: true,
 							},
 						]}
 					/>
 				</div>
 				<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 			</div>
-			{selectedView === MessagingQueuesViewType.consumerLag.value ? (
-				<div className="messaging-queue-main-graph">
-					<MessagingQueuesConfigOptions />
-					<MessagingQueuesGraph />
-				</div>
-			) : selectedView === MessagingQueuesViewType.dropRate.value ? (
-				<DropRateView />
-			) : (
-				<MessagingQueueOverview
-					selectedView={selectedView}
-					option={producerLatencyOption}
-					setOption={setproducerLatencyOption}
-				/>
-			)}
-			{selectedView !== MessagingQueuesViewType.dropRate.value && (
-				<div className="messaging-queue-details">
-					<MessagingQueuesDetails
-						selectedView={selectedView}
-						producerLatencyOption={producerLatencyOption}
-					/>
-				</div>
-			)}
+			<div className="messaging-queue-main-graph">
+				<MessagingQueuesConfigOptions />
+				<MessagingQueuesGraph />
+			</div>
+			<div className="messaging-queue-details">
+				<MessagingQueuesDetails />
+			</div>
 		</div>
 	);
 }

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.styles.scss

@@ -1,30 +0,0 @@
-.evaluation-time-selector {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-
-	.eval-title {
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 28px;
-		color: var(--bg-vanilla-200);
-	}
-
-	.ant-selector {
-		background-color: var(--bg-ink-400);
-		border-radius: 4px;
-		border: 1px solid var(--bg-slate-400);
-		box-shadow: none;
-	}
-}
-
-.select-dropdown-render {
-	padding: 8px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 200px;
-	margin: 6px;
-}

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/DropRateView.tsx

@@ -1,251 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-import '../MQDetails.style.scss';
-
-import { Table, Typography } from 'antd';
-import axios from 'axios';
-import cx from 'classnames';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import ROUTES from 'constants/routes';
-import { useNotifications } from 'hooks/useNotifications';
-import { isNumber } from 'lodash-es';
-import {
-	convertToTitleCase,
-	MessagingQueuesViewType,
-	RowData,
-} from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useEffect, useMemo, 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 { MessagingQueueServicePayload } from '../MQTables/getConsumerLagDetails';
-import { getKafkaSpanEval } from '../MQTables/getKafkaSpanEval';
-import {
-	convertToMilliseconds,
-	DropRateAPIResponse,
-	DropRateResponse,
-} from './dropRateViewUtils';
-import EvaluationTimeSelector from './EvaluationTimeSelector';
-
-export function getTableData(data: DropRateResponse[]): RowData[] {
-	if (data?.length === 0) {
-		return [];
-	}
-
-	const tableData: RowData[] =
-		data?.map(
-			(row: DropRateResponse, index: number): RowData => ({
-				...(row.data as any), // todo-sagar
-				key: index,
-			}),
-		) || [];
-
-	return tableData;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function getColumns(
-	data: DropRateResponse[],
-	visibleCounts: Record<number, number>,
-	handleShowMore: (index: number) => void,
-): any[] {
-	if (data?.length === 0) {
-		return [];
-	}
-
-	const columnsOrder = [
-		'producer_service',
-		'consumer_service',
-		'breach_percentage',
-		'top_traceIDs',
-		'breached_spans',
-		'total_spans',
-	];
-
-	const columns: {
-		title: string;
-		dataIndex: string;
-		key: string;
-	}[] = columnsOrder.map((column) => ({
-		title: convertToTitleCase(column),
-		dataIndex: column,
-		key: column,
-		render: (
-			text: string | string[],
-			_record: any,
-			index: number,
-		): JSX.Element => {
-			if (Array.isArray(text)) {
-				const visibleCount = visibleCounts[index] || 4;
-				const visibleItems = text.slice(0, visibleCount);
-				const remainingCount = (text || []).length - visibleCount;
-
-				return (
-					<div>
-						<div className="trace-id-list">
-							{visibleItems.map((item, idx) => {
-								const shouldShowMore = remainingCount > 0 && idx === visibleCount - 1;
-								return (
-									<div key={item} className="traceid-style">
-										<Typography.Text
-											key={item}
-											className="traceid-text"
-											onClick={(): void => {
-												window.open(`${ROUTES.TRACE}/${item}`, '_blank');
-											}}
-										>
-											{item}
-										</Typography.Text>
-										{shouldShowMore && (
-											<Typography
-												onClick={(): void => handleShowMore(index)}
-												className="remaing-count"
-											>
-												+ {remainingCount} more
-											</Typography>
-										)}
-									</div>
-								);
-							})}
-						</div>
-					</div>
-				);
-			}
-
-			if (column === 'consumer_service' || column === 'producer_service') {
-				return (
-					<Typography.Link
-						onClick={(e): void => {
-							e.preventDefault();
-							e.stopPropagation();
-							window.open(`/services/${encodeURIComponent(text)}`, '_blank');
-						}}
-					>
-						{text}
-					</Typography.Link>
-				);
-			}
-
-			if (column === 'breach_percentage' && text) {
-				if (!isNumber(text))
-					return <Typography.Text>{text.toString()}</Typography.Text>;
-				return (
-					<Typography.Text>
-						{(typeof text === 'string' ? parseFloat(text) : text).toFixed(2)} %
-					</Typography.Text>
-				);
-			}
-
-			return <Typography.Text>{text}</Typography.Text>;
-		},
-	}));
-
-	return columns;
-}
-
-const showPaginationItem = (total: number, range: number[]): JSX.Element => (
-	<>
-		<Typography.Text className="numbers">
-			{range[0]} &#8212; {range[1]}
-		</Typography.Text>
-		<Typography.Text className="total"> of {total}</Typography.Text>
-	</>
-);
-
-function DropRateView(): JSX.Element {
-	const [columns, setColumns] = useState<any[]>([]);
-	const [tableData, setTableData] = useState<any[]>([]);
-	const { notifications } = useNotifications();
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const [data, setData] = useState<
-		DropRateAPIResponse['data']['result'][0]['list']
-	>([]);
-	const [interval, setInterval] = useState<string>('');
-
-	const [visibleCounts, setVisibleCounts] = useState<Record<number, number>>({});
-
-	const paginationConfig = useMemo(
-		() =>
-			tableData?.length > 10 && {
-				pageSize: 10,
-				showTotal: showPaginationItem,
-				showSizeChanger: false,
-				hideOnSinglePage: true,
-			},
-		[tableData],
-	);
-
-	const evaluationTime = useMemo(() => convertToMilliseconds(interval), [
-		interval,
-	]);
-	const tableApiPayload: MessagingQueueServicePayload = useMemo(
-		() => ({
-			start: minTime,
-			end: maxTime,
-			evalTime: evaluationTime * 1e6,
-		}),
-		[evaluationTime, maxTime, minTime],
-	);
-
-	const handleOnError = (error: Error): void => {
-		notifications.error({
-			message: axios.isAxiosError(error) ? error?.message : SOMETHING_WENT_WRONG,
-		});
-	};
-
-	const handleShowMore = (index: number): void => {
-		setVisibleCounts((prevCounts) => ({
-			...prevCounts,
-			[index]: (prevCounts[index] || 4) + 4,
-		}));
-	};
-
-	const { mutate: getViewDetails, isLoading } = useMutation(getKafkaSpanEval, {
-		onSuccess: (data) => {
-			if (data.payload) {
-				setData(data.payload.result[0].list);
-			}
-		},
-		onError: handleOnError,
-	});
-
-	useEffect(() => {
-		if (data?.length > 0) {
-			setColumns(getColumns(data, visibleCounts, handleShowMore));
-			setTableData(getTableData(data));
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [data, visibleCounts]);
-
-	useEffect(() => {
-		if (evaluationTime) {
-			getViewDetails(tableApiPayload);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [minTime, maxTime, evaluationTime]);
-
-	return (
-		<div className={cx('mq-overview-container', 'droprate-view')}>
-			<div className="mq-overview-title">
-				<div className="drop-rat-title">
-					{MessagingQueuesViewType.dropRate.label}
-				</div>
-				<EvaluationTimeSelector setInterval={setInterval} />
-			</div>
-			<Table
-				className={cx('mq-table', 'pagination-left')}
-				pagination={paginationConfig}
-				size="middle"
-				columns={columns}
-				dataSource={tableData}
-				bordered={false}
-				loading={isLoading}
-			/>
-		</div>
-	);
-}
-
-export default DropRateView;

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/EvaluationTimeSelector.tsx

@@ -1,111 +0,0 @@
-import './DropRateView.styles.scss';
-
-import { Input, Select, Typography } from 'antd';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-
-const { Option } = Select;
-
-interface SelectDropdownRenderProps {
-	menu: React.ReactNode;
-	inputValue: string;
-	handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-	handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-	handleAddCustomValue: () => void;
-}
-
-function SelectDropdownRender({
-	menu,
-	inputValue,
-	handleInputChange,
-	handleAddCustomValue,
-	handleKeyDown,
-}: SelectDropdownRenderProps): JSX.Element {
-	return (
-		<>
-			{menu}
-			<Input
-				placeholder="Enter custom time (ms)"
-				value={inputValue}
-				onChange={handleInputChange}
-				onKeyDown={handleKeyDown}
-				onBlur={handleAddCustomValue}
-				className="select-dropdown-render"
-			/>
-		</>
-	);
-}
-
-function EvaluationTimeSelector({
-	setInterval,
-}: {
-	setInterval: Dispatch<SetStateAction<string>>;
-}): JSX.Element {
-	const [inputValue, setInputValue] = useState<string>('');
-	const [selectedInterval, setSelectedInterval] = useState<string | null>('5ms');
-	const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
-
-	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		setInputValue(e.target.value);
-	};
-
-	const handleSelectChange = (value: string): void => {
-		setSelectedInterval(value);
-		setInputValue('');
-		setDropdownOpen(false);
-	};
-
-	const handleAddCustomValue = (): void => {
-		setSelectedInterval(inputValue);
-		setInputValue(inputValue);
-		setDropdownOpen(false);
-	};
-
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-		if (e.key === 'Enter') {
-			e.preventDefault();
-			e.stopPropagation();
-			handleAddCustomValue();
-		}
-	};
-
-	const renderDropdown = (menu: React.ReactNode): JSX.Element => (
-		<SelectDropdownRender
-			menu={menu}
-			inputValue={inputValue}
-			handleInputChange={handleInputChange}
-			handleAddCustomValue={handleAddCustomValue}
-			handleKeyDown={handleKeyDown}
-		/>
-	);
-
-	useEffect(() => {
-		if (selectedInterval) {
-			setInterval(() => selectedInterval);
-		}
-	}, [selectedInterval, setInterval]);
-
-	return (
-		<div className="evaluation-time-selector">
-			<Typography.Text className="eval-title">
-				Evaluation Interval:
-			</Typography.Text>
-			<Select
-				style={{ width: 220 }}
-				placeholder="Select time interval (ms)"
-				value={selectedInterval}
-				onChange={handleSelectChange}
-				open={dropdownOpen}
-				onDropdownVisibleChange={setDropdownOpen}
-				dropdownRender={renderDropdown}
-			>
-				<Option value="1ms">1ms</Option>
-				<Option value="2ms">2ms</Option>
-				<Option value="5ms">5ms</Option>
-				<Option value="10ms">10ms</Option>
-				<Option value="15ms">15ms</Option>
-			</Select>
-		</div>
-	);
-}
-
-export default EvaluationTimeSelector;

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/dropRateViewUtils.ts

@@ -1,46 +0,0 @@
-export function convertToMilliseconds(timeInput: string): number {
-	if (!timeInput.trim()) {
-		return 0;
-	}
-
-	const match = timeInput.match(/^(\d+)(ms|s|ns)?$/); // Match number and optional unit
-	if (!match) {
-		throw new Error(`Invalid time format: ${timeInput}`);
-	}
-
-	const value = parseInt(match[1], 10);
-	const unit = match[2] || 'ms'; // Default to 'ms' if no unit is provided
-
-	switch (unit) {
-		case 's':
-			return value * 1e3;
-		case 'ms':
-			return value;
-		case 'ns':
-			return value / 1e6;
-		default:
-			throw new Error('Invalid time format');
-	}
-}
-
-export interface DropRateResponse {
-	timestamp: string;
-	data: {
-		breach_percentage: number;
-		breached_spans: number;
-		consumer_service: string;
-		producer_service: string;
-		top_traceIDs: string[];
-		total_spans: number;
-	};
-}
-export interface DropRateAPIResponse {
-	status: string;
-	data: {
-		resultType: string;
-		result: {
-			queryName: string;
-			list: DropRateResponse[];
-		}[];
-	};
-}

frontend/src/pages/MessagingQueues/MQDetails/MQDetails.style.scss

@@ -4,115 +4,3 @@
 	flex-direction: column;
 	gap: 24px;
 }
-
-.mq-overview-container {
-	display: flex;
-	padding: 24px;
-	flex-direction: column;
-	align-items: start;
-	gap: 16px;
-
-	border-radius: 6px;
-	border: 1px solid var(--bg-slate-500);
-	background: var(--bg-ink-500);
-
-	.mq-overview-title {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		width: 100%;
-
-		.drop-rat-title {
-			color: var(--bg-vanilla-200);
-
-			font-family: Inter;
-			font-size: 18px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 28px;
-		}
-	}
-
-	.mq-details-options {
-		letter-spacing: -0.06px;
-		cursor: pointer;
-
-		.ant-radio-button-wrapper {
-			border-color: var(--bg-slate-400);
-			color: var(--bg-vanilla-400);
-		}
-		.ant-radio-button-wrapper-checked {
-			background: var(--bg-slate-400);
-			color: var(--bg-vanilla-100);
-		}
-		.ant-radio-button-wrapper::before {
-			width: 0px;
-		}
-	}
-}
-
-.droprate-view {
-	.mq-table {
-		width: 100%;
-
-		.ant-table-content {
-			border-radius: 6px;
-			border: 1px solid var(--bg-slate-500);
-			box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
-		}
-
-		.ant-table-tbody {
-			.ant-table-cell {
-				max-width: 250px;
-				border-bottom: none;
-			}
-		}
-
-		.ant-table-thead {
-			.ant-table-cell {
-				background-color: var(--bg-ink-500);
-				border-bottom: 1px solid var(--bg-slate-500);
-			}
-		}
-	}
-
-	.trace-id-list {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		width: max-content;
-
-		.traceid-style {
-			display: flex;
-			gap: 8px;
-			align-items: center;
-
-			.traceid-text {
-				border-radius: 2px;
-				border: 1px solid var(--bg-slate-400);
-				background: var(--bg-slate-400);
-				padding: 2px;
-				cursor: pointer;
-			}
-
-			.remaing-count {
-				cursor: pointer;
-				color: var(--bg-vanilla-100);
-				font-family: Inter;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: -0.06px;
-			}
-		}
-	}
-}
-
-.pagination-left {
-	&.mq-table {
-		.ant-pagination {
-			justify-content: flex-start;
-		}
-	}
-}

frontend/src/pages/MessagingQueues/MQDetails/MQDetails.tsx

@@ -1,222 +1,65 @@
 import './MQDetails.style.scss';
 
 import { Radio } from 'antd';
-import { QueryParams } from 'constants/query';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { isEmpty } from 'lodash-es';
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
+import { Dispatch, SetStateAction, useState } from 'react';
 
 import {
 	ConsumerLagDetailTitle,
-	getMetaDataAndAPIPerView,
-	MessagingQueueServiceDetailType,
-	MessagingQueuesViewType,
-	MessagingQueuesViewTypeOptions,
-	ProducerLatencyOptions,
-	SelectedTimelineQuery,
+	ConsumerLagDetailType,
 } from '../MessagingQueuesUtils';
 import { ComingSoon } from '../MQCommon/MQCommon';
 import MessagingQueuesTable from './MQTables/MQTables';
 
-const MQServiceDetailTypePerView = (
-	producerLatencyOption: ProducerLatencyOptions,
-): Record<string, MessagingQueueServiceDetailType[]> => ({
-	[MessagingQueuesViewType.consumerLag.value]: [
-		MessagingQueueServiceDetailType.ConsumerDetails,
-		MessagingQueueServiceDetailType.ProducerDetails,
-		MessagingQueueServiceDetailType.NetworkLatency,
-		MessagingQueueServiceDetailType.PartitionHostMetrics,
-	],
-	[MessagingQueuesViewType.partitionLatency.value]: [
-		MessagingQueueServiceDetailType.ConsumerDetails,
-		MessagingQueueServiceDetailType.ProducerDetails,
-	],
-	[MessagingQueuesViewType.producerLatency.value]: [
-		producerLatencyOption === ProducerLatencyOptions.Consumers
-			? MessagingQueueServiceDetailType.ConsumerDetails
-			: MessagingQueueServiceDetailType.ProducerDetails,
-	],
-});
-
-interface MessagingQueuesOptionsProps {
-	currentTab: MessagingQueueServiceDetailType;
-	setCurrentTab: Dispatch<SetStateAction<MessagingQueueServiceDetailType>>;
-	selectedView: MessagingQueuesViewTypeOptions;
-	producerLatencyOption: ProducerLatencyOptions;
-}
-
 function MessagingQueuesOptions({
 	currentTab,
 	setCurrentTab,
-	selectedView,
-	producerLatencyOption,
-}: MessagingQueuesOptionsProps): JSX.Element {
-	const handleChange = (value: MessagingQueueServiceDetailType): void => {
-		setCurrentTab(value);
-	};
-
-	const renderRadioButtons = (): JSX.Element[] => {
-		const detailTypes =
-			MQServiceDetailTypePerView(producerLatencyOption)[selectedView] || [];
-		return detailTypes.map((detailType) => (
-			<Radio.Button
-				key={detailType}
-				value={detailType}
-				disabled={
-					detailType === MessagingQueueServiceDetailType.PartitionHostMetrics
-				}
-				className={
-					detailType === MessagingQueueServiceDetailType.PartitionHostMetrics
-						? 'disabled-option'
-						: ''
-				}
-			>
-				{ConsumerLagDetailTitle[detailType]}
-				{detailType === MessagingQueueServiceDetailType.PartitionHostMetrics && (
-					<ComingSoon />
-				)}
-			</Radio.Button>
-		));
-	};
+}: {
+	currentTab: ConsumerLagDetailType;
+	setCurrentTab: Dispatch<SetStateAction<ConsumerLagDetailType>>;
+}): JSX.Element {
+	const [option, setOption] = useState<ConsumerLagDetailType>(currentTab);
 
 	return (
 		<Radio.Group
-			onChange={(e): void => handleChange(e.target.value)}
-			value={currentTab}
+			onChange={(value): void => {
+				setOption(value.target.value);
+				setCurrentTab(value.target.value);
+			}}
+			value={option}
 			className="mq-details-options"
 		>
-			{renderRadioButtons()}
+			<Radio.Button value={ConsumerLagDetailType.ConsumerDetails} checked>
+				{ConsumerLagDetailTitle[ConsumerLagDetailType.ConsumerDetails]}
+			</Radio.Button>
+			<Radio.Button value={ConsumerLagDetailType.ProducerDetails}>
+				{ConsumerLagDetailTitle[ConsumerLagDetailType.ProducerDetails]}
+			</Radio.Button>
+			<Radio.Button value={ConsumerLagDetailType.NetworkLatency}>
+				{ConsumerLagDetailTitle[ConsumerLagDetailType.NetworkLatency]}
+			</Radio.Button>
+			<Radio.Button
+				value={ConsumerLagDetailType.PartitionHostMetrics}
+				disabled
+				className="disabled-option"
+			>
+				{ConsumerLagDetailTitle[ConsumerLagDetailType.PartitionHostMetrics]}
+				<ComingSoon />
+			</Radio.Button>
 		</Radio.Group>
 	);
 }
 
-const checkValidityOfDetailConfigs = (
-	selectedTimelineQuery: SelectedTimelineQuery,
-	selectedView: MessagingQueuesViewTypeOptions,
-	currentTab: MessagingQueueServiceDetailType,
-	configDetails?: {
-		[key: string]: string;
-	},
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-): boolean => {
-	if (selectedView === MessagingQueuesViewType.consumerLag.value) {
-		return !(
-			isEmpty(selectedTimelineQuery) ||
-			(!selectedTimelineQuery?.group &&
-				!selectedTimelineQuery?.topic &&
-				!selectedTimelineQuery?.partition)
-		);
-	}
-
-	if (selectedView === MessagingQueuesViewType.partitionLatency.value) {
-		if (isEmpty(configDetails)) {
-			return false;
-		}
-
-		return Boolean(configDetails?.topic && configDetails?.partition);
-	}
-
-	if (selectedView === MessagingQueuesViewType.producerLatency.value) {
-		if (isEmpty(configDetails)) {
-			return false;
-		}
-
-		if (currentTab === MessagingQueueServiceDetailType.ProducerDetails) {
-			return Boolean(
-				configDetails?.topic &&
-					configDetails?.partition &&
-					configDetails?.service_name,
-			);
-		}
-		return Boolean(configDetails?.topic && configDetails?.service_name);
-	}
-
-	return selectedView === MessagingQueuesViewType.dropRate.value;
-};
-
-function MessagingQueuesDetails({
-	selectedView,
-	producerLatencyOption,
-}: {
-	selectedView: MessagingQueuesViewTypeOptions;
-	producerLatencyOption: ProducerLatencyOptions;
-}): JSX.Element {
-	const [currentTab, setCurrentTab] = useState<MessagingQueueServiceDetailType>(
-		MessagingQueueServiceDetailType.ConsumerDetails,
+function MessagingQueuesDetails(): JSX.Element {
+	const [currentTab, setCurrentTab] = useState<ConsumerLagDetailType>(
+		ConsumerLagDetailType.ConsumerDetails,
 	);
-
-	useEffect(() => {
-		if (
-			producerLatencyOption &&
-			selectedView === MessagingQueuesViewType.producerLatency.value
-		) {
-			setCurrentTab(
-				producerLatencyOption === ProducerLatencyOptions.Consumers
-					? MessagingQueueServiceDetailType.ConsumerDetails
-					: MessagingQueueServiceDetailType.ProducerDetails,
-			);
-		}
-	}, [selectedView, producerLatencyOption]);
-
-	const urlQuery = useUrlQuery();
-	const timelineQuery = decodeURIComponent(
-		urlQuery.get(QueryParams.selectedTimelineQuery) || '',
-	);
-
-	const timelineQueryData: SelectedTimelineQuery = useMemo(
-		() => (timelineQuery ? JSON.parse(timelineQuery) : {}),
-		[timelineQuery],
-	);
-
-	const configDetails = decodeURIComponent(
-		urlQuery.get(QueryParams.configDetail) || '',
-	);
-
-	const configDetailQueryData: {
-		[key: string]: string;
-	} = useMemo(() => (configDetails ? JSON.parse(configDetails) : {}), [
-		configDetails,
-	]);
-
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	const serviceConfigDetails = useMemo(
-		() =>
-			getMetaDataAndAPIPerView({
-				detailType: currentTab,
-				minTime,
-				maxTime,
-				selectedTimelineQuery: timelineQueryData,
-				configDetails: configDetailQueryData,
-			}),
-		[configDetailQueryData, currentTab, maxTime, minTime, timelineQueryData],
-	);
-
 	return (
 		<div className="mq-details">
 			<MessagingQueuesOptions
 				currentTab={currentTab}
 				setCurrentTab={setCurrentTab}
-				selectedView={selectedView}
-				producerLatencyOption={producerLatencyOption}
-			/>
-			<MessagingQueuesTable
-				currentTab={currentTab}
-				selectedView={selectedView}
-				tableApi={serviceConfigDetails[selectedView]?.tableApi}
-				validConfigPresent={checkValidityOfDetailConfigs(
-					timelineQueryData,
-					selectedView,
-					currentTab,
-					configDetailQueryData,
-				)}
-				tableApiPayload={serviceConfigDetails[selectedView]?.tableApiPayload}
 			/>
+			<MessagingQueuesTable currentTab={currentTab} />
 		</div>
 	);
 }

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.styles.scss

@@ -1,7 +1,4 @@
 .mq-tables-container {
-	width: 100%;
-	height: 100%;
-
 	.mq-table-title {
 		display: flex;
 		align-items: center;
@@ -34,6 +31,9 @@
 		.ant-table-tbody {
 			.ant-table-cell {
 				max-width: 250px;
+
+				background-color: var(--bg-ink-400);
+
 				border-bottom: none;
 			}
 		}
@@ -63,21 +63,6 @@
 	}
 }
 
-.mq-table {
-	&.mq-overview-row-clickable {
-		.ant-table-row {
-			background-color: var(--bg-ink-400);
-
-			&:hover {
-				cursor: pointer;
-				background-color: var(--bg-slate-400) !important;
-				color: var(--bg-vanilla-400);
-				transition: background-color 0.3s ease, color 0.3s ease;
-			}
-		}
-	}
-}
-
 .lightMode {
 	.mq-tables-container {
 		.mq-table-title {

frontend/src/pages/MessagingQueues/MQDetails/MQTables/MQTables.tsx

@@ -1,11 +1,9 @@
-/* eslint-disable no-nested-ternary */
-/* eslint-disable react/require-default-props */
 import './MQTables.styles.scss';
 
 import { Skeleton, Table, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import axios from 'axios';
 import { isNumber } from 'chart.js/helpers';
-import cx from 'classnames';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
@@ -15,31 +13,27 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { isEmpty } from 'lodash-es';
 import {
 	ConsumerLagDetailTitle,
+	ConsumerLagDetailType,
 	convertToTitleCase,
-	MessagingQueueServiceDetailType,
-	MessagingQueuesViewType,
-	MessagingQueuesViewTypeOptions,
 	RowData,
 	SelectedTimelineQuery,
-	setConfigDetail,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
-import { useHistory, useLocation } from 'react-router-dom';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { useHistory } from 'react-router-dom';
 
 import {
-	MessagingQueueServicePayload,
+	ConsumerLagPayload,
+	getConsumerLagDetails,
 	MessagingQueuesPayloadProps,
 } from './getConsumerLagDetails';
 
-const INITIAL_PAGE_SIZE = 10;
-
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function getColumns(
 	data: MessagingQueuesPayloadProps['payload'],
 	history: History<unknown>,
 ): RowData[] {
+	console.log(data);
 	if (data?.result?.length === 0) {
 		return [];
 	}
@@ -111,25 +105,10 @@ const showPaginationItem = (total: number, range: number[]): JSX.Element => (
 	</>
 );
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function MessagingQueuesTable({
 	currentTab,
-	selectedView,
-	tableApiPayload,
-	tableApi,
-	validConfigPresent = false,
-	type = 'Detail',
 }: {
-	currentTab?: MessagingQueueServiceDetailType;
-	selectedView: MessagingQueuesViewTypeOptions;
-	tableApiPayload?: MessagingQueueServicePayload;
-	tableApi: (
-		props: MessagingQueueServicePayload,
-	) => Promise<
-		SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
-	>;
-	validConfigPresent?: boolean;
-	type?: 'Detail' | 'Overview';
+	currentTab: ConsumerLagDetailType;
 }): JSX.Element {
 	const [columns, setColumns] = useState<any[]>([]);
 	const [tableData, setTableData] = useState<any[]>([]);
@@ -139,26 +118,15 @@ function MessagingQueuesTable({
 	const timelineQuery = decodeURIComponent(
 		urlQuery.get(QueryParams.selectedTimelineQuery) || '',
 	);
-
 	const timelineQueryData: SelectedTimelineQuery = useMemo(
 		() => (timelineQuery ? JSON.parse(timelineQuery) : {}),
 		[timelineQuery],
 	);
 
-	const configDetails = decodeURIComponent(
-		urlQuery.get(QueryParams.configDetail) || '',
-	);
-
-	const configDetailQueryData: {
-		[key: string]: string;
-	} = useMemo(() => (configDetails ? JSON.parse(configDetails) : {}), [
-		configDetails,
-	]);
-
 	const paginationConfig = useMemo(
 		() =>
-			tableData?.length > INITIAL_PAGE_SIZE && {
-				pageSize: INITIAL_PAGE_SIZE,
+			tableData?.length > 20 && {
+				pageSize: 20,
 				showTotal: showPaginationItem,
 				showSizeChanger: false,
 				hideOnSinglePage: true,
@@ -166,14 +134,28 @@ function MessagingQueuesTable({
 		[tableData],
 	);
 
+	const props: ConsumerLagPayload = useMemo(
+		() => ({
+			start: (timelineQueryData?.start || 0) * 1e9,
+			end: (timelineQueryData?.end || 0) * 1e9,
+			variables: {
+				partition: timelineQueryData?.partition,
+				topic: timelineQueryData?.topic,
+				consumer_group: timelineQueryData?.group,
+			},
+			detailType: currentTab,
+		}),
+		[currentTab, timelineQueryData],
+	);
+
 	const handleConsumerDetailsOnError = (error: Error): void => {
 		notifications.error({
 			message: axios.isAxiosError(error) ? error?.message : SOMETHING_WENT_WRONG,
 		});
 	};
 
-	const { mutate: getViewDetails, isLoading, error, isError } = useMutation(
-		tableApi,
+	const { mutate: getConsumerDetails, isLoading } = useMutation(
+		getConsumerLagDetails,
 		{
 			onSuccess: (data) => {
 				if (data.payload) {
@@ -185,92 +167,57 @@ function MessagingQueuesTable({
 		},
 	);
 
-	useEffect(
-		() => {
-			if (validConfigPresent && tableApiPayload) {
-				getViewDetails(tableApiPayload);
-			}
-		},
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[currentTab, selectedView, tableApiPayload],
-	);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	useEffect(() => getConsumerDetails(props), [currentTab, props]);
 
-	const [selectedRowKey, setSelectedRowKey] = useState<React.Key>();
-	const [, setSelectedRows] = useState<any>();
-	const location = useLocation();
+	const isLogEventCalled = useRef<boolean>(false);
 
-	const onRowClick = (record: { [key: string]: string }): void => {
-		const selectedKey = record.key;
+	const isEmptyDetails = (timelineQueryData: SelectedTimelineQuery): boolean => {
+		const isEmptyDetail =
+			isEmpty(timelineQueryData) ||
+			(!timelineQueryData?.group &&
+				!timelineQueryData?.topic &&
+				!timelineQueryData?.partition);
 
-		if (`${selectedKey}_${selectedView}` === selectedRowKey) {
-			setSelectedRowKey(undefined);
-			setSelectedRows({});
-			setConfigDetail(urlQuery, location, history, {});
-		} else {
-			setSelectedRowKey(`${selectedKey}_${selectedView}`);
-			setSelectedRows(record);
-
-			if (!isEmpty(record)) {
-				setConfigDetail(urlQuery, location, history, record);
-			}
+		if (!isEmptyDetail && !isLogEventCalled.current) {
+			logEvent('Messaging Queues: More details viewed', {
+				'tab-option': ConsumerLagDetailTitle[currentTab],
+				variables: {
+					group: timelineQueryData?.group,
+					topic: timelineQueryData?.topic,
+					partition: timelineQueryData?.partition,
+				},
+			});
+			isLogEventCalled.current = true;
 		}
+		return isEmptyDetail;
 	};
 
-	const subtitle =
-		selectedView === MessagingQueuesViewType.consumerLag.value
-			? `${timelineQueryData?.group || ''} ${timelineQueryData?.topic || ''} ${
-					timelineQueryData?.partition || ''
-			  }`
-			: `${configDetailQueryData?.service_name || ''} ${
-					configDetailQueryData?.topic || ''
-			  } ${configDetailQueryData?.partition || ''}`;
-
 	return (
 		<div className="mq-tables-container">
-			{!validConfigPresent ? (
+			{isEmptyDetails(timelineQueryData) ? (
 				<div className="no-data-style">
 					<Typography.Text>
-						{selectedView === MessagingQueuesViewType.consumerLag.value
-							? 'Click on a co-ordinate above to see the details'
-							: 'Click on a row above to see the details'}
+						Click on a co-ordinate above to see the details
 					</Typography.Text>
 					<Skeleton />
 				</div>
-			) : isError ? (
-				<div className="no-data-style">
-					<Typography.Text>{error?.message || SOMETHING_WENT_WRONG}</Typography.Text>
-				</div>
 			) : (
 				<>
-					{currentTab && (
-						<div className="mq-table-title">
-							{ConsumerLagDetailTitle[currentTab]}
-							<div className="mq-table-subtitle">{subtitle}</div>
-						</div>
-					)}
+					<div className="mq-table-title">
+						{ConsumerLagDetailTitle[currentTab]}
+						<div className="mq-table-subtitle">{`${timelineQueryData?.group || ''} ${
+							timelineQueryData?.topic || ''
+						} ${timelineQueryData?.partition || ''}`}</div>
+					</div>
 					<Table
-						className={cx(
-							'mq-table',
-							type !== 'Detail' ? 'mq-overview-row-clickable' : 'pagination-left',
-						)}
+						className="mq-table"
 						pagination={paginationConfig}
 						size="middle"
 						columns={columns}
 						dataSource={tableData}
 						bordered={false}
 						loading={isLoading}
-						onRow={(record): any =>
-							type !== 'Detail'
-								? {
-										onClick: (): void => onRowClick(record),
-								  }
-								: {}
-						}
-						rowClassName={(record): any =>
-							`${record.key}_${selectedView}` === selectedRowKey
-								? 'ant-table-row-selected'
-								: ''
-						}
 					/>
 				</>
 			)}

frontend/src/pages/MessagingQueues/MQDetails/MQTables/getConsumerLagDetails.ts

@@ -1,18 +1,19 @@
 import axios from 'api';
-import { MessagingQueueServiceDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { ConsumerLagDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
-export interface MessagingQueueServicePayload {
+export interface ConsumerLagPayload {
 	start?: number | string;
 	end?: number | string;
-	variables?: {
+	variables: {
 		partition?: string;
 		topic?: string;
 		consumer_group?: string;
-		service_name?: string;
 	};
-	detailType?: MessagingQueueServiceDetailType | 'producer' | 'consumer';
-	evalTime?: number;
+	detailType: ConsumerLagDetailType;
 }
 
 export interface MessagingQueuesPayloadProps {
@@ -35,22 +36,26 @@ export interface MessagingQueuesPayloadProps {
 }
 
 export const getConsumerLagDetails = async (
-	props: MessagingQueueServicePayload,
+	props: ConsumerLagPayload,
 ): Promise<
 	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
 > => {
 	const { detailType, ...restProps } = props;
-	const response = await axios.post(
-		`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
-		{
-			...restProps,
-		},
-	);
+	try {
+		const response = await axios.post(
+			`/messaging-queues/kafka/consumer-lag/${props.detailType}`,
+			{
+				...restProps,
+			},
+		);
 
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler((error as AxiosError) || SOMETHING_WENT_WRONG);
+	}
 };

frontend/src/pages/MessagingQueues/MQDetails/MQTables/getKafkaSpanEval.tsx

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-import { DropRateAPIResponse } from '../DropRateView/dropRateViewUtils';
-import { MessagingQueueServicePayload } from './getConsumerLagDetails';
-
-export const getKafkaSpanEval = async (
-	props: Omit<MessagingQueueServicePayload, 'detailType' | 'variables'>,
-): Promise<SuccessResponse<DropRateAPIResponse['data']> | ErrorResponse> => {
-	const { start, end, evalTime } = props;
-	const response = await axios.post(`messaging-queues/kafka/span/evaluation`, {
-		start,
-		end,
-		eval_time: evalTime,
-	});
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};

frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyDetails.ts

@@ -1,33 +0,0 @@
-import axios from 'api';
-import { MessagingQueueServiceDetailType } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-import {
-	MessagingQueueServicePayload,
-	MessagingQueuesPayloadProps,
-} from './getConsumerLagDetails';
-
-export const getPartitionLatencyDetails = async (
-	props: MessagingQueueServicePayload,
-): Promise<
-	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
-> => {
-	const { detailType, ...rest } = props;
-	let endpoint = '';
-	if (detailType === MessagingQueueServiceDetailType.ConsumerDetails) {
-		endpoint = `/messaging-queues/kafka/partition-latency/consumer`;
-	} else {
-		endpoint = `/messaging-queues/kafka/consumer-lag/producer-details`;
-	}
-
-	const response = await axios.post(endpoint, {
-		...rest,
-	});
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};

frontend/src/pages/MessagingQueues/MQDetails/MQTables/getPartitionLatencyOverview.ts

@@ -1,27 +0,0 @@
-import axios from 'api';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-import {
-	MessagingQueueServicePayload,
-	MessagingQueuesPayloadProps,
-} from './getConsumerLagDetails';
-
-export const getPartitionLatencyOverview = async (
-	props: Omit<MessagingQueueServicePayload, 'detailType' | 'variables'>,
-): Promise<
-	SuccessResponse<MessagingQueuesPayloadProps['payload']> | ErrorResponse
-> => {
-	const response = await axios.post(
-		`/messaging-queues/kafka/partition-latency/overview`,
-		{
-			...props,
-		},
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: response.data.status,
-		payload: response.data.data,
-	};
-};