chore(signoz): 📌 pin versions: SigNoz 0.50.0

Signed-off-by: Prashant Shahi <prashant@signoz.io>

.github/CODEOWNERS

@@ -5,6 +5,6 @@
 /frontend/ @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
-/deploy/ @SigNoz/devops
-/sample-apps/ @SigNoz/devops
-.github @SigNoz/devops
+/deploy/ @prashant-shahi
+/sample-apps/ @prashant-shahi
+.github @prashant-shahi

.github/workflows/staging-deployment.yaml

@@ -30,7 +30,6 @@ jobs:
           GCP_PROJECT: ${{ secrets.GCP_PROJECT }}
           GCP_ZONE: ${{ secrets.GCP_ZONE }}
           GCP_INSTANCE: ${{ secrets.GCP_INSTANCE }}
-          CLOUDSDK_CORE_DISABLE_PROMPTS: 1
         run: |
           read -r -d '' COMMAND <<EOF || true
           echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
@@ -52,4 +51,4 @@ jobs:
           make build-frontend-amd64
           make run-testing
           EOF
-          gcloud beta compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"
+          gcloud compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"

.github/workflows/testing-deployment.yaml

@@ -30,7 +30,6 @@ jobs:
           GCP_PROJECT: ${{ secrets.GCP_PROJECT }}
           GCP_ZONE: ${{ secrets.GCP_ZONE }}
           GCP_INSTANCE: ${{ secrets.GCP_INSTANCE }}
-          CLOUDSDK_CORE_DISABLE_PROMPTS: 1
         run: |
           read -r -d '' COMMAND <<EOF || true
           echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
@@ -53,4 +52,4 @@ jobs:
           make build-frontend-amd64
           make run-testing
           EOF
-          gcloud beta compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"
+          gcloud compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --ssh-key-expire-after=15m --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"

.gitignore

