test(trace-details): add preview-fields hover card e2e

.github/CODEOWNERS

@@ -109,25 +109,6 @@ go.mod @therealpandey
 /pkg/modules/role/ @therealpandey
 /pkg/types/coretypes/ @therealpandey @vikrantgupta25
 
-/frontend/src/hooks/useAuthZ/ @H4ad
-/frontend/src/components/GuardAuthZ/ @H4ad
-/frontend/src/components/AuthZTooltip/ @H4ad
-/frontend/src/components/createGuardedRoute/ @H4ad
-/frontend/src/container/RolesSettings/ @H4ad
-/frontend/src/components/RolesSelect/ @H4ad
-/frontend/src/pages/MembersSettings/ @H4ad
-/frontend/src/container/MembersSettings/ @H4ad
-/frontend/src/components/MembersTable/ @H4ad
-/frontend/src/components/EditMemberDrawer/ @H4ad
-/frontend/src/components/InviteMembersModal/ @H4ad
-/frontend/src/hooks/member/ @H4ad
-/frontend/src/pages/ServiceAccountsSettings/ @H4ad
-/frontend/src/container/ServiceAccountsSettings/ @H4ad
-/frontend/src/components/ServiceAccountsTable/ @H4ad
-/frontend/src/components/ServiceAccountDrawer/ @H4ad
-/frontend/src/components/CreateServiceAccountModal/ @H4ad
-/frontend/src/hooks/serviceAccount/ @H4ad
-
 # IdentN Owners
 
 /pkg/identn/ @therealpandey
@@ -218,72 +199,3 @@ go.mod @therealpandey
 ## OpenAPI Schema - Generated
 /frontend/src/api/generated/services/ @therealpandey @vikrantgupta25 @srikanthccv
 /docs/api/openapi.yml @therealpandey @vikrantgupta25 @srikanthccv
-
-## Logs
-/frontend/src/pages/Logs/ @SigNoz/events-frontend
-/frontend/src/pages/LogsExplorer/ @SigNoz/events-frontend
-/frontend/src/pages/LogsModulePage/ @SigNoz/events-frontend
-/frontend/src/pages/LogsSettings/ @SigNoz/events-frontend
-/frontend/src/pages/LiveLogs/ @SigNoz/events-frontend
-/frontend/src/container/LogsExplorerChart/ @SigNoz/events-frontend
-/frontend/src/container/LogsExplorerContext/ @SigNoz/events-frontend
-/frontend/src/container/LogsExplorerList/ @SigNoz/events-frontend
-/frontend/src/container/LogsExplorerTable/ @SigNoz/events-frontend
-/frontend/src/container/LogsExplorerViews/ @SigNoz/events-frontend
-/frontend/src/container/LogsFilters/ @SigNoz/events-frontend
-/frontend/src/container/LogsSearchFilter/ @SigNoz/events-frontend
-/frontend/src/container/LogsTable/ @SigNoz/events-frontend
-/frontend/src/container/LogsAggregate/ @SigNoz/events-frontend
-/frontend/src/container/LogsContextList/ @SigNoz/events-frontend
-/frontend/src/container/LogsIndexToFields/ @SigNoz/events-frontend
-/frontend/src/container/LogsLoading/ @SigNoz/events-frontend
-/frontend/src/container/LogsPanelTable/ @SigNoz/events-frontend
-/frontend/src/container/LogControls/ @SigNoz/events-frontend
-/frontend/src/container/LogDetailedView/ @SigNoz/events-frontend
-/frontend/src/container/LogExplorerQuerySection/ @SigNoz/events-frontend
-/frontend/src/container/LogLiveTail/ @SigNoz/events-frontend
-/frontend/src/container/LiveLogs/ @SigNoz/events-frontend
-/frontend/src/container/EmptyLogsSearch/ @SigNoz/events-frontend
-/frontend/src/container/NoLogs/ @SigNoz/events-frontend
-/frontend/src/components/Logs/ @SigNoz/events-frontend
-/frontend/src/components/LogDetail/ @SigNoz/events-frontend
-/frontend/src/components/LogsFormatOptionsMenu/ @SigNoz/events-frontend
-/frontend/src/hooks/logs/ @SigNoz/events-frontend
-
-## Logs Pipelines
-/frontend/src/pages/Pipelines/ @SigNoz/events-frontend
-/frontend/src/container/PipelinePage/ @SigNoz/events-frontend
-
-## Traces / Trace Explorer
-/frontend/src/pages/Trace/ @SigNoz/events-frontend
-/frontend/src/pages/TracesExplorer/ @SigNoz/events-frontend
-/frontend/src/pages/TracesModulePage/ @SigNoz/events-frontend
-/frontend/src/container/Trace/ @SigNoz/events-frontend
-/frontend/src/container/TracesExplorer/ @SigNoz/events-frontend
-/frontend/src/container/TracesTableComponent/ @SigNoz/events-frontend
-
-## Trace Funnels
-/frontend/src/pages/TracesFunnels/ @SigNoz/events-frontend
-/frontend/src/pages/TracesFunnelDetails/ @SigNoz/events-frontend
-/frontend/src/hooks/TracesFunnels/ @SigNoz/events-frontend
-
-## Trace Details
-/frontend/src/pages/TraceDetailsV3/ @SigNoz/events-frontend
-/frontend/src/pages/TraceDetailOldRedirect/ @SigNoz/events-frontend
-/frontend/src/hooks/trace/ @SigNoz/events-frontend
-
-## Exceptions
-/frontend/src/pages/AllErrors/ @SigNoz/events-frontend
-/frontend/src/pages/ErrorDetails/ @SigNoz/events-frontend
-/frontend/src/container/AllError/ @SigNoz/events-frontend
-/frontend/src/container/ErrorDetails/ @SigNoz/events-frontend
-
-## External APIs
-/frontend/src/pages/ApiMonitoring/ @SigNoz/events-frontend
-/frontend/src/container/ApiMonitoring/ @SigNoz/events-frontend
-
-## Messaging Queues
-/frontend/src/pages/MessagingQueues/ @SigNoz/events-frontend
-/frontend/src/components/MessagingQueues/ @SigNoz/events-frontend
-/frontend/src/components/MessagingQueueHealthCheck/ @SigNoz/events-frontend
-/frontend/src/hooks/messagingQueue/ @SigNoz/events-frontend

deploy/MIGRATION.md

