Merge branch 'main' into feat/service-map

* fix(authdomain): nest config response, rename Updateable→Updatable, return Identifiable on create

Three small API-shape corrections on auth_domain:

- GettableAuthDomain previously embedded AuthDomainConfig, which
  flattened sso_enabled / saml_config / oidc_config / google_auth_config /
  role_mapping at the response root and made the response shape
  diverge from the request shape (PostableAuthDomain has them under
  `config`). Move it under a named `Config` field with a `config`
  json tag so request and response carry the same nested object.
- UpdateableAuthDomain → UpdatableAuthDomain (typo fix; aligns with
  UpdatableUser already in the codebase).
- CreateAuthDomain previously returned the full GettableAuthDomain;
  the only field clients actually need from the create response is
  the new ID. Switch to Identifiable so the contract states what the
  endpoint guarantees and clients re-Read for the full domain when
  needed.

Frontend schema and OpenAPI spec regenerated.

* fix(authdomain-frontend): adapt to nested config + Identifiable create response

Regenerate the orval client (`yarn generate:api`) and update the
auth-domain UI for the API shape changes from the previous commit:

- `record.ssoType`, `.ssoEnabled`, `.googleAuthConfig`, `.oidcConfig`,
  `.samlConfig`, `.roleMapping` are now nested under `record.config.*`
  in `AuthtypesGettableAuthDomainDTO` — update SSOEnforcementToggle,
  CreateEdit form initial-values, the list page's Configure button,
  and the auth-domain test mocks.
- `mockCreateSuccessResponse` now returns `{ id }` (Identifiable)
  instead of the full domain.

`yarn generate:api` ran clean: lint OK, tsgo OK.

* fix(authdomain): align CreateAuthDomain success code with handler + adjust integration test

The Create handler returns http.StatusCreated but the OpenAPI
annotation said StatusOK. Sync the annotation to 201, regenerate the
spec + frontend client.

The callbackauthn integration test (01_domain.py) still read
`domain["ssoType"]` off the GET response — now nested under
`domain["config"]["ssoType"]` after the previous shape change. Update
the assertion.

conf/example.yaml

@@ -13,6 +13,8 @@ global:
   ingestion_url: <unset>
   # the url of the SigNoz MCP server. when unset, the MCP settings page is hidden in the frontend.
   # mcp_url: <unset>
+  # the url of the SigNoz AI Assistant server. when unset, the AI Assistant is hidden in the frontend.
+  # ai_assistant_url: <unset>
 
 ##################### Version #####################
 version:

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.0
+    image: signoz/signoz:v0.121.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.121.0
+    image: signoz/signoz:v0.121.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.0}
+    image: signoz/signoz:${VERSION:-v0.121.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.121.0}
+    image: signoz/signoz:${VERSION:-v0.121.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -96,6 +96,122 @@ components:
       - createdAt
       - updatedAt
       type: object
+    AlertmanagertypesPostableChannel:
+      oneOf:
+      - required:
+        - discord_configs
+      - required:
+        - email_configs
+      - required:
+        - incidentio_configs
+      - required:
+        - pagerduty_configs
+      - required:
+        - slack_configs
+      - required:
+        - webhook_configs
+      - required:
+        - opsgenie_configs
+      - required:
+        - wechat_configs
+      - required:
+        - pushover_configs
+      - required:
+        - victorops_configs
+      - required:
+        - sns_configs
+      - required:
+        - telegram_configs
+      - required:
+        - webex_configs
+      - required:
+        - msteams_configs
+      - required:
+        - msteamsv2_configs
+      - required:
+        - jira_configs
+      - required:
+        - rocketchat_configs
+      - required:
+        - mattermost_configs
+      properties:
+        discord_configs:
+          items:
+            $ref: '#/components/schemas/ConfigDiscordConfig'
+          type: array
+        email_configs:
+          items:
+            $ref: '#/components/schemas/ConfigEmailConfig'
+          type: array
+        incidentio_configs:
+          items:
+            $ref: '#/components/schemas/ConfigIncidentioConfig'
+          type: array
+        jira_configs:
+          items:
+            $ref: '#/components/schemas/ConfigJiraConfig'
+          type: array
+        mattermost_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMattermostConfig'
+          type: array
+        msteams_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsConfig'
+          type: array
+        msteamsv2_configs:
+          items:
+            $ref: '#/components/schemas/ConfigMSTeamsV2Config'
+          type: array
+        name:
+          type: string
+        opsgenie_configs:
+          items:
+            $ref: '#/components/schemas/ConfigOpsGenieConfig'
+          type: array
+        pagerduty_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPagerdutyConfig'
+          type: array
+        pushover_configs:
+          items:
+            $ref: '#/components/schemas/ConfigPushoverConfig'
+          type: array
+        rocketchat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigRocketchatConfig'
+          type: array
+        slack_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSlackConfig'
+          type: array
+        sns_configs:
+          items:
+            $ref: '#/components/schemas/ConfigSNSConfig'
+          type: array
+        telegram_configs:
+          items:
+            $ref: '#/components/schemas/ConfigTelegramConfig'
+          type: array
+        victorops_configs:
+          items:
+            $ref: '#/components/schemas/ConfigVictorOpsConfig'
+          type: array
+        webex_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebexConfig'
+          type: array
+        webhook_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWebhookConfig'
+          type: array
+        wechat_configs:
+          items:
+            $ref: '#/components/schemas/ConfigWechatConfig'
+          type: array
+      required:
+      - name
+      type: object
     AlertmanagertypesPostableRoutePolicy:
       properties:
         channels:
@@ -133,6 +249,10 @@ components:
           type: string
       type: object
     AuthtypesAuthDomainConfig:
+      oneOf:
+      - $ref: '#/components/schemas/AuthtypesSamlConfig'
+      - $ref: '#/components/schemas/AuthtypesGoogleConfig'
+      - $ref: '#/components/schemas/AuthtypesOIDCConfig'
       properties:
         googleAuthConfig:
           $ref: '#/components/schemas/AuthtypesGoogleConfig'
@@ -145,8 +265,15 @@ components:
         ssoEnabled:
           type: boolean
         ssoType:
-          type: string
+          $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
+    AuthtypesAuthNProvider:
+      enum:
+      - google_auth
+      - saml
+      - email_password
+      - oidc
+      type: string
     AuthtypesAuthNProviderInfo:
       properties:
         relayStatePath:
@@ -169,7 +296,7 @@ components:
     AuthtypesCallbackAuthNSupport:
       properties:
         provider:
-          type: string
+          $ref: '#/components/schemas/AuthtypesAuthNProvider'
         url:
           type: string
       type: object
@@ -177,27 +304,17 @@ components:
       properties:
         authNProviderInfo:
           $ref: '#/components/schemas/AuthtypesAuthNProviderInfo'
+        config:
+          $ref: '#/components/schemas/AuthtypesAuthDomainConfig'
         createdAt:
           format: date-time
           type: string
-        googleAuthConfig:
-          $ref: '#/components/schemas/AuthtypesGoogleConfig'
         id:
           type: string
         name:
           type: string
-        oidcConfig:
-          $ref: '#/components/schemas/AuthtypesOIDCConfig'
         orgId:
           type: string
-        roleMapping:
-          $ref: '#/components/schemas/AuthtypesRoleMapping'
-        samlConfig:
-          $ref: '#/components/schemas/AuthtypesSamlConfig'
-        ssoEnabled:
-          type: boolean
-        ssoType:
-          type: string
         updatedAt:
           format: date-time
           type: string
@@ -323,7 +440,7 @@ components:
     AuthtypesPasswordAuthNSupport:
       properties:
         provider:
-          type: string
+          $ref: '#/components/schemas/AuthtypesAuthNProvider'
       type: object
     AuthtypesPatchableObjects:
       properties:
@@ -458,7 +575,7 @@ components:
       - relation
       - object
       type: object
-    AuthtypesUpdateableAuthDomain:
+    AuthtypesUpdatableAuthDomain:
       properties:
         config:
           $ref: '#/components/schemas/AuthtypesAuthDomainConfig'
@@ -2363,6 +2480,9 @@ components:
       type: object
     GlobaltypesConfig:
       properties:
+        ai_assistant_url:
+          nullable: true
+          type: string
         external_url:
           type: string
         identN:
@@ -2376,6 +2496,7 @@ components:
       - external_url
       - ingestion_url
       - mcp_url
+      - ai_assistant_url
       type: object
     GlobaltypesIdentNConfig:
       properties:
@@ -5665,7 +5786,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/ConfigReceiver'
+              $ref: '#/components/schemas/AlertmanagertypesPostableChannel'
       responses:
         "201":
           content:
@@ -6944,20 +7065,20 @@ paths:
             schema:
               $ref: '#/components/schemas/AuthtypesPostableAuthDomain'
       responses:
-        "200":
+        "201":
           content:
             application/json:
               schema:
                 properties:
                   data:
-                    $ref: '#/components/schemas/AuthtypesGettableAuthDomain'
+                    $ref: '#/components/schemas/TypesIdentifiable'
                   status:
                     type: string
                 required:
                 - status
                 - data
                 type: object
-          description: OK
+          description: Created
         "400":
           content:
             application/json:
@@ -7042,6 +7163,63 @@ paths:
       summary: Delete auth domain
       tags:
       - authdomains
+    get:
+      deprecated: false
+      description: This endpoint returns an auth domain by ID
+      operationId: GetAuthDomain
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/AuthtypesGettableAuthDomain'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Get auth domain by ID
+      tags:
+      - authdomains
     put:
       deprecated: false
       description: This endpoint updates an auth domain
@@ -7056,7 +7234,7 @@ paths:
         content:
           application/json:
             schema:
-              $ref: '#/components/schemas/AuthtypesUpdateableAuthDomain'
+              $ref: '#/components/schemas/AuthtypesUpdatableAuthDomain'
       responses:
         "204":
           description: No Content
@@ -17273,9 +17451,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - VIEWER
       - tokenizer:
-        - ADMIN
+        - VIEWER
       summary: Get host info from Zeus.
       tags:
       - zeus

frontend/knip.json

@@ -1,5 +1,5 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "project": ["src/**/*.ts", "src/**/*.tsx"],
-  "ignore": ["src/api/generated/**/*.ts"]
+  "ignore": ["src/api/generated/**/*.ts", "src/typings/*.ts"]
 }

frontend/package.json

@@ -36,6 +36,7 @@
     "@ant-design/icons": "4.8.0",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/lang-javascript": "6.2.3",
+    "@dagrejs/dagre": "3.0.0",
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
@@ -63,6 +64,7 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@vitejs/plugin-react": "5.1.4",
+    "@xyflow/react": "12.10.2",
     "ansi-to-html": "0.7.2",
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
@@ -115,7 +117,6 @@
     "react-dom": "18.2.0",
     "react-drag-listview": "2.0.0",
     "react-error-boundary": "4.0.11",
-    "react-force-graph-2d": "^1.29.1",
     "react-full-screen": "1.1.1",
     "react-grid-layout": "^1.3.4",
     "react-helmet-async": "1.3.0",
@@ -198,6 +199,7 @@
     "@types/redux-mock-store": "1.0.4",
     "@types/styled-components": "^5.1.4",
     "@types/uuid": "^8.3.1",
+    "@typescript/native-preview": "7.0.0-dev.20260421.2",
     "autoprefixer": "10.4.19",
     "babel-plugin-styled-components": "^1.12.0",
     "eslint-plugin-sonarjs": "4.0.2",
@@ -231,6 +233,7 @@
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
+    "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-image-optimizer": "2.0.3",
@@ -240,7 +243,7 @@
     "*.(js|jsx|ts|tsx)": [
       "oxlint --fix",
       "oxfmt --write",
-      "sh scripts/typecheck-staged.sh"
+      "sh -c tsgo --noEmit"
     ],
     "*.(scss|css)": [
       "stylelint"
@@ -266,4 +269,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/scripts/typecheck-staged.sh

@@ -1,25 +0,0 @@
-files="";
-
-# lint-staged will pass all files in $1 $2 $3 etc. iterate and concat.
-for var in "$@"
-do
-    files="$files \"$var\","
-done
-
-# create temporary tsconfig which includes only passed files
-str="{
-  \"extends\": \"./tsconfig.json\",
-  \"include\": [ \"src/typings/**/*.ts\",\"src/**/*.d.ts\", \"./babel.config.js\", \"./jest.config.ts\", \"./.eslintrc.js\",\"./__mocks__\",\"./public\",\"./tests\",\"./commitlint.config.ts\",\"./webpack.config.js\",\"./webpack.config.prod.js\",\"./jest.setup.ts\",\"./**/*.d.ts\",$files]
-}"
-echo $str > tsconfig.tmp
-
-# run typecheck using temp config
-tsc -p ./tsconfig.tmp
-
-# capture exit code of tsc
-code=$?
-
-# delete temp config
-rm ./tsconfig.tmp
-
-exit $code

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

