Merge pull request #4853 from SigNoz/release/v0.43.x

Release/v0.43.x
2025-08-05 20:16:04 +08:00 · 2024-04-15 20:07:57 +05:45 · 2024-04-15 20:07:57 +05:45 · 5817d50652
commit 5817d50652
parent 4fbb71484d ec0185da61
503 changed files with 11660 additions and 4286 deletions
--- a/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
+++ b/deploy/docker-swarm/clickhouse-setup/docker-compose.yaml
@ -146,7 +146,7 @@ services:
        condition: on-failure

  query-service:
-    image: signoz/query-service:0.42.0
+    image: signoz/query-service:0.43.0
    command:
      [
        "-config=/root/config/prometheus.yml",
@ -186,7 +186,7 @@ services:
    <<: *db-depend

  frontend:
-    image: signoz/frontend:0.42.0
+    image: signoz/frontend:0.43.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.17
+    image: signoz/signoz-otel-collector:0.88.20
    command:
      [
        "--config=/etc/otel-collector-config.yaml",
@ -237,7 +237,7 @@ services:
      - query-service

  otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.17
+      image: signoz/signoz-schema-migrator:0.88.20
      deploy:
        restart_policy:
          condition: on-failure
--- a/deploy/docker/clickhouse-setup/docker-compose-core.yaml
+++ b/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.17}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.20}
    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.17