@@ -1,129 +0,0 @@
-# Migrating from the install script to Foundry
-
-> [!IMPORTANT]
-> The install script is now deprecated and will no longer receive updates.
-
-This guide walks you through migrating an existing SigNoz deployment running via
-Docker Compose to [Foundry](https://signoz.io/docs/install/docker/).
-
-> [!NOTE]
-> Setting up SigNoz for the first time? You don't need this guide — follow the [SigNoz installation docs](https://signoz.io/docs/install/) instead.
-
-## Overview
-To stay up to date on new installation platforms and patterns, please refer to [Foundry](https://github.com/SigNoz/foundry).
-
-Two `foundryctl` commands are used throughout this guide:
-- **`forge`** — generates deployment manifests from your `casting.yaml`. It does not touch running containers, so it is safe to re-run while you iterate.
-- **`cast`** — applies the generated manifests: it creates and starts the containers (and pulls new images).
-
-## Prerequisites
-- [ ] Install Foundry - `curl -fsSL https://signoz.io/foundry.sh | bash`
-
-## Migration Steps
-> [!WARNING]
-> **Before proceeding, back up both:**
-> - **Your docker volumes** — these hold your data.
-> - **Your existing `docker-compose.yaml` (and any config it references)** — keep a copy somewhere safe. The compose manifests are no longer distributed by SigNoz, so this backup is your only way to roll back to your previous setup.
-
-1. Make a note of the volume names used by your existing deployment for the following components:
-- ClickHouse
-- SigNoz
-- ZooKeeper
-
-> If you used the docker compose file we provided, the volumes will be `signoz-clickhouse`, `signoz-sqlite`, and `signoz-zookeeper-1`.
-
-2. Generate your `casting.yaml`. Based on internal testing, the following casting should generate the manifests that mimic the legacy docker compose setup (compare against your backed-up `docker-compose.yaml`). Once created, run `foundryctl forge -f casting.yaml`.
-
-Foundry has a [Docker Compose example](https://github.com/SigNoz/foundry/tree/main/docs/examples/docker/compose). Please use it as a reference.
-
-> [!WARNING]
-> If your deployment had more than 1 shard or replica, you will need to adjust your manifest volumes accordingly.
-
-> [!IMPORTANT]
-> The `replica` and `shard` macros below are placeholders. Replace them with the values from your existing ClickHouse configuration (check the `macros` section of your current ClickHouse config, e.g. `config.xml`/`metrika.xml`), otherwise the generated manifests will not match your existing data.
-
-```yaml
-apiVersion: v1alpha1
-kind: Installation
-metadata:
-  name: signoz
-spec:
-  deployment:
-    flavor: compose
-    mode: docker
-  metastore:
-    kind: sqlite
-  telemetrykeeper:
-    kind: zookeeper
-  telemetrystore:
-    spec:
-      config:
-        data:
-          config-0-0.yaml: |
-            macros:
-              replica: "example01-01-1" # replace with your existing ClickHouse replica macro (see legacy configuration files for reference)
-              shard: "01"               # replace with your existing ClickHouse shard macro (see legacy configuration files for reference)
-  patches:
-    - target: "deployment/compose.yaml"
-      operations:
-        - op: replace
-          path: /volumes/signoz-telemetrykeeper-0-data/name
-          value: signoz-zookeeper-1
-        - op: replace
-          path: /volumes/signoz-telemetrystore-0-0-data/name
-          value: signoz-clickhouse
-        - op: replace
-          path: /volumes/signoz-metastore-sqlite-0-data/name
-          value: signoz-sqlite
-        - op: add
-          path: /services/signoz-telemetrykeeper-zookeeper-0/user
-          value: root
-```
-
-> [!NOTE]
-> The `user: root` patch on the ZooKeeper service is required so the container can read/write the data in your reused ZooKeeper volume, which was created with `root`-owned files by the legacy compose setup. Without it, ZooKeeper may fail to start with permission errors.
-
-If you had custom configurations for features like SMTP or additional ingestion processors/receivers, you will need to include those in your casting file via [patches](https://github.com/SigNoz/foundry/blob/main/docs/concepts/patches.md), [custom configuration](https://github.com/SigNoz/foundry/blob/main/docs/concepts/moldings.md#custom-config-files) or [environment variables](https://github.com/SigNoz/foundry/blob/main/docs/reference/casting-file.md#molding-spec) based on your previous configuration.
-
-3. Review your manifests, we suggest executing the following checks on your manifests before proceeding:
-- [ ] Validate the container images match what your deployment had, Foundry uses `latest` on generation by default.
-- [ ] If your signoz version was older than latest, please check the [upgrade path](https://signoz.io/docs/operate/upgrade/) first.
-- [ ] Check the produced manifests in `pours/deployment` match your older configurations. Extra consideration and review needs to be done on `compose.yaml` as this will be the main entry point for your new deployment.
-- [ ] The configuration files for clickhouse are now in YAML so validate your custom settings are present.
-
-4. Execute a `docker compose down`. **Do not** include parameters such as `--volumes` (or `-v`), as it will wipe the volumes we need to maintain and reuse to avoid data loss. 
-
-> [!NOTE]
-> This will generate downtime so please plan accordingly.
-
-5. Validate the SigNoz containers are down with `docker ps -a`. Multiple containers cannot bind the same volume.
-
-6. Run `foundryctl cast -f casting.yaml`. This will recreate the containers based on the spec. This process will download new container images.
-
-> [!NOTE]
-> When `cast` is run, the migration container will execute its migrations.
-
-## Verifying the Migration
-- SigNoz containers will be up and running.
-- Log in to the SigNoz UI and verify that data is present.
-    - Signoz will run on localhost:8080
-- Validate that your data ingestion is receiving data.
-    - Ingesters will receive data on localhost:4317(grpc) and localhost:4318(http)
-- Review the logs from both ClickHouse and ZooKeeper; no errors should be present.
-
-## Rolling Back
-Because step 4 brought the legacy stack down *without* `-v`, your original volumes
-are untouched and still hold your data. To roll back:
-
-- Stop and remove the containers created by Foundry (`docker compose down`, again without `-v`).
-- Confirm the containers are gone with `docker ps -a` so nothing else is bound to the volumes.
-- Reapply your original docker compose file (`docker compose up -d`). It will reattach to the
-  existing volumes and restore your prior state.
-
-## Troubleshooting
-- Please reach out to our community on [Slack](https://signoz.io/slack).
-
-## References
-- [SigNoz Docker installation docs](https://signoz.io/docs/install/docker/)
-- [SigNoz documentation](https://signoz.io/docs)
-- [Foundry](https://github.com/SigNoz/foundry)

deploy/README.md

@@ -3,16 +3,77 @@
 Check that you have cloned [signoz/signoz](https://github.com/signoz/signoz)
 and currently are in `signoz/deploy` folder.
 
-## Installation
+## Docker
 
-> **Note:** The `install.sh` script and the `docker-compose` manifests have been deprecated.
+If you don't have docker set up, please follow [this guide](https://docs.docker.com/engine/install/)
+to set up docker before proceeding with the next steps.
 
-SigNoz now installs and runs through [Foundry](https://signoz.io/docs/install/docker/).
+### Using Install Script
 
-> **Already running SigNoz via Docker Compose?** See the [Migration Guide](./MIGRATION.md) to transition your existing deployment to Foundry.
+Now run the following command to install:
 
-Please follow the latest installation instructions at [signoz.io/docs/install/docker](https://signoz.io/docs/install/docker/).
-Foundry has support for **different platforms and architectures**, please review the project documentation for more details.
+```sh
+./install.sh
+```
+
+### Using Docker Compose
+
+If you don't have docker compose set up, please follow [this guide](https://docs.docker.com/compose/install/)
+to set up docker compose before proceeding with the next steps.
+
+```sh
+cd deploy/docker
+docker compose up -d
+```
+
+Open http://localhost:8080 in your favourite browser.
+
+To start collecting logs and metrics from your infrastructure, run the following command:
+
+```sh
+cd generator/infra
+docker compose up -d
+```
+
+To start generating sample traces, run the following command:
+
+```sh
+cd generator/hotrod
+docker compose up -d
+```
+
+In a couple of minutes, you should see the data generated from hotrod in SigNoz UI.
+
+For more details, please refer to the [SigNoz documentation](https://signoz.io/docs/install/docker/).
+
+## Docker Swarm
+
+To install SigNoz using Docker Swarm, run the following command:
+
+```sh
+cd deploy/docker-swarm
+docker stack deploy -c docker-compose.yaml signoz
+```
+
+Open http://localhost:8080 in your favourite browser.
+
+To start collecting logs and metrics from your infrastructure, run the following command:
+
+```sh
+cd generator/infra
+docker stack deploy -c docker-compose.yaml infra
+```
+
+To start generating sample traces, run the following command:
+
+```sh
+cd generator/hotrod
+docker stack deploy -c docker-compose.yaml hotrod
+```
+
+In a couple of minutes, you should see the data generated from hotrod in SigNoz UI.
+
+For more details, please refer to the [SigNoz documentation](https://signoz.io/docs/install/docker-swarm/).
 
 ## Uninstall/Troubleshoot?
 

deploy/common/clickhouse/cluster.ha.xml

@@ -0,0 +1,75 @@
+<?xml version="1.0"?>
+<clickhouse>
+    <!-- ZooKeeper is used to store metadata about replicas, when using Replicated tables.
+         Optional. If you don't use replicated tables, you could omit that.
+
+         See https://clickhouse.com/docs/en/engines/table-engines/mergetree-family/replication/
+      -->
+    <zookeeper>
+        <node index="1">
+            <host>zookeeper-1</host>
+            <port>2181</port>
+        </node>
+        <node index="2">
+            <host>zookeeper-2</host>
+            <port>2181</port>
+        </node>
+        <node index="3">
+            <host>zookeeper-3</host>
+            <port>2181</port>
+        </node>
+    </zookeeper>
+
+    <!-- Configuration of clusters that could be used in Distributed tables.
+         https://clickhouse.com/docs/en/operations/table_engines/distributed/
+      -->
+    <remote_servers>
+        <cluster>
+            <!-- Inter-server per-cluster secret for Distributed queries
+                 default: no secret (no authentication will be performed)
+
+                 If set, then Distributed queries will be validated on shards, so at least:
+                 - such cluster should exist on the shard,
+                 - such cluster should have the same secret.
+
+                 And also (and which is more important), the initial_user will
+                 be used as current user for the query.
+
+                 Right now the protocol is pretty simple and it only takes into account:
+                 - cluster name
+                 - query
+
+                 Also it will be nice if the following will be implemented:
+                 - source hostname (see interserver_http_host), but then it will depends from DNS,
+                   it can use IP address instead, but then the you need to get correct on the initiator node.
+                 - target hostname / ip address (same notes as for source hostname)
+                 - time-based security tokens
+            -->
+            <!-- <secret></secret> -->
+            <shard>
+                <!-- Optional. Whether to write data to just one of the replicas. Default: false (write data to all replicas). -->
+                <!-- <internal_replication>false</internal_replication> -->
+                <!-- Optional. Shard weight when writing data. Default: 1. -->
+                <!-- <weight>1</weight> -->
+                <replica>
+                    <host>clickhouse</host>
+                    <port>9000</port>
+                    <!-- Optional. Priority of the replica for load_balancing. Default: 1 (less value has more priority). -->
+                    <!-- <priority>1</priority> -->
+                </replica>
+            </shard>
+            <shard>
+                <replica>
+                    <host>clickhouse-2</host>
+                    <port>9000</port>
+                </replica>
+            </shard>
+            <shard>
+                <replica>
+                    <host>clickhouse-3</host>
+                    <port>9000</port>
+                </replica>
+            </shard>
+        </cluster>
+    </remote_servers>
+</clickhouse>

deploy/common/clickhouse/cluster.xml

@@ -0,0 +1,75 @@
+<?xml version="1.0"?>
+<clickhouse>
+    <!-- ZooKeeper is used to store metadata about replicas, when using Replicated tables.
+         Optional. If you don't use replicated tables, you could omit that.
+
+         See https://clickhouse.com/docs/en/engines/table-engines/mergetree-family/replication/
+      -->
+    <zookeeper>
+        <node index="1">
+            <host>zookeeper-1</host>
+            <port>2181</port>
+        </node>
+        <!-- <node index="2">
+            <host>zookeeper-2</host>
+            <port>2181</port>
+        </node>
+        <node index="3">
+            <host>zookeeper-3</host>
+            <port>2181</port>
+        </node> -->
+    </zookeeper>
+
+    <!-- Configuration of clusters that could be used in Distributed tables.
+         https://clickhouse.com/docs/en/operations/table_engines/distributed/
+      -->
+    <remote_servers>
+        <cluster>
+            <!-- Inter-server per-cluster secret for Distributed queries
+                 default: no secret (no authentication will be performed)
+
+                 If set, then Distributed queries will be validated on shards, so at least:
+                 - such cluster should exist on the shard,
+                 - such cluster should have the same secret.
+
+                 And also (and which is more important), the initial_user will
+                 be used as current user for the query.
+
+                 Right now the protocol is pretty simple and it only takes into account:
+                 - cluster name
+                 - query
+
+                 Also it will be nice if the following will be implemented:
+                 - source hostname (see interserver_http_host), but then it will depends from DNS,
+                   it can use IP address instead, but then the you need to get correct on the initiator node.
+                 - target hostname / ip address (same notes as for source hostname)
+                 - time-based security tokens
+            -->
+            <!-- <secret></secret> -->
+            <shard>
+                <!-- Optional. Whether to write data to just one of the replicas. Default: false (write data to all replicas). -->
+                <!-- <internal_replication>false</internal_replication> -->
+                <!-- Optional. Shard weight when writing data. Default: 1. -->
+                <!-- <weight>1</weight> -->
+                <replica>
+                    <host>clickhouse</host>
+                    <port>9000</port>
+                    <!-- Optional. Priority of the replica for load_balancing. Default: 1 (less value has more priority). -->
+                    <!-- <priority>1</priority> -->
+                </replica>
+            </shard>
+            <!-- <shard>
+                <replica>
+                    <host>clickhouse-2</host>
+                    <port>9000</port>
+                </replica>
+            </shard>
+            <shard>
+                <replica>
+                    <host>clickhouse-3</host>
+                    <port>9000</port>
+                </replica>
+            </shard> -->
+        </cluster>
+    </remote_servers>
+</clickhouse>

deploy/common/clickhouse/custom-function.xml

@@ -0,0 +1,21 @@
+<functions>
+    <function>
+        <type>executable</type>
+        <name>histogramQuantile</name>
+        <return_type>Float64</return_type>
+        <argument>
+            <type>Array(Float64)</type>
+            <name>buckets</name>
+        </argument>
+        <argument>
+            <type>Array(Float64)</type>
+            <name>counts</name>
+        </argument>
+        <argument>
+            <type>Float64</type>
+            <name>quantile</name>
+        </argument>
+        <format>CSV</format>
+        <command>./histogramQuantile</command>
+    </function>
+</functions>

deploy/common/clickhouse/storage.xml

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

deploy/common/clickhouse/users.xml

@@ -0,0 +1,123 @@
+<?xml version="1.0"?>
+<clickhouse>
+    <!-- See also the files in users.d directory where the settings can be overridden. -->
+
+    <!-- Profiles of settings. -->
+    <profiles>
+        <!-- Default settings. -->
+        <default>
+            <!-- Maximum memory usage for processing single query, in bytes. -->
+            <max_memory_usage>10000000000</max_memory_usage>
+
+            <!-- How to choose between replicas during distributed query processing.
+                 random - choose random replica from set of replicas with minimum number of errors
+                 nearest_hostname - from set of replicas with minimum number of errors, choose replica
+                  with minimum number of different symbols between replica's hostname and local hostname
+                  (Hamming distance).
+                 in_order - first live replica is chosen in specified order.
+                 first_or_random - if first replica one has higher number of errors, pick a random one from replicas with minimum number of errors.
+            -->
+            <load_balancing>random</load_balancing>
+        </default>
+
+        <!-- Profile that allows only read queries. -->
+        <readonly>
+            <readonly>1</readonly>
+        </readonly>
+    </profiles>
+
+    <!-- Users and ACL. -->
+    <users>
+        <!-- If user name was not specified, 'default' user is used. -->
+        <default>
+            <!-- See also the files in users.d directory where the password can be overridden.
+
+                 Password could be specified in plaintext or in SHA256 (in hex format).
+
+                 If you want to specify password in plaintext (not recommended), place it in 'password' element.
+                 Example: <password>qwerty</password>.
+                 Password could be empty.
+
+                 If you want to specify SHA256, place it in 'password_sha256_hex' element.
+                 Example: <password_sha256_hex>65e84be33532fb784c48129675f9eff3a682b27168c0ea744b2cf58ee02337c5</password_sha256_hex>
+                 Restrictions of SHA256: impossibility to connect to ClickHouse using MySQL JS client (as of July 2019).
+
+                 If you want to specify double SHA1, place it in 'password_double_sha1_hex' element.
+                 Example: <password_double_sha1_hex>e395796d6546b1b65db9d665cd43f0e858dd4303</password_double_sha1_hex>
+
+                 If you want to specify a previously defined LDAP server (see 'ldap_servers' in the main config) for authentication,
+                  place its name in 'server' element inside 'ldap' element.
+                 Example: <ldap><server>my_ldap_server</server></ldap>
+
+                 If you want to authenticate the user via Kerberos (assuming Kerberos is enabled, see 'kerberos' in the main config),
+                  place 'kerberos' element instead of 'password' (and similar) elements.
+                 The name part of the canonical principal name of the initiator must match the user name for authentication to succeed.
+                 You can also place 'realm' element inside 'kerberos' element to further restrict authentication to only those requests
+                  whose initiator's realm matches it.
+                 Example: <kerberos />
+                 Example: <kerberos><realm>EXAMPLE.COM</realm></kerberos>
+
+                 How to generate decent password:
+                 Execute: PASSWORD=$(base64 < /dev/urandom | head -c8); echo "$PASSWORD"; echo -n "$PASSWORD" | sha256sum | tr -d '-'
+                 In first line will be password and in second - corresponding SHA256.
+
+                 How to generate double SHA1:
+                 Execute: PASSWORD=$(base64 < /dev/urandom | head -c8); echo "$PASSWORD"; echo -n "$PASSWORD" | sha1sum | tr -d '-' | xxd -r -p | sha1sum | tr -d '-'
+                 In first line will be password and in second - corresponding double SHA1.
+            -->
+            <password></password>
+
+            <!-- List of networks with open access.
+
+                 To open access from everywhere, specify:
+                    <ip>::/0</ip>
+
+                 To open access only from localhost, specify:
+                    <ip>::1</ip>
+                    <ip>127.0.0.1</ip>
+
+                 Each element of list has one of the following forms:
+                 <ip> IP-address or network mask. Examples: 213.180.204.3 or 10.0.0.1/8 or 10.0.0.1/255.255.255.0
+                     2a02:6b8::3 or 2a02:6b8::3/64 or 2a02:6b8::3/ffff:ffff:ffff:ffff::.
+                 <host> Hostname. Example: server01.clickhouse.com.
+                     To check access, DNS query is performed, and all received addresses compared to peer address.
+                 <host_regexp> Regular expression for host names. Example, ^server\d\d-\d\d-\d\.clickhouse\.com$
+                     To check access, DNS PTR query is performed for peer address and then regexp is applied.
+                     Then, for result of PTR query, another DNS query is performed and all received addresses compared to peer address.
+                     Strongly recommended that regexp is ends with $
+                 All results of DNS requests are cached till server restart.
+            -->
+            <networks>
+                <ip>::/0</ip>
+            </networks>
+
+            <!-- Settings profile for user. -->
+            <profile>default</profile>
+
+            <!-- Quota for user. -->
+            <quota>default</quota>
+
+            <!-- User can create other users and grant rights to them. -->
+            <!-- <access_management>1</access_management> -->
+        </default>
+    </users>
+
+    <!-- Quotas. -->
+    <quotas>
+        <!-- Name of quota. -->
+        <default>
+            <!-- Limits for time interval. You could specify many intervals with different limits. -->
+            <interval>
+                <!-- Length of interval. -->
+                <duration>3600</duration>
+
+                <!-- No limits. Just calculate resource usage for time interval. -->
+                <queries>0</queries>
+                <errors>0</errors>
+                <result_rows>0</result_rows>
+                <read_rows>0</read_rows>
+                <execution_time>0</execution_time>
+            </interval>
+        </default>
+    </quotas>
+</clickhouse>

deploy/common/locust-scripts/locustfile.py

@@ -0,0 +1,16 @@
+from locust import HttpUser, task, between
+class UserTasks(HttpUser):
+    wait_time = between(5, 15)
+
+    @task
+    def rachel(self):
+        self.client.get("/dispatch?customer=123&nonse=0.6308392664170006")
+    @task
+    def trom(self):
+        self.client.get("/dispatch?customer=392&nonse=0.015296363321630757")
+    @task
+    def japanese(self):
+        self.client.get("/dispatch?customer=731&nonse=0.8022286220408668")
+    @task
+    def coffee(self):
+        self.client.get("/dispatch?customer=567&nonse=0.0022220379420636593")

deploy/common/signoz/otel-collector-opamp-config.yaml

@@ -0,0 +1 @@
+server_endpoint: ws://signoz:4320/v1/opamp

deploy/common/signoz/prometheus.yml

@@ -0,0 +1,25 @@
+# my global config
+global:
+  scrape_interval:     5s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
+  evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
+  # scrape_timeout is set to the global default (10s).
+
+# Alertmanager configuration
+alerting:
+  alertmanagers:
+  - static_configs:
+    - targets:
+      - alertmanager:9093
+
+# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
+rule_files: []
+  # - "first_rules.yml"
+  # - "second_rules.yml"
+  # - 'alerts.yml'
+
+# A scrape configuration containing exactly one endpoint to scrape:
+# Here it's Prometheus itself.
+scrape_configs: []
+
+remote_read:
+  - url: tcp://clickhouse:9000/signoz_metrics

deploy/docker-swarm/docker-compose.ha.yaml

@@ -0,0 +1,288 @@
+version: "3"
+x-common: &common
+  networks:
+    - signoz-net
+  deploy:
+    restart_policy:
+      condition: on-failure
+  logging:
+    options:
+      max-size: 50m
+      max-file: "3"
+x-clickhouse-defaults: &clickhouse-defaults
+  !!merge <<: *common
+  image: clickhouse/clickhouse-server:25.5.6
+  tty: true
+  deploy:
+    labels:
+      signoz.io/scrape: "true"
+      signoz.io/port: "9363"
+      signoz.io/path: "/metrics"
+  depends_on:
+    - zookeeper-1
+    - zookeeper-2
+    - zookeeper-3
+  healthcheck:
+    test:
+      - CMD
+      - wget
+      - --spider
+      - -q
+      - 0.0.0.0:8123/ping
+    interval: 30s
+    timeout: 5s
+    retries: 3
+  ulimits:
+    nproc: 65535
+    nofile:
+      soft: 262144
+      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
+x-zookeeper-defaults: &zookeeper-defaults
+  !!merge <<: *common
+  image: signoz/zookeeper:3.7.1
+  user: root
+  deploy:
+    labels:
+      signoz.io/scrape: "true"
+      signoz.io/port: "9141"
+      signoz.io/path: "/metrics"
+  healthcheck:
+    test:
+      - CMD-SHELL
+      - curl -s -m 2 http://localhost:8080/commands/ruok | grep error | grep null
+    interval: 30s
+    timeout: 5s
+    retries: 3
+x-db-depend: &db-depend
+  !!merge <<: *common
+  depends_on:
+    - clickhouse
+    - clickhouse-2
+    - clickhouse-3
+services:
+  init-clickhouse:
+    !!merge <<: *common
+    image: clickhouse/clickhouse-server:25.5.6
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    deploy:
+      restart_policy:
+        condition: on-failure
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+  zookeeper-1:
+    !!merge <<: *zookeeper-defaults
+    # ports:
+    #   - "2181:2181"
+    #   - "2888:2888"
+    #   - "3888:3888"
+    volumes:
+      - ./clickhouse-setup/data/zookeeper-1:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=1
+      - ZOO_SERVERS=0.0.0.0:2888:3888,zookeeper-2:2888:3888,zookeeper-3:2888:3888
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  zookeeper-2:
+    !!merge <<: *zookeeper-defaults
+    # ports:
+    #   - "2182:2181"
+    #   - "2889:2888"
+    #   - "3889:3888"
+    volumes:
+      - ./clickhouse-setup/data/zookeeper-2:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=2
+      - ZOO_SERVERS=zookeeper-1:2888:3888,0.0.0.0:2888:3888,zookeeper-3:2888:3888
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  zookeeper-3:
+    !!merge <<: *zookeeper-defaults
+    # ports:
+    #   - "2183:2181"
+    #   - "2890:2888"
+    #   - "3890:3888"
+    volumes:
+      - ./clickhouse-setup/data/zookeeper-3:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=3
+      - ZOO_SERVERS=zookeeper-1:2888:3888,zookeeper-2:2888:3888,0.0.0.0:2888:3888
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  clickhouse:
+    !!merge <<: *clickhouse-defaults
+    # TODO: needed for schema-migrator to work, remove this redundancy once we have a better solution
+    hostname: clickhouse
+    # ports:
+    #   - "9000:9000"
+    #   - "8123:8123"
+    #   - "9181:9181"
+    configs:
+      - source: clickhouse-config
+        target: /etc/clickhouse-server/config.xml
+      - source: clickhouse-users
+        target: /etc/clickhouse-server/users.xml
+      - source: clickhouse-custom-function
+        target: /etc/clickhouse-server/custom-function.xml
+      - source: clickhouse-cluster
+        target: /etc/clickhouse-server/config.d/cluster.ha.xml
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ./clickhouse-setup/data/clickhouse/:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  clickhouse-2:
+    !!merge <<: *clickhouse-defaults
+    hostname: clickhouse-2
+    # ports:
+    #   - "9001:9000"
+    #   - "8124:8123"
+    #   - "9182:9181"
+    configs:
+      - source: clickhouse-config
+        target: /etc/clickhouse-server/config.xml
+      - source: clickhouse-users
+        target: /etc/clickhouse-server/users.xml
+      - source: clickhouse-custom-function
+        target: /etc/clickhouse-server/custom-function.xml
+      - source: clickhouse-cluster
+        target: /etc/clickhouse-server/config.d/cluster.ha.xml
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ./clickhouse-setup/data/clickhouse-2/:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  clickhouse-3:
+    !!merge <<: *clickhouse-defaults
+    hostname: clickhouse-3
+    # ports:
+    #   - "9002:9000"
+    #   - "8125:8123"
+    #   - "9183:9181"
+    configs:
+      - source: clickhouse-config
+        target: /etc/clickhouse-server/config.xml
+      - source: clickhouse-users
+        target: /etc/clickhouse-server/users.xml
+      - source: clickhouse-custom-function
+        target: /etc/clickhouse-server/custom-function.xml
+      - source: clickhouse-cluster
+        target: /etc/clickhouse-server/config.d/cluster.ha.xml
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ./clickhouse-setup/data/clickhouse-3/:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  signoz:
+    !!merge <<: *db-depend
+    image: signoz/signoz:v0.129.0
+    ports:
+      - "8080:8080" # signoz port
+    #   - "6060:6060"     # pprof port
+    volumes:
+      - ./clickhouse-setup/data/signoz/:/var/lib/signoz/
+    environment:
+      - SIGNOZ_ALERTMANAGER_PROVIDER=signoz
+      - SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_SQLSTORE_SQLITE_PATH=/var/lib/signoz/signoz.db
+      - SIGNOZ_TOKENIZER_JWT_SECRET=secret
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - --spider
+        - -q
+        - localhost:8080/api/v1/health
+      interval: 30s
+      timeout: 5s
+      retries: 3
+  otel-collector:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:v0.144.5
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate sync check &&
+        /signoz-otel-collector --config=/etc/otel-collector-config.yaml --manager-config=/etc/manager-config.yaml --copy-path=/var/tmp/collector-config.yaml
+    configs:
+      - source: otel-collector-config
+        target: /etc/otel-collector-config.yaml
+      - source: otel-manager-config
+        target: /etc/manager-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}}
+      - LOW_CARDINAL_EXCEPTION_GROUPING=false
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    ports:
+      # - "1777:1777"     # pprof extension
+      - "4317:4317" # OTLP gRPC receiver
+      - "4318:4318" # OTLP HTTP receiver
+    deploy:
+      replicas: 3
+  signoz-telemetrystore-migrator:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:v0.144.5
+    environment:
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate bootstrap &&
+        /signoz-otel-collector migrate sync up &&
+        /signoz-otel-collector migrate async up
+networks:
+  signoz-net:
+    name: signoz-net
+volumes:
+  clickhouse:
+    name: signoz-clickhouse
+  clickhouse-2:
+    name: signoz-clickhouse-2
+  clickhouse-3:
+    name: signoz-clickhouse-3
+  sqlite:
+    name: signoz-sqlite
+  zookeeper-1:
+    name: signoz-zookeeper-1
+  zookeeper-2:
+    name: signoz-zookeeper-2
+  zookeeper-3:
+    name: signoz-zookeeper-3
+configs:
+  clickhouse-config:
+    file: ../common/clickhouse/config.xml
+  clickhouse-users:
+    file: ../common/clickhouse/users.xml
+  clickhouse-custom-function:
+    file: ../common/clickhouse/custom-function.xml
+  clickhouse-cluster:
+    file: ../common/clickhouse/cluster.ha.xml
+  otel-collector-config:
+    file: ./otel-collector-config.yaml
+  otel-manager-config:
+    file: ../common/signoz/otel-collector-opamp-config.yaml

deploy/docker-swarm/docker-compose.yaml

@@ -0,0 +1,206 @@
+version: "3"
+x-common: &common
+  networks:
+    - signoz-net
+  deploy:
+    restart_policy:
+      condition: on-failure
+  logging:
+    options:
+      max-size: 50m
+      max-file: "3"
+x-clickhouse-defaults: &clickhouse-defaults
+  !!merge <<: *common
+  image: clickhouse/clickhouse-server:25.5.6
+  tty: true
+  deploy:
+    labels:
+      signoz.io/scrape: "true"
+      signoz.io/port: "9363"
+      signoz.io/path: "/metrics"
+  depends_on:
+    - init-clickhouse
+    - zookeeper-1
+  healthcheck:
+    test:
+      - CMD
+      - wget
+      - --spider
+      - -q
+      - 0.0.0.0:8123/ping
+    interval: 30s
+    timeout: 5s
+    retries: 3
+  ulimits:
+    nproc: 65535
+    nofile:
+      soft: 262144
+      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
+x-zookeeper-defaults: &zookeeper-defaults
+  !!merge <<: *common
+  image: signoz/zookeeper:3.7.1
+  user: root
+  deploy:
+    labels:
+      signoz.io/scrape: "true"
+      signoz.io/port: "9141"
+      signoz.io/path: "/metrics"
+  healthcheck:
+    test:
+      - CMD-SHELL
+      - curl -s -m 2 http://localhost:8080/commands/ruok | grep error | grep null
+    interval: 30s
+    timeout: 5s
+    retries: 3
+x-db-depend: &db-depend
+  !!merge <<: *common
+  depends_on:
+    - clickhouse
+services:
+  init-clickhouse:
+    !!merge <<: *common
+    image: clickhouse/clickhouse-server:25.5.6
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    deploy:
+      restart_policy:
+        condition: on-failure
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+  zookeeper-1:
+    !!merge <<: *zookeeper-defaults
+    # ports:
+    #   - "2181:2181"
+    #   - "2888:2888"
+    #   - "3888:3888"
+    volumes:
+      - zookeeper-1:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=1
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  clickhouse:
+    !!merge <<: *clickhouse-defaults
+    # TODO: needed for clickhouse TCP connectio
+    hostname: clickhouse
+    # ports:
+    #   - "9000:9000"
+    #   - "8123:8123"
+    #   - "9181:9181"
+
+    configs:
+      - source: clickhouse-config
+        target: /etc/clickhouse-server/config.xml
+      - source: clickhouse-users
+        target: /etc/clickhouse-server/users.xml
+      - source: clickhouse-custom-function
+        target: /etc/clickhouse-server/custom-function.xml
+      - source: clickhouse-cluster
+        target: /etc/clickhouse-server/config.d/cluster.xml
+    volumes:
+      - clickhouse:/var/lib/clickhouse/
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  signoz:
+    !!merge <<: *db-depend
+    image: signoz/signoz:v0.129.0
+    ports:
+      - "8080:8080" # signoz port
+    volumes:
+      - sqlite:/var/lib/signoz/
+    environment:
+      - SIGNOZ_ALERTMANAGER_PROVIDER=signoz
+      - SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_SQLSTORE_SQLITE_PATH=/var/lib/signoz/signoz.db
+      - SIGNOZ_TOKENIZER_JWT_SECRET=secret
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - --spider
+        - -q
+        - localhost:8080/api/v1/health
+      interval: 30s
+      timeout: 5s
+      retries: 3
+  otel-collector:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:v0.144.5
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate sync check &&
+        /signoz-otel-collector --config=/etc/otel-collector-config.yaml --manager-config=/etc/manager-config.yaml --copy-path=/var/tmp/collector-config.yaml
+    configs:
+      - source: otel-collector-config
+        target: /etc/otel-collector-config.yaml
+      - source: otel-manager-config
+        target: /etc/manager-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name={{.Node.Hostname}},os.type={{.Node.Platform.OS}}
+      - LOW_CARDINAL_EXCEPTION_GROUPING=false
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    ports:
+      # - "1777:1777"     # pprof extension
+      - "4317:4317" # OTLP gRPC receiver
+      - "4318:4318" # OTLP HTTP receiver
+    deploy:
+      replicas: 3
+  signoz-telemetrystore-migrator:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:v0.144.5
+    environment:
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate bootstrap &&
+        /signoz-otel-collector migrate sync up &&
+        /signoz-otel-collector migrate async up
+networks:
+  signoz-net:
+    name: signoz-net
+volumes:
+  clickhouse:
+    name: signoz-clickhouse
+  sqlite:
+    name: signoz-sqlite
+  zookeeper-1:
+    name: signoz-zookeeper-1
+configs:
+  clickhouse-config:
+    file: ../common/clickhouse/config.xml
+  clickhouse-users:
+    file: ../common/clickhouse/users.xml
+  clickhouse-custom-function:
+    file: ../common/clickhouse/custom-function.xml
+  clickhouse-cluster:
+    file: ../common/clickhouse/cluster.xml
+  otel-collector-config:
+    file: ./otel-collector-config.yaml
+  otel-manager-config:
+    file: ../common/signoz/otel-collector-opamp-config.yaml

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

@@ -0,0 +1,118 @@
+connectors:
+  signozmeter:
+    metrics_flush_interval: 1h
+    dimensions:
+      - name: service.name
+      - name: deployment.environment
+      - name: host.name
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector
+          static_configs:
+          - targets:
+              - localhost:8888
+            labels:
+              job_name: otel-collector
+processors:
+  batch:
+    send_batch_size: 10000
+    send_batch_max_size: 11000
+    timeout: 10s
+  batch/meter:
+    send_batch_max_size: 25000
+    send_batch_size: 20000
+    timeout: 1s
+  resourcedetection:
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    detectors: [env, system]
+    timeout: 2s
+  signozspanmetrics/delta:
+    metrics_exporter: signozclickhousemetrics
+    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
+    enable_exp_histogram: true
+    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
+      - name: service.version
+      - name: browser.platform
+      - name: browser.mobile
+      - name: k8s.cluster.name
+      - name: k8s.node.name
+      - name: k8s.namespace.name
+      - name: host.name
+      - name: host.type
+      - name: container.name
+extensions:
+  health_check:
+    endpoint: 0.0.0.0:13133
+  pprof:
+    endpoint: 0.0.0.0:1777
+exporters:
+  clickhousetraces:
+    datasource: tcp://clickhouse:9000/signoz_traces
+    low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
+    use_new_schema: true
+  signozclickhousemetrics:
+    dsn: tcp://clickhouse:9000/signoz_metrics
+  clickhouselogsexporter:
+    dsn: tcp://clickhouse:9000/signoz_logs
+    timeout: 10s
+    use_new_schema: true
+  signozclickhousemeter:
+    dsn: tcp://clickhouse:9000/signoz_meter
+    timeout: 45s
+    sending_queue:
+      enabled: false
+  metadataexporter:
+    cache:
+      provider: in_memory
+    dsn: tcp://clickhouse:9000/signoz_metadata
+    enabled: true
+    timeout: 45s
+service:
+  telemetry:
+    logs:
+      encoding: json
+  extensions:
+    - health_check
+    - pprof
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [signozspanmetrics/delta, batch]
+      exporters: [clickhousetraces, metadataexporter, signozmeter]
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+    metrics/prometheus:
+      receivers: [prometheus]
+      processors: [batch]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+    metrics/meter:
+      receivers: [signozmeter]
+      processors: [batch/meter]
+      exporters: [signozclickhousemeter]

deploy/docker/.env

@@ -0,0 +1 @@
+COMPOSE_PROJECT_NAME=signoz

deploy/docker/clickhouse-setup/.deprecated

@@ -0,0 +1,3 @@
+This data directory is deprecated and will be removed in the future.
+Please use the migration script under `scripts/volume-migration` to migrate data from bind mounts to Docker volumes.
+The script also renames the project name to `signoz` and the network name to `signoz-net` (if not already in place).

deploy/docker/clickhouse-setup/user_scripts/.deprecated

@@ -0,0 +1,2 @@
+This directory is deprecated and will be removed in the future.
+Please use the new directory for Clickhouse setup scripts: `scripts/clickhouse` instead.

deploy/docker/docker-compose.ha.yaml

@@ -0,0 +1,265 @@
+version: "3"
+x-common: &common
+  networks:
+    - signoz-net
+  restart: unless-stopped
+  logging:
+    options:
+      max-size: 50m
+      max-file: "3"
+x-clickhouse-defaults: &clickhouse-defaults
+  !!merge <<: *common
+  # addding non LTS version due to this fix https://github.com/ClickHouse/ClickHouse/commit/32caf8716352f45c1b617274c7508c86b7d1afab
+  image: clickhouse/clickhouse-server:25.5.6
+  tty: true
+  labels:
+    signoz.io/scrape: "true"
+    signoz.io/port: "9363"
+    signoz.io/path: "/metrics"
+  depends_on:
+    init-clickhouse:
+      condition: service_completed_successfully
+    zookeeper-1:
+      condition: service_healthy
+    zookeeper-2:
+      condition: service_healthy
+    zookeeper-3:
+      condition: service_healthy
+  healthcheck:
+    test:
+      - CMD
+      - wget
+      - --spider
+      - -q
+      - 0.0.0.0:8123/ping
+    interval: 30s
+    timeout: 5s
+    retries: 3
+  ulimits:
+    nproc: 65535
+    nofile:
+      soft: 262144
+      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
+x-zookeeper-defaults: &zookeeper-defaults
+  !!merge <<: *common
+  image: signoz/zookeeper:3.7.1
+  user: root
+  labels:
+    signoz.io/scrape: "true"
+    signoz.io/port: "9141"
+    signoz.io/path: "/metrics"
+  healthcheck:
+    test:
+      - CMD-SHELL
+      - curl -s -m 2 http://localhost:8080/commands/ruok | grep error | grep null
+    interval: 30s
+    timeout: 5s
+    retries: 3
+x-db-depend: &db-depend
+  !!merge <<: *common
+  depends_on:
+    clickhouse:
+      condition: service_healthy
+    clickhouse-2:
+      condition: service_healthy
+    clickhouse-3:
+      condition: service_healthy
+services:
+  init-clickhouse:
+    !!merge <<: *common
+    image: clickhouse/clickhouse-server:25.5.6
+    container_name: signoz-init-clickhouse
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    restart: on-failure
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+  zookeeper-1:
+    !!merge <<: *zookeeper-defaults
+    container_name: signoz-zookeeper-1
+    # ports:
+    #   - "2181:2181"
+    #   - "2888:2888"
+    #   - "3888:3888"
+    volumes:
+      - zookeeper-1:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=1
+      - ZOO_SERVERS=0.0.0.0:2888:3888,zookeeper-2:2888:3888,zookeeper-3:2888:3888
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  zookeeper-2:
+    !!merge <<: *zookeeper-defaults
+    container_name: signoz-zookeeper-2
+    # ports:
+    #   - "2182:2181"
+    #   - "2889:2888"
+    #   - "3889:3888"
+    volumes:
+      - zookeeper-2:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=2
+      - ZOO_SERVERS=zookeeper-1:2888:3888,0.0.0.0:2888:3888,zookeeper-3:2888:3888
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  zookeeper-3:
+    !!merge <<: *zookeeper-defaults
+    container_name: signoz-zookeeper-3
+    # ports:
+    #   - "2183:2181"
+    #   - "2890:2888"
+    #   - "3890:3888"
+    volumes:
+      - zookeeper-3:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=3
+      - ZOO_SERVERS=zookeeper-1:2888:3888,zookeeper-2:2888:3888,0.0.0.0:2888:3888
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  clickhouse:
+    !!merge <<: *clickhouse-defaults
+    container_name: signoz-clickhouse
+    # ports:
+    #   - "9000:9000"
+    #   - "8123:8123"
+    #   - "9181:9181"
+    volumes:
+      - ../common/clickhouse/config.xml:/etc/clickhouse-server/config.xml
+      - ../common/clickhouse/users.xml:/etc/clickhouse-server/users.xml
+      - ../common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ../common/clickhouse/cluster.ha.xml:/etc/clickhouse-server/config.d/cluster.xml
+      - clickhouse:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  clickhouse-2:
+    !!merge <<: *clickhouse-defaults
+    container_name: signoz-clickhouse-2
+    # ports:
+    #   - "9001:9000"
+    #   - "8124:8123"
+    #   - "9182:9181"
+    volumes:
+      - ../common/clickhouse/config.xml:/etc/clickhouse-server/config.xml
+      - ../common/clickhouse/users.xml:/etc/clickhouse-server/users.xml
+      - ../common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ../common/clickhouse/cluster.ha.xml:/etc/clickhouse-server/config.d/cluster.xml
+      - clickhouse-2:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  clickhouse-3:
+    !!merge <<: *clickhouse-defaults
+    container_name: signoz-clickhouse-3
+    # ports:
+    #   - "9002:9000"
+    #   - "8125:8123"
+    #   - "9183:9181"
+    volumes:
+      - ../common/clickhouse/config.xml:/etc/clickhouse-server/config.xml
+      - ../common/clickhouse/users.xml:/etc/clickhouse-server/users.xml
+      - ../common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ../common/clickhouse/cluster.ha.xml:/etc/clickhouse-server/config.d/cluster.xml
+      - clickhouse-3:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  signoz:
+    !!merge <<: *db-depend
+    image: signoz/signoz:${VERSION:-v0.129.0}
+    container_name: signoz
+    ports:
+      - "8080:8080" # signoz port
+    volumes:
+      - sqlite:/var/lib/signoz/
+    environment:
+      - SIGNOZ_ALERTMANAGER_PROVIDER=signoz
+      - SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_SQLSTORE_SQLITE_PATH=/var/lib/signoz/signoz.db
+      - SIGNOZ_TOKENIZER_JWT_SECRET=secret
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - --spider
+        - -q
+        - localhost:8080/api/v1/health
+      interval: 30s
+      timeout: 5s
+      retries: 3
+  otel-collector:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    container_name: signoz-otel-collector
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate sync check &&
+        /signoz-otel-collector --config=/etc/otel-collector-config.yaml --manager-config=/etc/manager-config.yaml --copy-path=/var/tmp/collector-config.yaml
+    volumes:
+      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+      - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
+      - LOW_CARDINAL_EXCEPTION_GROUPING=false
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    ports:
+      # - "1777:1777"     # pprof extension
+      - "4317:4317" # OTLP gRPC receiver
+      - "4318:4318" # OTLP HTTP receiver
+  signoz-telemetrystore-migrator:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    container_name: signoz-telemetrystore-migrator
+    environment:
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate bootstrap &&
+        /signoz-otel-collector migrate sync up &&
+        /signoz-otel-collector migrate async up
+    restart: on-failure
+networks:
+  signoz-net:
+    name: signoz-net
+volumes:
+  clickhouse:
+    name: signoz-clickhouse
+  clickhouse-2:
+    name: signoz-clickhouse-2
+  clickhouse-3:
+    name: signoz-clickhouse-3
+  sqlite:
+    name: signoz-sqlite
+  zookeeper-1:
+    name: signoz-zookeeper-1
+  zookeeper-2:
+    name: signoz-zookeeper-2
+  zookeeper-3:
+    name: signoz-zookeeper-3

deploy/docker/docker-compose.yaml

@@ -0,0 +1,185 @@
+version: "3"
+x-common: &common
+  networks:
+    - signoz-net
+  restart: unless-stopped
+  logging:
+    options:
+      max-size: 50m
+      max-file: "3"
+x-clickhouse-defaults: &clickhouse-defaults
+  !!merge <<: *common
+  image: clickhouse/clickhouse-server:25.5.6
+  tty: true
+  labels:
+    signoz.io/scrape: "true"
+    signoz.io/port: "9363"
+    signoz.io/path: "/metrics"
+  depends_on:
+    init-clickhouse:
+      condition: service_completed_successfully
+    zookeeper-1:
+      condition: service_healthy
+  healthcheck:
+    test:
+      - CMD
+      - wget
+      - --spider
+      - -q
+      - 0.0.0.0:8123/ping
+    interval: 30s
+    timeout: 5s
+    retries: 3
+  ulimits:
+    nproc: 65535
+    nofile:
+      soft: 262144
+      hard: 262144
+  environment:
+    - CLICKHOUSE_SKIP_USER_SETUP=1
+x-zookeeper-defaults: &zookeeper-defaults
+  !!merge <<: *common
+  image: signoz/zookeeper:3.7.1
+  user: root
+  labels:
+    signoz.io/scrape: "true"
+    signoz.io/port: "9141"
+    signoz.io/path: "/metrics"
+  healthcheck:
+    test:
+      - CMD-SHELL
+      - curl -s -m 2 http://localhost:8080/commands/ruok | grep error | grep null
+    interval: 30s
+    timeout: 5s
+    retries: 3
+x-db-depend: &db-depend
+  !!merge <<: *common
+  depends_on:
+    clickhouse:
+      condition: service_healthy
+services:
+  init-clickhouse:
+    !!merge <<: *common
+    image: clickhouse/clickhouse-server:25.5.6
+    container_name: signoz-init-clickhouse
+    command:
+      - bash
+      - -c
+      - |
+        version="v0.0.1"
+        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
+        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
+        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
+        cd /tmp
+        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
+        tar -xvzf histogram-quantile.tar.gz
+        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
+    restart: on-failure
+    volumes:
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+  zookeeper-1:
+    !!merge <<: *zookeeper-defaults
+    container_name: signoz-zookeeper-1
+    # ports:
+    #   - "2181:2181"
+    #   - "2888:2888"
+    #   - "3888:3888"
+    volumes:
+      - zookeeper-1:/bitnami/zookeeper
+    environment:
+      - ZOO_SERVER_ID=1
+      - ALLOW_ANONYMOUS_LOGIN=yes
+      - ZOO_AUTOPURGE_INTERVAL=1
+      - ZOO_ENABLE_PROMETHEUS_METRICS=yes
+      - ZOO_PROMETHEUS_METRICS_PORT_NUMBER=9141
+  clickhouse:
+    !!merge <<: *clickhouse-defaults
+    container_name: signoz-clickhouse
+    # ports:
+    #   - "9000:9000"
+    #   - "8123:8123"
+    #   - "9181:9181"
+    volumes:
+      - ../common/clickhouse/config.xml:/etc/clickhouse-server/config.xml
+      - ../common/clickhouse/users.xml:/etc/clickhouse-server/users.xml
+      - ../common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
+      - ../common/clickhouse/user_scripts:/var/lib/clickhouse/user_scripts/
+      - ../common/clickhouse/cluster.xml:/etc/clickhouse-server/config.d/cluster.xml
+      - clickhouse:/var/lib/clickhouse/
+      # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
+  signoz:
+    !!merge <<: *db-depend
+    image: signoz/signoz:${VERSION:-v0.129.0}
+    container_name: signoz
+    ports:
+      - "8080:8080" # signoz port
+    volumes:
+      - sqlite:/var/lib/signoz/
+    environment:
+      - SIGNOZ_ALERTMANAGER_PROVIDER=signoz
+      - SIGNOZ_TELEMETRYSTORE_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_SQLSTORE_SQLITE_PATH=/var/lib/signoz/signoz.db
+      - SIGNOZ_TOKENIZER_JWT_SECRET=secret
+    healthcheck:
+      test:
+        - CMD
+        - wget
+        - --spider
+        - -q
+        - localhost:8080/api/v1/health
+      interval: 30s
+      timeout: 5s
+      retries: 3
+  otel-collector:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    container_name: signoz-otel-collector
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate sync check &&
+        /signoz-otel-collector --config=/etc/otel-collector-config.yaml --manager-config=/etc/manager-config.yaml --copy-path=/var/tmp/collector-config.yaml
+    volumes:
+      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+      - ../common/signoz/otel-collector-opamp-config.yaml:/etc/manager-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
+      - LOW_CARDINAL_EXCEPTION_GROUPING=false
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    ports:
+      # - "1777:1777"     # pprof extension
+      - "4317:4317" # OTLP gRPC receiver
+      - "4318:4318" # OTLP HTTP receiver
+  signoz-telemetrystore-migrator:
+    !!merge <<: *db-depend
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-v0.144.5}
+    container_name: signoz-telemetrystore-migrator
+    environment:
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_DSN=tcp://clickhouse:9000
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_CLUSTER=cluster
+      - SIGNOZ_OTEL_COLLECTOR_CLICKHOUSE_REPLICATION=true
+      - SIGNOZ_OTEL_COLLECTOR_TIMEOUT=10m
+    entrypoint:
+      - /bin/sh
+    command:
+      - -c
+      - |
+        /signoz-otel-collector migrate bootstrap &&
+        /signoz-otel-collector migrate sync up &&
+        /signoz-otel-collector migrate async up
+    restart: on-failure
+networks:
+  signoz-net:
+    name: signoz-net
+volumes:
+  clickhouse:
+    name: signoz-clickhouse
+  sqlite:
+    name: signoz-sqlite
+  zookeeper-1:
+    name: signoz-zookeeper-1

deploy/docker/otel-collector-config.yaml

@@ -0,0 +1,118 @@
+connectors:
+  signozmeter:
+    metrics_flush_interval: 1h
+    dimensions:
+      - name: service.name
+      - name: deployment.environment
+      - name: host.name
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector
+          static_configs:
+          - targets:
+              - localhost:8888
+            labels:
+              job_name: otel-collector
+processors:
+  batch:
+    send_batch_size: 10000
+    send_batch_max_size: 11000
+    timeout: 10s
+  batch/meter:
+    send_batch_max_size: 25000
+    send_batch_size: 20000
+    timeout: 1s
+  resourcedetection:
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    detectors: [env, system]
+    timeout: 2s
+  signozspanmetrics/delta:
+    metrics_exporter: signozclickhousemetrics
+    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
+    enable_exp_histogram: true
+    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
+      - name: service.version
+      - name: browser.platform
+      - name: browser.mobile
+      - name: k8s.cluster.name
+      - name: k8s.node.name
+      - name: k8s.namespace.name
+      - name: host.name
+      - name: host.type
+      - name: container.name
+extensions:
+  health_check:
+    endpoint: 0.0.0.0:13133
+  pprof:
+    endpoint: 0.0.0.0:1777
+exporters:
+  clickhousetraces:
+    datasource: tcp://clickhouse:9000/signoz_traces
+    low_cardinal_exception_grouping: ${env:LOW_CARDINAL_EXCEPTION_GROUPING}
+    use_new_schema: true
+  signozclickhousemetrics:
+    dsn: tcp://clickhouse:9000/signoz_metrics
+  clickhouselogsexporter:
+    dsn: tcp://clickhouse:9000/signoz_logs
+    timeout: 10s
+    use_new_schema: true
+  signozclickhousemeter:
+    dsn: tcp://clickhouse:9000/signoz_meter
+    timeout: 45s
+    sending_queue:
+      enabled: false
+  metadataexporter:
+    cache:
+      provider: in_memory
+    dsn: tcp://clickhouse:9000/signoz_metadata
+    enabled: true
+    timeout: 45s
+service:
+  telemetry:
+    logs:
+      encoding: json
+  extensions:
+    - health_check
+    - pprof
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [signozspanmetrics/delta, batch]
+      exporters: [clickhousetraces, metadataexporter, signozmeter]
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+    metrics/prometheus:
+      receivers: [prometheus]
+      processors: [batch]
+      exporters: [signozclickhousemetrics, metadataexporter, signozmeter]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [clickhouselogsexporter, metadataexporter, signozmeter]
+    metrics/meter:
+      receivers: [signozmeter]
+      processors: [batch/meter]
+      exporters: [signozclickhousemeter]

deploy/install.sh

@@ -2,24 +2,562 @@
 
 set -o errexit
 
+# Variables
+BASE_DIR="$(dirname "$(readlink -f "$0")")"
+DOCKER_STANDALONE_DIR="docker"
+DOCKER_SWARM_DIR="docker-swarm" # TODO: Add docker swarm support
+
 # Regular Colors
-Yellow='\033[0;33m' # Yellow
-Green='\033[0;32m'  # Green
-NC='\033[0m'        # No Color
+Black='\033[0;30m'        # Black
+Red='\[\e[0;31m\]'        # Red
+Green='\033[0;32m'        # Green
+Yellow='\033[0;33m'       # Yellow
+Blue='\033[0;34m'         # Blue
+Purple='\033[0;35m'       # Purple
+Cyan='\033[0;36m'         # Cyan
+White='\033[0;37m'        # White
+NC='\033[0m' # No Color
+
+is_command_present() {
+    type "$1" >/dev/null 2>&1
+}
+
+# Check whether 'wget' command exists.
+has_wget() {
+    has_cmd wget
+}
+
+# Check whether 'curl' command exists.
+has_curl() {
+    has_cmd curl
+}
+
+# Check whether the given command exists.
+has_cmd() {
+    command -v "$1" > /dev/null 2>&1
+}
+
+# Check if docker compose plugin is present
+has_docker_compose_plugin() {
+    docker compose version > /dev/null 2>&1
+}
+
+is_mac() {
+    [[ $OSTYPE == darwin* ]]
+}
+
+is_arm64(){
+    [[ `uname -m` == 'arm64' || `uname -m` == 'aarch64' ]]
+}
+
+check_os() {
+    if is_mac; then
+        package_manager="brew"
+        desired_os=1
+        os="Mac"
+        return
+    fi
+
+    if is_arm64; then
+        arch="arm64"
+        arch_official="aarch64"
+    else
+        arch="amd64"
+        arch_official="x86_64"
+    fi
+
+    platform=$(uname -s | tr '[:upper:]' '[:lower:]')
+
+    os_name="$(cat /etc/*-release | awk -F= '$1 == "NAME" { gsub(/"/, ""); print $2; exit }')"
+
+    case "$os_name" in
+        Ubuntu*|Pop!_OS)
+            desired_os=1
+            os="ubuntu"
+            package_manager="apt-get"
+            ;;
+        Amazon\ Linux*)
+            desired_os=1
+            os="amazon linux"
+            package_manager="yum"
+            ;;
+        Debian*)
+            desired_os=1
+            os="debian"
+            package_manager="apt-get"
+            ;;
+        Linux\ Mint*)
+            desired_os=1
+            os="linux mint"
+            package_manager="apt-get"
+            ;;
+        Red\ Hat*)
+            desired_os=1
+            os="rhel"
+            package_manager="yum"
+            ;;
+        CentOS*)
+            desired_os=1
+            os="centos"
+            package_manager="yum"
+            ;;
+        Rocky*)
+            desired_os=1
+            os="centos"
+            package_manager="yum"
+            ;;
+        SLES*)
+            desired_os=1
+            os="sles"
+            package_manager="zypper"
+            ;;
+        openSUSE*)
+            desired_os=1
+            os="opensuse"
+            package_manager="zypper"
+            ;;
+        *)
+            desired_os=0
+            os="Not Found: $os_name"
+    esac
+}
+
+
+# This function checks if the relevant ports required by SigNoz are available or not
+# The script should error out in case they aren't available
+check_ports_occupied() {
+    local port_check_output
+    local ports_pattern="8080|4317"
+
+    if is_mac; then
+        port_check_output="$(netstat -anp tcp | awk '$6 == "LISTEN" && $4 ~ /^.*\.('"$ports_pattern"')$/')"
+    elif is_command_present ss; then
+        # The `ss` command seems to be a better/faster version of `netstat`, but is not available on all Linux
+        # distributions by default. Other distributions have `ss` but no `netstat`. So, we try for `ss` first, then
+        # fallback to `netstat`.
+        port_check_output="$(ss --all --numeric --tcp | awk '$1 == "LISTEN" && $4 ~ /^.*:('"$ports_pattern"')$/')"
+    elif is_command_present netstat; then
+        port_check_output="$(netstat --all --numeric --tcp | awk '$6 == "LISTEN" && $4 ~ /^.*:('"$ports_pattern"')$/')"
+    fi
+
+    if [[ -n $port_check_output ]]; then
+        send_event "port_not_available"
+
+        echo "+++++++++++ ERROR ++++++++++++++++++++++"
+        echo "SigNoz requires ports 8080 & 4317 to be open. Please shut down any other service(s) that may be running on these ports."
+        echo "You can run SigNoz on another port following this guide https://signoz.io/docs/install/troubleshooting/"
+        echo "++++++++++++++++++++++++++++++++++++++++"
+        echo ""
+        exit 1
+    fi
+}
+
+install_docker() {
+    echo "++++++++++++++++++++++++"
+    echo "Setting up docker repos"
+
+
+    if [[ $package_manager == apt-get ]]; then
+        apt_cmd="$sudo_cmd apt-get --yes --quiet"
+        $apt_cmd update
+        $apt_cmd install software-properties-common gnupg-agent
+        curl -fsSL "https://download.docker.com/linux/$os/gpg" | $sudo_cmd apt-key add -
+        $sudo_cmd add-apt-repository \
+            "deb [arch=$arch] https://download.docker.com/linux/$os $(lsb_release -cs) stable"
+        $apt_cmd update
+        echo "Installing docker"
+        $apt_cmd install docker-ce docker-ce-cli containerd.io
+    elif [[ $package_manager == zypper ]]; then
+        zypper_cmd="$sudo_cmd zypper --quiet --no-gpg-checks --non-interactive"
+        echo "Installing docker"
+        if [[ $os == sles ]]; then
+            os_sp="$(cat /etc/*-release | awk -F= '$1 == "VERSION_ID" { gsub(/"/, ""); print $2; exit }')"
+            os_arch="$(uname -i)"
+            SUSEConnect -p sle-module-containers/$os_sp/$os_arch -r ''
+        fi
+        $zypper_cmd install docker docker-runc containerd
+        $sudo_cmd systemctl enable docker.service
+    elif [[ $package_manager == yum && $os == 'amazon linux' ]]; then
+        echo
+        echo "Amazon Linux detected ... "
+        echo
+        # yum install docker
+        # service docker start
+        $sudo_cmd yum install -y amazon-linux-extras
+        $sudo_cmd amazon-linux-extras enable docker
+        $sudo_cmd yum install -y docker
+    else
+
+        yum_cmd="$sudo_cmd yum --assumeyes --quiet"
+        $yum_cmd install yum-utils
+        $sudo_cmd yum-config-manager --add-repo https://download.docker.com/linux/$os/docker-ce.repo
+        echo "Installing docker"
+        $yum_cmd install docker-ce docker-ce-cli containerd.io
+    fi
+}
+
+compose_version () {
+    local compose_version
+    compose_version="$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep 'tag_name' | cut -d\" -f4)"
+    echo "${compose_version:-v2.18.1}"
+}
+
+install_docker_compose() {
+    if [[ $package_manager == "apt-get" || $package_manager == "zypper" || $package_manager == "yum" ]]; then
+        if [[ ! -f /usr/bin/docker-compose ]];then
+            echo "++++++++++++++++++++++++"
+            echo "Installing docker-compose"
+            compose_url="https://github.com/docker/compose/releases/download/$(compose_version)/docker-compose-$platform-$arch_official"
+            echo "Downloading docker-compose from $compose_url"
+            $sudo_cmd curl -L "$compose_url" -o /usr/local/bin/docker-compose
+            $sudo_cmd chmod +x /usr/local/bin/docker-compose
+            $sudo_cmd ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
+            echo "docker-compose installed!"
+            echo ""
+        fi
+    else
+        send_event "docker_compose_not_found"
+
+        echo "+++++++++++ IMPORTANT READ ++++++++++++++++++++++"
+        echo "docker-compose not found! Please install docker-compose first and then continue with this installation."
+        echo "Refer https://docs.docker.com/compose/install/ for installing docker-compose."
+        echo "+++++++++++++++++++++++++++++++++++++++++++++++++"
+        exit 1
+    fi
+}
+
+start_docker() {
+    echo -e "🐳 Starting Docker ...\n"
+    if [[ $os == "Mac" ]]; then
+        open --background -a Docker && while ! docker system info > /dev/null 2>&1; do sleep 1; done
+    else
+        if ! $sudo_cmd systemctl is-active docker.service > /dev/null; then
+            echo "Starting docker service"
+            $sudo_cmd systemctl start docker.service
+        fi
+        if [[ -z $sudo_cmd ]]; then
+            if ! docker ps > /dev/null && true; then
+                request_sudo
+            fi
+        fi
+    fi
+}
+
+wait_for_containers_start() {
+    local timeout=$1
+
+    # The while loop is important because for-loops don't work for dynamic values
+    while [[ $timeout -gt 0 ]]; do
+        status_code="$(curl -s -o /dev/null -w "%{http_code}" "http://localhost:8080/api/v1/health?live=1" || true)"
+        if [[ status_code -eq 200 ]]; then
+            break
+        else
+            echo -ne "Waiting for all containers to start. This check will timeout in $timeout seconds ...\r\c"
+        fi
+        ((timeout--))
+        sleep 1
+    done
+
+    echo ""
+}
+
+bye() {  # Prints a friendly good bye message and exits the script.
+    # Switch back to the original directory
+    popd > /dev/null 2>&1
+    if [[ "$?" -ne 0 ]]; then
+        set +o errexit
+
+        echo "🔴 The containers didn't seem to start correctly. Please run the following command to check containers that may have errored out:"
+        echo ""
+        echo -e "cd ${DOCKER_STANDALONE_DIR}"
+        echo -e "$sudo_cmd $docker_compose_cmd ps -a"
+
+        echo "Please read our troubleshooting guide https://signoz.io/docs/install/troubleshooting/"
+        echo "or reach us for support in #help channel in our Slack Community https://signoz.io/slack"
+        echo "++++++++++++++++++++++++++++++++++++++++"
+
+        if [[ $email == "" ]]; then
+            echo -e "\n📨 Please share your email to receive support with the installation"
+            read -rp 'Email: ' email
+
+            while [[ $email == "" ]]
+            do
+                read -rp 'Email: ' email
+            done
+        fi
+
+        send_event "installation_support"
+
+
+        echo ""
+        echo -e "\nWe will reach out to you at the email provided shortly, Exiting for now. Bye! 👋 \n"
+        exit 0
+    fi
+}
+
+request_sudo() {
+    if hash sudo 2>/dev/null; then
+        echo -e "\n\n🙇 We will need sudo access to complete the installation."
+        if (( $EUID != 0 )); then
+            sudo_cmd="sudo"
+            echo -e "Please enter your sudo password, if prompted."
+            if ! $sudo_cmd -l | grep -e "NOPASSWD: ALL" > /dev/null && ! $sudo_cmd -v; then
+                echo "Need sudo privileges to proceed with the installation."
+                exit 1;
+            fi
+
+            echo -e "Got it! Thanks!! 🙏\n"
+            echo -e "Okay! We will bring up the SigNoz cluster from here 🚀\n"
+        fi
+	fi
+}
 
 echo ""
