fix(package): add rebuild and capture as build flag on tear up

This reverts commit 55e7f602e1.

.github/workflows/goci.yaml

@@ -53,21 +53,6 @@ jobs:
     with:
       PRIMUS_REF: main
       GO_VERSION: 1.24
-  semconv-generated:
-    if: |
-      github.event_name == 'merge_group' ||
-      (github.event_name == 'pull_request' && ! github.event.pull_request.head.repo.fork && github.event.pull_request.user.login != 'dependabot[bot]' && ! contains(github.event.pull_request.labels.*.name, 'safe-to-test')) ||
-      (github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'safe-to-test'))
-    runs-on: ubuntu-latest
-    steps:
-      - name: self-checkout
-        uses: actions/checkout@v4
-      - name: go-install
-        uses: actions/setup-go@v5
-        with:
-          go-version: "1.24"
-      - name: check-semconv-generated-files
-        run: go run ./scripts/semconv -check
   build:
     if: |
       github.event_name == 'merge_group' ||

.github/workflows/integrationci.yaml

@@ -39,8 +39,6 @@ jobs:
       matrix:
         suite:
           - alerts
-          - alertmanager
-          - alertmanagerrotation
           - basepath
           - callbackauthn
           - cloudintegrations
@@ -55,7 +53,6 @@ jobs:
           - queriermetrics
           - querierscalar
           - queriercommon
-          - querierai
           - rawexportdata
           - promqlconformance
           - querierauthz

Makefile

@@ -233,10 +233,6 @@ py-clean: ## Clear all pycache and pytest cache from tests directory recursively
 ##############################################################
 # generate commands
 ##############################################################
-.PHONY: semconv-generate
-semconv-generate: ## Regenerate semantic-convention families for Go and TypeScript
-	@go run ./scripts/semconv
-
 .PHONY: gen-mocks
 gen-mocks:
 	@echo ">> Generating mocks"

docs/api/openapi.yml

@@ -6902,7 +6902,6 @@ components:
     Querybuildertypesv5QueryEnvelope:
       discriminator:
         mapping:
-          builder_ai_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
           builder_formula: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
           builder_query: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
           builder_trace_operator: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
@@ -6911,7 +6910,6 @@ components:
         propertyName: type
       oneOf:
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilder'
-      - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeBuilderAI'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeFormula'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopeTraceOperator'
       - $ref: '#/components/schemas/Querybuildertypesv5QueryEnvelopePromQL'
@@ -6926,15 +6924,6 @@ components:
       required:
       - type
       type: object
-    Querybuildertypesv5QueryEnvelopeBuilderAI:
-      properties:
-        spec:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregation'
-        type:
-          $ref: '#/components/schemas/Querybuildertypesv5QueryType'
-      required:
-      - type
-      type: object
     Querybuildertypesv5QueryEnvelopeClickHouseSQL:
       properties:
         spec:
@@ -7048,7 +7037,6 @@ components:
     Querybuildertypesv5QueryType:
       enum:
       - builder_query
-      - builder_ai_query
       - builder_formula
       - builder_trace_operator
       - clickhouse_sql
@@ -10247,9 +10235,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - ADMIN
       - tokenizer:
-        - dashboard:update
+        - ADMIN
       summary: Delete public dashboard
       tags:
       - dashboard
@@ -10298,9 +10286,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:read
+        - ADMIN
       - tokenizer:
-        - dashboard:read
+        - ADMIN
       summary: Get public dashboard
       tags:
       - dashboard
@@ -10355,9 +10343,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - ADMIN
       - tokenizer:
-        - dashboard:update
+        - ADMIN
       summary: Create public dashboard
       tags:
       - dashboard
@@ -10399,9 +10387,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - ADMIN
       - tokenizer:
-        - dashboard:update
+        - ADMIN
       summary: Update public dashboard
       tags:
       - dashboard
@@ -14739,9 +14727,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - VIEWER
       - tokenizer:
-        - dashboard:list
+        - VIEWER
       summary: List dashboard saved views
       tags:
       - dashboard
@@ -14796,9 +14784,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - EDITOR
       - tokenizer:
-        - dashboard:list
+        - EDITOR
       summary: Create dashboard saved view
       tags:
       - dashboard
@@ -14849,9 +14837,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - EDITOR
       - tokenizer:
-        - dashboard:list
+        - EDITOR
       summary: Delete dashboard saved view
       tags:
       - dashboard
@@ -14917,9 +14905,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - EDITOR
       - tokenizer:
-        - dashboard:list
+        - EDITOR
       summary: Update dashboard saved view
       tags:
       - dashboard
@@ -14994,9 +14982,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - VIEWER
       - tokenizer:
-        - dashboard:list
+        - VIEWER
       summary: List dashboards (v2)
       tags:
       - dashboard
@@ -15051,9 +15039,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:create
+        - EDITOR
       - tokenizer:
-        - dashboard:create
+        - EDITOR
       summary: Create dashboard (v2)
       tags:
       - dashboard
@@ -15104,9 +15092,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:delete
+        - EDITOR
       - tokenizer:
-        - dashboard:delete
+        - EDITOR
       summary: Delete dashboard (v2)
       tags:
       - dashboard
@@ -15167,9 +15155,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:read
+        - VIEWER
       - tokenizer:
-        - dashboard:read
+        - VIEWER
       summary: Get dashboard (v2)
       tags:
       - dashboard
@@ -15241,9 +15229,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - EDITOR
       - tokenizer:
-        - dashboard:update
+        - EDITOR
       summary: Patch dashboard (v2)
       tags:
       - dashboard
@@ -15310,9 +15298,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - EDITOR
       - tokenizer:
-        - dashboard:update
+        - EDITOR
       summary: Update dashboard (v2)
       tags:
       - dashboard
@@ -15378,11 +15366,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:read
-        - dashboard:create
+        - EDITOR
       - tokenizer:
-        - dashboard:read
-        - dashboard:create
+        - EDITOR
       summary: Clone dashboard (v2)
       tags:
       - dashboard
@@ -15433,9 +15419,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - EDITOR
       - tokenizer:
-        - dashboard:update
+        - EDITOR
       summary: Unlock dashboard (v2)
       tags:
       - dashboard
@@ -15485,78 +15471,12 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:update
+        - EDITOR
       - tokenizer:
-        - dashboard:update
+        - EDITOR
       summary: Lock dashboard (v2)
       tags:
       - dashboard
-  /api/v2/dashboards/{id}/migrate:
-    post:
-      deprecated: false
-      description: 'This endpoint retries the v1→v2 (Perses) migration on a dashboard
-        still stored in the v1 schema and returns the v2-shape result. It is idempotent:
-        a dashboard already in the v2 schema is returned unchanged.'
-      operationId: MigrateDashboardV2
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/DashboardtypesGettableDashboardV2'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - dashboard:update
-      - tokenizer:
-        - dashboard:update
-      summary: Migrate dashboard to v2
-      tags:
-      - dashboard
   /api/v2/factor_password/forgot:
     post:
       deprecated: false
@@ -23697,9 +23617,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - VIEWER
       - tokenizer:
-        - dashboard:list
+        - VIEWER
       summary: List dashboards for the current user (v2)
       tags:
       - dashboard
@@ -23744,9 +23664,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - VIEWER
       - tokenizer:
-        - dashboard:list
+        - VIEWER
       summary: Unpin a dashboard for the current user (v2)
       tags:
       - dashboard
@@ -23803,9 +23723,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - dashboard:list
+        - VIEWER
       - tokenizer:
-        - dashboard:list
+        - VIEWER
       summary: Pin a dashboard for the current user (v2)
       tags:
       - dashboard

docs/contributing/tests/e2e.md

@@ -232,11 +232,14 @@ cd tests/e2e
 # Single feature dir
 npx playwright test tests/alerts/ --project=chromium
 
+# Single sub-area
+npx playwright test tests/alerts/history/ --project=chromium
+
 # Single file
-npx playwright test tests/alerts/alerts.spec.ts --project=chromium
+npx playwright test tests/alerts/page.spec.ts --project=chromium
 
 # Single test by title grep
