Merge branch 'main' into e2e/alert_manager

* feat(entity-count): add base structure to show count

* feat(entity-count): add count for clusters

* feat(entity-count): add count for namespaces

* chore(infra-monitoring): move component to be under components folder

* fix(pr): address comments

.github/CODEOWNERS

@@ -189,7 +189,9 @@ go.mod @therealpandey
 ## Infrastructure Monitoring
 /frontend/src/pages/InfrastructureMonitoring/ @SigNoz/pulse-frontend
 /frontend/src/container/InfraMonitoringHosts/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringHostsV2/ @SigNoz/pulse-frontend
 /frontend/src/container/InfraMonitoringK8s/ @SigNoz/pulse-frontend
+/frontend/src/container/InfraMonitoringK8sV2/ @SigNoz/pulse-frontend
 
 ## Alerts
 /frontend/src/pages/AlertList/ @SigNoz/pulse-frontend

.github/workflows/integrationci.yaml

@@ -39,6 +39,7 @@ jobs:
       matrix:
         suite:
           - alerts
+          - alertmanager
           - basepath
           - callbackauthn
           - cloudintegrations

docs/api/openapi.yml

@@ -543,6 +543,31 @@ components:
       required:
       - id
       type: object
+    AuthtypesGettableRole:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        description:
+          type: string
+        id:
+          type: string
+        name:
+          type: string
+        orgId:
+          type: string
+        type:
+          type: string
+        updatedAt:
+          format: date-time
+          type: string
+      required:
+      - id
+      - name
+      - description
+      - type
+      - orgId
+      type: object
     AuthtypesGettableToken:
       properties:
         accessToken:
@@ -694,43 +719,6 @@ components:
       - detach
       type: string
     AuthtypesRole:
-      properties:
-        createdAt:
-          format: date-time
-          type: string
-        description:
-          type: string
-        id:
-          type: string
-        name:
-          type: string
-        orgId:
-          type: string
-        type:
-          type: string
-        updatedAt:
-          format: date-time
-          type: string
-      required:
-      - id
-      - name
-      - description
-      - type
-      - orgId
-      type: object
-    AuthtypesRoleMapping:
-      properties:
-        defaultRole:
-          type: string
-        groupMappings:
-          additionalProperties:
-            type: string
-          nullable: true
-          type: object
-        useRoleAttribute:
-          type: boolean
-      type: object
-    AuthtypesRoleWithTransactionGroups:
       properties:
         createdAt:
           format: date-time
@@ -758,6 +746,18 @@ components:
       - orgId
       - transactionGroups
       type: object
+    AuthtypesRoleMapping:
+      properties:
+        defaultRole:
+          type: string
+        groupMappings:
+          additionalProperties:
+            type: string
+          nullable: true
+          type: object
+        useRoleAttribute:
+          type: boolean
+      type: object
     AuthtypesSamlConfig:
       properties:
         attributeMapping:
@@ -4259,6 +4259,34 @@ components:
           type: number
         clusterName:
           type: string
+        counts:
+          properties:
+            daemonSets:
+              format: int64
+              type: integer
+            deployments:
+              format: int64
+              type: integer
+            jobs:
+              format: int64
+              type: integer
+            namespaces:
+              format: int64
+              type: integer
+            nodes:
+              format: int64
+              type: integer
+            statefulSets:
+              format: int64
+              type: integer
+          required:
+          - nodes
+          - namespaces
+          - deployments
+          - daemonSets
+          - jobs
+          - statefulSets
+          type: object
         meta:
           additionalProperties:
             type: string
@@ -4279,6 +4307,7 @@ components:
       - nodeCountsByReadiness
       - podCountsByPhase
       - podCountsByStatus
+      - counts
       - meta
       type: object
     InframonitoringtypesClusters:
@@ -4800,6 +4829,26 @@ components:
       type: object
     InframonitoringtypesNamespaceRecord:
       properties:
+        counts:
+          properties:
+            daemonSets:
+              format: int64
+              type: integer
+            deployments:
+              format: int64
+              type: integer
+            jobs:
+              format: int64
+              type: integer
+            statefulSets:
+              format: int64
+              type: integer
+          required:
+          - deployments
+          - daemonSets
+          - jobs
+          - statefulSets
+          type: object
         meta:
           additionalProperties:
             type: string
@@ -4823,6 +4872,7 @@ components:
       - namespaceMemory
       - podCountsByPhase
       - podCountsByStatus
+      - counts
       - meta
       type: object
     InframonitoringtypesNamespaces:
@@ -7998,6 +8048,15 @@ components:
       required:
       - items
       type: object
+    SpantypesGettableSpanMappers:
+      properties:
+        items:
+          items:
+            $ref: '#/components/schemas/SpantypesSpanMapper'
+          type: array
+      required:
+      - items
+      type: object
     SpantypesGettableTraceAggregations:
       properties:
         aggregations:
@@ -8150,7 +8209,7 @@ components:
           type: boolean
         fieldContext:
           $ref: '#/components/schemas/SpantypesFieldContext'
-        group_id:
+        groupId:
           type: string
         id:
           type: string
@@ -8163,7 +8222,7 @@ components:
           type: string
       required:
       - id
-      - group_id
+      - groupId
       - name
       - fieldContext
       - config
@@ -12022,7 +12081,7 @@ paths:
                 properties:
                   data:
                     items:
-                      $ref: '#/components/schemas/AuthtypesRole'
+                      $ref: '#/components/schemas/AuthtypesGettableRole'
                     type: array
                   status:
                     type: string
@@ -12206,7 +12265,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesRoleWithTransactionGroups'
+                    $ref: '#/components/schemas/AuthtypesRole'
                   status:
                     type: string
                 required:
@@ -13742,7 +13801,7 @@ paths:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/SpantypesGettableSpanMapperGroups'
+                    $ref: '#/components/schemas/SpantypesGettableSpanMappers'
                   status:
                     type: string
                 required:

ee/authz/openfgaauthz/provider.go

@@ -119,10 +119,6 @@ func (provider *provider) CheckTransactions(ctx context.Context, subject string,
 	return results, nil
 }
 
-func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (provider *provider) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return provider.openfgaServer.Write(ctx, additions, deletions)
 }
@@ -131,10 +127,6 @@ func (provider *provider) ReadTuples(ctx context.Context, tupleKey *openfgav1.Re
 	return provider.openfgaServer.ReadTuples(ctx, tupleKey)
 }
 
-func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
-	return provider.pkgAuthzService.Get(ctx, orgID, id)
-}
-
 func (provider *provider) GetByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*authtypes.Role, error) {
 	return provider.pkgAuthzService.GetByOrgIDAndName(ctx, orgID, name)
 }
@@ -183,7 +175,7 @@ func (provider *provider) CreateManagedUserRoleTransactions(ctx context.Context,
 	return provider.Write(ctx, tuples, nil)
 }
 
-func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
@@ -208,70 +200,31 @@ func (provider *provider) Create(ctx context.Context, orgID valuer.UUID, role *a
 		return err
 	}
 
-	if err := provider.store.Create(ctx, role.Role); err != nil {
-		return err
-	}
-
-	return nil
+	return provider.store.Create(ctx, role)
 }
 
-func (provider *provider) GetOrCreate(ctx context.Context, orgID valuer.UUID, role *authtypes.Role) (*authtypes.Role, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	existingRole, err := provider.store.GetByOrgIDAndName(ctx, role.OrgID, role.Name)
-	if err != nil {
-		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, err
-		}
-	}
-
-	if existingRole != nil {
-		return existingRole, nil
-	}
-
-	err = provider.store.Create(ctx, role)
-	if err != nil {
-		return nil, err
-	}
-
-	return role, nil
+func (provider *provider) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.Role, error) {
+	return provider.store.Get(ctx, orgID, id)
 }
 
-func (provider *provider) GetWithTransactionGroups(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*authtypes.RoleWithTransactionGroups, error) {
-	_, err := provider.licensing.GetActive(ctx, orgID)
-	if err != nil {
-		return nil, errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
-	}
-
-	role, err := provider.store.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
-	if err != nil {
-		return nil, err
-	}
-
-	transactionGroups := authtypes.MustNewTransactionGroupsFromTuples(tuples)
-	return authtypes.MakeRoleWithTransactionGroups(role, transactionGroups), nil
-}
-
-func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.RoleWithTransactionGroups) error {
+func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updatedRole *authtypes.Role) error {
 	_, err := provider.licensing.GetActive(ctx, orgID)
 	if err != nil {
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	existingRole, err := provider.GetWithTransactionGroups(ctx, orgID, updatedRole.ID)
+	existingRole, err := provider.Get(ctx, orgID, updatedRole.ID)
 	if err != nil {
 		return err
 	}
 
-	additions, deletions := existingRole.TransactionGroups.Diff(updatedRole.TransactionGroups)
+	existingTuples, err := provider.readAllTuplesForRole(ctx, existingRole.Name, orgID)
+	if err != nil {
+		return err
+	}
+
+	existingGroups := authtypes.MustNewTransactionGroupsFromTuples(existingTuples)
+	additions, deletions := existingGroups.Diff(updatedRole.TransactionGroups)
 	additionTuples, err := authtypes.NewTuplesFromTransactionGroups(existingRole.Name, orgID, additions)
 	if err != nil {
 		return err
@@ -287,7 +240,7 @@ func (provider *provider) Update(ctx context.Context, orgID valuer.UUID, updated
 		return err
 	}
 
-	return provider.store.Update(ctx, orgID, updatedRole.Role)
+	return provider.store.Update(ctx, orgID, updatedRole)
 }
 
 func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error {
@@ -296,7 +249,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	role, err := provider.GetWithTransactionGroups(ctx, orgID, id)
+	role, err := provider.Get(ctx, orgID, id)
 	if err != nil {
 		return err
 	}
@@ -312,7 +265,7 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 		}
 	}
 
-	tuples, err := authtypes.NewTuplesFromTransactionGroups(role.Name, orgID, role.TransactionGroups)
+	tuples, err := provider.readAllTuplesForRole(ctx, role.Name, orgID)
 	if err != nil {
 		return err
 	}
@@ -324,6 +277,24 @@ func (provider *provider) Delete(ctx context.Context, orgID valuer.UUID, id valu
 	return provider.store.Delete(ctx, orgID, id)
 }
 
+func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
+	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
+
+	tuples := make([]*openfgav1.TupleKey, 0)
+	for _, objectType := range provider.registry.Types() {
+		typeTuples, err := provider.openfgaServer.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
+			User:   subject,
+			Object: objectType.StringValue() + ":",
+		})
+		if err != nil {
+			return nil, err
+		}
+		tuples = append(tuples, typeTuples...)
+	}
+
+	return tuples, nil
+}
+
 func (provider *provider) getManagedRoleGrantTuples(orgID valuer.UUID, userID valuer.UUID) []*openfgav1.TupleKey {
 	tuples := []*openfgav1.TupleKey{}
 
@@ -375,21 +346,3 @@ func (provider *provider) getManagedRoleTransactionTuples(orgID valuer.UUID) []*
 
 	return tuples
 }
-
-func (provider *provider) readAllTuplesForRole(ctx context.Context, roleName string, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	subject := authtypes.MustNewSubject(coretypes.NewResourceRole(), roleName, orgID, &coretypes.VerbAssignee)
-
-	tuples := make([]*openfgav1.TupleKey, 0)
-	for _, objectType := range provider.registry.Types() {
-		typeTuples, err := provider.ReadTuples(ctx, &openfgav1.ReadRequestTupleKey{
-			User:   subject,
-			Object: objectType.StringValue() + ":",
-		})
-		if err != nil {
-			return nil, err
-		}
-		tuples = append(tuples, typeTuples...)
-	}
-
-	return tuples, nil
-}

ee/authz/openfgaserver/server.go

@@ -105,10 +105,6 @@ func (server *Server) BatchCheck(ctx context.Context, tupleReq map[string]*openf
 	return server.pkgAuthzService.BatchCheck(ctx, tupleReq)
 }
 
-func (server *Server) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType coretypes.Type) ([]*coretypes.Object, error) {
-	return server.pkgAuthzService.ListObjects(ctx, subject, relation, objectType)
-}
-
 func (server *Server) Write(ctx context.Context, additions []*openfgav1.TupleKey, deletions []*openfgav1.TupleKey) error {
 	return server.pkgAuthzService.Write(ctx, additions, deletions)
 }

frontend/__mocks__/resizableMock.tsx

@@ -1,29 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-type CommonProps = PropsWithChildren<{
-	className?: string;
-	minSize?: number;
-	maxSize?: number;
-	defaultSize?: number;
-	direction?: 'horizontal' | 'vertical';
-	autoSaveId?: string;
-	withHandle?: boolean;
-}>;
-
-export function ResizablePanelGroup({
-	children,
-	className,
-}: CommonProps): JSX.Element {
-	return <div className={className}>{children}</div>;
-}
-
-export function ResizablePanel({
-	children,
-	className,
-}: CommonProps): JSX.Element {
-	return <div className={className}>{children}</div>;
-}
-
-export function ResizableHandle({ className }: CommonProps): JSX.Element {
-	return <div className={className} />;
-}

frontend/jest.config.ts

@@ -21,7 +21,6 @@ const config: Config.InitialOptions = {
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
 		'^motion/react$': '<rootDir>/__mocks__/motionMock.tsx',
-		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,

frontend/package.json

@@ -49,7 +49,6 @@
     "@sentry/vite-plugin": "5.3.0",
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
-    "@signozhq/resizable": "0.0.2",
     "@signozhq/ui": "0.0.23",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
@@ -128,7 +127,7 @@
     "timestamp-nano": "^1.0.0",
     "typescript": "5.9.3",
     "uplot": "1.6.31",
-    "uuid": "^8.3.2",
+    "uuid": "14.0.1",
     "vite": "npm:rolldown-vite@7.3.1",
     "vite-plugin-html": "3.2.2",
     "zod": "4.3.6",
@@ -222,34 +221,5 @@
     "*.(scss|css)": [
       "stylelint"
     ]
-  },
-  "resolutions": {
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "debug": "4.3.4",
-    "semver": "7.5.4",
-    "xml2js": "0.5.0",
-    "phin": "^3.7.1",
-    "body-parser": "1.20.3",
-    "http-proxy-middleware": "4.1.1",
-    "cross-spawn": "7.0.5",
-    "cookie": "^0.7.1",
-    "serialize-javascript": "6.0.2",
-    "prismjs": "1.30.0",
-    "got": "11.8.5",
-    "form-data": "4.0.6",
-    "brace-expansion": "^2.0.3",
-    "on-headers": "^1.1.0",
-    "js-cookie": "^3.0.7",
-    "tmp": "0.2.7",
-    "vite": "npm:rolldown-vite@7.3.1",
-    "dompurify": "3.4.11",
-    "js-yaml@3": "3.15.0",
-    "js-yaml@4": "4.2.0",
-    "yaml@1": "1.10.3",
-    "react-router@6": "6.30.4",
-    "markdown-it": "14.2.0",
-    "mdast-util-to-hast@13": "13.2.1",
-    "protocol-buffers-schema": "3.6.1"
   }
 }

frontend/pnpm-workspace.yaml

@@ -1,6 +1,53 @@
-trustPolicy: no-downgrade
+blockExoticSubdeps: true
 minimumReleaseAge: 2880 # 2d
-minimumReleaseAgeStrict: true
 minimumReleaseAgeExclude:
  - '@signozhq/*'
-blockExoticSubdeps: true
+minimumReleaseAgeStrict: true
+# Security floors for vulnerable transitive deps. Where possible, targets are
+# capped to avoid crossing breaking versions (major; and minor for 0.x).
+# Some entries may still force a breaking bump when no safe release exists
+# within the consumer’s constraint—see per-entry notes.
+overrides:
+ # via: direct devDep @babel/core ^7.22.11 (+ babel plugin peers)
+ # remove: bump @babel/core in package.json to ^7.29.6
+ '@babel/core@<=7.29.0': '>=7.29.6 <8'
+ # via: jest > babel-plugin-istanbul > @istanbuljs/load-nyc-config@1.1.0 (js-yaml ^3.13.1)
+ # remove: blocked — 1.1.0 is latest and still depends on js-yaml 3.x
+ '@istanbuljs/load-nyc-config>js-yaml': '>=4.2.0 <5'
+ # via: msw@1.3.2 (devDep) > cookie ^0.4.2
+ # remove: upgrade msw to >=2 (ships cookie ^1). Do NOT open the cap: cookie >=1 is
+ # ESM-only and breaks msw under jest's CJS sandbox (kills every test suite)
+ cookie@<0.7.0: '>=0.7.1 <1'
+ # via: direct dep dompurify 3.4.0; @grafana/data@11.6.15 (3.4.0/3.2.4 exact);
+ #      @monaco-editor/react > monaco-editor@0.55.1 (3.2.7 exact)
+ # remove: bump direct dep to 3.4.11; @grafana/data (latest 13.1.0) and
+ #         monaco-editor (latest 0.55.1) still pin vulnerable versions — blocked
+ dompurify@<=3.4.10: '>=3.4.11 <4'
+ # via: rolldown-vite@7.3.1 (esbuild ^0.27.0); orval@8.9.1 (^0.27.4); ts-jest@29.4.9 (~0.27.4)
+ # remove: blocked on rolldown-vite (7.3.1 is latest, still ^0.27.0);
+ #         orval >=8.20.0 and ts-jest >=29.4.11 already fixed on their side
+ esbuild@>=0.27.3 <0.28.1: '>=0.28.1 <0.29.0'
+ # via: react-use@17.5.1 (direct, js-cookie ^2.2.1); @grafana/data > react-use@17.6.0
+ # remove: bump react-use to >=17.6.1 (js-cookie ^3); @grafana/data side blocked
+ js-cookie@<=3.0.5: '>=3.0.7 <4'
+ # via: @orval/core@8.9.1 (devDep, js-yaml 4.1.1 EXACT pin — not deletable);
+ #      json-schema-to-typescript@15 > @apidevtools/json-schema-ref-parser (^4.1.0)
+ # remove: upgrade orval to >=8.20.0 (drops js-yaml dependency entirely)
+ js-yaml@>=4.0.0 <=4.1.1: '>=4.2.0 <5'
+ # via: react-syntax-highlighter@15.5.0 (prismjs ^1.27.0 + refractor@3 ~1.27.0 tilde-pinned)
+ # remove: bump react-syntax-highlighter to >=16.1.1 (prismjs ^1.30.0, refractor@5)
+ prismjs@<1.30.0: '>=1.30.0 <2'
+ # via: direct dep react-router-dom-v5-compat@6.30.3 (react-router 6.30.3 exact)
+ # remove: bump react-router-dom-v5-compat to 6.30.4. Do NOT open the cap:
+ # react-router >=7 requires React 19 and breaks the app-wide CompatRouter
+ react-router@>=6.7.0 <6.30.4: '>=6.30.4 <7'
+ # via: msw@1.3.2 (devDep) > inquirer@8 > external-editor@3.1.0 (tmp ^0.0.33)
+ # remove: upgrade msw to >=2 (drops the inquirer/external-editor chain)
+ tmp@<0.2.6: '>=0.2.6 <0.3.0'
+ # via: jest > babel-plugin-macros > cosmiconfig@7 (yaml ^1.10.0);
+ #      typescript-plugin-css-modules > postcss-load-config@3 (^1.10.2)
+ # remove: blocked — babel-plugin-macros 3.1.0 (latest) still uses cosmiconfig@7
+ yaml@>=1.0.0 <1.10.3: '>=1.10.3 <2'
+trustPolicy: no-downgrade
+trustPolicyExclude:
+ - 'semver@6.3.1 || 5.7.2'

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

@@ -2082,6 +2082,39 @@ export interface AuthtypesGettableAuthDomainDTO {
 	updatedAt?: string;
 }
 