+    image: signoz/signoz-otel-collector:0.88.20
    command:
      [
        "--config=/etc/otel-collector-config.yaml",
--- a/deploy/docker/clickhouse-setup/docker-compose.yaml
+++ b/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.42.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.43.0}
    container_name: signoz-query-service
    command:
      [
@ -203,7 +203,7 @@ services:
    <<: *db-depend

  frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.42.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.43.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.17}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.20}
    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.17}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.20}
    container_name: signoz-otel-collector
    command:
      [
--- a/ee/query-service/app/api/api.go
+++ b/ee/query-service/app/api/api.go
@ -152,7 +152,6 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddlew
 	router.HandleFunc("/api/v1/register", am.OpenAccess(ah.registerUser)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/login", am.OpenAccess(ah.loginUser)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/traces/{traceId}", am.ViewAccess(ah.searchTraces)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v2/metrics/query_range", am.ViewAccess(ah.queryRangeMetricsV2)).Methods(http.MethodPost)

 	// PAT APIs
 	router.HandleFunc("/api/v1/pats", am.AdminAccess(ah.createPAT)).Methods(http.MethodPost)
--- a/ee/query-service/app/api/metrics.go
+++ b/ee/query-service/app/api/metrics.go
@ -1,236 +0,0 @@
-package api
-
-import (
-	"bytes"
-	"fmt"
-	"net/http"
-	"sync"
-	"text/template"
-	"time"
-
-	"go.signoz.io/signoz/pkg/query-service/app/metrics"
-	"go.signoz.io/signoz/pkg/query-service/app/parser"
-	"go.signoz.io/signoz/pkg/query-service/constants"
-	basemodel "go.signoz.io/signoz/pkg/query-service/model"
-	querytemplate "go.signoz.io/signoz/pkg/query-service/utils/queryTemplate"
-	"go.uber.org/zap"
-)
-
-func (ah *APIHandler) queryRangeMetricsV2(w http.ResponseWriter, r *http.Request) {
-	if !ah.CheckFeature(basemodel.CustomMetricsFunction) {
-		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.L().Error("Error in parsing metric query params", zap.Error(apiErrorObj.Err))
-		RespondError(w, apiErrorObj, nil)
-		return
-	}
-
-	// prometheus instant query needs same timestamp
-	if metricsQueryRangeParams.CompositeMetricQuery.PanelType == basemodel.QUERY_VALUE &&
-		metricsQueryRangeParams.CompositeMetricQuery.QueryType == basemodel.PROM {
-		metricsQueryRangeParams.Start = metricsQueryRangeParams.End
-	}
-
-	// round up the end to nearest multiple
-	if metricsQueryRangeParams.CompositeMetricQuery.QueryType == basemodel.QUERY_BUILDER {
-		end := (metricsQueryRangeParams.End) / 1000
-		step := metricsQueryRangeParams.Step
-		metricsQueryRangeParams.End = (end / step * step) * 1000
-	}
-
-	type channelResult struct {
-		Series    []*basemodel.Series
-		TableName string
-		Err       error
-		Name      string
-		Query     string
-	}
-
-	execClickHouseQueries := func(queries map[string]string) ([]*basemodel.Series, []string, error, map[string]string) {
-		var seriesList []*basemodel.Series
-		var tableName []string
-		ch := make(chan channelResult, len(queries))
-		var wg sync.WaitGroup
-
-		for name, query := range queries {
-			wg.Add(1)
-			go func(name, query string) {
-				defer wg.Done()
-				seriesList, tableName, err := ah.opts.DataConnector.GetMetricResultEE(r.Context(), query)
-				for _, series := range seriesList {
-					series.QueryName = name
-				}
-
-				if err != nil {
-					ch <- channelResult{Err: fmt.Errorf("error in query-%s: %v", name, err), Name: name, Query: query}
-					return
-				}
-				ch <- channelResult{Series: seriesList, TableName: tableName}
-			}(name, query)
-		}
-
-		wg.Wait()
-		close(ch)
-
-		var errs []error
-		errQuriesByName := make(map[string]string)
-		// read values from the channel
-		for r := range ch {
-			if r.Err != nil {
-				errs = append(errs, r.Err)
-				errQuriesByName[r.Name] = r.Query
-				continue
-			}
-			seriesList = append(seriesList, r.Series...)
-			tableName = append(tableName, r.TableName)
-		}
-		if len(errs) != 0 {
-			return nil, nil, fmt.Errorf("encountered multiple errors: %s", metrics.FormatErrs(errs, "\n")), errQuriesByName
-		}
-		return seriesList, tableName, nil, nil
-	}
-
-	execPromQueries := func(metricsQueryRangeParams *basemodel.QueryRangeParamsV2) ([]*basemodel.Series, error, map[string]string) {
-		var seriesList []*basemodel.Series
-		ch := make(chan channelResult, len(metricsQueryRangeParams.CompositeMetricQuery.PromQueries))
-		var wg sync.WaitGroup
-
-		for name, query := range metricsQueryRangeParams.CompositeMetricQuery.PromQueries {
-			if query.Disabled {
-				continue
-			}
-			wg.Add(1)
-			go func(name string, query *basemodel.PromQuery) {
-				var seriesList []*basemodel.Series
-				defer wg.Done()
-				tmpl := template.New("promql-query")
-				tmpl, tmplErr := tmpl.Parse(query.Query)
-				if tmplErr != nil {
-					ch <- channelResult{Err: fmt.Errorf("error in parsing query-%s: %v", name, tmplErr), Name: name, Query: query.Query}
-					return
-				}
-				var queryBuf bytes.Buffer
-				tmplErr = tmpl.Execute(&queryBuf, metricsQueryRangeParams.Variables)
-				if tmplErr != nil {
-					ch <- channelResult{Err: fmt.Errorf("error in parsing query-%s: %v", name, tmplErr), Name: name, Query: query.Query}
-					return
-				}
-				query.Query = queryBuf.String()
-				queryModel := basemodel.QueryRangeParams{
-					Start: time.UnixMilli(metricsQueryRangeParams.Start),
-					End:   time.UnixMilli(metricsQueryRangeParams.End),
-					Step:  time.Duration(metricsQueryRangeParams.Step * int64(time.Second)),
-					Query: query.Query,
-				}
-				promResult, _, err := ah.opts.DataConnector.GetQueryRangeResult(r.Context(), &queryModel)
-				if err != nil {
-					ch <- channelResult{Err: fmt.Errorf("error in query-%s: %v", name, err), Name: name, Query: query.Query}
-					return
-				}
-				matrix, _ := promResult.Matrix()
-				for _, v := range matrix {
-					var s basemodel.Series
-					s.QueryName = name
-					s.Labels = v.Metric.Copy().Map()
-					for _, p := range v.Floats {
-						s.Points = append(s.Points, basemodel.MetricPoint{Timestamp: p.T, Value: p.F})
-					}
-					seriesList = append(seriesList, &s)
-				}
-				ch <- channelResult{Series: seriesList}
-			}(name, query)
-		}
-
-		wg.Wait()
-		close(ch)
-
-		var errs []error
-		errQuriesByName := make(map[string]string)
-		// read values from the channel
-		for r := range ch {
-			if r.Err != nil {
-				errs = append(errs, r.Err)
-				errQuriesByName[r.Name] = r.Query
-				continue
-			}
-			seriesList = append(seriesList, r.Series...)
-		}
-		if len(errs) != 0 {
-			return nil, fmt.Errorf("encountered multiple errors: %s", metrics.FormatErrs(errs, "\n")), errQuriesByName
-		}
-		return seriesList, nil, nil
-	}
-
-	var seriesList []*basemodel.Series
-	var tableName []string
-	var err error
-	var errQuriesByName map[string]string
-	switch metricsQueryRangeParams.CompositeMetricQuery.QueryType {
-	case basemodel.QUERY_BUILDER:
-		runQueries := metrics.PrepareBuilderMetricQueries(metricsQueryRangeParams, constants.SIGNOZ_TIMESERIES_TABLENAME)
-		if runQueries.Err != nil {
-			RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: runQueries.Err}, nil)
-			return
-		}
-		seriesList, tableName, err, errQuriesByName = execClickHouseQueries(runQueries.Queries)
-
-	case basemodel.CLICKHOUSE:
-		queries := make(map[string]string)
-
-		for name, chQuery := range metricsQueryRangeParams.CompositeMetricQuery.ClickHouseQueries {
-			if chQuery.Disabled {
-				continue
-			}
-			tmpl := template.New("clickhouse-query")
-			tmpl, err := tmpl.Parse(chQuery.Query)
-			if err != nil {
-				RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: err}, nil)
-				return
-			}
-			var query bytes.Buffer
-
-			// replace go template variables
-			querytemplate.AssignReservedVars(metricsQueryRangeParams)
-
-			err = tmpl.Execute(&query, metricsQueryRangeParams.Variables)
-			if err != nil {
-				RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: err}, nil)
-				return
-			}
-			queries[name] = query.String()
-		}
-		seriesList, tableName, err, errQuriesByName = execClickHouseQueries(queries)
-	case basemodel.PROM:
-		seriesList, err, errQuriesByName = execPromQueries(metricsQueryRangeParams)
-	default:
-		err = fmt.Errorf("invalid query type")
-		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: err}, errQuriesByName)
-		return
-	}
-
-	if err != nil {
-		apiErrObj := &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: err}
-		RespondError(w, apiErrObj, errQuriesByName)
-		return
-	}
-	if metricsQueryRangeParams.CompositeMetricQuery.PanelType == basemodel.QUERY_VALUE &&
-		len(seriesList) > 1 &&
-		(metricsQueryRangeParams.CompositeMetricQuery.QueryType == basemodel.QUERY_BUILDER ||
-			metricsQueryRangeParams.CompositeMetricQuery.QueryType == basemodel.CLICKHOUSE) {
-		RespondError(w, &basemodel.ApiError{Typ: basemodel.ErrorBadData, Err: fmt.Errorf("invalid: query resulted in more than one series for value type")}, nil)
-		return
-	}
-
-	type ResponseFormat struct {
-		ResultType string              `json:"resultType"`
-		Result     []*basemodel.Series `json:"result"`
-		TableName  []string            `json:"tableName"`
-	}
-	resp := ResponseFormat{ResultType: "matrix", Result: seriesList, TableName: tableName}
-	ah.Respond(w, resp)
-}
--- a/ee/query-service/app/server.go
+++ b/ee/query-service/app/server.go
@ -10,6 +10,7 @@ import (
 	"net/http"
 	_ "net/http/pprof" // http profiler
 	"os"
+	"regexp"
 	"time"

 	"github.com/gorilla/handlers"
@ -328,7 +329,6 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 	r.Use(loggingMiddleware)

 	apiHandler.RegisterRoutes(r, am)
-	apiHandler.RegisterMetricsRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterIntegrationRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
@ -393,13 +393,14 @@ func (lrw *loggingResponseWriter) Flush() {
 	lrw.ResponseWriter.(http.Flusher).Flush()
 }

-func extractQueryRangeV3Data(path string, r *http.Request) (map[string]interface{}, bool) {
-	pathToExtractBodyFrom := "/api/v3/query_range"
+func extractQueryRangeData(path string, r *http.Request) (map[string]interface{}, bool) {
+	pathToExtractBodyFromV3 := "/api/v3/query_range"
+	pathToExtractBodyFromV4 := "/api/v4/query_range"

 	data := map[string]interface{}{}
 	var postData *v3.QueryRangeParamsV3

-	if path == pathToExtractBodyFrom && (r.Method == "POST") {
+	if (r.Method == "POST") && ((path == pathToExtractBodyFromV3) || (path == pathToExtractBodyFromV4)) {
 		if r.Body != nil {
 			bodyBytes, err := io.ReadAll(r.Body)
 			if err != nil {
@ -417,6 +418,25 @@ func extractQueryRangeV3Data(path string, r *http.Request) (map[string]interface
 		return nil, false
 	}

+	referrer := r.Header.Get("Referer")
+
+	dashboardMatched, err := regexp.MatchString(`/dashboard/[a-zA-Z0-9\-]+/(new|edit)(?:\?.*)?$`, referrer)
+	if err != nil {
+		zap.L().Error("error while matching the referrer", zap.Error(err))
+	}
+	alertMatched, err := regexp.MatchString(`/alerts/(new|edit)(?:\?.*)?$`, referrer)
+	if err != nil {
+		zap.L().Error("error while matching the alert: ", zap.Error(err))
+	}
+	logsExplorerMatched, err := regexp.MatchString(`/logs/logs-explorer(?:\?.*)?$`, referrer)
+	if err != nil {
+		zap.L().Error("error while matching the logs explorer: ", zap.Error(err))
+	}
+	traceExplorerMatched, err := regexp.MatchString(`/traces-explorer(?:\?.*)?$`, referrer)
+	if err != nil {
+		zap.L().Error("error while matching the trace explorer: ", zap.Error(err))
+	}
+
 	signozMetricsUsed := false
 	signozLogsUsed := false
 	signozTracesUsed := false
@ -445,7 +465,21 @@ func extractQueryRangeV3Data(path string, r *http.Request) (map[string]interface
 		data["tracesUsed"] = signozTracesUsed
 		userEmail, err := baseauth.GetEmailFromJwt(r.Context())
 		if err == nil {
-			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_API, data, userEmail)
+			// switch case to set data["screen"] based on the referrer
+			switch {
+			case dashboardMatched:
+				data["screen"] = "panel"
+			case alertMatched:
+				data["screen"] = "alert"
+			case logsExplorerMatched:
+				data["screen"] = "logs-explorer"
+			case traceExplorerMatched:
+				data["screen"] = "traces-explorer"
+			default:
+				data["screen"] = "unknown"
+				return data, true
+			}
+			telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_QUERY_RANGE_API, data, userEmail, true, false)
 		}
 	}
 	return data, true
@ -472,7 +506,7 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 		route := mux.CurrentRoute(r)
 		path, _ := route.GetPathTemplate()

-		queryRangeV3data, metadataExists := extractQueryRangeV3Data(path, r)
+		queryRangeData, metadataExists := extractQueryRangeData(path, r)
 		getActiveLogs(path, r)

 		lrw := NewLoggingResponseWriter(w)
@ -480,7 +514,7 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {

 		data := map[string]interface{}{"path": path, "statusCode": lrw.statusCode}
 		if metadataExists {
-			for key, value := range queryRangeV3data {
+			for key, value := range queryRangeData {
 				data[key] = value
 			}
 		}
@ -488,7 +522,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)
 			}
 		}

--- a/ee/query-service/license/manager.go
+++ b/ee/query-service/license/manager.go
@ -204,7 +204,7 @@ func (lm *Manager) Validate(ctx context.Context) (reterr error) {
 			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.L().Info("License validation completed with no errors")
 		}
@ -263,7 +263,7 @@ 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)
 			}
 		}
 	}()
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,3 @@
+
+# Sentry Config File
+.env.sentry-build-plugin
--- a/frontend/package.json
+++ b/frontend/package.json
@ -41,9 +41,12 @@
 		"@radix-ui/react-tabs": "1.0.4",
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "7.102.1",
-		"@sentry/webpack-plugin": "2.14.2",
+		"@sentry/webpack-plugin": "2.16.0",
 		"@signozhq/design-tokens": "0.0.8",
 		"@uiw/react-md-editor": "3.23.5",
+		"@visx/group": "3.3.0",
+		"@visx/shape": "3.5.0",
+		"@visx/tooltip": "3.3.0",
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
 		"antd": "5.11.0",
@ -121,6 +124,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": {
--- a/frontend/public/locales/en-GB/channels.json
+++ b/frontend/public/locales/en-GB/channels.json
@ -15,6 +15,7 @@
  "button_test_channel": "Test",
  "button_return": "Back",
  "field_channel_name": "Name",
