chore(frontend): 🔧 support ARM and copy yarnrc in Dockerfile (#2119)

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

Signed-off-by: Prashant Shahi <prashant@signoz.io>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
(cherry picked from commit 13f9922c53)
Signed-off-by: Prashant Shahi <prashant@signoz.io>

.github/CODEOWNERS

@@ -4,4 +4,4 @@
 * @ankitnayan
 /frontend/ @palashgdev @pranshuchittora
 /deploy/ @prashant-shahi
-**/query-service/ @srikanthccv
+/pkg/query-service/ @srikanthccv

.github/config.yml

@@ -17,7 +17,7 @@ newPRWelcomeComment: >
 # Comment to be posted to on pull requests merged by a first time user
 firstPRMergeComment: >
   Congrats on merging your first pull request!
-
+  
   ![minion-party](https://i.imgur.com/Xlg59lP.gif)
 
   We here at SigNoz are proud of you! 🥳

.github/workflows/e2e-k3s.yaml

@@ -57,7 +57,7 @@ jobs:
             --set frontend.service.type=LoadBalancer \
             --set queryService.image.tag=$DOCKER_TAG \
             --set frontend.image.tag=$DOCKER_TAG
-
+          
           # get pods, services and the container images
           kubectl get pods -n platform
           kubectl get svc -n platform

.github/workflows/pr_verify_linked_issue.yml

@@ -17,3 +17,4 @@ jobs:
         uses: hattan/verify-linked-issue-action@v1.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      

.github/workflows/repo-stats.yml

@@ -0,0 +1,25 @@
+on:
+  schedule:
+    # Run this once per day, towards the end of the day for keeping the most
+    # recent data point most meaningful (hours are interpreted in UTC).
+    - cron: "0 8 * * *"
+  workflow_dispatch: # Allow for running this manually.
+
+jobs:
+  j1:
+    name: repostats
+    runs-on: ubuntu-latest
+    steps:
+      - name: run-ghrs
+        uses: jgehrcke/github-repo-stats@v1.1.0
+        with:
+          # Define the stats repository (the repo to fetch
+          # stats for and to generate the report for).
+          # Remove the parameter when the stats repository
+          # and the data repository are the same.
+          repository: signoz/signoz
+          # Set a GitHub API token that can read the stats
+          # repository, and that can push to the data
+          # repository (which this workflow file lives in),
+          # to store data and the report files.
+          ghtoken: ${{ github.token }}

.github/workflows/sonar.yml

@@ -24,3 +24,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+      

.gitignore

@@ -52,6 +52,4 @@ ee/query-service/tests/test-deploy/data/
 *.db
 /deploy/docker/clickhouse-setup/data/
 /deploy/docker-swarm/clickhouse-setup/data/
-bin/
-
-*/query-service/queries.active
+bin/

Makefile

@@ -138,4 +138,3 @@ clear-swarm-data:
 
 test:
 	go test ./pkg/query-service/app/metrics/...
-	go test ./pkg/query-service/app/...

README.md

@@ -23,7 +23,7 @@
 
 ##
 
-SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications. With SigNoz, you can:
+SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications. SigNoz uses distributed tracing to gain visibility into your software stack.
 
 👉 Visualise Metrics, Traces and Logs in a single pane of glass
 
@@ -144,8 +144,6 @@ Moreover, SigNoz has few more advanced features wrt Jaeger:
 - SigNoz Logs management are based on ClickHouse, a columnar OLAP datastore which makes aggregate log analytics queries much more efficient
 - 50% lower resource requirement compared to Elastic during ingestion
 
-We have published benchmarks comparing Elastic with SigNoz. Check it out [here](https://signoz.io/blog/logs-performance-benchmark/?utm_source=github-readme&utm_medium=logs-benchmark)
-
 <p>&nbsp  </p>
 
 ### SigNoz vs Loki
@@ -154,8 +152,6 @@ We have published benchmarks comparing Elastic with SigNoz. Check it out [here](
 - SigNoz supports indexes over high cardinality data and has no limitations on the number of indexes, while Loki reaches max streams with a few indexes added to it.
 - Searching over a huge volume of data is difficult and slow in Loki compared to SigNoz
 
-We have published benchmarks comparing Loki with SigNoz. Check it out [here](https://signoz.io/blog/logs-performance-benchmark/?utm_source=github-readme&utm_medium=logs-benchmark)
-
 <br /><br />
 
 <img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributors.svg" width="50px" />

deploy/README.md

@@ -27,6 +27,12 @@ For x86 chip (amd):
 docker-compose -f docker/clickhouse-setup/docker-compose.yaml up -d
 ```
 
+For Mac with Apple chip (arm):
+
+```sh
+docker-compose -f docker/clickhouse-setup/docker-compose.arm.yaml up -d
+```
+
 Open http://localhost:3301 in your favourite browser. In couple of minutes, you should see
 the data generated from hotrod in SigNoz UI.
 

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

@@ -137,7 +137,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.17.0
+    image: signoz/query-service:0.14.0
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -156,7 +156,7 @@ services:
       - TELEMETRY_ENABLED=true
       - DEPLOYMENT_TYPE=docker-swarm
     healthcheck:
-      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/health"]
+      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/version"]
       interval: 30s
       timeout: 5s
       retries: 3
@@ -166,7 +166,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:0.17.0
+    image: signoz/frontend:0.14.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -179,7 +179,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.66.6
+    image: signoz/signoz-otel-collector:0.66.2
     command: ["--config=/etc/otel-collector-config.yaml"]
     user: root # required for reading docker container logs
     volumes:
@@ -188,7 +188,6 @@ services:
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}},dockerswarm.service.name={{.Service.Name}},dockerswarm.task.name={{.Task.Name}}
       - DOCKER_MULTI_NODE_CLUSTER=false
-      - LOW_CARDINAL_EXCEPTION_GROUPING=false
     ports:
       # - "1777:1777"     # pprof extension
       - "4317:4317"     # OTLP gRPC receiver
@@ -208,7 +207,7 @@ services:
     <<: *clickhouse-depend
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:0.66.6
+    image: signoz/signoz-otel-collector:0.66.2
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

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

@@ -110,7 +110,6 @@ exporters:
   clickhousetraces:
     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/?database=signoz_metrics
     resource_to_telemetry_conversion:

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

@@ -41,7 +41,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: otel-collector
-    image: signoz/signoz-otel-collector:0.66.6
+    image: signoz/signoz-otel-collector:0.66.2
     command: ["--config=/etc/otel-collector-config.yaml"]
     # user: root # required for reading docker container logs
     volumes:
@@ -67,7 +67,7 @@ services:
 
   otel-collector-metrics:
     container_name: otel-collector-metrics
-    image: signoz/signoz-otel-collector:0.66.6
+    image: signoz/signoz-otel-collector:0.66.2
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml

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

@@ -28,7 +28,7 @@ services:
       - "8080:8080"
     restart: on-failure
     healthcheck:
-      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/health"]
+      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/version"]
       interval: 30s
       timeout: 5s
       retries: 3

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

@@ -114,7 +114,7 @@ services:
   #   volumes:
   #     - ./clickhouse-config.xml:/etc/clickhouse-server/config.xml
   #     - ./clickhouse-users.xml:/etc/clickhouse-server/users.xml
-  #     - ./custom-function.xml:/etc/clickhouse-server/custom-function.xml
+  #    - ./custom-function.xml:/etc/clickhouse-server/custom-function.xml
   #     - ./clickhouse-cluster.xml:/etc/clickhouse-server/config.d/cluster.xml
   #     # - ./clickhouse-storage.xml:/etc/clickhouse-server/config.d/storage.xml
   #     - ./data/clickhouse-2/:/var/lib/clickhouse/
@@ -132,7 +132,7 @@ services:
   #   volumes:
   #     - ./clickhouse-config.xml:/etc/clickhouse-server/config.xml
   #     - ./clickhouse-users.xml:/etc/clickhouse-server/users.xml
-  #     - ./custom-function.xml:/etc/clickhouse-server/custom-function.xml
+  #    - ./custom-function.xml:/etc/clickhouse-server/custom-function.xml
   #     - ./clickhouse-cluster.xml:/etc/clickhouse-server/config.d/cluster.xml
   #     # - ./clickhouse-storage.xml:/etc/clickhouse-server/config.d/storage.xml
   #     - ./data/clickhouse-3/:/var/lib/clickhouse/
@@ -153,7 +153,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.17.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.14.0}
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
@@ -174,14 +174,14 @@ services:
       - DEPLOYMENT_TYPE=docker-standalone-amd
     restart: on-failure
     healthcheck:
-      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/health"]
+      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/version"]
       interval: 30s
       timeout: 5s
       retries: 3
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.17.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.14.0}
     container_name: frontend
     restart: on-failure
     depends_on:
@@ -193,7 +193,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.6}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.2}
     command: ["--config=/etc/otel-collector-config.yaml"]
     user: root # required for reading docker container logs
     volumes:
@@ -202,7 +202,6 @@ services:
     environment:
       - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
       - DOCKER_MULTI_NODE_CLUSTER=false
-      - LOW_CARDINAL_EXCEPTION_GROUPING=false
     ports:
       # - "1777:1777"     # pprof extension
       - "4317:4317"     # OTLP gRPC receiver
@@ -219,7 +218,7 @@ services:
     <<: *clickhouse-depend
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.6}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.2}
     command: ["--config=/etc/otel-collector-metrics-config.yaml"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
@@ -232,15 +231,15 @@ services:
     <<: *clickhouse-depend
 
   hotrod:
-    image: jaegertracing/example-hotrod:1.30
-    container_name: hotrod
-    logging:
-      options:
-        max-size: 50m
-        max-file: "3"
-    command: ["all"]
-    environment:
-      - JAEGER_ENDPOINT=http://otel-collector:14268/api/traces
+   image: jaegertracing/example-hotrod:1.30
+   container_name: hotrod
+   logging:
+     options:
+       max-size: 50m
+       max-file: "3"
+   command: ["all"]
+   environment:
+     - JAEGER_ENDPOINT=http://otel-collector:14268/api/traces
 
   load-hotrod:
     image: "grubykarol/locust:1.2.3-python3.9-alpine3.12"

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

@@ -119,7 +119,6 @@ exporters:
   clickhousetraces:
     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/?database=signoz_metrics
     resource_to_telemetry_conversion:

deploy/install.sh

@@ -51,7 +51,7 @@ check_os() {
     os_name="$(cat /etc/*-release | awk -F= '$1 == "NAME" { gsub(/"/, ""); print $2; exit }')"
 
     case "$os_name" in
-        Ubuntu*|Pop!_OS)
+        Ubuntu*)
             desired_os=1
             os="ubuntu"
             package_manager="apt-get"
@@ -81,11 +81,6 @@ check_os() {
             os="centos"
             package_manager="yum"
             ;;
-        Rocky*)
-            desired_os=1
-            os="centos"
-            package_manager="yum"
-            ;;
         SLES*)
             desired_os=1
             os="sles"
@@ -228,7 +223,7 @@ wait_for_containers_start() {
 
     # The while loop is important because for-loops don't work for dynamic values
     while [[ $timeout -gt 0 ]]; do
-        status_code="$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:3301/api/v1/health?live=1" || true)"
+        status_code="$(curl -s -o /dev/null -w "%{http_code}" http://localhost:3301/api/v1/services/list || true)"
         if [[ status_code -eq 200 ]]; then
             break
         else
@@ -516,15 +511,13 @@ else
     echo ""
     echo -e "🟢 Your frontend is running on http://localhost:3301"
     echo ""
-    echo "ℹ️  By default, retention period is set to 7 days for logs and traces, and 30 days for metrics." 
-    echo -e "To change this, navigate to the General tab on the Settings page of SigNoz UI. For more details, refer to https://signoz.io/docs/userguide/retention-period \n"
 
     echo "ℹ️  To bring down SigNoz and clean volumes : $sudo_cmd docker-compose -f ./docker/clickhouse-setup/docker-compose.yaml down -v"
 
     echo ""
     echo "+++++++++++++++++++++++++++++++++++++++++++++++++"
     echo ""
-    echo "👉 Need help in Getting Started?"
+    echo "👉 Need help Getting Started?"
     echo -e "Join us on Slack https://signoz.io/slack"
     echo ""
     echo -e "\n📨 Please share your email to receive support & updates about SigNoz!"

ee/query-service/Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.18-buster AS builder
+FROM golang:1.17-buster AS builder
 
 # LD_FLAGS is passed as argument from Makefile. It will be empty, if no argument passed
 ARG LD_FLAGS

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

@@ -9,7 +9,6 @@ import (
 	"go.signoz.io/signoz/ee/query-service/license"
 	baseapp "go.signoz.io/signoz/pkg/query-service/app"
 	baseint "go.signoz.io/signoz/pkg/query-service/interfaces"
-	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	rules "go.signoz.io/signoz/pkg/query-service/rules"
 	"go.signoz.io/signoz/pkg/query-service/version"
 )
@@ -69,75 +68,64 @@ func (ah *APIHandler) CheckFeature(f string) bool {
 }
 
 // RegisterRoutes registers routes for this handler on the given router
-func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddleware) {
+func (ah *APIHandler) RegisterRoutes(router *mux.Router) {
 	// note: add ee override methods first
 
 	// routes available only in ee version
 	router.HandleFunc("/api/v1/licenses",
-		am.AdminAccess(ah.listLicenses)).
+		baseapp.AdminAccess(ah.listLicenses)).
 		Methods(http.MethodGet)
 
 	router.HandleFunc("/api/v1/licenses",
-		am.AdminAccess(ah.applyLicense)).
+		baseapp.AdminAccess(ah.applyLicense)).
 		Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v1/featureFlags",
-		am.OpenAccess(ah.getFeatureFlags)).
+		baseapp.OpenAccess(ah.getFeatureFlags)).
 		Methods(http.MethodGet)
 
 	router.HandleFunc("/api/v1/loginPrecheck",
-		am.OpenAccess(ah.precheckLogin)).
+		baseapp.OpenAccess(ah.precheckLogin)).
 		Methods(http.MethodGet)
 
 	// paid plans specific routes
 	router.HandleFunc("/api/v1/complete/saml",
-		am.OpenAccess(ah.receiveSAML)).
+		baseapp.OpenAccess(ah.receiveSAML)).
 		Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v1/complete/google",
-		am.OpenAccess(ah.receiveGoogleAuth)).
+		baseapp.OpenAccess(ah.receiveGoogleAuth)).
 		Methods(http.MethodGet)
-
+		
 	router.HandleFunc("/api/v1/orgs/{orgId}/domains",
-		am.AdminAccess(ah.listDomainsByOrg)).
+		baseapp.AdminAccess(ah.listDomainsByOrg)).
 		Methods(http.MethodGet)
 
 	router.HandleFunc("/api/v1/domains",
-		am.AdminAccess(ah.postDomain)).
+		baseapp.AdminAccess(ah.postDomain)).
 		Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v1/domains/{id}",
-		am.AdminAccess(ah.putDomain)).
+		baseapp.AdminAccess(ah.putDomain)).
 		Methods(http.MethodPut)
 
 	router.HandleFunc("/api/v1/domains/{id}",
-		am.AdminAccess(ah.deleteDomain)).
+		baseapp.AdminAccess(ah.deleteDomain)).
 		Methods(http.MethodDelete)
 
 	// base overrides
-	router.HandleFunc("/api/v1/version", am.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/invite/{token}", am.OpenAccess(ah.getInvite)).Methods(http.MethodGet)
-	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)
+	router.HandleFunc("/api/v1/version", baseapp.OpenAccess(ah.getVersion)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/invite/{token}", baseapp.OpenAccess(ah.getInvite)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/register", baseapp.OpenAccess(ah.registerUser)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/login", baseapp.OpenAccess(ah.loginUser)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/traces/{traceId}", baseapp.ViewAccess(ah.searchTraces)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v2/metrics/query_range", baseapp.ViewAccess(ah.queryRangeMetricsV2)).Methods(http.MethodPost)
 
-	// PAT APIs
-	router.HandleFunc("/api/v1/pat", am.OpenAccess(ah.createPAT)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v1/pat", am.OpenAccess(ah.getPATs)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/pat/{id}", am.OpenAccess(ah.deletePAT)).Methods(http.MethodDelete)
-
-	ah.APIHandler.RegisterRoutes(router, am)
+	ah.APIHandler.RegisterRoutes(router)
 
 }
 
 func (ah *APIHandler) getVersion(w http.ResponseWriter, r *http.Request) {
 	version := version.GetVersion()
-	versionResponse := basemodel.GetVersionResponse{
-		Version:        version,
-		EE:             "Y",
-		SetupCompleted: ah.SetupCompleted,
-	}
-
-	ah.WriteJSON(w, r, versionResponse)
+	ah.WriteJSON(w, r, map[string]string{"version": version, "ee": "Y"})
 }

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

@@ -8,7 +8,6 @@ import (
 	"io/ioutil"
 	"net/http"
 	"net/url"
-
 	"github.com/gorilla/mux"
 	"go.signoz.io/signoz/ee/query-service/constants"
 	"go.signoz.io/signoz/ee/query-service/model"
@@ -88,16 +87,9 @@ func (ah *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 
 	// get invite object
 	invite, err := baseauth.ValidateInvite(ctx, req)
-	if err != nil {
+	if err != nil || invite == nil {
 		zap.S().Errorf("failed to validate invite token", err)
-		RespondError(w, model.BadRequest(err), nil)
-		return
-	}
-
-	if invite == nil {
-		zap.S().Errorf("failed to validate invite token: it is either empty or invalid", err)
 		RespondError(w, model.BadRequest(basemodel.ErrSignupFailed{}), nil)
-		return
 	}
 
 	// get auth domain from email domain
@@ -198,7 +190,7 @@ func handleSsoError(w http.ResponseWriter, r *http.Request, redirectURL string)
 }
 
 // receiveGoogleAuth completes google OAuth response and forwards a request
-// to front-end to sign user in
+// to front-end to sign user in 
 func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request) {
 	redirectUri := constants.GetDefaultSiteURL()
 	ctx := context.Background()
@@ -229,15 +221,15 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 	// upgrade redirect url from the relay state for better accuracy
 	redirectUri = fmt.Sprintf("%s://%s%s", parsedState.Scheme, parsedState.Host, "/login")
 
-	// fetch domain by parsing relay state.
+	// fetch domain by parsing relay state. 
 	domain, err := ah.AppDao().GetDomainFromSsoResponse(ctx, parsedState)
 	if err != nil {
 		handleSsoError(w, r, redirectUri)
 		return
 	}
 
-	// now that we have domain, use domain to fetch sso settings.
-	// prepare google callback handler using parsedState -
+	// now that we have domain, use domain to fetch sso settings. 
+	// prepare google callback handler using parsedState - 
 	// which contains redirect URL (front-end endpoint)
 	callbackHandler, err := domain.PrepareGoogleOAuthProvider(parsedState)
 
@@ -247,7 +239,7 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 		handleSsoError(w, r, redirectUri)
 		return
 	}
-
+	
 	nextPage, err := ah.AppDao().PrepareSsoRedirect(ctx, redirectUri, identity.Email)
 	if err != nil {
 		zap.S().Errorf("[receiveGoogleAuth] failed to generate redirect URI after successful login ", domain.String(), zap.Error(err))
@@ -258,12 +250,15 @@ func (ah *APIHandler) receiveGoogleAuth(w http.ResponseWriter, r *http.Request)
 	http.Redirect(w, r, nextPage, http.StatusSeeOther)
 }
 
+
+
 // receiveSAML completes a SAML request and gets user logged in
 func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 	// this is the source url that initiated the login request
 	redirectUri := constants.GetDefaultSiteURL()
 	ctx := context.Background()
 
+
 	if !ah.CheckFeature(model.SSO) {
 		zap.S().Errorf("[receiveSAML] sso requested but feature unavailable %s in org domain %s", model.SSO)
 		http.Redirect(w, r, fmt.Sprintf("%s?ssoerror=%s", redirectUri, "feature unavailable, please upgrade your billing plan to access this feature"), http.StatusMovedPermanently)
@@ -292,13 +287,13 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 	// upgrade redirect url from the relay state for better accuracy
 	redirectUri = fmt.Sprintf("%s://%s%s", parsedState.Scheme, parsedState.Host, "/login")
 
-	// fetch domain by parsing relay state.
+	// fetch domain by parsing relay state. 
 	domain, err := ah.AppDao().GetDomainFromSsoResponse(ctx, parsedState)
 	if err != nil {
 		handleSsoError(w, r, redirectUri)
 		return
 	}
-
+	
 	sp, err := domain.PrepareSamlRequest(parsedState)
 	if err != nil {
 		zap.S().Errorf("[receiveSAML] failed to prepare saml request for domain (%s): %v", domain.String(), err)
@@ -332,6 +327,6 @@ func (ah *APIHandler) receiveSAML(w http.ResponseWriter, r *http.Request) {
 		handleSsoError(w, r, redirectUri)
 		return
 	}
-
+	
 	http.Redirect(w, r, nextPage, http.StatusSeeOther)
 }

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

@@ -1,107 +0,0 @@
-package api
-
-import (
-	"context"
-	"crypto/rand"
-	"encoding/base64"
-	"encoding/json"
-	"fmt"
-	"net/http"
-	"time"
-
-	"github.com/gorilla/mux"
-	"go.signoz.io/signoz/ee/query-service/model"
-	"go.signoz.io/signoz/pkg/query-service/auth"
-	"go.uber.org/zap"
-)
-
-func generatePATToken() string {
-	// Generate a 32-byte random token.
-	token := make([]byte, 32)
-	rand.Read(token)
-	// Encode the token in base64.
-	encodedToken := base64.StdEncoding.EncodeToString(token)
-	return encodedToken
-}
-
-func (ah *APIHandler) createPAT(w http.ResponseWriter, r *http.Request) {
-	ctx := context.Background()
-
-	req := model.PAT{}
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-		RespondError(w, model.BadRequest(err), nil)
-		return
-	}
-	user, err := auth.GetUserFromRequest(r)
-	if err != nil {
-		RespondError(w, &model.ApiError{
-			Typ: model.ErrorUnauthorized,
-			Err: err,
-		}, nil)
-		return
-	}
-
-	// All the PATs are associated with the user creating the PAT. Hence, the permissions
-	// associated with the PAT is also equivalent to that of the user.
-	req.UserID = user.Id
-	req.CreatedAt = time.Now().Unix()
-	req.Token = generatePATToken()
-
-	zap.S().Debugf("Got PAT request: %+v", req)
-	if apierr := ah.AppDao().CreatePAT(ctx, &req); apierr != nil {
-		RespondError(w, apierr, nil)
-		return
-	}
-
-	ah.Respond(w, &req)
-}
-
-func (ah *APIHandler) getPATs(w http.ResponseWriter, r *http.Request) {
-	ctx := context.Background()
-	user, err := auth.GetUserFromRequest(r)
-	if err != nil {
-		RespondError(w, &model.ApiError{
-			Typ: model.ErrorUnauthorized,
-			Err: err,
-		}, nil)
-		return
-	}
-	zap.S().Infof("Get PATs for user: %+v", user.Id)
-	pats, apierr := ah.AppDao().ListPATs(ctx, user.Id)
-	if apierr != nil {
-		RespondError(w, apierr, nil)
-		return
-	}
-	ah.Respond(w, pats)
-}
-
-func (ah *APIHandler) deletePAT(w http.ResponseWriter, r *http.Request) {
-	ctx := context.Background()
-	id := mux.Vars(r)["id"]
-	user, err := auth.GetUserFromRequest(r)
-	if err != nil {
-		RespondError(w, &model.ApiError{
-			Typ: model.ErrorUnauthorized,
-			Err: err,
-		}, nil)
-		return
-	}
-	pat, apierr := ah.AppDao().GetPATByID(ctx, id)
-	if apierr != nil {
-		RespondError(w, apierr, nil)
-		return
-	}
-	if pat.UserID != user.Id {
-		RespondError(w, &model.ApiError{
-			Typ: model.ErrorUnauthorized,
-			Err: fmt.Errorf("unauthorized PAT delete request"),
-		}, nil)
-		return
-	}
-	zap.S().Debugf("Delete PAT with id: %+v", id)
-	if apierr := ah.AppDao().DeletePAT(ctx, id); apierr != nil {
-		RespondError(w, apierr, nil)
-		return
-	}
-	ah.Respond(w, map[string]string{"data": "pat deleted successfully"})
-}

ee/query-service/app/server.go

@@ -25,16 +25,11 @@ import (
 	licensepkg "go.signoz.io/signoz/ee/query-service/license"
 	"go.signoz.io/signoz/ee/query-service/usage"
 
-	baseapp "go.signoz.io/signoz/pkg/query-service/app"
 	"go.signoz.io/signoz/pkg/query-service/app/dashboards"
-	"go.signoz.io/signoz/pkg/query-service/app/explorer"
-	baseauth "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/healthcheck"
 	basealm "go.signoz.io/signoz/pkg/query-service/integrations/alertManager"
 	baseint "go.signoz.io/signoz/pkg/query-service/interfaces"
-	"go.signoz.io/signoz/pkg/query-service/model"
 	pqle "go.signoz.io/signoz/pkg/query-service/pqlEngine"
 	rules "go.signoz.io/signoz/pkg/query-service/rules"
 	"go.signoz.io/signoz/pkg/query-service/telemetry"
@@ -86,7 +81,6 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	localDB, err := dashboards.InitDB(baseconst.RELATIONAL_DATASOURCE_PATH)
-	explorer.InitWithDSN(constants.RELATIONAL_DATASOURCE_PATH)
 
 	if err != nil {
 		return nil, err
@@ -193,7 +187,7 @@ func (s *Server) createPrivateServer(apiHandler *api.APIHandler) (*http.Server,
 		// ip here for alert manager
 		AllowedOrigins: []string{"*"},
 		AllowedMethods: []string{"GET", "DELETE", "POST", "PUT", "PATCH"},
-		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type", "SIGNOZ-API-KEY"},
+		AllowedHeaders: []string{"Accept", "Authorization", "Content-Type"},
 	})
 
 	handler := c.Handler(r)
@@ -208,33 +202,13 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 
 	r := mux.NewRouter()
 
-	getUserFromRequest := func(r *http.Request) (*model.UserPayload, error) {
-		patToken := r.Header.Get("SIGNOZ-API-KEY")
-		if len(patToken) > 0 {
-			zap.S().Debugf("Received a non-zero length PAT token")
-			ctx := context.Background()
-			dao := apiHandler.AppDao()
-
-			user, err := dao.GetUserByPAT(ctx, patToken)
-			if err == nil && user != nil {
-				zap.S().Debugf("Found valid PAT user: %+v", user)
-				return user, nil
-			}
-			if err != nil {
-				zap.S().Debugf("Error while getting user for PAT: %+v", err)
-			}
-		}
-		return baseauth.GetUserFromRequest(r)
-	}
-	am := baseapp.NewAuthMiddleware(getUserFromRequest)
 	r.Use(setTimeoutMiddleware)
 	r.Use(s.analyticsMiddleware)
 	r.Use(loggingMiddleware)
 
-	apiHandler.RegisterRoutes(r, am)
-	apiHandler.RegisterMetricsRoutes(r, am)
-	apiHandler.RegisterLogsRoutes(r, am)
-	apiHandler.RegisterQueryRangeV3Routes(r, am)
+	apiHandler.RegisterRoutes(r)
+	apiHandler.RegisterMetricsRoutes(r)
+	apiHandler.RegisterLogsRoutes(r)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},
@@ -297,9 +271,8 @@ func (lrw *loggingResponseWriter) Flush() {
 
 func extractDashboardMetaData(path string, r *http.Request) (map[string]interface{}, bool) {
 	pathToExtractBodyFrom := "/api/v2/metrics/query_range"
-
+	var requestBody map[string]interface{}
 	data := map[string]interface{}{}
-	var postData *model.QueryRangeParamsV2
 
 	if path == pathToExtractBodyFrom && (r.Method == "POST") {
 		if r.Body != nil {
@@ -309,8 +282,7 @@ func extractDashboardMetaData(path string, r *http.Request) (map[string]interfac
 			}
 			r.Body.Close() //  must close
 			r.Body = ioutil.NopCloser(bytes.NewBuffer(bodyBytes))
-			json.Unmarshal(bodyBytes, &postData)
-
+			json.Unmarshal(bodyBytes, &requestBody)
 		} else {
 			return nil, false
 		}
@@ -319,20 +291,31 @@ func extractDashboardMetaData(path string, r *http.Request) (map[string]interfac
 		return nil, false
 	}
 
-	signozMetricNotFound := false
+	compositeMetricQuery, compositeMetricQueryExists := requestBody["compositeMetricQuery"]
 
-	if postData != nil {
-		signozMetricNotFound = telemetry.GetInstance().CheckSigNozMetricsV2(postData.CompositeMetricQuery)
+	signozMetricFound := false
 
-		if postData.CompositeMetricQuery != nil {
-			data["queryType"] = postData.CompositeMetricQuery.QueryType
-			data["panelType"] = postData.CompositeMetricQuery.PanelType
+	if compositeMetricQueryExists {
+		compositeMetricQueryMap := compositeMetricQuery.(map[string]interface{})
+
+		signozMetricFound = telemetry.GetInstance().CheckSigNozMetrics(compositeMetricQueryMap)
+
+		queryType, queryTypeExists := compositeMetricQueryMap["queryType"]
+		if queryTypeExists {
+			data["queryType"] = queryType
+		}
+		panelType, panelTypeExists := compositeMetricQueryMap["panelType"]
+		if panelTypeExists {
+			data["panelType"] = panelType
 		}
-
-		data["datasource"] = postData.DataSource
 	}
 
-	if signozMetricNotFound {
+	datasource, datasourceExists := requestBody["dataSource"]
+	if datasourceExists {
+		data["datasource"] = datasource
+	}
+
+	if !signozMetricFound {
 		telemetry.GetInstance().AddActiveMetricsUser()
 		telemetry.GetInstance().SendEvent(telemetry.TELEMETRY_EVENT_DASHBOARDS_METADATA, data, true)
 	}

ee/query-service/dao/interface.go

@@ -3,7 +3,6 @@ package dao
 import (
 	"context"
 	"net/url"
-
 	"github.com/google/uuid"
 	"github.com/jmoiron/sqlx"
 	"go.signoz.io/signoz/ee/query-service/model"
@@ -25,7 +24,7 @@ type ModelDao interface {
 	CanUsePassword(ctx context.Context, email string) (bool, basemodel.BaseApiError)
 	PrepareSsoRedirect(ctx context.Context, redirectUri, email string) (redirectURL string, apierr basemodel.BaseApiError)
 	GetDomainFromSsoResponse(ctx context.Context, relayState *url.URL) (*model.OrgDomain, error)
-
+	
 	// org domain (auth domains) CRUD ops
 	ListDomains(ctx context.Context, orgId string) ([]model.OrgDomain, basemodel.BaseApiError)
 	GetDomain(ctx context.Context, id uuid.UUID) (*model.OrgDomain, basemodel.BaseApiError)
@@ -33,11 +32,4 @@ type ModelDao interface {
 	UpdateDomain(ctx context.Context, domain *model.OrgDomain) basemodel.BaseApiError
 	DeleteDomain(ctx context.Context, id uuid.UUID) basemodel.BaseApiError
 	GetDomainByEmail(ctx context.Context, email string) (*model.OrgDomain, basemodel.BaseApiError)
-
-	CreatePAT(ctx context.Context, p *model.PAT) basemodel.BaseApiError
-	GetPAT(ctx context.Context, pat string) (*model.PAT, basemodel.BaseApiError)
-	GetPATByID(ctx context.Context, id string) (*model.PAT, basemodel.BaseApiError)
-	GetUserByPAT(ctx context.Context, token string) (*basemodel.UserPayload, basemodel.BaseApiError)
-	ListPATs(ctx context.Context, userID string) ([]model.PAT, basemodel.BaseApiError)
-	DeletePAT(ctx context.Context, id string) basemodel.BaseApiError
 }

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

@@ -48,17 +48,7 @@ func InitDB(dataSourceName string) (*modelDao, error) {
 		updated_at INTEGER,
 		data TEXT  NOT NULL,
 		FOREIGN KEY(org_id) REFERENCES organizations(id)
-	);
-	CREATE TABLE IF NOT EXISTS personal_access_tokens (
-		id INTEGER PRIMARY KEY AUTOINCREMENT,
-		user_id TEXT NOT NULL,
-		token TEXT NOT NULL UNIQUE,
-		name TEXT NOT NULL,
-		created_at INTEGER NOT NULL,
-		expires_at INTEGER NOT NULL,
-		FOREIGN KEY(user_id) REFERENCES users(id)
-	);
-	`
+	);`
 
 	_, err = m.DB().Exec(table_schema)
 	if err != nil {

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

@@ -1,106 +0,0 @@
-package sqlite
-
-import (
-	"context"
-	"fmt"
-
-	"go.signoz.io/signoz/ee/query-service/model"
-	basemodel "go.signoz.io/signoz/pkg/query-service/model"
-	"go.uber.org/zap"
-)
-
-func (m *modelDao) CreatePAT(ctx context.Context, p *model.PAT) basemodel.BaseApiError {
-	_, err := m.DB().ExecContext(ctx,
-		"INSERT INTO personal_access_tokens (user_id, token, name, created_at, expires_at) VALUES ($1, $2, $3, $4, $5)",
-		p.UserID,
-		p.Token,
-		p.Name,
-		p.CreatedAt,
-		p.ExpiresAt)
-	if err != nil {
-		zap.S().Errorf("Failed to insert PAT in db, err: %v", zap.Error(err))
-		return model.InternalError(fmt.Errorf("PAT insertion failed"))
-	}
-	return nil
-}
-
-func (m *modelDao) ListPATs(ctx context.Context, userID string) ([]model.PAT, basemodel.BaseApiError) {
-	pats := []model.PAT{}
-
-	if err := m.DB().Select(&pats, `SELECT * FROM personal_access_tokens WHERE user_id=?;`, userID); err != nil {
-		zap.S().Errorf("Failed to fetch PATs for user: %s, err: %v", userID, zap.Error(err))
-		return nil, model.InternalError(fmt.Errorf("failed to fetch PATs"))
-	}
-	return pats, nil
-}
-
-func (m *modelDao) DeletePAT(ctx context.Context, id string) basemodel.BaseApiError {
-	_, err := m.DB().ExecContext(ctx, `DELETE from personal_access_tokens where id=?;`, id)
-	if err != nil {
-		zap.S().Errorf("Failed to delete PAT, err: %v", zap.Error(err))
-		return model.InternalError(fmt.Errorf("failed to delete PAT"))
-	}
-	return nil
-}
-
-func (m *modelDao) GetPAT(ctx context.Context, token string) (*model.PAT, basemodel.BaseApiError) {
-	pats := []model.PAT{}
-
-	if err := m.DB().Select(&pats, `SELECT * FROM personal_access_tokens WHERE token=?;`, token); err != nil {
-		return nil, model.InternalError(fmt.Errorf("failed to fetch PAT"))
-	}
-
-	if len(pats) != 1 {
-		return nil, &model.ApiError{
-			Typ: model.ErrorInternal,
-			Err: fmt.Errorf("found zero or multiple PATs with same token, %s", token),
-		}
-	}
-
-	return &pats[0], nil
-}
-
-func (m *modelDao) GetPATByID(ctx context.Context, id string) (*model.PAT, basemodel.BaseApiError) {
-	pats := []model.PAT{}
-
-	if err := m.DB().Select(&pats, `SELECT * FROM personal_access_tokens WHERE id=?;`, id); err != nil {
-		return nil, model.InternalError(fmt.Errorf("failed to fetch PAT"))
-	}
-
-	if len(pats) != 1 {
-		return nil, &model.ApiError{
-			Typ: model.ErrorInternal,
-			Err: fmt.Errorf("found zero or multiple PATs with same token"),
-		}
-	}
-
-	return &pats[0], nil
-}
-
-func (m *modelDao) GetUserByPAT(ctx context.Context, token string) (*basemodel.UserPayload, basemodel.BaseApiError) {
-	users := []basemodel.UserPayload{}
-
-	query := `SELECT
-				u.id,
-				u.name,
-				u.email,
-				u.password,
-				u.created_at,
-				u.profile_picture_url,
-				u.org_id,
-				u.group_id
-			  FROM users u, personal_access_tokens p
-			  WHERE u.id = p.user_id and p.token=?;`
-
-	if err := m.DB().Select(&users, query, token); err != nil {
-		return nil, model.InternalError(fmt.Errorf("failed to fetch user from PAT, err: %v", err))
-	}
-
-	if len(users) != 1 {
-		return nil, &model.ApiError{
-			Typ: model.ErrorInternal,
-			Err: fmt.Errorf("found zero or multiple users with same PAT token"),
-		}
-	}
-	return &users[0], nil
-}

ee/query-service/model/pat.go

@@ -1,10 +0,0 @@
-package model
-
-type PAT struct {
-	Id        string `json:"id" db:"id"`
-	UserID    string `json:"userId" db:"user_id"`
-	Token     string `json:"token" db:"token"`
-	Name      string `json:"name" db:"name"`
-	CreatedAt int64  `json:"createdAt" db:"created_at"`
-	ExpiresAt int64  `json:"expiresAt" db:"expires_at"` // unused as of now
-}

frontend/.eslintrc.js

@@ -58,7 +58,7 @@ module.exports = {
 		'react/no-array-index-key': 'error',
 		'linebreak-style': [
 			'error',
-			process.env.platform === 'win32' ? 'windows' : 'unix',
+			process.platform === 'win32' ? 'windows' : 'unix',
 		],
 		'@typescript-eslint/default-param-last': 'off',
 
@@ -102,10 +102,9 @@ module.exports = {
 			},
 		],
 		'@typescript-eslint/no-unused-vars': 'error',
-		'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
-		'arrow-body-style': ['error', 'as-needed'],
 
 		// eslint rules need to remove
+		'no-shadow': 'off',
 		'@typescript-eslint/no-shadow': 'off',
 		'import/no-cycle': 'off',
 

frontend/.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd frontend && yarn run commitlint --edit $1
+cd frontend && npm run commitlint

frontend/jest.config.ts

@@ -15,7 +15,7 @@ const config: Config.InitialOptions = {
 			useESM: true,
 		},
 	},
-	testMatch: ['<rootDir>/src/**/*?(*.)(test).(ts|js)?(x)'],
+	testMatch: ['<rootDir>/src/**/?(*.)(test).(ts|js)?(x)'],
 	preset: 'ts-jest/presets/js-with-ts-esm',
 	transform: {
 		'^.+\\.(ts|tsx)?$': 'ts-jest',
@@ -25,7 +25,6 @@ const config: Config.InitialOptions = {
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],
 	moduleDirectories: ['node_modules', 'src'],
-	testEnvironment: 'jest-environment-jsdom',
 	testEnvironmentOptions: {
 		'jest-playwright': {
 			browsers: ['chromium', 'firefox', 'webkit'],

frontend/package.json

@@ -31,8 +31,11 @@
 		"@ant-design/icons": "4.8.0",
 		"@grafana/data": "^8.4.3",
 		"@monaco-editor/react": "^4.3.1",
+		"@testing-library/jest-dom": "^5.11.4",
+		"@testing-library/react": "^11.1.0",
+		"@testing-library/user-event": "^12.1.10",
+		"@welldone-software/why-did-you-render": "^6.2.1",
 		"@xstate/react": "^3.0.0",
-		"ansi-to-html": "0.7.2",
 		"antd": "5.0.5",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
@@ -41,7 +44,7 @@
 		"babel-plugin-named-asset-import": "^0.3.7",
 		"babel-preset-minify": "^0.5.1",
 		"babel-preset-react-app": "^10.0.0",
-		"chart.js": "3.9.1",
+		"chart.js": "^3.4.0",
 		"chartjs-adapter-date-fns": "^2.0.0",
 		"chartjs-plugin-annotation": "^1.4.0",
 		"color": "^4.2.1",
@@ -52,12 +55,10 @@
 		"d3-flame-graph": "^3.1.1",
 		"d3-tip": "^0.9.1",
 		"dayjs": "^1.10.7",
-		"dompurify": "3.0.0",
 		"dotenv": "8.2.0",
 		"event-source-polyfill": "1.0.31",
 		"file-loader": "6.1.1",
 		"flat": "^5.0.2",
-		"fontfaceobserver": "2.3.0",
 		"history": "4.10.1",
 		"html-webpack-plugin": "5.1.0",
 		"i18next": "^21.6.12",
@@ -69,18 +70,17 @@
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
 		"mini-css-extract-plugin": "2.4.5",
-		"react": "18.2.0",
-		"react-dom": "18.2.0",
+		"react": "17.0.0",
+		"react-dom": "17.0.0",
 		"react-force-graph": "^1.41.0",
 		"react-graph-vis": "^1.0.5",
 		"react-grid-layout": "^1.3.4",
 		"react-i18next": "^11.16.1",
-		"react-intersection-observer": "9.4.1",
 		"react-query": "^3.34.19",
 		"react-redux": "^7.2.2",
 		"react-router-dom": "^5.2.0",
 		"react-use": "^17.3.2",
-		"react-virtuoso": "4.0.3",
+		"react-vis": "^1.11.7",
 		"redux": "^4.0.5",
 		"redux-thunk": "^2.3.0",
 		"stream": "^0.0.2",
@@ -120,28 +120,24 @@
 		"@commitlint/config-conventional": "^16.2.4",
 		"@jest/globals": "^27.5.1",
 		"@playwright/test": "^1.22.0",
-		"@testing-library/jest-dom": "5.16.5",
-		"@testing-library/react": "13.4.0",
-		"@testing-library/user-event": "14.4.3",
+		"@testing-library/react-hooks": "^7.0.2",
 		"@types/color": "^3.0.3",
 		"@types/compression-webpack-plugin": "^9.0.0",
 		"@types/copy-webpack-plugin": "^8.0.1",
 		"@types/d3": "^6.2.0",
 		"@types/d3-tip": "^3.5.5",
-		"@types/dompurify": "^2.4.0",
 		"@types/event-source-polyfill": "^1.0.0",
 		"@types/flat": "^5.0.2",
-		"@types/fontfaceobserver": "2.1.0",
 		"@types/jest": "^27.5.1",
 		"@types/lodash-es": "^4.17.4",
 		"@types/mini-css-extract-plugin": "^2.5.1",
 		"@types/node": "^16.10.3",
-		"@types/react": "18.0.26",
-		"@types/react-dom": "18.0.10",
+		"@types/react": "^17.0.0",
+		"@types/react-dom": "^16.9.9",
 		"@types/react-grid-layout": "^1.1.2",
 		"@types/react-redux": "^7.1.11",
-		"@types/react-resizable": "3.0.3",
 		"@types/react-router-dom": "^5.1.6",
+		"@types/redux": "^3.6.0",
 		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
 		"@types/vis": "^4.21.21",
@@ -149,7 +145,6 @@
 		"@types/webpack-dev-server": "^4.3.0",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
 		"@typescript-eslint/parser": "^4.28.2",
-		"@welldone-software/why-did-you-render": "6.2.1",
 		"autoprefixer": "^9.0.0",
 		"babel-plugin-styled-components": "^1.12.0",
 		"compression-webpack-plugin": "9.0.0",
@@ -178,9 +173,7 @@
 		"lint-staged": "^12.3.7",
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",
-		"react-hooks-testing-library": "0.6.0",
 		"react-hot-loader": "^4.13.0",
-		"react-resizable": "3.0.4",
 		"ts-jest": "^27.1.4",
 		"ts-node": "^10.2.1",
 		"typescript-plugin-css-modules": "^3.4.0",
@@ -193,7 +186,7 @@
 		]
 	},
 	"resolutions": {
-		"@types/react": "18.0.26",
-		"@types/react-dom": "18.0.10"
+		"@types/react": "17.0.0",
+		"@types/react-dom": "17.0.0"
 	}
 }

frontend/src/AppRoutes/Private.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { notification } from 'antd';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import loginApi from 'api/user/login';
 import { Logout } from 'api/utils';
 import Spinner from 'components/Spinner';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -47,8 +47,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
 
-	const { notifications } = useNotifications();
-
 	const currentRoute = mapRoutes.get('current');
 
 	const navigateToLoginIfNotLoggedIn = (isLoggedIn = isLoggedInState): void => {
@@ -108,7 +106,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 							} else {
 								Logout();
 
-								notifications.error({
+								notification.error({
 									message: response.error || t('something_went_wrong'),
 								});
 							}

frontend/src/AppRoutes/index.tsx

@@ -3,7 +3,6 @@ import NotFound from 'components/NotFound';
 import Spinner from 'components/Spinner';
 import AppLayout from 'container/AppLayout';
 import { useThemeConfig } from 'hooks/useDarkMode';
-import { NotificationProvider } from 'hooks/useNotifications';
 import history from 'lib/history';
 import React, { Suspense } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
@@ -16,28 +15,26 @@ function App(): JSX.Element {
 
 	return (
 		<ConfigProvider theme={themeConfig}>
-			<NotificationProvider>
-				<Router history={history}>
-					<PrivateRoute>
-						<AppLayout>
-							<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-								<Switch>
-									{routes.map(({ path, component, exact }) => (
-										<Route
-											key={`${path}`}
-											exact={exact}
-											path={path}
-											component={component}
-										/>
-									))}
+			<Router history={history}>
+				<PrivateRoute>
+					<AppLayout>
+						<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+							<Switch>
+								{routes.map(({ path, component, exact }) => (
+									<Route
+										key={`${path}`}
+										exact={exact}
+										path={path}
+										component={component}
+									/>
+								))}
 
-									<Route path="*" component={NotFound} />
-								</Switch>
-							</Suspense>
-						</AppLayout>
-					</PrivateRoute>
-				</Router>
-			</NotificationProvider>
+								<Route path="*" component={NotFound} />
+							</Switch>
+						</Suspense>
+					</AppLayout>
+				</PrivateRoute>
+			</Router>
 		</ConfigProvider>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { ApiV2Instance as axios } from 'api';
+import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
@@ -8,7 +8,9 @@ const query = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.post(`/variables/query`, props);
+		const response = await axios.get(
+			`/variables/query?query=${encodeURIComponent(props.query)}`,
+		);
 
 		return {
 			statusCode: 200,

frontend/src/api/trace/getFilters.ts

@@ -32,7 +32,6 @@ const getFilters = async (
 			maxDuration: String((duration.duration || [])[0] || ''),
 			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
-			spanKind: props.spanKind,
 		});
 
 		return {

frontend/src/api/trace/getSpans.ts

@@ -10,11 +10,9 @@ const getSpans = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: e.Key,
+			Key: e.Key[0],
 			Operator: e.Operator,
-			StringValues: e.StringValues,
-			NumberValues: e.NumberValues,
-			BoolValues: e.BoolValues,
+			Values: e.Values,
 		}));
 
 		const exclude: string[] = [];
@@ -37,14 +35,13 @@ const getSpans = async (
 				start: String(props.start),
 				end: String(props.end),
 				function: props.function,
-				groupBy: props.groupBy === 'none' ? '' : props.groupBy,
+				groupBy: props.groupBy,
 				step: props.step,
 				tags: updatedSelectedTags,
 				...nonDuration,
 				maxDuration: String((duration.duration || [])[0] || ''),
 				minDuration: String((duration.duration || [])[1] || ''),
 				exclude,
-				spanKind: props.spanKind,
 			},
 		);
 

frontend/src/api/trace/getSpansAggregate.ts

@@ -28,11 +28,9 @@ const getSpanAggregate = async (
 		});
 
 		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: e.Key,
+			Key: e.Key[0],
 			Operator: e.Operator,
-			StringValues: e.StringValues,
-			NumberValues: e.NumberValues,
-			BoolValues: e.BoolValues,
+			Values: e.Values,
 		}));
 
 		const other = Object.fromEntries(props.selectedFilter);
@@ -48,7 +46,6 @@ const getSpanAggregate = async (
 			maxDuration: String((duration.duration || [])[0] || ''),
 			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
-			spanKind: props.spanKind,
 		});
 
 		return {

frontend/src/api/trace/getTagFilter.ts

@@ -32,7 +32,6 @@ const getTagFilters = async (
 			maxDuration: String((duration.duration || [])[0] || ''),
 			minDuration: String((duration.duration || [])[1] || ''),
 			exclude,
-			spanKind: props.spanKind,
 		});
 
 		return {

frontend/src/api/trace/getTagValue.ts

@@ -11,12 +11,9 @@ const getTagValue = async (
 		const response = await axios.post<PayloadProps>(`/getTagValues`, {
 			start: props.start.toString(),
 			end: props.end.toString(),
-			tagKey: {
-				Key: props.tagKey.Key,
-				Type: props.tagKey.Type,
-			},
-			spanKind: props.spanKind,
+			tagKey: props.tagKey,
 		});
+
 		return {
 			statusCode: 200,
 			error: null,

frontend/src/components/Graph/Plugin/DragSelect.ts

@@ -1,321 +0,0 @@
-import { Chart, ChartTypeRegistry, Plugin } from 'chart.js';
-import * as ChartHelpers from 'chart.js/helpers';
-
-// utils
-import { ChartEventHandler, mergeDefaultOptions } from './utils';
-
-export const dragSelectPluginId = 'drag-select-plugin';
-
-type ChartDragHandlers = {
-	mousedown: ChartEventHandler;
-	mousemove: ChartEventHandler;
-	mouseup: ChartEventHandler;
-	globalMouseup: () => void;
-};
-
-export type DragSelectPluginOptions = {
-	color?: string;
-	onSelect?: (startValueX: number, endValueX: number) => void;
-};
-
-const defaultDragSelectPluginOptions: Required<DragSelectPluginOptions> = {
-	color: 'rgba(0, 0, 0, 0.5)',
-	onSelect: () => {},
-};
-
-export function createDragSelectPluginOptions(
-	isEnabled: boolean,
-	onSelect?: (start: number, end: number) => void,
-	color?: string,
-): DragSelectPluginOptions | false {
-	if (!isEnabled) {
-		return false;
-	}
-
-	return {
-		onSelect,
-		color,
-	};
-}
-
-function createMousedownHandler(
-	chart: Chart,
-	dragData: DragSelectData,
-): ChartEventHandler {
-	return (ev): void => {
-		const { left, right } = chart.chartArea;
-
-		let { x: startDragPositionX } = ChartHelpers.getRelativePosition(ev, chart);
-
-		if (left > startDragPositionX) {
-			startDragPositionX = left;
-		}
-
-		if (right < startDragPositionX) {
-			startDragPositionX = right;
-		}
-
-		const startValuePositionX = chart.scales.x.getValueForPixel(
-			startDragPositionX,
-		);
-
-		dragData.onDragStart(startDragPositionX, startValuePositionX);
-	};
-}
-
-function createMousemoveHandler(
-	chart: Chart,
-	dragData: DragSelectData,
-): ChartEventHandler {
-	return (ev): void => {
-		if (!dragData.isMouseDown) {
-			return;
-		}
-
-		const { left, right } = chart.chartArea;
-
-		let { x: dragPositionX } = ChartHelpers.getRelativePosition(ev, chart);
-
-		if (left > dragPositionX) {
-			dragPositionX = left;
-		}
-
-		if (right < dragPositionX) {
-			dragPositionX = right;
-		}
-
-		const valuePositionX = chart.scales.x.getValueForPixel(dragPositionX);
-
-		dragData.onDrag(dragPositionX, valuePositionX);
-		chart.update('none');
-	};
-}
-
-function createMouseupHandler(
-	chart: Chart,
-	options: DragSelectPluginOptions,
-	dragData: DragSelectData,
-): ChartEventHandler {
-	return (ev): void => {
-		const { left, right } = chart.chartArea;
-
-		let { x: endRelativePostionX } = ChartHelpers.getRelativePosition(ev, chart);
-
-		if (left > endRelativePostionX) {
-			endRelativePostionX = left;
-		}
-
-		if (right < endRelativePostionX) {
-			endRelativePostionX = right;
-		}
-
-		const endValuePositionX = chart.scales.x.getValueForPixel(
-			endRelativePostionX,
-		);
-
-		dragData.onDragEnd(endRelativePostionX, endValuePositionX);
-
-		chart.update('none');
-
-		if (
-			typeof options.onSelect === 'function' &&
-			typeof dragData.startValuePositionX === 'number' &&
-			typeof dragData.endValuePositionX === 'number'
-		) {
-			const start = Math.min(
-				dragData.startValuePositionX,
-				dragData.endValuePositionX,
-			);
-			const end = Math.max(
-				dragData.startValuePositionX,
-				dragData.endValuePositionX,
-			);
-
-			options.onSelect(start, end);
-		}
-	};
-}
-
-function createGlobalMouseupHandler(
-	options: DragSelectPluginOptions,
-	dragData: DragSelectData,
-): () => void {
-	return (): void => {
-		const { isDragging, endRelativePixelPositionX, endValuePositionX } = dragData;
-
-		if (!isDragging) {
-			return;
-		}
-
-		dragData.onDragEnd(
-			endRelativePixelPositionX as number,
-			endValuePositionX as number,
-		);
-
-		if (
-			typeof options.onSelect === 'function' &&
-			typeof dragData.startValuePositionX === 'number' &&
-			typeof dragData.endValuePositionX === 'number'
-		) {
-			const start = Math.min(
-				dragData.startValuePositionX,
-				dragData.endValuePositionX,
-			);
-			const end = Math.max(
-				dragData.startValuePositionX,
-				dragData.endValuePositionX,
-			);
-
-			options.onSelect(start, end);
-		}
-	};
-}
-
-class DragSelectData {
-	public isDragging = false;
-
-	public isMouseDown = false;
-
-	public startRelativePixelPositionX: number | null = null;
-
-	public startValuePositionX: number | null | undefined = null;
-
-	public endRelativePixelPositionX: number | null = null;
-
-	public endValuePositionX: number | null | undefined = null;
-
-	public initialize(): void {
-		this.isDragging = false;
-		this.isMouseDown = false;
-		this.startRelativePixelPositionX = null;
-		this.startValuePositionX = null;
-		this.endRelativePixelPositionX = null;
-		this.endValuePositionX = null;
-	}
-
-	public onDragStart(
-		startRelativePixelPositionX: number,
-		startValuePositionX: number | undefined,
-	): void {
-		this.isDragging = false;
-		this.isMouseDown = true;
-		this.startRelativePixelPositionX = startRelativePixelPositionX;
-		this.startValuePositionX = startValuePositionX;
-		this.endRelativePixelPositionX = null;
-		this.endValuePositionX = null;
-	}
-
-	public onDrag(
-		endRelativePixelPositionX: number,
-		endValuePositionX: number | undefined,
-	): void {
-		this.isDragging = true;
-		this.endRelativePixelPositionX = endRelativePixelPositionX;
-		this.endValuePositionX = endValuePositionX;
-	}
-
-	public onDragEnd(
-		endRelativePixelPositionX: number,
-		endValuePositionX: number | undefined,
-	): void {
-		if (!this.isDragging) {
-			this.initialize();
-			return;
-		}
-
-		this.isDragging = false;
-		this.isMouseDown = false;
-		this.endRelativePixelPositionX = endRelativePixelPositionX;
-		this.endValuePositionX = endValuePositionX;
-	}
-}
-
-export const createDragSelectPlugin = (): Plugin<
-	keyof ChartTypeRegistry,
-	DragSelectPluginOptions
-> => {
-	const dragData = new DragSelectData();
-	let pluginOptions: Required<DragSelectPluginOptions>;
-
-	const handlers: ChartDragHandlers = {
-		mousedown: () => {},
-		mousemove: () => {},
-		mouseup: () => {},
-		globalMouseup: () => {},
-	};
-
-	const dragSelectPlugin: Plugin<
-		keyof ChartTypeRegistry,
-		DragSelectPluginOptions
-	> = {
-		id: dragSelectPluginId,
-		start: (chart: Chart, _, passedOptions) => {
-			pluginOptions = mergeDefaultOptions(
-				passedOptions,
-				defaultDragSelectPluginOptions,
-			);
-
-			const { canvas } = chart;
-
-			dragData.initialize();
-
-			const mousedownHandler = createMousedownHandler(chart, dragData);
-			const mousemoveHandler = createMousemoveHandler(chart, dragData);
-			const mouseupHandler = createMouseupHandler(chart, pluginOptions, dragData);
-			const globalMouseupHandler = createGlobalMouseupHandler(
-				pluginOptions,
-				dragData,
-			);
-
-			canvas.addEventListener('mousedown', mousedownHandler, { passive: true });
-			canvas.addEventListener('mousemove', mousemoveHandler, { passive: true });
-			canvas.addEventListener('mouseup', mouseupHandler, { passive: true });
-			document.addEventListener('mouseup', globalMouseupHandler, {
-				passive: true,
-			});
-
-			handlers.mousedown = mousedownHandler;
-			handlers.mousemove = mousemoveHandler;
-			handlers.mouseup = mouseupHandler;
-			handlers.globalMouseup = globalMouseupHandler;
-		},
-		beforeDestroy: (chart: Chart) => {
-			const { canvas } = chart;
-
-			if (!canvas) {
-				return;
-			}
-
-			canvas.removeEventListener('mousedown', handlers.mousedown);
-			canvas.removeEventListener('mousemove', handlers.mousemove);
-			canvas.removeEventListener('mouseup', handlers.mouseup);
-			document.removeEventListener('mouseup', handlers.globalMouseup);
-		},
-		afterDatasetsDraw: (chart: Chart) => {
-			const {
-				startRelativePixelPositionX,
-				endRelativePixelPositionX,
-				isDragging,
-			} = dragData;
-
-			if (startRelativePixelPositionX && endRelativePixelPositionX && isDragging) {
-				const left = Math.min(
-					startRelativePixelPositionX,
-					endRelativePixelPositionX,
-				);
-				const right = Math.max(
-					startRelativePixelPositionX,
-					endRelativePixelPositionX,
-				);
-				const top = chart.chartArea.top - 5;
-				const bottom = chart.chartArea.bottom + 5;
-
-				/* eslint-disable-next-line no-param-reassign */
-				chart.ctx.fillStyle = pluginOptions.color;
-				chart.ctx.fillRect(left, top, right - left, bottom - top);
-			}
-		},
-	};
-
-	return dragSelectPlugin;
-};

frontend/src/components/Graph/Plugin/IntersectionCursor.ts

@@ -1,164 +0,0 @@
-import { Chart, ChartEvent, ChartTypeRegistry, Plugin } from 'chart.js';
-import * as ChartHelpers from 'chart.js/helpers';
-
-// utils
-import { ChartEventHandler, mergeDefaultOptions } from './utils';
-
-export const intersectionCursorPluginId = 'intersection-cursor-plugin';
-
-export type IntersectionCursorPluginOptions = {
-	color?: string;
-	dashSize?: number;
-	gapSize?: number;
-};
-
-export const defaultIntersectionCursorPluginOptions: Required<IntersectionCursorPluginOptions> = {
-	color: 'white',
-	dashSize: 3,
-	gapSize: 3,
-};
-
-export function createIntersectionCursorPluginOptions(
-	isEnabled: boolean,
-	color?: string,
-	dashSize?: number,
-	gapSize?: number,
-): IntersectionCursorPluginOptions | false {
-	if (!isEnabled) {
-		return false;
-	}
-
-	return {
-		color,
-		dashSize,
-		gapSize,
-	};
-}
-
-function createMousemoveHandler(
-	chart: Chart,
-	cursorData: IntersectionCursorData,
-): ChartEventHandler {
-	return (ev: ChartEvent | MouseEvent): void => {
-		const { left, right, top, bottom } = chart.chartArea;
-
-		let { x, y } = ChartHelpers.getRelativePosition(ev, chart);
-
-		if (left > x) {
-			x = left;
-		}
-
-		if (right < x) {
-			x = right;
-		}
-
-		if (y < top) {
-			y = top;
-		}
-
-		if (y > bottom) {
-			y = bottom;
-		}
-
-		cursorData.onMouseMove(x, y);
-	};
-}
-
-function createMouseoutHandler(
-	cursorData: IntersectionCursorData,
-): ChartEventHandler {
-	return (): void => {
-		cursorData.onMouseOut();
-	};
-}
-
-class IntersectionCursorData {
-	public positionX: number | null | undefined;
-
-	public positionY: number | null | undefined;
-
-	public initialize(): void {
-		this.positionX = null;
-		this.positionY = null;
-	}
-
-	public onMouseMove(x: number | undefined, y: number | undefined): void {
-		this.positionX = x;
-		this.positionY = y;
-	}
-
-	public onMouseOut(): void {
-		this.positionX = null;
-		this.positionY = null;
-	}
-}
-
-export const createIntersectionCursorPlugin = (): Plugin<
-	keyof ChartTypeRegistry,
-	IntersectionCursorPluginOptions
-> => {
-	const cursorData = new IntersectionCursorData();
-	let pluginOptions: Required<IntersectionCursorPluginOptions>;
-
-	let mousemoveHandler: (ev: ChartEvent | MouseEvent) => void;
-	let mouseoutHandler: (ev: ChartEvent | MouseEvent) => void;
-
-	const intersectionCursorPlugin: Plugin<
-		keyof ChartTypeRegistry,
-		IntersectionCursorPluginOptions
-	> = {
-		id: intersectionCursorPluginId,
-		start: (chart: Chart, _, passedOptions) => {
-			const { canvas } = chart;
-
-			cursorData.initialize();
-			pluginOptions = mergeDefaultOptions(
-				passedOptions,
-				defaultIntersectionCursorPluginOptions,
-			);
-
-			mousemoveHandler = createMousemoveHandler(chart, cursorData);
-			mouseoutHandler = createMouseoutHandler(cursorData);
-
-			canvas.addEventListener('mousemove', mousemoveHandler, { passive: true });
-			canvas.addEventListener('mouseout', mouseoutHandler, { passive: true });
-		},
-		beforeDestroy: (chart: Chart) => {
-			const { canvas } = chart;
-
-			if (!canvas) {
-				return;
-			}
-
-			canvas.removeEventListener('mousemove', mousemoveHandler);
-			canvas.removeEventListener('mouseout', mouseoutHandler);
-		},
-		afterDatasetsDraw: (chart: Chart) => {
-			const { positionX, positionY } = cursorData;
-
-			const lineDashData = [pluginOptions.dashSize, pluginOptions.gapSize];
-
-			if (typeof positionX === 'number' && typeof positionY === 'number') {
-				const { top, bottom, left, right } = chart.chartArea;
-
-				chart.ctx.beginPath();
-				/* eslint-disable-next-line no-param-reassign */
-				chart.ctx.strokeStyle = pluginOptions.color;
-				chart.ctx.setLineDash(lineDashData);
-				chart.ctx.moveTo(left, positionY);
-				chart.ctx.lineTo(right, positionY);
-				chart.ctx.stroke();
-
-				chart.ctx.beginPath();
-				chart.ctx.setLineDash(lineDashData);
-				/* eslint-disable-next-line no-param-reassign */
-				chart.ctx.strokeStyle = pluginOptions.color;
-				chart.ctx.moveTo(positionX, top);
-				chart.ctx.lineTo(positionX, bottom);
-				chart.ctx.stroke();
-			}
-		},
-	};
-
-	return intersectionCursorPlugin;
-};

frontend/src/components/Graph/Plugin/Legend.ts

@@ -22,86 +22,87 @@ const getOrCreateLegendList = (
 		listContainer.style.height = '100%';
 		listContainer.style.flexWrap = 'wrap';
 		listContainer.style.justifyContent = 'center';
-		listContainer.style.fontSize = '0.75rem';
 		legendContainer?.appendChild(listContainer);
 	}
 
 	return listContainer;
 };
 
-export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => ({
-	id: 'htmlLegend',
-	afterUpdate(chart): void {
-		const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
+export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
+	return {
+		id: 'htmlLegend',
+		afterUpdate(chart): void {
+			const ul = getOrCreateLegendList(chart, id || 'legend', isLonger);
 
-		// Remove old legend items
-		while (ul.firstChild) {
-			ul.firstChild.remove();
-		}
-
-		// Reuse the built-in legendItems generator
-		const items = get(chart, [
-			'options',
-			'plugins',
-			'legend',
-			'labels',
-			'generateLabels',
-		])
-			? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
-					chart,
-			  )
-			: null;
-
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		items?.forEach((item: Record<any, any>, index: number) => {
-			const li = document.createElement('li');
-			li.style.alignItems = 'center';
-			li.style.cursor = 'pointer';
-			li.style.display = 'flex';
-			li.style.marginLeft = '10px';
-			// li.style.marginTop = '5px';
-
-			li.onclick = (): void => {
-				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				// @ts-ignore
-				const { type } = chart.config;
-				if (type === 'pie' || type === 'doughnut') {
-					// Pie and doughnut charts only have a single dataset and visibility is per item
-					chart.toggleDataVisibility(index);
-				} else {
-					chart.setDatasetVisibility(
-						item.datasetIndex,
-						!chart.isDatasetVisible(item.datasetIndex),
-					);
-				}
-				chart.update();
-			};
-
-			// Color box
-			const boxSpan = document.createElement('span');
-			boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
-			boxSpan.style.borderColor = `${item?.strokeStyle}`;
-			boxSpan.style.borderWidth = `${item.lineWidth}px`;
-			boxSpan.style.display = 'inline-block';
-			boxSpan.style.minHeight = '0.75rem';
-			boxSpan.style.marginRight = '0.5rem';
-			boxSpan.style.minWidth = '0.75rem';
-			boxSpan.style.borderRadius = '50%';
-
-			if (item.text) {
-				// Text
-				const textContainer = document.createElement('span');
-				textContainer.style.margin = '0';
-				textContainer.style.padding = '0';
-				textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
-
-				const text = document.createTextNode(item.text);
-				textContainer.appendChild(text);
-
-				li.appendChild(boxSpan);
-				li.appendChild(textContainer);
-				ul.appendChild(li);
+			// Remove old legend items
+			while (ul.firstChild) {
+				ul.firstChild.remove();
 			}
-		});
-	},
-});
+
+			// Reuse the built-in legendItems generator
+			const items = get(chart, [
+				'options',
+				'plugins',
+				'legend',
+				'labels',
+				'generateLabels',
+			])
+				? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
+						chart,
+				  )
+				: null;
+
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			items?.forEach((item: Record<any, any>, index: number) => {
+				const li = document.createElement('li');
+				li.style.alignItems = 'center';
+				li.style.cursor = 'pointer';
+				li.style.display = 'flex';
+				li.style.marginLeft = '10px';
+				li.style.marginTop = '5px';
+
+				li.onclick = (): void => {
+					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+					// @ts-ignore
+					const { type } = chart.config;
+					if (type === 'pie' || type === 'doughnut') {
+						// Pie and doughnut charts only have a single dataset and visibility is per item
+						chart.toggleDataVisibility(index);
+					} else {
+						chart.setDatasetVisibility(
+							item.datasetIndex,
+							!chart.isDatasetVisible(item.datasetIndex),
+						);
+					}
+					chart.update();
+				};
+
+				// Color box
+				const boxSpan = document.createElement('span');
+				boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
+				boxSpan.style.borderColor = `${item?.strokeStyle}`;
+				boxSpan.style.borderWidth = `${item.lineWidth}px`;
+				boxSpan.style.display = 'inline-block';
+				boxSpan.style.minHeight = '20px';
+				boxSpan.style.marginRight = '10px';
+				boxSpan.style.minWidth = '20px';
+				boxSpan.style.borderRadius = '50%';
+
+				if (item.text) {
+					// Text
+					const textContainer = document.createElement('span');
+					textContainer.style.margin = '0';
+					textContainer.style.padding = '0';
+					textContainer.style.textDecoration = item.hidden ? 'line-through' : '';
+
+					const text = document.createTextNode(item.text);
+					textContainer.appendChild(text);
+
+					li.appendChild(boxSpan);
+					li.appendChild(textContainer);
+					ul.appendChild(li);
+				}
+			});
+		},
+	};
+};

frontend/src/components/Graph/Plugin/Tooltip.ts

@@ -1,46 +0,0 @@
-import {
-	ActiveElement,
-	ChartTypeRegistry,
-	Point,
-	TooltipModel,
-	TooltipXAlignment,
-	TooltipYAlignment,
-} from 'chart.js';
-
-export function TooltipPosition(
-	this: TooltipModel<keyof ChartTypeRegistry>,
-	_: readonly ActiveElement[],
-	eventPosition: Point,
-): ITooltipPosition {
-	const {
-		chartArea: { width },
-		scales: { x, y },
-	} = this.chart;
-
-	const valueForPixelOnX = Number(x.getValueForPixel(eventPosition.x));
-	const valueForPixelonY = Number(y.getValueForPixel(eventPosition.y));
-
-	const rightmostWidth = this.width + x.getPixelForValue(valueForPixelOnX) + 20;
-
-	if (rightmostWidth > width) {
-		return {
-			x: x.getPixelForValue(valueForPixelOnX) - 20,
-			y: y.getPixelForValue(valueForPixelonY) + 10,
-			xAlign: 'right',
-			yAlign: 'top',
-		};
-	}
-	return {
-		x: x.getPixelForValue(valueForPixelOnX) + 20,
-		y: y.getPixelForValue(valueForPixelonY) + 10,
-		xAlign: 'left',
-		yAlign: 'top',
-	};
-}
-
-interface ITooltipPosition {
-	x: number;
-	y: number;
-	xAlign: TooltipXAlignment;
-	yAlign: TooltipYAlignment;
-}

frontend/src/components/Graph/Plugin/utils.ts

@@ -1,20 +0,0 @@
-import { ChartEvent } from 'chart.js';
-
-export type ChartEventHandler = (ev: ChartEvent | MouseEvent) => void;
-
-export function mergeDefaultOptions<T extends Record<string, unknown>>(
-	options: T,
-	defaultOptions: Required<T>,
-): Required<T> {
-	const sanitizedOptions = { ...options };
-	Object.keys(options).forEach((key) => {
-		if (sanitizedOptions[key as keyof T] === undefined) {
-			delete sanitizedOptions[key as keyof T];
-		}
-	});
-
-	return {
-		...defaultOptions,
-		...sanitizedOptions,
-	};
-}

frontend/src/components/Graph/helpers.ts

@@ -1,8 +0,0 @@
-import { themeColors } from 'constants/theme';
-
-export const getAxisLabelColor = (currentTheme: string): string => {
-	if (currentTheme === 'light') {
-		return themeColors.black;
-	}
-	return themeColors.whiteCream;
-};

frontend/src/components/Graph/index.tsx

@@ -23,28 +23,12 @@ import {
 } from 'chart.js';
 import * as chartjsAdapter from 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import isEqual from 'lodash-es/isEqual';
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
 import { hasData } from './hasData';
-import { getAxisLabelColor } from './helpers';
 import { legend } from './Plugin';
-import {
-	createDragSelectPlugin,
-	createDragSelectPluginOptions,
-	dragSelectPluginId,
-	DragSelectPluginOptions,
-} from './Plugin/DragSelect';
 import { emptyGraph } from './Plugin/EmptyGraph';
-import {
-	createIntersectionCursorPlugin,
-	createIntersectionCursorPluginOptions,
-	intersectionCursorPluginId,
-	IntersectionCursorPluginOptions,
-} from './Plugin/IntersectionCursor';
-import { TooltipPosition as TooltipPositionHandler } from './Plugin/Tooltip';
 import { LegendsContainer } from './styles';
 import { useXAxisTimeUnit } from './xAxisConfig';
 import { getToolTipValue, getYAxisFormattedValue } from './yAxisConfig';
@@ -68,8 +52,6 @@ Chart.register(
 	annotationPlugin,
 );
 
-Tooltip.positioners.custom = TooltipPositionHandler;
-
 function Graph({
 	animate = true,
 	data,
@@ -82,10 +64,7 @@ function Graph({
 	forceReRender,
 	staticLine,
 	containerHeight,
-	onDragSelect,
-	dragSelectColor,
 }: GraphProps): JSX.Element {
-	const nearestDatasetIndex = useRef<null | number>(null);
 	const chartRef = useRef<HTMLCanvasElement>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -112,7 +91,7 @@ function Graph({
 		}
 
 		if (chartRef.current !== null) {
-			const options: CustomChartOptions = {
+			const options: ChartOptions = {
 				animation: {
 					duration: animate ? 200 : 0,
 				},
@@ -156,10 +135,6 @@ function Graph({
 					},
 					tooltip: {
 						callbacks: {
-							title(context) {
-								const date = dayjs(context[0].parsed.x);
-								return date.format('MMM DD, YYYY, HH:mm:ss');
-							},
 							label(context) {
 								let label = context.dataset.label || '';
 
@@ -169,28 +144,10 @@ function Graph({
 								if (context.parsed.y !== null) {
 									label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
 								}
-
 								return label;
 							},
-							labelTextColor(labelData) {
-								if (labelData.datasetIndex === nearestDatasetIndex.current) {
-									return 'rgba(255, 255, 255, 1)';
-								}
-
-								return 'rgba(255, 255, 255, 0.75)';
-							},
 						},
-						position: 'custom',
 					},
-					[dragSelectPluginId]: createDragSelectPluginOptions(
-						!!onDragSelect,
-						onDragSelect,
-						dragSelectColor,
-					),
-					[intersectionCursorPluginId]: createIntersectionCursorPluginOptions(
-						!!onDragSelect,
-						currentTheme === 'dark' ? 'white' : 'black',
-					),
 				},
 				layout: {
 					padding: 0,
@@ -220,7 +177,6 @@ function Graph({
 							},
 						},
 						type: 'time',
-						ticks: { color: getAxisLabelColor(currentTheme) },
 					},
 					y: {
 						display: true,
@@ -229,7 +185,6 @@ function Graph({
 							color: getGridColor(),
 						},
 						ticks: {
-							color: getAxisLabelColor(currentTheme),
 							// Include a dollar sign in the ticks
 							callback(value) {
 								return getYAxisFormattedValue(value.toString(), yAxisUnit);
@@ -245,50 +200,18 @@ function Graph({
 						tension: 0,
 						cubicInterpolationMode: 'monotone',
 					},
-					point: {
-						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-						hoverBackgroundColor: (ctx: any) => {
-							if (ctx?.element?.options?.borderColor) {
-								return ctx.element.options.borderColor;
-							}
-							return 'rgba(0,0,0,0.1)';
-						},
-						hoverRadius: 5,
-					},
 				},
 				onClick: (event, element, chart) => {
 					if (onClickHandler) {
 						onClickHandler(event, element, chart, data);
 					}
 				},
-				onHover: (event, _, chart) => {
-					if (event.native) {
-						const interactions = chart.getElementsAtEventForMode(
-							event.native,
-							'nearest',
-							{
-								intersect: false,
-							},
-							true,
-						);
-
-						if (interactions[0]) {
-							nearestDatasetIndex.current = interactions[0].datasetIndex;
-						}
-					}
-				},
 			};
 
 			const chartHasData = hasData(data);
 			const chartPlugins = [];
 
-			if (chartHasData) {
-				chartPlugins.push(createIntersectionCursorPlugin());
-				chartPlugins.push(createDragSelectPlugin());
-			} else {
-				chartPlugins.push(emptyGraph);
-			}
-
+			if (!chartHasData) chartPlugins.push(emptyGraph);
 			chartPlugins.push(legend(name, data.datasets.length > 3));
 
 			lineChartRef.current = new Chart(chartRef.current, {
@@ -311,9 +234,6 @@ function Graph({
 		yAxisUnit,
 		onClickHandler,
 		staticLine,
-		onDragSelect,
-		dragSelectColor,
-		currentTheme,
 	]);
 
 	useEffect(() => {
@@ -328,19 +248,6 @@ function Graph({
 	);
 }
 
-declare module 'chart.js' {
-	interface TooltipPositionerMap {
-		custom: TooltipPositionerFunction<ChartType>;
-	}
-}
-
-type CustomChartOptions = ChartOptions & {
-	plugins: {
-		[dragSelectPluginId]: DragSelectPluginOptions | false;
-		[intersectionCursorPluginId]: IntersectionCursorPluginOptions | false;
-	};
-};
-
 interface GraphProps {
 	animate?: boolean;
 	type: ChartType;
@@ -353,8 +260,6 @@ interface GraphProps {
 	forceReRender?: boolean | null | number;
 	staticLine?: StaticLineProps | undefined;
 	containerHeight?: string | number;
-	onDragSelect?: (start: number, end: number) => void;
-	dragSelectColor?: string;
 }
 
 export interface StaticLineProps {
@@ -381,11 +286,6 @@ Graph.defaultProps = {
 	yAxisUnit: undefined,
 	forceReRender: undefined,
 	staticLine: undefined,
-	containerHeight: '90%',
-	onDragSelect: undefined,
-	dragSelectColor: undefined,
+	containerHeight: '85%',
 };
-
-export default memo(Graph, (prevProps, nextProps) =>
-	isEqual(prevProps.data, nextProps.data),
-);
+export default Graph;

frontend/src/components/Graph/styles.ts

@@ -1,28 +1,14 @@
-import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
 
 export const LegendsContainer = styled.div`
-	height: 10%;
+	height: 15%;
 
 	* {
 		::-webkit-scrollbar {
-			width: 0.3rem;
-		}
-		::-webkit-scrollbar:horizontal {
-			height: 0.3rem;
-		}
-		::-webkit-scrollbar-track {
-			background: transparent;
-		}
-		::-webkit-scrollbar-thumb {
-			background: ${themeColors.royalGrey};
-			border-radius: 0.625rem;
-		}
-		::-webkit-scrollbar-thumb:hover {
-			background: ${themeColors.matterhornGrey};
-		}
-		::-webkit-scrollbar-corner {
-			background: transparent;
+			display: none !important;
 		}
+
+		-ms-overflow-style: none !important; /* IE and Edge */
+		scrollbar-width: none !important; /* Firefox */
 	}
 `;

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -2,9 +2,7 @@ import { Button, Popover } from 'antd';
 import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
 import React, { memo, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Dispatch } from 'redux';
 import { AppState } from 'store/reducers';
-import AppActions from 'types/actions';
 import { SET_SEARCH_QUERY_STRING } from 'types/actions/logs';
 import { ILogsReducer } from 'types/reducer/logs';
 
@@ -16,7 +14,7 @@ function AddToQueryHOC({
 	const {
 		searchFilter: { queryString },
 	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
-	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const dispatch = useDispatch();
 
 	const generatedQuery = useMemo(
 		() => generateFilterQuery({ fieldKey, fieldValue, type: 'IN' }),
@@ -33,9 +31,7 @@ function AddToQueryHOC({
 		}
 		dispatch({
 			type: SET_SEARCH_QUERY_STRING,
-			payload: {
-				searchQueryString: updatedQueryString,
-			},
+			payload: updatedQueryString,
 		});
 	}, [dispatch, generatedQuery, queryString]);
 

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -1,5 +1,4 @@
-import { Popover } from 'antd';
-import { useNotifications } from 'hooks/useNotifications';
+import { notification, Popover } from 'antd';
 import React, { useCallback, useEffect } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
@@ -8,14 +7,14 @@ function CopyClipboardHOC({
 	children,
 }: CopyClipboardHOCProps): JSX.Element {
 	const [value, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
+
 	useEffect(() => {
 		if (value.value) {
-			notifications.success({
+			notification.success({
 				message: 'Copied to clipboard',
 			});
 		}
-	}, [value, notifications]);
+	}, [value]);
 
 	const onClick = useCallback((): void => {
 		setCopy(textToCopy);

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

@@ -1,96 +1,84 @@
 import { blue, grey, orange } from '@ant-design/colors';
 import { CopyFilled, ExpandAltOutlined } from '@ant-design/icons';
-import Convert from 'ansi-to-html';
 import { Button, Divider, Row, Typography } from 'antd';
 import { map } from 'd3';
 import dayjs from 'dayjs';
-import dompurify from 'dompurify';
-import { useNotifications } from 'hooks/useNotifications';
-// utils
 import { FlatLogData } from 'lib/logs/flatLogData';
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useCopyToClipboard } from 'react-use';
-// interfaces
 import { AppState } from 'store/reducers';
 import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { ILog } from 'types/api/logs/log';
 import { ILogsReducer } from 'types/reducer/logs';
 
-// components
 import AddToQueryHOC from '../AddToQueryHOC';
 import CopyClipboardHOC from '../CopyClipboardHOC';
-// styles
-import {
-	Container,
-	LogContainer,
-	LogText,
-	SelectedLog,
-	Text,
-	TextContainer,
-} from './styles';
+import { Container, Text, TextContainer } from './styles';
 import { isValidLogField } from './util';
 
-const convert = new Convert();
-
 interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
 }
 function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
-	const html = useMemo(
-		() => ({
-			__html: convert.toHtml(dompurify.sanitize(fieldValue)),
-		}),
-		[fieldValue],
-	);
-
 	return (
 		<TextContainer>
 			<Text ellipsis type="secondary">
-				{`${fieldKey}: `}
+				{fieldKey}
 			</Text>
 			<CopyClipboardHOC textToCopy={fieldValue}>
-				<LogText dangerouslySetInnerHTML={html} />
+				<Typography.Text ellipsis>
+					{': '}
+					{fieldValue}
+				</Typography.Text>
 			</CopyClipboardHOC>
 		</TextContainer>
 	);
 }
-
 function LogSelectedField({
 	fieldKey = '',
 	fieldValue = '',
 }: LogFieldProps): JSX.Element {
 	return (
-		<SelectedLog>
+		<div
+			style={{
+				display: 'flex',
+				overflow: 'hidden',
+				width: '100%',
+			}}
+		>
 			<AddToQueryHOC fieldKey={fieldKey} fieldValue={fieldValue}>
 				<Typography.Text>
+					{`"`}
 					<span style={{ color: blue[4] }}>{fieldKey}</span>
+					{`"`}
 				</Typography.Text>
 			</AddToQueryHOC>
 			<CopyClipboardHOC textToCopy={fieldValue}>
 				<Typography.Text ellipsis>
-					<span>{': '}</span>
-					<span style={{ color: orange[6] }}>{fieldValue || "''"}</span>
+					<span>
+						{': '}
+						{typeof fieldValue === 'string' && `"`}
+					</span>
+					<span style={{ color: orange[6] }}>{fieldValue}</span>
+					{typeof fieldValue === 'string' && `"`}
 				</Typography.Text>
 			</CopyClipboardHOC>
-		</SelectedLog>
+		</div>
 	);
 }
 
-interface ListLogViewProps {
+interface LogItemProps {
 	logData: ILog;
 }
-function ListLogView({ logData }: ListLogViewProps): JSX.Element {
+function LogItem({ logData }: LogItemProps): JSX.Element {
 	const {
 		fields: { selected },
 	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
-
 	const dispatch = useDispatch();
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
-
 	const [, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
 
 	const handleDetailedView = useCallback(() => {
 		dispatch({
@@ -101,41 +89,40 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
 
 	const handleCopyJSON = (): void => {
 		setCopy(JSON.stringify(logData, null, 2));
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
 	};
-
-	const updatedSelecedFields = useMemo(
-		() => selected.filter((e) => e.name !== 'id'),
-		[selected],
-	);
-
 	return (
 		<Container>
-			<div>
-				<LogContainer>
-					<>
-						<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
+			<div style={{ maxWidth: '100%' }}>
+				<div>
+					{'{'}
+					<div style={{ marginLeft: '0.5rem' }}>
+						<LogGeneralField
+							fieldKey="log"
+							fieldValue={flattenLogData.body as never}
+						/>
 						{flattenLogData.stream && (
-							<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
+							<LogGeneralField
+								fieldKey="stream"
+								fieldValue={flattenLogData.stream as never}
+							/>
 						)}
 						<LogGeneralField
 							fieldKey="timestamp"
 							fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
 						/>
-					</>
-				</LogContainer>
+					</div>
+					{'}'}
+				</div>
 				<div>
-					{map(updatedSelecedFields, (field) =>
-						isValidLogField(flattenLogData[field.name] as never) ? (
+					{map(selected, (field) => {
+						return isValidLogField(flattenLogData[field.name] as never) ? (
 							<LogSelectedField
 								key={field.name}
 								fieldKey={field.name}
 								fieldValue={flattenLogData[field.name] as never}
 							/>
-						) : null,
-					)}
+						) : null;
+					})}
 				</div>
 			</div>
 			<Divider style={{ padding: 0, margin: '0.4rem 0', opacity: 0.5 }} />
@@ -144,23 +131,23 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
 					size="small"
 					type="text"
 					onClick={handleDetailedView}
-					style={{ color: blue[5] }}
-					icon={<ExpandAltOutlined />}
+					style={{ color: blue[5], padding: 0, margin: 0 }}
 				>
-					View Details
+					{' '}
+					<ExpandAltOutlined /> View Details
 				</Button>
 				<Button
 					size="small"
 					type="text"
 					onClick={handleCopyJSON}
-					style={{ color: grey[1] }}
-					icon={<CopyFilled />}
+					style={{ padding: 0, margin: 0, color: grey[1] }}
 				>
-					Copy JSON
+					{' '}
+					<CopyFilled /> Copy JSON
 				</Button>
 			</Row>
 		</Container>
 	);
 }
 
-export default ListLogView;
+export default LogItem;

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

@@ -29,21 +29,3 @@ export const TextContainer = styled.div`
 	overflow: hidden;
 	width: 100%;
 `;
-
-export const LogContainer = styled.div`
-	margin-left: 0.5rem;
-`;
-
-export const LogText = styled.div`
-	display: inline-block;
-
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-`;
-
-export const SelectedLog = styled.div`
-	display: flex;
-	width: 100%;
-	overflow: hidden;
-`;

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

@@ -1 +0,0 @@
-export const rawLineStyle: React.CSSProperties = {};

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

@@ -1,63 +0,0 @@
-import { ExpandAltOutlined } from '@ant-design/icons';
-// const Convert = require('ansi-to-html');
-import Convert from 'ansi-to-html';
-import dayjs from 'dayjs';
-import dompurify from 'dompurify';
-// hooks
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import React, { useCallback, useMemo } from 'react';
-// interfaces
-import { ILog } from 'types/api/logs/log';
-
-// styles
-import {
-	ExpandIconWrapper,
-	RawLogContent,
-	RawLogViewContainer,
-} from './styles';
-
-const convert = new Convert();
-
-interface RawLogViewProps {
-	data: ILog;
-	linesPerRow: number;
-	onClickExpand: (log: ILog) => void;
-}
-
-function RawLogView(props: RawLogViewProps): JSX.Element {
-	const { data, linesPerRow, onClickExpand } = props;
-
-	const isDarkMode = useIsDarkMode();
-
-	const text = useMemo(
-		() => `${dayjs(data.timestamp / 1e6).format()} | ${data.body}`,
-		[data.timestamp, data.body],
-	);
-
-	const handleClickExpand = useCallback(() => {
-		onClickExpand(data);
-	}, [onClickExpand, data]);
-
-	const html = useMemo(
-		() => ({
-			__html: convert.toHtml(dompurify.sanitize(text)),
-		}),
-		[text],
-	);
-
-	return (
-		<RawLogViewContainer
-			onClick={handleClickExpand}
-			wrap={false}
-			align="middle"
-			$isDarkMode={isDarkMode}
-		>
-			<ExpandIconWrapper flex="30px">
-				<ExpandAltOutlined />
-			</ExpandIconWrapper>
-			<RawLogContent linesPerRow={linesPerRow} dangerouslySetInnerHTML={html} />
-		</RawLogViewContainer>
-	);
-}
-
-export default RawLogView;

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

@@ -1,46 +0,0 @@
-import { blue } from '@ant-design/colors';
-import { Col, Row } from 'antd';
-import styled from 'styled-components';
-
-export const RawLogViewContainer = styled(Row)<{ $isDarkMode: boolean }>`
-	width: 100%;
-	font-weight: 700;
-	font-size: 0.625rem;
-	line-height: 1.25rem;
-
-	transition: background-color 0.2s ease-in;
-
-	&:hover {
-		background-color: ${({ $isDarkMode }): string =>
-			$isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0, 0, 0, 0.1)'};
-	}
-`;
-
-export const ExpandIconWrapper = styled(Col)`
-	color: ${blue[6]};
-	padding: 0.25rem 0.375rem;
-	cursor: pointer;
-	font-size: 12px;
-`;
-
-interface RawLogContentProps {
-	linesPerRow: number;
-}
-
-export const RawLogContent = styled.div<RawLogContentProps>`
-	margin-bottom: 0;
-	font-family: Fira Code, monospace;
-	font-weight: 300;
-
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: ${(props): number => props.linesPerRow};
-	line-clamp: ${(props): number => props.linesPerRow};
-	-webkit-box-orient: vertical;
-
-	font-size: 1rem;
-	line-height: 2rem;
-
-	cursor: pointer;
-`;

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

@@ -1,18 +0,0 @@
-import { TableProps } from 'antd';
-import React from 'react';
-
-export const defaultCellStyle: React.CSSProperties = {
-	paddingTop: 4,
-	paddingBottom: 6,
-	paddingRight: 8,
-	paddingLeft: 8,
-};
-
-export const defaultTableStyle: React.CSSProperties = {
-	minWidth: '40rem',
-	maxWidth: '40rem',
-};
-
-export const tableScroll: TableProps<Record<string, unknown>>['scroll'] = {
-	x: true,
-};

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

@@ -1,127 +0,0 @@
-import { ExpandAltOutlined } from '@ant-design/icons';
-import Convert from 'ansi-to-html';
-import { Table, Typography } from 'antd';
-import { ColumnsType, ColumnType } from 'antd/es/table';
-import dayjs from 'dayjs';
-import dompurify from 'dompurify';
-// utils
-import { FlatLogData } from 'lib/logs/flatLogData';
-import React, { useMemo } from 'react';
-import { IField } from 'types/api/logs/fields';
-// interfaces
-import { ILog } from 'types/api/logs/log';
-
-// styles
-import { ExpandIconWrapper } from '../RawLogView/styles';
-// config
-import { defaultCellStyle, defaultTableStyle, tableScroll } from './config';
-import { TableBodyContent } from './styles';
-
-type ColumnTypeRender<T = unknown> = ReturnType<
-	NonNullable<ColumnType<T>['render']>
->;
-
-type LogsTableViewProps = {
-	logs: ILog[];
-	fields: IField[];
-	linesPerRow: number;
-	onClickExpand: (log: ILog) => void;
-};
-
-const convert = new Convert();
-
-function LogsTableView(props: LogsTableViewProps): JSX.Element {
-	const { logs, fields, linesPerRow, onClickExpand } = props;
-
-	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
-		logs,
-	]);
-
-	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
-		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
-			.filter((e) => e.name !== 'id')
-			.map(({ name }) => ({
-				title: name,
-				dataIndex: name,
-				key: name,
-				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
-					props: {
-						style: defaultCellStyle,
-					},
-					children: (
-						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
-							{field}
-						</Typography.Paragraph>
-					),
-				}),
-			}));
-
-		return [
-			{
-				title: '',
-				dataIndex: 'id',
-				key: 'expand',
-				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
-					props: {
-						style: defaultCellStyle,
-					},
-					children: (
-						<ExpandIconWrapper
-							onClick={(): void => {
-								onClickExpand((item as unknown) as ILog);
-							}}
-						>
-							<ExpandAltOutlined />
-						</ExpandIconWrapper>
-					),
-				}),
-			},
-			{
-				title: 'timestamp',
-				dataIndex: 'timestamp',
-				key: 'timestamp',
-				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (field): ColumnTypeRender<Record<string, unknown>> => {
-					const date = dayjs(field / 1e6).format();
-					return {
-						children: <Typography.Paragraph ellipsis>{date}</Typography.Paragraph>,
-					};
-				},
-			},
-			...fieldColumns,
-			{
-				title: 'body',
-				dataIndex: 'body',
-				key: 'body',
-				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
-					props: {
-						style: defaultTableStyle,
-					},
-					children: (
-						<TableBodyContent
-							dangerouslySetInnerHTML={{
-								__html: convert.toHtml(dompurify.sanitize(field)),
-							}}
-							linesPerRow={linesPerRow}
-						/>
-					),
-				}),
-			},
-		];
-	}, [fields, linesPerRow, onClickExpand]);
-
-	return (
-		<Table
-			size="small"
-			columns={columns}
-			dataSource={flattenLogData}
-			pagination={false}
-			rowKey="id"
-			bordered
-			scroll={tableScroll}
-		/>
-	);
-}
-
-export default LogsTableView;

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

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-interface TableBodyContentProps {
-	linesPerRow: number;
-}
-
-export const TableBodyContent = styled.div<TableBodyContentProps>`
-	margin-bottom: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: ${(props): number => props.linesPerRow};
-	line-clamp: ${(props): number => props.linesPerRow};
-	-webkit-box-orient: vertical;
-
-	font-size: 0.875rem;
-
-	line-height: 2rem;
-
-	cursor: pointer;
-`;

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import { render } from '@testing-library/react';
 import React from 'react';
 import { Provider } from 'react-redux';