-npx playwright test --project=chromium -g "TC-01"
+npx playwright test --project=chromium -g "AL-01"
 ```
 
 ### Iterative modes
@@ -270,7 +273,14 @@ yarn test:staging
 | `SIGNOZ_E2E_PASSWORD` | Admin password. Bootstrap writes the integration-test default. |
 | `SIGNOZ_E2E_SEEDER_URL` | Seeder HTTP base URL — hit by specs that need per-test telemetry. |
 
-Loading order in `playwright.config.ts`: `.env` first (user-provided, staging), then `.env.local` with `override: true` (bootstrap-generated, local mode). Anything already set in `process.env` at yarn-test time wins because dotenv doesn't touch vars that are already present.
+Precedence in `playwright.config.ts`, lowest to highest: `.env` (user-provided, staging) → `.env.local` (bootstrap-generated, local mode) → whatever is already in `process.env`. The config parses both files itself and only fills in keys the environment does not already define, so exporting a variable always wins:
+
+```bash
+# runs against a locally served frontend, not whatever .env.local points at
+SIGNOZ_E2E_BASE_URL=http://127.0.0.1:3301 pnpm test tests/alerts
+```
+
+This is deliberately not `dotenv.config({ override: true })`. That flag makes the *file* beat `process.env`, which silently discarded exported values — including the `SIGNOZ_E2E_BASE_URL` in `pnpm test:staging`, whenever a `.env.local` happened to exist.
 
 ### Playwright options
 

ee/modules/dashboard/impldashboard/module.go

@@ -276,10 +276,6 @@ func (module *module) GetV2(ctx context.Context, orgID valuer.UUID, id valuer.UU
 	return module.pkgDashboardModule.GetV2(ctx, orgID, id)
 }
 
-func (module *module) MigrateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*dashboardtypes.DashboardV2, error) {
-	return module.pkgDashboardModule.MigrateV2(ctx, orgID, id)
-}
-
 func (module *module) UpdateV2(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, updatable dashboardtypes.UpdatableDashboardV2) (*dashboardtypes.DashboardV2, error) {
 	return module.pkgDashboardModule.UpdateV2(ctx, orgID, id, updatedBy, updatable)
 }

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

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

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

@@ -24,8 +24,6 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
-  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
 
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",

frontend/public/locales/en/channels.json

@@ -24,8 +24,6 @@
   "tooltip_opsgenie_api_key": "Learn how to obtain the API key from your OpsGenie account [here](https://support.atlassian.com/opsgenie/docs/integrate-opsgenie-with-prometheus/).",
   "tooltip_email_to": "Enter email addresses separated by commas.",
   "tooltip_ms_teams_url": "The URL of the Microsoft Teams [webhook](https://support.microsoft.com/en-us/office/create-incoming-webhooks-with-workflows-for-microsoft-teams-8ae491c7-0394-4861-ba59-055e33f75498) to send alerts to. Learn more about Microsoft Teams integration in the docs [here](https://signoz.io/docs/alerts-management/notification-channel/ms-teams/).",
-  "tooltip_google_chat_url": "The URL of the Google Chat space [incoming webhook](https://developers.google.com/workspace/chat/quickstart/webhooks) to send alerts to. It must be an https URL on chat.googleapis.com.",
-  "google_chat_webhook_url_invalid": "Webhook URL must be an https URL on chat.googleapis.com",
   "field_slack_recipient": "Recipient",
   "field_slack_title": "Title",
   "field_slack_description": "Description",

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

@@ -52,8 +52,6 @@ import type {
 	ListDashboardsV2200,
 	ListDashboardsV2Params,
 	LockDashboardV2PathParameters,
-	MigrateDashboardV2200,
-	MigrateDashboardV2PathParameters,
 	PatchDashboardV2200,
 	PatchDashboardV2PathParameters,
 	PinDashboardV2PathParameters,
@@ -1806,85 +1804,6 @@ export const useLockDashboardV2 = <
 > => {
 	return useMutation(getLockDashboardV2MutationOptions(options));
 };
-/**
- * This endpoint retries the v1→v2 (Perses) migration on a dashboard still stored in the v1 schema and returns the v2-shape result. It is idempotent: a dashboard already in the v2 schema is returned unchanged.
- * @summary Migrate dashboard to v2
- */
-export const migrateDashboardV2 = (
-	{ id }: MigrateDashboardV2PathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<MigrateDashboardV2200>({
-		url: `/api/v2/dashboards/${id}/migrate`,
-		method: 'POST',
-		signal,
-	});
-};
-
-export const getMigrateDashboardV2MutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof migrateDashboardV2>>,
-		TError,
-		{ pathParams: MigrateDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof migrateDashboardV2>>,
-	TError,
-	{ pathParams: MigrateDashboardV2PathParameters },
-	TContext
-> => {
-	const mutationKey = ['migrateDashboardV2'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof migrateDashboardV2>>,
-		{ pathParams: MigrateDashboardV2PathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return migrateDashboardV2(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type MigrateDashboardV2MutationResult = NonNullable<
-	Awaited<ReturnType<typeof migrateDashboardV2>>
->;
-
-export type MigrateDashboardV2MutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Migrate dashboard to v2
- */
-export const useMigrateDashboardV2 = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof migrateDashboardV2>>,
-		TError,
-		{ pathParams: MigrateDashboardV2PathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof migrateDashboardV2>>,
-	TError,
-	{ pathParams: MigrateDashboardV2PathParameters },
-	TContext
-> => {
-	return useMutation(getMigrateDashboardV2MutationOptions(options));
-};
 /**
  * This endpoint returns the sanitized v2-shape dashboard data for public access. Each panel query is reduced to a safe field subset, so filters and raw query strings are not exposed.
  * @summary Get public dashboard data (v2)

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

@@ -4301,18 +4301,6 @@ export interface Querybuildertypesv5QueryEnvelopeBuilderDTO {
 	type: Querybuildertypesv5QueryEnvelopeBuilderDTOType;
 }
 
-export enum Querybuildertypesv5QueryEnvelopeBuilderAIDTOType {
-	builder_ai_query = 'builder_ai_query',
-}
-export interface Querybuildertypesv5QueryEnvelopeBuilderAIDTO {
-	spec?: Querybuildertypesv5QueryBuilderQueryGithubComSigNozSignozPkgTypesQuerybuildertypesQuerybuildertypesv5TraceAggregationDTO;
-	/**
-	 * @type string
-	 * @enum builder_ai_query
-	 */
-	type: Querybuildertypesv5QueryEnvelopeBuilderAIDTOType;
-}
-
 export interface Querybuildertypesv5QueryBuilderFormulaDTO {
 	/**
 	 * @type boolean
@@ -4496,7 +4484,6 @@ export interface Querybuildertypesv5QueryEnvelopeClickHouseSQLDTO {
 
 export type Querybuildertypesv5QueryEnvelopeDTO =
 	| Querybuildertypesv5QueryEnvelopeBuilderDTO
-	| Querybuildertypesv5QueryEnvelopeBuilderAIDTO
 	| Querybuildertypesv5QueryEnvelopeFormulaDTO
 	| Querybuildertypesv5QueryEnvelopeTraceOperatorDTO
 	| Querybuildertypesv5QueryEnvelopePromQLDTO
@@ -8300,7 +8287,6 @@ export interface Querybuildertypesv5QueryRangeResponseDTO {
 
 export enum Querybuildertypesv5QueryTypeDTO {
 	builder_query = 'builder_query',
-	builder_ai_query = 'builder_ai_query',
 	builder_formula = 'builder_formula',
 	builder_trace_operator = 'builder_trace_operator',
 	clickhouse_sql = 'clickhouse_sql',
@@ -11178,17 +11164,6 @@ export type UnlockDashboardV2PathParameters = {
 export type LockDashboardV2PathParameters = {
 	id: string;
 };
-export type MigrateDashboardV2PathParameters = {
-	id: string;
-};
-export type MigrateDashboardV2200 = {
-	data: DashboardtypesGettableDashboardV2DTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetFeatures200 = {
 	/**
 	 * @type array

frontend/src/assets/Logos/amazon-bedrock.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="#9CA3AF" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>AWS</title><path d="M6.763 11.212q.002.446.088.71c.064.176.144.368.256.576.04.063.056.127.056.183q.002.12-.152.24l-.503.335a.4.4 0 0 1-.208.072q-.12-.002-.239-.112a2.5 2.5 0 0 1-.287-.375 6 6 0 0 1-.248-.471q-.934 1.101-2.347 1.101c-.67 0-1.205-.191-1.596-.574-.39-.384-.59-.894-.59-1.533 0-.678.24-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583q-.001-.908-.375-1.277c-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103s-.583.16-.862.272a2 2 0 0 1-.28.104.5.5 0 0 1-.127.023q-.168.002-.168-.247v-.391c0-.128.016-.224.056-.28a.6.6 0 0 1 .224-.167 4.6 4.6 0 0 1 1.005-.36 4.8 4.8 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647q.661.646.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144a1.8 1.8 0 0 0 .758-.51 1.3 1.3 0 0 0 .272-.512c.047-.191.08-.423.08-.694v-.335a7 7 0 0 0-.735-.136 6 6 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296m6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 6.726a1.4 1.4 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783q.227-.001.31.08c.065.048.113.16.16.312l1.342 5.284 1.245-5.284q.058-.24.151-.312a.55.55 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348q.074-.24.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1 1 0 0 1-.056.2l-1.923 6.17q-.072.24-.168.311a.5.5 0 0 1-.303.08h-.687c-.15 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32L12.32 7.747l-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.6.6 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247q.072 0 .144.024c.048.016.12.048.2.08q.408.181.878.279c.32.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.78.78 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.9 1.9 0 0 1-.4-1.158q0-.502.216-.886c.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .36.008.535.032.183.024.35.056.518.088q.24.058.455.127.216.072.336.144a.7.7 0 0 1 .24.2.43.43 0 0 1 .071.263v.375q-.002.254-.184.256a.8.8 0 0 1-.303-.096 3.65 3.65 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223s-.375.383-.375.71c0 .224.08.416.24.567.16.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767s.367.702.367 1.117c0 .343-.072.655-.207.926a2.2 2.2 0 0 1-.583.703c-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167"/><path fill="#f90" d="M.378 15.475c3.384 1.963 7.56 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.44-.2.814.287.383.607-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351m23.531-.2c.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151l.175-.439c.343-.88.802-2.198.52-2.555-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" fill-rule="evenodd" style="flex:none;line-height:1" viewBox="0 0 24 24"><title>AWS</title><path d="M6.763 11.212q.002.446.088.71c.064.176.144.368.256.576.04.063.056.127.056.183q.002.12-.152.24l-.503.335a.4.4 0 0 1-.208.072q-.12-.002-.239-.112a2.5 2.5 0 0 1-.287-.375 6 6 0 0 1-.248-.471q-.934 1.101-2.347 1.101c-.67 0-1.205-.191-1.596-.574-.39-.384-.59-.894-.59-1.533 0-.678.24-1.23.726-1.644.487-.415 1.133-.623 1.955-.623.272 0 .551.024.846.064.296.04.6.104.918.176v-.583q-.001-.908-.375-1.277c-.255-.248-.686-.367-1.3-.367-.28 0-.568.031-.863.103s-.583.16-.862.272a2 2 0 0 1-.28.104.5.5 0 0 1-.127.023q-.168.002-.168-.247v-.391c0-.128.016-.224.056-.28a.6.6 0 0 1 .224-.167 4.6 4.6 0 0 1 1.005-.36 4.8 4.8 0 0 1 1.246-.151c.95 0 1.644.216 2.091.647q.661.646.662 1.963v2.586zm-3.24 1.214c.263 0 .534-.048.822-.144a1.8 1.8 0 0 0 .758-.51 1.3 1.3 0 0 0 .272-.512c.047-.191.08-.423.08-.694v-.335a7 7 0 0 0-.735-.136 6 6 0 0 0-.75-.048c-.535 0-.926.104-1.19.32-.263.215-.39.518-.39.917 0 .375.095.655.295.846.191.2.47.296.838.296m6.41.862c-.144 0-.24-.024-.304-.08-.064-.048-.12-.16-.168-.311L7.586 6.726a1.4 1.4 0 0 1-.072-.32c0-.128.064-.2.191-.2h.783q.227-.001.31.08c.065.048.113.16.16.312l1.342 5.284 1.245-5.284q.058-.24.151-.312a.55.55 0 0 1 .32-.08h.638c.152 0 .256.025.32.08.063.048.12.16.151.312l1.261 5.348 1.381-5.348q.074-.24.16-.312a.52.52 0 0 1 .311-.08h.743c.127 0 .2.065.2.2 0 .04-.009.08-.017.128a1 1 0 0 1-.056.2l-1.923 6.17q-.072.24-.168.311a.5.5 0 0 1-.303.08h-.687c-.15 0-.255-.024-.32-.08-.063-.056-.119-.16-.15-.32L12.32 7.747l-1.23 5.14c-.04.16-.087.264-.15.32-.065.056-.177.08-.32.08zm10.256.215c-.415 0-.83-.048-1.229-.143-.399-.096-.71-.2-.918-.32-.128-.071-.215-.151-.247-.223a.6.6 0 0 1-.048-.224v-.407c0-.167.064-.247.183-.247q.072 0 .144.024c.048.016.12.048.2.08q.408.181.878.279c.32.064.63.096.95.096.502 0 .894-.088 1.165-.264a.86.86 0 0 0 .415-.758.78.78 0 0 0-.215-.559c-.144-.151-.416-.287-.807-.415l-1.157-.36c-.583-.183-1.014-.454-1.277-.813a1.9 1.9 0 0 1-.4-1.158q0-.502.216-.886c.144-.255.335-.479.575-.654.24-.184.51-.32.83-.415.32-.096.655-.136 1.006-.136.175 0 .36.008.535.032.183.024.35.056.518.088q.24.058.455.127.216.072.336.144a.7.7 0 0 1 .24.2.43.43 0 0 1 .071.263v.375q-.002.254-.184.256a.8.8 0 0 1-.303-.096 3.65 3.65 0 0 0-1.532-.311c-.455 0-.815.071-1.062.223s-.375.383-.375.71c0 .224.08.416.24.567.16.152.454.304.877.44l1.134.358c.574.184.99.44 1.237.767s.367.702.367 1.117c0 .343-.072.655-.207.926a2.2 2.2 0 0 1-.583.703c-.248.2-.543.343-.886.447-.36.111-.734.167-1.142.167"/><path fill="#f90" d="M.378 15.475c3.384 1.963 7.56 3.153 11.877 3.153 2.914 0 6.114-.607 9.06-1.852.44-.2.814.287.383.607-2.626 1.94-6.442 2.969-9.722 2.969-4.598 0-8.74-1.7-11.87-4.526-.247-.223-.024-.527.272-.351m23.531-.2c.287.36-.08 2.826-1.485 4.007-.215.184-.423.088-.327-.151l.175-.439c.343-.88.802-2.198.52-2.555-.336-.43-2.22-.207-3.074-.103-.255.032-.295-.192-.063-.36 1.5-1.053 3.967-.75 4.254-.399"/></svg>

frontend/src/assets/Logos/apache-druid.svg

@@ -1,3 +1,3 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#29F1FB" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
+  <path fill="currentColor" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
 </svg>

frontend/src/assets/Logos/apache.svg

@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#D22128" d="M17.805 2.197v.066h.156v.44h.072v-.44h.156v-.066zm.9 0l-.175.353-.172-.353h-.087v.506h.067V2.3l.172.35h.045l.172-.35v.404h.066v-.506zm-4.257 1c-.204.31-.424.66-.66 1.06l-.04.062a44.457 44.457 0 00-1.265 2.29c-.187.36-.38.742-.577 1.146l2.267-.25c.66-.302.955-.578 1.242-.976a15.5 15.5 0 00.23-.342c.23-.363.46-.763.663-1.16.197-.386.37-.767.505-1.11.083-.22.15-.422.198-.6.042-.158.074-.307.1-.45-.884.15-1.965.295-2.668.33zM11.894 7.78l-.077.16c-.078.16-.157.32-.236.488-.086.18-.172.364-.26.552l-.132.287a75.265 75.265 0 00-1.427 3.3c-.163.397-.327.807-.493 1.23-.15.38-.297.765-.45 1.164l-.02.06c-.15.396-.3.802-.453 1.22l-.01.027.72-.08a.213.213 0 01-.042-.006c.863-.106 2.01-.75 2.75-1.547.342-.367.652-.8.94-1.306.213-.377.413-.795.604-1.258.168-.405.328-.843.48-1.318-.196.105-.423.18-.673.235a2.184 2.184 0 01-.273.046c.806-.31 1.314-.905 1.683-1.64a2.816 2.816 0 01-.968.428c-.06.012-.116.022-.174.03l-.043.006h.002c.278-.118.514-.248.718-.403a2.571 2.571 0 00.637-.698l.063-.104.077-.154a8.107 8.107 0 00.367-.85l.03-.088a3.04 3.04 0 00.123-.463.733.733 0 01-.094.065c-.243.145-.66.277-.996.34l.663-.074-.664.073h-.017l-.1.017c.006-.003.01-.006.017-.008l-2.265.25-.013.022zM8.27 16.45c-.117.323-.236.654-.355.992l-.005.015c-.016.046-.032.094-.05.142-.08.227-.15.432-.31.9.264.12.475.435.675.793a1.44 1.44 0 00-.466-.99c1.293.06 2.41-.27 2.99-1.217.05-.084.096-.173.14-.268-.26.333-.59.474-1.2.44 0 0-.004 0-.005.002l.004-.002c.9-.404 1.354-.79 1.754-1.433.094-.153.186-.32.28-.503-.788.81-1.702 1.04-2.664.865l-.72.078a6.43 6.43 0 00-.067.183zM15.42.112c-.376.222-1 .85-1.748 1.763l.686 1.294c.48-.687.97-1.307 1.462-1.836l.058-.062c-.02.02-.04.04-.057.062-.16.176-.644.74-1.375 1.863.703-.035 1.784-.18 2.666-.33.262-1.47-.258-2.142-.258-2.142s-.66-1.07-1.436-.61zm-3.084 6.402a40.253 40.253 0 011.306-2.26l.04-.064c.224-.352.45-.693.677-1.02l-.685-1.293-.157.192c-.197.245-.403.51-.613.79a39.853 39.853 0 00-2.016 2.97l-.022.038.893 1.763c.19-.378.38-.752.575-1.118zm-3.73 8.32c.158-.406.319-.81.483-1.225.156-.394.32-.79.484-1.19a91.133 91.133 0 011.6-3.604l.205-.424c.12-.243.237-.485.36-.724a.125.125 0 01.02-.04l-.895-1.763-.044.07c-.207.34-.414.687-.617 1.042a38.056 38.056 0 00-1.092 2.04l-.094.193a24.573 24.573 0 00-1.258 3.087 18.492 18.492 0 00-.52 1.997l.896 1.77c.117-.317.24-.638.364-.963zm-1.376-.476a13.38 13.38 0 00-.234 1.692c0 .02-.004.04-.005.06-.28-.45-1.03-.888-1.026-.884.537.778.944 1.55 1.005 2.31-.29.058-.684-.027-1.14-.195.475.436.83.556.97.588-.434.03-.89.328-1.346.67.668-.27 1.21-.38 1.596-.29-.61 1.74-1.23 3.655-1.843 5.69a.538.538 0 00.364-.354c.11-.368.84-2.786 1.978-5.965l.097-.27.028-.078c.12-.332.246-.672.374-1.02l.09-.237v-.004L7.24 14.3c-.003.02-.01.04-.012.06z"/>
-</svg>

frontend/src/assets/Logos/auth0.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#EB5424" d="M21.98 7.448 19.62 0H4.347L2.02 7.448c-1.352 4.312.03 9.206 3.815 12.015L12.007 24l6.157-4.552c3.755-2.81 5.182-7.688 3.815-12.015l-6.16 4.58 2.343 7.45-6.157-4.597-6.158 4.58 2.358-7.433-6.188-4.55 7.63-.045L12.008 0l2.356 7.404 7.615.044z"/></svg>

frontend/src/assets/Logos/baseten.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#9CA3AF" height="34" viewBox="0 0 131 34">
-  <path fill="#9CA3AF" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35ZM44.41 14.7c-.5-.5-1.1-.9-1.76-1.18a5.62 5.62 0 0 0-4.6.17c-.73.37-1.32.91-1.75 1.62h-.17V8.59H34.1v16.83h2.04v-1.81h.17c.21.36.47.67.77.94.31.25.65.48 1.01.67.37.18.77.31 1.18.39a6.2 6.2 0 0 0 3.39-.24 5.36 5.36 0 0 0 3.02-3.1c.29-.75.44-1.62.44-2.6v-.47c0-.96-.16-1.83-.47-2.58-.3-.75-.7-1.4-1.23-1.9v-.01Zm-5.87.66a3.9 3.9 0 0 1 4.34.84c.36.35.64.8.83 1.3.2.5.3 1.07.3 1.7v.47c0 .64-.1 1.23-.3 1.74a3.75 3.75 0 0 1-2.06 2.15 4.27 4.27 0 0 1-3.12-.03 3.86 3.86 0 0 1-2.09-2.2c-.2-.52-.3-1.11-.3-1.75v-.29c0-.62.1-1.2.3-1.7v-.01c.21-.53.5-.99.84-1.36.36-.37.78-.66 1.26-.86ZM97.04 8.59H95v4.86h-2.94v1.86H95v8.17c0 .56.17 1.03.53 1.4.37.35.84.54 1.4.54h4.18v-1.87h-3.5c-.2 0-.33-.05-.43-.15-.1-.1-.14-.27-.14-.49v-7.6h4.65v-1.86h-4.65V8.59ZM114.61 15a5.48 5.48 0 0 0-1.8-1.33 5.6 5.6 0 0 0-2.57-.56 6.17 6.17 0 0 0-4.26 1.7 5.6 5.6 0 0 0-1.72 4.2v.57c0 .9.15 1.75.44 2.5a5.58 5.58 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.35 5.35 0 0 0 1.91-2.73l.03-.07-1.94-.52-.02.07c-.11.33-.27.64-.46.94-.17.27-.4.52-.7.74-.28.22-.63.39-1.04.51-.41.13-.9.19-1.46.19a3.8 3.8 0 0 1-2.84-1.05 4.07 4.07 0 0 1-1.1-2.7h9.68v-1.6c0-.54-.11-1.12-.34-1.75a5.04 5.04 0 0 0-1.03-1.74Zm-8.25 3.21a3.8 3.8 0 0 1 1.22-2.25 4.19 4.19 0 0 1 3.99-.7c.44.16.83.38 1.17.66.34.27.62.62.82 1.02.21.38.34.8.38 1.27h-7.58ZM129.09 14.42a4.47 4.47 0 0 0-3.37-1.3c-.93 0-1.73.2-2.4.59-.64.39-1.15.97-1.52 1.74h-.17v-2h-2.04v11.97h2.04v-6.23c0-1.26.32-2.28.95-3.02a3.31 3.31 0 0 1 2.65-1.14c.94 0 1.7.3 2.24.9.56.6.83 1.52.83 2.74v6.75h2.04v-7.13c0-1.71-.42-3.02-1.25-3.87ZM88.1 15a5.48 5.48 0 0 0-1.78-1.33 5.6 5.6 0 0 0-2.58-.56 6.17 6.17 0 0 0-4.27 1.7 5.59 5.59 0 0 0-1.71 4.2v.56c0 .92.14 1.76.44 2.51a5.6 5.6 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.36 5.36 0 0 0 1.91-2.73l.03-.07-1.94-.52-.03.07c-.1.32-.26.64-.45.94-.17.27-.4.52-.7.74-.29.21-.64.39-1.05.51-.4.12-.9.19-1.45.19a3.8 3.8 0 0 1-2.85-1.05 4.07 4.07 0 0 1-1.09-2.7h9.68v-1.61c0-.53-.12-1.12-.34-1.74A5.03 5.03 0 0 0 88.1 15Zm-8.24 3.21a3.83 3.83 0 0 1 1.22-2.25 4.2 4.2 0 0 1 3.99-.7c.44.16.83.38 1.16.66.35.27.62.62.83 1.02.2.38.33.8.37 1.27h-7.57ZM73.65 19.42a6.11 6.11 0 0 0-3.23-1.02 6.63 6.63 0 0 1-2.68-.58c-.47-.3-.7-.7-.7-1.25 0-.27.08-.5.21-.7.14-.2.33-.38.56-.52a4.05 4.05 0 0 1 1.78-.42c.85 0 1.54.21 2.06.63.53.41.83 1 .91 1.73l.01.1 1.95-.47-.01-.07c-.07-.45-.22-.91-.45-1.36a3.46 3.46 0 0 0-.94-1.2 4.6 4.6 0 0 0-1.52-.84 6.05 6.05 0 0 0-2.1-.34c-.58 0-1.13.07-1.65.22-.52.14-1 .36-1.43.65-.41.3-.74.66-.99 1.1a2.9 2.9 0 0 0-.37 1.49v.14c0 1.06.38 1.87 1.14 2.42a6.2 6.2 0 0 0 3.24.97c1.18.08 2.04.26 2.56.54.5.28.75.72.75 1.36 0 .6-.25 1.06-.78 1.4-.52.32-1.22.48-2.1.48a3.68 3.68 0 0 1-2.46-.79 3.13 3.13 0 0 1-1.04-2.14v-.09l-1.93.46h-.02v.07a4.4 4.4 0 0 0 3.1 4c.7.24 1.52.36 2.46.36.7 0 1.35-.09 1.93-.27.6-.16 1.12-.4 1.53-.72A3.38 3.38 0 0 0 74.8 22v-.14c0-1.07-.39-1.9-1.14-2.44ZM60.25 23.4c-.1-.1-.14-.27-.14-.49v-9.46h-2.05v1.85h-.16a3.78 3.78 0 0 0-1.61-1.63 4.62 4.62 0 0 0-2.26-.56c-.77 0-1.5.14-2.19.41a5.27 5.27 0 0 0-3.02 3.12c-.29.75-.44 1.63-.44 2.6v.38c0 .99.15 1.87.44 2.63.3.75.7 1.4 1.2 1.93a5.48 5.48 0 0 0 4.05 1.57c.8 0 1.51-.2 2.2-.58.69-.38 1.24-.97 1.63-1.75h.16v.06c0 .56.18 1.03.53 1.4.37.35.85.54 1.41.54h1.36v-1.87h-.68c-.2 0-.34-.05-.43-.15Zm-4.46.13c-.46.2-.97.3-1.52.3a3.68 3.68 0 0 1-2.75-1.09 4.42 4.42 0 0 1-1.05-3.12v-.38c0-.62.1-1.2.29-1.71a3.65 3.65 0 0 1 5-2.17c.47.2.88.49 1.21.86.35.37.62.83.8 1.36.2.5.3 1.08.3 1.7v.3c0 .63-.1 1.23-.3 1.76-.18.5-.45.96-.78 1.33-.33.37-.73.66-1.2.86Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="34" viewBox="0 0 131 34">
+  <path fill="currentColor" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35ZM44.41 14.7c-.5-.5-1.1-.9-1.76-1.18a5.62 5.62 0 0 0-4.6.17c-.73.37-1.32.91-1.75 1.62h-.17V8.59H34.1v16.83h2.04v-1.81h.17c.21.36.47.67.77.94.31.25.65.48 1.01.67.37.18.77.31 1.18.39a6.2 6.2 0 0 0 3.39-.24 5.36 5.36 0 0 0 3.02-3.1c.29-.75.44-1.62.44-2.6v-.47c0-.96-.16-1.83-.47-2.58-.3-.75-.7-1.4-1.23-1.9v-.01Zm-5.87.66a3.9 3.9 0 0 1 4.34.84c.36.35.64.8.83 1.3.2.5.3 1.07.3 1.7v.47c0 .64-.1 1.23-.3 1.74a3.75 3.75 0 0 1-2.06 2.15 4.27 4.27 0 0 1-3.12-.03 3.86 3.86 0 0 1-2.09-2.2c-.2-.52-.3-1.11-.3-1.75v-.29c0-.62.1-1.2.3-1.7v-.01c.21-.53.5-.99.84-1.36.36-.37.78-.66 1.26-.86ZM97.04 8.59H95v4.86h-2.94v1.86H95v8.17c0 .56.17 1.03.53 1.4.37.35.84.54 1.4.54h4.18v-1.87h-3.5c-.2 0-.33-.05-.43-.15-.1-.1-.14-.27-.14-.49v-7.6h4.65v-1.86h-4.65V8.59ZM114.61 15a5.48 5.48 0 0 0-1.8-1.33 5.6 5.6 0 0 0-2.57-.56 6.17 6.17 0 0 0-4.26 1.7 5.6 5.6 0 0 0-1.72 4.2v.57c0 .9.15 1.75.44 2.5a5.58 5.58 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.35 5.35 0 0 0 1.91-2.73l.03-.07-1.94-.52-.02.07c-.11.33-.27.64-.46.94-.17.27-.4.52-.7.74-.28.22-.63.39-1.04.51-.41.13-.9.19-1.46.19a3.8 3.8 0 0 1-2.84-1.05 4.07 4.07 0 0 1-1.1-2.7h9.68v-1.6c0-.54-.11-1.12-.34-1.75a5.04 5.04 0 0 0-1.03-1.74Zm-8.25 3.21a3.8 3.8 0 0 1 1.22-2.25 4.19 4.19 0 0 1 3.99-.7c.44.16.83.38 1.17.66.34.27.62.62.82 1.02.21.38.34.8.38 1.27h-7.58ZM129.09 14.42a4.47 4.47 0 0 0-3.37-1.3c-.93 0-1.73.2-2.4.59-.64.39-1.15.97-1.52 1.74h-.17v-2h-2.04v11.97h2.04v-6.23c0-1.26.32-2.28.95-3.02a3.31 3.31 0 0 1 2.65-1.14c.94 0 1.7.3 2.24.9.56.6.83 1.52.83 2.74v6.75h2.04v-7.13c0-1.71-.42-3.02-1.25-3.87ZM88.1 15a5.48 5.48 0 0 0-1.78-1.33 5.6 5.6 0 0 0-2.58-.56 6.17 6.17 0 0 0-4.27 1.7 5.59 5.59 0 0 0-1.71 4.2v.56c0 .92.14 1.76.44 2.51a5.6 5.6 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.36 5.36 0 0 0 1.91-2.73l.03-.07-1.94-.52-.03.07c-.1.32-.26.64-.45.94-.17.27-.4.52-.7.74-.29.21-.64.39-1.05.51-.4.12-.9.19-1.45.19a3.8 3.8 0 0 1-2.85-1.05 4.07 4.07 0 0 1-1.09-2.7h9.68v-1.61c0-.53-.12-1.12-.34-1.74A5.03 5.03 0 0 0 88.1 15Zm-8.24 3.21a3.83 3.83 0 0 1 1.22-2.25 4.2 4.2 0 0 1 3.99-.7c.44.16.83.38 1.16.66.35.27.62.62.83 1.02.2.38.33.8.37 1.27h-7.57ZM73.65 19.42a6.11 6.11 0 0 0-3.23-1.02 6.63 6.63 0 0 1-2.68-.58c-.47-.3-.7-.7-.7-1.25 0-.27.08-.5.21-.7.14-.2.33-.38.56-.52a4.05 4.05 0 0 1 1.78-.42c.85 0 1.54.21 2.06.63.53.41.83 1 .91 1.73l.01.1 1.95-.47-.01-.07c-.07-.45-.22-.91-.45-1.36a3.46 3.46 0 0 0-.94-1.2 4.6 4.6 0 0 0-1.52-.84 6.05 6.05 0 0 0-2.1-.34c-.58 0-1.13.07-1.65.22-.52.14-1 .36-1.43.65-.41.3-.74.66-.99 1.1a2.9 2.9 0 0 0-.37 1.49v.14c0 1.06.38 1.87 1.14 2.42a6.2 6.2 0 0 0 3.24.97c1.18.08 2.04.26 2.56.54.5.28.75.72.75 1.36 0 .6-.25 1.06-.78 1.4-.52.32-1.22.48-2.1.48a3.68 3.68 0 0 1-2.46-.79 3.13 3.13 0 0 1-1.04-2.14v-.09l-1.93.46h-.02v.07a4.4 4.4 0 0 0 3.1 4c.7.24 1.52.36 2.46.36.7 0 1.35-.09 1.93-.27.6-.16 1.12-.4 1.53-.72A3.38 3.38 0 0 0 74.8 22v-.14c0-1.07-.39-1.9-1.14-2.44ZM60.25 23.4c-.1-.1-.14-.27-.14-.49v-9.46h-2.05v1.85h-.16a3.78 3.78 0 0 0-1.61-1.63 4.62 4.62 0 0 0-2.26-.56c-.77 0-1.5.14-2.19.41a5.27 5.27 0 0 0-3.02 3.12c-.29.75-.44 1.63-.44 2.6v.38c0 .99.15 1.87.44 2.63.3.75.7 1.4 1.2 1.93a5.48 5.48 0 0 0 4.05 1.57c.8 0 1.51-.2 2.2-.58.69-.38 1.24-.97 1.63-1.75h.16v.06c0 .56.18 1.03.53 1.4.37.35.85.54 1.41.54h1.36v-1.87h-.68c-.2 0-.34-.05-.43-.15Zm-4.46.13c-.46.2-.97.3-1.52.3a3.68 3.68 0 0 1-2.75-1.09 4.42 4.42 0 0 1-1.05-3.12v-.38c0-.62.1-1.2.29-1.71a3.65 3.65 0 0 1 5-2.17c.47.2.88.49 1.21.86.35.37.62.83.8 1.36.2.5.3 1.08.3 1.7v.3c0 .63-.1 1.23-.3 1.76-.18.5-.45.96-.78 1.33-.33.37-.73.66-1.2.86Z"/>
 </svg>

frontend/src/assets/Logos/cohere.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="#355146" fill-rule="evenodd" d="M6.82 11.908c.525 0 1.57-.03 3.013-.639 1.682-.71 5.029-2 7.443-3.323 1.689-.926 2.429-2.151 2.429-3.8 0-2.29-1.81-4.146-4.043-4.146H6.307C3.1 0 .5 2.666.5 5.954s2.434 5.954 6.32 5.954" clip-rule="evenodd"/><path fill="#d18ee2" fill-rule="evenodd" d="M8.402 16.01c0-1.611.947-3.064 2.399-3.682l2.946-1.254c2.98-1.268 6.26.977 6.26 4.286 0 2.563-2.027 4.64-4.527 4.64l-3.19-.002c-2.147 0-3.888-1.785-3.888-3.987" clip-rule="evenodd"/><path fill="#ff7759" d="M3.848 12.691C1.998 12.691.5 14.228.5 16.124v.444C.5 18.464 1.999 20 3.848 20s3.347-1.536 3.347-3.432v-.444c0-1.896-1.499-3.433-3.347-3.433"/></svg>

frontend/src/assets/Logos/dbos.svg

@@ -1,9 +1,9 @@
 <svg width="109" height="24" viewBox="0 0 109 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_125_22125)">
-<path d="M0 -2.08616e-07V24H17.9352C22.9911 24 26.0999 21.0858 26.0999 17.04V6.96C26.0999 2.91432 22.9911 -2.08616e-07 17.9352 -2.08616e-07H0ZM6.76413 5.82864H19.1992V18.1714H6.76413V5.82864Z" fill="#9CA3AF"/>
-<path d="M46.7659 18.6172H35.0824V14.16H46.7659V18.6172ZM46.595 5.38296V9.5658H35.0824V5.38296H46.595ZM50.2846 12.1373V11.5886C52.5734 10.5258 53.7008 8.8458 53.7008 6.13728C53.7008 2.64012 50.9337 0.000116183 45.5361 0.000116183H28.3184V24H45.7752C51.1728 24 53.9399 21.8401 53.9399 18.0685C53.9399 15.0172 52.6418 13.2001 50.2846 12.1373Z" fill="#9CA3AF"/>
-<path d="M62.397 18.1714H74.8319V5.82864H62.397V18.1714ZM63.6609 24C58.6049 24 55.4961 21.0858 55.4961 17.04V6.96012C55.4961 2.91432 58.6049 0.000116183 63.6609 0.000116183H73.568C78.6238 0.000116183 81.7326 2.91432 81.7326 6.96012V17.04C81.7326 21.0858 78.6238 24 73.568 24H63.6609Z" fill="#9CA3AF"/>
-<path d="M101.66 15.12L90.8995 14.3658C85.5361 13.9886 83.418 11.1772 83.418 7.47432V6.96012C83.418 2.91432 86.5266 0.000116183 91.5827 0.000116183H100.157C105.214 0.000116183 108.323 2.91432 108.323 6.96012V7.98864H101.968V5.14284H90.2504V8.43432L100.601 9.18864C105.999 9.56568 108.493 12.8572 108.493 16.5257V17.04C108.493 20.7428 105.384 24 100.328 24H91.5827C86.5266 24 83.418 20.7428 83.418 17.04V16.0115H89.7722V18.8572H101.66V15.12Z" fill="#9CA3AF"/>
+<path d="M0 -2.08616e-07V24H17.9352C22.9911 24 26.0999 21.0858 26.0999 17.04V6.96C26.0999 2.91432 22.9911 -2.08616e-07 17.9352 -2.08616e-07H0ZM6.76413 5.82864H19.1992V18.1714H6.76413V5.82864Z" fill="currentColor"/>
+<path d="M46.7659 18.6172H35.0824V14.16H46.7659V18.6172ZM46.595 5.38296V9.5658H35.0824V5.38296H46.595ZM50.2846 12.1373V11.5886C52.5734 10.5258 53.7008 8.8458 53.7008 6.13728C53.7008 2.64012 50.9337 0.000116183 45.5361 0.000116183H28.3184V24H45.7752C51.1728 24 53.9399 21.8401 53.9399 18.0685C53.9399 15.0172 52.6418 13.2001 50.2846 12.1373Z" fill="currentColor"/>
+<path d="M62.397 18.1714H74.8319V5.82864H62.397V18.1714ZM63.6609 24C58.6049 24 55.4961 21.0858 55.4961 17.04V6.96012C55.4961 2.91432 58.6049 0.000116183 63.6609 0.000116183H73.568C78.6238 0.000116183 81.7326 2.91432 81.7326 6.96012V17.04C81.7326 21.0858 78.6238 24 73.568 24H63.6609Z" fill="currentColor"/>
+<path d="M101.66 15.12L90.8995 14.3658C85.5361 13.9886 83.418 11.1772 83.418 7.47432V6.96012C83.418 2.91432 86.5266 0.000116183 91.5827 0.000116183H100.157C105.214 0.000116183 108.323 2.91432 108.323 6.96012V7.98864H101.968V5.14284H90.2504V8.43432L100.601 9.18864C105.999 9.56568 108.493 12.8572 108.493 16.5257V17.04C108.493 20.7428 105.384 24 100.328 24H91.5827C86.5266 24 83.418 20.7428 83.418 17.04V16.0115H89.7722V18.8572H101.66V15.12Z" fill="currentColor"/>
 </g>
 <defs>
 <clipPath id="clip0_125_22125">

frontend/src/assets/Logos/dspy.svg

@@ -1,9 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <g fill="none" stroke="#EF4136" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
-    <rect x="2.2" y="2.2" width="19.6" height="19.6" rx="0.6"/>
-    <path d="M12 2.2V4.7a1.75 1.75 0 1 0 0 3.5V12"/>
-    <path d="M12 12v2.5a1.75 1.75 0 1 1 0 3.5v3.8"/>
-    <path d="M2.2 12h2.5a1.75 1.75 0 1 0 3.5 0H12"/>
-    <path d="M12 12h2.8a1.75 1.75 0 1 1 3.5 0h3.5"/>
-  </g>
-</svg>

frontend/src/assets/Logos/elasticsearch.svg

@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#00BFB3" d="M13.394 0C8.683 0 4.609 2.716 2.644 6.667h15.641a4.77 4.77 0 0 0 3.073-1.11c.446-.375.864-.785 1.247-1.243l.001-.002A11.974 11.974 0 0 0 13.394 0zM1.804 8.889a12.009 12.009 0 0 0 0 6.222h14.7a3.111 3.111 0 1 0 0-6.222zm.84 8.444C4.61 21.283 8.684 24 13.395 24c3.701 0 7.011-1.677 9.212-4.312l-.001-.002a9.958 9.958 0 0 0-1.247-1.243 4.77 4.77 0 0 0-3.073-1.11z"/>
-</svg>

frontend/src/assets/Logos/groq.svg

@@ -1 +1 @@
-<svg fill="#F55036" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>
+<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Groq</title><path d="M12.036 2c-3.853-.035-7 3-7.036 6.781-.035 3.782 3.055 6.872 6.908 6.907h2.42v-2.566h-2.292c-2.407.028-4.38-1.866-4.408-4.23-.029-2.362 1.901-4.298 4.308-4.326h.1c2.407 0 4.358 1.915 4.365 4.278v6.305c0 2.342-1.944 4.25-4.323 4.279a4.375 4.375 0 01-3.033-1.252l-1.851 1.818A7 7 0 0012.029 22h.092c3.803-.056 6.858-3.083 6.879-6.816v-6.5C18.907 4.963 15.817 2 12.036 2z"></path></svg>

frontend/src/assets/Logos/haproxy.svg

@@ -1,74 +0,0 @@
-<svg role="img" viewBox="0 0 102.04 102.04" xmlns="http://www.w3.org/2000/svg">
-  <rect x="45.34" y="23.92" width=".41" height="15.95" transform="translate(-9.7 38.24) rotate(-41.55)" fill="#106DA9"/>
-  <rect x="32.04" y="45.06" width="11.92" height="11.92" transform="translate(-13.28 88.67) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="45.04" y="32.06" width="11.92" height="11.92" transform="translate(12.63 88.76) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="45.04" y="58.06" width="11.92" height="11.92" transform="translate(-13.37 114.58) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="58.04" y="45.06" width="11.92" height="11.92" transform="translate(12.54 114.67) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="57.03" y="22.05" width="7.94" height="7.94" transform="translate(34.56 86.84) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="36.03" y="22.05" width="7.94" height="7.94" transform="translate(13.7 65.84) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="22.03" y="37.05" width="7.94" height="7.94" transform="translate(-15.2 66.73) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="22.03" y="58.05" width="7.94" height="7.94" transform="translate(-36.2 87.59) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="72.03" y="58.05" width="7.94" height="7.94" transform="translate(13.45 137.58) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="72.03" y="37.05" width="7.94" height="7.94" transform="translate(34.45 116.73) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="15.02" y="26.04" width="5.96" height="5.96" transform="translate(-11.15 46.82) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="25.02" y="14.04" width="5.96" height="5.96" transform="translate(10.79 44.9) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="40.02" y="9.04" width="5.96" height="5.96" transform="translate(30.68 54.94) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="11.02" y="41.04" width="5.96" height="5.96" transform="translate(-30.12 57.71) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="81.98" y="26" width="5.04" height="5.04" transform="translate(-.2 .59) rotate(-.4)" fill="#106DA9"/>
-  <rect x="70.98" y="15" width="5.04" height="5.04" transform="translate(-.12 .51) rotate(-.4)" fill="#106DA9"/>
-  <rect x="55.98" y="9" width="5.04" height="5.04" transform="translate(-.08 .41) rotate(-.4)" fill="#106DA9"/>
-  <rect x="84.98" y="41" width="5.04" height="5.03" transform="translate(-.3 .6) rotate(-.4)" fill="#106DA9"/>
-  <rect x="36.03" y="72.05" width="7.94" height="7.94" transform="translate(-36.3 115.49) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="57.03" y="72.05" width="7.94" height="7.94" transform="translate(-15.44 136.49) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="81.02" y="70.04" width="5.96" height="5.96" transform="translate(10.39 156.51) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="70.02" y="82.04" width="5.96" height="5.96" transform="translate(-12.52 157.43) rotate(-89.6)" fill="#106DA9"/>
-  <rect x="56.02" y="87.04" width="5.96" height="5.96" transform="translate(-31.44 148.37) rotate(-89.59)" fill="#106DA9"/>
-  <rect x="84.02" y="55.04" width="5.96" height="5.96" transform="translate(28.35 144.6) rotate(-89.59)" fill="#106DA9"/>
-  <rect x="14.98" y="71" width="5.04" height="5.04" transform="translate(-.51 .12) rotate(-.4)" fill="#106DA9"/>
-  <rect x="25.98" y="82" width="5.03" height="5.04" transform="translate(-.61 .21) rotate(-.41)" fill="#106DA9"/>
-  <rect x="40.98" y="87" width="5.04" height="5.04" transform="translate(-.62 .3) rotate(-.4)" fill="#106DA9"/>
-  <rect x="11.98" y="55" width="5.04" height="5.04" transform="translate(-.4 .1) rotate(-.4)" fill="#106DA9"/>
-  <rect x="18.01" y="12.03" width="2.98" height="2.98" transform="translate(5.85 32.93) rotate(-89.61)" fill="#106DA9"/>
-  <rect x=".01" y="45.03" width="2.98" height="2.98" transform="translate(-45.03 47.71) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="2.01" y="35.03" width="2.98" height="2.98" transform="translate(-33.04 39.77) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="35.01" y="2.03" width="2.98" height="2.98" transform="translate(32.73 40) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="6.01" y="26.03" width="2.98" height="2.98" transform="translate(-20.07 34.83) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="11.01" y="18.03" width="2.98" height="2.98" transform="translate(-7.11 31.89) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="25.99" y="6.01" width="3.02" height="3.02" transform="translate(-.05 .19) rotate(-.39)" fill="#106DA9"/>
-  <rect x="44.01" y=".03" width="2.98" height="2.98" transform="translate(0 .31) rotate(-.39)" fill="#106DA9"/>
-  <rect x="93.01" y="26.03" width="2.98" height="2.98" transform="translate(66.34 121.83) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="97.01" y="35.03" width="2.98" height="2.98" transform="translate(61.31 134.77) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="88.01" y="18.03" width="2.98" height="2.98" transform="translate(69.37 108.89) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="98.01" y="45.03" width="2.98" height="2.98" transform="translate(52.3 145.7) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="53.99" y=".01" width="3.02" height="3.02" transform="translate(53.6 57.01) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="64.01" y="2.03" width="2.98" height="2.98" transform="translate(61.53 69) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="18.01" y="12.03" width="2.98" height="2.98" transform="translate(5.85 32.93) rotate(-89.61)" fill="#106DA9"/>
-  <rect x=".01" y="45.03" width="2.98" height="2.98" transform="translate(-45.03 47.71) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="81.01" y="12.03" width="2.98" height="2.98" transform="translate(68.42 95.93) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="2.01" y="35.03" width="2.98" height="2.98" transform="translate(-33.04 39.77) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="35.01" y="2.03" width="2.98" height="2.98" transform="translate(32.73 40) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="6.01" y="26.03" width="2.98" height="2.98" transform="translate(-20.07 34.83) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="11.01" y="18.03" width="2.98" height="2.98" transform="translate(-7.11 31.89) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="25.99" y="6.01" width="3.02" height="3.02" transform="translate(-.05 .19) rotate(-.39)" fill="#106DA9"/>
-  <rect x="44.01" y=".03" width="2.98" height="2.98" transform="translate(0 .31) rotate(-.39)" fill="#106DA9"/>
-  <rect x="73.01" y="6.03" width="2.98" height="2.98" transform="translate(66.47 81.97) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="98.01" y="45.03" width="2.98" height="2.98" transform="translate(52.3 145.7) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="53.99" y=".01" width="3.02" height="3.02" transform="translate(53.6 57.01) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="64.01" y="2.03" width="2.98" height="2.98" transform="translate(61.53 69) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="81.01" y="88.03" width="2.98" height="2.98" transform="translate(-7.58 171.41) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="98.01" y="54.03" width="2.98" height="2.98" transform="translate(43.31 154.64) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="18.01" y="88.03" width="2.98" height="2.98" transform="translate(-70.15 108.42) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="97.01" y="64.03" width="2.98" height="2.98" transform="translate(32.32 163.58) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="64.01" y="97.04" width="2.97" height="2.97" transform="translate(-33.67 163.03) rotate(-89.43)" fill="#106DA9"/>
-  <rect x="93.01" y="73.03" width="2.98" height="2.98" transform="translate(19.31 168.49) rotate(-89.59)" fill="#106DA9"/>
-  <rect x="88.01" y="81.03" width="2.98" height="2.98" transform="translate(6.37 171.45) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="72.99" y="93.01" width="3.02" height="3.02" transform="translate(-.65 .51) rotate(-.39)" fill="#106DA9"/>
-  <rect x="53.99" y="99.01" width="3.02" height="3.02" transform="translate(-.68 .38) rotate(-.39)" fill="#106DA9"/>
-  <rect x="26.01" y="93.03" width="2.98" height="2.98" transform="translate(-67.21 121.37) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="6.01" y="73.03" width="2.98" height="2.98" transform="translate(-67.07 81.51) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="2.01" y="64.03" width="2.98" height="2.98" transform="translate(-62.04 68.57) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="11.01" y="81.03" width="2.98" height="2.98" transform="translate(-70.1 94.46) rotate(-89.61)" fill="#106DA9"/>
-  <rect x=".01" y="54.03" width="2.98" height="2.98" transform="translate(-54.03 56.65) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="45.01" y="99.03" width="2.98" height="2.98" transform="translate(-54.33 146.34) rotate(-89.61)" fill="#106DA9"/>
-  <rect x="35.01" y="97.03" width="2.98" height="2.98" transform="translate(-62.27 134.34) rotate(-89.61)" fill="#106DA9"/>
-</svg>

frontend/src/assets/Logos/hcp-vault.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFEC6E" d="m0 0 11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z"/></svg>

frontend/src/assets/Logos/langflow.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#9CA3AF" d="M9.755 1.52h-.001c-.31 0-.608.124-.828.343L4.037 6.752a1.17 1.17 0 0 1-.827.343H1.17A1.17 1.17 0 0 0 0 8.295l.052 1.984a1.17 1.17 0 0 0 1.17 1.14h2.37c.31 0 .607-.124.827-.344l4.93-4.93c.22-.22.517-.343.827-.343h2.874a1.17 1.17 0 0 0 1.17-1.17V2.69a1.17 1.17 0 0 0-1.17-1.17zm9.78 2.503c-.31 0-.608.123-.828.343l-4.889 4.889a1.17 1.17 0 0 1-.827.342h-2.756c-.31 0-.608.124-.827.344L4.15 15.197a1.17 1.17 0 0 1-.827.343H1.32a1.17 1.17 0 0 0-1.17 1.17v1.996c0 .646.524 1.17 1.17 1.17h2.017c.302 0 .592-.116.81-.325l5.535-5.304a1.17 1.17 0 0 1 .81-.326h2.88c.31 0 .607-.123.827-.342l4.93-4.93c.22-.22.517-.344.827-.344h2.873A1.17 1.17 0 0 0 24 7.135V5.193a1.17 1.17 0 0 0-1.17-1.17h-3.294zm0 8.559c-.31 0-.608.123-.828.343l-4.889 4.889a1.17 1.17 0 0 1-.827.343h-2.04a1.17 1.17 0 0 0-1.17 1.2l.052 1.984a1.17 1.17 0 0 0 1.17 1.14h2.37c.31 0 .607-.124.827-.343l4.93-4.93c.22-.22.517-.343.827-.343h2.873a1.17 1.17 0 0 0 1.17-1.17v-1.943a1.17 1.17 0 0 0-1.17-1.17h-3.294Z"/></svg>

frontend/src/assets/Logos/open-webui.svg

@@ -1,5 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <rect x="2.34" y="2.34" width="19.27" height="19.27" rx="4.69" fill="#fff"/>
-  <circle cx="10.41" cy="11.95" r="2.77" fill="none" stroke="#000" stroke-width="1.36"/>
-  <rect x="15" y="8.53" width="1.36" height="6.94" fill="#000"/>
-</svg>

frontend/src/assets/Logos/planetscale.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#9CA3AF" viewBox="0 0 24 24"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a12 12 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.96 11.96 0 0 1 0 12m12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><title>PlanetScale</title><path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a12 12 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.96 11.96 0 0 1 0 12m12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24"/></svg>

frontend/src/assets/Logos/rabbitmq.svg

@@ -1,3 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#FF6600" d="M23.035 9.601h-7.677a.956.956 0 01-.962-.962V.962a.956.956 0 00-.962-.956H10.56a.956.956 0 00-.962.956V8.64a.956.956 0 01-.962.962H5.762a.956.956 0 01-.961-.962V.962A.956.956 0 003.839 0H.959a.956.956 0 00-.956.962v22.076A.956.956 0 00.965 24h22.07a.956.956 0 00.962-.962V10.58a.956.956 0 00-.962-.98zm-3.86 8.152a1.437 1.437 0 01-1.437 1.443h-1.924a1.437 1.437 0 01-1.436-1.443v-1.917a1.437 1.437 0 011.436-1.443h1.924a1.437 1.437 0 011.437 1.443z"/>
-</svg>

frontend/src/assets/Logos/railway.svg

@@ -1,3 +1,3 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#9CA3AF" d="M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z"/>
+  <path fill="currentColor" d="M.113 10.27A13.026 13.026 0 000 11.48h18.23c-.064-.125-.15-.237-.235-.347-3.117-4.027-4.793-3.677-7.19-3.78-.8-.034-1.34-.048-4.524-.048-1.704 0-3.555.005-5.358.01-.234.63-.459 1.24-.567 1.737h9.342v1.216H.113v.002zm18.26 2.426H.009c.02.326.05.645.094.961h16.955c.754 0 1.179-.429 1.315-.96zm-17.318 4.28s2.81 6.902 10.93 7.024c4.855 0 9.027-2.883 10.92-7.024H1.056zM11.988 0C7.5 0 3.593 2.466 1.531 6.108l4.75-.005v-.002c3.71 0 3.849.016 4.573.047l.448.016c1.563.052 3.485.22 4.996 1.364.82.621 2.007 1.99 2.712 2.965.654.902.842 1.94.396 2.934-.408.914-1.289 1.458-2.353 1.458H.391s.099.42.249.886h22.748A12.026 12.026 0 0024 12.005C24 5.377 18.621 0 11.988 0z"/>
 </svg>

frontend/src/assets/Logos/scala.svg

@@ -1,13 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 270">
-<path d="M30.36,109.14v.48h0A3.73,3.73,0,0,1,30.36,109.14Z" fill="#de3423" fill-rule="evenodd"/>
+<path d="M30.36,109.14v.48h0A3.73,3.73,0,0,1,30.36,109.14Z" fill="currentColor" fill-rule="evenodd"/>
 <path d="M138.66,28.78C107.2,37.87,57.29,43,30.4,43h0V94.35a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.4a129,129,0,0,0,17.49-5.81c4.18-1.88,6.88-3.86,6.88-5.92V15.91C164.1,20.79,151.39,25.11,138.66,28.78Z" fill="#de3423" fill-rule="evenodd"/>
 <path d="M138.66,95.37c-18.83,5.43-44.24,9.47-67.39,11.83-15.54,1.59-30.06,2.42-40.87,2.42h0v51.31a.8.8,0,0,0,.19.48c18.35,0,75-6,109.18-15.39a130.38,130.38,0,0,0,17.49-5.81c4.18-1.89,6.88-3.86,6.88-5.92V82.5C164.1,87.37,151.39,91.69,138.66,95.37Z" fill="#de3423" fill-rule="evenodd"/>
 <path d="M138.66,162c-18.83,5.43-44.24,9.46-67.39,11.83-15.56,1.59-30.1,2.42-40.91,2.42V228c18.16,0,75.1-5.95,109.37-15.39,12.63-3.48,24.37-7.44,24.37-11.74V149.08C164.1,154,151.39,158.28,138.66,162Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M30.55,94.83C32.4,97.38,48,102.19,71.27,107.2c23.27,4.46,47.47,22.07,66.29,16.64,12.73-3.68,26.54-36.47,26.54-41.34V82c0-3.4-2.55-6.13-6.88-8.4-17.75-9.07-21.11-12.41-27.69-10.6C95.37,72.43,35.06,67.61,30.55,94.83Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M30.55,161.41C32.4,164,48,168.77,71.27,173.79c26,4.74,48.61,20.19,67.44,14.75,12.73-3.68,25.39-34.58,25.39-39.46v-.48c0-3.39-2.55-6.13-6.88-8.39-13.54-7.2-31.43-15.13-38-13.32C85,136.3,39.26,138.37,30.55,161.41Z" fill="#de3423" fill-rule="evenodd"/>
-<path d="M200.7,142.39c6,11.79,15.6,17.6,29.05,17.6,14.44,0,19.59-7.64,19.59-15.11,0-5.15-1.83-8.63-6.64-11.79-4.82-3.32-8.3-4.81-16.93-8-10.63-4-16.77-7-23.41-12.29-6.64-5.48-9.79-13-9.79-22.74a28.28,28.28,0,0,1,10.29-22.58c7-5.81,15.44-8.63,25.56-8.63,15.77,0,27.72,6.31,35.69,18.76L249.34,87.78c-4.48-6.81-11.29-10.3-20.59-10.3-9.13,0-15.77,5.15-15.77,12.29,0,4.81,2,7.14,4.82,10,1.82,1.33,6.47,3.32,8.63,4.48l6,2.32,6.8,2.66c11,4.48,18.76,9.3,23.57,14.44s7.31,12.12,7.31,20.75c0,20.42-14.11,34.2-40.51,34.2-21.41,0-37.18-10-44.48-26.4Z" fill="#de3423"/>
-<path d="M354.25,104.71,342,117.49a28.14,28.14,0,0,0-21.24-9.13,25,25,0,0,0-18.43,7.47,27.76,27.76,0,0,0,0,37.52,25,25,0,0,0,18.43,7.47A28.14,28.14,0,0,0,342,151.69l12.29,12.78c-9,9.63-20.09,14.44-33.53,14.44-12.79,0-23.58-4.15-32.37-12.62s-13.12-19.09-13.12-31.7,4.32-23.08,13.12-31.54,19.58-12.78,32.37-12.78C334.16,90.27,345.28,95.08,354.25,104.71Z" fill="#de3423"/>
-<path d="M393.88,125.62C408,124.3,413,122.47,413,116c0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a14.06,14.06,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C357.7,136.41,369.15,127.78,393.88,125.62ZM391.56,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.75,9.75,0,0,1-4.14,2.49c-3.82,1.33-6.31,1.66-14.28,2.49-11.62,1.33-17.43,5-17.43,10.79C377.12,158.33,382.43,162,391.56,162Z" fill="#de3423"/>
-<path d="M444.84,60.88h19.92V149.2c0,8.13,2.66,11.62,10,11.62a21.15,21.15,0,0,0,6-.67v17.76a35.56,35.56,0,0,1-9.47,1c-17.59,0-26.39-9-26.39-27.06Z" fill="#de3423"/>
-<path d="M521.71,125.62c14.11-1.32,19.09-3.15,19.09-9.62,0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a13.94,13.94,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C485.53,136.41,497,127.78,521.71,125.62ZM519.39,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.73,9.73,0,0,1-4.15,2.49c-3.81,1.33-6.3,1.66-14.27,2.49-11.62,1.33-17.43,5-17.43,10.79C505,158.33,510.26,162,519.39,162Z" fill="#de3423"/>
+<path d="M30.55,94.83C32.4,97.38,48,102.19,71.27,107.2c23.27,4.46,47.47,22.07,66.29,16.64,12.73-3.68,26.54-36.47,26.54-41.34V82c0-3.4-2.55-6.13-6.88-8.4-17.75-9.07-21.11-12.41-27.69-10.6C95.37,72.43,35.06,67.61,30.55,94.83Z" fill="currentColor" fill-rule="evenodd"/>
+<path d="M30.55,161.41C32.4,164,48,168.77,71.27,173.79c26,4.74,48.61,20.19,67.44,14.75,12.73-3.68,25.39-34.58,25.39-39.46v-.48c0-3.39-2.55-6.13-6.88-8.39-13.54-7.2-31.43-15.13-38-13.32C85,136.3,39.26,138.37,30.55,161.41Z" fill="currentColor" fill-rule="evenodd"/>
+<path d="M200.7,142.39c6,11.79,15.6,17.6,29.05,17.6,14.44,0,19.59-7.64,19.59-15.11,0-5.15-1.83-8.63-6.64-11.79-4.82-3.32-8.3-4.81-16.93-8-10.63-4-16.77-7-23.41-12.29-6.64-5.48-9.79-13-9.79-22.74a28.28,28.28,0,0,1,10.29-22.58c7-5.81,15.44-8.63,25.56-8.63,15.77,0,27.72,6.31,35.69,18.76L249.34,87.78c-4.48-6.81-11.29-10.3-20.59-10.3-9.13,0-15.77,5.15-15.77,12.29,0,4.81,2,7.14,4.82,10,1.82,1.33,6.47,3.32,8.63,4.48l6,2.32,6.8,2.66c11,4.48,18.76,9.3,23.57,14.44s7.31,12.12,7.31,20.75c0,20.42-14.11,34.2-40.51,34.2-21.41,0-37.18-10-44.48-26.4Z" fill="currentColor"/>
+<path d="M354.25,104.71,342,117.49a28.14,28.14,0,0,0-21.24-9.13,25,25,0,0,0-18.43,7.47,27.76,27.76,0,0,0,0,37.52,25,25,0,0,0,18.43,7.47A28.14,28.14,0,0,0,342,151.69l12.29,12.78c-9,9.63-20.09,14.44-33.53,14.44-12.79,0-23.58-4.15-32.37-12.62s-13.12-19.09-13.12-31.7,4.32-23.08,13.12-31.54,19.58-12.78,32.37-12.78C334.16,90.27,345.28,95.08,354.25,104.71Z" fill="currentColor"/>
+<path d="M393.88,125.62C408,124.3,413,122.47,413,116c0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a14.06,14.06,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C357.7,136.41,369.15,127.78,393.88,125.62ZM391.56,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.75,9.75,0,0,1-4.14,2.49c-3.82,1.33-6.31,1.66-14.28,2.49-11.62,1.33-17.43,5-17.43,10.79C377.12,158.33,382.43,162,391.56,162Z" fill="currentColor"/>
+<path d="M444.84,60.88h19.92V149.2c0,8.13,2.66,11.62,10,11.62a21.15,21.15,0,0,0,6-.67v17.76a35.56,35.56,0,0,1-9.47,1c-17.59,0-26.39-9-26.39-27.06Z" fill="currentColor"/>
+<path d="M521.71,125.62c14.11-1.32,19.09-3.15,19.09-9.62,0-5.15-4.64-9.13-13.94-9.13q-13.44,0-22.41,10.95l-12.28-10.46c8.13-11.45,19.58-17.09,34.36-17.09,20.75,0,33.7,10,33.7,27.05v37c0,5.81,2.15,6.48,7,6.48h.5v15.43c-2,1.17-5.15,1.83-9.3,1.83-4.48,0-8-1.33-10.62-4a13.94,13.94,0,0,1-3-5.48c-5.81,6.8-15.27,10.29-28.39,10.29-18.42,0-30.87-10.13-30.87-25.4C485.53,136.41,497,127.78,521.71,125.62ZM519.39,162c13.28,0,21.41-6,21.41-16.6v-9.3a9.73,9.73,0,0,1-4.15,2.49c-3.81,1.33-6.3,1.66-14.27,2.49-11.62,1.33-17.43,5-17.43,10.79C505,158.33,510.26,162,519.39,162Z" fill="currentColor"/>
 </svg>

frontend/src/constants/events.ts

@@ -1,3 +1,9 @@
+import logEvent from 'api/common/logEvent';
+import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
+import { getNavigationReferrer } from 'lib/navigation';
+import { extractQueryPairs } from 'utils/queryContextUtils';
+import { isCustomTimeRange } from 'store/globalTime';
+
 export enum Events {
 	UPDATE_GRAPH_VISIBILITY_STATE = 'UPDATE_GRAPH_VISIBILITY_STATE',
 	UPDATE_GRAPH_MANAGER_TABLE = 'UPDATE_GRAPH_MANAGER_TABLE',
@@ -39,3 +45,155 @@ export enum InfraMonitoringEvents {
 	StatefulSet = 'statefulSet',
 	Volumes = 'volumes',
 }
+
+export function logInfraFilterCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	source: 'quick_filter' | 'search' | 'host_status_toggle',
+	expression: string,
+	extraKeys?: string[],
+): void {
+	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
+		(pair) => pair.key,
+	);
+
+	if (extraKeys) {
+		extraKeys.forEach((key) => expressionKeys.push(key));
+	}
+
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_filter_customized', {
+		entity_type: entityType,
+		source,
+		expression_keys: [...new Set(expressionKeys)],
+	});
+}
+
+export function logInfraMonitoringListViewedEvent(
+	entity: InfraMonitoringEntity,
+): void {
+	const referrer = getNavigationReferrer();
+
+	void logEvent('infra_list_viewed', {
+		entity,
+		referrer,
+	});
+}
+
+export function logInfraTimeRangeCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	rangeLabel: string,
+): void {
+	void logEvent('infra_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	});
+}
+
+export function logInfraColumnCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	columnsList: string[],
+	fontSize: string,
+	maxLinesPerRow: number,
+	source: 'list' | 'expanded',
+): void {
+	void logEvent('infra_column_customized', {
+		entity_type: entityType,
+		columns_list: columnsList,
+		font_size: fontSize,
+		max_lines_per_row: maxLinesPerRow,
+		source,
+	});
+}
+
+export function logInfraColumnSortedEvent(
+	entityType: InfraMonitoringEntity,
+	columnKey: string,
+	direction: 'asc' | 'desc',
+	source: 'list' | 'expanded',
+): void {
+	void logEvent('infra_column_sorted', {
+		entity_type: entityType,
+		column_key: columnKey,
+		direction,
+		source,
+	});
+}
+
+export function logInfraDrawerTimeRangeCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	rangeLabel: string,
+): void {
+	void logEvent('infra_drawer_time_range_customized', {
+		entity_type: entityType,
+		range_label: isCustomTimeRange(rangeLabel) ? 'custom' : rangeLabel,
+	});
+}
+
+export function logInfraDrawerFilterCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	tab: 'metrics' | 'logs' | 'traces' | 'events' | 'pod_metrics',
+	expression: string,
+	filterSource: 'search' | 'logs',
+): void {
+	const expressionKeys = extractQueryPairs(expression?.trim() || '').map(
+		(pair) => pair.key,
+	);
+
+	if (expressionKeys.length === 0) {
+		return;
+	}
+
+	void logEvent('infra_drawer_filter_customized', {
+		entity_type: entityType,
+		tab,
+		expression_keys: [...new Set(expressionKeys)],
+		filter_source: filterSource,
+	});
+}
+
+export function logInfraGroupByCustomizedEvent(
+	entityType: InfraMonitoringEntity,
+	groupByKeysList: string[],
+): void {
+	void logEvent('infra_group_by_customized', {
+		entity_type: entityType,
+		group_by_keys_list: groupByKeysList,
+	});
+}
+
+export function logInfraDrawerTabViewedEvent(
+	entityType: InfraMonitoringEntity,
+	tab: string,
+	isDefaultTab: boolean,
+): void {
+	void logEvent('infra_drawer_tab_viewed', {
+		entity_type: entityType,
+		tab,
+		is_default_tab: isDefaultTab,
+	});
+}
+
+export function logInfraExplorerNavigatedEvent(params: {
+	entityType: InfraMonitoringEntity;
+	destination:
+		| 'metrics_explorer'
+		| 'logs_explorer'
+		| 'traces_explorer'
+		| 'k8s_list';
+	source: 'chart_compass_icon' | 'tab_cta_button' | 'stats_card';
+	tab: string;
+	sourceKey: string | null;
+	drawerDurationMsAtNavigation: number | null;
+}): void {
+	void logEvent('infra_explorer_navigated', {
+		entity_type: params.entityType,
+		destination: params.destination,
+		source: params.source,
+		tab: params.tab,
+		source_key: params.sourceKey,
+		drawer_duration_ms_at_navigation: params.drawerDurationMsAtNavigation,
+	});
+}

frontend/src/constants/features.ts

@@ -9,6 +9,8 @@ export enum FeatureKeys {
 	ANOMALY_DETECTION = 'anomaly_detection',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
 	USE_JSON_BODY = 'use_json_body',
+	USE_FINE_GRAINED_AUTHZ = 'use_fine_grained_authz',
+	USE_INFRA_MONITORING_V2 = 'use_infra_monitoring_v2',
 	ENABLE_AI_OBSERVABILITY = 'enable_ai_observability',
 	ENABLE_METRICS_REDUCTION = 'enable_metrics_reduction',
 }

frontend/src/constants/generated/semconvFamilies.gen.ts

@@ -1,32 +0,0 @@
-// Code generated by scripts/semconv. DO NOT EDIT.
-
-export type SemconvFamily = {
-	readonly current: string;
-	readonly old: readonly string[];
-	readonly kind: 'attribute' | 'metric';
-	readonly contexts: readonly string[];
-	readonly signals: readonly string[];
-	readonly applyToMetrics: readonly string[];
-	readonly valueMap: Readonly<Record<string, string>>;
-};
-
-export const SEMCONV_FAMILIES: readonly SemconvFamily[] = [
-	{
-		current: 'db.system.name',
-		old: ['db.system'],
-		kind: 'attribute',
-		contexts: [],
-		signals: [],
-		applyToMetrics: [],
-		valueMap: {},
-	},
-	{
-		current: 'deployment.environment.name',
-		old: ['deployment.environment'],
-		kind: 'attribute',
-		contexts: [],
-		signals: [],
-		applyToMetrics: [],
-		valueMap: {},
-	},
-] as const;

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -29,6 +29,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.LOGS_EXPLORER}?${relatedLogsLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-logs"
 				>
 					<div className="icon">
 						<LogsIcon />
@@ -40,6 +41,7 @@ function PopoverContent({
 				<Link
 					to={`${ROUTES.TRACES_EXPLORER}?${relatedTracesLink}`}
 					className="contributor-row-popover-buttons__button"
+					data-testid="alert-popover-view-traces"
 				>
 					<div className="icon">
 						<DraftingCompass

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -26,7 +26,10 @@ function ChangePercentage({
 }: ChangePercentageProps): JSX.Element {
 	if (direction > 0) {
 		return (
-			<div className="change-percentage change-percentage--success">
+			<div
+				className="change-percentage change-percentage--success"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowDownLeft size={14} color={Color.BG_FOREST_500} />
 				</div>
@@ -38,7 +41,10 @@ function ChangePercentage({
 	}
 	if (direction < 0) {
 		return (
-			<div className="change-percentage change-percentage--error">
+			<div
+				className="change-percentage change-percentage--error"
+				data-testid="stats-card-change"
+			>
 				<div className="change-percentage__icon">
 					<ArrowUpRight size={14} color={Color.BG_CHERRY_500} />
 				</div>
@@ -50,7 +56,10 @@ function ChangePercentage({
 	}
 
 	return (
-		<div className="change-percentage change-percentage--no-previous-data">
+		<div
+			className="change-percentage change-percentage--no-previous-data"
+			data-testid="stats-card-change"
+		>
 			<div className="change-percentage__label">no previous data</div>
 		</div>
 	);
@@ -103,7 +112,12 @@ function StatsCard({
 	const formattedEndTimeForTooltip = convertTimestampToLocaleDateString(endTime);
 
 	return (
-		<div className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}>
+		<div
+			className={`stats-card ${isEmpty ? 'stats-card--empty' : ''}`}
+			data-testid="stats-card"
+			data-stats-title={title}
+			data-empty={isEmpty ? 'true' : 'false'}
+		>
 			<div className="stats-card__title-wrapper">
 				<div className="title">{title}</div>
 				<div className="duration-indicator">
@@ -123,7 +137,7 @@ function StatsCard({
 			</div>
 
 			<div className="stats-card__stats">
-				<div className="count-label">
+				<div className="count-label" data-testid="stats-card-value">
 					{isEmpty ? emptyMessage : displayValue || totalCurrentCount}
 				</div>
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsGraph/StatsGraph.tsx

@@ -81,7 +81,11 @@ function StatsGraph({ timeSeries, changeDirection }: Props): JSX.Element {
 	);
 
 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+		<div
+			style={{ height: '100%', width: '100%' }}
+			ref={graphRef}
+			data-testid="stats-card-sparkline"
+		>
 			<Uplot data={[xData, yData]} options={options} />
 		</div>
 	);

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -48,11 +48,16 @@ function TopContributorsCard({
 
 	return (
 		<>
-			<div className="top-contributors-card">
+			<div className="top-contributors-card" data-testid="top-contributors-card">
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
+						<Button
+							type="text"
+							className="view-all"
+							onClick={toggleViewAllDrawer}
+							data-testid="top-contributors-view-all"
+						>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -68,7 +68,10 @@ function TopContributorsRows({
 					relatedTracesLink={record.relatedTracesLink}
 					relatedLogsLink={record.relatedLogsLink}
 				>
-					<div className="total-contribution">
+					<div
+						className="total-contribution"
+						data-testid="top-contributors-row-count"
+					>
 						{count}/{totalCurrentTriggers}
 					</div>
 				</ConditionalAlertPopover>
@@ -78,7 +81,10 @@ function TopContributorsRows({
 
 	const handleRowClick = (
 		record: AlertRuleTopContributors,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'top-contributors-row',
 		onClick: (): void => {
 			logEvent('Alert history: Top contributors row: Clicked', {
 				labels: record.labels,

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx

@@ -31,7 +31,10 @@ function ViewAllDrawer({
 			}}
 			title="Viewing All Contributors"
 		>
-			<div className="top-contributors-card--view-all">
+			<div
+				className="top-contributors-card--view-all"
+				data-testid="top-contributors-drawer"
+			>
 				<div className="top-contributors-card__content">
 					<TopContributorsRows
 						topContributors={topContributorsData}

frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx

@@ -32,8 +32,8 @@ function GraphWrapper({
 	}, [data?.data]);
 
 	return (
-		<div className="timeline-graph">
-			<div className="timeline-graph__title">
+		<div className="timeline-graph" data-testid="timeline-graph">
+			<div className="timeline-graph__title" data-testid="timeline-graph-title">
 				{totalCurrentTriggers} triggers in {relativeTime}
 			</div>
 			<div className="timeline-graph__chart">

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -118,7 +118,10 @@ function TimelineTableContent(): JSX.Element {
 
 	const handleRowClick = (
 		record: AlertRuleTimelineTableResponse,
-	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+	): HTMLAttributes<AlertRuleTimelineTableResponse> & {
+		'data-testid': string;
+	} => ({
+		'data-testid': 'timeline-row',
 		onClick: (): void => {
 			void logEvent('Alert history: Timeline table row: Clicked', {
 				ruleId: record.ruleID,
@@ -128,12 +131,15 @@ function TimelineTableContent(): JSX.Element {
 	});
 
 	return (
-		<div className="timeline-table">
+		<div className="timeline-table" data-testid="timeline-table">
 			{/* If we don't wait to have the keys, the QuerySearch will not render them at first usage */}
 			{!isLoadingKeys && hardcodedAttributeKeys ? (
 				<div className="timeline-table__filter">
 					<div className="timeline-table__filter-row">
-						<div className="timeline-table__filter-search">
+						<div
+							className="timeline-table__filter-search"
+							data-testid="timeline-filter-search"
+						>
 							<QuerySearch
 								onChange={querySearchOnChange}
 								queryData={queryData}
@@ -155,6 +161,7 @@ function TimelineTableContent(): JSX.Element {
 					<Skeleton.Input
 						className="timeline-table__filter--loading-skeleton"
 						active
+						data-testid="timeline-filter-skeleton"
 					/>
 				</div>
 			)}
@@ -172,14 +179,17 @@ function TimelineTableContent(): JSX.Element {
 				locale={{
 					emptyText:
 						isError && apiError ? (
-							<div className="timeline-table__error">
+							<div className="timeline-table__error" data-testid="timeline-error">
 								<ErrorContent error={apiError} />
 							</div>
 						) : undefined,
 				}}
 				footer={(): JSX.Element => (
 					<div className="timeline-table__pagination">
-						<div className="timeline-table__pagination-info">
+						<div
+							className="timeline-table__pagination-info"
+							data-testid="timeline-footer-range"
+						>
 							{paginationConfig.showTotal?.(totalItems, [
 								totalItems === 0
 									? 0

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -21,7 +21,7 @@ export const timelineTableColumns = ({
 		sorter: true,
 		width: 140,
 		render: (value): JSX.Element => (
-			<div className="alert-rule-state">
+			<div className="alert-rule-state" data-testid="timeline-row-state">
 				<AlertState state={value} showLabel />
 			</div>
 		),
@@ -30,7 +30,7 @@ export const timelineTableColumns = ({
 		title: 'LABELS',
 		dataIndex: 'labels',
 		render: (labels): JSX.Element => (
-			<div className="alert-rule-labels">
+			<div className="alert-rule-labels" data-testid="timeline-row-labels">
 				<AlertLabels labels={labels} />
 			</div>
 		),
@@ -40,7 +40,10 @@ export const timelineTableColumns = ({
 		dataIndex: 'unixMilli',
 		width: 200,
 		render: (value): JSX.Element => (
-			<div className="alert-rule__created-at">
+			<div
+				className="alert-rule__created-at"
+				data-testid="timeline-row-created-at"
+			>
 				{formatTimezoneAdjustedTimestamp(value, DATE_TIME_FORMATS.DASH_DATETIME)}
 			</div>
 		),
@@ -53,7 +56,7 @@ export const timelineTableColumns = ({
 			if (!record.relatedTracesLink && !record.relatedLogsLink) {
 				return (
 					<Tooltip title="No links available for this item">
-						<Button type="text" ghost disabled>
+						<Button type="text" ghost disabled data-testid="timeline-row-actions">
 							<Ellipsis className="dropdown-icon" size="md" />
 						</Button>
 					</Tooltip>
@@ -65,7 +68,7 @@ export const timelineTableColumns = ({
 					relatedTracesLink={record.relatedTracesLink ?? ''}
 					relatedLogsLink={record.relatedLogsLink ?? ''}
 				>
-					<Button type="text" ghost>
+					<Button type="text" ghost data-testid="timeline-row-actions">
 						<Ellipsis className="dropdown-icon" size="md" />
 					</Button>
 				</ConditionalAlertPopover>

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -23,6 +23,7 @@ function TimelineTabs(): JSX.Element {
 		{
 			value: TimelineTab.OVERALL_STATUS,
 			label: 'Overall Status',
+			testId: 'timeline-tab-overall-status',
 		},
 		{
 			value: TimelineTab.TOP_5_CONTRIBUTORS,
@@ -33,6 +34,7 @@ function TimelineTabs(): JSX.Element {
 				</div>
 			),
 			disabled: true,
+			testId: 'timeline-tab-top-contributors',
 		},
 	];
 
@@ -57,14 +59,17 @@ function TimelineFilters(): JSX.Element {
 		{
 			value: TimelineFilter.ALL,
 			label: 'All',
+			testId: 'timeline-filter-all',
 		},
 		{
 			value: TimelineFilter.FIRED,
 			label: 'Fired',
+			testId: 'timeline-filter-fired',
 		},
 		{
 			value: TimelineFilter.RESOLVED,
 			label: 'Resolved',
+			testId: 'timeline-filter-resolved',
 		},
 	];
 

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannel.test.tsx

@@ -1,28 +1,18 @@
 import CreateAlertChannels from 'container/CreateAlertChannels';
 import { ChannelType } from 'container/CreateAlertChannels/config';
-import { GoogleChatInitialConfig } from 'container/CreateAlertChannels/defaults';
 import {
-	googleChatDescriptionDefaultValue,
-	googleChatTitleDefaultValue,
 	opsGenieDescriptionDefaultValue,
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
 	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultValue,
+	pagerDutyDescriptionDefaultVaule,
 	pagerDutySeverityTextDefaultValue,
 	slackDescriptionDefaultValue,
 	slackTitleDefaultValue,
 } from 'mocks-server/__mockdata__/alerts';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
+import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import { testLabelInputAndHelpValue } from './testUtils';
 
@@ -235,7 +225,7 @@ describe('Create Alert Channel', () => {
 				);
 
 				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultValue,
+					pagerDutyDescriptionDefaultVaule,
 				);
 			});
 			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {
@@ -429,150 +419,5 @@ describe('Create Alert Channel', () => {
 				expect(descriptionTextArea).toHaveTextContent(slackDescriptionDefaultValue);
 			});
 		});
-		describe('Google Chat', () => {
-			const validWebhookUrl =
-				'https://chat.googleapis.com/v1/spaces/AAAA/messages?key=dummy_key&token=dummy_token';
-
-			beforeEach(() => {
-				render(<CreateAlertChannels preType={ChannelType.GoogleChat} />);
-			});
-
-			it('Should check if the selected item in the type dropdown has text "Google Chat"', () => {
-				expect(screen.getByText('Google Chat')).toBeInTheDocument();
-			});
-
-			it('Should check if Webhook URL label and input are displayed properly', () => {
-				testLabelInputAndHelpValue({
-					labelText: 'field_webhook_url',
-					testId: 'webhook-url-textbox',
-				});
-			});
-
-			it('Should check if Title contains the google chat template', () => {
-				expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-					googleChatTitleDefaultValue,
-				);
-			});
-
-			it('Should check if Description contains the google chat template', () => {
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					googleChatDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if saving with a webhook url outside chat.googleapis.com displays error notification', async () => {
-				const user = userEvent.setup();
-
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'gchat-channel',
-				);
-				await user.type(
-					screen.getByTestId('webhook-url-textbox'),
-					'https://example.com/webhook',
-				);
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(errorNotification).toHaveBeenCalledWith({
-						message: 'Error',
-						description: 'google_chat_webhook_url_invalid',
-					}),
-				);
-			});
-
-			it('Should check if saving sends a googlechat_configs payload', async () => {
-				let requestBody: unknown;
-				server.use(
-					rest.post('http://localhost/api/v1/channels', async (req, res, ctx) => {
-						requestBody = await req.json();
-						return res(
-							ctx.status(201),
-							ctx.json({ status: 'success', data: 'channel created' }),
-						);
-					}),
-				);
-
-				const user = userEvent.setup();
-
-				await user.type(
-					screen.getByTestId('channel-name-textbox'),
-					'gchat-channel',
-				);
-				await user.type(screen.getByTestId('webhook-url-textbox'), validWebhookUrl);
-
-				await user.click(screen.getByTestId('save-channel-button'));
-
-				await waitFor(() =>
-					expect(successNotification).toHaveBeenCalledWith({
-						message: 'Success',
-						description: 'channel_creation_done',
-					}),
-				);
-
-				expect(requestBody).toStrictEqual({
-					name: 'gchat-channel',
-					googlechat_configs: [
-						{
-							webhook_url: validWebhookUrl,
-							title: GoogleChatInitialConfig.title,
-							text: GoogleChatInitialConfig.text,
-							send_resolved: true,
-						},
-					],
-				});
-			});
-		});
-		describe('Changing the channel type', () => {
-			async function selectType(
-				user: ReturnType<typeof userEvent.setup>,
-				optionText: string,
-			): Promise<void> {
-				// the type dropdown opens on the inner search input of the antd select
-				await user.click(screen.getByRole('combobox'));
-				await user.click(await screen.findByTitle(optionText));
-			}
-
-			it('Should check if switching to Google Chat and back swaps the prefilled templates', async () => {
-				const user = userEvent.setup();
-				render(<CreateAlertChannels preType={ChannelType.Slack} />);
-
-				await selectType(user, 'Google Chat');
-
-				await waitFor(() =>
-					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-						googleChatTitleDefaultValue,
-					),
-				);
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					googleChatDescriptionDefaultValue,
-				);
-
-				await selectType(user, 'Slack');
-
-				await waitFor(() =>
-					expect(screen.getByTestId('title-textarea')).toHaveTextContent(
-						slackTitleDefaultValue,
-					),
-				);
-				expect(screen.getByTestId('description-textarea')).toHaveTextContent(
-					slackDescriptionDefaultValue,
-				);
-			});
-
-			it('Should check if switching to Pagerduty prefills the pagerduty description and not the opsgenie one', async () => {
-				const user = userEvent.setup();
-				render(<CreateAlertChannels preType={ChannelType.Opsgenie} />);
-
-				await selectType(user, 'Pagerduty');
-
-				await waitFor(() =>
-					expect(screen.getByTestId('pager-description-textarea')).toHaveTextContent(
-						pagerDutyDescriptionDefaultValue,
-					),
-				);
-			});
-		});
 	});
 });

frontend/src/container/AllAlertChannels/__tests__/CreateAlertChannelNormalUser.test.tsx

@@ -5,7 +5,7 @@ import {
 	opsGenieMessageDefaultValue,
 	opsGeniePriorityDefaultValue,
 	pagerDutyAdditionalDetailsDefaultValue,
-	pagerDutyDescriptionDefaultValue,
+	pagerDutyDescriptionDefaultVaule,
 	pagerDutySeverityTextDefaultValue,
 	slackDescriptionDefaultValue,
 	slackTitleDefaultValue,
@@ -150,7 +150,7 @@ describe('Create Alert Channel (Normal User)', () => {
 				);
 
 				expect(descriptionTextArea).toHaveTextContent(
-					pagerDutyDescriptionDefaultValue,
+					pagerDutyDescriptionDefaultVaule,
 				);
 			});
 			it('Should check if Severity label, info (help_pager_severity), and textbox are displayed properly', () => {

frontend/src/container/CreateAlertChannels/config.ts

@@ -104,7 +104,6 @@ export enum ChannelType {
 	Pagerduty = 'pagerduty',
 	Opsgenie = 'opsgenie',
 	MsTeams = 'msteams',
-	GoogleChat = 'googlechat',
 }
 
 // LabelFilterStatement will be used for preparing filter conditions / matchers
@@ -126,11 +125,3 @@ export interface MsTeamsChannel extends Channel {
 	title?: string;
 	text?: string;
 }
-
-export interface GoogleChatChannel extends Channel {
-	// incoming webhook url of the google chat space, must be an
-	// https url on chat.googleapis.com
-	webhook_url?: string;
-	title?: string;
-	text?: string;
-}

frontend/src/container/CreateAlertChannels/defaults.ts

@@ -1,51 +1,4 @@
-import {
-	ChannelType,
-	EmailChannel,
-	GoogleChatChannel,
-	MsTeamsChannel,
-	OpsgenieChannel,
-	PagerChannel,
-	SlackChannel,
-	WebhookChannel,
-} from './config';
-
-// shared by slack and ms teams, both render the same title / description boxes
-export const SlackInitialConfig: Partial<SlackChannel> = {
-	text: `{{ range .Alerts -}}
-     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
-
-     *Summary:* {{ .Annotations.summary }}
-     *Description:* {{ .Annotations.description }}
-     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
-     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
-
-     *Details:*
-       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
-       {{ end }}
-     {{ end }}`,
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
-     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
-       {{" "}}(
-       {{- with .CommonLabels.Remove .GroupLabels.Names }}
-         {{- range $index, $label := .SortedPairs -}}
-           {{ if $index }}, {{ end }}
-           {{- $label.Name }}="{{ $label.Value -}}"
-         {{- end }}
-       {{- end -}}
-       )
-     {{- end }}`,
-};
-
-// mirrors DefaultGoogleChatReceiverConfig in pkg/types/alertmanagertypes/googlechat.go,
-// which the backend applies when title / text are left empty
-export const GoogleChatInitialConfig: Partial<GoogleChatChannel> = {
-	title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }}`,
-	text: `{{ range .Alerts -}}
-**Alert:** {{ .Labels.alertname }}{{ if .Labels.severity }} ({{ .Labels.severity }}){{ end }}{{ if .Annotations.summary }}
-**Summary:** {{ .Annotations.summary }}{{ end }}{{ if .Annotations.description }}
-**Description:** {{ .Annotations.description }}{{ end }}
-{{ end }}`,
-};
+import { EmailChannel, OpsgenieChannel, PagerChannel } from './config';
 
 export const PagerInitialConfig: Partial<PagerChannel> = {
 	description: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
@@ -493,26 +446,3 @@ export const EmailInitialConfig: Partial<EmailChannel> = {
 	</body>
   </html>`,
 };