@@ -67,6 +67,3 @@ e2e/.auth
 # go
 vendor/
 **/main/**
-
-# git-town
-.git-branches.toml

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

@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.49.1
+    image: signoz/query-service:0.50.0
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -211,7 +211,6 @@ services:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ./otel-collector-opamp-config.yaml:/etc/manager-config.yaml
       - /var/lib/docker/containers:/var/lib/docker/containers:ro
-      - /:/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

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

@@ -36,7 +36,6 @@ receivers:
       #   endpoint: 0.0.0.0:6832
   hostmetrics:
     collection_interval: 30s
-    root_path: /hostfs
     scrapers:
       cpu: {}
       load: {}

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

@@ -93,8 +93,6 @@ services:
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ./otel-collector-opamp-config.yaml:/etc/manager-config.yaml
-      - /var/lib/docker/containers:/var/lib/docker/containers:ro
-      - /:/hostfs:ro
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
     ports:

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

@@ -164,7 +164,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`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.49.1}
+    image: signoz/query-service:${DOCKER_TAG:-0.50.0}
     container_name: signoz-query-service
     command:
       [
@@ -204,7 +204,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.49.1}
+    image: signoz/frontend:${DOCKER_TAG:-0.50.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -244,7 +244,6 @@ services:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ./otel-collector-opamp-config.yaml:/etc/manager-config.yaml
       - /var/lib/docker/containers:/var/lib/docker/containers:ro
-      - /:/hostfs:ro
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
       - DOCKER_MULTI_NODE_CLUSTER=false

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

@@ -164,7 +164,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`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.49.1}
+    image: signoz/query-service:${DOCKER_TAG:-0.50.0}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.49.1}
+    image: signoz/frontend:${DOCKER_TAG:-0.50.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -243,7 +243,6 @@ services:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
       - ./otel-collector-opamp-config.yaml:/etc/manager-config.yaml
       - /var/lib/docker/containers:/var/lib/docker/containers:ro
-      - /:/hostfs:ro
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
       - DOCKER_MULTI_NODE_CLUSTER=false

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

@@ -36,7 +36,6 @@ receivers:
       #   endpoint: 0.0.0.0:6832
   hostmetrics:
     collection_interval: 30s
-    root_path: /hostfs
     scrapers:
       cpu: {}
       load: {}

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

@@ -1,9 +1,7 @@
 package api
 
 import (
-	"errors"
 	"net/http"
-	"strings"
 
 	"github.com/gorilla/mux"
 	"go.signoz.io/signoz/pkg/query-service/app/dashboards"
@@ -31,10 +29,6 @@ func (ah *APIHandler) lockUnlockDashboard(w http.ResponseWriter, r *http.Request
 
 	// Get the dashboard UUID from the request
 	uuid := mux.Vars(r)["uuid"]
-	if strings.HasPrefix(uuid,"integration") {
-		RespondError(w, &model.ApiError{Typ: model.ErrorForbidden, Err: errors.New("dashboards created by integrations cannot be unlocked")}, "You are not authorized to lock/unlock this dashboard")
-		return 
-	}
 	dashboard, err := dashboards.GetDashboard(r.Context(), uuid)
 	if err != nil {
 		RespondError(w, &model.ApiError{Typ: model.ErrorInternal, Err: err}, err.Error())

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

@@ -1,48 +1,17 @@
 package api
 
 import (
-	"encoding/json"
-	"errors"
-	"fmt"
-	"io"
 	"net/http"
-	"time"
 
-	"go.signoz.io/signoz/ee/query-service/constants"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
-	"go.uber.org/zap"
 )
 
 func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
-	ctx := r.Context()
 	featureSet, err := ah.FF().GetFeatureFlags()
 	if err != nil {
 		ah.HandleError(w, err, http.StatusInternalServerError)
 		return
 	}
-
-	if constants.FetchFeatures == "true" {
-		zap.L().Debug("fetching license")
-		license, err := ah.LM().GetRepo().GetActiveLicense(ctx)
-		if err != nil {
-			zap.L().Error("failed to fetch license", zap.Error(err))
-		} else if license == nil {
-			zap.L().Debug("no active license found")
-		} else {
-			licenseKey := license.Key
-
-			zap.L().Debug("fetching zeus features")
-			zeusFeatures, err := fetchZeusFeatures(constants.ZeusFeaturesURL, licenseKey)
-			if err == nil {
-				zap.L().Debug("fetched zeus features", zap.Any("features", zeusFeatures))
-				// merge featureSet and zeusFeatures in featureSet with higher priority to zeusFeatures
-				featureSet = MergeFeatureSets(zeusFeatures, featureSet)
-			} else {
-				zap.L().Error("failed to fetch zeus features", zap.Error(err))
-			}
-		}
-	}
-
 	if ah.opts.PreferSpanMetrics {
 		for idx := range featureSet {
 			feature := &featureSet[idx]
@@ -51,96 +20,5 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 			}
 		}
 	}
-
 	ah.Respond(w, featureSet)
 }
-
-// fetchZeusFeatures makes an HTTP GET request to the /zeusFeatures endpoint
-// and returns the FeatureSet.
-func fetchZeusFeatures(url, licenseKey string) (basemodel.FeatureSet, error) {
-	// Check if the URL is empty
-	if url == "" {
-		return nil, fmt.Errorf("url is empty")
-	}
-
-	// Check if the licenseKey is empty
-	if licenseKey == "" {
-		return nil, fmt.Errorf("licenseKey is empty")
-	}
-
-	// Creating an HTTP client with a timeout for better control
-	client := &http.Client{
-		Timeout: 10 * time.Second,
-	}
-	// Creating a new GET request
-	req, err := http.NewRequest("GET", url, nil)
-	if err != nil {
-		return nil, fmt.Errorf("failed to create request: %w", err)
-	}
-
-	// Setting the custom header
-	req.Header.Set("X-Signoz-Cloud-Api-Key", licenseKey)
-
-	// Making the GET request
-	resp, err := client.Do(req)
-	if err != nil {
-		return nil, fmt.Errorf("failed to make GET request: %w", err)
-	}
-	defer func() {
-		if resp != nil {
-			resp.Body.Close()
-		}
-	}()
-
-	// Check for non-OK status code
-	if resp.StatusCode != http.StatusOK {
-		return nil, fmt.Errorf("%w: %d %s", errors.New("received non-OK HTTP status code"), resp.StatusCode, http.StatusText(resp.StatusCode))
-	}
-
-	// Reading and decoding the response body
-	body, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return nil, fmt.Errorf("failed to read response body: %w", err)
-	}
-
-	var zeusResponse ZeusFeaturesResponse
-	if err := json.Unmarshal(body, &zeusResponse); err != nil {
-		return nil, fmt.Errorf("%w: %v", errors.New("failed to decode response body"), err)
-	}
-
-	if zeusResponse.Status != "success" {
-		return nil, fmt.Errorf("%w: %s", errors.New("failed to fetch zeus features"), zeusResponse.Status)
-	}
-
-	return zeusResponse.Data, nil
-}
-
-type ZeusFeaturesResponse struct {
-	Status string               `json:"status"`
-	Data   basemodel.FeatureSet `json:"data"`
-}
-
-// MergeFeatureSets merges two FeatureSet arrays with precedence to zeusFeatures.
-func MergeFeatureSets(zeusFeatures, internalFeatures basemodel.FeatureSet) basemodel.FeatureSet {
-	// Create a map to store the merged features
-	featureMap := make(map[string]basemodel.Feature)
-
-	// Add all features from the otherFeatures set to the map
-	for _, feature := range internalFeatures {
-		featureMap[feature.Name] = feature
-	}
-
-	// Add all features from the zeusFeatures set to the map
-	// If a feature already exists (i.e., same name), the zeusFeature will overwrite it
-	for _, feature := range zeusFeatures {
-		featureMap[feature.Name] = feature
-	}
-
-	// Convert the map back to a FeatureSet slice
-	var mergedFeatures basemodel.FeatureSet
-	for _, feature := range featureMap {
-		mergedFeatures = append(mergedFeatures, feature)
-	}
-
-	return mergedFeatures
-}

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

@@ -1,88 +0,0 @@
-package api
-
-import (
-	"testing"
-
-	"github.com/stretchr/testify/assert"
-	basemodel "go.signoz.io/signoz/pkg/query-service/model"
-)
-
-func TestMergeFeatureSets(t *testing.T) {
-	tests := []struct {
-		name             string
-		zeusFeatures     basemodel.FeatureSet
-		internalFeatures basemodel.FeatureSet
-		expected         basemodel.FeatureSet
-	}{
-		{
-			name:             "empty zeusFeatures and internalFeatures",
-			zeusFeatures:     basemodel.FeatureSet{},
-			internalFeatures: basemodel.FeatureSet{},
-			expected:         basemodel.FeatureSet{},
-		},
-		{
-			name: "non-empty zeusFeatures and empty internalFeatures",
-			zeusFeatures: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: false},
-			},
-			internalFeatures: basemodel.FeatureSet{},
-			expected: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: false},
-			},
-		},
-		{
-			name:         "empty zeusFeatures and non-empty internalFeatures",
-			zeusFeatures: basemodel.FeatureSet{},
-			internalFeatures: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: false},
-			},
-			expected: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: false},
-			},
-		},
-		{
-			name: "non-empty zeusFeatures and non-empty internalFeatures with no conflicts",
-			zeusFeatures: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature3", Active: false},
-			},
-			internalFeatures: basemodel.FeatureSet{
-				{Name: "Feature2", Active: true},
-				{Name: "Feature4", Active: false},
-			},
-			expected: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: true},
-				{Name: "Feature3", Active: false},
-				{Name: "Feature4", Active: false},
-			},
-		},
-		{
-			name: "non-empty zeusFeatures and non-empty internalFeatures with conflicts",
-			zeusFeatures: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: false},
-			},
-			internalFeatures: basemodel.FeatureSet{
-				{Name: "Feature1", Active: false},
-				{Name: "Feature3", Active: true},
-			},
-			expected: basemodel.FeatureSet{
-				{Name: "Feature1", Active: true},
-				{Name: "Feature2", Active: false},
-				{Name: "Feature3", Active: true},
-			},
-		},
-	}
-
-	for _, test := range tests {
-		t.Run(test.name, func(t *testing.T) {
-			actual := MergeFeatureSets(test.zeusFeatures, test.internalFeatures)
-			assert.ElementsMatch(t, test.expected, actual)
-		})
-	}
-}

ee/query-service/app/server.go

@@ -1,15 +1,14 @@
 package app
 
 import (
-	"bufio"
 	"bytes"
 	"context"
 	"encoding/json"
-	"errors"
 	"fmt"
 	"io"
 	"net"
 	"net/http"
+	"net/http/httputil"
 	_ "net/http/pprof" // http profiler
 	"os"
 	"regexp"
@@ -29,8 +28,6 @@ import (
 	"go.signoz.io/signoz/ee/query-service/integrations/gateway"
 	"go.signoz.io/signoz/ee/query-service/interfaces"
 	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"
@@ -44,7 +41,6 @@ import (
 	"go.signoz.io/signoz/pkg/query-service/app/logparsingpipeline"
 	"go.signoz.io/signoz/pkg/query-service/app/opamp"
 	opAmpModel "go.signoz.io/signoz/pkg/query-service/app/opamp/model"
-	"go.signoz.io/signoz/pkg/query-service/app/preferences"
 	"go.signoz.io/signoz/pkg/query-service/cache"
 	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
 	"go.signoz.io/signoz/pkg/query-service/healthcheck"
@@ -114,10 +110,6 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	baseexplorer.InitWithDSN(baseconst.RELATIONAL_DATASOURCE_PATH)
 
-	if err := preferences.InitDB(baseconst.RELATIONAL_DATASOURCE_PATH); err != nil {
-		return nil, err
-	}
-
 	localDB, err := dashboards.InitDB(baseconst.RELATIONAL_DATASOURCE_PATH)
 
 	if err != nil {
@@ -126,13 +118,33 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 
 	localDB.SetMaxOpenConns(10)
 
-	gatewayProxy, err := gateway.NewProxy(serverOptions.GatewayUrl, gateway.RoutePrefix)
-	if err != nil {
-		return nil, err
+	gatewayFeature := basemodel.Feature{
+		Name:       "GATEWAY",
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	}
+
+	//Activate this feature if the url is not empty
+	var gatewayProxy *httputil.ReverseProxy
+	if serverOptions.GatewayUrl == "" {
+		gatewayFeature.Active = false
+		gatewayProxy, err = gateway.NewNoopProxy()
+		if err != nil {
+			return nil, err
+		}
+	} else {
+		zap.L().Info("Enabling gateway feature flag ...")
+		gatewayFeature.Active = true
+		gatewayProxy, err = gateway.NewProxy(serverOptions.GatewayUrl, gateway.RoutePrefix)
+		if err != nil {
+			return nil, err
+		}
 	}
 
 	// initiate license manager
-	lm, err := licensepkg.StartManager("sqlite", localDB)
+	lm, err := licensepkg.StartManager("sqlite", localDB, gatewayFeature)
 	if err != nil {
 		return nil, err
 	}
@@ -181,13 +193,6 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		return nil, err
 	}
 
-	go func() {
-		err = migrate.ClickHouseMigrate(reader.GetConn(), serverOptions.Cluster)
-		if err != nil {
-			zap.L().Error("error while running clickhouse migrations", zap.Error(err))
-		}
-	}()
-
 	// initiate opamp
 	_, err = opAmpModel.InitDB(localDB)
 	if err != nil {
@@ -318,7 +323,7 @@ func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server,
 		// ip here for alert manager
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "SIGNOZ-API-KEY", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "SIGNOZ-API-KEY"},
 	})
 
 	handler := c.Handler(r)
@@ -335,17 +340,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 
 	// add auth middleware
 	getUserFromRequest := func(r *http.Request) (*basemodel.UserPayload, error) {
-		user, err := auth.GetUserFromRequest(r, apiHandler)
-
-		if err != nil {
-			return nil, err
-		}
-
-		if user.User.OrgId == "" {
-			return nil, model.UnauthorizedError(errors.New("orgId is missing in the claims"))
-		}
-
-		return user, nil
+		return auth.GetUserFromRequest(r, apiHandler)
 	}
 	am := baseapp.NewAuthMiddleware(getUserFromRequest)
 
@@ -359,12 +354,11 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
 	apiHandler.RegisterQueryRangeV4Routes(r, am)
-	apiHandler.RegisterWebSocketPaths(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH", "OPTIONS"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control", "X-SIGNOZ-QUERY-ID", "Sec-WebSocket-Protocol"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "cache-control"},
 	})
 
 	handler := c.Handler(r)
@@ -376,7 +370,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 	}, nil
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // loggingMiddleware is used for logging public api calls
 func loggingMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
@@ -388,7 +381,6 @@ func loggingMiddleware(next http.Handler) http.Handler {
 	})
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // loggingMiddlewarePrivate is used for logging private api calls
 // from internal services like alert manager
 func loggingMiddlewarePrivate(next http.Handler) http.Handler {
@@ -401,41 +393,27 @@ func loggingMiddlewarePrivate(next http.Handler) http.Handler {
 	})
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
 type loggingResponseWriter struct {
 	http.ResponseWriter
 	statusCode int
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
 func NewLoggingResponseWriter(w http.ResponseWriter) *loggingResponseWriter {
 	// WriteHeader(int) is not called if our response implicitly returns 200 OK, so
 	// we default to that status code.
 	return &loggingResponseWriter{w, http.StatusOK}
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
 func (lrw *loggingResponseWriter) WriteHeader(code int) {
 	lrw.statusCode = code
 	lrw.ResponseWriter.WriteHeader(code)
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
 // Flush implements the http.Flush interface.
 func (lrw *loggingResponseWriter) Flush() {
 	lrw.ResponseWriter.(http.Flusher).Flush()
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/logging.go
-// Support websockets
-func (lrw *loggingResponseWriter) Hijack() (net.Conn, *bufio.ReadWriter, error) {
-	h, ok := lrw.ResponseWriter.(http.Hijacker)
-	if !ok {
-		return nil, nil, errors.New("hijack not supported")
-	}
-	return h.Hijack()
-}
-
 func extractQueryRangeData(path string, r *http.Request) (map[string]interface{}, bool) {
 	pathToExtractBodyFromV3 := "/api/v3/query_range"
 	pathToExtractBodyFromV4 := "/api/v4/query_range"
@@ -572,7 +550,6 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 	})
 }
 
-// TODO(remove): Implemented at pkg/http/middleware/timeout.go
 func setTimeoutMiddleware(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		ctx := r.Context()
@@ -755,7 +732,6 @@ func makeRulesManager(
 		DisableRules: disableRules,
 		FeatureFlags: fm,
 		Reader:       ch,
-		EvalDelay:    baseconst.GetEvalDelay(),
 	}
 
 	// create Manager

ee/query-service/constants/constants.go

@@ -13,8 +13,6 @@ var LicenseAPIKey = GetOrDefaultEnv("SIGNOZ_LICENSE_API_KEY", "")
 var SaasSegmentKey = GetOrDefaultEnv("SIGNOZ_SAAS_SEGMENT_KEY", "")
 var SpanRenderLimitStr = GetOrDefaultEnv("SPAN_RENDER_LIMIT", "2500")
 var MaxSpansInTraceStr = GetOrDefaultEnv("MAX_SPANS_IN_TRACE", "250000")
-var FetchFeatures = GetOrDefaultEnv("FETCH_FEATURES", "false")
-var ZeusFeaturesURL = GetOrDefaultEnv("ZEUS_FEATURES_URL", "ZeusFeaturesURL")
 
 func GetOrDefaultEnv(key string, fallback string) string {
 	v := os.Getenv(key)

ee/query-service/dao/sqlite/auth.go

@@ -20,14 +20,11 @@ import (
 func (m *modelDao) createUserForSAMLRequest(ctx context.Context, email string) (*basemodel.User, basemodel.BaseApiError) {
 	// get auth domain from email domain
 	domain, apierr := m.GetDomainByEmail(ctx, email)
+
 	if apierr != nil {
 		zap.L().Error("failed to get domain from email", zap.Error(apierr))
 		return nil, model.InternalErrorStr("failed to get domain from email")
 	}
-	if domain == nil {
-		zap.L().Error("email domain does not match any authenticated domain", zap.String("email", email))
-		return nil, model.InternalErrorStr("email domain does not match any authenticated domain")
-	}
 
 	hash, err := baseauth.PasswordHash(utils.GeneratePassowrd())
 	if err != nil {

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

@@ -5,5 +5,5 @@ import (
 )
 
 func NewNoopProxy() (*httputil.ReverseProxy, error) {
-	return &httputil.ReverseProxy{}, nil
+	return nil, nil
 }

ee/query-service/license/manager.go

@@ -147,7 +147,7 @@ func (lm *Manager) GetLicenses(ctx context.Context) (response []model.License, a
 	for _, l := range licenses {
 		l.ParsePlan()
 
-		if lm.activeLicense != nil && l.Key == lm.activeLicense.Key {
+		if l.Key == lm.activeLicense.Key {
 			l.IsCurrent = true
 		}
 

ee/query-service/model/plans.go

@@ -11,8 +11,6 @@ const Enterprise = "ENTERPRISE_PLAN"
 const DisableUpsell = "DISABLE_UPSELL"
 const Onboarding = "ONBOARDING"
 const ChatSupport = "CHAT_SUPPORT"
-const Gateway = "GATEWAY"
-const PremiumSupport = "PREMIUM_SUPPORT"
 
 var BasicPlan = basemodel.FeatureSet{
 	basemodel.Feature{
@@ -113,20 +111,6 @@ var BasicPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       Gateway,
-		Active:     false,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
-	basemodel.Feature{
-		Name:       PremiumSupport,
-		Active:     false,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }
 
 var ProPlan = basemodel.FeatureSet{
@@ -221,20 +205,6 @@ var ProPlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       Gateway,
-		Active:     true,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
-	basemodel.Feature{
-		Name:       PremiumSupport,
-		Active:     true,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
@@ -343,18 +313,4 @@ var EnterprisePlan = basemodel.FeatureSet{
 		UsageLimit: -1,
 		Route:      "",
 	},
-	basemodel.Feature{
-		Name:       Gateway,
-		Active:     true,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
-	basemodel.Feature{
-		Name:       PremiumSupport,
-		Active:     true,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	},
 }

frontend/public/Icons/groupBy.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4344_1236)" stroke="#C0C1C3" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M4.667 1.167H2.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V2.333c0-.644-.522-1.166-1.166-1.166zM8.167 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M11.667 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M5.833 10.5H2.917c-.992 0-1.75-.758-1.75-1.75v-.583"/><path d="M4.083 12.25l1.75-1.75-1.75-1.75M11.667 8.167H9.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V9.333c0-.644-.522-1.166-1.166-1.166z"/></g><defs><clipPath id="prefix__clip0_4344_1236"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/public/Icons/solid-x-circle.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_4062_7291)" stroke-width="1.167" stroke-linecap="round" stroke-linejoin="round"><path d="M7 12.833A5.833 5.833 0 107 1.167a5.833 5.833 0 000 11.666z" fill="#E5484D" stroke="#E5484D"/><path d="M8.75 5.25l-3.5 3.5M5.25 5.25l3.5 3.5" stroke="#121317"/></g><defs><clipPath id="prefix__clip0_4062_7291"><path fill="#fff" d="M0 0h14v14H0z"/></clipPath></defs></svg>

frontend/public/locales/en/dashboard.json

@@ -1,7 +1,6 @@
 {
 	"create_dashboard": "Create Dashboard",
 	"import_json": "Import Dashboard JSON",
-	"view_template": "View templates",
 	"import_grafana_json": "Import Grafana JSON",
 	"copy_to_clipboard": "Copy To ClipBoard",
 	"download_json": "Download JSON",

frontend/src/AppRoutes/Private.tsx

@@ -76,8 +76,9 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				isUserFetching: false,
 			},
 		});
+
 		if (!isLoggedIn) {
-			history.push(ROUTES.LOGIN, { from: pathname });
+			history.push(ROUTES.LOGIN);
 		}
 	};
 

frontend/src/AppRoutes/index.tsx

@@ -1,7 +1,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 NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import { FeatureKeys } from 'constants/features';
@@ -49,7 +48,7 @@ function App(): JSX.Element {
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
-	const { trackPageView } = useAnalytics();
+	const { trackPageView, trackEvent } = useAnalytics();
 
 	const { hostname, pathname } = window.location;
 
@@ -66,14 +65,6 @@ function App(): JSX.Element {
 			allFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)?.active ||
 			false;
 
-		const isPremiumSupportEnabled =
-			allFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)?.active ||
-			false;
-
-		const showAddCreditCardModal =
-			!isPremiumSupportEnabled &&
-			!licenseData?.payload?.trialConvertedToSubscription;
-
 		dispatch({
 			type: UPDATE_FEATURE_FLAG_RESPONSE,
 			payload: {
@@ -90,7 +81,7 @@ function App(): JSX.Element {
 			setRoutes(newRoutes);
 		}
 
-		if (isLoggedInState && isChatSupportEnabled && !showAddCreditCardModal) {
+		if (isLoggedInState && isChatSupportEnabled) {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			window.Intercom('boot', {
@@ -208,7 +199,7 @@ function App(): JSX.Element {
 					LOCALSTORAGE.THEME_ANALYTICS_V1,
 				);
 				if (!isThemeAnalyticsSent) {
-					logEvent('Theme Analytics', {
+					trackEvent('Theme Analytics', {
 						theme: isDarkMode ? THEME_MODE.DARK : THEME_MODE.LIGHT,
 						user: pick(user, ['email', 'userId', 'name']),
 						org,

frontend/src/api/ErrorResponseHandler.ts

@@ -9,9 +9,9 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 		// making the error status code as standard Error Status Code
 		const statusCode = response.status as ErrorStatusCode;
 
-		const { data } = response as AxiosResponse;
-
 		if (statusCode >= 400 && statusCode < 500) {
+			const { data } = response as AxiosResponse;
+
 			if (statusCode === 404) {
 				return {
 					statusCode,
@@ -34,11 +34,12 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				body: JSON.stringify((response.data as any).data),
 			};
 		}
+
 		return {
 			statusCode,
 			payload: null,
 			error: 'Something went wrong',
-			message: data?.error,
+			message: null,
 		};
 	}
 	if (request) {

frontend/src/api/common/getQueryStats.ts

@@ -1,49 +0,0 @@
-import getLocalStorageApi from 'api/browser/localstorage/get';
-import { ENVIRONMENT } from 'constants/env';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import { isEmpty } from 'lodash-es';
-
-export interface WsDataEvent {
-	read_rows: number;
-	read_bytes: number;
-	elapsed_ms: number;
-}
-interface GetQueryStatsProps {
-	queryId: string;
-	setData: React.Dispatch<React.SetStateAction<WsDataEvent | undefined>>;
-}
-
-function getURL(baseURL: string, queryId: string): URL | string {
-	if (baseURL && !isEmpty(baseURL)) {
-		return `${baseURL}/ws/query_progress?q=${queryId}`;
-	}
-	const url = new URL(`/ws/query_progress?q=${queryId}`, window.location.href);
-
-	if (window.location.protocol === 'http:') {
-		url.protocol = 'ws';
-	} else {
-		url.protocol = 'wss';
-	}
-
-	return url;
-}
-
-export function getQueryStats(props: GetQueryStatsProps): void {
-	const { queryId, setData } = props;
-
-	const token = getLocalStorageApi(LOCALSTORAGE.AUTH_TOKEN) || '';
-
-	// https://github.com/whatwg/websockets/issues/20 reason for not using the relative URLs
-	const url = getURL(ENVIRONMENT.wsURL, queryId);
-
-	const socket = new WebSocket(url, token);
-
-	socket.addEventListener('message', (event) => {
-		try {
-			const parsedData = JSON.parse(event?.data);
-			setData(parsedData);
-		} catch {
-			setData(event?.data);
-		}
-	});
-}

frontend/src/api/common/logEvent.ts

@@ -1,4 +1,4 @@
-import { ApiBaseInstance as axios } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -21,7 +21,6 @@ const logEvent = async (
 			payload: response.data.data,
 		};
 	} catch (error) {
-		console.error(error);
 		return ErrorResponseHandler(error as AxiosError);
 	}
 };

frontend/src/api/dashboard/variables/dashboardVariablesQuery.ts

@@ -1,8 +1,6 @@
 import { ApiV2Instance as axios } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import getStartEndRangeTime from 'lib/getStartEndRangeTime';
-import store from 'store';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	Props,
@@ -13,26 +11,7 @@ const dashboardVariablesQuery = async (
 	props: Props,
 ): Promise<SuccessResponse<VariableResponseProps> | ErrorResponse> => {
 	try {
-		const { globalTime } = store.getState();
-		const { start, end } = getStartEndRangeTime({
-			type: 'GLOBAL_TIME',
-			interval: globalTime.selectedTime,
-		});
-
-		const timeVariables: Record<string, number> = {
-			start_timestamp_ms: parseInt(start, 10) * 1e3,
-			end_timestamp_ms: parseInt(end, 10) * 1e3,
-			start_timestamp_nano: parseInt(start, 10) * 1e9,
-			end_timestamp_nano: parseInt(end, 10) * 1e9,
-			start_timestamp: parseInt(start, 10),
-			end_timestamp: parseInt(end, 10),
-		};
-
-		const payload = { ...props };
-
-		payload.variables = { ...payload.variables, ...timeVariables };
-
-		const response = await axios.post(`/variables/query`, payload);
+		const response = await axios.post(`/variables/query`, props);
 
 		return {
 			statusCode: 200,

frontend/src/api/index.ts

@@ -96,10 +96,6 @@ const interceptorRejected = async (
 	}
 };
 
-const interceptorRejectedBase = async (
-	value: AxiosResponse<any>,
-): Promise<AxiosResponse<any>> => Promise.reject(value);
-
 const instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,
 });
@@ -144,18 +140,6 @@ ApiV4Instance.interceptors.response.use(
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
 //
 
-// axios Base
-export const ApiBaseInstance = axios.create({
-	baseURL: `${ENVIRONMENT.baseURL}${apiV1}`,
-});
-
-ApiBaseInstance.interceptors.response.use(
-	interceptorsResponse,
-	interceptorRejectedBase,
-);
-ApiBaseInstance.interceptors.request.use(interceptorsRequestResponse);
-//
-
 // gateway Api V1
 export const GatewayApiV1Instance = axios.create({
 	baseURL: `${ENVIRONMENT.baseURL}${gatewayApiV1}`,

frontend/src/api/metrics/getQueryRange.ts

@@ -12,13 +12,10 @@ export const getMetricsQueryRange = async (
 	props: QueryRangePayload,
 	version: string,
 	signal: AbortSignal,
-	headers?: Record<string, string>,
 ): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
 		if (version && version === ENTITY_VERSION_V4) {
-			const response = await ApiV4Instance.post('/query_range', props, {
-				signal,
-			});
+			const response = await ApiV4Instance.post('/query_range', props, { signal });
 
 			return {
 				statusCode: 200,
@@ -29,10 +26,7 @@ export const getMetricsQueryRange = async (
 			};
 		}
 
-		const response = await ApiV3Instance.post('/query_range', props, {
-			signal,
-			headers,
-		});
+		const response = await ApiV3Instance.post('/query_range', props, { signal });
 
 		return {
 			statusCode: 200,

frontend/src/api/metrics/getTopLevelOperations.ts

@@ -1,20 +1,7 @@
 import axios from 'api';
-import { isNil } from 'lodash-es';
 
-interface GetTopLevelOperationsProps {
-	service?: string;
-	start?: number;
-	end?: number;
-}
-
-const getTopLevelOperations = async (
-	props: GetTopLevelOperationsProps,
-): Promise<ServiceDataProps> => {
-	const response = await axios.post(`/service/top_level_operations`, {
-		start: !isNil(props.start) ? `${props.start}` : undefined,
-		end: !isNil(props.end) ? `${props.end}` : undefined,
-		service: props.service,
-	});
+const getTopLevelOperations = async (): Promise<ServiceDataProps> => {
+	const response = await axios.post(`/service/top_level_operations`);
 	return response.data;
 };
 

frontend/src/api/plannedDowntime/createDowntimeSchedule.ts

@@ -1,7 +1,6 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import { Dayjs } from 'dayjs';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
 import { Recurrence } from './getAllDowntimeSchedules';
@@ -12,8 +11,8 @@ export interface DowntimeSchedulePayload {
 	alertIds: string[];
 	schedule: {
 		timezone?: string;
-		startTime?: string | Dayjs;
-		endTime?: string | Dayjs;
+		startTime?: string;
+		endTime?: string;
 		recurrence?: Recurrence;
 	};
 }

frontend/src/api/plannedDowntime/getAllDowntimeSchedules.ts

@@ -1,6 +1,6 @@
 import axios from 'api';
 import { AxiosError, AxiosResponse } from 'axios';
-import { Option } from 'container/PlannedDowntime/PlannedDowntimeutils';
+import { Option } from 'container/PlannedDowntime/DropdownWithSubMenu/DropdownWithSubMenu';
 import { useQuery, UseQueryResult } from 'react-query';
 
 export type Recurrence = {
@@ -28,7 +28,6 @@ export interface DowntimeSchedules {
 	createdBy: string | null;
 	updatedAt: string | null;
 	updatedBy: string | null;
-	kind: string | null;
 }
 export type PayloadProps = { data: DowntimeSchedules[] };
 

frontend/src/api/queryBuilder/getAttributeSuggestions.ts

@@ -1,63 +0,0 @@
-import { ApiV3Instance } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError, AxiosResponse } from 'axios';
-import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
-import { encode } from 'js-base64';
-import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
-import createQueryParams from 'lib/createQueryParams';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	IGetAttributeSuggestionsPayload,
-	IGetAttributeSuggestionsSuccessResponse,
-} from 'types/api/queryBuilder/getAttributeSuggestions';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-export const getAttributeSuggestions = async ({
-	searchText,
-	dataSource,
-	filters,
-}: IGetAttributeSuggestionsPayload): Promise<
-	SuccessResponse<IGetAttributeSuggestionsSuccessResponse> | ErrorResponse
-> => {
-	try {
-		let base64EncodedFiltersString;
-		try {
-			// the replace function is to remove the padding at the end of base64 encoded string which is auto added to make it a multiple of 4
-			// why ? because the current working of qs doesn't work well with padding
-			base64EncodedFiltersString = encode(JSON.stringify(filters)).replace(
-				/=+$/,
-				'',
-			);
-		} catch {
-			// default base64 encoded string for empty filters object
-			base64EncodedFiltersString = 'eyJpdGVtcyI6W10sIm9wIjoiQU5EIn0';
-		}
-		const response: AxiosResponse<{
-			data: IGetAttributeSuggestionsSuccessResponse;
-		}> = await ApiV3Instance.get(
-			`/filter_suggestions?${createQueryParams({
-				searchText,
-				dataSource,
-				existingFilter: base64EncodedFiltersString,
-			})}`,
-		);
-
-		const payload: BaseAutocompleteData[] =
-			response.data.data.attributes?.map(({ id: _, ...item }) => ({
-				...item,
-				id: createIdFromObjectFields(item, baseAutoCompleteIdKeysOrder),
-			})) || [];
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.statusText,
-			payload: {
-				attributes: payload,
-				example_queries: response.data.data.example_queries,
-			},
-		};
-	} catch (e) {
-		return ErrorResponseHandler(e as AxiosError);
-	}
-};

frontend/src/assets/CustomIcons/GroupByIcon.tsx

@@ -1,27 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-function GroupByIcon(): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	return (
-		<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<g
-				clipPath="url(#prefix__clip0_4344_1236)"
-				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
-				strokeWidth="1.167"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			>
-				<path d="M4.667 1.167H2.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V2.333c0-.644-.522-1.166-1.166-1.166zM8.167 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M11.667 1.167a1.17 1.17 0 011.166 1.166v2.334a1.17 1.17 0 01-1.166 1.166M5.833 10.5H2.917c-.992 0-1.75-.758-1.75-1.75v-.583" />
-				<path d="M4.083 12.25l1.75-1.75-1.75-1.75M11.667 8.167H9.333c-.644 0-1.166.522-1.166 1.166v2.334c0 .644.522 1.166 1.166 1.166h2.334c.644 0 1.166-.522 1.166-1.166V9.333c0-.644-.522-1.166-1.166-1.166z" />
-			</g>
-			<defs>
-				<clipPath id="prefix__clip0_4344_1236">
-					<path fill="#fff" d="M0 0h14v14H0z" />
-				</clipPath>
-			</defs>
-		</svg>
-	);
-}
-
-export default GroupByIcon;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,137 +0,0 @@
-import { Button, Modal, Typography } from 'antd';
-import updateCreditCardApi from 'api/billing/checkout';
-import logEvent from 'api/common/logEvent';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import useLicense from 'hooks/useLicense';
-import { useNotifications } from 'hooks/useNotifications';
-import { CreditCard, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
-import { License } from 'types/api/licenses/def';
-
-export default function ChatSupportGateway(): JSX.Element {
-	const { notifications } = useNotifications();
-	const [activeLicense, setActiveLicense] = useState<License | null>(null);
-
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
-		false,
-	);
-
-	const { data: licenseData, isFetching } = useLicense();
-
-	useEffect(() => {
-		const activeValidLicense =
-			licenseData?.payload?.licenses?.find(
-				(license) => license.isCurrent === true,
-			) || null;
-
-		setActiveLicense(activeValidLicense);
-	}, [licenseData, isFetching]);
-
-	const handleBillingOnSuccess = (
-		data: ErrorResponse | SuccessResponse<CheckoutSuccessPayloadProps, unknown>,
-	): void => {
-		if (data?.payload?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.payload.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (): void => {
-		notifications.error({
-			message: SOMETHING_WENT_WRONG,
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-	const { pathname } = useLocation();
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `intercom icon`,
-			page: pathname,
-		});
-
-		updateCreditCard({
-			licenseKey: activeLicense?.key || '',
-			successURL: window.location.href,
-			cancelURL: window.location.href,
-		});
-	};
-
-	return (
-		<>
-			<div className="chat-support-gateway">
-				<Button
-					className="chat-support-gateway-btn"
-					onClick={(): void => {
-						logEvent('Disabled Chat Support: Clicked', {
-							source: `intercom icon`,
-							page: pathname,
-						});
-
-						setIsAddCreditCardModalOpen(true);
-					}}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 28 32"
-						className="chat-support-gateway-btn-icon"
-					>
-						<path d="M28 32s-4.714-1.855-8.527-3.34H3.437C1.54 28.66 0 27.026 0 25.013V3.644C0 1.633 1.54 0 3.437 0h21.125c1.898 0 3.437 1.632 3.437 3.645v18.404H28V32zm-4.139-11.982a.88.88 0 00-1.292-.105c-.03.026-3.015 2.681-8.57 2.681-5.486 0-8.517-2.636-8.571-2.684a.88.88 0 00-1.29.107 1.01 1.01 0 00-.219.708.992.992 0 00.318.664c.142.128 3.537 3.15 9.762 3.15 6.226 0 9.621-3.022 9.763-3.15a.992.992 0 00.317-.664 1.01 1.01 0 00-.218-.707z" />
-					</svg>
-				</Button>
-			</div>
-
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
-				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<Button
-						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
-		</>
-	);
-}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,191 +0,0 @@
-import './LaunchChatSupport.styles.scss';
-
-import { Button, Modal, Tooltip, Typography } from 'antd';
-import updateCreditCardApi from 'api/billing/checkout';
-import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { FeatureKeys } from 'constants/features';
-import useFeatureFlags from 'hooks/useFeatureFlag';
-import useLicense from 'hooks/useLicense';
-import { useNotifications } from 'hooks/useNotifications';
-import { defaultTo } from 'lodash-es';
-import { CreditCard, HelpCircle, X } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import { useMutation } from 'react-query';
-import { useLocation } from 'react-router-dom';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
-import { License } from 'types/api/licenses/def';
-import { isCloudUser } from 'utils/app';
-
-export interface LaunchChatSupportProps {
-	eventName: string;
-	attributes: Record<string, unknown>;
-	message?: string;
-	buttonText?: string;
-	className?: string;
-	onHoverText?: string;
-	intercomMessageDisabled?: boolean;
-}
-
-// eslint-disable-next-line sonarjs/cognitive-complexity
-function LaunchChatSupport({
-	attributes,
-	eventName,
-	message = '',
-	buttonText = '',
-	className = '',
-	onHoverText = '',
-	intercomMessageDisabled = false,
-}: LaunchChatSupportProps): JSX.Element | null {
-	const isChatSupportEnabled = useFeatureFlags(FeatureKeys.CHAT_SUPPORT)?.active;
-	const isCloudUserVal = isCloudUser();
-	const { notifications } = useNotifications();
-	const { data: licenseData, isFetching } = useLicense();
-	const [activeLicense, setActiveLicense] = useState<License | null>(null);
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] = useState(
-		false,
-	);
-
-	const { pathname } = useLocation();
-	const isPremiumChatSupportEnabled =
-		useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false;
-
-	const showAddCreditCardModal =
-		!isPremiumChatSupportEnabled &&
-		!licenseData?.payload?.trialConvertedToSubscription;
-
-	useEffect(() => {
-		const activeValidLicense =
-			licenseData?.payload?.licenses?.find(
-				(license) => license.isCurrent === true,
-			) || null;
-
-		setActiveLicense(activeValidLicense);
-	}, [licenseData, isFetching]);
-
-	const handleFacingIssuesClick = (): void => {
-		if (showAddCreditCardModal) {
-			logEvent('Disabled Chat Support: Clicked', {
-				source: `facing issues button`,
-				page: pathname,
-				...attributes,
-			});
-			setIsAddCreditCardModalOpen(true);
-		} else {
-			logEvent(eventName, attributes);
-			if (window.Intercom && !intercomMessageDisabled) {
-				window.Intercom('showNewMessage', defaultTo(message, ''));
-			}
-		}
-	};
-
-	const handleBillingOnSuccess = (
-		data: ErrorResponse | SuccessResponse<CheckoutSuccessPayloadProps, unknown>,
-	): void => {
-		if (data?.payload?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.payload.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (): void => {
-		notifications.error({
-			message: SOMETHING_WENT_WRONG,
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		updateCreditCardApi,
-		{
-			onSuccess: (data) => {
-				handleBillingOnSuccess(data);
-			},
-			onError: handleBillingOnError,
-		},
-	);
-
-	const handleAddCreditCard = (): void => {
-		logEvent('Add Credit card modal: Clicked', {
-			source: `facing issues button`,
-			page: pathname,
-			...attributes,
-		});
-
-		updateCreditCard({
-			licenseKey: activeLicense?.key || '',
-			successURL: window.location.href,
-			cancelURL: window.location.href,
-		});
-	};
-
-	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
-		<div className="facing-issue-button">
-			<Tooltip
-				title={onHoverText}
-				autoAdjustOverflow
-				style={{ padding: 8 }}
-				overlayClassName="tooltip-overlay"
-			>
-				<Button
-					className={cx('periscope-btn', 'facing-issue-button', className)}
-					onClick={handleFacingIssuesClick}
-					icon={<HelpCircle size={14} />}
-				>
-					{buttonText || 'Facing issues?'}
-				</Button>
-			</Tooltip>
-
-			{/* Add Credit Card Modal */}
-			<Modal
-				className="add-credit-card-modal"
-				title={<span className="title">Add Credit Card for Chat Support</span>}
-				open={isAddCreditCardModalOpen}
-				closable
-				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
-				destroyOnClose
-				footer={[
-					<Button
-						key="cancel"
-						onClick={(): void => setIsAddCreditCardModalOpen(false)}
-						className="cancel-btn"
-						icon={<X size={16} />}
-					>
-						Cancel
-					</Button>,
-					<Button
-						key="submit"
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>,
-				]}
-			>
-				<Typography.Text className="add-credit-card-text">
-					You&apos;re currently on <span className="highlight-text">Trial plan</span>
-					. Add a credit card to access SigNoz chat support to your workspace.
-				</Typography.Text>
-			</Modal>
-		</div>
-	) : null;
-}
-
-LaunchChatSupport.defaultProps = {
-	message: '',
-	buttonText: '',
-	className: '',
-	onHoverText: '',
-	intercomMessageDisabled: false,
-};
-
-export default LaunchChatSupport;

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

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

