Merge remote-tracking branch 'origin/develop' into issue_4777

.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

.github/workflows/staging-deployment.yaml

@@ -9,46 +9,34 @@ jobs:
     name: Deploy latest develop branch to staging
     runs-on: ubuntu-latest
     environment: staging
-    permissions:
-      contents: 'read'
-      id-token: 'write'
     steps:
-      - id: 'auth'
-        uses: 'google-github-actions/auth@v2'
-        with:
-          workload_identity_provider: ${{ secrets.GCP_WORKLOAD_IDENTITY_PROVIDER }}
-          service_account: ${{ secrets.GCP_SERVICE_ACCOUNT }}
-
-      - name: 'sdk'
-        uses: 'google-github-actions/setup-gcloud@v2'
-
-      - name: 'ssh'
-        shell: bash
+      - name: Executing remote ssh commands using ssh key
+        uses: appleboy/ssh-action@v1.0.3
         env:
-          GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
+          GITHUB_BRANCH: develop
           GITHUB_SHA: ${{ github.sha }}
-          GCP_PROJECT: ${{ secrets.GCP_PROJECT }}
-          GCP_ZONE: ${{ secrets.GCP_ZONE }}
-          GCP_INSTANCE: ${{ secrets.GCP_INSTANCE }}
-        run: |
-          read -r -d '' COMMAND <<EOF || true
-          echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
-          echo "GITHUB_SHA: ${GITHUB_SHA}"
-          export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
-          export OTELCOL_TAG="main"
-          export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
-          docker system prune --force
-          docker pull signoz/signoz-otel-collector:main
-          docker pull signoz/signoz-schema-migrator:main
-          cd ~/signoz
-          git status
-          git add .
-          git stash push -m "stashed on $(date --iso-8601=seconds)"
-          git fetch origin
-          git checkout ${GITHUB_BRANCH}
-          git pull
-          make build-ee-query-service-amd64
-          make build-frontend-amd64
-          make run-signoz
-          EOF
-          gcloud compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"
+        with:
+          host: ${{ secrets.HOST_DNS }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SSH_KEY }}
+          envs: GITHUB_BRANCH,GITHUB_SHA
+          command_timeout: 60m
+          script: |
+            echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
+            echo "GITHUB_SHA: ${GITHUB_SHA}"
+            export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
+            export OTELCOL_TAG="main"
+            export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
+            docker system prune --force
+            docker pull signoz/signoz-otel-collector:main
+            docker pull signoz/signoz-schema-migrator:main
+            cd ~/signoz
+            git status
+            git add .
+            git stash push -m "stashed on $(date --iso-8601=seconds)"
+            git fetch origin
+            git checkout ${GITHUB_BRANCH}
+            git pull
+            make build-ee-query-service-amd64
+            make build-frontend-amd64
+            make run-signoz

.github/workflows/testing-deployment.yaml

@@ -9,47 +9,35 @@ jobs:
     runs-on: ubuntu-latest
     environment: testing
     if: ${{ github.event.label.name == 'testing-deploy' }}
-    permissions:
-      contents: 'read'
-      id-token: 'write'
     steps:
-      - id: 'auth'
-        uses: 'google-github-actions/auth@v2'
-        with:
-          workload_identity_provider: ${{ secrets.GCP_WORKLOAD_IDENTITY_PROVIDER }}
-          service_account: ${{ secrets.GCP_SERVICE_ACCOUNT }}
-
-      - name: 'sdk'
-        uses: 'google-github-actions/setup-gcloud@v2'
-
-      - name: 'ssh'
-        shell: bash
+      - name: Executing remote ssh commands using ssh key
+        uses: appleboy/ssh-action@v1.0.3
         env:
           GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
           GITHUB_SHA: ${{ github.sha }}
-          GCP_PROJECT: ${{ secrets.GCP_PROJECT }}
-          GCP_ZONE: ${{ secrets.GCP_ZONE }}
-          GCP_INSTANCE: ${{ secrets.GCP_INSTANCE }}
-        run: |
-          read -r -d '' COMMAND <<EOF || true
-          echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
-          echo "GITHUB_SHA: ${GITHUB_SHA}"
-          export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
-          export DEV_BUILD="1"
-          export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
-          docker system prune --force
-          cd ~/signoz
-          git status
-          git add .
-          git stash push -m "stashed on $(date --iso-8601=seconds)"
-          git fetch origin
-          git checkout develop
-          git pull
-          # This is added to include the scenerio when new commit in PR is force-pushed
-          git branch -D ${GITHUB_BRANCH}
-          git checkout --track origin/${GITHUB_BRANCH}
-          make build-ee-query-service-amd64
-          make build-frontend-amd64
-          make run-signoz
-          EOF
-          gcloud compute ssh ${GCP_INSTANCE} --zone ${GCP_ZONE} --tunnel-through-iap --project ${GCP_PROJECT} --command "${COMMAND}"
+        with:
+          host: ${{ secrets.HOST_DNS }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SSH_KEY }}
+          envs: GITHUB_BRANCH,GITHUB_SHA
+          command_timeout: 60m
+          script: |
+            echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
+            echo "GITHUB_SHA: ${GITHUB_SHA}"
+            export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
+            export DEV_BUILD="1"
+            export PATH="/usr/local/go/bin/:$PATH" # needed for Golang to work
+            docker system prune --force
+            cd ~/signoz
+            git status
+            git add .
+            git stash push -m "stashed on $(date --iso-8601=seconds)"
+            git fetch origin
+            git checkout develop
+            git pull
+            # This is added to include the scenerio when new commit in PR is force-pushed
+            git branch -D ${GITHUB_BRANCH}
+            git checkout --track origin/${GITHUB_BRANCH}
+            make build-ee-query-service-amd64
+            make build-frontend-amd64
+            make run-signoz

.gitignore

@@ -47,7 +47,6 @@ ee/query-service/signoz.db
 ee/query-service/tests/test-deploy/data/
 
 # local data
-*.backup
 *.db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/

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/dashboard.go

@@ -1,13 +1,12 @@
 package api
 
 import (
-	"net/http"
-
 	"github.com/gorilla/mux"
 	"go.signoz.io/signoz/pkg/query-service/app/dashboards"
 	"go.signoz.io/signoz/pkg/query-service/auth"
 	"go.signoz.io/signoz/pkg/query-service/common"
 	"go.signoz.io/signoz/pkg/query-service/model"
+	"net/http"
 )
 
 func (ah *APIHandler) lockDashboard(w http.ResponseWriter, r *http.Request) {

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
 			}
 		}
@@ -710,7 +676,6 @@ func makeRulesManager(
 		Logger:       nil,
 		DisableRules: disableRules,
 		FeatureFlags: fm,
-		Reader:       ch,
 	}
 
 	// create Manager

ee/query-service/main.go