-
-// prefilled values of every channel type, keyed by type so the form can apply
-// exactly one set of defaults and swap it when the type changes
-export const ChannelInitialConfig: Record<
-	ChannelType,
-	Partial<
-		SlackChannel &
-			WebhookChannel &
-			PagerChannel &
-			MsTeamsChannel &
-			OpsgenieChannel &
-			EmailChannel &
-			GoogleChatChannel
-	>
-> = {
-	[ChannelType.Slack]: SlackInitialConfig,
-	[ChannelType.MsTeams]: SlackInitialConfig,
-	[ChannelType.GoogleChat]: GoogleChatInitialConfig,
-	[ChannelType.Pagerduty]: PagerInitialConfig,
-	[ChannelType.Opsgenie]: OpsgenieInitialConfig,
-	[ChannelType.Email]: EmailInitialConfig,
-	[ChannelType.Webhook]: {},
-};

frontend/src/container/CreateAlertChannels/index.tsx

@@ -14,24 +14,16 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
-import {
-	useCreateChannel,
-	useTestChannel,
-} from 'api/generated/services/channels';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
 
 import {
 	ChannelType,
 	EmailChannel,
-	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -39,12 +31,12 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from './config';
-import { ChannelInitialConfig } from './defaults';
 import {
-	isChannelType,
-	isValidGoogleChatWebhookURL,
-	prepareGoogleChatRequest,
-} from './utils';
+	EmailInitialConfig,
+	OpsgenieInitialConfig,
+	PagerInitialConfig,
+} from './defaults';
+import { isChannelType } from './utils';
 
 import './CreateAlertChannels.styles.scss';
 
@@ -68,38 +60,69 @@ function CreateAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel &
-				GoogleChatChannel
+				EmailChannel
 		>