frontend/src/components/LogDetail/index.tsx

@@ -6,13 +6,10 @@ import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
-import { useOptionsMenu } from 'container/OptionsMenu';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 import {
@@ -24,10 +21,9 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import { VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailProps } from './LogDetail.interfaces';
@@ -37,11 +33,9 @@ function LogDetail({
 	log,
 	onClose,
 	onAddToQuery,
-	onGroupByAttribute,
 	onClickActionItem,
 	selectedTab,
 	isListViewPanel = false,
-	listViewPanelSelectedFields,
 }: LogDetailProps): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
@@ -51,19 +45,6 @@ function LogDetail({
 	const [contextQuery, setContextQuery] = useState<Query | undefined>();
 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
-	const { initialDataSource, stagedQuery } = useQueryBuilder();
-
-	const listQuery = useMemo(() => {
-		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) return null;
-
-		return stagedQuery.builder.queryData.find((item) => !item.disabled) || null;
-	}, [stagedQuery]);
-
-	const { options } = useOptionsMenu({
-		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
-		dataSource: initialDataSource || DataSource.LOGS,
-		aggregateOperator: listQuery?.aggregateOperator || StringOperators.NOOP,
-	});
 
 	const isDarkMode = useIsDarkMode();
 
@@ -210,10 +191,7 @@ function LogDetail({
 					logData={log}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onClickActionItem}
-					onGroupByAttribute={onGroupByAttribute}
 					isListViewPanel={isListViewPanel}
-					selectedOptions={options}
-					listViewPanelSelectedFields={listViewPanelSelectedFields}
 				/>
 			)}
 			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}

frontend/src/components/Logs/AddToQueryHOC.styles.scss

@@ -1,16 +1,3 @@
 .addToQueryContainer {
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-	&.small {
-		height: 16px;
-	}
-
-	&.medium {
-		height: 20px;
-	}
-
-	&.large {
-		height: 24px;
-	}
 }

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,16 +1,13 @@
 import './AddToQueryHOC.styles.scss';
 
 import { Popover } from 'antd';
-import cx from 'classnames';
 import { OPERATORS } from 'constants/queryBuilder';
-import { FontSize } from 'container/OptionsMenu/types';
 import { memo, MouseEvent, ReactNode, useMemo } from 'react';
 
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,
 	onAddToQuery,
-	fontSize,
 	children,
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
@@ -24,7 +21,7 @@ function AddToQueryHOC({
 
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-		<div className={cx('addToQueryContainer', fontSize)} onClick={handleQueryAdd}>
+		<div className="addToQueryContainer" onClick={handleQueryAdd}>
 			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
@@ -36,7 +33,6 @@ export interface AddToQueryHOCProps {
 	fieldKey: string;
 	fieldValue: string;
 	onAddToQuery: (fieldKey: string, fieldValue: string, operator: string) => void;
-	fontSize: FontSize;
 	children: ReactNode;
 }
 

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -6,21 +6,6 @@
 	font-weight: 400;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
-
-	&.small {
-		font-size: 11px;
-		line-height: 16px;
-	}
-
-	&.medium {
-		font-size: 13px;
-		line-height: 20px;
-	}
-
-	&.large {
-		font-size: 14px;
-		line-height: 24px;
-	}
 }
 .log-value {
 	color: var(--text-vanilla-400, #c0c1c3);
@@ -29,21 +14,6 @@
 	font-weight: 400;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
-
-	&.small {
-		font-size: 11px;
-		line-height: 16px;
-	}
-
-	&.medium {
-		font-size: 13px;
-		line-height: 20px;
-	}
-
-	&.large {
-		font-size: 14px;
-		line-height: 24px;
-	}
 }
 .log-line {
 	display: flex;
@@ -70,20 +40,6 @@
 		font-weight: 400;
 		line-height: 18px; /* 128.571% */
 		letter-spacing: -0.07px;
-		&.small {
-			font-size: 11px;
-			line-height: 16px;
-		}
-
-		&.medium {
-			font-size: 13px;
-			line-height: 20px;
-		}
-
-		&.large {
-			font-size: 14px;
-			line-height: 24px;
-		}
 	}
 
 	.selected-log-value {
@@ -96,37 +52,12 @@
 		line-height: 18px;
 		letter-spacing: -0.07px;
 		font-size: 14px;
-		&.small {
-			font-size: 11px;
-			line-height: 16px;
-		}
-
-		&.medium {
-			font-size: 13px;
-			line-height: 20px;
-		}
-
-		&.large {
-			font-size: 14px;
-			line-height: 24px;
-		}
 	}
 
 	.selected-log-kv {
 		min-height: 24px;
 		display: flex;
 		align-items: center;
-		&.small {
-			min-height: 16px;
-		}
-
-		&.medium {
-			min-height: 20px;
-		}
-
-		&.large {
-			min-height: 24px;
-		}
 	}
 }
 

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

@@ -3,10 +3,8 @@ import './ListLogView.styles.scss';
 import { blue } from '@ant-design/colors';
 import Convert from 'ansi-to-html';
 import { Typography } from 'antd';
-import cx from 'classnames';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
-import { FontSize } from 'container/OptionsMenu/types';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
@@ -41,7 +39,6 @@ interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
 	linesPerRow?: number;
-	fontSize: FontSize;
 }
 
 type LogSelectedFieldProps = Omit<LogFieldProps, 'linesPerRow'> &