+  "field_send_resolved": "Send resolved alerts",
  "field_channel_type": "Type",
  "field_webhook_url": "Webhook URL",
  "field_slack_recipient": "Recipient",
--- a/frontend/public/locales/en/channels.json
+++ b/frontend/public/locales/en/channels.json
@ -15,6 +15,7 @@
  "button_test_channel": "Test",
  "button_return": "Back",
  "field_channel_name": "Name",
+  "field_send_resolved": "Send resolved alerts",
  "field_channel_type": "Type",
  "field_webhook_url": "Webhook URL",
  "field_slack_recipient": "Recipient",
--- a/frontend/public/locales/en/titles.json
+++ b/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"
 }
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@ -147,7 +147,11 @@ function App(): JSX.Element {
 			}
 		}

-		if (isOnBasicPlan || (isLoggedInState && role && role !== 'ADMIN')) {
+		if (
+			isOnBasicPlan ||
+			(isLoggedInState && role && role !== 'ADMIN') ||
+			!(isCloudUserVal || isEECloudUser())
+		) {
 			const newRoutes = routes.filter((route) => route?.path !== ROUTES.BILLING);
 			setRoutes(newRoutes);
 		}
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/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'
-		),
-);
--- a/frontend/src/AppRoutes/routes.ts
+++ b/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',
-	},
-	{
-		path: ROUTES.INTEGRATIONS_MARKETPLACE,
-		exact: true,
-		component: IntegrationsMarketPlace,
-		isPrivate: true,
-		key: 'INTEGRATIONS_MARKETPLACE',
+		key: 'INTEGRATIONS',
 	},
 ];

--- a/frontend/src/api/ErrorResponseHandler.ts
+++ b/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),
 			};
 		}

--- a/frontend/src/api/SAML/listAllDomain.ts
+++ b/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,
--- a/frontend/src/api/channels/createEmail.ts
+++ b/frontend/src/api/channels/createEmail.ts
@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			email_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					to: props.to,
 					html: props.html,
 					headers: props.headers,
--- a/frontend/src/api/channels/createMsTeams.ts
+++ b/frontend/src/api/channels/createMsTeams.ts
@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			msteams_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					webhook_url: props.webhook_url,
 					title: props.title,
 					text: props.text,
--- a/frontend/src/api/channels/createPager.ts
+++ b/frontend/src/api/channels/createPager.ts
@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			pagerduty_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					routing_key: props.routing_key,
 					client: props.client,
 					client_url: props.client_url,
--- a/frontend/src/api/channels/createSlack.ts
+++ b/frontend/src/api/channels/createSlack.ts
@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			slack_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					api_url: props.api_url,
 					channel: props.channel,
 					title: props.title,
--- a/frontend/src/api/channels/createWebhook.ts
+++ b/frontend/src/api/channels/createWebhook.ts
@ -30,7 +30,7 @@ const create = async (
 			name: props.name,
 			webhook_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					url: props.api_url,
 					http_config: httpConfig,
 				},