-echo -e "👋 Thank you for trying out SigNoz!"
-echo ""
-echo -e "SigNoz now installs and runs through ${Green}Foundry${NC}."
-echo ""
-echo -e "${Yellow}⚠️  This install script has been deprecated and is no longer maintained.${NC}"
-echo -e "${Yellow}⚠️  Please see https://github.com/SigNoz/signoz/blob/main/deploy/README.md for new installation and migrations to Foundry.${NC}"
-echo ""
-echo ""
-echo -e "Please follow the latest installation instructions here:"
-echo -e "${Green}👉 https://signoz.io/docs/install/docker/${NC}"
-echo ""
-echo -e "🙏 Thank you!"
+echo -e "👋 Thank you for trying out SigNoz! "
 echo ""
 
-exit 0
+sudo_cmd=""
+docker_compose_cmd=""
+
+# Check sudo permissions
+if (( $EUID != 0 )); then
+    echo "🟡 Running installer with non-sudo permissions."
+    echo "   In case of any failure or prompt, please consider running the script with sudo privileges."
+    echo ""
+else
+    sudo_cmd="sudo"
+fi
+
+# Checking OS and assigning package manager
+desired_os=0
+os=""
+email=""
+echo -e "🌏 Detecting your OS ...\n"
+check_os
+
+# Obtain unique installation id
+# sysinfo="$(uname -a)"
+# if [[ $? -ne 0 ]]; then
+#     uuid="$(uuidgen)"
+#     uuid="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
+#     sysinfo="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
+# fi
+if ! sysinfo="$(uname -a)"; then
+    uuid="$(uuidgen)"
+    uuid="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
+    sysinfo="${uuid:-$(cat /proc/sys/kernel/random/uuid)}"
+fi
+
+digest_cmd=""
+if hash shasum 2>/dev/null; then
+    digest_cmd="shasum -a 256"
+elif hash sha256sum 2>/dev/null; then
+    digest_cmd="sha256sum"
+elif hash openssl 2>/dev/null; then
+    digest_cmd="openssl dgst -sha256"
+fi
+
+if [[ -z $digest_cmd ]]; then
+    SIGNOZ_INSTALLATION_ID="$sysinfo"
+else
+    SIGNOZ_INSTALLATION_ID=$(echo "$sysinfo" | $digest_cmd | grep -E -o '[a-zA-Z0-9]{64}')
+fi
+
+setup_type='clickhouse'
+
+# Run bye if failure happens
+trap bye EXIT
+
+URL="https://api.segment.io/v1/track"
+HEADER_1="Content-Type: application/json"
+HEADER_2="Authorization: Basic OWtScko3b1BDR1BFSkxGNlFqTVBMdDVibGpGaFJRQnI="
+
+send_event() {
+    error=""
+
+    case "$1" in
+        'install_started')
+            event="Installation Started"
+            ;;
+        'os_not_supported')
+            event="Installation Error"
+            error="OS Not Supported"
+            ;;
+        'docker_not_installed')
+            event="Installation Error"
+            error="Docker not installed"
+            ;;
+        'docker_compose_not_found')
+            event="Installation Error"
+            event="Docker Compose not found"
+            ;;
+        'port_not_available')
+            event="Installation Error"
+            error="port not available"
+            ;;
+        'installation_error_checks')
+            event="Installation Error - Checks"
+            error="Containers not started"
+            others='"data": "some_checks",'
+            ;;
+        'installation_support')
+            event="Installation Support"
+            others='"email": "'"$email"'",'
+            ;;
+        'installation_success')
+            event="Installation Success"
+            ;;
+        'identify_successful_installation')
+            event="Identify Successful Installation"
+            others='"email": "'"$email"'",'
+            ;;
+        *)
+            print_error "unknown event type: $1"
+            exit 1
+            ;;
+    esac
+
+    if [[ "$error" != "" ]]; then
+        error='"error": "'"$error"'", '
+    fi
+
+    DATA='{ "anonymousId": "'"$SIGNOZ_INSTALLATION_ID"'", "event": "'"$event"'", "properties": { "os": "'"$os"'", '"$error $others"' "setup_type": "'"$setup_type"'" } }'
+
+    if has_curl; then
+        curl -sfL -d "$DATA" --header "$HEADER_1" --header "$HEADER_2" "$URL" > /dev/null 2>&1
+    elif has_wget; then
+        wget -q --post-data="$DATA" --header "$HEADER_1" --header "$HEADER_2" "$URL" > /dev/null 2>&1
+    fi
+}
+
+send_event "install_started"
+
+if [[ $desired_os -eq 0 ]]; then
+    send_event "os_not_supported"
+fi
+
+# Check is Docker daemon is installed and available. If not, the install & start Docker for Linux machines. We cannot automatically install Docker Desktop on Mac OS
+if ! is_command_present docker; then
+
+    if [[ $package_manager == "apt-get" || $package_manager == "zypper" || $package_manager == "yum" ]]; then
+        request_sudo
+        install_docker
+        # enable docker without sudo from next reboot
+        sudo usermod -aG docker "${USER}"
+    elif is_mac; then
+        echo ""
+        echo "+++++++++++ IMPORTANT READ ++++++++++++++++++++++"
+        echo "Docker Desktop must be installed manually on Mac OS to proceed. Docker can only be installed automatically on Ubuntu / openSUSE / SLES / Redhat / Cent OS"
+        echo "https://docs.docker.com/docker-for-mac/install/"
+        echo "++++++++++++++++++++++++++++++++++++++++++++++++"
+
+        send_event "docker_not_installed"
+        exit 1
+    else
+        echo ""
+        echo "+++++++++++ IMPORTANT READ ++++++++++++++++++++++"
+        echo "Docker must be installed manually on your machine to proceed. Docker can only be installed automatically on Ubuntu / openSUSE / SLES / Redhat / Cent OS"
+        echo "https://docs.docker.com/get-docker/"
+        echo "++++++++++++++++++++++++++++++++++++++++++++++++"
+
+        send_event "docker_not_installed"
+        exit 1
+    fi
+fi
+
+if has_docker_compose_plugin; then
+    echo "docker compose plugin is present, using it"
+    docker_compose_cmd="docker compose"
+# Install docker-compose
+else
+    docker_compose_cmd="docker-compose"
+    if ! is_command_present docker-compose; then
+        request_sudo
+        install_docker_compose
+    fi
+fi
+
+start_docker
+
+# Switch to the Docker Standalone directory
+pushd "${BASE_DIR}/${DOCKER_STANDALONE_DIR}" > /dev/null 2>&1
+
+# check for open ports, if signoz is not installed
+if is_command_present docker-compose; then
+    if $sudo_cmd $docker_compose_cmd ps | grep "signoz" | grep -q "healthy" > /dev/null 2>&1; then
+        echo "SigNoz already installed, skipping the occupied ports check"
+    else
+        check_ports_occupied
+    fi
+fi
+
+echo ""
+echo -e "\n🟡 Pulling the latest container images for SigNoz.\n"
+$sudo_cmd $docker_compose_cmd pull
+
+echo ""
+echo "🟡 Starting the SigNoz containers. It may take a few minutes ..."
+echo
+# The $docker_compose_cmd command does some nasty stuff for the `--detach` functionality. So we add a `|| true` so that the
+# script doesn't exit because this command looks like it failed to do it's thing.
+$sudo_cmd $docker_compose_cmd up --detach --remove-orphans || true
+
+wait_for_containers_start 60
+echo ""
+
+if [[ $status_code -ne 200 ]]; then
+    echo "+++++++++++ ERROR ++++++++++++++++++++++"
+    echo "🔴 The containers didn't seem to start correctly. Please run the following command to check containers that may have errored out:"
+    echo ""
+
+    echo "cd ${DOCKER_STANDALONE_DIR}"
+    echo "$sudo_cmd $docker_compose_cmd ps -a"
+    echo ""
+
+    echo "Try bringing down the containers and retrying the installation"
+    echo "cd ${DOCKER_STANDALONE_DIR}"
+    echo "$sudo_cmd $docker_compose_cmd down -v"
+    echo ""
+
+    echo "Please read our troubleshooting guide https://signoz.io/docs/install/troubleshooting/"
+    echo "or reach us on SigNoz for support https://signoz.io/slack"
+    echo "++++++++++++++++++++++++++++++++++++++++"
+
+    send_event "installation_error_checks"
+    exit 1
+
+else
+    send_event "installation_success"
+
+    echo "++++++++++++++++++ SUCCESS ++++++++++++++++++++++"
+    echo ""
+    echo "🟢 Your installation is complete!"
+    echo ""
+    echo -e "🟢 SigNoz is running on http://localhost:8080"
+    echo ""
+    echo "ℹ️  By default, retention period is set to 15 days for logs and traces, and 30 days for metrics."
+    echo -e "To change this, navigate to the General tab on the Settings page of SigNoz UI. For more details, refer to https://signoz.io/docs/userguide/retention-period \n"
+
+    echo "ℹ️  To bring down SigNoz and clean volumes:"
+    echo ""
+    echo "cd ${DOCKER_STANDALONE_DIR}"
+    echo "$sudo_cmd $docker_compose_cmd down -v"
+
+    echo ""
+    echo "+++++++++++++++++++++++++++++++++++++++++++++++++"
+    echo ""
+    echo "👉 Need help in Getting Started?"
+    echo -e "Join us on Slack https://signoz.io/slack"
+    echo ""
+    echo -e "\n📨 Please share your email to receive support & updates about SigNoz!"
+    read -rp 'Email: ' email
+
+    while [[ $email == "" ]]
+    do
+        read -rp 'Email: ' email
+    done
+
+    send_event "identify_successful_installation"
+fi
+
+echo -e "\n🙏 Thank you!\n"

docs/api/openapi.yml

@@ -659,28 +659,6 @@ components:
         refreshToken:
           type: string
       type: object
-    AuthtypesPostableUser:
-      properties:
-        displayName:
-          type: string
-        email:
-          type: string
-        frontendBaseUrl:
-          type: string
-        userRoles:
-          items:
-            $ref: '#/components/schemas/AuthtypesPostableUserRole'
-          type: array
-      required:
-      - email
-      type: object
-    AuthtypesPostableUserRole:
-      properties:
-        id:
-          type: string
-      required:
-      - id
-      type: object
     AuthtypesRelation:
       enum:
       - create
@@ -10205,7 +10183,7 @@ paths:
       - global
   /api/v1/invite:
     post:
-      deprecated: true
+      deprecated: false
       description: This endpoint creates an invite for a user
       operationId: CreateInvite
       requestBody:
@@ -10268,7 +10246,7 @@ paths:
       - users
   /api/v1/invite/bulk:
     post:
-      deprecated: true
+      deprecated: false
       description: This endpoint creates a bulk invite for a user
       operationId: CreateBulkInvite
       requestBody:
@@ -13109,7 +13087,7 @@ paths:
       - tracedetail
   /api/v1/user:
     get:
-      deprecated: true
+      deprecated: false
       description: This endpoint lists all users
       operationId: ListUsersDeprecated
       responses:
@@ -13157,9 +13135,9 @@ paths:
       - users
   /api/v1/user/{id}:
     delete:
-      deprecated: true
+      deprecated: false
       description: This endpoint deletes the user by id
-      operationId: DeleteUserDeprecated
+      operationId: DeleteUser
       parameters:
       - in: path
         name: id
@@ -13202,7 +13180,7 @@ paths:
       tags:
       - users
     get:
-      deprecated: true
+      deprecated: false
       description: This endpoint returns the user by id
       operationId: GetUserDeprecated
       parameters:
@@ -13259,7 +13237,7 @@ paths:
       tags:
       - users
     put:
-      deprecated: true
+      deprecated: false
       description: This endpoint updates the user by id
       operationId: UpdateUserDeprecated
       parameters:
@@ -13328,7 +13306,7 @@ paths:
       - users
   /api/v1/user/me:
     get:
-      deprecated: true
+      deprecated: false
       description: This endpoint returns the user I belong to
       operationId: GetMyUserDeprecated
       responses:
@@ -20744,114 +20722,7 @@ paths:
       summary: List users v2
       tags:
       - users
-    post:
-      deprecated: false
-      description: This endpoint creates a user for the organization
-      operationId: CreateUser
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AuthtypesPostableUser'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "409":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Conflict
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Create user
-      tags:
-      - users
   /api/v2/users/{id}:
-    delete:
-      deprecated: false
-      description: This endpoint deletes the user by id
-      operationId: DeleteUser
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - ADMIN
-      - tokenizer:
-        - ADMIN
-      summary: Delete user
-      tags:
-      - users
     get:
       deprecated: false
       description: This endpoint returns the user by id

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

@@ -98,15 +98,6 @@ func (ah *APIHandler) getFeatureFlags(w http.ResponseWriter, r *http.Request) {
 		Route:      "",
 	})
 