@@ -51,7 +48,6 @@ function LogGeneralField({
 	fieldKey,
 	fieldValue,
 	linesPerRow = 1,
-	fontSize,
 }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
@@ -66,12 +62,12 @@ function LogGeneralField({
 
 	return (
 		<TextContainer>
-			<Text ellipsis type="secondary" className={cx('log-field-key', fontSize)}>
+			<Text ellipsis type="secondary" className="log-field-key">
 				{`${fieldKey} : `}
 			</Text>
 			<LogText
 				dangerouslySetInnerHTML={html}
-				className={cx('log-value', fontSize)}
+				className="log-value"
 				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
 			/>
 		</TextContainer>
@@ -82,7 +78,6 @@ function LogSelectedField({
 	fieldKey = '',
 	fieldValue = '',
 	onAddToQuery,
-	fontSize,
 }: LogSelectedFieldProps): JSX.Element {
 	return (
 		<div className="log-selected-fields">
@@ -90,22 +85,16 @@ function LogSelectedField({
 				fieldKey={fieldKey}
 				fieldValue={fieldValue}
 				onAddToQuery={onAddToQuery}
-				fontSize={fontSize}
 			>
 				<Typography.Text>
-					<span
-						style={{ color: blue[4] }}
-						className={cx('selected-log-field-key', fontSize)}
-					>
+					<span style={{ color: blue[4] }} className="selected-log-field-key">
 						{fieldKey}
 					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text ellipsis className={cx('selected-log-kv', fontSize)}>
-				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
-				<span className={cx('selected-log-value', fontSize)}>
-					{fieldValue || "''"}
-				</span>
+			<Typography.Text ellipsis className="selected-log-kv">
+				<span className="selected-log-field-key">{': '}</span>
+				<span className="selected-log-value">{fieldValue || "''"}</span>
 			</Typography.Text>
 		</div>
 	);
@@ -118,7 +107,6 @@ type ListLogViewProps = {
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
-	fontSize: FontSize;
 };
 
 function ListLogView({
@@ -128,7 +116,6 @@ function ListLogView({
 	onAddToQuery,
 	activeLog,
 	linesPerRow,
-	fontSize,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -141,7 +128,6 @@ function ListLogView({
 		onAddToQuery: handleAddToQuery,
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
-		onGroupByAttribute,
 	} = useActiveLog();
 
 	const isDarkMode = useIsDarkMode();
@@ -199,7 +185,6 @@ function ListLogView({
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}
 				onClick={handleDetailedView}
-				fontSize={fontSize}
 			>
 				<div className="log-line">
 					<LogStateIndicator
@@ -207,28 +192,18 @@ function ListLogView({
 						isActive={
 							activeLog?.id === logData.id || activeContextLog?.id === logData.id
 						}
-						fontSize={fontSize}
 					/>
 					<div>
-						<LogContainer fontSize={fontSize}>
+						<LogContainer>
 							<LogGeneralField
 								fieldKey="Log"
 								fieldValue={flattenLogData.body}
 								linesPerRow={linesPerRow}
-								fontSize={fontSize}
 							/>
 							{flattenLogData.stream && (
-								<LogGeneralField
-									fieldKey="Stream"
-									fieldValue={flattenLogData.stream}
-									fontSize={fontSize}
-								/>
+								<LogGeneralField fieldKey="Stream" fieldValue={flattenLogData.stream} />
 							)}
-							<LogGeneralField
-								fieldKey="Timestamp"
-								fieldValue={timestampValue}
-								fontSize={fontSize}
-							/>
+							<LogGeneralField fieldKey="Timestamp" fieldValue={timestampValue} />
 
 							{updatedSelecedFields.map((field) =>
 								isValidLogField(flattenLogData[field.name] as never) ? (
@@ -237,7 +212,6 @@ function ListLogView({
 										fieldKey={field.name}
 										fieldValue={flattenLogData[field.name] as never}
 										onAddToQuery={onAddToQuery}
-										fontSize={fontSize}
 									/>
 								) : null,
 							)}
@@ -258,7 +232,6 @@ function ListLogView({
 					onAddToQuery={handleAddToQuery}
 					selectedTab={VIEW_TYPES.CONTEXT}
 					onClose={handlerClearActiveContextLog}
-					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</>

frontend/src/components/Logs/ListLogView/styles.ts

@@ -1,46 +1,21 @@
-/* eslint-disable no-nested-ternary */
 import { Color } from '@signozhq/design-tokens';
 import { Card, Typography } from 'antd';
-import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 
 interface LogTextProps {
 	linesPerRow?: number;
 }
 
-interface LogContainerProps {
-	fontSize: FontSize;
-}
-
 export const Container = styled(Card)<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
-	fontSize: FontSize;
 }>`
 	width: 100% !important;
 	margin-bottom: 0.3rem;
-
-	${({ fontSize }): string =>
-		fontSize === FontSize.SMALL
-			? `margin-bottom:0.1rem;`
-			: fontSize === FontSize.MEDIUM
-			? `margin-bottom: 0.2rem;`
-			: fontSize === FontSize.LARGE
-			? `margin-bottom:0.3rem;`
-			: ``}
 	cursor: pointer;
 	.ant-card-body {
 		padding: 0.3rem 0.6rem;
 
-		${({ fontSize }): string =>
-			fontSize === FontSize.SMALL
-				? `padding:0.1rem 0.6rem;`
-				: fontSize === FontSize.MEDIUM
-				? `padding: 0.2rem 0.6rem;`
-				: fontSize === FontSize.LARGE
-				? `padding:0.3rem 0.6rem;`
-				: ``}
-
 		${({ $isActiveLog, $isDarkMode }): string =>
 			$isActiveLog
 				? `background-color: ${
@@ -63,17 +38,11 @@ export const TextContainer = styled.div`
 	width: 100%;
 `;
 
-export const LogContainer = styled.div<LogContainerProps>`
+export const LogContainer = styled.div`
 	margin-left: 0.5rem;
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
-	${({ fontSize }): string =>
-		fontSize === FontSize.SMALL
-			? `gap: 2px;`
-			: fontSize === FontSize.MEDIUM
-			? ` gap:4px;`
-			: `gap:6px;`}
 `;
 
 export const LogText = styled.div<LogTextProps>`

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -9,24 +9,11 @@
 		border-radius: 50px;
 		background-color: transparent;
 
-		&.small {
-			min-height: 16px;
-		}
-
-		&.medium {
-			min-height: 20px;
-		}
-
-		&.large {
-			min-height: 24px;
-		}
-
 		&.INFO {
 			background-color: var(--bg-slate-400);
 		}
 
-		&.WARNING,
-		&.WARN {
+		&.WARNING, &.WARN {
 			background-color: var(--bg-amber-500);
 		}
 

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx

@@ -1,13 +1,10 @@
 import { render } from '@testing-library/react';
-import { FontSize } from 'container/OptionsMenu/types';
 
 import LogStateIndicator from './LogStateIndicator';
 
 describe('LogStateIndicator', () => {
 	it('renders correctly with default props', () => {
-		const { container } = render(
-			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
-		);
+		const { container } = render(<LogStateIndicator type="INFO" />);
 		const indicator = container.firstChild as HTMLElement;
 		expect(indicator.classList.contains('log-state-indicator')).toBe(true);
 		expect(indicator.classList.contains('isActive')).toBe(false);
@@ -18,30 +15,28 @@ describe('LogStateIndicator', () => {
 	});
 
 	it('renders correctly when isActive is true', () => {
-		const { container } = render(
-			<LogStateIndicator type="INFO" isActive fontSize={FontSize.MEDIUM} />,
-		);
+		const { container } = render(<LogStateIndicator type="INFO" isActive />);
 		const indicator = container.firstChild as HTMLElement;
 		expect(indicator.classList.contains('isActive')).toBe(true);
 	});
 
 	it('renders correctly with different types', () => {
 		const { container: containerInfo } = render(
-			<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="INFO" />,
 		);
 		expect(containerInfo.querySelector('.line')?.classList.contains('INFO')).toBe(
 			true,
 		);
 
 		const { container: containerWarning } = render(
-			<LogStateIndicator type="WARNING" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="WARNING" />,
 		);
 		expect(
 			containerWarning.querySelector('.line')?.classList.contains('WARNING'),
 		).toBe(true);
 
 		const { container: containerError } = render(
-			<LogStateIndicator type="ERROR" fontSize={FontSize.MEDIUM} />,
+			<LogStateIndicator type="ERROR" />,
 		);
 		expect(
 			containerError.querySelector('.line')?.classList.contains('ERROR'),

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -1,7 +1,6 @@
 import './LogStateIndicator.styles.scss';
 
 import cx from 'classnames';
-import { FontSize } from 'container/OptionsMenu/types';
 
 export const SEVERITY_TEXT_TYPE = {
 	TRACE: 'TRACE',
@@ -29,31 +28,24 @@ export const SEVERITY_TEXT_TYPE = {
 	FATAL2: 'FATAL2',
 	FATAL3: 'FATAL3',
 	FATAL4: 'FATAL4',
-	UNKNOWN: 'UNKNOWN',
 } as const;
 
 export const LogType = {
-	TRACE: 'TRACE',
-	DEBUG: 'DEBUG',
 	INFO: 'INFO',
-	WARN: 'WARN',
+	WARNING: 'WARNING',
 	ERROR: 'ERROR',
-	FATAL: 'FATAL',
-	UNKNOWN: 'UNKNOWN',
 } as const;
 
 function LogStateIndicator({
 	type,
 	isActive,
-	fontSize,
 }: {
 	type: string;
-	fontSize: FontSize;
 	isActive?: boolean;
 }): JSX.Element {
 	return (
 		<div className={cx('log-state-indicator', isActive ? 'isActive' : '')}>
-			<div className={cx('line', type, fontSize)}> </div>
+			<div className={cx('line', type)}> </div>
 		</div>
 	);
 }

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

@@ -1,10 +1,9 @@
-/* eslint-disable sonarjs/no-duplicate-string */
 import { ILog } from 'types/api/logs/log';
 
 import { getLogIndicatorType, getLogIndicatorTypeForTable } from './utils';
 
 describe('getLogIndicatorType', () => {
-	it('severity_number should be given priority over severity_text', () => {
+	it('should return severity type for valid log with severityText', () => {
 		const log = {
 			date: '2024-02-29T12:34:46Z',
 			timestamp: 1646115296,
@@ -21,57 +20,11 @@ describe('getLogIndicatorType', () => {
 			attributesInt: {},
 			attributesFloat: {},
 			severity_text: 'INFO',
-			severity_number: 2,
 		};
-		// severity_number should get priority over severity_text
-		expect(getLogIndicatorType(log)).toBe('TRACE');
+		expect(getLogIndicatorType(log)).toBe('INFO');
 	});
 
-	it('severity_text should be used when severity_number is absent ', () => {
-		const log = {
-			date: '2024-02-29T12:34:46Z',
-			timestamp: 1646115296,
-			id: '123456',
-			traceId: '987654',
-			spanId: '54321',
-			traceFlags: 0,
-			severityText: 'INFO',
-			severityNumber: 2,
-			body: 'Sample log Message',
-			resources_string: {},
-			attributesString: {},
-			attributes_string: {},
-			attributesInt: {},
-			attributesFloat: {},
-			severity_text: 'FATAL',
-			severity_number: 0,
-		};
-		expect(getLogIndicatorType(log)).toBe('FATAL');
-	});
-
-	it('case insensitive severity_text should be valid', () => {
-		const log = {
-			date: '2024-02-29T12:34:46Z',
-			timestamp: 1646115296,
-			id: '123456',
-			traceId: '987654',
-			spanId: '54321',
-			traceFlags: 0,
-			severityText: 'INFO',
-			severityNumber: 2,
-			body: 'Sample log Message',
-			resources_string: {},
-			attributesString: {},
-			attributes_string: {},
-			attributesInt: {},
-			attributesFloat: {},
-			severity_text: 'fatAl',
-			severity_number: 0,
-		};
-		expect(getLogIndicatorType(log)).toBe('FATAL');
-	});
-
-	it('should return log level if severityText and severityNumber is missing', () => {
+	it('should return log level if severityText is missing', () => {
 		const log: ILog = {
 			date: '2024-02-29T12:34:58Z',
 			timestamp: 1646115296,
@@ -83,16 +36,13 @@ describe('getLogIndicatorType', () => {
 			body: 'Sample log',
 			resources_string: {},
 			attributesString: {},
-			attributes_string: {
-				log_level: 'INFO' as never,
-			},
+			attributes_string: {},
 			attributesInt: {},
 			attributesFloat: {},
-			severity_text: 'some_random',
+			severity_text: 'FATAL',
 			severityText: '',
-			severity_number: 0,
 		};
-		expect(getLogIndicatorType(log)).toBe('INFO');
+		expect(getLogIndicatorType(log)).toBe('FATAL');
 	});
 });
 
@@ -105,7 +55,6 @@ describe('getLogIndicatorTypeForTable', () => {
 			traceId: '987654',
 			spanId: '54321',
 			traceFlags: 0,
-			severityNumber: 2,
 			severity_number: 2,
 			body: 'Sample log message',
 			resources_string: {},
@@ -115,7 +64,7 @@ describe('getLogIndicatorTypeForTable', () => {
 			attributesFloat: {},
 			severity_text: 'WARN',
 		};
-		expect(getLogIndicatorTypeForTable(log)).toBe('TRACE');
+		expect(getLogIndicatorTypeForTable(log)).toBe('WARN');
 	});
 
 	it('should return log level if severityText is missing', () => {
@@ -126,8 +75,7 @@ describe('getLogIndicatorTypeForTable', () => {
 			traceId: '987654',
 			spanId: '54321',
 			traceFlags: 0,
-			severityNumber: 0,
-			severity_number: 0,
+			severityNumber: 2,
 			body: 'Sample log message',
 			resources_string: {},
 			attributesString: {},
@@ -139,47 +87,3 @@ describe('getLogIndicatorTypeForTable', () => {
 		expect(getLogIndicatorTypeForTable(log)).toBe('INFO');
 	});
 });
-
-describe('logIndicatorBySeverityNumber', () => {
-	// https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
-	const logLevelExpectations = [
-		{ minSevNumber: 1, maxSevNumber: 4, expectedIndicatorType: 'TRACE' },
-		{ minSevNumber: 5, maxSevNumber: 8, expectedIndicatorType: 'DEBUG' },
-		{ minSevNumber: 9, maxSevNumber: 12, expectedIndicatorType: 'INFO' },
-		{ minSevNumber: 13, maxSevNumber: 16, expectedIndicatorType: 'WARN' },
-		{ minSevNumber: 17, maxSevNumber: 20, expectedIndicatorType: 'ERROR' },
-		{ minSevNumber: 21, maxSevNumber: 24, expectedIndicatorType: 'FATAL' },
-	];
-	logLevelExpectations.forEach((e) => {
-		for (let sevNum = e.minSevNumber; sevNum <= e.maxSevNumber; sevNum++) {
-			const sevText = (Math.random() + 1).toString(36).substring(2);
-
-			const log = {
-				date: '2024-02-29T12:34:46Z',
-				timestamp: 1646115296,
-				id: '123456',
-				traceId: '987654',
-				spanId: '54321',
-				traceFlags: 0,
-				severityText: sevText,
-				severityNumber: sevNum,
-				body: 'Sample log Message',
-				resources_string: {},
-				attributesString: {},
-				attributes_string: {},
-				attributesInt: {},
-				attributesFloat: {},
-				severity_text: sevText,
-				severity_number: sevNum,
-			};
-
-			it(`getLogIndicatorType should return ${e.expectedIndicatorType} for severity_text: ${sevText} and severity_number: ${sevNum}`, () => {
-				expect(getLogIndicatorType(log)).toBe(e.expectedIndicatorType);
-			});
-
-			it(`getLogIndicatorTypeForTable should return ${e.expectedIndicatorType} for severity_text: ${sevText} and severity_number: ${sevNum}`, () => {
-				expect(getLogIndicatorTypeForTable(log)).toBe(e.expectedIndicatorType);
-			});
-		}
-	});
-});

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

@@ -2,112 +2,56 @@ import { ILog } from 'types/api/logs/log';
 
 import { LogType, SEVERITY_TEXT_TYPE } from './LogStateIndicator';
 
-const getLogTypeBySeverityText = (severityText: string): string => {
+const getSeverityType = (severityText: string): string => {
 	switch (severityText) {
 		case SEVERITY_TEXT_TYPE.TRACE:
 		case SEVERITY_TEXT_TYPE.TRACE2:
 		case SEVERITY_TEXT_TYPE.TRACE3:
 		case SEVERITY_TEXT_TYPE.TRACE4:
-			return LogType.TRACE;
+			return SEVERITY_TEXT_TYPE.TRACE;
 		case SEVERITY_TEXT_TYPE.DEBUG:
 		case SEVERITY_TEXT_TYPE.DEBUG2:
 		case SEVERITY_TEXT_TYPE.DEBUG3:
 		case SEVERITY_TEXT_TYPE.DEBUG4:
-			return LogType.DEBUG;
+			return SEVERITY_TEXT_TYPE.DEBUG;
 		case SEVERITY_TEXT_TYPE.INFO:
 		case SEVERITY_TEXT_TYPE.INFO2:
 		case SEVERITY_TEXT_TYPE.INFO3:
 		case SEVERITY_TEXT_TYPE.INFO4:
-			return LogType.INFO;
+			return SEVERITY_TEXT_TYPE.INFO;
 		case SEVERITY_TEXT_TYPE.WARN:
 		case SEVERITY_TEXT_TYPE.WARN2:
 		case SEVERITY_TEXT_TYPE.WARN3:
 		case SEVERITY_TEXT_TYPE.WARN4:
 		case SEVERITY_TEXT_TYPE.WARNING:
-			return LogType.WARN;
+			return SEVERITY_TEXT_TYPE.WARN;
 		case SEVERITY_TEXT_TYPE.ERROR:
 		case SEVERITY_TEXT_TYPE.ERROR2:
 		case SEVERITY_TEXT_TYPE.ERROR3:
 		case SEVERITY_TEXT_TYPE.ERROR4:
-			return LogType.ERROR;
+			return SEVERITY_TEXT_TYPE.ERROR;
 		case SEVERITY_TEXT_TYPE.FATAL:
 		case SEVERITY_TEXT_TYPE.FATAL2:
 		case SEVERITY_TEXT_TYPE.FATAL3:
 		case SEVERITY_TEXT_TYPE.FATAL4:
-			return LogType.FATAL;
+			return SEVERITY_TEXT_TYPE.FATAL;
 		default:
-			return LogType.UNKNOWN;
+			return SEVERITY_TEXT_TYPE.INFO;
 	}
 };
 
-// https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
-const getLogTypeBySeverityNumber = (severityNumber: number): string => {
-	if (severityNumber < 1) {
-		return LogType.UNKNOWN;
-	}
-	if (severityNumber < 5) {
-		return LogType.TRACE;
-	}
-	if (severityNumber < 9) {
-		return LogType.DEBUG;
-	}
-	if (severityNumber < 13) {
-		return LogType.INFO;
-	}
-	if (severityNumber < 17) {
-		return LogType.WARN;
-	}
-	if (severityNumber < 21) {
-		return LogType.ERROR;
-	}
-	if (severityNumber < 25) {
-		return LogType.FATAL;
-	}
-	return LogType.UNKNOWN;
-};
-
-const getLogType = (
-	severityText: string,
-	severityNumber: number,
-	defaultType: string,
-): string => {
-	// give priority to the severityNumber
-	if (severityNumber) {
-		const logType = getLogTypeBySeverityNumber(severityNumber);
-		if (logType !== LogType.UNKNOWN) {
-			return logType;
-		}
-	}
-
-	// is severityNumber is not present then rely on the severityText
-	if (severityText) {
-		const logType = getLogTypeBySeverityText(severityText);
-		if (logType !== LogType.UNKNOWN) {
-			return logType;
-		}
-	}
-
-	return defaultType;
-};
-
 export const getLogIndicatorType = (logData: ILog): string => {
-	const defaultType = logData.attributes_string?.log_level || LogType.INFO;
-	// convert the severity_text to upper case for the comparison to support case insensitive values
-	return getLogType(
-		logData?.severity_text?.toUpperCase(),
-		logData?.severity_number || 0,
-		defaultType,
-	);
+	if (logData.severity_text) {
+		return getSeverityType(logData.severity_text);
+	}
+	return logData.attributes_string?.log_level || LogType.INFO;
 };
 
 export const getLogIndicatorTypeForTable = (
 	log: Record<string, unknown>,
 ): string => {
-	const defaultType = (log.log_level as string) || LogType.INFO;
-	// convert the severity_text to upper case for the comparison to support case insensitive values
-	return getLogType(
-		(log?.severity_text as string)?.toUpperCase(),
-		(log?.severity_number as number) || 0,
-		defaultType,
-	);
+	if (log.severity_text) {
+		return getSeverityType(log.severity_text as string);
+	}
+	return (log.log_level as string) || LogType.INFO;
 };

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

@@ -39,7 +39,6 @@ function RawLogView({
 	linesPerRow,
 	isTextOverflowEllipsisDisabled,
 	selectedFields = [],
-	fontSize,
 }: RawLogViewProps): JSX.Element {
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
@@ -55,7 +54,6 @@ function RawLogView({
 		onSetActiveLog,
 		onClearActiveLog,
 		onAddToQuery,
-		onGroupByAttribute,
 	} = useActiveLog();
 
 	const [hasActionButtons, setHasActionButtons] = useState<boolean>(false);
@@ -162,7 +160,6 @@ function RawLogView({
 			$isActiveLog={isActiveLog}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
-			fontSize={fontSize}
 		>
 			<LogStateIndicator
 				type={logType}
@@ -171,7 +168,6 @@ function RawLogView({
 					activeContextLog?.id === data.id ||
 					isActiveLog
 				}
-				fontSize={fontSize}
 			/>
 
 			<RawLogContent
@@ -180,7 +176,6 @@ function RawLogView({
 				$isDarkMode={isDarkMode}
 				$isTextOverflowEllipsisDisabled={isTextOverflowEllipsisDisabled}
 				linesPerRow={linesPerRow}
-				fontSize={fontSize}
 				dangerouslySetInnerHTML={html}
 			/>
 
@@ -204,7 +199,6 @@ function RawLogView({
 					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
-					onGroupByAttribute={onGroupByAttribute}
 				/>
 			)}
 		</RawLogViewContainer>

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

@@ -1,8 +1,6 @@
-/* eslint-disable no-nested-ternary */
 import { blue } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
-import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
 
@@ -13,7 +11,6 @@ export const RawLogViewContainer = styled(Row)<{
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isHightlightedLog: boolean;
-	fontSize: FontSize;
 }>`
 	position: relative;
 	width: 100%;
@@ -25,13 +22,6 @@ export const RawLogViewContainer = styled(Row)<{
 
 	.log-state-indicator {
 		margin: 4px 0;
-
-		${({ fontSize }): string =>
-			fontSize === FontSize.SMALL
-				? `margin: 1px 0;`
-				: fontSize === FontSize.MEDIUM
-				? `margin: 1px 0;`
-				: `margin: 2px 0;`}
 	}
 
 	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
@@ -60,8 +50,8 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 	margin-bottom: 0;
 	font-family: 'SF Mono', monospace;
 	font-family: 'Geist Mono';
-	letter-spacing: -0.07px;
-	padding: 4px;
+	font-size: 13px;
+	font-weight: 400;
 	text-align: left;
 	color: ${({ $isDarkMode }): string =>
 		$isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400};
@@ -76,15 +66,9 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		line-clamp: ${linesPerRow}; 
 		-webkit-box-orient: vertical;`};
 
-	font-size: 13px;
-	font-weight: 400;
 	line-height: 24px;
-	${({ fontSize }): string =>
-		fontSize === FontSize.SMALL
-			? `font-size:11px; line-height:16px; padding:1px;`
-			: fontSize === FontSize.MEDIUM
-			? `font-size:13px; line-height:20px; padding:1px;`
-			: `font-size:14px; line-height:24px; padding:2px;`}
+	letter-spacing: -0.07px;
+	padding: 4px;
 
 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};

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

@@ -1,4 +1,3 @@
-import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
@@ -8,13 +7,11 @@ export interface RawLogViewProps {
 	isTextOverflowEllipsisDisabled?: boolean;
 	data: ILog;
 	linesPerRow: number;
-	fontSize: FontSize;
 	selectedFields?: IField[];
 }
 
 export interface RawLogContentProps {
 	linesPerRow: number;
-	fontSize: FontSize;
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
 	$isDarkMode?: boolean;

frontend/src/components/Logs/TableView/styles.ts

@@ -1,10 +1,7 @@
-/* eslint-disable no-nested-ternary */
-import { FontSize } from 'container/OptionsMenu/types';
 import styled from 'styled-components';
 
 interface TableBodyContentProps {
 	linesPerRow: number;
-	fontSize: FontSize;
 	isDarkMode?: boolean;
 }
 
@@ -23,10 +20,4 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
 	-webkit-line-clamp: ${(props): number => props.linesPerRow};
 	line-clamp: ${(props): number => props.linesPerRow};
 	-webkit-box-orient: vertical;
-	${({ fontSize }): string =>
-		fontSize === FontSize.SMALL
-			? `font-size:11px; line-height:16px;`
-			: fontSize === FontSize.MEDIUM
-			? `font-size:13px; line-height:20px;`
-			: `font-size:14px; line-height:24px;`}
 `;

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

@@ -1,5 +1,4 @@
 import { ColumnsType, ColumnType } from 'antd/es/table';
-import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
@@ -11,7 +10,6 @@ export type LogsTableViewProps = {
 	logs: ILog[];
 	fields: IField[];
 	linesPerRow: number;
-	fontSize: FontSize;
 	onClickExpand?: (log: ILog) => void;
 };
 

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -5,21 +5,6 @@
 	font-weight: 400;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
-
-	&.small {
-		font-size: 11px;
-		line-height: 16px;
-	}
-
-	&.medium {
-		font-size: 13px;
-		line-height: 20px;
-	}
-
-	&.large {
-		font-size: 14px;
-		line-height: 24px;
-	}
 }
 
 .table-timestamp {
@@ -40,21 +25,3 @@
 		color: var(--bg-slate-400);
 	}
 }
-
-.paragraph {
-	padding: 0px !important;
-	&.small {
-		font-size: 11px !important;
-		line-height: 16px !important;
-	}
-
-	&.medium {
-		font-size: 13px !important;
-		line-height: 20px !important;
-	}
-
-	&.large {
-		font-size: 14px !important;
-		line-height: 24px !important;
-	}
-}

frontend/src/components/Logs/TableView/useTableView.tsx

@@ -3,7 +3,6 @@ import './useTableView.styles.scss';
 import Convert from 'ansi-to-html';
 import { Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
-import cx from 'classnames';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -32,7 +31,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		logs,
 		fields,
 		linesPerRow,
-		fontSize,
 		appendTo = 'center',
 		activeContextLog,
 		activeLog,
@@ -59,10 +57,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 							: getDefaultCellStyle(isDarkMode),
 					},
 					children: (
-						<Typography.Paragraph
-							ellipsis={{ rows: linesPerRow }}
-							className={cx('paragraph', fontSize)}
-						>
+						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
 							{field}
 						</Typography.Paragraph>
 					),
@@ -92,9 +87,8 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 									isActive={
 										activeLog?.id === item.id || activeContextLog?.id === item.id
 									}
-									fontSize={fontSize}
 								/>
-								<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
+								<Typography.Paragraph ellipsis className="text">
 									{date}
 								</Typography.Paragraph>
 							</div>
@@ -120,7 +114,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 									}),
 								),
 							}}
-							fontSize={fontSize}
 							linesPerRow={linesPerRow}
 							isDarkMode={isDarkMode}
 						/>
@@ -137,7 +130,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		linesPerRow,
 		activeLog?.id,
 		activeContextLog?.id,
-		fontSize,
 	]);
 
 	return { columns, dataSource: flattenLogData };

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -17,126 +17,17 @@
 	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 	backdrop-filter: blur(20px);
 
-	.font-size-dropdown {
-		display: flex;
-		flex-direction: column;
-
-		.back-btn {
-			display: flex;
-			align-items: center;
-			gap: 6px;
-			padding: 12px;
-			border: none !important;
-			box-shadow: none !important;
-
-			.icon {
-				flex-shrink: 0;
-			}
-			.text {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: 0.14px;
-			}
-		}
-
-		.back-btn:hover {
-			background-color: unset !important;
-		}
-
-		.content {
-			display: flex;
-			flex-direction: column;
-			.option-btn {
-				display: flex;
-				align-items: center;
-				padding: 12px;
-				border: none !important;
-				box-shadow: none !important;
-				justify-content: space-between;
-
-				.icon {
-					flex-shrink: 0;
-				}
-				.text {
-					color: var(--bg-vanilla-400);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal; /* 142.857% */
-					letter-spacing: 0.14px;
-					text-transform: capitalize;
-				}
-
-				.text:hover {
-					color: var(--bg-vanilla-300);
-				}
-			}
-
-			.option-btn:hover {
-				background-color: unset !important;
-			}
-		}
-	}
-
-	.font-size-container {
-		padding: 12px;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		.title {
-			color: var(--bg-slate-50);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-		}
-
-		.value {
-			display: flex;
-			height: 20px;
-			padding: 4px 0px;
-			justify-content: space-between;
-			align-items: center;
-			border: none !important;
-			.font-value {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-				text-transform: capitalize;
-			}
-			.icon {
-			}
-		}
-
-		.value:hover {
-			background-color: unset !important;
-		}
-	}
-
 	.menu-container {
 		padding: 12px;
 
 		.title {
 			font-family: Inter;
 			font-size: 11px;
-			font-weight: 500;
+			font-weight: 600;
 			line-height: 18px;
 			letter-spacing: 0.08em;
 			text-align: left;
-			color: var(--bg-slate-50);
+			color: #52575c;
 		}
 
 		.menu-items {
@@ -174,11 +65,11 @@
 		padding: 12px;
 
 		.title {
-			color: var(--bg-slate-50);
+			color: #52575c;
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
-			font-weight: 500;
+			font-weight: 600;
 			line-height: 18px; /* 163.636% */
 			letter-spacing: 0.88px;
 			text-transform: uppercase;
@@ -258,11 +149,11 @@
 		}
 
 		.title {
-			color: var(--bg-slate-50);
+			color: #52575c;
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
-			font-weight: 500;
+			font-weight: 600;
 			line-height: 18px; /* 163.636% */
 			letter-spacing: 0.88px;
 			text-transform: uppercase;
@@ -408,38 +299,6 @@
 
 		box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
 
-		.font-size-dropdown {
-			.back-btn {
-				.text {
-					color: var(--bg-ink-400);
-				}
-			}
-
-			.content {
-				.option-btn {
-					.text {
-						color: var(--bg-ink-400);
-					}
-
-					.text:hover {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
-
-		.font-size-container {
-			.title {
-				color: var(--bg-ink-100);
-			}
-
-			.value {
-				.font-value {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
 		.horizontal-line {
 			background: var(--bg-vanilla-300);
 		}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -3,12 +3,12 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './LogsFormatOptionsMenu.styles.scss';
 
-import { Button, Divider, Input, InputNumber, Tooltip, Typography } from 'antd';
+import { Divider, Input, InputNumber, Tooltip } from 'antd';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
-import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
+import { OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
+import { Check, Minus, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 
 interface LogsFormatOptionsMenuProps {
@@ -24,16 +24,10 @@ export default function LogsFormatOptionsMenu({
 	selectedOptionFormat,
 	config,
 }: LogsFormatOptionsMenuProps): JSX.Element {
-	const { maxLines, format, addColumn, fontSize } = config;
+	const { maxLines, format, addColumn } = config;
 	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
 	const maxLinesNumber = (maxLines?.value as number) || 1;
 	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
-	const [fontSizeValue, setFontSizeValue] = useState<FontSize>(
-		fontSize?.value || FontSize.SMALL,
-	);
-	const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState<boolean>(
-		false,
-	);
 
 	const [addNewColumn, setAddNewColumn] = useState(false);
 
@@ -94,12 +88,6 @@ export default function LogsFormatOptionsMenu({
 		}
 	}, [maxLinesPerRow]);
 
-	useEffect(() => {
-		if (fontSizeValue && config && config.fontSize?.onChange) {
-			config.fontSize.onChange(fontSizeValue);
-		}
-	}, [fontSizeValue]);
-
 	return (
 		<div
 			className={cx('nested-menu-container', addNewColumn ? 'active' : '')}
@@ -108,213 +96,145 @@ export default function LogsFormatOptionsMenu({
 				event.stopPropagation();
 			}}
 		>
-			{isFontSizeOptionsOpen ? (
-				<div className="font-size-dropdown">
-					<Button
-						onClick={(): void => setIsFontSizeOptionsOpen(false)}
-						className="back-btn"
-						type="text"
-					>
-						<ChevronLeft size={14} className="icon" />
-						<Typography.Text className="text">Select font size</Typography.Text>
-					</Button>
-					<div className="horizontal-line" />
-					<div className="content">
-						<Button
-							onClick={(): void => {
-								setFontSizeValue(FontSize.SMALL);
-							}}
-							className="option-btn"
-							type="text"
-						>
-							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
-							{fontSizeValue === FontSize.SMALL && (
-								<Check size={14} className="icon" />
-							)}
-						</Button>
-						<Button
-							onClick={(): void => {
-								setFontSizeValue(FontSize.MEDIUM);
-							}}
-							className="option-btn"
-							type="text"
-						>
-							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
-							{fontSizeValue === FontSize.MEDIUM && (
-								<Check size={14} className="icon" />
-							)}
-						</Button>
-						<Button
-							onClick={(): void => {
-								setFontSizeValue(FontSize.LARGE);
-							}}
-							className="option-btn"
-							type="text"
-						>
-							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
-							{fontSizeValue === FontSize.LARGE && (
-								<Check size={14} className="icon" />
-							)}
-						</Button>
-					</div>
+			<div className="menu-container">
+				<div className="title"> {title} </div>
+
+				<div className="menu-items">
+					{items.map(
+						(item: any): JSX.Element => (
+							<div
+								className="item"
+								key={item.label}
+								onClick={(): void => handleMenuItemClick(item.key)}
+							>
+								<div className={cx('item-label')}>
+									{item.label}
+
+									{selectedItem === item.key && <Check size={12} />}
+								</div>
+							</div>
+						),
+					)}
 				</div>
-			) : (
+			</div>
+
+			{selectedItem && (
 				<>
-					<div className="font-size-container">
-						<div className="title">Font Size</div>
-						<Button
-							className="value"
-							type="text"
-							onClick={(): void => {
-								setIsFontSizeOptionsOpen(true);
-							}}
-						>
-							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
-							<ChevronRight size={14} className="icon" />
-						</Button>
-					</div>
-					<div className="horizontal-line" />
-					<div className="menu-container">
-						<div className="title"> {title} </div>
+					<>
+						<div className="horizontal-line" />
+						<div className="max-lines-per-row">
+							<div className="title"> max lines per row </div>
+							<div className="raw-format max-lines-per-row-input">
+								<button
+									type="button"
+									className="periscope-btn"
+									onClick={decrementMaxLinesPerRow}
+								>
+									{' '}
+									<Minus size={12} />{' '}
+								</button>
+								<InputNumber
+									min={1}
+									max={10}
+									value={maxLinesPerRow}
+									onChange={handleLinesPerRowChange}
+								/>
+								<button
+									type="button"
+									className="periscope-btn"
+									onClick={incrementMaxLinesPerRow}
+								>
+									{' '}
+									<Plus size={12} />{' '}
+								</button>
+							</div>
+						</div>
+					</>
 
-						<div className="menu-items">
-							{items.map(
-								(item: any): JSX.Element => (
-									<div
-										className="item"
-										key={item.label}
-										onClick={(): void => handleMenuItemClick(item.key)}
-									>
-										<div className={cx('item-label')}>
-											{item.label}
+					<div className="selected-item-content-container active">
+						{!addNewColumn && <div className="horizontal-line" />}
 
-											{selectedItem === item.key && <Check size={12} />}
+						{addNewColumn && (
+							<div className="add-new-column-header">
+								<div className="title">
+									{' '}
+									columns
+									<X size={14} onClick={handleToggleAddNewColumn} />{' '}
+								</div>
+
+								<Input
+									tabIndex={0}
+									type="text"
+									autoFocus
+									onFocus={addColumn?.onFocus}
+									onChange={handleSearchValueChange}
+									placeholder="Search..."
+								/>
+							</div>
+						)}
+
+						<div className="item-content">
+							{!addNewColumn && (
+								<div className="title">
+									columns
+									<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
+								</div>
+							)}
+
+							<div className="column-format">
+								{addColumn?.value?.map(({ key, id }) => (
+									<div className="column-name" key={id}>
+										<div className="name">
+											<Tooltip placement="left" title={key}>
+												{key}
+											</Tooltip>
 										</div>
+										<X
+											className="delete-btn"
+											size={14}
+											onClick={(): void => addColumn.onRemove(id as string)}
+										/>
 									</div>
-								),
+								))}
+							</div>
+
+							{addColumn?.isFetching && (
+								<div className="loading-container"> Loading ... </div>
+							)}
+
+							{addNewColumn &&
+								addColumn &&
+								addColumn.value.length > 0 &&
+								addColumn.options &&
+								addColumn?.options?.length > 0 && (
+									<Divider className="column-divider" />
+								)}
+
+							{addNewColumn && (
+								<div className="column-format-new-options">
+									{addColumn?.options?.map(({ label, value }) => (
+										<div
+											className="column-name"
+											key={value}
+											onClick={(eve): void => {
+												eve.stopPropagation();
+
+												if (addColumn && addColumn?.onSelect) {
+													addColumn?.onSelect(value, { label, disabled: false });
+												}
+											}}
+										>
+											<div className="name">
+												<Tooltip placement="left" title={label}>
+													{label}
+												</Tooltip>
+											</div>
+										</div>
+									))}
+								</div>
 							)}
 						</div>
 					</div>
-
-					{selectedItem && (
-						<>
-							<>
-								<div className="horizontal-line" />
-								<div className="max-lines-per-row">
-									<div className="title"> max lines per row </div>
-									<div className="raw-format max-lines-per-row-input">
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={decrementMaxLinesPerRow}
-										>
-											{' '}
-											<Minus size={12} />{' '}
-										</button>
-										<InputNumber
-											min={1}
-											max={10}
-											value={maxLinesPerRow}
-											onChange={handleLinesPerRowChange}
-										/>
-										<button
-											type="button"
-											className="periscope-btn"
-											onClick={incrementMaxLinesPerRow}
-										>
-											{' '}
-											<Plus size={12} />{' '}
-										</button>
-									</div>
-								</div>
-							</>
-
-							<div className="selected-item-content-container active">
-								{!addNewColumn && <div className="horizontal-line" />}
-
-								{addNewColumn && (
-									<div className="add-new-column-header">
-										<div className="title">
-											{' '}
-											columns
-											<X size={14} onClick={handleToggleAddNewColumn} />{' '}
-										</div>
-
-										<Input
-											tabIndex={0}
-											type="text"
-											autoFocus
-											onFocus={addColumn?.onFocus}
-											onChange={handleSearchValueChange}
-											placeholder="Search..."
-										/>
-									</div>
-								)}
-
-								<div className="item-content">
-									{!addNewColumn && (
-										<div className="title">
-											columns
-											<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
-										</div>
-									)}
-
-									<div className="column-format">
-										{addColumn?.value?.map(({ key, id }) => (
-											<div className="column-name" key={id}>
-												<div className="name">
-													<Tooltip placement="left" title={key}>
-														{key}
-													</Tooltip>
-												</div>
-												<X
-													className="delete-btn"
-													size={14}
-													onClick={(): void => addColumn.onRemove(id as string)}
-												/>
-											</div>
-										))}
-									</div>
-
-									{addColumn?.isFetching && (
-										<div className="loading-container"> Loading ... </div>
-									)}
-
-									{addNewColumn &&
-										addColumn &&
-										addColumn.value.length > 0 &&
-										addColumn.options &&
-										addColumn?.options?.length > 0 && (
-											<Divider className="column-divider" />
-										)}
-
-									{addNewColumn && (
-										<div className="column-format-new-options">
-											{addColumn?.options?.map(({ label, value }) => (
-												<div
-													className="column-name"
-													key={value}
-													onClick={(eve): void => {
-														eve.stopPropagation();
-
-														if (addColumn && addColumn?.onSelect) {
-															addColumn?.onSelect(value, { label, disabled: false });
-														}
-													}}
-												>
-													<div className="name">
-														<Tooltip placement="left" title={label}>
-															{label}
-														</Tooltip>
-													</div>
-												</div>
-											))}
-										</div>
-									)}
-								</div>
-							</div>
-						</>
-					)}
 				</>
 			)}
 		</div>

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -5,7 +5,7 @@ import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
 import { ColumnGroupType, ColumnType } from 'antd/es/table';
 import { ColumnsType } from 'antd/lib/table';
 import logEvent from 'api/common/logEvent';
-import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { SlidersHorizontal } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -96,7 +96,7 @@ function DynamicColumnTable({
 	return (
 		<div className="DynamicColumnTable">
 			<Flex justify="flex-end" align="center" gap={8}>
-				{facingIssueBtn && <LaunchChatSupport {...facingIssueBtn} />}
+				{facingIssueBtn && <FacingIssueBtn {...facingIssueBtn} />}
 				{dynamicColumns && (
 					<Dropdown
 						getPopupContainer={popupContainer}

frontend/src/components/ResizeTable/types.ts

@@ -2,7 +2,7 @@
 import { TableProps } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import { ColumnGroupType, ColumnType } from 'antd/lib/table';
-import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatSupport';
+import { FacingIssueBtnProps } from 'components/facingIssueBtn/FacingIssueBtn';
 
 import { TableDataSource } from './contants';
 
@@ -13,7 +13,7 @@ export interface DynamicColumnTableProps extends TableProps<any> {
 	tablesource: typeof TableDataSource[keyof typeof TableDataSource];
 	dynamicColumns: TableProps<any>['columns'];
 	onDragColumn?: (fromIndex: number, toIndex: number) => void;
-	facingIssueBtn?: LaunchChatSupportProps;
+	facingIssueBtn?: FacingIssueBtnProps;
 	shouldSendAlertsLogEvent?: boolean;
 }
 

frontend/src/components/Tags/Tags.tsx

@@ -5,6 +5,7 @@ import { Button } from 'antd';
 import { Tag } from 'antd/lib';
 import Input from 'components/Input';
 import { Check, X } from 'lucide-react';
+import { TweenOneGroup } from 'rc-tween-one';
 import React, { Dispatch, SetStateAction, useState } from 'react';
 
 function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
@@ -45,19 +46,41 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 		func(value);
 	};
 
+	const forMap = (tag: string): React.ReactElement => (
+		<span key={tag} style={{ display: 'inline-block' }}>
+			<Tag
+				closable
+				onClose={(e): void => {
+					e.preventDefault();
+					handleClose(tag);
+				}}
+			>
+				{tag}
+			</Tag>
+		</span>
+	);
+
+	const tagChild = tags.map(forMap);
+
+	const renderTagsAnimated = (): React.ReactElement => (
+		<TweenOneGroup
+			appear={false}
+			className="tags"
+			enter={{ scale: 0.8, opacity: 0, type: 'from', duration: 100 }}
+			leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
+			onEnd={(e): void => {
+				if (e.type === 'appear' || e.type === 'enter') {
+					(e.target as any).style = 'display: inline-block';
+				}
+			}}
+		>
+			{tagChild}
+		</TweenOneGroup>
+	);
+
 	return (
 		<div className="tags-container">
-			{tags.map<React.ReactNode>((tag) => (
-				<Tag
-					key={tag}
-					closable
-					style={{ userSelect: 'none' }}
-					onClose={(): void => handleClose(tag)}
-				>
-					<span>{tag}</span>
-				</Tag>
-			))}
-
+			{renderTagsAnimated()}
 			{inputVisible && (
 				<div className="add-tag-container">
 					<Input

frontend/src/components/ValueGraph/index.tsx

@@ -49,10 +49,7 @@ function ValueGraph({
 					}
 				>
 					<Tooltip title={t('this_value_satisfies_multiple_thresholds')}>
-						<ExclamationCircleFilled
-							className="value-graph-icon"
-							data-testid="conflicting-thresholds"
-						/>
+						<ExclamationCircleFilled className="value-graph-icon" />
 					</Tooltip>
 				</div>
 			)}

frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx

@@ -0,0 +1,67 @@
+import './FacingIssueBtn.style.scss';
+
+import { Button, Tooltip } from 'antd';
+import logEvent from 'api/common/logEvent';
+import cx from 'classnames';
+import { FeatureKeys } from 'constants/features';
+import useFeatureFlags from 'hooks/useFeatureFlag';
+import { defaultTo } from 'lodash-es';
+import { HelpCircle } from 'lucide-react';
+import { isCloudUser } from 'utils/app';
+
+export interface FacingIssueBtnProps {
+	eventName: string;
+	attributes: Record<string, unknown>;
+	message?: string;
+	buttonText?: string;
+	className?: string;
+	onHoverText?: string;
+}
+
+function FacingIssueBtn({
+	attributes,
+	eventName,
+	message = '',
+	buttonText = '',
+	className = '',
+	onHoverText = '',
+}: FacingIssueBtnProps): JSX.Element | null {
+	const handleFacingIssuesClick = (): void => {
+		logEvent(eventName, attributes);
+
+		if (window.Intercom) {
+			window.Intercom('showNewMessage', defaultTo(message, ''));
+		}
+	};
+
+	const isChatSupportEnabled = useFeatureFlags(FeatureKeys.CHAT_SUPPORT)?.active;
+	const isCloudUserVal = isCloudUser();
+
+	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
+		<div className="facing-issue-button">
+			<Tooltip
+				title={onHoverText}
+				autoAdjustOverflow
+				style={{ padding: 8 }}
+				overlayClassName="tooltip-overlay"
+			>
+				<Button
+					className={cx('periscope-btn', 'facing-issue-button', className)}
+					onClick={handleFacingIssuesClick}
+					icon={<HelpCircle size={14} />}
+				>
+					{buttonText || 'Facing issues?'}
+				</Button>
+			</Tooltip>
+		</div>
+	) : null;
+}
+
+FacingIssueBtn.defaultProps = {
+	message: '',
+	buttonText: '',
+	className: '',
+	onHoverText: '',
+};
+
+export default FacingIssueBtn;

frontend/src/components/facingIssueBtn/util.ts

@@ -41,21 +41,6 @@ I need help with managing alerts.
 
 Thanks`;
 
-export const onboardingHelpMessage = (
-	dataSourceName: string,
-	moduleId: string,
-): string => `Hi Team,
-
-I am facing issues sending data to SigNoz. Here are my application details
-
-Data Source: ${dataSourceName}
-Framework:
-Environment:
-Module: ${moduleId}
-
-Thanks
-`;
-
 export const alertHelpMessage = (
 	alertDef: AlertDef,
 	ruleId: number,

frontend/src/constants/env.ts

@@ -3,5 +3,4 @@ export const ENVIRONMENT = {
 		process?.env?.FRONTEND_API_ENDPOINT ||
 		process?.env?.GITPOD_WORKSPACE_URL?.replace('://', '://8080-') ||
 		'',
-	wsURL: process?.env?.WEBSOCKET_API_ENDPOINT || '',
 };

frontend/src/constants/features.ts

@@ -19,6 +19,6 @@ export enum FeatureKeys {
 	OSS = 'OSS',
 	ONBOARDING = 'ONBOARDING',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
+	PLANNED_MAINTENANCE = 'PLANNED_MAINTENANCE',
 	GATEWAY = 'GATEWAY',
-	PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
 }

frontend/src/constants/queryBuilder.ts

@@ -52,7 +52,7 @@ export const selectValueDivider = '__';
 
 export const baseAutoCompleteIdKeysOrder: (keyof Omit<
 	BaseAutocompleteData,
-	'id' | 'isJSON' | 'isIndexed'
+	'id' | 'isJSON'
 >)[] = ['key', 'dataType', 'type', 'isColumn'];
 
 export const autocompleteType: Record<AutocompleteType, AutocompleteType> = {
@@ -71,7 +71,6 @@ export const alphabet: string[] = alpha.map((str) => String.fromCharCode(str));
 export enum QueryBuilderKeys {
 	GET_AGGREGATE_ATTRIBUTE = 'GET_AGGREGATE_ATTRIBUTE',
 	GET_AGGREGATE_KEYS = 'GET_AGGREGATE_KEYS',
-	GET_ATTRIBUTE_SUGGESTIONS = 'GET_ATTRIBUTE_SUGGESTIONS',
 }
 
 export const mapOfOperators = {

frontend/src/constants/queryFunctionOptions.ts

@@ -23,10 +23,6 @@ export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
 		value: QueryFunctionsTypes.ABSOLUTE,
 		label: 'Absolute',
 	},
-	{
-		value: QueryFunctionsTypes.RUNNING_DIFF,
-		label: 'Running Diff',
-	},
 	{
 		value: QueryFunctionsTypes.LOG_2,
 		label: 'Log2',
@@ -107,9 +103,6 @@ export const queryFunctionsTypesConfig: QueryFunctionConfigType = {
 	absolute: {
 		showInput: false,
 	},
-	runningDiff: {
-		showInput: false,
-	},
 	log2: {
 		showInput: false,
 	},

frontend/src/constants/shortcuts/logsExplorerShortcuts.ts

@@ -4,7 +4,6 @@ const userOS = getUserOperatingSystem();
 export const LogsExplorerShortcuts = {
 	StageAndRunQuery: 'enter+meta',
 	FocusTheSearchBar: 's',
-	ShowAllFilters: '/+meta',
 };
 
 export const LogsExplorerShortcutsName = {
@@ -12,11 +11,9 @@ export const LogsExplorerShortcutsName = {
 		userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
 	}+enter`,
 	FocusTheSearchBar: 's',
-	ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+/`,
 };
 
 export const LogsExplorerShortcutsDescription = {
 	StageAndRunQuery: 'Stage and Run the current query',
 	FocusTheSearchBar: 'Shift the focus to the last query filter bar',
-	ShowAllFilters: 'Toggle all filters in the filters dropdown',
 };

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -1,78 +0,0 @@
-import AlertChannels from 'container/AllAlertChannels';
-import { allAlertChannels } from 'mocks-server/__mockdata__/alerts';
-import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
-
-jest.mock('hooks/useFetch', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		payload: allAlertChannels,
-	})),
-}));
-
-const successNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: jest.fn(),
-		},
-	})),
-}));
-
-describe('Alert Channels Settings List page', () => {
-	beforeEach(() => {
-		render(<AlertChannels />);
-	});
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-	describe('Should display the Alert Channels page properly', () => {
-		it('Should check if "The alerts will be sent to all the configured channels." is visible ', () => {
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument();
-		});
-		it('Should check if "New Alert Channel" Button is visble ', () => {
-			expect(screen.getByText('button_new_channel')).toBeInTheDocument();
-		});
-		it('Should check if the help icon is visible and displays "tooltip_notification_channels ', async () => {
-			const helpIcon = screen.getByLabelText('question-circle');
-
-			fireEvent.mouseOver(helpIcon);
-
-			await waitFor(() => {
-				const tooltip = screen.getByText('tooltip_notification_channels');
-				expect(tooltip).toBeInTheDocument();
-			});
-		});
-	});
-	describe('Should check if the channels table is properly displayed', () => {
-		it('Should check if the table columns are properly displayed', () => {
-			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
-			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
-			expect(screen.getByText('column_channel_action')).toBeInTheDocument();
-		});
-
-		it('Should check if the data in the table is displayed properly', () => {
-			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
-			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
-			expect(screen.getAllByText('column_channel_edit')[0]).toBeInTheDocument();
-			expect(screen.getAllByText('Delete')[0]).toBeInTheDocument();
-		});
-
-		it('Should check if clicking on Delete displays Success Toast "Channel Deleted Successfully"', async () => {
-			const deleteButton = screen.getAllByRole('button', { name: 'Delete' })[0];
-			expect(deleteButton).toBeInTheDocument();
-
-			act(() => {
-				fireEvent.click(deleteButton);
-			});
-
-			await waitFor(() => {
-				expect(successNotification).toBeCalledWith({
-					message: 'Success',
-					description: 'channel_delete_success',
-				});
-			});
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -1,72 +0,0 @@
-import AlertChannels from 'container/AllAlertChannels';
-import { allAlertChannels } from 'mocks-server/__mockdata__/alerts';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-
-jest.mock('hooks/useFetch', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		payload: allAlertChannels,
-	})),
-}));
-
-const successNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: jest.fn(),
-		},
-	})),
-}));
-
-jest.mock('hooks/useComponentPermission', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => [false]),
-}));
-
-describe('Alert Channels Settings List page (Normal User)', () => {
-	beforeEach(() => {
-		render(<AlertChannels />);
-	});
-	afterEach(() => {
-		jest.restoreAllMocks();
-	});
-	describe('Should display the Alert Channels page properly', () => {
-		it('Should check if "The alerts will be sent to all the configured channels." is visible ', () => {
-			expect(screen.getByText('sending_channels_note')).toBeInTheDocument();
-		});
-
-		it('Should check if "New Alert Channel" Button is visble and disabled', () => {
-			const newAlertButton = screen.getByRole('button', {
-				name: 'plus button_new_channel',
-			});
-			expect(newAlertButton).toBeInTheDocument();
-			expect(newAlertButton).toBeDisabled();
-		});
-		it('Should check if the help icon is visible and displays "tooltip_notification_channels ', async () => {
-			const helpIcon = screen.getByLabelText('question-circle');
-
-			fireEvent.mouseOver(helpIcon);
-
-			await waitFor(() => {
-				const tooltip = screen.getByText('tooltip_notification_channels');
-				expect(tooltip).toBeInTheDocument();
-			});
-		});
-	});
-	describe('Should check if the channels table is properly displayed', () => {
-		it('Should check if the table columns are properly displayed', () => {
-			expect(screen.getByText('column_channel_name')).toBeInTheDocument();
-			expect(screen.getByText('column_channel_type')).toBeInTheDocument();
-			expect(screen.queryByText('column_channel_action')).not.toBeInTheDocument();
-		});
-
-		it('Should check if the data in the table is displayed properly', () => {
-			expect(screen.getByText('Dummy-Channel')).toBeInTheDocument();
-			expect(screen.getAllByText('slack')[0]).toBeInTheDocument();
-			expect(screen.queryByText('column_channel_edit')).not.toBeInTheDocument();
-			expect(screen.queryByText('Delete')).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -1,424 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable sonarjs/no-identical-functions */
-
-import CreateAlertChannels from 'container/CreateAlertChannels';
-import { ChannelType } from 'container/CreateAlertChannels/config';
-import {
-	opsGenieDescriptionDefaultValue,
-	opsGenieMessageDefaultValue,
-	opsGeniePriorityDefaultValue,
-	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultVaule,
-	pagerDutySeverityTextDefaultValue,
-	slackDescriptionDefaultValue,
-	slackTitleDefaultValue,
-} from 'mocks-server/__mockdata__/alerts';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-
-import { testLabelInputAndHelpValue } from './testUtils';
-
-const successNotification = jest.fn();
-const errorNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: errorNotification,
-		},
-	})),
-}));
-
-jest.mock('hooks/useFeatureFlag', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		active: true,
-	})),
-}));
-
-describe('Create Alert Channel', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-	describe('Should check if the new alert channel is properly displayed with the cascading fields of slack channel ', () => {
-		beforeEach(() => {
-			render(<CreateAlertChannels preType={ChannelType.Slack} />);
-		});
-		afterEach(() => {
-			jest.clearAllMocks();
-		});
-		it('Should check if the title is "New Notification Channels"', () => {
-			expect(screen.getByText('page_title_create')).toBeInTheDocument();
-		});
-		it('Should check if the name label and textbox are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_name',
-				testId: 'channel-name-textbox',
-			});
-		});
-		it('Should check if Send resolved alerts label and checkbox are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_send_resolved',
-				testId: 'field-send-resolved-checkbox',
-			});
-		});
-		it('Should check if channel type label and dropdown are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_type',
-				testId: 'channel-type-select',
-			});
-		});
-		// Default Channel type (Slack) fields
-		it('Should check if the selected item in the type dropdown has text "Slack"', () => {
-			expect(screen.getByText('Slack')).toBeInTheDocument();
-		});
-		it('Should check if Webhook URL label and input are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_webhook_url',
-				testId: 'webhook-url-textbox',
-			});
-		});
-		it('Should check if Recepient label, input, and help text are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_recipient',
-				testId: 'slack-channel-textbox',
-				helpText: 'slack_channel_help',
-			});
-		});
-
-		it('Should check if Title label and text area are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_title',
-				testId: 'title-textarea',
-			});
-		});
-		it('Should check if Title contains template', () => {
-			const titleTextArea = screen.getByTestId('title-textarea');
-
-			expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-		});
-		it('Should check if Description label and text area are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_description',
-				testId: 'description-textarea',
-			});
-		});
-		it('Should check if Description contains template', () => {
-			const descriptionTextArea = screen.getByTestId('description-textarea');
-
-			expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
-		});
-		it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-			expect(screen.getByText('button_save_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_return')).toBeInTheDocument();
-		});
-		it('Should check if saving the form without filling the name displays "Something went wrong"', async () => {
-			const saveButton = screen.getByRole('button', {
-				name: 'button_save_channel',
-			});
-
-			fireEvent.click(saveButton);
-
-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					description: 'Something went wrong',
-					message: 'Error',
-				}),
-			);
-		});
-		it('Should check if clicking on Test button shows "An alert has been sent to this channel" success message if testing passes', async () => {
-			server.use(
-				rest.post('http://localhost/api/v1/testChannel', (req, res, ctx) =>
-					res(
-						ctx.status(200),
-						ctx.json({
-							status: 'success',
-							data: 'test alert sent',
-						}),
-					),
-				),
-			);
-			const testButton = screen.getByRole('button', {
-				name: 'button_test_channel',
-			});
-
-			fireEvent.click(testButton);
-
-			await waitFor(() =>
-				expect(successNotification).toHaveBeenCalledWith({
-					message: 'Success',
-					description: 'channel_test_done',
-				}),
-			);
-		});
-		it('Should check if clicking on Test button shows "Something went wrong" error message if testing fails', async () => {
-			const testButton = screen.getByRole('button', {
-				name: 'button_test_channel',
-			});
-
-			fireEvent.click(testButton);
-
-			await waitFor(() =>
-				expect(errorNotification).toHaveBeenCalledWith({
-					message: 'Error',
-					description: 'channel_test_failed',
-				}),
-			);
-		});
-	});
-	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
-		describe('Webhook', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Webhook} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Webhook"', () => {
-				expect(screen.getByText('Webhook')).toBeInTheDocument();
-			});
-			it('Should check if Webhook URL label and input are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-			it('Should check if Webhook User Name label, input, and help text are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_username',
-					testId: 'webhook-username-textbox',
-					helpText: 'help_webhook_username',
-				});
-			});
-			it('Should check if Password label and textbox, and help text are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'Password (optional)',
-					testId: 'webhook-password-textbox',
-					helpText: 'help_webhook_password',
-				});
-			});
-		});
-		describe('PagerDuty', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Pagerduty} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Pagerduty"', () => {
-				expect(screen.getByText('Pagerduty')).toBeInTheDocument();
-			});
-			it('Should check if Routing key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_routing_key',
-					testId: 'pager-routing-key-textbox',
-				});
-			});
-			it('Should check if Description label, required, info (Shows up as description in pagerduty), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_description',
-					testId: 'pager-description-textarea',
-					helpText: 'help_pager_description',
-				});
-			});
-			it('Should check if the description contains default template', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'pager-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultVaule,
-				);
-			});
-			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_severity',
-					testId: 'pager-severity-textbox',
-					helpText: 'help_pager_severity',
-				});
-			});
-			it('Should check if Severity contains the default template', () => {
-				const severityTextbox = screen.getByTestId('pager-severity-textbox');
-
-				expect(severityTextbox).toHaveValue(pagerDutySeverityTextDefaultValue);
-			});
-			it('Should check if Additional Information label, text area, and help text (help_pager_details) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_details',
-					testId: 'pager-additional-details-textarea',
-					helpText: 'help_pager_details',
-				});
-			});
-			it('Should check if Additional Information contains the default template', () => {
-				const detailsTextArea = screen.getByTestId(
-					'pager-additional-details-textarea',
-				);
-
-				expect(detailsTextArea).toHaveValue(pagerDutyAdditionalDetailsDefaultValue);
-			});
-			it('Should check if Group label, text area, and info (help_pager_group) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_group',
-					testId: 'pager-group-textarea',
-					helpText: 'help_pager_group',
-				});
-			});
-			it('Should check if Class label, text area, and info (help_pager_class) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_class',
-					testId: 'pager-class-textarea',
-					helpText: 'help_pager_class',
-				});
-			});
-			it('Should check if Client label, text area, and info (Shows up as event source in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client',
-					testId: 'pager-client-textarea',
-					helpText: 'help_pager_client',
-				});
-			});
-			it('Should check if Client input contains the default value "SigNoz Alert Manager"', () => {
-				const clientTextArea = screen.getByTestId('pager-client-textarea');
-
-				expect(clientTextArea).toHaveValue('SigNoz Alert Manager');
-			});
-			it('Should check if Client URL label, text area, and info (Shows up as event source link in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client_url',
-					testId: 'pager-client-url-textarea',
-					helpText: 'help_pager_client_url',
-				});
-			});
-			it('Should check if Client URL contains the default value "https://enter-signoz-host-n-port-here/alerts"', () => {
-				const clientUrlTextArea = screen.getByTestId('pager-client-url-textarea');
-
-				expect(clientUrlTextArea).toHaveValue(
-					'https://enter-signoz-host-n-port-here/alerts',
-				);
-			});
-		});
-		describe('Opsgenie', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Opsgenie"', () => {
-				expect(screen.getByText('Opsgenie')).toBeInTheDocument();
-			});
-
-			it('Should check if API key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_api_key',
-					testId: 'opsgenie-api-key-textbox',
-					required: true,
-				});
-			});
-
-			it('Should check if Message label, required, info (Shows up as message in opsgenie), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_message',
-					testId: 'opsgenie-message-textarea',
-					helpText: 'help_opsgenie_message',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template ', () => {
-				const messageTextArea = screen.getByTestId('opsgenie-message-textarea');
-
-				expect(messageTextArea).toHaveValue(opsGenieMessageDefaultValue);
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_description',
-					testId: 'opsgenie-description-textarea',
-					helpText: 'help_opsgenie_description',
-					required: true,
-				});
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'opsgenie-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					opsGenieDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if Priority label, required, info (help_opsgenie_priority), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_priority',
-					testId: 'opsgenie-priority-textarea',
-					helpText: 'help_opsgenie_priority',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template', () => {
-				const priorityTextArea = screen.getByTestId('opsgenie-priority-textarea');
-
-				expect(priorityTextArea).toHaveValue(opsGeniePriorityDefaultValue);
-			});
-		});
-		describe('Opsgenie', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Email} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Email"', () => {
-				expect(screen.getByText('Email')).toBeInTheDocument();
-			});
-			it('Should check if API key label, required, info(help_email_to), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_email_to',
-					testId: 'email-to-textbox',
-					helpText: 'help_email_to',
-					required: true,
-				});
-			});
-		});
-		describe('Microsoft Teams', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "msteams"', () => {
-				expect(screen.getByText('msteams')).toBeInTheDocument();
-			});
-
-			it('Should check if Webhook URL label and input are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-
-			it('Should check if Title label and text area are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_slack_title',
-					testId: 'title-textarea',
-				});
-			});
-
-			it('Should check if Title contains template', () => {
-				const titleTextArea = screen.getByTestId('title-textarea');
-
-				expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-			});
-			it('Should check if Description label and text area are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_slack_description',
-					testId: 'description-textarea',
-				});
-			});
-
-			it('Should check if Description contains template', () => {
-				const descriptionTextArea = screen.getByTestId('description-textarea');
-
-				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
-			});
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -1,348 +0,0 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-/* eslint-disable sonarjs/no-identical-functions */
-
-import { SIGNOZ_UPGRADE_PLAN_URL } from 'constants/app';
-import CreateAlertChannels from 'container/CreateAlertChannels';
-import { ChannelType } from 'container/CreateAlertChannels/config';
-import {
-	opsGenieDescriptionDefaultValue,
-	opsGenieMessageDefaultValue,
-	opsGeniePriorityDefaultValue,
-	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultVaule,
-	pagerDutySeverityTextDefaultValue,
-	slackDescriptionDefaultValue,
-	slackTitleDefaultValue,
-} from 'mocks-server/__mockdata__/alerts';
-import { render, screen } from 'tests/test-utils';
-
-import { testLabelInputAndHelpValue } from './testUtils';
-
-describe('Create Alert Channel (Normal User)', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-	describe('Should check if the new alert channel is properly displayed with the cascading fields of slack channel ', () => {
-		beforeEach(() => {
-			render(<CreateAlertChannels preType={ChannelType.Slack} />);
-		});
-		it('Should check if the title is "New Notification Channels"', () => {
-			expect(screen.getByText('page_title_create')).toBeInTheDocument();
-		});
-		it('Should check if the name label and textbox are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_name',
-				testId: 'channel-name-textbox',
-			});
-		});
-		it('Should check if Send resolved alerts label and checkbox are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_send_resolved',
-				testId: 'field-send-resolved-checkbox',
-			});
-		});
-		it('Should check if channel type label and dropdown are displayed properly', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_channel_type',
-				testId: 'channel-type-select',
-			});
-		});
-		// Default Channel type (Slack) fields
-		it('Should check if the selected item in the type dropdown has text "Slack"', () => {
-			expect(screen.getByText('Slack')).toBeInTheDocument();
-		});
-		it('Should check if Webhook URL label and input are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_webhook_url',
-				testId: 'webhook-url-textbox',
-			});
-		});
-		it('Should check if Recepient label, input, and help text are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_recipient',
-				testId: 'slack-channel-textbox',
-				helpText: 'slack_channel_help',
-			});
-		});
-
-		it('Should check if Title label and text area are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_title',
-				testId: 'title-textarea',
-			});
-		});
-		it('Should check if Title contains template', () => {
-			const titleTextArea = screen.getByTestId('title-textarea');
-
-			expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-		});
-		it('Should check if Description label and text area are displayed properly ', () => {
-			testLabelInputAndHelpValue({
-				labelText: 'field_slack_description',
-				testId: 'description-textarea',
-			});
-		});
-		it('Should check if Description contains template', () => {
-			const descriptionTextArea = screen.getByTestId('description-textarea');
-
-			expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
-		});
-		it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-			expect(screen.getByText('button_save_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_test_channel')).toBeInTheDocument();
-			expect(screen.getByText('button_return')).toBeInTheDocument();
-		});
-	});
-	describe('New Alert Channel Cascading Fields Based on Channel Type', () => {
-		describe('Webhook', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Webhook} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Webhook"', () => {
-				expect(screen.getByText('Webhook')).toBeInTheDocument();
-			});
-			it('Should check if Webhook URL label and input are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-			it('Should check if Webhook User Name label, input, and help text are displayed properly ', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_username',
-					testId: 'webhook-username-textbox',
-					helpText: 'help_webhook_username',
-				});
-			});
-			it('Should check if Password label and textbox, and help text are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'Password (optional)',
-					testId: 'webhook-password-textbox',
-					helpText: 'help_webhook_password',
-				});
-			});
-		});
-		describe('PagerDuty', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Pagerduty} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Pagerduty"', () => {
-				expect(screen.getByText('Pagerduty')).toBeInTheDocument();
-			});
-			it('Should check if Routing key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_routing_key',
-					testId: 'pager-routing-key-textbox',
-				});
-			});
-			it('Should check if Description label, required, info (Shows up as description in pagerduty), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_description',
-					testId: 'pager-description-textarea',
-					helpText: 'help_pager_description',
-				});
-			});
-			it('Should check if the description contains default template', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'pager-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultVaule,
-				);
-			});
-			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_severity',
-					testId: 'pager-severity-textbox',
-					helpText: 'help_pager_severity',
-				});
-			});
-			it('Should check if Severity contains the default template', () => {
-				const severityTextbox = screen.getByTestId('pager-severity-textbox');
-
-				expect(severityTextbox).toHaveValue(pagerDutySeverityTextDefaultValue);
-			});
-			it('Should check if Additional Information label, text area, and help text (help_pager_details) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_details',
-					testId: 'pager-additional-details-textarea',
-					helpText: 'help_pager_details',
-				});
-			});
-			it('Should check if Additional Information contains the default template', () => {
-				const detailsTextArea = screen.getByTestId(
-					'pager-additional-details-textarea',
-				);
-
-				expect(detailsTextArea).toHaveValue(pagerDutyAdditionalDetailsDefaultValue);
-			});
-			it('Should check if Group label, text area, and info (help_pager_group) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_group',
-					testId: 'pager-group-textarea',
-					helpText: 'help_pager_group',
-				});
-			});
-			it('Should check if Class label, text area, and info (help_pager_class) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_class',
-					testId: 'pager-class-textarea',
-					helpText: 'help_pager_class',
-				});
-			});
-			it('Should check if Client label, text area, and info (Shows up as event source in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client',
-					testId: 'pager-client-textarea',
-					helpText: 'help_pager_client',
-				});
-			});
-			it('Should check if Client input contains the default value "SigNoz Alert Manager"', () => {
-				const clientTextArea = screen.getByTestId('pager-client-textarea');
-
-				expect(clientTextArea).toHaveValue('SigNoz Alert Manager');
-			});
-			it('Should check if Client URL label, text area, and info (Shows up as event source link in Pagerduty) are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_pager_client_url',
-					testId: 'pager-client-url-textarea',
-					helpText: 'help_pager_client_url',
-				});
-			});
-			it('Should check if Client URL contains the default value "https://enter-signoz-host-n-port-here/alerts"', () => {
-				const clientUrlTextArea = screen.getByTestId('pager-client-url-textarea');
-
-				expect(clientUrlTextArea).toHaveValue(
-					'https://enter-signoz-host-n-port-here/alerts',
-				);
-			});
-		});
-		describe('Opsgenie', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Opsgenie"', () => {
-				expect(screen.getByText('Opsgenie')).toBeInTheDocument();
-			});
-
-			it('Should check if API key label, required, and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_api_key',
-					testId: 'opsgenie-api-key-textbox',
-					required: true,
-				});
-			});
-
-			it('Should check if Message label, required, info (Shows up as message in opsgenie), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_message',
-					testId: 'opsgenie-message-textarea',
-					helpText: 'help_opsgenie_message',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template ', () => {
-				const messageTextArea = screen.getByTestId('opsgenie-message-textarea');
-
-				expect(messageTextArea).toHaveValue(opsGenieMessageDefaultValue);
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_description',
-					testId: 'opsgenie-description-textarea',
-					helpText: 'help_opsgenie_description',
-					required: true,
-				});
-			});
-
-			it('Should check if Description label, required, info (Shows up as description in opsgenie), and text area are displayed properly `{{ if gt (len .Alerts.Firing) 0 -}}', () => {
-				const descriptionTextArea = screen.getByTestId(
-					'opsgenie-description-textarea',
-				);
-
-				expect(descriptionTextArea).toHaveTextContent(
-					opsGenieDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if Priority label, required, info (help_opsgenie_priority), and text area are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_opsgenie_priority',
-					testId: 'opsgenie-priority-textarea',
-					helpText: 'help_opsgenie_priority',
-					required: true,
-				});
-			});
-
-			it('Should check if Message contains the default template', () => {
-				const priorityTextArea = screen.getByTestId('opsgenie-priority-textarea');
-
-				expect(priorityTextArea).toHaveValue(opsGeniePriorityDefaultValue);
-			});
-		});
-		describe('Opsgenie', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.Email} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Email"', () => {
-				expect(screen.getByText('Email')).toBeInTheDocument();
-			});
-			it('Should check if API key label, required, info(help_email_to), and textbox are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_email_to',
-					testId: 'email-to-textbox',
-					helpText: 'help_email_to',
-					required: true,
-				});
-			});
-		});
-		describe('Microsoft Teams', () => {
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.MsTeams} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Microsoft Teams (Supported in Paid Plans Only)"', () => {
-				expect(
-					screen.getByText('Microsoft Teams (Supported in Paid Plans Only)'),
-				).toBeInTheDocument();
-			});
-
-			it('Should check if the upgrade plan message is shown', () => {
-				expect(screen.getByText('Upgrade to a Paid Plan')).toBeInTheDocument();
-				expect(
-					screen.getByText(/This feature is available for paid plans only./),
-				).toBeInTheDocument();
-				const link = screen.getByRole('link', { name: 'Click here' });
-				expect(link).toBeInTheDocument();
-				expect(link).toHaveAttribute('href', SIGNOZ_UPGRADE_PLAN_URL);
-				expect(screen.getByText(/to Upgrade/)).toBeInTheDocument();
-			});
-			it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-				expect(
-					screen.getByRole('button', { name: 'button_save_channel' }),
-				).toBeInTheDocument();
-				expect(
-					screen.getByRole('button', { name: 'button_test_channel' }),
-				).toBeInTheDocument();
-				expect(
-					screen.getByRole('button', { name: 'button_return' }),
-				).toBeInTheDocument();
-			});
-			it('Should check if save and test buttons are disabled', () => {
-				expect(
-					screen.getByRole('button', { name: 'button_save_channel' }),
-				).toBeDisabled();
-				expect(
-					screen.getByRole('button', { name: 'button_test_channel' }),
-				).toBeDisabled();
-			});
-		});
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/EditAlertChannel.test.tsx

