chore: removed usepieinteractions

Puts this branch on the base its PR already targets, so the panel schema stops
showing up as a change in the PRs stacked above it. That base has since caught
up with main, which brings the revamped chart legend (#12838) in with it.

The heatmap's group legend moves onto that legend's action API: it no longer
reads clicks off the DOM and decides what they meant, it applies the action the
legend sends. Isolate-and-restore now comes from the legend deriving Only/All
from how many rows are showing, so the hook stops tracking which group is
isolated.

Assisted-by: Claude Opus 5

docs/api/openapi.yml

@@ -171,14 +171,6 @@ components:
       - kind
       - spec
       type: object
-    AlertmanagertypesChannelDefect:
-      enum:
-      - none
-      - missing_type
-      - multiple_notifiers
-      - unsupported_notifier
-      - unrepresentable
-      type: string
     AlertmanagertypesChannelEmailConfig:
       properties:
         headers:
@@ -392,83 +384,13 @@ components:
       required:
       - routingKey
       type: object
-    AlertmanagertypesChannelRepair:
-      properties:
-        action:
-          $ref: '#/components/schemas/AlertmanagertypesChannelRepairAction'
-        applied:
-          type: boolean
-        blockers:
-          items:
-            type: string
-          type: array
-        channels:
-          items:
-            $ref: '#/components/schemas/AlertmanagertypesListedNotificationChannel'
-          nullable: true
-          type: array
-        defect:
-          $ref: '#/components/schemas/AlertmanagertypesChannelDefect'
-        detail:
-          type: string
-        id:
-          type: string
-      required:
-      - id
-      - defect
-      - action
-      - applied
-      type: object
-    AlertmanagertypesChannelRepairAction:
-      enum:
-      - none
-      - retype
-      - split
-      - delete
-      type: string
-    AlertmanagertypesChannelSlackAction:
-      properties:
-        confirm:
-          $ref: '#/components/schemas/AlertmanagertypesChannelSlackConfirmation'
-        name:
-          type: string
-        style:
-          type: string
-        text:
-          type: string
-        type:
-          type: string
-        url:
-          type: string
-        value:
-          type: string
-      required:
-      - type
-      - text
-      type: object
     AlertmanagertypesChannelSlackConfig:
       properties:
-        actions:
-          items:
-            $ref: '#/components/schemas/AlertmanagertypesChannelSlackAction'
-          type: array
         apiUrl:
           format: password
           type: string
         channel:
           type: string
-        color:
-          type: string
-        fallback:
-          type: string
-        fields:
-          items:
-            $ref: '#/components/schemas/AlertmanagertypesChannelSlackField'
-          type: array
-        footer:
-          type: string
-        pretext:
-          type: string
         sendResolved:
           nullable: true
           type: boolean
@@ -476,37 +398,9 @@ components:
           type: string
         title:
           type: string
-        titleLink:
-          type: string
       required:
       - apiUrl
       type: object
-    AlertmanagertypesChannelSlackConfirmation:
-      properties:
-        dismissText:
-          type: string
-        okText:
-          type: string
-        text:
-          type: string
-        title:
-          type: string
-      required:
-      - text
-      type: object
-    AlertmanagertypesChannelSlackField:
-      properties:
-        short:
-          nullable: true
-          type: boolean
-        title:
-          type: string
-        value:
-          type: string
-      required:
-      - title
-      - value
-      type: object
     AlertmanagertypesChannelWebhookConfig:
       properties:
         bearerToken:
@@ -1075,11 +969,6 @@ components:
       - duration
       - repeatType
       type: object
-    AlertmanagertypesRepairChannelParams:
-      properties:
-        apply:
-          type: boolean
-      type: object
     AlertmanagertypesRepeatOn:
       enum:
       - sunday
@@ -3321,53 +3210,6 @@ components:
         repeatVariable:
           type: string
       type: object
-    DashboardtypesAreaChartAppearance:
-      properties:
-        fillMode:
-          $ref: '#/components/schemas/DashboardtypesAreaFillMode'
-        fillOpacity:
-          $ref: '#/components/schemas/DashboardtypesFillOpacity'
-        lineInterpolation:
-          $ref: '#/components/schemas/DashboardtypesLineInterpolation'
-        lineStyle:
-          $ref: '#/components/schemas/DashboardtypesLineStyle'
-        showPoints:
-          type: boolean
-        spanGaps:
-          $ref: '#/components/schemas/DashboardtypesSpanGaps'
-      type: object
-    DashboardtypesAreaChartPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesAreaChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        thresholds:
-          items:
-            $ref: '#/components/schemas/DashboardtypesThresholdWithLabel'
-          nullable: true
-          type: array
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesAreaChartVisualization'
-      type: object
-    DashboardtypesAreaChartVisualization:
-      properties:
-        fillSpans:
-          type: boolean
-        stack:
-          $ref: '#/components/schemas/DashboardtypesStackMode'
-        timePreference:
-          $ref: '#/components/schemas/DashboardtypesTimePreference'
-      type: object
-    DashboardtypesAreaFillMode:
-      enum:
-      - solid
-      - gradient
-      type: string
     DashboardtypesAxes:
       properties:
         isLogScale:
@@ -3454,6 +3296,29 @@ components:
       required:
       - customValue
       type: object
+    DashboardtypesDashboard:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        data:
+          $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
+        id:
+          type: string
+        locked:
+          type: boolean
+        org_id:
+          type: string
+        source:
+          $ref: '#/components/schemas/DashboardtypesSource'
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      type: object
     DashboardtypesDashboardPanelRef:
       properties:
         dashboardId:
@@ -3576,11 +3441,6 @@ components:
       - gradient
       - none
       type: string
-    DashboardtypesFillOpacity:
-      maximum: 1
-      minimum: 0
-      nullable: true
-      type: number
     DashboardtypesGettableDashboardV2:
       properties:
         createdAt:
@@ -3633,6 +3493,13 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
+    DashboardtypesGettablePublicDashboardData:
+      properties:
+        dashboard:
+          $ref: '#/components/schemas/DashboardtypesDashboard'
+        publicDashboard:
+          $ref: '#/components/schemas/DashboardtypesGettablePublicDasbhboard'
+      type: object
     DashboardtypesGettablePublicDashboardDataV2:
       properties:
         dashboard:
@@ -3685,6 +3552,79 @@ components:
         hide:
           type: boolean
       type: object
+    DashboardtypesHeatmapAxes:
+      properties:
+        yScale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
+      type: object
+    DashboardtypesHeatmapChartAppearance:
+      properties:
+        colors:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
+      type: object
+    DashboardtypesHeatmapColorMode:
+      enum:
+      - palette
+      - opacity
+      type: string
+    DashboardtypesHeatmapColorScale:
+      enum:
+      - log
+      - sqrt
+      - linear
+      type: string
+    DashboardtypesHeatmapColors:
+      properties:
+        fill:
+          type: string
+        maxCount:
+          nullable: true
+          type: number
+        minCount:
+          nullable: true
+          type: number
+        mode:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
+        palette:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
+        scale:
+          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
+        steps:
+          type: integer
+      type: object
+    DashboardtypesHeatmapPalette:
+      enum:
+      - ice
+      - moss
+      - rust
+      - graphite
+      - ember
+      - lagoon
+      - orchid
+      - verdant
+      - lava
+      - beacon
+      type: string
+    DashboardtypesHeatmapPanelSpec:
+      properties:
+        axes:
+          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
+        chartAppearance:
+          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
+        formatting:
+          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
+        legend:
+          $ref: '#/components/schemas/DashboardtypesLegend'
+        visualization:
+          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
+      type: object
+    DashboardtypesHeatmapYScale:
+      enum:
+      - auto
+      - linear
+      - log
+      - symlog
+      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -4036,8 +3976,8 @@ components:
     DashboardtypesPanelPlugin:
       discriminator:
         mapping:
-          signoz/AreaChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
+          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -4049,38 +3989,26 @@ components:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
+      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
       - signoz/TimeSeriesPanel
       - signoz/BarChartPanel
-      - signoz/AreaChartPanel
       - signoz/NumberPanel
       - signoz/PieChartPanel
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
       - signoz/TextPanel
+      - signoz/HeatmapPanel
       type: string
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/AreaChartPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesAreaChartPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
         kind:
@@ -4093,6 +4021,18 @@ components:
       - kind
       - spec
       type: object
+    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
+      properties:
+        kind:
+          enum:
+          - signoz/HeatmapPanel
+          type: string
+        spec:
+          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
+      required:
+      - kind
+      - spec
+      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:
@@ -4411,12 +4351,9 @@ components:
             are connected.
           type: boolean
       type: object
-    DashboardtypesStackMode:
-      enum:
-      - none
-      - normal
-      - percent
-      type: string
+    DashboardtypesStorableDashboardData:
+      additionalProperties: {}
+      type: object
     DashboardtypesTableFormatting:
       properties:
         columnUnits:
@@ -7192,6 +7129,22 @@ components:
       - attributes
       - totalKeys
       type: object
+    MetricsexplorertypesMetricDashboard:
+      properties:
+        dashboardId:
+          type: string
+        dashboardName:
+          type: string
+        widgetId:
+          type: string
+        widgetName:
+          type: string
+      required:
+      - dashboardName
+      - dashboardId
+      - widgetId
+      - widgetName
+      type: object
     MetricsexplorertypesMetricDashboardPanelsResponse:
       properties:
         dashboards:
@@ -7202,6 +7155,16 @@ components:
       required:
       - dashboards
       type: object
+    MetricsexplorertypesMetricDashboardsResponse:
+      properties:
+        dashboards:
+          items:
+            $ref: '#/components/schemas/MetricsexplorertypesMetricDashboard'
+          nullable: true
+          type: array
+      required:
+      - dashboards
+      type: object
     MetricsexplorertypesMetricHighlightsResponse:
       properties:
         activeTimeSeries:
@@ -9746,8 +9709,6 @@ components:
           type: string
         name:
           type: string
-        origin:
-          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
         updatedAt:
           format: date-time
           type: string
@@ -9760,7 +9721,6 @@ components:
       - fieldContext
       - config
       - enabled
-      - origin
       type: object
     SpantypesSpanMapperConfig:
       properties:
@@ -9789,75 +9749,48 @@ components:
           type: string
         orgId:
           type: string
-        origin:
-          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
         updatedAt:
           format: date-time
           type: string
         updatedBy:
           type: string
-        version:
-          type: integer
       required:
       - id
       - orgId
       - name
       - condition
       - enabled
-      - origin
-      - version
       type: object
     SpantypesSpanMapperGroupCondition:
       nullable: true
       properties:
         attributes:
           items:
-            $ref: '#/components/schemas/SpantypesSpanMapperGroupConditionKey'
+            type: string
           nullable: true
           type: array
         resource:
           items:
-            $ref: '#/components/schemas/SpantypesSpanMapperGroupConditionKey'
+            type: string
           nullable: true
           type: array
       required:
       - attributes
       - resource
       type: object
-    SpantypesSpanMapperGroupConditionKey:
-      properties:
-        enabled:
-          type: boolean
-        origin:
-          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
-        value:
-          type: string
-      required:
-      - value
-      - enabled
-      type: object
     SpantypesSpanMapperOperation:
       enum:
       - move
       - copy
       type: string
-    SpantypesSpanMapperOrigin:
-      enum:
-      - user
-      - system
-      type: string
     SpantypesSpanMapperSource:
       properties:
         context:
           $ref: '#/components/schemas/SpantypesFieldContext'
-        enabled:
-          type: boolean
         key:
           type: string
         operation:
           $ref: '#/components/schemas/SpantypesSpanMapperOperation'
-        origin:
-          $ref: '#/components/schemas/SpantypesSpanMapperOrigin'
         priority:
           type: integer
       required:
@@ -9865,7 +9798,6 @@ components:
       - context
       - operation
       - priority
-      - enabled
       type: object
     SpantypesSpanMapperTestSpan:
       properties:
@@ -11116,9 +11048,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - VIEWER
       - tokenizer:
-        - cloud-integration:read
+        - VIEWER
       summary: Agent check-in
       tags:
       - cloudintegration
@@ -11168,9 +11100,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:list
+        - ADMIN
       - tokenizer:
-        - cloud-integration:list
+        - ADMIN
       summary: List accounts
       tags:
       - cloudintegration
@@ -11225,9 +11157,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:create
+        - ADMIN
       - tokenizer:
-        - cloud-integration:create
+        - ADMIN
       summary: Create account
       tags:
       - cloudintegration
@@ -11270,9 +11202,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:delete
+        - ADMIN
       - tokenizer:
-        - cloud-integration:delete
+        - ADMIN
       summary: Disconnect account
       tags:
       - cloudintegration
@@ -11338,9 +11270,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - ADMIN
       - tokenizer:
-        - cloud-integration:read
+        - ADMIN
       summary: Get account
       tags:
       - cloudintegration
@@ -11387,9 +11319,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:update
+        - ADMIN
       - tokenizer:
-        - cloud-integration:update
+        - ADMIN
       summary: Update account
       tags:
       - cloudintegration
@@ -11445,9 +11377,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:list
+        - ADMIN
       - tokenizer:
-        - cloud-integration:list
+        - ADMIN
       summary: List account services metadata
       tags:
       - cloudintegration
@@ -11520,9 +11452,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - ADMIN
       - tokenizer:
-        - cloud-integration:read
+        - ADMIN
       summary: Get service for account
       tags:
       - cloudintegration
@@ -11574,9 +11506,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:update
+        - ADMIN
       - tokenizer:
-        - cloud-integration:update
+        - ADMIN
       summary: Update service
       tags:
       - cloudintegration
@@ -11631,9 +11563,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - cloud-integration:read
+        - VIEWER
       - tokenizer:
-        - cloud-integration:read
+        - VIEWER
       summary: Agent check-in
       tags:
       - cloudintegration
@@ -11684,17 +11616,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ingestion-key:create
-        - serviceaccount:create
-        - factor-api-key:create
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       - tokenizer:
-        - ingestion-key:create
-        - serviceaccount:create
-        - factor-api-key:create
-        - serviceaccount:attach
-        - role:attach
+        - ADMIN
       summary: Get connection credentials
       tags:
       - cloudintegration
@@ -11744,8 +11668,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key: []
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: List services metadata
       tags:
       - cloudintegration
@@ -11800,8 +11726,10 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key: []
-      - tokenizer: []
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
       summary: Get service
       tags:
       - cloudintegration
@@ -13244,6 +13172,112 @@ paths:
       summary: Update org preference
       tags:
       - preferences
+  /api/v1/public/dashboards/{id}:
+    get:
+      deprecated: false
+      description: This endpoint returns the sanitized dashboard data for public access
+      operationId: GetPublicDashboardData
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesGettablePublicDashboardData'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get public dashboard data
+      tags:
+      - dashboard
+  /api/v1/public/dashboards/{id}/widgets/{idx}/query_range:
+    get:
+      deprecated: false
+      description: This endpoint return query range results for a widget of public
+        dashboard
+      operationId: GetPublicDashboardWidgetQueryRange
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      - in: path
+        name: idx
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/Querybuildertypesv5QueryRangeResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - anonymous:
+        - public-dashboard:read
+      summary: Get query range result
+      tags:
+      - dashboard
   /api/v1/roles:
     get:
       deprecated: false
@@ -19495,6 +19529,74 @@ paths:
       summary: Get metric attributes
       tags:
       - metrics
+  /api/v2/metrics/dashboards:
+    get:
+      deprecated: false
+      description: This endpoint returns associated dashboards for a specified metric
+      operationId: GetMetricDashboards
+      parameters:
+      - description: The name of the metric. May contain slashes (e.g. cloud-provider
+          metrics like run.googleapis.com/request_latencies).
+        in: query
+        name: metricName
+        required: true
+        schema:
+          description: The name of the metric. May contain slashes (e.g. cloud-provider
+            metrics like run.googleapis.com/request_latencies).
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/MetricsexplorertypesMetricDashboardsResponse'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "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
+        "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:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get metric dashboards
+      tags:
+      - metrics
   /api/v2/metrics/highlights:
     get:
       deprecated: false
@@ -20228,85 +20330,6 @@ paths:
       summary: Update notification channel
       tags:
       - channels
-  /api/v2/notification_channels/{id}/repair:
-    post:
-      deprecated: false
-      description: 'This endpoint diagnoses a stored channel that the v2 API cannot
-        read and applies the fitting action: a channel carrying several notifier configurations
-        is split into one channel per configuration, keeping this ID for the first;
-        a channel whose notifier kind v2 does not model is deleted; a channel with
-        an empty stored type has it rewritten from its data. A delete is refused while
-        a routing policy still names the channel. Nothing is written unless apply=true;
-        by default the response only shows what would happen.'
-      operationId: RepairNotificationChannel
-      parameters:
-      - in: query
-        name: apply
-        schema:
-          type: boolean
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/AlertmanagertypesRepairChannelParams'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/AlertmanagertypesChannelRepair'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "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
-        "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:
-        - notification-channel:update
-      - tokenizer:
-        - notification-channel:update
-      summary: Repair notification channel
-      tags:
-      - channels
   /api/v2/notification_channels/test:
     post:
       deprecated: false

ee/modules/dashboard/impldashboard/module.go

@@ -52,7 +52,7 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -90,6 +90,15 @@ func (module *module) GetPublic(ctx context.Context, orgID valuer.UUID, dashboar
 	return dashboardtypes.NewPublicDashboardFromStorablePublicDashboard(storablePublicDashboard), nil
 }
 
+func (module *module) GetDashboardByPublicID(ctx context.Context, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
+	if err != nil {
+		return nil, err
+	}
+
+	return dashboardtypes.NewDashboardFromStorableDashboard(storableDashboard), nil
+}
+
 func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id valuer.UUID, orgs []*types.Organization) ([]coretypes.Selector, valuer.UUID, error) {
 	orgIDs := make([]string, len(orgs))
 	for idx, org := range orgs {
@@ -107,6 +116,24 @@ func (module *module) GetPublicDashboardSelectorsAndOrg(ctx context.Context, id
 	}, storableDashboard.OrgID, nil
 }
 
+func (module *module) GetPublicWidgetQueryRange(ctx context.Context, id valuer.UUID, widgetIdx, startTime, endTime uint64) (*querybuildertypesv5.QueryRangeResponse, error) {
+	ctx = ctxtypes.NewContextWithCommentVals(ctx, map[string]string{
+		instrumentationtypes.CodeNamespace:    "dashboard",
+		instrumentationtypes.CodeFunctionName: "GetPublicWidgetQueryRange",
+	})
+	dashboard, err := module.GetDashboardByPublicID(ctx, id)
+	if err != nil {
+		return nil, err
+	}
+
+	query, err := dashboard.GetWidgetQuery(startTime, endTime, widgetIdx, module.settings.Logger())
+	if err != nil {
+		return nil, err
+	}
+
+	return module.querier.QueryRange(ctx, dashboard.OrgID, query)
+}
+
 func (module *module) GetDashboardByPublicIDV2(ctx context.Context, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
 	storableDashboard, err := module.store.GetDashboardByPublicID(ctx, id.StringValue())
 	if err != nil {
@@ -162,7 +189,7 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, publicDashboard.DashboardID)
+	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
 	if err != nil {
 		return err
 	}
@@ -173,13 +200,34 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
+func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
+	dashboard, err := module.Get(ctx, orgID, id)
+	if err != nil {
+		return err
+	}
+
+	if err := dashboard.ErrIfNotDeletable(); err != nil {
+		return err
+	}
+
+	if dashboard.Locked {
+		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
+	}
+
+	return module.delete(ctx, orgID, id)
+}
+
+func (module *module) DeleteUnsafe(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.delete(ctx, orgID, id)
+}
+
 func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashboardID valuer.UUID) error {
 	_, err := module.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.GetV2(ctx, orgID, dashboardID)
+	dashboard, err := module.Get(ctx, orgID, dashboardID)
 	if err != nil {
 		return err
 	}
@@ -212,6 +260,10 @@ func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[strin
 	return stats, nil
 }
 
+func (module *module) Create(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, data dashboardtypes.PostableDashboard) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Create(ctx, orgID, createdBy, creator, source, data)
+}
+
 func (module *module) CreateV2(ctx context.Context, orgID valuer.UUID, createdBy string, creator valuer.UUID, source dashboardtypes.Source, postable dashboardtypes.PostableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.CreateV2(ctx, orgID, createdBy, creator, source, postable)
 }
@@ -294,10 +346,30 @@ func (module *module) DeleteView(ctx context.Context, orgID valuer.UUID, id valu
 	return module.pkgDashboardModule.DeleteView(ctx, orgID, id)
 }
 
+func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Get(ctx, orgID, id)
+}
+
+func (module *module) GetByMetricNames(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
+	return module.pkgDashboardModule.GetByMetricNames(ctx, orgID, metricNames)
+}
+
 func (module *module) GetByMetricNamesV2(ctx context.Context, orgID valuer.UUID, metricNames []string) (map[string][]dashboardtypes.DashboardPanelRef, error) {
 	return module.pkgDashboardModule.GetByMetricNamesV2(ctx, orgID, metricNames)
 }
 
+func (module *module) List(ctx context.Context, orgID valuer.UUID) ([]*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.List(ctx, orgID)
+}
+
+func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error) {
+	return module.pkgDashboardModule.Update(ctx, orgID, id, updatedBy, data, diff)
+}
+
+func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
+	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
+}
+
 func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID valuer.UUID) error {
 	return module.pkgDashboardModule.ReconcileSystemDashboards(ctx, orgID)
 }
@@ -305,3 +377,12 @@ func (module *module) ReconcileSystemDashboards(ctx context.Context, orgID value
 func (module *module) GetSystemDashboard(ctx context.Context, orgID valuer.UUID, name string) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.GetSystemDashboard(ctx, orgID, name)
 }
+
+func (module *module) delete(ctx context.Context, orgID, id valuer.UUID) error {
+	return module.store.RunInTx(ctx, func(ctx context.Context) error {
+		if err := module.store.DeletePublic(ctx, id.String()); err != nil && !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+		return module.store.Delete(ctx, orgID, id)
+	})
+}

ee/modules/metricreductionrule/implmetricreductionrule/module.go

