fix: remove duplicate settings tab (#4552)

(cherry picked from commit aa9a3e9349)

.github/CODEOWNERS

@@ -2,7 +2,7 @@
 # Owners are automatically requested for review for PRs that changes code
 # that they own.
 
-/frontend/ @palashgdev @YounixM
+/frontend/ @YounixM
 /frontend/src/container/MetricsApplication @srikanthccv
 /frontend/src/container/NewWidget/RightContainer/types.ts @srikanthccv
 /deploy/ @prashant-shahi

.github/workflows/dependency-review.yml

@@ -19,4 +19,4 @@ jobs:
       - name: 'Dependency Review'
         with:
           fail-on-severity: high
-        uses: actions/dependency-review-action@v2
+        uses: actions/dependency-review-action@v3

.github/workflows/e2e-k3s.yaml

@@ -15,6 +15,11 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
+      - name: Setup golang
+        uses: actions/setup-go@v4
+        with:
+          go-version: "1.21"
+
       - name: Build query-service image
         env:
           DEV_BUILD: 1
@@ -65,9 +70,9 @@ jobs:
       - name: Kick off a sample-app workload
         run: |
           # start the locust swarm
-          kubectl -n sample-application run strzal --image=djbingham/curl \
-            --restart='OnFailure' -i --rm --command -- curl -X POST -F \
-            'locust_count=6' -F 'hatch_rate=2' http://locust-master:8089/swarm
+          kubectl --namespace sample-application run strzal --image=djbingham/curl \
+            --restart='OnFailure' -i --tty --rm --command -- curl -X POST -F \
+            'user_count=6' -F 'spawn_rate=2' http://locust-master:8089/swarm
 
       - name: Get short commit SHA, display tunnel URL and IP Address of the worker node
         id: get-subdomain

.github/workflows/push.yaml

@@ -20,13 +20,13 @@ jobs:
         with:
           go-version: "1.21"
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -64,13 +64,13 @@ jobs:
         with:
           go-version: "1.21"
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
+        uses: docker/setup-qemu-action@v3
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -115,11 +115,11 @@ jobs:
         run: npm run lint
         continue-on-error: true
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -164,11 +164,11 @@ jobs:
         run: npm run lint
         continue-on-error: true
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+        uses: docker/setup-buildx-action@v3
         with:
           version: latest
       - name: Login to DockerHub
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}

.github/workflows/staging-deployment.yaml

@@ -11,7 +11,7 @@ jobs:
     environment: staging
     steps:
       - name: Executing remote ssh commands using ssh key
-        uses: appleboy/ssh-action@v0.1.8
+        uses: appleboy/ssh-action@v1.0.3
         env:
           GITHUB_BRANCH: develop
           GITHUB_SHA: ${{ github.sha }}

.github/workflows/testing-deployment.yaml

@@ -11,7 +11,7 @@ jobs:
     if: ${{ github.event.label.name == 'testing-deploy' }}
     steps:
       - name: Executing remote ssh commands using ssh key
-        uses: appleboy/ssh-action@v0.1.8
+        uses: appleboy/ssh-action@v1.0.3
         env:
           GITHUB_BRANCH: ${{ github.head_ref || github.ref_name }}
           GITHUB_SHA: ${{ github.sha }}
@@ -33,8 +33,11 @@ jobs:
             git add .
             git stash push -m "stashed on $(date --iso-8601=seconds)"
             git fetch origin
-            git checkout ${GITHUB_BRANCH}
+            git checkout develop
             git pull
+            # This is added to include the scenerio when new commit in PR is force-pushed
+            git branch -D ${GITHUB_BRANCH}
+            git checkout --track origin/${GITHUB_BRANCH}
             make build-ee-query-service-amd64
             make build-frontend-amd64
             make run-signoz

README.de-de.md

@@ -11,7 +11,6 @@
         <img alt="tweet" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
 </p>
 
-
 <h3 align="center">
   <a href="https://signoz.io/docs"><b>Dokumentation</b></a> &bull;
   <a href="https://github.com/SigNoz/signoz/blob/develop/README.md"><b>Readme auf Englisch </b></a> &bull;
@@ -40,12 +39,13 @@ SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren berei
 👉 Einfache Einrichtung von Benachrichtigungen mit dem selbst erstellbaren Abfrage-Builder.
 
 ##