@@ -1,118 +0,0 @@
-import EditAlertChannels from 'container/EditAlertChannels';
-import {
-	editAlertChannelInitialValue,
-	editSlackDescriptionDefaultValue,
-	slackTitleDefaultValue,
-} from 'mocks-server/__mockdata__/alerts';
-import { render, screen } from 'tests/test-utils';
-
-import { testLabelInputAndHelpValue } from './testUtils';
-
-const successNotification = jest.fn();
-const errorNotification = jest.fn();
-jest.mock('hooks/useNotifications', () => ({
-	__esModule: true,
-	useNotifications: jest.fn(() => ({
-		notifications: {
-			success: successNotification,
-			error: errorNotification,
-		},
-	})),
-}));
-
-jest.mock('hooks/useFeatureFlag', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		active: true,
-	})),
-}));
-
-describe('Should check if the edit alert channel is properly displayed ', () => {
-	beforeEach(() => {
-		render(<EditAlertChannels initialValue={editAlertChannelInitialValue} />);
-	});
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-	it('Should check if the title is "Edit Notification Channels"', () => {
-		expect(screen.getByText('page_title_edit')).toBeInTheDocument();
-	});
-
-	it('Should check if the name label and textbox are displayed properly ', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_channel_name',
-			testId: 'channel-name-textbox',
-			value: 'Dummy-Channel',
-		});
-	});
-	it('Should check if Send resolved alerts label and checkbox are displayed properly and the checkbox is checked ', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_send_resolved',
-			testId: 'field-send-resolved-checkbox',
-		});
-		expect(screen.getByTestId('field-send-resolved-checkbox')).toBeChecked();
-	});
-
-	it('Should check if channel type label and dropdown are displayed properly', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_channel_type',
-			testId: 'channel-type-select',
-		});
-	});
-
-	it('Should check if the selected item in the type dropdown has text "Slack"', () => {
-		expect(screen.getByText('Slack')).toBeInTheDocument();
-	});
-
-	it('Should check if Webhook URL label and input are displayed properly ', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_webhook_url',
-			testId: 'webhook-url-textbox',
-			value:
-				'https://discord.com/api/webhooks/dummy_webhook_id/dummy_webhook_token/slack',
-		});
-	});
-
-	it('Should check if Recepient label, input, and help text are displayed properly ', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_slack_recipient',
-			testId: 'slack-channel-textbox',
-			helpText: 'slack_channel_help',
-			value: '#dummy_channel',
-		});
-	});
-
-	it('Should check if Title label and text area are displayed properly ', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_slack_title',
-			testId: 'title-textarea',
-		});
-	});
-
-	it('Should check if Title contains template', () => {
-		const titleTextArea = screen.getByTestId('title-textarea');
-
-		expect(titleTextArea).toHaveTextContent(slackTitleDefaultValue);
-	});
-
-	it('Should check if Description label and text area are displayed properly ', () => {
-		testLabelInputAndHelpValue({
-			labelText: 'field_slack_description',
-			testId: 'description-textarea',
-		});
-	});
-
-	it('Should check if Description contains template', () => {
-		const descriptionTextArea = screen.getByTestId('description-textarea');
-
-		expect(descriptionTextArea).toHaveTextContent(
-			editSlackDescriptionDefaultValue,
-		);
-	});
-
-	it('Should check if the form buttons are displayed properly (Save, Test, Back)', () => {
-		expect(screen.getByText('button_save_channel')).toBeInTheDocument();
-		expect(screen.getByText('button_test_channel')).toBeInTheDocument();
-		expect(screen.getByText('button_return')).toBeInTheDocument();
-	});
-});

