fix: set default only if not present

.github/workflows/jest-coverage-changes.yml

@@ -1,31 +0,0 @@
-name: Jest Coverage - changed files
-
-on:
-  pull_request:
-    branches: develop
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: "refs/heads/develop"
-          token: ${{ secrets.GITHUB_TOKEN }} # Provide the GitHub token for authentication
-
-      - name: Fetch branch
-        run: git fetch origin ${{ github.event.pull_request.head.ref }}
-
-      - run: |
-          git checkout ${{ github.event.pull_request.head.sha }}
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-
-      - name: Install dependencies
-        run: cd frontend && npm install -g yarn && yarn
-
-      - name: npm run test:changedsince
-        run: cd frontend && npm run i18n:generate-hash && npm run test:changedsince

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

@@ -22,7 +22,7 @@ x-clickhouse-defaults: &clickhouse-defaults
         "wget",
         "--spider",
         "-q",
-        "0.0.0.0:8123/ping"
+        "localhost:8123/ping"
       ]
     interval: 30s
     timeout: 5s
@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.44.0
+    image: signoz/query-service:0.39.0
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.44.0
+    image: signoz/frontend:0.39.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.21
+    image: signoz/signoz-otel-collector:0.88.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.21
+      image: signoz/signoz-schema-migrator:0.88.12
       deploy:
         restart_policy:
           condition: on-failure

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

@@ -111,18 +111,18 @@ processors:
 
 exporters:
   clickhousetraces:
-    datasource: tcp://clickhouse:9000/signoz_traces
+    datasource: tcp://clickhouse:9000/?database=signoz_traces
     docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
     low_cardinal_exception_grouping: ${LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
     resource_to_telemetry_conversion:
       enabled: true
   clickhousemetricswrite/prometheus:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
   # logging: {}
   clickhouselogsexporter:
-    dsn: tcp://clickhouse:9000/signoz_logs
+    dsn: tcp://clickhouse:9000/
     docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
 extensions:

deploy/docker-swarm/clickhouse-setup/prometheus.yml

@@ -22,4 +22,4 @@ rule_files:
 scrape_configs: []
 
 remote_read:
-  - url: tcp://clickhouse:9000/signoz_metrics
+  - url: tcp://clickhouse:9000/?database=signoz_metrics

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

@@ -46,7 +46,7 @@ services:
           "wget",
           "--spider",
           "-q",
-          "0.0.0.0:8123/ping"
+          "localhost:8123/ping"
         ]
       interval: 30s
       timeout: 5s
@@ -66,7 +66,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.21}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
     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.21
+    image: signoz/signoz-otel-collector:0.88.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",

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

@@ -21,7 +21,7 @@ x-clickhouse-defaults: &clickhouse-defaults
         "wget",
         "--spider",
         "-q",
-        "0.0.0.0:8123/ping"
+        "localhost:8123/ping"
       ]
     interval: 30s
     timeout: 5s
@@ -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.44.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.39.0}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.44.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.39.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.21}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
     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.21}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.12}
     container_name: signoz-otel-collector
     command:
       [

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

@@ -122,20 +122,21 @@ extensions:
 
 exporters:
   clickhousetraces:
-    datasource: tcp://clickhouse:9000/signoz_traces
+    datasource: tcp://clickhouse:9000/?database=signoz_traces
     docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
     low_cardinal_exception_grouping: ${LOW_CARDINAL_EXCEPTION_GROUPING}
   clickhousemetricswrite:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
     resource_to_telemetry_conversion:
       enabled: true
   clickhousemetricswrite/prometheus:
-    endpoint: tcp://clickhouse:9000/signoz_metrics
+    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
+  # logging: {}
+
   clickhouselogsexporter:
-    dsn: tcp://clickhouse:9000/signoz_logs
+    dsn: tcp://clickhouse:9000/
     docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
     timeout: 10s
-  # logging: {}
 
 service:
   telemetry:

deploy/docker/clickhouse-setup/prometheus.yml

@@ -22,4 +22,4 @@ rule_files:
 scrape_configs: []
 
 remote_read:
-  - url: tcp://clickhouse:9000/signoz_metrics
+  - url: tcp://clickhouse:9000/?database=signoz_metrics

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

@@ -152,6 +152,7 @@ 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)

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

@@ -0,0 +1,236 @@
+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)
+}

ee/query-service/app/server.go

