Merge branch 'develop' into release/v0.24.0

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

.github/CODEOWNERS

@@ -2,6 +2,12 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 * @ankitnayan
-/frontend/ @palashgdev @pranshuchittora
+
+/frontend/ @palashgdev
 /deploy/ @prashant-shahi
+/sample-apps/ @prashant-shahi
 **/query-service/ @srikanthccv
+Makefile @srikanthccv
+go.* @srikanthccv
+.git* @srikanthccv
+.github @prashant-shahi

.github/workflows/build.yaml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install dependencies
         run: cd frontend && yarn install
       - name: Run ESLint
@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Run tests
         shell: bash
         run: |
@@ -45,7 +45,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Build EE query-service image
         shell: bash
         run: |

.github/workflows/codeql.yaml

@@ -39,11 +39,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -54,7 +54,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -68,4 +68,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/commitlint.yml

@@ -7,12 +7,7 @@ jobs:
   lint-commits:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2.3.1
+      - uses: actions/checkout@v3
         with:
-          # we actually need "github.event.pull_request.commits + 1" commit
           fetch-depth: 0
-      - uses: actions/setup-node@v2.1.0
-      # or just "yarn" if you depend on "@commitlint/cli" already
-      - run: yarn add @commitlint/cli
-      - run: yarn add @commitlint/config-conventional
-      - run: yarn run commitlint --config ./node_modules/@commitlint/config-conventional/index.js  --from HEAD~${{ github.event.pull_request.commits }} --to HEAD
+      - uses: wagoid/commitlint-github-action@v5

.github/workflows/create-issue-on-pr-merge.yml

@@ -12,11 +12,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Codebase
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           repository: signoz/gh-bot
       - name: Use Node v16
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Setup Cache & Install Dependencies

.github/workflows/e2e-k3s.yaml

@@ -13,7 +13,7 @@ jobs:
       DOCKER_TAG: pull-${{ github.event.number }}
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Build query-service image
         env:
@@ -37,7 +37,7 @@ jobs:
           kubectl create ns sample-application
 
           # apply hotrod k8s manifest file
-          kubectl -n sample-application apply -f https://raw.githubusercontent.com/SigNoz/signoz/main/sample-apps/hotrod/hotrod.yaml
+          kubectl -n sample-application apply -f https://raw.githubusercontent.com/SigNoz/signoz/develop/sample-apps/hotrod/hotrod.yaml
 
           # wait for all deployments in sample-application namespace to be READY
           kubectl -n sample-application get deploy --output name | xargs -r -n1 -t kubectl -n sample-application rollout status --timeout=300s
@@ -69,12 +69,14 @@ jobs:
             --restart='OnFailure' -i --rm --command -- curl -X POST -F \
             'locust_count=6' -F 'hatch_rate=2' http://locust-master:8089/swarm
 
-      - name: Get short commit SHA and display tunnel URL
+      - name: Get short commit SHA, display tunnel URL and IP Address of the worker node
         id: get-subdomain
         run: |
           subdomain="pr-$(git rev-parse --short HEAD)"
           echo "URL for tunnelling: https://$subdomain.loca.lt"
-          echo "::set-output name=subdomain::$subdomain"
+          echo "subdomain=$subdomain" >> $GITHUB_OUTPUT
+          worker_ip="$(curl -4 -s ipconfig.io/ip)"
+          echo "Worker node IP address: $worker_ip"
 
       - name: Start tunnel
         env:

.github/workflows/playwright.yaml

@@ -9,8 +9,8 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: "16.x"
       - name: Install dependencies

.github/workflows/pr_verify_linked_issue.yml

@@ -5,7 +5,7 @@ name: VerifyIssue
 
 on:
   pull_request:
-    types: [edited, synchronize, opened, reopened]
+    types: [edited, opened]
   check_run:
 
 jobs:
@@ -14,6 +14,6 @@ jobs:
     name: Ensure Pull Request has a linked issue.
     steps:
       - name: Verify Linked Issue
-        uses: hattan/verify-linked-issue-action@v1.1.0
+        uses: srikanthccv/verify-linked-issue-action@v0.71
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/push.yaml

@@ -14,19 +14,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - uses: benjlevesque/short-sha@v1.2
+      - uses: benjlevesque/short-sha@v2.2
         id: short-sha
       - name: Get branch name
         id: branch-name
@@ -49,19 +49,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - uses: benjlevesque/short-sha@v1.2
+      - uses: benjlevesque/short-sha@v2.2
         id: short-sha
       - name: Get branch name
         id: branch-name
@@ -84,7 +84,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Install dependencies
         working-directory: frontend
         run: yarn install
@@ -97,15 +97,15 @@ jobs:
         run: npm run lint
         continue-on-error: true
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - uses: benjlevesque/short-sha@v1.2
+      - uses: benjlevesque/short-sha@v2.2
         id: short-sha
       - name: Get branch name
         id: branch-name

.github/workflows/release-drafter.yml

@@ -12,6 +12,12 @@ on:
 
 jobs:
   update_release_draft:
+    permissions:
+      # write permission is required to create a github release
+      contents: write
+      # write permission is required for autolabeler
+      # otherwise, read permission is required at least
+      pull-requests: write
     runs-on: ubuntu-latest
     steps:
       # (Optional) GitHub Enterprise requires GHE_HOST variable set

.github/workflows/remove-label.yaml

@@ -8,9 +8,15 @@ jobs:
   remove:
     runs-on: ubuntu-latest
     steps:
-      - name: Remove label
-        uses: buildsville/add-remove-label@v1
+      - name: Remove label ok-to-test from PR
+        uses: buildsville/add-remove-label@v2.0.0
         with:
-          label: ok-to-test,testing-deploy
+          label: ok-to-test
+          type: remove
+          token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Remove label testing-deploy from PR
+        uses: buildsville/add-remove-label@v2.0.0
+        with:
+          label: testing-deploy
           type: remove
           token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sonar.yml

@@ -3,7 +3,7 @@ on:
   pull_request:
     branches:
       - main
-      - v*
+      - develop
     paths:
       - 'frontend/**'
 defaults:
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with: 
           fetch-depth: 0
       - name: Sonar analysis

.github/workflows/staging-deployment.yaml

@@ -11,21 +11,23 @@ jobs:
     environment: staging
     steps:
       - name: Executing remote ssh commands using ssh key
-        uses: appleboy/ssh-action@v0.1.6
+        uses: appleboy/ssh-action@v0.1.8
         env:
           GITHUB_BRANCH: develop
           GITHUB_SHA: ${{ github.sha }}
         with:
           host: ${{ secrets.HOST_DNS }}
           username: ${{ secrets.USERNAME }}
-          key: ${{ secrets.EC2_SSH_KEY }}
+          key: ${{ secrets.SSH_KEY }}
           envs: GITHUB_BRANCH,GITHUB_SHA
           command_timeout: 60m
           script: |
             echo "GITHUB_BRANCH: ${GITHUB_BRANCH}"
             echo "GITHUB_SHA: ${GITHUB_SHA}"
             export DOCKER_TAG="${GITHUB_SHA:0:7}" # needed for child process to access it
+            export OTELCOL_TAG="main"
             docker system prune --force
+            docker pull signoz/signoz-otel-collector:main
             cd ~/signoz
             git status
             git add .

.github/workflows/testing-deployment.yaml

@@ -11,14 +11,14 @@ jobs:
     if: ${{ github.event.label.name == 'testing-deploy' }}
     steps:
       - name: Executing remote ssh commands using ssh key
-        uses: appleboy/ssh-action@v0.1.6
+        uses: appleboy/ssh-action@v0.1.8
         env:
           GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
           GITHUB_SHA: ${{ github.sha }}
         with:
           host: ${{ secrets.HOST_DNS }}
           username: ${{ secrets.USERNAME }}
-          key: ${{ secrets.EC2_SSH_KEY }}
+          key: ${{ secrets.SSH_KEY }}
           envs: GITHUB_BRANCH,GITHUB_SHA
           command_timeout: 60m
           script: |

.gitignore

@@ -1,7 +1,5 @@
 
 node_modules
-yarn.lock
-package.json
 
 deploy/docker/environment_tiny/common_test
 frontend/node_modules

CONTRIBUTING.md