frontend/src/container/AllAlertChannels/__tests__/testUtils.ts

@@ -1,31 +0,0 @@
-import { screen } from 'tests/test-utils';
-
-export const testLabelInputAndHelpValue = ({
-	labelText,
-	testId,
-	helpText,
-	required = false,
-	value,
-}: {
-	labelText: string;
-	testId: string;
-	helpText?: string;
-	required?: boolean;
-	value?: string;
-}): void => {
-	const label = screen.getByText(labelText);
-	expect(label).toBeInTheDocument();
-
-	const input = screen.getByTestId(testId);
-	expect(input).toBeInTheDocument();
-
-	if (helpText !== undefined) {
-		expect(screen.getByText(helpText)).toBeInTheDocument();
-	}
-	if (required) {
-		expect(input).toBeRequired();
-	}
-	if (value) {
-		expect(input).toHaveValue(value);
-	}
-};

frontend/src/container/AllError/index.tsx

@@ -423,9 +423,9 @@ function AllErrors(): JSX.Element {
 			)?.tagValue;
 
 			logEvent('Exception: List page visited', {
-				numberOfExceptions: errorCountResponse?.data?.payload,
+				numberOfExceptions: errorCountResponse.data?.payload,
 				selectedEnvironments,
-				resourceAttributeUsed: !!queries?.length,
+				resourceAttributeUsed: !!queries.length,
 			});
 			logEventCalledRef.current = true;
 		}

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