@@ -10,7 +10,6 @@ import (
 	"net/http"
 	_ "net/http/pprof" // http profiler
 	"os"
-	"regexp"
 	"time"
 
 	"github.com/gorilla/handlers"
@@ -329,6 +328,7 @@ 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,14 +393,13 @@ func (lrw *loggingResponseWriter) Flush() {
 	lrw.ResponseWriter.(http.Flusher).Flush()
 }
 
-func extractQueryRangeData(path string, r *http.Request) (map[string]interface{}, bool) {
-	pathToExtractBodyFromV3 := "/api/v3/query_range"
-	pathToExtractBodyFromV4 := "/api/v4/query_range"
+func extractQueryRangeV3Data(path string, r *http.Request) (map[string]interface{}, bool) {
+	pathToExtractBodyFrom := "/api/v3/query_range"
 
 	data := map[string]interface{}{}
 	var postData *v3.QueryRangeParamsV3
 
-	if (r.Method == "POST") && ((path == pathToExtractBodyFromV3) || (path == pathToExtractBodyFromV4)) {
+	if path == pathToExtractBodyFrom && (r.Method == "POST") {
 		if r.Body != nil {
 			bodyBytes, err := io.ReadAll(r.Body)
 			if err != nil {
@@ -418,25 +417,6 @@ func extractQueryRangeData(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
@@ -465,20 +445,6 @@ func extractQueryRangeData(path string, r *http.Request) (map[string]interface{}
 		data["tracesUsed"] = signozTracesUsed
 		userEmail, err := baseauth.GetEmailFromJwt(r.Context())
 		if err == nil {
-			// 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)
 		}
 	}
@@ -506,7 +472,7 @@ func (s *Server) analyticsMiddleware(next http.Handler) http.Handler {
 		route := mux.CurrentRoute(r)
 		path, _ := route.GetPathTemplate()
 
-		queryRangeData, metadataExists := extractQueryRangeData(path, r)
+		queryRangeV3data, metadataExists := extractQueryRangeV3Data(path, r)
 		getActiveLogs(path, r)
 
 		lrw := NewLoggingResponseWriter(w)
@@ -514,7 +480,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 queryRangeData {
+			for key, value := range queryRangeV3data {
 				data[key] = value
 			}
 		}

frontend/.gitignore

@@ -1,3 +0,0 @@
-
-# Sentry Config File
-.env.sentry-build-plugin

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.26-alpine
+FROM nginx:1.25.2-alpine
 
 # Add Maintainer Info
 LABEL maintainer="signoz"

frontend/jest.config.ts

@@ -35,14 +35,6 @@ const config: Config.InitialOptions = {
 			browsers: ['chromium', 'firefox', 'webkit'],
 		},
 	},
-	coverageThreshold: {
-		global: {
-			statements: 80,
-			branches: 65,
-			functions: 80,
-			lines: 80,
-		},
-	},
 };
 
 export default config;

frontend/package.json

@@ -21,9 +21,7 @@
 		"playwright:codegen:local": "playwright codegen http://localhost:3301",
 		"playwright:codegen:local:auth": "yarn playwright:codegen:local --load-storage=tests/auth.json",
 		"husky:configure": "cd .. && husky install frontend/.husky && cd frontend && chmod ug+x .husky/*",
-		"commitlint": "commitlint --edit $1",
-		"test": "jest --coverage",
-		"test:changedsince": "jest --changedSince=develop --coverage --silent"
+		"commitlint": "commitlint --edit $1"
 	},
 	"engines": {
 		"node": ">=16.15.0"
@@ -43,17 +41,14 @@
 		"@radix-ui/react-tabs": "1.0.4",
 		"@radix-ui/react-tooltip": "1.0.7",
 		"@sentry/react": "7.102.1",
-		"@sentry/webpack-plugin": "2.16.0",
+		"@sentry/webpack-plugin": "2.14.2",
 		"@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",
 		"antd-table-saveas-excel": "2.2.1",
-		"axios": "1.6.4",
+		"axios": "1.6.2",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.6.4",
 		"babel-loader": "9.1.3",
@@ -126,7 +121,6 @@
 		"web-vitals": "^0.2.4",
 		"webpack": "5.88.2",
 		"webpack-dev-server": "^4.15.1",
-		"webpack-retry-chunk-load-plugin": "3.1.1",
 		"xstate": "^4.31.0"
 	},
 	"browserslist": {

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

@@ -15,7 +15,6 @@
   "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",

frontend/public/locales/en/channels.json

@@ -15,7 +15,6 @@
   "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",

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": "SigNoz | Integrations"
+	"INTEGRATIONS_INSTALLED": "SigNoz | Integrations"
 }

frontend/src/AppRoutes/index.tsx

@@ -147,11 +147,7 @@ function App(): JSX.Element {
 			}
 		}
 
-		if (
-			isOnBasicPlan ||
-			(isLoggedInState && role && role !== 'ADMIN') ||
-			!(isCloudUserVal || isEECloudUser())
-		) {
+		if (isOnBasicPlan || (isLoggedInState && role && role !== 'ADMIN')) {
 			const newRoutes = routes.filter((route) => route?.path !== ROUTES.BILLING);
 			setRoutes(newRoutes);
 		}

frontend/src/AppRoutes/pageComponents.ts

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

frontend/src/AppRoutes/routes.ts

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

frontend/src/api/channels/createEmail.ts

@@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			email_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					to: props.to,
 					html: props.html,
 					headers: props.headers,

frontend/src/api/channels/createMsTeams.ts

@@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			msteams_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					webhook_url: props.webhook_url,
 					title: props.title,
 					text: props.text,

frontend/src/api/channels/createPager.ts

@@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			pagerduty_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					routing_key: props.routing_key,
 					client: props.client,
 					client_url: props.client_url,

frontend/src/api/channels/createSlack.ts

@@ -12,7 +12,7 @@ const create = async (
 			name: props.name,
 			slack_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					api_url: props.api_url,
 					channel: props.channel,
 					title: props.title,

frontend/src/api/channels/createWebhook.ts

@@ -30,7 +30,7 @@ const create = async (
 			name: props.name,
 			webhook_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					url: props.api_url,
 					http_config: httpConfig,
 				},

frontend/src/api/channels/editEmail.ts

@@ -12,7 +12,7 @@ const editEmail = async (
 			name: props.name,
 			email_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					to: props.to,
 					html: props.html,
 					headers: props.headers,

frontend/src/api/channels/editMsTeams.ts

@@ -12,7 +12,7 @@ const editMsTeams = async (
 			name: props.name,
 			msteams_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					webhook_url: props.webhook_url,
 					title: props.title,
 					text: props.text,

frontend/src/api/channels/editOpsgenie.ts

@@ -12,7 +12,7 @@ const editOpsgenie = async (
 			name: props.name,
 			opsgenie_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					api_key: props.api_key,
 					description: props.description,
 					priority: props.priority,

frontend/src/api/channels/editPager.ts

@@ -12,7 +12,7 @@ const editPager = async (
 			name: props.name,
 			pagerduty_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					routing_key: props.routing_key,
 					client: props.client,
 					client_url: props.client_url,

frontend/src/api/channels/editSlack.ts

@@ -12,7 +12,7 @@ const editSlack = async (
 			name: props.name,
 			slack_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					api_url: props.api_url,
 					channel: props.channel,
 					title: props.title,

frontend/src/api/channels/editWebhook.ts

@@ -29,7 +29,7 @@ const editWebhook = async (
 			name: props.name,
 			webhook_configs: [
 				{
-					send_resolved: props.send_resolved,
+					send_resolved: true,
 					url: props.api_url,
 					http_config: httpConfig,
 				},

frontend/src/api/common/logEvent.ts

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

frontend/src/api/metrics/ApDex/getMetricMeta.ts

@@ -1,4 +1,4 @@
-import { ApiV4Instance } from 'api';
+import axios from 'api';
 import { AxiosResponse } from 'axios';
 import { MetricMetaProps } from 'types/api/metrics/getApDex';
 
@@ -6,6 +6,4 @@ export const getMetricMeta = (
 	metricName: string,
 	servicename: string,
 ): Promise<AxiosResponse<MetricMetaProps>> =>
-	ApiV4Instance.get(
-		`/metric/metric_metadata?metricName=${metricName}&serviceName=${servicename}`,
-	);
+	axios.get(`/metric_meta?metricName=${metricName}&serviceName=${servicename}`);

frontend/src/api/metrics/getMetricName.ts

@@ -0,0 +1,27 @@
+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);
+	}
+};

frontend/src/api/metrics/getResourceAttributes.ts

@@ -1,7 +1,6 @@
-import { ApiV3Instance as axios } from 'api';
+import { ApiV2Instance 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,
@@ -9,19 +8,15 @@ 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(
-			`/autocomplete/attribute_keys?${createQueryParams({
-				aggregateOperator: MetricAggregateOperator.RATE,
-				searchText: props.match,
-				dataSource: DataSource.METRICS,
-				aggregateAttribute: props.metricName,
-			})}`,
+			`/metrics/autocomplete/tagKey?metricName=${props.metricName}${
+				props.match ? `&match=${props.match}` : ''
+			}`,
 		);
 
 		return {
@@ -40,13 +35,7 @@ export const getResourceAttributesTagValues = async (
 ): Promise<SuccessResponse<TagValuesPayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/autocomplete/attribute_values?${createQueryParams({
-				aggregateOperator: MetricAggregateOperator.RATE,
-				dataSource: DataSource.METRICS,
-				aggregateAttribute: props.metricName,
-				attributeKey: props.tagKey,
-				searchText: '',
-			})}`,
+			`/metrics/autocomplete/tagValue?metricName=${props.metricName}&tagKey=${props.tagKey}`,
 		);
 
 		return {

frontend/src/components/Loadable/index.tsx

@@ -1,10 +1,9 @@
 import { ComponentType, lazy, LazyExoticComponent } from 'react';
-import { lazyRetry } from 'utils/lazyWithRetries';
 
 function Loadable(importPath: {
 	(): LoadableProps;
 }): LazyExoticComponent<LazyComponent> {
-	return lazy(() => lazyRetry(() => importPath()));
+	return lazy(() => importPath());
 }
 
 type LazyComponent = ComponentType<Record<string, unknown>>;

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -1,9 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import './DynamicColumnTable.syles.scss';
 
-import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, MenuProps, Switch } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { SlidersHorizontal } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -21,7 +20,6 @@ function DynamicColumnTable({
 	columns,
 	dynamicColumns,
 	onDragColumn,
-	facingIssueBtn,
 	...restProps
 }: DynamicColumnTableProps): JSX.Element {
 	const [columnsData, setColumnsData] = useState<ColumnsType | undefined>(
@@ -85,8 +83,6 @@ function DynamicColumnTable({
 
 	return (
 		<div className="DynamicColumnTable">
-			<Flex justify="flex-end" align="center" gap={8}>
-				{facingIssueBtn && <FacingIssueBtn {...facingIssueBtn} />}
 			{dynamicColumns && (
 				<Dropdown
 					getPopupContainer={popupContainer}
@@ -100,7 +96,6 @@ function DynamicColumnTable({
 					/>
 				</Dropdown>
 			)}
-			</Flex>
 
 			<ResizeTable
 				columns={columnsData}

frontend/src/components/ResizeTable/types.ts

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

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,17 +19,19 @@ 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 => (
-									<div key={label}>
-										<Tag className="label-column--tag" color={color}>
-											{getLabelAndValueContent(label, value && value[label])}
-										</Tag>
-									</div>
+									<TagWithToolTip
+										key={label}
+										label={label}
+										color={color}
+										value={value}
+									/>
 								),
 							)}
 						</div>

frontend/src/components/TableRenderer/utils.ts

@@ -38,16 +38,6 @@ 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> }[];

frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss

@@ -1,9 +0,0 @@
-.facing-issue-button {
-	color: var(--bg-amber-500);
-	border-color: var(--bg-amber-500);
-
-	.ant-btn:hover {
-		color: var(--bg-amber-400) !important;
-		border-color: var(--bg-amber-300) !important;
-	}
-}

frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx

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

frontend/src/constants/panelTypes.ts

@@ -29,7 +29,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
-		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -285,7 +285,6 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
-	PIE = 'pie',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 

frontend/src/constants/queryFunctionOptions.ts

@@ -2,7 +2,7 @@
 import { QueryFunctionsTypes } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 
-export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
+export const queryFunctionOptions: SelectOption<string, string>[] = [
 	{
 		value: QueryFunctionsTypes.CUTOFF_MIN,
 		label: 'Cut Off Min',
@@ -65,12 +65,6 @@ export const metricQueryFunctionOptions: SelectOption<string, string>[] = [
 	},
 ];
 
-export const logsQueryFunctionOptions: SelectOption<string, string>[] = [
-	{
-		value: QueryFunctionsTypes.TIME_SHIFT,
-		label: 'Time Shift',
-	},
-];
 interface QueryFunctionConfigType {
 	[key: string]: {
 		showInput: boolean;

frontend/src/constants/routes.ts

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

frontend/src/constants/sessionStorage.ts

@@ -1,3 +0,0 @@
-export enum SESSIONSTORAGE {
-	RETRY_LAZY_REFRESHED = 'retry-lazy-refreshed',
-}

frontend/src/constants/shortcuts/DashboardShortcuts.ts

@@ -9,10 +9,9 @@ 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 for panel',
-	DiscardChanges: 'Discard Changes for panel',
+	SaveChanges: 'Save Changes',
+	DiscardChanges: 'Discard Changes',
 };

frontend/src/constants/shortcuts/QBShortcuts.ts

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

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

@@ -4,9 +4,8 @@
 	width: 100%;
 
 	.app-content {
-		width: calc(100% - 64px);
+		width: 100%;
 		overflow: auto;
-		z-index: 0;
 
 		.content-container {
 			position: relative;
@@ -17,12 +16,6 @@
 			width: 100%;
 		}
 	}
-
-	&.docked {
-		.app-content {
-			width: calc(100% - 240px);
-		}
-	}
 }
 
 .isDarkMode {

frontend/src/container/AppLayout/index.tsx

@@ -311,13 +311,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				</div>
 			)}
 
-			<Flex
-				className={cx(
-					'app-layout',
-					isDarkMode ? 'darkMode' : 'lightMode',
-					!collapsed && !renderFullScreen ? 'docked' : '',
-				)}
-			>
+			<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}>
 				{isToDisplayLayout && !renderFullScreen && (
 					<SideNav
 						licenseData={licenseData}

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -1,5 +1,4 @@
 .billing-container {
-	margin-bottom: 40px;
 	padding-top: 36px;
 	width: 65%;
 

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -3,7 +3,6 @@ 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';
@@ -18,9 +17,8 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
 
 	const items = sortedConfig.map((item) => {
 		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-
-		const Component = lazy(() =>
-			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
+		const Component = lazy(
+			() => import(`@ant-design/icons/es/icons/${iconName}.js`),
 		);
 		return {
 			key: item.text + item.href,

frontend/src/container/CreateAlertChannels/index.tsx

@@ -53,7 +53,6 @@ function CreateAlertChannels({
 				EmailChannel
 		>
 	>({
-		send_resolved: true,
 		text: `{{ range .Alerts -}}
      *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
 
@@ -120,7 +119,7 @@ function CreateAlertChannels({
 			api_url: selectedConfig?.api_url || '',
 			channel: selectedConfig?.channel || '',
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 		}),
@@ -159,7 +158,7 @@ function CreateAlertChannels({
 		let request: WebhookChannel = {
 			api_url: selectedConfig?.api_url || '',
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 		};
 
 		if (selectedConfig?.username !== '' || selectedConfig?.password !== '') {
@@ -227,7 +226,7 @@ function CreateAlertChannels({
 
 		return {
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			routing_key: selectedConfig?.routing_key || '',
 			client: selectedConfig?.client || '',
 			client_url: selectedConfig?.client_url || '',
@@ -275,7 +274,7 @@ function CreateAlertChannels({
 		() => ({
 			api_key: selectedConfig?.api_key || '',
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			description: selectedConfig?.description || '',
 			message: selectedConfig?.message || '',
 			priority: selectedConfig?.priority || '',
@@ -313,7 +312,7 @@ function CreateAlertChannels({
 	const prepareEmailRequest = useCallback(
 		() => ({
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			to: selectedConfig?.to || '',
 			html: selectedConfig?.html || '',
 			headers: selectedConfig?.headers || {},
@@ -351,7 +350,7 @@ function CreateAlertChannels({
 		() => ({
 			webhook_url: selectedConfig?.webhook_url || '',
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 		}),

frontend/src/container/CreateAlertRule/index.tsx

@@ -2,7 +2,6 @@ import { Form, Row } from 'antd';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import FormAlertRules from 'container/FormAlertRules';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { isEqual } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -19,7 +18,9 @@ import SelectAlertType from './SelectAlertType';
 
 function CreateRules(): JSX.Element {
 	const [initValues, setInitValues] = useState<AlertDef | null>(null);
-	const [alertType, setAlertType] = useState<AlertTypes>();
+	const [alertType, setAlertType] = useState<AlertTypes>(
+		AlertTypes.METRICS_BASED_ALERT,
+	);
 
 	const location = useLocation();
 	const queryParams = new URLSearchParams(location.search);
@@ -55,10 +56,10 @@ function CreateRules(): JSX.Element {
 		}
 		const dataSource = compositeQuery?.builder?.queryData[0]?.dataSource;
 
-		const alertTypeFromQuery = ALERT_TYPE_VS_SOURCE_MAPPING[dataSource];
+		const alertType = ALERT_TYPE_VS_SOURCE_MAPPING[dataSource];
 
-		if (alertTypeFromQuery && !isEqual(alertType, alertTypeFromQuery)) {
-			onSelectType(alertTypeFromQuery);
+		if (alertType) {
+			onSelectType(alertType);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [compositeQuery]);

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: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 			id,
@@ -115,7 +115,7 @@ function EditAlertChannels({
 		return {
 			api_url: selectedConfig?.api_url || '',
 			name: name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			username,
 			password,
 			id,
@@ -284,7 +284,7 @@ function EditAlertChannels({
 		() => ({
 			webhook_url: selectedConfig?.webhook_url || '',
 			name: selectedConfig?.name || '',
-			send_resolved: selectedConfig?.send_resolved || false,
+			send_resolved: true,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 			id,

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

@@ -1,10 +1,10 @@
 .hide-update {
-	left: calc(50% - 72px) !important;
+	left: calc(50% - 41px) !important;
 }
 .explorer-update {
 	position: fixed;
 	bottom: 24px;
-	left: calc(50% - 352px);
+	left: calc(50% - 250px);
 	display: flex;
 	align-items: center;
 	gap: 12px;
@@ -37,6 +37,7 @@
 	}
 }
 
+	
 .explorer-options {
 	position: fixed;
 	bottom: 24px;
@@ -77,9 +78,11 @@
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			border: none;
+			gap: 8px;
 
 			border: 1px solid #1d2023;
+			color: #c0c1c3;
+			background-color: #161922;
 
 			box-shadow: none !important;
 

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -373,42 +373,34 @@ function ExplorerOptions({
 							onClick={handleSaveViewModalToggle}
 							className={isEditDeleteSupported ? '' : 'hidden'}
 							disabled={viewsIsLoading || isRefetching}
-							icon={<Disc3 size={16} />}
 						>
-							Save this view
+							<Disc3 size={16} /> Save this view
 						</Button>
 					</div>
 
 					<hr className={isEditDeleteSupported ? '' : 'hidden'} />
 
 					<div className={cx('actions', isEditDeleteSupported ? '' : 'hidden')}>
-						<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">
+						<Tooltip title="Create Alerts">
 							<Button
 								disabled={disabled}
 								shape="circle"
-								onClick={hideToolbar}
-								icon={<PanelBottomClose size={16} />}
-							/>
+								onClick={onCreateAlertsHandler}
+							>
+								<ConciergeBell size={16} />
+							</Button>
+						</Tooltip>
+
+						<Tooltip title="Add to Dashboard">
+							<Button disabled={disabled} shape="circle" onClick={onAddToDashboard}>
+								<Plus size={16} />
+							</Button>
+						</Tooltip>
+
+						<Tooltip title="Hide">
+							<Button disabled={disabled} shape="circle" onClick={hideToolbar}>
+								<PanelBottomClose size={16} />
+							</Button>
 						</Tooltip>
 					</div>
 				</div>
@@ -421,7 +413,6 @@ function ExplorerOptions({
 				isQueryUpdated={isQueryUpdated}
 				handleClearSelect={handleClearSelect}
 				onUpdateQueryHandler={onUpdateQueryHandler}
-				isEditDeleteSupported={isEditDeleteSupported}
 			/>
 
 			<Modal

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx

@@ -16,7 +16,6 @@ interface DroppableAreaProps {
 	setIsExplorerOptionHidden?: Dispatch<SetStateAction<boolean>>;
 	handleClearSelect: () => void;
 	onUpdateQueryHandler: () => void;
-	isEditDeleteSupported: boolean;
 }
 
 function ExplorerOptionsHideArea({
@@ -26,7 +25,6 @@ function ExplorerOptionsHideArea({
 	setIsExplorerOptionHidden,
 	handleClearSelect,
 	onUpdateQueryHandler,
-	isEditDeleteSupported,
 }: DroppableAreaProps): JSX.Element {
 	const handleShowExplorerOption = (): void => {
 		if (setIsExplorerOptionHidden) {
@@ -49,7 +47,6 @@ function ExplorerOptionsHideArea({
 									icon={<X size={14} color={Color.BG_INK_500} />}
 								/>
 							</Tooltip>
-							{isEditDeleteSupported && (
 							<Tooltip title="Update this View">
 								<Button
 									onClick={onUpdateQueryHandler}
@@ -58,7 +55,6 @@ function ExplorerOptionsHideArea({
 									icon={<Disc3 size={14} color={Color.BG_INK_500} />}
 								/>
 							</Tooltip>
-							)}
 						</div>
 					)}
 					<Button

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,4 +1,4 @@
-import { Form, FormInstance, Input, Select, Switch, Typography } from 'antd';
+import { Form, FormInstance, Input, Select, Typography } from 'antd';
 import { Store } from 'antd/lib/form/interface';
 import UpgradePrompt from 'components/Upgrade/UpgradePrompt';
 import { FeatureKeys } from 'constants/features';
@@ -95,22 +95,6 @@ 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">

frontend/src/container/FormAlertRules/FormAlertRules.styles.scss

@@ -43,8 +43,3 @@
         }
    }  
 }
-
-.facing-issue-btn {
-	margin-top: 20px;
-	width: 100%;
-}

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -56,9 +56,8 @@ function QuerySection({
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
 			}}
 			showFunctions={
-				(alertType === AlertTypes.METRICS_BASED_ALERT &&
-					alertDef.version === ENTITY_VERSION_V4) ||
-				alertType === AlertTypes.LOGS_BASED_ALERT
+				alertType === AlertTypes.METRICS_BASED_ALERT &&
+				alertDef.version === ENTITY_VERSION_V4
 			}
 			version={alertDef.version || 'v3'}
 		/>

frontend/src/container/FormAlertRules/index.tsx

@@ -11,7 +11,6 @@ import {
 } from 'antd';
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
-import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -139,11 +138,6 @@ function FormAlertRules({
 
 	useEffect(() => {
 		// Set selectedQueryName based on the length of queryOptions
-		const selectedQueryName = alertDef?.condition?.selectedQueryName;
-		if (
-			!selectedQueryName ||
-			!queryOptions.some((option) => option.value === selectedQueryName)
-		) {
 		setAlertDef((def) => ({
 			...def,
 			condition: {
@@ -152,8 +146,7 @@ function FormAlertRules({
 					queryOptions.length > 0 ? String(queryOptions[0].value) : undefined,
 			},
 		}));
-		}
-	}, [alertDef, currentQuery?.queryType, queryOptions]);
+	}, [currentQuery?.queryType, queryOptions]);
 
 	const onCancelHandler = useCallback(() => {
 		history.replace(ROUTES.LIST_ALL_ALERT);
@@ -489,8 +482,6 @@ function FormAlertRules({
 		alertDef?.broadcastToAll ||
 		(alertDef.preferredChannels && alertDef.preferredChannels.length > 0);
 
-	const isRuleCreated = !ruleId || ruleId === 0;
-
 	return (
 		<>
 			{Element}
@@ -572,30 +563,6 @@ function FormAlertRules({
 				</StyledLeftContainer>
 				<Col flex="1 1 300px">
 					<UserGuide queryType={currentQuery.queryType} />
-					<FacingIssueBtn
-						attributes={{
-							alert: alertDef?.alert,
-							alertType: alertDef?.alertType,
-							id: ruleId,
-							ruleType: alertDef?.ruleType,
-							state: (alertDef as any)?.state,
-							panelType,
-							screen: isRuleCreated ? 'Edit Alert' : 'New Alert',
-						}}
-						className="facing-issue-btn"
-						eventName="Alert: Facing Issues in alert"
-						buttonText="Facing Issues in alert"
-						message={`Hi Team,
-
-I am facing issues configuring alerts in SigNoz. Here are my alert rule details
-
-Name: ${alertDef?.alert || ''}
-Alert Type: ${alertDef?.alertType || ''}
-State: ${(alertDef as any)?.state || ''}
-Alert Id: ${ruleId}
-
-Thanks`}
-					/>
 				</Col>
 			</PanelContainer>
 		</>

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

@@ -26,6 +26,5 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 	LIST: false,
 	TRACE: false,
 	BAR: true,
-	PIE: false,
 	EMPTY_WIDGET: false,
 };

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

@@ -1,60 +1,62 @@
 import './WidgetFullView.styles.scss';
 
-import { LoadingOutlined, SyncOutlined } from '@ant-design/icons';
-import { Button, Spin } from 'antd';
+import { SyncOutlined } from '@ant-design/icons';
+import { Button } 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 useUrlQuery from 'hooks/useUrlQuery';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
-import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import GetMinMax from 'lib/getMinMax';
-import history from 'lib/history';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { UpdateTimeInterval } from 'store/actions';
+import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import { getGraphType } from 'utils/getGraphType';
+import uPlot from 'uplot';
 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(
@@ -72,70 +74,24 @@ function FullView({
 
 	const updatedQuery = useStepInterval(widget?.query);
 
-	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-			return {
+	const response = useGetQueryRange(
+		{
 			selectedTime: selectedTime.enum,
-				graphType: getGraphType(widget.panelTypes),
+			graphType:
+				widget.panelTypes === PANEL_TYPES.BAR
+					? PANEL_TYPES.TIME_SERIES
+					: 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,
-			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: [widget?.query, widget?.panelTypes, requestData, version],
-			enabled: !isDependedDataLoaded,
-			keepPreviousData: true,
+			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
 		},
 	);
 
-	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));
@@ -162,6 +118,60 @@ 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);
@@ -170,7 +180,7 @@ function FullView({
 
 	const isListView = widget.panelTypes === PANEL_TYPES.LIST;
 
-	if (response.isLoading && widget.panelTypes !== PANEL_TYPES.LIST) {
+	if (response.isFetching) {
 		return <Spinner height="100%" size="large" tip="Loading..." />;
 	}
 
@@ -179,9 +189,6 @@ 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}
@@ -207,24 +214,47 @@ function FullView({
 				})}
 				ref={fullViewRef}
 			>
+				{chartOptions && (
 					<GraphContainer
 						style={{
 							height: isListView ? '100%' : '90%',
 						}}
 						isGraphLegendToggleAvailable={canModifyChart}
 					>
-					<PanelWrapper
-						queryResponse={response}
-						widget={widget}
-						setRequestData={setRequestData}
-						isFullViewMode
-						onToggleModelHandler={onToggleModelHandler}
-						setGraphVisibility={setGraphsVisibilityStates}
-						graphVisibility={graphsVisibilityStates}
+						<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>
+				)}
 			</div>
+
+			{canModifyChart && chartOptions && !isDashboardLocked && (
+				<GraphManager
+					data={chartData}
+					name={originalName}
+					options={chartOptions}
+					yAxisUnit={yAxisUnit}
+					onToggleModelHandler={onToggleModelHandler}
+					setGraphsVisibilityStates={setGraphsVisibilityStates}
+					graphsVisibilityStates={graphsVisibilityStates}
+					lineChartRef={fullViewChartRef}
+					parentChartRef={parentChartRef}
+				/>
+			)}
 		</div>
 	);
 }

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

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

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

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

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

@@ -6,7 +6,7 @@ import { ToggleGraphProps } from 'components/Graph/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import PanelWrapper from 'container/PanelWrapper/PanelWrapper';
+import GridPanelSwitch from 'container/GridPanelSwitch';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -33,20 +33,23 @@ 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,
-	isFetchingResponse,
-	setRequestData,
+	data,
+	options,
+	graphVisibiltyState,
 	onClickHandler,
 	onDragSelect,
+	setGraphVisibility,
+	isFetchingResponse,
 }: WidgetGraphComponentProps): JSX.Element {
 	const [deleteModal, setDeleteModal] = useState(false);
 	const [hovered, setHovered] = useState(false);
@@ -58,15 +61,12 @@ 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;
 
-		graphVisibility.forEach((state, index) => {
+		graphVisibiltyState.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: widget.id,
+				name,
 			});
 			setGraphVisibility(localStoredVisibilityState);
 		}
@@ -252,7 +252,7 @@ function WidgetGraphComponent({
 			onBlur={(): void => {
 				setHovered(false);
 			}}
-			id={widget.id}
+			id={name}
 		>
 			<Modal
 				destroyOnClose
@@ -278,12 +278,14 @@ function WidgetGraphComponent({
 				className="widget-full-view"
 			>
 				<FullView
-					name={`${widget.id}expanded`}
+					name={`${name}expanded`}
 					version={version}
-					originalName={widget.id}
+					originalName={name}
 					widget={widget}
 					yAxisUnit={widget.yAxisUnit}
 					onToggleModelHandler={onToggleModelHandler}
+					parentChartRef={lineChartRef}
+					onDragSelect={onDragSelect}
 				/>
 			</Modal>
 
@@ -303,22 +305,26 @@ function WidgetGraphComponent({
 					isFetchingResponse={isFetchingResponse}
 				/>
 			</div>
-			{queryResponse.isLoading && widget.panelTypes !== PANEL_TYPES.LIST && (
-				<Skeleton />
-			)}
+			{queryResponse.isLoading && <Skeleton />}
 			{(queryResponse.isSuccess || widget.panelTypes === PANEL_TYPES.LIST) && (
 				<div
 					className={cx('widget-graph-container', widget.panelTypes)}
 					ref={graphRef}
 				>
-					<PanelWrapper
-						widget={widget}
-						queryResponse={queryResponse}
-						setRequestData={setRequestData}
-						setGraphVisibility={setGraphVisibility}
-						graphVisibility={graphVisibility}
+					<GridPanelSwitch
+						panelType={widget.panelTypes}
+						data={data}
+						name={name}
+						ref={lineChartRef}
+						options={options}
+						yAxisUnit={widget.yAxisUnit}
 						onClickHandler={onClickHandler}
-						onDragSelect={onDragSelect}
+						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}
 					/>
 				</div>
 			)}

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

@@ -4,47 +4,80 @@ 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 { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+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 isEmpty from 'lodash-es/isEmpty';
+import _noop from 'lodash-es/noop';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, 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,
-		variablesToGetUpdated,
-	} = useDashboard();
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
 	const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const onDragSelect = useCallback(
+		(start: number, end: number): void => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+
+			const { maxTime, minTime } = GetMinMax('custom', [
+				startTimestamp,
+				endTimestamp,
+			]);
+
+			urlQuery.set(QueryParams.startTime, minTime.toString());
+			urlQuery.set(QueryParams.endTime, maxTime.toString());
+			const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+		},
+		[dispatch, location.pathname, urlQuery],
+	);
+
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
 		const startTime = searchParams.get(QueryParams.startTime);
@@ -98,39 +131,15 @@ function GridCardGraph({
 		isVisible &&
 		!isEmptyWidget &&
 		isQueryEnabled &&
-		isEmpty(variablesToGetUpdated);
+		widget.panelTypes !== PANEL_TYPES.LIST;
 
-	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-			return {
+	const queryResponse = useGetQueryRange(
+		{
 			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(
-		{
-			...requestData,
-			variables: getDashboardVariables(variables),
-			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
-			globalSelectedInterval,
 		},
 		version || DEFAULT_ENTITY_VERSION,
 		{
@@ -142,7 +151,6 @@ function GridCardGraph({
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
-				requestData,
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -165,6 +173,15 @@ 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,
@@ -172,30 +189,89 @@ 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.PIE
+		widget.panelTypes === PANEL_TYPES.LIST
 			? headerMenuList.filter((menu) => menu !== MenuItemKeys.CreateAlerts)
 			: headerMenuList;
 
+	const [graphVisibility, setGraphVisibility] = useState<boolean[]>(
+		Array(queryResponse.data?.payload?.data.result.length || 0).fill(true),
+	);
+
+	useEffect(() => {
+		const {
+			graphVisibilityStates: localStoredVisibilityState,
+		} = getLocalStorageGraphVisibilityState({
+			apiResponse: queryResponse.data?.payload.data.result || [],
+			name,
+		});
+		setGraphVisibility(localStoredVisibilityState);
+	}, [name, queryResponse.data?.payload.data.result]);
+
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				id: widget?.id,
+				apiResponse: queryResponse.data?.payload,
+				dimensions: containerDimensions,
+				isDarkMode,
+				onDragSelect,
+				yAxisUnit: widget?.yAxisUnit,
+				onClickHandler,
+				thresholds: widget.thresholds,
+				minTimeScale,
+				maxTimeScale,
+				softMax: widget.softMax === undefined ? null : widget.softMax,
+				softMin: widget.softMin === undefined ? null : widget.softMin,
+				graphsVisibilityStates: graphVisibility,
+				setGraphsVisibilityStates: setGraphVisibility,
+				panelType: widget.panelTypes,
+			}),
+		[
+			widget?.id,
+			widget?.yAxisUnit,
+			widget.thresholds,
+			widget.softMax,
+			widget.softMin,
+			queryResponse.data?.payload,
+			containerDimensions,
+			isDarkMode,
+			onDragSelect,
+			onClickHandler,
+			minTimeScale,
+			maxTimeScale,
+			graphVisibility,
+			setGraphVisibility,
+			widget.panelTypes,
+		],
+	);
+
 	return (
 		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			{isEmptyLayout ? (
 				<EmptyWidget />
 			) : (
 				<WidgetGraphComponent
+					data={chartData}
+					options={options}
 					widget={widget}
 					queryResponse={queryResponse}
 					errorMessage={errorMessage}
 					isWarning={false}
+					name={name}
 					version={version}
+					onDragSelect={onDragSelect}
 					threshold={threshold}
 					headerMenuList={menuList}
-					isFetchingResponse={queryResponse.isFetching}
-					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}
-					onDragSelect={onDragSelect}
+					graphVisibiltyState={graphVisibility}
+					setGraphVisibility={setGraphVisibility}
+					isFetchingResponse={queryResponse.isFetching}
 				/>
 			)}
 		</div>

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

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

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

@@ -5,12 +5,6 @@
 	.react-grid-layout {
 		border: none !important;
 		margin-top: 0;
-
-		.widget-graph-container {
-			&.graph {
-				height: 100%;
-			}
-		}
 	}
 }
 

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -1,28 +1,22 @@
 import './GridCardLayout.styles.scss';
 
 import { PlusOutlined } from '@ant-design/icons';
-import { Flex, Tooltip } from 'antd';
-import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
+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 { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
-import { useLocation } from 'react-router-dom';
-import { UpdateTimeInterval } from 'store/actions';
+import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { Dashboard, Widgets } from 'types/api/dashboard/getAll';
 import AppReducer from 'types/reducer/app';
@@ -51,8 +45,6 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 	} = useDashboard();
 	const { data } = selectedDashboard || {};
 	const handle = useFullScreenHandle();
-	const { pathname } = useLocation();
-	const dispatch = useDispatch();
 
 	const { widgets, variables } = data || {};
 
@@ -69,7 +61,6 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 	const updateDashboardMutation = useUpdateDashboard();
 
 	const { notifications } = useNotifications();
-	const urlQuery = useUrlQuery();
 
 	let permissions: ComponentTypes[] = ['save_layout', 'add_panel'];
 
@@ -135,23 +126,6 @@ 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 &&
@@ -170,24 +144,6 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 
 	return (
 		<>
-			<Flex justify="flex-end" gap={8} align="center">
-				<FacingIssueBtn
-					attributes={{
-						uuid: selectedDashboard?.uuid,
-						title: data?.title,
-						screen: 'Dashboard Details',
-					}}
-					eventName="Dashboard: Facing Issues in dashboard"
-					buttonText="Facing Issues in dashboard"
-					message={`Hi Team,
-
-I am facing issues configuring dashboard in SigNoz. Here are my dashboard details
-
-Name: ${data?.title || ''}
-Dashboard Id: ${selectedDashboard?.uuid || ''}
-
-Thanks`}
-				/>
 			<ButtonContainer>
 				<Tooltip title="Open in Full Screen">
 					<Button
@@ -210,7 +166,6 @@ Thanks`}
 					</Button>
 				)}
 			</ButtonContainer>
-			</Flex>
 
 			<FullScreen handle={handle} className="fullscreen-grid-container">
 				<ReactGridLayout
@@ -245,10 +200,11 @@ Thanks`}
 								>
 									<GridCard
 										widget={currentWidget || ({ id, query: {} } as Widgets)}
+										name={currentWidget?.id || ''}
 										headerMenuList={widgetActions}
 										variables={variables}
+										fillSpans={currentWidget?.fillSpans}
 										version={selectedDashboard?.data?.version}
-										onDragSelect={onDragSelect}
 									/>
 								</Card>
 							</CardContainer>

frontend/src/container/GridPanelSwitch/index.tsx

@@ -1,8 +1,10 @@
 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';
 
@@ -19,7 +21,10 @@ const GridPanelSwitch = forwardRef<
 			query,
 			options,
 			thresholds,
+			selectedLogFields,
+			selectedTracesFields,
 			dataSource,
+			selectedTime,
 		},
 		ref,
 	): JSX.Element | null => {
@@ -41,8 +46,20 @@ const GridPanelSwitch = forwardRef<
 					query,
 					thresholds,
 				},
-				[PANEL_TYPES.LIST]: null,
-				[PANEL_TYPES.PIE]: null,
+				[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.TRACE]: null,
 				[PANEL_TYPES.BAR]: {
 					data,
@@ -53,7 +70,19 @@ const GridPanelSwitch = forwardRef<
 			};
 
 			return result;
-		}, [data, options, ref, yAxisUnit, thresholds, panelData, query]);
+		}, [
+			data,
+			options,
+			ref,
+			yAxisUnit,
+			thresholds,
+			panelData,
+			query,
+			dataSource,
+			selectedLogFields,
+			selectedTime,
+			selectedTracesFields,
+		]);
 
 		const Component = getComponentForPanelType(panelType, dataSource) as FC<
 			PropsTypePropsMap[typeof panelType]

frontend/src/container/GridPanelSwitch/types.ts

@@ -2,7 +2,9 @@ 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';
@@ -38,8 +40,7 @@ export type PropsTypePropsMap = {
 	[PANEL_TYPES.VALUE]: GridValueComponentProps;
 	[PANEL_TYPES.TABLE]: GridTableComponentProps;
 	[PANEL_TYPES.TRACE]: null;
-	[PANEL_TYPES.PIE]: null;
-	[PANEL_TYPES.LIST]: null;
+	[PANEL_TYPES.LIST]: LogsPanelComponentProps | TracesTableComponentProps;
 	[PANEL_TYPES.BAR]: UplotProps & {
 		ref: ForwardedRef<ToggleGraphProps | undefined>;
 	};

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -358,18 +358,6 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				pagination={{
 					defaultCurrent: Number(paginationParam) || 1,
 				}}
-				facingIssueBtn={{
-					attributes: {
-						screen: 'Alert list page',
-					},
-					eventName: 'Alert: Facing Issues in alert',
-					buttonText: 'Facing Issues in alert',
-					message: `Hi Team,
-
-I am facing issues with alerts.
-
-Thanks`,
-				}}
 			/>
 		</>
 	);

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -385,18 +385,6 @@ function DashboardsList(): JSX.Element {
 					dataSource={data}
 					onChange={handleChange}
 					showSorterTooltip
-					facingIssueBtn={{
-						attributes: {
-							screen: 'Dashboard list page',
-						},
-						eventName: 'Dashboard: Facing Issues in dashboard',
-						buttonText: 'Facing Issues in dashboard',
-						message: `Hi Team,
-
-I am facing issues with dashboards.
-						
-Thanks`,
-					}}
 				/>
 			</TableContainer>
 		</Card>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -608,7 +608,6 @@ function LogsExplorerViews({
 										className="periscope-btn"
 										onClick={handleToggleShowFormatOptions}
 										icon={<Sliders size={14} />}
-										data-testid="periscope-btn"
 									/>
 
 									{showFormatMenuItems && (

frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx

@@ -1,151 +0,0 @@
-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();
-	});
-});

frontend/src/container/LogsExplorerViews/tests/mock.ts

@@ -1,51 +0,0 @@
-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: '',
-								},
-							},
-						],
-					},
-				],
-			},
-		},
-	},
-};

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

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

frontend/src/container/LogsPanelTable/utils.tsx

@@ -1,15 +1,10 @@
 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'],
@@ -41,49 +36,3 @@ export const getLogPanelColumnsList = (
 
 	return [...initialColumns, ...columns];
 };
-
-export const getNextOrPreviousItems = (
-	items: TagFilterItem[],
-	direction: 'NEXT' | 'PREV',
-	log?: ILog,
-): TagFilterItem[] => {
-	const nextItem = {
-		id: uuid(),
-		key: {
-			key: 'id',
-			type: '',
-			dataType: DataTypes.String,
-			isColumn: true,
-		},
-		op: OPERATORS['<'],
-		value: log?.id || '',
-	};
-	const prevItem = {
-		id: uuid(),
-		key: {
-			key: 'id',
-			type: '',
-			dataType: DataTypes.String,
-			isColumn: true,
-		},
-		op: OPERATORS['>'],
-		value: log?.id || '',
-	};
-	let index = items.findIndex((item) => item.op === OPERATORS['<']);
-	if (index === -1) {
-		index = items.findIndex((item) => item.op === OPERATORS['>']);
-	}
-	if (index === -1) {
-		if (direction === 'NEXT') {
-			return [...items, nextItem];
-		}
-		return [...items, prevItem];
-	}
-	const newItems = [...items];
-	if (direction === 'NEXT') {
-		newItems[index] = nextItem;
-	} else {
-		newItems[index] = prevItem;
-	}
-	return newItems;
-};

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

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

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

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

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

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

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

@@ -19,10 +19,13 @@ 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 } from 'react-redux';
+import { useDispatch, useSelector } 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';
@@ -46,6 +49,9 @@ 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);
@@ -53,6 +59,10 @@ 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;
 
@@ -84,7 +94,7 @@ function Application(): JSX.Element {
 		isLoading: topLevelOperationsIsLoading,
 		isError: topLevelOperationsIsError,
 	} = useQuery<ServiceDataProps>({
-		queryKey: [servicename],
+		queryKey: [servicename, minTime, maxTime, selectedTags],
 		queryFn: getTopLevelOperations,
 	});
 
@@ -106,7 +116,9 @@ function Application(): JSX.Element {
 		[servicename, topLevelOperations],
 	);
 
-	const operationPerSecWidget = getWidgetQueryBuilder({
+	const operationPerSecWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
 				query: {
 					queryType: EQueryType.QUERY_BUILDER,
 					promql: [],
@@ -122,9 +134,13 @@ function Application(): JSX.Element {
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: 'ops',
 				id: SERVICE_CHART_ID.rps,
-	});
+			}),
+		[servicename, tagFilterItems, topLevelOperationsRoute],
+	);
 
-	const errorPercentageWidget = getWidgetQueryBuilder({
+	const errorPercentageWidget = useMemo(
+		() =>
+			getWidgetQueryBuilder({
 				query: {
 					queryType: EQueryType.QUERY_BUILDER,
 					promql: [],
@@ -140,7 +156,9 @@ function Application(): JSX.Element {
 				panelTypes: PANEL_TYPES.TIME_SERIES,
 				yAxisUnit: '%',
 				id: SERVICE_CHART_ID.errorPercentage,
-	});
+			}),
+		[servicename, tagFilterItems, topLevelOperationsRoute],
+	);
 
 	const onDragSelect = useCallback(
 		(start: number, end: number) => {

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

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

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

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

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

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

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

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

frontend/src/container/MetricsApplication/constant.ts

@@ -1,5 +1,3 @@
-/* eslint-disable sonarjs/no-duplicate-string */
-
 import { DownloadOptions } from 'container/Download/Download.types';
 import { MenuItemKeys } from 'container/GridCardLayout/WidgetHeader/contants';
 
@@ -22,7 +20,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',
 }
 

frontend/src/container/MetricsApplication/styles.ts

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

frontend/src/container/MetricsApplication/types.ts

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

frontend/src/container/MetricsApplication/utils.ts

@@ -33,8 +33,6 @@ 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';
 };

frontend/src/container/NewDashboard/ComponentsSlider/constants.ts

@@ -10,7 +10,6 @@ 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,
 };
 

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

@@ -1,21 +1,99 @@
+import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import { useNotifications } from 'hooks/useNotifications';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { LogsAggregatorOperator } from 'types/common/queryBuilder';
 import { v4 as uuid } from 'uuid';
 
-import { PANEL_TYPES_INITIAL_QUERY } from './constants';
+import {
+	listViewInitialLogQuery,
+	listViewInitialTraceQuery,
+	PANEL_TYPES_INITIAL_QUERY,
+} from './constants';
 import menuItems from './menuItems';
 import { Card, Container, Text } from './styles';
 
 function DashboardGraphSlider(): JSX.Element {
-	const { handleToggleDashboardSlider } = useDashboard();
+	const {
+		handleToggleDashboardSlider,
+		layouts,
+		selectedDashboard,
+	} = useDashboard();
+
+	const { data } = selectedDashboard || {};
+
+	const { notifications } = useNotifications();
+
+	const updateDashboardMutation = useUpdateDashboard();
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const onClickHandler = (name: PANEL_TYPES) => (): void => {
 		const id = uuid();
+
+		updateDashboardMutation.mutateAsync(
+			{
+				uuid: selectedDashboard?.uuid || '',
+				data: {
+					title: data?.title || '',
+					variables: data?.variables || {},
+					description: data?.description || '',
+					name: data?.name || '',
+					tags: data?.tags || [],
+					version: data?.version || 'v3',
+					layout: [
+						{
+							i: id,
+							w: 6,
+							x: 0,
+							h: 3,
+							y: 0,
+						},
+						...(layouts.filter((layout) => layout.i !== PANEL_TYPES.EMPTY_WIDGET) ||
+							[]),
+					],
+					widgets: [
+						...(data?.widgets || []),
+						{
+							id,
+							title: '',
+							description: '',
+							isStacked: false,
+							nullZeroValues: '',
+							opacity: '',
+							panelTypes: name,
+							query:
+								name === PANEL_TYPES.LIST
+									? listViewInitialLogQuery
+									: PANEL_TYPES_INITIAL_QUERY[name],
+							timePreferance: 'GLOBAL_TIME',
+							softMax: null,
+							softMin: null,
+							selectedLogFields: [
+								{
+									dataType: 'string',
+									type: '',
+									name: 'body',
+								},
+								{
+									dataType: 'string',
+									type: '',
+									name: 'timestamp',
+								},
+							],
+							selectedTracesFields: [
+								...listViewInitialTraceQuery.builder.queryData[0].selectColumns,
+							],
+						},
+					],
+				},
+			},
+			{
+				onSuccess: (data) => {
+					if (data.payload) {
 						handleToggleDashboardSlider(false);
 						const queryParamsLog = {
 							graphType: name,
@@ -54,6 +132,15 @@ function DashboardGraphSlider(): JSX.Element {
 								`${history.location.pathname}/new?${createQueryParams(queryParams)}`,
 							);
 						}
+					}
+				},
+				onError: () => {
+					notifications.success({
+						message: SOMETHING_WENT_WRONG,
+					});
+				},
+			},
+		);
 	};
 
 	return (

frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx

@@ -1,13 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	BarChart3,
-	LineChart,
-	List,
-	PieChart,
-	SigmaSquare,
-	Table,
-} from 'lucide-react';
+import { BarChart3, LineChart, List, SigmaSquare, Table } from 'lucide-react';
 
 const Items: ItemsProps[] = [
 	{
@@ -35,14 +28,9 @@ 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',
-	},
 ];
 
-export interface ItemsProps {
+interface ItemsProps {
 	name: PANEL_TYPES;
 	icon: JSX.Element;
 	display: string;

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,14 +11,15 @@ 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(() => {
@@ -44,27 +45,8 @@ function DashboardVariableSelection(): JSX.Element | null {
 	}, [variables]);
 
 	const onVarChanged = (name: string): void => {
-		/**
-		 * 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,
-		]);
+		setLastUpdatedVar(name);
+		setUpdate(!update);
 	};
 
 	const onValueUpdate = (
@@ -72,46 +54,39 @@ function DashboardVariableSelection(): JSX.Element | null {
 		id: string,
 		value: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
-		// eslint-disable-next-line sonarjs/cognitive-complexity
 	): 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((prev) => {
-					if (prev) {
-						const oldVariables = prev?.data.variables;
-						// this is added to handle case where we have two different
-						// schemas for variable response
-						if (oldVariables[id]) {
-							oldVariables[id] = {
-								...oldVariables[id],
-								selectedValue: value,
-								allSelected,
-							};
-						}
-						if (oldVariables[name]) {
-							oldVariables[name] = {
-								...oldVariables[name],
-								selectedValue: value,
-								allSelected,
-							};
-						}
-						return {
-							...prev,
+				setSelectedDashboard({
+					...selectedDashboard,
 					data: {
-								...prev?.data,
+						...selectedDashboard?.data,
 						variables: {
-									...oldVariables,
+							...variables,
 						},
 					},
-						};
-					}
-					return prev;
 				});
 			}
 
 			onVarChanged(name);
+
+			setUpdate(!update);
 		}
 	};
 
@@ -132,12 +107,13 @@ 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>

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx

@@ -53,7 +53,7 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
+					lastUpdatedVar=""
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -68,7 +68,7 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
+					lastUpdatedVar=""
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -82,7 +82,7 @@ describe('VariableItem', () => {
 					variableData={mockVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
+					lastUpdatedVar=""
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -110,7 +110,7 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
+					lastUpdatedVar=""
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -131,7 +131,7 @@ describe('VariableItem', () => {
 					variableData={customVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
+					lastUpdatedVar=""
 				/>
 			</MockQueryClientProvider>,
 		);
@@ -146,7 +146,7 @@ describe('VariableItem', () => {
 					variableData={mockCustomVariableData}
 					existingVariables={{}}
 					onValueUpdate={mockOnValueUpdate}
-					variablesToGetUpdated={[]}
+					lastUpdatedVar=""
 				/>
 			</MockQueryClientProvider>,
 		);

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx

@@ -32,7 +32,7 @@ interface VariableItemProps {
 		arg1: IDashboardVariable['selectedValue'],
 		allSelected: boolean,
 	) => void;
-	variablesToGetUpdated: string[];
+	lastUpdatedVar: string;
 }
 
 const getSelectValue = (
@@ -49,7 +49,7 @@ function VariableItem({
 	variableData,
 	existingVariables,
 	onValueUpdate,
-	variablesToGetUpdated,
+	lastUpdatedVar,
 }: VariableItemProps): JSX.Element {
 	const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
 		[],
@@ -108,10 +108,16 @@ function VariableItem({
 
 					if (!areArraysEqual(newOptionsData, oldOptionsData)) {
 						/* eslint-disable no-useless-escape */
+						const re = new RegExp(`\\{\\{\\s*?\\.${lastUpdatedVar}\\s*?\\}\\}`); // regex for `{{.var}}`
+						// If the variable is dependent on the last updated variable
+						// and contains the last updated variable in its query (of the form `{{.var}}`)
+						// then we need to update the value of the variable
+						const queryValue = variableData.queryValue || '';
+						const dependVarReMatch = queryValue.match(re);
 						if (
 							variableData.type === 'QUERY' &&
-							variableData.name &&
-							variablesToGetUpdated.includes(variableData.name)
+							dependVarReMatch !== null &&
+							dependVarReMatch.length > 0
 						) {
 							let value = variableData.selectedValue;
 							let allSelected = false;