-	aiObservability := ah.Signoz.Flagger.BooleanOrEmpty(ctx, flagger.FeatureEnableAIObservability, evalCtx)
-	featureSet = append(featureSet, &licensetypes.Feature{
-		Name:       valuer.NewString(flagger.FeatureEnableAIObservability.String()),
-		Active:     aiObservability,
-		Usage:      0,
-		UsageLimit: -1,
-		Route:      "",
-	})
-
 	if constants.IsDotMetricsEnabled {
 		for idx, feature := range featureSet {
 			if feature.Name == licensetypes.DotMetricsEnabled {

frontend/jest.setup.ts

@@ -29,18 +29,6 @@ if (!HTMLElement.prototype.scrollIntoView) {
 	HTMLElement.prototype.scrollIntoView = function (): void {};
 }
 
-// jsdom doesn't implement the Pointer Capture API, which Radix UI primitives
-// (e.g. @signozhq/ui Select) call when opening. Stub them so those components
-// can be exercised in tests.
-if (!HTMLElement.prototype.hasPointerCapture) {
-	HTMLElement.prototype.hasPointerCapture = function (): boolean {
-		return false;
-	};
-}
-if (!HTMLElement.prototype.releasePointerCapture) {
-	HTMLElement.prototype.releasePointerCapture = function (): void {};
-}
-
 if (typeof window.IntersectionObserver === 'undefined') {
 	class IntersectionObserverMock {
 		observe(): void {}

frontend/src/AppRoutes/pageComponents.ts

@@ -57,13 +57,6 @@ export const TraceFilter = Loadable(
 	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
 );
 
-export const TraceDetail = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetailV2/index'
-		),
-);
-
 export const TraceDetailOldRedirect = Loadable(
 	() =>
 		import(
@@ -122,13 +115,6 @@ export const DashboardWidget = Loadable(
 		import(/* webpackChunkName: "DashboardWidgetPage" */ 'pages/DashboardWidget'),
 );
 
-export const DashboardPanelEditorPage = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "DashboardPanelEditorPage" */ 'pages/DashboardPageV2/PanelEditorPage/PanelEditorPage'
-		),
-);
-
 export const EditRulesPage = Loadable(
 	() => import(/* webpackChunkName: "Alerts Edit Page" */ 'pages/EditRules'),
 );

frontend/src/AppRoutes/routes.ts

@@ -11,7 +11,6 @@ import {
 	ChannelsNew,
 	CreateNewAlerts,
 	DashboardPage,
-	DashboardPanelEditorPage,
 	DashboardsListPage,
 	DashboardWidget,
 	EditRulesPage,
@@ -197,13 +196,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'DASHBOARD_WIDGET',
 	},
-	{
-		path: ROUTES.DASHBOARD_PANEL_EDITOR,
-		exact: true,
-		component: DashboardPanelEditorPage,
-		isPrivate: true,
-		key: 'DASHBOARD_PANEL_EDITOR',
-	},
 	{
 		path: ROUTES.EDIT_ALERTS,
 		exact: true,

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -2258,32 +2258,6 @@ export interface AuthtypesPostableRotateTokenDTO {
 	refreshToken?: string;
 }
 
-export interface AuthtypesPostableUserRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
-export interface AuthtypesPostableUserDTO {
-	/**
-	 * @type string
-	 */
-	displayName?: string;
-	/**
-	 * @type string
-	 */
-	email: string;
-	/**
-	 * @type string
-	 */
-	frontendBaseUrl?: string;
-	/**
-	 * @type array
-	 */
-	userRoles?: AuthtypesPostableUserRoleDTO[];
-}
-
 export interface AuthtypesRoleDTO {
 	/**
 	 * @type string
@@ -9922,7 +9896,7 @@ export type ListUsersDeprecated200 = {
 	status: string;
 };
 
-export type DeleteUserDeprecatedPathParameters = {
+export type DeleteUserPathParameters = {
 	id: string;
 };
 export type GetUserDeprecatedPathParameters = {
@@ -10833,17 +10807,6 @@ export type ListUsers200 = {
 	status: string;
 };
 
-export type CreateUser201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteUserPathParameters = {
-	id: string;
-};
 export type GetUserPathParameters = {
 	id: string;
 };

frontend/src/api/generated/services/users/index.ts

@@ -18,12 +18,9 @@ import type {
 } from 'react-query';
 
 import type {
-	AuthtypesPostableUserDTO,
 	CreateInvite201,
 	CreateResetPasswordToken201,
 	CreateResetPasswordTokenPathParameters,
-	CreateUser201,
-	DeleteUserDeprecatedPathParameters,
 	DeleteUserPathParameters,
 	GetMyUser200,
 	GetMyUserDeprecated200,
@@ -172,7 +169,6 @@ export const invalidateGetResetPasswordTokenDeprecated = async (
 
 /**
  * This endpoint creates an invite for a user
- * @deprecated
  * @summary Create invite
  */
 export const createInvite = (
@@ -234,7 +230,6 @@ export type CreateInviteMutationBody =
 export type CreateInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Create invite
  */
 export const useCreateInvite = <
@@ -257,7 +252,6 @@ export const useCreateInvite = <
 };
 /**
  * This endpoint creates a bulk invite for a user
- * @deprecated
  * @summary Create bulk invite
  */
 export const createBulkInvite = (
@@ -319,7 +313,6 @@ export type CreateBulkInviteMutationBody =
 export type CreateBulkInviteMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Create bulk invite
  */
 export const useCreateBulkInvite = <
@@ -425,7 +418,6 @@ export const useResetPassword = <
 };
 /**
  * This endpoint lists all users
- * @deprecated
  * @summary List users
  */
 export const listUsersDeprecated = (signal?: AbortSignal) => {
@@ -471,7 +463,6 @@ export type ListUsersDeprecatedQueryResult = NonNullable<
 export type ListUsersDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary List users
  */
 
@@ -495,7 +486,6 @@ export function useListUsersDeprecated<
 }
 
 /**
- * @deprecated
  * @summary List users
  */
 export const invalidateListUsersDeprecated = async (
@@ -512,11 +502,10 @@ export const invalidateListUsersDeprecated = async (
 
 /**
  * This endpoint deletes the user by id
- * @deprecated
  * @summary Delete user
  */
-export const deleteUserDeprecated = (
-	{ id }: DeleteUserDeprecatedPathParameters,
+export const deleteUser = (
+	{ id }: DeleteUserPathParameters,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<void>({
@@ -526,23 +515,23 @@ export const deleteUserDeprecated = (
 	});
 };
 
-export const getDeleteUserDeprecatedMutationOptions = <
+export const getDeleteUserMutationOptions = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteUserDeprecated>>,
+		Awaited<ReturnType<typeof deleteUser>>,
 		TError,
-		{ pathParams: DeleteUserDeprecatedPathParameters },
+		{ pathParams: DeleteUserPathParameters },
 		TContext
 	>;
 }): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteUserDeprecated>>,
+	Awaited<ReturnType<typeof deleteUser>>,
 	TError,
-	{ pathParams: DeleteUserDeprecatedPathParameters },
+	{ pathParams: DeleteUserPathParameters },
 	TContext
 > => {
-	const mutationKey = ['deleteUserDeprecated'];
+	const mutationKey = ['deleteUser'];
 	const { mutation: mutationOptions } = options
 		? options.mutation &&
 			'mutationKey' in options.mutation &&
@@ -552,49 +541,46 @@ export const getDeleteUserDeprecatedMutationOptions = <
 		: { mutation: { mutationKey } };
 
 	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteUserDeprecated>>,
-		{ pathParams: DeleteUserDeprecatedPathParameters }
+		Awaited<ReturnType<typeof deleteUser>>,
+		{ pathParams: DeleteUserPathParameters }
 	> = (props) => {
 		const { pathParams } = props ?? {};
 
-		return deleteUserDeprecated(pathParams);
+		return deleteUser(pathParams);
 	};
 
 	return { mutationFn, ...mutationOptions };
 };
 
-export type DeleteUserDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteUserDeprecated>>
+export type DeleteUserMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteUser>>
 >;
 
-export type DeleteUserDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
+export type DeleteUserMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Delete user
  */
-export const useDeleteUserDeprecated = <
+export const useDeleteUser = <
 	TError = ErrorType<RenderErrorResponseDTO>,
 	TContext = unknown,
 >(options?: {
 	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteUserDeprecated>>,
+		Awaited<ReturnType<typeof deleteUser>>,
 		TError,
-		{ pathParams: DeleteUserDeprecatedPathParameters },
+		{ pathParams: DeleteUserPathParameters },
 		TContext
 	>;
 }): UseMutationResult<
-	Awaited<ReturnType<typeof deleteUserDeprecated>>,
+	Awaited<ReturnType<typeof deleteUser>>,
 	TError,
-	{ pathParams: DeleteUserDeprecatedPathParameters },
+	{ pathParams: DeleteUserPathParameters },
 	TContext
 > => {
-	return useMutation(getDeleteUserDeprecatedMutationOptions(options));
+	return useMutation(getDeleteUserMutationOptions(options));
 };
 /**
  * This endpoint returns the user by id
- * @deprecated
  * @summary Get user
  */
 export const getUserDeprecated = (
@@ -654,7 +640,6 @@ export type GetUserDeprecatedQueryResult = NonNullable<
 export type GetUserDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Get user
  */
 
@@ -681,7 +666,6 @@ export function useGetUserDeprecated<
 }
 
 /**
- * @deprecated
  * @summary Get user
  */
 export const invalidateGetUserDeprecated = async (
@@ -699,7 +683,6 @@ export const invalidateGetUserDeprecated = async (
 
 /**
  * This endpoint updates the user by id
- * @deprecated
  * @summary Update user
  */
 export const updateUserDeprecated = (
@@ -772,7 +755,6 @@ export type UpdateUserDeprecatedMutationError =
 	ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Update user
  */
 export const useUpdateUserDeprecated = <
@@ -801,7 +783,6 @@ export const useUpdateUserDeprecated = <
 };
 /**
  * This endpoint returns the user I belong to
- * @deprecated
  * @summary Get my user
  */
 export const getMyUserDeprecated = (signal?: AbortSignal) => {
@@ -847,7 +828,6 @@ export type GetMyUserDeprecatedQueryResult = NonNullable<
 export type GetMyUserDeprecatedQueryError = ErrorType<RenderErrorResponseDTO>;
 
 /**
- * @deprecated
  * @summary Get my user
  */
 
@@ -871,7 +851,6 @@ export function useGetMyUserDeprecated<
 }
 
 /**
- * @deprecated
  * @summary Get my user
  */
 export const invalidateGetMyUserDeprecated = async (
@@ -1230,168 +1209,6 @@ export const invalidateListUsers = async (
 	return queryClient;
 };
 
-/**
- * This endpoint creates a user for the organization
- * @summary Create user
- */
-export const createUser = (
-	authtypesPostableUserDTO?: BodyType<AuthtypesPostableUserDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateUser201>({
-		url: `/api/v2/users`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: authtypesPostableUserDTO,
-		signal,
-	});
-};
-
-export const getCreateUserMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createUser>>,
-		TError,
-		{ data?: BodyType<AuthtypesPostableUserDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createUser>>,
-	TError,
-	{ data?: BodyType<AuthtypesPostableUserDTO> },
-	TContext
-> => {
-	const mutationKey = ['createUser'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createUser>>,
-		{ data?: BodyType<AuthtypesPostableUserDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return createUser(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateUserMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createUser>>
->;
-export type CreateUserMutationBody =
-	| BodyType<AuthtypesPostableUserDTO>
-	| undefined;
-export type CreateUserMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Create user
- */
-export const useCreateUser = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createUser>>,
-		TError,
-		{ data?: BodyType<AuthtypesPostableUserDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createUser>>,
-	TError,
-	{ data?: BodyType<AuthtypesPostableUserDTO> },
-	TContext
-> => {
-	return useMutation(getCreateUserMutationOptions(options));
-};
-/**
- * This endpoint deletes the user by id
- * @summary Delete user
- */
-export const deleteUser = (
-	{ id }: DeleteUserPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v2/users/${id}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteUserMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteUser>>,
-		TError,
-		{ pathParams: DeleteUserPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteUser>>,
-	TError,
-	{ pathParams: DeleteUserPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteUser'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteUser>>,
-		{ pathParams: DeleteUserPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteUser(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteUserMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteUser>>
->;
-
-export type DeleteUserMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Delete user
- */
-export const useDeleteUser = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteUser>>,
-		TError,
-		{ pathParams: DeleteUserPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteUser>>,
-	TError,
-	{ pathParams: DeleteUserPathParameters },
-	TContext
-> => {
-	return useMutation(getDeleteUserMutationOptions(options));
-};
 /**
  * This endpoint returns the user by id
  * @summary Get user by user id

frontend/src/api/trace/getTraceV2.tsx

@@ -1,35 +0,0 @@
-import { ApiV2Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV2PayloadProps,
-	GetTraceV2SuccessResponse,
-} from 'types/api/trace/getTraceV2';
-
-const getTraceV2 = async (
-	props: GetTraceV2PayloadProps,
-): Promise<SuccessResponse<GetTraceV2SuccessResponse> | ErrorResponse> => {
-	let uncollapsedSpans = [...props.uncollapsedSpans];
-	if (!props.isSelectedSpanIDUnCollapsed) {
-		uncollapsedSpans = uncollapsedSpans.filter(
-			(node) => node !== props.selectedSpanId,
-		);
-	}
-	const postData: GetTraceV2PayloadProps = {
-		...props,
-		uncollapsedSpans,
-	};
-	const response = await axios.post<GetTraceV2SuccessResponse>(
-		`/traces/waterfall/${props.traceId}`,
-		omit(postData, 'traceId'),
-	);
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: response.data,
-	};
-};
-
-export default getTraceV2;

frontend/src/api/trace/getTraceV4.tsx

@@ -41,6 +41,7 @@ const getTraceV4 = async (
 	> & { spans: WireSpan[] | null };
 
 	// Derive 'service.name' from resource for convenience — only derived field
+	// todo(tech-debt): to remove use of this and to directly use service.name from resources.
 	const spans: SpanV3[] = (rawPayload.spans || []).map((span) => ({
 		...span,
 		'service.name': span.resource?.['service.name'] || '',

frontend/src/assets/TraceDetail/Flamegraph.tsx

@@ -1,25 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-function FlamegraphImg(): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	return (
-		<svg
-			width="14"
-			height="14"
-			viewBox="0 0 24 24"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-		>
-			<path
-				d="M8 3c1 3 2.5 3.5 3.5 4.5A5 5 0 0113 11a5 5 0 11-10 0c0-.3 0-.6.1-.9a2 2 0 103.3-2C4 5.5 7 3 8 3zM21 4h-8M20 14.5h-3M20 9.5h-3M21 20H4"
-				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
-				strokeWidth="2"
-				strokeLinecap="round"
-				strokeLinejoin="round"
-			/>
-		</svg>
-	);
-}
-
-export default FlamegraphImg;

frontend/src/components/SpanHoverCard/SpanHoverCard.styles.scss

@@ -1,106 +0,0 @@
-.span-hover-card {
-	.ant-popover-inner {
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 32%, transparent) 0%,
-			color-mix(in srgb, var(--card) 36%, transparent) 98.68%
-		);
-		padding: 12px 16px;
-		border: 1px solid var(--l1-border);
-
-		&::before {
-			content: '';
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			background: linear-gradient(
-				139deg,
-				color-mix(in srgb, var(--card) 32%, transparent) 0%,
-				color-mix(in srgb, var(--card) 36%, transparent) 98.68%
-			);
-			backdrop-filter: blur(20px);
-			border-radius: 4px;
-			z-index: -1;
-			will-change: background-color, backdrop-filter;
-		}
-	}
-
-	&__title {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		margin-bottom: 0.5rem;
-	}
-
-	&__operation {
-		color: var(--l1-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: 0.48px;
-	}
-
-	&__service {
-		font-size: 0.875rem;
-		color: var(--muted-foreground);
-		font-weight: 400;
-	}
-
-	&__error {
-		font-size: 0.75rem;
-		color: var(--danger-background);
-		font-weight: 500;
-	}
-
-	&__row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 8px;
-		gap: 16px;
-	}
-
-	&__label {
-		color: var(--muted-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-	}
-
-	&__value {
-		color: var(--l1-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 20px;
-		text-align: right;
-	}
-
-	&__relative-time {
-		display: flex;
-		align-items: center;
-		margin-top: 4px;
-		gap: 8px;
-		border-radius: 1px 0 0 1px;
-		background: linear-gradient(
-			90deg,
-			hsla(358, 75%, 59%, 0.2) 0%,
-			transparent 100%
-		);
-
-		&-icon {
-			width: 2px;
-			height: 20px;
-			flex-shrink: 0;
-			border-radius: 2px;
-			background: var(--danger-background);
-		}
-	}
-
-	&__relative-text {
-		color: var(--bg-cherry-300);
-		font-size: 12px;
-		line-height: 20px;
-	}
-}

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,103 +0,0 @@
-import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import dayjs from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import './SpanHoverCard.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-interface SpanHoverCardProps {
-	span: Span;
-	traceMetadata: ITraceMetadata;
-	children: ReactNode;
-}
-
-function SpanHoverCard({
-	span,
-	traceMetadata,
-	children,
-}: SpanHoverCardProps): JSX.Element {
-	const duration = span.durationNano / 1e6; // Convert nanoseconds to milliseconds
-	const { time: formattedDuration, timeUnitName } =
-		convertTimeToRelevantUnit(duration);
-
-	const { timezone } = useTimezone();
-
-	// Calculate relative start time from trace start
-	const relativeStartTime = span.timestamp - traceMetadata.startTime;
-	const { time: relativeTime, timeUnitName: relativeTimeUnit } =
-		convertTimeToRelevantUnit(relativeStartTime);
-
-	// Format absolute start time
-	const startTimeFormatted = dayjs(span.timestamp)
-		.tz(timezone.value)
-		.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS);
-
-	const getContent = (): JSX.Element => (
-		<div className="span-hover-card">
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Duration:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{toFixed(formattedDuration, 2)}
-					{timeUnitName}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Events:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{span.event?.length || 0}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__row">
-				<Typography.Text className="span-hover-card__label">
-					Start time:
-				</Typography.Text>
-				<Typography.Text className="span-hover-card__value">
-					{startTimeFormatted}
-				</Typography.Text>
-			</div>
-			<div className="span-hover-card__relative-time">
-				<div className="span-hover-card__relative-time-icon" />
-				<Typography.Text className="span-hover-card__relative-text">
-					{toFixed(relativeTime, 2)}
-					{relativeTimeUnit} after trace start
-				</Typography.Text>
-			</div>
-		</div>
-	);
-
-	return (
-		<Popover
-			title={
-				<div className="span-hover-card__title">
-					<Typography.Text className="span-hover-card__operation">
-						{span.name}
-					</Typography.Text>
-				</div>
-			}
-			mouseEnterDelay={0.2}
-			content={getContent()}
-			trigger="hover"
-			rootClassName="span-hover-card"
-			autoAdjustOverflow
-			arrow={false}
-		>
-			{children}
-		</Popover>
-	);
-}
-
-export default SpanHoverCard;

frontend/src/components/SpanHoverCard/__tests__/SpanHoverCard.test.tsx

@@ -1,291 +0,0 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
-import { TimezoneContextType } from 'providers/Timezone';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanHoverCard from '../SpanHoverCard';
-
-// Mock timezone provider so SpanHoverCard can use useTimezone without a real context
-jest.mock('providers/Timezone', () => ({
-	__esModule: true,
-	useTimezone: (): TimezoneContextType => ({
-		timezone: {
-			name: 'Coordinated Universal Time — UTC, GMT',
-			value: 'UTC',
-			offset: 'UTC',
-			searchIndex: 'UTC',
-		},
-		browserTimezone: {
-			name: 'Coordinated Universal Time — UTC, GMT',
-			value: 'UTC',
-			offset: 'UTC',
-			searchIndex: 'UTC',
-		},
-		updateTimezone: jest.fn(),
-		formatTimezoneAdjustedTimestamp: jest.fn(() => 'mock-date'),
-		isAdaptationEnabled: true,
-		setIsAdaptationEnabled: jest.fn(),
-	}),
-}));
-
-// Mock dayjs for testing, including timezone helpers used in timezoneUtils
-jest.mock('dayjs', () => {
-	const mockDayjsInstance: any = {};
-
-	mockDayjsInstance.format = jest.fn((formatString: string) =>
-		// Match the DD_MMM_YYYY_HH_MM_SS format: 'DD MMM YYYY, HH:mm:ss'
-		formatString === 'DD MMM YYYY, HH:mm:ss'
-			? '15 Mar 2024, 14:23:45'
-			: 'mock-date',
-	);
-
-	// Support chaining: dayjs().tz(timezone).format(...) and dayjs().tz(timezone).utcOffset()
-	mockDayjsInstance.tz = jest.fn(() => mockDayjsInstance);
-	mockDayjsInstance.utcOffset = jest.fn(() => 0);
-
-	const mockDayjs = jest.fn(() => mockDayjsInstance);
-
-	Object.assign(mockDayjs, {
-		extend: jest.fn(),
-		// Support dayjs.tz.guess()
-		tz: { guess: jest.fn(() => 'UTC') },
-	});
-
-	return mockDayjs;
-});
-
-const HOVER_ELEMENT_ID = 'hover-element';
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	traceId: 'test-trace-id',
-	rootSpanId: 'root-span-id',
-	parentSpanId: 'parent-span-id',
-	name: 'GET /api/users',
-	timestamp: 1679748225000000,
-	durationNano: 150000000,
-	serviceName: 'user-service',
-	kind: 1,
-	hasError: false,
-	level: 1,
-	references: [],
-	tagMap: {},
-	event: [
-		{
-			name: 'event1',
-			timeUnixNano: 1679748225100000,
-			attributeMap: {},
-			isError: false,
-		},
-		{
-			name: 'event2',
-			timeUnixNano: 1679748225200000,
-			attributeMap: {},
-			isError: false,
-		},
-	],
-	rootName: 'root-span',
-	statusMessage: '',
-	statusCodeString: 'OK',
-	spanKind: 'server',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 1,
-};
-
-const mockTraceMetadata = {
-	startTime: 1679748225000000,
-	endTime: 1679748226000000,
-};
-
-describe('SpanHoverCard', () => {
-	beforeEach(() => {
-		jest.useFakeTimers();
-	});
-
-	afterEach(() => {
-		jest.useRealTimers();
-	});
-
-	it('renders child element correctly', () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid="child-element">Hover me</div>
-			</SpanHoverCard>,
-		);
-
-		expect(screen.getByTestId('child-element')).toBeInTheDocument();
-		expect(screen.getByText('Hover me')).toBeInTheDocument();
-	});
-
-	it('shows popover after 0.2 second delay on hover', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Hover for details</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover over the element
-		fireEvent.mouseEnter(hoverElement);
-
-		// Popover should NOT appear immediately
-		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
-
-		// Advance time by 0.5 seconds
-		act(() => {
-			jest.advanceTimersByTime(200);
-		});
-
-		// Now popover should appear
-		expect(screen.getByText('Duration:')).toBeInTheDocument();
-	});
-
-	it('does not show popover if hover is too brief', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Quick hover test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Quick hover and unhover (less than the 0.2s delay)
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(100); // Only 0.1 seconds
-		});
-		fireEvent.mouseLeave(hoverElement);
-
-		// Advance past the full delay
-		act(() => {
-			jest.advanceTimersByTime(400);
-		});
-
-		// Popover should not appear
-		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
-	});
-
-	it('displays span information in popover content after delay', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Test span</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		// Check that popover shows span operation name in title
-		expect(screen.getByText('GET /api/users')).toBeInTheDocument();
-
-		// Check duration information
-		expect(screen.getByText('Duration:')).toBeInTheDocument();
-		expect(screen.getByText('150ms')).toBeInTheDocument();
-
-		// Check events count
-		expect(screen.getByText('Events:')).toBeInTheDocument();
-		expect(screen.getByText('2')).toBeInTheDocument();
-
-		// Check start time label
-		expect(screen.getByText('Start time:')).toBeInTheDocument();
-	});
-
-	it('displays date in DD MMM YYYY, HH:mm:ss format with seconds', async () => {
-		render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Date format test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		// Verify the DD MMM YYYY, HH:mm:ss format is displayed
-		expect(screen.getByText('15 Mar 2024, 14:23:45')).toBeInTheDocument();
-	});
-
-	it('displays relative time information', async () => {
-		const spanWithRelativeTime: Span = {
-			...mockSpan,
-			timestamp: mockTraceMetadata.startTime + 1000000, // 1 second later
-		};
-
-		render(
-			<SpanHoverCard span={spanWithRelativeTime} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Relative time test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		// Check relative time display
-		expect(screen.getByText(/after trace start/)).toBeInTheDocument();
-	});
-
-	it('handles spans with no events correctly', async () => {
-		const spanWithoutEvents: Span = {
-			...mockSpan,
-			event: [],
-		};
-
-		render(
-			<SpanHoverCard span={spanWithoutEvents} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>No events test</div>
-			</SpanHoverCard>,
-		);
-
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-
-		// Hover and wait for popover
-		fireEvent.mouseEnter(hoverElement);
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-
-		expect(screen.getByText('Events:')).toBeInTheDocument();
-		expect(screen.getByText('0')).toBeInTheDocument();
-	});
-
-	it('verifies mouseEnterDelay prop is set to 0.5', () => {
-		const { container } = render(
-			<SpanHoverCard span={mockSpan} traceMetadata={mockTraceMetadata}>
-				<div data-testid={HOVER_ELEMENT_ID}>Delay test</div>
-			</SpanHoverCard>,
-		);
-
-		// The mouseEnterDelay prop should be set on the Popover component
-		// This test verifies the implementation includes the delay
-		const popover = container.querySelector('.ant-popover');
-		expect(popover).not.toBeInTheDocument(); // Initially not visible
-
-		// Hover to trigger delay mechanism
-		const hoverElement = screen.getByTestId(HOVER_ELEMENT_ID);
-		fireEvent.mouseEnter(hoverElement);
-
-		// Should not appear before delay
-		expect(screen.queryByText('Duration:')).not.toBeInTheDocument();
-
-		// Should appear after delay
-		act(() => {
-			jest.advanceTimersByTime(500);
-		});
-		expect(screen.getByText('Duration:')).toBeInTheDocument();
-	});
-});

frontend/src/constants/features.ts

@@ -12,5 +12,4 @@ export enum FeatureKeys {
 	USE_JSON_BODY = 'use_json_body',
 	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
 	USE_DASHBOARD_V2 = 'use_dashboard_v2',
-	EMABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 }

frontend/src/constants/localStorage.ts

@@ -44,5 +44,4 @@ export enum LOCALSTORAGE {
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
 	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 	DASHBOARDS_LIST_VIEWS = 'DASHBOARDS_LIST_VIEWS',
-	DASHBOARD_V2_PANEL_COLUMN_WIDTHS = 'DASHBOARD_V2_PANEL_COLUMN_WIDTHS',
 }

frontend/src/constants/routes.ts

@@ -24,7 +24,6 @@ const ROUTES = {
 	ALL_DASHBOARD: '/dashboard',
 	DASHBOARD: '/dashboard/:dashboardId',
 	DASHBOARD_WIDGET: '/dashboard/:dashboardId/:widgetId',
-	DASHBOARD_PANEL_EDITOR: '/dashboard/:dashboardId/panel/:panelId',
 	EDIT_ALERTS: '/alerts/edit',
 	LIST_ALL_ALERT: '/alerts',
 	ALERTS_NEW: '/alerts/new',

frontend/src/container/AppLayout/index.tsx

@@ -408,9 +408,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const isPublicDashboard = pathname.startsWith('/public/dashboard/');
 	const isAIAssistantPage = pathname.startsWith('/ai-assistant/');
-	// The V2 panel editor is a chromeless full-page route (no side nav / top nav),
-	// like the onboarding and public-dashboard screens.
-	const isPanelEditorV2 = routeKey === 'DASHBOARD_PANEL_EDITOR';
 
 	const renderFullScreen =
 		pathname === ROUTES.GET_STARTED ||
@@ -421,8 +418,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT ||
 		pathname === ROUTES.GET_STARTED_AWS_MONITORING ||
 		pathname === ROUTES.GET_STARTED_AZURE_MONITORING ||
-		isPublicDashboard ||
-		isPanelEditorV2;
+		isPublicDashboard;
 
 	const [showTrialExpiryBanner, setShowTrialExpiryBanner] = useState(false);
 

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.styles.scss

@@ -7,17 +7,15 @@
 
 	&--legend-right {
 		flex-direction: row;
+
+		.chart-layout__legend-wrapper {
+			padding-left: 0 !important;
+		}
 	}
 
 	&__legend-wrapper {
-		// The inline height is the legend rectangle from calculateChartDimensions;
-		// border-box keeps the padding inside it so the wrapper doesn't grow past
-		// that height and steal space from the chart. overflow:hidden clips to the
-		// rectangle so the virtualized legend scrolls within it.
-		box-sizing: border-box;
-		min-height: 0;
-		overflow: hidden;
 		padding-left: 12px;
 		padding-bottom: 12px;
+		overflow: auto;
 	}
 }

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.styles.scss

@@ -1,108 +0,0 @@
-.flamegraph {
-	display: flex;
-	height: 30vh;
-	border-bottom: 1px solid var(--l1-border);
-
-	.flamegraph-chart {
-		padding: 15px;
-
-		.loading-skeleton {
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.flamegraph-stats {
-		display: flex;
-		flex-direction: column;
-		border-right: 1px solid var(--l1-border);
-		overflow-y: auto;
-		overflow-x: hidden;
-		padding: 16px 20px;
-
-		.exec-time-service {
-			display: flex;
-			height: 30px;
-			flex-shrink: 0;
-			justify-content: center;
-			align-items: center;
-			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-border);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-			margin-bottom: 16px;
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-			letter-spacing: -0.06px;
-		}
-
-		.stats {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-			overflow-y: auto;
-			overflow-x: hidden;
-
-			&::-webkit-scrollbar {
-				width: 0rem;
-			}
-
-			.value-row {
-				display: flex;
-				justify-content: space-between;
-
-				.service-name {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					width: 80%;
-
-					.service-text {
-						color: var(--l2-foreground);
-						font-family: 'Inter';
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						width: 80%;
-					}
-
-					.square-box {
-						height: 8px;
-						width: 8px;
-					}
-				}
-
-				.progress-service {
-					display: flex;
-					align-items: center;
-					width: 100px;
-					gap: 8px;
-					justify-content: flex-start;
-					flex-shrink: 0;
-
-					.service-progress-indicator {
-						width: fit-content;
-						--progress-width: 30px;
-					}
-
-					.percent-value {
-						color: var(--l1-foreground);
-						text-align: right;
-						font-family: 'Inter';
-						font-size: 12px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: normal;
-						letter-spacing: 0.48px;
-						font-variant-numeric: lining-nums tabular-nums slashed-zero;
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph.tsx

@@ -1,186 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Skeleton, Tooltip } from 'antd';
-import { Progress } from '@signozhq/ui/progress';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-import Spinner from 'components/Spinner';
-import { themeColors } from 'constants/theme';
-import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import { TraceFlamegraphStates } from './constants';
-import Error from './TraceFlamegraphStates/Error/Error';
-import NoData from './TraceFlamegraphStates/NoData/NoData';
-import Success from './TraceFlamegraphStates/Success/Success';
-
-import './PaginatedTraceFlamegraph.styles.scss';
-
-interface ITraceFlamegraphProps {
-	serviceExecTime: Record<string, number>;
-	startTime: number;
-	endTime: number;
-	traceFlamegraphStatsWidth: number;
-	selectedSpan: Span | undefined;
-}
-
-function TraceFlamegraph(props: ITraceFlamegraphProps): JSX.Element {
-	const {
-		serviceExecTime,
-		startTime,
-		endTime,
-		traceFlamegraphStatsWidth,
-		selectedSpan,
-	} = props;
-	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
-	const urlQuery = useUrlQuery();
-	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
-		urlQuery.get('spanId') || '',
-	);
-
-	useEffect(() => {
-		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
-	}, [urlQuery]);
-
-	const { data, isFetching, error } = useGetTraceFlamegraph({
-		traceId,
-		selectedSpanId: firstSpanAtFetchLevel,
-	});
-
-	// get the current state of trace flamegraph based on the API lifecycle
-	const traceFlamegraphState = useMemo(() => {
-		if (isFetching) {
-			if (
-				data &&
-				data.payload &&
-				data.payload.spans &&
-				data.payload.spans.length > 0
-			) {
-				return TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT;
-			}
-			return TraceFlamegraphStates.LOADING;
-		}
-		if (error) {
-			return TraceFlamegraphStates.ERROR;
-		}
-		if (
-			data &&
-			data.payload &&
-			data.payload.spans &&
-			data.payload.spans.length === 0
-		) {
-			return TraceFlamegraphStates.NO_DATA;
-		}
-
-		return TraceFlamegraphStates.SUCCESS;
-	}, [error, isFetching, data]);
-
-	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
-	const spans = useMemo(
-		() => data?.payload?.spans || [],
-		[data?.payload?.spans],
-	);
-
-	// get the content based on the current state of the trace waterfall
-	const getContent = useMemo(() => {
-		switch (traceFlamegraphState) {
-			case TraceFlamegraphStates.LOADING:
-				return (
-					<div className="loading-skeleton">
-						<Skeleton active paragraph={{ rows: 3 }} />
-					</div>
-				);
-			case TraceFlamegraphStates.ERROR:
-				return <Error error={error as AxiosError} />;
-			case TraceFlamegraphStates.NO_DATA:
-				return <NoData id={traceId} />;
-			case TraceFlamegraphStates.SUCCESS:
-			case TraceFlamegraphStates.FETCHING_WITH_OLD_DATA_PRESENT:
-				return (
-					<Success
-						spans={spans}
-						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
-						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
-						traceMetadata={{
-							startTime: data?.payload?.startTimestampMillis || 0,
-							endTime: data?.payload?.endTimestampMillis || 0,
-						}}
-						selectedSpan={selectedSpan}
-					/>
-				);
-			default:
-				return <Spinner tip="Fetching the trace!" />;
-		}
-	}, [
-		data?.payload?.endTimestampMillis,
-		data?.payload?.startTimestampMillis,
-		error,
-		firstSpanAtFetchLevel,
-		selectedSpan,
-		spans,
-		traceFlamegraphState,
-		traceId,
-	]);
-
-	const spread = useMemo(() => endTime - startTime, [endTime, startTime]);
-
-	return (
-		<div className="flamegraph">
-			<div
-				className="flamegraph-stats"
-				style={{ width: `${traceFlamegraphStatsWidth + 22}px` }}
-			>
-				<div className="exec-time-service">% exec time</div>
-				<div className="stats">
-					{Object.keys(serviceExecTime)
-						.sort((a, b) => {
-							if (spread <= 0) {
-								return 0;
-							}
-							const aValue = (serviceExecTime[a] * 100) / spread;
-							const bValue = (serviceExecTime[b] * 100) / spread;
-							return bValue - aValue;
-						})
-						.map((service) => {
-							const value =
-								spread <= 0 ? 0 : (serviceExecTime[service] * 100) / spread;
-							const color = generateColor(service, themeColors.traceDetailColors);
-							return (
-								<div key={service} className="value-row">
-									<section className="service-name">
-										<div className="square-box" style={{ backgroundColor: color }} />
-										<Tooltip title={service}>
-											<Typography.Text className="service-text" truncate={1}>
-												{service}
-											</Typography.Text>
-										</Tooltip>
-									</section>
-									<section className="progress-service">
-										<Progress
-											percent={parseFloat(value.toFixed(2))}
-											className="service-progress-indicator"
-											showInfo={false}
-										/>
-										<Typography.Text className="percent-value">
-											{parseFloat(value.toFixed(2))}%
-										</Typography.Text>
-									</section>
-								</div>
-							);
-						})}
-				</div>
-			</div>
-			<div
-				className="flamegraph-chart"
-				style={{ width: `calc(100% - ${traceFlamegraphStatsWidth + 22}px)` }}
-			>
-				{getContent}
-			</div>
-		</div>
-	);
-}
-
-export default TraceFlamegraph;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.styles.scss

@@ -1,23 +0,0 @@
-.error-flamegraph {
-	display: flex;
-	gap: 4px;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 15vh;
-
-	.error-flamegraph-img {
-		height: 32px;
-		width: 32px;
-	}
-
-	.no-data-text {
-		color: var(--muted-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Error/Error.tsx

@@ -1,32 +0,0 @@
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { AxiosError } from 'axios';
-
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
-import './Error.styles.scss';
-
-interface IErrorProps {
-	error: AxiosError;
-}
-
-function Error(props: IErrorProps): JSX.Element {
-	const { error } = props;
-
-	return (
-		<div className="error-flamegraph">
-			<img
-				src={noDataUrl}
-				alt="error-flamegraph"
-				className="error-flamegraph-img"
-			/>
-			<Tooltip title={error?.message}>
-				<Typography.Text className="no-data-text">
-					{error?.message || 'Something went wrong!'}
-				</Typography.Text>
-			</Tooltip>
-		</div>
-	);
-}
-
-export default Error;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/NoData/NoData.tsx

@@ -1,12 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-
-interface INoDataProps {
-	id: string;
-}
-
-function NoData(props: INoDataProps): JSX.Element {
-	const { id } = props;
-	return <Typography.Text>No Trace found with the id: {id} </Typography.Text>;
-}
-
-export default NoData;

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.styles.scss

@@ -1,49 +0,0 @@
-.trace-flamegraph {
-	height: 90%;
-	overflow-x: hidden;
-	overflow-y: auto;
-
-	.trace-flamegraph-virtuoso {
-		overflow-x: hidden;
-
-		.flamegraph-row {
-			display: flex;
-			align-items: center;
-			height: 18px;
-			padding-bottom: 6px;
-
-			.span-item {
-				position: absolute;
-				height: 12px;
-				background-color: yellow;
-				border-radius: 6px;
-				cursor: pointer;
-
-				.event-dot {
-					position: absolute;
-					top: 50%;
-					transform: translate(-50%, -50%) rotate(45deg);
-					width: 6px;
-					height: 6px;
-					background-color: var(--primary-background);
-					border: 1px solid var(--bg-robin-600);
-					cursor: pointer;
-					z-index: 1;
-
-					&.error {
-						background-color: var(--danger-background);
-						border-color: var(--bg-cherry-600);
-					}
-
-					&:hover {
-						transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
-					}
-				}
-			}
-		}
-
-		&::-webkit-scrollbar {
-			width: 0rem;
-		}
-	}
-}

frontend/src/container/PaginatedTraceFlamegraph/TraceFlamegraphStates/Success/Success.tsx

@@ -1,178 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useEffect,
-	useRef,
-	useState,
-} from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import { ListRange, Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { Tooltip } from 'antd';
-import Color from 'color';
-import TimelineV2 from 'components/TimelineV2/TimelineV2';
-import { themeColors } from 'constants/theme';
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
-import { Span } from 'types/api/trace/getTraceV2';
-import { toFixed } from 'utils/toFixed';
-
-import './Success.styles.scss';
-
-interface ITraceMetadata {
-	startTime: number;
-	endTime: number;
-}
-
-interface ISuccessProps {
-	spans: FlamegraphSpan[][];
-	firstSpanAtFetchLevel: string;
-	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
-	traceMetadata: ITraceMetadata;
-	selectedSpan: Span | undefined;
-}
-
-function Success(props: ISuccessProps): JSX.Element {
-	const {
-		spans,
-		setFirstSpanAtFetchLevel,
-		traceMetadata,
-		firstSpanAtFetchLevel,
-		selectedSpan,
-	} = props;
-	const { search } = useLocation();
-	const history = useHistory();
-	const isDarkMode = useIsDarkMode();
-	const virtuosoRef = useRef<VirtuosoHandle>(null);
-	const [hoveredSpanId, setHoveredSpanId] = useState<string>('');
-	const renderSpanLevel = useCallback(
-		(_: number, spans: FlamegraphSpan[]): JSX.Element => (
-			<div className="flamegraph-row">
-				{spans.map((span) => {
-					const spread = traceMetadata.endTime - traceMetadata.startTime;
-					const leftOffset =
-						((span.timestamp - traceMetadata.startTime) * 100) / spread;
-					let width = ((span.durationNano / 1e6) * 100) / spread;
-					if (width > 100) {
-						width = 100;
-					}
-					const toolTipText = `${span.name}`;
-					const searchParams = new URLSearchParams(search);
-
-					let color = generateColor(span.serviceName, themeColors.traceDetailColors);
-
-					const selectedSpanColor = isDarkMode
-						? Color(color).lighten(0.7)
-						: Color(color).darken(0.7);
-
-					if (span.hasError) {
-						color = `var(--danger-background)`;
-					}
-
-					return (
-						<Tooltip title={toolTipText} key={span.spanId}>
-							<div
-								className="span-item"
-								style={{
-									left: `${leftOffset}%`,
-									width: `${width}%`,
-									backgroundColor:
-										selectedSpan?.spanId === span.spanId || hoveredSpanId === span.spanId
-											? `${selectedSpanColor}`
-											: color,
-								}}
-								onMouseEnter={(): void => setHoveredSpanId(span.spanId)}
-								onMouseLeave={(): void => setHoveredSpanId('')}
-								onClick={(event): void => {
-									event.stopPropagation();
-									event.preventDefault();
-									searchParams.set('spanId', span.spanId);
-									history.replace({ search: searchParams.toString() });
-								}}
-							>
-								{span.event?.map((event) => {
-									const eventTimeMs = event.timeUnixNano / 1e6;
-									const eventOffsetPercent =
-										((eventTimeMs - span.timestamp) / (span.durationNano / 1e6)) * 100;
-									const clampedOffset = Math.max(1, Math.min(eventOffsetPercent, 99));
-									const { isError } = event;
-									const { time, timeUnitName } = convertTimeToRelevantUnit(
-										eventTimeMs - span.timestamp,
-									);
-									return (
-										<Tooltip
-											key={`${span.spanId}-event-${event.name}-${event.timeUnixNano}`}
-											title={`${event.name} @ ${toFixed(time, 2)} ${timeUnitName}`}
-										>
-											<div
-												className={`event-dot ${isError ? 'error' : ''}`}
-												style={{
-													left: `${clampedOffset}%`,
-												}}
-											/>
-										</Tooltip>
-									);
-								})}
-							</div>
-						</Tooltip>
-					);
-				})}
-			</div>
-		),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[traceMetadata.endTime, traceMetadata.startTime, selectedSpan, hoveredSpanId],
-	);
-
-	const handleRangeChanged = useCallback(
-		(range: ListRange) => {
-			// if there are less than 50 levels on any load that means a single API call is sufficient
-			if (spans.length < 50) {
-				return;
-			}
-
-			const { startIndex, endIndex } = range;
-			if (startIndex === 0 && spans[0][0].level !== 0) {
-				setFirstSpanAtFetchLevel(spans[0][0].spanId);
-			}
-
-			if (endIndex === spans.length - 1) {
-				setFirstSpanAtFetchLevel(spans[spans.length - 1][0].spanId);
-			}
-		},
-		[setFirstSpanAtFetchLevel, spans],
-	);
-
-	useEffect(() => {
-		const index = spans.findIndex(
-			(span) => span[0].spanId === firstSpanAtFetchLevel,
-		);
-
-		virtuosoRef.current?.scrollToIndex({
-			index,
-			behavior: 'auto',
-		});
-	}, [firstSpanAtFetchLevel, spans]);
-
-	return (
-		<>
-			<div className="trace-flamegraph">
-				<Virtuoso
-					ref={virtuosoRef}
-					className="trace-flamegraph-virtuoso"
-					data={spans}
-					itemContent={renderSpanLevel}
-					rangeChanged={handleRangeChanged}
-				/>
-			</div>
-			<TimelineV2
-				startTimestamp={traceMetadata.startTime}
-				endTimestamp={traceMetadata.endTime}
-				timelineHeight={22}
-			/>
-		</>
-	);
-}
-
-export default Success;

frontend/src/container/PaginatedTraceFlamegraph/constants.ts

@@ -1,7 +0,0 @@
-export enum TraceFlamegraphStates {
-	LOADING = 'LOADING',
-	SUCCESS = 'SUCCESS',
-	NO_DATA = 'NO_DATA',
-	ERROR = 'ERROR',
-	FETCHING_WITH_OLD_DATA_PRESENT = 'FETCHING_WTIH_OLD_DATA_PRESENT',
-}

frontend/src/container/SpanDetailsDrawer/Attributes/AttributeActions.tsx

@@ -1,202 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Spin, Tooltip } from 'antd';
-import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
-import cx from 'classnames';
-import { OPERATORS } from 'constants/antlrQueryConstants';
-import { useTraceActions } from 'hooks/trace/useTraceActions';
-import {
-	ArrowDownToDot,
-	ArrowUpFromDot,
-	Copy,
-	Ellipsis,
-	Pin,
-} from '@signozhq/icons';
-
-interface AttributeRecord {
-	field: string;
-	value: string;
-}
-
-interface AttributeActionsProps {
-	record: AttributeRecord;
-	isPinned?: boolean;
-	onTogglePin?: (fieldKey: string) => void;
-	showPinned?: boolean;
-	showCopyOptions?: boolean;
-}
-
-export default function AttributeActions({
-	record,
-	isPinned,
-	onTogglePin,
-	showPinned = true,
-	showCopyOptions = true,
-}: AttributeActionsProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [isFilterInLoading, setIsFilterInLoading] = useState<boolean>(false);
-	const [isFilterOutLoading, setIsFilterOutLoading] = useState<boolean>(false);
-
-	const { onAddToQuery, onGroupByAttribute, onCopyFieldName, onCopyFieldValue } =
-		useTraceActions();
-
-	const textToCopy = useMemo(() => {
-		const str = record.value == null ? '' : String(record.value);
-		// Remove surrounding double-quotes only (e.g., JSON-encoded string values)
-		return str.replace(/^"|"$/g, '');
-	}, [record.value]);
-
-	const handleFilterIn = useCallback(async (): Promise<void> => {
-		if (!onAddToQuery || isFilterInLoading) {
-			return;
-		}
-		setIsFilterInLoading(true);
-		try {
-			await Promise.resolve(
-				onAddToQuery(record.field, record.value, OPERATORS['=']),
-			);
-		} finally {
-			setIsFilterInLoading(false);
-		}
-	}, [onAddToQuery, record.field, record.value, isFilterInLoading]);
-
-	const handleFilterOut = useCallback(async (): Promise<void> => {
-		if (!onAddToQuery || isFilterOutLoading) {
-			return;
-		}
-		setIsFilterOutLoading(true);
-		try {
-			await Promise.resolve(
-				onAddToQuery(record.field, record.value, OPERATORS['!=']),
-			);
-		} finally {
-			setIsFilterOutLoading(false);
-		}
-	}, [onAddToQuery, record.field, record.value, isFilterOutLoading]);
-
-	const handleGroupBy = useCallback((): void => {
-		if (onGroupByAttribute) {
-			onGroupByAttribute(record.field);
-		}
-		setIsOpen(false);
-	}, [onGroupByAttribute, record.field]);
-
-	const handleCopyFieldName = useCallback((): void => {
-		if (onCopyFieldName) {
-			onCopyFieldName(record.field);
-		}
-		setIsOpen(false);
-	}, [onCopyFieldName, record.field]);
-
-	const handleCopyFieldValue = useCallback((): void => {
-		if (onCopyFieldValue) {
-			onCopyFieldValue(textToCopy);
-		}
-		setIsOpen(false);
-	}, [onCopyFieldValue, textToCopy]);
-
-	const handleTogglePin = useCallback((): void => {
-		onTogglePin?.(record.field);
-	}, [onTogglePin, record.field]);
-
-	const moreActionsContent = (
-		<div className="attribute-actions-menu">
-			<Button
-				className="group-by-clause"
-				type="text"
-				icon={<GroupByIcon />}
-				onClick={handleGroupBy}
-				block
-			>
-				Group By Attribute
-			</Button>
-			{showCopyOptions && (
-				<>
-					<Button
-						type="text"
-						icon={<Copy size={14} />}
-						onClick={handleCopyFieldName}
-						block
-					>
-						Copy Field Name
-					</Button>
-					<Button
-						type="text"
-						icon={<Copy size={14} />}
-						onClick={handleCopyFieldValue}
-						block
-					>
-						Copy Field Value
-					</Button>
-				</>
-			)}
-		</div>
-	);
-
-	return (
-		<div className={cx('action-btn', { 'action-btn--is-open': isOpen })}>
-			{showPinned && (
-				<Tooltip title={isPinned ? 'Unpin attribute' : 'Pin attribute'}>
-					<Button
-						className={`filter-btn periscope-btn ${isPinned ? 'pinned' : ''}`}
-						aria-label={isPinned ? 'Unpin attribute' : 'Pin attribute'}
-						icon={<Pin size={14} fill={isPinned ? 'currentColor' : 'none'} />}
-						onClick={handleTogglePin}
-					/>
-				</Tooltip>
-			)}
-			<Tooltip title="Filter for value">
-				<Button
-					className="filter-btn periscope-btn"
-					aria-label="Filter for value"
-					disabled={isFilterInLoading}
-					icon={
-						isFilterInLoading ? (
-							<Spin size="small" />
-						) : (
-							<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
-						)
-					}
-					onClick={handleFilterIn}
-				/>
-			</Tooltip>
-			<Tooltip title="Filter out value">
-				<Button
-					className="filter-btn periscope-btn"
-					aria-label="Filter out value"
-					disabled={isFilterOutLoading}
-					icon={
-						isFilterOutLoading ? (
-							<Spin size="small" />
-						) : (
-							<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
-						)
-					}
-					onClick={handleFilterOut}
-				/>
-			</Tooltip>
-			<Popover
-				open={isOpen}
-				onOpenChange={setIsOpen}
-				arrow={false}
-				content={moreActionsContent}
-				rootClassName="attribute-actions-content"
-				trigger="hover"
-				placement="bottomLeft"
-			>
-				<Button
-					data-testid="attribute-actions-more"
-					aria-label="More attribute actions"
-					icon={<Ellipsis size={14} />}
-					className="filter-btn periscope-btn"
-				/>
-			</Popover>
-		</div>
-	);
-}
-
-AttributeActions.defaultProps = {
-	isPinned: false,
-	showPinned: true,
-	showCopyOptions: true,
-	onTogglePin: undefined,
-};

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.styles.scss

@@ -1,151 +0,0 @@
-.attributes-corner {
-	display: flex;
-	flex-direction: column;
-
-	.no-data {
-		height: 400px;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.search-input {
-		margin: 12px;
-		width: auto;
-	}
-
-	.attributes-container {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding-block: 12px;
-
-		.item {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-			justify-content: flex-start;
-			position: relative;
-			padding: 2px 12px;
-
-			&:hover {
-				background-color: var(--l1-border);
-				.action-btn {
-					display: flex;
-				}
-			}
-
-			.item-key-wrapper {
-				display: flex;
-				align-items: center;
-				gap: 6px;
-
-				.pin-icon {
-					color: var(--bg-robin-400);
-					flex-shrink: 0;
-				}
-			}
-
-			.item-key {
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-
-			.value-wrapper {
-				display: flex;
-				padding: 2px 8px;
-				align-items: center;
-				width: fit-content;
-				max-width: 100%;
-				gap: 8px;
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-
-				.copy-wrapper {
-					overflow: hidden;
-				}
-
-				.item-value {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: 0.56px;
-				}
-			}
-
-			.action-btn {
-				display: none;
-
-				&--is-open {
-					display: flex;
-				}
-				position: absolute;
-				right: 8px;
-				top: 50%;
-				transform: translateY(-50%);
-				gap: 4px;
-				border-radius: 4px;
-				padding: 2px;
-
-				.filter-btn {
-					display: flex;
-					align-items: center;
-					border: none;
-					box-shadow: none;
-					border-radius: 2px;
-					background: var(--l1-border);
-					padding: 4px;
-					gap: 3px;
-					height: 24px;
-					width: 24px;
-
-					&:hover {
-						background: var(--l3-background);
-					}
-				}
-			}
-		}
-	}
-
-	.border-top {
-		border-top: 1px solid var(--l1-border);
-	}
-}
-
-.attribute-actions-menu {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-
-	.ant-btn {
-		text-align: left;
-		height: auto;
-		padding: 6px 12px;
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		&:hover {
-			background-color: var(--l1-border);
-		}
-	}
-
-	.group-by-clause {
-		color: var(--text-primary);
-	}
-}
-
-.attribute-actions-content {
-	.ant-popover-inner {
-		padding: 8px;
-		min-width: 160px;
-	}
-}

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,135 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
-import { flattenObject } from 'container/LogDetailedView/utils';
-import { usePinnedAttributes } from 'hooks/spanDetails/usePinnedAttributes';
-import { Pin } from '@signozhq/icons';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import NoData from '../NoData/NoData';
-import AttributeActions from './AttributeActions';
-
-import './Attributes.styles.scss';
-
-interface AttributeRecord {
-	field: string;
-	value: string;
-}
-
-interface IAttributesProps {
-	span: Span;
-	isSearchVisible: boolean;
-	shouldFocusOnToggle?: boolean;
-}
-
-function Attributes(props: IAttributesProps): JSX.Element {
-	const { span, isSearchVisible, shouldFocusOnToggle } = props;
-	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
-
-	const flattenSpanData: Record<string, string> = useMemo(
-		() => (span.tagMap ? flattenObject(span.tagMap) : {}),
-		[span],
-	);
-
-	const availableAttributes = useMemo(
-		() => Object.keys(flattenSpanData),
-		[flattenSpanData],
-	);
-
-	const { pinnedAttributes, togglePin } =
-		usePinnedAttributes(availableAttributes);
-
-	const sortPinnedAttributes = useCallback(
-		(data: AttributeRecord[]): AttributeRecord[] =>
-			data.sort((a, b) => {
-				const aIsPinned = pinnedAttributes[a.field];
-				const bIsPinned = pinnedAttributes[b.field];
-
-				if (aIsPinned && !bIsPinned) {
-					return -1;
-				}
-				if (!aIsPinned && bIsPinned) {
-					return 1;
-				}
-
-				// Within same pinning status, maintain alphabetical order
-				return a.field.localeCompare(b.field);
-			}),
-		[pinnedAttributes],
-	);
-
-	const datasource = useMemo(() => {
-		const filtered = Object.keys(flattenSpanData)
-			.filter((attribute) =>
-				attribute.toLowerCase().includes(fieldSearchInput.toLowerCase()),
-			)
-			.map((key) => ({ field: key, value: flattenSpanData[key] }));
-
-		return sortPinnedAttributes(filtered);
-	}, [flattenSpanData, fieldSearchInput, sortPinnedAttributes]);
-
-	return (
-		<div className="attributes-corner">
-			{isSearchVisible &&
-				(datasource.length > 0 || fieldSearchInput.length > 0) && (
-					<Input
-						autoFocus={shouldFocusOnToggle}
-						placeholder="Search for attribute..."
-						className="search-input"
-						value={fieldSearchInput}
-						onChange={(e): void => setFieldSearchInput(e.target.value)}
-					/>
-				)}
-			{datasource.length === 0 && fieldSearchInput.length === 0 && (
-				<NoData name="attributes" />
-			)}
-			<section
-				className={cx('attributes-container', isSearchVisible ? 'border-top' : '')}
-			>
-				{datasource
-					.filter((item) => !!item.value && item.value !== '-')
-					.map((item) => (
-						<div
-							className={cx('item', { pinned: pinnedAttributes[item.field] })}
-							key={`${item.field} + ${item.value}`}
-						>
-							<div className="item-key-wrapper">
-								<Typography.Text className="item-key" truncate={1}>
-									{item.field}
-								</Typography.Text>
-								{pinnedAttributes[item.field] && (
-									<Pin size={14} className="pin-icon" fill="currentColor" />
-								)}
-							</div>
-							<div className="value-wrapper">
-								<div className="copy-wrapper">
-									<CopyClipboardHOC
-										entityKey={item.value}
-										textToCopy={item.value}
-										tooltipText={item.value}
-									>
-										<Typography.Text className="item-value" truncate={1}>
-											{item.value}
-										</Typography.Text>
-									</CopyClipboardHOC>
-								</div>
-								<AttributeActions
-									record={item}
-									isPinned={pinnedAttributes[item.field]}
-									onTogglePin={togglePin}
-								/>
-							</div>
-						</div>
-					))}
-			</section>
-		</div>
-	);
-}
-
-Attributes.defaultProps = {
-	shouldFocusOnToggle: false,
-};
-
-export default Attributes;

frontend/src/container/SpanDetailsDrawer/Events/Events.styles.scss

@@ -1,142 +0,0 @@
-.events-table {
-	.no-events {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 400px;
-	}
-	.events-container {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding: 12px;
-
-		.event {
-			.ant-collapse {
-				border: none;
-			}
-			.ant-collapse-content {
-				border-top: none;
-			}
-
-			.ant-collapse-item {
-				border-bottom: 0px;
-			}
-
-			.ant-collapse-content-box {
-				border: 1px solid var(--l1-border);
-				border-top: none;
-			}
-			.ant-collapse-header {
-				display: flex;
-				padding: 8px 6px;
-				align-items: center;
-				justify-content: space-between;
-				gap: 16px;
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-
-				color: var(--l1-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				letter-spacing: -0.07px;
-
-				.ant-collapse-expand-icon {
-					padding-inline-start: 0px;
-					padding-inline-end: 0px;
-				}
-
-				.collapse-title {
-					display: flex;
-					align-items: center;
-					gap: 6px;
-
-					.diamond {
-						fill: var(--accent-primary);
-					}
-				}
-			}
-			.event-details {
-				display: flex;
-				flex-direction: column;
-				gap: 16px;
-
-				.attribute-container {
-					display: flex;
-					flex-direction: column;
-					gap: 8px;
-
-					.attribute-key {
-						color: var(--l2-foreground);
-						font-family: Inter;
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 20px; /* 142.857% */
-						letter-spacing: -0.07px;
-					}
-
-					.timestamp-container {
-						display: flex;
-						gap: 4px;
-						align-items: center;
-
-						.timestamp-text {
-							color: var(--l2-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 20px; /* 142.857% */
-							letter-spacing: -0.07px;
-						}
-
-						.attribute-value {
-							display: flex;
-							padding: 2px 8px;
-							width: fit-content;
-							align-items: center;
-							gap: 8px;
-							border-radius: 50px;
-							border: 1px solid var(--l1-border);
-							background: var(--l1-border);
-
-							color: var(--l1-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 20px; /* 142.857% */
-							letter-spacing: -0.07px;
-						}
-					}
-
-					.wrapper {
-						display: flex;
-						padding: 2px 8px;
-						width: fit-content;
-						max-width: 100%;
-						align-items: center;
-						gap: 8px;
-						border-radius: 50px;
-						border: 1px solid var(--l1-border);
-						background: var(--l1-border);
-						.attribute-value {
-							color: var(--l1-foreground);
-							font-family: Inter;
-							font-size: 14px;
-							font-style: normal;
-							font-weight: 400;
-							line-height: 20px; /* 142.857% */
-							letter-spacing: -0.07px;
-						}
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/Events/components/AttributeWithExpandablePopover.styles.scss

@@ -1,31 +0,0 @@
-.attribute-with-expandable-popover {
-	&__popover {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		max-width: 50vw;
-	}
-
-	&__preview {
-		max-height: 40vh;
-		overflow-y: auto;
-		white-space: pre-wrap;
-		word-break: break-all;
-		padding: 8px;
-		border-radius: 4px;
-	}
-
-	&__expand-button {
-		align-self: flex-end;
-		display: flex;
-		align-items: center;
-		flex-grow: 0;
-	}
-
-	&__full-view {
-		max-height: 70vh;
-		overflow-y: auto;
-		white-space: pre-wrap;
-		word-break: break-all;
-	}
-}

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.styles.scss

@@ -1,52 +0,0 @@
-.no-linked-spans {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 400px;
-}
-
-.linked-spans-container {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	padding: 12px;
-
-	.item {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-		justify-content: flex-start;
-
-		.item-key {
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.value-wrapper {
-			display: flex;
-			padding: 2px 8px;
-			align-items: center;
-			width: fit-content;
-			max-width: 100%;
-			gap: 8px;
-			border-radius: 50px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-border);
-
-			.item-value {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: 0.56px;
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.tsx

@@ -1,81 +0,0 @@
-import { useCallback } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import ROUTES from 'constants/routes';
-import { formUrlParams } from 'container/TraceDetail/utils';
-import { Span } from 'types/api/trace/getTraceV2';
-import { withBasePath } from 'utils/basePath';
-
-import NoData from '../NoData/NoData';
-
-import './LinkedSpans.styles.scss';
-
-interface LinkedSpansProps {
-	span: Span;
-}
-
-interface SpanReference {
-	traceId: string;
-	spanId: string;
-	refType: string;
-}
-
-function LinkedSpans(props: LinkedSpansProps): JSX.Element {
-	const { span } = props;
-
-	const getLink = useCallback((item: SpanReference): string | null => {
-		if (!item.traceId || !item.spanId) {
-			return null;
-		}
-		return withBasePath(
-			`${ROUTES.TRACE}/${item.traceId}${formUrlParams({
-				spanId: item.spanId,
-				levelUp: 0,
-				levelDown: 0,
-			})}`,
-		);
-	}, []);
-
-	// Filter out CHILD_OF references as they are parent-child relationships
-	const linkedSpans =
-		span.references?.filter((ref: SpanReference) => ref.refType !== 'CHILD_OF') ||
-		[];
-
-	if (linkedSpans.length === 0) {
-		return (
-			<div className="no-linked-spans">
-				<NoData name="linked spans" />
-			</div>
-		);
-	}
-
-	return (
-		<div className="linked-spans-container">
-			{linkedSpans.map((item: SpanReference) => {
-				const link = getLink(item);
-				return (
-					<div className="item" key={item.spanId}>
-						<Typography.Text className="item-key" truncate={1}>
-							Linked Span ID
-						</Typography.Text>
-						<div className="value-wrapper">
-							<Tooltip title={item.spanId}>
-								{link ? (
-									<Typography.Link href={link} className="item-value" truncate={1}>
-										{item.spanId}
-									</Typography.Link>
-								) : (
-									<Button type="link" className="item-value" disabled>
-										{item.spanId}
-									</Button>
-								)}
-							</Tooltip>
-						</div>
-					</div>
-				);
-			})}
-		</div>
-	);
-}
-
-export default LinkedSpans;

frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss

@@ -1,20 +0,0 @@
-.no-data {
-	display: flex;
-	gap: 4px;
-	flex-direction: column;
-
-	.no-data-img {
-		height: 32px;
-		width: 32px;
-	}
-
-	.no-data-text {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -1,687 +0,0 @@
-.span-details-drawer {
-	display: flex;
-	flex-direction: column;
-	height: calc(100vh - 44px); //44px -> trace details top bar
-	border-left: 1px solid var(--l1-border);
-	overflow-y: auto !important;
-	&:not(&-docked) {
-		min-width: 450px;
-	}
-
-	&::-webkit-scrollbar {
-		width: 0.1rem;
-	}
-
-	.header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		height: 48px;
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-
-		.heading {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-
-			.dot {
-				height: 8px;
-				width: 8px;
-				border-radius: 2px;
-				background: var(--danger-background);
-			}
-
-			.text {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-
-	.description {
-		display: flex;
-		flex-direction: column;
-		padding: 10px 0px;
-
-		.item {
-			padding: 8px 12px;
-			&,
-			.attribute-container {
-				display: flex;
-				flex-direction: column;
-				gap: 8px;
-				position: relative; // ensure absolutely-positioned children anchor to the row
-			}
-
-			// Show attribute actions on hover for hardcoded rows
-			.attribute-actions-wrapper {
-				display: none;
-				gap: 8px;
-				position: absolute;
-				right: 8px;
-				top: 50%;
-				transform: translateY(-50%);
-				border-radius: 4px;
-				padding: 2px;
-
-				// style the action button group
-				.action-btn {
-					display: flex;
-					gap: 4px;
-				}
-				.filter-btn {
-					display: flex;
-					align-items: center;
-					border: none;
-					box-shadow: none;
-					border-radius: 2px;
-					background: var(--l1-border);
-					padding: 4px;
-					gap: 3px;
-					height: 24px;
-					width: 24px;
-
-					&:hover {
-						background: var(--l3-background);
-					}
-				}
-			}
-			&:hover {
-				background-color: var(--l1-border);
-				.attribute-actions-wrapper {
-					display: flex;
-				}
-			}
-
-			.span-name-wrapper {
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				.loading-spinner-container {
-					padding: 4px 8px;
-					line-height: 18px; /* 128.571% */
-					letter-spacing: -0.07px;
-
-					display: inline-flex;
-				}
-
-				.span-percentile-value-container {
-					.span-percentile-value {
-						color: var(--bg-sakura-400);
-						font-variant-numeric: lining-nums tabular-nums stacked-fractions
-							slashed-zero;
-						font-feature-settings:
-							'dlig' on,
-							'salt' on;
-
-						border-radius: 0 50px 50px 0;
-
-						font-family: Inter;
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						min-width: 48px;
-						padding-left: 8px;
-						padding-right: 8px;
-
-						border-left: 1px solid var(--l1-border);
-
-						cursor: pointer;
-
-						display: inline-flex;
-						align-items: center;
-						word-break: normal;
-						gap: 6px;
-					}
-
-					&.span-percentile-value-container-open {
-						.span-percentile-value {
-							border: 1px solid var(--l1-border);
-							background: var(--l1-border);
-						}
-					}
-				}
-			}
-
-			.span-percentiles-container {
-				display: flex;
-				flex-direction: column;
-				position: relative;
-
-				fill: linear-gradient(
-					139deg,
-					color-mix(in srgb, var(--card) 32%, transparent) 0%,
-					color-mix(in srgb, var(--card) 36%, transparent) 98.68%
-				);
-
-				stroke-width: 1px;
-				stroke: var(--l1-border);
-				filter: drop-shadow(2px 4px 16px rgba(0, 0, 0, 0.2));
-				backdrop-filter: blur(20px);
-				border: 1px solid var(--l1-border);
-				border-radius: 4px;
-
-				.span-percentiles-header {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					gap: 8px;
-					padding: 8px 12px 8px 12px;
-					border-bottom: 1px solid var(--l1-border);
-
-					.span-percentiles-header-text {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						cursor: pointer;
-					}
-				}
-
-				.span-percentile-content {
-					display: flex;
-					flex-direction: column;
-					gap: 8px;
-					padding: 8px;
-
-					.span-percentile-content-title {
-						.span-percentile-value {
-							color: var(--bg-sakura-400);
-							font-variant-numeric: lining-nums tabular-nums stacked-fractions
-								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on;
-						}
-
-						.span-percentile-value-loader {
-							display: inline-flex;
-							align-items: flex-end;
-							justify-content: flex-end;
-							margin-right: 4px;
-							margin-left: 4px;
-							line-height: 18px;
-						}
-					}
-
-					.span-percentile-timerange {
-						width: 100%;
-
-						.span-percentile-timerange-select {
-							width: 100%;
-							margin-top: 8px;
-							margin-bottom: 16px;
-
-							.ant-select-selector {
-								border-radius: 50px;
-								border: 1px solid var(--l1-border);
-								background: var(--l1-background);
-								color: var(--l2-foreground);
-								font-family: Inter;
-								font-size: 12px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 142.857% */
-								letter-spacing: 0.28px;
-
-								height: 32px;
-							}
-						}
-					}
-
-					.span-percentile-values-table {
-						.span-percentile-values-table-header-row {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							gap: 8px;
-
-							.span-percentile-values-table-header {
-								color: var(--l2-foreground);
-								text-align: right;
-								font-family: Inter;
-								font-size: 11px;
-								font-style: normal;
-								font-weight: 500;
-								line-height: 20px; /* 181.818% */
-								text-transform: uppercase;
-							}
-						}
-
-						.span-percentile-values-table-data-rows {
-							margin-top: 8px;
-							display: flex;
-							flex-direction: column;
-							gap: 4px;
-
-							.span-percentile-values-table-data-rows-skeleton {
-								display: flex;
-								flex-direction: column;
-								gap: 4px;
-
-								.ant-skeleton-title {
-									width: 100% !important;
-									margin-top: 0px !important;
-								}
-
-								.ant-skeleton-paragraph {
-									margin-top: 8px;
-
-									& > li + li {
-										margin-top: 10px;
-										width: 100% !important;
-									}
-								}
-							}
-						}
-
-						.span-percentile-values-table-data-row {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							gap: 12px;
-							padding: 0px 4px;
-
-							.span-percentile-values-table-data-row-key {
-								flex: 0 0 auto;
-								color: var(--l1-foreground);
-								text-align: right;
-								font-variant-numeric: lining-nums tabular-nums slashed-zero;
-								font-feature-settings:
-									'dlig' on,
-									'salt' on;
-								font-family: Inter;
-								font-size: 12px;
-								font-style: normal;
-								font-weight: 500;
-								line-height: 20px; /* 166.667% */
-							}
-
-							.span-percentile-values-table-data-row-value {
-								color: var(--l2-foreground);
-								font-variant-numeric: lining-nums tabular-nums stacked-fractions
-									slashed-zero;
-								font-feature-settings:
-									'dlig' on,
-									'salt' on,
-									'ss02' on;
-								font-family: Inter;
-								font-size: 12px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 166.667% */
-							}
-
-							.dashed-line {
-								flex: 1;
-								height: 0; /* line only */
-								margin: 0 8px;
-								border-top: 1px dashed var(--l1-border);
-
-								/* Use border image to control dash length & spacing */
-								border-top-width: 1px;
-								border-top-style: solid; /* temporary solid for image */
-								border-image: repeating-linear-gradient(
-										to right,
-										#1d212d 0,
-										#1d212d 10px,
-										transparent 10px,
-										transparent 20px
-									)
-									1 stretch;
-							}
-						}
-
-						.current-span-percentile-row {
-							border-radius: 2px;
-							background: color-mix(
-								in srgb,
-								var(--primary-background) 20%,
-								transparent
-							);
-
-							.span-percentile-values-table-data-row-key {
-								color: var(--text-robin-300);
-							}
-
-							.dashed-line {
-								flex: 1;
-								height: 0; /* line only */
-								margin: 0 8px;
-								border-top: 1px dashed #abbdff;
-
-								/* Use border image to control dash length & spacing */
-								border-top-width: 1px;
-								border-top-style: solid; /* temporary solid for image */
-								border-image: repeating-linear-gradient(
-										to right,
-										#abbdff 0,
-										#abbdff 10px,
-										transparent 10px,
-										transparent 20px
-									)
-									1 stretch;
-							}
-
-							.span-percentile-values-table-data-row-value {
-								color: var(--text-robin-400);
-							}
-						}
-					}
-				}
-
-				.resource-attributes-select-container {
-					overflow: hidden;
-					width: calc(100% + 16px);
-
-					position: absolute;
-					top: 32px;
-					left: -8px;
-					z-index: 1000;
-
-					.resource-attributes-select-container-header {
-						.resource-attributes-select-container-input {
-							border-radius: 0px;
-							border: none !important;
-							box-shadow: none !important;
-							height: 36px;
-
-							border-bottom: 1px solid var(--l1-border) !important;
-						}
-					}
-
-					border-radius: 4px;
-					border: 1px solid var(--l1-border);
-					background: linear-gradient(139deg, var(--card) 0%, var(--card) 98.68%);
-					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-					backdrop-filter: blur(20px);
-
-					.ant-select {
-						width: 100%;
-					}
-
-					.resource-attributes-items {
-						height: 200px;
-						overflow-y: auto;
-
-						&::-webkit-scrollbar {
-							width: 0.3rem;
-							height: 0.3rem;
-						}
-
-						&::-webkit-scrollbar-track {
-							background: transparent;
-						}
-
-						&::-webkit-scrollbar-thumb {
-							background: var(--l3-background);
-						}
-
-						&::-webkit-scrollbar-thumb:hover {
-							background: var(--l3-background);
-						}
-					}
-
-					.resource-attributes-select-item {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-						padding: 8px 12px 8px 12px;
-
-						.resource-attributes-select-item-checkbox {
-							.ant-checkbox-disabled {
-								background-color: var(--primary-background);
-								color: var(--l1-foreground);
-							}
-
-							.resource-attributes-select-item-value {
-								color: var(--l1-foreground);
-
-								font-family: Inter;
-								font-size: 13px;
-								font-style: normal;
-								font-weight: 400;
-								line-height: 20px; /* 142.857% */
-								letter-spacing: -0.07px;
-							}
-						}
-					}
-				}
-			}
-
-			.attribute-key {
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.44px;
-				text-transform: uppercase;
-			}
-
-			.attribute-container .wrapper,
-			.value-wrapper {
-				display: flex;
-				align-items: center;
-				width: fit-content;
-				max-width: 100%;
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-
-				.attribute-value {
-					padding: 2px 8px;
-					color: var(--l2-foreground);
-					font-family: 'Inter';
-					font-size: 14px;
-					font-style: normal;
-					width: 100%;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: 0.28px;
-				}
-			}
-
-			.service {
-				display: flex;
-				padding: 2px 8px;
-				align-items: center;
-				gap: 8px;
-				border-radius: 50px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-				width: fit-content;
-
-				.dot {
-					height: 4px;
-					width: 4px;
-				}
-
-				.value-wrapper {
-					display: flex;
-					padding: 0px;
-					align-items: center;
-					width: fit-content;
-					max-width: 100%;
-					border-radius: 0px;
-					border: none;
-					background: var(--l1-border);
-
-					.service-value {
-						color: var(--l2-foreground);
-						font-family: 'Inter';
-						font-size: 14px;
-						font-style: normal;
-						font-weight: 400;
-						line-height: 20px; /* 142.857% */
-						letter-spacing: 0.28px;
-					}
-				}
-			}
-
-			.related-signals-section {
-				.view-title {
-					display: flex;
-					gap: 8px;
-					align-items: center;
-					font-size: 12px;
-					line-height: 30px;
-				}
-				.ant-btn.ant-btn-default {
-					padding: 0 15px;
-					&:not(:hover) {
-						border: 1px solid var(--l1-border);
-					}
-				}
-			}
-		}
-	}
-
-	.attributes-events {
-		.details-drawer-tabs {
-			.ant-tabs-extra-content {
-				display: flex;
-				align-items: center;
-
-				.search-icon {
-					width: 33px;
-					padding-right: 12px;
-				}
-			}
-
-			.ant-tabs-nav::before {
-				border-bottom: 1px solid var(--l1-border) !important;
-			}
-
-			.ant-tabs-tab {
-				margin: 0 !important;
-				padding: 0 2px !important;
-				min-width: 36px;
-				height: 36px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-
-			.attributes-tab-btn,
-			.events-tab-btn,
-			.linked-spans-tab-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				width: 100%;
-				padding: 4px 8px;
-				margin-right: 8px;
-				gap: 4px;
-
-				.tab-label {
-					display: flex;
-					align-items: center;
-				}
-
-				.count-badge {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					min-width: 20px;
-					height: 20px;
-					padding: 0 6px;
-					border-radius: 10px;
-					background: color-mix(in srgb, var(--bg-robin-200) 10%, transparent);
-					color: var(--l2-foreground);
-					font-variant-numeric: lining-nums tabular-nums slashed-zero;
-					font-feature-settings:
-						'dlig' on,
-						'salt' on;
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px;
-					letter-spacing: -0.065px;
-					text-transform: uppercase;
-				}
-			}
-
-			.attributes-tab-btn:hover,
-			.events-tab-btn:hover,
-			.linked-spans-tab-btn:hover {
-				background: unset;
-			}
-		}
-	}
-}
-
-.span-percentile-tooltip {
-	.ant-tooltip-content {
-		width: 300px;
-		max-width: 300px;
-	}
-
-	.span-percentile-tooltip-text {
-		color: var(--l2-foreground);
-		font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
-			slashed-zero;
-		font-feature-settings:
-			'dlig' on,
-			'salt' on;
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 166.667% */
-		letter-spacing: -0.06px;
-
-		.span-percentile-tooltip-text-percentile {
-			color: var(--text-sakura-500);
-			font-variant-numeric: lining-nums tabular-nums stacked-fractions slashed-zero;
-			font-feature-settings:
-				'dlig' on,
-				'salt' on;
-			font-family: Inter;
-			font-size: 12px;
-		}
-
-		.span-percentile-tooltip-text-link {
-			color: var(--l2-foreground);
-			text-align: right;
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 20px; /* 166.667% */
-		}
-	}
-}
-
-.span-details-drawer-docked {
-	width: 48px;
-	flex: 0 48px !important;
-
-	.header {
-		justify-content: center;
-	}
-}
-
-.resizable-handle {
-	box-sizing: border-box;
-	border: 2px solid transparent;
-	&:hover,
-	&[data-resize-handle-state='drag'],
-	&[data-resize-handle-state='hover'] {
-		border-color: color-mix(in srgb, var(--bg-aqua-500) 20%, transparent);
-	}
-}
-
-.linked-spans-tab-btn {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-}

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -1,76 +0,0 @@
-.span-logs {
-	margin-inline: 16px;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	&-virtuoso {
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	}
-	&-list-container {
-		flex: 1;
-		min-height: 0;
-
-		.logs-loading-skeleton {
-			height: 100%;
-			border: 1px solid var(--l1-border);
-			border-top: none;
-			color: var(--l2-foreground);
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			padding: 8px 0;
-		}
-	}
-
-	&-empty-content {
-		height: 100%;
-		border-top: none;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding-top: 96px;
-		gap: 12px;
-
-		.description {
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-			gap: 0.75rem;
-			width: 320px;
-
-			.no-data-img {
-				height: 2rem;
-				width: 2rem;
-			}
-
-			.no-data-text-1 {
-				color: var(--l2-foreground);
-				font-weight: 400;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-			}
-			.no-data-text-2 {
-				font-weight: 500;
-			}
-		}
-
-		.action-section {
-			width: 320px;
-
-			.action-btn {
-				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
-				color: var(--l2-foreground);
-				padding: 4px 8px;
-				font-size: 12px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.styles.scss

@@ -1,99 +0,0 @@
-.span-related-signals-drawer {
-	.ant-drawer-body {
-		padding: 0;
-	}
-
-	.ant-drawer-header {
-		border-bottom: 1px solid var(--l1-border);
-		padding: 16px 15px;
-		.title {
-			color: var(--l2-foreground);
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	&__divider {
-		--divider-vertical-margin: 10px;
-	}
-	.ant-drawer-close {
-		margin: 0 !important;
-	}
-
-	.span-related-signals-drawer__content {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-	.view-title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
-	.views-tabs-container {
-		padding: 16px 15px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		.open-in-explorer {
-			display: flex;
-			align-items: center;
-			height: 30px;
-			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-		}
-
-		.ant-radio-button-wrapper {
-			width: 114px;
-			height: 32px;
-
-			.view-title {
-				gap: 6px;
-				color: var(--l1-foreground);
-				font-size: 12px;
-				font-weight: 400;
-				letter-spacing: -0.06px;
-			}
-		}
-	}
-
-	.span-related-signals-drawer__applied-filters {
-		padding: 11px;
-		margin-inline: 16px;
-		border: 1px solid var(--l1-border);
-		border-radius: 3px;
-	}
-
-	.span-related-signals-drawer__filters-list {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 8px;
-	}
-
-	.span-related-signals-drawer__filter-tag {
-		padding: 2px 6px;
-		border-radius: 2px;
-		background: var(--l3-background);
-		cursor: default;
-
-		.ant-typography {
-			color: var(--l2-foreground);
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-	}
-
-	.infra-metrics-container {
-		padding-inline: 16px;
-		.infra-metrics-card {
-			border: 1px solid var(--l1-border);
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx

@@ -1,257 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Button, Drawer } from 'antd';
-import { Divider } from '@signozhq/ui/divider';
-import { Typography } from '@signozhq/ui/typography';
-import LogsIcon from 'assets/AlertHistory/LogsIcon';
-import SignozRadioGroup from 'components/SignozRadioGroup/SignozRadioGroup';
-import { QueryParams } from 'constants/query';
-import {
-	initialQueryBuilderFormValuesMap,
-	initialQueryState,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
-import { getEmptyLogsListConfig } from 'container/LogsExplorerList/utils';
-import dayjs from 'dayjs';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { BarChart, Compass, X } from '@signozhq/icons';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { Span } from 'types/api/trace/getTraceV2';
-import { DataSource, LogsAggregatorOperator } from 'types/common/queryBuilder';
-import { getAbsoluteUrl } from 'utils/basePath';
-
-import { RelatedSignalsViews } from '../constants';
-import SpanLogs from '../SpanLogs/SpanLogs';
-import { useSpanContextLogs } from '../SpanLogs/useSpanContextLogs';
-import { hasInfraMetadata } from '../utils';
-
-import './SpanRelatedSignals.styles.scss';
-
-const FIVE_MINUTES_IN_MS = 5 * 60 * 1000;
-
-interface SpanRelatedSignalsProps {
-	selectedSpan: Span;
-	traceStartTime: number;
-	traceEndTime: number;
-	isOpen: boolean;
-	onClose: () => void;
-	initialView: RelatedSignalsViews;
-}
-
-function SpanRelatedSignals({
-	selectedSpan,
-	traceStartTime,
-	traceEndTime,
-	isOpen,
-	onClose,
-	initialView,
-}: SpanRelatedSignalsProps): JSX.Element {
-	const [selectedView, setSelectedView] =
-		useState<RelatedSignalsViews>(initialView);
-	const isDarkMode = useIsDarkMode();
-
-	// Extract infrastructure metadata from span attributes
-	const infraMetadata = useMemo(() => {
-		// Only return metadata if span has infrastructure metadata
-		if (!hasInfraMetadata(selectedSpan)) {
-			return null;
-		}
-
-		return {
-			clusterName: selectedSpan.tagMap['k8s.cluster.name'] || '',
-			podName: selectedSpan.tagMap['k8s.pod.name'] || '',
-			nodeName: selectedSpan.tagMap['k8s.node.name'] || '',
-			hostName: selectedSpan.tagMap['host.name'] || '',
-			spanTimestamp: dayjs(selectedSpan.timestamp).format(),
-		};
-	}, [selectedSpan]);
-	const {
-		logs,
-		isLoading,
-		isError,
-		isFetching,
-		isLogSpanRelated,
-		hasTraceIdLogs,
-	} = useSpanContextLogs({
-		traceId: selectedSpan.traceId,
-		spanId: selectedSpan.spanId,
-		timeRange: {
-			startTime: traceStartTime - FIVE_MINUTES_IN_MS,
-			endTime: traceEndTime + FIVE_MINUTES_IN_MS,
-		},
-		isDrawerOpen: isOpen,
-	});
-
-	const handleTabChange = useCallback((value: string): void => {
-		setSelectedView(value as RelatedSignalsViews);
-	}, []);
-
-	const tabOptions = useMemo(() => {
-		const baseOptions = [
-			{
-				label: (
-					<div className="view-title">
-						<LogsIcon width={14} height={14} />
-						Logs
-					</div>
-				),
-				value: RelatedSignalsViews.LOGS,
-			},
-		];
-
-		// Add Infra option if infrastructure metadata is available
-		if (infraMetadata) {
-			baseOptions.push({
-				label: (
-					<div className="view-title">
-						<BarChart size={14} />
-						Metrics
-					</div>
-				),
-				value: RelatedSignalsViews.INFRA,
-			});
-		}
-
-		return baseOptions;
-	}, [infraMetadata]);
-
-	const handleExplorerPageRedirect = useCallback((): void => {
-		const startTimeMs = traceStartTime - FIVE_MINUTES_IN_MS;
-		const endTimeMs = traceEndTime + FIVE_MINUTES_IN_MS;
-
-		const traceIdFilter = {
-			op: 'AND',
-			items: [
-				{
-					id: 'trace-id-filter',
-					key: {
-						key: 'trace_id',
-						id: 'trace-id-key',
-						dataType: 'string' as const,
-						isColumn: true,
-						type: '',
-						isJSON: false,
-					} as BaseAutocompleteData,
-					op: '=',
-					value: selectedSpan.traceId,
-				},
-			],
-		};
-
-		const compositeQuery = {
-			...initialQueryState,
-			queryType: 'builder',
-			builder: {
-				...initialQueryState.builder,
-				queryData: [
-					{
-						...initialQueryBuilderFormValuesMap.logs,
-						aggregateOperator: LogsAggregatorOperator.NOOP,
-						filters: traceIdFilter,
-					},
-				],
-			},
-		};
-
-		const searchParams = new URLSearchParams();
-		searchParams.set(QueryParams.compositeQuery, JSON.stringify(compositeQuery));
-		searchParams.set(QueryParams.startTime, startTimeMs.toString());
-		searchParams.set(QueryParams.endTime, endTimeMs.toString());
-
-		window.open(
-			getAbsoluteUrl(`${ROUTES.LOGS_EXPLORER}?${searchParams.toString()}`),
-			'_blank',
-			'noopener,noreferrer',
-		);
-	}, [selectedSpan.traceId, traceStartTime, traceEndTime]);
-
-	const emptyStateConfig = useMemo(
-		() => ({
-			...getEmptyLogsListConfig(() => {}),
-			showClearFiltersButton: false,
-		}),
-		[],
-	);
-
-	return (
-		<Drawer
-			width="50%"
-			title={
-				<>
-					<Divider
-						type="vertical"
-						className="span-related-signals-drawer__divider"
-					/>
-					<Typography.Text className="title">
-						Related Signals - {selectedSpan.name}
-					</Typography.Text>
-				</>
-			}
-			placement="right"
-			onClose={onClose}
-			open={isOpen}
-			style={{
-				overscrollBehavior: 'contain',
-				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
-			}}
-			className="span-related-signals-drawer"
-			destroyOnClose
-			closeIcon={<X size={16} />}
-		>
-			{selectedSpan && (
-				<div className="span-related-signals-drawer__content">
-					<div className="views-tabs-container">
-						<SignozRadioGroup
-							value={selectedView}
-							options={tabOptions}
-							onChange={handleTabChange}
-							className="related-signals-radio"
-						/>
-						{selectedView === RelatedSignalsViews.LOGS && (
-							<Button
-								icon={<Compass size={18} />}
-								className="open-in-explorer"
-								onClick={handleExplorerPageRedirect}
-								data-testid="open-in-explorer-button"
-							>
-								Open in Logs Explorer
-							</Button>
-						)}
-					</div>
-
-					{selectedView === RelatedSignalsViews.LOGS && (
-						<SpanLogs
-							traceId={selectedSpan.traceId}
-							spanId={selectedSpan.spanId}
-							timeRange={{
-								startTime: traceStartTime - FIVE_MINUTES_IN_MS,
-								endTime: traceEndTime + FIVE_MINUTES_IN_MS,
-							}}
-							logs={logs}
-							isLoading={isLoading}
-							isError={isError}
-							isFetching={isFetching}
-							isLogSpanRelated={isLogSpanRelated}
-							handleExplorerPageRedirect={handleExplorerPageRedirect}
-							emptyStateConfig={!hasTraceIdLogs ? emptyStateConfig : undefined}
-						/>
-					)}
-
-					{selectedView === RelatedSignalsViews.INFRA && infraMetadata && (
-						<InfraMetrics
-							clusterName={infraMetadata.clusterName}
-							podName={infraMetadata.podName}
-							nodeName={infraMetadata.nodeName}
-							hostName={infraMetadata.hostName}
-							timestamp={infraMetadata.spanTimestamp}
-							dataSource={DataSource.TRACES}
-						/>
-					)}
-				</div>
-			)}
-		</Drawer>
-	);
-}
-
-export default SpanRelatedSignals;

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.unit.test.tsx

@@ -1,240 +0,0 @@
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
-
-import AttributeActions from '../Attributes/AttributeActions';
-
-// Mock only Popover from antd to simplify hover/open behavior while keeping other components real
-jest.mock('antd', () => {
-	const actual = jest.requireActual('antd');
-	const MockPopover = ({
-		content,
-		children,
-		open,
-		onOpenChange,
-		...rest
-	}: any): JSX.Element => (
-		<div
-			data-testid="mock-popover-wrapper"
-			onMouseEnter={(): void => onOpenChange?.(true)}
-			{...rest}
-		>
-			{children}
-			{open ? <div data-testid="mock-popover-content">{content}</div> : null}
-		</div>
-	);
-	return { ...actual, Popover: MockPopover };
-});
-
-// Mock getAggregateKeys API used inside useTraceActions to resolve autocomplete keys
-jest.mock('api/queryBuilder/getAttributeKeys', () => ({
-	getAggregateKeys: jest.fn().mockResolvedValue({
-		payload: {
-			attributeKeys: [
-				{
-					key: 'http.method',
-					dataType: 'string',
-					type: 'tag',
-					isColumn: true,
-				},
-			],
-		},
-	}),
-}));
-
-const record = { field: 'http.method', value: 'GET' };
-
-describe('AttributeActions (unit)', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders core action buttons (pin, filter in/out, more)', async () => {
-		render(<AttributeActions record={record} isPinned={false} />);
-
-		expect(
-			screen.getByRole('button', { name: 'Pin attribute' }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: 'Filter for value' }),
-		).toBeInTheDocument();
-		expect(
-			screen.getByRole('button', { name: 'Filter out value' }),
-		).toBeInTheDocument();
-		// more actions (ellipsis) button
-		expect(screen.getByTestId('attribute-actions-more')).toBeInTheDocument();
-	});
-
-	it('applies "Filter for" and calls redirectWithQueryBuilderData with correct query', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-		const currentQuery = {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		} as any;
-
-		render(<AttributeActions record={record} />, undefined, {
-			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
-		});
-
-		const filterForBtn = screen.getByRole('button', { name: 'Filter for value' });
-
-		await userEvent.click(filterForBtn);
-		await waitFor(() => {
-			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-				expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								filters: expect.objectContaining({
-									items: expect.arrayContaining([
-										expect.objectContaining({
-											key: expect.objectContaining({ key: 'http.method' }),
-											op: '=',
-											value: 'GET',
-										}),
-									]),
-								}),
-							}),
-						]),
-					}),
-				}),
-				{},
-				expect.any(String),
-			);
-		});
-	});
-
-	it('applies "Filter out" and calls redirectWithQueryBuilderData with correct query', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-		const currentQuery = {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		} as any;
-
-		render(<AttributeActions record={record} />, undefined, {
-			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
-		});
-
-		const filterOutBtn = screen.getByRole('button', { name: 'Filter out value' });
-
-		await userEvent.click(filterOutBtn);
-		await waitFor(() => {
-			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-				expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								filters: expect.objectContaining({
-									items: expect.arrayContaining([
-										expect.objectContaining({
-											key: expect.objectContaining({ key: 'http.method' }),
-											op: '!=',
-											value: 'GET',
-										}),
-									]),
-								}),
-							}),
-						]),
-					}),
-				}),
-				{},
-				expect.any(String),
-			);
-		});
-	});
-
-	it('opens more actions on hover and calls Group By handler; closes after click', async () => {
-		const redirectWithQueryBuilderData = jest.fn();
-		const currentQuery = {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		} as any;
-		render(<AttributeActions record={record} />, undefined, {
-			queryBuilderOverrides: { currentQuery, redirectWithQueryBuilderData },
-		});
-
-		const ellipsisBtn = screen.getByTestId('attribute-actions-more');
-		expect(ellipsisBtn).toBeInTheDocument();
-
-		// hover to trigger Popover open via mock
-		fireEvent.mouseEnter(ellipsisBtn.parentElement as Element);
-
-		// content appears
-		await waitFor(() =>
-			expect(screen.getByText('Group By Attribute')).toBeInTheDocument(),
-		);
-
-		await userEvent.click(screen.getByText('Group By Attribute'));
-		await waitFor(() => {
-			expect(redirectWithQueryBuilderData).toHaveBeenCalledWith(
-				expect.objectContaining({
-					builder: expect.objectContaining({
-						queryData: expect.arrayContaining([
-							expect.objectContaining({
-								groupBy: expect.arrayContaining([
-									expect.objectContaining({ key: 'http.method' }),
-								]),
-							}),
-						]),
-					}),
-				}),
-				{},
-				expect.any(String),
-			);
-		});
-
-		// After clicking group by, popover should close
-		await waitFor(() =>
-			expect(screen.queryByTestId('mock-popover-content')).not.toBeInTheDocument(),
-		);
-	});
-
-	it('hides pin button when showPinned=false', async () => {
-		render(<AttributeActions record={record} showPinned={false} />);
-		expect(
-			screen.queryByRole('button', { name: /pin attribute/i }),
-		).not.toBeInTheDocument();
-	});
-
-	it('hides copy options when showCopyOptions=false', async () => {
-		render(<AttributeActions record={record} showCopyOptions={false} />);
-		const ellipsisBtn = screen.getByTestId('attribute-actions-more');
-		fireEvent.mouseEnter(ellipsisBtn.parentElement as Element);
-
-		await waitFor(() =>
-			expect(screen.queryByText('Copy Field Name')).not.toBeInTheDocument(),
-		);
-		expect(screen.queryByText('Copy Field Value')).not.toBeInTheDocument();
-	});
-});

frontend/src/container/SpanDetailsDrawer/__tests__/AttributeActions.userflow.test.tsx

@@ -1,383 +0,0 @@
-import { MemoryRouter, Route } from 'react-router-dom';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ROUTES from 'constants/routes';
-import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
-import { AppProvider } from 'providers/App/App';
-import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanDetailsDrawer from '../SpanDetailsDrawer';
-
-// Mock external dependencies
-const mockRedirectWithQueryBuilderData = jest.fn();
-const mockNotifications = {
-	success: jest.fn(),
-	error: jest.fn(),
-};
-const mockSetCopy = jest.fn();
-const mockQueryClient = {
-	fetchQuery: jest.fn(),
-};
-
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
-// Mock the hooks
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): any => ({
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						aggregateOperator: 'count',
-						aggregateAttribute: { key: 'signoz_span_duration' },
-						filters: { items: [], op: 'AND' },
-						filter: { expression: '' },
-						groupBy: [],
-					},
-				],
-			},
-		},
-		redirectWithQueryBuilderData: mockRedirectWithQueryBuilderData,
-	}),
-}));
-
-jest.mock('hooks/useNotifications', () => ({
-	useNotifications: (): any => ({ notifications: mockNotifications }),
-}));
-
-jest.mock('react-use', () => ({
-	...jest.requireActual('react-use'),
-	useCopyToClipboard: (): any => [{ value: '' }, mockSetCopy],
-}));
-
-jest.mock('react-query', () => ({
-	...jest.requireActual('react-query'),
-	useQueryClient: (): any => mockQueryClient,
-}));
-
-jest.mock('@signozhq/ui/sonner', () => ({
-	...jest.requireActual('@signozhq/ui/sonner'),
-	toast: jest.fn(),
-}));
-
-// Mock the API response for getAggregateKeys
-const mockAggregateKeysResponse = {
-	payload: {
-		attributeKeys: [
-			{
-				key: 'http.method',
-				dataType: 'string',
-				type: 'tag',
-				isColumn: true,
-			},
-			{
-				key: 'service.name',
-				dataType: 'string',
-				type: 'resource',
-				isColumn: true,
-			},
-		],
-	},
-};
-
-beforeEach(() => {
-	jest.clearAllMocks();
-	mockQueryClient.fetchQuery.mockResolvedValue(mockAggregateKeysResponse);
-});
-
-// Mock trace data with realistic span attributes
-const createMockSpan = (): Span => ({
-	spanId: '28a8a67365d0bd8b',
-	traceId: '000000000000000071dc9b0a338729b4',
-	name: 'HTTP GET /api/users',
-	timestamp: 1699872000000000,
-	durationNano: 150000000,
-	serviceName: 'frontend-service',
-	spanKind: 'server',
-	statusCodeString: 'OK',
-	statusMessage: '',
-	tagMap: {
-		'http.method': 'GET',
-		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/users?page=1',
-		'http.status_code': '200',
-		'service.name': 'frontend-service',
-		'span.kind': 'server',
-		'user.id': '12345',
-		'request.id': 'req-abc-123',
-	},
-	event: [],
-	references: [],
-	hasError: false,
-	rootSpanId: '',
-	parentSpanId: '',
-	kind: 0,
-	rootName: '',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-});
-const renderSpanDetailsDrawer = (span: Span = createMockSpan()): any => {
-	const user = userEvent.setup();
-
-	const component = render(
-		<MockQueryClientProvider>
-			<AppProvider>
-				<MemoryRouter>
-					<Route>
-						<SpanDetailsDrawer
-							isSpanDetailsDocked={false}
-							setIsSpanDetailsDocked={jest.fn()}
-							selectedSpan={span}
-							traceStartTime={span.timestamp}
-							traceEndTime={span.timestamp + span.durationNano}
-						/>
-					</Route>
-				</MemoryRouter>
-			</AppProvider>
-		</MockQueryClientProvider>,
-	);
-
-	return { ...component, user };
-};
-
-describe('AttributeActions User Flow Tests', () => {
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Complete Attribute Actions User Flow', () => {
-		it('should allow user to interact with span attribute actions from trace detail page', async () => {
-			renderSpanDetailsDrawer();
-
-			// Verify Attributes tab is displayed with table view
-			expect(screen.getByText('Attributes')).toBeInTheDocument();
-
-			// Verify attributes are displayed
-			expect(screen.getByText('http.method')).toBeInTheDocument();
-			expect(screen.getByText('GET')).toBeInTheDocument();
-			expect(screen.getByText('service.name')).toBeInTheDocument();
-			expect(screen.getAllByText('frontend-service')[0]).toBeInTheDocument();
-
-			// Find an attribute row to test actions on
-			const httpMethodRow = screen.getByText('http.method').closest('.item');
-			expect(httpMethodRow).toBeInTheDocument();
-
-			// Action buttons are always mounted in the DOM (only CSS-hidden until :hover),
-			// so we can query them directly without simulating a pointer hover.
-			const actionButtons = httpMethodRow!.querySelector('.action-btn');
-			expect(actionButtons).toBeInTheDocument();
-
-			const filterForButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter for value"]',
-			) as HTMLElement;
-			const filterOutButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter out value"]',
-			) as HTMLElement;
-			expect(filterForButton).toBeInTheDocument();
-			expect(filterOutButton).toBeInTheDocument();
-
-			// Test "Filter for" action — use fireEvent to skip userEvent's pointer
-			// simulation and the Antd Tooltip mouseEnterDelay timers it triggers.
-			fireEvent.click(filterForButton);
-
-			// Verify navigation to traces explorer with inclusive filter
-			await waitFor(() => {
-				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-					expect.objectContaining({
-						builder: expect.objectContaining({
-							queryData: expect.arrayContaining([
-								expect.objectContaining({
-									dataSource: 'traces',
-									filters: expect.objectContaining({
-										items: expect.arrayContaining([
-											expect.objectContaining({
-												key: expect.objectContaining({ key: 'http.method' }),
-												op: '=',
-												value: 'GET',
-											}),
-										]),
-									}),
-								}),
-							]),
-						}),
-					}),
-					{},
-					ROUTES.TRACES_EXPLORER,
-				);
-			});
-
-			// Reset mock for next test
-			mockRedirectWithQueryBuilderData.mockClear();
-
-			// Test "Filter out" action
-			fireEvent.click(filterOutButton);
-
-			// Verify navigation to traces explorer with exclusive filter
-			await waitFor(() => {
-				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-					expect.objectContaining({
-						builder: expect.objectContaining({
-							queryData: expect.arrayContaining([
-								expect.objectContaining({
-									dataSource: 'traces',
-									filters: expect.objectContaining({
-										items: expect.arrayContaining([
-											expect.objectContaining({
-												key: expect.objectContaining({ key: 'http.method' }),
-												op: '!=',
-												value: 'GET',
-											}),
-										]),
-									}),
-								}),
-							]),
-						}),
-					}),
-					{},
-					ROUTES.TRACES_EXPLORER,
-				);
-			});
-
-			// Verify more actions button exists (popover functionality is tested in unit tests)
-			const moreActionsButton = httpMethodRow!
-				.querySelector('.lucide-ellipsis')
-				?.closest('button');
-			expect(moreActionsButton).toBeInTheDocument();
-		});
-	});
-
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Filter Replacement Flow', () => {
-		it('should replace previous filter when applying multiple filters on same field', async () => {
-			renderSpanDetailsDrawer();
-
-			// Find the http.method attribute row
-			const httpMethodRow = screen.getByText('http.method').closest('.item');
-			expect(httpMethodRow).toBeInTheDocument();
-
-			// Action buttons are always mounted (CSS-hidden until :hover, which jsdom
-			// doesn't evaluate), so we can click them directly via fireEvent and skip
-			// userEvent's pointer simulation + Antd Tooltip mouseEnterDelay timers.
-			const filterForButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter for value"]',
-			) as HTMLElement;
-			expect(filterForButton).toBeInTheDocument();
-			fireEvent.click(filterForButton);
-
-			// Verify first filter was applied
-			await waitFor(() => {
-				expect(mockRedirectWithQueryBuilderData).toHaveBeenCalledWith(
-					expect.objectContaining({
-						builder: expect.objectContaining({
-							queryData: expect.arrayContaining([
-								expect.objectContaining({
-									filters: expect.objectContaining({
-										items: expect.arrayContaining([
-											expect.objectContaining({
-												key: expect.objectContaining({ key: 'http.method' }),
-												op: '=',
-												value: 'GET',
-											}),
-										]),
-									}),
-								}),
-							]),
-						}),
-					}),
-					{},
-					ROUTES.TRACES_EXPLORER,
-				);
-			});
-
-			// Reset and simulate existing filter in current query
-			mockRedirectWithQueryBuilderData.mockClear();
-
-			// Apply second filter on same field (should replace, not accumulate)
-			const filterOutButton = httpMethodRow!.querySelector(
-				'[aria-label="Filter out value"]',
-			) as HTMLElement;
-			expect(filterOutButton).toBeInTheDocument();
-			fireEvent.click(filterOutButton);
-
-			// Verify the new call contains only the new filter (replacement behavior)
-			await waitFor(() => {
-				const lastCall =
-					mockRedirectWithQueryBuilderData.mock.calls[
-						mockRedirectWithQueryBuilderData.mock.calls.length - 1
-					];
-				const queryData = lastCall[0].builder.queryData[0];
-				const httpMethodFilters = queryData.filters.items.filter(
-					(item: any) => item.key.key === 'http.method',
-				);
-
-				// Should have only one filter for http.method (the new one)
-				expect(httpMethodFilters).toHaveLength(1);
-				expect(httpMethodFilters[0].op).toBe('!=');
-				expect(httpMethodFilters[0].value).toBe('GET');
-			});
-		});
-	});
-
-	describe('Edge Cases', () => {
-		it('should handle attributes with special characters and JSON values', async () => {
-			const spanWithSpecialAttrs = createMockSpan();
-			spanWithSpecialAttrs.tagMap = {
-				'request.headers.content-type': 'application/json',
-				'response.body': '{"status":"success","data":[]}',
-				'trace.annotation': '"quoted_string_value"',
-			};
-
-			const { user } = renderSpanDetailsDrawer(spanWithSpecialAttrs);
-
-			// Test attribute with dashes
-			expect(screen.getByText('request.headers.content-type')).toBeInTheDocument();
-			expect(screen.getByText('application/json')).toBeInTheDocument();
-
-			// Test JSON value
-			expect(screen.getByText('response.body')).toBeInTheDocument();
-
-			// Test quoted string value - should remove surrounding quotes when copying
-			const quotedAttrRow = screen.getByText('trace.annotation').closest('.item');
-			await user.hover(quotedAttrRow!);
-
-			const actionButtons = quotedAttrRow!.querySelectorAll('.action-btn button');
-			const moreActionsButton = actionButtons[actionButtons.length - 1];
-			await user.hover(moreActionsButton);
-
-			await waitFor(() => {
-				expect(screen.getByText('Copy Field Value')).toBeInTheDocument();
-			});
-
-			const copyFieldValueButton = screen.getByText('Copy Field Value');
-			fireEvent.click(copyFieldValueButton);
-
-			// Verify quotes are stripped from copied value
-			await waitFor(() => {
-				expect(mockSetCopy).toHaveBeenCalledWith('quoted_string_value');
-			});
-		});
-
-		it('should handle empty attributes gracefully', async () => {
-			const spanWithNoAttrs = createMockSpan();
-			spanWithNoAttrs.tagMap = {};
-
-			renderSpanDetailsDrawer(spanWithNoAttrs);
-
-			// Verify no attributes message is displayed
-			expect(
-				screen.getByText('No attributes found for selected span'),
-			).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/SpanDetailsDrawer/__tests__/SpanDetailsDrawer.infraMetrics.test.tsx

@@ -1,495 +0,0 @@
-import ROUTES from 'constants/routes';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { server } from 'mocks-server/server';
-import { QueryBuilderContext } from 'providers/QueryBuilder';
-import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SpanDetailsDrawer from '../SpanDetailsDrawer';
-import {
-	expectedHostOnlyMetadata,
-	expectedInfraMetadata,
-	expectedNodeOnlyMetadata,
-	expectedPodOnlyMetadata,
-	mockEmptyMetricsResponse,
-	mockNodeMetricsResponse,
-	mockPodMetricsResponse,
-	mockSpanWithHostOnly,
-	mockSpanWithInfraMetadata,
-	mockSpanWithNodeOnly,
-	mockSpanWithoutInfraMetadata,
-	mockSpanWithPodOnly,
-} from './infraMetricsTestData';
-
-// Mock external dependencies
-jest.mock('react-router-dom', () => ({
-	...jest.requireActual('react-router-dom'),
-	useLocation: (): { pathname: string } => ({
-		pathname: `${ROUTES.TRACE_DETAIL}`,
-	}),
-}));
-
-const mockSafeNavigate = jest.fn();
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-const mockUpdateAllQueriesOperators = jest.fn().mockReturnValue({
-	builder: {
-		queryData: [
-			{
-				dataSource: 'logs',
-				queryName: 'A',
-				aggregateOperator: 'noop',
-				filters: { items: [], op: 'AND' },
-				expression: 'A',
-				disabled: false,
-				orderBy: [{ columnName: 'timestamp', order: 'desc' }],
-				groupBy: [],
-				limit: null,
-				having: [],
-			},
-		],
-		queryFormulas: [],
-	},
-	queryType: 'builder',
-});
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: (): any => ({
-		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						dataSource: 'logs',
-						queryName: 'A',
-						filters: { items: [], op: 'AND' },
-					},
-				],
-			},
-		},
-	}),
-}));
-
-const mockWindowOpen = jest.fn();
-Object.defineProperty(window, 'open', {
-	writable: true,
-	value: mockWindowOpen,
-});
-
-// Mock uplot to avoid rendering issues
-jest.mock('uplot', () => {
-	const paths = {
-		spline: jest.fn(),
-		bars: jest.fn(),
-	};
-	const uplotMock = jest.fn(() => ({
-		paths,
-	}));
-	return {
-		paths,
-		default: uplotMock,
-	};
-});
-
-// Mock GetMetricQueryRange to track API calls
-jest.mock('lib/dashboard/getQueryResults', () => ({
-	GetMetricQueryRange: jest.fn(),
-}));
-
-// Mock generateColor
-jest.mock('lib/uPlotLib/utils/generateColor', () => ({
-	generateColor: jest.fn().mockReturnValue('#1f77b4'),
-}));
-
-// Mock OverlayScrollbar
-jest.mock(
-	'components/OverlayScrollbar/OverlayScrollbar',
-	() =>
-		// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-		function OverlayScrollbar({ children }: any) {
-			return <div data-testid="overlay-scrollbar">{children}</div>;
-		},
-);
-
-// Mock Virtuoso
-jest.mock('react-virtuoso', () => ({
-	Virtuoso: jest.fn(({ data, itemContent }) => (
-		<div data-testid="virtuoso">
-			{data?.map((item: any, index: number) => (
-				<div key={item.id || index} data-testid={`log-item-${item.id}`}>
-					{itemContent(index, item)}
-				</div>
-			))}
-		</div>
-	)),
-}));
-
-// Mock InfraMetrics component for focused testing
-jest.mock(
-	'container/LogDetailedView/InfraMetrics/InfraMetrics',
-	() =>
-		// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-		function MockInfraMetrics({
-			podName,
-			nodeName,
-			hostName,
-			clusterName,
-			timestamp,
-			dataSource,
-		}: any) {
-			return (
-				<div data-testid="infra-metrics">
-					<div data-testid="infra-pod-name">{podName}</div>
-					<div data-testid="infra-node-name">{nodeName}</div>
-					<div data-testid="infra-host-name">{hostName}</div>
-					<div data-testid="infra-cluster-name">{clusterName}</div>
-					<div data-testid="infra-timestamp">{timestamp}</div>
-					<div data-testid="infra-data-source">{dataSource}</div>
-				</div>
-			);
-		},
-);
-
-// Mock PreferenceContextProvider
-jest.mock('providers/preferences/context/PreferenceContextProvider', () => ({
-	PreferenceContextProvider: ({ children }: any): JSX.Element => (
-		<div>{children}</div>
-	),
-}));
-
-describe('SpanDetailsDrawer - Infra Metrics', () => {
-	// eslint-disable-next-line sonarjs/no-unused-collection
-	let apiCallHistory: any[] = [];
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		apiCallHistory = [];
-		mockSafeNavigate.mockClear();
-		mockWindowOpen.mockClear();
-		mockUpdateAllQueriesOperators.mockClear();
-
-		// Setup API call tracking for infra metrics
-		(GetMetricQueryRange as jest.Mock).mockImplementation((query) => {
-			apiCallHistory.push(query);
-
-			// Return mock responses for different query types
-			if (
-				query?.query?.builder?.queryData?.[0]?.filters?.items?.some(
-					(item: any) => item.key?.key === 'k8s_pod_name',
-				)
-			) {
-				return Promise.resolve(mockPodMetricsResponse);
-			}
-
-			if (
-				query?.query?.builder?.queryData?.[0]?.filters?.items?.some(
-					(item: any) => item.key?.key === 'k8s_node_name',
-				)
-			) {
-				return Promise.resolve(mockNodeMetricsResponse);
-			}
-
-			return Promise.resolve(mockEmptyMetricsResponse);
-		});
-	});
-
-	afterEach(() => {
-		server.resetHandlers();
-	});
-
-	// Mock QueryBuilder context value
-	const mockQueryBuilderContextValue = {
-		currentQuery: {
-			builder: {
-				queryData: [
-					{
-						dataSource: 'logs',
-						queryName: 'A',
-						filters: { items: [], op: 'AND' },
-					},
-				],
-			},
-		},
-		stagedQuery: {
-			builder: {
-				queryData: [
-					{
-						dataSource: 'logs',
-						queryName: 'A',
-						filters: { items: [], op: 'AND' },
-					},
-				],
-			},
-		},
-		updateAllQueriesOperators: mockUpdateAllQueriesOperators,
-		panelType: 'list',
-		redirectWithQuery: jest.fn(),
-		handleRunQuery: jest.fn(),
-		handleStageQuery: jest.fn(),
-		resetQuery: jest.fn(),
-	};
-
-	const renderSpanDetailsDrawer = (props = {}): void => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithInfraMetadata}
-					traceStartTime={1640995200000} // 2022-01-01 00:00:00
-					traceEndTime={1640995260000} // 2022-01-01 00:01:00
-					{...props}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-	};
-
-	it('should detect infra metadata from span attributes', async () => {
-		renderSpanDetailsDrawer();
-
-		// Click on metrics tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		expect(infraMetricsButton).toBeInTheDocument();
-
-		fireEvent.click(infraMetricsButton);
-
-		// Wait for infra metrics to load
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify metadata extraction
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedInfraMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedInfraMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedInfraMetadata.hostName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedInfraMetadata.clusterName,
-		);
-		expect(screen.getByTestId('infra-data-source')).toHaveTextContent(
-			DataSource.TRACES,
-		);
-	});
-
-	it('should not show infra tab when span lacks infra metadata', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithoutInfraMetadata}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Should NOT show infra tab, only logs tab
-		expect(
-			screen.queryByRole('button', { name: /metrics/i }),
-		).not.toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
-	});
-
-	it('should show infra tab when span has infra metadata', async () => {
-		renderSpanDetailsDrawer();
-
-		// Should show both logs and infra tabs
-		expect(screen.getByRole('button', { name: /metrics/i })).toBeInTheDocument();
-		expect(screen.getByRole('button', { name: /logs/i })).toBeInTheDocument();
-	});
-
-	it('should handle pod-only metadata correctly', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithPodOnly}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify pod-only metadata
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.clusterName,
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedPodOnlyMetadata.hostName,
-		);
-	});
-
-	it('should handle node-only metadata correctly', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithNodeOnly}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify node-only metadata
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.clusterName,
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedNodeOnlyMetadata.hostName,
-		);
-	});
-
-	it('should handle host-only metadata correctly', async () => {
-		render(
-			<QueryBuilderContext.Provider value={mockQueryBuilderContextValue as any}>
-				<SpanDetailsDrawer
-					isSpanDetailsDocked={false}
-					setIsSpanDetailsDocked={jest.fn()}
-					selectedSpan={mockSpanWithHostOnly}
-					traceStartTime={1640995200000}
-					traceEndTime={1640995260000}
-				/>
-			</QueryBuilderContext.Provider>,
-		);
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify host-only metadata
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.hostName,
-		);
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.podName,
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.nodeName,
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			expectedHostOnlyMetadata.clusterName,
-		);
-	});
-
-	it('should switch between logs and infra tabs correctly', async () => {
-		renderSpanDetailsDrawer();
-
-		// Initially should show logs tab content
-		const logsButton = screen.getByRole('button', { name: /logs/i });
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-
-		expect(logsButton).toBeInTheDocument();
-		expect(infraMetricsButton).toBeInTheDocument();
-
-		// Ensure logs tab is active and wait for content to load
-		fireEvent.click(logsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
-		});
-
-		// Click on infra tab
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Should not show logs content anymore
-		expect(
-			screen.queryByTestId('open-in-explorer-button'),
-		).not.toBeInTheDocument();
-
-		// Switch back to logs tab
-		fireEvent.click(logsButton);
-
-		// Should not show infra metrics anymore
-		await waitFor(() => {
-			expect(screen.queryByTestId('infra-metrics')).not.toBeInTheDocument();
-		});
-
-		// Verify logs content is shown again
-		await waitFor(() => {
-			expect(screen.getByTestId('open-in-explorer-button')).toBeInTheDocument();
-		});
-	});
-
-	it('should pass correct data source and handle multiple infra identifiers', async () => {
-		renderSpanDetailsDrawer();
-
-		// Should show infra tab when span has any of: clusterName, podName, nodeName, hostName
-		expect(screen.getByRole('button', { name: /metrics/i })).toBeInTheDocument();
-
-		// Click on infra tab
-		const infraMetricsButton = screen.getByRole('button', { name: /metrics/i });
-		fireEvent.click(infraMetricsButton);
-
-		await waitFor(() => {
-			expect(screen.getByTestId('infra-metrics')).toBeInTheDocument();
-		});
-
-		// Verify TRACES data source is passed
-		expect(screen.getByTestId('infra-data-source')).toHaveTextContent(
-			DataSource.TRACES,
-		);
-
-		// All infra identifiers should be passed through
-		expect(screen.getByTestId('infra-pod-name')).toHaveTextContent(
-			'test-pod-abc123',
-		);
-		expect(screen.getByTestId('infra-node-name')).toHaveTextContent(
-			'test-node-456',
-		);
-		expect(screen.getByTestId('infra-host-name')).toHaveTextContent(
-			'test-host.example.com',
-		);
-		expect(screen.getByTestId('infra-cluster-name')).toHaveTextContent(
-			'test-cluster',
-		);
-	});
-});