@@ -24,71 +24,6 @@
 	}
 }
 
-.chat-support-gateway {
-	position: fixed;
-	bottom: 20px;
-	right: 20px;
-	z-index: 1000;
-
-	.chat-support-gateway-btn {
-		max-width: 48px;
-		width: 48px;
-		max-height: 48px;
-		height: 48px;
-		padding: 12px;
-		border-radius: 50%;
-
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		background-color: #f25733;
-		border: none;
-
-		&:hover {
-			color: white !important;
-			border-color: white !important;
-		}
-
-		.chat-support-gateway-btn-icon {
-			fill: white;
-		}
-	}
-}
-
-.add-credit-card-btn,
-.cancel-btn {
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.highlight-text {
-	border-radius: 2px;
-	background: rgba(78, 116, 248, 0.1);
-	padding-right: 4px;
-	font-family: 'Geist Mono';
-	color: var(--bg-robin-500);
-}
-
-.add-credit-card-modal {
-	.ant-modal-footer {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.cancel-btn {
-		border-radius: 2px;
-		border: none;
-		background: var(--bg-slate-500, #161922);
-		box-shadow: none;
-	}
-
-	.add-credit-card-btn {
-		box-shadow: none;
-	}
-}
-
 .isDarkMode {
 	.app-layout {
 		.app-content {

frontend/src/container/AppLayout/index.tsx

@@ -9,15 +9,12 @@ import getLocalStorageKey from 'api/browser/localstorage/get';
 import getUserLatestVersion from 'api/user/getLatestVersion';
 import getUserVersion from 'api/user/getVersion';
 import cx from 'classnames';
-import ChatSupportGateway from 'components/ChatSupportGateway/ChatSupportGateway';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
-import { FeatureKeys } from 'constants/features';
 import ROUTES from 'constants/routes';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import useFeatureFlags from 'hooks/useFeatureFlag';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
@@ -52,7 +49,6 @@ import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 import { ChildrenContainer, Layout, LayoutContent } from './styles';
 import { getRouteKey } from './utils';
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 function AppLayout(props: AppLayoutProps): JSX.Element {
 	const { isLoggedIn, user, role } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
@@ -62,19 +58,10 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
 	);
 
-	const { notifications } = useNotifications();
-
 	const isDarkMode = useIsDarkMode();
 
 	const { data: licenseData, isFetching } = useLicense();
 
-	const isPremiumChatSupportEnabled =
-		useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false;
-
-	const showAddCreditCardModal =
-		!isPremiumChatSupportEnabled &&
-		!licenseData?.payload?.trialConvertedToSubscription;
-
 	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);
 
@@ -108,6 +95,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const latestCurrentCounter = useRef(0);
 	const latestVersionCounter = useRef(0);
 
+	const { notifications } = useNotifications();
+
 	const onCollapse = useCallback(() => {
 		setCollapsed((collapsed) => !collapsed);
 	}, []);
@@ -342,8 +331,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					</Sentry.ErrorBoundary>
 				</div>
 			</Flex>
-
-			{showAddCreditCardModal && <ChatSupportGateway />}
 		</Layout>
 	);
 }

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -19,10 +19,10 @@ import { ColumnsType } from 'antd/es/table';
 import updateCreditCardApi from 'api/billing/checkout';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import manageCreditCardApi from 'api/billing/manage';
-import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useAnalytics from 'hooks/analytics/useAnalytics';
 import useAxiosError from 'hooks/useAxiosError';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
@@ -137,6 +137,8 @@ export default function BillingContainer(): JSX.Element {
 		Partial<UsageResponsePayloadProps>
 	>({});
 
+	const { trackEvent } = useAnalytics();
+
 	const { isFetching, data: licensesData, error: licenseError } = useLicense();
 
 	const { user, org } = useSelector<AppState, AppReducer>((state) => state.app);
@@ -314,7 +316,7 @@ export default function BillingContainer(): JSX.Element {
 
 	const handleBilling = useCallback(async () => {
 		if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) {
-			logEvent('Billing : Upgrade Plan', {
+			trackEvent('Billing : Upgrade Plan', {
 				user: pick(user, ['email', 'userId', 'name']),
 				org,
 			});
@@ -325,7 +327,7 @@ export default function BillingContainer(): JSX.Element {
 				cancelURL: window.location.href,
 			});
 		} else {
-			logEvent('Billing : Manage Billing', {
+			trackEvent('Billing : Manage Billing', {
 				user: pick(user, ['email', 'userId', 'name']),
 				org,
 			});

frontend/src/container/CreateAlertChannels/index.tsx

@@ -449,8 +449,8 @@ function CreateAlertChannels({
 					const result = await functionToCall();
 					logEvent('Alert Channel: Save channel', {
 						type: value,
-						sendResolvedAlert: selectedConfig?.send_resolved,
-						name: selectedConfig?.name,
+						sendResolvedAlert: selectedConfig.send_resolved,
+						name: selectedConfig.name,
 						new: 'true',
 						status: result?.status,
 						statusMessage: result?.statusMessage,
@@ -530,8 +530,8 @@ function CreateAlertChannels({
 
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
-					sendResolvedAlert: selectedConfig?.send_resolved,
-					name: selectedConfig?.name,
+					sendResolvedAlert: selectedConfig.send_resolved,
+					name: selectedConfig.name,
 					new: 'true',
 					status:
 						response && response.statusCode === 200 ? 'Test success' : 'Test failed',

frontend/src/container/EditAlertChannels/index.tsx

@@ -370,8 +370,8 @@ function EditAlertChannels({
 			}
 			logEvent('Alert Channel: Save channel', {
 				type: value,
-				sendResolvedAlert: selectedConfig?.send_resolved,
-				name: selectedConfig?.name,
+				sendResolvedAlert: selectedConfig.send_resolved,
+				name: selectedConfig.name,
 				new: 'false',
 				status: result?.status,
 				statusMessage: result?.statusMessage,
@@ -441,8 +441,8 @@ function EditAlertChannels({
 				}
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
-					sendResolvedAlert: selectedConfig?.send_resolved,
-					name: selectedConfig?.name,
+					sendResolvedAlert: selectedConfig.send_resolved,
+					name: selectedConfig.name,
 					new: 'false',
 					status:
 						response && response.statusCode === 200 ? 'Test success' : 'Test failed',

frontend/src/container/ErrorDetails/index.tsx

@@ -114,10 +114,10 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 	const onClickTraceHandler = (): void => {
 		logEvent('Exception: Navigate to trace detail page', {
-			groupId: errorDetail?.groupID,
+			groupId: errorDetail.groupID,
 			spanId: errorDetail.spanID,
 			traceId: errorDetail.traceID,
-			exceptionId: errorDetail?.errorId,
+			exceptionId: errorDetail.errorId,
 		});
 		history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
 	};
@@ -126,10 +126,10 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 	useEffect(() => {
 		if (!logEventCalledRef.current && !isUndefined(data)) {
 			logEvent('Exception: Detail page visited', {
-				groupId: errorDetail?.groupID,
+				groupId: errorDetail.groupID,
 				spanId: errorDetail.spanID,
 				traceId: errorDetail.traceID,
-				exceptionId: errorDetail?.errorId,
+				exceptionId: errorDetail.errorId,
 			});
 			logEventCalledRef.current = true;
 		}

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -33,7 +33,6 @@ import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { cloneDeep } from 'lodash-es';
 import {
 	Check,
 	ConciergeBell,
@@ -57,7 +56,7 @@ import { useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
@@ -121,21 +120,6 @@ function ExplorerOptions({
 
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
-	const handleConditionalQueryModification = useCallback((): string => {
-		if (
-			query?.builder?.queryData?.[0]?.aggregateOperator !== StringOperators.NOOP
-		) {
-			return JSON.stringify(query);
-		}
-
-		// Modify aggregateOperator to count, as noop is not supported in alerts
-		const modifiedQuery = cloneDeep(query);
-
-		modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
-
-		return JSON.stringify(modifiedQuery);
-	}, [query]);
-
 	const onCreateAlertsHandler = useCallback(() => {
 		if (sourcepage === DataSource.TRACES) {
 			logEvent('Traces Explorer: Create alert', {
@@ -146,16 +130,13 @@ function ExplorerOptions({
 				panelType,
 			});
 		}
-
-		const stringifiedQuery = handleConditionalQueryModification();
-
 		history.push(
 			`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
-				stringifiedQuery,
+				JSON.stringify(query),
 			)}`,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [handleConditionalQueryModification, history]);
+	}, [history, query]);
 
 	const onCancel = (value: boolean) => (): void => {
 		onModalToggle(value);
@@ -275,12 +256,12 @@ function ExplorerOptions({
 		if (sourcepage === DataSource.TRACES) {
 			logEvent('Traces Explorer: Select view', {
 				panelType,
-				viewName: option?.value,
+				viewName: option.value,
 			});
 		} else if (sourcepage === DataSource.LOGS) {
 			logEvent('Logs Explorer: Select view', {
 				panelType,
-				viewName: option?.value,
+				viewName: option.value,
 			});
 		}
 		if (ref.current) {
@@ -501,7 +482,6 @@ function ExplorerOptions({
 								shape="circle"
 								onClick={hideToolbar}
 								icon={<PanelBottomClose size={16} />}
-								data-testid="hide-toolbar"
 							/>
 						</Tooltip>
 					</div>
@@ -531,7 +511,6 @@ function ExplorerOptions({
 						icon={<Check size={16} />}
 						onClick={onSaveHandler}
 						disabled={isSaveViewLoading}
-						data-testid="save-view-btn"
 					>
 						Save this view
 					</Button>,

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx

@@ -65,7 +65,6 @@ function ExplorerOptionsHideArea({
 						// style={{ alignSelf: 'center', marginRight: 'calc(10% - 20px)' }}
 						className="explorer-show-btn"
 						onClick={handleShowExplorerOption}
-						data-testid="show-explorer-option"
 					>
 						<div className="menu-bar" />
 					</Button>

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -27,7 +27,6 @@ function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {
 				<Input
 					onChange={handleInputChange('to')}
 					placeholder={t('placeholder_email_to')}
-					data-testid="email-to-textbox"
 				/>
 			</Form.Item>
 

frontend/src/container/FormAlertChannels/Settings/MsTeams.tsx

@@ -17,7 +17,6 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 							webhook_url: event.target.value,
 						}));
 					}}
-					data-testid="webhook-url-textbox"
 				/>
 			</Form.Item>
 
@@ -31,7 +30,6 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 							title: event.target.value,
 						}))
 					}
-					data-testid="title-textarea"
 				/>
 			</Form.Item>
 
@@ -43,7 +41,6 @@ function MsTeams({ setSelectedConfig }: MsTeamsProps): JSX.Element {
 							text: event.target.value,
 						}))
 					}
-					data-testid="description-textarea"
 					placeholder={t('placeholder_slack_description')}
 				/>
 			</Form.Item>

frontend/src/container/FormAlertChannels/Settings/Opsgenie.tsx

@@ -20,10 +20,7 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 	return (
 		<>
 			<Form.Item name="api_key" label={t('field_opsgenie_api_key')} required>
-				<Input
-					onChange={handleInputChange('api_key')}
-					data-testid="opsgenie-api-key-textbox"
-				/>
+				<Input onChange={handleInputChange('api_key')} />
 			</Form.Item>
 
 			<Form.Item
@@ -36,7 +33,6 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 					rows={4}
 					onChange={handleInputChange('message')}
 					placeholder={t('placeholder_opsgenie_message')}
-					data-testid="opsgenie-message-textarea"
 				/>
 			</Form.Item>
 
@@ -50,7 +46,6 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 					rows={4}
 					onChange={handleInputChange('description')}
 					placeholder={t('placeholder_opsgenie_description')}
-					data-testid="opsgenie-description-textarea"
 				/>
 			</Form.Item>
 
@@ -64,7 +59,6 @@ function OpsgenieForm({ setSelectedConfig }: OpsgenieFormProps): JSX.Element {
 					rows={4}
 					onChange={handleInputChange('priority')}
 					placeholder={t('placeholder_opsgenie_priority')}
-					data-testid="opsgenie-priority-textarea"
 				/>
 			</Form.Item>
 		</>

frontend/src/container/FormAlertChannels/Settings/Pager.tsx

@@ -18,7 +18,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							routing_key: event.target.value,
 						}));
 					}}
-					data-testid="pager-routing-key-textbox"
 				/>
 			</Form.Item>
 
@@ -37,7 +36,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 					placeholder={t('placeholder_pager_description')}
-					data-testid="pager-description-textarea"
 				/>
 			</Form.Item>
 
@@ -53,7 +51,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							severity: event.target.value,
 						}))
 					}
-					data-testid="pager-severity-textbox"
 				/>
 			</Form.Item>
 
@@ -70,7 +67,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							details: event.target.value,
 						}))
 					}
-					data-testid="pager-additional-details-textarea"
 				/>
 			</Form.Item>
 
@@ -101,7 +97,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							group: event.target.value,
 						}))
 					}
-					data-testid="pager-group-textarea"
 				/>
 			</Form.Item>
 
@@ -117,7 +112,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							class: event.target.value,
 						}))
 					}
-					data-testid="pager-class-textarea"
 				/>
 			</Form.Item>
 			<Form.Item
@@ -132,7 +126,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							client: event.target.value,
 						}))
 					}
-					data-testid="pager-client-textarea"
 				/>
 			</Form.Item>
 
@@ -148,7 +141,6 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 							client_url: event.target.value,
 						}))
 					}
-					data-testid="pager-client-url-textarea"
 				/>
 			</Form.Item>
 		</>

frontend/src/container/FormAlertChannels/Settings/Slack.tsx

@@ -19,7 +19,6 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 							api_url: event.target.value,
 						}));
 					}}
-					data-testid="webhook-url-textbox"
 				/>
 			</Form.Item>
 
@@ -35,13 +34,11 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 							channel: event.target.value,
 						}))
 					}
-					data-testid="slack-channel-textbox"
 				/>
 			</Form.Item>
 
 			<Form.Item name="title" label={t('field_slack_title')}>
 				<TextArea
-					data-testid="title-textarea"
 					rows={4}
 					// value={`[{{ .Status | toUpper }}{{ if eq .Status \"firing\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\n{{- if gt (len .CommonLabels) (len .GroupLabels) -}}\n{{\" \"}}(\n{{- with .CommonLabels.Remove .GroupLabels.Names }}\n    {{- range $index, $label := .SortedPairs -}}\n    {{ if $index }}, {{ end }}\n    {{- $label.Name }}=\"{{ $label.Value -}}\"\n    {{- end }}\n{{- end -}}\n)\n{{- end }}`}
 					onChange={(event): void =>
@@ -62,7 +59,6 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 						}))
 					}
 					placeholder={t('placeholder_slack_description')}
-					data-testid="description-textarea"
 				/>
 			</Form.Item>
 		</>

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -17,7 +17,6 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 							api_url: event.target.value,
 						}));
 					}}
-					data-testid="webhook-url-textbox"
 				/>
 			</Form.Item>
 			<Form.Item
@@ -32,7 +31,6 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 							username: event.target.value,
 						}));
 					}}
-					data-testid="webhook-username-textbox"
 				/>
 			</Form.Item>
 			<Form.Item
@@ -48,7 +46,6 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 							password: event.target.value,
 						}));
 					}}
-					data-testid="webhook-password-textbox"
 				/>
 			</Form.Item>
 		</>

frontend/src/container/FormAlertChannels/index.tsx

