fix: handle legacy alert type values on patch

docs/api/openapi.yml

@@ -2547,8 +2547,7 @@ components:
           format: double
           type: number
         meta:
-          additionalProperties:
-            type: string
+          additionalProperties: {}
           nullable: true
           type: object
         status:
@@ -2598,103 +2597,6 @@ components:
       - requiredMetricsCheck
       - endTimeBeforeRetention
       type: object
-    InframonitoringtypesNodeCondition:
-      enum:
-      - ready
-      - not_ready
-      - no_data
-      type: string
-    InframonitoringtypesNodeCountsByReadiness:
-      properties:
-        notReady:
-          type: integer
-        ready:
-          type: integer
-      required:
-      - ready
-      - notReady
-      type: object
-    InframonitoringtypesNodeRecord:
-      properties:
-        condition:
-          $ref: '#/components/schemas/InframonitoringtypesNodeCondition'
-        meta:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        nodeCPU:
-          format: double
-          type: number
-        nodeCPUAllocatable:
-          format: double
-          type: number
-        nodeCountsByReadiness:
-          $ref: '#/components/schemas/InframonitoringtypesNodeCountsByReadiness'
-        nodeMemory:
-          format: double
-          type: number
-        nodeMemoryAllocatable:
-          format: double
-          type: number
-        nodeName:
-          type: string
-        podCountsByPhase:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
-      required:
-      - nodeName
-      - condition
-      - nodeCountsByReadiness
-      - podCountsByPhase
-      - nodeCPU
-      - nodeCPUAllocatable
-      - nodeMemory
-      - nodeMemoryAllocatable
-      - meta
-      type: object
-    InframonitoringtypesNodes:
-      properties:
-        endTimeBeforeRetention:
-          type: boolean
-        records:
-          items:
-            $ref: '#/components/schemas/InframonitoringtypesNodeRecord'
-          nullable: true
-          type: array
-        requiredMetricsCheck:
-          $ref: '#/components/schemas/InframonitoringtypesRequiredMetricsCheck'
-        total:
-          type: integer
-        type:
-          $ref: '#/components/schemas/InframonitoringtypesResponseType'
-        warning:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryWarnData'
-      required:
-      - type
-      - records
-      - total
-      - requiredMetricsCheck
-      - endTimeBeforeRetention
-      type: object
-    InframonitoringtypesPodCountsByPhase:
-      properties:
-        failed:
-          type: integer
-        pending:
-          type: integer
-        running:
-          type: integer
-        succeeded:
-          type: integer
-        unknown:
-          type: integer
-      required:
-      - pending
-      - running
-      - succeeded
-      - failed
-      - unknown
-      type: object
     InframonitoringtypesPodPhase:
       enum:
       - pending
@@ -2702,15 +2604,18 @@ components:
       - succeeded
       - failed
       - unknown
-      - no_data
+      - ""
       type: string
     InframonitoringtypesPodRecord:
       properties:
+        failedPodCount:
+          type: integer
         meta:
-          additionalProperties:
-            type: string
+          additionalProperties: {}
           nullable: true
           type: object
+        pendingPodCount:
+          type: integer
         podAge:
           format: int64
           type: integer
@@ -2723,8 +2628,6 @@ components:
         podCPURequest:
           format: double
           type: number
-        podCountsByPhase:
-          $ref: '#/components/schemas/InframonitoringtypesPodCountsByPhase'
         podMemory:
           format: double
           type: number
@@ -2738,6 +2641,12 @@ components:
           $ref: '#/components/schemas/InframonitoringtypesPodPhase'
         podUID:
           type: string
+        runningPodCount:
+          type: integer
+        succeededPodCount:
+          type: integer
+        unknownPodCount:
+          type: integer
       required:
       - podUID
       - podCPU
@@ -2747,7 +2656,11 @@ components:
       - podMemoryRequest
       - podMemoryLimit
       - podPhase
-      - podCountsByPhase
+      - pendingPodCount
+      - runningPodCount
+      - succeededPodCount
+      - failedPodCount
+      - unknownPodCount
       - podAge
       - meta
       type: object
@@ -2801,32 +2714,6 @@ components:
       - end
       - limit
       type: object
-    InframonitoringtypesPostableNodes:
-      properties:
-        end:
-          format: int64
-          type: integer
-        filter:
-          $ref: '#/components/schemas/Querybuildertypesv5Filter'
-        groupBy:
-          items:
-            $ref: '#/components/schemas/Querybuildertypesv5GroupByKey'
-          nullable: true
-          type: array
-        limit:
-          type: integer
-        offset:
-          type: integer
-        orderBy:
-          $ref: '#/components/schemas/Querybuildertypesv5OrderBy'
-        start:
-          format: int64
-          type: integer
-      required:
-      - start
-      - end
-      - limit
-      type: object
     InframonitoringtypesPostablePods:
       properties:
         end:
@@ -11731,83 +11618,12 @@ paths:
       summary: List Hosts for Infra Monitoring
       tags:
       - inframonitoring
-  /api/v2/infra_monitoring/nodes:
-    post:
-      deprecated: false
-      description: 'Returns a paginated list of Kubernetes nodes with key metrics:
-        CPU usage, CPU allocatable, memory working set, memory allocatable, per-group
-        nodeCountsByReadiness ({ ready, notReady } from each node''s latest k8s.node.condition_ready
-        in the window) and per-group podCountsByPhase ({ pending, running, succeeded,
-        failed, unknown } for pods scheduled on the listed nodes). Each node includes
-        metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is
-        ''list'' for the default k8s.node.name grouping (each row is one node with
-        its current condition string: ready / not_ready / no_data) or ''grouped_list''
-        for custom groupBy keys (each row aggregates nodes in the group; condition
-        stays no_data). Supports filtering via a filter expression, custom groupBy,
-        ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination
-        via offset/limit. Also reports missing required metrics and whether the requested
-        time range falls before the data retention boundary. Numeric metric fields
-        (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1
-        as a sentinel when no data is available for that field.'
-      operationId: ListNodes
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/InframonitoringtypesPostableNodes'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/InframonitoringtypesNodes'
-                  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
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: List Nodes for Infra Monitoring
-      tags:
-      - inframonitoring
   /api/v2/infra_monitoring/pods:
     post:
       deprecated: false
       description: 'Returns a paginated list of Kubernetes pods with key metrics:
         CPU usage, CPU request/limit utilization, memory working set, memory request/limit
-        utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data),
+        utilization, current pod phase (pending/running/succeeded/failed/unknown),
         and pod age (ms since start time). Each pod includes metadata attributes (namespace,
         node, workload owner such as deployment/statefulset/daemonset/job/cronjob,
         cluster). Supports filtering via a filter expression, custom groupBy to aggregate
@@ -11815,13 +11631,13 @@ paths:
         cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit.
         The response type is ''list'' for the default k8s.pod.uid grouping (each row
         is one pod with its current phase) or ''grouped_list'' for custom groupBy
-        keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase:
-        { pending, running, succeeded, failed, unknown } derived from each pod''s
-        latest phase in the window). Also reports missing required metrics and whether
-        the requested time range falls before the data retention boundary. Numeric
-        metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest,
-        podMemoryLimit, podAge) return -1 as a sentinel when no data is available
-        for that field.'
+        keys (each row aggregates pods in the group with per-phase counts: pendingPodCount,
+        runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived
+        from each pod''s latest phase in the window). Also reports missing required
+        metrics and whether the requested time range falls before the data retention
+        boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory,
+        podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no
+        data is available for that field.'
       operationId: ListPods
       requestBody:
         content:

frontend/.oxlintrc.json