+
 ### Anwendung Metriken
 
 ![application_metrics](https://user-images.githubusercontent.com/83692067/226637410-900dbc5e-6705-4b11-a10c-bd0faeb2a92f.png)
 
-
 ### Verteiltes Tracing
+
 <img width="2068" alt="distributed_tracing_2 2" src="https://user-images.githubusercontent.com/83692067/226536447-bae58321-6a22-4ed3-af80-e3e964cb3489.png">
 
 <img width="2068" alt="distributed_tracing_1" src="https://user-images.githubusercontent.com/83692067/226536462-939745b6-4f9d-45a6-8016-814837e7f7b4.png">
@@ -62,22 +62,18 @@ SigNoz hilft Entwicklern, Anwendungen zu überwachen und Probleme in ihren berei
 
 ![exceptions_light](https://user-images.githubusercontent.com/83692067/226637967-4188d024-3ac9-4799-be95-f5ea9c45436f.png)
 
-
 ### Alarme
 
 <img width="2068" alt="alerts_management" src="https://user-images.githubusercontent.com/83692067/226536548-2c81e2e8-c12d-47e8-bad7-c6be79055def.png">
 
-
 <br /><br />
 
-
 ## Werde Teil unserer Slack Community
 
 Sag Hi zu uns auf [Slack](https://signoz.io/slack) 👋
 
 <br /><br />
 
-
 ## Funktionen:
 
 - Einheitliche Benutzeroberfläche für Metriken, Traces und Logs. Keine Notwendigkeit, zwischen Prometheus und Jaeger zu wechseln, um Probleme zu debuggen oder ein separates Log-Tool wie Elastic neben Ihrer Metriken- und Traces-Stack zu verwenden.
@@ -93,7 +89,6 @@ Sag Hi zu uns auf [Slack](https://signoz.io/slack) 👋
 
 <br /><br />
 
-
 ## Wieso SigNoz?
 
 Als Entwickler fanden wir es anstrengend, uns für jede kleine Funktion, die wir haben wollten, auf Closed Source SaaS Anbieter verlassen zu müssen. Closed Source Anbieter überraschen ihre Kunden zum Monatsende oft mit hohen Rechnungen, die keine Transparenz bzgl. der Kostenaufteilung bieten.
@@ -116,12 +111,10 @@ Wir unterstützen [OpenTelemetry](https://opentelemetry.io) als Bibliothek, mit
 - Elixir
 - Rust
 
-
 Hier findest du die vollständige Liste von unterstützten Programmiersprachen - https://opentelemetry.io/docs/
 
 <br /><br />
 
-
 ## Erste Schritte mit SigNoz
 
 ### Bereitstellung mit Docker
@@ -138,7 +131,6 @@ Bitte folge den [hier](https://signoz.io/docs/deployment/helm_chart) aufgelistet
 
 <br /><br />
 
-
 ## Vergleiche mit bekannten Tools
 
 ### SigNoz vs Prometheus
@@ -179,7 +171,6 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 
 <br /><br />
 
-
 ## Zum Projekt beitragen
 
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
@@ -197,6 +188,8 @@ Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #c
 #### Frontend
 
 - [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
 
 #### DevOps
 
@@ -204,16 +197,12 @@ Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #c
 
 <br /><br />
 
-
 ## Dokumentation
 
 Du findest unsere Dokumentation unter https://signoz.io/docs/. Falls etwas unverständlich ist oder fehlt, öffne gerne ein Github Issue mit dem Label `documentation` oder schreib uns über den Community Slack Channel.
 
-
-
 <br /><br />
 
-
 ## Gemeinschaft
 
 Werde Teil der [slack community](https://signoz.io/slack) um mehr über verteilte Einzelschritt-Fehlersuche, Messung von Systemzuständen oder SigNoz zu erfahren und sich mit anderen Nutzern und Mitwirkenden in Verbindung zu setzen.

README.md

@@ -108,7 +108,7 @@ We support [OpenTelemetry](https://opentelemetry.io) as the library which you ca
 
 - Java
 - Python
-- NodeJS
+- Node.js
 - Go
 - PHP
 - .NET

README.zh-cn.md

@@ -83,7 +83,7 @@ SigNoz 帮助开发人员监控应用并排查已部署应用的问题。你可
 
 - 通过 服务名、操作方式、延迟、错误、标签/注释 过滤 traces 数据
 
-- 通过聚合 trace 数据而获得业务相关的 metrics。 比如你可以通过  `customer_type: gold` 或者 `deployment_version: v2` 或者 `external_call: paypal` 获取错误率和 P99 延迟数据
+- 通过聚合 trace 数据而获得业务相关的 metrics。 比如你可以通过 `customer_type: gold` 或者 `deployment_version: v2` 或者 `external_call: paypal` 获取错误率和 P99 延迟数据
 
 - 原生支持 OpenTelemetry 日志，高级日志查询，自动收集 k8s 相关日志
 
@@ -155,7 +155,7 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 - Jaegar UI 不能提供任何基于 traces 的 metrics 查询和过滤。
 
-- Jaeger 不能针对过滤的 traces 做聚合。 比如， p99 延迟的请求有个标签是  customer_type='premium'。 而这些在 SigNoz 可以轻松做到。
+- Jaeger 不能针对过滤的 traces 做聚合。 比如， p99 延迟的请求有个标签是 customer_type='premium'。 而这些在 SigNoz 可以轻松做到。
 
 <p>&nbsp  </p>
 
@@ -185,7 +185,7 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 我们 ❤️ 你的贡献，无论大小。 请先阅读 [CONTRIBUTING.md](CONTRIBUTING.md) 再开始给 SigNoz 做贡献。
 
-如果你不知道如何开始？ 只需要在  [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
+如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
 
 ### 项目维护人员
 
@@ -199,6 +199,8 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 #### 前端
 
 - [Palash Gupta](https://github.com/palashgdev)
+- [Yunus M](https://github.com/YounixM)
+- [Rajat Dabade](https://github.com/Rajat-Dabade)
 
 #### 运维开发
 

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

@@ -1,7 +1,7 @@
 version: "3.9"
 
 x-clickhouse-defaults: &clickhouse-defaults
-  image: clickhouse/clickhouse-server:23.11.1-alpine
+  image: clickhouse/clickhouse-server:24.1.2-alpine
   tty: true
   deploy:
     restart_policy:
@@ -146,11 +146,11 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.36.0
+    image: signoz/query-service:0.39.0
     command:
       [
         "-config=/root/config/prometheus.yml",
-        "--prefer-delta=true"
+        # "--prefer-delta=true"
       ]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.36.0
+    image: signoz/frontend:0.39.0
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.88.4
+    image: signoz/signoz-otel-collector:0.88.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.4
+      image: signoz/signoz-schema-migrator:0.88.12
       deploy:
         restart_policy:
           condition: on-failure
@@ -249,25 +249,6 @@ services:
         # - clickhouse-2
         # - clickhouse-3
 
-  otel-collector-metrics:
-    image: signoz/signoz-otel-collector:0.88.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:
-    #   - "1777:1777"     # pprof extension
-    #   - "8888:8888"     # OtelCollector internal metrics
-    #   - "13133:13133"   # Health check extension
-    #   - "55679:55679"   # zPages extension
-    deploy:
-      restart_policy:
-        condition: on-failure
-    <<: *db-depend
-
   logspout:
     image: "gliderlabs/logspout:v3.2.14"
     volumes:

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

@@ -15,13 +15,9 @@ receivers:
         # please remove names from below if you want to collect logs from them
       - type: filter
         id: signoz_logs_filter
-        expr: 'attributes.container_name matches "^signoz_(logspout|frontend|alertmanager|query-service|otel-collector|otel-collector-metrics|clickhouse|zookeeper)"'
+        expr: 'attributes.container_name matches "^signoz_(logspout|frontend|alertmanager|query-service|otel-collector|clickhouse|zookeeper)"'
   opencensus:
     endpoint: 0.0.0.0:55678
-  otlp/spanmetrics:
-    protocols:
-      grpc:
-        endpoint: localhost:12345
   otlp:
     protocols:
       grpc:
@@ -69,8 +65,8 @@ processors:
     # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
     detectors: [env, system] # include ec2 for AWS, gcp for GCP and azure for Azure.
     timeout: 2s
-  signozspanmetrics/prometheus:
-    metrics_exporter: prometheus
+  signozspanmetrics/cumulative:
+    metrics_exporter: clickhousemetricswrite
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
     dimensions:
@@ -97,6 +93,20 @@ processors:
   #   num_workers: 4
   #   queue_size: 100
   #   retry_on_failure: true
+  signozspanmetrics/delta:
+    metrics_exporter: clickhousemetricswrite
+    latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
+    dimensions_cache_size: 100000
+    aggregation_temporality: AGGREGATION_TEMPORALITY_DELTA
+    dimensions:
+      - name: service.namespace
+        default: default
+      - name: deployment.environment
+        default: default
+      # This is added to ensure the uniqueness of the timeseries
+      # Otherwise, identical timeseries produced by multiple replicas of
+      # collectors result in incorrect APM metrics
+      - name: signoz.collector.id
 
 exporters:
   clickhousetraces:
@@ -109,21 +119,11 @@ exporters:
       enabled: true
   clickhousemetricswrite/prometheus:
     endpoint: tcp://clickhouse:9000/?database=signoz_metrics
-  prometheus:
-    endpoint: 0.0.0.0:8889
   # logging: {}
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/
     docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
-    timeout: 5s
-    sending_queue:
-      queue_size: 100
-    retry_on_failure:
-      enabled: true
-      initial_interval: 5s
-      max_interval: 30s
-      max_elapsed_time: 300s
-
+    timeout: 10s
 extensions:
   health_check:
     endpoint: 0.0.0.0:13133
@@ -140,7 +140,7 @@ service:
   pipelines:
     traces:
       receivers: [jaeger, otlp]
-      processors: [signozspanmetrics/prometheus, batch]
+      processors: [signozspanmetrics/cumulative, signozspanmetrics/delta, batch]
       exporters: [clickhousetraces]
     metrics:
       receivers: [otlp]
@@ -154,9 +154,6 @@ service:
       receivers: [prometheus]
       processors: [batch]
       exporters: [clickhousemetricswrite/prometheus]
-    metrics/spanmetrics:
-      receivers: [otlp/spanmetrics]
-      exporters: [prometheus]
     logs:
       receivers: [otlp, tcplog/docker]
       processors: [batch]

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

@@ -1,64 +0,0 @@
-receivers:
-  prometheus:
-    config:
-      scrape_configs:
-        # otel-collector-metrics internal metrics
-        - job_name: otel-collector-metrics
-          scrape_interval: 60s
-          static_configs:
-            - targets:
-                - localhost:8888
-              labels:
-                job_name: otel-collector-metrics
-        # SigNoz span metrics
-        - job_name: signozspanmetrics-collector
-          scrape_interval: 60s
-          dns_sd_configs:
-            - names:
-                - tasks.otel-collector
-              type: A
-              port: 8889
-
-processors:
-  batch:
-    send_batch_size: 10000
-    send_batch_max_size: 11000
-    timeout: 10s
-  # memory_limiter:
-  #   # 80% of maximum memory up to 2G
-  #   limit_mib: 1500
-  #   # 25% of limit up to 2G
-  #   spike_limit_mib: 512
-  #   check_interval: 5s
-  #
-  #   # 50% of the maximum memory
-  #   limit_percentage: 50
-  #   # 20% of max memory usage spike expected
-  #   spike_limit_percentage: 20
-  # queued_retry:
-  #   num_workers: 4
-  #   queue_size: 100
-  #   retry_on_failure: true
-
-exporters:
-  clickhousemetricswrite:
-    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
-
-extensions:
-  health_check:
-    endpoint: 0.0.0.0:13133
-  zpages:
-    endpoint: 0.0.0.0:55679
-  pprof:
-    endpoint: 0.0.0.0:1777
-
-service:
-  telemetry:
-    metrics:
-      address: 0.0.0.0:8888
-  extensions: [health_check, zpages, pprof]
-  pipelines:
-    metrics:
-      receivers: [prometheus]
-      processors: [batch]
-      exporters: [clickhousemetricswrite]

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

@@ -19,7 +19,7 @@ services:
       - ZOO_AUTOPURGE_INTERVAL=1
 
   clickhouse:
-    image: clickhouse/clickhouse-server:23.7.3-alpine
+    image: clickhouse/clickhouse-server:24.1.2-alpine
     container_name: signoz-clickhouse
     # ports:
     # - "9000:9000"
@@ -66,7 +66,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.4}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -81,7 +81,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.88.4
+    image: signoz/signoz-otel-collector:0.88.12
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -116,28 +116,6 @@ services:
       query-service:
         condition: service_healthy
 
-  otel-collector-metrics:
-    container_name: signoz-otel-collector-metrics
-    image: signoz/signoz-otel-collector:0.88.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:
-    #   - "1777:1777"     # pprof extension
-    #   - "8888:8888"     # OtelCollector internal metrics
-    #   - "13133:13133"   # Health check extension
-    #   - "55679:55679"   # zPages extension
-    restart: on-failure
-    depends_on:
-      clickhouse:
-        condition: service_healthy
-      otel-collector-migrator:
-        condition: service_completed_successfully
-
   logspout:
     image: "gliderlabs/logspout:v3.2.14"
     container_name: signoz-logspout

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

@@ -25,7 +25,7 @@ services:
     command:
       [
         "-config=/root/config/prometheus.yml",
-        "--prefer-delta=true"
+        # "--prefer-delta=true"
       ]
     ports:
       - "6060:6060"

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

@@ -3,7 +3,7 @@ version: "2.4"
 x-clickhouse-defaults: &clickhouse-defaults
   restart: on-failure
   # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
-  image: clickhouse/clickhouse-server:23.11.1-alpine
+  image: clickhouse/clickhouse-server:24.1.2-alpine
   tty: true
   depends_on:
     - zookeeper-1
@@ -164,12 +164,12 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.36.0}
+    image: signoz/query-service:${DOCKER_TAG:-0.39.0}
     container_name: signoz-query-service
     command:
       [
         "-config=/root/config/prometheus.yml",
-        "--prefer-delta=true"
+        # "--prefer-delta=true"
       ]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.36.0}
+    image: signoz/frontend:${DOCKER_TAG:-0.39.0}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -215,7 +215,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.4}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.12}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.4}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.12}
     container_name: signoz-otel-collector
     command:
       [
@@ -268,24 +268,6 @@ services:
       query-service:
         condition: service_healthy
 
-  otel-collector-metrics:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.4}
-    container_name: signoz-otel-collector-metrics
-    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:
-    #   - "1777:1777"     # pprof extension
-    #   - "8888:8888"     # OtelCollector internal metrics
-    #   - "13133:13133"   # Health check extension
-    #   - "55679:55679"   # zPages extension
-    restart: on-failure
-    <<: *db-depend
-
   logspout:
     image: "gliderlabs/logspout:v3.2.14"
     container_name: signoz-logspout

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

@@ -15,13 +15,9 @@ receivers:
         # please remove names from below if you want to collect logs from them
       - type: filter
         id: signoz_logs_filter
-        expr: 'attributes.container_name matches "^signoz-(logspout|frontend|alertmanager|query-service|otel-collector|otel-collector-metrics|clickhouse|zookeeper)"'
+        expr: 'attributes.container_name matches "^signoz-(logspout|frontend|alertmanager|query-service|otel-collector|clickhouse|zookeeper)"'
   opencensus:
     endpoint: 0.0.0.0:55678
-  otlp/spanmetrics:
-    protocols:
-      grpc:
-        endpoint: localhost:12345
   otlp:
     protocols:
       grpc:
@@ -66,8 +62,9 @@ processors:
     send_batch_size: 10000
     send_batch_max_size: 11000
     timeout: 10s
-  signozspanmetrics/prometheus:
-    metrics_exporter: prometheus
+  signozspanmetrics/cumulative:
+    metrics_exporter: clickhousemetricswrite
+    metrics_flush_interval: 60s
     latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
     dimensions_cache_size: 100000
     dimensions:
@@ -98,6 +95,21 @@ processors:
     # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
     detectors: [env, system] # include ec2 for AWS, gcp for GCP and azure for Azure.
     timeout: 2s
+  signozspanmetrics/delta:
+    metrics_exporter: clickhousemetricswrite
+    metrics_flush_interval: 60s
+    latency_histogram_buckets: [100us, 1ms, 2ms, 6ms, 10ms, 50ms, 100ms, 250ms, 500ms, 1000ms, 1400ms, 2000ms, 5s, 10s, 20s, 40s, 60s ]
+    dimensions_cache_size: 100000
+    aggregation_temporality: AGGREGATION_TEMPORALITY_DELTA
+    dimensions:
+      - name: service.namespace
+        default: default
+      - name: deployment.environment
+        default: default
+      # This is added to ensure the uniqueness of the timeseries
+      # Otherwise, identical timeseries produced by multiple replicas of
+      # collectors result in incorrect APM metrics
+      - name: signoz.collector.id
 
 extensions:
   health_check:
@@ -118,21 +130,12 @@ exporters:
       enabled: true
   clickhousemetricswrite/prometheus:
     endpoint: tcp://clickhouse:9000/?database=signoz_metrics
-  prometheus:
-    endpoint: 0.0.0.0:8889
   # logging: {}
 
   clickhouselogsexporter:
     dsn: tcp://clickhouse:9000/
     docker_multi_node_cluster: ${DOCKER_MULTI_NODE_CLUSTER}
-    timeout: 5s
-    sending_queue:
-      queue_size: 100
-    retry_on_failure:
-      enabled: true
-      initial_interval: 5s
-      max_interval: 30s
-      max_elapsed_time: 300s
+    timeout: 10s
 
 service:
   telemetry:
@@ -145,7 +148,7 @@ service:
   pipelines:
     traces:
       receivers: [jaeger, otlp]
-      processors: [signozspanmetrics/prometheus, batch]
+      processors: [signozspanmetrics/cumulative, signozspanmetrics/delta, batch]
       exporters: [clickhousetraces]
     metrics:
       receivers: [otlp]
@@ -159,9 +162,6 @@ service:
       receivers: [prometheus]
       processors: [batch]
       exporters: [clickhousemetricswrite/prometheus]
-    metrics/spanmetrics:
-      receivers: [otlp/spanmetrics]
-      exporters: [prometheus]
     logs:
       receivers: [otlp, tcplog/docker]
       processors: [batch]

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

@@ -1,69 +0,0 @@
-receivers:
-  otlp:
-    protocols:
-      grpc:
-      http:
-  prometheus:
-    config:
-      scrape_configs:
-        # otel-collector-metrics internal metrics
-        - job_name: otel-collector-metrics
-          scrape_interval: 60s
-          static_configs:
-            - targets:
-                - localhost:8888
-              labels:
-                job_name: otel-collector-metrics
-        # SigNoz span metrics
-        - job_name: signozspanmetrics-collector
-          scrape_interval: 60s
-          static_configs:
-            - targets:
-              - otel-collector:8889
-
-processors:
-  batch:
-    send_batch_size: 10000
-    send_batch_max_size: 11000
-    timeout: 10s
-  # memory_limiter:
-  #   # 80% of maximum memory up to 2G
-  #   limit_mib: 1500
-  #   # 25% of limit up to 2G
-  #   spike_limit_mib: 512
-  #   check_interval: 5s
-  #
-  #   # 50% of the maximum memory
-  #   limit_percentage: 50
-  #   # 20% of max memory usage spike expected
-  #   spike_limit_percentage: 20
-  # queued_retry:
-  #   num_workers: 4
-  #   queue_size: 100
-  #   retry_on_failure: true
-
-extensions:
-  health_check:
-    endpoint: 0.0.0.0:13133
-  zpages:
-    endpoint: 0.0.0.0:55679
-  pprof:
-    endpoint: 0.0.0.0:1777
-
-exporters:
-  clickhousemetricswrite:
-    endpoint: tcp://clickhouse:9000/?database=signoz_metrics
-
-service:
-  telemetry:
-    metrics:
-      address: 0.0.0.0:8888
-  extensions:
-    - health_check
-    - zpages
-    - pprof
-  pipelines:
-    metrics:
-      receivers: [prometheus]
-      processors: [batch]
-      exporters: [clickhousemetricswrite]

ee/query-service/Dockerfile

@@ -1,5 +1,5 @@
 # use a minimal alpine image
-FROM alpine:3.18.5
+FROM alpine:3.18.6
 
 # Add Maintainer Info
 LABEL maintainer="signoz"

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

@@ -152,9 +152,9 @@ func (ah *APIHandler) RegisterRoutes(router *mux.Router, am *baseapp.AuthMiddlew
 	router.HandleFunc("/api/v2/metrics/query_range", am.ViewAccess(ah.queryRangeMetricsV2)).Methods(http.MethodPost)
 
 	// PAT APIs
-	router.HandleFunc("/api/v1/pat", am.OpenAccess(ah.createPAT)).Methods(http.MethodPost)
-	router.HandleFunc("/api/v1/pat", am.OpenAccess(ah.getPATs)).Methods(http.MethodGet)
-	router.HandleFunc("/api/v1/pat/{id}", am.OpenAccess(ah.deletePAT)).Methods(http.MethodDelete)
+	router.HandleFunc("/api/v1/pat", am.AdminAccess(ah.createPAT)).Methods(http.MethodPost)
+	router.HandleFunc("/api/v1/pat", am.AdminAccess(ah.getPATs)).Methods(http.MethodGet)
+	router.HandleFunc("/api/v1/pat/{id}", am.AdminAccess(ah.deletePAT)).Methods(http.MethodDelete)
 
 	router.HandleFunc("/api/v1/checkout", am.AdminAccess(ah.checkout)).Methods(http.MethodPost)
 	router.HandleFunc("/api/v1/billing", am.AdminAccess(ah.getBilling)).Methods(http.MethodGet)

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

@@ -40,6 +40,7 @@ type billingDetails struct {
 		BillingPeriodEnd   int64   `json:"billingPeriodEnd"`
 		Details            details `json:"details"`
 		Discount           float64 `json:"discount"`
+		SubscriptionStatus string  `json:"subscriptionStatus"`
 	} `json:"data"`
 }
 

ee/query-service/app/server.go

@@ -193,7 +193,7 @@ func NewServer(serverOptions *ServerOptions) (*Server, error) {
 	}
 
 	// start the usagemanager
-	usageManager, err := usage.New("sqlite", localDB, lm.GetRepo(), reader.GetConn())
+	usageManager, err := usage.New("sqlite", modelDao, lm.GetRepo(), reader.GetConn())
 	if err != nil {
 		return nil, err
 	}
@@ -331,6 +331,7 @@ func (s *Server) createPublicServer(apiHandler *api.APIHandler) (*http.Server, e
 	apiHandler.RegisterMetricsRoutes(r, am)
 	apiHandler.RegisterLogsRoutes(r, am)
 	apiHandler.RegisterQueryRangeV3Routes(r, am)
+	apiHandler.RegisterQueryRangeV4Routes(r, am)
 
 	c := cors.New(cors.Options{
 		AllowedOrigins: []string{"*"},

ee/query-service/model/usage.go

@@ -20,6 +20,8 @@ type Usage struct {
 	TimeStamp   time.Time `json:"timestamp"`
 	Count       int64     `json:"count"`
 	Size        int64     `json:"size"`
+	OrgName     string    `json:"orgName"`
+	TenantId    string    `json:"tenantId"`
 }
 
 type UsageDB struct {

ee/query-service/usage/manager.go

@@ -4,6 +4,8 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"os"
+	"regexp"
 	"strings"
 	"sync/atomic"
 	"time"
@@ -11,10 +13,10 @@ import (
 	"github.com/ClickHouse/clickhouse-go/v2"
 	"github.com/go-co-op/gocron"
 	"github.com/google/uuid"
-	"github.com/jmoiron/sqlx"
 
 	"go.uber.org/zap"
 
+	"go.signoz.io/signoz/ee/query-service/dao"
 	licenseserver "go.signoz.io/signoz/ee/query-service/integrations/signozio"
 	"go.signoz.io/signoz/ee/query-service/license"
 	"go.signoz.io/signoz/ee/query-service/model"
@@ -38,15 +40,29 @@ type Manager struct {
 	licenseRepo *license.Repo
 
 	scheduler *gocron.Scheduler
+
+	modelDao dao.ModelDao
+
+	tenantID string
 }
 
-func New(dbType string, db *sqlx.DB, licenseRepo *license.Repo, clickhouseConn clickhouse.Conn) (*Manager, error) {
+func New(dbType string, modelDao dao.ModelDao, licenseRepo *license.Repo, clickhouseConn clickhouse.Conn) (*Manager, error) {
+	hostNameRegex := regexp.MustCompile(`tcp://(?P<hostname>.*):`)
+	hostNameRegexMatches := hostNameRegex.FindStringSubmatch(os.Getenv("ClickHouseUrl"))
+
+	tenantID := ""
+	if len(hostNameRegexMatches) == 2 {
+		tenantID = hostNameRegexMatches[1]
+		tenantID = strings.TrimRight(tenantID, "-clickhouse")
+	}
 
 	m := &Manager{
 		// repository:     repo,
 		clickhouseConn: clickhouseConn,
 		licenseRepo:    licenseRepo,
 		scheduler:      gocron.NewScheduler(time.UTC).Every(1).Day().At("00:00"), // send usage every at 00:00 UTC
+		modelDao:       modelDao,
+		tenantID:       tenantID,
 	}
 	return m, nil
 }
@@ -123,6 +139,15 @@ func (lm *Manager) UploadUsage() {
 
 	zap.S().Info("uploading usage data")
 
+	orgName := ""
+	orgNames, orgError := lm.modelDao.GetOrgs(ctx)
+	if orgError != nil {
+		zap.S().Errorf("failed to get org data: %v", zap.Error(orgError))
+	}
+	if len(orgNames) == 1 {
+		orgName = orgNames[0].Name
+	}
+
 	usagesPayload := []model.Usage{}
 	for _, usage := range usages {
 		usageDataBytes, err := encryption.Decrypt([]byte(usage.ExporterID[:32]), []byte(usage.Data))
@@ -142,6 +167,8 @@ func (lm *Manager) UploadUsage() {
 		usageData.ExporterID = usage.ExporterID
 		usageData.Type = usage.Type
 		usageData.Tenant = usage.Tenant
+		usageData.OrgName = orgName
+		usageData.TenantId = lm.tenantID
 		usagesPayload = append(usagesPayload, usageData)
 	}
 

frontend/jest.config.ts

@@ -22,7 +22,7 @@ const config: Config.InitialOptions = {
 		'^.+\\.(js|jsx)$': 'babel-jest',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/package.json

@@ -36,6 +36,9 @@
 		"@mdx-js/loader": "2.3.0",
 		"@mdx-js/react": "2.3.0",
 		"@monaco-editor/react": "^4.3.1",
+		"@radix-ui/react-tabs": "1.0.4",
+		"@radix-ui/react-tooltip": "1.0.7",
+		"@signozhq/design-tokens": "0.0.8",
 		"@uiw/react-md-editor": "3.23.5",
 		"@xstate/react": "^3.0.0",
 		"ansi-to-html": "0.7.2",
@@ -209,7 +212,8 @@
 	},
 	"lint-staged": {
 		"*.(js|jsx|ts|tsx)": [
-			"eslint --fix"
+			"eslint --fix",
+			"sh scripts/typecheck-staged.sh"
 		]
 	},
 	"resolutions": {

frontend/public/Icons/awwSnap.svg

@@ -0,0 +1 @@
+<svg width="32" height="33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.91 28.675c-6.199 0-12.888-3.888-12.888-12.421S9.711 3.832 15.911 3.832c3.444 0 6.621 1.134 8.977 3.2 2.555 2.267 3.91 5.466 3.91 9.222 0 3.755-1.355 6.933-3.91 9.2-2.356 2.066-5.555 3.221-8.977 3.221z" fill="url(#prefix__paint0_radial_2122_6520)"/><path d="M26.552 8.87c1.185 1.91 1.803 4.186 1.803 6.717 0 3.756-1.356 6.933-3.911 9.2-2.356 2.066-5.556 3.222-8.978 3.222-4.013 0-8.221-1.634-10.706-5.098 2.391 3.924 6.889 5.764 11.15 5.764 3.423 0 6.623-1.155 8.978-3.222 2.555-2.266 3.911-5.444 3.911-9.2 0-2.83-.771-5.346-2.247-7.383z" fill="#EB8F00"/><path d="M20.123 22.905c0 1.685-1.846 2.667-4.124 2.667-2.277 0-4.124-.989-4.124-2.667 0-1.677 1.847-3.522 4.124-3.522 2.278 0 4.124 1.838 4.124 3.522zM12.06 14.852l1.88-1.748c.267-.331.307-.778.038-1.045-.353-.355-.98-.269-1.32.136-.018.033-.03.042-.049.075l-1.333 1.938-1.804-1.682c-.027-.03-.042-.034-.067-.062-.42-.32-1.05-.267-1.315.157-.207.32-.07.745.264 1.011l2.313 1.372-1.96 1.833c-.262.326-.31.77-.04 1.044.351.358.978.276 1.32-.127.018-.033.031-.042.051-.075l1.405-2.031 1.706 1.609c.027.029.043.035.067.064.418.322 1.049.273 1.318-.149.206-.32.07-.746-.26-1.013l-2.213-1.307zM20.61 14.852l-1.879-1.748c-.267-.331-.307-.778-.036-1.045.354-.355.978-.269 1.318.136.018.033.034.042.051.075l1.334 1.938 1.806-1.682c.025-.03.04-.034.065-.062.422-.32 1.05-.267 1.317.157.205.32.067.745-.266 1.011L22 15.004l1.96 1.833c.268.33.313.775.042 1.044-.349.358-.976.276-1.318-.127-.02-.033-.033-.042-.051-.075l-1.404-2.031-1.71 1.609c-.024.029-.04.035-.066.064-.418.322-1.046.273-1.315-.149-.21-.32-.074-.746.257-1.013l2.216-1.307zM11.911 8.696c.511.044.711-.645.178-.8a4.07 4.07 0 00-1.289-.133A4.596 4.596 0 007.689 9.14c-.378.4.156.89.556.6a5.829 5.829 0 013.666-1.044zM20.044 8.696a5.85 5.85 0 013.689 1.044c.4.29.933-.2.555-.6a4.645 4.645 0 00-3.11-1.377 4.07 4.07 0 00-1.29.133.408.408 0 00-.282.504c.053.194.24.318.438.296z" fill="#422B0D"/><defs><radialGradient id="prefix__paint0_radial_2122_6520" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.91 16.254) scale(12.657)"><stop offset=".5" stop-color="#FDE030"/><stop offset=".92" stop-color="#F7C02B"/><stop offset="1" stop-color="#F4A223"/></radialGradient></defs></svg>

frontend/public/Icons/promQL.svg

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

frontend/public/Icons/tetra-pack.svg

@@ -0,0 +1 @@
+<svg width="32" height="33" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.309 13.108l-6.704-3.32s-.016-.317.284-.477c.302-.16 5.053-2.107 5.435-2.107.383 0 2.62.431 4.249.793 1.629.363 5.933 1.287 5.953 1.57.02.281-4.404 4.806-4.404 4.806l-4.813-1.265z" fill="#C3FECE"/><path d="M20.423 11.037s-2.811-.826-5.546-1.469c-1.274-.3-5.016-1.084-5.016-1.084s.398-.173.698-.3c.305-.127.547-.193.547-.193s2.44.486 4.253.873c2.453.522 5.886 1.547 5.966 1.709.082.16-.902.464-.902.464z" fill="#fff"/><path d="M14.98 10.26c-.598.415-.011.666 1.09.924 1.207.282 2.127.698 2.903.247.7-.405-1.014-.845-1.8-1.014-.6-.129-1.731-.478-2.193-.158z" fill="#ACB1B2"/><path d="M17.17 11.095c-.005 0 .02-4.869.02-5.049 0-.18-.203-.342.02-.724.222-.382.804-.342.804-.342s2.416-.702 3.38-.945c.964-.242 3.098-.804 3.098-.804l.142 1.22s-2.236.631-3.342.913c-1.107.282-2.616.745-2.616.745l-.222.202.064 4.757s-.206.231-.668.231c-.45-.002-.68-.204-.68-.204z" fill="#FFD816"/><path d="M24.095 3.855c.018.38.22.616.46.616.24 0 .404-.307.369-.707-.038-.398-.296-.58-.516-.506-.22.073-.327.32-.313.597zM18.46 6.422a.209.209 0 01-.123-.038l-1.153-.769a.225.225 0 01-.063-.309.222.222 0 01.31-.062l1.153.769a.224.224 0 01.062.309.228.228 0 01-.187.1z" fill="#FEB804"/><path d="M18.636 6.235a.225.225 0 01-.178-.089c-.295-.393-.633-.84-.693-.909a.225.225 0 01-.031-.284.222.222 0 01.309-.062c.04.027.062.042.771.986.073.098.007.238-.091.312-.04.03-.04.046-.087.046z" fill="#FEB804"/><path d="M18.365 6.609c-.01 0-.022 0-.035-.003l-1.111-.175a.221.221 0 11.069-.438l1.11.176c.12.02.225.042.205.164-.016.107-.129.276-.238.276z" fill="#FEB804"/><path d="M7.596 9.764c.353 0 3.188.744 4.65 1.013 1.463.27 5.878 1.314 6.027 1.342.149.03.12 1.94.12 1.94s2.089 10.8 2.029 11.309c-.06.506-1.431 4.415-1.431 4.415s-.807.12-2.865-.478c-2.057-.598-7.488-2.089-7.817-2.506-.329-.418-.12-5.938-.298-9.338-.182-3.402-.415-7.697-.415-7.697z" fill="#79DD8A"/><path d="M24.06 27.036c.113-.375-.518-4.402-.607-8.101-.089-3.698.229-9.324.076-9.369-.154-.042-5.256 2.553-5.256 2.553s-.022 3.671.04 7.133c.08 4.48.438 10.41.676 10.53.238.12 2.302-1.035 2.924-1.372 1.102-.598 2.058-1.074 2.147-1.374z" fill="#02AB46"/><path d="M20.408 13.82l.011-2.787.914-.45.026 3.056-.422.74-.529-.56z" fill="#DBDFE1"/><path d="M12.322 14.797c-1.973-.211-3.34 1.549-3.233 3.842.127 2.709 1.91 4.704 3.842 5.102 1.93.398 3.802-.44 3.842-3.402.044-3.087-2.669-5.353-4.451-5.542z" fill="#FEFEFD"/><path d="M13.637 17.27s-.4-1.344-1.602-.986c-1.202.357-1.853 2.973.187 4.15 1.96 1.131 3.764-.944 3.133-2.288-.574-1.227-1.718-.876-1.718-.876z" fill="#EF5B44"/><path d="M13.18 15.626c-.136.049-.243.602-.1 1.13.106.396.446.939.643.903.158-.029.278-.651.13-1.173-.174-.602-.516-.918-.674-.86z" fill="#B8CF17"/><path d="M13.15 18.746c-.564-.171-1.2 1.769-.057 2.977 1.26 1.331 2.73.158 2.69-.1-.057-.358-1.044-.615-1.53-1.215-.487-.605-.774-1.562-1.102-1.662z" fill="#FD8F01"/><path d="M11.346 18.417s.113-.849-.673-.802c-.76.046-.574.944-.574.944s-.633.076-.526.778c.08.53.64.524.64.524s-.616.242-.336.945c.249.624.822.373.822.373s-.21.609.287.93c.42.272.787.043.787.043s-.023.52.557.616c.703.115 1.007-.74.507-1.136-.38-.3-.724-.067-.724-.067s.07-.166.004-.357c-.045-.125-.116-.171-.116-.171s.616-.058.516-.758c-.1-.702-.716-.616-.716-.616s.358-.286.216-.802c-.14-.518-.671-.444-.671-.444z" fill="#A281D0"/><path d="M21.04 14.595c-.511 0-2.691-2.167-2.711-2.189a.222.222 0 01.024-.313.224.224 0 01.314.022c.14.155 1.806 1.702 2.286 2 .311-.465 1.322-2.498 2.191-4.333a.224.224 0 01.296-.107.223.223 0 01.106.296c-2.142 4.526-2.353 4.586-2.466 4.617-.013.007-.027.007-.04.007z" fill="#2D802D"/></svg>

frontend/public/Images/eyesEmoji.svg

@@ -0,0 +1,19 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.36806 25.9481C5.93935 25.9481 3.15283 21.7098 3.15283 16.5002C3.15283 11.2907 5.94157 7.05238 9.36806 7.05238C12.7945 7.05238 15.5833 11.2907 15.5833 16.5002C15.5833 21.7098 12.7945 25.9481 9.36806 25.9481Z" fill="#FAFAFA"/>
+<path d="M9.36815 7.49694C10.8414 7.49694 12.2524 8.38594 13.3391 10.0017C14.499 11.7241 15.139 14.0333 15.139 16.5003C15.139 18.9673 14.499 21.2764 13.3391 22.9989C12.2524 24.6146 10.8414 25.5036 9.36815 25.5036C7.89489 25.5036 6.48385 24.6146 5.39724 22.9989C4.23508 21.2764 3.59734 18.9673 3.59734 16.5003C3.59734 14.0333 4.23731 11.7241 5.39724 10.0017C6.48385 8.38594 7.89267 7.49694 9.36815 7.49694ZM9.36815 6.60794C5.69056 6.60794 2.7085 11.0374 2.7085 16.5003C2.7085 21.9632 5.69056 26.3926 9.36815 26.3926C13.0457 26.3926 16.0278 21.9632 16.0278 16.5003C16.0278 11.0374 13.0457 6.60794 9.36815 6.60794Z" fill="#B0BEC5"/>
+<path d="M7.47266 15.5762C6.87269 15.0118 7.00602 13.8919 7.77487 13.0741C7.81486 13.0319 7.85486 12.9919 7.89708 12.9541C7.55488 12.7608 7.17934 12.6519 6.78381 12.6519C5.18611 12.6519 3.89062 14.414 3.89062 16.585C3.89062 18.756 5.18611 20.5182 6.78381 20.5182C8.3815 20.5182 9.67699 18.756 9.67699 16.585C9.67699 16.1962 9.63477 15.8184 9.55699 15.4629C8.83703 15.9806 7.97708 16.0495 7.47266 15.5762Z" fill="url(#paint0_linear_2122_5062)"/>
+<path d="M22.6294 26.3932C26.3074 26.3932 29.289 21.9642 29.289 16.5008C29.289 11.0374 26.3074 6.60847 22.6294 6.60847C18.9514 6.60847 15.9697 11.0374 15.9697 16.5008C15.9697 21.9642 18.9514 26.3932 22.6294 26.3932Z" fill="#EEEEEE"/>
+<path d="M22.6283 25.9493C19.2018 25.9493 16.4131 21.711 16.4131 16.5014C16.4131 11.2919 19.2018 7.05357 22.6283 7.05357C26.0548 7.05357 28.8435 11.2919 28.8435 16.5014C28.8435 21.711 26.057 25.9493 22.6283 25.9493Z" fill="#FAFAFA"/>
+<path d="M22.6284 7.49816C24.1017 7.49816 25.5127 8.38716 26.5993 10.0029C27.7592 11.7254 28.3992 14.0345 28.3992 16.5015C28.3992 18.9685 27.7592 21.2777 26.5993 23.0001C25.5127 24.6159 24.1017 25.5049 22.6284 25.5049C21.1551 25.5049 19.7441 24.6159 18.6575 23.0001C17.4976 21.2777 16.8576 18.9685 16.8576 16.5015C16.8576 14.0345 17.4976 11.7254 18.6575 10.0029C19.7441 8.38716 21.1551 7.49816 22.6284 7.49816ZM22.6284 6.60916C18.9508 6.60916 15.9688 11.0386 15.9688 16.5015C15.9688 21.9644 18.9508 26.3939 22.6284 26.3939C26.306 26.3939 29.2881 21.9644 29.2881 16.5015C29.2881 11.0386 26.306 6.60916 22.6284 6.60916Z" fill="#B0BEC5"/>
+<path d="M20.7339 15.5767C20.1339 15.0123 20.2672 13.8924 21.0361 13.0746C21.0761 13.0324 21.1161 12.9924 21.1583 12.9546C20.8161 12.7613 20.4406 12.6524 20.045 12.6524C18.4473 12.6524 17.1519 14.4146 17.1519 16.5856C17.1519 18.7566 18.4473 20.5187 20.045 20.5187C21.6427 20.5187 22.9382 18.7566 22.9382 16.5856C22.9382 16.1967 22.896 15.8189 22.8182 15.4634C22.1005 15.9812 21.2383 16.05 20.7339 15.5767Z" fill="url(#paint1_linear_2122_5062)"/>
+<defs>
+<linearGradient id="paint0_linear_2122_5062" x1="6.78232" y1="12.651" x2="6.78232" y2="20.5188" gradientUnits="userSpaceOnUse">
+<stop stop-color="#424242"/>
+<stop offset="1" stop-color="#212121"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2122_5062" x1="20.0449" y1="12.6515" x2="20.0449" y2="20.5193" gradientUnits="userSpaceOnUse">
+<stop stop-color="#424242"/>
+<stop offset="1" stop-color="#212121"/>
+</linearGradient>
+</defs>
+</svg>

frontend/public/Logos/signoz-brand-logo.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2048_2251)">
+<path opacity="0.9" d="M8.02226 15.9866C3.56539 15.9866 -6.10352e-05 12.4896 -6.10352e-05 8.11832C-6.10352e-05 3.79075 3.56539 0.25 8.02226 0.25H13.0584C14.7075 0.25 15.9999 1.56139 15.9999 3.13506V8.11832C15.9999 12.4896 12.4345 15.9866 8.02226 15.9866Z" fill="#F25733"/>
+<path d="M7.95919 4.71207C4.63025 4.71207 2.75514 7.46868 2.67693 7.58603C2.48413 7.87508 2.48413 8.24888 2.67707 8.53816C2.75514 8.65528 4.63025 11.4119 7.95919 11.4119C11.2881 11.4119 13.1633 8.65528 13.2414 8.53792C13.4342 8.24888 13.4342 7.87508 13.2413 7.58582C13.1632 7.46868 11.2881 4.71207 7.95919 4.71207ZM3.13771 8.23088C3.06925 8.12832 3.06925 7.99571 3.13771 7.89307C3.20059 7.79867 4.53564 5.83764 6.92256 5.36723C5.84092 5.78476 5.07127 6.83485 5.07127 8.062C5.07127 9.28912 5.84092 10.3392 6.92256 10.7567C4.53564 10.2863 3.20059 8.32528 3.13771 8.23088ZM6.62838 8.062C6.62838 8.21488 6.50443 8.3388 6.35151 8.3388C6.19859 8.3388 6.07465 8.21488 6.07465 8.062C6.07465 7.02287 6.92003 6.17748 7.95916 6.17748C8.11207 6.17748 8.23599 6.30141 8.23599 6.45434C8.23599 6.60727 8.11207 6.73119 7.95916 6.73119C7.22535 6.73119 6.62838 7.32815 6.62838 8.062ZM7.95919 8.73504C7.58803 8.73504 7.2861 8.43312 7.2861 8.062C7.2861 7.69085 7.58803 7.3889 7.95919 7.3889C8.33039 7.3889 8.63231 7.69083 8.63231 8.062C8.63231 8.43312 8.33039 8.73504 7.95919 8.73504ZM12.7806 8.23088C12.7178 8.32528 11.3827 10.2863 8.99583 10.7567C10.0775 10.3392 10.8471 9.28912 10.8471 8.062C10.8471 6.83487 10.0775 5.78477 8.99583 5.36724C11.3827 5.83768 12.7178 7.7987 12.7806 7.89307C12.8491 7.99571 12.8491 8.12832 12.7806 8.23088Z" fill="#F9F2F9"/>
+</g>
+<defs>
+<clipPath id="clip0_2048_2251">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -62,6 +62,7 @@
 	"button_cancel": "No",
 	"field_promql_expr": "PromQL Expression",
 	"field_alert_name": "Alert Name",
+	"field_notification_channel": "Notification Channel",
 	"field_alert_desc": "Alert Description",
 	"field_labels": "Labels",
 	"field_severity": "Severity",
@@ -100,7 +101,7 @@
 	"user_guide_ch_step3a": "Set alert severity, name and descriptions",
 	"user_guide_ch_step3b": "Add tags to the alert in the Label field if needed",
 	"user_tooltip_more_help": "More details on how to create alerts",
-	"choose_alert_type": "Choose a type for the alert:",
+	"choose_alert_type": "Choose a type for the alert",
 	"metric_based_alert": "Metric based Alert",
 	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
 	"log_based_alert": "Log-based Alert",

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

@@ -54,6 +54,7 @@
 	"field_promql_expr": "PromQL Expression",
 	"field_alert_name": "Alert Name",
 	"field_alert_desc": "Alert Description",
+	"field_notification_channel": "Notification Channel",
 	"field_labels": "Labels",
 	"field_severity": "Severity",
 	"option_critical": "Critical",

frontend/public/locales/en/alerts.json

@@ -63,6 +63,7 @@
 	"field_promql_expr": "PromQL Expression",
 	"field_alert_name": "Alert Name",
 	"field_alert_desc": "Alert Description",
+	"field_notification_channel": "Notification Channel",
 	"field_labels": "Labels",
 	"field_severity": "Severity",
 	"option_critical": "Critical",
@@ -100,7 +101,7 @@
 	"user_guide_ch_step3a": "Set alert severity, name and descriptions",
 	"user_guide_ch_step3b": "Add tags to the alert in the Label field if needed",
 	"user_tooltip_more_help": "More details on how to create alerts",
-	"choose_alert_type": "Choose a type for the alert:",
+	"choose_alert_type": "Choose a type for the alert",
 	"metric_based_alert": "Metric based Alert",
 	"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
 	"log_based_alert": "Log-based Alert",

frontend/public/locales/en/explorer.json

@@ -1,3 +1,4 @@
 {
-    "name_of_the_view": "Name of the view"
+    "name_of_the_view": "Name of the view",
+    "delete_confirm_message": "Are you sure you want to delete {{viewName}} view? Deleting a view is irreversible and cannot be undone."
 }

frontend/public/locales/en/rules.json

@@ -54,6 +54,7 @@
 	"field_promql_expr": "PromQL Expression",
 	"field_alert_name": "Alert Name",
 	"field_alert_desc": "Alert Description",
+	"field_notification_channel": "Notification Channel",
 	"field_labels": "Labels",
 	"field_severity": "Severity",
 	"option_critical": "Critical",

frontend/public/locales/en/titles.json

@@ -31,6 +31,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"OLD_LOGS_EXPLORER": "SigNoz | Old Logs Explorer",
 	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
@@ -38,5 +39,8 @@
 	"LIST_LICENSES": "SigNoz | List of Licenses",
 	"WORKSPACE_LOCKED": "SigNoz | Workspace Locked",
 	"SUPPORT": "SigNoz | Support",
-	"DEFAULT": "Open source Observability Platform | SigNoz"
+	"LOGS_SAVE_VIEWS": "SigNoz | Logs Save Views",
+	"TRACES_SAVE_VIEWS": "SigNoz | Traces Save Views",
+	"DEFAULT": "Open source Observability Platform | SigNoz",
+	"SHORTCUTS": "SigNoz | Shortcuts"
 }

frontend/scripts/typecheck-staged.sh

@@ -0,0 +1,25 @@
+files="";
+
+# lint-staged will pass all files in $1 $2 $3 etc. iterate and concat.
+for var in "$@"
+do
+    files="$files \"$var\","
+done
+
+# create temporary tsconfig which includes only passed files
+str="{
+  \"extends\": \"./tsconfig.json\",
+  \"include\": [\"src/types/global.d.ts\",\"src/typings/window.ts\", \"src/typings/chartjs-adapter-date-fns.d.ts\", \"src/typings/environment.ts\" ,$files]
+}"
+echo $str > tsconfig.tmp
+
+# run typecheck using temp config
+tsc -p ./tsconfig.tmp
+
+# capture exit code of tsc
+code=$?
+
+# delete temp config
+rm ./tsconfig.tmp
+
+exit $code

frontend/src/AppRoutes/Private.tsx

@@ -160,7 +160,7 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 				if (currentRoute) {
 					const { isPrivate, key } = currentRoute;
 
-					if (isPrivate && key !== ROUTES.WORKSPACE_LOCKED) {
+					if (isPrivate && key !== String(ROUTES.WORKSPACE_LOCKED)) {
 						handlePrivateRoutes(key);
 					} else {
 						// no need to fetch the user and make user fetching false

frontend/src/AppRoutes/index.tsx

@@ -8,6 +8,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import useAnalytics from 'hooks/analytics/useAnalytics';
+import { KeyboardHotkeysProvider } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useThemeConfig } from 'hooks/useDarkMode';
 import useGetFeatureFlag from 'hooks/useGetFeatureFlag';
 import useLicense, { LICENSE_PLAN_KEY } from 'hooks/useLicense';
@@ -28,7 +29,11 @@ import AppReducer, { User } from 'types/reducer/app';
 import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app';
 
 import PrivateRoute from './Private';
-import defaultRoutes, { AppRoutes, SUPPORT_ROUTE } from './routes';
+import defaultRoutes, {
+	AppRoutes,
+	LIST_LICENSES,
+	SUPPORT_ROUTE,
+} from './routes';
 
 function App(): JSX.Element {
 	const themeConfig = useThemeConfig();
@@ -150,6 +155,10 @@ function App(): JSX.Element {
 		if (isCloudUserVal || isEECloudUser()) {
 			const newRoutes = [...routes, SUPPORT_ROUTE];
 
+			setRoutes(newRoutes);
+		} else {
+			const newRoutes = [...routes, LIST_LICENSES];
+
 			setRoutes(newRoutes);
 		}
 
@@ -169,22 +178,24 @@ function App(): JSX.Element {
 						<ResourceProvider>
 							<QueryBuilderProvider>
 								<DashboardProvider>
-									<AppLayout>
-										<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-											<Switch>
-												{routes.map(({ path, component, exact }) => (
-													<Route
-														key={`${path}`}
-														exact={exact}
-														path={path}
-														component={component}
-													/>
-												))}
+									<KeyboardHotkeysProvider>
+										<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>
+													<Route path="*" component={NotFound} />
+												</Switch>
+											</Suspense>
+										</AppLayout>
+									</KeyboardHotkeysProvider>
 								</DashboardProvider>
 							</QueryBuilderProvider>
 						</ResourceProvider>

frontend/src/AppRoutes/pageComponents.ts

@@ -15,9 +15,20 @@ export const ServiceMapPage = Loadable(
 	() => import(/* webpackChunkName: "ServiceMapPage" */ 'modules/Servicemap'),
 );
 
+export const LogsSaveViews = Loadable(
+	() => import(/* webpackChunkName: "LogsSaveViews" */ 'pages/LogsModulePage'), // TODO: Add a wrapper so that the same component can be used in traces
+);
+
 export const TracesExplorer = Loadable(
 	() =>
-		import(/* webpackChunkName: "Traces Explorer Page" */ 'pages/TracesExplorer'),
+		import(
+			/* webpackChunkName: "Traces Explorer Page" */ 'pages/TracesModulePage'
+		),
+);
+
+export const TracesSaveViews = Loadable(
+	() =>
+		import(/* webpackChunkName: "Traces Save Views" */ 'pages/TracesModulePage'),
 );
 
 export const TraceFilter = Loadable(
@@ -112,17 +123,25 @@ export const MySettings = Loadable(
 );
 
 export const Logs = Loadable(
-	() => import(/* webpackChunkName: "Logs" */ 'pages/Logs'),
+	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
 export const LogsExplorer = Loadable(
-	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsExplorer'),
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsModulePage'),
+);
+
+export const OldLogsExplorer = Loadable(
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/Logs'),
 );
 
 export const LiveLogs = Loadable(
 	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
 );
 
+export const PipelinePage = Loadable(
+	() => import(/* webpackChunkName: "Pipelines" */ 'pages/LogsModulePage'),
+);
+
 export const Login = Loadable(
 	() => import(/* webpackChunkName: "Login" */ 'pages/Login'),
 );
@@ -151,10 +170,6 @@ export const LogsIndexToFields = Loadable(
 		import(/* webpackChunkName: "LogsIndexToFields Page" */ 'pages/LogsSettings'),
 );
 
-export const PipelinePage = Loadable(
-	() => import(/* webpackChunkName: "Pipelines" */ 'pages/Pipelines'),
-);
-
 export const BillingPage = Loadable(
 	() => import(/* webpackChunkName: "BillingPage" */ 'pages/Billing'),
 );
@@ -167,3 +182,7 @@ export const WorkspaceBlocked = Loadable(
 	() =>
 		import(/* webpackChunkName: "WorkspaceLocked" */ 'pages/WorkspaceLocked'),
 );
+
+export const ShortcutsPage = Loadable(
+	() => import(/* webpackChunkName: "ShortcutsPage" */ 'pages/Shortcuts'),
+);

frontend/src/AppRoutes/routes.ts

@@ -1,4 +1,5 @@
 import ROUTES from 'constants/routes';
+import Shortcuts from 'pages/Shortcuts/Shortcuts';
 import WorkspaceBlocked from 'pages/WorkspaceLocked';
 import { RouteProps } from 'react-router-dom';
 
@@ -21,8 +22,10 @@ import {
 	Logs,
 	LogsExplorer,
 	LogsIndexToFields,
+	LogsSaveViews,
 	MySettings,
 	NewDashboardPage,
+	OldLogsExplorer,
 	Onboarding,
 	OrganizationSettings,
 	PasswordReset,
@@ -38,6 +41,7 @@ import {
 	TraceDetail,
 	TraceFilter,
 	TracesExplorer,
+	TracesSaveViews,
 	UnAuthorized,
 	UsageExplorerPage,
 } from './pageComponents';
@@ -85,6 +89,13 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'SERVICE_MAP',
 	},
+	{
+		path: ROUTES.LOGS_SAVE_VIEWS,
+		component: LogsSaveViews,
+		isPrivate: true,
+		exact: true,
+		key: 'LOGS_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -162,6 +173,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACES_EXPLORER',
 	},
+	{
+		path: ROUTES.TRACES_SAVE_VIEWS,
+		exact: true,
+		component: TracesSaveViews,
+		isPrivate: true,
+		key: 'TRACES_SAVE_VIEWS',
+	},
 	{
 		path: ROUTES.CHANNELS_NEW,
 		exact: true,
@@ -190,13 +208,6 @@ const routes: AppRoutes[] = [
 		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
-	{
-		path: ROUTES.LIST_LICENSES,
-		exact: true,
-		component: LicensePage,
-		isPrivate: true,
-		key: 'LIST_LICENSES',
-	},
 	{
 		path: ROUTES.ERROR_DETAIL,
 		exact: true,
@@ -246,6 +257,13 @@ const routes: AppRoutes[] = [
 		key: 'LOGS_EXPLORER',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.OLD_LOGS_EXPLORER,
+		exact: true,
+		component: OldLogsExplorer,
+		key: 'OLD_LOGS_EXPLORER',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LIVE_LOGS,
 		exact: true,
@@ -302,6 +320,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'WORKSPACE_LOCKED',
 	},
+	{
+		path: ROUTES.SHORTCUTS,
+		exact: true,
+		component: Shortcuts,
+		isPrivate: true,
+		key: 'SHORTCUTS',
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {
@@ -312,6 +337,14 @@ export const SUPPORT_ROUTE: AppRoutes = {
 	isPrivate: true,
 };
 
+export const LIST_LICENSES: AppRoutes = {
+	path: ROUTES.LIST_LICENSES,
+	exact: true,
+	component: LicensePage,
+	isPrivate: true,
+	key: 'LIST_LICENSES',
+};
+
 export interface AppRoutes {
 	component: RouteProps['component'];
 	path: RouteProps['path'];

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

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

frontend/src/api/utils.ts

@@ -66,7 +66,11 @@ export const Logout = (): void => {
 
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore
-	window.Intercom('shutdown');
+	if (window && window.Intercom) {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		window.Intercom('shutdown');
+	}
 
 	history.push(ROUTES.LOGIN);
 };

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -0,0 +1,121 @@
+.custom-time-picker {
+	display: flex;
+	flex-direction: column;
+}
+
+.time-options-container {
+	.time-options-item {
+		margin: 2px 0;
+		padding: 8px;
+		border-radius: 2px;
+
+		&.active {
+			background-color: rgba($color: #000000, $alpha: 0.2);
+
+			&:hover {
+				cursor: pointer;
+				background-color: rgba($color: #000000, $alpha: 0.3);
+			}
+		}
+
+		&:hover {
+			cursor: pointer;
+			background-color: rgba($color: #000000, $alpha: 0.3);
+		}
+	}
+}
+
+.time-selection-dropdown-content {
+	min-width: 172px;
+	width: 100%;
+}
+
+.timeSelection-input {
+	display: flex;
+	gap: 8px;
+	height: 33px;
+	align-items: center;
+	padding: 4px 8px;
+	padding-left: 0px !important;
+
+	&.custom-time {
+		input:not(:focus) {
+			min-width: 240px;
+		}
+	}
+
+	input::placeholder {
+		color: white;
+	}
+
+	input:focus::placeholder {
+		color: rgba($color: #ffffff, $alpha: 0.4);
+	}
+}
+
+.valid-format-error {
+	margin-top: 4px;
+	color: var(--bg-cherry-400) !important;
+	font-size: 13px !important;
+	font-weight: 400 !important;
+}
+
+.info-text {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 4px;
+	cursor: default;
+	color: var(--bg-vanilla-400, #c0c1c3) !important;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: normal;
+	letter-spacing: 0.14px;
+}
+
+.info-text:hover {
+	&.ant-btn-text {
+		background-color: unset !important;
+	}
+}
+
+.lightMode {
+	.time-options-container {
+		.time-options-item {
+			&.active {
+				background-color: rgba($color: #ffffff, $alpha: 0.2);
+
+				&:hover {
+					cursor: pointer;
+					background-color: rgba($color: #ffffff, $alpha: 0.3);
+				}
+			}
+
+			&:hover {
+				cursor: pointer;
+				background-color: rgba($color: #ffffff, $alpha: 0.3);
+			}
+		}
+	}
+
+	.timeSelection-input {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		padding: 4px 8px;
+		padding-left: 0px !important;
+
+		input::placeholder {
+			color: var(---bg-ink-300);
+		}
+
+		input:focus::placeholder {
+			color: rgba($color: #000000, $alpha: 0.4);
+		}
+	}
+
+	.info-text {
+		color: var(--bg-slate-400) !important;
+	}
+}

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -0,0 +1,320 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import './CustomTimePicker.styles.scss';
+
+import { Input, Popover, Tooltip, Typography } from 'antd';
+import cx from 'classnames';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import { Options } from 'container/TopNav/DateTimeSelection/config';
+import {
+	FixedDurationSuggestionOptions,
+	RelativeDurationSuggestionOptions,
+} from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs from 'dayjs';
+import { defaultTo, noop } from 'lodash-es';
+import debounce from 'lodash-es/debounce';
+import { CheckCircle, ChevronDown, Clock } from 'lucide-react';
+import {
+	ChangeEvent,
+	Dispatch,
+	SetStateAction,
+	useEffect,
+	useState,
+} from 'react';
+import { useLocation } from 'react-router-dom';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import CustomTimePickerPopoverContent from './CustomTimePickerPopoverContent';
+
+const maxAllowedMinTimeInMonths = 6;
+
+interface CustomTimePickerProps {
+	onSelect: (value: string) => void;
+	onError: (value: boolean) => void;
+	selectedValue: string;
+	selectedTime: string;
+	onValidCustomDateChange: ([t1, t2]: any[]) => void;
+	open: boolean;
+	setOpen: Dispatch<SetStateAction<boolean>>;
+	items: any[];
+	newPopover?: boolean;
+	customDateTimeVisible?: boolean;
+	setCustomDTPickerVisible?: Dispatch<SetStateAction<boolean>>;
+	onCustomDateHandler?: (dateTimeRange: DateTimeRangeType) => void;
+	handleGoLive?: () => void;
+}
+
+function CustomTimePicker({
+	onSelect,
+	onError,
+	items,
+	selectedValue,
+	selectedTime,
+	open,
+	setOpen,
+	onValidCustomDateChange,
+	newPopover,
+	customDateTimeVisible,
+	setCustomDTPickerVisible,
+	onCustomDateHandler,
+	handleGoLive,
+}: CustomTimePickerProps): JSX.Element {
+	const [
+		selectedTimePlaceholderValue,
+		setSelectedTimePlaceholderValue,
+	] = useState('Select / Enter Time Range');
+
+	const [inputValue, setInputValue] = useState('');
+	const [inputStatus, setInputStatus] = useState<'' | 'error' | 'success'>('');
+	const [inputErrorMessage, setInputErrorMessage] = useState<string | null>(
+		null,
+	);
+	const location = useLocation();
+	const [isInputFocused, setIsInputFocused] = useState(false);
+
+	const getSelectedTimeRangeLabel = (
+		selectedTime: string,
+		selectedTimeValue: string,
+	): string => {
+		if (selectedTime === 'custom') {
+			return selectedTimeValue;
+		}
+
+		for (let index = 0; index < Options.length; index++) {
+			if (Options[index].value === selectedTime) {
+				return Options[index].label;
+			}
+		}
+		for (
+			let index = 0;
+			index < RelativeDurationSuggestionOptions.length;
+			index++
+		) {
+			if (RelativeDurationSuggestionOptions[index].value === selectedTime) {
+				return RelativeDurationSuggestionOptions[index].label;
+			}
+		}
+		for (let index = 0; index < FixedDurationSuggestionOptions.length; index++) {
+			if (FixedDurationSuggestionOptions[index].value === selectedTime) {
+				return FixedDurationSuggestionOptions[index].label;
+			}
+		}
+
+		return '';
+	};
+
+	useEffect(() => {
+		const value = getSelectedTimeRangeLabel(selectedTime, selectedValue);
+
+		setSelectedTimePlaceholderValue(value);
+	}, [selectedTime, selectedValue]);
+
+	const hide = (): void => {
+		setOpen(false);
+	};
+
+	const handleOpenChange = (newOpen: boolean): void => {
+		setOpen(newOpen);
+	};
+
+	const debouncedHandleInputChange = debounce((inputValue): void => {
+		const isValidFormat = /^(\d+)([mhdw])$/.test(inputValue);
+		if (isValidFormat) {
+			setInputStatus('success');
+			onError(false);
+			setInputErrorMessage(null);
+
+			const match = inputValue.match(/^(\d+)([mhdw])$/);
+
+			const value = parseInt(match[1], 10);
+			const unit = match[2];
+
+			const currentTime = dayjs();
+			const maxAllowedMinTime = currentTime.subtract(
+				maxAllowedMinTimeInMonths,
+				'month',
+			);
+			let minTime = null;
+
+			switch (unit) {
+				case 'm':
+					minTime = currentTime.subtract(value, 'minute');
+					break;
+
+				case 'h':
+					minTime = currentTime.subtract(value, 'hour');
+					break;
+				case 'd':
+					minTime = currentTime.subtract(value, 'day');
+					break;
+				case 'w':
+					minTime = currentTime.subtract(value, 'week');
+					break;
+				default:
+					break;
+			}
+
+			if (minTime && (!minTime.isValid() || minTime < maxAllowedMinTime)) {
+				setInputStatus('error');
+				onError(true);
+				setInputErrorMessage('Please enter time less than 6 months');
+			} else {
+				onValidCustomDateChange([minTime, currentTime]);
+			}
+		} else {
+			setInputStatus('error');
+			onError(true);
+			setInputErrorMessage(null);
+		}
+	}, 300);
+
+	const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {
+		const inputValue = event.target.value;
+
+		if (inputValue.length > 0) {
+			setOpen(false);
+		} else {
+			setOpen(true);
+		}
+
+		setInputValue(inputValue);
+
+		// Call the debounced function with the input value
+		debouncedHandleInputChange(inputValue);
+	};
+
+	const handleSelect = (label: string, value: string): void => {
+		onSelect(value);
+		setSelectedTimePlaceholderValue(label);
+		setInputStatus('');
+		onError(false);
+		setInputErrorMessage(null);
+		setInputValue('');
+		if (value !== 'custom') {
+			hide();
+		}
+	};
+
+	const content = (
+		<div className="time-selection-dropdown-content">
+			<div className="time-options-container">
+				{items?.map(({ value, label }) => (
+					<div
+						onClick={(): void => {
+							handleSelect(label, value);
+						}}
+						key={value}
+						className={cx(
+							'time-options-item',
+							selectedValue === value ? 'active' : '',
+						)}
+					>
+						{label}
+					</div>
+				))}
+			</div>
+		</div>
+	);
+
+	const handleFocus = (): void => {
+		setIsInputFocused(true);
+	};
+
+	const handleBlur = (): void => {
+		setIsInputFocused(false);
+	};
+
+	// this is required as TopNav component wraps the components and we need to clear the state on path change
+	useEffect(() => {
+		setInputStatus('');
+		onError(false);
+		setInputErrorMessage(null);
+		setInputValue('');
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [location.pathname]);
+
+	return (
+		<div className="custom-time-picker">
+			<Popover
+				className={cx(
+					'timeSelection-input-container',
+					selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
+				)}
+				placement="bottomRight"
+				getPopupContainer={popupContainer}
+				rootClassName="date-time-root"
+				content={
+					newPopover ? (
+						<CustomTimePickerPopoverContent
+							setIsOpen={setOpen}
+							customDateTimeVisible={defaultTo(customDateTimeVisible, false)}
+							setCustomDTPickerVisible={defaultTo(setCustomDTPickerVisible, noop)}
+							onCustomDateHandler={defaultTo(onCustomDateHandler, noop)}
+							onSelectHandler={handleSelect}
+							handleGoLive={defaultTo(handleGoLive, noop)}
+							options={items}
+							selectedTime={selectedTime}
+						/>
+					) : (
+						content
+					)
+				}
+				arrow={false}
+				trigger="hover"
+				open={open}
+				onOpenChange={handleOpenChange}
+				style={{
+					padding: 0,
+				}}
+			>
+				<Input
+					className="timeSelection-input"
+					type="text"
+					status={inputValue && inputStatus === 'error' ? 'error' : ''}
+					placeholder={
+						isInputFocused
+							? 'Time Format (1m or 2h or 3d or 4w)'
+							: selectedTimePlaceholderValue
+					}
+					value={inputValue}
+					onFocus={handleFocus}
+					onBlur={handleBlur}
+					onChange={handleInputChange}
+					prefix={
+						inputValue && inputStatus === 'success' ? (
+							<CheckCircle size={14} color="#51E7A8" />
+						) : (
+							<Tooltip title="Enter time in format (e.g., 1m, 2h, 3d, 4w)">
+								<Clock size={14} />
+							</Tooltip>
+						)
+					}
+					suffix={
+						<ChevronDown
+							size={14}
+							onClick={(): void => {
+								setOpen(!open);
+							}}
+						/>
+					}
+				/>
+			</Popover>
+
+			{inputStatus === 'error' && inputErrorMessage && (
+				<Typography.Title level={5} className="valid-format-error">
+					{inputErrorMessage}
+				</Typography.Title>
+			)}
+		</div>
+	);
+}
+
+export default CustomTimePicker;
+
+CustomTimePicker.defaultProps = {
+	newPopover: false,
+	customDateTimeVisible: false,
+	setCustomDTPickerVisible: noop,
+	onCustomDateHandler: noop,
+	handleGoLive: noop,
+};

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -0,0 +1,133 @@
+import './CustomTimePicker.styles.scss';
+
+import { Button, DatePicker } from 'antd';
+import cx from 'classnames';
+import ROUTES from 'constants/routes';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import {
+	Option,
+	RelativeDurationSuggestionOptions,
+} from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs, { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+interface CustomTimePickerPopoverContentProps {
+	options: any[];
+	setIsOpen: Dispatch<SetStateAction<boolean>>;
+	customDateTimeVisible: boolean;
+	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
+	onCustomDateHandler: (dateTimeRange: DateTimeRangeType) => void;
+	onSelectHandler: (label: string, value: string) => void;
+	handleGoLive: () => void;
+	selectedTime: string;
+}
+
+function CustomTimePickerPopoverContent({
+	options,
+	setIsOpen,
+	customDateTimeVisible,
+	setCustomDTPickerVisible,
+	onCustomDateHandler,
+	onSelectHandler,
+	handleGoLive,
+	selectedTime,
+}: CustomTimePickerPopoverContentProps): JSX.Element {
+	const { RangePicker } = DatePicker;
+	const { pathname } = useLocation();
+
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const isLogsExplorerPage = useMemo(() => pathname === ROUTES.LOGS_EXPLORER, [
+		pathname,
+	]);
+
+	const disabledDate = (current: Dayjs): boolean => {
+		const currentDay = dayjs(current);
+		return currentDay.isAfter(dayjs());
+	};
+
+	const onPopoverClose = (visible: boolean): void => {
+		if (!visible) {
+			setCustomDTPickerVisible(false);
+		}
+		setIsOpen(visible);
+	};
+
+	const onModalOkHandler = (date_time: any): void => {
+		if (date_time?.[1]) {
+			onPopoverClose(false);
+		}
+		onCustomDateHandler(date_time);
+	};
+	function getTimeChips(options: Option[]): JSX.Element {
+		return (
+			<div className="relative-date-time-section">
+				{options.map((option) => (
+					<Button
+						type="text"
+						className="time-btns"
+						key={option.label + option.value}
+						onClick={(): void => {
+							onSelectHandler(option.label, option.value);
+						}}
+					>
+						{option.label}
+					</Button>
+				))}
+			</div>
+		);
+	}
+
+	return (
+		<div className="date-time-popover">
+			<div className="date-time-options">
+				{isLogsExplorerPage && (
+					<Button className="data-time-live" type="text" onClick={handleGoLive}>
+						Live
+					</Button>
+				)}
+				{options.map((option) => (
+					<Button
+						type="text"
+						key={option.label + option.value}
+						onClick={(): void => {
+							onSelectHandler(option.label, option.value);
+						}}
+						className={cx(
+							'date-time-options-btn',
+							selectedTime === option.value && 'active',
+						)}
+					>
+						{option.label}
+					</Button>
+				))}
+			</div>
+			<div className="relative-date-time">
+				{selectedTime === 'custom' || customDateTimeVisible ? (
+					<RangePicker
+						disabledDate={disabledDate}
+						allowClear
+						onCalendarChange={onModalOkHandler}
+						// eslint-disable-next-line react/jsx-props-no-spreading
+						{...(selectedTime === 'custom' && {
+							defaultValue: [dayjs(minTime / 1000000), dayjs(maxTime / 1000000)],
+						})}
+					/>
+				) : (
+					<div>
+						<div className="time-heading">RELATIVE TIMES</div>
+						<div>{getTimeChips(RelativeDurationSuggestionOptions)}</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default CustomTimePickerPopoverContent;

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -6,7 +6,6 @@ import {
 } from '@ant-design/icons';
 import {
 	Button,
-	Card,
 	Col,
 	Dropdown,
 	MenuProps,
@@ -152,95 +151,100 @@ function ExplorerCard({
 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <SaveOutlined />;
 
+	const showSaveView = false;
+
 	return (
 		<>
-			<ExplorerCardHeadContainer size="small">
-				<Row align="middle">
-					<Col span={6}>
-						<Space>
-							<Typography>Query Builder</Typography>
-							<TextToolTip
-								url={ExploreHeaderToolTip.url}
-								text={ExploreHeaderToolTip.text}
-								useFilledIcon={false}
-							/>
-						</Space>
-					</Col>
-					<OffSetCol span={18}>
-						<Space size="large">
-							{viewsData?.data.data && viewsData?.data.data.length && (
-								<Space>
-									<Select
-										getPopupContainer={popupContainer}
-										loading={isLoading || isRefetching}
-										showSearch
-										placeholder="Select a view"
-										dropdownStyle={DropDownOverlay}
-										dropdownMatchSelectWidth={false}
-										optionLabelProp="value"
-										value={viewName || undefined}
+			{showSaveView && (
+				<ExplorerCardHeadContainer size="small">
+					<Row align="middle">
+						<Col span={6}>
+							<Space>
+								<Typography>Query Builder</Typography>
+								<TextToolTip
+									url={ExploreHeaderToolTip.url}
+									text={ExploreHeaderToolTip.text}
+									useFilledIcon={false}
+								/>
+							</Space>
+						</Col>
+						<OffSetCol span={18}>
+							<Space size="large">
+								{viewsData?.data.data && viewsData?.data.data.length && (
+									<Space>
+										<Select
+											getPopupContainer={popupContainer}
+											loading={isLoading || isRefetching}
+											showSearch
+											placeholder="Select a view"
+											dropdownStyle={DropDownOverlay}
+											dropdownMatchSelectWidth={false}
+											optionLabelProp="value"
+											value={viewName || undefined}
+										>
+											{viewsData?.data.data.map((view) => (
+												<Select.Option key={view.uuid} value={view.name}>
+													<MenuItemGenerator
+														viewName={view.name}
+														viewKey={viewKey}
+														createdBy={view.createdBy}
+														uuid={view.uuid}
+														refetchAllView={refetchAllView}
+														viewData={viewsData.data.data}
+														sourcePage={sourcepage}
+													/>
+												</Select.Option>
+											))}
+										</Select>
+									</Space>
+								)}
+								{isQueryUpdated && (
+									<Button
+										type="primary"
+										icon={<SaveOutlined />}
+										onClick={onUpdateQueryHandler}
 									>
-										{viewsData?.data.data.map((view) => (
-											<Select.Option key={view.uuid} value={view.name}>
-												<MenuItemGenerator
-													viewName={view.name}
-													viewKey={viewKey}
-													createdBy={view.createdBy}
-													uuid={view.uuid}
-													refetchAllView={refetchAllView}
-													viewData={viewsData.data.data}
-													sourcePage={sourcepage}
-												/>
-											</Select.Option>
-										))}
-									</Select>
-								</Space>
-							)}
-							{isQueryUpdated && (
-								<Button
-									type="primary"
-									icon={<SaveOutlined />}
-									onClick={onUpdateQueryHandler}
+										Save changes
+									</Button>
+								)}
+								<Popover
+									getPopupContainer={popupContainer}
+									placement="bottomLeft"
+									trigger="click"
+									content={
+										<SaveViewWithName
+											sourcePage={sourcepage}
+											handlePopOverClose={handleOpenChange}
+											refetchAllView={refetchAllView}
+										/>
+									}
+									showArrow={false}
+									open={isOpen}
+									onOpenChange={handleOpenChange}
 								>
-									Save changes
-								</Button>
-							)}
-							<Popover
-								getPopupContainer={popupContainer}
-								placement="bottomLeft"
-								trigger="click"
-								content={
-									<SaveViewWithName
-										sourcePage={sourcepage}
-										handlePopOverClose={handleOpenChange}
-										refetchAllView={refetchAllView}
-									/>
-								}
-								showArrow={false}
-								open={isOpen}
-								onOpenChange={handleOpenChange}
-							>
-								<Button
-									type={saveButtonType}
-									icon={saveButtonIcon}
-									data-testid="traces-save-view-action"
-								>
-									{isQueryUpdated
-										? SaveButtonText.SAVE_AS_NEW_VIEW
-										: SaveButtonText.SAVE_VIEW}
-								</Button>
-							</Popover>
-							<ShareAltOutlined onClick={onCopyUrlHandler} />
-							{viewKey && (
-								<Dropdown trigger={['click']} menu={moreOptionMenu}>
-									<MoreOutlined />
-								</Dropdown>
-							)}
-						</Space>
-					</OffSetCol>
-				</Row>
-			</ExplorerCardHeadContainer>
-			<Card>{children}</Card>
+									<Button
+										type={saveButtonType}
+										icon={saveButtonIcon}
+										data-testid="traces-save-view-action"
+									>
+										{isQueryUpdated
+											? SaveButtonText.SAVE_AS_NEW_VIEW
+											: SaveButtonText.SAVE_VIEW}
+									</Button>
+								</Popover>
+								<ShareAltOutlined onClick={onCopyUrlHandler} />
+								{viewKey && (
+									<Dropdown trigger={['click']} menu={moreOptionMenu}>
+										<MoreOutlined />
+									</Dropdown>
+								)}
+							</Space>
+						</OffSetCol>
+					</Row>
+				</ExplorerCardHeadContainer>
+			)}
+
+			<div>{children}</div>
 		</>
 	);
 }

frontend/src/components/ExplorerCard/styles.ts

@@ -3,6 +3,7 @@ import styled, { CSSProperties } from 'styled-components';
 
 export const ExplorerCardHeadContainer = styled(Card)`
 	margin: 1rem 0;
+	padding: 0;
 `;
 
 export const OffSetCol = styled(Col)`

frontend/src/components/ExplorerCard/test/ExplorerCard.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import ROUTES from 'constants/routes';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import { DataSource } from 'types/common/queryBuilder';
@@ -46,7 +46,7 @@ describe('ExplorerCard', () => {
 				<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
 			</MockQueryClientProvider>,
 		);
-		expect(screen.getByText('Query Builder')).toBeInTheDocument();
+		expect(screen.queryByText('Query Builder')).not.toBeInTheDocument();
 	});
 
 	it('renders a save view button', () => {
@@ -55,19 +55,6 @@ describe('ExplorerCard', () => {
 				<ExplorerCard sourcepage={DataSource.TRACES}>child</ExplorerCard>
 			</MockQueryClientProvider>,
 		);
-		expect(screen.getByText('Save view')).toBeInTheDocument();
-	});
-
-	it('should see all the view listed in dropdown', async () => {
-		const screen = render(
-			<ExplorerCard sourcepage={DataSource.TRACES}>Mock Children</ExplorerCard>,
-		);
-		const selectPlaceholder = screen.getByText('Select a view');
-
-		fireEvent.mouseDown(selectPlaceholder);
-		const viewNameText = await screen.getAllByText('View 1');
-		viewNameText.forEach((element) => {
-			expect(element).toBeInTheDocument();
-		});
+		expect(screen.queryByText('Save view')).not.toBeInTheDocument();
 	});
 });

frontend/src/components/ExplorerCard/utils.ts

@@ -14,7 +14,7 @@ import {
 	SaveViewHandlerProps,
 } from './types';
 
-const showErrorNotification = (
+export const showErrorNotification = (
 	notifications: NotificationInstance,
 	err: Error,
 ): void => {
@@ -90,6 +90,14 @@ export const isQueryUpdatedInView = ({
 	// Omitting id from aggregateAttribute and groupBy
 	const updatedCurrentQuery = omitIdFromQuery(stagedQuery);
 
+	if (
+		updatedCurrentQuery?.builder === undefined ||
+		updatedCurrentQuery.clickhouse_sql === undefined ||
+		updatedCurrentQuery.promql === undefined
+	) {
+		return false;
+	}
+
 	return (
 		panelType !== currentPanelType ||
 		!isEqual(query.builder, updatedCurrentQuery?.builder) ||

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

@@ -3,8 +3,11 @@ import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ActionItemProps } from 'container/LogDetailedView/ActionItem';
 import { ILog } from 'types/api/logs/log';
 
+import { VIEWS } from './constants';
+
 export type LogDetailProps = {
 	log: ILog | null;
+	selectedTab: VIEWS;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
-	Pick<ActionItemProps, 'onClickActionItem'> &
+	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -0,0 +1,230 @@
+.log-detail-drawer {
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
+	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+	.ant-drawer-header {
+		padding: 8px 16px;
+		border-bottom: none;
+
+		align-items: stretch;
+
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
+	}
+
+	.ant-drawer-close {
+		margin-inline-end: 0px;
+	}
+
+	.ant-drawer-body {
+		padding: 16px;
+	}
+
+	.title {
+		color: var(--text-vanilla-400);
+		font-family: Inter;
+		font-size: var(--font-size-sm);
+		font-style: normal;
+		font-weight: var(--font-weight-normal);
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+
+	.radio-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-top: var(--padding-1);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+
+	.log-detail-drawer__log {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		position: relative;
+
+		.log-body {
+			font-family: 'SF Mono';
+			font-family: 'Space Mono', monospace;
+
+			font-size: var(--font-size-sm);
+			font-weight: var(--font-weight-normal);
+			line-height: 18px;
+			letter-spacing: -0.07px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			color: var(--text-vanilla-400);
+			opacity: 0.6;
+		}
+
+		.log-type-indicator {
+			height: 24px;
+			border: 2px solid var(--bg-slate-400);
+			border-radius: 5px;
+			margin-left: 0;
+
+			&.INFO {
+				border-color: #1d212d;
+			}
+
+			&.WARNING {
+				border-color: #ffcd56;
+			}
+
+			&.ERROR {
+				border-color: #e5484d;
+			}
+		}
+
+		.log-overflow-shadow {
+			background: linear-gradient(270deg, #121317 10.4%, rgba(18, 19, 23, 0) 100%);
+
+			width: 196px;
+			position: absolute;
+			right: 0;
+		}
+	}
+
+	.tabs-and-search {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 16px 0;
+
+		.action-btn {
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.json-action-btn {
+			display: flex;
+			gap: 8px;
+		}
+	}
+
+	.views-tabs {
+		color: var(--text-vanilla-400);
+
+		.view-title {
+			display: flex;
+			gap: var(--margin-2);
+			align-items: center;
+			justify-content: center;
+			font-size: var(--font-size-xs);
+			font-style: normal;
+			font-weight: var(--font-weight-normal);
+		}
+
+		.tab {
+			border: 1px solid var(--bg-slate-400);
+			width: 114px;
+		}
+
+		.tab::before {
+			background: var(--bg-slate-400);
+		}
+
+		.selected_view {
+			background: var(--bg-slate-300);
+			color: var(--text-vanilla-100);
+			border: 1px solid var(--bg-slate-400);
+		}
+
+		.selected_view::before {
+			background: var(--bg-slate-400);
+		}
+	}
+
+	.search-input {
+		margin-top: var(--margin-2);
+		border: 1px solid var(--bg-slate-400);
+		height: 46px;
+		padding: var(--padding-1) var(--padding-2);
+		box-shadow: none;
+		border-radius: 0;
+	}
+
+	.ant-drawer-close {
+		padding: 0px;
+	}
+}
+
+.lightMode {
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.log-detail-drawer__log {
+			.log-overflow-shadow {
+				background: linear-gradient(
+					270deg,
+					var(--bg-vanilla-100) 10.4%,
+					rgba(255, 255, 255, 0) 100%
+				);
+			}
+
+			.log-type-indicator {
+				border: 2px solid var(--bg-vanilla-400);
+			}
+
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+
+		.search-input {
+			border: 1px solid var(--bg-vanilla-200);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+	}
+}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss

@@ -0,0 +1,10 @@
+.query-builder-search-wrapper {
+    margin-top: 10px;
+    height: 46px;
+    border: 1px solid var(--bg-slate-400);
+    border-bottom: none;
+
+    .ant-select-selector {
+        border: none !important;
+    }
+}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -0,0 +1,77 @@
+import './QueryBuilderSearchWrapper.styles.scss';
+
+import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { Dispatch, SetStateAction, useEffect } from 'react';
+import { ILog } from 'types/api/logs/log';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+function QueryBuilderSearchWrapper({
+	log,
+	filters,
+	contextQuery,
+	isEdit,
+	suffixIcon,
+	setFilters,
+	setContextQuery,
+}: QueryBuilderSearchWraperProps): JSX.Element {
+	const initialContextQuery = useInitialQuery(log);
+
+	useEffect(() => {
+		setContextQuery(initialContextQuery);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const handleSearch = (tagFilters: TagFilter): void => {
+		const tagFiltersLength = tagFilters.items.length;
+
+		if (
+			(!tagFiltersLength && (!filters || !filters.items.length)) ||
+			tagFiltersLength === filters?.items.length ||
+			!contextQuery
+		)
+			return;
+
+		const nextQuery: Query = {
+			...contextQuery,
+			builder: {
+				...contextQuery.builder,
+				queryData: contextQuery.builder.queryData.map((item) => ({
+					...item,
+					filters: tagFilters,
+				})),
+			},
+		};
+
+		setFilters({ ...tagFilters });
+		setContextQuery({ ...nextQuery });
+	};
+
+	// eslint-disable-next-line react/jsx-no-useless-fragment
+	if (!contextQuery || !isEdit) return <></>;
+
+	return (
+		<QueryBuilderSearch
+			query={contextQuery?.builder.queryData[0]}
+			onChange={handleSearch}
+			className="query-builder-search-wrapper"
+			suffixIcon={suffixIcon}
+		/>
+	);
+}
+
+interface QueryBuilderSearchWraperProps {
+	log: ILog;
+	isEdit: boolean;
+	contextQuery: Query | undefined;
+	setContextQuery: Dispatch<SetStateAction<Query | undefined>>;
+	filters: TagFilter | null;
+	setFilters: Dispatch<SetStateAction<TagFilter | null>>;
+	suffixIcon?: React.ReactNode;
+}
+
+QueryBuilderSearchWrapper.defaultProps = {
+	suffixIcon: undefined,
+};
+
+export default QueryBuilderSearchWrapper;

frontend/src/components/LogDetail/constants.ts

@@ -0,0 +1,7 @@
+export const VIEW_TYPES = {
+	OVERVIEW: 'OVERVIEW',
+	JSON: 'JSON',
+	CONTEXT: 'CONTEXT',
+} as const;
+
+export type VIEWS = typeof VIEW_TYPES[keyof typeof VIEW_TYPES];

frontend/src/components/LogDetail/index.tsx

@@ -1,50 +1,207 @@
-import { Drawer, Tabs } from 'antd';
-import JSONView from 'container/LogDetailedView/JsonView';
-import TableView from 'container/LogDetailedView/TableView';
-import { useMemo } from 'react';
+/* eslint-disable sonarjs/cognitive-complexity */
+import './LogDetails.styles.scss';
 
+import { Color, Spacing } from '@signozhq/design-tokens';
+import { Button, Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import cx from 'classnames';
+import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
+import ContextView from 'container/LogDetailedView/ContextView/ContextView';
+import JSONView from 'container/LogDetailedView/JsonView';
+import Overview from 'container/LogDetailedView/Overview';
+import { aggregateAttributesResourcesToString } from 'container/LogDetailedView/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useNotifications } from 'hooks/useNotifications';
+import {
+	Braces,
+	Copy,
+	Filter,
+	HardHat,
+	Table,
+	TextSelect,
+	X,
+} from 'lucide-react';
+import { useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { VIEW_TYPES, VIEWS } from './constants';
 import { LogDetailProps } from './LogDetail.interfaces';
+import QueryBuilderSearchWrapper from './QueryBuilderSearchWrapper';
 
 function LogDetail({
 	log,
 	onClose,
 	onAddToQuery,
 	onClickActionItem,
+	selectedTab,
 }: LogDetailProps): JSX.Element {
-	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],
-	);
+	const [, copyToClipboard] = useCopyToClipboard();
+	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);
+
+	const [isFilterVisibile, setIsFilterVisible] = useState<boolean>(false);
+
+	const [contextQuery, setContextQuery] = useState<Query | undefined>();
+	const [filters, setFilters] = useState<TagFilter | null>(null);
+	const [isEdit, setIsEdit] = useState<boolean>(false);
+
+	const isDarkMode = useIsDarkMode();
+
+	const { notifications } = useNotifications();
+
+	const LogJsonData = log ? aggregateAttributesResourcesToString(log) : '';
+
+	const handleModeChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
+		setIsEdit(false);
+		setIsFilterVisible(false);
+	};
+
+	const handleFilterVisible = (): void => {
+		setIsFilterVisible(!isFilterVisibile);
+		setIsEdit(!isEdit);
+	};
+
+	const drawerCloseHandler = (
+		e: React.MouseEvent | React.KeyboardEvent,
+	): void => {
+		if (onClose) {
+			onClose(e);
+		}
+	};
+
+	const handleJSONCopy = (): void => {
+		copyToClipboard(LogJsonData);
+		notifications.success({
+			message: 'Copied to clipboard',
+		});
+	};
+
+	if (!log) {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	const logType = log?.attributes_string?.log_level || LogType.INFO;
 
 	return (
 		<Drawer
 			width="60%"
-			title="Log Details"
+			title={
+				<>
+					<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
+					<Typography.Text className="title">Log details</Typography.Text>
+				</>
+			}
 			placement="right"
-			closable
-			onClose={onClose}
+			// closable
+			onClose={drawerCloseHandler}
 			open={log !== null}
-			style={{ overscrollBehavior: 'contain' }}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="log-detail-drawer"
 			destroyOnClose
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<Tabs defaultActiveKey="1" items={items} />
+			<div className="log-detail-drawer__log">
+				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+				<Tooltip title={log?.body} placement="left">
+					<Typography.Text className="log-body">{log?.body}</Typography.Text>
+				</Tooltip>
+
+				<div className="log-overflow-shadow">&nbsp;</div>
+			</div>
+
+			<div className="tabs-and-search">
+				<Radio.Group
+					className="views-tabs"
+					onChange={handleModeChange}
+					value={selectedView}
+				>
+					<Radio.Button
+						className={
+							// eslint-disable-next-line sonarjs/no-duplicate-string
+							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.OVERVIEW}
+					>
+						<div className="view-title">
+							<Table size={14} />
+							Overview
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
+						value={VIEW_TYPES.JSON}
+					>
+						<div className="view-title">
+							<Braces size={14} />
+							JSON
+						</div>
+					</Radio.Button>
+					<Radio.Button
+						className={
+							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+						}
+						value={VIEW_TYPES.CONTEXT}
+					>
+						<div className="view-title">
+							<TextSelect size={14} />
+							Context
+						</div>
+					</Radio.Button>
+				</Radio.Group>
+
+				{selectedView === VIEW_TYPES.JSON && (
+					<div className="json-action-btn">
+						<Button
+							className="action-btn"
+							icon={<Copy size={16} />}
+							onClick={handleJSONCopy}
+						/>
+					</div>
+				)}
+
+				{selectedView === VIEW_TYPES.CONTEXT && (
+					<Button
+						className="action-btn"
+						icon={<Filter size={16} />}
+						onClick={handleFilterVisible}
+					/>
+				)}
+			</div>
+
+			<QueryBuilderSearchWrapper
+				isEdit={isEdit}
+				log={log}
+				filters={filters}
+				setContextQuery={setContextQuery}
+				setFilters={setFilters}
+				contextQuery={contextQuery}
+				suffixIcon={
+					<HardHat size={12} style={{ paddingRight: Spacing.PADDING_2 }} />
+				}
+			/>
+
+			{selectedView === VIEW_TYPES.OVERVIEW && (
+				<Overview
+					logData={log}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onClickActionItem}
+				/>
+			)}
+			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+
+			{selectedView === VIEW_TYPES.CONTEXT && (
+				<ContextView
+					log={log}
+					filters={filters}
+					contextQuery={contextQuery}
+					isEdit={isEdit}
+				/>
+			)}
 		</Drawer>
 	);
 }

frontend/src/components/Logs/AddToQueryHOC.styles.scss

@@ -0,0 +1,3 @@
+.addToQueryContainer {
+	cursor: pointer;
+}

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,9 +1,9 @@
+import './AddToQueryHOC.styles.scss';
+
 import { Popover } from 'antd';
 import { OPERATORS } from 'constants/queryBuilder';
 import { memo, ReactNode, useCallback, useMemo } from 'react';
 
-import { ButtonContainer } from './styles';
-
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,
@@ -19,11 +19,12 @@ function AddToQueryHOC({
 	]);
 
 	return (
-		<ButtonContainer size="small" type="text" onClick={handleQueryAdd}>
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div className="addToQueryContainer" onClick={handleQueryAdd}>
 			<Popover placement="top" content={popOverContent}>
 				{children}
 			</Popover>
-		</ButtonContainer>
+		</div>
 	);
 }
 

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

@@ -0,0 +1,103 @@
+.log-field-key {
+	padding-right: 5px;
+	color: var(--text-vanilla-400, #c0c1c3);
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+}
+.log-value {
+	color: var(--text-vanilla-400, #c0c1c3);
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+}
+.log-line {
+	display: flex;
+	overflow: hidden;
+	.log-state-indicator {
+		padding-left: 0;
+	}
+	transition: background-color 0.2s ease-in;
+	&:hover {
+		background-color: rgba(171, 189, 255, 0.04) !important;
+	}
+}
+
+.log-selected-fields {
+	display: flex;
+	width: 100%;
+	overflow: hidden;
+	align-items: center;
+
+	.selected-log-field-key {
+		color: var(--bg-robin-400) !important;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: -0.07px;
+	}
+
+	.selected-log-value {
+		color: var(--bg-sienna-500);
+		border-radius: 2px;
+		background: rgba(173, 127, 88, 0.08);
+		padding: 0px 2px;
+		margin-left: 7px;
+		font-weight: 400;
+		line-height: 18px;
+		letter-spacing: -0.07px;
+		font-size: 14px;
+	}
+
+	.selected-log-kv {
+		min-height: 24px;
+		display: flex;
+		align-items: center;
+	}
+}
+
+.log-action-buttons {
+	position: absolute;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	right: 0;
+	cursor: pointer;
+	height: 32px;
+	width: 68px;
+	border-radius: 2px;
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	background: var(--bg-ink-400, #121317);
+	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+	.context-btn {
+		width: 50% !important;
+	}
+	.copy-link-btn {
+		width: 50% !important;
+		border-left: 1px solid var(--bg-slate-400, #1d212d) !important;
+	}
+
+	.ant-btn-default {
+		border: none;
+		box-shadow: none;
+	}
+}
+
+.lightMode {
+	.log-field-key {
+		color: var(--text-slate-400);
+	}
+	.log-value {
+		color: var(--text-slate-400);
+	}
+	.log-line {
+		&:hover {
+			background-color: var(--text-vanilla-200) !important;
+		}
+	}
+}

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

@@ -1,35 +1,32 @@
-import { blue, grey, orange } from '@ant-design/colors';
-import {
-	CopyFilled,
-	ExpandAltOutlined,
-	LinkOutlined,
-	MonitorOutlined,
-} from '@ant-design/icons';
+import './ListLogView.styles.scss';
+
+import { blue } from '@ant-design/colors';
 import Convert from 'ansi-to-html';
-import { Button, Divider, Row, Typography } from 'antd';
-import LogsExplorerContext from 'container/LogsExplorerContext';
+import { Typography } from 'antd';
+import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
-import { useNotifications } from 'hooks/useNotifications';
 // utils
 import { FlatLogData } from 'lib/logs/flatLogData';
-import { useCallback, useMemo } from 'react';
-import { useCopyToClipboard } from 'react-use';
+import { useCallback, useMemo, useState } from 'react';
 // interfaces
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
 // components
 import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
-import CopyClipboardHOC from '../CopyClipboardHOC';
+import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
+import LogStateIndicator, {
+	LogType,
+} from '../LogStateIndicator/LogStateIndicator';
 // styles
 import {
 	Container,
 	LogContainer,
 	LogText,
-	SelectedLog,
 	Text,
 	TextContainer,
 } from './styles';
@@ -55,12 +52,10 @@ function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
 
 	return (
 		<TextContainer>
-			<Text ellipsis type="secondary">
-				{`${fieldKey}: `}
+			<Text ellipsis type="secondary" className="log-field-key">
+				{`${fieldKey} : `}
 			</Text>
-			<CopyClipboardHOC textToCopy={fieldValue}>
-				<LogText dangerouslySetInnerHTML={html} />
-			</CopyClipboardHOC>
+			<LogText dangerouslySetInnerHTML={html} className="log-value" />
 		</TextContainer>
 	);
 }
@@ -71,23 +66,23 @@ function LogSelectedField({
 	onAddToQuery,
 }: LogSelectedFieldProps): JSX.Element {
 	return (
-		<SelectedLog>
+		<div className="log-selected-fields">
 			<AddToQueryHOC
 				fieldKey={fieldKey}
 				fieldValue={fieldValue}
 				onAddToQuery={onAddToQuery}
 			>
 				<Typography.Text>
-					<span style={{ color: blue[4] }}>{fieldKey}</span>
+					<span style={{ color: blue[4] }} className="selected-log-field-key">
+						{fieldKey}
+					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<CopyClipboardHOC textToCopy={fieldValue}>
-				<Typography.Text ellipsis>
-					<span>{': '}</span>
-					<span style={{ color: orange[6] }}>{fieldValue || "''"}</span>
-				</Typography.Text>
-			</CopyClipboardHOC>
-		</SelectedLog>
+			<Typography.Text ellipsis className="selected-log-kv">
+				<span className="selected-log-field-key">{': '}</span>
+				<span className="selected-log-value">{fieldValue || "''"}</span>
+			</Typography.Text>
+		</div>
 	);
 }
 
@@ -96,6 +91,7 @@ type ListLogViewProps = {
 	selectedFields: IField[];
 	onSetActiveLog: (log: ILog) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
+	activeLog?: ILog | null;
 };
 
 function ListLogView({
@@ -103,34 +99,42 @@ function ListLogView({
 	selectedFields,
 	onSetActiveLog,
 	onAddToQuery,
+	activeLog,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
-	const [, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
+	const [hasActionButtons, setHasActionButtons] = useState<boolean>(false);
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		logData.id,
 	);
 	const {
 		activeLog: activeContextLog,
+		onAddToQuery: handleAddToQuery,
 		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
 	} = useActiveLog();
 
+	const handlerClearActiveContextLog = useCallback(
+		(event: React.MouseEvent | React.KeyboardEvent) => {
+			event.preventDefault();
+			event.stopPropagation();
+			handleClearActiveContextLog();
+		},
+		[handleClearActiveContextLog],
+	);
+
 	const handleDetailedView = useCallback(() => {
 		onSetActiveLog(logData);
 	}, [logData, onSetActiveLog]);
 
-	const handleShowContext = useCallback(() => {
-		handleSetActiveContextLog(logData);
-	}, [logData, handleSetActiveContextLog]);
-
-	const handleCopyJSON = (): void => {
-		setCopy(JSON.stringify(logData, null, 2));
-		notifications.success({
-			message: 'Copied to clipboard',
-		});
-	};
+	const handleShowContext = useCallback(
+		(event: React.MouseEvent) => {
+			event.preventDefault();
+			event.stopPropagation();
+			handleSetActiveContextLog(logData);
+		},
+		[logData, handleSetActiveContextLog],
+	);
 
 	const updatedSelecedFields = useMemo(
 		() => selectedFields.filter((e) => e.name !== 'id'),
@@ -145,84 +149,74 @@ function ListLogView({
 		[flattenLogData.timestamp],
 	);
 
+	const logType = logData?.attributes_string?.log_level || LogType.INFO;
+
+	const handleMouseEnter = (): void => {
+		setHasActionButtons(true);
+	};
+
+	const handleMouseLeave = (): void => {
+		setHasActionButtons(false);
+	};
+
 	return (
-		<Container $isActiveLog={isHighlighted}>
-			<div>
-				<LogContainer>
-					<>
-						<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
-						{flattenLogData.stream && (
-							<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
-						)}
-						<LogGeneralField fieldKey="timestamp" fieldValue={timestampValue} />
-					</>
-				</LogContainer>
-				<div>
-					{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,
-					)}
+		<>
+			<Container
+				$isActiveLog={isHighlighted}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				onClick={handleDetailedView}
+			>
+				<div className="log-line">
+					<LogStateIndicator
+						type={logType}
+						isActive={
+							activeLog?.id === logData.id || activeContextLog?.id === logData.id
+						}
+					/>
+					<div>
+						<LogContainer>
+							<LogGeneralField fieldKey="Log" fieldValue={flattenLogData.body} />
+							{flattenLogData.stream && (
+								<LogGeneralField fieldKey="Stream" fieldValue={flattenLogData.stream} />
+							)}
+							<LogGeneralField fieldKey="Timestamp" fieldValue={timestampValue} />
+
+							{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,
+							)}
+						</LogContainer>
+					</div>
 				</div>
-			</div>
-			<Divider style={{ padding: 0, margin: '0.4rem 0', opacity: 0.5 }} />
-			<Row>
-				<Button
-					size="small"
-					type="text"
-					onClick={handleDetailedView}
-					style={{ color: blue[5] }}
-					icon={<ExpandAltOutlined />}
-				>
-					View Details
-				</Button>
-				<Button
-					size="small"
-					type="text"
-					onClick={handleCopyJSON}
-					style={{ color: grey[1] }}
-					icon={<CopyFilled />}
-				>
-					Copy JSON
-				</Button>
 
-				{isLogsExplorerPage && (
-					<>
-						<Button
-							size="small"
-							type="text"
-							onClick={handleShowContext}
-							style={{ color: grey[1] }}
-							icon={<MonitorOutlined />}
-						>
-							Show in Context
-						</Button>
-						<Button
-							size="small"
-							type="text"
-							onClick={onLogCopy}
-							style={{ color: grey[1] }}
-							icon={<LinkOutlined />}
-						>
-							Copy Link
-						</Button>
-					</>
-				)}
-
-				{activeContextLog && (
-					<LogsExplorerContext
-						log={activeContextLog}
-						onClose={handleClearActiveContextLog}
+				{hasActionButtons && isLogsExplorerPage && (
+					<LogLinesActionButtons
+						handleShowContext={handleShowContext}
+						onLogCopy={onLogCopy}
 					/>
 				)}
-			</Row>
-		</Container>
+			</Container>
+			{activeContextLog && (
+				<LogDetail
+					log={activeContextLog}
+					onAddToQuery={handleAddToQuery}
+					selectedTab={VIEW_TYPES.CONTEXT}
+					onClose={handlerClearActiveContextLog}
+				/>
+			)}
+		</>
 	);
 }
 
+ListLogView.defaultProps = {
+	activeLog: null,
+};
+
 export default ListLogView;

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

@@ -7,6 +7,7 @@ export const Container = styled(Card)<{
 }>`
 	width: 100% !important;
 	margin-bottom: 0.3rem;
+	cursor: pointer;
 	.ant-card-body {
 		padding: 0.3rem 0.6rem;
 	}
@@ -29,11 +30,13 @@ export const TextContainer = styled.div`
 
 export const LogContainer = styled.div`
 	margin-left: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
 `;
 
 export const LogText = styled.div`
 	display: inline-block;
-
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -0,0 +1,44 @@
+.log-line-action-buttons {
+	display: flex;
+	position: absolute;
+	transform: translate(-50%, -50%);
+	top: 50%;
+	right: 0;
+	cursor: pointer;
+	border-radius: 2px;
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-400);
+
+	.ant-btn-default {
+		border: none;
+		box-shadow: none;
+		padding: 9px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+
+		&.active-tab {
+			background-color: var(--bg-slate-400);
+		}
+	}
+
+	.copy-log-btn {
+		border-left: 1px solid var(--bg-slate-400);
+		border-color: var(--bg-slate-400) !important;
+	}
+}
+
+.lightMode {
+	.log-line-action-buttons {
+		border: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-400);
+
+		.ant-btn-default {
+		}
+
+		.copy-log-btn {
+			border-left: 1px solid var(--bg-vanilla-400);
+			border-color: var(--bg-vanilla-400) !important;
+		}
+	}
+}

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -0,0 +1,42 @@
+import './LogLinesActionButtons.styles.scss';
+
+import { LinkOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
+import { TextSelect } from 'lucide-react';
+import { MouseEventHandler } from 'react';
+
+export interface LogLinesActionButtonsProps {
+	handleShowContext: MouseEventHandler<HTMLElement>;
+	onLogCopy: MouseEventHandler<HTMLElement>;
+	customClassName?: string;
+}
+export default function LogLinesActionButtons({
+	handleShowContext,
+	onLogCopy,
+	customClassName = '',
+}: LogLinesActionButtonsProps): JSX.Element {
+	return (
+		<div className={`log-line-action-buttons ${customClassName}`}>
+			<Tooltip title="Show in Context">
+				<Button
+					size="small"
+					icon={<TextSelect size={14} />}
+					className="show-context-btn"
+					onClick={handleShowContext}
+				/>
+			</Tooltip>
+			<Tooltip title="Copy Link">
+				<Button
+					size="small"
+					icon={<LinkOutlined size={14} />}
+					onClick={onLogCopy}
+					className="copy-log-btn"
+				/>
+			</Tooltip>
+		</div>
+	);
+}
+
+LogLinesActionButtons.defaultProps = {
+	customClassName: '',
+};

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -0,0 +1,30 @@
+.log-state-indicator {
+	padding-left: 8px;
+
+	.line {
+		margin: 0 8px;
+		min-height: 24px;
+		height: 100%;
+		width: 3px;
+		border-radius: 50px;
+		background-color: transparent;
+
+		&.INFO {
+			background-color: #1d212d;
+		}
+
+		&.WARNING {
+			background-color: #ffcd56;
+		}
+
+		&.ERROR {
+			background-color: #e5484d;
+		}
+	}
+
+	&.isActive {
+		.line {
+			background-color: var(--bg-robin-400, #7190f9);
+		}
+	}
+}

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx

@@ -0,0 +1,28 @@
+import './LogStateIndicator.styles.scss';
+
+import cx from 'classnames';
+
+export const LogType = {
+	INFO: 'INFO',
+	WARNING: 'WARNING',
+	ERROR: 'ERROR',
+};
+function LogStateIndicator({
+	type,
+	isActive,
+}: {
+	type: string;
+	isActive?: boolean;
+}): JSX.Element {
+	return (
+		<div className={cx('log-state-indicator', isActive ? 'isActive' : '')}>
+			<div className={cx('line', type)}> </div>
+		</div>
+	);
+}
+
+LogStateIndicator.defaultProps = {
+	isActive: false,
+};
+
+export default LogStateIndicator;

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

@@ -1,11 +1,9 @@
-import {
-	ExpandAltOutlined,
-	LinkOutlined,
-	MonitorOutlined,
-} from '@ant-design/icons';
+import './RawLogView.styles.scss';
+
 import Convert from 'ansi-to-html';
-import { Button, DrawerProps, Tooltip } from 'antd';
+import { DrawerProps } from 'antd';
 import LogDetail from 'components/LogDetail';
+import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
 import LogsExplorerContext from 'container/LogsExplorerContext';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
@@ -13,6 +11,8 @@ import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { isEmpty, isNumber, isUndefined } from 'lodash-es';
 import {
 	KeyboardEvent,
 	MouseEvent,
@@ -22,13 +22,12 @@ import {
 	useState,
 } from 'react';
 
+import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
+import LogStateIndicator, {
+	LogType,
+} from '../LogStateIndicator/LogStateIndicator';
 // styles
-import {
-	ActionButtonsWrapper,
-	ExpandIconWrapper,
-	RawLogContent,
-	RawLogViewContainer,
-} from './styles';
+import { RawLogContent, RawLogViewContainer } from './styles';
 import { RawLogViewProps } from './types';
 
 const convert = new Convert();
@@ -39,13 +38,15 @@ function RawLogView({
 	data,
 	linesPerRow,
 	isTextOverflowEllipsisDisabled,
+	selectedFields = [],
 }: RawLogViewProps): JSX.Element {
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
 	);
+	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
+
 	const {
 		activeLog: activeContextLog,
-		onSetActiveLog: handleSetActiveContextLog,
 		onClearActiveLog: handleClearActiveContextLog,
 	} = useActiveLog();
 	const {
@@ -56,24 +57,54 @@ function RawLogView({
 	} = useActiveLog();
 
 	const [hasActionButtons, setHasActionButtons] = useState<boolean>(false);
+	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
 
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
 	const severityText = data.severity_text ? `${data.severity_text} |` : '';
 
+	const logType = data?.attributes_string?.log_level || LogType.INFO;
+
+	const updatedSelecedFields = useMemo(
+		() => selectedFields.filter((e) => e.name !== 'id'),
+		[selectedFields],
+	);
+
+	const attributesValues = updatedSelecedFields
+		.map((field) => flattenLogData[field.name])
+		.filter((attribute) => {
+			// loadash isEmpty doesnot work with numbers
+			if (isNumber(attribute)) {
+				return true;
+			}
+
+			return !isUndefined(attribute) && !isEmpty(attribute);
+		});
+
+	let attributesText = attributesValues.join(' | ');
+
+	if (attributesText.length > 0) {
+		attributesText += ' | ';
+	}
+
 	const text = useMemo(
 		() =>
 			typeof data.timestamp === 'string'
-				? `${dayjs(data.timestamp).format()} | ${severityText} ${data.body}`
-				: `${dayjs(data.timestamp / 1e6).format()} | ${severityText} ${data.body}`,
-		[data.timestamp, data.body, severityText],
+				? `${dayjs(data.timestamp).format()} | ${attributesText} ${severityText} ${
+						data.body
+				  }`
+				: `${dayjs(
+						data.timestamp / 1e6,
+				  ).format()} | ${attributesText} ${severityText} ${data.body}`,
+		[data.timestamp, data.body, severityText, attributesText],
 	);
 
 	const handleClickExpand = useCallback(() => {
 		if (activeContextLog || isReadOnly) return;
 
 		onSetActiveLog(data);
+		setSelectedTab(VIEW_TYPES.OVERVIEW);
 	}, [activeContextLog, isReadOnly, data, onSetActiveLog]);
 
 	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
@@ -84,6 +115,7 @@ function RawLogView({
 			event.stopPropagation();
 
 			onClearActiveLog();
+			setSelectedTab(undefined);
 		},
 		[onClearActiveLog],
 	);
@@ -104,9 +136,11 @@ function RawLogView({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			handleSetActiveContextLog(data);
+			// handleSetActiveContextLog(data);
+			setSelectedTab(VIEW_TYPES.CONTEXT);
+			onSetActiveLog(data);
 		},
-		[data, handleSetActiveContextLog],
+		[data, onSetActiveLog],
 	);
 
 	const html = useMemo(
@@ -123,37 +157,30 @@ function RawLogView({
 			align="middle"
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
-			$isActiveLog={isHighlighted}
+			$isHightlightedLog={isHighlighted}
+			$isActiveLog={isActiveLog}
 			onMouseEnter={handleMouseEnter}
 			onMouseLeave={handleMouseLeave}
 		>
-			{!isReadOnly && (
-				<ExpandIconWrapper flex="30px">
-					<ExpandAltOutlined />
-				</ExpandIconWrapper>
-			)}
+			<LogStateIndicator
+				type={logType}
+				isActive={activeLog?.id === data.id || activeContextLog?.id === data.id}
+			/>
 
 			<RawLogContent
 				$isReadOnly={isReadOnly}
 				$isActiveLog={isActiveLog}
+				$isDarkMode={isDarkMode}
 				$isTextOverflowEllipsisDisabled={isTextOverflowEllipsisDisabled}
 				linesPerRow={linesPerRow}
 				dangerouslySetInnerHTML={html}
 			/>
 
 			{hasActionButtons && (
-				<ActionButtonsWrapper>
-					<Tooltip title="Show Context">
-						<Button
-							size="small"
-							icon={<MonitorOutlined />}
-							onClick={handleShowContext}
-						/>
-					</Tooltip>
-					<Tooltip title="Copy Link">
-						<Button size="small" icon={<LinkOutlined />} onClick={onLogCopy} />
-					</Tooltip>
-				</ActionButtonsWrapper>
+				<LogLinesActionButtons
+					handleShowContext={handleShowContext}
+					onLogCopy={onLogCopy}
+				/>
 			)}
 
 			{activeContextLog && (
@@ -162,12 +189,15 @@ function RawLogView({
 					onClose={handleClearActiveContextLog}
 				/>
 			)}
-			<LogDetail
-				log={activeLog}
-				onClose={handleCloseLogDetail}
-				onAddToQuery={onAddToQuery}
-				onClickActionItem={onAddToQuery}
-			/>
+			{selectedTab && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+				/>
+			)}
 		</RawLogViewContainer>
 	);
 }

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

@@ -1,4 +1,5 @@
 import { blue } from '@ant-design/colors';
+import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
 import styled from 'styled-components';
 import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
@@ -9,20 +10,25 @@ export const RawLogViewContainer = styled(Row)<{
 	$isDarkMode: boolean;
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
+	$isHightlightedLog: boolean;
 }>`
 	position: relative;
 	width: 100%;
-	font-weight: 700;
-	font-size: 0.625rem;
-	line-height: 1.25rem;
+
+	display: flex;
+	align-items: stretch;
 
 	transition: background-color 0.2s ease-in;
 
+	.log-state-indicator {
+		margin: 4px 0;
+	}
+
 	${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
 
-	${({ $isReadOnly, $isDarkMode, $isActiveLog }): string =>
+	${({ $isReadOnly, $isActiveLog, $isDarkMode }): string =>
 		$isActiveLog
-			? getActiveLogBackground()
+			? getActiveLogBackground($isActiveLog, $isDarkMode)
 			: getDefaultLogBackground($isReadOnly, $isDarkMode)}
 `;
 
@@ -30,13 +36,17 @@ export const ExpandIconWrapper = styled(Col)`
 	color: ${blue[6]};
 	padding: 0.25rem 0.375rem;
 	cursor: pointer;
-	font-size: 12px;
 `;
 
 export const RawLogContent = styled.div<RawLogContentProps>`
 	margin-bottom: 0;
-	font-family: Fira Code, monospace;
-	font-weight: 300;
+	font-family: 'SF Mono', monospace;
+	font-family: 'Space Mono', monospace;
+	font-size: 13px;
+	font-weight: 400;
+	text-align: left;
+	color: ${({ $isDarkMode }): string =>
+		$isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400};
 
 	${({ $isTextOverflowEllipsisDisabled, linesPerRow }): string =>
 		$isTextOverflowEllipsisDisabled
@@ -48,14 +58,12 @@ export const RawLogContent = styled.div<RawLogContentProps>`
 		line-clamp: ${linesPerRow}; 
 		-webkit-box-orient: vertical;`};
 
-	font-size: 1rem;
-	line-height: 2rem;
+	line-height: 24px;
+	letter-spacing: -0.07px;
+	padding: 4px;
 
 	cursor: ${({ $isActiveLog, $isReadOnly }): string =>
 		$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
-
-	${({ $isActiveLog, $isReadOnly }): string =>
-		$isReadOnly && $isActiveLog ? 'padding: 0 1.5rem;' : ''}
 `;
 
 export const ActionButtonsWrapper = styled(Space)`

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

@@ -1,3 +1,4 @@
+import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
 export interface RawLogViewProps {
@@ -6,11 +7,13 @@ export interface RawLogViewProps {
 	isTextOverflowEllipsisDisabled?: boolean;
 	data: ILog;
 	linesPerRow: number;
+	selectedFields?: IField[];
 }
 
 export interface RawLogContentProps {
 	linesPerRow: number;
 	$isReadOnly?: boolean;
 	$isActiveLog?: boolean;
+	$isDarkMode?: boolean;
 	$isTextOverflowEllipsisDisabled?: boolean;
 }

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

@@ -1,12 +1,21 @@
 import { TableProps } from 'antd';
 import { CSSProperties } from 'react';
 
-export const defaultCellStyle: CSSProperties = {
-	paddingTop: 4,
-	paddingBottom: 6,
-	paddingRight: 8,
-	paddingLeft: 8,
-};
+export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
+	return {
+		paddingTop: 4,
+		paddingBottom: 6,
+		paddingRight: 8,
+		paddingLeft: 8,
+		color: isDarkMode ? 'var(--bg-vanilla-400)' : 'var(--bg-slate-400)',
+		fontSize: '14px',
+		fontStyle: 'normal',
+		fontWeight: 400,
+		lineHeight: '18px',
+		letterSpacing: '-0.07px',
+		marginBottom: '0px',
+	};
+}
 
 export const defaultTableStyle: CSSProperties = {
 	minWidth: '40rem',

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

@@ -2,18 +2,22 @@ import styled from 'styled-components';
 
 interface TableBodyContentProps {
 	linesPerRow: number;
+	isDarkMode?: boolean;
 }
 
 export const TableBodyContent = styled.div<TableBodyContentProps>`
 	margin-bottom: 0;
+	color: ${(props): string =>
+		props.isDarkMode ? 'var(--bg-vanilla-400, #c0c1c3)' : 'var(--bg-slate-400)'};
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: -webkit-box;
 	-webkit-line-clamp: ${(props): number => props.linesPerRow};
 	line-clamp: ${(props): number => props.linesPerRow};
 	-webkit-box-orient: vertical;
-
-	font-size: 0.875rem;
-
-	line-height: 2rem;
 `;

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

@@ -22,6 +22,8 @@ export type UseTableViewProps = {
 	appendTo?: 'center' | 'end';
 	onOpenLogsContext?: (log: ILog) => void;
 	onClickExpand?: (log: ILog) => void;
+	activeLog?: ILog | null;
+	activeContextLog?: ILog | null;
 } & LogsTableViewProps;
 
 export type ActionsColumnProps = {

frontend/src/components/Logs/TableView/useTableView.styles.scss

@@ -0,0 +1,27 @@
+.text {
+	color: var(--bg-vanilla-400);
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+}
+
+.table-timestamp {
+	display: flex;
+	align-items: center;
+
+	.ant-typography {
+		margin-bottom: 0;
+	}
+
+	.log-state-indicator {
+		padding: 0px;
+	}
+}
+
+.lightMode {
+	.text {
+		color: var(--bg-slate-400);
+	}
+}

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

@@ -1,22 +1,21 @@
-import {
-	ExpandAltOutlined,
-	LinkOutlined,
-	MonitorOutlined,
-} from '@ant-design/icons';
+import './useTableView.styles.scss';
+
 import Convert from 'ansi-to-html';
-import { Button, Space, Typography } from 'antd';
+import { Typography } from 'antd';
 import { ColumnsType } from 'antd/es/table';
 import dayjs from 'dayjs';
 import dompurify from 'dompurify';
-import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 import { FlatLogData } from 'lib/logs/flatLogData';
-import { useCallback, useMemo } from 'react';
+import { defaultTo } from 'lodash-es';
+import { useMemo } from 'react';
 
-import { ExpandIconWrapper } from '../RawLogView/styles';
-import { defaultCellStyle, defaultTableStyle } from './config';
+import LogStateIndicator, {
+	LogType,
+} from '../LogStateIndicator/LogStateIndicator';
+import { defaultTableStyle, getDefaultCellStyle } from './config';
 import { TableBodyContent } from './styles';
 import {
-	ActionsColumnProps,
 	ColumnTypeRender,
 	UseTableViewProps,
 	UseTableViewResult,
@@ -24,60 +23,22 @@ import {
 
 const convert = new Convert();
 
-function ActionsColumn({
-	logId,
-	logs,
-	onOpenLogsContext,
-}: ActionsColumnProps): JSX.Element {
-	const currentLog = useMemo(() => logs.find(({ id }) => id === logId), [
-		logs,
-		logId,
-	]);
-
-	const { onLogCopy } = useCopyLogLink(currentLog?.id);
-
-	const handleShowContext = useCallback(() => {
-		if (!onOpenLogsContext || !currentLog) return;
-
-		onOpenLogsContext(currentLog);
-	}, [currentLog, onOpenLogsContext]);
-
-	return (
-		<Space>
-			<Button
-				size="small"
-				onClick={handleShowContext}
-				icon={<MonitorOutlined />}
-			/>
-			<Button size="small" onClick={onLogCopy} icon={<LinkOutlined />} />
-		</Space>
-	);
-}
-
 export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 	const {
 		logs,
 		fields,
 		linesPerRow,
 		appendTo = 'center',
-		onOpenLogsContext,
-		onClickExpand,
+		activeContextLog,
+		activeLog,
 	} = props;
-	const { isLogsExplorerPage } = useCopyLogLink();
+
+	const isDarkMode = useIsDarkMode();
 
 	const flattenLogData = useMemo(() => logs.map((log) => FlatLogData(log)), [
 		logs,
 	]);
 
-	const handleClickExpand = useCallback(
-		(index: number): void => {
-			if (!onClickExpand) return;
-
-			onClickExpand(logs[index]);
-		},
-		[logs, onClickExpand],
-	);
-
 	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
 		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
 			.filter((e) => e.name !== 'id')
@@ -87,7 +48,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 				key: name,
 				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
 					props: {
-						style: defaultCellStyle,
+						style: getDefaultCellStyle(isDarkMode),
 					},
 					children: (
 						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
@@ -98,38 +59,30 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 			}));
 
 		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 => {
-								handleClickExpand(index);
-							}}
-						>
-							<ExpandAltOutlined />
-						</ExpandIconWrapper>
-					),
-				}),
-			},
 			{
 				title: 'timestamp',
 				dataIndex: 'timestamp',
 				key: 'timestamp',
 				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (field): ColumnTypeRender<Record<string, unknown>> => {
+				render: (field, item): ColumnTypeRender<Record<string, unknown>> => {
 					const date =
 						typeof field === 'string'
 							? dayjs(field).format()
 							: dayjs(field / 1e6).format();
 					return {
-						children: <Typography.Paragraph ellipsis>{date}</Typography.Paragraph>,
+						children: (
+							<div className="table-timestamp">
+								<LogStateIndicator
+									type={defaultTo(item.log_level, LogType.INFO) as string}
+									isActive={
+										activeLog?.id === item.id || activeContextLog?.id === item.id
+									}
+								/>
+								<Typography.Paragraph ellipsis className="text">
+									{date}
+								</Typography.Paragraph>
+							</div>
+						),
 					};
 				},
 			},
@@ -148,38 +101,20 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 								__html: convert.toHtml(dompurify.sanitize(field)),
 							}}
 							linesPerRow={linesPerRow}
+							isDarkMode={isDarkMode}
 						/>
 					),
 				}),
 			},
 			...(appendTo === 'end' ? fieldColumns : []),
-			...(isLogsExplorerPage
-				? ([
-						{
-							title: 'actions',
-							dataIndex: 'actions',
-							key: 'actions',
-							render: (_, log): ColumnTypeRender<Record<string, unknown>> => ({
-								children: (
-									<ActionsColumn
-										logId={(log.id as unknown) as string}
-										logs={logs}
-										onOpenLogsContext={onOpenLogsContext}
-									/>
-								),
-							}),
-						},
-				  ] as ColumnsType<Record<string, unknown>>)
-				: []),
 		];
 	}, [
-		logs,
 		fields,
 		appendTo,
+		isDarkMode,
 		linesPerRow,
-		isLogsExplorerPage,
-		handleClickExpand,
-		onOpenLogsContext,
+		activeLog?.id,
+		activeContextLog?.id,
 	]);
 
 	return { columns, dataSource: flattenLogData };

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss

@@ -0,0 +1,396 @@
+.nested-menu-container {
+	z-index: 2;
+	position: absolute;
+	right: -2px;
+	margin: 6px 0;
+	width: 160px;
+
+	border-radius: 4px;
+
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	background: linear-gradient(
+		139deg,
+		rgba(18, 19, 23, 0.8) 0%,
+		rgba(18, 19, 23, 0.9) 98.68%
+	);
+
+	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(20px);
+
+	.menu-container {
+		padding: 12px;
+
+		.title {
+			font-family: Inter;
+			font-size: 11px;
+			font-weight: 600;
+			line-height: 18px;
+			letter-spacing: 0.08em;
+			text-align: left;
+			color: var(--bg-slate-200, #52575c);
+		}
+
+		.menu-items {
+			display: flex;
+			gap: 8px;
+			flex-direction: column;
+			margin-top: 12px;
+		}
+
+		.item {
+			font-family: Inter;
+			font-size: 13px;
+			font-weight: 400;
+			line-height: 17px;
+			letter-spacing: 0.01em;
+			text-align: left;
+
+			.item-label {
+				display: flex;
+				color: var(--bg-vanilla-400, #c0c1c3);
+				justify-content: space-between;
+				align-items: center;
+			}
+
+			cursor: pointer;
+		}
+	}
+
+	.horizontal-line {
+		height: 1px;
+		background: #1d212d;
+	}
+
+	.max-lines-per-row {
+		padding: 12px;
+
+		.title {
+			color: var(--bg-slate-200, #52575c);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 18px; /* 163.636% */
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+
+			margin-bottom: 12px;
+
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.lucide {
+				color: var(--bg-vanilla-400, #c0c1c3);
+				cursor: pointer;
+			}
+		}
+
+		.max-lines-per-row-input {
+			display: flex;
+
+			.ant-input-number-handler-wrap {
+				display: none;
+			}
+
+			.ant-input-number {
+				min-width: 36px;
+				width: auto;
+				border-right: none;
+				border-left: none;
+				border-top: 1px solid var(--bg-slate-400);
+				border-bottom: 1px solid var(--bg-slate-400);
+				text-align: center;
+				height: 26px;
+				border-radius: 0;
+
+				&:active,
+				&:focus {
+					border: none;
+					box-shadow: none;
+				}
+			}
+
+			.ant-input-number-focused {
+				box-shadow: none !important;
+			}
+
+			.ant-input-number-input-wrap {
+				input {
+					text-align: center;
+					font-size: 13px;
+
+					&:active,
+					&:focus {
+						border: none;
+					}
+				}
+
+				&:active,
+				&:focus {
+					border: none;
+				}
+			}
+
+			.periscope-btn {
+				box-shadow: none;
+				padding: 6px 12px;
+				height: 26px;
+
+				border-radius: 0px 1px 1px 0px;
+				background: var(--bg-ink-300, #16181d);
+			}
+		}
+	}
+
+	.selected-item-content-container {
+		.add-new-column-header {
+			padding: 8px;
+		}
+
+		.title {
+			color: var(--bg-slate-200, #52575c);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 18px; /* 163.636% */
+			letter-spacing: 0.88px;
+			text-transform: uppercase;
+
+			margin-bottom: 12px;
+
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.lucide {
+				color: var(--bg-vanilla-400, #c0c1c3);
+				cursor: pointer;
+			}
+		}
+
+		.horizontal-line {
+			height: 1px;
+			background: #1d212d;
+		}
+
+		.loading-container {
+			margin: 12px 0;
+		}
+
+		.item-content {
+			padding: 12px;
+
+			.column-format,
+			.column-format-new-options {
+				display: flex;
+				gap: 12px;
+				flex-direction: column;
+				margin-top: 12px;
+
+				.column-name {
+					color: var(--bg-vanilla-400, #c0c1c3);
+					font-family: Inter;
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					gap: 8px;
+
+					cursor: pointer;
+
+					.name {
+						flex: 1;
+						overflow: hidden;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+
+						cursor: pointer;
+					}
+
+					.delete-btn {
+						display: none;
+						flex: 0 0 16px;
+						cursor: pointer;
+					}
+
+					&:hover {
+						.delete-btn {
+							display: block;
+						}
+					}
+				}
+
+				overflow-x: hidden;
+
+				&::-webkit-scrollbar {
+					height: 1rem;
+					width: 0.2rem;
+				}
+			}
+
+			.column-format {
+				max-height: 150px;
+				overflow: auto;
+				overflow-x: hidden;
+			}
+
+			.column-format-new-options {
+				max-height: 150px;
+				overflow-y: auto;
+				overflow-x: hidden;
+			}
+
+			.column-divider {
+				margin: 12px 0;
+				border-top: 2px solid var(--bg-slate-400);
+			}
+		}
+	}
+
+	&.active {
+		.nested-menu-container {
+			backdrop-filter: blur(18px);
+
+			.item {
+				.item-label {
+					color: var(--bg-vanilla-400);
+				}
+			}
+		}
+
+		.selected-item-content-container {
+			width: 110%;
+			margin-left: -5%;
+
+			border-radius: 4px;
+			border: 1px solid var(--bg-slate-400);
+			background: linear-gradient(
+				139deg,
+				rgba(18, 19, 23, 0.8) 0%,
+				rgba(18, 19, 23, 0.9) 98.68%
+			);
+
+			box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+			backdrop-filter: blur(20px);
+
+			.column-format {
+				margin-top: 0px;
+			}
+		}
+	}
+}
+
+.lightMode {
+	.nested-menu-container {
+		border: 1px solid var(--bg-vanilla-300);
+		background: linear-gradient(
+			139deg,
+			rgba(255, 255, 255, 0.8) 0%,
+			rgba(255, 255, 255, 0.9) 98.68%
+		);
+
+		box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+
+		.horizontal-line {
+			background: var(--bg-vanilla-300);
+		}
+
+		.item-content {
+			.column-divider {
+				border-top: 2px solid var(--bg-vanilla-300);
+			}
+		}
+
+		.max-lines-per-row {
+			.title {
+				color: var(--bg-ink-200);
+
+				.lucide {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.max-lines-per-row-input {
+				border: 1px solid var(--bg-vanilla-300);
+
+				.periscope-btn {
+					background: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.menu-container {
+			.title {
+				color: var(--bg-ink-200);
+			}
+
+			.item {
+				.item-label {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+
+		.selected-item-content-container {
+			.title {
+				color: var(--bg-ink-200);
+
+				.lucide {
+					color: var(--bg-ink-300);
+				}
+			}
+
+			.horizontal-line {
+				background: var(--bg-vanilla-300);
+			}
+
+			.item-content {
+				.max-lines-per-row-input {
+					border: 1px solid var(--bg-vanilla-300);
+
+					.periscope-btn {
+						background: var(--bg-vanilla-300);
+					}
+				}
+
+				.column-format,
+				.column-format-new-options {
+					.column-name {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		&.active {
+			.nested-menu-container {
+				backdrop-filter: blur(18px);
+
+				.item {
+					.item-label {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+
+			.selected-item-content-container {
+				border: 1px solid var(--bg-vanilla-300);
+				background: linear-gradient(
+					139deg,
+					rgba(255, 255, 255, 0.8) 0%,
+					rgba(255, 255, 255, 0.9) 98.68%
+				);
+
+				box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+			}
+		}
+	}
+}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -0,0 +1,248 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import './LogsFormatOptionsMenu.styles.scss';
+
+import { Divider, Input, InputNumber, Tooltip } from 'antd';
+import cx from 'classnames';
+import { LogViewMode } from 'container/LogsTable';
+import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { Check, Minus, Plus, X } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+
+interface LogsFormatOptionsMenuProps {
+	title: string;
+	items: any;
+	selectedOptionFormat: any;
+	config: OptionsMenuConfig;
+}
+
+export default function LogsFormatOptionsMenu({
+	title,
+	items,
+	selectedOptionFormat,
+	config,
+}: LogsFormatOptionsMenuProps): JSX.Element {
+	const { maxLines, format, addColumn } = config;
+	const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
+	const maxLinesNumber = (maxLines?.value as number) || 1;
+	const [maxLinesPerRow, setMaxLinesPerRow] = useState<number>(maxLinesNumber);
+
+	const [addNewColumn, setAddNewColumn] = useState(false);
+
+	const onChange = useCallback(
+		(key: LogViewMode) => {
+			if (!format) return;
+
+			format.onChange(key);
+		},
+		[format],
+	);
+
+	const handleMenuItemClick = (key: LogViewMode): void => {
+		setSelectedItem(key);
+		onChange(key);
+		setAddNewColumn(false);
+	};
+
+	const incrementMaxLinesPerRow = (): void => {
+		if (maxLinesPerRow < 10) {
+			setMaxLinesPerRow(maxLinesPerRow + 1);
+		}
+	};
+
+	const decrementMaxLinesPerRow = (): void => {
+		if (maxLinesPerRow > 1) {
+			setMaxLinesPerRow(maxLinesPerRow - 1);
+		}
+	};
+
+	const handleSearchValueChange = useDebouncedFn((event): void => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const value = event?.target?.value || '';
+
+		if (addColumn && addColumn?.onSearch) {
+			addColumn?.onSearch(value);
+		}
+	}, 300);
+
+	const handleToggleAddNewColumn = (): void => {
+		setAddNewColumn(!addNewColumn);
+	};
+
+	// console.log('optionsMenuConfig', config);
+
+	const handleLinesPerRowChange = (maxLinesPerRow: number | null): void => {
+		if (
+			maxLinesPerRow &&
+			Number.isInteger(maxLinesNumber) &&
+			maxLinesPerRow > 1
+		) {
+			setMaxLinesPerRow(maxLinesPerRow);
+		}
+	};
+
+	useEffect(() => {
+		if (maxLinesPerRow && config && config.maxLines?.onChange) {
+			config.maxLines.onChange(maxLinesPerRow);
+		}
+	}, [maxLinesPerRow]);
+
+	return (
+		<div
+			className={cx('nested-menu-container', addNewColumn ? 'active' : '')}
+			onClick={(event): void => {
+				// this is to restrict click events to propogate to parent
+				event.stopPropagation();
+			}}
+		>
+			<div className="menu-container">
+				<div className="title"> {title} </div>
+
+				<div className="menu-items">
+					{items.map(
+						(item: any): JSX.Element => (
+							<div
+								className="item"
+								key={item.label}
+								onClick={(): void => handleMenuItemClick(item.key)}
+							>
+								<div className={cx('item-label')}>
+									{item.label}
+
+									{selectedItem === item.key && <Check size={12} />}
+								</div>
+							</div>
+						),
+					)}
+				</div>
+			</div>
+
+			{selectedItem && (
+				<>
+					{selectedItem === 'raw' && (
+						<>
+							<div className="horizontal-line" />
+							<div className="max-lines-per-row">
+								<div className="title"> max lines per row </div>
+								<div className="raw-format max-lines-per-row-input">
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={decrementMaxLinesPerRow}
+									>
+										{' '}
+										<Minus size={12} />{' '}
+									</button>
+									<InputNumber
+										min={1}
+										max={10}
+										value={maxLinesPerRow}
+										onChange={handleLinesPerRowChange}
+									/>
+									<button
+										type="button"
+										className="periscope-btn"
+										onClick={incrementMaxLinesPerRow}
+									>
+										{' '}
+										<Plus size={12} />{' '}
+									</button>
+								</div>
+							</div>
+						</>
+					)}
+
+					<div className="selected-item-content-container active">
+						{!addNewColumn && <div className="horizontal-line" />}
+
+						{addNewColumn && (
+							<div className="add-new-column-header">
+								<div className="title">
+									{' '}
+									columns
+									<X size={14} onClick={handleToggleAddNewColumn} />{' '}
+								</div>
+
+								<Input
+									tabIndex={0}
+									type="text"
+									autoFocus
+									onFocus={addColumn?.onFocus}
+									onChange={handleSearchValueChange}
+									placeholder="Search..."
+								/>
+							</div>
+						)}
+
+						<div className="item-content">
+							{!addNewColumn && (
+								<div className="title">
+									columns
+									<Plus size={14} onClick={handleToggleAddNewColumn} />{' '}
+								</div>
+							)}
+
+							<div className="column-format">
+								{addColumn?.value?.map(({ key, id }) => (
+									<div className="column-name" key={id}>
+										<div className="name">
+											<Tooltip placement="left" title={key}>
+												{key}
+											</Tooltip>
+										</div>
+										<X
+											className="delete-btn"
+											size={14}
+											onClick={(): void => addColumn.onRemove(id as string)}
+										/>
+									</div>
+								))}
+							</div>
+
+							{addColumn?.isFetching && (
+								<div className="loading-container"> Loading ... </div>
+							)}
+
+							{addNewColumn &&
+								addColumn &&
+								addColumn.value.length > 0 &&
+								addColumn.options &&
+								addColumn?.options?.length > 0 && (
+									<Divider className="column-divider" />
+								)}
+
+							{addNewColumn && (
+								<div className="column-format-new-options">
+									{addColumn?.options?.map(({ label, value }) => (
+										<div
+											className="column-name"
+											key={value}
+											onClick={(eve): void => {
+												console.log('coluimn name', label, value);
+
+												eve.stopPropagation();
+
+												if (addColumn && addColumn?.onSelect) {
+													addColumn?.onSelect(value, { label, disabled: false });
+												}
+											}}
+										>
+											<div className="name">
+												<Tooltip placement="left" title={label}>
+													{label}
+												</Tooltip>
+											</div>
+										</div>
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}

frontend/src/components/ReleaseNote/index.tsx

@@ -25,11 +25,12 @@ const allComponentMap: ComponentMapType[] = [
 			if (!path) {
 				return false;
 			}
-			const allowedPaths = [
+			const allowedPaths: string[] = [
 				ROUTES.LIST_ALL_ALERT,
 				ROUTES.APPLICATION,
 				ROUTES.ALL_DASHBOARD,
 			];
+
 			return (
 				userFlags?.ReleaseNote0120Hide !== 'Y' &&
 				allowedPaths.includes(path) &&

frontend/src/components/ResizeTable/DynamicColumnTable.syles.scss

@@ -1,25 +1,31 @@
 .DynamicColumnTable {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
 
-    .dynamicColumnTable-button {
-        align-self: flex-end;
-        margin: 10px 0;
-    }
+	.dynamicColumnTable-button {
+		align-self: flex-end;
+		margin: 10px 0;
+
+		&.filter-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
 }
 
 .dynamicColumnsTable-items {
-    display: flex;
-    width: 10.625rem;
-    justify-content: space-between;
-    align-items: center;
+	display: flex;
+	width: 10.625rem;
+	justify-content: space-between;
+	align-items: center;
 }
 
 @media (max-width: 768px) {
-    .dynamicColumnsTable-items {
-        flex-direction: column;
-        width: auto;
-        text-align: center;
-    }
+	.dynamicColumnsTable-items {
+		flex-direction: column;
+		width: auto;
+		text-align: center;
+	}
 }

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import './DynamicColumnTable.syles.scss';
 
-import { SettingOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps, Switch } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import { SlidersHorizontal } from 'lucide-react';
 import { memo, useEffect, useState } from 'react';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -43,7 +43,7 @@ function DynamicColumnTable({
 				: undefined,
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [columns]);
+	}, [columns, dynamicColumns]);
 
 	const onToggleHandler = (index: number) => (
 		checked: boolean,
@@ -90,9 +90,9 @@ function DynamicColumnTable({
 					trigger={['click']}
 				>
 					<Button
-						className="dynamicColumnTable-button"
+						className="dynamicColumnTable-button filter-btn"
 						size="middle"
-						icon={<SettingOutlined />}
+						icon={<SlidersHorizontal size={14} />}
 					/>
 				</Dropdown>
 			)}

frontend/src/components/RouteTab/types.ts

@@ -1,13 +1,15 @@
 import { TabsProps } from 'antd';
 import { History } from 'history';
 
+export type TabRoutes = {
+	name: React.ReactNode;
+	route: string;
+	Component: () => JSX.Element;
+	key: string;
+};
+
 export interface RouteTabProps {
-	routes: {
-		name: React.ReactNode;
-		route: string;
-		Component: () => JSX.Element;
-		key: string;
-	}[];
+	routes: TabRoutes[];
 	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: VoidFunction;
 	history: History<unknown>;

frontend/src/components/WelcomeLeftContainer/styles.ts

@@ -13,6 +13,7 @@ export const Container = styled.div`
 	&&& {
 		display: flex;
 		justify-content: center;
+		gap: 16px;
 		align-items: center;
 		min-height: 100vh;
 

frontend/src/constants/global.ts

@@ -1,2 +1,4 @@
 const MAX_RPS_LIMIT = 100;
 export { MAX_RPS_LIMIT };
+
+export const LEGEND = 'legend';

frontend/src/constants/localStorage.ts

@@ -15,4 +15,5 @@ export enum LOCALSTORAGE {
 	LOGGED_IN_USER_EMAIL = 'LOGGED_IN_USER_EMAIL',
 	CHAT_SUPPORT = 'CHAT_SUPPORT',
 	IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
+	DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
 }

frontend/src/constants/routes.ts

@@ -6,7 +6,6 @@ const ROUTES = {
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
 	TRACES_EXPLORER: '/traces-explorer',
-	SETTINGS: '/settings',
 	GET_STARTED: '/get-started',
 	USAGE_EXPLORER: '/usage-explorer',
 	APPLICATION: '/services',
@@ -23,15 +22,18 @@ const ROUTES = {
 	ERROR_DETAIL: '/error-detail',
 	VERSION: '/status',
 	MY_SETTINGS: '/my-settings',
+	SETTINGS: '/settings',
 	ORG_SETTINGS: '/settings/org-settings',
 	INGESTION_SETTINGS: '/settings/ingestion-settings',
 	SOMETHING_WENT_WRONG: '/something-went-wrong',
 	UN_AUTHORIZED: '/un-authorized',
 	NOT_FOUND: '/not-found',
-	LOGS: '/logs',
-	LOGS_EXPLORER: '/logs-explorer',
-	LIVE_LOGS: '/logs-explorer/live',
-	LOGS_PIPELINES: '/pipelines',
+	LOGS_BASE: '/logs',
+	LOGS: '/logs/logs-explorer',
+	OLD_LOGS_EXPLORER: '/logs/old-logs-explorer',
+	LOGS_EXPLORER: '/logs/logs-explorer',
+	LIVE_LOGS: '/logs/logs-explorer/live',
+	LOGS_PIPELINES: '/logs/pipelines',
 	HOME_PAGE: '/',
 	PASSWORD_RESET: '/password-reset',
 	LIST_LICENSES: '/licenses',
@@ -39,7 +41,10 @@ const ROUTES = {
 	TRACE_EXPLORER: '/trace-explorer',
 	BILLING: '/billing',
 	SUPPORT: '/support',
+	LOGS_SAVE_VIEWS: '/logs-save-views',
+	TRACES_SAVE_VIEWS: '/traces-save-views',
 	WORKSPACE_LOCKED: '/workspace-locked',
-};
+	SHORTCUTS: '/shortcuts',
+} as const;
 
 export default ROUTES;

frontend/src/constants/shortcuts/globalShortcuts.ts

@@ -0,0 +1,32 @@
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+const userOS = getUserOperatingSystem();
+export const GlobalShortcuts = {
+	SidebarCollapse: '\\+meta',
+	NavigateToServices: 's+shift',
+	NavigateToTraces: 't+shift',
+	NavigateToLogs: 'l+shift',
+	NavigateToDashboards: 'd+shift',
+	NavigateToAlerts: 'a+shift',
+	NavigateToExceptions: 'e+shift',
+};
+
+export const GlobalShortcutsName = {
+	SidebarCollapse: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+\\`,
+	NavigateToServices: 'shift+s',
+	NavigateToTraces: 'shift+t',
+	NavigateToLogs: 'shift+l',
+	NavigateToDashboards: 'shift+d',
+	NavigateToAlerts: 'shift+a',
+	NavigateToExceptions: 'shift+e',
+};
+
+export const GlobalShortcutsDescription = {
+	SidebarCollapse: 'Collpase the sidebar',
+	NavigateToServices: 'Navigate to Services page',
+	NavigateToTraces: 'Navigate to Traces page',
+	NavigateToLogs: 'Navigate to logs page',
+	NavigateToDashboards: 'Navigate to dashboards page',
+	NavigateToAlerts: 'Navigate to alerts page',
+	NavigateToExceptions: 'Navigate to Exceptions page',
+};

frontend/src/constants/shortcuts/logsExplorerShortcuts.ts

@@ -0,0 +1,19 @@
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+const userOS = getUserOperatingSystem();
+export const LogsExplorerShortcuts = {
+	StageAndRunQuery: 'enter+meta',
+	FocusTheSearchBar: 's',
+};
+
+export const LogsExplorerShortcutsName = {
+	StageAndRunQuery: `${
+		userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
+	}+enter`,
+	FocusTheSearchBar: 's',
+};
+
+export const LogsExplorerShortcutsDescription = {
+	StageAndRunQuery: 'Stage and Run the current query',
+	FocusTheSearchBar: 'Shift the focus to the last query filter bar',
+};

frontend/src/constants/theme.ts

@@ -1,5 +1,6 @@
 const themeColors = {
 	chartcolors: {
+		robin: '#3F5ECC',
 		dodgerBlue: '#2F80ED',
 		mediumOrchid: '#BB6BD9',
 		seaBuckthorn: '#F2994A',

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -64,7 +64,9 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 		});
 	}
 
-	return <ResizeTable columns={columns} dataSource={channels} rowKey="id" />;
+	return (
+		<ResizeTable columns={columns} dataSource={channels} rowKey="id" bordered />
+	);
 }
 
 interface AlertChannelsProps {

frontend/src/container/AllAlertChannels/styles.ts

@@ -15,6 +15,7 @@ export const ButtonContainer = styled.div`
 		align-items: center;
 		margin-top: 1rem;
 		margin-bottom: 1rem;
+		padding-right: 1rem;
 	}
 `;
 

frontend/src/container/AllError/index.tsx

@@ -48,6 +48,15 @@ import {
 	urlKey,
 } from './utils';
 
+type QueryParams = {
+	order: string;
+	offset: number;
+	orderParam: string;
+	pageSize: number;
+	exceptionType?: string;
+	serviceName?: string;
+};
+
 function AllErrors(): JSX.Element {
 	const { maxTime, minTime, loading } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
@@ -162,16 +171,23 @@ function AllErrors(): JSX.Element {
 				filterKey,
 				filterValue || '',
 			);
-			history.replace(
-				`${pathname}?${createQueryParams({
-					order: updatedOrder,
-					offset: getUpdatedOffset,
-					orderParam: getUpdatedParams,
-					pageSize: getUpdatedPageSize,
-					exceptionType: exceptionFilterValue,
-					serviceName: serviceFilterValue,
-				})}`,
-			);
+
+			const queryParams: QueryParams = {
+				order: updatedOrder,
+				offset: getUpdatedOffset,
+				orderParam: getUpdatedParams,
+				pageSize: getUpdatedPageSize,
+			};
+
+			if (exceptionFilterValue && exceptionFilterValue !== 'undefined') {
+				queryParams.exceptionType = exceptionFilterValue;
+			}
+
+			if (serviceFilterValue && serviceFilterValue !== 'undefined') {
+				queryParams.serviceName = serviceFilterValue;
+			}
+
+			history.replace(`${pathname}?${createQueryParams(queryParams)}`);
 			confirm();
 		},
 		[
@@ -198,8 +214,10 @@ function AllErrors(): JSX.Element {
 					<Input
 						placeholder={placeholder}
 						value={selectedKeys[0]}
-						onChange={(e): void =>
-							setSelectedKeys(e.target.value ? [e.target.value] : [])
+						onChange={
+							(e): void => setSelectedKeys(e.target.value ? [e.target.value] : [])
+
+							// Need to fix this logic, when the value in empty, it's setting undefined string as value
 						}
 						allowClear
 						defaultValue={getDefaultFilterValue(

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

@@ -0,0 +1,61 @@
+.app-layout {
+	position: relative;
+	height: 100%;
+	width: 100%;
+
+	.app-content {
+		width: 100%;
+		overflow: auto;
+
+		.content-container {
+			position: relative;
+			margin: 0 1rem;
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			width: 100%;
+		}
+	}
+}
+
+.isDarkMode {
+	.app-layout {
+		.app-content {
+			background: #0b0c0e;
+		}
+	}
+}
+
+.isLightMode {
+	.app-layout {
+		.app-content {
+			background: #ffffff;
+		}
+	}
+}
+
+.trial-expiry-banner {
+	padding: 8px;
+	background-color: #f25733;
+	color: white;
+	text-align: center;
+}
+
+.upgrade-link {
+	padding: 0px;
+	padding-right: 4px;
+	display: inline !important;
+	color: white;
+	text-decoration: underline;
+	text-decoration-color: white;
+	text-decoration-thickness: 2px;
+	text-underline-offset: 2px;
+
+	&:hover {
+		color: white;
+		text-decoration: underline;
+		text-decoration-color: white;
+		text-decoration-thickness: 2px;
+		text-underline-offset: 2px;
+	}
+}

frontend/src/container/AppLayout/index.tsx

@@ -1,13 +1,32 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import './AppLayout.styles.scss';
+
+import { Flex } from 'antd';
+import getLocalStorageKey from 'api/browser/localstorage/get';
 import getDynamicConfigs from 'api/dynamicConfigs/getDynamicConfigs';
 import getUserLatestVersion from 'api/user/getLatestVersion';
 import getUserVersion from 'api/user/getVersion';
+import cx from 'classnames';
+import { IS_SIDEBAR_COLLAPSED } from 'constants/app';
 import ROUTES from 'constants/routes';
-import Header from 'container/Header';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
+import history from 'lib/history';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
-import { ReactNode, useEffect, useMemo, useRef } from 'react';
+import {
+	ReactNode,
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Helmet } from 'react-helmet-async';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +34,7 @@ import { useQueries } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Dispatch } from 'redux';
+import { sideBarCollapse } from 'store/actions';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import {
@@ -25,15 +45,24 @@ import {
 	UPDATE_LATEST_VERSION_ERROR,
 } from 'types/actions/app';
 import AppReducer from 'types/reducer/app';
+import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
 import { ChildrenContainer, Layout, LayoutContent } from './styles';
 import { getRouteKey } from './utils';
 
 function AppLayout(props: AppLayoutProps): JSX.Element {
-	const { isLoggedIn, user } = useSelector<AppState, AppReducer>(
+	const { isLoggedIn, user, role } = useSelector<AppState, AppReducer>(
 		(state) => state.app,
 	);
 
+	const [collapsed, setCollapsed] = useState<boolean>(
+		getLocalStorageKey(IS_SIDEBAR_COLLAPSED) === 'true',
+	);
+
+	const isDarkMode = useIsDarkMode();
+
+	const { data: licenseData, isFetching } = useLicense();
+
 	const { pathname } = useLocation();
 	const { t } = useTranslation(['titles']);
 
@@ -78,7 +107,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const { children } = props;
 
-	const dispatch = useDispatch<Dispatch<AppActions>>();
+	const dispatch = useDispatch<Dispatch<AppActions | any>>();
 
 	const latestCurrentCounter = useRef(0);
 	const latestVersionCounter = useRef(0);
@@ -86,6 +115,14 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const { notifications } = useNotifications();
 
+	const onCollapse = useCallback(() => {
+		setCollapsed((collapsed) => !collapsed);
+	}, []);
+
+	useLayoutEffect(() => {
+		dispatch(sideBarCollapse(collapsed));
+	}, [collapsed, dispatch]);
+
 	useEffect(() => {
 		if (
 			getUserLatestVersionResponse.isFetched &&
@@ -196,25 +233,103 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED || pathname === ROUTES.WORKSPACE_LOCKED;
 
+	const [showTrialExpiryBanner, setShowTrialExpiryBanner] = useState(false);
+
+	useEffect(() => {
+		if (
+			!isFetching &&
+			licenseData?.payload?.onTrial &&
+			!licenseData?.payload?.trialConvertedToSubscription &&
+			!licenseData?.payload?.workSpaceBlock &&
+			getRemainingDays(licenseData?.payload.trialEnd) < 7
+		) {
+			setShowTrialExpiryBanner(true);
+		}
+	}, [licenseData, isFetching]);
+
+	const handleUpgrade = (): void => {
+		if (role === 'ADMIN') {
+			history.push(ROUTES.BILLING);
+		}
+	};
+
+	const isLogsView = (): boolean =>
+		routeKey === 'LOGS' ||
+		routeKey === 'LOGS_EXPLORER' ||
+		routeKey === 'LOGS_PIPELINES' ||
+		routeKey === 'LOGS_SAVE_VIEWS';
+
+	const isTracesView = (): boolean =>
+		routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS';
+
+	useEffect(() => {
+		if (isDarkMode) {
+			document.body.classList.remove('lightMode');
+			document.body.classList.add('darkMode');
+		} else {
+			document.body.classList.add('lightMode');
+			document.body.classList.remove('darkMode');
+		}
+	}, [isDarkMode]);
+
+	const isSideNavCollapsed = getLocalStorageKey(IS_SIDEBAR_COLLAPSED);
+
 	return (
-		<Layout>
+		<Layout
+			className={cx(
+				isDarkMode ? 'darkMode' : 'lightMode',
+				isSideNavCollapsed ? 'sidebarCollapsed' : '',
+			)}
+		>
 			<Helmet>
 				<title>{pageTitle}</title>
 			</Helmet>
 
-			{isToDisplayLayout && <Header />}
-			<Layout>
-				{isToDisplayLayout && !renderFullScreen && <SideNav />}
+			{showTrialExpiryBanner && (
+				<div className="trial-expiry-banner">
+					You are in free trial period. Your free trial will end on{' '}
+					<span>
+						{getFormattedDate(licenseData?.payload?.trialEnd || Date.now())}.
+					</span>
+					{role === 'ADMIN' ? (
+						<span>
+							{' '}
+							Please{' '}
+							<a className="upgrade-link" onClick={handleUpgrade}>
+								upgrade
+							</a>
+							to continue using SigNoz features.
+						</span>
+					) : (
+						'Please contact your administrator for upgrading to a paid plan.'
+					)}
+				</div>
+			)}
 
-				<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
-					<LayoutContent>
-						<ChildrenContainer>
-							{isToDisplayLayout && !renderFullScreen && <TopNav />}
-							{children}
-						</ChildrenContainer>
-					</LayoutContent>
-				</ErrorBoundary>
-			</Layout>
+			<Flex className={cx('app-layout', isDarkMode ? 'darkMode' : 'lightMode')}>
+				{isToDisplayLayout && !renderFullScreen && (
+					<SideNav
+						licenseData={licenseData}
+						isFetching={isFetching}
+						onCollapse={onCollapse}
+						collapsed={collapsed}
+					/>
+				)}
+				<div className={cx('app-content', collapsed ? 'collapsed' : '')}>
+					<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+						<LayoutContent>
+							<ChildrenContainer
+								style={{
+									margin: isLogsView() || isTracesView() ? 0 : ' 0 1rem',
+								}}
+							>
+								{isToDisplayLayout && !renderFullScreen && <TopNav />}
+								{children}
+							</ChildrenContainer>
+						</LayoutContent>
+					</ErrorBoundary>
+				</div>
+			</Flex>
 		</Layout>
 	);
 }

frontend/src/container/AppLayout/styles.ts

@@ -8,15 +8,16 @@ export const Layout = styled(LayoutComponent)`
 		min-height: calc(100vh - 8rem);
 		overflow: hidden;
 		height: 100%;
+		flex-direction: column !important;
 	}
 `;
 
 export const LayoutContent = styled(LayoutComponent.Content)`
 	overflow-y: auto;
+	height: 100%;
 `;
 
 export const ChildrenContainer = styled.div`
-	margin: 0 1rem;
 	display: flex;
 	flex-direction: column;
 	height: 100%;

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,4 +1,4 @@
-import { Row } from 'antd';
+import { Row, Typography } from 'antd';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -33,7 +33,14 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 
 	return (
 		<SelectTypeContainer>
-			<h3> {t('choose_alert_type')} </h3>
+			<Typography.Title
+				level={4}
+				style={{
+					padding: '0 8px',
+				}}
+			>
+				{t('choose_alert_type')}
+			</Typography.Title>
 			<Row>{renderOptions}</Row>
 		</SelectTypeContainer>
 	);

frontend/src/container/EditRules/index.tsx

@@ -7,16 +7,18 @@ function EditRules({ initialValue, ruleId }: EditRulesProps): JSX.Element {
 	const [formInstance] = Form.useForm();
 
 	return (
-		<FormAlertRules
-			alertType={
-				initialValue.alertType
-					? (initialValue.alertType as AlertTypes)
-					: AlertTypes.METRICS_BASED_ALERT
-			}
-			formInstance={formInstance}
-			initialValue={initialValue}
-			ruleId={ruleId}
-		/>
+		<div style={{ marginTop: '1rem' }}>
+			<FormAlertRules
+				alertType={
+					initialValue.alertType
+						? (initialValue.alertType as AlertTypes)
+						: AlertTypes.METRICS_BASED_ALERT
+				}
+				formInstance={formInstance}
+				initialValue={initialValue}
+				ruleId={ruleId}
+			/>
+		</div>
 	);
 }
 

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.styles.scss

@@ -0,0 +1,30 @@
+.empty-logs-search-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 240px;
+
+	.empty-logs-search-container-content {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+
+		color: var(--text-vanilla-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px; /* 128.571% */
+		letter-spacing: -0.07px;
+
+		.empty-state-svg {
+			height: 50px;
+			width: 50px;
+		}
+
+		.sub-text {
+			font-weight: 600;
+		}
+	}
+}