frontend/src/container/SpanDetailsDrawer/__tests__/infraMetricsTestData.ts

@@ -1,167 +0,0 @@
-import { Span } from 'types/api/trace/getTraceV2';
-
-// Constants
-const TEST_TRACE_ID = 'test-trace-id';
-const TEST_CLUSTER_NAME = 'test-cluster';
-const TEST_POD_NAME = 'test-pod-abc123';
-const TEST_NODE_NAME = 'test-node-456';
-const TEST_HOST_NAME = 'test-host.example.com';
-
-// Mock span with infrastructure metadata (pod + node + host)
-export const mockSpanWithInfraMetadata: Span = {
-	spanId: 'infra-span-id',
-	traceId: TEST_TRACE_ID,
-	name: 'api-service',
-	serviceName: 'api-service',
-	timestamp: 1640995200000000, // 2022-01-01 00:00:00 in microseconds
-	durationNano: 2000000000, // 2 seconds in nanoseconds
-	spanKind: 'server',
-	statusCodeString: 'STATUS_CODE_OK',
-	statusMessage: '',
-	parentSpanId: '',
-	references: [],
-	event: [],
-	tagMap: {
-		'k8s.cluster.name': TEST_CLUSTER_NAME,
-		'k8s.pod.name': TEST_POD_NAME,
-		'k8s.node.name': TEST_NODE_NAME,
-		'host.name': TEST_HOST_NAME,
-		'service.name': 'api-service',
-		'http.method': 'GET',
-	},
-	hasError: false,
-	rootSpanId: '',
-	kind: 0,
-	rootName: '',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-// Mock span with only pod metadata
-export const mockSpanWithPodOnly: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'pod-only-span-id',
-	tagMap: {
-		'k8s.cluster.name': TEST_CLUSTER_NAME,
-		'k8s.pod.name': TEST_POD_NAME,
-		'service.name': 'api-service',
-	},
-};
-
-// Mock span with only node metadata
-export const mockSpanWithNodeOnly: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'node-only-span-id',
-	tagMap: {
-		'k8s.node.name': TEST_NODE_NAME,
-		'service.name': 'api-service',
-	},
-};
-
-// Mock span with only host metadata
-export const mockSpanWithHostOnly: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'host-only-span-id',
-	tagMap: {
-		'host.name': TEST_HOST_NAME,
-		'service.name': 'api-service',
-	},
-};
-
-// Mock span without any infrastructure metadata
-export const mockSpanWithoutInfraMetadata: Span = {
-	...mockSpanWithInfraMetadata,
-	spanId: 'no-infra-span-id',
-	tagMap: {
-		'service.name': 'api-service',
-		'http.method': 'GET',
-		'http.status_code': '200',
-	},
-};
-
-// Mock infrastructure metrics API responses
-export const mockPodMetricsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							metric: { pod_name: TEST_POD_NAME },
-							values: [
-								[1640995200, '0.5'], // CPU usage
-								[1640995260, '0.6'],
-							],
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockNodeMetricsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							metric: { node_name: TEST_NODE_NAME },
-							values: [
-								[1640995200, '2.1'], // Memory usage
-								[1640995260, '2.3'],
-							],
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockEmptyMetricsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [],
-				},
-			},
-		},
-	},
-};
-
-// Expected infrastructure metadata extractions
-export const expectedInfraMetadata = {
-	clusterName: TEST_CLUSTER_NAME,
-	podName: TEST_POD_NAME,
-	nodeName: TEST_NODE_NAME,
-	hostName: TEST_HOST_NAME,
-};
-
-export const expectedPodOnlyMetadata = {
-	clusterName: TEST_CLUSTER_NAME,
-	podName: TEST_POD_NAME,
-	nodeName: '',
-	hostName: '',
-	spanTimestamp: '2022-01-01T00:00:00.000Z',
-};
-
-export const expectedNodeOnlyMetadata = {
-	clusterName: '',
-	podName: '',
-	nodeName: TEST_NODE_NAME,
-	hostName: '',
-	spanTimestamp: '2022-01-01T00:00:00.000Z',
-};
-
-export const expectedHostOnlyMetadata = {
-	clusterName: '',
-	podName: '',
-	nodeName: '',
-	hostName: TEST_HOST_NAME,
-	spanTimestamp: '2022-01-01T00:00:00.000Z',
-};