@@ -14,9 +14,7 @@ import (
 	semconv "go.opentelemetry.io/otel/semconv/v1.4.0"
 	"go.signoz.io/signoz/ee/query-service/app"
 	"go.signoz.io/signoz/pkg/query-service/auth"
-	"go.signoz.io/signoz/pkg/query-service/constants"
 	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
-	"go.signoz.io/signoz/pkg/query-service/migrate"
 	"go.signoz.io/signoz/pkg/query-service/version"
 	"google.golang.org/grpc"
 	"google.golang.org/grpc/credentials/insecure"
@@ -145,12 +143,6 @@ func main() {
 		zap.L().Info("JWT secret key set successfully.")
 	}
 
-	if err := migrate.Migrate(constants.RELATIONAL_DATASOURCE_PATH); err != nil {
-		zap.L().Error("Failed to migrate", zap.Error(err))
-	} else {
-		zap.L().Info("Migration successful")
-	}
-
 	server, err := app.NewServer(serverOptions)
 	if err != nil {
 		zap.L().Fatal("Failed to create server", zap.Error(err))

ee/query-service/model/plans.go

@@ -52,14 +52,14 @@ var BasicPlan = basemodel.FeatureSet{
 		Name:       basemodel.QueryBuilderPanels,
 		Active:     true,
 		Usage:      0,
-		UsageLimit: -1,
+		UsageLimit: 20,
 		Route:      "",
 	},
 	basemodel.Feature{
 		Name:       basemodel.QueryBuilderAlerts,
 		Active:     true,
 		Usage:      0,
-		UsageLimit: -1,
+		UsageLimit: 10,
 		Route:      "",
 	},
 	basemodel.Feature{

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

@@ -4,7 +4,6 @@ const config: Config.InitialOptions = {
 	clearMocks: true,
 	coverageDirectory: 'coverage',
 	coverageReporters: ['text', 'cobertura', 'html', 'json-summary'],
-	collectCoverageFrom: ['src/**/*.{ts,tsx}'],
 	moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
 	modulePathIgnorePatterns: ['dist'],
 	moduleNameMapper: {
@@ -21,6 +20,8 @@ const config: Config.InitialOptions = {
 	transform: {
 		'^.+\\.(ts|tsx)?$': 'ts-jest',
 		'^.+\\.(js|jsx)$': 'babel-jest',
+		'^.+\\.(css|scss|sass|less)$': 'jest-preview/transforms/css',
+		'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file',
 	},
 	transformIgnorePatterns: [
 		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color)/)',
@@ -34,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

@@ -13,15 +13,15 @@
 		"jest": "jest",
 		"jest:coverage": "jest --coverage",
 		"jest:watch": "jest --watch",
+		"jest-preview": "jest-preview",
+		"test:debug": "npm-run-all -p test jest-preview",
 		"postinstall": "is-ci || yarn husky:configure",
 		"playwright": "npm run i18n:generate-hash && NODE_ENV=testing playwright test --config=./playwright.config.ts",
 		"playwright:local:debug": "PWDEBUG=console yarn playwright --headed --browser=chromium",
 		"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"
@@ -41,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",
@@ -124,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": {
@@ -181,7 +177,7 @@
 		"@types/webpack-dev-server": "^4.7.2",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
-		"autoprefixer": "10.4.19",
+		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "9.0.0",
 		"copy-webpack-plugin": "^8.1.0",
@@ -204,12 +200,12 @@
 		"husky": "^7.0.4",
 		"is-ci": "^3.0.1",
 		"jest-playwright-preset": "^1.7.2",
+		"jest-preview": "0.3.1",
 		"jest-styled-components": "^7.0.8",
 		"lint-staged": "^12.5.0",
 		"msw": "1.3.2",
 		"npm-run-all": "latest",
 		"portfinder-sync": "^0.0.2",
-		"postcss": "8.4.38",
 		"prettier": "2.2.1",
 		"raw-loader": "4.0.2",
 		"react-hooks-testing-library": "0.6.0",

frontend/public/Icons/promQL.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c1 2.538 2.5 2.962 3.5 3.808.942.78 1.481 1.845 1.5 2.961 0 1.122-.527 2.198-1.464 2.992C14.598 12.554 13.326 13 12 13s-2.598-.446-3.536-1.24C7.527 10.968 7 9.892 7 8.77c0-.255 0-.508.1-.762.085.25.236.48.443.673.207.193.463.342.75.437a2.334 2.334 0 001.767-.128c.263-.135.485-.32.65-.539.166-.22.269-.468.301-.727a1.452 1.452 0 00-.11-.765 1.699 1.699 0 00-.501-.644C8 4.115 11 2 12 2zM17 16l-5 6-5-6h10z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

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-GB/dashboard.json

@@ -16,7 +16,6 @@
 	"new_dashboard_title": "Sample Title",
 	"layout_saved_successfully": "Layout saved successfully",
 	"add_panel": "Add Panel",
-	"add_row": "Add Row",
 	"save_layout": "Save Layout",
 	"variable_updated_successfully": "Variable updated successfully",
 	"error_while_updating_variable": "Error while updating variable",

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/dashboard.json

@@ -16,7 +16,6 @@
 	"new_dashboard_title": "Sample Title",
 	"layout_saved_successfully": "Layout saved successfully",
 	"add_panel": "Add Panel",
-	"add_row": "Add Row",
 	"save_layout": "Save Layout",
 	"full_view": "Full Screen View",
 	"variable_updated_successfully": "Variable updated successfully",

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/api/plannedDowntime/createDowntimeSchedule.ts

@@ -1,44 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-import { Recurrence } from './getAllDowntimeSchedules';
-
-export interface DowntimeSchedulePayload {
-	name: string;
-	description?: string;
-	alertIds: string[];
-	schedule: {
-		timezone?: string;
-		startTime?: string;
-		endTime?: string;
-		recurrence?: Recurrence;
-	};
-}
-
-export interface PayloadProps {
-	status: string;
-	data: string;
-}
-
-const createDowntimeSchedule = async (
-	props: DowntimeSchedulePayload,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post('/downtime_schedules', {
-			...props,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default createDowntimeSchedule;

frontend/src/api/plannedDowntime/deleteDowntimeSchedule.ts

@@ -1,19 +0,0 @@
-import axios from 'api';
-import { useMutation, UseMutationResult } from 'react-query';
-
-export interface DeleteDowntimeScheduleProps {
-	id?: number;
-}
-
-export interface DeleteSchedulePayloadProps {
-	status: string;
-	data: string;
-}
-
-export const useDeleteDowntimeSchedule = (
-	props: DeleteDowntimeScheduleProps,
-): UseMutationResult<DeleteSchedulePayloadProps, Error, number> =>
-	useMutation({
-		mutationKey: [props.id],
-		mutationFn: () => axios.delete(`/downtime_schedules/${props.id}`),
-	});

frontend/src/api/plannedDowntime/getAllDowntimeSchedules.ts

@@ -1,50 +0,0 @@
-import axios from 'api';
-import { AxiosError, AxiosResponse } from 'axios';
-import { Option } from 'container/PlannedDowntime/DropdownWithSubMenu/DropdownWithSubMenu';
-import { useQuery, UseQueryResult } from 'react-query';
-
-export type Recurrence = {
-	startTime?: string | null;
-	endTime?: string | null;
-	duration?: number | string | null;
-	repeatType?: string | Option | null;
-	repeatOn?: string[] | null;
-};
-
-type Schedule = {
-	timezone: string | null;
-	startTime: string | null;
-	endTime: string | null;
-	recurrence: Recurrence | null;
-};
-
-export interface DowntimeSchedules {
-	id: number;
-	name: string | null;
-	description: string | null;
-	schedule: Schedule | null;
-	alertIds: string[] | null;
-	createdAt: string | null;
-	createdBy: string | null;
-	updatedAt: string | null;
-	updatedBy: string | null;
-}
-export type PayloadProps = { data: DowntimeSchedules[] };
-
-export const getAllDowntimeSchedules = async (
-	props?: GetAllDowntimeSchedulesPayloadProps,
-): Promise<AxiosResponse<PayloadProps>> =>
-	axios.get('/downtime_schedules', { params: props });
-
-export interface GetAllDowntimeSchedulesPayloadProps {
-	active?: boolean;
-	recurrence?: boolean;
-}
-
-export const useGetAllDowntimeSchedules = (
-	props?: GetAllDowntimeSchedulesPayloadProps,
-): UseQueryResult<AxiosResponse<PayloadProps>, AxiosError> =>
-	useQuery<AxiosResponse<PayloadProps>, AxiosError>({
-		queryKey: ['getAllDowntimeSchedules', props],
-		queryFn: () => getAllDowntimeSchedules(props),
-	});

frontend/src/api/plannedDowntime/updateDowntimeSchedule.ts

@@ -1,37 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-
-import { DowntimeSchedulePayload } from './createDowntimeSchedule';
-
-export interface DowntimeScheduleUpdatePayload {
-	data: DowntimeSchedulePayload;
-	id?: number;
-}
-
-export interface PayloadProps {
-	status: string;
-	data: string;
-}
-
-const updateDowntimeSchedule = async (
-	props: DowntimeScheduleUpdatePayload,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.put(`/downtime_schedules/${props.id}`, {
-			...props.data,
-		});
-
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default updateDowntimeSchedule;

frontend/src/assets/Dashboard/PromQl.tsx

@@ -1,27 +0,0 @@
-import { CSSProperties } from 'react';
-
-function PromQLIcon({
-	fillColor,
-}: {
-	fillColor: CSSProperties['color'];
-}): JSX.Element {
-	return (
-		<svg
-			width="14"
-			height="14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 24 24"
-		>
-			<path
-				d="M12 2c1 2.538 2.5 2.962 3.5 3.808.942.78 1.481 1.845 1.5 2.961 0 1.122-.527 2.198-1.464 2.992C14.598 12.554 13.326 13 12 13s-2.598-.446-3.536-1.24C7.527 10.968 7 9.892 7 8.77c0-.255 0-.508.1-.762.085.25.236.48.443.673.207.193.463.342.75.437a2.334 2.334 0 001.767-.128c.263-.135.485-.32.65-.539.166-.22.269-.468.301-.727a1.452 1.452 0 00-.11-.765 1.699 1.699 0 00-.501-.644C8 4.115 11 2 12 2zM17 16l-5 6-5-6h10z"
-				stroke={fillColor}
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</svg>
-	);
-}
-
-export default PromQLIcon;

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/Logs/ListLogView/index.tsx

@@ -16,7 +16,6 @@ import { useCallback, useMemo, useState } from 'react';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
@@ -51,11 +50,7 @@ function LogGeneralField({
 }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(fieldValue, {
-					FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-				}),
-			),
+			__html: convert.toHtml(dompurify.sanitize(fieldValue)),
 		}),
 		[fieldValue],
 	);
@@ -162,8 +157,8 @@ function ListLogView({
 	const timestampValue = useMemo(
 		() =>
 			typeof flattenLogData.timestamp === 'string'
-				? dayjs(flattenLogData.timestamp).format('YYYY-MM-DD HH:mm:ss.SSS')
-				: dayjs(flattenLogData.timestamp / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS'),
+				? dayjs(flattenLogData.timestamp).format()
+				: dayjs(flattenLogData.timestamp / 1e6).format(),
 		[flattenLogData.timestamp],
 	);
 

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

@@ -21,7 +21,6 @@ import {
 	useMemo,
 	useState,
 } from 'react';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
@@ -91,12 +90,12 @@ function RawLogView({
 	const text = useMemo(
 		() =>
 			typeof data.timestamp === 'string'
-				? `${dayjs(data.timestamp).format(
-						'YYYY-MM-DD HH:mm:ss.SSS',
-				  )} | ${attributesText} ${severityText} ${data.body}`
-				: `${dayjs(data.timestamp / 1e6).format(
-						'YYYY-MM-DD HH:mm:ss.SSS',
-				  )} | ${attributesText} ${severityText} ${data.body}`,
+				? `${dayjs(data.timestamp).format()} | ${attributesText} ${severityText} ${
+						data.body
+				  }`
+				: `${dayjs(
+						data.timestamp / 1e6,
+				  ).format()} | ${attributesText} ${severityText} ${data.body}`,
 		[data.timestamp, data.body, severityText, attributesText],
 	);
 
@@ -145,9 +144,7 @@ function RawLogView({
 
 	const html = useMemo(
 		() => ({
-			__html: convert.toHtml(
-				dompurify.sanitize(text, { FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS] }),
-			),
+			__html: convert.toHtml(dompurify.sanitize(text)),
 		}),
 		[text],
 	);

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

@@ -8,7 +8,6 @@ import dompurify from 'dompurify';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useMemo } from 'react';
-import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
 import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
@@ -77,8 +76,8 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				render: (field, item): ColumnTypeRender<Record<string, unknown>> => {
 					const date =
 						typeof field === 'string'
-							? dayjs(field).format('YYYY-MM-DD HH:mm:ss.SSS')
-							: dayjs(field / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
+							? dayjs(field).format()
+							: dayjs(field / 1e6).format();
 					return {
 						children: (
 							<div className="table-timestamp">
@@ -108,11 +107,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 					children: (
 						<TableBodyContent
 							dangerouslySetInnerHTML={{
-								__html: convert.toHtml(
-									dompurify.sanitize(field, {
-										FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
-									}),
-								),
+								__html: convert.toHtml(dompurify.sanitize(field)),
 							}}
 							linesPerRow={linesPerRow}
 							isDarkMode={isDarkMode}

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,22 +83,19 @@ function DynamicColumnTable({
 
 	return (
 		<div className="DynamicColumnTable">
-			<Flex justify="flex-end" align="center" gap={8}>
-				{facingIssueBtn && <FacingIssueBtn {...facingIssueBtn} />}
-				{dynamicColumns && (
-					<Dropdown
-						getPopupContainer={popupContainer}
-						menu={{ items }}
-						trigger={['click']}
-					>
-						<Button
-							className="dynamicColumnTable-button filter-btn"
-							size="middle"
-							icon={<SlidersHorizontal size={14} />}
-						/>
-					</Dropdown>
-				)}
-			</Flex>
+			{dynamicColumns && (
+				<Dropdown
+					getPopupContainer={popupContainer}
+					menu={{ items }}
+					trigger={['click']}
+				>
+					<Button
+						className="dynamicColumnTable-button filter-btn"
+						size="middle"
+						icon={<SlidersHorizontal size={14} />}
+					/>
+				</Dropdown>
+			)}
 
 			<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,62 +0,0 @@
-import './FacingIssueBtn.style.scss';
-
-import { Button, Tooltip } from 'antd';
-import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import { FeatureKeys } from 'constants/features';
-import useFeatureFlags from 'hooks/useFeatureFlag';
-import { defaultTo } from 'lodash-es';
-import { HelpCircle } from 'lucide-react';
-import { isCloudUser } from 'utils/app';
-
-export interface FacingIssueBtnProps {
-	eventName: string;
-	attributes: Record<string, unknown>;
-	message?: string;
-	buttonText?: string;
-	className?: string;
-	onHoverText?: string;
-}
-
-function FacingIssueBtn({
-	attributes,
-	eventName,
-	message = '',
-	buttonText = '',
-	className = '',
-	onHoverText = '',
-}: FacingIssueBtnProps): JSX.Element | null {
-	const handleFacingIssuesClick = (): void => {
-		logEvent(eventName, attributes);
-
-		if (window.Intercom) {
-			window.Intercom('showNewMessage', defaultTo(message, ''));
-		}
-	};
-
-	const isChatSupportEnabled = useFeatureFlags(FeatureKeys.CHAT_SUPPORT)?.active;
-	const isCloudUserVal = isCloudUser();
-
-	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
-		<div className="facing-issue-button">
-			<Tooltip title={onHoverText} autoAdjustOverflow>
-				<Button
-					className={cx('periscope-btn', 'facing-issue-button', className)}
-					onClick={handleFacingIssuesClick}
-					icon={<HelpCircle size={14} />}
-				>
-					{buttonText || 'Facing issues?'}
-				</Button>
-			</Tooltip>
-		</div>
-	) : null;
-}
-
-FacingIssueBtn.defaultProps = {
-	message: '',
-	buttonText: '',
-	className: '',
-	onHoverText: '',
-};
-
-export default FacingIssueBtn;

frontend/src/components/facingIssueBtn/util.ts

@@ -1,57 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { AlertDef } from 'types/api/alerts/def';
-import { Dashboard, DashboardData } from 'types/api/dashboard/getAll';
-
-export const chartHelpMessage = (
-	selectedDashboard: Dashboard | undefined,
-	graphType: PANEL_TYPES,
-): string => `
-Hi Team,
-
-I need help in creating this chart. Here are my dashboard details
-
-Name: ${selectedDashboard?.data.title || ''}
-Panel type: ${graphType}
-Dashboard Id: ${selectedDashboard?.uuid || ''}
-
-Thanks`;
-
-export const dashboardHelpMessage = (
-	data: DashboardData | undefined,
-	selectedDashboard: Dashboard | undefined,
-): string => `
-Hi Team,
-
-I need help with this dashboard. Here are my dashboard details
-
-Name: ${data?.title || ''}
-Dashboard Id: ${selectedDashboard?.uuid || ''}
-
-Thanks`;
-
-export const dashboardListMessage = `Hi Team,
-
-I need help with dashboards.
-						
-Thanks`;
-
-export const listAlertMessage = `Hi Team,
-
-I need help with managing alerts.
-
-Thanks`;
-
-export const alertHelpMessage = (
-	alertDef: AlertDef,
-	ruleId: number,
-): string => `
-Hi Team,
-
-I need help in configuring this alert. Here are my alert rule details
-
-Name: ${alertDef?.alert || ''}
-Alert Type: ${alertDef?.alertType || ''}
-State: ${(alertDef as any)?.state || ''}
-Alert Id: ${ruleId}
-
-Thanks`;

frontend/src/constants/features.ts

@@ -19,5 +19,4 @@ export enum FeatureKeys {
 	OSS = 'OSS',
 	ONBOARDING = 'ONBOARDING',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
-	PLANNED_MAINTENANCE = 'PLANNED_MAINTENANCE',
 }

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/query.ts

@@ -30,6 +30,4 @@ export enum QueryParams {
 	integration = 'integration',
 	pagination = 'pagination',
 	relativeTime = 'relativeTime',
-	alertType = 'alertType',
-	ruleId = 'ruleId',
 }

frontend/src/constants/queryBuilder.ts

@@ -285,15 +285,9 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
-	PIE = 'pie',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export enum PANEL_GROUP_TYPES {
-	ROW = 'row',
-}
-
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export enum ATTRIBUTE_TYPES {
 	SUM = 'Sum',

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,14 +53,13 @@ function CreateAlertChannels({
 				EmailChannel
 		>
 	>({
-		send_resolved: true,
 		text: `{{ range .Alerts -}}
      *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
 
      *Summary:* {{ .Annotations.summary }}
      *Description:* {{ .Annotations.description }}
-     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
-     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
+     *RelatedLogs:* {{ .Annotations.related_logs }}
+     *RelatedTraces:* {{ .Annotations.related_traces }}
 
      *Details:*
        {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
@@ -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

@@ -1,9 +1,7 @@
 import { Form, Row } from 'antd';
 import { ENTITY_VERSION_V4 } from 'constants/app';
-import { QueryParams } from 'constants/query';
 import FormAlertRules from 'container/FormAlertRules';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import history from 'lib/history';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -20,25 +18,15 @@ import SelectAlertType from './SelectAlertType';
 
 function CreateRules(): JSX.Element {
 	const [initValues, setInitValues] = useState<AlertDef | null>(null);
+	const [alertType, setAlertType] = useState<AlertTypes>(
+		AlertTypes.METRICS_BASED_ALERT,
+	);
 
 	const location = useLocation();
 	const queryParams = new URLSearchParams(location.search);
 	const version = queryParams.get('version');
-	const alertTypeFromParams = queryParams.get(QueryParams.alertType);
 
 	const compositeQuery = useGetCompositeQueryParam();
-	function getAlertTypeFromDataSource(): AlertTypes | null {
-		if (!compositeQuery) {
-			return null;
-		}
-		const dataSource = compositeQuery?.builder?.queryData[0]?.dataSource;
-
-		return ALERT_TYPE_VS_SOURCE_MAPPING[dataSource];
-	}
-
-	const [alertType, setAlertType] = useState<AlertTypes>(
-		(alertTypeFromParams as AlertTypes) || getAlertTypeFromDataSource(),
-	);
 
 	const [formInstance] = Form.useForm();
 
@@ -60,17 +48,21 @@ function CreateRules(): JSX.Element {
 					version: version || ENTITY_VERSION_V4,
 				});
 		}
-		queryParams.set(QueryParams.alertType, typ);
-		const generatedUrl = `${location.pathname}?${queryParams.toString()}`;
-		history.replace(generatedUrl);
 	};
 
 	useEffect(() => {
+		if (!compositeQuery) {
+			return;
+		}
+		const dataSource = compositeQuery?.builder?.queryData[0]?.dataSource;
+
+		const alertType = ALERT_TYPE_VS_SOURCE_MAPPING[dataSource];
+
 		if (alertType) {
 			onSelectType(alertType);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [alertType]);
+	}, [compositeQuery]);
 
 	if (!initValues) {
 		return (

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;
@@ -64,10 +65,6 @@
 
 	.view-options,
 	.actions {
-		.info-icon {
-			padding: 8px;
-		}
-
 		.hidden {
 			display: none;
 		}
@@ -81,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;
 
@@ -256,10 +255,6 @@
 				color: var(--bg-ink-200);
 				background-color: var(--bg-vanilla-300);
 			}
-
-			.info-icon {
-				color: var(--bg-ink-200);
-			}
 		}
 	}
 

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import './ExplorerOptions.styles.scss';
 
-import { InfoCircleOutlined } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
@@ -374,64 +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={
-								<div>
-									{sourcepage === DataSource.LOGS
-										? 'Learn more about Logs explorer '
-										: 'Learn more about Traces explorer '}
-									<Typography.Link
-										href={
-											sourcepage === DataSource.LOGS
-												? 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar'
-												: 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar'
-										}
-										target="_blank"
-									>
-										{' '}
-										here
-									</Typography.Link>{' '}
-								</div>
-							}
-						>
-							<InfoCircleOutlined className="info-icon" />
-						</Tooltip>
-						<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>
@@ -444,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,16 +47,14 @@ function ExplorerOptionsHideArea({
 									icon={<X size={14} color={Color.BG_INK_500} />}
 								/>
 							</Tooltip>
-							{isEditDeleteSupported && (
-								<Tooltip title="Update this View">
-									<Button
-										onClick={onUpdateQueryHandler}
-										className="action-btn"
-										style={{ background: Color.BG_ROBIN_500 }}
-										icon={<Disc3 size={14} color={Color.BG_INK_500} />}
-									/>
-								</Tooltip>
-							)}
+							<Tooltip title="Update this View">
+								<Button
+									onClick={onUpdateQueryHandler}
+									className="action-btn"
+									style={{ background: Color.BG_ROBIN_500 }}
+									icon={<Disc3 size={14} color={Color.BG_INK_500} />}
+								/>
+							</Tooltip>
 						</div>
 					)}
 					<Button

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

@@ -1,50 +1,45 @@
 .create-alert-modal {
-	.ant-modal-content {
-		background-color: var(--bg-ink-300);
-		.ant-modal-confirm-title {
-			color: var(--bg-vanilla-100);
-		}
+   .ant-modal-content {
+        background-color: var(--bg-ink-300);
+        .ant-modal-confirm-title {
+            color: var(--bg-vanilla-100);
+        }
 
-		.ant-modal-confirm-content {
-			.ant-typography {
-				color: var(--bg-vanilla-100);
-			}
-		}
+        .ant-modal-confirm-content {
+            .ant-typography {
+                color: var(--bg-vanilla-100);
+            }
+        }
 
-		.ant-modal-confirm-btns {
-			button:nth-of-type(1) {
-				background-color: var(--bg-slate-400);
-				border: none;
-				color: var(--bg-vanilla-100);
-			}
-		}
-	}
+        .ant-modal-confirm-btns {
+            button:nth-of-type(1) {
+                background-color: var(--bg-slate-400);
+                border: none;
+                color: var(--bg-vanilla-100);
+            }
+        }
+   } 
 }
 
 .lightMode {
-	.ant-modal-content {
-		background-color: var(--bg-vanilla-100);
-		.ant-modal-confirm-title {
-			color: var(--bg-ink-500);
-		}
+    .ant-modal-content {
+        background-color: var(--bg-vanilla-100);
+        .ant-modal-confirm-title {
+            color: var(--bg-ink-500);
+        }
 
-		.ant-modal-confirm-content {
-			.ant-typography {
-				color: var(--bg-ink-500);
-			}
-		}
+        .ant-modal-confirm-content {
+            .ant-typography {
+                color: var(--bg-ink-500);
+            }
+        }
 
-		.ant-modal-confirm-btns {
-			button:nth-of-type(1) {
-				background-color: var(--bg-vanilla-300);
-				border: none;
-				color: var(--bg-ink-500);
-			}
-		}
-	}
-}
-
-.facing-issue-btn {
-	margin-top: 20px;
-	width: 100%;
-}
+        .ant-modal-confirm-btns {
+            button:nth-of-type(1) {
+                background-color: var(--bg-vanilla-300);
+                border: none;
+                color: var(--bg-ink-500);
+            }
+        }
+   }  
+}

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -1,15 +1,12 @@
 import './QuerySection.styles.scss';
 
-import { Color } from '@signozhq/design-tokens';
 import { Button, Tabs, Tooltip } from 'antd';
-import PromQLIcon from 'assets/Dashboard/PromQl';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { ENTITY_VERSION_V4 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
 import { QueryBuilder } from 'container/QueryBuilder';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Atom, Play, Terminal } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -51,8 +48,6 @@ function QuerySection({
 
 	const renderChQueryUI = (): JSX.Element => <ChQuerySection />;
 
-	const isDarkMode = useIsDarkMode();
-
 	const renderMetricUI = (): JSX.Element => (
 		<QueryBuilder
 			panelType={panelType}
@@ -61,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'}
 		/>
@@ -118,16 +112,14 @@ function QuerySection({
 				label: (
 					<Tooltip title="PromQL">
 						<Button className="nav-btns">
-							<PromQLIcon
-								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
-							/>
+							<img src="/Icons/promQL.svg" alt="Prom Ql" className="prom-ql-icon" />
 						</Button>
 					</Tooltip>
 				),
 				key: EQueryType.PROM,
 			},
 		],
-		[isDarkMode],
+		[],
 	);
 
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();

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

@@ -147,7 +147,7 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
 				<Col flex="none">
 					<TextToolTip
 						text={t('user_tooltip_more_help')}
-						url="https://signoz.io/docs/userguide/alerts-management/?utm_source=product&utm_medium=create-alert#creating-a-new-alert-in-signoz"
+						url="https://signoz.io/docs/userguide/alerts-management/#create-alert-rules"
 					/>
 				</Col>
 			</Row>

frontend/src/container/FormAlertRules/index.tsx

@@ -11,8 +11,6 @@ import {
 } from 'antd';
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
-import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
-import { alertHelpMessage } from 'components/facingIssueBtn/util';
 import { FeatureKeys } from 'constants/features';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
@@ -140,29 +138,19 @@ 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: {
-					...def.condition,
-					selectedQueryName:
-						queryOptions.length > 0 ? String(queryOptions[0].value) : undefined,
-				},
-			}));
-		}
-	}, [alertDef, currentQuery?.queryType, queryOptions]);
+		setAlertDef((def) => ({
+			...def,
+			condition: {
+				...def.condition,
+				selectedQueryName:
+					queryOptions.length > 0 ? String(queryOptions[0].value) : undefined,
+			},
+		}));
+	}, [currentQuery?.queryType, queryOptions]);
 
 	const onCancelHandler = useCallback(() => {
-		urlQuery.delete(QueryParams.compositeQuery);
-		urlQuery.delete(QueryParams.panelTypes);
-		urlQuery.delete(QueryParams.ruleId);
-		urlQuery.delete(QueryParams.relativeTime);
-		history.replace(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
-	}, [urlQuery]);
+		history.replace(ROUTES.LIST_ALL_ALERT);
+	}, []);
 
 	// onQueryCategoryChange handles changes to query category
 	// in state as well as sets additional defaults
@@ -347,13 +335,8 @@ function FormAlertRules({
 				// invalidate rule in cache
 				ruleCache.invalidateQueries(['ruleId', ruleId]);
 
-				// eslint-disable-next-line sonarjs/no-identical-functions
 				setTimeout(() => {
-					urlQuery.delete(QueryParams.compositeQuery);
-					urlQuery.delete(QueryParams.panelTypes);
-					urlQuery.delete(QueryParams.ruleId);
-					urlQuery.delete(QueryParams.relativeTime);
-					history.replace(`${ROUTES.LIST_ALL_ALERT}?${urlQuery.toString()}`);
+					history.replace(ROUTES.LIST_ALL_ALERT);
 				}, 2000);
 			} else {
 				notifications.error({
@@ -369,13 +352,12 @@ function FormAlertRules({
 		}
 		setLoading(false);
 	}, [
-		isFormValid,
-		memoizedPreparePostData,
-		ruleId,
-		notifications,
 		t,
+		isFormValid,
+		ruleId,
 		ruleCache,
-		urlQuery,
+		memoizedPreparePostData,
+		notifications,
 	]);
 
 	const onSaveHandler = useCallback(async () => {
@@ -500,8 +482,6 @@ function FormAlertRules({
 		alertDef?.broadcastToAll ||
 		(alertDef.preferredChannels && alertDef.preferredChannels.length > 0);
 
-	const isRuleCreated = !ruleId || ruleId === 0;
-
 	return (
 		<>
 			{Element}
@@ -534,7 +514,6 @@ function FormAlertRules({
 							runQuery={handleRunQuery}
 							alertDef={alertDef}
 							panelType={panelType || PANEL_TYPES.TIME_SERIES}
-							key={currentQuery.queryType}
 						/>
 
 						<RuleOptions
@@ -584,22 +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="Need help with this alert?"
-						message={alertHelpMessage(alertDef, ruleId)}
-						onHoverText="Click here to get help with this alert"
-					/>
 				</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,61 +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,
-	tableProcessedDataRef,
+	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(
@@ -73,70 +74,24 @@ function FullView({
 
 	const updatedQuery = useStepInterval(widget?.query);
 
-	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-			return {
-				selectedTime: selectedTime.enum,
-				graphType: getGraphType(widget.panelTypes),
-				query: updatedQuery,
-				globalSelectedInterval: globalSelectedTime,
-				variables: getDashboardVariables(selectedDashboard?.data.variables),
-			};
-		}
-		updatedQuery.builder.queryData[0].pageSize = 10;
-		return {
-			query: updatedQuery,
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: widget?.timePreferance || 'GLOBAL_TIME',
-			globalSelectedInterval: globalSelectedTime,
-			tableParams: {
-				pagination: {
-					offset: 0,
-					limit: updatedQuery.builder.queryData[0].limit || 0,
-				},
-			},
-		};
-	});
-
-	useEffect(() => {
-		setRequestData((prev) => ({
-			...prev,
-			selectedTime: selectedTime.enum,
-		}));
-	}, [selectedTime]);
-
 	const response = useGetQueryRange(
-		requestData,
+		{
+			selectedTime: selectedTime.enum,
+			graphType:
+				widget.panelTypes === PANEL_TYPES.BAR
+					? PANEL_TYPES.TIME_SERIES
+					: widget.panelTypes,
+			query: updatedQuery,
+			globalSelectedInterval: globalSelectedTime,
+			variables: getDashboardVariables(selectedDashboard?.data.variables),
+		},
 		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));
@@ -163,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);
@@ -171,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..." />;
 	}
 
@@ -180,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}
@@ -208,25 +214,47 @@ function FullView({
 				})}
 				ref={fullViewRef}
 			>
-				<GraphContainer
-					style={{
-						height: isListView ? '100%' : '90%',
-					}}
-					isGraphLegendToggleAvailable={canModifyChart}
-				>
-					<PanelWrapper
-						queryResponse={response}
-						widget={widget}
-						setRequestData={setRequestData}
-						isFullViewMode
-						onToggleModelHandler={onToggleModelHandler}
-						setGraphVisibility={setGraphsVisibilityStates}
-						graphVisibility={graphsVisibilityStates}
-						onDragSelect={onDragSelect}
-						tableProcessedDataRef={tableProcessedDataRef}
-					/>
-				</GraphContainer>
+				{chartOptions && (
+					<GraphContainer
+						style={{
+							height: isListView ? '100%' : '90%',
+						}}
+						isGraphLegendToggleAvailable={canModifyChart}
+					>
+						<GridPanelSwitch
+							panelType={widget.panelTypes}
+							data={chartData}
+							options={chartOptions}
+							onClickHandler={onClickHandler}
+							name={name}
+							yAxisUnit={yAxisUnit}
+							onDragSelect={onDragSelect}
+							panelData={response.data?.payload.data.newResult.data.result || []}
+							query={widget.query}
+							ref={fullViewChartRef}
+							thresholds={widget.thresholds}
+							selectedLogFields={widget.selectedLogFields}
+							dataSource={widget.query.builder.queryData[0].dataSource}
+							selectedTracesFields={widget.selectedTracesFields}
+							selectedTime={selectedTime}
+						/>
+					</GraphContainer>
+				)}
 			</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

@@ -2,7 +2,6 @@ import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { UplotProps } from 'components/Uplot/Uplot';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import { Widgets } from 'types/api/dashboard/getAll';
@@ -51,12 +50,13 @@ export interface FullViewProps {
 	fullViewOptions?: boolean;
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	name: string;
-	tableProcessedDataRef: MutableRefObject<RowData[]>;
 	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,13 +6,12 @@ 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';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
 	Dispatch,
@@ -39,14 +38,18 @@ 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,22 +61,17 @@ 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
 	}, []);
 
-	const tableProcessedDataRef = useRef<RowData[]>([]);
-
 	const { setLayouts, selectedDashboard, setSelectedDashboard } = useDashboard();
 
 	const featureResponse = useSelector<AppState, AppReducer['featureResponse']>(
@@ -137,7 +135,7 @@ function WidgetGraphComponent({
 				i: uuid,
 				w: 6,
 				x: 0,
-				h: 6,
+				h: 3,
 				y: 0,
 			},
 		];
@@ -212,7 +210,7 @@ function WidgetGraphComponent({
 				graphVisibilityStates: localStoredVisibilityState,
 			} = getLocalStorageGraphVisibilityState({
 				apiResponse: queryResponse.data.payload.data.result,
-				name: widget.id,
+				name,
 			});
 			setGraphVisibility(localStoredVisibilityState);
 		}
@@ -254,7 +252,7 @@ function WidgetGraphComponent({
 			onBlur={(): void => {
 				setHovered(false);
 			}}
-			id={widget.id}
+			id={name}
 		>
 			<Modal
 				destroyOnClose
@@ -280,13 +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}
-					tableProcessedDataRef={tableProcessedDataRef}
+					parentChartRef={lineChartRef}
+					onDragSelect={onDragSelect}
 				/>
 			</Modal>
 
@@ -304,26 +303,28 @@ function WidgetGraphComponent({
 					headerMenuList={headerMenuList}
 					isWarning={isWarning}
 					isFetchingResponse={isFetchingResponse}
-					tableProcessedDataRef={tableProcessedDataRef}
 				/>
 			</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}
-						tableProcessedDataRef={tableProcessedDataRef}
+						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,48 +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 { isEqual } from 'lodash-es';
+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);
@@ -99,49 +131,15 @@ function GridCardGraph({
 		isVisible &&
 		!isEmptyWidget &&
 		isQueryEnabled &&
-		isEmpty(variablesToGetUpdated);
-
-	const [requestData, setRequestData] = useState<GetQueryResultsProps>(() => {
-		if (widget.panelTypes !== PANEL_TYPES.LIST) {
-			return {
-				selectedTime: widget?.timePreferance,
-				graphType: getGraphType(widget.panelTypes),
-				query: updatedQuery,
-				globalSelectedInterval,
-				variables: getDashboardVariables(variables),
-			};
-		}
-		updatedQuery.builder.queryData[0].pageSize = 10;
-		return {
-			query: updatedQuery,
-			graphType: PANEL_TYPES.LIST,
-			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
-			globalSelectedInterval,
-			tableParams: {
-				pagination: {
-					offset: 0,
-					limit: updatedQuery.builder.queryData[0].limit || 0,
-				},
-			},
-		};
-	});
-
-	useEffect(() => {
-		if (!isEqual(updatedQuery, requestData.query)) {
-			setRequestData((prev) => ({
-				...prev,
-				query: updatedQuery,
-			}));
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [updatedQuery]);
+		widget.panelTypes !== PANEL_TYPES.LIST;
 
 	const queryResponse = useGetQueryRange(
 		{
-			...requestData,
-			variables: getDashboardVariables(variables),
-			selectedTime: widget.timePreferance || 'GLOBAL_TIME',
+			selectedTime: widget?.timePreferance,
+			graphType: getGraphType(widget.panelTypes),
+			query: updatedQuery,
 			globalSelectedInterval,
+			variables: getDashboardVariables(variables),
 		},
 		version || DEFAULT_ENTITY_VERSION,
 		{
@@ -153,7 +151,6 @@ function GridCardGraph({
 				widget?.query,
 				widget?.panelTypes,
 				widget.timePreferance,
-				requestData,
 			],
 			retry(failureCount, error): boolean {
 				if (
@@ -176,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,
@@ -183,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%;
-			}
-		}
 	}
 }
 
@@ -29,7 +23,7 @@
 		.ant-modal-header {
 			background-color: var(--bg-ink-400);
 		}
-	}
+	}	
 }
 
 .lightMode {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -1,46 +1,27 @@
 import './GridCardLayout.styles.scss';
 
 import { PlusOutlined } from '@ant-design/icons';
-import { Flex, Form, Input, Modal, Tooltip, Typography } from 'antd';
-import { useForm } from 'antd/es/form/Form';
-import cx from 'classnames';
-import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
-import { dashboardHelpMessage } from 'components/facingIssueBtn/util';
+import { Tooltip } from 'antd';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryParams } from 'constants/query';
-import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+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 { defaultTo } from 'lodash-es';
 import isEqual from 'lodash-es/isEqual';
-import {
-	FullscreenIcon,
-	GripVertical,
-	MoveDown,
-	MoveUp,
-	Settings,
-	Trash2,
-} from 'lucide-react';
+import { FullscreenIcon } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { sortLayout } from 'providers/Dashboard/util';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
-import { ItemCallback, Layout } from 'react-grid-layout';
+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';
 import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
-import { v4 as uuid } from 'uuid';
 
 import { EditMenuAction, ViewMenuAction } from './config';
 import GridCard from './GridCard';
@@ -59,15 +40,11 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 		selectedDashboard,
 		layouts,
 		setLayouts,
-		panelMap,
-		setPanelMap,
 		setSelectedDashboard,
 		isDashboardLocked,
 	} = useDashboard();
 	const { data } = selectedDashboard || {};
 	const handle = useFullScreenHandle();
-	const { pathname } = useLocation();
-	const dispatch = useDispatch();
 
 	const { widgets, variables } = data || {};
 
@@ -81,30 +58,9 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 
 	const [dashboardLayout, setDashboardLayout] = useState<Layout[]>([]);
 
-	const [isSettingsModalOpen, setIsSettingsModalOpen] = useState<boolean>(false);
-
-	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
-
-	const [currentSelectRowId, setCurrentSelectRowId] = useState<string | null>(
-		null,
-	);
-
-	const [currentPanelMap, setCurrentPanelMap] = useState<
-		Record<string, { widgets: Layout[]; collapsed: boolean }>
-	>({});
-
-	useEffect(() => {
-		setCurrentPanelMap(panelMap);
-	}, [panelMap]);
-
-	const [form] = useForm<{
-		title: string;
-	}>();
-
 	const updateDashboardMutation = useUpdateDashboard();
 
 	const { notifications } = useNotifications();
-	const urlQuery = useUrlQuery();
 
 	let permissions: ComponentTypes[] = ['save_layout', 'add_panel'];
 
@@ -123,7 +79,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 	);
 
 	useEffect(() => {
-		setDashboardLayout(sortLayout(layouts));
+		setDashboardLayout(layouts);
 	}, [layouts]);
 
 	const onSaveHandler = (): void => {
@@ -133,7 +89,6 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 			...selectedDashboard,
 			data: {
 				...selectedDashboard.data,
-				panelMap: { ...currentPanelMap },
 				layout: dashboardLayout.filter((e) => e.i !== PANEL_TYPES.EMPTY_WIDGET),
 			},
 			uuid: selectedDashboard.uuid,
@@ -143,9 +98,8 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 			onSuccess: (updatedDashboard) => {
 				if (updatedDashboard.payload) {
 					if (updatedDashboard.payload.data.layout)
-						setLayouts(sortLayout(updatedDashboard.payload.data.layout));
+						setLayouts(updatedDashboard.payload.data.layout);
 					setSelectedDashboard(updatedDashboard.payload);
-					setPanelMap(updatedDashboard.payload?.data?.panelMap || {});
 				}
 
 				featureResponse.refetch();
@@ -168,28 +122,10 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 			dashboardLayout,
 		);
 		if (!isEqual(filterLayout, filterDashboardLayout)) {
-			const updatedLayout = sortLayout(layout);
-			setDashboardLayout(updatedLayout);
+			setDashboardLayout(layout);
 		}
 	};
 
-	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 &&
@@ -206,335 +142,35 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [dashboardLayout]);
 
-	function handleAddRow(): void {
-		if (!selectedDashboard) return;
-		const id = uuid();
-
-		const newRowWidgetMap: { widgets: Layout[]; collapsed: boolean } = {
-			widgets: [],
-			collapsed: false,
-		};
-		const currentRowIdx = 0;
-		for (let j = currentRowIdx; j < dashboardLayout.length; j++) {
-			if (!currentPanelMap[dashboardLayout[j].i]) {
-				newRowWidgetMap.widgets.push(dashboardLayout[j]);
-			} else {
-				break;
-			}
-		}
-
-		const updatedDashboard: Dashboard = {
-			...selectedDashboard,
-			data: {
-				...selectedDashboard.data,
-				layout: [
-					{
-						i: id,
-						w: 12,
-						minW: 12,
-						minH: 1,
-						maxH: 1,
-						x: 0,
-						h: 1,
-						y: 0,
-					},
-					...dashboardLayout.filter((e) => e.i !== PANEL_TYPES.EMPTY_WIDGET),
-				],
-				panelMap: { ...currentPanelMap, [id]: newRowWidgetMap },
-				widgets: [
-					...(selectedDashboard.data.widgets || []),
-					{
-						id,
-						title: 'Sample Row',
-						description: '',
-						panelTypes: PANEL_GROUP_TYPES.ROW,
-					},
-				],
-			},
-			uuid: selectedDashboard.uuid,
-		};
-
-		updateDashboardMutation.mutate(updatedDashboard, {
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			onSuccess: (updatedDashboard) => {
-				if (updatedDashboard.payload) {
-					if (updatedDashboard.payload.data.layout)
-						setLayouts(sortLayout(updatedDashboard.payload.data.layout));
-					setSelectedDashboard(updatedDashboard.payload);
-					setPanelMap(updatedDashboard.payload?.data?.panelMap || {});
-				}
-
-				featureResponse.refetch();
-			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			onError: () => {
-				notifications.error({
-					message: SOMETHING_WENT_WRONG,
-				});
-			},
-		});
-	}
-
-	const handleRowSettingsClick = (id: string): void => {
-		setIsSettingsModalOpen(true);
-		setCurrentSelectRowId(id);
-	};
-
-	const onSettingsModalSubmit = (): void => {
-		const newTitle = form.getFieldValue('title');
-		if (!selectedDashboard) return;
-
-		if (!currentSelectRowId) return;
-
-		const currentWidget = selectedDashboard?.data?.widgets?.find(
-			(e) => e.id === currentSelectRowId,
-		);
-
-		if (!currentWidget) return;
-
-		currentWidget.title = newTitle;
-		const updatedWidgets = selectedDashboard?.data?.widgets?.filter(
-			(e) => e.id !== currentSelectRowId,
-		);
-
-		updatedWidgets?.push(currentWidget);
-
-		const updatedSelectedDashboard: Dashboard = {
-			...selectedDashboard,
-			data: {
-				...selectedDashboard.data,
-				widgets: updatedWidgets,
-			},
-			uuid: selectedDashboard.uuid,
-		};
-
-		updateDashboardMutation.mutateAsync(updatedSelectedDashboard, {
-			onSuccess: (updatedDashboard) => {
-				if (setLayouts) setLayouts(updatedDashboard.payload?.data?.layout || []);
-				if (setSelectedDashboard && updatedDashboard.payload) {
-					setSelectedDashboard(updatedDashboard.payload);
-				}
-				if (setPanelMap)
-					setPanelMap(updatedDashboard.payload?.data?.panelMap || {});
-				form.setFieldValue('title', '');
-				setIsSettingsModalOpen(false);
-				setCurrentSelectRowId(null);
-				featureResponse.refetch();
-			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			onError: () => {
-				notifications.error({
-					message: SOMETHING_WENT_WRONG,
-				});
-			},
-		});
-	};
-
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const handleRowCollapse = (id: string): void => {
-		if (!selectedDashboard) return;
-		const rowProperties = { ...currentPanelMap[id] };
-		const updatedPanelMap = { ...currentPanelMap };
-
-		let updatedDashboardLayout = [...dashboardLayout];
-		if (rowProperties.collapsed === true) {
-			rowProperties.collapsed = false;
-			const widgetsInsideTheRow = rowProperties.widgets;
-			let maxY = 0;
-			widgetsInsideTheRow.forEach((w) => {
-				maxY = Math.max(maxY, w.y + w.h);
-			});
-			const currentRowWidget = dashboardLayout.find((w) => w.i === id);
-			if (currentRowWidget && widgetsInsideTheRow.length) {
-				maxY -= currentRowWidget.h + currentRowWidget.y;
-			}
-
-			const idxCurrentRow = dashboardLayout.findIndex((w) => w.i === id);
-
-			for (let j = idxCurrentRow + 1; j < dashboardLayout.length; j++) {
-				updatedDashboardLayout[j].y += maxY;
-				if (updatedPanelMap[updatedDashboardLayout[j].i]) {
-					updatedPanelMap[updatedDashboardLayout[j].i].widgets = updatedPanelMap[
-						updatedDashboardLayout[j].i
-						// eslint-disable-next-line @typescript-eslint/no-loop-func
-					].widgets.map((w) => ({
-						...w,
-						y: w.y + maxY,
-					}));
-				}
-			}
-			updatedDashboardLayout = [...updatedDashboardLayout, ...widgetsInsideTheRow];
-		} else {
-			rowProperties.collapsed = true;
-			const currentIdx = dashboardLayout.findIndex((w) => w.i === id);
-
-			let widgetsInsideTheRow: Layout[] = [];
-			let isPanelMapUpdated = false;
-			for (let j = currentIdx + 1; j < dashboardLayout.length; j++) {
-				if (currentPanelMap[dashboardLayout[j].i]) {
-					rowProperties.widgets = widgetsInsideTheRow;
-					widgetsInsideTheRow = [];
-					isPanelMapUpdated = true;
-					break;
-				} else {
-					widgetsInsideTheRow.push(dashboardLayout[j]);
-				}
-			}
-			if (!isPanelMapUpdated) {
-				rowProperties.widgets = widgetsInsideTheRow;
-			}
-			let maxY = 0;
-			widgetsInsideTheRow.forEach((w) => {
-				maxY = Math.max(maxY, w.y + w.h);
-			});
-			const currentRowWidget = dashboardLayout[currentIdx];
-			if (currentRowWidget && widgetsInsideTheRow.length) {
-				maxY -= currentRowWidget.h + currentRowWidget.y;
-			}
-			for (let j = currentIdx + 1; j < updatedDashboardLayout.length; j++) {
-				updatedDashboardLayout[j].y += maxY;
-				if (updatedPanelMap[updatedDashboardLayout[j].i]) {
-					updatedPanelMap[updatedDashboardLayout[j].i].widgets = updatedPanelMap[
-						updatedDashboardLayout[j].i
-						// eslint-disable-next-line @typescript-eslint/no-loop-func
-					].widgets.map((w) => ({
-						...w,
-						y: w.y + maxY,
-					}));
-				}
-			}
-
-			updatedDashboardLayout = updatedDashboardLayout.filter(
-				(widget) => !rowProperties.widgets.some((w: Layout) => w.i === widget.i),
-			);
-		}
-		setCurrentPanelMap((prev) => ({
-			...prev,
-			...updatedPanelMap,
-			[id]: {
-				...rowProperties,
-			},
-		}));
-
-		setDashboardLayout(sortLayout(updatedDashboardLayout));
-	};
-
-	const handleDragStop: ItemCallback = (_, oldItem, newItem): void => {
-		if (currentPanelMap[oldItem.i]) {
-			const differenceY = newItem.y - oldItem.y;
-			const widgetsInsideRow = currentPanelMap[oldItem.i].widgets.map((w) => ({
-				...w,
-				y: w.y + differenceY,
-			}));
-			setCurrentPanelMap((prev) => ({
-				...prev,
-				[oldItem.i]: {
-					...prev[oldItem.i],
-					widgets: widgetsInsideRow,
-				},
-			}));
-		}
-	};
-
-	const handleRowDelete = (): void => {
-		if (!selectedDashboard) return;
-
-		if (!currentSelectRowId) return;
-
-		const updatedWidgets = selectedDashboard?.data?.widgets?.filter(
-			(e) => e.id !== currentSelectRowId,
-		);
-
-		const updatedLayout =
-			selectedDashboard.data.layout?.filter((e) => e.i !== currentSelectRowId) ||
-			[];
-
-		const updatedPanelMap = { ...currentPanelMap };
-		delete updatedPanelMap[currentSelectRowId];
-
-		const updatedSelectedDashboard: Dashboard = {
-			...selectedDashboard,
-			data: {
-				...selectedDashboard.data,
-				widgets: updatedWidgets,
-				layout: updatedLayout,
-				panelMap: updatedPanelMap,
-			},
-			uuid: selectedDashboard.uuid,
-		};
-
-		updateDashboardMutation.mutateAsync(updatedSelectedDashboard, {
-			onSuccess: (updatedDashboard) => {
-				if (setLayouts) setLayouts(updatedDashboard.payload?.data?.layout || []);
-				if (setSelectedDashboard && updatedDashboard.payload) {
-					setSelectedDashboard(updatedDashboard.payload);
-				}
-				if (setPanelMap)
-					setPanelMap(updatedDashboard.payload?.data?.panelMap || {});
-				setIsDeleteModalOpen(false);
-				setCurrentSelectRowId(null);
-				featureResponse.refetch();
-			},
-			// eslint-disable-next-line sonarjs/no-identical-functions
-			onError: () => {
-				notifications.error({
-					message: SOMETHING_WENT_WRONG,
-				});
-			},
-		});
-	};
 	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="Need help with this dashboard?"
-					message={dashboardHelpMessage(data, selectedDashboard)}
-					onHoverText="Click here to get help for this dashboard"
-				/>
-				<ButtonContainer>
-					<Tooltip title="Open in Full Screen">
-						<Button
-							className="periscope-btn"
-							loading={updateDashboardMutation.isLoading}
-							onClick={handle.enter}
-							icon={<FullscreenIcon size={16} />}
-							disabled={updateDashboardMutation.isLoading}
-						/>
-					</Tooltip>
+			<ButtonContainer>
+				<Tooltip title="Open in Full Screen">
+					<Button
+						className="periscope-btn"
+						loading={updateDashboardMutation.isLoading}
+						onClick={handle.enter}
+						icon={<FullscreenIcon size={16} />}
+						disabled={updateDashboardMutation.isLoading}
+					/>
+				</Tooltip>
 
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="periscope-btn"
-							onClick={onAddPanelHandler}
-							icon={<PlusOutlined />}
-							data-testid="add-panel"
-						>
-							{t('dashboard:add_panel')}
-						</Button>
-					)}
-					{!isDashboardLocked && addPanelPermission && (
-						<Button
-							className="periscope-btn"
-							onClick={(): void => handleAddRow()}
-							icon={<PlusOutlined />}
-							data-testid="add-row"
-						>
-							{t('dashboard:add_row')}
-						</Button>
-					)}
-				</ButtonContainer>
-			</Flex>
+				{!isDashboardLocked && addPanelPermission && (
+					<Button
+						className="periscope-btn"
+						onClick={onAddPanelHandler}
+						icon={<PlusOutlined />}
+						data-testid="add-panel"
+					>
+						{t('dashboard:add_panel')}
+					</Button>
+				)}
+			</ButtonContainer>
 
 			<FullScreen handle={handle} className="fullscreen-grid-container">
 				<ReactGridLayout
 					cols={12}
-					rowHeight={45}
+					rowHeight={100}
 					autoSize
 					width={100}
 					useCSSTransforms
@@ -543,7 +179,6 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 					isResizable={!isDashboardLocked && addPanelPermission}
 					allowOverlap={false}
 					onLayoutChange={handleLayoutChange}
-					onDragStop={handleDragStop}
 					draggableHandle=".drag-handle"
 					layout={dashboardLayout}
 					style={{ backgroundColor: isDarkMode ? '' : themeColors.snowWhite }}
@@ -552,58 +187,6 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 						const { i: id } = layout;
 						const currentWidget = (widgets || [])?.find((e) => e.id === id);
 
-						if (currentWidget?.panelTypes === PANEL_GROUP_TYPES.ROW) {
-							const rowWidgetProperties = currentPanelMap[id] || {};
-							return (
-								<CardContainer
-									className="row-card"
-									isDarkMode={isDarkMode}
-									key={id}
-									data-grid={JSON.stringify(currentWidget)}
-								>
-									<div className={cx('row-panel')}>
-										<div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
-											<Button
-												disabled={updateDashboardMutation.isLoading}
-												icon={
-													rowWidgetProperties.collapsed ? (
-														<MoveDown size={14} />
-													) : (
-														<MoveUp size={14} />
-													)
-												}
-												type="text"
-												onClick={(): void => handleRowCollapse(id)}
-											/>
-											<Typography.Text>{currentWidget.title}</Typography.Text>
-											<Button
-												icon={<Settings size={14} />}
-												type="text"
-												onClick={(): void => handleRowSettingsClick(id)}
-											/>
-										</div>
-										{rowWidgetProperties.collapsed && (
-											<Button
-												type="text"
-												icon={<GripVertical size={14} />}
-												className="drag-handle"
-											/>
-										)}
-										{!rowWidgetProperties.collapsed && (
-											<Button
-												type="text"
-												icon={<Trash2 size={14} />}
-												onClick={(): void => {
-													setIsDeleteModalOpen(true);
-													setCurrentSelectRowId(id);
-												}}
-											/>
-										)}
-									</div>
-								</CardContainer>
-							);
-						}
-
 						return (
 							<CardContainer
 								className={isDashboardLocked ? '' : 'enable-resize'}
@@ -616,57 +199,18 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 									$panelType={currentWidget?.panelTypes || PANEL_TYPES.TIME_SERIES}
 								>
 									<GridCard
-										widget={(currentWidget as Widgets) || ({ id, query: {} } as Widgets)}
+										widget={currentWidget || ({ id, query: {} } as Widgets)}
+										name={currentWidget?.id || ''}
 										headerMenuList={widgetActions}
 										variables={variables}
+										fillSpans={currentWidget?.fillSpans}
 										version={selectedDashboard?.data?.version}
-										onDragSelect={onDragSelect}
 									/>
 								</Card>
 							</CardContainer>
 						);
 					})}
 				</ReactGridLayout>
-				<Modal
-					open={isSettingsModalOpen}
-					title="Row Options"
-					destroyOnClose
-					footer={null}
-					onCancel={(): void => {
-						setIsSettingsModalOpen(false);
-						setCurrentSelectRowId(null);
-					}}
-				>
-					<Form form={form} onFinish={onSettingsModalSubmit} requiredMark>
-						<Form.Item required name={['title']}>
-							<Input
-								placeholder="Enter row name here..."
-								defaultValue={defaultTo(
-									widgets?.find((widget) => widget.id === currentSelectRowId)
-										?.title as string,
-									'Sample Title',
-								)}
-							/>
-						</Form.Item>
-						<Form.Item>
-							<Button type="primary" htmlType="submit">
-								Apply Changes
-							</Button>
-						</Form.Item>
-					</Form>
-				</Modal>
-				<Modal
-					open={isDeleteModalOpen}
-					title="Delete Row"
-					destroyOnClose
-					onCancel={(): void => {
-						setIsDeleteModalOpen(false);
-						setCurrentSelectRowId(null);
-					}}
-					onOk={(): void => handleRowDelete()}
-				>
-					<Typography.Text>Are you sure you want to delete this row</Typography.Text>
-				</Modal>
 			</FullScreen>
 		</>
 	);

frontend/src/container/GridCardLayout/WidgetHeader/contants.ts

@@ -4,7 +4,6 @@ export enum MenuItemKeys {
 	Delete = 'delete',
 	Clone = 'clone',
 	CreateAlerts = 'createAlerts',
-	Download = 'download',
 }
 
 export const MENUITEM_KEYS_VS_LABELS = {
@@ -13,5 +12,4 @@ export const MENUITEM_KEYS_VS_LABELS = {
 	[MenuItemKeys.Delete]: 'Delete',
 	[MenuItemKeys.Clone]: 'Clone',
 	[MenuItemKeys.CreateAlerts]: 'Create Alerts',
-	[MenuItemKeys.Download]: 'Download as CSV',
 };

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

@@ -2,7 +2,6 @@ import './WidgetHeader.styles.scss';
 
 import {
 	AlertOutlined,
-	CloudDownloadOutlined,
 	CopyOutlined,
 	DeleteOutlined,
 	EditFilled,
@@ -18,9 +17,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
 import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
-import { RowData } from 'lib/query/createTableColumnsFromQuery';
-import { isEmpty } from 'lodash-es';
-import { unparse } from 'papaparse';
 import { ReactNode, useCallback, useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { useSelector } from 'react-redux';
@@ -50,7 +46,6 @@ interface IWidgetHeaderProps {
 	headerMenuList?: MenuItemKeys[];
 	isWarning: boolean;
 	isFetchingResponse: boolean;
-	tableProcessedDataRef: React.MutableRefObject<RowData[]>;
 }
 
 function WidgetHeader({
@@ -66,7 +61,6 @@ function WidgetHeader({
 	headerMenuList,
 	isWarning,
 	isFetchingResponse,
-	tableProcessedDataRef,
 }: IWidgetHeaderProps): JSX.Element | null {
 	const onEditHandler = useCallback((): void => {
 		const widgetId = widget.id;
@@ -81,17 +75,6 @@ function WidgetHeader({
 
 	const onCreateAlertsHandler = useCreateAlerts(widget);
 
-	const onDownloadHandler = useCallback((): void => {
-		const csv = unparse(tableProcessedDataRef.current);
-		const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const csvUrl = URL.createObjectURL(csvBlob);
-		const downloadLink = document.createElement('a');
-		downloadLink.href = csvUrl;
-		downloadLink.download = `${!isEmpty(title) ? title : 'table-panel'}.csv`;
-		downloadLink.click();
-		downloadLink.remove();
-	}, [tableProcessedDataRef, title]);
-
 	const keyMethodMapping = useMemo(
 		() => ({
 			[MenuItemKeys.View]: onView,
@@ -99,16 +82,8 @@ function WidgetHeader({
 			[MenuItemKeys.Delete]: onDelete,
 			[MenuItemKeys.Clone]: onClone,
 			[MenuItemKeys.CreateAlerts]: onCreateAlertsHandler,
-			[MenuItemKeys.Download]: onDownloadHandler,
 		}),
-		[
-			onView,
-			onEditHandler,
-			onDelete,
-			onClone,
-			onCreateAlertsHandler,
-			onDownloadHandler,
-		],
+		[onDelete, onEditHandler, onView, onClone, onCreateAlertsHandler],
 	);
 
 	const onMenuItemSelectHandler: MenuProps['onClick'] = useCallback(
@@ -153,13 +128,6 @@ function WidgetHeader({
 				isVisible: headerMenuList?.includes(MenuItemKeys.Clone) || false,
 				disabled: !editWidget,
 			},
-			{
-				key: MenuItemKeys.Download,
-				icon: <CloudDownloadOutlined />,
-				label: MENUITEM_KEYS_VS_LABELS[MenuItemKeys.Download],
-				isVisible: widget.panelTypes === PANEL_TYPES.TABLE,
-				disabled: false,
-			},
 			{
 				key: MenuItemKeys.Delete,
 				icon: <DeleteOutlined />,
@@ -176,13 +144,7 @@ function WidgetHeader({
 				disabled: false,
 			},
 		],
-		[
-			headerMenuList,
-			queryResponse.isFetching,
-			editWidget,
-			deleteWidget,
-			widget.panelTypes,
-		],
+		[headerMenuList, queryResponse.isFetching, editWidget, deleteWidget],
 	);
 
 	const updatedMenuList = useMemo(() => generateMenuList(actions), [actions]);

frontend/src/container/GridCardLayout/WidgetHeader/utils.ts

@@ -19,5 +19,4 @@ export const isTWidgetOptions = (value: string): value is MenuItemKeys =>
 	value === MenuItemKeys.Edit ||
 	value === MenuItemKeys.Delete ||
 	value === MenuItemKeys.Clone ||
-	value === MenuItemKeys.CreateAlerts ||
-	value === MenuItemKeys.Download;
+	value === MenuItemKeys.CreateAlerts;

frontend/src/container/GridCardLayout/config.ts

@@ -16,6 +16,6 @@ export const EMPTY_WIDGET_LAYOUT = {
 	i: PANEL_TYPES.EMPTY_WIDGET,
 	w: 6,
 	x: 0,
-	h: 6,
+	h: 3,
 	y: 0,
 };

frontend/src/container/GridCardLayout/styles.ts

@@ -29,18 +29,6 @@ interface Props {
 export const CardContainer = styled.div<Props>`
 	overflow: auto;
 
-	&.row-card {
-		.row-panel {
-			height: 100%;
-			display: flex;
-			justify-content: space-between;
-			background: ${({ isDarkMode }): string =>
-				isDarkMode ? 'var(--bg-ink-400)' : 'var(--bg-vanilla-300)'};
-			align-items: center;
-			overflow: hidden;
-		}
-	}
-
 	&.enable-resize {
 		:hover {
 			.react-resizable-handle {

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]