@@ -462,7 +462,7 @@ func (m *module) relatedAssetImpact(ctx context.Context, orgID valuer.UUID, metr
 		droppedSet[label] = struct{}{}
 	}
 
-	if dashboards, err := m.dashboard.GetByMetricNamesV2(ctx, orgID, []string{metricName}); err != nil {
+	if dashboards, err := m.dashboard.GetByMetricNames(ctx, orgID, []string{metricName}); err != nil {
 		m.logger.WarnContext(ctx, "failed to fetch related dashboards for reduction preview", slog.String("metric_name", metricName), errors.Attr(err))
 	} else {
 		for _, item := range dashboards[metricName] {

frontend/__mocks__/uplotMock.ts

@@ -2,6 +2,8 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
+	/** Consumers read `root.parentElement` to detect a re-mounted container. */
+	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -17,13 +19,20 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (): MockUPlotInstance => ({
-	setData: jest.fn(),
-	setSize: jest.fn(),
-	destroy: jest.fn(),
-	redraw: jest.fn(),
-	setSeries: jest.fn(),
-});
+const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
+	const root = document.createElement('div');
+	// Real uPlot mounts its root inside the target; without it a re-render reads
+	// `root.parentElement` off undefined and throws.
+	target?.appendChild(root);
+	return {
+		root,
+		setData: jest.fn(),
+		setSize: jest.fn(),
+		destroy: jest.fn(),
+		redraw: jest.fn(),
+		setSeries: jest.fn(),
+	};
+};
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -53,14 +62,16 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	_target: HTMLElement,
+	target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance();
+	return createMockUPlotInstance(target);
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
+// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
+MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

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

@@ -4,6 +4,7 @@
 	"GET_STARTED": "SigNoz | Get Started",
 	"SERVICE_METRICS": "SigNoz | Service Metrics",
 	"SERVICE_MAP": "SigNoz | Service Map",
+	"TRACE": "SigNoz | Trace",
 	"HOME": "SigNoz | Home",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
@@ -55,13 +56,13 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"TRACES_FUNNELS_DETAIL": "SigNoz | Funnel",
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
-	"AI_OBSERVABILITY_EXPLORER": "SigNoz | AI Observability Explorer",
 	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
 	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/public/locales/en/titles.json

@@ -14,6 +14,7 @@
 	"GET_STARTED_AZURE_MONITORING": "SigNoz | Get Started | AZURE",
 	"GET_STARTED": "SigNoz | Get Started with SigNoz Cloud",
 	"GET_STARTED_WITH_CLOUD": "SigNoz | Get Started with SigNoz Cloud",
+	"TRACE": "SigNoz | Trace",
 	"TRACE_DETAIL": "SigNoz | Trace Detail",
 	"TRACES_EXPLORER": "SigNoz | Traces Explorer",
 	"SETTINGS": "SigNoz | Settings",
@@ -42,6 +43,7 @@
 	"NOT_FOUND": "SigNoz | Page Not Found",
 	"LOGS": "SigNoz | Logs",
 	"LOGS_EXPLORER": "SigNoz | Logs Explorer",
+	"OLD_LOGS_EXPLORER": "SigNoz | Old Logs Explorer",
 	"LIVE_LOGS": "SigNoz | Live Logs",
 	"LOGS_PIPELINES": "SigNoz | Logs Pipelines",
 	"HOME_PAGE": "Open source Observability Platform | SigNoz",
@@ -77,6 +79,7 @@
 	"SERVICE_ACCOUNTS_SETTINGS": "SigNoz | Service Accounts",
 	"MCP_SERVER": "SigNoz | MCP Server",
 	"AI_ASSISTANT": "SigNoz | AI Assistant",
+	"TRACE_DETAIL_OLD": "SigNoz | Trace Detail",
 	"SERVICE_TOP_LEVEL_OPERATIONS": "SigNoz | Service Operations",
 	"ROLE_DETAILS": "SigNoz | Role Details",
 	"ROLE_CREATE": "SigNoz | Create Role",
@@ -85,7 +88,6 @@
 	"INTEGRATIONS_DETAIL": "SigNoz | Integration",
 	"PUBLIC_DASHBOARD": "SigNoz | Dashboard",
 	"AI_OBSERVABILITY_OVERVIEW": "SigNoz | AI Observability Overview",
-	"AI_OBSERVABILITY_EXPLORER": "SigNoz | AI Observability Explorer",
 	"AI_OBSERVABILITY_CONFIGURATION": "SigNoz | AI Observability Configuration",
 	"AI_OBSERVABILITY_ATTRIBUTE_MAPPING": "SigNoz | AI Observability Attribute Mapping"
 }

frontend/src/AppRoutes/__tests__/Private.test.tsx

@@ -1588,15 +1588,24 @@ describe('PrivateRoute', () => {
 				deniedRoles: DENIED_ROLES,
 			},
 			TRACES_EXPLORER: { path: ROUTES.TRACES_EXPLORER, deniedRoles: DENIED_ROLES },
+			TRACE: { path: ROUTES.TRACE, deniedRoles: DENIED_ROLES },
 			TRACE_DETAIL: {
 				path: ROUTES.TRACE_DETAIL.replace(':id', 'trace-id-1'),
 				deniedRoles: DENIED_ROLES,
 			},
+			TRACE_DETAIL_OLD: {
+				path: ROUTES.TRACE_DETAIL_OLD.replace(':id', 'trace-id-1'),
+				deniedRoles: DENIED_ROLES,
+			},
 			// LOGS and LOGS_EXPLORER share a path - matchPath resolves it to whichever
 			// route definition comes last, and both keys are authz-aware either way.
 			LOGS: { path: ROUTES.LOGS, deniedRoles: DENIED_ROLES },
 			LOGS_EXPLORER: { path: ROUTES.LOGS_EXPLORER, deniedRoles: DENIED_ROLES },
 			LIVE_LOGS: { path: ROUTES.LIVE_LOGS, deniedRoles: DENIED_ROLES },
+			OLD_LOGS_EXPLORER: {
+				path: ROUTES.OLD_LOGS_EXPLORER,
+				deniedRoles: DENIED_ROLES,
+			},
 			METRICS_EXPLORER: {
 				path: ROUTES.METRICS_EXPLORER,
 				deniedRoles: DENIED_ROLES,

frontend/src/AppRoutes/index.tsx

@@ -12,14 +12,13 @@ import { CmdKPalette } from 'components/cmdKPalette/cmdKPalette';
 import NotFound from 'components/NotFound';
 import { ShiftHoldOverlayController } from 'components/ShiftOverlay/ShiftHoldOverlayController';
 import Spinner from 'components/Spinner';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ROUTES from 'constants/routes';
 import AppLayout from 'container/AppLayout';
 import Hex from 'crypto-js/enc-hex';
 import HmacSHA256 from 'crypto-js/hmac-sha256';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { StatusCodes } from 'http-status-codes';
@@ -59,6 +58,7 @@ function App(): JSX.Element {
 		isFetchingActiveLicense,
 		activeLicenseFetchError,
 		userFetchError,
+		featureFlagsFetchError,
 		isLoggedIn: isLoggedInState,
 		featureFlags,
 		org,
@@ -66,8 +66,6 @@ function App(): JSX.Element {
 	} = useAppContext();
 	const [routes, setRoutes] = useState<AppRoutes[]>(defaultRoutes);
 	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isSavedViewEnabled = useSavedViewEnabled();
-	const chatSupport = useChatSupport();
 
 	const { hostname } = window.location;
 	const [pathname, setPathname] = useState(history.location.pathname);
@@ -255,9 +253,7 @@ function App(): JSX.Element {
 	}, [isDarkMode]);
 
 	useEffect(() => {
-		// The bottom strip carries Support, so the floating bubble goes entirely.
 		if (
-			isSavedViewEnabled ||
 			pathname === ROUTES.ONBOARDING ||
 			pathname.startsWith('/public/dashboard/') ||
 			pathname === '/ai-assistant' ||
@@ -267,32 +263,71 @@ function App(): JSX.Element {
 		} else {
 			window.Pylon?.('showChatBubble');
 		}
-	}, [pathname, isSavedViewEnabled]);
+	}, [pathname]);
 
-	// Identity for the Pylon widget. Whether this user gets Pylon at all is
-	// `useChatSupport`'s call — this only fills in who they are.
+	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect(() => {
-		if (chatSupport !== ChatSupportState.Pylon) {
-			return;
+		// feature flag shouldn't be loading and featureFlags or fetchError any one of this should be true indicating that req is complete
+		// licenses should also be present. there is no check for licenses for loading and error as that is mandatory if not present then routing
+		// to something went wrong which would ideally need a reload.
+		if (
+			!isFetchingFeatureFlags &&
+			(featureFlags || featureFlagsFetchError) &&
+			activeLicense &&
+			trialInfo
+		) {
+			let isChatSupportEnabled = false;
+			let isPremiumSupportEnabled = false;
+			if (featureFlags && featureFlags.length > 0) {
+				isChatSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.CHAT_SUPPORT)
+						?.active || false;
+
+				isPremiumSupportEnabled =
+					featureFlags.find((flag) => flag.name === FeatureKeys.PREMIUM_SUPPORT)
+						?.active || false;
+			}
+			const showAddCreditCardModal =
+				!isPremiumSupportEnabled && !trialInfo?.trialConvertedToSubscription;
+
+			if (
+				isLoggedInState &&
+				isChatSupportEnabled &&
+				!showAddCreditCardModal &&
+				(isCloudUser || isEnterpriseSelfHostedUser) &&
+				window.signozBootData?.settings?.pylon?.enabled
+			) {
+				const email = user.email || '';
+				const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
+				let emailHash = '';
+
+				if (email && secret) {
+					emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
+				}
+
+				window.pylon = {
+					chat_settings: {
+						app_id: window.signozBootData?.settings?.pylon?.appId,
+						email: user.email,
+						name: user.displayName || user.email,
+						email_hash: emailHash,
+					},
+				};
+			}
 		}
-
-		const email = user.email || '';
-		const secret = window.signozBootData?.settings?.pylon?.identitySecret || '';
-		let emailHash = '';
-
-		if (email && secret) {
-			emailHash = HmacSHA256(email, Hex.parse(secret)).toString(Hex);
-		}
-
-		window.pylon = {
-			chat_settings: {
-				app_id: window.signozBootData?.settings?.pylon?.appId,
-				email: user.email,
-				name: user.displayName || user.email,
-				email_hash: emailHash,
-			},
-		};
-	}, [chatSupport, user]);
+	}, [
+		isLoggedInState,
+		user,
+		pathname,
+		trialInfo?.trialConvertedToSubscription,
+		featureFlags,
+		isFetchingFeatureFlags,
+		featureFlagsFetchError,
+		activeLicense,
+		trialInfo,
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+	]);
 
 	useEffect(() => {
 		if (!isFetchingUser && isCloudUser && user && user.email) {

frontend/src/AppRoutes/pageComponents.ts

@@ -53,6 +53,17 @@ export const TracesFunnelDetails = Loadable(
 		),
 );
 
+export const TraceFilter = Loadable(
+	() => import(/* webpackChunkName: "Trace Filter Page" */ 'pages/Trace'),
+);
+
+export const TraceDetailOldRedirect = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetailOldRedirect" */ 'pages/TraceDetailOldRedirect/index'
+		),
+);
+
 export const TraceDetailV3 = Loadable(
 	() =>
 		import(
@@ -154,6 +165,14 @@ export const Logs = Loadable(
 	() => import(/* webpackChunkName: "Logs" */ 'pages/LogsModulePage'),
 );
 
+export const LogsExplorer = Loadable(
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/LogsModulePage'),
+);
+
+export const OldLogsExplorer = Loadable(
+	() => import(/* webpackChunkName: "Logs Explorer" */ 'pages/Logs'),
+);
+
 export const LiveLogs = Loadable(
 	() => import(/* webpackChunkName: "Live Logs" */ 'pages/LiveLogs'),
 );

frontend/src/AppRoutes/routes.ts

@@ -26,11 +26,13 @@ import {
 	LiveLogs,
 	Login,
 	Logs,
+	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
 	MessagingQueuesMainPage,
 	MeterExplorerPage,
 	MetricsExplorer,
+	OldLogsExplorer,
 	OnboardingV2,
 	OrgOnboarding,
 	PasswordReset,
@@ -45,7 +47,9 @@ import {
 	SomethingWentWrong,
 	StatusPage,
 	SupportPage,
+	TraceDetailOldRedirect,
 	TraceDetailV3,
+	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
 	TracesFunnels,
@@ -128,6 +132,14 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
+	// Legacy /trace-old/:id redirects to the current /trace/:id view.
+	{
+		path: ROUTES.TRACE_DETAIL_OLD,
+		exact: true,
+		component: TraceDetailOldRedirect,
+		isPrivate: true,
+		key: 'TRACE_DETAIL_OLD',
+	},
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -212,6 +224,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'ALERT_OVERVIEW',
 	},
+	{
+		path: ROUTES.TRACE,
+		exact: true,
+		component: TraceFilter,
+		isPrivate: true,
+		key: 'TRACE',
+	},
 	{
 		path: ROUTES.TRACES_EXPLORER,
 		exact: true,
@@ -282,6 +301,20 @@ const routes: AppRoutes[] = [
 		key: 'LOGS',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.LOGS_EXPLORER,
+		exact: true,
+		component: LogsExplorer,
+		key: 'LOGS_EXPLORER',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.OLD_LOGS_EXPLORER,
+		exact: true,
+		component: OldLogsExplorer,
+		key: 'OLD_LOGS_EXPLORER',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.LIVE_LOGS,
 		exact: true,

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

@@ -21,7 +21,6 @@ import type {
 	AlertmanagertypesPostableChannelDTO,
 	AlertmanagertypesPostableNotificationChannelDTO,
 	AlertmanagertypesReceiverDTO,
-	AlertmanagertypesRepairChannelParamsDTO,
 	AlertmanagertypesTestableNotificationChannelDTO,
 	AlertmanagertypesUpdatableNotificationChannelDTO,
 	CreateChannel201,
@@ -36,9 +35,6 @@ import type {
 	ListNotificationChannels200,
 	ListNotificationChannelsParams,
 	RenderErrorResponseDTO,
-	RepairNotificationChannel200,
-	RepairNotificationChannelParams,
-	RepairNotificationChannelPathParameters,
 	UpdateChannelByIDPathParameters,
 	UpdateNotificationChannel200,
 	UpdateNotificationChannelPathParameters,
@@ -1148,113 +1144,6 @@ export const useUpdateNotificationChannel = <
 > => {
 	return useMutation(getUpdateNotificationChannelMutationOptions(options));
 };
-/**
- * This endpoint diagnoses a stored channel that the v2 API cannot read and applies the fitting action: a channel carrying several notifier configurations is split into one channel per configuration, keeping this ID for the first; a channel whose notifier kind v2 does not model is deleted; a channel with an empty stored type has it rewritten from its data. A delete is refused while a routing policy still names the channel. Nothing is written unless apply=true; by default the response only shows what would happen.
- * @summary Repair notification channel
- */
-export const repairNotificationChannel = (
-	{ id }: RepairNotificationChannelPathParameters,
-	alertmanagertypesRepairChannelParamsDTO?: BodyType<AlertmanagertypesRepairChannelParamsDTO>,
-	params?: RepairNotificationChannelParams,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<RepairNotificationChannel200>({
-		url: `/api/v2/notification_channels/${id}/repair`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: alertmanagertypesRepairChannelParamsDTO,
-		params,
-		signal,
-	});
-};
-
-export const getRepairNotificationChannelMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof repairNotificationChannel>>,
-		TError,
-		{
-			pathParams: RepairNotificationChannelPathParameters;
-			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
-			params?: RepairNotificationChannelParams;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof repairNotificationChannel>>,
-	TError,
-	{
-		pathParams: RepairNotificationChannelPathParameters;
-		data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
-		params?: RepairNotificationChannelParams;
-	},
-	TContext
-> => {
-	const mutationKey = ['repairNotificationChannel'];
-	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 repairNotificationChannel>>,
-		{
-			pathParams: RepairNotificationChannelPathParameters;
-			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
-			params?: RepairNotificationChannelParams;
-		}
-	> = (props) => {
-		const { pathParams, data, params } = props ?? {};
-
-		return repairNotificationChannel(pathParams, data, params);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type RepairNotificationChannelMutationResult = NonNullable<
-	Awaited<ReturnType<typeof repairNotificationChannel>>
->;
-export type RepairNotificationChannelMutationBody =
-	| BodyType<AlertmanagertypesRepairChannelParamsDTO>
-	| undefined;
-export type RepairNotificationChannelMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Repair notification channel
- */
-export const useRepairNotificationChannel = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof repairNotificationChannel>>,
-		TError,
-		{
-			pathParams: RepairNotificationChannelPathParameters;
-			data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
-			params?: RepairNotificationChannelParams;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof repairNotificationChannel>>,
-	TError,
-	{
-		pathParams: RepairNotificationChannelPathParameters;
-		data?: BodyType<AlertmanagertypesRepairChannelParamsDTO>;
-		params?: RepairNotificationChannelParams;
-	},
-	TContext
-> => {
-	return useMutation(getRepairNotificationChannelMutationOptions(options));
-};
 /**
  * This endpoint sends a test notification for the configuration in the request body. The channel need not exist and nothing is persisted, so the body carries a configuration only.
  * @summary Test notification channel

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

@@ -36,12 +36,16 @@ import type {
 	GetDashboardV2200,
 	GetDashboardV2PathParameters,
 	GetPublicDashboard200,
+	GetPublicDashboardData200,
+	GetPublicDashboardDataPathParameters,
 	GetPublicDashboardDataV2200,
 	GetPublicDashboardDataV2PathParameters,
 	GetPublicDashboardPanelQueryRangeV2200,
 	GetPublicDashboardPanelQueryRangeV2Params,
 	GetPublicDashboardPanelQueryRangeV2PathParameters,
 	GetPublicDashboardPathParameters,
+	GetPublicDashboardWidgetQueryRange200,
+	GetPublicDashboardWidgetQueryRangePathParameters,
 	GetSystemDashboard200,
 	GetSystemDashboardPathParameters,
 	ListDashboardViews200,
@@ -470,6 +474,217 @@ export const useUpdatePublicDashboard = <
 > => {
 	return useMutation(getUpdatePublicDashboardMutationOptions(options));
 };
+/**
+ * This endpoint returns the sanitized dashboard data for public access
+ * @summary Get public dashboard data
+ */
+export const getPublicDashboardData = (
+	{ id }: GetPublicDashboardDataPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardData200>({
+		url: `/api/v1/public/dashboards/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardDataQueryKey = ({
+	id,
+}: GetPublicDashboardDataPathParameters) => {
+	return [`/api/v1/public/dashboards/${id}`] as const;
+};
+
+export const getGetPublicDashboardDataQueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardData>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetPublicDashboardDataQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardData>>
+	> = ({ signal }) => getPublicDashboardData({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: id !== null && id !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardData>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardDataQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardData>>
+>;
+export type GetPublicDashboardDataQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get public dashboard data
+ */
+
+export function useGetPublicDashboardData<
+	TData = Awaited<ReturnType<typeof getPublicDashboardData>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetPublicDashboardDataPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardData>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardDataQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get public dashboard data
+ */
+export const invalidateGetPublicDashboardData = async (
+	queryClient: QueryClient,
+	{ id }: GetPublicDashboardDataPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardDataQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint return query range results for a widget of public dashboard
+ * @summary Get query range result
+ */
+export const getPublicDashboardWidgetQueryRange = (
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetPublicDashboardWidgetQueryRange200>({
+		url: `/api/v1/public/dashboards/${id}/widgets/${idx}/query_range`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetPublicDashboardWidgetQueryRangeQueryKey = ({
+	id,
+	idx,
+}: GetPublicDashboardWidgetQueryRangePathParameters) => {
+	return [`/api/v1/public/dashboards/${id}/widgets/${idx}/query_range`] as const;
+};
+
+export const getGetPublicDashboardWidgetQueryRangeQueryOptions = <
+	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ??
+		getGetPublicDashboardWidgetQueryRangeQueryKey({ id, idx });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>
+	> = ({ signal }) => getPublicDashboardWidgetQueryRange({ id, idx }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: id !== null && id !== undefined && idx !== null && idx !== undefined,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetPublicDashboardWidgetQueryRangeQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>
+>;
+export type GetPublicDashboardWidgetQueryRangeQueryError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get query range result
+ */
+
+export function useGetPublicDashboardWidgetQueryRange<
+	TData = Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getPublicDashboardWidgetQueryRange>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetPublicDashboardWidgetQueryRangeQueryOptions(
+		{ id, idx },
+		options,
+	);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get query range result
+ */
+export const invalidateGetPublicDashboardWidgetQueryRange = async (
+	queryClient: QueryClient,
+	{ id, idx }: GetPublicDashboardWidgetQueryRangePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetPublicDashboardWidgetQueryRangeQueryKey({ id, idx }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * Returns every saved view in the calling user's org. Saved views are shared org-wide.
  * @summary List dashboard saved views

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

@@ -24,6 +24,8 @@ import type {
 	GetMetricAlertsParams,
 	GetMetricAttributes200,
 	GetMetricAttributesParams,
+	GetMetricDashboards200,
+	GetMetricDashboardsParams,
 	GetMetricDashboardsV2200,
 	GetMetricDashboardsV2Params,
 	GetMetricHighlights200,
@@ -1094,6 +1096,104 @@ export const invalidateGetMetricAttributes = async (
 	return queryClient;
 };
 
+/**
+ * This endpoint returns associated dashboards for a specified metric
+ * @summary Get metric dashboards
+ */
+export const getMetricDashboards = (
+	params: GetMetricDashboardsParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetMetricDashboards200>({
+		url: `/api/v2/metrics/dashboards`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getGetMetricDashboardsQueryKey = (
+	params?: GetMetricDashboardsParams,
+) => {
+	return [`/api/v2/metrics/dashboards`, ...(params ? [params] : [])] as const;
+};
+
+export const getGetMetricDashboardsQueryOptions = <
+	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricDashboardsParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricDashboards>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetMetricDashboardsQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getMetricDashboards>>
+	> = ({ signal }) => getMetricDashboards(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getMetricDashboards>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetMetricDashboardsQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getMetricDashboards>>
+>;
+export type GetMetricDashboardsQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get metric dashboards
+ */
+
+export function useGetMetricDashboards<
+	TData = Awaited<ReturnType<typeof getMetricDashboards>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params: GetMetricDashboardsParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getMetricDashboards>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetMetricDashboardsQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return withQueryKey(query, queryOptions.queryKey);
+}
+
+/**
+ * @summary Get metric dashboards
+ */
+export const invalidateGetMetricDashboards = async (
+	queryClient: QueryClient,
+	params: GetMetricDashboardsParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetMetricDashboardsQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint returns highlights like number of datapoints, totaltimeseries, active time series, last received time for a specified metric
  * @summary Get metric highlights

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

@@ -40,73 +40,7 @@ export interface AlertmanagertypesChannelDTO {
 export enum AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTOKind {
 	slack = 'slack',
 }
-export interface AlertmanagertypesChannelSlackConfirmationDTO {
-	/**
-	 * @type string
-	 */
-	dismissText?: string;
-	/**
-	 * @type string
-	 */
-	okText?: string;
-	/**
-	 * @type string
-	 */
-	text: string;
-	/**
-	 * @type string
-	 */
-	title?: string;
-}
-
-export interface AlertmanagertypesChannelSlackActionDTO {
-	confirm?: AlertmanagertypesChannelSlackConfirmationDTO;
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type string
-	 */
-	style?: string;
-	/**
-	 * @type string
-	 */
-	text: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-	/**
-	 * @type string
-	 */
-	value?: string;
-}
-
-export interface AlertmanagertypesChannelSlackFieldDTO {
-	/**
-	 * @type boolean,null
-	 */
-	short?: boolean | null;
-	/**
-	 * @type string
-	 */
-	title: string;
-	/**
-	 * @type string
-	 */
-	value: string;
-}
-
 export interface AlertmanagertypesChannelSlackConfigDTO {
-	/**
-	 * @type array
-	 */
-	actions?: AlertmanagertypesChannelSlackActionDTO[];
 	/**
 	 * @type string
 	 * @format password
@@ -116,26 +50,6 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 * @type string
 	 */
 	channel?: string;
-	/**
-	 * @type string
-	 */
-	color?: string;
-	/**
-	 * @type string
-	 */
-	fallback?: string;
-	/**
-	 * @type array
-	 */
-	fields?: AlertmanagertypesChannelSlackFieldDTO[];
-	/**
-	 * @type string
-	 */
-	footer?: string;
-	/**
-	 * @type string
-	 */
-	pretext?: string;
 	/**
 	 * @type boolean,null
 	 */
@@ -148,10 +62,6 @@ export interface AlertmanagertypesChannelSlackConfigDTO {
 	 * @type string
 	 */
 	title?: string;
-	/**
-	 * @type string
-	 */
-	titleLink?: string;
 }
 
 export interface AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelSlackConfigDTO {
@@ -596,13 +506,6 @@ export type AlertmanagertypesChannelConfigDTO =
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelJSMOpsConfigDTO
 	| AlertmanagertypesChannelConfigVariantGithubComSigNozSignozPkgTypesAlertmanagertypesChannelIncidentIOConfigDTO;
 
-export enum AlertmanagertypesChannelDefectDTO {
-	none = 'none',
-	missing_type = 'missing_type',
-	multiple_notifiers = 'multiple_notifiers',
-	unsupported_notifier = 'unsupported_notifier',
-	unrepresentable = 'unrepresentable',
-}
 export enum AlertmanagertypesChannelKindDTO {
 	slack = 'slack',
 	email = 'email',
@@ -624,63 +527,6 @@ export enum AlertmanagertypesChannelListSortDTO {
 	created_at = 'created_at',
 	name = 'name',
 }
-export enum AlertmanagertypesChannelRepairActionDTO {
-	none = 'none',
-	retype = 'retype',
-	split = 'split',
-	delete = 'delete',
-}
-export interface AlertmanagertypesListedNotificationChannelDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt: string;
-	/**
-	 * @type string
-	 */
-	displayName: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	kind: AlertmanagertypesChannelKindDTO;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt: string;
-}
-
-export interface AlertmanagertypesChannelRepairDTO {
-	action: AlertmanagertypesChannelRepairActionDTO;
-	/**
-	 * @type boolean
-	 */
-	applied: boolean;
-	/**
-	 * @type array
-	 */
-	blockers?: string[];
-	/**
-	 * @type array,null
-	 */
-	channels?: AlertmanagertypesListedNotificationChannelDTO[] | null;
-	defect: AlertmanagertypesChannelDefectDTO;
-	/**
-	 * @type string
-	 */
-	detail?: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface ModelLabelSetDTO {
 	[key: string]: string;
 }
@@ -1174,6 +1020,32 @@ export interface AlertmanagertypesJiraReceiverConfigDTO {
 	wont_fix_resolution?: string;
 }
 
+export interface AlertmanagertypesListedNotificationChannelDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt: string;
+	/**
+	 * @type string
+	 */
+	displayName: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	kind: AlertmanagertypesChannelKindDTO;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt: string;
+}
+
 export interface AlertmanagertypesListableNotificationChannelDTO {
 	/**
 	 * @type array
@@ -2577,13 +2449,6 @@ export interface AlertmanagertypesReceiverDTO {
 	wechat_configs?: ConfigWechatConfigDTO[];
 }
 
-export interface AlertmanagertypesRepairChannelParamsDTO {
-	/**
-	 * @type boolean
-	 */
-	apply?: boolean;
-}
-
 export interface AlertmanagertypesTestableNotificationChannelDTO {
 	config: AlertmanagertypesChannelConfigDTO;
 }
@@ -4144,52 +4009,6 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export enum DashboardtypesAreaFillModeDTO {
-	solid = 'solid',
-	gradient = 'gradient',
-}
-/**
- * @minimum 0
- * @maximum 1
- * @nullable
- */
-export type DashboardtypesFillOpacityDTO = number | null;
-
-export enum DashboardtypesLineInterpolationDTO {
-	linear = 'linear',
-	spline = 'spline',
-	step_after = 'step_after',
-	step_before = 'step_before',
-}
-export enum DashboardtypesLineStyleDTO {
-	solid = 'solid',
-	dashed = 'dashed',
-}
-export interface DashboardtypesSpanGapsDTO {
-	/**
-	 * @type string
-	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
-	 */
-	fillLessThan?: string;
-	/**
-	 * @type boolean
-	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
-	 */
-	fillOnlyBelow?: boolean;
-}
-
-export interface DashboardtypesAreaChartAppearanceDTO {
-	fillMode?: DashboardtypesAreaFillModeDTO;
-	fillOpacity?: DashboardtypesFillOpacityDTO | null;
-	lineInterpolation?: DashboardtypesLineInterpolationDTO;
-	lineStyle?: DashboardtypesLineStyleDTO;
-	/**
-	 * @type boolean
-	 */
-	showPoints?: boolean;
-	spanGaps?: DashboardtypesSpanGapsDTO;
-}
-
 export interface DashboardtypesAxesDTO {
 	/**
 	 * @type boolean
@@ -4267,11 +4086,6 @@ export interface DashboardtypesThresholdWithLabelDTO {
 	value: number;
 }
 
-export enum DashboardtypesStackModeDTO {
-	none = 'none',
-	normal = 'normal',
-	percent = 'percent',
-}
 export enum DashboardtypesTimePreferenceDTO {
 	global_time = 'global_time',
 	last_5_min = 'last_5_min',
@@ -4284,27 +4098,6 @@ export enum DashboardtypesTimePreferenceDTO {
 	last_1_week = 'last_1_week',
 	last_1_month = 'last_1_month',
 }
-export interface DashboardtypesAreaChartVisualizationDTO {
-	/**
-	 * @type boolean
-	 */
-	fillSpans?: boolean;
-	stack?: DashboardtypesStackModeDTO;
-	timePreference?: DashboardtypesTimePreferenceDTO;
-}
-
-export interface DashboardtypesAreaChartPanelSpecDTO {
-	axes?: DashboardtypesAxesDTO;
-	chartAppearance?: DashboardtypesAreaChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	/**
-	 * @type array,null
-	 */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-	visualization?: DashboardtypesAreaChartVisualizationDTO;
-}
-
 export interface DashboardtypesBarChartVisualizationDTO {
 	/**
 	 * @type boolean
@@ -4886,6 +4679,50 @@ export interface DashboardtypesCustomVariableSpecDTO {
 	customValue: string;
 }
 
+export interface DashboardtypesStorableDashboardDataDTO {
+	[key: string]: unknown;
+}
+
+export enum DashboardtypesSourceDTO {
+	user = 'user',
+	system = 'system',
+	integration = 'integration',
+}
+export interface DashboardtypesDashboardDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	data?: DashboardtypesStorableDashboardDataDTO;
+	/**
+	 * @type string
+	 */
+	id?: string;
+	/**
+	 * @type boolean
+	 */
+	locked?: boolean;
+	/**
+	 * @type string
+	 */
+	org_id?: string;
+	source?: DashboardtypesSourceDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
 export interface DashboardtypesDashboardPanelRefDTO {
 	/**
 	 * @type string
@@ -4958,6 +4795,29 @@ export enum DashboardtypesFillModeDTO {
 	gradient = 'gradient',
 	none = 'none',
 }
+export enum DashboardtypesLineInterpolationDTO {
+	linear = 'linear',
+	spline = 'spline',
+	step_after = 'step_after',
+	step_before = 'step_before',
+}
+export enum DashboardtypesLineStyleDTO {
+	solid = 'solid',
+	dashed = 'dashed',
+}
+export interface DashboardtypesSpanGapsDTO {
+	/**
+	 * @type string
+	 * @description The maximum gap size to connect when fillOnlyBelow is true. Gaps larger than this duration are left disconnected.
+	 */
+	fillLessThan?: string;
+	/**
+	 * @type boolean
+	 * @description Controls whether lines connect across null values. When false (default), all gaps are connected. When true, only gaps smaller than fillLessThan are connected.
+	 */
+	fillOnlyBelow?: boolean;
+}
+
 export interface DashboardtypesTimeSeriesChartAppearanceDTO {
 	fillMode?: DashboardtypesFillModeDTO;
 	lineInterpolation?: DashboardtypesLineInterpolationDTO;
@@ -5010,18 +4870,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesBarChartPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind {
-	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
-}
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO {
-	/**
-	 * @enum signoz/AreaChartPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTOKind;
-	spec: DashboardtypesAreaChartPanelSpecDTO;
-}
-
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTOKind {
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 }
@@ -5227,7 +5075,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
@@ -5824,11 +5671,6 @@ export interface DashboardtypesDashboardViewDTO {
 	updatedAt?: string;
 }
 
-export enum DashboardtypesSourceDTO {
-	user = 'user',
-	system = 'system',
-	integration = 'integration',
-}
 export interface TagtypesGettableTagDTO {
 	/**
 	 * @type string
@@ -5906,6 +5748,11 @@ export interface DashboardtypesGettablePublicDasbhboardDTO {
 	timeRangeEnabled?: boolean;
 }
 
+export interface DashboardtypesGettablePublicDashboardDataDTO {
+	dashboard?: DashboardtypesDashboardDTO;
+	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
+}
+
 export interface DashboardtypesGettablePublicDashboardDataV2DTO {
 	dashboard?: DashboardtypesGettableDashboardV2DTO;
 	publicDashboard?: DashboardtypesGettablePublicDasbhboardDTO;
@@ -6152,7 +5999,6 @@ export interface DashboardtypesListableDashboardViewDTO {
 export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 	'signoz/BarChartPanel' = 'signoz/BarChartPanel',
-	'signoz/AreaChartPanel' = 'signoz/AreaChartPanel',
 	'signoz/NumberPanel' = 'signoz/NumberPanel',
 	'signoz/PieChartPanel' = 'signoz/PieChartPanel',
 	'signoz/TablePanel' = 'signoz/TablePanel',
@@ -8978,6 +8824,25 @@ export interface MetricsexplorertypesMetricAttributesResponseDTO {
 	totalKeys: number;
 }
 
+export interface MetricsexplorertypesMetricDashboardDTO {
+	/**
+	 * @type string
+	 */
+	dashboardId: string;
+	/**
+	 * @type string
+	 */
+	dashboardName: string;
+	/**
+	 * @type string
+	 */
+	widgetId: string;
+	/**
+	 * @type string
+	 */
+	widgetName: string;
+}
+
 export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
 	/**
 	 * @type array,null
@@ -8985,6 +8850,13 @@ export interface MetricsexplorertypesMetricDashboardPanelsResponseDTO {
 	dashboards: DashboardtypesDashboardPanelRefDTO[] | null;
 }
 
+export interface MetricsexplorertypesMetricDashboardsResponseDTO {
+	/**
+	 * @type array,null
+	 */
+	dashboards: MetricsexplorertypesMetricDashboardDTO[] | null;
+}
+
 export interface MetricsexplorertypesMetricHighlightsResponseDTO {
 	/**
 	 * @type integer
@@ -10810,22 +10682,6 @@ export interface SpantypesGettableFlamegraphTraceDTO {
 	startTimestampMillis: number;
 }
 
-export enum SpantypesSpanMapperOriginDTO {
-	user = 'user',
-	system = 'system',
-}
-export interface SpantypesSpanMapperGroupConditionKeyDTO {
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	origin?: SpantypesSpanMapperOriginDTO;
-	/**
-	 * @type string
-	 */
-	value: string;
-}
-
 /**
  * @nullable
  */
@@ -10833,11 +10689,11 @@ export type SpantypesSpanMapperGroupConditionDTO = {
 	/**
 	 * @type array,null
 	 */
-	attributes: SpantypesSpanMapperGroupConditionKeyDTO[] | null;
+	attributes: string[] | null;
 	/**
 	 * @type array,null
 	 */
-	resource: SpantypesSpanMapperGroupConditionKeyDTO[] | null;
+	resource: string[] | null;
 } | null;
 
 export interface SpantypesSpanMapperGroupDTO {
@@ -10867,7 +10723,6 @@ export interface SpantypesSpanMapperGroupDTO {
 	 * @type string
 	 */
 	orgId: string;
-	origin: SpantypesSpanMapperOriginDTO;
 	/**
 	 * @type string
 	 * @format date-time
@@ -10877,10 +10732,6 @@ export interface SpantypesSpanMapperGroupDTO {
 	 * @type string
 	 */
 	updatedBy?: string;
-	/**
-	 * @type integer
-	 */
-	version: number;
 }
 
 export interface SpantypesGettableSpanMapperGroupsDTO {
@@ -10938,16 +10789,11 @@ export enum SpantypesSpanMapperOperationDTO {
 }
 export interface SpantypesSpanMapperSourceDTO {
 	context: SpantypesFieldContextDTO;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
 	/**
 	 * @type string
 	 */
 	key: string;
 	operation: SpantypesSpanMapperOperationDTO;
-	origin?: SpantypesSpanMapperOriginDTO;
 	/**
 	 * @type integer
 	 */
@@ -10989,7 +10835,6 @@ export interface SpantypesSpanMapperDTO {
 	 * @type string
 	 */
 	name: string;
-	origin: SpantypesSpanMapperOriginDTO;
 	/**
 	 * @type string
 	 * @format date-time
@@ -12418,6 +12263,29 @@ export type GetOrgPreference200 = {
 export type UpdateOrgPreferencePathParameters = {
 	name: string;
 };
+export type GetPublicDashboardDataPathParameters = {
+	id: string;
+};
+export type GetPublicDashboardData200 = {
+	data: DashboardtypesGettablePublicDashboardDataDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type GetPublicDashboardWidgetQueryRangePathParameters = {
+	id: string;
+	idx: string;
+};
+export type GetPublicDashboardWidgetQueryRange200 = {
+	data: Querybuildertypesv5QueryRangeResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRoles200 = {
 	/**
 	 * @type array
@@ -13375,6 +13243,22 @@ export type GetMetricAttributes200 = {
 	status: string;
 };
 
+export type GetMetricDashboardsParams = {
+	/**
+	 * @type string
+	 * @description The name of the metric. May contain slashes (e.g. cloud-provider metrics like run.googleapis.com/request_latencies).
+	 */
+	metricName: string;
+};
+
+export type GetMetricDashboards200 = {
+	data: MetricsexplorertypesMetricDashboardsResponseDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type GetMetricHighlightsParams = {
 	/**
 	 * @type string
@@ -13510,25 +13394,6 @@ export type UpdateNotificationChannel200 = {
 	status: string;
 };
 
-export type RepairNotificationChannelPathParameters = {
-	id: string;
-};
-export type RepairNotificationChannelParams = {
-	/**
-	 * @type boolean
-	 * @description undefined
-	 */
-	apply?: boolean;
-};
-
-export type RepairNotificationChannel200 = {
-	data: AlertmanagertypesChannelRepairDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetMyOrganization200 = {
 	data: TypesOrganizationDTO;
 	/**

frontend/src/api/logs/AddToSelectedField.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/logs/addToSelectedFields';
+
+const addToSelectedFields = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const data = await axios.post(`/logs/fields`, props);
+		return {
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: data.data,
+		};
+	} catch (error) {
+		return Promise.reject(ErrorResponseHandler(error as AxiosError));
+	}
+};
+
+export default addToSelectedFields;

frontend/src/api/logs/GetLogs.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/logs/getLogs';
+
+const GetLogs = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const data = await axios.get(`/logs`, {
+			params: props,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: data.data.results,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default GetLogs;

frontend/src/api/logs/GetLogsAggregate.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/logs/getLogsAggregate';
+
+const GetLogsAggregate = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const data = await axios.get(`/logs/aggregate`, {
+			params: props,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: data.data.items,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default GetLogsAggregate;

frontend/src/api/logs/GetSearchFields.ts

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

frontend/src/api/logs/RemoveFromSelectedField.ts

@@ -0,0 +1,23 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/logs/addToSelectedFields';
+
+const removeSelectedField = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const data = await axios.post(`/logs/fields`, props);
+		return {
+			statusCode: 200,
+			error: null,
+			message: '',
+			payload: data.data,
+		};
+	} catch (error) {
+		return Promise.reject(ErrorResponseHandler(error as AxiosError));
+	}
+};
+
+export default removeSelectedField;

frontend/src/api/logs/livetail.ts

@@ -0,0 +1,22 @@
+import apiV1 from 'api/apiV1';
+import getLocalStorageKey from 'api/browser/localstorage/get';
+import { ENVIRONMENT } from 'constants/env';
+import { LOCALSTORAGE } from 'constants/localStorage';
+import { EventSourcePolyfill } from 'event-source-polyfill';
+import { withBasePath } from 'utils/basePath';
+
+// 10 min in ms
+const TIMEOUT_IN_MS = 10 * 60 * 1000;
+
+export const LiveTail = (queryParams: string): EventSourcePolyfill =>
+	new EventSourcePolyfill(
+		ENVIRONMENT.baseURL
+			? `${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`
+			: withBasePath(`${apiV1}logs/tail?${queryParams}`),
+		{
+			headers: {
+				Authorization: `Bearer ${getLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN)}`,
+			},
+			heartbeatTimeout: TIMEOUT_IN_MS,
+		},
+	);

frontend/src/api/querySuggestions/types.ts

@@ -1,15 +1,21 @@
 import type {
 	GetAIObservabilityFieldsKeys200,
 	GetAIObservabilityFieldsValues200,
+	GetAIObservabilityFieldsKeysParams,
+	GetAIObservabilityFieldsValuesParams,
 	GetFieldsKeys200,
 	GetFieldsKeysParams,
 	GetFieldsValues200,
 	GetFieldsValuesParams,
 } from 'api/generated/services/sigNoz.schemas';
 
-export type FieldKeysConfig = GetFieldsKeysParams;
+export type FieldKeysConfig =
+	| GetFieldsKeysParams
+	| GetAIObservabilityFieldsKeysParams;
 
-export type FieldValuesConfig = GetFieldsValuesParams;
+export type FieldValuesConfig =
+	| GetFieldsValuesParams
+	| GetAIObservabilityFieldsValuesParams;
 
 export type FieldKeysConfigProp = Omit<
 	FieldKeysConfig,

frontend/src/api/trace/getFilters.ts

@@ -0,0 +1,49 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import omitBy from 'lodash-es/omitBy';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getFilters';
+
+const getFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const duration =
+			omitBy(props.other, (_, key) => !key.startsWith('duration')) || [];
+
+		const nonDuration = omitBy(props.other, (_, key) =>
+			key.startsWith('duration'),
+		);
+
+		const exclude: string[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const response = await axios.post<PayloadProps>(`/getSpanFilters`, {
+			start: props.start,
+			end: props.end,
+			getFilters: props.getFilters,
+			...nonDuration,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
+			spanKind: props.spanKind,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getFilters;

frontend/src/api/trace/getSpans.ts

@@ -0,0 +1,62 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import omitBy from 'lodash-es/omitBy';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getSpans';
+
+const getSpans = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const updatedSelectedTags = props.selectedTags.map((e) => ({
+			Key: `${e.Key}.(string)`,
+			Operator: e.Operator,
+			StringValues: e.StringValues,
+			NumberValues: e.NumberValues,
+			BoolValues: e.BoolValues,
+		}));
+
+		const exclude: string[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const other = Object.fromEntries(props.selectedFilter);
+
+		const duration = omitBy(other, (_, key) => !key.startsWith('duration')) || [];
+
+		const nonDuration = omitBy(other, (_, key) => key.startsWith('duration'));
+
+		const response = await axios.post<PayloadProps>(
+			`/getFilteredSpans/aggregates`,
+			{
+				start: String(props.start),
+				end: String(props.end),
+				function: props.function,
+				groupBy: props.groupBy === 'none' ? '' : props.groupBy,
+				step: props.step,
+				tags: updatedSelectedTags,
+				...nonDuration,
+				maxDuration: String((duration.duration || [])[0] || ''),
+				minDuration: String((duration.duration || [])[1] || ''),
+				exclude,
+				spanKind: props.spanKind,
+			},
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getSpans;

frontend/src/api/trace/getSpansAggregate.ts

@@ -0,0 +1,65 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import omitBy from 'lodash-es/omitBy';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getSpanAggregate';
+import { TraceFilterEnum } from 'types/reducer/trace';
+
+const getSpanAggregate = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const preProps = {
+			start: String(props.start),
+			end: String(props.end),
+			limit: props.limit,
+			offset: props.offset,
+			order: props.order,
+			orderParam: props.orderParam,
+		};
+
+		const exclude: TraceFilterEnum[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const updatedSelectedTags = props.selectedTags.map((e) => ({
+			Key: `${e.Key}.(string)`,
+			Operator: e.Operator,
+			StringValues: e.StringValues,
+			NumberValues: e.NumberValues,
+			BoolValues: e.BoolValues,
+		}));
+
+		const other = Object.fromEntries(props.selectedFilter);
+
+		const duration = omitBy(other, (_, key) => !key.startsWith('duration')) || [];
+
+		const nonDuration = omitBy(other, (_, key) => key.startsWith('duration'));
+
+		const response = await axios.post<PayloadProps>(`/getFilteredSpans`, {
+			...preProps,
+			tags: updatedSelectedTags,
+			...nonDuration,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
+			spanKind: props.spanKind,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getSpanAggregate;

frontend/src/api/trace/getTagFilter.ts

@@ -0,0 +1,49 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { omitBy } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getTagFilters';
+import { TraceFilterEnum } from 'types/reducer/trace';
+
+const getTagFilters = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const duration =
+			omitBy(props.other, (_, key) => !key.startsWith('duration')) || [];
+
+		const exclude: TraceFilterEnum[] = [];
+
+		props.isFilterExclude.forEach((value, key) => {
+			if (value) {
+				exclude.push(key);
+			}
+		});
+
+		const nonDuration = omitBy(props.other, (_, key) =>
+			key.startsWith('duration'),
+		);
+
+		const response = await axios.post<PayloadProps>(`/getTagFilters`, {
+			start: String(props.start),
+			end: String(props.end),
+			...nonDuration,
+			maxDuration: String((duration.duration || [])[0] || ''),
+			minDuration: String((duration.duration || [])[1] || ''),
+			exclude,
+			spanKind: props.spanKind,
+		});
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTagFilters;

frontend/src/api/trace/getTagValue.ts

@@ -0,0 +1,31 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/trace/getTagValue';
+
+const getTagValue = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.post<PayloadProps>(`/getTagValues`, {
+			start: props.start.toString(),
+			end: props.end.toString(),
+			tagKey: {
+				Key: props.tagKey.Key,
+				Type: props.tagKey.Type,
+			},
+			spanKind: props.spanKind,
+		});
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload: response.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default getTagValue;

frontend/src/components/AddCreditCardModal/AddCreditCardModal.tsx

@@ -1,103 +0,0 @@
-import { useMutation } from 'react-query';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { createSubscription } from 'api/generated/services/subscriptions';
-import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
-import { useNotifications } from 'hooks/useNotifications';
-import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
-import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
-import { CreditCard, X } from '@signozhq/icons';
-import APIError from 'types/api/error';
-import { getBaseUrl } from 'utils/basePath';
-
-interface AddCreditCardModalProps {
-	open: boolean;
-	onClose: () => void;
-	onAddCreditCard?: () => void;
-}
-
-/**
- * Shown to trial users who have not added a card, in place of chat support.
- * Submitting creates the subscription and opens the returned billing URL.
- */
-function AddCreditCardModal({
-	open,
-	onClose,
-	onAddCreditCard,
-}: AddCreditCardModalProps): JSX.Element {
-	const { notifications } = useNotifications();
-
-	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
-		if (data?.data?.redirectURL) {
-			const newTab = document.createElement('a');
-			newTab.href = data.data.redirectURL;
-			newTab.target = '_blank';
-			newTab.rel = 'noopener noreferrer';
-			newTab.click();
-		}
-	};
-
-	const handleBillingOnError = (error: APIError): void => {
-		notifications.error({
-			message: error.getErrorCode(),
-			description: error.getErrorMessage(),
-		});
-	};
-
-	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
-		createSubscription,
-		{ onSuccess: handleBillingOnSuccess, onError: handleBillingOnError },
-	);
-
-	const handleAddCreditCard = (): void => {
-		onAddCreditCard?.();
-		updateCreditCard({ url: getBaseUrl() });
-	};
-
-	return (
-		<Modal
-			className="add-credit-card-modal"
-			title={<span className="title">Add Credit Card for Chat Support</span>}
-			open={open}
-			closable
-			onCancel={onClose}
-			destroyOnClose
-			footer={[
-				<Button
-					key="cancel"
-					onClick={onClose}
-					className="cancel-btn"
-					icon={<X size={16} />}
-				>
-					Cancel
-				</Button>,
-				<AuthZTooltip
-					key="submit"
-					checks={[SubscriptionCreatePermission]}
-					withPortal={false}
-				>
-					<Button
-						type="primary"
-						icon={<CreditCard size={16} />}
-						size="middle"
-						loading={isLoadingBilling}
-						disabled={isLoadingBilling}
-						onClick={handleAddCreditCard}
-						className="add-credit-card-btn"
-					>
-						Add Credit Card
-					</Button>
-				</AuthZTooltip>,
-			]}
-		>
-			<Typography.Text className="add-credit-card-text">
-				You&apos;re currently on <span className="highlight-text">Trial plan</span>.
-				Add a credit card to access SigNoz chat support to your workspace.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-AddCreditCardModal.defaultProps = { onAddCreditCard: undefined };
-
-export default AddCreditCardModal;

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,15 +1,63 @@
 import { useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
-import { MessageSquareText } from '@signozhq/icons';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
+	const { notifications } = useNotifications();
+
 	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
 		useState(false);
+
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
 	const { pathname } = useLocation();
 
+	const handleAddCreditCard = (): void => {
+		logEvent('Add Credit card modal: Clicked', {
+			source: `chat support icon`,
+			page: pathname,
+		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
+	};
+
 	return (
 		<>
 			<div className="chat-support-gateway">
@@ -28,16 +76,47 @@ export default function ChatSupportGateway(): JSX.Element {
 				</Button>
 			</div>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={(): void => {
-					logEvent('Add Credit card modal: Clicked', {
-						source: `chat support icon`,
-						page: pathname,
-					});
-				}}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</>
 	);
 }

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,14 +1,22 @@
 import { useMemo, useState } from 'react';
+import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Tooltip } from 'antd';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
+import { Button, Modal, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
+import { createSubscription } from 'api/generated/services/subscriptions';
+import type { CreateSubscription201 } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useNotifications } from 'hooks/useNotifications';
+import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
+import { SubscriptionCreatePermission } from 'lib/authz/hooks/useAuthZ/permissions/subscription.permissions';
 import { defaultTo } from 'lodash-es';
-import { CircleHelp } from '@signozhq/icons';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
+import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -33,6 +41,7 @@ function LaunchChatSupport({
 	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
+	const { notifications } = useNotifications();
 	const {
 		trialInfo,
 		featureFlags,
@@ -110,12 +119,43 @@ function LaunchChatSupport({
 		}
 	};
 
+	const handleBillingOnSuccess = (data: CreateSubscription201): void => {
+		if (data?.data?.redirectURL) {
+			const newTab = document.createElement('a');
+			newTab.href = data.data.redirectURL;
+			newTab.target = '_blank';
+			newTab.rel = 'noopener noreferrer';
+			newTab.click();
+		}
+	};
+
+	const handleBillingOnError = (error: APIError): void => {
+		notifications.error({
+			message: error.getErrorCode(),
+			description: error.getErrorMessage(),
+		});
+	};
+
+	const { mutate: updateCreditCard, isLoading: isLoadingBilling } = useMutation(
+		createSubscription,
+		{
+			onSuccess: (data) => {
+				handleBillingOnSuccess(data);
+			},
+			onError: handleBillingOnError,
+		},
+	);
+
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
 			source: `facing issues button`,
 			page: pathname,
 			...attributes,
 		});
+
+		updateCreditCard({
+			url: getBaseUrl(),
+		});
 	};
 
 	return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
@@ -135,11 +175,47 @@ function LaunchChatSupport({
 				</Button>
 			</Tooltip>
 
-			<AddCreditCardModal
+			{/* Add Credit Card Modal */}
+			<Modal
+				className="add-credit-card-modal"
+				title={<span className="title">Add Credit Card for Chat Support</span>}
 				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-				onAddCreditCard={handleAddCreditCard}
-			/>
+				closable
+				onCancel={(): void => setIsAddCreditCardModalOpen(false)}
+				destroyOnClose
+				footer={[
+					<Button
+						key="cancel"
+						onClick={(): void => setIsAddCreditCardModalOpen(false)}
+						className="cancel-btn"
+						icon={<X size={16} />}
+					>
+						Cancel
+					</Button>,
+					<AuthZTooltip
+						key="submit"
+						checks={[SubscriptionCreatePermission]}
+						withPortal={false}
+					>
+						<Button
+							type="primary"
+							icon={<CreditCard size={16} />}
+							size="middle"
+							loading={isLoadingBilling}
+							disabled={isLoadingBilling}
+							onClick={handleAddCreditCard}
+							className="add-credit-card-btn"
+						>
+							Add Credit Card
+						</Button>
+					</AuthZTooltip>,
+				]}
+			>
+				<Typography.Text className="add-credit-card-text">
+					You&apos;re currently on <span className="highlight-text">Trial plan</span>
+					. Add a credit card to access SigNoz chat support to your workspace.
+				</Typography.Text>
+			</Modal>
 		</div>
 	) : null;
 }

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+import { CategoryHeadingText } from './styles';
+
+interface ICategoryHeadingProps {
+	children: ReactNode;
+}
+function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
+	return <CategoryHeadingText color="muted">{children}</CategoryHeadingText>;
+}
+
+export default CategoryHeading;

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

@@ -0,0 +1,6 @@
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+export const CategoryHeadingText = styled(Typography.Text)`
+	font-size: 0.8rem;
+`;

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

@@ -0,0 +1,33 @@
+import { CSSProperties } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { TableProps } from 'antd';
+
+export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
+	return {
+		paddingTop: 4,
+		paddingBottom: 6,
+		paddingRight: 8,
+		paddingLeft: 8,
+		color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400,
+		fontSize: '14px',
+		fontStyle: 'normal',
+		fontWeight: 400,
+		lineHeight: '18px',
+		letterSpacing: '-0.07px',
+		marginBottom: '0px',
+		minWidth: '10rem',
+		width: 'auto',
+	};
+}
+
+export const defaultTableStyle: CSSProperties = {
+	minWidth: '40rem',
+};
+
+export const defaultListViewPanelStyle: CSSProperties = {
+	maxWidth: '40rem',
+};
+
+export const tableScroll: TableProps<Record<string, unknown>>['scroll'] = {
+	x: true,
+};

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

@@ -0,0 +1,24 @@
+import { Table } from 'antd';
+
+// config
+import { tableScroll } from './config';
+import { LogsTableViewProps } from './types';
+import { useTableView } from './useTableView';
+
+function LogsTableView(props: LogsTableViewProps): JSX.Element {
+	const { dataSource, columns } = useTableView(props);
+
+	return (
+		<Table
+			size="small"
+			columns={columns}
+			dataSource={dataSource}
+			pagination={false}
+			rowKey="id"
+			bordered
+			scroll={tableScroll}
+		/>
+	);
+}
+
+export default LogsTableView;

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

@@ -0,0 +1,32 @@
+import { Color } from '@signozhq/design-tokens';
+import { FontSize } from 'container/OptionsMenu/types';
+import styled from 'styled-components';
+
+interface TableBodyContentProps {
+	linesPerRow: number;
+	fontSize: FontSize;
+	isDarkMode?: boolean;
+}
+
+export const TableBodyContent = styled.div<TableBodyContentProps>`
+	margin-bottom: 0;
+	color: ${(props): string =>
+		props.isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400};
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: ${(props): number => props.linesPerRow};
+	line-clamp: ${(props): number => props.linesPerRow};
+	-webkit-box-orient: vertical;
+	${({ fontSize }): string =>
+		fontSize === FontSize.SMALL
+			? `font-size:11px; line-height:16px;`
+			: fontSize === FontSize.MEDIUM
+				? `font-size:13px; line-height:20px;`
+				: `font-size:14px; line-height:24px;`}
+`;

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

@@ -1,5 +1,40 @@
-import { TableColumnType as ColumnType } from 'antd';
+import {
+	TableColumnsType as ColumnsType,
+	TableColumnType as ColumnType,
+} from 'antd';
+import { FontSize } from 'container/OptionsMenu/types';
+import { IField } from 'types/api/logs/fields';
+import { ILog } from 'types/api/logs/log';
 
 export type ColumnTypeRender<T = unknown> = ReturnType<
 	NonNullable<ColumnType<T>['render']>
 >;
+
+export type LogsTableViewProps = {
+	logs: ILog[];
+	fields: IField[];
+	linesPerRow: number;
+	fontSize: FontSize;
+	onClickExpand?: (log: ILog) => void;
+};
+
+export type UseTableViewResult = {
+	columns: ColumnsType<Record<string, unknown>>;
+	dataSource: Record<string, string>[];
+};
+
+export type UseTableViewProps = {
+	appendTo?: 'center' | 'end';
+	onOpenLogsContext?: (log: ILog) => void;
+	onClickExpand?: (log: ILog) => void;
+	activeLog?: ILog | null;
+	activeLogIndex?: number;
+	activeContextLog?: ILog | null;
+	isListViewPanel?: boolean;
+} & LogsTableViewProps;
+
+export type ActionsColumnProps = {
+	logId: string;
+	logs: ILog[];
+	onOpenLogsContext?: (log: ILog) => void;
+};

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

@@ -0,0 +1,59 @@
+.text {
+	color: var(--l2-foreground);
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 400;
+	line-height: 18px; /* 128.571% */
+	letter-spacing: -0.07px;
+
+	&.small {
+		font-size: 11px;
+		line-height: 16px;
+	}
+
+	&.medium {
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	&.large {
+		font-size: 14px;
+		line-height: 24px;
+	}
+}
+
+.state-indicator {
+	width: 15px;
+	.log-state-indicator {
+		padding: 0px;
+	}
+}
+
+.table-timestamp {
+	display: flex;
+	align-items: center;
+
+	.timestamp-text {
+		color: var(--l1-foreground);
+		margin: 0 !important;
+	}
+}
+
+.paragraph {
+	margin: 0;
+	padding: 0px !important;
+	&.small {
+		font-size: 11px !important;
+		line-height: 16px !important;
+	}
+
+	&.medium {
+		font-size: 13px !important;
+		line-height: 20px !important;
+	}
+
+	&.large {
+		font-size: 14px !important;
+		line-height: 24px !important;
+	}
+}

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

@@ -0,0 +1,180 @@
+import { useMemo } from 'react';
+import { TableColumnsType as ColumnsType } from 'antd';
+import cx from 'classnames';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { useTimezone } from 'providers/Timezone';
+
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+import {
+	defaultListViewPanelStyle,
+	defaultTableStyle,
+	getDefaultCellStyle,
+} from './config';
+import { TableBodyContent } from './styles';
+import {
+	ColumnTypeRender,
+	UseTableViewProps,
+	UseTableViewResult,
+} from './types';
+
+import './useTableView.styles.scss';
+
+export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
+	const {
+		logs,
+		fields,
+		linesPerRow,
+		fontSize,
+		appendTo = 'center',
+		isListViewPanel,
+	} = props;
+
+	const isDarkMode = useIsDarkMode();
+
+	const flattenLogData = useMemo(
+		() => logs.map((log) => FlatLogData(log)),
+		[logs],
+	);
+
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const bodyColumnStyle = useMemo(
+		() => ({
+			...defaultTableStyle,
+			...(fields.length > 2 ? { width: 'auto' } : {}),
+		}),
+		[fields.length],
+	);
+
+	const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
+		const fieldColumns: ColumnsType<Record<string, unknown>> = fields
+			.filter((e) => !['id', 'body', 'timestamp'].includes(e.name))
+			.map(({ name }) => ({
+				title: name,
+				dataIndex: name,
+				accessorKey: name,
+				id: name.toLowerCase().replace(/\./g, '_'),
+				key: name,
+				render: (field): ColumnTypeRender<Record<string, unknown>> => ({
+					props: {
+						style: {
+							...(isListViewPanel
+								? defaultListViewPanelStyle
+								: getDefaultCellStyle(isDarkMode)),
+							display: '-webkit-box',
+							WebkitLineClamp: linesPerRow,
+							WebkitBoxOrient: 'vertical',
+							overflow: 'hidden',
+							wordBreak: 'break-all',
+						},
+					},
+					children: <p className={cx('paragraph', fontSize)}>{field}</p>,
+				}),
+			}));
+
+		if (isListViewPanel) {
+			return [...fieldColumns];
+		}
+
+		return [
+			{
+				// We do not need any title and data index for the log state indicator
+				title: '',
+				dataIndex: '',
+				key: 'state-indicator',
+				accessorKey: 'state-indicator',
+				id: 'state-indicator',
+				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
+					children: (
+						<div className={cx('state-indicator', fontSize)}>
+							<LogStateIndicator
+								fontSize={fontSize}
+								severityText={item.severity_text as string}
+								severityNumber={item.severity_number as number}
+							/>
+						</div>
+					),
+				}),
+			},
+			...(fields.some((field) => field.name === 'timestamp')
+				? [
+						{
+							title: 'timestamp',
+							dataIndex: 'timestamp',
+							key: 'timestamp',
+							accessorKey: 'timestamp',
+							id: 'timestamp',
+							// https://github.com/ant-design/ant-design/discussions/36886
+							render: (
+								field: string | number,
+							): ColumnTypeRender<Record<string, unknown>> => {
+								const date =
+									typeof field === 'string'
+										? formatTimezoneAdjustedTimestamp(
+												field,
+												DATE_TIME_FORMATS.ISO_DATETIME_MS,
+											)
+										: formatTimezoneAdjustedTimestamp(
+												field / 1e6,
+												DATE_TIME_FORMATS.ISO_DATETIME_MS,
+											);
+								return {
+									children: (
+										<div className="table-timestamp">
+											<p className={cx('timestamp-text text', fontSize)}>{date}</p>
+										</div>
+									),
+								};
+							},
+						},
+					]
+				: []),
+			...(appendTo === 'center' ? fieldColumns : []),
+			...(fields.some((field) => field.name === 'body')
+				? [
+						{
+							title: 'body',
+							dataIndex: 'body',
+							key: 'body',
+							accessorKey: 'body',
+							id: 'body',
+							render: (
+								field: string | number,
+							): ColumnTypeRender<Record<string, unknown>> => ({
+								props: {
+									style: bodyColumnStyle,
+								},
+								children: (
+									<TableBodyContent
+										dangerouslySetInnerHTML={{
+											__html: getSanitizedLogBody(field as string, {
+												shouldEscapeHtml: true,
+											}),
+										}}
+										fontSize={fontSize}
+										linesPerRow={linesPerRow}
+										isDarkMode={isDarkMode}
+									/>
+								),
+							}),
+						},
+					]
+				: []),
+			...(appendTo === 'end' ? fieldColumns : []),
+		];
+	}, [
+		fields,
+		isListViewPanel,
+		appendTo,
+		isDarkMode,
+		linesPerRow,
+		fontSize,
+		formatTimezoneAdjustedTimestamp,
+		bodyColumnStyle,
+	]);
+
+	return { columns, dataSource: flattenLogData };
+};

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { Button, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
-import { LogViewMode } from 'container/OptionsMenu/types';
+import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import {
 	Check,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -15,7 +15,7 @@ import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import CheckboxFilterHeader from './CheckboxFilterHeader';
 import CheckboxValueRow from './CheckboxValueRow';
 import LogsQuickFilterEmptyState from './LogsQuickFilterEmptyState';
-import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
+import useActiveQueryIndex from './useActiveQueryIndex';
 import useCheckboxDisclosure from './useCheckboxDisclosure';
 import useCheckboxFilterActions from './useCheckboxFilterActions';
 import useCheckboxFilterState from './useCheckboxFilterState';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/useActiveQueryIndex.ts

@@ -15,21 +15,13 @@ function useActiveQueryIndex(source: QuickFiltersSource): number {
 	const isListView = panelType === PANEL_TYPES.LIST;
 
 	return useMemo(() => {
-		// AI observability builds a single query in the row-level views, so its
-		// filters always drive the first one there.
-		if (source === QuickFiltersSource.AI_OBSERVABILITY) {
-			return isListView || panelType === PANEL_TYPES.TRACE
-				? 0
-				: lastUsedQuery || 0;
-		}
-
 		if (isListView) {
 			return source === QuickFiltersSource.TRACES_EXPLORER
 				? lastUsedQuery || 0
 				: 0;
 		}
 		return lastUsedQuery || 0;
-	}, [isListView, panelType, source, lastUsedQuery]);
+	}, [isListView, source, lastUsedQuery]);
 }
 
 export default useActiveQueryIndex;

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.testUtils.tsx

@@ -56,57 +56,6 @@ export function mockFieldsValuesAPI(response: {
 	);
 }
 
-/**
- * Records every request the AI observability values endpoint receives, so a test
- * can assert both the routing and the query params it was called with.
- */
-export function mockAIObservabilityFieldsValuesAPI(response: {
-	relatedValues?: (string | null)[];
-	stringValues?: (string | null)[];
-	numberValues?: (number | null)[];
-}): { requests: URLSearchParams[] } {
-	const requests: URLSearchParams[] = [];
-
-	server.use(
-		rest.get(
-			'http://localhost/api/v1/ai_observability/fields/values',
-			(req, res, ctx) => {
-				requests.push(req.url.searchParams);
-
-				return res(
-					ctx.status(200),
-					ctx.json({
-						status: 'success',
-						data: {
-							values: {
-								relatedValues: response.relatedValues ?? [],
-								stringValues: response.stringValues ?? [],
-								numberValues: response.numberValues ?? [],
-							},
-						},
-					}),
-				);
-			},
-		),
-	);
-
-	return { requests };
-}
-
-/** Fails the test if the signal-wide values endpoint is hit at all. */
-export function forbidFieldsValuesAPI(): { called: boolean } {
-	const state = { called: false };
-
-	server.use(
-		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) => {
-			state.called = true;
-			return res(ctx.status(200), ctx.json({ status: 'success', data: {} }));
-		}),
-	);
-
-	return state;
-}
-
 export function mockFieldsValuesAPILoading(): void {
 	server.use(
 		rest.get('http://localhost/api/v1/fields/values', (_, res, ctx) =>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/CheckboxFilterV2.tsx

@@ -16,7 +16,7 @@ import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { NON_SELECTED_OPERATORS } from '../checkboxFilterQuery';
-import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
+import useActiveQueryIndex from '../useActiveQueryIndex';
 import useCheckboxDisclosure from '../useCheckboxDisclosure';
 import useCheckboxFilterActions from '../useCheckboxFilterActions';
 import useCheckboxFilterState from '../useCheckboxFilterState';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/__tests__/CheckboxFilterV2.aiObservability.test.tsx

@@ -1,81 +0,0 @@
-import { screen, waitFor } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../../../types';
-
-import CheckboxFilterV2 from '../CheckboxFilterV2';
-import {
-	DEFAULT_FILTER,
-	DEFAULT_USE_FIELD_APIS,
-	forbidFieldsValuesAPI,
-	mockAIObservabilityFieldsValuesAPI,
-	mockFieldsValuesAPI,
-	setupServer,
-} from '../CheckboxFilterV2.testUtils';
-
-setupServer();
-
-describe('CheckboxFilterV2 - AI observability routing', () => {
-	it('reads values from the AI observability endpoint and never the signal-wide one', async () => {
-		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
-			stringValues: ['openai', 'anthropic'],
-		});
-		const fieldsEndpoint = forbidFieldsValuesAPI();
-
-		render(
-			<CheckboxFilterV2
-				filter={DEFAULT_FILTER}
-				source={QuickFiltersSource.AI_OBSERVABILITY}
-				useFieldApis={DEFAULT_USE_FIELD_APIS}
-			/>,
-		);
-
-		await expect(screen.findByText('openai')).resolves.toBeInTheDocument();
-		expect(screen.getByText('anthropic')).toBeInTheDocument();
-		expect(fieldsEndpoint.called).toBe(false);
-		expect(aiEndpoint.requests).toHaveLength(1);
-	});
-
-	it('forwards the filter key and the time range to the AI observability endpoint', async () => {
-		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
-			stringValues: ['openai'],
-		});
-
-		render(
-			<CheckboxFilterV2
-				filter={DEFAULT_FILTER}
-				source={QuickFiltersSource.AI_OBSERVABILITY}
-				useFieldApis={DEFAULT_USE_FIELD_APIS}
-			/>,
-		);
-
-		await screen.findByText('openai');
-
-		const params = aiEndpoint.requests[0];
-		expect(params.get('name')).toBe(DEFAULT_FILTER.attributeKey.key);
-		expect(params.get('startUnixMilli')).toBe(
-			String(DEFAULT_USE_FIELD_APIS.startUnixMilli),
-		);
-		expect(params.get('endUnixMilli')).toBe(
-			String(DEFAULT_USE_FIELD_APIS.endUnixMilli),
-		);
-	});
-
-	it('keeps non-AI sources on the signal-wide endpoint', async () => {
-		mockFieldsValuesAPI({ stringValues: ['production'] });
-		const aiEndpoint = mockAIObservabilityFieldsValuesAPI({
-			stringValues: ['should-not-be-used'],
-		});
-
-		render(
-			<CheckboxFilterV2
-				filter={DEFAULT_FILTER}
-				source={QuickFiltersSource.TRACES_EXPLORER}
-				useFieldApis={DEFAULT_USE_FIELD_APIS}
-			/>,
-		);
-
-		await expect(screen.findByText('production')).resolves.toBeInTheDocument();
-		await waitFor(() => expect(aiEndpoint.requests).toHaveLength(0));
-	});
-});

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/v2/useFieldValues.tsx

@@ -1,12 +1,11 @@
 import { useMemo } from 'react';
+import { useGetFieldsValues } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { FieldValuesConfig } from 'api/querySuggestions/types';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { useFieldValuesSuggestion } from 'hooks/querySuggestions/useFieldValuesSuggestion';
-import { BuilderQueryType } from 'types/api/v5/queryRange';
+import { FIELD_API_CACHE_TIME } from 'constants/queryCacheTime';
 import { DATA_SOURCE_TO_SIGNAL } from 'types/common/queryBuilder';
 
 interface UseFieldValuesProps {
@@ -43,43 +42,32 @@ export function useFieldValues({
 	endUnixMilli,
 	enabled,
 }: UseFieldValuesProps): UseFieldValuesReturn {
-	const isAIObservability = source === QuickFiltersSource.AI_OBSERVABILITY;
-
-	const builderQueryType: BuilderQueryType | undefined = isAIObservability
-		? 'builder_ai_query'
-		: undefined;
-
-	// The AI values endpoint is already gen_ai-scoped: no signal, no source.
-	const fieldValuesConfig: FieldValuesConfig = isAIObservability
-		? {
-				name: filter.attributeKey.key,
-				searchText,
-				existingQuery,
-				startUnixMilli,
-				endUnixMilli,
-			}
-		: {
-				signal: filter.dataSource
-					? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
-					: undefined,
-				name: filter.attributeKey.key,
-				searchText,
-				existingQuery,
-				metricNamespace,
-				source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
-				startUnixMilli,
-				// This field does not affect the backend but I wanted to keep it here
-				// in case we add the support in the future
-				endUnixMilli,
-			};
-
-	const {
-		data: values,
-		isLoading,
-		isFetching,
-	} = useFieldValuesSuggestion(fieldValuesConfig, builderQueryType, { enabled });
+	const { data, isLoading, isFetching } = useGetFieldsValues(
+		{
+			signal: filter.dataSource
+				? DATA_SOURCE_TO_SIGNAL[filter.dataSource]
+				: undefined,
+			name: filter.attributeKey.key,
+			searchText,
+			existingQuery,
+			metricNamespace,
+			source: source ? QUICK_FILTERS_SOURCE_TO_SOURCE[source] : undefined,
+			startUnixMilli,
+			// This field does not affect the backend but I wanted to keep it here
+			// in case we add the support in the future
+			endUnixMilli,
+		},
+		{
+			query: {
+				enabled,
+				cacheTime: FIELD_API_CACHE_TIME,
+				keepPreviousData: true,
+			},
+		},
+	);
 
 	const relatedValues: string[] = useMemo(() => {
+		const values = data?.data?.values;
 		if (!values) {
 			return [];
 		}
@@ -90,9 +78,10 @@ export function useFieldValues({
 					value !== null && value !== undefined && value !== '',
 			) || []
 		);
-	}, [values]);
+	}, [data]);
 
 	const allValues: string[] = useMemo(() => {
+		const values = data?.data?.values;
 		if (!values) {
 			return [];
 		}
@@ -112,7 +101,7 @@ export function useFieldValues({
 				.map((value) => value.toString()) || [];
 
 		return [...stringValues, ...numberValues, ...boolValues];
-	}, [values]);
+	}, [data]);
 
 	return { relatedValues, allValues, isLoading, isFetching };
 }

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx

@@ -1,32 +1,36 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Collapse } from 'antd';
 import { Undo2 } from '@signozhq/icons';
-import useActiveQueryIndex from 'components/QuickFilters/hooks/useActiveQueryIndex';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { getMs } from 'utils/timeUtils';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { cloneDeep, isArray, isEqual, isFunction } from 'lodash-es';
+import { DurationSection } from 'pages/TracesExplorer/Filter/DurationSection';
 import {
 	AllTraceFilterKeys,
 	AllTraceFilterKeyValue,
+	HandleRunProps,
 	traceFilterKeys,
-} from 'constants/traceFilterKeys';
+	unionTagFilterItems,
+} from 'pages/TracesExplorer/Filter/filterUtils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import { clearFilterFromQuery } from '../shared/filterQuery';
 import { SectionActionButton } from '../shared/SectionActionButton/SectionActionButton';
-import { DurationSection } from './DurationSection';
-import { FilterType, HandleRunProps, unionTagFilterItems } from './utils';
 
 import './Duration.styles.scss';
 
-export type { FilterType };
+export type FilterType = Record<
+	AllTraceFilterKeys,
+	{ values: string[] | string; keys: BaseAutocompleteData }
+>;
 
 function Duration({
 	filter,
@@ -35,7 +39,7 @@ function Duration({
 }: {
 	filter: IQuickFiltersConfig;
 	onFilterChange?: (query: Query) => void;
-	source: QuickFiltersSource;
+	source?: QuickFiltersSource;
 }): JSX.Element {
 	const [selectedFilters, setSelectedFilters] =
 		useState<
@@ -48,11 +52,26 @@ function Duration({
 		filter.defaultOpen ? 'durationNano' : '',
 	]);
 
-	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+	const {
+		currentQuery,
+		redirectWithQueryBuilderData,
+		lastUsedQuery,
+		panelType,
+	} = useQueryBuilder();
 
 	const compositeQuery = useGetCompositeQueryParam();
 
-	const activeQueryIndex = useActiveQueryIndex(source);
+	const isListView = panelType === PANEL_TYPES.LIST;
+	// In ListView mode, use index 0 for most sources; for TRACES_EXPLORER, use lastUsedQuery
+	// Otherwise use lastUsedQuery for non-ListView modes
+	const activeQueryIndex = useMemo(() => {
+		if (isListView) {
+			return source === QuickFiltersSource.TRACES_EXPLORER
+				? lastUsedQuery || 0
+				: 0;
+		}
+		return lastUsedQuery || 0;
+	}, [isListView, source, lastUsedQuery]);
 
 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	const syncSelectedFilters = useMemo((): FilterType => {

frontend/src/components/QuickFilters/FilterRenderers/Duration/utils.ts

@@ -1,101 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { AllTraceFilterKeys } from 'constants/traceFilterKeys';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-
-export type FilterType = Record<
-	AllTraceFilterKeys,
-	{ values: string[] | string; keys: BaseAutocompleteData }
->;
-
-export interface HandleRunProps {
-	resetAll?: boolean;
-	clearByType?: AllTraceFilterKeys;
-}
-
-function convertToStringArr(value: string | string[] | undefined): string[] {
-	if (value) {
-		if (typeof value === 'string') {
-			return [value];
-		}
-		return value;
-	}
-	return [];
-}
-
-export const addFilter = (
-	filterType: AllTraceFilterKeys,
-	value: string,
-	setSelectedFilters: Dispatch<
-		SetStateAction<
-			| Record<
-					AllTraceFilterKeys,
-					{ values: string[] | string; keys: BaseAutocompleteData }
-			  >
-			| undefined
-		>
-	>,
-	keys: BaseAutocompleteData,
-): void => {
-	setSelectedFilters((prevFilters) => {
-		const isDuration = [
-			'durationNanoMax',
-			'durationNanoMin',
-			'durationNano',
-		].includes(filterType);
-
-		// Convert value to string array
-		const valueArray = convertToStringArr(value);
-
-		// If previous filters are undefined, initialize them
-		if (!prevFilters) {
-			return {
-				[filterType]: { values: isDuration ? value : valueArray, keys },
-			} as unknown as FilterType;
-		}
-
-		// If the filter type doesn't exist, initialize it
-		if (!prevFilters[filterType]?.values.length) {
-			return {
-				...prevFilters,
-				[filterType]: { values: isDuration ? value : valueArray, keys },
-			};
-		}
-
-		// If the value already exists, don't add it again
-		if (convertToStringArr(prevFilters[filterType].values).includes(value)) {
-			return prevFilters;
-		}
-
-		// Otherwise, add the value to the existing array
-		return {
-			...prevFilters,
-			[filterType]: {
-				values: isDuration
-					? value
-					: [...convertToStringArr(prevFilters[filterType].values), value],
-				keys,
-			},
-		};
-	});
-};
-
-/** Merges two filter lists; later items win on the same key + operator. */
-export function unionTagFilterItems(
-	items1: TagFilterItem[],
-	items2: TagFilterItem[],
-): TagFilterItem[] {
-	const unionMap = new Map<string, TagFilterItem>();
-
-	items1?.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item?.op}`;
-		unionMap.set(keyOp, item);
-	});
-
-	items2?.forEach((item) => {
-		const keyOp = `${item?.key?.key}_${item?.op}`;
-		unionMap.set(keyOp, item);
-	});
-
-	return Array.from(unionMap?.values());
-}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -2,8 +2,6 @@
 	display: flex;
 	flex-direction: row;
 	position: relative;
-	flex: 1;
-	min-height: 0;
 
 	.quick-filters-settings-container {
 		flex: 0 0 0;

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -35,7 +35,6 @@ import { isFunction } from 'lodash-es';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import Checkbox from './FilterRenderers/Checkbox/Checkbox';
-import useActiveQueryIndex from './hooks/useActiveQueryIndex';
 import CheckboxV2 from './FilterRenderers/Checkbox/v2/CheckboxFilterV2';
 import Duration from './FilterRenderers/Duration/Duration';
 import Slider from './FilterRenderers/Slider/Slider';
@@ -114,13 +113,14 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	const shouldShowDropdownInListView =
 		isListView && source === QuickFiltersSource.TRACES_EXPLORER;
 
-	// AI observability builds a single query in the row-level views, so there is
-	// no query for the selector to switch between.
-	const isAIObservabilityRowView =
-		source === QuickFiltersSource.AI_OBSERVABILITY &&
-		(isListView || panelType === PANEL_TYPES.TRACE);
-
-	const activeQueryIndex = useActiveQueryIndex(source);
+	const activeQueryIndex = useMemo(() => {
+		if (isListView) {
+			return source === QuickFiltersSource.TRACES_EXPLORER
+				? lastUsedQuery || 0
+				: 0;
+		}
+		return lastUsedQuery || 0;
+	}, [isListView, source, lastUsedQuery]);
 
 	// clear all the filters for the query which is in sync with filters
 	const handleReset = (): void => {
@@ -167,10 +167,9 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
 
 	// In ListView, always show the 0th query's name; otherwise use the active query's name
-	const displayedQueryName =
-		isListView || isAIObservabilityRowView
-			? showQueryName && currentQuery.builder.queryData?.[0]?.queryName
-			: lastQueryName;
+	const displayedQueryName = isListView
+		? showQueryName && currentQuery.builder.queryData?.[0]?.queryName
+		: lastQueryName;
 
 	const handleQueryChange = (value: number): void => {
 		setLastUsedQuery(value);
@@ -183,9 +182,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
-			{queryOptions.length > 1 &&
-			!isAIObservabilityRowView &&
-			(!isListView || shouldShowDropdownInListView) ? (
+			{queryOptions.length > 1 && (!isListView || shouldShowDropdownInListView) ? (
 				<Combobox open={open} onOpenChange={setOpen}>
 					<ComboboxTrigger
 						placeholder="Select a query"
@@ -321,7 +318,6 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 							return (
 								<Duration
 									key={filter.attributeKey.key}
-									source={source}
 									filter={filter}
 									onFilterChange={onFilterChange}
 								/>

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.module.scss

@@ -1,33 +0,0 @@
-// The one `overflow: hidden` in the chain. Ancestors (RouteTab, AppLayout)
-// only hand height down; each pane below owns its own scroll.
-.layout {
-	display: flex;
-	flex: 1;
-	height: 100%;
-	min-height: 0;
-	overflow: hidden;
-}
-
-// Positioned so overlays (settings drawer) paint above the content pane
-// without changing this pane's layout width.
-.filters {
-	width: 280px;
-	flex-shrink: 0;
-	display: flex;
-	flex-direction: column;
-	min-height: 0;
-	position: relative;
-	overflow: visible;
-	z-index: 2;
-}
-
-// Bounded box for the OverlayScrollbar inside it (`.overlay-scrollbar` is
-// `height: 100%`), which owns the scrolling.
-.content {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-}

frontend/src/components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout.tsx

@@ -1,54 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-import cx from 'classnames';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-
-import QuickFilters from '../QuickFilters';
-
-import styles from './QuickFiltersLayout.module.scss';
-
-// Same optionality as `<QuickFilters />` in JSX (honours its defaultProps).
-type QuickFiltersElementProps = JSX.LibraryManagedAttributes<
-	typeof QuickFilters,
-	ComponentProps<typeof QuickFilters>
->;
-
-export interface QuickFiltersLayoutProps {
-	quickFilterProps: QuickFiltersElementProps;
-	showFilters: boolean;
-	className?: string;
-	contentClassName?: string;
-	testId?: string;
-	children: ReactNode;
-}
-
-function QuickFiltersLayout({
-	quickFilterProps,
-	showFilters,
-	className,
-	contentClassName,
-	testId,
-	children,
-}: QuickFiltersLayoutProps): JSX.Element {
-	return (
-		<div className={cx(styles.layout, className)} data-testid={testId}>
-			{showFilters && (
-				<aside
-					className={styles.filters}
-					data-testid="quick-filters-layout-filters"
-				>
-					<QuickFilters {...quickFilterProps} />
-				</aside>
-			)}
-			<section
-				className={cx(styles.content, contentClassName)}
-				data-testid="quick-filters-layout-content"
-			>
-				<OverlayScrollbar>
-					<div>{children}</div>
-				</OverlayScrollbar>
-			</section>
-		</div>
-	);
-}
-
-export default QuickFiltersLayout;

frontend/src/components/QuickFilters/QuickFiltersLayout/__tests__/QuickFiltersLayout.test.tsx

@@ -1,79 +0,0 @@
-import { render, screen } from 'tests/test-utils';
-
-import { QuickFiltersSource } from '../../types';
-import QuickFiltersLayout from '../QuickFiltersLayout';
-
-jest.mock('../QuickFiltersLayout.module.scss', () => ({
-	__esModule: true,
-	default: {
-		layout: 'layout',
-		filters: 'filters',
-		content: 'content',
-	},
-}));
-
-jest.mock('../../QuickFilters', () => ({
-	__esModule: true,
-	default: ({ source }: { source: string }): JSX.Element => (
-		<div data-testid="quick-filters">{source}</div>
-	),
-}));
-
-const quickFilterProps = {
-	source: QuickFiltersSource.TRACES_EXPLORER,
-	handleFilterVisibilityChange: jest.fn(),
-};
-
-describe('QuickFiltersLayout', () => {
-	it('renders QuickFilters with the given props inside the filters pane', () => {
-		render(
-			<QuickFiltersLayout showFilters quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const filtersPane = screen.getByTestId('quick-filters-layout-filters');
-		expect(filtersPane).toContainElement(screen.getByTestId('quick-filters'));
-		expect(screen.getByTestId('quick-filters')).toHaveTextContent(
-			QuickFiltersSource.TRACES_EXPLORER,
-		);
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveTextContent(
-			'content',
-		);
-	});
-
-	it('does not render the filters pane when showFilters is false', () => {
-		render(
-			<QuickFiltersLayout showFilters={false} quickFilterProps={quickFilterProps}>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		expect(
-			screen.queryByTestId('quick-filters-layout-filters'),
-		).not.toBeInTheDocument();
-		expect(screen.queryByTestId('quick-filters')).not.toBeInTheDocument();
-		expect(screen.getByText('content')).toBeInTheDocument();
-	});
-
-	it('merges classNames onto the root and content panes', () => {
-		render(
-			<QuickFiltersLayout
-				showFilters
-				quickFilterProps={quickFilterProps}
-				className="page-root"
-				contentClassName="page-content"
-				testId="page"
-			>
-				<div>content</div>
-			</QuickFiltersLayout>,
-		);
-
-		const root = screen.getByTestId('page');
-		expect(root).toHaveClass('layout', 'page-root');
-		expect(screen.getByTestId('quick-filters-layout-content')).toHaveClass(
-			'content',
-			'page-content',
-		);
-	});
-});

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,14 +1,12 @@
 import { useMemo } from 'react';
 import { Button, Skeleton } from 'antd';
+import { useGetFieldsKeys } from 'api/generated/services/fields';
 import { TelemetrytypesSourceDTO } from 'api/generated/services/sigNoz.schemas';
-import { FieldKeysConfig } from 'api/querySuggestions/types';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
 import { buildCompositeKey } from 'container/OptionsMenu/utils';
-import { useFieldKeysSuggestion } from 'hooks/querySuggestions/useFieldKeysSuggestion';
 import {
-	BuilderQueryType,
 	FieldContext,
 	FieldDataType,
 	TelemetryFieldKey,
@@ -43,31 +41,23 @@ function OtherFilters({
 	setAddedFilters: React.Dispatch<React.SetStateAction<TelemetryFieldKey[]>>;
 }): JSX.Element {
 	const isMeterDataSource = signal === SignalType.METER_EXPLORER;
-	const isAIObservability = signal === SignalType.AI_OBSERVABILITY;
 
-	const builderQueryType: BuilderQueryType | undefined = isAIObservability
-		? 'builder_ai_query'
-		: undefined;
-
-	const fieldKeysConfig: FieldKeysConfig = isAIObservability
-		? { searchText: inputValue }
-		: {
-				searchText: inputValue,
-				signal: signal
-					? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
-					: undefined,
-				source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
-			};
-
-	const { data: fetchedKeys, isFetching } = useFieldKeysSuggestion(
-		fieldKeysConfig,
-		builderQueryType,
+	const { data, isFetching } = useGetFieldsKeys(
+		{
+			searchText: inputValue,
+			signal: signal
+				? DATA_SOURCE_TO_SIGNAL[SIGNAL_DATA_SOURCE_MAP[signal]]
+				: undefined,
+			source: isMeterDataSource ? TelemetrytypesSourceDTO.meter : undefined,
+		},
+		{ query: { enabled: !!signal } },
 	);
 
 	const otherFilters = useMemo<TelemetryFieldKey[]>(() => {
+		const rawSuggestions = Object.values(data?.data?.keys ?? {}).flat();
 		// Normalize: synthesize the composite `key` once so downstream reads (dedupe,
 		// add, render) can trust it.
-		const suggestions: TelemetryFieldKey[] = (fetchedKeys ?? []).map((attr) => ({
+		const suggestions: TelemetryFieldKey[] = rawSuggestions.map((attr) => ({
 			name: attr.name,
 			signal: attr.signal as TelemetryFieldKey['signal'],
 			fieldContext: attr.fieldContext as FieldContext,
@@ -81,7 +71,7 @@ function OtherFilters({
 			),
 		);
 		return suggestions.filter((attr) => !addedKeys.has(attr.key as string));
-	}, [fetchedKeys, addedFilters]);
+	}, [data, addedFilters]);
 
 	const handleAddFilter = (filter: TelemetryFieldKey): void => {
 		setAddedFilters((prev) => [...prev, filter]);

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.styles.scss

@@ -6,12 +6,27 @@
 	left: 0;
 	z-index: 999;
 	width: 342px;
-	height: 100%;
 	background: var(--l1-background);
 	transition: width 0.05s ease-in-out;
 	overflow: hidden;
 	color: var(--l1-foreground);
 
+	&.qf-logs-explorer {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-exceptions {
+		height: 100vh;
+	}
+
+	&.qf-api-monitoring {
+		height: calc(100vh - 45px);
+	}
+
+	&.qf-traces-explorer {
+		height: calc(100vh - 45px);
+	}
+
 	&.hidden {
 		width: 0;
 	}

frontend/src/components/QuickFilters/QuickFiltersSettings/__tests__/OtherFilters.test.tsx

@@ -1,81 +0,0 @@
-import { screen, waitFor } from '@testing-library/react';
-import { ENVIRONMENT } from 'constants/env';
-import { server } from 'mocks-server/server';
-import { rest } from 'msw';
-import { render } from 'tests/test-utils';
-
-import { SignalType } from '../../types';
-import OtherFilters from '../OtherFilters';
-
-const BASE_URL = ENVIRONMENT.baseURL;
-const FIELDS_KEYS_URL = `${BASE_URL}/api/v1/fields/keys`;
-const AI_KEYS_URL = `${BASE_URL}/api/v1/ai_observability/fields/keys`;
-
-function keysResponse(name: string): Record<string, unknown> {
-	return {
-		status: 'success',
-		data: {
-			complete: true,
-			keys: {
-				[name]: [{ name, fieldContext: 'attribute', fieldDataType: 'string' }],
-			},
-		},
-	};
-}
-
-describe('OtherFilters - AI observability keys', () => {
-	let fieldsKeysCalled: boolean;
-	let aiKeysParams: URLSearchParams | undefined;
-
-	beforeEach(() => {
-		fieldsKeysCalled = false;
-		aiKeysParams = undefined;
-
-		server.use(
-			rest.get(FIELDS_KEYS_URL, (_, res, ctx) => {
-				fieldsKeysCalled = true;
-				return res(ctx.status(200), ctx.json(keysResponse('http.route')));
-			}),
-			rest.get(AI_KEYS_URL, (req, res, ctx) => {
-				aiKeysParams = req.url.searchParams;
-				return res(ctx.status(200), ctx.json(keysResponse('gen_ai.request.model')));
-			}),
-		);
-	});
-
-	function renderOtherFilters(signal: SignalType): void {
-		render(
-			<OtherFilters
-				signal={signal}
-				inputValue=""
-				addedFilters={[]}
-				setAddedFilters={jest.fn()}
-			/>,
-		);
-	}
-
-	it('reads AI observability keys from their own endpoint', async () => {
-		renderOtherFilters(SignalType.AI_OBSERVABILITY);
-
-		await expect(
-			screen.findByText('gen_ai.request.model'),
-		).resolves.toBeInTheDocument();
-		expect(fieldsKeysCalled).toBe(false);
-	});
-
-	it('does not narrow the AI keys by fieldContext', async () => {
-		renderOtherFilters(SignalType.AI_OBSERVABILITY);
-
-		// A `trace` context would return only the computed per-trace aggregates,
-		// which cannot be filtered on.
-		await waitFor(() => expect(aiKeysParams).toBeDefined());
-		expect(aiKeysParams?.get('fieldContext')).toBeNull();
-	});
-
-	it('keeps other signals on the signal-wide keys endpoint', async () => {
-		renderOtherFilters(SignalType.TRACES);
-
-		await expect(screen.findByText('http.route')).resolves.toBeInTheDocument();
-		await waitFor(() => expect(aiKeysParams).toBeUndefined());
-	});
-});

frontend/src/components/QuickFilters/QuickFiltersSettings/constants.ts

@@ -7,5 +7,4 @@ export const SIGNAL_DATA_SOURCE_MAP = {
 	[SignalType.EXCEPTIONS]: DataSource.TRACES,
 	[SignalType.API_MONITORING]: DataSource.TRACES,
 	[SignalType.METER_EXPLORER]: DataSource.METRICS,
-	[SignalType.AI_OBSERVABILITY]: DataSource.TRACES,
 };

frontend/src/components/QuickFilters/hooks/__tests__/useActiveQueryIndex.test.ts

@@ -1,81 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-
-import { QuickFiltersSource } from '../../types';
-import useActiveQueryIndex from '../useActiveQueryIndex';
-
-jest.mock('hooks/queryBuilder/useQueryBuilder', () => ({
-	useQueryBuilder: jest.fn(),
-}));
-
-const LAST_USED_QUERY = 2;
-
-function mockQueryBuilder(panelType: PANEL_TYPES): void {
-	(useQueryBuilder as jest.Mock).mockReturnValue({
-		lastUsedQuery: LAST_USED_QUERY,
-		panelType,
-	});
-}
-
-describe('useActiveQueryIndex', () => {
-	describe('AI observability builds a single query in the row-level views', () => {
-		it.each([PANEL_TYPES.LIST, PANEL_TYPES.TRACE])(
-			'drives the first query in %s',
-			(panelType) => {
-				mockQueryBuilder(panelType);
-
-				const { result } = renderHook(() =>
-					useActiveQueryIndex(QuickFiltersSource.AI_OBSERVABILITY),
-				);
-
-				expect(result.current).toBe(0);
-			},
-		);
-
-		it.each([PANEL_TYPES.TIME_SERIES, PANEL_TYPES.TABLE])(
-			'follows the last used query in %s',
-			(panelType) => {
-				mockQueryBuilder(panelType);
-
-				const { result } = renderHook(() =>
-					useActiveQueryIndex(QuickFiltersSource.AI_OBSERVABILITY),
-				);
-
-				expect(result.current).toBe(LAST_USED_QUERY);
-			},
-		);
-	});
-
-	describe('other sources are unchanged', () => {
-		it('lets the traces explorer track the last used query in list view', () => {
-			mockQueryBuilder(PANEL_TYPES.LIST);
-
-			const { result } = renderHook(() =>
-				useActiveQueryIndex(QuickFiltersSource.TRACES_EXPLORER),
-			);
-
-			expect(result.current).toBe(LAST_USED_QUERY);
-		});
-
-		it('pins single-query sources to the first query in list view', () => {
-			mockQueryBuilder(PANEL_TYPES.LIST);
-
-			const { result } = renderHook(() =>
-				useActiveQueryIndex(QuickFiltersSource.INFRA_MONITORING),
-			);
-
-			expect(result.current).toBe(0);
-		});
-
-		it('tracks the last used query outside list view', () => {
-			mockQueryBuilder(PANEL_TYPES.TIME_SERIES);
-
-			const { result } = renderHook(() =>
-				useActiveQueryIndex(QuickFiltersSource.LOGS_EXPLORER),
-			);
-
-			expect(result.current).toBe(LAST_USED_QUERY);
-		});
-	});
-});

frontend/src/components/QuickFilters/types.ts

@@ -24,7 +24,6 @@ export enum SignalType {
 	API_MONITORING = 'api_monitoring',
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
-	AI_OBSERVABILITY = 'ai_observability',
 }
 
 /**
@@ -70,7 +69,6 @@ export enum QuickFiltersSource {
 	API_MONITORING = 'api-monitoring',
 	EXCEPTIONS = 'exceptions',
 	METER_EXPLORER = 'meter',
-	AI_OBSERVABILITY = 'ai-observability',
 }
 
 /**

frontend/src/components/RouteTab/RouteTab.module.scss

@@ -1,38 +0,0 @@
-// Hands the parent's height down to the active pane and lets the pane scroll
-// its own content, so TopNav and the tab bar stay put. Child combinators only
-// (nested Tabs must not be caught).
-.routeTab {
-	flex: 1;
-	min-height: 0;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) {
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab > :global(.ant-tabs-content-holder) > :global(.ant-tabs-content) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active) {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-}
-
-.routeTab
-	> :global(.ant-tabs-content-holder)
-	> :global(.ant-tabs-content)
-	> :global(.ant-tabs-tabpane-active)
-	> :global(.overlay-scrollbar) {
-	flex: 1;
-	min-height: 0;
-}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -5,11 +5,6 @@ import { fireEvent, render, screen } from 'tests/test-utils';
 import RouteTab from './index';
 import { RouteTabProps } from './types';
 
-jest.mock('./RouteTab.module.scss', () => ({
-	__esModule: true,
-	default: { routeTab: 'routeTab' },
-}));
-
 function DummyComponent1(): JSX.Element {
 	return <div>Dummy Component 1</div>;
 }
@@ -79,36 +74,6 @@ describe('RouteTab component', () => {
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
-	it('applies the layout class alongside a custom className', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab
-					history={history}
-					routes={testRoutes}
-					activeKey="Tab1"
-					className="custom-tabs"
-				/>
-			</Router>,
-		);
-		expect(container.querySelector('.ant-tabs')).toHaveClass(
-			'routeTab',
-			'custom-tabs',
-		);
-	});
-
-	it('renders the active tab content inside an overlay scrollbar', () => {
-		const history = createMemoryHistory();
-		const { container } = render(
-			<Router history={history}>
-				<RouteTab history={history} routes={testRoutes} activeKey="Tab1" />
-			</Router>,
-		);
-		expect(
-			container.querySelector('.ant-tabs-tabpane-active > .overlay-scrollbar'),
-		).toHaveTextContent('Dummy Component 1');
-	});
-
 	it('calls onChangeHandler on tab change', () => {
 		const onChangeHandler = jest.fn();
 		const history = createMemoryHistory();

frontend/src/components/RouteTab/index.tsx

@@ -5,32 +5,20 @@ import {
 	useParams,
 } from 'react-router-dom';
 import { Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
-import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 
 import { RouteTabProps } from './types';
 
-import styles from './RouteTab.module.scss';
-
 interface Params {
 	[key: string]: string;
 }
 
-/**
- * Each pane scrolls its own content inside an OverlayScrollbar, so the tab bar
- * stays put. Mounted as the page root the pane is bounded to the viewport; inside
- * a plain block wrapper the scroller is inert and the page scrolls as usual.
- * Pane content that needs a bounded box must size itself with `height: 100%`
- * (the scroller's viewport is block flow, so `flex: 1` has no effect there).
- */
 function RouteTab({
 	routes,
 	activeKey,
 	onChangeHandler,
 	history,
 	showRightSection,
-	className,
 	...rest
 }: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
@@ -62,16 +50,11 @@ function RouteTab({
 		label: name,
 		key,
 		tabKey: route,
-		children: (
-			<OverlayScrollbar>
-				<Component />
-			</OverlayScrollbar>
-		),
+		children: <Component />,
 	}));
 
 	return (
 		<Tabs
-			className={cx(styles.routeTab, className)}
 			onChange={onChange}
 			destroyInactiveTabPane
 			activeKey={currentRoute?.key || activeKey}

frontend/src/constants/localStorage.ts

@@ -41,11 +41,11 @@ export enum LOCALSTORAGE {
 	DISMISSED_API_KEYS_DEPRECATION_BANNER = 'DISMISSED_API_KEYS_DEPRECATION_BANNER',
 	TRACE_DETAILS_SPAN_DETAILS_POSITION = 'TRACE_DETAILS_SPAN_DETAILS_POSITION',
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
+	TRACE_DETAILS_PREFER_OLD_VIEW = 'TRACE_DETAILS_PREFER_OLD_VIEW',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	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',
 	LLM_ATTRIBUTE_MAPPING_TEST_SPAN = 'LLM_ATTRIBUTE_MAPPING_TEST_SPAN',
-	SAVED_VIEW_ENABLED = 'SAVED_VIEW_ENABLED',
 }

frontend/src/constants/panelTypes.ts

@@ -29,7 +29,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
 		[PANEL_TYPES.BAR]: Uplot,
-		[PANEL_TYPES.AREA]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
 		// Dashboards v2 renders this kind; nothing reaches the V1 chart map for it.

frontend/src/constants/queryBuilder.ts

@@ -336,7 +336,6 @@ export enum PANEL_TYPES {
 	LIST = 'list',
 	TRACE = 'trace',
 	BAR = 'bar',
-	AREA = 'area',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
 	TEXT = 'text',

frontend/src/constants/reactQueryKeys.ts

@@ -109,9 +109,6 @@ export const REACT_QUERY_KEY = {
 	// Field Keys Suggestion Query Keys
 	FIELD_KEYS_SUGGESTION: 'FIELD_KEYS_SUGGESTION',
 
-	// Field Values Suggestion Query Keys
-	FIELD_VALUES_SUGGESTION: 'FIELD_VALUES_SUGGESTION',
-
 	// AI Assistant Query Keys
 	AI_ASSISTANT_EMPTY_STATE_CHIPS: 'AI_ASSISTANT_EMPTY_STATE_CHIPS',
 } as const;

frontend/src/constants/resourceAttributes.ts

@@ -1,4 +1,4 @@
-import { OperatorValues } from 'hooks/useResourceAttribute/types';
+import { OperatorValues } from 'types/reducer/trace';
 
 export const OperatorConversions: Array<{
 	label: string;

frontend/src/constants/routes.ts

@@ -6,8 +6,9 @@ const ROUTES = {
 	SERVICE_METRICS: '/services/:servicename',
 	SERVICE_TOP_LEVEL_OPERATIONS: '/services/:servicename/top-level-operations',
 	SERVICE_MAP: '/service-map',
-	TRACE_BASE: '/trace',
+	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
+	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED_WITH_CLOUD: '/get-started-with-signoz-cloud',
@@ -37,6 +38,7 @@ const ROUTES = {
 	NOT_FOUND: '/not-found',
 	LOGS_BASE: '/logs',
 	LOGS: '/logs/logs-explorer',
+	OLD_LOGS_EXPLORER: '/logs/old-logs-explorer',
 	LOGS_EXPLORER: '/logs/logs-explorer',
 	LIVE_LOGS: '/logs/logs-explorer/live',
 	LOGS_PIPELINES: '/logs/pipelines',

frontend/src/constants/traceFilterKeys.ts

@@ -1,124 +0,0 @@
-import { SPAN_ATTRIBUTES } from 'container/ApiMonitoring/Explorer/Domains/DomainDetails/constants';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-/** Trace attribute key -> label shown in quick filters, the options menu and APM "view traces" links. */
-export const AllTraceFilterKeyValue: Record<string, string> = {
-	durationNanoMin: 'Duration',
-	durationNano: 'Duration',
-	duration_nano: 'Duration',
-	durationNanoMax: 'Duration',
-	'deployment.environment': 'Environment',
-	hasError: 'Status',
-	has_error: 'Status',
-	serviceName: 'Service Name',
-	'service.name': 'service.name',
-	name: 'Operation / Name',
-	rpcMethod: 'RPC Method',
-	'rpc.method': 'RPC Method',
-	responseStatusCode: 'Status Code',
-	response_status_code: 'Status Code',
-	httpHost: 'HTTP Host',
-	http_host: 'HTTP Host',
-	httpMethod: 'HTTP Method',
-	http_method: 'HTTP Method',
-	httpRoute: 'HTTP Route',
-	'http.route': 'HTTP Route',
-	httpUrl: 'HTTP URL',
-	[SPAN_ATTRIBUTES.HTTP_URL]: 'HTTP URL',
-	traceID: 'Trace ID',
-	trace_id: 'Trace ID',
-} as const;
-
-export type AllTraceFilterKeys = keyof typeof AllTraceFilterKeyValue;
-
-export const traceFilterKeys: Record<AllTraceFilterKeys, BaseAutocompleteData> =
-	{
-		durationNano: {
-			key: 'durationNano',
-			dataType: DataTypes.Float64,
-			type: 'tag',
-			id: 'durationNano--float64--tag--true',
-		},
-		hasError: {
-			key: 'hasError',
-			dataType: DataTypes.bool,
-			type: 'tag',
-			id: 'hasError--bool--tag--true',
-		},
-		serviceName: {
-			key: 'serviceName',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'serviceName--string--tag--true',
-		},
-
-		'deployment.environment': {
-			key: 'deployment.environment',
-			dataType: DataTypes.String,
-			type: 'resource',
-			id: 'deployment.environment--string--resource--false',
-		},
-		name: {
-			key: 'name',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'name--string--tag--true',
-		},
-		rpcMethod: {
-			key: 'rpcMethod',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'rpcMethod--string--tag--true',
-		},
-		responseStatusCode: {
-			key: 'responseStatusCode',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'responseStatusCode--string--tag--true',
-		},
-		httpHost: {
-			key: 'httpHost',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpHost--string--tag--true',
-		},
-		httpMethod: {
-			key: 'httpMethod',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpMethod--string--tag--true',
-		},
-		httpRoute: {
-			key: 'httpRoute',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpRoute--string--tag--true',
-		},
-		httpUrl: {
-			key: 'httpUrl',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'httpUrl--string--tag--true',
-		},
-		traceID: {
-			key: 'traceID',
-			dataType: DataTypes.String,
-			type: 'tag',
-			id: 'traceID--string--tag--true',
-		},
-		durationNanoMin: {
-			key: 'durationNanoMin',
-			dataType: DataTypes.Float64,
-			type: 'tag',
-			id: 'durationNanoMin--float64--tag--true',
-		},
-		durationNanoMax: {
-			key: 'durationNanoMax',
-			dataType: DataTypes.Float64,
-			type: 'tag',
-			id: 'durationNanoMax--float64--tag--true',
-		},
-	} as const;

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -1,15 +1,23 @@
-.api-monitoring-explorer {
-	.api-quick-filters-header {
-		padding: 12px;
-		border-bottom: 1px solid var(--l1-border);
-		border-right: 1px solid var(--l1-border);
+.api-monitoring-page {
+	display: flex;
+	height: 100%;
 
-		display: flex;
-		align-items: center;
-		gap: 6px;
+	.api-quick-filter-left-section {
+		width: 0%;
+		flex-shrink: 0;
 
-		font-size: 14px;
-		line-height: 18px;
+		.api-quick-filters-header {
+			padding: 12px;
+			border-bottom: 1px solid var(--l1-border);
+			border-right: 1px solid var(--l1-border);
+
+			display: flex;
+			align-items: center;
+			gap: 6px;
+
+			font-size: 14px;
+			line-height: 18px;
+		}
 	}
 
 	.api-module-right-section {
@@ -153,6 +161,16 @@
 			}
 		}
 	}
+
+	&.filter-visible {
+		.api-quick-filter-left-section {
+			width: 260px;
+		}
+
+		.api-module-right-section {
+			width: calc(100% - 260px);
+		}
+	}
 }
 
 .no-filtered-domains-message-container {

frontend/src/container/ApiMonitoring/Explorer/Explorer.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import QuickFiltersLayout from 'components/QuickFilters/QuickFiltersLayout/QuickFiltersLayout';
+import cx from 'classnames';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { useSignalFieldApis } from 'components/QuickFilters/hooks/useSignalFieldApis';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
@@ -19,21 +20,20 @@ function Explorer(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<QuickFiltersLayout
-				className="api-monitoring-explorer"
-				showFilters
-				quickFilterProps={{
-					className: 'qf-api-monitoring',
-					source: QuickFiltersSource.API_MONITORING,
-					signal: SignalType.API_MONITORING,
-					showFilterCollapse: false,
-					showQueryName: false,
-					handleFilterVisibilityChange: (): void => {},
-					useFieldApis: quickFilterFieldApis,
-				}}
-			>
+			<div className={cx('api-monitoring-page', 'filter-visible')}>
+				<section className="api-quick-filter-left-section">
+					<QuickFilters
+						className="qf-api-monitoring"
+						source={QuickFiltersSource.API_MONITORING}
+						signal={SignalType.API_MONITORING}
+						showFilterCollapse={false}
+						showQueryName={false}
+						handleFilterVisibilityChange={(): void => {}}
+						useFieldApis={quickFilterFieldApis}
+					/>
+				</section>
 				<DomainList />
-			</QuickFiltersLayout>
+			</div>
 		</Sentry.ErrorBoundary>
 	);
 }

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

@@ -53,10 +53,6 @@
 		z-index: 0;
 		background: var(--l1-background);
 
-		// Column so the bottom strip sits under the scrolling content, not inside it.
-		display: flex;
-		flex-direction: column;
-
 		&.full-screen-content {
 			width: 100%;
 		}
@@ -74,9 +70,7 @@
 
 .chat-support-gateway {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: calc(20px + var(--bottom-strip-height, 0px));
+	bottom: 20px;
 	right: 20px;
 	z-index: 1000;
 

frontend/src/container/AppLayout/index.tsx

@@ -43,7 +43,6 @@ import { USER_PREFERENCES } from 'constants/userPreferences';
 import AIAssistantModal from 'container/AIAssistant/AIAssistantModal';
 import AIAssistantPanel from 'container/AIAssistant/AIAssistantPanel';
 import { useAIAssistantStore } from 'container/AIAssistant/store/useAIAssistantStore';
-import BottomStrip from 'container/BottomStrip';
 import SideNav from 'container/SideNav';
 import TopNav from 'container/TopNav';
 import dayjs from 'dayjs';
@@ -52,7 +51,6 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSavedViewEnabled } from 'hooks/useSavedViewEnabled';
 import useTabVisibility from 'hooks/useTabFocus';
 import history from 'lib/history';
 import { isNull } from 'lodash-es';
@@ -404,7 +402,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	}, [pathname]);
 
 	const isToDisplayLayout = isLoggedIn;
-	const isSavedViewEnabled = useSavedViewEnabled();
 
 	const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
 	const pageTitle = t(routeKey);
@@ -871,10 +868,6 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 								</OverlayScrollbar>
 							</LayoutContent>
 						</Sentry.ErrorBoundary>
-
-						{isSavedViewEnabled && isToDisplayLayout && !renderFullScreen && (
-							<BottomStrip />
-						)}
 					</div>
 
 					{isLoggedIn && isAIAssistantEnabled && (
@@ -885,7 +878,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 					)}
 				</Flex>
 
-				{showAddCreditCardModal && !isSavedViewEnabled && <ChatSupportGateway />}
+				{showAddCreditCardModal && <ChatSupportGateway />}
 				{showChangelogModal && changelog && (
 					<ChangelogModal changelog={changelog} onClose={toggleChangelogModal} />
 				)}

frontend/src/container/AppLayout/styles.ts

@@ -12,12 +12,8 @@ export const Layout = styled(LayoutComponent)`
 	}
 `;
 
-// Takes the height left in `.app-content` after the bottom strip.
-// `min-height: 0` is not needed right now, overlayscrollbars already sets
-// `overflow: auto` here. Kept so this does not break if that goes away.
 export const LayoutContent = styled(LayoutComponent.Content)`
-	flex: 1;
-	min-height: 0;
+	height: 100%;
 	&::-webkit-scrollbar {
 		width: 0.1rem;
 	}

frontend/src/container/BottomStrip/AskNoz/AskNoz.module.scss

@@ -1,36 +0,0 @@
-.askNoz {
-	display: flex;
-	align-items: center;
-	flex-shrink: 0;
-}
-
-.badge {
-	flex-shrink: 0;
-	display: inline-flex;
-	line-height: 0;
-	color: var(--accent-primary);
-}
-
-.pulseDot {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	line-height: 0;
-	animation: askNozDotPulse 1.5s ease-in-out infinite;
-	transform: scale(0.8);
-	margin-right: -12px;
-}
-
-@keyframes askNozDotPulse {
-	0%,
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
-
-	50% {
-		opacity: 0.35;
-		transform: scale(0.82);
-	}
-}

frontend/src/container/BottomStrip/AskNoz/AskNoz.tsx

@@ -1,76 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-import Noz from 'components/Noz/Noz';
-import { NOZ_TOOLTIP_TITLE } from 'components/Noz/Noz.constants';
-import { selectPendingUserInputStreamCount } from 'container/AIAssistant/store/pendingInputSelectors';
-import {
-	openAIAssistant,
-	useAIAssistantStore,
-} from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import ROUTES from 'constants/routes';
-import { Dot } from '@signozhq/icons';
-
-import styles from './AskNoz.module.scss';
-
-/**
- * Opens the Noz drawer, matching the header entry it replaces. Cmd+K opens the
- * modal instead; this is deliberately the drawer.
- *
- * Carries the header's pending badge: when Noz is blocked on the user
- * (`awaiting_approval` / `awaiting_clarification`) a dot pulses. Without it,
- * hiding the header button would remove a notification rather than move it.
- */
-function AskNoz(): JSX.Element | null {
-	const { pathname } = useLocation();
-	const isAIAssistantEnabled = useIsAIAssistantEnabled();
-	const isDrawerOpen = useAIAssistantStore((state) => state.isDrawerOpen);
-	const isModalOpen = useAIAssistantStore((state) => state.isModalOpen);
-	const pendingUserInputCount = useAIAssistantStore(
-		selectPendingUserInputStreamCount,
-	);
-
-	// Noz is already on screen in the modal, so the "needs you" dot would be noise.
-	const showPendingBadge = pendingUserInputCount > 0 && !isModalOpen;
-
-	// The drawer does not render on the Noz full page, so the button would be inert.
-	const isAIAssistantPage = pathname.startsWith(ROUTES.AI_ASSISTANT_BASE);
-
-	if (!isAIAssistantEnabled || isDrawerOpen || isAIAssistantPage) {
-		return null;
-	}
-
-	return (
-		<div className={styles.askNoz} data-testid="bottom-strip-ask-noz">
-			{showPendingBadge && (
-				<span className={styles.badge} aria-hidden>
-					<span className={styles.pulseDot}>
-						<Dot size={36} />
-					</span>
-				</span>
-			)}
-			<TooltipSimple title={NOZ_TOOLTIP_TITLE}>
-				<Button
-					variant="ghost"
-					color="secondary"
-					size="sm"
-					className="noz-wave"
-					prefix={<Noz size={16} />}
-					onClick={(): void => openAIAssistant()}
-					aria-label={
-						showPendingBadge
-							? `Ask Noz, ${pendingUserInputCount} ${
-									pendingUserInputCount === 1 ? 'action needs' : 'actions need'
-								} your response`
-							: 'Ask Noz'
-					}
-				>
-					Ask Noz
-				</Button>
-			</TooltipSimple>
-		</div>
-	);
-}
-
-export default AskNoz;

frontend/src/container/BottomStrip/AskNoz/__tests__/AskNoz.test.tsx

@@ -1,133 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { openAIAssistant } from 'container/AIAssistant/store/useAIAssistantStore';
-import { useIsAIAssistantEnabled } from 'hooks/useIsAIAssistantEnabled';
-import { render } from 'tests/test-utils';
-
-import AskNoz from '../AskNoz';
-
-jest.mock('hooks/useIsAIAssistantEnabled');
-jest.mock('container/AIAssistant/store/useAIAssistantStore', () => ({
-	openAIAssistant: jest.fn(),
-	useAIAssistantStore: jest.fn(),
-}));
-
-const mockEnabled = useIsAIAssistantEnabled as jest.MockedFunction<
-	typeof useIsAIAssistantEnabled
->;
-const mockOpen = openAIAssistant as jest.MockedFunction<typeof openAIAssistant>;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const { useAIAssistantStore } = jest.requireMock(
-	'container/AIAssistant/store/useAIAssistantStore',
-) as { useAIAssistantStore: jest.Mock };
-
-/** The component reads the store through three separate selector calls. */
-function mockStore({
-	isDrawerOpen = false,
-	isModalOpen = false,
-	pendingCount = 0,
-}: {
-	isDrawerOpen?: boolean;
-	isModalOpen?: boolean;
-	pendingCount?: number;
-} = {}): void {
-	const state = { isDrawerOpen, isModalOpen, streams: {} };
-	useAIAssistantStore.mockImplementation((selector: (s: unknown) => unknown) => {
-		const picked = selector(state);
-		// `selectPendingUserInputStreamCount` walks `streams`, which is empty here,
-		// so stand in the count we want to assert against.
-		return typeof picked === 'number' ? pendingCount : picked;
-	});
-}
-
-// `TooltipSimple` replaces its trigger's props, so the testId lives on the
-// wrapper and the button itself is reached by role — there is only ever one.
-const SLOT = 'bottom-strip-ask-noz';
-
-describe('AskNoz', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockEnabled.mockReturnValue(true);
-		mockStore();
-	});
-
-	describe('visibility', () => {
-		it('renders when the assistant is enabled', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toBeInTheDocument();
-		});
-
-		it('renders nothing when the assistant is disabled', () => {
-			mockEnabled.mockReturnValue(false);
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing while the drawer is open', () => {
-			mockStore({ isDrawerOpen: true });
-
-			const { queryByTestId } = render(<AskNoz />);
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-
-		it('renders nothing on the Noz full page, where the drawer does not mount', () => {
-			const { queryByTestId } = render(<AskNoz />, undefined, {
-				initialRoute: '/ai-assistant/some-conversation-id',
-			});
-
-			expect(queryByTestId(SLOT)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('what it does', () => {
-		it('opens the drawer on click', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			fireEvent.click(getByRole('button'));
-
-			expect(mockOpen).toHaveBeenCalledTimes(1);
-		});
-	});
-
-	describe('pending badge', () => {
-		it('announces the count when Noz is waiting on the user', () => {
-			mockStore({ pendingCount: 2 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 2 actions need your response',
-			);
-		});
-
-		it('uses the singular for one pending action', () => {
-			mockStore({ pendingCount: 1 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute(
-				'aria-label',
-				'Ask Noz, 1 action needs your response',
-			);
-		});
-
-		it('stays quiet when nothing is pending', () => {
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-
-		it('stays quiet while the modal is open, Noz is already on screen', () => {
-			mockStore({ isModalOpen: true, pendingCount: 3 });
-
-			const { getByRole } = render(<AskNoz />);
-
-			expect(getByRole('button')).toHaveAttribute('aria-label', 'Ask Noz');
-		});
-	});
-});

frontend/src/container/BottomStrip/BottomStrip.module.scss

@@ -1,46 +0,0 @@
-.strip {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 12px;
-
-	flex-shrink: 0;
-	height: var(--bottom-strip-height);
-	padding: 0 12px;
-
-	background: var(--l2-background);
-	border-top: 1px solid var(--l2-border);
-
-	--button-font-size: 12px;
-
-	// font styles
-	font-family: var(--font-family-sf-mono, monospace);
-	font-size: 13px;
-	font-weight: var(--font-weight-normal);
-	line-height: var(--line-height-none);
-
-	// Above page content, below the body-portalled overlays that are meant to
-	// cover the strip.
-	position: relative;
-	z-index: 1;
-}
-
-.left,
-.right {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	min-width: 0;
-}
-
-.left {
-	cursor: default;
-}
-
-// Temporary placeholder for the left slot. Replaced later.
-.version {
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

frontend/src/container/BottomStrip/LeftSlot/LeftSlot.tsx

@@ -1,29 +0,0 @@
-import * as Sentry from '@sentry/react';
-import { useAppContext } from 'providers/App/App';
-
-import StripTypography from '../components/StripTypography/StripTypography';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-
-function LeftSlot(): JSX.Element | null {
-	const { versionData } = useAppContext();
-	const left = useBottomStripStore((state) => state.left);
-	const ownerId = useBottomStripStore((state) => state.ownerId);
-	const version = versionData?.version?.trim();
-	const versionNode = version ? (
-		<StripTypography>{version}</StripTypography>
-	) : null;
-
-	if (!left) {
-		return versionNode;
-	}
-
-	return (
-		// Keyed so a page whose node threw does not leave the boundary latched on
-		// the fallback for every page after it.
-		<Sentry.ErrorBoundary key={ownerId} fallback={<>{versionNode}</>}>
-			{left}
-		</Sentry.ErrorBoundary>
-	);
-}
-
-export default LeftSlot;

frontend/src/container/BottomStrip/SupportButton/SupportButton.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@signozhq/ui/button';
-import AddCreditCardModal from 'components/AddCreditCardModal/AddCreditCardModal';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { MessageSquareText } from '@signozhq/icons';
-
-function SupportButton(): JSX.Element | null {
-	const chatSupport = useChatSupport();
-	const [isAddCreditCardModalOpen, setIsAddCreditCardModalOpen] =
-		useState(false);
-
-	if (chatSupport === ChatSupportState.Unavailable) {
-		return null;
-	}
-
-	const handleClick = (): void => {
-		if (chatSupport === ChatSupportState.NeedsCard) {
-			setIsAddCreditCardModalOpen(true);
-			return;
-		}
-		window.Pylon?.('show');
-	};
-
-	return (
-		<>
-			<Button
-				variant="ghost"
-				color="secondary"
-				size="sm"
-				prefix={<MessageSquareText size={16} />}
-				onClick={handleClick}
-				testId="bottom-strip-support"
-			>
-				Support
-			</Button>
-
-			<AddCreditCardModal
-				open={isAddCreditCardModalOpen}
-				onClose={(): void => setIsAddCreditCardModalOpen(false)}
-			/>
-		</>
-	);
-}
-
-export default SupportButton;

frontend/src/container/BottomStrip/SupportButton/__tests__/SupportButton.test.tsx

@@ -1,81 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { ChatSupportState, useChatSupport } from 'hooks/useChatSupport';
-import { render } from 'tests/test-utils';
-
-import SupportButton from '../SupportButton';
-
-jest.mock('hooks/useChatSupport', () => ({
-	...jest.requireActual('hooks/useChatSupport'),
-	useChatSupport: jest.fn(),
-}));
-
-const mockChatSupport = useChatSupport as jest.MockedFunction<
-	typeof useChatSupport
->;
-
-const BUTTON = 'bottom-strip-support';
-const MODAL_TITLE = 'Add Credit Card for Chat Support';
-
-describe('SupportButton', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		window.Pylon = jest.fn() as never;
-	});
-
-	describe('when Pylon is available', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.Pylon));
-
-		it('shows the button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the Pylon widget on click', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(window.Pylon).toHaveBeenCalledWith('show');
-		});
-
-		it('does not open the credit card modal', () => {
-			const { getByTestId, queryByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(queryByText(MODAL_TITLE)).not.toBeInTheDocument();
-		});
-	});
-
-	describe('when the user needs a card', () => {
-		beforeEach(() => mockChatSupport.mockReturnValue(ChatSupportState.NeedsCard));
-
-		it('shows the same button', () => {
-			const { getByTestId } = render(<SupportButton />);
-
-			expect(getByTestId(BUTTON)).toBeInTheDocument();
-		});
-
-		it('opens the credit card modal on click, not Pylon', () => {
-			const { getByTestId, getByText } = render(<SupportButton />);
-
-			fireEvent.click(getByTestId(BUTTON));
-
-			expect(getByText(MODAL_TITLE)).toBeInTheDocument();
-			expect(window.Pylon).not.toHaveBeenCalled();
-		});
-	});
-
-	describe('when support is unavailable', () => {
-		beforeEach(() =>
-			mockChatSupport.mockReturnValue(ChatSupportState.Unavailable),
-		);
-
-		it('renders nothing at all', () => {
-			const { queryByTestId } = render(<SupportButton />);
-
-			expect(queryByTestId(BUTTON)).not.toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/BottomStrip/__tests__/BottomStrip.test.tsx

@@ -1,165 +0,0 @@
-import { type ReactNode, useState } from 'react';
-import { fireEvent } from '@testing-library/react';
-import { render } from 'tests/test-utils';
-import { Info } from 'types/api/v1/version/get';
-
-import BottomStrip, {
-	BOTTOM_STRIP_HEIGHT,
-	BOTTOM_STRIP_HEIGHT_VAR,
-	BOTTOM_STRIP_ON_CLASS,
-} from '..';
-import { useBottomStripStore } from '../store/useBottomStripStore';
-import { useBottomStripLeft } from '../useBottomStripLeft';
-
-/** Stands in for a page that puts something on the left of the strip. */
-function Page({ children }: { children: ReactNode }): null {
-	useBottomStripLeft(children);
-	return null;
-}
-
-/** A page whose value changes without needing `rerender`. */
-function ChangingPage(): JSX.Element {
-	const [count, setCount] = useState(600);
-
-	useBottomStripLeft(`${count} traces`);
-
-	return (
-		<button type="button" onClick={(): void => setCount(42)}>
-			change
-		</button>
-	);
-}
-
-/** A page node that blows up while the strip renders it. */
-function Boom(): JSX.Element {
-	throw new Error('bad left node');
-}
-
-const VERSION = 'v0.134.67';
-const versionData: Info = { version: VERSION, ee: 'Y', setupCompleted: true };
-const withVersion = { appContextOverrides: { versionData } };
-
-describe('BottomStrip', () => {
-	// The store is module level, so it outlives each test.
-	beforeEach(() => {
-		useBottomStripStore.setState({ left: null, ownerId: null });
-	});
-
-	it('publishes the body class and height property while mounted', () => {
-		const { unmount } = render(<BottomStrip />);
-
-		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(true);
-		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
-			`${BOTTOM_STRIP_HEIGHT}px`,
-		);
-
-		unmount();
-
-		expect(document.body.classList.contains(BOTTOM_STRIP_ON_CLASS)).toBe(false);
-		expect(document.body.style.getPropertyValue(BOTTOM_STRIP_HEIGHT_VAR)).toBe(
-			'',
-		);
-	});
-
-	// The string is whatever the Go build injected, so it is rendered untouched —
-	// same as SideNav. Release tags carry the "v", local builds do not.
-	it.each([['v0.134.67'], ['main-64f1c2a']])(
-		'renders the build version %p exactly as given',
-		(version) => {
-			const { getByText } = render(<BottomStrip />, undefined, {
-				appContextOverrides: {
-					versionData: { version, ee: 'Y', setupCompleted: true },
-				},
-			});
-
-			expect(getByText(version)).toBeInTheDocument();
-		},
-	);
-
-	it('renders the strip without a version when none is available', () => {
-		const { getByTestId } = render(<BottomStrip />, undefined, {
-			appContextOverrides: { versionData: null },
-		});
-
-		const strip = getByTestId('bottom-strip');
-
-		expect(strip).toBeInTheDocument();
-		expect(strip).toHaveTextContent('');
-	});
-
-	// `tests/test-utils` builds its wrapper around the first `ui`, so `rerender`
-	// re-renders the original tree. These drive change through state and through
-	// separate trees instead, which the module-level store lets them share.
-	describe('left slot', () => {
-		it('shows what the page put there instead of the version', () => {
-			render(<Page>600 traces</Page>);
-			const { getByText, queryByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-			expect(queryByText(VERSION)).not.toBeInTheDocument();
-		});
-
-		it('falls back to the version once the page is gone', () => {
-			const page = render(<Page>600 traces</Page>);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			page.unmount();
-
-			expect(getByText(VERSION)).toBeInTheDocument();
-		});
-
-		it('updates when the page changes what it shows', () => {
-			render(<ChangingPage />);
-			const { getByText, getByRole } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByText('600 traces')).toBeInTheDocument();
-
-			fireEvent.click(getByRole('button', { name: 'change' }));
-
-			expect(getByText('42 traces')).toBeInTheDocument();
-		});
-
-		it('falls back to the version when the page node throws', () => {
-			// React logs the caught error, which is noise here.
-			const consoleError = jest
-				.spyOn(console, 'error')
-				.mockImplementation(() => {});
-
-			render(
-				<Page>
-					<Boom />
-				</Page>,
-			);
-			const { getByTestId, getByText } = render(
-				<BottomStrip />,
-				undefined,
-				withVersion,
-			);
-
-			expect(getByTestId('bottom-strip')).toBeInTheDocument();
-			expect(getByText(VERSION)).toBeInTheDocument();
-
-			consoleError.mockRestore();
-		});
-
-		it('keeps the new page value when the old page unmounts after it', () => {
-			// Navigation order: the next page mounts before the last one unmounts,
-			// so without the owner guard the outgoing page wipes the incoming value.
-			const pageA = render(<Page>page A</Page>);
-			render(<Page>page B</Page>);
-			const { getByText } = render(<BottomStrip />, undefined, withVersion);
-
-			pageA.unmount();
-
-			expect(getByText('page B')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.module.scss

@@ -1,15 +0,0 @@
-.separator {
-	flex-shrink: 0;
-	width: 1px;
-	height: 14px;
-	background: var(--l2-border);
-}
-
-// Strip items hide themselves by rendering null, which would otherwise leave a
-// separator dangling at an edge or two of them side by side. Collapsing them
-// here keeps the call sites free of visibility plumbing.
-.separator:first-child,
-.separator:last-child,
-.separator + .separator {
-	display: none;
-}

frontend/src/container/BottomStrip/components/StripSeparator/StripSeparator.tsx

@@ -1,7 +0,0 @@
-import styles from './StripSeparator.module.scss';
-
-function StripSeparator(): JSX.Element {
-	return <span className={styles.separator} aria-hidden />;
-}
-
-export default StripSeparator;

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.module.scss

@@ -1,10 +0,0 @@
-.stripTypography {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-
-	color: var(--l2-foreground);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

frontend/src/container/BottomStrip/components/StripTypography/StripTypography.tsx

@@ -1,34 +0,0 @@
-import type { ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-
-import styles from './StripTypography.module.scss';
-
-interface StripTypographyProps {
-	children: ReactNode;
-	/** Leading icon, aligned and spaced for you. Same shape as `Button`'s. */
-	prefix?: ReactNode;
-	className?: string;
-}
-
-/**
- * Everything the strip renders goes through this: the version, a plain count, or
- * an icon with a key and value. It owns the strip's type and alignment and
- * nothing else — how a consumer colours its own content is theirs.
- */
-function StripTypography({
-	children,
-	prefix,
-	className,
-}: StripTypographyProps): JSX.Element {
-	return (
-		<span className={cx(styles.stripTypography, className)}>
-			{prefix}
-			<Typography.Text as="span">{children}</Typography.Text>
-		</span>
-	);
-}
-
-StripTypography.defaultProps = { prefix: undefined, className: undefined };
-
-export default StripTypography;

frontend/src/container/BottomStrip/index.tsx

@@ -1,43 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-import AskNoz from './AskNoz/AskNoz';
-import LeftSlot from './LeftSlot/LeftSlot';
-import StripSeparator from './components/StripSeparator/StripSeparator';
-import SupportButton from './SupportButton/SupportButton';
-
-import styles from './BottomStrip.module.scss';
-
-export const BOTTOM_STRIP_HEIGHT = 24;
-
-export const BOTTOM_STRIP_ON_CLASS = 'bottom-strip-on';
-export const BOTTOM_STRIP_HEIGHT_VAR = '--bottom-strip-height';
-
-function BottomStrip(): JSX.Element {
-	useLayoutEffect(() => {
-		document.body.classList.add(BOTTOM_STRIP_ON_CLASS);
-		document.body.style.setProperty(
-			BOTTOM_STRIP_HEIGHT_VAR,
-			`${BOTTOM_STRIP_HEIGHT}px`,
-		);
-
-		return (): void => {
-			document.body.classList.remove(BOTTOM_STRIP_ON_CLASS);
-			document.body.style.removeProperty(BOTTOM_STRIP_HEIGHT_VAR);
-		};
-	}, []);
-
-	return (
-		<div className={styles.strip} data-testid="bottom-strip">
-			<div className={styles.left}>
-				<LeftSlot />
-			</div>
-			<div className={styles.right}>
-				<AskNoz />
-				<StripSeparator />
-				<SupportButton />
-			</div>
-		</div>
-	);
-}
-
-export default BottomStrip;

frontend/src/container/BottomStrip/store/useBottomStripStore.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from 'react';
-import { create } from 'zustand';
-
-interface BottomStripState {
-	/** What the strip shows on the left, or null to fall back to the version. */
-	left: ReactNode | null;
-	/** Which page owns the current value — see `clearLeft`. */
-	ownerId: string | null;
-	setLeft: (ownerId: string, left: ReactNode) => void;
-	clearLeft: (ownerId: string) => void;
-}
-
-export const useBottomStripStore = create<BottomStripState>()((set, get) => ({
-	left: null,
-	ownerId: null,
-	setLeft: (ownerId, left): void => set({ left, ownerId }),
-	// Only the current owner may clear. On a plain route swap React runs the old
-	// page's cleanup before the new page's effect, so this is moot, but two
-	// consumers can be mounted at once (a page under a drawer): the one that set
-	// last owns the slot, and the other unmounting must not wipe it.
-	clearLeft: (ownerId): void => {
-		if (get().ownerId === ownerId) {
-			set({ left: null, ownerId: null });
-		}
-	},
-}));

frontend/src/container/BottomStrip/useBottomStripLeft.ts

@@ -1,23 +0,0 @@
-import { type ReactNode, useEffect, useId } from 'react';
-
-import { useBottomStripStore } from './store/useBottomStripStore';
-
-/**
- * Puts `node` on the left of the bottom strip for as long as the calling page is
- * mounted. Pass null to show nothing and let the version through.
- *
- * There is no refresh API by design: a page that refetches re-renders, which
- * produces a new node, which re-runs this effect. Wrap the node in `useMemo`
- * keyed on the values it shows, or the store is written on every render.
- */
-export function useBottomStripLeft(node: ReactNode | null): void {
-	const ownerId = useId();
-	const setLeft = useBottomStripStore((state) => state.setLeft);
-	const clearLeft = useBottomStripStore((state) => state.clearLeft);
-
-	useEffect(() => {
-		setLeft(ownerId, node);
-
-		return (): void => clearLeft(ownerId);
-	}, [node, ownerId, setLeft, clearLeft]);
-}

frontend/src/container/CreateAlertV2/Footer/styles.scss

@@ -1,8 +1,6 @@
 .create-alert-v2-footer {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0;
 	left: 63px;
 	right: 0;
 	background-color: var(--l1-background);

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -1,8 +1,6 @@
 .explorer-options-container {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0px;
 	left: calc(50% + 240px);
 	transform: translate(calc(-50% - 120px), 0);
 	transition: left 0.2s linear;

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -1,8 +1,6 @@
 .explorer-option-droppable-container {
 	position: fixed;
-	// Lifted above the bottom strip. Don't extend this pattern — new fixed-bottom
-	// UI belongs in the bounded layout, not in another offset here.
-	bottom: var(--bottom-strip-height, 0px);
+	bottom: 0;
 	width: -webkit-fill-available;
 	height: 24px;
 	display: flex;

frontend/src/container/GantChart/GantChart.styles.scss

@@ -0,0 +1,16 @@
+.span-container {
+	.spanDetails {
+		position: absolute;
+		height: 50px;
+		padding: 8px;
+		min-width: 150px;
+		background: lightcyan;
+		color: black;
+		bottom: 24px;
+		left: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}

frontend/src/container/GantChart/Span/index.tsx

@@ -0,0 +1,96 @@
+import { useEffect } 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 { useIsDarkMode } from 'hooks/useDarkMode';
+import { useTimezone } from 'providers/Timezone';
+import { toFixed } from 'utils/toFixed';
+
+import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
+
+import '../GantChart.styles.scss';
+
+interface SpanLengthProps {
+	globalStart: number;
+	startTime: number;
+	name: string;
+	width: string;
+	leftOffset: string;
+	bgColor: string;
+	inMsCount: number;
+}
+
+function Span(props: SpanLengthProps): JSX.Element {
+	const { width, leftOffset, bgColor, inMsCount, startTime, name, globalStart } =
+		props;
+	const isDarkMode = useIsDarkMode();
+	const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
+
+	const { timezone } = useTimezone();
+
+	useEffect(() => {
+		document.documentElement.scrollTop = document.documentElement.clientHeight;
+		document.documentElement.scrollLeft = document.documentElement.clientWidth;
+	}, []);
+
+	const getContent = (): JSX.Element => {
+		const timeStamp = dayjs(startTime)
+			.tz(timezone.value)
+			.format(DATE_TIME_FORMATS.TIME_UTC_MS);
+		const startTimeInMs = startTime - globalStart;
+		return (
+			<div>
+				<Typography.Text style={{ marginBottom: '8px' }}>
+					{' '}
+					Duration : {inMsCount}
+				</Typography.Text>
+				<br />
+				<Typography.Text style={{ marginBottom: '8px' }}>
+					Start Time: {startTimeInMs}ms [{timeStamp}]{' '}
+				</Typography.Text>
+			</div>
+		);
+	};
+
+	return (
+		<SpanWrapper className="span-container">
+			<SpanLine
+				className="spanLine"
+				isDarkMode={isDarkMode}
+				bgColor={bgColor}
+				leftOffset={leftOffset}
+				width={width}
+			/>
+
+			<div>
+				<Popover
+					style={{
+						left: `${leftOffset}%`,
+					}}
+					title={name}
+					content={getContent()}
+					trigger="hover"
+					placement="left"
+					autoAdjustOverflow
+				>
+					<SpanBorder
+						className="spanTrack"
+						isDarkMode={isDarkMode}
+						bgColor={bgColor}
+						leftOffset={leftOffset}
+						width={width}
+					/>
+				</Popover>
+			</div>
+
+			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
+				time,
+				2,
+			)} ${timeUnitName}`}</SpanText>
+		</SpanWrapper>
+	);
+}
+
+export default Span;

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

@@ -0,0 +1,52 @@
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+interface Props {
+	width: string;
+	leftOffset: string;
+	bgColor: string;
+	isDarkMode: boolean;
+}
+
+export const SpanLine = styled.div<Props>`
+	width: ${({ leftOffset }): string => `${leftOffset}%`};
+	height: 0px;
+	border-bottom: 0.1px solid
+		${({ isDarkMode }): string => (isDarkMode ? '#303030' : '#c0c0c0')};
+	top: 50%;
+	position: absolute;
+`;
+
+export const SpanBorder = styled.div<Props>`
+	background: ${({ bgColor }): string => bgColor};
+	border-radius: 5px;
+	height: 0.625rem;
+	width: ${({ width }): string => `${width}%`};
+	left: ${({ leftOffset }): string => `${leftOffset}%`};
+	top: 35%;
+	position: absolute;
+`;
+
+export const SpanWrapper = styled.div`
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+	align-items: center;
+	position: relative;
+	z-index: 2;
+	min-height: 2rem;
+`;
+interface SpanTextProps extends Pick<Props, 'leftOffset'> {
+	isDarkMode: boolean;
+}
+
+export const SpanText = styled(Typography.Text)<SpanTextProps>`
+	&&& {
+		left: ${({ leftOffset }): string => `${leftOffset}%`};
+		top: 65%;
+		position: absolute;
+		width: max-content;
+		color: ${({ isDarkMode }): string => (isDarkMode ? '#ACACAC' : '#666')};
+		font-size: 0.75rem;
+	}
+`;

frontend/src/container/GantChart/SpanName/index.tsx

@@ -0,0 +1,22 @@
+import { Container, Service, Span, SpanWrapper } from './styles';
+
+function SpanNameComponent({
+	name,
+	serviceName,
+}: SpanNameComponentProps): JSX.Element {
+	return (
+		<Container title={`${name} ${serviceName}`}>
+			<SpanWrapper>
+				<Span truncate={1}>{name}</Span>
+				<Service truncate={1}>{serviceName}</Service>
+			</SpanWrapper>
+		</Container>
+	);
+}
+
+interface SpanNameComponentProps {
+	name: string;
+	serviceName: string;
+}
+
+export default SpanNameComponent;

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

@@ -0,0 +1,41 @@
+import { Typography } from '@signozhq/ui/typography';
+import styled from 'styled-components';
+
+export const Span = styled(Typography.Text)`
+	&&& {
+		font-size: 0.75rem;
+		margin: 0;
+		/* border-bottom: 1px solid grey; */
+	}
+`;
+
+export const Service = styled(Typography.Text)`
+	&&& {
+		color: #acacac;
+		font-size: 0.75rem;
+	}
+`;
+
+export const SpanWrapper = styled.div`
+	display: flex;
+	flex-direction: column;
+	margin-left: 0.625rem;
+	width: 10rem;
+`;
+
+export const SpanConnector = styled.div`
+	width: 37px;
+	border: 1px solid #303030;
+	height: 0;
+`;
+
+export const Container = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+`;
+
+export const SpanName = styled.div`
+	width: fit-content;
+	border-bottom: 1px solid black;
+`;

frontend/src/container/GantChart/Trace/index.tsx

@@ -0,0 +1,233 @@
+import {
+	Dispatch,
+	MouseEventHandler,
+	SetStateAction,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Col } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { StyledCol, StyledRow } from 'components/Styled';
+import {
+	IIntervalUnit,
+	SPAN_DETAILS_LEFT_COL_WIDTH,
+} from 'container/TraceDetail/utils';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { ITraceTree } from 'types/api/trace/getTraceItem';
+
+import { ITraceMetaData } from '..';
+import Span from '../Span';
+import SpanName from '../SpanName';
+import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils';
+import {
+	CardComponent,
+	CardContainer,
+	CaretContainer,
+	HoverCard,
+	styles,
+	Wrapper,
+} from './styles';
+import { getIconStyles } from './utils';
+
+function Trace(props: TraceProps): JSX.Element {
+	const {
+		name,
+		activeHoverId,
+		setActiveHoverId,
+		globalSpread,
+		globalStart,
+		serviceName,
+		startTime,
+		value,
+		serviceColour,
+		id,
+		setActiveSelectedId,
+		activeSelectedId,
+		level,
+		activeSpanPath,
+		isExpandAll,
+		intervalUnit,
+		children,
+		isMissing,
+	} = props;
+
+	const isDarkMode = useIsDarkMode();
+
+	const [isOpen, setOpen] = useState<boolean>(activeSpanPath[level] === id);
+
+	const localTreeExpandInteraction = useRef<boolean | 0>(0); // Boolean is for the state of the expansion whereas the number i.e. 0 is for skipping the user interaction.
+
+	useEffect(() => {
+		if (localTreeExpandInteraction.current !== 0) {
+			setOpen(localTreeExpandInteraction.current);
+			localTreeExpandInteraction.current = 0;
+		} else if (!isOpen) {
+			setOpen(activeSpanPath[level] === id);
+		}
+	}, [activeSpanPath, isOpen, id, level]);
+
+	useEffect(() => {
+		if (isExpandAll) {
+			setOpen(isExpandAll);
+		} else {
+			setOpen(activeSpanPath[level] === id);
+		}
+	}, [isExpandAll, activeSpanPath, id, level]);
+
+	const isOnlyChild = children.length === 1;
+	const [top, setTop] = useState<number>(0);
+
+	const ref = useRef<HTMLUListElement>(null);
+
+	useEffect(() => {
+		if (activeSelectedId === id) {
+			ref.current?.scrollIntoView({
+				block: 'nearest',
+				behavior: 'auto',
+				inline: 'nearest',
+			});
+		}
+	}, [activeSelectedId, id]);
+
+	const onMouseEnterHandler = (): void => {
+		setActiveHoverId(id);
+		if (ref.current) {
+			const { top } = getTopLeftFromBody(ref.current);
+			setTop(top);
+		}
+	};
+
+	const onMouseLeaveHandler = (): void => {
+		setActiveHoverId('');
+	};
+
+	const onClick = (): void => {
+		setActiveSelectedId(id);
+	};
+
+	const onClickTreeExpansion: MouseEventHandler<HTMLDivElement> = (
+		event,
+	): void => {
+		event.stopPropagation();
+		setOpen((state) => {
+			localTreeExpandInteraction.current = !isOpen;
+			return !state;
+		});
+	};
+	const { totalSpans } = getMetaDataFromSpanTree(props);
+
+	const inMsCount = value;
+	const nodeLeftOffset = ((startTime - globalStart) * 1e2) / globalSpread;
+	const width = (value * 1e2) / (globalSpread * 1e6);
+	const panelWidth = SPAN_DETAILS_LEFT_COL_WIDTH - level * (16 + 1) - 48;
+
+	const iconStyles = useMemo(() => getIconStyles(), []);
+
+	const icon = useMemo(
+		() =>
+			isOpen ? (
+				<ChevronDown size="md" style={iconStyles} />
+			) : (
+				<ChevronRight size="md" style={iconStyles} />
+			),
+		[isOpen, iconStyles],
+	);
+
+	return (
+		<Wrapper
+			onMouseEnter={onMouseEnterHandler}
+			onMouseLeave={onMouseLeaveHandler}
+			isOnlyChild={isOnlyChild}
+			ref={ref}
+			isDarkMode={isDarkMode}
+		>
+			<HoverCard
+				top={top}
+				isHovered={activeHoverId === id}
+				isSelected={activeSelectedId === id}
+				isDarkMode={isDarkMode}
+			/>
+
+			<CardContainer isMissing={isMissing} onClick={onClick}>
+				<StyledCol flex={`${panelWidth}px`} styledclass={[styles.overFlowHidden]}>
+					<StyledRow styledclass={[styles.flexNoWrap]}>
+						<Col>
+							{totalSpans !== 1 && (
+								<CardComponent
+									isOnlyChild={isOnlyChild}
+									isDarkMode={isDarkMode}
+									onClick={onClickTreeExpansion}
+								>
+									<Typography style={{ wordBreak: 'normal' }}>{totalSpans}</Typography>
+									<CaretContainer>{icon}</CaretContainer>
+								</CardComponent>
+							)}
+						</Col>
+						<Col>
+							<SpanName name={name} serviceName={serviceName} />
+						</Col>
+					</StyledRow>
+				</StyledCol>
+				<Col flex="1">
+					<Span
+						globalStart={globalStart}
+						startTime={startTime}
+						name={name}
+						leftOffset={nodeLeftOffset.toString()}
+						width={width.toString()}
+						bgColor={serviceColour}
+						inMsCount={inMsCount / 1e6}
+					/>
+				</Col>
+			</CardContainer>
+
+			{isOpen && (
+				<>
+					{children.map((child) => (
+						<Trace
+							key={child.id}
+							activeHoverId={activeHoverId}
+							setActiveHoverId={setActiveHoverId}
+							{...child}
+							globalSpread={globalSpread}
+							globalStart={globalStart}
+							setActiveSelectedId={setActiveSelectedId}
+							activeSelectedId={activeSelectedId}
+							level={level + 1}
+							activeSpanPath={activeSpanPath}
+							isExpandAll={isExpandAll}
+							intervalUnit={intervalUnit}
+							isMissing={child.isMissing}
+						/>
+					))}
+				</>
+			)}
+		</Wrapper>
+	);
+}
+
+Trace.defaultProps = {
+	isMissing: false,
+};
+
+interface ITraceGlobal {
+	globalSpread: ITraceMetaData['spread'];
+	globalStart: ITraceMetaData['globalStart'];
+}
+
+interface TraceProps extends ITraceTree, ITraceGlobal {
+	activeHoverId: string;
+	setActiveHoverId: Dispatch<SetStateAction<string>>;
+	setActiveSelectedId: Dispatch<SetStateAction<string>>;
+	activeSelectedId: string;
+	level: number;
+	activeSpanPath: string[];
+	isExpandAll: boolean;
+	intervalUnit: IIntervalUnit;
+	isMissing?: boolean;
+}
+
+export default Trace;

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

@@ -0,0 +1,113 @@
+import { volcano } from '@ant-design/colors';
+import styled, {
+	css,
+	DefaultTheme,
+	ThemedCssFunction,
+} from 'styled-components';
+
+interface Props {
+	isOnlyChild: boolean;
+}
+
+export const Wrapper = styled.ul<Props>`
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 0.5rem;
+	padding-top: 0.5rem;
+	position: relative;
+	z-index: 1;
+	ul {
+		border-left: ${({ isOnlyChild }): StyledCSS =>
+			isOnlyChild && 'none'} !important;
+
+		${({ isOnlyChild }): StyledCSS =>
+			isOnlyChild &&
+			css`
+				&:before {
+					border-left: 1px solid #434343;
+					display: inline-block;
+					content: '';
+					height: 54px;
+					position: absolute;
+					left: 0;
+					top: -35px;
+				}
+			`}
+	}
+`;
+
+export const CardContainer = styled.li<{ isMissing?: boolean }>`
+	display: flex;
+	width: 100%;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	z-index: 2;
+	${({ isMissing }): string =>
+		isMissing ? `border: 1px dashed ${volcano[6]} !important;` : ''}
+`;
+
+interface Props {
+	isDarkMode: boolean;
+}
+
+export type StyledCSS =
+	| ReturnType<ThemedCssFunction<DefaultTheme>>
+	| string
+	| false
+	| undefined;
+
+export const CardComponent = styled.div<Props>`
+	border: 1px solid
+		${({ isDarkMode }): StyledCSS => (isDarkMode ? '#434343' : '#333')};
+	box-sizing: border-box;
+	border-radius: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 1px 8px;
+	background: ${({ isDarkMode }): StyledCSS =>
+		isDarkMode ? '#1d1d1d' : '#ddd'};
+	height: 22px;
+`;
+
+export const CaretContainer = styled.span`
+	margin-left: 0.304rem;
+`;
+
+interface HoverCardProps {
+	isHovered: boolean;
+	isSelected: boolean;
+	top: number;
+	isDarkMode: boolean;
+}
+
+export const HoverCard = styled.div<HoverCardProps>`
+	display: ${({ isSelected, isHovered }): string =>
+		isSelected || isHovered ? 'block' : 'none'};
+	width: 200%;
+	background-color: ${({ isHovered, isDarkMode }): string => {
+		if (isHovered) {
+			return isDarkMode ? '#262626' : '#ddd';
+		}
+		return isDarkMode ? '#4f4f4f' : '#bbb';
+	}};
+	position: absolute;
+	top: 0;
+	left: -100%;
+	right: 0;
+	height: 3rem;
+	opacity: 0.5;
+`;
+
+const flexNoWrap = css`
+	flex-wrap: nowrap;
+`;
+
+const overFlowHidden = css`
+	overflow: hidden;
+`;
+
+export const styles = {
+	flexNoWrap,
+	overFlowHidden,
+};

frontend/src/container/GantChart/Trace/utils.ts

@@ -0,0 +1,3 @@
+export const getIconStyles = (): Record<string, string> => ({
+	color: 'var(--l1-foreground)',
+});

frontend/src/container/GantChart/index.tsx

@@ -0,0 +1,91 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { SquareMinus, SquarePlus } from '@signozhq/icons';
+import { IIntervalUnit } from 'container/TraceDetail/utils';
+import { ITraceTree } from 'types/api/trace/getTraceItem';
+
+import { CardContainer, CardWrapper, CollapseButton } from './styles';
+import Trace from './Trace';
+import { getSpanPath } from './utils';
+
+function GanttChart(props: GanttChartProps): JSX.Element {
+	const {
+		data,
+		traceMetaData,
+		activeHoverId,
+		setActiveHoverId,
+		activeSelectedId,
+		setActiveSelectedId,
+		spanId,
+		intervalUnit,
+	} = props;
+
+	const { globalStart, spread: globalSpread } = traceMetaData;
+
+	const [isExpandAll, setIsExpandAll] = useState<boolean>(false);
+	const [activeSpanPath, setActiveSpanPath] = useState<string[]>([]);
+
+	useEffect(() => {
+		setActiveSpanPath(getSpanPath(data, spanId));
+	}, [spanId, data]);
+
+	useEffect(() => {
+		setActiveSpanPath(getSpanPath(data, activeSelectedId));
+	}, [activeSelectedId, data]);
+
+	const handleCollapse = (): void => {
+		setIsExpandAll((prev) => !prev);
+	};
+	return (
+		<CardContainer>
+			<CollapseButton
+				onClick={handleCollapse}
+				title={isExpandAll ? 'Collapse All' : 'Expand All'}
+			>
+				{isExpandAll ? (
+					<SquareMinus size={16} style={{ color: 'var(--accent-primary)' }} />
+				) : (
+					<SquarePlus size={16} style={{ color: 'var(--accent-primary)' }} />
+				)}
+			</CollapseButton>
+			<CardWrapper>
+				<Trace
+					activeHoverId={activeHoverId}
+					activeSpanPath={activeSpanPath}
+					setActiveHoverId={setActiveHoverId}
+					key={data.id}
+					{...{
+						...data,
+						globalSpread,
+						globalStart,
+						setActiveSelectedId,
+						activeSelectedId,
+					}}
+					level={0}
+					isExpandAll={isExpandAll}
+					intervalUnit={intervalUnit}
+				/>
+			</CardWrapper>
+		</CardContainer>
+	);
+}
+
+export interface ITraceMetaData {
+	globalEnd: number;
+	globalStart: number;
+	levels: number;
+	spread: number;
+	totalSpans: number;
+}
+
+export interface GanttChartProps {
+	data: ITraceTree;
+	traceMetaData: ITraceMetaData;
+	activeSelectedId: string;
+	activeHoverId: string;
+	setActiveHoverId: Dispatch<SetStateAction<string>>;
+	setActiveSelectedId: Dispatch<SetStateAction<string>>;
+	spanId: string;
+	intervalUnit: IIntervalUnit;
+}
+
+export default GanttChart;

frontend/src/container/GantChart/styles.ts

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.ul`
+	padding-left: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+
+	ul {
+		list-style: none;
+		border-left: 1px solid #434343;
+		padding-left: 1rem;
+		width: 100%;
+		margin: 0px;
+	}
+
+	ul li {
+		position: relative;
+
+		&:before {
+			position: absolute;
+			left: -1rem;
+			top: 10px;
+			content: '';
+			height: 1px;
+			width: 1rem;
+			background-color: #434343;
+		}
+	}
+`;
+
+export const CardWrapper = styled.div`
+	display: flex;
+	width: 100%;
+	margin-left: 1rem;
+	margin-top: 1.5rem;
+`;
+
+export const CardContainer = styled.li`
+	display: flex;
+	width: 100%;
+	position: relative;
+`;
+
+export const CollapseButton = styled.div`
+	position: absolute;
+	top: 0;
+`;