-	>(() => ({
+	>({
 		send_resolved: true,
-		...ChannelInitialConfig[preType],
-	}));
+		text: `{{ range .Alerts -}}
+     *Alert:* {{ .Labels.alertname }}{{ if .Labels.severity }} - {{ .Labels.severity }}{{ end }}
+
+     *Summary:* {{ .Annotations.summary }}
+     *Description:* {{ .Annotations.description }}
+     *RelatedLogs:* {{ if gt (len .Annotations.related_logs) 0 -}} View in <{{ .Annotations.related_logs }}|logs explorer> {{- end}}
+     *RelatedTraces:* {{ if gt (len .Annotations.related_traces) 0 -}} View in <{{ .Annotations.related_traces }}|traces explorer> {{- end}}
+
+     *Details:*
+       {{ range .Labels.SortedPairs }} • *{{ .Name }}:* {{ .Value }}
+       {{ end }}
+     {{ end }}`,
+		title: `[{{ .Status | toUpper }}{{ if eq .Status "firing" }}:{{ .Alerts.Firing | len }}{{ end }}] {{ .CommonLabels.alertname }} for {{ .CommonLabels.job }}
+     {{- if gt (len .CommonLabels) (len .GroupLabels) -}}
+       {{" "}}(
+       {{- with .CommonLabels.Remove .GroupLabels.Names }}
+         {{- range $index, $label := .SortedPairs -}}
+           {{ if $index }}, {{ end }}
+           {{- $label.Name }}="{{ $label.Value -}}"
+         {{- end }}
+       {{- end -}}
+       )
+     {{- end }}`,
+	});
 	const [savingState, setSavingState] = useState<boolean>(false);
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
-	const { mutateAsync: createChannel } = useCreateChannel();
-	const { mutateAsync: testChannel } = useTestChannel();
-
 	const [type, setType] = useState<ChannelType>(preType);
 	const onTypeChangeHandler = useCallback(
 		(value: string) => {
-			const nextType = value as ChannelType;
-			if (nextType === type) {
-				return;
+			const currentType = type;
+			setType(value as ChannelType);
+
+			if (value === ChannelType.Pagerduty && currentType !== value) {
+				// reset config to pager defaults
+				setSelectedConfig({
+					name: selectedConfig?.name,
+					send_resolved: selectedConfig.send_resolved,
+					...PagerInitialConfig,
+				});
 			}
 
-			setType(nextType);
+			if (value === ChannelType.Opsgenie && currentType !== value) {
+				setSelectedConfig((selectedConfig) => ({
+					...selectedConfig,
+					...OpsgenieInitialConfig,
+				}));
+			}
 
-			// the fields the types share (title, text, description) keep the value of
-			// the type that was selected before, so the new type's defaults have to be
-			// written to both the config and the form
-			const defaults = ChannelInitialConfig[nextType];
-			setSelectedConfig((selectedConfig) => ({ ...selectedConfig, ...defaults }));
-			formInstance.setFieldsValue(defaults);
+			// reset config to email defaults
+			if (value === ChannelType.Email && currentType !== value) {
+				setSelectedConfig((selectedConfig) => ({
+					...selectedConfig,
+					...EmailInitialConfig,
+				}));
+			}
 		},
-		[type, formInstance],
+		[type, selectedConfig],
 	);
 
 	const prepareSlackRequest = useCallback(
@@ -384,56 +407,6 @@ function CreateAlertChannels({
 		showErrorModal,
 	]);
 
-	const validateGoogleChatConfig = useCallback((): boolean => {
-		if (!selectedConfig.webhook_url) {
-			notifications.error({
-				message: 'Error',
-				description: t('webhook_url_required'),
-			});
-			return false;
-		}
-
-		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
-			notifications.error({
-				message: 'Error',
-				description: t('google_chat_webhook_url_invalid'),
-			});
-			return false;
-		}
-
-		return true;
-	}, [selectedConfig.webhook_url, notifications, t]);
-
-	const onGoogleChatHandler = useCallback(async () => {
-		if (!validateGoogleChatConfig()) {
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		}
-
-		setSavingState(true);
-
-		try {
-			await createChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-			notifications.success({
-				message: 'Success',
-				description: t('channel_creation_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_creation_done') };
-		} catch (error) {
-			showErrorModal(toAPIError(error as ErrorType<RenderErrorResponseDTO>));
-			return { status: 'failed', statusMessage: t('channel_creation_failed') };
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateGoogleChatConfig,
-		createChannel,
-		selectedConfig,
-		notifications,
-		t,
-		showErrorModal,
-	]);
-
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			if (!selectedConfig.name) {
@@ -451,7 +424,6 @@ function CreateAlertChannels({
 				[ChannelType.Opsgenie]: onOpsgenieHandler,
 				[ChannelType.MsTeams]: onMsTeamsHandler,
 				[ChannelType.Email]: onEmailHandler,
-				[ChannelType.GoogleChat]: onGoogleChatHandler,
 			};
 
 			if (isChannelType(value)) {
@@ -483,7 +455,6 @@ function CreateAlertChannels({
 			onOpsgenieHandler,
 			onMsTeamsHandler,
 			onEmailHandler,
-			onGoogleChatHandler,
 			notifications,
 			t,
 		],
@@ -521,13 +492,6 @@ function CreateAlertChannels({
 						request = prepareEmailRequest();
 						await testEmail(request);
 						break;
-					case ChannelType.GoogleChat:
-						if (!validateGoogleChatConfig()) {
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-						break;
 					default:
 						notifications.error({
 							message: 'Error',
@@ -549,11 +513,7 @@ function CreateAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				showErrorModal(
-					error instanceof APIError
-						? error
-						: toAPIError(error as ErrorType<RenderErrorResponseDTO>),
-				);
+				showErrorModal(error as APIError);
 
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
@@ -575,8 +535,6 @@ function CreateAlertChannels({
 			prepareSlackRequest,
 			prepareMsTeamsRequest,
 			prepareEmailRequest,
-			validateGoogleChatConfig,
-			testChannel,
 			notifications,
 		],
 	);
@@ -604,6 +562,9 @@ function CreateAlertChannels({
 					initialValue: {
 						type,
 						...selectedConfig,
+						...PagerInitialConfig,
+						...OpsgenieInitialConfig,
+						...EmailInitialConfig,
 					},
 				}}
 			/>

frontend/src/container/CreateAlertChannels/utils.ts

@@ -1,39 +1,4 @@
-import {
-	AlertmanagertypesPostableChannelDTO,
-	ConfigSecretURLDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import { ChannelType, GoogleChatChannel } from './config';
+import { ChannelType } from './config';
 
 export const isChannelType = (type: string): type is ChannelType =>
 	Object.values(ChannelType).includes(type as ChannelType);
-
-const GOOGLE_CHAT_WEBHOOK_HOST = 'chat.googleapis.com';
-
-// the backend enforces the same two rules, this is only for a nicer error experience
-export const isValidGoogleChatWebhookURL = (url: string): boolean => {
-	try {
-		const { protocol, hostname } = new URL(url);
-		return (
-			protocol === 'https:' && hostname.toLowerCase() === GOOGLE_CHAT_WEBHOOK_HOST
-		);
-	} catch {
-		return false;
-	}
-};
-
-// create, update and test all send the same body shape
-export const prepareGoogleChatRequest = (
-	config: Partial<GoogleChatChannel>,
-): AlertmanagertypesPostableChannelDTO => ({
-	name: config.name || '',
-	googlechat_configs: [
-		{
-			// the generated type models go's config.SecretURL as an object, the api takes a string
-			webhook_url: (config.webhook_url || '') as unknown as ConfigSecretURLDTO,
-			title: config.title || '',
-			text: config.text || '',
-			send_resolved: config.send_resolved || false,
-		},
-	],
-});

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

@@ -34,6 +34,7 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.sendNotificationIfDataIsMissing.toleranceLimit}
+									testId="send-notification-if-data-is-missing-input"
 								/>
 								<Typography.Text>Minutes</Typography.Text>
 							</div>
@@ -66,6 +67,7 @@ function AdvancedOptions(): JSX.Element {
 										})
 									}
 									value={advancedOptions.enforceMinimumDatapoints.minimumDatapoints}
+									testId="enforce-minimum-datapoints-input"
 								/>
 								<Typography.Text>Datapoints</Typography.Text>
 							</div>

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

@@ -66,6 +66,7 @@ function EvaluationWindowPopover({
 						tabIndex={0}
 						data-value={option.value}
 						data-section-id={sectionId}
+						data-testid={`${sectionId}-option-${option.value}`}
 						onClick={(): void => onChange(option.value)}
 						onKeyDown={(e): void => {
 							if (e.key === 'Enter' || e.key === ' ') {

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -186,6 +186,7 @@ function Footer(): JSX.Element {
 				color="primary"
 				onClick={handleSaveAlert}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
+				testId="save-alert-rule-button"
 			>
 				{isCreatingAlertRule || isUpdatingAlertRule ? (
 					<Loader data-testid="save-alert-rule-loader-icon" size={14} />
@@ -218,6 +219,7 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleTestNotification}
 				disabled={disableButtons || Boolean(alertValidationMessage)}
+				testId="test-notification-button"
 			>
 				{isTestingAlertRule ? (
 					<Loader data-testid="test-notification-loader-icon" size={14} />
@@ -249,6 +251,7 @@ function Footer(): JSX.Element {
 				color="secondary"
 				onClick={handleDiscard}
 				disabled={disableButtons}
+				testId="discard-alert-rule-button"
 			>
 				<X size={14} /> Discard
 			</Button>

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -37,7 +37,6 @@ export default function ChartWrapper({
 	groupByPerQuery,
 	customTooltip,
 	pinnedTooltipElement,
-	tooltipPortalRoot,
 	'data-testid': testId,
 }: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
@@ -119,7 +118,6 @@ export default function ChartWrapper({
 								syncMetadata={syncMetadata}
 								render={renderTooltipCallback}
 								pinnedTooltipElement={pinnedTooltipElement}
-								portalRoot={tooltipPortalRoot}
 							/>
 						)}
 					</UPlotChart>

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -30,7 +30,6 @@ interface BaseChartProps {
 	pinnedTooltipElement?: (clickData: ChartClickData) => React.ReactNode;
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
-	tooltipPortalRoot?: HTMLElement | null;
 	'data-testid'?: string;
 }
 interface UPlotBasedChartProps {

frontend/src/container/EditAlertChannels/index.tsx

@@ -14,17 +14,10 @@ import testPagerApi from 'api/channels/testPager';
 import testSlackApi from 'api/channels/testSlack';
 import testWebhookApi from 'api/channels/testWebhook';
 import logEvent from 'api/common/logEvent';
-import {
-	useTestChannel,
-	useUpdateChannelByID,
-} from 'api/generated/services/channels';
-import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
-import { ErrorType } from 'api/generatedAPIInstance';
 import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
-	GoogleChatChannel,
 	MsTeamsChannel,
 	OpsgenieChannel,
 	PagerChannel,
@@ -32,15 +25,10 @@ import {
 	ValidatePagerChannel,
 	WebhookChannel,
 } from 'container/CreateAlertChannels/config';
-import {
-	isValidGoogleChatWebhookURL,
-	prepareGoogleChatRequest,
-} from 'container/CreateAlertChannels/utils';
 import FormAlertChannels from 'container/FormAlertChannels';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
 import APIError from 'types/api/error';
-import { toAPIError } from 'utils/errorUtils';
 
 function EditAlertChannels({
 	initialValue,
@@ -57,8 +45,7 @@ function EditAlertChannels({
 				PagerChannel &
 				MsTeamsChannel &
 				OpsgenieChannel &
-				EmailChannel &
-				GoogleChatChannel
+				EmailChannel
 		>
 	>({
 		...initialValue,
@@ -67,26 +54,6 @@ function EditAlertChannels({
 	const [testingState, setTestingState] = useState<boolean>(false);
 	const { notifications } = useNotifications();
 
-	const { mutateAsync: updateChannel } = useUpdateChannelByID();
-	const { mutateAsync: testChannel } = useTestChannel();
-
-	const notifyError = useCallback(
-		(error: unknown): APIError => {
-			const apiError =
-				error instanceof APIError
-					? error
-					: toAPIError(error as ErrorType<RenderErrorResponseDTO>);
-
-			notifications.error({
-				message: apiError.getErrorCode(),
-				description: apiError.getErrorMessage(),
-			});
-
-			return apiError;
-		},
-		[notifications],
-	);
-
 	const [type, setType] = useState<ChannelType>(
 		initialValue?.type ? (initialValue.type as ChannelType) : ChannelType.Slack,
 	);
@@ -397,61 +364,6 @@ function EditAlertChannels({
 		}
 	}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
 
-	const validateGoogleChatConfig = useCallback((): string => {
-		if (!selectedConfig?.webhook_url) {
-			return t('webhook_url_required');
-		}
-
-		if (!isValidGoogleChatWebhookURL(selectedConfig.webhook_url)) {
-			return t('google_chat_webhook_url_invalid');
-		}
-
-		return '';
-	}, [selectedConfig, t]);
-
-	const onGoogleChatEditHandler = useCallback(async () => {
-		const validationError = validateGoogleChatConfig();
-
-		if (validationError !== '') {
-			notifications.error({
-				message: 'Error',
-				description: validationError,
-			});
-			return { status: 'failed', statusMessage: validationError };
-		}
-
-		setSavingState(true);
-
-		try {
-			await updateChannel({
-				pathParams: { id },
-				data: prepareGoogleChatRequest(selectedConfig),
-			});
-			notifications.success({
-				message: 'Success',
-				description: t('channel_edit_done'),
-			});
-			history.replace(ROUTES.ALL_CHANNELS);
-			return { status: 'success', statusMessage: t('channel_edit_done') };
-		} catch (error) {
-			const apiError = notifyError(error);
-			return {
-				status: 'failed',
-				statusMessage: apiError.getErrorMessage() || t('channel_edit_failed'),
-			};
-		} finally {
-			setSavingState(false);
-		}
-	}, [
-		validateGoogleChatConfig,
-		updateChannel,
-		id,
-		selectedConfig,
-		notifications,
-		notifyError,
-		t,
-	]);
-
 	const onSaveHandler = useCallback(
 		async (value: ChannelType) => {
 			let result;
@@ -467,8 +379,6 @@ function EditAlertChannels({
 				result = await onOpsgenieEditHandler();
 			} else if (value === ChannelType.Email) {
 				result = await onEmailEditHandler();
-			} else if (value === ChannelType.GoogleChat) {
-				result = await onGoogleChatEditHandler();
 			}
 			logEvent('Alert Channel: Save channel', {
 				type: value,
@@ -487,7 +397,6 @@ function EditAlertChannels({
 			onMsTeamsEditHandler,
 			onOpsgenieEditHandler,
 			onEmailEditHandler,
-			onGoogleChatEditHandler,
 		],
 	);
 
@@ -529,19 +438,6 @@ function EditAlertChannels({
 							await testEmail(request);
 						}
 						break;
-					case ChannelType.GoogleChat: {
-						const validationError = validateGoogleChatConfig();
-						if (validationError !== '') {
-							notifications.error({
-								message: 'Error',
-								description: validationError,
-							});
-							setTestingState(false);
-							return;
-						}
-						await testChannel({ data: prepareGoogleChatRequest(selectedConfig) });
-						break;
-					}
 					default:
 						notifications.error({
 							message: 'Error',
@@ -563,7 +459,10 @@ function EditAlertChannels({
 					status: 'Test success',
 				});
 			} catch (error) {
-				notifyError(error);
+				notifications.error({
+					message: (error as APIError).getErrorCode(),
+					description: (error as APIError).getErrorMessage(),
+				});
 				logEvent('Alert Channel: Test notification', {
 					type: channelType,
 					sendResolvedAlert: selectedConfig?.send_resolved,
@@ -577,9 +476,6 @@ function EditAlertChannels({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			t,
-			notifyError,
-			validateGoogleChatConfig,
-			testChannel,
 			prepareWebhookRequest,
 			preparePagerRequest,
 			prepareSlackRequest,

frontend/src/container/FormAlertChannels/Settings/GoogleChat.tsx

@@ -1,82 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Form, Input } from 'antd';
-import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-
-import { GoogleChatChannel } from '../../CreateAlertChannels/config';
-import { isValidGoogleChatWebhookURL } from '../../CreateAlertChannels/utils';
-
-function GoogleChat({ setSelectedConfig }: GoogleChatProps): JSX.Element {
-	const { t } = useTranslation('channels');
-
-	return (
-		<>
-			<Form.Item
-				name="webhook_url"
-				label={t('field_webhook_url')}
-				required
-				rules={[
-					{
-						validator: (_, value: string): Promise<void> =>
-							!value || isValidGoogleChatWebhookURL(value)
-								? Promise.resolve()
-								: Promise.reject(new Error(t('google_chat_webhook_url_invalid'))),
-					},
-				]}
-				tooltip={{
-					title: (
-						<MarkdownRenderer
-							markdownContent={t('tooltip_google_chat_url')}
-							variables={{}}
-						/>
-					),
-					overlayInnerStyle: { maxWidth: 400 },
-					placement: 'right',
-				}}
-			>
-				<Input
-					onChange={(event): void => {
-						setSelectedConfig((value) => ({
-							...value,
-							webhook_url: event.target.value,
-						}));
-					}}
-					data-testid="webhook-url-textbox"
-				/>
-			</Form.Item>
-
-			<Form.Item name="title" label={t('field_slack_title')}>
-				<Input.TextArea
-					rows={4}
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							title: event.target.value,
-						}))
-					}
-					data-testid="title-textarea"
-				/>
-			</Form.Item>
-
-			<Form.Item name="text" label={t('field_slack_description')}>
-				<Input.TextArea
-					rows={4}
-					onChange={(event): void =>
-						setSelectedConfig((value) => ({
-							...value,
-							text: event.target.value,
-						}))
-					}
-					data-testid="description-textarea"
-					placeholder={t('placeholder_slack_description')}
-				/>
-			</Form.Item>
-		</>
-	);
-}
-
-interface GoogleChatProps {
-	setSelectedConfig: Dispatch<SetStateAction<Partial<GoogleChatChannel>>>;
-}
-
-export default GoogleChat;

frontend/src/container/FormAlertChannels/index.tsx

@@ -9,7 +9,6 @@ import ROUTES from 'constants/routes';
 import {
 	ChannelType,
 	EmailChannel,
-	GoogleChatChannel,
 	OpsgenieChannel,
 	PagerChannel,
 	SlackChannel,
@@ -18,7 +17,6 @@ import {
 import history from 'lib/history';
 
 import EmailSettings from './Settings/Email';
-import GoogleChatSettings from './Settings/GoogleChat';
 import MsTeamsSettings from './Settings/MsTeams';
 import OpsgenieSettings from './Settings/Opsgenie';
 import PagerSettings from './Settings/Pager';
@@ -51,8 +49,6 @@ function FormAlertChannels({
 				return <PagerSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.MsTeams:
 				return <MsTeamsSettings setSelectedConfig={setSelectedConfig} />;
-			case ChannelType.GoogleChat:
-				return <GoogleChatSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Opsgenie:
 				return <OpsgenieSettings setSelectedConfig={setSelectedConfig} />;
 			case ChannelType.Email:
@@ -133,14 +129,6 @@ function FormAlertChannels({
 						<Select.Option value="msteams" key="msteams" data-testid="select-option">
 							Microsoft Teams
 						</Select.Option>
-
-						<Select.Option
-							value="googlechat"
-							key="googlechat"
-							data-testid="select-option"
-						>
-							Google Chat
-						</Select.Option>
 					</Select>
 				</Form.Item>
 
@@ -188,8 +176,7 @@ interface FormAlertChannelsProps {
 					WebhookChannel &
 					PagerChannel &
 					OpsgenieChannel &
-					EmailChannel &
-					GoogleChatChannel
+					EmailChannel
 			>
 		>
 	>;

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -119,6 +119,7 @@ function BasicInfo({
 					<SeveritySelect
 						getPopupContainer={popupContainer}
 						defaultValue="critical"
+						data-testid="alert-severity-select"
 						onChange={(value: unknown | string): void => {
 							const s = (value as string) || 'critical';
 							setAlertDef({
@@ -147,6 +148,7 @@ function BasicInfo({
 					]}
 				>
 					<InputSmall
+						data-testid="alert-name-input-v1"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,
@@ -161,6 +163,7 @@ function BasicInfo({
 					name={['annotations', 'description']}
 				>
 					<TextareaMedium
+						data-testid="alert-description-input"
 						onChange={(e): void => {
 							setAlertDef({
 								...alertDef,

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -105,7 +105,7 @@ function QuerySection({
 		{
 			label: (
 				<Tooltip title="Query Builder">
-					<Button className="nav-btns">
+					<Button className="nav-btns" data-testid="query-builder-tab">
 						<Atom size={14} />
 						<Typography.Text>Query Builder</Typography.Text>
 					</Button>
@@ -122,7 +122,11 @@ function QuerySection({
 							: 'ClickHouse'
 					}
 				>
-					<Button className="nav-btns" disabled={isAnomalyDetection}>
+					<Button
+						className="nav-btns"
+						disabled={isAnomalyDetection}
+						data-testid="clickhouse-tab"
+					>
 						<Terminal size={14} />
 						<Typography.Text>ClickHouse Query</Typography.Text>
 					</Button>
@@ -162,7 +166,11 @@ function QuerySection({
 								: 'ClickHouse'
 						}
 					>
-						<Button className="nav-btns" disabled={isAnomalyDetection}>
+						<Button
+							className="nav-btns"
+							disabled={isAnomalyDetection}
+							data-testid="clickhouse-tab"
+						>
 							<Terminal size={14} />
 							<Typography.Text>ClickHouse Query</Typography.Text>
 						</Button>
@@ -180,7 +188,11 @@ function QuerySection({
 								: 'PromQL'
 						}
 					>
-						<Button className="nav-btns" disabled={isAnomalyDetection}>
+						<Button
+							className="nav-btns"
+							disabled={isAnomalyDetection}
+							data-testid="promql-tab"
+						>
 							<PromQLIcon
 								fillColor={isDarkMode ? Color.BG_VANILLA_200 : Color.BG_INK_300}
 							/>

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -80,6 +80,7 @@ function RuleOptions({
 			defaultValue={defaultCompareOp}
 			value={alertDef.condition?.op}
 			style={{ minWidth: '120px' }}
+			data-testid="alert-threshold-op-select"
 			onChange={(value: string | unknown): void => {
 				const newOp = (value as string) || '';
 
@@ -116,6 +117,7 @@ function RuleOptions({
 			defaultValue={defaultMatchType}
 			style={{ minWidth: '130px' }}
 			value={alertDef.condition?.matchType}
+			data-testid="alert-threshold-match-type-select-v1"
 			onChange={(value: string | unknown): void => handleMatchOptChange(value)}
 		>
 			<Select.Option value="1">{t('option_atleastonce')}</Select.Option>
@@ -177,6 +179,7 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
+			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -194,6 +197,7 @@ function RuleOptions({
 			style={{ minWidth: '120px' }}
 			value={alertDef.evalWindow}
 			onChange={onChangeEvalWindow}
+			data-testid="alert-eval-window-select"
 		>
 			<Select.Option value="5m0s">{t('option_5min')}</Select.Option>
 			<Select.Option value="10m0s">{t('option_10min')}</Select.Option>
@@ -395,6 +399,7 @@ function RuleOptions({
 									value={alertDef?.condition?.target}
 									onChange={onChange}
 									type="number"
+									data-testid="alert-threshold-target-input"
 									onWheel={(e): void => e.currentTarget.blur()}
 								/>
 							</Form.Item>

frontend/src/container/FormAlertRules/index.tsx

@@ -844,8 +844,6 @@ function FormAlertRules({
 
 	return (
 		<>
-			{Element}
-
 			<div
 				id="top"
 				className={`form-alert-rules-container ${
@@ -968,6 +966,7 @@ function FormAlertRules({
 								!isChannelConfigurationValid ||
 								queryStatus === 'error'
 							}
+							data-testid="alert-save-button"
 						>
 							{isNewRule ? t('button_createrule') : t('button_savechanges')}
 						</ActionButton>
@@ -981,6 +980,7 @@ function FormAlertRules({
 							}
 							type="default"
 							onClick={onTestRuleHandler}
+							data-testid="alert-test-button"
 						>
 							{' '}
 							{t('button_testrule')}
@@ -989,6 +989,7 @@ function FormAlertRules({
 							disabled={loading || false}
 							type="default"
 							onClick={onCancelHandler}
+							data-testid="alert-cancel-button"
 						>
 							{isNewRule && t('button_cancelchanges')}
 							{ruleId && !isEmpty(ruleId) && t('button_discard')}
@@ -998,6 +999,7 @@ function FormAlertRules({
 			</div>
 
 			<ConfirmDialog
+				testId="alert-save-confirm-dialog"
 				open={isConfirmSaveOpen}
 				onOpenChange={setIsConfirmSaveOpen}
 				title={t('confirm_save_title')}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -174,6 +174,7 @@ function LabelSelect({
 
 			<div style={{ display: 'flex', width: '100%' }}>
 				<Input
+					data-testid="alert-labels-input-v1"
 					placeholder={renderPlaceholder()}
 					onChange={handleLabelChange}
 					onKeyUp={(e): void => {

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import QuickFilters from 'components/QuickFilters/QuickFilters';
+import { QuickFiltersSource } from 'components/QuickFilters/types';
+import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import K8sBaseDetails from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
+import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
+import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
+import {
+	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringPageListing,
+} from 'container/InfraMonitoringK8s/hooks';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { useAppContext } from 'providers/App/App';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import {
+	fetchHostEntityData,
+	fetchHostListData,
+	getHostMetricsQueryPayload,
+	hostDetailsMetadataConfig,
+	hostGetEntityName,
+	hostGetSelectedItemFilters,
+	hostInitialEventsFilter,
+	hostInitialLogTracesFilter,
+	hostWidgetInfo,
+} from './constants';
+import {
+	getHostItemKey,
+	getHostRowKey,
+	hostColumnsConfig,
+} from './table.config';
+import { getHostsQuickFiltersConfig } from './utils';
+
+import styles from './InfraMonitoringHosts.module.scss';
+import { ArrowUpToLine, Filter } from '@signozhq/icons';
+
+function Hosts(): JSX.Element {
+	const [showFilters, setShowFilters] = useState(true);
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
+	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
+
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const { currentQuery } = useQueryBuilder();
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query: currentQuery.builder.queryData[0],
+		entityVersion: '',
+	});
+
+	// Track previous urlFilters to only sync when the value actually changes
+	// (not when handleChangeQueryData changes due to query updates)
+	const prevUrlFiltersRef = useRef<string | null>(null);
+
+	useEffect(() => {
+		const currentFiltersJson = urlFilters ? JSON.stringify(urlFilters) : null;
+
+		// Only sync if urlFilters value has actually changed
+		if (prevUrlFiltersRef.current !== currentFiltersJson) {
+			prevUrlFiltersRef.current = currentFiltersJson;
+			// Sync filters to query builder, using empty filter when urlFilters is null
+			handleChangeQueryData('filters', urlFilters || { items: [], op: 'and' });
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [urlFilters]); // handleChangeQueryData intentionally omitted - we call the current version but don't re-run when it changes
+
+	const handleFilterVisibilityChange = (): void => {
+		setShowFilters(!showFilters);
+	};
+
+	const handleQuickFiltersChange = (query: Query): void => {
+		const filters = query.builder.queryData[0].filters;
+		// Nuqs batches these calls into a single URL update
+		// The useEffect will sync filters to query builder
+		setUrlFilters(filters || null);
+		setCurrentPage(1);
+		logEvent(InfraMonitoringEvents.FilterApplied, {
+			entity: InfraMonitoringEvents.HostEntity,
+			page: InfraMonitoringEvents.ListPage,
+		});
+	};
+
+	const fetchListData = useCallback(
+		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
+			filters.orderBy ||= {
+				columnName: 'cpu',
+				order: 'desc',
+			};
+
+			return fetchHostListData(filters, signal);
+		},
+		[],
+	);
+
+	const fetchEntityData = useCallback(
+		async (
+			filters: Parameters<typeof fetchHostEntityData>[0],
+			signal?: AbortSignal,
+		) => fetchHostEntityData(filters, signal),
+		[],
+	);
+
+	const getSelectedItemFilters = useCallback(
+		(selectedItem: string) =>
+			hostGetSelectedItemFilters(selectedItem, dotMetricsEnabled),
+		[dotMetricsEnabled],
+	);
+
+	const getInitialLogTracesFilters = useCallback(
+		(host: import('api/infraMonitoring/getHostLists').HostData) =>
+			hostInitialLogTracesFilter(host, dotMetricsEnabled),
+		[dotMetricsEnabled],
+	);
+
+	const controlListPrefix = !showFilters ? (
+		<div className={styles.quickFiltersToggleContainer}>
+			<Button
+				className="periscope-btn ghost"
+				type="text"
+				size="small"
+				onClick={handleFilterVisibilityChange}
+			>
+				<Filter size={14} />
+			</Button>
+		</div>
+	) : undefined;
+
+	return (
+		<>
+			<div className={styles.infraMonitoringContainer}>
+				<div className={styles.infraContentRow}>
+					{showFilters && (
+						<div className={styles.quickFiltersContainer}>
+							<div className={styles.quickFiltersContainerHeader}>
+								<Typography.Text>Filters</Typography.Text>
+								<Tooltip title="Collapse Filters">
+									<ArrowUpToLine
+										style={{ rotate: '270deg', cursor: 'pointer' }}
+										onClick={handleFilterVisibilityChange}
+										size="md"
+									/>
+								</Tooltip>
+							</div>
+							<QuickFilters
+								source={QuickFiltersSource.INFRA_MONITORING}
+								config={getHostsQuickFiltersConfig(dotMetricsEnabled)}
+								handleFilterVisibilityChange={handleFilterVisibilityChange}
+								onFilterChange={handleQuickFiltersChange}
+							/>
+						</div>
+					)}
+					<div
+						className={`${styles.listContainer}${
+							showFilters ? ` ${styles.listContainerFiltersVisible}` : ''
+						}`}
+					>
+						<K8sBaseList
+							controlListPrefix={controlListPrefix}
+							entity={InfraMonitoringEntity.HOSTS}
+							tableColumns={hostColumnsConfig}
+							fetchListData={fetchListData}
+							getRowKey={getHostRowKey}
+							getItemKey={getHostItemKey}
+							eventCategory={InfraMonitoringEvents.HostEntity}
+						/>
+					</div>
+				</div>
+			</div>
+			<K8sBaseDetails
+				category={InfraMonitoringEntity.HOSTS}
+				eventCategory={InfraMonitoringEvents.HostEntity}
+				getSelectedItemFilters={getSelectedItemFilters}
+				fetchEntityData={fetchEntityData}
+				getEntityName={hostGetEntityName}
+				getInitialLogTracesFilters={getInitialLogTracesFilters}
+				getInitialEventsFilters={hostInitialEventsFilter}
+				metadataConfig={hostDetailsMetadataConfig}
+				entityWidgetInfo={hostWidgetInfo}
+				getEntityQueryPayload={getHostMetricsQueryPayload}
+				queryKeyPrefix="hosts"
+				tabsConfig={{
+					showEvents: false,
+				}}
+			/>
+		</>
+	);
+}
+
+export default Hosts;

frontend/src/container/InfraMonitoringHosts/InfraMonitoringHosts.module.scss

@@ -0,0 +1,175 @@
+.infraMonitoringContainer {
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+}
+
+.infraContentRow {
+	display: flex;
+	flex-direction: row;
+	height: calc(100vh - 45px);
+	width: 100%;
+	position: relative;
+	overflow-y: auto;
+
+	:global(.periscope-btn) {
+		&.ghost:not(:disabled) {
+			border: none;
+			background: transparent;
+
+			&:hover {
+				background: transparent;
+				color: var(--bg-robin-500) !important;
+				font-weight: 500;
+			}
+		}
+	}
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+		height: 0.1rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--accent-primary);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	}
+}
+
+.quickFiltersContainer {
+	width: 280px;
+	min-width: 280px;
+	border-right: 1px solid var(--l1-border);
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 0.1rem;
+		height: 0.1rem;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--accent-primary);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+	}
+
+	:global(.ant-collapse-header) {
+		border-bottom: 1px solid var(--l1-border);
+		padding: 12px 8px;
+	}
+
+	:global(.ant-collapse-content-box) {
+		padding: 0 !important;
+		padding-block: 0 !important;
+
+		:global(.quick-filters .checkbox-filter) {
+			padding-left: 18px;
+		}
+	}
+
+	:global(.quick-filters) {
+		overflow-y: auto;
+		overflow-x: hidden;
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+			height: 0.1rem;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--accent-primary);
+		}
+
+		&::-webkit-scrollbar-thumb:hover {
+			background: colox-mix(var(--accent-primary), var(--bg-vanilla-100), 20%);
+		}
+	}
+}
+
+.quickFiltersContainerHeader {
+	padding: 8px;
+	border-bottom: 1px solid var(--l1-border);
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.listContainer {
+	flex: 1;
+	min-width: 0;
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+
+	> * {
+		min-width: 0;
+		max-width: 100%;
+		box-sizing: border-box;
+	}
+
+	> :global(.ant-table-wrapper) {
+		width: 100%;
+		max-width: 100%;
+
+		:global(.ant-spin-container) {
+			display: flex !important;
+			flex-direction: column;
+		}
+
+		:global(.ant-table),
+		:global(.ant-table-container) {
+			max-width: 100%;
+		}
+	}
+}
+
+.listContainerFiltersVisible {
+	max-width: calc(100% - 280px);
+}
+
+.quickFiltersToggleContainer {
+	padding: 0 8px;
+}
+
+.infraMonitoringTags {
+	width: fit-content;
+	font-family: Inter;
+	font-size: 11px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 18px;
+	letter-spacing: 0.44px;
+	text-transform: uppercase;
+	border-radius: 50px;
+	padding: 2px 8px;
+}
+
+.tagsActive {
+	color: var(--bg-forest-500, #25e192);
+	border: 1px solid rgba(37, 225, 146, 0.2);
+	background: rgba(37, 225, 146, 0.1);
+}
+
+.tagsInactive {
+	color: var(--bg-slate-50, #62687c);
+	border: 1px solid rgba(98, 104, 124, 0.2);
+	background: rgba(98, 104, 124, 0.1);
+}

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Badge } from '@signozhq/ui/badge';
+import { Progress } from '@signozhq/ui/progress';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	getHostLists,
+	HostData,
+	HostListPayload,
+} from 'api/infraMonitoring/getHostLists';
+import {
+	createFilterItem,
+	K8sDetailsFilters,
+	K8sDetailsMetadataConfig,
+} from 'container/InfraMonitoringK8s/Base/K8sBaseDetails';
+import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
+import {
+	getHostQueryPayload,
+	hostWidgetInfo,
+} from 'container/LogDetailedView/InfraMetrics/constants';
+import {
+	TagFilter,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+
+import { getHostListsQuery } from './utils';
+
+import infraHostsStyles from './InfraMonitoringHosts.module.scss';
+
+export function getProgressColor(percent: number): string {
+	if (percent >= 90) {
+		return Color.BG_SAKURA_500;
+	}
+	if (percent >= 60) {
+		return Color.BG_AMBER_500;
+	}
+	return Color.BG_FOREST_500;
+}
+
+export function getMemoryProgressColor(percent: number): string {
+	if (percent >= 90) {
+		return Color.BG_CHERRY_500;
+	}
+	if (percent >= 60) {
+		return Color.BG_AMBER_500;
+	}
+	return Color.BG_FOREST_500;
+}
+
+export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
+	{
+		label: 'STATUS',
+		getValue: (h): string => (h.active ? 'ACTIVE' : 'INACTIVE'),
+		render: (value, h): React.ReactNode => (
+			<Badge
+				variant="outline"
+				className={`${infraHostsStyles.infraMonitoringTags} ${
+					h.active ? infraHostsStyles.tagsActive : infraHostsStyles.tagsInactive
+				}`}
+			>
+				{value}
+			</Badge>
+		),
+	},
+	{
+		label: 'OPERATING SYSTEM',
+		getValue: (h): string => h.os || '-',
+		render: (value): React.ReactNode =>
+			value !== '-' ? (
+				<Badge variant="outline" className={infraHostsStyles.infraMonitoringTags}>
+					{value}
+				</Badge>
+			) : (
+				<Typography.Text>-</Typography.Text>
+			),
+	},
+	{
+		label: 'CPU USAGE',
+		getValue: (h): number => h.cpu * 100,
+		render: (value): React.ReactNode => (
+			<Progress
+				percent={Number(Number(value).toFixed(1))}
+				strokeColor={getProgressColor(Number(value))}
+				showInfo
+			/>
+		),
+	},
+	{
+		label: 'MEMORY USAGE',
+		getValue: (h): number => h.memory * 100,
+		render: (value): React.ReactNode => (
+			<Progress
+				percent={Number(Number(value).toFixed(1))}
+				strokeColor={getMemoryProgressColor(Number(value))}
+				showInfo
+			/>
+		),
+	},
+];
+
+export function getHostMetricsQueryPayload(
+	host: HostData,
+	start: number,
+	end: number,
+	dotMetricsEnabled: boolean,
+): ReturnType<typeof getHostQueryPayload> {
+	return getHostQueryPayload(host.hostName, start, end, dotMetricsEnabled);
+}
+
+export { hostWidgetInfo };
+
+export function hostGetSelectedItemFilters(
+	selectedItem: string,
+	dotMetricsEnabled: boolean,
+): TagFilter {
+	const hostKey = dotMetricsEnabled ? 'host.name' : 'host_name';
+	return {
+		op: 'AND',
+		items: [createFilterItem(hostKey, selectedItem)],
+	};
+}
+
+export function hostInitialLogTracesFilter(
+	host: HostData,
+	dotMetricsEnabled: boolean,
+): TagFilterItem[] {
+	const hostKey = dotMetricsEnabled ? 'host.name' : 'host_name';
+	return [createFilterItem(hostKey, host.hostName || '')];
+}
+
+export function hostInitialEventsFilter(_host: HostData): TagFilterItem[] {
+	return [];
+}
+
+export const hostGetEntityName = (host: HostData): string => host.hostName;
+
+export async function fetchHostListData(
+	filters: K8sBaseFilters,
+	signal?: AbortSignal,
+): Promise<{
+	data: HostData[];
+	total: number;
+	error?: string | null;
+	rawData?: unknown;
+}> {
+	const baseQuery = getHostListsQuery();
+	const payload: HostListPayload = {
+		...baseQuery,
+		limit: filters.limit,
+		offset: filters.offset,
+		filters: filters.filters ?? { items: [], op: 'and' },
+		orderBy: filters.orderBy,
+		start: filters.start,
+		end: filters.end,
+		groupBy: filters.groupBy ?? [],
+	};
+
+	const response = await getHostLists(payload, signal);
+
+	return {
+		data: response.payload?.data?.records || [],
+		total: response.payload?.data?.total || 0,
+		error: response.error,
+		rawData: response.payload?.data,
+	};
+}
+
+export async function fetchHostEntityData(
+	filters: K8sDetailsFilters,
+	signal?: AbortSignal,
+): Promise<{ data: HostData | null; error?: string | null }> {
+	const response = await getHostLists(
+		{
+			...getHostListsQuery(),
+			filters: filters.filters,
+			start: filters.start,
+			end: filters.end,
+			limit: 1,
+			offset: 0,
+			groupBy: [],
+		},
+		signal,
+	);
+
+	const records = response.payload?.data?.records || [];
+
+	return {
+		data: records.length > 0 ? records[0] : null,
+		error: response.error,
+	};
+}

frontend/src/container/InfraMonitoringHosts/index.tsx

@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+import * as Sentry from '@sentry/react';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { DataSource } from 'types/common/queryBuilder';
+
+import Hosts from './Hosts';
+
+function InfraMonitoringHosts(): JSX.Element {
+	const {
+		updateAllQueriesOperators,
+		handleSetConfig,
+		setSupersetQuery,
+		setLastUsedQuery,
+		currentQuery,
+		resetQuery,
+	} = useQueryBuilder();
+
+	useEffect(() => {
+		const newQuery = updateAllQueriesOperators(
+			initialQueriesMap.metrics,
+			PANEL_TYPES.TIME_SERIES,
+			DataSource.METRICS,
+		);
+
+		setSupersetQuery(newQuery);
+		setLastUsedQuery(0);
+		handleSetConfig(PANEL_TYPES.TIME_SERIES, DataSource.METRICS);
+
+		return (): void => {
+			setLastUsedQuery(0);
+		};
+	}, [
+		updateAllQueriesOperators,
+		setSupersetQuery,
+		setLastUsedQuery,
+		handleSetConfig,
+	]);
+
+	useEffect(() => {
+		const updatedCurrentQuery = {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						filters: {
+							items: [],
+							op: 'AND',
+						},
+					},
+				],
+			},
+		};
+
+		resetQuery(updatedCurrentQuery);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	return (
+		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
+			<Hosts />
+		</Sentry.ErrorBoundary>
+	);
+}
+
+export default InfraMonitoringHosts;

frontend/src/container/InfraMonitoringHosts/table.config.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
+import { HostData } from 'api/infraMonitoring/getHostLists';
+import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
+import { getGroupByEl } from 'container/InfraMonitoringK8s/Base/utils';
+import {
+	EntityProgressBar,
+	ExpandButtonWrapper,
+	ValidateColumnValueWrapper,
+} from 'container/InfraMonitoringK8s/components';
+import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
+import { useInfraMonitoringGroupBy } from 'container/InfraMonitoringK8s/hooks';
+import EntityGroupHeader from 'container/InfraMonitoringK8s/Base/EntityGroupHeader';
+
+import { HostnameCell } from './utils';
+
+import styles from './table.module.scss';
+import { Container, Info } from '@signozhq/icons';
+
+function hostRowSource(host: HostData): { meta: Record<string, string> } {
+	return {
+		meta: {
+			...(host.meta ?? {}),
+			host_name: host.hostName ?? '',
+			'host.name': host.hostName ?? '',
+			os_type: host.os ?? '',
+			'os.type': host.os ?? '',
+		},
+	};
+}
+
+export function getHostRowKey(host: HostData): string {
+	return host.hostName || 'unknown';
+}
+
+export function getHostItemKey(host: HostData): string {
+	return host.hostName ?? '';
+}
+
+function HostGroupCell({ row }: { row: HostData }): JSX.Element {
+	const [groupBy] = useInfraMonitoringGroupBy();
+	const synthetic = hostRowSource(row);
+	return getGroupByEl(synthetic, groupBy) as JSX.Element;
+}
+
+export const hostColumnsConfig: TableColumnDef<HostData>[] = [
+	{
+		id: 'hostGroup',
+		header: (): React.ReactNode => <EntityGroupHeader title="HOST GROUP" />,
+		accessorFn: (row): string => row.hostName ?? '',
+		width: { min: 300 },
+		enableSort: false,
+		enableRemove: false,
+		enableMove: false,
+		pin: 'left',
+		visibilityBehavior: 'hidden-on-collapse',
+		cell: ({ row, isExpanded, toggleExpanded }): React.ReactNode => (
+			<ExpandButtonWrapper isExpanded={isExpanded} toggleExpanded={toggleExpanded}>
+				<HostGroupCell row={row} />
+			</ExpandButtonWrapper>
+		),
+	},
+	{
+		id: 'hostName',
+		header: (): React.ReactNode => (
+			<EntityGroupHeader title="Hostname" icon={<Container size={14} />} />
+		),
+		accessorFn: (row): string => row.hostName ?? '',
+		width: { min: 290 },
+		enableSort: false,
+		enableRemove: false,
+		enableMove: false,
+		pin: 'left',
+		visibilityBehavior: 'hidden-on-expand',
+		cell: ({ value }): React.ReactNode => (
+			<HostnameCell hostName={value as string} />
+		),
+	},
+	{
+		id: 'active',
+		header: (): React.ReactNode => (
+			<div className={styles.statusHeader}>
+				Status
+				<Tooltip title="Sent system metrics in last 10 mins">
+					<Info size="md" />
+				</Tooltip>
+			</div>
+		),
+		accessorFn: (row): boolean => row.active,
+		width: { min: 150, default: 150 },
+		enableSort: false,
+		cell: ({ value }): React.ReactNode => {
+			const active = value as boolean;
+			return (
+				<Badge
+					className={`${styles.statusTag} ${
+						active ? styles.statusTagActive : styles.statusTagInactive
+					}`}
+				>
+					{active ? 'ACTIVE' : 'INACTIVE'}
+				</Badge>
+			);
+		},
+	},
+	{
+		id: 'cpu',
+		header: (): React.ReactNode => (
+			<div className={styles.columnHeaderRight}>CPU Usage</div>
+		),
+		accessorFn: (row): number => row.cpu,
+		width: { min: 220 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const cpu = value as number;
+			return (
+				<div className={styles.progressContainer}>
+					<ValidateColumnValueWrapper
+						value={cpu}
+						entity={InfraMonitoringEntity.HOSTS}
+						attribute="CPU metric"
+					>
+						<EntityProgressBar value={cpu} type="cpu" />
+					</ValidateColumnValueWrapper>
+				</div>
+			);
+		},
+	},
+	{
+		id: 'memory',
+		header: (): React.ReactNode => (
+			<div className={`${styles.columnHeaderRight} ${styles.memoryUsageHeader}`}>
+				Memory Usage
+				<Tooltip title="Excluding cache memory">
+					<Info size="md" />
+				</Tooltip>
+			</div>
+		),
+		accessorFn: (row): number => row.memory,
+		width: { min: 220 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const memory = value as number;
+			return (
+				<div className={styles.progressContainer}>
+					<ValidateColumnValueWrapper
+						value={memory}
+						entity={InfraMonitoringEntity.HOSTS}
+						attribute="memory metric"
+					>
+						<EntityProgressBar value={memory} type="memory" />
+					</ValidateColumnValueWrapper>
+				</div>
+			);
+		},
+	},
+	{
+		id: 'wait',
+		header: (): React.ReactNode => (
+			<div className={styles.columnHeaderRight}>IOWait</div>
+		),
+		accessorFn: (row): number => row.wait,
+		width: { min: 100, default: 100 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const wait = value as number;
+
+			return (
+				<ValidateColumnValueWrapper
+					value={wait}
+					entity={InfraMonitoringEntity.HOSTS}
+					attribute="IOWait metric"
+				>
+					<TanStackTable.Text>{`${Number((wait * 100).toFixed(1))}%`}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'load15',
+		header: (): React.ReactNode => (
+			<div className={styles.columnHeaderRight}>Load Avg</div>
+		),
+		accessorFn: (row): number => row.load15,
+		width: { min: 100, default: 100 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const load15 = value as number;
+
+			return (
+				<ValidateColumnValueWrapper
+					value={load15}
+					entity={InfraMonitoringEntity.HOSTS}
+					attribute="load average metric"
+				>
+					<TanStackTable.Text>{load15}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+];

frontend/src/container/InfraMonitoringHosts/table.module.scss

@@ -0,0 +1,68 @@
+.entityGroupHeader {
+	padding-left: var(--spacing-5);
+	gap: var(--spacing-5);
+	display: flex;
+	align-items: center;
+}
+
+.hostnameColumnHeader {
+	display: block;
+}
+
+.statusHeader {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-2);
+	width: 100%;
+}
+
+.columnHeaderRight {
+	text-align: right;
+}
+
+.memoryUsageHeader {
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: var(--spacing-2);
+	width: 100%;
+}
+
+.statusTag {
+	width: fit-content;
+	font-family: Inter, sans-serif;
+	font-size: 11px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 18px;
+	letter-spacing: 0.44px;
+	text-transform: uppercase;
+	border-radius: 50px;
+	padding: 2px 8px;
+}
+
+.statusTagActive {
+	color: var(--Forest-500, #25e192);
+	border: 1px solid rgba(37, 225, 146, 0.2);
+	background: rgba(37, 225, 146, 0.1);
+}
+
+.statusTagInactive {
+	color: var(--Slate-50, #62687c);
+	border: 1px solid rgba(98, 104, 124, 0.2);
+	background: rgba(98, 104, 124, 0.1);
+}
+
+.progressContainer {
+	display: flex;
+	align-items: center;
+
+	& > div {
+		width: 100%;
+	}
+}
+
+.progressBar {
+	flex: 1;
+	margin-right: 8px;
+}

frontend/src/container/InfraMonitoringHosts/utils.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { HostListPayload } from 'api/infraMonitoring/getHostLists';
+import {
+	FiltersType,
+	IQuickFiltersConfig,
+} from 'components/QuickFilters/types';
+import { TriangleAlert } from '@signozhq/icons';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+const HOSTNAME_DOCS_URL =
+	'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/#host-name-is-blankempty';
+
+export function HostnameCell({
+	hostName,
+}: {
+	hostName?: string | null;
+}): React.ReactElement {
+	const isEmpty = !hostName || !hostName.trim();
+	if (!isEmpty) {
+		return <div className="hostname-column-value">{hostName}</div>;
+	}
+	return (
+		<div className="hostname-cell-missing">
+			<Typography.Text color="muted" className="hostname-cell-placeholder">
+				-
+			</Typography.Text>
+			<Tooltip
+				title={
+					<div>
+						Missing host.name metadata.
+						<br />
+						<a
+							href={HOSTNAME_DOCS_URL}
+							target="_blank"
+							rel="noopener noreferrer"
+							onClick={(e): void => e.stopPropagation()}
+						>
+							Learn how to configure →
+						</a>
+					</div>
+				}
+				trigger={['hover', 'focus']}
+			>
+				<span
+					className="hostname-cell-warning-icon"
+					tabIndex={0}
+					role="img"
+					aria-label="Missing host.name metadata"
+					onClick={(e): void => e.stopPropagation()}
+					onKeyDown={(e): void => {
+						if (e.key === 'Enter' || e.key === ' ') {
+							e.stopPropagation();
+						}
+					}}
+				>
+					<TriangleAlert size={14} color={Color.BG_CHERRY_500} />
+				</span>
+			</Tooltip>
+		</div>
+	);
+}
+
+export const getHostListsQuery = (): HostListPayload => ({
+	filters: {
+		items: [],
+		op: 'and',
+	},
+	groupBy: [],
+	orderBy: { columnName: 'cpu', order: 'desc' },
+});
+
+export const HostsQuickFiltersConfig: IQuickFiltersConfig[] = [
+	{
+		type: FiltersType.CHECKBOX,
+		title: 'Host Name',
+		attributeKey: {
+			key: 'host_name',
+			dataType: DataTypes.String,
+			type: 'resource',
+		},
+		aggregateOperator: 'noop',
+		aggregateAttribute: 'system_cpu_load_average_15m',
+		dataSource: DataSource.METRICS,
+		defaultOpen: true,
+	},
+	{
+		type: FiltersType.CHECKBOX,
+		title: 'OS Type',
+		attributeKey: {
+			key: 'os_type',
+			dataType: DataTypes.String,
+			type: 'resource',
+		},
+		aggregateOperator: 'noop',
+		aggregateAttribute: 'system_cpu_load_average_15m',
+		dataSource: DataSource.METRICS,
+		defaultOpen: true,
+	},
+];
+
+export function getHostsQuickFiltersConfig(
+	dotMetricsEnabled: boolean,
+): IQuickFiltersConfig[] {
+	const hostNameKey = dotMetricsEnabled ? 'host.name' : 'host_name';
+	const osTypeKey = dotMetricsEnabled ? 'os.type' : 'os_type';
+	const metricName = dotMetricsEnabled
+		? 'system.cpu.load_average.15m'
+		: 'system_cpu_load_average_15m';
+
+	const environmentKey = dotMetricsEnabled
+		? 'deployment.environment'
+		: 'deployment_environment';
+
+	return [
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Host Name',
+			attributeKey: {
+				key: hostNameKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+			},
+			aggregateOperator: 'noop',
+			aggregateAttribute: metricName,
+			dataSource: DataSource.METRICS,
+			defaultOpen: true,
+		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'OS Type',
+			attributeKey: {
+				key: osTypeKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+			},
+			aggregateOperator: 'noop',
+			aggregateAttribute: metricName,
+			dataSource: DataSource.METRICS,
+			defaultOpen: true,
+		},
+		{
+			type: FiltersType.CHECKBOX,
+			title: 'Environment',
+			attributeKey: {
+				key: environmentKey,
+				dataType: DataTypes.String,
+				type: 'resource',
+			},
+			defaultOpen: true,
+		},
+	];
+}

frontend/src/container/InfraMonitoringHostsV2/Hosts.tsx

@@ -17,7 +17,11 @@ import {
 	QuickFilterChangeEventData,
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
-import { InfraMonitoringEvents } from 'constants/events';
+import {
+	InfraMonitoringEvents,
+	logInfraFilterCustomizedEvent,
+	logInfraMonitoringListViewedEvent,
+} from 'constants/events';
 import { initialQueriesMap } from 'constants/queryBuilder';
 import K8sBaseDetails, {
 	K8sDetailsFilters,
@@ -53,10 +57,6 @@ import styles from './InfraMonitoringHosts.module.scss';
 import { ArrowUpToLine, Filter } from '@signozhq/icons';
 import { NANO_SECOND_MULTIPLIER, useGlobalTimeStore } from 'store/globalTime';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import {
-	logInfraFilterCustomizedEvent,
-	logInfraMonitoringListViewedEvent,
-} from 'container/InfraMonitoringK8sV2/Base/events';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
@@ -140,7 +140,6 @@ function Hosts(): JSX.Element {
 					records: data.records,
 					total: data.total,
 					endTimeBeforeRetention: data.endTimeBeforeRetention,
-					warning: data.warning,
 				};
 			} catch (error) {
 				return {

frontend/src/container/InfraMonitoringHostsV2/StatusFilter.tsx

@@ -1,4 +1,5 @@
 import { ToggleGroup, ToggleGroupItem } from '@signozhq/ui/toggle-group';
+import { logInfraFilterCustomizedEvent } from 'constants/events';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
 import {
 	StatusFilterValue,
@@ -8,7 +9,6 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 
 import styles from './StatusFilter.module.scss';
-import { logInfraFilterCustomizedEvent } from 'container/InfraMonitoringK8sV2/Base/events';
 
 const statusOptions: Array<{
 	label: string;

frontend/src/container/InfraMonitoringHostsV2/constants.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Progress } from '@signozhq/ui/progress';
 import {
@@ -9,7 +10,6 @@ import { K8sDetailsMetadataConfig } from 'container/InfraMonitoringK8sV2/Base/K8
 import { INFRA_MONITORING_ATTR_KEYS } from 'container/InfraMonitoringK8sV2/constants';
 import { formatValueForExpression } from 'components/QueryBuilderV2/utils';
 import { TextNoData } from 'container/InfraMonitoringK8sV2/components';
-import { getStrokeColorForPercent } from 'container/InfraMonitoringK8sV2/components/EntityProgressBar.utils';
 import { SelectedItemParams } from 'container/InfraMonitoringK8sV2/hooks';
 import {
 	getHostQueryPayload,
@@ -18,6 +18,26 @@ import {
 
 import infraHostsStyles from './InfraMonitoringHosts.module.scss';
 
+export function getProgressColor(percent: number): string {
+	if (percent >= 90) {
+		return Color.BG_SAKURA_500;
+	}
+	if (percent >= 60) {
+		return Color.BG_AMBER_500;
+	}
+	return Color.BG_FOREST_500;
+}
+
+export function getMemoryProgressColor(percent: number): string {
+	if (percent >= 90) {
+		return Color.BG_CHERRY_500;
+	}
+	if (percent >= 60) {
+		return Color.BG_AMBER_500;
+	}
+	return Color.BG_FOREST_500;
+}
+
 export type HostDetailMetadataConfigType =
 	K8sDetailsMetadataConfig<InframonitoringtypesHostRecordDTO>;
 export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
@@ -59,7 +79,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getStrokeColorForPercent('cpu', Number(value))}
+				strokeColor={getProgressColor(Number(value))}
 				showInfo
 			/>
 		),
@@ -70,7 +90,7 @@ export const hostDetailsMetadataConfig: HostDetailMetadataConfigType[] = [
 		render: (value): React.ReactNode => (
 			<Progress
 				percent={Number(Number(value).toFixed(1))}
-				strokeColor={getStrokeColorForPercent('memory', Number(value))}
+				strokeColor={getMemoryProgressColor(Number(value))}
 				showInfo
 			/>
 		),

frontend/src/container/InfraMonitoringHostsV2/table.config.tsx

@@ -9,7 +9,6 @@ import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { getGroupByEl } from 'container/InfraMonitoringK8sV2/Base/utils';
 import {
 	EntityProgressBar,
-	EntityProgressThresholds,
 	ExpandButtonWrapper,
 	GroupedStatusCounts,
 	ValidateColumnValueWrapper,
@@ -99,7 +98,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		),
 	},
 	{
-		id: INFRA_MONITORING_ATTR_KEYS.HOST_NAME,
+		id: 'hostName',
 		header: (): React.ReactNode => (
 			<EntityGroupHeader
 				title="Hostname"
@@ -109,7 +108,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		),
 		accessorFn: (row): string => row.hostName ?? '',
 		width: { min: 290 },
-		enableSort: true,
+		enableSort: false,
 		enableRemove: false,
 		enableMove: false,
 		pin: 'left',
@@ -169,10 +168,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 	{
 		id: 'cpu',
 		header: (): React.ReactNode => (
-			<ColumnHeader
-				docPath="/infrastructure-monitoring/host-monitoring#cpu-usage"
-				tooltip={<EntityProgressThresholds type="cpu" />}
-			>
+			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#cpu-usage">
 				CPU Usage
 			</ColumnHeader>
 		),
@@ -199,9 +195,7 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		id: 'memory',
 		header: (): React.ReactNode => (
 			<ColumnHeader
-				tooltip={
-					<EntityProgressThresholds type="memory" note="Excluding cache memory." />
-				}
+				tooltip="Excluding cache memory."
 				docPath="/infrastructure-monitoring/host-monitoring#memory-usage"
 			>
 				Memory Usage (WSS)
@@ -227,12 +221,9 @@ export const hostColumnsConfig: HostColumnConfigType[] = [
 		},
 	},
 	{
-		id: 'disk_usage',
+		id: 'diskUsage',
 		header: (): React.ReactNode => (
-			<ColumnHeader
-				docPath="/infrastructure-monitoring/host-monitoring#disk-usage"
-				tooltip={<EntityProgressThresholds type="disk" />}
-			>
+			<ColumnHeader docPath="/infrastructure-monitoring/host-monitoring#disk-usage">
 				Disk Usage
 			</ColumnHeader>
 		),

frontend/src/container/InfraMonitoringK8s/Base/EntityGroupHeader.module.scss

@@ -0,0 +1,5 @@
+.entityGroupHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-5);
+}

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

@@ -0,0 +1,21 @@
+import { Group } from '@signozhq/icons';
+
+import styles from './EntityGroupHeader.module.scss';
+
+interface EntityGroupHeaderProps {
+	title: string;
+	icon?: React.ReactNode;
+}
+
+function EntityGroupHeader({
+	title,
+	icon,
+}: EntityGroupHeaderProps): JSX.Element {
+	return (
+		<div className={styles.entityGroupHeader}>
+			{icon || <Group size={14} data-hide-expanded="true" />} {title}
+		</div>
+	);
+}
+
+export default EntityGroupHeader;

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

@@ -0,0 +1,666 @@
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { useQuery } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Color, Spacing } from '@signozhq/design-tokens';
+import { Button, Drawer, Tooltip } from 'antd';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
+import { Divider } from '@signozhq/ui/divider';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import { combineInitialAndUserExpression } from 'components/QueryBuilderV2/QueryV2/QuerySearch/utils';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
+import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import GetMinMax from 'lib/getMinMax';
+import {
+	BarChart,
+	ChevronsLeftRight,
+	Compass,
+	DraftingCompass,
+	ScrollText,
+	X,
+} from '@signozhq/icons';
+import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	TagFilter,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	LogsAggregatorOperator,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
+import { v4 as uuidv4 } from 'uuid';
+
+import { InfraMonitoringEntity, VIEW_TYPES } from '../constants';
+import EntityEvents from '../EntityDetailsUtils/EntityEvents';
+import EntityLogs from '../EntityDetailsUtils/EntityLogs';
+import { K8S_ENTITY_LOGS_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityLogs/hooks';
+import EntityMetrics from '../EntityDetailsUtils/EntityMetrics';
+import EntityTraces from '../EntityDetailsUtils/EntityTraces';
+import { K8S_ENTITY_TRACES_EXPRESSION_KEY } from '../EntityDetailsUtils/EntityTraces/hooks';
+import {
+	useInfraMonitoringEventsFilters,
+	useInfraMonitoringLogFilters,
+	useInfraMonitoringSelectedItem,
+	useInfraMonitoringTracesFilters,
+	useInfraMonitoringView,
+} from '../hooks';
+import LoadingContainer from '../LoadingContainer';
+
+import '../EntityDetailsUtils/entityDetails.styles.scss';
+import { parseAsString, useQueryState } from 'nuqs';
+
+const TimeRangeOffset = 1000000000;
+
+export interface K8sDetailsMetadataConfig<T> {
+	label: string;
+	getValue: (entity: T) => string | number;
+	render?: (value: string | number, entity: T) => React.ReactNode;
+}
+
+export interface K8sDetailsFilters {
+	filters: TagFilter;
+	start: number;
+	end: number;
+}
+
+export interface K8sBaseDetailsProps<T> {
+	category: InfraMonitoringEntity;
+	eventCategory: string;
+	// Data fetching configuration
+	getSelectedItemFilters: (selectedItem: string) => TagFilter;
+	fetchEntityData: (
+		filters: K8sDetailsFilters,
+		signal?: AbortSignal,
+	) => Promise<{ data: T | null; error?: string | null }>;
+	// Entity configuration
+	getEntityName: (entity: T) => string;
+	getInitialLogTracesFilters: (entity: T) => TagFilterItem[];
+	getInitialEventsFilters: (entity: T) => TagFilterItem[];
+	metadataConfig: K8sDetailsMetadataConfig<T>[];
+	entityWidgetInfo: {
+		title: string;
+		yAxisUnit: string;
+	}[];
+	getEntityQueryPayload: (
+		entity: T,
+		start: number,
+		end: number,
+		dotMetricsEnabled: boolean,
+	) => GetQueryResultsProps[];
+	queryKeyPrefix: string;
+	/** When true, only metrics are shown and the Metrics/Logs/Traces/Events tab bar is hidden. */
+	hideDetailViewTabs?: boolean;
+	tabsConfig?: {
+		showMetrics?: boolean;
+		showLogs?: boolean;
+		showTraces?: boolean;
+		showEvents?: boolean;
+	};
+	customTabs?: Array<{
+		key: string;
+		label: string;
+		icon: React.ReactNode;
+		render: (props: {
+			entity: T;
+			timeRange: { startTime: number; endTime: number };
+			selectedInterval: Time;
+			handleTimeChange: (
+				interval: Time | CustomTimeType,
+				dateTimeRange?: [number, number],
+			) => void;
+		}) => React.ReactNode;
+	}>;
+}
+
+export function createFilterItem(
+	key: string,
+	value: string,
+	dataType: DataTypes = DataTypes.String,
+): TagFilterItem {
+	return {
+		id: uuidv4(),
+		key: {
+			key,
+			dataType,
+			type: 'resource',
+			id: `${key}--string--resource--false`,
+		},
+		op: '=',
+		value,
+	};
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export default function K8sBaseDetails<T>({
+	category,
+	eventCategory,
+	getSelectedItemFilters,
+	fetchEntityData,
+	getEntityName,
+	getInitialLogTracesFilters,
+	getInitialEventsFilters,
+	metadataConfig,
+	entityWidgetInfo,
+	getEntityQueryPayload,
+	queryKeyPrefix,
+	hideDetailViewTabs = false,
+	tabsConfig,
+	customTabs,
+}: K8sBaseDetailsProps<T>): JSX.Element {
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
+	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
+	const getAutoRefreshQueryKey = useGlobalTimeStore(
+		(s) => s.getAutoRefreshQueryKey,
+	);
+
+	const isDarkMode = useIsDarkMode();
+
+	const [selectedItem, setSelectedItem] = useInfraMonitoringSelectedItem();
+
+	const entityQueryKey = useMemo(
+		() =>
+			getAutoRefreshQueryKey(
+				selectedTime,
+				`${queryKeyPrefix}EntityDetails`,
+				selectedItem,
+			),
+		[queryKeyPrefix, selectedItem, selectedTime, getAutoRefreshQueryKey],
+	);
+
+	const {
+		data: entityResponse,
+		isLoading: isEntityLoading,
+		isError: isEntityError,
+		error: entityError,
+	} = useQuery({
+		queryKey: entityQueryKey,
+		queryFn: ({ signal }) => {
+			if (!selectedItem) {
+				return { data: null };
+			}
+			const filters = getSelectedItemFilters(selectedItem);
+			const { minTime, maxTime } = getMinMaxTime();
+
+			return fetchEntityData(
+				{
+					filters,
+					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+				},
+				signal,
+			);
+		},
+		enabled: !!selectedItem,
+	});
+
+	const entity = entityResponse?.data ?? null;
+	const hasResponseError = !!entityResponse?.error;
+
+	const logsAndTracesInitialExpression = useMemo(() => {
+		if (!entity) {
+			return '';
+		}
+		const primaryFiltersOnly = {
+			op: 'AND' as const,
+			items: getInitialLogTracesFilters(entity),
+		};
+		return convertFiltersToExpression(primaryFiltersOnly).expression;
+	}, [entity, getInitialLogTracesFilters]);
+
+	const eventsInitialExpression = useMemo(() => {
+		if (!entity) {
+			return '';
+		}
+		const primaryFiltersOnly = {
+			op: 'AND' as const,
+			items: getInitialEventsFilters(entity),
+		};
+		return convertFiltersToExpression(primaryFiltersOnly).expression;
+	}, [entity, getInitialEventsFilters]);
+
+	const handleClose = useCallback((): void => {
+		setSelectedItem(null);
+	}, [setSelectedItem]);
+
+	const entityName = entity ? getEntityName(entity) : '';
+
+	// Content state (previously in K8sBaseDetailsContent)
+	const tabVisibility = useMemo(
+		() => ({
+			showMetrics: true,
+			showLogs: true,
+			showTraces: true,
+			showEvents: true,
+			...tabsConfig,
+		}),
+		[tabsConfig],
+	);
+
+	const { startMs, endMs } = useMemo(
+		() => ({
+			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
+			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
+		}),
+		[lastComputedMinMax],
+	);
+
+	const [modalTimeRange, setModalTimeRange] = useState(() => ({
+		startTime: startMs,
+		endTime: endMs,
+	}));
+
+	// TODO(h4ad): Remove this and use context/zustand
+	const lastSelectedInterval = useRef<Time | null>(null);
+	const [selectedInterval, setSelectedInterval] = useState<Time>(
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: isCustomTimeRange(selectedTime)
+				? DEFAULT_TIME_RANGE
+				: selectedTime,
+	);
+
+	const [selectedView, setSelectedView] = useInfraMonitoringView();
+	const effectiveView = hideDetailViewTabs ? VIEW_TYPES.METRICS : selectedView;
+
+	const [, setLogFiltersParam] = useInfraMonitoringLogFilters();
+	const [, setTracesFiltersParam] = useInfraMonitoringTracesFilters();
+	const [, setEventsFiltersParam] = useInfraMonitoringEventsFilters();
+	const [userLogsExpression] = useQueryState(
+		K8S_ENTITY_LOGS_EXPRESSION_KEY,
+		parseAsString,
+	);
+	const [userTracesExpression] = useQueryState(
+		K8S_ENTITY_TRACES_EXPRESSION_KEY,
+		parseAsString,
+	);
+
+	useEffect(() => {
+		if (entity) {
+			logEvent(InfraMonitoringEvents.PageVisited, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+				category: eventCategory,
+			});
+		}
+	}, [entity, eventCategory]);
+
+	useEffect(() => {
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		if (!isCustomTimeRange(currentSelectedInterval)) {
+			setSelectedInterval(currentSelectedInterval);
+			const { minTime, maxTime } = getMinMaxTime();
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / TimeRangeOffset),
+				endTime: Math.floor(maxTime / TimeRangeOffset),
+			});
+		}
+	}, [getMinMaxTime, selectedTime]);
+
+	const handleTabChange = (value: string): void => {
+		setSelectedView(value);
+		setLogFiltersParam(null);
+		setTracesFiltersParam(null);
+		setEventsFiltersParam(null);
+		logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: value,
+		});
+	};
+
+	const handleTimeChange = useCallback(
+		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
+			setSelectedInterval(interval as Time);
+
+			if (interval === 'custom' && dateTimeRange) {
+				setModalTimeRange({
+					startTime: Math.floor(dateTimeRange[0] / 1000),
+					endTime: Math.floor(dateTimeRange[1] / 1000),
+				});
+			} else {
+				const { maxTime, minTime } = GetMinMax(interval);
+
+				setModalTimeRange({
+					startTime: Math.floor(minTime / TimeRangeOffset),
+					endTime: Math.floor(maxTime / TimeRangeOffset),
+				});
+			}
+
+			logEvent(InfraMonitoringEvents.TimeUpdated, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+				category: eventCategory,
+				interval,
+				view: effectiveView,
+			});
+		},
+		[eventCategory, effectiveView],
+	);
+
+	const handleExplorePagesRedirect = (): void => {
+		const urlQuery = new URLSearchParams();
+
+		if (selectedInterval !== 'custom') {
+			urlQuery.set(QueryParams.relativeTime, selectedInterval);
+		} else {
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
+			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
+		}
+
+		logEvent(InfraMonitoringEvents.ExploreClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+			category: eventCategory,
+			view: selectedView,
+		});
+
+		if (selectedView === VIEW_TYPES.LOGS) {
+			const fullExpression = combineInitialAndUserExpression(
+				logsAndTracesInitialExpression,
+				userLogsExpression || '',
+			);
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.logs,
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							expression: fullExpression,
+							filter: { expression: fullExpression },
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+		} else if (selectedView === VIEW_TYPES.TRACES) {
+			const fullExpression = combineInitialAndUserExpression(
+				logsAndTracesInitialExpression,
+				userTracesExpression || '',
+			);
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.traces,
+							aggregateOperator: TracesAggregatorOperator.NOOP,
+							expression: fullExpression,
+							filter: { expression: fullExpression },
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+		}
+	};
+
+	return (
+		<Drawer
+			width="70%"
+			title={
+				<>
+					<Divider type="vertical" />
+					<Typography.Text className="title">
+						{entityName ||
+							((isEntityError || hasResponseError) &&
+								'Failed to load entity details') ||
+							(isEntityLoading && 'Loading...') ||
+							'-'}
+					</Typography.Text>
+				</>
+			}
+			placement="right"
+			onClose={handleClose}
+			open={!!selectedItem}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="entity-detail-drawer"
+			destroyOnClose
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
+		>
+			{isEntityLoading && <LoadingContainer />}
+			{(isEntityError || hasResponseError) && (
+				<div className="entity-error-container">
+					<Typography.Text color="danger">
+						{entityResponse?.error ||
+							(entityError instanceof Error
+								? entityError.message
+								: 'Failed to load entity details')}
+					</Typography.Text>
+				</div>
+			)}
+			{entity && !isEntityLoading && !hasResponseError && (
+				<>
+					<div className="entity-detail-drawer__entity">
+						<div className="entity-details-grid">
+							<div className="labels-row">
+								{metadataConfig.map((config) => (
+									<Typography.Text
+										key={config.label}
+										color="muted"
+										className="entity-details-metadata-label"
+									>
+										{config.label}
+									</Typography.Text>
+								))}
+							</div>
+
+							<div className="values-row">
+								{metadataConfig.map((config) => {
+									const value = config.getValue(entity);
+									const displayValue = String(value);
+									return (
+										<Typography.Text
+											key={config.label}
+											className="entity-details-metadata-value"
+										>
+											{config.render ? (
+												config.render(value, entity)
+											) : (
+												<Tooltip title={displayValue}>{displayValue}</Tooltip>
+											)}
+										</Typography.Text>
+									);
+								})}
+							</div>
+						</div>
+					</div>
+
+					{!hideDetailViewTabs && (
+						<div className="views-tabs-container">
+							<ToggleGroupSimple
+								type="single"
+								className="views-tabs"
+								onChange={handleTabChange}
+								value={selectedView}
+								items={[
+									...(tabVisibility.showMetrics
+										? [
+												{
+													value: VIEW_TYPES.METRICS,
+													label: (
+														<div className="view-title">
+															<BarChart size={14} />
+															Metrics
+														</div>
+													),
+												},
+											]
+										: []),
+									...(tabVisibility.showLogs
+										? [
+												{
+													value: VIEW_TYPES.LOGS,
+													label: (
+														<div className="view-title">
+															<ScrollText size={14} />
+															Logs
+														</div>
+													),
+												},
+											]
+										: []),
+									...(tabVisibility.showTraces
+										? [
+												{
+													value: VIEW_TYPES.TRACES,
+													label: (
+														<div className="view-title">
+															<DraftingCompass size={14} />
+															Traces
+														</div>
+													),
+												},
+											]
+										: []),
+									...(tabVisibility.showEvents
+										? [
+												{
+													value: VIEW_TYPES.EVENTS,
+													label: (
+														<div className="view-title">
+															<ChevronsLeftRight size={14} />
+															Events
+														</div>
+													),
+												},
+											]
+										: []),
+									...(customTabs?.map((tab) => ({
+										value: tab.key,
+										label: (
+											<div className="view-title">
+												{tab.icon}
+												{tab.label}
+											</div>
+										),
+									})) ?? []),
+								]}
+							/>
+
+							{selectedView === VIEW_TYPES.LOGS && (
+								<Tooltip title="Go to Logs Explorer" placement="left">
+									<Button
+										icon={<Compass size={18} />}
+										className="compass-button"
+										onClick={handleExplorePagesRedirect}
+									/>
+								</Tooltip>
+							)}
+							{selectedView === VIEW_TYPES.TRACES && (
+								<Tooltip title="Go to Traces Explorer" placement="left">
+									<Button
+										icon={<Compass size={18} />}
+										className="compass-button"
+										onClick={handleExplorePagesRedirect}
+									/>
+								</Tooltip>
+							)}
+						</div>
+					)}
+
+					{effectiveView === VIEW_TYPES.METRICS && (
+						<EntityMetrics<T>
+							entity={entity}
+							selectedInterval={selectedInterval}
+							timeRange={modalTimeRange}
+							handleTimeChange={handleTimeChange}
+							isModalTimeSelection
+							entityWidgetInfo={entityWidgetInfo}
+							getEntityQueryPayload={getEntityQueryPayload}
+							category={category}
+							queryKey={`${queryKeyPrefix}Metrics`}
+						/>
+					)}
+					{effectiveView === VIEW_TYPES.LOGS && (
+						<EntityLogs
+							timeRange={modalTimeRange}
+							isModalTimeSelection
+							handleTimeChange={handleTimeChange}
+							selectedInterval={selectedInterval}
+							queryKey={`${queryKeyPrefix}Logs`}
+							category={category}
+							initialExpression={logsAndTracesInitialExpression}
+						/>
+					)}
+					{effectiveView === VIEW_TYPES.TRACES && (
+						<EntityTraces
+							timeRange={modalTimeRange}
+							isModalTimeSelection
+							handleTimeChange={handleTimeChange}
+							selectedInterval={selectedInterval}
+							queryKey={`${queryKeyPrefix}Traces`}
+							category={category}
+							initialExpression={logsAndTracesInitialExpression}
+						/>
+					)}
+					{effectiveView === VIEW_TYPES.EVENTS && tabVisibility.showEvents && (
+						<EntityEvents
+							timeRange={modalTimeRange}
+							isModalTimeSelection
+							handleTimeChange={handleTimeChange}
+							selectedInterval={selectedInterval}
+							category={category}
+							queryKey={`${queryKeyPrefix}Events`}
+							initialExpression={eventsInitialExpression}
+						/>
+					)}
+					{customTabs?.map((tab) =>
+						selectedView === tab.key ? (
+							<React.Fragment key={tab.key}>
+								{tab.render({
+									entity,
+									timeRange: modalTimeRange,
+									selectedInterval,
+									handleTimeChange,
+								})}
+							</React.Fragment>
+						) : null,
+					)}
+				</>
+			)}
+		</Drawer>
+	);
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.module.scss

@@ -0,0 +1,40 @@
+.emptyStateContainer {
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: center;
+	min-height: 400px;
+}
+
+.k8SListTable {
+	padding-left: var(--spacing-2);
+	--tanstack-table-header-cell-bg: var(--l2-background);
+	--tanstack-table-header-cell-color: var(--l2-foreground);
+	--tanstack-table-cell-bg: var(--l2-background);
+	--tanstack-table-cell-color: var(--l2-foreground);
+	--tanstack-table-row-hover-bg: var(--l2-background-hover);
+	--tanstack-table-row-active-bg: var(--l2-background-active);
+	--tanstack-table-resize-handle-bg: var(--l2-background);
+	--tanstack-table-resize-handle-hover-bg: var(--l2-border);
+	--tanstack-table-row-height: 42px;
+
+	--tanstack-cell-padding-top-override: 5px;
+	--tanstack-cell-padding-bottom-override: 5px;
+	--tanstack-cell-padding-left-override: 5px;
+	--tanstack-cell-padding-right-override: 5px;
+
+	--tanstack-expansion-first-col-padding-left: 30px;
+
+	&[data-has-group-by='false'] {
+		--tanstack-cell-padding-left-first-column: 28px;
+	}
+}
+
+.paginationContainer {
+	padding-bottom: var(--spacing-8);
+	padding-right: var(--spacing-8);
+
+	ul {
+		margin: 0;
+	}
+}

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

@@ -0,0 +1,297 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Typography } from '@signozhq/ui/typography';
+import logEvent from 'api/common/logEvent';
+import TanStackTable, {
+	TableColumnDef,
+	useHiddenColumnIds,
+} from 'components/TanStackTableView';
+import { InfraMonitoringEvents } from 'constants/events';
+import { parseAsString, useQueryState } from 'nuqs';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import { openInNewTab } from 'utils/navigation';
+
+import {
+	INFRA_MONITORING_K8S_PARAMS_KEYS,
+	InfraMonitoringEntity,
+} from '../constants';
+import {
+	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringGroupBy,
+	useInfraMonitoringOrderBy,
+	useInfraMonitoringPageListing,
+	useInfraMonitoringPageSizeListing,
+} from '../hooks';
+import { K8sEmptyState } from './K8sEmptyState';
+import { K8sExpandedRow } from './K8sExpandedRow';
+import K8sHeader from './K8sHeader';
+import { K8sBaseFilters } from './types';
+import { getGroupedByMeta } from './utils';
+
+import styles from './K8sBaseList.module.scss';
+import cx from 'classnames';
+
+export type K8sBaseListEmptyStateContext = {
+	isError: boolean;
+	error?: string | null;
+	totalCount: number;
+	hasFilters: boolean;
+	isLoading: boolean;
+	rawData?: unknown;
+};
+
+/** Base type constraint for K8s entity data */
+export type K8sEntityData = { meta?: Record<string, string> };
+
+export type K8sBaseListProps<T extends K8sEntityData> = {
+	controlListPrefix?: React.ReactNode;
+	entity: InfraMonitoringEntity;
+	tableColumns: TableColumnDef<T>[];
+	fetchListData: (
+		filters: K8sBaseFilters,
+		signal?: AbortSignal,
+	) => Promise<{
+		data: T[];
+		total: number;
+		error?: string | null;
+		rawData?: unknown;
+	}>;
+	/** 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;
+	eventCategory: InfraMonitoringEvents;
+	renderEmptyState?: (
+		context: K8sBaseListEmptyStateContext,
+	) => React.ReactNode | null;
+};
+
+export function K8sBaseList<T extends K8sEntityData>({
+	controlListPrefix,
+	entity,
+	tableColumns,
+	fetchListData,
+	getRowKey,
+	getItemKey,
+	eventCategory,
+	renderEmptyState,
+}: K8sBaseListProps<T>): JSX.Element {
+	const [queryFilters] = useInfraMonitoringFiltersK8s();
+	const [currentPage] = useInfraMonitoringPageListing();
+	const [currentPageSize] = useInfraMonitoringPageSizeListing();
+	const [groupBy] = useInfraMonitoringGroupBy();
+	const [orderBy] = useInfraMonitoringOrderBy();
+	const [selectedItem, setSelectedItem] = useQueryState(
+		'selectedItem',
+		parseAsString,
+	);
+
+	const columnStorageKey = `k8s-${entity}-columns`;
+	const hiddenColumnIds = useHiddenColumnIds(columnStorageKey);
+
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
+	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
+	const getAutoRefreshQueryKey = useGlobalTimeStore(
+		(s) => s.getAutoRefreshQueryKey,
+	);
+
+	const queryKey = useMemo(() => {
+		return getAutoRefreshQueryKey(
+			selectedTime,
+			'k8sBaseList',
+			entity,
+			String(currentPageSize),
+			String(currentPage),
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+			JSON.stringify(groupBy),
+		);
+	}, [
+		getAutoRefreshQueryKey,
+		selectedTime,
+		entity,
+		currentPageSize,
+		currentPage,
+		queryFilters,
+		orderBy,
+		groupBy,
+	]);
+
+	const { data, isLoading, isError } = useQuery({
+		queryKey,
+		queryFn: ({ signal }) => {
+			const { minTime, maxTime } = getMinMaxTime();
+
+			return fetchListData(
+				{
+					limit: currentPageSize,
+					offset: (currentPage - 1) * currentPageSize,
+					filters: queryFilters || { items: [], op: 'AND' },
+					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+					orderBy: orderBy || undefined,
+					groupBy: groupBy?.length > 0 ? groupBy : undefined,
+				},
+				signal,
+			);
+		},
+		refetchInterval: isRefreshEnabled ? refreshInterval : false,
+	});
+
+	const pageData = data?.data ?? [];
+	const totalCount = data?.total || 0;
+	const hasFilters = (queryFilters?.items?.length ?? 0) > 0;
+
+	const getGroupKeyFn = useCallback(
+		(item: T) => getGroupedByMeta(item, groupBy),
+		[groupBy],
+	);
+
+	useEffect(() => {
+		logEvent(InfraMonitoringEvents.PageVisited, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			page: InfraMonitoringEvents.ListPage,
+			category: eventCategory,
+			total: totalCount,
+		});
+	}, [eventCategory, totalCount]);
+
+	const handleRowClick = useCallback(
+		(_record: T, itemKey: string): void => {
+			if (groupBy.length === 0) {
+				setSelectedItem(itemKey);
+			}
+
+			logEvent(InfraMonitoringEvents.ItemClicked, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: eventCategory,
+			});
+		},
+		[eventCategory, groupBy.length, setSelectedItem],
+	);
+
+	const handleRowClickNewTab = useCallback(
+		(_record: T, itemKey: string): void => {
+			if (groupBy.length > 0) {
+				return;
+			}
+
+			// Build URL with selectedItem param
+			const url = new URL(window.location.href);
+			url.searchParams.set('selectedItem', itemKey);
+			openInNewTab(url.pathname + url.search);
+
+			logEvent(InfraMonitoringEvents.ItemClicked, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: eventCategory,
+			});
+		},
+		[eventCategory, groupBy.length],
+	);
+
+	const isGroupedByAttribute = groupBy.length > 0;
+
+	// Filter columns for expanded row based on parent's hidden columns
+	const expandedRowColumns = useMemo(
+		() => tableColumns.filter((col) => !hiddenColumnIds.includes(col.id)),
+		[tableColumns, hiddenColumnIds],
+	);
+
+	const renderExpandedRow = useCallback(
+		(
+			_record: T,
+			rowKey: string,
+			groupMeta?: Record<string, string>,
+		): JSX.Element => (
+			<K8sExpandedRow<T>
+				rowKey={rowKey}
+				groupMeta={groupMeta}
+				entity={entity}
+				tableColumns={expandedRowColumns}
+				fetchListData={fetchListData}
+				getRowKey={getRowKey}
+				getItemKey={getItemKey}
+			/>
+		),
+		[entity, fetchListData, getRowKey, getItemKey, expandedRowColumns],
+	);
+
+	const getRowCanExpand = useCallback(
+		(): boolean => isGroupedByAttribute,
+		[isGroupedByAttribute],
+	);
+
+	const showTableLoadingState = isLoading;
+
+	const emptyTableMessage: React.ReactNode = renderEmptyState?.({
+		isError,
+		error: data?.error,
+		totalCount,
+		hasFilters,
+		isLoading: showTableLoadingState,
+		rawData: data?.rawData,
+	}) || (
+		<K8sEmptyState
+			isError={isError}
+			error={data?.error}
+			isLoading={showTableLoadingState}
+			rawData={data?.rawData}
+		/>
+	);
+
+	const showEmptyState = !showTableLoadingState && pageData.length === 0;
+
+	return (
+		<>
+			<K8sHeader
+				controlListPrefix={controlListPrefix}
+				entity={entity}
+				showAutoRefresh={!selectedItem}
+				columns={tableColumns}
+				columnStorageKey={columnStorageKey}
+			/>
+			{isError && (
+				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
+			)}
+
+			{showEmptyState ? (
+				<div className={styles.emptyStateContainer}>{emptyTableMessage}</div>
+			) : (
+				<TanStackTable<T>
+					data={pageData}
+					columns={tableColumns}
+					columnStorageKey={columnStorageKey}
+					isLoading={showTableLoadingState}
+					getRowKey={getRowKey}
+					getItemKey={getItemKey}
+					groupBy={groupBy}
+					getGroupKey={getGroupKeyFn}
+					onRowClick={handleRowClick}
+					onRowClickNewTab={handleRowClickNewTab}
+					renderExpandedRow={isGroupedByAttribute ? renderExpandedRow : undefined}
+					getRowCanExpand={isGroupedByAttribute ? getRowCanExpand : undefined}
+					className={cx(styles.k8SListTable, expandedRowColumns)}
+					enableQueryParams={{
+						page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
+						limit: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE_SIZE,
+						orderBy: INFRA_MONITORING_K8S_PARAMS_KEYS.ORDER_BY,
+						expanded: INFRA_MONITORING_K8S_PARAMS_KEYS.EXPANDED,
+					}}
+					pagination={{
+						total: totalCount,
+						defaultLimit: 10,
+						defaultPage: 1,
+						showTotalCount: true,
+						totalCountLabel: entity.charAt(0).toUpperCase() + entity.slice(1),
+					}}
+					paginationClassname={styles.paginationContainer}
+				/>
+			)}
+		</>
+	);
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.module.scss

@@ -0,0 +1,56 @@
+.container {
+	height: 30vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing-3);
+	width: fit-content;
+	max-width: 500px;
+	padding: 24px;
+	text-align: center;
+}
+
+.title {
+	font-weight: 500;
+	margin: 0;
+	font-size: var(--periscope-font-size-medium);
+}
+
+.message {
+	max-width: 400px;
+}
+
+.noDataMessage {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-1);
+}
+
+.emptyStateSvg {
+	width: 32px;
+	max-width: 100%;
+}
+
+.eyesEmoji {
+	height: 32px;
+	width: 32px;
+}
+
+.errorIcon {
+	color: var(--danger-background);
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 16px;
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sEmptyState.tsx

@@ -0,0 +1,146 @@
+import { useCallback } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import history from 'lib/history';
+import { LifeBuoy, TriangleAlert } from '@signozhq/icons';
+
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+import eyesEmojiUrl from '@/assets/Images/eyesEmoji.svg';
+
+import type { K8sBaseListEmptyStateContext } from './K8sBaseList';
+
+import styles from './K8sEmptyState.module.scss';
+
+export interface K8sListResponseMetadata {
+	sentAnyHostMetricsData?: boolean;
+	isSendingK8SAgentMetrics?: boolean;
+	endTimeBeforeRetention?: boolean;
+}
+
+type K8sEmptyStateProps = Partial<K8sBaseListEmptyStateContext>;
+
+const handleContactSupport = (isCloudUser: boolean): void => {
+	if (isCloudUser) {
+		history.push('/support');
+	} else {
+		window.open('https://signoz.io/slack', '_blank');
+	}
+};
+
+export function K8sEmptyState({
+	isError,
+	error,
+	isLoading,
+	rawData,
+}: K8sEmptyStateProps): JSX.Element | null {
+	const { isCloudUser } = useGetTenantLicense();
+
+	const handleSupport = useCallback(() => {
+		handleContactSupport(isCloudUser);
+	}, [isCloudUser]);
+
+	if (isLoading) {
+		return null;
+	}
+
+	if (isError || error) {
+		return (
+			<div className={styles.container}>
+				<div className={styles.content}>
+					<TriangleAlert size={32} className={styles.errorIcon} />
+					<span className={styles.message}>
+						{error || 'An error occurred while fetching data.'}
+					</span>
+					<p>
+						Our team is getting on top to resolve this. Please reach out to support if
+						the issue persists.
+					</p>
+					<div className={styles.actions}>
+						<Button
+							onClick={handleSupport}
+							variant="solid"
+							color="secondary"
+							prefix={<LifeBuoy size={14} />}
+						>
+							Contact Support
+						</Button>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	const metadata = rawData as K8sListResponseMetadata | undefined;
+
+	if (metadata?.sentAnyHostMetricsData === false) {
+		return (
+			<div className={styles.container}>
+				<div className={styles.content}>
+					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
+					<div className={styles.noDataMessage}>
+						<h5 className={styles.title}>No host metrics data received yet</h5>
+						<span className={styles.message}>
+							Please refer to{' '}
+							<a
+								href="https://signoz.io/docs/infrastructure-monitoring/hostmetrics/"
+								target="_blank"
+								rel="noreferrer"
+							>
+								our documentation
+							</a>{' '}
+							to learn how to send host metrics.
+						</span>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	if (metadata?.isSendingK8SAgentMetrics) {
+		return (
+			<div className={styles.container}>
+				<div className={styles.content}>
+					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
+					<span className={styles.message}>
+						To see K8s metrics, upgrade to the latest version of SigNoz k8s-infra
+						chart. Please contact support if you need help.
+					</span>
+				</div>
+			</div>
+		);
+	}
+
+	if (metadata?.endTimeBeforeRetention) {
+		return (
+			<div className={styles.container}>
+				<div className={styles.content}>
+					<img className={styles.eyesEmoji} src={eyesEmojiUrl} alt="eyes emoji" />
+					<div className={styles.noDataMessage}>
+						<h5 className={styles.title}>
+							Queried time range is before earliest K8s metrics
+						</h5>
+						<span className={styles.message}>
+							Your requested end time is earlier than the earliest detected time of K8s
+							metrics data, please adjust your end time.
+						</span>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.content}>
+				<img
+					src={emptyStateUrl}
+					alt="empty-state"
+					className={styles.emptyStateSvg}
+				/>
+				<span className={styles.message}>
+					This query had no results. Edit your query and try again!
+				</span>
+			</div>
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sExpandedRow.module.scss

@@ -0,0 +1,35 @@
+.expandedTableContainer {
+	overflow-x: auto;
+}
+
+.expandedTable {
+	--tanstack-table-header-cell-bg: var(--l1-background);
+	--tanstack-table-header-cell-color: var(--l1-foreground);
+	--tanstack-table-cell-bg: var(--l1-background);
+	--tanstack-table-cell-color: var(--l1-foreground);
+	--tanstack-table-row-hover-bg: var(--l1-background-hover);
+	--tanstack-table-row-active-bg: var(--l1-background-active);
+	--tanstack-table-resize-handle-bg: var(--l1-background);
+	--tanstack-table-resize-handle-hover-bg: var(--l1-border);
+	--tanstack-table-row-height: 36px;
+
+	--tanstack-cell-padding-left-override: 15px;
+	--tanstack-cell-padding-right-override: 15px;
+
+	& [data-hide-expanded='true'] {
+		display: none;
+	}
+}
+
+.expandedTableFooter {
+	display: flex;
+	justify-content: flex-start;
+	gap: var(--spacing-4);
+	background-color: var(--l1-background);
+}
+
+.viewAllButton {
+	display: flex;
+	align-items: center;
+	margin: var(--spacing-4);
+}

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

@@ -0,0 +1,238 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { useQuery } from 'react-query';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import TanStackTable, {
+	SortState,
+	TableColumnDef,
+	TanStackTableStateProvider,
+} from 'components/TanStackTableView';
+import { CornerDownRight } from '@signozhq/icons';
+import { useQueryState } from 'nuqs';
+import { useGlobalTimeStore } from 'store/globalTime';
+import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
+
+import { InfraMonitoringEntity } from '../constants';
+import {
+	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringGroupBy,
+	useInfraMonitoringOrderBy,
+	useInfraMonitoringPageListing,
+	useInfraMonitoringSelectedItem,
+} from '../hooks';
+import { K8sBaseFilters } from './types';
+
+import styles from './K8sExpandedRow.module.scss';
+
+const EXPANDED_ROW_LIMIT = 10;
+
+export type K8sExpandedRowProps<T> = {
+	/** Pre-computed row key from parent table (includes group prefix + duplicate handling) */
+	rowKey: string;
+	/** Group metadata for building filters */
+	groupMeta?: Record<string, string>;
+	entity: InfraMonitoringEntity;
+	tableColumns: TableColumnDef<T>[];
+	fetchListData: (
+		filters: K8sBaseFilters,
+		signal?: AbortSignal,
+	) => Promise<{
+		data: T[];
+		total: number;
+		error?: string | null;
+		rawData?: unknown;
+	}>;
+	/** 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;
+};
+
+export function K8sExpandedRow<T>({
+	rowKey,
+	groupMeta,
+	entity,
+	tableColumns,
+	fetchListData,
+	getRowKey,
+	getItemKey,
+}: K8sExpandedRowProps<T>): JSX.Element {
+	const [, setGroupBy] = useInfraMonitoringGroupBy();
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
+	const [queryFilters, setFilters] = useInfraMonitoringFiltersK8s();
+	const [, setSelectedItem] = useInfraMonitoringSelectedItem();
+	const [, setMainOrderBy] = useInfraMonitoringOrderBy();
+
+	const orderByParamKey = useMemo(
+		() => `orderBy_${rowKey.replace(/[^a-zA-Z0-9]/g, '_')}`,
+		[rowKey],
+	);
+	const [orderBy, setOrderBy] = useQueryState(
+		orderByParamKey,
+		parseAsJsonNoValidate<SortState | null>()
+			.withDefault(null as never)
+			.withOptions({
+				history: 'push',
+			}),
+	);
+	useEffect(() => {
+		return (): void => {
+			void setOrderBy(null);
+		};
+	}, [setOrderBy]);
+
+	const storageKey = `k8s-${entity}-columns-expanded`;
+
+	const createFiltersForRecord = useCallback((): NonNullable<
+		IBuilderQuery['filters']
+	> => {
+		const baseFilters: IBuilderQuery['filters'] = {
+			items: [...(queryFilters?.items || [])],
+			op: 'and',
+		};
+
+		const metaKeys = groupMeta ?? {};
+
+		for (const key of Object.keys(metaKeys)) {
+			const value = metaKeys[key];
+			// Skip empty values to avoid creating invalid filters
+			if (value === '' || value === undefined || value === null) {
+				continue;
+			}
+			baseFilters.items.push({
+				key: {
+					key,
+					type: 'resource',
+				},
+				op: '=',
+				value,
+				id: key,
+			});
+		}
+
+		return baseFilters;
+	}, [queryFilters?.items, groupMeta]);
+
+	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
+	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
+	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
+	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
+	const getAutoRefreshQueryKey = useGlobalTimeStore(
+		(s) => s.getAutoRefreshQueryKey,
+	);
+
+	const queryKey = useMemo(() => {
+		return getAutoRefreshQueryKey(
+			selectedTime,
+			entity,
+			'k8sExpandedRow',
+			JSON.stringify(groupMeta),
+			rowKey,
+			JSON.stringify(queryFilters),
+			JSON.stringify(orderBy),
+		);
+	}, [
+		getAutoRefreshQueryKey,
+		selectedTime,
+		entity,
+		groupMeta,
+		rowKey,
+		queryFilters,
+		orderBy,
+	]);
+
+	const { data, isLoading, isError } = useQuery({
+		queryKey,
+		queryFn: async ({ signal }) => {
+			const { minTime, maxTime } = getMinMaxTime();
+
+			return await fetchListData(
+				{
+					limit: EXPANDED_ROW_LIMIT,
+					offset: 0,
+					filters: createFiltersForRecord(),
+					start: Math.floor(minTime / NANO_SECOND_MULTIPLIER),
+					end: Math.floor(maxTime / NANO_SECOND_MULTIPLIER),
+					orderBy: orderBy || undefined,
+					groupBy: undefined,
+				},
+				signal,
+			);
+		},
+		staleTime: 1000 * 60 * 30,
+		refetchInterval: isRefreshEnabled ? refreshInterval : false,
+	});
+
+	const expandedData = data?.data ?? [];
+
+	const handleRowClick = useCallback(
+		(_row: T, itemKey: string): void => {
+			setSelectedItem(itemKey);
+		},
+		[setSelectedItem],
+	);
+
+	const handleViewAllClick = (): void => {
+		const filters = createFiltersForRecord();
+		setGroupBy([]);
+		setCurrentPage(1);
+		setFilters(filters);
+		if (orderBy) {
+			setMainOrderBy(orderBy);
+		}
+	};
+
+	const total = data?.total ?? 0;
+	const hasMoreItems = total > EXPANDED_ROW_LIMIT;
+
+	const footerContent = hasMoreItems ? (
+		<Button
+			type="button"
+			color="secondary"
+			variant="outlined"
+			className={styles.viewAllButton}
+			onClick={handleViewAllClick}
+			prefix={<CornerDownRight size={14} />}
+		>
+			View All
+		</Button>
+	) : null;
+
+	return (
+		<div
+			className={styles.expandedTableContainer}
+			data-testid="expanded-table-container"
+		>
+			{isError && (
+				<Typography>{data?.error?.toString() || 'Something went wrong'}</Typography>
+			)}
+
+			<div data-testid="expanded-table">
+				<TanStackTableStateProvider>
+					<TanStackTable<T>
+						data={expandedData}
+						columns={tableColumns}
+						columnStorageKey={storageKey}
+						isLoading={isLoading}
+						getRowKey={getRowKey}
+						getItemKey={getItemKey}
+						onRowClick={handleRowClick}
+						enableQueryParams={{
+							orderBy: orderByParamKey,
+						}}
+						tableScrollerProps={{
+							className: styles.expandedTable,
+						}}
+						disableVirtualScroll
+						cellTypographySize="medium"
+					/>
+				</TanStackTableStateProvider>
+				{!isLoading && expandedData.length > 0 && (
+					<div className={styles.expandedTableFooter}>{footerContent}</div>
+				)}
+			</div>
+		</div>
+	);
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sFiltersSidePanel.module.scss

@@ -0,0 +1,36 @@
+.drawer {
+	--dialog-description-padding: 0px 0px var(--spacing-8) 0px;
+}
+
+.columnItem {
+	display: flex;
+	align-items: center;
+}
+
+.columnsTitle {
+	color: var(--l2-foreground);
+	font-size: var(--periscope-font-size-small, 11px);
+	font-weight: var(--periscope-font-weight-medium, 500);
+	text-transform: uppercase;
+
+	padding: var(--spacing-4) var(--spacing-8);
+	border-bottom: 1px solid var(--l2-border);
+
+	&:not(:first-of-type) {
+		border-top: 1px solid var(--l2-border);
+	}
+}
+
+.columnsList {
+	display: flex;
+	flex-direction: column;
+}
+
+.columnItem {
+	justify-content: flex-start !important;
+	width: 100%;
+}
+
+.horizontalDivider {
+	border-top: 1px solid var(--l1-border);
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sFiltersSidePanel.tsx

@@ -0,0 +1,142 @@
+import { useMemo } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { DrawerWrapper } from '@signozhq/ui/drawer';
+import {
+	hideColumn,
+	showColumn,
+	TableColumnDef,
+	useHiddenColumnIds,
+} from 'components/TanStackTableView';
+
+import styles from './K8sFiltersSidePanel.module.scss';
+
+type ColumnPickerItem = {
+	id: string;
+	label: string;
+	canBeHidden: boolean;
+	visibilityBehavior:
+		| 'hidden-on-expand'
+		| 'hidden-on-collapse'
+		| 'always-visible';
+};
+
+/**
+ * Converts TableColumnDef to column picker item format
+ */
+function toColumnPickerItems<T>(
+	columns: TableColumnDef<T>[],
+): ColumnPickerItem[] {
+	return columns.map((col) => ({
+		id: col.id,
+		label: typeof col.header === 'string' ? col.header : col.id,
+		canBeHidden: col.canBeHidden !== false && col.enableRemove !== false,
+		visibilityBehavior: col.visibilityBehavior ?? 'always-visible',
+	}));
+}
+
+function K8sFiltersSidePanel<TData>({
+	open,
+	onClose,
+	columns,
+	storageKey,
+}: {
+	open: boolean;
+	onClose: () => void;
+	columns: TableColumnDef<TData>[];
+	storageKey: string;
+}): JSX.Element {
+	const columnPickerItems = useMemo(
+		() => toColumnPickerItems(columns),
+		[columns],
+	);
+	const hiddenColumnIds = useHiddenColumnIds(storageKey);
+
+	const addedColumns = useMemo(
+		() =>
+			columnPickerItems.filter(
+				(column) =>
+					!hiddenColumnIds.includes(column.id) &&
+					column.visibilityBehavior !== 'hidden-on-collapse',
+			),
+		[columnPickerItems, hiddenColumnIds],
+	);
+
+	const hiddenColumns = useMemo(
+		() =>
+			columnPickerItems.filter((column) => hiddenColumnIds.includes(column.id)),
+		[columnPickerItems, hiddenColumnIds],
+	);
+
+	const handleRemoveColumn = (columnId: string): void => {
+		hideColumn(storageKey, columnId);
+	};
+
+	const handleAddColumn = (columnId: string): void => {
+		showColumn(storageKey, columnId);
+	};
+
+	const drawerContent = (
+		<>
+			<div className={styles.columnsTitle}>Added Columns (Click to remove)</div>
+
+			<div className={styles.columnsList}>
+				{addedColumns.map((column) => (
+					<div className={styles.columnItem} key={column.id}>
+						<Button
+							variant="ghost"
+							color="none"
+							className={styles.columnItem}
+							disabled={!column.canBeHidden}
+							data-testid={`remove-column-${column.id}`}
+							onClick={(): void => handleRemoveColumn(column.id)}
+						>
+							{column.label}
+						</Button>
+					</div>
+				))}
+			</div>
+
+			<div className={styles.horizontalDivider} />
+
+			<div className={styles.columnsTitle}>Other Columns (Click to add)</div>
+
+			<div className={styles.columnsList}>
+				{hiddenColumns.map((column) => (
+					<div className={styles.columnItem} key={column.id}>
+						<Button
+							variant="ghost"
+							color="none"
+							className={styles.columnItem}
+							data-can-be-added="true"
+							data-testid={`add-column-${column.id}`}
+							onClick={(): void => handleAddColumn(column.id)}
+							tabIndex={0}
+						>
+							{column.label}
+						</Button>
+					</div>
+				))}
+			</div>
+		</>
+	);
+
+	return (
+		<DrawerWrapper
+			open={open}
+			onOpenChange={(isOpen): void => {
+				if (!isOpen) {
+					onClose();
+				}
+			}}
+			title="Columns"
+			direction="right"
+			showCloseButton
+			showOverlay={false}
+			className={styles.drawer}
+		>
+			{drawerContent}
+		</DrawerWrapper>
+	);
+}
+
+export default K8sFiltersSidePanel;

frontend/src/container/InfraMonitoringK8s/Base/K8sGroupCell.tsx

@@ -0,0 +1,17 @@
+import { getGroupByEl } from './utils';
+import { useInfraMonitoringGroupBy } from '../hooks';
+
+interface K8sEntityWithMeta {
+	meta?: Record<string, string>;
+}
+
+function K8sGroupCell<T extends K8sEntityWithMeta>({
+	row,
+}: {
+	row: T;
+}): JSX.Element {
+	const [groupBy] = useInfraMonitoringGroupBy();
+	return getGroupByEl(row, groupBy) as JSX.Element;
+}
+
+export default K8sGroupCell;

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.module.scss

@@ -0,0 +1,80 @@
+.k8SListControls {
+	padding: var(--spacing-4);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--spacing-4);
+
+	:global(.ant-select-selector) {
+		border-radius: 2px;
+		border: 1px solid var(--border) !important;
+		background-color: var(--l2-background) !important;
+
+		input {
+			font-size: 12px;
+		}
+
+		:global([data-slot='badge'] .ant-typography) {
+			font-size: 12px;
+		}
+	}
+}
+
+.k8SListControlsLeft {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: var(--spacing-4);
+
+	.k8SQbSearchContainer {
+		flex: 1;
+		min-width: 240px;
+		max-width: 60%;
+	}
+}
+
+.k8SAttributeSearchContainer {
+	flex: 1;
+	min-width: 240px;
+	max-width: 40%;
+	display: flex;
+	align-items: center;
+}
+
+.groupByLabel {
+	min-width: max-content;
+	font-size: var(--periscope-font-size-base, 13px);
+	font-weight: var(--periscope-font-weight-regular, 400);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+
+	border-radius: 2px 0px 0px 2px;
+	border: 1px solid var(--border);
+	border-right: none;
+	border-top-right-radius: 0px;
+	border-bottom-right-radius: 0px;
+
+	display: flex;
+	height: 32px;
+	padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
+	justify-content: center;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.groupBySelect {
+	:global(.ant-select-selector) {
+		border-left: none;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
+	}
+}
+
+.k8SListControlsRight {
+	min-width: 240px;
+
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.tsx

@@ -0,0 +1,232 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Select } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { TableColumnDef } from 'components/TanStackTableView';
+import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import { initialQueriesMap } from 'constants/queryBuilder';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { SlidersHorizontal } from '@signozhq/icons';
+import { useAppContext } from 'providers/App/App';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	GetK8sEntityToAggregateAttribute,
+	InfraMonitoringEntity,
+} from '../constants';
+import {
+	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringGroupBy,
+	useInfraMonitoringPageListing,
+} from '../hooks';
+import K8sFiltersSidePanel from './K8sFiltersSidePanel';
+
+import styles from './K8sHeader.module.scss';
+
+interface K8sHeaderProps<TData> {
+	controlListPrefix?: React.ReactNode;
+	entity: InfraMonitoringEntity;
+	showAutoRefresh: boolean;
+	columns: TableColumnDef<TData>[];
+	columnStorageKey: string;
+}
+
+function K8sHeader<TData>({
+	controlListPrefix,
+	entity,
+	showAutoRefresh,
+	columns,
+	columnStorageKey,
+}: K8sHeaderProps<TData>): JSX.Element {
+	const [isFiltersSidePanelOpen, setIsFiltersSidePanelOpen] = useState(false);
+	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
+
+	const currentQuery = initialQueriesMap[DataSource.METRICS];
+
+	const updatedCurrentQuery = useMemo(() => {
+		let { filters } = currentQuery.builder.queryData[0];
+		if (urlFilters) {
+			filters = urlFilters;
+		}
+		return {
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+						filters,
+					},
+				],
+			},
+		};
+	}, [currentQuery, urlFilters]);
+
+	const query = useMemo(
+		() => updatedCurrentQuery?.builder?.queryData[0] || null,
+		[updatedCurrentQuery],
+	);
+
+	const { handleChangeQueryData } = useQueryOperations({
+		index: 0,
+		query: currentQuery.builder.queryData[0],
+		entityVersion: '',
+	});
+
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
+	const handleChangeTagFilters = useCallback(
+		(value: IBuilderQuery['filters']) => {
+			setUrlFilters(value || null);
+			handleChangeQueryData('filters', value);
+			setCurrentPage(1);
+
+			if (value?.items && value?.items?.length > 0) {
+				logEvent(InfraMonitoringEvents.FilterApplied, {
+					entity: InfraMonitoringEvents.K8sEntity,
+					page: InfraMonitoringEvents.ListPage,
+					category: InfraMonitoringEvents.Pod,
+				});
+			}
+		},
+		[handleChangeQueryData, setCurrentPage, setUrlFilters],
+	);
+
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const { data: groupByFiltersData, isLoading: isLoadingGroupByFilters } =
+		useGetAggregateKeys(
+			{
+				dataSource: currentQuery.builder.queryData[0].dataSource,
+				aggregateAttribute: GetK8sEntityToAggregateAttribute(
+					entity,
+					dotMetricsEnabled,
+				),
+				aggregateOperator: 'noop',
+				searchText: '',
+				tagType: '',
+			},
+			{
+				queryKey: [currentQuery.builder.queryData[0].dataSource, 'noop'],
+			},
+			true,
+			entity,
+		);
+
+	const groupByOptions = useMemo(
+		() =>
+			groupByFiltersData?.payload?.attributeKeys?.map((filter) => ({
+				value: filter.key,
+				label: filter.key,
+			})) || [],
+		[groupByFiltersData],
+	);
+
+	const [groupBy, setGroupBy] = useInfraMonitoringGroupBy();
+
+	const handleGroupByChange = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			const newGroupBy = [];
+
+			for (let index = 0; index < value.length; index++) {
+				const element = value[index] as unknown as string;
+
+				const key = groupByFiltersData?.payload?.attributeKeys?.find(
+					(k) => k.key === element,
+				);
+
+				if (key) {
+					newGroupBy.push(key);
+				}
+			}
+
+			// Reset pagination on switching to groupBy
+			setCurrentPage(1);
+			setGroupBy(newGroupBy);
+
+			logEvent(InfraMonitoringEvents.GroupByChanged, {
+				entity: InfraMonitoringEvents.K8sEntity,
+				page: InfraMonitoringEvents.ListPage,
+				category: InfraMonitoringEvents.Pod,
+			});
+		},
+		[groupByFiltersData, setCurrentPage, setGroupBy],
+	);
+
+	const onClickOutside = useCallback(() => {
+		setIsFiltersSidePanelOpen(false);
+	}, []);
+
+	return (
+		<div className={styles.k8SListControls}>
+			<div className={styles.k8SListControlsLeft}>
+				{controlListPrefix}
+
+				<div className={styles.k8SQbSearchContainer}>
+					<QueryBuilderSearch
+						query={query as IBuilderQuery}
+						onChange={handleChangeTagFilters}
+						isInfraMonitoring
+						disableNavigationShortcuts
+						entity={entity}
+					/>
+				</div>
+
+				<div className={styles.k8SAttributeSearchContainer}>
+					<div className={styles.groupByLabel}> Group by </div>
+					<Select
+						className={styles.groupBySelect}
+						loading={isLoadingGroupByFilters}
+						mode="multiple"
+						value={groupBy}
+						allowClear
+						maxTagCount="responsive"
+						placeholder="Search for attribute"
+						style={{ width: '100%' }}
+						options={groupByOptions}
+						onChange={handleGroupByChange}
+					/>
+				</div>
+			</div>
+
+			<div className={styles.k8SListControlsRight}>
+				<DateTimeSelectionV2
+					showAutoRefresh={showAutoRefresh}
+					showRefreshText={false}
+					hideShareModal
+				/>
+
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					color="none"
+					data-testid="k8s-list-filters-button"
+					onClick={(): void => setIsFiltersSidePanelOpen(true)}
+				>
+					<SlidersHorizontal size={14} />
+				</Button>
+			</div>
+
+			<K8sFiltersSidePanel
+				open={isFiltersSidePanelOpen}
+				columns={columns}
+				storageKey={columnStorageKey}
+				onClose={onClickOutside}
+			/>
+		</div>
+	);
+}
+
+export default K8sHeader;

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

@@ -0,0 +1,912 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter as MemoryRouterV5 } from 'react-router-dom-v5-compat';
+import { VirtuosoMockContext } from 'react-virtuoso';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InfraMonitoringEvents } from 'constants/events';
+import {
+	NuqsTestingAdapter,
+	OnUrlUpdateFunction,
+	UrlUpdateEvent,
+} from 'nuqs/adapters/testing';
+import { AppProvider } from 'providers/App/App';
+import TimezoneProvider from 'providers/Timezone';
+import store from 'store';
+import { openInNewTab } from 'utils/navigation';
+
+import { TableColumnDef } from 'components/TanStackTableView';
+
+import { InfraMonitoringEntity } from '../../constants';
+import { K8sBaseList, K8sBaseListProps, K8sEntityData } from '../K8sBaseList';
+
+jest.mock('utils/navigation', () => ({
+	...jest.requireActual('utils/navigation'),
+	openInNewTab: jest.fn(),
+}));
+
+const openInNewTabMock = openInNewTab as jest.Mock;
+
+// Mock Date.now to prevent flaky tests due to time-dependent values
+const MOCK_NOW = 1700000000000; // Fixed timestamp
+jest.spyOn(Date, 'now').mockReturnValue(MOCK_NOW);
+
+// Mock DrawerWrapper to avoid CSS issues with jsdom
+// SyntaxError: 'div#radix-:rbv,,._dialog__content_qf8bf_22 :focus' is not a valid selector
+jest.mock('@signozhq/ui/drawer', () => {
+	const actual = jest.requireActual('@signozhq/ui/drawer');
+	return {
+		...actual,
+		DrawerWrapper: ({
+			open,
+			children,
+			title,
+		}: {
+			open: boolean;
+			children: React.ReactNode;
+			title: string;
+			onOpenChange?: (isOpen: boolean) => void;
+		}): JSX.Element | null =>
+			open ? (
+				<div data-testid="drawer-wrapper" data-title={title}>
+					{children}
+				</div>
+			) : null,
+	};
+});
+
+// Test data types that satisfy K8sEntityData constraint
+type TestItemWithTitle = {
+	id: string;
+	title: string;
+	meta?: Record<string, string>;
+};
+type TestItem = { id: string; meta?: Record<string, string> };
+type TestItemWithName = {
+	id: string;
+	name: string;
+	desc: string;
+	meta?: Record<string, string>;
+};
+type TestItemWithGroup = {
+	id: string;
+	name: string;
+	group: string;
+	meta?: Record<string, string>;
+};
+
+// Helper to create TanStack columns for tests
+function createTestColumnsWithTitle(): TableColumnDef<TestItemWithTitle>[] {
+	return [
+		{
+			id: 'id',
+			header: (): React.ReactNode => 'Id',
+			accessorFn: (row): string => row.id,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+			enableSort: true,
+		},
+		{
+			id: 'title',
+			header: (): React.ReactNode => 'Title',
+			accessorFn: (row): string => row.title,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+	];
+}
+
+function createTestColumns(): TableColumnDef<TestItem>[] {
+	return [
+		{
+			id: 'id',
+			header: (): React.ReactNode => 'Id',
+			accessorFn: (row): string => row.id,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+	];
+}
+
+function createTestColumnsWithName(): TableColumnDef<TestItemWithName>[] {
+	return [
+		{
+			id: 'id',
+			header: (): React.ReactNode => 'Id',
+			accessorFn: (row): string => row.id,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+		{
+			id: 'name',
+			header: (): React.ReactNode => 'Name',
+			accessorFn: (row): string => row.name,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+		{
+			id: 'desc',
+			header: (): React.ReactNode => 'Description',
+			accessorFn: (row): string => row.desc,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+	];
+}
+
+function createTestColumnsWithGroup(): TableColumnDef<TestItemWithGroup>[] {
+	return [
+		{
+			id: 'id',
+			header: (): React.ReactNode => 'Id',
+			accessorFn: (row): string => row.id,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+		{
+			id: 'name',
+			header: (): React.ReactNode => 'Name',
+			accessorFn: (row): string => row.name,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+		{
+			id: 'group',
+			header: (): React.ReactNode => 'Group',
+			accessorFn: (row): string => row.group,
+			cell: ({ value }): React.ReactNode => <>{value}</>,
+		},
+	];
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+function renderComponent<T extends K8sEntityData>({
+	queryParams,
+	onUrlUpdate,
+	...props
+}: K8sBaseListProps<T> & {
+	queryParams?: Record<string, string>;
+	onUrlUpdate?: OnUrlUpdateFunction;
+}) {
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				retry: false,
+			},
+		},
+	});
+
+	return render(
+		<MemoryRouter>
+			<MemoryRouterV5>
+				<TimezoneProvider>
+					<QueryClientProvider client={queryClient}>
+						<AppProvider>
+							<Provider store={store}>
+								<NuqsTestingAdapter
+									searchParams={queryParams}
+									onUrlUpdate={onUrlUpdate}
+								>
+									<VirtuosoMockContext.Provider
+										value={{ viewportHeight: 800, itemHeight: 50 }}
+									>
+										<TooltipProvider>
+											<K8sBaseList {...props} />
+										</TooltipProvider>
+									</VirtuosoMockContext.Provider>
+								</NuqsTestingAdapter>
+							</Provider>
+						</AppProvider>
+					</QueryClientProvider>
+				</TimezoneProvider>
+			</MemoryRouterV5>
+		</MemoryRouter>,
+	);
+}
+
+describe('K8sBaseList', () => {
+	describe('with items in the list', () => {
+		const itemId = Math.random().toString(36).slice(7);
+		const itemId2 = Math.random().toString(36).slice(7);
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItemWithTitle>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItemWithTitle>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			openInNewTabMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [
+					{ id: `PodId:${itemId}`, title: `PodTitle:${itemId}` },
+					{ id: `PodId:${itemId2}`, title: `PodTitle:${itemId2}` },
+				],
+				total: 25,
+				error: null,
+			});
+
+			renderComponent<TestItemWithTitle>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithTitle(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should render all the items in the list', async () => {
+			await waitFor(async () => {
+				await expect(
+					screen.findByText(`PodId:${itemId}`),
+				).resolves.toBeInTheDocument();
+				await expect(
+					screen.findByText(`PodTitle:${itemId}`),
+				).resolves.toBeInTheDocument();
+				await expect(
+					screen.findByText(`PodId:${itemId2}`),
+				).resolves.toBeInTheDocument();
+				await expect(
+					screen.findByText(`PodTitle:${itemId2}`),
+				).resolves.toBeInTheDocument();
+			});
+		});
+
+		it('should call fetchListData with default filters', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+
+			const [filters] = fetchListDataMock.mock.calls[0];
+			expect(filters.limit).toBe(10);
+			expect(filters.offset).toBe(0);
+			expect(filters.filters).toStrictEqual({ items: [], op: 'AND' });
+			expect(filters.groupBy).toBeUndefined();
+			expect(filters.orderBy).toBeUndefined();
+		});
+
+		it('should click to open the row details and update selectedItem in URL', async () => {
+			const user = userEvent.setup();
+
+			const firstRowEl = await screen.findByText(`PodId:${itemId}`);
+			await user.click(firstRowEl);
+
+			await waitFor(() => {
+				const selectedItem = onUrlUpdateMock.mock.calls
+					.map((call) => call[0].searchParams.get('selectedItem'))
+					.filter(Boolean)
+					.pop();
+				expect(selectedItem).toBe(`PodId:${itemId}`);
+			});
+		});
+
+		it('should update orderBy in URL when clicking sortable column header', async () => {
+			const user = userEvent.setup();
+
+			await waitFor(() => {
+				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
+			});
+
+			// TanStackTable renders a sort button with title attribute
+			const sortButton = screen.getByTitle('Id');
+			await user.click(sortButton);
+
+			await waitFor(() => {
+				const lastOrderBy = onUrlUpdateMock.mock.calls
+					.map((call) => call[0].searchParams.get('orderBy'))
+					.filter(Boolean)
+					.pop();
+
+				expect(lastOrderBy).toBeDefined();
+				const parsed = JSON.parse(lastOrderBy as string);
+				expect(parsed.columnName).toBe('id');
+				expect(parsed.order).toBe('asc');
+			});
+		});
+
+		it('should toggle sort order in URL on subsequent header clicks', async () => {
+			await waitFor(() => {
+				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
+			});
+
+			// Track orderBy calls
+			const getOrderByCalls = (): string[] =>
+				onUrlUpdateMock.mock.calls
+					.map((call) => call[0].searchParams.get('orderBy'))
+					.filter(Boolean) as string[];
+
+			// First click - should set ascending
+			const sortButton = screen.getByTitle('Id');
+			expect(sortButton).toHaveAttribute('data-sort', 'none');
+			fireEvent.click(sortButton);
+
+			// Wait for URL to show ascending
+			await waitFor(() => {
+				const calls = getOrderByCalls();
+				expect(calls.length).toBeGreaterThan(0);
+				const parsed = JSON.parse(calls[calls.length - 1]);
+				expect(parsed.order).toBe('asc');
+			});
+
+			// Wait for button to have ascending state
+			await waitFor(() => {
+				expect(screen.getByTitle('Id')).toHaveAttribute('data-sort', 'ascending');
+			});
+
+			const callsAfterFirstClick = getOrderByCalls().length;
+
+			// Verify only one button exists with title 'Id'
+			const allIdButtons = screen.getAllByTitle('Id');
+			expect(allIdButtons).toHaveLength(1);
+
+			// Second click - should set descending
+			const ascendingButton = screen.getByTitle('Id');
+			expect(ascendingButton).toHaveAttribute('data-sort', 'ascending');
+			fireEvent.click(ascendingButton);
+
+			// Wait for URL to show descending (must be a new call)
+			await waitFor(() => {
+				const calls = getOrderByCalls();
+				expect(calls.length).toBeGreaterThan(callsAfterFirstClick);
+				const parsed = JSON.parse(calls[calls.length - 1]);
+				expect(parsed.order).toBe('desc');
+			});
+
+			// Verify DOM updated
+			await waitFor(() => {
+				expect(screen.getByTitle('Id')).toHaveAttribute('data-sort', 'descending');
+			});
+		});
+
+		it('should update page in URL when clicking pagination', async () => {
+			const user = userEvent.setup();
+
+			await waitFor(() => {
+				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
+			});
+
+			// Find pagination navigation and page 2 button
+			const nav = screen.getByRole('navigation');
+			const page2Button = Array.from(nav.querySelectorAll('button')).find(
+				(btn) => btn.textContent?.trim() === '2',
+			);
+			if (!page2Button) {
+				throw new Error('Page 2 button not found in pagination');
+			}
+			await user.click(page2Button);
+
+			await waitFor(() => {
+				const lastPage = onUrlUpdateMock.mock.calls
+					.map((call) => call[0].searchParams.get('page'))
+					.filter(Boolean)
+					.pop();
+
+				expect(lastPage).toBe('2');
+			});
+		});
+
+		it('should open row in new tab when ctrl+click on row', async () => {
+			await waitFor(() => {
+				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
+			});
+
+			const firstRow = screen.getByText(`PodId:${itemId}`);
+			// Ctrl+click to open in new tab
+			fireEvent.click(firstRow, { ctrlKey: true });
+
+			await waitFor(() => {
+				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
+				expect(openInNewTabMock).toHaveBeenCalledWith(
+					expect.stringContaining(`selectedItem=PodId%3A${itemId}`),
+				);
+			});
+		});
+
+		it('should open row in new tab when meta+click (cmd on Mac) on row', async () => {
+			await waitFor(() => {
+				expect(screen.getByText(`PodId:${itemId}`)).toBeInTheDocument();
+			});
+
+			const firstRow = screen.getByText(`PodId:${itemId}`);
+			// Meta+click (cmd on Mac) to open in new tab
+			fireEvent.click(firstRow, { metaKey: true });
+
+			await waitFor(() => {
+				expect(openInNewTabMock).toHaveBeenCalledTimes(1);
+				expect(openInNewTabMock).toHaveBeenCalledWith(
+					expect.stringContaining(`selectedItem=PodId%3A${itemId}`),
+				);
+			});
+		});
+	});
+
+	describe('with URL params (orderBy, groupBy, pagination)', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+		const groupByValue = [
+			{ key: 'k8s.namespace.name', dataType: 'string', type: 'resource' },
+		];
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [
+					{ id: 'namespace-default', meta: { 'k8s.namespace.name': 'default' } },
+				],
+				total: 50,
+				error: null,
+			});
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: {
+					orderBy: JSON.stringify({ columnName: 'cpu', order: 'desc' }),
+					groupBy: JSON.stringify(groupByValue),
+					page: '3',
+				},
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should call fetchListData with orderBy/groupBy/offset/limit from URL', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+
+			const [filters] = fetchListDataMock.mock.calls[0];
+			expect(filters.orderBy).toStrictEqual({ columnName: 'cpu', order: 'desc' });
+			expect(filters.groupBy).toStrictEqual(groupByValue);
+			expect(filters.offset).toBe(20); // (3 - 1) * 10 = 20
+			expect(filters.limit).toBe(10);
+		});
+
+		it('should render expand icons when groupBy is set', async () => {
+			await waitFor(() => {
+				expect(screen.getByText('namespace-default')).toBeInTheDocument();
+			});
+
+			const expandButtons = screen.getAllByRole('button');
+			expect(expandButtons.length).toBeGreaterThan(0);
+		});
+
+		it('should render data with groupBy params', async () => {
+			await waitFor(() => {
+				expect(screen.getByText('namespace-default')).toBeInTheDocument();
+			});
+
+			// Verify the call was made with correct groupBy
+			const callWithGroupBy = fetchListDataMock.mock.calls.find(
+				(c) => c[0].groupBy && c[0].groupBy.length > 0,
+			);
+			expect(callWithGroupBy).toBeDefined();
+			expect(callWithGroupBy?.[0].groupBy).toStrictEqual(groupByValue);
+		});
+	});
+
+	describe('with empty data', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [],
+				total: 0,
+				error: null,
+				rawData: {
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+				},
+			});
+
+			renderComponent<TestItem>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should display empty state when no data is returned', async () => {
+			await waitFor(() => {
+				expect(screen.getByText(/This query had no results/i)).toBeInTheDocument();
+			});
+		});
+
+		it('should still call fetchListData', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+		});
+	});
+
+	describe('with error response', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [],
+				total: 0,
+				error: 'Failed to fetch pods',
+			});
+
+			renderComponent<TestItem>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should call fetchListData even when error occurs', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+		});
+
+		it('should display error message when data.error is set', async () => {
+			await waitFor(() => {
+				expect(screen.getByText(/Failed to fetch pods/i)).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('with no metrics data (sentAnyHostMetricsData=false)', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [],
+				total: 0,
+				error: null,
+				rawData: {
+					sentAnyHostMetricsData: false,
+					isSendingK8SAgentMetrics: false,
+				},
+			});
+
+			renderComponent<TestItem>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should display no metrics data message', async () => {
+			await waitFor(() => {
+				expect(
+					screen.getByText(/No host metrics data received yet/i),
+				).toBeInTheDocument();
+			});
+		});
+
+		it('should display link to documentation', async () => {
+			await waitFor(() => {
+				const link = screen.getByRole('link', { name: /our documentation/i });
+				expect(link).toBeInTheDocument();
+				expect(link).toHaveAttribute(
+					'href',
+					'https://signoz.io/docs/infrastructure-monitoring/hostmetrics/',
+				);
+			});
+		});
+	});
+
+	describe('with incorrect K8s agent metrics (isSendingK8SAgentMetrics=true)', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [],
+				total: 0,
+				error: null,
+				rawData: {
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: true,
+				},
+			});
+
+			renderComponent<TestItem>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should display upgrade message', async () => {
+			await waitFor(() => {
+				expect(
+					screen.getByText(/upgrade to the latest version of SigNoz k8s-infra/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('with end time before retention (endTimeBeforeRetention=true)', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [],
+				total: 0,
+				error: null,
+				rawData: {
+					sentAnyHostMetricsData: true,
+					isSendingK8SAgentMetrics: false,
+					endTimeBeforeRetention: true,
+				},
+			});
+
+			renderComponent<TestItem>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should display time range before retention message', async () => {
+			await waitFor(() => {
+				expect(
+					screen.getByText(/Queried time range is before earliest K8s metrics/i),
+				).toBeInTheDocument();
+				expect(
+					screen.getByText(/please adjust your end time/i),
+				).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('column visibility based on TanStack columns', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItemWithName>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItemWithName>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [{ id: 'item-1', name: 'Item 1', desc: 'Description 1' }],
+				total: 1,
+				error: null,
+			});
+		});
+
+		it('should show all columns defined in tableColumns', async () => {
+			renderComponent<TestItemWithName>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithName(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('item-1')).toBeInTheDocument();
+			});
+
+			// All columns should be visible
+			expect(
+				screen.getByRole('columnheader', { name: /id/i }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('columnheader', { name: /name/i }),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('column behavior with groupBy (expanded/collapsed)', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItemWithGroup>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItemWithGroup>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [
+					{
+						id: 'item-1',
+						name: 'Item 1',
+						group: 'Group A',
+						meta: { 'k8s.namespace.name': 'default' },
+					},
+				],
+				total: 1,
+				error: null,
+			});
+		});
+
+		it('should show columns when NOT grouped', async () => {
+			renderComponent<TestItemWithGroup>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: {},
+				tableColumns: createTestColumnsWithGroup(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('item-1')).toBeInTheDocument();
+			});
+
+			// Columns should be visible
+			expect(
+				screen.getByRole('columnheader', { name: /id/i }),
+			).toBeInTheDocument();
+		});
+
+		it('should show columns when grouped', async () => {
+			const groupByValue = [
+				{ key: 'k8s.namespace.name', dataType: 'string', type: 'resource' },
+			];
+
+			renderComponent<TestItemWithGroup>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: {
+					groupBy: JSON.stringify(groupByValue),
+				},
+				tableColumns: createTestColumnsWithGroup(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('item-1')).toBeInTheDocument();
+			});
+
+			// Id should be visible
+			expect(
+				screen.getByRole('columnheader', { name: /id/i }),
+			).toBeInTheDocument();
+		});
+	});
+
+	describe('column visibility in expanded row (nested table)', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItem>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItem>['fetchListData']>
+		>();
+		const groupByValue = [
+			{ key: 'k8s.namespace.name', dataType: 'string', type: 'resource' },
+		];
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [
+					{ id: 'namespace-default', meta: { 'k8s.namespace.name': 'default' } },
+				],
+				total: 50,
+				error: null,
+			});
+
+			renderComponent<TestItem>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: {
+					groupBy: JSON.stringify(groupByValue),
+				},
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should render table with groupBy params and enable expansion', async () => {
+			await waitFor(() => {
+				expect(screen.getByText('namespace-default')).toBeInTheDocument();
+			});
+
+			// Verify fetch was called with groupBy
+			const callWithGroupBy = fetchListDataMock.mock.calls.find(
+				(c) => c[0].groupBy && c[0].groupBy.length > 0,
+			);
+			expect(callWithGroupBy).toBeDefined();
+		});
+	});
+
+	describe('TanStack table column rendering', () => {
+		const fetchListDataMock = jest.fn<
+			ReturnType<K8sBaseListProps<TestItemWithName>['fetchListData']>,
+			Parameters<K8sBaseListProps<TestItemWithName>['fetchListData']>
+		>();
+
+		beforeEach(() => {
+			fetchListDataMock.mockClear();
+			fetchListDataMock.mockResolvedValue({
+				data: [
+					{ id: 'item-1', name: 'Item 1', desc: 'Description 1' },
+					{ id: 'item-2', name: 'Item 2', desc: 'Description 2' },
+				],
+				total: 2,
+				error: null,
+			});
+		});
+
+		it('should render all defined columns', async () => {
+			renderComponent<TestItemWithName>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithName(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('item-1')).toBeInTheDocument();
+			});
+
+			// All columns should be visible
+			expect(
+				screen.getByRole('columnheader', { name: /id/i }),
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole('columnheader', { name: /^name$/i }),
+			).toBeInTheDocument();
+		});
+
+		it('should render data in cells correctly', async () => {
+			renderComponent<TestItemWithName>({
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				tableColumns: createTestColumnsWithName(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('item-1')).toBeInTheDocument();
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+				expect(screen.getByText('item-2')).toBeInTheDocument();
+				expect(screen.getByText('Item 2')).toBeInTheDocument();
+			});
+		});
+	});
+});

frontend/src/container/InfraMonitoringK8s/Base/types.ts

@@ -0,0 +1,26 @@
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { OrderBySchemaType } from '../schemas';
+
+export type K8sBaseFilters = {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	start: number;
+	end: number;
+	orderBy?: OrderBySchemaType;
+};
+
+/**
+ * Type for table row data with required key fields.
+ * Used when rendering raw data in the table.
+ */
+export type K8sTableRowData<T> = T & {
+	key: string;
+	id: string;
+	itemKey: string;
+	/** Metadata about which attributes were used for grouping */
+	groupedByMeta?: Record<string, string>;
+};

frontend/src/container/InfraMonitoringK8s/Base/useInfraMonitoringTableColumnsStore.ts

@@ -0,0 +1,114 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export interface IEntityColumn {
+	label: string;
+	value: string;
+	id: string;
+	defaultVisibility: boolean;
+	canBeHidden: boolean;
+	behavior: 'hidden-on-expand' | 'hidden-on-collapse' | 'always-visible';
+}
+
+export interface IInfraMonitoringTableColumnsStore {
+	columns: Record<string, IEntityColumn[]>;
+	columnsHidden: Record<string, string[]>;
+	addColumn: (page: string, columnId: string) => void;
+	removeColumn: (page: string, columnId: string) => void;
+	initializePageColumns: (page: string, columns: IEntityColumn[]) => void;
+}
+
+export const useInfraMonitoringTableColumnsStore =
+	create<IInfraMonitoringTableColumnsStore>()(
+		persist(
+			(set, get) => ({
+				columns: {},
+				columnsHidden: {},
+				addColumn: (page, columnId): void => {
+					const state = get();
+					const columnDefinition = state.columns[page]?.find(
+						(c) => c.id === columnId,
+					);
+
+					if (!columnDefinition) {
+						return;
+					}
+
+					if (!columnDefinition.canBeHidden) {
+						return;
+					}
+
+					const columnsHidden = state.columnsHidden[page];
+
+					if (columnsHidden.includes(columnId)) {
+						set({
+							columnsHidden: {
+								...state.columnsHidden,
+								[page]: columnsHidden.filter((id) => id !== columnId),
+							},
+						});
+					}
+				},
+				removeColumn: (page, columnId): void => {
+					const state = get();
+					const columnDefinition = state.columns[page]?.find(
+						(c) => c.id === columnId,
+					);
+
+					if (!columnDefinition) {
+						return;
+					}
+
+					if (!columnDefinition.canBeHidden) {
+						return;
+					}
+
+					const columnsHidden = state.columnsHidden[page];
+
+					if (!columnsHidden.includes(columnId)) {
+						set({
+							columnsHidden: {
+								...state.columnsHidden,
+								[page]: [...columnsHidden, columnId],
+							},
+						});
+					}
+				},
+				initializePageColumns: (page, columns): void => {
+					const state = get();
+
+					set({
+						columns: {
+							...state.columns,
+							[page]: columns,
+						},
+					});
+
+					if (state.columnsHidden[page] === undefined) {
+						set({
+							columnsHidden: {
+								...state.columnsHidden,
+								[page]: columns
+									.filter((c) => c.defaultVisibility === false)
+									.map((c) => c.id),
+							},
+						});
+					}
+				},
+			}),
+			{
+				name: '@signoz/infra-monitoring-columns',
+			},
+		),
+	);
+
+export const useInfraMonitoringTableColumnsForPage = (
+	page: string,
+): [columns: IEntityColumn[], columnsHidden: string[]] => {
+	const state = useInfraMonitoringTableColumnsStore((s) => s.columns);
+	const columnsHidden = useInfraMonitoringTableColumnsStore(
+		(s) => s.columnsHidden,
+	);
+
+	return [state[page] ?? [], columnsHidden[page] ?? []];
+};

frontend/src/container/InfraMonitoringK8s/Base/utils.module.scss

@@ -0,0 +1,18 @@
+.itemDataGroup {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex-wrap: wrap;
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.itemDataGroupTagItem {
+	display: block !important;
+	max-width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

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

@@ -0,0 +1,100 @@
+import { Badge } from '@signozhq/ui/badge';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import styles from './utils.module.scss';
+
+const dotToUnder: Record<string, string> = {
+	'os.type': 'os_type',
+	'host.name': 'host_name',
+	'deployment.environment': 'deployment_environment',
+	'k8s.node.name': 'k8s_node_name',
+	'k8s.cluster.name': 'k8s_cluster_name',
+	'k8s.node.uid': 'k8s_node_uid',
+	'k8s.cronjob.name': 'k8s_cronjob_name',
+	'k8s.daemonset.name': 'k8s_daemonset_name',
+	'k8s.deployment.name': 'k8s_deployment_name',
+	'k8s.job.name': 'k8s_job_name',
+	'k8s.namespace.name': 'k8s_namespace_name',
+	'k8s.pod.name': 'k8s_pod_name',
+	'k8s.pod.uid': 'k8s_pod_uid',
+	'k8s.statefulset.name': 'k8s_statefulset_name',
+	'k8s.persistentvolumeclaim.name': 'k8s_persistentvolumeclaim_name',
+};
+
+export function getGroupedByMeta<T extends { meta?: Record<string, string> }>(
+	itemData: T,
+	groupBy: BaseAutocompleteData[],
+): Record<string, string> {
+	const result: Record<string, string> = {};
+	const meta = itemData.meta ?? {};
+
+	groupBy.forEach((group) => {
+		const rawKey = group.key as string;
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof meta;
+		result[rawKey] = (meta[metaKey] || meta[rawKey]) ?? '';
+	});
+
+	return result;
+}
+
+export function getRowKey<T extends { meta?: Record<string, string> }>(
+	itemData: T,
+	getItemIdentifier: () => string,
+	groupBy: BaseAutocompleteData[],
+): string {
+	const nodeIdentifier = getItemIdentifier();
+	const meta = itemData.meta ?? {};
+
+	if (groupBy.length === 0) {
+		return nodeIdentifier || JSON.stringify(meta);
+	}
+
+	const groupedMeta = getGroupedByMeta(itemData, groupBy);
+	const groupKey = Object.values(groupedMeta).join('-');
+
+	if (groupKey && nodeIdentifier) {
+		return `${groupKey}-${nodeIdentifier}`;
+	}
+	if (groupKey) {
+		return groupKey;
+	}
+	if (nodeIdentifier) {
+		return nodeIdentifier;
+	}
+
+	return JSON.stringify(meta);
+}
+
+export function getGroupByEl<T extends { meta?: Record<string, string> }>(
+	itemData: T,
+	groupBy: IBuilderQuery['groupBy'],
+): React.ReactNode {
+	const groupByValues: string[] = [];
+	const meta = itemData.meta ?? {};
+
+	groupBy.forEach((group) => {
+		const rawKey = group.key as string;
+
+		// Choose mapped key if present, otherwise use rawKey
+		const metaKey = (dotToUnder[rawKey] ?? rawKey) as keyof typeof meta;
+		const value = meta[metaKey] || meta[rawKey] || '<no-value>';
+
+		groupByValues.push(value);
+	});
+
+	return (
+		<div className={styles.itemDataGroup}>
+			{groupByValues.map((value, index) => (
+				<Badge
+					// oxlint-disable-next-line react/no-array-index-key
+					key={`${index}-${value}`}
+					color="secondary"
+					className={styles.itemDataGroupTagItem}
+				>
+					{value === '' ? '<no-value>' : value}
+				</Badge>
+			))}
+		</div>
+	);
+}

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

@@ -0,0 +1,117 @@
+import React, { useCallback } from 'react';
+import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
+import { K8sBaseList } from '../Base/K8sBaseList';
+import { K8sBaseFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { getK8sClustersList, K8sClusterData } from './api';
+import {
+	clusterWidgetInfo,
+	getClusterMetricsQueryPayload,
+	k8sClusterDetailsMetadataConfig,
+	k8sClusterGetEntityName,
+	k8sClusterGetSelectedItemFilters,
+	k8sClusterInitialEventsFilter,
+	k8sClusterInitialLogTracesFilter,
+} from './constants';
+import {
+	getK8sClusterItemKey,
+	getK8sClusterRowKey,
+	k8sClustersColumnsConfig,
+} from './table.config';
+
+function K8sClustersList({
+	controlListPrefix,
+}: {
+	controlListPrefix?: React.ReactNode;
+}): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const fetchListData = useCallback(
+		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
+			filters.orderBy ||= {
+				columnName: 'cpu',
+				order: 'desc',
+			};
+
+			const response = await getK8sClustersList(
+				filters,
+				signal,
+				undefined,
+				dotMetricsEnabled,
+			);
+
+			return {
+				data: response.payload?.data.records || [],
+				total: response.payload?.data.total || 0,
+				error: response.error,
+				rawData: response.payload?.data,
+			};
+		},
+		[dotMetricsEnabled],
+	);
+
+	const fetchEntityData = useCallback(
+		async (
+			filters: K8sDetailsFilters,
+			signal?: AbortSignal,
+		): Promise<{ data: K8sClusterData | null; error?: string | null }> => {
+			const response = await getK8sClustersList(
+				{
+					filters: filters.filters,
+					start: filters.start,
+					end: filters.end,
+					limit: 1,
+					offset: 0,
+				},
+				signal,
+				undefined,
+				dotMetricsEnabled,
+			);
+
+			const records = response.payload?.data.records || [];
+
+			return {
+				data: records.length > 0 ? records[0] : null,
+				error: response.error,
+			};
+		},
+		[dotMetricsEnabled],
+	);
+
+	return (
+		<>
+			<K8sBaseList<K8sClusterData>
+				controlListPrefix={controlListPrefix}
+				entity={InfraMonitoringEntity.CLUSTERS}
+				tableColumns={k8sClustersColumnsConfig}
+				fetchListData={fetchListData}
+				getRowKey={getK8sClusterRowKey}
+				getItemKey={getK8sClusterItemKey}
+				eventCategory={InfraMonitoringEvents.Cluster}
+			/>
+
+			<K8sBaseDetails<K8sClusterData>
+				category={InfraMonitoringEntity.CLUSTERS}
+				eventCategory={InfraMonitoringEvents.Cluster}
+				getSelectedItemFilters={k8sClusterGetSelectedItemFilters}
+				fetchEntityData={fetchEntityData}
+				getEntityName={k8sClusterGetEntityName}
+				getInitialLogTracesFilters={k8sClusterInitialLogTracesFilter}
+				getInitialEventsFilters={k8sClusterInitialEventsFilter}
+				metadataConfig={k8sClusterDetailsMetadataConfig}
+				entityWidgetInfo={clusterWidgetInfo}
+				getEntityQueryPayload={getClusterMetricsQueryPayload}
+				queryKeyPrefix="cluster"
+			/>
+		</>
+	);
+}
+
+export default K8sClustersList;

frontend/src/container/InfraMonitoringK8s/Clusters/api.ts

@@ -0,0 +1,125 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { UnderscoreToDotMap } from 'api/utils';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { K8sBaseFilters } from '../Base/types';
+
+export interface K8sClustersListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface K8sClusterData {
+	clusterUID: string;
+	cpuUsage: number;
+	cpuAllocatable: number;
+	memoryUsage: number;
+	memoryAllocatable: number;
+	meta: {
+		k8s_cluster_name: string;
+		k8s_cluster_uid: string;
+	};
+}
+
+export interface K8sClustersListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sClusterData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+// TODO(H4ad): Erase this whole file when migrating to openapi
+export const clustersMetaMap = [
+	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+	{ dot: 'k8s.cluster.uid', under: 'k8s_cluster_uid' },
+] as const;
+
+export function mapClustersMeta(
+	raw: Record<string, unknown>,
+): K8sClusterData['meta'] {
+	const out: Record<string, unknown> = { ...raw };
+	clustersMetaMap.forEach(({ dot, under }) => {
+		if (dot in raw) {
+			const v = raw[dot];
+			out[under] = typeof v === 'string' ? v : raw[under];
+		}
+	});
+	return out as K8sClusterData['meta'];
+}
+
+export const getK8sClustersList = async (
+	props: K8sBaseFilters,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
+): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
+	try {
+		const requestProps = dotMetricsEnabled
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
+									return acc;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+				}
+			: props;
+
+		const response = await axios.post('/clusters/list', requestProps, {
+			signal,
+			headers,
+		});
+		const payload: K8sClustersListResponse = response.data;
+
+		payload.data.records = payload.data.records.map((record) => ({
+			...record,
+			meta: mapClustersMeta(record.meta as Record<string, unknown>),
+		}));
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload,
+			params: requestProps,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/container/InfraMonitoringK8s/Clusters/table.config.tsx

@@ -0,0 +1,156 @@
+import { Tooltip } from 'antd';
+import { TableColumnDef } from 'components/TanStackTableView';
+import TanStackTable from 'components/TanStackTableView';
+import { ExpandButtonWrapper } from 'container/InfraMonitoringK8s/components';
+
+import EntityGroupHeader from '../Base/EntityGroupHeader';
+import K8sGroupCell from '../Base/K8sGroupCell';
+import { formatBytes } from '../commonUtils';
+import { ValidateColumnValueWrapper } from '../components';
+import { InfraMonitoringEntity } from '../constants';
+import { K8sClusterData, K8sClustersListPayload } from './api';
+import { Boxes } from '@signozhq/icons';
+
+export function getK8sClusterRowKey(cluster: K8sClusterData): string {
+	return (
+		cluster.clusterUID ||
+		cluster.meta.k8s_cluster_uid ||
+		cluster.meta.k8s_cluster_name
+	);
+}
+
+export function getK8sClusterItemKey(cluster: K8sClusterData): string {
+	return cluster.meta.k8s_cluster_name;
+}
+
+export const getK8sClustersListQuery = (): K8sClustersListPayload => ({
+	filters: {
+		items: [],
+		op: 'and',
+	},
+	orderBy: { columnName: 'cpu', order: 'desc' },
+});
+
+export const k8sClustersColumnsConfig: TableColumnDef<K8sClusterData>[] = [
+	{
+		id: 'clusterGroup',
+		header: (): React.ReactNode => <EntityGroupHeader title="CLUSTER GROUP" />,
+		accessorFn: (row): string => row.meta.k8s_cluster_name || '',
+		width: { min: 300 },
+		enableSort: false,
+		enableRemove: false,
+		enableMove: false,
+		pin: 'left',
+		visibilityBehavior: 'hidden-on-collapse',
+		cell: ({ isExpanded, toggleExpanded, row }): JSX.Element | null => {
+			return (
+				<ExpandButtonWrapper
+					isExpanded={isExpanded}
+					toggleExpanded={toggleExpanded}
+				>
+					<K8sGroupCell row={row} />
+				</ExpandButtonWrapper>
+			);
+		},
+	},
+	{
+		id: 'clusterName',
+		header: (): React.ReactNode => (
+			<EntityGroupHeader
+				title="Cluster Name"
+				icon={<Boxes data-hide-expanded="true" size={14} />}
+			/>
+		),
+		accessorFn: (row): string => row.meta.k8s_cluster_name || '',
+		width: { min: 290 },
+		enableSort: false,
+		enableRemove: false,
+		enableMove: false,
+		pin: 'left',
+		visibilityBehavior: 'hidden-on-expand',
+		cell: ({ value }): React.ReactNode => {
+			const clusterName = value as string;
+			return (
+				<Tooltip title={clusterName}>
+					<TanStackTable.Text>{clusterName}</TanStackTable.Text>
+				</Tooltip>
+			);
+		},
+	},
+	{
+		id: 'cpu',
+		header: 'CPU Usage (cores)',
+		accessorFn: (row): number => row.cpuUsage,
+		width: { min: 220 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const cpu = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={cpu}
+					entity={InfraMonitoringEntity.CLUSTERS}
+					attribute="CPU metric"
+				>
+					<TanStackTable.Text>{cpu}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'cpu_allocatable',
+		header: 'CPU Alloc (cores)',
+		accessorFn: (row): number => row.cpuAllocatable,
+		width: { min: 220 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const cpuAllocatable = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={cpuAllocatable}
+					entity={InfraMonitoringEntity.CLUSTERS}
+					attribute="CPU allocatable metric"
+				>
+					<TanStackTable.Text>{cpuAllocatable}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'memory',
+		header: 'Memory Usage (WSS)',
+		accessorFn: (row): number => row.memoryUsage,
+		width: { min: 220 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const memory = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={memory}
+					entity={InfraMonitoringEntity.CLUSTERS}
+					attribute="memory metric"
+				>
+					<TanStackTable.Text>{formatBytes(memory)}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'memory_allocatable',
+		header: 'Memory Allocatable',
+		accessorFn: (row): number => row.memoryAllocatable,
+		width: { min: 220 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const memoryAllocatable = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={memoryAllocatable}
+					entity={InfraMonitoringEntity.CLUSTERS}
+					attribute="memory allocatable metric"
+				>
+					<TanStackTable.Text>{formatBytes(memoryAllocatable)}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+];

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

@@ -0,0 +1,117 @@
+import React, { useCallback } from 'react';
+import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
+import { K8sBaseList } from '../Base/K8sBaseList';
+import { K8sBaseFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { getK8sDaemonSetsList, K8sDaemonSetsData } from './api';
+import {
+	daemonSetWidgetInfo,
+	getDaemonSetMetricsQueryPayload,
+	k8sDaemonSetDetailsMetadataConfig,
+	k8sDaemonSetGetEntityName,
+	k8sDaemonSetGetSelectedItemFilters,
+	k8sDaemonSetInitialEventsFilter,
+	k8sDaemonSetInitialLogTracesFilter,
+} from './constants';
+import {
+	getK8sDaemonSetItemKey,
+	getK8sDaemonSetRowKey,
+	k8sDaemonSetsColumnsConfig,
+} from './table.config';
+
+function K8sDaemonSetsList({
+	controlListPrefix,
+}: {
+	controlListPrefix?: React.ReactNode;
+}): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const fetchListData = useCallback(
+		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
+			filters.orderBy ||= {
+				columnName: 'cpu',
+				order: 'desc',
+			};
+
+			const response = await getK8sDaemonSetsList(
+				filters,
+				signal,
+				undefined,
+				dotMetricsEnabled,
+			);
+
+			return {
+				data: response.payload?.data.records || [],
+				total: response.payload?.data.total || 0,
+				error: response.error,
+				rawData: response.payload?.data,
+			};
+		},
+		[dotMetricsEnabled],
+	);
+
+	const fetchEntityData = useCallback(
+		async (
+			filters: K8sDetailsFilters,
+			signal?: AbortSignal,
+		): Promise<{ data: K8sDaemonSetsData | null; error?: string | null }> => {
+			const response = await getK8sDaemonSetsList(
+				{
+					filters: filters.filters,
+					start: filters.start,
+					end: filters.end,
+					limit: 1,
+					offset: 0,
+				},
+				signal,
+				undefined,
+				dotMetricsEnabled,
+			);
+
+			const records = response.payload?.data.records || [];
+
+			return {
+				data: records.length > 0 ? records[0] : null,
+				error: response.error,
+			};
+		},
+		[dotMetricsEnabled],
+	);
+
+	return (
+		<>
+			<K8sBaseList<K8sDaemonSetsData>
+				controlListPrefix={controlListPrefix}
+				entity={InfraMonitoringEntity.DAEMONSETS}
+				tableColumns={k8sDaemonSetsColumnsConfig}
+				fetchListData={fetchListData}
+				getRowKey={getK8sDaemonSetRowKey}
+				getItemKey={getK8sDaemonSetItemKey}
+				eventCategory={InfraMonitoringEvents.DaemonSet}
+			/>
+
+			<K8sBaseDetails<K8sDaemonSetsData>
+				category={InfraMonitoringEntity.DAEMONSETS}
+				eventCategory={InfraMonitoringEvents.DaemonSet}
+				getSelectedItemFilters={k8sDaemonSetGetSelectedItemFilters}
+				fetchEntityData={fetchEntityData}
+				getEntityName={k8sDaemonSetGetEntityName}
+				getInitialLogTracesFilters={k8sDaemonSetInitialLogTracesFilter}
+				getInitialEventsFilters={k8sDaemonSetInitialEventsFilter}
+				metadataConfig={k8sDaemonSetDetailsMetadataConfig}
+				entityWidgetInfo={daemonSetWidgetInfo}
+				getEntityQueryPayload={getDaemonSetMetricsQueryPayload}
+				queryKeyPrefix="daemonset"
+			/>
+		</>
+	);
+}
+
+export default K8sDaemonSetsList;

frontend/src/container/InfraMonitoringK8s/DaemonSets/api.ts

@@ -0,0 +1,119 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { UnderscoreToDotMap } from 'api/utils';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+import { K8sBaseFilters } from '../Base/types';
+
+export interface K8sDaemonSetsData {
+	daemonSetName: string;
+	cpuUsage: number;
+	memoryUsage: number;
+	cpuRequest: number;
+	memoryRequest: number;
+	cpuLimit: number;
+	memoryLimit: number;
+	restarts: number;
+	desiredNodes: number;
+	availableNodes: number;
+	meta: {
+		k8s_cluster_name: string;
+		k8s_daemonset_name: string;
+		k8s_namespace_name: string;
+	};
+}
+
+export interface K8sDaemonSetsListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sDaemonSetsData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+// TODO(H4ad): Erase this whole file when migrating to openapi
+export const daemonSetsMetaMap = [
+	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
+	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
+	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+] as const;
+
+export function mapDaemonSetsMeta(
+	raw: Record<string, unknown>,
+): K8sDaemonSetsData['meta'] {
+	const out: Record<string, unknown> = { ...raw };
+	daemonSetsMetaMap.forEach(({ dot, under }) => {
+		if (dot in raw) {
+			const v = raw[dot];
+			out[under] = typeof v === 'string' ? v : raw[under];
+		}
+	});
+	return out as K8sDaemonSetsData['meta'];
+}
+
+export const getK8sDaemonSetsList = async (
+	props: K8sBaseFilters,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
+): Promise<SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse> => {
+	try {
+		const requestProps = dotMetricsEnabled
+			? {
+					...props,
+					filters: {
+						...props.filters,
+						items: props.filters.items.reduce<typeof props.filters.items>(
+							(acc, item) => {
+								if (item.value === undefined) {
+									return acc;
+								}
+								if (
+									item.key &&
+									typeof item.key === 'object' &&
+									'key' in item.key &&
+									typeof item.key.key === 'string'
+								) {
+									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+									acc.push({
+										...item,
+										key: { ...item.key, key: mappedKey },
+									});
+								} else {
+									acc.push(item);
+								}
+								return acc;
+							},
+							[] as typeof props.filters.items,
+						),
+					},
+				}
+			: props;
+
+		const response = await axios.post('/daemonsets/list', requestProps, {
+			signal,
+			headers,
+		});
+		const payload: K8sDaemonSetsListResponse = response.data;
+
+		payload.data.records = payload.data.records.map((record) => ({
+			...record,
+			meta: mapDaemonSetsMeta(record.meta as Record<string, unknown>),
+		}));
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload,
+			params: requestProps,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

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

@@ -0,0 +1,697 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { v4 } from 'uuid';
+
+import {
+	createFilterItem,
+	K8sDetailsMetadataConfig,
+} from '../Base/K8sBaseDetails';
+import { QUERY_KEYS } from '../EntityDetailsUtils/utils';
+import { K8sDaemonSetsData } from './api';
+
+export const k8sDaemonSetGetSelectedItemFilters = (
+	selectedItemId: string,
+): TagFilter => ({
+	op: 'AND',
+	items: [
+		{
+			id: 'k8s_daemonset_name',
+			key: {
+				key: 'k8s_daemonset_name',
+				type: null,
+			},
+			op: '=',
+			value: selectedItemId,
+		},
+	],
+});
+
+export const k8sDaemonSetDetailsMetadataConfig: K8sDetailsMetadataConfig<K8sDaemonSetsData>[] =
+	[
+		{
+			label: 'Daemonset Name',
+			getValue: (p): string => p.meta.k8s_daemonset_name,
+		},
+		{
+			label: 'Cluster Name',
+			getValue: (p): string => p.meta.k8s_cluster_name,
+		},
+		{
+			label: 'Namespace Name',
+			getValue: (p): string => p.meta.k8s_namespace_name,
+		},
+	];
+
+export const k8sDaemonSetInitialEventsFilter = (
+	item: K8sDaemonSetsData,
+): ReturnType<typeof createFilterItem>[] => [
+	createFilterItem(QUERY_KEYS.K8S_OBJECT_KIND, 'DaemonSet'),
+	createFilterItem(QUERY_KEYS.K8S_OBJECT_NAME, item.meta.k8s_daemonset_name),
+];
+
+export const k8sDaemonSetInitialLogTracesFilter = (
+	item: K8sDaemonSetsData,
+): ReturnType<typeof createFilterItem>[] => [
+	createFilterItem(QUERY_KEYS.K8S_DAEMON_SET_NAME, item.meta.k8s_daemonset_name),
+	createFilterItem(QUERY_KEYS.K8S_NAMESPACE_NAME, item.meta.k8s_namespace_name),
+];
+
+export const k8sDaemonSetGetEntityName = (item: K8sDaemonSetsData): string =>
+	item.meta.k8s_daemonset_name;
+
+export const daemonSetWidgetInfo = [
+	{
+		title: 'CPU usage, request, limits',
+		yAxisUnit: '',
+	},
+	{
+		title: 'Memory usage, request, limits',
+		yAxisUnit: 'bytes',
+	},
+	{
+		title: 'Network IO',
+		yAxisUnit: 'binBps',
+	},
+	{
+		title: 'Network errors count',
+		yAxisUnit: '',
+	},
+];
+
+export const getDaemonSetMetricsQueryPayload = (
+	daemonSet: K8sDaemonSetsData,
+	start: number,
+	end: number,
+	dotMetricsEnabled: boolean,
+): GetQueryResultsProps[] => {
+	const k8sPodCpuUtilizationKey = dotMetricsEnabled
+		? 'k8s.pod.cpu.usage'
+		: 'k8s_pod_cpu_usage';
+
+	const k8sContainerCpuRequestKey = dotMetricsEnabled
+		? 'k8s.container.cpu_request'
+		: 'k8s_container_cpu_request';
+
+	const k8sContainerCpuLimitKey = dotMetricsEnabled
+		? 'k8s.container.cpu_limit'
+		: 'k8s_container_cpu_limit';
+
+	const k8sPodMemoryUsageKey = dotMetricsEnabled
+		? 'k8s.pod.memory.usage'
+		: 'k8s_pod_memory_usage';
+
+	const k8sContainerMemoryRequestKey = dotMetricsEnabled
+		? 'k8s.container.memory_request'
+		: 'k8s_container_memory_request';
+
+	const k8sContainerMemoryLimitKey = dotMetricsEnabled
+		? 'k8s.container.memory_limit'
+		: 'k8s_container_memory_limit';
+
+	const k8sPodNetworkIoKey = dotMetricsEnabled
+		? 'k8s.pod.network.io'
+		: 'k8s_pod_network_io';
+
+	const k8sPodNetworkErrorsKey = dotMetricsEnabled
+		? 'k8s.pod.network.errors'
+		: 'k8s_pod_network_errors';
+
+	const k8sDaemonSetNameKey = dotMetricsEnabled
+		? 'k8s.daemonset.name'
+		: 'k8s_daemonset_name';
+
+	const k8sPodNameKey = dotMetricsEnabled ? 'k8s.pod.name' : 'k8s_pod_name';
+
+	const k8sNamespaceNameKey = dotMetricsEnabled
+		? 'k8s.namespace.name'
+		: 'k8s_namespace_name';
+
+	return [
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_pod_cpu_usage--float64--Gauge--true',
+								key: k8sPodCpuUtilizationKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: '745a486f',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_daemonset_name--string--tag--false',
+											key: k8sDaemonSetNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [],
+							having: [],
+							legend: 'usage',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_container_cpu_request--float64--Gauge--true',
+								key: k8sContainerCpuRequestKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: '148dffa7',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_pod_name--string--tag--false',
+											key: k8sPodNameKey,
+											type: 'tag',
+										},
+										op: 'contains',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [],
+							having: [],
+							legend: 'requests',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_container_cpu_limit--float64--Gauge--true',
+								key: k8sContainerCpuLimitKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'C',
+							filters: {
+								items: [
+									{
+										id: 'd420a02b',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_pod_name--string--tag--false',
+											key: k8sPodNameKey,
+											type: 'tag',
+										},
+										op: 'contains',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [],
+							having: [],
+							legend: 'limits',
+							limit: null,
+							orderBy: [],
+							queryName: 'C',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				id: v4(),
+				promql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_pod_memory_usage--float64--Gauge--true',
+								key: k8sPodMemoryUsageKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: '6d3283ce',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_daemonset_name--string--tag--false',
+											key: k8sDaemonSetNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [],
+							having: [],
+							legend: 'usage',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_container_memory_request--float64--Gauge--true',
+								key: k8sContainerMemoryRequestKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'B',
+							filters: {
+								items: [
+									{
+										id: 'a334f5c2',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_pod_name--string--tag--false',
+											key: k8sPodNameKey,
+											type: 'tag',
+										},
+										op: 'contains',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [],
+							having: [],
+							legend: 'requests',
+							limit: null,
+							orderBy: [],
+							queryName: 'B',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_container_memory_limit--float64--Gauge--true',
+								key: k8sContainerMemoryLimitKey,
+								type: 'Gauge',
+							},
+							aggregateOperator: 'avg',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'C',
+							filters: {
+								items: [
+									{
+										id: 'fde3c631',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_pod_name--string--tag--false',
+											key: k8sPodNameKey,
+											type: 'tag',
+										},
+										op: 'contains',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [],
+							having: [],
+							legend: 'limits',
+							limit: null,
+							orderBy: [],
+							queryName: 'C',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'avg',
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				id: v4(),
+				promql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_pod_network_io--float64--Sum--true',
+								key: k8sPodNetworkIoKey,
+								type: 'Sum',
+							},
+							aggregateOperator: 'rate',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: 'ccbdbd6a',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_daemonset_name--string--tag--false',
+											key: k8sDaemonSetNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'direction--string--tag--false',
+									key: 'direction',
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'interface--string--tag--false',
+									key: 'interface',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{direction}} :: {{interface}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'rate',
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				id: v4(),
+				promql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
+		{
+			selectedTime: 'GLOBAL_TIME',
+			graphType: PANEL_TYPES.TIME_SERIES,
+			query: {
+				builder: {
+					queryData: [
+						{
+							aggregateAttribute: {
+								dataType: DataTypes.Float64,
+								id: 'k8s_pod_network_errors--float64--Sum--true',
+								key: k8sPodNetworkErrorsKey,
+								type: 'Sum',
+							},
+							aggregateOperator: 'increase',
+							dataSource: DataSource.METRICS,
+							disabled: false,
+							expression: 'A',
+							filters: {
+								items: [
+									{
+										id: '581a85fb',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_daemonset_name--string--tag--false',
+											key: k8sDaemonSetNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_daemonset_name,
+									},
+									{
+										id: '47b3adae',
+										key: {
+											dataType: DataTypes.String,
+											id: 'k8s_namespace_name--string--tag--false',
+											key: k8sNamespaceNameKey,
+											type: 'tag',
+										},
+										op: '=',
+										value: daemonSet.meta.k8s_namespace_name,
+									},
+								],
+								op: 'AND',
+							},
+							functions: [],
+							groupBy: [
+								{
+									dataType: DataTypes.String,
+									id: 'direction--string--tag--false',
+									key: 'direction',
+									type: 'tag',
+								},
+								{
+									dataType: DataTypes.String,
+									id: 'interface--string--tag--false',
+									key: 'interface',
+									type: 'tag',
+								},
+							],
+							having: [],
+							legend: '{{direction}} :: {{interface}}',
+							limit: null,
+							orderBy: [],
+							queryName: 'A',
+							reduceTo: ReduceOperators.AVG,
+							spaceAggregation: 'sum',
+							stepInterval: 60,
+							timeAggregation: 'increase',
+						},
+					],
+					queryFormulas: [],
+					queryTraceOperator: [],
+				},
+				clickhouse_sql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				id: v4(),
+				promql: [
+					{
+						disabled: false,
+						legend: '',
+						name: 'A',
+						query: '',
+					},
+				],
+				queryType: EQueryType.QUERY_BUILDER,
+			},
+			variables: {},
+			formatForWeb: false,
+			start,
+			end,
+		},
+	];
+};

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

@@ -0,0 +1,241 @@
+import { Tooltip } from 'antd';
+import { TableColumnDef } from 'components/TanStackTableView';
+import TanStackTable from 'components/TanStackTableView';
+import { ExpandButtonWrapper } from 'container/InfraMonitoringK8s/components';
+
+import EntityGroupHeader from '../Base/EntityGroupHeader';
+import K8sGroupCell from '../Base/K8sGroupCell';
+import { formatBytes } from '../commonUtils';
+import { EntityProgressBar, ValidateColumnValueWrapper } from '../components';
+import { InfraMonitoringEntity } from '../constants';
+import { K8sDaemonSetsData } from './api';
+import { Group } from '@signozhq/icons';
+
+export function getK8sDaemonSetRowKey(daemonSet: K8sDaemonSetsData): string {
+	return (
+		daemonSet.daemonSetName ||
+		daemonSet.meta.k8s_daemonset_name ||
+		`${daemonSet.meta.k8s_namespace_name}-${daemonSet.meta.k8s_daemonset_name}`
+	);
+}
+
+export function getK8sDaemonSetItemKey(daemonSet: K8sDaemonSetsData): string {
+	return daemonSet.meta.k8s_daemonset_name;
+}
+
+export const k8sDaemonSetsColumnsConfig: TableColumnDef<K8sDaemonSetsData>[] = [
+	{
+		id: 'daemonSetGroup',
+		header: (): React.ReactNode => <EntityGroupHeader title="DAEMONSET GROUP" />,
+		accessorFn: (row): string => row.meta.k8s_daemonset_name || '',
+		width: { min: 300 },
+		enableSort: false,
+		enableRemove: false,
+		enableMove: false,
+		pin: 'left',
+		visibilityBehavior: 'hidden-on-collapse',
+		cell: ({ isExpanded, toggleExpanded, row }): JSX.Element | null => {
+			return (
+				<ExpandButtonWrapper
+					isExpanded={isExpanded}
+					toggleExpanded={toggleExpanded}
+				>
+					<K8sGroupCell row={row} />
+				</ExpandButtonWrapper>
+			);
+		},
+	},
+	{
+		id: 'daemonsetName',
+		header: (): React.ReactNode => (
+			<EntityGroupHeader
+				title="DaemonSet Name"
+				icon={<Group data-hide-expanded="true" size={14} />}
+			/>
+		),
+		accessorFn: (row): string => row.meta.k8s_daemonset_name || '',
+		width: { min: 290 },
+		enableSort: false,
+		enableRemove: false,
+		enableMove: false,
+		pin: 'left',
+		visibilityBehavior: 'hidden-on-expand',
+		cell: ({ value }): React.ReactNode => {
+			const daemonsetName = value as string;
+			return (
+				<Tooltip title={daemonsetName}>
+					<TanStackTable.Text>{daemonsetName}</TanStackTable.Text>
+				</Tooltip>
+			);
+		},
+	},
+	{
+		id: 'namespaceName',
+		header: 'Namespace Name',
+		accessorFn: (row): string => row.meta.k8s_namespace_name || '',
+		width: { default: 100 },
+		enableSort: false,
+		cell: ({ value }): React.ReactNode => {
+			const namespaceName = value as string;
+			return (
+				<Tooltip title={namespaceName}>
+					<TanStackTable.Text>{namespaceName}</TanStackTable.Text>
+				</Tooltip>
+			);
+		},
+	},
+	{
+		id: 'available_nodes',
+		header: 'Available',
+		accessorFn: (row): number => row.availableNodes,
+		width: { min: 140 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const availableNodes = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={availableNodes}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="available node"
+				>
+					<TanStackTable.Text>{availableNodes}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'desired_nodes',
+		header: 'Desired',
+		accessorFn: (row): number => row.desiredNodes,
+		width: { min: 140 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const desiredNodes = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={desiredNodes}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="desired node"
+				>
+					<TanStackTable.Text>{desiredNodes}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'cpu_request',
+		header: 'CPU Req Usage (%)',
+		accessorFn: (row): number => row.cpuRequest,
+		width: { min: 200, default: 200 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const cpuRequest = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={cpuRequest}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="CPU Request"
+				>
+					<EntityProgressBar value={cpuRequest} type="request" />
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'cpu_limit',
+		header: 'CPU Limit Usage (%)',
+		accessorFn: (row): number => row.cpuLimit,
+		width: { min: 200, default: 200 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const cpuLimit = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={cpuLimit}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="CPU Limit"
+				>
+					<EntityProgressBar value={cpuLimit} type="limit" />
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'cpu',
+		header: 'CPU Usage (cores)',
+		accessorFn: (row): number => row.cpuUsage,
+		width: { min: 190 },
+		enableSort: true,
+		defaultVisibility: false,
+		cell: ({ value }): React.ReactNode => {
+			const cpu = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={cpu}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="CPU metric"
+				>
+					<TanStackTable.Text>{cpu}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'memory_request',
+		header: 'Mem Req Usage (%)',
+		accessorFn: (row): number => row.memoryRequest,
+		width: { min: 190 },
+		enableSort: true,
+		defaultVisibility: false,
+		cell: ({ value }): React.ReactNode => {
+			const memoryRequest = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={memoryRequest}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="Memory Request"
+				>
+					<EntityProgressBar value={memoryRequest} type="request" />
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'memory_limit',
+		header: 'Mem Limit Usage (%)',
+		accessorFn: (row): number => row.memoryLimit,
+		width: { min: 180 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const memoryLimit = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={memoryLimit}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="Memory Limit"
+				>
+					<EntityProgressBar value={memoryLimit} type="limit" />
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+	{
+		id: 'memory',
+		header: 'Mem Usage (WSS)',
+		accessorFn: (row): number => row.memoryUsage,
+		width: { min: 160 },
+		enableSort: true,
+		cell: ({ value }): React.ReactNode => {
+			const memory = value as number;
+			return (
+				<ValidateColumnValueWrapper
+					value={memory}
+					entity={InfraMonitoringEntity.DAEMONSETS}
+					attribute="memory metric"
+				>
+					<TanStackTable.Text>{formatBytes(memory)}</TanStackTable.Text>
+				</ValidateColumnValueWrapper>
+			);
+		},
+	},
+];

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

@@ -0,0 +1,117 @@
+import React, { useCallback } from 'react';
+import { InfraMonitoringEvents } from 'constants/events';
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+import K8sBaseDetails, { K8sDetailsFilters } from '../Base/K8sBaseDetails';
+import { K8sBaseList } from '../Base/K8sBaseList';
+import { K8sBaseFilters } from '../Base/types';
+import { InfraMonitoringEntity } from '../constants';
+import { getK8sDeploymentsList, K8sDeploymentsData } from './api';
+import {
+	deploymentWidgetInfo,
+	getDeploymentMetricsQueryPayload,
+	k8sDeploymentDetailsMetadataConfig,
+	k8sDeploymentGetEntityName,
+	k8sDeploymentGetSelectedItemFilters,
+	k8sDeploymentInitialEventsFilter,
+	k8sDeploymentInitialLogTracesFilter,
+} from './constants';
+import {
+	getK8sDeploymentItemKey,
+	getK8sDeploymentRowKey,
+	k8sDeploymentsColumnsConfig,
+} from './table.config';
+
+function K8sDeploymentsList({
+	controlListPrefix,
+}: {
+	controlListPrefix?: React.ReactNode;
+}): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const fetchListData = useCallback(
+		async (filters: K8sBaseFilters, signal?: AbortSignal) => {
+			filters.orderBy ||= {
+				columnName: 'cpu',
+				order: 'desc',
+			};
+
+			const response = await getK8sDeploymentsList(
+				filters,
+				signal,
+				undefined,
+				dotMetricsEnabled,
+			);
+
+			return {
+				data: response.payload?.data.records || [],
+				total: response.payload?.data.total || 0,
+				error: response.error,
+				rawData: response.payload?.data,
+			};
+		},
+		[dotMetricsEnabled],
+	);
+
+	const fetchEntityData = useCallback(
+		async (
+			filters: K8sDetailsFilters,
+			signal?: AbortSignal,
+		): Promise<{ data: K8sDeploymentsData | null; error?: string | null }> => {
+			const response = await getK8sDeploymentsList(
+				{
+					filters: filters.filters,
+					start: filters.start,
+					end: filters.end,
+					limit: 1,
+					offset: 0,
+				},
+				signal,
+				undefined,
+				dotMetricsEnabled,
+			);
+
+			const records = response.payload?.data.records || [];
+
+			return {
+				data: records.length > 0 ? records[0] : null,
+				error: response.error,
+			};
+		},
+		[dotMetricsEnabled],
+	);
+
+	return (
+		<>
+			<K8sBaseList<K8sDeploymentsData>
+				controlListPrefix={controlListPrefix}
+				entity={InfraMonitoringEntity.DEPLOYMENTS}
+				tableColumns={k8sDeploymentsColumnsConfig}
+				fetchListData={fetchListData}
+				getRowKey={getK8sDeploymentRowKey}
+				getItemKey={getK8sDeploymentItemKey}
+				eventCategory={InfraMonitoringEvents.Deployment}
+			/>
+
+			<K8sBaseDetails<K8sDeploymentsData>
+				category={InfraMonitoringEntity.DEPLOYMENTS}
+				eventCategory={InfraMonitoringEvents.Deployment}
+				getSelectedItemFilters={k8sDeploymentGetSelectedItemFilters}
+				fetchEntityData={fetchEntityData}
+				getEntityName={k8sDeploymentGetEntityName}
+				getInitialLogTracesFilters={k8sDeploymentInitialLogTracesFilter}
+				getInitialEventsFilters={k8sDeploymentInitialEventsFilter}
+				metadataConfig={k8sDeploymentDetailsMetadataConfig}
+				entityWidgetInfo={deploymentWidgetInfo}
+				getEntityQueryPayload={getDeploymentMetricsQueryPayload}
+				queryKeyPrefix="deployment"
+			/>
+		</>
+	);
+}
+
+export default K8sDeploymentsList;