--- a/frontend/src/api/channels/editEmail.ts
+++ b/frontend/src/api/channels/editEmail.ts
@ -12,7 +12,7 @@ const editEmail = async (
 			name: props.name,
 			email_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					to: props.to,
 					html: props.html,
 					headers: props.headers,
--- a/frontend/src/api/channels/editMsTeams.ts
+++ b/frontend/src/api/channels/editMsTeams.ts
@ -12,7 +12,7 @@ const editMsTeams = async (
 			name: props.name,
 			msteams_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					webhook_url: props.webhook_url,
 					title: props.title,
 					text: props.text,
--- a/frontend/src/api/channels/editOpsgenie.ts
+++ b/frontend/src/api/channels/editOpsgenie.ts
@ -12,7 +12,7 @@ const editOpsgenie = async (
 			name: props.name,
 			opsgenie_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					api_key: props.api_key,
 					description: props.description,
 					priority: props.priority,
--- a/frontend/src/api/channels/editPager.ts
+++ b/frontend/src/api/channels/editPager.ts
@ -12,7 +12,7 @@ const editPager = async (
 			name: props.name,
 			pagerduty_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					routing_key: props.routing_key,
 					client: props.client,
 					client_url: props.client_url,
--- a/frontend/src/api/channels/editSlack.ts
+++ b/frontend/src/api/channels/editSlack.ts
@ -12,7 +12,7 @@ const editSlack = async (
 			name: props.name,
 			slack_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					api_url: props.api_url,
 					channel: props.channel,
 					title: props.title,
--- a/frontend/src/api/channels/editWebhook.ts
+++ b/frontend/src/api/channels/editWebhook.ts
@ -29,7 +29,7 @@ const editWebhook = async (
 			name: props.name,
 			webhook_configs: [
 				{
-					send_resolved: true,
+					send_resolved: props.send_resolved,
 					url: props.api_url,
 					http_config: httpConfig,
 				},
--- a/frontend/src/api/common/logEvent.ts
+++ b/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;
--- a/frontend/src/api/metrics/ApDex/getMetricMeta.ts
+++ b/frontend/src/api/metrics/ApDex/getMetricMeta.ts
@ -1,4 +1,4 @@
-import axios from 'api';
+import { ApiV4Instance } from 'api';
 import { AxiosResponse } from 'axios';
 import { MetricMetaProps } from 'types/api/metrics/getApDex';

@ -6,4 +6,6 @@ export const getMetricMeta = (
 	metricName: string,
 	servicename: string,
 ): Promise<AxiosResponse<MetricMetaProps>> =>
-	axios.get(`/metric_meta?metricName=${metricName}&serviceName=${servicename}`);
+	ApiV4Instance.get(
+		`/metric/metric_metadata?metricName=${metricName}&serviceName=${servicename}`,
+	);
--- a/frontend/src/api/metrics/getMetricName.ts
+++ b/frontend/src/api/metrics/getMetricName.ts
@ -1,27 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	MetricNameProps,
-	MetricNamesPayloadProps,
-} from 'types/api/metrics/getMetricName';
-
-export const getMetricName = async (
-	props: MetricNameProps,
-): Promise<SuccessResponse<MetricNamesPayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.get(
-			`/metrics/autocomplete/list?match=${props || ''}`,
-		);
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
--- a/frontend/src/api/metrics/getResourceAttributes.ts
+++ b/frontend/src/api/metrics/getResourceAttributes.ts
@ -1,6 +1,7 @@
-import { ApiV2Instance as axios } from 'api';
+import { ApiV3Instance as axios } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
+import createQueryParams from 'lib/createQueryParams';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
 	TagKeyProps,
@ -8,15 +9,19 @@ import {
 	TagValueProps,
 	TagValuesPayloadProps,
 } from 'types/api/metrics/getResourceAttributes';
+import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';

 export const getResourceAttributesTagKeys = async (
 	props: TagKeyProps,
 ): Promise<SuccessResponse<TagKeysPayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/metrics/autocomplete/tagKey?metricName=${props.metricName}${
-				props.match ? `&match=${props.match}` : ''
-			}`,
+			`/autocomplete/attribute_keys?${createQueryParams({
+				aggregateOperator: MetricAggregateOperator.RATE,
+				searchText: props.match,
+				dataSource: DataSource.METRICS,
+				aggregateAttribute: props.metricName,
+			})}`,
 		);

 		return {
@ -35,7 +40,13 @@ export const getResourceAttributesTagValues = async (
 ): Promise<SuccessResponse<TagValuesPayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/metrics/autocomplete/tagValue?metricName=${props.metricName}&tagKey=${props.tagKey}`,
+			`/autocomplete/attribute_values?${createQueryParams({
+				aggregateOperator: MetricAggregateOperator.RATE,
+				dataSource: DataSource.METRICS,
+				aggregateAttribute: props.metricName,
+				attributeKey: props.tagKey,
+				searchText: '',
+			})}`,
 		);

 		return {
--- a/frontend/src/api/queryBuilder/getAggregateAttribute.ts
+++ b/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,
--- a/frontend/src/api/queryBuilder/getAttributeKeys.ts
+++ b/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,
--- a/frontend/src/api/saveView/deleteView.ts
+++ b/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}`);
--- a/frontend/src/api/saveView/getAllViews.ts
+++ b/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}`);
--- a/frontend/src/api/saveView/saveView.ts
+++ b/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,
--- a/frontend/src/api/saveView/updateView.ts
+++ b/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,
--- a/frontend/src/components/CustomTimePicker/CustomTimePicker.tsx
+++ b/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,
 };
--- a/frontend/src/components/Loadable/index.tsx
+++ b/frontend/src/components/Loadable/index.tsx
@ -1,9 +1,10 @@
 import { ComponentType, lazy, LazyExoticComponent } from 'react';
+import { lazyRetry } from 'utils/lazyWithRetries';

 function Loadable(importPath: {
 	(): LoadableProps;
 }): LazyExoticComponent<LazyComponent> {
-	return lazy(() => importPath());
+	return lazy(() => lazyRetry(() => importPath()));
 }

 type LazyComponent = ComponentType<Record<string, unknown>>;
--- a/frontend/src/components/TableRenderer/LabelColumn.tsx
+++ b/frontend/src/components/TableRenderer/LabelColumn.tsx
@ -1,10 +1,10 @@
 import './LabelColumn.styles.scss';

 import { Popover, Tag } from 'antd';
-import { popupContainer } from 'utils/selectPopupContainer';

 import { LabelColumnProps } from './TableRenderer.types';
 import TagWithToolTip from './TagWithToolTip';
+import { getLabelAndValueContent } from './utils';

 function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
@ -19,19 +19,17 @@ function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 			)}
 			{remainingLabels.length > 0 && (
 				<Popover
-					getPopupContainer={popupContainer}
 					placement="bottomRight"
 					showArrow={false}
 					content={
 						<div>
 							{labels.map(
 								(label: string): JSX.Element => (
-									<TagWithToolTip
-										key={label}
-										label={label}
-										color={color}
-										value={value}
-									/>
+									<div key={label}>
+										<Tag className="label-column--tag" color={color}>
+											{getLabelAndValueContent(label, value && value[label])}
+										</Tag>
+									</div>
 								),
 							)}
 						</div>
--- a/frontend/src/components/TableRenderer/utils.ts
+++ b/frontend/src/components/TableRenderer/utils.ts
@ -38,6 +38,16 @@ export const getLabelRenderingValue = (
 	return label;
 };

+export const getLabelAndValueContent = (
+	label: string,
+	value?: string,
+): string => {
+	if (value) {
+		return `${label}: ${value}`;
+	}
+	return `${label}`;
+};
+
 interface GeneratorResizeTableColumnsProp<T> {
 	baseColumnOptions: ColumnsType<T>;
 	dynamicColumnOption: { key: string; columnOption: ColumnType<T> }[];
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@ -17,4 +17,5 @@ export enum LOCALSTORAGE {
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
 	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
 	SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
+	PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
 }
--- a/frontend/src/constants/panelTypes.ts
+++ b/frontend/src/constants/panelTypes.ts
@ -29,6 +29,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
+		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};

--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@ -29,4 +29,5 @@ export enum QueryParams {
 	expandedWidgetId = 'expandedWidgetId',
 	integration = 'integration',
 	pagination = 'pagination',
+	relativeTime = 'relativeTime',
 }
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@ -285,6 +285,7 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
+	PIE = 'pie',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }

--- a/frontend/src/constants/queryFunctionOptions.ts
+++ b/frontend/src/constants/queryFunctionOptions.ts
@ -2,7 +2,7 @@
 import { QueryFunctionsTypes } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';

-export const queryFunctionOptions: SelectOption<string, string>[] = [
+export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
 	{
 		value: QueryFunctionsTypes.CUTOFF_MIN,
 		label: 'Cut Off Min',
@ -65,6 +65,12 @@ export const queryFunctionOptions: SelectOption<string, string>[] = [
 	},
 ];

+export const logsQueryFunctionOptions: SelectOption<string, string>[] = [
+	{
+		value: QueryFunctionsTypes.TIME_SHIFT,
+		label: 'Time Shift',
+	},
+];
 interface QueryFunctionConfigType {
 	[key: string]: {
 		showInput: boolean;
--- a/frontend/src/constants/routes.ts
+++ b/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_INSTALLED: '/integrations/installed',
-	INTEGRATIONS_MARKETPLACE: '/integrations/marketplace',
+	INTEGRATIONS: '/integrations',
 } as const;

 export default ROUTES;
--- a/frontend/src/constants/sessionStorage.ts
+++ b/frontend/src/constants/sessionStorage.ts
@ -0,0 +1,3 @@
+export enum SESSIONSTORAGE {
+	RETRY_LAZY_REFRESHED = 'retry-lazy-refreshed',
+}
--- a/frontend/src/constants/shortcuts/DashboardShortcuts.ts
+++ b/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',
-	DiscardChanges: 'Discard Changes',
+	SaveChanges: 'Save Changes for panel',
+	DiscardChanges: 'Discard Changes for panel',
 };
--- a/frontend/src/constants/shortcuts/QBShortcuts.ts
+++ b/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',
 };
--- a/frontend/src/container/AppLayout/AppLayout.styles.scss
+++ b/frontend/src/container/AppLayout/AppLayout.styles.scss
@ -4,8 +4,9 @@
 	width: 100%;

 	.app-content {
-		width: 100%;
+		width: calc(100% - 64px);
 		overflow: auto;
+		z-index: 0;

 		.content-container {
 			position: relative;
@ -16,6 +17,12 @@
 			width: 100%;
 		}
 	}
+
+	&.docked {
+		.app-content {
+			width: calc(100% - 240px);
+		}
+	}
 }

 .isDarkMode {
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@ -311,7 +311,13 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				</div>
 			)}

-			<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}>
+			<Flex
+				className={cx(
+					'app-layout',
+					isDarkMode ? 'darkMode' : 'lightMode',
+					!collapsed && !renderFullScreen ? 'docked' : '',
+				)}
+			>
 				{isToDisplayLayout && !renderFullScreen && (
 					<SideNav
 						licenseData={licenseData}
--- a/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
+++ b/frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx
@ -46,7 +46,7 @@ const calculateStartEndTime = (
 ): { startTime: number; endTime: number } => {
 	const timestamps: number[] = [];
 	data?.details?.breakdown?.forEach((breakdown: any) => {
-		breakdown?.dayWiseBreakdown?.breakdown.forEach((entry: any) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
 			timestamps.push(entry?.timestamp);
 		});
 	});
--- a/frontend/src/container/ConfigDropdown/Config/index.tsx
+++ b/frontend/src/container/ConfigDropdown/Config/index.tsx
@ -3,6 +3,7 @@ import Spinner from 'components/Spinner';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { lazy, Suspense, useMemo } from 'react';
 import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
+import { lazyRetry } from 'utils/lazyWithRetries';

 import ErrorLink from './ErrorLink';
 import LinkContainer from './Link';
@ -17,8 +18,9 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {

 	const items = sortedConfig.map((item) => {
 		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-		const Component = lazy(
-			() => import(`@ant-design/icons/es/icons/${iconName}.js`),
+
+		const Component = lazy(() =>
+			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
 		);
 		return {
 			key: item.text + item.href,
--- a/frontend/src/container/CreateAlertChannels/index.tsx
+++ b/frontend/src/container/CreateAlertChannels/index.tsx
@ -53,6 +53,7 @@ function CreateAlertChannels({
 				EmailChannel
 		>
 	>({
+		send_resolved: true,
 		text: `{{ range .Alerts -}}
     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}

@ -119,7 +120,7 @@ function CreateAlertChannels({
 			api_url: selectedConfig?.api_url || '',
 			channel: selectedConfig?.channel || '',
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 		}),
@ -158,7 +159,7 @@ function CreateAlertChannels({
 		let request: WebhookChannel = {
 			api_url: selectedConfig?.api_url || '',
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 		};

 		if (selectedConfig?.username !== '' || selectedConfig?.password !== '') {
@ -226,7 +227,7 @@ function CreateAlertChannels({

 		return {
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			routing_key: selectedConfig?.routing_key || '',
 			client: selectedConfig?.client || '',
 			client_url: selectedConfig?.client_url || '',
@ -274,7 +275,7 @@ function CreateAlertChannels({
 		() => ({
 			api_key: selectedConfig?.api_key || '',
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			description: selectedConfig?.description || '',
 			message: selectedConfig?.message || '',
 			priority: selectedConfig?.priority || '',
@ -312,7 +313,7 @@ function CreateAlertChannels({
 	const prepareEmailRequest = useCallback(
 		() => ({
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			to: selectedConfig?.to || '',
 			html: selectedConfig?.html || '',
 			headers: selectedConfig?.headers || {},
@ -350,7 +351,7 @@ function CreateAlertChannels({
 		() => ({
 			webhook_url: selectedConfig?.webhook_url || '',
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 		}),
--- a/frontend/src/container/EditAlertChannels/index.tsx
+++ b/frontend/src/container/EditAlertChannels/index.tsx
@ -72,7 +72,7 @@ function EditAlertChannels({
 			api_url: selectedConfig?.api_url || '',
 			channel: selectedConfig?.channel || '',
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 			id,
@ -115,7 +115,7 @@ function EditAlertChannels({
 		return {
 			api_url: selectedConfig?.api_url || '',
 			name: name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			username,
 			password,
 			id,
@ -284,7 +284,7 @@ function EditAlertChannels({
 		() => ({
 			webhook_url: selectedConfig?.webhook_url || '',
 			name: selectedConfig?.name || '',
-			send_resolved: true,
+			send_resolved: selectedConfig?.send_resolved || false,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 			id,
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@ -1,10 +1,10 @@
 .hide-update {
-	left: calc(50% - 41px) !important;
+	left: calc(50% - 72px) !important;
 }
 .explorer-update {
 	position: fixed;
 	bottom: 24px;
-	left: calc(50% - 250px);
+	left: calc(50% - 352px);
 	display: flex;
 	align-items: center;
 	gap: 12px;
@ -37,7 +37,6 @@
 	}
 }

-	
 .explorer-options {
 	position: fixed;
 	bottom: 24px;
@ -78,11 +77,9 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			gap: 8px;
+			border: none;

 			border: 1px solid #1d2023;
-			color: #c0c1c3;
-			background-color: #161922;

 			box-shadow: none !important;

--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@ -373,34 +373,42 @@ function ExplorerOptions({
 							onClick={handleSaveViewModalToggle}
 							className={isEditDeleteSupported ? '' : 'hidden'}
 							disabled={viewsIsLoading || isRefetching}
+							icon={<Disc3 size={16} />}
 						>
-							<Disc3 size={16} /> Save this view
+							Save this view
 						</Button>
 					</div>

 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />

 					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						<Tooltip title="Create Alerts">
+						<Button
+							disabled={disabled}
+							shape="round"
+							onClick={onCreateAlertsHandler}
+							icon={<ConciergeBell size={16} />}
+						>
+							Create an Alert
+						</Button>
+
+						<Button
+							type="primary"
+							disabled={disabled}
+							shape="round"
+							onClick={onAddToDashboard}
+							icon={<Plus size={16} />}
+						>
+							Add to Dashboard
+						</Button>
+					</div>
+					<div className="actions">
+						<Tooltip title="Hide">
 							<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>
+								onClick={hideToolbar}
+								icon={<PanelBottomClose size={16} />}
+							/>
 						</Tooltip>
 					</div>
 				</div>
@ -413,6 +421,7 @@ function ExplorerOptions({
 				isQueryUpdated={isQueryUpdated}
 				handleClearSelect={handleClearSelect}
 				onUpdateQueryHandler={onUpdateQueryHandler}
+				isEditDeleteSupported={isEditDeleteSupported}
 			/>

 			<Modal
--- a/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
@ -16,6 +16,7 @@ interface DroppableAreaProps {
 	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
 	handleClearSelect: () => void;
 	onUpdateQueryHandler: () => void;
+	isEditDeleteSupported: boolean;
 }

 function ExplorerOptionsHideArea({
@ -25,6 +26,7 @@ function ExplorerOptionsHideArea({
 	setIsExplorerOptionHidden,
 	handleClearSelect,
 	onUpdateQueryHandler,
+	isEditDeleteSupported,
 }: DroppableAreaProps): JSX.Element {
 	const handleShowExplorerOption = (): void => {
 		if (setIsExplorerOptionHidden) {
@ -47,14 +49,16 @@ function ExplorerOptionsHideArea({
 									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>
+							{isEditDeleteSupported && (
+								<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
--- a/frontend/src/container/FormAlertChannels/index.tsx
+++ b/frontend/src/container/FormAlertChannels/index.tsx
@ -1,4 +1,4 @@
-import { Form, FormInstance, Input, Select, Typography } from 'antd';
+import { Form, FormInstance, Input, Select, Switch, Typography } from 'antd';
 import { Store } from 'antd/lib/form/interface';
 import UpgradePrompt from 'components/Upgrade/UpgradePrompt';
 import { FeatureKeys } from 'constants/features';
@ -95,6 +95,22 @@ function FormAlertChannels({
 					/>
 				</Form.Item>

+				<Form.Item
+					label={t('field_send_resolved')}
+					labelAlign="left"
+					name="send_resolved"
+				>
+					<Switch
+						defaultChecked={initialValue?.send_resolved}
+						onChange={(value): void => {
+							setSelectedConfig((state) => ({
+								...state,
+								send_resolved: value,
+							}));
+						}}
+					/>
+				</Form.Item>
+
 				<Form.Item label={t('field_channel_type')} labelAlign="left" name="type">
 					<Select disabled={editing} onChange={onTypeChangeHandler} value={type}>
 						<Select.Option value="slack" key="slack">
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/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,
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@ -56,8 +56,9 @@ function QuerySection({
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
 			}}
 			showFunctions={
-				alertType === AlertTypes.METRICS_BASED_ALERT &&
-				alertDef.version === ENTITY_VERSION_V4
+				(alertType === AlertTypes.METRICS_BASED_ALERT &&
+					alertDef.version === ENTITY_VERSION_V4) ||
+				alertType === AlertTypes.LOGS_BASED_ALERT
 			}
 			version={alertDef.version || 'v3'}
 		/>
--- a/frontend/src/container/FormAlertRules/utils.ts
+++ b/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';
 	}
 };

--- a/frontend/src/container/GridCardLayout/GridCard/FullView/contants.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/contants.ts
@ -26,5 +26,6 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 	LIST: false,
 	TRACE: false,
 	BAR: true,
+	PIE: false,
 	EMPTY_WIDGET: false,
 };
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@ -1,62 +1,60 @@
 import './WidgetFullView.styles.scss';

-import { SyncOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { LoadingOutlined, SyncOutlined } from '@ant-design/icons';
+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 { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+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(
-		{
-			selectedTime: selectedTime.enum,
-			graphType:
-				widget.panelTypes === PANEL_TYPES.BAR
-					? PANEL_TYPES.TIME_SERIES
-					: widget.panelTypes,
+	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
+		if (widget.panelTypes !== PANEL_TYPES.LIST) {
+			return {
+				selectedTime: selectedTime.enum,
+				graphType: getGraphType(widget.panelTypes),
+				query: updatedQuery,
+				globalSelectedInterval: globalSelectedTime,
+				variables: getDashboardVariables(selectedDashboard?.data.variables),
+			};
+		}
+		updatedQuery.builder.queryData[0].pageSize = 10;
+		return {
 			query: updatedQuery,
+			graphType: PANEL_TYPES.LIST,
+			selectedTime: widget?.timePreferance || '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}`,
-			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
+			queryKey: [widget?.query, widget?.panelTypes, requestData, version],
+			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
-						style={{
-							height: isListView ? '100%' : '90%',
-						}}
-						isGraphLegendToggleAvailable={canModifyChart}
-					>
-						<GridPanelSwitch
-							panelType={widget.panelTypes}
-							data={chartData}
-							options={chartOptions}
-							onClickHandler={onClickHandler}
-							name={name}
-							yAxisUnit={yAxisUnit}
-							onDragSelect={onDragSelect}
-							panelData={response.data?.payload.data.newResult.data.result || []}
-							query={widget.query}
-							ref={fullViewChartRef}
-							thresholds={widget.thresholds}
-							selectedLogFields={widget.selectedLogFields}
-							dataSource={widget.query.builder.queryData[0].dataSource}
-							selectedTracesFields={widget.selectedTracesFields}
-							selectedTime={selectedTime}
-						/>
-					</GraphContainer>
-				)}
+				<GraphContainer
+					style={{
+						height: isListView ? '100%' : '90%',
+					}}
+					isGraphLegendToggleAvailable={canModifyChart}
+				>
+					<PanelWrapper
+						queryResponse={response}
+						widget={widget}
+						setRequestData={setRequestData}
+						isFullViewMode
+						onToggleModelHandler={onToggleModelHandler}
+						setGraphVisibility={setGraphsVisibilityStates}
+						graphVisibility={graphsVisibilityStates}
+						onDragSelect={onDragSelect}
+					/>
+				</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>
 	);
 }
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/styles.ts
+++ b/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`
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/types.ts
+++ b/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 {
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/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,
-	options,
-	graphVisibiltyState,
+	isFetchingResponse,
+	setRequestData,
 	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
-						panelType={widget.panelTypes}
-						data={data}
-						name={name}
-						ref={lineChartRef}
-						options={options}
-						yAxisUnit={widget.yAxisUnit}
+					<PanelWrapper
+						widget={widget}
+						queryResponse={queryResponse}
+						setRequestData={setRequestData}
+						setGraphVisibility={setGraphVisibility}
+						graphVisibility={graphVisibility}
 						onClickHandler={onClickHandler}
-						panelData={queryResponse.data?.payload?.data.newResult.data.result || []}
-						query={widget.query}
-						thresholds={widget.thresholds}
-						selectedLogFields={widget.selectedLogFields}
-						dataSource={widget.query.builder?.queryData[0]?.dataSource}
-						selectedTracesFields={widget.selectedTracesFields}
+						onDragSelect={onDragSelect}
 					/>
 				</div>
 			)}
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@ -1,88 +1,61 @@
 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 {
+		toScrollWidgetId,
+		setToScrollWidgetId,
+		variablesToGetUpdated,
+	} = useDashboard();
 	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),
@ -125,15 +98,39 @@ function GridCardGraph({
 		isVisible &&
 		!isEmptyWidget &&
 		isQueryEnabled &&
-		widget.panelTypes !== PANEL_TYPES.LIST;
+		isEmpty(variablesToGetUpdated);
+
+	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
+		if (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: widget.timePreferance || 'GLOBAL_TIME',
+			globalSelectedInterval,
+			tableParams: {
+				pagination: {
+					offset: 0,
+					limit: updatedQuery.builder.queryData[0].limit || 0,
+				},
+			},
+		};
+	});

 	const queryResponse = useGetQueryRange(
 		{
-			selectedTime: widget?.timePreferance,
-			graphType: getGraphType(widget.panelTypes),
-			query: updatedQuery,
-			globalSelectedInterval,
+			...requestData,
 			variables: getDashboardVariables(variables),
+			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
+			globalSelectedInterval,
 		},
 		version || DEFAULT_ENTITY_VERSION,
 		{
@ -145,7 +142,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 +165,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 +172,30 @@ 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
+		widget.panelTypes === PANEL_TYPES.LIST ||
+		widget.panelTypes === PANEL_TYPES.PIE
 			? 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>
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/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 {
--- a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
@ -5,6 +5,12 @@
 	.react-grid-layout {
 		border: none !important;
 		margin-top: 0;
+
+		.widget-graph-container {
+			&.graph {
+				height: 100%;
+			}
+		}
 	}
 }

@ -23,7 +29,7 @@
 		.ant-modal-header {
 			background-color: var(--bg-ink-400);
 		}
-	}	
+	}
 }

 .lightMode {
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/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>
--- a/frontend/src/container/GridPanelSwitch/index.tsx
+++ b/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,8 @@ const GridPanelSwitch = forwardRef<
 					query,
 					thresholds,
 				},
-				[PANEL_TYPES.LIST]:
-					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.LIST]: null,
+				[PANEL_TYPES.PIE]: null,
 				[PANEL_TYPES.TRACE]: null,
 				[PANEL_TYPES.BAR]: {
 					data,
@ -70,19 +53,7 @@ const GridPanelSwitch = forwardRef<
 			};

 			return result;
-		}, [
-			data,
-			options,
-			ref,
-			yAxisUnit,
-			thresholds,
-			panelData,
-			query,
-			dataSource,
-			selectedLogFields,
-			selectedTime,
-			selectedTracesFields,
-		]);
+		}, [data, options, ref, yAxisUnit, thresholds, panelData, query]);

 		const Component = getComponentForPanelType(panelType, dataSource) as FC<
 			PropsTypePropsMap[typeof panelType]
--- a/frontend/src/container/GridPanelSwitch/types.ts
+++ b/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,8 @@ export type PropsTypePropsMap = {
 	[PANEL_TYPES.VALUE]: GridValueComponentProps;
 	[PANEL_TYPES.TABLE]: GridTableComponentProps;
 	[PANEL_TYPES.TRACE]: null;
-	[PANEL_TYPES.LIST]: LogsPanelComponentProps | TracesTableComponentProps;
+	[PANEL_TYPES.PIE]: null;
+	[PANEL_TYPES.LIST]: null;
 	[PANEL_TYPES.BAR]: UplotProps & {
 		ref: ForwardedRef<ToggleGraphProps | undefined>;
 	};
--- a/frontend/src/container/LogDetailedView/Overview.styles.scss
+++ b/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 {
--- a/frontend/src/container/LogDetailedView/TableView.styles.scss
+++ b/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);
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/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 { useMemo, useState } from 'react';
+import { ArrowDownToDot, ArrowUpFromDot, Pin } from 'lucide-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"
--- a/frontend/src/container/LogsExplorerChart/index.tsx
+++ b/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),
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@ -608,6 +608,7 @@ function LogsExplorerViews({
 										className="periscope-btn"
 										onClick={handleToggleShowFormatOptions}
 										icon={<Sliders size={14} />}
+										data-testid="periscope-btn"
 									/>

 									{showFormatMenuItems && (
--- a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
+++ b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
@ -0,0 +1,151 @@
+import { render, RenderResult } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
+import { logsQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
+import { server } from 'mocks-server/server';
+import { rest } from 'msw';
+import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import i18n from 'ReactI18';
+import store from 'store';
+
+import LogsExplorerViews from '..';
+import { logsQueryRangeSuccessNewFormatResponse } from './mock';
+
+const logExplorerRoute = '/logs/logs-explorer';
+
+const queryRangeURL = 'http://localhost/api/v3/query_range';
+
+const lodsQueryServerRequest = (): void =>
+	server.use(
+		rest.post(queryRangeURL, (req, res, ctx) =>
+			res(ctx.status(200), ctx.json(logsQueryRangeSuccessResponse)),
+		),
+	);
+
+// mocking the graph components in this test as this should be handled separately
+jest.mock(
+	'container/TimeSeriesView/TimeSeriesView',
+	() =>
+		// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+		function () {
+			return <div>Time Series Chart</div>;
+		},
+);
+jest.mock(
+	'container/LogsExplorerChart',
+	() =>
+		// eslint-disable-next-line func-names, @typescript-eslint/explicit-function-return-type, react/display-name
+		function () {
+			return <div>Histogram Chart</div>;
+		},
+);
+
+jest.mock('constants/panelTypes', () => ({
+	AVAILABLE_EXPORT_PANEL_TYPES: ['graph', 'table'],
+}));
+
+jest.mock('d3-interpolate', () => ({
+	interpolate: jest.fn(),
+}));
+
+jest.mock('hooks/queryBuilder/useGetExplorerQueryRange', () => ({
+	__esModule: true,
+	useGetExplorerQueryRange: jest.fn(),
+}));
+
+// Set up the specific behavior for useGetExplorerQueryRange in individual test cases
+beforeEach(() => {
+	(useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+		data: { payload: logsQueryRangeSuccessNewFormatResponse },
+	});
+});
+
+const renderer = (): RenderResult =>
+	render(
+		<MemoryRouter initialEntries={[logExplorerRoute]}>
+			<Provider store={store}>
+				<I18nextProvider i18n={i18n}>
+					<MockQueryClientProvider>
+						<QueryBuilderProvider>
+							<VirtuosoMockContext.Provider
+								value={{ viewportHeight: 300, itemHeight: 100 }}
+							>
+								<LogsExplorerViews selectedView={SELECTED_VIEWS.SEARCH} showHistogram />
+							</VirtuosoMockContext.Provider>
+						</QueryBuilderProvider>
+					</MockQueryClientProvider>
+				</I18nextProvider>
+			</Provider>
+		</MemoryRouter>,
+	);
+
+describe('LogsExplorerViews -', () => {
+	it('render correctly with props - list and table', async () => {
+		lodsQueryServerRequest();
+		const { queryByText, queryByTestId } = renderer();
+
+		expect(queryByTestId('periscope-btn')).toBeInTheDocument();
+		await userEvent.click(queryByTestId('periscope-btn') as HTMLElement);
+
+		expect(document.querySelector('.menu-container')).toBeInTheDocument();
+
+		const menuItems = document.querySelectorAll('.menu-items .item');
+		expect(menuItems.length).toBe(3);
+
+		// switch to table view
+		// eslint-disable-next-line sonarjs/no-duplicate-string
+		await userEvent.click(queryByTestId('table-view') as HTMLElement);
+
+		expect(
+			queryByText(
+				'{"container_id":"container_id","container_name":"container_name","driver":"driver","eta":"2m0s","location":"frontend","log_level":"INFO","message":"Dispatch successful","service":"frontend","span_id":"span_id","trace_id":"span_id"}',
+			),
+		).toBeInTheDocument();
+	});
+
+	it('check isLoading state', async () => {
+		lodsQueryServerRequest();
+		(useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+			data: { payload: logsQueryRangeSuccessNewFormatResponse },
+			isLoading: true,
+			isFetching: false,
+		});
+		const { queryByText, queryByTestId } = renderer();
+
+		// switch to table view
+		await userEvent.click(queryByTestId('table-view') as HTMLElement);
+		expect(
+			queryByText(
+				'Just a bit of patience, just a little bit’s enough ⎯ we’re getting your logs!',
+			),
+		).toBeInTheDocument();
+	});
+
+	it('check error state', async () => {
+		lodsQueryServerRequest();
+		(useGetExplorerQueryRange as jest.Mock).mockReturnValue({
+			data: { payload: logsQueryRangeSuccessNewFormatResponse },
+			isLoading: false,
+			isFetching: false,
+			isError: true,
+		});
+		const { queryByText, queryByTestId } = renderer();
+
+		expect(
+			queryByText('Something went wrong. Please try again or contact support.'),
+		).toBeInTheDocument();
+
+		// switch to table view
+		await userEvent.click(queryByTestId('table-view') as HTMLElement);
+
+		expect(
+			queryByText('Something went wrong. Please try again or contact support.'),
+		).toBeInTheDocument();
+	});
+});
--- a/frontend/src/container/LogsExplorerViews/tests/mock.ts
+++ b/frontend/src/container/LogsExplorerViews/tests/mock.ts
@ -0,0 +1,51 @@
+export const logsQueryRangeSuccessNewFormatResponse = {
+	data: {
+		result: [],
+		resultType: '',
+		newResult: {
+			status: 'success',
+			data: {
+				resultType: '',
+				result: [
+					{
+						queryName: 'A',
+						series: null,
+						list: [
+							{
+								timestamp: '2024-02-15T21:20:22Z',
+								data: {
+									attributes_bool: {},
+									attributes_float64: {},
+									attributes_int64: {},
+									attributes_string: {
+										container_id: 'container_id',
+										container_name: 'container_name',
+										driver: 'driver',
+										eta: '2m0s',
+										location: 'frontend',
+										log_level: 'INFO',
+										message: 'Dispatch successful',
+										service: 'frontend',
+										span_id: 'span_id',
+										trace_id: 'span_id',
+									},
+									body:
+										'2024-02-15T21:20:22.035Z\tINFO\tfrontend\tDispatch successful\t{"service": "frontend", "trace_id": "span_id", "span_id": "span_id", "driver": "driver", "eta": "2m0s"}',
+									id: 'id',
+									resources_string: {
+										'container.name': 'container_name',
+									},
+									severity_number: 0,
+									severity_text: '',
+									span_id: '',
+									trace_flags: 0,
+									trace_id: '',
+								},
+							},
+						],
+					},
+				],
+			},
+		},
+	},
+};
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/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 { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 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 { AppState } from 'store/reducers';
+import { UseQueryResult } from 'react-query';
+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 { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
-import { v4 as uuid } from 'uuid';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';

-import { getLogPanelColumnsList } from './utils';
+import { getLogPanelColumnsList, getNextOrPreviousItems } from './utils';

 function LogsPanelComponent({
-	selectedLogsFields,
-	query,
-	selectedTime,
+	widget,
+	setRequestData,
+	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,
-	});
-
-	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,
-			},
-		};
+		limit: widget.query.builder.queryData[0].limit || 0,
 	});

 	useEffect(() => {
-		setRequestData({
-			...requestData,
-			globalSelectedInterval: globalSelectedTime,
+		setRequestData((prev) => ({
+			...prev,
 			tableParams: {
 				pagination,
 			},
-		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [pagination]);
+		}));
+	}, [pagination, setRequestData]);

 	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 };
-		newQueryData.builder.queryData[0].pageSize = value;
-		const newRequestData = {
-			...requestData,
-			query: newQueryData,
-			tableParams: {
-				pagination,
-			},
-		};
-		setRequestData(newRequestData);
+		setRequestData((prev) => {
+			const newQueryData = { ...prev.query };
+			newQueryData.builder.queryData[0].pageSize = value;
+			return {
+				...prev,
+				query: newQueryData,
+				tableParams: {
+					pagination: {
+						limit: 0,
+						offset: value,
+					},
+				},
+			};
+		});
 	};

-	const { data, isFetching, isError } = useGetQueryRange(
-		{
-			...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 columns = getLogPanelColumnsList(widget.selectedLogFields);

 	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 &&
-		query.builder.queryData[0].orderBy[0].columnName === 'timestamp';
+		widget.query.builder.queryData[0].orderBy.length > 0 &&
+		widget.query.builder.queryData[0].orderBy[0].columnName === 'timestamp';

 	const handlePreviousPagination = (): void => {
 		if (isOrderByTimeStamp) {
-			setRequestData({
-				...requestData,
+			setRequestData((prev) => ({
+				...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: [
-										{
-											id: uuid(),
-											key: {
-												key: 'id',
-												type: '',
-												dataType: DataTypes.String,
-												isColumn: true,
-											},
-											op: OPERATORS['>'],
-											value: firstLog?.id || '',
-										},
+										...getNextOrPreviousItems(
+											prev.query.builder.queryData[0].filters.items,
+											'PREV',
+											firstLog,
+										),
 									],
 								},
+								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({
-				...requestData,
+			setRequestData((prev) => ({
+				...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: [
-										{
-											id: uuid(),
-											key: {
-												key: 'id',
-												type: '',
-												dataType: DataTypes.String,
-												isColumn: true,
-											},
-											op: OPERATORS['<'],
-											value: lastLog?.id || '',
-										},
+										...getNextOrPreviousItems(
+											prev.query.builder.queryData[0].filters.items,
+											'NEXT',
+											lastLog,
+										),
 									],
 								},
+								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'];
-	query: Query;
-	selectedTime?: timePreferance;
-};
-
-LogsPanelComponent.defaultProps = {
-	selectedTime: undefined,
+	setRequestData: Dispatch<SetStateAction<GetQueryResultsProps>>;
+	queryResponse: UseQueryResult<
+		SuccessResponse<MetricRangePayloadProps, unknown>,
+		Error
+	>;
+	widget: Widgets;
 };

 export default LogsPanelComponent;
--- a/frontend/src/container/LogsPanelTable/utils.tsx
+++ b/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;
+};
--- a/frontend/src/container/LogsSearchFilter/utils.ts
+++ b/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') {
--- a/frontend/src/container/MetricsApplication/MetricsApplication.factory.ts
+++ b/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,
 });
--- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
+++ b/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 => {
--- a/frontend/src/container/MetricsApplication/Tabs/External.tsx
+++ b/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,
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/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(
-		() =>
-			getWidgetQueryBuilder({
-				query: {
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					builder: operationPerSec({
-						servicename,
-						tagFilterItems,
-						topLevelOperations: topLevelOperationsRoute,
-					}),
-					clickhouse_sql: [],
-					id: uuid(),
-				},
-				title: GraphTitle.RATE_PER_OPS,
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				yAxisUnit: 'ops',
-				id: SERVICE_CHART_ID.rps,
+	const operationPerSecWidget = getWidgetQueryBuilder({
+		query: {
+			queryType: EQueryType.QUERY_BUILDER,
+			promql: [],
+			builder: operationPerSec({
+				servicename,
+				tagFilterItems,
+				topLevelOperations: topLevelOperationsRoute,
 			}),
-		[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(
-		() =>
-			getWidgetQueryBuilder({
-				query: {
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					builder: errorPercentage({
-						servicename,
-						tagFilterItems,
-						topLevelOperations: topLevelOperationsRoute,
-					}),
-					clickhouse_sql: [],
-					id: uuid(),
-				},
-				title: GraphTitle.ERROR_PERCENTAGE,
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				yAxisUnit: '%',
-				id: SERVICE_CHART_ID.errorPercentage,
+	const errorPercentageWidget = getWidgetQueryBuilder({
+		query: {
+			queryType: EQueryType.QUERY_BUILDER,
+			promql: [],
+			builder: errorPercentage({
+				servicename,
+				tagFilterItems,
+				topLevelOperations: topLevelOperationsRoute,
 			}),
-		[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) => {
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
+++ b/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')}
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
+++ b/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')}
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
+++ b/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(
-		() =>
-			getWidgetQueryBuilder({
-				query: {
-					queryType: EQueryType.QUERY_BUILDER,
-					promql: [],
-					builder: latency({
-						servicename,
-						tagFilterItems,
-						isSpanMetricEnable,
-						topLevelOperationsRoute,
-					}),
-					clickhouse_sql: [],
-					id: uuid(),
-				},
-				title: GraphTitle.LATENCY,
-				panelTypes: PANEL_TYPES.TIME_SERIES,
-				yAxisUnit: 'ns',
-				id: SERVICE_CHART_ID.latency,
+	const latencyWidget = getWidgetQueryBuilder({
+		query: {
+			queryType: EQueryType.QUERY_BUILDER,
+			promql: [],
+			builder: latency({
+				servicename,
+				tagFilterItems,
+				isSpanMetricEnable,
+				topLevelOperationsRoute,
 			}),
-		[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
-						name="service_latency"
-						onDragSelect={onDragSelect}
-						widget={latencyWidget}
-						onClickHandler={handleGraphClick('Service')}
-						isQueryEnabled={isQueryEnabled}
-						fillSpans={false}
-						version={ENTITY_VERSION_V4}
-					/>
+					{topLevelOperationsIsLoading && (
+						<Skeleton
+							style={{
+								height: '100%',
+								padding: '16px',
+							}}
+						/>
+					)}
+					{!topLevelOperationsIsLoading && (
+						<Graph
+							onDragSelect={onDragSelect}
+							widget={latencyWidget}
+							onClickHandler={handleGraphClick('Service')}
+							isQueryEnabled={isQueryEnabled}
+							version={ENTITY_VERSION_V4}
+						/>
+					)}
 				</GraphContainer>
 			</Card>
 		</>
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
+++ b/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
-						fillSpans={false}
-						name={name}
-						widget={widget}
-						onClickHandler={handleGraphClick(opName)}
-						onDragSelect={onDragSelect}
-						isQueryEnabled={!topLevelOperationsIsLoading}
-						version={ENTITY_VERSION_V4}
-					/>
+					{topLevelOperationsIsLoading && (
+						<Skeleton
+							style={{
+								height: '100%',
+								padding: '16px',
+							}}
+						/>
+					)}
+					{!topLevelOperationsIsLoading && (
+						<Graph
+							widget={widget}
+							onClickHandler={handleGraphClick(opName)}
+							onDragSelect={onDragSelect}
+							isQueryEnabled={!topLevelOperationsIsLoading}
+							version={ENTITY_VERSION_V4}
+						/>
+					)}
 				</GraphContainer>
 			)}
 		</Card>
--- a/frontend/src/container/MetricsApplication/constant.ts
+++ b/frontend/src/container/MetricsApplication/constant.ts
@ -1,3 +1,5 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+
 import { DownloadOptions } from 'container/Download/Download.types';
 import { MenuItemKeys } from 'container/GridCardLayout/WidgetHeader/contants';

@ -20,7 +22,7 @@ export enum FORMULA {
 	ERROR_PERCENTAGE = 'A*100/B',
 	DATABASE_CALLS_AVG_DURATION = 'A/B',
 	APDEX_TRACES = '((B + C)/2)/A',
-	APDEX_DELTA_SPAN_METRICS = '(B + C/2)/A',
+	APDEX_DELTA_SPAN_METRICS = '((B + C)/2)/A',
 	APDEX_CUMULATIVE_SPAN_METRICS = '((B + C)/2)/A',
 }

--- a/frontend/src/container/MetricsApplication/styles.ts
+++ b/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)`
--- a/frontend/src/container/MetricsApplication/types.ts
+++ b/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 {
--- a/frontend/src/container/MetricsApplication/utils.ts
+++ b/frontend/src/container/MetricsApplication/utils.ts
@ -33,6 +33,8 @@ export const getNearestHighestBucketValue = (
 	value: number,
 	buckets: number[],
 ): string => {
+	// sort the buckets
+	buckets.sort((a, b) => a - b);
 	const nearestBucket = buckets.find((bucket) => bucket >= value);
 	return nearestBucket?.toString() || '+Inf';
 };
--- a/frontend/src/container/NewDashboard/ComponentsSlider/constants.ts
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/constants.ts
@ -10,6 +10,7 @@ export const PANEL_TYPES_INITIAL_QUERY = {
 	[PANEL_TYPES.LIST]: initialQueriesMap.logs,
 	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
 	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
+	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
 	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
 };

--- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx
@ -1,6 +1,13 @@
 import { Color } from '@signozhq/design-tokens';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { BarChart3, LineChart, List, SigmaSquare, Table } from 'lucide-react';
+import {
+	BarChart3,
+	LineChart,
+	List,
+	PieChart,
+	SigmaSquare,
+	Table,
+} from 'lucide-react';

 const Items: ItemsProps[] = [
 	{
@ -28,9 +35,14 @@ const Items: ItemsProps[] = [
 		icon: <BarChart3 size={32} color={Color.BG_ROBIN_400} />,
 		display: 'Bar',
 	},
+	{
+		name: PANEL_TYPES.PIE,
+		icon: <PieChart size={32} color={Color.BG_ROBIN_400} />,
+		display: 'Pie',
+	},
 ];

-interface ItemsProps {
+export interface ItemsProps {
 	name: PANEL_TYPES;
 	icon: JSX.Element;
 	display: string;
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
@ -1,9 +1,9 @@
 import { Row } from 'antd';
+import { isNull } from 'lodash-es';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useState } from 'react';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';

-import { convertVariablesToDbFormat } from './util';
 import VariableItem from './VariableItem';

 function DashboardVariableSelection(): JSX.Element | null {
@ -11,15 +11,14 @@ function DashboardVariableSelection(): JSX.Element | null {
 		selectedDashboard,
 		setSelectedDashboard,
 		updateLocalStorageDashboardVariables,
+		variablesToGetUpdated,
+		setVariablesToGetUpdated,
 	} = useDashboard();

 	const { data } = selectedDashboard || {};

 	const { variables } = data || {};

-	const [update, setUpdate] = useState<boolean>(false);
-	const [lastUpdatedVar, setLastUpdatedVar] = useState<string>('');
-
 	const [variablesTableData, setVariablesTableData] = useState<any>([]);

 	useEffect(() => {
@ -45,8 +44,27 @@ function DashboardVariableSelection(): JSX.Element | null {
 	}, [variables]);

 	const onVarChanged = (name: string): void => {
-		setLastUpdatedVar(name);
-		setUpdate(!update);
+		/**
+		 * this function takes care of adding the dependent variables to current update queue and removing
+		 * the updated variable name from the queue
+		 */
+		const dependentVariables = variablesTableData
+			?.map((variable: any) => {
+				if (variable.type === 'QUERY') {
+					const re = new RegExp(`\\{\\{\\s*?\\.${name}\\s*?\\}\\}`); // regex for `{{.var}}`
+					const queryValue = variable.queryValue || '';
+					const dependVarReMatch = queryValue.match(re);
+					if (dependVarReMatch !== null && dependVarReMatch.length > 0) {
+						return variable.name;
+					}
+				}
+				return null;
+			})
+			.filter((val: string | null) => !isNull(val));
+		setVariablesToGetUpdated((prev) => [
+			...prev.filter((v) => v !== name),
+			...dependentVariables,
+		]);
 	};

 	const onValueUpdate = (
@ -56,37 +74,31 @@ function DashboardVariableSelection(): JSX.Element | null {
 		allSelected: boolean,
 	): void => {
 		if (id) {
-			const newVariablesArr = variablesTableData.map(
-				(variable: IDashboardVariable) => {
-					const variableCopy = { ...variable };
-
-					if (variableCopy.id === id) {
-						variableCopy.selectedValue = value;
-						variableCopy.allSelected = allSelected;
-					}
-
-					return variableCopy;
-				},
-			);
 			updateLocalStorageDashboardVariables(name, value, allSelected);

-			const variables = convertVariablesToDbFormat(newVariablesArr);
-
 			if (selectedDashboard) {
-				setSelectedDashboard({
-					...selectedDashboard,
-					data: {
-						...selectedDashboard?.data,
-						variables: {
-							...variables,
-						},
-					},
+				setSelectedDashboard((prev) => {
+					if (prev) {
+						return {
+							...prev,
+							data: {
+								...prev?.data,
+								variables: {
+									...prev?.data.variables,
+									[id]: {
+										...prev.data.variables[id],
+										selectedValue: value,
+										allSelected,
+									},
+								},
+							},
+						};
+					}
+					return prev;
 				});
 			}

 			onVarChanged(name);
-
-			setUpdate(!update);
 		}
 	};

@ -107,13 +119,12 @@ function DashboardVariableSelection(): JSX.Element | null {
 					<VariableItem
 						key={`${variable.name}${variable.id}}${variable.order}`}
 						existingVariables={variables}
-						lastUpdatedVar={lastUpdatedVar}
 						variableData={{
 							name: variable.name,
 							...variable,
-							change: update,
 						}}
 						onValueUpdate={onValueUpdate}
+						variablesToGetUpdated={variablesToGetUpdated}
 					/>
 				))}
 		</Row>
--- a/Show More
+++ b/Show More