@@ -19,9 +19,11 @@ import type {
 
 import type {
 	AuthtypesPostableAuthDomainDTO,
-	AuthtypesUpdateableAuthDomainDTO,
-	CreateAuthDomain200,
+	AuthtypesUpdatableAuthDomainDTO,
+	CreateAuthDomain201,
 	DeleteAuthDomainPathParameters,
+	GetAuthDomain200,
+	GetAuthDomainPathParameters,
 	ListAuthDomains200,
 	RenderErrorResponseDTO,
 	UpdateAuthDomainPathParameters,
@@ -124,7 +126,7 @@ export const createAuthDomain = (
 	authtypesPostableAuthDomainDTO: BodyType<AuthtypesPostableAuthDomainDTO>,
 	signal?: AbortSignal,
 ) => {
-	return GeneratedAPIInstance<CreateAuthDomain200>({
+	return GeneratedAPIInstance<CreateAuthDomain201>({
 		url: `/api/v1/domains`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
@@ -277,19 +279,122 @@ export const useDeleteAuthDomain = <
 
 	return useMutation(mutationOptions);
 };
+/**
+ * This endpoint returns an auth domain by ID
+ * @summary Get auth domain by ID
+ */
+export const getAuthDomain = (
+	{ id }: GetAuthDomainPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetAuthDomain200>({
+		url: `/api/v1/domains/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetAuthDomainQueryKey = ({
+	id,
+}: GetAuthDomainPathParameters) => {
+	return [`/api/v1/domains/${id}`] as const;
+};
+
+export const getGetAuthDomainQueryOptions = <
+	TData = Awaited<ReturnType<typeof getAuthDomain>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetAuthDomainPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAuthDomain>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetAuthDomainQueryKey({ id });
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getAuthDomain>>> = ({
+		signal,
+	}) => getAuthDomain({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getAuthDomain>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetAuthDomainQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getAuthDomain>>
+>;
+export type GetAuthDomainQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get auth domain by ID
+ */
+
+export function useGetAuthDomain<
+	TData = Awaited<ReturnType<typeof getAuthDomain>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetAuthDomainPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getAuthDomain>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetAuthDomainQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get auth domain by ID
+ */
+export const invalidateGetAuthDomain = async (
+	queryClient: QueryClient,
+	{ id }: GetAuthDomainPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetAuthDomainQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};
+
 /**
  * This endpoint updates an auth domain
  * @summary Update auth domain
  */
 export const updateAuthDomain = (
 	{ id }: UpdateAuthDomainPathParameters,
-	authtypesUpdateableAuthDomainDTO: BodyType<AuthtypesUpdateableAuthDomainDTO>,
+	authtypesUpdatableAuthDomainDTO: BodyType<AuthtypesUpdatableAuthDomainDTO>,
 ) => {
 	return GeneratedAPIInstance<void>({
 		url: `/api/v1/domains/${id}`,
 		method: 'PUT',
 		headers: { 'Content-Type': 'application/json' },
-		data: authtypesUpdateableAuthDomainDTO,
+		data: authtypesUpdatableAuthDomainDTO,
 	});
 };
 
@@ -302,7 +407,7 @@ export const getUpdateAuthDomainMutationOptions = <
 		TError,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		},
 		TContext
 	>;
@@ -311,7 +416,7 @@ export const getUpdateAuthDomainMutationOptions = <
 	TError,
 	{
 		pathParams: UpdateAuthDomainPathParameters;
-		data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+		data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 	},
 	TContext
 > => {
@@ -328,7 +433,7 @@ export const getUpdateAuthDomainMutationOptions = <
 		Awaited<ReturnType<typeof updateAuthDomain>>,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		}
 	> = (props) => {
 		const { pathParams, data } = props ?? {};
@@ -343,7 +448,7 @@ export type UpdateAuthDomainMutationResult = NonNullable<
 	Awaited<ReturnType<typeof updateAuthDomain>>
 >;
 export type UpdateAuthDomainMutationBody =
-	BodyType<AuthtypesUpdateableAuthDomainDTO>;
+	BodyType<AuthtypesUpdatableAuthDomainDTO>;
 export type UpdateAuthDomainMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -358,7 +463,7 @@ export const useUpdateAuthDomain = <
 		TError,
 		{
 			pathParams: UpdateAuthDomainPathParameters;
-			data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+			data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 		},
 		TContext
 	>;
@@ -367,7 +472,7 @@ export const useUpdateAuthDomain = <
 	TError,
 	{
 		pathParams: UpdateAuthDomainPathParameters;
-		data: BodyType<AuthtypesUpdateableAuthDomainDTO>;
+		data: BodyType<AuthtypesUpdatableAuthDomainDTO>;
 	},
 	TContext
 > => {

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

@@ -18,6 +18,7 @@ import type {
 } from 'react-query';
 
 import type {
+	AlertmanagertypesPostableChannelDTO,
 	ConfigReceiverDTO,
 	CreateChannel201,
 	DeleteChannelByIDPathParameters,
@@ -122,14 +123,14 @@ export const invalidateListChannels = async (
  * @summary Create notification channel
  */
 export const createChannel = (
-	configReceiverDTO: BodyType<ConfigReceiverDTO>,
+	alertmanagertypesPostableChannelDTO: BodyType<AlertmanagertypesPostableChannelDTO>,
 	signal?: AbortSignal,
 ) => {
 	return GeneratedAPIInstance<CreateChannel201>({
 		url: `/api/v1/channels`,
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		data: configReceiverDTO,
+		data: alertmanagertypesPostableChannelDTO,
 		signal,
 	});
 };
@@ -141,13 +142,13 @@ export const getCreateChannelMutationOptions = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 		TContext
 	>;
 }): UseMutationOptions<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
+	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 	TContext
 > => {
 	const mutationKey = ['createChannel'];
@@ -161,7 +162,7 @@ export const getCreateChannelMutationOptions = <
 
 	const mutationFn: MutationFunction<
 		Awaited<ReturnType<typeof createChannel>>,
-		{ data: BodyType<ConfigReceiverDTO> }
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> }
 	> = (props) => {
 		const { data } = props ?? {};
 
@@ -174,7 +175,8 @@ export const getCreateChannelMutationOptions = <
 export type CreateChannelMutationResult = NonNullable<
 	Awaited<ReturnType<typeof createChannel>>
 >;
-export type CreateChannelMutationBody = BodyType<ConfigReceiverDTO>;
+export type CreateChannelMutationBody =
+	BodyType<AlertmanagertypesPostableChannelDTO>;
 export type CreateChannelMutationError = ErrorType<RenderErrorResponseDTO>;
 
 /**
@@ -187,13 +189,13 @@ export const useCreateChannel = <
 	mutation?: UseMutationOptions<
 		Awaited<ReturnType<typeof createChannel>>,
 		TError,
-		{ data: BodyType<ConfigReceiverDTO> },
+		{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 		TContext
 	>;
 }): UseMutationResult<
 	Awaited<ReturnType<typeof createChannel>>,
 	TError,
-	{ data: BodyType<ConfigReceiverDTO> },
+	{ data: BodyType<AlertmanagertypesPostableChannelDTO> },
 	TContext
 > => {
 	const mutationOptions = getCreateChannelMutationOptions(options);

frontend/src/components/Common/Common.styles.scss

@@ -1,33 +0,0 @@
-.error-state-container {
-	height: 240px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: column;
-
-	border-radius: 3px;
-
-	.error-state-container-content {
-		display: flex;
-		flex-direction: column;
-		gap: 8px;
-
-		.error-state-text {
-			font-size: 14px;
-			font-weight: 500;
-		}
-
-		.error-state-additional-messages {
-			margin-top: 8px;
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
-
-			.error-state-additional-text {
-				font-size: 12px;
-				font-weight: 400;
-				margin-left: 8px;
-			}
-		}
-	}
-}

frontend/src/components/Common/ErrorStateComponent.tsx

@@ -1,59 +0,0 @@
-import { Typography } from 'antd';
-
-import APIError from '../../types/api/error';
-
-import './Common.styles.scss';
-
-interface ErrorStateComponentProps {
-	message?: string;
-	error?: APIError;
-}
-
-const defaultProps: Partial<ErrorStateComponentProps> = {
-	message: undefined,
-	error: undefined,
-};
-
-function ErrorStateComponent({
-	message,
-	error,
-}: ErrorStateComponentProps): JSX.Element {
-	// Handle API Error object
-	if (error) {
-		const mainMessage = error.getErrorMessage();
-		const additionalErrors = error.getErrorDetails().error.errors || [];
-
-		return (
-			<div className="error-state-container">
-				<div className="error-state-container-content">
-					<Typography className="error-state-text">{mainMessage}</Typography>
-					{additionalErrors.length > 0 && (
-						<div className="error-state-additional-messages">
-							{additionalErrors.map((additionalError) => (
-								<Typography
-									key={`error-${additionalError.message}`}
-									className="error-state-additional-text"
-								>
-									• {additionalError.message}
-								</Typography>
-							))}
-						</div>
-					)}
-				</div>
-			</div>
-		);
-	}
-
-	// Handle simple string message (backwards compatibility)
-	return (
-		<div className="error-state-container">
-			<div className="error-state-container-content">
-				<Typography className="error-state-text">{message}</Typography>
-			</div>
-		</div>
-	);
-}
-
-ErrorStateComponent.defaultProps = defaultProps;
-
-export default ErrorStateComponent;

frontend/src/components/CustomTimePicker/RangePickerModal.styles.scss

@@ -1,4 +0,0 @@
-.custom-date-picker {
-	display: flex;
-	flex-direction: column;
-}

frontend/src/components/CustomTimePicker/RangePickerModal.tsx

@@ -1,105 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { DatePicker } from 'antd';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
-import {
-	CustomTimeType,
-	LexicalContext,
-	Time,
-} from 'container/TopNav/DateTimeSelectionV2/types';
-import dayjs, { Dayjs } from 'dayjs';
-import { useTimezone } from 'providers/Timezone';
-import { AppState } from 'store/reducers';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import './RangePickerModal.styles.scss';
-
-interface RangePickerModalProps {
-	setCustomDTPickerVisible: Dispatch<SetStateAction<boolean>>;
-	setIsOpen: Dispatch<SetStateAction<boolean>>;
-	onCustomDateHandler: (
-		dateTimeRange: DateTimeRangeType,
-		lexicalContext?: LexicalContext | undefined,
-	) => void;
-	selectedTime: string;
-	onTimeChange?: (
-		interval: Time | CustomTimeType,
-		dateTimeRange?: [number, number],
-	) => void;
-}
-
-function RangePickerModal(props: RangePickerModalProps): JSX.Element {
-	const {
-		setCustomDTPickerVisible,
-		setIsOpen,
-		onCustomDateHandler,
-		selectedTime,
-		onTimeChange,
-	} = props;
-	const { RangePicker } = DatePicker;
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-
-	// Using any type here because antd's DatePicker expects its own internal Dayjs type
-	// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
-	const disabledDate = (current: any): boolean => {
-		const currentDay = dayjs(current);
-		return currentDay.isAfter(dayjs());
-	};
-
-	const onPopoverClose = (visible: boolean): void => {
-		if (!visible) {
-			setCustomDTPickerVisible(false);
-		}
-		setIsOpen(visible);
-	};
-
-	const onModalOkHandler = (date_time: any): void => {
-		if (date_time?.[1]) {
-			onPopoverClose(false);
-		}
-		onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
-	};
-	const { timezone } = useTimezone();
-
-	const rangeValue: [Dayjs, Dayjs] = useMemo(
-		() => [
-			dayjs(minTime / 1000_000).tz(timezone.value),
-			dayjs(maxTime / 1000_000).tz(timezone.value),
-		],
-		[maxTime, minTime, timezone.value],
-	);
-
-	return (
-		<div className="custom-date-picker">
-			<RangePicker
-				disabledDate={disabledDate}
-				allowClear
-				showTime
-				format={(date: Dayjs): string =>
-					date.tz(timezone.value).format(DATE_TIME_FORMATS.ISO_DATETIME)
-				}
-				onOk={onModalOkHandler}
-				data-1p-ignore
-				{...(selectedTime === 'custom' &&
-					!onTimeChange && {
-						value: rangeValue,
-					})}
-				// use default value if onTimeChange is provided
-				{...(selectedTime === 'custom' &&
-					onTimeChange && {
-						defaultValue: rangeValue,
-					})}
-			/>
-		</div>
-	);
-}
-
-RangePickerModal.defaultProps = {
-	onTimeChange: undefined,
-};
-
-export default RangePickerModal;

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -1,93 +0,0 @@
-.details-drawer {
-	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
-	}
-	.ant-drawer-header {
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
-
-		.ant-drawer-header-title {
-			display: flex;
-			align-items: center;
-
-			.ant-drawer-close {
-				margin-inline-end: 0px;
-				padding: 0px;
-				padding-right: 16px;
-				border-right: 1px solid var(--l1-border);
-			}
-
-			.ant-drawer-title {
-				padding-left: 16px;
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-			}
-		}
-	}
-	.ant-drawer-body {
-		padding: 16px;
-		background: var(--l2-background);
-
-		&::-webkit-scrollbar {
-			width: 0.1rem;
-		}
-	}
-
-	.details-drawer-tabs {
-		margin-top: 32px;
-
-		.ant-tabs-tab {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 114px;
-			height: 32px;
-			flex-shrink: 0;
-			padding: 7px 20px;
-			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
-			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
-
-			color: var(--l1-foreground);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-			letter-spacing: -0.06px;
-
-			.ant-btn {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0px;
-			}
-
-			.ant-btn:hover {
-				background: unset;
-			}
-		}
-
-		.ant-tabs-tab-active {
-			background: var(--l3-background);
-		}
-
-		.ant-tabs-tab + .ant-tabs-tab {
-			margin-left: 0px;
-		}
-
-		.ant-tabs-nav::before {
-			border-bottom: 0px;
-		}
-
-		.ant-tabs-ink-bar {
-			background: none;
-		}
-	}
-}

frontend/src/components/DetailsDrawer/DetailsDrawer.tsx

@@ -1,57 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Drawer, Tabs, TabsProps } from 'antd';
-import cx from 'classnames';
-
-import './DetailsDrawer.styles.scss';
-
-interface IDetailsDrawerProps {
-	open: boolean;
-	setOpen: Dispatch<SetStateAction<boolean>>;
-	title: string;
-	descriptiveContent: JSX.Element;
-	defaultActiveKey: string;
-	items: TabsProps['items'];
-	detailsDrawerClassName?: string;
-	tabBarExtraContent?: JSX.Element;
-}
-
-function DetailsDrawer(props: IDetailsDrawerProps): JSX.Element {
-	const {
-		open,
-		setOpen,
-		title,
-		descriptiveContent,
-		defaultActiveKey,
-		detailsDrawerClassName,
-		items,
-		tabBarExtraContent,
-	} = props;
-	return (
-		<Drawer
-			width="60%"
-			open={open}
-			afterOpenChange={setOpen}
-			mask={false}
-			title={title}
-			onClose={(): void => setOpen(false)}
-			className="details-drawer"
-		>
-			<div>{descriptiveContent}</div>
-			<Tabs
-				items={items}
-				addIcon
-				defaultActiveKey={defaultActiveKey}
-				animated
-				className={cx('details-drawer-tabs', detailsDrawerClassName)}
-				tabBarExtraContent={tabBarExtraContent}
-			/>
-		</Drawer>
-	);
-}
-
-DetailsDrawer.defaultProps = {
-	detailsDrawerClassName: '',
-	tabBarExtraContent: null,
-};
-
-export default DetailsDrawer;

frontend/src/components/ErrorBoundaryHOC/withErrorBoundary.example.tsx

@@ -1,143 +0,0 @@
-import { useState } from 'react';
-import { Button } from 'antd';
-
-import { withErrorBoundary } from './index';
-
-/**
- * Example component that can throw errors
- */
-function ProblematicComponent(): JSX.Element {
-	const [shouldThrow, setShouldThrow] = useState(false);
-
-	if (shouldThrow) {
-		throw new Error('This is a test error from ProblematicComponent!');
-	}
-
-	return (
-		<div style={{ padding: '20px' }}>
-			<h3>Problematic Component</h3>
-			<p>This component can throw errors when the button is clicked.</p>
-			<Button type="primary" onClick={(): void => setShouldThrow(true)} danger>
-				Trigger Error
-			</Button>
-		</div>
-	);
-}
-
-/**
- * Basic usage - wraps component with default error boundary
- */
-export const SafeProblematicComponent = withErrorBoundary(ProblematicComponent);
-
-/**
- * Usage with custom fallback component
- */
-function CustomErrorFallback(): JSX.Element {
-	return (
-		<div
-			style={{ padding: '20px', border: '1px solid red', borderRadius: '4px' }}
-		>
-			<h4 style={{ color: 'red' }}>Custom Error Fallback</h4>
-			<p>Something went wrong in this specific component!</p>
-			<Button onClick={(): void => window.location.reload()}>Reload Page</Button>
-		</div>
-	);
-}
-
-export const SafeProblematicComponentWithCustomFallback = withErrorBoundary(
-	ProblematicComponent,
-	{
-		fallback: <CustomErrorFallback />,
-	},
-);
-
-/**
- * Usage with custom error handler
- */
-export const SafeProblematicComponentWithErrorHandler = withErrorBoundary(
-	ProblematicComponent,
-	{
-		onError: (error, errorInfo) => {
-			console.error('Custom error handler:', error);
-			console.error('Error info:', errorInfo);
-			// You could also send to analytics, logging service, etc.
-		},
-		sentryOptions: {
-			tags: {
-				section: 'dashboard',
-				priority: 'high',
-			},
-			level: 'error',
-		},
-	},
-);
-
-/**
- * Example of wrapping an existing component from the codebase
- */
-function ExistingComponent({
-	title,
-	data,
-}: {
-	title: string;
-	data: any[];
-}): JSX.Element {
-	// This could be any existing component that might throw errors
-	return (
-		<div>
-			<h4>{title}</h4>
-			<ul>
-				{data.map((item, index) => (
-					// eslint-disable-next-line react/no-array-index-key
-					<li key={index}>{item.name}</li>
-				))}
-			</ul>
-		</div>
-	);
-}
-
-export const SafeExistingComponent = withErrorBoundary(ExistingComponent, {
-	sentryOptions: {
-		tags: {
-			component: 'ExistingComponent',
-			feature: 'data-display',
-		},
-	},
-});
-
-/**
- * Usage examples in a container component
- */
-export function ErrorBoundaryExamples(): JSX.Element {
-	const sampleData = [
-		{ name: 'Item 1' },
-		{ name: 'Item 2' },
-		{ name: 'Item 3' },
-	];
-
-	return (
-		<div style={{ padding: '20px' }}>
-			<h2>Error Boundary HOC Examples</h2>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>1. Basic Usage</h3>
-				<SafeProblematicComponent />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>2. With Custom Fallback</h3>
-				<SafeProblematicComponentWithCustomFallback />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>3. With Custom Error Handler</h3>
-				<SafeProblematicComponentWithErrorHandler />
-			</div>
-
-			<div style={{ marginBottom: '20px' }}>
-				<h3>4. Wrapped Existing Component</h3>
-				<SafeExistingComponent title="Sample Data" data={sampleData} />
-			</div>
-		</div>
-	);
-}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss

@@ -1,13 +0,0 @@
-.query-builder-search-wrapper {
-	margin-top: 10px;
-	border: 1px solid var(--l1-border);
-	border-bottom: none;
-
-	.ant-select-selector {
-		border: none !important;
-
-		input {
-			font-size: 12px;
-		}
-	}
-}

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.tsx

@@ -1,79 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react';
-import useInitialQuery from 'container/LogsExplorerContext/useInitialQuery';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { ILog } from 'types/api/logs/log';
-import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import './QueryBuilderSearchWrapper.styles.scss';
-
-function QueryBuilderSearchWrapper({
-	log,
-	filters,
-	contextQuery,
-	isEdit,
-	suffixIcon,
-	setFilters,
-	setContextQuery,
-}: QueryBuilderSearchWraperProps): JSX.Element {
-	const initialContextQuery = useInitialQuery(log);
-
-	useEffect(() => {
-		setContextQuery(initialContextQuery);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
-
-	const handleSearch = (tagFilters: TagFilter): void => {
-		const tagFiltersLength = tagFilters.items.length;
-
-		if (
-			(!tagFiltersLength && (!filters || !filters.items.length)) ||
-			tagFiltersLength === filters?.items.length ||
-			!contextQuery
-		) {
-			return;
-		}
-
-		const nextQuery: Query = {
-			...contextQuery,
-			builder: {
-				...contextQuery.builder,
-				queryData: contextQuery.builder.queryData.map((item) => ({
-					...item,
-					filters: tagFilters,
-				})),
-			},
-		};
-
-		setFilters({ ...tagFilters });
-		setContextQuery({ ...nextQuery });
-	};
-
-	if (!contextQuery || !isEdit) {
-		return <></>;
-	}
-
-	return (
-		<QueryBuilderSearch
-			query={contextQuery?.builder.queryData[0]}
-			onChange={handleSearch}
-			className="query-builder-search-wrapper"
-			suffixIcon={suffixIcon}
-		/>
-	);
-}
-
-interface QueryBuilderSearchWraperProps {
-	log: ILog;
-	isEdit: boolean;
-	contextQuery: Query | undefined;
-	setContextQuery: Dispatch<SetStateAction<Query | undefined>>;
-	filters: TagFilter | null;
-	setFilters: Dispatch<SetStateAction<TagFilter | null>>;
-	suffixIcon?: React.ReactNode;
-}
-
-QueryBuilderSearchWrapper.defaultProps = {
-	suffixIcon: undefined,
-};
-
-export default QueryBuilderSearchWrapper;

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

@@ -1,3 +0,0 @@
-import { CSSProperties } from 'react';
-
-export const rawLineStyle: CSSProperties = {};

frontend/src/components/Logs/styles.ts

@@ -1,8 +0,0 @@
-import { Button } from 'antd';
-import styled from 'styled-components';
-
-export const ButtonContainer = styled(Button)`
-	&&& {
-		padding-left: 0;
-	}
-`;

frontend/src/components/NewSelect/CustomMultiSelect.scss

@@ -1,13 +0,0 @@
-.custom-multiselect-dropdown {
-	.divider {
-		height: 1px;
-		background-color: #e8e8e8;
-		margin: 4px 0;
-	}
-
-	.all-option {
-		font-weight: 500;
-		border-bottom: 1px solid #f0f0f0;
-		margin-bottom: 8px;
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-panel-data {
-	padding: 24px 0;
-	height: 240px;
-
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-
-	.loading-panel-data-content {
-		display: flex;
-		align-items: flex-start;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/components/PanelDataLoading/PanelDataLoading.tsx

@@ -1,17 +0,0 @@
-import { Typography } from 'antd';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './PanelDataLoading.styles.scss';
-
-export function PanelDataLoading(): JSX.Element {
-	return (
-		<div className="loading-panel-data">
-			<div className="loading-panel-data-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography.Text>Fetching data...</Typography.Text>
-			</div>
-		</div>
-	);
-}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.provider.tsx

@@ -0,0 +1,126 @@
+import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
+import { parseAsString, useQueryState } from 'nuqs';
+import { useStore } from 'zustand';
+
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+import { QuerySearchV2Context } from './context';
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+import { createExpressionStore } from './QuerySearchV2.store';
+
+export interface QuerySearchV2ProviderProps {
+	queryParamKey: string;
+	initialExpression?: string;
+	/**
+	 * @default false
+	 */
+	persistOnUnmount?: boolean;
+	children: ReactNode;
+}
+
+/**
+ * Provider component that creates a scoped zustand store and exposes
+ * expression state to children via context.
+ */
+export function QuerySearchV2Provider({
+	initialExpression = '',
+	persistOnUnmount = false,
+	queryParamKey,
+	children,
+}: QuerySearchV2ProviderProps): JSX.Element {
+	const storeRef = useRef(createExpressionStore());
+	const store = storeRef.current;
+
+	const [urlExpression, setUrlExpression] = useQueryState(
+		queryParamKey,
+		parseAsString,
+	);
+
+	const committedExpression = useStore(store, (s) => s.committedExpression);
+	const setInputExpression = useStore(store, (s) => s.setInputExpression);
+	const commitExpression = useStore(store, (s) => s.commitExpression);
+	const initializeFromUrl = useStore(store, (s) => s.initializeFromUrl);
+	const resetExpression = useStore(store, (s) => s.resetExpression);
+
+	const isInitialized = useRef(false);
+	useEffect(() => {
+		if (!isInitialized.current && urlExpression) {
+			const cleanedExpression = getUserExpressionFromCombined(
+				initialExpression,
+				urlExpression,
+			);
+			initializeFromUrl(cleanedExpression);
+			isInitialized.current = true;
+		}
+	}, [urlExpression, initialExpression, initializeFromUrl]);
+
+	useEffect(() => {
+		if (isInitialized.current || !urlExpression) {
+			setUrlExpression(committedExpression || null);
+		}
+	}, [committedExpression, setUrlExpression, urlExpression]);
+
+	useEffect(() => {
+		return (): void => {
+			if (!persistOnUnmount) {
+				setUrlExpression(null);
+				resetExpression();
+			}
+		};
+	}, [persistOnUnmount, setUrlExpression, resetExpression]);
+
+	const handleChange = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			setInputExpression(userOnly);
+		},
+		[initialExpression, setInputExpression],
+	);
+
+	const handleRun = useCallback(
+		(expression: string): void => {
+			const userOnly = getUserExpressionFromCombined(
+				initialExpression,
+				expression,
+			);
+			commitExpression(userOnly);
+		},
+		[initialExpression, commitExpression],
+	);
+
+	const combinedExpression = useMemo(
+		() => combineInitialAndUserExpression(initialExpression, committedExpression),
+		[initialExpression, committedExpression],
+	);
+
+	const contextValue = useMemo<QuerySearchV2ContextValue>(
+		() => ({
+			expression: combinedExpression,
+			userExpression: committedExpression,
+			initialExpression,
+			querySearchProps: {
+				initialExpression: initialExpression.trim() ? initialExpression : undefined,
+				onChange: handleChange,
+				onRun: handleRun,
+			},
+		}),
+		[
+			combinedExpression,
+			committedExpression,
+			initialExpression,
+			handleChange,
+			handleRun,
+		],
+	);
+
+	return (
+		<QuerySearchV2Context.Provider value={contextValue}>
+			{children}
+		</QuerySearchV2Context.Provider>
+	);
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/QuerySearchV2.store.ts

@@ -0,0 +1,60 @@
+import { createStore, StoreApi } from 'zustand';
+
+export type QuerySearchV2Store = {
+	/**
+	 * User-typed expression (local state, updates on typing)
+	 */
+	inputExpression: string;
+	/**
+	 * Committed expression (synced to URL, updates on submit)
+	 */
+	committedExpression: string;
+	setInputExpression: (expression: string) => void;
+	commitExpression: (expression: string) => void;
+	resetExpression: () => void;
+	initializeFromUrl: (urlExpression: string) => void;
+};
+
+export interface QuerySearchProps {
+	initialExpression: string | undefined;
+	onChange: (expression: string) => void;
+	onRun: (expression: string) => void;
+}
+
+export interface QuerySearchV2ContextValue {
+	/**
+	 * Combined expression: "initialExpression AND (userExpression)"
+	 */
+	expression: string;
+	userExpression: string;
+	initialExpression: string;
+	querySearchProps: QuerySearchProps;
+}
+
+export function createExpressionStore(): StoreApi<QuerySearchV2Store> {
+	return createStore<QuerySearchV2Store>((set) => ({
+		inputExpression: '',
+		committedExpression: '',
+		setInputExpression: (expression: string): void => {
+			set({ inputExpression: expression });
+		},
+		commitExpression: (expression: string): void => {
+			set({
+				inputExpression: expression,
+				committedExpression: expression,
+			});
+		},
+		resetExpression: (): void => {
+			set({
+				inputExpression: '',
+				committedExpression: '',
+			});
+		},
+		initializeFromUrl: (urlExpression: string): void => {
+			set({
+				inputExpression: urlExpression,
+				committedExpression: urlExpression,
+			});
+		},
+	}));
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/QuerySearchExpressionProvider.test.tsx

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useQuerySearchV2Context } from '../context';
+import {
+	QuerySearchV2Provider,
+	QuerySearchV2ProviderProps,
+} from '../QuerySearchV2.provider';
+
+const mockSetQueryState = jest.fn();
+let mockUrlValue: string | null = null;
+
+jest.mock('nuqs', () => ({
+	parseAsString: {},
+	useQueryState: jest.fn(() => [mockUrlValue, mockSetQueryState]),
+}));
+
+function createWrapper(
+	props: Partial<QuerySearchV2ProviderProps> = {},
+): ({ children }: { children: ReactNode }) => JSX.Element {
+	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
+		return (
+			<QuerySearchV2Provider queryParamKey="testExpression" {...props}>
+				{children}
+			</QuerySearchV2Provider>
+		);
+	};
+}
+
+describe('QuerySearchExpressionProvider', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlValue = null;
+	});
+
+	it('should provide initial context values', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.expression).toBe('');
+		expect(result.current.userExpression).toBe('');
+		expect(result.current.initialExpression).toBe('');
+	});
+
+	it('should combine initialExpression with userExpression', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'k8s.pod.name = "my-pod"' }),
+		});
+
+		expect(result.current.expression).toBe('k8s.pod.name = "my-pod"');
+		expect(result.current.initialExpression).toBe('k8s.pod.name = "my-pod"');
+
+		act(() => {
+			result.current.querySearchProps.onChange('service = "api"');
+		});
+		act(() => {
+			result.current.querySearchProps.onRun('service = "api"');
+		});
+
+		expect(result.current.expression).toBe(
+			'k8s.pod.name = "my-pod" AND (service = "api")',
+		);
+		expect(result.current.userExpression).toBe('service = "api"');
+	});
+
+	it('should provide querySearchProps with correct callbacks', () => {
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper({ initialExpression: 'initial' }),
+		});
+
+		expect(result.current.querySearchProps.initialExpression).toBe('initial');
+		expect(typeof result.current.querySearchProps.onChange).toBe('function');
+		expect(typeof result.current.querySearchProps.onRun).toBe('function');
+	});
+
+	it('should initialize from URL value on mount', () => {
+		mockUrlValue = 'status = 500';
+
+		const { result } = renderHook(() => useQuerySearchV2Context(), {
+			wrapper: createWrapper(),
+		});
+
+		expect(result.current.userExpression).toBe('status = 500');
+		expect(result.current.expression).toBe('status = 500');
+	});
+
+	it('should throw error when used outside provider', () => {
+		expect(() => {
+			renderHook(() => useQuerySearchV2Context());
+		}).toThrow(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/__tests__/store.test.ts

@@ -0,0 +1,61 @@
+import { createExpressionStore } from '../QuerySearchV2.store';
+
+describe('createExpressionStore', () => {
+	it('should create a store with initial state', () => {
+		const store = createExpressionStore();
+		const state = store.getState();
+
+		expect(state.inputExpression).toBe('');
+		expect(state.committedExpression).toBe('');
+	});
+
+	it('should update inputExpression via setInputExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should update both expressions via commitExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+
+		expect(store.getState().inputExpression).toBe('service.name = "api"');
+		expect(store.getState().committedExpression).toBe('service.name = "api"');
+	});
+
+	it('should reset all state via resetExpression', () => {
+		const store = createExpressionStore();
+
+		store.getState().setInputExpression('service.name = "api"');
+		store.getState().commitExpression('service.name = "api"');
+		store.getState().resetExpression();
+
+		expect(store.getState().inputExpression).toBe('');
+		expect(store.getState().committedExpression).toBe('');
+	});
+
+	it('should initialize from URL value', () => {
+		const store = createExpressionStore();
+
+		store.getState().initializeFromUrl('status = 500');
+
+		expect(store.getState().inputExpression).toBe('status = 500');
+		expect(store.getState().committedExpression).toBe('status = 500');
+	});
+
+	it('should create isolated store instances', () => {
+		const store1 = createExpressionStore();
+		const store2 = createExpressionStore();
+
+		store1.getState().setInputExpression('expr1');
+		store2.getState().setInputExpression('expr2');
+
+		expect(store1.getState().inputExpression).toBe('expr1');
+		expect(store2.getState().inputExpression).toBe('expr2');
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/context.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line no-restricted-imports -- React Context required for scoped store pattern
+import { createContext, useContext } from 'react';
+
+import type { QuerySearchV2ContextValue } from './QuerySearchV2.store';
+
+export const QuerySearchV2Context =
+	createContext<QuerySearchV2ContextValue | null>(null);
+
+export function useQuerySearchV2Context(): QuerySearchV2ContextValue {
+	const context = useContext(QuerySearchV2Context);
+	if (!context) {
+		throw new Error(
+			'useQuerySearchV2Context must be used within a QuerySearchV2Provider',
+		);
+	}
+	return context;
+}

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/Provider/index.ts

@@ -0,0 +1,8 @@
+export { useQuerySearchV2Context } from './context';
+export type { QuerySearchV2ProviderProps } from './QuerySearchV2.provider';
+export { QuerySearchV2Provider } from './QuerySearchV2.provider';
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2Store,
+} from './QuerySearchV2.store';

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -19,6 +19,13 @@
 		display: flex;
 		flex-direction: row;
 
+		.query-search-initial-scope-label {
+			position: absolute;
+			left: 8px;
+			top: 10px;
+			z-index: 10;
+		}
+
 		.query-where-clause-editor {
 			flex: 1;
 			min-width: 400px;
@@ -53,6 +60,10 @@
 				}
 			}
 		}
+
+		&.hasInitialExpression .cm-editor .cm-content {
+			padding-left: 22px !important;
+		}
 	}
 
 	.cm-editor {
@@ -68,7 +79,6 @@
 			border-radius: 2px;
 			border: 1px solid var(--l1-border);
 			padding: 0px !important;
-			background-color: var(--l1-background) !important;
 
 			&:focus-within {
 				border-color: var(--l1-border);

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

@@ -30,7 +30,7 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Info, TriangleAlert } from 'lucide-react';
+import { Filter, Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -47,6 +47,7 @@ import { validateQuery } from 'utils/queryValidationUtils';
 import { unquote } from 'utils/stringUtils';
 
 import { queryExamples } from './constants';
+import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
 
@@ -85,6 +86,8 @@ interface QuerySearchProps {
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
 	showFilterSuggestionsWithoutMetric?: boolean;
+	/** When set, the editor shows only the user expression; API/filter uses `initial AND (user)`. */
+	initialExpression?: string;
 }
 
 function QuerySearch({
@@ -96,6 +99,7 @@ function QuerySearch({
 	signalSource,
 	hardcodedAttributeKeys,
 	showFilterSuggestionsWithoutMetric,
+	initialExpression,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -112,18 +116,26 @@ function QuerySearch({
 	const [isFocused, setIsFocused] = useState(false);
 	const editorRef = useRef<EditorView | null>(null);
 
-	const handleQueryValidation = useCallback((newExpression: string): void => {
-		try {
-			const validationResponse = validateQuery(newExpression);
-			setValidation(validationResponse);
-		} catch (error) {
-			setValidation({
-				isValid: false,
-				message: 'Failed to process query',
-				errors: [error as IDetailedError],
-			});
-		}
-	}, []);
+	const isScopedFilter = initialExpression !== undefined;
+
+	const validateExpressionForEditor = useCallback(
+		(editorDoc: string): void => {
+			const toValidate = isScopedFilter
+				? combineInitialAndUserExpression(initialExpression ?? '', editorDoc)
+				: editorDoc;
+			try {
+				const validationResponse = validateQuery(toValidate);
+				setValidation(validationResponse);
+			} catch (error) {
+				setValidation({
+					isValid: false,
+					message: 'Failed to process query',
+					errors: [error as IDetailedError],
+				});
+			}
+		},
+		[initialExpression, isScopedFilter],
+	);
 
 	const getCurrentExpression = useCallback(
 		(): string => editorRef.current?.state.doc.toString() || '',
@@ -165,6 +177,8 @@ function QuerySearch({
 		setIsEditorReady(true);
 	}, []);
 
+	const prevQueryDataExpressionRef = useRef<string | undefined>();
+
 	useEffect(
 		() => {
 			if (!isEditorReady) {
@@ -173,13 +187,22 @@ function QuerySearch({
 
 			const newExpression = queryData.filter?.expression || '';
 			const currentExpression = getCurrentExpression();
+			const prevExpression = prevQueryDataExpressionRef.current;
 
-			// Do not update codemirror editor if the expression is the same
-			if (newExpression !== currentExpression && !isFocused) {
+			// Only sync editor when queryData.filter?.expression actually changed from external source
+			// Not when focus changed (which would reset uncommitted user input)
+			const queryDataExpressionChanged = prevExpression !== newExpression;
+			prevQueryDataExpressionRef.current = newExpression;
+
+			if (
+				queryDataExpressionChanged &&
+				newExpression !== currentExpression &&
+				!isFocused
+			) {
 				updateEditorValue(newExpression, { skipOnChange: true });
-				if (newExpression) {
-					handleQueryValidation(newExpression);
-				}
+			}
+			if (!isFocused) {
+				validateExpressionForEditor(currentExpression);
 			}
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -284,7 +307,7 @@ function QuerySearch({
 						}
 					});
 				}
-				setKeySuggestions(Array.from(merged.values()));
+				setKeySuggestions([...merged.values()]);
 
 				// Force reopen the completion if editor is available and focused
 				if (editorRef.current) {
@@ -337,7 +360,7 @@ function QuerySearch({
 		// If value contains single quotes, escape them and wrap in single quotes
 		if (value.includes("'")) {
 			// Replace single quotes with escaped single quotes
-			const escapedValue = value.replace(/'/g, "\\'");
+			const escapedValue = value.replaceAll(/'/g, "\\'");
 			return `'${escapedValue}'`;
 		}
 
@@ -614,7 +637,7 @@ function QuerySearch({
 
 	const handleBlur = (): void => {
 		const currentExpression = getCurrentExpression();
-		handleQueryValidation(currentExpression);
+		validateExpressionForEditor(currentExpression);
 		setIsFocused(false);
 	};
 
@@ -632,7 +655,6 @@ function QuerySearch({
 	);
 
 	const handleExampleClick = (exampleQuery: string): void => {
-		// If there's an existing query, append the example with AND
 		const currentExpression = getCurrentExpression();
 		const newExpression = currentExpression
 			? `${currentExpression} AND ${exampleQuery}`
@@ -897,12 +919,12 @@ function QuerySearch({
 
 			// If we have previous pairs, we can prioritize keys that haven't been used yet
 			if (queryContext.queryPairs && queryContext.queryPairs.length > 0) {
-				const usedKeys = queryContext.queryPairs.map((pair) => pair.key);
+				const usedKeys = new Set(queryContext.queryPairs.map((pair) => pair.key));
 
 				// Add boost to unused keys to prioritize them
 				options = options.map((option) => ({
 					...option,
-					boost: usedKeys.includes(option.label) ? -10 : 10,
+					boost: usedKeys.has(option.label) ? -10 : 10,
 				}));
 			}
 
@@ -1317,6 +1339,19 @@ function QuerySearch({
 			)}
 
 			<div className="query-where-clause-editor-container">
+				{isScopedFilter ? (
+					<Tooltip title={initialExpression || ''} placement="left">
+						<div className="query-search-initial-scope-label">
+							<Filter
+								size={14}
+								style={{
+									opacity: 0.9,
+									color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+								}}
+							/>
+						</div>
+					</Tooltip>
+				) : null}
 				<Tooltip
 					title={<div data-log-detail-ignore="true">{getTooltipContent()}</div>}
 					placement="left"
@@ -1356,6 +1391,7 @@ function QuerySearch({
 					className={cx('query-where-clause-editor', {
 						isValid: validation.isValid === true,
 						hasErrors: validation.errors.length > 0,
+						hasInitialExpression: isScopedFilter,
 					})}
 					extensions={[
 						autocompletion({
@@ -1390,7 +1426,12 @@ function QuerySearch({
 									// Mod-Enter is usually Ctrl-Enter or Cmd-Enter based on OS
 									run: (): boolean => {
 										if (onRun && typeof onRun === 'function') {
-											onRun(getCurrentExpression());
+											const user = getCurrentExpression();
+											onRun(
+												isScopedFilter
+													? combineInitialAndUserExpression(initialExpression ?? '', user)
+													: user,
+											);
 										}
 										return true;
 									},
@@ -1555,6 +1596,7 @@ QuerySearch.defaultProps = {
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
 	showFilterSuggestionsWithoutMetric: false,
+	initialExpression: undefined,
 };
 
 export default QuerySearch;

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/utils.ts

@@ -0,0 +1,58 @@
+import {
+	combineInitialAndUserExpression,
+	getUserExpressionFromCombined,
+} from '../utils';
+
+describe('entityLogsExpression', () => {
+	describe('combineInitialAndUserExpression', () => {
+		it('returns user when initial is empty', () => {
+			expect(combineInitialAndUserExpression('', 'body contains error')).toBe(
+				'body contains error',
+			);
+		});
+
+		it('returns initial when user is empty', () => {
+			expect(combineInitialAndUserExpression('k8s.pod.name = "x"', '')).toBe(
+				'k8s.pod.name = "x"',
+			);
+		});
+
+		it('wraps user in parentheses with AND', () => {
+			expect(
+				combineInitialAndUserExpression('k8s.pod.name = "x"', 'body = "a"'),
+			).toBe('k8s.pod.name = "x" AND (body = "a")');
+		});
+	});
+
+	describe('getUserExpressionFromCombined', () => {
+		it('returns empty when combined equals initial', () => {
+			expect(
+				getUserExpressionFromCombined('k8s.pod.name = "x"', 'k8s.pod.name = "x"'),
+			).toBe('');
+		});
+
+		it('extracts user from wrapped form', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND (body = "a")',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('extracts user from legacy AND without parens', () => {
+			expect(
+				getUserExpressionFromCombined(
+					'k8s.pod.name = "x"',
+					'k8s.pod.name = "x" AND body = "a"',
+				),
+			).toBe('body = "a"');
+		});
+
+		it('returns full combined when initial is empty', () => {
+			expect(getUserExpressionFromCombined('', 'service.name = "a"')).toBe(
+				'service.name = "a"',
+			);
+		});
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/utils.ts

@@ -0,0 +1,40 @@
+export function combineInitialAndUserExpression(
+	initial: string,
+	user: string,
+): string {
+	const i = initial.trim();
+	const u = user.trim();
+	if (!i) {
+		return u;
+	}
+	if (!u) {
+		return i;
+	}
+	return `${i} AND (${u})`;
+}
+
+export function getUserExpressionFromCombined(
+	initial: string,
+	combined: string | null | undefined,
+): string {
+	const i = initial.trim();
+	const c = (combined ?? '').trim();
+	if (!c) {
+		return '';
+	}
+	if (!i) {
+		return c;
+	}
+	if (c === i) {
+		return '';
+	}
+	const wrappedPrefix = `${i} AND (`;
+	if (c.startsWith(wrappedPrefix) && c.endsWith(')')) {
+		return c.slice(wrappedPrefix.length, -1);
+	}
+	const plainPrefix = `${i} AND `;
+	if (c.startsWith(plainPrefix)) {
+		return c.slice(plainPrefix.length);
+	}
+	return c;
+}

frontend/src/components/QueryBuilderV2/index.ts

@@ -0,0 +1,14 @@
+export type {
+	QuerySearchProps,
+	QuerySearchV2ContextValue,
+	QuerySearchV2ProviderProps,
+} from './QueryV2/QuerySearch/Provider';
+export {
+	QuerySearchV2Provider,
+	useQuerySearchV2Context,
+} from './QueryV2/QuerySearch/Provider';
+export { QueryBuilderV2 } from './QueryBuilderV2';
+export {
+	QueryBuilderV2Provider,
+	useQueryBuilderV2Context,
+} from './QueryBuilderV2Context';

frontend/src/components/Styled/styles.ts

@@ -1,41 +0,0 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components';
-
-const cssProperty = (key: any, value: any): FlattenSimpleInterpolation =>
-	key &&
-	value &&
-	css`
-		${key}: ${value};
-	`;
-
-interface IFlexProps {
-	flexDirection?: string; // Need to replace this with exact css props. Not able to find any :(
-	flex?: number | string;
-}
-export const Flex = ({
-	flexDirection,
-	flex,
-}: IFlexProps): FlattenSimpleInterpolation => css`
-	${cssProperty('flex-direction', flexDirection)}
-	${cssProperty('flex', flex)}
-`;
-
-interface IDisplayProps {
-	display?: string;
-}
-export const Display = ({
-	display,
-}: IDisplayProps): FlattenSimpleInterpolation => css`
-	${cssProperty('display', display)}
-`;
-
-interface ISpacingProps {
-	margin?: string;
-	padding?: string;
-}
-export const Spacing = ({
-	margin,
-	padding,
-}: ISpacingProps): FlattenSimpleInterpolation => css`
-	${cssProperty('margin', margin)}
-	${cssProperty('padding', padding)}
-`;

frontend/src/components/TabLabel/TabLabel.interfaces.ts

@@ -1,5 +0,0 @@
-export type TabLabelProps = {
-	isDisabled: boolean;
-	label: string;
-	tooltipText?: string;
-};

frontend/src/components/TabLabel/index.tsx

@@ -1,29 +0,0 @@
-import { memo } from 'react';
-import { Tooltip } from 'antd';
-
-import { TabLabelProps } from './TabLabel.interfaces';
-
-function TabLabel({
-	label,
-	isDisabled,
-	tooltipText,
-}: TabLabelProps): JSX.Element {
-	const currentLabel = <span data-testid={`${label}`}>{label}</span>;
-
-	if (isDisabled) {
-		return (
-			<Tooltip
-				trigger="hover"
-				autoAdjustOverflow
-				placement="top"
-				title={tooltipText}
-			>
-				{currentLabel}
-			</Tooltip>
-		);
-	}
-
-	return currentLabel;
-}
-
-export default memo(TabLabel);

frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss

@@ -1,5 +0,0 @@
-.tab-title {
-	display: flex;
-	gap: 4px;
-	align-items: center;
-}

frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx

@@ -1,41 +0,0 @@
-import { useState } from 'react';
-import { Radio } from 'antd';
-import type { RadioChangeEvent } from 'antd/lib';
-import { History, Table } from 'lucide-react';
-
-import { ALERT_TABS } from '../constants';
-
-import './Tabs.styles.scss';
-
-export function Tabs(): JSX.Element {
-	const [selectedTab, setSelectedTab] = useState('overview');
-
-	const handleTabChange = (e: RadioChangeEvent): void => {
-		setSelectedTab(e.target.value);
-	};
-
-	return (
-		<Radio.Group className="tabs" onChange={handleTabChange} value={selectedTab}>
-			<Radio.Button
-				className={
-					selectedTab === ALERT_TABS.OVERVIEW ? 'selected_view tab' : 'tab'
-				}
-				value={ALERT_TABS.OVERVIEW}
-			>
-				<div className="tab-title">
-					<Table size={14} />
-					Overview
-				</div>
-			</Radio.Button>
-			<Radio.Button
-				className={selectedTab === ALERT_TABS.HISTORY ? 'selected_view tab' : 'tab'}
-				value={ALERT_TABS.HISTORY}
-			>
-				<div className="tab-title">
-					<History size={14} />
-					History
-				</div>
-			</Radio.Button>
-		</Radio.Group>
-	);
-}

frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss

@@ -1,18 +0,0 @@
-@mixin flex-center {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.tabs-and-filters {
-	@include flex-center;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	.filters {
-		@include flex-center;
-		gap: 16px;
-		.reset-button {
-			@include flex-center;
-		}
-	}
-}

frontend/src/components/TabsAndFilters/TabsAndFilters.tsx

@@ -1,16 +0,0 @@
-import { Filters } from 'components/AlertDetailsFilters/Filters';
-
-import { Tabs } from './Tabs/Tabs';
-
-import './TabsAndFilters.styles.scss';
-
-function TabsAndFilters(): JSX.Element {
-	return (
-		<div className="tabs-and-filters">
-			<Tabs />
-			<Filters />
-		</div>
-	);
-}
-
-export default TabsAndFilters;

frontend/src/components/TabsAndFilters/constants.ts

@@ -1,5 +0,0 @@
-export const ALERT_TABS = {
-	OVERVIEW: 'OVERVIEW',
-	HISTORY: 'HISTORY',
-	ACTIVITY: 'ACTIVITY',
-} as const;

frontend/src/components/TanStackTableView/TanStackCustomTableRow.tsx

@@ -47,10 +47,16 @@ function TanStackCustomTableRow<TData>({
 	const isActive = context?.isRowActive?.(rowData) ?? false;
 	const extraClass = context?.getRowClassName?.(rowData) ?? '';
 	const rowStyle = context?.getRowStyle?.(rowData);
+	const enableAlternatingRowColors =
+		context?.enableAlternatingRowColors ?? false;
 
 	const rowClassName = cx(
 		tableStyles.tableRow,
 		isActive && tableStyles.tableRowActive,
+		enableAlternatingRowColors &&
+			(item.row.index % 2 === 0
+				? tableStyles.tableRowEven
+				: tableStyles.tableRowOdd),
 		extraClass,
 	);
 
@@ -105,6 +111,12 @@ function areTableRowPropsEqual<TData>(
 	if (prev.context?.columnVisibilityKey !== next.context?.columnVisibilityKey) {
 		return false;
 	}
+	if (
+		prev.context?.enableAlternatingRowColors !==
+		next.context?.enableAlternatingRowColors
+	) {
+		return false;
+	}
 
 	if (prev.context !== next.context) {
 		const prevActive = prev.context?.isRowActive?.(prevData) ?? false;

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

@@ -2,7 +2,10 @@
 	position: sticky;
 	top: 0;
 	z-index: 2;
-	padding: 0.3rem;
+	padding: var(--tanstack-cell-padding-top, 0.3rem)
+		var(--tanstack-cell-padding-right, 0.3rem)
+		var(--tanstack-cell-padding-bottom, 0.3rem)
+		var(--tanstack-cell-padding-left, 0.3rem);
 	transform: translate3d(
 		var(--tanstack-header-translate-x, 0px),
 		var(--tanstack-header-translate-y, 0px),
@@ -19,7 +22,17 @@
 	}
 
 	border: none !important;
-	background-color: var(--l2-background) !important;
+	background-color: var(
+		--tanstack-table-header-cell-bg,
+		var(--l2-background)
+	) !important;
+
+	&:first-child {
+		background-color: var(
+			--tanstack-first-column-header-bg,
+			var(--tanstack-table-header-cell-bg, var(--l2-background))
+		) !important;
+	}
 }
 
 .tanstackHeaderContent {
@@ -61,7 +74,7 @@
 	width: 12px;
 	height: 12px;
 	cursor: grab;
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-header-cell-color, var(--l2-foreground));
 	opacity: 1;
 	touch-action: none;
 }
@@ -74,7 +87,7 @@
 	height: 20px;
 	cursor: pointer;
 	flex-shrink: 0;
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-header-cell-color, var(--l2-foreground));
 
 	margin-left: auto;
 }
@@ -82,8 +95,9 @@
 .tanstackColumnActionsContent {
 	width: 140px;
 	padding: 0;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	background: var(--tanstack-table-header-cell-bg, var(--l2-background));
+	border: 1px solid
+		var(--tanstack-table-header-cell-actions-border-color, var(--l2-border));
 	border-radius: 4px;
 	box-shadow: none;
 }
@@ -137,7 +151,7 @@
 }
 
 .tanstackHeaderCell.isResizing .cursorColResize {
-	background: var(--bg-robin-300);
+	background: var(--tanstack-table-resize-active-bg, var(--bg-robin-300));
 }
 
 .tanstackResizeHandleLine {
@@ -147,7 +161,7 @@
 	left: 50%;
 	width: 4px;
 	transform: translateX(-50%);
-	background: var(--l2-background);
+	background: var(--tanstack-table-resize-handle-bg, var(--l2-background));
 	opacity: 1;
 	pointer-events: none;
 	transition:
@@ -155,13 +169,34 @@
 		width 120ms ease;
 }
 
+.tanstackHeaderCell:first-child .tanstackResizeHandleLine {
+	background: var(
+		--tanstack-first-column-header-bg,
+		var(--tanstack-table-resize-handle-bg, var(--l2-background))
+	);
+}
+
 .cursorColResize:hover .tanstackResizeHandleLine {
-	background: var(--l2-border);
+	background: var(--tanstack-table-resize-handle-hover-bg, var(--l2-border));
+}
+
+.tanstackHeaderCell:first-child
+	.cursorColResize:hover
+	.tanstackResizeHandleLine {
+	background: color-mix(
+		in srgb,
+		var(
+				--tanstack-first-column-header-bg,
+				var(--tanstack-table-resize-handle-bg, var(--l2-background))
+			)
+			60%,
+		black
+	);
 }
 
 .tanstackHeaderCell.isResizing .tanstackResizeHandleLine {
 	width: 2px;
-	background: var(--bg-robin-500);
+	background: var(--tanstack-table-resize-handle-active-bg, var(--bg-robin-500));
 	transition: none;
 }
 
@@ -213,7 +248,12 @@
 	flex-shrink: 0;
 	width: 14px;
 	height: 14px;
-	color: var(--l2-foreground);
+	color: var(--l3-foreground);
+
+	&[data-sort-direction='asc'],
+	&[data-sort-direction='desc'] {
+		color: var(--primary);
+	}
 }
 
 .isSortable {

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -9,7 +9,7 @@ import { useSortable } from '@dnd-kit/sortable';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import cx from 'classnames';
-import { ChevronDown, ChevronUp, GripVertical } from 'lucide-react';
+import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from 'lucide-react';
 
 import { SortState, TableColumnDef } from './types';
 
@@ -177,12 +177,17 @@ function TanStackHeaderRow<TData>({
 									? column.header()
 									: String(column.header || '').replace(/^\w/, (c) => c.toUpperCase())}
 						</span>
-						<span className={headerStyles.tanstackSortIndicator}>
+						<span
+							className={headerStyles.tanstackSortIndicator}
+							data-sort-direction={currentSortDirection || 'none'}
+						>
 							{currentSortDirection === 'asc' ? (
-								<ChevronUp size={SORT_ICON_SIZE} />
+								<ArrowUp size={SORT_ICON_SIZE} />
 							) : currentSortDirection === 'desc' ? (
-								<ChevronDown size={SORT_ICON_SIZE} />
-							) : null}
+								<ArrowDown size={SORT_ICON_SIZE} />
+							) : (
+								<ArrowUpDown size={SORT_ICON_SIZE} />
+							)}
 						</span>
 					</button>
 				) : (

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

@@ -1,4 +1,22 @@
 .tanStackTable {
+	--tanstack-cell-padding: var(--tanstack-cell-padding-override, 0.3rem);
+	--tanstack-cell-padding-left: var(
+		--tanstack-cell-padding-left-override,
+		var(--tanstack-cell-padding)
+	);
+	--tanstack-cell-padding-right: var(
+		--tanstack-cell-padding-right-override,
+		var(--tanstack-cell-padding)
+	);
+	--tanstack-cell-padding-top: var(
+		--tanstack-cell-padding-top-override,
+		var(--tanstack-cell-padding)
+	);
+	--tanstack-cell-padding-bottom: var(
+		--tanstack-cell-padding-bottom-override,
+		var(--tanstack-cell-padding)
+	);
+
 	width: 100%;
 	border-collapse: separate;
 	border-spacing: 0;
@@ -26,7 +44,7 @@
 	line-clamp: var(--tanstack-plain-body-line-clamp, 1);
 	font-size: var(--tanstack-plain-cell-font-size, 14px);
 	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-cell-color, var(--l2-foreground));
 	max-width: 100%;
 	word-break: break-all;
 }
@@ -42,13 +60,35 @@
 }
 
 .tableCell {
-	padding: 0.3rem;
+	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
+		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
+	height: var(--tanstack-table-row-height, auto);
 	font-style: normal;
 	font-weight: 400;
 	letter-spacing: -0.07px;
 	font-size: var(--tanstack-plain-cell-font-size, 14px);
 	line-height: var(--tanstack-plain-cell-line-height, 18px);
-	color: var(--l2-foreground);
+	color: var(--tanstack-table-cell-color, var(--l2-foreground));
+	background-color: var(--tanstack-table-cell-bg, transparent);
+
+	&:first-child {
+		padding: var(
+				--tanstack-cell-padding-top-first-column,
+				var(--tanstack-cell-padding-top)
+			)
+			var(
+				--tanstack-cell-padding-right-first-column,
+				var(--tanstack-cell-padding-right)
+			)
+			var(
+				--tanstack-cell-padding-bottom-first-column,
+				var(--tanstack-cell-padding-bottom)
+			)
+			var(
+				--tanstack-cell-padding-left-first-column,
+				var(--tanstack-cell-padding-left)
+			);
+	}
 }
 
 .tableRow {
@@ -58,19 +98,69 @@
 
 	&:hover {
 		.tableCell {
-			background-color: var(--row-hover-bg) !important;
+			background-color: var(
+				--tanstack-table-row-hover-bg,
+				var(--row-hover-bg)
+			) !important;
 		}
 	}
 
 	&.tableRowActive {
 		.tableCell {
-			background-color: var(--row-active-bg) !important;
+			background-color: var(
+				--tanstack-table-row-active-bg,
+				var(--row-active-bg)
+			) !important;
 		}
 	}
+
+	&.tableRowOdd {
+		.tableCell {
+			background-color: var(--tanstack-table-row-odd-bg, transparent);
+		}
+	}
+
+	&.tableRowEven {
+		.tableCell {
+			background-color: var(--tanstack-table-row-even-bg, transparent);
+		}
+	}
+
+	.tableCell:first-child {
+		background-color: var(
+			--tanstack-first-column-bg,
+			var(--tanstack-table-cell-bg, transparent)
+		);
+		color: var(
+			--tanstack-first-column-color,
+			var(--tanstack-table-cell-color, var(--l2-foreground))
+		);
+	}
+
+	&.tableRowOdd .tableCell:first-child {
+		background-color: var(
+			--tanstack-first-column-odd-bg,
+			var(
+				--tanstack-first-column-bg,
+				var(--tanstack-table-row-odd-bg, transparent)
+			)
+		);
+	}
+
+	&.tableRowEven .tableCell:first-child {
+		background-color: var(
+			--tanstack-first-column-even-bg,
+			var(
+				--tanstack-first-column-bg,
+				var(--tanstack-table-row-even-bg, transparent)
+			)
+		);
+	}
 }
 
 .tableHeaderCell {
-	padding: 0.3rem;
+	padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
+		var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
 	height: 36px;
 	text-align: left;
 	font-size: 14px;
@@ -78,20 +168,40 @@
 	font-weight: 400;
 	line-height: 18px;
 	letter-spacing: -0.07px;
-	color: var(--l1-foreground);
-
-	// TODO: Remove this once background color (l1) is matching the actual background color of the page
-	&[data-dark-mode='true'] {
-		background: #0b0c0d;
-	}
-
-	&[data-dark-mode='false'] {
-		background: #fdfdfd;
-	}
+	color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
+	background: var(--tanstack-table-header-cell-bg, var(--l1-background));
+	border-bottom: 1px solid var(--tanstack-table-header-border-color, transparent);
 }
 
 .tableRowExpansion {
 	display: table-row;
+
+	.tableCellExpansion {
+		background-color: var(--tanstack-table-header-cell-bg, var(--l1-background));
+		color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
+	}
+
+	& > td {
+		padding: 0;
+	}
+
+	& thead th:first-child {
+		padding-left: var(
+			--tanstack-expansion-first-col-padding-left,
+			calc(var(--spacing-3) - 1px)
+		);
+	}
+
+	& tbody td:first-child {
+		padding-left: var(
+			--tanstack-expansion-first-col-padding-left,
+			calc(var(--spacing-20) + var(--spacing-4))
+		);
+	}
+
+	:global(thead) {
+		position: unset !important;
+	}
 }
 
 .tableCellExpansion {

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -90,6 +90,7 @@ function TanStackTableInner<TData>(
 		skeletonRowCount = 10,
 		enableQueryParams,
 		pagination,
+		paginationClassname,
 		onEndReached,
 		getRowKey,
 		getItemKey,
@@ -112,9 +113,17 @@ function TanStackTableInner<TData>(
 		testId,
 		prefixPaginationContent,
 		suffixPaginationContent,
+		enableAlternatingRowColors,
+		disableVirtualScroll,
 	}: TanStackTableProps<TData>,
 	forwardedRef: React.ForwardedRef<TanStackTableHandle>,
 ): JSX.Element {
+	if (disableVirtualScroll && onEndReached) {
+		throw new Error(
+			'TanStackTable: Cannot use onEndReached with disableVirtualScroll. Infinite scroll requires virtualization.',
+		);
+	}
+
 	const virtuosoRef = useRef<TableVirtuosoHandle | null>(null);
 	const isDarkMode = useIsDarkMode();
 
@@ -221,6 +230,15 @@ function TanStackTableInner<TData>(
 		[getRowCanExpand],
 	);
 
+	const isExpandEnabled = Boolean(renderExpandedRow);
+	useEffect(() => {
+		const hasExpanded =
+			typeof expanded === 'boolean' ? expanded : Object.keys(expanded).length > 0;
+		if (!isExpandEnabled && hasExpanded) {
+			setExpanded({});
+		}
+	}, [isExpandEnabled, expanded, setExpanded]);
+
 	const table = useReactTable({
 		data: effectiveData,
 		columns: tanstackColumns,
@@ -229,7 +247,7 @@ function TanStackTableInner<TData>(
 		columnResizeMode: 'onChange',
 		getCoreRowModel: getCoreRowModel(),
 		getRowId,
-		enableExpanding: Boolean(renderExpandedRow),
+		enableExpanding: isExpandEnabled,
 		getRowCanExpand: renderExpandedRow ? tableGetRowCanExpand : undefined,
 		onColumnSizingChange: handleColumnSizingChange,
 		onColumnVisibilityChange: noopColumnVisibility,
@@ -333,6 +351,7 @@ function TanStackTableInner<TData>(
 			hasSingleColumn,
 			columnOrderKey,
 			columnVisibilityKey,
+			enableAlternatingRowColors,
 		}),
 		[
 			getRowStyle,
@@ -350,6 +369,7 @@ function TanStackTableInner<TData>(
 			hasSingleColumn,
 			columnOrderKey,
 			columnVisibilityKey,
+			enableAlternatingRowColors,
 		],
 	);
 
@@ -500,7 +520,10 @@ function TanStackTableInner<TData>(
 	);
 
 	return (
-		<div className={cx(viewStyles.tanstackTableViewWrapper, className)}>
+		<div
+			className={cx(viewStyles.tanstackTableViewWrapper, className)}
+			data-has-group-by={(groupBy?.length || 0) > 0}
+		>
 			<TanStackTableStateProvider>
 				<TableLoadingSync
 					isLoading={isLoading}
@@ -508,23 +531,53 @@ function TanStackTableInner<TData>(
 				/>
 				<ColumnVisibilitySync visibility={effectiveVisibility} />
 				<TooltipProvider>
-					<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
-						className={virtuosoClassName}
-						ref={virtuosoRef}
-						{...restTableScrollerProps}
-						data={flatItems}
-						totalCount={flatItems.length}
-						context={virtuosoContext}
-						increaseViewportBy={INCREASE_VIEWPORT_BY}
-						initialTopMostItemIndex={
-							flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
-						}
-						fixedHeaderContent={tableHeader}
-						style={virtuosoTableStyle}
-						components={virtuosoComponents}
-						endReached={onEndReached ? handleEndReached : undefined}
-						data-testid={testId}
-					/>
+					{disableVirtualScroll ? (
+						<div
+							className={virtuosoClassName}
+							{...restTableScrollerProps}
+							data-testid={testId}
+						>
+							<table className={tableStyles.tanStackTable} style={virtuosoTableStyle}>
+								<VirtuosoTableColGroup columns={effectiveColumns} table={table} />
+								<thead>{tableHeader()}</thead>
+								<tbody>
+									{(isLoading && data.length === 0
+										? flatItems.slice(0, skeletonRowCount)
+										: flatItems
+									).map((item, index) => (
+										<TanStackCustomTableRow
+											key={
+												item.kind === 'expansion' ? `${item.row.id}-expansion` : item.row.id
+											}
+											item={item}
+											context={virtuosoContext}
+											data-index={index}
+											data-item-index={index}
+											data-known-size={0}
+										/>
+									))}
+								</tbody>
+							</table>
+						</div>
+					) : (
+						<TableVirtuoso<FlatItem<TData>, TableRowContext<TData>>
+							className={virtuosoClassName}
+							ref={virtuosoRef}
+							{...restTableScrollerProps}
+							data={flatItems}
+							totalCount={flatItems.length}
+							context={virtuosoContext}
+							increaseViewportBy={INCREASE_VIEWPORT_BY}
+							initialTopMostItemIndex={
+								flatIndexForActiveRow >= 0 ? flatIndexForActiveRow : 0
+							}
+							fixedHeaderContent={tableHeader}
+							style={virtuosoTableStyle}
+							components={virtuosoComponents}
+							endReached={onEndReached ? handleEndReached : undefined}
+							data-testid={testId}
+						/>
+					)}
 					{showInfiniteScrollLoader && (
 						<div
 							className={viewStyles.tanstackLoadingOverlay}
@@ -534,7 +587,7 @@ function TanStackTableInner<TData>(
 						</div>
 					)}
 					{showPagination && pagination && (
-						<div className={viewStyles.paginationContainer}>
+						<div className={cx(viewStyles.paginationContainer, paginationClassname)}>
 							{prefixPaginationContent}
 							<Pagination
 								current={page}

frontend/src/components/TanStackTableView/TanStackTableSkeleton.tsx

@@ -1,73 +0,0 @@
-import { useMemo } from 'react';
-import type { ColumnSizingState } from '@tanstack/react-table';
-import { Skeleton } from 'antd';
-
-import { TableColumnDef } from './types';
-import { getColumnWidthStyle } from './utils';
-
-import tableStyles from './TanStackTable.module.scss';
-import styles from './TanStackTableSkeleton.module.scss';
-
-type TanStackTableSkeletonProps<TData> = {
-	columns: TableColumnDef<TData>[];
-	rowCount: number;
-	isDarkMode: boolean;
-	columnSizing?: ColumnSizingState;
-};
-
-export function TanStackTableSkeleton<TData>({
-	columns,
-	rowCount,
-	isDarkMode,
-	columnSizing,
-}: TanStackTableSkeletonProps<TData>): JSX.Element {
-	const rows = useMemo(
-		() => Array.from({ length: rowCount }, (_, i) => i),
-		[rowCount],
-	);
-
-	return (
-		<table className={tableStyles.tanStackTable}>
-			<colgroup>
-				{columns.map((column, index) => (
-					<col
-						key={column.id}
-						style={getColumnWidthStyle(
-							column,
-							columnSizing?.[column.id],
-							index === columns.length - 1,
-						)}
-					/>
-				))}
-			</colgroup>
-			<thead>
-				<tr>
-					{columns.map((column) => (
-						<th
-							key={column.id}
-							className={tableStyles.tableHeaderCell}
-							data-dark-mode={isDarkMode}
-						>
-							{typeof column.header === 'function' ? (
-								<Skeleton.Input active size="small" className={styles.headerSkeleton} />
-							) : (
-								column.header
-							)}
-						</th>
-					))}
-				</tr>
-			</thead>
-			<tbody>
-				{rows.map((rowIndex) => (
-					<tr key={rowIndex} className={tableStyles.tableRow}>
-						{columns.map((column) => (
-							<td key={column.id} className={tableStyles.tableCell}>
-								<Skeleton.Input active size="small" className={styles.cellSkeleton} />
-							</td>
-						))}
-					</tr>
-				))}
-			</tbody>
-		</table>
-	);
-}

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

@@ -49,7 +49,8 @@
 	width: 100%;
 	overflow-x: auto;
 	scrollbar-width: thin;
-	scrollbar-color: var(--bg-slate-300) transparent;
+	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-slate-300))
+		transparent;
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -65,12 +66,12 @@
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
+		background: var(--tanstack-table-scrollbar-color, var(--bg-slate-300));
 		border-radius: 9999px;
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-slate-200);
+		background: var(--tanstack-table-scrollbar-hover-color, var(--bg-slate-200));
 	}
 
 	&.cellTypographySmall {
@@ -135,18 +136,25 @@
 	z-index: 3;
 	border-radius: 8px;
 	padding: 8px 16px;
-	background: var(--l1-background);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	background: var(--tanstack-table-loading-overlay-bg, var(--l1-background));
+	box-shadow: var(
+		--tanstack-table-loading-overlay-shadow,
+		0 2px 8px rgba(0, 0, 0, 0.15)
+	);
 }
 
 :global(.lightMode) .tanstackTableVirtuosoScroll {
-	scrollbar-color: var(--bg-vanilla-300) transparent;
+	scrollbar-color: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300))
+		transparent;
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--bg-vanilla-300);
+		background: var(--tanstack-table-scrollbar-color, var(--bg-vanilla-300));
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--bg-vanilla-100);
+		background: var(
+			--tanstack-table-scrollbar-hover-color,
+			var(--bg-vanilla-100)
+		);
 	}
 }

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

@@ -389,6 +389,101 @@ describe('TanStackTableView Integration', () => {
 			// by checking the table renders without errors
 			expect(screen.getByRole('table')).toBeInTheDocument();
 		});
+
+		it('renders without errors when expanded state exists but expansion is disabled', async () => {
+			// This tests that the table handles the case where URL has expanded state
+			// but renderExpandedRow is undefined (expansion disabled).
+			// The table's useEffect should reset expanded state automatically.
+			renderTanStackTable({
+				props: {
+					enableQueryParams: true,
+					// renderExpandedRow is undefined - expansion disabled
+				},
+				queryParams: { expanded: '["1"]' },
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// Table should render without any expanded rows
+			expect(screen.queryByTestId('expanded-content')).not.toBeInTheDocument();
+		});
+
+		it('renders expanded rows with unique keys in non-virtualized mode', async () => {
+			// This tests that row and expansion items have unique keys to avoid
+			// React's "duplicate key" warning when disableVirtualScroll is true
+			renderTanStackTable({
+				props: {
+					disableVirtualScroll: true,
+					enableQueryParams: true,
+					renderExpandedRow: (row) => (
+						<div data-testid={`expanded-${row.id}`}>Expanded: {row.name}</div>
+					),
+					getRowCanExpand: () => true,
+					getRowKey: (row) => row.id,
+				},
+				queryParams: { expanded: '["1"]' },
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+			});
+
+			// Both the row and its expansion content should be rendered
+			expect(screen.getByTestId('expanded-1')).toBeInTheDocument();
+			expect(screen.getByText('Expanded: Item 1')).toBeInTheDocument();
+
+			// Verify all 3 data rows plus 1 expansion row = 4 tr elements in tbody
+			const tbody = screen.getByRole('table').querySelector('tbody');
+			expect(tbody?.querySelectorAll('tr')).toHaveLength(4);
+		});
+	});
+
+	describe('disableVirtualScroll', () => {
+		it('throws error when used with onEndReached', () => {
+			expect(() => {
+				renderTanStackTable({
+					props: {
+						disableVirtualScroll: true,
+						onEndReached: jest.fn(),
+					},
+				});
+			}).toThrow(
+				'TanStackTable: Cannot use onEndReached with disableVirtualScroll. Infinite scroll requires virtualization.',
+			);
+		});
+
+		it('renders all rows without virtualization', async () => {
+			renderTanStackTable({
+				props: {
+					disableVirtualScroll: true,
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('Item 1')).toBeInTheDocument();
+				expect(screen.getByText('Item 2')).toBeInTheDocument();
+				expect(screen.getByText('Item 3')).toBeInTheDocument();
+			});
+
+			// Verify table structure exists
+			expect(screen.getByRole('table')).toBeInTheDocument();
+		});
+
+		it('renders column headers without virtualization', async () => {
+			renderTanStackTable({
+				props: {
+					disableVirtualScroll: true,
+				},
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('ID')).toBeInTheDocument();
+				expect(screen.getByText('Name')).toBeInTheDocument();
+				expect(screen.getByText('Value')).toBeInTheDocument();
+			});
+		});
 	});
 
 	describe('infinite scroll', () => {

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

@@ -138,7 +138,10 @@ describe('useTableParams (URL mode — enableQueryParams set)', () => {
 
 	it('reads initial page from URL params', () => {
 		const wrapper = createNuqsWrapper({ page: '3' });
-		const { result } = renderHook(() => useTableParams(true), { wrapper });
+		// Pass matching default to prevent reset on mount (page resets when orderBy changes)
+		const { result } = renderHook(() => useTableParams(true, { page: 3 }), {
+			wrapper,
+		});
 		expect(result.current.page).toBe(3);
 	});
 
@@ -249,3 +252,294 @@ describe('useTableParams (URL mode — enableQueryParams set)', () => {
 		expect(result.current.orderBy).toBeNull();
 	});
 });
+
+describe('useTableParams (selective URL mode — partial config object)', () => {
+	beforeEach(() => {
+		jest.useFakeTimers();
+	});
+
+	afterEach(() => {
+		jest.useRealTimers();
+	});
+
+	it('syncs only page to URL when only page is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(() => useTableParams({ page: 'myPage' }), {
+			wrapper,
+		});
+
+		// Update page - should sync to URL
+		act(() => {
+			result.current.setPage(5);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(5);
+		const lastPage = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('myPage'))
+			.filter(Boolean)
+			.pop();
+		expect(lastPage).toBe('5');
+
+		// Update limit - should stay local (not in URL)
+		act(() => {
+			result.current.setLimit(100);
+			jest.runAllTimers();
+		});
+		expect(result.current.limit).toBe(100);
+		const limitInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('limit') !== null,
+		);
+		expect(limitInUrl).toBe(false);
+
+		// Update orderBy - should stay local (not in URL)
+		act(() => {
+			result.current.setOrderBy({ columnName: 'test', order: 'asc' });
+			jest.runAllTimers();
+		});
+		expect(result.current.orderBy).toStrictEqual({
+			columnName: 'test',
+			order: 'asc',
+		});
+		const orderByInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('order_by') !== null,
+		);
+		expect(orderByInUrl).toBe(false);
+	});
+
+	it('syncs only orderBy to URL when only orderBy is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(() => useTableParams({ orderBy: 'mySort' }), {
+			wrapper,
+		});
+
+		// Update orderBy - should sync to URL
+		act(() => {
+			result.current.setOrderBy({ columnName: 'cpu', order: 'desc' });
+			jest.runAllTimers();
+		});
+		expect(result.current.orderBy).toStrictEqual({
+			columnName: 'cpu',
+			order: 'desc',
+		});
+		const lastOrderBy = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('mySort'))
+			.filter(Boolean)
+			.pop();
+		expect(lastOrderBy).toBeDefined();
+		expect(JSON.parse(lastOrderBy!)).toStrictEqual({
+			columnName: 'cpu',
+			order: 'desc',
+		});
+
+		// Update page - should stay local
+		act(() => {
+			result.current.setPage(3);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(3);
+		const pageInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('page') !== null,
+		);
+		expect(pageInUrl).toBe(false);
+	});
+
+	it('syncs only limit to URL when only limit is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(() => useTableParams({ limit: 'myLimit' }), {
+			wrapper,
+		});
+
+		// Update limit - should sync to URL
+		act(() => {
+			result.current.setLimit(25);
+			jest.runAllTimers();
+		});
+		expect(result.current.limit).toBe(25);
+		const lastLimit = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('myLimit'))
+			.filter(Boolean)
+			.pop();
+		expect(lastLimit).toBe('25');
+
+		// Update page - should stay local
+		act(() => {
+			result.current.setPage(2);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(2);
+		const pageInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('page') !== null,
+		);
+		expect(pageInUrl).toBe(false);
+	});
+
+	it('syncs only expanded to URL when only expanded is configured', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(
+			() => useTableParams({ expanded: 'myExpanded' }),
+			{ wrapper },
+		);
+
+		// Update expanded - should sync to URL
+		act(() => {
+			result.current.setExpanded({ 'row-1': true, 'row-2': true });
+			jest.runAllTimers();
+		});
+		expect(result.current.expanded).toStrictEqual({
+			'row-1': true,
+			'row-2': true,
+		});
+		const lastExpanded = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('myExpanded'))
+			.filter(Boolean)
+			.pop();
+		expect(lastExpanded).toBeDefined();
+		expect(JSON.parse(lastExpanded!)).toEqual(
+			expect.arrayContaining(['row-1', 'row-2']),
+		);
+
+		// Update page - should stay local
+		act(() => {
+			result.current.setPage(4);
+			jest.runAllTimers();
+		});
+		expect(result.current.page).toBe(4);
+		const pageInUrl = onUrlUpdate.mock.calls.some(
+			(call) => call[0].searchParams.get('page') !== null,
+		);
+		expect(pageInUrl).toBe(false);
+	});
+
+	it('syncs page and orderBy to URL but keeps limit and expanded local', () => {
+		const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
+		const wrapper = createNuqsWrapper({}, onUrlUpdate);
+		const { result } = renderHook(
+			() => useTableParams({ page: 'p', orderBy: 'sort' }),
+			{ wrapper },
+		);
+
+		// Update limit and expanded first (should stay local)
+		act(() => {
+			result.current.setLimit(75);
+			result.current.setExpanded({ 'row-5': true });
+			jest.runAllTimers();
+		});
+
+		expect(result.current.limit).toBe(75);
+		expect(result.current.expanded).toStrictEqual({ 'row-5': true });
+
+		// Update page (should sync to URL)
+		act(() => {
+			result.current.setPage(2);
+			jest.runAllTimers();
+		});
+
+		expect(result.current.page).toBe(2);
+		const lastPage = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('p'))
+			.filter(Boolean)
+			.pop();
+		expect(lastPage).toBe('2');
+
+		// Update orderBy (should sync to URL, and resets page to default)
+		act(() => {
+			result.current.setOrderBy({ columnName: 'name', order: 'asc' });
+			jest.runAllTimers();
+		});
+
+		expect(result.current.orderBy).toStrictEqual({
+			columnName: 'name',
+			order: 'asc',
+		});
+		const lastOrderBy = onUrlUpdate.mock.calls
+			.map((call) => call[0].searchParams.get('sort'))
+			.filter(Boolean)
+			.pop();
+		expect(lastOrderBy).toBeDefined();
+
+		// limit should NOT be in URL
+		const limitInUrl = onUrlUpdate.mock.calls.some(
+			(call) =>
+				call[0].searchParams.get('limit') !== null ||
+				call[0].searchParams.get('myLimit') !== null,
+		);
+		expect(limitInUrl).toBe(false);
+
+		// expanded should NOT be in URL
+		const expandedInUrl = onUrlUpdate.mock.calls.some(
+			(call) =>
+				call[0].searchParams.get('expanded') !== null ||
+				call[0].searchParams.get('myExpanded') !== null,
+		);
+		expect(expandedInUrl).toBe(false);
+	});
+
+	it('reads initial values from URL for configured params only', () => {
+		const wrapper = createNuqsWrapper({
+			customPage: '7',
+			limit: '999', // This should be ignored since limit is not configured
+		});
+		const { result } = renderHook(
+			// Pass page default matching URL to prevent reset on mount
+			() => useTableParams({ page: 'customPage' }, { page: 7 }),
+			{ wrapper },
+		);
+
+		// Page should come from URL
+		expect(result.current.page).toBe(7);
+		// Limit should be default (not from URL since it's not configured)
+		expect(result.current.limit).toBe(50);
+	});
+
+	it('supports updater function for expanded state', () => {
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(() => useTableParams({ expanded: 'exp' }), {
+			wrapper,
+		});
+
+		// Set initial expanded state
+		act(() => {
+			result.current.setExpanded({ 'row-1': true });
+		});
+		expect(result.current.expanded).toStrictEqual({ 'row-1': true });
+
+		// Use updater function to add another row
+		act(() => {
+			result.current.setExpanded((prev) => ({
+				...(typeof prev === 'boolean' ? {} : prev),
+				'row-2': true,
+			}));
+		});
+		expect(result.current.expanded).toStrictEqual({
+			'row-1': true,
+			'row-2': true,
+		});
+	});
+
+	it('supports updater function for local expanded state', () => {
+		const wrapper = createNuqsWrapper();
+		const { result } = renderHook(() => useTableParams(), { wrapper });
+
+		// Set initial expanded state
+		act(() => {
+			result.current.setExpanded({ 'row-a': true });
+		});
+		expect(result.current.expanded).toStrictEqual({ 'row-a': true });
+
+		// Use updater function
+		act(() => {
+			result.current.setExpanded((prev) => ({
+				...(typeof prev === 'boolean' ? {} : prev),
+				'row-b': true,
+			}));
+		});
+		expect(result.current.expanded).toStrictEqual({
+			'row-a': true,
+			'row-b': true,
+		});
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -171,6 +171,27 @@ export * from './useTableParams';
  *   tableScrollerProps={{ className: 'my-table-scroll', 'data-testid': 'logs-scroller' }}
  * />
  * ```
+ *
+ * @example Disable virtual scroll — useful for nested tables inside expanded rows.
+ * Virtual scroll requires a fixed height container, which is problematic for nested tables
+ * that need dynamic height. Use `disableVirtualScroll` when rendering tables inside
+ * `renderExpandedRow` to allow the nested table to grow based on content.
+ * Note: Cannot be combined with `onEndReached` (infinite scroll requires virtualization).
+ * ```tsx
+ * // Parent table with expandable rows
+ * <TanStackTable
+ *   data={parentData}
+ *   columns={parentColumns}
+ *   renderExpandedRow={(row) => (
+ *     // Nested table without virtualization — height adapts to content
+ *     <TanStackTable
+ *       data={row.children}
+ *       columns={childColumns}
+ *       disableVirtualScroll
+ *     />
+ *   )}
+ * />
+ * ```
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/types.ts

@@ -107,6 +107,8 @@ export type TableRowContext<TData> = {
 	columnOrderKey: string;
 	/** Column visibility key for memo invalidation on visibility change */
 	columnVisibilityKey: string;
+	/** Enable alternating row background colors (zebra striping) */
+	enableAlternatingRowColors?: boolean;
 };
 
 export type PaginationProps = {
@@ -116,10 +118,10 @@ export type PaginationProps = {
 };
 
 export type TanstackTableQueryParamsConfig = {
-	page: string;
-	limit: string;
-	orderBy: string;
-	expanded: string;
+	page?: string;
+	limit?: string;
+	orderBy?: string;
+	expanded?: string;
 };
 
 export type TanStackTableProps<TData> = {
@@ -137,6 +139,7 @@ export type TanStackTableProps<TData> = {
 	skeletonRowCount?: number;
 	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig;
 	pagination?: PaginationProps;
+	paginationClassname?: string;
 	onEndReached?: (index: number) => void;
 	/** Function to get the unique key for a row (before duplicate handling).
 	 * When set, enables automatic duplicate key detection and group-aware key composition. */
@@ -176,6 +179,10 @@ export type TanStackTableProps<TData> = {
 	prefixPaginationContent?: ReactNode;
 	/** Content rendered after the pagination controls */
 	suffixPaginationContent?: ReactNode;
+	/** Enable alternating row background colors (zebra striping) */
+	enableAlternatingRowColors?: boolean;
+	/** Disable virtual scrolling and render all rows at once. Cannot be used with onEndReached. */
+	disableVirtualScroll?: boolean;
 };
 
 export type TanStackTableHandle = TableVirtuosoHandle & {

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -8,6 +8,12 @@ import { SortState, TanstackTableQueryParamsConfig } from './types';
 const NUQS_OPTIONS = { history: 'push' as const };
 const DEFAULT_PAGE = 1;
 const DEFAULT_LIMIT = 50;
+const URL_KEYS_DEFAULT = {
+	page: 'page',
+	limit: 'limit',
+	orderBy: 'order_by',
+	expanded: 'expanded',
+} as const;
 
 type Defaults = {
 	page?: number;
@@ -49,30 +55,49 @@ export function useTableParams(
 	enableQueryParams?: boolean | string | TanstackTableQueryParamsConfig,
 	defaults?: Defaults,
 ): TableParamsResult {
+	// Determine which params should sync to URL vs use local state
+	const isObjectConfig = typeof enableQueryParams === 'object';
+	const useUrlForPage =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.page !== undefined);
+	const useUrlForLimit =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.limit !== undefined);
+	const useUrlForOrderBy =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.orderBy !== undefined);
+	const useUrlForExpanded =
+		enableQueryParams === true ||
+		typeof enableQueryParams === 'string' ||
+		(isObjectConfig && enableQueryParams.expanded !== undefined);
+
 	const pageQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_page`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.page
-				: 'page';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.page}`
+			: isObjectConfig
+				? (enableQueryParams.page ?? URL_KEYS_DEFAULT.page)
+				: URL_KEYS_DEFAULT.page;
 	const limitQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_limit`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.limit
-				: 'limit';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.limit}`
+			: isObjectConfig
+				? (enableQueryParams.limit ?? URL_KEYS_DEFAULT.limit)
+				: URL_KEYS_DEFAULT.limit;
 	const orderByQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_order_by`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.orderBy
-				: 'order_by';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.orderBy}`
+			: isObjectConfig
+				? (enableQueryParams.orderBy ?? URL_KEYS_DEFAULT.orderBy)
+				: URL_KEYS_DEFAULT.orderBy;
 	const expandedQueryParam =
 		typeof enableQueryParams === 'string'
-			? `${enableQueryParams}_expanded`
-			: typeof enableQueryParams === 'object'
-				? enableQueryParams.expanded
-				: 'expanded';
+			? `${enableQueryParams}_${URL_KEYS_DEFAULT.expanded}`
+			: isObjectConfig
+				? (enableQueryParams.expanded ?? URL_KEYS_DEFAULT.expanded)
+				: URL_KEYS_DEFAULT.expanded;
 	const pageDefault = defaults?.page ?? DEFAULT_PAGE;
 	const limitDefault = defaults?.limit ?? DEFAULT_LIMIT;
 	const orderByDefault = defaults?.orderBy ?? null;
@@ -149,45 +174,29 @@ export function useTableParams(
 
 	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
-	const isEnabledQueryParams =
-		typeof enableQueryParams === 'string' ||
-		typeof enableQueryParams === 'object';
 
 	useEffect(() => {
-		if (isEnabledQueryParams) {
+		if (useUrlForPage) {
 			setUrlPage(pageDefault);
 		} else {
 			setLocalPage(pageDefault);
 		}
 	}, [
-		isEnabledQueryParams,
+		useUrlForPage,
 		orderByDefaultMemoKey,
 		orderByUrlMemoKey,
 		pageDefault,
 		setUrlPage,
 	]);
 
-	if (enableQueryParams) {
-		return {
-			page: urlPage,
-			limit: urlLimit,
-			orderBy: urlOrderBy as SortState | null,
-			expanded: urlExpanded,
-			setPage: setUrlPage,
-			setLimit: setUrlLimit,
-			setOrderBy: setUrlOrderBy,
-			setExpanded: setUrlExpanded,
-		};
-	}
-
 	return {
-		page: localPage,
-		limit: localLimit,
-		orderBy: localOrderBy,
-		expanded: localExpanded,
-		setPage: setLocalPage,
-		setLimit: setLocalLimit,
-		setOrderBy: setLocalOrderBy,
-		setExpanded: handleSetLocalExpanded,
+		page: useUrlForPage ? urlPage : localPage,
+		limit: useUrlForLimit ? urlLimit : localLimit,
+		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
+		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
+		setPage: useUrlForPage ? setUrlPage : setLocalPage,
+		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimit,
+		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
+		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,
 	};
 }

frontend/src/components/TanStackTableView/utils.ts

@@ -35,7 +35,10 @@ export const getColumnWidthStyle = <TData>(
 ): CSSProperties => {
 	// Last column always fills remaining space
 	if (isLastColumn) {
-		return { width: '100%' };
+		return {
+			width: '100%',
+			minWidth: persistedWidth ?? column?.width?.min,
+		};
 	}
 
 	const { width } = column;
@@ -59,10 +62,19 @@ export const getColumnWidthStyle = <TData>(
 	};
 };
 
+const isSkeletonRow = (row: unknown): boolean => {
+	const r = row as Record<string, unknown>;
+	return typeof r?.id === 'string' && r.id.startsWith('skeleton-');
+};
+
 const buildAccessorFn = <TData>(
 	colDef: TableColumnDef<TData>,
 ): ((row: TData) => unknown) => {
 	return (row: TData): unknown => {
+		// Skip accessor for skeleton rows to avoid errors with missing properties
+		if (isSkeletonRow(row)) {
+			return undefined;
+		}
 		if (colDef.accessorFn) {
 			return colDef.accessorFn(row);
 		}

frontend/src/components/TimePreferenceDropDown/styles.ts

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-interface TextContainerProps {
-	noButtonMargin?: boolean;
-}
-
-export const TextContainer = styled.div<TextContainerProps>`
-	display: flex;
-
-	> button {
-		margin-left: ${({ noButtonMargin }): string =>
-			noButtonMargin ? '0' : '0.5rem'}
-`;

frontend/src/components/WelcomeLeftContainer/index.tsx

@@ -1,42 +0,0 @@
-import { ReactChild } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, Space, Typography } from 'antd';
-
-import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
-
-import { Container, LeftContainer, Logo } from './styles';
-
-const { Title } = Typography;
-
-function WelcomeLeftContainer({
-	version,
-	children,
-}: WelcomeLeftContainerProps): JSX.Element {
-	const { t } = useTranslation();
-
-	return (
-		<Container>
-			<LeftContainer direction="vertical">
-				<Space align="center">
-					<Logo src={signozBrandLogoUrl} alt="logo" />
-					<Title style={{ fontSize: '46px', margin: 0 }}>SigNoz</Title>
-				</Space>
-				<Typography>{t('monitor_signup')}</Typography>
-				<Card
-					style={{ width: 'max-content' }}
-					bodyStyle={{ padding: '1px 8px', width: '100%' }}
-				>
-					SigNoz {version}
-				</Card>
-			</LeftContainer>
-			{children}
-		</Container>
-	);
-}
-
-interface WelcomeLeftContainerProps {
-	version: string;
-	children: ReactChild;
-}
-
-export default WelcomeLeftContainer;

frontend/src/components/WelcomeLeftContainer/styles.ts

@@ -1,23 +0,0 @@
-import { Space } from 'antd';
-import styled from 'styled-components';
-
-export const LeftContainer = styled(Space)`
-	flex: 1;
-`;
-
-export const Logo = styled.img`
-	width: 60px;
-`;
-
-export const Container = styled.div`
-	&&& {
-		display: flex;
-		justify-content: center;
-		gap: 16px;
-		align-items: center;
-		min-height: 100vh;
-
-		max-width: 1024px;
-		margin: 0 auto;
-	}
-`;

frontend/src/container/AlertHistory/Timeline/Table/types.ts

@@ -1,9 +0,0 @@
-import {
-	AlertRuleTimelineTableResponse,
-	AlertRuleTimelineTableResponsePayload,
-} from 'types/api/alerts/def';
-
-export type TimelineTableProps = {
-	timelineData: AlertRuleTimelineTableResponse[];
-	totalItems: AlertRuleTimelineTableResponsePayload['data']['total'];
-};

frontend/src/container/AlertHistory/Timeline/constants.ts

@@ -1,2 +0,0 @@
-// setting to 25 hours because we want to display the horizontal graph when the user selects 'Last 1 day' from date and time selector
-export const HORIZONTAL_GRAPH_HOURS_THRESHOLD = 25;

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

@@ -1,42 +0,0 @@
-import { UseQueryResult } from 'react-query';
-import { SuccessResponse } from 'types/api';
-
-import noDataUrl from '@/assets/Icons/no-data.svg';
-
-import EndPointsDropDown from './EndPointsDropDown';
-
-function EndPointDetailsZeroState({
-	setSelectedEndPointName,
-	endPointDropDownDataQuery,
-}: {
-	setSelectedEndPointName: (endPointName: string) => void;
-	endPointDropDownDataQuery: UseQueryResult<SuccessResponse<any>>;
-}): JSX.Element {
-	return (
-		<div className="end-point-details-zero-state-wrapper">
-			<div className="end-point-details-zero-state-content">
-				<img
-					src={noDataUrl}
-					alt="no-data"
-					width={32}
-					height={32}
-					className="end-point-details-zero-state-icon"
-				/>
-				<div className="end-point-details-zero-state-content-wrapper">
-					<div className="end-point-details-zero-state-text-content">
-						<div className="title">No endpoint selected yet</div>
-						<div className="description">Select an endpoint to see the details</div>
-					</div>
-					<EndPointsDropDown
-						setSelectedEndPointName={setSelectedEndPointName}
-						endPointDropDownDataQuery={endPointDropDownDataQuery}
-						parentContainerDiv=".end-point-details-zero-state-wrapper"
-						dropdownStyle={{ width: '60%' }}
-					/>
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default EndPointDetailsZeroState;

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

@@ -1,136 +0,0 @@
-import { useMemo } from 'react';
-import { useQueries } from 'react-query';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { LoadingOutlined } from '@ant-design/icons';
-import { Spin, Table } from 'antd';
-import type { ColumnType } from 'antd/lib/table';
-import logEvent from 'api/common/logEvent';
-import { ENTITY_VERSION_V4 } from 'constants/app';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import {
-	createFiltersForSelectedRowData,
-	EndPointsTableRowData,
-	formatEndPointsDataForTable,
-	getEndPointsColumnsConfig,
-	getEndPointsQueryPayload,
-} from 'container/ApiMonitoring/utils';
-import LoadingContainer from 'container/InfraMonitoringK8s/LoadingContainer';
-import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { AppState } from 'store/reducers';
-import { SuccessResponse } from 'types/api';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
-import { GlobalReducer } from 'types/reducer/globalTime';
-
-import { VIEW_TYPES, VIEWS } from '../constants';
-
-function ExpandedRow({
-	domainName,
-	selectedRowData,
-	setSelectedEndPointName,
-	setSelectedView,
-	orderBy,
-}: {
-	domainName: string;
-	selectedRowData: EndPointsTableRowData;
-	setSelectedEndPointName: (name: string) => void;
-	setSelectedView: (view: VIEWS) => void;
-	orderBy: OrderByPayload | null;
-}): JSX.Element {
-	const nestedColumns = useMemo(() => getEndPointsColumnsConfig(false, []), []);
-	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
-	const groupedByRowDataQueryPayload = useMemo(() => {
-		if (!selectedRowData) {
-			return null;
-		}
-
-		const filters = createFiltersForSelectedRowData(selectedRowData);
-
-		const baseQueryPayload = getEndPointsQueryPayload(
-			[],
-			domainName,
-			Math.floor(minTime / 1e9),
-			Math.floor(maxTime / 1e9),
-		);
-
-		return baseQueryPayload.map((currentQueryPayload) => ({
-			...currentQueryPayload,
-			query: {
-				...currentQueryPayload.query,
-				builder: {
-					...currentQueryPayload.query.builder,
-					queryData: currentQueryPayload.query.builder.queryData.map(
-						(queryData) => ({
-							...queryData,
-							filters: {
-								items: [...(queryData.filters?.items || []), ...(filters?.items || [])],
-								op: 'AND',
-							},
-						}),
-					),
-				},
-			},
-		}));
-	}, [domainName, minTime, maxTime, selectedRowData]);
-
-	const groupedByRowQueries = useQueries(
-		groupedByRowDataQueryPayload
-			? groupedByRowDataQueryPayload.map((payload) => ({
-					queryKey: [
-						`${REACT_QUERY_KEY.GET_NESTED_ENDPOINTS_LIST}-${domainName}-${selectedRowData?.key}`,
-						payload,
-						ENTITY_VERSION_V4,
-						selectedRowData?.key,
-					],
-					queryFn: (): Promise<SuccessResponse<MetricRangePayloadProps>> =>
-						GetMetricQueryRange(payload, ENTITY_VERSION_V4),
-					enabled: !!payload && !!selectedRowData,
-				}))
-			: [],
-	);
-
-	const groupedByRowQuery = groupedByRowQueries[0];
-	return (
-		<div className="expanded-table-container">
-			{groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading ? (
-				<LoadingContainer />
-			) : (
-				<div className="expanded-table">
-					<Table
-						columns={nestedColumns as ColumnType<EndPointsTableRowData>[]}
-						dataSource={
-							groupedByRowQuery?.data
-								? formatEndPointsDataForTable(
-										groupedByRowQuery.data?.payload.data.result[0].table?.rows,
-										[],
-										orderBy,
-									)
-								: []
-						}
-						pagination={false}
-						scroll={{ x: true }}
-						tableLayout="fixed"
-						showHeader={false}
-						loading={{
-							spinning: groupedByRowQuery?.isFetching || groupedByRowQuery?.isLoading,
-							indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
-						}}
-						onRow={(record): { onClick: () => void; className: string } => ({
-							onClick: (): void => {
-								setSelectedEndPointName(record.endpointName);
-								setSelectedView(VIEW_TYPES.ENDPOINT_STATS);
-								logEvent('API Monitoring: Endpoint name row clicked', {});
-							},
-							className: 'expanded-clickable-row',
-						})}
-					/>
-				</div>
-			)}
-		</div>
-	);
-}
-
-export default ExpandedRow;

frontend/src/container/ConfigDropdown/Config/ErrorLink.tsx

@@ -1,33 +0,0 @@
-import { PureComponent } from 'react';
-
-interface State {
-	hasError: boolean;
-}
-
-interface Props {
-	children: JSX.Element;
-}
-
-class ErrorLink extends PureComponent<Props, State> {
-	constructor(props: Props) {
-		super(props);
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError(): State {
-		return { hasError: true };
-	}
-
-	render(): JSX.Element {
-		const { children } = this.props;
-		const { hasError } = this.state;
-
-		if (hasError) {
-			return <div />;
-		}
-
-		return children;
-	}
-}
-
-export default ErrorLink;

frontend/src/container/ConfigDropdown/Config/Link.tsx

@@ -1,23 +0,0 @@
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom';
-
-function LinkContainer({ children, href }: LinkContainerProps): JSX.Element {
-	const isInternalLink = href.startsWith('/');
-
-	if (isInternalLink) {
-		return <Link to={href}>{children}</Link>;
-	}
-
-	return (
-		<a rel="noreferrer" target="_blank" href={href}>
-			{children}
-		</a>
-	);
-}
-
-interface LinkContainerProps {
-	children: ReactNode;
-	href: string;
-}
-
-export default LinkContainer;

frontend/src/container/ConfigDropdown/Config/index.tsx

@@ -1,49 +0,0 @@
-import { lazy, Suspense, useMemo } from 'react';
-import { Menu, Space } from 'antd';
-import Spinner from 'components/Spinner';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
-import { lazyRetry } from 'utils/lazyWithRetries';
-
-import ErrorLink from './ErrorLink';
-import LinkContainer from './Link';
-
-function HelpToolTip({ config }: HelpToolTipProps): JSX.Element {
-	const sortedConfig = useMemo(
-		() => config.components.sort((a, b) => a.position - b.position),
-		[config.components],
-	);
-
-	const isDarkMode = useIsDarkMode();
-
-	const items = sortedConfig.map((item) => {
-		const iconName = `${isDarkMode ? item.darkIcon : item.lightIcon}`;
-
-		const Component = lazy(() =>
-			lazyRetry(() => import(`@ant-design/icons/es/icons/${iconName}.js`)),
-		);
-		return {
-			key: item.text + item.href,
-			label: (
-				<ErrorLink key={item.text + item.href}>
-					<Suspense fallback={<Spinner height="5vh" />}>
-						<LinkContainer href={item.href}>
-							<Space size="small" align="start">
-								<Component />
-								{item.text}
-							</Space>
-						</LinkContainer>
-					</Suspense>
-				</ErrorLink>
-			),
-		};
-	});
-
-	return <Menu items={items} />;
-}
-
-interface HelpToolTipProps {
-	config: ConfigProps;
-}
-
-export default HelpToolTip;

frontend/src/container/ConfigDropdown/index.tsx

@@ -1,76 +0,0 @@
-import { useMemo, useState } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import {
-	CaretDownFilled,
-	CaretUpFilled,
-	QuestionCircleFilled,
-	QuestionCircleOutlined,
-} from '@ant-design/icons';
-import { Space } from 'antd';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { AppState } from 'store/reducers';
-import { ConfigProps } from 'types/api/dynamicConfigs/getDynamicConfigs';
-import AppReducer from 'types/reducer/app';
-
-import HelpToolTip from './Config';
-import { ConfigDropdown } from './styles';
-
-function DynamicConfigDropdown({
-	frontendId,
-}: DynamicConfigDropdownProps): JSX.Element {
-	const { configs } = useSelector<AppState, AppReducer>((state) => state.app);
-	const isDarkMode = useIsDarkMode();
-	const [isHelpDropDownOpen, setIsHelpDropDownOpen] = useState<boolean>(false);
-
-	const config = useMemo(
-		() =>
-			Object.values(configs).find(
-				(config) => config.frontendPositionId === frontendId,
-			),
-		[frontendId, configs],
-	);
-
-	const onToggleHandler = (): void => {
-		setIsHelpDropDownOpen(!isHelpDropDownOpen);
-	};
-
-	const menu = useMemo(
-		() => ({
-			items: [
-				{
-					key: '1',
-					label: <HelpToolTip config={config as ConfigProps} />,
-				},
-			],
-		}),
-		[config],
-	);
-
-	if (!config) {
-		return <div />;
-	}
-
-	const Icon = isDarkMode ? QuestionCircleOutlined : QuestionCircleFilled;
-	const DropDownIcon = isHelpDropDownOpen ? CaretUpFilled : CaretDownFilled;
-
-	return (
-		<ConfigDropdown
-			onOpenChange={onToggleHandler}
-			trigger={['click']}
-			menu={menu}
-			open={isHelpDropDownOpen}
-		>
-			<Space align="center">
-				<Icon style={{ fontSize: 26, color: 'white', paddingTop: 26 }} />
-				<DropDownIcon style={{ color: 'white' }} />
-			</Space>
-		</ConfigDropdown>
-	);
-}
-
-interface DynamicConfigDropdownProps {
-	frontendId: string;
-}
-
-export default DynamicConfigDropdown;

frontend/src/container/ConfigDropdown/styles.ts

@@ -1,6 +0,0 @@
-import { Dropdown } from 'antd';
-import styled from 'styled-components';
-
-export const ConfigDropdown = styled(Dropdown)`
-	cursor: pointer;
-`;

frontend/src/container/CreateAlertV2/EvaluationSettings/index.ts

@@ -1,3 +0,0 @@
-import EvaluationSettings from './EvaluationSettings';
-
-export default EvaluationSettings;

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

@@ -1,27 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
-import Input from 'components/Input';
-
-function DashboardName({ setName, name }: DashboardNameProps): JSX.Element {
-	const onChangeHandler = useCallback(
-		(e: ChangeEvent<HTMLInputElement>) => {
-			setName(e.target.value);
-		},
-		[setName],
-	);
-
-	return (
-		<Input
-			size="middle"
-			placeholder="Title"
-			value={name}
-			onChangeHandler={onChangeHandler}
-		/>
-	);
-}
-
-interface DashboardNameProps {
-	name: string;
-	setName: Dispatch<SetStateAction<string>>;
-}
-
-export default DashboardName;

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

@@ -1,100 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCopyToClipboard } from 'react-use';
-import { CopyFilled, DownloadOutlined } from '@ant-design/icons';
-import { Button, Modal } from 'antd';
-import Editor from 'components/Editor';
-import { useNotifications } from 'hooks/useNotifications';
-import { DashboardData } from 'types/api/dashboard/getAll';
-
-import { downloadObjectAsJson } from './utils';
-
-function ShareModal({
-	isJSONModalVisible,
-	onToggleHandler,
-	selectedData,
-}: ShareModalProps): JSX.Element {
-	const getParsedValue = (): string => JSON.stringify(selectedData, null, 2);
-
-	const [jsonValue, setJSONValue] = useState<string>(getParsedValue());
-	const { t } = useTranslation(['dashboard', 'common']);
-	const [state, setCopy] = useCopyToClipboard();
-	const { notifications } = useNotifications();
-
-	useEffect(() => {
-		if (state.error) {
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
-
-		if (state.value) {
-			notifications.success({
-				message: t('success', {
-					ns: 'common',
-				}),
-			});
-		}
-	}, [state.error, state.value, t, notifications]);
-
-	const GetFooterComponent = useMemo(() => {
-		return (
-			<>
-				<Button
-					style={{
-						marginTop: '16px',
-					}}
-					onClick={(): void => setCopy(jsonValue)}
-					type="primary"
-					size="small"
-				>
-					<CopyFilled /> {t('copy_to_clipboard')}
-				</Button>
-
-				<Button
-					type="primary"
-					size="small"
-					onClick={(): void => {
-						downloadObjectAsJson(selectedData, selectedData.title);
-					}}
-				>
-					<DownloadOutlined /> {t('download_json')}
-				</Button>
-			</>
-		);
-	}, [jsonValue, selectedData, setCopy, t]);
-
-	return (
-		<Modal
-			open={isJSONModalVisible}
-			onCancel={(): void => {
-				onToggleHandler();
-			}}
-			width="80vw"
-			centered
-			title={t('share', {
-				ns: 'common',
-			})}
-			okText={t('download_json')}
-			cancelText={t('cancel')}
-			destroyOnClose
-			footer={GetFooterComponent}
-		>
-			<Editor
-				height="70vh"
-				onChange={(value): void => setJSONValue(value)}
-				value={jsonValue}
-			/>
-		</Modal>
-	);
-}
-
-interface ShareModalProps {
-	isJSONModalVisible: boolean;
-	onToggleHandler: VoidFunction;
-	selectedData: DashboardData;
-}
-
-export default ShareModal;

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

@@ -1,35 +0,0 @@
-import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
-import { Input } from 'antd';
-
-import { Container } from './styles';
-
-const { TextArea } = Input;
-
-function Description({
-	description,
-	setDescription,
-}: DescriptionProps): JSX.Element {
-	const onChangeHandler = useCallback(
-		(e: ChangeEvent<HTMLTextAreaElement>) => {
-			setDescription(e.target.value);
-		},
-		[setDescription],
-	);
-
-	return (
-		<Container>
-			<TextArea
-				placeholder="Description of the dashboard"
-				onChange={onChangeHandler}
-				value={description}
-			/>
-		</Container>
-	);
-}
-
-interface DescriptionProps {
-	description: string;
-	setDescription: Dispatch<SetStateAction<string>>;
-}
-
-export default Description;

frontend/src/container/DashboardContainer/DashboardSettings/General/Description/styles.ts

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-	margin-top: 1rem;
-`;

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -14,6 +14,7 @@ import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
 import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
 
 import '../Panel.styles.scss';
+import get from 'lodash/get';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -114,7 +115,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	}, []);
 
 	const groupBy = useMemo(() => {
-		return widget.query.builder.queryData[0].groupBy;
+		return get(widget, 'query.builder.queryData[0].groupBy', []);
 	}, [widget.query]);
 
 	return (

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -10,6 +10,7 @@ import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
+import get from 'lodash/get';
 
 import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
 
@@ -105,7 +106,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	]);
 
 	const groupBy = useMemo(() => {
-		return widget.query.builder.queryData[0].groupBy;
+		return get(widget, 'query.builder.queryData[0].groupBy', []);
 	}, [widget.query]);
 
 	return (

frontend/src/container/DownloadV2/DownloadV2.styles.scss

@@ -1,59 +0,0 @@
-.download-logs-popover {
-	.ant-popover-inner {
-		border-radius: 4px;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(
-			139deg,
-			color-mix(in srgb, var(--card) 80%, transparent) 0%,
-			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		);
-		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-		backdrop-filter: blur(20px);
-		padding: 12px 18px 12px 14px;
-
-		.download-logs-content {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-			align-items: flex-start;
-
-			.action-btns {
-				padding: 4px 0px !important;
-				width: 159px;
-				display: flex;
-				align-items: center;
-				color: var(--l2-foreground);
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-				gap: 6px;
-
-				.ant-btn-icon {
-					margin-inline-end: 0px;
-				}
-			}
-
-			.action-btns:hover {
-				&.ant-btn-text {
-					background-color: color-mix(
-						in srgb,
-						var(--bg-robin-200) 4%,
-						transparent
-					) !important;
-				}
-			}
-
-			.export-heading {
-				color: var(--muted-foreground);
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 600;
-				line-height: 18px; /* 163.636% */
-				letter-spacing: 0.88px;
-				text-transform: uppercase;
-			}
-		}
-	}
-}

frontend/src/container/DownloadV2/DownloadV2.tsx

@@ -1,94 +0,0 @@
-import { useState } from 'react';
-import { Button, Popover, Typography } from 'antd';
-import { FileDigit, FileDown, Sheet } from 'lucide-react';
-import { unparse } from 'papaparse';
-
-import { DownloadProps } from './DownloadV2.types';
-
-import './DownloadV2.styles.scss';
-
-function Download({ data, isLoading, fileName }: DownloadProps): JSX.Element {
-	const [isDownloading, setIsDownloading] = useState(false);
-
-	const downloadExcelFile = async (): Promise<void> => {
-		setIsDownloading(true);
-
-		try {
-			const headers = Object.keys(Object.assign({}, ...data)).map((item) => {
-				const updatedTitle = item
-					.split('_')
-					.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-					.join(' ');
-				return {
-					title: updatedTitle,
-					dataIndex: item,
-				};
-			});
-			const excelLib = await import('antd-table-saveas-excel');
-			const excel = new excelLib.Excel();
-			excel
-				.addSheet(fileName)
-				.addColumns(headers)
-				.addDataSource(data, {
-					str2Percent: true,
-				})
-				.saveAs(`${fileName}.xlsx`);
-		} finally {
-			setIsDownloading(false);
-		}
-	};
-
-	const downloadCsvFile = (): void => {
-		const csv = unparse(data);
-		const csvBlob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const csvUrl = URL.createObjectURL(csvBlob);
-		const downloadLink = document.createElement('a');
-		downloadLink.href = csvUrl;
-		downloadLink.download = `${fileName}.csv`;
-		downloadLink.click();
-		downloadLink.remove();
-	};
-
-	return (
-		<Popover
-			trigger={['click']}
-			placement="bottomRight"
-			rootClassName="download-logs-popover"
-			arrow={false}
-			content={
-				<div className="download-logs-content">
-					<Typography.Text className="export-heading">Export As</Typography.Text>
-					<Button
-						icon={<Sheet size={14} />}
-						type="text"
-						onClick={downloadExcelFile}
-						className="action-btns"
-						loading={isDownloading}
-					>
-						Excel (.xlsx)
-					</Button>
-					<Button
-						icon={<FileDigit size={14} />}
-						type="text"
-						onClick={downloadCsvFile}
-						className="action-btns"
-					>
-						CSV
-					</Button>
-				</div>
-			}
-		>
-			<Button
-				className="periscope-btn ghost"
-				loading={isLoading}
-				icon={<FileDown size={14} />}
-			/>
-		</Popover>
-	);
-}
-
-Download.defaultProps = {
-	isLoading: undefined,
-};
-
-export default Download;

frontend/src/container/DownloadV2/DownloadV2.types.ts

@@ -1,10 +0,0 @@
-export type DownloadOptions = {
-	isDownloadEnabled: boolean;
-	fileName: string;
-};
-
-export type DownloadProps = {
-	data: Record<string, string>[];
-	isLoading?: boolean;
-	fileName: string;
-};

frontend/src/container/EditRules/styles.ts

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-export const ButtonContainer = styled.div`
-	&&& {
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-
-		margin-top: 2rem;
-	}
-`;

frontend/src/container/ExplorerControlPanel/ExplorerControlPanel.interfaces.ts

@@ -1,8 +0,0 @@
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
-
-export type ExplorerControlPanelProps = {
-	selectedOptionFormat: string;
-	isShowPageSize: boolean;
-	isLoading: boolean;
-	optionsMenuConfig?: OptionsMenuConfig;
-};

frontend/src/container/ExplorerControlPanel/index.tsx

@@ -1,33 +0,0 @@
-import { Col, Row } from 'antd';
-import OptionsMenu from 'container/OptionsMenu';
-import PageSizeSelect from 'container/PageSizeSelect';
-
-import { ExplorerControlPanelProps } from './ExplorerControlPanel.interfaces';
-import { ContainerStyled } from './styles';
-
-function ExplorerControlPanel({
-	selectedOptionFormat,
-	isLoading,
-	isShowPageSize,
-	optionsMenuConfig,
-}: ExplorerControlPanelProps): JSX.Element {
-	return (
-		<ContainerStyled>
-			<Row justify="end" gutter={30}>
-				{optionsMenuConfig && (
-					<Col>
-						<OptionsMenu
-							selectedOptionFormat={selectedOptionFormat}
-							config={optionsMenuConfig}
-						/>
-					</Col>
-				)}
-				<Col>
-					<PageSizeSelect isLoading={isLoading} isShow={isShowPageSize} />
-				</Col>
-			</Row>
-		</ContainerStyled>
-	);
-}
-
-export default ExplorerControlPanel;

frontend/src/container/ExplorerControlPanel/styles.ts

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const ContainerStyled = styled.div`
-	margin-bottom: 0.3rem;
-`;

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

@@ -1,61 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Form, Input, Select } from 'antd';
-import { LabelFilterStatement } from 'container/CreateAlertChannels/config';
-
-const { Option } = Select;
-
-// LabelFilterForm supports filters or matchers on alert notifications
-// presently un-used but will be introduced to the channel creation at some
-// point
-function LabelFilterForm({ setFilter }: LabelFilterProps): JSX.Element {
-	return (
-		<Form.Item name="label_filter" label="Notify When (Optional)">
-			<Input.Group compact>
-				<Select
-					defaultValue="Severity"
-					style={{ width: '15%' }}
-					onChange={(event): void => {
-						setFilter((value) => {
-							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
-							first.name = event;
-							return [first];
-						});
-					}}
-				>
-					<Option value="severity">Severity</Option>
-					<Option value="service">Service</Option>
-				</Select>
-				<Select
-					defaultValue="="
-					onChange={(event): void => {
-						setFilter((value) => {
-							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
-							first.comparator = event;
-							return [first];
-						});
-					}}
-				>
-					<Option value="=">=</Option>
-					<Option value="!=">!=</Option>
-				</Select>
-				<Input
-					style={{ width: '20%' }}
-					placeholder="enter a text here"
-					onChange={(event): void => {
-						setFilter((value) => {
-							const first: LabelFilterStatement = value[0] as LabelFilterStatement;
-							first.value = event.target.value;
-							return [first];
-						});
-					}}
-				/>
-			</Input.Group>
-		</Form.Item>
-	);
-}
-
-export interface LabelFilterProps {
-	setFilter: Dispatch<SetStateAction<Partial<Array<LabelFilterStatement>>>>;
-}
-
-export default LabelFilterForm;

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

@@ -1,164 +0,0 @@
-import { Trans, useTranslation } from 'react-i18next';
-import { Col, Row, Typography } from 'antd';
-import TextToolTip from 'components/TextToolTip';
-import { EQueryType } from 'types/common/dashboard';
-
-import {
-	StyledList,
-	StyledListItem,
-	StyledMainContainer,
-	StyledTopic,
-} from './styles';
-
-function UserGuide({ queryType }: UserGuideProps): JSX.Element {
-	// init namespace for translations
-	const { t } = useTranslation('alerts');
-
-	const renderStep1QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step1a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1b')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1c')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step1d')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderStep3QB = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_qb_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_qb_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_qb_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderGuideForQB = (): JSX.Element => (
-		<>
-			{renderStep1QB()}
-			{renderStep2QB()}
-			{renderStep3QB()}
-		</>
-	);
-	const renderStep1PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step1a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step1b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderStep3PQL = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_pql_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_pql_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_pql_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderGuideForPQL = (): JSX.Element => (
-		<>
-			{renderStep1PQL()}
-			{renderStep2PQL()}
-			{renderStep3PQL()}
-		</>
-	);
-
-	const renderStep1CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step1')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>
-					<Trans
-						i18nKey="user_guide_ch_step1a"
-						t={t}
-						components={[
-							<a
-								key={1}
-								target="_blank"
-								href=" https://signoz.io/docs/tutorial/writing-clickhouse-queries-in-dashboard/?utm_source=frontend&utm_medium=product&utm_id=alerts</>"
-							/>,
-						]}
-					/>
-				</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step1b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-	const renderStep2CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step2')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_ch_step2a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step2b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderStep3CH = (): JSX.Element => (
-		<>
-			<StyledTopic>{t('user_guide_ch_step3')}</StyledTopic>
-			<StyledList>
-				<StyledListItem>{t('user_guide_ch_step3a')}</StyledListItem>
-				<StyledListItem>{t('user_guide_ch_step3b')}</StyledListItem>
-			</StyledList>
-		</>
-	);
-
-	const renderGuideForCH = (): JSX.Element => (
-		<>
-			{renderStep1CH()}
-			{renderStep2CH()}
-			{renderStep3CH()}
-		</>
-	);
-	return (
-		<StyledMainContainer>
-			<Row>
-				<Col flex="auto">
-					<Typography.Paragraph> {t('user_guide_headline')} </Typography.Paragraph>
-				</Col>
-				<Col flex="none">
-					<TextToolTip
-						text={t('user_tooltip_more_help')}
-						url="https://signoz.io/docs/userguide/alerts-management/?utm_source=product&utm_medium=create-alert#creating-a-new-alert-in-signoz"
-					/>
-				</Col>
-			</Row>
-			{queryType === EQueryType.QUERY_BUILDER && renderGuideForQB()}
-			{queryType === EQueryType.PROM && renderGuideForPQL()}
-			{queryType === EQueryType.CLICKHOUSE && renderGuideForCH()}
-		</StyledMainContainer>
-	);
-}
-
-interface UserGuideProps {
-	queryType: EQueryType;
-}
-
-export default UserGuide;

frontend/src/container/FormAlertRules/UserGuide/styles.ts

@@ -1,17 +0,0 @@
-import { Card, Typography } from 'antd';
-import styled from 'styled-components';
-
-export const StyledMainContainer = styled(Card)``;
-
-export const StyledTopic = styled(Typography.Paragraph)`
-	font-weight: 600;
-`;
-
-export const StyledList = styled.ul`
-	padding-left: 18px;
-`;
-
-export const StyledListItem = styled.li`
-	font-style: italic;
-	padding-bottom: 0.5rem;
-`;

frontend/src/container/GridCardLayout/GridCard/FullView/GraphManager.tsx

@@ -1,158 +0,0 @@
-import { memo, useCallback, useEffect, useState } from 'react';
-import { Button, Input } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
-import { ResizeTable } from 'components/ResizeTable';
-import { useNotifications } from 'hooks/useNotifications';
-import {
-	selectIsDashboardLocked,
-	useDashboardStore,
-} from 'providers/Dashboard/store/useDashboardStore';
-
-import { getGraphManagerTableColumns } from './TableRender/GraphManagerColumns';
-import { ExtendedChartDataset, GraphManagerProps } from './types';
-import {
-	getDefaultTableDataSet,
-	saveLegendEntriesToLocalStorage,
-} from './utils';
-
-import './WidgetFullView.styles.scss';
-
-function GraphManager({
-	data,
-	name,
-	yAxisUnit,
-	onToggleModelHandler,
-	setGraphsVisibilityStates,
-	graphsVisibilityStates = [], // not trimed
-	lineChartRef,
-	parentChartRef,
-	options,
-}: GraphManagerProps): JSX.Element {
-	const [tableDataSet, setTableDataSet] = useState<ExtendedChartDataset[]>(
-		getDefaultTableDataSet(options, data),
-	);
-
-	useEffect(() => {
-		setTableDataSet(getDefaultTableDataSet(options, data));
-	}, [data, options]);
-
-	const { notifications } = useNotifications();
-	const isDashboardLocked = useDashboardStore(selectIsDashboardLocked);
-
-	const checkBoxOnChangeHandler = useCallback(
-		(e: CheckboxChangeEvent, index: number): void => {
-			const newStates = [...graphsVisibilityStates];
-			newStates[index] = e.target.checked;
-			lineChartRef?.current?.toggleGraph(index, e.target.checked);
-			parentChartRef?.current?.toggleGraph(index, e.target.checked);
-			setGraphsVisibilityStates([...newStates]);
-		},
-		[
-			graphsVisibilityStates,
-			lineChartRef,
-			parentChartRef,
-			setGraphsVisibilityStates,
-		],
-	);
-
-	const labelClickedHandler = useCallback(
-		(labelIndex: number): void => {
-			const newGraphVisibilityStates = Array<boolean>(data.length).fill(false);
-			newGraphVisibilityStates[labelIndex] = true;
-
-			newGraphVisibilityStates.forEach((state, index) => {
-				lineChartRef?.current?.toggleGraph(index, state);
-				parentChartRef?.current?.toggleGraph(index, state);
-			});
-			setGraphsVisibilityStates(newGraphVisibilityStates);
-		},
-		[data.length, lineChartRef, parentChartRef, setGraphsVisibilityStates],
-	);
-
-	const columns = getGraphManagerTableColumns({
-		tableDataSet,
-		checkBoxOnChangeHandler,
-		graphVisibilityState: graphsVisibilityStates,
-		labelClickedHandler,
-		yAxisUnit,
-		isGraphDisabled: isDashboardLocked,
-	});
-
-	const filterHandler = useCallback(
-		(event: React.ChangeEvent<HTMLInputElement>): void => {
-			const value = event.target.value.toString().toLowerCase();
-			const updatedDataSet = tableDataSet.map((item) => {
-				if (item.label?.toLocaleLowerCase().includes(value)) {
-					return { ...item, show: true };
-				}
-				return { ...item, show: false };
-			});
-			setTableDataSet(updatedDataSet);
-		},
-		[tableDataSet],
-	);
-
-	const saveHandler = useCallback((): void => {
-		saveLegendEntriesToLocalStorage({
-			options,
-			graphVisibilityState: graphsVisibilityStates || [],
-			name,
-		});
-		notifications.success({
-			message: 'The updated graphs & legends are saved',
-		});
-		if (onToggleModelHandler) {
-			onToggleModelHandler();
-		}
-	}, [
-		graphsVisibilityStates,
-		name,
-		notifications,
-		onToggleModelHandler,
-		options,
-	]);
-
-	const dataSource = tableDataSet.filter(
-		(item, index) => index !== 0 && item.show,
-	);
-
-	return (
-		<div className="graph-manager-container">
-			<div className="graph-manager-header">
-				<Input onChange={filterHandler} placeholder="Filter Series" />
-				<div className="save-cancel-container">
-					<span className="save-cancel-button">
-						<Button type="default" onClick={onToggleModelHandler}>
-							Cancel
-						</Button>
-					</span>
-					<span className="save-cancel-button">
-						<Button type="primary" onClick={saveHandler}>
-							Save
-						</Button>
-					</span>
-				</div>
-			</div>
-
-			<div className="legends-list-container">
-				<ResizeTable
-					columns={columns}
-					dataSource={dataSource}
-					rowKey="index"
-					pagination={false}
-					style={{
-						maxHeight: 200,
-						overflowX: 'hidden',
-						overflowY: 'auto',
-					}}
-				/>
-			</div>
-		</div>
-	);
-}
-
-GraphManager.defaultProps = {
-	graphVisibilityStateHandler: undefined,
-};
-
-export default memo(GraphManager);

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GetLabel.tsx

@@ -1,18 +0,0 @@
-import { TableColumnType as ColumnType } from 'antd';
-
-import { DataSetProps } from '../types';
-import Label from './Label';
-
-export const getLabel = (
-	labelClickedHandler: (labelIndex: number) => void,
-	disabled?: boolean,
-): ColumnType<DataSetProps> => ({
-	render: (label: string, record): JSX.Element => (
-		<Label
-			label={label}
-			labelIndex={record.index}
-			labelClickedHandler={labelClickedHandler}
-			disabled={disabled}
-		/>
-	),
-});

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/GraphManagerColumns.tsx

@@ -1,85 +0,0 @@
-import { TableColumnType as ColumnType } from 'antd';
-import type { CheckboxChangeEvent } from 'antd/es/checkbox';
-
-import { ColumnsKeyAndDataIndex, ColumnsTitle } from '../contants';
-import { DataSetProps, ExtendedChartDataset } from '../types';
-import { getGraphManagerTableHeaderTitle } from '../utils';
-import CustomCheckBox from './CustomCheckBox';
-import { getLabel } from './GetLabel';
-
-export const getGraphManagerTableColumns = ({
-	tableDataSet,
-	checkBoxOnChangeHandler,
-	graphVisibilityState,
-	labelClickedHandler,
-	yAxisUnit,
-	isGraphDisabled,
-}: GetGraphManagerTableColumnsProps): ColumnType<DataSetProps>[] => [
-	{
-		title: '',
-		width: 50,
-		dataIndex: ColumnsKeyAndDataIndex.Index,
-		key: ColumnsKeyAndDataIndex.Index,
-		render: (_: string, record: DataSetProps): JSX.Element => (
-			<CustomCheckBox
-				data={tableDataSet}
-				index={record.index}
-				checkBoxOnChangeHandler={checkBoxOnChangeHandler}
-				graphVisibilityState={graphVisibilityState}
-				disabled={isGraphDisabled}
-			/>
-		),
-	},
-	{
-		title: ColumnsTitle[ColumnsKeyAndDataIndex.Label],
-		width: 300,
-		dataIndex: ColumnsKeyAndDataIndex.Label,
-		key: ColumnsKeyAndDataIndex.Label,
-		...getLabel(labelClickedHandler, isGraphDisabled),
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Avg],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Avg,
-		key: ColumnsKeyAndDataIndex.Avg,
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Sum],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Sum,
-		key: ColumnsKeyAndDataIndex.Sum,
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Max],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Max,
-		key: ColumnsKeyAndDataIndex.Max,
-	},
-	{
-		title: getGraphManagerTableHeaderTitle(
-			ColumnsTitle[ColumnsKeyAndDataIndex.Min],
-			yAxisUnit,
-		),
-		width: 90,
-		dataIndex: ColumnsKeyAndDataIndex.Min,
-		key: ColumnsKeyAndDataIndex.Min,
-	},
-];
-
-interface GetGraphManagerTableColumnsProps {
-	tableDataSet: ExtendedChartDataset[];
-	checkBoxOnChangeHandler: (e: CheckboxChangeEvent, index: number) => void;
-	labelClickedHandler: (labelIndex: number) => void;
-	graphVisibilityState: boolean[];
-	yAxisUnit?: string;
-	isGraphDisabled?: boolean;
-}

frontend/src/container/GridCardLayout/GridCard/FullView/TableRender/Label.tsx

@@ -1,34 +0,0 @@
-import { Tooltip } from 'antd';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { LabelContainer } from '../styles';
-import { LabelProps } from '../types';
-import { getAbbreviatedLabel } from '../utils';
-
-function Label({
-	labelClickedHandler,
-	labelIndex,
-	label,
-	disabled = false,
-}: LabelProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	const onClickHandler = (): void => {
-		labelClickedHandler(labelIndex);
-	};
-
-	return (
-		<LabelContainer
-			isDarkMode={isDarkMode}
-			type="button"
-			disabled={disabled}
-			onClick={onClickHandler}
-		>
-			<Tooltip title={label} placement="topLeft">
-				{getAbbreviatedLabel(label)}
-			</Tooltip>
-		</LabelContainer>
-	);
-}
-
-export default Label;

frontend/src/container/GridCardLayout/GridCard/__mock__/mockChartData.ts

@@ -1,15 +0,0 @@
-import { ChartData } from 'chart.js';
-
-export const mockTestData: ChartData = {
-	labels: ['test1', 'test2'],
-	datasets: [
-		{
-			label: 'customer',
-			data: [481.60377358490564, 730.0000000000002],
-		},
-		{
-			label: 'demo-app',
-			data: [4471.4285714285725],
-		},
-	],
-};

frontend/src/container/GridCardLayout/GridCard/__mock__/mockLegendEntryData.ts

@@ -1,12 +0,0 @@
-import { LegendEntryProps } from '../FullView/types';
-
-export const mocklegendEntryResult: LegendEntryProps[] = [
-	{
-		label: 'customer',
-		show: true,
-	},
-	{
-		label: 'demo-app',
-		show: false,
-	},
-];

frontend/src/container/GridValueComponent/config.ts

@@ -1,3 +0,0 @@
-import { GridValueComponentProps } from './types';
-
-export const GridValueConfig: Pick<GridValueComponentProps, 'title'> = {};

frontend/src/container/Home/index.tsx

@@ -1,3 +0,0 @@
-import Home from './Home';
-
-export default Home;

frontend/src/container/HostMetricsLoading/HostMetricsLoading.styles.scss

@@ -1,19 +0,0 @@
-.loading-host-metrics {
-	padding: 24px 0;
-	height: 600px;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	.loading-host-metrics-content {
-		display: flex;
-		align-items: center;
-		flex-direction: column;
-
-		.loading-gif {
-			height: 72px;
-			margin-left: -24px;
-		}
-	}
-}

frontend/src/container/HostMetricsLoading/HostMetricsLoading.tsx

@@ -1,24 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { Typography } from 'antd';
-import { DataSource } from 'types/common/queryBuilder';
-
-import loadingPlaneUrl from '@/assets/Icons/loading-plane.gif';
-
-import './HostMetricsLoading.styles.scss';
-
-export function HostMetricsLoading(): JSX.Element {
-	const { t } = useTranslation('common');
-	return (
-		<div className="loading-host-metrics">
-			<div className="loading-host-metrics-content">
-				<img className="loading-gif" src={loadingPlaneUrl} alt="wait-icon" />
-
-				<Typography>
-					{t('pending_data_placeholder', {
-						dataSource: `host ${DataSource.METRICS}`,
-					})}
-				</Typography>
-			</div>
-		</div>
-	);
-}

frontend/src/container/InfraMonitoringHosts/Hosts.tsx

@@ -11,8 +11,8 @@ import { K8sBaseList } from 'container/InfraMonitoringK8s/Base/K8sBaseList';
 import { K8sBaseFilters } from 'container/InfraMonitoringK8s/Base/types';
 import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
 import {
-	useInfraMonitoringCurrentPage,
-	useInfraMonitoringFilters,
+	useInfraMonitoringFiltersK8s,
+	useInfraMonitoringPageListing,
 } from 'container/InfraMonitoringK8s/hooks';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
@@ -32,9 +32,9 @@ import {
 	hostWidgetInfo,
 } from './constants';
 import {
-	hostColumns,
+	getHostItemKey,
+	getHostRowKey,
 	hostColumnsConfig,
-	hostRenderRowData,
 } from './table.config';
 import { getHostsQuickFiltersConfig } from './utils';
 
@@ -42,8 +42,8 @@ import styles from './InfraMonitoringHosts.module.scss';
 
 function Hosts(): JSX.Element {
 	const [showFilters, setShowFilters] = useState(true);
-	const [, setCurrentPage] = useInfraMonitoringCurrentPage();
-	const [urlFilters, setUrlFilters] = useInfraMonitoringFilters();
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
+	const [urlFilters, setUrlFilters] = useInfraMonitoringFiltersK8s();
 
 	const { featureFlags } = useAppContext();
 	const dotMetricsEnabled =
@@ -170,10 +170,10 @@ function Hosts(): JSX.Element {
 						<K8sBaseList
 							controlListPrefix={controlListPrefix}
 							entity={InfraMonitoringEntity.HOSTS}
-							tableColumnsDefinitions={hostColumns}
 							tableColumns={hostColumnsConfig}
 							fetchListData={fetchListData}
-							renderRowData={hostRenderRowData}
+							getRowKey={getHostRowKey}
+							getItemKey={getHostItemKey}
 							eventCategory={InfraMonitoringEvents.HostEntity}
 						/>
 					</div>

frontend/src/container/InfraMonitoringHosts/__tests__/HostsList.test.tsx

@@ -1,190 +0,0 @@
-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 { render, waitFor } from '@testing-library/react';
-import * as getHostListsApi from 'api/infraMonitoring/getHostLists';
-import { initialQueriesMap } from 'constants/queryBuilder';
-import * as useQueryBuilderHooks from 'hooks/queryBuilder/useQueryBuilder';
-import * as useQueryBuilderOperations from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { withNuqsTestingAdapter } from 'nuqs/adapters/testing';
-import * as appContextHooks from 'providers/App/App';
-import * as timezoneHooks from 'providers/Timezone';
-import store from 'store';
-import { LicenseEvent } from 'types/api/licensesV3/getActive';
-
-import Hosts from '../Hosts';
-
-jest.mock('lib/getMinMax', () => ({
-	__esModule: true,
-	default: jest.fn().mockImplementation(() => ({
-		minTime: 1713734400000,
-		maxTime: 1713738000000,
-		isValidShortHandDateTimeFormat: jest.fn().mockReturnValue(true),
-	})),
-	getMinMaxForSelectedTime: jest.fn().mockReturnValue({
-		minTime: 1713734400000000000,
-		maxTime: 1713738000000000000,
-	}),
-}));
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
-	__esModule: true,
-	default: (): JSX.Element => (
-		<div data-testid="date-time-selection">Date Time</div>
-	),
-}));
-jest.mock('components/CustomTimePicker/CustomTimePicker', () => ({
-	__esModule: true,
-	default: ({ onSelect, selectedTime, selectedValue }: any): JSX.Element => (
-		<div data-testid="custom-time-picker">
-			<button onClick={(): void => onSelect('custom')}>
-				{selectedTime} - {selectedValue}
-			</button>
-		</div>
-	),
-}));
-
-const queryClient = new QueryClient({
-	defaultOptions: {
-		queries: {
-			retry: false,
-		},
-	},
-});
-
-jest.mock('react-router-dom', () => {
-	const ROUTES = jest.requireActual('constants/routes').default;
-	return {
-		...jest.requireActual('react-router-dom'),
-		useLocation: jest.fn().mockReturnValue({
-			pathname: ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
-		}),
-	};
-});
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): any => ({
-		safeNavigate: jest.fn(),
-	}),
-}));
-
-jest.spyOn(timezoneHooks, 'useTimezone').mockReturnValue({
-	timezone: {
-		offset: 0,
-	},
-	browserTimezone: {
-		offset: 0,
-	},
-} as any);
-
-jest.spyOn(getHostListsApi, 'getHostLists').mockResolvedValue({
-	statusCode: 200,
-	error: null,
-	message: 'Success',
-	payload: {
-		status: 'success',
-		data: {
-			type: 'list',
-			records: [
-				{
-					hostName: 'test-host',
-					active: true,
-					os: 'linux',
-					cpu: 0.75,
-					cpuTimeSeries: { labels: {}, labelsArray: [], values: [] },
-					memory: 0.65,
-					memoryTimeSeries: { labels: {}, labelsArray: [], values: [] },
-					wait: 0.03,
-					waitTimeSeries: { labels: {}, labelsArray: [], values: [] },
-					load15: 0.5,
-					load15TimeSeries: { labels: {}, labelsArray: [], values: [] },
-				},
-			],
-			groups: null,
-			total: 1,
-			sentAnyHostMetricsData: true,
-			isSendingK8SAgentMetrics: false,
-			endTimeBeforeRetention: false,
-		},
-	},
-	params: {} as any,
-});
-
-jest.spyOn(appContextHooks, 'useAppContext').mockReturnValue({
-	user: {
-		role: 'admin',
-	},
-	featureFlags: [],
-	activeLicenseV3: {
-		event_queue: {
-			created_at: '0',
-			event: LicenseEvent.NO_EVENT,
-			scheduled_at: '0',
-			status: '',
-			updated_at: '0',
-		},
-		license: {
-			license_key: 'test-license-key',
-			license_type: 'trial',
-			org_id: 'test-org-id',
-			plan_id: 'test-plan-id',
-			plan_name: 'test-plan-name',
-			plan_type: 'trial',
-			plan_version: 'test-plan-version',
-		},
-	},
-} as any);
-
-jest.spyOn(useQueryBuilderHooks, 'useQueryBuilder').mockReturnValue({
-	currentQuery: initialQueriesMap.metrics,
-	setSupersetQuery: jest.fn(),
-	setLastUsedQuery: jest.fn(),
-	handleSetConfig: jest.fn(),
-	resetQuery: jest.fn(),
-	updateAllQueriesOperators: jest.fn(),
-} as any);
-
-jest.spyOn(useQueryBuilderOperations, 'useQueryOperations').mockReturnValue({
-	handleChangeQueryData: jest.fn(),
-} as any);
-
-const Wrapper = withNuqsTestingAdapter({ searchParams: {} });
-
-describe('Hosts', () => {
-	beforeEach(() => {
-		queryClient.clear();
-	});
-
-	it('renders hosts list table', async () => {
-		const { container } = render(
-			<Wrapper>
-				<QueryClientProvider client={queryClient}>
-					<MemoryRouter>
-						<Provider store={store}>
-							<Hosts />
-						</Provider>
-					</MemoryRouter>
-				</QueryClientProvider>
-			</Wrapper>,
-		);
-		await waitFor(() => {
-			expect(container.querySelector('.ant-table')).toBeInTheDocument();
-		});
-	});
-
-	it('renders filters', async () => {
-		const { container } = render(
-			<Wrapper>
-				<QueryClientProvider client={queryClient}>
-					<MemoryRouter>
-						<Provider store={store}>
-							<Hosts />
-						</Provider>
-					</MemoryRouter>
-				</QueryClientProvider>
-			</Wrapper>,
-		);
-		await waitFor(() => {
-			expect(container.querySelector('.filters')).toBeInTheDocument();
-		});
-	});
-});