frontend/src/components/ReleaseNote/index.tsx

@@ -48,9 +48,9 @@ function ReleaseNote({ path }: ReleaseNoteProps): JSX.Element | null {
 		(state) => state.app,
 	);
 
-	const c = allComponentMap.find((item) =>
-		item.match(path, currentVersion, userFlags),
-	);
+	const c = allComponentMap.find((item) => {
+		return item.match(path, currentVersion, userFlags);
+	});
 
 	if (!c) {
 		return null;

frontend/src/components/ResizeTable/ResizableHeader.tsx

@@ -1,44 +0,0 @@
-import React, { useMemo } from 'react';
-import { Resizable, ResizeCallbackData } from 'react-resizable';
-
-import { enableUserSelectHack } from './config';
-import { SpanStyle } from './styles';
-
-function ResizableHeader(props: ResizableHeaderProps): JSX.Element {
-	const { onResize, width, ...restProps } = props;
-
-	const handle = useMemo(
-		() => (
-			<SpanStyle
-				className="react-resizable-handle"
-				onClick={(e): void => e.stopPropagation()}
-			/>
-		),
-		[],
-	);
-
-	if (!width) {
-		// eslint-disable-next-line react/jsx-props-no-spreading
-		return <th {...restProps} />;
-	}
-
-	return (
-		<Resizable
-			width={width}
-			height={0}
-			handle={handle}
-			onResize={onResize}
-			draggableOpts={enableUserSelectHack}
-		>
-			{/* eslint-disable-next-line react/jsx-props-no-spreading */}
-			<th {...restProps} />
-		</Resizable>
-	);
-}
-
-interface ResizableHeaderProps {
-	onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;
-	width: number;
-}
-
-export default ResizableHeader;

frontend/src/components/ResizeTable/ResizeTable.tsx

@@ -1,51 +0,0 @@
-import { Table } from 'antd';
-import type { TableProps } from 'antd/es/table';
-import { ColumnsType } from 'antd/lib/table';
-import React, { useCallback, useMemo, useState } from 'react';
-import { ResizeCallbackData } from 'react-resizable';
-
-import ResizableHeader from './ResizableHeader';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function ResizeTable({ columns, ...restprops }: TableProps<any>): JSX.Element {
-	const [columnsData, setColumns] = useState<ColumnsType>(columns || []);
-
-	const handleResize = useCallback(
-		(index: number) => (
-			_e: React.SyntheticEvent<Element>,
-			{ size }: ResizeCallbackData,
-		): void => {
-			const newColumns = [...columnsData];
-			newColumns[index] = {
-				...newColumns[index],
-				width: size.width,
-			};
-			setColumns(newColumns);
-		},
-		[columnsData],
-	);
-
-	const mergeColumns = useMemo(
-		() =>
-			columnsData.map((col, index) => ({
-				...col,
-				onHeaderCell: (column: ColumnsType<unknown>[number]): unknown => ({
-					width: column.width,
-					onResize: handleResize(index),
-				}),
-			})),
-		[columnsData, handleResize],
-	);
-
-	return (
-		<Table
-			// eslint-disable-next-line react/jsx-props-no-spreading
-			{...restprops}
-			components={{ header: { cell: ResizableHeader } }}
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			columns={mergeColumns as ColumnsType<any>}
-		/>
-	);
-}
-
-export default ResizeTable;

frontend/src/components/ResizeTable/config.ts

@@ -1 +0,0 @@
-export const enableUserSelectHack = { enableUserSelectHack: false };

frontend/src/components/ResizeTable/index.ts

@@ -1,4 +0,0 @@
-import ResizableHeader from './ResizableHeader';
-import ResizeTable from './ResizeTable';
-
-export { ResizableHeader, ResizeTable };

frontend/src/components/ResizeTable/styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const SpanStyle = styled.span`
-	position: absolute;
-	right: -5px;
-	bottom: 0;
-	z-index: 1;
-	width: 10px;
-	height: 100%;
-	cursor: col-resize;
-`;

frontend/src/components/Spinner/index.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 
 import { SpinerStyle } from './styles';
 
-function Spinner({ size, tip, height, style }: SpinnerProps): JSX.Element {
+function Spinner({ size, tip, height }: SpinnerProps): JSX.Element {
 	return (
-		<SpinerStyle height={height} style={style}>
+		<SpinerStyle height={height}>
 			<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />} />
 		</SpinerStyle>
 	);
@@ -16,13 +16,11 @@ interface SpinnerProps {
 	size?: SpinProps['size'];
 	tip?: SpinProps['tip'];
 	height?: React.CSSProperties['height'];
-	style?: React.CSSProperties;
 }
 Spinner.defaultProps = {
 	size: undefined,
 	tip: undefined,
 	height: undefined,
-	style: {},
 };
 
 export default Spinner;

frontend/src/components/TextToolTip/index.tsx

@@ -6,16 +6,18 @@ import React from 'react';
 function TextToolTip({ text, url }: TextToolTipProps): JSX.Element {
 	return (
 		<Tooltip
-			overlay={(): JSX.Element => (
-				<div>
-					{`${text} `}
-					{url && (
-						<a href={url} rel="noopener noreferrer" target="_blank">
-							here
-						</a>
-					)}
-				</div>
-			)}
+			overlay={(): JSX.Element => {
+				return (
+					<div>
+						{`${text} `}
+						{url && (
+							<a href={url} rel="noopener noreferrer" target="_blank">
+								here
+							</a>
+						)}
+					</div>
+				);
+			}}
 		>
 			<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
 		</Tooltip>

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,8 +0,0 @@
-import { Typography } from 'antd';
-import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
-import React from 'react';
-
-export const menuItems = timeItems.map((item) => ({
-	key: item.enum,
-	label: <Typography>{item.name}</Typography>,
-}));

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,11 +1,10 @@
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown, Menu, Typography } from 'antd';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
 } from 'container/NewWidget/RightContainer/timeItems';
 import React, { useCallback } from 'react';
 
-import { menuItems } from './config';
 import { TextContainer } from './styles';
 
 function TimePreference({
@@ -25,7 +24,15 @@ function TimePreference({
 	return (
 		<TextContainer noButtonMargin>
 			<Dropdown
-				overlay={<Menu onClick={timeMenuItemOnChangeHandler} items={menuItems} />}
+				overlay={
+					<Menu>
+						{TimeItems.map((item) => (
+							<Menu.Item onClick={timeMenuItemOnChangeHandler} key={item.enum}>
+								<Typography>{item.name}</Typography>
+							</Menu.Item>
+						))}
+					</Menu>
+				}
 			>
 				<Button>{selectedTime.name}</Button>
 			</Dropdown>

frontend/src/components/TimePreferenceDropDown/styles.ts

@@ -8,6 +8,7 @@ export const TextContainer = styled.div<TextContainerProps>`
 	display: flex;
 
 	> button {
-		margin-left: ${({ noButtonMargin }): string =>
-			noButtonMargin ? '0' : '0.5rem'}
+		margin-left: ${({ noButtonMargin }): string => {
+			return noButtonMargin ? '0' : '0.5rem';
+		}}
 `;

frontend/src/constants/localStorage.ts

@@ -4,6 +4,4 @@ export enum LOCALSTORAGE {
 	AUTH_TOKEN = 'AUTH_TOKEN',
 	REFRESH_AUTH_TOKEN = 'REFRESH_AUTH_TOKEN',
 	THEME = 'THEME',
-	LOGS_VIEW_MODE = 'LOGS_VIEW_MODE',
-	LOGS_LINES_PER_ROW = 'LOGS_LINES_PER_ROW',
 }

frontend/src/constants/resourceAttributes.ts

@@ -8,11 +8,11 @@ export const OperatorConversions: Array<{
 	{
 		label: 'IN',
 		metricValue: '=~',
-		traceValue: 'In',
+		traceValue: 'in',
 	},
 	{
 		label: 'Not IN',
 		metricValue: '!~',
-		traceValue: 'NotIn',
+		traceValue: 'not in',
 	},
 ];

frontend/src/constants/theme.ts

@@ -1,43 +0,0 @@
-const themeColors = {
-	chartcolors: {
-		dodgerBlue: '#2F80ED',
-		mediumOrchid: '#BB6BD9',
-		seaBuckthorn: '#F2994A',
-		seaGreen: '#219653',
-		turquoiseBlue: '#56CCF2',
-		festivalOrange: '#F2C94C',
-		silver: '#BDBDBD',
-		outrageousOrange: '#FF6633',
-		roseBud: '#FFB399',
-		magentaPink: '#FF33FF',
-		canary: '#FFFF99',
-		deepSkyBlue: '#00B3E6',
-		goldTips: '#E6B333',
-		royalBlue: '#3366E6',
-		avocado: '#999966',
-		mintGreen: '#99FF99',
-		chestnut: '#B34D4D',
-		lima: '#80B300',
-		olive: '#809900',
-		beautyBush: '#E6B3B3',
-		danube: '#6680B3',
-		oliveDrab: '#66991A',
-		lavenderRose: '#FF99E6',
-		electricLime: '#CCFF1A',
-		radicalRed: '#FF1A66',
-		harleyOrange: '#E6331A',
-		turquoise: '#33FFCC',
-		gladeGreen: '#66994D',
-		hemlock: '#66664D',
-		vidaLoca: '#4D8000',
-		rust: '#B33300',
-	},
-	errorColor: '#d32f2f',
-	royalGrey: '#888888',
-	matterhornGrey: '#555555',
-	whiteCream: '#ffffffd5',
-	black: '#000000',
-	lightgrey: '#ddd',
-};
-
-export { themeColors };

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,10 +1,8 @@
 /* eslint-disable react/display-name */
-import { Button } from 'antd';
+import { Button, notification, Table } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
-import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import useComponentPermission from 'hooks/useComponentPermission';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +16,7 @@ import Delete from './Delete';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
-	const { notifications } = useNotifications();
+	const [notifications, Element] = notification.useNotification();
 	const [channels, setChannels] = useState<Channels[]>(allChannels);
 	const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 	const [action] = useComponentPermission(['new_alert_action'], role);
@@ -36,13 +34,11 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			title: t('column_channel_name'),
 			dataIndex: 'name',
 			key: 'name',
-			width: 100,
 		},
 		{
 			title: t('column_channel_type'),
 			dataIndex: 'type',
 			key: 'type',
-			width: 80,
 		},
 	];
 
@@ -52,7 +48,6 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			dataIndex: 'id',
 			key: 'action',
 			align: 'center',
-			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
 					<Button onClick={(): void => onClickEditHandler(id)} type="link">
@@ -64,7 +59,13 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 		});
 	}
 
-	return <ResizeTable columns={columns} dataSource={channels} rowKey="id" />;
+	return (
+		<>
+			{Element}
+
+			<Table rowKey="id" dataSource={channels} columns={columns} />
+		</>
+	);
 }
 
 interface AlertChannelsProps {

frontend/src/container/AllError/index.tsx

@@ -3,21 +3,20 @@ import {
 	Button,
 	Card,
 	Input,
+	notification,
 	Space,
+	Table,
 	TableProps,
 	Tooltip,
 	Typography,
 } from 'antd';
-import { ColumnType, TablePaginationConfig } from 'antd/es/table';
-import { FilterValue, SorterResult } from 'antd/es/table/interface';
+import { ColumnType } from 'antd/es/table';
 import { ColumnsType } from 'antd/lib/table';
 import { FilterConfirmProps } from 'antd/lib/table/interface';
 import getAll from 'api/errors/getAll';
 import getErrorCounts from 'api/errors/getErrorCounts';
-import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
-import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import history from 'lib/history';
@@ -31,7 +30,6 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
-import { FilterDropdownExtendsProps } from './types';
 import {
 	extractFilterValues,
 	getDefaultFilterValue,
@@ -127,15 +125,14 @@ function AllErrors(): JSX.Element {
 			enabled: !loading,
 		},
 	]);
-	const { notifications } = useNotifications();
 
 	useEffect(() => {
 		if (data?.error) {
-			notifications.error({
+			notification.error({
 				message: data.error || t('something_went_wrong'),
 			});
 		}
-	}, [data?.error, data?.payload, t, notifications]);
+	}, [data?.error, data?.payload, t]);
 
 	const getDateValue = (value: string): JSX.Element => (
 		<Typography>{dayjs(value).format('DD/MM/YYYY HH:mm:ss A')}</Typography>
@@ -179,45 +176,41 @@ function AllErrors(): JSX.Element {
 	);
 
 	const filterDropdownWrapper = useCallback(
-		({
-			setSelectedKeys,
-			selectedKeys,
-			confirm,
-			placeholder,
-			filterKey,
-		}: FilterDropdownExtendsProps) => (
-			<Card size="small">
-				<Space align="start" direction="vertical">
-					<Input
-						placeholder={placeholder}
-						value={selectedKeys[0]}
-						onChange={(e): void =>
-							setSelectedKeys(e.target.value ? [e.target.value] : [])
-						}
-						allowClear
-						defaultValue={getDefaultFilterValue(
-							filterKey,
-							getUpdatedServiceName,
-							getUpdatedExceptionType,
-						)}
-						onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
-					/>
-					<Button
-						type="primary"
-						onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
-						icon={<SearchOutlined />}
-						size="small"
-					>
-						Search
-					</Button>
-				</Space>
-			</Card>
-		),
+		({ setSelectedKeys, selectedKeys, confirm, placeholder, filterKey }) => {
+			return (
+				<Card size="small">
+					<Space align="start" direction="vertical">
+						<Input
+							placeholder={placeholder}
+							value={selectedKeys[0]}
+							onChange={(e): void =>
+								setSelectedKeys(e.target.value ? [e.target.value] : [])
+							}
+							allowClear
+							defaultValue={getDefaultFilterValue(
+								filterKey,
+								getUpdatedServiceName,
+								getUpdatedExceptionType,
+							)}
+							onPressEnter={handleSearch(confirm, selectedKeys[0], filterKey)}
+						/>
+						<Button
+							type="primary"
+							onClick={handleSearch(confirm, selectedKeys[0], filterKey)}
+							icon={<SearchOutlined />}
+							size="small"
+						>
+							Search
+						</Button>
+					</Space>
+				</Card>
+			);
+		},
 		[getUpdatedExceptionType, getUpdatedServiceName, handleSearch],
 	);
 
-	const onExceptionTypeFilter: ColumnType<Exception>['onFilter'] = useCallback(
-		(value: unknown, record: Exception): boolean => {
+	const onExceptionTypeFilter = useCallback(
+		(value, record: Exception): boolean => {
 			if (record.exceptionType && typeof value === 'string') {
 				return record.exceptionType.toLowerCase().includes(value.toLowerCase());
 			}
@@ -227,7 +220,7 @@ function AllErrors(): JSX.Element {
 	);
 
 	const onApplicationTypeFilter = useCallback(
-		(value: unknown, record: Exception): boolean => {
+		(value, record: Exception): boolean => {
 			if (record.serviceName && typeof value === 'string') {
 				return record.serviceName.toLowerCase().includes(value.toLowerCase());
 			}
@@ -259,7 +252,6 @@ function AllErrors(): JSX.Element {
 	const columns: ColumnsType<Exception> = [
 		{
 			title: 'Exception Type',
-			width: 100,
 			dataIndex: 'exceptionType',
 			key: 'exceptionType',
 			...getFilter(onExceptionTypeFilter, 'Search By Exception', 'exceptionType'),
@@ -285,7 +277,6 @@ function AllErrors(): JSX.Element {
 			title: 'Error Message',
 			dataIndex: 'exceptionMessage',
 			key: 'exceptionMessage',
-			width: 100,
 			render: (value): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
 					<Typography.Paragraph
@@ -300,7 +291,6 @@ function AllErrors(): JSX.Element {
 		},
 		{
 			title: 'Count',
-			width: 50,
 			dataIndex: 'exceptionCount',
 			key: 'exceptionCount',
 			sorter: true,
@@ -313,7 +303,6 @@ function AllErrors(): JSX.Element {
 		{
 			title: 'Last Seen',
 			dataIndex: 'lastSeen',
-			width: 80,
 			key: 'lastSeen',
 			render: getDateValue,
 			sorter: true,
@@ -326,7 +315,6 @@ function AllErrors(): JSX.Element {
 		{
 			title: 'First Seen',
 			dataIndex: 'firstSeen',
-			width: 80,
 			key: 'firstSeen',
 			render: getDateValue,
 			sorter: true,
@@ -339,7 +327,6 @@ function AllErrors(): JSX.Element {
 		{
 			title: 'Application',
 			dataIndex: 'serviceName',
-			width: 100,
 			key: 'serviceName',
 			sorter: true,
 			defaultSortOrder: getDefaultOrder(
@@ -356,11 +343,7 @@ function AllErrors(): JSX.Element {
 	];
 
 	const onChangeHandler: TableProps<Exception>['onChange'] = useCallback(
-		(
-			paginations: TablePaginationConfig,
-			filters: Record<string, FilterValue | null>,
-			sorter: SorterResult<Exception>[] | SorterResult<Exception>,
-		) => {
+		(paginations, filters, sorter) => {
 			if (!Array.isArray(sorter)) {
 				const { pageSize = 0, current = 0 } = paginations;
 				const { columnKey = '', order } = sorter;
@@ -386,10 +369,10 @@ function AllErrors(): JSX.Element {
 	);
 
 	return (
-		<ResizeTable
-			columns={columns}
+		<Table
 			tableLayout="fixed"
 			dataSource={data?.payload as Exception[]}
+			columns={columns}
 			rowKey="firstSeen"
 			loading={isLoading || false || errorCountResponse.status === 'loading'}
 			pagination={{

frontend/src/container/AllError/types.ts

@@ -1,9 +0,0 @@
-import { FilterDropdownProps } from 'antd/es/table/interface';
-
-export interface FilterDropdownExtendsProps {
-	placeholder: string;
-	filterKey: string;
-	confirm: FilterDropdownProps['confirm'];
-	setSelectedKeys: FilterDropdownProps['setSelectedKeys'];
-	selectedKeys: FilterDropdownProps['selectedKeys'];
-}

frontend/src/container/AllError/utils.ts

@@ -20,14 +20,15 @@ export const urlKey = {
 	serviceName: 'serviceName',
 };
 
-export const isOrderParams = (orderBy: string | null): orderBy is OrderBy =>
-	!!(
+export const isOrderParams = (orderBy: string | null): orderBy is OrderBy => {
+	return !!(
 		orderBy === 'serviceName' ||
 		orderBy === 'exceptionCount' ||
 		orderBy === 'lastSeen' ||
 		orderBy === 'firstSeen' ||
 		orderBy === 'exceptionType'
 	);
+};
 
 export const getOrder = (order: string | null): Order => {
 	if (isOrder(order)) {
@@ -81,9 +82,12 @@ export const getDefaultOrder = (
 	return undefined;
 };
 
-export const getNanoSeconds = (date: string): string =>
-	Math.floor(new Date(date).getTime() / 1e3).toString() +
-	String(Timestamp.fromString(date).getNano().toString()).padStart(9, '0');
+export const getNanoSeconds = (date: string): string => {
+	return (
+		Math.floor(new Date(date).getTime() / 1e3).toString() +
+		String(Timestamp.fromString(date).getNano().toString()).padStart(9, '0')
+	);
+};
 
 export const getUpdatePageSize = (pageSize: string | null): number => {
 	if (pageSize) {

frontend/src/container/AppLayout/index.tsx

@@ -1,3 +1,4 @@
+import { notification } from 'antd';
 import getDynamicConfigs from 'api/dynamicConfigs/getDynamicConfigs';
 import getFeaturesFlags from 'api/features/getFeatureFlags';
 import getUserLatestVersion from 'api/user/getLatestVersion';
@@ -5,7 +6,6 @@ import getUserVersion from 'api/user/getVersion';
 import Header from 'container/Header';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
-import { useNotifications } from 'hooks/useNotifications';
 import React, { ReactNode, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -91,8 +91,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const latestVersionCounter = useRef(0);
 	const latestConfigCounter = useRef(0);
 
-	const { notifications } = useNotifications();
-
 	useEffect(() => {
 		if (
 			getUserLatestVersionResponse.isFetched &&
@@ -107,7 +105,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					isError: true,
 				},
 			});
-			notifications.error({
+			notification.error({
 				message: t('oops_something_went_wrong_version'),
 			});
 		}
@@ -125,7 +123,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					isError: true,
 				},
 			});
-			notifications.error({
+			notification.error({
 				message: t('oops_something_went_wrong_version'),
 			});
 		}
@@ -153,8 +151,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 				type: UPDATE_CURRENT_VERSION,
 				payload: {
 					currentVersion: getUserVersionResponse.data.payload.version,
-					ee: getUserVersionResponse.data.payload.ee,
-					setupCompleted: getUserVersionResponse.data.payload.setupCompleted,
 				},
 			});
 		}
@@ -223,7 +219,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		getDynamicConfigsResponse.data,
 		getDynamicConfigsResponse.isFetched,
 		getDynamicConfigsResponse.isSuccess,
-		notifications,
 	]);
 
 	const isToDisplayLayout = isLoggedIn;

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

@@ -6,6 +6,7 @@ import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
 
 import ErrorLink from './ErrorLink';
 import LinkContainer from './Link';
+import { MenuItem } from './styles';
 
 function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
 	const sortedConfig = useMemo(
@@ -15,29 +16,31 @@ function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
 
 	const isDarkMode = useIsDarkMode();
 
-	const items = sortedConfig.map((item) => {
-		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-		const Component = React.lazy(
-			() => import(`@ant-design/icons/es/icons/${iconName}.js`),
-		);
-		return {
-			key: item.text + item.href,
-			label: (
-				<ErrorLink key={item.text + item.href}>
-					<Suspense fallback={<Spinner height="5vh" />}>
-						<LinkContainer href={item.href}>
-							<Space size="small" align="start">
-								<Component />
-								{item.text}
-							</Space>
-						</LinkContainer>
-					</Suspense>
-				</ErrorLink>
-			),
-		};
-	});
+	return (
+		<Menu>
+			{sortedConfig.map((item) => {
+				const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
 
-	return <Menu items={items} />;
+				const Component = React.lazy(
+					() => import(`@ant-design/icons/es/icons/${iconName}.js`),
+				);
+				return (
+					<ErrorLink key={item.text + item.href}>
+						<Suspense fallback={<Spinner height="5vh" />}>
+							<MenuItem>
+								<LinkContainer href={item.href}>
+									<Space size="small" align="start">
+										<Component />
+										{item.text}
+									</Space>
+								</LinkContainer>
+							</MenuItem>
+						</Suspense>
+					</ErrorLink>
+				);
+			})}
+		</Menu>
+	);
 }
 
 interface HelpToolTipProps {

frontend/src/container/ConfigDropdown/Config/styles.ts

@@ -1,17 +1,10 @@
 import { Menu } from 'antd';
 import styled from 'styled-components';
 
-export const MenuDropdown = styled(Menu)`
+export const MenuItem = styled(Menu.Item)`
 	&&& {
-		.ant-dropdown,
-		.ant-dropdown-menu,
-		.ant-dropdown-menu-item {
-			padding: 0px;
-		}
-		.ant-menu-item {
-			height: 1.75rem;
-			display: flex;
-			align-items: center;
-		}
+		height: 1.75rem;
+		display: flex;
+		align-items: center;
 	}
 `;

frontend/src/container/ConfigDropdown/index.tsx

@@ -4,16 +4,14 @@ import {
 	QuestionCircleFilled,
 	QuestionCircleOutlined,
 } from '@ant-design/icons';
-import { Dropdown, Space } from 'antd';
+import { Dropdown, Menu, Space } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
 import AppReducer from 'types/reducer/app';
 
 import HelpToolTip from './Config';
-import { MenuDropdown } from './Config/styles';
 
 function DynamicConfigDropdown({
 	frontendId,
@@ -34,16 +32,6 @@ function DynamicConfigDropdown({
 		setIsHelpDropDownOpen(!isHelpDropDownOpen);
 	};
 
-	const menuItems = useMemo(
-		() => [
-			{
-				key: '1',
-				label: <HelpToolTip config={config as ConfigProps} />,
-			},
-		],
-		[config],
-	);
-
 	if (!config) {
 		return <div />;
 	}
@@ -55,7 +43,11 @@ function DynamicConfigDropdown({
 		<Dropdown
 			onVisibleChange={onToggleHandler}
 			trigger={['click']}
-			overlay={<MenuDropdown items={menuItems} />}
+			overlay={
+				<Menu>
+					<HelpToolTip config={config} />
+				</Menu>
+			}
 			visible={isHelpDropDownOpen}
 		>
 			<Space align="center">

frontend/src/container/CreateAlertChannels/index.tsx

@@ -1,4 +1,4 @@
-import { Form } from 'antd';
+import { Form, notification } from 'antd';
 import createPagerApi from 'api/channels/createPager';
 import createSlackApi from 'api/channels/createSlack';
 import createWebhookApi from 'api/channels/createWebhook';
@@ -7,7 +7,6 @@ import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -59,7 +58,7 @@ function CreateAlertChannels({
 	});
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
-	const { notifications } = useNotifications();
+	const [notifications, NotificationElement] = notification.useNotification();
 
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
@@ -79,17 +78,16 @@ function CreateAlertChannels({
 		[type, selectedConfig],
 	);
 
-	const prepareSlackRequest = useCallback(
-		() => ({
+	const prepareSlackRequest = useCallback(() => {
+		return {
 			api_url: selectedConfig?.api_url || '',
 			channel: selectedConfig?.channel || '',
 			name: selectedConfig?.name || '',
 			send_resolved: true,
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
-		}),
-		[selectedConfig],
-	);
+		};
+	}, [selectedConfig]);
 
 	const onSlackHandler = useCallback(async () => {
 		setSavingState(true);
@@ -337,6 +335,7 @@ function CreateAlertChannels({
 				onSaveHandler,
 				savingState,
 				testingState,
+				NotificationElement,
 				title: t('page_title_create'),
 				initialValue: {
 					type,

frontend/src/container/CreateAlertRule/defaults.ts

@@ -6,16 +6,6 @@ import {
 	defaultMatchType,
 } from 'types/api/alerts/def';
 
-const defaultAlertDescription =
-	'This alert is fired when the defined metric (current value: {{$value}}) crosses the threshold ({{$threshold}})';
-const defaultAlertSummary =
-	'The rule threshold is set to {{$threshold}}, and the observed metric value is {{$value}}';
-
-const defaultAnnotations = {
-	description: defaultAlertDescription,
-	summary: defaultAlertSummary,
-};
-
 export const alertDefaults: AlertDef = {
 	alertType: AlertTypes.METRICS_BASED_ALERT,
 	condition: {
@@ -48,7 +38,9 @@ export const alertDefaults: AlertDef = {
 	labels: {
 		severity: 'warning',
 	},
-	annotations: defaultAnnotations,
+	annotations: {
+		description: 'A new alert',
+	},
 	evalWindow: defaultEvalWindow,
 };
 
@@ -93,7 +85,9 @@ export const logAlertDefaults: AlertDef = {
 		severity: 'warning',
 		details: `${window.location.protocol}//${window.location.host}/logs`,
 	},
-	annotations: defaultAnnotations,
+	annotations: {
+		description: 'A new log-based alert',
+	},
 	evalWindow: defaultEvalWindow,
 };
 
@@ -138,7 +132,9 @@ export const traceAlertDefaults: AlertDef = {
 		severity: 'warning',
 		details: `${window.location.protocol}//${window.location.host}/traces`,
 	},
-	annotations: defaultAnnotations,
+	annotations: {
+		description: 'A new trace-based alert',
+	},
 	evalWindow: defaultEvalWindow,
 };
 
@@ -183,6 +179,8 @@ export const exceptionAlertDefaults: AlertDef = {
 		severity: 'warning',
 		details: `${window.location.protocol}//${window.location.host}/exceptions`,
 	},
-	annotations: defaultAnnotations,
+	annotations: {
+		description: 'A new exceptions-based alert',
+	},
 	evalWindow: defaultEvalWindow,
 };

frontend/src/container/EditAlertChannels/index.tsx

@@ -1,4 +1,4 @@
-import { Form } from 'antd';
+import { Form, notification } from 'antd';
 import editPagerApi from 'api/channels/editPager';
 import editSlackApi from 'api/channels/editSlack';
 import editWebhookApi from 'api/channels/editWebhook';
@@ -17,7 +17,6 @@ import {
 	WebhookType,
 } from 'container/CreateAlertChannels/config';
 import FormAlertChannels from 'container/FormAlertChannels';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,7 +36,7 @@ function EditAlertChannels({
 	});
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
-	const { notifications } = useNotifications();
+	const [notifications, NotificationElement] = notification.useNotification();
 	const { id } = useParams<{ id: string }>();
 
 	const [type, setType] = useState<ChannelType>(
@@ -48,8 +47,8 @@ function EditAlertChannels({
 		setType(value as ChannelType);
 	}, []);
 
-	const prepareSlackRequest = useCallback(
-		() => ({
+	const prepareSlackRequest = useCallback(() => {
+		return {
 			api_url: selectedConfig?.api_url || '',
 			channel: selectedConfig?.channel || '',
 			name: selectedConfig?.name || '',
@@ -57,9 +56,8 @@ function EditAlertChannels({
 			text: selectedConfig?.text || '',
 			title: selectedConfig?.title || '',
 			id,
-		}),
-		[id, selectedConfig],
-	);
+		};
+	}, [id, selectedConfig]);
 
 	const onSlackEditHandler = useCallback(async () => {
 		setSavingState(true);
@@ -145,8 +143,8 @@ function EditAlertChannels({
 		setSavingState(false);
 	}, [prepareWebhookRequest, t, notifications, selectedConfig]);
 
-	const preparePagerRequest = useCallback(
-		() => ({
+	const preparePagerRequest = useCallback(() => {
+		return {
 			name: selectedConfig.name || '',
 			routing_key: selectedConfig.routing_key,
 			client: selectedConfig.client,
@@ -159,9 +157,8 @@ function EditAlertChannels({
 			details: selectedConfig.details,
 			detailsArray: JSON.parse(selectedConfig.details || '{}'),
 			id,
-		}),
-		[id, selectedConfig],
-	);
+		};
+	}, [id, selectedConfig]);
 
 	const onPagerEditHandler = useCallback(async () => {
 		setSavingState(true);
@@ -282,6 +279,7 @@ function EditAlertChannels({
 				onSaveHandler,
 				testingState,
 				savingState,
+				NotificationElement,
 				title: t('page_title_edit'),
 				initialValue,
 				editing: true,

frontend/src/container/ErrorDetails/index.tsx

@@ -1,10 +1,8 @@
-import { Button, Divider, Space, Typography } from 'antd';
+import { Button, Divider, notification, Space, Table, Typography } from 'antd';
 import getNextPrevId from 'api/errors/getNextPrevId';
 import Editor from 'components/Editor';
-import { ResizeTable } from 'components/ResizeTable';
 import { getNanoSeconds } from 'container/AllError/utils';
 import dayjs from 'dayjs';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { urlKey } from 'pages/ErrorDetails/utils';
 import React, { useMemo, useState } from 'react';
@@ -55,14 +53,12 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 		() => [
 			{
 				title: 'Key',
-				width: 100,
 				dataIndex: 'key',
 				key: 'key',
 			},
 			{
 				title: 'Value',
 				dataIndex: 'value',
-				width: 100,
 				key: 'value',
 			},
 		],
@@ -81,15 +77,13 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 		[],
 	);
 
-	const { notifications } = useNotifications();
-
 	const onClickErrorIdHandler = async (
 		id: string,
 		timestamp: string,
 	): Promise<void> => {
 		try {
 			if (id.length === 0) {
-				notifications.error({
+				notification.error({
 					message: 'Error Id cannot be empty',
 				});
 				return;
@@ -101,7 +95,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 				}&timestamp=${getNanoSeconds(timestamp)}&errorId=${id}`,
 			);
 		} catch (error) {
-			notifications.error({
+			notification.error({
 				message: t('something_went_wrong'),
 			});
 		}
@@ -173,7 +167,7 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
 
 			<EditorContainer>
 				<Space direction="vertical">
-					<ResizeTable columns={columns} tableLayout="fixed" dataSource={data} />
+					<Table tableLayout="fixed" columns={columns} dataSource={data} />
 				</Space>
 			</EditorContainer>
 		</>

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

@@ -1,4 +1,5 @@
-import { Form, Input, Select } from 'antd';
+import { Input, Select } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import { LabelFilterStatement } from 'container/CreateAlertChannels/config';
 import React from 'react';
 
@@ -9,7 +10,7 @@ const { Option } = Select;
 // point
 function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
 	return (
-		<Form.Item name="label_filter" label="Notify When (Optional)">
+		<FormItem name="label_filter" label="Notify When (Optional)">
 			<Input.Group compact>
 				<Select
 					defaultValue="Severity"
@@ -50,7 +51,7 @@ function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
 					}}
 				/>
 			</Input.Group>
-		</Form.Item>
+		</FormItem>
 	);
 }
 

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

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -10,7 +11,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 	const { t } = useTranslation('channels');
 	return (
 		<>
-			<Form.Item name="routing_key" label={t('field_pager_routing_key')} required>
+			<FormItem name="routing_key" label={t('field_pager_routing_key')} required>
 				<Input
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
@@ -19,9 +20,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}));
 					}}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="description"
 				help={t('help_pager_description')}
 				label={t('field_pager_description')}
@@ -37,9 +38,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 					}
 					placeholder={t('placeholder_pager_description')}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="severity"
 				help={t('help_pager_severity')}
 				label={t('field_pager_severity')}
@@ -52,9 +53,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="details"
 				help={t('help_pager_details')}
 				label={t('field_pager_details')}
@@ -68,9 +69,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="component"
 				help={t('help_pager_component')}
 				label={t('field_pager_component')}
@@ -83,9 +84,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="group"
 				help={t('help_pager_group')}
 				label={t('field_pager_group')}
@@ -98,9 +99,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="class"
 				help={t('help_pager_class')}
 				label={t('field_pager_class')}
@@ -113,8 +114,8 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
-			<Form.Item
+			</FormItem>
+			<FormItem
 				name="client"
 				help={t('help_pager_client')}
 				label={t('field_pager_client')}
@@ -127,9 +128,9 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="client_url"
 				help={t('help_pager_client_url')}
 				label={t('field_pager_client_url')}
@@ -142,7 +143,7 @@ function PagerForm({ setSelectedConfig }: PagerFormProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 		</>
 	);
 }

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

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -11,7 +12,7 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 
 	return (
 		<>
-			<Form.Item name="api_url" label={t('field_webhook_url')}>
+			<FormItem name="api_url" label={t('field_webhook_url')}>
 				<Input
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
@@ -20,9 +21,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 						}));
 					}}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item
+			<FormItem
 				name="channel"
 				help={t('slack_channel_help')}
 				label={t('field_slack_recipient')}
@@ -35,9 +36,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item name="title" label={t('field_slack_title')}>
+			<FormItem name="title" label={t('field_slack_title')}>
 				<TextArea
 					rows={4}
 					// value={`[{{ .Status | toUpper }}{{ if eq .Status \"firing\" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}\n{{- if gt (len .CommonLabels) (len .GroupLabels) -}}\n{{\" \"}}(\n{{- with .CommonLabels.Remove .GroupLabels.Names }}\n    {{- range $index, $label := .SortedPairs -}}\n    {{ if $index }}, {{ end }}\n    {{- $label.Name }}=\"{{ $label.Value -}}\"\n    {{- end }}\n{{- end -}}\n)\n{{- end }}`}
@@ -48,9 +49,9 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 						}))
 					}
 				/>
-			</Form.Item>
+			</FormItem>
 
-			<Form.Item name="text" label={t('field_slack_description')}>
+			<FormItem name="text" label={t('field_slack_description')}>
 				<TextArea
 					onChange={(event): void =>
 						setSelectedConfig((value) => ({
@@ -60,7 +61,7 @@ function Slack({ setSelectedConfig }: SlackProps): JSX.Element {
 					}
 					placeholder={t('placeholder_slack_description')}
 				/>
-			</Form.Item>
+			</FormItem>
 		</>
 	);
 }

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

@@ -1,4 +1,5 @@
-import { Form, Input } from 'antd';
+import { Input } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -9,7 +10,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 
 	return (
 		<>
-			<Form.Item name="api_url" label={t('field_webhook_url')}>
+			<FormItem name="api_url" label={t('field_webhook_url')}>
 				<Input
 					onChange={(event): void => {
 						setSelectedConfig((value) => ({
@@ -18,8 +19,8 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 						}));
 					}}
 				/>
-			</Form.Item>
-			<Form.Item
+			</FormItem>
+			<FormItem
 				name="username"
 				label={t('field_webhook_username')}
 				help={t('help_webhook_username')}
@@ -32,8 +33,8 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 						}));
 					}}
 				/>
-			</Form.Item>
-			<Form.Item
+			</FormItem>
+			<FormItem
 				name="password"
 				label="Password (optional)"
 				help={t('help_webhook_password')}
@@ -47,7 +48,7 @@ function WebhookSettings({ setSelectedConfig }: WebhookProps): JSX.Element {
 						}));
 					}}
 				/>
-			</Form.Item>
+			</FormItem>
 		</>
 	);
 }

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,4 +1,5 @@
 import { Form, FormInstance, Input, Select, Typography } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';
 import {
@@ -31,6 +32,7 @@ function FormAlertChannels({
 	onSaveHandler,
 	savingState,
 	testingState,
+	NotificationElement,
 	title,
 	initialValue,
 	editing = false,
@@ -52,10 +54,12 @@ function FormAlertChannels({
 	};
 	return (
 		<>
+			{NotificationElement}
+
 			<Title level={3}>{title}</Title>
 
 			<Form initialValues={initialValue} layout="vertical" form={formInstance}>
-				<Form.Item label={t('field_channel_name')} labelAlign="left" name="name">
+				<FormItem label={t('field_channel_name')} labelAlign="left" name="name">
 					<Input
 						disabled={editing}
 						onChange={(event): void => {
@@ -65,9 +69,9 @@ function FormAlertChannels({
 							}));
 						}}
 					/>
-				</Form.Item>
+				</FormItem>
 
-				<Form.Item label={t('field_channel_type')} labelAlign="left" name="type">
+				<FormItem label={t('field_channel_type')} labelAlign="left" name="type">
 					<Select disabled={editing} onChange={onTypeChangeHandler} value={type}>
 						<Option value="slack" key="slack">
 							Slack
@@ -79,11 +83,11 @@ function FormAlertChannels({
 							Pagerduty
 						</Option>
 					</Select>
-				</Form.Item>
+				</FormItem>
 
-				<Form.Item>{renderSettings()}</Form.Item>
+				<FormItem>{renderSettings()}</FormItem>
 
-				<Form.Item>
+				<FormItem>
 					<Button
 						disabled={savingState}
 						loading={savingState}
@@ -106,7 +110,7 @@ function FormAlertChannels({
 					>
 						{t('button_return')}
 					</Button>
-				</Form.Item>
+				</FormItem>
 			</Form>
 		</>
 	);
@@ -123,6 +127,10 @@ interface FormAlertChannelsProps {
 	onTestHandler: (props: ChannelType) => void;
 	testingState: boolean;
 	savingState: boolean;
+	NotificationElement: React.ReactElement<
+		unknown,
+		string | React.JSXElementConstructor<unknown>
+	>;
 	title: string;
 	initialValue: Store;
 	// editing indicates if the form is opened in edit mode

frontend/src/container/FormAlertRules/ChQuerySection/transform.ts

@@ -32,8 +32,6 @@ export const rawQueryToIChQuery = (
 // ClickHouseQueryBuilder format. The main difference is
 // use of rawQuery (in ClickHouseQueryBuilder)
 // and query (in alert builder)
-export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => ({
-	...src,
-	name: 'A',
-	rawQuery: src.query,
-});
+export const toIClickHouseQuery = (src: IChQuery): IClickHouseQuery => {
+	return { ...src, name: 'A', rawQuery: src.query };
+};

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

@@ -1,7 +1,6 @@
-import { Select } from 'antd';
+import { notification, Select } from 'antd';
 import getChannels from 'api/channels/getAll';
 import useFetch from 'hooks/useFetch';
-import { useNotifications } from 'hooks/useNotifications';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,14 +20,12 @@ function ChannelSelect({
 
 	const { loading, payload, error, errorMessage } = useFetch(getChannels);
 
-	const { notifications } = useNotifications();
-
 	const handleChange = (value: string[]): void => {
 		onSelectChannels(value);
 	};
 
 	if (error && errorMessage !== '') {
-		notifications.error({
+		notification.error({
 			message: 'Error',
 			description: errorMessage,
 		});

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -1,12 +1,11 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Tabs } from 'antd';
+import { Button, notification, Tabs } from 'antd';
 import MetricsBuilderFormula from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/formula';
 import MetricsBuilder from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/query';
 import {
 	IQueryBuilderFormulaHandleChange,
 	IQueryBuilderQueryHandleChange,
 } from 'container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/types';
-import { useNotifications } from 'hooks/useNotifications';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -164,11 +163,10 @@ function QuerySection({
 			...allQueries,
 		});
 	};
-	const { notifications } = useNotifications();
 
 	const addMetricQuery = useCallback(() => {
 		if (Object.keys(metricQueries).length > 5) {
-			notifications.error({
+			notification.error({
 				message: t('metric_query_max_limit'),
 			});
 			return;
@@ -193,7 +191,7 @@ function QuerySection({
 			expression: queryLabel,
 		};
 		setMetricQueries({ ...queries });
-	}, [t, getNextQueryLabel, metricQueries, setMetricQueries, notifications]);
+	}, [t, getNextQueryLabel, metricQueries, setMetricQueries]);
 
 	const addFormula = useCallback(() => {
 		// defaulting to F1 as only one formula is supported
@@ -213,70 +211,78 @@ function QuerySection({
 		setFormulaQueries({ ...formulas });
 	}, [formulaQueries, setFormulaQueries]);
 
-	const renderPromqlUI = (): JSX.Element => (
-		<PromqlSection promQueries={promQueries} setPromQueries={setPromQueries} />
-	);
+	const renderPromqlUI = (): JSX.Element => {
+		return (
+			<PromqlSection promQueries={promQueries} setPromQueries={setPromQueries} />
+		);
+	};
 
-	const renderChQueryUI = (): JSX.Element => (
-		<ChQuerySection chQueries={chQueries} setChQueries={setChQueries} />
-	);
+	const renderChQueryUI = (): JSX.Element => {
+		return <ChQuerySection chQueries={chQueries} setChQueries={setChQueries} />;
+	};
 
-	const renderFormulaButton = (): JSX.Element => (
-		<QueryButton onClick={addFormula} icon={<PlusOutlined />}>
-			{t('button_formula')}
-		</QueryButton>
-	);
+	const renderFormulaButton = (): JSX.Element => {
+		return (
+			<QueryButton onClick={addFormula} icon={<PlusOutlined />}>
+				{t('button_formula')}
+			</QueryButton>
+		);
+	};
 
-	const renderQueryButton = (): JSX.Element => (
-		<QueryButton onClick={addMetricQuery} icon={<PlusOutlined />}>
-			{t('button_query')}
-		</QueryButton>
-	);
+	const renderQueryButton = (): JSX.Element => {
+		return (
+			<QueryButton onClick={addMetricQuery} icon={<PlusOutlined />}>
+				{t('button_query')}
+			</QueryButton>
+		);
+	};
 
-	const renderMetricUI = (): JSX.Element => (
-		<div>
-			{metricQueries &&
-				Object.keys(metricQueries).map((key: string) => {
-					// todo(amol): need to handle this in fetch
-					const current = metricQueries[key];
-					current.name = key;
-
-					return (
-						<MetricsBuilder
-							key={key}
-							queryIndex={key}
-							queryData={toIMetricsBuilderQuery(current)}
-							selectedGraph="TIME_SERIES"
-							handleQueryChange={handleMetricQueryChange}
-						/>
-					);
-				})}
-
-			{queryCategory !== EQueryType.PROM && renderQueryButton()}
-			<div style={{ marginTop: '1rem' }}>
-				{formulaQueries &&
-					Object.keys(formulaQueries).map((key: string) => {
+	const renderMetricUI = (): JSX.Element => {
+		return (
+			<div>
+				{metricQueries &&
+					Object.keys(metricQueries).map((key: string) => {
 						// todo(amol): need to handle this in fetch
-						const current = formulaQueries[key];
+						const current = metricQueries[key];
 						current.name = key;
 
 						return (
-							<MetricsBuilderFormula
+							<MetricsBuilder
 								key={key}
-								formulaIndex={key}
-								formulaData={current}
-								handleFormulaChange={handleFormulaChange}
+								queryIndex={key}
+								queryData={toIMetricsBuilderQuery(current)}
+								selectedGraph="TIME_SERIES"
+								handleQueryChange={handleMetricQueryChange}
 							/>
 						);
 					})}
-				{queryCategory === EQueryType.QUERY_BUILDER &&
-					(!formulaQueries || Object.keys(formulaQueries).length === 0) &&
-					metricQueries &&
-					Object.keys(metricQueries).length > 0 &&
-					renderFormulaButton()}
+
+				{queryCategory !== EQueryType.PROM && renderQueryButton()}
+				<div style={{ marginTop: '1rem' }}>
+					{formulaQueries &&
+						Object.keys(formulaQueries).map((key: string) => {
+							// todo(amol): need to handle this in fetch
+							const current = formulaQueries[key];
+							current.name = key;
+
+							return (
+								<MetricsBuilderFormula
+									key={key}
+									formulaIndex={key}
+									formulaData={current}
+									handleFormulaChange={handleFormulaChange}
+								/>
+							);
+						})}
+					{queryCategory === EQueryType.QUERY_BUILDER &&
+						(!formulaQueries || Object.keys(formulaQueries).length === 0) &&
+						metricQueries &&
+						Object.keys(metricQueries).length > 0 &&
+						renderFormulaButton()}
+				</div>
 			</div>
-		</div>
-	);
+		);
+	};
 
 	const handleRunQuery = (): void => {
 		runQuery();

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -1,4 +1,5 @@
-import { Form, Select, Typography } from 'antd';
+import { Select, Typography } from 'antd';
+import FormItem from 'antd/lib/form/FormItem';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -17,7 +18,6 @@ import {
 } from './styles';
 
 const { Option } = Select;
-const FormItem = Form.Item;
 
 function RuleOptions({
 	alertDef,
@@ -38,94 +38,106 @@ function RuleOptions({
 		});
 	};
 
-	const renderCompareOps = (): JSX.Element => (
-		<InlineSelect
-			defaultValue={defaultCompareOp}
-			value={alertDef.condition?.op}
-			style={{ minWidth: '120px' }}
-			onChange={(value: string | unknown): void => {
-				const newOp = (value as string) || '';
+	const renderCompareOps = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultCompareOp}
+				value={alertDef.condition?.op}
+				style={{ minWidth: '120px' }}
+				onChange={(value: string | unknown): void => {
+					const newOp = (value as string) || '';
 
-				setAlertDef({
-					...alertDef,
-					condition: {
-						...alertDef.condition,
-						op: newOp,
-					},
-				});
-			}}
-		>
-			<Option value="1">{t('option_above')}</Option>
-			<Option value="2">{t('option_below')}</Option>
-			<Option value="3">{t('option_equal')}</Option>
-			<Option value="4">{t('option_notequal')}</Option>
-		</InlineSelect>
-	);
+					setAlertDef({
+						...alertDef,
+						condition: {
+							...alertDef.condition,
+							op: newOp,
+						},
+					});
+				}}
+			>
+				<Option value="1">{t('option_above')}</Option>
+				<Option value="2">{t('option_below')}</Option>
+				<Option value="3">{t('option_equal')}</Option>
+				<Option value="4">{t('option_notequal')}</Option>
+			</InlineSelect>
+		);
+	};
 
-	const renderThresholdMatchOpts = (): JSX.Element => (
-		<InlineSelect
-			defaultValue={defaultMatchType}
-			style={{ minWidth: '130px' }}
-			value={alertDef.condition?.matchType}
-			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
-		>
-			<Option value="1">{t('option_atleastonce')}</Option>
-			<Option value="2">{t('option_allthetimes')}</Option>
-			<Option value="3">{t('option_onaverage')}</Option>
-			<Option value="4">{t('option_intotal')}</Option>
-		</InlineSelect>
-	);
+	const renderThresholdMatchOpts = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultMatchType}
+				style={{ minWidth: '130px' }}
+				value={alertDef.condition?.matchType}
+				onChange={(value: string | unknown): void => handleMatchOptChange(value)}
+			>
+				<Option value="1">{t('option_atleastonce')}</Option>
+				<Option value="2">{t('option_allthetimes')}</Option>
+				<Option value="3">{t('option_onaverage')}</Option>
+				<Option value="4">{t('option_intotal')}</Option>
+			</InlineSelect>
+		);
+	};
 
-	const renderPromMatchOpts = (): JSX.Element => (
-		<InlineSelect
-			defaultValue={defaultMatchType}
-			style={{ minWidth: '130px' }}
-			value={alertDef.condition?.matchType}
-			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
-		>
-			<Option value="1">{t('option_atleastonce')}</Option>
-		</InlineSelect>
-	);
+	const renderPromMatchOpts = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultMatchType}
+				style={{ minWidth: '130px' }}
+				value={alertDef.condition?.matchType}
+				onChange={(value: string | unknown): void => handleMatchOptChange(value)}
+			>
+				<Option value="1">{t('option_atleastonce')}</Option>
+			</InlineSelect>
+		);
+	};
 
-	const renderEvalWindows = (): JSX.Element => (
-		<InlineSelect
-			defaultValue={defaultEvalWindow}
-			style={{ minWidth: '120px' }}
-			value={alertDef.evalWindow}
-			onChange={(value: string | unknown): void => {
-				const ew = (value as string) || alertDef.evalWindow;
-				setAlertDef({
-					...alertDef,
-					evalWindow: ew,
-				});
-			}}
-		>
-			{' '}
-			<Option value="5m0s">{t('option_5min')}</Option>
-			<Option value="10m0s">{t('option_10min')}</Option>
-			<Option value="15m0s">{t('option_15min')}</Option>
-			<Option value="1h0m0s">{t('option_60min')}</Option>
-			<Option value="4h0m0s">{t('option_4hours')}</Option>
-			<Option value="24h0m0s">{t('option_24hours')}</Option>
-		</InlineSelect>
-	);
+	const renderEvalWindows = (): JSX.Element => {
+		return (
+			<InlineSelect
+				defaultValue={defaultEvalWindow}
+				style={{ minWidth: '120px' }}
+				value={alertDef.evalWindow}
+				onChange={(value: string | unknown): void => {
+					const ew = (value as string) || alertDef.evalWindow;
+					setAlertDef({
+						...alertDef,
+						evalWindow: ew,
+					});
+				}}
+			>
+				{' '}
+				<Option value="5m0s">{t('option_5min')}</Option>
+				<Option value="10m0s">{t('option_10min')}</Option>
+				<Option value="15m0s">{t('option_15min')}</Option>
+				<Option value="60m0s">{t('option_60min')}</Option>
+				<Option value="4h0m0s">{t('option_4hours')}</Option>
+				<Option value="24h0m0s">{t('option_24hours')}</Option>
+			</InlineSelect>
+		);
+	};
 
-	const renderThresholdRuleOpts = (): JSX.Element => (
-		<FormItem>
-			<Typography.Text>
-				{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
-				{renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()}
-			</Typography.Text>
-		</FormItem>
-	);
-	const renderPromRuleOptions = (): JSX.Element => (
-		<FormItem>
-			<Typography.Text>
-				{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
-				{renderPromMatchOpts()}
-			</Typography.Text>
-		</FormItem>
-	);
+	const renderThresholdRuleOpts = (): JSX.Element => {
+		return (
+			<FormItem>
+				<Typography.Text>
+					{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
+					{renderThresholdMatchOpts()} {t('text_condition3')} {renderEvalWindows()}
+				</Typography.Text>
+			</FormItem>
+		);
+	};
+	const renderPromRuleOptions = (): JSX.Element => {
+		return (
+			<FormItem>
+				<Typography.Text>
+					{t('text_condition1')} {renderCompareOps()} {t('text_condition2')}{' '}
+					{renderPromMatchOpts()}
+				</Typography.Text>
+			</FormItem>
+		);
+	};
 
 	return (
 		<>

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

@@ -15,130 +15,154 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
 
-	const renderStep1QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
+	const renderStep1QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
 
-	const renderStep3QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
+	const renderStep3QB = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
 
-	const renderGuideForQB = (): JSX.Element => (
-		<>
-			{renderStep1QB()}
-			{renderStep2QB()}
-			{renderStep3QB()}
-		</>
-	);
-	const renderStep1PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
+	const renderGuideForQB = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1QB()}
+				{renderStep2QB()}
+				{renderStep3QB()}
+			</>
+		);
+	};
+	const renderStep1PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
 
-	const renderStep3PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
+	const renderStep3PQL = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
 
-	const renderGuideForPQL = (): JSX.Element => (
-		<>
-			{renderStep1PQL()}
-			{renderStep2PQL()}
-			{renderStep3PQL()}
-		</>
-	);
+	const renderGuideForPQL = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1PQL()}
+				{renderStep2PQL()}
+				{renderStep3PQL()}
+			</>
+		);
+	};
 
-	const renderStep1CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>
-					<Trans
-						i18nKey="user_guide_ch_step1a"
-						t={t}
-						components={[
-							// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
-							<a
-								key={1}
-								target="_blank"
-								href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
-							/>,
-						]}
-					/>
-				</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
+	const renderStep1CH = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>
+						<Trans
+							i18nKey="user_guide_ch_step1a"
+							t={t}
+							components={[
+								// eslint-disable-next-line jsx-a11y/control-has-associated-label, jsx-a11y/anchor-has-content
+								<a
+									key={1}
+									target="_blank"
+									href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
+								/>,
+							]}
+						/>
+					</StyledListItem>
+					<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
+	const renderStep2CH = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
 
-	const renderStep3CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
+	const renderStep3CH = (): JSX.Element => {
+		return (
+			<>
+				<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
+				<StyledList>
+					<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
+					<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
+				</StyledList>
+			</>
+		);
+	};
 
-	const renderGuideForCH = (): JSX.Element => (
-		<>
-			{renderStep1CH()}
-			{renderStep2CH()}
-			{renderStep3CH()}
-		</>
-	);
+	const renderGuideForCH = (): JSX.Element => {
+		return (
+			<>
+				{renderStep1CH()}
+				{renderStep2CH()}
+				{renderStep3CH()}
+			</>
+		);
+	};
 	return (
 		<StyledMainContainer>
 			<Row>

frontend/src/container/FormAlertRules/index.tsx

@@ -1,11 +1,10 @@
 import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
-import { Col, FormInstance, Modal, Typography } from 'antd';
+import { Col, FormInstance, Modal, notification, Typography } from 'antd';
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
 import ROUTES from 'constants/routes';
 import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
 import PlotTag from 'container/NewWidget/LeftContainer/WidgetGraph/PlotTag';
-import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -191,14 +190,12 @@ function FormAlertRules({
 			});
 		}
 	};
-	const { notifications } = useNotifications();
-
 	const validatePromParams = useCallback((): boolean => {
 		let retval = true;
 		if (queryCategory !== EQueryType.PROM) return retval;
 
 		if (!promQueries || Object.keys(promQueries).length === 0) {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('promql_required'),
 			});
@@ -207,7 +204,7 @@ function FormAlertRules({
 
 		Object.keys(promQueries).forEach((key) => {
 			if (promQueries[key].query === '') {
-				notifications.error({
+				notification.error({
 					message: 'Error',
 					description: t('promql_required'),
 				});
@@ -216,14 +213,14 @@ function FormAlertRules({
 		});
 
 		return retval;
-	}, [t, promQueries, queryCategory, notifications]);
+	}, [t, promQueries, queryCategory]);
 
 	const validateChQueryParams = useCallback((): boolean => {
 		let retval = true;
 		if (queryCategory !== EQueryType.CLICKHOUSE) return retval;
 
 		if (!chQueries || Object.keys(chQueries).length === 0) {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('chquery_required'),
 			});
@@ -232,7 +229,7 @@ function FormAlertRules({
 
 		Object.keys(chQueries).forEach((key) => {
 			if (chQueries[key].rawQuery === '') {
-				notifications.error({
+				notification.error({
 					message: 'Error',
 					description: t('chquery_required'),
 				});
@@ -241,14 +238,14 @@ function FormAlertRules({
 		});
 
 		return retval;
-	}, [t, chQueries, queryCategory, notifications]);
+	}, [t, chQueries, queryCategory]);
 
 	const validateQBParams = useCallback((): boolean => {
 		let retval = true;
 		if (queryCategory !== EQueryType.QUERY_BUILDER) return true;
 
 		if (!metricQueries || Object.keys(metricQueries).length === 0) {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('condition_required'),
 			});
@@ -256,7 +253,7 @@ function FormAlertRules({
 		}
 
 		if (!alertDef.condition?.target) {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('target_missing'),
 			});
@@ -265,7 +262,7 @@ function FormAlertRules({
 
 		Object.keys(metricQueries).forEach((key) => {
 			if (metricQueries[key].metricName === '') {
-				notifications.error({
+				notification.error({
 					message: 'Error',
 					description: t('metricname_missing', { where: metricQueries[key].name }),
 				});
@@ -275,7 +272,7 @@ function FormAlertRules({
 
 		Object.keys(formulaQueries).forEach((key) => {
 			if (formulaQueries[key].expression === '') {
-				notifications.error({
+				notification.error({
 					message: 'Error',
 					description: t('expression_missing', formulaQueries[key].name),
 				});
@@ -283,11 +280,11 @@ function FormAlertRules({
 			}
 		});
 		return retval;
-	}, [t, alertDef, queryCategory, metricQueries, formulaQueries, notifications]);
+	}, [t, alertDef, queryCategory, metricQueries, formulaQueries]);
 
 	const isFormValid = useCallback((): boolean => {
 		if (!alertDef.alert || alertDef.alert === '') {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('alertname_required'),
 			});
@@ -303,14 +300,7 @@ function FormAlertRules({
 		}
 
 		return validateQBParams();
-	}, [
-		t,
-		validateQBParams,
-		validateChQueryParams,
-		alertDef,
-		validatePromParams,
-		notifications,
-	]);
+	}, [t, validateQBParams, validateChQueryParams, alertDef, validatePromParams]);
 
 	const preparePostData = (): AlertDef => {
 		const postableAlert: AlertDef = {
@@ -358,7 +348,7 @@ function FormAlertRules({
 			const response = await saveAlertApi(apiReq);
 
 			if (response.statusCode === 200) {
-				notifications.success({
+				notification.success({
 					message: 'Success',
 					description:
 						!ruleId || ruleId === 0 ? t('rule_created') : t('rule_edited'),
@@ -371,26 +361,19 @@ function FormAlertRules({
 					history.replace(ROUTES.LIST_ALL_ALERT);
 				}, 2000);
 			} else {
-				notifications.error({
+				notification.error({
 					message: 'Error',
 					description: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (e) {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('unexpected_error'),
 			});
 		}
 		setLoading(false);
-	}, [
-		t,
-		isFormValid,
-		ruleId,
-		ruleCache,
-		memoizedPreparePostData,
-		notifications,
-	]);
+	}, [t, isFormValid, ruleId, ruleCache, memoizedPreparePostData]);
 
 	const onSaveHandler = useCallback(async () => {
 		const content = (
@@ -424,64 +407,70 @@ function FormAlertRules({
 			if (response.statusCode === 200) {
 				const { payload } = response;
 				if (payload?.alertCount === 0) {
-					notifications.error({
+					notification.error({
 						message: 'Error',
 						description: t('no_alerts_found'),
 					});
 				} else {
-					notifications.success({
+					notification.success({
 						message: 'Success',
 						description: t('rule_test_fired'),
 					});
 				}
 			} else {
-				notifications.error({
+				notification.error({
 					message: 'Error',
 					description: response.error || t('unexpected_error'),
 				});
 			}
 		} catch (e) {
-			notifications.error({
+			notification.error({
 				message: 'Error',
 				description: t('unexpected_error'),
 			});
 		}
 		setLoading(false);
-	}, [t, isFormValid, memoizedPreparePostData, notifications]);
+	}, [t, isFormValid, memoizedPreparePostData]);
 
 	const renderBasicInfo = (): JSX.Element => (
 		<BasicInfo alertDef={alertDef} setAlertDef={setAlertDef} />
 	);
 
-	const renderQBChartPreview = (): JSX.Element => (
-		<ChartPreview
-			headline={<PlotTag queryType={queryCategory} />}
-			name=""
-			threshold={alertDef.condition?.target}
-			query={debouncedStagedQuery}
-			selectedInterval={toChartInterval(alertDef.evalWindow)}
-		/>
-	);
+	const renderQBChartPreview = (): JSX.Element => {
+		return (
+			<ChartPreview
+				headline={<PlotTag queryType={queryCategory} />}
+				name=""
+				threshold={alertDef.condition?.target}
+				query={debouncedStagedQuery}
+				selectedInterval={toChartInterval(alertDef.evalWindow)}
+			/>
+		);
+	};
 
-	const renderPromChartPreview = (): JSX.Element => (
-		<ChartPreview
-			headline={<PlotTag queryType={queryCategory} />}
-			name="Chart Preview"
-			threshold={alertDef.condition?.target}
-			query={debouncedStagedQuery}
-		/>
-	);
+	const renderPromChartPreview = (): JSX.Element => {
+		return (
+			<ChartPreview
+				headline={<PlotTag queryType={queryCategory} />}
+				name="Chart Preview"
+				threshold={alertDef.condition?.target}
+				query={debouncedStagedQuery}
+			/>
+		);
+	};
 
-	const renderChQueryChartPreview = (): JSX.Element => (
-		<ChartPreview
-			headline={<PlotTag queryType={queryCategory} />}
-			name="Chart Preview"
-			threshold={alertDef.condition?.target}
-			query={manualStagedQuery}
-			userQueryKey={runQueryId}
-			selectedInterval={toChartInterval(alertDef.evalWindow)}
-		/>
-	);
+	const renderChQueryChartPreview = (): JSX.Element => {
+		return (
+			<ChartPreview
+				headline={<PlotTag queryType={queryCategory} />}
+				name="Chart Preview"
+				threshold={alertDef.condition?.target}
+				query={manualStagedQuery}
+				userQueryKey={runQueryId}
+				selectedInterval={toChartInterval(alertDef.evalWindow)}
+			/>
+		);
+	};
 	return (
 		<>
 			{Element}

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

@@ -119,15 +119,17 @@ function LabelSelect({
 				{queries.length > 0 &&
 					map(
 						queries,
-						(query): JSX.Element => (
-							<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
-						),
+						(query): JSX.Element => {
+							return (
+								<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
+							);
+						},
 					)}
 			</div>
 			<div>
-				{map(staging, (item) => (
-					<QueryChipItem key={uuid()}>{item}</QueryChipItem>
-				))}
+				{map(staging, (item) => {
+					return <QueryChipItem key={uuid()}>{item}</QueryChipItem>;
+				})}
 			</div>
 
 			<div style={{ display: 'flex', width: '100%' }}>

frontend/src/container/FormAlertRules/styles.ts

@@ -95,8 +95,6 @@ export const ThresholdInput = styled(InputNumber)`
 		align-items: center;
 		& > .ant-input-number-group-addon {
 			width: 130px;
-			border: 0;
-			background: transparent;
 		}
 		& > .ant-input-number {
 			width: 50%;

frontend/src/container/FormAlertRules/utils.ts

@@ -42,15 +42,17 @@ export const toMetricQueries = (b: IBuilderQueries): IMetricQueries => {
 
 export const toIMetricsBuilderQuery = (
 	q: IMetricQuery,
-): IMetricsBuilderQuery => ({
-	name: q.name,
-	metricName: q.metricName,
-	tagFilters: q.tagFilters,
-	groupBy: q.groupBy,
-	aggregateOperator: q.aggregateOperator,
-	disabled: q.disabled,
-	legend: q.legend,
-});
+): IMetricsBuilderQuery => {
+	return {
+		name: q.name,
+		metricName: q.metricName,
+		tagFilters: q.tagFilters,
+		groupBy: q.groupBy,
+		aggregateOperator: q.aggregateOperator,
+		disabled: q.disabled,
+		legend: q.legend,
+	};
+};
 
 export const prepareBuilderQueries = (
 	m: IMetricQueries,
@@ -132,7 +134,7 @@ export const toChartInterval = (evalWindow: string | undefined): Time => {
 			return '15min';
 		case '30m0s':
 			return '30min';
-		case '1h0m0s':
+		case '60m0s':
 			return '1hr';
 		case '4h0m0s':
 			return '4hr';

frontend/src/container/GantChart/SpanLength/styles.ts

@@ -16,7 +16,6 @@ export const SpanLine = styled.div<Props>`
 	top: 50%;
 	position: absolute;
 `;
-
 export const SpanBorder = styled.div<Props>`
 	background: ${({ bgColor }): string => bgColor};
 	border-radius: 5px;
@@ -35,18 +34,27 @@ export const SpanWrapper = styled.div`
 	position: relative;
 	z-index: 2;
 	min-height: 2rem;
+
+	/* &:before {
+		display: inline-block;
+		content: '';
+		border-bottom: 1px solid #303030;
+		position: absolute;
+		left: -30px;
+		width: 30px;
+		z-index: 0;
+	} */
 `;
 interface SpanTextProps extends Pick<Props, 'leftOffset'> {
 	isDarkMode: boolean;
 }
 
-export const SpanText = styled(Typography.Paragraph)<SpanTextProps>`
+export const SpanText = styled(Typography)<SpanTextProps>`
 	&&& {
 		left: ${({ leftOffset }): string => `${leftOffset}%`};
 		top: 65%;
 		position: absolute;
-		width: max-content;
-		color: ${({ isDarkMode }): string => (isDarkMode ? '#ACACAC' : '#666')};
+		color: ${({ isDarkMode }): string => (isDarkMode ? '##ACACAC' : '#666')};
 		font-size: 0.75rem;
 	}
 `;

frontend/src/container/GantChart/utils.ts

@@ -112,19 +112,21 @@ export const getNodeById = (
 
 const getSpanWithoutChildren = (
 	span: ITraceTree,
-): Omit<ITraceTree, 'children'> => ({
-	id: span.id,
-	name: span.name,
-	parent: span.parent,
-	serviceColour: span.serviceColour,
-	serviceName: span.serviceName,
-	startTime: span.startTime,
-	tags: span.tags,
-	time: span.time,
-	value: span.value,
-	event: span.event,
-	hasError: span.hasError,
-});
+): Omit<ITraceTree, 'children'> => {
+	return {
+		id: span.id,
+		name: span.name,
+		parent: span.parent,
+		serviceColour: span.serviceColour,
+		serviceName: span.serviceName,
+		startTime: span.startTime,
+		tags: span.tags,
+		time: span.time,
+		value: span.value,
+		event: span.event,
+		hasError: span.hasError,
+	};
+};
 
 export const isSpanPresentInSearchString = (
 	searchedString: string,