chore: merged latest develop

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

@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.39.0
+    image: signoz/query-service:0.42.0
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.39.0
+    image: signoz/frontend:0.42.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.88.12
+    image: signoz/signoz-otel-collector:0.88.17
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.12
+      image: signoz/signoz-schema-migrator:0.88.17
       deploy:
         restart_policy:
           condition: on-failure

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

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

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.39.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.42.0}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.39.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.42.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -215,7 +215,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.17}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.12}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.17}
     container_name: signoz-otel-collector
     command:
       [

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

@@ -74,7 +74,7 @@ func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 	defer r.Body.Close()
 	requestBody, err := io.ReadAll(r.Body)
 	if err != nil {
-		zap.S().Errorf("received no input in api\n", err)
+		zap.L().Error("received no input in api", zap.Error(err))
 		RespondError(w, model.BadRequest(err), nil)
 		return
 	}
@@ -82,7 +82,7 @@ func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 	err = json.Unmarshal(requestBody, &req)
 
 	if err != nil {
-		zap.S().Errorf("received invalid user registration request", zap.Error(err))
+		zap.L().Error("received invalid user registration request", zap.Error(err))
 		RespondError(w, model.BadRequest(fmt.Errorf("failed to register user")), nil)
 		return
 	}
@@ -90,13 +90,13 @@ func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 	// get invite object
 	invite, err := baseauth.ValidateInvite(ctx, req)
 	if err != nil {
-		zap.S().Errorf("failed to validate invite token", err)
+		zap.L().Error("failed to validate invite token", zap.Error(err))
 		RespondError(w, model.BadRequest(err), nil)
 		return
 	}
 
 	if invite == nil {
-		zap.S().Errorf("failed to validate invite token: it is either empty or invalid", err)
+		zap.L().Error("failed to validate invite token: it is either empty or invalid", zap.Error(err))
 		RespondError(w, model.BadRequest(basemodel.ErrSignupFailed{}), nil)
 		return
 	}
@@ -104,7 +104,7 @@ func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 	// get auth domain from email domain
 	domain, apierr := ah.AppDao().GetDomainByEmail(ctx, invite.Email)
 	if apierr != nil {
-		zap.S().Errorf("failed to get domain from email", apierr)
+		zap.L().Error("failed to get domain from email", zap.Error(apierr))
 		RespondError(w, model.InternalError(basemodel.ErrSignupFailed{}), nil)
 	}
 
@@ -205,24 +205,24 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 	ctx := context.Background()
 
 	if !ah.CheckFeature(model.SSO) {
-		zap.S().Errorf("[receiveGoogleAuth] sso requested but feature unavailable %s in org domain %s", model.SSO)
+		zap.L().Error("[receiveGoogleAuth] sso requested but feature unavailable in org domain")
 		http.Redirect(w, r, fmt.Sprintf("%s?ssoerror=%s", redirectUri, "feature unavailable, please upgrade your billing plan to access this feature"), http.StatusMovedPermanently)
 		return
 	}
 
 	q := r.URL.Query()
 	if errType := q.Get("error"); errType != "" {
-		zap.S().Errorf("[receiveGoogleAuth] failed to login with google auth", q.Get("error_description"))
+		zap.L().Error("[receiveGoogleAuth] failed to login with google auth", zap.String("error", errType), zap.String("error_description", q.Get("error_description")))
 		http.Redirect(w, r, fmt.Sprintf("%s?ssoerror=%s", redirectUri, "failed to login through SSO "), http.StatusMovedPermanently)
 		return
 	}
 
 	relayState := q.Get("state")
-	zap.S().Debug("[receiveGoogleAuth] relay state received", zap.String("state", relayState))
+	zap.L().Debug("[receiveGoogleAuth] relay state received", zap.String("state", relayState))
 
 	parsedState, err := url.Parse(relayState)
 	if err != nil || relayState == "" {
-		zap.S().Errorf("[receiveGoogleAuth] failed to process response - invalid response from IDP", err, r)
+		zap.L().Error("[receiveGoogleAuth] failed to process response - invalid response from IDP", zap.Error(err), zap.Any("request", r))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
@@ -244,14 +244,14 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 
 	identity, err := callbackHandler.HandleCallback(r)
 	if err != nil {
-		zap.S().Errorf("[receiveGoogleAuth] failed to process HandleCallback ", domain.String(), zap.Error(err))
+		zap.L().Error("[receiveGoogleAuth] failed to process HandleCallback ", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
 
 	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, identity.Email)
 	if err != nil {
-		zap.S().Errorf("[receiveGoogleAuth] failed to generate redirect URI after successful login ", domain.String(), zap.Error(err))
+		zap.L().Error("[receiveGoogleAuth] failed to generate redirect URI after successful login ", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
@@ -266,14 +266,14 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 	ctx := context.Background()
 
 	if !ah.CheckFeature(model.SSO) {
-		zap.S().Errorf("[receiveSAML] sso requested but feature unavailable %s in org domain %s", model.SSO)
+		zap.L().Error("[receiveSAML] sso requested but feature unavailable in org domain")
 		http.Redirect(w, r, fmt.Sprintf("%s?ssoerror=%s", redirectUri, "feature unavailable, please upgrade your billing plan to access this feature"), http.StatusMovedPermanently)
 		return
 	}
 
 	err := r.ParseForm()
 	if err != nil {
-		zap.S().Errorf("[receiveSAML] failed to process response - invalid response from IDP", err, r)
+		zap.L().Error("[receiveSAML] failed to process response - invalid response from IDP", zap.Error(err), zap.Any("request", r))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
@@ -281,11 +281,11 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 	// the relay state is sent when a login request is submitted to
 	// Idp.
 	relayState := r.FormValue("RelayState")
-	zap.S().Debug("[receiveML] relay state", zap.String("relayState", relayState))
+	zap.L().Debug("[receiveML] relay state", zap.String("relayState", relayState))
 
 	parsedState, err := url.Parse(relayState)
 	if err != nil || relayState == "" {
-		zap.S().Errorf("[receiveSAML] failed to process response - invalid response from IDP", err, r)
+		zap.L().Error("[receiveSAML] failed to process response - invalid response from IDP", zap.Error(err), zap.Any("request", r))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
@@ -302,34 +302,34 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 
 	sp, err := domain.PrepareSamlRequest(parsedState)
 	if err != nil {
-		zap.S().Errorf("[receiveSAML] failed to prepare saml request for domain (%s): %v", domain.String(), err)
+		zap.L().Error("[receiveSAML] failed to prepare saml request for domain", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
 
 	assertionInfo, err := sp.RetrieveAssertionInfo(r.FormValue("SAMLResponse"))
 	if err != nil {
-		zap.S().Errorf("[receiveSAML] failed to retrieve assertion info from  saml response for organization (%s): %v", domain.String(), err)
+		zap.L().Error("[receiveSAML] failed to retrieve assertion info from  saml response", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
 
 	if assertionInfo.WarningInfo.InvalidTime {
-		zap.S().Errorf("[receiveSAML] expired saml response for organization (%s): %v", domain.String(), err)
+		zap.L().Error("[receiveSAML] expired saml response", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
 
 	email := assertionInfo.NameID
 	if email == "" {
-		zap.S().Errorf("[receiveSAML] invalid email in the SSO response (%s)", domain.String())
+		zap.L().Error("[receiveSAML] invalid email in the SSO response", zap.String("domain", domain.String()))
 		handleSsoError(w, r, redirectUri)
 		return
 	}
 
 	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, email)
 	if err != nil {
-		zap.S().Errorf("[receiveSAML] failed to generate redirect URI after successful login ", domain.String(), zap.Error(err))
+		zap.L().Error("[receiveSAML] failed to generate redirect URI after successful login ", zap.String("domain", domain.String()), zap.Error(err))
 		handleSsoError(w, r, redirectUri)
 		return
 	}

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

@@ -191,7 +191,7 @@ func (ah *APIHandler) listLicensesV2(w http.ResponseWriter, r *http.Request) {
 	url := fmt.Sprintf("%s/trial?licenseKey=%s", constants.LicenseSignozIo, currentActiveLicenseKey)
 	req, err := http.NewRequest("GET", url, nil)
 	if err != nil {
-		zap.S().Error("Error while creating request for trial details", err)
+		zap.L().Error("Error while creating request for trial details", zap.Error(err))
 		// If there is an error in fetching trial details, we will still return the license details
 		// to avoid blocking the UI
 		ah.Respond(w, resp)
@@ -200,7 +200,7 @@ func (ah *APIHandler) listLicensesV2(w http.ResponseWriter, r *http.Request) {
 	req.Header.Add("X-SigNoz-SecretKey", constants.LicenseAPIKey)
 	trialResp, err := hClient.Do(req)
 	if err != nil {
-		zap.S().Error("Error while fetching trial details", err)
+		zap.L().Error("Error while fetching trial details", zap.Error(err))
 		// If there is an error in fetching trial details, we will still return the license details
 		// to avoid incorrectly blocking the UI
 		ah.Respond(w, resp)
@@ -211,7 +211,7 @@ func (ah *APIHandler) listLicensesV2(w http.ResponseWriter, r *http.Request) {
 	trialRespBody, err := io.ReadAll(trialResp.Body)
 
 	if err != nil || trialResp.StatusCode != http.StatusOK {
-		zap.S().Error("Error while fetching trial details", err)
+		zap.L().Error("Error while fetching trial details", zap.Error(err))
 		// If there is an error in fetching trial details, we will still return the license details
 		// to avoid incorrectly blocking the UI
 		ah.Respond(w, resp)
@@ -222,7 +222,7 @@ func (ah *APIHandler) listLicensesV2(w http.ResponseWriter, r *http.Request) {
 	var trialRespData model.SubscriptionServerResp
 
 	if err := json.Unmarshal(trialRespBody, &trialRespData); err != nil {
-		zap.S().Error("Error while decoding trial details", err)
+		zap.L().Error("Error while decoding trial details", zap.Error(err))
 		// If there is an error in fetching trial details, we will still return the license details
 		// to avoid incorrectly blocking the UI
 		ah.Respond(w, resp)

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

@@ -18,14 +18,14 @@ import (
 
 func (ah *APIHandler) queryRangeMetricsV2(w http.ResponseWriter, r *http.Request) {
 	if !ah.CheckFeature(basemodel.CustomMetricsFunction) {
-		zap.S().Info("CustomMetricsFunction feature is not enabled in this plan")
+		zap.L().Info("CustomMetricsFunction feature is not enabled in this plan")
 		ah.APIHandler.QueryRangeMetricsV2(w, r)
 		return
 	}
 	metricsQueryRangeParams, apiErrorObj := parser.ParseMetricQueryRangeParams(r)
 
 	if apiErrorObj != nil {
-		zap.S().Errorf(apiErrorObj.Err.Error())
+		zap.L().Error("Error in parsing metric query params", zap.Error(apiErrorObj.Err))
 		RespondError(w, apiErrorObj, nil)
 		return
 	}

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

@@ -43,8 +43,8 @@ func (ah *APIHandler) createPAT(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	pat := model.PAT{
-		Name: 	req.Name,
+		Name:      req.Name,
-		Role: 	req.Role,
+		Role:      req.Role,
 		ExpiresAt: req.ExpiresInDays,
 	}
 	err = validatePATRequest(pat)
@@ -65,7 +65,7 @@ func (ah *APIHandler) createPAT(w http.ResponseWriter, r *http.Request) {
 		pat.ExpiresAt = time.Now().Unix() + (pat.ExpiresAt * 24 * 60 * 60)
 	}
 
-	zap.S().Debugf("Got Create PAT request: %+v", pat)
+	zap.L().Info("Got Create PAT request", zap.Any("pat", pat))
 	var apierr basemodel.BaseApiError
 	if pat, apierr = ah.AppDao().CreatePAT(ctx, pat); apierr != nil {
 		RespondError(w, apierr, nil)
@@ -115,7 +115,7 @@ func (ah *APIHandler) updatePAT(w http.ResponseWriter, r *http.Request) {
 	req.UpdatedByUserID = user.Id
 	id := mux.Vars(r)["id"]
 	req.UpdatedAt = time.Now().Unix()
-	zap.S().Debugf("Got Update PAT request: %+v", req)
+	zap.L().Info("Got Update PAT request", zap.Any("pat", req))
 	var apierr basemodel.BaseApiError
 	if apierr = ah.AppDao().UpdatePAT(ctx, req, id); apierr != nil {
 		RespondError(w, apierr, nil)
@@ -135,7 +135,7 @@ func (ah *APIHandler) getPATs(w http.ResponseWriter, r *http.Request) {
 		}, nil)
 		return
 	}
-	zap.S().Infof("Get PATs for user: %+v", user.Id)
+	zap.L().Info("Get PATs for user", zap.String("user_id", user.Id))
 	pats, apierr := ah.AppDao().ListPATs(ctx)
 	if apierr != nil {
 		RespondError(w, apierr, nil)
@@ -156,7 +156,7 @@ func (ah *APIHandler) revokePAT(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	zap.S().Debugf("Revoke PAT with id: %+v", id)
+	zap.L().Info("Revoke PAT with id", zap.String("id", id))
 	if apierr := ah.AppDao().RevokePAT(ctx, id, user.Id); apierr != nil {
 		RespondError(w, apierr, nil)
 		return

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

@@ -15,7 +15,7 @@ import (
 func (ah *APIHandler) searchTraces(w http.ResponseWriter, r *http.Request) {
 
 	if !ah.CheckFeature(basemodel.SmartTraceDetail) {
-		zap.S().Info("SmartTraceDetail feature is not enabled in this plan")
+		zap.L().Info("SmartTraceDetail feature is not enabled in this plan")
 		ah.APIHandler.SearchTraces(w, r)
 		return
 	}
@@ -26,7 +26,7 @@ func (ah *APIHandler) searchTraces(w http.ResponseWriter, r *http.Request) {
 	}
 	spanLimit, err := strconv.Atoi(constants.SpanLimitStr)
 	if err != nil {
-		zap.S().Error("Error during strconv.Atoi() on SPAN_LIMIT env variable: ", err)
+		zap.L().Error("Error during strconv.Atoi() on SPAN_LIMIT env variable", zap.Error(err))
 		return
 	}
 	result, err := ah.opts.DataConnector.SearchTraces(r.Context(), traceId, spanId, levelUpInt, levelDownInt, spanLimit, db.SmartTraceAlgorithm)

ee/query-service/app/db/metrics.go

@@ -22,7 +22,7 @@ import (
 func (r *ClickhouseReader) GetMetricResultEE(ctx context.Context, query string) ([]*basemodel.Series, string, error) {
 
 	defer utils.Elapsed("GetMetricResult")()
-	zap.S().Infof("Executing metric result query: %s", query)
+	zap.L().Info("Executing metric result query: ", zap.String("query", query))
 
 	var hash string
 	// If getSubTreeSpans function is used in the clickhouse query
@@ -38,9 +38,8 @@ func (r *ClickhouseReader) GetMetricResultEE(ctx context.Context, query string)
 	}
 
 	rows, err := r.conn.Query(ctx, query)
-	zap.S().Debug(query)
 	if err != nil {
-		zap.S().Debug("Error in processing query: ", err)
+		zap.L().Error("Error in processing query", zap.Error(err))
 		return nil, "", fmt.Errorf("error in processing query")
 	}
 
@@ -117,7 +116,7 @@ func (r *ClickhouseReader) GetMetricResultEE(ctx context.Context, query string)
 					groupAttributes[colName] = fmt.Sprintf("%v", reflect.ValueOf(v).Elem().Int())
 				}
 			default:
-				zap.S().Errorf("invalid var found in metric builder query result", v, colName)
+				zap.L().Error("invalid var found in metric builder query result", zap.Any("var", v), zap.String("colName", colName))
 			}
 		}
 		sort.Strings(groupBy)
@@ -140,7 +139,7 @@ func (r *ClickhouseReader) GetMetricResultEE(ctx context.Context, query string)
 	}
 	// err = r.conn.Exec(ctx, "DROP TEMPORARY TABLE IF EXISTS getSubTreeSpans"+hash)
 	// if err != nil {
-	// 	zap.S().Error("Error in dropping temporary table: ", err)
+	// 	zap.L().Error("Error in dropping temporary table: ", err)
 	// 	return nil, err
 	// }
 	if hash == "" {
@@ -152,7 +151,7 @@ func (r *ClickhouseReader) GetMetricResultEE(ctx context.Context, query string)
 
 func (r *ClickhouseReader) getSubTreeSpansCustomFunction(ctx context.Context, query string, hash string) (string, string, error) {
 
-	zap.S().Debugf("Executing getSubTreeSpans function")
+	zap.L().Debug("Executing getSubTreeSpans function")
 
 	// str1 := `select fromUnixTimestamp64Milli(intDiv( toUnixTimestamp64Milli ( timestamp ), 100) * 100) AS interval, toFloat64(count()) as count from (select timestamp, spanId, parentSpanId, durationNano from getSubTreeSpans(select * from signoz_traces.signoz_index_v2 where serviceName='frontend' and name='/driver.DriverService/FindNearest' and  traceID='00000000000000004b0a863cb5ed7681') where name='FindDriverIDs' group by interval order by interval asc;`
 
@@ -162,28 +161,28 @@ func (r *ClickhouseReader) getSubTreeSpansCustomFunction(ctx context.Context, qu
 
 	err := r.conn.Exec(ctx, "DROP TABLE IF EXISTS getSubTreeSpans"+hash)
 	if err != nil {
-		zap.S().Error("Error in dropping temporary table: ", err)
+		zap.L().Error("Error in dropping temporary table", zap.Error(err))
 		return query, hash, err
 	}
 
 	// Create temporary table to store the getSubTreeSpans() results
-	zap.S().Debugf("Creating temporary table getSubTreeSpans%s", hash)
+	zap.L().Debug("Creating temporary table getSubTreeSpans", zap.String("hash", hash))
 	err = r.conn.Exec(ctx, "CREATE TABLE IF NOT EXISTS "+"getSubTreeSpans"+hash+" (timestamp DateTime64(9) CODEC(DoubleDelta, LZ4), traceID FixedString(32) CODEC(ZSTD(1)), spanID String CODEC(ZSTD(1)), parentSpanID String CODEC(ZSTD(1)), rootSpanID String CODEC(ZSTD(1)), serviceName LowCardinality(String) CODEC(ZSTD(1)), name LowCardinality(String) CODEC(ZSTD(1)), rootName LowCardinality(String) CODEC(ZSTD(1)), durationNano UInt64 CODEC(T64, ZSTD(1)), kind Int8 CODEC(T64, ZSTD(1)), tagMap Map(LowCardinality(String), String) CODEC(ZSTD(1)), events Array(String) CODEC(ZSTD(2))) ENGINE = MergeTree() ORDER BY (timestamp)")
 	if err != nil {
-		zap.S().Error("Error in creating temporary table: ", err)
+		zap.L().Error("Error in creating temporary table", zap.Error(err))
 		return query, hash, err
 	}
 
 	var getSpansSubQueryDBResponses []model.GetSpansSubQueryDBResponse
 	getSpansSubQuery := subtreeInput
 	// Execute the subTree query
-	zap.S().Debugf("Executing subTree query: %s", getSpansSubQuery)
+	zap.L().Debug("Executing subTree query", zap.String("query", getSpansSubQuery))
 	err = r.conn.Select(ctx, &getSpansSubQueryDBResponses, getSpansSubQuery)
 
-	// zap.S().Info(getSpansSubQuery)
+	// zap.L().Info(getSpansSubQuery)
 
 	if err != nil {
-		zap.S().Debug("Error in processing sql query: ", err)
+		zap.L().Error("Error in processing sql query", zap.Error(err))
 		return query, hash, fmt.Errorf("Error in processing sql query")
 	}
 
@@ -196,16 +195,16 @@ func (r *ClickhouseReader) getSubTreeSpansCustomFunction(ctx context.Context, qu
 	if len(getSpansSubQueryDBResponses) == 0 {
 		return query, hash, fmt.Errorf("No spans found for the given query")
 	}
-	zap.S().Debugf("Executing query to fetch all the spans from the same TraceID: %s", modelQuery)
+	zap.L().Debug("Executing query to fetch all the spans from the same TraceID: ", zap.String("modelQuery", modelQuery))
 	err = r.conn.Select(ctx, &searchScanResponses, modelQuery, getSpansSubQueryDBResponses[0].TraceID)
 
 	if err != nil {
-		zap.S().Debug("Error in processing sql query: ", err)
+		zap.L().Error("Error in processing sql query", zap.Error(err))
 		return query, hash, fmt.Errorf("Error in processing sql query")
 	}
 
 	// Process model to fetch the spans
-	zap.S().Debugf("Processing model to fetch the spans")
+	zap.L().Debug("Processing model to fetch the spans")
 	searchSpanResponses := []basemodel.SearchSpanResponseItem{}
 	for _, item := range searchScanResponses {
 		var jsonItem basemodel.SearchSpanResponseItem
@@ -218,17 +217,17 @@ func (r *ClickhouseReader) getSubTreeSpansCustomFunction(ctx context.Context, qu
 	}
 	// Build the subtree and store all the subtree spans in temporary table getSubTreeSpans+hash
 	// Use map to store pointer to the spans to avoid duplicates and save memory
-	zap.S().Debugf("Building the subtree to store all the subtree spans in temporary table getSubTreeSpans%s", hash)
+	zap.L().Debug("Building the subtree to store all the subtree spans in temporary table getSubTreeSpans", zap.String("hash", hash))
 
 	treeSearchResponse, err := getSubTreeAlgorithm(searchSpanResponses, getSpansSubQueryDBResponses)
 	if err != nil {
-		zap.S().Error("Error in getSubTreeAlgorithm function: ", err)
+		zap.L().Error("Error in getSubTreeAlgorithm function", zap.Error(err))
 		return query, hash, err
 	}
-	zap.S().Debugf("Preparing batch to store subtree spans in temporary table getSubTreeSpans%s", hash)
+	zap.L().Debug("Preparing batch to store subtree spans in temporary table getSubTreeSpans", zap.String("hash", hash))
 	statement, err := r.conn.PrepareBatch(context.Background(), fmt.Sprintf("INSERT INTO getSubTreeSpans"+hash))
 	if err != nil {
-		zap.S().Error("Error in preparing batch statement: ", err)
+		zap.L().Error("Error in preparing batch statement", zap.Error(err))
 		return query, hash, err
 	}
 	for _, span := range treeSearchResponse {
@@ -251,14 +250,14 @@ func (r *ClickhouseReader) getSubTreeSpansCustomFunction(ctx context.Context, qu
 			span.Events,
 		)
 		if err != nil {
-			zap.S().Debug("Error in processing sql query: ", err)
+			zap.L().Error("Error in processing sql query", zap.Error(err))
 			return query, hash, err
 		}
 	}
-	zap.S().Debugf("Inserting the subtree spans in temporary table getSubTreeSpans%s", hash)
+	zap.L().Debug("Inserting the subtree spans in temporary table getSubTreeSpans", zap.String("hash", hash))
 	err = statement.Send()
 	if err != nil {
-		zap.S().Error("Error in sending statement: ", err)
+		zap.L().Error("Error in sending statement", zap.Error(err))
 		return query, hash, err
 	}
 	return query, hash, nil
@@ -323,7 +322,7 @@ func getSubTreeAlgorithm(payload []basemodel.SearchSpanResponseItem, getSpansSub
 		spans = append(spans, span)
 	}
 
-	zap.S().Debug("Building Tree")
+	zap.L().Debug("Building Tree")
 	roots, err := buildSpanTrees(&spans)
 	if err != nil {
 		return nil, err
@@ -333,7 +332,7 @@ func getSubTreeAlgorithm(payload []basemodel.SearchSpanResponseItem, getSpansSub
 	// For each root, get the subtree spans
 	for _, getSpansSubQueryDBResponse := range getSpansSubQueryDBResponses {
 		targetSpan := &model.SpanForTraceDetails{}
-		// zap.S().Debug("Building tree for span id: " + getSpansSubQueryDBResponse.SpanID + " " + strconv.Itoa(i+1) + " of " + strconv.Itoa(len(getSpansSubQueryDBResponses)))
+		// zap.L().Debug("Building tree for span id: " + getSpansSubQueryDBResponse.SpanID + " " + strconv.Itoa(i+1) + " of " + strconv.Itoa(len(getSpansSubQueryDBResponses)))
 		// Search target span object in the tree
 		for _, root := range roots {
 			targetSpan, err = breadthFirstSearch(root, getSpansSubQueryDBResponse.SpanID)
@@ -341,7 +340,7 @@ func getSubTreeAlgorithm(payload []basemodel.SearchSpanResponseItem, getSpansSub
 				break
 			}
 			if err != nil {
-				zap.S().Error("Error during BreadthFirstSearch(): ", err)
+				zap.L().Error("Error during BreadthFirstSearch()", zap.Error(err))
 				return nil, err
 			}
 		}

ee/query-service/app/db/trace.go

@@ -49,7 +49,7 @@ func SmartTraceAlgorithm(payload []basemodel.SearchSpanResponseItem, targetSpanI
 			break
 		}
 		if err != nil {
-			zap.S().Error("Error during BreadthFirstSearch(): ", err)
+			zap.L().Error("Error during BreadthFirstSearch()", zap.Error(err))
 			return nil, err
 		}
 	}
@@ -186,7 +186,7 @@ func buildSpanTrees(spansPtr *[]*model.SpanForTraceDetails) ([]*model.SpanForTra
 
 		// If the parent span is not found, add current span to list of roots
 		if parent == nil {
-			// zap.S().Debug("Parent Span not found parent_id: ", span.ParentID)
+			// zap.L().Debug("Parent Span not found parent_id: ", span.ParentID)
 			roots = append(roots, span)
 			span.ParentID = ""
 			continue

ee/query-service/app/server.go

@@ -134,7 +134,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	var reader interfaces.DataConnector
 	storage := os.Getenv("STORAGE")
 	if storage == "clickhouse" {
-		zap.S().Info("Using ClickHouse as datastore ...")
+		zap.L().Info("Using ClickHouse as datastore ...")
 		qb := db.NewDataConnector(
 			localDB,
 			serverOptions.PromConfigPath,
@@ -419,30 +419,33 @@ func extractQueryRangeV3Data(path string, r *http.Request) (map[string]interface
 
 	signozMetricsUsed := false
 	signozLogsUsed := false
-	dataSources := []string{}
+	signozTracesUsed := false
 	if postData != nil {
 
 		if postData.CompositeQuery != nil {
 			data["queryType"] = postData.CompositeQuery.QueryType
 			data["panelType"] = postData.CompositeQuery.PanelType
 
-			signozLogsUsed, signozMetricsUsed, _ = telemetry.GetInstance().CheckSigNozSignals(postData)
+			signozLogsUsed, signozMetricsUsed, signozTracesUsed = telemetry.GetInstance().CheckSigNozSignals(postData)
 		}
 	}
 
-	if signozMetricsUsed || signozLogsUsed {
+	if signozMetricsUsed || signozLogsUsed || signozTracesUsed {
 		if signozMetricsUsed {
-			dataSources = append(dataSources, "metrics")
 			telemetry.GetInstance().AddActiveMetricsUser()
 		}
 		if signozLogsUsed {
-			dataSources = append(dataSources, "logs")
 			telemetry.GetInstance().AddActiveLogsUser()
 		}
-		data["dataSources"] = dataSources
+		if signozTracesUsed {
+			telemetry.GetInstance().AddActiveTracesUser()
+		}
+		data["metricsUsed"] = signozMetricsUsed
+		data["logsUsed"] = signozLogsUsed
+		data["tracesUsed"] = signozTracesUsed
 		userEmail, err := baseauth.GetEmailFromJwt(r.Context())
 		if err == nil {
-			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_V3, data, userEmail, true)
+			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_API, data, userEmail, true, false)
 		}
 	}
 	return data, true
@@ -485,7 +488,7 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 		if _, ok := telemetry.EnabledPaths()[path]; ok {
 			userEmail, err := baseauth.GetEmailFromJwt(r.Context())
 			if err == nil {
-				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_PATH, data, userEmail)
+				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_PATH, data, userEmail, true, false)
 			}
 		}
 
@@ -522,7 +525,7 @@ func (s *Server) initListeners() error {
 		return err
 	}
 
-	zap.S().Info(fmt.Sprintf("Query server started listening on %s...", s.serverOptions.HTTPHostPort))
+	zap.L().Info(fmt.Sprintf("Query server started listening on %s...", s.serverOptions.HTTPHostPort))
 
 	// listen on private port to support internal services
 	privateHostPort := s.serverOptions.PrivateHostPort
@@ -535,7 +538,7 @@ func (s *Server) initListeners() error {
 	if err != nil {
 		return err
 	}
-	zap.S().Info(fmt.Sprintf("Query server started listening on private port %s...", s.serverOptions.PrivateHostPort))
+	zap.L().Info(fmt.Sprintf("Query server started listening on private port %s...", s.serverOptions.PrivateHostPort))
 
 	return nil
 }
@@ -547,7 +550,7 @@ func (s *Server) Start() error {
 	if !s.serverOptions.DisableRules {
 		s.ruleManager.Start()
 	} else {
-		zap.S().Info("msg: Rules disabled as rules.disable is set to TRUE")
+		zap.L().Info("msg: Rules disabled as rules.disable is set to TRUE")
 	}
 
 	err := s.initListeners()
@@ -561,23 +564,23 @@ func (s *Server) Start() error {
 	}
 
 	go func() {
-		zap.S().Info("Starting HTTP server", zap.Int("port", httpPort), zap.String("addr", s.serverOptions.HTTPHostPort))
+		zap.L().Info("Starting HTTP server", zap.Int("port", httpPort), zap.String("addr", s.serverOptions.HTTPHostPort))
 
 		switch err := s.httpServer.Serve(s.httpConn); err {
 		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
 			// normal exit, nothing to do
 		default:
-			zap.S().Error("Could not start HTTP server", zap.Error(err))
+			zap.L().Error("Could not start HTTP server", zap.Error(err))
 		}
 		s.unavailableChannel <- healthcheck.Unavailable
 	}()
 
 	go func() {
-		zap.S().Info("Starting pprof server", zap.String("addr", baseconst.DebugHttpPort))
+		zap.L().Info("Starting pprof server", zap.String("addr", baseconst.DebugHttpPort))
 
 		err = http.ListenAndServe(baseconst.DebugHttpPort, nil)
 		if err != nil {
-			zap.S().Error("Could not start pprof server", zap.Error(err))
+			zap.L().Error("Could not start pprof server", zap.Error(err))
 		}
 	}()
 
@@ -587,14 +590,14 @@ func (s *Server) Start() error {
 	}
 
 	go func() {
-		zap.S().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.serverOptions.PrivateHostPort))
+		zap.L().Info("Starting Private HTTP server", zap.Int("port", privatePort), zap.String("addr", s.serverOptions.PrivateHostPort))
 
 		switch err := s.privateHTTP.Serve(s.privateConn); err {
 		case nil, http.ErrServerClosed, cmux.ErrListenerClosed:
 			// normal exit, nothing to do
-			zap.S().Info("private http server closed")
+			zap.L().Info("private http server closed")
 		default:
-			zap.S().Error("Could not start private HTTP server", zap.Error(err))
+			zap.L().Error("Could not start private HTTP server", zap.Error(err))
 		}
 
 		s.unavailableChannel <- healthcheck.Unavailable
@@ -602,10 +605,10 @@ func (s *Server) Start() error {
 	}()
 
 	go func() {
-		zap.S().Info("Starting OpAmp Websocket server", zap.String("addr", baseconst.OpAmpWsEndpoint))
+		zap.L().Info("Starting OpAmp Websocket server", zap.String("addr", baseconst.OpAmpWsEndpoint))
 		err := s.opampServer.Start(baseconst.OpAmpWsEndpoint)
 		if err != nil {
-			zap.S().Info("opamp ws server failed to start", err)
+			zap.L().Error("opamp ws server failed to start", zap.Error(err))
 			s.unavailableChannel <- healthcheck.Unavailable
 		}
 	}()
@@ -681,7 +684,7 @@ func makeRulesManager(
 		return nil, fmt.Errorf("rule manager error: %v", err)
 	}
 
-	zap.S().Info("rules manager is ready")
+	zap.L().Info("rules manager is ready")
 
 	return manager, nil
 }

ee/query-service/auth/auth.go

@@ -17,25 +17,25 @@ import (
 func GetUserFromRequest(r *http.Request, apiHandler *api.APIHandler) (*basemodel.UserPayload, error) {
 	patToken := r.Header.Get("SIGNOZ-API-KEY")
 	if len(patToken) > 0 {
-		zap.S().Debugf("Received a non-zero length PAT token")
+		zap.L().Debug("Received a non-zero length PAT token")
 		ctx := context.Background()
 		dao := apiHandler.AppDao()
 
 		pat, err := dao.GetPAT(ctx, patToken)
 		if err == nil && pat != nil {
-			zap.S().Debugf("Found valid PAT: %+v", pat)
+			zap.L().Debug("Found valid PAT: ", zap.Any("pat", pat))
 			if pat.ExpiresAt < time.Now().Unix() && pat.ExpiresAt != 0 {
-				zap.S().Debugf("PAT has expired: %+v", pat)
+				zap.L().Info("PAT has expired: ", zap.Any("pat", pat))
 				return nil, fmt.Errorf("PAT has expired")
 			}
 			group, apiErr := dao.GetGroupByName(ctx, pat.Role)
 			if apiErr != nil {
-				zap.S().Debugf("Error while getting group for PAT: %+v", apiErr)
+				zap.L().Error("Error while getting group for PAT: ", zap.Any("apiErr", apiErr))
 				return nil, apiErr
 			}
 			user, err := dao.GetUser(ctx, pat.UserID)
 			if err != nil {
-				zap.S().Debugf("Error while getting user for PAT: %+v", err)
+				zap.L().Error("Error while getting user for PAT: ", zap.Error(err))
 				return nil, err
 			}
 			telemetry.GetInstance().SetPatTokenUser()
@@ -48,7 +48,7 @@ func GetUserFromRequest(r *http.Request, apiHandler *api.APIHandler) (*basemodel
 			}, nil
 		}
 		if err != nil {
-			zap.S().Debugf("Error while getting user for PAT: %+v", err)
+			zap.L().Error("Error while getting user for PAT: ", zap.Error(err))
 			return nil, err
 		}
 	}

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

@@ -22,19 +22,19 @@ func (m *modelDao) createUserForSAMLRequest(ctx context.Context, email string) (
 	domain, apierr := m.GetDomainByEmail(ctx, email)
 
 	if apierr != nil {
-		zap.S().Errorf("failed to get domain from email", apierr)
+		zap.L().Error("failed to get domain from email", zap.Error(apierr))
 		return nil, model.InternalErrorStr("failed to get domain from email")
 	}
 
 	hash, err := baseauth.PasswordHash(utils.GeneratePassowrd())
 	if err != nil {
-		zap.S().Errorf("failed to generate password hash when registering a user via SSO redirect", zap.Error(err))
+		zap.L().Error("failed to generate password hash when registering a user via SSO redirect", zap.Error(err))
 		return nil, model.InternalErrorStr("failed to generate password hash")
 	}
 
 	group, apiErr := m.GetGroupByName(ctx, baseconst.ViewerGroup)
 	if apiErr != nil {
-		zap.S().Debugf("GetGroupByName failed, err: %v\n", apiErr.Err)
+		zap.L().Error("GetGroupByName failed", zap.Error(apiErr))
 		return nil, apiErr
 	}
 
@@ -51,7 +51,7 @@ func (m *modelDao) createUserForSAMLRequest(ctx context.Context, email string) (
 
 	user, apiErr = m.CreateUser(ctx, user, false)
 	if apiErr != nil {
-		zap.S().Debugf("CreateUser failed, err: %v\n", apiErr.Err)
+		zap.L().Error("CreateUser failed", zap.Error(apiErr))
 		return nil, apiErr
 	}
 
@@ -65,7 +65,7 @@ func (m *modelDao) PrepareSsoRedirect(ctx context.Context, redirectUri, email st
 
 	userPayload, apierr := m.GetUserByEmail(ctx, email)
 	if !apierr.IsNil() {
-		zap.S().Errorf(" failed to get user with email received from auth provider", apierr.Error())
+		zap.L().Error("failed to get user with email received from auth provider", zap.String("error", apierr.Error()))
 		return "", model.BadRequestStr("invalid user email received from the auth provider")
 	}
 
@@ -75,7 +75,7 @@ func (m *modelDao) PrepareSsoRedirect(ctx context.Context, redirectUri, email st
 		newUser, apiErr := m.createUserForSAMLRequest(ctx, email)
 		user = newUser
 		if apiErr != nil {
-			zap.S().Errorf("failed to create user with email received from auth provider: %v", apierr.Error())
+			zap.L().Error("failed to create user with email received from auth provider", zap.Error(apiErr))
 			return "", apiErr
 		}
 	} else {
@@ -84,7 +84,7 @@ func (m *modelDao) PrepareSsoRedirect(ctx context.Context, redirectUri, email st
 
 	tokenStore, err := baseauth.GenerateJWTForUser(user)
 	if err != nil {
-		zap.S().Errorf("failed to generate token for SSO login user", err)
+		zap.L().Error("failed to generate token for SSO login user", zap.Error(err))
 		return "", model.InternalErrorStr("failed to generate token for the user")
 	}
 
@@ -143,8 +143,8 @@ func (m *modelDao) PrecheckLogin(ctx context.Context, email, sourceUrl string) (
 			// do nothing, just skip sso
 			ssoAvailable = false
 		default:
-			zap.S().Errorf("feature check failed", zap.String("featureKey", model.SSO), zap.Error(err))
+			zap.L().Error("feature check failed", zap.String("featureKey", model.SSO), zap.Error(err))
-			return resp, model.BadRequest(err)
+			return resp, model.BadRequestStr(err.Error())
 		}
 	}
 
@@ -160,7 +160,7 @@ func (m *modelDao) PrecheckLogin(ctx context.Context, email, sourceUrl string) (
 			if len(emailComponents) > 0 {
 				emailDomain = emailComponents[1]
 			}
-			zap.S().Errorf("failed to get org domain from email", zap.String("emailDomain", emailDomain), apierr.ToError())
+			zap.L().Error("failed to get org domain from email", zap.String("emailDomain", emailDomain), zap.Error(apierr.ToError()))
 			return resp, apierr
 		}
 
@@ -176,7 +176,7 @@ func (m *modelDao) PrecheckLogin(ctx context.Context, email, sourceUrl string) (
 			escapedUrl, _ := url.QueryUnescape(sourceUrl)
 			siteUrl, err := url.Parse(escapedUrl)
 			if err != nil {
-				zap.S().Errorf("failed to parse referer", err)
+				zap.L().Error("failed to parse referer", zap.Error(err))
 				return resp, model.InternalError(fmt.Errorf("failed to generate login request"))
 			}
 
@@ -185,7 +185,7 @@ func (m *modelDao) PrecheckLogin(ctx context.Context, email, sourceUrl string) (
 			resp.SsoUrl, err = orgDomain.BuildSsoUrl(siteUrl)
 
 			if err != nil {
-				zap.S().Errorf("failed to prepare saml request for domain", zap.String("domain", orgDomain.Name), err)
+				zap.L().Error("failed to prepare saml request for domain", zap.String("domain", orgDomain.Name), zap.Error(err))
 				return resp, model.InternalError(err)
 			}
 

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

@@ -48,13 +48,13 @@ func (m *modelDao) GetDomainFromSsoResponse(ctx context.Context, relayState *url
 	if domainIdStr != "" {
 		domainId, err := uuid.Parse(domainIdStr)
 		if err != nil {
-			zap.S().Errorf("failed to parse domainId from relay state", err)
+			zap.L().Error("failed to parse domainId from relay state", zap.Error(err))
 			return nil, fmt.Errorf("failed to parse domainId from IdP response")
 		}
 
 		domain, err = m.GetDomain(ctx, domainId)
 		if (err != nil) || domain == nil {
-			zap.S().Errorf("failed to find domain from domainId received in IdP response", err.Error())
+			zap.L().Error("failed to find domain from domainId received in IdP response", zap.Error(err))
 			return nil, fmt.Errorf("invalid credentials")
 		}
 	}
@@ -64,7 +64,7 @@ func (m *modelDao) GetDomainFromSsoResponse(ctx context.Context, relayState *url
 		domainFromDB, err := m.GetDomainByName(ctx, domainNameStr)
 		domain = domainFromDB
 		if (err != nil) || domain == nil {
-			zap.S().Errorf("failed to find domain from domainName received in IdP response", err.Error())
+			zap.L().Error("failed to find domain from domainName received in IdP response", zap.Error(err))
 			return nil, fmt.Errorf("invalid credentials")
 		}
 	}
@@ -132,7 +132,7 @@ func (m *modelDao) ListDomains(ctx context.Context, orgId string) ([]model.OrgDo
 	for _, s := range stored {
 		domain := model.OrgDomain{Id: s.Id, Name: s.Name, OrgId: s.OrgId}
 		if err := domain.LoadConfig(s.Data); err != nil {
-			zap.S().Errorf("ListDomains() failed", zap.Error(err))
+			zap.L().Error("ListDomains() failed", zap.Error(err))
 		}
 		domains = append(domains, domain)
 	}
@@ -153,7 +153,7 @@ func (m *modelDao) CreateDomain(ctx context.Context, domain *model.OrgDomain) ba
 
 	configJson, err := json.Marshal(domain)
 	if err != nil {
-		zap.S().Errorf("failed to unmarshal domain config", zap.Error(err))
+		zap.L().Error("failed to unmarshal domain config", zap.Error(err))
 		return model.InternalError(fmt.Errorf("domain creation failed"))
 	}
 
@@ -167,7 +167,7 @@ func (m *modelDao) CreateDomain(ctx context.Context, domain *model.OrgDomain) ba
 		time.Now().Unix())
 
 	if err != nil {
-		zap.S().Errorf("failed to insert domain in db", zap.Error(err))
+		zap.L().Error("failed to insert domain in db", zap.Error(err))
 		return model.InternalError(fmt.Errorf("domain creation failed"))
 	}
 
@@ -178,13 +178,13 @@ func (m *modelDao) CreateDomain(ctx context.Context, domain *model.OrgDomain) ba
 func (m *modelDao) UpdateDomain(ctx context.Context, domain *model.OrgDomain) basemodel.BaseApiError {
 
 	if domain.Id == uuid.Nil {
-		zap.S().Errorf("domain update failed", zap.Error(fmt.Errorf("OrgDomain.Id is null")))
+		zap.L().Error("domain update failed", zap.Error(fmt.Errorf("OrgDomain.Id is null")))
 		return model.InternalError(fmt.Errorf("domain update failed"))
 	}
 
 	configJson, err := json.Marshal(domain)
 	if err != nil {
-		zap.S().Errorf("domain update failed", zap.Error(err))
+		zap.L().Error("domain update failed", zap.Error(err))
 		return model.InternalError(fmt.Errorf("domain update failed"))
 	}
 
@@ -195,7 +195,7 @@ func (m *modelDao) UpdateDomain(ctx context.Context, domain *model.OrgDomain) ba
 		domain.Id)
 
 	if err != nil {
-		zap.S().Errorf("domain update failed", zap.Error(err))
+		zap.L().Error("domain update failed", zap.Error(err))
 		return model.InternalError(fmt.Errorf("domain update failed"))
 	}
 
@@ -206,7 +206,7 @@ func (m *modelDao) UpdateDomain(ctx context.Context, domain *model.OrgDomain) ba
 func (m *modelDao) DeleteDomain(ctx context.Context, id uuid.UUID) basemodel.BaseApiError {
 
 	if id == uuid.Nil {
-		zap.S().Errorf("domain delete failed", zap.Error(fmt.Errorf("OrgDomain.Id is null")))
+		zap.L().Error("domain delete failed", zap.Error(fmt.Errorf("OrgDomain.Id is null")))
 		return model.InternalError(fmt.Errorf("domain delete failed"))
 	}
 
@@ -215,7 +215,7 @@ func (m *modelDao) DeleteDomain(ctx context.Context, id uuid.UUID) basemodel.Bas
 		id)
 
 	if err != nil {
-		zap.S().Errorf("domain delete failed", zap.Error(err))
+		zap.L().Error("domain delete failed", zap.Error(err))
 		return model.InternalError(fmt.Errorf("domain delete failed"))
 	}
 

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

@@ -26,12 +26,12 @@ func (m *modelDao) CreatePAT(ctx context.Context, p model.PAT) (model.PAT, basem
 		p.Revoked,
 	)
 	if err != nil {
-		zap.S().Errorf("Failed to insert PAT in db, err: %v", zap.Error(err))
+		zap.L().Error("Failed to insert PAT in db, err: %v", zap.Error(err))
 		return model.PAT{}, model.InternalError(fmt.Errorf("PAT insertion failed"))
 	}
 	id, err := result.LastInsertId()
 	if err != nil {
-		zap.S().Errorf("Failed to get last inserted id, err: %v", zap.Error(err))
+		zap.L().Error("Failed to get last inserted id, err: %v", zap.Error(err))
 		return model.PAT{}, model.InternalError(fmt.Errorf("PAT insertion failed"))
 	}
 	p.Id = strconv.Itoa(int(id))
@@ -62,7 +62,7 @@ func (m *modelDao) UpdatePAT(ctx context.Context, p model.PAT, id string) basemo
 		p.UpdatedByUserID,
 		id)
 	if err != nil {
-		zap.S().Errorf("Failed to update PAT in db, err: %v", zap.Error(err))
+		zap.L().Error("Failed to update PAT in db, err: %v", zap.Error(err))
 		return model.InternalError(fmt.Errorf("PAT update failed"))
 	}
 	return nil
@@ -74,7 +74,7 @@ func (m *modelDao) UpdatePATLastUsed(ctx context.Context, token string, lastUsed
 		lastUsed,
 		token)
 	if err != nil {
-		zap.S().Errorf("Failed to update PAT last used in db, err: %v", zap.Error(err))
+		zap.L().Error("Failed to update PAT last used in db, err: %v", zap.Error(err))
 		return model.InternalError(fmt.Errorf("PAT last used update failed"))
 	}
 	return nil
@@ -84,7 +84,7 @@ func (m *modelDao) ListPATs(ctx context.Context) ([]model.PAT, basemodel.BaseApi
 	pats := []model.PAT{}
 
 	if err := m.DB().Select(&pats, "SELECT * FROM personal_access_tokens WHERE revoked=false ORDER by updated_at DESC;"); err != nil {
-		zap.S().Errorf("Failed to fetch PATs err: %v", zap.Error(err))
+		zap.L().Error("Failed to fetch PATs err: %v", zap.Error(err))
 		return nil, model.InternalError(fmt.Errorf("failed to fetch PATs"))
 	}
 	for i := range pats {
@@ -129,7 +129,7 @@ func (m *modelDao) RevokePAT(ctx context.Context, id string, userID string) base
 		"UPDATE personal_access_tokens SET revoked=true, updated_by_user_id = $1, updated_at=$2 WHERE id=$3",
 		userID, updatedAt, id)
 	if err != nil {
-		zap.S().Errorf("Failed to revoke PAT in db, err: %v", zap.Error(err))
+		zap.L().Error("Failed to revoke PAT in db, err: %v", zap.Error(err))
 		return model.InternalError(fmt.Errorf("PAT revoke failed"))
 	}
 	return nil

ee/query-service/integrations/signozio/signozio.go

@@ -47,13 +47,13 @@ func ActivateLicense(key, siteId string) (*ActivationResponse, *model.ApiError)
 	httpResponse, err := http.Post(C.Prefix+"/licenses/activate", APPLICATION_JSON, bytes.NewBuffer(reqString))
 
 	if err != nil {
-		zap.S().Errorf("failed to connect to license.signoz.io", err)
+		zap.L().Error("failed to connect to license.signoz.io", zap.Error(err))
 		return nil, model.BadRequest(fmt.Errorf("unable to connect with license.signoz.io, please check your network connection"))
 	}
 
 	httpBody, err := io.ReadAll(httpResponse.Body)
 	if err != nil {
-		zap.S().Errorf("failed to read activation response from license.signoz.io", err)
+		zap.L().Error("failed to read activation response from license.signoz.io", zap.Error(err))
 		return nil, model.BadRequest(fmt.Errorf("failed to read activation response from license.signoz.io"))
 	}
 
@@ -63,7 +63,7 @@ func ActivateLicense(key, siteId string) (*ActivationResponse, *model.ApiError)
 	result := ActivationResult{}
 	err = json.Unmarshal(httpBody, &result)
 	if err != nil {
-		zap.S().Errorf("failed to marshal activation response from license.signoz.io", err)
+		zap.L().Error("failed to marshal activation response from license.signoz.io", zap.Error(err))
 		return nil, model.InternalError(errors.Wrap(err, "failed to marshal license activation response"))
 	}
 

ee/query-service/license/db.go

@@ -97,7 +97,7 @@ func (r *Repo) InsertLicense(ctx context.Context, l *model.License) error {
 		l.ValidationMessage)
 
 	if err != nil {
-		zap.S().Errorf("error in inserting license data: ", zap.Error(err))
+		zap.L().Error("error in inserting license data: ", zap.Error(err))
 		return fmt.Errorf("failed to insert license in db: %v", err)
 	}
 
@@ -121,7 +121,7 @@ func (r *Repo) UpdatePlanDetails(ctx context.Context,
 	_, err := r.db.ExecContext(ctx, query, planDetails, time.Now(), key)
 
 	if err != nil {
-		zap.S().Errorf("error in updating license: ", zap.Error(err))
+		zap.L().Error("error in updating license: ", zap.Error(err))
 		return fmt.Errorf("failed to update license in db: %v", err)
 	}
 

ee/query-service/license/manager.go

@@ -100,7 +100,7 @@ func (lm *Manager) SetActive(l *model.License) {
 
 	err := lm.InitFeatures(lm.activeFeatures)
 	if err != nil {
-		zap.S().Panicf("Couldn't activate features: %v", err)
+		zap.L().Panic("Couldn't activate features", zap.Error(err))
 	}
 	if !lm.validatorRunning {
 		// we want to make sure only one validator runs,
@@ -125,13 +125,13 @@ func (lm *Manager) LoadActiveLicense() error {
 	if active != nil {
 		lm.SetActive(active)
 	} else {
-		zap.S().Info("No active license found, defaulting to basic plan")
+		zap.L().Info("No active license found, defaulting to basic plan")
 		// if no active license is found, we default to basic(free) plan with all default features
 		lm.activeFeatures = model.BasicPlan
 		setDefaultFeatures(lm)
 		err := lm.InitFeatures(lm.activeFeatures)
 		if err != nil {
-			zap.S().Error("Couldn't initialize features: ", err)
+			zap.L().Error("Couldn't initialize features", zap.Error(err))
 			return err
 		}
 	}
@@ -191,7 +191,7 @@ func (lm *Manager) Validator(ctx context.Context) {
 
 // Validate validates the current active license
 func (lm *Manager) Validate(ctx context.Context) (reterr error) {
-	zap.S().Info("License validation started")
+	zap.L().Info("License validation started")
 	if lm.activeLicense == nil {
 		return nil
 	}
@@ -201,12 +201,12 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 
 		lm.lastValidated = time.Now().Unix()
 		if reterr != nil {
-			zap.S().Errorf("License validation completed with error", reterr)
+			zap.L().Error("License validation completed with error", zap.Error(reterr))
 			atomic.AddUint64(&lm.failedAttempts, 1)
 			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_LICENSE_CHECK_FAILED,
-				map[string]interface{}{"err": reterr.Error()}, "")
+				map[string]interface{}{"err": reterr.Error()}, "", true, false)
 		} else {
-			zap.S().Info("License validation completed with no errors")
+			zap.L().Info("License validation completed with no errors")
 		}
 
 		lm.mutex.Unlock()
@@ -214,7 +214,7 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 
 	response, apiError := validate.ValidateLicense(lm.activeLicense.ActivationId)
 	if apiError != nil {
-		zap.S().Errorf("failed to validate license", apiError)
+		zap.L().Error("failed to validate license", zap.Error(apiError.Err))
 		return apiError.Err
 	}
 
@@ -235,7 +235,7 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 		}
 
 		if err := l.ParsePlan(); err != nil {
-			zap.S().Errorf("failed to parse updated license", zap.Error(err))
+			zap.L().Error("failed to parse updated license", zap.Error(err))
 			return err
 		}
 
@@ -245,7 +245,7 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 			if err != nil {
 				// unexpected db write issue but we can let the user continue
 				// and wait for update to work in next cycle.
-				zap.S().Errorf("failed to validate license", zap.Error(err))
+				zap.L().Error("failed to validate license", zap.Error(err))
 			}
 		}
 
@@ -263,14 +263,14 @@ func (lm *Manager) Activate(ctx context.Context, key string) (licenseResponse *m
 			userEmail, err := auth.GetEmailFromJwt(ctx)
 			if err == nil {
 				telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_LICENSE_ACT_FAILED,
-					map[string]interface{}{"err": errResponse.Err.Error()}, userEmail)
+					map[string]interface{}{"err": errResponse.Err.Error()}, userEmail, true, false)
 			}
 		}
 	}()
 
 	response, apiError := validate.ActivateLicense(key, "")
 	if apiError != nil {
-		zap.S().Errorf("failed to activate license", zap.Error(apiError.Err))
+		zap.L().Error("failed to activate license", zap.Error(apiError.Err))
 		return nil, apiError
 	}
 
@@ -284,14 +284,14 @@ func (lm *Manager) Activate(ctx context.Context, key string) (licenseResponse *m
 	err := l.ParsePlan()
 
 	if err != nil {
-		zap.S().Errorf("failed to activate license", zap.Error(err))
+		zap.L().Error("failed to activate license", zap.Error(err))
 		return nil, model.InternalError(err)
 	}
 
 	// store the license before activating it
 	err = lm.repo.InsertLicense(ctx, l)
 	if err != nil {
-		zap.S().Errorf("failed to activate license", zap.Error(err))
+		zap.L().Error("failed to activate license", zap.Error(err))
 		return nil, model.InternalError(err)
 	}
 

ee/query-service/main.go

@@ -14,10 +14,10 @@ import (
 	semconv "go.opentelemetry.io/otel/semconv/v1.4.0"
 	"go.signoz.io/signoz/ee/query-service/app"
 	"go.signoz.io/signoz/pkg/query-service/auth"
-	"go.signoz.io/signoz/pkg/query-service/constants"
 	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
 	"go.signoz.io/signoz/pkg/query-service/version"
 	"google.golang.org/grpc"
+	"google.golang.org/grpc/credentials/insecure"
 
 	zapotlpencoder "github.com/SigNoz/zap_otlp/zap_otlp_encoder"
 	zapotlpsync "github.com/SigNoz/zap_otlp/zap_otlp_sync"
@@ -27,18 +27,19 @@ import (
 )
 
 func initZapLog(enableQueryServiceLogOTLPExport bool) *zap.Logger {
-	config := zap.NewDevelopmentConfig()
+	config := zap.NewProductionConfig()
 	ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)
 	defer stop()
 
-	config.EncoderConfig.EncodeDuration = zapcore.StringDurationEncoder
+	config.EncoderConfig.EncodeDuration = zapcore.MillisDurationEncoder
-	otlpEncoder := zapotlpencoder.NewOTLPEncoder(config.EncoderConfig)
+	config.EncoderConfig.EncodeLevel = zapcore.CapitalLevelEncoder
-	consoleEncoder := zapcore.NewConsoleEncoder(config.EncoderConfig)
-	defaultLogLevel := zapcore.DebugLevel
-	config.EncoderConfig.EncodeLevel = zapcore.CapitalColorLevelEncoder
 	config.EncoderConfig.TimeKey = "timestamp"
 	config.EncoderConfig.EncodeTime = zapcore.ISO8601TimeEncoder
 
+	otlpEncoder := zapotlpencoder.NewOTLPEncoder(config.EncoderConfig)
+	consoleEncoder := zapcore.NewJSONEncoder(config.EncoderConfig)
+	defaultLogLevel := zapcore.InfoLevel
+
 	res := resource.NewWithAttributes(
 		semconv.SchemaURL,
 		semconv.ServiceNameKey.String("query-service"),
@@ -48,14 +49,15 @@ func initZapLog(enableQueryServiceLogOTLPExport bool) *zap.Logger {
 		zapcore.NewCore(consoleEncoder, os.Stdout, defaultLogLevel),
 	)
 
-	if enableQueryServiceLogOTLPExport == true {
+	if enableQueryServiceLogOTLPExport {
-		conn, err := grpc.DialContext(ctx, constants.OTLPTarget, grpc.WithBlock(), grpc.WithInsecure(), grpc.WithTimeout(time.Second*30))
+		ctx, _ := context.WithTimeout(ctx, time.Second*30)
+		conn, err := grpc.DialContext(ctx, baseconst.OTLPTarget, grpc.WithBlock(), grpc.WithTransportCredentials(insecure.NewCredentials()))
 		if err != nil {
-			log.Println("failed to connect to otlp collector to export query service logs with error:", err)
+			log.Fatalf("failed to establish connection: %v", err)
 		} else {
 			logExportBatchSizeInt, err := strconv.Atoi(baseconst.LogExportBatchSize)
 			if err != nil {
-				logExportBatchSizeInt = 1000
+				logExportBatchSizeInt = 512
 			}
 			ws := zapcore.AddSync(zapotlpsync.NewOtlpSyncer(conn, zapotlpsync.Options{
 				BatchSize:      logExportBatchSizeInt,
@@ -113,7 +115,6 @@ func main() {
 	zap.ReplaceGlobals(loggerMgr)
 	defer loggerMgr.Sync() // flushes buffer, if any
 
-	logger := loggerMgr.Sugar()
 	version.PrintVersion()
 
 	serverOptions := &app.ServerOptions{
@@ -137,22 +138,22 @@ func main() {
 	auth.JwtSecret = os.Getenv("SIGNOZ_JWT_SECRET")
 
 	if len(auth.JwtSecret) == 0 {
-		zap.S().Warn("No JWT secret key is specified.")
+		zap.L().Warn("No JWT secret key is specified.")
 	} else {
-		zap.S().Info("No JWT secret key set successfully.")
+		zap.L().Info("JWT secret key set successfully.")
 	}
 
 	server, err := app.NewServer(serverOptions)
 	if err != nil {
-		logger.Fatal("Failed to create server", zap.Error(err))
+		zap.L().Fatal("Failed to create server", zap.Error(err))
 	}
 
 	if err := server.Start(); err != nil {
-		logger.Fatal("Could not start servers", zap.Error(err))
+		zap.L().Fatal("Could not start server", zap.Error(err))
 	}
 
 	if err := auth.InitAuthCache(context.Background()); err != nil {
-		logger.Fatal("Failed to initialize auth cache", zap.Error(err))
+		zap.L().Fatal("Failed to initialize auth cache", zap.Error(err))
 	}
 
 	signalsChannel := make(chan os.Signal, 1)
@@ -161,9 +162,9 @@ func main() {
 	for {
 		select {
 		case status := <-server.HealthCheckStatus():
-			logger.Info("Received HealthCheck status: ", zap.Int("status", int(status)))
+			zap.L().Info("Received HealthCheck status: ", zap.Int("status", int(status)))
 		case <-signalsChannel:
-			logger.Fatal("Received OS Interrupt Signal ... ")
+			zap.L().Fatal("Received OS Interrupt Signal ... ")
 			server.Stop()
 		}
 	}

ee/query-service/model/domain.go

@@ -9,8 +9,8 @@ import (
 	"github.com/google/uuid"
 	"github.com/pkg/errors"
 	saml2 "github.com/russellhaering/gosaml2"
-	"go.signoz.io/signoz/ee/query-service/sso/saml"
 	"go.signoz.io/signoz/ee/query-service/sso"
+	"go.signoz.io/signoz/ee/query-service/sso/saml"
 	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	"go.uber.org/zap"
 )
@@ -24,16 +24,16 @@ const (
 
 // OrgDomain identify org owned web domains for auth and other purposes
 type OrgDomain struct {
-	Id         uuid.UUID   `json:"id"`
+	Id         uuid.UUID `json:"id"`
-	Name       string      `json:"name"`
+	Name       string    `json:"name"`
-	OrgId      string      `json:"orgId"`
+	OrgId      string    `json:"orgId"`
-	SsoEnabled bool        `json:"ssoEnabled"`
+	SsoEnabled bool      `json:"ssoEnabled"`
-	SsoType    SSOType     `json:"ssoType"`
+	SsoType    SSOType   `json:"ssoType"`
 
-	SamlConfig *SamlConfig `json:"samlConfig"`
+	SamlConfig       *SamlConfig        `json:"samlConfig"`
 	GoogleAuthConfig *GoogleOAuthConfig `json:"googleAuthConfig"`
 
-	Org        *basemodel.Organization
+	Org *basemodel.Organization
 }
 
 func (od *OrgDomain) String() string {
@@ -138,7 +138,6 @@ func (od *OrgDomain) PrepareSamlRequest(siteUrl *url.URL) (*saml2.SAMLServicePro
 
 func (od *OrgDomain) BuildSsoUrl(siteUrl *url.URL) (ssoUrl string, err error) {
 
-
 	fmtDomainId := strings.Replace(od.Id.String(), "-", ":", -1)
 
 	// build redirect url from window.location sent by frontend
@@ -156,8 +155,7 @@ func (od *OrgDomain) BuildSsoUrl(siteUrl *url.URL) (ssoUrl string, err error) {
 	// auth provider to the backend (HandleCallback or HandleSSO method).
 	relayState := fmt.Sprintf("%s?domainId=%s", redirectURL, fmtDomainId)
 
-
+	switch od.SsoType {
-	switch (od.SsoType) {
 	case SAML:
 
 		sp, err := od.PrepareSamlRequest(siteUrl)
@@ -176,9 +174,8 @@ func (od *OrgDomain) BuildSsoUrl(siteUrl *url.URL) (ssoUrl string, err error) {
 		return googleProvider.BuildAuthURL(relayState)
 
 	default:
-		zap.S().Errorf("found unsupported SSO config for the org domain", zap.String("orgDomain", od.Name))
+		zap.L().Error("found unsupported SSO config for the org domain", zap.String("orgDomain", od.Name))
 		return "", fmt.Errorf("unsupported SSO config for the domain")
 	}
 
-
 }

ee/query-service/sso/saml/request.go

@@ -102,6 +102,6 @@ func PrepareRequest(issuer, acsUrl, audience, entity, idp, certString string) (*
 		IDPCertificateStore: certStore,
 		SPKeyStore:          randomKeyStore,
 	}
-	zap.S().Debugf("SAML request:", sp)
+	zap.L().Debug("SAML request", zap.Any("sp", sp))
 	return sp, nil
 }

ee/query-service/usage/manager.go

@@ -91,12 +91,12 @@ func (lm *Manager) UploadUsage() {
 	// check if license is present or not
 	license, err := lm.licenseRepo.GetActiveLicense(ctx)
 	if err != nil {
-		zap.S().Errorf("failed to get active license: %v", zap.Error(err))
+		zap.L().Error("failed to get active license", zap.Error(err))
 		return
 	}
 	if license == nil {
 		// we will not start the usage reporting if license is not present.
-		zap.S().Info("no license present, skipping usage reporting")
+		zap.L().Info("no license present, skipping usage reporting")
 		return
 	}
 
@@ -123,7 +123,7 @@ func (lm *Manager) UploadUsage() {
 		dbusages := []model.UsageDB{}
 		err := lm.clickhouseConn.Select(ctx, &dbusages, fmt.Sprintf(query, db, db), time.Now().Add(-(24 * time.Hour)))
 		if err != nil && !strings.Contains(err.Error(), "doesn't exist") {
-			zap.S().Errorf("failed to get usage from clickhouse: %v", zap.Error(err))
+			zap.L().Error("failed to get usage from clickhouse: %v", zap.Error(err))
 			return
 		}
 		for _, u := range dbusages {
@@ -133,16 +133,16 @@ func (lm *Manager) UploadUsage() {
 	}
 
 	if len(usages) <= 0 {
-		zap.S().Info("no snapshots to upload, skipping.")
+		zap.L().Info("no snapshots to upload, skipping.")
 		return
 	}
 
-	zap.S().Info("uploading usage data")
+	zap.L().Info("uploading usage data")
 
 	orgName := ""
 	orgNames, orgError := lm.modelDao.GetOrgs(ctx)
 	if orgError != nil {
-		zap.S().Errorf("failed to get org data: %v", zap.Error(orgError))
+		zap.L().Error("failed to get org data: %v", zap.Error(orgError))
 	}
 	if len(orgNames) == 1 {
 		orgName = orgNames[0].Name
@@ -152,14 +152,14 @@ func (lm *Manager) UploadUsage() {
 	for _, usage := range usages {
 		usageDataBytes, err := encryption.Decrypt([]byte(usage.ExporterID[:32]), []byte(usage.Data))
 		if err != nil {
-			zap.S().Errorf("error while decrypting usage data: %v", zap.Error(err))
+			zap.L().Error("error while decrypting usage data: %v", zap.Error(err))
 			return
 		}
 
 		usageData := model.Usage{}
 		err = json.Unmarshal(usageDataBytes, &usageData)
 		if err != nil {
-			zap.S().Errorf("error while unmarshalling usage data: %v", zap.Error(err))
+			zap.L().Error("error while unmarshalling usage data: %v", zap.Error(err))
 			return
 		}
 
@@ -184,13 +184,13 @@ func (lm *Manager) UploadUsageWithExponentalBackOff(ctx context.Context, payload
 	for i := 1; i <= MaxRetries; i++ {
 		apiErr := licenseserver.SendUsage(ctx, payload)
 		if apiErr != nil && i == MaxRetries {
-			zap.S().Errorf("retries stopped : %v", zap.Error(apiErr))
+			zap.L().Error("retries stopped : %v", zap.Error(apiErr))
 			// not returning error here since it is captured in the failed count
 			return
 		} else if apiErr != nil {
 			// sleeping for exponential backoff
 			sleepDuration := RetryInterval * time.Duration(i)
-			zap.S().Errorf("failed to upload snapshot retrying after %v secs : %v", sleepDuration.Seconds(), zap.Error(apiErr.Err))
+			zap.L().Error("failed to upload snapshot retrying after %v secs : %v", zap.Duration("sleepDuration", sleepDuration), zap.Error(apiErr.Err))
 			time.Sleep(sleepDuration)
 		} else {
 			break
@@ -201,7 +201,7 @@ func (lm *Manager) UploadUsageWithExponentalBackOff(ctx context.Context, payload
 func (lm *Manager) Stop() {
 	lm.scheduler.Stop()
 
-	zap.S().Debug("sending usage data before shutting down")
+	zap.L().Info("sending usage data before shutting down")
 	// send usage before shutting down
 	lm.UploadUsage()
 

frontend/package.json

@@ -121,6 +121,7 @@
 		"web-vitals": "^0.2.4",
 		"webpack": "5.88.2",
 		"webpack-dev-server": "^4.15.1",
+		"webpack-retry-chunk-load-plugin": "3.1.1",
 		"xstate": "^4.31.0"
 	},
 	"browserslist": {

frontend/public/Icons/cable-car.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_2022_1972)" stroke="#fff" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"><path d="M6.667 2h.006M9.333 1.333h.007M1.333 6l13.334-3.333M8 8V4.333M11.333 8H4.667a2 2 0 00-2 2v2.667a2 2 0 002 2h6.666a2 2 0 002-2V10a2 2 0 00-2-2zM6 8v3.333M10 8v3.333M2.667 11.334h10.666"/></g><defs><clipPath id="prefix__clip0_2022_1972"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/Icons/configure.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.333" stroke-linecap="round"><path d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z" stroke-linejoin="round"/><path d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3M10.75 10.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z"/></g></svg>

frontend/public/Icons/group.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.667V3.333C2 2.6 2.6 2 3.333 2h1.334M11.333 2h1.334C13.4 2 14 2.6 14 3.333v1.334M14 11.334v1.333C14 13.4 13.4 14 12.667 14h-1.334M4.667 14H3.333C2.6 14 2 13.4 2 12.667v-1.333M8.667 4.667H5.333a.667.667 0 00-.666.666v2c0 .368.298.667.666.667h3.334a.667.667 0 00.666-.667v-2a.667.667 0 00-.666-.667zM10.667 8H7.333a.667.667 0 00-.666.667v2c0 .368.298.666.666.666h3.334a.667.667 0 00.666-.666v-2A.667.667 0 0010.667 8z"/></g></svg>

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

@@ -37,11 +37,16 @@
 	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
+	"option_1min": "1 min",
 	"option_5min": "5 mins",
 	"option_10min": "10 mins",
 	"option_15min": "15 mins",
+	"option_30min": "30 mins",
 	"option_60min": "60 mins",
 	"option_4hours": "4 hours",
+	"option_3hours": "3 hours",
+	"option_6hours": "6 hours",
+	"option_12hours": "12 hours",
 	"option_24hours": "24 hours",
 	"field_threshold": "Alert Threshold",
 	"option_allthetimes": "all the times",
@@ -112,6 +117,7 @@
 	"exceptions_based_alert_desc": "Send a notification when a condition occurs in the exceptions data.",
 	"field_unit": "Threshold unit",
 	"text_alert_on_absent": "Send a notification if data is missing for",
+	"text_alert_frequency": "Run alert every",
 	"text_for": "minutes",
 	"selected_query_placeholder": "Select query"
 }

frontend/public/locales/en/alerts.json

@@ -37,11 +37,16 @@
 	"text_condition1": "Send a notification when",
 	"text_condition2": "the threshold",
 	"text_condition3": "during the last",
+	"option_1min": "1 min",
 	"option_5min": "5 mins",
 	"option_10min": "10 mins",
 	"option_15min": "15 mins",
+	"option_30min": "30 mins",
 	"option_60min": "60 mins",
+	"option_3hours": "3 hours",
 	"option_4hours": "4 hours",
+	"option_6hours": "6 hours",
+	"option_12hours": "12 hours",
 	"option_24hours": "24 hours",
 	"field_threshold": "Alert Threshold",
 	"option_allthetimes": "all the times",
@@ -112,6 +117,7 @@
 	"exceptions_based_alert_desc": "Send a notification when a condition occurs in the exceptions data.",
 	"field_unit": "Threshold unit",
 	"text_alert_on_absent": "Send a notification if data is missing for",
+	"text_alert_frequency": "Run alert every",
 	"text_for": "minutes",
 	"selected_query_placeholder": "Select query"
 }

frontend/public/locales/en/billings.json

@@ -0,0 +1,14 @@
+{
+	"days_remaining": "days remaining in your billing period.",
+	"billing": "Billing",
+	"manage_billing_and_costs": "Manage your billing information, invoices, and monitor costs.",
+	"enterprise_cloud": "Enterprise Cloud",
+	"enterprise": "Enterprise",
+	"card_details_recieved_and_billing_info": "We have received your card details, your billing will only start after the end of your free trial period.",
+	"upgrade_plan": "Upgrade Plan",
+	"manage_billing": "Manage Billing",
+	"upgrade_now_text": "Upgrade now to have uninterrupted access",
+	"billing_start_info": "Your billing will start only after the trial period",
+	"checkout_plans": "Check out features in paid plans",
+	"here": "here"
+}

frontend/public/locales/en/titles.json

@@ -48,5 +48,5 @@
 	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
-	"INTEGRATIONS_INSTALLED": "SigNoz | Integrations"
+	"INTEGRATIONS": "SigNoz | Integrations"
 }

frontend/src/AppRoutes/pageComponents.ts

@@ -197,11 +197,3 @@ export const InstalledIntegrations = Loadable(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
-
-export const IntegrationsMarketPlace = Loadable(
-	// eslint-disable-next-line sonarjs/no-identical-functions
-	() =>
-		import(
-			/* webpackChunkName: "IntegrationsMarketPlace" */ 'pages/IntegrationsModulePage'
-		),
-);

frontend/src/AppRoutes/routes.ts

@@ -15,7 +15,6 @@ import {
 	ErrorDetails,
 	IngestionSettings,
 	InstalledIntegrations,
-	IntegrationsMarketPlace,
 	LicensePage,
 	ListAllALertsPage,
 	LiveLogs,
@@ -338,18 +337,11 @@ const routes: AppRoutes[] = [
 		key: 'SHORTCUTS',
 	},
 	{
-		path: ROUTES.INTEGRATIONS_INSTALLED,
+		path: ROUTES.INTEGRATIONS,
 		exact: true,
 		component: InstalledIntegrations,
 		isPrivate: true,
-		key: 'INTEGRATIONS_INSTALLED',
+		key: 'INTEGRATIONS',
-	},
-	{
-		path: ROUTES.INTEGRATIONS_MARKETPLACE,
-		exact: true,
-		component: IntegrationsMarketPlace,
-		isPrivate: true,
-		key: 'INTEGRATIONS_MARKETPLACE',
 	},
 ];
 

frontend/src/api/ErrorResponseHandler.ts

@@ -30,7 +30,8 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				statusCode,
 				payload: null,
 				error: errorMessage,
-				message: null,
+				message: (response.data as any)?.status,
+				body: JSON.stringify((response.data as any).data),
 			};
 		}
 

frontend/src/api/SAML/listAllDomain.ts

@@ -8,7 +8,7 @@ const listAllDomain = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.get(`orgs/${props.orgId}/domains`);
+		const response = await axios.get(`/orgs/${props.orgId}/domains`);
 
 		return {
 			statusCode: 200,

frontend/src/api/billing/getUsage.ts

@@ -13,6 +13,7 @@ export interface UsageResponsePayloadProps {
 		billTotal: number;
 	};
 	discount: number;
+	subscriptionStatus?: string;
 }
 
 const getUsage = async (

frontend/src/api/common/logEvent.ts

@@ -0,0 +1,28 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { EventSuccessPayloadProps } from 'types/api/events/types';
+
+const logEvent = async (
+	eventName: string,
+	attributes: Record<string, unknown>,
+): Promise<SuccessResponse<EventSuccessPayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.post('/event', {
+			eventName,
+			attributes,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default logEvent;

frontend/src/api/queryBuilder/getAggregateAttribute.ts

@@ -24,7 +24,7 @@ export const getAggregateAttribute = async ({
 		const response: AxiosResponse<{
 			data: IQueryAutocompleteResponse;
 		}> = await ApiV3Instance.get(
-			`autocomplete/aggregate_attributes?${createQueryParams({
+			`/autocomplete/aggregate_attributes?${createQueryParams({
 				aggregateOperator,
 				searchText,
 				dataSource,

frontend/src/api/queryBuilder/getAttributeKeys.ts

@@ -25,7 +25,7 @@ export const getAggregateKeys = async ({
 		const response: AxiosResponse<{
 			data: IQueryAutocompleteResponse;
 		}> = await ApiV3Instance.get(
-			`autocomplete/attribute_keys?${createQueryParams({
+			`/autocomplete/attribute_keys?${createQueryParams({
 				aggregateOperator,
 				searchText,
 				dataSource,

frontend/src/api/saveView/deleteView.ts

@@ -2,4 +2,4 @@ import axios from 'api';
 import { DeleteViewPayloadProps } from 'types/api/saveViews/types';
 
 export const deleteView = (uuid: string): Promise<DeleteViewPayloadProps> =>
-	axios.delete(`explorer/views/${uuid}`);
+	axios.delete(`/explorer/views/${uuid}`);

frontend/src/api/saveView/getAllViews.ts

@@ -6,4 +6,4 @@ import { DataSource } from 'types/common/queryBuilder';
 export const getAllViews = (
 	sourcepage: DataSource,
 ): Promise<AxiosResponse<AllViewsProps>> =>
-	axios.get(`explorer/views?sourcePage=${sourcepage}`);
+	axios.get(`/explorer/views?sourcePage=${sourcepage}`);

frontend/src/api/saveView/saveView.ts

@@ -8,7 +8,7 @@ export const saveView = ({
 	viewName,
 	extraData,
 }: SaveViewProps): Promise<AxiosResponse<SaveViewPayloadProps>> =>
-	axios.post('explorer/views', {
+	axios.post('/explorer/views', {
 		name: viewName,
 		sourcePage,
 		compositeQuery,

frontend/src/api/saveView/updateView.ts

@@ -11,7 +11,7 @@ export const updateView = ({
 	sourcePage,
 	viewKey,
 }: UpdateViewProps): Promise<UpdateViewPayloadProps> =>
-	axios.put(`explorer/views/${viewKey}`, {
+	axios.put(`/explorer/views/${viewKey}`, {
 		name: viewName,
 		compositeQuery,
 		extraData,

frontend/src/assets/Integrations/ConfigureIcon.tsx

@@ -0,0 +1,23 @@
+import { Color } from '@signozhq/design-tokens';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function ConfigureIcon(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<g
+				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
+				strokeWidth="1.333"
+				strokeLinecap="round"
+			>
+				<path
+					d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z"
+					strokeLinejoin="round"
+				/>
+				<path d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3M10.75 10.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z" />
+			</g>
+		</svg>
+	);
+}
+
+export default ConfigureIcon;

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -5,13 +5,14 @@ import './CustomTimePicker.styles.scss';
 import { Input, Popover, Tooltip, Typography } from 'antd';
 import cx from 'classnames';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import { Options } from 'container/TopNav/DateTimeSelection/config';
 import {
 	FixedDurationSuggestionOptions,
+	Options,
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/config';
 import dayjs from 'dayjs';
-import { defaultTo, noop } from 'lodash-es';
+import { isValidTimeFormat } from 'lib/getMinMax';
+import { defaultTo, isFunction, noop } from 'lodash-es';
 import debounce from 'lodash-es/debounce';
 import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
 import {
@@ -33,7 +34,14 @@ interface CustomTimePickerProps {
 	onError: (value: boolean) => void;
 	selectedValue: string;
 	selectedTime: string;
-	onValidCustomDateChange: ([t1, t2]: any[]) => void;
+	onValidCustomDateChange: ({
+		time: [t1, t2],
+		timeStr,
+	}: {
+		time: [dayjs.Dayjs | null, dayjs.Dayjs | null];
+		timeStr: string;
+	}) => void;
+	onCustomTimeStatusUpdate?: (isValid: boolean) => void;
 	open: boolean;
 	setOpen: Dispatch<SetStateAction<boolean>>;
 	items: any[];
@@ -53,6 +61,7 @@ function CustomTimePicker({
 	open,
 	setOpen,
 	onValidCustomDateChange,
+	onCustomTimeStatusUpdate,
 	newPopover,
 	customDateTimeVisible,
 	setCustomDTPickerVisible,
@@ -85,6 +94,7 @@ function CustomTimePicker({
 				return Options[index].label;
 			}
 		}
+
 		for (
 			let index = 0;
 			index < RelativeDurationSuggestionOptions.length;
@@ -94,12 +104,17 @@ function CustomTimePicker({
 				return RelativeDurationSuggestionOptions[index].label;
 			}
 		}
+
 		for (let index = 0; index < FixedDurationSuggestionOptions.length; index++) {
 			if (FixedDurationSuggestionOptions[index].value === selectedTime) {
 				return FixedDurationSuggestionOptions[index].label;
 			}
 		}
 
+		if (isValidTimeFormat(selectedTime)) {
+			return selectedTime;
+		}
+
 		return '';
 	};
 
@@ -161,13 +176,22 @@ function CustomTimePicker({
 				setInputStatus('error');
 				onError(true);
 				setInputErrorMessage('Please enter time less than 6 months');
+				if (isFunction(onCustomTimeStatusUpdate)) {
+					onCustomTimeStatusUpdate(true);
+				}
 			} else {
-				onValidCustomDateChange([minTime, currentTime]);
+				onValidCustomDateChange({
+					time: [minTime, currentTime],
+					timeStr: inputValue,
+				});
 			}
 		} else {
 			setInputStatus('error');
 			onError(true);
 			setInputErrorMessage(null);
+			if (isFunction(onCustomTimeStatusUpdate)) {
+				onCustomTimeStatusUpdate(false);
+			}
 		}
 	}, 300);
 
@@ -320,4 +344,5 @@ CustomTimePicker.defaultProps = {
 	setCustomDTPickerVisible: noop,
 	onCustomDateHandler: noop,
 	handleGoLive: noop,
+	onCustomTimeStatusUpdate: noop,
 };

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

@@ -37,12 +37,17 @@ const convert = new Convert();
 interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
+	linesPerRow?: number;
 }
 
-type LogSelectedFieldProps = LogFieldProps &
+type LogSelectedFieldProps = Omit<LogFieldProps, 'linesPerRow'> &
 	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
 
-function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
+function LogGeneralField({
+	fieldKey,
+	fieldValue,
+	linesPerRow = 1,
+}: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
 			__html: convert.toHtml(dompurify.sanitize(fieldValue)),
@@ -55,7 +60,11 @@ function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
 			<Text ellipsis type="secondary" className="log-field-key">
 				{`${fieldKey} : `}
 			</Text>
-			<LogText dangerouslySetInnerHTML={html} className="log-value" />
+			<LogText
+				dangerouslySetInnerHTML={html}
+				className="log-value"
+				linesPerRow={linesPerRow > 1 ? linesPerRow : undefined}
+			/>
 		</TextContainer>
 	);
 }
@@ -92,6 +101,7 @@ type ListLogViewProps = {
 	onSetActiveLog: (log: ILog) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
+	linesPerRow: number;
 };
 
 function ListLogView({
@@ -100,6 +110,7 @@ function ListLogView({
 	onSetActiveLog,
 	onAddToQuery,
 	activeLog,
+	linesPerRow,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -179,7 +190,11 @@ function ListLogView({
 					/>
 					<div>
 						<LogContainer>
-							<LogGeneralField fieldKey="Log" fieldValue={flattenLogData.body} />
+							<LogGeneralField
+								fieldKey="Log"
+								fieldValue={flattenLogData.body}
+								linesPerRow={linesPerRow}
+							/>
 							{flattenLogData.stream && (
 								<LogGeneralField fieldKey="Stream" fieldValue={flattenLogData.stream} />
 							)}
@@ -222,4 +237,8 @@ ListLogView.defaultProps = {
 	activeLog: null,
 };
 
+LogGeneralField.defaultProps = {
+	linesPerRow: 1,
+};
+
 export default ListLogView;

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

@@ -2,6 +2,10 @@ import { Color } from '@signozhq/design-tokens';
 import { Card, Typography } from 'antd';
 import styled from 'styled-components';
 
+interface LogTextProps {
+	linesPerRow?: number;
+}
+
 export const Container = styled(Card)<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
@@ -23,7 +27,7 @@ export const Container = styled(Card)<{
 
 export const Text = styled(Typography.Text)`
 	&&& {
-		min-width: 1.5rem;
+		min-width: 2.5rem;
 		white-space: nowrap;
 	}
 `;
@@ -41,11 +45,19 @@ export const LogContainer = styled.div`
 	gap: 6px;
 `;
 
-export const LogText = styled.div`
+export const LogText = styled.div<LogTextProps>`
 	display: inline-block;
 	text-overflow: ellipsis;
 	overflow: hidden;
-	white-space: nowrap;
+	${({ linesPerRow }): string =>
+		linesPerRow
+			? `-webkit-line-clamp: ${linesPerRow};
+		line-clamp: ${linesPerRow};
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		white-space: normal; `
+			: 'white-space: nowrap;'};
+	};
 `;
 
 export const SelectedLog = styled.div`

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

@@ -27,7 +27,7 @@
 			line-height: 18px;
 			letter-spacing: 0.08em;
 			text-align: left;
-			color: var(--bg-slate-200, #52575c);
+			color: #52575c;
 		}
 
 		.menu-items {
@@ -65,7 +65,7 @@
 		padding: 12px;
 
 		.title {
-			color: var(--bg-slate-200, #52575c);
+			color: #52575c;
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;
@@ -149,7 +149,7 @@
 		}
 
 		.title {
-			color: var(--bg-slate-200, #52575c);
+			color: #52575c;
 			font-family: Inter;
 			font-size: 11px;
 			font-style: normal;

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -120,38 +120,36 @@ export default function LogsFormatOptionsMenu({
 
 			{selectedItem && (
 				<>
-					{selectedItem === 'raw' && (
+					<>
-						<>
+						<div className="horizontal-line" />
-							<div className="horizontal-line" />
+						<div className="max-lines-per-row">
-							<div className="max-lines-per-row">
+							<div className="title"> max lines per row </div>
-								<div className="title"> max lines per row </div>
+							<div className="raw-format max-lines-per-row-input">
-								<div className="raw-format max-lines-per-row-input">
+								<button
-									<button
+									type="button"
-										type="button"
+									className="periscope-btn"
-										className="periscope-btn"
+									onClick={decrementMaxLinesPerRow}
-										onClick={decrementMaxLinesPerRow}
+								>
-									>
+									{' '}
-										{' '}
+									<Minus size={12} />{' '}
-										<Minus size={12} />{' '}
+								</button>
-									</button>
+								<InputNumber
-									<InputNumber
+									min={1}
-										min={1}
+									max={10}
-										max={10}
+									value={maxLinesPerRow}
-										value={maxLinesPerRow}
+									onChange={handleLinesPerRowChange}
-										onChange={handleLinesPerRowChange}
+								/>
-									/>
+								<button
-									<button
+									type="button"
-										type="button"
+									className="periscope-btn"
-										className="periscope-btn"
+									onClick={incrementMaxLinesPerRow}
-										onClick={incrementMaxLinesPerRow}
+								>
-									>
+									{' '}
-										{' '}
+									<Plus size={12} />{' '}
-										<Plus size={12} />{' '}
+								</button>
-									</button>
-								</div>
 							</div>
-						</>
+						</div>
-					)}
+					</>
 
 					<div className="selected-item-content-container active">
 						{!addNewColumn && <div className="horizontal-line" />}

frontend/src/constants/localStorage.ts

@@ -16,4 +16,6 @@ export enum LOCALSTORAGE {
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
+	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
+	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 }

frontend/src/constants/query.ts

@@ -27,5 +27,7 @@ export enum QueryParams {
 	viewName = 'viewName',
 	viewKey = 'viewKey',
 	expandedWidgetId = 'expandedWidgetId',
+	integration = 'integration',
 	pagination = 'pagination',
+	relativeTime = 'relativeTime',
 }

frontend/src/constants/routes.ts

@@ -51,9 +51,7 @@ const ROUTES = {
 	TRACES_SAVE_VIEWS: '/traces/saved-views',
 	WORKSPACE_LOCKED: '/workspace-locked',
 	SHORTCUTS: '/shortcuts',
-	INTEGRATIONS_BASE: '/integrations',
+	INTEGRATIONS: '/integrations',
-	INTEGRATIONS_INSTALLED: '/integrations/installed',
-	INTEGRATIONS_MARKETPLACE: '/integrations/marketplace',
 } as const;
 
 export default ROUTES;

frontend/src/constants/shortcuts/DashboardShortcuts.ts

@@ -9,9 +9,10 @@ export const DashboardShortcuts = {
 
 export const DashboardShortcutsName = {
 	SaveChanges: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+s`,
+	DiscardChanges: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+d`,
 };
 
 export const DashboardShortcutsDescription = {
-	SaveChanges: 'Save Changes',
+	SaveChanges: 'Save Changes for panel',
-	DiscardChanges: 'Discard Changes',
+	DiscardChanges: 'Discard Changes for panel',
 };

frontend/src/constants/shortcuts/QBShortcuts.ts

@@ -13,5 +13,5 @@ export const QBShortcutsName = {
 };
 
 export const QBShortcutsDescription = {
-	StageAndRunQuery: 'Stage and Run the query',
+	StageAndRunQuery: 'Stage and Run the current query',
 };

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -56,14 +56,14 @@ describe('BillingContainer', () => {
 		expect(cost).toBeInTheDocument();
 
 		const manageBilling = screen.getByRole('button', {
-			name: /manage billing/i,
+			name: 'manage_billing',
 		});
 		expect(manageBilling).toBeInTheDocument();
 
 		const dollar = screen.getByText(/\$0/i);
 		expect(dollar).toBeInTheDocument();
 
-		const currentBill = screen.getByText('Billing');
+		const currentBill = screen.getByText('billing');
 		expect(currentBill).toBeInTheDocument();
 	});
 
@@ -75,7 +75,7 @@ describe('BillingContainer', () => {
 		const freeTrailText = await screen.findByText('Free Trial');
 		expect(freeTrailText).toBeInTheDocument();
 
-		const currentBill = screen.getByText('Billing');
+		const currentBill = screen.getByText('billing');
 		expect(currentBill).toBeInTheDocument();
 
 		const dollar0 = await screen.findByText(/\$0/i);
@@ -85,18 +85,14 @@ describe('BillingContainer', () => {
 		);
 		expect(onTrail).toBeInTheDocument();
 
-		const numberOfDayRemaining = await screen.findByText(
+		const numberOfDayRemaining = await screen.findByText(/1 days_remaining/i);
-			/1 days remaining in your billing period./i,
-		);
 		expect(numberOfDayRemaining).toBeInTheDocument();
 		const upgradeButton = await screen.findAllByRole('button', {
-			name: /upgrade/i,
+			name: /upgrade_plan/i,
 		});
 		expect(upgradeButton[1]).toBeInTheDocument();
 		expect(upgradeButton.length).toBe(2);
-		const checkPaidPlan = await screen.findByText(
+		const checkPaidPlan = await screen.findByText(/checkout_plans/i);
-			/Check out features in paid plans/i,
-		);
 		expect(checkPaidPlan).toBeInTheDocument();
 
 		const link = screen.getByRole('link', { name: /here/i });
@@ -114,7 +110,7 @@ describe('BillingContainer', () => {
 			render(<BillingContainer />);
 		});
 
-		const currentBill = screen.getByText('Billing');
+		const currentBill = screen.getByText('billing');
 		expect(currentBill).toBeInTheDocument();
 
 		const dollar0 = await screen.findByText(/\$0/i);
@@ -126,17 +122,17 @@ describe('BillingContainer', () => {
 		expect(onTrail).toBeInTheDocument();
 
 		const receivedCardDetails = await screen.findByText(
-			/We have received your card details, your billing will only start after the end of your free trial period./i,
+			/card_details_recieved_and_billing_info/i,
 		);
 		expect(receivedCardDetails).toBeInTheDocument();
 
 		const manageBillingButton = await screen.findByRole('button', {
-			name: /manage billing/i,
+			name: /manage_billing/i,
 		});
 		expect(manageBillingButton).toBeInTheDocument();
 
 		const dayRemainingInBillingPeriod = await screen.findByText(
-			/1 days remaining in your billing period./i,
+			/1 days_remaining/i,
 		);
 		expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 	});
@@ -156,7 +152,7 @@ describe('BillingContainer', () => {
 		const billingPeriod = await findByText(billingPeriodText);
 		expect(billingPeriod).toBeInTheDocument();
 
-		const currentBill = screen.getByText('Billing');
+		const currentBill = screen.getByText('billing');
 		expect(currentBill).toBeInTheDocument();
 
 		const dollar0 = await screen.findByText(/\$1,278.3/i);
@@ -181,7 +177,7 @@ describe('BillingContainer', () => {
 		);
 		render(<BillingContainer />);
 		const dayRemainingInBillingPeriod = await screen.findByText(
-			/11 days remaining in your billing period./i,
+			/11 days_remaining/i,
 		);
 		expect(dayRemainingInBillingPeriod).toBeInTheDocument();
 	});

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -17,7 +17,7 @@ import {
 } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import updateCreditCardApi from 'api/billing/checkout';
-import getUsage from 'api/billing/getUsage';
+import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import manageCreditCardApi from 'api/billing/manage';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -26,8 +26,9 @@ import useAnalytics from 'hooks/analytics/useAnalytics';
 import useAxiosError from 'hooks/useAxiosError';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import { pick } from 'lodash-es';
+import { isEmpty, pick } from 'lodash-es';
 import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
@@ -49,6 +50,11 @@ interface DataType {
 	cost: string;
 }
 
+enum SubscriptionStatus {
+	PastDue = 'past_due',
+	Active = 'active',
+}
+
 const renderSkeletonInput = (): JSX.Element => (
 	<Skeleton.Input
 		style={{ marginTop: '10px', height: '40px', width: '100%' }}
@@ -116,15 +122,19 @@ const dummyColumns: ColumnsType<DataType> = [
 	},
 ];
 
+// eslint-disable-next-line sonarjs/cognitive-complexity
 export default function BillingContainer(): JSX.Element {
-	const daysRemainingStr = 'days remaining in your billing period.';
+	const { t } = useTranslation(['billings']);
+	const daysRemainingStr = t('days_remaining');
 	const [headerText, setHeaderText] = useState('');
 	const [billAmount, setBillAmount] = useState(0);
 	const [activeLicense, setActiveLicense] = useState<License | null>(null);
 	const [daysRemaining, setDaysRemaining] = useState(0);
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
 	const [data, setData] = useState<any[]>([]);
-	const [apiResponse, setApiResponse] = useState<any>({});
+	const [apiResponse, setApiResponse] = useState<
+		Partial<UsageResponsePayloadProps>
+	>({});
 
 	const { trackEvent } = useAnalytics();
 
@@ -139,6 +149,9 @@ export default function BillingContainer(): JSX.Element {
 
 	const processUsageData = useCallback(
 		(data: any): void => {
+			if (isEmpty(data?.payload)) {
+				return;
+			}
 			const {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
@@ -186,6 +199,9 @@ export default function BillingContainer(): JSX.Element {
 		[licensesData?.payload?.onTrial],
 	);
 
+	const isSubscriptionPastDue =
+		apiResponse.subscriptionStatus === SubscriptionStatus.PastDue;
+
 	const { isLoading, isFetching: isFetchingBillingData } = useQuery(
 		[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
 		{
@@ -342,14 +358,27 @@ export default function BillingContainer(): JSX.Element {
 		[apiResponse, billAmount, isLoading, isFetchingBillingData],
 	);
 
+	const { Text } = Typography;
+	const subscriptionPastDueMessage = (): JSX.Element => (
+		<Typography>
+			{`We were not able to process payments for your account. Please update your card details `}
+			<Text type="danger" onClick={handleBilling} style={{ cursor: 'pointer' }}>
+				{t('here')}
+			</Text>
+			{` if your payment information has changed. Email us at `}
+			<Text type="secondary">cloud-support@signoz.io</Text>
+			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
+		</Typography>
+	);
+
 	return (
 		<div className="billing-container">
 			<Flex vertical style={{ marginBottom: 16 }}>
 				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
-					Billing
+					{t('billing')}
 				</Typography.Text>
 				<Typography.Text color={Color.BG_VANILLA_400}>
-					Manage your billing information, invoices, and monitor costs.
+					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
 
@@ -361,7 +390,7 @@ export default function BillingContainer(): JSX.Element {
 				<Flex justify="space-between" align="center">
 					<Flex vertical>
 						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
-							{isCloudUserVal ? 'Enterprise Cloud' : 'Enterprise'}{' '}
+							{isCloudUserVal ? t('enterprise_cloud') : t('enterprise')}{' '}
 							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
 						</Typography.Title>
 						{!isLoading && !isFetchingBillingData ? (
@@ -378,8 +407,8 @@ export default function BillingContainer(): JSX.Element {
 						onClick={handleBilling}
 					>
 						{isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription
-							? 'Upgrade Plan'
+							? t('upgrade_plan')
-							: 'Manage Billing'}
+							: t('manage_billing')}
 					</Button>
 				</Flex>
 
@@ -389,21 +418,34 @@ export default function BillingContainer(): JSX.Element {
 							ellipsis
 							style={{ fontWeight: '300', color: '#49aa19', fontSize: 12 }}
 						>
-							We have received your card details, your billing will only start after
+							{t('card_details_recieved_and_billing_info')}
-							the end of your free trial period.
 						</Typography.Text>
 					)}
 
 				{!isLoading && !isFetchingBillingData ? (
-					<Alert
+					headerText && (
-						message={headerText}
+						<Alert
-						type="info"
+							message={headerText}
-						showIcon
+							type="info"
-						style={{ marginTop: 12 }}
+							showIcon
-					/>
+							style={{ marginTop: 12 }}
+						/>
+					)
 				) : (
 					<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 				)}
+
+				{isSubscriptionPastDue &&
+					(!isLoading && !isFetchingBillingData ? (
+						<Alert
+							message={subscriptionPastDueMessage()}
+							type="error"
+							showIcon
+							style={{ marginTop: 12 }}
+						/>
+					) : (
+						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
+					))}
 			</Card>
 
 			<BillingUsageGraphCallback />
@@ -434,16 +476,16 @@ export default function BillingContainer(): JSX.Element {
 						<Col span={20} className="plan-benefits">
 							<Typography.Text className="plan-benefit">
 								<CheckCircleOutlined />
-								Upgrade now to have uninterrupted access
+								{t('upgrade_now_text')}
 							</Typography.Text>
 							<Typography.Text className="plan-benefit">
 								<CheckCircleOutlined />
-								Your billing will start only after the trial period
+								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
 							<Typography.Text className="plan-benefit">
 								<CheckCircleOutlined />
 								<span>
-									Check out features in paid plans &nbsp;
+									{t('checkout_plans')} &nbsp;
 									<a
 										href="https://signoz.io/pricing/"
 										style={{
@@ -452,7 +494,7 @@ export default function BillingContainer(): JSX.Element {
 										target="_blank"
 										rel="noreferrer"
 									>
-										here
+										{t('here')}
 									</a>
 								</span>
 							</Typography.Text>
@@ -464,7 +506,7 @@ export default function BillingContainer(): JSX.Element {
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>
-								Upgrade Plan
+								{t('upgrade_plan')}
 							</Button>
 						</Col>
 					</Row>

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -3,9 +3,7 @@ import '../../../lib/uPlotLib/uPlotLib.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import { Card, Flex, Typography } from 'antd';
-import { getComponentForPanelType } from 'constants/panelTypes';
+import Uplot from 'components/Uplot';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PropsTypePropsMap } from 'container/GridPanelSwitch/types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
@@ -14,7 +12,7 @@ import getRenderer from 'lib/uPlotLib/utils/getRenderer';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
 import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
-import { FC, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import uPlot from 'uplot';
 
 import {
@@ -43,6 +41,21 @@ const paths = (
 	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
 };
 
+const calculateStartEndTime = (
+	data: any,
+): { startTime: number; endTime: number } => {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
+			timestamps.push(entry?.timestamp);
+		});
+	});
+	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
+	const startTime: number = Math.min(...timestamps, ...billingTime);
+	const endTime: number = Math.max(...timestamps, ...billingTime);
+	return { startTime, endTime };
+};
+
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
 	const graphCompatibleData = useMemo(
@@ -54,11 +67,9 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	const { billingPeriodStart: startTime, billingPeriodEnd: endTime } = data;
+	const { startTime, endTime } = useMemo(() => calculateStartEndTime(data), [
-
+		data,
-	const Component = getComponentForPanelType(PANEL_TYPES.BAR) as FC<
+	]);
-		PropsTypePropsMap[PANEL_TYPES]
-	>;
 
 	const getGraphSeries = (color: string, label: string): any => ({
 		drawStyle: 'bars',
@@ -183,7 +194,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 				</Flex>
 			</Flex>
 			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
-				<Component data={chartData} options={optionsForChart} />
+				<Uplot data={chartData} options={optionsForChart} />
 			</div>
 		</Card>
 	);

frontend/src/container/DownloadV2/DownloadV2.styles.scss

@@ -0,0 +1,84 @@
+.download-logs-popover {
+	.ant-popover-inner {
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			rgba(18, 19, 23, 0.8) 0%,
+			rgba(18, 19, 23, 0.9) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 12px 18px 12px 14px;
+
+		.download-logs-content {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			align-items: flex-start;
+
+			.action-btns {
+				padding: 4px 0px !important;
+				width: 159px;
+				display: flex;
+				align-items: center;
+				color: var(--bg-vanilla-400);
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: normal;
+				letter-spacing: 0.14px;
+				gap: 6px;
+
+				.ant-btn-icon {
+					margin-inline-end: 0px;
+				}
+			}
+
+			.action-btns:hover {
+				&.ant-btn-text {
+					background-color: rgba(171, 189, 255, 0.04) !important;
+				}
+			}
+
+			.export-heading {
+				color: #52575c;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.88px;
+				text-transform: uppercase;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.download-logs-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--bg-vanilla-300);
+			background: linear-gradient(
+				139deg,
+				rgba(255, 255, 255, 0.8) 0%,
+				rgba(255, 255, 255, 0.9) 98.68%
+			);
+
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+
+			.download-logs-content {
+				.action-btns {
+					color: var(--bg-ink-400);
+				}
+				.action-btns:hover {
+					&.ant-btn-text {
+						background-color: var(--bg-vanilla-300) !important;
+					}
+				}
+				.export-heading {
+					color: var(--bg-ink-200);
+				}
+			}
+		}
+	}
+}

frontend/src/container/DownloadV2/DownloadV2.tsx

@@ -0,0 +1,84 @@
+import './DownloadV2.styles.scss';
+
+import { Button, Popover, Typography } from 'antd';
+import { Excel } from 'antd-table-saveas-excel';
+import { FileDigit, FileDown, Sheet } from 'lucide-react';
+import { unparse } from 'papaparse';
+
+import { DownloadProps } from './DownloadV2.types';
+
+function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
+	const downloadExcelFile = (): void => {
+		const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
+			const updatedTitle = item
+				.split('_')
+				.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+				.join(' ');
+			return {
+				title: updatedTitle,
+				dataIndex: item,
+			};
+		});
+		const excel = new Excel();
+		excel
+			.addSheet(fileName)
+			.addColumns(headers)
+			.addDataSource(data, {
+				str2Percent: true,
+			})
+			.saveAs(`${fileName}.xlsx`);
+	};
+
+	const downloadCsvFile = (): void => {
+		const csv = unparse(data);
+		const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		const csvUrl = URL.createObjectURL(csvBlob);
+		const downloadLink = document.createElement('a');
+		downloadLink.href = csvUrl;
+		downloadLink.download = `${fileName}.csv`;
+		downloadLink.click();
+		downloadLink.remove();
+	};
+
+	return (
+		<Popover
+			trigger={['click']}
+			placement="bottomRight"
+			rootClassName="download-logs-popover"
+			arrow={false}
+			content={
+				<div className="download-logs-content">
+					<Typography.Text className="export-heading">Export As</Typography.Text>
+					<Button
+						icon={<Sheet size={14} />}
+						type="text"
+						onClick={downloadExcelFile}
+						className="action-btns"
+					>
+						Excel (.xlsx)
+					</Button>
+					<Button
+						icon={<FileDigit size={14} />}
+						type="text"
+						onClick={downloadCsvFile}
+						className="action-btns"
+					>
+						CSV
+					</Button>
+				</div>
+			}
+		>
+			<Button
+				className="periscope-btn"
+				loading={isLoading}
+				icon={<FileDown size={14} />}
+			/>
+		</Popover>
+	);
+}
+
+Download.defaultProps = {
+	isLoading: undefined,
+};
+
+export default Download;

frontend/src/container/DownloadV2/DownloadV2.types.ts

@@ -0,0 +1,10 @@
+export type DownloadOptions = {
+	isDownloadEnabled: boolean;
+	fileName: string;
+};
+
+export type DownloadProps = {
+	data: Record<string, string>[];
+	isLoading?: boolean;
+	fileName: string;
+};

frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+import ExplorerOptions, { ExplorerOptionsProps } from './ExplorerOptions';
+import { getExplorerToolBarVisibility } from './utils';
+
+type ExplorerOptionsWrapperProps = Omit<
+	ExplorerOptionsProps,
+	'isExplorerOptionDrop'
+>;
+
+function ExplorerOptionWrapper({
+	disabled,
+	query,
+	isLoading,
+	onExport,
+	sourcepage,
+}: ExplorerOptionsWrapperProps): JSX.Element {
+	const [isExplorerOptionHidden, setIsExplorerOptionHidden] = useState(false);
+
+	useEffect(() => {
+		const toolbarVisibility = getExplorerToolBarVisibility(sourcepage);
+		setIsExplorerOptionHidden(!toolbarVisibility);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<ExplorerOptions
+			disabled={disabled}
+			query={query}
+			isLoading={isLoading}
+			onExport={onExport}
+			sourcepage={sourcepage}
+			isExplorerOptionHidden={isExplorerOptionHidden}
+			setIsExplorerOptionHidden={setIsExplorerOptionHidden}
+		/>
+	);
+}
+
+export default ExplorerOptionWrapper;

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -3,8 +3,8 @@
 }
 .explorer-update {
 	position: fixed;
-	bottom: 16px;
+	bottom: 24px;
-	left: calc(50% - 225px);
+	left: calc(50% - 250px);
 	display: flex;
 	align-items: center;
 	gap: 12px;
@@ -37,21 +37,24 @@
 	}
 }
 
+	
 .explorer-options {
-	display: flex;
+	position: fixed;
-	gap: 16px;
+	bottom: 24px;
+	left: calc(50% + 240px);
 	padding: 10px 12px;
-	border-radius: 50px;
+	transform: translate(calc(-50% - 120px), 0);
+	transition: left 0.2s linear;
 	border: 1px solid var(--bg-slate-400);
+	border-radius: 50px;
 	background: rgba(22, 24, 29, 0.6);
 	box-shadow: 4px 4px 16px 4px rgba(0, 0, 0, 0.25);
 	backdrop-filter: blur(20px);
-	position: fixed;
-	bottom: 16px;
-	left: calc(50% + 240px);
-	transform: translate(calc(-50% - 120px), 0);
-	transition: left 0.2s linear;
 
+	cursor: default;
+	display: flex;
+	gap: 16px;
+	z-index: 1;
 	.ant-select-selector {
 		padding: 0 !important;
 	}
@@ -236,9 +239,9 @@
 
 .lightMode {
 	.explorer-options {
+		background: transparent;
+		box-shadow: none;
 		border: 1px solid var(--bg-vanilla-300);
-		background: rgba(255, 255, 255, 0.8);
-		box-shadow: 4px 4px 16px 4px rgba(255, 255, 255, 0.55);
 		backdrop-filter: blur(20px);
 
 		hr {

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import './ExplorerOptions.styles.scss';
 
 import { Color } from '@signozhq/design-tokens';
@@ -30,8 +31,24 @@ import useErrorNotification from 'hooks/useErrorNotification';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
-import { Check, ConciergeBell, Disc3, Plus, X, XCircle } from 'lucide-react';
+import {
-import { CSSProperties, useCallback, useMemo, useRef, useState } from 'react';
+	Check,
+	ConciergeBell,
+	Disc3,
+	PanelBottomClose,
+	Plus,
+	X,
+	XCircle,
+} from 'lucide-react';
+import {
+	CSSProperties,
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -41,11 +58,13 @@ import { DataSource } from 'types/common/queryBuilder';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
 
+import ExplorerOptionsHideArea from './ExplorerOptionsHideArea';
 import {
 	DATASOURCE_VS_ROUTES,
 	generateRGBAFromHex,
 	getRandomColor,
 	saveNewViewHandler,
+	setExplorerToolBarVisibility,
 } from './utils';
 
 const allowedRoles = [USER_ROLES.ADMIN, USER_ROLES.AUTHOR, USER_ROLES.EDITOR];
@@ -57,6 +76,8 @@ function ExplorerOptions({
 	onExport,
 	query,
 	sourcepage,
+	isExplorerOptionHidden = false,
+	setIsExplorerOptionHidden,
 }: ExplorerOptionsProps): JSX.Element {
 	const [isExport, setIsExport] = useState<boolean>(false);
 	const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
@@ -257,11 +278,18 @@ function ExplorerOptions({
 		[isDarkMode],
 	);
 
+	const hideToolbar = (): void => {
+		setExplorerToolBarVisibility(false, sourcepage);
+		if (setIsExplorerOptionHidden) {
+			setIsExplorerOptionHidden(true);
+		}
+	};
+
 	const isEditDeleteSupported = allowedRoles.includes(role as string);
 
 	return (
 		<>
-			{isQueryUpdated && (
+			{isQueryUpdated && !isExplorerOptionHidden && (
 				<div
 					className={cx(
 						isEditDeleteSupported ? '' : 'hide-update',
@@ -289,87 +317,103 @@ function ExplorerOptions({
 					</Tooltip>
 				</div>
 			)}
-			<div
+			{!isExplorerOptionHidden && (
-				className="explorer-options"
+				<div
-				style={{
+					className="explorer-options"
-					background: extraData
+					style={{
-						? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
+						background: extraData
-						: 'transparent',
+							? `linear-gradient(90deg, rgba(0,0,0,0) -5%, ${rgbaColor} 9%, rgba(0,0,0,0) 30%)`
-					backdropFilter: 'blur(20px)',
+							: 'transparent',
-				}}
+					}}
-			>
+				>
-				<div className="view-options">
+					<div className="view-options">
-					<Select<string, { key: string; value: string }>
+						<Select<string, { key: string; value: string }>
-						showSearch
+							showSearch
-						placeholder="Select a view"
+							placeholder="Select a view"
-						loading={viewsIsLoading || isRefetching}
+							loading={viewsIsLoading || isRefetching}
-						value={viewName || undefined}
+							value={viewName || undefined}
-						onSelect={handleSelect}
+							onSelect={handleSelect}
-						style={{
+							style={{
-							minWidth: 170,
+								minWidth: 170,
-						}}
+							}}
-						dropdownStyle={dropdownStyle}
+							dropdownStyle={dropdownStyle}
-						className="views-dropdown"
+							className="views-dropdown"
-						allowClear={{
+							allowClear={{
-							clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
+								clearIcon: <XCircle size={16} style={{ marginTop: '-3px' }} />,
-						}}
+							}}
-						onClear={handleClearSelect}
+							onClear={handleClearSelect}
-						ref={ref}
+							ref={ref}
-					>
-						{viewsData?.data?.data?.map((view) => {
-							const extraData =
-								view.extraData !== '' ? JSON.parse(view.extraData) : '';
-							let bgColor = getRandomColor();
-							if (extraData !== '') {
-								bgColor = extraData.color;
-							}
-							return (
-								<Select.Option key={view.uuid} value={view.name}>
-									<div className="render-options">
-										<span
-											className="dot"
-											style={{
-												background: bgColor,
-												boxShadow: `0px 0px 6px 0px ${bgColor}`,
-											}}
-										/>{' '}
-										{view.name}
-									</div>
-								</Select.Option>
-							);
-						})}
-					</Select>
-
-					<Button
-						shape="round"
-						onClick={handleSaveViewModalToggle}
-						className={isEditDeleteSupported ? '' : 'hidden'}
-						disabled={viewsIsLoading || isRefetching}
-					>
-						<Disc3 size={16} /> Save this view
-					</Button>
-				</div>
-
-				<hr className={isEditDeleteSupported ? '' : 'hidden'} />
-
-				<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-					<Tooltip title="Create Alerts">
-						<Button
-							disabled={disabled}
-							shape="circle"
-							onClick={onCreateAlertsHandler}
 						>
-							<ConciergeBell size={16} />
+							{viewsData?.data?.data?.map((view) => {
-						</Button>
+								const extraData =
-					</Tooltip>
+									view.extraData !== '' ? JSON.parse(view.extraData) : '';
+								let bgColor = getRandomColor();
+								if (extraData !== '') {
+									bgColor = extraData.color;
+								}
+								return (
+									<Select.Option key={view.uuid} value={view.name}>
+										<div className="render-options">
+											<span
+												className="dot"
+												style={{
+													background: bgColor,
+													boxShadow: `0px 0px 6px 0px ${bgColor}`,
+												}}
+											/>{' '}
+											{view.name}
+										</div>
+									</Select.Option>
+								);
+							})}
+						</Select>
 
-					<Tooltip title="Add to Dashboard">
+						<Button
-						<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
+							shape="round"
-							<Plus size={16} />
+							onClick={handleSaveViewModalToggle}
+							className={isEditDeleteSupported ? '' : 'hidden'}
+							disabled={viewsIsLoading || isRefetching}
+						>
+							<Disc3 size={16} /> Save this view
 						</Button>
-					</Tooltip>
+					</div>
+
+					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
+
+					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
+						<Tooltip title="Create Alerts">
+							<Button
+								disabled={disabled}
+								shape="circle"
+								onClick={onCreateAlertsHandler}
+							>
+								<ConciergeBell size={16} />
+							</Button>
+						</Tooltip>
+
+						<Tooltip title="Add to Dashboard">
+							<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
+								<Plus size={16} />
+							</Button>
+						</Tooltip>
+
+						<Tooltip title="Hide">
+							<Button disabled={disabled} shape="circle" onClick={hideToolbar}>
+								<PanelBottomClose size={16} />
+							</Button>
+						</Tooltip>
+					</div>
 				</div>
-			</div>
+			)}
+
+			<ExplorerOptionsHideArea
+				isExplorerOptionHidden={isExplorerOptionHidden}
+				setIsExplorerOptionHidden={setIsExplorerOptionHidden}
+				sourcepage={sourcepage}
+				isQueryUpdated={isQueryUpdated}
+				handleClearSelect={handleClearSelect}
+				onUpdateQueryHandler={onUpdateQueryHandler}
+			/>
 
 			<Modal
 				className="save-view-modal"
@@ -427,8 +471,14 @@ export interface ExplorerOptionsProps {
 	query: Query | null;
 	disabled: boolean;
 	sourcepage: DataSource;
+	isExplorerOptionHidden?: boolean;
+	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
 }
 
-ExplorerOptions.defaultProps = { isLoading: false };
+ExplorerOptions.defaultProps = {
+	isLoading: false,
+	isExplorerOptionHidden: false,
+	setIsExplorerOptionHidden: undefined,
+};
 
 export default ExplorerOptions;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -0,0 +1,55 @@
+.explorer-option-droppable-container {
+    position: fixed;
+	bottom: 0;
+    width: -webkit-fill-available;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    border-radius: 10px 10px 0px 0px;
+    // box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+    // backdrop-filter: blur(20px);
+
+    .explorer-actions-btn {
+        display: flex;
+        gap: 8px;
+        margin-right: 8px;
+
+        .action-btn {
+            display: flex; 
+            justify-content: center;
+            align-items: center;
+            border-radius: 10px 10px 0px 0px;
+            box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+            backdrop-filter: blur(20px);
+            height: 24px !important;
+            border: none;
+        }
+    }
+
+    .explorer-show-btn {
+        border-radius: 10px 10px 0px 0px;
+        border: 1px solid var(--bg-slate-400);
+        background: rgba(22, 24, 29, 0.40);
+        box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+        backdrop-filter: blur(20px);
+        align-self: center;
+        padding: 8px 12px;
+        height: 24px !important;
+
+        .menu-bar {
+            border-radius: 50px;
+            background: var(--bg-slate-200);
+            height: 4px;
+            width: 50px;
+        }
+    }
+}
+
+.lightMode {
+    .explorer-option-droppable-container {
+
+        .explorer-show-btn {
+            background: var(--bg-vanilla-200);
+        }
+    }
+}

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable no-nested-ternary */
+import './ExplorerOptionsHideArea.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Tooltip } from 'antd';
+import { Disc3, X } from 'lucide-react';
+import { Dispatch, SetStateAction } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { setExplorerToolBarVisibility } from './utils';
+
+interface DroppableAreaProps {
+	isQueryUpdated: boolean;
+	isExplorerOptionHidden?: boolean;
+	sourcepage: DataSource;
+	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
+	handleClearSelect: () => void;
+	onUpdateQueryHandler: () => void;
+}
+
+function ExplorerOptionsHideArea({
+	isQueryUpdated,
+	isExplorerOptionHidden,
+	sourcepage,
+	setIsExplorerOptionHidden,
+	handleClearSelect,
+	onUpdateQueryHandler,
+}: DroppableAreaProps): JSX.Element {
+	const handleShowExplorerOption = (): void => {
+		if (setIsExplorerOptionHidden) {
+			setIsExplorerOptionHidden(false);
+			setExplorerToolBarVisibility(true, sourcepage);
+		}
+	};
+
+	return (
+		<div className="explorer-option-droppable-container">
+			{isExplorerOptionHidden && (
+				<>
+					{isQueryUpdated && (
+						<div className="explorer-actions-btn">
+							<Tooltip title="Clear this view">
+								<Button
+									onClick={handleClearSelect}
+									className="action-btn"
+									style={{ background: Color.BG_CHERRY_500 }}
+									icon={<X size={14} color={Color.BG_INK_500} />}
+								/>
+							</Tooltip>
+							<Tooltip title="Update this View">
+								<Button
+									onClick={onUpdateQueryHandler}
+									className="action-btn"
+									style={{ background: Color.BG_ROBIN_500 }}
+									icon={<Disc3 size={14} color={Color.BG_INK_500} />}
+								/>
+							</Tooltip>
+						</div>
+					)}
+					<Button
+						// style={{ alignSelf: 'center', marginRight: 'calc(10% - 20px)' }}
+						className="explorer-show-btn"
+						onClick={handleShowExplorerOption}
+					>
+						<div className="menu-bar" />
+					</Button>
+				</>
+			)}
+		</div>
+	);
+}
+
+ExplorerOptionsHideArea.defaultProps = {
+	isExplorerOptionHidden: undefined,
+	setIsExplorerOptionHidden: undefined,
+};
+
+export default ExplorerOptionsHideArea;

frontend/src/container/ExplorerOptions/utils.ts

@@ -1,5 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { showErrorNotification } from 'components/ExplorerCard/utils';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
@@ -67,3 +68,54 @@ export const generateRGBAFromHex = (hex: string, opacity: number): string =>
 		hex.slice(3, 5),
 		16,
 	)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
+
+export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
+	try {
+		const showExplorerToolbar = localStorage.getItem(
+			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+		);
+		if (showExplorerToolbar === null) {
+			const parsedShowExplorerToolbar: {
+				[DataSource.LOGS]: boolean;
+				[DataSource.TRACES]: boolean;
+				[DataSource.METRICS]: boolean;
+			} = {
+				[DataSource.METRICS]: true,
+				[DataSource.TRACES]: true,
+				[DataSource.LOGS]: true,
+			};
+			localStorage.setItem(
+				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+				JSON.stringify(parsedShowExplorerToolbar),
+			);
+			return true;
+		}
+		const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar || '{}');
+		return parsedShowExplorerToolbar[dataSource];
+	} catch (error) {
+		console.error(error);
+		return false;
+	}
+};
+
+export const setExplorerToolBarVisibility = (
+	value: boolean,
+	dataSource: string,
+): void => {
+	try {
+		const showExplorerToolbar = localStorage.getItem(
+			LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+		);
+		if (showExplorerToolbar) {
+			const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar);
+			parsedShowExplorerToolbar[dataSource] = value;
+			localStorage.setItem(
+				LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+				JSON.stringify(parsedShowExplorerToolbar),
+			);
+			return;
+		}
+	} catch (error) {
+		console.error(error);
+	}
+};

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

@@ -1,20 +1,30 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Spinner from 'components/Spinner';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import GridPanelSwitch from 'container/GridPanelSwitch';
 import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
 import { timePreferenceType } from 'container/NewWidget/RightContainer/timeItems';
 import { Time } from 'container/TopNav/DateTimeSelection/config';
-import { Time as TimeV2 } from 'container/TopNav/DateTimeSelectionV2/config';
+import {
+	CustomTimeType,
+	Time as TimeV2,
+} from 'container/TopNav/DateTimeSelectionV2/config';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import getTimeString from 'lib/getTimeString';
+import history from 'lib/history';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { AlertDef } from 'types/api/alerts/def';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -32,7 +42,7 @@ export interface ChartPreviewProps {
 	query: Query | null;
 	graphType?: PANEL_TYPES;
 	selectedTime?: timePreferenceType;
-	selectedInterval?: Time | TimeV2;
+	selectedInterval?: Time | TimeV2 | CustomTimeType;
 	headline?: JSX.Element;
 	alertDef?: AlertDef;
 	userQueryKey?: string;
@@ -46,7 +56,7 @@ function ChartPreview({
 	query,
 	graphType = PANEL_TYPES.TIME_SERIES,
 	selectedTime = 'GLOBAL_TIME',
-	selectedInterval = '5min',
+	selectedInterval = '5m',
 	headline,
 	userQueryKey,
 	allowSelectedIntervalForStepGen = false,
@@ -54,6 +64,7 @@ function ChartPreview({
 	yAxisUnit,
 }: ChartPreviewProps): JSX.Element | null {
 	const { t } = useTranslation('alerts');
+	const dispatch = useDispatch();
 	const threshold = alertDef?.condition.target || 0;
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -63,6 +74,30 @@ function ChartPreview({
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const handleBackNavigation = (): void => {
+		const searchParams = new URLSearchParams(window.location.search);
+		const startTime = searchParams.get(QueryParams.startTime);
+		const endTime = searchParams.get(QueryParams.endTime);
+
+		if (startTime && endTime && startTime !== endTime) {
+			dispatch(
+				UpdateTimeInterval('custom', [
+					parseInt(getTimeString(startTime), 10),
+					parseInt(getTimeString(endTime), 10),
+				]),
+			);
+		}
+	};
+
+	useEffect(() => {
+		window.addEventListener('popstate', handleBackNavigation);
+
+		return (): void => {
+			window.removeEventListener('popstate', handleBackNavigation);
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	const canQuery = useMemo((): boolean => {
 		if (!query || query == null) {
 			return false;
@@ -131,10 +166,34 @@ function ChartPreview({
 	const containerDimensions = useResizeObserver(graphRef);
 
 	const isDarkMode = useIsDarkMode();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
 
 	const optionName =
 		getFormatNameByOptionId(alertDef?.condition.targetUnit || '') || '';
 
+	const onDragSelect = useCallback(
+		(start: number, end: number): void => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[dispatch, location.pathname, urlQuery],
+	);
+
 	const options = useMemo(
 		() =>
 			getUPlotChartOptions({
@@ -145,6 +204,7 @@ function ChartPreview({
 				minTimeScale,
 				maxTimeScale,
 				isDarkMode,
+				onDragSelect,
 				thresholds: [
 					{
 						index: '0', // no impact
@@ -174,6 +234,7 @@ function ChartPreview({
 			minTimeScale,
 			maxTimeScale,
 			isDarkMode,
+			onDragSelect,
 			threshold,
 			t,
 			optionName,

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -1,5 +1,6 @@
 import {
 	Checkbox,
+	Collapse,
 	Form,
 	InputNumber,
 	InputNumberProps,
@@ -19,12 +20,18 @@ import {
 	AlertDef,
 	defaultCompareOp,
 	defaultEvalWindow,
+	defaultFrequency,
 	defaultMatchType,
 } from 'types/api/alerts/def';
 import { EQueryType } from 'types/common/dashboard';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { FormContainer, InlineSelect, StepHeading } from './styles';
+import {
+	FormContainer,
+	InlineSelect,
+	StepHeading,
+	VerticalLine,
+} from './styles';
 
 function RuleOptions({
 	alertDef,
@@ -200,6 +207,35 @@ function RuleOptions({
 		});
 	};
 
+	const onChangeFrequency = (value: string | unknown): void => {
+		const freq = (value as string) || alertDef.frequency;
+		setAlertDef({
+			...alertDef,
+			frequency: freq,
+		});
+	};
+
+	const renderFrequency = (): JSX.Element => (
+		<InlineSelect
+			getPopupContainer={popupContainer}
+			defaultValue={defaultFrequency}
+			style={{ minWidth: '120px' }}
+			value={alertDef.frequency}
+			onChange={onChangeFrequency}
+		>
+			<Select.Option value="1m0s">{t('option_1min')}</Select.Option>
+			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
+			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
+			<Select.Option value="15m0s">{t('option_15min')}</Select.Option>
+			<Select.Option value="30m0s">{t('option_30min')}</Select.Option>
+			<Select.Option value="1h0m0s">{t('option_60min')}</Select.Option>
+			<Select.Option value="3h0m0s">{t('option_3hours')}</Select.Option>
+			<Select.Option value="6h0m0s">{t('option_6hours')}</Select.Option>
+			<Select.Option value="12h0m0s">{t('option_12hours')}</Select.Option>
+			<Select.Option value="24h0m0s">{t('option_24hours')}</Select.Option>
+		</InlineSelect>
+	);
+
 	const selectedCategory = getCategoryByOptionId(currentQuery?.unit || '');
 
 	const categorySelectOptions = getCategorySelectOptionByName(
@@ -238,42 +274,57 @@ function RuleOptions({
 							/>
 						</Form.Item>
 					</Space>
-					<Space direction="horizontal" align="center">
+					<Collapse>
-						<Form.Item noStyle name={['condition', 'alertOnAbsent']}>
+						<Collapse.Panel header={t('More options')} key="1">
-							<Checkbox
+							<Space direction="vertical" size="large">
-								checked={alertDef?.condition?.alertOnAbsent}
+								<VerticalLine>
-								onChange={(e): void => {
+									<Space direction="horizontal" align="center">
-									setAlertDef({
+										<Typography.Text>{t('text_alert_frequency')}</Typography.Text>
-										...alertDef,
+										{renderFrequency()}
-										condition: {
+									</Space>
-											...alertDef.condition,
+								</VerticalLine>
-											alertOnAbsent: e.target.checked,
-										},
-									});
-								}}
-							/>
-						</Form.Item>
-						<Typography.Text>{t('text_alert_on_absent')}</Typography.Text>
 
-						<Form.Item noStyle name={['condition', 'absentFor']}>
+								<VerticalLine>
-							<InputNumber
+									<Space direction="horizontal" align="center">
-								min={1}
+										<Form.Item noStyle name={['condition', 'alertOnAbsent']}>
-								value={alertDef?.condition?.absentFor}
+											<Checkbox
-								onChange={(value): void => {
+												checked={alertDef?.condition?.alertOnAbsent}
-									setAlertDef({
+												onChange={(e): void => {
-										...alertDef,
+													setAlertDef({
-										condition: {
+														...alertDef,
-											...alertDef.condition,
+														condition: {
-											absentFor: Number(value) || 0,
+															...alertDef.condition,
-										},
+															alertOnAbsent: e.target.checked,
-									});
+														},
-								}}
+													});
-								type="number"
+												}}
-								onWheel={(e): void => e.currentTarget.blur()}
+											/>
-							/>
+										</Form.Item>
-						</Form.Item>
+										<Typography.Text>{t('text_alert_on_absent')}</Typography.Text>
-						<Typography.Text>{t('text_for')}</Typography.Text>
+
-					</Space>
+										<Form.Item noStyle name={['condition', 'absentFor']}>
+											<InputNumber
+												min={1}
+												value={alertDef?.condition?.absentFor}
+												onChange={(value): void => {
+													setAlertDef({
+														...alertDef,
+														condition: {
+															...alertDef.condition,
+															absentFor: Number(value) || 0,
+														},
+													});
+												}}
+												type="number"
+												onWheel={(e): void => e.currentTarget.blur()}
+											/>
+										</Form.Item>
+										<Typography.Text>{t('text_for')}</Typography.Text>
+									</Space>
+								</VerticalLine>
+							</Space>
+						</Collapse.Panel>
+					</Collapse>
 				</Space>
 			</FormContainer>
 		</>

frontend/src/container/FormAlertRules/styles.ts

@@ -67,6 +67,13 @@ export const SeveritySelect = styled(Select)`
 	width: 25% !important;
 `;
 
+export const VerticalLine = styled.div`
+	border-left: 2px solid #e8e8e8; /* Adjust color and thickness as desired */
+	padding-left: 20px; /* Adjust spacing to content as needed */
+	margin-left: 20px; /* Adjust margin as desired */
+	height: 100%; /* Adjust based on your layout needs */
+`;
+
 export const InputSmall = styled(Input)`
 	width: 40% !important;
 `;

frontend/src/container/FormAlertRules/utils.ts

@@ -12,22 +12,30 @@ import {
 // toChartInterval converts eval window to chart selection time interval
 export const toChartInterval = (evalWindow: string | undefined): Time => {
 	switch (evalWindow) {
+		case '1m0s':
+			return '1m';
 		case '5m0s':
-			return '5min';
+			return '5m';
 		case '10m0s':
-			return '10min';
+			return '10m';
 		case '15m0s':
-			return '15min';
+			return '15m';
 		case '30m0s':
-			return '30min';
+			return '30m';
 		case '1h0m0s':
-			return '1hr';
+			return '1h';
+		case '3h0m0s':
+			return '3h';
 		case '4h0m0s':
-			return '4hr';
+			return '4h';
+		case '6h0m0s':
+			return '6h';
+		case '12h0m0s':
+			return '12h';
 		case '24h0m0s':
-			return '1day';
+			return '1d';
 		default:
-			return '5min';
+			return '5m';
 	}
 };
 

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

@@ -1,62 +1,60 @@
 import './WidgetFullView.styles.scss';
 
-import { SyncOutlined } from '@ant-design/icons';
+import { LoadingOutlined, SyncOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { Button, Spin } from 'antd';
 import cx from 'classnames';
 import { ToggleGraphProps } from 'components/Graph/types';
 import Spinner from 'components/Spinner';
 import TimePreference from 'components/TimePreferenceDropDown';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import GridPanelSwitch from 'container/GridPanelSwitch';
 import {
 	timeItems,
 	timePreferance,
 } from 'container/NewWidget/RightContainer/timeItems';
+import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { useChartMutable } from 'hooks/useChartMutable';
-import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import GetMinMax from 'lib/getMinMax';
+import history from 'lib/history';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import uPlot from 'uplot';
+import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
-import { getTimeRange } from 'utils/getTimeRange';
 
 import { getLocalStorageGraphVisibilityState } from '../utils';
 import { PANEL_TYPES_VS_FULL_VIEW_TABLE } from './contants';
-import GraphManager from './GraphManager';
 import { GraphContainer, TimeContainer } from './styles';
 import { FullViewProps } from './types';
 
 function FullView({
 	widget,
 	fullViewOptions = true,
-	onClickHandler,
-	name,
 	version,
 	originalName,
-	yAxisUnit,
-	onDragSelect,
 	isDependedDataLoaded = false,
 	onToggleModelHandler,
-	parentChartRef,
 }: FullViewProps): JSX.Element {
 	const { selectedTime: globalSelectedTime } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
 
 	const fullViewRef = useRef<HTMLDivElement>(null);
 
-	const [chartOptions, setChartOptions] = useState<uPlot.Options>();
-
 	const { selectedDashboard, isDashboardLocked } = useDashboard();
 
 	const getSelectedTime = useCallback(
@@ -74,24 +72,70 @@ function FullView({
 
 	const updatedQuery = useStepInterval(widget?.query);
 
-	const response = useGetQueryRange(
+	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		{
+		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-			selectedTime: selectedTime.enum,
+			return {
-			graphType:
+				selectedTime: selectedTime.enum,
-				widget.panelTypes === PANEL_TYPES.BAR
+				graphType: getGraphType(widget.panelTypes),
-					? PANEL_TYPES.TIME_SERIES
+				query: updatedQuery,
-					: widget.panelTypes,
+				globalSelectedInterval: globalSelectedTime,
+				variables: getDashboardVariables(selectedDashboard?.data.variables),
+			};
+		}
+		updatedQuery.builder.queryData[0].pageSize = 10;
+		return {
 			query: updatedQuery,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
 			globalSelectedInterval: globalSelectedTime,
-			variables: getDashboardVariables(selectedDashboard?.data.variables),
+			tableParams: {
-		},
+				pagination: {
+					offset: 0,
+					limit: updatedQuery.builder.queryData[0].limit || 0,
+				},
+			},
+		};
+	});
+
+	useEffect(() => {
+		setRequestData((prev) => ({
+			...prev,
+			selectedTime: selectedTime.enum,
+		}));
+	}, [selectedTime]);
+
+	const response = useGetQueryRange(
+		requestData,
 		selectedDashboard?.data?.version || version || DEFAULT_ENTITY_VERSION,
 		{
-			queryKey: `FullViewGetMetricsQueryRange-${selectedTime.enum}-${globalSelectedTime}-${widget.id}`,
+			queryKey: [widget?.query, widget?.panelTypes, requestData, version],
-			enabled: !isDependedDataLoaded && widget.panelTypes !== PANEL_TYPES.LIST, // Internally both the list view panel has it's own query range api call, so we don't need to call it again
+			enabled: !isDependedDataLoaded,
+			keepPreviousData: true,
 		},
 	);
 
+	const onDragSelect = useCallback(
+		(start: number, end: number): void => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[dispatch, location.pathname, urlQuery],
+	);
+
 	const [graphsVisibilityStates, setGraphsVisibilityStates] = useState<
 		boolean[]
 	>(Array(response.data?.payload.data.result.length).fill(true));
@@ -118,60 +162,6 @@ function FullView({
 		response.data.payload.data.result = sortedSeriesData;
 	}
 
-	const chartData = getUPlotChartData(response?.data?.payload, widget.fillSpans);
-
-	const isDarkMode = useIsDarkMode();
-
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-
-	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(response);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [maxTime, minTime, globalSelectedInterval, response]);
-
-	useEffect(() => {
-		if (!response.isFetching && fullViewRef.current) {
-			const width = fullViewRef.current?.clientWidth
-				? fullViewRef.current.clientWidth - 45
-				: 700;
-
-			const height = fullViewRef.current?.clientWidth
-				? fullViewRef.current.clientHeight
-				: 300;
-
-			const newChartOptions = getUPlotChartOptions({
-				id: originalName,
-				yAxisUnit: yAxisUnit || '',
-				apiResponse: response.data?.payload,
-				dimensions: {
-					height,
-					width,
-				},
-				isDarkMode,
-				onDragSelect,
-				graphsVisibilityStates,
-				setGraphsVisibilityStates,
-				thresholds: widget.thresholds,
-				minTimeScale,
-				maxTimeScale,
-				softMax: widget.softMax === undefined ? null : widget.softMax,
-				softMin: widget.softMin === undefined ? null : widget.softMin,
-				panelType: widget.panelTypes,
-			});
-
-			setChartOptions(newChartOptions);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [response.isFetching, graphsVisibilityStates, fullViewRef.current]);
-
 	useEffect(() => {
 		graphsVisibilityStates?.forEach((e, i) => {
 			fullViewChartRef?.current?.toggleGraph(i, e);
@@ -180,7 +170,7 @@ function FullView({
 
 	const isListView = widget.panelTypes === PANEL_TYPES.LIST;
 
-	if (response.isFetching) {
+	if (response.isLoading && widget.panelTypes !== PANEL_TYPES.LIST) {
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
 
@@ -189,6 +179,9 @@ function FullView({
 			<div className="full-view-header-container">
 				{fullViewOptions && (
 					<TimeContainer $panelType={widget.panelTypes}>
+						{response.isFetching && (
+							<Spin spinning indicator={<LoadingOutlined spin />} />
+						)}
 						<TimePreference
 							selectedTime={selectedTime}
 							setSelectedTime={setSelectedTime}
@@ -214,47 +207,24 @@ function FullView({
 				})}
 				ref={fullViewRef}
 			>
-				{chartOptions && (
+				<GraphContainer
-					<GraphContainer
+					style={{
-						style={{
+						height: isListView ? '100%' : '90%',
-							height: isListView ? '100%' : '90%',
+					}}
-						}}
+					isGraphLegendToggleAvailable={canModifyChart}
-						isGraphLegendToggleAvailable={canModifyChart}
+				>
-					>
+					<PanelWrapper
-						<GridPanelSwitch
+						queryResponse={response}
-							panelType={widget.panelTypes}
+						widget={widget}
-							data={chartData}
+						setRequestData={setRequestData}
-							options={chartOptions}
+						isFullViewMode
-							onClickHandler={onClickHandler}
+						onToggleModelHandler={onToggleModelHandler}
-							name={name}
+						setGraphVisibility={setGraphsVisibilityStates}
-							yAxisUnit={yAxisUnit}
+						graphVisibility={graphsVisibilityStates}
-							onDragSelect={onDragSelect}
+						onDragSelect={onDragSelect}
-							panelData={response.data?.payload.data.newResult.data.result || []}
+					/>
-							query={widget.query}
+				</GraphContainer>
-							ref={fullViewChartRef}
-							thresholds={widget.thresholds}
-							selectedLogFields={widget.selectedLogFields}
-							dataSource={widget.query.builder.queryData[0].dataSource}
-							selectedTracesFields={widget.selectedTracesFields}
-							selectedTime={selectedTime}
-						/>
-					</GraphContainer>
-				)}
 			</div>
-
-			{canModifyChart && chartOptions && !isDashboardLocked && (
-				<GraphManager
-					data={chartData}
-					name={originalName}
-					options={chartOptions}
-					yAxisUnit={yAxisUnit}
-					onToggleModelHandler={onToggleModelHandler}
-					setGraphsVisibilityStates={setGraphsVisibilityStates}
-					graphsVisibilityStates={graphsVisibilityStates}
-					lineChartRef={fullViewChartRef}
-					parentChartRef={parentChartRef}
-				/>
-			)}
 		</div>
 	);
 }

frontend/src/container/GridCardLayout/GridCard/FullView/styles.ts

@@ -18,6 +18,7 @@ export const NotFoundContainer = styled.div`
 export const TimeContainer = styled.div<Props>`
 	display: flex;
 	justify-content: flex-end;
+	align-items: center;
 	${({ $panelType }): FlattenSimpleInterpolation =>
 		$panelType === PANEL_TYPES.TABLE
 			? css`

frontend/src/container/GridCardLayout/GridCard/FullView/types.ts

@@ -53,10 +53,8 @@ export interface FullViewProps {
 	version?: string;
 	originalName: string;
 	yAxisUnit?: string;
-	onDragSelect: (start: number, end: number) => void;
 	isDependedDataLoaded?: boolean;
 	onToggleModelHandler?: GraphManagerProps['onToggleModelHandler'];
-	parentChartRef: GraphManagerProps['lineChartRef'];
 }
 
 export interface GraphManagerProps extends UplotProps {

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

@@ -6,7 +6,7 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import GridPanelSwitch from 'container/GridPanelSwitch';
+import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -33,23 +33,20 @@ import FullView from './FullView';
 import { Modal } from './styles';
 import { WidgetGraphComponentProps } from './types';
 import { getLocalStorageGraphVisibilityState } from './utils';
+// import { getLocalStorageGraphVisibilityState } from './utils';
 
 function WidgetGraphComponent({
 	widget,
 	queryResponse,
 	errorMessage,
-	name,
 	version,
 	threshold,
 	headerMenuList,
 	isWarning,
-	data,
+	isFetchingResponse,
-	options,
+	setRequestData,
-	graphVisibiltyState,
 	onClickHandler,
 	onDragSelect,
-	setGraphVisibility,
-	isFetchingResponse,
 }: WidgetGraphComponentProps): JSX.Element {
 	const [deleteModal, setDeleteModal] = useState(false);
 	const [hovered, setHovered] = useState(false);
@@ -61,12 +58,15 @@ function WidgetGraphComponent({
 	const isFullViewOpen = params.get(QueryParams.expandedWidgetId) === widget.id;
 
 	const lineChartRef = useRef<ToggleGraphProps>();
+	const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
+		Array(queryResponse.data?.payload?.data.result.length || 0).fill(true),
+	);
 	const graphRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
 		if (!lineChartRef.current) return;
 
-		graphVisibiltyState.forEach((state, index) => {
+		graphVisibility.forEach((state, index) => {
 			lineChartRef.current?.toggleGraph(index, state);
 		});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -210,7 +210,7 @@ function WidgetGraphComponent({
 				graphVisibilityStates: localStoredVisibilityState,
 			} = getLocalStorageGraphVisibilityState({
 				apiResponse: queryResponse.data.payload.data.result,
-				name,
+				name: widget.id,
 			});
 			setGraphVisibility(localStoredVisibilityState);
 		}
@@ -252,7 +252,7 @@ function WidgetGraphComponent({
 			onBlur={(): void => {
 				setHovered(false);
 			}}
-			id={name}
+			id={widget.id}
 		>
 			<Modal
 				destroyOnClose
@@ -278,14 +278,12 @@ function WidgetGraphComponent({
 				className="widget-full-view"
 			>
 				<FullView
-					name={`${name}expanded`}
+					name={`${widget.id}expanded`}
 					version={version}
-					originalName={name}
+					originalName={widget.id}
 					widget={widget}
 					yAxisUnit={widget.yAxisUnit}
 					onToggleModelHandler={onToggleModelHandler}
-					parentChartRef={lineChartRef}
-					onDragSelect={onDragSelect}
 				/>
 			</Modal>
 
@@ -305,26 +303,22 @@ function WidgetGraphComponent({
 					isFetchingResponse={isFetchingResponse}
 				/>
 			</div>
-			{queryResponse.isLoading && <Skeleton />}
+			{queryResponse.isLoading && widget.panelTypes !== PANEL_TYPES.LIST && (
+				<Skeleton />
+			)}
 			{(queryResponse.isSuccess || widget.panelTypes === PANEL_TYPES.LIST) && (
 				<div
 					className={cx('widget-graph-container', widget.panelTypes)}
 					ref={graphRef}
 				>
-					<GridPanelSwitch
+					<PanelWrapper
-						panelType={widget.panelTypes}
+						widget={widget}
-						data={data}
+						queryResponse={queryResponse}
-						name={name}
+						setRequestData={setRequestData}
-						ref={lineChartRef}
+						setGraphVisibility={setGraphVisibility}
-						options={options}
+						graphVisibility={graphVisibility}
-						yAxisUnit={widget.yAxisUnit}
 						onClickHandler={onClickHandler}
-						panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
+						onDragSelect={onDragSelect}
-						query={widget.query}
-						thresholds={widget.thresholds}
-						selectedLogFields={widget.selectedLogFields}
-						dataSource={widget.query.builder?.queryData[0]?.dataSource}
-						selectedTracesFields={widget.selectedTracesFields}
 					/>
 				</div>
 			)}

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

@@ -1,88 +1,57 @@
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import useUrlQuery from 'hooks/useUrlQuery';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
-import GetMinMax from 'lib/getMinMax';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import getTimeString from 'lib/getTimeString';
-import history from 'lib/history';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import isEmpty from 'lodash-es/isEmpty';
-import _noop from 'lodash-es/noop';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getGraphType } from 'utils/getGraphType';
 import { getSortedSeriesData } from 'utils/getSortedSeriesData';
-import { getTimeRange } from 'utils/getTimeRange';
 
 import EmptyWidget from '../EmptyWidget';
 import { MenuItemKeys } from '../WidgetHeader/contants';
 import { GridCardGraphProps } from './types';
-import { getLocalStorageGraphVisibilityState } from './utils';
 import WidgetGraphComponent from './WidgetGraphComponent';
 
 function GridCardGraph({
 	widget,
-	name,
-	onClickHandler = _noop,
 	headerMenuList = [MenuItemKeys.View],
 	isQueryEnabled,
 	threshold,
 	variables,
-	fillSpans = false,
 	version,
+	onClickHandler,
+	onDragSelect,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
 	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
-	const [minTimeScale, setMinTimeScale] = useState<number>();
-	const [maxTimeScale, setMaxTimeScale] = useState<number>();
-	const urlQuery = useUrlQuery();
-	const location = useLocation();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
 
-	const onDragSelect = useCallback(
-		(start: number, end: number): void => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			if (startTimestamp !== endTimestamp) {
-				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
-			}
-
-			const { maxTime, minTime } = GetMinMax('custom', [
-				startTimestamp,
-				endTimestamp,
-			]);
-
-			urlQuery.set(QueryParams.startTime, minTime.toString());
-			urlQuery.set(QueryParams.endTime, maxTime.toString());
-			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
-			history.push(generatedUrl);
-		},
-		[dispatch, location.pathname, urlQuery],
-	);
-
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
 		const startTime = searchParams.get(QueryParams.startTime);
 		const endTime = searchParams.get(QueryParams.endTime);
+		const relativeTime = searchParams.get(
+			QueryParams.relativeTime,
+		) as CustomTimeType;
 
-		if (startTime && endTime && startTime !== endTime) {
+		if (relativeTime) {
+			dispatch(UpdateTimeInterval(relativeTime));
+		} else if (startTime && endTime && startTime !== endTime) {
 			dispatch(
 				UpdateTimeInterval('custom', [
 					parseInt(getTimeString(startTime), 10),
@@ -121,19 +90,39 @@ function GridCardGraph({
 	const isEmptyWidget =
 		widget?.id === PANEL_TYPES.EMPTY_WIDGET || isEmpty(widget);
 
-	const queryEnabledCondition =
+	const queryEnabledCondition = isVisible && !isEmptyWidget && isQueryEnabled;
-		isVisible &&
+
-		!isEmptyWidget &&
+	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		isQueryEnabled &&
+		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-		widget.panelTypes !== PANEL_TYPES.LIST;
+			return {
+				selectedTime: widget?.timePreferance,
+				graphType: getGraphType(widget.panelTypes),
+				query: updatedQuery,
+				globalSelectedInterval,
+				variables: getDashboardVariables(variables),
+			};
+		}
+		updatedQuery.builder.queryData[0].pageSize = 10;
+		return {
+			query: updatedQuery,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval,
+			tableParams: {
+				pagination: {
+					offset: 0,
+					limit: updatedQuery.builder.queryData[0].limit || 0,
+				},
+			},
+		};
+	});
 
 	const queryResponse = useGetQueryRange(
 		{
-			selectedTime: widget?.timePreferance,
+			...requestData,
-			graphType: getGraphType(widget.panelTypes),
-			query: updatedQuery,
-			globalSelectedInterval,
 			variables: getDashboardVariables(variables),
+			selectedTime: 'GLOBAL_TIME',
+			globalSelectedInterval,
 		},
 		version || DEFAULT_ENTITY_VERSION,
 		{
@@ -145,7 +134,18 @@ function GridCardGraph({
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
+				requestData,
 			],
+			retry(failureCount, error): boolean {
+				if (
+					String(error).includes('status: error') &&
+					String(error).includes('i/o timeout')
+				) {
+					return false;
+				}
+
+				return failureCount < 2;
+			},
 			keepPreviousData: true,
 			enabled: queryEnabledCondition,
 			refetchOnMount: false,
@@ -157,15 +157,6 @@ function GridCardGraph({
 
 	const isEmptyLayout = widget?.id === PANEL_TYPES.EMPTY_WIDGET;
 
-	const containerDimensions = useResizeObserver(graphRef);
-
-	useEffect((): void => {
-		const { startTime, endTime } = getTimeRange(queryResponse);
-
-		setMinTimeScale(startTime);
-		setMaxTimeScale(endTime);
-	}, [maxTime, minTime, globalSelectedInterval, queryResponse]);
-
 	if (queryResponse.data && widget.panelTypes === PANEL_TYPES.BAR) {
 		const sortedSeriesData = getSortedSeriesData(
 			queryResponse.data?.payload.data.result,
@@ -173,89 +164,29 @@ function GridCardGraph({
 		queryResponse.data.payload.data.result = sortedSeriesData;
 	}
 
-	const chartData = getUPlotChartData(queryResponse?.data?.payload, fillSpans);
-
-	const isDarkMode = useIsDarkMode();
-
 	const menuList =
 		widget.panelTypes === PANEL_TYPES.TABLE ||
 		widget.panelTypes === PANEL_TYPES.LIST
 			? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts)
 			: headerMenuList;
 
-	const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
-		Array(queryResponse.data?.payload?.data.result.length || 0).fill(true),
-	);
-
-	useEffect(() => {
-		const {
-			graphVisibilityStates: localStoredVisibilityState,
-		} = getLocalStorageGraphVisibilityState({
-			apiResponse: queryResponse.data?.payload.data.result || [],
-			name,
-		});
-		setGraphVisibility(localStoredVisibilityState);
-	}, [name, queryResponse.data?.payload.data.result]);
-
-	const options = useMemo(
-		() =>
-			getUPlotChartOptions({
-				id: widget?.id,
-				apiResponse: queryResponse.data?.payload,
-				dimensions: containerDimensions,
-				isDarkMode,
-				onDragSelect,
-				yAxisUnit: widget?.yAxisUnit,
-				onClickHandler,
-				thresholds: widget.thresholds,
-				minTimeScale,
-				maxTimeScale,
-				softMax: widget.softMax === undefined ? null : widget.softMax,
-				softMin: widget.softMin === undefined ? null : widget.softMin,
-				graphsVisibilityStates: graphVisibility,
-				setGraphsVisibilityStates: setGraphVisibility,
-				panelType: widget.panelTypes,
-			}),
-		[
-			widget?.id,
-			widget?.yAxisUnit,
-			widget.thresholds,
-			widget.softMax,
-			widget.softMin,
-			queryResponse.data?.payload,
-			containerDimensions,
-			isDarkMode,
-			onDragSelect,
-			onClickHandler,
-			minTimeScale,
-			maxTimeScale,
-			graphVisibility,
-			setGraphVisibility,
-			widget.panelTypes,
-		],
-	);
-
 	return (
 		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			{isEmptyLayout ? (
 				<EmptyWidget />
 			) : (
 				<WidgetGraphComponent
-					data={chartData}
-					options={options}
 					widget={widget}
 					queryResponse={queryResponse}
 					errorMessage={errorMessage}
 					isWarning={false}
-					name={name}
 					version={version}
-					onDragSelect={onDragSelect}
 					threshold={threshold}
 					headerMenuList={menuList}
-					onClickHandler={onClickHandler}
-					graphVisibiltyState={graphVisibility}
-					setGraphVisibility={setGraphVisibility}
 					isFetchingResponse={queryResponse.isFetching}
+					setRequestData={setRequestData}
+					onClickHandler={onClickHandler}
+					onDragSelect={onDragSelect}
 				/>
 			)}
 		</div>

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -1,9 +1,9 @@
 import { ToggleGraphProps } from 'components/Graph/types';
-import { UplotProps } from 'components/Uplot/Uplot';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
-import { ErrorResponse, SuccessResponse } from 'types/api';
+import { SuccessResponse } from 'types/api';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -16,35 +16,32 @@ export interface GraphVisibilityLegendEntryProps {
 	legendEntry: LegendEntryProps[];
 }
 
-export interface WidgetGraphComponentProps extends UplotProps {
+export interface WidgetGraphComponentProps {
 	widget: Widgets;
 	queryResponse: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps> | ErrorResponse
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
 	>;
 	errorMessage: string | undefined;
-	name: string;
 	version?: string;
-	onDragSelect: (start: number, end: number) => void;
-	onClickHandler?: OnClickPluginOpts['onClick'];
 	threshold?: ReactNode;
 	headerMenuList: MenuItemKeys[];
 	isWarning: boolean;
-	graphVisibiltyState: boolean[];
-	setGraphVisibility: Dispatch<SetStateAction<boolean[]>>;
 	isFetchingResponse: boolean;
+	setRequestData?: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	onClickHandler?: OnClickPluginOpts['onClick'];
+	onDragSelect: (start: number, end: number) => void;
 }
 
 export interface GridCardGraphProps {
 	widget: Widgets;
-	name: string;
-	onDragSelect?: (start: number, end: number) => void;
-	onClickHandler?: OnClickPluginOpts['onClick'];
 	threshold?: ReactNode;
 	headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
+	onClickHandler?: OnClickPluginOpts['onClick'];
 	isQueryEnabled: boolean;
 	variables?: Dashboard['data']['variables'];
-	fillSpans?: boolean;
 	version?: string;
+	onDragSelect: (start: number, end: number) => void;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -3,20 +3,25 @@ import './GridCardLayout.styles.scss';
 import { PlusOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
+import useUrlQuery from 'hooks/useUrlQuery';
+import history from 'lib/history';
 import isEqual from 'lodash-es/isEqual';
 import { FullscreenIcon } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
@@ -45,6 +50,8 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 	} = useDashboard();
 	const { data } = selectedDashboard || {};
 	const handle = useFullScreenHandle();
+	const { pathname } = useLocation();
+	const dispatch = useDispatch();
 
 	const { widgets, variables } = data || {};
 
@@ -61,6 +68,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 	const updateDashboardMutation = useUpdateDashboard();
 
 	const { notifications } = useNotifications();
+	const urlQuery = useUrlQuery();
 
 	let permissions: ComponentTypes[] = ['save_layout', 'add_panel'];
 
@@ -126,6 +134,23 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 		}
 	};
 
+	const onDragSelect = useCallback(
+		(start: number, end: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+			history.replace(generatedUrl);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+		},
+		[dispatch, pathname, urlQuery],
+	);
+
 	useEffect(() => {
 		if (
 			dashboardLayout &&
@@ -200,11 +225,10 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 								>
 									<GridCard
 										widget={currentWidget || ({ id, query: {} } as Widgets)}
-										name={currentWidget?.id || ''}
 										headerMenuList={widgetActions}
 										variables={variables}
-										fillSpans={currentWidget?.fillSpans}
 										version={selectedDashboard?.data?.version}
+										onDragSelect={onDragSelect}
 									/>
 								</Card>
 							</CardContainer>

frontend/src/container/GridPanelSwitch/index.tsx

@@ -1,10 +1,8 @@
 import { ToggleGraphProps } from 'components/Graph/types';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
 import { getComponentForPanelType } from 'constants/panelTypes';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
 import { FC, forwardRef, memo, useMemo } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
 
 import { GridPanelSwitchProps, PropsTypePropsMap } from './types';
 
@@ -21,10 +19,7 @@ const GridPanelSwitch = forwardRef<
 			query,
 			options,
 			thresholds,
-			selectedLogFields,
-			selectedTracesFields,
 			dataSource,
-			selectedTime,
 		},
 		ref,
 	): JSX.Element | null => {
@@ -46,20 +41,7 @@ const GridPanelSwitch = forwardRef<
 					query,
 					thresholds,
 				},
-				[PANEL_TYPES.LIST]:
+				[PANEL_TYPES.LIST]: null,
-					dataSource === DataSource.LOGS
-						? {
-								selectedLogsFields: selectedLogFields || [],
-								query,
-								version: DEFAULT_ENTITY_VERSION, // As we don't support for Metrics, defaulting to v3
-								selectedTime,
-						  }
-						: {
-								selectedTracesFields: selectedTracesFields || [],
-								query,
-								version: DEFAULT_ENTITY_VERSION, // As we don't support for Metrics, defaulting to v3
-								selectedTime,
-						  },
 				[PANEL_TYPES.TRACE]: null,
 				[PANEL_TYPES.BAR]: {
 					data,
@@ -70,19 +52,7 @@ const GridPanelSwitch = forwardRef<
 			};
 
 			return result;
-		}, [
+		}, [data, options, ref, yAxisUnit, thresholds, panelData, query]);
-			data,
-			options,
-			ref,
-			yAxisUnit,
-			thresholds,
-			panelData,
-			query,
-			dataSource,
-			selectedLogFields,
-			selectedTime,
-			selectedTracesFields,
-		]);
 
 		const Component = getComponentForPanelType(panelType, dataSource) as FC<
 			PropsTypePropsMap[typeof panelType]

frontend/src/container/GridPanelSwitch/types.ts

@@ -2,9 +2,7 @@ import { StaticLineProps, ToggleGraphProps } from 'components/Graph/types';
 import { UplotProps } from 'components/Uplot/Uplot';
 import { GridTableComponentProps } from 'container/GridTableComponent/types';
 import { GridValueComponentProps } from 'container/GridValueComponent/types';
-import { LogsPanelComponentProps } from 'container/LogsPanelTable/LogsPanelComponent';
 import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
-import { TracesTableComponentProps } from 'container/TracesTableComponent/TracesTableComponent';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { ForwardedRef } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -40,7 +38,7 @@ export type PropsTypePropsMap = {
 	[PANEL_TYPES.VALUE]: GridValueComponentProps;
 	[PANEL_TYPES.TABLE]: GridTableComponentProps;
 	[PANEL_TYPES.TRACE]: null;
-	[PANEL_TYPES.LIST]: LogsPanelComponentProps | TracesTableComponentProps;
+	[PANEL_TYPES.LIST]: null;
 	[PANEL_TYPES.BAR]: UplotProps & {
 		ref: ForwardedRef<ToggleGraphProps | undefined>;
 	};

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

@@ -71,6 +71,7 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 					key={log.id}
 					logData={log}
 					selectedFields={selectedFields}
+					linesPerRow={options.maxLines}
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 				/>

frontend/src/container/LogDetailedView/Overview.styles.scss

@@ -53,6 +53,19 @@
 			background: rgba(171, 189, 255, 0.04);
 
 			padding: 8px;
+
+			.ant-collapse-extra {
+				display: flex;
+				align-items: center;
+
+				.action-btn {
+					display: flex;
+
+					.ant-btn {
+						background: rgba(113, 144, 249, 0.08);
+					}
+				}
+			}
 		}
 
 		.ant-collapse-content {

frontend/src/container/LogDetailedView/TableView.styles.scss

@@ -5,12 +5,13 @@
 		.ant-table-row:hover {
 			.ant-table-cell {
 				.value-field {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
 					.action-btn {
 						display: flex;
-						gap: 4px;
+						position: absolute;
+						top: 50%;
+						right: 16px;
+						transform: translateY(-50%);
+						gap: 8px;
 					}
 				}
 			}
@@ -28,6 +29,30 @@
 			}
 		}
 
+		.attribute-pin {
+			cursor: pointer;
+
+			padding: 0;
+			vertical-align: middle;
+			text-align: center;
+
+			.log-attribute-pin {
+				padding: 8px;
+
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.pin-attribute-icon {
+					border: none;
+
+					&.pinned svg {
+						fill: var(--bg-robin-500);
+					}
+				}
+			}
+		}
+
 		.value-field-container {
 			background: rgba(22, 25, 34, 0.4);
 
@@ -70,6 +95,10 @@
 		.value-field-container {
 			background: var(--bg-vanilla-300);
 
+			&.attribute-pin {
+				background: var(--bg-vanilla-100);
+			}
+
 			.action-btn {
 				.filter-btn {
 					background: var(--bg-vanilla-300);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,22 +1,29 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import './TableView.styles.scss';
 
 import { LinkOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Space, Spin, Tooltip, Tree, Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import setLocalStorageApi from 'api/browser/localstorage/set';
+import cx from 'classnames';
 import AddToQueryHOC, {
 	AddToQueryHOCProps,
 } from 'components/Logs/AddToQueryHOC';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
 import { ResizeTable } from 'components/ResizeTable';
+import { LOCALSTORAGE } from 'constants/localStorage';
 import { OPERATORS } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
 import { isEmpty } from 'lodash-es';
-import { ArrowDownToDot, ArrowUpFromDot } from 'lucide-react';
+import { ArrowDownToDot, ArrowUpFromDot, Pin } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { generatePath } from 'react-router-dom';
 import { Dispatch } from 'redux';
@@ -57,6 +64,28 @@ function TableView({
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 	const [isfilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
 	const [isfilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
+	const isDarkMode = useIsDarkMode();
+
+	const [pinnedAttributes, setPinnedAttributes] = useState<
+		Record<string, boolean>
+	>({});
+
+	useEffect(() => {
+		const pinnedAttributesFromLocalStorage = getLocalStorageApi(
+			LOCALSTORAGE.PINNED_ATTRIBUTES,
+		);
+
+		if (pinnedAttributesFromLocalStorage) {
+			try {
+				const parsedPinnedAttributes = JSON.parse(pinnedAttributesFromLocalStorage);
+				setPinnedAttributes(parsedPinnedAttributes);
+			} catch (e) {
+				console.error('Error parsing pinned attributes from local storgage');
+			}
+		} else {
+			setPinnedAttributes({});
+		}
+	}, []);
 
 	const flattenLogData: Record<string, string> | null = useMemo(
 		() => (logData ? flattenObject(logData) : null),
@@ -74,6 +103,19 @@ function TableView({
 		}
 	};
 
+	const togglePinAttribute = (record: DataType): void => {
+		if (record) {
+			const newPinnedAttributes = { ...pinnedAttributes };
+			newPinnedAttributes[record.key] = !newPinnedAttributes[record.key];
+			setPinnedAttributes(newPinnedAttributes);
+
+			setLocalStorageApi(
+				LOCALSTORAGE.PINNED_ATTRIBUTES,
+				JSON.stringify(newPinnedAttributes),
+			);
+		}
+	};
+
 	const onClickHandler = (
 		operator: string,
 		fieldKey: string,
@@ -138,6 +180,37 @@ function TableView({
 	}
 
 	const columns: ColumnsType<DataType> = [
+		{
+			title: '',
+			dataIndex: 'pin',
+			key: 'pin',
+			width: 5,
+			align: 'left',
+			className: 'attribute-pin value-field-container',
+			render: (fieldData: Record<string, string>, record): JSX.Element => {
+				let pinColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500;
+
+				if (pinnedAttributes[record?.key]) {
+					pinColor = Color.BG_ROBIN_500;
+				}
+
+				return (
+					<div className="log-attribute-pin value-field">
+						<div
+							className={cx(
+								'pin-attribute-icon',
+								pinnedAttributes[record?.key] ? 'pinned' : '',
+							)}
+							onClick={(): void => {
+								togglePinAttribute(record);
+							}}
+						>
+							<Pin size={14} color={pinColor} />
+						</div>
+					</div>
+				);
+			},
+		},
 		{
 			title: 'Field',
 			dataIndex: 'field',
@@ -264,12 +337,34 @@ function TableView({
 			},
 		},
 	];
+	function sortPinnedAttributes(
+		data: Record<string, string>[],
+		sortingObj: Record<string, boolean>,
+	): Record<string, string>[] {
+		const sortingKeys = Object.keys(sortingObj);
+		return data.sort((a, b) => {
+			const aKey = a.key;
+			const bKey = b.key;
+			const aSortIndex = sortingKeys.indexOf(aKey);
+			const bSortIndex = sortingKeys.indexOf(bKey);
+
+			if (sortingObj[aKey] && !sortingObj[bKey]) {
+				return -1;
+			}
+			if (!sortingObj[aKey] && sortingObj[bKey]) {
+				return 1;
+			}
+			return aSortIndex - bSortIndex;
+		});
+	}
+
+	const sortedAttributes = sortPinnedAttributes(dataSource, pinnedAttributes);
 
 	return (
 		<ResizeTable
 			columns={columns}
 			tableLayout="fixed"
-			dataSource={dataSource}
+			dataSource={sortedAttributes}
 			pagination={false}
 			showHeader={false}
 			className="attribute-table-container"

frontend/src/container/LogsExplorerChart/index.tsx

@@ -2,6 +2,7 @@ import Graph from 'components/Graph';
 import Spinner from 'components/Spinner';
 import { QueryParams } from 'constants/query';
 import { themeColors } from 'constants/theme';
+import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/config';
 import useUrlQuery from 'hooks/useUrlQuery';
 import getChartData, { GetChartDataProps } from 'lib/getChartData';
 import GetMinMax from 'lib/getMinMax';
@@ -65,8 +66,13 @@ function LogsExplorerChart({
 		const searchParams = new URLSearchParams(window.location.search);
 		const startTime = searchParams.get(QueryParams.startTime);
 		const endTime = searchParams.get(QueryParams.endTime);
+		const relativeTime = searchParams.get(
+			QueryParams.relativeTime,
+		) as CustomTimeType;
 
-		if (startTime && endTime && startTime !== endTime) {
+		if (relativeTime) {
+			dispatch(UpdateTimeInterval(relativeTime));
+		} else if (startTime && endTime && startTime !== endTime) {
 			dispatch(
 				UpdateTimeInterval('custom', [
 					parseInt(getTimeString(startTime), 10),

frontend/src/container/LogsExplorerList/index.tsx

@@ -90,6 +90,7 @@ function LogsExplorerList({
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 					activeLog={activeLog}
+					linesPerRow={options.maxLines}
 				/>
 			);
 		},

frontend/src/container/LogsExplorerViews/index.tsx

@@ -14,13 +14,15 @@ import {
 	PANEL_TYPES,
 } from 'constants/queryBuilder';
 import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions';
+import Download from 'container/DownloadV2/DownloadV2';
+import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import GoToTop from 'container/GoToTop';
 import LogsExplorerChart from 'container/LogsExplorerChart';
 import LogsExplorerList from 'container/LogsExplorerList';
 import LogsExplorerTable from 'container/LogsExplorerTable';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
+import dayjs from 'dayjs';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
 import { LogTimeRange } from 'hooks/logs/types';
@@ -33,8 +35,9 @@ import useClickOutside from 'hooks/useClickOutside';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQueryData from 'hooks/useUrlQueryData';
+import { FlatLogData } from 'lib/logs/flatLogData';
 import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData';
-import { defaultTo, isEmpty } from 'lodash-es';
+import { defaultTo, isEmpty, omit } from 'lodash-es';
 import { Sliders } from 'lucide-react';
 import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -523,6 +526,23 @@ function LogsExplorerViews({
 		},
 	});
 
+	const flattenLogData = useMemo(
+		() =>
+			logs.map((log) => {
+				const timestamp =
+					typeof log.timestamp === 'string'
+						? dayjs(log.timestamp).format()
+						: dayjs(log.timestamp / 1e6).format();
+
+				return FlatLogData({
+					timestamp,
+					body: log.body,
+					...omit(log, 'timestamp', 'body'),
+				});
+			}),
+		[logs],
+	);
+
 	return (
 		<div className="logs-explorer-views-container">
 			{showHistogram && (
@@ -578,6 +598,11 @@ function LogsExplorerViews({
 					<div className="logs-actions-container">
 						{selectedPanelType === PANEL_TYPES.LIST && (
 							<div className="tab-options">
+								<Download
+									data={flattenLogData}
+									isLoading={isFetching}
+									fileName="log_data"
+								/>
 								<div className="format-options-container" ref={menuRef}>
 									<Button
 										className="periscope-btn"
@@ -634,7 +659,7 @@ function LogsExplorerViews({
 
 			<GoToTop />
 
-			<ExplorerOptions
+			<ExplorerOptionWrapper
 				disabled={!stagedQuery}
 				query={exportDefaultQuery}
 				isLoading={isUpdateDashboardLoading}

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -4,82 +4,53 @@ import { Table } from 'antd';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { PANEL_TYPES } from 'constants/queryBuilder';
-import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import Controls from 'container/Controls';
-import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { Pagination } from 'hooks/queryPagination';
 import { useLogsData } from 'hooks/useLogsData';
-import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
+	Dispatch,
 	HTMLAttributes,
+	SetStateAction,
 	useCallback,
 	useEffect,
 	useMemo,
 	useState,
 } from 'react';
-import { useSelector } from 'react-redux';
+import { UseQueryResult } from 'react-query';
-import { AppState } from 'store/reducers';
+import { SuccessResponse } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { ILog } from 'types/api/logs/log';
-import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as uuid } from 'uuid';
 
-import { getLogPanelColumnsList } from './utils';
+import { getLogPanelColumnsList, getNextOrPreviousItems } from './utils';
 
 function LogsPanelComponent({
-	selectedLogsFields,
+	widget,
-	query,
+	setRequestData,
-	selectedTime,
+	queryResponse,
 }: LogsPanelComponentProps): JSX.Element {
-	const { selectedTime: globalSelectedTime, maxTime, minTime } = useSelector<
-		AppState,
-		GlobalReducer
-	>((state) => state.globalTime);
-
 	const [pagination, setPagination] = useState<Pagination>({
 		offset: 0,
-		limit: query.builder.queryData[0].limit || 0,
+		limit: widget.query.builder.queryData[0].limit || 0,
-	});
-
-	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		const updatedQuery = { ...query };
-		updatedQuery.builder.queryData[0].pageSize = 10;
-		return {
-			query: updatedQuery,
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			tableParams: {
-				pagination,
-			},
-		};
 	});
 
 	useEffect(() => {
-		setRequestData({
+		setRequestData((prev) => ({
-			...requestData,
+			...prev,
-			globalSelectedInterval: globalSelectedTime,
 			tableParams: {
 				pagination,
 			},
-		});
+		}));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [pagination, setRequestData]);
-	}, [pagination]);
 
 	const [pageSize, setPageSize] = useState<number>(10);
-	const { selectedDashboard } = useDashboard();
 
 	const handleChangePageSize = (value: number): void => {
 		setPagination({
@@ -88,53 +59,35 @@ function LogsPanelComponent({
 			offset: value,
 		});
 		setPageSize(value);
-		const newQueryData = { ...requestData.query };
+		setRequestData((prev) => {
-		newQueryData.builder.queryData[0].pageSize = value;
+			const newQueryData = { ...prev.query };
-		const newRequestData = {
+			newQueryData.builder.queryData[0].pageSize = value;
-			...requestData,
+			return {
-			query: newQueryData,
+				...prev,
-			tableParams: {
+				query: newQueryData,
-				pagination,
+				tableParams: {
-			},
+					pagination: {
-		};
+						limit: 0,
-		setRequestData(newRequestData);
+						offset: value,
+					},
+				},
+			};
+		});
 	};
 
-	const { data, isFetching, isError } = useGetQueryRange(
+	const columns = getLogPanelColumnsList(widget.selectedLogFields);
-		{
-			...requestData,
-			globalSelectedInterval: globalSelectedTime,
-			selectedTime: selectedTime?.enum || 'GLOBAL_TIME',
-			variables: getDashboardVariables(selectedDashboard?.data.variables),
-		},
-		DEFAULT_ENTITY_VERSION,
-		{
-			queryKey: [
-				REACT_QUERY_KEY.GET_QUERY_RANGE,
-				globalSelectedTime,
-				maxTime,
-				minTime,
-				requestData,
-				pagination,
-				selectedDashboard?.data.variables,
-			],
-			enabled: !!requestData.query && !!selectedLogsFields?.length,
-		},
-	);
-
-	const columns = getLogPanelColumnsList(selectedLogsFields);
 
 	const dataLength =
-		data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
+		queryResponse.data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
 	const totalCount = useMemo(() => dataLength || 0, [dataLength]);
 
 	const [firstLog, setFirstLog] = useState<ILog>();
 	const [lastLog, setLastLog] = useState<ILog>();
 
 	const { logs } = useLogsData({
-		result: data?.payload.data.newResult.data.result,
+		result: queryResponse.data?.payload.data.newResult.data.result,
 		panelType: PANEL_TYPES.LIST,
-		stagedQuery: query,
+		stagedQuery: widget.query,
 	});
 
 	useEffect(() => {
@@ -167,92 +120,86 @@ function LogsPanelComponent({
 	);
 
 	const isOrderByTimeStamp =
-		query.builder.queryData[0].orderBy.length > 0 &&
+		widget.query.builder.queryData[0].orderBy.length > 0 &&
-		query.builder.queryData[0].orderBy[0].columnName === 'timestamp';
+		widget.query.builder.queryData[0].orderBy[0].columnName === 'timestamp';
 
 	const handlePreviousPagination = (): void => {
 		if (isOrderByTimeStamp) {
-			setRequestData({
+			setRequestData((prev) => ({
-				...requestData,
+				...prev,
 				query: {
-					...requestData.query,
+					...prev.query,
 					builder: {
-						...requestData.query.builder,
+						...prev.query.builder,
 						queryData: [
 							{
-								...requestData.query.builder.queryData[0],
+								...prev.query.builder.queryData[0],
 								filters: {
-									...requestData.query.builder.queryData[0].filters,
+									...prev.query.builder.queryData[0].filters,
 									items: [
-										{
+										...getNextOrPreviousItems(
-											id: uuid(),
+											prev.query.builder.queryData[0].filters.items,
-											key: {
+											'PREV',
-												key: 'id',
+											firstLog,
-												type: '',
+										),
-												dataType: DataTypes.String,
-												isColumn: true,
-											},
-											op: OPERATORS['>'],
-											value: firstLog?.id || '',
-										},
 									],
 								},
+								limit: 0,
+								offset: 0,
 							},
 						],
 					},
 				},
-			});
+			}));
-			return;
+		}
+		if (!isOrderByTimeStamp) {
+			setPagination({
+				...pagination,
+				limit: 0,
+				offset: pagination.offset - pageSize,
+			});
 		}
-		setPagination({
-			...pagination,
-			limit: 0,
-			offset: pagination.offset - pageSize,
-		});
 	};
 
 	const handleNextPagination = (): void => {
 		if (isOrderByTimeStamp) {
-			setRequestData({
+			setRequestData((prev) => ({
-				...requestData,
+				...prev,
 				query: {
-					...requestData.query,
+					...prev.query,
 					builder: {
-						...requestData.query.builder,
+						...prev.query.builder,
 						queryData: [
 							{
-								...requestData.query.builder.queryData[0],
+								...prev.query.builder.queryData[0],
 								filters: {
-									...requestData.query.builder.queryData[0].filters,
+									...prev.query.builder.queryData[0].filters,
 									items: [
-										{
+										...getNextOrPreviousItems(
-											id: uuid(),
+											prev.query.builder.queryData[0].filters.items,
-											key: {
+											'NEXT',
-												key: 'id',
+											lastLog,
-												type: '',
+										),
-												dataType: DataTypes.String,
-												isColumn: true,
-											},
-											op: OPERATORS['<'],
-											value: lastLog?.id || '',
-										},
 									],
 								},
+								limit: 0,
+								offset: 0,
 							},
 						],
 					},
 				},
-			});
+			}));
-			return;
+		}
+		if (!isOrderByTimeStamp) {
+			setPagination({
+				...pagination,
+				limit: 0,
+				offset: pagination.offset + pageSize,
+			});
 		}
-		setPagination({
-			...pagination,
-			limit: 0,
-			offset: pagination.offset + pageSize,
-		});
 	};
 
-	if (isError) {
+	if (queryResponse.isError) {
 		return <div>{SOMETHING_WENT_WRONG}</div>;
 	}
 
@@ -265,19 +212,19 @@ function LogsPanelComponent({
 						tableLayout="fixed"
 						scroll={{ x: `calc(50vw - 10px)` }}
 						sticky
-						loading={isFetching}
+						loading={queryResponse.isFetching}
 						style={tableStyles}
 						dataSource={flattenLogData}
 						columns={columns}
 						onRow={handleRow}
 					/>
 				</div>
-				{!query.builder.queryData[0].limit && (
+				{!widget.query.builder.queryData[0].limit && (
 					<div className="controller">
 						<Controls
 							totalCount={totalCount}
 							perPageOptions={PER_PAGE_OPTIONS}
-							isLoading={isFetching}
+							isLoading={queryResponse.isFetching}
 							offset={pagination.offset}
 							countPerPage={pageSize}
 							handleNavigatePrevious={handlePreviousPagination}
@@ -301,13 +248,12 @@ function LogsPanelComponent({
 }
 
 export type LogsPanelComponentProps = {
-	selectedLogsFields: Widgets['selectedLogFields'];
+	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
-	query: Query;
+	queryResponse: UseQueryResult<
-	selectedTime?: timePreferance;
+		SuccessResponse<MetricRangePayloadProps, unknown>,
-};
+		Error
-
+	>;
-LogsPanelComponent.defaultProps = {
+	widget: Widgets;
-	selectedTime: undefined,
 };
 
 export default LogsPanelComponent;

frontend/src/container/LogsPanelTable/utils.tsx

@@ -1,10 +1,15 @@
 import { ColumnsType } from 'antd/es/table';
 import { Typography } from 'antd/lib';
+import { OPERATORS } from 'constants/queryBuilder';
 // import Typography from 'antd/es/typography/Typography';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { ReactNode } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuid } from 'uuid';
 
 export const getLogPanelColumnsList = (
 	selectedLogFields: Widgets['selectedLogFields'],
@@ -36,3 +41,49 @@ export const getLogPanelColumnsList = (
 
 	return [...initialColumns, ...columns];
 };
+
+export const getNextOrPreviousItems = (
+	items: TagFilterItem[],
+	direction: 'NEXT' | 'PREV',
+	log?: ILog,
+): TagFilterItem[] => {
+	const nextItem = {
+		id: uuid(),
+		key: {
+			key: 'id',
+			type: '',
+			dataType: DataTypes.String,
+			isColumn: true,
+		},
+		op: OPERATORS['<'],
+		value: log?.id || '',
+	};
+	const prevItem = {
+		id: uuid(),
+		key: {
+			key: 'id',
+			type: '',
+			dataType: DataTypes.String,
+			isColumn: true,
+		},
+		op: OPERATORS['>'],
+		value: log?.id || '',
+	};
+	let index = items.findIndex((item) => item.op === OPERATORS['<']);
+	if (index === -1) {
+		index = items.findIndex((item) => item.op === OPERATORS['>']);
+	}
+	if (index === -1) {
+		if (direction === 'NEXT') {
+			return [...items, nextItem];
+		}
+		return [...items, prevItem];
+	}
+	const newItems = [...items];
+	if (direction === 'NEXT') {
+		newItems[index] = nextItem;
+	} else {
+		newItems[index] = prevItem;
+	}
+	return newItems;
+};

frontend/src/container/LogsSearchFilter/utils.ts

@@ -1,9 +1,12 @@
 import { Time } from 'container/TopNav/DateTimeSelection/config';
-import { Time as TimeV2 } from 'container/TopNav/DateTimeSelectionV2/config';
+import {
+	CustomTimeType,
+	Time as TimeV2,
+} from 'container/TopNav/DateTimeSelectionV2/config';
 import { GetMinMaxPayload } from 'lib/getMinMax';
 
 export const getGlobalTime = (
-	selectedTime: Time | TimeV2,
+	selectedTime: Time | TimeV2 | CustomTimeType,
 	globalTime: GetMinMaxPayload,
 ): GetMinMaxPayload | undefined => {
 	if (selectedTime === 'custom') {

frontend/src/container/LogsTable/index.tsx

@@ -74,6 +74,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 					key={log.id}
 					logData={log}
 					selectedFields={selected}
+					linesPerRow={linesPerRow}
 					onAddToQuery={onAddToQuery}
 					onSetActiveLog={onSetActiveLog}
 				/>

frontend/src/container/MetricsApplication/MetricsApplication.factory.ts

@@ -8,6 +8,7 @@ export const getWidgetQueryBuilder = ({
 	title = '',
 	panelTypes,
 	yAxisUnit = '',
+	fillSpans = false,
 	id,
 }: GetWidgetQueryBuilderProps): Widgets => ({
 	description: '',
@@ -24,4 +25,5 @@ export const getWidgetQueryBuilder = ({
 	softMin: null,
 	selectedLogFields: [],
 	selectedTracesFields: [],
+	fillSpans,
 });

frontend/src/container/MetricsApplication/Tabs/DBCall.tsx

@@ -70,6 +70,7 @@ function DBCall(): JSX.Element {
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: 'reqps',
 				id: SERVICE_CHART_ID.dbCallsRPS,
+				fillSpans: false,
 			}),
 		[servicename, tagFilterItems],
 	);
@@ -89,7 +90,8 @@ function DBCall(): JSX.Element {
 				title: GraphTitle.DATABASE_CALLS_AVG_DURATION,
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: 'ms',
-				id: SERVICE_CHART_ID.dbCallsAvgDuration,
+				id: GraphTitle.DATABASE_CALLS_AVG_DURATION,
+				fillSpans: true,
 			}),
 		[servicename, tagFilterItems],
 	);
@@ -112,8 +114,6 @@ function DBCall(): JSX.Element {
 				<Card data-testid="database_call_rps">
 					<GraphContainer>
 						<Graph
-							fillSpans={false}
-							name="database_call_rps"
 							widget={databaseCallsRPSWidget}
 							onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
 								onGraphClickHandler(setSelectedTimeStamp)(
@@ -147,8 +147,6 @@ function DBCall(): JSX.Element {
 				<Card data-testid="database_call_avg_duration">
 					<GraphContainer>
 						<Graph
-							fillSpans
-							name="database_call_avg_duration"
 							widget={databaseCallsAverageDurationWidget}
 							headerMenuList={MENU_ITEMS}
 							onClickHandler={(xValue, yValue, mouseX, mouseY): void => {

frontend/src/container/MetricsApplication/Tabs/External.tsx

@@ -18,7 +18,7 @@ import { useParams } from 'react-router-dom';
 import { EQueryType } from 'types/common/dashboard';
 import { v4 as uuid } from 'uuid';
 
-import { GraphTitle, legend, MENU_ITEMS, SERVICE_CHART_ID } from '../constant';
+import { GraphTitle, legend, MENU_ITEMS } from '../constant';
 import { getWidgetQueryBuilder } from '../MetricsApplication.factory';
 import { Card, GraphContainer, Row } from '../styles';
 import { Button } from './styles';
@@ -60,7 +60,7 @@ function External(): JSX.Element {
 				title: GraphTitle.EXTERNAL_CALL_ERROR_PERCENTAGE,
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: '%',
-				id: SERVICE_CHART_ID.externalCallErrorPercentage,
+				id: GraphTitle.EXTERNAL_CALL_ERROR_PERCENTAGE,
 			}),
 		[servicename, tagFilterItems],
 	);
@@ -86,7 +86,8 @@ function External(): JSX.Element {
 				title: GraphTitle.EXTERNAL_CALL_DURATION,
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: 'ms',
-				id: SERVICE_CHART_ID.externalCallDuration,
+				id: GraphTitle.EXTERNAL_CALL_DURATION,
+				fillSpans: true,
 			}),
 		[servicename, tagFilterItems],
 	);
@@ -108,7 +109,8 @@ function External(): JSX.Element {
 				title: GraphTitle.EXTERNAL_CALL_RPS_BY_ADDRESS,
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: 'reqps',
-				id: SERVICE_CHART_ID.externalCallRPSByAddress,
+				id: GraphTitle.EXTERNAL_CALL_RPS_BY_ADDRESS,
+				fillSpans: true,
 			}),
 		[servicename, tagFilterItems],
 	);
@@ -130,7 +132,8 @@ function External(): JSX.Element {
 				title: GraphTitle.EXTERNAL_CALL_DURATION_BY_ADDRESS,
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: 'ms',
-				id: SERVICE_CHART_ID.externalCallDurationByAddress,
+				id: GraphTitle.EXTERNAL_CALL_DURATION_BY_ADDRESS,
+				fillSpans: true,
 			}),
 		[servicename, tagFilterItems],
 	);
@@ -155,9 +158,7 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_error_percentage">
 						<GraphContainer>
 							<Graph
-								fillSpans={false}
 								headerMenuList={MENU_ITEMS}
-								name="external_call_error_percentage"
 								widget={externalCallErrorWidget}
 								onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
 									onGraphClickHandler(setSelectedTimeStamp)(
@@ -192,8 +193,6 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_duration">
 						<GraphContainer>
 							<Graph
-								fillSpans
-								name="external_call_duration"
 								headerMenuList={MENU_ITEMS}
 								widget={externalCallDurationWidget}
 								onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
@@ -230,8 +229,6 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_rps_by_address">
 						<GraphContainer>
 							<Graph
-								fillSpans
-								name="external_call_rps_by_address"
 								widget={externalCallRPSWidget}
 								headerMenuList={MENU_ITEMS}
 								onClickHandler={(xValue, yValue, mouseX, mouseY): Promise<void> =>
@@ -267,10 +264,8 @@ function External(): JSX.Element {
 					<Card data-testid="external_call_duration_by_address">
 						<GraphContainer>
 							<Graph
-								name="external_call_duration_by_address"
 								widget={externalCallDurationAddressWidget}
 								headerMenuList={MENU_ITEMS}
-								fillSpans
 								onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
 									onGraphClickHandler(setSelectedTimeStamp)(
 										xValue,

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -19,13 +19,10 @@ import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { defaultTo } from 'lodash-es';
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useLocation, useParams } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
-import { AppState } from 'store/reducers';
 import { EQueryType } from 'types/common/dashboard';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { Tags } from 'types/reducer/trace';
 import { v4 as uuid } from 'uuid';
 
 import { GraphTitle, SERVICE_CHART_ID } from '../constant';
@@ -49,9 +46,6 @@ import {
 } from './util';
 
 function Application(): JSX.Element {
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 	const { servicename: encodedServiceName } = useParams<IServiceName>();
 	const servicename = decodeURIComponent(encodedServiceName);
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
@@ -59,10 +53,6 @@ function Application(): JSX.Element {
 	const { queries } = useResourceAttribute();
 	const urlQuery = useUrlQuery();
 
-	const selectedTags = useMemo(
-		() => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [],
-		[queries],
-	);
 	const isSpanMetricEnabled = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS)
 		?.active;
 
@@ -94,7 +84,7 @@ function Application(): JSX.Element {
 		isLoading: topLevelOperationsIsLoading,
 		isError: topLevelOperationsIsError,
 	} = useQuery<ServiceDataProps>({
-		queryKey: [servicename, minTime, maxTime, selectedTags],
+		queryKey: [servicename],
 		queryFn: getTopLevelOperations,
 	});
 
@@ -116,49 +106,41 @@ function Application(): JSX.Element {
 		[servicename, topLevelOperations],
 	);
 
-	const operationPerSecWidget = useMemo(
+	const operationPerSecWidget = getWidgetQueryBuilder({
-		() =>
+		query: {
-			getWidgetQueryBuilder({
+			queryType: EQueryType.QUERY_BUILDER,
-				query: {
+			promql: [],
-					queryType: EQueryType.QUERY_BUILDER,
+			builder: operationPerSec({
-					promql: [],
+				servicename,
-					builder: operationPerSec({
+				tagFilterItems,
-						servicename,
+				topLevelOperations: topLevelOperationsRoute,
-						tagFilterItems,
-						topLevelOperations: topLevelOperationsRoute,
-					}),
-					clickhouse_sql: [],
-					id: uuid(),
-				},
-				title: GraphTitle.RATE_PER_OPS,
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				yAxisUnit: 'ops',
-				id: SERVICE_CHART_ID.rps,
 			}),
-		[servicename, tagFilterItems, topLevelOperationsRoute],
+			clickhouse_sql: [],
-	);
+			id: uuid(),
+		},
+		title: GraphTitle.RATE_PER_OPS,
+		panelTypes: PANEL_TYPES.TIME_SERIES,
+		yAxisUnit: 'ops',
+		id: SERVICE_CHART_ID.rps,
+	});
 
-	const errorPercentageWidget = useMemo(
+	const errorPercentageWidget = getWidgetQueryBuilder({
-		() =>
+		query: {
-			getWidgetQueryBuilder({
+			queryType: EQueryType.QUERY_BUILDER,
-				query: {
+			promql: [],
-					queryType: EQueryType.QUERY_BUILDER,
+			builder: errorPercentage({
-					promql: [],
+				servicename,
-					builder: errorPercentage({
+				tagFilterItems,
-						servicename,
+				topLevelOperations: topLevelOperationsRoute,
-						tagFilterItems,
-						topLevelOperations: topLevelOperationsRoute,
-					}),
-					clickhouse_sql: [],
-					id: uuid(),
-				},
-				title: GraphTitle.ERROR_PERCENTAGE,
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				yAxisUnit: '%',
-				id: SERVICE_CHART_ID.errorPercentage,
 			}),
-		[servicename, tagFilterItems, topLevelOperationsRoute],
+			clickhouse_sql: [],
-	);
+			id: uuid(),
+		},
+		title: GraphTitle.ERROR_PERCENTAGE,
+		panelTypes: PANEL_TYPES.TIME_SERIES,
+		yAxisUnit: '%',
+		id: SERVICE_CHART_ID.errorPercentage,
+	});
 
 	const onDragSelect = useCallback(
 		(start: number, end: number) => {

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx

@@ -89,8 +89,6 @@ function ApDexMetrics({
 
 	return (
 		<Graph
-			name="apdex"
-			fillSpans={false}
 			widget={apDexMetricsWidget}
 			onDragSelect={onDragSelect}
 			onClickHandler={handleGraphClick('ApDex')}

frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx

@@ -50,7 +50,6 @@ function ApDexTraces({
 
 	return (
 		<Graph
-			name="apdex"
 			widget={apDexTracesWidget}
 			onDragSelect={onDragSelect}
 			onClickHandler={handleGraphClick('ApDex')}

frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from 'antd';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { FeatureKeys } from 'constants/features';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -46,28 +47,24 @@ function ServiceOverview({
 		[isSpanMetricEnable, queries],
 	);
 
-	const latencyWidget = useMemo(
+	const latencyWidget = getWidgetQueryBuilder({
-		() =>
+		query: {
-			getWidgetQueryBuilder({
+			queryType: EQueryType.QUERY_BUILDER,
-				query: {
+			promql: [],
-					queryType: EQueryType.QUERY_BUILDER,
+			builder: latency({
-					promql: [],
+				servicename,
-					builder: latency({
+				tagFilterItems,
-						servicename,
+				isSpanMetricEnable,
-						tagFilterItems,
+				topLevelOperationsRoute,
-						isSpanMetricEnable,
-						topLevelOperationsRoute,
-					}),
-					clickhouse_sql: [],
-					id: uuid(),
-				},
-				title: GraphTitle.LATENCY,
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				yAxisUnit: 'ns',
-				id: SERVICE_CHART_ID.latency,
 			}),
-		[servicename, isSpanMetricEnable, topLevelOperationsRoute, tagFilterItems],
+			clickhouse_sql: [],
-	);
+			id: uuid(),
+		},
+		title: GraphTitle.LATENCY,
+		panelTypes: PANEL_TYPES.TIME_SERIES,
+		yAxisUnit: 'ns',
+		id: SERVICE_CHART_ID.latency,
+	});
 
 	const isQueryEnabled =
 		!topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0;
@@ -88,15 +85,23 @@ function ServiceOverview({
 			</Button>
 			<Card data-testid="service_latency">
 				<GraphContainer>
-					<Graph
+					{topLevelOperationsIsLoading && (
-						name="service_latency"
+						<Skeleton
-						onDragSelect={onDragSelect}
+							style={{
-						widget={latencyWidget}
+								height: '100%',
-						onClickHandler={handleGraphClick('Service')}
+								padding: '16px',
-						isQueryEnabled={isQueryEnabled}
+							}}
-						fillSpans={false}
+						/>
-						version={ENTITY_VERSION_V4}
+					)}
-					/>
+					{!topLevelOperationsIsLoading && (
+						<Graph
+							onDragSelect={onDragSelect}
+							widget={latencyWidget}
+							onClickHandler={handleGraphClick('Service')}
+							isQueryEnabled={isQueryEnabled}
+							version={ENTITY_VERSION_V4}
+						/>
+					)}
 				</GraphContainer>
 			</Card>
 		</>

frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { Skeleton, Typography } from 'antd';
 import axios from 'axios';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { ENTITY_VERSION_V4 } from 'constants/app';
@@ -27,15 +27,23 @@ function TopLevelOperation({
 				</Typography>
 			) : (
 				<GraphContainer>
-					<Graph
+					{topLevelOperationsIsLoading && (
-						fillSpans={false}
+						<Skeleton
-						name={name}
+							style={{
-						widget={widget}
+								height: '100%',
-						onClickHandler={handleGraphClick(opName)}
+								padding: '16px',
-						onDragSelect={onDragSelect}
+							}}
-						isQueryEnabled={!topLevelOperationsIsLoading}
+						/>
-						version={ENTITY_VERSION_V4}
+					)}
-					/>
+					{!topLevelOperationsIsLoading && (
+						<Graph
+							widget={widget}
+							onClickHandler={handleGraphClick(opName)}
+							onDragSelect={onDragSelect}
+							isQueryEnabled={!topLevelOperationsIsLoading}
+							version={ENTITY_VERSION_V4}
+						/>
+					)}
 				</GraphContainer>
 			)}
 		</Card>

frontend/src/container/MetricsApplication/styles.ts

@@ -13,7 +13,7 @@ export const Card = styled(CardComponent)`
 	}
 
 	.ant-card-body {
-		height: calc(100% - 40px);
+		height: 100%;
 		padding: 0;
 	}
 `;
@@ -40,7 +40,7 @@ export const ColErrorContainer = styled(ColComponent)`
 
 export const GraphContainer = styled.div`
 	min-height: calc(40vh - 40px);
-	height: calc(100% - 40px);
+	height: 100%;
 `;
 
 export const GraphTitle = styled(Typography)`

frontend/src/container/MetricsApplication/types.ts

@@ -10,6 +10,7 @@ export interface GetWidgetQueryBuilderProps {
 	panelTypes: Widgets['panelTypes'];
 	yAxisUnit?: Widgets['yAxisUnit'];
 	id?: Widgets['id'];
+	fillSpans?: Widgets['fillSpans'];
 }
 
 export interface NavigateToTraceProps {

frontend/src/container/NewDashboard/DashboardDescription/index.tsx

@@ -23,7 +23,12 @@ function DashboardDescription(): JSX.Element {
 		handleDashboardLockToggle,
 	} = useDashboard();
 
-	const selectedData = selectedDashboard?.data || ({} as DashboardData);
+	const selectedData = selectedDashboard
+		? {
+				...selectedDashboard.data,
+				uuid: selectedDashboard.uuid,
+		  }
+		: ({} as DashboardData);
 
 	const { title = '', tags, description } = selectedData || {};