@@ -289,8 +289,6 @@
     // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
     "signoz/no-raw-absolute-path": "error",
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
-    "signoz/no-antd-components": "error",
-    // Prevents the usage of specific antd components in favor of our lib
     "no-restricted-globals": [
       "error",
       {

frontend/package.json

@@ -50,7 +50,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.1.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.17",
+    "@signozhq/ui": "0.0.12",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -120,12 +120,10 @@
     "react-helmet-async": "1.3.0",
     "react-hook-form": "7.71.2",
     "react-i18next": "^11.16.1",
-    "react-json-tree": "^0.20.0",
     "react-lottie": "1.2.10",
     "react-markdown": "8.0.7",
     "react-query": "3.39.3",
     "react-redux": "^7.2.2",
-    "react-rnd": "^10.5.3",
     "react-router-dom": "^5.2.0",
     "react-router-dom-v5-compat": "6.27.0",
     "react-syntax-highlighter": "15.5.0",
@@ -241,12 +239,10 @@
   },
   "lint-staged": {
     "*.(js|jsx|ts|tsx)": [
+      "oxlint --fix",
+      "oxfmt --write",
       "sh -c tsgo --noEmit"
     ],
-    "*.(js|jsx|ts|tsx|scss|css)": [
-      "oxlint --fix --quiet --no-error-on-unmatched-pattern",
-      "oxfmt --write"
-    ],
     "*.(scss|css)": [
       "stylelint"
     ]

frontend/plugins/rules/no-antd-components.mjs

@@ -1,66 +0,0 @@
-/**
- * Rule: no-antd-components
- *
- * Prevents importing specific components from antd.
- *
- * This rule catches patterns like:
- *   import { Typography } from 'antd'
- *   import { Typography, Button } from 'antd'
- *   import Typography from 'antd/es/typography'
- *   import { Text } from 'antd/es/typography'
- *
- * Add components to BANNED_COMPONENTS to ban them.
- * Key should be PascalCase component name, will match lowercase path too.
- */
-
-const BANNED_COMPONENTS = {
-	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
-};
-
-export default {
-	create(context) {
-		return {
-			ImportDeclaration(node) {
-				const source = node.source.value;
-
-				// Check direct antd import: import { Typography } from 'antd'
-				if (source === 'antd') {
-					for (const specifier of node.specifiers) {
-						if (specifier.type !== 'ImportSpecifier') {
-							continue;
-						}
-
-						const importedName = specifier.imported.name;
-						const message = BANNED_COMPONENTS[importedName];
-
-						if (message) {
-							context.report({
-								node: specifier,
-								message: `Do not import '${importedName}' from antd. ${message}`,
-							});
-						}
-					}
-					return;
-				}
-
-				// Check antd/es/<component> import: import Typography from 'antd/es/typography'
-				const match = source.match(/^antd\/es\/([^/]+)/);
-				if (!match) {
-					return;
-				}
-
-				const pathComponent = match[1].toLowerCase();
-
-				for (const [componentName, message] of Object.entries(BANNED_COMPONENTS)) {
-					if (pathComponent === componentName.toLowerCase()) {
-						context.report({
-							node,
-							message: `Do not import from '${source}'. ${message}`,
-						});
-						break;
-					}
-				}
-			},
-		};
-	},
-};

frontend/plugins/signoz.mjs

@@ -9,7 +9,6 @@ import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
 import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
-import noAntdComponents from './rules/no-antd-components.mjs';
 
 export default {
 	meta: {
@@ -20,6 +19,5 @@ export default {
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
 		'no-raw-absolute-path': noRawAbsolutePath,
-		'no-antd-components': noAntdComponents,
 	},
 };

frontend/src/AppRoutes/pageComponents.ts

@@ -65,13 +65,6 @@ export const TraceDetail = Loadable(
 		),
 );
 
-export const TraceDetailV3 = Loadable(
-	() =>
-		import(
-			/* webpackChunkName: "TraceDetailV3 Page" */ 'pages/TraceDetailV3Page/index'
-		),
-);
-
 export const UsageExplorerPage = Loadable(
 	() => import(/* webpackChunkName: "UsageExplorerPage" */ 'modules/Usage'),
 );

frontend/src/AppRoutes/routes.ts

@@ -48,7 +48,6 @@ import {
 	StatusPage,
 	SupportPage,
 	TraceDetail,
-	TraceDetailV3,
 	TraceFilter,
 	TracesExplorer,
 	TracesFunnelDetails,
@@ -139,9 +138,6 @@ const routes: AppRoutes[] = [
 		exact: true,
 		key: 'LOGS_SAVE_VIEWS',
 	},
-	// V3 trace details is gated until release: /trace serves V2 (public),
-	// /trace-old serves V3 (URL-only access). Flip the two `component`
-	// values back to release V3.
 	{
 		path: ROUTES.TRACE_DETAIL,
 		exact: true,
@@ -149,13 +145,6 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'TRACE_DETAIL',
 	},
-	{
-		path: ROUTES.TRACE_DETAIL_OLD,
-		exact: true,
-		component: TraceDetailV3,
-		isPrivate: true,
-		key: 'TRACE_DETAIL_OLD',
-	},
 	{
 		path: ROUTES.SETTINGS,
 		exact: false,

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

@@ -13,10 +13,8 @@ import type {
 
 import type {
 	InframonitoringtypesPostableHostsDTO,
-	InframonitoringtypesPostableNodesDTO,
 	InframonitoringtypesPostablePodsDTO,
 	ListHosts200,
-	ListNodes200,
 	ListPods200,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -109,91 +107,7 @@ export const useListHosts = <
 	return useMutation(mutationOptions);
 };
 /**
- * Returns a paginated list of Kubernetes nodes with key metrics: CPU usage, CPU allocatable, memory working set, memory allocatable, per-group nodeCountsByReadiness ({ ready, notReady } from each node's latest k8s.node.condition_ready in the window) and per-group podCountsByPhase ({ pending, running, succeeded, failed, unknown } for pods scheduled on the listed nodes). Each node includes metadata attributes (k8s.node.uid, k8s.cluster.name). The response type is 'list' for the default k8s.node.name grouping (each row is one node with its current condition string: ready / not_ready / no_data) or 'grouped_list' for custom groupBy keys (each row aggregates nodes in the group; condition stays no_data). Supports filtering via a filter expression, custom groupBy, ordering by cpu / cpu_allocatable / memory / memory_allocatable, and pagination via offset/limit. Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (nodeCPU, nodeCPUAllocatable, nodeMemory, nodeMemoryAllocatable) return -1 as a sentinel when no data is available for that field.
- * @summary List Nodes for Infra Monitoring
- */
-export const listNodes = (
-	inframonitoringtypesPostableNodesDTO: BodyType<InframonitoringtypesPostableNodesDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<ListNodes200>({
-		url: `/api/v2/infra_monitoring/nodes`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: inframonitoringtypesPostableNodesDTO,
-		signal,
-	});
-};
-
-export const getListNodesMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listNodes>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof listNodes>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-	TContext
-> => {
-	const mutationKey = ['listNodes'];
-	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 listNodes>>,
-		{ data: BodyType<InframonitoringtypesPostableNodesDTO> }
-	> = (props) => {
-		const { data } = props ?? {};
-
-		return listNodes(data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type ListNodesMutationResult = NonNullable<
-	Awaited<ReturnType<typeof listNodes>>
->;
-export type ListNodesMutationBody =
-	BodyType<InframonitoringtypesPostableNodesDTO>;
-export type ListNodesMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary List Nodes for Infra Monitoring
- */
-export const useListNodes = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof listNodes>>,
-		TError,
-		{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof listNodes>>,
-	TError,
-	{ data: BodyType<InframonitoringtypesPostableNodesDTO> },
-	TContext
-> => {
-	const mutationOptions = getListNodesMutationOptions(options);
-
-	return useMutation(mutationOptions);
-};
-/**
- * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown/no_data), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts under podCountsByPhase: { pending, running, succeeded, failed, unknown } derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
+ * Returns a paginated list of Kubernetes pods with key metrics: CPU usage, CPU request/limit utilization, memory working set, memory request/limit utilization, current pod phase (pending/running/succeeded/failed/unknown), and pod age (ms since start time). Each pod includes metadata attributes (namespace, node, workload owner such as deployment/statefulset/daemonset/job/cronjob, cluster). Supports filtering via a filter expression, custom groupBy to aggregate pods by any attribute, ordering by any of the six metrics (cpu, cpu_request, cpu_limit, memory, memory_request, memory_limit), and pagination via offset/limit. The response type is 'list' for the default k8s.pod.uid grouping (each row is one pod with its current phase) or 'grouped_list' for custom groupBy keys (each row aggregates pods in the group with per-phase counts: pendingPodCount, runningPodCount, succeededPodCount, failedPodCount, unknownPodCount derived from each pod's latest phase in the window). Also reports missing required metrics and whether the requested time range falls before the data retention boundary. Numeric metric fields (podCPU, podCPURequest, podCPULimit, podMemory, podMemoryRequest, podMemoryLimit, podAge) return -1 as a sentinel when no data is available for that field.
  * @summary List Pods for Infra Monitoring
  */
 export const listPods = (

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

@@ -4579,7 +4579,7 @@ export interface InframonitoringtypesHostFilterDTO {
  * @nullable
  */
 export type InframonitoringtypesHostRecordDTOMeta = {
-	[key: string]: string;
+	[key: string]: unknown;
 } | null;
 
 export interface InframonitoringtypesHostRecordDTO {
@@ -4652,127 +4652,35 @@ export interface InframonitoringtypesHostsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
-export enum InframonitoringtypesNodeConditionDTO {
-	ready = 'ready',
-	not_ready = 'not_ready',
-	no_data = 'no_data',
-}
-export interface InframonitoringtypesNodeCountsByReadinessDTO {
-	/**
-	 * @type integer
-	 */
-	notReady: number;
-	/**
-	 * @type integer
-	 */
-	ready: number;
-}
-
-/**
- * @nullable
- */
-export type InframonitoringtypesNodeRecordDTOMeta = {
-	[key: string]: string;
-} | null;
-
-export interface InframonitoringtypesNodeRecordDTO {
-	condition: InframonitoringtypesNodeConditionDTO;
-	/**
-	 * @type object
-	 * @nullable true
-	 */
-	meta: InframonitoringtypesNodeRecordDTOMeta;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeCPU: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeCPUAllocatable: number;
-	nodeCountsByReadiness: InframonitoringtypesNodeCountsByReadinessDTO;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeMemory: number;
-	/**
-	 * @type number
-	 * @format double
-	 */
-	nodeMemoryAllocatable: number;
-	/**
-	 * @type string
-	 */
-	nodeName: string;
-	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
-}
-
-export interface InframonitoringtypesNodesDTO {
-	/**
-	 * @type boolean
-	 */
-	endTimeBeforeRetention: boolean;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	records: InframonitoringtypesNodeRecordDTO[] | null;
-	requiredMetricsCheck: InframonitoringtypesRequiredMetricsCheckDTO;
-	/**
-	 * @type integer
-	 */
-	total: number;
-	type: InframonitoringtypesResponseTypeDTO;
-	warning?: Querybuildertypesv5QueryWarnDataDTO;
-}
-
-export interface InframonitoringtypesPodCountsByPhaseDTO {
-	/**
-	 * @type integer
-	 */
-	failed: number;
-	/**
-	 * @type integer
-	 */
-	pending: number;
-	/**
-	 * @type integer
-	 */
-	running: number;
-	/**
-	 * @type integer
-	 */
-	succeeded: number;
-	/**
-	 * @type integer
-	 */
-	unknown: number;
-}
-
 export enum InframonitoringtypesPodPhaseDTO {
 	pending = 'pending',
 	running = 'running',
 	succeeded = 'succeeded',
 	failed = 'failed',
 	unknown = 'unknown',
-	no_data = 'no_data',
+	'' = '',
 }
 /**
  * @nullable
  */
 export type InframonitoringtypesPodRecordDTOMeta = {
-	[key: string]: string;
+	[key: string]: unknown;
 } | null;
 
 export interface InframonitoringtypesPodRecordDTO {
+	/**
+	 * @type integer
+	 */
+	failedPodCount: number;
 	/**
 	 * @type object
 	 * @nullable true
 	 */
 	meta: InframonitoringtypesPodRecordDTOMeta;
+	/**
+	 * @type integer
+	 */
+	pendingPodCount: number;
 	/**
 	 * @type integer
 	 * @format int64
@@ -4793,7 +4701,6 @@ export interface InframonitoringtypesPodRecordDTO {
 	 * @format double
 	 */
 	podCPURequest: number;
-	podCountsByPhase: InframonitoringtypesPodCountsByPhaseDTO;
 	/**
 	 * @type number
 	 * @format double
@@ -4814,6 +4721,18 @@ export interface InframonitoringtypesPodRecordDTO {
 	 * @type string
 	 */
 	podUID: string;
+	/**
+	 * @type integer
+	 */
+	runningPodCount: number;
+	/**
+	 * @type integer
+	 */
+	succeededPodCount: number;
+	/**
+	 * @type integer
+	 */
+	unknownPodCount: number;
 }
 
 export interface InframonitoringtypesPodsDTO {
@@ -4863,34 +4782,6 @@ export interface InframonitoringtypesPostableHostsDTO {
 	start: number;
 }
 
-export interface InframonitoringtypesPostableNodesDTO {
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	end: number;
-	filter?: Querybuildertypesv5FilterDTO;
-	/**
-	 * @type array
-	 * @nullable true
-	 */
-	groupBy?: Querybuildertypesv5GroupByKeyDTO[] | null;
-	/**
-	 * @type integer
-	 */
-	limit: number;
-	/**
-	 * @type integer
-	 */
-	offset?: number;
-	orderBy?: Querybuildertypesv5OrderByDTO;
-	/**
-	 * @type integer
-	 * @format int64
-	 */
-	start: number;
-}
-
 export interface InframonitoringtypesPostablePodsDTO {
 	/**
 	 * @type integer
@@ -9242,14 +9133,6 @@ export type ListHosts200 = {
 	status: string;
 };
 
-export type ListNodes200 = {
-	data: InframonitoringtypesNodesDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type ListPods200 = {
 	data: InframonitoringtypesPodsDTO;
 	/**

frontend/src/api/trace/getTraceV3.tsx

@@ -1,72 +0,0 @@
-import { ApiV3Instance as axios } from 'api';
-import { omit } from 'lodash-es';
-import { ErrorResponse, SuccessResponse } from 'types/api';
-import {
-	GetTraceV3PayloadProps,
-	GetTraceV3SuccessResponse,
-	SpanV3,
-} from 'types/api/trace/getTraceV3';
-
-const getTraceV3 = async (
-	props: GetTraceV3PayloadProps,
-): Promise<SuccessResponse<GetTraceV3SuccessResponse> | ErrorResponse> => {
-	let uncollapsedSpans = [...props.uncollapsedSpans];
-	if (!props.isSelectedSpanIDUnCollapsed) {
-		uncollapsedSpans = uncollapsedSpans.filter(
-			(node) => node !== props.selectedSpanId,
-		);
-	} else if (
-		props.selectedSpanId &&
-		!uncollapsedSpans.includes(props.selectedSpanId)
-	) {
-		// V3 backend only uses uncollapsedSpans list (unlike V2 which also interprets
-		// isSelectedSpanIDUnCollapsed server-side), so explicitly add the selected span
-		uncollapsedSpans.push(props.selectedSpanId);
-	}
-	const postData: GetTraceV3PayloadProps = {
-		...props,
-		uncollapsedSpans,
-		limit: 10000,
-	};
-	const response = await axios.post<GetTraceV3SuccessResponse>(
-		`/traces/${props.traceId}/waterfall`,
-		omit(postData, 'traceId'),
-	);
-
-	// V3 API wraps response in { status, data }
-	const rawPayload = (response.data as any).data || response.data;
-
-	// Derive 'service.name' from resource for convenience — only derived field
-	const spans: SpanV3[] = (rawPayload.spans || []).map((span: any) => ({
-		...span,
-		'service.name': span.resource?.['service.name'] || '',
-	}));
-
-	// V3 API returns startTimestampMillis/endTimestampMillis as relative durations (ms from epoch offset),
-	// not absolute unix millis like V2. The span timestamps are absolute unix millis.
-	// Convert by using the first span's timestamp as the base if there's a mismatch.
-	let { startTimestampMillis, endTimestampMillis } = rawPayload;
-	if (
-		spans.length > 0 &&
-		spans[0].timestamp > 0 &&
-		startTimestampMillis < spans[0].timestamp / 10
-	) {
-		const durationMillis = endTimestampMillis - startTimestampMillis;
-		startTimestampMillis = spans[0].timestamp;
-		endTimestampMillis = startTimestampMillis + durationMillis;
-	}
-
-	return {
-		statusCode: 200,
-		error: null,
-		message: 'Success',
-		payload: {
-			...rawPayload,
-			spans,
-			startTimestampMillis,
-			endTimestampMillis,
-		},
-	};
-};
-
-export default getTraceV3;

frontend/src/components/AppLoading/AppLoading.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import get from 'api/browser/localstorage/get';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -14,8 +14,8 @@ import {
 	TableColumnsType,
 	TableColumnType,
 	Tooltip,
+	Typography,
 } from 'antd';
-import { Typography } from '@signozhq/ui';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -1,6 +1,5 @@
 import { useHistory, useLocation } from 'react-router-dom';
-import { Select, Spin } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Color, Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Divider, Drawer, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Card } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Card, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -554,9 +554,10 @@ function ClientSideQBSearch(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
+							ellipsis
 							$isInNin={isInNin}
+							disabled={isDisabled}
 							$isEnabled={!!searchValue}
-							$disabled={isDisabled}
 							onClick={(): void => {
 								if (!isDisabled) {
 									tagEditHandler(value);

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.styles.scss

@@ -1,37 +0,0 @@
-.details-header {
-	// ghost + secondary missing hover bg token in @signozhq/button
-	--button-ghost-hover-background: var(--l3-background);
-
-	box-sizing: border-box;
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 0 12px;
-	border-bottom: 1px solid var(--l1-border);
-	height: 36px;
-	background: var(--l2-background);
-
-	&__title {
-		font-size: 13px;
-		font-weight: 500;
-		color: var(--l1-foreground);
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&__actions {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		flex-shrink: 0;
-	}
-
-	&__nav {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-	}
-}

frontend/src/components/DetailsPanel/DetailsHeader/DetailsHeader.tsx

@@ -1,57 +0,0 @@
-import { ReactNode } from 'react';
-import { Button } from '@signozhq/ui';
-import { X } from '@signozhq/icons';
-
-import './DetailsHeader.styles.scss';
-
-export interface HeaderAction {
-	key: string;
-	component: ReactNode; // check later if we can use direct btn itself or not.
-}
-
-export interface DetailsHeaderProps {
-	title: string;
-	onClose: () => void;
-	actions?: HeaderAction[];
-	closePosition?: 'left' | 'right';
-	className?: string;
-}
-
-function DetailsHeader({
-	title,
-	onClose,
-	actions,
-	closePosition = 'right',
-	className,
-}: DetailsHeaderProps): JSX.Element {
-	const closeButton = (
-		<Button
-			variant="ghost"
-			size="icon"
-			color="secondary"
-			onClick={onClose}
-			aria-label="Close"
-			prefix={<X size={14} />}
-		></Button>
-	);
-
-	return (
-		<div className={`details-header ${className || ''}`}>
-			{closePosition === 'left' && closeButton}
-
-			<span className="details-header__title">{title}</span>
-
-			{actions && (
-				<div className="details-header__actions">
-					{actions.map((action) => (
-						<div key={action.key}>{action.component}</div>
-					))}
-				</div>
-			)}
-
-			{closePosition === 'right' && closeButton}
-		</div>
-	);
-}
-
-export default DetailsHeader;

frontend/src/components/DetailsPanel/DetailsPanelDrawer.styles.scss

@@ -1,7 +0,0 @@
-.details-panel-drawer {
-	&__body {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-	}
-}

frontend/src/components/DetailsPanel/DetailsPanelDrawer.tsx

@@ -1,35 +0,0 @@
-import { DrawerWrapper } from '@signozhq/ui';
-
-import './DetailsPanelDrawer.styles.scss';
-
-interface DetailsPanelDrawerProps {
-	isOpen: boolean;
-	onClose: () => void;
-	children: React.ReactNode;
-	className?: string;
-}
-
-function DetailsPanelDrawer({
-	isOpen,
-	onClose,
-	children,
-	className,
-}: DetailsPanelDrawerProps): JSX.Element {
-	return (
-		<DrawerWrapper
-			open={isOpen}
-			onOpenChange={(open): void => {
-				if (!open) {
-					onClose();
-				}
-			}}
-			direction="right"
-			showOverlay={false}
-			className={`details-panel-drawer ${className || ''}`}
-		>
-			<div className="details-panel-drawer__body">{children}</div>
-		</DrawerWrapper>
-	);
-}
-
-export default DetailsPanelDrawer;

frontend/src/components/DetailsPanel/index.ts

@@ -1,8 +0,0 @@
-export type {
-	DetailsHeaderProps,
-	HeaderAction,
-} from './DetailsHeader/DetailsHeader';
-export { default as DetailsHeader } from './DetailsHeader/DetailsHeader';
-export { default as DetailsPanelDrawer } from './DetailsPanelDrawer';
-export type { DetailsPanelState, UseDetailsPanelOptions } from './types';
-export { default as useDetailsPanel } from './useDetailsPanel';

frontend/src/components/DetailsPanel/types.ts

@@ -1,10 +0,0 @@
-export interface DetailsPanelState {
-	isOpen: boolean;
-	open: () => void;
-	close: () => void;
-}
-
-export interface UseDetailsPanelOptions {
-	entityId: string | undefined;
-	onClose?: () => void;
-}

frontend/src/components/DetailsPanel/useDetailsPanel.ts

@@ -1,29 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import { DetailsPanelState, UseDetailsPanelOptions } from './types';
-
-function useDetailsPanel({
-	entityId,
-	onClose,
-}: UseDetailsPanelOptions): DetailsPanelState {
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const prevEntityIdRef = useRef<string>('');
-
-	useEffect(() => {
-		const currentId = entityId || '';
-		if (currentId && currentId !== prevEntityIdRef.current) {
-			setIsOpen(true);
-		}
-		prevEntityIdRef.current = currentId;
-	}, [entityId]);
-
-	const open = useCallback(() => setIsOpen(true), []);
-	const close = useCallback(() => {
-		setIsOpen(false);
-		onClose?.();
-	}, [onClose]);
-
-	return { isOpen, open, close };
-}
-
-export default useDetailsPanel;

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Button, Popover, Radio, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, DownloadIcon, Loader2 } from 'lucide-react';

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -15,8 +15,8 @@ import {
 	Row,
 	Select,
 	Space,
+	Typography,
 } from 'antd';
-import { Typography } from '@signozhq/ui';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,7 +1,6 @@
 import { MouseEvent, useCallback } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
-import { Col, Row, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
 import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
@@ -82,7 +81,7 @@ function MenuItemGenerator({
 						</Tooltip>
 					</Row>
 					<Row>
-						<Typography.Text color="muted">Created by {createdBy}</Typography.Text>
+						<Typography.Text type="secondary">Created by {createdBy}</Typography.Text>
 					</Row>
 				</Col>
 				<Col span={2}>

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Card, Form, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Card, Form, Input, Typography } from 'antd';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSaveView } from 'hooks/saveViews/useSaveView';

frontend/src/components/HeaderRightSection/AnnouncementsModal.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 
 function AnnouncementsModal(): JSX.Element {
 	return (

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui';
-import { Button, Input, Radio, RadioChangeEvent } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Switch, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CheckCircle2, HandPlatter } from 'lucide-react';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Button, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, Typography } from 'antd';
 import cx from 'classnames';
 import { X } from 'lucide-react';
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Button, Modal, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Modal, Tooltip, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';

frontend/src/components/LogDetail/index.tsx

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux'; // old code, TODO: fix this correctly
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
-import { Divider, Drawer, Radio, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Divider, Drawer, Radio, Tooltip, Typography } from 'antd';
 import type { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
@@ -18,6 +17,7 @@ import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
+import JSONView from 'container/LogDetailedView/JsonView';
 import Overview from 'container/LogDetailedView/Overview';
 import {
 	aggregateAttributesResourcesToString,
@@ -47,7 +47,6 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
-import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -563,9 +562,7 @@ function LogDetailInner({
 						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				)}
-				{selectedView === VIEW_TYPES.JSON && (
-					<JsonView data={LogJsonData} height="68vh" />
-				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
 				{selectedView === VIEW_TYPES.CONTEXT && (
 					<ContextView
@@ -590,7 +587,7 @@ function LogDetailInner({
 					<div className="log-detail-drawer__footer-hint">
 						<div className="log-detail-drawer__footer-hint-content">
 							<Typography.Text
-								color="muted"
+								type="secondary"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								Use
@@ -599,7 +596,7 @@ function LogDetailInner({
 							<span>/</span>
 							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
 							<Typography.Text
-								color="muted"
+								type="secondary"
 								className="log-detail-drawer__footer-hint-text"
 							>
 								to view previous/next log

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

@@ -6,7 +6,7 @@ interface ICategoryHeadingProps {
 	children: ReactNode;
 }
 function CategoryHeading({ children }: ICategoryHeadingProps): JSX.Element {
-	return <CategoryHeadingText color="muted">{children}</CategoryHeadingText>;
+	return <CategoryHeadingText type="secondary">{children}</CategoryHeadingText>;
 }
 
 export default CategoryHeading;

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

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import styled from 'styled-components';
 
 export const CategoryHeadingText = styled(Typography.Text)`

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

@@ -1,6 +1,6 @@
 import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import cx from 'classnames';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -89,7 +89,7 @@ function LogSelectedField({
 					</span>
 				</Typography.Text>
 			</AddToQueryHOC>
-			<Typography.Text truncate={1} className={cx('selected-log-kv', fontSize)}>
+			<Typography.Text ellipsis className={cx('selected-log-kv', fontSize)}>
 				<span className={cx('selected-log-field-key', fontSize)}>{': '}</span>
 				<span className={cx('selected-log-value', fontSize)}>
 					{fieldValue || "''"}

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,8 +1,15 @@
-import { Typography } from '@signozhq/ui';
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
-import { Modal, Select, Spin, Tooltip, Tree, TreeDataNode } from 'antd';
+import {
+	Modal,
+	Select,
+	Spin,
+	Tooltip,
+	Tree,
+	TreeDataNode,
+	Typography,
+} from 'antd';
 import { OnboardingStatusResponse } from 'api/messagingQueues/onboarding/getOnboardingStatus';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -77,7 +84,7 @@ function ErrorTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-error-title">
-				<Typography.Text title={title} className="tree-text" truncate={1}>
+				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
 					{title}
 				</Typography.Text>
 				<Tooltip title={errorMsg}>
@@ -118,7 +125,7 @@ function treeTitleAndKey({
 		key: `${title}-key-${uuid()}`,
 		title: (
 			<div className="attribute-success-title">
-				<Typography.Text title={title} className="tree-text" truncate={1}>
+				<Typography.Text className="tree-text" ellipsis={{ tooltip: title }}>
 					{title}
 				</Typography.Text>
 				{isLeaf && (

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -13,8 +13,7 @@ import {
 	ReloadOutlined,
 } from '@ant-design/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Checkbox, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Checkbox, Select, Typography } from 'antd';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -756,7 +755,15 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 						}}
 					>
 						<div className="option-content">
-							<Typography.Text truncate={1} className="option-label-text">
+							<Typography.Text
+								ellipsis={{
+									tooltip: {
+										placement: 'right',
+										autoAdjustOverflow: true,
+									},
+								}}
+								className="option-label-text"
+							>
 								{highlightMatchedText(String(option.label || ''), searchText)}
 							</Typography.Text>
 							{(option.type === 'custom' || option.type === 'regex') && (

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Tooltip, Typography } from 'antd';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
-import { Button, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Tooltip, Typography } from 'antd';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QueryCancelledPlaceholder/QueryCancelledPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import eyesEmojiUrl from 'assets/Images/eyesEmoji.svg';
 
 import styles from './QueryCancelledPlaceholder.module.scss';

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

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Button, Checkbox, Input, Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
 import {
@@ -641,7 +640,16 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 											{filter.customRendererForValue ? (
 												filter.customRendererForValue(value)
 											) : (
-												<Typography.Text className="value-string" truncate={1}>
+												<Typography.Text
+													className="value-string"
+													ellipsis={{
+														tooltip: {
+															placement: 'top',
+															mouseEnterDelay: 0.2,
+															mouseLeaveDelay: 0,
+														},
+													}}
+												>
 													{String(value)}
 												</Typography.Text>
 											)}

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -12,8 +12,7 @@ import {
 	ComboboxList,
 	ComboboxTrigger,
 } from '@signozhq/ui';
-import { Skeleton, Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Skeleton, Switch, Tooltip, Typography } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';

frontend/src/components/ResizeTable/TableComponent/DateComponent.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 
 import Time from './Time';
 

frontend/src/components/ResizeTable/TableComponent/Time.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { useTimezone } from 'providers/Timezone';
 

frontend/src/components/SpanHoverCard/SpanHoverCard.tsx

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
-import { Popover } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Popover, Typography } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
 import dayjs from 'dayjs';

frontend/src/components/Styled/index.ts

@@ -11,12 +11,10 @@ import {
 	Space,
 	SpaceProps,
 	TabsProps,
-} from 'antd';
-import {
 	Typography,
-	TypographyTextProps,
-	TypographyTitleProps,
-} from '@signozhq/ui';
+} from 'antd';
+import type { TextProps } from 'antd/lib/typography/Text';
+import type { TitleProps } from 'antd/lib/typography/Title';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';
@@ -55,13 +53,13 @@ const StyledButton = styled(Button)<TStyledButton>`
 `;
 
 const { Text } = Typography;
-type TStyledTypographyText = TypographyTextProps & IStyledClass;
+type TStyledTypographyText = TextProps & IStyledClass;
 const StyledTypographyText = styled(Text)<TStyledTypographyText>`
 	${styledClass}
 `;
 
 const { Title } = Typography;
-type TStyledTypographyTitle = TypographyTitleProps & IStyledClass;
+type TStyledTypographyTitle = TitleProps & IStyledClass;
 const StyledTypographyTitle = styled(Title)<TStyledTypographyTitle>`
 	${styledClass}
 `;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -589,16 +589,6 @@ function TanStackTableInner<TData>(
 					{showPagination && pagination && (
 						<div className={cx(viewStyles.paginationContainer, paginationClassname)}>
 							{prefixPaginationContent}
-							{pagination.showTotalCount && effectiveTotalCount > 0 && (
-								<span
-									className={viewStyles.paginationTotalCount}
-									data-testid="pagination-total-count"
-								>
-									Showing {(page - 1) * limit + 1} -{' '}
-									{Math.min(page * limit, effectiveTotalCount)} of {effectiveTotalCount}
-									{pagination.totalCountLabel ? ` ${pagination.totalCountLabel}` : ''}
-								</span>
-							)}
 							<Pagination
 								current={page}
 								pageSize={limit}

frontend/src/components/TanStackTableView/TanStackTableView.module.scss

@@ -117,10 +117,6 @@
 	justify-content: flex-end;
 	gap: 12px;
 	margin-top: 12px;
-
-	ul {
-		padding: 0;
-	}
 }
 
 .paginationPageSize {
@@ -128,11 +124,6 @@
 	--combobox-trigger-height: 2rem;
 }
 
-.paginationTotalCount {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l1-foreground);
-}
-
 .tanstackLoadingOverlay {
 	position: absolute;
 	left: 50%;

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

@@ -188,87 +188,6 @@ describe('TanStackTableView Integration', () => {
 				expect(screen.getByTestId('suffix-content')).toBeInTheDocument();
 			});
 		});
-
-		it('renders total count when showTotalCount is true', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: {
-						total: 100,
-						defaultPage: 1,
-						defaultLimit: 10,
-						showTotalCount: true,
-					},
-				},
-			});
-
-			await waitFor(() => {
-				const totalCount = screen.getByTestId('pagination-total-count');
-				expect(totalCount).toBeInTheDocument();
-				expect(totalCount).toHaveTextContent('Showing 1 - 10 of 100');
-			});
-		});
-
-		it('renders total count with label when totalCountLabel is provided', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: {
-						total: 50,
-						defaultPage: 1,
-						defaultLimit: 10,
-						showTotalCount: true,
-						totalCountLabel: 'Pods',
-					},
-				},
-			});
-
-			await waitFor(() => {
-				const totalCount = screen.getByTestId('pagination-total-count');
-				expect(totalCount).toBeInTheDocument();
-				expect(totalCount).toHaveTextContent('Showing 1 - 10 of 50 Pods');
-			});
-		});
-
-		it('does not render total count when showTotalCount is false', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: {
-						total: 100,
-						defaultPage: 1,
-						defaultLimit: 10,
-						showTotalCount: false,
-					},
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-
-			expect(
-				screen.queryByTestId('pagination-total-count'),
-			).not.toBeInTheDocument();
-		});
-
-		it('does not render total count when total is 0', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: {
-						total: 0,
-						defaultPage: 1,
-						defaultLimit: 10,
-						showTotalCount: true,
-					},
-				},
-			});
-
-			await waitFor(() => {
-				expect(screen.getByRole('table')).toBeInTheDocument();
-			});
-
-			expect(
-				screen.queryByTestId('pagination-total-count'),
-			).not.toBeInTheDocument();
-		});
 	});
 
 	describe('sorting', () => {

frontend/src/components/TanStackTableView/types.ts

@@ -115,8 +115,6 @@ export type PaginationProps = {
 	total: number;
 	defaultPage?: number;
 	defaultLimit?: number;
-	showTotalCount?: boolean;
-	totalCountLabel?: string;
 };
 
 export type TanstackTableQueryParamsConfig = {

frontend/src/components/TimePreferenceDropDown/config.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import { timeItems } from 'container/NewWidget/RightContainer/timeItems';
 
 export const menuItems = timeItems.map((item) => ({

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { DownOutlined } from '@ant-design/icons';
-import { Button, Dropdown } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Dropdown, Typography } from 'antd';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -1,20 +0,0 @@
-.timeline-v3-container {
-	overflow: visible;
-	position: relative;
-}
-
-.timeline-v3-cursor-badge {
-	position: absolute;
-	top: 0;
-	transform: translateX(-50%);
-	background: var(--l3-background);
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	padding: 2px 8px;
-	font-size: 11px;
-	font-weight: 500;
-	color: var(--l1-foreground);
-	white-space: nowrap;
-	pointer-events: none;
-	z-index: 1;
-}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -1,117 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
-import { resolveTimeFromInterval } from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-import {
-	getIntervals,
-	getIntervalUnit,
-	getMinimumIntervalsBasedOnWidth,
-	Interval,
-} from './utils';
-
-import './TimelineV3.styles.scss';
-
-interface ITimelineV3Props {
-	startTimestamp: number;
-	endTimestamp: number;
-	timelineHeight: number;
-	offsetTimestamp: number;
-	/** Cursor X as a fraction of the timeline width (0–1). null = no cursor. */
-	cursorXPercent?: number | null;
-}
-
-function TimelineV3(props: ITimelineV3Props): JSX.Element {
-	const {
-		startTimestamp,
-		endTimestamp,
-		timelineHeight,
-		offsetTimestamp,
-		cursorXPercent,
-	} = props;
-	const [intervals, setIntervals] = useState<Interval[]>([]);
-	const [ref, { width }] = useMeasure<HTMLDivElement>();
-
-	const spread = endTimestamp - startTimestamp;
-
-	useEffect(() => {
-		if (spread < 0) {
-			return;
-		}
-
-		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
-		const intervalisedSpread = (spread / minIntervals) * 1.0;
-		const newIntervals = getIntervals(
-			intervalisedSpread,
-			spread,
-			offsetTimestamp,
-		);
-
-		setIntervals(newIntervals);
-	}, [startTimestamp, endTimestamp, width, offsetTimestamp, spread]);
-
-	// Compute cursor time label using the same unit as timeline ticks
-	const cursorLabel = useMemo(() => {
-		if (cursorXPercent == null || spread <= 0) {
-			return null;
-		}
-
-		const timeAtCursor = offsetTimestamp + cursorXPercent * spread;
-		const unit = getIntervalUnit(spread, offsetTimestamp);
-		const formatted = toFixed(resolveTimeFromInterval(timeAtCursor, unit), 2);
-		return `${formatted}${unit.name}`;
-	}, [cursorXPercent, spread, offsetTimestamp]);
-
-	if (endTimestamp < startTimestamp) {
-		console.error(
-			'endTimestamp cannot be less than startTimestamp',
-			startTimestamp,
-			endTimestamp,
-		);
-		return <></>;
-	}
-
-	const strokeColor = 'var(--l3-foreground)';
-	const svgHeight = timelineHeight * 2.5;
-	const cursorX = cursorXPercent != null ? cursorXPercent * width : null;
-
-	return (
-		<div ref={ref as never} className="timeline-v3-container">
-			<svg
-				width={width}
-				height={svgHeight}
-				xmlns="http://www.w3.org/2000/svg"
-				overflow="visible"
-			>
-				{intervals &&
-					intervals.length > 0 &&
-					intervals.map((interval, index) => (
-						<g
-							transform={`translate(${(interval.percentage * width) / 100},0)`}
-							key={`${interval.percentage + interval.label + index}`}
-							textAnchor="middle"
-							fontSize="0.6rem"
-						>
-							<text
-								x={index === intervals.length - 1 ? -10 : 0}
-								y={timelineHeight * 2}
-								fill={strokeColor}
-							>
-								{interval.label}
-							</text>
-							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
-						</g>
-					))}
-			</svg>
-
-			{/* Cursor time badge — DOM element for easy CSS styling */}
-			{cursorX !== null && cursorLabel && (
-				<div className="timeline-v3-cursor-badge" style={{ left: cursorX }}>
-					{cursorLabel}
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -1,109 +0,0 @@
-import {
-	IIntervalUnit,
-	Interval,
-	INTERVAL_UNITS,
-	resolveTimeFromInterval,
-} from 'components/TimelineV2/utils';
-import { toFixed } from 'utils/toFixed';
-
-export type { Interval };
-
-/**
- * Select the interval unit matching the timeline's logic.
- * Exported so crosshair labels use the same unit as timeline ticks.
- */
-export function getIntervalUnit(
-	spread: number,
-	offsetTimestamp: number,
-): IIntervalUnit {
-	const minIntervals = 6;
-	const intervalSpread = spread / minIntervals;
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let unit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		if (valueForUnitSelection * INTERVAL_UNITS[idx].multiplier >= 1) {
-			unit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-	return unit;
-}
-
-/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
-export function getMinimumIntervalsBasedOnWidth(width: number): number {
-	if (width < 640) {
-		return 3;
-	}
-	if (width < 768) {
-		return 4;
-	}
-	if (width < 1024) {
-		return 5;
-	}
-	return 6;
-}
-
-/**
- * Computes timeline intervals with offset-aware labels.
- * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
- * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
- */
-export function getIntervals(
-	intervalSpread: number,
-	baseSpread: number,
-	offsetTimestamp: number,
-): Interval[] {
-	const integerPartString = intervalSpread.toString().split('.')[0];
-	const integerPartLength = integerPartString.length;
-
-	const intervalSpreadNormalized =
-		intervalSpread < 1.0
-			? intervalSpread
-			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
-				10 ** (integerPartLength - 1);
-
-	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
-	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
-	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
-	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
-	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
-	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
-		const standardInterval = INTERVAL_UNITS[idx];
-		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
-			intervalUnit = INTERVAL_UNITS[idx];
-			break;
-		}
-	}
-
-	const intervals: Interval[] = [
-		{
-			label: `${toFixed(
-				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
-				2,
-			)}${intervalUnit.name}`,
-			percentage: 0,
-		},
-	];
-
-	// Only show even-interval ticks — skip the trailing partial tick at the edge.
-	// The last even tick sits before the full width, so it doesn't conflict with
-	// span duration labels that may have sub-millisecond precision.
-	let elapsedIntervals = 0;
-
-	while (
-		elapsedIntervals + intervalSpreadNormalized <= baseSpread &&
-		intervals.length < 20
-	) {
-		elapsedIntervals += intervalSpreadNormalized;
-		const labelTime = offsetTimestamp + elapsedIntervals;
-
-		intervals.push({
-			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
-				intervalUnit.name
-			}`,
-			percentage: (elapsedIntervals / baseSpread) * 100,
-		});
-	}
-
-	return intervals;
-}

frontend/src/components/Uplot/Uplot.tsx

@@ -8,7 +8,7 @@ import {
 	useRef,
 } from 'react';
 import * as Sentry from '@sentry/react';
-import { Typography } from '@signozhq/ui';
+import { Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
 import { LineChart } from 'lucide-react';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';

frontend/src/components/ValueGraph/index.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';

frontend/src/constants/localStorage.ts

@@ -37,7 +37,6 @@ export enum LOCALSTORAGE {
 	SHOW_FREQUENCY_CHART = 'SHOW_FREQUENCY_CHART',
 	DISSMISSED_COST_METER_INFO = 'DISMISSED_COST_METER_INFO',
 	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',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 }

frontend/src/constants/reactQueryKeys.ts

@@ -33,7 +33,6 @@ export const REACT_QUERY_KEY = {
 	UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
 	GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
 	GET_TRACE_V2_WATERFALL: 'GET_TRACE_V2_WATERFALL',
-	GET_TRACE_V3_WATERFALL: 'GET_TRACE_V3_WATERFALL',
 	GET_TRACE_V2_FLAMEGRAPH: 'GET_TRACE_V2_FLAMEGRAPH',
 	GET_POD_LIST: 'GET_POD_LIST',
 	GET_NODE_LIST: 'GET_NODE_LIST',

frontend/src/constants/routes.ts

@@ -8,7 +8,6 @@ const ROUTES = {
 	SERVICE_MAP: '/service-map',
 	TRACE: '/trace',
 	TRACE_DETAIL: '/trace/:id',
-	TRACE_DETAIL_OLD: '/trace-old/:id',
 	TRACES_EXPLORER: '/traces-explorer',
 	ONBOARDING: '/onboarding',
 	GET_STARTED: '/get-started',

frontend/src/constants/theme.ts

@@ -33,102 +33,6 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
-	traceDetailColorsV3: {
-		// Blues
-		blue1: '#2F80ED',
-		blue2: '#3366E6',
-		blue3: '#4682B4',
-		blue4: '#1F63E0',
-		blue5: '#3A7AED',
-		blue6: '#5A9DF5',
-		blue7: '#2874A6',
-		blue8: '#2E86C1',
-		blue9: '#3498DB',
-		blue10: '#1E90FF',
-		blue11: '#4169E1',
-
-		// Cyans / Teals
-		cyan1: '#00CEC9',
-		cyan2: '#22A6F2',
-		cyan3: '#00B0AA',
-		cyan4: '#33D6C2',
-		cyan5: '#66E9DA',
-		cyan6: '#48DBFB',
-		cyan7: '#00BFFF',
-		cyan8: '#63B8FF',
-		teal1: '#009688',
-		teal2: '#1ABC9C',
-		teal3: '#48C9B0',
-		teal4: '#76D7C4',
-		teal5: '#20B2AA',
-
-		// Greens
-		green1: '#27AE60',
-		green2: '#3CB371',
-		green3: '#1E8449',
-		green4: '#2ECC71',
-		green5: '#58D68D',
-		green6: '#229954',
-		green7: '#52BE80',
-		green8: '#82E0AA',
-		green9: '#73C6B6',
-
-		// Limes
-		lime1: '#A3E635',
-		lime2: '#B9F18D',
-		lime3: '#84CC16',
-		lime4: '#65A30D',
-
-		// Yellows
-		yellow1: '#F1C40F',
-		yellow2: '#F7DC6F',
-		yellow3: '#F9E79F',
-		yellow4: '#F4D03F',
-		yellow5: '#D4AC0D',
-
-		// Golds / Ambers
-		gold1: '#F2C94C',
-		gold2: '#FFD93D',
-		gold3: '#FFCA28',
-		gold4: '#B7950B',
-		gold5: '#D4A017',
-
-		// Oranges (non-red)
-		orange1: '#F39C12',
-		orange2: '#E67E22',
-		orange3: '#F5B041',
-		orange4: '#D35400',
-		orange5: '#EB984E',
-		orange6: '#FAD7A0',
-
-		// Purples / Violets
-		purple1: '#BB6BD9',
-		purple2: '#9B51E0',
-		purple3: '#DA77F2',
-		purple4: '#C77DFF',
-		purple5: '#6C5CE7',
-		purple6: '#8E44AD',
-		purple7: '#9B59B6',
-		purple8: '#BB8FCE',
-		purple9: '#7D3C98',
-		purple10: '#A569BD',
-
-		// Lavenders
-		lavender1: '#AF7AC5',
-		lavender2: '#C39BD3',
-		lavender3: '#D2B4DE',
-
-		// Pinks / Magentas
-		pink1: '#E91E8C',
-		pink2: '#FF6FD8',
-		pink3: '#F06292',
-		pink4: '#CE93D8',
-
-		// Salmons / Corals (distinct from error red)
-		salmon1: '#FF8A65',
-		salmon2: '#FFAB91',
-		salmon3: '#E0876A',
-	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/container/AllAlertChannels/index.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { PlusOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Tooltip, Typography } from 'antd';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
@@ -22,7 +21,7 @@ import { Button, ButtonContainer, RightActionContainer } from './styles';
 
 import './AllAlertChannels.styles.scss';
 
-const { Text } = Typography;
+const { Paragraph } = Typography;
 
 function AlertChannels(): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -61,9 +60,9 @@ function AlertChannels(): JSX.Element {
 	return (
 		<div className="alert-channels-container">
 			<ButtonContainer>
-				<Text truncate={1} color="muted">
+				<Paragraph ellipsis type="secondary">
 					{t('sending_channels_note')}
-				</Text>
+				</Paragraph>
 
 				<RightActionContainer>
 					<TextToolTip

frontend/src/container/AllError/index.tsx

@@ -1,4 +1,3 @@
-import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
@@ -6,7 +5,15 @@ import { useQueries } from 'react-query';
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { SearchOutlined } from '@ant-design/icons';
-import { Button, Card, Input, Space, TableProps, Tooltip } from 'antd';
+import {
+	Button,
+	Card,
+	Input,
+	Space,
+	TableProps,
+	Tooltip,
+	Typography,
+} from 'antd';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
 import type { ColumnsType } from 'antd/lib/table';
@@ -353,7 +360,13 @@ function AllErrors(): JSX.Element {
 			width: 100,
 			render: (value): JSX.Element => (
 				<Tooltip overlay={(): JSX.Element => value}>
-					<Typography.Text truncate={2}>{value}</Typography.Text>
+					<Typography.Paragraph
+						ellipsis={{
+							rows: 2,
+						}}
+					>
+						{value}
+					</Typography.Paragraph>
 				</Tooltip>
 			),
 		},

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { Checkbox, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Checkbox, Input, Typography } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { useResizeObserver } from 'hooks/useDimensions';

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

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Button, Divider, Drawer, Radio } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Divider, Drawer, Radio, Typography } from 'antd';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Switch, Table, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Skeleton, Table, TablePaginationConfig } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Skeleton, Table, TablePaginationConfig, Typography } from 'antd';
 import { QueryParams } from 'constants/query';
 import {
 	dependentServicesColumns,

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DomainMetrics.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { useQueries } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Progress, Skeleton, Tooltip, Typography } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import {
@@ -88,16 +87,28 @@ function DomainMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						EXTERNAL API
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						ERROR %
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/EndPointMetrics.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Progress, Skeleton, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Progress, Skeleton, Tooltip, Typography } from 'antd';
 import {
 	getDisplayValue,
 	getFormattedEndPointMetricsData,
@@ -38,16 +37,28 @@ function EndPointMetrics({
 		<div className="domain-detail-drawer__endpoint">
 			<div className="domain-details-grid">
 				<div className="labels-row">
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						Rate
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						AVERAGE LATENCY
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						ERROR %
 					</Typography.Text>
-					<Typography.Text color="muted" className="domain-details-metadata-label">
+					<Typography.Text
+						type="secondary"
+						className="domain-details-metadata-label"
+					>
 						LAST USED
 					</Typography.Text>
 				</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,5 +1,4 @@
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import { RotateCw } from 'lucide-react';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
@@ -14,7 +13,7 @@ function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 					</div>
 					<div className="error-state-text">
 						<Typography.Text>Uh-oh :/ We ran into an error.</Typography.Text>
-						<Typography.Text color="muted">
+						<Typography.Text type="secondary">
 							Please refresh this panel.
 						</Typography.Text>
 					</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Card, Skeleton } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Card, Skeleton, Typography } from 'antd';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
 import {

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeTable.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { UseQueryResult } from 'react-query';
-import { Table } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Table, Typography } from 'antd';
 import {
 	endPointStatusCodeColumns,
 	getFormattedEndPointStatusCodeData,

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,4 +1,3 @@
-import { Typography } from '@signozhq/ui';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
@@ -15,6 +14,7 @@ import {
 	Table,
 	TableColumnsType as ColumnsType,
 	Tag,
+	Typography,
 } from 'antd';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
@@ -362,17 +362,15 @@ export default function BillingContainer(): JSX.Element {
 		[apiResponse, billAmount, isLoading, isFetchingBillingData],
 	);
 
+	const { Text } = Typography;
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
-			<Typography.Link
-				onClick={handleBilling}
-				style={{ cursor: 'pointer', color: 'var(--bg-cherry-500)' }}
-			>
+			<Text type="danger" onClick={handleBilling} style={{ cursor: 'pointer' }}>
 				{t('here')}
-			</Typography.Link>
+			</Text>
 			{` if your payment information has changed. Email us at `}
-			<Typography.Text color="muted">cloud-support@signoz.io</Typography.Text>
+			<Text type="secondary">cloud-support@signoz.io</Text>
 			{` otherwise. Be sure to provide this information immediately to avoid interruption to your service.`}
 		</Typography>
 	);
@@ -420,7 +418,7 @@ export default function BillingContainer(): JSX.Element {
 				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text color="muted">
+				<Typography.Text color={Color.BG_VANILLA_400}>
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -474,7 +472,7 @@ export default function BillingContainer(): JSX.Element {
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
 					<Typography.Text
-						truncate={1}
+						ellipsis
 						style={{ fontWeight: '300', color: 'var(--bg-forest-500)', fontSize: 12 }}
 					>
 						{t('card_details_recieved_and_billing_info')}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useRef } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Card, Flex } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Card, Flex, Typography } from 'antd';
 import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
@@ -209,7 +208,7 @@ export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 					<Typography.Text className="total-spent-title">
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className="total-spent">
+					<Typography.Text color={Color.BG_VANILLA_100} className="total-spent">
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>

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

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row, Tag } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Row, Tag, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
 import { FeatureKeys } from 'constants/features';

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Button, Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Select, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import getRandomColor from 'lib/getRandomColor';

frontend/src/container/CreateAlertV2/AlertCondition/AnomalyThreshold.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useAppContext } from 'providers/App/App';
 

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Button, Input, Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Input, Select, Tooltip, Typography } from 'antd';
 import { CircleX, Trash } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,5 +1,4 @@
-import { Button, Flex, SelectProps, Switch } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Flex, SelectProps, Switch, Typography } from 'antd';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
 import { YAxisSource } from 'components/YAxisUnitSelector/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Switch, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Switch, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { IAdvancedOptionItemProps } from '../types';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,5 +1,4 @@
-import { Collapse, Input } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Collapse, Input, Typography } from 'antd';
 
 import { useCreateAlertState } from '../context';
 import AdvancedOptionItem from './AdvancedOptionItem';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Input, Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Select, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadenceDetails.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { Button, DatePicker, Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, DatePicker, Input, Select, Typography } from 'antd';
 import classNames from 'classnames';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { AdvancedOptionsState } from 'container/CreateAlertV2/context/types';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadencePreview.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Modal, Typography } from 'antd';
 import { Calendar, Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Select, Typography } from 'antd';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
 import {

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx

@@ -1,5 +1,4 @@
-import { Button } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Typography } from 'antd';
 import classNames from 'classnames';
 import { Check } from 'lucide-react';
 

frontend/src/container/CreateAlertV2/NotificationSettings/MultipleNotifications.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { Select, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Info } from 'lucide-react';
 
@@ -99,9 +98,9 @@ function MultipleNotifications(): JSX.Element {
 					data-testid="multiple-notifications-select"
 				/>
 				{isMultipleNotificationsEnabled && (
-					<Typography.Text className="multiple-notifications-select-description">
+					<Typography.Paragraph className="multiple-notifications-select-description">
 						{groupByDescription}
-					</Typography.Text>
+					</Typography.Paragraph>
 				)}
 			</div>
 		);

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx

@@ -1,5 +1,4 @@
-import { Input, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Tooltip, Typography } from 'antd';
 import { Info } from 'lucide-react';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,5 +1,4 @@
-import { Input, Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Input, Select, Typography } from 'antd';
 
 import { useCreateAlertState } from '../context';
 import {

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -177,7 +177,11 @@ export default function CustomDomainSettings(): JSX.Element {
 	if (isLoadingHosts) {
 		return (
 			<div className="custom-domain-card custom-domain-card--loading">
-				<Skeleton active paragraph={{ rows: 1, width: '60%' }} />
+				<Skeleton
+					active
+					title={{ width: '40%' }}
+					paragraph={{ rows: 1, width: '60%' }}
+				/>
 			</div>
 		);
 	}

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -4,8 +4,16 @@ import { Layout } from 'react-grid-layout';
 import { useTranslation } from 'react-i18next';
 import { useCopyToClipboard } from 'react-use';
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import {
+	Button,
+	Card,
+	Input,
+	Modal,
+	Popover,
+	Tag,
+	Tooltip,
+	Typography,
+} from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/DynamicVariable/DynamicVariable.tsx

@@ -7,8 +7,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Select, Typography } from 'antd';
 import CustomSelect from 'components/NewSelect/CustomSelect';
 import TextToolTip from 'components/TextToolTip';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
@@ -214,7 +213,7 @@ function DynamicVariable({
 			</div>
 			{errorAttributeKeyMessage && (
 				<div>
-					<Typography.Text color="warning">
+					<Typography.Text type="warning">
 						{errorAttributeKeyMessage}
 					</Typography.Text>
 				</div>

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,8 +5,7 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select, Switch, Tag } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Collapse, Input, Select, Switch, Tag, Typography } from 'antd';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
 import cx from 'classnames';
 import Editor from 'components/Editor';
@@ -486,7 +485,7 @@ function VariableItem({
 								}}
 							/>
 							<div>
-								<Typography.Text color="warning">{errorNameMessage}</Typography.Text>
+								<Typography.Text type="warning">{errorNameMessage}</Typography.Text>
 							</div>
 						</div>
 					</VariableItemRow>

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/index.tsx

@@ -11,8 +11,7 @@ import {
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal, Row, RowProps, Space, Table } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Button, Modal, Row, RowProps, Space, Table, Typography } from 'antd';
 import { VariablesSettingsTabHandle } from 'container/DashboardContainer/DashboardDescription/types';
 import { convertVariablesToDbFormat } from 'container/DashboardContainer/DashboardVariablesSelection/util';
 import { useAddDynamicVariableToPanels } from 'hooks/dashboard/useAddDynamicVariableToPanels';

frontend/src/container/DashboardContainer/DashboardSettings/General/index.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input, Radio, Select, Space, Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui';
+import { Col, Input, Radio, Select, Space, Tooltip, Typography } from 'antd';
 import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
 import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';