+export interface AuthtypesGettableRoleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	description: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	/**
+	 * @type string
+	 */
+	type: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+}
+
 export interface AuthtypesGettableTokenDTO {
 	/**
 	 * @type string
@@ -2325,39 +2358,6 @@ export interface AuthtypesPostableUserRoleDTO {
 }
 
 export interface AuthtypesRoleDTO {
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	description: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 */
-	orgId: string;
-	/**
-	 * @type string
-	 */
-	type: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-}
-
-export interface AuthtypesRoleWithTransactionGroupsDTO {
 	/**
 	 * @type string
 	 * @format date-time
@@ -5669,6 +5669,39 @@ export interface InframonitoringtypesChecksDTO {
 	type: InframonitoringtypesCheckTypeDTO;
 }
 
+export type InframonitoringtypesClusterRecordDTOCounts = {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	daemonSets: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	deployments: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	jobs: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	namespaces: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	nodes: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	statefulSets: number;
+};
+
 export type InframonitoringtypesClusterRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -5813,6 +5846,10 @@ export interface InframonitoringtypesClusterRecordDTO {
 	 * @type string
 	 */
 	clusterName: string;
+	/**
+	 * @type object
+	 */
+	counts: InframonitoringtypesClusterRecordDTOCounts;
 	/**
 	 * @type object,null
 	 */
@@ -6368,6 +6405,29 @@ export interface InframonitoringtypesJobsDTO {
 	warning?: Querybuildertypesv5QueryWarnDataDTO;
 }
 
+export type InframonitoringtypesNamespaceRecordDTOCounts = {
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	daemonSets: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	deployments: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	jobs: number;
+	/**
+	 * @type integer
+	 * @format int64
+	 */
+	statefulSets: number;
+};
+
 export type InframonitoringtypesNamespaceRecordDTOMetaAnyOf = {
 	[key: string]: string;
 };
@@ -6379,6 +6439,10 @@ export type InframonitoringtypesNamespaceRecordDTOMeta =
 	InframonitoringtypesNamespaceRecordDTOMetaAnyOf | null;
 
 export interface InframonitoringtypesNamespaceRecordDTO {
+	/**
+	 * @type object
+	 */
+	counts: InframonitoringtypesNamespaceRecordDTOCounts;
 	/**
 	 * @type object,null
 	 */
@@ -9194,6 +9258,76 @@ export interface SpantypesGettableSpanMapperGroupsDTO {
 	items: SpantypesSpanMapperGroupDTO[];
 }
 
+export enum SpantypesSpanMapperOperationDTO {
+	move = 'move',
+	copy = 'copy',
+}
+export interface SpantypesSpanMapperSourceDTO {
+	context: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	key: string;
+	operation: SpantypesSpanMapperOperationDTO;
+	/**
+	 * @type integer
+	 */
+	priority: number;
+}
+
+export interface SpantypesSpanMapperConfigDTO {
+	/**
+	 * @type array,null
+	 */
+	sources: SpantypesSpanMapperSourceDTO[] | null;
+}
+
+export interface SpantypesSpanMapperDTO {
+	config: SpantypesSpanMapperConfigDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: string;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	fieldContext: SpantypesFieldContextDTO;
+	/**
+	 * @type string
+	 */
+	groupId: string;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type string
+	 */
+	name: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: string;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export interface SpantypesGettableSpanMappersDTO {
+	/**
+	 * @type array
+	 */
+	items: SpantypesSpanMapperDTO[];
+}
+
 export enum SpantypesSpanAggregationTypeDTO {
 	span_count = 'span_count',
 	execution_time_percentage = 'execution_time_percentage',
@@ -9440,30 +9574,6 @@ export interface SpantypesPostableFlamegraphDTO {
 	selectedSpanId?: string;
 }
 
-export enum SpantypesSpanMapperOperationDTO {
-	move = 'move',
-	copy = 'copy',
-}
-export interface SpantypesSpanMapperSourceDTO {
-	context: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	key: string;
-	operation: SpantypesSpanMapperOperationDTO;
-	/**
-	 * @type integer
-	 */
-	priority: number;
-}
-
-export interface SpantypesSpanMapperConfigDTO {
-	/**
-	 * @type array,null
-	 */
-	sources: SpantypesSpanMapperSourceDTO[] | null;
-}
-
 export interface SpantypesPostableSpanMapperDTO {
 	config: SpantypesSpanMapperConfigDTO;
 	/**
@@ -9512,45 +9622,6 @@ export interface SpantypesPostableWaterfallDTO {
 	uncollapsedSpans?: string[] | null;
 }
 
-export interface SpantypesSpanMapperDTO {
-	config: SpantypesSpanMapperConfigDTO;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	createdAt?: string;
-	/**
-	 * @type string
-	 */
-	createdBy?: string;
-	/**
-	 * @type boolean
-	 */
-	enabled: boolean;
-	fieldContext: SpantypesFieldContextDTO;
-	/**
-	 * @type string
-	 */
-	group_id: string;
-	/**
-	 * @type string
-	 */
-	id: string;
-	/**
-	 * @type string
-	 */
-	name: string;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	updatedAt?: string;
-	/**
-	 * @type string
-	 */
-	updatedBy?: string;
-}
-
 export interface SpantypesUpdatableSpanMapperDTO {
 	config?: SpantypesSpanMapperConfigDTO;
 	/**
@@ -10614,7 +10685,7 @@ export type ListRoles200 = {
 	/**
 	 * @type array
 	 */
-	data: AuthtypesRoleDTO[];
+	data: AuthtypesGettableRoleDTO[];
 	/**
 	 * @type string
 	 */
@@ -10636,7 +10707,7 @@ export type GetRolePathParameters = {
 	id: string;
 };
 export type GetRole200 = {
-	data: AuthtypesRoleWithTransactionGroupsDTO;
+	data: AuthtypesRoleDTO;
 	/**
 	 * @type string
 	 */
@@ -10852,7 +10923,7 @@ export type ListSpanMappersPathParameters = {
 	groupId: string;
 };
 export type ListSpanMappers200 = {
-	data: SpantypesGettableSpanMapperGroupsDTO;
+	data: SpantypesGettableSpanMappersDTO;
 	/**
 	 * @type string
 	 */

frontend/src/api/v1/download/downloadExportData.ts

@@ -1,50 +1,26 @@
 import axios from 'api';
 import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
-import { AxiosError, AxiosResponse } from 'axios';
+import { AxiosError } from 'axios';
 import { ErrorV2Resp } from 'types/api';
 import { ExportRawDataProps } from 'types/api/exportRawData/getExportRawData';
 
-export interface FetchExportDataProps extends ExportRawDataProps {
-	signal?: AbortSignal;
-}
-
-async function postExportRawData({
-	format,
-	body,
-	signal,
-}: FetchExportDataProps): Promise<AxiosResponse<Blob>> {
-	return axios.post<Blob>(
-		`export_raw_data?format=${encodeURIComponent(format)}`,
-		body,
-		{
-			responseType: 'blob',
-			decompress: true,
-			headers: {
-				Accept: 'application/octet-stream',
-				'Content-Type': 'application/json',
-			},
-			timeout: 0,
-			signal,
-		},
-	);
-}
-
-/**
- * Fetches a single export_raw_data page and returns it as a Blob.
- * Callers own retry/cancel/error UX.
- */
-export async function fetchExportData(
-	props: FetchExportDataProps,
-): Promise<Blob> {
-	const response = await postExportRawData(props);
-	return response.data;
-}
-
 export const downloadExportData = async (
 	props: ExportRawDataProps,
 ): Promise<void> => {
 	try {
-		const response = await postExportRawData(props);
+		const response = await axios.post<Blob>(
+			`export_raw_data?format=${encodeURIComponent(props.format)}`,
+			props.body,
+			{
+				responseType: 'blob',
+				decompress: true,
+				headers: {
+					Accept: 'application/octet-stream',
+					'Content-Type': 'application/json',
+				},
+				timeout: 0,
+			},
+		);
 
 		if (response.status !== 200) {
 			throw new Error(

frontend/src/auto-import-registry.d.ts

@@ -12,5 +12,4 @@
 
 import '@signozhq/design-tokens';
 import '@signozhq/icons';
-import '@signozhq/resizable';
 import '@signozhq/ui';

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -3,6 +3,7 @@ import { Button, Popover, Tooltip } from 'antd';
 import { RadioGroup, RadioGroupItem } from '@signozhq/ui/radio-group';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
+import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useExportRawData } from 'hooks/useExportData/useServerExport';
 import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
@@ -18,11 +19,13 @@ import './DownloadOptionsMenu.styles.scss';
 interface DownloadOptionsMenuProps {
 	dataSource: DataSource;
 	selectedColumns?: TelemetryFieldKey[];
+	panelType?: PANEL_TYPES;
 }
 
 export default function DownloadOptionsMenu({
 	dataSource,
 	selectedColumns,
+	panelType,
 }: DownloadOptionsMenuProps): JSX.Element {
 	const [exportFormat, setExportFormat] = useState<string>(DownloadFormats.CSV);
 	const [rowLimit, setRowLimit] = useState<number>(DownloadRowCounts.TEN_K);
@@ -33,6 +36,7 @@ export default function DownloadOptionsMenu({
 
 	const { isDownloading, handleExportRawData } = useExportRawData({
 		dataSource,
+		panelType,
 	});
 
 	const handleExport = useCallback(async (): Promise<void> => {

frontend/src/components/RolesSelect/RolesSelect.tsx

@@ -3,7 +3,7 @@ import { Select } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import { useListRoles } from 'api/generated/services/role';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 import APIError from 'types/api/error';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -16,7 +16,7 @@ export interface RoleOption {
 }
 
 export function useRoles(): {
-	roles: AuthtypesRoleDTO[];
+	roles: AuthtypesGettableRoleDTO[];
 	isLoading: boolean;
 	isError: boolean;
 	error: APIError | undefined;
@@ -33,7 +33,7 @@ export function useRoles(): {
 }
 
 export function getRoleOptions(
-	roles: AuthtypesRoleDTO[],
+	roles: AuthtypesGettableRoleDTO[],
 	valueField: 'id' | 'name',
 ): RoleOption[] {
 	return roles.map((role) => ({
@@ -79,7 +79,7 @@ interface BaseProps {
 	placeholder?: string;
 	className?: string;
 	getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
-	roles?: AuthtypesRoleDTO[];
+	roles?: AuthtypesGettableRoleDTO[];
 	loading?: boolean;
 	isError?: boolean;
 	error?: APIError;

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -4,7 +4,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { useCopyToClipboard } from 'react-use';
-import type { AuthtypesRoleDTO } from 'api/generated/services/sigNoz.schemas';
+import type { AuthtypesGettableRoleDTO } from 'api/generated/services/sigNoz.schemas';
 import AuthZTooltip from 'lib/authz/components/AuthZTooltip/AuthZTooltip';
 import { withAuthZContent } from 'lib/authz/components/withAuthZ/withAuthZContent';
 import RolesSelect from 'components/RolesSelect';
@@ -28,7 +28,7 @@ interface OverviewTabProps {
 	localRoles: string[];
 	onRolesChange: (v: string[]) => void;
 	isDisabled: boolean;
-	availableRoles: AuthtypesRoleDTO[];
+	availableRoles: AuthtypesGettableRoleDTO[];
 	rolesLoading?: boolean;
 	rolesError?: boolean;
 	rolesErrorObj?: APIError | undefined;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -11,17 +11,17 @@ import { FlatItem, TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
 
-type VirtuosoTableRowProps<TData> = ComponentProps<
+type VirtuosoTableRowProps<TData, TItemKey = string> = ComponentProps<
 	NonNullable<
-		TableComponents<FlatItem<TData>, TableRowContext<TData>>['TableRow']
+		TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>>['TableRow']
 	>
 >;
 
-function TanStackCustomTableRow<TData>({
+function TanStackCustomTableRow<TData, TItemKey = string>({
 	item,
 	context,
 	...props
-}: VirtuosoTableRowProps<TData>): JSX.Element {
+}: VirtuosoTableRowProps<TData, TItemKey>): JSX.Element {
 	const rowId = item.row.id;
 	const rowData = item.row.original;
 
@@ -84,9 +84,9 @@ function TanStackCustomTableRow<TData>({
 // This looks overkill but ensures the table is stable and doesn't re-render on every change
 // If you add any new prop to context, remember to update this function
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function areTableRowPropsEqual<TData>(
-	prev: Readonly<VirtuosoTableRowProps<TData>>,
-	next: Readonly<VirtuosoTableRowProps<TData>>,
+function areTableRowPropsEqual<TData, TItemKey = string>(
+	prev: Readonly<VirtuosoTableRowProps<TData, TItemKey>>,
+	next: Readonly<VirtuosoTableRowProps<TData, TItemKey>>,
 ): boolean {
 	if (prev.item.row.id !== next.item.row.id) {
 		return false;
@@ -141,7 +141,9 @@ function areTableRowPropsEqual<TData>(
 	return true;
 }
 
-export default memo(
-	TanStackCustomTableRow,
-	areTableRowPropsEqual,
-) as typeof TanStackCustomTableRow;
+export default memo(TanStackCustomTableRow, areTableRowPropsEqual as any) as <
+	TData,
+	TItemKey = string,
+>(
+	props: VirtuosoTableRowProps<TData, TItemKey>,
+) => JSX.Element;

frontend/src/components/TanStackTableView/TanStackRow.tsx

@@ -8,23 +8,23 @@ import { TableRowContext } from './types';
 
 import tableStyles from './TanStackTable.module.scss';
 
-type TanStackRowCellsProps<TData> = {
+type TanStackRowCellsProps<TData, TItemKey = string> = {
 	row: TanStackRowModel<TData>;
-	context: TableRowContext<TData> | undefined;
+	context: TableRowContext<TData, TItemKey> | undefined;
 	itemKind: 'row' | 'expansion';
 	hasSingleColumn: boolean;
 	columnOrderKey: string;
 	columnVisibilityKey: string;
 };
 
-function TanStackRowCellsInner<TData>({
+function TanStackRowCellsInner<TData, TItemKey = string>({
 	row,
 	context,
 	itemKind,
 	hasSingleColumn,
 	columnOrderKey: _columnOrderKey,
 	columnVisibilityKey: _columnVisibilityKey,
-}: TanStackRowCellsProps<TData>): JSX.Element {
+}: TanStackRowCellsProps<TData, TItemKey>): JSX.Element {
 	const hasHovered = useIsRowHovered(row.id);
 	const rowData = row.original;
 	const visibleCells = row.getVisibleCells();
@@ -40,8 +40,10 @@ function TanStackRowCellsInner<TData>({
 
 	const handleClick = useCallback(
 		(event: MouseEvent<HTMLTableCellElement>) => {
+			// Fall back to an empty key so row clicks still fire for consumers
+			// that don't provide getRowKey (e.g. Logs Explorer / Live Logs).
 			const keyData = getRowKeyData?.(rowIndex);
-			const itemKey = keyData?.itemKey ?? '';
+			const itemKey = keyData?.itemKey ?? ('' as TItemKey);
 
 			// Handle ctrl+click or cmd+click (open in new tab)
 			if ((event.ctrlKey || event.metaKey) && onRowClickNewTab) {
@@ -131,6 +133,8 @@ function areRowCellsPropsEqual<TData>(
 const TanStackRowCells = memo(
 	TanStackRowCellsInner,
 	areRowCellsPropsEqual as any,
-) as <T>(props: TanStackRowCellsProps<T>) => JSX.Element;
+) as <T, TItemKey = string>(
+	props: TanStackRowCellsProps<T, TItemKey>,
+) => JSX.Element;
 
 export default TanStackRowCells;

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -67,7 +67,7 @@ const INCREASE_VIEWPORT_BY = { top: 500, bottom: 500 };
 const noopColumnVisibility = (): void => {};
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-function TanStackTableInner<TData>(
+function TanStackTableInner<TData, TItemKey = string>(
 	{
 		data,
 		columns,
@@ -107,7 +107,7 @@ function TanStackTableInner<TData>(
 		suffixPaginationContent,
 		enableAlternatingRowColors,
 		disableVirtualScroll,
-	}: TanStackTableProps<TData>,
+	}: TanStackTableProps<TData, TItemKey>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
 	if (disableVirtualScroll && onEndReached) {
@@ -193,7 +193,7 @@ function TanStackTableInner<TData>(
 		skeletonRowCount,
 	});
 
-	const { rowKeyData, getRowKeyData } = useRowKeyData({
+	const { rowKeyData, getRowKeyData } = useRowKeyData<TData, TItemKey>({
 		data: effectiveData,
 		isLoading,
 		getRowKey,
@@ -229,7 +229,7 @@ function TanStackTableInner<TData>(
 	const tanstackColumns = useMemo<ColumnDef<TData>[]>(
 		() =>
 			effectiveColumns.map((colDef) =>
-				buildTanstackColumnDef(colDef, isRowActive, getRowKeyData),
+				buildTanstackColumnDef<TData, TItemKey>(colDef, isRowActive, getRowKeyData),
 			),
 		[effectiveColumns, isRowActive, getRowKeyData],
 	);
@@ -356,7 +356,7 @@ function TanStackTableInner<TData>(
 		[effectiveVisibility, columnIds],
 	);
 
-	const virtuosoContext = useMemo<TableRowContext<TData>>(
+	const virtuosoContext = useMemo<TableRowContext<TData, TItemKey>>(
 		() => ({
 			getRowStyle,
 			getRowClassName,
@@ -520,13 +520,15 @@ function TanStackTableInner<TData>(
 	);
 
 	type VirtuosoTableComponentProps = ComponentProps<
-		NonNullable<TableComponents<FlatItem<TData>, TableRowContext<TData>>['Table']>
+		NonNullable<
+			TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>>['Table']
+		>
 	>;
 
 	// Use refs in virtuosoComponents to keep the component reference stable during resize
 	// This prevents Virtuoso from re-rendering all rows when columns are resized
 	const virtuosoComponents = useMemo(
-		() => ({
+		(): TableComponents<FlatItem<TData>, TableRowContext<TData, TItemKey>> => ({
 			Table: ({ style, children }: VirtuosoTableComponentProps): JSX.Element => (
 				<table className={tableStyles.tanStackTable} style={style}>
 					<VirtuosoTableColGroup
@@ -582,7 +584,7 @@ function TanStackTableInner<TData>(
 							</table>
 						</div>
 					) : (
-						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData, TItemKey>>
 							className={virtuosoClassName}
 							ref={virtuosoRef}
 							{...restTableScrollerProps}
@@ -660,8 +662,11 @@ function TanStackTableInner<TData>(
 	);
 }
 
-const TanStackTableForward = forwardRef(TanStackTableInner) as <TData>(
-	props: TanStackTableProps<TData> & {
+const TanStackTableForward = forwardRef(TanStackTableInner) as <
+	TData,
+	TItemKey = string,
+>(
+	props: TanStackTableProps<TData, TItemKey> & {
 		ref?: React.Ref<TanStackTableHandle>;
 	},
 ) => JSX.Element;

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

@@ -57,6 +57,39 @@ describe('TanStackRowCells', () => {
 	});
 
 	it('calls onRowClick when a cell is clicked', async () => {
+		const user = userEvent.setup();
+		const onRowClick = jest.fn();
+		const ctx: TableRowContext<Row> = {
+			colCount: 1,
+			onRowClick,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
+			hasSingleColumn: false,
+			columnOrderKey: '',
+			columnVisibilityKey: '',
+		};
+		const row = buildMockRow([{ id: 'body' }]);
+		render(
+			<table>
+				<tbody>
+					<tr>
+						<TanStackRowCells<Row>
+							row={row as never}
+							context={ctx}
+							itemKind="row"
+							hasSingleColumn={false}
+							columnOrderKey=""
+							columnVisibilityKey=""
+						/>
+					</tr>
+				</tbody>
+			</table>,
+		);
+		await user.click(screen.getAllByRole('cell')[0]);
+		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
+	});
+
+	it('fires onRowClick with empty itemKey when getRowKeyData is not provided', async () => {
+		// Mirrors Logs Explorer / Live Logs, which set onRowClick but no getRowKey.
 		const user = userEvent.setup();
 		const onRowClick = jest.fn();
 		const ctx: TableRowContext<Row> = {
@@ -84,7 +117,6 @@ describe('TanStackRowCells', () => {
 			</table>,
 		);
 		await user.click(screen.getAllByRole('cell')[0]);
-		// onRowClick receives (rowData, itemKey) - itemKey is empty when getRowKeyData not provided
 		expect(onRowClick).toHaveBeenCalledWith({ id: 'r1' }, '');
 	});
 
@@ -97,6 +129,7 @@ describe('TanStackRowCells', () => {
 			onRowClick,
 			onRowDeactivate,
 			isRowActive: () => true,
+			getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 			hasSingleColumn: false,
 			columnOrderKey: '',
 			columnVisibilityKey: '',
@@ -194,6 +227,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',
@@ -216,7 +250,7 @@ describe('TanStackRowCells', () => {
 				</table>,
 			);
 			fireEvent.click(screen.getAllByRole('cell')[0], { ctrlKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
+			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
@@ -227,6 +261,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',
@@ -249,7 +284,7 @@ describe('TanStackRowCells', () => {
 				</table>,
 			);
 			fireEvent.click(screen.getAllByRole('cell')[0], { metaKey: true });
-			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, '');
+			expect(onRowClickNewTab).toHaveBeenCalledWith({ id: 'r1' }, 'r1');
 			expect(onRowClick).not.toHaveBeenCalled();
 		});
 
@@ -260,6 +295,7 @@ describe('TanStackRowCells', () => {
 				colCount: 1,
 				onRowClick,
 				onRowClickNewTab,
+				getRowKeyData: () => ({ finalKey: 'r1', itemKey: 'r1' }),
 				hasSingleColumn: false,
 				columnOrderKey: '',
 				columnVisibilityKey: '',

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

@@ -614,6 +614,34 @@ describe('TanStackTableView Integration', () => {
 			);
 		});
 
+		it('calls onRowClick with object itemKey when getItemKey returns object', async () => {
+			type SelectionParams = { id: string; name: string };
+			const user = userEvent.setup();
+			const onRowClick = jest.fn<void, [unknown, SelectionParams]>();
+
+			renderTanStackTable<
+				(typeof import('./testUtils').defaultData)[0],
+				SelectionParams
+			>({
+				props: {
+					onRowClick,
+					getRowKey: (row) => row.id,
+					getItemKey: (row) => ({ id: row.id, name: row.name }),
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			await user.click(screen.getByText('Item 1'));
+
+			expect(onRowClick).toHaveBeenCalledWith(
+				expect.objectContaining({ id: '1', name: 'Item 1' }),
+				{ id: '1', name: 'Item 1' },
+			);
+		});
+
 		it('applies active class when isRowActive returns true', async () => {
 			renderTanStackTable({
 				props: {

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

@@ -42,14 +42,14 @@ export const defaultData: TestRow[] = [
 	{ id: '3', name: 'Item 3', value: 300 },
 ];
 
-export type RenderTanStackTableOptions<T> = {
-	props?: Partial<TanStackTableProps<T>>;
+export type RenderTanStackTableOptions<T, TItemKey = string> = {
+	props?: Partial<TanStackTableProps<T, TItemKey>>;
 	queryParams?: Record<string, string>;
 	onUrlUpdate?: OnUrlUpdateFunction;
 };
 
-export function renderTanStackTable<T = TestRow>(
-	options: RenderTanStackTableOptions<T> = {},
+export function renderTanStackTable<T = TestRow, TItemKey = string>(
+	options: RenderTanStackTableOptions<T, TItemKey> = {},
 ): RenderResult {
 	const { props = {}, queryParams, onUrlUpdate } = options;
 
@@ -57,7 +57,7 @@ export function renderTanStackTable<T = TestRow>(
 		data: defaultData as unknown as T[],
 		columns: defaultColumns as unknown as TableColumnDef<T>[],
 		...props,
-	} as TanStackTableProps<T>;
+	} as TanStackTableProps<T, TItemKey>;
 
 	return render(
 		<NuqsTestingAdapter searchParams={queryParams} onUrlUpdate={onUrlUpdate}>
@@ -65,7 +65,7 @@ export function renderTanStackTable<T = TestRow>(
 				value={{ viewportHeight: 500, itemHeight: 50 }}
 			>
 				<TooltipProvider>
-					<TanStackTable<T> {...mergedProps} />
+					<TanStackTable<T, TItemKey> {...mergedProps} />
 				</TooltipProvider>
 			</VirtuosoMockContext.Provider>
 		</NuqsTestingAdapter>,

frontend/src/components/TanStackTableView/index.tsx

@@ -123,6 +123,22 @@ export * from './useTableParams';
  * />
  * ```
  *
+ * @example Object itemKey — use generic `TItemKey` when selection needs compound keys.
+ * ```tsx
+ * type SelectionParams = { id: string; cluster: string; namespace: string };
+ *
+ * <TanStackTable<Row, SelectionParams>
+ *   data={data}
+ *   columns={columns}
+ *   getRowKey={(row) => row.uid}
+ *   getItemKey={(row) => ({ id: row.name, cluster: row.cluster, namespace: row.namespace })}
+ *   onRowClick={(row, itemKey) => {
+ *     // itemKey is typed as SelectionParams
+ *     setSelection(itemKey);
+ *   }}
+ * />
+ * ```
+ *
  * @example Expandable rows. `renderExpandedRow` receives `(row, rowKey, groupMeta?)`.
  * ```tsx
  * <TanStackTable

frontend/src/components/TanStackTableView/types.ts

@@ -24,17 +24,15 @@ export type TableCellContext<TData, TValue> = {
 	isExpanded: boolean;
 	canExpand: boolean;
 	toggleExpanded: () => void;
-	/** Business/selection key for the row */
-	itemKey: string;
 	/** Group metadata when row is part of a grouped view */
 	groupMeta?: Record<string, string>;
 };
 
-export type RowKeyData = {
+export type RowKeyData<TItemKey = string> = {
 	/** Final unique key (with duplicate suffix if needed) */
 	finalKey: string;
 	/** Business/selection key */
-	itemKey: string;
+	itemKey: TItemKey;
 	/** Group metadata */
 	groupMeta?: Record<string, string>;
 };
@@ -82,14 +80,14 @@ export type FlatItem<TData> =
 	| { kind: 'row'; row: TanStackRowType<TData> }
 	| { kind: 'expansion'; row: TanStackRowType<TData> };
 
-export type TableRowContext<TData> = {
+export type TableRowContext<TData, TItemKey = string> = {
 	getRowStyle?: (row: TData) => CSSProperties;
 	getRowClassName?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
+	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
 	onRowDeactivate?: () => void;
 	renderExpandedRow?: (
 		row: TData,
@@ -97,7 +95,7 @@ export type TableRowContext<TData> = {
 		groupMeta?: Record<string, string>,
 	) => ReactNode;
 	/** Get key data for a row by index */
-	getRowKeyData?: (index: number) => RowKeyData | undefined;
+	getRowKeyData?: (index: number) => RowKeyData<TItemKey> | undefined;
 	colCount: number;
 	isDarkMode?: boolean;
 	/** When set, primitive cell output (string/number/boolean) is wrapped with typography + line-clamp (see `plainTextCellLineClamp` on the table). */
@@ -147,7 +145,7 @@ export type TanstackTableQueryParamsConfig = {
 	expanded?: string;
 };
 
-export type TanStackTableProps<TData> = {
+export type TanStackTableProps<TData, TItemKey = string> = {
 	data: TData[];
 	columns: TableColumnDef<TData>[];
 	/** Storage key for column state persistence (visibility, sizing, ordering). When set, enables unified column management. */
@@ -172,7 +170,7 @@ export type TanStackTableProps<TData> = {
 	 * When set, enables automatic duplicate key detection and group-aware key composition. */
 	getRowKey?: (row: TData) => string;
 	/** Function to get the business/selection key. Defaults to getRowKey result. */
-	getItemKey?: (row: TData) => string;
+	getItemKey?: (row: TData) => TItemKey;
 	/** When set, enables group-aware key generation (prefixes rowKey with group values). */
 	groupBy?: Array<{ key: string }>;
 	/** Extract group metadata from a row. Required when groupBy is set. */
@@ -181,9 +179,9 @@ export type TanStackTableProps<TData> = {
 	getRowClassName?: (row: TData) => string;
 	isRowActive?: (row: TData) => boolean;
 	renderRowActions?: (row: TData) => ReactNode;
-	onRowClick?: (row: TData, itemKey: string) => void;
+	onRowClick?: (row: TData, itemKey: TItemKey) => void;
 	/** Called when ctrl+click or cmd+click on a row */
-	onRowClickNewTab?: (row: TData, itemKey: string) => void;
+	onRowClickNewTab?: (row: TData, itemKey: TItemKey) => void;
 	onRowDeactivate?: () => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (

frontend/src/components/TanStackTableView/useRowKeyData.ts

@@ -1,51 +1,51 @@
 import { useCallback, useMemo } from 'react';
 
-export interface RowKeyDataItem {
+export interface RowKeyDataItem<TItemKey = string> {
 	/** Final unique key for the row (with dedup suffix if needed) */
 	finalKey: string;
 	/** Item key for tracking (may differ from finalKey) */
-	itemKey: string;
+	itemKey: TItemKey;
 	/** Group metadata when grouped */
 	groupMeta: Record<string, string> | undefined;
 }
 
-export interface UseRowKeyDataOptions<TData> {
+export interface UseRowKeyDataOptions<TData, TItemKey = string> {
 	data: TData[];
 	isLoading: boolean;
 	getRowKey?: (item: TData) => string;
-	getItemKey?: (item: TData) => string;
+	getItemKey?: (item: TData) => TItemKey;
 	groupBy?: Array<{ key: string }>;
 	getGroupKey?: (item: TData) => Record<string, string>;
 }
 
-export interface UseRowKeyDataResult {
+export interface UseRowKeyDataResult<TItemKey = string> {
 	/** Array of key data for each row, undefined if getRowKey not provided or loading */
-	rowKeyData: RowKeyDataItem[] | undefined;
-	getRowKeyData: (index: number) => RowKeyDataItem | undefined;
+	rowKeyData: RowKeyDataItem<TItemKey>[] | undefined;
+	getRowKeyData: (index: number) => RowKeyDataItem<TItemKey> | undefined;
 }
 
 /**
  * Computes unique row keys with duplicate handling and group prefixes.
  */
-export function useRowKeyData<TData>({
+export function useRowKeyData<TData, TItemKey = string>({
 	data,
 	isLoading,
 	getRowKey,
 	getItemKey,
 	groupBy,
 	getGroupKey,
-}: UseRowKeyDataOptions<TData>): UseRowKeyDataResult {
+}: UseRowKeyDataOptions<TData, TItemKey>): UseRowKeyDataResult<TItemKey> {
 	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const rowKeyData = useMemo((): RowKeyDataItem[] | undefined => {
+	const rowKeyData = useMemo((): RowKeyDataItem<TItemKey>[] | undefined => {
 		if (!getRowKey || isLoading) {
 			return undefined;
 		}
 
 		const keyCount = new Map<string, number>();
 
-		return data.map((item, index): RowKeyDataItem => {
+		return data.map((item, index): RowKeyDataItem<TItemKey> => {
 			const itemIdentifier = getRowKey(item);
-			const itemKey = getItemKey?.(item) ?? itemIdentifier;
+			const itemKey = getItemKey?.(item) ?? (itemIdentifier as TItemKey);
 			const groupMeta = groupBy?.length ? getGroupKey?.(item) : undefined;
 
 			// Build rowKey with group prefix when grouped

frontend/src/components/TanStackTableView/utils.ts

@@ -86,10 +86,10 @@ const buildAccessorFn = <TData>(
 	};
 };
 
-export function buildTanstackColumnDef<TData>(
+export function buildTanstackColumnDef<TData, TItemKey = string>(
 	colDef: TableColumnDef<TData>,
 	isRowActive?: (row: TData) => boolean,
-	getRowKeyData?: (index: number) => RowKeyData | undefined,
+	getRowKeyData?: (index: number) => RowKeyData<TItemKey> | undefined,
 ): ColumnDef<TData> {
 	const isFixed = colDef.width?.fixed != null;
 	const headerFn =
@@ -140,7 +140,6 @@ export function buildTanstackColumnDef<TData>(
 				toggleExpanded: (): void => {
 					row.toggleExpanded();
 				},
-				itemKey: keyData?.itemKey ?? '',
 				groupMeta: keyData?.groupMeta,
 			});
 		},

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -10,6 +10,7 @@ import {
 import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
+import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import {
 	getHostQueryPayload,
 	hostWidgetInfo,
@@ -107,8 +108,10 @@ export function getHostMetricsQueryPayload(
 
 export { hostWidgetInfo };
 
-export const hostGetSelectedItemExpression = (hostName: string): string =>
-	`host.name = ${formatValueForExpression(hostName)}`;
+export const hostGetSelectedItemExpression = (
+	params: SelectedItemParams,
+): string =>
+	`host.name = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export function hostInitialLogTracesExpression(
 	host: InframonitoringtypesHostRecordDTO,

frontend/src/container/InfraMonitoringK8sV2/Base/ColumnHeader.tsx

@@ -51,7 +51,7 @@ function ColumnHeader({
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 								onClick={(e): void => e.stopPropagation()}
 							>
 								Learn more.

frontend/src/container/InfraMonitoringK8sV2/Base/EntityGroupHeader.tsx

@@ -30,7 +30,7 @@ function EntityGroupHeader({
 							<a
 								href={`${DOCS_BASE_URL}${docPath}`}
 								target="_blank"
-								rel="noopener noreferrer"
+								rel="noopener"
 								onClick={(e): void => e.stopPropagation()}
 							>
 								Learn more.

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseDetails.tsx

@@ -52,9 +52,10 @@ import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
 import EntityTraces from '../EntityDetailsUtils/EntityTraces';
 import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
 import {
+	SelectedItemParams,
 	useInfraMonitoringEventsFilters,
 	useInfraMonitoringLogFilters,
-	useInfraMonitoringSelectedItem,
+	useInfraMonitoringSelectedItemParams,
 	useInfraMonitoringTracesFilters,
 	useInfraMonitoringView,
 } from '../hooks';
@@ -62,6 +63,10 @@ import LoadingContainer from '../LoadingContainer';
 
 import '../EntityDetailsUtils/entityDetails.styles.scss';
 import { parseAsString, useQueryState } from 'nuqs';
+import {
+	EntityCountConfig,
+	EntityCountsSection,
+} from './components/EntityCountsSection/EntityCountsSection';
 
 const TimeRangeOffset = 1000000000;
 
@@ -71,6 +76,8 @@ export interface K8sDetailsMetadataConfig<T> {
 	render?: (value: string | number, entity: T) => React.ReactNode;
 }
 
+export type K8sDetailsCountConfig<T> = EntityCountConfig<T>;
+
 export interface K8sDetailsFilters {
 	filter: { expression: string };
 	start: number;
@@ -81,7 +88,7 @@ export interface K8sBaseDetailsProps<T> {
 	category: InfraMonitoringEntity;
 	eventCategory: string;
 	// Data fetching configuration
-	getSelectedItemExpression: (selectedItem: string) => string;
+	getSelectedItemExpression: (params: SelectedItemParams) => string;
 	fetchEntityData: (
 		filters: K8sDetailsFilters,
 		signal?: AbortSignal,
@@ -91,9 +98,12 @@ export interface K8sBaseDetailsProps<T> {
 	getInitialLogTracesExpression: (entity: T) => string;
 	getInitialEventsExpression: (entity: T) => string;
 	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	countsConfig?: K8sDetailsCountConfig<T>[];
+	getCountsFilterExpression?: (entity: T) => string;
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
+		docPath?: string;
 	}[];
 	getEntityQueryPayload: (
 		entity: T,
@@ -136,6 +146,8 @@ export default function K8sBaseDetails<T>({
 	getInitialLogTracesExpression,
 	getInitialEventsExpression,
 	metadataConfig,
+	countsConfig,
+	getCountsFilterExpression,
 	entityWidgetInfo,
 	getEntityQueryPayload,
 	queryKeyPrefix,
@@ -152,7 +164,9 @@ export default function K8sBaseDetails<T>({
 
 	const isDarkMode = useIsDarkMode();
 
-	const [selectedItem, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+	const selectedItem = selectedItemParams.selectedItem;
 
 	const entityQueryKey = useMemo(
 		() =>
@@ -160,8 +174,17 @@ export default function K8sBaseDetails<T>({
 				selectedTime,
 				`${queryKeyPrefix}EntityDetails`,
 				selectedItem,
+				selectedItemParams.clusterName,
+				selectedItemParams.namespaceName,
 			),
-		[queryKeyPrefix, selectedItem, selectedTime, getAutoRefreshQueryKey],
+		[
+			queryKeyPrefix,
+			selectedItem,
+			selectedItemParams.clusterName,
+			selectedItemParams.namespaceName,
+			selectedTime,
+			getAutoRefreshQueryKey,
+		],
 	);
 
 	const {
@@ -178,7 +201,7 @@ export default function K8sBaseDetails<T>({
 			const { minTime, maxTime } = getMinMaxTime();
 			const start = Math.floor(minTime / NANO_SECOND_MULTIPLIER);
 			const end = Math.floor(maxTime / NANO_SECOND_MULTIPLIER);
-			const expression = getSelectedItemExpression(selectedItem);
+			const expression = getSelectedItemExpression(selectedItemParams);
 
 			return fetchEntityData({ filter: { expression }, start, end }, signal);
 		},
@@ -203,8 +226,8 @@ export default function K8sBaseDetails<T>({
 	}, [entity, getInitialEventsExpression]);
 
 	const handleClose = useCallback((): void => {
-		setSelectedItem(null);
-	}, [setSelectedItem]);
+		setSelectedItemParams(null);
+	}, [setSelectedItemParams]);
 
 	const entityName = entity ? getEntityName(entity) : '';
 
@@ -467,6 +490,19 @@ export default function K8sBaseDetails<T>({
 								})}
 							</div>
 						</div>
+
+						{countsConfig &&
+							countsConfig.length > 0 &&
+							selectedItem &&
+							getCountsFilterExpression && (
+								<EntityCountsSection
+									entity={entity}
+									countsConfig={countsConfig}
+									selectedItem={selectedItem}
+									filterExpression={getCountsFilterExpression(entity)}
+									closeDrawer={handleClose}
+								/>
+							)}
 					</div>
 
 					{!hideDetailViewTabs && (

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -10,7 +10,6 @@ import TanStackTable, {
 } from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { parseAsString, useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
 import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
 import { Querybuildertypesv5QueryWarnDataDTO } from 'api/generated/services/sigNoz.schemas';
@@ -21,8 +20,10 @@ import {
 	InfraMonitoringEntity,
 } from '../constants';
 import {
+	SelectedItemParams,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
+	useInfraMonitoringSelectedItemParams,
 	useInfraMonitoringStatusFilter,
 } from '../hooks';
 import { useInfraMonitoringLineClamp } from '../components';
@@ -49,7 +50,10 @@ export type K8sBaseListEmptyStateContext = {
 /** Base type constraint for K8s entity data */
 export type K8sEntityData = { meta?: Record<string, string> | null };
 
-export type K8sBaseListProps<T extends K8sEntityData> = {
+export type K8sBaseListProps<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+> = {
 	controlListPrefix?: React.ReactNode;
 	leftFilters?: React.ReactNode;
 	entity: InfraMonitoringEntity;
@@ -69,8 +73,8 @@ export type K8sBaseListProps<T extends K8sEntityData> = {
 	}>;
 	/** Function to get the unique key for a row. */
 	getRowKey?: (record: T) => string;
-	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
+	/** Function to get the item key used for selection. Can return string or SelectedItemParams. */
+	getItemKey?: (record: T) => TItemKey;
 	eventCategory: InfraMonitoringEvents;
 	renderEmptyState?: (
 		context: K8sBaseListEmptyStateContext,
@@ -78,7 +82,10 @@ export type K8sBaseListProps<T extends K8sEntityData> = {
 	extraQueryKeyParts?: string[];
 };
 
-export function K8sBaseList<T extends K8sEntityData>({
+export function K8sBaseList<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+>({
 	controlListPrefix,
 	leftFilters,
 	entity,
@@ -89,17 +96,16 @@ export function K8sBaseList<T extends K8sEntityData>({
 	eventCategory,
 	renderEmptyState,
 	extraQueryKeyParts = [],
-}: K8sBaseListProps<T>): JSX.Element {
+}: K8sBaseListProps<T, TItemKey>): JSX.Element {
 	const { currentQuery } = useQueryBuilder();
 	const expression = currentQuery.builder.queryData[0]?.filter?.expression || '';
 	const lineClamp = useInfraMonitoringLineClamp();
 	const [groupBy] = useInfraMonitoringGroupBy();
 	const [orderBy] = useInfraMonitoringOrderBy();
 	const [statusFilter] = useInfraMonitoringStatusFilter();
-	const [selectedItem, setSelectedItem] = useQueryState(
-		'selectedItem',
-		parseAsString,
-	);
+	const [selectedItemParams, setSelectedItemParams] =
+		useInfraMonitoringSelectedItemParams();
+	const selectedItem = selectedItemParams.selectedItem;
 
 	const columnStorageKey = `k8s-${entity}-columns`;
 	const hiddenColumnIds = useHiddenColumnIds(columnStorageKey);
@@ -226,9 +232,17 @@ export function K8sBaseList<T extends K8sEntityData>({
 	}, [eventCategory, totalCount]);
 
 	const handleRowClick = useCallback(
-		(_record: T, itemKey: string): void => {
+		(_record: T, itemKey: TItemKey): void => {
 			if (groupBy.length === 0) {
-				void setSelectedItem(itemKey);
+				if (typeof itemKey === 'object' && itemKey !== null) {
+					setSelectedItemParams(itemKey);
+				} else {
+					setSelectedItemParams({
+						selectedItem: itemKey,
+						clusterName: null,
+						namespaceName: null,
+					});
+				}
 			}
 
 			void logEvent(InfraMonitoringEvents.ItemClicked, {
@@ -237,18 +251,43 @@ export function K8sBaseList<T extends K8sEntityData>({
 				category: eventCategory,
 			});
 		},
-		[eventCategory, groupBy.length, setSelectedItem],
+		[eventCategory, groupBy.length, setSelectedItemParams],
 	);
 
 	const handleRowClickNewTab = useCallback(
-		(_record: T, itemKey: string): void => {
+		(_record: T, itemKey: TItemKey): void => {
 			if (groupBy.length > 0) {
 				return;
 			}
 
-			// Build URL with selectedItem param
+			// Build URL with selectedItem params
 			const url = new URL(window.location.href);
-			url.searchParams.set('selectedItem', itemKey);
+			if (typeof itemKey === 'object' && itemKey !== null) {
+				const params = itemKey;
+				if (params.selectedItem) {
+					url.searchParams.set(
+						INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM,
+						params.selectedItem,
+					);
+				}
+				if (params.clusterName) {
+					url.searchParams.set(
+						INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME,
+						params.clusterName,
+					);
+				}
+				if (params.namespaceName) {
+					url.searchParams.set(
+						INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME,
+						params.namespaceName,
+					);
+				}
+			} else {
+				url.searchParams.set(
+					INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM,
+					itemKey,
+				);
+			}
 			openInNewTab(url.pathname + url.search);
 
 			void logEvent(InfraMonitoringEvents.ItemClicked, {
@@ -274,7 +313,7 @@ export function K8sBaseList<T extends K8sEntityData>({
 			rowKey: string,
 			groupMeta?: Record<string, string>,
 		): JSX.Element => (
-			<K8sExpandedRow<T>
+			<K8sExpandedRow<T, TItemKey>
 				rowKey={rowKey}
 				groupMeta={groupMeta}
 				entity={entity}
@@ -347,7 +386,7 @@ export function K8sBaseList<T extends K8sEntityData>({
 				{showEmptyState ? (
 					<div className={styles.emptyStateContainer}>{emptyTableMessage}</div>
 				) : (
-					<TanStackTable<T>
+					<TanStackTable<T, TItemKey>
 						data={pageData}
 						columns={tableColumns}
 						columnStorageKey={columnStorageKey}

frontend/src/container/InfraMonitoringK8sV2/Base/K8sExpandedRow.tsx

@@ -22,10 +22,11 @@ import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
 
 import { InfraMonitoringEntity } from '../constants';
 import {
+	SelectedItemParams,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
 	useInfraMonitoringPageListing,
-	useInfraMonitoringSelectedItem,
+	useInfraMonitoringSelectedItemParams,
 } from '../hooks';
 import { K8sBaseFilters } from './types';
 
@@ -34,7 +35,7 @@ import { buildExpressionFromGroupMeta } from './utils';
 
 const EXPANDED_ROW_LIMIT = 10;
 
-export type K8sExpandedRowProps<T> = {
+export type K8sExpandedRowProps<T, TItemKey = string> = {
 	/** Pre-computed row key from parent table (includes group prefix + duplicate handling) */
 	rowKey: string;
 	/** Group metadata for building filters */
@@ -59,10 +60,10 @@ export type K8sExpandedRowProps<T> = {
 	/** Function to get the unique key for a row. */
 	getRowKey?: (record: T) => string;
 	/** Function to get the item key used for selection. Defaults to getRowKey if not provided. */
-	getItemKey?: (record: T) => string;
+	getItemKey?: (record: T) => TItemKey;
 };
 
-export function K8sExpandedRow<T>({
+export function K8sExpandedRow<T, TItemKey = string>({
 	rowKey,
 	groupMeta,
 	entity,
@@ -71,13 +72,13 @@ export function K8sExpandedRow<T>({
 	extraQueryKeyParts = [],
 	getRowKey,
 	getItemKey,
-}: K8sExpandedRowProps<T>): JSX.Element {
+}: K8sExpandedRowProps<T, TItemKey>): JSX.Element {
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setCurrentPage] = useInfraMonitoringPageListing();
 	const { currentQuery } = useQueryBuilder();
 	const parentExpression =
 		currentQuery.builder.queryData[0]?.filter?.expression || '';
-	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
 	const [, setMainOrderBy] = useInfraMonitoringOrderBy();
 	const { safeNavigate } = useSafeNavigate();
 	const urlQuery = useUrlQuery();
@@ -175,10 +176,18 @@ export function K8sExpandedRow<T>({
 	const expandedData = data?.data ?? [];
 
 	const handleRowClick = useCallback(
-		(_row: T, itemKey: string): void => {
-			void setSelectedItem(itemKey);
+		(_row: T, itemKey: TItemKey): void => {
+			if (typeof itemKey === 'object' && itemKey !== null) {
+				setSelectedItemParams(itemKey as unknown as SelectedItemParams);
+			} else {
+				setSelectedItemParams({
+					selectedItem: itemKey as string,
+					clusterName: null,
+					namespaceName: null,
+				});
+			}
 		},
-		[setSelectedItem],
+		[setSelectedItemParams],
 	);
 
 	const handleViewAllClick = (): void => {
@@ -239,7 +248,7 @@ export function K8sExpandedRow<T>({
 
 			<div data-testid="expanded-table">
 				<TanStackTableStateProvider>
-					<TanStackTable<T>
+					<TanStackTable<T, TItemKey>
 						data={expandedData}
 						columns={tableColumns}
 						columnStorageKey={storageKey}

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -22,6 +22,7 @@ import { openInNewTab } from 'utils/navigation';
 import { TableColumnDef } from 'components/TanStackTableView';
 
 import { InfraMonitoringEntity } from '../../constants';
+import { SelectedItemParams } from '../../hooks';
 
 window.ResizeObserver =
 	window.ResizeObserver ||
@@ -165,11 +166,14 @@ function createTestColumnsWithGroup(): TableColumnDef<TestItemWithGroup>[] {
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-function renderComponent<T extends K8sEntityData>({
+function renderComponent<
+	T extends K8sEntityData,
+	TItemKey extends string | SelectedItemParams = string,
+>({
 	queryParams,
 	onUrlUpdate,
 	...props
-}: K8sBaseListProps<T> & {
+}: K8sBaseListProps<T, TItemKey> & {
 	queryParams?: Record<string, string>;
 	onUrlUpdate?: OnUrlUpdateFunction;
 }) {
@@ -196,7 +200,7 @@ function renderComponent<T extends K8sEntityData>({
 										value={{ viewportHeight: 800, itemHeight: 50 }}
 									>
 										<TooltipProvider>
-											<K8sBaseList {...props} />
+											<K8sBaseList<T, TItemKey> {...props} />
 										</TooltipProvider>
 									</VirtuosoMockContext.Provider>
 								</NuqsTestingAdapter>
@@ -941,4 +945,113 @@ describe('K8sBaseList', () => {
 			});
 		});
 	});
+
+	describe('with object itemKey (selectedItem + cluster + namespace params)', () => {
+		const itemId = 'obj-item';
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<
+				NonNullable<K8sBaseListProps<TestItemWithTitle>['fetchListData']>
+			>,
+			Parameters<NonNullable<K8sBaseListProps<TestItemWithTitle>['fetchListData']>>
+		>();
+
+		const getLatestParam = (key: string): string | undefined =>
+			onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get(key))
+				.filter(Boolean)
+				.pop() as string | undefined;
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			openInNewTabMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [{ id: `PodId:${itemId}`, title: `PodTitle:${itemId}` }],
+				total: 1,
+				error: null,
+			});
+		});
+
+		it('should set selectedItem, cluster and namespace params on row click', async () => {
+			const user = userEvent.setup();
+
+			renderComponent<TestItemWithTitle, SelectedItemParams>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): SelectedItemParams => ({
+					selectedItem: row.id,
+					clusterName: 'prod-cluster',
+					namespaceName: 'default-ns',
+				}),
+			});
+
+			const firstRowEl = await screen.findByText(`PodId:${itemId}`);
+			await user.click(firstRowEl);
+
+			await waitFor(() => {
+				expect(getLatestParam('selectedItem')).toBe(`PodId:${itemId}`);
+				expect(getLatestParam('selectedItemClusterName')).toBe('prod-cluster');
+				expect(getLatestParam('selectedItemNamespaceName')).toBe('default-ns');
+			});
+		});
+
+		it('should include cluster and namespace params in new tab URL on ctrl+click', async () => {
+			renderComponent<TestItemWithTitle, SelectedItemParams>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): SelectedItemParams => ({
+					selectedItem: row.id,
+					clusterName: 'prod-cluster',
+					namespaceName: 'default-ns',
+				}),
+			});
+
+			const firstRow = await screen.findByText(`PodId:${itemId}`);
+			fireEvent.click(firstRow, { ctrlKey: true });
+
+			await waitFor(() => {
+				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
+			});
+			const url = openInNewTabMock.mock.calls[0][0] as string;
+			expect(url).toContain(`selectedItem=PodId%3A${itemId}`);
+			expect(url).toContain('selectedItemClusterName=prod-cluster');
+			expect(url).toContain('selectedItemNamespaceName=default-ns');
+		});
+
+		it('should omit null cluster/namespace params in new tab URL', async () => {
+			renderComponent<TestItemWithTitle, SelectedItemParams>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): SelectedItemParams => ({
+					selectedItem: row.id,
+					clusterName: null,
+					namespaceName: null,
+				}),
+			});
+
+			const firstRow = await screen.findByText(`PodId:${itemId}`);
+			fireEvent.click(firstRow, { ctrlKey: true });
+
+			await waitFor(() => {
+				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
+			});
+			const url = openInNewTabMock.mock.calls[0][0] as string;
+			expect(url).toContain(`selectedItem=PodId%3A${itemId}`);
+			expect(url).not.toContain('selectedItemClusterName');
+			expect(url).not.toContain('selectedItemNamespaceName');
+		});
+	});
 });

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/utils.build-expression.test.ts

@@ -0,0 +1,132 @@
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
+
+describe('buildExpressionFromSelectedItemParams', () => {
+	it('should build expression from params with all values', () => {
+		const result = buildExpressionFromSelectedItemParams(
+			{
+				selectedItem: 'nginx',
+				clusterName: 'prod',
+				namespaceName: 'default',
+			},
+			'k8s.deployment.name',
+		);
+
+		expect(result).toBe(
+			"k8s.deployment.name = 'nginx' AND k8s.cluster.name = 'prod' AND k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should skip null values', () => {
+		const result = buildExpressionFromSelectedItemParams(
+			{
+				selectedItem: 'nginx',
+				clusterName: null,
+				namespaceName: 'default',
+			},
+			'k8s.deployment.name',
+		);
+
+		expect(result).toBe(
+			"k8s.deployment.name = 'nginx' AND k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should handle only selectedItem', () => {
+		const result = buildExpressionFromSelectedItemParams(
+			{
+				selectedItem: 'pod-123',
+				clusterName: null,
+				namespaceName: null,
+			},
+			'k8s.pod.uid',
+		);
+
+		expect(result).toBe("k8s.pod.uid = 'pod-123'");
+	});
+});
+
+describe('buildEventsExpression', () => {
+	it('should build expression with kind, name, cluster and attribute-context namespace', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Deployment',
+			objectName: 'nginx',
+			clusterName: 'prod',
+			namespaceName: 'default',
+		});
+
+		expect(result).toBe(
+			"k8s.object.kind = 'Deployment' AND k8s.object.name = 'nginx' AND k8s.cluster.name = 'prod' AND attribute.k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should always include kind and name, even when name is empty', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Node',
+			objectName: '',
+		});
+
+		expect(result).toBe("k8s.object.kind = 'Node' AND k8s.object.name = ''");
+	});
+
+	it('should skip cluster and namespace clauses when values are missing', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Pod',
+			objectName: 'pod-1',
+			clusterName: null,
+			namespaceName: undefined,
+		});
+
+		expect(result).toBe("k8s.object.kind = 'Pod' AND k8s.object.name = 'pod-1'");
+	});
+
+	it('should escape values with quotes', () => {
+		const result = buildEventsExpression({
+			objectKind: 'Pod',
+			objectName: "po'd",
+			namespaceName: 'ns-1',
+		});
+
+		expect(result).toBe(
+			`k8s.object.kind = 'Pod' AND k8s.object.name = 'po\\'d' AND attribute.k8s.namespace.name = 'ns-1'`,
+		);
+	});
+});
+
+describe('buildLogsTracesExpression', () => {
+	it('should build expression with main attribute, cluster and namespace', () => {
+		const result = buildLogsTracesExpression({
+			mainAttributeKey: 'k8s.deployment.name',
+			mainAttributeValue: 'nginx',
+			clusterName: 'prod',
+			namespaceName: 'default',
+		});
+
+		expect(result).toBe(
+			"k8s.deployment.name = 'nginx' AND k8s.cluster.name = 'prod' AND k8s.namespace.name = 'default'",
+		);
+	});
+
+	it('should skip clauses with empty values', () => {
+		const result = buildLogsTracesExpression({
+			mainAttributeKey: 'k8s.node.name',
+			mainAttributeValue: 'node-1',
+			clusterName: '',
+			namespaceName: null,
+		});
+
+		expect(result).toBe("k8s.node.name = 'node-1'");
+	});
+
+	it('should return empty string when all values are missing', () => {
+		const result = buildLogsTracesExpression({
+			mainAttributeKey: 'k8s.pod.name',
+			mainAttributeValue: '',
+		});
+
+		expect(result).toBe('');
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.module.scss

@@ -0,0 +1,41 @@
+.countsContainer {
+	display: flex;
+	gap: var(--spacing-6);
+	margin-top: var(--spacing-8);
+	flex-wrap: wrap;
+}
+
+.countCard {
+	position: relative;
+	flex: 1;
+	min-width: 120px;
+	max-width: 180px;
+	border: 1px solid var(--l3-border);
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-2);
+	padding: var(--spacing-6);
+}
+
+.countLabel {
+	color: var(--l2-foreground);
+	letter-spacing: var(--letter-spacing-wide);
+	text-transform: uppercase;
+}
+
+.countValue {
+	color: var(--l1-foreground);
+	font-family: var(--periscope-font-family-mono);
+	font-size: var(--font-size-xl);
+}
+
+.navigateButton {
+	position: absolute;
+	top: var(--spacing-4);
+	right: var(--spacing-4);
+
+	--button-padding: var(--spacing-1);
+	--button-height: 24px;
+	--button-width: 24px;
+}

frontend/src/container/InfraMonitoringK8sV2/Base/components/EntityCountsSection/EntityCountsSection.tsx

@@ -0,0 +1,107 @@
+import { Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { Compass } from '@signozhq/icons';
+import { QueryParams } from 'constants/query';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { Link } from 'react-router-dom';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../../../constants';
+import styles from './EntityCountsSection.module.scss';
+
+export interface EntityCountConfig<T> {
+	label: string;
+	getValue: (entity: T) => number;
+	targetCategory: InfraMonitoringEntity;
+}
+
+interface EntityCountsSectionProps<T> {
+	entity: T;
+	countsConfig: EntityCountConfig<T>[];
+	selectedItem: string;
+	filterExpression: string;
+	closeDrawer: () => void;
+}
+
+export function EntityCountsSection<T>({
+	entity,
+	countsConfig,
+	selectedItem,
+	filterExpression,
+	closeDrawer,
+}: EntityCountsSectionProps<T>): JSX.Element {
+	const buildNavigationUrl = (targetCategory: InfraMonitoringEntity): string => {
+		const defaultQuery = initialQueriesMap[DataSource.METRICS];
+
+		const compositeQuery = {
+			...defaultQuery,
+			id: uuid(),
+			builder: {
+				...defaultQuery.builder,
+				queryData: defaultQuery.builder.queryData.map((query) => ({
+					...query,
+					filter: { expression: filterExpression },
+					filters: { items: [], op: 'AND' as const },
+				})),
+			},
+		};
+
+		// TODO(H4ad): After https://github.com/SigNoz/signoz/pull/12038, inherit custom time of drawer to list
+		const urlParams = new URLSearchParams();
+		urlParams.set(INFRA_MONITORING_K8S_PARAMS_KEYS.CATEGORY, targetCategory);
+		urlParams.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify(compositeQuery)),
+		);
+
+		return `${ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES}?${urlParams.toString()}`;
+	};
+
+	return (
+		<div className={styles.countsContainer}>
+			{countsConfig.map((config) => (
+				<div
+					key={config.label}
+					className={styles.countCard}
+					data-testid={`count-card-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
+				>
+					<Typography.Text
+						color="muted"
+						size="small"
+						weight="medium"
+						className={styles.countLabel}
+					>
+						{config.label}
+					</Typography.Text>
+					<Typography.Text className={styles.countValue} size="xl" weight="semibold">
+						{config.getValue(entity) || '-'}
+					</Typography.Text>
+					<Link
+						to={buildNavigationUrl(config.targetCategory)}
+						onClick={closeDrawer}
+						data-testid={`navigate-${config.label.toLowerCase().replace(/\s+/g, '-')}`}
+					>
+						<Tooltip
+							title={`View ${config.label.toLowerCase()} of '${selectedItem}'`}
+							placement="top"
+						>
+							<Button
+								size="icon"
+								variant="ghost"
+								color="secondary"
+								className={styles.navigateButton}
+								prefix={<Compass size={14} />}
+							/>
+						</Tooltip>
+					</Link>
+				</div>
+			))}
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringK8sV2/Base/utils.tsx

@@ -2,7 +2,12 @@ import { Badge } from '@signozhq/ui/badge';
 
 import styles from './utils.module.scss';
 import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
-import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import {
+	convertFiltersToExpression,
+	formatValueForExpression,
+} from 'components/QueryBuilderV2/utils';
+import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
+import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 
 const dotToUnder: Record<string, string> = {
 	'os.type': 'os_type',
@@ -89,3 +94,91 @@ export function buildExpressionFromGroupMeta(
 	}
 	return parent || metaExpression;
 }
+
+export interface EventsExpressionParams {
+	objectKind: string;
+	objectName: string;
+	clusterName?: string | null;
+	namespaceName?: string | null;
+}
+
+export function buildEventsExpression(params: EventsExpressionParams): string {
+	const clauses: string[] = [
+		`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = ${formatValueForExpression(params.objectKind)}`,
+		`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${formatValueForExpression(params.objectName)}`,
+	];
+
+	if (params.clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(params.clusterName)}`,
+		);
+	}
+
+	// the other attributes are resource., and fallbacks correctly without prefix
+	// this one needs attribute. prefix otherwise it fails the query
+	if (params.namespaceName) {
+		clauses.push(
+			`attribute.${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(params.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+}
+
+export interface LogsTracesExpressionParams {
+	mainAttributeKey: string;
+	mainAttributeValue?: string | null;
+	clusterName?: string | null;
+	namespaceName?: string | null;
+}
+
+export function buildLogsTracesExpression(
+	params: LogsTracesExpressionParams,
+): string {
+	const clauses: string[] = [];
+
+	if (params.mainAttributeValue) {
+		clauses.push(
+			`${params.mainAttributeKey} = ${formatValueForExpression(params.mainAttributeValue)}`,
+		);
+	}
+
+	if (params.clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(params.clusterName)}`,
+		);
+	}
+
+	if (params.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(params.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+}
+
+export function buildExpressionFromSelectedItemParams(
+	params: SelectedItemParams,
+	mainAttributeKey: string,
+): string {
+	const clauses: string[] = [];
+
+	if (params.selectedItem) {
+		clauses.push(
+			`${mainAttributeKey} = ${formatValueForExpression(params.selectedItem)}`,
+		);
+	}
+	if (params.clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(params.clusterName)}`,
+		);
+	}
+	if (params.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(params.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+}

frontend/src/container/InfraMonitoringK8sV2/Clusters/K8sClustersList.tsx

@@ -14,7 +14,9 @@ import { InfraMonitoringEntity } from '../constants';
 import {
 	clusterWidgetInfo,
 	getClusterMetricsQueryPayload,
+	k8sClusterDetailsCountsConfig,
 	k8sClusterDetailsMetadataConfig,
+	k8sClusterGetCountsFilterExpression,
 	k8sClusterGetEntityName,
 	k8sClusterGetSelectedItemExpression,
 	k8sClusterInitialEventsExpression,
@@ -136,6 +138,8 @@ function K8sClustersList({
 				getInitialLogTracesExpression={k8sClusterInitialLogTracesExpression}
 				getInitialEventsExpression={k8sClusterInitialEventsExpression}
 				metadataConfig={k8sClusterDetailsMetadataConfig}
+				countsConfig={k8sClusterDetailsCountsConfig}
+				getCountsFilterExpression={k8sClusterGetCountsFilterExpression}
 				entityWidgetInfo={clusterWidgetInfo}
 				getEntityQueryPayload={getClusterMetricsQueryPayload}
 				queryKeyPrefix="cluster"

frontend/src/container/InfraMonitoringK8sV2/Clusters/constants.ts

@@ -6,67 +6,131 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sClusterGetSelectedItemExpression = (
-	selectedItemId: string,
-): string => `k8s.cluster.name = ${formatValueForExpression(selectedItemId)}`;
+	params: SelectedItemParams,
+): string =>
+	`k8s.cluster.name = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export const k8sClusterDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesClusterRecordDTO>[] =
 	[{ label: 'Cluster Name', getValue: (p): string => p.clusterName || '' }];
 
+export const k8sClusterDetailsCountsConfig: K8sDetailsCountConfig<InframonitoringtypesClusterRecordDTO>[] =
+	[
+		{
+			label: 'Namespaces',
+			getValue: (p): number => p.counts?.namespaces ?? 0,
+			targetCategory: InfraMonitoringEntity.NAMESPACES,
+		},
+		{
+			label: 'Nodes',
+			getValue: (p): number => p.counts?.nodes ?? 0,
+			targetCategory: InfraMonitoringEntity.NODES,
+		},
+		{
+			label: 'Deployments',
+			getValue: (p): number => p.counts?.deployments ?? 0,
+			targetCategory: InfraMonitoringEntity.DEPLOYMENTS,
+		},
+		{
+			label: 'StatefulSets',
+			getValue: (p): number => p.counts?.statefulSets ?? 0,
+			targetCategory: InfraMonitoringEntity.STATEFULSETS,
+		},
+		{
+			label: 'DaemonSets',
+			getValue: (p): number => p.counts?.daemonSets ?? 0,
+			targetCategory: InfraMonitoringEntity.DAEMONSETS,
+		},
+		{
+			label: 'Jobs',
+			getValue: (p): number => p.counts?.jobs ?? 0,
+			targetCategory: InfraMonitoringEntity.JOBS,
+		},
+	];
+
 export const k8sClusterInitialEventsExpression = (
 	item: InframonitoringtypesClusterRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(item.clusterName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Cluster' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Cluster',
+		objectName: item.clusterName || '',
+	});
 
 export const k8sClusterInitialLogTracesExpression = (
 	item: InframonitoringtypesClusterRecordDTO,
-): string => {
-	const clusterName = formatValueForExpression(item.clusterName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${clusterName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME,
+		mainAttributeValue: item.clusterName,
+	});
 
 export const k8sClusterGetEntityName = (
 	item: InframonitoringtypesClusterRecordDTO,
 ): string => item.clusterName || '';
 
+export const k8sClusterGetCountsFilterExpression = (
+	item: InframonitoringtypesClusterRecordDTO,
+): string =>
+	`k8s.cluster.name = ${formatValueForExpression(item.clusterName ?? '')}`;
+
 export const clusterWidgetInfo = [
 	{
 		title: 'CPU Usage, allocatable',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#cpu-usage-allocatable',
 	},
 	{
 		title: 'Memory Usage, allocatable',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#memory-usage-allocatable',
 	},
 	{
 		title: 'Ready Nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#ready-nodes',
 	},
 	{
 		title: 'NotReady Nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#notready-nodes',
 	},
 	{
 		title: 'Deployments available and desired',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/clusters/#deployments-available-and-desired',
 	},
 	{
 		title: 'Statefulset pods',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#statefulset-pods',
 	},
 	{
 		title: 'Daemonset nodes',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#daemonset-nodes',
 	},
 	{
 		title: 'Jobs',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/clusters/#jobs',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/K8sDaemonSetsList.tsx

@@ -10,6 +10,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	daemonSetWidgetInfo,
 	getDaemonSetMetricsQueryPayload,
@@ -111,7 +112,7 @@ function K8sDaemonSetsList({
 	);
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO>
+			<K8sBaseList<InframonitoringtypesDaemonSetRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.DAEMONSETS}
 				tableColumns={k8sDaemonSetsColumnsConfig}

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/constants.ts

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sDaemonSetGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+	);
 
 export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesDaemonSetRecordDTO>[] =
 	[
@@ -37,12 +45,23 @@ export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframo
 export const k8sDaemonSetInitialEventsExpression = (
 	item: InframonitoringtypesDaemonSetRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'DaemonSet' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '')}`;
+	buildEventsExpression({
+		objectKind: 'DaemonSet',
+		objectName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDaemonSetInitialLogTracesExpression = (
 	item: InframonitoringtypesDaemonSetRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? '')} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '')}`;
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME,
+		mainAttributeValue:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDaemonSetGetEntityName = (
 	item: InframonitoringtypesDaemonSetRecordDTO,
@@ -52,18 +71,25 @@ export const daemonSetWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#cpu-usage-request-limits',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#memory-usage-request-limits',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/daemonsets/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/daemonsets/#network-errors-count',
 	},
 ];
 
@@ -115,6 +141,40 @@ export const getDaemonSetMetricsQueryPayload = (
 		? 'k8s.namespace.name'
 		: 'k8s_namespace_name';
 
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+
+	const clusterName =
+		daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+	const namespaceName =
+		daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+	];
+
 	return [
 		{
 			selectedTime: 'GLOBAL_TIME',
@@ -148,19 +208,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -202,19 +250,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -256,19 +292,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -344,19 +368,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -398,19 +410,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -452,19 +452,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -540,19 +528,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -641,19 +617,7 @@ export const getDaemonSetMetricsQueryPayload = (
 											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ??
 											'',
 									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},

frontend/src/container/InfraMonitoringK8sV2/DaemonSets/table.config.tsx

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -31,8 +32,15 @@ export function getK8sDaemonSetRowKey(
 
 export function getK8sDaemonSetItemKey(
 	daemonSet: InframonitoringtypesDaemonSetRecordDTO,
-): string {
-	return daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] || '';
+): SelectedItemParams {
+	return {
+		selectedItem:
+			daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DAEMONSET_NAME] ?? null,
+		clusterName:
+			daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			daemonSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export type DaemonSetTableColumnConfig =
@@ -132,28 +140,38 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'node_status',
+		id: 'scheduled_nodes',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#node-status">
-				Node Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#scheduled-nodes">
+				Scheduled Nodes
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.currentNodes,
-		width: { min: 180 },
+		width: { min: 210 },
 		enableSort: false,
 		enableResize: true,
 		cell: ({ row }): React.ReactNode => (
 			<GroupedStatusCounts
 				items={[
+					{
+						value: row.readyNodes,
+						label: 'Ready',
+						color: Color.BG_FOREST_500,
+					},
 					{
 						value: row.currentNodes,
 						label: 'Current',
-						color: Color.BG_FOREST_500,
+						color: Color.BG_ROBIN_500,
 					},
 					{
 						value: row.desiredNodes,
 						label: 'Desired',
-						color: Color.BG_ROBIN_500,
+						color: Color.BG_SAKURA_400,
+					},
+					{
+						value: row.misscheduledNodes,
+						label: 'Misscheduled',
+						color: Color.BG_AMBER_500,
 					},
 				]}
 			/>
@@ -312,6 +330,30 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 			);
 		},
 	},
+	{
+		id: 'ready_nodes',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#ready">
+				Ready Nodes
+			</ColumnHeader>
+		),
+		accessorFn: (row): number => row.readyNodes,
+		width: { min: 140 },
+		enableSort: true,
+		defaultVisibility: false,
+		cell: ({ value }): React.ReactNode => {
+			const readyNodes = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={readyNodes}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="ready node"
+				>
+					<TanStackTable.Text>{readyNodes}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
 	{
 		id: 'current_nodes',
 		header: (): React.ReactNode => (
@@ -360,4 +402,28 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
 			);
 		},
 	},
+	{
+		id: 'misscheduled_nodes',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#misscheduled">
+				Misscheduled Nodes
+			</ColumnHeader>
+		),
+		accessorFn: (row): number => row.misscheduledNodes,
+		width: { min: 140 },
+		enableSort: true,
+		defaultVisibility: false,
+		cell: ({ value }): React.ReactNode => {
+			const misscheduledNodes = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={misscheduledNodes}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="misscheduled node"
+				>
+					<TanStackTable.Text>{misscheduledNodes}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
 ];

frontend/src/container/InfraMonitoringK8sV2/Deployments/K8sDeploymentsList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	deploymentWidgetInfo,
 	getDeploymentMetricsQueryPayload,
@@ -117,7 +118,7 @@ function K8sDeploymentsList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO>
+			<K8sBaseList<InframonitoringtypesDeploymentRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.DEPLOYMENTS}
 				tableColumns={k8sDeploymentsColumnsConfig}

frontend/src/container/InfraMonitoringK8sV2/Deployments/constants.ts

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sDeploymentGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+	);
 
 export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesDeploymentRecordDTO>[] =
 	[
@@ -36,24 +44,24 @@ export const k8sDeploymentDetailsMetadataConfig: K8sDetailsMetadataConfig<Infram
 
 export const k8sDeploymentInitialEventsExpression = (
 	item: InframonitoringtypesDeploymentRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Deployment' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Deployment',
+		objectName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDeploymentInitialLogTracesExpression = (
 	item: InframonitoringtypesDeploymentRecordDTO,
-): string => {
-	const deploymentName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? '',
-	);
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME} = ${deploymentName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME,
+		mainAttributeValue:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sDeploymentGetEntityName = (
 	item: InframonitoringtypesDeploymentRecordDTO,
@@ -63,18 +71,25 @@ export const deploymentWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#cpu-usage-request-limits',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#memory-usage-request-limits',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/deployments/#network-io',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/deployments/#network-error-count',
 	},
 ];
 
@@ -121,6 +136,43 @@ export const getDeploymentMetricsQueryPayload = (
 		: 'k8s_deployment_name';
 
 	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+
+	const clusterName =
+		deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+
+	const namespaceName =
+		deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+	];
 
 	return [
 		{
@@ -155,6 +207,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -196,6 +249,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -237,6 +291,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -312,6 +367,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -353,6 +409,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -394,6 +451,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -469,6 +527,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -557,6 +616,7 @@ export const getDeploymentMetricsQueryPayload = (
 											deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ??
 											'',
 									},
+									...filters,
 								],
 								op: 'AND',
 							},

frontend/src/container/InfraMonitoringK8sV2/Deployments/table.config.tsx

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -31,8 +32,15 @@ export function getK8sDeploymentRowKey(
 
 export function getK8sDeploymentItemKey(
 	deployment: InframonitoringtypesDeploymentRecordDTO,
-): string {
-	return deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] || '';
+): SelectedItemParams {
+	return {
+		selectedItem:
+			deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_DEPLOYMENT_NAME] ?? null,
+		clusterName:
+			deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			deployment.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDeploymentRecordDTO>[] =
@@ -125,10 +133,10 @@ export const k8sDeploymentsColumnsConfig: TableColumnDef<InframonitoringtypesDep
 			},
 		},
 		{
-			id: 'replica_status',
+			id: 'pod_replicas',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#replica-status">
-					Replica Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/deployments#pod-replicas">
+					Pod Replicas
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.availablePods,

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartHeader.module.scss

@@ -0,0 +1,32 @@
+.chartHeader {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.infoIcon {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l2-foreground);
+	cursor: pointer;
+
+	&:hover {
+		color: var(--text-slate-primary);
+	}
+}
+
+.metricsExplorerLink {
+	display: inline-flex;
+	align-items: center;
+	color: var(--l2-foreground);
+	transition: opacity 0.2s;
+
+	&:hover {
+		color: var(--l3-foreground);
+	}
+}
+
+.chartHeaderLabel {
+	font-size: var(--periscope-font-size-base);
+	color: var(--l2-foreground);
+}

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/ChartHeader.tsx

@@ -0,0 +1,83 @@
+import { Link } from 'react-router-dom';
+import { Compass, Info } from '@signozhq/icons';
+import { Tooltip } from 'antd';
+
+import styles from './ChartHeader.module.scss';
+
+const DOCS_BASE_URL = `${process.env.DOCS_BASE_URL}/docs`;
+
+interface ChartHeaderProps {
+	title: string;
+	docPath?: string;
+	tooltip?: string;
+	metricsExplorerUrl?: string;
+	metricsExplorerTestId?: string;
+}
+
+function ChartHeader({
+	title,
+	docPath,
+	tooltip,
+	metricsExplorerUrl,
+	metricsExplorerTestId = 'open-metrics-explorer',
+}: ChartHeaderProps): JSX.Element {
+	const renderInfoIcon = (): React.ReactNode => {
+		if (docPath) {
+			const tooltipTitle = tooltip || 'Not sure what this represents?';
+			return (
+				<Tooltip
+					arrow
+					title={
+						<>
+							{tooltipTitle}{' '}
+							<a
+								href={`${DOCS_BASE_URL}${docPath}`}
+								target="_blank"
+								rel="noopener"
+								onClick={(e): void => e.stopPropagation()}
+							>
+								Learn more.
+							</a>
+						</>
+					}
+				>
+					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
+						<Info size="md" />
+					</span>
+				</Tooltip>
+			);
+		}
+
+		if (tooltip) {
+			return (
+				<Tooltip title={tooltip}>
+					<span className={styles.infoIcon} data-testid="chart-header-info-icon">
+						<Info size="md" />
+					</span>
+				</Tooltip>
+			);
+		}
+
+		return null;
+	};
+
+	return (
+		<div className={styles.chartHeader} data-testid="chart-header">
+			<span className={styles.chartHeaderLabel}>{title}</span>
+			{renderInfoIcon()}
+			{metricsExplorerUrl && (
+				<Tooltip title="Open in Metrics Explorer">
+					<Link
+						to={metricsExplorerUrl}
+						className={styles.metricsExplorerLink}
+						data-testid={metricsExplorerTestId}
+					>
+						<Compass size={14} />
+					</Link>
+				</Tooltip>
+			)}
+		</div>
+	);
+}
+
+export default ChartHeader;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.module.scss

@@ -14,11 +14,6 @@
 	box-sizing: border-box;
 }
 
-.entityMetricsTitle {
-	font-size: var(--periscope-font-size-base);
-	color: var(--l2-foreground);
-}
-
 .metricsHeader {
 	display: flex;
 	justify-content: flex-end;

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -19,8 +19,10 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { useTimezone } from 'providers/Timezone';
 import { SuccessResponse } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { getMetricsExplorerUrl } from 'utils/explorerUtils';
 
 import { buildEntityMetricsChartConfig } from './configBuilder';
+import ChartHeader from './ChartHeader';
 
 import { useEntityMetrics } from './hooks';
 import { isKeyNotFoundError } from '../utils';
@@ -44,6 +46,7 @@ interface EntityMetricsProps<T> {
 	entityWidgetInfo: {
 		title: string;
 		yAxisUnit: string;
+		docPath?: string;
 	}[];
 	getEntityQueryPayload: (
 		node: T,
@@ -204,9 +207,24 @@ function EntityMetrics<T>({
 						key={entityWidgetInfo[idx].title}
 						className={styles.entityMetricsCol}
 					>
-						<span className={styles.entityMetricsTitle}>
-							{entityWidgetInfo[idx].title}
-						</span>
+						<ChartHeader
+							title={entityWidgetInfo[idx].title}
+							docPath={entityWidgetInfo[idx].docPath}
+							metricsExplorerUrl={
+								queryPayloads[idx] && queryPayloads[idx].graphType !== PANEL_TYPES.TABLE
+									? getMetricsExplorerUrl({
+											query: queryPayloads[idx].query,
+											...(selectedInterval && selectedInterval !== 'custom'
+												? { relativeTime: selectedInterval }
+												: {
+														startTimeMs: timeRange.startTime * 1000,
+														endTimeMs: timeRange.endTime * 1000,
+													}),
+										})
+									: undefined
+							}
+							metricsExplorerTestId={`open-metrics-explorer-${idx}`}
+						/>
 						<div className={styles.entityMetricsCard} ref={graphRef}>
 							{renderCardContent(query, idx)}
 						</div>

frontend/src/container/InfraMonitoringK8sV2/EntityDetailsUtils/EntityMetrics/__tests__/EntityMetrics.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import { Time } from 'container/TopNav/DateTimeSelectionV2/types';
 import * as appContextHooks from 'providers/App/App';
@@ -295,17 +296,19 @@ const renderEntityMetrics = (overrides = {}): any => {
 	};
 
 	return render(
-		<EntityMetrics
-			timeRange={defaultProps.timeRange}
-			isModalTimeSelection={defaultProps.isModalTimeSelection}
-			handleTimeChange={defaultProps.handleTimeChange}
-			selectedInterval={defaultProps.selectedInterval}
-			entity={defaultProps.entity}
-			entityWidgetInfo={defaultProps.entityWidgetInfo}
-			getEntityQueryPayload={defaultProps.getEntityQueryPayload}
-			queryKey={defaultProps.queryKey}
-			category={defaultProps.category}
-		/>,
+		<MemoryRouter>
+			<EntityMetrics
+				timeRange={defaultProps.timeRange}
+				isModalTimeSelection={defaultProps.isModalTimeSelection}
+				handleTimeChange={defaultProps.handleTimeChange}
+				selectedInterval={defaultProps.selectedInterval}
+				entity={defaultProps.entity}
+				entityWidgetInfo={defaultProps.entityWidgetInfo}
+				getEntityQueryPayload={defaultProps.getEntityQueryPayload}
+				queryKey={defaultProps.queryKey}
+				category={defaultProps.category}
+			/>
+		</MemoryRouter>,
 	);
 };
 
@@ -334,8 +337,8 @@ const mockTableData: (import('../utils').MetricsTableData[] | null)[] = [
 ];
 
 const mockQueryPayloads = [
-	{ graphType: 'graph' }, // time_series
-	{ graphType: 'table' }, // table
+	{ graphType: 'graph', query: { queryType: 'builder' } }, // time_series
+	{ graphType: 'table', query: { queryType: 'builder' } }, // table
 ];
 
 describe('EntityMetrics', () => {
@@ -442,6 +445,34 @@ describe('EntityMetrics', () => {
 		);
 	});
 
+	it('renders metrics explorer link only for non-table panels', () => {
+		renderEntityMetrics();
+		expect(screen.getByTestId('open-metrics-explorer-0')).toBeInTheDocument();
+		expect(
+			screen.queryByTestId('open-metrics-explorer-1'),
+		).not.toBeInTheDocument();
+	});
+
+	it('builds metrics explorer link with relativeTime when a relative interval is selected', () => {
+		renderEntityMetrics({ selectedInterval: '5m' as Time });
+		const href = screen
+			.getByTestId('open-metrics-explorer-0')
+			.getAttribute('href');
+		expect(href).toContain('relativeTime=5m');
+		expect(href).not.toContain('startTime=');
+		expect(href).not.toContain('endTime=');
+	});
+
+	it('builds metrics explorer link with absolute time range in milliseconds for custom interval', () => {
+		renderEntityMetrics({ selectedInterval: 'custom' as Time });
+		const href = screen
+			.getByTestId('open-metrics-explorer-0')
+			.getAttribute('href');
+		expect(href).toContain(`startTime=${mockTimeRange.startTime * 1000}`);
+		expect(href).toContain(`endTime=${mockTimeRange.endTime * 1000}`);
+		expect(href).not.toContain('relativeTime=');
+	});
+
 	it('passes correct parameters to useEntityMetrics hook', () => {
 		renderEntityMetrics();
 		expect(mockUseEntityMetrics).toHaveBeenCalledWith(

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -44,7 +44,7 @@ import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
-	useInfraMonitoringSelectedItem,
+	useInfraMonitoringSelectedItemParams,
 } from './hooks';
 import K8sJobsList from './Jobs/K8sJobsList';
 import K8sNamespacesList from './Namespaces/K8sNamespacesList';
@@ -63,7 +63,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [selectedCategory, setSelectedCategory] = useInfraMonitoringCategory();
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setOrderBy] = useInfraMonitoringOrderBy();
-	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
 
 	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -179,7 +179,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			void setSelectedCategory(key as string);
 			void setOrderBy(null);
 			void setGroupBy(null);
-			void setSelectedItem(null);
+			setSelectedItemParams(null);
 			redirectWithQueryBuilderData({
 				...currentQuery,
 				builder: {

frontend/src/container/InfraMonitoringK8sV2/Jobs/K8sJobsList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getJobMetricsQueryPayload,
 	jobWidgetInfo,
@@ -117,7 +118,7 @@ function K8sJobsList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesJobRecordDTO>
+			<K8sBaseList<InframonitoringtypesJobRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.JOBS}
 				tableColumns={k8sJobsColumnsConfig}

frontend/src/container/InfraMonitoringK8sV2/Jobs/constants.ts

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sJobGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+	);
 
 export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesJobRecordDTO>[] =
 	[
@@ -36,24 +44,23 @@ export const k8sJobDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonitori
 
 export const k8sJobInitialEventsExpression = (
 	item: InframonitoringtypesJobRecordDTO,
-): string => {
-	const name = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Job' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${name}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Job',
+		objectName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sJobInitialLogTracesExpression = (
 	item: InframonitoringtypesJobRecordDTO,
-): string => {
-	const jobName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? '',
-	);
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME} = ${jobName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME,
+		mainAttributeValue: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sJobGetEntityName = (
 	item: InframonitoringtypesJobRecordDTO,
@@ -63,18 +70,22 @@ export const jobWidgetInfo = [
 	{
 		title: 'CPU usage',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#cpu-usage',
 	},
 	{
 		title: 'Memory Usage',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#memory-usage',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/jobs/#network-errors-count',
 	},
 ];
 
@@ -97,10 +108,54 @@ export const getJobMetricsQueryPayload = (
 		? 'k8s.pod.network.errors'
 		: 'k8s_pod_network_errors';
 	const k8sJobNameKey = dotMetricsEnabled ? 'k8s.job.name' : 'k8s_job_name';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? 'k8s.cluster.name'
+		: 'k8s_cluster_name';
 	const k8sNamespaceNameKey = dotMetricsEnabled
 		? 'k8s.namespace.name'
 		: 'k8s_namespace_name';
 
+	const clusterName =
+		job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+	const namespaceName =
+		job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_job_name--string--tag--false',
+				key: k8sJobNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: job.jobName,
+		},
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+		{
+			id: 'f3',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+	];
+
 	return [
 		{
 			selectedTime: 'GLOBAL_TIME',
@@ -120,31 +175,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '6b59b690',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],
@@ -205,31 +236,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '8c217f4d',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],
@@ -290,31 +297,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '2bbf9d0c',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],
@@ -388,31 +371,7 @@ export const getJobMetricsQueryPayload = (
 							disabled: false,
 							expression: 'A',
 							filters: {
-								items: [
-									{
-										id: '448e6cf7',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_job_name--string--tag--false',
-											key: k8sJobNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value: job.jobName,
-									},
-									{
-										id: '47b3adae',
-										key: {
-											dataType: DataTypes.String,
-											id: 'k8s_namespace_name--string--tag--false',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-									},
-								],
+								items: [...filters],
 								op: 'AND',
 							},
 							functions: [],

frontend/src/container/InfraMonitoringK8sV2/Jobs/table.config.tsx

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -27,8 +28,13 @@ export function getK8sJobRowKey(job: InframonitoringtypesJobRecordDTO): string {
 
 export function getK8sJobItemKey(
 	job: InframonitoringtypesJobRecordDTO,
-): string {
-	return job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] || '';
+): SelectedItemParams {
+	return {
+		selectedItem: job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_JOB_NAME] ?? null,
+		clusterName: job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			job.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export type JobTableColumnConfig =
@@ -126,10 +132,10 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 		},
 	},
 	{
-		id: 'completion_status',
+		id: 'completion',
 		header: (): React.ReactNode => (
-			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion-status">
-				Completion Status
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/jobs#completion">
+				Completions
 			</ColumnHeader>
 		),
 		accessorFn: (row): number => row.successfulPods,
@@ -149,7 +155,7 @@ export const k8sJobsColumnsConfig: JobTableColumnConfig[] = [
 					{
 						value: row.desiredSuccessfulPods,
 						label: 'Desired',
-						color: Color.BG_ROBIN_500,
+						color: Color.BG_AMBER_500,
 					},
 				]}
 			/>

frontend/src/container/InfraMonitoringK8sV2/Namespaces/K8sNamespacesList.tsx

@@ -11,9 +11,12 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getNamespaceMetricsQueryPayload,
+	k8sNamespaceDetailsCountsConfig,
 	k8sNamespaceDetailsMetadataConfig,
+	k8sNamespaceGetCountsFilterExpression,
 	k8sNamespaceGetEntityName,
 	k8sNamespaceGetSelectedItemExpression,
 	k8sNamespaceInitialEventsExpression,
@@ -117,7 +120,7 @@ function K8sNamespacesList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO>
+			<K8sBaseList<InframonitoringtypesNamespaceRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.NAMESPACES}
 				tableColumns={k8sNamespacesColumnsConfig}
@@ -136,6 +139,8 @@ function K8sNamespacesList({
 				getInitialLogTracesExpression={k8sNamespaceInitialLogTracesExpression}
 				getInitialEventsExpression={k8sNamespaceInitialEventsExpression}
 				metadataConfig={k8sNamespaceDetailsMetadataConfig}
+				countsConfig={k8sNamespaceDetailsCountsConfig}
+				getCountsFilterExpression={k8sNamespaceGetCountsFilterExpression}
 				entityWidgetInfo={namespaceWidgetInfo}
 				getEntityQueryPayload={getNamespaceMetricsQueryPayload}
 				queryKeyPrefix="namespace"

frontend/src/container/InfraMonitoringK8sV2/Namespaces/constants.ts

@@ -6,14 +6,29 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
+import {
+	K8sDetailsCountConfig,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
+import {
+	INFRA_MONITORING_ATTR_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import { SelectedItemParams } from '../hooks';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sNamespaceGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+	);
 
 export const k8sNamespaceDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesNamespaceRecordDTO>[] =
 	[
@@ -25,64 +40,124 @@ export const k8sNamespaceDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframo
 		},
 	];
 
+export const k8sNamespaceDetailsCountsConfig: K8sDetailsCountConfig<InframonitoringtypesNamespaceRecordDTO>[] =
+	[
+		{
+			label: 'Deployments',
+			getValue: (p): number => p.counts?.deployments ?? 0,
+			targetCategory: InfraMonitoringEntity.DEPLOYMENTS,
+		},
+		{
+			label: 'StatefulSets',
+			getValue: (p): number => p.counts?.statefulSets ?? 0,
+			targetCategory: InfraMonitoringEntity.STATEFULSETS,
+		},
+		{
+			label: 'DaemonSets',
+			getValue: (p): number => p.counts?.daemonSets ?? 0,
+			targetCategory: InfraMonitoringEntity.DAEMONSETS,
+		},
+		{
+			label: 'Jobs',
+			getValue: (p): number => p.counts?.jobs ?? 0,
+			targetCategory: InfraMonitoringEntity.JOBS,
+		},
+	];
+
 export const k8sNamespaceInitialEventsExpression = (
 	item: InframonitoringtypesNamespaceRecordDTO,
-): string => {
-	const name = formatValueForExpression(item.namespaceName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Namespace' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${name}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Namespace',
+		objectName: item.namespaceName || '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNamespaceInitialLogTracesExpression = (
 	item: InframonitoringtypesNamespaceRecordDTO,
-): string => {
-	const name = formatValueForExpression(item.namespaceName || '');
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${name}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME,
+		mainAttributeValue: item.namespaceName,
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNamespaceGetEntityName = (
 	item: InframonitoringtypesNamespaceRecordDTO,
 ): string => item.namespaceName || '';
 
+export const k8sNamespaceGetCountsFilterExpression = (
+	item: InframonitoringtypesNamespaceRecordDTO,
+): string => {
+	const clusterName = item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME];
+	const clauses: string[] = [];
+
+	if (clusterName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(clusterName)}`,
+		);
+	}
+	if (item.namespaceName) {
+		clauses.push(
+			`${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${formatValueForExpression(item.namespaceName)}`,
+		);
+	}
+
+	return clauses.join(' AND ');
+};
+
 export const namespaceWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#cpu-usage-cores',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#memory-usage-bytes',
 	},
 	{
 		title: 'Pods CPU (top 10)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#pods-cpu-top-10',
 	},
 	{
 		title: 'Pods Memory (top 10)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/namespaces/#pods-memory-top-10',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-rate',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#network-errors',
 	},
 	{
-		title: 'StatefulSets',
+		title: 'StatefulSets (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#statefulsets',
 	},
 	{
-		title: 'ReplicaSets',
+		title: 'ReplicaSets (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#replicasets',
 	},
 	{
-		title: 'DaemonSets',
+		title: 'DaemonSets (nodes)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#daemonsets',
 	},
 	{
-		title: 'Deployments',
+		title: 'Deployments (pods)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/namespaces/#deployments',
 	},
 ];
 
@@ -179,6 +254,24 @@ export const getNamespaceMetricsQueryPayload = (
 		'k8s.deployment.name',
 		'k8s_deployment_name',
 	);
+	const k8sClusterNameKey = getKey('k8s.cluster.name', 'k8s_cluster_name');
+
+	const clusterName =
+		namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f1',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+	];
 
 	return [
 		{
@@ -211,6 +304,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -250,6 +344,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -289,6 +384,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -328,6 +424,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -401,6 +498,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -440,6 +538,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -479,6 +578,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -518,6 +618,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -557,6 +658,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -596,6 +698,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -669,6 +772,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -749,6 +853,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -829,6 +934,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -915,6 +1021,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1001,6 +1108,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1047,6 +1155,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1093,6 +1202,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1173,6 +1283,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1225,6 +1336,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1311,6 +1423,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1357,6 +1470,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1403,6 +1517,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1449,6 +1564,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1529,6 +1645,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -1575,6 +1692,7 @@ export const getNamespaceMetricsQueryPayload = (
 										op: '=',
 										value: namespace.namespaceName,
 									},
+									...filters,
 								],
 								op: 'AND',
 							},

frontend/src/container/InfraMonitoringK8sV2/Namespaces/table.config.tsx

@@ -16,6 +16,7 @@ import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
 } from '../constants';
+import { SelectedItemParams } from '../hooks';
 
 export function getK8sNamespaceRowKey(
 	namespace: InframonitoringtypesNamespaceRecordDTO,
@@ -29,8 +30,15 @@ export function getK8sNamespaceRowKey(
 
 export function getK8sNamespaceItemKey(
 	namespace: InframonitoringtypesNamespaceRecordDTO,
-): string {
-	return namespace.namespaceName;
+): SelectedItemParams {
+	return {
+		selectedItem:
+			namespace.namespaceName ??
+			namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
+			null,
+		clusterName:
+			namespace.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+	};
 }
 
 export type NamespaceTableColumnConfig =

frontend/src/container/InfraMonitoringK8sV2/Nodes/constants.ts

@@ -7,13 +7,19 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import {
+	buildEventsExpression,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
 
 export const k8sNodeGetSelectedItemExpression = (
-	selectedItemId: string,
-): string => `k8s.node.name = ${formatValueForExpression(selectedItemId)}`;
+	params: SelectedItemParams,
+): string =>
+	`k8s.node.name = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export const k8sNodeDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesNodeRecordDTO>[] =
 	[
@@ -28,12 +34,20 @@ export const k8sNodeDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonitor
 export const k8sNodeInitialEventsExpression = (
 	item: InframonitoringtypesNodeRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Node' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${formatValueForExpression(item.nodeName || '')}`;
+	buildEventsExpression({
+		objectKind: 'Node',
+		objectName: item.nodeName || '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNodeInitialLogTracesExpression = (
 	item: InframonitoringtypesNodeRecordDTO,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME} = ${formatValueForExpression(item.nodeName || '')} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME} = ${formatValueForExpression(item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] || '')}`;
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME,
+		mainAttributeValue: item.nodeName,
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+	});
 
 export const k8sNodeGetEntityName = (
 	item: InframonitoringtypesNodeRecordDTO,
@@ -43,42 +57,53 @@ export const nodeWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-cores',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-bytes',
 	},
 	{
 		title: 'CPU Usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#cpu-usage-',
 	},
 	{
 		title: 'Memory Usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#memory-usage-',
 	},
 	{
 		title: 'Pods by CPU (top 10)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-cpu-top-10',
 	},
 	{
 		title: 'Pods by Memory (top 10)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#pods-by-memory-top-10',
 	},
 	{
 		title: 'Network error count',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-error-count',
 	},
 	{
 		title: 'Network IO rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#network-io-rate',
 	},
 	{
 		title: 'Filesystem usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-bytes',
 	},
 	{
 		title: 'Filesystem usage (%)',
 		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/kubernetes/nodes/#filesystem-usage-',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Pods/constants.ts

@@ -8,11 +8,17 @@ import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
+import {
+	buildEventsExpression,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
 
 export const k8sPodGetSelectedItemExpression = (
-	selectedItemId: string,
-): string => `k8s.pod.uid = ${formatValueForExpression(selectedItemId)}`;
+	params: SelectedItemParams,
+): string =>
+	`k8s.pod.uid = ${formatValueForExpression(params.selectedItem ?? '')}`;
 
 export const k8sPodDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesPodRecordDTO>[] =
 	[
@@ -35,21 +41,23 @@ export const k8sPodDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonitori
 
 export const k8sPodInitialEventsExpression = (
 	pod: InframonitoringtypesPodRecordDTO,
-): string => {
-	const podName = formatValueForExpression(
-		pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'Pod' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${podName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'Pod',
+		objectName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
+		clusterName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sPodInitialLogTracesExpression = (
 	pod: InframonitoringtypesPodRecordDTO,
-): string => {
-	const podName = formatValueForExpression(
-		pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME] || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME} = ${podName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME,
+		mainAttributeValue: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME],
+		clusterName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: pod.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sPodGetEntityName = (
 	pod: InframonitoringtypesPodRecordDTO,
@@ -59,54 +67,74 @@ export const podWidgetInfo = [
 	{
 		title: 'CPU Usage (cores)',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#cpu-usage-cores-1',
 	},
 	{
 		title: 'CPU Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization',
 	},
 	{
 		title: 'Memory Usage (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-usage-bytes',
 	},
 	{
 		title: 'Memory Request, Limit Utilization',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization',
 	},
 	{
 		title: 'Memory by State',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#memory-by-state',
 	},
 	{
 		title: 'Memory Major Page Faults',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-major-page-faults',
 	},
 	{
 		title: 'CPU Usage by Container (cores)',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-usage-by-container-cores',
 	},
 	{
 		title: 'CPU Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#cpu-request-limit-utilization-by-container',
 	},
 	{
 		title: 'Memory Usage by Container (bytes)',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-usage-by-container-bytes',
 	},
 	{
 		title: 'Memory Request, Limit Utilization by Container',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/pods/#memory-request-limit-utilization-by-container',
 	},
 	{
 		title: 'Network rate',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-rate',
 	},
 	{
 		title: 'Network errors',
 		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#network-errors',
 	},
 	{
 		title: 'File system (bytes)',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/pods/#file-system-bytes',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Pods/table.config.tsx

@@ -152,7 +152,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'podAge',
-		header: 'Age',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#age">
+				Age
+			</ColumnHeader>
+		),
 		accessorFn: (row): number => row.podAge,
 		width: { min: 100 },
 		enableSort: false,
@@ -316,7 +320,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'namespace',
-		header: 'Namespace',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Namespace
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] || '',
 		width: { default: 100 },
@@ -328,7 +336,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'node',
-		header: 'Node',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Node
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NODE_NAME] || '',
 		width: { default: 100 },
@@ -340,7 +352,11 @@ export const k8sPodColumnsConfig: PodTableColumnConfig[] = [
 	},
 	{
 		id: 'cluster',
-		header: 'Cluster',
+		header: (): React.ReactNode => (
+			<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/pods#additional-columns">
+				Cluster
+			</ColumnHeader>
+		),
 		accessorFn: (row): string =>
 			row.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] || '',
 		width: { default: 100 },

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/K8sStatefulSetsList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getStatefulSetMetricsQueryPayload,
 	k8sStatefulSetDetailsMetadataConfig,
@@ -117,7 +118,7 @@ function K8sStatefulSetsList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO>
+			<K8sBaseList<InframonitoringtypesStatefulSetRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.STATEFULSETS}
 				tableColumns={k8sStatefulSetsColumnsConfig}

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/constants.ts

@@ -7,13 +7,21 @@ import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sStatefulSetGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+	);
 
 export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesStatefulSetRecordDTO>[] =
 	[
@@ -22,6 +30,11 @@ export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<Infra
 			getValue: (p): string =>
 				p.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
 		},
+		{
+			label: 'Cluster Name',
+			getValue: (p): string =>
+				p.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '',
+		},
 		{
 			label: 'Namespace Name',
 			getValue: (p): string =>
@@ -31,24 +44,25 @@ export const k8sStatefulSetDetailsMetadataConfig: K8sDetailsMetadataConfig<Infra
 
 export const k8sStatefulSetInitialEventsExpression = (
 	item: InframonitoringtypesStatefulSetRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'StatefulSet' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'StatefulSet',
+		objectName:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sStatefulSetInitialLogTracesExpression = (
 	item: InframonitoringtypesStatefulSetRecordDTO,
-): string => {
-	const statefulSetName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? '',
-	);
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME} = ${statefulSetName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME,
+		mainAttributeValue:
+			item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME],
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sStatefulSetGetEntityName = (
 	item: InframonitoringtypesStatefulSetRecordDTO,
@@ -58,26 +72,37 @@ export const statefulSetWidgetInfo = [
 	{
 		title: 'CPU usage, request, limits',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-usage-request-limits',
 	},
 	{
 		title: 'CPU request, limit util (%)',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#cpu-request-limit-utilization-',
 	},
 	{
 		title: 'Memory usage, request, limits',
 		yAxisUnit: 'bytes',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-usage-request-limits',
 	},
 	{
 		title: 'Memory request, limit util (%)',
 		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#memory-request-limit-utilization-',
 	},
 	{
 		title: 'Network IO',
 		yAxisUnit: 'binBps',
+		docPath: '/infrastructure-monitoring/kubernetes/statefulsets/#network-io',
 	},
 	{
 		title: 'Network errors count',
 		yAxisUnit: '',
+		docPath:
+			'/infrastructure-monitoring/kubernetes/statefulsets/#network-errors-count',
 	},
 ];
 
@@ -93,7 +118,42 @@ export const getStatefulSetMetricsQueryPayload = (
 	const k8sNamespaceNameKey = dotMetricsEnabled
 		? INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME
 		: 'k8s_namespace_name';
-	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+	const k8sPodNameKey = dotMetricsEnabled
+		? INFRA_MONITORING_ATTR_KEYS.K8S_POD_NAME
+		: 'k8s_pod_name';
+	const k8sClusterNameKey = dotMetricsEnabled
+		? INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME
+		: 'k8s_cluster_name';
+
+	const clusterName =
+		statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? '';
+	const namespaceName =
+		statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? '';
+
+	const filters = [
+		{
+			id: 'f2',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_namespace_name--string--tag--false',
+				key: k8sNamespaceNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: namespaceName,
+		},
+		{
+			id: 'f3',
+			key: {
+				dataType: DataTypes.String,
+				id: 'k8s_cluster_name--string--tag--false',
+				key: k8sClusterNameKey,
+				type: 'tag',
+			},
+			op: '=',
+			value: clusterName,
+		},
+	];
 
 	const k8sPodCpuUtilKey = dotMetricsEnabled
 		? 'k8s.pod.cpu.usage'
@@ -168,19 +228,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -223,19 +271,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -278,19 +314,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -353,19 +377,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -408,19 +420,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -483,19 +483,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -525,7 +513,7 @@ export const getStatefulSetMetricsQueryPayload = (
 							filters: {
 								items: [
 									{
-										id: 'f3',
+										id: 'f1',
 										key: {
 											dataType: DataTypes.String,
 											id: 'pod_name',
@@ -538,19 +526,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -593,19 +569,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -668,19 +632,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -723,19 +675,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -798,19 +738,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},
@@ -886,19 +814,7 @@ export const getStatefulSetMetricsQueryPayload = (
 												INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME
 											] ?? '',
 									},
-									{
-										id: 'f2',
-										key: {
-											dataType: DataTypes.String,
-											id: 'ns_name',
-											key: k8sNamespaceNameKey,
-											type: 'tag',
-										},
-										op: '=',
-										value:
-											statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ??
-											'',
-									},
+									...filters,
 								],
 								op: 'AND',
 							},

frontend/src/container/InfraMonitoringK8sV2/StatefulSets/table.config.tsx

@@ -6,6 +6,7 @@ import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 import ColumnHeader from '../Base/ColumnHeader';
 import EntityGroupHeader from '../Base/EntityGroupHeader';
 import K8sGroupCell from '../Base/K8sGroupCell';
+import { SelectedItemParams } from '../hooks';
 import { formatBytes, getPodPhaseStatusItems } from '../commonUtils';
 import {
 	CellValueTooltip,
@@ -31,10 +32,15 @@ export function getK8sStatefulSetRowKey(
 
 export function getK8sStatefulSetItemKey(
 	statefulSet: InframonitoringtypesStatefulSetRecordDTO,
-): string {
-	return (
-		statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] || ''
-	);
+): SelectedItemParams {
+	return {
+		selectedItem:
+			statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_STATEFULSET_NAME] ?? null,
+		clusterName:
+			statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			statefulSet.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesStatefulSetRecordDTO>[] =
@@ -135,10 +141,10 @@ export const k8sStatefulSetsColumnsConfig: TableColumnDef<InframonitoringtypesSt
 			},
 		},
 		{
-			id: 'pod_status',
+			id: 'pod_replicas',
 			header: (): React.ReactNode => (
-				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-status">
-					Pod Status
+				<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/statefulsets#pod-replicas">
+					Pod Replicas
 				</ColumnHeader>
 			),
 			accessorFn: (row): number => row.currentPods,

frontend/src/container/InfraMonitoringK8sV2/Volumes/K8sVolumesList.tsx

@@ -11,6 +11,7 @@ import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
 import { K8sBaseList } from '../Base/K8sBaseList';
 import { K8sBaseFilters } from '../Base/types';
 import { InfraMonitoringEntity } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import {
 	getVolumeMetricsQueryPayload,
 	k8sVolumeDetailsMetadataConfig,
@@ -117,7 +118,7 @@ function K8sVolumesList({
 
 	return (
 		<>
-			<K8sBaseList<InframonitoringtypesVolumeRecordDTO>
+			<K8sBaseList<InframonitoringtypesVolumeRecordDTO, SelectedItemParams>
 				controlListPrefix={controlListPrefix}
 				entity={InfraMonitoringEntity.VOLUMES}
 				tableColumns={k8sVolumesColumnsConfig}

frontend/src/container/InfraMonitoringK8sV2/Volumes/constants.ts

@@ -6,15 +6,22 @@ import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
 import { v4 } from 'uuid';
 
-import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
-
 import { K8sDetailsMetadataConfig } from '../Base/K8sBaseDetails';
 import { INFRA_MONITORING_ATTR_KEYS } from '../constants';
+import { SelectedItemParams } from '../hooks';
+import {
+	buildEventsExpression,
+	buildExpressionFromSelectedItemParams,
+	buildLogsTracesExpression,
+} from 'container/InfraMonitoringK8sV2/Base/utils';
 
 export const k8sVolumeGetSelectedItemExpression = (
-	selectedItemId: string,
+	params: SelectedItemParams,
 ): string =>
-	`${INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME} = ${formatValueForExpression(selectedItemId)}`;
+	buildExpressionFromSelectedItemParams(
+		params,
+		INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+	);
 
 export const k8sVolumeDetailsMetadataConfig: K8sDetailsMetadataConfig<InframonitoringtypesVolumeRecordDTO>[] =
 	[
@@ -36,22 +43,23 @@ export const k8sVolumeDetailsMetadataConfig: K8sDetailsMetadataConfig<Inframonit
 
 export const k8sVolumeInitialEventsExpression = (
 	item: InframonitoringtypesVolumeRecordDTO,
-): string => {
-	const objectName = formatValueForExpression(
-		item.persistentVolumeClaimName || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_KIND} = 'PersistentVolumeClaim' AND ${INFRA_MONITORING_ATTR_KEYS.K8S_OBJECT_NAME} = ${objectName}`;
-};
+): string =>
+	buildEventsExpression({
+		objectKind: 'PersistentVolumeClaim',
+		objectName: item.persistentVolumeClaimName || '',
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sVolumeInitialLogTracesExpression = (
 	item: InframonitoringtypesVolumeRecordDTO,
-): string => {
-	const pvcName = formatValueForExpression(item.persistentVolumeClaimName || '');
-	const namespaceName = formatValueForExpression(
-		item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] || '',
-	);
-	return `${INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME} = ${pvcName} AND ${INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME} = ${namespaceName}`;
-};
+): string =>
+	buildLogsTracesExpression({
+		mainAttributeKey: INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME,
+		mainAttributeValue: item.persistentVolumeClaimName,
+		clusterName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME],
+		namespaceName: item.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME],
+	});
 
 export const k8sVolumeGetEntityName = (
 	item: InframonitoringtypesVolumeRecordDTO,
@@ -61,22 +69,27 @@ export const volumeWidgetInfo = [
 	{
 		title: 'Volume available',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-available',
 	},
 	{
 		title: 'Volume capacity',
 		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-capacity',
 	},
 	{
 		title: 'Volume inodes used',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-used',
 	},
 	{
 		title: 'Volume inodes',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes',
 	},
 	{
 		title: 'Volume inodes free',
 		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/kubernetes/volumes/#volume-inodes-free',
 	},
 ];
 

frontend/src/container/InfraMonitoringK8sV2/Volumes/table.config.tsx

@@ -1,6 +1,5 @@
-import { TableColumnDef } from 'components/TanStackTableView';
+import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { InframonitoringtypesVolumeRecordDTO } from 'api/generated/services/sigNoz.schemas';
-import TanStackTable from 'components/TanStackTableView';
 import { ExpandButtonWrapper } from 'container/InfraMonitoringK8sV2/components';
 
 import ColumnHeader from '../Base/ColumnHeader';
@@ -12,6 +11,7 @@ import {
 	INFRA_MONITORING_ATTR_KEYS,
 	InfraMonitoringEntity,
 } from '../constants';
+import { SelectedItemParams } from '../hooks';
 import { HardDrive } from '@signozhq/icons';
 
 export function getK8sVolumeRowKey(
@@ -26,8 +26,17 @@ export function getK8sVolumeRowKey(
 
 export function getK8sVolumeItemKey(
 	volume: InframonitoringtypesVolumeRecordDTO,
-): string {
-	return volume.persistentVolumeClaimName;
+): SelectedItemParams {
+	return {
+		selectedItem:
+			volume.persistentVolumeClaimName ??
+			volume.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_PERSISTENT_VOLUME_CLAIM_NAME] ??
+			null,
+		clusterName:
+			volume.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_CLUSTER_NAME] ?? null,
+		namespaceName:
+			volume.meta?.[INFRA_MONITORING_ATTR_KEYS.K8S_NAMESPACE_NAME] ?? null,
+	};
 }
 
 export type VolumeTableColumnConfig =

frontend/src/container/InfraMonitoringK8sV2/constants.ts

@@ -897,6 +897,8 @@ export const INFRA_MONITORING_K8S_PARAMS_KEYS = {
 	PAGE_SIZE: 'pageSize',
 	EXPANDED: 'expanded',
 	SELECTED_ITEM: 'selectedItem',
+	SELECTED_ITEM_CLUSTER_NAME: 'selectedItemClusterName',
+	SELECTED_ITEM_NAMESPACE_NAME: 'selectedItemNamespaceName',
 };
 
 /** Metric namespace prefixes for /fields/keys and /fields/values APIs */

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -5,8 +5,10 @@ import {
 	parseAsJson,
 	parseAsString,
 	useQueryState,
+	useQueryStates,
 	UseQueryStateReturn,
 } from 'nuqs';
+import { useCallback, useMemo } from 'react';
 import {
 	IBuilderQuery,
 	TagFilter,
@@ -128,16 +130,70 @@ export const useInfraMonitoringCategory = (): UseQueryStateReturn<
 		parseAsString.withDefault(K8sCategories.PODS).withOptions(defaultNuqsOptions),
 	);
 
-export const useInfraMonitoringSelectedItem = (): UseQueryStateReturn<
-	string,
-	string | undefined
-> => {
-	return useQueryState(
-		INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM,
-		parseAsString,
-	);
+export interface SelectedItemParams {
+	selectedItem: string | null;
+	clusterName?: string | null;
+	namespaceName?: string | null;
+}
+
+const selectedItemParamsParsers = {
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: parseAsString,
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: parseAsString,
+	[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: parseAsString,
 };
 
+export type UseSelectedItemParamsReturn = [
+	SelectedItemParams,
+	(params: SelectedItemParams | null) => void,
+];
+
+export const useInfraMonitoringSelectedItemParams =
+	(): UseSelectedItemParamsReturn => {
+		const [rawParams, setRawParams] = useQueryStates(
+			selectedItemParamsParsers,
+			defaultNuqsOptions,
+		);
+
+		const params: SelectedItemParams = useMemo(
+			() => ({
+				selectedItem:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM] ?? null,
+				clusterName:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME] ??
+					null,
+				namespaceName:
+					rawParams[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME] ??
+					null,
+			}),
+			[rawParams],
+		);
+
+		const setParams = useCallback(
+			(newParams: Partial<SelectedItemParams> | null): void => {
+				if (newParams === null) {
+					void setRawParams({
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]: null,
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]: null,
+						[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]: null,
+					});
+					return;
+				}
+
+				void setRawParams({
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM]:
+						newParams.selectedItem ?? null,
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_CLUSTER_NAME]:
+						newParams.clusterName ?? null,
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.SELECTED_ITEM_NAMESPACE_NAME]:
+						newParams.namespaceName ?? null,
+				});
+			},
+			[setRawParams],
+		);
+
+		return [params, setParams];
+	};
+
 export const useInfraMonitoringStatusFilter = (): UseQueryStateReturn<
 	string,
 	string

frontend/src/container/LLMObservability/AttributeMapping/__tests__/fixtures.ts

@@ -30,7 +30,7 @@ export function makeGroup(overrides: Partial<MapperGroup> = {}): MapperGroup {
 export function makeMapper(overrides: Partial<Mapper> = {}): Mapper {
 	return {
 		id: 'mapper-1',
-		group_id: 'group-1',
+		groupId: 'group-1',
 		name: 'gen_ai.request.model',
 		enabled: true,
 		fieldContext: FieldContext.attribute,
@@ -89,5 +89,5 @@ export const mockGroups: MapperGroup[] = [
 ];
 
 export const mockMappers: Mapper[] = [
-	makeMapper({ id: 'mapper-1', group_id: 'group-1' }),
+	makeMapper({ id: 'mapper-1', groupId: 'group-1' }),
 ];

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.module.scss

@@ -3,3 +3,13 @@
 	flex-direction: column;
 	gap: var(--spacing-8);
 }
+
+.tabLabel {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.tabBadge {
+	margin: 0;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/LLMObservabilityModelPricing.tsx

@@ -1,30 +1,58 @@
+import { Badge } from '@signozhq/ui/badge';
 import { Tabs } from '@signozhq/ui/tabs';
+import { useListUnmappedLLMModels } from 'api/generated/services/llmpricingrules';
+import { parseAsStringEnum, useQueryState } from 'nuqs';
 
-import ModelCostTabPanel from './ModelCostTabPanel';
+import { MODEL_COSTS_TAB, TAB_KEY, UNPRICED_MODELS_TAB } from './constants';
 import styles from './LLMObservabilityModelPricing.module.scss';
+import ModelCostTabPanel from './ModelCostTabPanel';
+import UnpricedModelsTab from './UnpricedModelsTab';
 
 function LLMObservabilityModelPricing(): JSX.Element {
+	const [activeTab, setActiveTab] = useQueryState(
+		TAB_KEY,
+		parseAsStringEnum([MODEL_COSTS_TAB, UNPRICED_MODELS_TAB]).withDefault(
+			MODEL_COSTS_TAB,
+		),
+	);
+
+	// Count powers the tab badge; deduped with the tab's own fetch by react-query.
+	const { data } = useListUnmappedLLMModels();
+	const unpricedCount = data?.data?.items?.length ?? 0;
+
 	return (
 		<div
 			className={styles.llmObservabilityModelPricing}
 			data-testid="llm-observability-model-pricing-page"
 		>
 			<Tabs
-				// Model costs is the only enabled tab for now, so default to it. When
-				// the unpriced-models tab lands in a later PR.
-				defaultValue="model-costs"
+				value={activeTab}
+				onChange={(key): void => {
+					void setActiveTab(key as typeof activeTab);
+				}}
 				items={[
 					{
-						key: 'model-costs',
+						key: MODEL_COSTS_TAB,
 						label: 'Model costs',
 						children: <ModelCostTabPanel />,
 					},
 					{
-						// Unpriced-models tab lands in a later PR.
-						key: 'unpriced-models',
-						label: 'Unpriced models',
-						disabled: true,
-						children: null,
+						key: UNPRICED_MODELS_TAB,
+						label: (
+							<span className={styles.tabLabel}>
+								Unpriced models
+								{unpricedCount > 0 && (
+									<Badge
+										variant="default"
+										className={styles.tabBadge}
+										data-testid="unpriced-models-count"
+									>
+										{unpricedCount}
+									</Badge>
+								)}
+							</span>
+						),
+						children: <UnpricedModelsTab />,
 					},
 				]}
 			/>

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/hooks/useModelCostDrawer.ts

@@ -3,6 +3,7 @@ import { toast } from '@signozhq/ui/sonner';
 import { useQueryClient } from 'react-query';
 import {
 	getListLLMPricingRulesQueryKey,
+	getListUnmappedLLMModelsQueryKey,
 	useCreateOrUpdateLLMPricingRules,
 } from 'api/generated/services/llmpricingrules';
 
@@ -10,9 +11,16 @@ import {
 	EMPTY_DRAFT,
 	TOAST_MODEL_COST_ADDED,
 	TOAST_MODEL_COST_UPDATED,
-} from '../../../../constants';
-import type { DrawerDraft, DrawerMode, PricingRule } from '../../../../types';
-import { buildRulePayload, draftFromRule } from '../../../../utils';
+} from 'container/LLMObservability/Settings/ModelPricing/constants';
+import type {
+	DrawerDraft,
+	DrawerMode,
+	PricingRule,
+} from 'container/LLMObservability/Settings/ModelPricing/types';
+import {
+	buildRulePayload,
+	draftFromRule,
+} from 'container/LLMObservability/Settings/ModelPricing/utils';
 
 interface UseModelCostDrawerResult {
 	isOpen: boolean;
@@ -38,17 +46,26 @@ export function useModelCostDrawer(): UseModelCostDrawerResult {
 	const { mutateAsync: createOrUpdate, isLoading: isSaving } =
 		useCreateOrUpdateLLMPricingRules();
 
+	// Adding pricing can also resolve a model that was showing up as unpriced, so
+	// refresh the unmapped list (and its tab-badge count) alongside the rules list.
 	const invalidateList = useCallback(async (): Promise<void> => {
-		await queryClient.invalidateQueries({
-			queryKey: getListLLMPricingRulesQueryKey(),
-		});
+		await Promise.all([
+			queryClient.invalidateQueries({
+				queryKey: getListLLMPricingRulesQueryKey(),
+			}),
+			queryClient.invalidateQueries({
+				queryKey: getListUnmappedLLMModelsQueryKey(),
+			}),
+		]);
 	}, [queryClient]);
 
-	const openForAdd = useCallback((): void => {
+	// prefillModelName seeds the billing model ID when adding from an unpriced
+	// model row, so the user only has to fill in pricing.
+	const openForAdd = useCallback((prefillModelName?: string): void => {
 		setMode('add');
 		setInitialDraft({
 			...EMPTY_DRAFT,
-			modelName: '',
+			modelName: prefillModelName ?? '',
 			patterns: [],
 		});
 		setSelectedRuleId(null);

frontend/src/container/LLMObservability/Settings/ModelPricing/ModelCostTabPanel/components/ModelCostDrawer/shared.module.scss

@@ -25,7 +25,6 @@
 .drawerSurface {
 	padding: var(--spacing-7);
 	border-radius: 6px;
-	background: var(--l2-background);
 	border: 1px solid var(--l2-border);
 }
 

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/UnpricedModelsTab.module.scss

@@ -0,0 +1,27 @@
+.unpricedModelsTab {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-8);
+}
+
+.banner {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing-5);
+	padding: var(--spacing-6) var(--spacing-8);
+	border-radius: var(--radius-2);
+	border: 1px solid color-mix(in srgb, var(--bg-amber-400) 30%, transparent);
+	background: color-mix(in srgb, var(--bg-amber-400) 8%, transparent);
+	color: var(--bg-amber-300, var(--bg-amber-400));
+}
+
+.bannerIcon {
+	flex-shrink: 0;
+	margin-top: var(--spacing-1);
+}
+
+.error {
+	padding: var(--spacing-6) var(--spacing-8);
+	border-radius: var(--radius-2);
+	background: color-mix(in srgb, var(--bg-cherry-400) 8%, transparent);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/UnpricedModelsTab.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { Typography } from '@signozhq/ui/typography';
+import { TriangleAlert } from '@signozhq/icons';
+import { useListUnmappedLLMModels } from 'api/generated/services/llmpricingrules';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { useAppContext } from 'providers/App/App';
+
+import styles from './UnpricedModelsTab.module.scss';
+import ModelCostDrawer, {
+	useModelCostDrawer,
+} from '../ModelCostTabPanel/components/ModelCostDrawer';
+import type { PricingRule, UnpricedModel } from '../types';
+import MapConfirmDialog from './components/MapConfirmDialog';
+import type { UnpricedColumnsConfig } from './components/UnpricedModelsTable/TableConfig';
+import UnpricedModelsTable from './components/UnpricedModelsTable';
+import { useUnpricedModelMapping } from './hooks/useUnpricedModelMapping';
+import { usePendingMappingStore } from './usePendingMappingStore';
+
+function UnpricedModelsTab(): JSX.Element {
+	const { data, isLoading, isError } = useListUnmappedLLMModels();
+
+	const { user } = useAppContext();
+	const [canManagePricing] = useComponentPermission(
+		['manage_llm_pricing'],
+		user.role,
+	);
+
+	const models: UnpricedModel[] = useMemo(() => data?.data?.items || [], [data]);
+
+	// Picking a billing model stages a single mapping for confirmation; the
+	// mapping only commits once the user confirms in the dialog. Kept in a store
+	// (not local state) so the row's memoized select trigger can mirror the pick —
+	// see usePendingMappingStore.
+	const pendingMapping = usePendingMappingStore((state) => state.pending);
+	const setPending = usePendingMappingStore((state) => state.setPending);
+	const clearPending = usePendingMappingStore((state) => state.clearPending);
+	const { mapModel, isSaving } = useUnpricedModelMapping();
+
+	// Reset any staged mapping when leaving the tab so a stale pick doesn't reopen
+	// the dialog on remount (the store outlives this component).
+	useEffect(() => (): void => clearPending(), [clearPending]);
+
+	// Reuses the "Model costs" add/edit drawer to define brand-new pricing for a
+	// model that has no matching billing model to map onto. Saving resolves the
+	// model, so it drops off this tab (the drawer invalidates the unmapped list).
+	const drawer = useModelCostDrawer();
+
+	const onRequestMap = useCallback(
+		(model: UnpricedModel, rule: PricingRule): void => {
+			setPending({ model, rule });
+		},
+		[setPending],
+	);
+
+	const onConfirmMap = useCallback(async (): Promise<void> => {
+		if (!pendingMapping) {
+			return;
+		}
+		const didSave = await mapModel(pendingMapping);
+		if (didSave) {
+			clearPending();
+		}
+	}, [mapModel, pendingMapping, clearPending]);
+
+	// openForAdd is stable (useCallback with no deps); drawer itself is a fresh
+	// object each render, so depend on the method, not the object.
+	const { openForAdd } = drawer;
+	const onCreateNew = useCallback(
+		(modelName: string): void => openForAdd(modelName),
+		[openForAdd],
+	);
+	const columnsConfig = useMemo<UnpricedColumnsConfig>(
+		() => ({
+			canManage: canManagePricing,
+			onRequestMap,
+			onCreateNew,
+		}),
+		[canManagePricing, onRequestMap, onCreateNew],
+	);
+
+	return (
+		<div className={styles.unpricedModelsTab}>
+			<div className={styles.banner}>
+				<TriangleAlert size="sm" className={styles.bannerIcon} />
+				<Typography.Text as="span" size="small" color="warning">
+					Models detected in traces without pricing. Map each to a billing model or
+					create pricing so estimated cost can be computed.
+				</Typography.Text>
+			</div>
+
+			{isError && (
+				<div className={styles.error}>
+					<Typography.Text as="p" size="small" color="danger" role="alert">
+						Failed to load unpriced models. Please try again.
+					</Typography.Text>
+				</div>
+			)}
+
+			<UnpricedModelsTable
+				models={models}
+				isLoading={isLoading}
+				columnsConfig={columnsConfig}
+			/>
+
+			{pendingMapping && (
+				<MapConfirmDialog
+					open
+					model={pendingMapping.model}
+					rule={pendingMapping.rule}
+					isSaving={isSaving}
+					onConfirm={onConfirmMap}
+					onCancel={clearPending}
+				/>
+			)}
+
+			{drawer.isOpen && (
+				<ModelCostDrawer
+					isOpen={drawer.isOpen}
+					mode={drawer.mode}
+					initialDraft={drawer.initialDraft}
+					onClose={drawer.close}
+					onSave={drawer.save}
+					isSaving={drawer.isSaving}
+					saveError={drawer.saveError}
+					canManage={canManagePricing}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default UnpricedModelsTab;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/__tests__/UnpricedModelsTab.test.tsx

@@ -0,0 +1,180 @@
+import type { LlmpricingruletypesUpdatableLLMPricingRulesDTO } from 'api/generated/services/sigNoz.schemas';
+import {
+	LLM_PRICING_ENDPOINT,
+	LLM_UNMAPPED_ENDPOINT,
+	makeListResponse,
+	makeUnmappedResponse,
+	mockRules,
+} from 'container/LLMObservability/Settings/ModelPricing/__tests__/fixtures';
+import { rest, server } from 'mocks-server/server';
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+
+import UnpricedModelsTab from '../UnpricedModelsTab';
+
+const toastSuccess = jest.fn();
+const toastError = jest.fn();
+jest.mock('@signozhq/ui/sonner', () => ({
+	...jest.requireActual('@signozhq/ui/sonner'),
+	toast: {
+		success: (...args: unknown[]): void => toastSuccess(...args),
+		error: (...args: unknown[]): void => toastError(...args),
+	},
+}));
+
+const MODEL = 'gpt-4o-mini-2024-07-18';
+
+function setup(): void {
+	server.use(
+		rest.get(LLM_UNMAPPED_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeUnmappedResponse())),
+		),
+		rest.get(LLM_PRICING_ENDPOINT, (_req, res, ctx) =>
+			res(ctx.status(200), ctx.json(makeListResponse(mockRules))),
+		),
+	);
+}
+
+// Picks a billing model in a row's dropdown: open the combobox, then click the
+// option. The dropdown fetches its options from the rules list (mocked above).
+async function selectRule(
+	user: ReturnType<typeof userEvent.setup>,
+	modelName: string,
+	ruleId: string,
+): Promise<void> {
+	await user.click(screen.getByTestId(`map-to-select-${modelName}`));
+	await user.click(await screen.findByTestId(`map-to-option-${ruleId}`));
+}
+
+describe('UnpricedModelsTab (integration)', () => {
+	beforeEach(() => {
+		window.history.pushState(null, '', '/');
+		setup();
+	});
+
+	afterEach(() => {
+		server.resetHandlers();
+		toastSuccess.mockClear();
+		toastError.mockClear();
+	});
+
+	it('opens the confirm dialog with the target rule pricing when a model is picked', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<UnpricedModelsTab />);
+
+		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
+
+		// Picking a rule stages the mapping in the confirm dialog.
+		await selectRule(user, MODEL, 'rule-openai');
+
+		const confirmItem = await screen.findByTestId(
+			`unpriced-map-confirm-item-${MODEL}`,
+		);
+		expect(confirmItem).toBeInTheDocument();
+		// Shows the target billing model + its pricing so the user can eyeball it.
+		expect(screen.getByText('openai:gpt-4o')).toBeInTheDocument();
+		expect(screen.getByText('$3.00')).toBeInTheDocument();
+		expect(screen.getByText('$9.00')).toBeInTheDocument();
+		// While the dialog is open, the row's trigger mirrors the staged pick
+		// instead of the placeholder.
+		const trigger = screen.getByTestId(`map-to-select-${MODEL}`);
+		expect(
+			within(trigger).getByText('openai:gpt-4o ($3.00/$9.00)'),
+		).toBeInTheDocument();
+	});
+
+	it('reverts the row trigger to the placeholder when the mapping is cancelled', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<UnpricedModelsTab />);
+
+		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
+		await selectRule(user, MODEL, 'rule-openai');
+
+		expect(
+			within(screen.getByTestId(`map-to-select-${MODEL}`)).getByText(
+				'openai:gpt-4o ($3.00/$9.00)',
+			),
+		).toBeInTheDocument();
+
+		await user.click(await screen.findByTestId('unpriced-map-cancel-btn'));
+
+		await waitFor(() => {
+			const trigger = screen.getByTestId(`map-to-select-${MODEL}`);
+			expect(
+				within(trigger).getByText('Select / Create a pricing model'),
+			).toBeInTheDocument();
+		});
+	});
+
+	it('commits the mapping in one request when confirmed', async () => {
+		const sent: LlmpricingruletypesUpdatableLLMPricingRulesDTO[] = [];
+		server.use(
+			rest.put(LLM_PRICING_ENDPOINT, async (req, res, ctx) => {
+				sent.push(await req.json());
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<UnpricedModelsTab />);
+
+		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
+		await selectRule(user, MODEL, 'rule-openai');
+
+		await user.click(await screen.findByTestId('unpriced-map-confirm-btn'));
+
+		await waitFor(() => expect(sent).toHaveLength(1));
+		expect(sent[0].rules).toHaveLength(1);
+		expect(sent[0].rules?.[0].modelPattern).toContain(MODEL);
+		await waitFor(() =>
+			expect(toastSuccess).toHaveBeenCalledWith('Mapped model'),
+		);
+		// Dialog closes on success.
+		await waitFor(() =>
+			expect(
+				screen.queryByTestId(`unpriced-map-confirm-item-${MODEL}`),
+			).not.toBeInTheDocument(),
+		);
+	});
+
+	it('cancels the mapping without committing', async () => {
+		const sent: LlmpricingruletypesUpdatableLLMPricingRulesDTO[] = [];
+		server.use(
+			rest.put(LLM_PRICING_ENDPOINT, async (req, res, ctx) => {
+				sent.push(await req.json());
+				return res(ctx.status(200), ctx.json({ status: 'success' }));
+			}),
+		);
+
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<UnpricedModelsTab />);
+
+		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
+		await selectRule(user, MODEL, 'rule-openai');
+
+		await user.click(await screen.findByTestId('unpriced-map-cancel-btn'));
+
+		await waitFor(() =>
+			expect(
+				screen.queryByTestId(`unpriced-map-confirm-item-${MODEL}`),
+			).not.toBeInTheDocument(),
+		);
+		expect(sent).toHaveLength(0);
+	});
+
+	it('opens the add-cost drawer prefilled when creating pricing for a model', async () => {
+		const user = userEvent.setup({ pointerEventsCheck: 0 });
+		render(<UnpricedModelsTab />);
+
+		await screen.findByTestId(`unpriced-model-name-${MODEL}`);
+
+		// Open the row's dropdown and take the "Create pricing for …" escape hatch
+		// instead of mapping onto an existing billing model.
+		await user.click(screen.getByTestId(`map-to-select-${MODEL}`));
+		await user.click(await screen.findByTestId(`map-to-create-${MODEL}`));
+
+		// The shared add-cost drawer opens with the model name prefilled.
+		const drawerTitle = await screen.findByText('Add model cost');
+		expect(drawerTitle).toBeInTheDocument();
+		expect(screen.getByTestId('drawer-model-id-input')).toHaveValue(MODEL);
+	});
+});

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapConfirmDialog/MapConfirmDialog.module.scss

@@ -0,0 +1,40 @@
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-6);
+}
+
+.mapping {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	flex-wrap: wrap;
+}
+
+.arrow {
+	flex-shrink: 0;
+	opacity: 0.6;
+}
+
+.pricing {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+	padding: var(--spacing-6);
+	border-radius: var(--radius-2);
+	border: 1px solid var(--l2-border);
+	background: var(--l3-background);
+}
+
+.pricingRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing-6);
+}
+
+.footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing-4);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapConfirmDialog/MapConfirmDialog.tsx

@@ -0,0 +1,124 @@
+import { Button } from '@signozhq/ui/button';
+import { DialogWrapper } from '@signozhq/ui/dialog';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowRight, Check, Link2, X } from '@signozhq/icons';
+import { startCase } from 'lodash-es';
+
+import styles from './MapConfirmDialog.module.scss';
+import type {
+	PricingRule,
+	UnpricedModel,
+} from 'container/LLMObservability/Settings/ModelPricing/types';
+import {
+	formatPricePerMillion,
+	getCanonicalId,
+	getExtraBuckets,
+} from 'container/LLMObservability/Settings/ModelPricing/utils';
+
+interface MapConfirmDialogProps {
+	open: boolean;
+	model: UnpricedModel;
+	rule: PricingRule;
+	isSaving: boolean;
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+// Per-row confirm step before mapping an unpriced model onto an existing billing
+// model. Mapping appends the span's model name as a match pattern on the chosen
+// rule, so the model inherits that rule's pricing — shown here so the user can
+// eyeball the rates before committing. Dismissible (outside click / close), since
+// mapping is reversible (re-map or edit the rule's patterns afterwards).
+function MapConfirmDialog({
+	open,
+	model,
+	rule,
+	isSaving,
+	onConfirm,
+	onCancel,
+}: MapConfirmDialogProps): JSX.Element {
+	const extraBuckets = getExtraBuckets(rule);
+
+	const pricingRows = [
+		{ key: 'input', label: 'Input / 1M', value: rule.pricing?.input },
+		{ key: 'output', label: 'Output / 1M', value: rule.pricing?.output },
+		...extraBuckets.map((bucket) => ({
+			key: bucket.key,
+			label: startCase(bucket.key),
+			value: bucket.pricePerMillion,
+		})),
+	];
+
+	const footer = (
+		<div className={styles.footer}>
+			<Button
+				variant="outlined"
+				color="secondary"
+				onClick={onCancel}
+				disabled={isSaving}
+				prefix={<X size={12} />}
+				testId="unpriced-map-cancel-btn"
+			>
+				Cancel
+			</Button>
+			<Button
+				variant="solid"
+				color="primary"
+				loading={isSaving}
+				onClick={onConfirm}
+				prefix={<Check size={12} />}
+				testId="unpriced-map-confirm-btn"
+			>
+				Map model
+			</Button>
+		</div>
+	);
+
+	return (
+		<DialogWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onCancel();
+				}
+			}}
+			width="base"
+			title="Map to billing model"
+			titleIcon={<Link2 size={16} />}
+			footer={footer}
+			testId="unpriced-map-confirm-dialog"
+		>
+			<div className={styles.body}>
+				<Typography.Text as="p" size="small" color="muted">
+					Spans from this model will be priced using the selected billing model.
+				</Typography.Text>
+
+				<div className={styles.mapping}>
+					<Typography.Text
+						weight="semibold"
+						testId={`unpriced-map-confirm-item-${model.modelName}`}
+					>
+						{model.modelName}
+					</Typography.Text>
+					<ArrowRight size={14} className={styles.arrow} />
+					<Typography.Text weight="semibold">{getCanonicalId(rule)}</Typography.Text>
+				</div>
+
+				<div className={styles.pricing}>
+					{pricingRows.map((row) => (
+						<div className={styles.pricingRow} key={row.key}>
+							<Typography.Text as="span" size="small" color="muted">
+								{row.label}
+							</Typography.Text>
+							<Typography.Text as="span" size="small" weight="semibold">
+								{formatPricePerMillion(row.value)}
+							</Typography.Text>
+						</div>
+					))}
+				</div>
+			</div>
+		</DialogWrapper>
+	);
+}
+
+export default MapConfirmDialog;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapConfirmDialog/index.ts

@@ -0,0 +1 @@
+export { default } from './MapConfirmDialog';

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.module.scss

@@ -0,0 +1,27 @@
+.mapToCell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-1);
+	min-width: 0;
+}
+
+.mapToSelect {
+	width: 100%;
+	max-width: 280px;
+}
+
+.mapToDropdown {
+	width: 280px;
+}
+
+.skeletonList {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+	padding: var(--spacing-3) var(--spacing-4);
+}
+
+.skeletonRow {
+	display: block;
+	width: 100%;
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/MapToBillingModelSelect.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import {
+	Combobox,
+	ComboboxCommand,
+	ComboboxContent,
+	ComboboxCreateItem,
+	ComboboxEmpty,
+	ComboboxInput,
+	ComboboxItem,
+	ComboboxList,
+	ComboboxSeparator,
+	ComboboxTrigger,
+} from '@signozhq/ui/combobox';
+import { Plus } from '@signozhq/icons';
+import { Skeleton } from 'antd';
+
+import styles from './MapToBillingModelSelect.module.scss';
+import { RULE_OPTIONS_LIMIT } from 'container/LLMObservability/Settings/ModelPricing/constants';
+import type { PricingRule } from 'container/LLMObservability/Settings/ModelPricing/types';
+import { getRuleOptionLabel } from 'container/LLMObservability/Settings/ModelPricing/utils';
+import { usePendingMappingLabel } from 'container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/usePendingMappingStore';
+import { useMapToBillingModelSearch } from './useMapToBillingModelSearch';
+
+// One placeholder row per fetched option, so the skeleton height matches the
+// loaded list. Stable keys derived from the fetch limit.
+const SKELETON_ROW_KEYS = Array.from(
+	{ length: RULE_OPTIONS_LIMIT },
+	(_, index) => `skeleton-${index}`,
+);
+
+interface MapToBillingModelSelectProps {
+	modelName: string;
+	disabled: boolean;
+	onSelect: (rule: PricingRule) => void;
+	onCreateNew: () => void;
+}
+
+// Searchable, server-paged dropdown for picking the billing model an unpriced
+// model maps onto. Only RULE_OPTIONS_LIMIT rules are fetched at a time; typing
+// narrows the set via the rules API rather than client-side filtering, so cmdk's
+// own filter is disabled (shouldFilter={false}). The dropdown is a pure picker —
+// choosing a rule hands it up to the confirm dialog rather than persisting a
+// selection here. The trigger only mirrors the staged pick (read from the
+// pending-mapping store) while that dialog is open, reverting on confirm/cancel.
+function MapToBillingModelSelect({
+	modelName,
+	disabled,
+	onSelect,
+	onCreateNew,
+}: MapToBillingModelSelectProps): JSX.Element {
+	const [open, setOpen] = useState(false);
+	const { searchText, setSearchText, rules, rulesById, isFetching } =
+		useMapToBillingModelSearch(open);
+	const selectedLabel = usePendingMappingLabel(modelName);
+
+	const handleSelect = (ruleId: string): void => {
+		const rule = rulesById.get(ruleId);
+		if (rule) {
+			onSelect(rule);
+		}
+		setOpen(false);
+	};
+
+	const handleCreateNew = (): void => {
+		setOpen(false);
+		onCreateNew();
+	};
+
+	return (
+		<div className={styles.mapToCell}>
+			<Combobox open={open} onOpenChange={setOpen}>
+				<ComboboxTrigger
+					className={styles.mapToSelect}
+					disabled={disabled}
+					placeholder="Select / Create a pricing model"
+					value={selectedLabel}
+					testId={`map-to-select-${modelName}`}
+				/>
+				<ComboboxContent className={styles.mapToDropdown}>
+					<ComboboxCommand shouldFilter={false}>
+						<ComboboxInput
+							value={searchText}
+							onValueChange={setSearchText}
+							placeholder="Search billing models"
+							testId={`map-to-search-${modelName}`}
+						/>
+						<ComboboxList>
+							{rules.map((rule) => (
+								<ComboboxItem
+									key={rule.id}
+									value={rule.id}
+									onSelect={(): void => handleSelect(rule.id)}
+									data-testid={`map-to-option-${rule.id}`}
+								>
+									{getRuleOptionLabel(rule)}
+								</ComboboxItem>
+							))}
+							{isFetching && (
+								<div
+									className={styles.skeletonList}
+									data-testid={`map-to-loading-${modelName}`}
+								>
+									{SKELETON_ROW_KEYS.map((key) => (
+										<Skeleton.Input
+											key={key}
+											active
+											block
+											size="small"
+											className={styles.skeletonRow}
+										/>
+									))}
+								</div>
+							)}
+							{!isFetching && rules.length === 0 && (
+								<ComboboxEmpty>No billing models found</ComboboxEmpty>
+							)}
+						</ComboboxList>
+						{/* Kept outside ComboboxList so it stays pinned as a footer while the
+						    options scroll. Escape hatch when no existing billing model fits:
+						    define this model's own pricing rather than mapping onto another. */}
+						<ComboboxSeparator alwaysRender />
+						<ComboboxCreateItem
+							inputValue={modelName}
+							value={`create-pricing-${modelName}`}
+							prefix={<Plus size={14} />}
+							onSelect={handleCreateNew}
+							testId={`map-to-create-${modelName}`}
+						>
+							Create pricing for &quot;{modelName}&quot;
+						</ComboboxCreateItem>
+					</ComboboxCommand>
+				</ComboboxContent>
+			</Combobox>
+		</div>
+	);
+}
+
+export default MapToBillingModelSelect;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/index.ts

@@ -0,0 +1 @@
+export { default } from './MapToBillingModelSelect';

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect/useMapToBillingModelSearch.ts

@@ -0,0 +1,44 @@
+import { useMemo, useState } from 'react';
+import { useListLLMPricingRules } from 'api/generated/services/llmpricingrules';
+import useDebounce from 'hooks/useDebounce';
+
+import {
+	RULE_OPTIONS_LIMIT,
+	SEARCH_DEBOUNCE_MS,
+} from 'container/LLMObservability/Settings/ModelPricing/constants';
+import type { PricingRule } from 'container/LLMObservability/Settings/ModelPricing/types';
+
+interface UseMapToBillingModelSearch {
+	searchText: string;
+	setSearchText: (value: string) => void;
+	rules: PricingRule[];
+	// Fetched rules keyed by id, so a pick can resolve to its full rule object.
+	rulesById: Map<string, PricingRule>;
+	isFetching: boolean;
+}
+
+// Server-side search for the per-row "Map to billing model" dropdown. Only
+// RULE_OPTIONS_LIMIT rules are fetched at a time; typing narrows the set via the
+// rules API's `q` param instead of filtering client-side. The fetch is gated on
+// `enabled` (the dropdown's open state) so closed rows don't fetch, and
+// react-query dedupes identical query keys so rows sharing a term hit the network
+// once.
+export function useMapToBillingModelSearch(
+	enabled: boolean,
+): UseMapToBillingModelSearch {
+	const [searchText, setSearchText] = useState('');
+	const debouncedSearch = useDebounce(searchText, SEARCH_DEBOUNCE_MS);
+
+	const { data, isFetching } = useListLLMPricingRules(
+		{ offset: 0, limit: RULE_OPTIONS_LIMIT, q: debouncedSearch || undefined },
+		{ query: { enabled } },
+	);
+
+	const rules = useMemo<PricingRule[]>(() => data?.data?.items || [], [data]);
+	const rulesById = useMemo(
+		() => new Map(rules.map((rule) => [rule.id, rule])),
+		[rules],
+	);
+
+	return { searchText, setSearchText, rules, rulesById, isFetching };
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/UnpricedModelsTable/TableConfig/index.ts

@@ -0,0 +1,2 @@
+export { getUnpricedModelsColumns } from './table.config';
+export type { UnpricedColumnsConfig } from './table.config';

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/UnpricedModelsTable/TableConfig/table.config.tsx

@@ -0,0 +1,88 @@
+import { Badge } from '@signozhq/ui/badge';
+import { Typography } from '@signozhq/ui/typography';
+import type { TableColumnDef } from 'components/TanStackTableView';
+
+import MapToBillingModelSelect from 'container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/MapToBillingModelSelect';
+import type {
+	PricingRule,
+	UnpricedModel,
+} from 'container/LLMObservability/Settings/ModelPricing/types';
+import { formatSpanCount } from 'container/LLMObservability/Settings/ModelPricing/utils';
+import styles from './tableConfig.module.scss';
+
+export interface UnpricedColumnsConfig {
+	canManage: boolean;
+	// Picking a billing model requests a mapping — the tab opens a confirm dialog
+	// and commits that single mapping there (no batch/selection state here).
+	onRequestMap: (model: UnpricedModel, rule: PricingRule) => void;
+	// Opens the add-cost drawer prefilled with the row's model name.
+	onCreateNew: (modelName: string) => void;
+}
+
+// Column definitions for the unpriced-models TanStackTable. Sorting is off — the
+// unmapped-models endpoint returns the full set in one shot with no ordering knob.
+// Each row's action is self-contained: pick a billing model to map onto (confirmed
+// in a dialog) or create pricing for the model, so there's no bulk-save column.
+export function getUnpricedModelsColumns({
+	canManage,
+	onRequestMap,
+	onCreateNew,
+}: UnpricedColumnsConfig): TableColumnDef<UnpricedModel>[] {
+	return [
+		{
+			id: 'model',
+			header: 'Model (from spans)',
+			accessorFn: (row): string => row.modelName,
+			width: { min: 240, default: '100%' },
+			enableMove: false,
+			enableRemove: false,
+			cell: ({ row }): JSX.Element => (
+				<Typography.Text
+					weight="semibold"
+					truncate={1}
+					testId={`unpriced-model-name-${row.modelName}`}
+				>
+					{row.modelName}
+				</Typography.Text>
+			),
+		},
+		{
+			id: 'provider',
+			header: 'Provider',
+			width: { min: 140 },
+			enableMove: false,
+			cell: ({ row }): string => row.provider || 'Unknown',
+		},
+		{
+			id: 'spans',
+			header: 'Spans',
+			width: { min: 100 },
+			enableMove: false,
+			cell: ({ row }): JSX.Element => (
+				<Badge
+					color="cherry"
+					variant="outline"
+					className={styles.spansBadge}
+					data-testid={`unpriced-spans-${row.modelName}`}
+				>
+					{formatSpanCount(row.spanCount)}
+				</Badge>
+			),
+		},
+		{
+			id: 'mapTo',
+			header: 'Map to billing model',
+			width: { min: 280, default: '100%' },
+			enableMove: false,
+			enableRemove: false,
+			cell: ({ row }): JSX.Element => (
+				<MapToBillingModelSelect
+					modelName={row.modelName}
+					disabled={!canManage}
+					onSelect={(rule): void => onRequestMap(row, rule)}
+					onCreateNew={(): void => onCreateNew(row.modelName)}
+				/>
+			),
+		},
+	];
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/UnpricedModelsTable/TableConfig/tableConfig.module.scss

@@ -0,0 +1,4 @@
+.spansBadge {
+	margin: 0;
+	font-family: var(--code-font-family, monospace);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/UnpricedModelsTable/UnpricedModelsTable.module.scss

@@ -0,0 +1,22 @@
+// Capped scroll viewport — mirrors ModelCostsTable so the unpriced tab doesn't
+// shift on load, but uses max-height so a short list stays compact instead of
+// reserving the full viewport. The extra offset over the model-costs table
+// accounts for the banner toolbar above.
+.unpricedModelsTable {
+	--tanstack-table-row-height: 48px;
+	max-height: calc(100vh - 220px);
+	overflow-y: auto;
+
+	:global(table) tbody tr {
+		cursor: default;
+	}
+}
+
+.unpricedModelsEmpty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 400px;
+	color: var(--l3-foreground);
+	font-size: var(--periscope-font-size-base);
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/UnpricedModelsTable/UnpricedModelsTable.tsx

@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import TanStackTable from 'components/TanStackTableView';
+
+import { SKELETON_ROW_COUNT } from 'container/LLMObservability/Settings/ModelPricing/constants';
+import type { UnpricedModel } from 'container/LLMObservability/Settings/ModelPricing/types';
+import styles from './UnpricedModelsTable.module.scss';
+import {
+	getUnpricedModelsColumns,
+	type UnpricedColumnsConfig,
+} from './TableConfig';
+
+interface UnpricedModelsTableProps {
+	models: UnpricedModel[];
+	isLoading: boolean;
+	columnsConfig: UnpricedColumnsConfig;
+}
+
+// The unmapped-models endpoint returns the full set in one response, so there's
+// no pagination here — just a content-height list. Virtual scroll is disabled
+// because the set is small and bounded.
+function UnpricedModelsTable({
+	models,
+	isLoading,
+	columnsConfig,
+}: UnpricedModelsTableProps): JSX.Element {
+	const columns = useMemo(
+		() => getUnpricedModelsColumns(columnsConfig),
+		[columnsConfig],
+	);
+
+	if (!isLoading && models.length === 0) {
+		return (
+			<div
+				className={styles.unpricedModelsEmpty}
+				data-testid="unpriced-models-empty"
+			>
+				All models in your traces are priced.
+			</div>
+		);
+	}
+
+	return (
+		<TanStackTable<UnpricedModel>
+			className={styles.unpricedModelsTable}
+			data={models}
+			columns={columns}
+			isLoading={isLoading}
+			skeletonRowCount={SKELETON_ROW_COUNT}
+			getRowKey={(row): string => row.modelName}
+			disableVirtualScroll
+			testId="unpriced-models-table"
+		/>
+	);
+}
+
+export default UnpricedModelsTable;

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/components/UnpricedModelsTable/index.ts

@@ -0,0 +1 @@
+export { default } from './UnpricedModelsTable';

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/hooks/useUnpricedModelMapping.ts

@@ -0,0 +1,70 @@
+import { useCallback, useState } from 'react';
+import { toast } from '@signozhq/ui/sonner';
+import { useQueryClient } from 'react-query';
+import {
+	getListLLMPricingRulesQueryKey,
+	getListUnmappedLLMModelsQueryKey,
+	useCreateOrUpdateLLMPricingRules,
+} from 'api/generated/services/llmpricingrules';
+
+import type {
+	PricingRule,
+	UnpricedModel,
+} from 'container/LLMObservability/Settings/ModelPricing/types';
+import { buildPatternMappingPayload } from 'container/LLMObservability/Settings/ModelPricing/utils';
+
+// A single row's choice: map this unpriced model onto this billing rule.
+export interface UnpricedModelMapping {
+	model: UnpricedModel;
+	rule: PricingRule;
+}
+
+interface UseUnpricedModelMappingResult {
+	// Commits a single mapping in one request. Resolves true on success so the
+	// caller can close the confirm dialog and clear its staged pick.
+	mapModel: (mapping: UnpricedModelMapping) => Promise<boolean>;
+	// True while the save is in flight, so the confirm button can spin.
+	isSaving: boolean;
+}
+
+// Maps an unpriced model onto an existing pricing rule. There's no dedicated
+// "edit" endpoint — mapping reuses CreateOrUpdate (PUT), appending the model name
+// as a match pattern on the chosen rule so the model inherits its pricing. Both
+// the unmapped list and the rules list are invalidated on success so the mapped
+// model drops out of this tab immediately.
+export function useUnpricedModelMapping(): UseUnpricedModelMappingResult {
+	const queryClient = useQueryClient();
+	const [isSaving, setIsSaving] = useState(false);
+
+	const { mutateAsync: createOrUpdate } = useCreateOrUpdateLLMPricingRules();
+
+	const mapModel = useCallback(
+		async ({ model, rule }: UnpricedModelMapping): Promise<boolean> => {
+			const payload = buildPatternMappingPayload(rule, model.modelName);
+
+			setIsSaving(true);
+			try {
+				await createOrUpdate({ data: { rules: [payload] } });
+				await Promise.all([
+					queryClient.invalidateQueries({
+						queryKey: getListUnmappedLLMModelsQueryKey(),
+					}),
+					queryClient.invalidateQueries({
+						queryKey: getListLLMPricingRulesQueryKey(),
+					}),
+				]);
+				toast.success('Mapped model');
+				return true;
+			} catch (error) {
+				const message = error instanceof Error ? error.message : 'Mapping failed';
+				toast.error(message);
+				return false;
+			} finally {
+				setIsSaving(false);
+			}
+		},
+		[createOrUpdate, queryClient],
+	);
+
+	return { mapModel, isSaving };
+}

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/index.ts

@@ -0,0 +1 @@
+export { default } from './UnpricedModelsTab';

frontend/src/container/LLMObservability/Settings/ModelPricing/UnpricedModelsTab/usePendingMappingStore.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand';
+
+import type { PricingRule, UnpricedModel } from '../types';
+import { getRuleOptionLabel } from '../utils';
+
+// A model + the billing rule it's about to be mapped onto, held while the confirm
+// dialog is open.
+export interface PendingMapping {
+	model: UnpricedModel;
+	rule: PricingRule;
+}
+
+interface PendingMappingState {
+	pending: PendingMapping | null;
+	setPending: (mapping: PendingMapping) => void;
+	clearPending: () => void;
+}
+
+// The staged mapping lives in a store (not component state/props) because the
+// row's select trigger, which mirrors the staged pick, sits inside a memoized
+// TanStackTable cell whose value is cached per row — a prop/context change would
+// not re-render it, but a store subscription does. Picking a billing model stages
+// a single mapping for confirmation; it only commits once confirmed in the dialog.
+export const usePendingMappingStore = create<PendingMappingState>((set) => ({
+	pending: null,
+	setPending: (mapping): void => set({ pending: mapping }),
+	clearPending: (): void => set({ pending: null }),
+}));
+
+// Label to show on the given row's select trigger while its mapping is staged, or
+// undefined when nothing is staged for that row (falls back to the placeholder).
+export const usePendingMappingLabel = (modelName: string): string | undefined =>
+	usePendingMappingStore((state) => {
+		const { pending } = state;
+		if (!pending || pending.model.modelName !== modelName) {
+			return undefined;
+		}
+		return getRuleOptionLabel(pending.rule);
+	});

frontend/src/container/LLMObservability/Settings/ModelPricing/__tests__/fixtures.ts

@@ -2,14 +2,19 @@ import {
 	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
 	LlmpricingruletypesLLMPricingRuleUnitDTO as UnitDTO,
 	type ListLLMPricingRules200,
+	type ListUnmappedLLMModels200,
 } from 'api/generated/services/sigNoz.schemas';
 
-import type { PricingRule } from '../types';
+import type { PricingRule, UnpricedModel } from '../types';
 
 // Endpoint glob used by MSW handlers. The generated client hits a relative
 // `/api/v1/llm_pricing_rules`, so the `*` prefix matches regardless of base URL.
 export const LLM_PRICING_ENDPOINT = '*/api/v1/llm_pricing_rules';
 export const LLM_PRICING_RULE_ENDPOINT = '*/api/v1/llm_pricing_rules/:id';
+// Distinct path (extra segment), so it needs its own handler — the list glob
+// above does not match it.
+export const LLM_UNMAPPED_ENDPOINT =
+	'*/api/v1/llm_pricing_rules/unmapped_models';
 
 // Builds a valid pricing rule, with overrides merged shallowly. Pricing is
 // replaced wholesale when provided so callers can shape cache buckets freely.
@@ -60,6 +65,26 @@ export const mockRules: PricingRule[] = [
 	}),
 ];
 
+// Unpriced models seen in traces with no matching pricing rule.
+export const mockUnpricedModels: UnpricedModel[] = [
+	{ modelName: 'gpt-4o-mini-2024-07-18', provider: 'openai', spanCount: 18400 },
+	{
+		modelName: 'claude-3-7-sonnet-20250219',
+		provider: 'anthropic',
+		spanCount: 9200,
+	},
+];
+
+// Wraps unpriced models in the envelope the unmapped-models query reads.
+export function makeUnmappedResponse(
+	items: UnpricedModel[] = mockUnpricedModels,
+): ListUnmappedLLMModels200 {
+	return {
+		status: 'success',
+		data: { items },
+	};
+}
+
 // Wraps items in the list response envelope the list query reads
 // (`data.data.items` / `data.data.total`).
 export function makeListResponse(

frontend/src/container/LLMObservability/Settings/ModelPricing/constants.ts

@@ -34,6 +34,13 @@ export const SOURCE_FILTER_TO_IS_OVERRIDE: Record<
 // loaded page renders — otherwise the table height jumps on load.
 export const SKELETON_ROW_COUNT = PAGE_SIZE;
 
+export const RULE_OPTIONS_LIMIT = 10;
+
+// URL-backed key for the active tab on the model-pricing page.
+export const TAB_KEY = 'tab';
+export const MODEL_COSTS_TAB = 'model-costs';
+export const UNPRICED_MODELS_TAB = 'unpriced-models';
+
 export const PROVIDER_OPTIONS = [
 	{ value: 'OpenAI', label: 'OpenAI' },
 	{ value: 'Anthropic', label: 'Anthropic' },
@@ -62,6 +69,7 @@ export const EMPTY_DRAFT: DrawerDraft = {
 	provider: 'OpenAI',
 	patterns: [],
 	isOverride: true,
+	enabled: true,
 	pricing: {
 		input: null,
 		output: null,

frontend/src/container/LLMObservability/Settings/ModelPricing/types.ts

@@ -1,10 +1,14 @@
 import {
 	LlmpricingruletypesLLMPricingRuleCacheModeDTO as CacheModeDTO,
 	type LlmpricingruletypesLLMPricingRuleDTO,
+	type LlmpricingruletypesUnmappedModelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
 export type PricingRule = LlmpricingruletypesLLMPricingRuleDTO;
 
+// A model seen in trace data (gen_ai.request.model) that no pricing rule matches.
+export type UnpricedModel = LlmpricingruletypesUnmappedModelDTO;
+
 export interface ExtraBucket {
 	key: string;
 	pricePerMillion: number;
@@ -29,6 +33,7 @@ export interface DrawerDraft {
 	provider: string;
 	patterns: string[];
 	isOverride: boolean;
+	enabled: boolean;
 	pricing: {
 		input: number | null;
 		output: number | null;

frontend/src/container/LLMObservability/Settings/ModelPricing/utils.ts

@@ -86,6 +86,7 @@ export const draftFromRule = (rule: PricingRule): DrawerDraft => ({
 	provider: rule.provider,
 	patterns: rule.modelPattern || [],
 	isOverride: !!rule.isOverride,
+	enabled: rule.enabled,
 	pricing: {
 		input: rule.pricing?.input ?? 0,
 		output: rule.pricing?.output ?? 0,
@@ -129,7 +130,7 @@ export const buildRulePayload = (
 	provider: draft.provider.trim(),
 	modelPattern: draft.patterns,
 	isOverride: draft.isOverride,
-	enabled: true,
+	enabled: draft.enabled,
 	unit: UnitDTO.per_million_tokens,
 	pricing: buildPricingPayload(draft),
 });
@@ -161,3 +162,38 @@ export const validatePricing = (
 	}
 	return true;
 };
+
+const spanCountFormatter = new Intl.NumberFormat('en', {
+	notation: 'compact',
+	maximumFractionDigits: 1,
+});
+
+export const formatSpanCount = (count: number): string =>
+	spanCountFormatter.format(count);
+
+// Label for the "Map to billing model" dropdown, e.g. "openai:gpt-4o ($15.00/$60.00)".
+export const getRuleOptionLabel = (rule: PricingRule): string =>
+	`${getCanonicalId(rule)} (${formatPricePerMillion(
+		rule.pricing?.input,
+	)}/${formatPricePerMillion(rule.pricing?.output)})`;
+
+export const buildPatternMappingPayload = (
+	rule: PricingRule,
+	modelName: string,
+): LlmpricingruletypesUpdatableLLMPricingRuleDTO => {
+	const existing = rule.modelPattern ?? [];
+	const modelPattern = existing.includes(modelName)
+		? existing
+		: [...existing, modelName];
+	return {
+		id: rule.id,
+		sourceId: rule.sourceId,
+		modelName: rule.modelName,
+		provider: rule.provider,
+		modelPattern,
+		isOverride: rule.isOverride,
+		enabled: rule.enabled,
+		unit: rule.unit,
+		pricing: rule.pricing,
+	};
+};

frontend/src/container/LogDetailedView/InfraMetrics/constants.ts

@@ -2872,17 +2872,72 @@ export const nodeWidgetInfo = [
 ];
 
 export const hostWidgetInfo = [
-	{ title: 'CPU Usage', yAxisUnit: 'percentunit' },
-	{ title: 'Memory Usage', yAxisUnit: 'bytes' },
-	{ title: 'System Load Average', yAxisUnit: '' },
-	{ title: 'Network usage (bytes)', yAxisUnit: 'bytes' },
-	{ title: 'Network usage (packet/s)', yAxisUnit: 'pps' },
-	{ title: 'Network errors', yAxisUnit: 'short' },
-	{ title: 'Network drops', yAxisUnit: 'short' },
-	{ title: 'Network connections', yAxisUnit: 'short' },
-	{ title: 'System disk io (bytes transferred)', yAxisUnit: 'bytes' },
-	{ title: 'System disk operations/s', yAxisUnit: 'short' },
-	{ title: 'Queue size', yAxisUnit: 'short' },
-	{ title: 'System disk operation time/s', yAxisUnit: 's' },
-	{ title: 'Disk Usage (%) by mountpoint', yAxisUnit: 'percentunit' },
+	{
+		title: 'CPU Usage',
+		yAxisUnit: 'percentunit',
+		docPath: '/infrastructure-monitoring/host-monitoring/#cpu-usage',
+	},
+	{
+		title: 'Memory Usage',
+		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/host-monitoring/#memory-usage',
+	},
+	{
+		title: 'System Load Average',
+		yAxisUnit: '',
+		docPath: '/infrastructure-monitoring/host-monitoring/#system-load-average',
+	},
+	{
+		title: 'Network usage (bytes)',
+		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-usage-bytes',
+	},
+	{
+		title: 'Network usage (packet/s)',
+		yAxisUnit: 'pps',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-usage-packetss',
+	},
+	{
+		title: 'Network errors',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-errors',
+	},
+	{
+		title: 'Network drops',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-drops',
+	},
+	{
+		title: 'Network connections',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#network-connections',
+	},
+	{
+		title: 'System disk io (bytes transferred)',
+		yAxisUnit: 'bytes',
+		docPath: '/infrastructure-monitoring/host-monitoring/#system-disk-io-bytes',
+	},
+	{
+		title: 'System disk operations/s',
+		yAxisUnit: 'short',
+		docPath:
+			'/infrastructure-monitoring/host-monitoring/#system-disk-operationss',
+	},
+	{
+		title: 'Queue size',
+		yAxisUnit: 'short',
+		docPath: '/infrastructure-monitoring/host-monitoring/#queue-size',
+	},
+	{
+		title: 'System disk operation time/s',
+		yAxisUnit: 's',
+		docPath:
+			'/infrastructure-monitoring/host-monitoring/#system-disk-operation-times',
+	},
+	{
+		title: 'Disk Usage (%) by mountpoint',
+		yAxisUnit: 'percentunit',
+		docPath:
+			'/infrastructure-monitoring/host-monitoring/#disk-usage--by-mountpoint',
+	},
 ];

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -191,14 +191,6 @@
 				min-height: 0;
 				overflow-y: visible;
 
-				.time-series-view-container-header {
-					display: flex;
-					justify-content: flex-start;
-					align-items: center;
-					padding: 12px;
-					flex-shrink: 0;
-				}
-
 				.time-series-view {
 					flex-shrink: 0;
 					height: 65vh;

frontend/src/container/LogsExplorerViews/index.tsx

@@ -32,7 +32,6 @@ import {
 	getListQuery,
 	getQueryByPanelType,
 } from 'container/LogsExplorerViews/explorerUtils';
-import { BuilderUnitsFilter } from 'container/QueryBuilder/filters/BuilderUnitsFilter';
 import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
@@ -461,18 +460,17 @@ function LogsExplorerViewsContainer({
 					)}
 					{selectedPanelType === PANEL_TYPES.TIME_SERIES && !showLiveLogs && (
 						<div className="time-series-view-container">
-							<div className="time-series-view-container-header">
-								<BuilderUnitsFilter onChange={onUnitChange} yAxisUnit={yAxisUnit} />
-							</div>
 							<TimeSeriesView
 								isLoading={isLoading || isFetching}
 								data={data}
 								isError={isError}
 								error={error as APIError}
 								yAxisUnit={yAxisUnit}
+								onYAxisUnitChange={onUnitChange}
 								isFilterApplied={!isEmpty(listQuery?.filters?.items)}
 								dataSource={DataSource.LOGS}
 								setWarning={setWarning}
+								allowExport
 							/>
 						</div>
 					)}

frontend/src/container/MetricsExplorer/Explorer/TimeSeries.tsx

@@ -311,6 +311,7 @@ function TimeSeries({
 									dataSource={DataSource.METRICS}
 									error={queries[index].error as APIError}
 									setWarning={setWarning}
+									allowExport
 								/>
 							</div>
 						);