@@ -85,7 +85,6 @@ function FormAlertChannels({
 			<Form initialValues={initialValue} layout="vertical" form={formInstance}>
 				<Form.Item label={t('field_channel_name')} labelAlign="left" name="name">
 					<Input
-						data-testid="channel-name-textbox"
 						disabled={editing}
 						onChange={(event): void => {
 							setSelectedConfig((state) => ({
@@ -103,7 +102,6 @@ function FormAlertChannels({
 				>
 					<Switch
 						defaultChecked={initialValue?.send_resolved}
-						data-testid="field-send-resolved-checkbox"
 						onChange={(value): void => {
 							setSelectedConfig((state) => ({
 								...state,
@@ -114,37 +112,24 @@ function FormAlertChannels({
 				</Form.Item>
 
 				<Form.Item label={t('field_channel_type')} labelAlign="left" name="type">
-					<Select
-						disabled={editing}
-						onChange={onTypeChangeHandler}
-						value={type}
-						data-testid="channel-type-select"
-					>
-						<Select.Option value="slack" key="slack" data-testid="select-option">
+					<Select disabled={editing} onChange={onTypeChangeHandler} value={type}>
+						<Select.Option value="slack" key="slack">
 							Slack
 						</Select.Option>
-						<Select.Option value="webhook" key="webhook" data-testid="select-option">
+						<Select.Option value="webhook" key="webhook">
 							Webhook
 						</Select.Option>
-						<Select.Option
-							value="pagerduty"
-							key="pagerduty"
-							data-testid="select-option"
-						>
+						<Select.Option value="pagerduty" key="pagerduty">
 							Pagerduty
 						</Select.Option>
-						<Select.Option
-							value="opsgenie"
-							key="opsgenie"
-							data-testid="select-option"
-						>
+						<Select.Option value="opsgenie" key="opsgenie">
 							Opsgenie
 						</Select.Option>
-						<Select.Option value="email" key="email" data-testid="select-option">
+						<Select.Option value="email" key="email">
 							Email
 						</Select.Option>
 						{!isOssFeature?.active && (
-							<Select.Option value="msteams" key="msteams" data-testid="select-option">
+							<Select.Option value="msteams" key="msteams">
 								<div>
 									Microsoft Teams {!isUserOnEEPlan && '(Supported in Paid Plans Only)'}{' '}
 								</div>

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -88,7 +88,7 @@ function BasicInfo({
 		if (!channels.loading && isNewRule) {
 			logEvent('Alert: New alert creation page visited', {
 				dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
-				numberOfChannels: channels?.payload?.length,
+				numberOfChannels: channels.payload?.length,
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/FormAlertRules/index.tsx

@@ -13,8 +13,8 @@ import {
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
 import logEvent from 'api/common/logEvent';
-import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
-import { alertHelpMessage } from 'components/LaunchChatSupport/util';
+import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+import { alertHelpMessage } from 'components/facingIssueBtn/util';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
@@ -712,7 +712,7 @@ function FormAlertRules({
 						>
 							Check an example alert
 						</Button>
-						<LaunchChatSupport
+						<FacingIssueBtn
 							attributes={{
 								alert: alertDef?.alert,
 								alertType: alertDef?.alertType,

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

@@ -125,9 +125,10 @@ function GridCardGraph({
 					offset: 0,
 					limit: updatedQuery.builder.queryData[0].limit || 0,
 				},
-				// we do not need select columns in case of logs
 				selectColumns:
-					initialDataSource === DataSource.TRACES && widget.selectedTracesFields,
+					initialDataSource === DataSource.LOGS
+						? widget.selectedLogFields
+						: widget.selectedTracesFields,
 			},
 			fillGaps: widget.fillSpans,
 		};

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -50,7 +50,7 @@
 	.footer {
 		display: flex;
 		flex-direction: column;
-		position: fixed;
+		position: absolute;
 		bottom: 0;
 		width: -webkit-fill-available;
 

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -194,7 +194,7 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
 			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
 			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
 			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
+			history.replace(generatedUrl);
 
 			if (startTimestamp !== endTimestamp) {
 				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));

frontend/src/container/IngestionSettings/IngestionSettings.styles.scss

@@ -940,50 +940,3 @@
 		border-color: var(--bg-vanilla-300) !important;
 	}
 }
-
-.mt-8 {
-	margin-top: 8px;
-}
-
-.mt-12 {
-	margin-top: 12px;
-}
-
-.mt-24 {
-	margin-top: 24px;
-}
-
-.mb-24 {
-	margin-bottom: 24px;
-}
-
-.ingestion-setup-details-links {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin-bottom: 24px;
-	padding: 12px;
-	border-radius: 4px;
-	background: rgba(113, 144, 249, 0.1);
-	color: var(--bg-robin-300, #95acfb);
-
-	.learn-more {
-		display: inline-flex;
-		justify-content: center;
-		align-items: center;
-		text-decoration: underline;
-
-		color: var(--bg-robin-300, #95acfb);
-	}
-}
-
-.lightMode {
-	.ingestion-setup-details-links {
-		background: rgba(113, 144, 249, 0.1);
-		color: var(--bg-robin-500);
-
-		.learn-more {
-			color: var(--bg-robin-500);
-		}
-	}
-}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -34,14 +34,11 @@ import dayjs, { Dayjs } from 'dayjs';
 import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useNotifications } from 'hooks/useNotifications';
-import { isNil } from 'lodash-es';
 import {
-	ArrowUpRight,
 	CalendarClock,
 	Check,
 	Copy,
 	Infinity,
-	Info,
 	Minus,
 	PenLine,
 	Plus,
@@ -606,250 +603,243 @@ function MultiIngestionSettings(): JSX.Element {
 
 									<div className="limits-data">
 										<div className="signals">
-											{SIGNALS.map((signal) => {
-												const hasValidDayLimit = !isNil(limits[signal]?.config?.day?.size);
-												const hasValidSecondLimit = !isNil(
-													limits[signal]?.config?.second?.size,
-												);
-
-												return (
-													<div className="signal" key={signal}>
-														<div className="header">
-															<div className="signal-name">{signal}</div>
-															<div className="actions">
-																{hasLimits(signal) ? (
-																	<>
-																		<Button
-																			className="periscope-btn ghost"
-																			icon={<PenLine size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																			onClick={(e): void => {
-																				e.stopPropagation();
-																				e.preventDefault();
-																				enableEditLimitMode(APIKey, limits[signal]);
-																			}}
-																		/>
-
-																		<Button
-																			className="periscope-btn ghost"
-																			icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
-																			disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																			onClick={(e): void => {
-																				e.stopPropagation();
-																				e.preventDefault();
-																				showDeleteLimitModal(APIKey, limits[signal]);
-																			}}
-																		/>
-																	</>
-																) : (
+											{SIGNALS.map((signal) => (
+												<div className="signal" key={signal}>
+													<div className="header">
+														<div className="signal-name">{signal}</div>
+														<div className="actions">
+															{hasLimits(signal) ? (
+																<>
 																	<Button
-																		className="periscope-btn"
-																		size="small"
-																		shape="round"
-																		icon={<PlusIcon size={14} />}
+																		className="periscope-btn ghost"
+																		icon={<PenLine size={14} />}
 																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
-																		// eslint-disable-next-line sonarjs/no-identical-functions
 																		onClick={(e): void => {
 																			e.stopPropagation();
 																			e.preventDefault();
-
-																			enableEditLimitMode(APIKey, {
-																				id: signal,
-																				signal,
-																				config: {},
-																			});
+																			enableEditLimitMode(APIKey, limits[signal]);
 																		}}
-																	>
-																		Limits
-																	</Button>
-																)}
-															</div>
-														</div>
+																	/>
 
-														<div className="signal-limit-values">
-															{activeAPIKey?.id === APIKey.id &&
-															activeSignal?.signal === signal &&
-															isEditAddLimitOpen ? (
-																<Form
-																	name="edit-ingestion-key-limit-form"
-																	key="addEditLimitForm"
-																	form={addEditLimitForm}
-																	autoComplete="off"
-																	initialValues={{
-																		dailyLimit: bytesToGb(limits[signal]?.config?.day?.size),
-																		secondsLimit: bytesToGb(limits[signal]?.config?.second?.size),
-																	}}
-																	className="edit-ingestion-key-limit-form"
-																>
-																	<div className="signal-limit-edit-mode">
-																		<div className="daily-limit">
-																			<div className="heading">
-																				<div className="title"> Daily limit </div>
-																				<div className="subtitle">
-																					Add a limit for data ingested daily{' '}
-																				</div>
-																			</div>
-
-																			<div className="size">
-																				<Form.Item name="dailyLimit">
-																					<InputNumber
-																						addonAfter={
-																							<Select defaultValue="GiB" disabled>
-																								<Option value="TiB"> TiB</Option>
-																								<Option value="GiB"> GiB</Option>
-																								<Option value="MiB"> MiB </Option>
-																								<Option value="KiB"> KiB </Option>
-																							</Select>
-																						}
-																					/>
-																				</Form.Item>
-																			</div>
-																		</div>
-
-																		<div className="second-limit">
-																			<div className="heading">
-																				<div className="title"> Per Second limit </div>
-																				<div className="subtitle">
-																					{' '}
-																					Add a limit for data ingested every second{' '}
-																				</div>
-																			</div>
-
-																			<div className="size">
-																				<Form.Item name="secondsLimit">
-																					<InputNumber
-																						addonAfter={
-																							<Select defaultValue="GiB" disabled>
-																								<Option value="TiB"> TiB</Option>
-																								<Option value="GiB"> GiB</Option>
-																								<Option value="MiB"> MiB </Option>
-																								<Option value="KiB"> KiB </Option>
-																							</Select>
-																						}
-																					/>
-																				</Form.Item>
-																			</div>
-																		</div>
-																	</div>
-
-																	{activeAPIKey?.id === APIKey.id &&
-																		activeSignal.signal === signal &&
-																		!isLoadingLimitForKey &&
-																		hasCreateLimitForIngestionKeyError &&
-																		createLimitForIngestionKeyError &&
-																		createLimitForIngestionKeyError?.error && (
-																			<div className="error">
-																				{createLimitForIngestionKeyError?.error}
-																			</div>
-																		)}
-
-																	{activeAPIKey?.id === APIKey.id &&
-																		activeSignal.signal === signal &&
-																		!isLoadingLimitForKey &&
-																		hasUpdateLimitForIngestionKeyError &&
-																		updateLimitForIngestionKeyError && (
-																			<div className="error">
-																				{updateLimitForIngestionKeyError?.error}
-																			</div>
-																		)}
-
-																	{activeAPIKey?.id === APIKey.id &&
-																		activeSignal.signal === signal &&
-																		isEditAddLimitOpen && (
-																			<div className="signal-limit-save-discard">
-																				<Button
-																					type="primary"
-																					className="periscope-btn primary"
-																					size="small"
-																					disabled={
-																						isLoadingLimitForKey || isLoadingUpdatedLimitForKey
-																					}
-																					loading={
-																						isLoadingLimitForKey || isLoadingUpdatedLimitForKey
-																					}
-																					onClick={(): void => {
-																						if (!hasLimits(signal)) {
-																							handleAddLimit(APIKey, signal);
-																						} else {
-																							handleUpdateLimit(APIKey, limits[signal]);
-																						}
-																					}}
-																				>
-																					Save
-																				</Button>
-																				<Button
-																					type="default"
-																					className="periscope-btn"
-																					size="small"
-																					disabled={
-																						isLoadingLimitForKey || isLoadingUpdatedLimitForKey
-																					}
-																					onClick={handleDiscardSaveLimit}
-																				>
-																					Discard
-																				</Button>
-																			</div>
-																		)}
-																</Form>
+																	<Button
+																		className="periscope-btn ghost"
+																		icon={<Trash2 color={Color.BG_CHERRY_500} size={14} />}
+																		disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																		onClick={(e): void => {
+																			e.stopPropagation();
+																			e.preventDefault();
+																			showDeleteLimitModal(APIKey, limits[signal]);
+																		}}
+																	/>
+																</>
 															) : (
-																<div className="signal-limit-view-mode">
-																	<div className="signal-limit-value">
-																		<div className="limit-type">
-																			Daily <Minus size={16} />{' '}
-																		</div>
+																<Button
+																	className="periscope-btn"
+																	size="small"
+																	shape="round"
+																	icon={<PlusIcon size={14} />}
+																	disabled={!!(activeAPIKey?.id === APIKey.id && activeSignal)}
+																	// eslint-disable-next-line sonarjs/no-identical-functions
+																	onClick={(e): void => {
+																		e.stopPropagation();
+																		e.preventDefault();
 
-																		<div className="limit-value">
-																			{hasValidDayLimit ? (
-																				<>
-																					{getYAxisFormattedValue(
-																						(limits[signal]?.metric?.day?.size || 0).toString(),
-																						'bytes',
-																					)}{' '}
-																					/{' '}
-																					{getYAxisFormattedValue(
-																						(limits[signal]?.config?.day?.size || 0).toString(),
-																						'bytes',
-																					)}
-																				</>
-																			) : (
-																				<>
-																					<Infinity size={16} /> NO LIMIT
-																				</>
-																			)}
-																		</div>
-																	</div>
-
-																	<div className="signal-limit-value">
-																		<div className="limit-type">
-																			Seconds <Minus size={16} />
-																		</div>
-
-																		<div className="limit-value">
-																			{hasValidSecondLimit ? (
-																				<>
-																					{getYAxisFormattedValue(
-																						(limits[signal]?.metric?.second?.size || 0).toString(),
-																						'bytes',
-																					)}{' '}
-																					/{' '}
-																					{getYAxisFormattedValue(
-																						(limits[signal]?.config?.second?.size || 0).toString(),
-																						'bytes',
-																					)}
-																				</>
-																			) : (
-																				<>
-																					<Infinity size={16} /> NO LIMIT
-																				</>
-																			)}
-																		</div>
-																	</div>
-																</div>
+																		enableEditLimitMode(APIKey, {
+																			id: signal,
+																			signal,
+																			config: {},
+																		});
+																	}}
+																>
+																	Limits
+																</Button>
 															)}
 														</div>
 													</div>
-												);
-											})}
+
+													<div className="signal-limit-values">
+														{activeAPIKey?.id === APIKey.id &&
+														activeSignal?.signal === signal &&
+														isEditAddLimitOpen ? (
+															<Form
+																name="edit-ingestion-key-limit-form"
+																key="addEditLimitForm"
+																form={addEditLimitForm}
+																autoComplete="off"
+																initialValues={{
+																	dailyLimit: bytesToGb(limits[signal]?.config?.day?.size),
+																	secondsLimit: bytesToGb(limits[signal]?.config?.second?.size),
+																}}
+																className="edit-ingestion-key-limit-form"
+															>
+																<div className="signal-limit-edit-mode">
+																	<div className="daily-limit">
+																		<div className="heading">
+																			<div className="title"> Daily limit </div>
+																			<div className="subtitle">
+																				Add a limit for data ingested daily{' '}
+																			</div>
+																		</div>
+
+																		<div className="size">
+																			<Form.Item name="dailyLimit">
+																				<InputNumber
+																					addonAfter={
+																						<Select defaultValue="GiB" disabled>
+																							<Option value="TiB"> TiB</Option>
+																							<Option value="GiB"> GiB</Option>
+																							<Option value="MiB"> MiB </Option>
+																							<Option value="KiB"> KiB </Option>
+																						</Select>
+																					}
+																				/>
+																			</Form.Item>
+																		</div>
+																	</div>
+
+																	<div className="second-limit">
+																		<div className="heading">
+																			<div className="title"> Per Second limit </div>
+																			<div className="subtitle">
+																				{' '}
+																				Add a limit for data ingested every second{' '}
+																			</div>
+																		</div>
+
+																		<div className="size">
+																			<Form.Item name="secondsLimit">
+																				<InputNumber
+																					addonAfter={
+																						<Select defaultValue="GiB" disabled>
+																							<Option value="TiB"> TiB</Option>
+																							<Option value="GiB"> GiB</Option>
+																							<Option value="MiB"> MiB </Option>
+																							<Option value="KiB"> KiB </Option>
+																						</Select>
+																					}
+																				/>
+																			</Form.Item>
+																		</div>
+																	</div>
+																</div>
+
+																{activeAPIKey?.id === APIKey.id &&
+																	activeSignal.signal === signal &&
+																	!isLoadingLimitForKey &&
+																	hasCreateLimitForIngestionKeyError &&
+																	createLimitForIngestionKeyError &&
+																	createLimitForIngestionKeyError?.error && (
+																		<div className="error">
+																			{createLimitForIngestionKeyError?.error}
+																		</div>
+																	)}
+
+																{activeAPIKey?.id === APIKey.id &&
+																	activeSignal.signal === signal &&
+																	!isLoadingLimitForKey &&
+																	hasUpdateLimitForIngestionKeyError &&
+																	updateLimitForIngestionKeyError && (
+																		<div className="error">
+																			{updateLimitForIngestionKeyError?.error}
+																		</div>
+																	)}
+
+																{activeAPIKey?.id === APIKey.id &&
+																	activeSignal.signal === signal &&
+																	isEditAddLimitOpen && (
+																		<div className="signal-limit-save-discard">
+																			<Button
+																				type="primary"
+																				className="periscope-btn primary"
+																				size="small"
+																				disabled={
+																					isLoadingLimitForKey || isLoadingUpdatedLimitForKey
+																				}
+																				loading={
+																					isLoadingLimitForKey || isLoadingUpdatedLimitForKey
+																				}
+																				onClick={(): void => {
+																					if (!hasLimits(signal)) {
+																						handleAddLimit(APIKey, signal);
+																					} else {
+																						handleUpdateLimit(APIKey, limits[signal]);
+																					}
+																				}}
+																			>
+																				Save
+																			</Button>
+																			<Button
+																				type="default"
+																				className="periscope-btn"
+																				size="small"
+																				disabled={
+																					isLoadingLimitForKey || isLoadingUpdatedLimitForKey
+																				}
+																				onClick={handleDiscardSaveLimit}
+																			>
+																				Discard
+																			</Button>
+																		</div>
+																	)}
+															</Form>
+														) : (
+															<div className="signal-limit-view-mode">
+																<div className="signal-limit-value">
+																	<div className="limit-type">
+																		Daily <Minus size={16} />{' '}
+																	</div>
+
+																	<div className="limit-value">
+																		{limits[signal]?.config?.day?.size ? (
+																			<>
+																				{getYAxisFormattedValue(
+																					(limits[signal]?.metric?.day?.size || 0).toString(),
+																					'bytes',
+																				)}{' '}
+																				/{' '}
+																				{getYAxisFormattedValue(
+																					(limits[signal]?.config?.day?.size || 0).toString(),
+																					'bytes',
+																				)}
+																			</>
+																		) : (
+																			<>
+																				<Infinity size={16} /> NO LIMIT
+																			</>
+																		)}
+																	</div>
+																</div>
+
+																<div className="signal-limit-value">
+																	<div className="limit-type">
+																		Seconds <Minus size={16} />
+																	</div>
+
+																	<div className="limit-value">
+																		{limits[signal]?.config?.second?.size ? (
+																			<>
+																				{getYAxisFormattedValue(
+																					(limits[signal]?.metric?.second?.size || 0).toString(),
+																					'bytes',
+																				)}{' '}
+																				/{' '}
+																				{getYAxisFormattedValue(
+																					(limits[signal]?.config?.second?.size || 0).toString(),
+																					'bytes',
+																				)}
+																			</>
+																		) : (
+																			<>
+																				<Infinity size={16} /> NO LIMIT
+																			</>
+																		)}
+																	</div>
+																</div>
+															</div>
+														)}
+													</div>
+												</div>
+											))}
 										</div>
 									</div>
 								</div>
@@ -885,35 +875,10 @@ function MultiIngestionSettings(): JSX.Element {
 	return (
 		<div className="ingestion-key-container">
 			<div className="ingestion-key-content">
-				<div className="ingestion-setup-details-links">
-					<Info size={14} />
-
-					<span>
-						Find your ingestion URL and learn more about sending data to SigNoz{' '}
-						<a
-							href="https://signoz.io/docs/ingestion/signoz-cloud/overview/"
-							target="_blank"
-							className="learn-more"
-							rel="noreferrer"
-						>
-							here <ArrowUpRight size={14} />
-						</a>
-					</span>
-				</div>
-
 				<header>
 					<Typography.Title className="title"> Ingestion Keys </Typography.Title>
 					<Typography.Text className="subtitle">
-						Create and manage ingestion keys for the SigNoz Cloud{' '}
-						<a
-							href="https://signoz.io/docs/ingestion/signoz-cloud/keys/"
-							target="_blank"
-							className="learn-more"
-							rel="noreferrer"
-						>
-							{' '}
-							Learn more <ArrowUpRight size={14} />
-						</a>
+						Create and manage ingestion keys for the SigNoz Cloud
 					</Typography.Text>
 				</header>
 

frontend/src/container/IngestionSettings/__tests__/MultiIngestionSettings.test.tsx

@@ -1,45 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import MultiIngestionSettings from '../MultiIngestionSettings';
-
-describe('MultiIngestionSettings Page', () => {
-	beforeEach(() => {
-		render(<MultiIngestionSettings />);
-	});
-
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders MultiIngestionSettings page without crashing', () => {
-		expect(
-			screen.getByText(
-				'Find your ingestion URL and learn more about sending data to SigNoz',
-			),
-		).toBeInTheDocument();
-
-		expect(screen.getByText('Ingestion Keys')).toBeInTheDocument();
-
-		expect(
-			screen.getByText('Create and manage ingestion keys for the SigNoz Cloud'),
-		).toBeInTheDocument();
-
-		const overviewLink = screen.getByRole('link', { name: /here/i });
-		expect(overviewLink).toHaveAttribute(
-			'href',
-			'https://signoz.io/docs/ingestion/signoz-cloud/overview/',
-		);
-		expect(overviewLink).toHaveAttribute('target', '_blank');
-		expect(overviewLink).toHaveClass('learn-more');
-		expect(overviewLink).toHaveAttribute('rel', 'noreferrer');
-
-		const aboutKeyslink = screen.getByRole('link', { name: /Learn more/i });
-		expect(aboutKeyslink).toHaveAttribute(
-			'href',
-			'https://signoz.io/docs/ingestion/signoz-cloud/keys/',
-		);
-		expect(aboutKeyslink).toHaveAttribute('target', '_blank');
-		expect(aboutKeyslink).toHaveClass('learn-more');
-		expect(aboutKeyslink).toHaveAttribute('rel', 'noreferrer');
-	});
-});