@@ -80,7 +80,7 @@ Before sending us a pull request, please ensure that,
 GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 
 [creating a pull request](https://help.github.com/articles/creating-a-pull-request/).
 
-**Note:** Unless your change is small, **please** consider submitting different Pull Rrequest(s):
+**Note:** Unless your change is small, **please** consider submitting different Pull Request(s):
 
 * 1️⃣ First PR should include the overall structure of the new component:
   * Readme, configuration, interfaces or base classes, etc...
@@ -338,7 +338,7 @@ to make SigNoz UI available at [localhost:3301](http://localhost:3301)
 **5.1.1 To install the HotROD sample app:**
 
 ```bash
-curl -sL https://github.com/SigNoz/signoz/raw/main/sample-apps/hotrod/hotrod-install.sh \
+curl -sL https://github.com/SigNoz/signoz/raw/develop/sample-apps/hotrod/hotrod-install.sh \
   | HELM_RELEASE=my-release SIGNOZ_NAMESPACE=platform bash
 ```
 
@@ -361,7 +361,7 @@ kubectl -n sample-application run strzal --image=djbingham/curl \
 **5.1.4 To delete the HotROD sample app:**
 
 ```bash
-curl -sL https://github.com/SigNoz/signoz/raw/main/sample-apps/hotrod/hotrod-delete.sh \
+curl -sL https://github.com/SigNoz/signoz/raw/develop/sample-apps/hotrod/hotrod-delete.sh \
   | HOTROD_NAMESPACE=sample-application bash
 ```
 

Makefile

@@ -54,7 +54,7 @@ build-push-frontend:
 	@echo "--> Building and pushing frontend docker image"
 	@echo "------------------"
 	@cd $(FRONTEND_DIRECTORY) && \
-	docker buildx build --file Dockerfile --progress plane --push --platform linux/arm64,linux/amd64 \
+	docker buildx build --file Dockerfile --progress plain --push --platform linux/arm64,linux/amd64 \
 	--tag $(REPONAME)/$(FRONTEND_DOCKER_IMAGE):$(DOCKER_TAG) .
 
 # Steps to build and push docker image of query service
@@ -73,7 +73,7 @@ build-push-query-service:
 	@echo "------------------"
 	@echo "--> Building and pushing query-service docker image"
 	@echo "------------------"
-	@docker buildx build --file $(QUERY_SERVICE_DIRECTORY)/Dockerfile --progress plane \
+	@docker buildx build --file $(QUERY_SERVICE_DIRECTORY)/Dockerfile --progress plain \
 	--push --platform linux/arm64,linux/amd64 --build-arg LD_FLAGS="$(LD_FLAGS)" \
 	--tag $(REPONAME)/$(QUERY_SERVICE_DOCKER_IMAGE):$(DOCKER_TAG) .
 
@@ -98,7 +98,7 @@ build-push-ee-query-service:
 	@echo "--> Building and pushing query-service docker image"
 	@echo "------------------"
 	@docker buildx build --file $(EE_QUERY_SERVICE_DIRECTORY)/Dockerfile \
-	--progress plane --push --platform linux/arm64,linux/amd64 \
+	--progress plain --push --platform linux/arm64,linux/amd64 \
 	--build-arg LD_FLAGS="$(LD_FLAGS)" --tag $(REPONAME)/$(QUERY_SERVICE_DOCKER_IMAGE):$(DOCKER_TAG) .
 
 dev-setup:
@@ -136,6 +136,18 @@ clear-swarm-data:
 	@docker run --rm -v "$(PWD)/$(SWARM_DIRECTORY)/data:/pwd" busybox \
 	sh -c "cd /pwd && rm -rf alertmanager/* clickhouse*/* signoz/* zookeeper-*/*"
 
+clear-standalone-ch:
+	@docker run --rm -v "$(PWD)/$(STANDALONE_DIRECTORY)/data:/pwd" busybox \
+	sh -c "cd /pwd && rm -rf clickhouse*/* zookeeper-*/*"
+
+clear-swarm-ch:
+	@docker run --rm -v "$(PWD)/$(SWARM_DIRECTORY)/data:/pwd" busybox \
+	sh -c "cd /pwd && rm -rf clickhouse*/* zookeeper-*/*"
+
 test:
 	go test ./pkg/query-service/app/metrics/...
+	go test ./pkg/query-service/cache/...
 	go test ./pkg/query-service/app/...
+	go test ./pkg/query-service/app/querier/...
+	go test ./pkg/query-service/converter/...
+	go test ./pkg/query-service/formatter/...

README.de-de.md

@@ -85,9 +85,9 @@ Hier findest du die vollständige Liste von unterstützten Programmiersprachen -
   
 ### Bereitstellung mit Docker
 
-Bitte folge den [hier](https://signoz.io/docs/deployment/docker/) aufgelisteten Schritten um deine Anwendung mit Docker bereitzustellen.
+Bitte folge den [hier](https://signoz.io/docs/install/docker/) aufgelisteten Schritten um deine Anwendung mit Docker bereitzustellen.
 
-Die [Anleitungen zur Fehlerbehebung](https://signoz.io/docs/deployment/troubleshooting) könnten hilfreich sein, falls du auf irgendwelche Schwierigkeiten stößt.
+Die [Anleitungen zur Fehlerbehebung](https://signoz.io/docs/install/troubleshooting/) könnten hilfreich sein, falls du auf irgendwelche Schwierigkeiten stößt.
 
 <p>&nbsp  </p>
   

README.md

@@ -70,7 +70,6 @@ SigNoz helps developers monitor applications and troubleshoot problems in their
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributing.svg" width="50px" />
 
 ## Join our Slack community
 
@@ -78,7 +77,6 @@ Come say Hi to us on [Slack](https://signoz.io/slack) 👋
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Features.svg" width="50px" />
 
 ## Features:
 
@@ -89,13 +87,12 @@ Come say Hi to us on [Slack](https://signoz.io/slack) 👋
 - Filter traces by service name, operation, latency, error, tags/annotations.
 - Run aggregates on trace data (events/spans) to get business relevant metrics. e.g. You can get error rate and 99th percentile latency of `customer_type: gold` or `deployment_version: v2` or `external_call: paypal`
 - Native support for OpenTelemetry Logs, advanced log query builder, and automatic log collection from k8s cluster
-- Lightening quick log analytics ([Logs Perf. Benchmark](https://signoz.io/blog/logs-performance-benchmark/))
+- Lightning quick log analytics ([Logs Perf. Benchmark](https://signoz.io/blog/logs-performance-benchmark/))
 - End-to-End visibility into infrastructure performance, ingest metrics from all kinds of host environments
 - Easy to set alerts with DIY query builder
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/WhatsCool.svg" width="50px" />
 
 ## Why SigNoz?
 
@@ -124,15 +121,14 @@ You can find the complete list of languages here - https://opentelemetry.io/docs
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Philosophy.svg" width="50px" />
 
 ## Getting Started
 
 ### Deploy using Docker
 
-Please follow the steps listed [here](https://signoz.io/docs/deployment/docker/) to install using docker
+Please follow the steps listed [here](https://signoz.io/docs/install/docker/) to install using docker
 
-The [troubleshooting instructions](https://signoz.io/docs/deployment/troubleshooting) may be helpful if you face any issues.
+The [troubleshooting instructions](https://signoz.io/docs/install/troubleshooting/) may be helpful if you face any issues.
 
 <p>&nbsp  </p>
   
@@ -143,7 +139,6 @@ Please follow the steps listed [here](https://signoz.io/docs/deployment/helm_cha
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/UseSigNoz.svg" width="50px" />
 
 ## Comparisons to Familiar Tools
 
@@ -185,7 +180,6 @@ We have published benchmarks comparing Loki with SigNoz. Check it out [here](htt
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributors.svg" width="50px" />
 
 ## Contributing
 
@@ -212,7 +206,6 @@ Not sure how to get started? Just ping us on `#contributing` in our [slack commu
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/DevelopingLocally.svg" width="50px" />
 
 ## Documentation
 
@@ -220,7 +213,6 @@ You can find docs at https://signoz.io/docs/. If you need any clarification or f
 
 <br /><br />
 
-<img align="left" src="https://signoz-public.s3.us-east-2.amazonaws.com/Contributing.svg" width="50px" />
 
 ## Community
 

README.pt-br.md

@@ -84,9 +84,9 @@ Você pode encontrar a lista completa de linguagens aqui - https://opentelemetry
   
 ### Implantar usando Docker
 
-Siga as etapas listadas [aqui](https://signoz.io/docs/deployment/docker/) para instalar usando o Docker.
+Siga as etapas listadas [aqui](https://signoz.io/docs/install/docker/) para instalar usando o Docker.
 
-Esse [guia para solução de problemas](https://signoz.io/docs/deployment/troubleshooting) pode ser útil se você enfrentar quaisquer problemas. 
+Esse [guia para solução de problemas](https://signoz.io/docs/install/troubleshooting/) pode ser útil se você enfrentar quaisquer problemas. 
 
 <p>&nbsp  </p>
   

README.zh-cn.md

@@ -80,9 +80,9 @@ SigNoz帮助开发人员监控应用并排查已部署应用中的问题。SigNo
 
 ### 使用Docker部署
 
-请按照[这里](https://signoz.io/docs/deployment/docker/)列出的步骤使用Docker来安装
+请按照[这里](https://signoz.io/docs/install/docker/)列出的步骤使用Docker来安装
 
-如果你遇到任何问题，这个[排查指南](https://signoz.io/docs/deployment/troubleshooting)会对你有帮助。
+如果你遇到任何问题，这个[排查指南](https://signoz.io/docs/install/troubleshooting/)会对你有帮助。
 
 <p>&nbsp  </p>
 

deploy/README.md

@@ -58,7 +58,7 @@ from the HotROD application, you should see the data generated from hotrod in Si
 ```sh
 kubectl create ns sample-application
 
-kubectl -n sample-application apply -f https://raw.githubusercontent.com/SigNoz/signoz/main/sample-apps/hotrod/hotrod.yaml
+kubectl -n sample-application apply -f https://raw.githubusercontent.com/SigNoz/signoz/develop/sample-apps/hotrod/hotrod.yaml
 ```
 
 To generate load:
@@ -66,7 +66,7 @@ To generate load:
 ```sh
 kubectl -n sample-application run strzal --image=djbingham/curl \
 --restart='OnFailure' -i --tty --rm --command -- curl -X POST -F \
-'locust_count=6' -F 'hatch_rate=2' http://locust-master:8089/swarm
+'user_count=6' -F 'spawn_rate=2' http://locust-master:8089/swarm
 ```
 
 To stop load:

deploy/docker-swarm/clickhouse-setup/clickhouse-storage.xml

@@ -7,9 +7,21 @@
         </default>
         <s3>
             <type>s3</type>
-            <endpoint>https://BUCKET-NAME.s3.amazonaws.com/data/</endpoint>
+            <!-- For S3 cold storage,
+                    if region is us-east-1, endpoint can be https://<bucket-name>.s3.amazonaws.com
+                    if region is not us-east-1, endpoint should be https://<bucket-name>.s3-<region>.amazonaws.com
+                For GCS cold storage,
+                    endpoint should be https://storage.googleapis.com/<bucket-name>/data/
+                -->
+            <endpoint>https://BUCKET-NAME.s3-REGION-NAME.amazonaws.com/data/</endpoint>
             <access_key_id>ACCESS-KEY-ID</access_key_id>
             <secret_access_key>SECRET-ACCESS-KEY</secret_access_key>
+            <!-- In case of S3, uncomment the below configuration in case you want to read
+                AWS credentials from the Environment variables if they exist. -->
+            <!-- <use_environment_credentials>true</use_environment_credentials> -->
+            <!-- In case of GCS, uncomment the below configuration, since GCS does
+                not support batch deletion and result in error messages in logs. -->
+            <!-- <support_batch_delete>false</support_batch_delete> -->
         </s3>
    </disks>
    <policies>

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

@@ -34,7 +34,7 @@ x-clickhouse-depend: &clickhouse-depend
 
 services:
   zookeeper-1:
-    image: bitnami/zookeeper:3.7.0
+    image: bitnami/zookeeper:3.7.1
     hostname: zookeeper-1
     user: root
     ports:
@@ -124,7 +124,7 @@ services:
   #     - ./data/clickhouse-3/:/var/lib/clickhouse/
 
   alertmanager:
-    image: signoz/alertmanager:0.23.0-0.2
+    image: signoz/alertmanager:0.23.1
     volumes:
       - ./data/alertmanager:/data
     command:
@@ -137,7 +137,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.17.0
+    image: signoz/query-service:0.24.0
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -166,7 +166,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:0.17.0
+    image: signoz/frontend:0.24.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -179,8 +179,8 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.66.6
-    command: ["--config=/etc/otel-collector-config.yaml"]
+    image: signoz/signoz-otel-collector:0.79.4
+    command: ["--config=/etc/otel-collector-config.yaml", "--feature-gates=-pkg.translator.prometheus.NormalizeName"]
     user: root # required for reading docker container logs
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -208,8 +208,8 @@ services:
     <<: *clickhouse-depend
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:0.66.6
-    command: ["--config=/etc/otel-collector-metrics-config.yaml"]
+    image: signoz/signoz-otel-collector:0.79.4
+    command: ["--config=/etc/otel-collector-metrics-config.yaml", "--feature-gates=-pkg.translator.prometheus.NormalizeName"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
     # ports:
@@ -233,7 +233,7 @@ services:
         max-file: "3"
 
   load-hotrod:
-    image: "grubykarol/locust:1.2.3-python3.9-alpine3.12"
+    image: "signoz/locust:1.2.3"
     hostname: load-hotrod
     environment:
       ATTACKED_HOST: http://hotrod:8080

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

@@ -75,7 +75,7 @@ processors:
     timeout: 10s
   resourcedetection:
     # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
-    detectors: [env, system] # include ec2 for AWS, gce for GCP and azure for Azure.
+    detectors: [env, system] # include ec2 for AWS, gcp for GCP and azure for Azure.
     timeout: 2s
   signozspanmetrics/prometheus:
     metrics_exporter: prometheus

deploy/docker/clickhouse-setup/clickhouse-storage.xml

@@ -7,9 +7,21 @@
         </default>
         <s3>
             <type>s3</type>
-            <endpoint>https://BUCKET-NAME.s3.amazonaws.com/data/</endpoint>
+            <!-- For S3 cold storage,
+                    if region is us-east-1, endpoint can be https://<bucket-name>.s3.amazonaws.com
+                    if region is not us-east-1, endpoint should be https://<bucket-name>.s3-<region>.amazonaws.com
+                For GCS cold storage,
+                    endpoint should be https://storage.googleapis.com/<bucket-name>/data/
+                -->
+            <endpoint>https://BUCKET-NAME.s3-REGION-NAME.amazonaws.com/data/</endpoint>
             <access_key_id>ACCESS-KEY-ID</access_key_id>
             <secret_access_key>SECRET-ACCESS-KEY</secret_access_key>
+            <!-- In case of S3, uncomment the below configuration in case you want to read
+                AWS credentials from the Environment variables if they exist. -->
+            <!-- <use_environment_credentials>true</use_environment_credentials> -->
+            <!-- In case of GCS, uncomment the below configuration, since GCS does
+                not support batch deletion and result in error messages in logs. -->
+            <!-- <support_batch_delete>false</support_batch_delete> -->
         </s3>
    </disks>
    <policies>

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

@@ -27,7 +27,7 @@ services:
 
   alertmanager:
     container_name: alertmanager
-    image: signoz/alertmanager:0.23.0-0.2
+    image: signoz/alertmanager:0.23.1
     volumes:
       - ./data/alertmanager:/data
     depends_on:
@@ -41,8 +41,8 @@ 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
-    command: ["--config=/etc/otel-collector-config.yaml"]
+    image: signoz/signoz-otel-collector:0.79.4
+    command: ["--config=/etc/otel-collector-config.yaml", "--feature-gates=-pkg.translator.prometheus.NormalizeName"]
     # user: root # required for reading docker container logs
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -67,8 +67,8 @@ services:
 
   otel-collector-metrics:
     container_name: otel-collector-metrics
-    image: signoz/signoz-otel-collector:0.66.6
-    command: ["--config=/etc/otel-collector-metrics-config.yaml"]
+    image: signoz/signoz-otel-collector:0.79.4
+    command: ["--config=/etc/otel-collector-metrics-config.yaml", "--feature-gates=-pkg.translator.prometheus.NormalizeName"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
     # ports:
@@ -93,7 +93,7 @@ services:
       - JAEGER_ENDPOINT=http://otel-collector:14268/api/traces
 
   load-hotrod:
-    image: "grubykarol/locust:1.2.3-python3.9-alpine3.12"
+    image: "signoz/locust:1.2.3"
     container_name: load-hotrod
     hostname: load-hotrod
     environment:

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

@@ -34,9 +34,9 @@ x-clickhouse-depend: &clickhouse-depend
     #   condition: service_healthy
 
 services:
-  
+
   zookeeper-1:
-    image: bitnami/zookeeper:3.7.0
+    image: bitnami/zookeeper:3.7.1
     container_name: zookeeper-1
     hostname: zookeeper-1
     user: root
@@ -120,7 +120,7 @@ services:
   #     - ./data/clickhouse-2/:/var/lib/clickhouse/
   #     - ./user_scripts:/var/lib/clickhouse/user_scripts/
 
-
+  
   # clickhouse-3:
   #   <<: *clickhouse-defaults
   #   container_name: clickhouse-3
@@ -139,7 +139,7 @@ services:
   #     - ./user_scripts:/var/lib/clickhouse/user_scripts/
 
   alertmanager:
-    image: signoz/alertmanager:${ALERTMANAGER_TAG:-0.23.0-0.2}
+    image: signoz/alertmanager:${ALERTMANAGER_TAG:-0.23.1}
     volumes:
       - ./data/alertmanager:/data
     depends_on:
@@ -150,10 +150,10 @@ services:
       - --queryService.url=http://query-service:8085
       - --storage.path=/data
 
-# Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
+  # 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.24.0}
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
@@ -181,7 +181,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.17.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.24.0}
     container_name: frontend
     restart: on-failure
     depends_on:
@@ -193,8 +193,8 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.6}
-    command: ["--config=/etc/otel-collector-config.yaml"]
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.79.4}
+    command: ["--config=/etc/otel-collector-config.yaml", "--feature-gates=-pkg.translator.prometheus.NormalizeName"]
     user: root # required for reading docker container logs
     volumes:
       - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
@@ -219,8 +219,8 @@ services:
     <<: *clickhouse-depend
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.66.6}
-    command: ["--config=/etc/otel-collector-metrics-config.yaml"]
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.79.4}
+    command: ["--config=/etc/otel-collector-metrics-config.yaml", "--feature-gates=-pkg.translator.prometheus.NormalizeName"]
     volumes:
       - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
     # ports:
@@ -243,7 +243,7 @@ services:
       - JAEGER_ENDPOINT=http://otel-collector:14268/api/traces
 
   load-hotrod:
-    image: "grubykarol/locust:1.2.3-python3.9-alpine3.12"
+    image: "signoz/locust:1.2.3"
     container_name: load-hotrod
     hostname: load-hotrod
     environment:

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

@@ -70,6 +70,40 @@ receivers:
 
 
 processors:
+  logstransform/internal:
+    operators:
+      - type: trace_parser
+        if: '"trace_id" in attributes or "span_id" in attributes'
+        trace_id:
+          parse_from: attributes.trace_id
+        span_id:
+          parse_from: attributes.span_id
+        output: remove_trace_id
+      - type: trace_parser
+        if: '"traceId" in attributes or "spanId" in attributes'
+        trace_id:
+          parse_from: attributes.traceId
+        span_id:
+          parse_from: attributes.spanId
+        output: remove_traceId
+      - id: remove_traceId
+        type: remove
+        if: '"traceId" in attributes'
+        field: attributes.traceId
+        output: remove_spanId
+      - id: remove_spanId
+        type: remove
+        if: '"spanId" in attributes'
+        field: attributes.spanId
+      - id: remove_trace_id
+        type: remove
+        if: '"trace_id" in attributes'
+        field: attributes.trace_id
+        output: remove_span_id
+      - id: remove_span_id
+        type: remove
+        if: '"span_id" in attributes'
+        field: attributes.span_id
   batch:
     send_batch_size: 10000
     send_batch_max_size: 11000
@@ -104,7 +138,7 @@ processors:
   #   retry_on_failure: true
   resourcedetection:
     # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
-    detectors: [env, system] # include ec2 for AWS, gce for GCP and azure for Azure.
+    detectors: [env, system] # include ec2 for AWS, gcp for GCP and azure for Azure.
     timeout: 2s
 
 extensions:
@@ -172,5 +206,5 @@ service:
       exporters: [prometheus]
     logs:
       receivers: [otlp, filelog/dockercontainers]
-      processors: [batch]
+      processors: [logstransform/internal, batch]
       exporters: [clickhouselogsexporter]

deploy/install.sh

@@ -125,7 +125,7 @@ check_ports_occupied() {
 
         echo "+++++++++++ ERROR ++++++++++++++++++++++"
         echo "SigNoz requires ports 3301 & 4317 to be open. Please shut down any other service(s) that may be running on these ports."
-        echo "You can run SigNoz on another port following this guide https://signoz.io/docs/deployment/docker#troubleshooting"
+        echo "You can run SigNoz on another port following this guide https://signoz.io/docs/install/troubleshooting/"
         echo "++++++++++++++++++++++++++++++++++++++++"
         echo ""
         exit 1
@@ -249,7 +249,7 @@ bye() {  # Prints a friendly good bye message and exits the script.
         echo ""
         echo -e "$sudo_cmd docker-compose -f ./docker/clickhouse-setup/docker-compose.yaml ps -a"
 
-        # echo "Please read our troubleshooting guide https://signoz.io/docs/deployment/docker#troubleshooting"
+        echo "Please read our troubleshooting guide https://signoz.io/docs/install/troubleshooting/"
         echo "or reach us for support in #help channel in our Slack Community https://signoz.io/slack"
         echo "++++++++++++++++++++++++++++++++++++++++"
 
@@ -277,7 +277,7 @@ request_sudo() {
         echo -e "\n\n🙇 We will need sudo access to complete the installation."
         if (( $EUID != 0 )); then
             sudo_cmd="sudo"
-            echo -e "Please enter your sudo password, if prompt."
+            echo -e "Please enter your sudo password, if prompted."
             # $sudo_cmd -l | grep -e "NOPASSWD: ALL" > /dev/null
             # if [[ $? -ne 0 ]] && ! $sudo_cmd -v; then
             #     echo "Need sudo privileges to proceed with the installation."
@@ -500,7 +500,7 @@ if [[ $status_code -ne 200 ]]; then
 
     echo -e "$sudo_cmd docker-compose -f ./docker/clickhouse-setup/docker-compose.yaml ps -a"
 
-    echo "Please read our troubleshooting guide https://signoz.io/docs/deployment/docker/#troubleshooting-of-common-issues"
+    echo "Please read our troubleshooting guide https://signoz.io/docs/install/troubleshooting/"
     echo "or reach us on SigNoz for support https://signoz.io/slack"
     echo "++++++++++++++++++++++++++++++++++++++++"
 

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

@@ -15,11 +15,14 @@ import (
 )
 
 type APIHandlerOptions struct {
-	DataConnector  interfaces.DataConnector
-	AppDao         dao.ModelDao
-	RulesManager   *rules.Manager
-	FeatureFlags   baseint.FeatureLookup
-	LicenseManager *license.Manager
+	DataConnector     interfaces.DataConnector
+	SkipConfig        *basemodel.SkipConfig
+	PreferDelta       bool
+	PreferSpanMetrics bool
+	AppDao            dao.ModelDao
+	RulesManager      *rules.Manager
+	FeatureFlags      baseint.FeatureLookup
+	LicenseManager    *license.Manager
 }
 
 type APIHandler struct {
@@ -31,10 +34,13 @@ type APIHandler struct {
 func NewAPIHandler(opts APIHandlerOptions) (*APIHandler, error) {
 
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
-		Reader:       opts.DataConnector,
-		AppDao:       opts.AppDao,
-		RuleManager:  opts.RulesManager,
-		FeatureFlags: opts.FeatureFlags})
+		Reader:            opts.DataConnector,
+		SkipConfig:        opts.SkipConfig,
+		PerferDelta:       opts.PreferDelta,
+		PreferSpanMetrics: opts.PreferSpanMetrics,
+		AppDao:            opts.AppDao,
+		RuleManager:       opts.RulesManager,
+		FeatureFlags:      opts.FeatureFlags})
 
 	if err != nil {
 		return nil, err

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

@@ -2,9 +2,23 @@ package api
 
 import (
 	"net/http"
+
+	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 )
 
 func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
-	featureSet := ah.FF().GetFeatureFlags()
+	featureSet, err := ah.FF().GetFeatureFlags()
+	if err != nil {
+		ah.HandleError(w, err, http.StatusInternalServerError)
+		return
+	}
+	if ah.opts.PreferSpanMetrics {
+		for idx := range featureSet {
+			feature := &featureSet[idx]
+			if feature.Name == basemodel.UseSpanMetrics {
+				featureSet[idx].Active = true
+			}
+		}
+	}
 	ah.Respond(w, featureSet)
 }

ee/query-service/app/server.go

@@ -22,6 +22,8 @@ import (
 	"go.signoz.io/signoz/ee/query-service/app/db"
 	"go.signoz.io/signoz/ee/query-service/dao"
 	"go.signoz.io/signoz/ee/query-service/interfaces"
+	baseInterface "go.signoz.io/signoz/pkg/query-service/interfaces"
+
 	licensepkg "go.signoz.io/signoz/ee/query-service/license"
 	"go.signoz.io/signoz/ee/query-service/usage"
 
@@ -47,12 +49,15 @@ import (
 const AppDbEngine = "sqlite"
 
 type ServerOptions struct {
-	PromConfigPath  string
-	HTTPHostPort    string
-	PrivateHostPort string
+	PromConfigPath    string
+	SkipTopLvlOpsPath string
+	HTTPHostPort      string
+	PrivateHostPort   string
 	// alert specific params
-	DisableRules bool
-	RuleRepoURL  string
+	DisableRules      bool
+	RuleRepoURL       string
+	PreferDelta       bool
+	PreferSpanMetrics bool
 }
 
 // Server runs HTTP api service
@@ -117,7 +122,15 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		go qb.Start(readerReady)
 		reader = qb
 	} else {
-		return nil, fmt.Errorf("Storage type: %s is not supported in query service", storage)
+		return nil, fmt.Errorf("storage type: %s is not supported in query service", storage)
+	}
+	skipConfig := &basemodel.SkipConfig{}
+	if serverOptions.SkipTopLvlOpsPath != "" {
+		// read skip config
+		skipConfig, err = basemodel.ReadSkipConfig(serverOptions.SkipTopLvlOpsPath)
+		if err != nil {
+			return nil, err
+		}
 	}
 
 	<-readerReady
@@ -126,7 +139,8 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 		serverOptions.RuleRepoURL,
 		localDB,
 		reader,
-		serverOptions.DisableRules)
+		serverOptions.DisableRules,
+		lm)
 
 	if err != nil {
 		return nil, err
@@ -156,11 +170,14 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	telemetry.GetInstance().SetReader(reader)
 
 	apiOpts := api.APIHandlerOptions{
-		DataConnector:  reader,
-		AppDao:         modelDao,
-		RulesManager:   rm,
-		FeatureFlags:   lm,
-		LicenseManager: lm,
+		DataConnector:     reader,
+		SkipConfig:        skipConfig,
+		PreferDelta:       serverOptions.PreferDelta,
+		PreferSpanMetrics: serverOptions.PreferSpanMetrics,
+		AppDao:            modelDao,
+		RulesManager:      rm,
+		FeatureFlags:      lm,
+		LicenseManager:    lm,
 	}
 
 	apiHandler, err := api.NewAPIHandler(apiOpts)
@@ -274,7 +291,7 @@ func loggingMiddleware(next http.Handler) http.Handler {
 		path, _ := route.GetPathTemplate()
 		startTime := time.Now()
 		next.ServeHTTP(w, r)
-		zap.S().Info(path, "\ttimeTaken: ", time.Now().Sub(startTime))
+		zap.L().Info(path+"\ttimeTaken:"+time.Now().Sub(startTime).String(), zap.Duration("timeTaken", time.Now().Sub(startTime)), zap.String("path", path))
 	})
 }
 
@@ -286,7 +303,7 @@ func loggingMiddlewarePrivate(next http.Handler) http.Handler {
 		path, _ := route.GetPathTemplate()
 		startTime := time.Now()
 		next.ServeHTTP(w, r)
-		zap.S().Info(path, "\tprivatePort: true", "\ttimeTaken: ", time.Now().Sub(startTime))
+		zap.L().Info(path+"\tprivatePort: true \ttimeTaken"+time.Now().Sub(startTime).String(), zap.Duration("timeTaken", time.Now().Sub(startTime)), zap.String("path", path), zap.Bool("tprivatePort", true))
 	})
 }
 
@@ -402,7 +419,7 @@ func setTimeoutMiddleware(next http.Handler) http.Handler {
 		// check if route is not excluded
 		url := r.URL.Path
 		if _, ok := baseconst.TimeoutExcludedRoutes[url]; !ok {
-			ctx, cancel = context.WithTimeout(r.Context(), baseconst.ContextTimeout*time.Second)
+			ctx, cancel = context.WithTimeout(r.Context(), baseconst.ContextTimeout)
 			defer cancel()
 		}
 
@@ -544,7 +561,8 @@ func makeRulesManager(
 	ruleRepoURL string,
 	db *sqlx.DB,
 	ch baseint.Reader,
-	disableRules bool) (*rules.Manager, error) {
+	disableRules bool,
+	fm baseInterface.FeatureLookup) (*rules.Manager, error) {
 
 	// create engine
 	pqle, err := pqle.FromConfigPath(promConfigPath)
@@ -571,6 +589,7 @@ func makeRulesManager(
 		Context:      context.Background(),
 		Logger:       nil,
 		DisableRules: disableRules,
+		FeatureFlags: fm,
 	}
 
 	// create Manager

ee/query-service/license/db.go

@@ -2,6 +2,7 @@ package license
 
 import (
 	"context"
+	"database/sql"
 	"fmt"
 	"time"
 
@@ -9,6 +10,7 @@ import (
 
 	"go.signoz.io/signoz/ee/query-service/license/sqlite"
 	"go.signoz.io/signoz/ee/query-service/model"
+	basemodel "go.signoz.io/signoz/pkg/query-service/model"
 	"go.uber.org/zap"
 )
 
@@ -125,3 +127,79 @@ func (r *Repo) UpdatePlanDetails(ctx context.Context,
 
 	return nil
 }
+
+func (r *Repo) CreateFeature(req *basemodel.Feature) *basemodel.ApiError {
+
+	_, err := r.db.Exec(
+		`INSERT INTO feature_status (name, active, usage, usage_limit, route)
+		VALUES (?, ?, ?, ?, ?);`,
+		req.Name, req.Active, req.Usage, req.UsageLimit, req.Route)
+	if err != nil {
+		return &basemodel.ApiError{Typ: basemodel.ErrorInternal, Err: err}
+	}
+	return nil
+}
+
+func (r *Repo) GetFeature(featureName string) (basemodel.Feature, error) {
+
+	var feature basemodel.Feature
+
+	err := r.db.Get(&feature,
+		`SELECT * FROM feature_status WHERE name = ?;`, featureName)
+	if err != nil {
+		return feature, err
+	}
+	if feature.Name == "" {
+		return feature, basemodel.ErrFeatureUnavailable{Key: featureName}
+	}
+	return feature, nil
+}
+
+func (r *Repo) GetAllFeatures() ([]basemodel.Feature, error) {
+
+	var feature []basemodel.Feature
+
+	err := r.db.Select(&feature,
+		`SELECT * FROM feature_status;`)
+	if err != nil {
+		return feature, err
+	}
+
+	return feature, nil
+}
+
+func (r *Repo) UpdateFeature(req basemodel.Feature) error {
+
+	_, err := r.db.Exec(
+		`UPDATE feature_status SET active = ?, usage = ?, usage_limit = ?, route = ? WHERE name = ?;`,
+		req.Active, req.Usage, req.UsageLimit, req.Route, req.Name)
+	if err != nil {
+		return err
+	}
+	return nil
+}
+
+func (r *Repo) InitFeatures(req basemodel.FeatureSet) error {
+	// get a feature by name, if it doesn't exist, create it. If it does exist, update it.
+	for _, feature := range req {
+		currentFeature, err := r.GetFeature(feature.Name)
+		if err != nil && err == sql.ErrNoRows {
+			err := r.CreateFeature(&feature)
+			if err != nil {
+				return err
+			}
+			continue
+		} else if err != nil {
+			return err
+		}
+		feature.Usage = currentFeature.Usage
+		if feature.Usage >= feature.UsageLimit && feature.UsageLimit != -1 {
+			feature.Active = false
+		}
+		err = r.UpdateFeature(feature)
+		if err != nil {
+			return err
+		}
+	}
+	return nil
+}

ee/query-service/license/manager.go

@@ -96,6 +96,11 @@ func (lm *Manager) SetActive(l *model.License) {
 	lm.activeFeatures = l.FeatureSet
 	// set default features
 	setDefaultFeatures(lm)
+
+	err := lm.InitFeatures(lm.activeFeatures)
+	if err != nil {
+		zap.S().Panicf("Couldn't activate features: %v", err)
+	}
 	if !lm.validatorRunning {
 		// we want to make sure only one validator runs,
 		// we already have lock() so good to go
@@ -106,9 +111,7 @@ func (lm *Manager) SetActive(l *model.License) {
 }
 
 func setDefaultFeatures(lm *Manager) {
-	for k, v := range baseconstants.DEFAULT_FEATURE_SET {
-		lm.activeFeatures[k] = v
-	}
+	lm.activeFeatures = append(lm.activeFeatures, baseconstants.DEFAULT_FEATURE_SET...)
 }
 
 // LoadActiveLicense loads the most recent active license
@@ -123,8 +126,13 @@ func (lm *Manager) LoadActiveLicense() error {
 	} else {
 		zap.S().Info("No active license found, defaulting to basic plan")
 		// if no active license is found, we default to basic(free) plan with all default features
-		lm.activeFeatures = basemodel.BasicPlan
+		lm.activeFeatures = model.BasicPlan
 		setDefaultFeatures(lm)
+		err := lm.InitFeatures(lm.activeFeatures)
+		if err != nil {
+			zap.S().Error("Couldn't initialize features: ", err)
+			return err
+		}
 	}
 
 	return nil
@@ -291,18 +299,31 @@ func (lm *Manager) Activate(ctx context.Context, key string) (licenseResponse *m
 // CheckFeature will be internally used by backend routines
 // for feature gating
 func (lm *Manager) CheckFeature(featureKey string) error {
-	if value, ok := lm.activeFeatures[featureKey]; ok {
-		if value {
-			return nil
-		}
-		return basemodel.ErrFeatureUnavailable{Key: featureKey}
+	feature, err := lm.repo.GetFeature(featureKey)
+	if err != nil {
+		return err
+	}
+	if feature.Active {
+		return nil
 	}
 	return basemodel.ErrFeatureUnavailable{Key: featureKey}
 }
 
 // GetFeatureFlags returns current active features
-func (lm *Manager) GetFeatureFlags() basemodel.FeatureSet {
-	return lm.activeFeatures
+func (lm *Manager) GetFeatureFlags() (basemodel.FeatureSet, error) {
+	return lm.repo.GetAllFeatures()
+}
+
+func (lm *Manager) InitFeatures(features basemodel.FeatureSet) error {
+	return lm.repo.InitFeatures(features)
+}
+
+func (lm *Manager) UpdateFeatureFlag(feature basemodel.Feature) error {
+	return lm.repo.UpdateFeature(feature)
+}
+
+func (lm *Manager) GetFeatureFlag(key string) (basemodel.Feature, error) {
+	return lm.repo.GetFeature(key)
 }
 
 // GetRepo return the license repo

ee/query-service/license/sqlite/init.go

@@ -2,6 +2,7 @@ package sqlite
 
 import (
 	"fmt"
+
 	"github.com/jmoiron/sqlx"
 )
 
@@ -33,5 +34,19 @@ func InitDB(db *sqlx.DB) error {
 	if err != nil {
 		return fmt.Errorf("Error in creating licenses table: %s", err.Error())
 	}
+
+	table_schema = `CREATE TABLE IF NOT EXISTS feature_status (
+		name TEXT PRIMARY KEY,
+		active bool,
+		usage INTEGER DEFAULT 0,
+		usage_limit INTEGER DEFAULT 0,
+		route TEXT
+	);`
+
+	_, err = db.Exec(table_schema)
+	if err != nil {
+		return fmt.Errorf("Error in creating feature_status table: %s", err.Error())
+	}
+
 	return nil
 }

ee/query-service/main.go

@@ -3,30 +3,78 @@ package main
 import (
 	"context"
 	"flag"
+	"log"
 	"os"
 	"os/signal"
+	"strconv"
 	"syscall"
+	"time"
 
+	"go.opentelemetry.io/otel/sdk/resource"
+	semconv "go.opentelemetry.io/otel/semconv/v1.4.0"
 	"go.signoz.io/signoz/ee/query-service/app"
 	"go.signoz.io/signoz/pkg/query-service/auth"
+	"go.signoz.io/signoz/pkg/query-service/constants"
 	baseconst "go.signoz.io/signoz/pkg/query-service/constants"
 	"go.signoz.io/signoz/pkg/query-service/version"
+	"google.golang.org/grpc"
+
+	zapotlpencoder "github.com/SigNoz/zap_otlp/zap_otlp_encoder"
+	zapotlpsync "github.com/SigNoz/zap_otlp/zap_otlp_sync"
 
 	"go.uber.org/zap"
 	"go.uber.org/zap/zapcore"
 )
 
-func initZapLog() *zap.Logger {
+func initZapLog(enableQueryServiceLogOTLPExport bool) *zap.Logger {
 	config := zap.NewDevelopmentConfig()
+	ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)
+	defer stop()
+
+	config.EncoderConfig.EncodeDuration = zapcore.StringDurationEncoder
+	otlpEncoder := zapotlpencoder.NewOTLPEncoder(config.EncoderConfig)
+	consoleEncoder := zapcore.NewConsoleEncoder(config.EncoderConfig)
+	defaultLogLevel := zapcore.DebugLevel
 	config.EncoderConfig.EncodeLevel = zapcore.CapitalColorLevelEncoder
 	config.EncoderConfig.TimeKey = "timestamp"
 	config.EncoderConfig.EncodeTime = zapcore.ISO8601TimeEncoder
-	logger, _ := config.Build()
+
+	res := resource.NewWithAttributes(
+		semconv.SchemaURL,
+		semconv.ServiceNameKey.String("query-service"),
+	)
+
+	core := zapcore.NewTee(
+		zapcore.NewCore(consoleEncoder, os.Stdout, defaultLogLevel),
+	)
+
+	if enableQueryServiceLogOTLPExport == true {
+		conn, err := grpc.DialContext(ctx, constants.OTLPTarget, grpc.WithBlock(), grpc.WithInsecure(), grpc.WithTimeout(time.Second*30))
+		if err != nil {
+			log.Println("failed to connect to otlp collector to export query service logs with error:", err)
+		} else {
+			logExportBatchSizeInt, err := strconv.Atoi(baseconst.LogExportBatchSize)
+			if err != nil {
+				logExportBatchSizeInt = 1000
+			}
+			ws := zapcore.AddSync(zapotlpsync.NewOtlpSyncer(conn, zapotlpsync.Options{
+				BatchSize:      logExportBatchSizeInt,
+				ResourceSchema: semconv.SchemaURL,
+				Resource:       res,
+			}))
+			core = zapcore.NewTee(
+				zapcore.NewCore(consoleEncoder, os.Stdout, defaultLogLevel),
+				zapcore.NewCore(otlpEncoder, zapcore.NewMultiWriteSyncer(ws), defaultLogLevel),
+			)
+		}
+	}
+	logger := zap.New(core, zap.AddCaller(), zap.AddStacktrace(zapcore.ErrorLevel))
+
 	return logger
 }
 
 func main() {
-	var promConfigPath string
+	var promConfigPath, skipTopLvlOpsPath string
 
 	// disables rule execution but allows change to the rule definition
 	var disableRules bool
@@ -34,12 +82,20 @@ func main() {
 	// the url used to build link in the alert messages in slack and other systems
 	var ruleRepoURL string
 
+	var enableQueryServiceLogOTLPExport bool
+	var preferDelta bool
+	var preferSpanMetrics bool
+
 	flag.StringVar(&promConfigPath, "config", "./config/prometheus.yml", "(prometheus config to read metrics)")
+	flag.StringVar(&skipTopLvlOpsPath, "skip-top-level-ops", "", "(config file to skip top level operations)")
 	flag.BoolVar(&disableRules, "rules.disable", false, "(disable rule evaluation)")
+	flag.BoolVar(&preferDelta, "prefer-delta", false, "(prefer delta over cumulative metrics)")
+	flag.BoolVar(&preferSpanMetrics, "prefer-span-metrics", false, "(prefer span metrics for service level metrics)")
 	flag.StringVar(&ruleRepoURL, "rules.repo-url", baseconst.AlertHelpPage, "(host address used to build rule link in alert messages)")
+	flag.BoolVar(&enableQueryServiceLogOTLPExport, "enable.query.service.log.otlp.export", false, "(enable query service log otlp export)")
 	flag.Parse()
 
-	loggerMgr := initZapLog()
+	loggerMgr := initZapLog(enableQueryServiceLogOTLPExport)
 	zap.ReplaceGlobals(loggerMgr)
 	defer loggerMgr.Sync() // flushes buffer, if any
 
@@ -47,11 +103,14 @@ func main() {
 	version.PrintVersion()
 
 	serverOptions := &app.ServerOptions{
-		HTTPHostPort:    baseconst.HTTPHostPort,
-		PromConfigPath:  promConfigPath,
-		PrivateHostPort: baseconst.PrivateHostPort,
-		DisableRules:    disableRules,
-		RuleRepoURL:     ruleRepoURL,
+		HTTPHostPort:      baseconst.HTTPHostPort,
+		PromConfigPath:    promConfigPath,
+		SkipTopLvlOpsPath: skipTopLvlOpsPath,
+		PreferDelta:       preferDelta,
+		PreferSpanMetrics: preferSpanMetrics,
+		PrivateHostPort:   baseconst.PrivateHostPort,
+		DisableRules:      disableRules,
+		RuleRepoURL:       ruleRepoURL,
 	}
 
 	// Read the jwt secret key

ee/query-service/model/plans.go

@@ -11,21 +11,164 @@ const Enterprise = "ENTERPRISE_PLAN"
 const DisableUpsell = "DISABLE_UPSELL"
 
 var BasicPlan = basemodel.FeatureSet{
-	Basic:         true,
-	SSO:           false,
-	DisableUpsell: false,
+	basemodel.Feature{
+		Name:       SSO,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.OSS,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       DisableUpsell,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.SmartTraceDetail,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.CustomMetricsFunction,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.QueryBuilderPanels,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: 5,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.QueryBuilderAlerts,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: 5,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.UseSpanMetrics,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }
 
 var ProPlan = basemodel.FeatureSet{
-	Pro:                             true,
-	SSO:                             true,
-	basemodel.SmartTraceDetail:      true,
-	basemodel.CustomMetricsFunction: true,
+	basemodel.Feature{
+		Name:       SSO,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.OSS,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.SmartTraceDetail,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.CustomMetricsFunction,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.QueryBuilderPanels,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.QueryBuilderAlerts,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.UseSpanMetrics,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }
 
 var EnterprisePlan = basemodel.FeatureSet{
-	Enterprise:                      true,
-	SSO:                             true,
-	basemodel.SmartTraceDetail:      true,
-	basemodel.CustomMetricsFunction: true,
+	basemodel.Feature{
+		Name:       SSO,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.OSS,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.SmartTraceDetail,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.CustomMetricsFunction,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.QueryBuilderPanels,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.QueryBuilderAlerts,
+		Active:     true,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
+	basemodel.Feature{
+		Name:       basemodel.UseSpanMetrics,
+		Active:     false,
+		Usage:      0,
+		UsageLimit: -1,
+		Route:      "",
+	},
 }

frontend/.babelrc

@@ -1,7 +1,7 @@
 {
 	"presets": [
 		"@babel/preset-env",
-		"@babel/preset-react",
+		["@babel/preset-react", { "runtime": "automatic" }],
 		"@babel/preset-typescript"
 	],
 	"plugins": [

frontend/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
 		'plugin:sonarjs/recommended',
 		'plugin:import/errors',
 		'plugin:import/warnings',
+		'plugin:react/jsx-runtime',
 	],
 	parser: '@typescript-eslint/parser',
 	parserOptions: {

frontend/.yarnrc

@@ -1 +1,2 @@
 network-timeout 600000
+save-prefix ""

frontend/CONTRIBUTIONS.md

@@ -0,0 +1,56 @@
+# **Frontend Guidelines**
+
+Embrace the spirit of collaboration and contribute to the success of our open-source project by adhering to these frontend development guidelines with precision and passion.
+
+### React and Components
+
+- Strive to create small and modular components, ensuring they are divided into individual pieces for improved maintainability and reusability.
+- Avoid passing inline objects or functions as props to React components, as they are recreated with each render cycle.
+  Utilize careful memoization of functions and variables, balancing optimization efforts to prevent potential performance issues. [When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback) by Kent C. Dodds is quite helpful for this scenario.
+- Minimize the use of inline functions whenever possible to enhance code readability and improve overall comprehension.
+- Employ the appropriate usage of useMemo and useCallback hooks for effective memoization of values and functions.
+- Determine the appropriate placement of components:
+  - Pages should contain an aggregation of all components and containers.
+  - Commonly used components should reside in the 'components' directory.
+  - Parent components responsible for data manipulation should be placed in the 'container' directory.
+- Strategically decide where to store data, either in global state or local components:
+  - Begin by storing data in local components and gradually transition to global state as necessary.
+- Avoid importing default namespace `React` as the project is using `v18` and `import React from 'react'` is not needed anymore.
+- When a function requires more than three arguments (except when memoized), encapsulate them within an object to enhance readability and reduce potential parameter complexity.
+
+### API and Services
+
+- Avoid incorporating business logic within API/Service files to maintain flexibility for consumers to handle it according to their specific needs.
+- Employ the use of the useQuery hook for fetching data and the useMutation hook for updating data, ensuring a consistent and efficient approach.
+- Utilize the useQueryClient hook when updating the cache, facilitating smooth and effective management of data within the application.
+
+**Note -** In our project, we are utilizing React Query v3. To gain a comprehensive understanding of its features and implementation, we recommend referring to the [official documentation](https://tanstack.com/query/v3/docs/react/overview) as a valuable resource.
+
+### Styling
+
+- Refrain from using inline styling within React components to maintain separation of concerns and promote a more maintainable codebase.
+- Opt for using the rem unit instead of px values to ensure better scalability and responsiveness across different devices and screen sizes.
+
+### Linting and Setup
+
+- It is crucial to refrain from disabling ESLint and TypeScript errors within the project. If there is a specific rule that needs to be disabled, provide a clear and justified explanation for doing so. Maintaining the integrity of the linting and type-checking processes ensures code quality and consistency throughout the codebase.
+- In our project, we rely on several essential ESLint plugins, namely:
+  - [plugin:@typescript-eslint](https://typescript-eslint.io/rules/)
+  - [airbnb styleguide](https://github.com/airbnb/javascript)
+  - [plugin:sonarjs](https://github.com/SonarSource/eslint-plugin-sonarjs)
+
+    To ensure compliance with our coding standards and best practices, we encourage you to refer to the documentation of these plugins. Familiarizing yourself with the ESLint rules they provide will help maintain code quality and consistency throughout the project.
+
+### Naming Conventions
+
+- Ensure that component names are written in Capital Case, while the folder names should be in lowercase.
+- Keep all other elements, such as variables, functions, and file names, in lowercase.
+
+### Miscellaneous
+
+- Ensure that functions are modularized and follow the Single Responsibility Principle (SRP). The function's name should accurately convey its purpose and functionality.
+- Semantic division of functions into smaller units should be prioritized for improved readability and maintainability.
+  Aim to keep functions concise and avoid exceeding a maximum length of 40 lines to enhance code understandability and ease of maintenance.
+- Eliminate the use of hard-coded strings or enums, favoring a more flexible and maintainable approach.
+- Strive to internationalize all strings within the codebase to support localization and improve accessibility for users across different languages.
+- Minimize the usage of multiple if statements or switch cases within a function. Consider creating a mapper and separating logic into multiple functions for better code organization.

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Builder stage
-FROM node:16.15.0-slim as builder
+FROM node:16.15.0 as builder
 
 # Add Maintainer Info
 LABEL maintainer="signoz"
@@ -11,6 +11,8 @@ WORKDIR /frontend
 
 # Copy the package.json and .yarnrc files prior to install dependencies
 COPY package.json ./
+# Copy lock file
+COPY yarn.lock ./
 COPY .yarnrc ./
 
 # Install the dependencies and make the folder

frontend/jest.setup.ts

@@ -1,5 +1,20 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable object-shorthand */
+/* eslint-disable func-names */
+
 /**
  * Adds custom matchers from the react testing library to all tests
  */
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
+
+// Mock window.matchMedia
+window.matchMedia =
+	window.matchMedia ||
+	function (): any {
+		return {
+			matches: false,
+			addListener: function () {},
+			removeListener: function () {},
+		};
+	};

frontend/package.json

@@ -34,6 +34,7 @@
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
 		"antd": "5.0.5",
+		"antd-table-saveas-excel": "2.2.1",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^26.6.0",
@@ -48,15 +49,11 @@
 		"cross-env": "^7.0.3",
 		"css-loader": "4.3.0",
 		"css-minimizer-webpack-plugin": "^3.2.0",
-		"d3": "^6.2.0",
-		"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",
@@ -69,10 +66,11 @@
 		"less-loader": "^10.2.0",
 		"lodash-es": "^4.17.21",
 		"mini-css-extract-plugin": "2.4.5",
+		"papaparse": "5.4.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
+		"react-drag-listview": "2.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",
@@ -126,16 +124,14 @@
 		"@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/papaparse": "5.3.7",
 		"@types/react": "18.0.26",
 		"@types/react-dom": "18.0.10",
 		"@types/react-grid-layout": "^1.1.2",
@@ -144,7 +140,6 @@
 		"@types/react-router-dom": "^5.1.6",
 		"@types/styled-components": "^5.1.4",
 		"@types/uuid": "^8.3.1",
-		"@types/vis": "^4.21.21",
 		"@types/webpack": "^5.28.0",
 		"@types/webpack-dev-server": "^4.3.0",
 		"@typescript-eslint/eslint-plugin": "^4.28.2",
@@ -174,7 +169,6 @@
 		"is-ci": "^3.0.1",
 		"jest-playwright-preset": "^1.7.0",
 		"jest-styled-components": "^7.0.8",
-		"less-plugin-npm-import": "^2.1.0",
 		"lint-staged": "^12.3.7",
 		"portfinder-sync": "^0.0.2",
 		"prettier": "2.2.1",

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

@@ -0,0 +1,11 @@
+{
+	"options_menu": {
+		"options": "Options",
+		"format": "Format",
+		"raw": "Raw",
+		"default": "Default",
+		"column": "Column",
+		"maxLines": "Max lines per Row",
+		"addColumn": "Add a column"
+	}
+}

frontend/public/locales/en/trace.json

@@ -0,0 +1,11 @@
+{
+	"options_menu": {
+		"options": "Options",
+		"format": "Format",
+		"raw": "Raw",
+		"default": "Default",
+		"column": "Column",
+		"maxLines": "Max lines per Row",
+		"addColumn": "Add a column"
+	}
+}

frontend/src/AppRoutes/Private.tsx

@@ -7,7 +7,7 @@ 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 { ReactChild, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { matchPath, Redirect, useLocation } from 'react-router-dom';
@@ -161,7 +161,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 }
 
 interface PrivateRouteProps {
-	children: React.ReactChild;
+	children: ReactChild;
 }
 
 export default PrivateRoute;

frontend/src/AppRoutes/index.tsx

@@ -4,9 +4,10 @@ import Spinner from 'components/Spinner';
 import AppLayout from 'container/AppLayout';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import { NotificationProvider } from 'hooks/useNotifications';
+import { ResourceProvider } from 'hooks/useResourceAttribute';
 import history from 'lib/history';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
-import React, { Suspense } from 'react';
+import { Suspense } from 'react';
 import { Route, Router, Switch } from 'react-router-dom';
 
 import PrivateRoute from './Private';
@@ -17,30 +18,32 @@ function App(): JSX.Element {
 
 	return (
 		<ConfigProvider theme={themeConfig}>
-			<NotificationProvider>
-				<Router history={history}>
+			<Router history={history}>
+				<NotificationProvider>
 					<PrivateRoute>
-						<QueryBuilderProvider>
-							<AppLayout>
-								<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-									<Switch>
-										{routes.map(({ path, component, exact }) => (
-											<Route
-												key={`${path}`}
-												exact={exact}
-												path={path}
-												component={component}
-											/>
-										))}
+						<ResourceProvider>
+							<QueryBuilderProvider>
+								<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>
-						</QueryBuilderProvider>
+											<Route path="*" component={NotFound} />
+										</Switch>
+									</Suspense>
+								</AppLayout>
+							</QueryBuilderProvider>
+						</ResourceProvider>
 					</PrivateRoute>
-				</Router>
-			</NotificationProvider>
+				</NotificationProvider>
+			</Router>
 		</ConfigProvider>
 	);
 }

frontend/src/AppRoutes/pageComponents.ts

@@ -7,7 +7,7 @@ export const ServicesTablePage = Loadable(
 export const ServiceMetricsPage = Loadable(
 	() =>
 		import(
-			/* webpackChunkName: "ServiceMetricsPage" */ 'pages/MetricApplication'
+			/* webpackChunkName: "ServiceMetricsPage" */ 'pages/MetricsApplication'
 		),
 );
 
@@ -15,6 +15,11 @@ export const ServiceMapPage = Loadable(
 	() => import(/* webpackChunkName: "ServiceMapPage" */ 'modules/Servicemap'),
 );
 
+export const TracesExplorer = Loadable(
+	() =>
+		import(/* webpackChunkName: "Traces Explorer Page" */ 'pages/TracesExplorer'),
+);
+
 export const TraceFilter = Loadable(
 	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
 );
@@ -101,6 +106,10 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/Logs'),
 );
 
+export const LogsExplorer = Loadable(
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsExplorer'),
+);
+
 export const Login = Loadable(
 	() => import(/* webpackChunkName: "Login" */ 'pages/Login'),
 );

frontend/src/AppRoutes/routes.ts

@@ -16,6 +16,7 @@ import {
 	ListAllALertsPage,
 	Login,
 	Logs,
+	LogsExplorer,
 	MySettings,
 	NewDashboardPage,
 	OrganizationSettings,
@@ -29,6 +30,7 @@ import {
 	StatusPage,
 	TraceDetail,
 	TraceFilter,
+	TracesExplorer,
 	UnAuthorized,
 	UsageExplorerPage,
 } from './pageComponents';
@@ -139,6 +141,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACE',
 	},
+	{
+		path: ROUTES.TRACES_EXPLORER,
+		exact: true,
+		component: TracesExplorer,
+		isPrivate: true,
+		key: 'TRACES_EXPLORER',
+	},
 	{
 		path: ROUTES.CHANNELS_NEW,
 		exact: true,
@@ -209,6 +218,13 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LOGS_EXPLORER,
+		exact: true,
+		component: LogsExplorer,
+		key: 'LOGS_EXPLORER',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LOGIN,
 		exact: true,

frontend/src/api/ErrorResponseHandler.ts

@@ -16,7 +16,7 @@ export function ErrorResponseHandler(error: AxiosError): ErrorResponse {
 				return {
 					statusCode,
 					payload: null,
-					error: 'Not Found',
+					error: data.errorType,
 					message: null,
 				};
 			}

frontend/src/api/apiV1.ts

@@ -1,6 +1,7 @@
 const apiV1 = '/api/v1/';
 
 export const apiV2 = '/api/v2/';
+export const apiV3 = '/api/v3/';
 export const apiAlertManager = '/api/alertmanager';
 
 export default apiV1;

frontend/src/api/errors/getAll.ts

@@ -1,7 +1,6 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import createQueryParams from 'lib/createQueryParams';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/errors/getAll';
 
@@ -9,11 +8,17 @@ const getAll = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.get(
-			`/listErrors?${createQueryParams({
-				...props,
-			})}`,
-		);
+		const response = await axios.post(`/listErrors`, {
+			start: `${props.start}`,
+			end: `${props.end}`,
+			order: props.order,
+			orderParam: props.orderParam,
+			limit: props.limit,
+			offset: props.offset,
+			exceptionType: props.exceptionType,
+			serviceName: props.serviceName,
+			tags: props.tags,
+		});
 
 		return {
 			statusCode: 200,

frontend/src/api/errors/getErrorCounts.ts

@@ -1,7 +1,6 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
-import createQueryParams from 'lib/createQueryParams';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/errors/getErrorCounts';
 
@@ -9,11 +8,13 @@ const getErrorCounts = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
-		const response = await axios.get(
-			`/countErrors?${createQueryParams({
-				...props,
-			})}`,
-		);
+		const response = await axios.post(`/countErrors`, {
+			start: `${props.start}`,
+			end: `${props.end}`,
+			exceptionType: props.exceptionType,
+			serviceName: props.serviceName,
+			tags: props.tags,
+		});
 
 		return {
 			statusCode: 200,

frontend/src/api/features/getFeatures.ts

@@ -1,23 +0,0 @@
-import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps } from 'types/api/features/getFeatures';
-
-const getFeaturesFlags = async (): Promise<
-	SuccessResponse<PayloadProps> | ErrorResponse
-> => {
-	try {
-		const response = await axios.get(`/featureFlags`);
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
-};
-
-export default getFeaturesFlags;

frontend/src/api/index.ts

@@ -9,7 +9,7 @@ import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import store from 'store';
 
-import apiV1, { apiAlertManager, apiV2 } from './apiV1';
+import apiV1, { apiAlertManager, apiV2, apiV3 } from './apiV1';
 import { Logout } from './utils';
 
 const interceptorsResponse = (
@@ -109,6 +109,17 @@ ApiV2Instance.interceptors.response.use(
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
 
+// axios V3
+export const ApiV3Instance = axios.create({
+	baseURL: `${ENVIRONMENT.baseURL}${apiV3}`,
+});
+ApiV3Instance.interceptors.response.use(
+	interceptorsResponse,
+	interceptorRejected,
+);
+ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+//
+
 AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorsResponse,
 	interceptorRejected,

frontend/src/api/metrics/getQueryRange.ts

@@ -1,17 +1,17 @@
-import { ApiV2Instance as axios } from 'api';
+import { ApiV3Instance as axios } from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
-	MetricRangePayloadProps,
+	MetricRangePayloadV3,
 	MetricsRangeProps,
 } from 'types/api/metrics/getQueryRange';
 
 export const getMetricsQueryRange = async (
 	props: MetricsRangeProps,
-): Promise<SuccessResponse<MetricRangePayloadProps> | ErrorResponse> => {
+): Promise<SuccessResponse<MetricRangePayloadV3> | ErrorResponse> => {
 	try {
-		const response = await axios.post(`/metrics/query_range`, props);
+		const response = await axios.post('/query_range', props);
 
 		return {
 			statusCode: 200,

frontend/src/api/metrics/getServiceOverview.ts

@@ -1,30 +1,16 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/metrics/getServiceOverview';
 
-const getServiceOverview = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/service/overview`, {
-			start: `${props.start}`,
-			end: `${props.end}`,
-			service: props.service,
-			step: props.step,
-			tags: props.selectedTags,
-		});
+const getServiceOverview = async (props: Props): Promise<PayloadProps> => {
+	const response = await axios.post(`/service/overview`, {
+		start: `${props.start}`,
+		end: `${props.end}`,
+		service: props.service,
+		step: props.step,
+		tags: props.selectedTags,
+	});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return response.data;
 };
 
 export default getServiceOverview;

frontend/src/api/metrics/getTopLevelOperations.ts

@@ -1,24 +1,12 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { PayloadProps, Props } from 'types/api/metrics/getTopLevelOperations';
 
-const getTopLevelOperations = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/service/top_level_operations`);
+const getTopLevelOperations = async (): Promise<ServiceDataProps> => {
+	const response = await axios.post(`/service/top_level_operations`);
+	return response.data;
+};
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data[props.service],
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+export type ServiceDataProps = {
+	[serviceName: string]: string[];
 };
 
 export default getTopLevelOperations;

frontend/src/api/metrics/getTopOperations.ts

@@ -1,29 +1,15 @@
 import axios from 'api';
-import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { AxiosError } from 'axios';
-import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/metrics/getTopOperations';
 
-const getTopOperations = async (
-	props: Props,
-): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
-	try {
-		const response = await axios.post(`/service/top_operations`, {
-			start: `${props.start}`,
-			end: `${props.end}`,
-			service: props.service,
-			tags: props.selectedTags,
-		});
+const getTopOperations = async (props: Props): Promise<PayloadProps> => {
+	const response = await axios.post(`/service/top_operations`, {
+		start: `${props.start}`,
+		end: `${props.end}`,
+		service: props.service,
+		tags: props.selectedTags,
+	});
 
-		return {
-			statusCode: 200,
-			error: null,
-			message: response.data.status,
-			payload: response.data,
-		};
-	} catch (error) {
-		return ErrorResponseHandler(error as AxiosError);
-	}
+	return response.data;
 };
 
 export default getTopOperations;

frontend/src/api/queryBuilder/getAggregateAttribute.ts

@@ -0,0 +1,49 @@
+import { ApiV3Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError, AxiosResponse } from 'axios';
+import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
+import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
+import createQueryParams from 'lib/createQueryParams';
+// ** Helpers
+import { ErrorResponse, SuccessResponse } from 'types/api';
+// ** Types
+import { IGetAggregateAttributePayload } from 'types/api/queryBuilder/getAggregatorAttribute';
+import {
+	BaseAutocompleteData,
+	IQueryAutocompleteResponse,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+export const getAggregateAttribute = async ({
+	aggregateOperator,
+	searchText,
+	dataSource,
+}: IGetAggregateAttributePayload): Promise<
+	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
+> => {
+	try {
+		const response: AxiosResponse<{
+			data: IQueryAutocompleteResponse;
+		}> = await ApiV3Instance.get(
+			`autocomplete/aggregate_attributes?${createQueryParams({
+				aggregateOperator,
+				searchText,
+				dataSource,
+			})}`,
+		);
+
+		const payload: BaseAutocompleteData[] =
+			response.data.data.attributeKeys?.map(({ id: _, ...item }) => ({
+				...item,
+				id: createIdFromObjectFields(item, baseAutoCompleteIdKeysOrder),
+			})) || [];
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.statusText,
+			payload: { attributeKeys: payload },
+		};
+	} catch (e) {
+		return ErrorResponseHandler(e as AxiosError);
+	}
+};

frontend/src/api/queryBuilder/getAttributeKeys.ts

@@ -0,0 +1,51 @@
+import { ApiV3Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError, AxiosResponse } from 'axios';
+import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
+import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+// ** Types
+import { IGetAttributeKeysPayload } from 'types/api/queryBuilder/getAttributeKeys';
+import {
+	BaseAutocompleteData,
+	IQueryAutocompleteResponse,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+export const getAggregateKeys = async ({
+	aggregateOperator,
+	searchText,
+	dataSource,
+	aggregateAttribute,
+	tagType,
+}: IGetAttributeKeysPayload): Promise<
+	SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
+> => {
+	try {
+		const response: AxiosResponse<{
+			data: IQueryAutocompleteResponse;
+		}> = await ApiV3Instance.get(
+			`autocomplete/attribute_keys?${createQueryParams({
+				aggregateOperator,
+				searchText,
+				dataSource,
+				aggregateAttribute,
+			})}&tagType=${tagType}`,
+		);
+
+		const payload: BaseAutocompleteData[] =
+			response.data.data.attributeKeys?.map(({ id: _, ...item }) => ({
+				...item,
+				id: createIdFromObjectFields(item, baseAutoCompleteIdKeysOrder),
+			})) || [];
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.statusText,
+			payload: { attributeKeys: payload },
+		};
+	} catch (e) {
+		return ErrorResponseHandler(e as AxiosError);
+	}
+};

frontend/src/api/queryBuilder/getAttributesValues.ts

@@ -0,0 +1,42 @@
+import { ApiV3Instance } from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import createQueryParams from 'lib/createQueryParams';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	IAttributeValuesResponse,
+	IGetAttributeValuesPayload,
+} from 'types/api/queryBuilder/getAttributesValues';
+
+export const getAttributesValues = async ({
+	aggregateOperator,
+	dataSource,
+	aggregateAttribute,
+	attributeKey,
+	filterAttributeKeyDataType,
+	tagType,
+	searchText,
+}: IGetAttributeValuesPayload): Promise<
+	SuccessResponse<IAttributeValuesResponse> | ErrorResponse
+> => {
+	try {
+		const response = await ApiV3Instance.get(
+			`/autocomplete/attribute_values?${createQueryParams({
+				aggregateOperator,
+				dataSource,
+				aggregateAttribute,
+				attributeKey,
+				searchText,
+			})}&filterAttributeKeyDataType=${filterAttributeKeyDataType}&tagType=${tagType}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/trace/getSpans.ts

@@ -10,7 +10,7 @@ const getSpans = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: e.Key,
+			Key: `${e.Key}.(string)`,
 			Operator: e.Operator,
 			StringValues: e.StringValues,
 			NumberValues: e.NumberValues,

frontend/src/api/trace/getSpansAggregate.ts

@@ -28,7 +28,7 @@ const getSpanAggregate = async (
 		});
 
 		const updatedSelectedTags = props.selectedTags.map((e) => ({
-			Key: e.Key,
+			Key: `${e.Key}.(string)`,
 			Operator: e.Operator,
 			StringValues: e.StringValues,
 			NumberValues: e.NumberValues,

frontend/src/api/user/loginPrecheck.ts

@@ -9,9 +9,9 @@ const loginPrecheck = async (
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
 	try {
 		const response = await axios.get(
-			`/loginPrecheck?email=${props.email}&ref=${encodeURIComponent(
-				window.location.href,
-			)}`,
+			`/loginPrecheck?email=${encodeURIComponent(
+				props.email,
+			)}&ref=${encodeURIComponent(window.location.href)}`,
 		);
 
 		return {

frontend/src/api/user/signup.ts

@@ -14,7 +14,6 @@ const signup = async (
 		const response = await axios.post(`/register`, {
 			...props,
 		});
-		console.log(' response.data.data', response.data.data);
 		return {
 			statusCode: 200,
 			error: null,

frontend/src/assets/Dashboard/TimeSeries.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function TimeSeries(): JSX.Element {
 	return (
 		<svg

frontend/src/assets/Dashboard/Value.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 function Value(props: ValueProps): JSX.Element {
 	const { fillColor } = props;
@@ -20,7 +20,7 @@ function Value(props: ValueProps): JSX.Element {
 }
 
 interface ValueProps {
-	fillColor: React.CSSProperties['color'];
+	fillColor: CSSProperties['color'];
 }
 
 export default Value;

frontend/src/assets/NotFound.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function NotFound(): JSX.Element {
 	return (
 		<svg

frontend/src/assets/SomethingWentWrong.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function SomethingWentWrong(): JSX.Element {
 	return (
 		<svg

frontend/src/assets/UnAuthorized.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 function UnAuthorized(): JSX.Element {
 	return (
 		<svg

frontend/src/components/Editor/Editor.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import Editor from './index';
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn(),
+}));
+
+describe('Editor', () => {
+	it('renders correctly with default props', () => {
+		const { container } = render(<Editor value="" />);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders correctly with custom props', () => {
+		const customProps = {
+			value: 'test',
+			language: 'javascript',
+			readOnly: true,
+			height: '50vh',
+			options: { minimap: { enabled: false } },
+		};
+		const { container } = render(
+			<Editor
+				value={customProps.value}
+				height={customProps.height}
+				language={customProps.language}
+				options={customProps.options}
+				readOnly={customProps.readOnly}
+			/>,
+		);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders with dark mode theme', () => {
+		(useIsDarkMode as jest.Mock).mockImplementation(() => true);
+
+		const { container } = render(<Editor value="dark mode text" />);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('renders with light mode theme', () => {
+		(useIsDarkMode as jest.Mock).mockImplementation(() => false);
+
+		const { container } = render(<Editor value="light mode text" />);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('displays "Loading..." message initially', () => {
+		const { rerender } = render(<Editor value="initial text" />);
+
+		expect(screen.getByText('Loading...')).toBeInTheDocument();
+
+		rerender(<Editor value="initial text" />);
+	});
+});

frontend/src/components/Editor/__snapshots__/Editor.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor renders correctly with custom props 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 50vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;
+
+exports[`Editor renders correctly with default props 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;
+
+exports[`Editor renders with dark mode theme 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;
+
+exports[`Editor renders with light mode theme 1`] = `
+<div>
+  <section
+    style="display: flex; position: relative; text-align: initial; width: 100%; height: 40vh;"
+  >
+    <div
+      style="display: flex; height: 100%; width: 100%; justify-content: center; align-items: center;"
+    >
+      Loading...
+    </div>
+    <div
+      style="width: 100%; display: none;"
+    />
+  </section>
+</div>
+`;

frontend/src/components/Editor/index.tsx

@@ -1,6 +1,6 @@
 import MEditor, { EditorProps } from '@monaco-editor/react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 function Editor({
 	value,
@@ -13,6 +13,8 @@ function Editor({
 	const isDarkMode = useIsDarkMode();
 
 	const onChangeHandler = (newValue?: string): void => {
+		if (readOnly) return;
+
 		if (typeof newValue === 'string' && onChange) onChange(newValue);
 	};
 
@@ -29,6 +31,7 @@ function Editor({
 			options={editorOptions}
 			height={height}
 			onChange={onChangeHandler}
+			data-testid="monaco-editor"
 		/>
 	);
 }

frontend/src/components/ExplorerCard/index.tsx

@@ -0,0 +1,27 @@
+import { Card, Space, Typography } from 'antd';
+import TextToolTip from 'components/TextToolTip';
+
+function ExplorerCard({ children }: Props): JSX.Element {
+	return (
+		<Card
+			size="small"
+			title={
+				<Space>
+					<Typography>Query Builder</Typography>
+					<TextToolTip
+						url="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=new-query-builder"
+						text="More details on how to use query builder"
+					/>
+				</Space>
+			}
+		>
+			{children}
+		</Card>
+	);
+}
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export default ExplorerCard;

frontend/src/components/Graph/index.tsx

@@ -26,7 +26,7 @@ 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 { memo, useCallback, useEffect, useRef } from 'react';
 
 import { hasData } from './hasData';
 import { getAxisLabelColor } from './helpers';
@@ -181,6 +181,9 @@ function Graph({
 							},
 						},
 						position: 'custom',
+						itemSort(item1, item2) {
+							return item2.parsed.y - item1.parsed.y;
+						},
 					},
 					[dragSelectPluginId]: createDragSelectPluginOptions(
 						!!onDragSelect,
@@ -285,12 +288,11 @@ function Graph({
 			if (chartHasData) {
 				chartPlugins.push(createIntersectionCursorPlugin());
 				chartPlugins.push(createDragSelectPlugin());
+				chartPlugins.push(legend(name, data.datasets.length > 3));
 			} else {
 				chartPlugins.push(emptyGraph);
 			}
 
-			chartPlugins.push(legend(name, data.datasets.length > 3));
-
 			lineChartRef.current = new Chart(chartRef.current, {
 				type,
 				data,

frontend/src/components/Input/index.tsx

@@ -1,5 +1,12 @@
 import { Form, Input, InputProps, InputRef } from 'antd';
-import React from 'react';
+import {
+	ChangeEventHandler,
+	FocusEventHandler,
+	KeyboardEventHandler,
+	LegacyRef,
+	ReactNode,
+	Ref,
+} from 'react';
 
 function InputComponent({
 	value,
@@ -22,7 +29,7 @@ function InputComponent({
 				type={type}
 				onChange={onChangeHandler}
 				value={value}
-				ref={ref as React.Ref<InputRef>}
+				ref={ref as Ref<InputRef>}
 				size={size}
 				addonBefore={addonBefore}
 				onBlur={onBlurHandler}
@@ -37,15 +44,15 @@ function InputComponent({
 interface InputComponentProps extends InputProps {
 	value: InputProps['value'];
 	type?: InputProps['type'];
-	onChangeHandler?: React.ChangeEventHandler<HTMLInputElement>;
+	onChangeHandler?: ChangeEventHandler<HTMLInputElement>;
 	placeholder?: InputProps['placeholder'];
-	ref?: React.LegacyRef<InputRef>;
+	ref?: LegacyRef<InputRef>;
 	size?: InputProps['size'];
-	onBlurHandler?: React.FocusEventHandler<HTMLInputElement>;
-	onPressEnterHandler?: React.KeyboardEventHandler<HTMLInputElement>;
+	onBlurHandler?: FocusEventHandler<HTMLInputElement>;
+	onPressEnterHandler?: KeyboardEventHandler<HTMLInputElement>;
 	label?: string;
 	labelOnTop?: boolean;
-	addonBefore?: React.ReactNode;
+	addonBefore?: ReactNode;
 }
 
 InputComponent.defaultProps = {

frontend/src/components/Loadable/Loadable.test.tsx

@@ -0,0 +1,49 @@
+import {
+	render,
+	screen,
+	waitForElementToBeRemoved,
+} from '@testing-library/react';
+import React, { ComponentType, Suspense } from 'react';
+
+import Loadable from './index';
+
+// Sample component to be loaded lazily
+function SampleComponent(): JSX.Element {
+	return <div>Sample Component</div>;
+}
+
+const loadSampleComponent = (): Promise<{
+	default: ComponentType;
+}> =>
+	new Promise<{ default: ComponentType }>((resolve) => {
+		setTimeout(() => {
+			resolve({ default: SampleComponent });
+		}, 500);
+	});
+
+describe('Loadable', () => {
+	it('should render the lazily loaded component', async () => {
+		const LoadableSampleComponent = Loadable(loadSampleComponent);
+
+		const { container } = render(
+			<Suspense fallback={<div>Loading...</div>}>
+				<LoadableSampleComponent />
+			</Suspense>,
+		);
+
+		expect(screen.getByText('Loading...')).toBeInTheDocument();
+		await waitForElementToBeRemoved(() => screen.queryByText('Loading...'));
+
+		expect(container.querySelector('div')).toHaveTextContent('Sample Component');
+	});
+
+	it('should call lazy with the provided import path', () => {
+		const reactLazySpy = jest.spyOn(React, 'lazy');
+		Loadable(loadSampleComponent);
+
+		expect(reactLazySpy).toHaveBeenCalledTimes(1);
+		expect(reactLazySpy).toHaveBeenCalledWith(expect.any(Function));
+
+		reactLazySpy.mockRestore();
+	});
+});

frontend/src/components/Loadable/index.tsx

@@ -1,8 +1,8 @@
-import { ComponentType, lazy } from 'react';
+import { ComponentType, lazy, LazyExoticComponent } from 'react';
 
 function Loadable(importPath: {
 	(): LoadableProps;
-}): React.LazyExoticComponent<LazyComponent> {
+}): LazyExoticComponent<LazyComponent> {
 	return lazy(() => importPath());
 }
 

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -0,0 +1,9 @@
+import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
+import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
+import { ILog } from 'types/api/logs/log';
+
+export type LogDetailProps = {
+	log: ILog | null;
+	onClose: () => void;
+} & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
+	Pick<ActionItemProps, 'onClickActionItem'>;

frontend/src/components/LogDetail/index.tsx

@@ -0,0 +1,56 @@
+import { Drawer, Tabs } from 'antd';
+import JSONView from 'container/LogDetailedView/JsonView';
+import TableView from 'container/LogDetailedView/TableView';
+import { useMemo } from 'react';
+
+import { LogDetailProps } from './LogDetail.interfaces';
+
+function LogDetail({
+	log,
+	onClose,
+	onAddToQuery,
+	onClickActionItem,
+}: LogDetailProps): JSX.Element {
+	const onDrawerClose = (): void => {
+		onClose();
+	};
+
+	const items = useMemo(
+		() => [
+			{
+				label: 'Table',
+				key: '1',
+				children: log && (
+					<TableView
+						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
+					/>
+				),
+			},
+			{
+				label: 'JSON',
+				key: '2',
+				children: log && <JSONView logData={log} />,
+			},
+		],
+		[log, onAddToQuery, onClickActionItem],
+	);
+
+	return (
+		<Drawer
+			width="60%"
+			title="Log Details"
+			placement="right"
+			closable
+			onClose={onDrawerClose}
+			open={log !== null}
+			style={{ overscrollBehavior: 'contain' }}
+			destroyOnClose
+		>
+			<Tabs defaultActiveKey="1" items={items} />
+		</Drawer>
+	);
+}
+
+export default LogDetail;

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,61 +1,37 @@
-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';
+import { Popover } from 'antd';
+import { OPERATORS } from 'constants/queryBuilder';
+import { memo, ReactNode, useCallback, useMemo } from 'react';
+
+import { ButtonContainer } from './styles';
 
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,
+	onAddToQuery,
 	children,
 }: AddToQueryHOCProps): JSX.Element {
-	const {
-		searchFilter: { queryString },
-	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
-	const dispatch = useDispatch<Dispatch<AppActions>>();
-
-	const generatedQuery = useMemo(
-		() => generateFilterQuery({ fieldKey, fieldValue, type: 'IN' }),
-		[fieldKey, fieldValue],
-	);
-
 	const handleQueryAdd = useCallback(() => {
-		let updatedQueryString = queryString || '';
-
-		if (updatedQueryString.length === 0) {
-			updatedQueryString += `${generatedQuery}`;
-		} else {
-			updatedQueryString += ` AND ${generatedQuery}`;
-		}
-		dispatch({
-			type: SET_SEARCH_QUERY_STRING,
-			payload: {
-				searchQueryString: updatedQueryString,
-			},
-		});
-	}, [dispatch, generatedQuery, queryString]);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS.IN);
+	}, [fieldKey, fieldValue, onAddToQuery]);
 
 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [
 		fieldKey,
 	]);
 
 	return (
-		<Button size="small" type="text" onClick={handleQueryAdd}>
+		<ButtonContainer size="small" type="text" onClick={handleQueryAdd}>
 			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
-		</Button>
+		</ButtonContainer>
 	);
 }
 
-interface AddToQueryHOCProps {
+export interface AddToQueryHOCProps {
 	fieldKey: string;
 	fieldValue: string;
-	children: React.ReactNode;
+	onAddToQuery: (fieldKey: string, fieldValue: string, operator: string) => void;
+	children: ReactNode;
 }
 
 export default memo(AddToQueryHOC);

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import { ReactNode } from 'react';
 
 import { CategoryHeadingText } from './styles';
 
 interface ICategoryHeadingProps {
-	children: React.ReactNode;
+	children: ReactNode;
 }
 function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
 	return <CategoryHeadingText type="secondary">{children}</CategoryHeadingText>;

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -1,6 +1,6 @@
 import { Popover } from 'antd';
 import { useNotifications } from 'hooks/useNotifications';
-import React, { useCallback, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 import { useCopyToClipboard } from 'react-use';
 
 function CopyClipboardHOC({
@@ -22,7 +22,7 @@ function CopyClipboardHOC({
 	}, [setCopy, textToCopy]);
 
 	return (
-		<span onClick={onClick} onKeyDown={onClick} role="button" tabIndex={0}>
+		<span onClick={onClick} role="presentation" tabIndex={-1}>
 			<Popover
 				placement="top"
 				content={<span style={{ fontSize: '0.9rem' }}>Copy to clipboard</span>}
@@ -35,7 +35,7 @@ function CopyClipboardHOC({
 
 interface CopyClipboardHOCProps {
 	textToCopy: string;
-	children: React.ReactNode;
+	children: ReactNode;
 }
 
 export default CopyClipboardHOC;

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

@@ -2,23 +2,19 @@ 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 { useCallback, useMemo } from 'react';
 import { useCopyToClipboard } from 'react-use';
 // interfaces
-import { AppState } from 'store/reducers';
-import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
+import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
-import { ILogsReducer } from 'types/reducer/logs';
 
 // components
-import AddToQueryHOC from '../AddToQueryHOC';
+import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
 import CopyClipboardHOC from '../CopyClipboardHOC';
 // styles
 import {
@@ -37,6 +33,10 @@ interface LogFieldProps {
 	fieldKey: string;
 	fieldValue: string;
 }
+
+type LogSelectedFieldProps = LogFieldProps &
+	Pick<AddToQueryHOCProps, 'onAddToQuery'>;
+
 function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
 	const html = useMemo(
 		() => ({
@@ -60,10 +60,15 @@ function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
 function LogSelectedField({
 	fieldKey = '',
 	fieldValue = '',
-}: LogFieldProps): JSX.Element {
+	onAddToQuery,
+}: LogSelectedFieldProps): JSX.Element {
 	return (
 		<SelectedLog>
-			<AddToQueryHOC fieldKey={fieldKey} fieldValue={fieldValue}>
+			<AddToQueryHOC
+				fieldKey={fieldKey}
+				fieldValue={fieldValue}
+				onAddToQuery={onAddToQuery}
+			>
 				<Typography.Text>
 					<span style={{ color: blue[4] }}>{fieldKey}</span>
 				</Typography.Text>
@@ -78,26 +83,26 @@ function LogSelectedField({
 	);
 }
 
-interface ListLogViewProps {
+type ListLogViewProps = {
 	logData: ILog;
-}
-function ListLogView({ logData }: ListLogViewProps): JSX.Element {
-	const {
-		fields: { selected },
-	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
+	onOpenDetailedView: (log: ILog) => void;
+	selectedFields: IField[];
+} & Pick<AddToQueryHOCProps, 'onAddToQuery'>;
 
-	const dispatch = useDispatch();
+function ListLogView({
+	logData,
+	selectedFields,
+	onOpenDetailedView,
+	onAddToQuery,
+}: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
 	const [, setCopy] = useCopyToClipboard();
 	const { notifications } = useNotifications();
 
 	const handleDetailedView = useCallback(() => {
-		dispatch({
-			type: SET_DETAILED_LOG_DATA,
-			payload: logData,
-		});
-	}, [dispatch, logData]);
+		onOpenDetailedView(logData);
+	}, [logData, onOpenDetailedView]);
 
 	const handleCopyJSON = (): void => {
 		setCopy(JSON.stringify(logData, null, 2));
@@ -107,8 +112,16 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
 	};
 
 	const updatedSelecedFields = useMemo(
-		() => selected.filter((e) => e.name !== 'id'),
-		[selected],
+		() => selectedFields.filter((e) => e.name !== 'id'),
+		[selectedFields],
+	);
+
+	const timestampValue = useMemo(
+		() =>
+			typeof flattenLogData.timestamp === 'string'
+				? dayjs(flattenLogData.timestamp).format()
+				: dayjs(flattenLogData.timestamp / 1e6).format(),
+		[flattenLogData.timestamp],
 	);
 
 	return (
@@ -120,19 +133,17 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
 						{flattenLogData.stream && (
 							<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
 						)}
-						<LogGeneralField
-							fieldKey="timestamp"
-							fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
-						/>
+						<LogGeneralField fieldKey="timestamp" fieldValue={timestampValue} />
 					</>
 				</LogContainer>
 				<div>
-					{map(updatedSelecedFields, (field) =>
+					{updatedSelecedFields.map((field) =>
 						isValidLogField(flattenLogData[field.name] as never) ? (
 							<LogSelectedField
 								key={field.name}
 								fieldKey={field.name}
 								fieldValue={flattenLogData[field.name] as never}
+								onAddToQuery={onAddToQuery}
 							/>
 						) : null,
 					)}

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

@@ -1,10 +1,5 @@
 import { Card, Typography } from 'antd';
-import styled, { keyframes } from 'styled-components';
-
-const fadeInAnimation = keyframes`
- 0% { opacity: 0; }
- 100% { opacity: 1;}
-`;
+import styled from 'styled-components';
 
 export const Container = styled(Card)`
 	width: 100% !important;
@@ -12,9 +7,6 @@ export const Container = styled(Card)`
 	.ant-card-body {
 		padding: 0.3rem 0.6rem;
 	}
-	animation-name: ${fadeInAnimation};
-	animation-duration: 0.2s;
-	animation-timing-function: ease-in;
 `;
 
 export const Text = styled(Typography.Text)`

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

@@ -1 +1,3 @@
-export const rawLineStyle: React.CSSProperties = {};
+import { CSSProperties } from 'react';
+
+export const rawLineStyle: CSSProperties = {};

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

@@ -5,7 +5,7 @@ import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import React, { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 // interfaces
 import { ILog } from 'types/api/logs/log';
 
@@ -30,7 +30,10 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const text = useMemo(
-		() => `${dayjs(data.timestamp / 1e6).format()} | ${data.body}`,
+		() =>
+			typeof data.timestamp === 'string'
+				? `${dayjs(data.timestamp).format()} | ${data.body}`
+				: `${dayjs(data.timestamp / 1e6).format()} | ${data.body}`,
 		[data.timestamp, data.body],
 	);
 

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

@@ -1,14 +1,14 @@
 import { TableProps } from 'antd';
-import React from 'react';
+import { CSSProperties } from 'react';
 
-export const defaultCellStyle: React.CSSProperties = {
+export const defaultCellStyle: CSSProperties = {
 	paddingTop: 4,
 	paddingBottom: 6,
 	paddingRight: 8,
 	paddingLeft: 8,
 };
 
-export const defaultTableStyle: React.CSSProperties = {
+export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',
 	maxWidth: '40rem',
 };

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

@@ -1,121 +1,18 @@
-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';
+import { Table } from 'antd';
 
-// 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();
+import { tableScroll } from './config';
+import { LogsTableViewProps } from './types';
+import { useTableView } from './useTableView';
 
 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]);
+	const { dataSource, columns } = useTableView(props);
 
 	return (
 		<Table
 			size="small"
 			columns={columns}
-			dataSource={flattenLogData}
+			dataSource={dataSource}
 			pagination={false}
 			rowKey="id"
 			bordered

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

@@ -16,6 +16,4 @@ export const TableBodyContent = styled.div<TableBodyContentProps>`
 	font-size: 0.875rem;
 
 	line-height: 2rem;
-
-	cursor: pointer;
 `;

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

@@ -0,0 +1,23 @@
+import { ColumnsType, ColumnType } from 'antd/es/table';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
+
+export type ColumnTypeRender<T = unknown> = ReturnType<
+	NonNullable<ColumnType<T>['render']>
+>;
+
+export type LogsTableViewProps = {
+	logs: ILog[];
+	fields: IField[];
+	linesPerRow: number;
+	onClickExpand: (log: ILog) => void;
+};
+
+export type UseTableViewResult = {
+	columns: ColumnsType<Record<string, unknown>>;
+	dataSource: Record<string, string>[];
+};
+
+export type UseTableViewProps = {
+	appendTo?: 'center' | 'end';
+} & LogsTableViewProps;

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

@@ -0,0 +1,113 @@
+import { ExpandAltOutlined } from '@ant-design/icons';
+import Convert from 'ansi-to-html';
+import { Typography } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import dayjs from 'dayjs';
+import dompurify from 'dompurify';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useMemo } from 'react';
+
+import { ExpandIconWrapper } from '../RawLogView/styles';
+import { defaultCellStyle, defaultTableStyle } from './config';
+import { TableBodyContent } from './styles';
+import {
+	ColumnTypeRender,
+	UseTableViewProps,
+	UseTableViewResult,
+} from './types';
+
+const convert = new Convert();
+
+export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
+	const {
+		logs,
+		fields,
+		linesPerRow,
+		onClickExpand,
+		appendTo = 'center',
+	} = 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, index): ColumnTypeRender<Record<string, unknown>> => ({
+					props: {
+						style: defaultCellStyle,
+					},
+					children: (
+						<ExpandIconWrapper
+							onClick={(): void => {
+								onClickExpand(logs[index]);
+							}}
+						>
+							<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 =
+						typeof field === 'string'
+							? dayjs(field).format()
+							: dayjs(field / 1e6).format();
+					return {
+						children: <Typography.Paragraph ellipsis>{date}</Typography.Paragraph>,
+					};
+				},
+			},
+			...(appendTo === 'center' ? 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}
+						/>
+					),
+				}),
+			},
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [fields, appendTo, linesPerRow, onClickExpand, logs]);
+
+	return { columns, dataSource: flattenLogData };
+};

frontend/src/components/Logs/styles.ts

@@ -0,0 +1,8 @@
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+export const ButtonContainer = styled(Button)`
+	&&& {
+		padding-left: 0;
+	}
+`;

frontend/src/components/MessageTip/MessageTip.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+
+import MessageTip from './index';
+
+describe('MessageTip', () => {
+	it('should not render when show prop is false', () => {
+		render(
+			<MessageTip
+				show={false}
+				message="Test Message"
+				action={<button type="button">Close</button>}
+			/>,
+		);
+
+		const messageTip = screen.queryByRole('alert');
+
+		expect(messageTip).toBeNull();
+	});
+
+	it('should render with the provided message and action', () => {
+		const message = 'Test Message';
+		const action = <button type="button">Close</button>;
+
+		render(<MessageTip show message={message} action={action} />);
+
+		const messageTip = screen.getByRole('alert');
+		const messageText = screen.getByText(message);
+		const actionButton = screen.getByRole('button', { name: 'Close' });
+
+		expect(messageTip).toBeInTheDocument();
+		expect(messageText).toBeInTheDocument();
+		expect(actionButton).toBeInTheDocument();
+	});
+
+	// taken from antd docs
+	// https://github.com/ant-design/ant-design/blob/master/components/alert/__tests__/index.test.tsx
+	it('custom action', () => {
+		const { container } = render(
+			<MessageTip
+				show
+				message="Success Tips"
+				action={<button type="button">Close</button>}
+			/>,
+		);
+		expect(container.firstChild).toMatchSnapshot();
+	});
+});

frontend/src/components/MessageTip/__snapshots__/MessageTip.test.tsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageTip custom action 1`] = `
+.c0 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+<div
+  class="ant-alert ant-alert-info ant-alert-with-description c0 css-dev-only-do-not-override-1i536d8"
+  data-show="true"
+  role="alert"
+>
+  <span
+    aria-label="info-circle"
+    class="anticon anticon-info-circle ant-alert-icon"
+    role="img"
+  >
+    <svg
+      aria-hidden="true"
+      data-icon="info-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+      />
+    </svg>
+  </span>
+  <div
+    class="ant-alert-content"
+  >
+    <div
+      class="ant-alert-description"
+    >
+      Success Tips
+    </div>
+  </div>
+  <div
+    class="ant-alert-action"
+  >
+    <button
+      type="button"
+    >
+      Close
+    </button>
+  </div>
+</div>
+`;

frontend/src/components/MessageTip/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { ReactNode } from 'react';
 
 import { StyledAlert } from './styles';
 
 interface MessageTipProps {
 	show?: boolean;
-	message: React.ReactNode | string;
-	action: React.ReactNode | undefined;
+	message: ReactNode | string;
+	action: ReactNode | undefined;
 }
 
 function MessageTip({

frontend/src/components/Modal.tsx

@@ -1,5 +1,5 @@
 import { Modal, ModalProps as Props } from 'antd';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 function CustomModal({
 	title,