frontend/src/container/SpanDetailsDrawer/__tests__/mockData.ts

@@ -1,224 +0,0 @@
-import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
-import { ILog } from 'types/api/logs/log';
-import { Span } from 'types/api/trace/getTraceV2';
-
-// Constants
-const TEST_SPAN_ID = 'test-span-id';
-const TEST_TRACE_ID = 'test-trace-id';
-const TEST_SERVICE = 'test-service';
-
-// Mock span data
-export const mockSpan: Span = {
-	spanId: TEST_SPAN_ID,
-	traceId: TEST_TRACE_ID,
-	name: TEST_SERVICE,
-	serviceName: TEST_SERVICE,
-	timestamp: 1640995200000, // 2022-01-01 00:00:00 in milliseconds
-	durationNano: 1000000000, // 1 second in nanoseconds
-	spanKind: 'server',
-	statusCodeString: 'STATUS_CODE_OK',
-	statusMessage: '',
-	parentSpanId: '',
-	references: [],
-	event: [],
-	tagMap: {
-		'http.method': 'GET',
-		[SPAN_ATTRIBUTES.HTTP_URL]: '/api/test',
-		'http.status_code': '200',
-	},
-	hasError: false,
-	rootSpanId: '',
-	kind: 0,
-	rootName: '',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-// Mock span with long status message (> 100 characters) for testing truncation
-export const mockSpanWithLongStatusMessage: Span = {
-	...mockSpan,
-	statusMessage:
-		'Error: Connection timeout occurred while trying to reach the database server. The connection pool was exhausted and all retry attempts failed after 30 seconds.',
-};
-
-// Mock span with short status message (<= 100 characters)
-export const mockSpanWithShortStatusMessage: Span = {
-	...mockSpan,
-	statusMessage: 'Connection successful',
-};
-
-// Mock logs with proper relationships
-export const mockSpanLogs: ILog[] = [
-	{
-		id: 'span-log-1',
-		timestamp: '2022-01-01T00:00:01.000Z',
-		body: 'Processing request in span',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: TEST_SPAN_ID,
-		span_id: TEST_SPAN_ID,
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-	{
-		id: 'span-log-2',
-		timestamp: '2022-01-01T00:00:02.000Z',
-		body: 'Span operation completed',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: TEST_SPAN_ID,
-		span_id: TEST_SPAN_ID,
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-];
-
-export const mockContextLogs: ILog[] = [
-	{
-		id: 'context-log-before',
-		timestamp: '2021-12-31T23:59:59.000Z',
-		body: 'Context log before span',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: 'different-span-id',
-		span_id: 'different-span-id',
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-	{
-		id: 'context-log-after',
-		timestamp: '2022-01-01T00:00:03.000Z',
-		body: 'Context log after span',
-		severity_text: 'INFO',
-		severity_number: 9,
-		spanID: 'another-different-span-id',
-		span_id: 'another-different-span-id',
-		date: '',
-		traceId: TEST_TRACE_ID,
-		traceFlags: 0,
-		severityText: '',
-		severityNumber: 0,
-		resources_string: {},
-		scope_string: {},
-		attributesString: {},
-		attributes_string: {},
-		attributesInt: {},
-		attributesFloat: {},
-	},
-];
-
-// Combined logs in chronological order
-export const mockAllLogs: ILog[] = [
-	mockContextLogs[0], // before
-	...mockSpanLogs, // span logs
-	mockContextLogs[1], // after
-];
-
-// Mock API responses
-export const mockSpanLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: mockSpanLogs.map((log) => ({
-								data: log,
-								timestamp: log.timestamp,
-							})),
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockBeforeLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: [mockContextLogs[0]].map((log) => ({
-								data: log,
-								timestamp: log.timestamp,
-							})),
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockAfterLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: [mockContextLogs[1]].map((log) => ({
-								data: log,
-								timestamp: log.timestamp,
-							})),
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-export const mockEmptyLogsResponse = {
-	payload: {
-		data: {
-			newResult: {
-				data: {
-					result: [
-						{
-							list: [],
-						},
-					],
-				},
-			},
-		},
-	},
-};
-
-// Expected v5 filter expressions
-export const expectedSpanFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND span_id = '${TEST_SPAN_ID}'`;
-export const expectedBeforeFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND id < 'span-log-1'`;
-export const expectedAfterFilterExpression = `trace_id = '${TEST_TRACE_ID}' AND id > 'span-log-2'`;
-export const expectedTraceOnlyFilterExpression = `trace_id = '${TEST_TRACE_ID}'`;

frontend/src/container/SpanDetailsDrawer/constants.ts

@@ -1,11 +0,0 @@
-export enum RelatedSignalsViews {
-	LOGS = 'logs',
-	// METRICS = 'metrics',
-	INFRA = 'infra',
-}
-
-export const RELATED_SIGNALS_VIEW_TYPES = {
-	LOGS: RelatedSignalsViews.LOGS,
-	// METRICS: RelatedSignalsViews.METRICS,
-	INFRA: RelatedSignalsViews.INFRA,
-};

frontend/src/container/SpanDetailsDrawer/utils.ts

@@ -1,24 +0,0 @@
-import { Span } from 'types/api/trace/getTraceV2';
-
-/**
- * Infrastructure metadata keys that indicate infra signals are available
- */
-export const INFRA_METADATA_KEYS = [
-	'k8s.cluster.name',
-	'k8s.pod.name',
-	'k8s.node.name',
-	'host.name',
-] as const;
-
-/**
- * Checks if a span has any infrastructure metadata attributes
- * @param span - The span to check for infrastructure metadata
- * @returns true if the span has at least one infrastructure metadata key, false otherwise
- */
-export function hasInfraMetadata(span: Span | undefined): boolean {
-	if (!span?.tagMap) {
-		return false;
-	}
-
-	return INFRA_METADATA_KEYS.some((key) => span.tagMap?.[key]);
-}

frontend/src/container/TraceMetadata/TraceMetadata.styles.scss

@@ -1,186 +0,0 @@
-.trace-metadata {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0px 16px 0px 16px;
-
-	.metadata-info {
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-
-		.first-row {
-			display: flex;
-			align-items: center;
-
-			.previous-btn {
-				display: flex;
-				height: 30px;
-				padding: 6px 8px;
-				align-items: center;
-				gap: 4px;
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-				border-radius: 4px;
-				box-shadow: none;
-			}
-
-			.trace-name {
-				display: flex;
-				padding: 6px 8px;
-				margin-left: 6px;
-				align-items: center;
-				gap: 4px;
-				border: 1px solid var(--l1-border);
-				border-radius: 4px 0px 0px 4px;
-				background: var(--l2-background);
-
-				.drafting {
-					color: var(--l1-foreground);
-				}
-
-				.trace-id {
-					color: var(--l1-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 18px; /* 128.571% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.trace-id-value {
-				display: flex;
-				padding: 6px 8px;
-				justify-content: center;
-				align-items: center;
-				gap: 10px;
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				letter-spacing: -0.07px;
-				border: 1px solid var(--l1-border);
-				border-left: unset;
-				border-radius: 0px 4px 4px 0px;
-			}
-		}
-
-		.second-row {
-			display: flex;
-			gap: 24px;
-
-			.service-entry-info {
-				display: flex;
-				gap: 6px;
-				color: var(--l2-foreground);
-				align-items: center;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-
-				.root-span-name {
-					display: flex;
-					padding: 2px 8px;
-					align-items: center;
-					gap: 8px;
-					border-radius: 50px;
-					border: 1px solid var(--l1-border);
-					background: var(--l1-border);
-				}
-			}
-
-			.trace-duration {
-				display: flex;
-				gap: 6px;
-				color: var(--l2-foreground);
-				align-items: center;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-			}
-
-			.start-time-info {
-				display: flex;
-				gap: 6px;
-				color: var(--l2-foreground);
-				align-items: center;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-			}
-		}
-	}
-
-	.datapoints-info {
-		display: flex;
-		gap: 16px;
-
-		.separator {
-			width: 1px;
-			background: var(--l3-background);
-		}
-
-		.data-point {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			gap: 4px;
-
-			.text {
-				color: var(--l2-foreground);
-				text-align: center;
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 18px; /* 128.571% */
-				letter-spacing: -0.07px;
-			}
-
-			.value {
-				color: var(--l1-foreground);
-				font-variant-numeric: lining-nums tabular-nums stacked-fractions
-					slashed-zero;
-				font-feature-settings:
-					'case' on,
-					'cpsp' on,
-					'dlig' on,
-					'salt' on;
-				font-family: Inter;
-				font-size: 20px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 28px; /* 140% */
-				letter-spacing: -0.1px;
-				text-transform: uppercase;
-				text-align: right;
-			}
-		}
-	}
-}

frontend/src/container/TraceMetadata/TraceMetadata.tsx

@@ -1,171 +0,0 @@
-import { useMemo } from 'react';
-import { useLocation, useRouteMatch } from 'react-router-dom';
-import { Skeleton, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import removeLocalStorageKey from 'api/browser/localstorage/remove';
-import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { LOCALSTORAGE } from 'constants/localStorage';
-import ROUTES from 'constants/routes';
-import dayjs from 'dayjs';
-import history from 'lib/history';
-import {
-	ArrowLeft,
-	BetweenHorizontalStart,
-	CalendarClock,
-	DraftingCompass,
-	Timer,
-} from '@signozhq/icons';
-import { useTimezone } from 'providers/Timezone';
-
-import './TraceMetadata.styles.scss';
-
-export interface ITraceMetadataProps {
-	traceID: string;
-	rootServiceName: string;
-	rootSpanName: string;
-	startTime: number;
-	duration: number;
-	totalSpans: number;
-	totalErrorSpans: number;
-	notFound: boolean;
-	isDataLoading: boolean;
-}
-
-function TraceMetadata(props: ITraceMetadataProps): JSX.Element {
-	const {
-		traceID,
-		rootServiceName,
-		rootSpanName,
-		startTime,
-		duration,
-		totalErrorSpans,
-		totalSpans,
-		notFound,
-		isDataLoading,
-	} = props;
-
-	const { timezone } = useTimezone();
-
-	const startTimeInMs = useMemo(
-		() =>
-			dayjs(startTime * 1e3)
-				.tz(timezone.value)
-				.format(DATE_TIME_FORMATS.DD_MMM_YYYY_HH_MM_SS),
-		[startTime, timezone.value],
-	);
-
-	const handlePreviousBtnClick = (): void => {
-		if (window.history.length > 1) {
-			history.goBack();
-		} else {
-			history.push(ROUTES.TRACES_EXPLORER);
-		}
-	};
-
-	const isOnOldRoute = !!useRouteMatch({
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
-	});
-
-	const location = useLocation();
-
-	const handleSwitchToNewView = (): void => {
-		removeLocalStorageKey(LOCALSTORAGE.TRACE_DETAILS_PREFER_OLD_VIEW);
-		history.replace({
-			pathname: `/trace/${traceID}`,
-			search: location.search,
-			hash: location.hash,
-			state: location.state,
-		});
-	};
-
-	return (
-		<div className="trace-metadata">
-			<section className="metadata-info">
-				<div className="first-row">
-					<Button
-						variant="solid"
-						color="secondary"
-						size="icon"
-						className="previous-btn"
-						prefix={<ArrowLeft size={14} />}
-						onClick={handlePreviousBtnClick}
-					/>
-					<div className="trace-name">
-						<DraftingCompass size={14} className="drafting" />
-						<Typography.Text className="trace-id">Trace ID</Typography.Text>
-					</div>
-					<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
-					{isOnOldRoute && (
-						<Button
-							variant="solid"
-							color="primary"
-							size="md"
-							className="new-view-btn"
-							onClick={handleSwitchToNewView}
-						>
-							Try new experience
-						</Button>
-					)}
-				</div>
-
-				{isDataLoading && (
-					<div className="second-row">
-						<div className="service-entry-info">
-							<BetweenHorizontalStart size={14} />
-							<Skeleton.Input active className="skeleton-input" size="small" />
-							<Skeleton.Input active className="skeleton-input" size="small" />
-							<Skeleton.Input active className="skeleton-input" size="small" />
-						</div>
-					</div>
-				)}
-				{!isDataLoading && !notFound && (
-					<div className="second-row">
-						<div className="service-entry-info">
-							<BetweenHorizontalStart size={14} />
-							<Typography.Text className="text">{rootServiceName}</Typography.Text>
-							&#8212;
-							<Typography.Text className="text root-span-name">
-								{rootSpanName}
-							</Typography.Text>
-						</div>
-						<div className="trace-duration">
-							<Tooltip title="Duration of trace">
-								<Timer size={14} />
-							</Tooltip>
-							<Typography.Text className="text">
-								{getYAxisFormattedValue(`${duration}`, 'ms')}
-							</Typography.Text>
-						</div>
-						<div className="start-time-info">
-							<Tooltip title="Start timestamp">
-								<CalendarClock size={14} />
-							</Tooltip>
-
-							<Typography.Text className="text">
-								{startTimeInMs || 'N/A'}
-							</Typography.Text>
-						</div>
-					</div>
-				)}
-			</section>
-			{!notFound && (
-				<section className="datapoints-info">
-					<div className="data-point">
-						<Typography.Text className="text">Total Spans</Typography.Text>
-						<Typography.Text className="value">{totalSpans}</Typography.Text>
-					</div>
-					<div className="separator" />
-					<div className="data-point">
-						<Typography.Text className="text">Error Spans</Typography.Text>
-						<Typography.Text className="value">{totalErrorSpans}</Typography.Text>
-					</div>
-				</section>
-			)}
-		</div>
-	);
-}
-
-export default TraceMetadata;

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -1,239 +0,0 @@
-// Modal base styles
-.add-span-to-funnel-modal {
-	&__loading-spinner {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 400px;
-	}
-	&-container {
-		.ant-modal {
-			&-content,
-			&-header {
-				background: var(--l1-background);
-			}
-
-			&-header {
-				border-bottom: none;
-
-				.ant-modal-title {
-					color: var(--l1-foreground);
-				}
-			}
-
-			&-body {
-				padding: 14px 16px !important;
-				padding-bottom: 0 !important;
-				border-bottom-left-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-
-			&-footer {
-				margin-top: 0;
-				background: var(--l2-background);
-				border-top: 1px solid var(--l1-border);
-				padding: 16px !important;
-				.add-span-to-funnel-modal {
-					&__save-button {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						gap: 4px;
-						color: var(--l1-foreground);
-						font-size: 12px;
-						font-weight: 500;
-						line-height: 24px;
-						width: 135px;
-
-						.ant-btn-icon {
-							display: flex;
-						}
-						&:disabled {
-							color: var(--l2-foreground);
-							.ant-btn-icon {
-								svg {
-									stroke: var(--l2-foreground);
-								}
-							}
-						}
-					}
-					&__discard-button {
-						background: var(--l1-border);
-					}
-				}
-				.ant-btn {
-					border-radius: 2px;
-					padding: 4px 8px;
-					margin: 0 !important;
-					border: none;
-					box-shadow: none;
-				}
-			}
-		}
-	}
-}
-
-// Main modal styles
-.add-span-to-funnel-modal {
-	// Common button styles
-	%button-base {
-		display: flex;
-		align-items: center;
-		font-family: Inter;
-	}
-
-	// Details view styles
-	&--details {
-		.traces-funnel-details {
-			height: unset;
-
-			&__steps-config {
-				width: unset;
-				border: none;
-			}
-
-			.funnel-step-wrapper {
-				gap: 15px;
-			}
-
-			.steps-content {
-				padding: 0 16px;
-				max-height: 500px;
-			}
-		}
-	}
-
-	// Search section
-	&__search {
-		display: flex;
-		gap: 12px;
-		margin-bottom: 14px;
-		align-items: center;
-
-		&-input {
-			flex: 1;
-			padding: 6px 8px;
-			background: var(--l3-background);
-
-			.ant-input-prefix {
-				height: 18px;
-				margin-inline-end: 6px;
-				svg {
-					opacity: 0.4;
-				}
-			}
-
-			&,
-			input {
-				font-family: Inter;
-				font-size: 14px;
-				line-height: 18px;
-				letter-spacing: -0.07px;
-				font-weight: 400;
-				background: var(--l3-background);
-			}
-
-			input::placeholder {
-				color: var(--l2-foreground);
-				opacity: 0.4;
-			}
-		}
-	}
-
-	// Create button
-	&__create-button {
-		@extend %button-base;
-		width: 153px;
-		padding: 4px 8px;
-		justify-content: center;
-		gap: 4px;
-		flex-shrink: 0;
-		border-radius: 2px;
-		background: var(--l1-border);
-		border: none;
-		box-shadow: none;
-		color: var(--l2-foreground);
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 24px;
-	}
-	.funnel-item {
-		padding: 8px 8px 12px 16px;
-		&,
-		&:first-child {
-			border-radius: 6px;
-		}
-
-		&__header {
-			line-height: 20px;
-		}
-		&__details {
-			line-height: 18px;
-		}
-	}
-
-	// List section
-	&__list {
-		max-height: 400px;
-		overflow-y: scroll;
-		.funnels-empty {
-			&__content {
-				padding: 0;
-			}
-		}
-
-		.funnels-list {
-			gap: 8px;
-
-			.funnel-item {
-				padding: 8px 16px 12px;
-
-				&__details {
-					margin-top: 8px;
-				}
-			}
-		}
-	}
-
-	&__spinner {
-		height: 400px;
-	}
-
-	// Back button
-	&__back-button {
-		@extend %button-base;
-		gap: 6px;
-		color: var(--l2-foreground);
-		font-size: 14px;
-		line-height: 20px;
-		margin-bottom: 14px;
-	}
-
-	// Details section
-	&__details {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-
-		.funnel-configuration__steps {
-			padding: 0;
-
-			.funnel-step {
-				&__content .filters__service-and-span .ant-select {
-					width: 170px;
-				}
-
-				&__footer .error {
-					width: 25%;
-				}
-			}
-
-			.inter-step-config {
-				width: calc(100% - 104px);
-			}
-		}
-		.funnel-item__actions-popover {
-			display: none;
-		}
-	}
-}

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,294 +0,0 @@
-import { ChangeEvent, useEffect, useMemo, useState } from 'react';
-import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Spin } from 'antd';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import SignozModal from 'components/SignozModal/SignozModal';
-import {
-	useFunnelDetails,
-	useFunnelsList,
-} from 'hooks/TracesFunnels/useFunnels';
-import { isEqual } from 'lodash-es';
-import FunnelConfiguration from 'pages/TracesFunnelDetails/components/FunnelConfiguration/FunnelConfiguration';
-import { TracesFunnelsContentRenderer } from 'pages/TracesFunnels';
-import CreateFunnel from 'pages/TracesFunnels/components/CreateFunnel/CreateFunnel';
-import { FunnelListItem } from 'pages/TracesFunnels/components/FunnelsList/FunnelsList';
-import {
-	FunnelProvider,
-	useFunnelContext,
-} from 'pages/TracesFunnels/FunnelContext';
-import { filterFunnelsByQuery } from 'pages/TracesFunnels/utils';
-import { Span } from 'types/api/trace/getTraceV2';
-import { FunnelData } from 'types/api/traceFunnels';
-
-import './AddSpanToFunnelModal.styles.scss';
-
-enum ModalView {
-	LIST = 'list',
-	DETAILS = 'details',
-}
-
-function FunnelDetailsView({
-	funnel,
-	span,
-	triggerAutoSave,
-	showNotifications,
-	onChangesDetected,
-	triggerDiscard,
-}: {
-	funnel: FunnelData;
-	span: Span;
-	triggerAutoSave: boolean;
-	showNotifications: boolean;
-	onChangesDetected: (hasChanges: boolean) => void;
-	triggerDiscard: boolean;
-}): JSX.Element {
-	const { handleRestoreSteps, steps } = useFunnelContext();
-
-	// Track changes between current steps and original steps
-	useEffect(() => {
-		const hasChanges = !isEqual(steps, funnel.steps);
-		if (onChangesDetected) {
-			onChangesDetected(hasChanges);
-		}
-	}, [steps, funnel.steps, onChangesDetected]);
-
-	// Handle discard when triggered from parent
-	useEffect(() => {
-		if (triggerDiscard && funnel.steps) {
-			handleRestoreSteps(funnel.steps);
-		}
-	}, [triggerDiscard, funnel.steps, handleRestoreSteps]);
-
-	return (
-		<div className="add-span-to-funnel-modal__details">
-			<FunnelListItem
-				funnel={funnel}
-				shouldRedirectToTracesListOnDeleteSuccess={false}
-				isSpanDetailsPage
-			/>
-			<FunnelConfiguration
-				funnel={funnel}
-				isTraceDetailsPage
-				span={span}
-				triggerAutoSave={triggerAutoSave}
-				showNotifications={showNotifications}
-			/>
-		</div>
-	);
-}
-
-interface AddSpanToFunnelModalProps {
-	isOpen: boolean;
-	onClose: () => void;
-	span: Span;
-}
-
-function AddSpanToFunnelModal({
-	isOpen,
-	onClose,
-	span,
-}: AddSpanToFunnelModalProps): JSX.Element {
-	const [activeView, setActiveView] = useState<ModalView>(ModalView.LIST);
-	const [searchQuery, setSearchQuery] = useState<string>('');
-	const [selectedFunnelId, setSelectedFunnelId] = useState<string | undefined>(
-		undefined,
-	);
-	const [isCreateModalOpen, setIsCreateModalOpen] = useState<boolean>(false);
-	const [triggerSave, setTriggerSave] = useState<boolean>(false);
-	const [isUnsavedChanges, setIsUnsavedChanges] = useState<boolean>(false);
-	const [triggerDiscard, setTriggerDiscard] = useState<boolean>(false);
-	const [isCreatedFromSpan, setIsCreatedFromSpan] = useState<boolean>(false);
-
-	const handleSearch = (e: ChangeEvent<HTMLInputElement>): void => {
-		setSearchQuery(e.target.value);
-	};
-
-	const { data, isLoading, isError, isFetching } = useFunnelsList();
-
-	const filteredData = useMemo(
-		() =>
-			filterFunnelsByQuery(data?.payload || [], searchQuery).sort(
-				(a, b) =>
-					new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
-			),
-		[data?.payload, searchQuery],
-	);
-
-	const {
-		data: funnelDetails,
-		isLoading: isFunnelDetailsLoading,
-		isFetching: isFunnelDetailsFetching,
-	} = useFunnelDetails({
-		funnelId: selectedFunnelId,
-	});
-
-	const handleFunnelClick = (funnel: FunnelData): void => {
-		setSelectedFunnelId(funnel.funnel_id);
-		setActiveView(ModalView.DETAILS);
-		setIsCreatedFromSpan(false);
-	};
-
-	const handleBack = (): void => {
-		setActiveView(ModalView.LIST);
-		setSelectedFunnelId(undefined);
-		setIsUnsavedChanges(false);
-		setTriggerSave(false);
-		setIsCreatedFromSpan(false);
-	};
-
-	const handleCreateNewClick = (): void => {
-		setIsCreateModalOpen(true);
-	};
-
-	const handleSaveFunnel = (): void => {
-		setTriggerSave(true);
-		// Reset trigger after a brief moment to allow the save to be processed
-		setTimeout(() => {
-			setTriggerSave(false);
-			onClose();
-		}, 100);
-	};
-
-	const handleDiscard = (): void => {
-		setTriggerDiscard(true);
-		// Reset trigger after a brief moment
-		setTimeout(() => {
-			setTriggerDiscard(false);
-			onClose();
-		}, 100);
-	};
-
-	const renderListView = (): JSX.Element => (
-		<div className="add-span-to-funnel-modal">
-			{!!filteredData?.length && (
-				<div className="add-span-to-funnel-modal__search">
-					<Input
-						className="add-span-to-funnel-modal__search-input"
-						placeholder="Search by name, description, or tags..."
-						prefix={<Search size={12} />}
-						value={searchQuery}
-						onChange={handleSearch}
-					/>
-				</div>
-			)}
-			<div className="add-span-to-funnel-modal__list">
-				<OverlayScrollbar>
-					<TracesFunnelsContentRenderer
-						isError={isError}
-						isLoading={isLoading || isFetching}
-						data={filteredData || []}
-						onCreateFunnel={handleCreateNewClick}
-						onFunnelClick={(funnel: FunnelData): void => handleFunnelClick(funnel)}
-						shouldRedirectToTracesListOnDeleteSuccess={false}
-					/>
-				</OverlayScrollbar>
-			</div>
-			<CreateFunnel
-				isOpen={isCreateModalOpen}
-				onClose={(funnelId): void => {
-					if (funnelId) {
-						setSelectedFunnelId(funnelId);
-						setActiveView(ModalView.DETAILS);
-						setIsCreatedFromSpan(true);
-					}
-					setIsCreateModalOpen(false);
-				}}
-				redirectToDetails={false}
-			/>
-		</div>
-	);
-
-	const renderDetailsView = ({ span }: { span: Span }): JSX.Element => (
-		<div className="add-span-to-funnel-modal add-span-to-funnel-modal--details">
-			<Button
-				type="text"
-				className="add-span-to-funnel-modal__back-button"
-				onClick={handleBack}
-			>
-				<ArrowLeft size={14} />
-				All funnels
-			</Button>
-			<div className="traces-funnel-details">
-				<div className="traces-funnel-details__steps-config">
-					<Spin
-						className="add-span-to-funnel-modal__loading-spinner"
-						spinning={isFunnelDetailsLoading || isFunnelDetailsFetching}
-						indicator={<Loader className="animate-spin" size="md" />}
-					>
-						{selectedFunnelId && funnelDetails?.payload && (
-							<FunnelProvider
-								funnelId={selectedFunnelId}
-								hasSingleStep={isCreatedFromSpan}
-							>
-								<FunnelDetailsView
-									funnel={funnelDetails.payload}
-									span={span}
-									triggerAutoSave={triggerSave}
-									showNotifications
-									onChangesDetected={setIsUnsavedChanges}
-									triggerDiscard={triggerDiscard}
-								/>
-							</FunnelProvider>
-						)}
-					</Spin>
-				</div>
-			</div>
-		</div>
-	);
-
-	return (
-		<SignozModal
-			open={isOpen}
-			onCancel={onClose}
-			width={570}
-			title="Add span to funnel"
-			className={cx('add-span-to-funnel-modal-container', {
-				'add-span-to-funnel-modal-container--details':
-					activeView === ModalView.DETAILS,
-			})}
-			footer={
-				activeView === ModalView.DETAILS
-					? [
-							<Button
-								type="default"
-								key="discard"
-								onClick={handleDiscard}
-								className="add-span-to-funnel-modal__discard-button"
-								disabled={!isUnsavedChanges}
-							>
-								Discard
-							</Button>,
-							<Button
-								key="save"
-								type="primary"
-								className="add-span-to-funnel-modal__save-button"
-								onClick={handleSaveFunnel}
-								disabled={!isUnsavedChanges}
-								icon={<Check size={14} color="var(--bg-vanilla-100)" />}
-							>
-								Save Funnel
-							</Button>,
-						]
-					: [
-							<Button
-								key="create"
-								type="default"
-								className="add-span-to-funnel-modal__create-button"
-								onClick={handleCreateNewClick}
-								icon={<Plus size={14} />}
-							>
-								Create new funnel
-							</Button>,
-						]
-			}
-		>
-			{activeView === ModalView.LIST
-				? renderListView()
-				: renderDetailsView({ span })}
-		</SignozModal>
-	);
-}
-
-export default AddSpanToFunnelModal;

frontend/src/container/TraceWaterfall/SpanLineActionButtons/SpanLineActionButtons.styles.scss

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

frontend/src/container/TraceWaterfall/SpanLineActionButtons/__tests__/SpanLineActionButtons.test.tsx

@@ -1,131 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { render } from 'tests/test-utils';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import SpanLineActionButtons from '../index';
-
-// Mock the useCopySpanLink hook
-jest.mock('hooks/trace/useCopySpanLink');
-
-const mockSpan: Span = {
-	spanId: 'test-span-id',
-	name: 'test-span',
-	serviceName: 'test-service',
-	durationNano: 1000,
-	timestamp: 1234567890,
-	rootSpanId: 'test-root-span-id',
-	parentSpanId: 'test-parent-span-id',
-	traceId: 'test-trace-id',
-	hasError: false,
-	kind: 0,
-	references: [],
-	tagMap: {},
-	event: [],
-	rootName: 'test-root-name',
-	statusMessage: 'test-status-message',
-	statusCodeString: 'test-status-code-string',
-	spanKind: 'test-span-kind',
-	hasChildren: false,
-	hasSibling: false,
-	subTreeNodeCount: 0,
-	level: 0,
-};
-
-describe('SpanLineActionButtons', () => {
-	beforeEach(() => {
-		// Clear mock before each test
-		jest.clearAllMocks();
-	});
-
-	it('renders copy link button with correct icon', () => {
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: jest.fn(),
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Check if the button is rendered with an icon
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toBeInTheDocument();
-		expect(copyButton.querySelector('svg')).toBeInTheDocument();
-	});
-
-	it('calls onSpanCopy when copy button is clicked', () => {
-		const mockOnSpanCopy = jest.fn();
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: mockOnSpanCopy,
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Click the copy button
-		const copyButton = screen.getByRole('button');
-		fireEvent.click(copyButton);
-
-		// Verify the copy function was called
-		expect(mockOnSpanCopy).toHaveBeenCalledTimes(1);
-	});
-
-	it('applies correct styling classes', () => {
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: jest.fn(),
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Check if the main container has the correct class
-		const container = screen
-			.getByRole('button')
-			.closest('.span-line-action-buttons');
-		expect(container).toHaveClass('span-line-action-buttons');
-
-		// Check if the button has the correct class
-		const copyButton = screen.getByRole('button');
-		expect(copyButton).toHaveClass('copy-span-btn');
-	});
-
-	it('copies span link to clipboard when copy button is clicked', () => {
-		const mockSetCopy = jest.fn();
-		const mockUrlQuery = {
-			delete: jest.fn(),
-			set: jest.fn(),
-			toString: jest.fn().mockReturnValue('spanId=test-span-id'),
-		};
-		const mockPathname = '/test-path';
-		const mockLocation = {
-			origin: 'http://localhost:3000',
-		};
-
-		// Mock window.location
-		Object.defineProperty(window, 'location', {
-			value: mockLocation,
-			writable: true,
-		});
-
-		// Mock useCopySpanLink hook
-		(useCopySpanLink as jest.Mock).mockReturnValue({
-			onSpanCopy: (event: React.MouseEvent) => {
-				event.preventDefault();
-				event.stopPropagation();
-				mockUrlQuery.delete('spanId');
-				mockUrlQuery.set('spanId', mockSpan.spanId);
-				const link = `${
-					window.location.origin
-				}${mockPathname}?${mockUrlQuery.toString()}`;
-				mockSetCopy(link);
-			},
-		});
-
-		render(<SpanLineActionButtons span={mockSpan} />);
-
-		// Click the copy button
-		const copyButton = screen.getByRole('button');
-		fireEvent.click(copyButton);
-
-		// Verify the copy function was called with correct link
-		expect(mockSetCopy).toHaveBeenCalledWith(
-			'http://localhost:3000/test-path?spanId=test-span-id',
-		);
-	});
-});

frontend/src/container/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -1,28 +0,0 @@
-import { Link } from '@signozhq/icons';
-import { Button, Tooltip } from 'antd';
-import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
-import { Span } from 'types/api/trace/getTraceV2';
-
-import './SpanLineActionButtons.styles.scss';
-
-export interface SpanLineActionButtonsProps {
-	span: Span;
-}
-export default function SpanLineActionButtons({
-	span,
-}: SpanLineActionButtonsProps): JSX.Element {
-	const { onSpanCopy } = useCopySpanLink(span);
-
-	return (
-		<div className="span-line-action-buttons">
-			<Tooltip title="Copy Span Link">
-				<Button
-					size="small"
-					icon={<Link size={14} />}
-					onClick={onSpanCopy}
-					className="copy-span-btn"
-				/>
-			</Tooltip>
-		</div>
-	);
-}

frontend/src/container/TraceWaterfall/TraceWaterfall.styles.scss

@@ -1,9 +0,0 @@
-.trace-waterfall {
-	height: calc(70vh - 236px);
-
-	.loading-skeleton {
-		justify-content: center;
-		align-items: center;
-		padding: 20px;
-	}
-}

frontend/src/container/TraceWaterfall/TraceWaterfall.tsx

@@ -1,137 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { Skeleton } from 'antd';
-import { AxiosError } from 'axios';
-import Spinner from 'components/Spinner';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import { GetTraceV2SuccessResponse, Span } from 'types/api/trace/getTraceV2';
-
-import { TraceWaterfallStates } from './constants';
-import Error from './TraceWaterfallStates/Error/Error';
-import NoData from './TraceWaterfallStates/NoData/NoData';
-import Success from './TraceWaterfallStates/Success/Success';
-
-import './TraceWaterfall.styles.scss';
-
-export interface IInterestedSpan {
-	spanId: string;
-	isUncollapsed: boolean;
-}
-
-interface ITraceWaterfallProps {
-	traceId: string;
-	uncollapsedNodes: string[];
-	traceData:
-		| SuccessResponse<GetTraceV2SuccessResponse, unknown>
-		| ErrorResponse
-		| undefined;
-	isFetchingTraceData: boolean;
-	errorFetchingTraceData: unknown;
-	interestedSpanId: IInterestedSpan;
-	setInterestedSpanId: Dispatch<SetStateAction<IInterestedSpan>>;
-	setTraceFlamegraphStatsWidth: Dispatch<SetStateAction<number>>;
-	selectedSpan: Span | undefined;
-	setSelectedSpan: Dispatch<SetStateAction<Span | undefined>>;
-}
-
-function TraceWaterfall(props: ITraceWaterfallProps): JSX.Element {
-	const {
-		traceData,
-		isFetchingTraceData,
-		errorFetchingTraceData,
-		interestedSpanId,
-		traceId,
-		uncollapsedNodes,
-		setInterestedSpanId,
-		setTraceFlamegraphStatsWidth,
-		setSelectedSpan,
-		selectedSpan,
-	} = props;
-	// get the current state of trace waterfall based on the API lifecycle
-	const traceWaterfallState = useMemo(() => {
-		if (isFetchingTraceData) {
-			if (
-				traceData &&
-				traceData.payload &&
-				traceData.payload.spans &&
-				traceData.payload.spans.length > 0
-			) {
-				return TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT;
-			}
-			return TraceWaterfallStates.LOADING;
-		}
-		if (errorFetchingTraceData) {
-			return TraceWaterfallStates.ERROR;
-		}
-		if (
-			traceData &&
-			traceData.payload &&
-			traceData.payload.spans &&
-			traceData.payload.spans.length === 0
-		) {
-			return TraceWaterfallStates.NO_DATA;
-		}
-
-		return TraceWaterfallStates.SUCCESS;
-	}, [errorFetchingTraceData, isFetchingTraceData, traceData]);
-
-	// capture the spans from the response, since we do not need to do any manipulation on the same we will keep this as a simple constant [ memoized ]
-	const spans = useMemo(
-		() => traceData?.payload?.spans || [],
-		[traceData?.payload?.spans],
-	);
-
-	// get the content based on the current state of the trace waterfall
-	const getContent = useMemo(() => {
-		switch (traceWaterfallState) {
-			case TraceWaterfallStates.LOADING:
-				return (
-					<div className="loading-skeleton">
-						<Skeleton active paragraph={{ rows: 6 }} />
-					</div>
-				);
-			case TraceWaterfallStates.ERROR:
-				return <Error error={errorFetchingTraceData as AxiosError} />;
-			case TraceWaterfallStates.NO_DATA:
-				return <NoData id={traceId} />;
-			case TraceWaterfallStates.SUCCESS:
-			case TraceWaterfallStates.FETCHING_WITH_OLD_DATA_PRESENT:
-				return (
-					<Success
-						spans={spans}
-						traceMetadata={{
-							traceId,
-							startTime: traceData?.payload?.startTimestampMillis || 0,
-							endTime: traceData?.payload?.endTimestampMillis || 0,
-							hasMissingSpans: traceData?.payload?.hasMissingSpans || false,
-						}}
-						interestedSpanId={interestedSpanId || ''}
-						uncollapsedNodes={uncollapsedNodes}
-						setInterestedSpanId={setInterestedSpanId}
-						setTraceFlamegraphStatsWidth={setTraceFlamegraphStatsWidth}
-						selectedSpan={selectedSpan}
-						setSelectedSpan={setSelectedSpan}
-					/>
-				);
-			default:
-				return <Spinner tip="Fetching the trace!" />;
-		}
-	}, [
-		errorFetchingTraceData,
-		interestedSpanId,
-		selectedSpan,
-		setInterestedSpanId,
-		setSelectedSpan,
-		setTraceFlamegraphStatsWidth,
-		spans,
-		traceData?.payload?.endTimestampMillis,
-		traceData?.payload?.hasMissingSpans,
-		traceData?.payload?.startTimestampMillis,
-		traceId,
-		traceWaterfallState,
-		uncollapsedNodes,
-	]);
-
-	return <div className="trace-waterfall">{getContent}</div>;
-}
-
-export default TraceWaterfall;

frontend/src/container/TraceWaterfall/TraceWaterfallStates/Error/Error.styles.scss

@@ -1,30 +0,0 @@
-.error-waterfall {
-	display: flex;
-	padding: 12px;
-	margin: 20px;
-	gap: 12px;
-	align-items: flex-start;
-	border-radius: 4px;
-	background: var(--danger-background);
-
-	.text {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-		flex-shrink: 0;
-	}
-
-	.value {
-		color: var(--l1-foreground);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 20px; /* 142.857% */
-		letter-spacing: -0.07px;
-	}
-}